/* ============================================================
   Bluelight Consulting — Design system
   Direction : bleu nuit réchauffé
   Froid (bleu nuit) pour informer · chaud (ambre) pour l'action
   Typo : Geist (texte et titres) + Source Serif 4 italique (mots d'accent)
   ============================================================ */

:root{
  /* bleus nuit */
  --nuit:#15233F;
  --nuit-2:#1E3457;
  --nuit-3:#27406B;
  /* clairs */
  --creme:#FFFFFF;
  --creme-2:#F4F5F7;
  --blanc:#FFFFFF;
  /* encres */
  --encre:#16203A;
  --gris:#5A6275;
  --gris-clair:#6E7589;
  --sur-nuit:#EDE9E0;
  --sur-nuit-doux:rgba(237,233,224,.72);
  /* chaud / accent */
  --ambre:#C56A3B;
  --ambre-clair:#DD8A55;
  --ambre-deep:#A24E22;
  --ambre-hover:#8A3F19;
  /* lignes */
  --ligne:#E2E5EA;
  --ligne-nuit:rgba(237,233,224,.16);
  --encre-prose:#39415A;
  --nuit-foot:#0F1B30;
  /* divers */
  --maxw:1140px;
  --ombre:none;
  --ombre-fort:none;
  --ombre-btn:none;
  --r:0;
  --t:.28s cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-y:scroll;scrollbar-gutter:stable}
body{
  background:var(--creme);
  color:var(--encre);
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--ambre);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:'Geist',system-ui,sans-serif;font-weight:500;letter-spacing:-.02em;line-height:1.08}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.center{text-align:center}
.mx{max-width:680px}
.center .mx{margin-left:auto;margin-right:auto}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ambre-deep);color:#fff;font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:15px 28px;border-radius:0;border:0;cursor:pointer;
  box-shadow:var(--ombre-btn);transition:var(--t);
}
.btn:hover{background:var(--ambre-hover)}
.btn .arr{transition:transform var(--t)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;color:var(--sur-nuit);font-weight:600;font-size:15px;
  padding:15px 22px;border-radius:0;border:1px solid var(--ligne-nuit);transition:var(--t);
}
.btn-ghost:hover{border-color:var(--ambre-clair);color:#fff}
/* bouton fantôme sur fond clair */
.btn-light{background:transparent;color:var(--encre);border:1px solid #CDD2DB;padding:14px 27px}
.btn-light:hover{background:transparent;border-color:var(--ambre-deep)}

/* ---------- eyebrow / titres de section ---------- */
.eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--ambre-deep);margin-bottom:18px;text-wrap:balance;
}
.eyebrow.on-nuit{color:var(--ambre-clair)}
.section-title{
  display:flex;align-items:center;gap:16px;
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--ambre-deep);margin-bottom:34px;
}
.section-title::after{content:"";flex:1;height:1px;background:var(--ligne)}
.on-nuit .section-title{color:var(--ambre-clair)}
.on-nuit .section-title::after{background:var(--ligne-nuit)}

h2.big{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:18px}
.lead{font-size:1.1rem;color:var(--gris);max-width:640px}
.on-nuit .lead{color:var(--sur-nuit-doux)}

/* ---------- sections ---------- */
section{padding:88px 0}
.accent-amber{color:var(--ambre-clair);font-weight:600}
.nuit{background:var(--nuit);color:var(--sur-nuit)}

