/* =========================================================
   LYNK — FINITIONS
   Chargé APRÈS lynk-theme.css. Même univers « autocollants » :
   on ajoute du relief, du mouvement au toucher et des détails,
   sans changer les couleurs, les polices ni la structure.
   ========================================================= */

:root {
    --status-online: #22C55E;
    --status-class: #F43F5E;
    --status-offline: #A9A3C2;
    --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
    --lift-lg: 0 8px 0 var(--ink);
}

::selection { background: var(--sun); color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 3px;
    border-radius: 10px;
}

/* ---------- Fond : deux gros autocollants flous dans les coins ---------- */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 4%, rgba(255, 210, 63, .30), transparent 24%),
        radial-gradient(circle at 96% 92%, rgba(255, 92, 147, .20), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(108, 184, 255, .22), transparent 22%);
}

/* ---------- Barre latérale ---------- */

.sidebar .brand-icon { transition: rotate .35s var(--ease-pop); }
.sidebar .brand:hover .brand-icon { rotate: -10deg; }

.nav-item {
    border: 2px solid transparent;
    border-radius: 14px;
    transition: background-color .15s, border-color .15s, translate .2s var(--ease-pop), box-shadow .15s;
}
.nav-item:hover:not(.active) {
    background: var(--violet-soft);
    border-color: var(--ink);
    translate: 4px 0;
}
.nav-item.active {
    background: var(--sun);
    color: var(--ink);
    border-color: var(--ink);
    box-shadow: var(--lift-sm);
}
.nav-item:active { translate: 0 2px; box-shadow: none; }

.logout-button { transition: translate .15s, box-shadow .15s, background-color .15s; }
.logout-button:hover { translate: 0 -2px; box-shadow: var(--lift-sm); }

/* ---------- Titres de page : surligneur ---------- */

.topbar h1 {
    display: inline;
    padding: 0 .18em;
    margin-left: -.18em;
    background: linear-gradient(transparent 64%, var(--sun) 64% 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.section-header h2, .section-header h3 { position: relative; }

/* ---------- Cartes : relief et enfoncement ---------- */

.profile-card, .mission-card, .badge-card, .ranking-row, .discover-interest,
.rewards-stat-card, .rewards-info-card, .badges-intro-card, .empty-card,
.welcome-card, .theme-choice, .lynk-notification-card {
    transition: translate .22s var(--ease-pop), box-shadow .22s var(--ease-pop), background-color .2s;
}

.profile-card:hover, .mission-card:hover, .badge-card:hover, .ranking-row:hover,
.theme-choice:hover, .rewards-stat-card:hover {
    translate: -2px -4px;
    box-shadow: var(--lift-lg);
}
.profile-card:active, .mission-card:active, .badge-card:active, .ranking-row:active {
    translate: 0 3px;
    box-shadow: 0 2px 0 var(--ink);
    transition-duration: .06s;
}

/* Le nom d'un profil se souligne au survol de sa carte */
.profile-card .profile-info h3 {
    background: linear-gradient(var(--sun), var(--sun)) 0 100% / 0 .32em no-repeat;
    transition: background-size .3s ease;
    width: fit-content;
}
.profile-card:hover .profile-info h3 { background-size: 100% .32em; }

/* ---------- Avatars : plus de présence ---------- */

.profile-avatar, .profile-avatar-large {
    box-shadow: 3px 3px 0 var(--ink);
    transition: rotate .3s var(--ease-pop), scale .3s var(--ease-pop);
}
.profile-card:hover .profile-avatar,
.profile-avatar-large:hover { rotate: -4deg; scale: 1.05; }

.profile-avatar-large { box-shadow: 5px 5px 0 var(--ink); }

/* ---------- Pastille de statut : vert / rouge / gris ---------- */

.lynk-status-dot {
    border-color: var(--card, #fff);
    background-image: none;
}
.lynk-status-dot[data-status="online"]  { background: var(--status-online); }
.lynk-status-dot[data-status="course"]  { background: var(--status-class); }
.lynk-status-dot[data-status="offline"] { background: var(--status-offline); }

.lynk-status-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    pointer-events: none;
}
.lynk-status-dot[data-status="online"]  { color: var(--status-online); }
.lynk-status-dot[data-status="course"]  { color: var(--status-class); }
.lynk-status-dot[data-status="online"]::after { animation: lynk-ping 2.8s ease-out infinite; }
.lynk-status-dot[data-status="course"]::after { animation: lynk-ping 1.8s ease-out infinite; }

@keyframes lynk-ping {
    0%   { opacity: .8; scale: .9; }
    80%, 100% { opacity: 0; scale: 2; }
}

/* ---------- Boutons ---------- */

.primary-button, .login-button, .secondary-button, .danger-button,
.discover-match-button, .rewards-badges-button, .mail-button {
    position: relative;
    overflow: hidden;
    transition: translate .18s var(--ease-pop), box-shadow .18s var(--ease-pop), background-color .15s, filter .15s;
}
.primary-button:hover, .login-button:hover, .secondary-button:hover, .danger-button:hover,
.discover-match-button:hover, .rewards-badges-button:hover {
    translate: 0 -3px;
    box-shadow: var(--lift-lg);
}
.primary-button:active, .login-button:active, .secondary-button:active, .danger-button:active,
.discover-match-button:active, .rewards-badges-button:active {
    translate: 0 4px;
    box-shadow: 0 1px 0 var(--ink);
    transition-duration: .05s;
}
.secondary-button:hover { background-color: var(--sun-soft); }

/* Reflet qui traverse les boutons principaux */
.primary-button::after, .login-button::after, .discover-match-button::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}
.primary-button:hover::after, .login-button:hover::after, .discover-match-button:hover::after {
    animation: lynk-shine .7s ease;
}
@keyframes lynk-shine { to { inset-inline-start: 130%; } }

.primary-button:disabled, .discover-match-button:disabled { filter: grayscale(.4); opacity: .7; translate: 0; box-shadow: var(--lift-sm); }

/* ---------- Champs ---------- */

.input-group input, .input-group textarea, .input-group select,
.message-input, .search-input {
    border: var(--border);
    border-radius: 14px;
    transition: box-shadow .18s var(--ease-pop), translate .18s var(--ease-pop), border-color .15s;
}
.input-group input:focus, .input-group textarea:focus, .input-group select:focus,
.message-input:focus, .search-input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 4px 0 var(--violet);
    translate: 0 -2px;
}
.input-group label { transition: color .15s; }
.input-group:focus-within label { color: var(--violet-deep); }

/* ---------- Centres d'intérêt : pastilles façon stickers ---------- */

.interest, .discover-interest, .interest-options label {
    transition: translate .2s var(--ease-pop), background-color .15s, box-shadow .2s;
}
.interest:nth-child(odd)  { rotate: -1.2deg; }
.interest:nth-child(even) { rotate: 1deg; }
.interest:hover, .discover-interest:hover {
    rotate: 0deg;
    translate: 0 -2px;
    background-color: var(--sun);
    box-shadow: var(--lift-sm);
}

/* ---------- Classement : podium ---------- */

