/* ===========================================================================
 * account.css — Le compte vu depuis la CARTE
 * Pastille et menu du compte dans l'en-tête du panneau, modal de connexion /
 * inscription, modal « Sauvegarder cette recherche », toast, bandeau cookies.
 *
 * TOUT passe par les jetons de jetons.css (chargée avant style.css par
 * index.php) : plus aucune couleur écrite en dur ici. Le bleu de marque et le
 * vert de validation historiques ont disparu de cette feuille : la SEULE
 * couleur d'interaction est `--accent`, la même que celle du panneau de
 * filtres et des pages « Mon espace » / « Mon profil » (compte.css).
 *
 * PLANS DE SUPERPOSITION : l'écran d'erreur de la carte (#errorOverlay,
 * z-index 10000 ; #errorIndicator, 10001 dans style.css) recouvrait la modal
 * de connexion (9800) : impossible de se connecter tant qu'une couche avait
 * échoué. La modal passe donc à 10200, le toast à 10300 — au-dessus de tout,
 * puisqu'il commente une action que l'on vient de faire.
 * =========================================================================*/

:root {
    /* Jetons sémantiques absents de jetons.css (compte.css les définit de son
     * côté pour les pages du compte, avec les mêmes valeurs — les deux feuilles
     * ne sont jamais chargées sur une même page). Ratios sur --panneau :
     * --couleur-danger 6,44:1 en texte ; --encre-1 sur --danger-clair 13,3:1. */
    --couleur-danger: #a63a2b;
    --danger-clair: #fbe9e5;

    /* Bordure de champ. `--trait-fort` (#c6d0c0) ne fait que 1,6:1 sur blanc :
     * trop pâle pour délimiter un champ de saisie (WCAG 1.4.11 demande 3:1 aux
     * contours de composant). MÊME valeur que le --bord-champ de compte.css
     * (3,51:1 en clair, 3,84:1 en sombre) : un champ du modal et un champ de
     * « Mon profil » ont la même bordure. Le survol et le focus restent dans
     * l'accent et l'anneau bleu. */
    --bord-champ: #7f8c83;
}
:root[data-theme="dark"]  { --bord-champ: #6f7d74; }
:root[data-theme="light"] { --bord-champ: #7f8c83; }


/* ---------- Pastille du compte dans l'en-tête du panneau ---------- */
/* `.lang-toggle` a `align-self: flex-end` dans style.css, ce qui le coince
 * en bas du flex container et casse l'alignement vertical avec la pastille
 * compte (qui hérite de align-items: center). On rétablit un alignement
 * centré commun pour les deux éléments dans la barre du haut. */
.sidebar .lang-toggle { align-self: center; }

/* Sélecteur doublé `.sidebar .account-chip` pour battre les règles
 * génériques `.sidebar button` (fond plein d'accent, largeur 100 %, marges)
 * de style.css. Même puce bordée que le sélecteur de langue voisin
 * (.lang-btn) : fond --panneau, filet --trait-fort, rayon --rayon-controle.
 * 40 px de côté au minimum (cible au pointeur fin), 44 sur mobile. */
.sidebar .account-chip,
.account-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-sm);
    width: auto;
    min-width: 40px;
    min-height: 40px;
    padding: var(--espace-2xs);
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--accent);
    background: var(--panneau);
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-controle);
    font-weight: 600;
    transition: background var(--duree-rapide), border-color var(--duree-rapide);
}
.sidebar .account-chip:hover,
.account-chip:hover {
    color: var(--accent);
    background: var(--accent-clair);
    border-color: var(--accent);
}
.sidebar .account-chip:focus-visible,
.account-chip:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
/* Avatar : aplat d'accent, initiale en --sur-accent (6,34:1). */
.sidebar .account-chip .avatar,
.account-chip .avatar,
.account-dropdown .avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--rayon-rond);
    background: var(--accent);
    color: var(--sur-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    overflow: hidden;
}
.account-chip .avatar img,
.account-dropdown .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Icône « se connecter » (visiteur non connecté) : dans l'accent, 6,34:1. */
.sidebar .account-chip i,
.account-chip i {
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
}

