/* ════════════════════════════════════════════════════════════════════
   ICETEMP — Site vitrine
   Direction artistique reprise du LIVRET DE PRÉSENTATION A5 :
   DM Sans en famille unique, bleu nuit #0A1628, cyan de marque #0AB3D1,
   filets éditoriaux, titres bicolores, photographie désaturée.
   Aucun effet décoratif : ce qui n'existe pas sur l'imprimé n'existe pas ici.
   ════════════════════════════════════════════════════════════════════ */

/* DM Sans auto-hébergée (variable 100→1000), reprise telle quelle du livret.
   Auto-hébergée et non chargée depuis un CDN de polices : une page publique
   qui ne déclenche AUCUNE requête vers un tiers n'a rien à déclarer côté
   cookies, et la typo ne dépend pas d'un service extérieur. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(../fonts/dmsans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(../fonts/dmsans-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Cyan : TROIS valeurs, pas une.
     --cyan       accent sur fond sombre, filets, barres, icônes (livret)
     --cyan-deep  grands titres sur fond clair (≥ 28 px, contraste large-text)
     --cyan-ink   PETIT texte sur fond clair — 5,2:1, seul niveau conforme AA.
     Le livret n'a que les deux premiers : sur un imprimé le WCAG ne s'applique
     pas. Sur le web, un intitulé de 12 px en #0892AB tombe à 3,7:1. */
  --cyan:       #0AB3D1;
  --cyan-deep:  #0892AB;
  --cyan-ink:   #06788A;
  /* --cyan-pale : remplissage des barres NON mises en avant de l'histogramme,
     son seul usage. #E9F7FB donnait 1,10:1 sur blanc — les barres se lisaient
     comme des emplacements vides, l'histogramme paraissait inachevé. #B0E1EF
     mesure 1,41:1 sur blanc et reste 2,60:1 sous la barre accentuée, qui
     continue donc de ressortir seule. */
  --cyan-pale:  #B0E1EF;
  --cyan-line:  #BEE7F1;
  --navy:       #0A1628;
  --navy-2:     #12233C;
  --navy-3:     #1B2A4A;
  --ink:        #0F1A2E;
  --text:       #465A73;
  --muted:      #64748B;
  /* --faint : 2,56:1 sur blanc. RÉSERVÉ au décoratif (icônes, filets, et la
     maquette applicative, qui est aria-hidden). Jamais pour du texte réel. */
  --faint:      #94A3B8;
  --border:     #E3EAF1;
  --surface:    #F6F9FC;
  --white:      #FFFFFF;
  --on-navy:    #A9BED4;
  --on-navy-2:  #9FB4CB;
  --ok:         #0B7A46;
  --ok-bg:      #E8F6EE;
  --warn:       #97580B;
  --warn-bg:    #FCF1DF;
  --bad:        #B42318;
  --bad-bg:     #FCEBEA;
  --font-display: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:    "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* scroll-padding : sans lui, une ancre atterrit SOUS le header collant (72 px). */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }

/* Graisse 800 et chasse resserrée : c'est le réglage exact du livret.
   Une DM Sans en 600 sur un grand titre paraît molle — la maquette imprimée
   tient précisément parce que les titres sont lourds. */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
}

/* ── Titre bicolore ───────────────────────────────────────────────────
   LA signature du livret : la seconde ligne du titre passe en cyan. Elle
   n'est pas décorative, elle porte la promesse ; la première ligne pose le
   sujet. Sur fond clair, cyan-deep (grand corps, contraste large-text OK) ;
   sur fond sombre, le cyan vif. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--cyan-deep); }
.on-navy h1 em, .on-navy h2 em,
.dark h1 em, .dark h2 em, .cta h2 em, .manifesto p em { color: var(--cyan); }

/* ── Intitulé de section ──────────────────────────────────────────────
   🔴 PAS de filet qui court jusqu'à la marge, PAS de capitales très espacées
   en cyan. C'est le marqueur « landing page IA » n°1 pour ce projet, et il
   revenait 47 fois sur 13 pages — donc à chaque section de chaque page.
   Ce qui reste : un intitulé discret, en bas de casse, dans le gris du corps
   de texte. Il oriente le lecteur sans réclamer l'attention que mérite le
   titre placé juste en dessous. NE PAS y remettre `::after`. */
