/* =============================================================
   Conciergerie Zaman — Feuille de style principale
   Palette : Sous-bois — lin, pierre chaude et verts de forêt
   ============================================================= */

/* ---------- 1. Tokens ---------- */
/* Ambiance « sous-bois » : lin et pierre chaude, verts de forêt profonds.
   Chaque valeur a été vérifiée pour rester au-dessus du seuil WCAG AA. */
:root{
  /* Fonds — lin et pierre chaude, très légèrement verdis */
  --paper:#FAF8F2;
  --cream:#F0EDE3;
  --cream-2:#E5E1D3;
  --sand:#D2CDBB;

  /* Vert forêt — accent principal */
  --green-800:#1F3326;
  --green-700:#2B4633;
  --green-600:#375B41;
  --green-500:#456F51;
  --green-400:#6B9376;
  --green-200:#BCD2C2;
  --green-050:#EBF2EC;

  /* Mousse — halos et reflets */
  --moss:#7EA487;

  /* Sous-bois — sections sombres */
  --forest-900:#16221A;
  --forest-850:#1B2A20;
  --forest-800:#213326;
  --forest-700:#2B4232;
  --forest-600:#3A5641;

  /* Texte */
  --ink:#1E2A21;
  --muted:#586353;
  --on-dark:#EDF2EA;
  --on-dark-muted:#C3D1C4;

  /* Lignes */
  --line:#DDD8C9;
  --line-soft:#EAE6DA;
  --line-dark:rgba(126,164,135,.28);

  /* Rayons */
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-pill:999px;

  /* Ombres — chaudes, jamais grises */
  --sh-sm:0 2px 10px rgba(31,51,38,.08);
  --sh:0 14px 36px rgba(31,51,38,.13);
  --sh-lg:0 28px 70px rgba(31,51,38,.20);
  --sh-accent:0 14px 32px rgba(43,70,51,.30);

  /* Typo */
  --font-display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Layout */
  --container:1180px;
  --gutter:clamp(20px,5vw,40px);
  --header-h:78px;

  /* Icônes de listes (masques SVG en ligne) */
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) - 1px)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}

/* ---------- 3. Typographie ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.015em;
  color:inherit;
}
h1,.h1{font-size:clamp(2.15rem,1.35rem + 3.4vw,3.85rem)}
h2,.h2{font-size:clamp(1.75rem,1.15rem + 2.5vw,2.85rem)}
h3,.h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem)}
h4,.h4{font-size:1.08rem;font-family:var(--font-body);font-weight:650;letter-spacing:0}

.lead{font-size:clamp(1.05rem,1rem + .35vw,1.24rem);line-height:1.65;color:var(--muted)}
.section--dark .lead{color:var(--on-dark-muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-700);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--green-500);flex:none}
.section--dark .eyebrow{color:var(--green-400)}

.accent{color:var(--green-600)}
.section--dark .accent{color:var(--green-400)}

/* Souligné à la main */
.underline-accent{
  background-image:linear-gradient(transparent 62%,rgba(107,147,118,.38) 62%);
  background-repeat:no-repeat;padding:0 .06em;
}

/* ---------- 4. Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:840px}
.section{padding-block:clamp(58px,6.4vw,104px)}
.section--tight{padding-block:clamp(44px,5vw,72px)}
.section--cream{background:var(--cream)}
.section--cream2{background:var(--cream-2)}
.section--dark{background:var(--forest-900);color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#F4F9F2}
.section--dark p{color:var(--on-dark-muted)}

.section-head{max-width:760px;margin-bottom:clamp(26px,2.9vw,44px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:16px}

.grid{display:grid;gap:clamp(18px,2.2vw,28px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r-pill);
  font-weight:600;font-size:.98rem;letter-spacing:.005em;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s,border-color .25s,color .25s;
  text-align:center;
}
.btn svg{width:17px;height:17px;flex:none}
.btn--accent{background:linear-gradient(135deg,var(--green-600),var(--green-800));color:#F4F9F2;box-shadow:var(--sh-accent)}
.btn--accent:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(31,51,38,.34)}
.btn--dark{background:var(--forest-900);color:#F4F9F2}
.btn--dark:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.btn--outline{border:1.5px solid var(--line);color:var(--ink);background:var(--paper)}
.btn--outline:hover{border-color:var(--green-500);color:var(--green-700);background:var(--green-050);transform:translateY(-3px)}
.btn--ghost-light{border:1.5px solid rgba(237,242,234,.3);color:#F4F9F2}
.btn--ghost-light:hover{border-color:var(--green-400);color:var(--green-200);background:rgba(107,147,118,.10);transform:translateY(-3px)}
.btn--sm{padding:11px 22px;font-size:.9rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.section-head--center .btn-row{justify-content:center}

/* Sur fond clair, le bouton fantôme doit rester lisible */
.hero .btn--ghost-light,.page-hero .btn--ghost-light{border-color:var(--sand);color:var(--green-800);background:rgba(250,248,242,.75)}
.hero .btn--ghost-light:hover,.page-hero .btn--ghost-light:hover{border-color:var(--green-500);color:var(--green-800);background:var(--green-050)}

/* Lien fléché */
.arrow-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.95rem;color:var(--green-700);
  border-bottom:1px solid rgba(69,111,81,.45);padding-bottom:3px;
  transition:gap .25s,color .25s,border-color .25s;
}
.arrow-link:hover{gap:14px;color:var(--green-600);border-color:var(--green-500)}
.section--dark .arrow-link{color:var(--green-400);border-color:rgba(107,147,118,.4)}
.section--dark .arrow-link:hover{color:var(--green-200)}

