/* ==========================================================================
   MZ CONCEPTION — feuille de style
   Parti pris : "instrument de mesure". Sombre, precis, trame.
   Palette derivee de la plaquette commerciale + logo (magenta #C30E75).
   ========================================================================== */

/* ---------- 0. Polices --------------------------------------------------- */
/* Hebergees sur le site, et non chez Google : aucune requete vers un tiers,
   donc aucune adresse IP de visiteur transmise, et une poignee de main TLS
   en moins au chargement. Inter et Space Grotesk sont sous licence SIL OFL,
   qui autorise cet hebergement.
   Les deux fichiers sont des polices variables : un seul fichier couvre
   toutes les graisses de la famille. unicode-range limite leur usage au
   latin ; au-dela, la pile systeme prend le relais. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Fonds — bleus tres desatures, jamais du gris pur */
  --ink-900: #050C11;
  --ink-850: #08121A;
  --ink-800: #0B1822;
  --ink-750: #0F212D;
  --ink-700: #142B39;

  /* Traits */
  --line:        rgba(147, 167, 180, .16);
  --line-strong: rgba(147, 167, 180, .30);
  --line-faint:  rgba(147, 167, 180, .08);

  /* Texte */
  --fg:       #E9F2F7;
  --fg-soft:  #B9CBD6;
  --fg-muted: #8DA2B0;

  /* Accents */
  --accent:      #22D3EE;   /* cyan — la couleur du scan */
  --accent-glow: rgba(34, 211, 238, .18);
  --brand:       #C30E75;   /* magenta du logo */
  --brand-soft:  #E4519E;
  --warm:        #FF8A3D;   /* thermographie */

  /* Echelle typographique */
  --t-2xs: .6875rem;  /* 11 */
  --t-xs:  .75rem;    /* 12 */
  --t-sm:  .875rem;   /* 14 */
  --t-md:  1rem;      /* 16 */
  --t-lg:  1.125rem;  /* 18 */
  --t-xl:  1.375rem;  /* 22 */
  --t-2xl: 1.75rem;   /* 28 */
  --t-3xl: 2.25rem;   /* 36 */
  --t-4xl: 3rem;      /* 48 */
  --t-5xl: 4.25rem;   /* 68 */

  /* Espacement */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* Rayons — faibles, on est dans le technique */
  --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  /* Mouvement */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  200ms;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 76px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--ink-900);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body[data-locked="true"] { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent); color: var(--ink-900); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 3. Utilitaires ---------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--accent); color: var(--ink-900);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--s-4); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Etiquette de section : capitale espacee precedee d'un trait */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--muted { color: var(--fg-muted); }

