/*!
 * styles.css — système de design du portfolio de Mike SOBTAMFO (« Précision d'ingénieur, chaleur éditoriale »).
 * Feuille commune à toutes les pages. Compléments : content.css (pages intérieures), forms.css, home.css.
 * Documentation : docs/portfolio-design-system.md · banc d'essai : styleguide.html
 */
@layer reset, tokens, base, layout, components, utilities, pages;

/* ===== RESET ===== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100vh; min-block-size: 100dvh; }
  img, picture, svg, video, canvas { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  p, h1, h2, h3, h4, h5, h6, li, dt, dd, figcaption, blockquote, summary { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  legend { padding: 0; }
  summary { cursor: pointer; }
  dialog { color: inherit; }
}

/* ===== TOKENS — primitives, sémantiques clairs, sémantiques sombres ===== */
@layer tokens {
  :root {
    color-scheme: light;

    /* Polices (auto-hébergées : fonts.css) */
    --font-sans: "Geist", "Geist Fallback", Arial, sans-serif;
    --font-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
    --font-mono: "Geist Mono", Menlo, "DejaVu Sans Mono", "Courier New", monospace;

    /* Primitives */
    --ink-950: #0A0F1A;
    --ink-900: #0D1321;
    --ink-850: #141C2E;
    --ink-800: #1A2438;
    --night-700: #1C2A4A;
    --paper-50: #FBF9F5;
    --paper-100: #F5F1EA;
    --paper-200: #ECE6DC;
    --paper-300: #E2DACB;
    --sand-100: #EDE8DF;
    --slate-600: #4A5163;
    --slate-500: #5A6070;
    --slate-400: #8C93A1;
    --slate-300: #AEB4C0;
    --amber-300: #F2C36D;
    --amber-400: #E9B04F;
    --amber-500: #E3A23B;
    --amber-800: #8A4B08;
    --led-300: #3CCB87;
    --led-500: #2BB673;
    --led-700: #1A7346;
    --red-700: #A12C1F;
    --red-300: #F59A8B;

    /* Sémantiques — thème clair (défaut) */
    --c-bg: var(--paper-100);
    --c-surface: var(--paper-200);
    --c-raised: var(--paper-50);
    --c-text: var(--ink-900);
    --c-text-2: var(--slate-600);
    --c-text-3: var(--slate-500);
    --c-accent: var(--amber-500);
    --c-on-accent: var(--ink-900);
    --c-accent-text: var(--amber-800);
    --c-led: var(--led-500);
    --c-led-text: var(--led-700);
    --c-danger: var(--red-700);
    --c-line: rgb(13 19 33 / 0.14);
    --c-line-strong: rgb(13 19 33 / 0.3);
    --c-grid: rgb(13 19 33 / 0.06);
    --c-grid-strong: rgb(13 19 33 / 0.085);
    --c-focus: var(--amber-800);
    --c-header: rgb(245 241 234 / 0.96);
    --c-btn-bg: var(--ink-900);
    --c-btn-fg: var(--paper-100);
    --c-btn-hover-bg: var(--amber-500);
    --c-btn-hover-fg: var(--ink-900);
    --c-tint: rgb(13 19 33 / 0.05);
    --c-brand-tile: var(--ink-900);
    --c-wa: var(--led-700);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .45 0 0 0 0 .45 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* grain neutre, commun aux deux thèmes */

    /* Typographie fluide (Utopia, 360 → 1440 px ; base 16 → 19 px, rapport 1,2 → 1,333) */
    --step--2: clamp(0.6944rem, 0.6859rem + 0.0379vi, 0.72rem);
    --step--1: clamp(0.8333rem, 0.8142rem + 0.0852vi, 0.8908rem);
    --step-0: clamp(1rem, 0.9375rem + 0.2778vi, 1.1875rem);
    --step-1: clamp(1.2rem, 1.0724rem + 0.5673vi, 1.5829rem);
    --step-2: clamp(1.44rem, 1.2166rem + 0.9927vi, 2.1101rem);
    --step-3: clamp(1.728rem, 1.3664rem + 1.607vi, 2.8127rem);
    --step-4: clamp(2.0736rem, 1.515rem + 2.4826vi, 3.7493rem);
    --step-5: clamp(2.4883rem, 1.6518rem + 3.7178vi, 4.9979rem);
    --step-6: clamp(2.986rem, 1.7606rem + 5.4462vi, 6.6622rem);
    --text-label: clamp(0.75rem, 0.7333rem + 0.0741vi, 0.8rem); /* 12 → 12,8 px, mono */
    --text-lead: clamp(1.125rem, 1.0417rem + 0.3704vi, 1.375rem);
    --text-ui: 0.9375rem;

    /* Espacement (Utopia : grille de 8 pt sur mobile) */
    --space-3xs: clamp(0.25rem, 0.2396rem + 0.0463vi, 0.2813rem);
    --space-2xs: clamp(0.5rem, 0.4792rem + 0.0926vi, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.7188rem + 0.1389vi, 0.8438rem);
    --space-s: clamp(1rem, 0.9583rem + 0.1852vi, 1.125rem);
    --space-m: clamp(1.5rem, 1.4375rem + 0.2778vi, 1.6875rem);
    --space-l: clamp(2rem, 1.9167rem + 0.3704vi, 2.25rem);
    --space-xl: clamp(3rem, 2.875rem + 0.5556vi, 3.375rem);
    --space-2xl: clamp(4rem, 3.8333rem + 0.7407vi, 4.5rem);
    --space-3xl: clamp(6rem, 5.75rem + 1.1111vi, 6.75rem);
    --space-s-l: clamp(1rem, 0.5833rem + 1.8519vi, 2.25rem);
    --space-m-xl: clamp(1.5rem, 0.875rem + 2.7778vi, 3.375rem);
    --space-l-2xl: clamp(2rem, 1.1667rem + 3.7037vi, 4.5rem);
    --space-xl-3xl: clamp(3rem, 1.75rem + 5.5556vi, 6.75rem);

    /* Rayons, ombres, profondeur */
    --radius-xs: 0.25rem;
    --radius-s: 0.375rem;
    --radius-m: 0.625rem;
    --radius-l: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgb(13 19 33 / 0.06), 0 2px 6px rgb(13 19 33 / 0.05);
    --shadow-2: 0 1px 2px rgb(13 19 33 / 0.06), 0 10px 30px -8px rgb(13 19 33 / 0.18);
    --shadow-3: 0 2px 6px rgb(13 19 33 / 0.08), 0 24px 60px -12px rgb(13 19 33 / 0.32);
    --z-header: 50; --z-bar: 40; --z-float: 45; --z-toast: 80; --z-skip: 100;

    /* Mouvement */
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 800ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Mise en page */
    --measure: 43.75em;
    --wrapper-max: 80rem;
    --gutter: var(--space-s-l);
    --header-h: 4.25rem;
    --header-h-sm: 3.5rem;
    --section-pad: var(--space-xl-3xl);
  }

  /* Thème sombre : un seul bloc, appliqué UNIQUEMENT si le visiteur l'a choisi (bouton du thème,
     clé ms-portfolio:theme = dark). Le réglage du système est ignoré : le site est clair pour tout le monde. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --c-bg: var(--ink-900); --c-surface: var(--ink-850); --c-raised: var(--ink-800);
    --c-text: var(--sand-100); --c-text-2: var(--slate-300); --c-text-3: #A3A9B6;
    --c-accent: var(--amber-400); --c-on-accent: var(--ink-900); --c-accent-text: var(--amber-400);
    --c-led-text: var(--led-300); --c-danger: var(--red-300);
    --c-line: rgb(237 232 223 / 0.14); --c-line-strong: rgb(237 232 223 / 0.3);
    --c-grid: rgb(237 232 223 / 0.05); --c-grid-strong: rgb(237 232 223 / 0.07);
    --c-focus: var(--amber-400); --c-header: rgb(13 19 33 / 0.96);
    --c-btn-bg: var(--amber-400); --c-btn-fg: var(--ink-900); --c-btn-hover-bg: var(--amber-300); --c-btn-hover-fg: var(--ink-900);
    --c-tint: rgb(237 232 223 / 0.06); --c-brand-tile: var(--night-700);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px -8px rgb(0 0 0 / 0.5);
    --shadow-3: 0 2px 6px rgb(0 0 0 / 0.35), 0 24px 60px -12px rgb(0 0 0 / 0.6);
  }
  /* .scheme-dark (v1) : plus de bande sombre en thème clair. La classe donne désormais une bande « papier 2 »
     (comme .section--surface) ; en thème sombre, elle descend d'un cran pour rester distincte. */
  .scheme-dark { --c-bg: var(--paper-200); --c-surface: var(--paper-300); color: var(--c-text); }
  :root[data-theme="dark"] .scheme-dark { --c-bg: var(--ink-950); --c-surface: var(--ink-900); --c-raised: var(--ink-850); }
}

