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


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

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

/* ===== Hero ATSEM : apercu du module de QCM =====
   Les valeurs sont donnees en exemple ; le bloc est marque aria-hidden.
   L'etat AU REPOS est l'etat FINAL (fill-mode backwards) : si une animation ne demarre pas,
   les barres restent pleines et le compteur affiche son nombre, jamais un ecran vide. */
.atv-qcm{position:relative;background:#fff;border:1px solid #E6EAF2;border-radius:22px;
  box-shadow:0 34px 64px -26px rgba(35,49,77,.34);padding:20px 22px;animation:atvFloat 7s ease-in-out infinite}
.atv-qcm-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.atv-qcm-k{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#2F76E0}
.atv-qcm-n{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;color:#23314D;margin-top:3px}
.atv-qcm-n span{color:#8A94A8;font-weight:500;font-size:.85rem}
.atv-chrono{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;
  color:#23314D;background:#F1F4FA;border-radius:999px;padding:6px 11px}
.atv-dot{width:7px;height:7px;border-radius:50%;background:#2F76E0;flex:none;
  box-shadow:0 0 0 0 rgba(47,118,224,.45);animation:atvPulse 2.4s ease-out infinite}
.atv-prog{height:5px;border-radius:999px;background:#F1F4FA;overflow:hidden;margin-bottom:16px}
.atv-prog-f{display:block;height:100%;width:35%;border-radius:999px;background:#2F76E0;
  transform-origin:left center;animation:atvFill 1.1s .3s cubic-bezier(.2,.8,.25,1) backwards}
.atv-q{font-size:.94rem;line-height:1.45;color:#23314D;font-weight:600;margin:0 0 14px}
.atv-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:7px 0;border-radius:11px;
  border:1px solid #E6EAF2;font-size:.85rem;color:#55617A}
.atv-opt-k{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#F1F4FA;font-size:.7rem;font-weight:800;color:#8A94A8}
.atv-opt.juste{border-color:#1FA36B;background:#E4F6EC;color:#23314D;font-weight:600;
  animation:atvJuste .5s 1.25s ease-out backwards}
.atv-opt.juste .atv-opt-k{background:#1FA36B;color:#fff}
.atv-opt-v{margin-left:auto;color:#1FA36B;font-weight:800}
.atv-corr{margin-top:14px;display:flex;align-items:center;gap:9px;font-size:.8rem;color:#55617A;
  animation:atvApparait .5s 1.5s ease-out backwards}
.atv-corr b{color:#23314D}
.atv-corr-i{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#E4F6EC;color:#1FA36B;font-weight:800;font-size:.72rem}
@property --atv-n{syntax:'<integer>';initial-value:0;inherits:false}
.atv-badge{position:absolute;left:-46px;bottom:20px;background:#fff;border:1px solid #E6EAF2;border-radius:15px;
  box-shadow:0 18px 34px -14px rgba(35,49,77,.34);padding:11px 14px;display:flex;align-items:center;gap:11px;
  animation:atvFloat 7s .8s ease-in-out infinite}
.atv-check{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;
  font-size:.95rem;background:#E4F6EC;color:#1FA36B}
.atv-badge-n{font-weight:700;font-size:.88rem;color:#23314D;font-variant-numeric:tabular-nums}
.atv-badge-s{font-size:.72rem;color:#8A94A8}
.atv-count{--atv-n:46;counter-reset:atv var(--atv-n);animation:atvCount 1.8s .5s ease-out backwards}
.atv-count::after{content:counter(atv)}
@keyframes atvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes atvFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes atvCount{from{--atv-n:0}to{--atv-n:46}}
@keyframes atvJuste{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes atvApparait{from{opacity:0}to{opacity:1}}
@keyframes atvPulse{0%{box-shadow:0 0 0 0 rgba(47,118,224,.45)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(max-width:1200px){.atv-badge{left:-20px}}
@media(max-width:980px){
  .atv-hero{grid-template-columns:1fr !important;min-height:auto !important;padding:28px 22px 26px !important}
  .atv-qcm-wrap{justify-self:center !important;margin:0 auto;max-width:400px}
  /* Entre 820 et 980 px, la photo reste visible mais discrete. En dessous de 820 px, une
     regle plus ancienne d'atsem-home.css la masque entierement : c'est voulu, un decor
     derriere du contenu empile n'apporte rien sur un telephone. */
  .atv-photo{opacity:.2 !important;height:min(44vh,320px) !important;top:42% !important}
  .atv-badge{left:-6px}
}
@media(max-width:420px){
  .atv-qcm{padding:16px 18px}
  .atv-opt{padding:9px 10px;font-size:.8rem}
  .atv-badge{left:0;bottom:-12px;padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){
  .atv-qcm,.atv-badge,.atv-dot{animation:none}
  .atv-prog-f,.atv-count,.atv-opt.juste,.atv-corr{animation-duration:1ms;animation-delay:0s}
}

/* Largeur VISIBLE de la fenetre, barre de defilement exclue. « 100vw » l'inclut, ce qui faisait
   deborder les bandeaux pleine largeur de quelques pixels et rendait la page scrollable
   horizontalement. La variable est tenue a jour par un script du gabarit ; sans lui, on retombe
   sur 100vw, c'est-a-dire le comportement d'avant. */
:root{--vw-utile:100vw}
.rv-pleine-largeur{width:var(--vw-utile) !important;margin-left:calc(50% - var(--vw-utile) / 2) !important}