/* =========================================================================
   DEASFR -- Feuille de style
   Sobre, lisible, mobile d'abord. Themes clair et sombre.
   ========================================================================= */

:root{
  /* Palette claire et gaie, accordée aux visuels des réseaux sociaux. */
  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #f2f8f8;
  --line:      #dce9e9;
  --line-soft: #ecf4f4;

  --ink:       #143842;
  --ink-2:     #5d7b86;
  --ink-3:     #90a8b1;

  --brand:     #10b5a2;
  --brand-2:   #0e9e8e;
  --brand-d:   #0a7d70;
  --brand-l:   #d6f5f1;
  --brand-ink: #ffffff;

  --accent:    #ff6b6b;
  --accent-l:  #ffe4e4;

  --ok:        #0f9d70;
  --ok-l:      #d8f5e9;
  --warn:      #b07a00;
  --warn-l:    #fff3d9;
  --err:       #e04a4a;
  --err-l:     #ffe4e4;

  --rouge:     #c0392b;
  --bleu:      #2b6fb0;
  --jaune:     #b8860b;
  --violet:    #7b52ab;
  --violet-l:  #ece3f7;

  --r:   12px;
  --r-s: 8px;
  --sh:  0 1px 2px rgba(20,40,45,.06), 0 4px 16px rgba(20,40,45,.05);
  --sh-l:0 2px 6px rgba(20,40,45,.08), 0 12px 32px rgba(20,40,45,.09);
  --maxw: 1120px;
  --base: 16px;
}
:root{ --brand-2:#0d605d; }

/* Le thème sombre ne s'active QUE si la personne le demande dans
   « Mon compte ». Par défaut le site reste clair, même si le téléphone
   est en mode sombre.  (bloc conservé pour le réglage « automatique ») */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg:#0e1618; --surface:#152225; --surface-2:#1b2b2f;
    --line:#2a3d42; --line-soft:#223338;
    --ink:#e7f0f1; --ink-2:#a8bfc4; --ink-3:#7d959b;
    --brand:#4fbdb5; --brand-2:#3ea79f; --brand-d:#8ad6cf;
    --brand-l:#16302f; --brand-ink:#06201f;
    --accent:#e08a55; --accent-l:#2e2019;
    --ok:#4bbd97; --ok-l:#152b26; --warn:#d8ae4d; --warn-l:#2b2517;
    --err:#e08287; --err-l:#2e1a1c;
    --rouge:#e0685c; --bleu:#6ba6dd; --jaune:#d8ae4d;
  --violet:#b294d6; --violet-l:#251c33;
    --violet:#b294d6; --violet-l:#251c33;
    --sh:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --sh-l:0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1618; --surface:#152225; --surface-2:#1b2b2f;
  --line:#2a3d42; --line-soft:#223338;
  --ink:#e7f0f1; --ink-2:#a8bfc4; --ink-3:#7d959b;
  --brand:#4fbdb5; --brand-2:#3ea79f; --brand-d:#8ad6cf;
  --brand-l:#16302f; --brand-ink:#06201f;
  --accent:#e08a55; --accent-l:#2e2019;
  --ok:#4bbd97; --ok-l:#152b26; --warn:#d8ae4d; --warn-l:#2b2517;
  --err:#e08287; --err-l:#2e1a1c;
  --rouge:#e0685c; --bleu:#6ba6dd; --jaune:#d8ae4d;
  --sh:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  --sh-l:0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.35);
}

/* Accessibilite : 3 tailles de police */
html[data-taille="m"] { font-size: 16px; }
html[data-taille="l"] { font-size: 18.5px; }
html[data-taille="xl"]{ font-size: 21px; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(760px 520px at 88% -6%, #d6f5f1 0%, transparent 62%),
    radial-gradient(620px 460px at -8% 8%, #fff3d9 0%, transparent 58%),
    var(--bg);
  background-attachment:fixed;
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ line-height:1.25; margin:0 0 .5em; font-weight:650; letter-spacing:-.01em; }
h1{ font-size:1.9rem; } h2{ font-size:1.4rem; } h3{ font-size:1.12rem; } h4{ font-size:1rem; }
p{ margin:0 0 1em; }
a{ color:var(--brand); }
img,svg{ max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }
[hidden]{ display:none !important; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1rem; }
.stack > * + *{ margin-top:1rem; }
.muted{ color:var(--ink-2); }
.tiny{ font-size:.82rem; }
.center{ text-align:center; }

/* ---------------------------------------------------------------- BOUTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.66rem 1.1rem; border-radius:var(--r-s); border:1px solid transparent;
  background:var(--brand); color:var(--brand-ink); font-weight:600;
  cursor:pointer; text-decoration:none; transition:filter .15s, transform .05s;
  min-height:44px;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn.ghost{ background:transparent; color:var(--brand); border-color:var(--line); }
.btn.ghost:hover{ background:var(--surface-2); }
.btn.soft{ background:var(--brand-l); color:var(--brand); }
.btn.sm{ padding:.4rem .7rem; min-height:36px; font-size:.9rem; }
.btn.wide{ width:100%; }
.btn.danger{ background:var(--err); color:#fff; }

/* ------------------------------------------------------------------ CARTES */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.1rem; box-shadow:var(--sh);
}
.card.pad-lg{ padding:1.6rem; }
.grid{ display:grid; gap:1rem; }
.grid > *{ min-width:0; }
@media (min-width:640px){ .g2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } }

