@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

/*
  Lakanal Formation - proposition graphique basée sur axe2.pdf
  Palette principale du document : #7a9b9e / #f0924c / #f5f1ec
  Esprit : jazz, bichromie, aplats, grilles/portées, Renner + Playfair Display.
  Cette feuille ne change ni la structure HTML ni les images du site.
*/
:root{
  --bg:#151515;
  --paper:#f5f1ec;
  --paper2:#ebe8e2;
  --ink:#171717;
  --muted:#66635f;
  --white:#fff;
  --accent:#f0924c;
  --teal:#7a9b9e;
  --cream:#f5f1ec;
  --orange:#f0924c;
  --black:#171717;
  --line:rgba(23,23,23,.18);
  --lineDark:rgba(245,241,236,.34);
}

html{background:var(--cream)}
body{
  background:var(--cream);
  color:var(--black);
  font-family:"Jost","Futura","Futura LT","Century Gothic",Arial,sans-serif;
  letter-spacing:.005em;
}

/* TITRES : linéale géométrique + didone pour les respirations éditoriales */
.hero h1,.pageHero h1,.sectionHead h2,.featureText h2,.cta h2,.contactBox h2,.legalContent h1,
.session h3,.card h3,.content h2,.content h3,.infoCard h3,.reason h3{
  font-family:"Jost","Futura","Futura LT","Century Gothic",Arial,sans-serif;
}
.hero h1,.pageHero h1,.sectionHead h2,.featureText h2,.cta h2,.legalContent h1{
  font-weight:700;
  letter-spacing:-.055em;
}
.hero h1 em,.lead,.pageHero .sub,.quote p,.fact strong,.contactBox a.big,.legalContent h2{
  font-family:"Playfair Display",Didot,"Didot LT Roman",Georgia,serif;
}
.lead,.pageHero .sub,.quote p,.fact strong{letter-spacing:-.02em}

/* En-tête clair tel que la piste web du PDF */
.topbar,.topbar.scrolled,.topbar.solid{
  background:rgba(245,241,236,.96);
  color:var(--black);
  border-bottom:1px solid rgba(23,23,23,.16);
  backdrop-filter:blur(14px);
  box-shadow:none;
}
.nav{min-height:78px}
.brandLogo{filter:invert(1);width:126px;max-height:50px}
.brandLabel{color:var(--black);font-family:"Playfair Display",Georgia,serif;font-size:16px;letter-spacing:.02em;text-transform:none;font-weight:400}
.navlinks{font-weight:600;letter-spacing:.08em}
.navlinks a{opacity:.75;position:relative}
.navlinks a:not(.navcta):after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--orange);transition:.2s ease}
.navlinks a:hover:after,.navlinks a[aria-current="page"]:after{right:0}
.navcta{border:0;background:var(--orange);color:var(--black);padding:12px 18px;font-weight:700}
.menu{color:var(--black)}

/* Hero : image intacte, traitement de superposition inspiré des aplats / grilles */
.hero,.pageHero{isolation:isolate}
.hero:before{
  background:
    linear-gradient(90deg,rgba(17,17,17,.88) 0%,rgba(17,17,17,.56) 52%,rgba(17,17,17,.18) 100%),
    linear-gradient(0deg,rgba(17,17,17,.58),transparent 48%);
}
.hero:after,.pageHero:after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:4.4vw;top:12%;width:min(22vw,300px);aspect-ratio:1;
  border-radius:50%;background:var(--orange);mix-blend-mode:screen;opacity:.33;
  box-shadow:-95px 105px 0 rgba(122,155,158,.30);
}
.heroInner{padding-top:150px}
.hero h1{line-height:.87;text-transform:none}
.hero h1 em{font-weight:400;font-style:italic;letter-spacing:-.04em}
.heroCopy{font-family:"Playfair Display",Georgia,serif;font-size:20px;line-height:1.48;max-width:690px}
.heroSide{border-left:5px solid var(--teal);padding-left:22px}
.heroSide strong{font-family:"Jost",Arial,sans-serif;font-weight:700;color:var(--orange);font-size:42px}
.eyebrow,.label,.meta,.fact small,.infoRow small,.quote small,.form label{
  font-family:"Jost",Arial,sans-serif;font-weight:600;letter-spacing:.20em;
}
.eyebrow:after,.label:after{content:"";display:inline-block;width:70px;height:1px;background:var(--teal);margin-left:13px;vertical-align:middle}

