/* ===========================================================
   reviser-dscg.fr · Design system (nouvelle DA)
   Réutilise les noms de variables existants (--accent, --text…)
   pour rester compatible avec assets/theme.js
   =========================================================== */
:root{
  --accent:#2950a8; --accent2:#1f3f82;
  --ink:#0F1B33; --encre:#0F1B33;
  --bg:#f5f6fb; --card:#ffffff; --card2:#f1f4fa;
  --text:#202a44; --heading:#0F1B33; --muted:#5b657a; --line:#e4e8f2;
  --ok:#0E8A66; --okbg:#e7f6f0; --warn:#b45309; --warnbg:#fbf0e2; --bad:#C0392B; --badbg:#fbeae8;
  --shadow:0 1px 3px rgba(15,27,51,.07),0 10px 30px rgba(15,27,51,.07);
  --shadow-strong:0 18px 50px rgba(15,27,51,.20);
  --radius:14px; --radius-lg:20px;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
[data-theme="dark"]{
  --accent:#6d92d6; --accent2:#93b0e3;
  --ink:#0b1326; --encre:#e9edf7;
  --bg:#0b101d; --card:#141b2d; --card2:#1b2338;
  --text:#dfe5f2; --heading:#f1f4fb; --muted:#97a3bd; --line:#27314e;
  --ok:#46d18b; --okbg:#10301f; --warn:#fbbf24; --warnbg:#34280f; --bad:#f0776f; --badbg:#3a1c1a;
  --shadow:0 1px 3px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.35);
  --shadow-strong:0 18px 50px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
img{max-width:100%}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
#root{min-height:100vh;overflow-x:clip}

/* keyframes */
@keyframes rvDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,3%) scale(1.06)}100%{transform:translate(0,0) scale(1)}}
@keyframes rvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes rvCue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:1}}
@keyframes rvPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes rvBeacon{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}}
@keyframes rvFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* reveal on scroll, one-shot animation (transitions get restart-pinned in some runtimes) */
.rv-hide{opacity:0}
.rv-rise{animation:rvFadeUp .7s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.rv-hide,.rv-rise{opacity:1!important;animation:none!important;transform:none!important}}

