/* ==========================================================================
   Zone « compte » : connexion, installation, utilisateurs, journal, mot de passe
   Toutes les classes sont préfixées « compte- » (ce fichier est chargé partout).
   Couleurs : uniquement les jetons de style.css (thème sombre automatique).
   ========================================================================== */

/* ---------- Champs enrichis (communs aux pages de la zone) ---------- */

.compte-champ { min-width: 0; }
.compte-champ > label { margin-bottom: 7px; }
.compte-champ-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.compte-champ-tete label { margin: 0; }
.compte-saisie { position: relative; display: flex; align-items: center; }
.compte-saisie > input { flex: 1; min-width: 0; padding-left: 40px; }
.compte-saisie > input[data-oeil] { padding-right: 46px; }
.compte-saisie-icone {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
    color: var(--texte-3); pointer-events: none; transition: color var(--d-2) var(--ease-out);
}
.compte-saisie-icone .ico, svg.compte-saisie-icone { width: 17px; height: 17px; }
.compte-saisie:focus-within .compte-saisie-icone { color: var(--marque-vif); }
.compte-saisie::after {
    content: ''; position: absolute; inset: -4px; border-radius: 15px; pointer-events: none;
    box-shadow: 0 0 0 3px var(--anneau); opacity: 0;
}
.compte-saisie.compte-genere::after { animation: compte-anneau var(--d-5) var(--ease-out); }

.compte-oeil {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; display: grid; place-items: center;
    background: none; color: var(--texte-3); cursor: pointer;
    transition: background var(--d-2), color var(--d-2);
}
.compte-oeil:hover { background: var(--surface-3); color: var(--texte); }
.compte-oeil .ico { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-ressort); }
.compte-oeil .compte-oeil-ferme { opacity: 0; transform: scale(.5) rotate(-25deg); }
.compte-oeil[aria-pressed="true"] { color: var(--marque-texte); }
.compte-oeil[aria-pressed="true"] .compte-oeil-ouvert { opacity: 0; transform: scale(.5) rotate(25deg); }
.compte-oeil[aria-pressed="true"] .compte-oeil-ferme { opacity: 1; transform: none; }

.compte-majuscules {
    display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .78rem; font-weight: 550; color: var(--attention);
    animation: compte-glisse var(--d-3) var(--ease-out);
}
.compte-majuscules .ico { width: 14px; height: 14px; }
.compte-majuscules[hidden] { display: none; }

/* Indicateur de robustesse */
.compte-robustesse { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.compte-robustesse-barres { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.compte-robustesse-barres i { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; position: relative; }
.compte-robustesse-barres i::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--compte-ton, var(--bord-fort));
    transform: scaleX(0); transform-origin: left; transition: transform var(--d-4) var(--ease-out), background var(--d-3);
}
.compte-robustesse-barres i:nth-child(2)::after { transition-delay: 40ms; }
.compte-robustesse-barres i:nth-child(3)::after { transition-delay: 80ms; }
.compte-robustesse-barres i:nth-child(4)::after { transition-delay: 120ms; }
.compte-robustesse[data-niveau="1"] { --compte-ton: var(--alerte); }
.compte-robustesse[data-niveau="2"] { --compte-ton: var(--dore); }
.compte-robustesse[data-niveau="3"] { --compte-ton: var(--ok); }
.compte-robustesse[data-niveau="4"] { --compte-ton: var(--ok); }
.compte-robustesse[data-niveau="1"] i:nth-child(-n+1)::after,
.compte-robustesse[data-niveau="2"] i:nth-child(-n+2)::after,
.compte-robustesse[data-niveau="3"] i:nth-child(-n+3)::after,
.compte-robustesse[data-niveau="4"] i::after { transform: none; }
.compte-robustesse-libelle { min-width: 92px; text-align: right; font-size: .76rem; font-weight: 600; color: var(--texte-3); white-space: nowrap; }
.compte-robustesse[data-niveau="1"] .compte-robustesse-libelle { color: var(--alerte); }
.compte-robustesse[data-niveau="2"] .compte-robustesse-libelle { color: var(--attention); }
.compte-robustesse[data-niveau="3"] .compte-robustesse-libelle,
.compte-robustesse[data-niveau="4"] .compte-robustesse-libelle { color: var(--ok); }

.compte-criteres { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.compte-criteres li { position: relative; display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--texte-2); transition: color var(--d-2); }
.compte-criteres li::after {
    content: ''; position: absolute; left: 3px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--surface);
    transform: scale(0); transition: transform var(--d-3) var(--ease-ressort);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compte-criteres li.est-ok::after { transform: none; }
.compte-criteres li::before {
    content: ''; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1.5px solid var(--bord-fort);
    transition: background var(--d-2), border-color var(--d-2), transform var(--d-3) var(--ease-ressort);
}
.compte-criteres li.est-ok { color: var(--texte); }
.compte-criteres li.est-ok::before { border-color: var(--ok); background: var(--ok); transform: scale(1.06); }
@media (max-width: 420px) { .compte-criteres { grid-template-columns: minmax(0, 1fr); } }

/* Concordance des deux saisies */
.compte-concordance { display: flex; align-items: center; gap: 6px; min-height: 0; margin: 8px 0 0; font-size: .78rem; font-weight: 550; }
.compte-concordance:empty { display: none; }
.compte-concordance .ico { width: 15px; height: 15px; }
.compte-concordance.est-ok { color: var(--ok); }
.compte-concordance.est-ko { color: var(--alerte); }
.compte-concordance:not(:empty) { animation: compte-glisse var(--d-3) var(--ease-out); }
.compte-saisie.est-ok > input { border-color: color-mix(in srgb, var(--ok) 55%, var(--bord-fort)); }
.compte-saisie.est-ko > input { border-color: color-mix(in srgb, var(--alerte) 55%, var(--bord-fort)); }

/* Case à cocher personnalisée */
.compte-case { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 550; font-size: .88rem; color: var(--texte); cursor: pointer; user-select: none; }
.compte-case input[type=checkbox], .compte-choix input[type=checkbox] {
    -webkit-appearance: none; appearance: none; margin: 0; width: 20px; height: 20px; flex: none; display: grid; place-items: center;
    border: 1.5px solid var(--bord-fort); border-radius: 6px; background: var(--surface); cursor: pointer; box-shadow: var(--ombre-1);
    transition: background var(--d-2), border-color var(--d-2), box-shadow var(--d-2);
}
.compte-case input[type=checkbox]::after, .compte-choix input[type=checkbox]::after {
    content: ''; width: 12px; height: 12px; background: var(--surface); transform: scale(0); transition: transform var(--d-3) var(--ease-ressort);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.compte-case:hover input[type=checkbox]:not(:checked) { border-color: var(--texte-3); }
.compte-case input[type=checkbox]:checked, .compte-choix input[type=checkbox]:checked { background: var(--marque-vif); border-color: var(--marque-vif); }
.compte-case input[type=checkbox]:checked::after, .compte-choix input[type=checkbox]:checked::after { transform: none; }
.compte-case input[type=checkbox]:focus-visible, .compte-choix input[type=checkbox]:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 2px; }

