/* =========================================================
   LYNK — HARMONISATION DES ONGLETS
   Chargé EN DERNIER (après lynk-polish.css).

   Référence : l'onglet Paramètres. Tout ce qui est carte,
   bouton, pastille ou entrée de menu réagit au survol, au clic
   et au focus exactement comme dans Paramètres, sur toutes les
   pages.

   Règle simple :
   - les ÉLÉMENTS (cartes, tuiles, lignes, boutons) se soulèvent ;
   - les CONTENEURS et bandeaux d'information ne bougent pas.
   ========================================================= */

:root {
    --u-card-hover-transform: translateY(-3px);
    --u-card-hover-translate: -2px -4px;
    --u-card-hover-shadow: 0 8px 0 var(--ink);
    --u-card-press-shadow: 0 2px 0 var(--ink);

    --u-btn-hover-transform: translateY(-2px);
    --u-btn-hover-translate: 0 -3px;
    --u-btn-hover-shadow: 0 8px 0 var(--ink);
    --u-btn-press-shadow: 0 1px 0 var(--ink);
}

/* ---------------------------------------------------------
   1. CARTES ET TUILES — même soulèvement que dans Paramètres
   --------------------------------------------------------- */

.profile-card, .mission-card, .badge-card, .ranking-row,
.rewards-stat-card, .special-badge-card, .lynk-notification-card,
.theme-choice, .profile-mini-card, .legal-card, .profile-stat {
    transition: transform .22s var(--ease-pop), translate .22s var(--ease-pop),
                box-shadow .22s var(--ease-pop), background-color .2s, border-color .2s;
}

.profile-card:hover, .mission-card:hover, .badge-card:not(:disabled):hover,
.ranking-row:hover, .rewards-stat-card:hover, .special-badge-card:hover,
.lynk-notification-card:hover, .theme-choice:hover, .profile-mini-card:hover,
.legal-card:hover, .profile-stat:hover {
    transform: var(--u-card-hover-transform);
    translate: var(--u-card-hover-translate);
    box-shadow: var(--u-card-hover-shadow);
    border-color: var(--ink);
}

.profile-card:active, .mission-card:active, .badge-card:not(:disabled):active,
.ranking-row:active, .rewards-stat-card:active, .special-badge-card:active,
.lynk-notification-card:active, .theme-choice:active, .profile-mini-card:active,
.legal-card:active, .profile-stat:active {
    transform: translateY(3px);
    translate: 0 0;
    box-shadow: var(--u-card-press-shadow);
    transition-duration: .06s;
}

/* Le badge équipé garde sa couleur d'ombre violette */
.badge-card.is-equipped:hover { box-shadow: 0 8px 0 var(--violet-deep); }

/* Les lignes de classement ont, comme les autres cartes, une ombre au repos */
:where(.ranking-row:not(.ranking-top-1)) { box-shadow: var(--lift-sm); }
.ranking-row.ranking-top-1:hover { box-shadow: var(--u-card-hover-shadow); }

/* Tuiles de profil : même présence qu'une carte Paramètres */
.profile-mini-card, .legal-card { box-shadow: var(--lift); }
.profile-stat { box-shadow: var(--lift-sm); }

/* Le titre d'une carte se souligne au survol (comme dans Paramètres) */
.mission-card h3, .badge-card strong, .special-badge-card strong,
.lynk-notification-card strong, .profile-mini-card h3 {
    background: linear-gradient(var(--sun), var(--sun)) 0 100% / 0 .32em no-repeat;
    transition: background-size .3s ease;
    width: fit-content;
}
.mission-card:hover h3, .badge-card:hover strong, .special-badge-card:hover strong,
.lynk-notification-card:hover strong, .profile-mini-card:hover h3 { background-size: 100% .32em; }

/* Avatars : même rotation au survol de la carte */
.ranking-avatar, .member-avatar {
    box-shadow: 3px 3px 0 var(--ink);
    transition: rotate .3s var(--ease-pop), scale .3s var(--ease-pop);
}
.ranking-row:hover .ranking-avatar { rotate: -4deg; scale: 1.05; }