/* parcours méthode — stepper vertical sur fond nuit */
.method-path{margin-top:30px;max-width:720px}
.mp-step{position:relative;padding:0 0 32px 64px}
.mp-step::before{content:"";position:absolute;left:21px;top:8px;bottom:-4px;width:2px;background:var(--ligne-nuit)}
.mp-step:last-child::before{display:none}
.mp-node{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--nuit-2);border:2px solid var(--ambre-clair);display:flex;align-items:center;justify-content:center;font-family:'Geist',sans-serif;font-weight:600;color:var(--ambre-clair);font-size:1.1rem}
.mp-tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ambre-clair);font-weight:600;margin-bottom:4px}
.mp-step h3{font-size:1.22rem;color:#fff;margin-bottom:6px}
.mp-step p{font-size:.95rem;color:var(--sur-nuit-doux);line-height:1.5;max-width:560px}
.mp-note{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:.84rem;font-weight:500;color:rgba(237,233,224,.62)}
.mp-note .mpn-ico{width:14px;height:14px;flex:0 0 auto;color:var(--ambre-clair)}
.method-out{display:flex;align-items:center;gap:16px;color:#fff;font-family:'Geist',sans-serif;font-size:clamp(1.15rem,2.2vw,1.35rem);line-height:1.5}
.method-out .mo-ico{width:26px;height:26px;color:var(--ambre-clair);flex:0 0 auto}
.method-out .mo-text{padding-left:16px;border-left:2px solid var(--ambre-clair)}
.method-cta{display:flex;align-items:center;gap:18px;margin-top:38px;padding-top:34px;border-top:1px solid var(--ligne-nuit);flex-wrap:wrap}
.nuit h1,.nuit h2,.nuit h3,.nuit h4{color:#fff}
.creme-2{background:var(--creme-2)}
section[id]{scroll-margin-top:84px}

/* parcours — blocs chronologiques éditoriaux (page À propos, style 2) */
.parcours{margin-top:6px}
.pc-row{display:grid;grid-template-columns:230px 1fr;gap:40px;padding:34px 0;border-top:1px solid var(--ligne)}
.pc-row:first-child{border-top:0}
.pc-era{font-family:'Geist',sans-serif;font-size:1.5rem;color:var(--encre);font-weight:600;line-height:1.1}
.pc-sub{font-size:.82rem;letter-spacing:.04em;color:var(--ambre);margin-top:6px;text-transform:uppercase;font-weight:600}
.pc-main h3{font-size:1.6rem;color:var(--encre);margin-bottom:12px;line-height:1.12}
.pc-main p{font-size:1.04rem;color:var(--encre-prose);line-height:1.7;max-width:640px}
.parcours-signature{max-width:760px;margin-top:46px;padding-left:22px;border-left:3px solid var(--ambre);font-family:'Geist',sans-serif;font-size:1.28rem;line-height:1.5;color:var(--encre)}
/* gros chiffre-repère dans la colonne de gauche (version allégée) */
.pc-num{font-family:'Geist',sans-serif;font-size:2.9rem;font-weight:600;color:var(--ambre-deep);line-height:1;letter-spacing:-.02em}
.pc-num small{font-size:1.5rem;vertical-align:.3rem;margin-left:2px}
/* mots-repères de valeurs (façon icônes Stratiq) */
.values-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;justify-content:center;margin-top:52px;font-family:'Geist',sans-serif;font-size:clamp(1.1rem,2.1vw,1.4rem);color:var(--encre)}
.values-row span{position:relative;padding-left:26px}
.values-row span:first-child{padding-left:0}
.values-row span:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:0;background:var(--ambre);transform:translateY(-50%) rotate(45deg)}
/* chapeau de la section parcours */
.parcours-chapo{font-family:'Geist',sans-serif;font-size:1.18rem;color:var(--gris);margin:0 0 30px;line-height:1.4}
/* ligne « fondateur » sous la légende du portrait */
.cap-founder{display:block;font-size:.78rem;color:var(--gris-clair);margin-top:3px}
/* section « ce que je peux vous apporter » (4 domaines en cartes) */
.exp-intro{color:var(--gris);font-size:1.1rem;margin:0 0 6px}
.expertise{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:22px}
.exp-card{position:relative;background:#fff;border:1px solid var(--ligne);border-radius:0;padding:34px 32px 30px}
.exp-card h3{font-family:'Geist',sans-serif;font-size:1.28rem;font-weight:600;color:var(--encre);margin-bottom:12px}
.exp-kw{font-size:1rem;color:var(--encre-prose);line-height:1.65}
/* frontière nette entre les deux fonds crème (parcours / apport) */
.apport-sep{background:#F4F5F7;border-top:1px solid var(--ligne)}
/* page À propos : hero identité (photo carrée, bloc resserré nom/titre/fondateur puis accroche) */
.hero-lead.no-rule{border-top:0;padding-top:0;margin-top:14px}
.hero-meta{margin-top:2px;font-family:'Geist',sans-serif;font-size:.9rem;letter-spacing:.02em;color:var(--sur-nuit-doux)}
.hero.hero--about{min-height:auto;padding:128px 0 92px}
.hero.hero--about h1{font-size:clamp(1.9rem,3vw,2.5rem);margin-bottom:8px}
.hero.hero--about .role{border-top:0;padding-top:0;margin-bottom:4px}
.hero.hero--about .hero-meta{margin-top:0;color:#fff;font-weight:500}
.hero.hero--about .hero-lead{margin-top:12px;margin-bottom:0;color:#fff;font-weight:600;font-style:normal}
.hero.hero--about .hero-photo img{aspect-ratio:1/1;object-position:center 28%}
.hero.hero--about .hero-photo .frame::after{display:none}
.hero-quote{font-family:'Geist',system-ui,sans-serif;font-style:normal;font-size:1.28rem;line-height:1.5;color:var(--sur-nuit-doux);margin-top:18px;max-width:560px}
/* page À propos : timeline parcours (chiffre-repère héros + numéro d'ordre discret) */
.mp-head{display:flex;align-items:center;gap:20px;margin-bottom:8px}
.mp-heading{display:flex;flex-direction:column}
.mp-heading .mp-tag{margin-bottom:3px}
.mp-heading h3{margin-bottom:0}
.mp-metric{flex:0 0 auto;font-family:'Geist',sans-serif;font-weight:600;font-size:2.6rem;line-height:1;letter-spacing:-.02em;color:var(--ambre-clair)}
.mp-metric small{font-size:1.1rem;vertical-align:.25rem;margin-left:2px}
.method-path .mp-step{padding-bottom:40px}
/* page À propos : parcours éditorial clair (chiffre-ancre + texte lisible, très aéré) */
.journey{max-width:920px}
.jn-row{display:grid;grid-template-columns:230px 1fr;gap:44px;padding:46px 0;border-top:1px solid var(--ligne);align-items:start}
.jn-row:first-child{border-top:0;padding-top:10px}
.jn-aside{padding-top:6px}
.jn-metric{font-family:'Geist',sans-serif;font-size:3.4rem;font-weight:600;color:var(--ambre-deep);line-height:1;letter-spacing:-.02em}
.jn-metric small{font-size:1.3rem;vertical-align:.3rem;margin-left:2px}
.jn-metric--word{font-size:1.9rem;font-style:italic;color:var(--encre)}
.jn-era{margin-top:14px;display:flex;flex-direction:column;gap:3px;max-width:200px}
.jn-era-name{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ambre);font-weight:600;line-height:1.3}
.jn-era-dur{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:500;line-height:1.3}
.jn-text{font-size:1.06rem;line-height:1.8;color:var(--encre-prose);max-width:60ch;margin:0}
/* page À propos : parcours en frise chevrons cliquable */
.pf-bar{position:relative;display:flex;gap:6px;margin-top:28px}
.pf-caret{position:absolute;top:100%;left:0;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid var(--nuit);transform:translateX(-50%);transition:left .28s ease;pointer-events:none}
.pf-step{flex:1;position:relative;border:0;cursor:pointer;font-family:inherit;text-align:left;background:#EEF0F3;color:var(--encre);padding:16px 24px 16px 36px;transition:background .2s;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%,20px 50%)}
.pf-step:first-child{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%);padding-left:24px}
.pf-dur{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600;margin-bottom:5px}
.pf-name{display:block;font-family:'Geist',sans-serif;font-size:1.32rem;font-weight:600;color:var(--encre);line-height:1.1}
.pf-step:hover{background:#E3E6EB}
.pf-step.active,.pf-step.active:hover{background:var(--nuit)}
.pf-step.active .pf-dur{color:var(--ambre-clair)}
.pf-step.active .pf-name{color:#fff}
.pf-panel{margin-top:16px;min-height:150px;border:1px solid var(--ligne);background:transparent;padding:32px 36px}
.pf-panel p{font-size:1.06rem;line-height:1.7;color:var(--encre-prose);margin:0 0 14px;max-width:66ch}
.pf-panel p:last-child{margin-bottom:0}
.pf-panel ul{list-style:none;margin:0 0 14px;padding:0;max-width:66ch}
.pf-panel li{position:relative;padding-left:20px;font-size:1.06rem;line-height:1.7;color:var(--encre-prose);margin-bottom:0}
.pf-panel li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:0;background:var(--ambre);transform:rotate(45deg)}
.pf-panel li strong{color:var(--encre);font-weight:600}
.pf-panel p strong{color:var(--encre);font-weight:600}
.pf-panel p.pf-result{position:relative;padding-left:20px}
.pf-panel p.pf-result::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:0;background:var(--ambre);transform:rotate(45deg)}
.pf-text{display:none}
.pf-text.active{display:block;animation:pffade .45s ease}
@keyframes pffade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:720px){.pf-bar{flex-direction:column;gap:4px}.pf-step,.pf-step:first-child{clip-path:none;border-radius:0;padding:14px 20px}}
@media(max-width:720px){.pc-row{grid-template-columns:1fr;gap:10px;padding:24px 0}.pc-era{font-size:1.2rem}.pc-num{font-size:2.4rem}.expertise{grid-template-columns:1fr}.exp-card{padding:24px 22px}.mp-head{gap:14px}.mp-metric{font-size:2.1rem}.jn-row{grid-template-columns:1fr;gap:14px;padding:32px 0}.jn-metric{font-size:2.7rem}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}}
.prose{max-width:720px}
.prose p{font-size:1.12rem;line-height:1.75;color:var(--encre);margin-bottom:20px}
.prose p:last-child{margin-bottom:0}
.method-line{font-family:'Geist',system-ui,sans-serif;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.5;color:#fff;max-width:780px;margin:0 auto 22px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--ambre-clair);font-weight:600}
.link-arrow .arr{transition:transform var(--t)}
.link-arrow:hover .arr{transform:translateX(4px)}

/* ---------- bloc thèse (goulot) ---------- */
.thesis{max-width:720px;margin:0 auto}
.thesis p{font-size:1.18rem;line-height:1.75;color:var(--encre);margin-bottom:22px}
.thesis p:last-child{margin-bottom:0}
.thesis p.thesis-pivot{font-family:'Geist',system-ui,sans-serif;font-size:clamp(1.4rem,2.6vw,1.82rem);line-height:1.4;text-align:center;color:var(--encre);margin:40px 0;padding:32px 0;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.thesis p.thesis-pivot strong{color:var(--ambre-deep);font-weight:600}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:var(--t);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:20px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:var(--t);
}
.nav-brand{display:inline-block;padding:12px 0;font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#fff;transition:var(--t)}
.nav-menu{display:flex;align-items:center;gap:6px}
.nav-menu a{
  font-size:.92rem;font-weight:500;color:var(--sur-nuit-doux);
  padding:8px 13px;border-radius:0;transition:var(--t);
}
.nav-menu a:hover{color:#fff}
.nav-menu .btn{padding:11px 20px;font-size:14px;color:#fff}
/* état scrollé : fond crème */
/* le flou vit sur un calque : un backdrop-filter sur .nav enfermerait le menu mobile (position:fixed) dans la barre */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:var(--t)}
.nav.scrolled{border-bottom:1px solid var(--ligne)}
.nav.scrolled::before{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav.scrolled .nav-brand{color:var(--ambre-deep)}
.nav.scrolled .nav-menu a:not(.btn){color:var(--gris)}
.nav.scrolled .nav-menu a:not(.btn):hover{color:var(--ambre-deep)}
/* page courante */
.nav-menu a[aria-current="page"]:not(.btn){position:relative;color:#fff}
.nav.scrolled .nav-menu a[aria-current="page"]:not(.btn){color:var(--encre)}
html body .nav .nav-menu a[aria-current="page"]:not(.btn)::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:1px;background:var(--ambre-clair);transform:none}
html body .nav.scrolled .nav-menu a[aria-current="page"]:not(.btn)::after{background:var(--ambre)}
.nav-burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;margin-right:-7px;position:relative}
.nav-burger span{position:absolute;left:7px;width:30px;height:2px;background:#fff;transition:var(--t)}
.nav.scrolled .nav-burger span{background:var(--encre)}
.nav-burger span:nth-child(1){top:11px}
.nav-burger span:nth-child(2){top:21px}
.nav-burger span:nth-child(3){top:31px}
.nav:has(.nav-menu.open) .nav-burger span{background:#fff}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--nuit);color:var(--sur-nuit);
  min-height:100vh;display:flex;align-items:center;
  padding:120px 0 70px;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:-180px;right:-120px;width:620px;height:620px;
  background:radial-gradient(circle,rgba(197,106,59,.34),transparent 64%);border-radius:50%;
}
.hero::after{
  content:"";position:absolute;bottom:-220px;left:-160px;width:560px;height:560px;
  background:radial-gradient(circle,rgba(39,64,107,.6),transparent 66%);border-radius:50%;
}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.3rem);color:#fff;margin-bottom:20px}
.hero h1 .accent{color:var(--ambre-clair);font-style:italic;font-weight:400}
.hero .role{
  display:inline-block;margin-bottom:24px;padding-top:12px;
  border-top:2px solid var(--ambre);font-size:1.18rem;font-weight:600;
  font-family:'Geist',sans-serif;color:#fff;
}
.hero-lead{font-family:'Geist',system-ui,sans-serif;font-size:1.28rem;line-height:1.5;color:var(--sur-nuit-doux);margin-bottom:34px;max-width:560px;padding-top:16px;border-top:2px solid var(--ambre)}
.hero-lead strong{color:#fff;font-weight:600;font-style:italic}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:26px;padding-left:15px;border-left:2px solid var(--ambre);font-family:'Geist',sans-serif;font-size:.95rem;line-height:1.5;color:var(--sur-nuit-doux);max-width:430px}
.hero-note strong{color:#fff;font-weight:600}

.hero-photo{position:relative}
.hero-photo .frame{
  position:relative;border-radius:0;overflow:hidden;
  box-shadow:var(--ombre-fort);border:1px solid var(--ligne-nuit);
}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:contrast(1.04) saturate(.97)}
.hero-photo .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,35,63,.5),transparent 42%)}
.hero-photo .tag{
  position:absolute;bottom:18px;left:18px;z-index:2;color:#fff;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}

/* ============================================================
   CARTES "POUR QUI"
   ============================================================ */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:32px 30px;box-shadow:var(--ombre);transition:var(--t)}
.card .ic{display:flex;align-items:center;justify-content:flex-start;color:var(--ambre);margin-bottom:20px}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:1.4rem;margin-bottom:12px}
.card p{color:var(--gris)}
.card p strong{color:var(--encre);font-weight:600}

/* ============================================================
   À PROPOS
   ============================================================ */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.about-photo img{border-radius:var(--r);box-shadow:var(--ombre);aspect-ratio:1/1;object-fit:cover;width:100%}

/* ============================================================
   MÉTHODE
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--nuit-2);border-radius:var(--r);padding:34px 30px;position:relative;overflow:hidden;border:1px solid var(--ligne-nuit)}
.step .num{font-family:'Geist',sans-serif;font-size:2.3rem;color:var(--ambre-clair);line-height:1;margin-bottom:14px}
.step h3{font-size:1.5rem;color:#fff;margin-bottom:14px}
.step p{font-size:.95rem;color:var(--sur-nuit-doux)}

/* ---------- chantiers (page méthode) : 4 colonnes ---------- */
.chantiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.chantiers .step h3{font-size:1.45rem}
.ch-fil{display:block;font-family:'Geist',sans-serif;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ambre-clair);font-weight:600;margin-bottom:12px}
@media(max-width:920px){.chantiers{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.chantiers{grid-template-columns:1fr}}

/* ============================================================
   RÉSULTATS
   ============================================================ */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.results-cta{display:flex;justify-content:center;margin-top:40px}
.result{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:28px;box-shadow:var(--ombre);display:flex;flex-direction:column;transition:var(--t)}
.result .hl{font-family:'Geist',sans-serif;font-size:3rem;font-weight:300;color:var(--encre);line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums}
.result .hl em{font-size:.72em;vertical-align:.14em;color:var(--ambre-deep);margin-right:4px;letter-spacing:0}
.result .hl small{font-size:1.6rem;vertical-align:.3rem}
.result .hl-arrow{width:46px;height:46px;color:var(--ambre-deep);display:block}
.result .hl-cap{font-size:.9rem;color:var(--gris);margin-top:8px}
.result .ctx{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ambre-deep);font-weight:600;margin:14px 0 14px}
.result p{font-size:.92rem;color:var(--gris);flex-grow:1}
.result p strong{color:var(--encre);font-weight:600}
.result .role{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-clair);font-weight:500;margin-top:18px;padding-top:14px;border-top:1px solid var(--ligne)}

/* ============================================================
   PROBLÈMES (cartes-citations)
   ============================================================ */
.pains{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pain{position:relative;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:30px 32px 28px;box-shadow:var(--ombre);margin:0;overflow:hidden;transition:var(--t)}
.pain::before{content:"\201C";position:absolute;top:6px;right:22px;font-family:'Geist',sans-serif;font-size:5rem;line-height:1;color:var(--ambre);opacity:.16}
.pain-tag{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ambre-deep);font-weight:600;margin-bottom:14px}
.pain p{font-family:'Geist',sans-serif;font-style:italic;font-size:1.18rem;line-height:1.5;color:var(--encre);position:relative}
.pain-band{max-width:740px;margin:40px 0 0;display:flex;align-items:center;gap:16px;font-family:'Geist',sans-serif;font-size:clamp(1.1rem,1.7vw,1.22rem);line-height:1.6;color:var(--encre)}
.pain-band .pb-ico{flex:0 0 auto;width:26px;height:26px;color:var(--ambre)}
.pain-band .pb-text{padding-left:16px;border-left:2px solid var(--ambre)}

