/* ==========================================================================
   Clean Coming — Design system PREMIUM « le leader »
   Doctrine : soustraire, agrandir, espacer, prouver sobrement.
   Blanc cassé + navy + bleu de marque rare + photo. Fraunces (display) + Inter.
   ========================================================================== */

/* -------------------------------------------------- Tokens ---------------- */
:root{
  /* Marque (bleu Clean Coming — RARE : CTA + 1 accent/section max) */
  --brand:#1A2BF5;          /* ⚠ provisoire — caler sur le logo officiel */
  --brand-700:#1320B8;
  --brand-050:#EEF0FF;  --brand-50:#EEF0FF;     /* alias */

  /* Ossature */
  --ink:#0C1B3A;  --ink-800:#11244C;  --ink-soft:#11244C;   /* alias */
  --slate:#43506B;  --slate-soft:#6B7790;
  --text:#43506B;  --muted:#6B7790;             /* alias */
  --invert:#FFFFFF;  --invert-soft:rgba(255,255,255,.74);

  /* Neutres chaleureux */
  --sand:#F3EDE3;  --sand-deep:#ECE3D4;  --sand-2:#ECE3D4;   /* alias */

  /* Surfaces */
  --paper:#FBFAF8;  --bg:#FBFAF8;               /* blanc cassé, fond global */
  --bg-soft:#F4F6F8;                            /* gris froid très clair */
  --white:#FFFFFF;  --card:#FFFFFF;

  /* Lignes */
  --line:#E4E7EE;  --line-2:#D6DBE6;  --line-ink:rgba(255,255,255,.12);

  /* Élévation — diffuse, longue, teintée navy */
  --shadow-xs:0 1px 2px rgba(12,27,58,.05);
  --shadow-sm:0 2px 10px rgba(12,27,58,.06);
  --shadow-md:0 14px 36px -14px rgba(12,27,58,.20);
  --shadow-lg:0 34px 66px -26px rgba(12,27,58,.30);
  --shadow-brand:0 18px 40px -16px rgba(26,43,245,.35);
  --sh-sm:var(--shadow-sm); --sh:var(--shadow-md); --sh-lg:var(--shadow-lg);  /* alias */

  /* Rayons */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --r:14px;                                     /* alias */

  /* Type */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-head:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-display:clamp(2.7rem, 1.5rem + 5vw, 5.25rem);
  --fs-h1:clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem);
  --fs-h2:clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem);
  --fs-h3:clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  --fs-lead:clamp(1.12rem, 1.04rem + .45vw, 1.34rem);
  --fs-eyebrow:.8125rem;

  /* Espacement / layout */
  --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;
  --container:1200px;  --container-narrow:780px;  --container-wide:1380px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
}

