/* =====================================================================
   Mesrevisions.be — 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}
/* Logo : le nom en Spectral, le « .com » en violet (charte Le Cahier). */
.marque .nom{font-family:'Spectral',Georgia,serif;font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.marque .pt{color:#6D28D9}
.marque .pastille{background:#E2641C;border-radius:50%}
/* Bloc de chiffres de l'accueil (« Le Cahier ») : grands nombres en
   Spectral, séparés par de fins traits, 2 par ligne sur mobile. */
.chiffres-cahier{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.chiffres-cahier li{text-align:center;padding:26px 18px;border-right:1px solid #E3D9C8}
.chiffres-cahier li:last-child{border-right:0}
.chiffres-cahier b{display:block;font-family:'Spectral',Georgia,serif;font-weight:600;font-size:clamp(2.1rem,3.6vw,2.6rem);color:var(--ink,#1C1B18);line-height:1}
.chiffres-cahier span{display:block;margin-top:9px;font-size:.93rem;color:var(--muted,#6B6459);line-height:1.4}
@media(max-width:720px){
  .chiffres-cahier{grid-template-columns:repeat(2,1fr)}
  .chiffres-cahier li:nth-child(2n){border-right:0}
  .chiffres-cahier li:nth-child(-n+2){border-bottom:1px solid #E3D9C8}
}
.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)}
/* Sous 900px (téléphone), on masque les liens texte de la barre mais on GARDE la pastille Support 7j/7 : c'est le point de contact, il doit rester à portée de pouce dans l'en-tête. */
@media (max-width:900px){
  .liens{display:flex;gap:0}
  .liens a:not(.support7){display:none}
  .liens a.support7{margin-left:0}
}

/* ---- la pastille « Support 7j/7 » ----
   Verte, et non orange comme les six liens voisins : la couleur doit
   dire « c'est ouvert » plutôt que « c'est un lien de plus ». Le
   contraste du texte sur ce fond est de 11,4 — très au-dessus du seuil
   de 4,5 exigé, ce qui compte pour une mention de cette taille.

   Le cadre reste visible au survol au lieu de disparaître : une
   pastille qui perd sa bordure quand on la touche donne l'impression
   d'un bouton qui s'enfonce dans la page. */
.liens a.support7{display:inline-flex;align-items:center;gap:6px;
  margin-left:6px;padding:6px 12px;font-weight:700;
  background:var(--g-100);color:var(--g-900);
  border:1px solid rgba(29,110,82,.2)}
.liens a.support7:hover{background:var(--g-200);color:var(--g-900);
  border-color:rgba(29,110,82,.45)}
.liens a.support7 svg{width:18px;height:18px;flex:none;color:var(--g-700)}
.liens a.support7 b{font-weight:800}
/* Sous 960 pixels, la barre devient trop étroite pour le mot
   « Support » : il s'efface, et le dessin avec « 7j/7 » suffit à se
   faire comprendre — l'infobulle dit le reste. Mesuré : au-delà, le
   texte complet tient jusqu'à 940, et les liens eux-mêmes disparaissent
   à 900. */
@media (max-width:960px){
  .liens a.support7{font-size:0;gap:0;padding:6px 10px}
  .liens a.support7 b{font-size:0.81rem}
  .liens a.support7 svg{margin-right:5px}
}

/* ---- 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 */
/* (bandeau des matières « ruban » retiré — accueil v2) */

/* ---------------------------------------------------------------- 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(3,minmax(0,1fr));gap:22px;
  max-width:1180px;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:1040px){.tarifs{grid-template-columns:1fr;max-width:460px}
  .offre-ebook{order:3}}
@media (max-width:760px){.tarifs{grid-template-columns:1fr}.offre{padding:32px}}

/* ---------------------------------------------------------------- ebooks */
.offre-ebook{border-color:var(--g-300)}
.offre-ebook:hover{border-color:var(--g-500)}
.offre-ebook .bouton{cursor:pointer;font:inherit;font-weight:800}
.fenetre-ebook{border:0;border-radius:var(--r-xl);padding:0;margin:auto;position:fixed;inset:0;height:fit-content;overflow:hidden;width:fit-content;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 30px 70px -20px rgba(40,20,10,.45);color:var(--texte)}
.fenetre-ebook[open]{display:flex;align-items:stretch}
.fenetre-ebook::backdrop{background:rgba(28,20,14,.55)}
.fenetre-ebook form{padding:30px 30px 24px;display:grid;gap:14px;position:relative;width:min(560px,calc(100vw - 32px));box-sizing:border-box}
.fenetre-ebook h2{margin:4px 0 0;font-size:1.45rem;letter-spacing:-.02em}
.fenetre-ebook .etiquette{justify-self:start}
.fenetre-ebook .fermer{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--o-50);color:var(--o-800);font-size:1.4rem;line-height:1;cursor:pointer}
.fenetre-ebook .fermer:hover{background:var(--o-100)}
.fe-intro{margin:-6px 0 2px;color:var(--texte-doux);font-size:.9rem}
.fe-ligne{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fenetre-ebook label{display:grid;gap:5px;font-size:.82rem;font-weight:700;color:var(--texte)}
.fenetre-ebook input:not([type=checkbox]),.fenetre-ebook select{font:inherit;font-size:.95rem;font-weight:500;
  padding:11px 12px;border:1px solid #e4d6c8;border-radius:10px;background:#fff;color:var(--texte);width:100%;min-width:0}
.fenetre-ebook input:focus,.fenetre-ebook select:focus{outline:2px solid var(--o-500);outline-offset:-1px;border-color:var(--o-500)}
.fenetre-ebook select:disabled{background:#f7f2ed;color:var(--texte-doux)}
.fe-resume{margin:0;padding:10px 13px;border-radius:10px;background:var(--mint-50);color:var(--g-800,#1d4a3a);font-size:.86rem}
.fenetre-ebook .fe-cgv{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:.8rem;line-height:1.5;color:var(--texte-doux)}
.fe-cgv input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--o-700)}
.fe-cgv a{color:var(--o-800);font-weight:700}
.fe-erreur{margin:0;padding:9px 12px;border-radius:10px;background:#fdecea;color:#9b2c22;font-size:.86rem;font-weight:600}
.fenetre-ebook .bouton{width:100%;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:1.02rem}
.fenetre-ebook .bouton[disabled]{opacity:.6;cursor:wait}
.fe-note{margin:0;text-align:center;color:var(--texte-doux);font-size:.76rem}
/* ---- Aperçu « sticker » des 4 premières pages de l'ebook ---- */
.fe-apercu{width:252px;flex:none;background:linear-gradient(180deg,#fbf6ef,#f3ebe0);border-left:1px solid var(--o-200,#f0e2d2);display:flex;flex-direction:column;padding:18px 16px 14px}
.fe-apercu[hidden]{display:none}
.fe-apercu-tete{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.fe-apercu-eti{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--o-600,#c86a28);padding:3px 9px;border-radius:999px}
.fe-apercu-soustitre{margin:0;font-size:.82rem;font-weight:700;color:var(--texte,#3a2c1e)}
.fe-apercu-pages{display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:min(62vh,520px);padding:2px 4px 2px 2px;scrollbar-width:thin}
.fe-apercu-pages img{width:100%;display:block;border-radius:7px;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 16px -8px rgba(40,26,12,.45);background:#fff}
.fe-apercu-pages .fe-apercu-vide{margin:12px 2px;font-size:.82rem;color:var(--texte-doux)}
.fe-apercu-note{margin:10px 2px 0;font-size:.72rem;line-height:1.4;color:var(--texte-doux)}
/* Sous 880px : plus de place à droite, on masque le sticker. */
/* Au format téléphone : pas de place à droite. On met l'aperçu SOUS le
   formulaire, en bande horizontale que l'on fait défiler du doigt. */
@media (max-width:880px){
  .fenetre-ebook[open]{flex-direction:column}
  .fenetre-ebook form{width:min(560px,calc(100vw - 32px))}
  .fe-apercu{width:auto;border-left:0;border-top:1px solid var(--o-200)}
  .fe-apercu-pages{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;
    gap:10px;scroll-snap-type:x mandatory;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
  .fe-apercu-pages img{width:132px;flex:none;scroll-snap-align:start}
}
@media (max-width:520px){.fe-ligne{grid-template-columns:1fr}.fenetre-ebook form{padding:26px 18px 20px}}

/* ---------------------------------------------------------------- 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:linear-gradient(90deg,#6d28d9,#7c3aed);
  color:#fff;text-align:center;font-size:.9rem;font-weight:600;
  padding:12px 22px;border-bottom:none;
  position:relative;z-index:99;margin-top:var(--nav)}
.bandeau-promo b{font-weight:800}
.bandeau-promo a{color:#fff;font-weight:800;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.bandeau-promo .promo-pill{display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:#4c1d95;font-weight:800;padding:3px 11px;border-radius:999px;
  margin-right:5px;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}

/* ---- la même section sur un téléphone ----
   Empilées, les trois cartes faisaient défiler trois photos en pied
   d'écran avant d'arriver à la suite de la page : près de deux mille
   pixels pour trois phrases. On garde LA PREMIÈRE photo, recadrée en
   bandeau, et les trois textes se suivent dessous, séparés d'un filet.
   Le propos est le même, la hauteur est divisée par trois.

   Les deux autres photographies ne sont pas téléchargées pour autant :
   elles portent loading="lazy" et, n'étant jamais affichées, le
   navigateur ne va pas les chercher. C'est autant de données
   économisées sur un forfait mobile.

   Ce bloc est placé APRÈS les règles « .carte-eleve.photo » ci-dessus :
   il faut qu'il l'emporte, et à spécificité égale c'est le dernier qui
   gagne. Ne le remontez pas plus haut dans le fichier. */
@media (max-width:620px){
  .trio-eleves{
    grid-template-columns:1fr;gap:0;margin-top:34px;
    background:#fff;border:1px solid var(--trait);border-radius:var(--r-l);
    padding:12px 12px 22px;
  }
  /* La règle des 900 px étend la dernière carte sur deux colonnes et la
     centre : sur une seule colonne, il faut défaire les deux. */
  .carte-eleve,.carte-eleve:last-child{
    grid-column:span 1;max-width:none;margin-inline:0;
    background:none;border:0;border-radius:0;padding:0;text-align:left;
  }
  .carte-eleve:hover{border-color:transparent}
  .carte-eleve.photo{padding:0}
  /* seule la première photo reste visible */
  .carte-eleve:nth-child(n+2) img{display:none}
  /* en bandeau plutôt qu'en portrait : moins haut, et le regard des
     élèves reste dans le cadre */
  .carte-eleve.photo img{aspect-ratio:4/3;border-radius:14px}
  .carte-eleve figcaption,.carte-eleve.photo figcaption{margin-top:0;padding:15px 4px 0}
  .carte-eleve:nth-child(n+2) figcaption{
    margin-top:15px;border-top:1px solid var(--trait);
  }
}

/* =====================================================================
   ORION sur la page d'accueil — ajouté le 1er octobre 2026.
   Remplace la grille de six cases de la section « la méthode » par
   quatre atouts courts, et ajoute la bande Orion et le bloc photo.
   ===================================================================== */
/* ---------------------------------------------- les quatre atouts courts */
.atouts{
  list-style:none;margin:52px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.atouts li{
  background:#fff;border:1px solid var(--trait);border-radius:18px;
  padding:22px 20px;font-size:.84rem;color:var(--muted);line-height:1.6;
}
.atouts .ic{
  display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
  background:var(--o-100);font-size:19px;margin-bottom:14px;
}
.atouts b{
  display:block;font-family:var(--font-head);font-size:1.02rem;font-weight:800;
  color:var(--o-900);margin-bottom:5px;letter-spacing:-.01em;
}
@media (max-width:900px){ .atouts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .atouts{grid-template-columns:1fr;gap:12px}
  .atouts li{display:grid;grid-template-columns:40px 1fr;gap:0 14px;padding:18px}
  .atouts .ic{margin-bottom:0;grid-row:span 2}
  .atouts b{align-self:center}
}

/* ============================ la bande Orion ============================
   Deuxième bande sombre de la page. Les couleurs néon ne sont lisibles
   que sur ce fond-là : sur blanc, le cyan tombe à 1,77 de contraste.
   Sur #0B0A14 il remonte à 11,1, et le texte courant est en #C9C4E0,
   à 9,8. ------------------------------------------------------------- */
.orion-bande{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(58% 62% at 14% 22%, rgba(168,85,247,.42), transparent 70%),
    radial-gradient(52% 55% at 88% 26%, rgba(0,212,255,.24), transparent 70%),
    radial-gradient(48% 52% at 58% 96%, rgba(255,45,149,.20), transparent 70%),
    var(--nuit);
}
.orion-bande::before,.orion-bande::after{
  content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--neon-violet),var(--neon-magenta),var(--neon-cyan));
  opacity:.8;
}
.orion-bande::before{top:0}
.orion-bande::after{bottom:0}
.orion-bande .wrap{position:relative;z-index:2}

.orion-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:54px;align-items:center}

.etiquette.neon{
  background:rgba(255,255,255,.08);color:#DDD6FE;
  border:1px solid rgba(221,214,254,.28);
}
.orion-titre{
  font-family:var(--font-head);font-weight:800;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(2rem,4.3vw,3.1rem);color:#fff;margin:20px 0 18px;
}
/* Le dégradé du titre, comme dans le bandeau d'accueil. Un navigateur
   qui ne connaît pas background-clip affiche la couleur de repli — un
   titre pâle, jamais un titre invisible. */
.orion-bande .surligne{
  color:var(--neon-cyan);
  background:linear-gradient(100deg,#C4B5FD 0%,var(--neon-magenta) 45%,var(--neon-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .orion-bande .surligne{-webkit-text-fill-color:currentColor}
}
.orion-bande .chapeau{color:#C9C4E0}
.orion-bande .chapeau b{color:#fff}

.orion-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.orion-points li{
  position:relative;padding-left:28px;font-size:.855rem;line-height:1.6;color:#C9C4E0;
}
.orion-points li::before{
  content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--neon-violet),var(--neon-cyan));
}
.orion-points b{color:#fff;font-weight:700}
.orion-bande .actions{margin:32px 0 0}

/* ------------------------------------------------- la conversation témoin */
.orion-chat{
  background:rgba(255,255,255,.055);border:1px solid rgba(221,214,254,.2);
  border-radius:24px;padding:20px;backdrop-filter:blur(2px);
  display:grid;gap:12px;max-width:470px;width:100%;justify-self:end;
}
.orion-chat-tete{display:flex;align-items:center;gap:11px;padding-bottom:14px;
  border-bottom:1px solid rgba(221,214,254,.16);margin-bottom:2px}
.orion-chat-tete b{display:block;font-size:.88rem;color:#fff;line-height:1.2}
.orion-chat-tete span span{font-size:.7rem;color:#8CE8FF}
.orion-pastille{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--neon-violet),var(--neon-cyan));
  color:#0B0A14;font-weight:800;font-size:16px;
}
.orion-chat .bulle{border-radius:16px;padding:13px 16px;font-size:.835rem;line-height:1.62}
.orion-chat .bulle.eleve{
  background:rgba(255,255,255,.1);color:#EDE9FE;border:1px solid rgba(221,214,254,.14);
  border-bottom-right-radius:5px;justify-self:end;max-width:86%;
}
.orion-chat .bulle.orion{
  background:#fff;color:#1E1B2E;border-bottom-left-radius:5px;max-width:94%;
}
.orion-chat .bulle.orion p{margin:0 0 9px}
.orion-chat .bulle.orion p:last-of-type{margin-bottom:0}
.orion-chat .bulle.orion i{font-style:normal;font-weight:700;color:var(--o-700)}
/* « orion-renvoi » et non « source » : style.css utilise deja .source
   pour les citations des cours (encadre serif italique a filet orange).
   Le meme nom ici habillait la pastille en citation. */
.orion-renvoi{
  display:inline-block;margin-top:12px;padding:5px 11px;border-radius:999px;
  background:var(--o-200);color:var(--o-800);font-size:.715rem;font-weight:700;
}
.orion-champ{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:4px;padding:11px 15px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(221,214,254,.18);
  font-size:.785rem;color:#9D96BC;
}
.orion-champ i{font-style:normal;color:var(--neon-cyan);font-size:.9rem}
/* Le bouton appareil photo de la démonstration. Même place et même forme
   que dans le vrai tuteur : à gauche du champ, carré arrondi, contour
   seul. L'élève qui a vu l'accueil le reconnaît sur sa page de cours. */
.orion-appareil{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  border:1px solid rgba(221,214,254,.32);color:#C4B5FD;
}
.orion-appareil svg{width:16px;height:16px;display:block}
.orion-champ span{flex:1;text-align:left}
.orion-envoyer{flex:none}
/* La ligne qui dit, en toutes lettres, ce que fait ce bouton. Elle tient
   dans la hauteur déjà occupée par la colonne de gauche : la bande ne
   grandit pas. */
.orion-indice{
  display:block;margin-top:9px;text-align:center;
  font-size:.73rem;line-height:1.4;color:#B6AFD4;
}
/* Pas d'émoji ici : à cette taille il rend sombre et brouillon, et
   l'appareil photo dessiné juste au-dessus dit déjà la même chose. */

@media (max-width:980px){
  .orion-grille{grid-template-columns:1fr;gap:26px}
  .orion-chat{justify-self:start;max-width:470px;padding:17px;gap:10px}
  /* La ligne « ou photographie ton cours » ajoute une trentaine de pixels.
     On les reprend ici, sur des espacements qui étaient généreux : la bande
     Orion ne gagne pas un pixel de défilement sur un téléphone. */
  .orion-bande .actions{margin-top:22px}
  .orion-indice{margin-top:7px}
}

/* ------------------------------------------------------- la photo du cours */
.orion-photo{background:var(--creme)}

/* Le texte à gauche, un téléphone qui photographie à droite. La règle
   d'or de ce bloc : il ne doit pas être plus haut qu'avant. Le téléphone
   est donc plafonné à la hauteur du texte, et il disparaît sous 860 px —
   empilé, il aurait ajouté près de trois cents pixels de défilement sur
   un mobile, exactement ce qu'on voulait éviter. */
.photo-tete{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:46px;
  align-items:center;max-width:1020px;margin:0 auto;
}
.photo-dire{text-align:left}
.photo-dire .chapeau{max-width:48ch;margin:0;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.62}

.photo-tel{position:relative;height:244px;display:grid;place-items:center}
.tel-cadre{
  position:relative;width:124px;height:230px;border-radius:19px;
  background:#1d1830;padding:5px;transform:rotate(-9deg);
  box-shadow:0 18px 34px -18px rgba(59,7,100,.55),0 0 0 1px rgba(196,181,253,.25);
}
.tel-encoche{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:38px;height:7px;border-radius:0 0 6px 6px;background:#1d1830;z-index:3;
}
.tel-ecran{
  position:relative;width:100%;height:100%;border-radius:13px;overflow:hidden;
  background:#fbf9f2;
}
.tel-page{padding:16px 11px 0}
.tel-page b{display:block;font-size:.5rem;color:#6b6480;margin-bottom:7px}
.tel-page i{display:block;height:3px;border-radius:99px;background:#3a3550;opacity:.45;margin-bottom:6px}
/* Les quatre coins du viseur : c'est ce qui fait lire « il est en train
   de cadrer » plutôt que « il regarde une photo ». */
.tel-coin{position:absolute;width:16px;height:16px;border:2px solid var(--g-600);opacity:.95}
.tel-coin.hg{top:14px;left:12px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.tel-coin.hd{top:14px;right:12px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.tel-coin.bg{bottom:16px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.tel-coin.bd{bottom:16px;right:12px;border-left:0;border-top:0;border-radius:0 0 5px 0}
.tel-balayage{
  position:absolute;left:0;right:0;top:40%;height:26px;
  background:linear-gradient(180deg,transparent,rgba(14,116,144,.38),transparent);
}
.tel-pastille{
  position:absolute;right:6px;bottom:26px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--o-600);color:#fff;border:3px solid var(--creme);
  box-shadow:0 10px 20px -8px rgba(59,7,100,.55);
}
.tel-pastille svg{width:22px;height:22px;display:block}
@media (max-width:860px){
  .photo-tete{grid-template-columns:1fr;max-width:640px;gap:0}
  .photo-tel{display:none}
  .photo-dire{text-align:center}
  .photo-dire .chapeau{margin:0 auto}
}
.photo-pas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.pas-photo{
  background:#fff;border:1px solid var(--trait);border-radius:20px;padding:28px 26px;
  position:relative;
}
.pas-photo .numero{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--o-700);color:#fff;font-family:var(--font-head);font-weight:800;
  font-size:1.05rem;margin-bottom:16px;
}
.pas-photo h3{font-size:1.09rem;font-weight:800;color:var(--o-900);margin-bottom:8px}
.pas-photo p{margin:0;color:var(--muted);font-size:.845rem;line-height:1.62}
.photo-sceau{
  margin:28px auto 0;max-width:640px;text-align:center;
  background:var(--g-100);border:1px solid var(--g-200);border-radius:999px;
  padding:12px 22px;color:var(--g-800);font-size:.79rem;font-weight:600;
}
@media (max-width:820px){ .photo-pas{grid-template-columns:1fr;gap:14px}
  .pas-photo{display:grid;grid-template-columns:38px 1fr;gap:0 16px;padding:22px}
  .pas-photo .numero{margin-bottom:0;grid-row:span 2}
  .pas-photo h3{align-self:center;margin-bottom:6px}
  .photo-sceau{border-radius:16px;line-height:1.5}
}

/* ===================== lisibilité sur petit écran =====================
   Trois réglages qui ne concernent pas Orion, relevés en vérifiant la
   page à 390, 768 et 1440 pixels de large. ------------------------- */

/* Les quatre chiffres du bandeau d'accueil s'alignaient en 3 + 1 sur un
   téléphone, le quatrième seul sur sa ligne. En deux colonnes, ils
   forment un carré propre. */
@media (max-width:560px){
  .preuves{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
}
/* Sous 400 pixels, « Voir un exemple de cours animé » dépassait du
   cadre. Les boutons prennent alors toute la largeur. */
@media (max-width:400px){
  .actions{gap:10px}
  .actions .bouton{width:100%}
}
/* Sur tablette en mode portrait, la page se lisait bien mais les
   sections étaient aussi hautes que sur un grand écran. */
@media (min-width:561px) and (max-width:900px){
  .section{padding:72px 0}
}

/* Accroche ebook dans le héros (petite zone sous les chiffres) */
.promo-ebook{display:flex;align-items:center;gap:10px;max-width:470px;margin:24px 0 0;padding:10px 14px;
  background:var(--mint-50);border:1px solid rgba(45,120,90,.20);border-radius:12px;text-decoration:none;
  color:var(--texte);font-size:.86rem;line-height:1.35;transition:background .15s,transform .15s}
.promo-ebook:hover{background:#e6f1ea;transform:translateY(-1px)}
.promo-ebook .pe-ic{font-size:1.25rem;flex:none;line-height:1}
.promo-ebook .pe-txt{flex:1}
.promo-ebook .pe-txt b{color:var(--g-800)}
.promo-ebook .pe-fleche{flex:none;font-weight:800;color:var(--g-800);font-size:1.05rem}
@media(max-width:640px){.promo-ebook{font-size:.8rem;padding:8px 11px;gap:8px;margin-top:16px}}

/* ===== Tuile « Choisis ta duree » (tarifs, variante pastilles) ===== */
/* Fond blanc comme les tuiles Ebook/Au mois : on garde la palette
   (bordure orange, ecusson, bouton) mais sans le fond creme qui
   alourdissait l'ensemble en marron. */
.offre.vedette.tuile-duree{background:#fff}
.offre.vedette.tuile-duree .prix{color:var(--o-900)}
.offre.vedette.tuile-duree .prix small{color:var(--texte-doux)}
.tuile-duree .prix{display:flex;flex-wrap:wrap;align-items:baseline}
.tuile-duree .prix small{display:block;width:100%;margin-top:2px}
.tuile-duree .choix-titre{font-family:var(--font-head);font-weight:700;font-size:1.08rem;color:var(--o-900);margin:18px 0 10px}
.tuile-duree fieldset{border:0;margin:0;padding:0;min-width:0}
.tuile-duree legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tuile-duree .durees{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tuile-duree .choix{display:block;position:relative;margin:0}
.tuile-duree .choix input{position:absolute;opacity:0;pointer-events:none}
.tuile-duree .choix>span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 9px;
  border:1.5px solid var(--o-200);border-radius:12px;background:#fff;cursor:pointer;position:relative;
  transition:border-color .15s,background .15s}
.tuile-duree .choix b{font-family:var(--font-head);font-size:1.25rem;line-height:1;color:var(--o-900)}
.tuile-duree .choix em{font-style:normal;font-size:.68rem;font-weight:700;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.04em}
.tuile-duree .choix small{font-size:.66rem;font-weight:800;color:var(--g-700)}
.tuile-duree .choix>span:hover{border-color:var(--o-400)}
.tuile-duree .choix input:checked+span{border-color:var(--o-700);background:var(--o-50)}
.tuile-duree .choix input:focus-visible+span{outline:3px solid var(--o-400);outline-offset:2px}
.tuile-duree .pop{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--g-700);color:#fff;font-size:.56rem;font-weight:800;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;white-space:nowrap;letter-spacing:.04em;font-style:normal}
.tuile-duree .detail{margin:4px 0 0;font-size:.88rem;color:var(--texte-doux);min-height:2.8em}
.tuile-duree .detail b{color:var(--g-700)}
.tuile-duree .val{display:inline-block;transition:transform .18s,opacity .18s}
.tuile-duree .val.bouge{transform:translateY(-6px);opacity:0}
@media (max-width:380px){.tuile-duree .choix b{font-size:1.1rem}}


/* =====================================================================
   ACCUEIL v2 — hero vidéo, « Voyez par vous-même », Orion photo
   ===================================================================== */
.hero-video{padding-bottom:30px}
.hero-clair.hero-video .wrap{max-width:1180px}
.hero-clair.hero-video h1{font-size:clamp(2.1rem,4.2vw,3.2rem)}
.hv-grille{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;text-align:left}
.hv-texte h1{text-align:left}.hv-texte .chapeau,.hv-texte .note-heros{text-align:left;margin-left:0}
.hv-texte .actions{justify-content:flex-start}
.hv-video{margin:0}
.hv-cadre{position:relative;border-radius:22px;overflow:hidden;background:#1d2a24;box-shadow:0 22px 50px -18px rgba(28,52,40,.45),0 0 0 6px #fff;transform:rotate(.6deg)}
.hv-cadre video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.hv-son{position:absolute;right:14px;top:14px;border:0;border-radius:999px;padding:9px 16px;font:inherit;font-weight:800;font-size:.9rem;background:rgba(255,255,255,.94);color:#1f3b30;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.hv-video figcaption{margin-top:14px;font-size:.88rem;color:#5b6b63;text-align:center}
.hero-video .chiffres-cahier{margin-top:34px}
.hv-play{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:rgba(15,25,20,.28);border:0;cursor:pointer;z-index:2}
.hv-play::before{content:"\25B6";font-size:1.9rem;color:#fff;background:rgba(0,0,0,.45);width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:6px}
.hv-cadre.en-pause .hv-play{display:flex}

.prop-voir{background:#fff}
.prop-entete{text-align:center;max-width:760px;margin:0 auto 34px}
.prop-entete .titre{margin:16px 0 10px}
.prop-sous{color:#5b6b63;font-size:1.05rem;line-height:1.55}
.prop-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prop-carte{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:8px;background:#faf7f1;border:1px solid #ebe3d6;border-radius:20px;padding:14px;transition:transform .2s,box-shadow .2s}
.prop-carte:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(28,52,40,.35)}
.prop-vignette{display:block;height:250px;border-radius:14px;overflow:hidden;background:#f3eee6;border:1px solid #e6ddcf;position:relative}
.prop-vignette img{width:100%;display:block;object-fit:cover;object-position:top}
.prop-vignette::after{content:"\1F50D";position:absolute;right:10px;bottom:10px;background:#fff;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.prop-lbl{font-weight:800;font-size:1.08rem;color:#1f3b30;margin-top:6px}
.prop-desc{font-size:.93rem;color:#5b6b63;line-height:1.45}
.prop-cta{text-align:center;margin-top:30px}
.prop-glisser{display:none;text-align:center;color:#8a7f70;font-size:.8rem;margin-top:12px}
.sp{display:flex;flex-direction:column;gap:13px;padding:20px 18px;height:100%;box-sizing:border-box;background:linear-gradient(#fff,#f7f3ec)}
.sp-tete{font-size:1.05rem;color:#1f3b30}.sp-tete em{float:right;font-style:normal;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#b06a2a;background:#fbecd9;padding:3px 8px;border-radius:999px}
.sp-ligne{display:grid;grid-template-columns:70px 1fr 48px;align-items:center;gap:10px;font-size:.88rem}
.sp-ligne i{font-style:normal;color:#425249}.sp-ligne b{color:#1f3b30;text-align:right}
.sp-barre{height:9px;border-radius:9px;background:#e8e2d6;overflow:hidden}.sp-barre span{display:block;height:100%;background:linear-gradient(90deg,#2e5d4b,#5aa284);border-radius:9px}
.sp-pied{font-size:.8rem;color:#6b786f;border-top:1px dashed #ddd2c0;padding-top:10px;margin-top:auto}

.prop-orion{background:linear-gradient(135deg,#1c2f4a,#2b1f4a 60%,#3a2350);color:#f3eefb;overflow:hidden}
.prop-orion .titre{color:#fff}.prop-orion .prop-sous{color:#d7d0ea}.prop-orion .surligne{color:#ffd7a0}
.po-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.po-tel{justify-self:center;width:300px;height:600px;border-radius:44px;background:#0d0f16;padding:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 2px #3c3f52 inset,0 0 60px rgba(120,190,255,.25)}
.po-ecran{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#f4efe6}
.po-barre{position:absolute;top:0;left:0;right:0;padding:14px;font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:3}
.po-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#c9bfae}
.po-photo img{width:112%;transform:rotate(-5deg);box-shadow:0 10px 26px rgba(0,0,0,.35);filter:saturate(.9) contrast(1.02)}
.po-scan{position:absolute;left:8%;right:8%;height:3px;background:#62d0ff;box-shadow:0 0 18px 6px rgba(98,208,255,.65);animation:po-scan 2.6s ease-in-out infinite;z-index:2}
@keyframes po-scan{0%{top:18%}50%{top:62%}100%{top:18%}}
.po-bulle{position:absolute;left:12px;right:12px;bottom:92px;display:flex;gap:10px;align-items:center;background:#fff;color:#1f2a24;border-radius:18px;padding:11px 12px;font-size:.83rem;line-height:1.3;box-shadow:0 12px 26px rgba(0,0,0,.3);animation:po-in 3.6s ease-out infinite;z-index:4}
.po-av{flex:none;width:44px;height:44px;border-radius:50%;background:#eef4fb;display:flex;align-items:center;justify-content:center;overflow:hidden}.po-av img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.po-actions{position:absolute;left:12px;right:12px;bottom:18px;display:flex;flex-wrap:wrap;gap:6px;z-index:4;animation:po-in 3.6s ease-out infinite}
.po-actions span{background:#2e5d4b;color:#fff;font-size:.74rem;font-weight:800;border-radius:999px;padding:7px 10px}
@keyframes po-in{0%,30%{opacity:0;transform:translateY(16px)}42%,92%{opacity:1;transform:none}100%{opacity:0}}
.po-etapes{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-direction:column;gap:14px}
.po-etapes li{display:flex;gap:14px;align-items:flex-start;font-size:1.02rem;line-height:1.45}
.po-etapes i{flex:none;font-style:normal;width:34px;height:34px;border-radius:50%;background:#ffd7a0;color:#3a2350;font-weight:800;display:flex;align-items:center;justify-content:center}

.prop-boite{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:24px}
.prop-boite[hidden]{display:none}
.prop-boite-fond{position:absolute;inset:0;background:rgba(15,20,18,.72)}
.prop-boite figure{position:relative;margin:0;background:#fff;border-radius:20px;max-width:min(980px,96vw);max-height:92vh;overflow:auto;padding:18px}
.prop-boite figcaption{font-weight:800;color:#1f3b30;margin:2px 40px 12px 4px}
.prop-boite img{width:100%;display:block;border-radius:12px}
.prop-boite .sp{min-width:min(560px,86vw);border-radius:12px}
.prop-fermer{position:absolute;top:10px;right:12px;border:0;background:#f1ece3;border-radius:50%;width:36px;height:36px;font-size:1.4rem;cursor:pointer}

@media(max-width:980px){.hv-grille,.po-grille{grid-template-columns:1fr}.hv-texte,.hv-texte h1,.hv-texte .chapeau,.hv-texte .note-heros{text-align:center}.hv-texte .actions{justify-content:center}.prop-cartes{grid-template-columns:1fr}.po-tel{order:2}}

/* ---- TÉLÉPHONE (<= 640 px) : page allégée ---- */
@media(max-width:640px){
  .hero-clair.hero-video h1{font-size:2rem;line-height:1.12}
  .hv-grille{gap:20px}
  .hv-texte .etiquette{display:none}
  .hv-texte .chapeau{font-size:.98rem;margin-top:10px}
  .hv-texte .actions{flex-direction:column;gap:8px;margin-top:14px}
  .hv-texte .actions .plein{width:100%;text-align:center}
  .hv-texte .actions .contour{border:0;background:none;padding:4px 0;text-decoration:underline;color:var(--g-700);font-weight:700}
  .hv-texte .note-heros{font-size:.82rem;margin-top:10px}
  .hv-cadre{transform:none;box-shadow:0 12px 28px -14px rgba(28,52,40,.4),0 0 0 4px #fff}
  .hv-son{font-size:.76rem;padding:7px 12px}
  .hv-video figcaption{font-size:.8rem}
  .hero-video .chiffres-cahier{grid-template-columns:repeat(4,1fr);margin-top:22px}
  .hero-video .chiffres-cahier li{padding:12px 4px;border-right:1px solid #E3D9C8;border-bottom:0}
  .hero-video .chiffres-cahier li:last-child{border-right:0}
  .hero-video .chiffres-cahier b{font-size:1.2rem}
  .hero-video .chiffres-cahier span{font-size:.62rem;margin-top:4px;line-height:1.2}
  .prop-entete .titre,.po-texte .titre{font-size:1.5rem}
  .prop-cartes{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .prop-carte{flex:0 0 82%;scroll-snap-align:start}
  .prop-vignette{height:200px}
  .prop-glisser{display:block}
  .po-grille{gap:26px}
  .po-tel{width:220px;height:440px;border-radius:34px;padding:9px}
  .po-ecran{border-radius:26px}
  .po-bulle{bottom:18px;font-size:.78rem}
  .po-actions{display:none}
  .po-etapes{display:none}
}
@media(prefers-reduced-motion:reduce){
  .po-scan,.po-bulle,.po-actions{animation:none!important}
  .po-bulle,.po-actions{opacity:1;transform:none}
}

/* 20/10/2026 : « .marque .nom » a sa propre taille de police, donc le
   font-size:0 ci-dessus ne le masquait pas : « Essai gratuit » sortait de
   l'écran sur téléphone. On masque le nom explicitement. */
@media (max-width:480px){ .marque .nom{display:none} }