/* ---------- Menu déroulant du compte ---------- */
.account-dropdown {
    position: absolute;
    top: calc(100% + var(--espace-xs));
    right: 0;
    min-width: 230px;
    max-width: 300px;
    padding: 0 0 var(--espace-xs);
    display: none;
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-large);
    box-shadow: var(--ombre-douce), 0 10px 30px rgba(20, 40, 28, 0.14);
    z-index: 9500;
    overflow: hidden;              /* l'en-tête épouse les angles arrondis */
}
.account-dropdown.open { display: block; }

/* En-tête : avatar + prénom + email, sur le fond doux --panneau-2 — l'ancien
 * bandeau vert plein a disparu avec la règle « une seule couleur
 * d'interaction ». */
.account-dropdown .entete {
    display: flex;
    align-items: center;
    gap: var(--espace-md);
    padding: var(--espace-lg) var(--espace-2xl);
    background: var(--panneau-2);
    border-bottom: 1px solid var(--trait);
}
.account-dropdown .identite {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.account-dropdown .prenom {
    font-size: 14px;
    font-weight: 700;
    color: var(--encre-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-dropdown .email {
    font-size: 12px;
    color: var(--encre-2);           /* 7,82:1 sur --panneau-2 */
    word-break: break-all;
}
.account-dropdown .liste {
    padding-top: var(--espace-xs);
}
/* Entrées : 40 px de haut (44 sur mobile), texte --encre-1, survol dans le
 * fond pâle d'accent comme les options de langue. */
.account-dropdown .liste a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: var(--espace-sm) var(--espace-2xl);
    box-sizing: border-box;
    color: var(--encre-1);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.account-dropdown .liste a:hover {
    background: var(--accent-clair);
    color: var(--encre-1);
}
.account-dropdown .liste a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;          /* vers l'intérieur : le menu rogne (overflow) */
}
.account-dropdown .sep {
    border-top: 1px solid var(--trait);
    margin: var(--espace-2xs) 0;
}

/* ---------- Modales (connexion / inscription, sauvegarde) ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espace-3xl);
    background: var(--voile-sombre);
    z-index: 10200;                /* au-dessus de l'écran d'erreur de la carte */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duree-courte) ease-out;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-content {
    position: relative;            /* ancre du bouton de fermeture */
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--espace-4xl) var(--espace-4xl) var(--espace-5xl);
    box-sizing: border-box;
    background: var(--panneau);
    color: var(--encre-1);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-panneau);
    box-shadow: var(--ombre-douce), 0 20px 60px rgba(20, 40, 28, 0.25);
    transform: translateY(8px);
    transition: transform var(--duree-courte) ease-out;
}
.modal-overlay.open .modal-content { transform: translateY(0); }
/* Bouton « × » : 44 × 44, en absolu dans l'angle. */
.modal-close {
    position: absolute;
    top: var(--espace-sm);
    right: var(--espace-sm);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: var(--rayon-controle);
    font-size: 26px;
    line-height: 1;
    color: var(--encre-2);
    cursor: pointer;
}
.modal-close:hover { color: var(--encre-1); background: var(--panneau-2); }
.modal-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.modal-title {
    margin: 0 44px var(--espace-2xl) 0;   /* laisse la place au « × » */
    font-size: 19px;
    font-weight: 700;
    color: var(--encre-1);
}
/* Onglets soulignés dans l'accent. */
.modal-tabs {
    display: flex;
    margin-bottom: var(--espace-2xl);
    border-bottom: 1px solid var(--trait);
}
.modal-tabs button {
    flex: 1;
    min-height: 44px;
    padding: var(--espace-md) 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;           /* le soulignement recouvre le filet */
    color: var(--encre-2);
    font: inherit;                 /* un bouton ne prend pas la police de la page seul */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--duree-rapide), border-color var(--duree-rapide);
}
.modal-tabs button:hover { color: var(--encre-1); }
.modal-tabs button.active,
.modal-tabs button[aria-selected="true"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.modal-tabs button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}
.modal-panel { display: none; }
.modal-panel.active { display: block; }
.modal-panel label {
    display: block;
    margin: var(--espace-lg) 0 var(--espace-2xs);
    font-size: 13px;
    font-weight: 600;
    color: var(--encre-2);
}
.modal-panel input[type="email"],
.modal-panel input[type="text"],
.modal-panel input[type="password"] {
    width: 100%;
    min-height: 42px;
    padding: var(--espace-sm) var(--espace-lg);
    box-sizing: border-box;
    font: inherit;
    font-size: 15px;
    color: var(--encre-1);
    background: var(--panneau);
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon-controle);
    transition: border-color var(--duree-rapide);
}
.modal-panel input:hover { border-color: var(--accent); }
.modal-panel input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-color: var(--focus);
}
.modal-panel .row-inline { display: flex; gap: var(--espace-md); }
.modal-panel .row-inline > div { flex: 1; min-width: 0; }
/* Case à cocher : libellé cliquable (for/id) et rangée d'au moins 44 px. */
.modal-panel .checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--espace-md);
    min-height: 44px;
    margin-top: var(--espace-sm);
    font-size: 13px;
    line-height: 1.4;
    color: var(--encre-2);
}
.modal-panel .checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.modal-panel .checkbox-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.modal-panel .checkbox-row label {
    flex: 1;                       /* toute la largeur restante de la rangée… */
    min-height: 44px;              /* …et toute sa hauteur sont cliquables */
    margin: 0;
    padding: var(--espace-lg) 0;
    box-sizing: border-box;
    font-weight: 400;
    cursor: pointer;
}
.modal-panel .checkbox-row a { color: var(--accent); }
/* Bouton principal : aplat d'accent, texte --sur-accent. */
.modal-panel button.primary {
    width: 100%;
    min-height: 44px;
    padding: var(--espace-md);
    margin-top: var(--espace-2xl);
    box-sizing: border-box;
    background: var(--accent);
    color: var(--sur-accent);
    border: none;
    border-radius: var(--rayon-controle);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--duree-rapide);
}
.modal-panel button.primary:hover { filter: brightness(1.12); }
.modal-panel button.primary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
/* Bouton Google : puce bordée neutre (le logo apporte sa propre couleur). */
.modal-panel .google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-md);
    width: 100%;
    min-height: 44px;
    padding: var(--espace-md);
    margin-bottom: var(--espace-lg);
    box-sizing: border-box;
    background: var(--panneau);
    color: var(--encre-1);
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-controle);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duree-rapide), border-color var(--duree-rapide);
}
.modal-panel .google-btn:hover { background: var(--accent-clair); border-color: var(--accent); }
.modal-panel .google-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.modal-panel .google-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* En inscription, le bouton Google reste inerte tant que les CGU ne sont pas
 * acceptées (aria-disabled posé par account.js ; pointer-events coupe le
 * clic, l'opacité signale l'état). Le bloc porte alors un texte d'aide. */
