/* ==========================================================================
   LOLEA — feuille de style unique (design system + composants), version 3
   Éditeur : DLM Soft. Zéro build : ce fichier est servi tel quel.

   RÈGLE DE COULEUR (critique v2 §3) : hors [data-app], une page ne contient
   que deux couleurs : l'accent d'action (bleu #236DD6 : boutons, liens,
   focus) et la couleur chaude de décor (orange #ffa826 : trait sous surtitre,
   filets, index ; jamais sur un bouton ni sur un lien). Les identités des
   six applications (SANDRE, Contrôle AC/ANC, END, HMT, ECP, GMAO) n'existent
   que dans un élément porteur de [data-app] : carte d'application, colonne
   de matrice, héros d'une page application.

   Ordre des couches : reset → base → tokens → layout → components → utilities.
   Une règle d'une couche plus tardive gagne toujours. TOUT le CSS du projet
   est layeré (rien en dehors, hormis @font-face).

   Deux niveaux de tokens :
     1. primitives  (--blue-600, --space-4…) : l'échelle brute, jamais lue
        par un composant ;
     2. sémantiques (--color-accent, --gap-section…) : l'intention. Les
        composants ne consomment QUE des tokens sémantiques.

   DÉROGATION documentée : la règle « clamp() : max ≥ 2 × min » n'est pas
   tenue pour les tailles de police (bornes en rem, donc le zoom texte à
   200 % s'applique réellement ; un ratio de 2 donnerait des titres démesurés
   sur grand écran pour un site B2G sobre).
   ========================================================================== */

@layer reset, base, tokens, layout, components, utilities;

/* --------------------------------------------------------------------------
   0. Polices auto-hébergées (WOFF2, sous-ensembles latin / latin-ext)
   Raleway 700 (titres) ; Open Sans 400 / 700 (texte). Aucune italique.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Raleway"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/raleway-700-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/raleway-700-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/opensans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/opensans-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Polices de repli aux métriques alignées (limite le décalage au swap) */
@font-face { font-family: "Open Sans Fallback"; src: local("Arial"); size-adjust: 105%; ascent-override: 101%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Raleway Fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 94%; descent-override: 23%; line-gap-override: 0%; }