.ranking-top-1 { background: linear-gradient(100deg, var(--sun-soft), var(--card) 70%); box-shadow: 0 6px 0 var(--ink); }
.ranking-top-2 { background: linear-gradient(100deg, #E6E8F6, var(--card) 70%); }
.ranking-top-3 { background: linear-gradient(100deg, #FFDCC2, var(--card) 70%); }
.ranking-top-1 .ranking-avatar { box-shadow: 0 0 0 4px var(--sun), 0 0 0 6px var(--ink); }

/* ---------- Badges et missions ---------- */

.badge-card img, .mission-badge-image, .lynk-badge-icon {
    transition: rotate .35s var(--ease-pop), scale .35s var(--ease-pop);
}
.badge-card:hover img, .mission-card:hover .mission-badge-image { rotate: -8deg; scale: 1.12; }
.lynk-badge-icon:hover { rotate: 12deg; scale: 1.25; }

.mission-progress { overflow: hidden; }
.mission-progress > * {
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 8px, transparent 8px 16px);
    background-size: 22px 22px;
    animation: lynk-stripes 1.2s linear infinite;
}
@keyframes lynk-stripes { to { background-position: 22px 0; } }

/* ---------- Accueil : formes qui flottent doucement ---------- */

.welcome-art .a1, .welcome-art .a2, .welcome-art .a3, .a1, .a2, .a3 {
    animation: lynk-float 6s ease-in-out infinite;
}
.a2 { animation-duration: 7.5s; animation-delay: -2s; }
.a3 { animation-duration: 5s;   animation-delay: -3.5s; }
@keyframes lynk-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

/* ---------- Entrée de page : une seule séquence au chargement ---------- */

/* L'entrée des blocs est pilotée uniquement par .lynk-page-enter.
   Ne pas mettre d'animation par défaut ici : sinon, lorsque la classe
   est retirée après l'entrée, l'animation se rejoue une seconde fois. */
@keyframes lynk-rise {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}

/* ---------- Fenêtres et notifications : apparition « pop » ---------- */

.lynk-modal-card, .lynk-notification-sheet {
    animation: lynk-pop .35s var(--ease-pop) both;
}
/* Les notifications doivent disparaître au bout d'un moment : on évite le
   remplissage « both », sinon l'opacité finale resterait figée à 1 et le
   message ne partirait jamais de l'écran. */
.lynk-toast, .lynk-ui-toast {
    animation: lynk-pop .35s var(--ease-pop) backwards;
}
@keyframes lynk-pop {
    from { opacity: 0; scale: .88; translate: 0 12px; }
    to   { opacity: 1; scale: 1;   translate: 0 0; }
}

.notification-dot { animation: lynk-bump 2.4s ease-in-out infinite; }
@keyframes lynk-bump {
    0%, 86%, 100% { scale: 1; }
    92% { scale: 1.3; }
}

/* ---------- Barre de défilement ---------- */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
    background: var(--violet);
    border: 3px solid var(--paper);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--violet-deep); }

/* ---------- Mobile : pas de survol, retours plus francs ---------- */

@media (hover: none) {
    .profile-card:hover, .mission-card:hover, .badge-card:hover, .ranking-row:hover,
    .primary-button:hover, .secondary-button:hover, .danger-button:hover { translate: 0; box-shadow: var(--lift); }
    .nav-item:hover:not(.active) { translate: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* ---------- Personnalisation des couleurs ---------- */
.accent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px;}
.accent-choice{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:2px solid var(--ink);border-radius:16px;background:var(--card);color:var(--ink);font:inherit;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s;}
.accent-choice span{width:30px;height:30px;border-radius:10px;background:var(--choice);border:2px solid var(--ink);flex:0 0 auto;}
.accent-choice:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink);}
.accent-choice.is-selected{border-color:var(--choice);box-shadow:0 3px 0 var(--choice);}
.accent-choice.is-selected::after{content:'✓';position:absolute;right:9px;top:7px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--choice);color:#fff;font-size:12px;border:2px solid var(--ink);}
.accent-custom{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:10px 12px;border:2px dashed var(--ink);border-radius:16px;background:var(--card);font-weight:800;cursor:pointer;}
.accent-custom input{width:42px;height:38px;padding:0;border:0;background:transparent;cursor:pointer;}
.accent-preview-card{margin-top:18px;display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--violet-soft);border:2px solid var(--ink);}
.accent-preview-dot{width:14px;height:14px;border-radius:50%;background:var(--violet);border:2px solid var(--ink);flex:0 0 auto;}
.accent-preview-card div{display:flex;flex-direction:column;gap:2px;flex:1;}
.accent-preview-card small{color:var(--muted);}
.accent-preview-button{width:auto;height:42px;padding:0 16px;}

/* ---------- Profil enrichi ---------- */
.profile-hero-card{position:relative;overflow:hidden;padding:0!important;}
.profile-cover{height:155px;background:linear-gradient(135deg,var(--violet),var(--sky));position:relative;}
.profile-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.32),transparent 26%),radial-gradient(circle at 15% 90%,rgba(255,255,255,.18),transparent 24%);}
.profile-hero-content{position:relative;padding:0 28px 28px;text-align:center;}
.profile-hero-avatar{margin:-58px auto 14px!important;position:relative;z-index:2;border:5px solid var(--card);width:112px!important;height:112px!important;font-size:42px!important;}
.profile-hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px auto 0;max-width:640px;}
.profile-stat{padding:13px 10px;background:var(--paper);border:2px solid var(--ink);border-radius:16px;}
.profile-stat strong{display:block;font-family:var(--font-display);font-size:19px;color:var(--violet);}
.profile-stat span{font-size:12px;color:var(--muted);font-weight:700;}
.profile-info-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;margin-top:22px;}
.profile-mini-card{background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:22px;box-shadow:var(--lift-sm);}
.profile-mini-card h3{margin:0 0 12px;font-size:16px;}
.profile-meta-list{display:grid;gap:10px;}
.profile-meta-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed rgba(27,19,64,.18);}
.profile-meta-item:last-child{border-bottom:0;}
.profile-meta-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--violet-soft);flex:0 0 auto;}
.profile-meta-item strong{display:block;font-size:13px;}.profile-meta-item span{font-size:13px;color:var(--muted);}
.profile-interest-chip{padding:8px 12px;border-radius:999px;background:var(--violet-soft);color:var(--violet);border:1px solid color-mix(in srgb,var(--violet) 25%,white);font-weight:800;font-size:13px;}
.profile-empty-note{color:var(--muted);font-size:13px;}
@media(max-width:760px){.profile-info-grid{grid-template-columns:1fr}.profile-cover{height:125px}.profile-hero-content{padding-left:16px;padding-right:16px}.profile-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.profile-stats{grid-template-columns:1fr}.profile-stat{display:flex;justify-content:space-between;align-items:center}.profile-stat strong{font-size:16px}}