/* Interrupteur (case à cocher présentée comme un bouton bascule) */
.compte-interrupteur { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 550; font-size: .88rem; cursor: pointer; user-select: none; }
.compte-interrupteur input[type=checkbox] {
    -webkit-appearance: none; appearance: none; position: relative; margin: 0; flex: none; width: 40px; height: 24px; border-radius: 999px; cursor: pointer;
    background: var(--bord-fort); transition: background var(--d-3) var(--ease-out);
}
.compte-interrupteur input[type=checkbox]::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: var(--ombre-2); transition: transform var(--d-3) var(--ease-ressort);
}
.compte-interrupteur input[type=checkbox]:checked { background: var(--ok); }
.compte-interrupteur input[type=checkbox]:checked::after { transform: translateX(16px); }
.compte-interrupteur input[type=checkbox]:focus-visible { outline: 2px solid var(--marque-vif); outline-offset: 2px; }

/* ---------- Écrans d'accès : connexion et installation ---------- */

.page-simple.compte-auth { background: radial-gradient(120% 55% at 50% -12%, var(--marque-doux), transparent 62%) no-repeat, var(--fond); }
.compte-auth .page-simple-contenu { display: block; place-items: normal; padding: 0; }
.compte-ecran { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }

/* Panneau de marque (grand écran uniquement) */
.compte-vitrine {
    display: none; position: relative; overflow: hidden; isolation: isolate;
    flex-direction: column; gap: 22px; padding: 34px 44px 28px; border-radius: 22px;
    color: var(--nav-texte); background: linear-gradient(155deg, var(--nav-fond-2) 0%, var(--nav-fond) 58%);
    box-shadow: var(--ombre-3), inset 0 0 0 1px var(--nav-bord);
}
.compte-vitrine-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.compte-vitrine-fond::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--nav-texte) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--nav-texte) 6%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 75% 55% at 62% 38%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 75% 55% at 62% 38%, #000 10%, transparent 72%);
}
.compte-vitrine-fond span { position: absolute; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.compte-vitrine-fond span:nth-child(1) {
    width: 95%; top: -38%; right: -34%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--marque-vif) 62%, transparent), transparent);
    animation: compte-derive-a 26s var(--ease-in-out) infinite alternate;
}
.compte-vitrine-fond span:nth-child(2) {
    width: 80%; bottom: -36%; left: -30%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--dore) 36%, transparent), transparent);
    animation: compte-derive-b 33s var(--ease-in-out) infinite alternate;
}
.compte-vitrine-fond span:nth-child(3) {
    width: 60%; top: 28%; left: 26%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--marque-fonce) 42%, transparent), transparent);
    animation: compte-derive-c 41s var(--ease-in-out) infinite alternate;
}

