/* Polices de la charte : Fraunces (titres) + Public Sans (texte). Confirmé 2026-09-22. */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/publicsans.woff2) format('woff2');}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/publicsans-italic.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 500;font-display:swap;src:url(fonts/fraunces.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url(fonts/fraunces-italic.woff2) format('woff2');}


/* ==========================================================
   Page de vente Diagnostic — v17
   Identité : ⭐ Guide de marque visuel (palette officielle + Fraunces/Public Sans).
   Mise en page : mesurée sur le site de Nathalie Ellis (Brief de HTML).

   Règles portantes :
   - Une seule couleur d'accent (argile rosée), à une seule place à la fois :
     boutons, clause en italique dans les titres, annotations. Rien d'autre.
   - Aucune boîte. Du texte posé sur de la couleur. La bande de couleur
     pleine largeur EST le séparateur.
   - Colonne de prose étroite (34rem), centrée, avec de vraies marges vides.
   - Aucune ombre, aucune opacité partielle, aucun rgba. Filets = couleur pleine.
   ========================================================== */
:root{
  /* --- palette officielle, 6 tons (⭐ Guide de marque visuel) --- */
  --rose:#BE8172;      /* accent — la seule couleur : boutons, italique, détails */
  --creme:#F0EAE2;     /* neutre clair : fonds, respiration, texte sur les foncés */
  --bois:#6E5A3B;      /* chaud : surlignage, badges, filets, petits aplats */
  --olive:#56492E;     /* foncé secondaire : grandes sections pleine couleur */
  --espresso:#2A2016;  /* encre : texte principal, sections foncées */
  --noir:#140E0A;      /* profond : le plus foncé, la fin de page */

  --serif:'Fraunces', Georgia, 'Times New Roman', Times, serif;
  --sans:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* la manuscrite est une pile système (décision : pas d'achat pour la maquette).
     Elle change d'un appareil à l'autre — accepté à ce stade. */
  --hand:"Bradley Hand","Bradley Hand ITC","Segoe Script","Marker Felt",Noteworthy,"Comic Sans MS",cursive;

  /* largeurs mesurées sur la référence */
  --read:46rem;   /* la colonne de prose, élargie pour une lecture uniforme */
  --wide:62rem;   /* héros, portraits, tableaux, schémas : la largeur des objets */
  --full:72rem;   /* le bandeau seulement */
  --gut:clamp(1.4rem, 6vw, 5rem);   /* la gouttière, les marges vides des bords */
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--creme); color:var(--espresso);
  font-family:var(--sans); font-size:1rem; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{display:block; max-width:100%;}
a{color:inherit;}

/* respiration verticale des sections */
.sec{padding:clamp(4rem,11vw,8rem) var(--gut);}
/* UN conteneur par section. La prose est bridée par une largeur de lecture,
   centrée sur la page ; le texte est aligné à gauche DEDANS. */
.wrap{max-width:var(--wide); margin:0 auto;}
.wrap--full{max-width:var(--full); margin:0 auto;}
.read{max-width:var(--read); margin-left:auto; margin-right:auto;}
.c{text-align:center;}

/* fonds de section */
.bg-creme{background:var(--creme); color:var(--espresso);}
.bg-olive{background:var(--olive); color:var(--creme);}
.bg-espresso{background:var(--espresso); color:var(--creme);}
.bg-noir{background:var(--noir); color:var(--creme);}
.bg-bois{background:var(--bois); color:var(--creme);}

/* ---------- surtitres : la pastille en brun bois ---------- */
.kick{display:inline-block; font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--creme); background:var(--bois);
  padding:.42rem .82rem; margin:0 0 1.6rem; line-height:1.3;}
.on-dark .kick{background:var(--creme); color:var(--espresso);}

/* ---------- titres : Fraunces light, en grand ; clause d'emphase en rose italique ---------- */
.t1,.t2,.t3{font-family:var(--serif); font-weight:300; letter-spacing:-.02em; margin:0;
  text-wrap:balance; color:var(--espresso);}
.t1{font-size:clamp(2.05rem,5.2vw,3.2rem); line-height:1.08; letter-spacing:-.028em;}
.t2{font-size:clamp(1.65rem,3.6vw,2.35rem); line-height:1.15; letter-spacing:-.02em;}
.t3{font-family:var(--serif); font-weight:400; font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.3;
  letter-spacing:-.01em;}
.on-dark .t1,.on-dark .t2,.on-dark .t3{color:var(--creme);}
.em{font-style:italic; color:var(--rose); font-weight:300;}
.on-dark .em{color:var(--rose);}

/* ---------- corps ---------- */
p{margin:1.5rem 0 0;}          /* écarts généreux mais réguliers */
.t1+p,.t2+p,.t3+p{margin-top:1.5rem;}
.lead{color:var(--espresso); font-size:1.08rem; line-height:1.64;}
.on-dark .lead{color:var(--creme);}
.big{font-family:var(--serif); font-weight:400; font-size:clamp(1.12rem,1.8vw,1.3rem);
  line-height:1.5; letter-spacing:-.01em;}
.small{font-size:.86rem;}

/* ---------- écriture à la main (annotations penchées) ---------- */
.note{font-family:var(--hand); font-size:1.12rem; color:var(--rose); display:inline-block;
  line-height:1.4; transform:rotate(-1.4deg);}
.note--s{font-family:var(--hand); font-size:1rem; color:var(--bois); display:block;}
.on-dark .note{color:var(--rose);} .on-dark .note--s{color:var(--creme);}

/* ---------- surlignage : une tache organique en brun bois, jamais un rectangle ---------- */
.hl{position:relative; isolation:isolate; color:var(--creme); white-space:nowrap;}
.hl::before,.hl::after{content:""; position:absolute; z-index:-1; background:var(--bois);
  border-radius:47% 53% 50% 50%/60% 55% 45% 40%;}
.hl::before{left:-.34em; right:-.16em; top:.00em; bottom:-.06em; transform:rotate(-1.4deg);}
.hl::after {left:-.16em; right:-.34em; top:.10em; bottom:-.14em; transform:rotate(1.8deg);}
/* nombres soulignés au trait rose */
.num{font-family:var(--serif); font-style:italic; position:relative; isolation:isolate;
  white-space:nowrap; color:inherit;}
.num::before{content:""; position:absolute; left:-.06em; right:-.06em; bottom:-.02em; height:.26em;
  background:var(--rose); border-radius:2px; z-index:-1; transform:rotate(-.5deg);}

/* ---------- boutons : pilule, argile rosée, texte espresso ---------- */
.cta{margin-top:2.4rem;}
.btn{display:inline-block; background:var(--rose); color:var(--espresso);
  border:1px solid var(--rose); border-radius:999px; padding:1.05rem 2.4rem;
  font-family:var(--sans); font-size:.95rem; font-weight:600; text-decoration:none; line-height:1.4;
  letter-spacing:.005em;}
/* sur bande foncée, on inverse : fond crème, texte espresso */
.on-dark .btn{background:var(--creme); color:var(--espresso); border-color:var(--creme);}
.subbtn{margin-top:.95rem; font-size:.82rem; color:var(--bois);}
.on-dark .subbtn{color:var(--creme);}

/* ==========================================================
   LE BANDEAU
   ========================================================== */