/* ---------- Pages publiques / légales ---------- */
.public-legal-page{min-height:100vh;background:var(--paper);padding:36px 20px 50px;}
.public-legal-shell{width:min(1080px,100%);margin:0 auto;}
.public-back-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;text-decoration:none;margin-bottom:18px;}
.public-back-link:hover{color:var(--violet);}
.public-legal-hero{background:var(--card);border:2px solid var(--ink);border-radius:28px;padding:34px;box-shadow:8px 8px 0 var(--ink);margin-bottom:24px;}
.public-legal-hero h1{font-size:clamp(28px,5vw,48px);margin:10px 0 12px;}
.public-legal-hero p{max-width:760px;color:var(--muted);font-size:17px;line-height:1.65;margin:0;}
.public-legal-meta{margin-top:18px;font-size:12px;font-weight:800;color:var(--violet);}
.public-legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.legal-card{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:24px;box-shadow:var(--lift-sm);}
.legal-card:nth-child(1){grid-column:span 2;background:var(--violet-soft);}
.legal-number{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--violet);color:#fff;font-weight:900;font-size:12px;margin-bottom:12px;}
.legal-card h2{font-size:19px;margin:0 0 10px;}
.legal-card p,.legal-card li{color:var(--muted);font-size:14px;line-height:1.75;}
.legal-card ul{padding-left:20px;margin:10px 0 0;}
.legal-card a{color:var(--violet);font-weight:800;}
.public-legal-footer{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:28px;}
.public-legal-footer a{color:var(--muted);font-weight:800;text-decoration:none;font-size:13px;}.public-legal-footer a:hover{color:var(--violet);}
@media(max-width:700px){.public-legal-page{padding:20px 14px 36px}.public-legal-hero{padding:24px;box-shadow:5px 5px 0 var(--ink)}.public-legal-grid{grid-template-columns:1fr}.legal-card:nth-child(1){grid-column:auto}}
/* Boîte aux lettres : le bouton du header reste un vrai lien navigable. */
.mail-button[href="mailbox.html"] {
    text-decoration: none;
    cursor: pointer;
}


/* Liens légaux accessibles depuis toutes les pages connectées */
.lynk-legal-links{display:flex;flex-wrap:wrap;gap:6px 10px;padding:10px 14px 0;margin-top:8px;border-top:1px solid rgba(255,255,255,.10);font-size:11px;line-height:1.3;}
.lynk-legal-links a{color:inherit;text-decoration:none;opacity:.72;transition:opacity .18s ease;}
.lynk-legal-links a:hover{opacity:1;text-decoration:underline;}
.sidebar.collapsed .lynk-legal-links{display:none;}
@media (max-width:750px){.lynk-legal-links{padding:10px 12px;font-size:10px;}}

/* Liens légaux : TOUJOURS sous Paramètres et Déconnexion, tout en bas de la sidebar. */
.sidebar .sidebar-bottom {
  margin-top: auto !important;
  flex: 0 0 auto !important;
}
.sidebar .lynk-legal-links {
  order: 99;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 8px 0 0;
  padding: 10px 14px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  line-height: 1.3;
}
.sidebar .lynk-legal-links a {
  color: inherit;
  text-decoration: none;
  opacity: .72;
  transition: opacity .18s ease;
}
.sidebar .lynk-legal-links a:hover { opacity: 1; text-decoration: underline; }
.sidebar.collapsed .lynk-legal-links { display: none; }
@media (max-width:750px) {
  .sidebar .lynk-legal-links { padding: 10px 12px; font-size: 10px; }
}

/* ---------- Hover sidebar — micro-interactions raffinées ---------- */
.nav-item {
    position: relative;
    overflow: hidden;
    will-change: transform;
    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .28s cubic-bezier(.22,1,.36,1),
        box-shadow .28s ease;
}

.nav-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.055) 48%, transparent 76%);
    transform: translateX(-120%);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

.nav-item::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.68);
    transform: translateY(-50%);
    transition: height .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    opacity: 0;
    pointer-events: none;
}

.nav-item:hover:not(.active) {
    background: linear-gradient(90deg, rgba(124,58,237,.25), rgba(124,58,237,.16));
    border-color: rgba(255,255,255,.16);
    transform: translateX(3px);
    box-shadow: 0 7px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.055);
}

.nav-item:hover:not(.active)::before {
    transform: translateX(120%);
}

.nav-item:hover:not(.active)::after {
    height: 18px;
    opacity: 1;
}

.nav-item:hover:not(.active) span:first-child {
    background: rgba(255,255,255,.13);
    transform: translateY(-1px) scale(1.055) rotate(-2deg);
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.nav-item:hover:not(.active) span:last-child {
    transform: translateX(2px);
    color: rgba(255,255,255,.94);
}

.nav-item span:first-child,
.nav-item span:last-child {
    position: relative;
    z-index: 1;
    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        background-color .22s ease,
        box-shadow .22s ease,
        color .22s ease;
}

.nav-item:active:not(.active) {
    transform: translateX(2px) scale(.985);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
}

@media (prefers-reduced-motion: reduce) {
    .nav-item,
    .nav-item::before,
    .nav-item::after,
    .nav-item span:first-child,
    .nav-item span:last-child {
        transition: none;
    }
}

/* ---------- Correctif affichage page profil ---------- */
/* .profile-card est une carte horizontale générique. Le hero du profil doit
   rester une carte verticale pleine largeur. */
.profile-card.profile-hero-card{
  display:block;
  width:100%;
  box-sizing:border-box;
  gap:0;
  align-items:initial;
  flex-wrap:nowrap;
}
.profile-card.profile-hero-card > .profile-cover{
  display:block;
  width:100%;
}
.profile-card.profile-hero-card > .profile-hero-content{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0;
}
.profile-hero-content .lynk-name-line{
  width:100%;
  justify-content:center!important;
  flex-wrap:wrap;
}
.profile-hero-content > #profileIdentifier,
.profile-hero-content > #profileClass,
.profile-hero-content > #profileRole,
.profile-hero-content > #profileBirthday{
  text-align:center;
}
.profile-hero-content .profile-stats{
  width:min(100%,640px);
}

@media (max-width:750px){
  .profile-card.profile-hero-card{
    flex-wrap:nowrap;
  }
  .profile-hero-actions .secondary-button,
  .profile-hero-actions .login-button{
    width:auto;
  }
}

/* Chat — bulles plus compactes et bouton d'actions discret */
.chat-page .chat-message-row > div {
    max-width: min(38%, 400px) !important;
}

@media (max-width: 750px) {
    .chat-page .chat-message-row > div {
        max-width: 64% !important;
    }
}


