/* DressKool — feuille de style partagee par les 6 langues (/dk-ui.css).
   Chargee en DERNIER dans le <head> des 6 index.html : a specificite egale,
   les regles d'ici gagnent sur le <style> inline. C'est le seul endroit ou une
   regle s'applique aux 6 langues d'un coup — ne jamais styler dans les HTML. */

/* ══════════════════════════════════════════════════════════════════
   1. ACCESSIBILITE — anneau de focus visible partout
   ══════════════════════════════════════════════════════════════════ */
:focus-visible{outline:3px solid var(--blue,#0086C6);outline-offset:2px;border-radius:8px}
.dk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════════════
   2. QUIZ — options en <button role="radio">
   Les .qo etaient des <div onclick> : invisibles au clavier et aux lecteurs
   d'ecran. Devenues des boutons, elles heritent du reset du navigateur : on
   reimpose ici l'apparence d'origine.
   ══════════════════════════════════════════════════════════════════ */
button.qo{width:100%;text-align:left;font-family:inherit;font-size:14px;appearance:none;-webkit-appearance:none}
button.qo:disabled{opacity:1}
button.qo.fz:disabled{opacity:.5}
.qgroup{display:block}
.qq.dk-answered .qo{cursor:default}

/* Explication auto-derivee du corps de la lecon */
.dk-why{margin:10px 0 4px;padding:12px 15px;border-radius:12px;background:var(--blue-050,#E8F4FB);
  border:1px solid var(--blue-100,#D3EAF7);font-size:13.5px;line-height:1.65;color:var(--ink-2,#25333F)}
.dk-why b{color:var(--blue-d,#006EA3);font-weight:700}
.dk-why q{font-style:italic}
.dk-why-sec{background:var(--cream,#F4EFE4);border-color:var(--border,#EAE3D5)}
.dk-why-link{display:inline-block;margin-top:8px;background:none;border:none;padding:0;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--blue,#0086C6);
  text-decoration:underline;cursor:pointer}
.dk-why-link:hover{color:var(--blue-d,#006EA3)}

/* Surlignage du passage cible par « Revoir ce passage » */
.dk-hl{background:#FFF3C4;box-shadow:0 0 0 6px #FFF3C4;border-radius:4px;transition:background .4s ease,box-shadow .4s ease}

/* Compteur de tentatives, sans culpabiliser */
.dk-tries{display:inline-flex;align-items:center;gap:7px;background:var(--cream,#F4EFE4);
  border-radius:99px;padding:5px 13px;font-size:11.5px;font-weight:600;color:var(--body,#515C66);margin-bottom:14px}
.dk-live{margin:0}

/* ══════════════════════════════════════════════════════════════════
   3. EXERCICE ACTIF — vraies cases a cocher + note + chiffre
   ══════════════════════════════════════════════════════════════════ */
.dkex-list{margin:14px 0 4px;display:flex;flex-direction:column;gap:8px}
.dkex-item{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.72);border:1.5px solid #BBF7D0;cursor:pointer;transition:.15s;
  font-size:14px;line-height:1.6;color:#166534}
.dkex-item:hover{background:#fff;border-color:var(--green,#16A34A)}
.dkex-item input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex-shrink:0;margin-top:1px;
  border:2px solid var(--green,#16A34A);border-radius:6px;background:#fff;cursor:pointer;position:relative;transition:.15s}
.dkex-item input:checked{background:var(--green,#16A34A)}
.dkex-item input:checked::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:13px;font-weight:800;line-height:1}
.dkex-item.on{background:#DCFCE7;border-color:var(--green,#16A34A)}
.dkex-item.on .dkex-txt{opacity:.62;text-decoration:line-through;text-decoration-thickness:1px}
.dkex-txt{flex:1;min-width:0}
.dkex-txt strong{font-weight:700}
.dkex-txt a{color:#15803D;font-weight:600}

.dkex-field{margin-top:14px}
.dkex-field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:#15803D;margin-bottom:6px}
.dkex-field textarea,.dkex-field input[type=number]{width:100%;font-family:inherit;font-size:14px;
  color:#14532D;background:#fff;border:1.5px solid #BBF7D0;border-radius:12px;padding:11px 13px;
  outline:none;transition:.15s;line-height:1.6}
.dkex-field textarea{min-height:88px;resize:vertical}
.dkex-field input[type=number]{max-width:150px}
.dkex-field textarea:focus,.dkex-field input[type=number]:focus{border-color:var(--green,#16A34A);
  box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.dkex-hint{font-size:11.5px;color:#3F8B5C;margin-top:5px;font-weight:500}
.dkex-saved{font-size:11px;color:#3F8B5C;font-weight:600;opacity:0;transition:opacity .25s}
.dkex-saved.on{opacity:1}

.dkex-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px}
.dkex-count{font-size:12.5px;font-weight:700;color:#15803D}
.dkex-done{padding:12px 24px;background:var(--green,#16A34A);color:#fff;border:none;border-radius:12px;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;
  box-shadow:0 6px 16px rgba(22,163,74,.26)}
.dkex-done:hover{background:#15803D;transform:translateY(-1px)}
.dkex-done.is-done{background:#fff;color:#15803D;border:1.5px solid var(--green,#16A34A);box-shadow:none}
.dkex-stamp{display:inline-flex;align-items:center;gap:7px;background:#DCFCE7;border:1px solid var(--green,#16A34A);
  border-radius:99px;padding:6px 14px;font-size:12px;font-weight:700;color:#15803D}

/* ══════════════════════════════════════════════════════════════════
   4. SIDEBAR — recherche + modules repliables
   ══════════════════════════════════════════════════════════════════ */
.dk-search{padding:12px 14px 8px;flex-shrink:0;position:relative}
.dk-search input{width:100%;font-family:inherit;font-size:13px;color:var(--ink,#16222C);
  background:#FCFBF8;border:1.5px solid var(--border,#EAE3D5);border-radius:11px;
  padding:9px 32px 9px 32px;outline:none;transition:.15s}
.dk-search input:focus{border-color:var(--blue,#0086C6);background:#fff;box-shadow:0 0 0 4px var(--blue-050,#E8F4FB)}
.dk-search input::-webkit-search-cancel-button{display:none}
.dk-search .dk-sico{position:absolute;left:24px;top:32px;transform:translateY(-50%);font-size:13px;opacity:.5;pointer-events:none}
.dk-search .dk-sclr{position:absolute;right:22px;top:32px;transform:translateY(-50%);background:none;border:none;
  font-size:16px;line-height:1;color:var(--muted,#98938A);cursor:pointer;padding:2px 4px}

/* Module sans lecon : « À venir ». Remplace l'ancienne pastille de VERROUILLAGE
   (.nl.lk + 🔒), supprimee : tout est ouvert volontairement, ce code mort
   pouvait ressusciter le verrou. */
.nl.dk-soon{opacity:.5;cursor:default}
.nl.dk-soon:hover{background:none}
.dk-scount{padding:2px 14px 6px;font-size:11px;color:var(--muted,#98938A);font-weight:600}
.dk-snone{padding:14px;margin:4px 10px;border-radius:12px;background:var(--bg,#FBF9F4);
  font-size:12.5px;color:var(--muted,#98938A);line-height:1.6;text-align:center}

.nbl{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;border-radius:9px;transition:.15s}
.nbl:hover{background:var(--bg,#FBF9F4)}
.nbl .dk-caret{margin-left:auto;font-size:9px;transition:transform .18s ease;opacity:.6}
.nbl.dk-open .dk-caret{transform:rotate(90deg)}
.nbl .dk-mprog{font-size:9px;font-weight:700;color:var(--muted,#98938A);letter-spacing:0}
.nbl.dk-full .dk-mprog{color:var(--green,#16A34A)}

/* ══════════════════════════════════════════════════════════════════
   5. CARTE « REPRENDRE » (dashboard)
   ══════════════════════════════════════════════════════════════════ */
.dk-resume{display:flex;align-items:center;gap:18px;background:var(--card,#fff);
  border:1px solid var(--blue-100,#D3EAF7);border-left:5px solid var(--blue,#0086C6);
  border-radius:var(--r-lg,20px);padding:20px 24px;margin-bottom:22px;box-shadow:var(--sh-sm,0 1px 3px rgba(0,0,0,.06))}
.dk-resume .dkr-em{font-size:30px;flex-shrink:0}
.dk-resume .dkr-i{flex:1;min-width:0}
.dk-resume .dkr-k{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--blue,#0086C6)}
.dk-resume .dkr-t{font-family:var(--font,sans-serif);font-weight:700;font-size:17px;color:var(--ink,#16222C);margin-top:3px;line-height:1.3}
.dk-resume .dkr-s{font-size:12.5px;color:var(--muted,#98938A);margin-top:3px}
.dk-resume .dkr-b{padding:12px 22px;background:var(--blue,#0086C6);color:#fff;border:none;border-radius:12px;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:.2s}
.dk-resume .dkr-b:hover{background:var(--blue-d,#006EA3)}

/* ══════════════════════════════════════════════════════════════════
   6. CARNET D'ACTIONS
   ══════════════════════════════════════════════════════════════════ */
.dk-nb-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.dk-nb-hd h1{font-family:var(--font,sans-serif);font-weight:800;font-size:29px;color:var(--ink,#16222C);line-height:1.2}
.dk-nb-hd p{font-size:13.5px;color:var(--muted,#98938A);margin-top:6px;max-width:460px;line-height:1.6}
.dk-nb-acts{display:flex;gap:9px;flex-wrap:wrap}
.dk-nb-acts button{padding:10px 18px;border-radius:11px;font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;border:1.5px solid var(--border,#EAE3D5);background:var(--card,#fff);color:var(--body,#515C66);transition:.15s}
.dk-nb-acts button:hover{border-color:var(--blue,#0086C6);color:var(--blue,#0086C6)}
.dk-nb-acts button.pri{background:var(--ink,#16222C);border-color:var(--ink,#16222C);color:#fff}
.dk-nb-acts button.pri:hover{background:var(--ink-2,#25333F);color:#fff}

.dk-nb-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.dk-nb-stat{flex:1;min-width:130px;background:var(--card,#fff);border:1px solid var(--border,#EAE3D5);
  border-radius:var(--r,14px);padding:16px 18px}
.dk-nb-stat .n{font-family:var(--font,sans-serif);font-weight:800;font-size:26px;color:var(--ink,#16222C);line-height:1}
.dk-nb-stat .k{font-size:11px;color:var(--muted,#98938A);margin-top:4px;font-weight:600}

.dk-nb-mod{background:var(--card,#fff);border:1px solid var(--border,#EAE3D5);border-radius:var(--r-lg,20px);
  padding:22px 24px;margin-bottom:14px}
.dk-nb-mod > h3{font-family:var(--font,sans-serif);font-weight:700;font-size:16px;color:var(--ink,#16222C);
  margin-bottom:14px;display:flex;align-items:center;gap:9px}
.dk-nb-les{padding:13px 0;border-top:1px solid var(--border-2,#F1ECE1)}
.dk-nb-les:first-of-type{border-top:none;padding-top:0}
.dk-nb-les h4{font-size:13.5px;font-weight:700;color:var(--ink,#16222C);margin-bottom:7px;cursor:pointer}
.dk-nb-les h4:hover{color:var(--blue,#0086C6)}
.dk-nb-les ul{list-style:none;margin:0 0 6px;padding:0}
.dk-nb-les li{font-size:13px;color:var(--body,#515C66);line-height:1.6;padding:3px 0 3px 22px;position:relative}
.dk-nb-les li::before{content:"✓";position:absolute;left:0;top:3px;color:var(--green,#16A34A);font-weight:800;font-size:12px}
.dk-nb-note{background:var(--bg,#FBF9F4);border-left:3px solid var(--yellow,#FFCA1C);border-radius:0 10px 10px 0;
  padding:10px 14px;font-size:13px;color:var(--body,#515C66);line-height:1.65;white-space:pre-wrap;margin-top:6px}
.dk-nb-num{display:inline-block;background:var(--blue-050,#E8F4FB);color:var(--blue-d,#006EA3);border-radius:99px;
  padding:3px 11px;font-size:11.5px;font-weight:700;margin-top:6px}

/* Carte du dashboard */
.dk-nbcard{background:var(--card,#fff);border:1px solid var(--border,#EAE3D5);border-radius:var(--r-lg,20px);
  padding:22px;margin-bottom:22px;display:flex;align-items:center;gap:18px;box-shadow:var(--sh-sm,0 1px 3px rgba(0,0,0,.06))}
.dk-nbcard .em{font-size:30px;flex-shrink:0}
.dk-nbcard .i{flex:1;min-width:0}
.dk-nbcard h3{font-family:var(--font,sans-serif);font-weight:700;font-size:17px;color:var(--ink,#16222C)}
.dk-nbcard p{font-size:12.5px;color:var(--muted,#98938A);margin-top:3px;line-height:1.55}
.dk-nbcard button{padding:11px 20px;background:var(--cream,#F4EFE4);border:1px solid var(--border,#EAE3D5);
  border-radius:11px;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink,#16222C);
  cursor:pointer;white-space:nowrap;transition:.15s}
.dk-nbcard button:hover{background:var(--blue-050,#E8F4FB);border-color:var(--blue-100,#D3EAF7);color:var(--blue-d,#006EA3)}

/* ══════════════════════════════════════════════════════════════════
   7. VUES module / badges / certificat / etats vides
   ══════════════════════════════════════════════════════════════════ */
.dk-vh{margin-bottom:24px}
.dk-vh h1{font-family:var(--font,sans-serif);font-weight:800;font-size:29px;color:var(--ink,#16222C);line-height:1.2}
.dk-vh p{font-size:14px;color:var(--muted,#98938A);margin-top:7px;line-height:1.6}
.dk-mlist{background:var(--card,#fff);border:1px solid var(--border,#EAE3D5);border-radius:var(--r-lg,20px);padding:12px}
.dk-mrow{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:12px;cursor:pointer;transition:.15s;
  width:100%;background:none;border:none;font-family:inherit;text-align:left}
.dk-mrow:hover{background:var(--blue-050,#E8F4FB)}
.dk-mrow .d{width:26px;height:26px;border-radius:50%;background:var(--cream,#F4EFE4);color:var(--muted,#98938A);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.dk-mrow.done .d{background:#DCFCE7;color:#15803D}
.dk-mrow .n{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink,#16222C)}
.dk-mrow .m{font-size:11.5px;color:var(--muted,#98938A);flex-shrink:0}
.dk-empty{background:var(--card,#fff);border:1px dashed var(--border,#EAE3D5);border-radius:var(--r-lg,20px);
  padding:44px 28px;text-align:center}
.dk-empty .em{font-size:38px;margin-bottom:12px}
.dk-empty h3{font-family:var(--font,sans-serif);font-weight:700;font-size:18px;color:var(--ink,#16222C);margin-bottom:7px}
.dk-empty p{font-size:13.5px;color:var(--muted,#98938A);line-height:1.65;max-width:400px;margin:0 auto 18px}
.dk-empty button{padding:12px 24px;background:var(--blue,#0086C6);color:#fff;border:none;border-radius:12px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.dk-empty.err{border-color:#FECACA;background:var(--red-050,#FEF2F2)}
.dk-loading{padding:60px 20px;text-align:center;color:var(--muted,#98938A);font-size:14px}
.dk-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dk-badge-cell{background:var(--card,#fff);border:1px solid var(--border,#EAE3D5);border-radius:var(--r,14px);
  padding:18px;text-align:center;opacity:.55}
.dk-badge-cell.earned{opacity:1;border-color:var(--yellow,#FFCA1C);background:#FFF9E8}
.dk-badge-cell .em{font-size:28px}
.dk-badge-cell .n{font-size:12.5px;font-weight:700;color:var(--ink,#16222C);margin-top:7px;line-height:1.35}
.dk-badge-cell .s{font-size:11px;color:var(--muted,#98938A);margin-top:3px}

/* ══════════════════════════════════════════════════════════════════
   8. MOBILE — tiroir off-canvas + barre haute + nav basse a 4 boutons
   Avant : `.sb{display:none}` supprimait tout le programme sur telephone.
   ══════════════════════════════════════════════════════════════════ */
.dk-mtop{display:none}
.dk-ovl{display:none}
@media(max-width:768px){
  /* padding-right : le selecteur de langue est fixe en haut a droite (pose dans
     les 6 index.html, non modifiables) — le titre passerait dessous. */
  .dk-mtop{display:flex!important;align-items:center;gap:12px;position:fixed;top:0;left:0;right:0;height:54px;
    padding:0 92px 0 14px;background:var(--card,#fff);border-bottom:1px solid var(--border,#EAE3D5);z-index:140}
  .dk-mtop .dk-burger{display:flex;align-items:center;gap:7px;background:var(--cream,#F4EFE4);border:1px solid var(--border,#EAE3D5);
    border-radius:10px;padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink,#16222C);cursor:pointer}
  .dk-mtop .dk-mtitle{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--muted,#98938A);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dk-mtop .dk-mpct{font-size:12px;font-weight:800;color:var(--blue,#0086C6);flex-shrink:0}

  /* le tiroir : la sidebar COMPLETE, recherche incluse */
  .sb{display:flex!important;position:fixed;top:0;bottom:0;left:0;width:88vw;max-width:340px;height:100%;
    z-index:170;transform:translateX(-100%);transition:transform .26s ease;box-shadow:0 0 40px rgba(22,34,44,.22);
    border-right:1px solid var(--border,#EAE3D5)}
  body.dk-drawer .sb{transform:translateX(0)}
  .dk-ovl{display:block;position:fixed;inset:0;background:rgba(22,34,44,.5);z-index:160;
    opacity:0;pointer-events:none;transition:opacity .26s ease}
  body.dk-drawer .dk-ovl{opacity:1;pointer-events:auto}

  /* .ct redevient le conteneur de defilement (le HTML inline le passait en
     height:auto, ce qui rendait la reprise de lecture impossible a mesurer). */
  .ct{height:100vh;overflow-y:auto;padding-top:54px;padding-bottom:78px;-webkit-overflow-scrolling:touch}
  .cti{padding:20px 16px;max-width:100%}
  .mobile-nav button{padding:4px 8px}
  .dk-resume{flex-direction:column;align-items:stretch;text-align:left;gap:12px}
  .dk-resume .dkr-b{width:100%}
  .dk-nb-hd{flex-direction:column}
  .dk-nb-acts{width:100%}
  .dk-nb-acts button{flex:1}
  .dkex-foot{flex-direction:column;align-items:stretch}
  .dkex-done{width:100%}
}
