/* ════════════════════════════════════════════════════════════════════
   ICETEMP — Couche « site de conversion »

   Charge APRÈS style.css, qui reste la base (jetons de couleur, DM Sans,
   grammaire éditoriale reprise du livret A5). Ce fichier ajoute ce qu'un
   site vitrine n'a pas et qu'un site SaaS doit avoir : navigation à menus,
   preuve sociale, parcours en trois temps, cartes bénéfices, pages métiers,
   grille tarifaire lisible, FAQ, bandeaux d'appel à l'action.

   🔴 Séparé volontairement de style.css. La refonte peut être défaite ou
   rejouée en changeant UNE balise <link>, sans toucher à la charte.
   ════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── NAVIGATION À MENUS ───────────────────── */
.nav-links > li { position: relative; }
.nav-links .has-menu > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}
.nav-links .has-menu > button:hover { color: var(--ink); }
.nav-links .has-menu > button svg {
  width: 12px;
  height: 12px;
  transition: transform .18s ease;
}
.nav-links .has-menu[data-open="true"] > button { color: var(--ink); }
.nav-links .has-menu[data-open="true"] > button svg { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  z-index: 70;
  min-width: 300px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 48px -20px rgba(10, 22, 40, .28);
  /* `visibility` en plus de `opacity` : un panneau à opacité nulle reste
     cliquable et intercepte les clics de la page en dessous. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-links .has-menu[data-open="true"] .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mega.wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background .14s ease;
}
.mega a:hover { background: var(--surface); }
.mega a svg { width: 19px; height: 19px; flex: none; color: var(--cyan-deep); margin-top: 2px; }
.mega b {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mega span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 3px; }

/* ───────────────────────────── HERO DE CONVERSION ─────────────────────
   🔴 Hauteur BORNÉE. Le hero d'accueil montait à ~108 px de marge haute pour
   une photo pleine largeur : sur un portable, la promesse et le bouton se
   retrouvaient sous la ligne de flottaison, et la page s'ouvrait sur une
   image. Une photo de décor n'a pas besoin d'un écran entier pour poser le
   contexte — elle doit encadrer le titre, pas le remplacer. */
.hero.dark { padding: 84px 0 68px; }
/* Voile latéral : le fondu générique de `.photo` est vertical, il ne protège
   pas un texte posé à gauche d'une photo d'allée de dépôt, où les néons du
   fond passent juste derrière le chapeau. Ce voile s'éteint à 72 % pour
   laisser la photo intacte du côté de la maquette. */
.hero.dark .photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(6, 14, 33, .74) 0%,
    rgba(6, 14, 33, .50) 40%,
    rgba(6, 14, 33, 0) 72%);
}

.hero-lede {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: center;
}
/* En deux colonnes, le titre ne dispose plus que de ~590 px : la taille du
   hero pleine largeur (jusqu'à 66 px) y casse en trois lignes bancales. */
.hero-lede h1 { font-size: clamp(34px, 3.7vw, 52px); }
.hero-lede .lead { max-width: 560px; }

.hero-trust {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  font-size: 13.5px;
  color: var(--on-navy);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }

/* ⚠ CODE MORT depuis le 2026-08-09 — plus aucune page n'utilise `.device`.
   La maquette de téléphone a été retirée du hero : à 268 px de large elle
   imposait un corps de 10 px, et l'utilisateur l'a jugée « moche et mal
   faite ». Elle est remplacée par la fenêtre d'application pleine largeur
   (`.showcase` / `.screenshot` dans style.css), qui dit la même chose à une
   taille où elle se lit. Conservé au cas où un écran de poche redeviendrait
   utile — mais ALORS il faudra le redessiner, pas le remettre tel quel. */