/* Boutons plats / géométriques */
.btn{border-radius:0;font-weight:700;letter-spacing:.10em;position:relative;overflow:hidden}
.btn.white,.btn.dark{background:var(--orange);border-color:var(--orange);color:var(--black)}
.btn.white:hover,.btn.dark:hover{background:var(--teal);border-color:var(--teal);color:var(--black)}
.btn.ghost{border-color:var(--cream);color:var(--cream)}
.btn.ghost:hover{background:var(--cream);color:var(--black)}

/* Portée / grille jazz discrète */
.introGrid,.sectionHead,.content h2,.contactBox{
  position:relative;
}
.introGrid:before,.sectionHead:before,.content h2:before,.contactBox:before{
  content:"";position:absolute;left:0;right:0;top:-17px;height:10px;opacity:.45;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--teal) 0 1px,transparent 1px 3px);
}
.introGrid{border-top:0;padding-top:40px}
.lead em{color:var(--orange)}

/* Sessions : même structure, lecture plus graphique */
.sessionList{border-top:4px solid var(--black)}
.session{position:relative;padding:25px 18px 25px 0;background:transparent;border-bottom:1px solid rgba(23,23,23,.20)}
.session:before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal);z-index:0;transition:.22s ease}
.session>*{position:relative;z-index:1}
.session:hover{padding-left:18px;background:transparent}
.session:hover:before{width:100%}
.session:hover .session p,.session:hover .meta,.session:hover .datebox small{color:rgba(23,23,23,.76)}
.datebox{font-family:"Jost",Arial,sans-serif;font-weight:700;color:var(--orange);font-size:30px}
.datebox small{font-family:"Jost",Arial,sans-serif;font-weight:600;color:var(--black)}
.arrow{font-family:"Jost",Arial,sans-serif;font-weight:400;color:var(--orange)}
.session:hover .arrow{color:var(--black)}

/* Bloc "Pourquoi" : grand aplat bleu-gris comme les maquettes du PDF */
.dark{background:var(--teal);color:var(--black)}
.dark .label,.dark .muted{color:var(--black)}
.featurePhoto{box-shadow:20px 20px 0 var(--orange)}
.featurePhoto:after{background:var(--black);color:var(--cream)}
.featureText h2{color:var(--black)}
.reason{border-top:1px solid rgba(23,23,23,.38)}
.reason:last-child{border-bottom:1px solid rgba(23,23,23,.38)}
.reason .num{
  font-family:"Jost",Arial,sans-serif;font-size:12px;font-weight:700;color:var(--black);
  width:44px;height:44px;border-radius:50%;background:var(--orange);display:grid;place-items:center;
  box-shadow:12px -8px 0 rgba(245,241,236,.55);
}
.reason p{color:rgba(23,23,23,.78)}

