/* =========================================================================
   v3 — maquette calquée sur marketinglab.framer.ai (template GrowthLab)
   Palette, typographie, géométrie et animations relevées sur le site source
   le 27/10/2026 : styles calculés dans Chromium + pixels échantillonnés.
   ========================================================================= */

@font-face{font-family:'Urbanist';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/urbanist-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/urbanist-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* couleurs relevées dans les variables du site source */
  --creme:#f3efe8;  --blanc-casse:#fbfaf9; --blanc:#fff;      --gris-tres-clair:#fafafa;
  --encre:#0a0a0a;  --encre-2:#171717;     --encre-3:#262626; --encre-4:#404040;
  --gris:#737373;   --gris-2:#a1a1a1;      --gris-3:#525252;  --ligne:#d4d4d4;
  --accent:#ff4c39; --accent-fonce:#d4300e;
  --beige:#eae0cf;  --sable:#e0c79c;       --or:#ecab3d;
  /* dégradés échantillonnés au pixel */
  --rouge-panneau:linear-gradient(100deg,#940006 0%,#b40007 38%,#c80008 72%,#bf0109 100%);
  --lettre-sombre:#6c0601; --lettre-vive:#ff5d00;
  --large:1200px; --marge:120px; --r:20px; --r-s:14px;
  --sortie:cubic-bezier(.44,0,.56,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--encre);
  font-family:'Urbanist',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.7;font-weight:500;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2{font-weight:700;letter-spacing:-.02em}
h3{font-weight:600}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.hors-ecran{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.evitement{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;
  padding:14px 22px;border-radius:0 0 var(--r-s) 0;z-index:200}
.evitement:focus{left:0}
.contenant{max-width:var(--large);margin-inline:auto;padding-inline:24px}

/* ---------- apparition : opacity 0 + translateY(60px), relevée au source ---------- */
.apparait{opacity:1}
/* L'état pré-animation est posé par le JS, sur les seuls blocs encore sous
   l'écran : aucun script en ligne (la CSP du site l'interdit) et aucun
   clignotement sur ce qui est déjà visible. Sans JS, rien n'est masqué. */
.apparait.pre{opacity:0;transform:translateY(60px);
  transition:opacity .75s var(--sortie),transform .75s var(--sortie)}
.apparait.pre.vu{opacity:1;transform:none}

/* ---------- barre de navigation ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--creme);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.nav.collee{border-bottom-color:rgba(10,10,10,.08);background:rgba(243,239,232,.92);
  backdrop-filter:blur(12px)}
.nav__in{max-width:1392px;margin-inline:auto;padding:14px 24px;
  display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:21px;letter-spacing:-.025em;
  white-space:nowrap;flex:none}
.logo svg{flex:none}
.nav__menu{display:flex;gap:8px;margin-inline:auto;list-style:none;padding:0;margin-block:0}
.nav__menu a{font-size:16px;font-weight:500;line-height:1.7;padding:6px 12px;border-radius:999px;
  transition:color .2s ease-out,background .2s ease-out}
.nav__menu a:hover{background:rgba(10,10,10,.06)}
.nav__tel{font-size:16px;font-weight:600;white-space:nowrap;
  transition:color .2s ease-out}
.nav__tel:hover{color:var(--accent-fonce)}
.bouton{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:0;cursor:pointer;
  font-size:16px;font-weight:600;line-height:1.5;padding:13px 22px;white-space:nowrap;
  transition:background .2s ease-out,color .2s ease-out,transform .2s ease-out}
.bouton:hover{transform:translateY(-1px)}
.bouton--accent{background:var(--accent);color:#fff}
.bouton--accent:hover{background:var(--accent-fonce)}
.bouton--sombre{background:var(--encre);color:#fff}
.bouton--sombre:hover{background:var(--encre-3)}
.bouton--clair{background:#fff;color:var(--encre)}
.bouton--fantome{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.bouton--fantome:hover{background:rgba(255,255,255,.12)}
.bouton--contour{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1px var(--ligne)}
.bouton--contour:hover{background:#fff}
.fleche{width:13px;height:13px;flex:none}
.nav__burger{display:none;background:none;border:0;padding:8px;cursor:pointer}

/* ---------- hero ---------- */
.hero{padding-top:34px}
.hero__labels{max-width:1392px;margin-inline:auto;padding-inline:36px;
  display:flex;justify-content:space-between;font-size:22px;font-weight:700;letter-spacing:-.01em}
.geant{margin:2px 0 0;padding-inline:34px;max-width:1440px;margin-inline:auto;
  font-size:13.7vw;line-height:.88;font-weight:800;letter-spacing:-.05em;
  white-space:nowrap;text-align:center}
.geant span{background-image:linear-gradient(var(--a,170deg),var(--lettre-sombre) 8%,var(--lettre-vive) 52%,#7e0a01 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.geant .espace{width:.18em;display:inline-block}

.panneau{position:relative;margin-top:30px;min-height:430px;overflow:hidden;
  background:var(--rouge-panneau);display:grid;
  grid-template-rows:auto 1fr auto;padding:34px 36px 30px;color:#fff;isolation:isolate}
/* Panneau sans photo : l'aplat rouge seul, avec une lueur douce pour qu'il ne
   soit pas plat. Les couleurs restent celles échantillonnées sur le site source. */
.panneau::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(74% 92% at 50% 8%,rgba(255,96,70,.28),transparent 62%)}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.chiffres>div:nth-child(2){text-align:center}
.chiffres>div:nth-child(3){text-align:right}
.chiffre{font-size:24px;font-weight:700;line-height:1.33;letter-spacing:-.01em}
.chiffre+p{font-size:16px;font-weight:500;line-height:1.75;color:rgba(255,255,255,.88)}
.panneau__bas{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.panneau__accroche{max-width:340px;font-size:16px;font-weight:500;line-height:1.7;margin-bottom:16px}
.panneau__actions{display:flex;gap:12px;flex-wrap:wrap}
.puces{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:420px}
.puce{font-size:13px;font-weight:600;line-height:1.5;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  backdrop-filter:blur(4px)}

/* ---------- bandeau défilant ---------- */
.bandeau{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  overflow:hidden;padding:18px 0}
.bandeau__piste{display:flex;width:max-content;animation:defile 38s linear infinite}
.bandeau__groupe{display:flex;align-items:center;flex:none}
.bandeau__groupe span{font-size:15px;font-weight:600;letter-spacing:.02em;padding-inline:26px;
  display:flex;align-items:center;gap:26px;white-space:nowrap}
.bandeau__groupe span::before{content:"/";color:var(--accent);font-weight:700}
@keyframes defile{to{transform:translateX(-50%)}}
.bandeau:hover .bandeau__piste{animation-play-state:paused}

/* ---------- manifeste, révélation lettre par lettre ---------- */
.manifeste{padding:96px 0 110px}
.manifeste__grille{display:grid;grid-template-columns:260px 1fr;gap:40px}
.manifeste__col{display:flex;flex-direction:column;gap:22px;font-size:15px;font-weight:600;
  letter-spacing:.02em;color:var(--gris-3);padding-top:6px}
.manifeste__texte{font-size:clamp(24px,2.5vw,34px);line-height:1.38;font-weight:600;
  letter-spacing:-.015em;max-width:800px}
.manifeste__texte i{font-style:normal;color:var(--gris-2);
  transition:color .6s var(--sortie)}
.manifeste__texte i.lu{color:var(--encre)}

/* ---------- entêtes de section ---------- */
.entete{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:46px}
.entete h2{font-size:clamp(40px,4.4vw,64px);line-height:1.1}
.entete p{text-align:right;font-size:16px;line-height:1.75;color:var(--gris);max-width:380px;
  justify-self:end}
.entete--centre{display:block;text-align:center;margin-bottom:52px}
.entete--centre h2{font-size:clamp(34px,4.4vw,56px)}
.entete--centre p{text-align:center;margin:14px auto 0;max-width:460px;justify-self:auto}

/* ---------- clients ---------- */
.clients{padding:10px 0 86px}
.clients__piste{display:flex;gap:18px;width:max-content;animation:defile 46s linear infinite;
  padding-inline:24px}
.clients__rail{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.carte-client{flex:none;background:#fff;border-radius:var(--r-s);padding:24px 30px;
  display:flex;align-items:center;gap:14px;font-size:20px;font-weight:700;letter-spacing:-.015em;
  min-width:260px}
.carte-client svg{flex:none}
.carte-client small{display:block;font-size:13px;font-weight:500;color:var(--gris);letter-spacing:0}

/* ---------- process : cartes collantes empilées ---------- */
.process{background:var(--encre);color:#fff;border-radius:0}
.process__in{padding:96px 0 0}
.process .entete h2{color:#fff}
.process .entete p{color:var(--gris-2)}
.pile{position:relative}
.etape{position:sticky;top:160px;height:470px;border-radius:var(--r);overflow:hidden;
  width:min(300px,78vw);margin-bottom:30px;color:#fff;isolation:isolate;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.etape:nth-child(1){margin-left:0}
.etape:nth-child(2){margin-left:min(300px,21vw)}
.etape:nth-child(3){margin-left:min(600px,42vw)}
.etape:nth-child(4){margin-left:min(900px,63vw)}
.etape__fond{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.etape::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(165deg,rgba(255,76,57,.92),rgba(212,48,14,.78) 45%,rgba(120,18,2,.9))}
.etape__num{font-size:68px;font-weight:700;line-height:1.2;letter-spacing:-.03em;padding:34px 30px 0}
.etape__corps{position:absolute;left:0;right:0;bottom:0;padding:0 30px 30px}
.etape__corps h3{font-size:21px;margin-bottom:8px;letter-spacing:-.01em}
.etape__corps p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.92)}
.process__fin{height:140px}

/* ---------- pourquoi moi ---------- */
.valeurs{padding:100px 0}
.valeurs__grille{display:grid;grid-template-columns:1fr 1fr;gap:56px 60px;align-items:start}
.valeurs__photo{border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/3;background:var(--beige)}
.valeurs__photo img{width:100%;height:100%;object-fit:cover}
.valeur h3{font-size:19px;margin-bottom:10px}
.valeur p{font-size:15px;line-height:1.72;color:var(--gris-3)}
.valeur__icone{width:30px;height:30px;margin-bottom:22px;color:var(--encre)}

/* ---------- prestations : lignes dépliables ---------- */
.prestations{border-top:1px solid rgba(10,10,10,.12)}
.ligne{border-bottom:1px solid rgba(10,10,10,.12);position:relative}
.ligne__tete{display:grid;grid-template-columns:70px 1fr auto;gap:30px;align-items:center;
  width:100%;background:none;border:0;text-align:left;padding:30px 24px;cursor:pointer;
  max-width:1392px;margin-inline:auto;transition:color .2s ease-out}
.ligne__num{font-size:15px;font-weight:600;color:var(--gris)}
.ligne__eyebrow{font-size:14px;font-weight:500;color:var(--gris);display:block;margin-bottom:2px}
.ligne__titre{font-size:clamp(26px,2.6vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.ligne__corps{max-width:1392px;margin-inline:auto;padding:0 24px;
  display:grid;grid-template-columns:260px 1fr;gap:36px;
  overflow:hidden;max-height:0;transition:max-height .5s var(--sortie)}
.ligne[data-ouverte="oui"]{background:var(--encre);color:#fff;isolation:isolate}
.ligne[data-ouverte="oui"] .ligne__num,
.ligne[data-ouverte="oui"] .ligne__eyebrow{color:var(--gris-2)}
.ligne[data-ouverte="oui"] .ligne__corps{max-height:620px;padding-bottom:38px}
.ligne__visuel{border-radius:var(--r-s);overflow:hidden;aspect-ratio:3/4}
.ligne__visuel img{width:100%;height:100%;object-fit:cover}
.ligne__stat{font-size:34px;font-weight:700;letter-spacing:-.02em}
.ligne__stat span{font-size:22px;font-weight:500;color:var(--gris-2);margin-left:8px}
.ligne__texte{font-size:15px;line-height:1.7;color:var(--gris-2);max-width:620px;margin-top:6px}
.ligne__chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.ligne__chips span{background:var(--blanc-casse);color:var(--encre);border-radius:var(--r-s);
  padding:16px 20px;font-size:15px;font-weight:600;line-height:1.3;max-width:210px}

/* ---------- réalisations : cartes collantes ---------- */
.travaux{padding:104px 0 0}
.travaux .pile{padding-bottom:10px}
.projet{position:sticky;top:120px;background:#fff;border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:26px;
  box-shadow:0 20px 50px -34px rgba(10,10,10,.45)}
.projet__texte{padding:34px 34px 30px;display:flex;flex-direction:column}
.projet__texte h3{font-size:22px;margin-bottom:10px;letter-spacing:-.015em}
.projet__texte>p{font-size:15px;line-height:1.7;color:var(--gris-3)}
.projet__meta{margin-top:auto}
.projet__meta dl{display:block;margin:0;border-top:1px solid var(--ligne);padding:14px 0 12px}
.projet__meta dt{font-size:13px;color:var(--gris);margin-bottom:6px}
.projet__meta dd{margin:0;display:flex;gap:18px;flex-wrap:wrap;font-size:15px;font-weight:600}
.projet__meta dd span{display:flex;align-items:center;gap:7px}
.projet__meta dd span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.projet__visuel{background:var(--beige);overflow:hidden}
.projet__visuel img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* ---------- avis ---------- */
.avis{position:relative;background:var(--encre);color:#fff;overflow:hidden;padding:0 0 90px}
.avis__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;
  filter:saturate(.5) contrast(1.1)}
.avis::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 38%,rgba(10,10,10,.72),rgba(10,10,10,.9))}
.avis__titre,.avis__cartes{position:relative;z-index:2}
.avis__titre{position:sticky;top:0;height:100vh;display:grid;place-content:center;text-align:center;
  padding-inline:24px}
.avis__titre h2{font-size:clamp(40px,5.2vw,72px);line-height:1.08;color:#fff}
.avis__titre p{color:var(--gris-2);max-width:460px;margin:16px auto 0;font-size:16px}
.avis__cartes{position:relative;margin-top:-80vh;display:grid;gap:90px;padding-inline:24px;
  max-width:var(--large);margin-inline:auto}
.carte-avis{background:rgba(38,38,38,.86);backdrop-filter:blur(8px);border-radius:var(--r);
  padding:26px;width:min(320px,86vw);box-shadow:0 20px 60px -30px #000}
.carte-avis:nth-child(odd){justify-self:start}
.carte-avis:nth-child(even){justify-self:end}
.carte-avis:nth-child(3){justify-self:center}
.etoiles{display:flex;gap:4px;margin-bottom:28px;color:var(--accent)}
.carte-avis blockquote{margin:0;font-size:15px;line-height:1.65;color:#e9e9e9}
.carte-avis strong{display:block;margin-top:26px;font-size:15px;line-height:1.5}
.carte-avis footer{display:flex;align-items:center;gap:12px;margin-top:26px;
  justify-content:space-between}
.carte-avis footer div{text-align:right}
.carte-avis footer p{font-size:14px;font-weight:600}
.carte-avis footer small{font-size:13px;color:var(--gris-2)}
.pastille{width:34px;height:34px;border-radius:10px;background:var(--encre-4);flex:none}
.afournir{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.06em;
  background:var(--or);color:#2a1d00;padding:4px 10px;border-radius:999px;margin-bottom:16px}

/* ---------- tarifs ---------- */
.tarifs{padding:104px 0}
.rappels{display:flex;gap:10px;justify-content:center;margin-bottom:44px;flex-wrap:wrap}
.rappels span{font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;background:#fff}
.rappels span:first-child{background:var(--accent);color:#fff}
.grille-tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tarif{background:#fff;border-radius:var(--r);padding:26px 26px 0;display:flex;flex-direction:column}
.tarif--phare{background:var(--encre);color:#fff;box-shadow:0 0 0 3px var(--encre)}
.tarif__tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tarif h3{font-size:23px;letter-spacing:-.015em}
.tarif__sous{font-size:15px;color:var(--gris);margin-top:2px}
.tarif--phare .tarif__sous{color:var(--gris-2)}
.badge{font-size:12.5px;font-weight:700;background:#fff;color:var(--encre);
  padding:6px 13px;border-radius:999px;white-space:nowrap;flex:none}
.tarif__prix{display:flex;align-items:baseline;gap:3px;margin:22px 0 20px}
.tarif__prix b{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tarif__prix i{font-style:normal;font-size:15px;color:var(--gris)}
.tarif--phare .tarif__prix i{color:var(--gris-2)}
.tarif .bouton{width:100%;justify-content:center}
.tarif__liste{background:var(--blanc-casse);border-radius:var(--r-s);margin:22px -26px 0;
  padding:22px 26px 26px;list-style:none;flex:1}
.tarif--phare .tarif__liste{background:var(--encre-3);margin-inline:-23px;margin-bottom:3px}
.tarif__liste p{font-size:15px;font-weight:600;margin-bottom:14px}
.tarif__liste li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--gris-3);
  margin-bottom:11px}
.tarif--phare .tarif__liste li{color:#d9d9d9}
.tarif__liste li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  flex:none;margin-top:8px}

/* ---------- questions ---------- */
.questions{padding:10px 0 104px}
.onglets{display:flex;gap:10px;justify-content:center;margin-bottom:34px;flex-wrap:wrap}
.ong{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.ong:focus-visible+.ong+.ong+.onglets label[for],
.ong:focus-visible+.onglets label{outline:3px solid var(--accent);outline-offset:3px}
.onglets label{font-size:15px;font-weight:600;padding:9px 18px;border-radius:999px;background:#fff;
  cursor:pointer;transition:background .2s ease-out,color .2s ease-out}
#ong1:checked~.onglets label[for="ong1"],
#ong2:checked~.onglets label[for="ong2"],
#ong3:checked~.onglets label[for="ong3"]{background:var(--encre);color:#fff}
#ong1:checked~.groupe-q[data-groupe="1"],
#ong2:checked~.groupe-q[data-groupe="2"],
#ong3:checked~.groupe-q[data-groupe="3"]{display:flex}
.onglets label:hover{background:var(--beige)}
.groupe-q{display:none;flex-direction:column;gap:12px}
.question{background:#fff;border-radius:var(--r-s);overflow:hidden;
  transition:background .3s ease-out}
.question summary{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 24px;cursor:pointer;font-size:17px;font-weight:600;list-style:none}
.question summary::-webkit-details-marker{display:none}
.question__plus{width:30px;height:30px;border-radius:50%;background:var(--encre);color:#fff;
  display:grid;place-content:center;flex:none;transition:background .2s ease-out}
.question__plus::before{content:"+";font-size:19px;line-height:1}
.question[open]{background:var(--accent);color:#fff}
.question[open] .question__plus{background:rgba(255,255,255,.22)}
.question[open] .question__plus::before{content:"–"}
.question p{padding:0 24px 24px;font-size:15px;line-height:1.65;max-width:860px}

/* ---------- blog ---------- */
.blog{padding:0 0 100px}
.blog .entete{align-items:start}
.blog .entete>div:last-child{justify-self:end;text-align:right}
.blog .entete p{margin-bottom:18px}
.carte-blog{background:#fff;border-radius:var(--r);padding:12px;display:grid;gap:12px}
.carte-blog--large{grid-template-columns:1fr 1fr;margin-bottom:20px}
.carte-blog__img{border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/3;background:var(--beige)}
.carte-blog__img img{width:100%;height:100%;object-fit:cover}
.carte-blog__corps{padding:16px 14px 14px;display:flex;flex-direction:column}
.etiquette{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  background:var(--beige);border-radius:999px;padding:6px 14px;align-self:flex-start;margin-bottom:14px}
.etiquette::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.carte-blog h3{font-size:19px;margin-bottom:8px;letter-spacing:-.015em}
.carte-blog p{font-size:15px;line-height:1.6;color:var(--gris-3)}
.carte-blog .bouton{margin-top:auto;justify-content:center;width:100%}
.blog__duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ---------- appel final ---------- */
.final{padding:30px 0 104px;text-align:center}
.final__objet{width:190px;height:190px;margin:0 auto 26px;object-fit:contain;
  border-radius:50%;animation:tourne 26s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.final h2{font-size:clamp(34px,4.6vw,58px);line-height:1.1}
.final>.contenant>p{color:var(--gris);margin:14px auto 0;max-width:520px}
.formulaire{max-width:560px;margin:34px auto 0;display:grid;gap:12px;text-align:left}
.champ label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.champ input{width:100%;border:0;border-radius:var(--r-s);padding:15px 18px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--ligne);transition:box-shadow .2s ease-out}
.champ input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
.formulaire .bouton{justify-content:center;margin-top:6px}
.formulaire__note{font-size:14px;line-height:1.6;color:var(--gris);text-align:center;margin-top:4px}
.pot-de-miel{position:absolute;left:-9999px}

/* ---------- pied de page ---------- */
.pied{background:var(--encre);color:#fff;padding:64px 0 0;overflow:hidden}
.pied__haut{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:54px}
.pied__haut .pied__marque{color:#fff;font-size:30px;font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.pied__haut p{color:var(--gris-2);font-size:15px;line-height:1.7;max-width:380px}
.pied__contactbloc{justify-self:end;width:min(420px,100%)}
.pied__contactbloc h3{font-size:17px;margin-bottom:12px}
.pied__tel{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--encre-3);border-radius:999px;padding:7px 7px 7px 22px;font-size:17px;font-weight:600}
.pied__colonnes{display:grid;grid-template-columns:.85fr .95fr .8fr 1.1fr 1.3fr;gap:28px;padding-bottom:50px}
.pied__colonnes h4{font-size:17px;font-weight:600;margin-bottom:16px}
.pied__colonnes ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pied__colonnes a,.pied__colonnes li{font-size:15px;color:var(--gris-2);
  transition:color .2s ease-out}
.pied__colonnes a:hover{color:#fff}
.pied__contacts{display:grid;gap:16px}
.pied__contacts>div{display:flex;gap:12px;align-items:flex-start}
.pied__contacts svg{flex:none;margin-top:3px;color:var(--accent)}
.pied__contacts b{display:block;font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
.pied__contacts small{display:block;font-size:13px;color:var(--gris-2);line-height:1.5}
.pied__geant{font-size:12.6vw;line-height:.78;font-weight:800;letter-spacing:-.045em;
  text-align:center;white-space:nowrap;margin-top:10px;
  background-image:linear-gradient(180deg,#ff4c39 0%,#c0220c 52%,#2a0702 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:0;user-select:none}
.pied__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--encre-3);padding:22px 0;font-size:13px;color:var(--gris-2)}

/* ---------- 1024 ---------- */
@media(max-width:999px){
  .nav__menu{display:none}
  .nav__burger{display:block}
  .nav__in{justify-content:space-between}
  .manifeste__grille{grid-template-columns:1fr}
  .manifeste__col{flex-direction:row;flex-wrap:wrap;gap:18px}
  .valeurs__grille{grid-template-columns:1fr 1fr;gap:40px}
  .grille-tarifs{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .pied__colonnes{grid-template-columns:repeat(3,1fr);gap:32px}
  .pied__haut{grid-template-columns:1fr}
  .pied__contactbloc{justify-self:start}
  .etape:nth-child(2){margin-left:8vw}
  .etape:nth-child(3){margin-left:16vw}
  .etape:nth-child(4){margin-left:24vw}
}

/* ---------- 768 et moins ---------- */
@media(max-width:760px){
  :root{--r:16px}
  .hero{padding-top:22px}
  .hero__labels{padding-inline:20px;font-size:16px}
  .geant{padding-inline:16px;font-size:12.4vw;letter-spacing:-.035em;white-space:normal;
    line-height:.92}
  .panneau{min-height:auto;padding:24px 20px;gap:30px}
  .chiffres{grid-template-columns:1fr;gap:12px;text-align:left}
  .chiffres>div:nth-child(2),.chiffres>div:nth-child(3){text-align:left}
  .chiffre{font-size:21px}
  .panneau__bas{flex-direction:column;align-items:stretch}
  .panneau__accroche{max-width:none}
  .panneau__actions .bouton{flex:1;justify-content:center}
  .puces{justify-content:flex-start;max-width:none}
  .entete{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .entete p{text-align:left;justify-self:start}
  .blog .entete>div:last-child{justify-self:start;text-align:left}
  .manifeste{padding:66px 0 74px}
  .valeurs{padding:70px 0}
  .valeurs__grille{grid-template-columns:1fr;gap:34px}
  .etape{width:78%;height:430px;top:110px}
  .etape:nth-child(n){margin-left:0}
  .etape:nth-child(2){margin-left:8%}
  .etape:nth-child(3){margin-left:16%}
  .etape:nth-child(4){margin-left:22%}
  .ligne__tete{grid-template-columns:40px 1fr;padding:22px 20px;gap:16px}
  .ligne__tete .bouton{grid-column:2;justify-self:start;margin-top:8px}
  .ligne__corps{grid-template-columns:1fr;padding-inline:20px}
  .ligne__visuel{max-width:220px}
  .ligne[data-ouverte="oui"] .ligne__corps{max-height:1500px}
  .projet{grid-template-columns:1fr;top:90px}
  .projet__visuel{aspect-ratio:16/10;order:-1}
  .travaux{padding-top:72px}
  .avis__titre{height:72vh}
  .avis__cartes{margin-top:-46vh;gap:40px}
  .carte-avis:nth-child(n){justify-self:center}
  .tarifs{padding:74px 0}
  .carte-blog--large,.blog__duo{grid-template-columns:1fr}
  .pied__colonnes{grid-template-columns:1fr 1fr}
  .final__objet{width:140px;height:140px}
}

/* ---------- mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bandeau__piste,.clients__piste,.final__objet{animation:none}
  .apparait.pre{opacity:1;transform:none;transition:none}
  .manifeste__texte i{color:var(--encre);transition:none}
  .etape,.projet,.avis__titre{position:static;height:auto;margin-left:0!important}
  .avis__cartes{margin-top:30px}
  .bouton:hover{transform:none}
}

/* ---------- menu mobile ---------- */
@media(max-width:999px){
  .nav__menu.ouvert{display:grid;position:absolute;left:0;right:0;top:100%;
    background:var(--creme);border-bottom:1px solid var(--ligne);padding:12px 24px 20px;gap:2px;
    box-shadow:0 20px 40px -30px rgba(10,10,10,.5)}
  .nav__menu.ouvert a{display:block;padding:12px 10px;font-size:17px;font-weight:600}
  .nav{position:sticky}
  .nav__in{position:relative}
}
@media(max-width:560px){
  .nav__tel{display:none}
  .nav .bouton--accent{padding:11px 15px;font-size:15px}
  .logo{font-size:18px;gap:8px}
  .logo svg{width:26px;height:23px}
  .nav__in{gap:10px;padding:12px 16px}
}

/* =========================================================================
   PAGES INTÉRIEURES — mêmes jetons, mêmes composants que l'accueil
   ========================================================================= */

/* ---------- entête de page ---------- */
.entete-page{padding:54px 0 46px}
.fil{margin-bottom:26px}
.fil ol{list-style:none;display:flex;gap:10px;margin:0;padding:0;font-size:14px;color:var(--gris)}
.fil li+li::before{content:"/";margin-right:10px;color:var(--ligne)}
.fil a:hover{color:var(--accent-fonce)}
.eyebrow{font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--gris-3);margin-bottom:14px}
.entete-page h1{font-size:clamp(42px,6.6vw,96px);line-height:1.02;letter-spacing:-.035em;
  text-wrap:balance}
.entete-page .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--gris-3);
  max-width:620px;margin-top:22px}
.entete-page--legal{padding-bottom:10px}
.entete-page--legal h1{font-size:clamp(34px,4.6vw,58px)}
.panneau--court{min-height:330px;margin-top:10px}

/* ---------- blocs de section ---------- */
.bloc{padding:86px 0}
.bloc--beige{background:var(--beige)}
.bloc--sombre{background:var(--encre);color:#fff}
.bloc--sombre .entete h2{color:#fff}
.bloc--sombre .entete p{color:var(--gris-2)}
.h2-bloc{font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.025em;margin-bottom:20px}
.texte{font-size:17px;line-height:1.72;color:var(--gris-3);max-width:60ch;margin-bottom:16px}

/* ---------- ce qui est compris ---------- */
.inclusions{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(10,10,10,.12);
  border-radius:var(--r);overflow:hidden}
.inclusion{background:var(--creme);padding:28px 30px}
.inclusion h3{font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:11px}
.inclusion h3::before{content:"";width:13px;height:13px;border-radius:50%;flex:none;
  border:3.5px solid var(--accent)}
.inclusion p{font-size:15px;line-height:1.65;color:var(--gris-3)}
.inclusion code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  background:rgba(10,10,10,.06);padding:2px 6px;border-radius:5px}

/* ---------- ce qui n'est pas compris ---------- */
.exclusions{display:grid;gap:1px;background:var(--encre-3);border-radius:var(--r);overflow:hidden}
.exclusions>div{background:var(--encre);padding:26px 30px}
.exclusions h3{font-size:18px;margin-bottom:8px}
.exclusions p{font-size:15px;line-height:1.65;color:var(--gris-2);max-width:72ch}
.exclusions--clair{background:var(--ligne)}
.exclusions--clair>div{background:#fff}
.exclusions--clair p{color:var(--gris-3)}

/* ---------- paiement en une fois ---------- */
.duo{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}
.carte-forte{background:var(--encre);color:#fff;border-radius:var(--r);padding:34px}
.carte-forte__prix{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.carte-forte__prix b{font-size:54px;font-weight:700;letter-spacing:-.035em;line-height:1}
.carte-forte__prix i{font-style:normal;font-size:17px;color:var(--gris-2)}
.carte-forte__texte{font-size:16px;line-height:1.7;color:#e4e4e4;max-width:60ch}
.definitions{margin:26px 0 28px;display:grid;gap:0}
.definitions>div{display:grid;grid-template-columns:200px 1fr;gap:24px;
  border-top:1px solid var(--encre-3);padding:16px 0}
.definitions dt{font-size:15px;font-weight:600}
.definitions dd{margin:0;font-size:15px;line-height:1.65;color:var(--gris-2)}
.encart{background:#fff;border-radius:var(--r);padding:30px}
.encart h3{font-size:22px;margin-bottom:12px;letter-spacing:-.015em}
.encart p{font-size:15px;line-height:1.7;color:var(--gris-3);margin-bottom:22px}

/* ---------- services hors abonnement ---------- */
.services{border-top:1px solid rgba(10,10,10,.14)}
.service{display:grid;grid-template-columns:54px 1fr auto;gap:26px;align-items:center;
  border-bottom:1px solid rgba(10,10,10,.14);padding:24px 0}
.service__num{font-size:15px;font-weight:600;color:var(--gris)}
.service h3{font-size:clamp(20px,2vw,27px);font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.service p{font-size:15px;line-height:1.6;color:var(--gris-3);max-width:62ch}
.service__prix{font-size:15px;font-weight:700;white-space:nowrap;background:var(--accent);color:#fff;
  padding:9px 17px;border-radius:999px}

/* ---------- jalons du parcours ---------- */
.jalons{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.jalon{border-top:4px solid var(--encre);padding-top:20px}
.jalon__quand{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--accent-fonce);
  margin-bottom:8px}
.jalon h3{font-size:19px;margin-bottom:10px}
.jalon p{font-size:15px;line-height:1.65;color:var(--gris-3)}

/* ---------- récits ---------- */
.recit{max-width:760px}
.recit h2{font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.025em;margin-bottom:22px}
.recit p{font-size:17px;line-height:1.72;color:var(--gris-2);margin-bottom:16px}
.recit--clair p{color:var(--gris-3)}
.recit .bouton{margin-top:12px}

/* ---------- réalisations, page dédiée ---------- */
.travaux--page{padding-top:10px}
.projet__cat{font-size:14px;font-weight:600;color:var(--gris);margin-bottom:10px;
  display:flex;gap:12px;flex-wrap:wrap}
.projet__lieu{color:var(--accent-fonce)}
.projet__lieu::before{content:"· "}
.projet__recit{margin:18px 0 22px;display:grid;gap:0}
.projet__recit>div{border-top:1px solid var(--ligne);padding:13px 0}
.projet__recit dt{font-size:13px;color:var(--gris);margin-bottom:5px}
.projet__recit dd{margin:0;font-size:15px;line-height:1.6}

/* ---------- contact ---------- */
.coords{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.coord{background:#fff;border-radius:var(--r);padding:30px}
.coord__icone{width:28px;height:28px;color:var(--accent);margin-bottom:22px}
.coord h2{font-size:17px;font-weight:600;color:var(--gris);margin-bottom:10px;letter-spacing:0}
.coord__gros{display:block;font-size:30px;font-weight:700;letter-spacing:-.025em;margin-bottom:12px;
  transition:color .2s ease-out}
.coord__gros--petit{font-size:22px;word-break:break-word}
.coord__gros:hover{color:var(--accent-fonce)}
.coord p,.coord__texte{font-size:15px;line-height:1.68;color:var(--gris-3);margin-bottom:12px}

/* ---------- pages étroites : merci, 404 ---------- */
.etroit{padding:70px 0 110px;text-align:center}
.etroit h1{font-size:clamp(34px,4.6vw,62px);line-height:1.06;letter-spacing:-.03em}
.etroit .lead{font-size:18px;line-height:1.7;color:var(--gris-3);max-width:540px;
  margin:18px auto 0}
.etroit__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.geant--404{font-size:clamp(110px,22vw,300px);margin-bottom:6px;white-space:nowrap}

/* ---------- textes légaux ---------- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(21px,2.1vw,27px);letter-spacing:-.02em;margin:40px 0 12px;
  padding-top:22px;border-top:1px solid var(--ligne)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:18px;margin:24px 0 8px}
.legal p,.legal li{font-size:16px;line-height:1.72;color:var(--gris-3);margin-bottom:14px}
.legal ul,.legal ol{padding-left:22px;margin:0 0 18px}
.legal li{margin-bottom:8px}
.legal a{color:var(--accent-fonce);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--encre)}
.legal dl{margin:0 0 18px}
.legal dt{font-weight:600;margin-top:12px}
.legal dd{margin:0 0 6px;color:var(--gris-3)}

/* ---------- divers ---------- */
.groupe-q--seul{display:flex}
.pied__note{color:var(--gris-2);font-size:14px;margin-top:10px}
.final h1{font-size:clamp(34px,4.6vw,58px);line-height:1.1}

/* ---------- adaptations ---------- */
@media(max-width:1060px){
  .duo{grid-template-columns:1fr}
  .jalons{grid-template-columns:repeat(2,1fr);gap:30px}
  .coords{grid-template-columns:1fr}
  .definitions>div{grid-template-columns:160px 1fr;gap:16px}
}
@media(max-width:760px){
  .bloc{padding:60px 0}
  .entete-page{padding:34px 0 34px}
  .inclusions{grid-template-columns:1fr}
  .jalons{grid-template-columns:1fr;gap:26px}
  .service{grid-template-columns:38px 1fr;gap:14px;row-gap:14px}
  .service__prix{grid-column:2;justify-self:start}
  .definitions>div{grid-template-columns:1fr;gap:4px}
  .carte-forte{padding:26px 22px}
  .coord{padding:24px 22px}
  .coord__gros{font-size:26px}
  .etroit{padding:46px 0 80px}
  .legal h2{margin-top:30px}
}

/* ---------- retouches ---------- */
/* Les captures de sites ont besoin de hauteur pour rester lisibles. */
/* Une capture de site recadrée en "cover" perd 40 % de la page : on la montre
   entière, posée sur le beige, plutôt que zoomée. */
.projet__visuel{background:var(--beige);display:grid;place-items:center;padding:24px}
.projet__visuel img{width:100%;height:auto;max-height:100%;object-fit:contain;
  border-radius:10px;box-shadow:0 14px 34px -20px rgba(10,10,10,.55)}
/* Les trois cartes de contact à la même hauteur. */
.coords{align-items:stretch}
/* Les trois prix sur la même ligne, quelle que soit la longueur du sous-titre. */
.tarif__sous{min-height:2.7em}
@media(max-width:1060px){.tarif__sous{min-height:0}}
@media(max-width:760px){.travaux--page .projet{min-height:0}}

/* =========================================================================
   AUDIT DU 28/10/2026 — corrections mobile, tablette, ordinateur
   ========================================================================= */

/* 1. Cibles tactiles : 44 px minimum partout où l'on clique.
      Relevé : les liens du menu faisaient 31 px, le téléphone 27 px. */
.nav__menu a{padding:12px 12px;line-height:1.4}
.nav__tel{padding:12px 4px;align-items:center}
.logo{padding-block:6px}
.fil a{display:inline-block;padding:6px 2px}
.pied__colonnes a{display:inline-block;padding-block:5px}
.question summary{min-height:56px}
.onglets label{min-height:44px;display:inline-flex;align-items:center}
.rappels span{min-height:38px;display:inline-flex;align-items:center}

/* 2. Barre de navigation : quand le menu passe en burger, le groupe de droite
      se recolle à droite au lieu de s'étaler. */
@media(max-width:999px){
  .nav__in{gap:14px}
  .nav__tel{margin-left:auto}
}

/* 3. Longueur de ligne : au-delà de 75 caractères, l'œil perd la ligne.
      Relevé : jusqu'à 122 caractères dans les réponses aux questions. */
.question p{max-width:70ch}
.encart p,.coord__texte,.coord p{max-width:62ch}
.exclusions p{max-width:70ch}
.carte-forte__texte,.definitions dd{max-width:70ch}
.ligne__texte{max-width:70ch}

/* 4. Taille de texte plancher : rien en dessous de 13 px. */
.afournir{font-size:13px}
.badge{font-size:13px}
.carte-avis footer small,.pied__contacts small,.fil ol{font-size:13.5px}

/* 5. Tablette : à 768 px les fiches de réalisations gardaient deux colonnes,
      et la capture se retrouvait minuscule dans un grand aplat beige. */
@media(max-width:900px){
  .projet{grid-template-columns:1fr;top:90px}
  .projet__visuel{aspect-ratio:16/10;order:-1}
  .travaux--page .projet{min-height:0}
}
@media(max-width:860px){
  .inclusions{grid-template-columns:1fr}
}

/* 6. Focus clavier visible sur fond sombre comme sur fond clair. */
.bloc--sombre :focus-visible,.process :focus-visible,.avis :focus-visible,
.pied :focus-visible,.panneau :focus-visible{outline-color:#fff}

/* 7. Le défilement ne doit pas cacher la cible d'une ancre sous la barre collée. */
:target{scroll-margin-top:96px}
[id]{scroll-margin-top:96px}

/* 8. Sur petit écran le téléphone sort de la barre : il reste dans le menu
      déplié et dans le pied de page. Déclaré en dernier pour que rien ne
      le réaffiche par mégarde. */
@media(max-width:620px){
  .nav__tel{display:none}
}

/* 9. L'escalier des quatre étapes débordait de son conteneur à 1440 px :
      les décalages sont maintenant calculés sur la largeur disponible,
      donc la quatrième carte s'arrête toujours pile au bord. */
@media(min-width:761px){
  .etape{--pas:calc((100% - min(300px,78vw)) / 3)}
  .etape:nth-child(2){margin-left:var(--pas)}
  .etape:nth-child(3){margin-left:calc(var(--pas) * 2)}
  .etape:nth-child(4){margin-left:calc(var(--pas) * 3)}
}

/* 10. SEO — certains titres ont changé de niveau pour que la hiérarchie
       h1 → h2 → h3 ne saute plus d'étage. L'apparence, elle, ne bouge pas. */
.pied__titre{font-size:17px;font-weight:600;margin-bottom:12px;letter-spacing:0}
.pied__colonnes h3{font-size:17px;font-weight:600;margin-bottom:16px;letter-spacing:0}
.projet__titre{font-size:22px;font-weight:600;margin-bottom:10px;letter-spacing:-.015em}

/* 11. Le lettrage du pied de page doit toucher les deux bords, comme sur le
       site source, sans jamais être rogné. */
.pied__geant{font-size:15.1vw;padding-inline:8px}

/* 12. Portrait du hero. La photo est déjà éclairée en rouge sur fond noir,
       soit l'inverse du portrait du template (sombre sur rouge vif) : une
       fusion « screen » fait disparaître le noir dans le rouge du panneau et
       ne garde que le visage éclairé. Le masque adoucit les quatre bords. */
.panneau__img{position:absolute;inset:0;z-index:-1;display:flex;justify-content:center;
  pointer-events:none}
.panneau__img img{height:100%;width:min(64%,760px);object-fit:cover;object-position:50% 34%;
  mix-blend-mode:screen;opacity:.92;
  -webkit-mask-image:radial-gradient(72% 86% at 50% 44%,#000 52%,transparent 100%);
  mask-image:radial-gradient(72% 86% at 50% 44%,#000 52%,transparent 100%)}
@media(max-width:760px){
  .panneau__img img{width:100%;opacity:.7;object-position:50% 28%}
}

/* 13. Avec le portrait, le panneau retrouve la hauteur du site source :
       à 530 px la boîte de l'image a presque le ratio de la photo, donc le
       visage tient en entier, sans recadrage du crâne. */
.panneau{min-height:530px}
.panneau--court{min-height:400px}
.panneau__img img{object-position:50% 46%}
/* Les chiffres passent maintenant devant un visage éclairé : une ombre douce
   garantit la lisibilité sans assombrir le panneau. */
.chiffres{text-shadow:0 1px 14px rgba(60,0,2,.55)}
.panneau__accroche{text-shadow:0 1px 12px rgba(60,0,2,.5)}
@media(max-width:760px){
  .panneau{min-height:auto}
  .panneau--court{min-height:auto}
}

/* 14. Le portrait est calé en bas du panneau et légèrement réduit : le crâne
       cesse de toucher le bord haut, et le visage descend sous la ligne des
       trois chiffres au lieu de passer derrière. */
.panneau__img{align-items:flex-end}
.panneau__img img{height:90%;width:min(58%,700px)}
@media(max-width:1060px){
  .panneau__img img{opacity:.6;width:min(72%,620px)}
}
@media(max-width:760px){
  .panneau__img img{height:100%;width:100%;opacity:.55;object-position:50% 24%}
}

/* 15. Masque plus progressif : il commence à s'estomper bien avant le bord,
       pour qu'aucune arête du cadre de la photo ne se devine sur le rouge. */
.panneau__img img{
  -webkit-mask-image:radial-gradient(64% 80% at 50% 50%,#000 18%,rgba(0,0,0,.55) 62%,transparent 94%);
  mask-image:radial-gradient(64% 80% at 50% 50%,#000 18%,rgba(0,0,0,.55) 62%,transparent 94%)}

/* 16. Le rayon horizontal du masque vaut exactement la demi-largeur de
       l'image : la fusion atteint donc la transparence pile sur ses bords
       gauche et droit, et aucune arête ne se devine, à aucune largeur. */
.panneau__img img{
  -webkit-mask-image:radial-gradient(50% 78% at 50% 52%,#000 12%,rgba(0,0,0,.62) 56%,transparent 97%);
  mask-image:radial-gradient(50% 78% at 50% 52%,#000 12%,rgba(0,0,0,.62) 56%,transparent 97%)}

/* 17. Le bandeau rouge de la page Offre n'a pas de portrait : il garde une
       hauteur resserrée pour ne pas sonner creux. */
.panneau--court{min-height:350px}

/* =========================================================================
   18. Les trois chiffres du hero — demande du 28/10.
   Ils étaient posés aux trois coins du panneau, comme sur le site source.
   Sur téléphone, empilés et alignés à gauche, ils passaient pour une liste
   quelconque. Ils deviennent un cadre unique, centré, en verre dépoli sur le
   rouge : le portrait reste visible derrière, mais les chiffres se détachent.
   ========================================================================= */
.chiffres{
  grid-template-columns:repeat(3,1fr);
  max-width:1000px;margin-inline:auto;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.38);
  border-radius:20px;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  overflow:hidden;gap:0;text-shadow:none}
.chiffres>div{padding:22px 20px;text-align:center;display:flex;
  flex-direction:column;justify-content:center;gap:3px}
.chiffres>div+div{border-left:1px solid rgba(255,255,255,.26)}
.chiffres>div:nth-child(2),
.chiffres>div:nth-child(3){text-align:center}
.chiffre{font-size:30px;line-height:1.2}
.chiffre+p{font-size:15px;line-height:1.45;color:rgba(255,255,255,.9);
  max-width:22ch;margin-inline:auto}

@media(max-width:860px){
  .chiffres{grid-template-columns:1fr;max-width:420px}
  .chiffres>div{padding:15px 18px;text-align:center}
  .chiffres>div:nth-child(2),
  .chiffres>div:nth-child(3){text-align:center}
  .chiffres>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.24)}
  .chiffre{font-size:25px}
  .chiffre+p{font-size:14.5px}
}

/* 19. Sans largeur explicite, les marges automatiques faisaient rétrécir le
       cadre à la taille de son contenu au lieu de le centrer à 1000 px. */
.chiffres{width:100%}
@media(max-width:860px){.chiffres{width:min(100%,420px)}}

/* 20. Un cran de présence en plus : le cadre se détache du rouge au lieu de
       s'y fondre, et le chiffre prend le pas sur sa légende. */
.chiffres{
  background:rgba(255,255,255,.19);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 18px 44px -24px rgba(50,0,2,.85)}
.chiffres>div+div{border-left-color:rgba(255,255,255,.34)}
.chiffre{font-size:clamp(25px,2.4vw,34px);font-weight:700;letter-spacing:-.02em}
.chiffre+p{color:rgba(255,255,255,.95)}
@media(max-width:860px){
  .chiffres>div+div{border-top-color:rgba(255,255,255,.3)}
}

/* 21. Le rouge du panneau s'éclaircit vers la droite : le texte blanc y
       tombait à 3,4:1 dans la troisième cellule. Un voile sombre sous le
       verre égalise le fond du cadre, quelle que soit la zone traversée. */
.chiffres{
  background:linear-gradient(0deg,rgba(255,255,255,.17),rgba(255,255,255,.17)),
             rgba(104,2,8,.42)}

/* 22. Les angles de dégradé des lettres géantes vivaient en attribut `style`.
       La CSP du site en production interdit les styles en ligne
       (`style-src 'self'`, sans 'unsafe-inline') : ils passent ici.
       Les trois premières valeurs servent aussi au « 404 ». */
.geant span:nth-child(1){--a:168deg}
.geant span:nth-child(2){--a:12deg}
.geant span:nth-child(3){--a:190deg}
.geant span:nth-child(4){--a:350deg}
.geant span:nth-child(5){--a:150deg}
.geant span:nth-child(7){--a:20deg}
.geant span:nth-child(8){--a:175deg}
.geant span:nth-child(9){--a:340deg}
.geant span:nth-child(10){--a:160deg}
.geant span:nth-child(11){--a:8deg}
.geant span:nth-child(12){--a:200deg}
.geant span:nth-child(13){--a:330deg}
.geant span:nth-child(14){--a:155deg}

/* =========================================================================
   23. LES PHOTOS QUI NE VOULAIENT RIEN DIRE — 28/10
   Quatre photos illustraient les quatre étapes, quatre autres les lignes de
   prestations, une dernière le dernier appel. Aucune ne correspondait à son
   texte : une scie circulaire à côté de « Je photographie et j'écris ».
   Elles sont retirées. Il n'existe pas de photo honnête pour « Vous
   validez » — alors la couleur et le chiffre portent la carte, comme ils le
   faisaient déjà. Seules les deux photos d'Antoine et les sept captures de
   sites clients restent : elles, elles montrent quelque chose de vrai.
   ========================================================================= */

/* --- Les quatre étapes : un aplat par carte, pas deux fois le même --- */
.etape{background:#c8300d}
.etape::after{background:
  radial-gradient(90% 60% at 18% 8%,rgba(255,170,130,.38),transparent 62%),
  linear-gradient(165deg,#ff6a45 0%,#e03a12 52%,#8f1403 100%)}
.etape:nth-child(2)::after{background:
  radial-gradient(85% 58% at 82% 10%,rgba(255,160,120,.34),transparent 60%),
  linear-gradient(200deg,#ff5a2e 0%,#cf2f0d 48%,#78110a 100%)}
.etape:nth-child(3)::after{background:
  radial-gradient(95% 62% at 12% 86%,rgba(255,180,140,.32),transparent 64%),
  linear-gradient(145deg,#ff7a52 0%,#d4300e 56%,#6d0f02 100%)}
.etape:nth-child(4)::after{background:
  radial-gradient(88% 56% at 78% 90%,rgba(255,150,110,.3),transparent 58%),
  linear-gradient(185deg,#ff4c39 0%,#b82408 50%,#5c0c02 100%)}
/* le chiffre reprend la place que la photo occupait */
.etape__num{font-size:92px;line-height:1;padding:36px 30px 0;
  text-shadow:0 2px 30px rgba(80,6,0,.4)}

/* --- Les prestations : le chiffre prend la colonne de la photo --- */
.ligne__chiffre{align-self:start}
.ligne__chiffre .ligne__stat{font-size:40px;line-height:1.08;margin:0}
.ligne__chiffre .ligne__stat span{display:block;font-size:17px;margin:8px 0 0;
  color:var(--gris-2);letter-spacing:0}
.ligne__texte{margin-top:0}

/* --- Le signe du dernier appel, dessiné plutôt que photographié --- */
.marque{width:168px;height:168px;display:block;margin:0 auto 26px;
  animation:tourne 34s linear infinite}
@media(prefers-reduced-motion:reduce){.marque{animation:none}}
@media(max-width:760px){
  .marque{width:124px;height:124px;margin-bottom:20px}
  .etape__num{font-size:74px;padding:28px 26px 0}
  .ligne__chiffre .ligne__stat{font-size:32px}
}

/* 24. Sans photo à porter, la carte d'étape n'a plus besoin de sa hauteur :
       elle se resserre autour du chiffre et du texte. */
.etape{height:400px}
@media(max-width:760px){.etape{height:370px}}

/* =========================================================================
   25. LA PALETTE PASSE À LA CHARTE D'ANTOINE — 28/10
   Le rouge-orangé du template MarketingLab (#ff4c39) cède la place aux
   oranges du logo. Deux valeurs, pas une, parce qu'elles n'ont pas le même
   rôle : #ED5623 est l'orange de la marque, mais le blanc dessus ne donne
   que 3,4:1. Tout ce qui porte du texte blanc utilise donc #C8500F (4,6:1),
   et #ED5623 reste pour les dégradés, les marques et les aplats décoratifs.
   Valeurs relevées dans design-system/CHARTE.md.
   ========================================================================= */
:root{
  --accent:#C8500F;        /* aplats portant du texte blanc — 4,6:1 */
  --accent-vif:#ED5623;    /* l'orange du logo : dégradés, repères */
  --accent-fonce:#A33E08;  /* survol */
  --accent-texte:#B5450B;  /* petits textes orange sur fond clair — 5,3:1 */
  --jaune:#F9E07B;         /* le rond du logo */
  --or:#F5C535;
  --lettre-sombre:#7A2A02;
  --lettre-vive:#ED5623;
  --rouge-panneau:linear-gradient(100deg,#8A3304 0%,#A84008 38%,#C8500F 72%,#B0460B 100%);
}

/* le panneau du hero */
.panneau::after{background:radial-gradient(74% 92% at 50% 8%,rgba(255,150,80,.26),transparent 62%)}
.chiffres{background:linear-gradient(0deg,rgba(255,255,255,.17),rgba(255,255,255,.17)),
  rgba(96,34,2,.44);box-shadow:0 18px 44px -24px rgba(52,18,0,.85);
  text-shadow:0 1px 14px rgba(58,20,0,.5)}
.panneau__accroche{text-shadow:0 1px 12px rgba(58,20,0,.5)}

/* les quatre cartes d'étapes, quatre oranges */
.etape{background:#C8500F}
.etape::after{background:
  radial-gradient(90% 60% at 18% 8%,rgba(255,205,150,.36),transparent 62%),
  linear-gradient(165deg,#F2762F 0%,#D4530F 52%,#8A3104 100%)}
.etape:nth-child(2)::after{background:
  radial-gradient(85% 58% at 82% 10%,rgba(255,196,140,.32),transparent 60%),
  linear-gradient(200deg,#ED5623 0%,#C8500F 48%,#7A2A02 100%)}
.etape:nth-child(3)::after{background:
  radial-gradient(95% 62% at 12% 86%,rgba(255,212,164,.3),transparent 64%),
  linear-gradient(145deg,#F5853C 0%,#D4590F 56%,#7E2C02 100%)}
.etape:nth-child(4)::after{background:
  radial-gradient(88% 56% at 78% 90%,rgba(255,190,135,.28),transparent 58%),
  linear-gradient(185deg,#EE6A19 0%,#B44509 52%,#5E2102 100%)}
.etape__num{text-shadow:0 2px 30px rgba(74,26,0,.42)}

/* le lettrage du pied de page */
.pied__geant{background-image:linear-gradient(180deg,#ED5623 0%,#A83F08 52%,#2A1003 100%)}

/* les repères décoratifs prennent l'orange vif du logo */
.bandeau__groupe span::before,
.projet__meta dd span::before,
.tarif__liste li::before,
.etiquette::before,
.inclusion h3::before{color:var(--accent-vif);background:var(--accent-vif)}
.inclusion h3::before{background:none;border-color:var(--accent-vif)}
.bandeau__groupe span::before{background:none}
.coord__icone,.pied__contacts svg{color:var(--accent-vif)}
.carte-client svg [stroke]{stroke:var(--accent-vif)}

/* le logo d'Antoine, détouré, à la place du tracé que j'avais dessiné */
.logo__signe{width:auto;height:30px;flex:none}
@media(max-width:560px){.logo__signe{height:26px}}

/* 26. L'orange de la charte est plus clair que le rouge du template : le
       blanc sur le cadre des chiffres tombait à 4,56:1, soit tout juste le
       seuil. Le voile sous le verre est renforcé pour revenir à une marge
       confortable. */
.chiffres{background:linear-gradient(0deg,rgba(255,255,255,.15),rgba(255,255,255,.15)),
  rgba(88,30,2,.56)}

/* 27. Contrastes hérités du template, relevés au calcul sur les 11 pages.
       Son gris secondaire #737373 ne donne que 4,14:1 sur le fond crème —
       sous le seuil AA de 4,5. Il cède la place au brun de la charte
       d'Antoine, qui monte à 6,6:1 et réchauffe la page au passage.
       Le gris clair du template reste, lui, sur les fonds sombres, où il
       donne 9,7:1. */
:root{--gris:#6B4E39}
/* Le manifeste se révèle lettre par lettre : avant révélation, le gris du
   template tombait à 2,25:1. Le ton de départ est remonté — l'effet reste
   lisible, le texte aussi. */
.manifeste__texte i{color:#9C8878}
.manifeste__texte i.lu{color:var(--encre)}

/* =========================================================================
   28. LES PAGES INTÉRIEURES PRENNENT LE LANGAGE DE L'ACCUEIL — 28/10
   Antoine : « les autres pages sont ultra simples ». Elles l'étaient : un
   titre, des blocs, un formulaire. Elles récupèrent ici le mot géant, le
   panneau, le bandeau défilant, la révélation lettre par lettre et les
   feuilles qui se recouvrent. Le contenu ne bouge pas — seule la forme.
   ========================================================================= */

/* --- Le hero d'une page intérieure --- */
.hero--page{padding-top:26px}
.hero--page .fil{margin-bottom:20px}
.hero--page__grille{max-width:1440px;margin-inline:auto;padding-inline:34px;
  display:grid;grid-template-columns:auto 1fr;gap:10px 46px;align-items:end}
.geant--page{font-size:13.7vw;text-align:left;padding-inline:0;margin:0}
.hero--page__lead{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--gris);
  max-width:40ch;padding-bottom:2.2vw}

/* --- Les feuilles : chaque section a des coins hauts arrondis et recouvre
       la précédente, comme la pile de l'accueil. --- */
.feuille-section{position:relative;border-radius:30px 30px 0 0;margin-top:-30px;
  padding-top:86px}
.feuille-section.final{padding-bottom:100px}
.feuille-section .entete{margin-bottom:40px}

/* --- Les huit inclusions : une pile de feuilles qui se recouvrent --- */
.inclus{padding-bottom:40px}
.pile-feuilles{position:relative;padding-bottom:20px}
.feuille{position:sticky;top:calc(104px + var(--i) * 13px);
  background:#fff;border-radius:18px;padding:24px 30px;margin-bottom:18px;
  display:grid;grid-template-columns:72px 1fr;gap:22px;align-items:start;
  box-shadow:0 -14px 34px -22px rgba(48,16,0,.34),0 1px 0 rgba(10,10,10,.06)}
.feuille__num{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--accent-vif);margin:0}
.feuille h3{font-size:19px;margin-bottom:7px}
.feuille p{font-size:15px;line-height:1.68;color:var(--gris-3);max-width:68ch}
.feuille code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  background:rgba(10,10,10,.06);padding:2px 6px;border-radius:5px}

@media(max-width:1060px){
  .hero--page__grille{grid-template-columns:1fr;gap:18px;align-items:start}
  .hero--page__lead{padding-bottom:0;max-width:52ch}
  .geant--page{font-size:15vw}
}
@media(max-width:760px){
  .hero--page__grille{padding-inline:16px}
  /* Chaque lettre est un <span> sans espace autour : « RÉALISATIONS » reste
     un mot, donc une seule ligne insécable qui débordait de 70 px sur un
     téléphone. On autorise la coupe n'importe où — un mot géant cassé sur
     deux lignes, c'est la façon dont le gabarit traite déjà ses titres. */
  .geant--page{font-size:17vw;line-height:.92;white-space:normal;
    overflow-wrap:anywhere}
  .feuille-section{border-radius:22px 22px 0 0;margin-top:-22px;padding-top:58px}
  .feuille{grid-template-columns:54px 1fr;gap:14px;padding:20px 22px;
    top:calc(84px + var(--i) * 9px)}
  .feuille__num{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .feuille{position:static}
}

/* =========================================================================
   29. LE LANGAGE S'ÉTEND AUX AUTRES PAGES — 28/10
   Antoine a validé la page Offre : « c'est beaucoup beaucoup mieux, fais
   pareil sur toutes les pages ». Trois choses manquaient pour y arriver sans
   recopier du CSS par page : l'empilement devient générique — les fonds et
   l'ordre de recouvrement ne sont plus attachés au nom de la section —, le
   décalage des feuilles sort de l'attribut `style`, que la CSP de production
   interdit, et deux variantes de feuille portent un prix ou une étape.
   ========================================================================= */

/* --- L'empilement, par position dans la page et non plus par nom. --- */
.feuille-section--2{z-index:2}
.feuille-section--3{z-index:3}
.feuille-section--4{z-index:4}
.feuille-section--5{z-index:5}
.feuille-section--6{z-index:6}
.feuille-section--7{z-index:7}
.feuille-section--clair{background:var(--blanc-casse)}
.feuille-section--beige{background:var(--beige)}
.feuille-section--creme{background:var(--creme)}

/* --- `style="--i:n"` tombait sous le coup de `style-src 'self'` : sans
       valeur, `top: calc(104px + var(--i) * 13px)` devenait invalide et la
       pile ne collait plus. Le décalage se lit ici. --- */
.pile-feuilles>.feuille:nth-child(1){--i:0}
.pile-feuilles>.feuille:nth-child(2){--i:1}
.pile-feuilles>.feuille:nth-child(3){--i:2}
.pile-feuilles>.feuille:nth-child(4){--i:3}
.pile-feuilles>.feuille:nth-child(5){--i:4}
.pile-feuilles>.feuille:nth-child(6){--i:5}
.pile-feuilles>.feuille:nth-child(7){--i:6}
.pile-feuilles>.feuille:nth-child(8){--i:7}

/* --- Une feuille qui porte un prix (Services), une qui porte une étape
       (À propos). --- */
.feuille--prix{grid-template-columns:72px 1fr auto;gap:22px 26px}
.feuille--prix .service__prix{align-self:start}
.feuille .jalon__quand{margin-bottom:7px}
.feuille .bouton{margin-top:16px}

/* --- Les pages légales et les culs-de-sac : le mot géant, sans bandeau ni
       révélation lettre par lettre. Un document qui se lit n'a pas besoin
       d'animation. --- */
.geant--court{font-size:min(13.7vw,170px)}
.hero--page--seul .hero--page__grille{grid-template-columns:1fr}
.hero--page--seul .hero--page__lead{max-width:62ch;padding-bottom:0;margin-top:10px}
/* Sans panneau pour encaisser le recouvrement de 30 px de la feuille suivante,
   c'est la deuxième ligne de l'accroche qui passait dessous. */
.hero--page--seul{padding-bottom:46px}

@media(max-width:760px){
  .feuille--prix{grid-template-columns:54px 1fr}
  .feuille--prix .service__prix{grid-column:2;justify-self:start}
}

/* --- Contact : la zone de déplacement a sa propre feuille, les deux moyens
       de me joindre tiennent donc sur deux colonnes, et la liste des communes
       s'aligne à gauche sous le texte plutôt qu'au centre. --- */
.coords--duo{grid-template-columns:repeat(2,1fr)}
.rappels--gauche{justify-content:flex-start;margin:26px 0 0}
.rappels--gauche span:first-child{background:#fff;color:var(--encre)}
@media(max-width:760px){.coords--duo{grid-template-columns:1fr}}

/* --- « RÉALISATIONS » a douze lettres. À 13,7 vw le mot prend toute la
       largeur du conteneur et l'accroche, dans la colonne d'à côté, n'a plus
       de place : elle débordait de 5 px à 1440. Le mot le plus long du site
       occupe donc sa propre ligne, et l'accroche passe dessous. --- */
.hero--page--large .hero--page__grille{grid-template-columns:1fr}
.hero--page--large .hero--page__lead{max-width:54ch;padding-bottom:0;margin-top:14px}
.geant--long{font-size:13vw}
@media(max-width:760px){.geant--long{font-size:15vw}}

/* --- « À PROPOS » et « RÉALISATIONS » commencent par une capitale accentuée.
       L'accent monte au-dessus de la hauteur de capitale et venait se poser
       sur la ligne « ©2026 ». Le mot descend de la hauteur de l'accent. --- */
.hero--page--accent .geant--page{margin-top:34px}
@media(max-width:760px){.hero--page--accent .geant--page{margin-top:18px}}

/* =========================================================================
   30. LA RUBRIQUE BLOG — GABARIT CLIENT — 28/10
   La formule Visibilité promet deux articles par mois sur le site du client.
   Le site vitrine en faisant cinq pages, ces articles n'avaient nulle part
   où aller. Voici la rubrique qui manquait : une page liste et un gabarit
   d'article, dans le langage du reste.

   ⚠️ Ces deux pages ne sont PAS déployées sur antoinenoel.fr : elles ne
   figurent pas dans la liste PAGES de outils/publier-v3.py. Elles se
   recopient telles quelles dans le site d'un client qui prend Visibilité.
   ========================================================================= */

/* --- La liste des articles --- */
.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.carte-article{background:#fff;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  transition:transform .4s var(--sortie),box-shadow .4s var(--sortie)}
.carte-article:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px -24px rgba(48,16,0,.45)}
.carte-article__visuel{background:var(--beige);aspect-ratio:16/10;overflow:hidden}
.carte-article__visuel img{width:100%;height:100%;object-fit:cover;display:block}
.carte-article__corps{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.carte-article__meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-size:13px;font-weight:600;color:var(--gris);margin-bottom:12px}
.carte-article__cat{color:var(--accent-texte);text-transform:uppercase;letter-spacing:.05em}
.carte-article h3{font-size:21px;line-height:1.24;letter-spacing:-.02em;margin-bottom:10px}
.carte-article h3 a{color:inherit}
.carte-article h3 a:hover{color:var(--accent-fonce)}
/* Le lien couvre toute la carte : le titre reste la cible nommée au clavier
   et au lecteur d'écran, le reste de la carte est cliquable à la souris. */
.carte-article h3 a::after{content:"";position:absolute;inset:0}
.carte-article{position:relative}
.carte-article p{font-size:15px;line-height:1.68;color:var(--gris-3);margin-bottom:16px}
.carte-article__lire{margin-top:auto;font-size:14px;font-weight:700;color:var(--accent-texte);
  display:inline-flex;align-items:center;gap:7px}

/* --- La une : le dernier article passe sur deux colonnes --- */
.carte-article--une{grid-column:span 2;flex-direction:row}
.carte-article--une .carte-article__visuel{aspect-ratio:auto;flex:1 1 52%;min-height:300px}
.carte-article--une .carte-article__corps{flex:1 1 48%;justify-content:center;padding:30px 32px}
.carte-article--une h3{font-size:clamp(24px,2.4vw,32px);line-height:1.16}
.carte-article--une p{font-size:16px}

/* --- L'article lui-même --- */
.article-tete{padding:26px 0 0}
.article-tete__meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font-size:14px;font-weight:600;color:var(--gris);margin-bottom:18px}
.article-tete__cat{background:var(--accent);color:#fff;padding:6px 14px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.05em;font-size:12px}
.article-tete h1{font-size:clamp(32px,4.6vw,62px);line-height:1.06;letter-spacing:-.035em;
  max-width:20ch}
.article-tete__chapeau{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--gris-3);
  max-width:62ch;margin-top:18px}
.article__couverture{margin-top:34px;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/7;background:var(--beige)}
.article__couverture img{width:100%;height:100%;object-fit:cover;display:block}

.article{max-width:68ch;margin-top:10px}
.article h2{font-size:clamp(22px,2.3vw,30px);letter-spacing:-.025em;line-height:1.2;
  margin:42px 0 14px}
.article h3{font-size:19px;margin:28px 0 10px}
.article p,.article li{font-size:17px;line-height:1.75;color:var(--gris-3);margin-bottom:18px}
.article ul,.article ol{padding-left:22px;margin:0 0 22px}
.article li{margin-bottom:10px}
.article a{color:var(--accent-fonce);text-decoration:underline;text-underline-offset:3px}
.article strong{color:var(--encre)}
.article__citation{margin:34px 0;padding:0 0 0 24px;border-left:4px solid var(--accent-vif)}
.article__citation p{font-size:clamp(19px,2vw,24px);line-height:1.45;font-weight:600;
  color:var(--encre);margin:0}

.article__auteur{display:flex;align-items:center;gap:16px;margin-top:46px;padding-top:26px;
  border-top:1px solid var(--ligne)}
.article__auteur img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}
.article__auteur b{display:block;font-size:16px}
.article__auteur span{font-size:14px;color:var(--gris)}
.retour{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;
  color:var(--accent-texte);margin-top:30px}
.retour svg{transform:rotate(180deg)}

@media(max-width:1060px){
  .articles{grid-template-columns:repeat(2,1fr)}
  .carte-article--une{grid-column:span 2}
}
@media(max-width:760px){
  .articles{grid-template-columns:1fr;gap:18px}
  .carte-article--une,.carte-article--une .carte-article__visuel{grid-column:auto}
  .carte-article--une{flex-direction:column}
  .carte-article--une .carte-article__visuel{aspect-ratio:16/10;min-height:0}
  .carte-article--une .carte-article__corps{padding:24px 24px 26px}
  .article__couverture{aspect-ratio:16/10}
  .article p,.article li{font-size:16px}
}

/* --- Pas de photo d'illustration dans le gabarit : un emplacement marqué
       vaut mieux qu'une image de banque qui ne correspond à rien. Antoine,
       28/10 : « soit ne mets pas de photos à certains endroits si tu trouves
       pertinent, soit mets-en une mais qui corresponde ». --- */
.emplacement{display:grid;place-items:center;background:var(--beige);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 14px,
    rgba(122,42,2,.055) 14px,rgba(122,42,2,.055) 28px)}
.emplacement .afournir{margin:0}
.article__auteur .emplacement{width:54px;height:54px;border-radius:50%;flex:none}
.article__auteur .emplacement .afournir{font-size:9px;padding:2px 5px;letter-spacing:.02em}

/* --- Deux réglages trouvés au rendu du gabarit :
       1. la couverture était le dernier élément de la tête, et la feuille
          suivante, qui remonte de 30 px, lui mangeait le bas ;
       2. `.afournir` porte `align-self:flex-start` pour les cartes de prix —
          dans un emplacement centré, ça le collait en haut. --- */
.article-tete{padding-bottom:50px}
.emplacement .afournir{align-self:center}
/* Le temps de lecture passait à la ligne sur les cartes dont la date est
   longue, et pas sur les autres : la rangée perdait son alignement. Il prend
   sa ligne partout, quelle que soit la date. */
.carte-article__meta>span:last-child{flex-basis:100%}

/* --- `.afournir` est une pastille : étirée sur une phrase entière, elle
       devenait un pavé jaune aux coins ronds, illisible sur téléphone. La
       variante bloc est une vraie note, à angles droits et ferrée à gauche. --- */
.afournir--bloc{display:block;border-radius:10px;padding:12px 16px;
  letter-spacing:0;line-height:1.55;font-size:15px;font-weight:500;max-width:62ch}
.afournir--bloc b{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:13px}
/* La flèche diagonale tournée de 180° pointait en bas à gauche : pour un
   retour, un chevron vers la gauche dit ce qu'il fait. */
.retour svg{transform:none}

/* --- Page Services : la carte « 990 € » fait 681 px, l'encart « Ou 50 € par
       mois » en fait 258. Il restait 423 px de vide à sa droite. Plutôt que
       d'allonger l'encart — Antoine voulait « rien à lire en plus » —, il
       accompagne la carte pendant qu'on la lit, comme les autres piles du
       site. Sur une colonne, le collage n'a plus d'objet. --- */
@media(min-width:1061px){
  .duo .encart{position:sticky;top:120px}
}