/* ---------------------------------------------------------
   2. BLOCS D'INFORMATION — ils ne bougent pas, et ne changent
      pas d'ombre non plus (avant, l'ombre rétrécissait).
   --------------------------------------------------------- */

.empty-card:hover, .reward-empty-card:hover, .reward-loading-card:hover,
.login-card:hover, .profile-setup-card:hover,
.ranking-card:hover, .rewards-info-card:hover, .equipped-preview:hover,
.discover-match-card:hover {
    transform: none;
    translate: none;
}

.welcome-card:hover,
.rewards-hero:hover,
.badges-intro-card:hover {
    transform: none;
    translate: none;
    box-shadow: 0 8px 0 var(--ink);
}
html[data-theme="dark"] .welcome-card:hover,
html[data-theme="dark"] .rewards-hero:hover,
html[data-theme="dark"] .badges-intro-card:hover { box-shadow: 0 8px 0 #08050E; }

/* ---------------------------------------------------------
   3. BOUTONS — un seul comportement partout
   --------------------------------------------------------- */

.primary-button, .login-button, .secondary-button, .danger-button,
.discover-match-button, .rewards-badges-button, .mail-button,
.profile-photo-label, .accent-choice, .accent-custom,
.conversation-settings-icon-button {
    transition: transform .18s var(--ease-pop), 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, .mail-button:hover, .profile-photo-label:hover,
.accent-choice:hover, .conversation-settings-icon-button:hover {
    transform: var(--u-btn-hover-transform);
    translate: var(--u-btn-hover-translate);
    box-shadow: var(--u-btn-hover-shadow);
}
.rewards-badges-button:hover {
    transform: var(--u-btn-hover-transform);
    translate: var(--u-btn-hover-translate);
    box-shadow: 0 8px 0 var(--violet-deep) !important;
}
.accent-choice.is-selected:hover { box-shadow: 0 8px 0 var(--choice); }

.primary-button:active, .login-button:active, .secondary-button:active, .danger-button:active,
.discover-match-button:active, .mail-button:active, .profile-photo-label:active,
.accent-choice:active, .rewards-badges-button:active, .conversation-settings-icon-button:active {
    transform: translateY(3px);
    translate: 0 4px;
    box-shadow: var(--u-btn-press-shadow);
    transition-duration: .05s;
}
.rewards-badges-button:active { box-shadow: 0 1px 0 var(--violet-deep) !important; }

/* Couleur de fond au survol : jaune doux pour les boutons clairs */
.mail-button:hover, .profile-photo-label:hover, .conversation-settings-icon-button:hover {
    background-color: var(--sun-soft);
}
.profile-photo-remove:hover { background: var(--rose-soft); }

/* Un lien qui a l'apparence d'un bouton ne se souligne jamais */
a.secondary-button, a.login-button, a.primary-button, a.danger-button, a.mail-button,
a.discover-match-button, a.rewards-badges-button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* =====================================================================
   ONGLETS RÉSERVÉS AU STAFF — INVISIBILITÉ RÉELLE POUR LES ÉLÈVES
   home.html prépare les onglets Annonces / Administration avec l'attribut
   `hidden` avant de connaître le rôle. La règle `.nav-item { display:flex }`
   écrasait sinon `[hidden]` (règle UA) et un élève voyait les onglets staff.
   ===================================================================== */
.sidebar .navigation .nav-item[hidden],
.sidebar .sidebar-bottom .nav-item[hidden],
.sidebar .nav-item[hidden] {
    display: none !important;
}

/* La pastille « courrier » est centrée, que ce soit un <button> ou un <a>
   (sur Match elle était calée en haut à gauche). */
.mail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    /* Le bouton courrier garde son reflet mais NE découpe PAS la pastille de
       notification, qui dépasse volontairement de son coin supérieur droit.
       Sans ceci, la règle générique `overflow: hidden` des boutons rogne le
       point (il semble passer derrière la boîte aux lettres). */
    overflow: visible;
}

/* Le petit point « nouveau message / annonce » doit toujours flotter AU-DESSUS
   de la boîte aux lettres, jamais derrière. */
.mail-button .notification-dot {
    z-index: 3;
}

.conversation-settings-icon-button {
    width: 52px;
    height: 52px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
}

/* Boutons désactivés : aucun mouvement */
.primary-button:disabled, .login-button:disabled, .secondary-button:disabled,
.danger-button:disabled, .discover-match-button:disabled {
    transform: none;
    translate: none;
    box-shadow: var(--lift-sm) !important;
    cursor: not-allowed;
}

/* ---------------------------------------------------------
   4. MENU LATÉRAL — Déconnexion réagit comme les onglets
   --------------------------------------------------------- */

.logout-button {
    border: 2px solid transparent;
    border-radius: 14px;
    transition: background-color .15s, border-color .15s, color .15s,
                translate .2s var(--ease-pop), box-shadow .15s;
}
.logout-button:hover {
    background: rgba(255, 92, 147, .18);
    color: #FFB3CC;
    border-color: var(--ink);
    translate: 4px 0;
    box-shadow: none;
}
.logout-button:active { translate: 0 2px; box-shadow: none; }

.nav-item.active:hover { translate: 0 0; }

/* ---------------------------------------------------------
   5. PASTILLES — mêmes réactions que les centres d'intérêt
   --------------------------------------------------------- */

.announcement-badge, .class-chip span {
    border: var(--border);
}

.announcement-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--sun);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    transform: rotate(-2deg);
    box-shadow: var(--lift-sm);
}