/* -------------------------------------------------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  color:var(--slate); background:var(--paper); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:clip; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ color:var(--ink); font-weight:600; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--s-7) 0; }

h1,h2,h3,h4,h5{ color:var(--ink); margin:0 0 .55em; }
h1,h2{ font-family:var(--font-display); font-weight:500; line-height:1.08;
  letter-spacing:-.02em; text-wrap:balance; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); max-width:22ch; }
h3{ font-family:var(--font-head); font-size:var(--fs-h3); font-weight:600; line-height:1.25; letter-spacing:-.01em; }
h4{ font-family:var(--font-head); font-size:1.05rem; font-weight:600; }
p{ margin:0 0 1.05rem; }
p:last-child{ margin-bottom:0; }

/* -------------------------------------------------- Layout ---------------- */
.container{ width:min(100% - var(--gutter)*2, var(--container)); margin-inline:auto; }
.container--narrow{ width:min(100% - var(--gutter)*2, var(--container-narrow)); margin-inline:auto; }
.section{ padding-block:clamp(4.5rem, 3rem + 6vw, 8rem); }
.section--soft{ background:var(--bg-soft); }
.section--sand{ background:var(--sand); }
.section--ink{ background:var(--ink); color:var(--invert); }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{ color:#fff; }
.section--tight{ padding-block:clamp(3rem, 2rem + 3vw, 4.5rem); }
@media (max-width:640px){ .section{ padding-block:3.5rem; } }

.section-head{ max-width:56ch; margin-bottom:var(--s-8); }
.section-head--center{ margin-inline:auto; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-head);
  font-weight:600; font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:1rem; }
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.5; }
.section-head--center .eyebrow{ justify-content:center; }
.section--ink .eyebrow{ color:#8EA2FF; }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--slate); max-width:62ch; }
.section--ink .lead{ color:var(--invert-soft); }

.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.split--6040{ grid-template-columns:1.12fr .88fr; }
@media (max-width:880px){ .split,.split--6040{ grid-template-columns:1fr; gap:2rem; } }

/* -------------------------------------------------- Boutons --------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-head); font-weight:600; font-size:.95rem; line-height:1;
  padding:.95rem 1.6rem; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
  text-align:center; }
.btn:hover{ text-decoration:none; }
.btn .arw{ transition:transform .2s ease; }
.btn:hover .arw{ transform:translateX(3px); }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }
.btn--primary:hover{ background:var(--brand-700); transform:translateY(-2px); box-shadow:0 22px 48px -16px rgba(26,43,245,.45); }
.btn--primary:active{ transform:translateY(0); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--outline:hover{ border-color:var(--ink); background:var(--white); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:var(--ink-800); transform:translateY(-2px); }
.btn--on-photo{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); }
.btn--on-photo:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--invert{ background:#fff; color:var(--ink); }
.btn--invert:hover{ background:var(--brand-050); color:var(--brand-700); transform:translateY(-2px); }
.btn--lg{ font-size:1.02rem; padding:1.1rem 1.9rem; }
.btn--block{ width:100%; }
.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-row--center{ justify-content:center; }
.arw{ display:inline-block; }

/* lien fléché + souligné animé */
.arrow-link{ font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--brand-700);
  display:inline-flex; align-items:center; gap:.4rem; }