/* Badge status */
.always-active-text { color: #22c55e !important; }

/* Surnoms privés dans la liste d'amis */
.discussions-page .profile-card {
    position: relative;
}
.discussions-page .friend-rename-button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--ink, #1B1340);
    border-radius: 10px;
    background: var(--paper, #fff);
    color: var(--ink, #1B1340);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 rgba(27,19,64,.16);
    transition: transform .16s ease, background .16s ease, color .16s ease;
}
.discussions-page .friend-rename-button:hover {
    transform: translateY(-2px) rotate(-3deg);
    background: var(--violet-soft, #eee8ff);
    color: var(--violet, #6c4cff);
}
.discussions-page .friend-rename-button:active {
    transform: translateY(0);
}

/* Épingler une conversation en haut de la liste */
.discussions-page .conversation-pin-button {
    flex: 0 0 auto;
    margin-left: 4px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: var(--border, 1px solid #E8E1F1);
    border-radius: 11px;
    background: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease;
}

.discussions-page .conversation-pin-button:hover {
    transform: translateY(-2px);
    background: var(--violet-soft, #eee8ff);
}

.discussions-page .conversation-pin-button:active {
    transform: translateY(0);
}

.discussions-page .profile-card.is-pinned {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

html[data-theme="dark"] .discussions-page .conversation-pin-button {
    background: #2A1E4A;
    color: #E7DDFF;
}
@media (max-width: 650px) {
    .discussions-page .friend-rename-button {
        top: 9px;
        right: 9px;
    }
}

/* ---------- Sondage après 3 minutes ---------- */
.lynk-feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(27, 19, 64, .56);
    backdrop-filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.lynk-feedback-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.lynk-feedback-overlay.is-closing {
    opacity: 0;
}

.lynk-feedback-card {
    position: relative;
    width: min(520px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    overflow: auto;
    padding: 32px;
    border: 2px solid var(--ink);
    border-radius: 28px;
    background: var(--card);
    box-shadow: 0 10px 0 var(--ink), 0 24px 70px rgba(27, 19, 64, .24);
    transform: translateY(18px) scale(.97);
    transition: transform .22s var(--ease-pop);
}

.lynk-feedback-overlay.is-visible .lynk-feedback-card {
    transform: translateY(0) scale(1);
}

.lynk-feedback-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ink);
}

.lynk-feedback-close:hover { background: var(--rose-soft); translate: 0 -2px; }
.lynk-feedback-close:active { translate: 0 2px; box-shadow: none; }

.lynk-feedback-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 2px solid var(--ink);
    border-radius: 18px;
    background: var(--sun);
    color: var(--ink);
    font-size: 30px;
    box-shadow: var(--lift-sm);
    rotate: -4deg;
}

.lynk-feedback-kicker {
    margin: 0 0 7px;
    color: var(--violet);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lynk-feedback-card h2 {
    max-width: 420px;
    margin: 0 40px 10px 0;
    font-size: clamp(23px, 4vw, 31px);
}

.lynk-feedback-subtitle {
    margin: 0 0 24px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.lynk-feedback-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 4px;
}

.lynk-feedback-star {
    width: 54px;
    height: 54px;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 15px;
    background: var(--paper);
    color: #C7C0DB;
    font-size: 30px;
    cursor: pointer;
    transition: transform .15s var(--ease-pop), background-color .15s, color .15s, box-shadow .15s;
}

.lynk-feedback-star:hover,
.lynk-feedback-star:focus-visible,
.lynk-feedback-star.is-selected {
    background: var(--sun);
    color: var(--ink);
    transform: translateY(-4px) rotate(-3deg);
    box-shadow: 0 4px 0 var(--ink);
}

/* Étoiles en image : grisées par défaut, colorées à la sélection */
.lynk-feedback-icon .lynk-ic {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.lynk-feedback-star .lynk-ic {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    filter: grayscale(1);
    opacity: .4;
    transition: filter .15s, opacity .15s;
}

.lynk-feedback-star:hover .lynk-ic,
.lynk-feedback-star:focus-visible .lynk-ic,
.lynk-feedback-star.is-selected .lynk-ic {
    filter: none;
    opacity: 1;
}

.lynk-feedback-rating-label {
    min-height: 22px;
    margin: 8px 0 22px;
    color: var(--ink-soft);
    text-align: center;
    font-weight: 800;
}

.lynk-feedback-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 900;
}

.lynk-feedback-label span {
    color: var(--muted);
    font-weight: 600;
}

.lynk-feedback-textarea {
    display: block;
    width: 100%;
    min-height: 105px;
    resize: vertical;
    padding: 13px 14px;
    border: 2px solid var(--ink);
    border-radius: 15px;
    background: var(--paper);
    color: var(--ink);
    outline: none;
    box-sizing: border-box;
}

.lynk-feedback-textarea:focus {
    box-shadow: 0 4px 0 var(--violet);
}

.lynk-feedback-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}

.lynk-feedback-counter {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.lynk-feedback-submit {
    border: 2px solid var(--ink);
    border-radius: 13px;
    padding: 11px 17px;
    background: var(--violet);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: var(--lift-sm);
    transition: translate .15s var(--ease-pop), box-shadow .15s, opacity .15s;
}

.lynk-feedback-submit:hover:not(:disabled) { translate: 0 -2px; }
.lynk-feedback-submit:active:not(:disabled) { translate: 0 2px; box-shadow: none; }
.lynk-feedback-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.lynk-feedback-status {
    min-height: 20px;
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    text-align: right;
}

.lynk-feedback-status.is-error { color: #B42318; font-weight: 800; }

@media (max-width: 560px) {
    .lynk-feedback-overlay { padding: 14px; }
    .lynk-feedback-card { padding: 24px 18px; border-radius: 23px; }
    .lynk-feedback-star { width: 48px; height: 48px; font-size: 26px; }
    .lynk-feedback-footer { align-items: stretch; flex-direction: column; }
    .lynk-feedback-submit { width: 100%; }
    .lynk-feedback-counter { text-align: right; }
}


/* Classement : profil cliquable */
.rewards-ranking-list .ranking-row {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.rewards-ranking-list .ranking-row:hover {
  text-decoration: none;
}
.rewards-ranking-list .ranking-avatar {
  flex-shrink: 0;
}


/* Animation jouée par la bulle du message qui vient d'être envoyé.
   Le sélecteur est plus spécifique que `.chat-page .chat-message-row`
   (style.css) afin de ne pas être écrasé par l'animation d'entrée. */
.chat-page .chat-message-row.lynk-message-send-animation {
    animation: lynkMessageSendPop .42s cubic-bezier(.2, .9, .3, 1.3);
}

#messageForm.lynk-message-sending {
    animation: lynkMessageComposerPulse .34s ease;
}

/* Animation du bouton d'envoi : l'icône « décolle » puis retombe. */
.lynk-send-button--firing .lynk-send-icon {
    animation: lynkSendIconLaunch .46s cubic-bezier(.2, .9, .3, 1.4);
}

@keyframes lynkMessageSendPop {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(.9);
        filter: blur(2px);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.03);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lynkSendIconLaunch {
    0% { transform: translateY(0) scale(1) rotate(0deg); }
    35% { transform: translateY(-9px) scale(1.16) rotate(-14deg); }
    70% { transform: translateY(2px) scale(.94) rotate(5deg); }
    100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes lynkMessageComposerPulse {
    0%, 100% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.012);
    }
}


/* =========================================================
   DISCUSSION — BOUTON D'ENVOI (ICÔNE) ET BOUTON SONDAGE
   ========================================================= */

.lynk-send-button {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease;
}

.lynk-send-button .lynk-send-icon {
    width: 34px;
    height: 34px;
    display: block;
    pointer-events: none;
}

.lynk-send-button:hover { transform: translateY(-1px) scale(1.05); }
.lynk-send-button:active { transform: translateY(1px) scale(.96); }
.lynk-send-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.lynk-poll-button {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease;
}

.lynk-poll-button .lynk-poll-icon {
    width: 30px;
    height: 30px;
    display: block;
    pointer-events: none;
}

.lynk-poll-button:hover { transform: translateY(-1px) scale(1.05); }
.lynk-poll-button:active { transform: translateY(1px) scale(.96); }
.lynk-poll-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Modale de création de sondage */
.poll-modal-card {
    position: relative;
}

.poll-option-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.poll-option-row input {
    flex: 1;
}

.poll-option-remove {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: #fff;
    color: var(--danger-ink);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ink);
}

.poll-option-remove:hover { background: var(--rose-soft); }

/* Sondage affiché dans la conversation */
.chat-poll {
    min-width: min(220px, 55vw);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-poll-question {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-poll-option {
    position: relative;
    width: 100%;
    text-align: left;
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 8px 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
}

.chat-poll-option .chat-poll-option-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: var(--violet-soft);
    transition: width .25s ease;
    z-index: 0;
}

.chat-poll-option .chat-poll-option-label {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.chat-poll-option .chat-poll-option-text {
    word-break: break-word;
}

.chat-poll-option .chat-poll-option-value {
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--violet-deep);
}

.chat-poll-option.is-voted {
    border-color: var(--violet-deep);
}

.chat-poll-option.is-voted .chat-poll-option-fill {
    background: var(--sun-soft);
}

.chat-poll-option:disabled {
    cursor: default;
    opacity: .75;
}

.chat-poll-meta {
    font-size: 11px;
    opacity: .8;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

html[data-theme="dark"] .chat-poll-option {
    background: #2A1E4A;
    color: #E7DDFF;
}

html[data-theme="dark"] .chat-poll-option .chat-poll-option-fill {
    background: rgba(124, 58, 237, .45);
}

html[data-theme="dark"] .chat-poll-option.is-voted .chat-poll-option-fill {
    background: rgba(255, 210, 63, .35);
}


/* =========================================================
   ONGLET MATCH — ICÔNE UN PEU PLUS GRANDE
   ========================================================= */

.nav-item[href="discover.html"] .nav-tab-icon,
.nav-item[href="discover.html"] .match-tab-icon {
    transform: scale(1.18);
    transform-origin: center;
}

/* =========================================================
   MATCH — PSEUDO EN GRAND, NOM/PRÉNOM EN PLUS PETIT
   Le pseudo (@…) s'affiche en grand, et le nom-prénom réel
   de la personne apparaît juste en dessous, en plus discret.
   ========================================================= */

.discover-match-pseudo {
    word-break: break-word;
}

.discover-match-realname {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 650;
    color: var(--muted);
}

/* =========================================================
   ACCUEIL — BLOC « TES COURS »
   ========================================================= */

.my-schedule-card {
    background: #fff;
    border: var(--border);
    border-radius: 22px;
    box-shadow: var(--lift-sm);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.my-schedule-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.my-schedule-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 14px;
    background: var(--violet-soft);
    border: var(--border);
}

.my-schedule-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.my-schedule-info {
    min-width: 0;
}

.my-schedule-kicker {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--violet-deep);
}

.my-schedule-info h3 {
    margin: 2px 0 3px;
    font-size: 18px;
    word-break: break-word;
}

.my-schedule-details {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14px;
}

.my-schedule-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.my-schedule-toggle {
    border: var(--border);
    background: #fff;
    color: var(--ink);
    border-radius: 12px;
    padding: 8px 14px;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ink);
    transition: transform .12s ease, background .15s ease;
}

.my-schedule-toggle:hover {
    background: var(--violet-soft);
}

.my-schedule-toggle:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink);
}

.my-schedule-toggle.is-active {
    background: var(--sun);
}

html[data-theme="dark"] .my-schedule-card {
    background: #2A1E4A;
}

html[data-theme="dark"] .my-schedule-info h3 {
    color: #E7DDFF;
}

html[data-theme="dark"] .my-schedule-details {
    color: #C9BFE0;
}

html[data-theme="dark"] .my-schedule-toggle {
    background: #2A1E4A;
    color: #E7DDFF;
}

html[data-theme="dark"] .my-schedule-toggle.is-active {
    background: var(--sun);
    color: var(--ink);
}

/* Bouton « Voir tout son emploi du temps » */
.my-schedule-viewall {
    margin-left: auto;
    border: var(--border);
    background: var(--violet-soft);
    color: var(--violet-deep);
    border-radius: 12px;
    padding: 8px 14px;
    font: inherit;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease;
}

.my-schedule-viewall:hover {
    background: var(--violet);
    color: #fff;
}

.my-schedule-viewall:active {
    transform: translateY(2px);
}

/* =========================================================
   MODALE EMPLOI DU TEMPS
   ========================================================= */

#scheduleModalBody {
    max-height: min(60vh, 520px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.schedule-day {
    border: var(--border);
    border-radius: 16px;
    padding: 12px 14px;
    background: var(--card, #fff);
}

.schedule-day.is-today {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.schedule-day-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--ink);
}

.schedule-today-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    background: var(--violet);
    border-radius: 999px;
    padding: 2px 9px;
}

/* Semaine en cours : chaque matière occupe toute la largeur de la journée,
   les matières simultanées se partagent la ligne. */
.schedule-day-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ligne horaire : les matières simultanées sont côte à côte. */
.schedule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.schedule-slot {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: var(--border);
    border-radius: 14px;
    background: var(--card, #fff);
    box-shadow: 0 3px 0 var(--ink);
}

/* Pause entre deux cours : petit bloc discret sur une ligne. */
.schedule-pause {
    align-self: center;
    max-width: 100%;
    padding: 3px 12px;
    border: 1px dashed var(--ink-soft, #9A93A4);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    text-align: center;
}

.schedule-slot.is-current {
    background: var(--sun, #FFD23F);
}

.schedule-slot-time {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.1;
    color: var(--ink);
}

.schedule-slot-time small {
    font-weight: 600;
    opacity: .65;
    font-size: 11px;
}

.schedule-slot-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.schedule-slot-info strong {
    font-size: 14px;
    color: var(--ink);
    word-break: break-word;
}

.schedule-slot-info span {
    font-size: 12px;
    color: var(--ink-soft);
}

/* Nom de prof cliquable : mène à son profil (view-profile.html). */
.schedule-teacher {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--violet);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.schedule-teacher:hover {
    color: var(--violet-deep);
}

.schedule-teacher:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
}

html[data-theme="dark"] .schedule-day {
    background: #2A1E4A;
}

html[data-theme="dark"] .schedule-slot {
    background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .schedule-slot.is-current {
    background: var(--sun, #FFD23F);
}

html[data-theme="dark"] .schedule-day-head,
html[data-theme="dark"] .schedule-slot-info strong,
html[data-theme="dark"] .schedule-slot-time {
    color: #E7DDFF;
}

html[data-theme="dark"] .schedule-slot-info span {
    color: #C9BFE0;
}


/* =========================================================
   BADGES — COULEUR DU TEXTE SOUS CHAQUE BADGE
   Rouge tant que le badge n'est pas obtenu, vert dès qu'il est
   obtenu ou qu'il est « toujours actif ».
   ========================================================= */

.badge-card .always-active-text { color: #D92D20; }
.badge-card.is-owned .always-active-text { color: #12805C; }

/* =========================================================
   ACCUEIL — BOUTON « VOIR TOUT SON EMPLOI DU TEMPS » (MOBILE)
   Sur téléphone, le bouton passe sur sa propre ligne, juste sous
   « Cours actuel » / « Cours suivant ».
   ========================================================= */

@media (max-width: 750px) {
    .my-schedule-viewall {
        flex-basis: 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* =========================================================
   DISCUSSION — SONDAGES (MOBILE)
   Le sondage ne doit jamais déborder de la bulle du message.
   ========================================================= */

@media (max-width: 750px) {
    .chat-poll {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .chat-poll-question {
        font-size: 13px;
    }

    .chat-poll-option {
        font-size: 12.5px;
        padding: 7px 9px;
    }

    .chat-poll-option .chat-poll-option-label {
        gap: 6px;
    }

    .chat-poll-option .chat-poll-option-text {
        overflow-wrap: anywhere;
    }

    .chat-poll-meta {
        font-size: 10.5px;
    }
}

/* =========================================================
   BARRE LATÉRALE (MOBILE) — RECOUVRE LA PAGE AU LIEU DE L'ÉCRASER
   Le rail rétracté reste visible et laisse un décalage de 68px au
   contenu. Dépliée, la barre passe par-dessus la page sans en
   modifier la largeur.
   ========================================================= */

@media (max-width: 750px) {
    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 1200 !important;
    }

    .sidebar.collapsed {
        box-shadow: none;
    }

    .sidebar:not(.collapsed) {
        box-shadow: 0 0 0 100vmax rgba(20, 12, 40, .28);
    }

    .main-content {
        margin-left: 68px !important;
    }
}

/* Barre latérale placée à droite sur mobile : le rail fixe et le décalage
   du contenu s'inversent (réglage « Position de la barre latérale » dans
   Affichage). Sans cela, la barre restait collée à gauche et le contenu
   gardait un décalage à gauche, ce qui cassait la page. */
@media (max-width: 750px) {
    html[data-sidebar-side="right"] .sidebar {
        left: auto;
        right: 0;
    }

    html[data-sidebar-side="right"] .main-content {
        margin-left: 0 !important;
        margin-right: 68px !important;
    }

    html[data-sidebar-side="right"] .sidebar .sidebar-toggle {
        right: auto !important;
        left: 10px !important;
    }

    html[data-sidebar-side="right"] .sidebar.collapsed .sidebar-toggle {
        right: auto !important;
        left: 9px !important;
    }
}

/* Les pages sans barre latérale (À propos, Contact, Conditions, Confidentialité)
   ne doivent pas être décalées sur mobile. */
@media (max-width: 750px) {
    .app:not(:has(.sidebar)) .main-content {
        margin-left: 0 !important;
    }
}

/* =========================================================
   ICÔNE EMOJI DE NAVIGATION (onglet Stories)
   ========================================================= */

.nav-emoji-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
}
.sidebar.collapsed .nav-emoji-icon { font-size: 22px; }

/* =========================================================
   STORIES
   ========================================================= */

.stories-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.story-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 96px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.story-bubble-ring {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--sun), var(--rose), var(--violet));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.story-bubble.is-mine .story-bubble-ring { background: var(--mint); }
.story-bubble:hover .story-bubble-ring { transform: scale(1.06); }

.story-bubble-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--violet-soft);
    background-size: cover;
    background-position: center;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
}

/* Miniature de la story publiée, sous l'image de profil. */
.story-bubble-preview {
    width: 82px;
    height: 82px;
    border-radius: 18px;
    background-color: var(--violet-soft);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--ink);
    box-shadow: var(--lift-sm);
    transition: transform .2s ease;
}
.story-bubble:hover .story-bubble-preview { transform: scale(1.06); }

.story-bubble-name {
    max-width: 96px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stories-hint {
    margin-top: 22px;
    color: var(--muted);
    font-size: 13px;
}
.stories-empty { margin-top: 18px; }

/* ---------- Visionneuse ---------- */

/* Le cadre épouse exactement la photo : le texte posé dessus (voir
   .story-caption) se place donc de la même manière dans l'aperçu du composeur
   et dans la visionneuse, quelle que soit la forme de la photo. Son rapport
   largeur/hauteur est ajusté par js/stories.js dès que la photo est affichée :
   plus aucune bande noire ne peut se glisser entre le texte et l'image. */
.story-frame,
.story-composer-frame {
    position: relative;
    max-width: 100%;
    line-height: 0;
}

.story-frame { max-height: 86vh; }
.story-composer-frame { max-height: 58vh; }

.story-viewer {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(12, 8, 24, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.story-viewer[hidden] { display: none; }

.story-stage {
    position: relative;
    width: min(460px, 100%);
    max-height: min(92vh, 860px);
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-image {
    width: auto;
    max-width: 100%;
    max-height: 86vh;
    object-fit: contain;
    display: block;
    /* Coins arrondis des images publiées en story. */
    border-radius: 18px;
}

.story-progress {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 130px));
    display: flex;
    gap: 5px;
    z-index: 6;
}
.story-progress-bar {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    overflow: hidden;
}
.story-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #fff;
}
.story-progress-fill.is-active {
    animation: story-fill 5000ms linear forwards;
}
@keyframes story-fill { from { width: 0; } to { width: 100%; } }

.story-close {
    position: fixed;
    top: 12px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, .4);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 7;
}

.story-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-nav-prev { left: 16px; }
.story-nav-next { right: 16px; }

.story-head {
    position: absolute;
    top: 30px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 4;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.story-head-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--violet-soft);
    background-size: cover;
    background-position: center;
    color: var(--ink);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Menu « 3 points » de la story ---------- */
.story-menu-wrap {
    position: absolute;
    top: 30px;
    right: 12px;
    z-index: 8;
}
.story-menu-button {
    width: 34px;
    height: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    cursor: pointer;
}
.story-menu-button span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    display: block;
}
.story-menu-button:hover { background: rgba(0, 0, 0, .62); }

.story-menu {
    position: fixed;
    z-index: 9;
    min-width: 190px;
    padding: 6px;
    border: var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--lift);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.story-menu[hidden] { display: none; }
.story-menu-item {
    text-align: left;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.story-menu-item:hover { background: var(--violet-soft); }
.story-menu-item.is-danger { color: var(--rose); }
.story-menu-item.is-danger:hover { background: color-mix(in srgb, var(--rose) 18%, transparent); }
.story-menu-item[hidden] { display: none; }

/* ---------- Bouton « J'aime » de la story ---------- */
.story-like {
    position: absolute;
    top: 30px;
    right: 56px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}
.story-like:hover { background: rgba(0, 0, 0, .62); }
.story-like:active { transform: scale(.94); }
.story-like[hidden] { display: none; }
.story-like.is-liked {
    border-color: var(--rose);
    color: var(--rose);
}
.story-like-icon {
    width: 18px;
    height: 18px;
    display: block;
    /* Le cœur de base est sombre : on l'éclaircit avec un filtre pour le
       rendre visible sur le fond noir de la story. */
    filter: brightness(0) invert(1);
}
.story-like.is-liked .story-like-icon {
    filter: none;
}
.story-like-count { min-width: 8px; text-align: center; }

/* ---------- Panneau des vues & modale de signalement ---------- */
.story-views, .story-report {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(12, 8, 24, .72);
}
.story-views[hidden], .story-report[hidden] { display: none; }
.story-views-card, .story-report-card {
    width: min(420px, 100%);
    max-height: min(80vh, 620px);
    overflow-y: auto;
    padding: 18px;
    border: var(--border);
    border-radius: 20px;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--lift);
}
.story-views-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.story-views-head strong { font: 800 18px var(--font-display); }
.story-views-close {
    width: 32px;
    height: 32px;
    border: var(--border);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.story-views-list { display: flex; flex-direction: column; gap: 6px; }
.story-views-empty { color: var(--muted); font-size: 14px; padding: 8px; }
.story-view-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.story-view-row:hover { background: var(--violet-soft); }
.story-view-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--violet-soft) center / cover no-repeat;
    color: var(--ink);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-view-name { font-weight: 700; font-size: 14px; }

.story-report-card h2 { margin: 0 0 6px; font-size: 20px; }
.story-report-sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.story-report-error { color: var(--rose); font-weight: 700; font-size: 13px; margin: 4px 0 0; }
.story-report-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.story-caption,
.story-composer-caption {
    position: absolute;
    top: 82%;
    left: 50%;
    width: 86%;
    transform: translate(-50%, -50%);
    z-index: 4;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .75);
    word-break: break-word;
    white-space: pre-wrap;
    /* Le texte ne doit jamais gêner la navigation (appui à gauche / à droite). */
    pointer-events: none;
}

.story-delete {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 6;
    border: 2px solid var(--ink);
    background: var(--rose);
    color: #fff;
    border-radius: 12px;
    padding: 8px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ---------- Composeur de story (aperçu + texte sur la photo) ---------- */

.story-composer {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(12, 8, 24, .72);
}
.story-composer[hidden] { display: none; }

.story-composer-card {
    width: min(460px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    padding: 18px;
    border: var(--border);
    border-radius: 22px;
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--lift);
}

.story-composer-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    margin-bottom: 16px;
}

.story-composer-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 58vh;
    object-fit: contain;
    border-radius: 20px;
}

/* Texte superposé à la photo (aperçu et rendu final identiques).
   La couleur, la taille, l'alignement et la position communes sont définies
   plus haut avec .story-caption ; ici, seulement ce qui est propre à
   l'aperçu : le texte se déplace au doigt ou à la souris. */
.story-composer-caption {
    z-index: 2;
    padding: 2px 4px;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
}
.story-composer-caption:active { cursor: grabbing; }
.story-composer-caption[hidden] { display: none; }

/* ---------- Réglages du texte (couleur, taille, alignement) ---------- */

.story-composer-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    padding: 14px;
    border: 2px dashed var(--ink);
    border-radius: 16px;
    background: var(--paper);
}

.story-tool-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.story-tool-label {
    min-width: 74px;
    font-size: 13px;
    font-weight: 800;
}

.story-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.story-color-swatch {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.story-color-swatch:hover { transform: translateY(-2px); }
.story-color-swatch.is-selected { box-shadow: 0 0 0 3px var(--violet); }

.story-composer-tools input[type="color"] {
    width: 38px;
    height: 30px;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.story-composer-tools input[type="range"] {
    flex: 1;
    min-width: 140px;
    accent-color: var(--violet);
}

.story-tool-output {
    min-width: 54px;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
}

.story-align-group { display: flex; flex-wrap: wrap; gap: 6px; }

.story-align-button {
    padding: 7px 12px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.story-align-button.is-selected { background: var(--sun); }

.story-tool-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.story-composer-error { color: var(--rose); font-weight: 700; font-size: 13px; margin: 4px 0 0; }
.story-composer-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.story-open { overflow: hidden; }

@media (max-width: 750px) {
    .story-stage { width: 100%; max-height: 100vh; border-radius: 0; }
    .story-image { max-height: 100vh; }
    .story-frame { max-height: 100vh; }
    .story-nav { width: 38px; height: 38px; }
    .story-progress { width: calc(100vw - 110px); }
}

/* =========================================================
   DISCUSSION — MENU « + », PARTAGE DE PROFIL
   ========================================================= */

.chat-page #messageForm { position: relative; }

.lynk-plus-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 52px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 168px;
    padding: 6px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--ink);
}
.lynk-plus-menu[hidden] { display: none; }

.lynk-plus-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.lynk-plus-menu-item:hover { background: var(--violet-soft); }
.lynk-plus-menu-icon { font-size: 18px; line-height: 1; }

/* Modale « Partager un profil » */
.profile-share-modal-card {
    max-width: 520px;
    width: 100%;
    max-height: min(80vh, 640px);
    overflow-y: auto;
}

.profile-share-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    max-height: min(50vh, 420px);
    overflow-y: auto;
    padding-right: 2px;
}

.profile-share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 2px solid var(--ink);
    border-radius: 14px;
    background: var(--card, #fff);
}

.profile-share-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: var(--violet-soft);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--ink);
    text-transform: uppercase;
}