/* Regle graduee — motif signature, repris des mires de releve */
.tick-rule {
  height: 10px; width: 100%;
  background-image:
    linear-gradient(to right, var(--line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 24px 10px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: repeat-x, no-repeat;
  opacity: .8;
}

/* ---------- 4. Sections -------------------------------------------------- */
.section { padding-block: clamp(72px, 9vw, 132px); position: relative; }
.section + .section { border-top: 1px solid var(--line-faint); }
.section--tint { background: linear-gradient(to bottom, var(--ink-850), var(--ink-900) 70%); }

.section-head { display: grid; gap: var(--s-4); max-width: 62ch; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 { font-size: clamp(1.9rem, 4vw, var(--t-4xl)); }
.section-head p { color: var(--fg-soft); font-size: var(--t-lg); }

.section-head--split { max-width: none; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.2fr .8fr; align-items: end; gap: var(--s-7); }
  .section-head--split .sh-main { grid-column: 1; }
  .section-head--split .sh-aside { grid-column: 2; justify-self: end; text-align: right; }
}
.section-head--split .sh-main { display: grid; gap: var(--s-4); }

/* ---------- 5. Boutons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-6);
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .04em;
  border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary { background: var(--accent); color: #04222A; }
.btn--primary:hover { background: #4FE0F5; transform: translateY(-1px); box-shadow: 0 10px 30px -10px var(--accent-glow), 0 0 0 6px var(--accent-glow); }
.btn--primary:active { transform: translateY(0); background: #16BBD6; }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(34,211,238,.06); }
.btn--ghost:active { background: rgba(34,211,238,.12); }

.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: #D8207F; transform: translateY(-1px); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- 6. En-tete --------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), height var(--dur) var(--ease);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(5,12,17,.92), rgba(5,12,17,0));
  transition: opacity var(--dur) var(--ease);
}
.header.is-stuck {
  height: 64px;
  background: rgba(5, 12, 17, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.header.is-stuck::before { opacity: 0; }
.header .wrap { display: flex; align-items: center; gap: var(--s-5); }

.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.brand img { height: 24px; width: auto; }
.brand span {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .30em; text-transform: uppercase;
  color: var(--fg-soft); padding-top: 3px;
}

.nav { display: none; }
@media (min-width: 1040px) { .nav { display: flex; align-items: center; gap: 2px; } }
.nav a {
  position: relative; padding: 10px 14px;
  font-size: var(--t-sm); color: var(--fg-soft); border-radius: var(--r-xs);
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: var(--fg); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav a[aria-current="true"] { color: var(--accent); }

.header-cta { display: none; }
@media (min-width: 1040px) { .header-cta { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.burger:hover { border-color: var(--accent); }
@media (min-width: 1040px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--fg); position: relative; transition: background var(--dur) var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--fg);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Tiroir mobile */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(5, 12, 17, .97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: grid; align-content: center; gap: 2px;
  padding: var(--s-8) var(--gutter);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  overflow-y: auto;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 5.5vw, 1.9rem); font-weight: 500;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line-faint);
  display: flex; align-items: baseline; gap: var(--s-4);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.drawer a:hover { color: var(--accent); padding-left: var(--s-3); }
.drawer a i {
  font-style: normal; font-size: var(--t-xs); color: var(--fg-muted);
  font-variant-numeric: tabular-nums; letter-spacing: .1em;
}
.drawer .btn { margin-top: var(--s-5); }

/* ---------- 7. Heros ----------------------------------------------------- */
.hero {
  position: relative; min-height: min(94vh, 900px);
  display: flex; align-items: flex-end; overflow: hidden;
  padding-top: var(--header-h);
}
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to top,   var(--ink-900) 2%, rgba(5,12,17,.74) 38%, rgba(5,12,17,.32) 74%),
    linear-gradient(to right, rgba(5,12,17,.94) 0%, rgba(5,12,17,.58) 52%, rgba(5,12,17,.20) 100%);
}
/* Trame de mesure superposee */
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--line-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-faint) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(120% 90% at 18% 78%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 90% at 18% 78%, #000 18%, transparent 76%);
}

.hero__inner { padding-block: clamp(48px, 7vw, 96px); width: 100%; }
.hero h1 {
  font-size: clamp(2.3rem, 6.2vw, var(--t-5xl));
  max-width: 16ch; margin-block: var(--s-5);
  letter-spacing: -.035em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lede { max-width: 54ch; font-size: clamp(var(--t-md), 1.6vw, var(--t-lg)); color: var(--fg-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.hero__meta {
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 820px) { .hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__meta strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3.2vw, var(--t-3xl)); font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--fg);
}
.hero__meta span { font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: .04em; }

/* ---------- 8. Cartes expertises ---------------------------------------- */
.grid-4 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); background: var(--ink-800); }
/* Equerre de repere en angle — motif signature */
.card::after {
  content: ""; position: absolute; right: 12px; top: 12px; width: 12px; height: 12px;
  border-top: 1px solid var(--accent); border-right: 1px solid var(--accent);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.card:hover::after { opacity: .9; }

.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-800); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,18,26,.94) 3%, rgba(8,18,26,.08) 62%);
}
.card__idx {
  position: absolute; left: 14px; bottom: 11px; z-index: 1;
  font-family: "Space Grotesk", sans-serif; font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .2em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.card__body { padding: var(--s-5); display: grid; gap: var(--s-3); flex: 1; align-content: start; }
.card__body h3 { font-size: var(--t-xl); }
.card__body p { color: var(--fg-soft); font-size: var(--t-sm); }

.taglist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-2); }
.tag {
  font-size: var(--t-2xs); letter-spacing: .06em; color: var(--fg-muted);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 4px 10px; background: rgba(147,167,180,.04);
}