.label {
  font-family: var(--font-display);
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 14px;
}
.on-navy .label, .dark .label, .cta .label { color: #8FA9C2; }

/* ── Boutons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-3); }
.btn-quiet { border-color: var(--border); color: var(--ink); background: #fff; }
.btn-quiet:hover { border-color: var(--faint); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #E9EDF3; }
.btn-outline { border-color: rgba(255,255,255,.28); color: #fff; background: transparent; }
.btn-outline:hover { border-color: rgba(255,255,255,.6); }
/* Cyan plein : réservé à l'appel à l'action final, comme le pavé cyan de la
   dernière page du livret. Utilisé partout, il perdrait sa valeur de signal. */
.btn-cyan { background: var(--cyan-deep); color: #fff; }
.btn-cyan:hover { background: #076F81; }
.btn svg { width: 15px; height: 15px; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--cyan-ink);
}
.textlink:hover { color: var(--cyan-deep); }
.textlink svg { width: 14px; height: 14px; transition: transform .18s ease; }
.textlink:hover svg { transform: translateX(3px); }
.on-navy .textlink, .dark .textlink, .cta .textlink { color: var(--cyan); }
.on-navy .textlink:hover, .dark .textlink:hover, .cta .textlink:hover { color: #6FD8EE; }

/* ── Header ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); }

.nav {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 40px;
}
/* Le logotype, plus une approximation typographique.
   Les tracés viennent du fichier de marque (mêmes courbes que sur l'imprimé) ;
   en SVG ils restent nets à tout facteur de zoom et sur écran HiDPI. */
.brand { display: inline-flex; align-items: center; }
.brand img, .brand svg { height: 22px; width: auto; display: block; }
.site-footer .brand img { height: 24px; }

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}
.nav-links a:hover { color: var(--ink); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-right .login { font-size: 14.5px; font-weight: 500; color: var(--text); }
.nav-right .login:hover { color: var(--ink); }
.nav-right .btn { height: 40px; padding: 0 20px; font-size: 14px; }

.burger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.burger svg { width: 22px; height: 22px; }

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 8px 24px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 13px 4px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--surface);
}
.mobile-menu .btn { margin-top: 16px; }

/* ── Photographie ─────────────────────────────────────────────────────
   Traitement : voir le commentaire sur .photo img ci-dessous — les photos ne
   sont plus désaturées depuis la refonte couleur.
   Par-dessus : un voile bleu, puis un fondu long vers le bleu nuit, de sorte
   que la photo se termine EXACTEMENT sur la couleur de fond de la section.
   Un fondu court laisserait une couture horizontale en travers de la page. */
.photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Photos EN COULEUR. La désaturation à 72 % venait du livret imprimé, où
     elle sert à ne pas concurrencer le texte sur une page A5. Sur le web elle
     vidait les photos de leur seule chaleur : gilets jaunes, lumière de hangar,
     bois des palettes. On garde juste ce qu'il faut de contraste pour que le
     texte blanc tienne par-dessus. */
  filter: saturate(1.04) contrast(1.06) brightness(.94);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 60, 92, .12);
}
.photo .fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,22,40,.62) 0%,
    rgba(10,22,40,.30) 22%,
    rgba(10,22,40,.42) 52%,
    rgba(10,22,40,.78) 78%,
    var(--navy) 100%);
}

/* ── Section sombre ───────────────────────────────────────────────────
   Aplat très légèrement dégradé : un bleu nuit parfaitement plat sonne
   « gabarit ». Le dégradé est éteint avant 30 % pour que le fondu d'une photo
   posée au-dessus retombe sur la même valeur exacte. */
.dark {
  position: relative;
  background: linear-gradient(168deg, #0D1C31 0%, var(--navy) 28%);
  color: #fff;
}
.dark h1, .dark h2, .dark h3, .on-navy h1, .on-navy h2, .on-navy h3 { color: #fff; }
.dark p, .dark .lead { color: var(--on-navy-2); }
.dark > .container, .dark .container { position: relative; z-index: 2; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 108px 0 64px;
  overflow: hidden;
  isolation: isolate;
}
.hero-copy { max-width: 780px; }
/* Le filet cyan court au-dessus du titre : c'est l'attaque de la couverture
   du livret. Il donne au bloc de titre un point de départ franc. */
.hero-copy .rule-mark {
  display: block;
  width: 62px;
  height: 3px;
  border-radius: 2px;
  background: var(--cyan);
  margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(40px, 5.6vw, 66px);
  letter-spacing: -0.032em;
  line-height: 1.035;
}
.hero .lead {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.62;
  color: var(--on-navy);
  max-width: 620px;
}
.hero-actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
/* Adresse en pied de couverture, filet compris — dernier élément de la p.1 */
.hero-foot {
  margin-top: 68px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #8FA9C2;
}
.hero-foot .accent { color: var(--cyan); }

/* ── Capture d'application ──────────────────────────────────────────
   Remontée à cheval sur la couverture sombre et le blanc qui suit : la carte
   « mord » sur le bandeau, comme un encart posé sur une page imprimée. */
.showcase { position: relative; padding-bottom: 8px; }
.showcase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 132px;
  background: var(--navy);
}
.showcase .container { position: relative; z-index: 1; }
.screenshot {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 32px 64px -32px rgba(10, 22, 40, .40);
}
.app-top {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--navy);
  padding: 11px 18px;
}
.app-top .wordmark { display: inline-flex; align-items: center; flex: none; }
.app-top .wordmark img { height: 14px; width: auto; display: block; }
.app-search {
  width: 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 5px 10px;
  color: #8FA0B8;
  font-size: 11px;
}
.app-search svg { width: 11px; height: 11px; }
.app-top .spacer { flex: 1; }
.app-user { display: flex; align-items: center; gap: 9px; color: #C3CCDA; font-size: 11px; }
.app-user .avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.app-body { display: grid; grid-template-columns: 208px 1fr; }
.app-side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 10px 20px;
}
.side-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 14px 10px 6px;
}
.side-label:first-child { margin-top: 4px; }
.side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.side-item svg { width: 13px; height: 13px; color: var(--faint); }
.side-item.active {
  background: #fff;
  border-color: var(--border);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.side-item.active svg { color: var(--cyan-deep); }
.side-item .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: var(--warn-bg);
  color: var(--warn);
  padding: 1px 6px;
  border-radius: 99px;
}

