/* ===========================================================
   concours-atsem.com · Design system (nouvelle DA)
   Réutilise les noms de variables existants (--accent, --text…)
   pour rester compatible avec assets/theme.js
   =========================================================== */
:root{
  --accent:#0E8A66; --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)}
/* Ressources en 3 groupes (Informations essentielles / Outils pratiques / Blog), comme les sites compta. */
.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}
.mmenu{display:none;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.mmenu nav{display:flex;flex-direction:column;gap:2px;padding:10px clamp(16px,5vw,40px) 18px}
.mmenu a{padding:13px 8px;border-bottom:1px solid var(--line);font-weight:600;color:var(--text);font-family:var(--font-serif);font-size:1.15rem}
@media(max-width:1024px){
  .dnav,.hdr .authslot .desk{display:none}
  .hmenu-btn{display:inline-flex}
  .mmenu.open{display:block}
}

/* ===== Footer ===== */
.foot{background:var(--card);border-top:1px solid var(--line)}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,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{width:22px;height:22px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;padding:0;flex:none;animation:rvBeacon 2s ease-in-out infinite}
.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}}


/* ===== Texte justifié (règle de la maison, 2026-07-17) ==========================
   Toute la PROSE du site est justifiée : c'est la règle par défaut, y compris pour les pages
   à venir. Jusqu'ici chaque page redéclarait « text-align: justify » dans son propre <style>,
   d'où des oublis (bilan d'oral, module d'oral, planning, contact, blog...).
   On vise les conteneurs de prose et PAS les libellés courts, boutons, pastilles ou colonnes
   étroites, où la justification créerait des lézardes disgracieuses. */
.prose p,
.oral-bilan-body p,
.ec-dossier-txt p,
.qz-txt p,
.rv-prose p { text-align: justify; }

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