/* --------------------------------------------------------------------------
   1. 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: 100dvh; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
  picture img { inline-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }
  table { border-collapse: collapse; border-spacing: 0; }
}

/* --------------------------------------------------------------------------
   2. TOKENS — primitives puis sémantiques
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Le site n'a qu'un thème clair : l'annoncer empêche les navigateurs
       en mode sombre forcé de repeindre les champs de saisie. */
    color-scheme: light;

    /* ---- Primitives : couleurs (palette Neptune, critique v2 §3) ---- */
    --ink-900: #16243a;          /* titres, sombre */
    --warm-800: #3e3a3a;         /* texte courant (encre chaude, 11,5:1) */
    --warm-600: #6b625e;         /* texte secondaire (5,6:1) */
    --blue-700: #1c57aa;         /* accent survol */
    --blue-600: #236DD6;         /* accent d'action */
    --blue-300: #8fb8ee;         /* accent sur fond sombre */
    --blue-100: #e8f0fd;         /* teinte de l'accent */
    --sky-050: #f5fbfe;          /* fond doux Neptune */
    --orange-500: #ffa826;       /* chaleur de décor */
    --orange-800: #9a5b00;       /* chaleur en texte (5,3:1 sur blanc) */
    --orange-050: #fff3dc;       /* fond chaud */
    --line-100: #eef2f6;
    --line-200: #e3e9f0;
    --line-300: #d3dce7;
    --white: #ffffff;

    /* ---- Primitives : typographie ---- */
    --font-title: "Raleway", "Raleway Fallback", system-ui, sans-serif;
    --font-body: "Open Sans", "Open Sans Fallback", system-ui, sans-serif;
    --weight-bold: 700;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-btn: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
    --fs-h4: 1.0625rem;
    --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
    --fs-h1: clamp(2.125rem, 1.6rem + 1.6vw, 3rem);
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-body: 1.65;
    --ls-tight: -0.02em;
    --ls-caps: 0.12em;

    /* ---- Primitives : espacement (base 0.5rem) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-px: 1px;
    --space-hair: 2px;
    --space-rule: 3px;

    /* ---- Primitives : tailles d'icônes ---- */
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.5rem;
    --icon-box: 2.75rem;

    /* ---- Primitives : formes, élévations, mouvement, empilement ---- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --elev-1: 0 1px 2px rgb(22 36 58 / 0.06), 0 2px 8px -2px rgb(22 36 58 / 0.08);
    --elev-2: 0 12px 28px -10px rgb(22 36 58 / 0.16);
    --elev-3: 0 24px 48px -12px rgb(22 36 58 / 0.18);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-fast: 0.2s;
    --t-slow: 0.6s;
    --delay-1: 0.1s;
    --delay-2: 0.2s;
    --delay-3: 0.3s;
    --z-below: -1;
    --z-menu: 40;
    --z-header: 50;
    --z-skip: 100;

    /* ---- Sémantiques : couleurs ---- */
    --color-bg: var(--white);
    --color-bg-soft: var(--sky-050);
    --color-bg-dark: var(--ink-900);
    --color-surface: var(--white);
    --color-heading: var(--ink-900);
    --color-text: var(--warm-800);
    --color-text-secondary: var(--warm-600);
    --color-on-dark: var(--white);
    --color-on-dark-soft: rgb(255 255 255 / 0.8);
    --color-accent: var(--blue-600);
    --color-accent-strong: var(--blue-700);
    --color-accent-soft: var(--blue-100);
    --color-accent-on-dark: var(--blue-300);
    --color-warm: var(--orange-500);
    --color-warm-text: var(--orange-800);
    --color-warm-bg: var(--orange-050);
    --color-line: var(--line-200);
    --color-line-soft: var(--line-100);
    --color-line-strong: var(--line-300);
    --color-field-border: #7a8a9c;      /* 3,27:1 sur blanc : WCAG 1.4.11 */
    --color-line-on-dark: rgb(255 255 255 / 0.14);
    --color-focus: var(--blue-600);
    --color-header-bg: rgb(255 255 255 / 0.86);
    --color-veil: linear-gradient(120deg, rgb(22 36 58 / 0.94), rgb(28 87 170 / 0.82)); /* voile encre → bleu : texte blanc ≥ 4,5:1 */
    --eyebrow-color: var(--color-heading);
    --eyebrow-rule: var(--color-warm);

    /* ---- Sémantiques : mesure & rythme ---- */
    --measure: 60ch;
    --measure-h1: 14ch;
    --measure-h2: 24ch;
    --container-max: 74rem;
    --container-pad: clamp(1.25rem, 4vw, 2.5rem);
    --gap-section: clamp(3rem, 5.5vw, 5rem);
    --gap-section-lg: clamp(4rem, 8vw, 6.5rem);
    --gap-hero: clamp(2.5rem, 5vw, 4rem);
    --gap-head: clamp(2rem, 3.5vw, 3rem);
    --gap-grid: clamp(1.25rem, 2.5vw, 2rem);
    --gap-columns: clamp(2rem, 5vw, 4.5rem);
    --header-height: 4.5rem;

    /* ---- Sémantiques : composants ---- */
    --btn-pad-block: 0.8125rem;
    --btn-pad-inline: 1.5rem;
    --btn-pad-block-sm: 0.5625rem;
    --btn-radius: var(--radius-sm);
    --card-radius: var(--radius-md);
    --card-pad: clamp(1.25rem, 2.5vw, 1.75rem);
    --thumb-height: 10rem;
    --nav-panel-w: 26rem;          /* 416 px, une colonne : le panneau ne recouvre pas le titre du héros dès 1024 px */
    --nav-panel-w-wide: 44rem;     /* 704 px, deux colonnes à partir de 80 em : à 1280, bord gauche à 528 px, titre du héros (444 px) dégagé */
    --nav-tile: 2.5rem;            /* tuile du pictogramme */
    --nav-item-min-h: 3.25rem;     /* cible pointeur : bien au-delà de 24 px */
    --logo-height: 3.5rem;
    --marquee-logo-height: 3rem;
    --marquee-gap: var(--space-8);
    --marquee-duration: 60s;
    --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-focus);
    --focus-ring-on-dark: 0 0 0 3px var(--color-bg-dark), 0 0 0 6px var(--color-accent-on-dark);

    /* ---- Identités d'application : valeurs neutres hors [data-app] ---- */
    --app: var(--color-accent);
    --app-text: var(--color-accent-strong);
    --app-tint: var(--color-accent-soft);
  }

  /* Identités d'application, confinées à [data-app] :
     --app = couleur pleine (filet, trait), --app-text = même teinte assombrie
     à 4,5:1 minimum sur blanc, --app-tint = fond clair.
     SOURCE UNIQUE de la charte : ce bloc est le seul endroit du site où un
     hexadécimal d'application est écrit. Les SVG de assets/img/abstract/ le
     reçoivent par `pwsh ./propager-couleurs.ps1` (voir propager-couleurs.ps1). */
  /* @couleurs-applications:debut */
  [data-app="sandre"]   { --app: #1565c0; --app-text: #1565c0; --app-tint: #ecf3fa; }
  [data-app="controle"] { --app: #14b8a6; --app-text: #0f766e; --app-tint: #ecf9f8; }
  [data-app="end"]      { --app: #22c55e; --app-text: #15803d; --app-tint: #edfaf2; }
  [data-app="hmt"]      { --app: #6366f1; --app-text: #4f46e5; --app-tint: #f3f3fe; }
  [data-app="ecp"]      { --app: #06b6d4; --app-text: #0e7490; --app-tint: #ebf9fc; }
  [data-app="gmao"]     { --app: #f97316; --app-text: #b45309; --app-tint: #fff4ec; }
  /* @couleurs-applications:fin */
}

/* --------------------------------------------------------------------------
   3. BASE — éléments HTML nus
   -------------------------------------------------------------------------- */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-height) + 1rem); }
  body { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg); }
  h1, h2, h3, h4 { font-family: var(--font-title); font-weight: var(--weight-bold); color: var(--color-heading); line-height: var(--lh-snug); text-wrap: balance; }
  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); max-inline-size: var(--measure-h1); }
  h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); max-inline-size: var(--measure-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); }
  p { max-inline-size: var(--measure); text-wrap: pretty; }
  a { color: var(--color-accent); text-decoration-thickness: var(--space-px); text-underline-offset: 0.18em; }
  a:hover { color: var(--color-accent-strong); }
  ::selection { background: var(--color-accent-soft); color: var(--color-heading); }
  strong { font-weight: var(--weight-bold); color: var(--color-heading); }

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

/* --------------------------------------------------------------------------
   4. LAYOUT — conteneur, sections, grilles de structure (Grid = 2D)
   -------------------------------------------------------------------------- */
@layer layout {
  .container { inline-size: min(100% - 2 * var(--container-pad), var(--container-max)); margin-inline: auto; }
  .section { padding-block: var(--gap-section); }
  .section--lg { padding-block: var(--gap-section-lg); }
  .section--soft { background: var(--color-bg-soft); }
  .section--dark { background: var(--color-bg-dark); color: var(--color-on-dark-soft); --eyebrow-color: var(--color-on-dark); --eyebrow-rule: var(--color-warm); }
  .section--dark :is(h1, h2, h3, h4) { color: var(--color-on-dark); }
  .section--dark strong { color: var(--color-on-dark); }

  /* En-tête de section : surtitre + h2 + accroche */
  .section__head { display: grid; gap: var(--space-4); justify-items: start; margin-block-end: var(--gap-head); }
  .section__head--center { justify-items: center; text-align: center; }
  .section__head--center :is(h2, p) { margin-inline: auto; }
  .section__head--center .eyebrow { justify-items: center; }

  /* Actions de conversion en fin de section */
  .section__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-block-start: var(--gap-head); }
  .section__cta p { font-size: var(--fs-sm); color: var(--color-text-secondary); }

  /* Grilles */
  .grid { display: grid; gap: var(--gap-grid); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .feature-row + .grid { margin-block-start: var(--space-8); }
  a[href^="tel:"] { white-space: nowrap; }
  .grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
  @media (min-width: 64em) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3, .grid--cards { grid-template-columns: repeat(3, 1fr); }
  }

  /* Deux colonnes texte / visuel */
  .split { display: grid; gap: var(--gap-columns); align-items: center; }
  @media (min-width: 56em) {
    .split { grid-template-columns: 7fr 5fr; }
    .split--even { grid-template-columns: 1fr 1fr; }
    .split--flip > :first-child { order: 2; }
    .split--start { align-items: start; }
  }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
}