.app-main { padding: 18px 24px 24px; }
.crumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--faint);
}
.app-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 14px;
}
.app-title-row h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.app-actions { display: flex; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}
.chip svg { width: 10px; height: 10px; color: var(--faint); }
.chip.solid { background: var(--navy); border-color: var(--navy); color: #fff; }

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.kpi {
  padding: 12px 16px;
  background: #fff;
}
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kpi span { font-size: 10.5px; color: var(--muted); }
.kpi .delta {
  font-family: var(--font-mono);
  font-size: 9px;
  margin-left: 6px;
  color: var(--ok);
}
.kpi .delta.down { color: var(--bad); }

.app-table {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.app-table table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.app-table th {
  background: var(--navy);
  color: #fff;
  text-align: left;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
}
.app-table td {
  padding: 8.5px 14px;
  border-top: 1px solid var(--border);
  color: var(--text);
}
.app-table td.ref { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.app-table td.num { font-family: var(--font-mono); font-size: 10.5px; }
.pill {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }
.pill.low  { background: var(--warn-bg); color: var(--warn); }
.pill.out  { background: var(--bad-bg);  color: var(--bad); }
.pill.sync { background: #E3F4F8; color: var(--cyan-deep); }

/* ════════════════════════════════════════════════════════════════════
   COMPOSANTS REPRIS DU LIVRET
   Cinq objets portent toute la maquette imprimée. Ils sont transposés ici
   à l'identique, échelle écran : parcours, liste numérotée, grille modules,
   encadré à barre cyan, tableau de bord.
   ════════════════════════════════════════════════════════════════════ */

/* ── Parcours dépôt → camion → chantier → bureau ──────────────────────
   Le seul schéma du livret. Il dit en une ligne ce que trois paragraphes
   n'arrivent pas à dire : le matériel se déplace, l'application le suit. */
.flow {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 8px 0 0;
}
.flow-step { flex: 1; text-align: center; padding: 0 6px; min-width: 0; }
.flow-ic {
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-ic svg { width: 26px; height: 26px; }
/* Une étape en cyan : le camion, la maille que personne ne tient.
   🔴 Désignée par une CLASSE, pas par un rang. `:nth-of-type(2)` compte les
   éléments de même BALISE, or les flèches sont aussi des <div> : le rang 2
   tombait sur la première flèche et le cyan n'atteignait jamais le camion. */
.flow-step.is-key .flow-ic { background: var(--cyan-deep); }
.flow-txt { min-width: 0; }
.flow-step b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-top: 14px;
  color: var(--ink);
}
.flow-step span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 7px;
}
.flow-arrow {
  flex: none;
  width: 26px;
  height: 1.5px;
  margin-top: 30px;
  background: var(--cyan-line);
  position: relative;
}
.flow-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3.25px;
  border-left: 8px solid var(--cyan-line);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.dark .flow-ic { background: rgba(255,255,255,.10); }
.dark .flow-step.is-key .flow-ic { background: var(--cyan-deep); }
.dark .flow-step b { color: #fff; }
.dark .flow-step span { color: var(--on-navy-2); }
.dark .flow-arrow, .dark .flow-arrow::after { background: rgba(10,179,209,.42); }
.dark .flow-arrow::after { background: none; border-left-color: rgba(10,179,209,.42); }

/* ── Liste numérotée des problèmes ────────────────────────────────────
   Numéro cyan lourd, filet fin, rien d'autre. Pas de carte, pas d'ombre :
   sur l'imprimé le filet suffit à séparer, et il suffit ici aussi. */
.pains { display: flex; flex-direction: column; }
.pain {
  display: flex;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
  align-items: flex-start;
}
.pain:first-child { border-top: none; padding-top: 6px; }
.pain-n {
  flex: none;
  width: 52px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cyan-deep);
  font-variant-numeric: tabular-nums;
}
.pain h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 7px; }
/* Sans borne, la ligne court sur les 1 200 px du conteneur : ~150 signes,
   soit le double de ce que l'œil suit sans se perdre en fin de ligne. */
.pain p { font-size: 15px; line-height: 1.62; color: var(--muted); max-width: 76ch; }
.dark .pain { border-top-color: rgba(255,255,255,.12); }
.dark .pain-n { color: var(--cyan); }
.dark .pain p { color: var(--on-navy-2); }

/* ── Grille de modules ────────────────────────────────────────────────
   Filet éditorial en tête de bloc, pas de carte. La règle du livret :
   ce qui est déjà séparé par un blanc n'a pas besoin d'être encadré. */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 44px; }
.mod { border-top: 2px solid var(--navy); padding-top: 20px; }
.mod svg { width: 24px; height: 24px; color: var(--cyan-deep); margin-bottom: 16px; display: block; }
.mod b {
  display: block;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.mod span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 9px; }
.dark .mod { border-top-color: rgba(255,255,255,.34); }
.dark .mod svg { color: var(--cyan); }
.dark .mod b { color: #fff; }
.dark .mod span { color: var(--on-navy-2); }

/* ── Encadré à barre cyan ─────────────────────────────────────────────
   Le « pavé » qui ferme chaque page du livret : une phrase qui récapitule.
   ⚠ Volontairement distinct de `.callout`, qui appartient aux pages
   juridiques et a une toute autre valeur (avertissement dans la prose).
   Fusionner les deux casserait les six documents légaux. */
.pull {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: 32px 36px 34px 42px;
  overflow: hidden;
  border-radius: 2px;
}
.pull::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--cyan);
}
.pull b {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.022em;
  color: #fff;
}
.pull span { display: block; font-size: 15.5px; line-height: 1.6; color: var(--on-navy-2); margin-top: 12px; }
.pull.on-dark { background: rgba(255,255,255,.06); }
/* Pavé cyan : uniquement la dernière page du livret, uniquement l'appel final */
.pull.cyan { background: var(--cyan-deep); border-radius: 12px; padding: 40px 44px 44px; }
.pull.cyan::before { display: none; }
.pull.cyan span { color: rgba(255,255,255,.92); }