/* ============================================================
   OFFRES
   ============================================================ */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.offer{border-radius:var(--r);padding:38px 36px;display:flex;flex-direction:column}
.offer-light{background:var(--blanc);border:1px solid var(--ligne);box-shadow:var(--ombre)}
.offer-dark{background:var(--nuit);color:var(--sur-nuit);position:relative;overflow:hidden}
.offer-dark::before{content:"";position:absolute;top:-80px;right:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(197,106,59,.3),transparent 68%);border-radius:50%}
.offer .tag{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:14px;position:relative}
.offer-light .tag{color:var(--gris-clair)}
.offer-dark .tag{color:var(--ambre-clair)}
.offer h3{font-size:1.9rem;margin-bottom:14px;position:relative}
.offer-dark h3{color:#fff}
.offer .price{font-family:'Geist',sans-serif;font-size:2.4rem;font-weight:600;line-height:1;margin-bottom:18px;position:relative}
.offer-light .price{color:var(--ambre-deep)}
.offer-dark .price{color:#fff}
.offer .price small{font-family:'Geist',sans-serif;font-size:.95rem;font-weight:500}
.offer-light .price small{color:var(--gris-clair)}
.offer-dark .price small{color:var(--sur-nuit-doux)}
.offer p{font-size:1rem;flex-grow:1;position:relative;margin-bottom:24px}
.offer-light p{color:var(--gris)}
.offer-dark p{color:var(--sur-nuit-doux)}

/* ============================================================
   RÉASSURANCE
   ============================================================ */
.reassure{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.re{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:24px;box-shadow:var(--ombre);transition:var(--t)}
.re .ic{width:40px;height:40px;border-radius:0;background:var(--creme-2);display:flex;align-items:center;justify-content:center;color:var(--ambre);margin-bottom:14px}
.re .ic svg{width:21px;height:21px}
.re h4{font-family:'Geist',sans-serif;font-weight:600;font-size:.98rem;margin-bottom:6px;letter-spacing:0}
.re p{font-size:.84rem;color:var(--gris)}

/* ============================================================
   CTA final
   ============================================================ */
.cta-final{background:var(--nuit);text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:760px;height:480px;background:radial-gradient(ellipse,rgba(197,106,59,.22),transparent 66%)}
.cta-final .inner{position:relative;z-index:2}
.cta-final h2{font-size:clamp(2rem,4.6vw,3rem);color:#fff;margin-bottom:16px}
.cta-final p{color:var(--sur-nuit-doux);max-width:580px;margin:0 auto 30px}
.cta-final .cta-note{display:flex;justify-content:center;align-items:center;gap:16px;max-width:600px;margin:0 auto 30px;text-align:left;color:var(--sur-nuit-doux)}
.cta-final .cn-ico{width:26px;height:26px;color:var(--ambre-clair);flex:0 0 auto}
.cta-final .cn-text{padding-left:16px;border-left:2px solid var(--ambre-clair)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--nuit-foot);color:var(--sur-nuit-doux);padding:60px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--ligne-nuit)}
.foot-brand .fb{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ambre-clair);font-weight:700}
.foot-brand .fn{font-family:'Geist',sans-serif;font-size:1.5rem;color:#fff;margin:6px 0}
.foot-brand .fc{font-size:.9rem;max-width:320px}
.foot-brand .fc-line{display:flex;gap:10px;align-items:flex-start}
.foot-brand .fc-line + .fc-line{margin-top:10px}
.foot-brand .fc-ico{width:16px;height:16px;color:var(--ambre-clair);flex:0 0 auto;margin-top:3px}
.foot-col h4{font-family:'Geist',sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sur-nuit-doux);font-weight:600;margin-bottom:14px}
.foot-col a{display:block;font-size:.92rem;color:var(--sur-nuit-doux);padding:4px 0;transition:var(--t)}
.foot-col a:hover{color:#fff}
.foot-bottom{padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--sur-nuit-doux)}

/* ============================================================
   PAGE HEADER (pages internes)
   ============================================================ */
.page-head{background:var(--nuit);color:var(--sur-nuit);padding:158px 0 78px;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;top:-160px;right:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(197,106,59,.26),transparent 64%);border-radius:50%}
.page-head::after{content:"";position:absolute;bottom:-240px;left:-180px;width:520px;height:520px;background:radial-gradient(circle,rgba(39,64,107,.55),transparent 66%);border-radius:50%}
.page-head .wrap{position:relative;z-index:2}
.page-head .eyebrow{color:var(--ambre-clair)}
.page-head h1{font-size:clamp(2.3rem,5vw,3.6rem);color:#fff;margin-bottom:20px;max-width:780px}
.page-head h1 .accent{color:var(--ambre-clair);font-style:italic;font-weight:400}
.page-head .ph-lead{font-family:'Geist',system-ui,sans-serif;font-size:1.26rem;line-height:1.5;color:var(--sur-nuit-doux);max-width:620px}

/* ============================================================
   BIO (page à propos)
   ============================================================ */
.bio-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start}
.bio-photo{position:sticky;top:108px}
.bio-photo img{border-radius:var(--r);box-shadow:var(--ombre-fort);aspect-ratio:4/5;object-fit:cover;width:100%}
.bio-photo .cap{margin-top:18px}
.bio-photo .cap b{display:block;font-family:'Geist',sans-serif;color:var(--encre);font-size:1.1rem;margin-bottom:2px}
.bio-photo .cap span{font-size:.84rem;color:var(--gris)}
.bio-prose>p{font-size:1.1rem;color:var(--gris);margin-bottom:22px;line-height:1.74}
.bio-prose>p.lede{font-family:'Geist',sans-serif;font-size:1.52rem;line-height:1.45;color:var(--encre);margin-bottom:30px}
.bio-prose strong{color:var(--encre);font-weight:600}
.bio-prose .amber{color:var(--ambre-deep);font-weight:600}
.amber{color:var(--ambre-deep);font-weight:600}

/* ============================================================
   BLOG (index)
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.post-card{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:34px 32px;box-shadow:var(--ombre);transition:var(--t)}
.post-card:hover{border-color:#9AA2B1}
.post-card .pc-tag{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ambre-deep);margin-bottom:16px}
.post-card h3{font-size:1.52rem;color:var(--encre);margin-bottom:14px;line-height:1.16}
.post-card p{font-size:.96rem;color:var(--gris);flex-grow:1;margin-bottom:22px}
.post-card .pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.78rem;color:var(--gris-clair);letter-spacing:.02em}
.post-card .pc-more{color:var(--ambre-deep);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.post-card .pc-more .arr{transition:transform var(--t)}
.post-card:hover .pc-more{color:var(--ambre-hover)}
.post-card:hover .pc-more .arr{transform:translateX(4px)}

/* ============================================================
   ARTICLE (page d'article)
   ============================================================ */
.article{max-width:740px;margin:0 auto}
.article .back{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--ambre-deep);margin-bottom:34px;transition:var(--t)}
.article .back:hover{color:var(--ambre-hover);gap:12px}
.article-body{font-size:1.14rem;line-height:1.78}
.article-body p{margin-bottom:24px;color:var(--encre-prose)}
.article-body p.lede{font-family:'Geist',sans-serif;font-size:1.4rem;line-height:1.5;color:var(--encre);margin-bottom:28px}
.article-body strong{color:var(--encre);font-weight:600}
.article-body em{font-style:italic}
.article-body h2{font-size:1.7rem;color:var(--encre);margin:44px 0 18px}
.article-body ul{list-style:none;margin:0 0 24px;padding:0}
.article-body ul li{position:relative;padding-left:30px;margin-bottom:14px;color:var(--encre-prose)}
.article-body ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:0;background:var(--ambre);transform:rotate(45deg)}
.article-cta{margin-top:48px;background:var(--creme-2);border:1px solid var(--ligne);border-radius:var(--r);padding:34px 36px}
.article-cta h3{font-size:1.4rem;color:var(--encre);margin-bottom:10px}
.article-cta p{color:var(--gris);margin-bottom:22px;font-size:1rem}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
.contact-aside h2{font-size:1.9rem;color:var(--encre);margin-bottom:16px}
.contact-aside p{color:var(--gris);margin-bottom:18px}
.contact-aside .ca-list{list-style:none;margin:24px 0 0;padding:0}
.contact-aside .ca-list li{position:relative;padding-left:30px;margin-bottom:14px;color:var(--gris)}
.contact-aside .ca-list li::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;border-radius:0;background:var(--ambre);transform:rotate(45deg)}
.contact-aside .ca-alt{margin-top:30px;padding-top:26px;border-top:1px solid var(--ligne)}
.contact-aside .ca-alt .lbl{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ambre-deep);margin-bottom:8px}
.contact-aside .ca-alt a{color:var(--encre);font-weight:600}
.contact-aside .ca-alt a:hover{color:var(--ambre-deep)}

.contact-form{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:36px;box-shadow:var(--ombre)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{margin-bottom:18px;display:flex;flex-direction:column}
.form-field label{font-size:.82rem;font-weight:600;color:var(--encre);margin-bottom:7px}
.form-field input,.form-field textarea{font-family:inherit;font-size:1rem;color:var(--encre);background:var(--creme);border:1px solid var(--ligne);border-radius:0;padding:13px 15px;transition:var(--t);width:100%}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--ambre);background:#fff;box-shadow:0 0 0 3px rgba(197,106,59,.12)}
.form-field textarea{min-height:150px;resize:vertical}
.contact-form .btn{width:100%;justify-content:center;margin-top:6px}
.form-status{margin-top:16px;font-size:.92rem;text-align:center;line-height:1.5}
.form-status.ok{color:#2F7D4F;font-weight:500}
.form-status.err{color:#B4452E;font-weight:500}
.hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden}

/* ============================================================
   ANIMATIONS (reveal au scroll)
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:920px){
  .hero-grid,.about-grid,.bio-grid{grid-template-columns:1fr;gap:40px}
  .bio-photo{position:static;max-width:360px}
  .page-head{padding:130px 0 60px}
  .hero-photo{max-width:380px;margin:0 auto}
  .hero{min-height:auto}
  .cards3,.cards2,.steps,.results,.offers,.pains,.blog-grid,.contact-grid{grid-template-columns:1fr}
  .wants{grid-template-columns:1fr}
  .reassure{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .scroll-cue{display:none}
}
@media(max-width:680px){
  body{font-size:16px}
  section{padding:62px 0}
  .stats{grid-template-columns:1fr;gap:36px}
  .reassure{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  /* cibles tactiles d'au moins 44 px */
  .foot-col a{padding:10px 0}
  .foot-bottom a{display:inline-block;padding:13px 0}
  .article .back{padding:11px 0}
  .contact-aside .ca-alt a{display:inline-block;padding:11px 0}
  .hero-photo .float{display:none}
}
/* menu en tiroir jusqu'à 1 023 px : avec six liens, la barre ne tient plus sur une ligne en dessous */
@media(max-width:1023px){
  .nav-menu{
    position:fixed;top:0;right:0;bottom:0;width:78%;max-width:320px;
    background:var(--nuit);flex-direction:column;align-items:flex-start;
    padding:90px 30px;gap:6px;transform:translateX(100%);transition:var(--t);
    box-shadow:-20px 0 50px rgba(0,0,0,.3);
  }
  .nav-menu.open{transform:translateX(0)}
  .nav-menu a{color:var(--sur-nuit);font-size:1.05rem;width:100%}
  .nav.scrolled .nav-menu a:not(.btn){color:var(--sur-nuit)}
  .nav-menu a[aria-current="page"]:not(.btn),.nav.scrolled .nav-menu a[aria-current="page"]:not(.btn){color:#fff}
  html body .nav .nav-menu a[aria-current="page"]:not(.btn)::after,html body .nav.scrolled .nav-menu a[aria-current="page"]:not(.btn)::after{right:auto;width:28px;background:var(--ambre-clair)}
  .nav-menu .btn{margin-top:14px}
  .nav-burger{display:block;z-index:101}
}

/* ===== Essai 11/10 : polices du style épuré (Geist + Source Serif 4 en accent) ===== */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.03em}
em,.accent,.pain p{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.005em}