/* ---------- 9. Metiers (liste large, asymetrique) ----------------------- */
.trade {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr; align-items: start;
  padding-block: var(--s-6);
  border-top: 1px solid var(--line-faint);
}
.trade:last-child { border-bottom: 1px solid var(--line-faint); }
@media (min-width: 880px) {
  .trade { grid-template-columns: 64px 1.05fr 1fr; gap: var(--s-6); align-items: center; }
}
.trade__num {
  font-family: "Space Grotesk", sans-serif; font-size: var(--t-2xl); font-weight: 500;
  color: var(--ink-700); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  transition: color var(--dur) var(--ease);
}
.trade:hover .trade__num { color: var(--accent); }
.trade__text h3 { font-size: clamp(var(--t-xl), 2.4vw, var(--t-2xl)); margin-bottom: var(--s-2); }
.trade__text p { color: var(--fg-soft); font-size: var(--t-sm); max-width: 46ch; }
.trade__media { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.trade__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: filter var(--dur) var(--ease), transform 600ms var(--ease); }
/* Variante « image entière » : aucun recadrage, le visuel garde ses proportions. */
.trade__media--full { aspect-ratio: auto; }
.trade__media--full img { height: auto; object-fit: contain; }

/* Visuel plus large que le cadre : on ancre à gauche pour que le recadrage
   automatique rogne le ciel à droite plutôt que l'opérateur. */
.trade__media--bias-left img { object-position: 30% center; }
.trade:hover .trade__media img { filter: saturate(1.05); transform: scale(1.03); }

/* ---------- 10. Methode (frise 8 etapes) -------------------------------- */
/* 8 étapes : 2×4 en grand écran, 2×2 en petit — jamais de dernière ligne orpheline */
.steps { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 480px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step {
  position: relative; padding: var(--s-5) var(--s-4) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: linear-gradient(to bottom, var(--ink-850), var(--ink-900));
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.step:hover { border-color: var(--accent); background: var(--ink-800); }
.step__n {
  display: block; font-family: "Space Grotesk", sans-serif;
  font-size: var(--t-2xs); letter-spacing: .18em; color: var(--accent);
  font-variant-numeric: tabular-nums; margin-bottom: var(--s-3);
}
.step__t { font-family: "Space Grotesk", sans-serif; font-size: var(--t-sm); font-weight: 500; line-height: 1.3; }
.step__d { font-size: var(--t-xs); color: var(--fg-muted); margin-top: 6px; line-height: 1.5; }

.deliverables {
  margin-top: var(--s-6); padding: var(--s-5);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  display: grid; gap: var(--s-4);
}
@media (min-width: 780px) { .deliverables { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-6); } }
.deliverables ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.deliverables li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--fg-soft);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px;
  background: var(--ink-850);
}
.deliverables li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- 11. Equipements --------------------------------------------- */
/* 7 instruments : 4 + 3 en grand écran */
.gear { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px)  { .gear { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .gear { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gear__item {
  display: grid; gap: var(--s-3); align-content: start;
  background:
    radial-gradient(78% 58% at 50% 14%, rgba(34,211,238,.07), transparent 70%),
    var(--ink-850);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4) var(--s-4);
  text-align: center;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gear__item:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.gear__shot { height: 124px; display: grid; place-items: center; }
.gear__shot img {
  max-height: 124px; width: auto; object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.55));
  transition: transform var(--dur) var(--ease);
}
.gear__item:hover .gear__shot img { transform: scale(1.06); }
.gear__item h3 { font-size: var(--t-sm); font-weight: 600; }
.gear__item p { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5; }

.software { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
@media (min-width: 780px) { .software { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-6); } }
.software ul { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.software li {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); background: var(--ink-850); min-width: 158px;
}
.software strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: var(--t-sm); font-weight: 500; }
.software span { font-size: var(--t-xs); color: var(--fg-muted); }

/* ---------- 12. Engagement ---------------------------------------------- */
.pledge { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .pledge { grid-template-columns: .78fr 1.22fr; gap: var(--s-9); align-items: start; } }

.bignum {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900) 72%);
  padding: var(--s-6); position: relative; overflow: hidden;
}
.bignum::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--line-faint) 1px, transparent 1px);
  background-size: 32px 100%;
  mask-image: linear-gradient(to bottom, #000, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
}
.bignum > * { position: relative; }
.bignum strong {
  display: block; font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.6rem, 11vw, 6.5rem); font-weight: 600; line-height: .9;
  letter-spacing: -.06em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.bignum > p { color: var(--fg-soft); margin-top: var(--s-3); font-size: var(--t-lg); }