.compte-vitrine-haut { display: flex; align-items: center; gap: 12px; }
.compte-vitrine-haut strong { display: block; color: #fff; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.compte-vitrine-haut small { display: block; color: var(--nav-texte-2); font-size: .8rem; }

.compte-vitrine-scene { position: relative; flex: 1; min-height: 210px; display: grid; place-items: center; }
.compte-scene-cadre { position: relative; width: min(100%, 470px); padding: 34px 0 26px; }
.compte-illustration { display: block; width: 100%; height: auto; overflow: visible; }
.cpt-stop-clair { stop-color: var(--dore); }
.cpt-stop-moyen { stop-color: color-mix(in srgb, var(--dore) 45%, var(--marque-vif)); }
.cpt-stop-fonce { stop-color: color-mix(in srgb, var(--marque-vif) 75%, var(--marque-fonce)); }
.cpt-stop-bois { stop-color: color-mix(in srgb, var(--marque-fonce) 55%, var(--nav-fond)); }
.cpt-stop-bois-fonce { stop-color: color-mix(in srgb, var(--marque-fonce) 28%, var(--nav-fond)); }
.cpt-ombre { fill: var(--nav-fond); opacity: .75; }
.cpt-reflet { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .22; }
.cpt-grigne { fill: none; stroke: color-mix(in srgb, var(--nav-texte) 65%, var(--dore)); stroke-width: 5; stroke-linecap: round; opacity: .9; }
.cpt-grigne-b path { fill: none; stroke: color-mix(in srgb, var(--nav-texte) 65%, var(--dore)); stroke-width: 3.6; stroke-linecap: round; opacity: .9; }
.cpt-tige { fill: none; stroke: var(--dore); stroke-width: 2.4; stroke-linecap: round; opacity: .75; }
.cpt-grains ellipse { fill: color-mix(in srgb, var(--dore) 72%, transparent); }
.cpt-vapeur path {
    fill: none; stroke: var(--nav-texte); stroke-width: 2.6; stroke-linecap: round; opacity: 0;
    transform-box: fill-box; animation: compte-vapeur 5.4s var(--ease-in-out) infinite;
}
.cpt-vapeur path:nth-child(2) { animation-delay: 1.8s; }
.cpt-vapeur path:nth-child(3) { animation-delay: 3.6s; }
.cpt-farine circle { fill: var(--nav-texte); opacity: .3; transform-box: fill-box; transform-origin: center; animation: compte-scintille 4.5s var(--ease-in-out) infinite alternate; }
.cpt-farine circle:nth-child(2n) { animation-delay: 1.5s; }
.cpt-farine circle:nth-child(3n) { animation-delay: 2.7s; }

.compte-bulle {
    position: absolute; display: flex; align-items: center; gap: 10px; padding: 9px 15px 9px 9px; border-radius: 14px;
    background: color-mix(in srgb, var(--nav-fond-2) 72%, transparent); border: 1px solid var(--nav-bord);
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--nav-fond) 90%, transparent);
    color: var(--nav-texte); line-height: 1.3; white-space: nowrap;
}
.compte-bulle strong { display: block; color: #fff; font-size: .82rem; font-weight: 600; }
.compte-bulle small { display: block; color: var(--nav-texte-2); font-size: .74rem; }
.compte-bulle-icone {
    width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
    color: var(--dore); background: color-mix(in srgb, var(--dore) 16%, transparent);
}
.compte-bulle-icone .ico { width: 16px; height: 16px; }
.compte-bulle-ok { color: color-mix(in srgb, var(--graphe-3) 55%, #fff); background: color-mix(in srgb, var(--graphe-3) 24%, transparent); }
.compte-bulle-1 { top: 0; left: -2%; }
.compte-bulle-2 { bottom: 2%; right: -4%; }

.compte-vitrine-titre {
    margin: 0 0 22px; max-width: 19ch; text-wrap: balance; color: #fff;
    font-size: clamp(1.55rem, 2.15vw, 2.1rem); font-weight: 680; letter-spacing: -.034em; line-height: 1.14;
}
.compte-vitrine-titre span {
    color: var(--dore);
    background: linear-gradient(92deg, var(--dore), color-mix(in srgb, var(--marque-vif) 55%, var(--dore)));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.compte-atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.compte-atouts li { display: flex; align-items: flex-start; gap: 14px; }
.compte-atout-icone {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
    color: var(--dore); background: color-mix(in srgb, var(--dore) 11%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dore) 22%, transparent);
}
.compte-atouts strong { display: block; color: #fff; font-size: .92rem; font-weight: 600; letter-spacing: -.005em; }
.compte-atouts small { display: block; margin-top: 1px; color: var(--nav-texte-2); font-size: .82rem; line-height: 1.45; }
.compte-vitrine-pied { margin: 0; font-size: .76rem; color: var(--nav-texte-2); }

/* Panneau du formulaire */
.compte-panneau { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 10px 20px 28px; }
.compte-boite { width: 100%; max-width: 404px; }
.compte-pastille {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 4px 11px 4px 8px; border-radius: 999px;
    font-size: .74rem; font-weight: 600; color: var(--marque-texte); background: var(--marque-doux);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque-vif) 16%, transparent);
}
.compte-pastille .ico { width: 14px; height: 14px; }
.compte-boite-tete h1 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; letter-spacing: -.035em; }
.compte-boite-tete > p { margin: 0 0 24px; color: var(--texte-2); font-size: .94rem; }

.compte-scan-aide {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--rayon);
    background: var(--info-fond); border: 1px solid color-mix(in srgb, var(--info) 24%, transparent);
}
.compte-scan-aide strong { display: block; margin-bottom: 3px; color: var(--info); font-size: .92rem; line-height: 1.35; }
.compte-scan-aide p { margin: 0; color: var(--texte-2); font-size: .84rem; }
.compte-scan-icone {
    position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none;
    color: var(--info); background: var(--surface); box-shadow: var(--ombre-1), inset 0 0 0 1px color-mix(in srgb, var(--info) 18%, transparent);
}
.compte-scan-icone .ico { width: 22px; height: 22px; }
.compte-scan-icone i {
    position: absolute; left: 7px; right: 7px; top: 9px; height: 2px; border-radius: 2px; background: var(--info);
    box-shadow: 0 0 10px 1px var(--info); opacity: .75; animation: compte-balayage 1.9s var(--ease-in-out) infinite alternate;
}
.compte-erreur { margin-bottom: 18px; }
.compte-erreur > strong { display: block; }
.compte-erreur-detail { display: block; margin-top: 3px; color: var(--texte-2); font-size: .84rem; }

/* Connexion bloquée après trop d'essais : anneau du temps restant et décompte */
.compte-blocage {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; padding: 15px 16px; border-radius: var(--rayon);
    background: var(--attention-fond); border: 1px solid color-mix(in srgb, var(--attention) 28%, transparent);
    animation: compte-glisse var(--d-4) var(--ease-out);
    transition: background var(--d-4) var(--ease-out), border-color var(--d-4);
}
.compte-blocage > div { min-width: 0; }
.compte-blocage [data-blocage-titre] { display: block; margin-bottom: 3px; color: var(--attention); font-size: .94rem; line-height: 1.35; }
.compte-blocage p { margin: 0; color: var(--texte-2); font-size: .86rem; }
.compte-blocage p strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.compte-blocage-icone {
    position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%;
    color: var(--attention); background: var(--surface); box-shadow: var(--ombre-1);
}
.compte-blocage-icone > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.compte-blocage-piste, .compte-blocage-reste { fill: none; stroke-width: 3; }
.compte-blocage-piste { stroke: color-mix(in srgb, var(--attention) 16%, transparent); }
.compte-blocage-reste { stroke: var(--attention); stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1s linear, stroke var(--d-3); }
.compte-blocage-icone .ico { width: 18px; height: 18px; }
.compte-blocage.est-leve { background: var(--ok-fond); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.compte-blocage.est-leve [data-blocage-titre], .compte-blocage.est-leve .compte-blocage-icone { color: var(--ok); }

.compte-form { display: grid; gap: 18px; }
.compte-auth .compte-saisie > input { min-height: 46px; border-radius: 12px; font-size: .95rem; }
.compte-option { display: grid; gap: 4px; }
.compte-option-aide { margin: 0 0 0 30px; font-size: .78rem; color: var(--texte-2); }
.compte-soumettre { width: 100%; margin-top: 2px; }
.compte-soumettre .ico { transition: transform var(--d-3) var(--ease-ressort); }
.compte-soumettre:hover .ico { transform: translateX(3px); }
.compte-note {
    display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0; padding: 12px 14px; border-radius: var(--rayon);
    border: 1px dashed var(--bord-fort); color: var(--texte-2); font-size: .82rem; line-height: 1.5;
}
.compte-note .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--texte-3); }
.compte-note strong { color: var(--texte); font-weight: 600; }
/* Après plusieurs échecs, l'aide « mot de passe oublié » est mise en avant */
.compte-note-appuyee { border-style: solid; border-color: color-mix(in srgb, var(--info) 28%, transparent); background: var(--info-fond); color: var(--texte); }
.compte-note-appuyee .ico { color: var(--info); }
.compte-panneau-pied { margin: auto 0 0; font-size: .76rem; color: var(--texte-3); text-align: center; }

/* Apparition du contenu (uniquement avec JavaScript, sinon tout est visible) */
.js .compte-boite > *, .js .compte-form > * { animation: entree var(--d-4) var(--ease-out) both; }
.js .compte-boite > :nth-child(2) { animation-delay: 60ms; }
.js .compte-boite > :nth-child(3) { animation-delay: 120ms; }
.js .compte-boite > :nth-child(n+4) { animation-delay: 180ms; }
.js .compte-form > :nth-child(3) { animation-delay: 160ms; }
.js .compte-form > :nth-child(4) { animation-delay: 210ms; }
.js .compte-form > :nth-child(5) { animation-delay: 260ms; }
.js .compte-form > :nth-child(n+6) { animation-delay: 310ms; }