/* ===== Bandeau des engagements, en bas du premier écran ===== */
/* La première section occupe exactement l'écran visible ; le bandeau commence juste en dessous. */
.hero{min-height:100vh;min-height:100svh;padding-top:clamp(96px,14vh,120px);padding-bottom:clamp(40px,7vh,70px)}
.facts{background:var(--nuit);color:var(--sur-nuit);border-top:1px solid var(--ligne-nuit)}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding:26px 28px;border-left:1px solid var(--ligne-nuit);display:flex;align-items:last baseline;gap:14px}
.fact:first-child{border-left:0;padding-left:0}
.fact strong{font-family:'Geist',sans-serif;font-weight:300;font-size:2.6rem;line-height:1;letter-spacing:-.03em;color:#fff;white-space:nowrap;font-variant-numeric:lining-nums}
.fact strong em{font-size:1.5rem;color:var(--ambre-clair);margin-left:4px;letter-spacing:0}
.fact span{font-size:.95rem;line-height:1.4;color:var(--sur-nuit-doux)}
@media(max-width:860px){
  .facts .wrap{grid-template-columns:1fr}
  .fact{padding:18px 0;border-left:0;border-top:1px solid var(--ligne-nuit)}
  .fact:first-child{border-top:0}
  .fact strong{font-size:2.1rem;min-width:118px}
}

/* Qui je suis : photo calée du haut du titre au bas du bouton (grand écran) */
@media(min-width:921px){
  .about-grid{align-items:stretch}
  .about-grid > .rv:last-child{display:flex;flex-direction:column;align-items:flex-start}
  .about-grid > .rv:last-child .big{margin-top:-.12em}
  .about-grid > .rv:last-child .btn{margin-top:auto}
  .about-photo{position:relative;min-height:100%}
  .about-photo img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}

/* ===== Ma méthode & mes tarifs : cartes de tarifs (textes inchangés) ===== */
#tarifs .method-path{max-width:none;margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
#tarifs .mp-step{display:flex;flex-direction:column;padding:34px 30px 30px;background:rgba(255,255,255,.04);border:1px solid var(--ligne-nuit);border-radius:0}
#tarifs .mp-step::before{display:none}
#tarifs .mp-node{position:static;order:0;width:auto;height:auto;border:0;border-radius:0;background:none;justify-content:flex-start;font-size:.8rem;font-weight:600;letter-spacing:.14em;color:var(--ambre-clair);margin-bottom:18px}
#tarifs .mp-step h3{order:1;font-size:1.4rem;margin-bottom:22px}
#tarifs .mp-tag{order:2;font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:300;letter-spacing:-.02em;text-transform:none;color:#fff;line-height:1.15;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--ligne-nuit);font-variant-numeric:lining-nums}
#tarifs .mp-step p{order:3;max-width:none;margin-bottom:24px}
#tarifs .mp-note{order:4;margin-top:auto;padding-top:18px;border-top:1px solid var(--ligne-nuit);align-items:flex-start;line-height:1.45}
#tarifs .mp-note .mpn-ico{margin-top:3px}
/* La carte du diagnostic ressort, comme l'offre mise en avant d'une grille de prix */
#tarifs .mp-step:nth-child(2){background:rgba(255,255,255,.08);border-color:var(--ambre-clair);box-shadow:0 18px 40px rgba(0,0,0,.25)}
#tarifs .mp-step:nth-child(2) .mp-tag{color:var(--ambre-clair)}
#tarifs .method-out{margin-top:44px}
@media(max-width:920px){
  #tarifs .method-path{grid-template-columns:1fr;gap:16px;max-width:520px}
}

/* ===== Tarifs : socle clair commun, surchargé plus bas par « Parcours + bande » ===== */
#tarifs[data-dir]{background:#fff;color:var(--encre)}
#tarifs[data-dir] h2,#tarifs[data-dir] h3{color:var(--encre)}
#tarifs[data-dir] .lead{color:var(--gris)}
#tarifs[data-dir] .section-title{color:var(--ambre-deep)}
#tarifs[data-dir] .mp-step{background:#fff;border:1px solid var(--ligne);box-shadow:none}
#tarifs[data-dir] .mp-node{color:var(--ambre-deep)}
#tarifs[data-dir] .mp-tag{color:var(--encre);border-bottom-color:var(--ligne)}
#tarifs[data-dir] .mp-step p{color:var(--gris)}
#tarifs[data-dir] .mp-note{color:var(--gris);border-top-color:var(--ligne)}
#tarifs[data-dir] .mp-note .mpn-ico{color:var(--ambre-deep)}
#tarifs[data-dir] .method-out{color:var(--encre)}
#tarifs[data-dir] .method-out .mo-ico{color:var(--ambre-deep)}
#tarifs[data-dir] .method-out .mo-text{border-left-color:var(--ambre)}
#tarifs[data-dir] .btn-ghost{color:var(--encre);border-color:#CDD2DB}
#tarifs[data-dir] .btn-ghost:hover{border-color:var(--ambre-deep);color:var(--encre)}

/* Tarifs : la section tient sur un écran (grand écran) */
@media(min-width:921px){
  #tarifs{padding-top:56px;padding-bottom:56px}
  #tarifs .section-title{margin-bottom:18px}
  #tarifs .lead{max-width:none}
  #tarifs .method-path{margin-top:28px}
  #tarifs .mp-step{padding:26px 26px 22px}
  #tarifs .mp-node{margin-bottom:10px}
  #tarifs .mp-step h3{margin-bottom:12px}
  #tarifs .mp-tag{padding-bottom:14px;margin-bottom:14px}
  #tarifs .mp-step p{margin-bottom:16px}
  #tarifs .mp-note{padding-top:12px}
  /* La phrase de promesse et les boutons sur une même ligne */
  #tarifs .wrap{display:grid;grid-template-columns:1fr auto;column-gap:32px}
  #tarifs .wrap>*{grid-column:1/-1}
  #tarifs .method-out{grid-column:1;margin-top:32px;align-self:center}
  #tarifs .method-cta{grid-column:2;margin-top:32px;align-self:center;flex-wrap:nowrap}
}
@media(min-width:921px){
  #tarifs{padding-top:44px;padding-bottom:44px}
  #tarifs .method-cta{display:flex;flex-direction:row;gap:12px;padding-top:0;border-top:0}
  #tarifs .method-cta>a{white-space:nowrap}
}
@media(min-width:921px){
  #tarifs{padding-top:40px;padding-bottom:36px;scroll-margin-top:86px}
}

/* ============================================================
   Inès · « 2 · Parcours + bande » (choix de Gaël, 11/10)
   Copie exacte de « 2 · Parcours », plus deux changements :
   les boutons sortent du parcours dans une bande pleine largeur,
   et chaque mention cochée suit sa description au lieu de tomber en bas de colonne.
   ============================================================ */
#tarifs[data-dir="bande"]{position:relative;overflow:hidden;scroll-margin-top:86px}
#tarifs[data-dir="bande"] .mp-step{transform:none;box-shadow:none;border:0;background:none;border-radius:0}
#tarifs[data-dir="bande"] .mp-tag{text-transform:none;letter-spacing:0;border:0;font-variant-numeric:lining-nums}
#tarifs[data-dir="bande"] .mp-note{border:0}
#tarifs[data-dir="bande"] .pr-big{letter-spacing:-.03em}
#tarifs[data-dir="bande"] .acc{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:300;letter-spacing:-.015em}
#tarifs[data-dir="bande"]{background:var(--nuit);color:var(--sur-nuit)}
#tarifs[data-dir="bande"] .section-title{color:var(--ambre-clair)}
#tarifs[data-dir="bande"] .section-title::after{background:var(--ligne-nuit)}
#tarifs[data-dir="bande"] h2,#tarifs[data-dir="bande"] h3{color:#fff}
#tarifs[data-dir="bande"] .acc{color:var(--ambre-clair)}
#tarifs[data-dir="bande"] .lead{color:var(--sur-nuit-doux)}
#tarifs[data-dir="bande"] .method-path{max-width:none}
#tarifs[data-dir="bande"] .mp-step{display:flex;flex-direction:column;padding:0 6px 0 0;position:relative;z-index:1}
#tarifs[data-dir="bande"] .mp-node{order:0;position:relative;width:48px;height:48px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--nuit);border:1px solid rgba(237,233,224,.34);border-radius:0;font-size:.86rem;font-weight:600;letter-spacing:.08em;color:var(--sur-nuit);margin:0 0 24px}
#tarifs[data-dir="bande"] .mp-step:first-child .mp-node{border-color:var(--ambre-clair);color:var(--ambre-clair);box-shadow:0 0 0 5px rgba(221,138,85,.1)}
#tarifs[data-dir="bande"] .mp-step h3{order:1;font-size:1.3rem;margin:0 0 8px}
#tarifs[data-dir="bande"] .mp-step .mp-tag{order:2;margin:0 0 14px;padding:0;color:#fff;font-weight:300;line-height:1.1}
#tarifs[data-dir="bande"] .pr-big{font-size:1.85rem}
#tarifs[data-dir="bande"] .pr-from,#tarifs[data-dir="bande"] .pr-unit{font-size:.86rem;font-weight:500;letter-spacing:.01em;color:var(--sur-nuit-doux);white-space:nowrap}
#tarifs[data-dir="bande"] .pr-from{display:block;margin:-4px 0 4px}
#tarifs[data-dir="bande"] .mp-step:first-child .pr-big{color:var(--ambre-clair)}
#tarifs[data-dir="bande"] .mp-step p{order:3;max-width:34ch;margin:0 0 14px;font-size:.94rem;line-height:1.55;color:var(--sur-nuit-doux)}
#tarifs[data-dir="bande"] .mp-note{order:4;margin:auto 0 0;padding:0;font-size:.86rem;line-height:1.45;align-items:flex-start;color:rgba(237,233,224,.78)}
#tarifs[data-dir="bande"] .mp-note .mpn-ico{margin-top:3px;color:var(--ambre-clair)}
#tarifs[data-dir="bande"] .method-out{flex-direction:column;align-items:flex-start;gap:24px;color:#fff;position:relative;z-index:1}
#tarifs[data-dir="bande"] .method-out .mo-ico{width:48px;height:48px;padding:12px;background:#A9552B;color:#fff;box-shadow:0 0 0 6px rgba(197,106,59,.18),0 0 48px rgba(221,138,85,.45)}
#tarifs[data-dir="bande"] .method-out .mo-text{padding:0;border:0;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:300;font-size:1.5rem;line-height:1.3;letter-spacing:-.01em}
#tarifs[data-dir="bande"] .method-cta{border:0;padding:0;gap:12px}
#tarifs[data-dir="bande"] .btn-ghost{color:var(--sur-nuit);border-color:rgba(237,233,224,.3)}
#tarifs[data-dir="bande"] .btn-ghost:hover{color:#fff;border-color:var(--ambre-clair)}
@media(min-width:921px){
  #tarifs[data-dir="bande"]{padding:52px 0 52px}
  #tarifs[data-dir="bande"] .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}
  #tarifs[data-dir="bande"] .wrap>*{grid-column:1/-1}
  #tarifs[data-dir="bande"] .wrap>.section-title{grid-row:1;margin-bottom:22px}
  #tarifs[data-dir="bande"] .wrap>h2{grid-row:2;grid-column:1/3;font-size:clamp(2.2rem,3.3vw,3rem);line-height:1.04;margin:0!important}
  #tarifs[data-dir="bande"] .wrap>.lead{grid-row:2;grid-column:3/5;align-self:end;margin:0!important;max-width:none;font-size:1.03rem;line-height:1.55}
  /* le rail : des étapes jusqu'à l'arrivée */
  #tarifs[data-dir="bande"] .wrap::before{content:"";grid-row:3;grid-column:1/4;align-self:start;height:2px;margin:71px -40px 0 24px;background:linear-gradient(90deg,var(--ambre-clair),rgba(237,233,224,.26) 22%,rgba(237,233,224,.26) 72%,var(--ambre-clair));z-index:0}
  #tarifs[data-dir="bande"] .method-path{grid-row:3;grid-column:1/4;display:grid;grid-template-columns:subgrid;margin:48px 0 0}
  #tarifs[data-dir="bande"] .method-out{grid-row:3;grid-column:4;margin:48px 0 0;align-self:start}
  #tarifs[data-dir="bande"] .method-cta{grid-row:4;grid-column:1/-1;margin:38px 0 0;align-self:start}
}
@media(max-width:920px){
  #tarifs[data-dir="bande"] h2{margin-bottom:16px!important}
  #tarifs[data-dir="bande"] .method-path{margin-top:40px;display:block}
  #tarifs[data-dir="bande"] .mp-step{padding:0 0 34px 68px}
  #tarifs[data-dir="bande"] .mp-step::before{display:block;content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:rgba(237,233,224,.26)}
  #tarifs[data-dir="bande"] .mp-step:first-child::before{background:linear-gradient(var(--ambre-clair),rgba(237,233,224,.26))}
  #tarifs[data-dir="bande"] .mp-step:last-child::before{display:block;bottom:-52px;background:linear-gradient(rgba(237,233,224,.26),var(--ambre-clair))}
  #tarifs[data-dir="bande"] .mp-node{position:absolute;left:0;top:0;margin:0}
  #tarifs[data-dir="bande"] .mp-step h3{padding-top:10px}
  #tarifs[data-dir="bande"] .mp-step p{max-width:none}
  #tarifs[data-dir="bande"] .method-out{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;align-items:center}
  #tarifs[data-dir="bande"] .method-out .mo-text{font-size:1.3rem}
  #tarifs[data-dir="bande"] .method-cta{margin-top:36px}
  #tarifs[data-dir="bande"] .method-cta>a{width:100%;justify-content:center}
}

/* les changements par rapport au Parcours d'origine */
#tarifs[data-dir="bande"] .mp-note{margin-top:0}
@media(min-width:921px){
  #tarifs[data-dir="bande"]{padding-bottom:0}
  #tarifs[data-dir="bande"] .wrap::after{content:"";grid-row:4;grid-column:1/-1;margin:40px -100vw 0;background:var(--nuit-foot);border-top:1px solid var(--ligne-nuit);z-index:0}
  #tarifs[data-dir="bande"] .method-cta{position:relative;z-index:1;margin:40px 0 0;padding:20px 0;justify-content:center}
}
@media(max-width:920px){
  #tarifs[data-dir="bande"]{padding-bottom:0}
  #tarifs[data-dir="bande"] .method-cta{margin:44px -28px 0;padding:26px 28px 30px;background:var(--nuit-foot);border-top:1px solid var(--ligne-nuit)}
}

/* 11/10 · Parcours + bande : la section remplit l'écran sous le menu, la bande touche le bas */
@media(min-width:921px){
  #tarifs[data-dir="bande"]{min-height:calc(100vh - 86px);min-height:calc(100svh - 86px);display:flex;flex-direction:column;padding-top:clamp(52px,8vh,84px)}
  #tarifs[data-dir="bande"] .wrap{flex:1;width:100%;grid-template-rows:auto auto 1fr auto}
}

/* 11/10 · Confidentialité déplacée dans l'appel final */
.cta-final .cta-confid{display:flex;justify-content:center;align-items:center;gap:8px;margin:22px auto 0;max-width:none;font-size:.9rem;color:var(--sur-nuit-doux)}
.cta-final .cc-ico{width:16px;height:16px;flex:0 0 auto;color:var(--ambre-clair)}

/* 11/10 · Appel final sur fond blanc */
.cta-final{background:#fff;border-top:1px solid var(--ligne)}
.cta-final::before{display:none}
.cta-final h2{color:var(--encre)}
.cta-final .cta-note,.cta-final p,.cta-final .cta-confid{color:var(--gris)}
.cta-final .cn-ico,.cta-final .cc-ico{color:var(--ambre-deep)}
.cta-final .cn-text{border-left-color:var(--ambre)}

/* ============================================================
   Animations du site (retenues le 11/10), script commun js/anim.js
   <html data-anim> : « signature » (accueil), « signature-lite » (pages intérieures), « sobre » (réserve), « calme » (mentions légales)
   html.anim-js  : posée par le petit script de tête ; sans elle (JavaScript absent), rien n'est masqué.
   html.anim-run : joue l'ouverture.
   Seuls l'opacité et le déplacement sont animés ; l'état final est la page telle qu'elle est.
   ============================================================ */

/* Sans JavaScript, tout reste visible, y compris les apparitions d'origine */
html:not(.anim-js) .rv{opacity:1;transform:none}

:root{--a-ease:cubic-bezier(.2,.7,.2,1);--a-draw:cubic-bezier(.65,0,.35,1)}
@keyframes a-up{from{opacity:0;transform:translate3d(0,var(--a-dy,10px),0)}to{opacity:1;transform:none}}
@keyframes a-fade{from{opacity:0}to{opacity:1}}
@keyframes a-settle{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}

/* ---------- Socle (accueil et pages intérieures) : apparitions fines et orchestrées ---------- */
html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .rv,
html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .ra{transition:opacity .55s var(--a-ease),transform .55s var(--a-ease),box-shadow .4s var(--a-ease),border-color .4s var(--a-ease)}
html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .rv:not(.in),
html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .ra:not(.in),
html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) #tarifs .mp-step.rv:not(.in){opacity:0;transform:translate3d(0,12px,0)}
html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .rv.in,
html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .ra.in{opacity:1;transform:none}

/* ouverture en cascade : surtitre, titre, texte, bouton, puis le portrait qui se pose */
html.anim-js.anim-run:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .hero .eyebrow{animation:a-up .5s var(--a-ease) both}
html.anim-js.anim-run:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .hero h1{animation:a-up .55s var(--a-ease) .06s both}
html.anim-js.anim-run:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .hero-lead{animation:a-up .55s var(--a-ease) .14s both}
html.anim-js.anim-run:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .hero-cta{animation:a-up .55s var(--a-ease) .22s both}
html.anim-js.anim-run:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .hero-photo .frame{animation:a-fade .6s ease .05s both}
/* en-têtes des pages intérieures (page-head, et l'ouverture de la page À propos) */
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .hero .role{animation:a-up .55s var(--a-ease) .1s both}
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .hero--about .hero-lead{animation-delay:.16s}
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .hero-quote{animation:a-up .55s var(--a-ease) .22s both}
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .hero--about .hero-cta{animation-delay:.28s}
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .page-head .eyebrow{animation:a-up .5s var(--a-ease) both}
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .page-head h1{animation:a-up .55s var(--a-ease) .06s both}
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .page-head .ph-lead{animation:a-up .55s var(--a-ease) .14s both}
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .page-head .btn{animation:a-up .55s var(--a-ease) .22s both}
html.anim-js.anim-run:is([data-anim="sobre"],[data-anim="signature-lite"]) .article .back{animation:a-fade .5s ease .22s both}

/* survols soignés (toutes les pages, mentions légales comprises) */
html:is(.anim-js[data-anim="signature"],.anim-js[data-anim="sobre"],.anim-js[data-anim="signature-lite"],[data-anim="calme"]) .btn{transition:transform .3s var(--a-ease),background-color .3s var(--a-ease),box-shadow .3s var(--a-ease)}
html:is(.anim-js[data-anim="signature"],.anim-js[data-anim="sobre"],.anim-js[data-anim="signature-lite"],[data-anim="calme"]) .btn .arr,
html:is(.anim-js[data-anim="signature"],.anim-js[data-anim="sobre"],.anim-js[data-anim="signature-lite"],[data-anim="calme"]) .link-arrow .arr{transition:transform .3s var(--a-ease)}
@media(min-width:1024px){
  html:is(.anim-js[data-anim="signature"],.anim-js[data-anim="sobre"],.anim-js[data-anim="signature-lite"],[data-anim="calme"]) .nav-menu a:not(.btn){position:relative}
  html:is(.anim-js[data-anim="signature"],.anim-js[data-anim="sobre"],.anim-js[data-anim="signature-lite"],[data-anim="calme"]) .nav-menu a:not(.btn)::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--a-ease)}
  html:is(.anim-js[data-anim="signature"],.anim-js[data-anim="sobre"],.anim-js[data-anim="signature-lite"],[data-anim="calme"]) .nav-menu a:not(.btn):hover::after{transform:scaleX(1)}
}