/* shared atoms */
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-serif)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,5vw,40px)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:13px 22px;font-weight:700;font-size:.96rem;cursor:pointer;border:1.5px solid transparent;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;font-family:var(--font-sans)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 20%,transparent)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.15)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--heading)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ===== Sticky top ===== */
.topstick{position:sticky;top:0;z-index:80}
.session{background:var(--ink);color:#fff}
.session .wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px clamp(16px,5vw,40px);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em}
.session .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:rvPulse 2s ease-in-out infinite}
.session b{color:#fff;font-weight:600}.session .j{color:var(--accent);font-weight:600}
.session .x{position:absolute;right:clamp(12px,4vw,28px);background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:1rem;line-height:1;padding:4px}
.hdr{background:color-mix(in srgb,var(--card) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:18px;padding:11px clamp(16px,5vw,40px)}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand .wm{font-family:var(--font-serif);font-weight:600;font-size:1.28rem;letter-spacing:-.01em;color:var(--heading);line-height:1.05}
.brand .wm b{color:var(--accent);font-weight:600}
.brand .wm .fr{font-family:var(--font-mono);font-size:.82rem;font-weight:400;color:var(--muted)}
.brand .tag{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.dnav{display:flex;align-items:center;gap:2px;margin-left:auto}
.dnav a{padding:9px 13px;border-radius:9px;font-weight:600;font-size:.92rem;color:var(--muted);transition:.15s}
.dnav a:hover{color:var(--accent)}
.dnav a.active{color:var(--accent)}
.navdd{position:relative;display:flex;align-items:center}
.navdd-trig{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:9px;font-weight:600;font-size:.92rem;color:var(--muted);background:none;border:none;cursor:pointer;font-family:var(--font-sans);transition:.15s}
.navdd-trig:hover{color:var(--accent)}
.navdd-trig.active{color:var(--accent)}
.navdd-caret{font-size:.7rem;transition:transform .2s;display:inline-block}
.navdd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-strong);padding:7px;display:flex;flex-direction:column;gap:2px;z-index:90}
.navdd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.navdd-menu a{padding:10px 12px;border-radius:9px;color:var(--text);transition:.15s}
.navdd-menu a:hover{background:var(--card2)}
.navdd-menu-grouped{min-width:270px}
.navdd-group+.navdd-group{margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.navdd-group-title{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 12px 4px}
.icbtn{flex:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--heading);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;transition:.15s}
.icbtn:hover{border-color:var(--accent)}
.authslot{display:inline-flex;align-items:center;gap:8px}
.hmenu-btn{display:none}
/* Menu mobile : feuille ancree SOUS l'en-tete, avec son propre defilement.
   Avant le 2026-07-27 il s'ouvrait en flux normal et depassait l'ecran (903 px pour 812) :
   les dernieres rubriques etaient inatteignables. --rv-hdr-h est mesuree a l'ouverture. */
.mmenu{position:fixed;left:0;right:0;top:var(--rv-hdr-h,62px);z-index:120;
  max-height:calc(100dvh - var(--rv-hdr-h,62px));overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
.mmenu.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.mmenu nav{display:flex;flex-direction:column;gap:2px;padding:10px clamp(16px,5vw,40px) max(18px,env(safe-area-inset-bottom))}
.mmenu a{display:block;padding:14px 8px;border-bottom:1px solid var(--line);font-weight:600;color:var(--text);font-family:var(--font-serif);font-size:1.12rem}
.mmenu nav > a:last-of-type{border-bottom:none}
.mmenu-bd{position:fixed;inset:0;z-index:119;background:rgba(15,27,51,.44);opacity:0;pointer-events:none;transition:opacity .18s ease}
.mmenu-bd.open{opacity:1;pointer-events:auto}
body.mmenu-lock{overflow:hidden}
@media(max-width:1024px){
  .dnav,.hdr .authslot .desk{display:none}
  .hmenu-btn{display:inline-flex}
}
@media(min-width:1025px){.mmenu,.mmenu-bd{display:none}}
@media(prefers-reduced-motion:reduce){.mmenu,.mmenu-bd{transition:none}}

/* ===== Footer ===== */
.foot{background:var(--card);border-top:1px solid var(--line)}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:36px;padding:clamp(48px,6vw,72px) 0 44px}
.foot h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:600}
.foot .lnk{display:flex;flex-direction:column;gap:11px}
.foot .lnk a{font-size:.92rem;color:var(--text)}
.foot .lnk a:hover{color:var(--accent)}
.foot .legal{border-top:1px solid var(--line);padding:20px 0;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.foot .legal a{font-size:.8rem;color:var(--muted)}.foot .legal a:hover{color:var(--text)}
.foot .net{border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:10px 18px;font-family:var(--font-mono);font-size:.82rem;font-weight:500}

/* ===== Chat widget ===== */
.chatdock{position:fixed;bottom:26px;right:26px;z-index:200;display:flex;flex-direction:row-reverse;align-items:center;gap:11px}
.chatbtn{position:relative;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;padding:0;flex:none;background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.6) 0%,rgba(255,255,255,.16) 32%,transparent 58%),linear-gradient(148deg,color-mix(in srgb,var(--accent) 74%,#fff) 0%,var(--accent) 44%,color-mix(in srgb,var(--accent) 68%,var(--ink)) 100%);box-shadow:inset 0 0 0 .5px color-mix(in srgb,#fff 26%,transparent),0 3px 9px -2px color-mix(in srgb,var(--accent) 58%,transparent);transition:transform .18s ease}
/* La pulsation vit sur un pseudo-element : l'animation joue sur box-shadow, elle ecraserait
   sinon le relief et l'ombre portee de la pastille elle-meme. */
.chatbtn::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:rvBeacon 2s ease-in-out infinite}
.chatbtn:hover{transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){.chatbtn::after{animation:none}.chatbtn{transition:none}}
.chatlbl{font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:.04em;color:var(--heading);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 11px;box-shadow:var(--shadow);white-space:nowrap;opacity:0;transform:translateX(8px);transition:.2s;pointer-events:none}
.chatdock:hover .chatlbl{opacity:1;transform:translateX(0)}
.chatpanel{position:fixed;right:18px;bottom:64px;width:min(370px,calc(100vw - 36px));max-height:min(540px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-strong);z-index:201;border:1px solid var(--line);background:var(--bg)}
.chatpanel .head{background:var(--ink);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex:none}
.chatpanel .head .t{font-family:var(--font-serif);font-weight:600;font-size:1.08rem;color:#fff;display:flex;align-items:center;gap:8px}
.chatpanel .head .s{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;color:rgba(255,255,255,.58);margin-top:3px}
.chatpanel .msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.bub{max-width:90%;font-size:.88rem;line-height:1.55;padding:11px 13px;border-radius:12px}
.bub.ia{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--text)}
.bub.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.bublbl{font-family:var(--font-mono);font-size:.58rem;color:var(--muted);margin-top:4px;padding-left:4px}
.chatpanel .foot2{border-top:1px solid var(--line);padding:11px 12px;display:flex;gap:9px;background:var(--card);flex:none}
.chatpanel input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:.88rem;font-family:var(--font-sans);background:var(--bg);color:var(--text);outline:none;min-width:0}
.chatpanel input:focus{border-color:var(--accent)}
.chatpanel .send{flex:none;background:var(--ink);color:#fff;border:none;border-radius:10px;padding:10px 15px;font-weight:700;font-size:1rem;cursor:pointer;font-family:var(--font-mono)}
.bub.typing{display:inline-flex;align-items:center;gap:5px;padding:13px 14px}
.bub.typing span{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;animation:rvDotBounce 1.1s ease-in-out infinite}
.bub.typing span:nth-child(2){animation-delay:.16s}
.bub.typing span:nth-child(3){animation-delay:.32s}
@keyframes rvDotBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-6px);opacity:1}}