/* ── Tableau de bord (illustration) ───────────────────────────────── */
.dash { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.dash-head {
  background: var(--navy);
  padding: 15px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.dash-head b {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.dash-head i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dash-head i::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.dash-kpis { display: flex; border-bottom: 1px solid var(--border); }
.dash-kpi { flex: 1; padding: 20px 22px; border-left: 1px solid var(--border); min-width: 0; }
.dash-kpi:first-child { border-left: none; }
.dash-kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.dash-kpi:nth-child(2) b { color: var(--cyan-deep); }
.dash-kpi span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 9px;
}
/* 🔴 L'histogramme REMPLIT sa carte au lieu d'avoir une hauteur fixe. Les deux
   panneaux de la maquette sont des cases de grille, donc étirés à la même
   hauteur : c'est la répartition (5 lignes) qui la fixe. Avec `height: 118px`,
   la carte du graphique gardait 23 px de vide en bas et la plus haute barre ne
   montait qu'à 86 px — une carte à moitié vide. En `flex: 1`, le graphique
   suit la hauteur de la rangée, quel que soit le nombre de lignes en face. */
.bars { display: flex; align-items: flex-end; gap: 12px; flex: 1; min-height: 104px; padding: 16px 22px 0; }
.bars i { flex: 1; display: block; background: var(--cyan-pale); border-radius: 4px 4px 0 0; }
.bars i.on { background: var(--cyan-deep); }
.days {
  display: flex;
  gap: 12px;
  padding: 10px 22px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
}
.days span { flex: 1; text-align: center; }

/* ── Bandeau sombre illustré (section pleine largeur) ─────────────── */
.band { position: relative; overflow: hidden; isolation: isolate; padding: 104px 0; }
/* La photo occupe une BANDE en haut de section, pas toute sa hauteur.
   Étirée sur 1 000 px, elle reste perceptible derrière chaque paragraphe et
   concurrence le texte ; le livret la borne à un tiers de page pour la même
   raison. Le fondu se referme sur --navy à 100 %, donc exactement sur l'aplat
   qui prend le relais en dessous : aucune couture visible. */
.band .photo { inset: 0 0 auto; height: 520px; }
.band .photo .fade {
  background: linear-gradient(180deg,
    rgba(10,22,40,.52) 0%,
    rgba(10,22,40,.38) 22%,
    rgba(10,22,40,.62) 54%,
    rgba(10,22,40,.90) 82%,
    var(--navy) 100%);
}

/* Sur fond sombre, le chapeau de section doit remonter en clair : la règle
   générique `.block-head p` pointe sur --muted, illisible sur bleu nuit. */
.dark .block-head p, .on-navy .block-head p { color: var(--on-navy); }
.dark .block-head h2, .on-navy .block-head h2 { color: #fff; }

/* ── Bandeau métriques ────────────────────────────────────────────── */
.metrics { padding: 88px 0 0; }
.metrics .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.metric { padding: 32px 28px 8px 0; }
.metric + .metric { padding-left: 28px; border-left: 1px solid var(--border); }
.metric b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.metric span { font-size: 14px; color: var(--muted); }

/* ── Sections génériques ──────────────────────────────────────────── */
section.block { padding: 120px 0 0; }
.block-head { max-width: 720px; margin-bottom: 64px; }
.block-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.block-head p { margin-top: 18px; font-size: 17px; color: var(--muted); max-width: 600px; }

/* ── Index des capacités (grille numérotée) ───────────────────────── */
.capabilities .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
}
.cap {
  border-top: 2px solid var(--navy);
  padding: 26px 0 40px;
}
.cap .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-deep);
  display: block;
  margin-bottom: 14px;
}
.cap h3 {
  font-size: 18.5px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.cap p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }

/* Carte capacité cliquable */
a.cap { transition: border-color .15s ease; }
a.cap:hover { border-top-color: var(--cyan-deep); }
a.cap:hover h3 { color: var(--cyan-deep); }
a.cap h3 { transition: color .15s ease; }

/* ── Blocs d'approfondissement ────────────────────────────────────── */
.dive {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 80px;
  align-items: center;
  padding: 110px 0 0;
}
.dive.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.dive.flip .dive-copy { order: 2; }
.dive h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 18px; }
.dive p { color: var(--muted); font-size: 16px; }
.dive ul {
  margin-top: 26px;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.dive li {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text);
}
.dive li:last-child { border-bottom: 1px solid var(--border); }
.dive li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  background: var(--cyan);
}

/* Panneaux UI des blocs produit */
/* ── Panneau applicatif ───────────────────────────────────────────────
   🔴 Refait le 2026-08-09 : « les screens des articles, je trouve ça moche et
   mal fait ». Le grief était juste. Trois défauts, tous de fabrication :
   1. c'était une CARTE, pas un écran — un cadre blanc avec un titre noir ne
      ressemble à aucun logiciel ; il lui manquait la barre de fenêtre.
   2. le corps de texte descendait à 10,5 px pour la ligne secondaire, ce qui
      donne un pavé gris illisible au lieu d'une information.
   3. les quantités flottaient au bout de lignes de longueurs différentes,
      sans colonne : l'œil n'avait aucun repère vertical.
   La barre bleu nuit reprend celle de la fenêtre d'application de l'accueil :
   les deux maquettes se lisent enfin comme le même produit. */
.ui-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 28px 56px -30px rgba(16, 24, 40, .30);
}
.ui-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: var(--navy);
}
.ui-head b {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.ui-head .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: #8FA9C2;
  white-space: nowrap;
  flex: none;
}
.ui-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
}
.ui-row:last-of-type { border-bottom: none; }
.ui-row .grow { flex: 1; min-width: 0; }
.ui-row .name { font-weight: 600; color: var(--ink); display: block; letter-spacing: -0.01em; }
.ui-row .sub { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* Colonne de droite de largeur FIXE : c'est elle qui donne à la maquette son
   alignement vertical, donc son air de tableau plutôt que de liste. */
.ui-row .qty {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  text-align: right;
  flex: none;
  min-width: 52px;
  font-variant-numeric: tabular-nums;
}
.ui-row .pill { flex: none; min-width: 86px; text-align: center; }
.conf {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ok);
  background: var(--ok-bg);
  border-radius: 4px;
  padding: 2px 6px;
}
.conf.mid { color: var(--warn); background: var(--warn-bg); }
.ui-foot {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.ui-foot .btn { height: 34px; font-size: 12.5px; padding: 0 15px; border-radius: 6px; }
/* Indice de confiance de la lecture : c'est une donnée de l'écran, elle se
   range dans la même colonne que les quantités. */
.ui-row .conf { flex: none; min-width: 44px; text-align: right; }

.fillbar { width: 130px; }
.fillbar .lbl {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--faint);
  margin-bottom: 4px;
}
.fillbar .bar { height: 4px; background: var(--surface); border-radius: 99px; overflow: hidden; }
.fillbar .bar i { display: block; height: 100%; background: var(--cyan); border-radius: 99px; }
.fillbar.low .bar i { background: #D6820F; }

/* ── Manifeste ────────────────────────────────────────────────────── */
.manifesto { margin-top: 130px; background: var(--surface); padding: 110px 0; }
.manifesto p {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 940px;
}
.manifesto p em { font-style: normal; color: var(--cyan-deep); }
.manifesto .sig {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Sécurité ─────────────────────────────────────────────────────── */
.security { padding: 120px 0 0; }
/* Quatre colonnes par défaut — c'est le compte des pages Produit et Sécurité,
   qui alignent quatre piliers. `.three` est pour l'accueil, qui en présente
   six : en quatre colonnes, la seconde rangée n'en aurait que deux. */
.security .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 40px;
}
.security .grid.three { grid-template-columns: repeat(3, 1fr); gap: 36px 44px; }
.sec {
  border-top: 2px solid var(--navy);
  padding: 22px 0 20px;
}
.sec svg { width: 24px; height: 24px; color: var(--cyan-deep); margin-bottom: 16px; }
.sec h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 9px; }
.sec p { font-size: 14px; color: var(--muted); line-height: 1.62; }
.dark .sec, .on-navy .sec { border-top-color: rgba(255,255,255,.34); }
.dark .sec svg, .on-navy .sec svg { color: var(--cyan); }
.dark .sec p, .on-navy .sec p { color: var(--on-navy-2); }