/* ===== BASE ===== */
@layer base {
  html {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--c-text);
    background-color: var(--c-bg);
    background-image: var(--grain);
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
    font-synthesis-weight: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body {
    font-size: var(--step-0);
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }
  /* Lignes de construction : les deux bords du conteneur, sur toute la hauteur (≥ 48em) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    margin-inline: auto;
    inline-size: min(100% - 2 * var(--gutter), var(--wrapper-max));
    border-inline: 1px solid var(--c-grid);
    pointer-events: none;
    display: none;
  }
  @media (min-width: 48em) { body::before { display: block; } }

  h1, h2, h3, h4 { font-weight: 600; line-height: 1.08; letter-spacing: -0.032em; text-wrap: balance; }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.018em; }
  h4 { font-size: var(--step-0); line-height: 1.3; letter-spacing: -0.01em; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  a:hover { text-decoration-color: var(--c-accent); }
  strong, b { font-weight: 600; }
  small { font-size: var(--step--1); }
  code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
  kbd { padding: 0.05em 0.4em; border: 1px solid var(--c-line-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--c-raised); }
  hr { border: 0; border-block-start: 1px solid var(--c-line); }
  abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; }
  :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
  ::selection { background: var(--c-accent); color: var(--c-on-accent); }
  input, select, textarea, button { accent-color: var(--c-text); }
}

/* ===== LAYOUT — primitives réutilisables ===== */
@layer layout {
  .wrapper { inline-size: min(100% - 2 * var(--gutter), var(--wrapper-max)); margin-inline: auto; }
  .wrapper--narrow { --wrapper-max: 52rem; }
  .wrapper--text { --wrapper-max: 46rem; }

  .stack > * + * { margin-block-start: var(--stack, var(--space-s)); }
  .stack--xs { --stack: var(--space-2xs); }
  .stack--m { --stack: var(--space-m); }
  .stack--l { --stack: var(--space-l); }

  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-xs)); }
  .cluster--between { justify-content: space-between; }

  .grid { display: grid; gap: var(--grid-gap, var(--space-m)); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr)); }
  .grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 16rem), 100%), 1fr)); }

  /* Sections : rythme vertical + filet de séparation avec repères de construction */
  .section { position: relative; padding-block: var(--section-pad); }
  .section--tight { --section-pad: var(--space-l-2xl); }
  .section--flush-top { padding-block-start: 0; }
  .section + .section { border-block-start: 1px solid var(--c-line); }
  .section + .section > .wrapper { position: relative; }
  .section + .section > .wrapper::before,
  .section + .section > .wrapper::after {
    content: "";
    position: absolute;
    inset-block-start: calc(-1 * var(--section-pad) - 6px);
    inline-size: 11px;
    block-size: 11px;
    background:
      linear-gradient(var(--c-text-3), var(--c-text-3)) center / 100% 1px no-repeat,
      linear-gradient(var(--c-text-3), var(--c-text-3)) center / 1px 100% no-repeat;
    pointer-events: none;
  }
  .section + .section > .wrapper::before { inset-inline-start: -6px; }
  .section + .section > .wrapper::after { inset-inline-end: -6px; }
  .section--surface { background: var(--c-surface); }
  .section.scheme-dark { background: var(--c-bg); }
  /* Rendu différé des sections hors écran (gros gain de mise en page sur mobile) */
  .section, .cta-final, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 50rem; }
  /* 2 premières sections : rendues d'emblée (moins de travail après le 1er affichage) */
  main > .section:first-of-type, main > .section:first-of-type + .section { content-visibility: visible; }

  /* Bento générique : 1 → 2 → 4 colonnes ; tuiles larges / hautes en option */
  .bento { display: grid; gap: var(--space-s); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40em) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento > .tile--wide, .bento > .tile--full { grid-column: span 2; }
  }
  @media (min-width: 64em) {
    .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
    .bento > .tile--tall { grid-row: span 2; }
    .bento > .tile--full { grid-column: 1 / -1; }
    .bento > .tile--three { grid-column: span 3; }
  }
}