.nav{background:var(--olive); padding:.85rem var(--gut);}
.nav-in{max-width:var(--full); margin:0 auto; display:flex; align-items:center; gap:1.4rem;}
.nav .logo{margin-right:auto; display:block;}
.nav .logo img{height:24px; width:auto;}
.nav-links{display:flex; gap:1.7rem;}
.nav-links a{color:var(--creme); text-decoration:none; font-size:.82rem; letter-spacing:.03em;}
.nav .btn{padding:.58rem 1.3rem; font-size:.8rem;}
@media (max-width:62rem){.nav-links{display:none}}
@media (max-width:26rem){.nav .btn{padding:.52rem 1rem; font-size:.74rem} .nav .logo img{height:20px}}

/* ==========================================================
   HÉROS — asymétrique, photo en forme organique
   ========================================================== */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,6vw,4.5rem); align-items:center;}
@media (max-width:56rem){.hero{grid-template-columns:1fr; gap:2.6rem}}
.hero .lead{font-size:1.06rem;}
/* la photo dans une forme organique (arche) */
.arch{overflow:hidden; border-radius:48% 48% 8px 8px / 34% 34% 8px 8px;
  aspect-ratio:1/1.22; background:var(--bois);}
.arch img{width:100%; height:100%; object-fit:cover;}
.hero-note{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  margin-top:1.4rem; max-width:24rem;}
.hero-note svg{width:42px; height:auto; overflow:visible; margin-top:.2rem;}
.hero-note .txt{font-family:var(--hand); font-size:1.06rem; color:var(--rose); line-height:1.4;
  transform:rotate(-1.2deg);}

/* ==========================================================
   LISTES
   ========================================================== */
.enum{margin:2rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:1.5rem;}
.enum li{position:relative; padding-left:2.1rem;}
.enum li .dash{position:absolute; left:0; top:.55em; width:20px;}
.enum li .dash svg{width:100%; height:auto; overflow:visible; display:block;}
/* liste à crochets / à tirets (le filtre « pour qui ») */
.lst{margin:1.6rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:1.05rem;}
.lst li{position:relative; padding-left:2rem; line-height:1.6;}
.lst li .ic{position:absolute; left:0; top:.32em; width:15px;}
.lst li .ic svg{width:100%; height:auto; overflow:visible; display:block;}

/* ==========================================================
   BONIFICATION 2 — LE REFRAIN, section-pause pleine largeur
   « Ta business a grandi plus vite que sa structure »
   revient 3 fois, sur un fond qui fonce progressivement.
   ========================================================== */
.pause{padding:clamp(4.5rem,12vw,8.5rem) var(--gut); text-align:center;}
/* la phrase-refrain : classe autonome, elle porte le même grand display
   qu'elle soit dans une section-pause ou en clôture de la bande Sophie */
.phrase{font-family:var(--serif); font-weight:300; letter-spacing:-.028em; text-align:center;
  font-size:clamp(1.9rem,4.8vw,3.1rem); line-height:1.08; margin:0 auto; max-width:20em;
  text-wrap:balance;}
.pause .sous{margin-top:1.6rem; max-width:34rem; margin-left:auto; margin-right:auto;}

/* ==========================================================
   BONIFICATION 1 — LES LIVRABLES en échelle verticale 01 → 05
   Pas de grille de cartes. Chaque livrable = un numéro manuscrit,
   un titre en display, un tiret dessiné, filets fins entre les lignes.
   ========================================================== */
.deliv{margin:2.8rem auto 0; padding:0; list-style:none; max-width:var(--read);}
.deliv li{padding:2rem 0; border-bottom:1px solid var(--bois);
  display:grid; grid-template-columns:3rem 1fr; gap:.4rem 1.1rem; align-items:start;}
.deliv li:first-child{border-top:1px solid var(--bois);}
.deliv .n{font-family:var(--hand); font-size:1.9rem; color:var(--olive); line-height:1; padding-top:.1rem;}
.deliv .t3{grid-column:2;}
.deliv p{grid-column:2; margin:.6rem 0 0; font-size:.94rem;}
.deliv .fig{grid-column:2; margin-top:1.4rem; max-width:26rem;}

/* ==========================================================
   BONIFICATION 3 + tableau comparatif — plats, carrés, filets fins
   ========================================================== */
.cmp{border:1px solid var(--bois); background:var(--creme); margin:3rem auto 0; max-width:var(--wide);}
.cmp-row{display:grid; grid-template-columns:1fr 1fr;}
.cmp-row>div{padding:1.05rem 1.25rem; line-height:1.6;}
.cmp-row>div:first-child{border-right:1px solid var(--bois);}
.cmp-row+.cmp-row{border-top:1px solid var(--bois);}
.cmp-head>div{font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding-top:1.05rem; padding-bottom:1.05rem; color:var(--espresso);}
.cmp-head>div:first-child{background:var(--bois); color:var(--creme); border-right-color:var(--bois);}
.cmp .ic{display:inline-block; width:14px; vertical-align:-1px; margin-right:.5rem;}
.cmp .ic svg{width:100%; height:auto; overflow:visible;}
@media (max-width:40rem){
  .cmp-row{grid-template-columns:1fr}
  .cmp-row>div:first-child{border-right:0; border-bottom:1px solid var(--bois)}
  .cmp-head{display:none}
  .cmp-row>div::before{content:attr(data-lb); display:block; font-family:var(--sans);
    font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--olive); margin-bottom:.4rem;}
  .cmp-row+.cmp-row{border-top:2px solid var(--bois);}
}
/* le filtre « pour qui / pas pour qui » : même grammaire, deux colonnes */
.qui{display:grid; grid-template-columns:1fr 1fr; margin:2.6rem auto 0; max-width:var(--wide);
  border:1px solid var(--bois);}
.qui>div{padding:clamp(1.6rem,4vw,2.4rem);}
.qui>div:first-child{border-right:1px solid var(--bois);}
.qui .t3{margin-bottom:.4rem;}
@media (max-width:44rem){
  .qui{grid-template-columns:1fr}
  .qui>div:first-child{border-right:0; border-bottom:1px solid var(--bois)}
}

/* ==========================================================
   LES 4 ÉTAPES — une grille à filets fins (pas des cartes)
   ========================================================== */
.steps{display:grid; grid-template-columns:1fr; gap:1px; background:var(--bois);
  border:1px solid var(--bois); margin:3rem auto 0; max-width:var(--wide);}
@media (min-width:40rem){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--creme); padding:1.8rem 1.4rem; display:flex; flex-direction:column; gap:.55rem;}
.step-n{font-family:var(--serif); font-weight:300; font-size:2.5rem; line-height:1; color:var(--rose);}
.step p{margin:0; font-size:.9rem; line-height:1.6;}

/* ==========================================================
   CE QUE ÇA DEMANDE — texte posé sur l'encre, pas une carte
   ========================================================== */
.demande{max-width:var(--read); margin:2.6rem auto 0;}
.demande .px{font-family:var(--serif); font-weight:300; font-size:clamp(3rem,9vw,4.6rem);
  line-height:1; color:var(--creme); display:block; letter-spacing:-.03em;}
.demande .pxn{margin-top:.9rem; font-size:.9rem; color:var(--creme);}
.demande .rule{height:1px; background:var(--bois); margin:2rem 0;}
.demande dl{margin:0; display:flex; flex-direction:column; gap:.9rem;}
.demande .rw{display:grid; grid-template-columns:10rem 1fr; gap:.6rem;}
.demande dt{color:var(--creme); font-weight:600; font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase;}
.demande dd{margin:0;}
@media (max-width:34rem){.demande .rw{grid-template-columns:1fr; gap:.15rem}}

/* ==========================================================
   TÉMOIGNAGE (Bonification 4) — bande foncée, citation display italique
   ========================================================== */