.arrow-link .arw{ transition:transform .2s ease; }
.arrow-link:hover{ text-decoration:none; }
.arrow-link:hover .arw{ transform:translateX(4px); }
.link-u{ position:relative; color:var(--ink); font-weight:600; }
.link-u::after{ content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.link-u:hover{ text-decoration:none; }
.link-u:hover::after{ transform:scaleX(1); }

/* -------------------------------------------------- Header --------------- */
.topbar{ background:var(--ink); color:var(--invert-soft); font-size:.82rem; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; }
.topbar__left{ display:flex; gap:20px; align-items:center; }
.topbar a{ color:#fff; font-weight:500; display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; }
.topbar a:hover{ color:#9FB0FF; text-decoration:none; }
.topbar svg{ width:15px; height:15px; }
@media (max-width:760px){ .topbar__left span{ display:none; } }
@media (max-width:680px){ .topbar__left a[href^="mailto"]{ display:none; } }
@media (max-width:420px){ .topbar__left a[href="/recrutement/"]{ display:none; } }

.site-header{ position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease; }
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px; }
.brand{ display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
.brand:hover{ text-decoration:none; }
.brand__drop{ width:30px; height:38px; flex-shrink:0; }
.brand__word{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:var(--brand); letter-spacing:-.02em; line-height:.95; }
.brand__tag{ display:block; font-family:var(--font-head); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft); margin-top:3px; }
.brand img{ height:42px; width:auto; }

.nav__collapse{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.nav__menu{ display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0; }
.nav__menu a{ display:block; padding:.5em .58em; border-radius:var(--r-sm); color:var(--ink); font-family:var(--font-head); font-weight:500; font-size:.93rem; white-space:nowrap; }
.nav__menu a:hover{ color:var(--brand-700); text-decoration:none; }
.nav__menu a[aria-current="page"]{ color:var(--brand-700); }
.nav__menu a[aria-current="page"]::after{ content:""; display:block; height:1.5px; background:var(--brand); border-radius:2px; margin-top:4px; }
.nav__actions{ display:flex; align-items:center; gap:14px; }
.nav__tel{ font-family:var(--font-head); font-weight:700; color:var(--ink); white-space:nowrap; display:none; align-items:center; gap:.4em; }
.nav__tel:hover{ color:var(--brand-700); text-decoration:none; }
.nav__toggle{ display:none; }
.nav__close{ display:none; }
/* Resserrement de la barre desktop sur les laptops (1025-1280) pour eviter le debordement */
@media (max-width:1280px){
  .nav{ gap:14px; } .nav__collapse{ gap:12px; }
  .nav__menu a{ padding:.5em .5em; font-size:.9rem; } .nav__tel span{ display:none; }
}
/* En dessous de 1200px : menu en overlay plein ecran (hamburger) — garantit zero debordement */
@media (max-width:1200px){
  .nav__toggle{ display:inline-flex; flex-direction:column; gap:5px; align-items:center; justify-content:center;
    width:46px; height:44px; padding:0; background:transparent; border:1px solid var(--line-2);
    border-radius:var(--r-sm); cursor:pointer; flex-shrink:0; }
  .nav__toggle span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; }
  .nav__collapse{ position:fixed; inset:0; z-index:1000; background:var(--paper); box-shadow:none;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px;
    padding:80px 26px 32px; margin-left:0; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto; overscroll-behavior:contain; }
  .nav__collapse.is-open{ transform:translateX(0); }
  .nav__close{ display:inline-flex; align-items:center; justify-content:center; position:absolute; top:20px; right:22px;
    width:46px; height:46px; font-size:2rem; line-height:1; color:var(--ink); background:transparent;
    border:1px solid var(--line-2); border-radius:var(--r-sm); cursor:pointer; }
  .nav__menu{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__menu a{ padding:.95em .35em; font-size:1.12rem; border-bottom:1px solid var(--line); border-radius:0; }
  .nav__menu a[aria-current="page"]{ color:var(--brand-700); }
  .nav__menu a[aria-current="page"]::after{ display:none; }
  .nav__actions{ flex-direction:column; align-items:stretch; gap:12px; margin-top:18px; }
  .nav__actions .btn{ width:100%; justify-content:center; }
  .nav__tel{ display:inline-flex; justify-content:center; padding:.7em; } .nav__tel span{ display:inline; }
  body.nav-open{ overflow:hidden; }
  .nav-backdrop{ display:none; }
}

/* -------------------------------------------------- Fil d'ariane ---------- */
.breadcrumb{ background:var(--paper); border-bottom:1px solid var(--line); font-size:.85rem; }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5em; margin:0; padding:14px 0; color:var(--slate-soft); }
.breadcrumb li{ display:inline-flex; align-items:center; gap:.5em; }
.breadcrumb li::after{ content:"›"; color:var(--line-2); }
.breadcrumb li:last-child::after{ content:""; }
.breadcrumb a{ color:var(--slate-soft); }
.breadcrumb a:hover{ color:var(--brand-700); }
.breadcrumb [aria-current="page"]{ color:var(--ink); font-weight:600; }

/* -------------------------------------------------- Hero ------------------ */
.hero{ position:relative; color:#fff; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, rgba(8,18,48,.80) 0%, rgba(8,18,48,.92) 100%), var(--ink); }
.hero__media{ position:absolute; inset:0; z-index:-1; background:center/cover no-repeat; filter:saturate(.9) contrast(1.02) brightness(.9); }
.hero__motif{ position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; z-index:0; opacity:.12; mix-blend-mode:screen; pointer-events:none; }
.hero__inner{ position:relative; z-index:1; max-width:860px; margin-inline:auto; text-align:center;
  padding-block:clamp(4.5rem,3.5rem + 6vw,8.5rem); text-shadow:0 1px 16px rgba(8,18,48,.5); }
.hero h1{ font-size:var(--fs-display); font-weight:440; line-height:1.05; color:#fff; margin:0 auto; max-width:20ch; }
.hero__lead{ font-size:var(--fs-lead); color:rgba(255,255,255,.92); margin:1.4rem auto 2rem; max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:2rem; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; list-style:none; margin:0; padding:0; }
.hero__badges li{ display:inline-flex; align-items:center; gap:.5em; font-weight:500; font-size:.94rem; color:#fff; }
.hero__badges svg{ color:#9FB0FF; flex-shrink:0; }

/* -------------------------------------------------- Bandeau preuves ------- */
.proof{ background:var(--paper); border-bottom:1px solid var(--line); }
.proof__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 36px; padding:22px 0; }
.proof__item{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-head); font-weight:600;
  font-size:.9rem; color:var(--ink); opacity:.78; transition:opacity .2s ease; }
.proof__item:hover{ opacity:1; }
.proof__item svg{ color:var(--brand); width:20px; height:20px; flex-shrink:0; }

/* -------------------------------------------------- Chiffres (XXL navy) --- */
.statband{ background:var(--ink); color:#fff; }
.statband--ink{ background:var(--ink); color:#fff; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-ink); border:1px solid var(--line-ink); border-radius:var(--r-md); overflow:hidden; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ background:var(--ink); padding:clamp(1.6rem,3vw,2.6rem); text-align:center; }
.stat__num{ font-family:var(--font-display); font-weight:440; font-size:clamp(2.6rem,2rem + 2.6vw,4rem); line-height:1;
  letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums lining-nums; }
.stat__label{ margin-top:.6rem; color:var(--invert-soft); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; }
/* variante claire si jamais .stats hors section navy */
.section:not(.section--ink):not(.statband) .stats{ background:var(--line); border-color:var(--line); }
.section:not(.section--ink):not(.statband) .stat{ background:var(--white); }
.section:not(.section--ink):not(.statband) .stat__num{ color:var(--brand); }
.section:not(.section--ink):not(.statband) .stat__label{ color:var(--slate-soft); }

/* -------------------------------------------------- Médias / photos ------- */
.ph-img{ position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; isolation:isolate; margin:0; background:var(--ink); }
.ph-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-img--square{ aspect-ratio:1/1; }
.ph-img--wide{ aspect-ratio:16/9; }
.ph-img--empty{ background:linear-gradient(135deg, var(--ink) 0%, var(--ink-800) 100%); border:1px solid var(--line-ink); }
.ph-img--empty::before{ content:""; position:absolute; inset:0; opacity:.08;
  background-image:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 22px); }
.ph-img__meta{ position:absolute; left:16px; bottom:14px; z-index:2; display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-head); font-weight:600; font-size:var(--fs-eyebrow); letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.66); }
.ph-img__meta::before{ content:""; width:18px; height:18px; border:1.5px solid rgba(255,255,255,.5); border-radius:3px; flex-shrink:0; }

/* -------------------------------------------------- Tuiles services ------- */
.tile{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; height:100%;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease; }
.tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--sand-deep); }
.tile__media{ aspect-ratio:16/10; }
.tile__media .ph-img{ aspect-ratio:16/10; border-radius:0; height:100%; }
.tile__body{ padding:var(--s-6); display:flex; flex-direction:column; flex:1; }
.tile__icon{ width:48px; height:48px; border-radius:var(--r-sm); background:var(--sand); color:var(--ink);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--sand-deep); margin-bottom:var(--s-4); }
.tile__icon svg{ width:24px; height:24px; }
.tile h3{ margin-bottom:.5rem; }
.tile p{ color:var(--slate); font-size:.97rem; margin-bottom:1rem; }
.tile .arrow-link{ margin-top:auto; }