/* ===== COMPONENTS ===== */
@layer components {

  /* ---------- Libellés techniques ---------- */
  .label, .eyebrow, .badge, .tag, .metric, .callout, .breadcrumb, .stat__label, .cartouche dt, .site-nav__index {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .kw { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.1em; line-height: 0.9; letter-spacing: -0.01em; color: var(--c-accent-text); padding-inline-end: 0.04em; }
  .lead { font-size: var(--text-lead); line-height: 1.5; color: var(--c-text-2); max-inline-size: 39.8em; }
  .muted { color: var(--c-text-2); }

  /* ---------- Lien d'évitement ---------- */
  .skip-link {
    position: absolute; inset-inline-start: var(--space-s); inset-block-start: -10rem; z-index: var(--z-skip);
    padding: 0.75rem 1rem; border-radius: var(--radius-s);
    background: var(--c-text); color: var(--c-bg); font-weight: 600; text-decoration: none;
  }
  .skip-link:focus { inset-block-start: var(--space-s); }

  /* ---------- Icônes ---------- */
  .icon { inline-size: 1.25em; block-size: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .icon--fill { fill: currentColor; stroke: none; }
  .icon--sm { inline-size: 1em; block-size: 1em; }
  .icon--lg { inline-size: 1.75rem; block-size: 1.75rem; }

  /* ---------- Boutons ---------- */
  .btn {
    --btn-bg: transparent; --btn-fg: var(--c-text); --btn-bd: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
    min-block-size: 2.75rem; padding: 0.65em 1.15em;
    border: 1px solid var(--btn-bd); border-radius: var(--radius-s);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: var(--text-ui); font-weight: 550; line-height: 1.2; letter-spacing: -0.005em;
    text-decoration: none; text-align: center; white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
  }
  .btn:hover { text-decoration: none; }
  .btn:active { scale: 0.97; }
  .btn .icon { inline-size: 1.1em; block-size: 1.1em; transition: translate var(--dur-2) var(--ease-out); }
  .btn:hover .icon--arrow { translate: 3px 0; }
  .btn--primary { --btn-bg: var(--c-btn-bg); --btn-fg: var(--c-btn-fg); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.16); }
  .btn--primary:hover { --btn-bg: var(--c-btn-hover-bg); --btn-fg: var(--c-btn-hover-fg); }
  .btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-on-accent); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.16); }
  .btn--accent:hover { --btn-bg: var(--amber-300); }
  .btn--secondary { --btn-bd: var(--c-line-strong); --btn-bg: transparent; }
  .btn--secondary:hover { --btn-bd: var(--c-text); --btn-bg: var(--c-tint); }
  .btn--ghost:hover { --btn-bg: var(--c-tint); }
  .btn--link { min-block-size: auto; padding: 0.25em 0; border: 0; border-radius: 0; text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 0.3em; }
  .btn--link:hover { text-decoration-color: var(--c-accent); }
  .btn--wa { --btn-bg: var(--c-wa); --btn-fg: #fff; }
  .btn--wa:hover { --btn-bg: #145A37; }
  .btn--sm { min-block-size: 2.5rem; padding: 0.5em 0.95em; font-size: 0.875rem; }
  .btn--lg { min-block-size: 3.25rem; padding: 0.8em 1.45em; font-size: 1.0625rem; }
  .btn--block { inline-size: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; scale: 1; }
  .icon-btn {
    display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
    border-radius: var(--radius-s); color: var(--c-text);
    transition: background-color var(--dur-2) var(--ease-out);
  }
  .icon-btn:hover { background: var(--c-tint); }

  .link-arrow {
    display: inline-flex; align-items: center; gap: 0.45em; font-weight: 550; font-size: var(--text-ui);
    text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 0.3em;
  }
  .link-arrow:hover { text-decoration-color: var(--c-accent); }
  .link-arrow .icon { inline-size: 1.05em; block-size: 1.05em; transition: translate var(--dur-2) var(--ease-out); }
  .link-arrow:hover .icon { translate: 3px 0; }
  .ext-icon { display: inline-block; inline-size: 0.8em; block-size: 0.8em; margin-inline-start: 0.2em; vertical-align: 0.05em; }

  /* ---------- Badges, étiquettes, puces ---------- */
  .badge {
    display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.6em;
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-xs);
    background: var(--c-raised); color: var(--c-text-2); line-height: 1.2; white-space: nowrap;
  }
  .badge--demo { border-color: transparent; background: var(--c-text); color: var(--c-bg); }
  .badge--demo::before { content: ""; inline-size: 0.45em; block-size: 0.45em; border-radius: 50%; background: var(--amber-500); }
  .badge--accent { border-color: transparent; background: var(--c-accent); color: var(--c-on-accent); }
  .badge--success { color: var(--c-led-text); border-color: currentColor; }
  .badge--outline { background: transparent; }

  .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
  .tag { display: inline-flex; align-items: center; padding: 0.28em 0.55em; border-radius: var(--radius-xs); background: var(--c-tint); color: var(--c-text-2); line-height: 1.2; letter-spacing: 0.04em; }

  .chip {
    display: inline-flex; align-items: center; gap: 0.5em; min-block-size: 2.5rem; padding: 0.4em 1em;
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill);
    background: var(--c-raised); color: var(--c-text); font-size: 0.875rem; font-weight: 500; line-height: 1.2;
    text-decoration: none; transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2);
  }
  .chip:hover { border-color: var(--c-text); }
  .chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
  .chip__count { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.8; }

  .metric {
    display: inline-flex; align-items: baseline; gap: 0.5em; padding: 0.35em 0.6em;
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-xs); background: var(--c-raised);
    text-transform: none; letter-spacing: 0.02em; white-space: nowrap;
  }
  .metric__k { color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.06em; }
  .metric__v { color: var(--c-text); font-weight: 600; }

  /* ---------- LED de disponibilité + horloge ---------- */
  .led {
    position: relative; display: inline-block; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%;
    background: var(--c-led); box-shadow: 0 0 0 3px rgb(43 182 115 / 0.22);
  }
  .led[data-status="limited"] { --c-led: var(--amber-500); box-shadow: 0 0 0 3px rgb(227 162 59 / 0.25); }
  .led[data-status="unavailable"] { --c-led: var(--slate-400); box-shadow: 0 0 0 3px rgb(140 147 161 / 0.25); }
  @media (prefers-reduced-motion: no-preference) {
    .led:not([data-status="unavailable"])::after {
      content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-led);
      animation: led-pulse 2.6s var(--ease-out) 4s infinite;
    }
  }
  @keyframes led-pulse { 0% { transform: scale(1); opacity: 0.65; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
  .status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; font-size: var(--step--1); color: var(--c-text-2); }
  .status__main { color: var(--c-text); font-weight: 500; }
  .status--pill { padding: 0.45rem 0.85rem 0.45rem 0.75rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-raised); }
  .clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  /* ---------- En-tête ---------- */
  .site-header {
    position: relative; z-index: var(--z-header);
    background: var(--c-header);
    border-block-end: 1px solid var(--c-line);
    view-transition-name: site-header;
  }
  .js .site-header { position: fixed; inset: 0 0 auto; border-block-end-color: transparent; transition: border-color var(--dur-2), background-color var(--dur-2); }
  .js body { padding-block-start: var(--header-h); }
  .js.is-scrolled .site-header { border-block-end-color: var(--c-line); }
  .site-header__bar { display: flex; align-items: center; gap: var(--space-xs); min-block-size: var(--header-h); transition: min-block-size var(--dur-3) var(--ease-out); }
  .js.is-scrolled .site-header__bar { min-block-size: var(--header-h-sm); }

  .brand { display: inline-flex; align-items: center; gap: 0.7rem; margin-inline-end: auto; text-decoration: none; color: var(--c-text); min-block-size: 2.75rem; }
  .brand__mark { inline-size: 2.25rem; block-size: 2.25rem; flex: none; transition: scale var(--dur-3) var(--ease-out); }
  .brand__mark rect { fill: var(--c-brand-tile); }
  .js.is-scrolled .brand__mark { scale: 0.9; }
  .brand__text { display: grid; line-height: 1.1; }
  .brand__name { font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.02em; white-space: nowrap; }
  .brand__role { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-2); white-space: nowrap; }
  @media (max-width: 37.49em) { .brand__role { display: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .brand:hover .brand__wave { animation: wave-draw 0.9s var(--ease-in-out); }
  }
  @keyframes wave-draw { from { stroke-dashoffset: 1; } }
  .brand__wave { stroke-dasharray: 1; stroke-dashoffset: 0; }

  .site-header__tools { display: flex; align-items: center; gap: 0.35rem; }
  .site-header__cta { display: none; margin-inline-start: 0.4rem; }
  @media (min-width: 48em) { .site-header__cta { display: inline-flex; } }

  .lang { display: inline-flex; align-items: center; gap: 0.15rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; }
  .lang__current { padding: 0.4rem 0.45rem; color: var(--c-text); font-weight: 600; text-decoration: underline 2px var(--c-accent); text-underline-offset: 0.35em; }
  .lang__link { display: inline-grid; place-items: center; min-inline-size: 2.5rem; min-block-size: 2.5rem; padding-inline: 0.5rem; border-radius: var(--radius-s); text-decoration: none; color: var(--c-text-2); border: 1px solid var(--c-line); }
  .lang__link:hover { border-color: var(--c-text); }
  @media (max-width: 29.99em) { .site-header .lang__current { display: none; } }

  .theme-toggle .icon { inline-size: 1.25rem; block-size: 1.25rem; }
  .theme-toggle { color: var(--c-text-2); }
  .theme-toggle:hover { color: var(--c-text); }
  .theme-toggle [data-icon] { display: none; }
  /* L'icône montre le thème vers lequel on bascule */
  :root:not([data-theme="dark"]) .theme-toggle [data-icon="dark"],
  :root[data-theme="dark"] .theme-toggle [data-icon="light"] { display: block; }

  .menu-toggle {
    display: none; align-items: center; gap: 0.55rem; min-block-size: 2.75rem; padding: 0 0.75rem;
    border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); font-size: 0.875rem; font-weight: 550;
  }
  .js .menu-toggle { display: inline-flex; }
  .menu-toggle__icon { position: relative; inline-size: 1.1rem; block-size: 0.7rem; }
  .menu-toggle__icon::before, .menu-toggle__icon::after {
    content: ""; position: absolute; inset-inline: 0; block-size: 1.5px; background: currentColor; border-radius: 1px;
    transition: translate var(--dur-3) var(--ease-out), rotate var(--dur-3) var(--ease-out);
  }
  .menu-toggle__icon::before { inset-block-start: 0; }
  .menu-toggle__icon::after { inset-block-end: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { translate: 0 calc(0.35rem - 0.75px); rotate: 45deg; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { translate: 0 calc(-0.35rem + 0.75px); rotate: -45deg; }
  @media (max-width: 29.99em) { .menu-toggle__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .menu-toggle { padding: 0; inline-size: 2.75rem; justify-content: center; } }
  /* Très petits écrans (< 400 px) : barre compacte pour que tout tienne dès 320 px de large */
  @media (max-width: 24.99em) {
    .site-header__bar { gap: 0.5rem; }
    .brand { gap: 0.5rem; }
    .brand__mark { inline-size: 2rem; block-size: 2rem; }
    .brand__name { font-size: 0.9375rem; }
    .site-header__tools { gap: 0.125rem; }
    .lang__link { min-inline-size: 2.25rem; padding-inline: 0.35rem; }
    .site-header .theme-toggle { inline-size: 2.25rem; block-size: 2.25rem; }
    .menu-toggle { inline-size: 2.5rem; }
  }

  /* Navigation : liens */
  .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; padding: 0; }
  .site-nav__link {
    position: relative; display: inline-flex; align-items: center; gap: 0.75rem; min-block-size: 2.75rem;
    font-size: var(--text-ui); font-weight: 500; text-decoration: none; color: var(--c-text-2);
    transition: color var(--dur-2);
  }
  .site-nav__link::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.5rem; block-size: 1.5px; background: var(--c-accent);
    scale: var(--on, 0) 1; transform-origin: left; transition: scale var(--dur-3) var(--ease-out);
  }
  /* Rubrique active des pages profondes : <body data-section="services|work|method|about"> */
  .site-nav__link:hover, .site-nav__link[aria-current="page"],
  [data-section="services"] [data-nav="services"], [data-section="work"] [data-nav="work"],
  [data-section="method"] [data-nav="method"], [data-section="about"] [data-nav="about"] { color: var(--c-text); --on: 1; }
  .site-nav__index { display: none; color: var(--c-text-3); }
  .site-nav__arrow { display: none; }
  .site-nav__extra { display: none; }

  /* Sans JS (mobile) : la navigation s'affiche en ligne sous la barre */
  @media (max-width: 69.99em) {
    :root:not(.js) .site-header__bar { flex-wrap: wrap; }
    :root:not(.js) .site-nav { order: 3; inline-size: 100%; padding-block-end: 0.5rem; }
    :root:not(.js) .site-nav__list { gap: 0 1rem; }
  }
  /* Avec JS (< 70em) : panneau plein écran sous l'en-tête */
  @media (max-width: 69.99em) {
    .js .site-nav {
      position: absolute; inset-inline: 0; inset-block-start: 100%;
      block-size: calc(100vh - var(--header-h)); block-size: calc(100dvh - var(--header-h));
      display: flex; flex-direction: column; gap: var(--space-l);
      padding: var(--space-s) var(--gutter) calc(var(--space-xl) + env(safe-area-inset-bottom));
      background: var(--c-bg); background-image: var(--grain);
      border-block-start: 1px solid var(--c-line);
      overflow-y: auto; overscroll-behavior: contain;
      visibility: hidden; opacity: 0;
      transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-3);
    }
    .js.is-scrolled .site-nav { block-size: calc(100dvh - var(--header-h-sm)); }
    .js.menu-open .site-nav { visibility: visible; opacity: 1; transition: opacity var(--dur-2) var(--ease-out), visibility 0s; }
    .js .site-nav__list { flex-direction: column; gap: 0; }
    .js .site-nav__list > li { border-block-end: 1px solid var(--c-line); }
    .js .site-nav__link { inline-size: 100%; min-block-size: 3.5rem; font-size: var(--step-2); font-weight: 550; letter-spacing: -0.02em; color: var(--c-text); }
    .js .site-nav__link::after { display: none; }
    .js .site-nav__index { display: inline; inline-size: 2rem; }
    .js .site-nav__arrow { display: block; margin-inline-start: auto; color: var(--c-text-3); }
    .js .site-nav__extra { display: grid; gap: var(--space-m); }
    .js.menu-open { overflow: hidden; }
    @media (prefers-reduced-motion: no-preference) {
      .js .site-nav__list > li { translate: 0 0.5rem; opacity: 0; transition: translate var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
      .js.menu-open .site-nav__list > li { translate: 0 0; opacity: 1; }
      .js.menu-open .site-nav__list > li { transition-delay: calc(var(--i, 0) * 30ms); }
    }
  }
  @media (min-width: 70em) {
    .site-nav { margin-inline: auto; }
    .js .menu-toggle { display: none; }
    .brand { margin-inline-end: 0; }
  }
  .site-nav__contact { display: grid; gap: 0.25rem; }
  .site-nav__contact a { display: flex; align-items: center; gap: 0.6rem; min-block-size: 2.75rem; text-decoration: none; font-weight: 500; }

  /* ---------- Barre d'actions mobile + bouton WhatsApp flottant ---------- */
  .action-bar {
    position: fixed; inset: auto 0 0; z-index: var(--z-bar);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
    padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--c-header); border-block-start: 1px solid var(--c-line);
    transition: translate var(--dur-3) var(--ease-out), visibility 0s;
  }
  .action-bar.is-hidden { translate: 0 110%; visibility: hidden; transition: translate var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
  .menu-open .action-bar, .menu-open .wa-float { visibility: hidden; }
  .action-bar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
    min-block-size: 3.25rem; border-radius: var(--radius-s); border: 1px solid var(--c-line-strong);
    background: var(--c-raised); font-size: 0.75rem; font-weight: 600; text-decoration: none; color: var(--c-text);
  }
  .action-bar__item .icon { inline-size: 1.25rem; block-size: 1.25rem; }
  .action-bar__item--primary { background: var(--c-btn-bg); color: var(--c-btn-fg); border-color: transparent; }
  .action-bar__item--wa .icon { color: var(--c-led-text); }
  @media (min-width: 48em) { .action-bar { display: none; } }

  .wa-float {
    position: fixed; inset: auto var(--space-m) var(--space-m) auto; z-index: var(--z-float);
    display: none; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%;
    background: var(--c-wa); color: #fff; box-shadow: var(--shadow-2); text-decoration: none;
    transition: scale var(--dur-2) var(--ease-out), background-color var(--dur-2);
  }
  .wa-float .icon { inline-size: 1.6rem; block-size: 1.6rem; }
  .wa-float:hover { background: #145A37; scale: 1.05; }
  .wa-float__label {
    position: absolute; inset-inline-end: calc(100% + 0.75rem); inset-block-start: 50%; translate: 0.5rem -50%;
    padding: 0.45rem 0.75rem; border-radius: var(--radius-s); background: var(--ink-900); color: var(--sand-100);
    font-size: 0.8125rem; font-weight: 550; white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out);
  }
  .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; translate: 0 -50%; }
  @media (min-width: 48em) { .wa-float { display: grid; } }

  /* ---------- Pied de page (clair : papier 2 + filet) ---------- */
  .site-footer { position: relative; overflow: hidden; padding-block: var(--space-xl) var(--space-m); background: var(--c-surface); color: var(--c-text); border-block-start: 1px solid var(--c-line); }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); }
  .site-footer__top { display: grid; gap: var(--space-l); padding-block-end: var(--space-l); border-block-end: 1px solid var(--c-line); }
  @media (min-width: 40em) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__intro { grid-column: 1 / -1; } }
  @media (min-width: 64em) { .site-footer__top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 1fr); column-gap: var(--space-xl); } .site-footer__intro { grid-column: auto; } }
  .site-footer__pitch { max-inline-size: 30rem; color: var(--c-text-2); margin-block-start: var(--space-s); }
  .site-footer__status { display: grid; gap: 0.5rem; margin-block-start: var(--space-m); }
  .footer-title { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); margin-block-end: 0.85rem; }
  .contact-list { display: grid; gap: 0.15rem; list-style: none; padding: 0; }
  .contact-list li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .contact-list a { display: inline-flex; align-items: center; gap: 0.65rem; min-block-size: 2.5rem; font-weight: 500; }
  .contact-list .icon { color: var(--c-text-3); }
  .copy-btn {
    display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2rem; padding: 0.2rem 0.55rem;
    border: 1px solid var(--c-line); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 0.6875rem;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-2);
  }
  .copy-btn:hover { border-color: var(--c-text); color: var(--c-text); }
  .copy-btn[data-copied="true"] { color: var(--c-led-text); border-color: currentColor; }
  .site-footer__nav ul { display: grid; gap: 0.1rem; list-style: none; padding: 0; }
  .site-footer__nav a { display: inline-flex; align-items: center; min-block-size: 2.5rem; font-weight: 500; }
  .site-footer__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.3em; }
  .site-footer__bottom { display: grid; gap: var(--space-m); padding-block-start: var(--space-m); font-size: var(--step--1); color: var(--c-text-2); }
  @media (min-width: 64em) { .site-footer__bottom { grid-template-columns: 1fr auto; align-items: end; } }
  .site-footer__proof { color: var(--c-text-3); display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; }
  .site-footer__proof a { text-decoration: underline; text-decoration-color: var(--c-line-strong); }
  .site-footer__proof > * + *::before { content: "·"; display: inline-block; margin-inline-end: 0.75rem; color: var(--c-text-3); }
  @media (max-width: 47.99em) { .site-footer__proof > :first-child { flex-basis: 100%; } .site-footer__proof > :nth-child(2)::before { content: none; } }
  .site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; padding: 0; }
  .site-footer__legal a { color: var(--c-text-2); display: inline-flex; min-block-size: 2.5rem; align-items: center; }
  .site-footer__legal a:hover, .site-footer__legal a[aria-current="page"] { color: var(--c-text); }
  .site-footer__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); }
  @media (min-width: 64em) { .site-footer__end { flex-direction: column; align-items: flex-end; } }
  .site-footer__sign { font-family: var(--font-serif); font-style: italic; font-size: var(--step-1); color: var(--c-text); }
  .site-footer__wordmark { display: block; inline-size: 100%; block-size: auto; margin-block-start: var(--space-l); color: var(--c-grid); }
  .site-footer__wordmark text { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.04em; fill: currentColor; }
  @media (max-width: 47.99em) { .site-footer { padding-block-end: calc(var(--space-m) + 4.5rem + env(safe-area-inset-bottom)); } }

  /* ---------- En-tête de section ---------- */
  .eyebrow { display: flex; align-items: center; gap: 0.75rem; color: var(--c-text-2); }
  .eyebrow__index { color: var(--c-accent-text); }
  .eyebrow__rule { inline-size: 2rem; block-size: 1px; background: currentColor; opacity: 0.6; }
  .section-head { display: grid; gap: var(--space-s); margin-block-end: var(--space-l-2xl); }
  .section-head__title { font-size: var(--step-4); max-inline-size: 13.7em; }
  .section-head__title--wide { max-inline-size: 17.8em; }
  .section-head__action { justify-self: start; }
  .section-head__lead { font-size: var(--text-lead); line-height: 1.5; color: var(--c-text-2); max-inline-size: 38.5em; }
  @media (min-width: 64em) {
    .section-head--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-xl); }
    .section-head--split > :not(.section-head__action) { grid-column: 1; }
    .section-head--split > .section-head__action { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  }

  /* ---------- Cartes ---------- */
  .card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-xs);
    padding: var(--space-m); border: 1px solid var(--c-line); border-radius: var(--radius-l);
    background: var(--c-raised); transition: border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);
  }
  .card:hover { border-color: var(--c-line-strong); }
  .card--interactive:hover { box-shadow: var(--shadow-2); translate: 0 -2px; }
  .card__index { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; color: var(--c-text-3); }
  .card__icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); color: var(--c-text); }
  .card__icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
  .card__title { font-size: var(--step-1); }
  .card__text { color: var(--c-text-2); }
  .card__list { display: grid; gap: 0.35rem; list-style: none; padding: 0; font-size: var(--step--1); color: var(--c-text-2); }
  .card__list li { display: flex; gap: 0.5rem; align-items: baseline; }
  .card__list li::before { content: ""; flex: none; inline-size: 0.4rem; block-size: 0.4rem; translate: 0 -0.1rem; border: 1px solid var(--c-accent-text); }
  .card__meta { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.04em; color: var(--c-text-2); }
  .card__footer { margin-block-start: auto; padding-block-start: var(--space-s); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; }
  .card__link { text-decoration: none; }
  .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  @supports selector(:has(*)) {
    :is(.card, .tile):has(.card__link:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 3px; }
    .card__link:focus-visible { outline: none; }
  }

  /* Carte projet : vignette (affiche CSS ou capture) dans un cadre d'appareil */
  .project-card { position: relative; display: grid; gap: var(--space-s); align-content: start; }
  .project-card__media { position: relative; transition: translate var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out); }
  .project-card:hover .project-card__media { translate: 0 -4px; box-shadow: var(--shadow-3); }
  .project-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: var(--step--1); color: var(--c-text-2); }
  .project-card__title { font-size: var(--step-2); }
  .project-card__title a { text-decoration: none; }
  .project-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
  .project-card__text { color: var(--c-text-2); max-inline-size: 31.8em; }
  @supports selector(:has(*)) {
    .project-card:has(.project-card__title a:focus-visible) .project-card__media { outline: 2px solid var(--c-focus); outline-offset: 4px; }
    .project-card__title a:focus-visible { outline: none; text-decoration: underline; }
  }
  .project-card__more { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 550; font-size: var(--text-ui); }
  .project-card__more .icon { transition: translate var(--dur-2) var(--ease-out); }
  .project-card:hover .project-card__more .icon { translate: 3px 0; }

  /* Cadres d'appareil (captures ajoutées plus tard dans .device__screen) */
  .device { position: relative; overflow: hidden; border: 1px solid var(--c-line-strong); border-radius: var(--radius-m); background: var(--c-raised); box-shadow: var(--shadow-1); }
  .device__bar { display: flex; align-items: center; gap: 0.6rem; block-size: 2rem; padding-inline: 0.75rem; border-block-end: 1px solid var(--c-line); background: var(--c-surface); }
  .device__dots { display: flex; gap: 0.3rem; }
  .device__dots span { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--c-line-strong); }
  .device__url { flex: 1; max-inline-size: 65%; margin-inline: auto; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--c-bg); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--c-text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .device__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface); }
  .device__screen > img, .device__screen > picture > img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; }
  /* Repères d'angle (cotes) : au survol des cartes projet, ou permanents avec .dims--on */
  .dims { --t: var(--c-text-3); --l: 10px; --g: linear-gradient(var(--t), var(--t)); position: absolute; inset: var(--dims-inset, -0.75rem); pointer-events: none; opacity: 0; transition: opacity var(--dur-3);
    background: var(--g) 0 0 / var(--l) 1px, var(--g) 0 0 / 1px var(--l), var(--g) 100% 0 / var(--l) 1px, var(--g) 100% 0 / 1px var(--l),
      var(--g) 0 100% / var(--l) 1px, var(--g) 0 100% / 1px var(--l), var(--g) 100% 100% / var(--l) 1px, var(--g) 100% 100% / 1px var(--l);
    background-repeat: no-repeat; }
  .dims--on, .project-card:hover .dims { opacity: 1; }
  .dims--strong { --t: var(--c-text); --l: 14px; --dims-inset: -0.65rem; }

  /* Grille à filets (secteurs, piliers, engagements…) : .cells--2 | --3 | --4 colonnes au maximum */
  .cells { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius-l); overflow: hidden; }
  .cells > * { min-inline-size: 0; padding: var(--space-m); background: var(--c-raised); }
  @media (min-width: 40em) { .cells--3, .cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 48em) { .cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* Carte secteur (dans .cells) */
  .sector { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.35rem var(--space-s); align-items: start; transition: background-color var(--dur-2); }
  .sector:hover { background: var(--c-bg); }
  .sector__icon { grid-row: span 3; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); color: var(--c-text); transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
  .sector:hover .sector__icon { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
  .sector__title { font-size: var(--step-1); }
  .sector__title a { text-decoration: none; }
  .sector__title a::after { content: ""; position: absolute; inset: 0; }
  .sector__text { grid-column: 2; color: var(--c-text-2); font-size: var(--step--1); }
  .sector__demo { grid-column: 2; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.04em; color: var(--c-text-3); }
  .sector__arrow { grid-column: 3; grid-row: 1; color: var(--c-text-3); transition: translate var(--dur-2) var(--ease-out), color var(--dur-2); }
  .sector:hover .sector__arrow { translate: 3px 0; color: var(--c-text); }
  @supports selector(:has(*)) {
    .sector:has(a:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: -4px; }
    .sector__title a:focus-visible { outline: none; }
  }

  /* ---------- Tuiles bento ---------- */
  .tile {
    position: relative; display: flex; flex-direction: column; gap: var(--space-xs); min-inline-size: 0;
    padding: var(--space-m); border: 1px solid var(--c-line); border-radius: var(--radius-l);
    background: var(--c-raised); overflow: hidden;
  }
  .tile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
  .tile__index { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; color: var(--c-text-3); }
  .tile__title { font-size: var(--step-2); letter-spacing: -0.025em; }
  .tile__text { color: var(--c-text-2); max-inline-size: 30.5em; }
  .tile__demo { position: relative; z-index: 1; margin-block-start: auto; padding-block-start: var(--space-s); }
  .tile__link { align-self: flex-start; margin-block-start: var(--space-xs); }

  /* ---------- Chiffres et mesures ---------- */
  .stats { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--c-line); border-block: 1px solid var(--c-line); }
  @media (min-width: 64em) { .stats { grid-template-columns: repeat(var(--stats-cols, 4), minmax(0, 1fr)); } }
  .stat { display: grid; gap: 0.6rem; align-content: start; padding: var(--space-m) var(--space-s); background: var(--c-bg); }
  .stat__label { color: var(--c-text-3); display: flex; align-items: center; gap: 0.5rem; }
  .stat__value { font-family: var(--font-mono); font-size: var(--step-5); font-weight: 500; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
  .stat__unit { font-size: 0.42em; letter-spacing: -0.01em; color: var(--c-text-2); margin-inline-start: 0.12em; }
  .stat__desc { font-size: var(--step--1); color: var(--c-text-2); max-inline-size: 17.2em; }

  /* ---------- Cartouche technique (bloc-titre de plan) ---------- */
  .cartouche { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); border-block-start: 1px solid var(--c-line-strong); border-inline-start: 1px solid var(--c-line-strong); background: var(--c-raised); font-size: var(--step--1); }
  .cartouche__head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.8rem; border-inline-end: 1px solid var(--c-line-strong); border-block-end: 1px solid var(--c-line-strong); background: var(--c-surface); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
  .cartouche__head span:last-child { color: var(--c-text-3); }
  .cartouche dl { display: contents; }
  .cartouche__cell { min-inline-size: 0; padding: 0.55rem 0.8rem 0.6rem; border-inline-end: 1px solid var(--c-line-strong); border-block-end: 1px solid var(--c-line-strong); }
  .cartouche__cell--wide { grid-column: 1 / -1; }
  .cartouche dt { font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--c-text-3); }
  .cartouche dd { margin: 0.1rem 0 0; font-weight: 550; line-height: 1.35; }
  .cartouche__foot { grid-column: 1 / -1; padding: 0.45rem 0.8rem; border-inline-end: 1px solid var(--c-line-strong); border-block-end: 1px solid var(--c-line-strong); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--c-text-2); }

  /* ---------- Accordéon (details/summary) ---------- */
  .accordion { border-block-start: 1px solid var(--c-line); }
  .accordion__item { border-block-end: 1px solid var(--c-line); }
  .accordion__item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
    min-block-size: 3.5rem; padding-block: var(--space-s); list-style: none;
    font-size: var(--step-1); font-weight: 550; letter-spacing: -0.015em; line-height: 1.3;
  }
  .accordion__item > summary::-webkit-details-marker { display: none; }
  .accordion__item > summary:hover { color: var(--c-accent-text); }
  .accordion__icon { position: relative; flex: none; inline-size: 2rem; block-size: 2rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); }
  .accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 0.75rem; block-size: 1.5px; background: currentColor; transition: rotate var(--dur-3) var(--ease-out); }
  .accordion__icon::after { rotate: 90deg; }
  .accordion__item[open] .accordion__icon::after { rotate: 0deg; }
  .accordion__item[open] .accordion__icon { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
  .accordion__body { padding-block-end: var(--space-m); color: var(--c-text-2); max-inline-size: 43.75em; }
  .accordion__body > * + * { margin-block-start: 0.75em; }
  @supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
      .accordion { interpolate-size: allow-keywords; }
      .accordion__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
      .accordion__item[open]::details-content { block-size: auto; }
    }
  }

  /* ---------- Notifications (toast) ---------- */
  .toast-region { position: fixed; z-index: var(--z-toast); inset: auto var(--gutter) calc(5.5rem + env(safe-area-inset-bottom)) auto; display: grid; gap: 0.5rem; inline-size: min(24rem, 100% - 2 * var(--gutter)); }
  .toast { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 0.85rem 0.85rem 1rem; border-radius: var(--radius-m); border-inline-start: 3px solid var(--amber-400); background: var(--ink-900); color: var(--sand-100); box-shadow: var(--shadow-3); font-size: 0.9375rem; }
  .toast--success { border-color: var(--led-500); }
  .toast--error { border-color: var(--red-300); }
  .toast__body { flex: 1; }
  .toast__title { display: block; font-weight: 600; }
  .toast__close { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-s); }
  @media (prefers-reduced-motion: no-preference) { .toast { animation: fade-up var(--dur-3) var(--ease-out); } }
  @keyframes fade-up { from { opacity: 0; translate: 0 0.75rem; } }

  /* ---------- Bloc CTA final ---------- */
  .cta-final { position: relative; isolation: isolate; padding-block: var(--space-xl-3xl); background: var(--c-bg); color: var(--c-text); overflow: hidden; border-block-start: 1px solid var(--c-line); }
  .cta-final__grid { display: grid; gap: var(--space-xl); }
  @media (min-width: 64em) { .cta-final__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; column-gap: var(--space-2xl); } }
  .cta-final__title { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.04em; max-inline-size: 10em; }
  .cta-final__text { margin-block-start: var(--space-m); font-size: var(--text-lead); color: var(--c-text-2); max-inline-size: 29.2em; }
  .person { display: flex; align-items: center; gap: var(--space-s); margin-block-start: var(--space-l); }
  .person__photo { position: relative; flex: none; }
  .person__photo img { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-line-strong); }
  .person__photo .led { position: absolute; inset-block-end: 0.2rem; inset-inline-end: 0.2rem; inline-size: 0.8rem; block-size: 0.8rem; border: 2px solid var(--c-bg); box-shadow: none; }
  .person__name { font-weight: 600; }
  .person__text { color: var(--c-text-2); font-size: var(--step--1); }
  .channels { display: grid; list-style: none; padding: 0; border-block-start: 1px solid var(--c-line); }
  .channel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-s); align-items: center; padding: 1.15rem 0.25rem; border-block-end: 1px solid var(--c-line); text-decoration: none; color: var(--c-text); }
  .channel__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
  .channel__icon .icon { inline-size: 1.35rem; block-size: 1.35rem; }
  .channel__title { display: block; font-size: var(--step-1); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
  .channel__meta { display: block; margin-block-start: 0.15rem; font-size: var(--step--1); color: var(--c-text-2); }
  .channel__arrow { color: var(--c-text-3); transition: translate var(--dur-2) var(--ease-out), color var(--dur-2); }
  .channel:hover .channel__arrow { translate: 4px 0; color: var(--c-text); }
  .channel:hover .channel__icon, .channel--primary .channel__icon { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
  .channel:hover .channel__title { text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.2em; }

  /* ---------- Motifs : plan, grain, ligne de signal ---------- */
  .blueprint { position: relative; isolation: isolate; }
  .blueprint::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(var(--c-grid-strong) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-grid-strong) 1px, transparent 1px),
      linear-gradient(var(--c-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
    background-size: 8rem 8rem, 8rem 8rem, 2rem 2rem, 2rem 2rem;
    background-position: var(--grid-pos, center top);
    -webkit-mask-image: radial-gradient(ellipse 70% 75% at var(--grid-at, 70% 35%), #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 75% at var(--grid-at, 70% 35%), #000 20%, transparent 75%);
  }
  .grain { background-image: var(--grain); }
  .signal { display: block; inline-size: 100%; block-size: 3rem; color: var(--c-line-strong); overflow: visible; }
  .signal path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .signal .signal__pulse { stroke: var(--c-accent); stroke-width: 1.75; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .signal--draw { animation: signal-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    }
  }
  @keyframes signal-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

  /* ---------- Apparition au défilement (uniquement si JS + mouvement accepté) ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal]:not(.is-visible) { opacity: 0; translate: 0 1.25rem; }
    .js [data-reveal] { transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out); }
    .js [data-reveal-stagger]:not(.is-visible) > * { opacity: 0; translate: 0 1rem; }
    .js [data-reveal-stagger] > * { transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out); }
    [data-reveal-stagger] > :nth-child(2) { transition-delay: 70ms; } [data-reveal-stagger] > :nth-child(3) { transition-delay: 140ms; }
    [data-reveal-stagger] > :nth-child(4) { transition-delay: 210ms; } [data-reveal-stagger] > :nth-child(n+5) { transition-delay: 280ms; }
  }

  /* ---------- Transitions de vue (amélioration progressive) ---------- */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
  :root.theme-switching::view-transition-old(root) { animation: none; }
  :root.theme-switching::view-transition-new(root) { animation: theme-wipe 0.6s var(--ease-in-out); }
  @keyframes theme-wipe {
    from { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)); }
    to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 100%) var(--vt-y, 0)); }
  }
}

