/* ---------------------------------------------------------------------------
   CH_G — option 2 : « le dossier ».

   Même contenu, même marque, autre parti. Le site se tient comme un rapport
   d'architecte plutôt que comme une plaquette : papier plutôt que blanc,
   sections numérotées, sommaire en marge, filets d'un pixel, aucune carte.

   Trois décisions portent tout le reste :
     1. le fond est du papier, pas du blanc ; le blanc est réservé aux planches ;
     2. la hiérarchie vient du numéro en marge, pas de la taille du titre ;
     3. un seul contraste typographique, une serif de titrage sur une grotesque
        de labeur, et rien d'autre.

   Le vert ne sert qu'à l'état actif et au survol. Aucune valeur hexadécimale
   hors de ce bloc de jetons.
--------------------------------------------------------------------------- */

:root {
  /* --- encres et papiers -------------------------------------------------- */
  --vert:            #2ab572;
  --vert-sombre:     #197d4d;   /* 4,5:1 sur le papier : lisible en petit */
  --vert-clair:      #3fc484;
  --vert-voile:      rgba(42, 181, 114, .10);

  --papier:          #f2f0ea;   /* fond courant : du papier, pas du blanc     */
  --papier-fonce:    #e8e5dd;   /* bandes et séparations                      */
  --planche:         #ffffff;   /* seul usage du blanc : derrière une image   */
  --encre:           #1a1a17;
  --encre-faible:    #605d56;
  --beton:           #706d65;   /* numéros, cotes, légendes : 4,5:1 sur papier */
  --trait:           #d4d0c6;

  /* --- pied de page ---------------------------------------------------------
     Sombre dans les deux thèmes. Les packs de marque ne fournissent que des
     versions pleines, claires ou blanches : faire basculer les quatre logos
     d'une version à l'autre selon le thème donnait un bloc tantôt bleu tantôt
     blanc. Un fond constant règle la question, et les versions blanches
     servent toujours. */
  --ft-fond:         #141413;
  --ft-encre:        #ecebe6;
  --ft-faible:       #a5a199;
  --ft-trait:        #32312d;

  --or:              #c6a75a;
  --or-texte:        #836928;

  /* --- rôles --------------------------------------------------------------- */
  --fond:            var(--papier);
  --fond-alt:        var(--papier-fonce);
  --accent:          var(--vert);
  --accent-survol:   var(--vert-sombre);
  --sur-accent:      #ffffff;
  --voile:           rgba(26, 26, 23, .05);
  --ombre:           rgba(26, 26, 23, .12);

  /* --- typographie ---------------------------------------------------------
     Une seule famille, Inter, comme sur l'option 1 : c'est la police actuelle
     du site et ses chiffres s'alignent en colonne. Le contraste des titres ne
     vient donc pas d'une seconde fonte mais de la graisse, de la taille et
     d'un crénage serré. */
  --texte:           "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- mesures ------------------------------------------------------------- */
  --laize:      1320px;
  --rail:       188px;          /* largeur du sommaire en marge               */
  --marge:      clamp(20px, 4vw, 56px);
  --haut:       clamp(60px, 7.5vw, 112px);
  --duree:      .3s;
  --courbe:     cubic-bezier(.22, .61, .36, 1);
  --hd-h:       68px;
}

[data-theme="dark"] {
  --papier:          #141413;
  --papier-fonce:    #1d1d1b;
  --planche:         #000000;
  --encre:           #ecebe6;
  --encre-faible:    #a5a199;
  --beton:           #827e75;
  --trait:           #32312d;
  --accent-survol:   var(--vert-clair);
  --sur-accent:      #141413;
  --or-texte:        var(--or);
  --voile:           rgba(236, 235, 230, .06);
  --ombre:           rgba(0, 0, 0, .5);
}

