/* ===========================================================
   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}
/* Garde-fou mobile : aucun élément (info-bulle, absolu décalé) ne doit élargir la page.
   clip, pas hidden : ne crée pas de conteneur de défilement, position:sticky reste intact. */
body{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)}
/* hover:hover : au tactile, l'etat survole COLLE apres le tap (bouton fige souleve). */
@media(hover:hover){.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.15)}}
.btn-accent{background:var(--accent);color:#fff}
@media(hover:hover){.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.38rem;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)}
/* 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}
/* Accès direct à l'espace révision : bouton primaire en tête du menu mobile. */
.mmenu a.mmenu-cta{margin:10px 0 12px;padding:15px 18px;border-bottom:none;border-radius:100px;background:var(--accent);color:#fff;text-align:center;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 30%,transparent)}
/* Le même lien, mis en avant dans la navigation desktop. */
.dnav a.navlink-primary{color:var(--accent);font-weight:700}
.mmenu-bd{position:fixed;inset:0;z-index:119;background:rgba(15,27,51,.44);opacity:0;pointer-events:none;transition:opacity .18s ease;touch-action:none;overscroll-behavior:none}
.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}}

/* ===== Mobile : lisibilité et cibles tactiles ===== */
@media(max-width:1024px){
  /* iOS zoome toute la page au focus d'un champ < 16px (et la laisse zoomée) :
     on impose le minimum. !important requis, plusieurs champs ont la taille en style inline. */
  input,select,textarea{font-size:max(16px,1em)!important}
  /* Pastille de chat de 22px : zone de tap étendue à 48px sans changer le visuel. */
  .chatbtn::before{content:'';position:absolute;inset:-13px;border-radius:50%}
  /* Liens du pied de page : hauteur de tap correcte au pouce. */
  .foot .lnk a,.foot .legal a{padding:6px 0}
  /* Hamburger et toggle theme (40px) : zone de frappe portee a 48px. */
  .icbtn{position:relative}
  .icbtn::before{content:'';position:absolute;inset:-4px}
}
/* 1025-1199px : la nav desktop complete ne tient pas (repli des libelles sur deux lignes),
   on la compresse au lieu de basculer si tot sur le hamburger. */
@media(min-width:1025px) and (max-width:1199px){
  .dnav a,.navdd-trig{padding:9px 8px;font-size:.92rem}
  .brand .tag{display: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:calc(26px + env(safe-area-inset-bottom));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:calc(64px + env(safe-area-inset-bottom));width:min(370px,calc(100vw - 36px));max-height:min(540px,calc(100dvh - 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;overflow-wrap:anywhere;word-break:break-word}
.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}
@media(hover:hover){.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 */
  /* Modale de connexion/inscription : le panneau marketing passe SOUS le formulaire,
     sinon l'utilisateur mobile doit defiler la modale avant de voir les champs. */
  .auth-modal-grid > :first-child{order:2}
}
/* 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.
   (Bloc longtemps IMBRIQUE par accident dans le @media 640px ci-dessus : sorti a la racine.) */
@media(max-width:560px){
  .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}
}

/* 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','Fredoka Repli Arial','Fredoka Repli Roboto','Fredoka Repli Noto','Fredoka Repli DejaVu',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}

/* Pastille « i » d'information (supplement oral, prix...) : STYLEE ICI, plus seulement par
   reviser-pourquoi-oral.js. Le script n'injectait sa feuille qu'au PREMIER BESOIN (ouverture
   d'une bulle) : le marqueur s'affichait donc d'abord en « i » nu, puis devenait rond une fois
   le style pose. Le selecteur porte sur l'ATTRIBUT, present des le HTML servi, donc la pastille
   est ronde au tout premier rendu, sans attendre le JS. */
[data-rv-why],.rv-why{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:4px;border-radius:50%;border:1px solid currentColor;font-size:9px;font-weight:700;font-style:normal;line-height:1;vertical-align:super;cursor:pointer;opacity:.75;font-family:var(--font-sans),system-ui,sans-serif;-webkit-user-select:none;user-select:none}
/* Zone de frappe etendue (~36px) sans changer le visuel de 14px : au doigt, un tap rate
   a cote de la pastille cochait la case de l'option payante voisine. ::after = glyphe 'i'. */
[data-rv-why]::before,.rv-why::before{content:'';position:absolute;inset:-11px}
[data-rv-why]:empty::after{content:'i'}
[data-rv-why]:hover,[data-rv-why]:focus-visible,.rv-why:hover,.rv-why:focus-visible{opacity:1}