.class-chip span {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--lift-sm);
    transition: transform .2s var(--ease-pop), background-color .15s, box-shadow .2s;
}
.class-chip:hover span {
    background: var(--sun-soft);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--ink);
}
.class-chip input:checked + span {
    background: var(--violet);
    color: #fff;
    border-color: var(--ink);
}
.class-chip input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 3px; }

.class-group > span { color: var(--violet-deep); font-weight: 800; }

.audience-option {
    padding: 10px 14px;
    border: var(--border);
    border-radius: 16px;
    background: var(--card);
    font-weight: 700;
    box-shadow: var(--lift-sm);
    transition: transform .2s var(--ease-pop), background-color .15s, box-shadow .2s;
}
.audience-option:hover {
    background: var(--sun-soft);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--ink);
}
.input-group .audience-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    cursor: pointer;
}
.audience-option input { accent-color: var(--violet); }

/* Cases et boutons radio : taille normale, même dans un .input-group */
.input-group input[type="radio"], .input-group input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    box-shadow: none;
    translate: none;
}

/* Panneaux de planification / choix de classes (avant : couleurs figées) */
.schedule-panel, #classesPicker {
    margin-top: 10px;
    padding: 16px;
    border: 2px dashed var(--ink);
    border-radius: 18px;
    background: var(--violet-soft);
}
.schedule-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.schedule-panel-note { margin: 10px 0 0; max-width: none; text-align: left; font-size: 12px; color: var(--muted); }

#composerError, .composer-error {
    padding: 10px 14px;
    border: var(--border);
    border-radius: 14px;
    background: var(--rose-soft);
    color: #8F1239;
    font-weight: 700;
}
html[data-theme="dark"] #composerError, html[data-theme="dark"] .composer-error { color: #FFB3CC; }

.announcement-scheduled { margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--violet-deep); }

/* ---------------------------------------------------------
   6. TITRES DE SECTION — Récompenses reprend le style Paramètres
   --------------------------------------------------------- */

.rewards-section-heading .rewards-kicker { display: none; }

.rewards-section-heading h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(17px, 2vw, 21px);
}
.rewards-section-heading h2::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: var(--border);
    border-radius: 50%;
    background: var(--rose);
}
.rewards-special-section .rewards-section-heading h2::before {
    background: var(--sun);
    border-radius: 5px;
    transform: rotate(18deg);
}
.rewards-section .rewards-section-heading h2::before { background: var(--mint); }

.rewards-section-heading p {
    margin-top: 6px;
    font-size: 14px;
    color: var(--ink-soft);
}

/* Titres de section sans bloc parent direct : même marge d'air */
.section-header + .empty-card,
.section-header + .profile-card { margin-top: 0; }

/* ---------------------------------------------------------
   7. FORMULAIRES — tout champ réagit comme dans Paramètres
   --------------------------------------------------------- */