/* ---------- Accueil (« Signature ») : trois moments marquants ---------- */
/* 1 · le titre de l'ouverture se révèle mot à mot (les mots sont découpés par le script, texte inchangé) */
html.anim-js.anim-run[data-anim="signature"] .hero h1{animation:none}
html.anim-js[data-anim="signature"] .hero h1 .w{display:inline-block}
html.anim-js.anim-run[data-anim="signature"] .hero h1 .w{--a-dy:.38em;animation:a-up .42s var(--a-ease) both;animation-delay:calc(70ms + var(--i,0) * 30ms)}
html.anim-js.anim-run[data-anim="signature"] .hero-lead{animation-delay:.18s}
html.anim-js.anim-run[data-anim="signature"] .hero-cta{animation-delay:.24s}
/* le portrait se pose (sans figer sa position) */
html.anim-js.anim-run[data-anim="signature"] .hero-photo img{animation:a-settle .9s var(--a-ease) backwards}
/* 2 · les chiffres du bandeau comptent jusqu'à leur valeur (script) */
/* 3 · le rail du parcours des tarifs se dessine de 01 jusqu'à l'arrivée, les étapes suivent */
@media(min-width:921px){
  html.anim-js[data-anim="signature"] #tarifs[data-dir="bande"] .wrap::before{transform-origin:0 50%;transition:transform .7s var(--a-draw)}
  html.anim-js[data-anim="signature"] #tarifs[data-dir="bande"]:not(.a-in) .wrap::before{transform:scaleX(0)}
  html.anim-js[data-anim="signature"] #tarifs[data-dir="bande"]:not(.a-in) .rv{opacity:0;transform:translate3d(0,12px,0)}
  html.anim-js[data-anim="signature"] #tarifs[data-dir="bande"] .method-out .mo-ico{transition:transform .45s var(--a-ease) .55s}
  html.anim-js[data-anim="signature"] #tarifs[data-dir="bande"]:not(.a-in) .method-out .mo-ico{transform:scale(.7)}
}