/* ---------- 6. En-tête ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--green-600);color:#F4F9F2;padding:12px 20px;
  border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip-link:focus{left:0}

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s,box-shadow .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-solid{
  background:rgba(250,248,242,.93);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:var(--sh-sm);
}

.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__mark{width:40px;height:40px;flex:none;filter:drop-shadow(0 3px 9px rgba(31,51,38,.34));transition:transform .5s cubic-bezier(.77,0,.175,1),filter .5s}
.brand:hover .brand__mark{transform:translateY(-1px) rotate(-2deg);filter:drop-shadow(0 6px 14px rgba(31,51,38,.38))}
.site-footer .brand__mark{filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.brand__text{display:flex;flex-direction:column;line-height:1.06}
.brand__name{font-family:var(--font-display);font-size:1.14rem;font-weight:400;color:var(--ink);letter-spacing:.005em}
.brand__tag{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-700);font-weight:600}

/* Rubriques du menu — soulignement animé */
.nav{display:flex;align-items:center;gap:2px}
/* Rubriques en capitales espacées, à la manière des sites de référence */
.nav a{
  position:relative;
  padding:9px 11px;border-radius:var(--r-pill);
  font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--forest-700);transition:color .22s,background .22s;
}
.nav a::after{
  content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:2px;
  background:var(--green-500);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.77,0,.175,1);
}
.nav a:hover{color:var(--green-800)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"],.nav a.is-current{color:var(--green-700);font-weight:600}
.nav a[aria-current="page"]::after,.nav a.is-current::after{transform:scaleX(1)}
.nav a.btn::after{display:none}
/* Le bouton du menu mobile doit garder son texte clair :
   sans cette règle, « .nav a » l'emporterait en spécificité. */
.nav a.btn--accent,.nav a.btn--accent:hover{color:#F4F9F2}
.header-cta{display:flex;align-items:center;gap:12px;flex:none}

.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:transform .28s}
.burger span::before{top:-7px}
.burger span::after{top:7px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* Le bouton du menu garde sa casse normale */
.nav a.btn{text-transform:none;letter-spacing:.005em;font-size:.9rem}

@media (max-width:1080px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:var(--header-h) 0 0 0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--cream);padding:26px var(--gutter) 40px;
    transform:translateX(100%);transition:transform .5s cubic-bezier(.77,0,.175,1);
    overflow-y:auto;
  }
  body.nav-open .nav{transform:translateX(0)}
  .nav a{padding:17px 4px;font-size:.92rem;letter-spacing:.14em;border-bottom:1px solid var(--line);border-radius:0}
  .nav a::after{left:4px;right:auto;width:34px;bottom:10px}
  .nav .btn{margin-top:24px;border-radius:var(--r-pill);border-bottom:0}
  .header-cta .btn{display:none}
}
@media (min-width:1081px){.nav .btn{display:none}}
body.nav-open{overflow:hidden}

/* ---------- 7. Héros — clair et lumineux ---------- */
/* Le haut de page : la photographie en fond plein cadre, le texte par-dessus.
   Deux points de métier :
   — le voile est un dégradé, jamais un rectangle : un bord franc laisserait
     une couture verticale en plein milieu de l'image ;
   — la photo est désaturée et légèrement assombrie avant le voile, sinon ses
     couleurs propres se battent avec le vert du site. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--forest-900);
  min-height:clamp(460px,74vh,660px);
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + clamp(30px,4vw,56px));
  padding-bottom:clamp(40px,5vw,72px);
}
.hero__fond{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.42) brightness(.94);
  transform:scale(1.1);transform-origin:58% 46%;
  animation:czHeroZoom 12s cubic-bezier(.25,.6,.3,1) forwards;
}
.hero__voile{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(16,26,20,.92) 0%,
    rgba(16,26,20,.74) 34%,
    rgba(16,26,20,.34) 66%,
    rgba(16,26,20,.12) 100%);
}
.hero .container{position:relative}
.hero__txt{max-width:660px}

.hero h1{color:#F4F9F2;margin-bottom:20px}
.hero .accent{color:var(--green-400)}
.hero .lead{max-width:54ch;color:#C3D1C4}

/* Les lignes montent l'une après l'autre à l'arrivée. */
.js .hero__txt > *{opacity:0;animation:czHeroMonte .85s cubic-bezier(.2,.7,.3,1) forwards}
.js .hero__txt > *:nth-child(1){animation-delay:.15s}
.js .hero__txt > *:nth-child(2){animation-delay:.3s}
.js .hero__txt > *:nth-child(3){animation-delay:.45s}
.js .hero__txt > *:nth-child(4){animation-delay:.6s}
.js .hero__txt > *:nth-child(5){animation-delay:.75s}
@keyframes czHeroZoom{to{transform:scale(1)}}
@keyframes czHeroMonte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 11px;border-radius:var(--r-pill);
  background:rgba(237,242,234,.10);border:1px solid rgba(237,242,234,.26);
  font-size:.81rem;font-weight:600;color:#E4EDE2;margin-bottom:24px;
}
.hero__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green-400);box-shadow:0 0 0 4px rgba(107,147,118,.26);flex:none}

/* Sur un fond sombre, le bouton principal s'inverse : c'est lui qui doit
   sauter aux yeux, pas se fondre dans le vert. */
.hero .btn--accent{background:#F4F9F2;color:var(--forest-900);box-shadow:none}
.hero .btn--accent:hover{background:#FFFFFF;transform:none}

.hero__points{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:32px}
.hero__points li{display:flex;align-items:center;gap:9px;font-size:.93rem;color:#BCCDBE}
.hero__points li::before{
  content:"";width:17px;height:17px;flex:none;
  background-color:var(--green-400);
  -webkit-mask:var(--icon-check) center/contain no-repeat;
  mask:var(--icon-check) center/contain no-repeat;
}

/* Bandeau de réassurance — sable chaud */
.trustbar{background:var(--cream-2);border-block:1px solid var(--line);padding-block:22px}
.trustbar ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(22px,4vw,52px)}
.trustbar li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--forest-700);font-weight:500}
.trustbar svg{width:18px;height:18px;color:var(--green-600);flex:none}

/* ---------- 8. Cartes ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s,background .3s;
  height:100%;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--green-200)}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);font-size:.97rem}
.card--dark{background:rgba(244,249,242,.05);border-color:var(--line-dark)}
.card--dark:hover{border-color:rgba(107,147,118,.45);background:rgba(244,249,242,.08);box-shadow:none}
.card--dark p{color:var(--on-dark-muted)}
.card--flat:hover{transform:none;box-shadow:none;border-color:var(--line)}

.icon-badge{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--green-050);border:1px solid var(--green-200);color:var(--green-700);
  margin-bottom:20px;
}
.icon-badge svg{width:24px;height:24px}
.card--dark .icon-badge{background:rgba(107,147,118,.12);border-color:rgba(107,147,118,.3);color:var(--green-400)}

/* Listes */
.check-list{display:flex;flex-direction:column;gap:13px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem;color:var(--muted)}
.check-list li::before{
  content:"";width:19px;height:19px;flex:none;margin-top:4px;
  background-color:var(--green-600);
  -webkit-mask:var(--icon-check) center/contain no-repeat;
  mask:var(--icon-check) center/contain no-repeat;
}
.section--dark .check-list li{color:var(--on-dark-muted)}
.section--dark .check-list li::before,
.compare__col--good .check-list li::before{background-color:var(--green-400)}