.cite{font-family:var(--serif); font-weight:300; font-style:italic; letter-spacing:-.018em;
  font-size:clamp(1.5rem,3.6vw,2.3rem); line-height:1.24; color:var(--creme); margin:0;
  text-wrap:balance;}
.cite-body{margin-top:1.9rem; max-width:var(--read); margin-left:auto; margin-right:auto;}
.attrib{margin-top:1.4rem; font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--creme);}
.apres{margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--bois);
  max-width:var(--read); margin-left:auto; margin-right:auto;}

/* ==========================================================
   BANDE PHOTO pleine largeur
   ========================================================== */
.bande{display:block; width:100%; overflow:hidden;}
.bande img{width:100%; height:clamp(240px,34vw,460px); object-fit:cover; object-position:50% 34%;}

/* ==========================================================
   COMPOSITION à deux colonnes (destination, approche) — texte sur couleur
   ========================================================== */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,4.5rem); align-items:center;}
@media (max-width:56rem){.duo{grid-template-columns:1fr; gap:2.4rem}}

/* ==========================================================
   FAQ
   ========================================================== */
.faq{margin:2.6rem auto 0; max-width:var(--read);}
.faq details{border-top:1px solid var(--bois);}
.faq details:last-of-type{border-bottom:1px solid var(--bois);}
.faq summary{list-style:none; cursor:pointer; padding:1.3rem 2.2rem 1.3rem 0; position:relative;
  font-family:var(--serif); font-weight:400; font-size:1.15rem; color:var(--espresso); line-height:1.36;}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{position:absolute; right:0; top:1.55rem; width:16px; color:var(--olive);}
.faq summary .chev svg{width:100%; height:auto; overflow:visible; display:block;}
.faq details[open] summary .chev{transform:rotate(180deg);}
.faq summary:focus-visible{outline:2px solid var(--rose); outline-offset:3px;}
.faq .ans{padding:0 2.2rem 1.6rem 0; margin:0; font-size:.94rem;}

/* ==========================================================
   SCHÉMAS DESSINÉS
   ========================================================== */
.fig{margin-top:2.6rem; overflow-x:auto;}
.fig svg{width:100%; height:auto; display:block; overflow:visible;}
.fig--map{max-width:var(--wide); margin-left:auto; margin-right:auto;}
.fig--map svg{min-width:300px;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem);
  max-width:var(--wide); margin:2.8rem auto 0;}
@media (max-width:44rem){.split{grid-template-columns:1fr}}
.split .cap{font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--olive); margin-bottom:.2rem;}
.split .note--s{margin-bottom:.6rem;}

/* ---------- pied de page ---------- */
.foot{background:var(--noir); padding:4rem var(--gut); text-align:center;}
.foot .logo img{height:30px; width:auto; margin:0 auto;}
.foot .cr{margin-top:1.1rem; font-size:.82rem; color:var(--creme);}

/* utilitaires de marge (toujours margin-top seul, jamais le raccourci) */
.mt-s{margin-top:1.6rem} .mt-m{margin-top:2.4rem} .mt-l{margin-top:3.2rem}
.m0{margin:0}

/* deux sections crème qui se suivent : un filet fin marque la coupure */
.bg-creme + .bg-creme{padding-top:0;}
.bg-creme + .bg-creme > .wrap::before,
.bg-creme + .bg-creme > .wrap--full::before{content:""; display:block; width:var(--read);
  max-width:100%; height:1px; background:var(--bois); margin:0 auto clamp(3rem,7vw,5rem);}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}


/* ============================================================
   AJOUTS SITE — menu multi-pages, pied de page, offres, formulaire
   ============================================================ */
.nav-links a[aria-current="page"]{color:var(--rose);}
.foot-links{display:flex; flex-wrap:wrap; gap:1.3rem 1.5rem; justify-content:center; margin-top:1.5rem;}
.foot-links a{color:var(--creme); text-decoration:none; font-size:.84rem; letter-spacing:.03em;}
.foot-links a[aria-current="page"]{color:var(--rose);}

/* les 3 niveaux d'offre : grille a filets fins, jamais des cartes lourdes */
.tiers{display:grid; grid-template-columns:1fr; gap:1px; background:var(--bois);
  border:1px solid var(--bois); margin:3rem auto 0; max-width:var(--wide);}
@media(min-width:56rem){.tiers{grid-template-columns:repeat(3,1fr);}}
.tier{background:var(--creme); padding:2rem 1.6rem; display:flex; flex-direction:column; gap:.55rem;}
.tier .tname{font-family:var(--serif); font-weight:300; font-size:1.7rem; line-height:1.08; color:var(--espresso);}
.tier .tmeta{font-family:var(--hand); font-size:1rem; color:var(--bois);}
.tier .tdesc{font-size:.92rem; margin:.5rem 0 .2rem;}
.tier ul{list-style:none; margin:.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem;}
.tier li{position:relative; padding-left:1.4rem; font-size:.9rem; line-height:1.5;}
.tier li::before{content:"\2014"; position:absolute; left:0; top:0; color:var(--bois);}
.tier .tcta{margin-top:auto; padding-top:1.3rem;}
.tier .tcta a{font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--espresso);
  text-decoration:none; border-bottom:2px solid var(--rose); padding-bottom:2px;}
.tier--reco{background:var(--olive); color:var(--creme);}
.tier--reco .tname{color:var(--creme);} .tier--reco .tmeta{color:var(--creme);}
.tier--reco li::before{color:var(--creme);}
.tier--reco .tcta a{color:var(--creme); border-bottom-color:var(--rose);}

/* infolettre : la zone ou vient le formulaire MailerLite */
.form-slot{max-width:var(--read); margin:2.6rem auto 0;}
.form-note{border:1px dashed var(--bois); padding:1.6rem 1.4rem; margin-top:1.4rem;
  font-size:.9rem; color:var(--bois);}

/* contact */
.contact-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem;}
.contact-actions .btn.ghost{background:transparent; color:var(--espresso); border:1px solid var(--espresso);}
.on-dark .contact-actions .btn.ghost{background:transparent; color:var(--creme); border-color:var(--creme);}


/* ============================================================
   V13 — cadre + ombre (effet Nathalie), portrait, pastille
   Ombres/rgba assumés ici : demande explicite d'Audréanne pour l'effet.
   ============================================================ */
/* photo du héros : cadre maté crème + ombre douce (fini l'arche organique) */
.hero-photo{background:var(--creme); padding:14px; border:1px solid var(--bois);
  box-shadow:0 34px 64px -24px rgba(20,14,10,.42);}
.hero-photo img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover;}

/* section portrait : photo encadrée à gauche, texte à droite (remplace la bande) */
.portrait{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,6vw,4.5rem);
  align-items:center;}
@media (max-width:56rem){.portrait{grid-template-columns:1fr; gap:2.6rem}}
.ph-frame{background:var(--creme); padding:14px; box-shadow:0 30px 60px -24px rgba(20,14,10,.5);}
.ph-frame img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover;}

/* pastille : petite étiquette de précision, hors des listes */
.pastille{display:inline-block; margin-top:1.7rem; border:1px solid var(--bois);
  padding:.65rem 1rem; font-size:.9rem; line-height:1.45; color:var(--espresso);}
.on-dark .pastille{border-color:var(--creme); color:var(--creme);}

/* prix, en gros, sur bande foncée */
.prix{font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,7vw,3.8rem);
  line-height:1; letter-spacing:-.03em; color:var(--creme); display:block; margin-top:.3rem;}