/* -------------------------------------------------- Cartes icône ---------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); height:100%; box-shadow:var(--shadow-xs); }
.card--hover{ transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease; }
.card--hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--sand-deep); }
.card__icon{ width:50px; height:50px; border-radius:var(--r-sm); background:var(--sand); color:var(--ink);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--sand-deep); margin-bottom:18px; }
.card__icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--slate); font-size:.97rem; }
.section--ink .card{ background:var(--ink-800); border-color:var(--line-ink); }
.section--ink .card p{ color:var(--invert-soft); }
.section--ink .card__icon{ background:rgba(255,255,255,.08); border-color:var(--line-ink); color:#fff; }

.pain{ background:var(--white); border:1px solid var(--line); border-left:2px solid var(--brand); border-radius:var(--r-md); padding:22px 24px; }
.pain h3{ margin-bottom:.4rem; }
.pain p{ margin:0; color:var(--slate); font-size:.96rem; }

.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.checklist li{ position:relative; padding-left:2em; color:var(--slate); }
.checklist li::before{ content:""; position:absolute; left:0; top:.05em; width:1.4em; height:1.4em; background:var(--brand-050); border-radius:50%; }
.checklist li::after{ content:""; position:absolute; left:.46em; top:.44em; width:.46em; height:.24em; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg); }
.section--ink .checklist li{ color:var(--invert-soft); }
.section--ink .checklist li::before{ background:rgba(142,162,255,.16); }
.section--ink .checklist li::after{ border-color:#9FB0FF; }

/* -------------------------------------------------- Étapes / Timeline ----- */
.steps{ display:grid; gap:28px; }
.steps--row{ grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){ .steps--row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps--row{ grid-template-columns:1fr; } }
.step__num{ width:44px; height:44px; border-radius:var(--r-sm); background:var(--sand); color:var(--ink); border:1px solid var(--sand-deep);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:500; font-size:1.1rem; margin-bottom:14px; }
.step h3{ margin-bottom:.4rem; }
.step p{ color:var(--slate); font-size:.95rem; margin:0; }