/* ---------- Page Méthode : le parcours « En pratique » se dessine comme le rail des tarifs ---------- */
@media(min-width:921px){
  html.anim-js:is([data-anim="sobre"],[data-anim="signature-lite"]) .rail::before{transform-origin:0 50%;transition:transform .7s var(--a-draw)}
  html.anim-js:is([data-anim="sobre"],[data-anim="signature-lite"]) .rail:not(.a-in)::before{transform:scaleX(0)}
  html.anim-js:is([data-anim="sobre"],[data-anim="signature-lite"]) .rail:not(.a-in) .rv{opacity:0;transform:translate3d(0,12px,0)}
}

/* ---------- Pages intérieures (« signature-lite ») : le titre se révèle mot à mot, plus vite qu'à l'accueil ---------- */
/* les chiffres du bandeau de la page À propos comptent jusqu'à leur valeur (script) ; le rail de la page Méthode se dessine (plus haut) */
html.anim-js.anim-run[data-anim="signature-lite"] :is(.hero,.page-head) h1{animation:none}
html.anim-js[data-anim="signature-lite"] :is(.hero,.page-head) h1 .w{display:inline-block}
html.anim-js.anim-run[data-anim="signature-lite"] :is(.hero,.page-head) h1 .w{--a-dy:.32em;animation:a-up .34s var(--a-ease) both;animation-delay:calc(40ms + var(--i,0) * var(--a-st,16ms))}
@media(max-width:680px){
  html.anim-js.anim-run[data-anim="signature-lite"] :is(.hero,.page-head) h1 .w{--a-dy:.2em;animation-duration:.3s}
}

/* ---------- Téléphone : plus léger ---------- */
@media(max-width:680px){
  html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .rv:not(.in),
  html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .ra:not(.in),
  html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) #tarifs .mp-step.rv:not(.in){transform:translate3d(0,8px,0)}
  html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .rv,
  html.anim-js:is([data-anim="signature"],[data-anim="sobre"],[data-anim="signature-lite"]) .ra{transition-duration:.45s}
  html.anim-js.anim-run[data-anim="signature"] .hero h1 .w{--a-dy:.22em;animation-duration:.36s;animation-delay:calc(60ms + var(--i,0) * 22ms)}
  html.anim-js.anim-run[data-anim="signature"] .hero-photo img{animation:none}
}