/* ── CTA final ────────────────────────────────────────────────────── */
.cta {
  margin-top: 130px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  padding: 104px 0;
}
.cta .container { position: relative; z-index: 2; }
/* Même règle que le bandeau : une bande photo en tête, puis l'aplat.
   Le voile est ici plus léger (.52) que sur la couverture — le pavé est court,
   la photo n'a que ~300 px pour exister ; avec le fondu de la couverture elle
   se réduisait à un timbre-poste dans l'angle. */
.cta .photo { inset: 0 0 auto; height: 58%; }
.cta .photo .fade {
  background: linear-gradient(180deg,
    rgba(10,22,40,.52) 0%,
    rgba(10,22,40,.66) 34%,
    rgba(10,22,40,.88) 70%,
    var(--navy) 100%);
}
.cta .inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
/* 🔴 Portée restreinte à `.inner` — À NE PAS ÉLARGIR.
   En `.cta img`, la règle attrapait aussi le <img> de `.photo` (frère de
   `.inner`, pas descendant) : même spécificité que `.photo img`, mais déclarée
   plus bas, donc gagnante. La photo du pavé final était ramenée à 34 px de
   haut — un timbre-poste dans l'angle supérieur gauche, longtemps pris pour
   un défaut de dégradé. */
.cta .inner img { height: 34px; width: auto; margin-bottom: 30px; }
.cta h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); max-width: 620px; }
.cta p { margin-top: 18px; color: var(--on-navy); font-size: 16.5px; line-height: 1.6; max-width: 500px; }
.cta .actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Coordonnées en pied de pavé cyan, comme la dernière page du livret */
.cta-lines { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.cta-lines a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.cta-lines a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta-lines svg { width: 18px; height: 18px; flex: none; opacity: .85; }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact { padding: 120px 0; }
.contact .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 90px;
}
.contact h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 18px; }
.contact .intro { color: var(--muted); font-size: 16px; margin-bottom: 44px; }
.c-line {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
}
.c-line:last-of-type { border-bottom: 1px solid var(--border); }
.c-line .k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  padding-top: 3px;
}
.c-line .v { color: var(--ink); font-weight: 500; }
.c-line .v a { color: var(--cyan-deep); }

.contact form { display: flex; flex-direction: column; gap: 22px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(8, 146, 171, .12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact form .btn { align-self: flex-start; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: -8px; }

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 72px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: 48px;
  padding-bottom: 56px;
}
.site-footer .brand { font-size: 19px; }
.site-footer .tagline {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 280px;
  line-height: 1.7;
}
.site-footer h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.site-footer ul a { font-size: 14px; color: var(--text); }
.site-footer ul a:hover { color: var(--ink); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
}
.footer-bottom .legal { display: flex; gap: 24px; }
.footer-bottom .legal a:hover { color: var(--text); }

/* ════════════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES — ajouts v2 (site multi-pages)
   Même système typographique : hairlines, mono pour les métadonnées,
   cyan par touches. Rien de décoratif.
   ════════════════════════════════════════════════════════════════════ */

/* ── Accessibilité : lien d'évitement ─────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── État actif de navigation ─────────────────────────────────────── */
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--cyan);
}
.mobile-menu a[aria-current="page"] { color: var(--cyan-deep); }