/* Petit écran : une seule colonne, le panneau de marque (sans illustration) passe sous le formulaire */
@media (max-width: 959px) {
    .compte-ecran-connexion > .compte-vitrine { display: flex; order: 2; gap: 18px; width: min(404px, calc(100% - 40px)); margin: 0 auto 20px; padding: 26px 22px 20px; border-radius: 20px; }
    .compte-ecran-connexion .compte-vitrine-haut, .compte-ecran-connexion .compte-vitrine-scene { display: none; }
    .compte-ecran-connexion .compte-vitrine-titre { margin-bottom: 18px; font-size: 1.38rem; }
    .compte-ecran-connexion .compte-panneau-pied { display: none; }
    .compte-ecran-connexion .compte-panneau { padding-bottom: 22px; }
}

@media (min-width: 960px) {
    .page-simple.compte-auth { background: var(--fond); }
    .compte-auth .page-simple-haut { position: absolute; top: 0; right: 0; z-index: 5; padding: 18px 22px; }
    .compte-auth .page-simple-haut .marque { display: none; }
    .compte-ecran { min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 12px; padding: 12px; }
    .compte-vitrine { display: flex; position: sticky; top: 12px; height: calc(100vh - 24px); height: calc(100dvh - 24px); }
    .compte-panneau { justify-content: center; padding: 64px 40px 12px; }
    .compte-panneau-pied { margin-top: 0; }
    .compte-boite-tete h1 { font-size: 1.9rem; }
    .compte-progression { display: none; }

    .js .compte-vitrine-haut { animation: entree var(--d-4) var(--ease-out) both; }
    .js .compte-vitrine-scene { animation: compte-scene var(--d-5) var(--ease-out) 80ms both; }
    .js .compte-vitrine-titre { animation: entree var(--d-4) var(--ease-out) 260ms both; }
    .js .compte-atouts li { animation: entree var(--d-4) var(--ease-out) both; }
    .js .compte-atouts li:nth-child(1) { animation-delay: 340ms; }
    .js .compte-atouts li:nth-child(2) { animation-delay: 410ms; }
    .js .compte-atouts li:nth-child(3) { animation-delay: 480ms; }
    .compte-illustration { animation: compte-flotte 7s var(--ease-in-out) 1s infinite alternate; }
    .js .compte-bulle-1 { animation: compte-bulle var(--d-4) var(--ease-ressort) 650ms both, compte-flotte-petit 6s var(--ease-in-out) 1.2s infinite alternate; }
    .js .compte-bulle-2 { animation: compte-bulle var(--d-4) var(--ease-ressort) 900ms both, compte-flotte-petit 7s var(--ease-in-out) 1.45s infinite alternate-reverse; }
}
@media (min-width: 960px) and (max-height: 800px) {
    .compte-vitrine { gap: 16px; padding-top: 26px; padding-bottom: 22px; }
    .compte-vitrine-scene { min-height: 150px; }
    .compte-scene-cadre { width: min(100%, 340px); padding: 26px 0 18px; }
    .compte-vitrine-titre { margin-bottom: 16px; font-size: 1.5rem; }
    .compte-atouts { gap: 10px; }
}
@media (min-width: 960px) and (max-height: 680px) {
    .compte-vitrine-scene { display: none; }
}
@media (min-width: 1280px) {
    .compte-vitrine { padding: 40px 56px 32px; }
}

/* ---------- Assistant d'installation ---------- */

.compte-boite-large { max-width: 500px; container-type: inline-size; }
.compte-champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@container (max-width: 440px) { .compte-champs-2 { grid-template-columns: minmax(0, 1fr); } }
/* Avant installation, l'en-tête répète le nom de l'application : sous-titre masqué */
.compte-installation .page-simple-haut .marque small { display: none; }
.compte-etape { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; }
.compte-etape + .compte-etape { padding-top: 22px; border-top: 1px solid var(--bord); }
.compte-etape legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; margin: 0 0 2px; padding: 0; color: var(--texte); font-size: .98rem; font-weight: 650; letter-spacing: -.01em; }
.compte-etape legend + * { clear: both; }
.compte-etape-num {
    position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-size: .76rem; font-weight: 700; color: var(--texte-2); background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--bord-fort); transition: background var(--d-3), color var(--d-3), box-shadow var(--d-3);
}
.compte-etape-num > * { grid-area: 1 / 1; transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-ressort); }
.compte-etape-num .ico { width: 14px; height: 14px; stroke-width: 2.6; opacity: 0; transform: scale(.4) rotate(-30deg); }
.compte-etape:focus-within .compte-etape-num { color: var(--marque-texte); background: var(--marque-doux); box-shadow: inset 0 0 0 1.5px var(--marque-vif); }
.compte-etape.est-complete .compte-etape-num { color: var(--surface); background: var(--ok); box-shadow: none; }
.compte-etape.est-complete .compte-etape-num > span { opacity: 0; transform: scale(.4); }
.compte-etape.est-complete .compte-etape-num .ico { opacity: 1; transform: none; }

.compte-progression { height: 4px; margin: -6px 0 22px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.compte-progression span {
    display: block; height: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, var(--marque-vif), var(--dore)); transition: transform var(--d-4) var(--ease-out);
}

.compte-choix {
    position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 12px 14px; margin: 0;
    padding: 15px 16px; border: 1px solid var(--bord-fort); border-radius: 14px; background: var(--surface); cursor: pointer;
    box-shadow: var(--ombre-1); transition: border-color var(--d-2), background var(--d-2), box-shadow var(--d-2), transform var(--d-2) var(--ease-out);
}
.compte-choix:hover { border-color: var(--texte-3); box-shadow: var(--ombre-2); }
.compte-choix:active { transform: scale(.995); }
.compte-choix:has(input:checked) { border-color: color-mix(in srgb, var(--marque-vif) 55%, var(--bord-fort)); background: color-mix(in srgb, var(--marque-doux) 60%, var(--surface)); }
.compte-choix input[type=checkbox] { margin-top: 9px; }
.compte-choix-icone {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    color: var(--marque-texte); background: var(--marque-doux); transition: transform var(--d-3) var(--ease-ressort);
}
.compte-choix:has(input:checked) .compte-choix-icone { transform: rotate(-6deg) scale(1.05); }
.compte-choix-texte strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.35; }
.compte-choix-texte small { display: block; margin-top: 3px; color: var(--texte-2); font-size: .82rem; font-weight: 450; line-height: 1.5; }
.compte-base { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--texte-3); font-size: .8rem; }
.compte-base .ico { width: 15px; height: 15px; }
.compte-base strong { color: var(--texte-2); font-weight: 600; }

