/* Mobile first : les règles de base visent le téléphone, les media queries
   n'ajoutent que ce qu'un écran plus large permet. */

:root {
  --fond:#fff; --texte:#1a1a2e; --bord:#e2e2ee; --accent:#2b50d8; --doux:#f6f7fb;
  --vert:#2e7d32; --vert-fond:#e6f4e6; --rouge:#c62828; --rouge-fond:#fdeaea;
  --orange:#ef6c00;
  /* Couleurs de categorie : un bleu pour le TCF (proche de l'accent existant),
     un corail pour le TEF — deux teintes distinctes, sobres, sans lien avec
     une marque de reference. */
  --tcf:#2b6cd8; --tcf-fond:#eaf1fd; --tef:#d8622b; --tef-fond:#fdf1ea;
  --ielts:#2e9e6b; --ielts-fond:#e8f7f0;
  --carte-ombre:0 1px 2px rgba(20,20,40,.06), 0 6px 16px rgba(20,20,40,.06);
  --carte-ombre-hover:0 2px 4px rgba(20,20,40,.08), 0 10px 24px rgba(20,20,40,.1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond:#14141c; --texte:#ececf4; --bord:#2c2c3c; --accent:#7f9bff; --doux:#1c1c26;
    --vert:#66bb6a; --vert-fond:#1b3a1e; --rouge:#ef5350; --rouge-fond:#3a1c1c;
    --tcf:#7f9bff; --tcf-fond:#1b2440; --tef:#f0895a; --tef-fond:#3a2418;
    --ielts:#4fd39c; --ielts-fond:#173428;
    --carte-ombre:0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.25);
    --carte-ombre-hover:0 2px 4px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.3);
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
       background:var(--fond); color:var(--texte); overflow-wrap:break-word;
       display:flex; flex-direction:column; min-height:100vh; }
img, audio, video { max-width:100%; }

/* ---------------------------------------------------------------- ossature */
.entete { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
          padding:.55rem 1rem; border-bottom:1px solid var(--bord); }
.marque { display:inline-flex; align-items:center; gap:.45rem;
          font-size:1.05rem; font-weight:700; text-decoration:none; color:var(--texte);
          letter-spacing:.01em; }
/* Dimensions posees aussi en HTML (width/height) : sans elles l'entete sursaute
   entre le rendu du texte et l'arrivee de l'image.
   Le nom reprend `--texte` : `.entete a` est plus specifique que `.marque` et
   lui donnerait sinon la couleur des liens de navigation. */
.marque-logo { width:1.85rem; height:1.85rem; border-radius:.25rem; display:block; }
.marque-nom { line-height:1; color:var(--texte); }

.entete nav { margin-left:auto; display:flex; align-items:center; gap:.75rem;
              font-size:.87rem; font-weight:600; }