/* Cartes : accords colorés circulaires du PDF, sans changer le contenu */
.cards{gap:0;border-top:1px solid var(--black);border-left:1px solid var(--black)}
.card{position:relative;overflow:hidden;min-height:180px;border:0;border-right:1px solid var(--black);border-bottom:1px solid var(--black);background:var(--cream);padding:31px}
.card:before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;right:-34px;top:-35px;background:var(--orange);opacity:.88}
.card:nth-child(2n):before{background:var(--teal)}
.card:after{content:"";position:absolute;width:46px;height:46px;border-radius:50%;right:24px;top:38px;background:rgba(23,23,23,.10)}
.card h3{font-size:22px;max-width:80%;position:relative;z-index:1}
.card p{position:relative;z-index:1}
.card:hover{background:#fff}

/* Témoignages : aplat orange de la charte */
.quoteBand{background:var(--orange);color:var(--black)}
.quotes{gap:0;border-left:1px solid rgba(23,23,23,.35)}
.quote{padding:28px;border-top:1px solid rgba(23,23,23,.35);border-right:1px solid rgba(23,23,23,.35);border-bottom:1px solid rgba(23,23,23,.35)}
.stars{color:var(--black);font-weight:700}
.quote small{color:rgba(23,23,23,.65)}

/* Pages formation */
.pageHero:before{background:linear-gradient(90deg,rgba(17,17,17,.90),rgba(17,17,17,.50) 58%,rgba(17,17,17,.16)),linear-gradient(0deg,rgba(17,17,17,.60),transparent 55%)}
.pageHero:after{width:min(16vw,230px);right:7vw;top:16%;opacity:.32}
.pageHero .sub{font-style:normal;color:var(--cream);font-size:clamp(22px,2.3vw,35px)}
.facts{border-top:0;border-bottom:4px solid var(--black);background:var(--teal)}
.fact{border-right:1px solid rgba(23,23,23,.32)}
.fact small{color:rgba(23,23,23,.64)}
.fact strong{font-family:"Jost",Arial,sans-serif;font-weight:600;color:var(--black)}
.content p{color:#373431}
.content h2{padding-top:14px}
.content h2:before{top:0;width:118px;right:auto}
.checklist li:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--orange);top:17px}
.program{border-top:4px solid var(--black)}
.program summary{font-family:"Jost",Arial,sans-serif}
.program summary:after{font-family:"Jost",Arial,sans-serif;color:var(--orange);font-weight:400}
.notice{border-left:0;border-top:7px solid var(--orange);background:var(--paper2);color:#383531}
.infoCard{border:1px solid var(--black);background:var(--cream);box-shadow:14px 14px 0 var(--teal)}
.infoCard h3{border-bottom:5px solid var(--orange);padding-bottom:12px}
.infoRow{border-top:1px solid rgba(23,23,23,.18)}
.trainer{position:relative}
.trainer:before{content:"";position:absolute;left:-14px;top:-14px;width:54px;height:54px;border-radius:50%;background:var(--orange);opacity:.82;z-index:2;pointer-events:none;mix-blend-mode:multiply}
.trainerPhoto{filter:saturate(.78) contrast(1.06)}

/* Formulaire / contact */
.contactGrid{gap:72px}
.contactBox{border-top:0;padding-top:34px}
.contactBox h2{font-weight:700}
.contactBox a.big{font-size:30px}
.form input,.form textarea,.form select{background:#fffdf9;border:1px solid rgba(23,23,23,.38);border-radius:0;font-family:"Jost",Arial,sans-serif}
.form input:focus,.form textarea:focus,.form select:focus{outline:3px solid rgba(122,155,158,.36);border-color:var(--teal)}

/* Grand CTA photo : image conservée + signal couleur */
.cta{border-top:14px solid var(--orange);border-bottom:14px solid var(--teal)}
.cta:before{background:linear-gradient(90deg,rgba(17,17,17,.90),rgba(17,17,17,.48),rgba(17,17,17,.18))}
.cta h2{color:var(--cream)}

/* Footer */
.sitefoot{background:var(--black);color:var(--cream);position:relative;padding-top:55px}
.sitefoot:before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:linear-gradient(90deg,var(--teal) 0 48%,var(--orange) 48% 72%,var(--cream) 72%)}
.footGrid{color:rgba(245,241,236,.66)}
.footGrid strong,.footBrand{color:var(--cream)}
.legalLine{color:rgba(245,241,236,.48);border-top-color:rgba(245,241,236,.16)}

/* Pages légales */
.legalContent h1{color:var(--black)}
.legalContent h1:after{content:"";display:block;width:170px;height:8px;margin-top:22px;background:linear-gradient(90deg,var(--teal) 0 62%,var(--orange) 62%)}
.legalContent h2{font-family:"Playfair Display",Didot,Georgia,serif}

/* Badge de test volontairement discret */
.testBadge{background:var(--cream);border:1px solid var(--black);color:var(--black);box-shadow:none}
.testBadge:before{content:"";display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;margin-right:7px}

@media(max-width:920px){
  .topbar,.topbar.scrolled,.topbar.solid{background:rgba(245,241,236,.98)}
  .navlinks{background:var(--cream);color:var(--black);border-top:1px solid rgba(23,23,23,.16)}
  .featurePhoto{box-shadow:12px 12px 0 var(--orange)}
  .hero:after,.pageHero:after{width:170px;right:5vw;top:15%;opacity:.25}
  .cards{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .brandLogo{filter:invert(1);width:98px}
  .brandLabel{font-size:14px}
  .hero h1{font-size:54px}
  .heroCopy{font-size:18px}
  .hero:after,.pageHero:after{width:115px;box-shadow:-45px 62px 0 rgba(122,155,158,.28)}
  .cards{grid-template-columns:1fr}
  .infoCard{box-shadow:8px 8px 0 var(--teal)}
  .quote{padding:24px 0;border-right:0;border-left:0}
  .quotes{border-left:0}
}


/* ==========================================================
   AJUSTEMENT DEMANDÉ — 10/09/2026
   Bandeau supérieur + pied de page en bleu de la charte
   Bleu charte : #7a9b9e
   ========================================================== */

/* Bandeau supérieur */
.topbar,
.topbar.scrolled,
.topbar.solid{
  background:rgba(122,155,158,.98);
  color:var(--black);
  border-bottom-color:rgba(23,23,23,.20);
}

.brandLogo{
  filter:invert(1);
}
.brandLabel,
.navlinks,
.navlinks a,
.menu{
  color:var(--black);
}

.navcta{
  background:var(--orange);
  color:var(--black);
}

/* Menu mobile : même bleu que le bandeau */
@media(max-width:920px){
  .topbar,
  .topbar.scrolled,
  .topbar.solid{
    background:rgba(122,155,158,.99);
  }
  .navlinks{
    background:var(--teal);
    color:var(--black);
    border-top-color:rgba(23,23,23,.18);
  }
}

/* Pied de page */
.sitefoot{
  background:var(--teal);
  color:var(--black);
}

.sitefoot:before{
  background:var(--teal);
}

.footGrid,
.footGrid strong,
.footBrand,
.footGrid a,
.legalLine,
.legalLine a{
  color:var(--black);
}

.legalLine{
  border-top-color:rgba(23,23,23,.22);
}


/* ==========================================================
   AJUSTEMENT DEMANDÉ — BLEU CHARTE
   Rond de la photo d'accueil + bouton prochaines sessions
   ========================================================== */

/* Rond décoratif de la photo d'accueil */
.hero:after{
  background:var(--teal) !important;
}

/* Bouton "Voir les prochaines sessions" sur la page d'accueil */
.hero .actions .btn.white:first-child{
  background:var(--teal) !important;
  border-color:var(--teal) !important;
  color:var(--black) !important;
}

.hero .actions .btn.white:first-child:hover{
  background:transparent !important;
  border-color:var(--teal) !important;
  color:var(--white) !important;
}


/* ==========================================================
   AJUSTEMENT V4 — RETOUR BANDEAU PREMIER JET
   Transparent sur le hero, noir au scroll
   + typographie principale du hero en bleu charte
   ========================================================== */

/* Header : transparent sur la première image */
.topbar{
  background:transparent !important;
  color:var(--white) !important;
  border-bottom-color:transparent !important;
  backdrop-filter:none !important;
}

/* Header : noir dès que l'on descend, ou sur les pages internes */
.topbar.scrolled,
.topbar.solid{
  background:rgba(11,11,11,.95) !important;
  color:var(--white) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(12px) !important;
}

/* Logo et navigation : blancs, comme le premier jet */
.brandLogo{
  filter:none !important;
}
.brandLabel,
.topbar .navlinks,
.topbar .navlinks a,
.topbar .menu{
  color:var(--white) !important;
}

/* CTA du menu : retour au bouton contour blanc */
.topbar .navcta{
  background:transparent !important;
  color:var(--white) !important;
  border:1px solid var(--white) !important;
}
.topbar .navcta:hover{
  background:var(--white) !important;
  color:var(--black) !important;
}

/* Sur la première image : typographie principale en bleu de la charte */
.hero .heroInner > div > .eyebrow,
.hero .heroInner > div > h1,
.hero .heroInner > div > h1 em,
.hero .heroInner > div > .heroCopy{
  color:var(--teal) !important;
}

/* Le trait après l'eyebrow reste dans la même teinte */
.hero .heroInner > div > .eyebrow:after{
  background:var(--teal) !important;
}

/* Menu mobile : noir lorsqu'il est déployé pour conserver la lisibilité */
@media(max-width:920px){
  .topbar{
    background:transparent !important;
  }
  .topbar.scrolled,
  .topbar.solid{
    background:rgba(11,11,11,.97) !important;
  }
  .topbar .navlinks{
    background:rgba(11,11,11,.98) !important;
    color:var(--white) !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
  }
}


/* V5 — Sous-texte du hero en blanc */
.hero .heroInner > div > .heroCopy{
  color:var(--white) !important;
}


/* ==========================================================
   BLOC 04 — CHOISIR VOTRE FORMATION
   Repris de la V6, intégré à la base V5 validée.
   ========================================================== */
.routingSection{padding:120px 0 135px;background:var(--paper)}
.routingIntro{display:grid;grid-template-columns:170px minmax(0,1fr) 300px;gap:32px;align-items:end;margin-bottom:62px}
.chapterLine{display:flex;gap:18px;align-items:center;margin-bottom:27px}
.routingIntro .chapterLine{display:block;margin:0}
.chapterLine>span{font-size:12px;font-weight:700;width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center}
.routingIntro .chapterLine>span{margin-bottom:17px}
.chapterLine .label{margin:0;color:var(--ink)}
.routingIntro h2{grid-column:2;margin:0;font-size:clamp(48px,5.6vw,78px);line-height:.88;letter-spacing:-.06em}
.routingIntro>p{margin:0 0 5px;color:#5d5953;line-height:1.55}
.routingMap{display:grid;grid-template-columns:1.12fr .88fr 1fr;grid-template-areas:"a a b" "c d b" "c e f";min-height:610px;border:1px solid var(--ink)}
.route{min-height:190px;padding:29px;position:relative;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:transform .18s ease,filter .18s ease}
.route:before{content:"";position:absolute;border-radius:50%;width:120px;height:120px;right:-55px;top:-55px;border:1px solid currentColor;opacity:.45}
.route:hover{transform:translateY(-4px);filter:brightness(.98)}
.route:hover:before{background:currentColor;opacity:.10}
.route1{grid-area:a;background:#fffdf9}
.route2{grid-area:b;background:var(--orange)}
.route3{grid-area:c;background:var(--teal)}
.route4{grid-area:d;background:#fffdf9}
.route5{grid-area:e;background:#fffdf9}
.route6{grid-area:f;background:var(--ink);color:var(--paper)}
.route h3{font-size:clamp(25px,2.6vw,38px);line-height:.95;margin:18px 0 10px;letter-spacing:-.045em;max-width:85%}
.route p{margin:0;font-size:13px;line-height:1.48;max-width:350px;opacity:.78}
.routeCode{position:absolute;left:28px;top:25px;font-size:8px;letter-spacing:.17em;text-transform:uppercase}
.route i{position:absolute;right:26px;bottom:24px;font-style:normal;font-size:25px}
@media(max-width:1000px){
  .routingIntro{grid-template-columns:130px 1fr}
  .routingIntro>p{grid-column:2}
}
@media(max-width:700px){
  .routingSection{padding:80px 0 95px}
  .routingIntro{display:block}
  .routingIntro h2{font-size:49px;margin:22px 0}
  .routingIntro>p{max-width:430px}
  .routingMap{display:block;min-height:0}
  .route{min-height:175px;border-right:0}
}


/* ==========================================================
   NEWSLETTER — CONTACT
   ========================================================== */
.newsletterBox{
  margin-top:38px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.newsletterEyebrow{
  margin:0 0 9px !important;
  font-size:10px !important;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal) !important;
}
.newsletterBox h3{
  margin:0 0 10px;
  font:400 27px/1.1 "Playfair Display", Georgia, serif;
  letter-spacing:-.025em;
}
.newsletterIntro{
  margin:0 0 20px !important;
  max-width:520px;
}
.newsletterForm>label:not(.newsletterConsent){
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin:0 0 7px;
}
.newsletterRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
}
.newsletterRow input[type="email"]{
  min-height:49px;
  width:100%;
  padding:0 13px;
  border:1px solid #aaa49d;
  background:#fff;
  color:var(--ink);
  font:15px Arial,Helvetica,sans-serif;
  border-radius:0;
}
.newsletterRow input[type="email"]:focus{
  outline:2px solid var(--teal);
  outline-offset:1px;
}
.newsletterRow .btn{
  white-space:nowrap;
  cursor:pointer;
}
.newsletterConsent{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:9px;
  align-items:start;
  margin-top:13px;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
}
.newsletterConsent input{
  margin:2px 0 0;
}
@media(max-width:600px){
  .newsletterRow{
    grid-template-columns:1fr;
  }
  .newsletterRow .btn{
    width:100%;
  }
}