/* ------------------------------------------------------------------
   Go For English — feuille de style commune aux pages vitrine.
   Le test candidat et l'espace admin gardent leur CSS embarqué :
   ce fichier ne sert qu'à l'accueil, la méthode et les formules.
   ------------------------------------------------------------------ */

:root{
  --yellow:#FCB403;
  --yellow-soft:#FFF1CC;
  --ink:#1A262F;
  --ink-soft:#4A5560;
  --red:#CD0303;
  --green:#1B7F3B;
  --paper:#ffffff;
  --bg:#F7F5F0;
  --line:#E4E0D7;
  --radius:14px;
  --shadow:0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.06);
  /* Teintes relevees dans le logo. Le jaune ne passe jamais en texte sur
     fond clair (1,61 de contraste) mais donne 8,57 sur anthracite : c'est
     la qu'il devient lisible, et c'est ce qui justifie le bloc sombre. */
  --anthracite:#1A262F;
  --anthracite-fond:#141F27;
  --rouge-clair:#FF5A54;   /* rouge lisible sur anthracite : 5,02 */
  --or-texte:#946000;      /* le « dore » quand il faut du texte sur clair */
  --wrap:1080px;
  --font:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- En-tête ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{
  max-width:var(--wrap); margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; gap:18px;
}
.bar .logo{height:46px; width:auto}
.bar nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.bar nav a{
  text-decoration:none; color:var(--ink-soft); font-size:14.5px; font-weight:600;
  padding:8px 13px; border-radius:99px; white-space:nowrap;
}
.bar nav a:hover{background:var(--yellow-soft); color:var(--ink)}
.bar nav a[aria-current="page"]{background:var(--yellow-soft); color:var(--ink)}
.bar nav a.cta{background:var(--ink); color:#fff}
.bar nav a.cta:hover{background:#12151c; color:#fff}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 420px at 12% -30%, rgba(255,201,7,.38), transparent 62%),
    linear-gradient(180deg,#fff, var(--bg));
  border-bottom:1px solid var(--line);
}
.hero .wrap{max-width:var(--wrap); margin:0 auto; padding:64px 22px 56px}
.kicker{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red);
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:6px 14px;
}
h1{font-size:clamp(32px,5.4vw,54px); line-height:1.1; margin:18px 0 14px; letter-spacing:-.022em}
h1 em{font-style:normal; color:var(--red)}
.lead{font-size:clamp(17px,2vw,20px); color:var(--ink-soft); max-width:64ch; margin:0}
.tagline{
  margin-top:26px; font-size:13px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.tagline b{color:var(--red)}

/* ---------- Structure ---------- */
main{max-width:var(--wrap); margin:0 auto; padding:0 22px 90px}
section{padding-top:62px}
.part-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.part-tag span.num{
  display:grid; place-items:center; min-width:26px; height:26px; padding:0 7px;
  border-radius:8px; background:var(--ink); color:var(--yellow); font-size:13px; letter-spacing:0;
}
h2{font-size:clamp(25px,3.5vw,35px); margin:12px 0 8px; letter-spacing:-.016em}
h3{font-size:19px; margin:30px 0 8px}
p{margin:0 0 14px}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow); margin:22px 0;
}
.callout{
  border-left:5px solid var(--yellow); background:#FFFDF5;
  border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px; margin:20px 0;
}
.callout p:last-child{margin-bottom:0}

/* ---------- Citation forte ---------- */
.pull{
  margin:34px 0; padding:30px 32px; border-radius:var(--radius);
  background:var(--ink); color:#fff; box-shadow:var(--shadow);
}
.pull p{font-size:clamp(20px,2.8vw,27px); font-weight:700; line-height:1.35; margin:0; letter-spacing:-.012em}
.pull p em{font-style:normal; color:var(--yellow)}
.pull .src{margin-top:12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.6}

