/* =============================================================================
   Telemesure, une solution Grolleau : feuille de style unique du site vitrine
   Système de design « Industriel premium » (marine Grolleau, orange d'action,
   vert pour ce qui va bien, bleu ciel pour les fonds doux).

   Règles du site
   - Aucune ressource externe : police système, illustrations SVG locales.
   - CSP stricte : aucun attribut de style en ligne, aucune balise de style, aucun script en ligne.
     Toute mise en forme passe par les classes ci-dessous.
   - Une classe = un composant (block), ses parties en block__element,
     ses variantes en block--modifier. Les listes qui portent une classe
     perdent leurs puces ; les listes sans classe (dans .prose) les gardent.
   - Contexte sombre : ajouter .theme-dark sur le conteneur (bande, héros,
     panneau). Les composants s'y adaptent seuls.

   Points de rupture (largeur de fenêtre)
   1240 px : menu compact (bouton « Menu »)
   1024 px : les mises en page à deux colonnes passent sur une colonne
    760 px : mobile (grilles sur une colonne, cartes compactes)
    480 px : petits mobiles (boutons pleine largeur)

   SOMMAIRE
   01. Jetons                       17. Étapes compactes (.steps)
   02. Base et typographie          18. Récit pas à pas (.story)
   03. Utilitaires                  19. Tuiles (.tiles, .tile)
   04. Mise en page                 20. Encadré « Bon à savoir » (.note)
   05. Boutons et liens             21. Carte mise en avant (.spot-card)
   06. En-tête et navigation        22. Cadre d'illustration (.illus-frame)
   07. Héros d'accueil (.hero)      23. Réseaux, mesures, chiffres (.networks, .devices, .stats, .stat-panel, .pills)
   08. Héros de page (.page-hero)   24. Confiance (.editor, .pillars)
   09. Badges et états              25. FAQ (.faq)
   10. Pastilles d'icône            26. Glossaire (.glossary)
   11. Bande de chiffres (.facts)   27. Appel à l'action (.cta)
   12. Cartes (.card)               28. Prose (.prose)
   13. Fonctionnalités, captures (.feature, .shot, .phone, .collage)  29. Pied de page (.site-footer)
   14. Liste à coches (.checklist)  30. Apparition au défilement
   15. (libre)                      31. Préférences (mouvement, contraste, impression)
   16. Grille « Et aussi » (.also)  32. Page « La plateforme »
                                    33. Page « Solutions par métier »
   Sections 32 à 37 : règles        34. Page « Recharge électrique »
   propres à une page, toutes       35. Page « Capteurs & réseaux »
   dans cette feuille unique.       36. Page « Demander une démo »
                                    37. Page « Mentions légales »
                                    38. Mode sombre (.mode-sombre, bouton .theme-switch)
   ============================================================================= */


/* =============================================================================
   01. JETONS
   ============================================================================= */
:root {
  /* --- Couleurs de marque Grolleau --- */
  --navy: #021f47;          /* couleur principale : titres, fonds sombres */
  --navy-700: #0b2d5c;      /* liens, dégradés, survols */
  --navy-900: #001833;      /* barre du haut, pied de page */
  --brand-navy: #021f47;    /* fonds marine : identiques en mode sombre, où --navy devient une couleur de texte */
  --brand-navy-700: #0b2d5c;
  --orange: #e8a01b;        /* action : boutons principaux, accents */
  --orange-hover: #f2b23c;
  --orange-ink: #9a5b00;    /* orange lisible sur fond clair (AA) */
  --orange-soft: #fdf2dc;
  --green: #7fc434;         /* ce qui va bien : coches, état « OK » */
  --green-ink: #2f6a06;     /* vert lisible sur fond clair (AA) */
  --green-soft: #eaf6dd;
  --sky: #a6cbe3;           /* fonds doux, détails sur fond sombre */
  --sky-soft: #eef5fb;

  /* --- Couleur fonctionnelle : réservée au niveau « Alerte » --- */
  --red: #d64535;
  --red-ink: #b42318;
  --red-soft: #fcebe8;

  /* --- Neutres --- */
  --ink: #0f1e33;           /* texte courant */
  --muted: #4a5d75;         /* texte secondaire (6,7:1 sur blanc) */
  --line: #dbe5ef;          /* filets, bordures */
  --line-strong: #b9cadb;
  --bg: #ffffff;
  --surface: #ffffff;       /* fond des cartes, tuiles, menus (sombre en mode sombre) */
  --bg-soft: #f5f8fb;

  /* --- Sur fond sombre --- */
  --on-dark: #ffffff;
  --on-dark-muted: #b9cde0;
  --on-dark-line: rgba(166, 203, 227, 0.22);
  --on-dark-panel: rgba(255, 255, 255, 0.05);

  /* --- Typographie (police système) --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.8125rem;   /* 13 px : surtitres, mentions */
  --fs-sm: 0.9375rem;   /* 15 px : textes de carte, légendes */
  --fs-base: 1.0625rem; /* 17 px : texte courant */
  --fs-md: 1.125rem;    /* 18 px : chapeaux de section */
  --fs-lg: 1.25rem;     /* 20 px : titres h3 */
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);            /* h3 mis en avant */
  --fs-h2: clamp(1.875rem, 1.25rem + 2.2vw, 2.875rem);
  --fs-h1: clamp(2.25rem, 1.35rem + 2.6vw, 3.5rem);      /* h1 de l'accueil */
  --fs-h1-page: clamp(2rem, 1.3rem + 2.2vw, 3rem);       /* h1 des pages intérieures */
  --lh: 1.6;
  --lh-tight: 1.15;

  /* --- Espacements (échelle de 4 px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --section-y: clamp(64px, 8vw, 116px);       /* marge haute et basse d'une bande */
  --section-y-tight: clamp(48px, 6vw, 80px);
  --stack: clamp(36px, 5vw, 60px);            /* espace sous un en-tête de section */

  /* --- Mise en page --- */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);           /* marge latérale : 16 px sur mobile */
  --topbar-h: 36px;
  --mainbar-h: 76px;

  /* --- Formes, ombres, mouvement --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(2, 31, 71, 0.05), 0 8px 24px -16px rgba(2, 31, 71, 0.18);
  --shadow-lift: 0 2px 4px rgba(2, 31, 71, 0.05), 0 24px 48px -24px rgba(2, 31, 71, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.2s;
}


/* =============================================================================
   02. BASE ET TYPOGRAPHIE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mainbar-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--bg);
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1-page); letter-spacing: -0.026em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.022em; }
h3 { font-size: var(--fs-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-base); }

p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
sub, sup { font-size: 0.7em; line-height: 0; }
strong, b { font-weight: 700; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

a {
  color: var(--navy-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--navy-700);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }
::selection { background: var(--sky); color: var(--brand-navy); }

/* Contexte sombre : à poser sur toute bande, héros ou panneau marine */
.theme-dark {
  background-color: var(--brand-navy);
  color: var(--on-dark);
}
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4 { color: var(--on-dark); }
.theme-dark a:not(.btn) { color: var(--on-dark); }
.theme-dark :focus-visible { outline-color: var(--orange); }


/* =============================================================================
   03. UTILITAIRES
   ============================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Sprite d'icônes inline (en haut de chaque page) : invisible */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icône du sprite : <svg class="icon" aria-hidden="true" focusable="false"><use href="#i-…"/></svg> */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: var(--brand-navy);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Chapeau : texte d'introduction sous un h1 */
.lead {
  max-width: 38em;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
}
.theme-dark .lead { color: var(--on-dark-muted); }
h1 + .lead, h2 + .lead { margin-top: 20px; }

/* Surtitre en capitales avec filet orange */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--orange-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
.theme-dark .eyebrow { color: var(--orange); }

/* Rythme vertical d'un bloc de texte libre */
.flow > * + * { margin-top: var(--flow-space, 1em); }

.u-center { text-align: center; }
.u-muted { color: var(--muted); }
.theme-dark .u-muted { color: var(--on-dark-muted); }


/* =============================================================================
   04. MISE EN PAGE : bandes de section, en-têtes de section, grilles
   ============================================================================= */
/* Bande de section : <section class="section [section--soft|section--sky|theme-dark]"> */
.section {
  --band-bg: var(--bg);
  padding-block: var(--section-y);
  background-color: var(--band-bg);
}
.section--soft { --band-bg: var(--bg-soft); }
.section--sky { --band-bg: var(--sky-soft); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section.theme-dark {
  --band-bg: var(--brand-navy);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(11, 45, 92, 0.9), rgba(2, 31, 71, 0) 70%),
    var(--brand-navy);
}
.section.theme-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(166, 203, 227, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 203, 227, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
}

/* En-tête de section : surtitre + h2 + chapeau */
.section-head { max-width: 760px; margin-bottom: var(--stack); }
.section-head > h2 { margin-bottom: 18px; }
.section-head > h2:last-child { margin-bottom: 0; }
.section-head > p:not(.eyebrow) { font-size: var(--fs-md); color: var(--muted); }
.section-head > p:not(.eyebrow) + p { margin-top: 12px; }
.theme-dark .section-head > p:not(.eyebrow) { color: var(--on-dark-muted); }

.section-head--center { margin-inline: auto; text-align: center; }

.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: end;
}
.section-head--split h2 { margin-bottom: 0; }

.section-foot { margin-top: 40px; }
.section-foot--center { text-align: center; }

/* Grille générique : <ul class="grid grid--3"> (2, 3 ou 4 colonnes, repliables) */
.grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--grid-gap, 20px);
}
.grid--2 { --cols: 2; }
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }
/* un élément de liste qui n'enveloppe qu'un bloc (lien-tuile, carte) : le bloc prend toute la hauteur */
.grid > li > :only-child { height: 100%; }

/* Deux colonnes texte et visuel : <div class="split [split--start] [split--wide-media]"> */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.split--start { align-items: start; }
.split--wide-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* .split--stack : le visuel passe sous le texte, sur toute la largeur (ex. une rangée de téléphones qui doit rester lisible) */
.split--stack { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); }
.split--stack > :first-child { max-width: 760px; }
.split + .split { margin-top: clamp(56px, 7vw, 96px); }
.split__title { margin-bottom: 16px; font-size: var(--fs-lg); }

@media (max-width: 1180px) {
  .grid--4 { --cols: 2; }
}
@media (max-width: 1024px) {
  .grid--3 { --cols: 2; }
  .split, .split--wide-media { grid-template-columns: minmax(0, 1fr); }
  .section-head--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4 { --cols: 1; --grid-gap: 12px; }
}