.modal-panel .google-bloc { margin-top: var(--espace-lg); }
.modal-panel .google-btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
}
.modal-panel .google-aide {
    margin: calc(-1 * var(--espace-xs)) 0 var(--espace-sm);
    font-size: 12px;
    color: var(--encre-2);
    text-align: center;
}
.modal-panel .google-aide[hidden] { display: none; }
.modal-panel .separator {
    display: flex;
    align-items: center;
    gap: var(--espace-md);
    margin: var(--espace-xl) 0 var(--espace-xs);
    color: var(--encre-3);         /* 5,50:1 */
    font-size: 12px;
}
.modal-panel .separator::before,
.modal-panel .separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--trait);
}
/* Erreur EN PLACE dans le panneau (role="alert", rempli par account.js) :
 * fond pâle, texte fort, filet gauche de danger. Le conteneur est toujours
 * présent — une zone vivante doit exister avant d'être remplie pour être
 * annoncée — mais vide il ne prend aucune place. */
.modal-panel .error {
    padding: var(--espace-md) var(--espace-lg);
    margin-bottom: var(--espace-lg);
    background: var(--danger-clair);
    color: var(--encre-1);
    border-left: 3px solid var(--couleur-danger);
    border-radius: var(--rayon-controle);
    font-size: 13px;
    line-height: 1.45;
}
.modal-panel .error:empty { display: none; }
.modal-panel .subrow {
    margin-top: var(--espace-lg);
    text-align: center;
    font-size: 13px;
}
.modal-panel .subrow a {
    display: inline-block;
    padding: var(--espace-sm) 0;   /* cible tactile sans grossir le texte */
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.modal-panel .subrow a:hover { color: var(--encre-1); }
.modal-panel .subrow a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Inscription fermée (réglage admin). */
.modal-panel .modal-reg-closed {
    padding: var(--espace-3xl) var(--espace-2xl);
    background: var(--panneau-2);
    color: var(--encre-2);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-bloc);
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Toast ---------- */
/* Fond clair, texte fort, filet gauche sémantique : le texte reste lisible
 * (15,6:1) quelle que soit la nature du message, là où les anciens aplats
 * vert / rouge portaient un blanc à 2,5:1. */
#ac-toast {
    position: fixed;
    right: var(--espace-3xl);
    bottom: var(--espace-3xl);
    min-width: 220px;
    max-width: 380px;
    padding: var(--espace-lg) var(--espace-2xl);
    box-sizing: border-box;
    background: var(--panneau);
    color: var(--encre-1);
    border: 1px solid var(--trait);
    border-left: 4px solid var(--accent);
    border-radius: var(--rayon-bloc);
    box-shadow: var(--ombre-douce), 0 8px 24px rgba(20, 40, 28, 0.18);
    font-size: 14px;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duree-courte) ease-out, transform var(--duree-courte) ease-out;
    z-index: 10300;                /* au-dessus de la modal et de l'écran d'erreur */
    pointer-events: none;
}
#ac-toast.show { opacity: 1; transform: translateY(0); }
#ac-toast.success { border-left-color: var(--accent); }
#ac-toast.error   { border-left-color: var(--couleur-danger); }
#ac-toast.info    { border-left-color: var(--encre-2); }