/* ---------- Animations réduites à la demande du visiteur : tout s'affiche directement ---------- */
@media(prefers-reduced-motion:reduce){
  html.anim-js[data-anim] .rv,html.anim-js[data-anim] .ra,html.anim-js[data-anim] #tarifs .mp-step.rv,
  html.anim-js[data-anim] #tarifs .rv,html.anim-js[data-anim] .rail .rv,html.anim-js[data-anim] .hero h1 .w,html.anim-js[data-anim] .page-head h1 .w,
  html.anim-js[data-anim] .hero :is(.eyebrow,h1,.role,.hero-lead,.hero-quote,.hero-cta,.frame,img),
  html.anim-js[data-anim] .page-head :is(.eyebrow,h1,.ph-lead,.btn),html.anim-js[data-anim] .article .back{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  html.anim-js[data-anim] #tarifs .wrap::before,html.anim-js[data-anim] .rail::before,html.anim-js[data-anim] .section-title::after,
  html.anim-js[data-anim] #tarifs .method-out .mo-ico,html[data-anim] .nav-menu a::after{transform:none!important;transition:none!important}
  html[data-anim] .nav-menu a:not(.btn)::after{display:none}
  html[data-anim] .pf-text.active{animation:none!important}
}

/* ============================================================
   Harmonisation du 11/10 (audit de cohérence)
   ============================================================ */
/* espacements qui vivaient dans le HTML */
h2.big.big--gap{margin-bottom:36px}
.lead.lead--gap{margin-bottom:42px}
.about-grid .lead{margin-bottom:24px}
#tarifs .wrap>.lead{margin-bottom:10px}
.hero--about .hero-cta{margin-top:32px}
.opt{font-weight:400;color:var(--gris-clair)}
.article-body p.note{margin-top:36px;font-size:.92rem;color:var(--gris-clair)}

/* bandeau de chiffres à quatre colonnes (page À propos) */
@media(min-width:861px){.facts--4 .wrap{grid-template-columns:repeat(4,1fr)}}

/* tarifs : les trois prix sur la même ligne (la mention « à partir de » réserve sa ligne partout) */
@media(min-width:921px){
  #tarifs[data-dir="bande"] .mp-tag:not(:has(.pr-from))::before{content:"\00a0";display:block;margin:-4px 0 4px;font-size:.86rem;font-weight:500;letter-spacing:.01em}
}

/* rail numéroté sur fond clair (page Méthode, « En pratique ») */
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.rail::before{content:"";position:absolute;left:24px;right:calc((100% - 96px) / 4 - 24px);top:23px;height:2px;background:linear-gradient(90deg,var(--ambre),#D5DAE2 22%,#D5DAE2)}
.rail-step{position:relative}
.rail-node{position:relative;z-index:1;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #C9CED7;font-size:.86rem;font-weight:600;letter-spacing:.08em;color:var(--encre);margin-bottom:24px}
.rail-step:first-child .rail-node{border-color:var(--ambre);color:var(--ambre-deep)}
.rail .ch-fil{color:var(--ambre-deep)}
.rail h3{font-size:1.3rem;color:var(--encre);margin-bottom:10px}
.rail p{font-size:.95rem;line-height:1.6;color:var(--gris)}
@media(max-width:920px){
  .rail{grid-template-columns:1fr;gap:0}
  .rail::before{display:none}
  .rail-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:#D5DAE2}
  .rail-step:first-child::before{background:linear-gradient(var(--ambre),#D5DAE2)}
  .rail-step{padding:0 0 32px 68px}
  .rail-step:last-child{padding-bottom:0}
  .rail-node{position:absolute;left:0;top:0;margin:0}
}

/* ============================================================
   Inès · « Mes résultats » (choix du 11/10) : les preuves dans l'ordre chronologique,
   Engie puis la petite entreprise en lignes sobres à gauche,
   la salle de sport en grand panneau bleu nuit à droite, en point d'arrivée.
   ============================================================ */
.resultats .result{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.resultats .result .hl-arrow{stroke-width:1.6}
/* les deux premières preuves : une ligne sobre chacune, le chiffre et sa légende sur la même ligne */
.resultats .result:not(:last-child){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"hl cap" "ctx ctx" "p p" "role role";column-gap:16px;align-items:baseline;align-content:center}
.resultats .result:not(:last-child) .hl{grid-area:hl;font-size:3.4rem}
.resultats .result:not(:last-child) .hl-cap{grid-area:cap;margin:0;font-size:1rem;color:var(--encre);font-weight:500}
.resultats .result:not(:last-child) .ctx{grid-area:ctx;margin:16px 0 8px}
.resultats .result:not(:last-child) p{grid-area:p;color:var(--encre-prose)}
.resultats .result:not(:last-child) .role{grid-area:role;margin-top:14px;padding-top:0;border-top:0;color:var(--gris)}
.resultats .result:first-child{border-bottom:1px solid #D5DAE2}
/* la salle de sport : le grand panneau d'arrivée */
.resultats .result:last-child{background:var(--nuit);border-top:3px solid var(--ambre-clair);display:flex;flex-direction:column}
.resultats .result:last-child .hl{margin-bottom:28px}
.resultats .result:last-child .hl-arrow{width:84px;height:84px;color:var(--ambre-clair)}
.resultats .result:last-child .hl-cap{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(1.8rem,2.6vw,2.35rem);line-height:1.14;letter-spacing:-.01em;color:#fff;margin:0 0 26px;max-width:17ch}
.resultats .result:last-child .ctx{color:var(--ambre-clair);margin:0 0 12px}
.resultats .result:last-child p{color:var(--sur-nuit-doux);font-size:1.02rem;line-height:1.6;max-width:42ch}
.resultats .result:last-child .role{color:rgba(237,233,224,.74);border-top-color:var(--ligne-nuit);margin-top:28px}
/* animation « Signature » : la flèche monte en diagonale une fois le panneau apparu */
html.anim-js .resultats .result .hl-arrow{transition:transform .6s var(--a-ease,ease) .28s,opacity .6s var(--a-ease,ease) .28s}
html.anim-js .resultats .result.rv:not(.in) .hl-arrow{opacity:0;transform:translate3d(-10px,10px,0)}
@media(prefers-reduced-motion:reduce){html.anim-js .resultats .result .hl-arrow{opacity:1!important;transform:none!important;transition:none!important}}
@media(min-width:921px){
  .resultats .results{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:1fr 1fr;gap:0 64px}
  .resultats .result:first-child{grid-column:1;grid-row:1;padding:8px 0 32px}
  .resultats .result:nth-child(2){grid-column:1;grid-row:2;padding:32px 0 8px}
  .resultats .result:last-child{grid-column:2;grid-row:1/3;padding:46px 48px 40px}
}
@media(max-width:920px){
  .resultats .results{gap:0}
  .resultats .result:not(:last-child){padding:28px 0}
  .resultats .result:first-child{padding-top:4px}
  .resultats .result:not(:last-child) .hl{font-size:3rem}
  .resultats .result:last-child{margin-top:16px;padding:34px 24px 30px}
  .resultats .result:last-child .hl-arrow{width:64px;height:64px}
}

/* 11/10 · Phrase d'ouverture : le constat sur sa propre ligne, mis en valeur */
.hero-lead .hero-lead-hook{display:block;margin-bottom:.45em;color:#fff;font-weight:500}

/* ============================================================
   Inès · À propos, « Quatre leviers pour faire grandir votre salle » (choix du 11/10)
   Quatre grandes colonnes filetées, chacune ouverte par un numéro en italique ;
   la règle des cinq salles conclut la section en une ligne, sous un filet fin.
   ============================================================ */
.apport-sep h2.apport-title{margin-bottom:0}
.apport-sep .section-title{margin-bottom:22px}
.apport-sep .expertise{counter-reset:levier;margin-top:40px;gap:0;border-top:1px solid #D5DAE2}
.apport-sep .exp-card{counter-increment:levier;background:none;border:0;border-radius:0;padding:0}
.apport-sep .exp-card::before{content:counter(levier,decimal-leading-zero);display:block;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:300;font-size:3.1rem;line-height:1;letter-spacing:-.02em;color:var(--ambre-deep);margin-bottom:22px}
.apport-sep .exp-card h3{font-size:1.24rem;font-weight:500;line-height:1.25;margin-bottom:14px}
.apport-sep .exp-kw{font-size:.96rem;line-height:1.65;color:var(--encre-prose)}
.apport-sep .kw-sep{color:var(--ambre-deep)}
/* la conclusion : une ligne en italique, sous un filet fin marqué d'un petit trait ambre, alignée sur la grille */
.apport-sep .parcours-signature{position:relative;max-width:none;margin-top:44px;padding:26px 0 0;border-left:0;border-top:1px solid #D5DAE2;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.45;letter-spacing:-.005em;color:var(--encre)}
.apport-sep .parcours-signature::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:2px;background:var(--ambre)}
@media(min-width:921px){
  .apport-sep .expertise{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,auto)}
  .apport-sep .exp-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;padding:32px 28px 8px;border-left:1px solid #D5DAE2}
  .apport-sep .exp-card:first-child{padding-left:0;border-left:0}
  .apport-sep .exp-card:last-child{padding-right:0}
}
@media(max-width:920px){
  .apport-sep .expertise{grid-template-columns:1fr}
  .apport-sep .exp-card{padding:26px 0;border-bottom:1px solid #D5DAE2}
  .apport-sep .exp-card:last-child{border-bottom:0}
  .apport-sep .exp-card::before{font-size:2.4rem;margin-bottom:14px}
  .apport-sep .parcours-signature{margin-top:16px}
}

/* ============================================================
   Inès · Méthode, parcours « En pratique » : au survol d'une étape (ou au focus clavier),
   son carré passe à l'ambre, comme le n° 1, et son texte se précise. Pas de déplacement ; rien sur téléphone.
   ============================================================ */
.rail-step:focus-visible{outline:2px solid var(--ambre);outline-offset:8px}
@media(hover:hover) and (min-width:921px){
  .rail-step{cursor:default}
  .rail-node{transition:border-color .22s ease,color .22s ease}
  .rail p{transition:color .22s ease}
  .rail-step:is(:hover,:focus-visible) .rail-node{border-color:var(--ambre);color:var(--ambre-deep)}
  .rail-step:is(:hover,:focus-visible) p{color:var(--encre-prose)}
}
@media(prefers-reduced-motion:reduce){.rail-node,.rail p{transition:none!important}}

/* ============================================================
   Inès · Rails « Méthode » et « Tarifs » : survol en progression (12/10)
   Au survol d'une étape (ou au focus clavier), le trait se remplit d'ambre depuis le départ
   jusqu'au carré de cette étape, et les carrés franchis passent à l'ambre ; sur la dernière étape,
   le dernier carré se remplit d'ambre plein. Le trait dessiné à l'apparition reste dessous, intact.
   Grand écran avec souris seulement ; immédiat si le visiteur réduit les animations.
   ============================================================ */
/* Tarifs : même hiérarchie typographique que le parcours de la page Méthode */
#tarifs[data-dir="bande"] .mp-step h3{margin-bottom:10px}
#tarifs[data-dir="bande"] .mp-step p{font-size:.95rem;line-height:1.6;max-width:none}
#tarifs[data-dir="bande"] .mp-step:focus-visible,#tarifs[data-dir="bande"] .method-out:focus-visible{outline:2px solid var(--ambre-clair);outline-offset:8px}
@media(hover:hover) and (min-width:921px){
  /* — Méthode : le trait de remplissage, posé sur le rail (colonnes de 1fr, écart de 32 px) — */
  .rail::after{content:"";position:absolute;left:24px;top:23px;height:2px;width:0;background:var(--ambre);transition:width .35s var(--a-draw,ease)}
  .rail:has(.rail-step:nth-child(2):is(:hover,:focus-visible))::after{width:calc((100% - 96px) / 4 + 32px - 24px)}
  .rail:has(.rail-step:nth-child(3):is(:hover,:focus-visible))::after{width:calc(2 * ((100% - 96px) / 4 + 32px) - 24px)}
  .rail:has(.rail-step:nth-child(4):is(:hover,:focus-visible))::after{width:calc(3 * ((100% - 96px) / 4 + 32px) - 24px)}
  .rail-node{transition:border-color .3s ease,color .3s ease,background-color .3s ease}
  .rail:has(.rail-step:nth-child(3):is(:hover,:focus-visible)) .rail-step:nth-child(-n+3) .rail-node,
  .rail:has(.rail-step:nth-child(4):is(:hover,:focus-visible)) .rail-step .rail-node{border-color:var(--ambre);color:var(--ambre-deep)}
  .rail:has(.rail-step:nth-child(2):is(:hover,:focus-visible)) .rail-step:nth-child(-n+2) .rail-node{border-color:var(--ambre);color:var(--ambre-deep)}
  .rail:has(.rail-step:nth-child(4):is(:hover,:focus-visible)) .rail-step:nth-child(4) .rail-node{background:var(--ambre-deep);border-color:var(--ambre-deep);color:#fff}

  /* — Tarifs : le trait de remplissage, posé sur le parcours (colonnes de 1fr, écart de 40 px), jusqu'à l'arrivée — */
  #tarifs[data-dir="bande"] .method-path{position:relative}
  #tarifs[data-dir="bande"] .method-path::before{content:"";position:absolute;left:24px;top:23px;height:2px;width:0;z-index:0;background:var(--ambre-clair);transition:width .35s var(--a-draw,ease)}
  #tarifs[data-dir="bande"] .method-path:has(.mp-step:nth-child(2):is(:hover,:focus-visible))::before{width:calc((100% + 40px) / 3 - 24px)}
  #tarifs[data-dir="bande"] .method-path:has(.mp-step:nth-child(3):is(:hover,:focus-visible))::before{width:calc(2 * (100% + 40px) / 3 - 24px)}
  #tarifs[data-dir="bande"] .wrap:has(.method-out:is(:hover,:focus-visible)) .method-path::before{width:calc(100% + 40px - 24px)}
  #tarifs[data-dir="bande"] .mp-node{transition:border-color .3s ease,color .3s ease}
  #tarifs[data-dir="bande"] .method-path:has(.mp-step:nth-child(2):is(:hover,:focus-visible)) .mp-step:nth-child(-n+2) .mp-node,
  #tarifs[data-dir="bande"] .method-path:has(.mp-step:nth-child(3):is(:hover,:focus-visible)) .mp-step .mp-node,
  #tarifs[data-dir="bande"] .wrap:has(.method-out:is(:hover,:focus-visible)) .mp-step .mp-node{border-color:var(--ambre-clair);color:var(--ambre-clair)}
  /* l'arrivée, déjà pleine, s'allume : « c'est terminé » */
  #tarifs[data-dir="bande"] .method-out{cursor:default}
  #tarifs[data-dir="bande"] .method-out .mo-ico,
  html.anim-js[data-anim="signature"] #tarifs[data-dir="bande"] .method-out .mo-ico{transition:background-color .3s ease,box-shadow .3s ease,transform .45s var(--a-ease,ease) .55s}
  #tarifs[data-dir="bande"] .method-out:is(:hover,:focus-visible) .mo-ico{background:var(--ambre);box-shadow:0 0 0 6px rgba(221,138,85,.3),0 0 56px rgba(221,138,85,.6)}
  #tarifs[data-dir="bande"] .mp-step{cursor:default}
}
@media(prefers-reduced-motion:reduce){
  .rail::after,.rail-node,#tarifs .method-path::before,#tarifs .mp-node,#tarifs .method-out .mo-ico{transition:none!important}
}

/* ============================================================
   Inès · Tarifs de l'accueil (12/10) : surtitres d'étape comme sur la page Méthode,
   et mentions cochées alignées sur une même ligne, chacune sous un filet fin propre à son étape.
   ============================================================ */
#tarifs[data-dir="bande"] .ch-fil{order:0;margin-bottom:12px}
#tarifs[data-dir="bande"] .method-out .ch-fil{margin:0 0 -12px}
#tarifs[data-dir="bande"] .mp-step .mp-note{padding-top:12px;border-top:1px solid var(--ligne-nuit)}
@media(min-width:921px){
  /* les rangées des trois étapes s'alignent : numéro, surtitre, titre, prix, description, mention */
  #tarifs[data-dir="bande"] .method-path{grid-template-rows:repeat(6,auto);row-gap:0;align-content:start}
  #tarifs[data-dir="bande"] .mp-step{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start;justify-items:start}
  #tarifs[data-dir="bande"] .mp-step>*{justify-self:stretch}
  #tarifs[data-dir="bande"] .mp-step>.mp-node{justify-self:start}
  #tarifs[data-dir="bande"] .mp-step .mp-tag{align-self:end}
  #tarifs[data-dir="bande"] .mp-step .mp-note{align-self:start;margin-top:0}
}
@media(max-width:920px){
  #tarifs[data-dir="bande"] .mp-step .ch-fil{padding-top:4px}
  #tarifs[data-dir="bande"] .mp-step h3{padding-top:0}
  #tarifs[data-dir="bande"] .method-out{grid-template-areas:"ico fil" "ico txt";row-gap:8px}
  #tarifs[data-dir="bande"] .method-out .mo-ico{grid-area:ico}
  #tarifs[data-dir="bande"] .method-out .ch-fil{grid-area:fil;margin:0}
  #tarifs[data-dir="bande"] .method-out .mo-text{grid-area:txt}
}
@media(min-width:921px){
  /* la section garde la hauteur de l'écran malgré les surtitres : rythme vertical resserré */
  #tarifs[data-dir="bande"]{padding-top:clamp(40px,6vh,84px)}
  #tarifs[data-dir="bande"] .wrap>.section-title{margin-bottom:18px}
  #tarifs[data-dir="bande"] .wrap::before{margin-top:59px}
  #tarifs[data-dir="bande"] .method-path,#tarifs[data-dir="bande"] .method-out{margin-top:36px}
  #tarifs[data-dir="bande"] .wrap::after,#tarifs[data-dir="bande"] .method-cta{margin-top:30px}
  #tarifs[data-dir="bande"] .mp-step p{margin-bottom:12px}
  #tarifs[data-dir="bande"] .mp-step .mp-note{padding-top:10px}
}

/* ============================================================
   Inès · Tarifs, corrections retenues par Gaël (12/10)
   « dès » sur la ligne du prix, arrivée allégée, sans halos, trait neutre, icône d'arrivée alignée sur téléphone.
   ============================================================ */
/* « dès » sur la même ligne que le prix : plus de ligne réservée au-dessus des trois prix */
#tarifs[data-dir="bande"] .mp-tag::before,#tarifs[data-dir="bande"] .mp-tag:not(:has(.pr-from))::before{content:none}
#tarifs[data-dir="bande"] .pr-from{display:inline;margin:0 2px 0 0}
#tarifs[data-dir="bande"] .mp-tag{white-space:nowrap}
/* les descriptions évitent un mot seul en dernière ligne */
#tarifs[data-dir="bande"] .mp-step p{text-wrap:pretty}
/* sur grand écran, les colonnes rendent leurs 6 px de marge droite : la description du diagnostic tient en trois lignes, comme les autres */
@media(min-width:921px){#tarifs[data-dir="bande"] .mp-step{padding-right:0}}
/* arrivée allégée : texte à la taille des titres d'étape, carré bordé au repos, plein au survol */
#tarifs[data-dir="bande"] .method-out .mo-text{font-size:1.3rem;line-height:1.35}
#tarifs[data-dir="bande"] .method-out .mo-ico{background:transparent;border:1px solid var(--ambre-clair);color:var(--ambre-clair)}
#tarifs[data-dir="bande"] .method-out:is(:hover,:focus-visible) .mo-ico{background:var(--ambre);border-color:var(--ambre);color:#fff}
/* sans halos (cohérent avec « pas d'ombres ») */
#tarifs[data-dir="bande"] .mp-step:first-child .mp-node,
#tarifs[data-dir="bande"] .method-out .mo-ico,
#tarifs[data-dir="bande"] .method-out:is(:hover,:focus-visible) .mo-ico{box-shadow:none}
/* trait neutre au repos : l'ambre reste seulement au départ, la jauge du survol fait le reste */
@media(min-width:921px){
  #tarifs[data-dir="bande"] .wrap::before{background:linear-gradient(90deg,var(--ambre-clair),rgba(237,233,224,.26) 18%)}
}
@media(max-width:920px){
  #tarifs[data-dir="bande"] .mp-step:last-child::before{background:rgba(237,233,224,.26)}
  /* l'icône d'arrivée en face de son surtitre, comme les carrés des étapes */
  #tarifs[data-dir="bande"] .method-out{align-items:start}
  #tarifs[data-dir="bande"] .method-out .ch-fil{padding-top:4px}
}

/* Inès · 12/10 : l'introduction des tarifs évite elle aussi un mot seul en dernière ligne (téléphone) */
#tarifs[data-dir="bande"] .wrap>.lead{text-wrap:pretty}

/* Inès · 12/10 (retenu par Gaël) : le parcours reprend l'écart de 40 px de la grille, au lieu des 24 px hérités.
   Les carrés sont régulièrement espacés, la jauge tombe pile sur eux, les filets des mentions s'écartent de 40 px. */
@media(min-width:921px){
  #tarifs[data-dir="bande"] .method-path{column-gap:40px}
}

/* ============================================================
   Inès · Page Contact (12/10) : en-tête resserré, deux façons de me joindre lisibles d'un coup d'œil.
   Tout est sous body.page-contact (version retenue par Gaël le 12/10).
   ============================================================ */
/* en-tête : environ 250 px au lieu de 423, pour que le formulaire et son bouton tiennent dans le premier écran */
.page-contact .page-head{padding:112px 0 38px}
.page-contact .page-head .eyebrow{margin-bottom:12px}
.page-contact .page-head h1{font-size:clamp(2.1rem,3.6vw,2.8rem);margin-bottom:12px}
.page-contact .page-head .ph-lead{font-size:1.1rem;max-width:none}
.page-contact .page-head + section{padding-top:48px}

/* colonne de gauche : l'offre, ses garanties, puis l'autre façon de me joindre */
@media(min-width:921px){.page-contact .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:64px}}
.page-contact .contact-aside h2{font-size:1.75rem;margin-bottom:12px}
.page-contact .contact-aside > p{margin-bottom:0;max-width:46ch}
.page-contact .contact-aside .ca-list{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--ligne)}
.page-contact .contact-aside .ca-list li{margin-bottom:10px;color:var(--encre-prose)}
.page-contact .contact-aside .ca-list li:last-child{margin-bottom:0}
/* réserver directement : un vrai second choix, encadré, avec un bouton secondaire net */
.page-contact .contact-aside .ca-book{margin-top:28px;padding:22px 24px 24px;border:1px solid var(--ligne);border-left:3px solid var(--ambre);background:#F4F5F7}
.page-contact .contact-aside .ca-book a{display:inline-flex;align-items:center;gap:9px;min-height:48px;margin-top:6px;padding:12px 20px;border:1px solid var(--ambre-deep);color:var(--ambre-deep);background:#fff;font-weight:600;font-size:15px;transition:background-color .25s ease,color .25s ease}
.page-contact .contact-aside .ca-book a:hover{background:var(--ambre-deep);color:#fff}
.page-contact .contact-aside .ca-book a:focus-visible{outline:2px solid var(--ambre);outline-offset:3px}
/* l'e-mail, en simple ligne discrète */
.page-contact .contact-aside .ca-mail{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:20px;padding-top:0;border-top:0}
.page-contact .contact-aside .ca-mail .lbl{margin:0}
.page-contact .contact-aside .ca-mail a:focus-visible{outline:2px solid var(--ambre);outline-offset:3px}

/* formulaire : la voie principale, plus compact, sans vide sous le bouton */
.page-contact .contact-form{padding:30px 32px 32px;border-top:3px solid var(--nuit)}
.page-contact .contact-form .form-field{margin-bottom:16px}
.page-contact .contact-form .form-field textarea{min-height:120px}
.page-contact .contact-form .form-status:empty{display:none}

/* téléphone : le formulaire d'abord, les arguments ensuite */
@media(max-width:920px){
  .page-contact .contact-grid{gap:44px}
  .page-contact .contact-form-col{order:-1}
}
@media(max-width:680px){
  .page-contact .page-head{padding:104px 0 32px}
  .page-contact .page-head + section{padding-top:28px}
  .page-contact .contact-form{padding:22px 20px 24px}
  .page-contact .contact-aside .ca-book{padding:18px 16px}
  .page-contact .contact-aside .ca-book a{width:100%;justify-content:center;white-space:nowrap;padding:12px 10px;font-size:14px}
  .page-contact .contact-aside .ca-mail a{display:inline-block;padding:11px 0}
}


/* 12/10 · Contact : en-tête encore resserré */
@media(min-width:921px){
  .page-contact .page-head{padding:100px 0 26px}
  .page-contact .page-head h1{margin-bottom:8px}
  .page-contact .page-head .eyebrow,.page-contact .page-head .section-title{margin-bottom:10px}
  .page-contact .page-head + section{padding-top:36px}
}
@media(min-width:921px){
  .page-contact .page-head + section{padding-top:30px}
  .page-contact .contact-aside .ca-book{margin-top:20px}
  .page-contact .contact-aside .ca-mail{margin-top:16px}
}

/* ============================================================
   Revue d'Inès du 12/10, retenue par Gaël : sections sur un écran, en-têtes resserrés,
   chapeaux immobiles, socle de la Méthode en colonnes filetées.
   (L'ordre des sections de l'accueil et de la Méthode est écrit directement dans le HTML.)
   ============================================================ */
/* sections qui tiennent sur un écran (accueil : Les problèmes, Mes résultats ; Méthode : Le socle, Les chantiers) */
@media(min-width:921px){
  #probleme{padding:52px 0 48px}
  #probleme .section-title{margin-bottom:20px}
  #probleme h2.big{margin-bottom:24px}
  #probleme .pains{gap:16px}
  #probleme .pain{padding:24px 28px 22px}
  #probleme .pain-band{margin-top:28px}
  section.resultats{padding:56px 0 52px}
  section.resultats .section-title{margin-bottom:20px}
  section.creme-2:has(.cards2){padding:56px 0 52px}
  section.creme-2:has(.cards2) .section-title{margin-bottom:20px}
  section.creme-2:has(.cards2) .lead--gap{margin-bottom:28px}
  section.creme-2:has(.cards2) .thesis{margin-top:8px}
  section.creme-2:has(.cards2) .thesis p.thesis-pivot{margin:28px 0 0;padding:22px 0;font-size:clamp(1.2rem,2vw,1.45rem)}
  section.nuit:has(.chantiers){padding:76px 0 72px}
}
/* en-têtes des pages intérieures resserrés (Méthode, Blog, mentions légales) */
.page-head--compact{padding:112px 0 40px}
.page-head--compact .eyebrow{margin-bottom:12px}
.page-head--compact h1{font-size:clamp(2.1rem,3.6vw,2.8rem);margin-bottom:12px}
.page-head--compact .ph-lead{font-size:1.1rem}
@media(max-width:680px){.page-head--compact{padding:104px 0 32px}}
/* moins de petits mouvements : les chapeaux de section ne s'animent plus */
html.anim-js section .lead.ra{opacity:1!important;transform:none!important;transition:none!important}
/* Méthode : le socle en colonnes filetées, comme les leviers de l'À propos */
section .cards2{gap:0;border-top:1px solid #D5DAE2}
section .cards2 .card{background:none;border:0;border-radius:0;padding:28px 36px 6px 0}
section .cards2 .card .ic{width:auto;height:auto;background:none;justify-content:flex-start;margin-bottom:14px}
@media(min-width:921px){section .cards2 .card + .card{border-left:1px solid #D5DAE2;padding-left:36px;padding-right:0}}
@media(max-width:920px){section .cards2 .card{padding:24px 0}section .cards2 .card + .card{border-top:1px solid #D5DAE2}}