.entete a { color:var(--texte); text-decoration:none; transition:color .15s ease; }
.entete a:hover { color:var(--accent); }
.qui { opacity:.75; }
.bouton-petit { padding:.32rem .75rem; font-size:.82rem; font-weight:700; border-radius:.45rem; color:#fff !important; }
.contenu { flex:1; width:100%; max-width:62rem; margin:0 auto; padding:1rem; }
.pied { position:sticky; bottom:0; z-index:10; background:var(--fond);
        border-top:1px solid var(--bord); padding:1rem; opacity:.75; font-size:.8rem; }
h1 { margin-top:0; font-size:1.5rem; }
h2 { font-size:1.2rem; }
@media (min-width:48rem) {
  .entete { padding:1rem 1.5rem; }
  .contenu { padding:2rem 1.5rem; }
  h1 { font-size:1.9rem; }
}

/* ---------------------------------------------------------------- formulaires */
.carte { display:grid; gap:1rem; padding:1.25rem; border:1px solid var(--bord);
         border-radius:.6rem; background:var(--doux); }
@media (min-width:34rem) { .carte { max-width:26rem; padding:1.5rem; } }
label { display:grid; gap:.35rem; font-size:.9rem; }
input, textarea { padding:.7rem; border:1px solid var(--bord); border-radius:.4rem;
        background:var(--fond); color:var(--texte); font-size:16px; width:100%; }
button { padding:.7rem 1.1rem; border:0; border-radius:.4rem; background:var(--accent);
         color:#fff; font-size:1rem; cursor:pointer; min-height:44px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.lien { background:none; color:var(--accent); padding:0; min-height:auto; }
button.danger { background:var(--rouge); }
button.secondaire { background:var(--doux); color:var(--texte); border:1px solid var(--bord); }
.bouton { display:inline-block; padding:.7rem 1.1rem; border-radius:.4rem;
          background:var(--accent); color:#fff !important; text-decoration:none; }
.bouton.secondaire { background:var(--doux); color:var(--texte) !important;
                     border:1px solid var(--bord); }
.enligne { display:inline; }
.form-standard { display:grid; gap:1rem; }
.separateur-auth { display:flex; align-items:center; text-align:center; margin:.25rem 0; color:var(--texte); opacity:.6; font-size:.85rem; }
.separateur-auth::before, .separateur-auth::after { content:''; flex:1; border-bottom:1px solid var(--bord); }
.separateur-auth:not(:empty)::before { margin-right:.75em; }
.separateur-auth:not(:empty)::after { margin-left:.75em; }
.bloc-google { width:100%; }
.bouton-google-perso { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; padding:.7rem 1rem; border:1px solid var(--bord); border-radius:.4rem; background:var(--fond); color:var(--texte); font-size:.95rem; font-weight:500; cursor:pointer; transition:background-color .2s, border-color .2s; text-decoration:none; }
.bouton-google-perso:hover { background:var(--doux); border-color:var(--accent); }
.alerte { padding:.8rem 1rem; border-radius:.4rem; background:var(--rouge-fond); color:var(--rouge); }
.info { padding:.8rem 1rem; border-radius:.4rem; background:var(--doux); }

/* ---------------------------------------------------------------- listes */
.liste { width:100%; border-collapse:collapse; font-size:.9rem; }
.liste th, .liste td { padding:.5rem .4rem; border-bottom:1px solid var(--bord); text-align:left; }
.liste th { font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; opacity:.6; }
.badge { font-size:.72rem; padding:.15rem .5rem; border-radius:1rem;
         background:var(--doux); border:1px solid var(--bord); white-space:nowrap; }
.badge.encours { background:var(--accent); color:#fff; border-color:transparent; }
/* Remplissage par degrade plutot que par largeur en pourcentage : dans une
   cellule de tableau, un enfant en width:N% dont le parent est en largeur auto
   ne resout pas le pourcentage et s'affiche pleine largeur. */
.mini-jauge { display:block; height:4px; border-radius:2px; margin-top:.3rem; min-width:4rem;
              background:linear-gradient(to right,
                var(--accent) var(--p, 0%), var(--bord) 0); }
.chiffres { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.5rem; }
.chiffres div { display:grid; }
.chiffres strong { font-size:1.6rem; }
.chiffres span { opacity:.65; font-size:.8rem; }

/* ---------------------------------------------------------------- accueil */
.accueil-hero, .accueil-tete { padding:1.5rem 0 .5rem; }
.accueil-intro { max-width:38rem; opacity:.8; }
.accueil-cta { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.2rem; }
.section-accueil { margin-top:2.2rem; }
.section-accueil h2 { margin-bottom:.9rem; }
.accueil-tests { display:flex; gap:.6rem; margin-top:1.2rem; }
.badge-test { font-size:.78rem; font-weight:600; padding:.3rem .8rem; border-radius:1rem; }
.badge-test.test-tcf { background:var(--tcf-fond); color:var(--tcf); }
.badge-test.test-tef { background:var(--tef-fond); color:var(--tef); }
.badge-test.test-ielts { background:var(--ielts-fond); color:var(--ielts); }

.grille-progression { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); }
.bloc-test { border:1px solid var(--bord); border-radius:.75rem; padding:1.1rem 1.2rem;
             background:var(--fond); box-shadow:var(--carte-ombre); }
.bloc-test h3 { margin:0 0 .8rem; font-size:1rem; }
.bloc-test.test-tcf h3 { color:var(--tcf); }
.bloc-test.test-tef h3 { color:var(--tef); }
.bloc-test.test-ielts h3 { color:var(--ielts); }
.liste-progression { list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.liste-progression li { font-size:.88rem; }
.lp-lien { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.lp-icone { flex:none; width:1.4rem; height:1.4rem; opacity:.75; }
.lp-icone svg { width:100%; height:100%; }
.lp-texte { flex:1 1 auto; min-width:0; display:grid; gap:.3rem; }
.lp-jauge { margin-top:0; }
.lp-chiffre { flex:none; opacity:.6; font-variant-numeric:tabular-nums; font-size:.8rem; }

/* ---------------------------------------------------------------- cartes epreuve */
.section-epreuves { margin-top:2rem; }
.section-epreuves:first-of-type { margin-top:1.5rem; }
.titre-test { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.pastille-test { width:.7rem; height:.7rem; border-radius:50%; background:var(--accent); }
.test-tcf .pastille-test { background:var(--tcf); }
.test-tef .pastille-test { background:var(--tef); }
.test-ielts .pastille-test { background:var(--ielts); }
.test-tcf .titre-test { color:var(--tcf); }
.test-tef .titre-test { color:var(--tef); }

.grille-cartes { display:grid; gap:1rem;
                 grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
.grille-cartes-large { grid-template-columns:repeat(auto-fill,minmax(20rem,1fr)); }

.carte-epreuve { display:flex; align-items:center; gap:.9rem; padding:1.1rem 1.2rem;
                 border:1px solid var(--bord); border-radius:.75rem; background:var(--fond);
                 box-shadow:var(--carte-ombre); transition:box-shadow .2s, transform .2s;
                 text-decoration:none; color:inherit; }
a.carte-epreuve:hover { box-shadow:var(--carte-ombre-hover); transform:translateY(-2px); }
/* Carte de série : cliquable sur toute sa surface (voir commun.js), pas
   seulement le bouton — le bouton reste focusable/actionnable au clavier. */
.carte-cliquable { cursor:pointer; }
.carte-cliquable:hover { box-shadow:var(--carte-ombre-hover); transform:translateY(-2px); }
.carte-epreuve-icone { flex:none; width:2.6rem; height:2.6rem; padding:.5rem;
                        border-radius:.6rem; background:var(--doux); color:var(--accent); }
.test-tcf .carte-epreuve-icone { background:var(--tcf-fond); color:var(--tcf); }
.test-tef .carte-epreuve-icone { background:var(--tef-fond); color:var(--tef); }
.carte-epreuve-icone svg { width:100%; height:100%; }
.carte-epreuve-icone.icone-librairie { background:var(--vert-fond); color:var(--vert); }
.carte-epreuve-icone.icone-exemples  { background:var(--tef-fond); color:var(--tef); }
.grille-cartes-ressources { margin-bottom:1.5rem; }
.titre-series { margin-bottom:.8rem; }
.carte-epreuve-corps { display:grid; gap:.15rem; flex:1 1 auto; min-width:0; }
.carte-epreuve-test { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; opacity:.6; }
.carte-epreuve-titre { font-weight:600; font-size:.98rem; }
.carte-epreuve-sous { font-size:.85rem; opacity:.7; }
.carte-epreuve-meta { font-size:.78rem; opacity:.55; }
.carte-epreuve-action { flex:none; display:grid; gap:.4rem; justify-items:end; }
.carte-epreuve-action form button { white-space:nowrap; }

/* Grille "vitrine" (accueil, non connecte) : icone au centre, pas d'action. */
.carte-vitrine { flex-direction:column; text-align:center; justify-items:center; }
.carte-vitrine .carte-epreuve-icone { width:3.2rem; height:3.2rem; }
.carte-vitrine .carte-epreuve-titre { margin-top:.3rem; }

.carte-en-cours .carte-epreuve-titre { font-size:.95rem; }
.carte-verrouillee { opacity:.75; }

.badge-encours { background:var(--accent); color:#fff; }
.badge-premium { display:inline-flex; align-items:center; gap:.3rem;
                  background:var(--doux); color:var(--texte); border:1px solid var(--bord); }
.icone-cadenas { width:.9rem; height:.9rem; }

@media (max-width:26rem) {
  .carte-epreuve { flex-wrap:wrap; }
  .carte-epreuve-action { justify-items:start; width:100%; }
}

/* Fil d'ariane : navigation de retour des etapes 2 et 3 de l'entonnoir. */
.fil-ariane { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
              font-size:.85rem; margin-bottom:.6rem; opacity:.8; }
.fil-ariane a { color:var(--accent); text-decoration:none; }
.fil-ariane a:hover { text-decoration:underline; }
.fil-ariane-sep { opacity:.5; }
.fil-ariane-courant { font-weight:600; }

/* Etape 1 de l'entonnoir : deux grandes tuiles TCF / TEF. */
.grille-tuiles-test { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
                       margin-top:1.5rem; }
.tuile-test { display:grid; gap:.4rem; justify-items:center; text-align:center;
              padding:2.4rem 1.5rem; border-radius:1rem; text-decoration:none;
              box-shadow:var(--carte-ombre); transition:box-shadow .2s, transform .2s; }
.tuile-test:hover { box-shadow:var(--carte-ombre-hover); transform:translateY(-2px); }
.tuile-test-nom { font-size:2rem; font-weight:800; }
.tuile-test-sous { font-size:.9rem; opacity:.75; }
.tuile-tcf { background:var(--tcf-fond); color:var(--tcf); }
.tuile-tef { background:var(--tef-fond); color:var(--tef); }
.tuile-ielts { background:var(--ielts-fond); color:var(--ielts); }

/* ---------------------------------------------------------------- épreuve */
/* Sticky : reste visible au défilement — c'est la seule indication de
   progression et de temps restant, une fois le header standard retiré de la
   page d'examen. Fond opaque obligatoire, sinon le contenu défile dessous. */
.barre { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
         gap:.5rem; margin-bottom:.5rem; position:sticky; top:0; z-index:10;
         background:var(--fond); padding:.6rem 0; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.progression { font-size:.95rem; }
.chronos { display:flex; align-items:baseline; gap:.4rem; }
.etiq { font-size:.65rem; opacity:.55; text-transform:uppercase; letter-spacing:.03em; }
.chrono { font-variant-numeric:tabular-nums; font-size:1.15rem; }
.chrono.global { font-size:.95rem; opacity:.75; }
.chrono.urgent { color:var(--rouge); font-weight:700; animation:pulsation .6s ease-in-out infinite; }
@keyframes pulsation {
  0%,100% { transform:scale(1);    opacity:1;   }
  50%     { transform:scale(1.18); opacity:.65; }
}
@media (prefers-reduced-motion:reduce) { .chrono.urgent { animation:none; } }

.jauge { height:6px; background:var(--bord); border-radius:3px; overflow:hidden; margin-bottom:1rem; }
.jauge-remplie { height:100%; width:100%; background:var(--accent);
                 transition:width 1s linear, background-color 1s linear; }

.colonnes { display:block; }
.grille-nav { display:block; margin:0 0 1rem; width:100%; }
.grille-nav-details { border:1px solid var(--bord); border-radius:.6rem; background:var(--fond);
                      box-shadow:var(--carte-ombre); overflow:hidden; }
.grille-nav-sommaire { display:flex; align-items:center; justify-content:space-between;
                       padding:.7rem 1rem; cursor:pointer; font-weight:600; font-size:.92rem;
                       user-select:none; background:var(--doux); }
.grille-nav-sommaire::-webkit-details-marker { display:none; }
.sommaire-titre { display:flex; align-items:center; gap:.5rem; }
.icone-grille { font-size:1.1rem; }
.sommaire-droite { display:flex; align-items:center; gap:.6rem; }
.badge-progression-grille { font-size:.8rem; padding:.15rem .5rem; border-radius:1rem;
                            background:var(--fond); border:1px solid var(--bord); font-weight:600; }
.chevron-grille { font-size:1rem; transition:transform .2s ease; display:inline-block; }
details.grille-nav-details[open] .chevron-grille { transform:rotate(180deg); }

.grille-nav-contenu { padding:.75rem; border-top:1px solid var(--bord); background:var(--fond);
                      max-height:55vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.grille-nav ol { list-style:none; margin:0; padding:0;
                 display:grid; grid-template-columns:repeat(auto-fill, minmax(2.5rem, 1fr));
                 gap:.35rem; }

/* Cases de la grille de questions (mobile & desktop) */
.case { width:100%; min-height:2.4rem; padding:0; font-size:.88rem; font-weight:600;
        border-radius:.35rem; background:var(--doux); color:var(--texte);
        border:1px solid var(--bord); cursor:pointer; transition:all .15s ease;
        display:flex; align-items:center; justify-content:center; }
.case:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.case.juste  { background:var(--vert-fond);  border-color:var(--vert);  color:var(--vert); }
.case.repondue { background:var(--doux); border-color:var(--accent); color:var(--accent); font-weight:700; }
.case.faux   { background:var(--rouge-fond); border-color:var(--rouge); color:var(--rouge); }
.case.zero   { border-color:var(--orange); color:var(--orange); }
.case.servie { border-style:dashed; }
.case.ici    { outline:2px solid var(--accent); outline-offset:1px; font-weight:800; }

/* Sans menu latéral (CO, ou CE sur petit écran) : centrer la carte de question
   sur une largeur lisible plutôt que de la laisser s'étirer sur toute la
   largeur disponible. */
.colonne-principale { max-width:44rem; margin:0 auto; width:100%; }
.carte-question { padding:1rem; border:1px solid var(--bord); border-radius:.6rem; }
@media (min-width:48rem) { .carte-question { padding:1.5rem; } }

/* Écran de départ CO : le clic fournit l'activation utilisateur nécessaire à
   l'autoplay audio de la première question (voir epreuve.js, fin de fichier). */
.depart-co { display:block; width:100%; padding:2rem 1rem; font-size:1.1rem; font-weight:600;
             border:1px dashed var(--accent); border-radius:.6rem; background:var(--doux);
             color:var(--accent); cursor:pointer;
             animation:depart-co-pulsation 2s ease-in-out infinite;
             transition:background .2s ease, transform .15s ease, box-shadow .2s ease; }
.depart-co:hover { background:var(--tcf-fond, var(--doux)); transform:scale(1.015);
                   animation-play-state:paused; }
.depart-co:active { transform:scale(.99); }

/* Le bouton respire doucement pour signaler qu'il attend un clic : sans
   activation utilisateur sur CE document, le navigateur refuse l'autoplay
   audio de la premiere question. La pulsation s'arrete au survol, une fois
   l'attention obtenue. */
@keyframes depart-co-pulsation {
  0%, 100% { box-shadow:0 0 0 0 rgba(59,130,246,.28); }
  50%      { box-shadow:0 0 0 .55rem rgba(59,130,246,0); }
}

/* Certains candidats passent l'epreuve avec « reduire les animations »
   active — souvent pour une raison vestibulaire. On garde alors le retour
   au survol, sans mouvement continu. */
@media (prefers-reduced-motion: reduce) {
  .depart-co { animation:none; }
  .depart-co:hover, .depart-co:active { transform:none; }
}
.media-wrapper { position:relative; min-height:140px; width:100%; border-radius:.6rem; overflow:hidden; background:var(--doux); display:flex; align-items:center; justify-content:center; margin:1rem 0; }
.media-loader { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; padding:1.5rem; width:100%; height:100%; min-height:140px; background:linear-gradient(90deg, var(--doux) 25%, var(--bord) 50%, var(--doux) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; color:var(--texte); opacity:.8; font-size:.88rem; font-weight:600; text-align:center; border-radius:.6rem; }
.media-loader-spinner { width:24px; height:24px; border:2.5px solid var(--bord); border-top-color:var(--accent); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes spin { to { transform:rotate(360deg); } }

.media { height:auto; max-width:100%; border-radius:.4rem; display:block; opacity:0; transition:opacity .25s ease-in-out; cursor:pointer; }
.media.charge { opacity:1; }
.media-audio { width:100%; margin:.8rem 0; }
.note-audio { font-size:.82rem; opacity:.7; margin:.2rem 0 .8rem; }
.contexte { white-space:pre-wrap; margin:1rem 0; }
.consigne { font-weight:600; margin:1rem 0; white-space:pre-wrap; }

.answer-grid { display:grid; gap:.55rem; margin-top:1rem; }
.answer-option { display:flex; gap:.6rem; align-items:flex-start; padding:.8rem .9rem;
                 border:1px solid var(--bord); border-radius:.4rem; cursor:pointer;
                 transition:background-color .15s, border-color .15s, transform .1s; }
.answer-option:hover { border-color:var(--accent); }
.answer-option.clique, .answer-option:has(input:checked) { background:var(--doux); border-color:var(--accent); }
.answer-option.juste { background:var(--vert-fond) !important; border-color:var(--vert) !important; color:var(--vert) !important; }
.answer-option.faux  { background:var(--rouge-fond) !important; border-color:var(--rouge) !important; color:var(--rouge) !important; }
.carte-offre:hover {
  transform: translateY(-3px);
  border-color: #2f7fd1 !important;
}

.payment-method-card:hover {
  transform: translateY(-2px);
  border-color: #2f7fd1 !important;
  box-shadow: 0 6px 18px rgba(47,127,209,0.12) !important;
}
.answer-option:has(input:disabled) { cursor:default; }

/* IELTS : reponse libre (texte) et QCM a cases a cocher (bouton « Valider »). */
.answer-texte-bloc { display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.answer-texte { flex:1 1 16rem; padding:.7rem .9rem; border:1px solid var(--bord);
                border-radius:.4rem; background:var(--fond); color:var(--texte); font:inherit; }
.answer-texte.juste { border-color:var(--vert); background:var(--vert-fond); color:var(--vert); }
.answer-texte.faux  { border-color:var(--rouge); background:var(--rouge-fond); color:var(--rouge); }
.answer-valider { align-self:flex-start; margin-top:.9rem; padding:.65rem 1.1rem;
                  border:1px solid var(--accent); border-radius:.4rem; background:var(--accent);
                  color:#fff; font:inherit; cursor:pointer; }
.answer-valider:disabled { opacity:.5; cursor:default; }
.reponse-attendue { margin-top:.7rem; font-size:.9rem; opacity:.85; }

/* IELTS Listening : toutes les questions d'une section affichees ensemble
   sous l'audio, remplies pendant qu'il joue (voir epreuve.js afficherGroupe). */
.groupe-questions { display:grid; gap:1.4rem; margin-top:1rem; }
.groupe-question { border:1px solid var(--bord); border-radius:.5rem; padding:1rem;
                    position:relative; }
.groupe-question.juste { border-color:var(--vert); background:var(--vert-fond); }
.groupe-question.faux  { border-color:var(--rouge); background:var(--rouge-fond); }
.groupe-question-num { display:inline-flex; align-items:center; justify-content:center;
                        width:1.6rem; height:1.6rem; border-radius:50%; background:var(--doux);
                        font-weight:700; font-size:.85rem; margin-bottom:.5rem; }
.carte-groupe .answer-valider { margin-top:1.2rem; }

/* Transition visible avant l'enchaînement automatique en CO (2,2 s) — positionnée en haut */
.transition-co { margin:0 0 1.25rem; text-align:center; padding:.85rem 1.1rem;
                 background:var(--doux); border:1px solid var(--bord);
                 border-radius:.6rem; box-shadow:var(--carte-ombre); }
.transition-co-barre { height:6px; border-radius:3px; background:var(--bord); overflow:hidden; }
.transition-co-rempli { height:100%; width:0%; background:var(--accent);
                         transition:width linear 0ms; }
.transition-co-rempli.plein { width:100%; }
.transition-co-texte { margin:.5rem 0 0; font-size:.9rem; font-weight:600; color:var(--accent); }

.navigation { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.navigation button { flex:1 1 auto; }
#soumettre { flex-basis:100%; }
@media (min-width:34rem) {
  .navigation button { flex:0 0 auto; }
  #soumettre { flex-basis:auto; margin-left:auto; }
}
.note { min-height:1.4rem; opacity:.75; font-size:.88rem; }

/* Menu latéral de navigation : desktop uniquement (CE).
   Le sélecteur :has() borne la grille aux pages qui ont réellement un menu —
   en CO, .grille-nav n'existe pas dans le DOM, et .colonnes ne doit pas
   réserver une colonne vide de 12.5rem à côté de la carte de question. */
@media (min-width:62rem) {
  .colonnes:has(.grille-nav) { display:grid; grid-template-columns:12.5rem 1fr; gap:1.5rem; align-items:start; }
  .grille-nav { display:block; position:sticky; top:1rem; margin:0; }
  .grille-nav-details { box-shadow:none; }
  .grille-nav-details summary { cursor:default; pointer-events:none; }
  .grille-nav-details .chevron-grille { display:none; }
  .grille-nav-contenu { display:block !important; max-height:none; overflow-y:visible; padding:.75rem .6rem; }
  .grille-nav ol { grid-template-columns:repeat(5, 1fr); gap:.3rem; }
  .case { min-height:2rem; font-size:.8rem; }
  .case.ici    { outline:2px solid var(--accent); outline-offset:1px; font-weight:700; }
}

/* ---------------------------------------------------------------- modales */
.modale { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex;
          align-items:center; justify-content:center; padding:1rem; z-index:50; }
.modale[hidden] { display:none; }
.modale-boite { background:var(--fond); color:var(--texte); border-radius:.7rem;
                padding:1.3rem; max-width:30rem; width:100%; max-height:90vh; overflow:auto;
                box-shadow:0 12px 40px rgba(0,0,0,.35); }
.modale-boite h2 { margin:0 0 .8rem; font-size:1.15rem; }
.modale-avert { font-size:.85rem; opacity:.75; }
.modale-actions { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; margin-top:1.3rem; }
.modale-actions button { flex:1 1 auto; }
@media (min-width:34rem) { .modale-actions button { flex:0 0 auto; } }
.recap { margin:.8rem 0; padding-left:1.1rem; font-size:.92rem; }

/* ---------------------------------------------------------------- résultat */
.score { display:flex; flex-wrap:wrap; gap:1.5rem; margin:1.5rem 0; }
.score div { display:grid; }
.score strong { font-size:1.8rem; }
.score small { font-size:.95rem; opacity:.6; }
.score span { opacity:.65; font-size:.8rem; }
.grille-cecrl { margin:1.5rem 0; }
.liste tr.ici { background:var(--doux); font-weight:700; }

.correction { padding:1rem; border-left:4px solid var(--bord);
              background:var(--doux); border-radius:.4rem; margin-bottom:1rem; }
.correction.juste { border-left-color:var(--vert); }
.correction.faux  { border-left-color:var(--rouge); }
.correction.vide  { border-left-color:var(--orange); }
.correction h3 { margin:0 0 .5rem; font-size:1rem; }
.etiquette { font-size:.72rem; padding:.1rem .5rem; border-radius:1rem;
             border:1px solid var(--bord); margin-left:.5rem; font-weight:400; }
.choix-corr { list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.3rem; }
.choix-corr li { padding:.4rem .6rem; border-radius:.3rem; font-size:.92rem; }
.choix-corr li.bonne  { background:var(--vert-fond);  color:var(--vert); }
.choix-corr li.donnee { background:var(--rouge-fond); color:var(--rouge); }
.choix-corr em { font-size:.75rem; opacity:.85; margin-left:.4rem; }

/* Deux colonnes dès que la largeur le permet : énoncé à gauche, média à droite. */
.correction-corps { display:grid; gap:1rem; }
@media (min-width:48rem) {
  .correction-corps.avec-media { grid-template-columns:1fr 18rem; }
}
.correction-media { display:grid; gap:.6rem; align-content:start; }
.correction-media img { width:100%; border-radius:.4rem; cursor:zoom-in; display:block; }
.correction-media audio { width:100%; }
.media-attente { font-size:.82rem; opacity:.6; }

/* Visionneuse plein écran */
.carte-question img.media { cursor:zoom-in; transition:opacity .15s ease; }
.carte-question img.media:hover { opacity:.95; }

.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); display:flex;
            align-items:center; justify-content:center; z-index:60; padding:1rem; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:100%; max-height:92vh; object-fit:contain; border-radius:.3rem; }
.lightbox-fermer { position:absolute; top:.8rem; right:.8rem; background:rgba(255,255,255,.15);
                   color:#fff; border-radius:.4rem; font-size:1.3rem; line-height:1;
                   width:2.6rem; height:2.6rem; min-height:auto; }

/* Lightbox pour l'épreuve : bandeau supérieur avec décompte & jauge en temps réel */
.lightbox-epreuve { position:fixed; inset:0; background:rgba(0,0,0,.94); display:flex;
                    flex-direction:column; z-index:100; padding:0; align-items:stretch; justify-content:flex-start; }
.lightbox-epreuve[hidden] { display:none; }
.lightbox-barre-haut { display:flex; align-items:center; justify-content:space-between;
                       gap:1rem; padding:.75rem 1.25rem; background:rgba(18,18,28,.9);
                       backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
                       color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }
.lightbox-infos { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.lightbox-progression { font-weight:600; font-size:.95rem; }
.lightbox-chronos { display:flex; align-items:center; gap:.55rem; }
.lightbox-etiq { font-size:.75rem; opacity:.75; text-transform:uppercase; letter-spacing:.04em; }

.lightbox-jauge { height:5px; background:rgba(255,255,255,.15); width:100%; overflow:hidden; }
.lightbox-jauge .jauge-remplie { height:100%; width:100%; transition:width 1s linear, background-color 1s linear; }

.lightbox-fermer-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem;
                       border-radius:.4rem; background:rgba(255,255,255,.18); color:#fff;
                       font:inherit; font-size:.88rem; font-weight:600; border:1px solid rgba(255,255,255,.25);
                       cursor:pointer; transition:all .15s ease; min-height:auto; }
.lightbox-fermer-btn:hover { background:rgba(255,255,255,.3); }
.lightbox-fermer-btn .croix { font-size:1.2rem; line-height:1; }

.lightbox-zone-image { flex:1; display:flex; align-items:center; justify-content:center;
                       padding:1rem; overflow:auto; -webkit-overflow-scrolling:touch; }
.lightbox-zone-image img { max-width:96vw; max-height:calc(96vh - 5.5rem); object-fit:contain;
                           border-radius:.4rem; box-shadow:0 8px 32px rgba(0,0,0,.6); }

/* La case à cocher garde sa taille, le libellé occupe le reste. */
.answer-option input[type="radio"],
.answer-option input[type="checkbox"] { flex:0 0 auto; margin:.25rem 0 0; width:auto; }
.answer-option span { flex:1 1 auto; }

/* Rappel des questions sans réponse, sur la dernière question (CE). */
.rappel-manquantes { margin-top:1rem; padding:.9rem 1rem; border-radius:.4rem;
                     background:var(--rouge-fond); color:var(--rouge);
                     border:1px solid var(--rouge); font-size:.92rem; }
.rappel-manquantes[hidden] { display:none; }
.rappel-manquantes p { margin:0 0 .6rem; }
.liens-manquantes { display:flex; flex-wrap:wrap; gap:.3rem; }
.liens-manquantes .case { min-width:2.2rem; min-height:2.2rem; padding:0 .4rem;
                          font-size:.82rem; border-radius:.3rem; cursor:pointer;
                          background:var(--fond); color:var(--rouge);
                          border:1px solid var(--rouge); }

/* Question répondue sans correction affichée (CE) : repère neutre. */
.case.repondue { background:var(--doux); border-color:var(--accent);
                 color:var(--accent); font-weight:600; }

.version { float:right; opacity:.7; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- production */
.carte-tache { padding:1rem; border:1px solid var(--bord); border-radius:.6rem; }
@media (min-width:48rem) { .carte-tache { padding:1.5rem; } }
.carte-tache h2 { margin:0 0 .8rem; font-size:1.05rem; }
.sujet { white-space:pre-wrap; margin:1rem 0; }
.copie { width:100%; min-height:14rem; font:16px/1.7 Georgia, "Times New Roman", serif;
         padding:.9rem; resize:vertical; }
.copie:disabled { opacity:.75; background:var(--doux); }
.compteur { font-size:.85rem; opacity:.7; margin:.4rem 0 0; font-variant-numeric:tabular-nums; }
.compteur.court { color:var(--orange); opacity:1; }
.compteur.long  { color:var(--rouge);  opacity:1; }

/* Clavier de caractères spéciaux : les combinaisons de touches sont interdites
   à l'examen réel, le candidat s'entraîne donc au clic. */
.clavier { display:flex; flex-wrap:wrap; gap:.3rem; margin:1rem 0 .5rem; }
.touche { min-width:2.4rem; min-height:2.4rem; padding:0 .5rem; font-size:1rem;
          background:var(--doux); color:var(--texte); border:1px solid var(--bord);
          border-radius:.3rem; }
.touche:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }

.copie-rendue { white-space:pre-wrap; padding:1rem; border-radius:.4rem;
                background:var(--fond); border:1px solid var(--bord);
                font:16px/1.7 Georgia, "Times New Roman", serif; }
.correction-proposee { white-space:pre-wrap; font-size:.92rem; padding:.8rem;
                       background:var(--fond); border-radius:.4rem; margin-top:.5rem; }
.correction h2 { margin:0 0 .6rem; font-size:1.05rem; }
.correction h3 { margin:1rem 0 .5rem; font-size:.95rem; }
.correction details { margin:.6rem 0; }
.correction summary { cursor:pointer; font-size:.9rem; opacity:.8; }

/* Enregistrement de l'expression orale */
.enregistreur { margin:1rem 0; padding:1rem; border:1px solid var(--bord);
                border-radius:.5rem; background:var(--doux); }
.enr-boutons { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
button.micro { background:var(--accent); }
button.micro.actif { background:var(--rouge); animation:pulsation 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { button.micro.actif { animation:none; } }
.enr-duree { font-variant-numeric:tabular-nums; font-size:1.1rem; }
.enr-lecture { width:100%; margin-top:.8rem; }
.enr-message { font-size:.85rem; opacity:.8; margin:.6rem 0 0; }
.note-brouillon { font-size:.85rem; opacity:.7; margin:1rem 0 .3rem; }

/* ------------------------------------------------- expression orale, parcours

   Le déroulement est automatique : le candidat ne voit qu'un bouton à la fois.
   L'écran d'accueil cache le sujet, le décompte de préparation occupe tout
   l'écran, et l'enregistrement s'annonce par une pastille qui bat. */

.accueil-tache { text-align:center; padding:2.5rem 1rem; }
@media (min-width:48rem) { .accueil-tache { padding:3.5rem 2rem; } }
.accueil-numero { font-size:1.8rem; font-weight:600; margin:0 0 .3rem; }
@media (min-width:48rem) { .accueil-numero { font-size:2.2rem; } }
.accueil-sous { opacity:.7; margin:0 0 1.8rem; font-size:.95rem; }
button.demarrer { font-size:1.15rem; padding:.9rem 3rem; background:var(--accent);
                  border-radius:.5rem; }
.accueil-avert { font-size:.85rem; opacity:.75; margin:1.6rem auto 0; max-width:34rem; }
.accueil-micro { font-size:.9rem; margin:.9rem 0 0; min-height:1.2rem; }
.accueil-micro.erreur, .enr-message.erreur, .tr-etat.erreur { color:var(--rouge); opacity:1; }

/* Décompte de préparation.

   Il doit être impossible à manquer SANS masquer le sujet : le candidat est en
   train de le lire, c'est tout l'objet de ces secondes. Un voile plein écran,
   essayé d'abord, rendait l'énoncé illisible. D'où un bandeau ancré en bas de
   l'écran, chiffres énormes, qui laisse la page entièrement lisible. */
.prepa { position:fixed; left:0; right:0; bottom:0; z-index:50;
         border-top:3px solid var(--accent); background:var(--doux);
         box-shadow:0 -.4rem 1.6rem rgba(0,0,0,.18); padding:.7rem 1rem; }
.prepa[hidden] { display:none; }
.prepa-boite { max-width:62rem; margin:0 auto;
               display:grid; grid-template-columns:auto 1fr; gap:0 1rem;
               align-items:center; }
.prepa-titre { grid-column:1 / -1; margin:0; font-size:.75rem; letter-spacing:.1em;
               text-transform:uppercase; opacity:.7; }
.prepa-compte { grid-row:2 / 4; margin:0; font-size:3.4rem; line-height:1; font-weight:700;
                font-variant-numeric:tabular-nums; color:var(--accent);
                min-width:2.4ch; text-align:center; }
@media (min-width:48rem) { .prepa-compte { font-size:4.6rem; } }
.prepa-compte.urgent { color:var(--rouge); animation:pulsation 1s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .prepa-compte.urgent { animation:none; } }
.prepa-detail { margin:0 0 .4rem; font-size:.95rem; }
.prepa-jauge { height:8px; border-radius:4px; background:var(--bord); overflow:hidden; }
.prepa-jauge-remplie { height:100%; width:100%; background:var(--accent);
                       transition:width 1s linear; }
.prepa-avert { grid-column:2; margin:.4rem 0 0; font-size:.8rem; opacity:.75; }
/* Écourter sa préparation ne coûte pas de temps de parole : l'échéance se
   décale d'autant, c'est le serveur qui la recalcule. */
#prepa-pret { grid-column:2; justify-self:start; margin-top:.5rem;
              padding:.45rem 1.1rem; font-size:.9rem; }
/* Le bandeau flotte au-dessus de la page : on lui réserve sa hauteur, sinon il
   recouvrirait la fin du sujet — exactement ce qu'il ne doit pas faire. */
.production.en-preparation { padding-bottom:11rem; }
.production.en-preparation .navigation { visibility:hidden; }

/* Bandeau d'enregistrement */
.enr-bandeau { display:flex; align-items:center; gap:.6rem; margin:1.2rem 0 .2rem;
               padding:.7rem .9rem; border-radius:.5rem; background:var(--doux);
               border:1px solid var(--bord); font-weight:600; font-size:.95rem; }
.enr-pastille { width:.75rem; height:.75rem; border-radius:50%; background:var(--bord);
                flex:none; }
.enr-bandeau.actif { border-color:var(--rouge); color:var(--rouge); }
.enr-bandeau.actif .enr-pastille { background:var(--rouge);
                                   animation:pulsation 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) {
  .enr-bandeau.actif .enr-pastille { animation:none; }
}
.enr-bandeau.finie { border-color:var(--vert); color:var(--vert); }
.enr-bandeau.finie .enr-pastille { background:var(--vert); }

/* Arrêt anticipé de la prise de parole. Poussé à droite du bandeau, discret :
   la voie normale reste de parler jusqu'au bout du chronomètre. */
.enr-arret { margin-left:auto; flex:none; padding:.4rem .9rem; font-size:.85rem;
             min-height:auto; background:var(--doux); color:var(--texte);
             border:1px solid var(--bord); }
.enr-arret:hover { border-color:var(--rouge); color:var(--rouge); }
.enr-arret[hidden] { display:none; }

/* Forme d'onde de la voix, pendant l'enregistrement.

   `color` est lu par le script pour tracer : la couleur reste donc décidée ici,
   et suit le thème sombre sans que le JS ait à la connaître. */
.enr-onde { display:block; width:100%; height:6rem; margin:.4rem 0 0;
            border:1px solid var(--bord); border-radius:.5rem;
            background:var(--doux); color:var(--rouge); }
.enr-onde[hidden] { display:none; }

/* Écran de transition : la consigne audio jouée avant certaines tâches.

   Il occupe la page seul. Ni barre de progression, ni chronomètre, ni boutons :
   rien de la tâche n'apparaît avant que l'écran n'ait été franchi — et comme la
   tâche n'est ouverte qu'au clic sur « Suivant », il n'y a rien à révéler dans
   le DOM non plus. */
.production.en-transition > .barre,
.production.en-transition > .jauge,
.production.en-transition > .navigation,
.production.en-transition > .note { display:none; }

.transition-tache { text-align:center; padding:2rem 1rem; }
@media (min-width:48rem) { .transition-tache { padding:4rem 2rem; } }
.transition-consigne { font-size:1.05rem; margin:.4rem 0 1.4rem; opacity:.85; }
.transition-audio { width:100%; max-width:32rem; margin:0 auto 1.6rem; display:block; }

/* Overlay de transition / chargement centré (Expression écrite) */
.transition-overlay {
  position: fixed; inset: 0;
  background: rgba(18, 18, 28, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 1000; padding: 1.5rem;
  animation: fondu .2s ease;
}
.transition-overlay[hidden] { display: none !important; }
.transition-boite {
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: .8rem; padding: 2rem 2.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  max-width: 26rem; width: 90%; text-align: center;
}
.transition-spinner {
  width: 42px; height: 42px;
  border: 3.5px solid var(--bord);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rotation .7s linear infinite;
}
.transition-message {
  font-size: 1.05rem; font-weight: 600;
  color: var(--texte); margin: 0;
}

/* Modale de fin d'épreuve (centrée sur l'écran) */
.modale-fin-boite {
  text-align: center; max-width: 28rem; padding: 2.2rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.modale-fin-boite h2 { font-size: 1.35rem; margin: 0; }
.modale-actions-centre { justify-content: center; width: 100%; margin-top: .8rem; }
.modale-actions-centre button {
  font-size: 1.05rem; padding: .75rem 2rem; font-weight: 600; border-radius: .5rem;
}

.navigation.toutes-rendues { justify-content: center; }
.navigation.toutes-rendues #rendre { display: none; }
.navigation.toutes-rendues #soumettre {
  font-size: 1.05rem; padding: .75rem 2rem;
  box-shadow: 0 4px 14px rgba(198, 40, 40, .35);
}

/* Rapport final d'une épreuve d'expression */
.rapport { padding:1rem; border:1px solid var(--bord); border-radius:.6rem;
           background:var(--doux); margin:1.2rem 0; }
.rapport h2 { margin:0 0 .6rem; font-size:1.05rem; }
.rapport-note { font-size:1.3rem; margin:.6rem 0 0; }
.etiquette.note-tache { background:var(--vert-fond); color:var(--vert); }
.commentaire-correcteur { white-space:pre-wrap; padding:.8rem; border-radius:.4rem;
                          background:var(--fond); border:1px solid var(--bord);
                          font-size:.93rem; margin:.6rem 0; }

/* Transcription sur l'appareil du candidat */
.transcription { margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--bord); }
.tr-etat { font-size:.85rem; opacity:.85; margin:.6rem 0 0; }
.tr-etat.chargement::before {
  content:''; display:inline-block; width:.9em; height:.9em; margin-right:.45em;
  border:2px solid var(--bord); border-top-color:var(--primaire);
  border-radius:50%; vertical-align:-.1em;
  animation:rotation .7s linear infinite;
}
@keyframes rotation { to { transform:rotate(360deg); } }
.tr-texte { margin-top:.7rem; padding:.8rem; border-radius:.4rem; background:var(--fond);
            border:1px solid var(--bord); white-space:pre-wrap;
            font:15px/1.6 Georgia, "Times New Roman", serif; }
.tr-texte[hidden] { display:none; }

/* ------------------------------------------------------------- mon compte */
/* Fiche d'identite : deux colonnes qui se replient sur mobile, le terme
   au-dessus de sa valeur plutot que serre a cote. */
.fiche { display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; margin:0; }
.fiche dt { opacity:.65; font-size:.88rem; }
.fiche dd { margin:0; }
@media (max-width:36rem) {
  .fiche { grid-template-columns:1fr; gap:0 0; }
  .fiche dd { margin:0 0 .6rem; }
}

/* Les tableaux d'abonnements debordent sur telephone : on les laisse defiler
   dans leur propre boite plutot que d'etirer la page entiere. */
.tableau { width:100%; border-collapse:collapse; font-size:.92rem; display:block;
           overflow-x:auto; white-space:nowrap; }
.tableau th, .tableau td { padding:.45rem .7rem; text-align:left;
                           border-bottom:1px solid var(--bord); }
.tableau th { font-weight:600; opacity:.7; font-size:.85rem; }
.tableau tr:last-child td { border-bottom:0; }

/* Zone de suppression : rouge, mais pas alarmiste — le candidat a le droit de
   partir. Le liseré suffit à distinguer la section du reste de la page. */
.carte-danger { border-color:var(--rouge); }
.carte-danger h2 { color:var(--rouge); }
.bouton-danger { background:var(--rouge); border-color:var(--rouge); color:#fff; }
.bouton-danger:hover { filter:brightness(1.08); }
.lien-danger { color:var(--rouge); }

/* ------------------------------------------------------------- Librairie & Exemples */
.badge-nombre { background:var(--tcf-fond); color:var(--tcf); font-weight:600; }
.badge-gratuit { background:var(--vert-fond); color:var(--vert); font-weight:600; }
.badge-gratuit-sub { background:var(--vert-fond); color:var(--vert); font-size:.7rem; }
.badge-premium-sub { background:var(--tef-fond); color:var(--tef); font-size:.7rem; }

.librairie-header, .exemples-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1.2rem; }
.bandeau-promo { display:inline-block; padding:.35rem .9rem; border-radius:1rem; background:linear-gradient(135deg,#ff3366,#ff6b3d); color:#fff; font-size:.85rem; font-weight:600; margin-top:.4rem; }

/* Onglets filtres & tâches */
.onglets-filtre, .onglets-taches { display:flex; gap:.5rem; overflow-x:auto; margin-bottom:1.5rem; padding-bottom:.2rem; }
.onglet-btn, .onglet-tache { padding:.5rem 1.1rem; border-radius:1.5rem; border:1px solid var(--bord); background:var(--fond); color:var(--texte); font-size:.9rem; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap; transition:all .2s ease; }
.onglet-btn.actif, .onglet-tache.actif { background:var(--tcf); color:#fff; border-color:var(--tcf); }

/* Cartes Librairie */
.carte-document { cursor:pointer; }
.carte-icone-pdf { color:#e53935; background:var(--rouge-fond); }
.carte-icone-audio { color:#1e88e5; background:var(--tcf-fond); }
.carte-icone-video { color:#8e24aa; background:#f3e5f5; }

/* Modale Lecteur Sécurisé */
.modale-boite-large { width:95vw; max-width:55rem; height:85vh; display:flex; flex-direction:column; padding:1.2rem; }
.modale-lecteur-entete { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--bord); padding-bottom:.7rem; margin-bottom:1rem; }
.lecteur-titre { margin:0; font-size:1.2rem; }
.bouton-fermer { background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--texte); padding:0 .4rem; min-height:auto; }
.lecteur-corps { flex:1; display:flex; justify-content:center; align-items:center; overflow:hidden; background:var(--doux); border-radius:.5rem; position:relative; }
.lecteur-pdf-iframe { width:100%; height:100%; border:none; }
.pdf-viewer-canvas-wrap { width:100%; height:100%; display:flex; flex-direction:column; background:var(--doux); user-select:none; -webkit-user-select:none; }
.pdf-canvas-controls { display:flex; justify-content:center; align-items:center; gap:1.2rem; padding:.6rem 1rem; background:var(--fond); border-bottom:1px solid var(--bord); flex:none; }
.pdf-btn { padding:.35rem .8rem; border-radius:.4rem; font-size:.85rem; background:var(--tcf-fond); color:var(--tcf); border:1px solid var(--bord); cursor:pointer; min-height:36px; }
.pdf-btn:disabled { opacity:.4; cursor:not-allowed; }
.pdf-page-info { font-size:.9rem; font-weight:500; font-variant-numeric:tabular-nums; }
.pdf-canvas-scroll { flex:1; overflow-y:auto; overflow-x:auto; display:flex; flex-direction:column; align-items:center; gap:1.5rem; padding:1.5rem 1rem; background:#3c3c48; }
.pdf-page-wrapper { display:flex; justify-content:center; width:100%; }
.pdf-render-canvas { display:block; margin:0 auto; box-shadow:0 6px 24px rgba(0,0,0,.4); border-radius:4px; background:#fff; pointer-events:none; }
.lecteur-audio-wrap, .lecteur-video-wrap { width:100%; display:flex; justify-content:center; align-items:center; padding:1.5rem; }
.lecteur-video-wrap video { max-height:100%; border-radius:.5rem; }
.lecteur-chargement { padding:2rem; font-weight:500; opacity:.7; }

/* Exemples EE */
.liste-exemples-ee { display:grid; gap:1.5rem; }
.carte-exemple-ee { border:1px solid var(--bord); border-radius:.75rem; background:var(--fond); box-shadow:var(--carte-ombre); overflow:hidden; }
.carte-ee-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; background:var(--doux); border-bottom:1px solid var(--bord); }
.carte-ee-titre-wrap { display:flex; align-items:center; gap:.6rem; font-weight:600; }
.onglets-ee { display:flex; border-bottom:1px solid var(--bord); }
.btn-onglet-ee { flex:1; padding:.7rem; background:var(--fond); border:none; border-bottom:2px solid transparent; color:var(--texte); font-weight:600; cursor:pointer; }
.btn-onglet-ee.actif { border-bottom-color:var(--accent); color:var(--accent); background:var(--doux); }
.contenu-ee-bloc { padding:1.2rem; }
.texte-ee { font-size:.95rem; line-height:1.7; }
.texte-corrige { background:var(--doux); padding:1rem; border-radius:.4rem; border-left:3px solid var(--accent); }
.panneau-verrouille-ee { padding:2rem; text-align:center; display:grid; gap:1rem; justify-items:center; }

/* Exemples EO */
.lecteur-audio-global { position:sticky; top:0; z-index:15; background:var(--fond); border:1px solid var(--bord); border-radius:.75rem; padding:1rem 1.2rem; box-shadow:var(--carte-ombre); margin-bottom:1.5rem; }
.lecteur-info { display:flex; justify-content:space-between; align-items:center; font-size:.9rem; margin-bottom:.5rem; }
.lecteur-piste-titre { font-weight:600; }
.lecteur-chrono { font-variant-numeric:tabular-nums; opacity:.6; }
.lecteur-controles { display:flex; align-items:center; gap:.9rem; }
.btn-audio-play { width:2.8rem; height:2.8rem; border-radius:50%; background:var(--accent); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex:none; }
.audio-progress-bar { flex:1; height:8px; background:var(--bord); border-radius:4px; cursor:pointer; position:relative; overflow:hidden; }
.audio-progress-fill { height:100%; width:0%; background:var(--accent); transition:width .1s linear; }
.groupe-audio-titre { font-size:.75rem; font-weight:700; letter-spacing:.05em; color:var(--texte); opacity:.6; margin-bottom:.6rem; }
.grille-cartes-audio { display:grid; gap:.6rem; }
.carte-piste-audio { display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; border:1px solid var(--bord); border-radius:.6rem; background:var(--fond); cursor:pointer; transition:all .2s; }
.carte-piste-audio:hover { transform:translateY(-1px); box-shadow:var(--carte-ombre-hover); }
.carte-piste-audio.en-lecture { border-color:var(--accent); background:var(--tcf-fond); }
.icone-note { font-size:1.2rem; }
.piste-corps { flex:1; display:flex; align-items:center; justify-content:space-between; }
.piste-titre { font-size:.92rem; font-weight:500; }
.piste-fleche { font-size:1.2rem; opacity:.4; }

/* ------------------------------------------------------------------ outils */
/* ------------------------------------------------------------------ outils */
/* Les outils d'immigration, sous l'entonnoir d'examen sur l'accueil et page dédiée */
.section-outils { margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--bord); }
.section-outils h2 { margin:0 0 .5rem; font-size:1.6rem; font-weight:800; }

/* Hero Hub Outils */
.hero-outils {
  background:linear-gradient(135deg, var(--doux) 0%, var(--fond) 100%);
  border:1px solid var(--bord);
  border-radius:1.2rem;
  padding:2rem 1.8rem;
  margin-bottom:2.5rem;
  box-shadow:var(--carte-ombre);
  position:relative;
  overflow:hidden;
}
.hero-outils::before {
  content:'';
  position:absolute;
  top:-40%; right:-10%;
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(43,80,216,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.hero-outils-badge {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .85rem;
  background:var(--tcf-fond);
  color:var(--accent);
  border-radius:2rem;
  font-size:.82rem;
  font-weight:700;
  margin-bottom:1rem;
}
.hero-outils h1 { margin:0 0 .75rem; font-size:2rem; font-weight:900; line-height:1.2; }
.hero-outils-desc { font-size:1.02rem; opacity:.85; max-width:44rem; line-height:1.6; margin:0 0 1.25rem; }
.hero-outils-garanties {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}
.garantie-item {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.85rem;
  font-weight:600;
  padding:.3rem .75rem;
  border-radius:.6rem;
  background:var(--fond);
  border:1px solid var(--bord);
  color:var(--texte);
}

/* Groupement par catégorie */
.categories-outils { display:grid; gap:2.5rem; }
.categorie-groupe { display:grid; gap:1.1rem; }
.categorie-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-bottom:2px solid var(--bord); padding-bottom:.6rem; }
.categorie-titre { margin:0; font-size:1.25rem; font-weight:800; display:flex; align-items:center; gap:.55rem; }
.categorie-badge { font-size:.78rem; font-weight:700; padding:.2rem .6rem; border-radius:.5rem; background:var(--doux); border:1px solid var(--bord); color:var(--texte); }

/* Grille des outils */
.grille-outils {
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr));
}
.carte-outil {
  display:flex;
  flex-direction:column;
  padding:1.4rem 1.3rem;
  border-radius:1rem;
  text-decoration:none;
  background:var(--fond);
  color:inherit;
  border:1px solid var(--bord);
  box-shadow:var(--carte-ombre);
  transition:all .25s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.carte-outil:hover {
  box-shadow:var(--carte-ombre-hover);
  transform:translateY(-3px);
  border-color:var(--accent);
}
.carte-outil-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.85rem;
}
.carte-outil-icone-wrap {
  width:3rem;
  height:3rem;
  border-radius:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  background:var(--doux);
  border:1px solid var(--bord);
  transition:transform .25s ease;
}
.carte-outil:hover .carte-outil-icone-wrap { transform:scale(1.08); background:var(--tcf-fond); }
.carte-outil-badge {
  font-size:.75rem;
  font-weight:700;
  padding:.2rem .55rem;
  border-radius:.4rem;
  background:var(--vert-fond);
  color:var(--vert);
}
.carte-outil-nom {
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:.4rem;
  color:var(--texte);
  line-height:1.3;
}
.carte-outil-resume {
  font-size:.88rem;
  opacity:.8;
  line-height:1.55;
  flex:1;
  margin-bottom:1rem;
}
.carte-outil-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:.85rem;
  border-top:1px dashed var(--bord);
  font-size:.88rem;
  font-weight:700;
  color:var(--accent);
}
.carte-outil-action-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.8rem;
  height:1.8rem;
  border-radius:50%;
  background:var(--tcf-fond);
  transition:transform .2s ease;
}
.carte-outil:hover .carte-outil-action-icon { transform:translateX(3px); }

/* En-tête des outils individuels (partiel_entete) */
.entete-outil-card {
  background:linear-gradient(135deg, var(--doux) 0%, var(--fond) 100%);
  border:1px solid var(--bord);
  border-radius:1.1rem;
  padding:1.6rem 1.5rem;
  margin:1rem 0 2rem;
  box-shadow:var(--carte-ombre);
}
.entete-outil-header {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:.6rem;
}
.entete-outil-icone {
  width:3.2rem;
  height:3.2rem;
  border-radius:.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  background:var(--fond);
  border:1px solid var(--bord);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.entete-outil-titre-wrap h1 {
  margin:0;
  font-size:1.7rem;
  font-weight:900;
  line-height:1.2;
}
.entete-outil-badges {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.4rem;
}
.badge-pill {
  font-size:.76rem;
  font-weight:700;
  padding:.2rem .6rem;
  border-radius:1rem;
  background:var(--fond);
  border:1px solid var(--bord);
  color:var(--texte);
}
.badge-pill.accent { background:var(--tcf-fond); color:var(--accent); border-color:transparent; }
.badge-pill.vert { background:var(--vert-fond); color:var(--vert); border-color:transparent; }
.entete-outil-desc {
  font-size:.95rem;
  opacity:.85;
  line-height:1.6;
  margin:.6rem 0 0;
}

/* ------------------------------------------------- pages d'outils */
.formulaire-outil { display:grid; gap:1.5rem; }

.formulaire-outil fieldset {
  border:1px solid var(--bord);
  border-radius:1rem;
  padding:1.4rem 1.4rem 1.6rem;
  margin:0;
  background:var(--fond);
  box-shadow:var(--carte-ombre);
}
.formulaire-outil legend {
  font-weight:800;
  font-size:1.08rem;
  padding:0 .6rem;
  color:var(--texte);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.legend-pill {
  font-size:.76rem;
  font-weight:700;
  padding:.15rem .55rem;
  border-radius:.4rem;
  background:var(--tcf-fond);
  color:var(--accent);
}

.formulaire-outil label {
  display:block;
  margin:1.1rem 0 .35rem;
  font-size:.92rem;
  font-weight:700;
  color:var(--texte);
}
.formulaire-outil label:first-of-type { margin-top:.4rem; }

.formulaire-outil label.case {
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  font-weight:500;
  font-size:.92rem;
  margin:.8rem 0;
  padding:.75rem .9rem;
  border-radius:.6rem;
  background:var(--doux);
  border:1px solid var(--bord);
  cursor:pointer;
  transition:all .2s ease;
}
.formulaire-outil label.case:hover {
  background:var(--tcf-fond);
  border-color:var(--accent);
}
.formulaire-outil label.case input {
  margin-top:.2rem;
  flex:0 0 auto;
  accent-color:var(--accent);
  width:1.1rem;
  height:1.1rem;
}

.formulaire-outil select,
.formulaire-outil input[type=text],
.formulaire-outil input[type=number],
.formulaire-outil input[type=date],
.formulaire-outil textarea {
  width:100%;
  padding:.7rem .85rem;
  font:inherit;
  font-size:.95rem;
  border:1px solid var(--bord);
  border-radius:.6rem;
  background:var(--fond);
  color:var(--texte);
  transition:border-color .2s, box-shadow .2s;
}
.formulaire-outil select:focus,
.formulaire-outil input:focus,
.formulaire-outil textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(43,80,216,0.15);
}
.formulaire-outil textarea { resize:vertical; min-height:12rem; line-height:1.5; }

/* Grille de notes de langues ergonomique */
.grille-notes {
  display:grid;
  gap:.9rem 1.1rem;
  margin-top:.8rem;
  grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));
}
.carte-note-competence {
  background:var(--doux);
  border:1px solid var(--bord);
  border-radius:.75rem;
  padding:.9rem 1rem;
  transition:border-color .2s;
}
.carte-note-competence:focus-within {
  border-color:var(--accent);
  background:var(--fond);
}
.carte-note-competence label {
  margin:0 0 .4rem;
  font-size:.85rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.carte-note-competence input,
.carte-note-competence select {
  background:var(--fond);
  font-weight:600;
}

/* Bouton principal de calcul */
.btn-calculer {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.85rem 1.8rem;
  font-size:1.05rem;
  font-weight:800;
  border-radius:.7rem;
  background:linear-gradient(135deg, var(--accent) 0%, #1e3bb3 100%);
  color:#fff;
  border:0;
  box-shadow:0 4px 14px rgba(43,80,216,0.3);
  cursor:pointer;
  transition:all .2s ease;
  margin-top:.5rem;
}
.btn-calculer:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(43,80,216,0.4);
}
.btn-calculer:active { transform:translateY(0); }

/* ------------------------------------------------- Résultats d'outils (Overlay & Modale) */
body.modale-ouverte {
  overflow: hidden;
}

.modale-resultat-outil {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility .25s ease;
}

.modale-resultat-outil.modale-fermee {
  opacity: 0;
  visibility: hidden;
}

.modale-resultat-arriere-plan {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 32, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modale-resultat-boite {
  position: relative;
  z-index: 2;
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: 1.3rem;
  width: 100%;
  max-width: 54rem;
  max-height: calc(100vh - 2.5rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: modaleOutilGlisse .3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modaleOutilGlisse {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modale-resultat-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--bord);
  background: var(--doux);
  flex: 0 0 auto;
}

.modale-resultat-titre-wrap {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.modale-resultat-titre {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--texte);
}

.btn-fermer-modale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--fond);
  border: 1px solid var(--bord);
  color: var(--texte);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.btn-fermer-modale:hover {
  background: var(--rouge-fond);
  color: var(--rouge);
  border-color: rgba(198, 40, 40, 0.3);
  transform: scale(1.06);
}

.modale-resultat-contenu {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.modale-resultat-contenu .resultat-outil {
  margin-top: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.modale-resultat-pied {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--bord);
  background: var(--doux);
  flex: 0 0 auto;
}

.btn-modifier-criteres {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--fond);
  border: 1px solid var(--bord);
  padding: .65rem 1.25rem;
  border-radius: .65rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--texte);
  cursor: pointer;
  transition: all .2s ease;
}

.btn-modifier-criteres:hover {
  background: var(--tcf-fond);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-imprimer-resultat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--tcf-fond);
  border: 1px solid var(--bord);
  padding: .65rem 1.25rem;
  border-radius: .65rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--accent);
  cursor: pointer;
  transition: all .2s ease;
}

.btn-imprimer-resultat:hover {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 38rem) {
  .modale-resultat-boite {
    max-height: calc(100vh - 1rem);
    border-radius: 1rem;
  }
  .modale-resultat-entete,
  .modale-resultat-contenu,
  .modale-resultat-pied {
    padding: 1rem;
  }
  .modale-resultat-pied button {
    width: 100%;
    justify-content: center;
  }
}

.resultat-outil {
  margin-top:2.5rem;
  padding:1.8rem 1.6rem 2rem;
  border:1px solid var(--bord);
  border-radius:1.2rem;
  background:var(--fond);
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
}
.resultat-outil-hero {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--bord);
  margin-bottom:1.5rem;
}
.score-badge-card {
  display:flex;
  align-items:center;
  gap:1.2rem;
}
.score-cercle {
  width:4.8rem;
  height:4.8rem;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:1.6rem;
  color:#fff;
  background:var(--accent);
  box-shadow:0 4px 16px rgba(43,80,216,0.35);
  flex:0 0 auto;
}
.score-cercle-succes { background:linear-gradient(135deg, var(--vert) 0%, #1b5e20 100%); box-shadow:0 4px 16px rgba(46,125,50,0.35); }
.score-cercle-alerte { background:linear-gradient(135deg, var(--orange) 0%, #d84315 100%); box-shadow:0 4px 16px rgba(239,108,0,0.35); }
.score-texte-label { font-size:.78rem; text-transform:uppercase; font-weight:700; opacity:.75; margin-bottom:.15rem; }
.score-texte-titre { margin:0; font-size:1.5rem; font-weight:900; }

.verdict-badge {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1.1rem;
  border-radius:2rem;
  font-weight:800;
  font-size:.92rem;
}
.verdict-badge.succes { background:var(--vert-fond); color:var(--vert); border:1px solid rgba(46,125,50,0.25); }
.verdict-badge.alerte { background:var(--rouge-fond); color:var(--rouge); border:1px solid rgba(198,40,40,0.25); }
.verdict-badge.attention { background:rgba(239,108,0,0.12); color:var(--orange); border:1px solid rgba(239,108,0,0.25); }

/* Tableaux de résultats modernisés */
.tableau-resultat {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:1.25rem 0;
  font-size:.92rem;
  border:1px solid var(--bord);
  border-radius:.8rem;
  overflow:hidden;
}
.tableau-resultat caption {
  text-align:left;
  font-weight:800;
  font-size:1.05rem;
  padding:.6rem .4rem;
  color:var(--texte);
}
.tableau-resultat thead th {
  background:var(--doux);
  font-weight:800;
  padding:.75rem .9rem;
  border-bottom:1px solid var(--bord);
}
.tableau-resultat td, .tableau-resultat tbody th {
  padding:.7rem .9rem;
  border-bottom:1px solid var(--bord);
  background:var(--fond);
}
.tableau-resultat tbody tr:last-child td { border-bottom:0; }
.tableau-resultat tbody tr:hover td { background:var(--doux); }
.tableau-resultat td + td, .tableau-resultat th + th { text-align:right; }
.tableau-resultat .sous-total td { font-weight:700; background:var(--doux); }
.tableau-resultat .total td { font-weight:900; font-size:1.05rem; background:var(--tcf-fond); color:var(--accent); border-top:2px solid var(--bord); }

/* Encart Recommandations & Conseils */
.encart-conseils {
  background:linear-gradient(135deg, var(--tcf-fond) 0%, var(--fond) 100%);
  border:1px solid var(--bord);
  border-left:4px solid var(--accent);
  border-radius:.8rem;
  padding:1.1rem 1.2rem;
  margin-top:1.5rem;
}
.encart-conseils h3 { margin:0 0 .4rem; font-size:1rem; font-weight:800; display:flex; align-items:center; gap:.4rem; color:var(--accent); }
.encart-conseils p { margin:0; font-size:.9rem; line-height:1.55; opacity:.9; }

/* Encart Fonds & Alertes */
.encart-fonds {
  margin-top:1.5rem;
  padding:1.1rem 1.2rem;
  border-radius:.8rem;
  background:var(--doux);
  border:1px solid var(--bord);
  border-left:4px solid var(--vert);
}
.encart-fonds h3 { margin:0 0 .3rem; font-size:1.05rem; font-weight:800; }

.alerte-ligne {
  color:var(--rouge);
  background:var(--rouge-fond);
  padding:.7rem .9rem;
  border-radius:.6rem;
  font-size:.9rem;
  font-weight:600;
  margin:1rem 0;
  border:1px solid rgba(198,40,40,0.2);
}
.avertissement-card {
  margin-top:2.5rem;
  padding:1.1rem 1.3rem;
  border-radius:.8rem;
  background:var(--doux);
  border:1px solid var(--bord);
  border-left:4px solid var(--orange);
  font-size:.88rem;
  line-height:1.6;
  opacity:.85;
}

/* Barre de progression : commune au verificateur de dossier et a la lettre */
.barre-progression {
  height:.75rem;
  border-radius:.5rem;
  background:var(--bord);
  overflow:hidden;
  margin:.6rem 0 1rem;
}
.barre-progression span {
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--accent) 0%, var(--vert) 100%);
  border-radius:.5rem;
  transition:width .4s ease;
}

/* Verificateur de dossier */
.profil-dossier { margin:1.5rem 0; }
.profil-dossier > summary {
  cursor:pointer;
  font-weight:800;
  font-size:1.05rem;
  padding:.8rem 1.1rem;
  background:var(--doux);
  border:1px solid var(--bord);
  border-radius:.75rem;
  transition:background .2s;
}
.profil-dossier > summary:hover { background:var(--tcf-fond); }
.groupe-documents { margin:1.5rem 0; }
.groupe-documents h3 { font-size:1.15rem; font-weight:800; margin:0 0 .75rem; display:flex; align-items:center; justify-content:space-between; }
.groupe-documents .compte-groupe { font-weight:600; font-size:.82rem; padding:.15rem .55rem; border-radius:.4rem; background:var(--doux); }

.formulaire-outil label.document {
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  padding:.85rem 1rem;
  border:1px solid var(--bord);
  border-radius:.65rem;
  background:var(--fond);
  font-weight:400;
  margin:.45rem 0;
  transition:all .2s ease;
  cursor:pointer;
}
.formulaire-outil label.document:hover { background:var(--doux); }
.document input { margin-top:.35rem; flex:0 0 auto; width:1.15rem; height:1.15rem; accent-color:var(--accent); }
.document-corps { display:grid; gap:.2rem; flex:1 1 auto; min-width:0; }
.document-nom { font-weight:700; font-size:.95rem; }
.document-desc { font-size:.84rem; opacity:.75; line-height:1.45; }
.document-coche { opacity:.6; background:var(--doux) !important; }
.document-coche .document-nom { text-decoration:line-through; }
.marque-requis {
  display:inline-block;
  font-style:normal;
  font-size:.7rem;
  font-weight:800;
  margin-left:.4rem;
  padding:.1rem .45rem;
  border-radius:.3rem;
  color:var(--rouge);
  background:var(--rouge-fond);
}

/* Suivi de procedure */
.chronologie { list-style:none; padding:0; margin:1.8rem 0; position:relative; }
.chronologie::before {
  content:'';
  position:absolute;
  top:1.5rem; bottom:1.5rem; left:1.4rem;
  width:2px;
  background:var(--bord);
}
.chrono-etape { display:flex; gap:1.1rem; padding:0 0 1.6rem; position:relative; }
.chrono-vignette {
  flex:0 0 2.8rem;
  width:2.8rem;
  height:2.8rem;
  border-radius:.75rem;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.chrono-vignette img { width:100%; height:100%; object-fit:cover; display:block; }
.chrono-corps {
  flex:1;
  background:var(--fond);
  border:1px solid var(--bord);
  border-radius:.85rem;
  padding:1rem 1.1rem;
  box-shadow:var(--carte-ombre);
}
.chrono-corps h3 { margin:0 0 .3rem; font-size:1.05rem; font-weight:800; }
.chrono-date { margin:0; font-size:.88rem; font-weight:600; }
.chrono-jours { opacity:.7; font-weight:400; }
.chrono-motif { margin:.35rem 0 0; font-size:.85rem; opacity:.85; }
.chrono-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.7rem; }
.chrono-form input { width:auto; flex:1 1 8rem; }
.chrono-complete .chrono-corps { border-color:var(--vert); background:linear-gradient(135deg, var(--vert-fond) 0%, var(--fond) 100%); }
.chrono-complete .chrono-corps h3 { color:var(--vert); }

.grille-etapes { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); margin-top:1rem; }
.bouton-etape {
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  font-size:.9rem;
  font-weight:700;
  padding:.75rem .9rem;
  border-radius:.6rem;
  cursor:pointer;
  border:1px solid var(--bord);
  background:var(--fond);
  color:var(--texte);
  box-shadow:var(--carte-ombre);
  transition:all .2s ease;
}
.bouton-etape:hover { background:var(--tcf-fond); border-color:var(--accent); transform:translateY(-1px); }
.bouton-etape-verrouille { cursor:not-allowed; opacity:.5; box-shadow:none; }
.bouton-etape-verrouille em { display:block; font-style:normal; font-size:.75rem; opacity:.85; font-weight:400; }

/* Guide */
.filtres-guide { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.25rem 0 1.75rem; }
.filtre {
  padding:.45rem .9rem;
  border-radius:2rem;
  font-size:.88rem;
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--bord);
  color:inherit;
  background:var(--fond);
  transition:all .2s ease;
}
.filtre:hover { border-color:var(--accent); color:var(--accent); }
.filtre-actif { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 2px 8px rgba(43,80,216,0.3); }
.carte-outil-cout { font-size:.88rem; font-weight:800; color:var(--vert); margin-top:.3rem; }
.fiche-guide { margin:1.5rem 0; }
.fiche-guide table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.88rem; }
.fiche-guide th, .fiche-guide td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--bord); }
.fiche-guide h2, .fiche-guide h3 { margin:1.4rem 0 .5rem; font-weight:800; }

/* Verificateur de lettre */
.alerte-forte {
  border:2px solid var(--rouge);
  background:var(--rouge-fond);
  border-radius:.9rem;
  padding:1.2rem 1.3rem;
  margin-bottom:1.8rem;
}
.alerte-forte h2 { margin-top:0; color:var(--rouge); font-size:1.2rem; font-weight:900; }
.liste-manquantes, .liste-corrections { padding-left:1.2rem; font-size:.92rem; }
.liste-manquantes li, .liste-corrections li { margin:.35rem 0; }
tr.etat-ok td:first-child { border-left:4px solid var(--vert); font-weight:700; }
tr.etat-manquant td:first-child { border-left:4px solid var(--rouge); font-weight:700; }
tr.etat-attention td:first-child,
tr.etat-partiel td:first-child { border-left:4px solid var(--orange); font-weight:700; }
tr.etat-non_evalue td:first-child { border-left:4px solid var(--bord); opacity:.7; }

/* ------------------------------------------------- page résultats à onglets */
.resultat-page-entete { margin-bottom:1.5rem; }
.resultat-page-entete h1 { margin-bottom:.3rem; }

/* Barre de navigation entre les tâches (haut de page) */
.resultat-nav-taches { display:flex; gap:.4rem; margin:1.5rem 0 1rem; border-bottom:2px solid var(--bord);
                      overflow-x:auto; padding-bottom:0; scrollbar-width:thin; }
.btn-nav-tache { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.1rem;
                 background:none; border:none; border-bottom:3px solid transparent;
                 margin-bottom:-2px; font:inherit; font-weight:600; font-size:.95rem;
                 color:var(--texte); opacity:.7; cursor:pointer; border-radius:0;
                 transition:all .15s ease; white-space:nowrap; }
.btn-nav-tache:hover { opacity:1; background:var(--doux); }
.btn-nav-tache.actif { opacity:1; color:var(--accent); border-bottom-color:var(--accent); }
.btn-nav-note { font-size:.8rem; padding:.15rem .45rem; border-radius:1rem;
                background:var(--doux); color:var(--texte); font-weight:500; }
.btn-nav-tache.actif .btn-nav-note { background:var(--tcf-fond); color:var(--accent); }

/* Carte de tâche */
.resultat-taches-conteneur { margin-top:1.2rem; }
.carte-resultat-tache { border:1px solid var(--bord); border-radius:1rem;
                        background:var(--fond); box-shadow:var(--carte-ombre);
                        overflow:hidden; margin-bottom:2rem; }
.carte-resultat-tache[hidden] { display:none; }

/* En-tête de la carte */
.resultat-tache-entete { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
                         gap:.75rem; padding:.9rem 1.25rem; background:linear-gradient(135deg, #2b50d8, #3b6ef8);
                         color:#fff; }
@media (prefers-color-scheme: dark) {
  .resultat-tache-entete { background:linear-gradient(135deg, #1b2e75, #2b4bb8); }
}
.tache-entete-gauche { display:flex; align-items:center; gap:.65rem; min-width:0; }
.tache-entete-icone { display:inline-flex; align-items:center; justify-content:center;
                      width:2rem; height:2rem; border-radius:.45rem; background:rgba(255,255,255,.2);
                      font-size:1.1rem; flex-shrink:0; }
.tache-entete-titre { margin:0; font-size:1.1rem; font-weight:700; color:#fff;
                      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tache-entete-droite { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }

/* Badges d'état et de note */
.badge-resultat { display:inline-flex; align-items:center; padding:.25rem .65rem; border-radius:2rem;
                  font-size:.82rem; font-weight:600; background:rgba(255,255,255,.2); color:#fff; }
.badge-resultat.note { background:#fff; color:#1d39a7; font-weight:700; }
@media (prefers-color-scheme: dark) {
  .badge-resultat.note { background:#ececf4; color:#1b2440; }
}
.badge-resultat.alerte { background:var(--rouge); color:#fff; }
.badge-resultat.attente { background:rgba(255,255,255,.25); }
.badge-resultat.secondaire { background:rgba(0,0,0,.15); }

/* Barre des 3 onglets (Corrigé, Observations, Sujet) */
.resultat-onglets-barre { display:grid; grid-template-columns:repeat(3, 1fr);
                          border-bottom:1px solid var(--bord); background:var(--doux); }
.resultat-onglet-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
                       padding:.75rem .5rem; font:inherit; font-size:.92rem; font-weight:600;
                       color:var(--texte); opacity:.75; background:none; border:none;
                       border-bottom:2px solid transparent; cursor:pointer; border-radius:0;
                       transition:all .15s ease; text-align:center; }
.resultat-onglet-btn:hover { opacity:1; background:rgba(0,0,0,.03); }
.resultat-onglet-btn.actif { opacity:1; color:var(--accent); background:var(--fond);
                             border-bottom-color:var(--accent); }
.onglet-icone { font-size:1rem; }

/* Panneaux de contenu des onglets */
.resultat-onglet-panneau { padding:1.25rem; }
.resultat-onglet-panneau[hidden] { display:none; }

/* Panneau Corrigé / Modèle */
.modele-reponse-boite { background:var(--fond); }
.modele-badge-intro { display:inline-flex; align-items:center; padding:.3rem .75rem;
                      border-radius:.4rem; background:var(--tcf-fond); color:var(--accent);
                      font-size:.82rem; font-weight:700; margin-bottom:.85rem; }
.modele-texte { white-space:pre-wrap; font:16px/1.75 Georgia, "Times New Roman", serif;
                padding:1.1rem; border-radius:.6rem; background:var(--doux);
                border:1px solid var(--bord); color:var(--texte); }

/* Panneau Observations */
.commentaire-correcteur-bloc { margin-bottom:1.5rem; }
.observation-texte { white-space:pre-wrap; font-size:.95rem; line-height:1.7;
                     background:var(--doux); padding:1.1rem; border-radius:.6rem;
                     border:1px solid var(--bord); font-family:inherit; }
.bloc-production-candidat { margin-top:1.5rem; padding-top:1.25rem; border-top:1px dashed var(--bord); }
.production-titre { display:flex; justify-content:space-between; align-items:center;
                    flex-wrap:wrap; gap:.5rem; margin:0 0 .75rem; font-size:1.05rem; font-weight:700; }
.duree-tache { font-size:.85rem; font-weight:normal; opacity:.75; }
.sous-titre-transcription { margin:1rem 0 .3rem; font-size:.95rem; }
.notes-prepa-details { margin-top:1rem; }
.notes-prepa-details summary { font-size:.9rem; font-weight:600; cursor:pointer; }

/* Panneau Sujet */
.sujet-detail-bloc { display:flex; flex-direction:column; gap:1rem; }
.sujet-texte { white-space:pre-wrap; line-height:1.7; font-size:.98rem; }
.consigne-encadre { padding:.9rem 1.1rem; border-radius:.5rem; background:var(--tcf-fond);
                    border-left:4px solid var(--accent); font-size:.92rem; }
.consigne-encadre strong { display:block; margin-bottom:.3rem; color:var(--accent); }
.consigne-encadre p { margin:0; }
.sujet-metas { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.5rem; }
.meta-item { font-size:.85rem; padding:.25rem .6rem; border-radius:.35rem;
             background:var(--doux); border:1px solid var(--bord); opacity:.85; }

.actions-fin-resultat { margin-top:2rem; }
.resultat-actions-nav { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:1.25rem 0; }
.resultat-actions-nav .bouton { font-size:.9rem; padding:.5rem 1rem; }

/* Pied de carte avec navigation précédent / suivant */
.carte-resultat-pied { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
                       gap:1rem; padding:1rem 1.25rem; background:var(--doux);
                       border-top:1px solid var(--bord); }
.pied-nav-gauche, .pied-nav-droite { display:flex; align-items:center; }
.pied-nav-centre { display:flex; align-items:center; font-size:.9rem; opacity:.8; font-weight:500; }
.btn-tache-nav { font-size:.92rem; padding:.55rem 1.1rem; border-radius:.45rem; cursor:pointer; }
.pied-indicateur-tache { font-variant-numeric:tabular-nums; }
@media (max-width:36rem) {
  .carte-resultat-pied { flex-direction:column; align-items:stretch; text-align:center; }
  .pied-nav-gauche, .pied-nav-droite, .pied-nav-centre { justify-content:center; width:100%; }
  .carte-resultat-pied .bouton { width:100%; }
}

/* ---------------------------------------------------- Installation PWA */
.bouton-installer-app {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(0, 102, 204, 0.08); color:var(--accent);
  border:1px solid rgba(0, 102, 204, 0.25); border-radius:.45rem;
  padding:.3rem .65rem; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:all .15s ease;
}
.bouton-installer-app:hover {
  background:var(--accent); color:#ffffff; border-color:var(--accent);
}
.bouton-installer-pied {
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:1px solid var(--bord); color:var(--texte);
  border-radius:.4rem; padding:.35rem .75rem; font-size:.8rem;
  font-weight:600; cursor:pointer; margin-left:1rem; opacity:.9;
}
.bouton-installer-pied:hover {
  border-color:var(--accent); color:var(--accent); opacity:1;
}
.icone-installer { width:1rem; height:1rem; stroke-width:2.2; flex-shrink:0; }

/* Modale explicative d'installation (notamment iOS Safari) */
.modale-install-app {
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.modale-install-app[hidden] { display:none !important; }
.modale-install-fond {
  position:absolute; inset:0; background:rgba(0, 0, 0, 0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modale-install-boite {
  position:relative; z-index:1; width:100%; max-width:26rem;
  background:var(--fond); border:1px solid var(--bord); border-radius:1rem;
  padding:1.5rem 1.25rem; box-shadow:0 1.25rem 2.5rem rgba(0, 0, 0, 0.25);
  text-align:center;
}
.btn-fermer-install {
  position:absolute; top:.75rem; right:.75rem; width:2rem; height:2rem;
  border-radius:50%; border:none; background:var(--doux); color:var(--texte);
  font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.install-logo-wrap {
  width:3.5rem; height:3.5rem; margin:0 auto .75rem; border-radius:.75rem;
  overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.install-logo-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.modale-install-boite h3 { margin:0 0 .4rem; font-size:1.2rem; }
.install-sous-titre { font-size:.85rem; color:var(--texte); opacity:.8; margin:0 0 1.25rem; line-height:1.45; }
.install-etapes {
  display:flex; flex-direction:column; gap:.85rem; margin-bottom:1.5rem;
  text-align:left; background:var(--doux); padding:1rem; border-radius:.75rem;
}
.install-etape { display:flex; align-items:flex-start; gap:.75rem; font-size:.88rem; line-height:1.4; }
.etape-numero {
  width:1.5rem; height:1.5rem; border-radius:50%; background:var(--accent);
  color:#fff; font-weight:700; font-size:.78rem; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; margin-top:.1rem;
}
.icone-share-ios { vertical-align:middle; stroke:var(--accent); margin:0 .2rem; }
.badge-plus-ios {
  display:inline-block; font-weight:700; color:var(--accent);
  background:rgba(0, 102, 204, 0.12); padding:0 .35rem; border-radius:.25rem;
}
.btn-compris-install { width:100%; justify-content:center; font-weight:600; font-size:.95rem; }

/* ---------------------------------------------------- Administration & Partenaires White Label */
.lien-nav-admin {
  background:rgba(220, 38, 38, 0.1); color:#dc2626; border-radius:.35rem;
  padding:.25rem .55rem; font-size:.82rem; font-weight:700;
}
.lien-nav-partenaire {
  background:rgba(16, 185, 129, 0.12); color:#059669; border-radius:.35rem;
  padding:.25rem .55rem; font-size:.82rem; font-weight:700;
}

.tableau-entete-admin {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:1rem; margin-bottom:1.5rem; border-bottom:1px solid var(--bord); padding-bottom:1rem;
}
.tableau-entete-admin h1 { margin:0 0 .25rem; font-size:1.6rem; }
.admin-actions-rapides { display:flex; flex-wrap:wrap; gap:.6rem; }

.partenaire-header-brand {
  background:linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, var(--fond) 100%);
  border:1px solid var(--bord); border-radius:1rem; padding:1.5rem;
  margin-bottom:1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:1.25rem;
}
.partenaire-badge-wl {
  display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; background:var(--accent); color:#fff;
  padding:.2rem .55rem; border-radius:.3rem; margin-bottom:.5rem;
}
.partenaire-header-info h1 { margin:0 0 .3rem; font-size:1.75rem; }
.partenaire-sous-titre { margin:0; opacity:.8; font-size:.92rem; }
.partenaire-header-actions { display:flex; flex-wrap:wrap; gap:.75rem; }

.menu-onglets-partenaire {
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--bord); padding-bottom:.5rem;
}
.onglet-item {
  padding:.55rem 1rem; border-radius:.5rem; font-weight:600; font-size:.9rem;
  color:var(--texte); text-decoration:none; transition:all .15s ease;
}
.onglet-item:hover { background:var(--doux); }
.onglet-item.actif { background:var(--accent); color:#fff; }

.grille-kpi {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
  gap:1rem; margin-bottom:1.75rem;
}
.carte-kpi {
  background:var(--fond); border:1px solid var(--bord); border-radius:.85rem;
  padding:1.25rem; display:flex; flex-direction:column; box-shadow:var(--carte-ombre);
}
.kpi-titre { font-size:.82rem; font-weight:600; text-transform:uppercase; opacity:.75; margin-bottom:.4rem; }
.kpi-chiffre { font-size:2.1rem; font-weight:800; color:var(--accent); line-height:1.1; margin-bottom:.25rem; }
.kpi-desc { font-size:.8rem; opacity:.7; }

.carte-bloc {
  background:var(--fond); border:1px solid var(--bord); border-radius:1rem;
  padding:1.5rem; margin-bottom:1.75rem; box-shadow:var(--carte-ombre);
}
.carte-bloc-titre {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1rem;
}
.carte-bloc-titre h2, .carte-bloc h2 { margin:0 0 1rem; font-size:1.25rem; }

.barres-repartition { display:flex; flex-wrap:wrap; gap:1rem; }
.item-repartition {
  background:var(--doux); padding:.75rem 1.25rem; border-radius:.6rem;
  border:1px solid var(--bord); display:flex; align-items:center; gap:.75rem;
}

.table-responsive { width:100%; overflow-x:auto; }
.badge-statut {
  display:inline-block; padding:.2rem .5rem; border-radius:.3rem;
  font-size:.78rem; font-weight:700;
}
.badge-statut.actif { background:rgba(16, 185, 129, 0.15); color:#059669; }
.badge-statut.inactif { background:rgba(239, 68, 68, 0.15); color:#dc2626; }

.badge-role {
  display:inline-block; padding:.2rem .5rem; border-radius:.3rem;
  font-size:.78rem; font-weight:700;
}
.badge-role-admin { background:rgba(220, 38, 38, 0.12); color:#dc2626; }
.badge-role-partenaire { background:rgba(16, 185, 129, 0.12); color:#059669; }
.badge-role-user { background:var(--doux); color:var(--texte); }

.badge-plan-actif {
  display:inline-block; background:rgba(0, 102, 204, 0.1); color:var(--accent);
  padding:.2rem .5rem; border-radius:.3rem; font-size:.82rem; font-weight:600;
}
.aucun-abo { font-size:.82rem; opacity:.6; font-style:italic; }

.slug-tag { font-family:monospace; font-size:.8rem; opacity:.75; }
.partenaire-cell-nom { display:flex; align-items:center; gap:.6rem; }
.pastille-couleur { width:.9rem; height:.9rem; border-radius:50%; flex-shrink:0; display:inline-block; }

.solde-credit-cell { display:flex; align-items:center; gap:.6rem; }
.solde-valeur { font-size:1.1rem; color:var(--accent); }
.enligne-mini { display:flex; align-items:center; gap:.3rem; margin:0; }
.input-mini { width:3.5rem; padding:.2rem .4rem; font-size:.82rem; border-radius:.3rem; border:1px solid var(--bord); }
.select-mini { padding:.2rem .4rem; font-size:.82rem; border-radius:.3rem; border:1px solid var(--bord); }
.bouton-mini { padding:.25rem .5rem; font-size:.78rem; border-radius:.3rem; }

.barre-recherche-admin { display:flex; gap:.5rem; margin-bottom:1.25rem; }
.input-recherche { flex:1; max-width:28rem; padding:.55rem .85rem; border:1px solid var(--bord); border-radius:.45rem; }

.grille-deux-champs { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:40rem) { .grille-deux-champs { grid-template-columns:1fr; } }

.couleur-input-wrap { display:flex; align-items:center; gap:.75rem; }
.couleur-input-wrap input[type="color"] { width:2.5rem; height:2.5rem; border:none; border-radius:.4rem; cursor:pointer; }

.grille-suivi-candidat { display:grid; grid-template-columns:1fr 1.8fr; gap:1.5rem; align-items:start; }
@media (max-width:55rem) { .grille-suivi-candidat { grid-template-columns:1fr; } }

.liste-abos-suivi { list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.6rem; }
.item-abo {
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem; border-radius:.5rem; border:1px solid var(--bord); background:var(--doux);
}
.abo-dates { font-size:.8rem; opacity:.75; margin-top:.2rem; }

.form-attribution-directe { display:flex; flex-direction:column; gap:.75rem; margin-top:.5rem; }
.notes-suivi-apercu { font-size:.78rem; opacity:.8; font-style:italic; margin-top:.2rem; }
.solde-licences-box { text-align:center; padding:1.5rem; }
.solde-licences-box .kpi-chiffre { font-size:2.8rem; }
.aide-licences { font-size:.85rem; opacity:.8; margin-top:1rem; line-height:1.45; }
/* Protection Globale des Médias & Anti-Scraping */
.correction-media img,
.correction-media audio,
.pdf-render-canvas,
.lecteur-video-wrap video,
.lecteur-audio-wrap audio,
#lightbox-img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.pdf-render-canvas {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  max-width: 100%;
}

.correction-media img {
  pointer-events: auto;
  user-drag: none;
  -webkit-user-drag: none;
}

/* Menu déroulant utilisateur connecté */
.menu-utilisateur {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-menu-utilisateur {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 99px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f2a4d;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-menu-utilisateur:hover,
.btn-menu-utilisateur[aria-expanded="true"] {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.avatar-pseudo {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron-menu {
  color: #64748b;
  transition: transform 0.2s;
}

.btn-menu-utilisateur[aria-expanded="true"] .chevron-menu {
  transform: rotate(180deg);
}

.menu-deroulant {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 42, 77, 0.18);
  padding: 6px;
  z-index: 99999;
  display: none;
  flex-direction: column;
}

.menu-deroulant.ouvert {
  display: flex !important;
  animation: fadeInMenu 0.15s ease-out;
}

@keyframes fadeInMenu {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.item-menu-deroulant {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
}

.item-menu-deroulant:hover {
  background: #f8fafc;
  color: #0f2a4d;
}

.item-deconnexion {
  color: #dc2626;
}

.item-deconnexion:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.separateur-menu {
  height: 1px;
  background: #f1f5f9;
  margin: 4px 0;
}

.form-deconnexion-menu {
  margin: 0;
  padding: 0;
}