/* =============================================================================
   05. BOUTONS ET LIENS
   <a class="btn btn--primary">…</a>  variantes : --primary (orange, action principale),
   --navy (plein marine), --outline (contour, fond clair), --light (contour, fond sombre).
   Tailles : --sm, --lg ; --block pour toute la largeur.
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.7rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn .icon { width: 1.15em; height: 1.15em; transition: transform var(--dur) var(--ease); }
.btn:hover .icon:last-child { transform: translateX(3px); }

.btn--sm { min-height: 40px; padding: 0.5rem 0.95rem; font-size: 0.9375rem; }
.btn--lg { min-height: 54px; padding: 0.9rem 1.6rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--orange);
  color: var(--brand-navy);
  box-shadow: 0 10px 24px -12px rgba(232, 160, 27, 0.8);
}
.btn--primary:hover { background: var(--orange-hover); transform: translateY(-1px); }

.btn--navy { background: var(--brand-navy); color: #ffffff; }
.btn--navy:hover { background: var(--brand-navy-700); }

.btn--outline {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--navy);
}
.btn--outline:hover { border-color: var(--navy-700); }

.btn--light {
  border-color: rgba(166, 203, 227, 0.55);
  background: rgba(255, 255, 255, 0.02);
  color: #ffffff;
}
.btn--light:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); }

/* Groupe de boutons */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Lien fléché : <a class="link-arrow" href="…">Texte<svg class="icon">…#i-arrow</svg></a> */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--navy-700);
  font-weight: 700;
  text-decoration: none;
}
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(4px); }
.theme-dark .link-arrow { color: #ffffff; }

@media (max-width: 480px) {
  .btn-row .btn { width: 100%; }
}


/* =============================================================================
   06. EN-TÊTE ET NAVIGATION (bloc identique sur toutes les pages)
   La barre du haut défile, la barre principale reste collée en haut,
   sur fond blanc opaque (le logo Telemesure exige un fond clair).
   ============================================================================= */
.site-header {
  position: sticky;
  top: calc(-1 * var(--topbar-h));
  z-index: 50;
}

.topbar {
  height: var(--topbar-h);
  background: var(--navy-900);
  color: var(--on-dark-muted);
  font-size: var(--fs-xs);
}
.topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar__sign { font-weight: 600; letter-spacing: 0.02em; }
.topbar__nav { display: flex; gap: 22px; margin-left: auto; }
.topbar__nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e3edf6;
  font-weight: 600;
  text-decoration: none;
}
.topbar__nav a:hover { color: #ffffff; text-decoration: underline; }
.topbar__nav .icon { width: 15px; height: 15px; color: var(--sky); }
.topbar :focus-visible { outline-color: var(--orange); }

/* Choix de langue « FR | EN » (barre du haut, toutes largeurs) : chaque lien mène à la même page dans l'autre
   langue (lang + hreflang) ; la langue de la page porte aria-current="true". Repris dans le menu compact (.nav-lang). */
.lang-switch { display: flex; align-items: center; gap: 6px; flex: none; }
.lang-switch .icon { width: 15px; height: 15px; color: var(--sky); }
.lang-switch__list { display: flex; align-items: center; }
.lang-switch__list li + li { border-left: 1px solid rgba(166, 203, 227, 0.45); }
.lang-switch__list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  color: #e3edf6;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.lang-switch__list li:last-child a { padding-right: 2px; }
.lang-switch__list a:hover { color: #ffffff; text-decoration: underline; }
.lang-switch__list a[aria-current] { color: var(--orange); }
.lang-switch__list a[aria-current]:hover { color: var(--orange-hover); }

/* Menu compact : la même paire de liens, en toutes lettres, sous les boutons (masquée au-delà de 1 240 px) */
.nav-lang { display: none; }

.mainbar {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease);
}
.is-scrolled .mainbar { box-shadow: 0 10px 30px -18px rgba(2, 31, 71, 0.45); }

.mainbar__inner {
  min-height: var(--mainbar-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: inline-flex; align-items: center; flex: none; border-radius: 8px; }
.brand__logo { width: auto; height: 36px; }

/* Bouton « Demander une démo » de l'en-tête compact (600 à 1240 px) */
.header-cta { display: none; }

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list a {
  position: relative;
  display: block;
  padding: 10px;
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav-list a:hover { color: var(--navy-700); }
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--navy); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.mainbar .btn { white-space: nowrap; }
.nav-actions__client { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--navy);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 1240px) {
  .mainbar__inner { gap: 10px; }
  .brand { margin-right: auto; }
  .js .nav-toggle { display: inline-flex; }
  .js .header-cta { display: inline-flex; }

  .site-nav { flex-direction: column; align-items: stretch; gap: 16px; }
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--mainbar-h));
    overflow-y: auto;
    padding: 12px var(--gutter) 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(2, 31, 71, 0.45);
  }
  .js .site-nav.is-open { display: flex; }
  /* sans JavaScript : menu déplié dans le flux, en-tête non collant */
  .no-js .site-header { position: static; }
  .no-js .mainbar__inner { flex-wrap: wrap; padding-block: 12px; }
  .no-js .site-nav { flex-basis: 100%; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li + li { border-top: 1px solid var(--line); }
  .nav-list a { padding: 14px 4px; border-radius: 0; font-size: var(--fs-base); }
  .nav-list a::after { left: 4px; right: auto; bottom: 6px; width: 32px; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .btn { width: 100%; }
  .nav-actions__client { display: inline-flex; }

  .nav-lang { display: flex; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
  .nav-lang li { flex: 1 1 0; }
  .nav-lang a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
  }
  .nav-lang a:hover { border-color: var(--navy-700); color: var(--navy-700); }
  .nav-lang a[aria-current] { border-color: var(--navy); background: var(--brand-navy); color: #ffffff; }
}
/* De 600 à 1240 px, le bouton démo reste visible à côté du menu : inutile de le répéter dedans */
@media (min-width: 600px) and (max-width: 1240px) {
  .js .nav-actions__demo { display: none; }
}
@media (max-width: 599px) {
  .js .header-cta { display: none; }
}
/* Navigateurs récents (requête média « scripting », 2023 et plus) : l'en-tête compact s'affiche replié dès le
   premier rendu, sans attendre que site.js remplace .no-js par .js. Sinon, sur mobile, le menu s'affichait
   déplié puis se repliait au chargement du script, et toute la page remontait d'un coup (décalage de mise en
   page, CLS 0,48 dans Lighthouse). Mêmes règles que les blocs .js / .no-js ci-dessus, qui restent pour les
   navigateurs plus anciens. */
@media (max-width: 1240px) and (scripting: enabled) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--mainbar-h));
    overflow-y: auto;
    padding: 12px var(--gutter) 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(2, 31, 71, 0.45);
  }
  .site-nav.is-open { display: flex; }
  .no-js .site-header { position: sticky; }
  .no-js .mainbar__inner { flex-wrap: nowrap; padding-block: 0; }
  .no-js .site-nav { flex-basis: auto; }
}
@media (min-width: 600px) and (max-width: 1240px) and (scripting: enabled) {
  .nav-actions__demo { display: none; }
}
@media (max-width: 599px) and (scripting: enabled) {
  .header-cta { display: none; }
}
@media (max-width: 760px) {
  :root { --mainbar-h: 66px; }
  .brand__logo { height: 30px; }
  .topbar__sign { display: none; }
  .topbar__nav { margin-inline: auto; }
}
/* Très petits écrans (320 px) : la barre du haut garde ses liens et le choix de langue sur une ligne, sans icônes */
@media (max-width: 359px) {
  .topbar__nav { gap: 14px; }
  .topbar__nav .icon,
  .lang-switch .icon { display: none; }
}


/* =============================================================================
   07. HÉROS D'ACCUEIL (.hero, toujours en .theme-dark)
   ============================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(48px, 6vw, 88px);
  background:
    radial-gradient(900px 520px at 78% 38%, rgba(11, 45, 92, 0.95), rgba(2, 31, 71, 0) 70%),
    radial-gradient(600px 400px at 0% 100%, rgba(11, 45, 92, 0.7), rgba(2, 31, 71, 0) 70%),
    var(--brand-navy);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  background-image:
    linear-gradient(rgba(166, 203, 227, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 203, 227, 0.075) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 65% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 65% 40%, #000 25%, transparent 78%);
}
.hero::after {
  background: url("../img/illus/network.svg") no-repeat right -120px top -60px / 980px auto;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 4.5vw, 64px);
  align-items: center;
}
.hero .eyebrow { color: var(--sky); }
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.hero__accent { display: block; color: var(--orange); }
.hero .lead { margin-top: 24px; max-width: 36em; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__client {
  margin-top: 22px;
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
}
.hero__client a { font-weight: 700; }

/* Visuel du héros : composition de vraies captures (.collage, section 13) sur un halo bleu ciel */
.hero__visual { position: relative; margin: 0 0 72px; }
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 8% 6% -4% 14%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(166, 203, 227, 0.28), rgba(166, 203, 227, 0));
  filter: blur(10px);
}

.hero .facts { margin-top: clamp(40px, 5vw, 64px); }

@media (min-width: 1360px) {
  .hero__visual { margin-right: -56px; }
}
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { max-width: 720px; }
  .hero__visual { width: 100%; max-width: 640px; margin: 8px auto 88px; }
}
@media (max-width: 480px) {
  .hero__actions .btn { width: 100%; }
  .hero__visual { margin-bottom: 72px; }
}