/* ===== UTILITIES ===== */
@layer utilities {
  [hidden] { display: none !important; }
  .visually-hidden, .sr-only {
    position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
  }
  :root:not(.js) [data-js-only] { display: none !important; }
  .mono { font-family: var(--font-mono) !important; }
  .text-accent { color: var(--c-accent-text) !important; }
  .text-led { color: var(--c-led-text) !important; }
  .text-muted { color: var(--c-text-2) !important; }
  .text-center { text-align: center !important; }
  .nowrap { white-space: nowrap !important; }
  .mt-0 { margin-block-start: 0 !important; }
  .mt-s { margin-block-start: var(--space-s) !important; }
  .mt-m { margin-block-start: var(--space-m) !important; }
  .mt-l { margin-block-start: var(--space-l) !important; }
  .mt-xl { margin-block-start: var(--space-xl) !important; }

  /* Filet de sécurité : mouvement réduit */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important; animation-iteration-count: 1 !important;
      transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
    }
  }

  /* Contraste élevé (Windows) */
  @media (forced-colors: active) {
    .btn, .chip, .card, .tile, .choice, .input, .select, .textarea, .device, .cartouche, .lang__link, .menu-toggle, .action-bar__item { border: 1px solid CanvasText !important; }
    .led { forced-color-adjust: none; }
  }

  /* Impression */
  @media print {
    html, body { background: #fff !important; color: #000 !important; }
    body::before, .site-header, .action-bar, .wa-float, .toast-region, .skip-link, .theme-toggle, .menu-toggle, .site-footer__wordmark, .signal, [data-js-only] { display: none !important; }
    .js body { padding-block-start: 0 !important; }
    .scheme-dark, .cta-final, .site-footer { --c-bg: #fff; --c-surface: #fff; --c-raised: #fff; --c-text: #000; --c-text-2: #333; --c-text-3: #444; --c-accent-text: #8A4B08; --c-line: #ccc; --c-line-strong: #999; background: #fff !important; color: #000 !important; }
    .section, .cta-final, .site-footer { content-visibility: visible; }
    [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; translate: none !important; }
    .section { padding-block: 1.5rem !important; break-inside: auto; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
    .blueprint::before { display: none !important; }
    h1, h2, h3 { break-after: avoid; }
  }
}