.bignum ul { margin-top: var(--s-6); display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.bignum li { font-size: var(--t-sm); color: var(--fg-soft); display: flex; gap: var(--s-3); }
.bignum li::before { content: "—"; color: var(--accent); flex: none; }

.reason {
  display: grid; grid-template-columns: 38px 1fr; gap: var(--s-4);
  padding-block: var(--s-5); border-bottom: 1px solid var(--line-faint);
}
.reason:first-child { border-top: 1px solid var(--line-faint); }
.reason__n {
  font-family: "Space Grotesk", sans-serif; font-size: var(--t-sm); font-weight: 500;
  color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 4px;
}
.reason h3 { font-size: var(--t-lg); margin-bottom: 6px; }
.reason p { color: var(--fg-soft); font-size: var(--t-sm); max-width: 58ch; }

/* ---------- 13. Applications / marches ---------------------------------- */
.apps { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.app {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-5); background: var(--ink-850);
  display: grid; gap: var(--s-3); align-content: start;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.app:hover { border-color: var(--accent); background: var(--ink-800); }
.app__icon { width: 32px; height: 32px; color: var(--accent); }
.app__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.app h3 { font-size: var(--t-lg); }
.app p { font-size: var(--t-sm); color: var(--fg-soft); }

.markets { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.markets > span { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); margin-right: var(--s-2); }
.markets b {
  font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: var(--t-sm);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 7px 16px; color: var(--fg-soft);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.markets b:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 14. Zone d'intervention ------------------------------------- */
.zone { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 920px) { .zone { grid-template-columns: 1.15fr .85fr; gap: var(--s-7); align-items: start; } }
.zone__map { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-850); padding: var(--s-5); }
/* La carte est sur fond crème : on la présente comme un document posé sur le panneau. */
.zone__map img {
  width: 100%; height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
}
/* Les noms de départements restent du texte (référencement, lecteurs d'écran)
   même si la carte les porte déjà. Ils s'ajustent librement : jamais tronqués. */
.depts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-5); }
.depts li {
  font-size: var(--t-xs); color: var(--fg-soft); font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: 6px 10px; background: var(--ink-800);
  white-space: nowrap;
}
.depts li b { color: var(--accent); font-weight: 600; margin-right: 6px; }

/* ---------- 15. Contact -------------------------------------------------- */
.contact { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .contact { grid-template-columns: .92fr 1.08fr; gap: var(--s-9); align-items: start; } }

.contact__info { display: grid; gap: var(--s-5); align-content: start; }
.contact__line {
  display: grid; grid-template-columns: 1fr; gap: var(--s-1);
  padding-block: var(--s-3); border-bottom: 1px solid var(--line-faint);
}
@media (min-width: 460px) {
  /* colonne assez large pour « INTERLOCUTEUR », le plus long des libellés */
  .contact__line { grid-template-columns: 124px 1fr; gap: var(--s-4); align-items: baseline; }
}
.contact__line dt { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.contact__line dd { margin: 0; font-size: var(--t-lg); font-family: "Space Grotesk", sans-serif; word-break: break-word; }
.contact__line dd a { transition: color var(--dur) var(--ease); }
.contact__line dd a:hover { color: var(--accent); }

.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.field label .req { color: var(--brand-soft); }
.field input, .field textarea, .field select {
  background: var(--ink-850); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px var(--s-4); min-height: 48px;
  color: var(--fg); width: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #6E8494; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--line-strong); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); background: var(--ink-800);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 22px, calc(100% - 15px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-8);
}
.field select option { background: var(--ink-800); color: var(--fg); }
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field .err { font-size: var(--t-xs); color: #FFA8A8; display: none; align-items: center; gap: 6px; }
.field .err::before { content: "!"; display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 700; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea, .field[data-invalid="true"] select { border-color: #E5484D; }
.field[data-invalid="true"] .err { display: flex; }

.form__note { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.6; }
.form__note a { color: var(--fg-soft); text-decoration: underline; text-underline-offset: 2px; }

.form__status { font-size: var(--t-sm); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); display: none; }
.form__status[data-state="ok"]  { display: block; background: rgba(34,211,238,.10); border: 1px solid var(--accent); color: var(--fg); }
.form__status[data-state="err"] { display: block; background: rgba(229,72,77,.12); border: 1px solid #E5484D; color: #FFDCDC; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Bandeau d'appel final */
.cta-band {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(34,211,238,.12), transparent 62%),
    radial-gradient(70% 120% at 92% 100%, rgba(195,14,117,.14), transparent 60%),
    var(--ink-850);
}
.cta-band .wrap { padding-block: clamp(56px, 8vw, 96px); display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: 1.4fr auto; align-items: center; gap: var(--s-8); } }
.cta-band h2 { font-size: clamp(1.7rem, 3.6vw, var(--t-3xl)); max-width: 22ch; }
.cta-band p { color: var(--fg-soft); margin-top: var(--s-3); max-width: 52ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- 16. Pied de page -------------------------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--ink-900); padding-block: var(--s-8) var(--s-6); }
.footer__top { display: grid; gap: var(--s-7); }
@media (min-width: 880px) { .footer__top { grid-template-columns: 1.5fr 1fr 1.1fr; gap: var(--s-8); } }
.footer__brand .brand--lg { margin: 0 0 var(--s-5); align-items: center; gap: 14px; }
.footer__brand .brand--lg img { height: 34px; }
.footer__brand .brand--lg span { font-size: var(--t-sm); letter-spacing: .34em; color: var(--fg); }
.footer__brand p { color: var(--fg-muted); font-size: var(--t-sm); max-width: 40ch; }
.footer h3 { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-4); font-weight: 500; }
.footer li + li { margin-top: var(--s-1); }
/* Cibles tactiles : les liens isolés font au moins 24 px de haut (WCAG 2.5.8) */
.footer li a, .footer address a, .footer__bottom a, .contact__line dd a {
  display: inline-flex; align-items: center; min-height: 26px;
}
.footer li a, .footer address a { font-size: var(--t-sm); color: var(--fg-soft); transition: color var(--dur) var(--ease); }
.footer li a:hover, .footer address a:hover { color: var(--accent); }
.footer address { font-style: normal; display: grid; gap: var(--s-3); }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-faint);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); justify-content: space-between; align-items: center;
}
.footer__bottom p, .footer__bottom a { font-size: var(--t-xs); color: var(--fg-muted); }
.footer__bottom a:hover { color: var(--fg-soft); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---------- 17. Revelation au defilement --------------------------------
   Les etats masques sont conditionnes a la classe `js` posee en tete de page.
   Sans JavaScript — ou si le script echoue — le contenu reste simplement
   visible : rien n'est jamais cache de maniere irreversible.
   ------------------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }
.js .reveal-stagger.is-in > *:nth-child(7) { transition-delay: 360ms; }
.js .reveal-stagger.is-in > *:nth-child(8) { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- 18. Pages annexes ------------------------------------------- */
.doc { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 88px)); padding-bottom: clamp(64px, 9vw, 112px); }
.doc__inner { max-width: 74ch; }
.doc h1 { font-size: clamp(2rem, 5vw, var(--t-4xl)); margin-bottom: var(--s-4); }
.doc h2 { font-size: var(--t-xl); margin-top: var(--s-7); margin-bottom: var(--s-3); }
.doc p, .doc li { color: var(--fg-soft); }
.doc p + p { margin-top: var(--s-3); }
.doc ul { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.doc ul li { padding-left: var(--s-5); position: relative; }
.doc ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent); }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Un bouton posé dans une page de contenu garde son propre habillage : la
   règle .doc a ci-dessus l'emporterait sinon sur .btn--primary / .btn--ghost. */
.doc a.btn { text-decoration: none; }
.doc a.btn--primary { color: #04222A; }
.doc a.btn--ghost { color: var(--fg); }
.doc a.btn--ghost:hover { color: var(--accent); }
.doc__meta { font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: .06em; margin-bottom: var(--s-6); }
.doc__back { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); font-size: var(--t-sm); color: var(--fg-muted); transition: color var(--dur) var(--ease); }
.doc__back:hover { color: var(--accent); }

/* ---------- 19. Retour en haut ------------------------------------------ */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(11,24,34,.9); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); cursor: pointer; color: var(--fg-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--accent); color: var(--accent); }
.to-top svg { width: 16px; height: 16px; }

/* ---------- 20. Consentement aux traceurs -------------------------------- */
/* Banniere ancree en bas de fenetre, panneau de reglages en surcouche.
   Voir assets/js/consentement.js pour le mecanisme de blocage prealable. */

/* L'attribut hidden doit l'emporter : un selecteur de classe portant
   display bat la regle [hidden] du navigateur. */
.cookies__banniere[hidden],
.cookies__voile[hidden] { display: none !important; }