.device {
  width: 268px;
  margin: 0 auto;
  border-radius: 34px;
  border: 9px solid #16233A;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 36px 70px -28px rgba(0, 0, 0, .6);
}
.device-top {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.device-top b { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.device-top i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: none;
  padding: 0;
  /* Sans cette ligne, « Hors-ligne » se coupe au trait d'union au milieu
     de la pastille — qui devient alors deux fois plus haute que la barre. */
  white-space: nowrap;
  flex: none;
}
.device-body { padding: 14px 14px 18px; }
.device-shot {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
/* Photo EN COULEUR dans la maquette, comme partout ailleurs depuis la refonte :
   la désaturation venait du livret imprimé et n'a pas de raison d'être ici. */
.device-shot img { width: 100%; height: 128px; object-fit: cover; display: block; }
.device-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.device-line:first-of-type { border-top: none; }
.device-line .t { flex: 1; min-width: 0; }
.device-line .t b {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-line .t span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.device-line .q {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.device-ok {
  margin-top: 12px;
  height: 38px;
  border-radius: 9px;
  background: var(--cyan-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ───────────────────────────── BANDEAU DE CONFIANCE ─────────────────── */
.strip { border-bottom: 1px solid var(--border); padding: 34px 0; background: var(--surface); }
.strip .in {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 46px;
  text-align: center;
}
.strip p {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  width: 100%;
}
/* Emplacements de logos clients. Vides et ANNONCÉS comme tels : un site qui
   affiche des logos inventés ment à son visiteur, et le premier prospect qui
   le remarque a raison de partir. */
.logo-slot {
  width: 148px;
  height: 46px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A8B4C4;
  background: #fff;
}

/* ───────────────────────────── BANDEAU DE PREUVE ─────────────────────
   Fusion de l'ancien bandeau de confiance et du bloc de chiffres qui vivait
   800 px plus bas, en pleine hauteur sur fond bleu nuit. Réunis sur une seule
   ligne, ils se lisent en un coup d'œil et rendent 250 px de page.
   Les chiffres restent en corps modeste : un montant en 38 px sur une bande
   d'accroche est exactement la grammaire de landing page qu'on évite ici. */
.proof { border-bottom: 1px solid var(--border); background: var(--surface); padding: 24px 0; }
.proof .in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 44px;
}
.proof p { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.proof ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 34px; }
.proof li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
}
.proof li b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────── COMMENT ÇA MARCHE ──────────────────────
   🔴 Ni pastille ronde, ni numéro 01/02/03. La séquence est portée par
   l'ordre de lecture et par les titres eux-mêmes (« Vous photographiez »,
   « Vos équipes déclarent », « Vous pilotez ») ; la numéroter en plus était
   redondant, et la pastille numérotée est l'autre marqueur « IA » du projet.
   Ce qui structure à la place : un filet fort en tête de colonne. */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.how-step { position: relative; border-top: 2px solid var(--navy); padding-top: 24px; }
.how-step h3 { font-size: 21px; letter-spacing: -0.022em; margin-bottom: 12px; }
.how-step p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.how-step ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.how-step li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.how-step li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--cyan-deep);
  border-bottom: 2px solid var(--cyan-deep);
  transform: rotate(-45deg);
}

/* ───────────────────────────── CARTES ───────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card {
  display: block;
  border: 1px solid var(--border);
  /* Rayon réduit : les grands arrondis appartiennent à la grammaire de la
     landing page. Un angle presque droit lit « outil professionnel ». */
  border-radius: 5px;
  padding: 28px 26px 30px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
a.card:hover {
  border-color: #B9CFDA;
  box-shadow: 0 14px 30px -22px rgba(10, 22, 40, .28);
}
/* Icône NUE, sans pastille teintée derrière : la vignette de couleur arrondie
   est un marqueur « landing page » de plus, et l'icône se lit aussi bien
   sans elle. */
.card .ic { color: var(--cyan-deep); margin-bottom: 18px; }
.card .ic svg { width: 26px; height: 26px; display: block; }
.card h3 { font-size: 18.5px; letter-spacing: -0.022em; margin-bottom: 10px; }
.card p { font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.card .more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan-ink);
}
.card .more svg { width: 14px; height: 14px; transition: transform .18s ease; }
a.card:hover .more svg { transform: translateX(3px); }

/* ───────────────────────────── TÉMOIGNAGES ─────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.quote {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 30px 28px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.quote .mark { font-size: 15px; color: var(--cyan-deep); margin-bottom: 14px; }
.quote .mark svg { width: 26px; height: 22px; }
.quote blockquote { font-size: 16px; line-height: 1.62; color: var(--text); flex: 1; }
.quote figcaption {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.5;
}
.quote figcaption b { display: block; color: var(--ink); font-weight: 700; }
.quote figcaption span { color: var(--muted); }
/* Carte de témoignage à compléter — même convention que les marqueurs
   `.fill` des pages juridiques : visible, datée, impossible à publier par
   inadvertance en la prenant pour du contenu réel. */