/* --------------------------------------------------------------------------
   5. COMPONENTS (Flex = alignement 1D interne)
   -------------------------------------------------------------------------- */
@layer components {

  /* ---- 5.1 Typographie de composition : surtitre à trait chaud, accroche ---- */
  .eyebrow { display: grid; gap: var(--space-2); justify-items: start; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--weight-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--eyebrow-color); max-inline-size: none; }
  .eyebrow::after { content: ""; inline-size: 2.5rem; block-size: var(--space-rule); border-radius: var(--radius-pill); background: var(--eyebrow-rule); }
  .lead { font-size: var(--fs-lg); color: var(--color-text-secondary); line-height: 1.55; }
  .grid + .note, .why + .note { margin-block-start: var(--gap-head); }
  .note { font-size: var(--fs-sm); color: var(--color-text-secondary); padding-inline-start: var(--space-4); border-inline-start: var(--space-hair) solid var(--color-warm); }

  /* ---- 5.2 Boutons & liens ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--btn-pad-block) var(--btn-pad-inline);
    border-radius: var(--btn-radius); border: var(--space-px) solid transparent;
    font-weight: var(--weight-bold); font-size: var(--fs-btn); line-height: 1.2; text-decoration: none; text-align: center;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn--primary { background: var(--color-accent); color: var(--color-on-dark); box-shadow: var(--elev-1); }
  .btn--primary:hover { background: var(--color-accent-strong); color: var(--color-on-dark); box-shadow: var(--elev-2); }
  .btn--secondary { background: var(--color-surface); color: var(--color-accent-strong); border-color: var(--color-accent); }
  .btn--secondary:hover { background: var(--color-accent-soft); color: var(--color-accent-strong); }
  .btn--white { background: var(--color-surface); color: var(--color-heading); }
  .btn--white:hover { background: var(--color-bg-soft); color: var(--color-accent-strong); box-shadow: var(--elev-2); }
  .btn--outline-white { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark-soft); }
  .btn--outline-white:hover { background: rgb(255 255 255 / 0.12); color: var(--color-on-dark); }
  .btn--sm { padding: var(--btn-pad-block-sm) var(--space-4); font-size: var(--fs-sm); }

  .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); text-decoration: none; color: var(--color-accent); }
  .link-arrow .icon { inline-size: 1.1em; block-size: 1.1em; transition: transform var(--t-fast) var(--ease); }
  .link-arrow:hover .icon { transform: translateX(4px); }
  .section--dark .link-arrow { color: var(--color-accent-on-dark); }

  /* Pictogrammes inline (currentColor) */
  .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

  /* ---- 5.3 En-tête collant translucide ---- */
  .site-header { position: sticky; inset-block-start: 0; z-index: var(--z-header); background: var(--color-header-bg); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-block-end: var(--space-px) solid var(--color-line-soft); }
  .site-header__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); min-block-size: var(--header-height); }
  .brand { display: inline-grid; line-height: 1.05; text-decoration: none; color: var(--color-heading); }
  .brand__logo { block-size: var(--brand-logo-h, 2.5rem); inline-size: auto; }
  .brand__by { font-size: var(--fs-xs); font-weight: var(--weight-bold); color: var(--color-text-secondary); }
  .brand:hover .brand__logo { opacity: 0.85; }

  .nav { display: none; }
  .nav__list { display: flex; align-items: center; gap: var(--space-1); }
  .nav__link, .nav__summary { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: var(--weight-bold); font-size: var(--fs-sm); color: var(--color-heading); text-decoration: none; cursor: pointer; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
  .nav__link:hover, .nav__summary:hover { color: var(--color-accent-strong); background: var(--color-accent-soft); }
  .nav__link[aria-current="page"] { color: var(--color-accent-strong); }
  .nav__summary .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); transition: transform var(--t-fast) var(--ease); }
  /* Menu « Applications » : panneau blanc opaque calé sur le bord droit de la barre (référent
     .site-header__bar, position: relative), six tuiles « pictogramme + nom +
     besoin », une colonne, deux à partir de 80 em. Le texte est de l'encre sur blanc, sans voile ni dégradé. Aucun script requis. */
  .nav__dropdown { position: static; }
  .nav__dropdown[open] .nav__summary { color: var(--color-accent-strong); background: var(--color-accent-soft); }
  .nav__dropdown[open] .nav__summary .icon { transform: rotate(180deg); }
  .nav__menu { position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline-end: 0; z-index: var(--z-menu); inline-size: min(var(--nav-panel-w), calc(100vw - 2 * var(--container-pad))); padding: var(--space-4); background: var(--color-surface); border: var(--space-px) solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--elev-3); }

  .nav__panel { display: grid; grid-template-columns: minmax(0, 1fr); }
  .nav__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); align-content: start; }
  /* Deux colonnes de trois à partir de 80 em : sous ce seuil, le panneau large recouvrirait le titre du héros */
  @media (min-width: 80em) {
    .nav__menu { inline-size: min(var(--nav-panel-w-wide), calc(100vw - 2 * var(--container-pad))); }
    .nav__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Une entrée : tuile à pictogramme dans la teinte de l'application, nom, ligne de besoin (deux lignes au plus).
     Au survol ou au focus, la tuile passe en couleur pleine et le nom prend la teinte : un seul signal, net. */
  .nav__app { display: grid; grid-template-columns: var(--nav-tile) minmax(0, 1fr); align-items: start; column-gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); color: var(--color-heading); text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
  .nav__app-icon { display: grid; place-items: center; inline-size: var(--nav-tile); block-size: var(--nav-tile); border-radius: var(--radius-sm); background: var(--app-tint); color: var(--app-text); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  .nav__app-icon .icon { inline-size: var(--icon-md); block-size: var(--icon-md); }
  .nav__app-body { display: grid; gap: var(--space-1); min-inline-size: 0; padding-block-start: var(--space-1); }
  .nav__app-body strong { font-size: var(--fs-sm); font-weight: var(--weight-bold); line-height: var(--lh-snug); color: var(--color-heading); transition: color var(--t-fast) var(--ease); }
  .nav__app-body span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--color-text-secondary); }
  .nav__app:is(:hover, :focus-visible) { background: var(--color-bg-soft); }
  /* Focus visible et non masqué (WCAG 2.4.7 / 2.4.11) : la seule teinte de survol ne suffirait pas au clavier.
     L'outline transparent de la couche utilities reste en place (contrastes forcés). */
  .nav__app:focus-visible, .nav__summary:focus-visible { box-shadow: var(--focus-ring); }
  .nav__app:is(:hover, :focus-visible) .nav__app-icon { background: var(--app); color: var(--color-on-dark); }
  .nav__app:is(:hover, :focus-visible) .nav__app-body strong { color: var(--app-text); }


  @media (min-width: 64em) {
    /* Ouverture : fondu + translation du panneau (une seule animation, 0,2 s) */
    .nav__dropdown[open] .nav__menu { animation: nav-panel-in var(--t-fast) var(--ease) both; }
  }
  @keyframes nav-panel-in { from { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); } }
  @media (prefers-reduced-motion: reduce) {
    .nav__dropdown[open] .nav__menu { animation: none; }
  }

  /* Mobile et sans script sous 64 em : le panneau se déplie à plat */
  @media (max-width: 63.99em) {
    :is(.site-header.is-open, .no-js) .nav__menu { position: static; inline-size: auto; padding: var(--space-2) 0 var(--space-3); background: transparent; border: 0; box-shadow: none; }
    :is(.site-header.is-open, .no-js) .nav__app { min-block-size: var(--nav-item-min-h); padding-inline: var(--space-2); }
    /* Les liens simples s'alignent à gauche comme les entrées d'application */
    :is(.site-header.is-open, .no-js) :is(.nav__link, .nav__summary) { justify-content: flex-start; }
  }

  .site-header__actions { display: none; align-items: center; gap: var(--space-3); }
  .menu-toggle { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--space-px) solid var(--color-line-strong); border-radius: var(--btn-radius); font-weight: var(--weight-bold); font-size: var(--fs-sm); color: var(--color-heading); background: var(--color-surface); }
  .menu-toggle .icon { inline-size: var(--icon-md); block-size: var(--icon-md); }

  /* Mobile : le menu se déplie sous la barre (ouvert par script, ou toujours visible sans script).
     Confiné sous 64 em : une rotation de tablette menu ouvert retrouve la barre de bureau.
     Le menu déplié défile dans la fenêtre : le bouton de démonstration reste atteignable. */
  @media (max-width: 63.99em) {
    .site-header.is-open .nav, .no-js .nav { display: block; flex-basis: 100%; max-block-size: calc(100dvh - var(--header-height)); overflow-y: auto; padding-block: var(--space-3) var(--space-5); border-block-start: var(--space-px) solid var(--color-line-soft); }
    :is(.site-header.is-open, .no-js) .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    :is(.site-header.is-open, .no-js) :is(.nav__link, .nav__summary) { padding-block: var(--space-3); font-size: var(--fs-btn); }
    :is(.site-header.is-open, .no-js) .site-header__actions { display: flex; margin-block-start: var(--space-4); }
    :is(.site-header.is-open, .no-js) .site-header__actions .btn { inline-size: 100%; }
  }
  .no-js .menu-toggle { display: none; }

  @media (min-width: 64em) {
    .nav { display: flex; align-items: center; gap: var(--space-5); }
    .site-header__actions { display: flex; }
    .menu-toggle { display: none; }
  }

  /* ---- 5.4 Fil d'Ariane ---- */
  .breadcrumb { font-size: var(--fs-sm); color: var(--color-text-secondary); padding-block: var(--space-4); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--color-line-strong); }
  .breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
  .breadcrumb a:hover { color: var(--color-accent); }
  .breadcrumb [aria-current="page"] { color: var(--color-heading); font-weight: var(--weight-bold); }

  /* ---- 5.5 Héros : colonnes 6/6, bouton au-dessus du pli à 1366×800 ---- */
  .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--gap-hero); background: linear-gradient(180deg, var(--color-bg-soft), var(--color-bg)); }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: var(--z-below); pointer-events: none; background: radial-gradient(48rem 26rem at 96% -10%, var(--color-accent-soft), transparent 62%), radial-gradient(28rem 16rem at -8% 108%, var(--color-warm-bg), transparent 60%); }
  .hero__copy { display: grid; gap: var(--space-4); justify-items: start; }
  .hero__copy .lead { color: var(--color-text); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block-start: var(--space-2); }
  .hero .split { align-items: start; }
  /* ---- Illustration annotée (accueil) : dessin décoratif + liste de liens positionnés + traits en surcouche ---- */
  /* Coordonnées de l'illustration annotée de l'accueil (déplacées des attributs style
     de index.html pour permettre une CSP sans style-src-attr). Elles suivent le dessin
     plateforme.svg : à recaler ensemble si la scène change. */
  .territoire { position: relative; inline-size: 100%; max-inline-size: 52rem; aspect-ratio: 4 / 3; justify-self: end; align-self: center; --scene-x: 5%; --scene-y: 12%; --scene-w: 90%; }
  .territoire__traits g:nth-child(1) { --i: 0; } .territoire__traits g:nth-child(2) { --i: 1; }
  .territoire__traits g:nth-child(3) { --i: 2; } .territoire__traits g:nth-child(4) { --i: 3; }
  .territoire__traits g:nth-child(5) { --i: 4; } .territoire__traits g:nth-child(6) { --i: 5; }
  .territoire__traits g:nth-child(7) { --i: 6; }
  .territoire__reperes li:nth-child(1) { --x: 99%; --y: 40%; --i: 0; }
  .territoire__reperes li:nth-child(2) { --x: 36%; --y: 8%; --i: 1; }
  .territoire__reperes li:nth-child(3) { --x: 60%; --y: 10%; --i: 2; }
  .territoire__reperes li:nth-child(4) { --x: 99%; --y: 58%; --i: 3; }
  .territoire__reperes li:nth-child(5) { --x: 60%; --y: 80%; --i: 4; }
  .territoire__reperes li:nth-child(6) { --x: 36%; --y: 64%; --i: 5; }
  .territoire__reperes li:nth-child(7) { --x: 34%; --y: 42%; --i: 6; }
  .territoire__scene { position: absolute; inset-inline-start: var(--scene-x); inset-block-start: var(--scene-y); inline-size: var(--scene-w); block-size: auto; }
  .territoire__traits { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; overflow: visible; }
  .territoire__traits line { stroke: var(--color-heading); stroke-width: 1.5; opacity: .55; vector-effect: non-scaling-stroke; }
  .territoire__traits circle { fill: var(--color-heading); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .territoire__traits g { opacity: 0; animation: repere-in .7s ease-out both; animation-delay: calc(.4s + var(--i) * .5s); }
  .territoire__reperes { list-style: none; margin: 0; padding: 0; }
  .territoire__reperes li { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); transform: translate(var(--ax, 0), -50%); opacity: 0; animation: repere-in .7s ease-out both; animation-delay: calc(.4s + var(--i) * .5s); }
  .territoire__reperes li[data-ancre="droite"] { --ax: -100%; }
  .territoire__reperes a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: 0 4px 14px rgb(22 36 58 / .12); color: var(--color-heading); font-weight: var(--weight-bold); font-size: var(--fs-xs); text-decoration: none; white-space: nowrap; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
  .territoire__reperes a::before { content: ""; inline-size: .6em; block-size: .6em; border-radius: 50%; background: var(--app); flex: none; }
  .territoire__reperes a:hover, .territoire__reperes a:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(22 36 58 / .2); color: var(--app-text); }
  @keyframes repere-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) { .territoire__reperes li, .territoire__traits g { animation: none; opacity: 1; } }
  /* Sous 72 em, le cadre est trop étroit pour annoter : les repères se rangent en liste sous le dessin */
  @media (max-width: 71.99em) {
    .territoire { aspect-ratio: auto; }
    .territoire__scene { position: static; inline-size: 100%; }
    .territoire__traits { display: none; }
    .territoire__reperes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
    .territoire__reperes li { position: static; transform: none; opacity: 1; animation: none; }
    .territoire__reperes a { white-space: normal; }
  }
  /* Scène illustrée (accueil) : le SVG porte son propre fond, sans cadre ni ombre ; haut aligné sur le surtitre */
  .hero__scene { display: block; inline-size: 100%; max-inline-size: 44rem; block-size: auto; align-self: center; justify-self: center; }
  .breadcrumb + .hero { padding-block-start: var(--space-6); }
  @media (max-width: 55.99em) { .hero__scene { order: 1; } }
  @media (min-width: 56em) { .hero .split { grid-template-columns: 5fr 7fr; column-gap: var(--space-5); align-items: center; } }
  /* Héros d'une page application : le surtitre et le trait prennent l'identité de l'application */
  .hero[data-app] { --eyebrow-color: var(--app-text); --eyebrow-rule: var(--app); }


  /* ---- 5.7 Confiance : bandeau logos sur fond doux, filets, compteur tenu par le commercial ---- */
  .trust { padding-block: var(--space-8); background: var(--color-bg-soft); border-block: var(--space-px) solid var(--color-line); }
  .trust__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-block-end: var(--space-6); }
  .trust__label { max-inline-size: none; font-size: var(--fs-md); font-family: var(--font-title); color: var(--color-heading); }
  /* Défilement automatique des logos : piste dupliquée (copie aria-hidden), 0 → -50 % = une liste complète */
  .logos-marquee { overflow: hidden; padding-block: var(--space-2); margin-inline: calc(-1 * var(--container-pad)); padding-inline: var(--container-pad); mask-image: linear-gradient(to right, transparent, black var(--container-pad), black calc(100% - var(--container-pad)), transparent); }
  .logos-marquee__track { display: flex; inline-size: max-content; animation: logos-scroll var(--marquee-duration) linear infinite; will-change: transform; }
  .logos-marquee__list { display: flex; align-items: center; gap: var(--marquee-gap); margin: 0; padding: 0 var(--marquee-gap) 0 0; list-style: none; }
  .logos-marquee li { flex: none; display: flex; align-items: center; justify-content: center; block-size: var(--marquee-logo-height); }
  .logos-marquee img { display: block; block-size: auto; inline-size: auto; max-block-size: var(--marquee-logo-height); max-inline-size: 10rem; object-fit: contain; }
  @keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .logos-marquee:is(:hover, :focus-within) .logos-marquee__track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .logos-marquee { margin-inline: 0; padding-inline: 0; mask-image: none; }
    .logos-marquee__track { animation: none; will-change: auto; inline-size: auto; }
    .logos-marquee__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5) var(--space-6); padding: 0; }
    .logos-marquee li { block-size: auto; min-block-size: var(--marquee-logo-height); }
    .logos-marquee__list--copy { display: none; }
  }

  /* ---- 5.8 Rangée texte / capture (« ce qui relie », thèmes des pages application) ---- */
  .feature-row + .feature-row { margin-block-start: var(--gap-section); }
  /* Scène illustrée d'une rangée de thème : le SVG porte sa scène et ses animations, aucun cadre ni animation de page */
  .feature-row__scene { margin: 0; align-self: center; }
  .feature-row__scene img { display: block; inline-size: 100%; block-size: auto; }
  .feature-row__copy { display: grid; gap: var(--space-4); justify-items: start; }
  .feature-row__title { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); max-inline-size: var(--measure-h2); }

  /* ---- 5.9 Carte d'application (toute la carte cliquable, identité via [data-app]) ---- */
  .app-card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-3); background: var(--color-surface); border: var(--space-px) solid var(--color-line); border-radius: var(--card-radius); overflow: hidden; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); --eyebrow-color: var(--app-text); --eyebrow-rule: var(--app); }
  .app-card > :not(.app-card__thumb) { margin-inline: var(--card-pad); }
  .app-card > :last-child { margin-block-end: var(--card-pad); }
  .app-card:hover { transform: translateY(-4px); box-shadow: var(--elev-2); }
  .app-card:focus-within { box-shadow: var(--focus-ring); }
  .app-card__thumb { block-size: var(--thumb-height); background: var(--app-tint); border-block-end: var(--space-px) solid var(--color-line-soft); overflow: hidden; margin-block-end: var(--space-2); }
  .app-card__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: left top; }
  .app-card__thumb--photo img { object-position: center; }
  .app-card__title { font-size: var(--fs-h3); }
  .app-card__title a { color: inherit; text-decoration: none; }
  .app-card__title a::after { content: ""; position: absolute; inset: 0; }
  .app-card p { font-size: var(--fs-sm); color: var(--color-text-secondary); }
  .app-card .link-arrow { align-self: end; font-size: var(--fs-sm); color: var(--app-text); }
  .app-card:hover .link-arrow .icon { transform: translateX(4px); }
  /* Mobile : vignette + sigle + titre + lien, sur une rangée */
  @media (max-width: 47.99em) {
    .app-card { grid-template-columns: 5rem 1fr; grid-template-rows: auto auto auto; gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-4); }
    .app-card > :not(.app-card__thumb) { margin-inline: 0; }
    .app-card > :last-child { margin-block-end: 0; }
    .app-card__thumb { grid-row: 1 / 4; block-size: 4rem; margin: 0; border: 0; border-radius: var(--radius-sm); }
    .app-card__title { font-size: var(--fs-md); }
    .app-card p { display: none; }
  }


  /* ---- 5.11 Contexte daté : filet chaud, date en index ---- */
  .context { display: grid; gap: var(--space-3); align-content: start; padding-block-start: var(--space-5); border-block-start: var(--space-hair) solid var(--color-line); }
  .context::before { content: ""; display: block; inline-size: 3rem; block-size: var(--space-rule); margin-block-start: calc(-1 * var(--space-5) - var(--space-hair)); margin-block-end: var(--space-3); background: var(--color-warm); }
  .context__date { font-family: var(--font-title); font-weight: var(--weight-bold); font-size: var(--fs-sm); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-warm-text); }
  .context h3 { font-size: var(--fs-h4); }
  .context p { font-size: var(--fs-sm); color: var(--color-text-secondary); }

  /* ---- 5.12 Pourquoi choisir LOLEA : liste indexée ---- */
  .why { display: grid; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
  @media (min-width: 48em) { .why { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--gap-columns); } }
  .why > li { scroll-margin-block-start: var(--space-6); display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
  /* La pastille prend l'identité de l'application quand la liste porte [data-app]
     (pages application) ; hors [data-app], les valeurs neutres de :root redonnent
     l'accent du site (accueil). */
  .why__icon { display: grid; place-items: center; inline-size: var(--icon-box); block-size: var(--icon-box); border-radius: var(--radius-sm); background: var(--app-tint); color: var(--app-text); }
  .why__icon .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
  .why__icon--ugap { background: transparent; }
  .logo-ugap { display: block; block-size: 3rem; inline-size: auto; margin-block-start: var(--space-3); border-radius: var(--radius-sm); }
  .why__icon--ugap img { inline-size: var(--icon-box); block-size: var(--icon-box); }
  .why h3 { font-size: var(--fs-h4); margin-block: calc((var(--icon-box) - 1lh) / 2) var(--space-1); }
  .aside__bloc { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-4); background: var(--color-surface); border: var(--space-px) solid var(--color-line); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text-secondary); }
  .aside__bloc h3 { font-size: var(--fs-h4); }
  .aside__bloc > :not(.logo-ugap) { grid-column: 2; }
  .aside__bloc .logo-ugap { grid-row: span 2; margin-block-start: 0; }
  .why p { font-size: var(--fs-sm); color: var(--color-text-secondary); }

  /* ---- 5.13 Résultats clients (composant réservé : publié seulement avec un cas réel nommé) ---- */
  .result { display: grid; gap: var(--space-3); align-content: start; padding: var(--card-pad); background: var(--color-surface); border: var(--space-px) solid var(--color-line); border-radius: var(--card-radius); }
  .result__figure { font-family: var(--font-title); font-weight: var(--weight-bold); font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--color-heading); }
  .result__who { font-size: var(--fs-sm); font-weight: var(--weight-bold); color: var(--color-heading); }
  .result p { font-size: var(--fs-sm); color: var(--color-text-secondary); }
  .result__source { font-size: var(--fs-xs); }

  /* ---- 5.15 FAQ (pages application) : <details> natifs en cartes ----
     Une seule colonne de cartes sur toute la largeur du conteneur
     (décision du 06/10/2026). */
  .faq { display: grid; gap: var(--space-3); }
  /* Les cartes prennent le fond inverse de leur section : douces sur section blanche, blanches sur section douce. */
  .faq details { background: var(--color-bg-soft); border: var(--space-px) solid var(--color-line); border-radius: var(--card-radius); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
  .section--soft .faq details { background: var(--color-surface); }
  .faq details[open] { border-color: var(--color-line-strong); box-shadow: var(--elev-1); }
  .faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--card-pad); border-radius: var(--card-radius); font-family: var(--font-title); font-weight: var(--weight-bold); color: var(--color-heading); cursor: pointer; transition: color var(--t-fast) var(--ease); }
  .faq summary:hover { color: var(--color-accent-strong); }
  .faq details[open] summary { color: var(--color-accent-strong); }
  .faq summary .icon { flex-shrink: 0; inline-size: var(--icon-md); block-size: var(--icon-md); color: var(--color-accent); transition: transform var(--t-fast) var(--ease); }
  .faq details[open] summary .icon { transform: rotate(45deg); }
  .faq details > :not(summary) { padding: 0 var(--card-pad) var(--space-5); max-inline-size: none; }

  /* ---- 5.16 Bande finale sur photo voilée (voile encre → bleu : texte blanc ≥ 4,5:1) ---- */
  .cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--color-bg-dark); }
  .cta-band__photo { position: absolute; inset: 0; z-index: var(--z-below); }
  .cta-band__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .cta-band__photo::after { content: ""; position: absolute; inset: 0; background: var(--color-veil); }
  .cta-band .container { display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
  .cta-band .eyebrow { justify-items: center; }
  .cta-band h2 { max-inline-size: 22ch; }
  .cta-band p { color: var(--color-on-dark-soft); font-size: var(--fs-lg); }
  .cta-band .cluster { justify-content: center; margin-block-start: var(--space-2); }

  /* ---- 5.17 Pied de page (quatre colonnes) ---- */
  .site-footer { background: var(--color-bg-dark); color: var(--color-on-dark-soft); padding-block: var(--space-9) var(--space-6); border-block-start: var(--space-px) solid var(--color-line-on-dark); }
  .site-footer__grid { display: grid; gap: var(--space-8) var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  @media (min-width: 56em) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
  .site-footer .brand { color: var(--color-on-dark); }
  .site-footer .brand__logo { filter: brightness(0) invert(1); } /* logo blanc sur fond sombre, comme sur l'ancienne refonte */
  .site-footer .brand__by { color: var(--color-on-dark-soft); }
  .site-footer__about { max-inline-size: 34ch; font-size: var(--fs-sm); margin-block-start: var(--space-4); }
  .site-footer h2 { font-size: var(--fs-xs); font-family: var(--font-body); font-weight: var(--weight-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-on-dark); margin-block-end: var(--space-4); }
  .site-footer ul { display: grid; gap: var(--space-2); }
  .site-footer a { color: var(--color-on-dark-soft); text-decoration: none; font-size: var(--fs-sm); }
  .site-footer a:hover { color: var(--color-on-dark); text-decoration: underline; }
  .site-footer address { font-style: normal; font-size: var(--fs-sm); display: grid; gap: var(--space-2); }
  .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; margin-block-start: var(--space-9); padding-block-start: var(--space-5); border-block-start: var(--space-px) solid var(--color-line-on-dark); font-size: var(--fs-sm); }
  .site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }

  /* ---- 5.19 Références : logos et noms en clair, regroupés par type de service ---- */
  .refs { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
  .refs li { display: grid; gap: var(--space-3); justify-items: center; align-content: start; padding: var(--card-pad); background: var(--color-surface); border: var(--space-px) solid var(--color-line); border-radius: var(--card-radius); text-align: center; }
  .refs li picture { display: flex; align-items: center; justify-content: center; block-size: var(--logo-height); }
  .refs li img { display: block; block-size: auto; inline-size: auto; max-block-size: var(--logo-height); max-inline-size: 10rem; object-fit: contain; }
  .refs__name { font-size: var(--fs-sm); font-weight: var(--weight-bold); color: var(--color-heading); }
  .refs-group + .refs-group { margin-block-start: var(--gap-head); }
  .refs-group h3 { font-size: var(--fs-h4); margin-block-end: var(--space-4); }

  /* ---- 5.20 Formulaire de démonstration : champs empilés, cases à cocher en grille ---- */
  .form { display: grid; gap: var(--space-5); max-inline-size: 40rem; }
  .form__row { display: grid; gap: var(--space-5); }
  @media (min-width: 40em) { .form__row { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: var(--space-2); align-content: start; }
  .field label, .field legend { font-size: var(--fs-sm); font-weight: var(--weight-bold); color: var(--color-heading); }
  .field input, .field textarea, .field select { inline-size: 100%; padding: var(--space-3) var(--space-4); border: var(--space-px) solid var(--color-field-border); border-radius: var(--radius-sm); background: var(--color-surface); font-family: var(--font-body); color: var(--color-text); font-size: var(--fs-md); }
  .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--color-accent); }
  .field select { appearance: none; padding-inline-end: var(--space-8); background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: right 1.15rem center, right 0.85rem center; background-size: 0.3rem 0.3rem, 0.3rem 0.3rem; background-repeat: no-repeat; }
  .form__row--simple { grid-template-columns: minmax(0, 1fr); max-inline-size: calc(50% - var(--space-5) / 2); }
  @media (max-width: 39.999em) { .form__row--simple { max-inline-size: none; } }
  .field :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--color-warm-text); box-shadow: inset 0 0 0 var(--space-px) var(--color-warm-text); }
  .field__erreur { font-size: var(--fs-xs); font-weight: var(--weight-bold); color: var(--color-warm-text); }
  .field textarea { min-block-size: 8rem; resize: vertical; }
  .form__note { font-size: var(--fs-xs); color: var(--color-text-secondary); }
  .form__note--legal { font-size: var(--fs-sm); padding: var(--space-4); background: var(--color-bg-soft); border-radius: var(--radius-sm); max-inline-size: none; }
  .form__status { font-size: var(--fs-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: var(--space-px) solid var(--color-line); }
  .form__status:empty { padding: 0; border: 0; } /* jamais display:none : la zone doit exister pour être annoncée */
  .form__status--error { color: var(--color-warm-text); background: var(--color-warm-bg); border-color: var(--color-warm); }
  @media (max-width: 39.999em) { .form .cluster { display: grid; } .form .cluster .btn { inline-size: 100%; justify-content: center; } }
  .honeypot { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .aside { display: grid; gap: var(--space-4); align-content: start; padding: var(--card-pad); background: var(--color-bg-soft); border: var(--space-px) solid var(--color-line); border-radius: var(--card-radius); --color-bg: var(--color-bg-soft); } /* --color-bg : le halo de focus reprend le fond de l'encadré */
  .aside h2 { font-size: var(--fs-h3); }
  .aside ul { display: grid; gap: var(--space-2); padding-inline-start: 1.25rem; list-style: disc; font-size: var(--fs-sm); color: var(--color-text-secondary); }
  .aside p { font-size: var(--fs-sm); color: var(--color-text-secondary); }

  /* ---- 5.21 Pages de texte (mentions légales, confidentialité, merci) ---- */
  .page-head { padding-block: var(--gap-hero) var(--space-6); background: linear-gradient(180deg, var(--color-bg-soft), var(--color-bg)); }
  .page-head .container { display: grid; gap: var(--space-4); justify-items: start; }
  .page-head h1 { max-inline-size: var(--measure-h2); }
  .page-head + .section { padding-block-start: var(--gap-head); }
  .prose { display: grid; gap: var(--space-4); max-inline-size: var(--measure); }
  .prose h2 { font-size: var(--fs-h3); margin-block-start: var(--space-5); }
  .prose h3 { font-size: var(--fs-h4); }
  .prose ul, .prose ol { display: grid; gap: var(--space-2); padding-inline-start: 1.25rem; list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose__table { overflow-x: auto; }
  .prose table { inline-size: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
  .prose th, .prose td { padding: var(--space-2) var(--space-3); border-block-end: var(--space-px) solid var(--color-line); text-align: start; vertical-align: top; }
  .prose th { color: var(--color-heading); }
  .prose__date { font-size: var(--fs-sm); color: var(--color-text-secondary); }

  /* ---- 5.22 Équipe : bandeau de portraits qui défile seul (piste dupliquée, translateX en boucle), pause au survol/focus/flèche ---- */
  .team { position: relative; --team-card: 11.875rem; --team-gap: var(--space-5); --team-step: calc(var(--team-card) + var(--team-gap)); --team-scroll-duration: 40s; --team-shift: 0; }
  .team__rail { overflow: hidden; padding: var(--space-2) var(--space-1) var(--space-4); border-radius: var(--radius-sm); }
  .team__rail:focus-visible { box-shadow: var(--focus-ring); }
  .team__rail:focus-within { overflow-x: auto; }
  .team__track { display: flex; inline-size: max-content; translate: calc(-1 * var(--team-shift) * var(--team-step)) 0; transition: translate var(--t-slow) var(--ease); animation: team-scroll var(--team-scroll-duration) linear infinite; will-change: transform; }
  .team__list { display: flex; gap: var(--team-gap); list-style: none; margin: 0; padding: 0 var(--team-gap) 0 0; }
  @keyframes team-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .team:is(:hover, :focus-within) .team__track, .team.is-paused .team__track { animation-play-state: paused; }
  .team__member { position: relative; flex: none; inline-size: var(--team-card); aspect-ratio: 1 / 1; overflow: hidden; scroll-snap-align: start; background: var(--color-bg-dark); box-shadow: var(--elev-1); }
  .team__photo { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; user-select: none; }
  .team__veil { position: absolute; inset: 0; display: grid; grid-template-columns: var(--space-9) 1fr; align-items: end; opacity: 0; background: linear-gradient(to top, rgb(22 36 58 / 0.94) 0%, rgb(22 36 58 / 0.92) 15%, transparent 100%); transition: opacity 0.4s var(--ease); }
  .team__linkedin { display: flex; align-items: flex-start; justify-content: center; block-size: 100%; padding-block-start: var(--space-4); background: rgb(22 36 58 / 0.6); color: var(--color-on-dark); transform: translateX(-100%); transition: transform 0.3s var(--ease), color var(--t-fast) var(--ease); }
  .team__linkedin:hover { color: var(--color-accent-on-dark); }
  .team__linkedin:focus-visible { box-shadow: var(--focus-ring-on-dark); border-radius: 0; }
  .team__linkedin-icon { inline-size: var(--icon-md); block-size: var(--icon-md); }
  .team__caption { display: grid; gap: var(--space-hair); margin: 0; padding: 0 var(--space-2) var(--space-4) var(--space-1); line-height: var(--lh-snug); color: var(--color-on-dark); transform: translateY(var(--space-6)); transition: transform 0.4s var(--ease); }
  .team__name { font-family: var(--font-title); font-weight: var(--weight-bold); font-size: var(--fs-sm); }
  .team__role { font-size: var(--fs-xs); font-style: italic; }
  .team__member:is(:hover, :focus-within) .team__veil { opacity: 1; }
  .team__member:is(:hover, :focus-within) .team__linkedin { transform: none; }
  .team__member:is(:hover, :focus-within) .team__caption { transform: none; }
  .team__arrow { position: absolute; inset-block-start: calc(var(--team-card) / 2 + var(--space-2)); z-index: 1; display: inline-flex; inline-size: 2.5rem; block-size: 2.5rem; align-items: center; justify-content: center; transform: translateY(-50%); border: var(--space-px) solid var(--color-line); border-radius: 50%; background: var(--color-surface); color: var(--color-heading); box-shadow: var(--elev-2); cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  .team__arrow:hover { background: var(--color-accent); color: var(--color-on-dark); border-color: var(--color-accent); }
  .team__arrow:focus-visible { border-radius: 50%; }
  .team__arrow .icon { inline-size: var(--icon-md); block-size: var(--icon-md); }
  .team__arrow--prev { inset-inline-start: calc(-1 * var(--space-5)); }
  .team__arrow--next { inset-inline-end: calc(-1 * var(--space-5)); }
  @media (hover: none) { .team__veil { opacity: 1; } .team__linkedin { transform: none; } .team__caption { transform: none; } }
  @media (max-width: 40rem) { .team { --team-card: 10rem; --team-gap: var(--space-4); } .team__arrow { display: none; } }
  /* Mouvement réduit : aucune animation, retour au rail manuel (défilement natif, scroll-snap), la copie disparaît */
  @media (prefers-reduced-motion: reduce) {
    .team__track { animation: none; translate: none; transition: none; will-change: auto; inline-size: auto; }
    .team__rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .team__rail::-webkit-scrollbar { display: none; }
    .team__list--copy { display: none; }
    .team__veil, .team__linkedin, .team__caption, .team__arrow { transition: none; } .team__veil { opacity: 1; } .team__linkedin { transform: none; } .team__caption { transform: none; }
  }

  /* ---- 5.18 Apparition au défilement (sans JS : tout est visible) ---- */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  .reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: var(--delay-1); }
  .reveal[data-delay="2"] { transition-delay: var(--delay-2); }
  .reveal[data-delay="3"] { transition-delay: var(--delay-3); }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
}

/* --------------------------------------------------------------------------
   6. UTILITIES — dont le focus visible, qui doit battre toute ombre de composant
   -------------------------------------------------------------------------- */
@layer utilities {
  :focus-visible { outline: 2px solid transparent; outline-offset: 4px; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  :is(.section--dark, .site-footer, .cta-band) :focus-visible { box-shadow: var(--focus-ring-on-dark); }
  .app-card__title a:focus-visible { box-shadow: none; }
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip-link { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-skip); padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-on-dark); border-radius: var(--radius-sm); transform: translateY(-200%); }
  .skip-link:focus { transform: none; }
}