.character-input, .interest-custom, .search-input, .message-input,
.input-group input, .input-group select, .input-group textarea {
    transition: box-shadow .18s var(--ease-pop), translate .18s var(--ease-pop), border-color .15s;
}
.character-input:focus, .interest-custom:focus {
    translate: 0 -2px;
}
.interest-options label:hover { background: var(--violet-soft); }

/* ---------------------------------------------------------
   8. PAGES SANS MENU (profil, connexion)
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   9. MOBILE ET ACCESSIBILITÉ
   --------------------------------------------------------- */

@media (hover: none) {
    .profile-card:hover, .mission-card:hover, .badge-card:hover, .ranking-row:hover,
    .rewards-stat-card:hover, .special-badge-card:hover, .lynk-notification-card:hover,
    .theme-choice:hover, .profile-mini-card:hover, .legal-card:hover, .profile-stat:hover,
    .primary-button:hover, .login-button:hover, .secondary-button:hover, .danger-button:hover,
    .discover-match-button:hover, .mail-button:hover, .accent-choice:hover,
    .class-chip:hover span, .audience-option:hover {
        transform: none;
        translate: none;
    }
    .profile-card:hover, .mission-card:hover, .badge-card:hover, .ranking-row:hover,
    .rewards-stat-card:hover, .special-badge-card:hover, .lynk-notification-card:hover,
    .theme-choice:hover, .profile-mini-card:hover, .legal-card:hover { box-shadow: var(--lift); }
    .primary-button:hover, .login-button:hover, .secondary-button:hover, .danger-button:hover,
    .discover-match-button:hover, .mail-button:hover, .accent-choice:hover { box-shadow: var(--lift-sm); }
    .logout-button:hover { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-card:hover, .mission-card:hover, .badge-card:hover, .ranking-row:hover,
    .primary-button:hover, .login-button:hover, .secondary-button:hover {
        transform: none;
        translate: none;
    }
}

/* ---------------------------------------------------------
   10. COULEURS D'ALERTE (remplacent les rouges écrits en dur)
   --------------------------------------------------------- */

:root { --danger-ink: #B42318; }
html[data-theme="dark"] { --danger-ink: #FF8FB0; }

/* ---------------------------------------------------------
   11. MODE SOMBRE — bandeaux colorés et classements lisibles
   (le texte posé sur un aplat jaune/bleu/violet reste sombre)
   --------------------------------------------------------- */

html[data-theme="dark"] .rewards-hero,
html[data-theme="dark"] .badges-intro-card,
html[data-theme="dark"] .rewards-kicker {
    --ink: #1B1340;
    --ink-soft: #4A4270;
    --muted: #4A4270;
}
html[data-theme="dark"] .rewards-kicker { background: #fff; color: #1B1340; }

html[data-theme="dark"] .ranking-row { background: var(--card); }
html[data-theme="dark"] .ranking-top-1 { background: linear-gradient(100deg, rgba(255, 216, 77, .26), var(--card) 72%); }
html[data-theme="dark"] .ranking-top-2 { background: linear-gradient(100deg, rgba(112, 191, 255, .24), var(--card) 72%); }
html[data-theme="dark"] .ranking-top-3 { background: linear-gradient(100deg, rgba(255, 106, 157, .24), var(--card) 72%); }
html[data-theme="dark"] .ranking-top-1 .ranking-value { color: var(--sun); }
html[data-theme="dark"] .ranking-value { color: #C4B5FD; }
html[data-theme="dark"] .ranking-top-1 .ranking-avatar { background: var(--sun); color: #1B1340; }

/* ---------------------------------------------------------
   12. ICÔNE BULLE DE DISCUSSION (onglet Discussions, propositions d'ajout)
   --------------------------------------------------------- */

.lynk-bubble-icon {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    pointer-events: none;
    transition: scale .25s var(--ease-pop);
}
.nav-item:hover .lynk-bubble-icon { scale: 1.12; }

.empty-icon .lynk-bubble-icon {
    width: 40px;
    height: 40px;
    transform: rotate(4deg); /* annule l'inclinaison de la tuile pour garder la bulle droite */
}

/* =========================================================
   ICÔNES IMAGES — remplacent certains emojis (style Lynk)
   ========================================================= */
.lynk-ic {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.28em;
    object-fit: contain;
}
.empty-icon .lynk-ic { width: 34px; height: 34px; vertical-align: middle; }
.mail-button .lynk-ic { width: 26px; height: 26px; vertical-align: middle; }
.profile-meta-icon .lynk-ic { width: 20px; height: 20px; vertical-align: middle; }
.rewards-stat-icon .lynk-ic { width: 24px; height: 24px; vertical-align: middle; }
.lynk-plus-menu-icon .lynk-ic { width: 18px; height: 18px; vertical-align: middle; }
.lynk-notification-card-icon .lynk-ic { width: 22px; height: 22px; vertical-align: middle; }
.theme-choice .lynk-ic,
.theme-choice-check .lynk-ic { width: 16px; height: 16px; vertical-align: middle; }
.lynk-notification-close .lynk-ic,
.lp-close .lynk-ic,
.discussion-search-clear .lynk-ic,
#closeMembersModal .lynk-ic,
#closePollModal .lynk-ic,
#closeProfileShareModal .lynk-ic,
#closeGroupModal .lynk-ic { width: 14px; height: 14px; vertical-align: middle; }
.rewards-info-icon .lynk-ic { width: 24px; height: 24px; vertical-align: middle; }
.character-input-icon .lynk-ic { width: 18px; height: 18px; vertical-align: middle; }
.conversation-pin-button .lynk-ic { width: 20px; height: 20px; vertical-align: middle; }



/* ---------------------------------------------------------
   LYNK — HOVER SIDEBAR : style doux comme la maquette
   --------------------------------------------------------- */
.sidebar .nav-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.095) !important;
    border: 2px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    translate: 0 0 !important;
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
                0 4px 14px rgba(0,0,0,.10) !important;
}

.sidebar .nav-item:hover:not(.active) span:first-child {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: none !important;
}


/* Boîte aux lettres : action de réponse privée à droite des annonces */
.lynk-mailbox-notification-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
}
.lynk-mailbox-notification-row .lynk-notification-card {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
.lynk-mailbox-private-reply {
    flex: 0 0 auto;
    min-height: 64px;
    white-space: nowrap;
    padding: 0 16px;
}
@media (max-width: 700px) {
    .lynk-mailbox-notification-row {
        align-items: stretch;
    }
    .lynk-mailbox-private-reply {
        padding: 0 11px;
        font-size: 12px;
    }
}
/* =====================================================================
   REPÈRE « BOÎTE AUX LETTRES » À LA PREMIÈRE CONNEXION
   Une bulle avec une flèche pointe vers le bouton courrier et invite
   l'utilisateur à ouvrir sa boîte aux lettres lorsqu'il a une
   notification non lue.
   ===================================================================== */

.mailbox-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mailbox-hint {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 40;
    width: max-content;
    max-width: 250px;
    padding: 12px 34px 12px 14px;
    border: 2px solid var(--ink);
    border-radius: 14px;
    background: var(--sun);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 3px 0 var(--ink);
    animation: lynk-mailbox-hint-pop .32s cubic-bezier(.34, 1.56, .64, 1);
}

.mailbox-hint[hidden] { display: none; }

/* La flèche qui pointe vers le bouton courrier (en haut de la bulle). */
.mailbox-hint::before {
    content: "";
    position: absolute;
    top: -9px;
    right: 20px;
    width: 14px;
    height: 14px;
    background: var(--sun);
    border-left: 2px solid var(--ink);
    border-top: 2px solid var(--ink);
    transform: rotate(45deg);
}

.mailbox-hint-text { display: block; }

.mailbox-hint-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.mailbox-hint-close:hover { background: rgba(27, 19, 64, .14); }

@keyframes lynk-mailbox-hint-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
   ONGLETS DE LA BARRE LATÉRALE — GARANTIE DE CONTRASTE
   Le texte d'un onglet ne doit JAMAIS partager la couleur du fond de son
   bloc, quel que soit le thème (« light » ou « dark ») et l'état
   (repos, survol, focus).
   - Onglet au repos / survolé : fond sombre    => texte clair.
   - Onglet actif             : fond jaune     => texte encre foncée.
   - Onglets staff            : fond jaune pâle => texte ambre foncé.
   ===================================================================== */

.sidebar .navigation .nav-item.active:not(.staff-nav),
.sidebar .navigation .nav-item.active:not(.staff-nav):hover,
.sidebar .navigation .nav-item.active:not(.staff-nav):focus-visible,
html[data-theme="dark"] .sidebar .navigation .nav-item.active:not(.staff-nav),
html[data-theme="dark"] .sidebar .navigation .nav-item.active:not(.staff-nav):hover,
html[data-theme="dark"] .sidebar .navigation .nav-item.active:not(.staff-nav):focus-visible {
    background: var(--sun) !important;
    color: var(--ink) !important;
}

.sidebar .navigation .nav-item.staff-nav.active,
.sidebar .navigation .nav-item.staff-nav.active:hover,
.sidebar .navigation .nav-item.staff-nav.active:focus-visible,
html[data-theme="dark"] .sidebar .navigation .nav-item.staff-nav.active,
html[data-theme="dark"] .sidebar .navigation .nav-item.staff-nav.active:hover,
html[data-theme="dark"] .sidebar .navigation .nav-item.staff-nav.active:focus-visible {
    background: #FFF4BF !important;
    color: #9A6700 !important;
}

/* =========================================================
   ROUE DE CHARGEMENT UNIVERSELLE — Lynk
   Une roue animée unique remplace tous les indicateurs de
   chargement (points animés, icônes et simples mentions
   « Chargement… ») sur l'ensemble du site.

   Utilisation :
   - carte de chargement : <span class="lynk-spinner lynk-spinner--lg lynk-spinner--center"></span>
   - dans une ligne de texte : <span class="lynk-spinner lynk-spinner--sm lynk-spinner--inline"></span>
   ========================================================= */

.lynk-spinner {
    --lynk-spinner-size: 38px;
    --lynk-spinner-thickness: 4px;
    display: inline-block;
    box-sizing: border-box;
    width: var(--lynk-spinner-size);
    height: var(--lynk-spinner-size);
    flex: none;
    border: var(--lynk-spinner-thickness) solid rgba(124, 58, 237, .22);
    border-top-color: #7C3AED;
    border-radius: 50%;
    animation: lynkSpinnerSpin .75s linear infinite;
    will-change: transform;
}

.lynk-spinner--sm { --lynk-spinner-size: 18px; --lynk-spinner-thickness: 2px; }
.lynk-spinner--lg { --lynk-spinner-size: 54px; --lynk-spinner-thickness: 5px; }

/* Roue centrée dans une carte de chargement */
.lynk-spinner--center { display: block; margin: 0 auto 14px; }

/* Roue intégrée à une ligne de texte */
.lynk-spinner--inline { margin-right: 8px; vertical-align: -3px; }

/* L'attribut hidden doit toujours l'emporter sur l'affichage de la roue. */
.lynk-spinner[hidden] { display: none !important; }

@keyframes lynkSpinnerSpin {
    to { transform: rotate(360deg); }
}

html[data-theme="dark"] .lynk-spinner {
    border-color: rgba(196, 181, 253, .28);
    border-top-color: #C4B5FD;
}

@media (prefers-reduced-motion: reduce) {
    .lynk-spinner { animation-duration: 1.6s; }
}

/* =========================================================
   RECHERCHE — la carte entière ouvre le profil
   ========================================================= */

.profile-card.search-result-card {
    cursor: pointer;
}

.profile-card.search-result-card:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 2px;
}

/* =========================================================
   BARRE SUPÉRIEURE — zone d'actions (bouton courrier + autres)
   ========================================================= */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================================================
   ANNONCES — SONDAGES
   ========================================================= */


/* ---------------------------------------------------------
   SONDAGES D'ANNONCE — MOBILE
   Les options ne doivent pas déborder horizontalement.
   --------------------------------------------------------- */
@media (max-width: 750px) {
    .announcement-poll {
        padding: 12px;
    }

    .announcement-poll-option {
        padding: 10px 12px;
    }

    .announcement-poll-option-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

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

    .notification-modal-poll {
        padding: 12px;
    }
}

.poll-composer {
    margin-top: 8px;
    padding: 14px;
    border: 2px solid var(--ink);
    border-radius: 14px;
    background: var(--surface, #f8f6fb);
}

.poll-options-list { display: grid; gap: 8px; }

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

.poll-option-remove {
    flex: none;
    width: 34px;
    height: 34px;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--card, #fff);
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.poll-option-remove:hover { background: var(--rose-soft, #ffe3ea); }

.poll-composer-error {
    color: var(--danger-ink, #B42318);
    font-size: 13px;
    margin: 10px 0 0;
}

.announcement-poll {
    margin-top: 16px;
    padding: 16px;
    border: 2px solid var(--ink);
    border-radius: 16px;
    background: var(--surface, #f8f6fb);
}

.announcement-poll-question { font-weight: 800; margin: 0 0 12px; }
.announcement-poll-options { display: grid; gap: 10px; }

.announcement-poll-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--card, #fff);
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.announcement-poll-option:hover { translate: 0 -2px; box-shadow: var(--lift-sm); }
.announcement-poll-option.is-selected { background: var(--sun-soft, #fff4bf); }

.announcement-poll-option-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}
.announcement-poll-option-text { font-weight: 700; }
.announcement-poll-option-count { font-size: 12px; opacity: .75; white-space: nowrap; }

.announcement-poll-bar {
    display: block;
    height: 8px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(27, 19, 64, .12);
    overflow: hidden;
}
.announcement-poll-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--violet, #7C3AED);
    transition: width .3s ease;
}
.announcement-poll-option.is-selected .announcement-poll-bar-fill { background: var(--violet-deep, #5b21b6); }

.announcement-poll-total { margin: 12px 0 0; font-size: 12px; opacity: .7; }

/* =====================================================================
   Boîte aux lettres — sondage d'annonce votable dans la modale
   ===================================================================== */

/* La fiche de notification peut contenir un sondage : on autorise le
   défilement si le contenu dépasse la hauteur de l'écran. */
#notificationModal .lynk-notification-sheet {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}

.notification-modal-poll { margin-top: 18px; }
.notification-modal-poll[hidden] { display: none; }
/* Le conteneur gère l'espacement : on neutralise la marge du bloc interne. */
.notification-modal-poll .announcement-poll { margin-top: 0; }

/* =====================================================================
   Correctifs d'affichage — Discussions / Chat / Lynk IA (application web)
   ===================================================================== */

/* Aucun défilement horizontal dans les listes et les conversations :
   on ne doit jamais pouvoir faire glisser la page sur le côté. */
.discussions-page .main-content,
.discussions-page .content,
.chat-page .main-content,
.chat-page .content {
    overflow-x: hidden;
}

/* Les cartes de personnes ne débordent plus : le texte se réduit proprement
   au lieu d'être coupé par un conteneur devenu trop large. */
.profile-info { min-width: 0; }
.profile-info h3,
.profile-info p { overflow-wrap: anywhere; }
.profile-card .profile-avatar { flex: 0 0 auto; }

/* Les bulles de message ne provoquent jamais de débordement horizontal,
   même avec un mot très long ou une pièce jointe. */
.chat-page .chat-message-row > div { min-width: 0; }

/* Les photos (pièces jointes / avatars partagés) restent dans leur bulle. */
.ai-bubble img,
.lynk-message-bubble-target img,
.chat-shared-profile-avatar { max-width: 100%; }

/* ---- Lynk IA (ai.html) : la page utilise #aiForm / #aiMessages et NON
   #messageForm / #messagesContainer. Sans ces règles, le fil des messages
   grandissait sans limite (min-height: auto) et repoussait la barre de saisie
   hors de l'écran, où elle était coupée par overflow:hidden. On applique donc
   le même comportement que pour la discussion. ---- */
body.chat-page #aiMessages {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
}

body.chat-page #aiForm {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* La barre de saisie (discussion + IA) reste toujours entièrement visible,
   même sur iPhone : on réserve la zone du « home indicator » (encoche du bas). */
body.chat-page .content {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 750px) {
    body.chat-page .content {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Le champ de saisie ne dépasse jamais de son cadre arrondi. */
body.chat-page #aiInput,
body.chat-page #messageInput { min-width: 0; }