/* ============================================================
   V2 — REFONTE 2026-09-22
   Espacement entre les blocs mesuré sur le site de Jasmin Kaila :
   section = clamp(56px, 8vw, 120px) en haut et en bas,
   gouttière = clamp(20px, 5vw, 64px), écarts internes = clamp(22px, 2.6vw, 34px).
   Site plus large, blocs plus hauts sur ordi, header sans texte sur la photo.
   ============================================================ */
:root{
  --wide:76rem;
  --full:88rem;
  --gut:clamp(1.25rem,5vw,4rem);
  --gap:clamp(1.4rem,2.6vw,2.1rem);      /* surtitre → titre → texte */
  --gap-l:clamp(1.8rem,4vw,4rem);        /* entête de section → contenu */
}
.sec{padding:clamp(3.5rem,8vw,7.5rem) var(--gut);}
/* chaque section garde son plein espacement, même entre deux crèmes */
.bg-creme + .bg-creme{padding-top:clamp(3.5rem,8vw,7.5rem);}
.bg-creme + .bg-creme > .wrap::before,
.bg-creme + .bg-creme > .wrap--full::before{display:none;}
.bg-creme + .bg-creme{position:relative;}
.bg-creme + .bg-creme::before{content:""; position:absolute; top:0; left:var(--gut); right:var(--gut);
  max-width:var(--wide); margin:0 auto; height:1px; background:var(--bois);}
.oeyebrow{font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--olive);}
.kick{margin-bottom:var(--gap);}
.t1+p,.t2+p,.t3+p,.t1+.lead,.t2+.lead{margin-top:var(--gap);}
.t2{font-size:clamp(1.75rem,3.6vw,2.7rem);}
.cta{margin-top:var(--gap-l);}

/* blocs pleine hauteur sur ordi : de vrais blocs, pas des diapos */
@media (min-width:56rem){
  .tall{min-height:86vh; display:flex; flex-direction:column; justify-content:center;}
  .tall > .wrap, .tall > .wrap--full{width:100%;}
}

/* deux colonnes : titre à gauche, contenu à droite — remplit la largeur */
.split2{display:grid; grid-template-columns:5fr 7fr; gap:var(--gap-l) clamp(2.5rem,7vw,7rem); align-items:start;}
.split2 > :first-child{position:sticky; top:2rem;}
@media (max-width:56rem){.split2{grid-template-columns:1fr} .split2 > :first-child{position:static}}
.split2 .lead:first-child, .split2 .body > p:first-child{margin-top:0;}
.split2 .enum{margin-top:0;}

/* HEADER : photo d'un côté, texte de l'autre, jamais superposés */
.hero2{background:var(--espresso); color:var(--creme);}
.hero2 .inner{max-width:none; margin:0; display:grid; grid-template-columns:1fr 1fr;
  min-height:clamp(560px,86vh,860px);}
.hero2 .photo{position:relative; overflow:hidden; min-height:100%;}
.hero2 .photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero2 .txt{display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3.5rem,8vw,7.5rem) var(--gut) clamp(3.5rem,8vw,7.5rem) clamp(2.5rem,6vw,6rem);}
.hero2 .kick{background:var(--creme); color:var(--espresso); align-self:flex-start;}
.hero2 h1{font-family:var(--serif); font-weight:300; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(2.1rem,4.2vw,3.6rem); margin:0; color:var(--creme); text-wrap:balance;}
.hero2 h1 .em{color:var(--rose);}
.hero2 .lead{color:var(--creme); max-width:34rem;}
.hero2 .btn{background:var(--rose); border-color:var(--rose); color:var(--espresso); align-self:flex-start;}
@media (max-width:56rem){
  .hero2 .inner{grid-template-columns:1fr; min-height:0;}
  .hero2 .photo{min-height:0; aspect-ratio:4/3.4;}
  .hero2 .txt{padding:clamp(2.6rem,8vw,3.5rem) var(--gut) clamp(3.5rem,10vw,4.5rem);}
}

/* livrables sur fond foncé */
.on-dark .deliv li{border-color:var(--creme);}
.on-dark .deliv .n{color:var(--rose);}
.deliv{max-width:none; margin-top:0;}

/* prix en encadré, à côté du « pour toi si » */
.prix-box{border:1px solid var(--creme); padding:clamp(2rem,4vw,3rem); text-align:center;}
.prix-box .oeyebrow{color:var(--creme);}
.prix-box .prix{font-size:clamp(3.4rem,8vw,5.2rem); margin-top:1rem;}
.prix-box p{color:var(--creme);}

/* citation sur crème */
.cite-c{font-family:var(--serif); font-weight:300; font-style:italic; letter-spacing:-.018em;
  font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.25; color:var(--espresso); margin:0; text-wrap:balance;}
.cite-c .em{font-style:italic;}
.resultat{margin-top:var(--gap-l); padding-top:var(--gap); border-top:1px solid var(--bois);}


/* ============================================================
   V2.1 — LISIBILITÉ ET COULEURS (2026-09-22)
   Contrastes mesurés (WCAG) :
   rose sur olive 2,75 et rose sur crème 2,67 = trop pâle pour du texte.
   Règle : le rose d'origine reste pour les boutons et le texte sur
   espresso ou noir. Sur fond clair, le texte d'accent passe au rose
   foncé (même teinte, 4,1 sur crème). Plus jamais de rose sur olive.
   Rythme : foncé = héros + un moment de conversion + pied de page.
   Tout le reste alterne crème et sable (contraste doux).
   ============================================================ */
:root{
  --sable:#E3D7C8;       /* crème un ton plus foncé : casse le rythme sans contraste fort */
  --rose-txt:#9E6152;    /* argile rosée assombrie, pour le texte d'accent sur fond clair */
}
.bg-sable{background:var(--sable); color:var(--espresso);}
.em{color:var(--rose-txt);}
.bg-espresso .em, .bg-noir .em, .hero2 .em{color:var(--rose);}
.bg-olive .em, .bg-bois .em{color:var(--creme);}
.bg-sable.proof .big-pov{color:var(--espresso);}
.bg-sable .attrib-line{color:var(--bois);}
.bg-sable .cmp, .bg-sable .step{background:var(--sable);}

/* MOBILE : une seule direction de lecture, texte plus confortable */
@media (max-width:56rem){
  body{font-size:1.0625rem;}
  /* tout aligné à gauche : un paragraphe centré se lit mal sur un téléphone */
  .c, .proof, .nl-inner, .phrase, .big-pov, .work-featured{text-align:left;}
  .phrase, .big-pov{margin-left:0;}
  #mlb2-45285557 form.ml-block-form{margin-left:0;}
  /* photo du héros plus basse : le titre arrive plus haut à l'écran */
  .hero2 .photo{aspect-ratio:3/2;}
  /* page Diagnostic : pas de photo en haut, la promesse et le bouton d'abord */
  .hero2--texte-mobile .photo{display:none;}
  /* livrables : moins d'espace perdu à gauche */
  .deliv li{grid-template-columns:2.2rem 1fr; padding:1.4rem 0;}
  /* tableau avant/après : « aujourd'hui » en retrait, « après » mis en valeur */
  .cmp-row>div:first-child{color:var(--bois); font-size:.94rem;}
  .cmp-row>div:last-child{font-weight:500;}
}


/* ============================================================
   V2.2 — VARIATION PALETTE : les 6 tons officiels, redistribués
   Crème = la base (même lumière que les photos).
   Les foncés deviennent des accents : texte, petits aplats, bas de page.
   Argile rosée = boutons seulement (règle d'or du guide).
   Italique d'accent des titres = olive brûlé (7,4 sur crème).
   Nuance = crème + 12 % de brun bois (#E0D9CE), pas une nouvelle couleur.
   ============================================================ */