.cross-list{display:flex;flex-direction:column;gap:13px}
.cross-list li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem;color:var(--muted)}
.cross-list li::before{
  content:"";width:19px;height:19px;flex:none;margin-top:4px;
  background-color:#9C4A38;
  -webkit-mask:var(--icon-cross) center/contain no-repeat;
  mask:var(--icon-cross) center/contain no-repeat;
}

/* Avant / Après */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,26px)}
.compare__col{border-radius:var(--r-lg);padding:clamp(24px,2.6vw,34px);border:1px solid var(--line);background:var(--paper)}
.compare__col--bad{background:#F4EBE2;border-color:#E4D5C6}
.compare__col--good{background:linear-gradient(165deg,var(--forest-800),var(--forest-900));border-color:rgba(107,147,118,.32);color:var(--on-dark)}
.compare__col--good h3{color:#F4F9F2}
.compare__col--good .check-list li{color:var(--on-dark-muted)}
.compare__tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-pill);margin-bottom:16px;
}
.compare__col--bad .compare__tag{background:#E6D6C7;color:#834530}
.compare__col--good .compare__tag{background:rgba(107,147,118,.18);color:var(--green-200)}

/* ---------- 9. Étapes ---------- */
.steps{display:grid;gap:clamp(20px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{position:relative;padding-top:8px}
.step__num{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.28rem;font-weight:400;
  border:1px solid var(--green-500);color:var(--green-700);background:var(--paper);
  margin-bottom:20px;position:relative;z-index:1;
}
.section--dark .step__num{background:var(--forest-900);color:var(--green-400)}
.step h3{margin-bottom:10px}
.step p{color:var(--muted);font-size:.96rem}
.section--dark .step p{color:var(--on-dark-muted)}
@media (min-width:940px){
  .step::before{
    content:"";position:absolute;top:35px;left:60px;right:-24px;height:1px;
    background:linear-gradient(90deg,var(--green-200),transparent);
  }
  .step:last-child::before{display:none}
  .section--dark .step::before{background:linear-gradient(90deg,rgba(107,147,118,.45),transparent)}
}

/* ---------- 10. Tarifs ---------- */
.pricing{display:grid;gap:clamp(20px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(285px,1fr));align-items:stretch}
/* Une seule formule : la carte ne doit pas s'étaler sur toute la largeur.
   On la centre et on met la liste sur deux colonnes — sinon douze puces
   à la file font une carte interminable. */
.pricing--une{grid-template-columns:minmax(0,660px);justify-content:center}
@media (min-width:640px){
  .check-list--deux{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
}
.plan{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,36px);position:relative;height:100%;
  display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.plan--featured{border-color:var(--green-500);box-shadow:var(--sh);background:linear-gradient(180deg,var(--green-050),var(--paper) 34%)}
.plan__badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--green-600),var(--green-800));color:#F4F9F2;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 18px;border-radius:var(--r-pill);white-space:nowrap;
}
.plan__name{font-family:var(--font-display);font-size:1.42rem;font-weight:400;margin-bottom:6px}
.plan__desc{font-size:.92rem;color:var(--muted);min-height:46px}
.plan__price{display:flex;align-items:baseline;gap:6px;margin:20px 0 4px}
.plan__price strong{font-family:var(--font-display);font-size:2.85rem;font-weight:400;line-height:1;color:var(--green-700)}
.plan__price span{font-size:.95rem;color:var(--muted)}
.plan__note{font-size:.84rem;color:var(--muted);margin-bottom:24px}
.plan .check-list{margin-bottom:28px;flex:1}

/* ---------- 11. Engagements ---------- */
.pledges{display:grid;gap:clamp(18px,2.2vw,26px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pledge{text-align:center;padding:30px 18px;border-radius:var(--r);border:1px solid var(--line-dark);background:rgba(244,249,242,.05)}
.pledge strong{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,1.4rem + 1.7vw,2.6rem);color:var(--green-400);line-height:1;margin-bottom:10px}
.pledge span{font-size:.92rem;color:var(--on-dark-muted);display:block}

/* ---------- 12. FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.faq details[open]{border-color:var(--green-200);box-shadow:var(--sh-sm)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 58px 20px 24px;position:relative;
  font-weight:600;font-size:1.02rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:26px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--green-600);border-bottom:2px solid var(--green-600);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--green-700)}
.faq__body{padding:0 24px 22px;color:var(--muted);font-size:.98rem}
.faq__body p + p{margin-top:12px}
.faq__body ul{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.faq__body ul li{display:flex;gap:10px}
.faq__body ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-500);flex:none;margin-top:10px}

/* ---------- 13. Formulaire ---------- */
.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,42px);box-shadow:var(--sh);
}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:.88rem;font-weight:600;color:var(--ink)}
.field .req{color:#9C4A38}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--cream);transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--green-500);background:var(--paper);
  box-shadow:0 0 0 4px rgba(69,111,81,.16);
}
.field textarea{resize:vertical;min-height:120px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
.form-consent{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--muted);margin-bottom:22px}
.form-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--green-600)}
.form-consent a{color:var(--green-700);text-decoration:underline}
.form-note{font-size:.82rem;color:var(--muted);margin-top:14px;text-align:center}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Intégration Tally */
.tally-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh)}
.tally-wrap iframe{width:100%;border:0;display:block;min-height:520px;border-radius:var(--r-sm)}