.profile-share-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-share-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.profile-share-btn {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--violet);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.profile-share-btn:hover { background: var(--violet-deep); }
.profile-share-btn:disabled { opacity: .6; cursor: default; }

/* Carte de profil partagé affichée dans un message */
.chat-shared-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--ink);
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.chat-shared-profile-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: var(--violet-soft);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--ink);
    text-transform: uppercase;
}

.chat-shared-profile-info { flex: 1; min-width: 0; }
.chat-shared-profile-info strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-shared-profile-info span { font-size: 12px; color: var(--muted); }

/* =========================================================
   MODE SOMBRE — LES BLOCS BLANCS DEVIENNENT VIOLETS
   Tous les éléments blancs en thème clair prennent une teinte
   violette lorsque le mode sombre est activé.
   ========================================================= */

html[data-theme="dark"] #messageForm,
html[data-theme="dark"] .interest-custom,
html[data-theme="dark"] .character-input,
html[data-theme="dark"] .lynk-notification-sheet,
html[data-theme="dark"] #reportModal > div,
html[data-theme="dark"] #reportMessageModal > div,
html[data-theme="dark"] #groupModal > div {
    background: #2A1E4A !important;
    color: var(--ink);
}

/* Le champ « Caractère de profil » doit garder un texte lisible en thème sombre :
   sans cela, le texte saisi (sombre) reste invisible sur le fond violet foncé. */
