/* =====================================================================
   MesRevisions.com — habillage de la page d'accueil (2026)
   ---------------------------------------------------------------------
   Cette feuille ne concerne QUE index.html. Elle est chargée APRÈS
   style.css et reprend la main sur la mise en page de l'accueil ;
   toutes les autres pages du site ignorent ce fichier.

   LES COULEURS NE SONT PAS DÉFINIES ICI. Les --o-* viennent de
   style.css : une seule gamme pour tout le site, qu'on éclaircit à un
   seul endroit. Ce fichier ne pose que ce qui lui est propre : les
   formes, les ombres et les quelques teintes d'appoint.

   Parti pris : beaucoup de blanc, des aplats soutenus réservés aux
   boutons et à deux ou trois encarts. Aucun grand bloc sombre.
   ===================================================================== */

:root{
  /* ---- teintes d'appoint ---------------------------------------- */
  /* Le vert n'est plus une teinte d'appoint : il vient de style.css et
     porte une section sur deux. Ces alias restent pour ne pas avoir à
     retoucher le HTML. */
  --mint:var(--g-700);
  --mint-2:var(--g-600);
  --mint-50:var(--g-100);
  --violet:#8a5a3c;

  /* ---- les clairs ------------------------------------------------ */
  --blanc:#ffffff;
  --creme:#fdf9f5;         /* le fond des sections teintées, à peine coloré */
  --texte:var(--ink);
  --texte-doux:var(--muted);
  --trait:#f1e6db;

  /* ---- la bande d'accent (appel final) ---------------------------
     Un dégradé pâle, pas un aplat sombre : le texte y est écrit en
     brun foncé (7,6 de contraste) plutôt qu'en blanc. */
  --bande:var(--g-100);
  --sur-bande:var(--g-900);
  --sur-bande-doux:#3f6b5a;

  /* ---- formes et ombres ------------------------------------------ */
  /* Deux rayons au lieu de quatre : moins de formes différentes à
     l'écran, c'est déjà plus calme. */
  --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:18px;
  /* Trois ombres à peine perceptibles : elles décollent une carte du
     fond, elles ne la font pas flotter. */
  --ombre:0 6px 18px -8px rgba(90,42,18,.10);
  --ombre-douce:0 1px 3px rgba(90,42,18,.05);
  --ombre-orange:none;

  /* ---- typographie et largeur ------------------------------------
     On garde les polices du site — Baloo 2 pour les titres, Inter pour
     le texte — plutôt que d'en importer une de plus. */
  --police:var(--font-body);
  --max:1080px;
  --nav:65px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--blanc)}