.badge{
  display:inline-block; padding:.16rem .5rem; border-radius:999px;
  font-size:.74rem; font-weight:650; letter-spacing:.02em;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
}
.badge.free{ background:var(--ok-l); color:var(--ok); border-color:transparent; }
.badge.lock{ background:var(--surface-2); color:var(--ink-3); }
.badge.done{ background:var(--brand-l); color:var(--brand); border-color:transparent; }
.badge.new{ background:var(--accent-l); color:var(--accent); border-color:transparent; }

/* ------------------------------------------------------------------ HEADER */
header.top{
  position:sticky; top:0; z-index:50; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.top .bar{ display:flex; align-items:center; gap:.75rem; height:60px; }
/* 44 px : la hauteur minimale confortable pour un doigt. Le logo ramène
   à l'accueil, il ne doit pas se rater. */
.logo{ display:flex; align-items:center; gap:.55rem; font-weight:750; letter-spacing:-.02em;
  min-height:44px;
  font-size:1.15rem; color:var(--ink); text-decoration:none; }
/* Le caducée DEASFR : une pastille turquoise dessinée en SVG (site/logo-badge.svg). */
.logo .mark{
  width:36px; height:36px; display:block; flex:0 0 auto;
  border-radius:10px; box-shadow:0 2px 6px rgba(16,181,162,.28);
}
.foot-marque{ display:inline-flex; align-items:center; gap:.45rem; }
.foot-marque img{ display:block; }
.top nav{ margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.navlink{
  padding:.45rem .7rem; border-radius:var(--r-s); color:var(--ink-2);
  text-decoration:none; font-weight:550; font-size:.94rem; cursor:pointer; border:none; background:none;
}
.navlink:hover{ background:var(--surface-2); color:var(--ink); }
.navlink.on{ background:var(--brand-l); color:var(--brand); }
.iconbtn{
  width:38px; height:38px; border-radius:var(--r-s); border:1px solid var(--line);
  background:var(--surface); cursor:pointer; display:grid; place-items:center; font-size:1rem;
}
.iconbtn:hover{ background:var(--surface-2); }
.burger{ display:none; }
@media (max-width:860px){
  .top nav .navlink.hide-sm{ display:none; }
  .burger{ display:grid; }
}
.drawer{
  position:fixed; inset:60px 0 auto 0; background:var(--surface);
  border-bottom:1px solid var(--line); padding:.6rem 1rem 1rem; z-index:49; box-shadow:var(--sh-l);
}
.drawer .navlink{ display:block; padding:.7rem; font-size:1rem; }

/* ------------------------------------------------------------------- HERO */
.hero{ padding:3rem 0 2.5rem; }
.hero h1{ font-size:clamp(1.85rem, 5vw, 3rem); max-width:16ch; }
.hero p.lead{ font-size:1.12rem; color:var(--ink-2); max-width:56ch; }
.hero .cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.heroGrid{ display:grid; gap:2rem; align-items:center; }
@media (min-width:900px){ .heroGrid{ grid-template-columns:1.15fr .85fr; } }
.pill-row{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.2rem; }
.pill{ font-size:.83rem; padding:.3rem .7rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1.6rem; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.8rem; text-align:center; }
.stat b{ display:block; font-size:1.5rem; color:var(--brand); line-height:1.2; }
.stat span{ font-size:.78rem; color:var(--ink-2); }

/* ------------------------------------------------------------------ TABLEAU DE BORD */
.dash-head{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between; margin-bottom:1.4rem; }
.progress{ height:9px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.progress > i{ display:block; height:100%; background:var(--brand); border-radius:999px; transition:width .4s; }
.progress.thin{ height:6px; }

.bloc{ margin-bottom:1.6rem; }
.bloc-head{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.7rem; flex-wrap:wrap; }
.bloc-head .n{
  width:30px; height:30px; border-radius:8px; background:var(--brand-l); color:var(--brand);
  display:grid; place-items:center; font-weight:750; font-size:.9rem; flex:0 0 auto;
}

/* --- formule en cours, sur la page Tarifs --- */
.formule-active{
  text-align:center; padding:.66rem 1rem; border-radius:var(--r-s);
  background:var(--brand-l); color:var(--brand);
  font-weight:750; font-size:.95rem; min-height:44px;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.formule-active::before{ content:"✓"; font-weight:900; }
.formule-active.discret{
  background:var(--surface-2); color:var(--ink-3); font-weight:600;
}
.formule-active.discret::before{ content:""; }

/* --- disponibilité affichée sur la page publique --- */
.dispo{ display:flex; gap:.4rem; flex-wrap:wrap; }
.dispo span{
  font-size:.76rem; font-weight:700; padding:.2rem .6rem; border-radius:999px;
  white-space:nowrap;
}
.dispo .ok{ background:var(--ok-l); color:var(--ok); }
.dispo .att{ background:var(--surface-2); color:var(--ink-3); }

/* --- chapitres pas encore redigés --- */
.item.avenir{
  cursor:default; opacity:.62; border-style:dashed;
  background:transparent;
}
.item.avenir:hover{ border-color:var(--line); box-shadow:none; }
.item .apercu{
  font-size:.78rem; color:var(--ink-3); font-style:italic;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.item .num.ok{ background:var(--brand-l); color:var(--brand); }

/* --- chapitre conteneur (l'anatomie et ses 12 systèmes) --- */
.conteneur{ margin:.8rem 0 0; padding:.8rem; border:1px dashed var(--line);
  border-radius:var(--r); background:var(--surface-2); }
.conteneur-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; flex-wrap:wrap; }
.conteneur-head .num{
  width:auto; padding:.16rem .5rem; border-radius:6px; background:var(--brand-l);
  color:var(--brand); font-weight:750; font-size:.8rem;
}

/* --- hierarchie : bloc > module > chapitre --- */
.module{ margin:0 0 1.1rem; padding-left:.9rem; border-left:3px solid var(--line-soft); }
.module-head{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem; }
.module-head .mod-n{
  font-size:.74rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase;
  background:var(--surface-2); color:var(--ink-2); padding:.14rem .5rem; border-radius:5px;
  white-space:nowrap;
}
.module-head .mod-t{ font-weight:620; font-size:.95rem; flex:1; min-width:180px; }
.item .num{ font-size:.8rem; letter-spacing:-.02em; }

.item{
  display:flex; gap:.9rem; align-items:flex-start; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:.9rem 1rem; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .05s;
}
.item:hover{ border-color:var(--brand); box-shadow:var(--sh); }
.item:active{ transform:translateY(1px); }
.item .num{
  width:34px; height:34px; border-radius:9px; background:var(--surface-2); color:var(--ink-2);
  display:grid; place-items:center; font-weight:700; font-size:.9rem; flex:0 0 auto;
}
.item.locked{ opacity:.72; }
.item .body{ flex:1; min-width:0; }
.item .t{ font-weight:620; line-height:1.35; }
.item .meta{ font-size:.82rem; color:var(--ink-3); margin-top:.2rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* -------------------------------------------------------------- LECTEUR DE FICHE */
.reader{ display:grid; gap:1.6rem; }
@media (min-width:1000px){ .reader{ grid-template-columns:1fr 260px; align-items:start; } }
.reader aside{ position:sticky; top:76px; }
/* Sans min-width:0, un tableau large empeche la colonne de retrecir sur mobile. */
.reader > *{ min-width:0; }
.sec{ margin-bottom:1.8rem; }
.sec h3{ color:var(--brand); border-bottom:2px solid var(--brand-l); padding-bottom:.35rem; }
.sec ul{ padding-left:1.2rem; }
.sec li{ margin-bottom:.4rem; }
.enc{
  background:var(--warn-l); border-left:4px solid var(--warn);
  padding:.9rem 1rem; border-radius:0 var(--r-s) var(--r-s) 0; margin:1.1rem 0;
}
.enc b{ display:block; color:var(--warn); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.25rem; }
.tbl-wrap{ overflow-x:auto; max-width:100%; margin:1rem 0; border:1px solid var(--line); border-radius:var(--r-s); }
table{ border-collapse:collapse; width:100%; min-width:460px; font-size:.94rem; }
th,td{ padding:.6rem .75rem; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
th{ background:var(--surface-2); font-weight:650; font-size:.85rem; color:var(--ink-2); }
tr:last-child td{ border-bottom:none; }

.objectifs{ background:var(--brand-l); border-radius:var(--r); padding:1rem 1.2rem; margin-bottom:1.6rem; }
.objectifs h4{ color:var(--brand); margin-bottom:.4rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; }
.objectifs ul{ margin:0; padding-left:1.1rem; }

.toc a, .toc button{ display:block; width:100%; text-align:left; font:inherit; background:none; border:none; cursor:pointer; padding:.6rem .55rem; border-radius:6px; font-size:.9rem; min-height:44px;
  color:var(--ink-2); text-decoration:none; border-left:2px solid transparent; }
.toc a:hover, .toc button:hover{ background:var(--surface-2); color:var(--ink); }

/* -------------------------------------------------------------------- QUIZ */
.quiz-shell{ max-width:720px; margin:0 auto; }
.qcount{ display:flex; justify-content:space-between; align-items:center; font-size:.88rem; color:var(--ink-2); margin-bottom:.5rem; }
.qtext{ font-size:1.15rem; font-weight:600; line-height:1.45; margin:1.2rem 0 1.1rem; }
.opt{
  display:flex; gap:.75rem; align-items:flex-start; width:100%; text-align:left;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-s);
  padding:.85rem 1rem; margin-bottom:.6rem; cursor:pointer; transition:.14s;
}
.opt:hover:not([disabled]){ border-color:var(--brand); background:var(--brand-l); }
.opt .k{
  width:26px; height:26px; border-radius:6px; background:var(--surface-2); color:var(--ink-2);
  display:grid; place-items:center; font-weight:700; font-size:.82rem; flex:0 0 auto;
}
.opt.good{ border-color:var(--ok); background:var(--ok-l); }
.opt.good .k{ background:var(--ok); color:#fff; }
.opt.bad{ border-color:var(--err); background:var(--err-l); }
.opt.bad .k{ background:var(--err); color:#fff; }
.opt[disabled]{ cursor:default; }
.expl{ background:var(--surface-2); border-radius:var(--r-s); padding:.85rem 1rem; margin-top:.4rem; font-size:.94rem; }
.expl b{ color:var(--brand); }

.score-ring{ width:130px; height:130px; margin:0 auto 1rem; position:relative; }
.score-ring svg{ transform:rotate(-90deg); }
.score-ring .val{ position:absolute; inset:0; display:grid; place-items:center; font-size:1.7rem; font-weight:750; }

.timer{ font-variant-numeric:tabular-nums; font-weight:700; padding:.3rem .7rem;
  border-radius:999px; background:var(--surface-2); border:1px solid var(--line); font-size:.92rem; }
.timer.urgent{ background:var(--err-l); color:var(--err); border-color:var(--err); }

/* -------------------------------------------------------------- FLASHCARDS */
.fc-shell{ max-width:620px; margin:0 auto; }
.fc{
  perspective:1400px; height:280px; margin:1.2rem 0; cursor:pointer;
}
.fc-inner{ position:relative; width:100%; height:100%; transition:transform .55s; transform-style:preserve-3d; }
.fc.flip .fc-inner{ transform:rotateY(180deg); }
.fc-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--r); border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; padding:1.6rem; text-align:center; box-shadow:var(--sh);
}
.fc-face .lbl{ position:absolute; top:.8rem; left:1rem; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); font-weight:650; }
.fc-face.front{ font-size:1.3rem; font-weight:650; }
.fc-face.back{ transform:rotateY(180deg); background:var(--brand-l); font-size:1.05rem; }
.fc-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.fc-actions .btn{ flex-direction:column; gap:.1rem; padding:.6rem; font-size:.86rem; }
.fc-actions .btn small{ font-weight:400; font-size:.72rem; opacity:.8; }

/* ------------------------------------------------------------------- PRIX */
.plan{ display:flex; flex-direction:column; }
.plan.pop{ border-color:var(--brand); box-shadow:var(--sh-l); position:relative; }
.plan.pop::after{
  content:"Le plus choisi"; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:var(--brand-ink); font-size:.72rem; font-weight:700;
  padding:.15rem .7rem; border-radius:999px; white-space:nowrap;
}
.plan .price{ font-size:2rem; font-weight:750; color:var(--ink); line-height:1.1; margin:.4rem 0 .1rem; }
.plan ul{ list-style:none; padding:0; margin:1rem 0; flex:1; }
.plan li{ padding-left:1.5rem; position:relative; margin-bottom:.45rem; font-size:.93rem; }
.plan li::before{ content:"\2713"; position:absolute; left:0; color:var(--brand); font-weight:700; }

/* ---------------------------------------------------------------- PAIEMENT */
.duree-choix{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:1rem 0 .8rem; }
.duree{
  display:flex; flex-direction:column; gap:.15rem; text-align:left;
  padding:.7rem .8rem; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--surface); cursor:pointer; transition:.15s; min-height:44px;
}
.duree:hover{ border-color:var(--brand); }
.duree.on{ border-color:var(--brand); background:var(--brand-l); }
.duree .d-lib{ font-weight:650; font-size:.92rem; }
.duree .d-prix{ font-size:1.05rem; font-weight:750; color:var(--brand); }
.duree .d-eco{ font-size:.72rem; color:var(--accent); font-weight:600; }

.recap{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.7rem .9rem; border-radius:var(--r-s); background:var(--surface-2);
  margin-bottom:.2rem;
}
.recap strong{ font-size:1.25rem; }

/* --- moyens de paiement manuels --- */
.rappel{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--brand-l); border-radius:var(--r-s); padding:.8rem 1rem; margin:.8rem 0 .2rem;
}
.rappel .montant{ font-size:1.5rem; font-weight:750; color:var(--brand); white-space:nowrap; }
.rappel .ref{ font-size:.8rem; color:var(--ink-2); text-align:right; line-height:1.35; }
.rappel .ref strong{ color:var(--ink); word-break:break-all; }

.moyen{
  border:1px solid var(--line); border-radius:var(--r-s);
  padding:.8rem .9rem; margin-bottom:.6rem; background:var(--surface);
}
.moyen-tete{ display:flex; align-items:center; gap:.5rem; font-size:1rem; }
.moyen-tete .ico{ font-size:1.15rem; }
.moyen-aide{ margin:.25rem 0 .5rem; }
.moyen-valeur{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:var(--surface-2); border-radius:6px; padding:.5rem .7rem;
}
.moyen-valeur .et{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:700; width:100%;
}
.moyen-valeur .v{
  flex:1; min-width:0; font-family:ui-monospace, "Consolas", monospace;
  font-size:.95rem; font-weight:600; user-select:all;
  /* On coupe aux espaces, jamais au milieu d'un groupe de chiffres : un IBAN
     tronqué en « 2434 1 / 46 » se recopie de travers. */
  overflow-wrap:break-word; word-break:normal;
}

.pay-stripe{ margin-bottom:.55rem; }
.lien-discret{ padding:0; font-size:.82rem; font-weight:500;
  color:var(--ink-2); text-decoration:underline; }
.lien-discret:hover{ color:var(--brand); background:none; }
.pay-paypal{
  background:#ffc439; color:#0d2e5c; border-color:#e5ac2f;
  font-weight:750; margin-bottom:.55rem;
}
.pay-paypal:hover{ filter:brightness(1.04); }

/* ------------------------------------------------------------- FORMULAIRES */
.field{ margin-bottom:.9rem; }
.field label{ display:block; font-size:.87rem; font-weight:600; color:var(--ink-2); margin-bottom:.3rem; }
.field input, .field select, .field textarea{
  width:100%; padding:.66rem .8rem; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--surface); min-height:44px;
}
.field input:focus, .field select:focus{ border-color:var(--brand); }
.note{ padding:.8rem 1rem; border-radius:var(--r-s); font-size:.9rem; margin:.8rem 0; }
.note.ok{ background:var(--ok-l); color:var(--ok); }
.note.err{ background:var(--err-l); color:var(--err); }
.note.info{ background:var(--brand-l); color:var(--brand); }
.note.warn{ background:var(--warn-l); color:var(--warn); }

/* ------------------------------------------------------------------ MODALE */
.modal-bg{
  position:fixed; inset:0; background:rgba(10,22,25,.55); backdrop-filter:blur(2px);
  z-index:100; display:grid; place-items:center; padding:1rem; overflow-y:auto;
}
.modal{
  background:var(--surface); border-radius:var(--r); width:100%; max-width:440px;
  padding:1.5rem; box-shadow:var(--sh-l); max-height:92vh; overflow-y:auto;
}
.modal.lg{ max-width:680px; }
.modal-x{ float:right; border:none; background:none; font-size:1.5rem; line-height:1;
  cursor:pointer; color:var(--ink-3); padding:0 .2rem; }

/* ------------------------------------------------------------------ SCHEMA */
.schema{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem; margin:1.4rem 0; }
.schema figcaption{ font-size:.84rem; color:var(--ink-2); margin-top:.6rem; }
.schema h4{ font-size:.86rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }

.sv-txt{ font-family:inherit; font-size:13px; fill:var(--ink); font-weight:600; }
.sv-small{ font-size:11.5px; font-weight:500; fill:var(--ink-2); }
.sv-int{ font-size:10.5px; fill:var(--ink-2); font-weight:500; }
.sv-warn{ fill:var(--accent); font-weight:600; }
.sv-lead{ stroke:var(--ink-3); stroke-width:1; fill:none; }
.sv-lead-fill{ fill:var(--ink-3); }
.sv-stroke{ fill:none; stroke:var(--ink-2); stroke-width:1.6; }
.sv-sep{ stroke:var(--ink-2); stroke-width:1.4; stroke-dasharray:5 4; }

.sv-cyto{ fill:var(--surface-2); }
.sv-membrane{ fill:none; stroke:var(--brand); stroke-width:3; }
.sv-membrane2{ fill:none; stroke:var(--brand); stroke-width:1.4; opacity:.6; }
.sv-noyau{ fill:var(--brand-l); }
.sv-nucleole{ fill:var(--brand); opacity:.35; }
.sv-chromatine{ fill:none; stroke:var(--brand); stroke-width:1.6; opacity:.7; }
.sv-mito{ fill:var(--accent-l); }
.sv-crete{ fill:none; stroke:var(--accent); stroke-width:1.6; }
.sv-re{ fill:none; stroke:var(--ink-2); stroke-width:1.6; }
.sv-ribo{ fill:var(--brand); stroke:none; }
.sv-golgi{ fill:none; stroke:var(--ok); stroke-width:2.4; }
.sv-vesicule{ fill:var(--ok); opacity:.45; stroke:none; }
.sv-lyso{ fill:var(--warn-l); }

.sv-coeur{ fill:var(--surface-2); stroke:var(--ink-2); stroke-width:2; }
.sv-cloison{ stroke:var(--ink-2); stroke-width:3; }
.sv-cav-bleu{ fill:var(--bleu); opacity:.22; stroke:var(--bleu); stroke-width:1.6; }
.sv-cav-rouge{ fill:var(--rouge); opacity:.22; stroke:var(--rouge); stroke-width:1.6; }
.sv-cav-txt{ font-size:12.5px; font-weight:700; fill:var(--ink); }
.sv-valve{ stroke:var(--ink); stroke-width:2.6; stroke-dasharray:7 4; }
.sv-nodal{ fill:var(--accent); }
.sv-flux-bleu{ stroke:var(--bleu); stroke-width:3.4; fill:none; }
.sv-flux-rouge{ stroke:var(--rouge); stroke-width:3.4; fill:none; }
.sv-bleu-fill{ fill:var(--bleu); }
.sv-rouge-fill{ fill:var(--rouge); }
.sv-jaune-fill{ fill:var(--jaune); }

.sv-epiderme{ fill:var(--brand-l); }
.sv-derme{ fill:var(--accent-l); }
.sv-hypoderme{ fill:var(--warn-l); }
.sv-surface{ fill:none; stroke:var(--ink-2); stroke-width:2; }
.sv-poil{ fill:none; stroke:var(--ink); stroke-width:2.4; }
.sv-follicule{ fill:none; stroke:var(--ink-2); stroke-width:1.6; }
.sv-bulbe{ fill:var(--ink-2); opacity:.3; }
.sv-glande{ fill:var(--ok); opacity:.4; }
.sv-glande2{ fill:none; stroke:var(--ok); stroke-width:2.4; }
.sv-canal{ fill:none; stroke:var(--ok); stroke-width:1.8; }
.sv-vaisseau{ fill:none; stroke:var(--rouge); stroke-width:2.2; }
.sv-vaisseau2{ fill:none; stroke:var(--bleu); stroke-width:2.2; }
.sv-adipo circle{ fill:var(--warn); opacity:.22; stroke:var(--warn); stroke-width:1.2; }

.sv-colonne{ fill:var(--surface-2); stroke:var(--ink-2); stroke-width:1.4; }
.sv-rein{ fill:var(--accent-l); }
.sv-rein-int{ fill:none; stroke:var(--accent); stroke-width:1.8; }
.sv-uretere{ fill:none; stroke:var(--jaune); stroke-width:3.4; }
.sv-vessie{ fill:var(--warn-l); }

/* --- schemas du chapitre sante publique --- */
.sv-prev-t{ font-size:15px; font-weight:750; }
.sv-et-t{ font-size:14px; font-weight:750; }
.sv-et-s{ font-size:12.5px; font-weight:700; }
.sv-ex{ font-style:italic; fill:var(--ink-3); }

.sv-prev-1{ fill:var(--ok-l); stroke:var(--ok); stroke-width:1.8; }
.sv-prev-2{ fill:var(--warn-l); stroke:var(--warn); stroke-width:1.8; }
.sv-prev-3{ fill:var(--accent-l); stroke:var(--accent); stroke-width:1.8; }
.sv-frise{ stroke:var(--ink-2); stroke-width:2.4; }
.sv-jalon{ fill:var(--ink-2); }

/* ---------------------------------------------------------------------------
   Schemas d'anatomie : palette generique.
   Plutot qu'une serie de classes par dessin, les schemas des douze systemes
   piochent dans ce jeu commun. Fond clair = surface d'organe, trait = contour,
   ligne coloree = trajet (sang, air, aliment, nerf).
   --------------------------------------------------------------------------- */
.sv-a1{ fill:var(--brand-l); }
.sv-a2{ fill:var(--accent-l); }
.sv-a3{ fill:var(--warn-l); }
.sv-a4{ fill:var(--ok-l); }
.sv-a5{ fill:var(--surface-2); }
.sv-a6{ fill:var(--violet-l); }
.sv-a7{ fill:var(--surface); }

.sv-p1{ fill:var(--brand); }
.sv-p2{ fill:var(--accent); }
.sv-p3{ fill:var(--warn); }
.sv-p4{ fill:var(--ok); }
.sv-p6{ fill:var(--violet); }
.sv-p-rouge{ fill:var(--rouge); }
.sv-p-bleu{ fill:var(--bleu); }
.sv-p-ink{ fill:var(--ink-2); }

.sv-tr-rouge{ fill:var(--rouge); opacity:.26; }
.sv-tr-bleu{ fill:var(--bleu); opacity:.26; }
.sv-tr-violet{ fill:var(--violet); opacity:.22; }

.sv-c{ fill:none; stroke:var(--ink-2); stroke-width:1.6; }
.sv-c-fin{ fill:none; stroke:var(--ink-2); stroke-width:1.05; }
.sv-c-gras{ fill:none; stroke:var(--ink); stroke-width:2.6; }
.sv-c-pointille{ fill:none; stroke:var(--ink-2); stroke-width:1.4; stroke-dasharray:5 4; }

.sv-t-rouge{ fill:none; stroke:var(--rouge); stroke-width:3.2; stroke-linecap:round; }
.sv-t-bleu{ fill:none; stroke:var(--bleu); stroke-width:3.2; stroke-linecap:round; }
.sv-t-jaune{ fill:none; stroke:var(--jaune); stroke-width:3.2; stroke-linecap:round; }
.sv-t-brand{ fill:none; stroke:var(--brand); stroke-width:2.6; stroke-linecap:round; }
.sv-t-violet{ fill:none; stroke:var(--violet); stroke-width:2.6; stroke-linecap:round; }
.sv-t-ok{ fill:none; stroke:var(--ok); stroke-width:2.6; stroke-linecap:round; }
.sv-t-accent{ fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; }

.sv-titre-s{ font-size:12.5px; font-weight:750; fill:var(--ink); }
.sv-num{ font-size:11px; font-weight:750; fill:var(--brand-ink); }
.sv-pastille{ fill:var(--brand); }
.sv-cadre{ fill:var(--surface); stroke:var(--line); stroke-width:1.4; }
.sv-cadre-2{ fill:var(--surface-2); stroke:var(--line); stroke-width:1.4; }

.sv-et1{ fill:var(--brand-l); stroke:var(--brand); stroke-width:2.2; }
.sv-et2{ fill:var(--surface-2); stroke:var(--line); stroke-width:1.6; }
.sv-et3{ fill:var(--brand-l); stroke:var(--brand); stroke-width:2; }
.sv-et4{ fill:var(--surface-2); stroke:var(--ink-2); stroke-width:1.6; }
.sv-lien{ stroke:var(--ink-3); stroke-width:1.8; fill:none; }

.sv-nir rect{ fill:var(--surface-2); stroke:var(--brand); stroke-width:1.8; }
.sv-nir rect.sv-nir-cle{ fill:var(--warn-l); stroke:var(--warn); }
.sv-nir-num{ font-size:22px; font-weight:750; fill:var(--ink); letter-spacing:.06em; }
.sv-accolade{ stroke:var(--brand); stroke-width:2.4; }
.sv-accolade-2{ stroke:var(--warn); }

/* ------------------------------------------------------------------ DIVERS */
footer.foot{ border-top:1px solid var(--line); margin-top:3rem; padding:2rem 0 2.5rem;
  color:var(--ink-2); font-size:.9rem; background:var(--surface); }
footer.foot a{ color:var(--ink-2); }
.foot-cols{ display:grid; gap:1.4rem; }
@media (min-width:700px){ .foot-cols{ grid-template-columns:2fr 1fr 1fr; } }

.empty{ text-align:center; padding:3rem 1rem; color:var(--ink-2); }
.empty .big{ font-size:2.4rem; margin-bottom:.5rem; }

.tabs{ display:flex; gap:.3rem; border-bottom:1px solid var(--line); margin-bottom:1.4rem; overflow-x:auto; }
.tabs button{
  border:none; background:none; padding:.6rem .9rem; cursor:pointer; font-weight:600;
  color:var(--ink-2); border-bottom:2px solid transparent; white-space:nowrap; min-height:44px;
}
.tabs button.on{ color:var(--brand); border-bottom-color:var(--brand); }

.crumb{ font-size:.86rem; color:var(--ink-3); margin-bottom:.6rem; }
.crumb button{ border:none; background:none; color:var(--brand); cursor:pointer; padding:0; font:inherit; }

.lock-wall{ text-align:center; padding:2.4rem 1.2rem; background:var(--surface-2);
  border:1px dashed var(--line); border-radius:var(--r); }

.err-list li{ margin-bottom:.7rem; }

@media print{
  header.top, footer.foot, .no-print{ display:none !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border-color:#ccc; }
}

/* ---------------------------------------------------------------------------
   MENUS DÉROULANTS DU PROGRAMME
   Modules, chapitres à sous-parties (1.3, 3.3…) et sections de la page
   Programme. Le petit chevron pivote quand le menu est ouvert.
   --------------------------------------------------------------------------- */
details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }
.chevron{
  /* bien visible : c'est le seul indice qu'on peut dérouler */
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--brand-l); color:var(--brand); font-size:1rem; line-height:1;
  flex:0 0 auto; transition:transform .2s;
}
details[open] > summary .chevron{ transform:rotate(180deg); }