/* ── En-tête de page intérieure ───────────────────────────────────── */
.page-hero {
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.page-hero h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  max-width: 880px;
}
.page-hero .lead {
  margin-top: 22px;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 660px;
}
.page-hero.on-navy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 76px 0 72px;
  background: linear-gradient(168deg, #0D1C31 0%, var(--navy) 28%);
  border-bottom-color: var(--navy-3);
}
.page-hero.on-navy > .container { position: relative; z-index: 2; }
.page-hero.on-navy h1 { color: #fff; }
.page-hero.on-navy .lead { color: var(--on-navy); }
.page-hero.on-navy .crumbs a { color: #94A3BC; }
.page-hero.on-navy .crumbs a:hover { color: #fff; }
.page-hero.on-navy .crumbs span, .page-hero.on-navy .crumbs .sep { color: #6D7E99; }
.page-hero.on-navy .crumbs [aria-current="page"] { color: #fff; }
/* En-tête illustré : même fondu que la couverture, arrêté sur le bleu nuit */
.page-hero.on-navy .photo .fade {
  background: linear-gradient(180deg,
    rgba(10,22,40,.58) 0%,
    rgba(10,22,40,.44) 30%,
    rgba(10,22,40,.74) 66%,
    var(--navy) 100%);
}

/* ── Fil d'Ariane ─────────────────────────────────────────────────── */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  /* Bas de casse : « ACCUEIL / CONTACT » en petites capitales espacées était
     le même micro-titre que partout ailleurs. Un fil d'Ariane se lit mieux
     dans la casse des pages qu'il désigne. */
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 26px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { color: var(--border); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ── Bloc de métadonnées documentaires ────────────────────────────── */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 34px;
  background: var(--surface);
}
.doc-meta div {
  flex: 1 1 190px;
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.doc-meta div:last-child { border-right: none; }
.doc-meta dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.doc-meta dd { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ── Gabarit document juridique : sommaire + prose ────────────────── */
.doc-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 72px;
  padding: 72px 0 110px;
  align-items: start;
}
.toc { position: sticky; top: 100px; }
.toc h2 {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.toc li:first-child a { border-top: none; }
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--muted);
  padding-top: 2px;
  flex: none;
}
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--cyan-ink); font-weight: 700; }
.toc a.active::before { color: var(--cyan-ink); }

/* ── Prose juridique ──────────────────────────────────────────────── */
.prose { max-width: 760px; }
.prose > section { scroll-margin-top: 100px; }
.prose h2 {
  font-size: 25px;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  padding-top: 8px;
}
.prose section + section { margin-top: 56px; border-top: 1px solid var(--border); padding-top: 48px; }
.prose h2 .idx {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--cyan-deep);
  letter-spacing: 0;
  margin-right: 12px;
}
.prose h3 {
  font-size: 16.5px;
  letter-spacing: -0.015em;
  margin: 30px 0 10px;
}
.prose p { font-size: 15.5px; line-height: 1.75; color: var(--text); margin-bottom: 14px; }
.prose p:last-child, .prose ul:last-child, .prose ol:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--cyan); }
.prose ul, .prose ol { margin: 4px 0 16px; padding-left: 0; list-style: none; }
.prose ol { counter-reset: pl; }
.prose li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 9px;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  background: var(--cyan);
}
.prose ol > li { counter-increment: pl; }
.prose ol > li::before {
  content: counter(pl) ".";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--cyan-deep);
}
.prose li ul { margin-top: 8px; }

/* Définitions */
.prose dl { margin: 4px 0 16px; }
.prose dt { font-weight: 600; color: var(--ink); font-size: 15px; margin-top: 14px; }
.prose dd { font-size: 15px; line-height: 1.7; color: var(--text); }

/* Tableaux juridiques */
.table-wrap { overflow-x: auto; margin: 18px 0 20px; border: 1px solid var(--border); border-radius: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 540px; }
.prose thead th {
  background: var(--surface);
  text-align: left;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.prose tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.6;
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody td:first-child { color: var(--ink); font-weight: 500; }

/* Encadrés */
.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  padding: 18px 22px;
  margin: 20px 0;
}
.callout p { font-size: 14.5px; margin-bottom: 8px; }
.callout p:last-child { margin-bottom: 0; }
/* 🔴 Même traitement que `.label` : plus de capitales cyan très espacées.
   Le micro-titre coloré en petites capitales est l'un des marqueurs « landing
   page » que l'utilisateur relève à chaque passe. Ici il sert seulement à
   nommer l'encadré — un intitulé bas de casse le fait aussi bien. */
.callout .callout-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}
.callout.todo { border-left-color: #D6820F; background: var(--warn-bg); }
.callout.todo .callout-title { color: var(--warn); }
.callout.todo p { color: #6B4B12; }

/* Marqueur « à compléter » en ligne */
.fill {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px dashed #E0A94A;
  border-radius: 4px;
  padding: 1px 7px;
  /* Insécable pour les valeurs courtes (« 3 mois ? »), qu'on ne veut pas voir
     coupées en fin de ligne — mais AUTORISÉ à revenir à la ligne dès que le
     marqueur dépasse la colonne. Certains marqueurs des CGV font près de
     500 px : en `nowrap` strict ils poussaient toute la page à 513 px de large
     sur mobile. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
  display: inline-block;
  vertical-align: baseline;
}

/* Pied de document */
.doc-foot {
  margin-top: 56px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.doc-foot a { color: var(--cyan-deep); }

/* Navigation entre documents légaux */
.doc-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.doc-nav a {
  padding: 26px 26px 26px 0;
  border-right: 1px solid var(--border);
}
.doc-nav a:last-child { border-right: none; }
.doc-nav .k {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.doc-nav .t {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}
.doc-nav .d { font-size: 13px; color: var(--muted); line-height: 1.6; }
.doc-nav a:hover .t { color: var(--cyan-deep); }

/* ── Bloc « index légal » (page /legal) ───────────────────────────── */
.legal-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; padding-bottom: 40px; }
.legal-index a {
  border-top: 1px solid var(--border);
  padding: 26px 0 30px;
  display: block;
}
.legal-index .k {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-deep);
  display: block;
  margin-bottom: 12px;
}
.legal-index h3 { font-size: 18px; letter-spacing: -0.02em; margin-bottom: 8px; }
.legal-index p { font-size: 14px; color: var(--muted); line-height: 1.65; }
.legal-index a:hover h3 { color: var(--cyan-deep); }

/* ── FAQ (accordéon natif, sans JS) ───────────────────────────────── */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 30px;
  width: 12px; height: 2px;
  background: var(--faint);
}
.faq summary::before {
  content: "";
  position: absolute;
  right: 11px; top: 25px;
  width: 2px; height: 12px;
  background: var(--faint);
  transition: transform .18s ease, opacity .18s ease;
}
.faq details[open] summary::before { transform: rotate(90deg); opacity: 0; }
/* `--cyan-deep` ne fait que 3,68:1 sur blanc : correct pour un grand titre,
   insuffisant pour une question de 18 px en 600, qui n'atteint pas le seuil
   « grand texte » (18,66 px en gras). */
.faq details[open] summary { color: var(--cyan-ink); }
.faq details[open] summary::after, .faq details[open] summary::before { background: var(--cyan); }
.faq .answer { padding: 0 60px 26px 0; }
.faq .answer p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin-bottom: 12px; }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ── Étapes numérotées ────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.step { border-top: 2px solid var(--navy); padding: 22px 0 34px; }
.step .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-deep);
  display: block;
  margin-bottom: 14px;
}
.step h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 9px; }
.step p { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* ── Tableau comparatif « avant / après » ─────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.compare > div { padding: 30px 32px 34px; }
.compare .before { background: var(--surface); border-right: 1px solid var(--border); }
/* Intitulés en bas de casse : les petites capitales colorées très espacées
   sont le marqueur « landing page » retiré partout ailleurs sur le site. */
.compare h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 20px;
}
.compare .before h3 { color: var(--muted); }
.compare .after h3 { color: var(--cyan-deep); }
.compare ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.compare li { font-size: 14.5px; line-height: 1.6; padding-left: 24px; position: relative; }
.compare .before li { color: var(--muted); }
.compare .after li { color: var(--text); }
.compare .before li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 11px; height: 1px; background: var(--faint);
}
.compare .after li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 11px; height: 6px;
  border-left: 1.6px solid var(--cyan);
  border-bottom: 1.6px solid var(--cyan);
  transform: rotate(-45deg);
}