/* Anneau de progression et étapes dans le panneau de marque */
.compte-anneau { position: relative; width: 76px; height: 76px; margin-bottom: 22px; }
.compte-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.compte-anneau circle { fill: none; stroke-width: 6; }
.compte-anneau-fond { stroke: color-mix(in srgb, var(--nav-texte) 10%, transparent); }
.compte-anneau-valeur {
    stroke: var(--dore); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
    transition: stroke-dashoffset var(--d-5) var(--ease-out); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--dore) 45%, transparent));
}
.compte-anneau > span { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; gap: 3px; }
.compte-anneau strong { display: inline-block; color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.compte-anneau small { color: var(--nav-texte-2); font-size: .78rem; font-weight: 600; }
.js .compte-anneau { animation: echelle var(--d-4) var(--ease-ressort) 200ms both; }
.compte-vitrine-installation .compte-vitrine-texte { margin: auto 0; }
.compte-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.compte-etapes li { position: relative; display: flex; align-items: flex-start; gap: 16px; padding-bottom: 26px; }
.compte-etapes li:last-child { padding-bottom: 0; }
.compte-etapes li::before {
    content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px;
    background: var(--nav-bord);
}
.compte-etapes li::after {
    content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, var(--dore), var(--marque-vif)); transform: scaleY(0); transform-origin: top;
    transition: transform var(--d-4) var(--ease-out);
}
.compte-etapes li:last-child::before, .compte-etapes li:last-child::after { display: none; }
.compte-etapes li.est-complete::after { transform: none; }
.compte-etapes .compte-etape-num {
    width: 36px; height: 36px; font-size: .86rem; color: var(--nav-texte-2); background: color-mix(in srgb, var(--nav-texte) 6%, transparent);
    box-shadow: inset 0 0 0 1px var(--nav-bord);
}
.compte-etapes .compte-etape-num .ico { width: 17px; height: 17px; }
.compte-etapes strong { display: block; margin-top: 1px; color: var(--nav-texte); font-size: .95rem; font-weight: 600; transition: color var(--d-2); }
.compte-etapes small { display: block; margin-top: 2px; color: var(--nav-texte-2); font-size: .82rem; line-height: 1.45; }
.compte-etapes li.est-active .compte-etape-num { color: var(--dore); background: color-mix(in srgb, var(--dore) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--dore), 0 0 0 5px color-mix(in srgb, var(--dore) 12%, transparent); }
.compte-etapes li.est-active strong { color: #fff; }
.compte-etapes li.est-complete .compte-etape-num { color: var(--nav-fond); background: var(--dore); box-shadow: none; }
.compte-etapes li.est-complete .compte-etape-num > span { opacity: 0; transform: scale(.4); }
.compte-etapes li.est-complete .compte-etape-num .ico { opacity: 1; transform: none; }
.compte-vitrine-bas { display: grid; gap: 10px; }
.compte-vitrine-info {
    display: inline-flex; align-items: center; gap: 9px; justify-self: start; margin: 0; padding: 8px 13px 8px 10px; border-radius: 11px;
    color: var(--nav-texte-2); font-size: .8rem; background: color-mix(in srgb, var(--nav-texte) 6%, transparent); box-shadow: inset 0 0 0 1px var(--nav-bord);
}
.compte-vitrine-info .ico { width: 16px; height: 16px; color: var(--dore); }
.compte-vitrine-info strong { color: var(--nav-texte); font-weight: 600; }
.js .compte-etapes li { animation: entree var(--d-4) var(--ease-out) both; }
.js .compte-etapes li:nth-child(1) { animation-delay: 300ms; }
.js .compte-etapes li:nth-child(2) { animation-delay: 380ms; }
.js .compte-etapes li:nth-child(3) { animation-delay: 460ms; }

/* Carte seule (installation impossible ou déjà faite) */
.compte-carte-seule { width: 100%; max-width: 440px; padding: 34px 30px 30px; text-align: center; box-shadow: var(--ombre-3); animation: dialogue-entree var(--d-4) var(--ease-ressort) both; }
.compte-carte-seule h1 { font-size: 1.35rem; margin-bottom: 10px; }
.compte-carte-seule p { color: var(--texte-2); }
.compte-carte-seule p:last-child { margin-bottom: 0; }
.compte-carte-seule-icone {
    width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center;
    color: var(--compte-ton, var(--marque-vif)); background: color-mix(in srgb, var(--compte-ton, var(--marque-vif)) 12%, transparent);
}
.compte-carte-seule-icone .ico { width: 26px; height: 26px; }
.compte-carte-seule-detail { padding: 10px 12px; border-radius: var(--rayon-s); background: var(--surface-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; overflow-wrap: anywhere; text-align: left; }
.compte-ton-alerte { --compte-ton: var(--alerte); }
.compte-ton-info { --compte-ton: var(--info); }
.compte-ton-ok { --compte-ton: var(--ok); }
.compte-ton-attention { --compte-ton: var(--attention); }

/* ---------- En-tête des pages de la zone ---------- */

.compte-page .page-entete > div:first-child { flex: 1 1 480px; max-width: 820px; }
.compte-page .page-entete .sous-titre { text-wrap: pretty; }

/* ---------- Utilisateurs ---------- */

.compte-grille { grid-template-columns: minmax(0, 1fr) minmax(330px, 380px); align-items: start; }
.compte-colonne { display: grid; gap: 18px; min-width: 0; align-content: start; }
.compte-colonne > * { min-width: 0; }
.compte-colonne > .carte { margin: 0; }
.compte-carte-liste, #acces-employes { container-type: inline-size; }
@media (max-width: 1180px) { .compte-grille { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 761px) and (max-width: 1180px) {
    .compte-colonne-cote { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .compte-colonne-cote > .compte-carte-form { grid-row: span 3; }
}

.compte-identite { min-width: 0; }
.compte-identite strong { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--texte); line-height: 1.35; }
.compte-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-identite .badge { flex: none; font-size: .7rem; }
.compte-identite small { display: block; color: var(--texte-2); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-vous { padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 650; letter-spacing: .02em; color: var(--marque-texte); background: var(--marque-doux); }

.compte-avatar { transition: transform var(--d-3) var(--ease-ressort); }
.compte-avatar-admin { color: var(--marque-texte); background: linear-gradient(145deg, var(--marque-doux), color-mix(in srgb, var(--dore) 26%, var(--surface))); }
.compte-avatar-rh { color: var(--info); background: var(--info-fond); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 20%, transparent); }
.compte-avatar-chef { color: var(--texte-2); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.compte-avatar-employe { color: var(--ok); background: var(--ok-fond); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 20%, transparent); }
.compte-avatar-grand { width: 48px; height: 48px; font-size: .95rem; }
.compte-change { animation: compte-pop var(--d-4) var(--ease-ressort); }

.compte-role {
    --compte-ton: var(--texte-2);
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap;
    font-size: .76rem; font-weight: 600; line-height: 1.5; color: var(--compte-ton);
    background: color-mix(in srgb, var(--compte-ton) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--compte-ton) 18%, transparent);
}
.compte-role .ico { width: 13px; height: 13px; }
.compte-role-admin { --compte-ton: var(--marque-texte); background: color-mix(in srgb, var(--marque-vif) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque-vif) 38%, transparent); }
.compte-role-rh { --compte-ton: var(--info); }
.compte-role-chef { --compte-ton: var(--texte-2); }
.compte-role-employe { --compte-ton: var(--ok); }
.compte-fiche, .compte-appareils-nb { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--texte-3); font-size: .76rem; white-space: nowrap; }
.compte-fiche .ico, .compte-appareils-nb .ico { width: 13px; height: 13px; }
.compte-echecs { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; color: var(--attention); background: var(--attention-fond); }
.compte-echecs .ico { width: 12px; height: 12px; }
.compte-echecs-bloque { color: var(--alerte); background: var(--alerte-fond); }
.compte-cellule-connexion time { font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap; }
.compte-statut-inactif { display: block; margin-bottom: 4px; }
.compte-statut-inactif .badge { font-size: .72rem; }
.compte-jamais { color: var(--texte-3); font-style: italic; white-space: nowrap; }
.compte-table { table-layout: fixed; }
.compte-table th:nth-child(2) { width: 27%; }
.compte-table th:nth-child(3) { width: 23%; }
.compte-table th:nth-child(4) { width: 122px; }
.compte-table td { padding-top: 13px; padding-bottom: 13px; }
.compte-table .compte-fiche, .compte-table .compte-appareils-nb { overflow: hidden; text-overflow: ellipsis; }
.compte-table .compte-cellule-connexion .compte-appareils-nb { white-space: normal; align-items: flex-start; }
.compte-table .compte-cellule-connexion .compte-appareils-nb .ico { margin-top: 2px; }
/* Noms longs : sur deux lignes plutôt que tronqués */
.compte-table .compte-nom { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.compte-table .compte-cellule-personne .personne { min-width: 0; }
.compte-table tbody tr { transition: background var(--d-2); }
.compte-table tr.compte-inactif .compte-cellule-personne, .compte-table tr.compte-inactif .compte-cellule-role,
.compte-table tr.compte-inactif .compte-cellule-connexion > :not(.compte-statut-inactif) { opacity: .55; }
.compte-table tr.compte-ligne-active { background: color-mix(in srgb, var(--marque-doux) 70%, transparent); }
.compte-table tr.compte-ligne-active td:first-child { box-shadow: inset 3px 0 0 var(--marque-vif); }
.compte-table tr.compte-ligne-active:hover { background: var(--marque-doux); }
.compte-cellule-action .btn .ico { width: 14px; height: 14px; }

@container (max-width: 620px) {
    .compte-carte-liste .tableau-scroll { margin: 0; padding: 0; overflow: visible; }
    .compte-table, .compte-table tbody { display: block; }
    .compte-table thead { display: none; }
    .compte-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
        padding: 14px 0; border-bottom: 1px solid var(--bord);
    }
    .compte-table tbody tr:last-child { border-bottom: 0; }
    .compte-table td { display: block; padding: 0; border: 0; min-width: 0; }
    .compte-table .compte-cellule-personne { grid-column: 1 / -1; }
    .compte-table .compte-cellule-role { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-left: 45px; }
    .compte-table .compte-cellule-role .compte-fiche { margin: 0; }
    .compte-table .compte-cellule-connexion { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-left: 45px; font-size: .82rem; }
    .compte-table .compte-cellule-connexion .compte-appareils-nb, .compte-table .compte-cellule-connexion .compte-echecs, .compte-table .compte-statut-inactif { margin: 0; }
    .compte-table .compte-cellule-action { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
    .compte-table tr.compte-ligne-active { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--rayon); }
    .compte-table tr.compte-ligne-active td:first-child { box-shadow: none; }
}