.timeline{ position:relative; padding-left:2.4rem; max-width:760px; }
.timeline::before{ content:""; position:absolute; left:9px; top:.5rem; bottom:.5rem; width:2px; background:linear-gradient(var(--brand), var(--line)); }
.tl-step{ position:relative; padding-bottom:var(--s-7); }
.tl-step:last-child{ padding-bottom:0; }
.tl-step::before{ content:""; position:absolute; left:-2.4rem; top:.2rem; width:20px; height:20px; border-radius:50%;
  background:var(--paper); border:2px solid var(--brand); box-shadow:0 0 0 4px var(--paper); }
.tl-step time{ font-family:var(--font-head); font-weight:700; font-size:var(--fs-eyebrow); letter-spacing:.1em; color:var(--brand); text-transform:uppercase; }
.tl-step h3{ margin:.35rem 0 .3rem; }
.tl-step p{ color:var(--slate); margin:0; }
.section--ink .timeline::before{ background:linear-gradient(var(--brand),rgba(255,255,255,.15)); }
.section--ink .tl-step::before{ background:var(--ink); box-shadow:0 0 0 4px var(--ink); }
.section--ink .tl-step p{ color:var(--invert-soft); }

/* -------------------------------------------------- Matrice --------------- */
.matrix-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); }
.matrix{ width:100%; border-collapse:collapse; font-size:.96rem; min-width:520px; }
.matrix th,.matrix td{ text-align:left; padding:1rem 1.25rem; border-bottom:1px solid var(--line); vertical-align:top; }
.matrix thead th{ font-family:var(--font-head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color:var(--slate-soft); background:var(--bg-soft); }
.matrix tbody tr:last-child td{ border-bottom:0; }
.matrix tbody tr:hover td{ background:var(--sand); }
.matrix td:first-child{ font-weight:600; color:var(--ink); }

/* -------------------------------------------------- Logos / témoignages --- */
.logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; }
.logos__item{ width:150px; height:60px; border:1px dashed var(--line-2); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  color:var(--slate-soft); font-size:.78rem; font-family:var(--font-head); background:var(--white); text-align:center; padding:6px; }

.quote{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); height:100%; display:flex; flex-direction:column; box-shadow:var(--shadow-xs); }
.quote__stars{ color:#E0A93B; letter-spacing:2px; margin-bottom:.7rem; font-size:.95rem; }
.quote p{ font-family:var(--font-display); font-weight:440; font-size:1.18rem; line-height:1.45; color:var(--ink); }
.quote__author{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:.9rem; color:var(--slate-soft); display:flex; align-items:center; gap:12px; }
.quote__avatar{ width:42px; height:42px; border-radius:50%; background:var(--brand-050); color:var(--brand-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.quote__avatar svg{ width:22px; height:22px; }
.quote__author strong{ display:block; color:var(--ink); font-family:var(--font-head); }

/* -------------------------------------------------- Zones ----------------- */
.zone-list{ columns:3; column-gap:28px; list-style:none; padding:0; margin:0; }
.zone-list li{ padding:.3em 0; font-size:.96rem; break-inside:avoid; display:flex; align-items:center; gap:.5em; color:var(--slate); }
.zone-list svg{ color:var(--brand); width:16px; height:16px; flex-shrink:0; }
@media (max-width:720px){ .zone-list{ columns:2; } }
@media (max-width:440px){ .zone-list{ columns:1; } }

/* -------------------------------------------------- FAQ ------------------- */
.faq{ display:grid; gap:12px; }
.faq details{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.faq summary{ cursor:pointer; list-style:none; padding:18px 54px 18px 22px; position:relative; font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:1.04rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--brand); line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details[open] summary{ color:var(--brand-700); }
.faq__body{ padding:0 22px 20px; color:var(--slate); }
.faq__body p{ margin-bottom:.7rem; }

/* -------------------------------------------------- CTA band -------------- */
.cta-band{ background:linear-gradient(125deg, var(--ink) 0%, var(--ink-800) 60%, var(--brand-700) 135%); color:#fff; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:58ch; margin-inline:auto; }
.cta-band .meta{ margin-top:1.2rem; font-size:.9rem; color:rgba(255,255,255,.8); }

/* -------------------------------------------------- Formulaires ----------- */
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2rem); box-shadow:var(--shadow-sm); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--ink); margin-bottom:.4em; }
.field .req{ color:var(--brand-700); }
.field input,.field select,.field textarea{ width:100%; font-family:inherit; font-size:1rem; color:var(--slate);
  padding:.78em .9em; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--white); transition:border-color .15s ease, box-shadow .15s ease; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,43,245,.15); }