:root{--sable:#E0D9CE;}
.em, .hero2 .em, .bg-sable .em, .bg-creme .em{color:var(--olive);}
.bg-espresso .em, .bg-noir .em, .bg-olive .em, .bg-bois .em{color:var(--creme);}

/* héros clair : la photo et le texte dans la même lumière */
.hero2{background:var(--creme); color:var(--espresso);}
.hero2 h1{color:var(--espresso);}
.hero2 .lead{color:var(--espresso);}
.hero2 .kick{background:var(--bois); color:var(--creme);}

/* le prix : un petit aplat olive, plus une grande bande */
.prix-box{background:var(--olive); border:0; color:var(--creme);}
.prix-box .prix, .prix-box .lead, .prix-box p{color:var(--creme);}
.bg-sable .lst li{color:var(--espresso);}
.hero2 h1 .em{color:var(--olive);}

/* V2.3 — la couleur change par chapitre, pas un bloc sur deux.
   Deux blocs du même fond qui se suivent : un filet fin marque la coupure. */
.bg-sable + .bg-sable{position:relative;}
.bg-sable + .bg-sable::before{content:""; position:absolute; top:0; left:var(--gut); right:var(--gut);
  max-width:var(--wide); margin:0 auto; height:1px; background:var(--bois);}
/* le premier bloc crème sous le héros crème : un filet aussi */
.hero2 + .bg-creme{position:relative;}
.hero2 + .bg-creme::before{content:""; position:absolute; top:0; left:var(--gut); right:var(--gut);
  max-width:var(--wide); margin:0 auto; height:1px; background:var(--bois);}
.bg-espresso .phrase{color:var(--creme);}

/* V2.4 — six formats partagés par les deux pages, jamais deux pareils de suite
   A photo + texte (inversable) · B titre à gauche, détail à droite
   C centré · D titre pleine largeur + 2 colonnes
   E bande : phrase à gauche, action à droite · F citation large + résultat */
.stack2 h2{max-width:24em;}
.stack2 .cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) clamp(2.5rem,6vw,5rem); margin-top:var(--gap-l); align-items:start;}
.stack2 .cols > p{margin-top:0;}
.stack2 .stack-close{max-width:34em;}
.story--rev{grid-template-columns:1.18fr .82fr;}
.story--rev > .ph-frame{order:2;}
.band2{display:grid; grid-template-columns:7fr 5fr; gap:var(--gap-l) clamp(2.5rem,7vw,7rem); align-items:end;}
.band2 .phrase{text-align:left; margin:0; max-width:none; font-size:clamp(2rem,4.6vw,3.6rem);}
.quote2{display:grid; grid-template-columns:7fr 5fr; gap:var(--gap-l) clamp(2.5rem,7vw,7rem); align-items:end;}
.quote2 .resultat{margin-top:0;}
.cite-xl{font-size:clamp(1.7rem,3.4vw,2.7rem); max-width:26em;}
.head-left{max-width:var(--read);}
.split2--prix{grid-template-columns:5fr 7fr;}
.split2--prix > :first-child{position:static;}
@media (max-width:56rem){
  .stack2 .cols, .band2, .quote2, .split2--prix{grid-template-columns:1fr;}
  .story--rev{grid-template-columns:1fr;}
  .story--rev > .ph-frame{order:0;}
}
@media (max-width:56rem){.split2--prix > .prix-box{order:2;}}


/* ============================================================
   V3 — 2026-09-22
   - Plus aucune ligne entre les sections : l'espace et le changement
     de fond font la coupure.
   - L'échelle typo du bloc de fermeture (Fraunces light, très grand,
     italique d'accent) devient la référence des moments forts.
   - Page Diagnostic : entête en texte seulement, sur fond taupe.
   ============================================================ */
.bg-creme + .bg-creme::before,
.bg-sable + .bg-sable::before,
.hero2 + .bg-creme::before{display:none;}

/* la phrase display, un cran plus grande, partout où elle sert */
.phrase{font-size:clamp(2.2rem,5.4vw,4rem); line-height:1.06;}
.hero-txt .phrase{font-size:clamp(2.5rem,6.4vw,4.8rem); max-width:16em;}
.hero-txt .read{max-width:62rem;}
.hero-txt .lead{max-width:40rem; margin-left:auto; margin-right:auto;}

/* titres de section et du héros : plus près de cette échelle */
.t2{font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.1;}
.hero2 h1{font-size:clamp(2.3rem,4.8vw,4rem);}
.band2 .phrase{font-size:clamp(2.2rem,5vw,3.9rem);}

@media (max-width:56rem){
  .hero-txt .lead{margin-left:0;}
  .hero2 .photo{aspect-ratio:4/3.6;}
}


/* ============================================================
   V4 — COPY FINALE (2026-09-22) : formats ajoutés
   ============================================================ */
/* D : intro sous le titre + 3 colonnes */
.stack-intro{max-width:40rem;}
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-l) clamp(2rem,4vw,3.5rem); margin-top:var(--gap-l);}
.cols3 .n3{font-family:var(--hand); font-size:1.6rem; color:var(--olive); line-height:1; display:block;}
.cols3 .t3{margin-top:.8rem;}
.cols3 p{margin-top:.7rem;}
.stack2 .cols .enum{margin-top:0;}
.stack2 .cols .big{margin-top:0;}
/* scènes courtes, une par ligne */
.scenes p{margin-top:.9rem;}
.scenes p:first-child{margin-top:var(--gap);}

/* 3 cartes d'offres, le Diagnostic en vedette */
.offres{display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:clamp(1rem,2vw,1.6rem); margin-top:var(--gap-l); align-items:stretch;}
.offre{background:var(--creme); padding:clamp(1.8rem,3vw,2.4rem); display:flex; flex-direction:column;}
.offre h3{font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,2.4vw,2rem); line-height:1.1; margin:.6rem 0 0;}
.offre p{margin-top:.8rem;}
.offre ul{list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem;}
.offre li{position:relative; padding-left:1.3rem; font-size:.95rem; line-height:1.5;}
.offre li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--bois);}
.offre--vedette{background:var(--olive); color:var(--creme);}
.offre--vedette .oeyebrow, .offre--vedette h3{color:var(--creme);}
.offre-cta{margin-top:auto; padding-top:1.6rem;}

/* encadré de témoignage : un aplat crème posé sur le taupe */
.encadre{background:var(--creme); margin:0 auto; max-width:var(--wide);
  padding:clamp(2.2rem,6vw,5rem) clamp(1.6rem,6vw,5.5rem);}
.encadre blockquote{margin:0;}
.encadre .attrib{margin-top:var(--gap);}

/* livrables : le nom sur sa ligne, la description dessous */
.deliv--nom li{grid-template-columns:3rem 1fr; padding:1.4rem 0;}
.deliv--nom .dn{font-family:var(--sans); font-weight:600; font-size:1.02rem; line-height:1.4; margin:0; color:var(--espresso);}
.deliv--nom p{grid-column:auto; margin:.3rem 0 0; font-size:.96rem;}
.deliv--nom li:first-child{border-top:0;}
.deliv--nom li:last-child{border-bottom:0;}