.quote.todo { border-style: dashed; background: #FFFCF5; border-color: #E8CE9A; }
.quote.todo blockquote { color: #8A6D33; font-style: italic; }
.quote.todo .mark { color: #C79A3E; }

/* ───────────────────────────── CHIFFRES ────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { padding: 6px 24px; border-left: 1px solid rgba(255,255,255,.14); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.9vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--on-navy); }
/* 🔴 Marqueur « à compléter » posé sur fond sombre.
   `.stat span` (0,2,0) l'emportait sur `.fill` (0,1,0) et lui imposait le bleu
   clair prévu pour le fond bleu nuit — donc du texte pâle sur le fond crème du
   marqueur : 1,7:1, illisible. On lui donne ici une forme propre au fond
   sombre, au lieu de transposer celle des pages juridiques. */
.stat .fill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: #8FA9C2;
  background: none;
  border: 1px dashed rgba(255, 255, 255, .28);
  border-radius: 4px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* ───────────────────────────── TARIFS ──────────────────────────────── */
.switch {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
}
.switch button {
  border: 0;
  border-left: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  background: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.switch button:first-child { border-left: 0; }
.switch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--cyan-deep);
}
.switch .save {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.switch button[aria-pressed="true"] .save { color: #9FB4CB; }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.plan {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 30px 26px 32px;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan.best { border-color: var(--navy); border-width: 2px; padding: 29px 25px 31px; }
.plan .tag {
  position: absolute;
  top: -11px;
  left: 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  background: #fff;
  border-radius: 0;
  padding: 0 10px;
}
/* Palier de licences : information, pas décoration. Bas de casse et gris —
   les capitales colorées très espacées sont le même marqueur que l'intitulé
   de section, en plus petit. */
.plan .scale {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.plan h3 { font-size: 20px; letter-spacing: -0.022em; margin: 10px 0 4px; }
.plan .who { font-size: 13.5px; line-height: 1.5; color: var(--muted); min-height: 40px; }
.plan .amount {
  margin: 22px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.plan .amount b {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan .amount i { font-style: normal; font-size: 19px; font-weight: 800; color: var(--ink); }
.plan .per { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.plan .btn { margin-top: 24px; width: 100%; justify-content: center; }
.plan .note { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }

.incl { list-style: none; display: grid; gap: 13px; }
.incl li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--text); }
.incl li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 13px;
  height: 7px;
  border-left: 2.2px solid var(--cyan-deep);
  border-bottom: 2.2px solid var(--cyan-deep);
  transform: rotate(-45deg);
}
.incl.two { grid-template-columns: 1fr 1fr; gap: 13px 40px; }
.incl.on-dark li { color: var(--on-navy); }
.incl.on-dark li::before { border-color: var(--cyan); }

/* ───────────────────────────── MÉTIERS ─────────────────────────────── */
.trades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trade {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px 24px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
a.trade:hover { border-color: #CFE6EE; box-shadow: 0 14px 30px -20px rgba(10,22,40,.3); }
.trade svg { width: 22px; height: 22px; color: var(--cyan-deep); flex: none; margin-top: 2px; }
.trade b {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.trade span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 6px; }

/* ───────────────────────────── TABLEAU DE BORD DE LA MAQUETTE ───────
   Deux panneaux côte à côte dans la fenêtre d'application de l'accueil : un
   histogramme et une répartition. C'est ce qu'un dirigeant veut voir en
   premier — pas une liste d'articles, qui montre la saisie et non le résultat. */
/* 🔴 La répartition porte un PLANCHER, l'histogramme prend le reste. En
   `1.3fr .7fr`, juste au-dessus du point de rupture la carte de droite tombait
   à 254 px et sa piste à 52 px — plus étroite que les 62 px qu'on venait de
   corriger. Un histogramme est élastique, une ligne « libellé + barre + valeur »
   ne l'est pas : c'est donc elle qui pose sa largeur minimale (280 px), et le
   graphique qui absorbe le reste. Plus de ratio à réajuster à chaque largeur. */
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 14px; margin-top: 14px; }
/* Colonne flex : c'est ce qui permet à `.bars` de prendre la hauteur restante
   de la carte (voir le commentaire sur `.bars` dans style.css). */
.app-card { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.app-card .hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px 0;
}
.app-card .hd b {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.app-card .hd i { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--faint); }

/* Répartition : libellé, barre, valeur.
   🔴 C'est le LIBELLÉ qui est fixe et la BARRE qui est élastique, pas
   l'inverse. Avec `1fr 62px 32px`, le libellé absorbait toute la largeur
   disponible et la piste restait à 62 px dans une carte de 325 : cinq traits
   de 5 px perdus dans du vide, qui ne se comparaient plus entre eux. Un
   libellé tient en 116 px à 11,5 px de corps ; tout le reste va à la piste,
   qui passe ainsi de 62 à ~125 px. Les trois colonnes restent alignées d'une
   ligne à l'autre, c'était le seul but de la largeur fixe d'origine. */
.brk { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 13px; }
.brk-row {
  display: grid;
  /* Le libellé plafonne à 116 px mais peut se réduire (il s'abrège alors en
     points de suspension), la piste garde un plancher de 48 px : si la carte
     devient étroite, c'est le texte qui cède, jamais la barre ni la valeur —
     celle-ci sortait de la carte dans la bande 721-1060 px. */
  grid-template-columns: minmax(0, 116px) minmax(48px, 1fr) 32px;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text);
}
.brk-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brk-row .b { height: 6px; background: var(--surface); border-radius: 99px; overflow: hidden; }
.brk-row .b i { display: block; height: 100%; background: var(--cyan-deep); border-radius: 99px; }
.brk-row .v {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Bandeau d'alertes : la seule partie du tableau de bord qui appelle une
   action, donc la seule sur fond teinté. */
.app-alerts { display: flex; gap: 10px; margin-top: 14px; }
.app-alert {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan-deep);
  border-radius: 6px;
  background: var(--surface);
  padding: 11px 14px;
}
.app-alert.warn { border-left-color: #D6820F; }
.app-alert.bad { border-left-color: var(--bad); }
.app-alert b {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.app-alert span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--muted); }

/* ───────────────────────────── VIGNETTES MÉTIER ─────────────────────
   🔴 Réponse au « les photos sont trop grosses ». Deux photos en 5/4 sur une
   demi-largeur, c'est ~640 px de haut chacune pour UNE phrase. Six vignettes
   au même cadrage 3/2 tiennent dans moins de hauteur que ces deux blocs,
   montrent six métiers au lieu de deux idées, et chacune est une porte
   d'entrée vers sa page. Plus d'images, plus petites : c'est le même
   arbitrage que dans un catalogue imprimé. */
/* Quatre colonnes depuis l'ajout de l'aéronautique : 7 métiers + la carte
   « votre métier n'est pas là » font 8 cases, soit deux rangées pleines. En
   trois colonnes, la dernière rangée n'en portait que deux et laissait un
   trou au milieu de la page. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  background: var(--navy);
  isolation: isolate;
}
/* 🔴 `height: auto` OBLIGATOIRE. Les attributs `width`/`height` du HTML sont
   des indications de présentation : elles perdent contre une règle d'auteur,
   mais seulement pour les propriétés que cette règle déclare. En ne posant que
   `width`, on laissait `height: 800px` s'appliquer — et `aspect-ratio` ne
   calcule la hauteur que si elle vaut `auto`. Résultat mesuré : une vignette
   large de 325 px rendue sur 800 px de haut. */
.tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
/* Voile monté depuis le bas : le texte blanc doit tenir sur n'importe quelle
   photo, y compris une toiture en plein soleil. Il commence à 34 % pour ne pas
   assombrir le sujet, qui est la raison d'être de la vignette. */
.tile .veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(10, 22, 40, 0) 34%,
    rgba(10, 22, 40, .58) 66%,
    rgba(10, 22, 40, .92) 100%);
}
.tile .tile-cap { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 16px; }
.tile .tile-cap b {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: #fff;
}
.tile .tile-cap span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #C3D5E7; }
a.tile:hover img { transform: scale(1.045); }

/* Dernière case de la grille : pas de photo, un aplat bleu nuit. Elle ferme la
   rangée sans laisser de trou et récupère le visiteur dont le métier n'est pas
   listé, au lieu de le laisser repartir. */
.tile-more {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .16s ease, background .16s ease;
}
.tile-more .tile-cap { position: static; padding: 20px; }
.tile-more .tile-cap b { color: var(--ink); }
.tile-more .tile-cap span { color: var(--muted); }
a.tile-more:hover { background: #fff; border-color: #B9CFDA; }
@media (prefers-reduced-motion: reduce) {
  .tile img { transition: none; }
  a.tile:hover img { transform: none; }
}

/* ───────────────────────────── ACCROCHE TARIFAIRE ───────────────────
   La grille complète vit sur tarifs.html. Recopier les quatre cartes de prix
   sur l'accueil, c'était demander au visiteur de choisir un palier avant même
   d'avoir vu le produit. Ici : le principe, la fourchette, un lien. */
.pitch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
}
.pitch-copy h2 { font-size: clamp(28px, 3.2vw, 40px); }
.pitch-copy p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* ───────────────────────────── GARANTIES ────────────────────────────
   Quatre assurances en une ligne, filet fort en tête de colonne. Remplace
   quatre cartes à paragraphe : sur l'accueil, la sécurité doit rassurer en
   trois secondes, le détail est dans le dossier DSI. */
.assur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.assur > div { border-top: 2px solid var(--navy); padding-top: 20px; }
.assur svg { width: 22px; height: 22px; color: var(--cyan-deep); display: block; margin-bottom: 14px; }
.assur b {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.assur span { display: block; margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ───────────────────────────── PHOTO + TEXTE ────────────────────────
   Un bénéfice = une phrase + une photo. Remplace les trois cartes de texte
   qui disaient la même chose en trois fois plus de mots. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.split + .split { margin-top: 72px; }
/* `order` sur la COLONNE TEXTE seulement : la photo garde sa place naturelle
   dans le flux, donc l'ordre de lecture reste titre → texte → photo une fois
   la grille repliée en une colonne. */
.split.flip .split-copy { order: 2; }
.split-copy h3 { font-size: clamp(23px, 2.4vw, 30px); letter-spacing: -0.028em; margin-bottom: 16px; }
.split-copy p { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.split-photo {
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface);
}
/* Ratio imposé : les sources n'ont pas le même cadrage, et deux photos de
   hauteurs différentes face à leur texte donnent une page bancale.
   🔴 `height: auto` : sans elle, l'attribut `height` du HTML (1300 sur les
   sources en portrait) l'emporte et le ratio n'est jamais appliqué — c'est
   ce qui rendait ces photos démesurées. Voir la note sur `.tile img`. */
.split-photo img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; display: block; }

/* ───────────────────────────── BANDEAU D'APPEL ─────────────────────── */
.band-cta {
  background: var(--navy);
  padding: 84px 0;
  margin-top: 130px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.band-cta .photo { inset: 0; }
.band-cta .photo .fade {
  background: linear-gradient(180deg,
    rgba(10, 22, 40, .80) 0%,
    rgba(10, 22, 40, .88) 55%,
    rgba(10, 22, 40, .94) 100%);
}
.band-cta .in { text-align: center; max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.band-cta h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); }
.band-cta p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--on-navy); }
.band-cta .acts { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.band-cta .small { margin-top: 20px; font-size: 13.5px; color: #7F94AC; }

/* Bandeau de section clair, pour aérer une page longue */
.tint { background: var(--surface); padding: 96px 0; }
.tint + .tint { padding-top: 0; }

/* Bande photo du bandeau sombre : 520 px de photo derrière un titre et quatre
   puces, c'était la troisième grande image de l'accueil. Ramenée à 420 px, le
   fondu se referme au même endroit sur le bleu nuit. */
.band .photo { height: 420px; }
/* La bande raccourcie ramène le chapeau de section sur la zone la plus claire
   de la photo : à 0,38 d'opacité, le texte gris clair passait sous le seuil.
   Le fondu est repris pour rester sombre là où il y a du texte, et se referme
   toujours exactement sur --navy. */
.band .photo .fade {
  background: linear-gradient(180deg,
    rgba(10, 22, 40, .62) 0%,
    rgba(10, 22, 40, .56) 26%,
    rgba(10, 22, 40, .74) 58%,
    rgba(10, 22, 40, .93) 84%,
    var(--navy) 100%);
}

/* ───────────────────────────── RESPONSIVE ──────────────────────────── */
@media (max-width: 1060px) {
  /* 🔴 Les deux panneaux du tableau de bord repassent en une colonne ICI, pas
     à 720. Le colonnage `1.3fr .7fr` s'applique à ce qui RESTE une fois la
     barre latérale de 208 px retirée : à 721 px de fenêtre, la carte de
     répartition tombait à 140 px, la piste des barres était écrasée à 0 et les
     pourcentages sortaient du cadre. Il faut ~1055 px de fenêtre pour que
     cette carte tienne ses 260 px utiles. En dessous, une colonne. */
  .app-grid { grid-template-columns: 1fr; }
  .hero-lede { grid-template-columns: 1fr; gap: 48px; }
  .how { grid-template-columns: 1fr; gap: 34px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split.flip .split-copy { order: 0; }
  .split + .split { margin-top: 54px; }
  .split-photo img { aspect-ratio: 16 / 10; }
  .cards, .cards.four, .quotes, .trades, .tiles, .assur { grid-template-columns: 1fr 1fr; }
  .pitch { grid-template-columns: 1fr; gap: 34px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  /* Sous 1060 px la barre passe au menu hamburger : les panneaux déroulants
     n'ont plus de support et leurs entrées sont reprises à plat dans le
     menu mobile. Les laisser affichables ici produirait un panneau flottant
     rattaché à un bouton invisible. */
  .mega { display: none; }
}

@media (max-width: 720px) {
  .cards, .cards.four, .quotes, .trades, .plans, .assur { grid-template-columns: 1fr; }
  /* Les vignettes RESTENT à deux colonnes sur téléphone : empilées, les huit
     métiers faisaient 1 928 px à elles seules, soit un sixième de la page pour
     une grille de navigation. À 160 px de large, la photo se lit encore et
     l'intitulé suffit — la phrase de description passe à la trappe, elle
     n'était de toute façon plus lisible à cette taille. */
  .tiles { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tile .tile-cap { left: 12px; right: 12px; bottom: 10px; }
  .tile .tile-cap b { font-size: 14px; }
  .tile:not(.tile-more) .tile-cap span { display: none; }
  .app-alerts { flex-direction: column; }
  /* Trois chantiers au lieu de cinq : la hiérarchie se lit sur les trois
     premières lignes, les deux dernières ne coûtaient que de la hauteur. */
  .brk-row:nth-child(n+4) { display: none; }
  .brk { gap: 12px; padding: 14px 16px 16px; }
  /* Le bandeau d'alertes est la partie la plus utile de la maquette sur
     téléphone : c'est la seule qu'on GROSSIT au lieu de la réduire. */
  .app-alert b { font-size: 12.5px; }
  .app-alert span { font-size: 11px; }
  /* Sept métiers sur deux colonnes laissent le dernier seul avec un trou à sa
     droite : on lui donne la rangée entière. Il reprend sa description, la
     largeur la rend de nouveau lisible. */
  .tile:nth-last-child(2) { grid-column: 1 / -1; }
  .tile:nth-last-child(2) .tile-cap span { display: block; }
  /* La carte de reprise, elle, porte une phrase : on lui donne la largeur. */
  .tile-more { grid-column: 1 / -1; aspect-ratio: auto; }
  .tile-more .tile-cap { padding: 18px; }
  .incl.two { grid-template-columns: 1fr; }
  .assur { gap: 26px; }
  .proof .in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .proof ul { gap: 8px 26px; }
  .hero.dark { padding: 60px 0 56px; }
  .band .photo { height: 360px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .stat { padding: 0 12px; }
  .device { width: 100%; max-width: 268px; }
  .band-cta { padding: 62px 0; margin-top: 88px; }
  .tint { padding: 62px 0; }
  .switch { width: 100%; }
  .switch button { flex: 1; justify-content: center; padding: 10px 12px; font-size: 13px; }
}