body, table, .chiffres {
  font-feature-settings: "tnum" 1, "cv05" 1;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SOCLE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hd-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 clamp(15.5px, .95rem + .1vw, 17px)/1.68 var(--texte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
body.menu-open { overflow: hidden; }

img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 .95em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
button { font: inherit; }

::selection { background: var(--vert-voile); color: var(--encre); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sr, .skip:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; z-index: 200; top: 12px; left: 12px;
  padding: 10px 16px; background: var(--accent); color: var(--sur-accent); font-weight: 600;
}

.wrap {
  width: 100%;
  max-width: var(--laize);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* =========================================================================
   TYPOGRAPHIE
   ========================================================================= */

h1, h2, h3, h4 { margin: 0; font-family: var(--texte); }

/* Les titres sont serrés : plus ils grandissent, plus le crénage se resserre.
   C'est ce qui remplace la seconde fonte. */
h1, .sh {
  font-weight: 600;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); letter-spacing: -.032em; }
.sh { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -.028em; }

h3, h4 {
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.004em;
}
h3 { font-size: 1.0625rem; }
h4 { font-size: .9375rem; }

.lede {
  max-width: 62ch;
  color: var(--encre-faible);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.58;
  text-wrap: pretty;
}
.big {
  max-width: 56ch;
  font-size: clamp(1.1875rem, 1.05rem + .8vw, 1.625rem);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -.018em;
  text-wrap: pretty;
}
.note {
  margin-top: 1.5em;
  padding-left: 16px;
  border-left: 1px solid var(--trait);
  color: var(--encre-faible);
  font-size: .875rem;
  line-height: 1.65;
}
.eyebrow, .kick {
  display: block;
  color: var(--beton);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow { margin-bottom: 1.6em; }
.kick { margin-bottom: .6em; }

hr.rule { height: 1px; margin: clamp(28px, 4vw, 48px) 0; border: 0; background: var(--trait); }

main :is(p, .ticks > li, figcaption) a:not([class]) {
  color: var(--encre);
  box-shadow: inset 0 -1px 0 0 var(--accent);
  transition: color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
main :is(p, .ticks > li, figcaption) a:not([class]):hover {
  color: var(--accent-survol);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* =========================================================================
   LIENS D'ACTION — pas de boutons pleins, des liens soulignés d'un filet
   ========================================================================= */

.acts { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 2em; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--encre);
  background: none;
  color: var(--encre);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.btn:hover { color: var(--accent-survol); border-bottom-color: var(--accent); }
.btn.ghost { border-bottom-color: var(--trait); color: var(--encre-faible); }
.btn.ghost:hover { color: var(--accent-survol); border-bottom-color: var(--accent); }
.btn.or:hover, .btn.or:focus-visible { color: var(--or-texte); border-bottom-color: var(--or); }

/* Le formulaire garde un bouton plein : c'est une commande, pas un lien. */
.form-foot .btn {
  padding: 13px 22px;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--fond);
}
.form-foot .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }

.arr {
  position: relative;
  width: 20px; height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  transition: transform var(--duree) var(--courbe);
}
.arr::after {
  content: "";
  position: absolute; top: 50%; right: 0;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arr, a:hover > .arr { transform: translateX(5px); }

/* =========================================================================
   EN-TÊTE
   ========================================================================= */

.hd {
  position: sticky; top: 0; z-index: 100;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
}
.hd-in { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); min-height: var(--hd-h); }
.brand { flex: 0 0 auto; display: flex; align-items: center; }

.wm {
  height: 24px; width: auto;
  aspect-ratio: 2399 / 651;
  object-fit: cover;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .wm { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); margin-right: auto; }
.nav a {
  position: relative;
  padding: 6px 0;
  color: var(--encre-faible);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color var(--duree) var(--courbe);
}
.nav a::after {
  content: "";
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duree) var(--courbe);
}
.nav a:hover { color: var(--encre); }
.nav a:hover::after, .nav a[aria-current]::after, .nav a.on::after { transform: scaleX(1); }
.nav a[aria-current], .nav a.on { color: var(--encre); }

.hd-end { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.client {
  padding: 7px 0;
  border-bottom: 1px solid var(--trait);
  font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap;
  transition: border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.client:hover { border-bottom-color: var(--accent); color: var(--accent-survol); }
.lang {
  color: var(--beton);
  font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.lang:hover { color: var(--accent-survol); }

.theme {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.theme::before {
  content: "";
  width: 13px; height: 13px;
  border: 1px solid var(--beton);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--beton) 50%, transparent 50%);
  transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.theme:hover::before { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }

.burger { display: none; width: 34px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.burger span, .burger span::before, .burger span::after {
  display: block; width: 18px; height: 1px; background: var(--encre);
  transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.burger span { margin: 0 auto; position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* sous-rubrique */
.nav-g { position: relative; display: inline-flex; align-items: center; }
.nav-g::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.caret {
  width: 4px; height: 4px; margin-left: 8px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .6;
}
.sous {
  position: absolute; top: calc(100% + 12px); left: -18px; z-index: 10;
  display: grid; min-width: 250px; padding: 10px 0;
  background: var(--fond);
  border: 1px solid var(--trait);
  box-shadow: 0 18px 40px -20px var(--ombre);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe),
              visibility var(--duree) step-end;
}
.nav-g:hover .sous, .nav-g:focus-within .sous {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.sous a { padding: 10px 20px; white-space: nowrap; }
.sous a::after { display: none; }
.sous a:hover { background: var(--voile); color: var(--encre); }

/* =========================================================================
   SOMMAIRE EN MARGE — le site se tient comme un rapport
   ========================================================================= */

.doc { display: block; }
.doc-in {
  width: 100%; max-width: var(--laize);
  margin-inline: auto;
  padding-inline: var(--marge);
}

@media (min-width: 1100px) {
  .doc-in:not(.seul) {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  .som {
    position: sticky;
    top: calc(var(--hd-h) + 40px);
    padding-top: 6px;
  }
  .som-t {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--trait);
    color: var(--beton);
    font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  }
  .som li { margin-bottom: 11px; }
  .som a {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 6px;
    color: var(--encre-faible);
    font-size: .8125rem;
    line-height: 1.35;
    transition: color var(--duree) var(--courbe);
  }
  .som a span { color: var(--beton); font-variant-numeric: tabular-nums; }
  .som a:hover, .som a.ici { color: var(--encre); }
  .som a.ici span { color: var(--accent); }
}
@media (max-width: 1099px) { .som { display: none; } }

/* =========================================================================
   SECTIONS
   ========================================================================= */

.blk { padding-block: var(--haut); border-top: 1px solid var(--trait); }
.blk:first-child { border-top: 0; }
/* La laize et les marges sont portées par .doc-in : à l'intérieur, tout
   s'aligne sur la même verticale, l'ouverture comme les sections. */
.doc-in .wrap { max-width: none; padding-inline: 0; }
.blk.alt { background: none; }                        /* aucune bande : le filet suffit */

html.js .blk { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--courbe), transform .55s var(--courbe); }
html.js .blk.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .blk { opacity: 1; transform: none; } }

/* Le numéro porte la hiérarchie. Le titre n'a pas à crier. */
.sh { position: relative; margin-bottom: .7em; }
.sh .no {
  display: block;
  margin-bottom: 1.1em;
  color: var(--beton);
  font-family: var(--texte);
  font-size: .6875rem; font-weight: 600; letter-spacing: .22em;
}
.sh .no::after {
  content: "";
  display: inline-block;
  width: 34px; height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background: var(--trait);
}

/* =========================================================================
   OUVERTURE — les mots d'abord, la photo ensuite
   ========================================================================= */

/* L'accueil porte une phrase courte : elle peut occuper toute la place.
   Les titres de rubrique, eux, font jusqu'à trois propositions ; au-delà de
   quatre lignes un titre cesse d'être un titre, d'où la mesure plus large
   et le corps plus sage sur les pages intérieures. */
.une { padding-block: clamp(64px, 9vw, 150px) clamp(40px, 5vw, 72px); }
.une h1 {
  max-width: 17ch;
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4rem);
  letter-spacing: -.038em;
}
.une .lede { margin-top: 1.1em; }
.une .acts { margin-top: 2.4em; }

/* Figure de rapport : pleine largeur, à ses proportions d'origine, légendée.
   Une courbe ou une capture d'écran ne se recadre pas et ne se met pas en
   vignette : elle se lit. */
.texte { max-width: 68ch; }
.fig { margin-top: clamp(34px, 4vw, 56px); }
.fig img { width: 100%; height: auto; background: var(--planche); }
.fig figcaption, .plat figcaption {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding-top: 12px;
  color: var(--beton);
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.fig figcaption b, .plat figcaption b { color: var(--accent); font-weight: 600; }
.espace { margin-top: clamp(44px, 5vw, 76px); }

.plat { margin-top: clamp(32px, 4vw, 56px); }
.plat img { width: 100%; aspect-ratio: 50 / 21; object-fit: cover; background: var(--planche); }
.plat figcaption {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding-top: 12px;
  color: var(--beton);
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.plat figcaption b { color: var(--accent); font-weight: 600; }

.hero { padding-block: clamp(56px, 7vw, 120px) clamp(28px, 3.5vw, 52px); }
.hero h1 { max-width: 24ch; }
.hero .lede { margin-top: 1.1em; }
.hero-img { margin-top: clamp(28px, 3.5vw, 52px); background: var(--planche); }
.hero-img img { width: 100%; aspect-ratio: 50 / 21; object-fit: cover; }

.intro .big { margin: 0; }
.outro { text-align: left; }
.outro .big, .outro .lede { margin-inline: 0; }
.outro .acts { justify-content: flex-start; }

/* =========================================================================
   GRILLES
   ========================================================================= */

.svcs { display: grid; gap: clamp(36px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc { display: flex; flex-direction: column; }
.svc-i { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: 24px; background: var(--planche); }
.svc-t h3 { font-size: 1.1875rem; }
.svc-t .lede { margin: .6em 0 1.1em; font-size: 1rem; }
.svc-t p { color: var(--encre-faible); font-size: .9375rem; }
.svc-t .acts { margin-top: auto; padding-top: 1.4em; }

.whys { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); counter-reset: w; }
@media (min-width: 760px) { .whys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .whys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-i {
  counter-increment: w;
  padding: 26px 26px 26px 0;
  border-top: 1px solid var(--trait);
}
.why-i h3 { margin-bottom: .6em; }
.why-i h3::before {
  content: counter(w, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--beton);
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em;
}
.why-i p { color: var(--encre-faible); font-size: .9375rem; }

.cards3, .cards4 { display: grid; gap: 0 clamp(24px, 3vw, 44px); margin-top: clamp(30px, 3.6vw, 48px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cards3, .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cards3 > li, .cards4 > li { padding: 22px 20px 22px 0; border-top: 1px solid var(--trait); }
.cards3 > li :is(h3, h4), .cards4 > li :is(h3, h4) { margin-bottom: .55em; font-size: 1rem; }
.cards3 > li p, .cards4 > li p { color: var(--encre-faible); font-size: .9375rem; }

.duo, .fin-g, .bio {
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr); align-items: start;
}
/* Le fond de planche ne va que derrière les photographies. La marque
   partenaire est un fichier transparent : lui poser un fond revient à la
   mettre dans une boîte noire. */
.duo-i img, .bio figure img { width: 100%; height: auto; background: var(--planche); }
.fin-i img { width: 100%; height: auto; }
.duo-i.small img { max-width: 300px; }
.duo > div > p, .duo > div > ul, .bio > div > p { max-width: 58ch; }
.duo h3 { margin-bottom: .7em; font-size: 1.1875rem; }
.duo + .duo { margin-top: clamp(44px, 5vw, 80px); }
@media (min-width: 860px) {
  .duo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .duo.rev > :first-child { order: 2; }
  .fin-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .bio { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
}

figure { margin: 0; }
figcaption { margin-top: 14px; color: var(--beton); font-size: .8125rem; }
figcaption strong { display: block; color: var(--encre); font-size: .9375rem; font-weight: 600; }

.marque { display: block; width: 100%; max-width: 280px; }
.marque .logo { width: 100%; height: auto; }
.marque .sombre { display: none; }
[data-theme="dark"] .marque .clair { display: none; }
[data-theme="dark"] .marque .sombre { display: block; }

.pils { display: grid; gap: 0 clamp(24px, 3vw, 44px); grid-template-columns: minmax(0, 1fr); margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 820px) { .pils { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pil { padding: 22px 20px 22px 0; border-top: 1px solid var(--trait); }
.pil h3 { margin-bottom: .7em; }
.pil p { color: var(--encre-faible); font-size: .9375rem; }

/* =========================================================================
   LISTES, ÉTAPES, PHASES
   ========================================================================= */

.ticks > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: .7em;
  font-size: .9375rem;
  line-height: 1.6;
}
.ticks > li::before {
  content: "";
  position: absolute; left: 0; top: .78em;
  width: 14px; height: 1px;
  background: var(--accent);
}
.ticks > li:last-child { margin-bottom: 0; }

.steps { margin-top: clamp(30px, 3.6vw, 48px); }
.step {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding: 26px 0;
  border-top: 1px solid var(--trait);
}
/* Pas de filet de clôture : celui de la section suivante le ferait en
   double, à quelques pixels d'écart. La dernière ligne s'arrête, voilà tout. */
.num {
  display: block;
  color: var(--beton);
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em;
  line-height: 2;
}
.step h3 { margin-bottom: .5em; }
.step p { max-width: 62ch; color: var(--encre-faible); font-size: .9375rem; }

.phases { margin-top: clamp(26px, 3vw, 42px); counter-reset: ph; }
.phase {
  counter-increment: ph;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding: 26px 0;
  border-top: 1px solid var(--trait);
}

/* La phase contient un titre et un paragraphe, plus le numéro : trois
   éléments pour deux colonnes. Sans cette règle, le paragraphe retombe dans
   la colonne du numéro et se brise mot par mot sur 72 pixels. */
.phase::before {
  content: counter(ph, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  color: var(--beton);
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em;
  line-height: 2;
}
.phase > * { grid-column: 2; }
.phase h3 { margin-bottom: .5em; }
.phase p { max-width: 62ch; color: var(--encre-faible); font-size: .9375rem; }

/* =========================================================================
   FICHES DE MISSION — des colonnes de rapport, pas des cartes
   ========================================================================= */

.fiches { display: grid; gap: 0 clamp(26px, 3vw, 48px); grid-template-columns: minmax(0, 1fr); margin-top: clamp(30px, 3.6vw, 48px); }
@media (min-width: 900px) { .fiches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fiche { display: flex; flex-direction: column; padding: 26px 0 32px; border-top: 2px solid var(--encre); }
.tag {
  display: block;
  margin-bottom: 16px;
  color: var(--accent-survol);
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.fiche h3 { font-size: 1.25rem; }
.fiche header .lede { margin: .5em 0 0; font-size: .9375rem; }
.fiche > p { margin-top: 1.2em; color: var(--encre-faible); font-size: .9375rem; }

.fdl { margin-top: 1.6em; padding-top: 1.3em; border-top: 1px solid var(--trait); }
.fdl h4 {
  margin-bottom: .9em;
  color: var(--beton);
  font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}
.fdl p { max-width: 62ch; font-size: .9375rem; color: var(--encre-faible); }
.fdl.prix p { color: var(--encre); }
.fdl.prix .amount {
  margin-bottom: .35em;
  font-size: clamp(1.625rem, 1.35rem + 1vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.03em;
}
.fdl.prix .tva { margin-top: .8em; color: var(--beton); font-size: .8125rem; }
.fiche .acts { margin-top: auto; padding-top: 1.8em; }

.livr { margin-top: clamp(36px, 4vw, 60px); }
.livr > h3 { margin-bottom: 1.1em; font-size: 1.1875rem; }
.phs { display: grid; gap: 0 clamp(22px, 2.6vw, 40px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .phs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ph { padding: 20px 16px 20px 0; border-top: 1px solid var(--trait); }
.ph h4 { margin-bottom: 1em; font-size: .9375rem; }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq-cols { display: grid; gap: clamp(40px, 4.5vw, 72px) clamp(32px, 3.5vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .faq-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fbloc .sh { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); margin-bottom: .9em; }
.fbloc .sh .no { display: none; }

.qas { border-top: 1px solid var(--trait); }
.qa { border-bottom: 1px solid var(--trait); }
.qa summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 15px 0; cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { flex: 1 1 auto; font-size: .9375rem; font-weight: 500; line-height: 1.5; transition: color var(--duree) var(--courbe); }
.qa summary:hover h3, .qa[open] summary h3 { color: var(--accent-survol); }
.qa[open] summary h3 { font-weight: 600; }
.plus { position: relative; flex: 0 0 auto; width: 12px; height: 12px; margin-top: .34em; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--beton); transition: transform var(--duree) var(--courbe), background var(--duree) var(--courbe); }
.plus::before { top: 50%; left: 0; width: 12px; height: 1px; transform: translateY(-50%); }
.plus::after { left: 50%; top: 0; width: 1px; height: 12px; transform: translateX(-50%); }
.qa[open] .plus::after { transform: translateX(-50%) scaleY(0); }
.qa[open] .plus::before { background: var(--accent); }
.qa > div { padding: 0 0 18px 28px; }
.qa > div p { color: var(--encre-faible); font-size: .9375rem; line-height: 1.7; }

.cadre-t p { max-width: 62ch; font-size: .9375rem; line-height: 1.7; color: var(--encre-faible); }
.cadre-t > p:first-child { color: var(--encre); }
.cadre-t ul { margin: 1.3em 0; }
.cadre-t li {
  position: relative; margin-bottom: 1em; padding-left: 26px;
  max-width: 62ch; font-size: .9375rem; line-height: 1.7; color: var(--encre-faible);
}
.cadre-t li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 1px; background: var(--accent); }
.cadre-t li strong { color: var(--encre); font-weight: 600; }

/* =========================================================================
   CONTACT
   ========================================================================= */

.cgrid { display: grid; gap: clamp(36px, 4vw, 72px); grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .cgrid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }

.form { display: grid; gap: 22px clamp(18px, 2.2vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.fld.full, .consent.full, .form-foot.full, .form-msg { grid-column: 1 / -1; }
.fld { position: relative; display: flex; flex-direction: column; gap: 8px; }
.fld label, .consent span { color: var(--beton); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* Champs sans boîte : une ligne, comme sur un formulaire imprimé. */
.fld input, .fld select, .fld textarea {
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  background: none;
  color: var(--encre);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--duree) var(--courbe);
}
.fld textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.fld select { appearance: none; padding-right: 28px; cursor: pointer; }
.fld:has(select)::after {
  content: ""; position: absolute; right: 4px; bottom: 16px;
  width: 6px; height: 6px;
  border-right: 1px solid var(--beton); border-bottom: 1px solid var(--beton);
  transform: rotate(45deg); pointer-events: none;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--accent); }
.fld.err input, .fld.err select, .fld.err textarea { border-bottom-color: var(--accent); }
.fld.err label { color: var(--accent-survol); }

.consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; cursor: pointer; }
.consent input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); }
.consent span { color: var(--encre-faible); font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.55; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; }
.form-foot small { color: var(--beton); font-size: .75rem; }
.form-msg { display: none; margin: 0; font-size: .875rem; }
.form-msg.show { display: block; padding: 12px 0 0; border-top: 1px solid var(--accent); }
.form-msg.bad { border-top-color: var(--beton); }

.aside { border-top: 2px solid var(--encre); padding-top: 24px; }
.aside h3 { margin-bottom: 1.3em; font-size: 1rem; }
.aside .it + .it { margin-top: 1.6em; padding-top: 1.6em; border-top: 1px solid var(--trait); }
.aside p { font-size: .9375rem; color: var(--encre-faible); line-height: 1.65; }
main .aside .lines a { color: var(--encre); box-shadow: inset 0 -1px 0 0 var(--trait); }
main .aside .lines a:hover { color: var(--accent-survol); box-shadow: inset 0 -1px 0 0 var(--accent); }

/* Cal.com pose lui-même la hauteur du cadre : une hauteur minimale imposée
   ici l'emporterait et laisserait une bande vide sous le calendrier. */
.cal { margin-top: clamp(26px, 3vw, 40px); border: 1px solid var(--trait); }
.cal iframe { width: 100%; border: 0; display: block; }
.cal iframe[data-secours] { height: 620px; }
.cal:not(.ready) { display: none; }
.sign .big { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); }

/* =========================================================================
   PAGES LÉGALES
   ========================================================================= */

.legal { max-width: 74ch; }
.art + .art { margin-top: clamp(34px, 3.8vw, 52px); }
.art h2 {
  margin-bottom: .9em; padding-bottom: .55em;
  border-bottom: 1px solid var(--trait);
  font-family: var(--texte); font-size: 1rem; font-weight: 600; letter-spacing: 0;
}
.art p { color: var(--encre-faible); font-size: .9375rem; line-height: 1.72; }
.err h1 { max-width: 24ch; }

/* =========================================================================
   PIED DE PAGE — sombre dans les deux thèmes
   ========================================================================= */

.ft {
  padding-block: clamp(52px, 6vw, 88px) 30px;
  background: var(--ft-fond);
  color: var(--ft-encre);
  border-top: 1px solid var(--ft-trait);
}
.fcols { display: grid; gap: clamp(30px, 3.6vw, 52px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.fc h4 { margin-bottom: 1.3em; color: var(--ft-faible); font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.fc li { margin-bottom: .7em; font-size: .9375rem; line-height: 1.55; color: var(--ft-faible); }
.fc li:last-child { margin-bottom: 0; }
.fc a { color: var(--ft-encre); transition: color var(--duree) var(--courbe); }
.fc a:not(.fk):hover { color: var(--vert-clair); }
.fc .cl { display: inline-block; padding: 7px 0; border-bottom: 1px solid var(--ft-trait); font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.fc .cl:hover { border-bottom-color: var(--vert-clair); }

/* La marque de l'Ordre est blanche sur fond transparent : sur ce fond
   constamment sombre, elle se pose telle quelle, sans inversion. */
.oa { height: 25px; width: auto; margin-bottom: 20px; }

.fin { margin-top: 1.8em; padding-top: 1.5em; border-top: 1px solid var(--ft-trait); }
.fin span { display: block; color: var(--ft-faible); font-size: .8125rem; line-height: 1.5; }
.fc .fk { display: inline-flex; align-items: center; gap: 10px; margin-top: .8em; font-size: .875rem; font-weight: 600; color: var(--ft-encre); transition: color var(--duree) var(--courbe); }
.fc .fk:hover, .fc .fk:focus-visible { color: var(--or); }

.fbot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; margin-top: clamp(40px, 4.5vw, 64px); padding-top: 24px; border-top: 1px solid var(--ft-trait); }
.fbot p { margin: 0; color: var(--ft-faible); font-size: .75rem; }
.fsoc, .flegal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* Logos des réseaux. Fichiers officiels des packs, servis tels quels : ni
   recoloration, ni masque, ni filtre, ce qui serait une modification du logo
   et que les quatre marques interdisent. Le fond étant toujours sombre, c'est
   toujours la version blanche ou claire du pack qui sert.

   29 px pour les quatre, le minimum exigé par Instagram, avec autour un espace
   libre égal à la moitié de cette taille. L'effet de survol porte sur le fond
   du bouton, jamais sur le tracé. */
.fsoc { gap: 15px; }
.fsoc a.rs:not(.mot) {
  display: grid;
  place-items: center;
  width: 59px; height: 59px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  transition: background var(--duree) var(--courbe);
}
.fsoc a.rs:not(.mot):hover { background: rgba(236, 235, 230, .08); }
.fsoc .ico { width: 29px; height: 29px; object-fit: contain; display: block; }
.fsoc .ico.clair { display: none; }
.fsoc .ico.sombre { display: block; }

.fsoc a.mot { padding: 5px 0; border-bottom: 1px solid var(--ft-trait); color: var(--ft-faible); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe); }
.fsoc a.mot:hover { color: var(--ft-encre); border-bottom-color: var(--vert-clair); }
.flegal a { color: var(--ft-faible); font-size: .75rem; }
.flegal a:hover { color: var(--ft-encre); }

/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 1080px) { .client { display: none; } }

@media (max-width: 960px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--hd-h) 0 0; z-index: 90;
    display: block; margin: 0; padding: 30px var(--marge) 50px;
    background: var(--fond); border-top: 1px solid var(--trait);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe), visibility var(--duree) step-end;
  }
  body.menu-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
  .nav a { display: block; padding: 16px 0; border-bottom: 1px solid var(--trait); color: var(--encre); font-size: .8125rem; }
  .nav a::after { display: none; }
  .nav-g { display: block; }
  .nav-g::after, .caret { display: none; }
  .sous { position: static; display: block; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .sous a { padding: 14px 0 14px 22px; color: var(--encre-faible); }
  .sous a:hover { background: none; }
}

@media (max-width: 760px) {
  :root { --hd-h: 60px; }
  .wm { height: 21px; }
  .step, .phase { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .plat img, .hero-img img { aspect-ratio: 16 / 10; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .btn { justify-content: space-between; }
  .fbot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  :root { --marge: 18px; }
  .why-i, .cards3 > li, .cards4 > li, .pil, .ph { padding-right: 0; }
}

@media print {
  .hd, .ft, .som, .acts, .theme, .burger, .skip, .cal { display: none !important; }
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .blk { padding-block: 16pt; opacity: 1 !important; transform: none !important; }
  .qa > div { display: block !important; }
}