/* ---------- Bandeau cookies RGPD ---------- */
#cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-2xl);
    flex-wrap: wrap;
    padding: var(--espace-xl) var(--espace-3xl);
    background: var(--panneau);
    color: var(--encre-1);
    border-top: 1px solid var(--trait);
    box-shadow: 0 -4px 16px rgba(20, 40, 28, 0.12);
    font-size: 13px;
    /* Au-dessus du voile d'accueil (.accueil-voile, 10350, accueil.css) : le
       consentement doit pouvoir être donné dès l'arrivée, sans avoir à ouvrir
       la carte d'abord (retour de Jérôme, PAESI, 21 septembre 2026). */
    z-index: 10400;
}
#cookie-banner p { margin: 0; max-width: 720px; line-height: 1.45; }
#cookie-banner a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#cookie-banner a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#cookie-banner button {
    min-height: 40px;
    padding: var(--espace-sm) var(--espace-2xl);
    background: var(--accent);
    color: var(--sur-accent);
    border: none;
    border-radius: var(--rayon-controle);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--duree-rapide);
}
#cookie-banner button:hover { filter: brightness(1.12); }
#cookie-banner button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Mobile (point de rupture commun à style.css : 768 px) ---------- */
@media (max-width: 768px) {
    /* Cibles tactiles : la pastille passe à 44 × 44 (style.css ne fixait que
     * la hauteur), les entrées de menu et le « × » aussi. */
    .sidebar .account-chip,
    .account-chip { min-width: 44px; min-height: 44px; }
    .account-dropdown .liste a { min-height: 44px; }
    /* Champs à 16 px : en dessous, iOS zoome la page à la prise de focus. */
    .modal-panel input[type="email"],
    .modal-panel input[type="text"],
    .modal-panel input[type="password"] { font-size: 16px; }
    /* Hauteur bornée à l'écran MOINS le rembourrage du voile : au-delà, un
     * modal plus haut que l'écran (inscription + ALTCHA sur un petit
     * téléphone) débordait du voile, centré, et son « × » passait hors champ
     * sans être atteignable — le voile ne défile pas, seul le modal le fait. */
    .modal-content {
        padding: var(--espace-3xl) var(--espace-2xl) var(--espace-4xl);
        max-height: calc(100vh - 2 * var(--espace-md));
        max-height: calc(100dvh - 2 * var(--espace-md));
    }
    .modal-overlay { padding: var(--espace-md); }
    /* Prénom / nom sur une colonne. */
    .modal-panel .row-inline { flex-direction: column; gap: 0; }
    #ac-toast {
        left: var(--espace-md);
        right: var(--espace-md);
        bottom: var(--espace-md);
        max-width: none;
    }
    #cookie-banner button { width: 100%; min-height: 44px; }
}