/* ── Formulaire : états, erreurs, succès ──────────────────────────── */
.field .err {
  display: none;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--bad);
}
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid textarea { border-color: var(--bad); }
.field.invalid input:focus, .field.invalid textarea:focus {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .1);
}
.field .hint { margin-top: 7px; font-size: 12.5px; color: var(--muted); }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.consent input {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  accent-color: var(--cyan-deep);
  cursor: pointer;
}
.consent a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 2px; }
.consent.invalid { color: var(--bad); }
.consent.invalid a { color: var(--bad); }

.form-status {
  display: none;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  padding: 20px 24px;
}
.form-status.show { display: block; }
.form-status h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 8px; }
.form-status p { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.form-status .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-status .btn { height: 40px; font-size: 13.5px; padding: 0 18px; }
.form-status .copied { font-size: 13px; font-weight: 600; color: var(--ok); display: none; }
.form-status .copied.show { display: inline; }

.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ── Bandeau de contact secondaire ────────────────────────────────── */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.contact-card { border-top: 1px solid var(--border); padding: 26px 0 30px; }
.contact-card .k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  display: block;
  margin-bottom: 12px;
}
.contact-card h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 8px; }
.contact-card p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }

/* ── Page 404 ─────────────────────────────────────────────────────── */
.notfound { padding: 120px 0 130px; text-align: left; }
/* « Erreur 404 » et non « E R R E U R  4 0 4 » : le libellé est repassé en
   bas de casse, la chasse très ouverte n'a plus lieu d'être. */
.notfound .code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--cyan-deep);
  display: block;
  margin-bottom: 22px;
}
.notfound h1 { font-size: clamp(34px, 4.6vw, 54px); max-width: 640px; }
.notfound p { margin-top: 22px; font-size: 17px; color: var(--muted); max-width: 540px; }
.notfound .hero-actions { margin-top: 36px; }
.notfound .links { margin-top: 60px; border-top: 1px solid var(--border); padding-top: 26px; }
.notfound .links h2 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 16px;
}
.notfound .links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 32px; }
.notfound .links a { font-size: 14.5px; font-weight: 500; color: var(--text); }
.notfound .links a:hover { color: var(--cyan-deep); }

/* ── Retour en haut ───────────────────────────────────────────────── */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  box-shadow: 0 8px 24px -12px rgba(16,24,40,.4);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--faint); }
.to-top svg { width: 17px; height: 17px; }

/* ── Séparateur de section sobre ──────────────────────────────────── */
.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* Fragment technique en ligne (nom de domaine, en-tête, identifiant) : la
   chasse fixe signale que la chaîne se lit caractère par caractère. */