/* ---------- 14. CTA final ---------- */
.cta-band{
  background:
    radial-gradient(720px 380px at 86% 4%,rgba(126,164,135,.32),transparent 62%),
    radial-gradient(600px 320px at 8% 100%,rgba(69,111,81,.20),transparent 64%),
    linear-gradient(160deg,var(--forest-800),var(--forest-900));
  color:var(--on-dark);border-radius:var(--r-lg);
  padding:clamp(38px,5vw,72px);text-align:center;
  border:1px solid var(--line-dark);
}
.cta-band h2{color:#F4F9F2;margin-bottom:16px}
.cta-band p{color:var(--on-dark-muted);max-width:60ch;margin-inline:auto}
.cta-band .eyebrow{color:var(--green-400)}
.cta-band .btn-row{justify-content:center}

/* ---------- 15. Fil d'ariane + en-tête de page ---------- */
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:.83rem;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"\203A";color:var(--green-500)}
.crumbs a:hover{color:var(--green-700)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

.page-hero{
  background:
    radial-gradient(860px 440px at 86% -14%,rgba(126,164,135,.36),transparent 62%),
    linear-gradient(165deg,var(--paper),var(--cream) 56%,var(--cream-2));
  color:var(--ink);padding-top:calc(var(--header-h) + clamp(30px,3.6vw,50px));
  padding-bottom:clamp(34px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.page-hero h1{color:var(--ink);margin-bottom:18px}
.page-hero .lead{max-width:64ch;color:var(--muted)}
.page-hero .crumbs{margin-bottom:26px}

/* ---------- 16. Blog ---------- */
.post-grid{display:grid;gap:clamp(20px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.post-card{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:0}
.post-card__thumb{aspect-ratio:16/9;background:linear-gradient(150deg,var(--cream-2),var(--sand));position:relative;overflow:hidden}
.post-card__thumb svg,.post-card__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-card__body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.post-card__meta{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700);font-weight:600;margin-bottom:12px}
.post-card h3,.post-card h2{font-size:1.2rem;margin-bottom:10px}
.post-card p{flex:1;margin-bottom:18px}

.prose{font-size:1.06rem;line-height:1.8;color:#2C3A2F}
.prose > * + *{margin-top:22px}
.prose h2{margin-top:54px}
.prose h3{margin-top:36px}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:11px}
.prose ul li{display:flex;gap:12px;align-items:flex-start}
.prose ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-500);flex:none;margin-top:11px}
.prose ol{counter-reset:li}
.prose ol li{display:flex;gap:14px;align-items:flex-start;counter-increment:li}
.prose ol li::before{content:counter(li);font-family:var(--font-display);font-weight:400;color:var(--green-600);flex:none;min-width:20px}
.prose a{color:var(--green-700);border-bottom:1px solid rgba(69,111,81,.45);font-weight:500}
.prose a:hover{border-color:var(--green-600)}
.prose strong{color:var(--ink);font-weight:650}
.prose blockquote{
  border-left:3px solid var(--green-500);padding:6px 0 6px 24px;
  font-family:var(--font-display);font-size:1.2rem;line-height:1.55;color:var(--ink);
}
.prose table{margin-block:8px;font-size:.95rem}
.prose th,.prose td{padding:13px 16px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{background:var(--cream-2);font-weight:650;font-size:.9rem}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.callout{
  background:var(--green-050);border:1px solid var(--green-200);border-left:3px solid var(--green-500);
  border-radius:var(--r-sm);padding:22px 26px;font-size:.99rem;color:var(--muted);
}
.callout strong{display:block;margin-bottom:6px;color:var(--green-800)}

.toc{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px}
.toc h2{font-size:1rem;font-family:var(--font-body);font-weight:650;margin:0 0 14px;letter-spacing:0}
.toc ol{display:flex;flex-direction:column;gap:9px;counter-reset:toc;font-size:.95rem}
.toc li{counter-increment:toc;display:flex;gap:8px}
.toc li::before{content:counter(toc) ".";color:var(--green-600);font-weight:600;flex:none}
.toc a{color:var(--muted)}
.toc a:hover{color:var(--green-700)}

.post-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.86rem;color:var(--muted);margin-top:22px}
.post-meta span{display:flex;align-items:center;gap:8px}
.post-meta svg{width:15px;height:15px;color:var(--green-600)}

/* Retour depuis un article */
.post-nav{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid var(--line);
}
.post-nav a{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:.95rem;color:var(--green-700);
  padding:11px 20px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--paper);
  transition:border-color .25s,background .25s,color .25s,transform .25s,gap .25s;
}
.post-nav a:hover{border-color:var(--green-500);background:var(--green-050);transform:translateY(-2px)}
.post-nav a svg{width:16px;height:16px;flex:none}
.post-nav a:first-child:hover{gap:14px}

/* ---------- 17. Logements ---------- */
.listing{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper);height:100%;display:flex;flex-direction:column}
.listing__img{aspect-ratio:4/3;background:linear-gradient(150deg,var(--cream-2),var(--sand));position:relative}
.listing__img svg,.listing__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.listing__soon{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:8px;
  background:rgba(22,34,26,.70);color:#F4F9F2;padding:20px;
}
.listing__soon strong{font-family:var(--font-display);font-size:1.3rem}
.listing__soon span{font-size:.85rem;color:var(--on-dark-muted)}
.listing__body{padding:22px 24px 26px;flex:1}
.listing__body h3{font-size:1.14rem;margin-bottom:6px}
.listing__body p{font-size:.92rem;color:var(--muted)}

/* ---------- 18. Zones ---------- */
.zone-cloud{display:flex;flex-wrap:wrap;gap:10px}
.zone-cloud a,.zone-cloud span{
  display:inline-block;padding:9px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper);font-size:.9rem;font-weight:500;color:var(--ink);
  transition:border-color .2s,color .2s,transform .2s,background .2s;
}
.zone-cloud a:hover{border-color:var(--green-500);color:var(--green-700);transform:translateY(-2px);background:var(--green-050)}
.section--dark .zone-cloud a,.section--dark .zone-cloud span{background:rgba(244,249,242,.05);border-color:var(--line-dark);color:var(--on-dark)}
.section--dark .zone-cloud a:hover{border-color:var(--green-400);color:var(--green-200);background:rgba(107,147,118,.12)}

/* ---------- 19. Pied de page ---------- */
.site-footer{background:var(--forest-900);color:var(--on-dark-muted);padding-top:clamp(48px,6vw,76px);border-top:1px solid var(--line-dark)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,3.5vw,48px)}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer h3{font-family:var(--font-body);font-size:.79rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-400);font-weight:650;margin-bottom:18px}
.site-footer ul{display:flex;flex-direction:column;gap:11px}
.site-footer a{font-size:.93rem;transition:color .2s}
.site-footer a:hover{color:var(--green-200)}
.site-footer p{font-size:.93rem;line-height:1.7}
.site-footer .brand__name{color:#F4F9F2}
.site-footer .brand__tag{color:var(--green-400)}
.footer-brand .brand{margin-bottom:18px}
.footer-contact li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem}
.footer-contact svg{width:17px;height:17px;color:var(--green-400);flex:none;margin-top:4px}
.footer-bottom{
  margin-top:clamp(38px,4.5vw,58px);padding-block:24px;border-top:1px solid rgba(237,242,234,.12);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;font-size:.85rem;
}
.footer-bottom ul{flex-direction:row;flex-wrap:wrap;gap:20px}