html[data-theme="dark"] .character-input,
html[data-theme="dark"] #avatarCharacter {
    color: #E7DDFF !important;
    caret-color: #E7DDFF;
}

html[data-theme="dark"] .character-input::placeholder,
html[data-theme="dark"] #avatarCharacter::placeholder {
    color: #9C92B8;
}

html[data-theme="dark"] .mail-button,
html[data-theme="dark"] .interest-dropdown,
html[data-theme="dark"] .interest span,
html[data-theme="dark"] .lynk-plus-menu,
html[data-theme="dark"] .chat-shared-profile,
html[data-theme="dark"] .conversation-settings-page .settings-card {
    background: #2A1E4A;
    color: var(--ink);
}

/* Les centres d'intérêt sélectionnés gardent leur violet vif. */
html[data-theme="dark"] .interest input:checked + span {
    background: var(--violet);
    color: #fff;
}

/* Notifications et boutons qui utilisaient l'encre claire comme fond
   (ils devenaient blancs en mode sombre) passent au violet. */
html[data-theme="dark"] .lynk-toast,
html[data-theme="dark"] .lynk-toast.is-success,
html[data-theme="dark"] .lynk-toast.is-error,
html[data-theme="dark"] .rewards-badges-button,
html[data-theme="dark"] .login-streak-link:hover {
    background: #261B4A !important;
    color: #E7DDFF !important;
}