.mono {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* ── Pied de page : colonne légale ────────────────────────────────── */
.footer-grid { grid-template-columns: minmax(0, 3.4fr) repeat(4, minmax(0, 1.6fr)); }
.footer-bottom .legal { flex-wrap: wrap; gap: 12px 24px; }

/* ── Responsive des ajouts ────────────────────────────────────────── */
@media (max-width: 1060px) {
  /* 🔴 `minmax(0, 1fr)` et non `1fr` — le `minmax(0, …)` de la règle de base a
     été perdu en recopiant la déclaration ici. Une piste `1fr` prend pour
     plancher le min-content de son contenu ; `.prose` contient des tableaux à
     `min-width: 540px`, et même enfermés dans un conteneur défilant ils
     imposaient une piste de 542 px. Résultat mesuré : 172 px de débordement
     horizontal de TOUTE la page à 390 px, sur les cinq documents à tableaux. */
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 0 88px; }
  .toc {
    position: static;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 22px 12px;
    background: var(--surface);
  }
  .toc ol { columns: 2; column-gap: 32px; }
  .toc li { break-inside: avoid; }
  .steps, .steps.three { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .contact-cards { grid-template-columns: 1fr; }
  .legal-index { grid-template-columns: 1fr; gap: 0; }
  .doc-nav { grid-template-columns: 1fr; }
  .doc-nav a { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; }
  .doc-nav a:last-child { border-bottom: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .page-hero { padding: 44px 0 40px; }
  .doc-meta div { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .doc-meta div:last-child { border-bottom: none; }
  .toc ol { columns: 1; }
  .steps, .steps.three { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare .before { border-right: none; border-bottom: 1px solid var(--border); }
  .prose h2 { font-size: 22px; }
  .faq summary { font-size: 16px; padding-right: 36px; }
  .faq .answer { padding-right: 0; }
  .to-top { right: 16px; bottom: 16px; }
}

/* ── Impression : les documents légaux doivent sortir propres ─────── */
@media print {
  .site-header, .mobile-menu, .to-top, .doc-nav, .cta, .site-footer .footer-grid, .skip-link { display: none !important; }
  .toc { display: none; }
  .doc-layout { grid-template-columns: 1fr; padding: 0; }
  .prose { max-width: none; }
  body { font-size: 11pt; color: #000; }
  .prose section + section { break-before: auto; }
  a { color: #000 !important; text-decoration: none !important; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .nav-links, .nav-right { display: none; }
  .burger { display: flex; }
  section.block { padding: 88px 0 0; }
  .capabilities .grid { grid-template-columns: 1fr 1fr; }
  /* Le modificateur .three doit etre repris ici : sa specificite (0,3,0)
     depasse celle du selecteur responsive (0,2,0) et gagnait donc dans la
     media query, figeant trois colonnes jusqu a 390 px. */
  .security .grid, .security .grid.three { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .dive, .dive.flip { grid-template-columns: 1fr; gap: 44px; padding-top: 88px; }
  .dive.flip .dive-copy { order: 0; }
  .contact .wrap { grid-template-columns: 1fr; gap: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .metrics .grid { grid-template-columns: 1fr 1fr; }
  .metric, .metric + .metric { padding: 28px 20px 8px 0; }
  .metric:nth-child(odd) { border-left: none; padding-left: 0; }
  .metric:nth-child(even) { padding-left: 24px; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* ── Responsive des composants repris du livret ───────────────────── */
@media (max-width: 1060px) {
  .mods { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .flow-ic { width: 54px; height: 54px; }
  .flow-ic svg { width: 22px; height: 22px; }
  .flow-arrow { width: 16px; margin-top: 26px; }
  .flow-step span { display: none; }
  .pull { padding: 28px 28px 30px 34px; }
  .pull b { font-size: 19px; }
}

@media (max-width: 720px) {
  .hero { padding: 76px 0 68px; }
  .hero-foot { margin-top: 44px; font-size: 10.5px; letter-spacing: .12em; }
  .showcase::before { height: 84px; }
  .mods { grid-template-columns: 1fr; gap: 28px; }
  /* Le parcours passe en colonne : quatre pastilles alignées sur 320 px
     deviennent illisibles, et les flèches n'ont plus de sens verticalement —
     on les retire plutôt que de les faire pivoter. */
  .flow { flex-direction: column; align-items: stretch; gap: 20px; }
  .flow-step { display: flex; align-items: center; gap: 18px; text-align: left; padding: 0; }
  .flow-txt { flex: 1; }
  .flow-ic { margin: 0; flex: none; }
  .flow-step b { margin-top: 0; }
  .flow-step span { display: block; margin-top: 4px; }
  .flow-arrow { display: none; }
  .pain { gap: 16px; padding: 22px 0; }
  .pain-n { width: 38px; font-size: 23px; }
  .pain h3 { font-size: 17.5px; }
  .dash-kpis { flex-wrap: wrap; }
  .dash-kpi { flex: 1 1 50%; border-top: 1px solid var(--border); }
  .dash-kpi:first-child, .dash-kpi:nth-child(2) { border-top: none; }
  .dash-kpi:nth-child(3) { border-left: none; }
  .dash-kpi b { font-size: 23px; }
  /* `min-height`, pas `height` : l'histogramme reste élastique (voir `.bars`
     plus haut), on ne fait qu'abaisser son plancher et resserrer ses marges. */
  .bars { min-height: 88px; gap: 8px; padding: 14px 16px 0; }
  .days { gap: 8px; padding: 8px 16px 16px; }
  .pull { padding: 26px 22px 28px 28px; }
  .pull b { font-size: 18px; }
  .pull.cyan { padding: 30px 26px 32px; }
  .cta-lines a { font-size: 15px; }
}

@media (max-width: 720px) {
  .app-body { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .app-search { display: none; }
  /* 🔴 `min-width: 0` sur la colonne de contenu. Une piste de grille `1fr` ne
     descend PAS sous la largeur minimale de son contenu, et un tableau à six
     colonnes en impose une confortable : sur téléphone, `.app-main` faisait
     523 px dans un cadre de 335 px. La page ne défilait pas horizontalement
     (le cadre est en `overflow: hidden`), la maquette était simplement
     TRONQUÉE à droite — un écran coupé au milieu d'une colonne. */
  .app-main { min-width: 0; padding: 14px 14px 18px; }
  /* 🔴 Sur téléphone la maquette n'est plus une capture qu'on RÉDUIT, c'est un
     bloc de 335 px : les éléments de décor y coûtent des lignes entières sans
     rien apprendre. Le fil d'Ariane (10 px de mono) et les trois puces
     d'action passaient à la ligne et pesaient 112 px pour la seule rangée de
     titre. On les retire : le titre suffit à dire de quel écran il s'agit. */
  .showcase .crumb { display: none; }
  .app-actions { display: none; }
  .app-title-row { margin: 0 0 12px; }
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 17px; }
  .kpi span { font-size: 10px; line-height: 1.4; }
  /* 🔴 DEUX indicateurs, pas quatre. En 2×2 la bande pesait 205 px à elle
     seule : à 151 px de large, chaque intitulé passe sur trois lignes, donc
     doubler le nombre de cases ne double pas l'information, il double la
     hauteur. On garde les deux premiers, qui portent le montant et le volume ;
     la dotation camion et le délai de réappro sont dits en toutes lettres
     ailleurs dans la page. */
  .kpi:nth-child(n+3) { display: none; }
  .hide-sm { display: none; }
  .capabilities .grid { grid-template-columns: 1fr; }
  .security .grid, .security .grid.three { grid-template-columns: 1fr; }
  .metrics .grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .cta .inner { align-items: flex-start; flex-direction: column; }
  .container { width: calc(100% - 40px); }
}