.field textarea{ min-height:120px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px){ .checks{ grid-template-columns:1fr; } }
.check{ display:flex; align-items:flex-start; gap:.6em; padding:.7em .8em; border:1px solid var(--line-2); border-radius:var(--r-sm); cursor:pointer; font-size:.95rem; }
.check:hover{ border-color:var(--brand); }
.check input{ width:auto; margin-top:.2em; }
.form-note{ font-size:.82rem; color:var(--slate-soft); margin-top:.6rem; }

.contact-box{ display:grid; gap:18px; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-item .ci-ic{ width:42px; height:42px; border-radius:var(--r-sm); background:var(--sand); color:var(--ink); border:1px solid var(--sand-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-item strong{ display:block; font-family:var(--font-head); color:var(--ink); }
.contact-item a{ color:var(--slate); font-weight:500; }

/* -------------------------------------------------- Emplacements ---------- */
.ph{ color:inherit; background:none; border:0; padding:0; font:inherit; }
.ph-note{ display:none !important; }

/* -------------------------------------------------- Footer ---------------- */
.site-footer{ background:var(--ink); color:var(--invert-soft); font-size:.92rem; border-top:1px solid var(--line-ink); }
.site-footer a{ color:var(--invert-soft); }
.site-footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:32px; padding:60px 0 40px; }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand .brand__word{ color:#fff; }
.footer-brand p{ margin-top:14px; max-width:36ch; }
.footer-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.footer-badges span{ border:1px solid var(--line-ink); border-radius:var(--r-pill); padding:.3em .8em; font-size:.74rem; color:var(--invert-soft); }
.footer-col h4{ color:#fff; font-family:var(--font-head); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-bottom{ border-top:1px solid var(--line-ink); padding:20px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.84rem; }
.footer-bottom .legal-links{ display:flex; flex-wrap:wrap; gap:18px; }

/* -------------------------------------------------- Utilitaires ----------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-2{ margin-top:1.4rem; } .mt-3{ margin-top:2rem; }
.muted{ color:var(--slate-soft); }
.badge{ display:inline-flex; align-items:center; gap:.4em; background:var(--brand-050); color:var(--brand-700); font-family:var(--font-head); font-weight:600; font-size:.8rem; padding:.4em .85em; border-radius:var(--r-pill); }
.badge svg{ width:15px; height:15px; }
.badge--eco{ background:#E6F6EF; color:#1d7a52; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.tag-list li{ background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.45em .95em; font-size:.85rem; font-weight:500; color:var(--ink); }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; color:var(--ink); padding:10px 16px; z-index:100; }
.skip-link:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }

/* Révélation au défilement (très subtile) */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .reveal.is-in{ opacity:1; transform:none; }
}

/* Prose (pages légales) */
.prose{ max-width:760px; }
.prose h2{ margin-top:2.2rem; }
.prose h3{ margin-top:1.6rem; font-family:var(--font-head); }
.prose ul{ padding-left:1.3em; }
.prose li{ margin-bottom:.4rem; }
.prose table{ width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.95rem; }
.prose th,.prose td{ border:1px solid var(--line); padding:.6em .8em; text-align:left; vertical-align:top; }
.prose th{ background:var(--bg-soft); font-family:var(--font-head); }

/* -------------------------------------------------- Bandeau cookies ------- */
.cc-consent{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:flex;justify-content:center;
  padding:clamp(.75rem,2vw,1.25rem);pointer-events:none}
.cc-consent[hidden]{display:none}
.cc-consent__panel{pointer-events:auto;width:100%;max-width:var(--container-narrow);background:var(--white);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  padding:clamp(1rem,2.4vw,1.5rem);animation:cc-rise .28s ease}
@keyframes cc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cc-consent__head strong{display:block;font-family:var(--font-head);font-weight:700;font-size:1.02rem;margin-bottom:.25rem}
.cc-consent__head p{margin:0;color:var(--slate);font-size:.92rem;line-height:1.55}
.cc-consent__head a{color:var(--brand);text-decoration:underline}
.cc-consent__prefs{margin-top:1rem;display:grid;gap:.5rem}
.cc-consent__prefs[hidden]{display:none}
.cc-pref{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-soft)}
.cc-pref span{display:flex;flex-direction:column}
.cc-pref strong{font-size:.9rem;color:var(--ink)}
.cc-pref small{color:var(--muted);font-size:.78rem;margin-top:.1rem}
.cc-pref input{width:1.15rem;height:1.15rem;accent-color:var(--brand);flex:none;cursor:pointer}
.cc-pref input:disabled{opacity:.55;cursor:not-allowed}
.cc-consent__actions{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.cc-btn{font-family:var(--font-head);font-weight:600;font-size:.9rem;border-radius:var(--r-pill);
  padding:.7em 1.4em;cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.cc-btn:hover{transform:translateY(-1px)}
.cc-btn[hidden]{display:none}
.cc-btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.cc-btn--primary:hover{background:var(--brand-700)}
.cc-btn--soft{background:var(--bg-soft);color:var(--ink);border-color:var(--line-2)}
.cc-btn--soft:hover{background:var(--sand)}
@media (max-width:560px){
  .cc-consent__actions{justify-content:stretch}
  .cc-btn{flex:1 1 auto;text-align:center}
}

/* -------------------------------------------------- Blog : hub ------------ */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-top:1.6rem}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.4rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.5rem;
  transition:transform .14s ease,box-shadow .14s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.post-card__cat{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);margin:0}
.post-card h3{margin:.1rem 0;font-family:var(--font-head);font-size:1.12rem;line-height:1.3}
.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h3 a:hover{color:var(--brand)}
.post-card p{color:var(--slate);font-size:.92rem;margin:0;line-height:1.5}
.post-card__meta{color:var(--muted);font-size:.8rem;margin-top:auto;padding-top:.3rem}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;margin-top:1.5rem}
.theme-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem 1.3rem}
.theme-card h3{margin:0 0 .35rem;font-family:var(--font-head);font-size:1.02rem;color:var(--ink)}
.theme-card p{margin:0;color:var(--slate);font-size:.9rem;line-height:1.5}