/* =============================================================================
   08. HÉROS DE PAGE INTÉRIEURE (.page-hero) ET FIL D'ARIANE (.breadcrumb)
   <section class="page-hero theme-dark"> … </section>
   Variante avec visuel : <section class="page-hero page-hero--media theme-dark">
   et un .page-hero__media après .page-hero__copy.
   ============================================================================= */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 96px);
  background:
    radial-gradient(800px 420px at 85% 20%, rgba(11, 45, 92, 0.95), rgba(2, 31, 71, 0) 70%),
    var(--brand-navy);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(166, 203, 227, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 203, 227, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 80% 30%, #000 20%, transparent 75%);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.page-hero--media .page-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.page-hero .eyebrow { color: var(--sky); }
.page-hero h1 { max-width: 20em; }
.page-hero .lead { margin-top: 20px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-hero__media picture { display: block; } /* visuel à deux formats : <picture> + <source media> */
.page-hero__media img { width: 100%; }
/* Héros avec une composition de vraies captures (.collage, section 13) : le visuel prend un peu plus de place */
.page-hero--collage .page-hero__inner { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.page-hero__media.collage { margin-bottom: clamp(28px, 4vw, 44px); }

.breadcrumb { margin-bottom: 28px; font-size: var(--fs-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--muted); }
.breadcrumb li + li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 12px 0 10px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.breadcrumb a { color: var(--navy-700); font-weight: 600; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }
.theme-dark .breadcrumb li { color: var(--on-dark-muted); }
.theme-dark .breadcrumb a { color: #ffffff; }
.theme-dark .breadcrumb [aria-current="page"] { color: var(--on-dark-muted); }

@media (max-width: 1024px) {
  .page-hero--media .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero__media { max-width: 560px; }
  .page-hero__media.collage { width: 100%; max-width: 620px; }
}
@media (max-width: 480px) {
  .page-hero__actions .btn { width: 100%; }
}


/* =============================================================================
   09. BADGES, ÉTIQUETTES, PASTILLES D'ÉTAT, LÉGENDE
   .badge       : courte étiquette en capitales ; .badge--ok (pastille verte) pour un nom de standard
                  ou de fonction (« OCPI 2.2.1 »). Aucune étiquette de disponibilité future ni de condition commerciale.
   .tag         : petite précision dans un texte (« sur étude »)
   .state       : état coloré : --ok (vert), --warn (orange), --alert (rouge), --info (marine)
   ============================================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--sky-soft);
  color: var(--navy-700);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.badge--ok { border-color: #c3e3a1; background: var(--green-soft); color: var(--green-ink); }
.badge--ok::before { background: var(--green); }
.theme-dark .badge { border-color: rgba(166, 203, 227, 0.4); background: rgba(166, 203, 227, 0.12); color: #dce8f3; }
.theme-dark .badge--ok { border-color: rgba(127, 196, 52, 0.5); background: rgba(127, 196, 52, 0.14); color: #c9eba3; }

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--sky-soft);
  color: var(--navy-700);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 2px;
  white-space: nowrap;
}
.theme-dark .tag { background: rgba(166, 203, 227, 0.16); color: #dce8f3; }

.state {
  --s: var(--green);
  --s-soft: var(--green-soft);
  --s-ink: var(--green-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.28em 0.8em 0.28em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--s-soft);
  color: var(--s-ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}
.state::before {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--s);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s) 25%, transparent);
}
.state--ok { --s: var(--green); --s-soft: var(--green-soft); --s-ink: var(--green-ink); }
.state--warn { --s: var(--orange); --s-soft: var(--orange-soft); --s-ink: var(--orange-ink); }
.state--alert { --s: var(--red); --s-soft: var(--red-soft); --s-ink: var(--red-ink); }
.state--info { --s: var(--navy-700); --s-soft: var(--sky-soft); --s-ink: var(--navy-700); }

/* Légende des couleurs d'état */
.legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  max-width: 100%;
  padding: 10px 12px 10px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.legend__title { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.legend__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

@media (max-width: 480px) {
  .legend { border-radius: var(--radius); padding: 12px 14px; }
}


/* =============================================================================
   10. PASTILLES D'ICÔNE
   <span class="icon-badge [icon-badge--soft|--sky|--sm]"><svg class="icon">…</svg></span>
   ============================================================================= */
.icon-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-navy);
  color: var(--orange);
}
.icon-badge .icon { width: 26px; height: 26px; }
.icon-badge--soft { background: var(--surface); color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--line); }
.icon-badge--sky { background: var(--sky-soft); color: var(--navy-700); }
.icon-badge--sm { width: 44px; height: 44px; border-radius: 12px; }
.icon-badge--sm .icon { width: 22px; height: 22px; }
.theme-dark .icon-badge { background: rgba(166, 203, 227, 0.12); color: var(--orange); box-shadow: inset 0 0 0 1px rgba(166, 203, 227, 0.22); }


/* =============================================================================
   11. BANDE DE CHIFFRES CLÉS (.facts)
   Phrases courtes et sans jargon. S'adapte au fond clair ou au contexte .theme-dark.
   <ul class="facts"><li class="facts__item"><span class="icon-badge icon-badge--sm">…</span>
     <p><strong>Plus de 20 fabricants</strong><span>de capteurs pris en charge</span></p></li></ul>
   ============================================================================= */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.facts__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 26px 22px 30px;
  border-left: 1px solid var(--line);
}
.facts__item:first-child { padding-left: 0; border-left: 0; }
.facts__item strong {
  display: block;
  color: var(--navy);
  font-size: var(--fs-md);
  line-height: 1.3;
}
.facts__item p > span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.theme-dark .facts { border-top-color: var(--on-dark-line); }
.theme-dark .facts__item { border-color: var(--on-dark-line); }
.theme-dark .facts__item strong { color: #ffffff; }
.theme-dark .facts__item p > span { color: var(--on-dark-muted); }

@media (max-width: 1100px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .facts__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .theme-dark .facts__item:nth-child(n + 3) { border-top-color: var(--on-dark-line); }
}
@media (max-width: 600px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts__item { padding: 16px 0; border-left: 0; }
  .facts__item:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .theme-dark .facts__item:nth-child(n + 2) { border-top-color: var(--on-dark-line); }
}


/* =============================================================================
   12. CARTES (.card)
   <li class="card"><span class="icon-badge">…</span><h3>…</h3><p>…</p></li>
   ============================================================================= */
.card {
  position: relative;
  padding: 32px 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  width: 44px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--orange);
}
.card > .icon-badge { margin-bottom: 22px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 1rem; }
.card p + p { margin-top: 10px; }
.card .link-arrow { margin-top: 16px; }
.card .state { margin-bottom: 8px; }
.theme-dark .card { border-color: var(--on-dark-line); background: var(--on-dark-panel); box-shadow: none; }
.theme-dark .card p { color: var(--on-dark-muted); }

@media (max-width: 600px) {
  .card { padding: 22px 20px; }
  .card::before { left: 20px; }
  /* carte avec pastille d'icône : l'icône passe à gauche du texte */
  .card:has(> .icon-badge) {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
  }
  .card > .icon-badge { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .card > .icon-badge .icon { width: 22px; height: 22px; }
  .card > :not(.icon-badge) { grid-column: 2; }
  .card h3 { margin-bottom: 6px; font-size: 1.125rem; }
  .card p { font-size: var(--fs-sm); }
}


/* =============================================================================
   13. LIGNES DE FONCTIONNALITÉ (.feature) ET CAPTURES DU PORTAIL (.shot)
       + découpes (.shot__frame--bare), téléphone (.phone), compositions (.collage, .shots, .phones, .phone-figure, .overlay).
       Toute image qui montre le portail ou l'application est une VRAIE capture (assets/img/portal, assets/img/app) ;
       les dessins (assets/img/illus) restent des schémas, sans fenêtre ni écran imité.
   <article class="feature [feature--reverse]">
     <div class="feature__copy">…</div>
     <div class="feature__media"><figure class="shot" data-topic="…">…</figure></div>
   </article>
   ============================================================================= */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.feature + .feature { margin-top: clamp(72px, 8vw, 120px); }
.feature--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--reverse .feature__media { order: -1; }

.feature__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--sky-soft);
  color: var(--navy-700);
  font-size: 0.875rem;
  font-weight: 700;
}
.feature__kicker .icon { width: 18px; height: 18px; }
.feature h3 { margin-bottom: 16px; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.feature__copy > p:not(.feature__kicker) { color: var(--muted); }
.feature__copy > p:not(.feature__kicker) + p { margin-top: 12px; }
.feature__copy > .shot { margin-top: 28px; } /* petite capture (ex. un e-mail) sous le texte */

.feature__media { position: relative; isolation: isolate; }
.feature__media::before {
  content: "";
  position: absolute;
  inset: 10% -3% -7% 12%;
  z-index: -1;
  border-radius: 28px;
  background-color: var(--sky-soft);
  background-image:
    linear-gradient(rgba(11, 45, 92, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 45, 92, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.feature--reverse .feature__media::before { inset: 10% 12% -7% -3%; }

/* Capture du portail : fenêtre sombre (captures en affichage sombre), coins arrondis, ombre.
   <figure class="shot [shot--crop | shot--tall] [shot--plain]" data-topic="…">
     <a class="shot__frame" href="assets/img/portal/x.webp">
       <img src="assets/img/portal/x-vignette.webp" alt="…" width="…" height="…" loading="lazy" decoding="async">
     </a>
     <figcaption>… (données de démonstration)</figcaption>
   </figure>
   - src : vignette de 1 400 px (tools/vignettes.mjs) ; href : capture entière, chargée seulement à l'agrandissement.
   - width / height : taille CSS de l'image (moitié des pixels du manifeste, captures en 2x).
   - .shot--crop : capture plus haute que large, montrée en 16:10 depuis le haut ; .shot--tall : en 4:3.
     L'agrandissement montre toujours la capture entière.
   - .shot--plain : sans barre de fenêtre (capture d'un e-mail, sur fond clair).
   - Clic ou Entrée : agrandissement dans une boîte de dialogue (site.js, .lightbox).
     Sans JavaScript, le lien ouvre simplement l'image. */
.shot { min-width: 0; margin: 0; }
.shot__frame {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 30px; /* barre de fenêtre */
  border: 1px solid rgba(2, 31, 71, 0.2);
  border-radius: 14px;
  background: #1c2128;
  box-shadow: var(--shadow-lift);
  cursor: zoom-in;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Barre de fenêtre : trois pastilles et la barre d'adresse du portail */
.shot__frame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='10'%3E%3Cg fill='%23a6cbe3' fill-opacity='.38'%3E%3Ccircle cx='5' cy='5' r='4.5'/%3E%3Ccircle cx='21' cy='5' r='4.5'/%3E%3Ccircle cx='37' cy='5' r='4.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 14px center,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='18'%3E%3Crect width='180' height='18' rx='9' fill='%23ffffff' fill-opacity='.08'/%3E%3Cpath d='M58 7.6V6.4a2.2 2.2 0 0 1 4.4 0v1.2' fill='none' stroke='%23b9cde0' stroke-width='1.1'/%3E%3Crect x='57' y='7.6' width='6.4' height='5' rx='1' fill='%23b9cde0'/%3E%3Ctext x='68' y='12.6' font-family='Segoe UI,system-ui,sans-serif' font-size='10' fill='%23b9cde0'%3Etelemesure.net%3C/text%3E%3C/svg%3E") no-repeat center center,
    #11161d;
}
.shot__frame img { width: 100%; }
.shot--crop .shot__frame img,
.shot--tall .shot__frame img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  /* fondu en bas : la capture continue, l'agrandissement la montre en entier */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, rgba(0, 0, 0, 0.15));
  mask-image: linear-gradient(to bottom, #000 84%, rgba(0, 0, 0, 0.15));
}
.shot--tall .shot__frame img { aspect-ratio: 4 / 3; }
.shot--plain .shot__frame {
  padding-top: 0;
  border-color: var(--line);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}
.shot--plain .shot__frame::before { content: none; }

/* Invitation à agrandir : visible au survol, au focus clavier et sur écran tactile */
.shot__frame::after {
  content: "Agrandir";
  content: "Agrandir" / "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 12px 5px 30px;
  border: 1px solid rgba(166, 203, 227, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(2, 31, 71, 0.86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") no-repeat 11px center / 14px 14px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Version anglaise (site/en/, <html lang="en">) */
:lang(en) .shot__frame::after {
  content: "Enlarge";
  content: "Enlarge" / "";
}
.shot__frame:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(2, 31, 71, 0.06), 0 30px 56px -26px rgba(2, 31, 71, 0.45); }
.shot__frame:hover::after,
.shot__frame:focus-visible::after { opacity: 1; transform: none; }
.shot__frame:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (hover: none) {
  .shot__frame::after { opacity: 1; transform: none; }
}
.shot figcaption {
  margin-top: 12px;
  padding-inline: 2px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
/* Sur une bande marine : liseré clair, ombre plus profonde */
.theme-dark .shot__frame {
  border-color: rgba(166, 203, 227, 0.28);
  box-shadow: 0 2px 6px rgba(0, 8, 24, 0.3), 0 28px 56px -28px rgba(0, 8, 24, 0.85);
}
.theme-dark .shot figcaption { color: var(--on-dark-muted); }

/* Découpe d'une page du portail (un bloc de tableau de bord, une carte, un panneau, une fenêtre) :
   même cadre, sans barre de fenêtre.
   <a class="shot__frame shot__frame--bare" href="…x.webp" [data-caption="… (données de démonstration)"]><img …></a>
   data-caption : légende de l'agrandissement quand le lien n'est pas seul dans son <figure>. */
.shot__frame--bare { padding-top: 0; border-radius: 12px; }
.shot__frame--bare::before { content: none; }

/* --- Téléphone : cadre dessiné en CSS autour d'une VRAIE capture de l'application mobile ---
   <a class="phone" href="assets/img/app/x.webp" data-caption="… (données de démonstration)">
     <span class="visually-hidden">Agrandir la capture&nbsp;: </span><img src="assets/img/app/x.webp" alt="…" width="320" height="693" loading="lazy" decoding="async">
   </a>
   (ou <span class="phone"> sans agrandissement). Captures de l'application : 320 x 693 px CSS en 4x (1 280 x 2 772),
   d'où width="320" height="693" ; l'écran est toujours rempli (object-fit: cover, calé en haut). Le cadre (bords, haut-parleur) suit la largeur du téléphone. */
.phone {
  position: relative;
  display: block;
  padding: 6.5% 3% 3.5%;
  border-radius: 13% / 6.2%;
  background: linear-gradient(155deg, #34404f, #0b1018 42%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 2px 4px rgba(0, 8, 24, 0.18),
    0 30px 54px -26px rgba(0, 8, 24, 0.8);
}
.phone::before { /* haut-parleur */
  content: "";
  position: absolute;
  top: 1.6%;
  left: 50%;
  width: 22%;
  aspect-ratio: 9 / 1;
  border-radius: 999px;
  background: #3a4656;
  transform: translateX(-50%);
}
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 693; object-fit: cover; object-position: top; border-radius: 9% / 4.2%; }
a.phone { cursor: zoom-in; transition: transform var(--dur) var(--ease); }
a.phone:hover { transform: translateY(-3px); }
a.phone:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

/* --- Composition de héros : une grande capture dans sa fenêtre, des découpes et un téléphone qui flottent ---
   <div class="hero__visual collage">  (ou <div class="page-hero__media collage">)
     <p class="collage__note"><svg class="icon" …><use href="#i-info"/></svg>Captures du portail…, données de démonstration</p>
     <figure class="shot collage__main" data-topic="x"><a class="shot__frame" href="…" data-caption="…">…</a></figure>
     <span class="collage__float collage__float--bl"><img …></span>   découpe flottante, en bas à gauche (--br : à droite)
     <a class="phone collage__phone" href="…">…</a>                     téléphone flottant, en bas à droite
   </div>
   Pas de légende sous la capture : la mention « données de démonstration » est portée par .collage__note
   et par data-caption (agrandissement). */
.collage { position: relative; }
.collage__note {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.collage__note .icon { width: 16px; height: 16px; color: var(--navy-700); }
.theme-dark .collage__note { color: var(--on-dark-muted); }
.theme-dark .collage__note .icon { color: var(--sky); }
.collage__main { margin: 0; }
.theme-dark .collage__main .shot__frame {
  border-radius: 16px;
  box-shadow: 0 40px 80px -30px rgba(0, 8, 24, 0.8), 0 0 0 1px rgba(166, 203, 227, 0.25);
}
/* l'invitation « Agrandir » passe en haut : le bas de la capture est couvert par les éléments flottants */
.collage__main .shot__frame::after { top: 42px; bottom: auto; }
.collage__float,
.collage__phone {
  position: absolute;
  z-index: 1;
  animation: float 7s ease-in-out infinite;
}
.collage__float {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(166, 203, 227, 0.35), 0 24px 44px -14px rgba(0, 8, 24, 0.7);
}
.collage__float img { display: block; width: 100%; }
.collage__float--bl { left: -8%; bottom: -13%; width: 52%; }
.collage__float--br { right: -5%; bottom: -16%; width: 50%; }
.collage__phone { right: -6%; bottom: -20%; width: 34%; animation-duration: 8.5s; animation-delay: -3s; }
/* le padding en % du .phone se calcule sur la largeur du parent (la composition), pas du téléphone :
   on le ramène à la largeur du téléphone (34 % : 6,5 % x 0,34 = 2,2 %...), sinon le bord noir mange l'écran */
.collage__phone { padding: 2.2% 1.02% 1.2%; }
.collage__phone:hover { transform: none; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 1024px) {
  .collage__float--bl { left: -3%; }
  .collage__float--br { right: -2%; }
  .collage__phone { right: -2%; }
}
/* petits écrans : la découpe et le téléphone flottants grandissent (environ 260 et 110 px de large à 390 px)
   pour rester lisibles, sans se recouvrir */
@media (max-width: 480px) {
  .collage__note { justify-content: flex-start; }
  .collage__float--bl { left: -2%; bottom: -15%; width: 71%; }
  .collage__float--br { right: -2%; bottom: -22%; width: 72%; }
  .collage__phone { right: -2%; bottom: -22%; width: 40%; padding: 2.6% 1.2% 1.4%; }
}

/* --- Plusieurs captures dans un même <figure> (une légende commune) ---
   <figure class="shots"> <a class="shot__frame shot__frame--bare" …>…</a> … <figcaption>…</figcaption> </figure>
   .shots__narrow : capture plus petite, calée à droite (décalage en escalier). */
.shots { display: grid; gap: 16px; margin: 0; min-width: 0; }
.shots > .shots__narrow { width: 78%; justify-self: end; }
.shots figcaption { padding-inline: 2px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.theme-dark .shots figcaption { color: var(--on-dark-muted); }
/* .shots--pair : deux découpes côte à côte (ex. deux cartes de pilotage), l'une sous l'autre sur mobile */
.shots--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.shots--pair figcaption { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .shots > .shots__narrow { width: 100%; }
}
@media (max-width: 560px) {
  .shots--pair { grid-template-columns: minmax(0, 1fr); }
}

/* --- Rangée de téléphones (2 ou 3 captures de l'application) ---
   <figure class="phones"> <a class="phone" …>…</a> ×3 <figcaption>…</figcaption> </figure>
   Le téléphone du milieu est légèrement surélevé. */
.phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 5%;
  align-items: start;
  max-width: 820px;
  margin: 0 auto;
  padding-top: 24px;
}
.phones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; gap: 0 8%; }
.phones > .phone:nth-of-type(2) { margin-top: -24px; }
.phones figcaption { grid-column: 1 / -1; margin-top: 18px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; text-align: center; }
.theme-dark .phones figcaption { color: var(--on-dark-muted); }
@media (max-width: 480px) {
  .phones { gap: 0 4%; padding-top: 16px; }
  .phones > .phone:nth-of-type(2) { margin-top: -16px; }
}

/* --- Un téléphone et sa légende côte à côte (ex. l'écran de l'application qui illustre une étape d'un schéma) ---
   <figure class="phone-figure"> <a class="phone" href="…">…<img … width="320" height="693"></a> <figcaption>… (données de démonstration)</figcaption> </figure>
   Le téléphone garde une largeur lisible (200 px, 150 px sur mobile) ; la légende occupe le reste. */
.phone-figure {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin: 0;
}
.phone-figure figcaption { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.phone-figure figcaption strong { display: block; margin-bottom: 4px; color: var(--navy); }
.theme-dark .phone-figure figcaption { color: var(--on-dark-muted); }
.theme-dark .phone-figure figcaption strong { color: #ffffff; }
@media (max-width: 480px) {
  .phone-figure { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
  .phone-figure figcaption { font-size: 0.875rem; }
}

/* --- Dessin + vraie capture posée dessus (ex. la vraie carte de valeur dans le cadre « Telemesure » de objets-connectes-flux.svg) ---
   <div class="overlay"><img src="…illus….svg" …><a class="shot__frame shot__frame--bare overlay__item overlay__item--…" …>…</a></div>
   La position de la capture (en % du dessin) est donnée par la variante --… (pages, sections 32 à 37).
   La capture doit rester lisible (330 px de large ou plus sur ordinateur) : sinon, la montrer à côté du dessin. */
.overlay { position: relative; }
.overlay > img { display: block; width: 100%; }
.overlay__item { position: absolute; z-index: 1; }
.overlay__item.shot__frame { box-shadow: 0 0 0 1px rgba(2, 31, 71, 0.12), 0 20px 36px -16px rgba(2, 31, 71, 0.5); }
.theme-dark .overlay__item.shot__frame { box-shadow: 0 0 0 1px rgba(166, 203, 227, 0.3), 0 20px 36px -16px rgba(0, 8, 24, 0.8); }

/* Agrandissement d'une capture : boîte de dialogue plein écran créée par site.js */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 72px var(--gutter) 40px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  background: rgba(1, 13, 31, 0.97);
  color: #ffffff;
}
.lightbox::backdrop { background: rgba(1, 13, 31, 0.6); }
.lightbox__figure { width: fit-content; max-width: 100%; margin: 0 auto; }
/* hauteur maximale posée par site.js (fitShot) quand la capture entière tient à l'écran avec sa légende */
.lightbox__img {
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 80px -30px #000000;
}
/* épinglée en bas de l'écran : la mention « données de démonstration » reste visible sur une capture haute qui défile */
.lightbox__caption {
  position: sticky;
  bottom: 0;
  max-width: 70ch;
  margin: 16px auto 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(1, 13, 31, 0.92);
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.lightbox__close {
  position: fixed;
  top: 14px;
  right: max(14px, var(--gutter));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(166, 203, 227, 0.4);
  border-radius: var(--radius-pill);
  background: var(--brand-navy);
  color: #ffffff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.lightbox__close:hover { border-color: #ffffff; }
.lightbox__close:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.lightbox__close .icon { width: 18px; height: 18px; }
html.has-lightbox { overflow: hidden; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in 0.2s var(--ease); }
  .lightbox[open] .lightbox__img { animation: lightbox-zoom 0.28s var(--ease); }
}
@keyframes lightbox-in { from { opacity: 0; } }
@keyframes lightbox-zoom { from { opacity: 0.4; transform: scale(0.97); } }

@media (max-width: 1024px) {
  .feature, .feature--reverse { grid-template-columns: minmax(0, 1fr); }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { max-width: 760px; }
}


/* =============================================================================
   14. LISTE À COCHES (.checklist) : coche dessinée en CSS, aucun SVG à copier
   <ul class="checklist"><li>Texte</li></ul>   (sur fond sombre, le contexte suffit)
   ============================================================================= */
.checklist { display: grid; gap: 12px; margin-top: 24px; }
.checklist li {
  position: relative;
  padding-left: 36px;
  font-size: 1rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e1f2cf;
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 6px;
  height: 11px;
  border-right: 2.5px solid var(--green-ink);
  border-bottom: 2.5px solid var(--green-ink);
  transform: rotate(45deg);
}
.theme-dark .checklist li { color: #e3edf6; }
.theme-dark .checklist li::before { background: rgba(127, 196, 52, 0.2); }
.theme-dark .checklist li::after { border-color: var(--green); }


/* =============================================================================
   15. (LIBRE) : l'ancienne « règle d'alerte écrite comme une phrase » (.rule), un dessin qui imitait l'éditeur de
       règles du portail, a été retirée le 14/10/2026 : les règles sont montrées par de vraies captures
       (regle-temperature-conditions, regle-niveau-fioul-conditions, regle-edition-porte-ouverte).
   ============================================================================= */


/* =============================================================================
   16. GRILLE « ET AUSSI » (.also) : une icône, un nom, une explication d'une ligne
   ============================================================================= */
.also {
  margin-top: clamp(72px, 8vw, 112px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.also__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 22px;
}
.also__title { font-size: var(--fs-lg); }
.also__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.also__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.also__item strong { display: block; color: var(--navy); font-size: 1rem; line-height: 1.35; }
.also__item p > span { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

@media (max-width: 1024px) {
  .also__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .also__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}


/* =============================================================================
   17. ÉTAPES COMPACTES (.steps) : parcours numéroté court, sur fond clair ou sombre
   <ol class="steps"><li class="steps__item"><span class="steps__num" aria-hidden="true">1</span>
     <h3>…</h3><p>…</p></li></ol>
   ============================================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
  gap: 28px;
}
.steps--4 { --steps: 4; }
.steps--3 { --steps: 3; }
.steps__item { position: relative; }
.steps__item::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 62px;
  right: -20px;
  height: 2px;
  background: linear-gradient(90deg, rgba(232, 160, 27, 0.75), rgba(166, 203, 227, 0.35));
}
.steps__item:last-child::after { display: none; }
.steps__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  font-size: var(--fs-md);
  font-weight: 700;
}
.steps__item h3 { margin-bottom: 10px; font-size: 1.1875rem; }
.steps__item p { color: var(--muted); font-size: 0.975rem; }
.theme-dark .steps__num { background: var(--brand-navy); color: #ffffff; }
.theme-dark .steps__item p { color: var(--on-dark-muted); }

@media (max-width: 1100px) {
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; max-width: 760px; }
  .steps__item { min-height: 48px; padding: 0 0 32px 72px; }
  .steps__item:last-child { padding-bottom: 0; }
  .steps__num { position: absolute; left: 0; top: 0; margin: 0; }
  .steps__item h3 { padding-top: 10px; }
  .steps__item::after {
    top: 56px;
    bottom: 8px;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(232, 160, 27, 0.75), rgba(166, 203, 227, 0.35));
  }
}


/* =============================================================================
   18. RÉCIT PAS À PAS (.story) : une alerte suivie minute par minute
   Chaque étape porte un état : --ok (vert), --warn (orange), --alert (rouge).
   Le fil se colore au défilement (site.js), il est complet sans JavaScript.
   ============================================================================= */
.story-intro { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.story__scenario {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.story__scenario-label {
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--brand-navy);
  color: #ffffff;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.story__sep { color: var(--muted); }

/* la coche de fin (.story__end) suit la liste sans en faire partie : elle reçoit les mêmes mesures
   pour rester centrée sur le fil */
.story, .story__end {
  --rail-x: 50%;
  --marker: 60px;
}
.story { position: relative; }
.story::before {
  content: "";
  position: absolute;
  top: calc(var(--marker) / 2);
  bottom: 0;
  left: var(--rail-x);
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--line);
}
.story__step {
  --c: var(--green);
  --c-soft: var(--green-soft);
  --c-on: var(--navy);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 104px);
}
.story__step--ok { --c: var(--green); --c-soft: var(--green-soft); --c-on: var(--navy); }
.story__step--warn { --c: var(--orange); --c-soft: var(--orange-soft); --c-on: var(--navy); }
.story__step--alert { --c: var(--red); --c-soft: var(--red-soft); --c-on: #ffffff; }
/* segment coloré : relie cette étape à la suivante, dans la couleur de son état */
.story__step::before {
  content: "";
  position: absolute;
  top: calc(var(--marker) / 2);
  bottom: calc(var(--marker) / -2);
  left: var(--rail-x);
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--c);
  transform-origin: top center;
  transition: transform 1.1s var(--ease);
}
.story__step:last-child::before { bottom: 0; }

.story__marker {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--marker);
  height: var(--marker);
  border: 4px solid var(--c);
  border-radius: 50%;
  background: var(--c);
  color: var(--c-on);
  font-size: 1.375rem;
  font-weight: 800;
  box-shadow: 0 0 0 8px var(--band-bg, #ffffff);
  transition: background-color 0.5s ease, color 0.5s ease, transform 0.5s ease;
}
.story__body { grid-column: 1; grid-row: 1; padding-top: 6px; }
.story__visual { grid-column: 3; grid-row: 1; }
.story__step:nth-child(even) .story__body { grid-column: 3; }
.story__step:nth-child(even) .story__visual { grid-column: 1; }

.story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.story__time {
  padding: 0.18em 0.6em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.story__body h3 {
  margin-bottom: 14px;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}
.story__body > p + p { margin-top: 12px; }
.story__body > p:not(.story__meta):not(.story__note) { color: var(--ink); }
.story__note {
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--c);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.96875rem;
  line-height: 1.55;
}
.story__body > .story__note { margin-top: 20px; }
.story__note strong { color: var(--navy); }
.story__visual {
  margin: 0;
  padding: clamp(10px, 1.6vw, 20px);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: var(--radius-lg);
  background: var(--c-soft);
}
.story__visual img { width: 100%; }
/* Étape illustrée par de vraies captures : découpes du portail empilées, légende commune
   <figure class="story__visual story__visual--shots"><a class="shot__frame shot__frame--bare" …>…</a> … <figcaption>…</figcaption></figure> */
.story__visual--shots { display: grid; gap: 12px; align-content: start; }
.story__visual--shots .shot__frame { box-shadow: 0 1px 2px rgba(2, 31, 71, 0.08), 0 14px 28px -18px rgba(2, 31, 71, 0.45); }
.story__visual figcaption { padding-inline: 4px; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

/* fin du récit : coche verte */
.story__end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  align-items: start;
}
.story__end-marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--marker);
  height: var(--marker);
  border-radius: 50%;
  background: var(--green);
  color: var(--navy);
  box-shadow: 0 0 0 8px var(--band-bg, #ffffff), 0 0 0 12px rgba(127, 196, 52, 0.3);
}
.story__end-marker .icon { width: 28px; height: 28px; stroke-width: 2.6; }
.story__end-text {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 640px;
  margin: 24px auto 0;
  color: var(--muted);
  text-align: center;
}
.story__end-title {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .story, .story__end { --rail-x: 26px; --marker: 52px; }
  .story__step { grid-template-columns: var(--marker) minmax(0, 1fr); column-gap: 18px; padding-bottom: 56px; }
  .story__marker { grid-column: 1; grid-row: 1 / span 2; justify-self: start; font-size: 1.25rem; }
  .story__body, .story__step:nth-child(even) .story__body { grid-column: 2; grid-row: 1; }
  .story__visual, .story__step:nth-child(even) .story__visual { grid-column: 2; grid-row: 2; max-width: 720px; margin-top: 22px; }
  .story__end { grid-template-columns: var(--marker) minmax(0, 1fr); column-gap: 20px; }
  /* centre de la coche sur le fil, halo resserré pour ne pas toucher le texte */
  .story__end-marker {
    grid-column: 1;
    justify-self: start;
    margin-left: calc(var(--rail-x) - var(--marker) / 2);
    box-shadow: 0 0 0 6px var(--band-bg, #ffffff), 0 0 0 9px rgba(127, 196, 52, 0.3);
  }
  .story__end-text { grid-column: 2; grid-row: 1; margin: 0; text-align: left; }
}
@media (max-width: 560px) {
  /* l'illustration prend toute la largeur, le fil passe derrière */
  .story__visual, .story__step:nth-child(even) .story__visual { grid-column: 1 / -1; position: relative; z-index: 1; padding: 8px; }
  .story__step { padding-bottom: 44px; }
}
@media (max-width: 480px) {
  .story, .story__end { --rail-x: 20px; --marker: 40px; }
  .story__step { column-gap: 14px; }
  .story__marker { border-width: 3px; font-size: 1.0625rem; box-shadow: 0 0 0 6px var(--band-bg, #ffffff); }
  .story__end { column-gap: 18px; }
  .story__end-marker .icon { width: 22px; height: 22px; }
  .story__scenario { border-radius: var(--radius); padding: 10px 14px; }
}


/* =============================================================================
   19. TUILES CLIQUABLES (.tiles, .tile) : solutions par métier, renvois
   <ul class="tiles"><li><a class="tile" href="…"><span class="icon-badge icon-badge--soft">…</span>
     <h3>…</h3><p>…</p><span class="tile__more">Voir l'exemple<svg class="icon">…</svg></span></a></li></ul>
   ============================================================================= */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.tiles > li { display: flex; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 28px 28px 24px;
  border: 1px solid #d3e2ef;
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tile .icon-badge { margin-bottom: 18px; }
.tile h3 { margin-bottom: 8px; font-size: 1.1875rem; }
.tile p { color: var(--muted); font-size: 0.975rem; }
.tile__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--navy-700);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.tile__more .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.tile:hover { transform: translateY(-3px); border-color: var(--navy-700); box-shadow: var(--shadow-lift); }
.tile:hover .tile__more .icon { transform: translateX(4px); }
.tile:hover .icon-badge { background: var(--brand-navy); color: var(--orange); box-shadow: none; }
.tile:focus-visible { outline-offset: 4px; border-radius: var(--radius); }

@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tiles > li:last-child:nth-child(odd) { grid-column: auto; }
  .tile {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px 18px;
  }
  .tile .icon-badge { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .tile .icon-badge .icon { width: 22px; height: 22px; }
  .tile > :not(.icon-badge) { grid-column: 2; }
  .tile h3 { margin-bottom: 6px; font-size: var(--fs-base); }
  .tile p { font-size: var(--fs-sm); }
  .tile__more { padding-top: 10px; }
}


/* =============================================================================
   20. ENCADRÉ « BON À SAVOIR » / EXPLICATION D'UN TERME (.note)
   <p class="note"><svg class="icon">…#i-info</svg><span><strong>OCPP</strong>, c'est …</span></p>
   ============================================================================= */
.note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 0.975rem;
  line-height: 1.55;
}
.note .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--orange-ink); }
.note strong { color: var(--navy); }
.theme-dark .note { border-color: var(--on-dark-line); border-left-color: var(--orange); background: var(--on-dark-panel); color: var(--on-dark-muted); }
.theme-dark .note .icon { color: var(--orange); }
.theme-dark .note strong { color: #ffffff; }


/* =============================================================================
   21. CARTE MISE EN AVANT (.spot-card) : une fonction présentée en texte seul, sous un visuel
   <div class="spot-card"><div class="spot-card__body"><span class="badge badge--ok">…</span><h3>…</h3><p>…</p></div></div>
   Texte seul : une petite illustration y devient illisible ; pour un schéma, le placer à part,
   en grand (ex. recharge-itinerance.svg sur recharge.html).
   ============================================================================= */
.spot-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sky-soft);
}
.spot-card__body { flex: 1 1 280px; min-width: 0; }
.spot-card h3 { margin: 14px 0 8px; font-size: var(--fs-md); }
.spot-card p { color: var(--muted); font-size: 0.975rem; }
.spot-card .link-arrow { margin-top: 12px; }
.theme-dark .spot-card { border: 1px solid rgba(166, 203, 227, 0.28); background: var(--on-dark-panel); }
.theme-dark .spot-card p { color: var(--on-dark-muted); }


/* =============================================================================
   22. CADRE D'ILLUSTRATION (.illus-frame) : fond quadrillé pour un SVG
   ============================================================================= */
.illus-frame {
  position: relative;
  margin: 0;
  padding: clamp(16px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--sky-soft);
  background-image:
    linear-gradient(rgba(11, 45, 92, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 45, 92, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.illus-frame img { width: 100%; }
.illus-frame picture { display: block; } /* schéma à deux formats (élément picture) */
.theme-dark .illus-frame {
  border-color: rgba(166, 203, 227, 0.18);
  background-color: rgba(255, 255, 255, 0.03);
  background-image:
    linear-gradient(rgba(166, 203, 227, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 203, 227, 0.06) 1px, transparent 1px);
}
.illus-frame figcaption { margin-top: 12px; color: var(--muted); font-size: 0.875rem; text-align: center; }
.theme-dark .illus-frame figcaption { color: var(--on-dark-muted); }

/* Colonne visuelle empilée (illustration + carte) */
.media-stack { display: grid; gap: 20px; }

/* Quand une mise en page à deux colonnes passe sur une colonne, le visuel ne s'étale pas */
@media (max-width: 1024px) {
  .split > .illus-frame, .split > .media-stack { width: 100%; max-width: 640px; }
}


/* =============================================================================
   23. RÉSEAUX (.networks), FAMILLES DE MESURES (.devices), CHIFFRES (.stats,
       .stat-panel), PASTILLES (.pills)
   ============================================================================= */
.networks { border-top: 1px solid var(--line); }
.networks li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.networks p { color: var(--muted); font-size: 0.975rem; }
.networks strong { display: block; color: var(--navy); font-size: var(--fs-base); }

.devices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.devices li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
}
.devices .icon { width: 26px; height: 26px; color: var(--navy-700); }

/* Chiffres en pastilles : <ul class="stats"><li class="stat"><strong>Plus de 20</strong> fabricants</li></ul> */
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.stat {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-card);
}
.stat strong { color: var(--navy); font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1.2; }

/* Panneau chiffré marine */
.stat-panel {
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  border-radius: var(--radius);
  background: var(--brand-navy);
  color: var(--on-dark-muted);
}
.stat-panel::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  border: 24px solid rgba(166, 203, 227, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(166, 203, 227, 0.04);
}
.stat-panel__num {
  color: var(--orange);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-panel__text { position: relative; z-index: 1; max-width: 30em; margin-top: 6px; }

.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.pill .icon { width: 18px; height: 18px; color: var(--navy-700); }

.aside-note {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.aside-note .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--navy-700); }

@media (max-width: 760px) {
  .devices { gap: 8px; }
  .devices li { padding: 14px 10px; font-size: 0.875rem; }
  .devices .icon { width: 24px; height: 24px; }
}
@media (max-width: 420px) {
  .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =============================================================================
   24. CONFIANCE : CARTE ÉDITEUR (.editor) ET PILIERS (.pillars)
   ============================================================================= */
.trust {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: stretch;
}
.editor {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.editor__logo { width: 110px; }
.editor__body { display: flex; flex-direction: column; height: 100%; }
.editor h3 { margin-bottom: 12px; }
.editor p { color: var(--muted); font-size: 1rem; }
.editor__facts { margin: 20px 0 24px; border-top: 1px solid var(--line); }
.editor__facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.editor__facts dt { color: var(--muted); }
.editor__facts dd { color: var(--navy); font-weight: 700; }
.editor .editor__sign { margin-top: auto; color: var(--navy); font-weight: 700; }

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pillar {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.pillar .icon-badge { margin-bottom: 16px; }
.pillar h3 { margin-bottom: 8px; font-size: var(--fs-base); }
.pillar p { color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 1024px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .editor { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .editor__logo { width: 84px; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pillar { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 20px 18px; }
  .pillar .icon-badge { grid-row: 1 / span 2; margin: 0; }
  .pillar > :not(.icon-badge) { grid-column: 2; }
}


/* =============================================================================
   25. FAQ (.faq) : <details class="faq__item"><summary>Question ?</summary>
       <div class="faq__answer"><p>…</p></div></details>
   ============================================================================= */
.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative;
  display: block;
  padding: 20px 52px 20px 0;
  color: var(--navy);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--orange-ink);
  transition: transform var(--dur) var(--ease);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:hover { color: var(--navy-700); }
.faq__item summary:focus-visible { outline-offset: 2px; }
.faq__answer { padding: 0 52px 22px 0; color: var(--muted); }
.faq__answer > * + * { margin-top: 10px; }
.theme-dark .faq, .theme-dark .faq__item { border-color: var(--on-dark-line); }
.theme-dark .faq__item summary { color: #ffffff; }
.theme-dark .faq__item summary::before, .theme-dark .faq__item summary::after { background: var(--orange); }
.theme-dark .faq__answer { color: var(--on-dark-muted); }

@media (max-width: 480px) {
  .faq__item summary { padding-right: 40px; font-size: var(--fs-base); }
  .faq__answer { padding-right: 0; }
}


/* =============================================================================
   26. GLOSSAIRE (.glossary) : <dl class="glossary"><div class="glossary__item">
       <dt>LoRaWAN</dt><dd>…</dd></div></dl>   Variante compacte : .glossary--compact
   ============================================================================= */
.glossary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.glossary__item {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sky);
  border-radius: 12px;
  background: var(--surface);
}
.glossary dt { color: var(--navy); font-size: var(--fs-base); font-weight: 700; }
.glossary dd { margin-top: 4px; color: var(--muted); font-size: var(--fs-sm); }

.glossary--compact { display: block; margin-top: 14px; }
.glossary--compact .glossary__item {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.glossary--compact .glossary__item + .glossary__item { margin-top: 8px; }
.glossary--compact dt { font-size: var(--fs-sm); }
.glossary--compact dt::after { content: "\00a0:"; }
:lang(en) .glossary--compact dt::after { content: ":"; } /* anglais : pas d'espace avant les deux-points */
.glossary--compact dd { flex: 1 1 14em; margin-top: 0; font-size: var(--fs-sm); }
.theme-dark .glossary__item { border-color: var(--on-dark-line); border-left-color: var(--sky); background: var(--on-dark-panel); }
.theme-dark .glossary dt { color: #ffffff; }
.theme-dark .glossary dd { color: var(--on-dark-muted); }
.theme-dark .glossary--compact .glossary__item { border-color: var(--on-dark-line); background: none; }

@media (max-width: 760px) {
  .glossary { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}


/* =============================================================================
   27. BANDE D'APPEL À L'ACTION (.cta) : panneau marine + carte « Déjà client ? »
   ============================================================================= */
.cta { --band-bg: var(--bg-soft); }
.cta__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 6vw, 72px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(560px 340px at 100% 100%, rgba(166, 203, 227, 0.16), rgba(166, 203, 227, 0) 70%),
    linear-gradient(135deg, var(--brand-navy-700), var(--brand-navy));
}
.cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(166, 203, 227, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 203, 227, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
  mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.cta__copy h2 { margin-bottom: 14px; }
.cta__copy > p:not(.eyebrow) { max-width: 34em; color: var(--on-dark-muted); font-size: var(--fs-md); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.cta__client {
  padding: 26px 26px 24px;
  border: 1px solid rgba(166, 203, 227, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}
.cta__client h3 { margin-bottom: 6px; font-size: var(--fs-md); }
.cta__client > p { color: var(--on-dark-muted); font-size: var(--fs-sm); }
.cta__client .btn-row { margin-top: 18px; }
.cta__client .btn { flex: 1 1 auto; }
.cta__hours {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--on-dark-line);
  color: var(--on-dark-muted);
  font-size: 0.875rem;
}
.cta__hours .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--sky); }

@media (max-width: 1024px) {
  .cta__panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cta__actions .btn { width: 100%; }
  .cta__client { padding: 20px 18px; }
}


/* =============================================================================
   28. PROSE (.prose) : textes longs, mentions légales
   ============================================================================= */
.prose { max-width: 72ch; color: var(--ink); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }
.prose h3 { margin-top: 1.8em; font-size: var(--fs-lg); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--orange-ink); }
.prose a { font-weight: 600; }
.prose dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; }
.prose dt { color: var(--muted); }
.prose dd { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--navy); background: var(--bg-soft); }
.prose .table-wrap { overflow-x: auto; }
.prose__updated { color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 480px) {
  .prose dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .prose dd + dt { margin-top: 10px; }
}


/* =============================================================================
   29. PIED DE PAGE (bloc identique sur toutes les pages)
   ============================================================================= */
.site-footer {
  padding-top: clamp(56px, 7vw, 88px);
  background: var(--navy-900);
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 48px;
}
.footer__brand {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 440px;
}
.footer__logo { width: 76px; }
.footer__sign { margin-bottom: 8px; color: #ffffff; font-size: var(--fs-base); font-weight: 700; }
.footer__title {
  margin-bottom: 16px;
  color: #ffffff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__col ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; list-style: none; }
/* adresse e-mail insécable : sans coupure possible, elle élargirait la colonne et la page à 320 px */
.site-footer a { color: #dce8f3; text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }
/* fond marine foncé : l'anneau de focus marine serait invisible, il passe en orange */
.site-footer :focus-visible { outline-color: var(--orange); }
.footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px 28px;
  font-size: 0.875rem;
}
.footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--on-dark-line);
}

@media (max-width: 1024px) {
  .footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .footer__brand { grid-template-columns: 64px minmax(0, 1fr); }
  .footer__logo { width: 64px; }
}


/* =============================================================================
   30. APPARITION AU DÉFILEMENT
   [data-reveal] : le bloc apparaît en fondu. Actif seulement si site.js a posé
   .reveal-on (pas de JavaScript ou mouvement réduit : tout est visible d'emblée).
   ============================================================================= */
[data-reveal] { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-on [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(18px); }
.reveal-on .story__step:not(.is-visible)::before { transform: scaleY(0); }
.reveal-on .story__step:not(.is-visible) .story__marker { background: var(--surface); color: var(--navy); transform: scale(0.88); }
.reveal-on .story__visual[data-reveal] { transition-delay: 0.12s; }

/* Capture pleine page par l'outil de rendu : tout est révélé */
.render-capture [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.render-capture .story__step::before { transform: none !important; transition: none !important; }
.render-capture .story__marker { background: var(--c) !important; color: var(--c-on) !important; transform: none !important; }


/* =============================================================================
   31. PRÉFÉRENCES : mouvement réduit, contraste forcé, impression
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn--primary:hover, .tile:hover { transform: none; }
}

@media (forced-colors: active) {
  .btn, .tile, .card, .pillar, .editor, .badge, .state, .spot-card, .note, .glossary__item, .also__item, .shot__frame, .phone, .lightbox__close { border: 1px solid CanvasText; }
  .icon { stroke: CanvasText; }
  .checklist li::after { border-color: CanvasText; }
  .story__marker, .story__end-marker { border: 2px solid CanvasText; }
}

@media print {
  .site-header, .skip-link, .hero::before, .hero::after, .collage__float, .collage__phone,
  .section.theme-dark::before, .page-hero::before, .cta__panel::before { display: none; }
  .theme-dark, .hero, .page-hero, .cta__panel, .site-footer, .section.theme-dark {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark p, .theme-dark li { color: #000000 !important; }
  .section { padding-block: 24px; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .shot__frame { box-shadow: none; break-inside: avoid; }
  .shot__frame::after, .lightbox { display: none; }
}


/* =============================================================================
   32. PAGE « LA PLATEFORME » (plateforme.html)
   Règles propres à cette page, qui n'utilisent que les jetons ci-dessus.
   - .toc       : sommaire « Sur cette page » sous le héros (liens vers les ancres)
   - .subhead   : sous-partie d'une section (h3 + chapeau), avec la marge d'une ligne .feature
   - .pf-gap    : même marge haute, pour un bloc qui suit une ligne .feature
   - h4 dans .card et .steps__item : même rendu qu'un h3 (titres sous une sous-partie)
   - .pf-notes  : deux encadrés .note côte à côte dans une grille
   - .blocks    : mosaïque des cinq types de blocs, chacun une vraie découpe d'un tableau de bord avec son nom
   - .pf-control: commandes d'une borne (capture) à côté du schéma d'un programme envoyé à un appareil
   - .pf-code   : étiquette dessinée avec son code d'activation, à côté de la capture du formulaire d'ajout
   ============================================================================= */
/* --- Sommaire de page --- */
.toc {
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.toc__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding-block: 20px;
}
.toc__title {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.toc__list { display: flex; flex-wrap: wrap; gap: 8px; }
.toc__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.toc__list a:hover { border-color: var(--navy-700); background: var(--sky-soft); }
.toc__list .icon { width: 18px; height: 18px; color: var(--navy-700); }

@media (max-width: 600px) {
  .toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .toc__list a { min-height: 44px; padding-inline: 10px; font-size: 0.875rem; }
}

/* --- Sous-partie d'une section --- */
.subhead { max-width: 760px; margin: clamp(64px, 7vw, 104px) 0 var(--sp-8); }
.subhead h3 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.subhead p { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-md); }
.theme-dark .subhead p { color: var(--on-dark-muted); }

.pf-gap { margin-top: clamp(64px, 7vw, 104px); }

/* --- Titres h4 sous une sous-partie : rendu d'un h3 --- */
.card h4 { margin-bottom: 10px; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.steps__item h4 { margin-bottom: 10px; font-size: 1.1875rem; letter-spacing: -0.01em; }
@media (max-width: 1100px) {
  .steps__item h4 { padding-top: 10px; }
}
@media (max-width: 600px) {
  .card h4 { margin-bottom: 6px; font-size: 1.125rem; }
}

/* --- Encadrés .note côte à côte : <ul class="grid grid--2 pf-notes"><li><p class="note">… --- */
.pf-notes { margin-top: var(--grid-gap, 20px); }
.pf-notes .note,
.media-stack > .note { margin-top: 0; }

/* --- Cinq types de blocs : vraies découpes de tableaux de bord, chacune avec son nom ---
   <figure class="blocks"><ul class="blocks__grid"><li class="blocks__item [--value | --strip]">
     <a class="shot__frame shot__frame--bare" … data-caption="…">…</a><p class="blocks__label"><strong>Nom</strong>définition</p>
   </li>…</ul><figcaption>… (données de démonstration)</figcaption></figure>
   Grille de 8 colonnes : carte de valeur 2, courbes 3 + 3 (même hauteur), bandeaux 4 + 4. */
.pf-blocks-head { max-width: 760px; margin-bottom: var(--sp-6); }
.blocks { margin: 0; }
.blocks__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 28px 20px;
  align-items: start;
}
.blocks__item { grid-column: span 3; min-width: 0; }
.blocks__item--value { grid-column: span 2; }
.blocks__item--strip { grid-column: span 4; }
.blocks__label { margin-top: 12px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.blocks__label strong { display: block; margin-bottom: 2px; color: var(--navy); font-size: var(--fs-base); }
.blocks figcaption { margin-top: 24px; color: var(--muted); font-size: 0.875rem; }
.blocks + .aside-note { margin-top: 12px; }
@media (max-width: 1024px) {
  .blocks__item--strip { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .blocks__grid { gap: 24px 16px; }
  .blocks__item, .blocks__item--strip { grid-column: 1 / -1; }
  .blocks__item--value { grid-column: 1 / -1; max-width: 260px; }
}

/* --- Agir à distance : capture des commandes d'une borne + schéma d'un programme envoyé à un appareil --- */
.pf-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 20px;
  align-items: stretch;
  margin: 0;
}
.pf-control__illus { display: grid; place-items: center; padding: clamp(12px, 2vw, 24px); }
.pf-control__illus img { max-width: 240px; }
.pf-control figcaption { grid-column: 1 / -1; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
@media (max-width: 520px) {
  .pf-control { grid-template-columns: minmax(0, 1fr); }
  .pf-control > .shot__frame { width: 100%; max-width: 320px; justify-self: center; }
  .pf-control__illus img { max-width: 200px; }
}

/* --- Fabricants : l'étiquette dessinée et la capture du formulaire d'ajout, côte à côte --- */
.pf-code {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 16px 10px;
  align-items: center;
}
.illus-frame.pf-code figcaption { grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 480px) {
  .pf-code { grid-template-columns: minmax(0, 1fr); }
  .pf-code > img { max-width: 240px; justify-self: center; }
}


/* =============================================================================
   33. PAGE « SOLUTIONS PAR MÉTIER » (solutions.html)
   Règles propres à cette page, qui n'utilisent que les jetons ci-dessus.
   - S1. Sommaire des secteurs (.sector-nav)
   - S2. Section secteur : en-tête (.sector-head), corps (.sector-body), parties (.sector-part, .sector-label)
   - S3. Encadré « Réalisation » / « Exemple d'usage » (.example)
   - S4. Ajustements (bloc « Et aussi » sous un en-tête, contexte sombre)
   ============================================================================= */
/* S1. SOMMAIRE DES SECTEURS ------------------------------------------------- */
.sector-nav ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sector-nav li { display: flex; }
.sector-nav a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sector-nav__text strong { display: block; color: var(--navy); font-size: 1rem; line-height: 1.35; }
.sector-nav__text > span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.sector-nav__arrow {
  width: 20px;
  height: 20px;
  color: var(--navy-700);
  transform: rotate(90deg);
  transition: transform var(--dur) var(--ease);
}
.sector-nav a:hover { border-color: var(--navy-700); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.sector-nav a:hover .sector-nav__arrow { transform: rotate(90deg) translateX(3px); }
.sector-nav a:hover .icon-badge { background: var(--brand-navy); color: var(--orange); }
.sector-nav a:focus-visible { outline-offset: 3px; border-radius: 12px; }
#secteurs .aside-note { margin-top: 22px; }

/* S2. SECTION SECTEUR ------------------------------------------------------- */
/* En-tête : grande pastille d'icône + surtitre, h2, public visé */
.sector-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 900px;
  margin-bottom: var(--stack);
}
.sector-head > .icon-badge { width: 64px; height: 64px; border-radius: 18px; }
.sector-head > .icon-badge .icon { width: 30px; height: 30px; }
.sector-head .eyebrow { margin-bottom: 12px; }
.sector-head h2 { margin-bottom: 14px; }
.sector-head p:not(.eyebrow) { max-width: 46em; color: var(--muted); font-size: var(--fs-md); }
.theme-dark .sector-head p:not(.eyebrow) { color: var(--on-dark-muted); }

/* Corps : texte (5) + visuels (6) ; --reverse met les visuels à gauche */
.sector-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.sector-body--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.sector-body--reverse .sector-media { order: -1; }

/* Parties du texte : le besoin, ce que fait Telemesure, ce que vous gagnez, capteurs */
.sector-part + .sector-part {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.sector-part > p:not([class]) { color: var(--ink); }
.sector-part > p:not([class]) + p:not([class]) { margin-top: 10px; }
.sector-part .checklist { margin-top: 0; }
.sector-part .pills { margin-top: 2px; }
.sector-part .pill sub { line-height: 0; }
.sector-part .shot { margin-top: 18px; }
.sector-part .aside-note { margin-top: 16px; }
.sector-part .note { margin-top: 18px; }

.sector-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--navy-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.sector-label .icon { width: 20px; height: 20px; }
.sector-label--need .icon { color: var(--orange-ink); }
.sector-label--gain .icon { color: var(--green-ink); }

.sector-link { margin-top: 26px; }

/* Ancre d'un secteur : on arrive sur le titre, pas sur la marge haute de la bande */
.sector[id] { scroll-margin-top: calc(24px - var(--section-y)); }

/* Visuels : capture ou illustration, puis l'encadré d'exemple */
.sector-media { min-width: 0; }

/* S3. ENCADRÉ « RÉALISATION » / « EXEMPLE D'USAGE » ------------------------- */
.example {
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.example__label {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  background: var(--brand-navy);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}
.example__label--usage { background: var(--sky-soft); color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--line); }
.example:has(.example__label--usage) { border-left-color: var(--sky); }
.example h3 { margin-bottom: 8px; font-size: var(--fs-md); line-height: 1.3; }
.example p:not(.example__label) { color: var(--muted); font-size: 0.975rem; }
.example > p + p:not(.example__label) { margin-top: 10px; }
.example .shot { margin-top: 16px; }
.example__link { margin-top: 16px; }

/* S4. AJUSTEMENTS ------------------------------------------------------------ */
/* Bloc « Et aussi » placé juste sous un en-tête de section */
.section-head + .sector-also { margin-top: 0; }

/* Contexte sombre (bande « Bornes de recharge ») */
.theme-dark .sector-part + .sector-part { border-top-color: var(--on-dark-line); }
.theme-dark .sector-part > p:not([class]) { color: #e3edf6; }
.theme-dark .sector-label { color: var(--sky); }
.theme-dark .sector-label--need .icon { color: var(--orange); }
.theme-dark .sector-label--gain .icon { color: var(--green); }
.theme-dark .example { border-color: var(--on-dark-line); border-left-color: var(--orange); background: var(--on-dark-panel); box-shadow: none; }
.theme-dark .example:has(.example__label--usage) { border-left-color: var(--sky); }
.theme-dark .example__label--usage { background: rgba(166, 203, 227, 0.16); color: #dce8f3; box-shadow: none; }
.theme-dark .example__label:not(.example__label--usage) { background: var(--orange); color: var(--navy); }
.theme-dark .example p:not(.example__label) { color: var(--on-dark-muted); }

/* Points de rupture (mêmes valeurs que site.css) */
@media (max-width: 1100px) {
  .sector-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .sector-body, .sector-body--reverse { grid-template-columns: minmax(0, 1fr); }
  .sector-body--reverse .sector-media { order: 0; }
  .sector-copy { max-width: 720px; }
  .sector-media { max-width: 760px; }
}
@media (max-width: 760px) {
  .sector-nav ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sector-head { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .sector-head > .icon-badge { width: 52px; height: 52px; border-radius: 14px; }
  .sector-head > .icon-badge .icon { width: 26px; height: 26px; }
  .example { padding: 20px 18px 22px; }
}
@media (max-width: 480px) {
  .sector-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sector-head > .icon-badge { width: 48px; height: 48px; }
  .sector-link .btn { width: 100%; }
  .sector-media .illus-frame { padding: 8px; border-radius: var(--radius); }
}

@media (prefers-reduced-motion: reduce) {
  .sector-nav a:hover { transform: none; }
}
@media (forced-colors: active) {
  .sector-nav a, .example { border: 1px solid CanvasText; }
}


/* =============================================================================
   34. PAGE « RECHARGE ÉLECTRIQUE » (recharge.html)
   Règles propres à cette page, qui n'utilisent que les jetons ci-dessus.
   - .rc-status, .rc-text, .rc-need, .rc-audiences, .rc-diagram, .rc-also
   ============================================================================= */
/* Ligne d'état : badge suivi d'une phrase courte (ex. itinérance OCPI dans le héros).
   <p class="rc-status"><span class="badge badge--ok">…</span><span>…</span></p> */
.rc-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 20px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.rc-status a { font-weight: 700; }
.theme-dark .rc-status { color: var(--on-dark-muted); }
.rc-status + .lead { margin-top: 20px; }

/* Paragraphe courant sous un chapeau, dans une colonne de texte */
.rc-text { max-width: 38em; margin-top: 16px; color: var(--muted); }

/* Carte « Pour qui ? » : le libellé « Votre besoin. » ressort */
.rc-need strong { color: var(--navy); }

/* Cartes « Pour qui ? » sur mobile : la pastille reste à côté du titre,
   le besoin et la liste reprennent toute la largeur de la carte. */
@media (max-width: 600px) {
  .rc-audiences .card > .icon-badge { grid-row: 1; align-self: center; }
  .rc-audiences .card > .rc-need,
  .rc-audiences .card > .checklist { grid-column: 1 / -1; }
  .rc-audiences .card > .rc-need { margin-top: 14px; }
  .rc-audiences .card > .checklist { margin-top: 18px; }
}

/* Schéma de raccordement : version verticale centrée sur tablette et mobile */
@media (max-width: 820px) {
  .rc-diagram img { max-width: 460px; margin-inline: auto; }
}

/* Capture pleine largeur sous une ligne .feature (ex. les cartes de pilotage, très larges) */
.rc-wide { margin-top: clamp(48px, 6vw, 80px); }
.rc-wide .shot { max-width: 1100px; margin-inline: auto; }

/* Sommaire des écrans de l'application OCPP : reprend .sector-nav (page Solutions), sur 4 colonnes */
.rc-app-nav { margin-bottom: clamp(56px, 7vw, 96px); }
.rc-app-nav ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-app-nav .sector-nav__text > span { font-size: 0.875rem; }
@media (max-width: 1240px) {
  .rc-app-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rc-app-nav ul { grid-template-columns: minmax(0, 1fr); }
}

/* Illustration (réservation, profil de charge) à la place d'une capture dans une ligne .feature */
.rc-illus .illus-frame { padding: clamp(12px, 2vw, 24px); background-color: #ffffff; }

/* Liste « Ce que l'itinérance apporte » sur deux colonnes : le dernier élément isolé prend toute la ligne */
@media (min-width: 601px) and (max-width: 1024px) {
  .rc-also > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* =============================================================================
   35. PAGE « CAPTEURS & RÉSEAUX » (objets-connectes.html)
   Règles propres à cette page, qui n'utilisent que les jetons ci-dessus.
   - .oc-hero, .oc-hero-facts, .oc-gap, .oc-feature-illus, .overlay__item--flux
   - .oc-device : familles d'appareils, carte avec pictogramme
   - .oc-net, .oc-notes, .oc-foot-note : réseaux et remarques
   ============================================================================= */
/* Héros de page suivi d'une bande de chiffres (le contexte .theme-dark est hérité) */
.page-hero.oc-hero { padding-bottom: clamp(8px, 2vw, 24px); }
.oc-hero-facts { margin-top: clamp(40px, 6vw, 72px); }

/* Ligne de fonctionnalité illustrée : le cadre quadrillé suffit, pas de second fond */
.oc-feature-illus .feature__media::before { display: none; }

/* Espace entre deux blocs d'une même bande */
.oc-gap { margin-top: clamp(64px, 8vw, 112px); }

/* « Vos mesures, aussi dans vos logiciels » : la vraie carte de valeur du portail posée dans le cadre « Telemesure »
   du schéma objets-connectes-flux.svg (emplacement x 18, y 112, 224 x 212 sur 560 x 384) */
.overlay__item--flux { left: 3.2143%; top: 29.1667%; width: 40%; }


/* --- Familles d'appareils : carte avec pictogramme ---------------------------
   <li class="card oc-device"><img class="oc-device__pic" …><h3>…</h3><p>…</p></li>
   Le pictogramme SVG est transparent : le panneau bleu ciel quadrillé est dessiné
   ici, pour qu'il occupe toute la largeur de la carte sans déformer le dessin. */
.oc-device { display: flex; flex-direction: column; padding: 24px 22px 26px; }
.oc-device::before { left: 22px; }
.oc-device__pic {
  width: 100%;
  height: 150px;
  margin-bottom: 20px;
  object-fit: contain;
  border-radius: 12px;
  background-color: var(--sky-soft);
  background-image:
    linear-gradient(rgba(11, 45, 92, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 45, 92, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center;
}
.oc-device h3 { font-size: 1.125rem; }
.card.oc-device p { font-size: var(--fs-sm); }
.oc-device .link-arrow { margin-top: auto; padding-top: 14px; font-size: var(--fs-sm); }

@media (max-width: 600px) {
  .oc-device {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 16px;
    align-content: start;
    padding: 20px 18px;
  }
  .oc-device::before { left: 18px; }
  .oc-device .oc-device__pic { grid-column: 1; grid-row: 1 / span 3; width: 76px; height: 76px; margin: 0; object-fit: cover; background-size: 19px 19px; }
  .oc-device > :not(.oc-device__pic) { grid-column: 2; }
  .oc-device h3 { margin-bottom: 6px; font-size: var(--fs-base); }
  .oc-device .link-arrow { margin-top: 6px; padding-top: 0; }
}


/* --- Réseaux : carte avec la ligne « Idéal pour » en pied -------------------- */
.oc-net { display: flex; flex-direction: column; }
.oc-net > p:not(.oc-net__ideal) { margin-bottom: 18px; }
.card p.oc-net__ideal {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.oc-net__ideal strong { color: var(--navy); }

/* Deux encadrés côte à côte sous la grille des réseaux */
.oc-notes { margin-top: 40px; align-items: start; }
.oc-notes .note { margin-top: 0; }

/* Remarque sous une grille de cartes */
.oc-foot-note { margin-top: 32px; }


/* =============================================================================
   36. PAGE « DEMANDER UNE DÉMO » (contact.html)
   Règles propres à cette page, qui n'utilisent que les jetons ci-dessus.
   - .contact-hero__mail : précision sous les boutons du héros
   - .mail             : aperçu du message pré-rempli (figure + figcaption)
   - .contact-card__action, .contact-hours, .contact-address, .contact-demo__title, .contact-faq
   ============================================================================= */
/* Héros : phrase d'explication sous les boutons */
.contact-hero__mail {
  max-width: 34em;
  margin-top: 20px;
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
}
.contact-hero__mail a { font-weight: 700; }
.contact-hero__mail + .hero__client { margin-top: 8px; }

/* Aperçu du message pré-rempli */
.mail {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.mail__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--brand-navy);
  color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.mail__bar .icon { width: 20px; height: 20px; color: var(--orange); }
.mail__head { padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.mail__head div {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  font-size: var(--fs-sm);
}
.mail__head div + div { border-top: 1px solid var(--line); }
.mail__head dt { color: var(--muted); }
.mail__head dd { color: var(--navy); font-weight: 700; }
.mail__body {
  display: grid;
  gap: 14px;
  padding: 22px;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.mail__fields { display: grid; gap: 10px; }
/* chaque rubrique est suivie d'un pointillé « à compléter » */
.mail__fields li { display: flex; align-items: baseline; gap: 10px; color: var(--navy); font-weight: 600; }
.mail__fields li::after {
  content: "";
  flex: 1 1 48px;
  min-width: 32px;
  border-bottom: 2px dotted var(--line-strong);
}
.mail__foot { padding: 18px 22px 22px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.mail__foot .btn { white-space: normal; }
.mail + .aside-note { margin-top: 16px; }

@media (max-width: 480px) {
  .mail__bar, .mail__head, .mail__body { padding-inline: 16px; }
  .mail__body { padding-block: 18px; }
  .mail__foot { padding: 16px; }
  .mail__fields li { display: block; }
  .mail__fields li::after { display: block; height: 10px; }
}

/* Démonstration : le titre de section dans une colonne */
.contact-demo__title { margin-bottom: 18px; }

/* Cartes « Déjà client » : bouton sous le texte */
.card .contact-card__action { margin-top: 22px; }
.contact-hours { justify-content: center; margin-top: 28px; color: var(--navy); font-weight: 600; }

/* Adresse postale dans un pilier */
.contact-address { color: var(--muted); font-size: var(--fs-sm); font-style: normal; line-height: 1.55; }
.pillar a { font-weight: 700; }

/* Questions fréquentes : titre à gauche, questions à droite (écran large) */
@media (min-width: 1025px) {
  .contact-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .contact-faq > .section-head { margin-bottom: 0; }
}

/* Héros : l'illustration du message prend la moitié de la largeur sur écran large */
.contact-hero .illus-frame { padding: clamp(12px, 2vw, 24px); }
@media (min-width: 1025px) {
  .contact-hero .page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Une seule colonne : le message garde une largeur de lecture confortable */
@media (max-width: 1024px) {
  .contact-mail { max-width: 640px; }
}

/* Cartes « Déjà client » côte à côte : boutons alignés en bas */
@media (min-width: 601px) {
  .contact-clients .card { display: flex; flex-direction: column; }
  .contact-clients .contact-card__action { margin-top: auto; padding-top: 22px; }
}


/* =============================================================================
   37. PAGE « MENTIONS LÉGALES » (mentions-legales.html)
   Règles propres à cette page, qui n'utilisent que les jetons ci-dessus.
   - .legal          : sommaire à gauche (collant sur grand écran), texte à droite
   - .legal-toc      : sommaire numéroté de la page
   - .legal-brief    : encadré « En bref »
   - .legal__body    : parties numérotées comme le sommaire, séparées par un filet
   - .legal-id       : fiche d'identité de l'éditeur (liste de définitions)
   - .todo           : information à compléter avant la mise en ligne (bien visible)
   ============================================================================= */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.legal__aside { display: grid; gap: 20px; }

/* --- Sommaire --- */
.legal-toc {
  padding: 22px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.legal-toc__title,
.legal-brief__title {
  margin-bottom: 10px;
  padding-inline: 8px;
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.legal-toc ol { display: grid; gap: 2px; list-style: none; counter-reset: legal-toc; }
.legal-toc li { counter-increment: legal-toc; }
.legal-toc a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  padding: 8px;
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero);
  content: counter(legal-toc, decimal-leading-zero) / "";
  color: var(--orange-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.legal-toc a:hover { background: var(--surface); color: var(--navy-700); }
.legal-toc a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* --- En bref --- */
.legal-brief {
  padding: 22px 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.legal-brief__title { padding-inline: 0; }
.legal-brief .checklist { margin-top: 0; gap: 10px; }
.legal-brief .checklist li { font-size: var(--fs-sm); line-height: 1.45; }
.legal-brief .checklist li::before { top: -1px; }
.legal-brief .checklist li::after { top: 4px; }
.legal-brief__mail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.legal-brief__mail .icon { width: 18px; height: 18px; color: var(--navy-700); }
.legal-brief__mail a { font-weight: 700; }

/* --- Corps du texte : parties numérotées comme le sommaire --- */
.legal__body { counter-reset: legal-part; }
.legal__body h2 {
  counter-increment: legal-part;
  margin-top: 1.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
}
.legal__body h2::before {
  content: counter(legal-part, decimal-leading-zero);
  content: counter(legal-part, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 10px;
  color: var(--orange-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.legal__body .prose__updated + h2 { margin-top: 1.1em; }
.legal__body h2 + h3 { margin-top: 0.9em; }
.legal__body .nowrap { white-space: nowrap; }

/* --- Fiche d'identité de l'éditeur --- */
.prose .legal-id {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  gap: 10px 28px;
}
.prose .legal-id dd { color: var(--navy); }

/* --- À compléter avant la mise en ligne --- */
.todo {
  padding: 18px 20px;
  border: 2px dashed #d99a2b;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--ink);
}
.todo__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-navy);
  color: #ffffff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.todo__label .icon { width: 16px; height: 16px; color: var(--orange); }
.todo p + p { margin-top: 0.6em; }

@media (min-width: 1025px) and (min-height: 760px) {
  .legal__aside { position: sticky; top: calc(var(--mainbar-h) + 24px); }
}
@media (max-width: 1024px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__aside { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .legal__aside { grid-template-columns: minmax(0, 1fr); }
  .prose .legal-id { padding: 16px 18px; }
}
@media (max-width: 480px) {
  /* fiche éditeur sur une colonne : chaque libellé reste collé à sa valeur */
  .prose .legal-id { gap: 2px; }
  .prose .legal-id dd + dt { margin-top: 14px; }
  .todo { padding: 16px; }
  .todo__label { font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
}
@media print {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { display: none; }
}
@media (forced-colors: active) {
  .todo, .legal-toc, .legal-brief { border: 2px solid CanvasText; }
}


/* =============================================================================
   38. MODE SOMBRE (.mode-sombre, bouton .theme-switch)
   assets/js/theme.js (chargé dans <head>, avant cette feuille) pose .mode-sombre et .theme-dark sur <html>
   quand le visiteur a choisi le sombre (bouton .theme-switch de la barre du haut, choix mémorisé dans
   localStorage « tm_theme ») ou, sans choix mémorisé, quand son système est réglé en sombre (suivi en direct
   par site.js).
   .theme-dark sur <html> fait de toute la page un contexte sombre : chaque composant prend sa variante sombre
   déjà prévue (section 02 et suivantes). Ici : les jetons des surfaces claires passent en sombre, --navy et
   --navy-700 deviennent des couleurs de texte claires, et les fonds marine lisent --brand-navy (inchangé).
   Les schémas SVG, dessinés pour un fond clair, gardent un cadre clair.
   ============================================================================= */
:root { color-scheme: light; }

/* Bouton de la barre du haut : lune en clair (passer en sombre), soleil en sombre (revenir au clair) */
.theme-switch {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid rgba(166, 203, 227, 0.35);
  border-radius: 6px;
  background: transparent;
  color: #e3edf6;
  cursor: pointer;
}
.theme-switch:hover { border-color: #ffffff; color: #ffffff; }
.theme-switch .icon { width: 15px; height: 15px; }
.theme-switch__sun { display: none; }
.mode-sombre .theme-switch__moon { display: none; }
.mode-sombre .theme-switch__sun { display: block; }
/* Sans JavaScript, le bouton ne ferait rien : il n'apparaît pas */
.no-js .theme-switch { display: none; }
@media (scripting: none) { .theme-switch { display: none; } }

@media screen {
  html.mode-sombre {
    color-scheme: dark;
    background-color: #04162e;
    --navy: #eaf2fb;
    --navy-700: #b9d6ec;
    --ink: #dfe8f2;
    --muted: #b9cde0;
    --line: rgba(166, 203, 227, 0.2);
    --line-strong: rgba(166, 203, 227, 0.36);
    --bg: #04162e;
    --bg-soft: #071d3b;
    --surface: #0a2446;
    --sky-soft: #0e2a4e;
    --orange-ink: #f2b23c;
    --orange-soft: rgba(232, 160, 27, 0.14);
    --green-ink: #a6dc6a;
    --green-soft: rgba(127, 196, 52, 0.14);
    --red-ink: #f3998e;
    --red-soft: rgba(214, 69, 53, 0.18);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -16px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 24px 48px -24px rgba(0, 0, 0, 0.8);
  }

  /* Bandes : la page est d'un marine plus profond que les bandes marine, qui gardent leur relief */
  .mode-sombre .site-footer { border-top: 1px solid var(--on-dark-line); }
  .mode-sombre .mainbar { border-bottom-color: var(--on-dark-line); }
  .mode-sombre.is-scrolled .mainbar,
  .mode-sombre .is-scrolled .mainbar { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8); }

  /* Schémas SVG des bandes claires : dessinés pour un fond clair, ils gardent un cadre clair, légèrement adouci.
     Ceux des bandes déjà sombres en mode clair (héros, .section.theme-dark : un .theme-dark sous <body>) sont
     dessinés pour un fond sombre et gardent leur cadre sombre (règles suivantes). */
  .mode-sombre .illus-frame {
    border-color: rgba(166, 203, 227, 0.25);
    background-color: #e4edf6;
    background-image: none;
  }
  .mode-sombre .illus-frame figcaption,
  .mode-sombre .illus-frame p { color: #4a5d75; }
  .mode-sombre .illus-frame a:not(.btn) { color: #0b2d5c; }
  .mode-sombre body .theme-dark .illus-frame {
    border-color: rgba(166, 203, 227, 0.18);
    background-color: rgba(255, 255, 255, 0.03);
    background-image:
      linear-gradient(rgba(166, 203, 227, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(166, 203, 227, 0.06) 1px, transparent 1px);
  }
  .mode-sombre body .theme-dark .illus-frame figcaption,
  .mode-sombre body .theme-dark .illus-frame p { color: var(--on-dark-muted); }
  .mode-sombre body .theme-dark .illus-frame a:not(.btn) { color: var(--on-dark); }
  .mode-sombre .feature__media::before { background-color: rgba(166, 203, 227, 0.1); }
  .mode-sombre .oc-device__pic { background-color: #e4edf6; }
}