/* Bouton flottant mobile */
.float-cta{
  position:fixed;right:16px;bottom:16px;z-index:900;
  display:none;align-items:center;gap:9px;
  padding:14px 22px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--green-600),var(--green-800));color:#F4F9F2;
  font-weight:650;font-size:.94rem;box-shadow:var(--sh-accent);
}
.float-cta svg{width:17px;height:17px}
@media (max-width:768px){.float-cta{display:inline-flex}.site-footer{padding-bottom:78px}}

/* ---------- 19 bis. Tableaux de données ---------- */
.data-table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--paper)}
.data-table caption{caption-side:bottom;padding-top:14px;font-size:.82rem;color:var(--muted);text-align:left}
.data-table th,.data-table td{padding:14px 16px;border:1px solid var(--line);text-align:left;vertical-align:top}
.data-table thead th{background:var(--forest-800);color:#F4F9F2;font-weight:600;font-size:.88rem;border-color:var(--forest-700)}
.data-table tbody th{background:var(--cream-2);font-weight:600;font-size:.92rem}
.data-table tfoot td,.data-table tfoot th{background:var(--green-050);font-weight:700;color:var(--ink);border-color:var(--green-200)}
.data-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.section--dark .data-table{background:rgba(244,249,242,.05);color:var(--on-dark)}
.section--dark .data-table th,.section--dark .data-table td{border-color:var(--line-dark)}
.section--dark .data-table tbody th{background:rgba(244,249,242,.07);color:#F4F9F2}
.section--dark .data-table tfoot td,.section--dark .data-table tfoot th{background:rgba(107,147,118,.16);color:#F4F9F2}

/* ---------- 20. Utilitaires ---------- */
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:22px}.mt-3{margin-top:34px}.mt-4{margin-top:48px}
.mb-2{margin-bottom:22px}.mb-3{margin-bottom:34px}
.maxw-60{max-width:60ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.divider{height:1px;background:var(--line);border:0;margin-block:clamp(34px,4vw,54px)}
.section--dark .divider{background:var(--line-dark)}

/* ---------- 21. Apparition des sections au défilement ---------- */
/* Chaque bloc monte et se révèle quand il entre dans l'écran. La courbe est
   lente au départ puis se pose en douceur : c'est ce qui donne l'impression
   de calme. Sans JavaScript, rien n'est jamais masqué. */
.js [data-reveal]{
  opacity:0;transform:translateY(34px);
  transition:opacity .95s cubic-bezier(.77,0,.175,1),
             transform .95s cubic-bezier(.77,0,.175,1),
             filter .95s cubic-bezier(.77,0,.175,1),
             clip-path 1.05s cubic-bezier(.77,0,.175,1);
  will-change:opacity,transform;
}
.js [data-reveal].is-in{opacity:1;transform:none;will-change:auto}

/* Les variantes de mouvement. Chaque famille de blocs reçoit celle qui lui
   convient — c'est main.js qui les distribue, aucun HTML n'est à modifier.
   L'ensemble reste discret : on doit sentir que la page respire, pas
   qu'elle s'agite. */

/* Glissement latéral — deux colonnes qui se répondent, les titres d'article. */
.js [data-reveal="left"]{transform:translateX(-40px)}
.js [data-reveal="right"]{transform:translateX(40px)}

/* Montée courte et rapide — les petits éléments qui se suivent en liste. */
.js [data-reveal="calme"]{transform:translateY(18px);transition-duration:.7s}

/* Descente — l'élément vient du haut, à contre-courant du reste. */
.js [data-reveal="descend"]{transform:translateY(-26px)}

/* Grossissement — le bloc se pose vers l'avant, sans glisser. */
.js [data-reveal="zoom"]{transform:scale(.93);transition-duration:1.05s}

/* Mise au point — l'image sort du flou en montant légèrement. */
.js [data-reveal="flou"]{transform:translateY(20px);filter:blur(10px)}
.js [data-reveal="flou"].is-in{filter:blur(0)}

/* Bascule — la carte se redresse, pivot sur son bord bas. */
.js [data-reveal="bascule"]{
  transform:perspective(900px) rotateX(10deg) translateY(24px);
  transform-origin:50% 100%;
}

/* Volet — le contenu se découvre de la gauche vers la droite. Les bords
   sont débordés de 4 % pour ne pas rogner les ombres portées. */
.js [data-reveal="volet"]{transform:none;clip-path:inset(-4% 100% -4% -4%)}
.js [data-reveal="volet"].is-in{clip-path:inset(-4% -4% -4% -4%)}

/* Les titres de section se dévoilent par le bas, comme un rideau qui se lève. */
.js [data-reveal-titre]{
  clip-path:inset(0 0 108% 0);
  transition:clip-path 1.05s cubic-bezier(.77,0,.175,1);
}
.js [data-reveal-titre].is-in{clip-path:inset(0 0 -12% 0)}

/* Le filet du sur-titre se déploie quand son bloc apparaît. Il n'est mis à
   zéro que dans un bloc animé : ailleurs, il s'affiche normalement. */
.js [data-reveal] .eyebrow::before{
  transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.77,0,.175,1) .15s;
}
.js [data-reveal].is-in .eyebrow::before{transform:scaleX(1)}

:focus-visible{outline:2px solid var(--green-600);outline-offset:3px;border-radius:3px}

/* ---------- 22. Arrivée sur la page ---------- */
.js body{animation:czPageIn .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes czPageIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ---------- 23. Introduction plein écran ---------- */
/* Affichée uniquement sur l'accueil, une seule fois par visite.
   Masquée par défaut : sans JavaScript, elle n'apparaît jamais et ne peut
   donc pas bloquer le site. */
.intro{display:none}

.cz-intro-on .intro{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:9999;
  background:
    radial-gradient(760px 520px at 50% 34%,rgba(126,164,135,.20),transparent 66%),
    linear-gradient(165deg,var(--forest-800),var(--forest-900) 62%,#0D1611);
  animation:czIntroSortie .9s cubic-bezier(.77,0,.175,1) 4.05s forwards;
}
/* Filet de sécurité : même si le script échoue, le voile disparaît seul. */
.cz-intro-on .intro::after{content:"";position:absolute;inset:0;pointer-events:none}
.intro.is-done{opacity:0;visibility:hidden;pointer-events:none}

.intro__inner{display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 24px;text-align:center}

/* Le nom s'écrit à la main, dans la typographie du site.

   Le dévoilement se fait DU HAUT VERS LE BAS, lettre par lettre : c'est le
   geste de la plume qui descend pour former le trait, et non un rideau qui
   glisse sur le côté. Une pointe lumineuse accompagne la descente.

   La cadence est irrégulière : chaque lettre porte son propre instant de
   départ dans --t, calculé d'après sa largeur — un « m » demande plus de
   temps qu'un « i » — avec une variation d'une lettre à l'autre et une
   respiration entre les deux mots. */
.intro__name{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0}
.intro__word{
  display:block;padding-bottom:.1em;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.9rem,1.1rem + 3.4vw,3.4rem);line-height:1.1;letter-spacing:-.015em;
  color:#F6F4EC;
}
.intro__word--accent{color:var(--green-400)}

.intro__letter{
  position:relative;display:inline-block;opacity:0;
  animation:czIntroLettre .34s linear forwards;
  animation-delay:var(--t);
}

/* La plume : le point d'encre qui descend le long de la lettre. */
.intro__letter::after{
  content:"";position:absolute;left:44%;top:0;width:2px;height:.16em;
  border-radius:2px;opacity:0;
  background:linear-gradient(180deg,transparent,#FFF4D8,transparent);
  box-shadow:0 0 9px 2px rgba(255,238,196,.5);
  animation:czPlume .34s linear forwards;
  animation-delay:var(--t);
}

/* Le logo n'arrive qu'une fois le nom écrit : il signe, il n'annonce pas. */
.intro__mark{
  width:clamp(64px,9vw,96px);height:auto;
  opacity:0;transform:scale(.82) translateY(10px);
  animation:czIntroMarque .64s cubic-bezier(.2,.7,.3,1) 2.9s forwards;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));
}

.intro__rule{
  display:block;height:1px;width:0;background:var(--green-400);opacity:.75;
  animation:czIntroFilet .6s cubic-bezier(.77,0,.175,1) 3.18s forwards;
}

/* Le trait descend : la lettre se découvre par le haut, comme sous
   la plume. Les débords évitent de rogner accents et jambages. */
@keyframes czIntroLettre{
  0%  {opacity:1;clip-path:inset(-14% -8% 100% -8%)}
  100%{opacity:1;clip-path:inset(-14% -8% -14% -8%)}
}
@keyframes czPlume{
  0%  {top:0;    opacity:0}
  14% {opacity:.9}
  86% {opacity:.9}
  100%{top:100%; opacity:0}
}
@keyframes czIntroMarque{to{opacity:1;transform:none}}
@keyframes czIntroFilet{to{width:clamp(88px,14vw,150px)}}
@keyframes czIntroSortie{
  to{opacity:0;visibility:hidden;transform:translateY(-2%);pointer-events:none}
}


/* ---------- 25. L'accueil : une rubrique = un écran ---------- */
/* Cliquer une rubrique du menu doit donner un écran complet et un seul :
   toute la section visible, et jamais la suivante qui dépasse en bas.

   Deux forces opposées, il faut les deux :
   — un plancher, pour que les sections courtes (Zones, À propos) remplissent
     l'écran au lieu de laisser apparaître la suivante ;
   — un plafond de contenu, pour que les sections riches (Services, Tarifs)
     tiennent sans être coupées.

   Le plafond est obtenu en mesurant tout en « vh » plutôt qu'en pixels :
   marges, titres et cartes se resserrent d'eux-mêmes quand l'écran est
   court. Un portable 1440×800 n'a que 722 px sous l'en-tête, contre 880
   sur un grand écran — sans cela, les sections y débordaient de 150 px.

   Tout est limité à l'accueil : les pages de détail gardent leur
   respiration, et c'est là que vivent les textes complets. */
@media (min-width:941px){
  body[data-page="home"] .section{
    min-height:calc(100vh - var(--header-h));
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(9px,2.5vh,36px);
  }
  body[data-page="home"] .section-head{margin-bottom:clamp(7px,1.9vh,20px)}
  body[data-page="home"] .section-head h2,body[data-page="home"] .split h2{font-size:clamp(1.44rem,4vh,2.85rem)}
  /* Les marges utilitaires — mt-2, mt-3, la rangée de boutons — pesaient
     110 px à elles seules dans « Logements ». Elles suivent la hauteur
     d'écran comme le reste. */
  body[data-page="home"] .mt-2{margin-top:clamp(9px,1.9vh,22px)}
  body[data-page="home"] .mt-3{margin-top:clamp(12px,2.5vh,34px)}
  body[data-page="home"] .btn-row{margin-top:clamp(12px,2.5vh,32px)}
  body[data-page="home"] .check-list{gap:clamp(5px,1.1vh,12px)}
  body[data-page="home"] #conseils .section-head + .post-grid + .section-head{margin-top:clamp(14px,3vh,48px)}
  body[data-page="home"] .section-head .lead{font-size:clamp(.82rem,1.8vh,1rem);line-height:1.45}
  body[data-page="home"] .eyebrow{margin-bottom:clamp(8px,1.5vh,18px)}
  body[data-page="home"] .grid{gap:clamp(8px,1.7vh,20px)}
  body[data-page="home"] .pricing{gap:clamp(8px,1.7vh,20px)}

  /* Cartes de services : deux rangées de trois qui tiennent à l'écran. */
  body[data-page="home"] #services .card{padding:clamp(10px,2.1vh,22px) clamp(13px,2.2vh,22px)}
  body[data-page="home"] #services .card h3{font-size:clamp(.98rem,2.1vh,1.16rem);margin-bottom:clamp(4px,.9vh,8px)}
  body[data-page="home"] #services .card p{font-size:clamp(.84rem,1.75vh,.94rem);line-height:1.45}
  body[data-page="home"] #services .icon-badge{
    width:clamp(28px,4vh,38px);height:clamp(28px,4vh,38px);
    margin-bottom:clamp(7px,1.5vh,14px);
  }

  /* Cartes de tarifs : le bouton doit rester visible, c'est lui qu'on vient
     chercher. Tout le reste se resserre autour. */
  body[data-page="home"] .plan{padding:clamp(9px,2vh,24px) clamp(13px,2.3vh,24px)}
  body[data-page="home"] .plan__name{font-size:clamp(1.06rem,2.4vh,1.42rem)}
  body[data-page="home"] .plan__desc{font-size:clamp(.81rem,1.7vh,.94rem);line-height:1.32}
  body[data-page="home"] .plan__price{margin-top:clamp(5px,1.1vh,12px);margin-bottom:2px}
  body[data-page="home"] .plan__price strong{font-size:clamp(1.7rem,4.2vh,2.85rem)}
  body[data-page="home"] .plan__price span{font-size:clamp(.82rem,1.7vh,.95rem)}
  body[data-page="home"] .plan__note{font-size:clamp(.74rem,1.5vh,.84rem)}
  body[data-page="home"] .plan__note{margin-bottom:clamp(8px,1.6vh,14px)}
  body[data-page="home"] .plan .check-list{gap:clamp(3px,.8vh,9px);margin-bottom:clamp(4px,1.4vh,18px)}
  body[data-page="home"] .plan .check-list li{font-size:clamp(.8rem,1.6vh,.93rem);line-height:1.22}
  body[data-page="home"] .plan .btn{padding:clamp(7px,1.4vh,13px) 22px}
  body[data-page="home"] .section .form-note{margin-top:clamp(7px,1.4vh,26px);font-size:clamp(.77rem,1.55vh,.86rem)}

  /* Le reste des blocs de l'accueil, au même régime. */
  body[data-page="home"] .listing{padding:clamp(10px,2.1vh,22px)}
  /* La vignette 16/9 pesait 236 px de haut à elle seule : sur un écran
     court, c'est elle qui faisait déborder « Conseils ». Plafonnée à la
     hauteur de fenêtre, elle garde son cadrage et rend la place au texte. */
  body[data-page="home"] .post-card__thumb{flex:none;max-height:clamp(100px,26vh,240px)}
  /* Sous 780 px de fenêtre — un portable 1366×768 barre d'outils comprise —
     la vignette passe au régime sec. Le palier est volontaire : au-dessus,
     l'image garde exactement le cadrage validé. */
  @media (max-height:780px){
    body[data-page="home"] .post-card__thumb{max-height:clamp(96px,20vh,240px)}
  }
  body[data-page="home"] .post-card__body{padding:clamp(8px,1.6vh,16px) clamp(11px,1.8vh,18px) clamp(9px,1.7vh,18px)}
  body[data-page="home"] #conseils .post-card__body p{font-size:clamp(.83rem,1.7vh,.93rem);line-height:1.45}
  body[data-page="home"] .zone-cloud a{padding:clamp(6px,1.1vh,9px) clamp(11px,1.7vh,15px)}
  body[data-page="home"] .split{gap:clamp(14px,3vh,64px)}
}


/* ---------- 26. Moins de décor, plus de métier ---------- */
/* Ce qui faisait « fait à la va-vite » tenait à cinq réflexes, tous
   présents ici et tous corrigés :

   1. des dégradés et des halos partout — l'œil ne sait plus où se poser ;
   2. tout arrondi au maximum, y compris les grands blocs ;
   3. une pastille colorée derrière chaque icône ;
   4. des ombres portées sous chaque carte, comme si tout flottait ;
   5. chaque section titrée au centre, à l'identique, du haut jusqu'en bas.

   On enlève. Ce sont les blancs, les filets et la typographie qui doivent
   porter la page — pas les effets. */

/* Rayons resserrés : un bloc n'est pas un galet. */
:root{--r-lg:14px;--r-sm:8px}

/* Le haut de page : une seule lumière douce, plus deux halos verts. */

/* Cartes : un filet, pas une ombre. Le survol se contente d'un trait
   plus marqué et d'un fond à peine plus clair. */
.card{border-color:var(--line);box-shadow:none}
.card:hover{transform:none;box-shadow:none;border-color:var(--green-400);background:var(--paper)}

/* Icônes : le trait seul, sans pastille ni cadre. */
.icon-badge{
  width:auto;height:auto;border-radius:0;background:none;border:0;
  color:var(--green-600);display:block;
}
.icon-badge svg{width:26px;height:26px;stroke-width:1.4}

/* Chapeaux de section alignés à gauche : c'est ainsi que compose un
   journal. Le centrage systématique est le réflexe du gabarit. */
.section-head--center{margin-inline:0;text-align:left}
.section-head{max-width:62ch}

/* Le titre de rubrique n'a plus besoin d'un filet décoratif : le
   sur-titre suffit à annoncer. */
.eyebrow{letter-spacing:.16em}

/* Boutons : on garde la forme pilule, on retire l'ombre colorée qui
   les faisait flotter. */
.btn--accent{box-shadow:none;background:var(--green-800)}
.btn--accent:hover{transform:none;background:var(--green-700);box-shadow:none}
.btn--outline:hover,.btn--ghost-light:hover,.btn--dark:hover{transform:none;box-shadow:none}

/* Offres : même régime. La carte mise en avant se distingue par son
   fond et son filet, pas par une ombre. */
.plan{box-shadow:none}
.plan:hover{transform:none;box-shadow:none}



/* ---------- 27. L'en-tête sur le haut de page sombre ---------- */
/* L'accueil s'ouvre désormais sur une photographie assombrie. L'en-tête,
   lui, était écrit en vert foncé pour un fond clair : par-dessus la photo,
   le menu devenait illisible.

   Tant qu'on n'a pas défilé, l'en-tête est transparent et son texte passe
   en clair. Dès que « is-solid » arrive — le fond crème revient — tout
   reprend ses couleurs d'origine. Et le menu mobile ouvert est exclu :
   son panneau est crème, il lui faut du texte foncé. */
@media (min-width:1px){
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .brand__name{color:#F7FAF6}
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .brand__tag{color:#A9C6AE}
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .nav a{color:#DFEADD}
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .nav a:hover,
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .nav a.is-current{color:#FFFFFF}
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .nav a::after{background:var(--green-400)}
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .burger span,
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .burger span::before,
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .burger span::after{background:#F7FAF6}

  /* Le bouton de contact garde son fond vert : sur la photo, il lui faut
     un liseré clair pour ne pas se fondre dans les ombres. */
  body[data-page="home"]:not(.nav-open) .site-header:not(.is-solid) .header-cta .btn--accent{
    border:1.5px solid rgba(237,242,234,.34);
  }
}

/* ---------- 24. Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  /* Windows et macOS proposent de réduire les animations, et beaucoup de
     machines ont ce réglage actif sans que l'on s'en doute. Tout couper
     rendrait la page inerte. On garde donc les apparitions et la direction
     propre à chaque famille — la variété reste perceptible — mais on retire
     ce qui gêne réellement : les grands déplacements, le flou, la rotation
     et le volet. Les distances tombent à une dizaine de pixels et les
     durées sont raccourcies.
     On écrit propriété et durée séparément : la forme courte remettrait
     le délai à zéro et supprimerait la cascade. */
  .js [data-reveal]{
    transform:translateY(10px) !important;
    filter:none !important;
    clip-path:none !important;
    transition-property:opacity,transform !important;
    transition-duration:.5s !important;
    transition-timing-function:ease !important;
  }
  .js [data-reveal="left"]{transform:translateX(-12px) !important}
  .js [data-reveal="right"]{transform:translateX(12px) !important}
  .js [data-reveal="descend"]{transform:translateY(-10px) !important}
  .js [data-reveal="calme"]{transform:translateY(7px) !important}
  .js [data-reveal="zoom"]{transform:scale(.985) !important}
  .js [data-reveal="volet"]{transform:translateX(-12px) !important}
  .js [data-reveal].is-in{transform:none !important;filter:none !important;clip-path:none !important}

  /* Le grand titre ne se dévoile plus par un rideau : il apparaît en fondu. */
  .js [data-reveal-titre]{
    clip-path:none !important;
    opacity:0;
    transition-property:opacity !important;
    transition-duration:.55s !important;
  }
  .js [data-reveal-titre].is-in{opacity:1}

  .js .eyebrow::before{transform:none !important;transition:none !important}
  .js body{animation:czPageInSobre .35s ease both}
  @keyframes czPageInSobre{from{opacity:0}to{opacity:1}}

  /* L'introduction se contente d'un fondu, sans glissement. */
  /* L'introduction garde son écriture lettre par lettre — c'est elle qui
     fait tout l'effet — mais les lettres se posent en fondu au lieu de
     remonter, et l'ensemble va plus vite. */
  /* Le haut de page : pas de zoom lent, le texte se contente d'un fondu.
     Un mouvement de douze secondes est exactement ce que ce réglage
     demande d'éviter. */
  .hero__fond{animation:none !important;transform:none !important}
  .js .hero__txt > *{animation-name:czHeroFondu !important;animation-duration:.5s !important}
  @keyframes czHeroFondu{from{opacity:0}to{opacity:1}}

  /* L'écriture reste : un dévoilement de haut en bas ne déplace rien à
     l'écran. On garde donc le tracé et sa cadence irrégulière, on retire
     seulement la pointe lumineuse et on resserre l'ensemble à 74 %. */
  .intro__letter{animation-duration:.28s !important;animation-delay:calc(var(--t) * .74) !important}
  .intro__letter::after{display:none}
  .intro__mark{animation-duration:.5s !important;animation-delay:2.15s !important;transform:none !important}
  .intro__rule{animation-duration:.5s !important;animation-delay:2.36s !important;width:clamp(88px,14vw,150px) !important}
  .cz-intro-on .intro{animation:czIntroSortieSobre .6s ease 3s forwards}
  @keyframes czIntroSortieSobre{to{opacity:0;visibility:hidden;pointer-events:none}}

  /* Les effets purement décoratifs au survol sont neutralisés. */
  .btn:hover,.card:hover,.plan:hover,.zone-cloud a:hover,.arrow-link:hover,.post-nav a:hover{transform:none !important}
}

@media print{
  .site-header,.float-cta,.btn-row,.site-footer{display:none !important}
  body{color:#000;background:#fff;animation:none}
}
/* ── 28. La FAQ : huit questions, un seul écran ──────────────────────────
   Huit intitulés repliés pesaient 772 px sur un écran de 642 : la section
   débordait de 130 px et la dernière question tombait sous la ligne de
   flottaison. Plutôt que de retirer des questions — le visiteur doit
   pouvoir toutes les voir d'un coup d'œil — l'espacement suit la hauteur
   de la fenêtre, comme partout ailleurs sur l'accueil. Au-delà de 1050 px
   de haut les valeurs hautes reprennent la main : rien ne bouge sur un
   grand écran. Les pages intérieures, qui défilent normalement, ne sont
   pas concernées. */
body[data-page="home"] #faq .faq{gap:clamp(7px,1.1vh,12px)}
body[data-page="home"] #faq .faq summary{
  padding-top:clamp(9px,1.6vh,20px);
  padding-bottom:clamp(9px,1.6vh,20px);
  font-size:clamp(.94rem,1.42vh,1.02rem);
}

/* ---------- 29. La garantie du premier mois ---------- */
/* Deux « 20 % » cohabitent désormais dans l'offre, et ils ne désignent pas
   la même chose : l'un est la hausse de revenus promise, l'autre la
   commission prélevée. Les afficher côte à côte au même corps rendrait la
   proposition illisible — le visiteur lirait « 20 % » deux fois sans
   comprendre lequel il paie.

   La promesse est donc sortie du prix : bandeau distinct, posé au-dessus,
   et surtout précédée d'un « + » qui la range immédiatement du côté du
   gain et non du coût. Le fond vert très clair la rattache à la marque
   sans crier ; c'est un engagement, pas une promotion. */
.plan__promesse{
  margin-bottom:14px;padding:11px 14px;
  background:var(--green-050);border-left:3px solid var(--green-500);
  border-radius:var(--r-sm);
  font-size:.93rem;line-height:1.4;color:var(--green-800);
}
.plan__promesse strong{font-weight:700;color:var(--green-700)}
.plan__promesse strong .nb{white-space:nowrap}

/* Sur l'accueil, chaque rubrique tient dans un écran : le bandeau suit la
   hauteur de fenêtre comme le reste de la carte. */
body[data-page="home"] .plan__promesse{
  margin-bottom:clamp(4px,1.1vh,14px);
  padding:clamp(5px,1.25vh,11px) clamp(9px,1.5vh,14px);
  font-size:clamp(.76rem,1.5vh,.93rem);line-height:1.28;
}