/* le module */
details.module > summary.module-head{
  cursor:pointer; align-items:center; min-height:44px;
  padding:.35rem .5rem; margin:0 0 .5rem -.5rem; border-radius:var(--r-s);
}
details.module > summary.module-head:hover{ background:var(--surface-2); }
details.module > summary .chevron{ margin-left:auto; }
details.module:not([open]){ margin-bottom:.4rem; }
details.module:not([open]) > summary.module-head{ margin-bottom:0; }

/* le chapitre à sous-parties : une carte, qui prend toute la largeur une fois ouverte */
details.deroulant > summary.item{ cursor:pointer; }
details.deroulant > summary .chevron{ align-self:center; margin-left:.3rem; }
details.deroulant[open]{ grid-column:1 / -1; }
details.deroulant[open] > summary.item{ border-color:var(--brand); }
.deroulant-corps{
  margin-top:.6rem; padding:.7rem; border:1px dashed var(--line);
  border-radius:var(--r); background:var(--surface-2);
}

/* la grande section de la page Programme */
details.section-deroulante{
  margin-top:1.6rem; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
details.section-deroulante > summary{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:1rem 1.1rem; min-height:44px; cursor:pointer; border-radius:var(--r);
}
details.section-deroulante > summary:hover{ background:var(--surface-2); }
details.section-deroulante .sd-titre{ font-size:1.25rem; font-weight:720; }
details.section-deroulante > summary .chevron{ margin-left:auto; }
.sd-corps{ padding:0 1.1rem 1rem; }


/* ---------------------------------------------------------------------------
   LECTURE À VOIX HAUTE
   Un petit lecteur sous le titre de chaque partie de fiche (voir lecture.js).
   --------------------------------------------------------------------------- */
.lecteur{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin:-.05rem 0 .95rem; }
.lecteur button{
  display:inline-flex; align-items:center; gap:.38rem; min-height:38px; padding:.3rem .8rem;
  border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:.86rem; font-weight:650; cursor:pointer; line-height:1.1;
  transition:background .15s, color .15s, border-color .15s;
}
.lecteur button:hover{ border-color:var(--brand); color:var(--brand-d); }
.lecteur svg{ width:15px; height:15px; flex:0 0 auto; }
.lecteur .lec-lire{ background:var(--brand-l); border-color:transparent; color:var(--brand-d); }
.lecteur.joue .lec-lire{ background:var(--brand); color:var(--brand-ink); }
.lecteur .lec-boucle[aria-pressed="true"]{ background:var(--accent-l); border-color:transparent; color:var(--accent); }
.lecteur .lec-vitesse{ min-width:54px; justify-content:center; font-variant-numeric:tabular-nums; }
.lecteur .lec-duree{ font-size:.78rem; color:var(--ink-3); }
.lecteur .lec-barre{ display:none; flex:1 1 100%; height:4px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.lecteur.actif .lec-barre{ display:block; }
.lecteur .lec-barre i{ display:block; height:100%; width:0; background:var(--brand); border-radius:999px; transition:width .25s linear; }
.sec.en-lecture > h3{ border-bottom-color:var(--brand); }
@media (max-width:380px){ .lecteur .lec-boucle .lec-txt{ display:none; } }
@media print{ .lecteur{ display:none !important; } }

/* ---------------------------------------------------------------------------
   RAPPELS DE RÉVISION (Mon compte)
   --------------------------------------------------------------------------- */
.rappels .interrupteur{ display:flex; align-items:center; gap:.6rem; min-height:44px; margin:0 0 .5rem; cursor:pointer; font-weight:600; }
.rappels .interrupteur input{ width:22px; height:22px; margin:0; accent-color:var(--brand); flex:0 0 auto; }
.rappels .lbl{ display:block; font-size:.87rem; font-weight:600; color:var(--ink-2); margin-bottom:.3rem; }
.rappels .jours{ display:flex; gap:.35rem; flex-wrap:wrap; }
.rappels .jours label.jour{ display:block; position:relative; margin:0; cursor:pointer; }
.rappels .jour input{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; }
.rappels .jour span{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-weight:700;
}
.rappels .jour input:checked + span{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.rappels .jour input:focus-visible + span{ outline:3px solid var(--brand); outline-offset:2px; }
.rappels-actions{ display:flex; flex-wrap:wrap; gap:.45rem; }