/* listes à cocher */
.check{list-style:none; margin:var(--gap) 0 0; padding:0; display:flex; flex-direction:column; gap:.8rem;}
.check li{position:relative; padding-left:1.9rem; line-height:1.55;}
.check .ic{position:absolute; left:0; top:.28em; width:15px; color:var(--rose);}
.check--clair .ic{color:var(--olive);}
.check .ic svg{width:100%; height:auto; display:block;}

/* fiche prix : format fiche produit */
.fiche{text-align:left;}
.fiche .prix{margin-top:.6rem;}
.fiche .check{margin-top:1.6rem; gap:.65rem;}
.fiche .check li{font-size:.97rem;}
.fiche .places{margin-top:1.6rem; font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--creme);}
.fiche .cta{margin-top:1.2rem;}
.split2--prix{align-items:center;}

/* FAQ en accordéon, colonne centrée */
.faq{max-width:48rem; margin:0 auto;}
.faq .t2{margin-bottom:var(--gap-l);}
.faq details{border-top:1px solid var(--sable);}
.faq details:last-child{border-bottom:1px solid var(--sable);}
.faq summary{cursor:pointer; list-style:none; padding:1.3rem 2.4rem 1.3rem 0; position:relative;
  font-family:var(--serif); font-weight:400; font-size:clamp(1.08rem,1.6vw,1.25rem); line-height:1.35;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:.2rem; top:1.1rem; font-family:var(--sans);
  font-size:1.4rem; color:var(--olive); transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0 0 1.4rem; max-width:40rem;}

/* bouton collant, mobile seulement */
.sticky-cta{display:none;}
@media (max-width:56rem){
  .cols3, .offres{grid-template-columns:1fr;}
  .has-sticky{padding-bottom:5.2rem;}
  .sticky-cta{display:block; position:fixed; left:var(--gut); right:var(--gut); bottom:.9rem; z-index:50;
    text-align:center; box-shadow:0 10px 24px -10px rgba(20,14,10,.45);}
  .deliv--nom li{grid-template-columns:2.2rem 1fr;}
}
@media (max-width:56rem){
  .sticky-cta{opacity:0; transform:translateY(140%); pointer-events:none; transition:opacity .25s, transform .25s;}
  .sticky-cta.show{opacity:1; transform:none; pointer-events:auto;}
}


/* ============================================================
   V4.1 — PASSE GRAPHIQUE (2026-09-22)
   Principe : rien ne flotte. Chaque groupe d'information a un appui
   (une tuile taupe, un aplat olive, ou une rangée alignée).
   Les filets deviennent pâles ; les bordures de grille disparaissent.
   ============================================================ */
:root{--filet:#CFC4B4;}   /* crème + brun bois, très pâle : filets internes */

/* entête en rangée : titre à gauche, intro alignée au bas à droite */
.head-row{display:grid; grid-template-columns:7fr 5fr; gap:var(--gap) clamp(2.5rem,7vw,7rem); align-items:end;}
.head-row .lead{margin:0;}

/* tuiles : le taupe comme appui */
.tiles3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,1.4vw,1.1rem); margin-top:var(--gap-l);}
.tile{background:var(--sable); padding:clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column; min-height:17rem;}
.tile .tn{font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,3.6vw,3.2rem); line-height:1; color:var(--olive);}
.tile .t3{margin-top:auto; padding-top:2rem;}
.tile p{margin-top:.7rem; font-size:.98rem;}
.tile-band{grid-column:1/-1; margin:0; background:var(--olive); color:var(--creme);
  padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1.8rem,3vw,2.6rem);
  font-family:var(--serif); font-weight:300; font-size:clamp(1.35rem,2.4vw,1.95rem); line-height:1.3; letter-spacing:-.01em;}
.tile-band .em{color:var(--creme); font-style:italic;}

/* tuile de note : la phrase qui conclut, posée sur du taupe */
.tile-note{background:var(--sable); padding:clamp(1.6rem,3vw,2.4rem); margin-top:var(--gap-l);}
.tile-note .lead{margin-top:1rem;}
.stack2 .cols .tile-note--big{margin-top:0; align-self:stretch; display:flex; align-items:center;
  font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.35;}

/* avant / après : des rangées posées, plus une grille à bordures */
.cmp{border:0; background:transparent; max-width:var(--wide);}
.cmp-row{background:var(--creme);}
.cmp-row + .cmp-row{border-top:0; margin-top:6px;}
.cmp-row>div{padding:1.25rem 1.6rem;}
.cmp-row>div:first-child{border-right:1px solid var(--filet); color:var(--bois);}
.cmp-row>div:last-child{color:var(--espresso); font-weight:500;}
.cmp-head{background:transparent;}
.cmp-head>div, .cmp-head>div:first-child{background:transparent; border:0; padding-bottom:.6rem; color:var(--bois);}
.cmp-head>div:last-child{color:var(--olive);}
.bg-sable .cmp{background:transparent;}
.bg-sable .cmp-row:not(.cmp-head){background:var(--creme);}

/* étapes : 4 tuiles taupe, en écho aux 3 tuiles de l'accueil */
.steps{border:0; background:transparent; gap:clamp(.7rem,1.4vw,1.1rem);}
.step{background:var(--sable); padding:clamp(1.6rem,2.6vw,2.2rem); min-height:15rem;}
.step-n{font-size:clamp(2.4rem,3.6vw,3.2rem); font-weight:300; color:var(--olive); font-family:var(--serif);}
.step .t3{margin-top:auto; padding-top:1.6rem;}

/* filets internes : pâles */
.deliv li, .deliv--nom li{border-color:var(--filet);}
.faq details{border-color:var(--filet);}
.resultat{border-color:var(--filet);}

@media (max-width:56rem){
  .head-row, .tiles3{grid-template-columns:1fr;}
  .tile, .step{min-height:0;}
  .tile .t3, .step .t3{margin-top:1.2rem; padding-top:0;}
  .cmp-row>div:first-child{border-right:0; border-bottom:1px solid var(--filet);}
  .cmp-row + .cmp-row{border-top:0;}
}
/* titres des tuiles alignés en haut, juste sous le numéro */
.tile .t3, .step .t3{margin-top:1.8rem; padding-top:0;}
/* FAQ : chaque question dans une carte crème, posée sur le taupe */
.faq{max-width:52rem;}
.faq details, .faq details:last-child{background:var(--creme); border:0; margin-top:6px; padding:0 clamp(1.2rem,2.6vw,2rem);}
.faq summary{padding:1.35rem 2.2rem 1.35rem 0;}
.faq summary::after{top:1.15rem;}
.faq details p{margin:0; padding-bottom:1.5rem;}


/* ============================================================
   V4.2 — QA AVANT MISE EN LIGNE (2026-09-22)
   Un seul système, écrit en jetons :
   - typo : 4 tailles de texte seulement (petite étiquette 12 px,
     texte 17 px, texte d'intro 18 px, phrase de conclusion 21 px)
   - cases : un seul espacement intérieur, un seul écart entre cases
   - rangées (tableau, FAQ) : 6 px entre elles
   ============================================================ */
:root{
  --pad-box:clamp(1.6rem,3vw,2.5rem);     /* intérieur de toutes les cases */
  --gap-box:clamp(.75rem,1.4vw,1.1rem);   /* entre deux cases */
  --gap-row:6px;                          /* entre deux rangées */
  --fs-label:.75rem;                      /* étiquettes, surtitres */
  --fs-body:1.0625rem;                    /* texte courant, 17 px */
  --fs-lead:1.125rem;                     /* texte d'intro, 18 px */
}