/* -------------------------------------------------- Blog : article -------- */
.article{max-width:760px;margin-inline:auto}
.article>.eyebrow{margin-bottom:.4rem}
.article>.eyebrow a{color:var(--brand);text-decoration:none}
.article>.eyebrow a:hover{text-decoration:underline}
.article h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.7rem);line-height:1.16;margin:.2rem 0 .9rem}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;color:var(--muted);
  font-size:.86rem;padding-bottom:1.1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line)}
.byline__name{color:var(--ink);font-weight:600}
.byline__sep{opacity:.45}
.article__lead{font-size:1.18rem;line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:1.7rem}
.article__body{font-size:1.02rem}
.article__body h2{margin-top:2.1rem}
.article__body ol{padding-left:1.3em}
.article__body ol li{margin-bottom:.5rem}
.article__faq{max-width:760px;margin:2.6rem auto 0}
.article__faq>h2{margin-bottom:1rem}
.article__sources{max-width:760px;margin:2rem auto 0;padding:1.1rem 1.3rem;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);font-size:.9rem}
.article__sources h2{font-size:1rem;margin:0 0 .5rem}
.article__sources ul{margin:0;padding-left:1.2rem}
.article__sources li{margin-bottom:.3rem}
.article__sources a{color:var(--brand);word-break:break-word}
.article__related{max-width:760px;margin:2.6rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line)}
.article__related>h2{font-size:1.05rem;margin:0 0 .9rem}
.related-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.related-list li{margin:0}
.related-list a{font-family:var(--font-head);font-weight:600;color:var(--brand-700);
  display:inline-flex;gap:.5rem;line-height:1.45}
.related-list a::before{content:"\2192";color:var(--brand)}
.related-list a:hover{color:var(--brand)}