html[data-theme="dark"] .badge-lock {
    background: #261B4A;
    color: #E7DDFF;
    border-color: #473A62;
}

/* =========================================================
   APPLICATION iOS / ANDROID — BARRE D'ÉTAT
   (heure, réseau, batterie)
   ---------------------------------------------------------
   Ouverte depuis l'icône de l'écran d'accueil, Lynk occupe tout
   l'écran (balise « viewport-fit=cover »). La zone de la barre
   d'état était alors vide : iOS y écrit l'heure, le réseau et la
   batterie en blanc, sur le fond clair de la page, d'où une bande
   blanche au-dessus de l'application.

   js/theme.js ajoute la classe « lynk-standalone » sur <html>.
   Ici, cette zone est peinte avec la couleur de la barre latérale
   (encre) : le texte système, écrit en blanc, reste lisible et la
   bande blanche disparaît. Le contenu commence juste en dessous.
   ========================================================= */

html.lynk-standalone {
    --lynk-safe-top: env(safe-area-inset-top, 0px);
    --lynk-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Bande de la barre d'état : même couleur que la barre latérale. */
html.lynk-standalone::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: var(--lynk-safe-top);
    background: var(--ink, #1B1340);
    z-index: 1300; /* au-dessus de la barre latérale (1200) */
    pointer-events: none;
}

/* Thème sombre : exactement l'encre de la barre latérale. */
html.lynk-standalone[data-theme="dark"]::before {
    background: #090611;
}

/* ---------------------------------------------------------
   BANDE DU BAS — BARRE DE GESTES
   Sous la page, la zone de la barre de gestes (home indicator)
   restait blanche : le fond du document s'arrêtait avant elle.
   On la remplit comme le haut : la barre latérale prolongée d'un
   côté, le fond de la page de l'autre. La bande passe SOUS la
   barre latérale (z-index 1150 < 1200) : quand le rail descend
   déjà jusqu'en bas, la bande est simplement cachée.
   --------------------------------------------------------- */
html.lynk-standalone::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--lynk-safe-bottom, 0px);
    min-height: 1px;
    /* Mêmes couleurs ET mêmes pointillés que le fond de la page : la bande se
       fond dans le site au lieu d'apparaître comme une barre blanche. */
    background-color: var(--paper, #F4EFFF);
    background-image: radial-gradient(rgba(27, 19, 64, .10) 1.3px, transparent 1.5px);
    background-size: 24px 24px;
    z-index: 1150; /* sous la barre latérale (1200), sur le contenu */
    pointer-events: none;
}