/* --- typo : moins de tailles, plus lisible --- */
body{font-size:var(--fs-body);}
.lead{font-size:var(--fs-lead); line-height:1.65;}
.tile p, .step p, .offre p, .offre li, .deliv--nom p, .fiche .check li, .faq details p,
.cmp-row>div, .check li, .enum li{font-size:var(--fs-body); line-height:1.6;}
.kick, .oeyebrow, .attrib, .attrib-line, .fiche .places, .cmp-head>div{font-size:var(--fs-label); letter-spacing:.14em;}
.mini-note{font-size:.94rem;}
.nl-consent{font-size:.8rem;}
.topbar{font-size:.75rem;}
/* une ligne de lecture confortable : jamais plus de ~70 caractères */
.story p, .split2 .body p, .stack2 .cols p, .head-row .lead, .faq details p{max-width:36em;}

/* --- cases : même intérieur, même écart, même hauteur minimum --- */
.tile, .step, .offre, .tile-note, .prix-box{padding:var(--pad-box);}
.encadre{padding:calc(var(--pad-box) * 2) calc(var(--pad-box) * 2);}
.faq details, .faq details:last-child{padding:0 var(--pad-box); margin-top:var(--gap-row);}
.cmp-row + .cmp-row{margin-top:var(--gap-row);}
.cmp-row>div{padding:1.25rem var(--pad-box);}
.tiles3, .steps, .offres{gap:var(--gap-box);}
.offres{grid-template-columns:repeat(3,1fr);}
.tile, .step{min-height:16rem;}
.tiles3 .tile-band{padding:var(--pad-box);}

/* --- contraste : plus de texte rose sur olive ni sur crème --- */
.nav-links a[aria-current="page"]{color:var(--creme); text-decoration:underline; text-decoration-color:var(--rose);
  text-decoration-thickness:2px; text-underline-offset:6px;}
.legal a{color:var(--olive); text-decoration:underline;}

/* --- clavier : focus visible partout --- */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--olive); outline-offset:3px;}
.on-dark a:focus-visible, .on-dark button:focus-visible, .on-dark input:focus-visible, .foot a:focus-visible,
.nav a:focus-visible{outline-color:var(--creme);}
.skip{position:absolute; left:-999px; top:0; z-index:100; background:var(--espresso); color:var(--creme);
  padding:.8rem 1.2rem; font-size:.9rem; text-decoration:none;}
.skip:focus{left:1rem; top:1rem;}
main{display:block;}

/* --- mobile : zones de clic d'au moins 44 px --- */
@media (max-width:56rem){
  .foot-links{gap:0 .4rem;}
  .foot-links a{display:inline-block; padding:.75rem .6rem;}
  .topbar a{display:inline-block; padding:.5rem 0;}
  .nl-consent a{display:inline-block; padding:.6rem 0;}
  .tile, .step{min-height:0;}
  .encadre{padding:calc(var(--pad-box) * 1.4) var(--pad-box);}
}

/* --- tablette (≤ 1024 px) : les grilles serrées se réorganisent --- */
@media (max-width:64rem){
  .offres{grid-template-columns:1fr 1fr;}
  .offre--vedette{grid-column:1 / -1;}
  .steps{grid-template-columns:1fr 1fr;}
  .split2--prix{grid-template-columns:1fr;}
  .split2--prix .prix-box{max-width:34rem;}
}
/* --- mobile : une colonne, photos moins hautes --- */
@media (max-width:56rem){
  .offres, .steps{grid-template-columns:1fr;}
  .ph-frame img{aspect-ratio:4/4.4;}
}
/* les dimensions HTML servent à réserver l'espace ; la hauteur reste calculée */
img{height:auto;}
.hero2 .photo img{height:100%;}
@media (max-width:56rem){
  .fiche .btn{display:block; text-align:center; padding-left:1rem; padding-right:1rem;}
  #infolettre .nl-inner{text-align:left;}
}

/* ============================================================
   MENU MOBILE (2026-09-22)
   ============================================================ */
.menu-btn, .menu-cta{display:none;}
@media (max-width:62rem){
  .nav{position:relative;}
  .nav-in{gap:.8rem;}
  .menu-btn{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px;
    width:44px; height:44px; margin-right:-10px; padding:0; background:transparent; border:0; cursor:pointer;}
  .menu-btn span{display:block; width:22px; height:1.5px; background:var(--creme); transition:transform .2s;}
  .nav.open .menu-btn span:first-child{transform:translateY(4.25px) rotate(45deg);}
  .nav.open .menu-btn span:last-child{transform:translateY(-4.25px) rotate(-45deg);}
  .nav.open .nav-links{display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%;
    z-index:60; background:var(--olive); padding:.4rem var(--gut) 1.6rem;}
  .nav.open .nav-links a:not(.btn){padding:.95rem 0; font-size:1.05rem; border-top:1px solid #6B5E45;}
  .nav.open .nav-links a:not(.btn):first-child{border-top:0;}
  .nav.open .menu-cta{display:block; text-align:center; margin-top:1rem; background:var(--rose);
    color:var(--espresso); border-color:var(--rose); font-size:.95rem; padding:1rem;}
  .nav-links a[aria-current="page"]{text-underline-offset:5px;}
}
/* petit écran : le bouton du bandeau passe dans le menu */
@media (max-width:30rem){
  .nav-in > .btn{display:none;}
}
@media (max-width:26rem){.btn{padding-left:1.3rem; padding-right:1.3rem; font-size:.9rem;}}


/* ============================================================
   V4.3 — ALIGNEMENT (2026-09-22)
   Dans une rangée de cases, chaque étage (numéro, titre, texte,
   puces, bouton) démarre à la même hauteur d'une case à l'autre,
   même si un titre fait deux lignes : grille partagée (subgrid).
   ============================================================ */
/* chiffres alignés sur la ligne, même avec la police de secours */
body{font-variant-numeric:lining-nums;}

/* 3 tuiles de l'accueil : numéro / titre / texte */
.tiles3{row-gap:0;}
.tiles3 .tile{display:grid; grid-row:span 3; grid-template-rows:subgrid; align-content:start; min-height:0; row-gap:0;}
.tiles3 .tile .t3{margin-top:1.8rem;}
.tiles3 .tile p{margin-top:.7rem;}
.tiles3 .tile-band{margin-top:var(--gap-box);}

/* 4 étapes : numéro / titre / texte */
.steps{row-gap:0;}
.steps .step{display:grid; grid-row:span 3; grid-template-rows:subgrid; align-content:start; min-height:0; row-gap:0;}
.steps .step .t3{margin-top:1.8rem;}
.steps .step p{margin-top:.7rem;}

/* 3 offres : étiquette / titre / phrase / puces / bouton */
.offres{row-gap:0; align-items:stretch;}
.offre{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0; align-content:start;}
.offre h3{margin-top:.6rem;}
.offre p{margin-top:.8rem;}
.offre ul{margin-top:1.1rem;}
.offre-cta{margin-top:0; padding-top:1.6rem; align-self:end;}
.offre--vedette li::before{background:var(--creme);}

/* tableau avant / après : le texte centré en hauteur dans chaque rangée */
.cmp-row:not(.cmp-head)>div{display:flex; align-items:center;}

/* rangées titre + texte : départ commun en haut */
.head-row{align-items:start;}
.band2{align-items:center;}

/* scènes « À quoi ça ressemble » en liste, même style que les autres listes */
.enum.scenes{margin-top:var(--gap); gap:1rem;}
.story .big{margin-top:var(--gap-l);}

/* témoignage : centré dans son encadré */
.encadre{text-align:center;}
.encadre .kick{margin-left:auto; margin-right:auto;}
.encadre blockquote{margin:0 auto; max-width:26em;}

/* intro de l'entête Diagnostic : coupure de ligne équilibrée */
.hero-txt .lead{max-width:36rem; text-wrap:balance;}

/* boutons : le libellé ne se coupe jamais */
.btn{white-space:nowrap;}

/* FAQ : la réponse prend la même largeur que la question */
.faq details p{max-width:none; padding-right:2.2rem;}

/* tablette : 2e rangée de cases séparée de la 1re */
@media (max-width:64rem){
  .offre:not(.offre--vedette), .steps .step:nth-child(n+3){margin-top:var(--gap-box);}
}
/* mobile : une colonne, cases empilées normalement */
@media (max-width:56rem){
  .tiles3 .tile, .steps .step, .offre{display:flex; flex-direction:column; grid-row:auto; margin-top:0;}
  .tiles3, .steps, .offres{row-gap:var(--gap-box);}
  .tiles3 .tile-band{margin-top:0;}
  .encadre{text-align:left;}
  .encadre .kick{margin-left:0;}
  .btn{white-space:normal;}
}
@media (max-width:56rem){.offres .offre:not(.offre--vedette), .steps .step:nth-child(n+3){margin-top:0;}}


/* ============================================================
   V4.4 — UNE SEULE GRILLE POUR TOUS LES BLOCS À DEUX COLONNES
   Deux lignes de départ seulement : à 5/12 ou à 7/12 de la largeur,
   avec le même écart partout. Les colonnes de droite de tous les
   blocs tombent donc sur les mêmes verticales, d'un bloc à l'autre.
   ============================================================ */
:root{--col-gap:clamp(2rem,6vw,6rem);}
/* colonne étroite à gauche (5) + large à droite (7) */
.split2, .story, .split2--prix, .quote2{grid-template-columns:5fr 7fr; column-gap:var(--col-gap);}
/* colonne large à gauche (7) + étroite à droite (5) */
.story--rev, .head-row, .band2{grid-template-columns:7fr 5fr; column-gap:var(--col-gap);}
.stack2 .cols{column-gap:var(--col-gap);}

/* la liste des livrables part toujours du bord, jamais centrée */
.deliv, .deliv--nom{margin-left:0; margin-right:0; max-width:none; width:100%;}

/* espacements verticaux uniformes */
h1 + p, h2 + p, .phrase + p, .t2 + .lead, .phrase + .lead{margin-top:var(--gap);}
.read.c + .cmp, .read.c + .offres, .head-left + .steps, .head-row + .tiles3{margin-top:var(--gap-l);}

@media (max-width:64rem){
  .split2--prix{grid-template-columns:1fr;}
}
@media (max-width:56rem){
  .split2, .story, .story--rev, .split2--prix, .quote2, .head-row, .band2, .stack2 .cols{grid-template-columns:1fr;}
}
/* proportions exactes (minmax 0) et priorité sur les anciennes règles de page */
.wrap.split2, .wrap.story, .wrap.split2--prix, .quote2{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--col-gap);}
.wrap.story--rev, .head-row, .wrap.band2, .stack2 .cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--col-gap);}
@media (max-width:64rem){ .wrap.split2--prix{grid-template-columns:1fr;} }
@media (max-width:56rem){
  .wrap.split2, .wrap.story, .wrap.story--rev, .wrap.split2--prix, .quote2, .head-row, .wrap.band2, .stack2 .cols{grid-template-columns:1fr;}
}
@media (max-width:56rem){.ph-frame{max-width:26rem;}}
/* entête Diagnostic : la 2e phrase, en italique, sur sa propre ligne */
.em.ligne{display:block;}


