/* ===========================================================
   reviser-dec.fr · Design system (nouvelle DA)
   Réutilise les noms de variables existants (--accent, --text…)
   pour rester compatible avec assets/theme.js
   =========================================================== */
:root{
  --accent:#9E2233; --accent2:#7a1f30;
  --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:#cf6b7b; --accent2:#d98a98;
  --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:1rem;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:1rem;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}
@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}
  .brand>span{min-width:0}
  .brand .tag{display:none}
  .brand .wm{font-size:1.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .icbtn{flex:none}
}                         /* micro-etiquette sous le logo : un peu moins minuscule */
}

/* 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)))}
}

/* ===== 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)))}
}