/* Barre latérale à gauche : rail foncé puis fond de la page (avec pointillés). */
html.lynk-standalone:has(.sidebar)::after {
    background-color: var(--paper, #F4EFFF);
    background-image:
        linear-gradient(to right, var(--ink, #1B1340) 0 68px, rgba(0, 0, 0, 0) 68px),
        radial-gradient(rgba(27, 19, 64, .10) 1.3px, transparent 1.5px);
    background-size: 100% 100%, 24px 24px;
    background-repeat: no-repeat, repeat;
}

/* Barre latérale à droite : le rail passe de l'autre côté. */
html.lynk-standalone[data-sidebar-side="right"]:has(.sidebar)::after {
    background-image:
        linear-gradient(to left, var(--ink, #1B1340) 0 68px, rgba(0, 0, 0, 0) 68px),
        radial-gradient(rgba(27, 19, 64, .10) 1.3px, transparent 1.5px);
}

/* Thème sombre. */
html.lynk-standalone[data-theme="dark"]::after {
    background-color: #150E27;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1.3px, transparent 1.5px);
}

html.lynk-standalone[data-theme="dark"]:has(.sidebar)::after {
    background-color: #150E27;
    background-image:
        linear-gradient(to right, #090611 0 68px, rgba(0, 0, 0, 0) 68px),
        radial-gradient(rgba(255, 255, 255, .10) 1.3px, transparent 1.5px);
    background-size: 100% 100%, 24px 24px;
    background-repeat: no-repeat, repeat;
}

html.lynk-standalone[data-theme="dark"][data-sidebar-side="right"]:has(.sidebar)::after {
    background-image:
        linear-gradient(to left, #090611 0 68px, rgba(0, 0, 0, 0) 68px),
        radial-gradient(rgba(255, 255, 255, .10) 1.3px, transparent 1.5px);
}

/* La page commence sous la barre d'état. */
html.lynk-standalone .main-content {
    padding-top: var(--lynk-safe-top);
}

/* La barre latérale reste pleine hauteur, simplement décalée : elle
   descend jusqu'à la barre de gestes comprise, et son contenu (les liens
   légaux) remonte au-dessus de cette zone. */
html.lynk-standalone .sidebar {
    top: var(--lynk-safe-top) !important;
    height: calc(100dvh - var(--lynk-safe-top) + var(--lynk-safe-bottom)) !important;
    padding-bottom: calc(clamp(10px, 2.2vh, 25px) + var(--lynk-safe-bottom)) !important;
}

/* Discussions : la liste qui défile tient compte de la bande. */
html.lynk-standalone .discussions-page .content {
    height: calc(100dvh - 90px - var(--lynk-safe-top));
}

/* Pages sans barre latérale : on décale simplement le contenu. */
html.lynk-standalone .login-page {
    padding-top: calc(clamp(20px, 4vw, 56px) + var(--lynk-safe-top));
}

html.lynk-standalone .profile-page {
    padding-top: calc(30px + var(--lynk-safe-top));
}

html.lynk-standalone .public-legal-page {
    padding-top: calc(36px + var(--lynk-safe-top));
}

html.lynk-standalone .lynk-error-page {
    padding-top: calc(28px + var(--lynk-safe-top));
}

html.lynk-standalone .lp-nav {
    padding-top: calc(20px + var(--lynk-safe-top));
}

/* Stories : les commandes restent accessibles sous la barre d'état,
   la barre de gestes du bas ne recouvre pas le contenu. */
html.lynk-standalone .story-progress { top: calc(16px + var(--lynk-safe-top)); }
html.lynk-standalone .story-close { top: calc(12px + var(--lynk-safe-top)); }
html.lynk-standalone .story-head,
html.lynk-standalone .story-like,
html.lynk-standalone .story-menu-wrap { top: calc(30px + var(--lynk-safe-top)); }
html.lynk-standalone .story-viewer { padding-bottom: env(safe-area-inset-bottom, 0px); }
html.lynk-standalone .story-composer,
html.lynk-standalone .story-views,
html.lynk-standalone .story-report {
    padding-top: calc(18px + var(--lynk-safe-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}