body{font-family:var(--police);color:var(--texte);background:var(--blanc);
     line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---------------------------------------------------------------- éléments communs */
.etiquette{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:0.702rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.etiquette.claire{background:var(--o-100);color:var(--o-800)}
/* « sombre » = posée sur une bande de couleur, pas sur du noir */
.etiquette.sombre{background:#fff;color:var(--g-800);
  border:1px solid var(--g-300)}
.etiquette.menthe{background:var(--mint-50);color:var(--g-800)}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:999px;font-weight:700;font-size:0.9rem;
  transition:background .2s,border-color .2s}
/* Un aplat uni, --o-700 : du blanc dessus donne 5,5 de contraste, et la
   même teinte tient aussi bien sur fond blanc que sur fond vert pâle. */
.bouton.plein{background:var(--o-700);color:#fff}
.bouton.plein:hover{background:var(--o-800)}
.bouton.fantome{border:1px solid var(--o-300);color:var(--o-800);background:#fff}
.bouton.fantome:hover{background:var(--o-50);border-color:var(--o-400)}
.bouton.contour{border:1px solid var(--o-300);color:var(--o-800);background:#fff}
.bouton.contour:hover{background:var(--o-50);border-color:var(--o-400)}
.bouton.blanc{background:#fff;color:var(--o-800);border:1px solid var(--o-300)}
.bouton.blanc:hover{background:var(--o-50)}

.titre,.heros h1,.final h2,.case h3,.question summary{font-family:var(--font-head)}
.titre{font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--o-900)}
h2.titre{font-size:clamp(1.8rem,4.14vw,3.06rem)}
/* Un aplat plutôt qu'un dégradé de texte : plus net à l'écran, plus sûr
   à l'impression, et un souci de moins pour les navigateurs anciens. */
.surligne{color:var(--o-700)}
.surligne-menthe{color:var(--g-700)}

.chapeau{color:var(--texte-doux);font-size:clamp(0.9rem,1.35vw,1.035rem);max-width:56ch}
section{position:relative}
.section{padding:clamp(63px,8.1vw,117px) 0}

.entree{opacity:0;transform:translateY(34px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.entree.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .entree{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ---------------------------------------------------------------- barre de navigation */
.barre{position:fixed;top:0;left:0;right:0;z-index:100;padding:13px 0;
  transition:background .3s,backdrop-filter .3s,padding .3s,box-shadow .3s;
  border-bottom:1px solid transparent}
.barre .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.barre.posee{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  padding:8px 0;border-bottom-color:var(--trait);box-shadow:none}
.marque{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1rem;white-space:nowrap;flex:none;
  color:var(--o-900)}
.pastille{width:34px;height:34px;border-radius:12px;
  background:var(--o-700);display:grid;place-items:center}
.pastille svg{width:20px;height:20px}
.liens{display:flex;align-items:center;gap:4px;flex:none}
.liens a{white-space:nowrap}
.liens a{padding:8px 14px;border-radius:999px;font-size:0.81rem;font-weight:600;
  color:var(--texte-doux);transition:color .2s,background .2s}
.liens a:hover{color:var(--o-800);background:var(--o-100)}
@media (max-width:900px){.liens{display:none}}

/* ---- le coin droit de la barre ----
   Son contenu vient de commun.js, avec les classes du site actuel
   (.btn, .navlink, .user-chip). On les rhabille ici plutôt que de
   toucher à commun.js : les 374 autres pages continuent d'utiliser
   le même fichier sans s'en apercevoir. */
.coin-barre{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.coin-barre .btn{padding:10px 20px;border-radius:999px;font-size:0.81rem;font-weight:700;
  border:0;background:var(--o-700);color:#fff;transition:background .2s}
.coin-barre .btn:hover{background:var(--o-800)}
.coin-barre .btn.alt{background:#fff;color:var(--o-800);box-shadow:none;
  border:1px solid var(--o-300)}
.coin-barre .btn.alt:hover{background:var(--o-50);box-shadow:none}
.coin-barre .user-chip{background:var(--o-100);color:var(--o-900);
  border:1px solid var(--o-200);border-radius:999px;padding:5px 13px 5px 5px;
  display:flex;align-items:center;gap:7px;font-weight:600;font-size:0.774rem}
.coin-barre .user-chip .av{width:23px;height:23px;border-radius:50%;
  background:var(--o-700);color:#fff;
  display:grid;place-items:center;font-size:0.72rem;font-weight:800}
.coin-barre .navlink{color:var(--texte-doux);font-size:0.81rem;font-weight:600;
  padding:8px 13px;border-radius:999px}
.coin-barre .navlink:hover{color:var(--o-800);background:var(--o-100)}
/* Sur un téléphone, « Connexion » et « Essai gratuit » ne tiennent pas
   à côté du nom écrit en toutes lettres. On garde les deux boutons —
   cacher « Connexion » enfermerait dehors un abonné — et c'est le mot
   « MesRevisions » qui s'efface : le logo suffit à identifier le site. */
@media (max-width:620px){
  .coin-barre .navlink{display:none}
  .coin-barre .btn{padding:9px 14px;font-size:0.738rem}
  .barre .wrap{padding:0 14px}
}
@media (max-width:480px){
  .marque{font-size:0;gap:0}
  .coin-barre{gap:6px}
  .coin-barre .btn{padding:8px 12px;font-size:0.702rem}
}

/* ---------------------------------------------------------------- bandeau d'accueil */
/* Un aplat crème, sans dégradé ni grain : c'est le premier écran, et
   c'est là qu'on gagne le plus à ne rien mettre. */
.heros{background:var(--o-50);
  color:var(--texte);padding:135px 0 81px;overflow:hidden;position:relative}
/* Le grain servait à casser l'aspect plastique d'un dégradé. Sans
   dégradé, il n'a plus d'objet. La règle est neutralisée plutôt que
   supprimée, pour pouvoir la rappeler d'une ligne. */
.heros::after{content:none}
/* Les halos colorés flottants sont retirés : trois taches qui dérivent
   en permanence derrière le texte, c'est exactement ce qu'« épuré »
   exclut. Les balises restent dans le HTML mais ne dessinent plus rien —
   remettre « display:block » ici suffirait à les rappeler. */
.halo{display:none}

.heros .wrap{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:54px;align-items:center}
.heros h1{font-size:clamp(2.34rem,5.58vw,4.23rem);font-weight:900;letter-spacing:-.04em;
  line-height:1.02;margin:20px 0 20px;color:var(--o-900)}
.heros .chapeau{color:var(--texte-doux);font-size:clamp(0.9rem,1.44vw,1.062rem)}
.actions{display:flex;gap:13px;flex-wrap:wrap;margin:31px 0 23px}
.note-heros{font-size:0.765rem;color:var(--texte-doux);opacity:.85}

.preuves{display:flex;gap:20px;flex-wrap:wrap;margin-top:40px;
  padding-top:30px;border-top:1px solid var(--trait)}
.preuve b{display:block;font-size:clamp(1.35rem,2.34vw,1.89rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;
  color:var(--o-800)}
.preuve span{font-size:0.72rem;color:var(--texte-doux);font-weight:500}

/* le téléphone */
.scene-tel{position:relative;display:grid;place-items:center;min-height:470px}
.telephone{position:relative;width:212px;aspect-ratio:9/19;border-radius:42px;
  background:#2a201a;padding:8px;
  box-shadow:0 10px 26px -14px rgba(90,42,18,.28);
  animation:flotte 7s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(-1deg)}}
.telephone .ecran{width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:var(--o-50);position:relative}
.telephone video,.telephone img.remplacement{width:100%;height:100%;object-fit:cover}
.encoche{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:86px;height:20px;background:#2a201a;border-radius:0 0 14px 14px;z-index:3}

.vignette{position:absolute;background:#fff;border-radius:18px;
  padding:12px 15px;box-shadow:var(--ombre);
  display:flex;align-items:center;gap:10px;border:1px solid var(--trait)}
.vignette .rond{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:15px}
.vignette b{display:block;font-size:0.747rem;font-weight:700;color:var(--texte);line-height:1.25}
.vignette span{font-size:0.648rem;color:var(--texte-doux)}
#vig1{top:3%;left:-6%;animation:flotte2 6s ease-in-out infinite}
#vig2{bottom:22%;right:-8%;animation:flotte2 6s ease-in-out infinite .9s}
#vig3{bottom:-2%;left:-4%;animation:flotte2 6s ease-in-out infinite 1.8s}
/* La quatrieme pastille annonce les cours animés : elle occupe le seul
   angle encore libre, en haut à droite du téléphone. */
#vig4{top:11%;right:-9%;animation:flotte2 6s ease-in-out infinite 2.7s;max-width:196px}
@keyframes flotte2{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

@media (max-width:980px){
  .heros{padding:119px 0 63px}
  .heros .wrap{grid-template-columns:1fr;gap:43px}
  .scene-tel{min-height:auto;margin-top:10px}
  .telephone{width:202px}
  #vig1{left:-6%}#vig2{right:-4%}#vig3{left:-2%;bottom:-4%}#vig4{right:-4%;top:7%}
}
@media (max-width:420px){
  #vig1,#vig3{left:-2%}#vig2,#vig4{right:0}#vig4{max-width:172px}
  .vignette{padding:9px 12px}
}

/* ------------------------------------------------- l'ordinateur portable */
/* Le titre de la section « la méthode » à gauche, un ordinateur portable
   à droite dans lequel tourne un cours de géométrie. Le châssis est
   entièrement en CSS : aucune image de décor à charger, et il reste net
   quelle que soit la définition de l'écran.

   Le noir est celui du téléphone du bandeau d'accueil (#2a201a), pour que
   les deux appareils de la page appartiennent visiblement au même monde. */
.tete-methode{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,448px);
  gap:44px;align-items:center;
}
.tete-methode > .entree{max-width:680px}

.portable{margin:0;width:100%}
.portable-ecran{
  background:#2a201a;border-radius:18px;padding:13px 13px 15px;
  box-shadow:0 18px 34px -22px rgba(42,32,26,.45);
}
.portable-dalle{
  aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#000;
}
.portable-dalle video{width:100%;height:100%;object-fit:cover;display:block}

/* Le socle : une barre un peu plus large que l'écran, avec l'encoche
   d'ouverture au milieu. C'est ce qui fait lire « portable » plutôt que
   « moniteur ». */
.portable-socle{
  position:relative;height:13px;width:calc(100% + 28px);margin:0 -14px;
  background:#3a2e26;border-radius:0 0 12px 12px;
  display:flex;align-items:flex-start;justify-content:center;
}
.portable-socle .encoche{
  display:block;width:76px;height:5px;border-radius:0 0 6px 6px;background:#201913;
}

@media (max-width:980px){
  .tete-methode{grid-template-columns:1fr;gap:34px}
  .portable{max-width:448px;margin:0 auto}
}

/* ---------------------------------------------------------------- bandeau défilant */
/* Vert pâle : le bandeau d'accueil est crème orangé, et deux teintes
   chaudes l'une sous l'autre ne se distinguaient pas. */
.ruban{background:var(--g-50);padding:28px 0;overflow:hidden;position:relative;z-index:2;
  border-top:1px solid var(--g-200);border-bottom:1px solid var(--g-200)}
.piste{display:flex;gap:13px;width:max-content;padding:4px 0}
.piste.gauche{animation:defile 46s linear infinite}
.piste.droite{animation:defile 52s linear infinite reverse;margin-top:12px}
@keyframes defile{to{transform:translateX(-50%)}}
.ruban:hover .piste{animation-play-state:paused}
.jeton{display:flex;align-items:center;gap:9px;padding:11px 19px;border-radius:999px;
  background:#fff;border:1px solid var(--g-200);box-shadow:none;
  color:var(--texte);font-weight:600;font-size:0.855rem;white-space:nowrap}
.jeton i{font-style:normal;font-size:0.99rem}
/* Une pastille colorée de temps en temps, alternativement orange et
   verte : le ruban donne à voir les deux couleurs de la charte. Du blanc
   sur --o-700 ou --g-700 dépasse 5,4 de contraste. */
.jeton.vedette{background:var(--o-700);border-color:transparent;color:#fff;box-shadow:none}
.jeton.vedette-vert{background:var(--g-700);border-color:transparent;color:#fff;box-shadow:none}
.ruban::before,.ruban::after{content:"";position:absolute;top:0;bottom:0;width:117px;z-index:3;
  pointer-events:none}
.ruban::before{left:0;background:linear-gradient(90deg,var(--g-50),transparent)}
.ruban::after{right:0;background:linear-gradient(270deg,var(--g-50),transparent)}

/* ---------------------------------------------------------------- grille bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:54px}
.case{background:var(--creme);border-radius:var(--r-l);padding:31px;position:relative;
  overflow:hidden;transition:border-color .25s;
  border:1px solid var(--trait)}
.case:hover{border-color:var(--o-300)}
.case h3{font-size:1.215rem;font-weight:800;letter-spacing:-.02em;margin-bottom:10px;
  color:var(--o-900)}
.case p{color:var(--texte-doux);font-size:0.855rem}
.case .icone{width:47px;height:47px;border-radius:16px;display:grid;place-items:center;
  font-size:22px;margin-bottom:20px}
.c-large{grid-column:span 4}
.c-moyen{grid-column:span 2}
.c-demi{grid-column:span 3}
/* La dernière case occupe toute la largeur : sans cela elle restait
   seule sur sa ligne, avec quatre colonnes vides à sa droite. */
.c-plein{grid-column:span 6;display:flex;align-items:center;gap:26px}
.c-plein .icone{margin-bottom:0;flex:none}
.c-plein h3{margin-bottom:4px}
@media (max-width:900px){.c-plein{grid-column:span 2}}
@media (max-width:560px){.c-plein{grid-column:span 1;flex-direction:column;align-items:flex-start;gap:0}
  .c-plein .icone{margin-bottom:20px}}
/* Deux cases teintées pour rythmer la grille — teintées, pas sombres :
   le texte y reste écrit en brun foncé, comme partout ailleurs. */
.case.menthe{background:var(--g-100);border-color:var(--g-200)}
.case.menthe h3{color:var(--g-900)}
.case.menthe p{color:#3f6b5a}
.case.orange{background:var(--o-100);border-color:var(--o-200)}
.case.orange h3{color:var(--o-900)}
.case.orange p{color:#7a4a2c}
.mini-quiz{margin-top:22px;display:grid;gap:7px}
.mini-quiz .q{font-size:0.792rem;color:#3f6b5a;margin-bottom:4px}
.mini-quiz .r{padding:10px 14px;border-radius:10px;font-size:0.81rem;font-weight:600;
  background:#fff;border:1px solid var(--g-200);color:#3f6b5a}
.mini-quiz .r.juste{background:var(--g-700);border-color:var(--g-700);color:#fff}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .c-large,.c-demi{grid-column:span 2}
  .c-moyen{grid-column:span 1}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .c-large,.c-demi,.c-moyen{grid-column:span 1}
  .case{padding:23px}
}

/* aperçu de cours dans la grande case */
.apercu-cours{margin-top:24px;background:#fff;border-radius:var(--r-m);padding:20px;
  border:1px solid var(--trait);box-shadow:none}
.ligne-cours{display:flex;align-items:center;gap:11px;padding:10px 0;
  border-bottom:1px dashed var(--trait);font-size:0.81rem}
.ligne-cours:last-child{border:0}
.puce{width:23px;height:23px;border-radius:9px;display:grid;place-items:center;
  font-size:12px;font-weight:800;flex:none}
.puce.ok{background:var(--mint-50);color:var(--g-800)}
.puce.att{background:var(--o-100);color:var(--o-800)}
.barre-prog{flex:1;height:6px;border-radius:99px;background:var(--o-100);overflow:hidden}
.barre-prog i{display:block;height:100%;border-radius:99px;
  background:var(--o-600)}

.detail-niveau{max-width:774px;margin:0 auto;background:#fff;border-radius:var(--r-l);
  padding:32px;border:1px solid var(--trait);box-shadow:none}
.detail-tete{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:22px}
.detail-tete b{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;color:var(--o-800)}
.detail-tete span{color:var(--texte-doux);font-size:0.855rem}
.matieres{display:flex;flex-wrap:wrap;gap:8px}
.matiere{background:var(--o-25);border:1px solid var(--trait);border-radius:999px;
  padding:8px 15px;font-size:0.783rem;font-weight:600;display:flex;align-items:center;gap:6px}

/* ---------------------------------------------------------------- chiffres */
.chiffres{background:
    var(--g-100);
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);overflow:hidden}
.chiffres .halo{display:none}   /* la lumière vient du dégradé de fond */
.grille-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  position:relative;z-index:2}
.chiffre{text-align:center;padding:31px 14px;border-radius:var(--r-m);
  background:#fff;border:1px solid var(--trait);box-shadow:none;
  transition:border-color .25s}
.chiffre:hover{border-color:var(--o-300)}
.chiffre b{display:block;font-size:clamp(1.89rem,3.96vw,2.97rem);font-weight:900;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--o-800)}
.chiffre span{display:block;margin-top:10px;font-size:0.765rem;color:var(--texte-doux);
  font-weight:500}
@media (max-width:760px){.grille-chiffres{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- tarifs */
.tarifs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  max-width:828px;margin:49px auto 0}
.offre{background:#fff;border:1px solid var(--trait);border-radius:var(--r-xl);padding:34px;
  position:relative;transition:border-color .25s}
.offre:hover{border-color:var(--o-300)}
.offre .prix{color:var(--o-900)}
/* La formule mise en avant se distingue par un fond crème et un liseré
   plus marqué : ni aplat foncé, ni dégradé. */
.offre.vedette{border-color:var(--o-400);background:var(--o-50);box-shadow:none}
.offre.vedette .prix{color:var(--o-900)}
.ecusson{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--o-700);color:#fff;
  padding:7px 20px;border-radius:999px;font-size:0.684rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  box-shadow:none}
.prix{font-size:3.15rem;font-weight:900;letter-spacing:-.045em;line-height:1;margin:16px 0 5px}
.prix small{font-size:0.81rem;font-weight:600;letter-spacing:0;color:var(--texte-doux)}
.offre.vedette .prix small{color:#7a4a2c}
.liste{list-style:none;margin:23px 0 27px;display:grid;gap:11px}
.liste li{display:flex;gap:10px;align-items:flex-start;font-size:0.846rem}
.liste i{font-style:normal;color:var(--mint);font-weight:900;flex:none}
.offre.vedette .liste i{color:var(--g-700)}
.offre .bouton{width:100%}
@media (max-width:760px){.tarifs{grid-template-columns:1fr}.offre{padding:32px}}

/* ---------------------------------------------------------------- questions */
.questions{max-width:684px;margin:40px auto 0}
.question{background:#fff;border:1px solid var(--trait);border-radius:var(--r-m);
  margin-bottom:12px;overflow:hidden;box-shadow:none}
.question summary{padding:20px 23px;font-weight:700;font-size:0.918rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
  color:var(--o-900)}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+";font-size:1.35rem;font-weight:400;color:var(--o-600);
  transition:transform .3s;flex:none}
.question[open] summary::after{transform:rotate(45deg)}
.question p{padding:0 23px 22px;color:var(--texte-doux);font-size:0.855rem}

/* ---------------------------------------------------------------- appel final */
.final{background:var(--bande);color:var(--sur-bande);overflow:hidden;text-align:center;
  border-top:1px solid var(--g-200)}
.final .wrap{position:relative;z-index:2}
.final .titre,.final h2{color:var(--g-900)}
.final .chapeau{color:var(--sur-bande-doux)}
.final h2{font-size:clamp(1.89rem,4.5vw,3.24rem);font-weight:900;letter-spacing:-.04em;
  line-height:1.03;margin-bottom:20px}
.bloc-qr{display:inline-flex;align-items:center;gap:23px;margin-top:48px;
  padding:18px 27px 18px 18px;border-radius:var(--r-l);background:#fff;
  border:1px solid var(--g-300);text-align:left;transition:border-color .25s}
.bloc-qr:hover{border-color:var(--g-500)}
.bloc-qr .carre{display:block;width:101px;height:101px;background:#fff;border-radius:16px;padding:7px;flex:none}
.bloc-qr .carre img{width:100%;height:100%}
.bloc-qr b{display:block;font-size:0.918rem;margin-bottom:5px}
.bloc-qr span{font-size:0.774rem;color:var(--sur-bande-doux)}
@media (max-width:520px){.bloc-qr{flex-direction:column;text-align:center;gap:18px;padding:22px}}

/* ---------------------------------------------------------------- pied de page */
.pied.footer{background:var(--creme);color:var(--texte-doux);padding:36px 22px 50px;
  border-top:1px solid var(--trait);font-size:0.765rem;text-align:center}
.pied.footer p{margin:0}
.pied.footer a{color:var(--o-800);text-decoration:none;font-weight:600}
.pied.footer a:hover{color:var(--o-600);text-decoration:underline}

/* =====================================================================
   BLOCS PROPRES À CETTE VERSION DE L'ACCUEIL
   ===================================================================== */

/* ---------------------------------------------------------------- bandeau promo */
.bandeau-promo{background:var(--o-100);
  color:var(--o-900);text-align:center;font-size:.86rem;font-weight:600;
  padding:11px 22px;border-bottom:1px solid var(--o-300);
  position:relative;z-index:99;margin-top:var(--nav)}
.bandeau-promo a{color:var(--o-800);font-weight:800;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
/* Le bandeau pousse le contenu : sans cette règle, le haut du bandeau
   d'accueil passerait dessous. */
.bandeau-promo ~ .heros{padding-top:54px}

/* ---------------------------------------------------------------- les élèves */
.trio-eleves{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.carte-eleve{margin:0;background:#fff;border:1px solid var(--trait);border-radius:var(--r-l);
  padding:20px 20px 26px;box-shadow:none;text-align:center;
  display:flex;flex-direction:column;
  transition:border-color .25s}
.carte-eleve:hover{border-color:var(--o-300)}
.carte-eleve img{width:100%;height:auto;max-width:300px;margin:0 auto}
/* marge automatique : les trois légendes s'alignent sur la même ligne
   même si une illustration est un peu moins haute que les autres. */
.carte-eleve figcaption{margin-top:auto;padding-top:14px;font-size:.84rem;color:var(--texte-doux);line-height:1.5}
.carte-eleve figcaption b{display:block;font-family:var(--font-head);font-size:1.02rem;
  font-weight:800;color:var(--o-900);margin-bottom:5px}
@media (max-width:900px){.trio-eleves{grid-template-columns:1fr 1fr}
  .carte-eleve:last-child{grid-column:span 2;max-width:440px;margin-inline:auto}}
@media (max-width:620px){.trio-eleves{grid-template-columns:1fr}
  .carte-eleve:last-child{grid-column:span 1}}

/* ---------------------------------------------------------------- les trois étapes */
/* « demarrage » et « pas », et non « etapes » et « etape » : style.css
   décore déjà ces deux noms-là avec un compteur CSS, qui ajoutait une
   deuxième pastille numérotée par-dessus la nôtre. */
.demarrage{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.pas{background:#fff;border:1px solid var(--trait);border-radius:var(--r-l);padding:30px;
  position:relative;box-shadow:none;
  transition:border-color .25s}
.pas:hover{border-color:var(--o-300)}
.pas .numero{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--o-700);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;margin-bottom:18px}
.pas h3{font-family:var(--font-head);font-size:1.12rem;font-weight:800;
  color:var(--o-900);margin-bottom:9px}
.pas p{color:var(--texte-doux);font-size:.86rem}
@media (max-width:820px){.demarrage{grid-template-columns:1fr}}

.prix-avant{font-size:1.15rem;font-weight:700;color:var(--texte-doux);
  text-decoration:line-through;text-decoration-thickness:2px;margin-right:6px;
  vertical-align:middle}

/* ---------------------------------------------------------------- bulle d'annonce
   Une pastille centrée sous la barre de navigation, et non une bande
   pleine largeur : elle annonce sans occuper toute la hauteur d'écran
   utile sur un téléphone. */
.bulle-promo{display:flex;justify-content:center;position:relative;z-index:3;
  padding:0 16px;margin:-46px 0 30px}
.bulle-promo a{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  justify-content:center;padding:9px 20px;border-radius:999px;
  background:#fff;border:1px solid var(--o-300);color:var(--o-900);
  font-size:.83rem;font-weight:600;line-height:1.35;text-align:center;
  transition:border-color .2s,background .2s}
.bulle-promo a:hover{background:var(--o-50);border-color:var(--o-400)}
.bulle-promo .ico{font-size:1rem;line-height:1}
.bulle-promo .jusqua{color:#7a4a2c;font-weight:500}
.bulle-promo .montant{background:var(--o-700);
  color:#fff;border-radius:999px;padding:3px 12px;font-size:.88rem;white-space:nowrap}
@media (max-width:560px){
  .bulle-promo a{font-size:.78rem;padding:8px 15px;gap:7px}
  .bulle-promo .jusqua{width:100%;order:3}
}

/* ---- variante « photo » des cartes élèves ----
   Une photographie ne se traite pas comme une illustration : elle porte
   son propre fond, on la recadre donc en bandeau plutôt que de la poser
   au milieu d'une carte blanche. */
.carte-eleve.photo img{width:100%;max-width:none;aspect-ratio:3/4;object-fit:cover;
  border-radius:calc(var(--r-l) - 12px);display:block}
.carte-eleve.photo{padding:12px 12px 24px}
.carte-eleve.photo figcaption{padding:16px 8px 0}