/* ---------- Grilles ---------- */
.grid{display:grid; gap:16px; margin:22px 0}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){
  .grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .grid.three,.grid.four,.grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.tile{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.tile .n{font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase}
.tile h4{margin:8px 0 8px; font-size:18px}
.tile p{font-size:15.5px; color:var(--ink-soft); margin:0 0 8px}
.tile p:last-child{margin-bottom:0}
.tile .ico{font-size:26px; line-height:1; display:block; margin-bottom:8px}

/* ---------- Étapes numérotées ---------- */
.steps-flow{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:24px 0}
.flow-step{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.flow-step .idx{
  display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--yellow); color:var(--ink); font-weight:800; font-size:15px; margin-bottom:10px;
}
.flow-step h4{margin:0 0 6px; font-size:17px}
.flow-step p{font-size:15px; color:var(--ink-soft); margin:0}

/* ---------- Parcours ---------- */
.levels{display:grid; gap:12px; margin:22px 0}
.level{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.level .step{
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  font-weight:800; font-size:15px; color:var(--ink); background:var(--yellow-soft);
  border:1px solid var(--yellow);
}
.level b{display:block; font-size:17px}
.level span{font-size:15.5px; color:var(--ink-soft)}

/* ---------- Listes ---------- */
ul.plain{padding-left:22px; margin:10px 0}
ul.plain li{margin:5px 0}
ul.checks{list-style:none; padding:0; margin:14px 0; display:grid; gap:9px}
ul.checks li{display:flex; gap:12px; align-items:baseline}
ul.checks li::before{content:"\2713"; color:var(--green); font-weight:900; flex:none}

/* ---------- Boutons ---------- */
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:22px}
.btn{
  display:inline-block; text-decoration:none; font:inherit; font-size:15px; font-weight:700;
  cursor:pointer; padding:12px 22px; border-radius:99px; border:1px solid var(--line);
  background:#fff; color:var(--ink);
}
.btn:hover{background:var(--yellow-soft)}
.btn.solid{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.solid:hover{background:#0E1620}
.btn.yellow{background:var(--yellow); border-color:var(--yellow); color:var(--ink)}
.btn.yellow:hover{background:#FDCB4A}

/* ---------- Bandeau d'appel ---------- */
.band{
  margin:60px 0 0; padding:38px 34px; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--yellow), #ffdf6b);
  box-shadow:var(--shadow);
}
.band h2{margin-top:0}
.band p{max-width:60ch; color:#4a4326}

/* ---------- À compléter par GFE ---------- */
.todo{
  border:1px dashed #C9A227; background:#FFFBEA; color:#6B5300;
  border-radius:12px; padding:12px 16px; font-size:14.5px; margin:14px 0;
}
.todo b{color:#4a3a00}

/* ---------- Pied de page ---------- */
footer{border-top:1px solid var(--line); background:#fff; margin-top:20px}
footer .wrap{
  max-width:var(--wrap); margin:0 auto; padding:38px 22px;
  display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap;
}
footer img{height:54px; width:auto}
footer p{margin:0 0 4px; font-size:14.5px; color:var(--ink-soft)}
footer .quote{font-size:19px; font-weight:700; color:var(--ink); margin:0 0 6px}
footer nav{margin-left:auto; display:flex; flex-direction:column; gap:6px}
footer nav a{font-size:14.5px; color:var(--ink-soft); text-decoration:none}
footer nav a:hover{color:var(--ink); text-decoration:underline}

@media (max-width:680px){
  body{font-size:16px}
  .card,.pull,.band{padding:20px}
  .bar{padding:10px 16px; gap:10px}
  .bar nav{width:100%; margin-left:0; order:3; overflow-x:auto}
  .grid.two{grid-template-columns:1fr}
  footer nav{margin-left:0; width:100%}
}

@media print{
  header.site,.actions,.band,.no-print{display:none !important}
  body{background:#fff; font-size:12pt}
  .card,.tile,.level,.flow-step{box-shadow:none; break-inside:avoid}
  a{text-decoration:none; color:inherit}
}

/* ------------------------------------------------------------------
   Visuels GFE — 37 illustrations vectorielles tirées du logo
   (le bus rouge, la route, le jaune). Voir assets/svg/ et assets/png/.
   ------------------------------------------------------------------ */

.gfe-hero-img{width:100%; height:auto; display:block; border-radius:20px}
.gfe-banner{width:100%; height:auto; display:block}
.gfe-icon{width:56px; height:56px; display:block; margin-bottom:10px}
.gfe-step{width:100%; max-width:170px; height:auto; margin:0 auto 10px}
.gfe-level{width:100%; max-width:76px; height:auto}
.gfe-public{width:88px; height:88px; margin-bottom:10px}
.gfe-sep{width:100%; height:auto; display:block; margin:56px 0 0}

/* Bandeau de page : illustration à droite, zone calme à gauche pour le titre. */
.page-banner{position:relative; margin:0 0 8px}
.page-banner .banner-text{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  max-width:46%; padding-left:4px;
}
.page-banner .banner-text h1{margin:0 0 10px; font-size:clamp(24px,3.6vw,42px)}
.page-banner .banner-text p{margin:0; font-size:clamp(14px,1.5vw,17px); color:var(--ink-soft)}
/* Sous 760 px l'illustration devient trop étroite pour porter du texte :
   le titre repasse dessous, en flux normal. */
@media (max-width:760px){
  .page-banner .banner-text{position:static; transform:none; max-width:none; padding:18px 0 0}
}

/* Le hero d'accueil : texte à gauche, illustration à droite sur grand écran. */
.hero-split{display:grid; grid-template-columns:1fr; gap:26px; align-items:center}
@media (min-width:900px){
  .hero-split{grid-template-columns:1.05fr .95fr; gap:34px}
}

/* Écusson de niveau à la place du numéro. */
.level .badge{flex:none; width:76px; display:grid; place-items:center}

/* Figure d'étape du cycle. */
.flow-step figure{margin:0}
.flow-step figcaption{font-weight:700; font-size:17px; margin-bottom:6px}

/* ==================================================================
   Hero d'après la maquette « GFE HERO NEW »
   ------------------------------------------------------------------
   La maquette déplace l'accent du jaune vers le rouge, pose le logo en
   lettrage GFE et fait flotter une barre de repères sur le bas de
   l'image. Les teintes sont relevées au pixel sur le fichier fourni.
   ================================================================== */

:root{
  --rouge-vif:#CD0303;      /* rouge dominant de la maquette */
  --rouge-fonce:#A50202;
  --jaune-vif:#FCB403;      /* le trait sous « Ouvrez votre monde » */
  --creme:#F8F1E9;          /* fond clair à gauche */
  --encre-titre:#111A21;
}

/* ---------- En-tête ---------- */
header.site.v2{background:var(--creme); border-bottom:0}
header.site.v2 .bar{padding:14px 22px; gap:22px; max-width:1240px}
header.site.v2 .logo{height:58px}
header.site.v2 nav{gap:2px}
header.site.v2 nav a{font-size:15px; font-weight:600; color:#3B3F49; padding:8px 12px}
header.site.v2 nav a:hover{background:transparent; color:var(--rouge-vif)}
header.site.v2 nav a[aria-current="page"]{
  background:transparent; color:var(--rouge-vif); position:relative;
}
header.site.v2 nav a[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px;
  height:3px; border-radius:2px; background:var(--rouge-vif);
}
header.site.v2 nav a.apprenant{
  background:var(--rouge-vif); color:#fff; font-weight:750; letter-spacing:.02em;
  padding:11px 20px; margin-left:10px; display:inline-flex; align-items:center; gap:9px;
}
header.site.v2 nav a.apprenant:hover{background:var(--rouge-fonce); color:#fff}
header.site.v2 nav a.apprenant svg{width:17px; height:17px; flex:none}

/* ---------- Hero ---------- */
.hero-v2{position:relative; background:var(--creme); overflow:hidden}
.hero-v2 .wrap{
  max-width:1240px; margin:0 auto; padding:56px 22px 150px;
  position:relative; z-index:2;
  min-height:min(46vw, 560px);
  display:flex; align-items:center;
}
.hero-v2 .texte{max-width:600px}

.hero-v2 h1{
  font-size:clamp(34px,5.6vw,62px); line-height:1.06; letter-spacing:-.03em;
  font-weight:800; color:var(--encre-titre); margin:0 0 20px;
}
.hero-v2 h1 .rouge{color:var(--rouge-vif); position:relative; display:inline-block}
/* Le trait jaune est tracé, pas rectiligne : il garde le geste de la maquette. */
.hero-v2 h1 .rouge svg{
  position:absolute; left:0; right:0; bottom:-.16em; width:100%; height:.22em;
  overflow:visible; pointer-events:none;
}
.hero-v2 h1 .rouge svg path{
  fill:none; stroke:var(--jaune-vif); stroke-width:9; stroke-linecap:round;
}

.hero-v2 .accroche{
  font-size:clamp(16.5px,1.9vw,20px); line-height:1.62; color:#41454F;
  max-width:34ch; margin:0 0 30px;
}
.hero-v2 .accroche b{color:var(--encre-titre); font-weight:750}

.hero-v2 .boutons{display:flex; gap:16px; flex-wrap:wrap}
.bouton-v2{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  font-size:14.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:16px 28px; border-radius:99px; border:2px solid transparent; cursor:pointer;
}
.bouton-v2.plein{background:var(--rouge-vif); color:#fff}
.bouton-v2.plein:hover{background:var(--rouge-fonce)}
.bouton-v2.contour{background:#fff; color:var(--encre-titre); border-color:var(--jaune-vif)}
.bouton-v2.contour:hover{background:#FFF8E6}
.bouton-v2 .fleche{font-size:17px; line-height:1}
.bouton-v2.contour .fleche{color:var(--rouge-vif)}

/* Photo pleine largeur, comme dans la maquette, avec le voile crème qui
   la couvre à gauche pour porter le texte.
   Position verticale « top » : un cadrage centré coupait le haut de la
   coiffure sur les hero larges et courts (calculé sur 1672x941). */
.hero-v2 .photo{
  position:absolute; inset:0; z-index:1;
  background:url("hero/hero-photo.jpg") 62% top/cover no-repeat;
}
.hero-v2 .photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--creme) 0%,
    var(--creme) 44%,
    rgba(248,241,233,.90) 54%,
    rgba(248,241,233,.45) 63%,
    rgba(248,241,233,0)   72%);
}
/* Écrans intermédiaires : le texte occupe une part plus large, le voile
   couvre donc moins vite mais reste opaque là où il porte le titre. */
@media (max-width:1080px){
  .hero-v2 .photo{background-position:66% top}
  .hero-v2 .photo::after{
    background:linear-gradient(90deg,
      var(--creme) 0%, var(--creme) 34%,
      rgba(248,241,233,.92) 48%, rgba(248,241,233,.55) 60%, rgba(248,241,233,0) 74%);
  }
}

/* ---------- Barre de repères ---------- */
.reperes{
  position:relative; z-index:3; max-width:1180px; margin:-96px auto 0;
  padding:0 22px;
}
.reperes .boite{
  background:#fff; border-radius:20px; box-shadow:0 18px 46px rgba(20,20,30,.13);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.repere{display:flex; align-items:center; gap:14px; padding:24px 20px; position:relative}
.repere + .repere::before{
  content:""; position:absolute; left:0; top:26%; bottom:26%; width:1px; background:#EBE6DE;
}
.repere svg{width:36px; height:36px; flex:none; stroke:var(--rouge-vif); fill:none;
            stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.repere span{font-size:15.5px; font-weight:650; line-height:1.3; color:var(--encre-titre)}

@media (max-width:1080px){
  /* La photo reste pleine largeur : le voile ci-dessus suffit a porter le
     texte. L ancienne regle qui la reduisait a 48 % est supprimee. */
  .reperes .boite{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  /* Sous cette largeur l'image ne laisse plus de place lisible au texte :
     elle passe en bandeau sous le titre.
     La photo est le premier enfant du hero : en flux normal elle se placerait
     AVANT le texte, et le titre viendrait se poser dessus — mesure a 1,00 de
     contraste, donc invisible. On ordonne donc explicitement le hero. */
  .hero-v2{display:flex; flex-direction:column}
  .hero-v2 .wrap{order:1; padding:34px 22px 30px}
  .hero-v2 .photo{
    order:2;
    position:relative; inset:auto; width:auto; height:240px; margin:0 -22px;
    background-image:url("hero/hero-photo-mobile.jpg");
    background-position:62% 22%;
  }
  .hero-v2 .photo::after{display:none}
  .hero-v2 .texte{max-width:none}
  /* Le chevauchement des reperes visait le hero pleine hauteur du poste fixe :
     ici il les poserait sur la photo. */
  .reperes{margin-top:20px}
  .reperes .boite{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .reperes .boite{grid-template-columns:1fr}
  .repere + .repere::before{left:20px; right:20px; top:0; bottom:auto; width:auto; height:1px}
  .bouton-v2{width:100%; justify-content:center}
}

/* Les pages intérieures gardent leur hero de texte : on raccorde seulement
   son fond à celui de la nouvelle barre, sinon une couture apparaît entre le
   crème de l'en-tête et le blanc du dégradé. */
header.site.v2 + .hero{
  background:linear-gradient(180deg, var(--creme) 0%, var(--bg) 100%);
  border-bottom:0;
}
header.site.v2 + .hero .wrap{padding-top:46px}

/* Le logo est un élément flex : sans flex:none il se laisse comprimer sur
   écran étroit et perd ses proportions (mesuré : 85×58 au lieu de 120×58). */
header.site.v2 .logo{width:auto; flex:none}
header.site.v2 .bar > a:first-child{flex:none}
footer img{flex:none; width:auto}

/* ==================================================================
   Section Méthode — d'après « Section methode - illustration »
   ------------------------------------------------------------------
   Le titre et les quatre étapes sont du vrai texte, pas des pixels :
   l'image fournie porte tout en dur, ce qui la rendrait illisible sur
   petit écran et invisible pour la recherche. Seule la bande illustrée
   (la route et ses quatre scènes) est découpée du fichier.
   ================================================================== */

.methode-v2{background:var(--creme); padding:76px 0 82px}
.methode-v2 .contenu-m{max-width:1240px; margin:0 auto; padding:0 22px; text-align:center}

.kicker-m{
  margin:0 0 14px; font-size:14px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rouge-vif);
}

.titre-m{
  margin:0 0 44px; font-weight:800; letter-spacing:-.025em; line-height:1.18;
  font-size:clamp(27px,4.4vw,52px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.14em .42em;
}
.titre-m span{position:relative; display:inline-block; padding-bottom:.16em}
.titre-m span::after{
  content:""; position:absolute; left:2px; right:2px; bottom:0;
  height:.075em; min-height:3px; border-radius:99px; background:currentColor;
}
/* Le doré de l'illustration (#F0A000) ne donne que 1,93:1 sur le crème :
   illisible en texte. Assombri à #A96E00, soit 3,81:1 — au-dessus du seuil
   des grands titres — tout en restant reconnaissable comme le doré GFE. */
.titre-m .m1{color:var(--rouge-vif)}
.titre-m .m2{color:var(--or-texte)}
.titre-m .m3{color:var(--encre-titre)}
.titre-m .m4{color:var(--rouge-fonce)}

/* Sur écran étroit la panoramique deviendrait minuscule : on la laisse
   défiler horizontalement plutôt que de la réduire à une frise illisible. */
.illus-m{margin:0 0 46px; border-radius:18px; overflow:hidden}
.illus-m img{width:100%; height:auto; display:block}

.etapes-m{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  text-align:left; max-width:1180px; margin:0 auto;
}
.etape-m .num{
  display:inline-grid; place-items:center; min-width:46px; height:32px; padding:0 12px;
  border-radius:8px; color:#fff; font-weight:800; font-size:15px; letter-spacing:.04em;
  margin-bottom:12px;
}
.etape-m .num.n1{background:var(--rouge-vif)}
.etape-m .num.n2{background:var(--jaune-vif); color:var(--anthracite)}
.etape-m .num.n3{background:var(--encre-titre)}
.etape-m .num.n4{background:var(--rouge-fonce)}
.etape-m h3{
  margin:0 0 8px; font-size:18px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--encre-titre);
}
.etape-m p{margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-soft)}

@media (max-width:1000px){
  .etapes-m{grid-template-columns:repeat(2,1fr); gap:24px 30px}
}
@media (max-width:760px){
  .methode-v2{padding:56px 0 62px}
  .titre-m{margin-bottom:32px}
  .illus-m{
    margin:0 -22px 34px; border-radius:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .illus-m img{min-width:720px}
  .etapes-m{grid-template-columns:1fr; gap:22px}
}

/* ---- Page Méthode : l'illustration tient dans le hero ------------------ */
/* Elle doit être vue à l'arrivée, sans défiler : elle remplace donc la
   bannière du kit et se cale juste sous l'accroche. */
.hero-methode .titre-m{
  justify-content:flex-start; margin:14px 0 18px;
  font-size:clamp(28px,4.2vw,46px);
}
.hero-methode .lead{margin:0 0 26px}
.hero-methode .illus-m{
  margin:0; border-radius:16px;
  border:1px solid var(--line); background:#fff;
}
/* Le hero respire moins en bas : l'image en tient déjà lieu de conclusion. */
.hero-methode .wrap{padding-bottom:34px}

@media (max-width:760px){
  .hero-methode .titre-m{margin:12px 0 14px}
  .hero-methode .illus-m{
    margin:0 -22px; border-radius:0; border-left:0; border-right:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .hero-methode .illus-m img{min-width:720px}
}

/* Les quatre étapes détaillées vivent maintenant dans une section ordinaire. */
#quatre-temps .etapes-m{margin-top:26px}

/* ---- Page Parcours : la bande illustrée et ce qui l'entoure ------------ */
/* Le titre, les cinq étapes et les garanties étaient gravés dans l'image
   fournie ; ils sont ici en vrai texte, seule la scène reste une image. */
.titre-p{
  margin:14px 0 16px; font-weight:800; letter-spacing:-.025em; line-height:1.16;
  font-size:clamp(28px,4.2vw,46px); color:var(--encre-titre);
}
.titre-p .rouge{color:var(--rouge-vif)}
.hero-parcours .lead{margin:0 0 26px}
.hero-parcours .wrap{padding-bottom:34px}

.scene-p{margin:0}
.scene-p img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:16px; background:#fff;
}

/* Les cinq intitulés se répartissent sous les cinq escales de la route. */
.etapes-p{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0 22px;
  margin:20px 0 0; font-size:14px; line-height:1.5; color:var(--ink-soft);
}
.etape-p{display:block}
.etape-p b{
  display:block; margin-bottom:5px; font-size:13px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
/* Le doré de l'illustration (#F5A517) ne donne que 1,82:1 sur le fond :
   assombri à #946000, soit 4,77:1, il passe le seuil du texte courant. */
.etape-p b.r{color:var(--rouge-vif)}
.etape-p b.o{color:var(--or-texte)}

/* Bandeau des cinq garanties, repris du bas de l'illustration. */
.garanties{max-width:var(--wrap); margin:0 auto; padding:26px 22px 0}
.boite-g{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  background:#FCF8F2; border:1px solid var(--line); border-radius:16px;
  padding:22px 8px;
}
.garantie{
  display:flex; gap:11px; align-items:flex-start;
  padding:2px 16px; font-size:13.5px; line-height:1.5; color:var(--ink-soft);
}
.garantie + .garantie{border-left:1px solid var(--line)}
.garantie svg{width:26px; height:26px; flex:none; margin-top:1px}
.garantie svg.r{color:var(--rouge-vif)}
.garantie svg.o{color:var(--or-texte)}
.garantie b{display:block; margin-bottom:3px; font-size:14.5px; color:var(--encre-titre)}

@media (max-width:1000px){
  /* Les cinq colonnes tiennent tant que l'image est vue en entier :
     casser la grille ici romprait le lien entre la legende et l'escale. */
  .etapes-p{gap:0 14px; font-size:13px}
  .etape-p b{font-size:12px; letter-spacing:.04em}
  .boite-g{grid-template-columns:repeat(2,1fr); gap:18px 0; padding:20px 6px}
  .garantie + .garantie{border-left:0}
  .garantie:nth-child(even){border-left:1px solid var(--line)}
}
@media (max-width:760px){
  /* La panoramique deviendrait une frise minuscule : elle défile dans son
     cadre plutôt que d'être réduite à l'illisible. */
  /* Le defilement porte sur l'image seule : la legende doit rester en place. */
  .scene-p{margin:0}
  .scene-p picture{
    display:block; margin:0 -22px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .scene-p img{min-width:760px; border-radius:0; border-left:0; border-right:0}
  .etapes-p{grid-template-columns:1fr; gap:16px; margin:18px 0 0}
  .boite-g{grid-template-columns:1fr; gap:16px 0}
  .garantie:nth-child(even){border-left:0}
}

/* ---- Page Formules : les quatre cartes de profil ----------------------- */
/* L'illustration fournie gravait le titre, les quatre cartes et le bandeau
   d'atouts ; seules les photos restent des images. */
.titre-f{
  margin:14px 0 16px; font-weight:800; letter-spacing:-.025em; line-height:1.16;
  font-size:clamp(28px,4.2vw,46px); color:var(--encre-titre);
}
.titre-f .rouge{color:var(--rouge-vif)}
.hero-formules .lead{margin:0 0 20px}
.hero-formules .wrap{padding-bottom:34px}
.filet-or{width:92px; height:5px; border-radius:99px; background:var(--jaune-vif); margin:0 0 30px}

.cartes-f{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.carte-f{
  max-width:380px; background:#FEF9F4;
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; height:100%;
  box-shadow:0 2px 14px rgba(28,20,10,.05);
}
.carte-f img{width:100%; height:auto; display:block}
.corps-f{padding:6px 20px 20px; display:flex; flex-direction:column; flex:1}
.corps-f h2{
  margin:0 0 3px; font-size:21px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; line-height:1.15;
}
.corps-f .qui{margin:0 0 14px; font-size:14px; font-weight:700; color:var(--encre-titre)}
.corps-f ul{list-style:none; margin:0 0 18px; padding:0; flex:1}
.corps-f li{
  position:relative; padding-left:24px; margin-bottom:8px;
  font-size:14.5px; line-height:1.45; color:var(--ink-soft);
}
/* La coche reprend la pastille de la carte, en version lisible. */
.corps-f li::before{
  content:""; position:absolute; left:0; top:2px; width:16px; height:16px;
  border-radius:50%; background:var(--coche,var(--rouge-vif));
}
.corps-f li::after{
  content:""; position:absolute; left:4.4px; top:7.4px; width:7px; height:3.6px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.cta-f{
  display:block; text-align:center; text-decoration:none; border-radius:99px;
  padding:12px 16px; font-size:13.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase;
}
.cta-f .fleche{margin-left:6px}

/* Trois habillages, repris des trois pastilles de l'illustration.
   Le doré #F5A517 ne donne que 1,93:1 en texte : l'intitulé passe à #946000
   (5,10:1) et le bouton doré porte de l'encre (8,88:1) au lieu du blanc. */
.carte-f.t-r{--coche:var(--rouge-vif)}
.carte-f.t-r .corps-f h2{color:var(--rouge-vif)}
.carte-f.t-r .cta-f{background:var(--rouge-vif); color:#fff}
.carte-f.t-o{--coche:var(--or-texte)}
.carte-f.t-o .corps-f h2{color:var(--or-texte)}
.carte-f.t-o .cta-f{background:var(--jaune-vif); color:var(--anthracite)}
.carte-f.t-n{--coche:var(--anthracite)}
.carte-f.t-n .corps-f h2{color:var(--anthracite)}
.carte-f.t-n .cta-f{background:var(--anthracite); color:#fff}

.garantie svg.n{color:var(--encre-titre)}

@media (max-width:1000px){
  .cartes-f{grid-template-columns:repeat(2,1fr); gap:22px; justify-items:center}
}
@media (max-width:640px){
  .cartes-f{grid-template-columns:1fr}
  .carte-f{max-width:none}
}

/* ---- Tuiles de profil en photo ----------------------------------------- */
/* Les pictogrammes du kit cedent la place aux photos reelles, dans le meme
   habillage que les cartes de la page Formules pour que la pastille et le
   raccord bas de photo / fond de carte restent invisibles. */
.grid.profils .tile.profil{
  padding:0; overflow:hidden; background:#FEF9F4;
  display:flex; flex-direction:column;
}
.tile.profil img{width:100%; height:auto; display:block}
.tile.profil .dit{padding:2px 18px 18px}
.tile.profil h4{margin:0 0 6px; font-size:18px; letter-spacing:.01em}
.tile.profil p{margin:0}
/* Deux colonnes de 158 px sur telephone : trop etroit des lors que la tuile
   porte une photo et un paragraphe. Elles passent l'une sous l'autre. */
@media (max-width:560px){
  .grid.profils{grid-template-columns:1fr}
}

/* ---- Telephone : en-tete compacte ------------------------------------- */
/* La barre passe a la ligne, le menu occupe sa propre ligne en un seul rang
   qui defile, et le bouton « Mon espace » vient en tete pour rester
   visible sans defiler. Hauteur ramenee de 203 px a environ 115 px. */
@media (max-width:680px){
  .bar{flex-wrap:wrap}
  .bar nav{
    width:100%; margin-left:0; order:3;
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav a{flex:none}
}
@media (max-width:680px){
  header.site.v2 .bar{padding:10px 16px; gap:10px}
  header.site.v2 .logo{height:44px}
  header.site.v2 nav a{font-size:14.5px; padding:8px 11px}
  header.site.v2 nav a.apprenant{order:-1; margin-left:0; margin-right:6px; padding:10px 16px}
}

/* Sous 480 px, deux colonnes ne laissent que 84 a 104 px de texte utile :
   les intitules d'une seule piece debordaient de leur carte. */
@media (max-width:480px){
  .grid.three,.grid.four,.grid.five{grid-template-columns:1fr}
}

/* ---- Signature de marque ---------------------------------------------- */
/* Le logo porte « LEARN ENGLISH BY LIVING IT. » en capitales italiques,
   anthracite, avec « LIVING IT. » en rouge. La signature typographique
   reprend exactement ce traitement pour que les deux se repondent. */
.signature{
  margin:0; font-style:italic; font-weight:800; line-height:1.35;
  font-size:13.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--anthracite);
}
.signature em{font-style:italic; color:var(--rouge-vif, var(--red))}
.signature.grande{font-size:15px; letter-spacing:.19em}
/* Sur fond sombre le rouge du logo tombe a 2,65 : on passe au rouge clair. */
.signature.claire{color:#E8EDF2}
.signature.claire em{color:var(--rouge-clair)}
@media (max-width:520px){
  .signature{font-size:12.5px; letter-spacing:.14em}
  .signature.grande{font-size:13.5px; letter-spacing:.15em}
}

/* ---- « Une journée avec GFE » ----------------------------------------- */
/* Le bloc doit occuper toute la largeur alors qu'il vit dans un <main>
   borne a 1080 px. Le debordement passe par une ombre portee immense
   plutot que par 100vw, qui compterait la barre de defilement et creerait
   un defilement horizontal ; le clip-path l'empeche de baver en hauteur. */
.journee{
  position:relative; margin-top:78px; padding:66px 0 60px;
  background:var(--anthracite-fond);
  box-shadow:0 0 0 100vmax var(--anthracite-fond);
  clip-path:inset(0 -100vmax);
  color:#E8EDF2;
}
.journee .part-tag{color:#93A0AC}
.journee .part-tag .num{background:var(--jaune-vif); color:var(--anthracite)}
.journee h2{margin:10px 0 14px; color:#F4F7FA}
.journee .gfe{color:var(--jaune-vif)}
.journee .lead{color:#AEB9C4; max-width:60ch}

/* La route du logo : un filet a tirets jaunes qui relie les cinq moments. */
.jour{
  list-style:none; margin:46px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0 20px;
  position:relative;
}
.jour::before{
  content:""; position:absolute; left:26px; right:26px; top:19px; height:3px;
  background:repeating-linear-gradient(90deg,
    var(--jaune-vif) 0 16px, transparent 16px 30px);
  opacity:.55;
}
.moment{position:relative; padding-top:0}
.heure{
  position:relative; z-index:2;
  display:inline-block; margin-bottom:16px;
  background:var(--jaune-vif); color:var(--anthracite);
  font-weight:800; font-size:15px; letter-spacing:.04em;
  padding:8px 14px; border-radius:99px;
  box-shadow:0 0 0 6px var(--anthracite-fond);
}
.duree{
  display:block; margin-bottom:6px;
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rouge-clair);
}
.moment h3{margin:0 0 10px; font-size:17.5px; font-weight:750; color:#F4F7FA; line-height:1.3}
/* Les phrases anglaises sont la matiere du produit : on les met en avant. */
.moment .dit{
  margin:0 0 10px; padding:10px 12px;
  background:rgba(252,180,3,.10); border-left:3px solid var(--jaune-vif);
  border-radius:0 8px 8px 0;
  font-style:italic; font-size:14.5px; line-height:1.45; color:var(--jaune-vif);
}
.moment .quoi{margin:0; font-size:14.5px; line-height:1.55; color:#AEB9C4}

.bilan{
  margin-top:44px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px;
}
.bilan p{margin:0; font-size:17px; color:#C8D2DB; max-width:62ch}
.bilan strong{color:var(--jaune-vif); font-weight:800}
.bilan em{color:#F4F7FA; font-style:italic}

@media (max-width:1000px){
  .jour{grid-template-columns:repeat(2,1fr); gap:34px 24px}
  .jour::before{display:none}
}
@media (max-width:620px){
  /* Sur telephone la route se redresse : un rail vertical le long des heures. */
  .journee{margin-top:56px; padding:48px 0 44px}
  .jour{grid-template-columns:1fr; gap:0}
  .moment{padding:0 0 26px 62px}
  .moment::before{
    content:""; position:absolute; left:19px; top:8px; bottom:-8px; width:3px;
    background:repeating-linear-gradient(180deg,
      var(--jaune-vif) 0 12px, transparent 12px 24px);
    opacity:.55;
  }
  .moment:last-child{padding-bottom:0}
  .moment:last-child::before{display:none}
  .heure{position:absolute; left:0; top:0; margin:0; font-size:13px; padding:6px 10px}
  .duree{margin-bottom:4px}
}

/* ---- Filet de section, repris du bas du logo -------------------------- */
/* Le logo se termine par un trait fin coupe d'un losange jaune. Le meme
   motif separe les sections la ou la route pleine largeur serait trop. */
.filet-gfe{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:58px auto 0; max-width:340px;
}
.filet-gfe::before,.filet-gfe::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.filet-gfe span{
  width:11px; height:11px; flex:none; transform:rotate(45deg);
  background:var(--jaune-vif); border-radius:2px;
}

/* ---- Coaching individuel : la bande premium ---------------------------- */
/* Le débordement pleine largeur passe par une ombre portée, comme le bloc
   « Une journée avec GFE » : 100vw compterait la barre de défilement et
   rouvrirait un débordement horizontal. */
.vip{
  position:relative; margin-top:78px; padding:60px 0 56px;
  background:var(--anthracite-fond);
  box-shadow:0 0 0 100vmax var(--anthracite-fond);
  clip-path:inset(0 -100vmax);
  color:#E8EDF2;
}
.vip .part-tag{color:#93A0AC}
.vip .part-tag .num{background:var(--jaune-vif); color:var(--anthracite); letter-spacing:.08em}
.vip h2{margin:10px 0 14px; color:#F4F7FA}
.vip .gfe{color:var(--jaune-vif)}
.vip .lead{color:#AEB9C4; max-width:62ch}

.chiffres-v{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin:34px 0 6px; padding:22px 0;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.chiffres-v b{
  display:block; font-size:30px; font-weight:800; line-height:1.1;
  color:var(--jaune-vif); letter-spacing:-.02em;
}
.chiffres-v span{display:block; margin-top:4px; font-size:14px; color:#AEB9C4}

.piliers-v{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:30px 0 0}
.pilier-v b{
  display:block; margin-bottom:6px; font-size:15px; font-weight:750; color:#F4F7FA;
}
.pilier-v p{margin:0; font-size:14.5px; line-height:1.55; color:#AEB9C4}

.regle-v{
  margin:30px 0 0; padding:16px 20px;
  background:rgba(252,180,3,.10); border-left:3px solid var(--jaune-vif);
  border-radius:0 12px 12px 0;
}
.regle-v p{margin:0; font-size:15.5px; line-height:1.6; color:#D8E0E7}
.regle-v b{color:var(--jaune-vif)}

.vip .actions{margin-top:30px}
/* Sur fond sombre, le bouton clair du site deviendrait invisible. */
.vip .btn{background:transparent; color:#E8EDF2; border-color:rgba(255,255,255,.32)}
.vip .btn:hover{background:rgba(255,255,255,.08); color:#fff}
.vip .btn.solid{background:var(--jaune-vif); color:var(--anthracite); border-color:var(--jaune-vif)}
.vip .btn.solid:hover{background:#FFC63A; color:var(--anthracite)}

@media (max-width:1000px){
  .piliers-v{grid-template-columns:repeat(2,1fr); gap:22px}
  .chiffres-v{grid-template-columns:repeat(2,1fr); gap:22px 18px}
}
@media (max-width:620px){
  .vip{margin-top:56px; padding:44px 0 42px}
  .piliers-v{grid-template-columns:1fr}
  .chiffres-v{grid-template-columns:1fr; gap:16px; text-align:left}
  .chiffres-v b{font-size:26px}
  .vip .actions{flex-direction:column; align-items:stretch}
  .vip .btn{text-align:center}
}