/* ============================================================
   V4.5 — ESPACEMENTS RESSERRÉS SUR ORDI (2026-09-22)
   Les blocs ne sont plus forcés à la hauteur de l'écran : ils prennent
   la hauteur de leur contenu. Espacement des sections réduit.
   Photo du héros plus grande (7/12 de la largeur).
   ============================================================ */
:root{--wide:82rem;}
.sec, .bg-creme + .bg-creme{padding-top:clamp(3.5rem,6vw,6rem); padding-bottom:clamp(3.5rem,6vw,6rem);}
@media (min-width:56rem){
  .tall{min-height:0; display:block;}
  .hero2 .inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr); min-height:clamp(520px,72vh,760px);}
  .hero2 .txt{padding-left:clamp(2.5rem,5vw,5rem); padding-right:clamp(2rem,4vw,4rem);}
  .hero2 h1{font-size:clamp(2.3rem,3.9vw,3.6rem);}
  .hero-txt{padding-top:clamp(4.5rem,8vw,7.5rem); padding-bottom:clamp(4.5rem,8vw,7.5rem);}
}
/* héros de l'accueil : photo en rectangle vertical (plus haute que large) */
@media (min-width:56rem){
  .hero2 .inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr); min-height:clamp(600px,84vh,880px);}
}


/* ============================================================
   V4.6 — ENTÊTE DE L'ACCUEIL CADRÉE (2026-09-22)
   La photo entre dans la grille du site, dans le même cadre crème
   que « Mon histoire ». Bord gauche = bord des sections ; le texte
   démarre sur la même verticale que les colonnes de droite (5/12).
   ============================================================ */
@media (min-width:56rem){
  .hero2--cadre{background:var(--creme); padding:clamp(3rem,5vw,5rem) var(--gut) clamp(3.5rem,6vw,6rem);}
  .hero2--cadre .inner{max-width:var(--wide); margin:0 auto; min-height:0; align-items:center;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--col-gap);}
  .hero2--cadre .photo{position:relative; min-height:0; background:var(--creme); padding:14px;
    box-shadow:0 30px 60px -24px rgba(20,14,10,.45);}
  .hero2--cadre .photo img{position:static; display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;}
  .hero2--cadre .txt{padding:0;}
  .hero2--cadre h1{max-width:13em;}
}

/* texte courant un peu plus grand sur les grands écrans */
@media (min-width:75rem){
  :root{--fs-body:1.125rem; --fs-lead:1.1875rem;}
}

/* V4.7 — titres de section plus grands (validé par test visuel, 2026-09-22) */
.t2{font-size:clamp(2.1rem,4.3vw,3.8rem); line-height:1.06;}

/* ============================================================
   V5 (2026-09-25) : corrections mineures
   ============================================================ */
/* nom sous la citation : lisible sur l'encadré crème */
.encadre .attrib{color:var(--bois);}
/* avant/après sur téléphone : l'étiquette passe au-dessus du texte */
@media (max-width:40rem){
  .cmp-row:not(.cmp-head)>div{display:block;}
}

/* ---------- bannière de témoins (Loi 25) : accepter et refuser, même taille ---------- */
.temoins{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:1000; max-width:32rem; margin:0 auto;
  background:var(--creme); color:var(--espresso); border:1px solid var(--bois); border-radius:14px;
  padding:1.2rem 1.3rem; box-shadow:0 12px 32px rgba(20,14,10,.28);
  font-family:var(--sans); font-size:.9rem; line-height:1.55;}
.temoins p{margin:0 0 1rem;}
.temoins a{color:var(--espresso); text-decoration:underline;}
.temoins-btns{display:flex; gap:.7rem;}
.temoins-btns .btn{flex:1; padding:.8rem 1rem; text-align:center; white-space:normal; cursor:pointer; font-size:.9rem;}
.temoins-btns .btn.ghost{background:transparent; color:var(--espresso); border:1px solid var(--espresso);}