.compte-ratio { display: inline-flex; align-items: baseline; gap: 2px; color: var(--texte-3); font-size: .9rem; font-weight: 600; }
.compte-ratio strong { color: var(--texte); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.compte-progression-acces { margin-bottom: 18px; }
.compte-parcours { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container (min-width: 600px) { .compte-parcours { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.compte-parcours li { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bord); }
.compte-parcours li > span {
    width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-size: .74rem; font-weight: 700; color: var(--marque-texte); background: var(--marque-doux);
}
.compte-parcours p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--texte-2); }
.compte-parcours strong { color: var(--texte); font-weight: 600; }
.compte-sous-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-3); }
.compte-sous-titre span { padding: 0 7px; border-radius: 999px; font-size: .72rem; letter-spacing: 0; color: var(--attention); background: var(--attention-fond); }
.compte-sans-acces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px; }
@container (min-width: 560px) { .compte-sans-acces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compte-sans-acces li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 9px 10px 9px 9px;
    border: 1px solid var(--bord); border-radius: var(--rayon); transition: border-color var(--d-2), box-shadow var(--d-2), transform var(--d-2) var(--ease-out);
}
.compte-sans-acces li:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-2); transform: translateY(-1px); }
.compte-sans-acces .avatar { width: 32px; height: 32px; font-size: .72rem; }
.compte-sans-acces .compte-identite strong { font-size: .86rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-sans-acces .btn { flex: none; }
.compte-sans-acces .btn .ico { width: 14px; height: 14px; }

.compte-carte-form { padding: 22px; scroll-margin-top: calc(var(--topbar) + 14px); }
.compte-form-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--bord); }
.compte-form-tete > div { flex: 1; min-width: 0; }
.compte-form-tete h2 { margin: 0 0 2px; font-size: 1.05rem; }
.compte-form-tete p { margin: 0; color: var(--texte-2); font-size: .86rem; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.compte-apercu-role { display: inline-flex; margin-top: 7px; }
.compte-form-champs { display: grid; gap: 16px; }
.compte-champ-employe { transition: opacity var(--d-3) var(--ease-out); }
.compte-attenue { opacity: .62; }
.compte-attenue:focus-within, .compte-attenue:hover { opacity: 1; }
.compte-facultatif { color: var(--texte-3); font-weight: 450; }
.compte-aide-role { min-height: 2.6em; }
.compte-avertissement { display: flex; align-items: center; gap: 6px; color: var(--alerte); font-weight: 550; }
.compte-avertissement[hidden], .compte-genere-aide[hidden] { display: none; }
.compte-avertissement .ico { width: 14px; height: 14px; }
.compte-genere-aide { color: var(--marque-texte); font-weight: 550; }
.compte-lien-bouton {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; margin: -3px -8px -3px 0; border: 0; border-radius: 7px; flex: none;
    background: none; color: var(--marque-texte); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background var(--d-2);
}
.compte-lien-bouton[hidden] { display: none; }
.compte-lien-bouton:hover { background: var(--marque-doux); }
.compte-lien-bouton .ico { width: 14px; height: 14px; transition: transform var(--d-4) var(--ease-out); }
.compte-lien-bouton:active .ico { transform: rotate(180deg); }
.compte-encart {
    display: flex; align-items: flex-start; gap: 9px; margin: -4px 0 16px; padding: 10px 12px; border-radius: var(--rayon-s);
    font-size: .82rem; color: var(--info); background: var(--info-fond);
}
.compte-encart .ico { width: 16px; height: 16px; margin-top: 1px; }
.compte-carte-appareils {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 18px;
    border-color: color-mix(in srgb, var(--alerte) 22%, var(--bord));
}
.compte-carte-appareils-icone { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--alerte); background: var(--alerte-fond); }
.compte-carte-appareils strong { display: block; font-size: .92rem; }
.compte-carte-appareils p { margin: 2px 0 0; color: var(--texte-2); font-size: .82rem; }
.compte-carte-appareils .btn { grid-column: 2; justify-self: start; margin-top: 8px; }
.compte-carte-profils h2 { margin-bottom: 14px; }
.compte-profils { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.compte-profils li { display: grid; gap: 6px; justify-items: start; }
.compte-profils p { margin: 0; color: var(--texte-2); font-size: .84rem; line-height: 1.5; }

/* ---------- Journal d'activité ---------- */

.compte-ton-neutre { --compte-ton: var(--texte-3); }
.compte-ton-marque { --compte-ton: var(--marque-vif); }

.compte-alerte-refus {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 14px 16px; border-radius: var(--rayon-l);
    background: var(--alerte-fond); border: 1px solid color-mix(in srgb, var(--alerte) 26%, transparent);
}
.compte-alerte-refus > div { flex: 1; min-width: 220px; }
.compte-alerte-refus strong { display: block; color: var(--alerte); font-size: .92rem; }
.compte-alerte-refus p { margin: 2px 0 0; color: var(--texte-2); font-size: .84rem; }
.compte-alerte-refus-icone {
    position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
    color: var(--alerte); background: var(--surface); box-shadow: var(--ombre-1);
}
.compte-alerte-refus-icone::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--alerte); opacity: 0;
    animation: compte-onde 2.4s var(--ease-out) 600ms 3; /* attire l'œil au chargement, puis s'arrête */
}
.compte-alerte-refus .btn .ico { width: 14px; height: 14px; }