.cookies__banniere {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  display: flex; align-items: center; gap: var(--s-6);
  flex-wrap: wrap;
  padding: var(--s-5) var(--gutter);
  background: rgba(8, 18, 26, .97);
  border-top: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  animation: cookies-monte 320ms var(--ease) both;
}
@keyframes cookies-monte { from { transform: translateY(100%); } to { transform: none; } }

.cookies__corps { flex: 1 1 380px; min-width: 0; }
.cookies__corps h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--s-2);
}
.cookies__corps p {
  margin: 0; color: var(--fg-soft);
  font-size: var(--t-sm); line-height: 1.6; max-width: 68ch;
}

.cookies__actions {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; flex: none;
}
/* « Tout refuser » doit peser autant que « Tout accepter » : refuser ne
   peut pas etre plus difficile qu'accepter. */
.cookies__actions .btn { min-height: 44px; padding: 0 var(--s-5); }

.cookies__lien {
  background: none; border: 0; cursor: pointer;
  color: var(--fg-muted); font-family: inherit; font-size: var(--t-sm);
  text-decoration: underline; text-underline-offset: 3px;
  padding: var(--s-2);
  transition: color var(--dur) var(--ease);
}
.cookies__lien:hover { color: var(--accent); }

/* ----- Panneau de reglages ----- */
.cookies__voile {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: rgba(5, 12, 17, .78);
  animation: cookies-fondu 200ms var(--ease) both;
}
@keyframes cookies-fondu { from { opacity: 0; } to { opacity: 1; } }

.cookies__panneau {
  width: min(640px, 100%); max-height: min(80vh, 720px);
  display: flex; flex-direction: column;
  background: var(--ink-850);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}

.cookies__panneau-tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--line);
}
.cookies__panneau-tete h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--t-xl); font-weight: 600; margin: 0;
}
.cookies__fermer {
  background: none; border: 0; cursor: pointer; color: var(--fg-muted);
  padding: var(--s-2); border-radius: var(--r-sm); line-height: 0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cookies__fermer svg { width: 20px; height: 20px; }
.cookies__fermer:hover { color: var(--fg); background: rgba(147, 167, 180, .1); }

.cookies__cats { overflow-y: auto; padding: var(--s-4) var(--s-6); }
.cookies__cat { padding: var(--s-5) 0; border-bottom: 1px solid var(--line-faint); }
.cookies__cat:last-child { border-bottom: 0; }
.cookies__cat p {
  margin: var(--s-3) 0 0; color: var(--fg-muted);
  font-size: var(--t-sm); line-height: 1.6;
}
.cookies__cat-tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.cookies__cat-titre {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--t-md); font-weight: 500; color: var(--fg);
}
.cookies__toujours {
  font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-muted); white-space: nowrap;
}

/* ----- Interrupteur ----- */
.cookies__switch {
  display: inline-flex; align-items: center; gap: var(--s-4);
  cursor: pointer; min-width: 0;
}
.cookies__switch input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.cookies__piste {
  position: relative; flex: none;
  width: 44px; height: 24px; border-radius: var(--r-pill);
  background: var(--ink-700); border: 1px solid var(--line-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cookies__piste::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--fg-muted);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cookies__switch input:checked + .cookies__piste {
  background: var(--accent); border-color: var(--accent);
}
.cookies__switch input:checked + .cookies__piste::after {
  transform: translateX(20px); background: #04222A;
}
.cookies__switch input:focus-visible + .cookies__piste {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.cookies__switch input:disabled + .cookies__piste { opacity: .55; }
.cookies__switch input:disabled ~ .cookies__cat-titre { cursor: default; }

.cookies__panneau-pied {
  display: flex; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line);
}
.cookies__panneau-pied .btn { min-height: 44px; padding: 0 var(--s-5); }

@media (max-width: 560px) {
  /* Le titre de categorie et son badge tiennent mal cote a cote. */
  .cookies__cat-tete { flex-wrap: wrap; gap: var(--s-2); }
  .cookies__toujours { padding-left: 60px; }
}

@media (max-width: 720px) {
  .cookies__banniere { gap: var(--s-4); padding: var(--s-5) var(--gutter) var(--s-6); }
  .cookies__actions { width: 100%; }
  .cookies__actions .btn { flex: 1 1 auto; }
  .cookies__lien { width: 100%; text-align: center; }
  .cookies__panneau-pied { flex-direction: column-reverse; }
  .cookies__panneau-pied .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cookies__banniere, .cookies__voile { animation: none; }
  .cookies__piste, .cookies__piste::after { transition: none; }
}