/* ===== Page generic ===== */
.page{max-width:880px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(16px,5vw,40px) 80px}
.page h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.02em;color:var(--heading);margin:0 0 14px;text-wrap:balance}
.page h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.6rem);color:var(--heading);margin:30px 0 10px}
.page p{line-height:1.7;margin:0 0 14px;color:var(--text)}
.page .lead{font-size:1.12rem;color:var(--muted);margin-bottom:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.note{background:var(--warnbg);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn);border-radius:12px;padding:12px 16px;font-size:.9rem;margin:0 0 20px}

/* utilities */
.lift{transition:.2s}
.lift:hover{transform:translateY(-4px);border-color:var(--accent)}
.hero-aside{display:flex}
@media(max-width:1024px){.hero-aside{display:none}}


/* Justification responsive (ajout 2026-07-16) : la prose justifiee repasse en alignement
   gauche sous 640px, ou le justify cree des « rivieres » de blancs sur colonne etroite.
   Desktop (>640px) inchange. Couvre la classe .rv-prose (ATSEM) et le justify inline (comptable). */
@media(max-width:640px){
  .rv-prose p, p[style*="justify"], .page p, .prose p, .prose li, .oral-lead, .oral-subject-text p, .oral-subject-q p, .oral-bilan-body p, .qz-lead, .qz-exp, .reviser-lead, .ec-enonce-b p, .ec-appr, .faq-a p, .fic-lead, .fic-free-p, .rj-lead, .emp-lead{text-align:left!important}
  .rv-doc-btn{padding-top:13px!important;padding-bottom:13px!important}   /* boutons documents : cible tactile plus haute */
  .foot .lnk a{padding:7px 0}                           /* liens de pied de page : zone tactile elargie */
  .brand .tag{font-size:.66rem}                         /* micro-etiquette sous le logo : un peu moins minuscule */
}
@media(max-width:560px){
  /* En-tete compact sur telephone : garantit que le bouton MENU (hamburger) reste toujours a
     l'ecran et cliquable. Cause du bug : .brand{flex:none} + gap 18px poussaient les icones hors
     champ sur ecran etroit -> on ne voyait plus que le toggle jour/nuit. */
  .hdr .wrap{gap:8px;padding-left:13px;padding-right:13px}
  .brand{gap:8px;flex:0 1 auto;min-width:0}            /* la marque peut retrecir (ellipsis) au lieu de pousser les boutons dehors */
  .brand>span{min-width:0}
  .brand .tag{display:none}                             /* tagline masquee sur telephone : marque sur une ligne, compacte */
  .brand .wm{font-size:1.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .icbtn{flex:none}                                     /* les icones (theme + menu) ne retrecissent jamais */
}


/* Panneau « points forts et points faibles » sur telephone.
   Sur 375 px, le libelle du theme, la barre, le pourcentage et le statut ne tiennent pas sur une
   ligne : le libelle etait ecrase et le diagnostic devenait illisible, sur un panneau qui compte
   jusqu'a 18 lignes. On passe donc sur deux niveaux : le theme au-dessus, les indicateurs dessous. */
@media(max-width:640px){
  .rv-theme-row{flex-wrap:wrap;row-gap:4px;padding:7px 0 !important;min-height:44px}
  .rv-theme-row>span:first-child{flex:1 1 100% !important;white-space:normal;line-height:1.35}
  .rv-theme-row>span:nth-child(2){flex:1 1 auto !important;width:auto !important}
  .rv-theme-row>span:nth-child(3),
  .rv-theme-row>span:nth-child(4){flex:none}
}

/* Avis : seules les cinq premieres lettres du nom restent lisibles. */
.rv-av-flou{filter:blur(3.5px);-webkit-user-select:none;user-select:none;pointer-events:none}

/* ===== Chapo de section : tient sur une seule ligne des que l'ecran le permet ===============
   En dessous de 1060px il se replie normalement. Au-dessus, « nowrap » + une taille bornee par
   la largeur reellement disponible (1180px de colonne moins 88px de gouttieres) : si la phrase
   est trop longue elle RETRECIT au lieu de deborder. --r = largeur de la phrase en em, mesuree
   au navigateur et majoree de 4 %. Recalculer --r si on reecrit la phrase. */
.rv-chapo{font-size:var(--fs,1.08rem);line-height:1.6;color:var(--muted);margin:0;max-width:680px;text-wrap:pretty}
@media (min-width:1060px){
  .rv-chapo{max-width:none;white-space:nowrap;
            font-size:min(var(--fs,1.08rem),calc((min(100vw,1180px) - 88px) / var(--r,55)))}
}

/* ===== Titre de section : tient sur une ligne des que l'ecran le permet ======================
   Meme principe que .rv-chapo : au-dessus de 1060px on interdit le retour a la ligne et on borne
   la taille par la largeur reellement disponible, si bien qu'un titre plus long RETRECIT au lieu
   de deborder. En dessous, il se replie normalement, avec son plafond de 680px.
   --r = largeur du titre en em, mesuree au navigateur et majoree de 4 %. */
.rv-titre-section{max-width:680px;font-size:clamp(1.9rem,3.7vw,3rem)}
@media (min-width:1060px){
  .rv-titre-section{max-width:none;white-space:nowrap;
    font-size:min(clamp(1.9rem,3.7vw,3rem), calc((min(100vw, 1180px) - 88px) / var(--r,21)))}
}

/* ===== Accroche du bandeau final : une seule ligne des que l'ecran le permet ================
   --r = largeur de la phrase en em, mesuree au navigateur et majoree de 4 %. La recalculer si
   on reecrit la phrase. En dessous de 760px, repli normal avec le plafond d'origine. */
.rv-accroche{max-width:560px;font-size:1.05rem}
@media (min-width:760px){
  .rv-accroche{max-width:none;white-space:nowrap;
    font-size:min(1.05rem, calc((min(100vw, 1180px) - 130px) / var(--r,39.4)))}
}