.compte-journal { padding-bottom: 14px; }
.compte-journal-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.compte-recherche { position: relative; flex: 1 1 170px; min-width: 0; }
.compte-recherche > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--texte-3); pointer-events: none; transition: color var(--d-2); }
.compte-recherche:focus-within > .ico { color: var(--marque-vif); }
.compte-recherche input { padding-left: 40px; }
.compte-effacer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; color: var(--texte-2); font-size: .84rem; font-weight: 550; text-decoration: none; transition: background var(--d-2), color var(--d-2); }
.compte-effacer:hover { background: var(--surface-3); color: var(--texte); }
.compte-effacer .ico { width: 14px; height: 14px; }

.compte-puces {
    display: flex; gap: 6px; margin: 9px -22px 0; padding: 5px 22px 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 30px; /* place pour l'anneau de focus */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.compte-puces::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) {
    .compte-puces { flex-wrap: wrap; margin: 14px 0 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
.compte-puces a {
    display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 6px 8px 6px 12px; border-radius: 999px;
    border: 1px solid var(--bord); background: var(--surface); color: var(--texte-2); font-size: .84rem; font-weight: 550; text-decoration: none; white-space: nowrap;
    transition: background var(--d-2), color var(--d-2), border-color var(--d-2), transform var(--d-2) var(--ease-out);
}
.compte-puces a:first-child { padding-left: 14px; }
.compte-puces a .ico { width: 15px; height: 15px; opacity: .8; }
.compte-puces a span {
    min-width: 22px; padding: 0 7px; border-radius: 999px; text-align: center; font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--texte-2); background: var(--surface-3); transition: background var(--d-2), color var(--d-2);
}
.compte-puces a:hover { border-color: var(--bord-fort); color: var(--texte); }
.compte-puces a:active { transform: scale(.97); }
.compte-puces a.actif { color: var(--surface); background: var(--texte); border-color: var(--texte); view-transition-name: compte-puce-active; }
.compte-puces a.actif span { color: var(--texte); background: var(--surface); }
.compte-puces a.compte-puce-alerte span { color: var(--alerte); background: var(--alerte-fond); }
.compte-puces a.compte-puce-alerte.actif { background: var(--alerte); border-color: var(--alerte); color: var(--surface); }

.compte-journal-resume {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; padding: 12px 0;
    border-bottom: 1px solid var(--bord); color: var(--texte-3); font-size: .84rem;
}
.compte-journal-resume strong { color: var(--texte); font-variant-numeric: tabular-nums; }

.compte-jour {
    position: sticky; top: var(--topbar); z-index: 2; margin: 0 -22px; padding: 14px 22px 8px;
    background: linear-gradient(var(--surface) 70%, color-mix(in srgb, var(--surface) 0%, transparent));
    font-size: .74rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3);
}
.compte-jour span { display: inline-flex; align-items: center; gap: 8px; }
.compte-jour span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--marque-vif); }
.compte-chrono { position: relative; list-style: none; margin: 0 0 6px; padding: 0; }
.compte-chrono::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--bord); }
.compte-evt { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 4px 0; }
.js .compte-evt { animation: entree var(--d-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.compte-evt-icone {
    position: relative; z-index: 1; width: 36px; height: 36px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center;
    color: var(--compte-ton, var(--texte-3)); background: color-mix(in srgb, var(--compte-ton, var(--texte-3)) 13%, var(--surface));
    box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 1px color-mix(in srgb, var(--compte-ton, var(--texte-3)) 22%, transparent);
    transition: transform var(--d-3) var(--ease-ressort);
}
.compte-evt-icone .ico { width: 16px; height: 16px; }
.compte-evt:hover .compte-evt-icone { transform: scale(1.08); }
.compte-evt-corps { min-width: 0; padding: 8px 12px 9px; border-radius: 12px; transition: background var(--d-2); }
.compte-evt:hover .compte-evt-corps { background: var(--surface-2); }
.compte-evt-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.compte-evt-tete strong { font-size: .9rem; font-weight: 600; color: var(--texte); }
.compte-evt-tete .badge { font-size: .7rem; }
.compte-evt-nombre {
    padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums;
    color: var(--compte-ton, var(--texte-2)); background: color-mix(in srgb, var(--compte-ton, var(--texte-3)) 13%, transparent);
}
.compte-evt-groupe .compte-evt-icone::after {
    content: ''; position: absolute; inset: 3px -3px -3px 3px; z-index: -1; border-radius: 50%;
    background: color-mix(in srgb, var(--compte-ton, var(--texte-3)) 10%, var(--surface)); box-shadow: 0 0 0 1px var(--bord);
}
.compte-evt-plus { margin-top: 4px; font-size: .8rem; }
.compte-evt-plus summary {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border-radius: 6px; list-style: none; cursor: pointer;
    color: var(--marque-texte); font-weight: 600; transition: background var(--d-2);
}
.compte-evt-plus summary::-webkit-details-marker { display: none; }
.compte-evt-plus summary:hover { background: var(--marque-doux); }
.compte-evt-plus summary .ico { width: 14px; height: 14px; transition: transform var(--d-3) var(--ease-out); }
.compte-evt-plus[open] summary .ico { transform: rotate(90deg); }
.compte-evt-plus p { margin: 6px 0 2px; color: var(--texte-2); font-variant-numeric: tabular-nums; line-height: 1.7; animation: compte-glisse var(--d-3) var(--ease-out); }
.compte-evt-heure { margin-left: auto; color: var(--texte-3); font-size: .8rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.compte-evt-details { margin: 2px 0 5px; color: var(--texte-2); font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.compte-evt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--texte-3); font-size: .78rem; }
.compte-evt-meta .avatar { width: 20px; height: 20px; font-size: .6rem; }
.compte-avatar-systeme { color: var(--texte-2); background: var(--surface-3); box-shadow: none; }
.compte-avatar-systeme .ico { width: 12px; height: 12px; }
.compte-evt-ip { padding: 0 6px; border-radius: 6px; background: var(--surface-3); color: var(--texte-2); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compte-evt-refus .compte-evt-ip { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.compte-evt-refus .compte-evt-corps { background: color-mix(in srgb, var(--alerte-fond) 80%, transparent); box-shadow: inset 3px 0 0 var(--alerte); }
.compte-evt-refus:hover .compte-evt-corps { background: var(--alerte-fond); }
.compte-evt-refus .compte-evt-tete strong { color: var(--alerte); }
.compte-journal mark { padding: 0 2px; border-radius: 4px; color: inherit; background: color-mix(in srgb, var(--dore) 38%, transparent); }
.compte-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--bord); }
.compte-pagination-info { color: var(--texte-3); font-size: .84rem; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .compte-evt { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
    .compte-evt-icone { width: 30px; height: 30px; }
    .compte-evt-icone .ico { width: 14px; height: 14px; }
    .compte-chrono::before { left: 14px; }
    .compte-evt-corps { padding: 7px 8px 8px; }
    .compte-pagination .btn { padding-left: 11px; padding-right: 11px; }
    .compte-pagination-info { font-size: .78rem; }
}

/* ---------- Mon mot de passe ---------- */

.compte-mdp-grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; max-width: 1060px; }
@media (max-width: 900px) { .compte-mdp-grille { grid-template-columns: minmax(0, 1fr); } }
.compte-mdp-form { padding: 24px; }
.compte-tete-icone {
    width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
    color: var(--marque-texte); background: var(--marque-doux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque-vif) 18%, transparent);
}
.compte-tete-icone .ico { width: 21px; height: 21px; }
.compte-separateur { height: 1px; margin: 2px 0; background: var(--bord); }
.compte-mdp-form .compte-saisie > input { min-height: 44px; }
.compte-moi-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.compte-moi-tete .compte-identite { flex: 1; }
.compte-moi-tete .compte-identite strong { font-size: 1rem; }
.compte-moi-infos { display: grid; gap: 0; margin: 0; }
.compte-moi-infos > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bord); font-size: .86rem; }
.compte-moi-infos dt { color: var(--texte-3); }
.compte-moi-infos dd { margin: 0; font-weight: 600; text-align: right; }
.compte-conseils h2 { margin-bottom: 14px; }
.compte-conseils ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.compte-conseils li { display: flex; align-items: flex-start; gap: 12px; }
.compte-conseils p { margin: 0; color: var(--texte-2); font-size: .86rem; line-height: 1.55; }
.compte-conseils q { color: var(--texte); font-weight: 600; quotes: '«\00a0' '\00a0»'; white-space: nowrap; }
.compte-conseil-icone {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none;
    color: var(--compte-ton); background: color-mix(in srgb, var(--compte-ton) 12%, transparent);
}
.compte-conseil-icone .ico { width: 16px; height: 16px; }

/* ---------- Animations propres à la zone ---------- */

@keyframes compte-derive-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-16%, 14%) scale(1.14); } }
@keyframes compte-derive-b { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(18%, -12%) scale(.92); } }
@keyframes compte-derive-c { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-10%, -16%) rotate(40deg); } }
@keyframes compte-flotte { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes compte-flotte-petit { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes compte-scene { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes compte-bulle { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes compte-vapeur { 0% { opacity: 0; transform: translateY(12px); } 40% { opacity: .38; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes compte-scintille { from { opacity: .12; transform: scale(.7); } to { opacity: .45; transform: scale(1.1); } }
@keyframes compte-balayage { from { transform: translateY(0); } to { transform: translateY(22px); } }
@keyframes compte-pop { 0% { transform: scale(.85); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes compte-onde { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes compte-glisse { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes compte-anneau { 0% { opacity: 0; transform: scale(.97); } 35% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.02); } }