/* =========================================================================
   Mon Guichet Indépendant — Design system
   Thème clair, institutionnel. Volontairement distinct de Gear-Consulting
   (thème sombre / orange) : ce sont deux marques, pas deux pages d'un site.
   ========================================================================= */

:root {
  /* ═══════════════════════════════════════════════════════════════════
     SYSTÈME — Mon Guichet Indépendant
     Un guichet, pas une brochure. La direction artistique sert trois
     questions, sur chaque écran : qu'avez-vous compris de moi · que
     pouvez-vous faire pour moi · quelle est ma prochaine action.
     ⛔ Aucune couleur décorative : chaque teinte porte un SENS d'état.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── Encre et marque ─────────────────────────────────────────────── */
  --encre:       #0b1f3a;   /* marine du logo — titres, texte fort */
  --encre-2:     #16304f;
  --bleu:        #1f9e8f;   /* turquoise de marque — action, « ici » */
  /* ⚠️ Assombri de #17857a le 10/08/2026 : sur blanc il donnait 4,49 — un
     centième SOUS le seuil de 4,5, et c'est la couleur qui porte les
     étiquettes d'état, en petit et en capitales. ⭐ #157b70 passe sur blanc
     (5,12) ET sur le turquoise pâle (4,56), sans quitter la teinte de marque. */
  --bleu-fonce:  #157b70;
  --bleu-pale:   #e6f5f2;
  /* ⚠️ Assombri de #059669 le 10/08/2026 : 3,77 sur blanc, sous le seuil de
     4,5 — et c'est la couleur du mot « Gratuit », celui qu'on lit le plus vite.
     ⭐ #047857 passe sur blanc (5,48) ET sur le vert pâle (5,21). */
  --vert:        #047857;   /* gratuit, acquis */
  --vert-pale:   #ecfdf5;
  --ambre:       #b45309;   /* humain : un consultant réalise */
  --ambre-pale:  #fffbeb;
  --rouge:       #dc2626;
  --rouge-pale:  #fef2f2;

  /* ── Surfaces ────────────────────────────────────────────────────── */
  --fond:        #f4f7fb;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --bordure:     #e4e9f0;
  --bordure-fort:#cbd5e1;

  --texte:       #0f172a;
  --texte-doux:  #475569;
  /* ⚠️ Assombri de #64748b le 12/08/2026 : sur `--fond` (#f4f7fb) il donnait
     **4,43**, sous le seuil de 4,5 — et il porte TOUS les `.bloc-mention` et
     `.mention` des pages claires. Défaut systémique, antérieur au lot 2,
     trouvé en mesurant la boucle. ⭐ #5f6b80 donne 5,01 sur `--fond`. */
  --texte-faible:#5f6b80;

  /* ── Typographie : une seule échelle, partout ────────────────────
     ⛔ Plus de `font-size` en dur dans les écrans. Les pas sont larges
     — un écart trop faible ne se lit pas comme une hiérarchie. */
  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* ⭐ 11/08/2026 — une seconde famille, et une seule raison de l'avoir : une
     grotesque seule donne à un guichet le visage de n'importe quel outil. Les
     empattements ne servent qu'aux titres d'AFFICHAGE ; ⛔ jamais un libellé,
     jamais un formulaire, jamais une étiquette d'état. */
  --police-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --t-xs:  .78rem;   /* étiquettes d'état, sources */
  --t-sm:  .875rem;  /* aides, notes */
  --t-md:  1rem;     /* corps */
  --t-lg:  1.125rem; /* chapô, intitulé de carte */
  --t-xl:  1.375rem; /* titre de section */
  --t-2xl: 1.75rem;  /* titre de bloc fort */
  /* ⚠️ Les deux pas d'affichage sont FLUIDES. Le titre d'écran était figé à
     1,75 rem quand le hero montait à 3,1 rem : l'accueil paraissait soigné et
     les pages intérieures ressemblaient à un panneau d'administration. */
  --t-3xl: clamp(2rem, 4.2vw, 2.9rem);   /* titre d'écran */
  --t-4xl: clamp(2.4rem, 6vw, 4.1rem);   /* titre de hero */

  /* ── Rythme : une seule échelle d'espace ─────────────────────────── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px;

  /* ── Formes ──────────────────────────────────────────────────────── */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  /* Ombres basses et diffuses : elles séparent, ⛔ elles ne décorent pas. */
  --ombre:    0 1px 2px rgba(11,31,58,.05), 0 2px 8px rgba(11,31,58,.04);
  --ombre-md: 0 2px 4px rgba(11,31,58,.05), 0 8px 24px rgba(11,31,58,.06);
  --ombre-lg: 0 8px 32px rgba(11,31,58,.10);

  --largeur: 1120px;
  --lisible: 780px;   /* colonne de lecture d'un parcours */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* Toujours visible au clavier, y compris sur fond coloré. */
:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
  border-radius: 4px;
}

.inner { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

/* ⭐ Premier élément focalisable de chaque page : au clavier, on ne traverse
   plus toute la barre pour atteindre le contenu. Invisible à la souris. */
.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: #fff; padding: var(--e-3) var(--e-4);
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600; text-decoration: none;
}
.saut-contenu:focus { left: 0; }

/* Alpine : masque les blocs conditionnels avant l'hydratation. */
[x-cloak] { display: none !important; }

/* ── Typographie ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--encre); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; }
/* ⭐ Les empattements suivent le RÔLE, ⛔ jamais la balise. `h2` sert aussi de
   titre de carte à 18 px sur /services et /guide : appliquer la famille
   d'affichage par balise y collait des empattements sur des libellés d'objet.
   Portent l'affichage : le titre de page, le titre d'écran, le titre de
   section. Tout le reste — cartes, champs, étiquettes — reste en Inter. */
h1, .ecran-titre, .titre-section, .titre-affichage {
  font-family: var(--police-titre);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.08;
}
h1 { font-size: var(--t-3xl); }          /* titre d'écran par défaut */
.hero h1 { font-size: var(--t-4xl); }    /* seul le hero monte à l'affichage */
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.2rem; font-weight: 700; }

/* Le titre d'une grande section de l'accueil. Reprend les marges qui étaient
   posées en attribut `style=` sur chacun des huit titres. */
.titre-section {
  /* ⚠️ Le plancher reste SOUS celui du titre de hero (1,72 rem) : à 375 px un
     plancher à 1,8 rem faisait des titres de section plus gros que le titre de
     la page, et la hiérarchie s'inversait sur téléphone. */
  font-size: clamp(1.45rem, 3.8vw, 2.6rem);
  margin: var(--e-3) 0 var(--e-2);
}
.titre-section-aere { margin-bottom: var(--e-6); }
p  { color: var(--texte-doux); }
a  { color: var(--bleu-fonce); }

.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--texte-doux); }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--bleu-fonce);
  background: var(--bleu-pale); padding: .3rem .7rem; border-radius: 100px;
}

/* ── Navigation ────────────────────────────────────────────────────────── */
#nav {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
}
#nav .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 12px; padding-bottom: 12px;
}
/* `flex: none` + `nowrap` sur le logo et sur le bouton : sans eux, le
   navigateur absorbe le moindre manque de place en cassant leur texte sur
   deux lignes. C'est ce qui se produisait jusqu'au 01/08/2026 — 1 099 px de
   contenu naturel pour 1 072 px disponibles, donc « Mon Guichet /
   Indépendant » et « Tester / gratuitement » sur deux lignes, et une barre
   de 107 px de haut. Ce sont les liens qui doivent absorber, par leur
   espacement, jamais les deux blocs qui encadrent. */
.logo {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 800; font-size: 1.06rem; color: var(--encre);
  text-decoration: none; letter-spacing: -.02em;
}
/* Réservé à la barre : le même logo sert dans le pied de page, où il DOIT
   pouvoir passer à la ligne — sinon sa colonne impose 252 px de large et
   fait déborder le pied de page en mobile. */
#nav .logo { flex: none; white-space: nowrap; }
/* Le logo SVG est posé en fond → toutes les pages qui utilisent
   <span class="logo-mark">…</span> héritent du logo sans modifier leur HTML.
   Le texte à l'intérieur (« MGI ») est masqué mais reste lisible aux lecteurs
   d'écran. */
.logo-mark {
  width: 34px; height: 34px; flex: none;
  background: url('/images/logo-mgi.svg') center / contain no-repeat;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
/* Version claire sur le pied de page sombre. */
footer .logo-mark {
  background-image: url('/images/logo-mgi-blanc.svg');
}
/* L'espacement des liens est la seule variable d'ajustement de la barre :
   il se resserre quand la fenêtre se réduit, au lieu de casser les textes. */
.nav-liens {
  display: flex; align-items: center; list-style: none;
  gap: clamp(13px, 1.3vw, 24px);
  /* 🔴 `#nav .inner` est en `space-between` avec TROIS enfants : logo,
     liens, bouton. ⛔ Le bloc de liens se posait donc au milieu, et sa
     position dépendait de sa LARGEUR — en passant de trois entrées à deux
     le 03/09/2026, il a rétréci et s'est décollé de la droite, isolé au
     centre. ⭐ `margin-left: auto` pousse liens ET bouton à droite : la
     barre ne dépend plus du nombre d'entrées.
     ⚠️ Sans effet en menu repliable : à partir de 1140 px la liste passe en
     `position: absolute` avec `left: 0; right: 0`, où une marge auto vaut
     zéro. */
  margin-left: auto;
}
.nav-liens a {
  color: var(--texte-doux); text-decoration: none;
  font-size: .92rem; font-weight: 500; white-space: nowrap;
}
.nav-liens a:hover { color: var(--encre); }

/* 🔴 Le panier n'apparaît que s'il contient quelque chose (`hidden` retiré
   par le script de `tete.php`). ⚠️ `flex: none` comme le logo et le bouton :
   ⛔ ce sont les liens qui absorbent le manque de place, jamais lui. */
.lien-panier {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--bordure);
  color: var(--encre); text-decoration: none;
  font-size: .88rem; font-weight: 600; white-space: nowrap;
}
.lien-panier:hover { border-color: var(--encre); }
/* ⛔ `[hidden]` doit gagner sur `display: inline-flex` : ⚠️ sans cette
   ligne, l'attribut ne masque rien et la pastille s'affiche à vide. */
.lien-panier[hidden] { display: none; }
/* ⭐ Le retour d'un ajout : la pastille se signale UNE fois. ⛔ Pas de boucle
   — un panier n'a pas à s'agiter en permanence. */
@keyframes panier-bouge {
  0%   { transform: scale(1);    border-color: var(--bordure); }
  35%  { transform: scale(1.18); border-color: var(--vert); }
  100% { transform: scale(1);    border-color: var(--bordure); }
}
.lien-panier.panier-bouge { animation: panier-bouge .45s ease-out 1; }
/* ⚠️ ⛔ **QUI DEMANDE MOINS D'ANIMATION N'EN REÇOIT PAS** : le réglage
   système existe pour les personnes que le mouvement dérange. ⭐ Le nombre,
   lui, change quand même — c'est lui qui porte l'information. */
@media (prefers-reduced-motion: reduce) {
  .lien-panier.panier-bouge { animation: none; }
}

#nav .btn { flex: none; white-space: nowrap; }

/* Bouton du menu repliable — masqué tant que les liens tiennent en ligne. */
.nav-bascule {
  display: none;
  flex: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--bordure-fort); border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-bascule:hover { background: var(--surface-2); }
.nav-bascule svg { width: 20px; height: 20px; }

/* Seuil à 1140 px : au-dessus, `.inner` est bloqué à sa largeur maximale de
   1120 px et les liens tiennent. En dessous, la barre se resserre au rythme
   de la fenêtre et finirait par écraser le bouton — les liens passent donc
   dans un panneau repliable.
   Auparavant ils disparaissaient purement et simplement sous 860 px : le
   site n'avait aucune navigation sur mobile.

   ⚠️ 07/08/2026 — ce seuil ne protège de rien tout seul. `.inner` étant
   plafonné à 1120 px (soit 1 072 px utiles), la barre dispose de la MÊME
   largeur à 1 200 comme à 2 560 px : élargir la fenêtre n'a jamais donné de
   place aux liens. Quand la v2.93 et la v2.94 ont porté l'accueil à dix
   entrées, il en fallait 1 427 — le bouton sortait de l'écran et toute la
   page prenait une barre de défilement horizontale, sans qu'aucun seuil
   puisse y changer quoi que ce soit.
   ⛔ Donc : la question à se poser en ajoutant une entrée n'est pas « à
   partir de quelle largeur ça tient » mais « est-ce que ça tient dans
   1 072 px ». Mesure du jour, cinq entrées : 1 052 px, soit 20 px de marge.
   ⛔ Une sixième n'entre pas sans arbitrage — raccourcir un libellé, sortir
   le bouton, ou élargir la barre au-delà de la colonne de contenu (et alors
   le logo ne s'aligne plus avec le texte du hero). */
@media (max-width: 1140px) {
  .nav-bascule { display: inline-flex; }
  .nav-liens {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 24px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre);
  }
  .nav-liens.ouvert { display: flex; }
  .nav-liens a {
    display: block; padding: .72rem 0;
    font-size: 1rem; color: var(--encre);
    border-bottom: 1px solid var(--bordure);
  }
  .nav-liens li:last-child a { border-bottom: none; }
}

/* Trop étroit pour porter le logo, le bouton et le menu : le bouton sort.
   L'appel à l'action du hero est immédiatement en dessous, il ne manque
   à personne. */
@media (max-width: 640px) {
  #nav .btn { display: none; }
}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--r-sm);
  font-family: inherit; font-size: .95rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
/* ⚠️ Le fond du bouton principal est passé de `--bleu` (#1f9e8f) à
   `--bleu-fonce` le 10/08/2026 : le blanc dessus ne donnait que 3,31 — bien
   sous le seuil de 4,5 — et c'est le bouton le plus important du site
   (« Construire mon parcours », « Commander »). ⭐ Sur #157b70 le blanc passe
   à 5,12, sans quitter le turquoise de marque.
   ⛔ `--bleu` reste la teinte des accents et des liserés, où il n'a pas à
   porter de texte blanc. */
.btn-primaire   { background: var(--bleu-fonce); color: #fff; }
.btn-primaire:hover { background: #11675e; }
.btn-secondaire { background: var(--surface); color: var(--encre); border-color: var(--bordure-fort); }
.btn-secondaire:hover { background: var(--surface-2); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Sections & cartes ─────────────────────────────────────────────────── */
section { padding: 72px 0; }
.section-clair { background: var(--surface); border-block: 1px solid var(--bordure); }

.carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--r); padding: 24px; box-shadow: var(--ombre);
}
.grille { display: grid; gap: 20px; }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* ── Hero ──────────────────────────────────────────────────────────────────
   Bandeau marine : place le site entre GEAR (entièrement sombre) et le futur
   site particuliers (entièrement clair). Le contenu, lui, reste clair — les
   utilisateurs y lisent des formulaires longs et impriment des cerfas.
   ───────────────────────────────────────────────────────────────────────── */
/* ⭐ La profondeur vient de la MATIÈRE, ⛔ pas d'une image. Trois nappes
   lumineuses décalées et une trame fine suffisent à donner la sensation d'un
   système qui organise quelque chose — et cela ne coûte pas un octet de
   téléchargement, ⛔ pas de photo, pas d'illustration générique. */
/* 🔴 UNE AURORE, ⛔ PAS UN DÉGRADÉ POLI — corrigé le 12/08/2026.
   La version précédente plafonnait à rgb(17,61,77) sur une base rgb(10,28,53) :
   **sept points de luminance d'écart**, donc rien de visible. J'avais construit
   un bleu nuit plat en croyant faire de la profondeur.
   ⭐ Les nappes montent maintenant à 30-45 % et se recouvrent : c'est le
   recouvrement qui fait la matière, pas le nombre de couches.
   ⛔ On reste dans la famille froide de la marque — turquoise et indigo. Une
   bande magenta ferait joli et inventerait une couleur que MGI n'a pas. */
.hero {
  padding: 104px 0 92px;
  background:
    /* ⚠️ Les foyers étaient posés HORS du cadre (-16 %, -6 %, 112 %) : la
       lumière se recouvrait surtout dans ce qu'on ne voit pas, et il ne
       restait qu'une lueur d'angle en bas à droite. Ils rentrent dans la
       zone visible et se répartissent en diagonale. */
    radial-gradient(1180px 620px at 14% 22%, rgba( 45, 212, 191, .42), transparent 58%),
    radial-gradient(1020px 580px at 76% 10%, rgba( 99, 102, 241, .38), transparent 60%),
    radial-gradient( 900px 520px at 92% 58%, rgba( 56, 189, 248, .24), transparent 62%),
    radial-gradient( 980px 560px at 34% 86%, rgba( 20, 184, 166, .26), transparent 62%),
    linear-gradient(158deg, #05101f 0%, #0a1c35 46%, #102a47 100%);
  color: #dbe6f2;
  position: relative;
  overflow: hidden;
}
/* Le balayage : une nappe très étirée et inclinée, qui donne au fond un SENS
   de lecture au lieu d'une symétrie. ⛔ Aucune animation — le mouvement est
   réservé à ce qui explique quelque chose. */
.hero::before {
  content: '';
  position: absolute; inset: -30% -20% auto -20%; height: 170%;
  background:
    radial-gradient(46% 26% at 26% 34%, rgba(167, 243, 208, .16), transparent 68%),
    radial-gradient(40% 22% at 72% 62%, rgba(129, 140, 248, .18), transparent 70%);
  transform: rotate(-14deg);
  pointer-events: none;
}
@media (max-width: 700px) { .hero { padding: 56px 0 64px; } }
/* 🔴 Sous 1000 px la scène passe sur UNE colonne : le texte occupe alors toute
   la largeur et se retrouve sous la partie claire du voile, calibrée pour la
   carte. ⛔ Le voile en biais ne vaut que tant qu'il y a deux colonnes.
   Ici il devient vertical et couvrant. */
@media (max-width: 999px) {
  .hero::after {
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(180deg,
        rgba(4,12,26,.62) 0%, rgba(4,12,26,.58) 55%, rgba(4,12,26,.54) 100%);
  }
}
/* 🔴 LE VOILE DE LISIBILITÉ — 12/08/2026.
   L'aurore composée atteint rgb(75,151,190) à son point le plus lumineux : le
   blanc n'y vaut plus que **3,25**, et le chapô 1,96. Une image de fond vive
   sans voile est un défaut d'accessibilité, ⛔ pas une audace graphique.
   ⭐ Le voile est en biais : sombre à gauche, là où se lit le texte, presque
   nul à droite, là où l'aurore doit rester spectaculaire derrière la carte.
   Il porte aussi la trame, écho au motif du logo. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    /* 🔴 Le voile était à 82 % — il ÉTEIGNAIT l'aurore qu'il devait seulement
       tempérer, et le fond redevenait un bleu nuit plat. ⛔ Un voile de
       lisibilité se calcule au plus JUSTE, jamais au plus sûr.
       ⭐ 52 % suffisent : le titre est du grand texte (seuil 3,0) et le chapô
       y tient 5,1. Mesuré sur le composé, pas estimé. */
    linear-gradient(100deg,
      rgba(4,12,26,.56) 0%,  rgba(4,12,26,.50) 44%,
      rgba(4,12,26,.30) 72%, rgba(4,12,26,.08) 100%);
  background-size: 56px 56px, 56px 56px, cover;
  pointer-events: none;
}
/* ⚠️ `::before` et `::after` sont POSITIONNÉS : sans cette ligne ils peignent
   par-dessus le contenu, et le voile éteindrait le texte qu'il protège.
   ⛔ Piège invisible à la mesure — une sonde qui remonte les fonds des
   ancêtres ne voit pas une couche peinte au-dessus. */
.hero > .inner { position: relative; z-index: 1; }
/* ⭐ UNE seule règle pour la taille du titre du hero, et aucune media query.
   Elle en portait trois, réparties dans deux blocs `@media` mutuellement
   exclusifs : le résultat effectif ne se lisait plus nulle part, et le titre
   sortait à 27,5 px sur un écran de 1 280 px — plus petit que les titres de
   section qu'il domine. ⛔ Ne jamais redéfinir cette taille ailleurs.
   Le plancher 1,72 rem est celui mesuré le 07/08 pour garder l'action
   au-dessus de la ligne de flottaison sur 375 × 812. */
.hero h1 {
  /* ⚠️ Le plancher 1,72 rem reste celui mesuré le 07/08 pour garder l'action
     au-dessus de la ligne de flottaison sur 375 × 812.
     🔴 Le plafond REDESCEND de 3,9 à 3,1 rem : à 62 px, « On vous dit quoi
     faire. » réclamait ~713 px dans une colonne qui en fait 598, et « faire. »
     tombait seul sur une troisième ligne. ⛔ Un titre qui casse mal n'est pas
     un grand titre. Le `<br>` du HTML porte la coupure voulue ; `max-width`
     n'a plus à s'en mêler. */
  font-size: clamp(1.72rem, 4.4vw, 3.1rem);
  margin: 1.1rem 0 1.3rem; max-width: none; color: #fff;
  text-wrap: balance;
}
/* ⚠️ Éclairci de #b9cbe0 : le voile ayant été baissé de 82 à 52 % pour laisser
   voir l'aurore, le fond sous le chapô est devenu plus lumineux. */
.hero .lead { max-width: 46ch; color: #cbdaea; }
/* ⚠️ Le fond turquoise à 16 % ne protégeait rien : sur l'aurore éclaircie, le
   texte tombait à 3,94 pour 12,5 px. La pastille porte donc un fond SOMBRE —
   c'est lui qui fait le contraste, la teinte de marque reste dans le texte et
   la bordure. Mesuré à 8,0. */
.hero .eyebrow {
  background: rgba(6, 18, 36, .58);
  color: #6fd8c8;
  border: 1px solid rgba(47,192,174,.40);
}
/* Bouton secondaire : contour clair, lisible sur le marine. */
.hero .btn-secondaire {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.hero .btn-secondaire:hover { background: rgba(255,255,255,.13); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ⭐ La barre de recherche du hero — 07/08/2026.
   Elle n'est plus un formulaire parmi d'autres : c'est la porte d'entrée du
   produit, et elle se traite au même niveau qu'un appel à l'action. D'où la
   hauteur alignée sur celle du bouton (`align-items: stretch` plutôt qu'une
   valeur en dur, pour qu'elle suive si le bouton change), la même famille
   typographique que le reste du site, et un fond blanc franc — sur le marine
   du hero, un champ translucide se lit mal et n'appelle pas la saisie.
   La mise en forme vivait en style inline dans index.html : elle est ici,
   avec le reste du hero. */
.hero-recherche {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: .6rem; margin: 0 0 1.4rem; max-width: 40rem;
}
.hero-recherche .champ { flex: 1 1 100%; margin: 0; display: flex; }
/* ⭐ Un `textarea` de trois lignes, ⛔ pas une barre de recherche : la forme
   du champ dit ce qu'on attend. Une ligne appelle des mots-clés, trois
   appellent une phrase — et c'est une phrase que le moteur sait lire. */
/* 🔴 LE CHAMP EST L'ANCRE VISUELLE DE LA PAGE — corrigé le 12/08/2026.
   Il avait un rayon de 14 px et une ombre à 28 % : un rectangle posé sur le
   fond, que rien ne désignait. Il doit **flotter** au-dessus de l'aurore.
   ⚠️ Rayon large mais ⛔ pas une pilule : le texte y tient sur trois lignes,
   un arrondi total collerait la première lettre au bord. */
.hero-recherche textarea,
.hero-recherche input[type="search"] {
  width: 100%; min-height: 132px; padding: 1.15rem 1.3rem;
  font-family: var(--police); font-size: 1.12rem; line-height: 1.55;
  color: var(--encre); border-radius: 22px;
  background: #fff; border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    0 28px 64px rgba(2, 8, 20, .46),
    0 6px 16px rgba(2, 8, 20, .28);
  resize: vertical;
}
.hero-recherche textarea::placeholder,
.hero-recherche input[type="search"]::placeholder { color: #6b7f96; }
.hero-recherche textarea:focus,
.hero-recherche input[type="search"]:focus {
  outline: none; border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(47, 192, 174, .45), 0 6px 20px rgba(4, 14, 28, .28);
}
/* ⚠️ Le bouton était modeste à côté d'un champ de 132 px : l'ancre visuelle
   et l'action doivent avoir le même poids, sinon l'œil s'arrête au champ. */
.hero-recherche .btn {
  flex: none; padding: 1.15rem 2.2rem; font-size: 1.06rem;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(2, 8, 20, .40);
}
/* Sous 560 px le bouton passe sous le champ : à cette largeur, deux blocs
   côte à côte donnent un champ trop court pour qu'on y lise sa propre phrase. */
@media (max-width: 560px) {
  .hero-recherche .btn, .form-recherche .btn { width: 100%; }
}

/* ── Les cinq étapes « pas seulement de l'information » ────────────────
   ⭐ Une liste numérotée, pas des cartes : le visiteur doit lire un déroulé
   qui se suit, pas comparer cinq blocs. Le compteur est dessiné à la main —
   `list-style` ne permet pas de le placer dans une pastille. */
.etapes-mgi { counter-reset: etape; list-style: none; display: grid; gap: 1.1rem; }
@media (min-width: 760px) {
  .etapes-mgi { grid-template-columns: 1fr 1fr; gap: 1.3rem 2.2rem; }
}
.etapes-mgi li {
  counter-increment: etape;
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem;
  font-size: .92rem; color: var(--texte-doux);
}
.etapes-mgi li::before {
  content: counter(etape);
  grid-row: 1 / 3;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  /* ⚠️ Turquoise sur turquoise pâle : `--bleu` n'y donnait que 2,95. */
  font-size: .84rem; font-weight: 700; color: var(--bleu-fonce);
  background: var(--bleu-pale); border-radius: 50%;
}
.etapes-mgi strong {
  color: var(--encre); font-size: .98rem;
  align-self: center;
}

/* ⚠️ Mobile : l'action doit rester au-dessus de la ligne de flottaison.
   Mesuré le 07/08/2026 sur 375 × 812 : le champ tombait à 634 px, puis 524 px
   après raccourcissement du texte — toujours trop bas. Le coupable est le
   hero lui-même : 88 px de marge haute et un titre en 2 rem sur quatre
   lignes. ⛔ On ne raccourcit pas encore la promesse, on resserre le cadre. */
@media (max-width: 560px) {
  .hero { padding: 40px 0 48px; }
  .hero h1 { margin: .7rem 0 .7rem; }   /* ⛔ la taille est fluide, voir `.hero h1` */
  /* La coupure forcée du titre coûte une ligne entière sur un écran étroit. */
  .hero h1 br { display: none; }
  .hero .lead { font-size: 1rem; }
  .hero-exemples { gap: .4rem; margin-bottom: .9rem; }
  .hero-exemple { padding: .55rem .8rem; }
}


/* ── Le résumé du parcours, et le détail replié ────────────────────────
   ⭐ Trois chiffres avant tout le reste : combien d'actions, combien de
   données vérifiées, combien ça coûte si on veut être aidé. ⛔ Le visiteur
   doit savoir ce qu'il obtient avant de lire comment on y arrive. */
.resume-chiffre {
  font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--bleu); margin: 0 0 .25rem; letter-spacing: -.02em;
}
.resume-libelle { font-weight: 600; color: var(--encre); font-size: .95rem; margin: 0 0 .3rem; }
.resume-detail  { font-size: .86rem; color: var(--texte-doux); margin: 0; }

/* Le détail administratif : présent, mais plus au premier plan. */
.detail-parcours { margin-top: 2.4rem; border-top: 1px solid var(--bordure); padding-top: 1.2rem; }
.detail-parcours > summary {
  cursor: pointer; font-weight: 600; color: var(--bleu-fonce);
  font-size: .95rem; list-style: none; padding: .2rem 0;
}
.detail-parcours > summary::-webkit-details-marker { display: none; }
.detail-parcours > summary::before { content: '▸ '; }
.detail-parcours[open] > summary::before { content: '▾ '; }
.detail-parcours > summary:hover { color: var(--encre); }



/* ── « Qu'avez-vous compris de moi ? » ──────────────────────────────────
   ⭐ La toute première question du visiteur, donc le premier bloc de l'écran.
   Elle RESTITUE, elle ne vend rien : fond calme, aucun bouton, aucun accent
   d'action. ⛔ Si elle attirait l'œil plus que la suite, elle mentirait sur
   son rôle. */
.compris {
  margin: 0 0 var(--e-5); padding: var(--e-4) var(--e-5);
  border: 1px solid var(--bordure); border-left: 3px solid var(--bleu);
  border-radius: var(--r); background: var(--surface);
}
.compris-titre {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--bleu-fonce); margin: 0 0 var(--e-3);
}
.compris-titre::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.compris-liste { margin: 0; padding: 0; list-style: none; }
.compris-liste li {
  position: relative; padding-left: var(--e-4); margin-bottom: var(--e-1);
  font-size: var(--t-sm); color: var(--texte-doux); line-height: 1.55;
}
.compris-liste li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--bordure-fort);
}
.compris-liste strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.compris-note {
  font-size: var(--t-xs); color: var(--texte-faible);
  margin: var(--e-3) 0 0; padding-top: var(--e-3);
  border-top: 1px solid var(--bordure); line-height: 1.5;
}

/* ── Le plan du projet ──────────────────────────────────────────────────
   ⭐ Une demande riche ouvre jusqu'à huit volets. Empilés à l'identique, ils
   deviennent une liste illisible ; c'est l'ÉTAT qui doit trier l'œil, pas
   l'ordre. Le liseré gauche et l'étiquette portent le même code partout. */
.volets-titre { font-size: var(--t-xl); letter-spacing: -.02em; margin: 0 0 var(--e-2); }
.volets-intro { font-size: var(--t-sm); color: var(--texte-doux); margin: 0 0 var(--e-4); max-width: 62ch; }
.volets { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); }
@media (min-width: 760px) { .volets { grid-template-columns: 1fr 1fr; } }

.volet { border-left-width: 3px; padding: var(--e-4) var(--e-5); }
.volet-dispo   { border-left-color: var(--bleu); }
.volet-gear    { border-left-color: var(--ambre); }
.volet-bientot { border-left-color: var(--bordure-fort); background: var(--surface-2); }

.volet-etat {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 var(--e-2);
}
.volet-etat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.volet-dispo   .volet-etat { color: var(--bleu-fonce); }
.volet-gear    .volet-etat { color: var(--ambre); }
.volet-bientot .volet-etat { color: var(--texte-faible); }

.volet-titre { font-size: var(--t-lg); letter-spacing: -.015em; margin: 0 0 var(--e-1); }
.volet-sujet { font-size: var(--t-sm); color: var(--texte-doux); margin: 0; line-height: 1.55; }
.volet-lien  { font-size: var(--t-sm); margin: var(--e-3) 0 0; font-weight: 600; }
.volet-offre { font-size: var(--t-sm); margin: var(--e-2) 0 0; }
.volet-offre a { color: var(--bleu-fonce); font-weight: 600; }
.volet-rien  {
  font-size: var(--t-sm); color: var(--texte-faible);
  margin: var(--e-3) 0 0; font-style: italic;
}

/* Une prestation réelle : son nom, son prix, sa portée. ⭐ Le prix est
   affiché parce qu'il existe — un « à partir de » serait une promesse floue.
   ⚠️ Zone tactile d'au moins 44 px : c'est le seul lien vers une vente. */
.volet-gear-offre {
  font-size: var(--t-sm); margin: var(--e-3) 0 0; padding-top: var(--e-3);
  border-top: 1px solid var(--bordure);
}
.volet-gear-offre a {
  display: inline-block; padding: var(--e-2) 0;
  color: var(--ambre); font-weight: 600; text-decoration: none;
}
.volet-gear-offre a:hover { text-decoration: underline; }
.volet-prix {
  display: inline-block; margin-left: var(--e-2); padding: 2px var(--e-2);
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ambre); background: var(--ambre-pale);
  border-radius: var(--r-sm); white-space: nowrap;
}
.volet-portee {
  display: block; margin-top: var(--e-1);
  font-size: var(--t-sm); color: var(--texte-faible); line-height: 1.5;
}

/* Le pack ne se juge qu'au niveau du projet : il traverse la grille. */
.plan-pack {
  border-left: 3px solid var(--ambre); background: var(--ambre-pale);
  margin-bottom: var(--e-6); padding: var(--e-5);
}
.plan-pack .volet-etat  { color: var(--ambre); }
.plan-pack .volet-offre a { color: var(--ambre); }

/* ── La réponse à une intention, sur /recherche ────────────────────────
   ⭐ Deux visages, jamais trois : ce que nous savons faire (turquoise, avec
   un bouton) et ce que nous savons seulement nommer (ambre, sans lien).
   ⛔ Un « bientôt » ne doit jamais ressembler à un bouton. */
.intention { border-left-width: 4px; margin-bottom: 1.4rem; }
.intention-dispo   { border-left-color: var(--bleu); }
.intention-bientot { border-left-color: var(--ambre); background: var(--ambre-pale); }
/* Ni « nous le faisons », ni « bientot » : un consultant le realise, et c'est
   publie avec son prix. Meme ambre que les volets accompagnes, fond neutre
   pour que la carte porte une offre et non un regret. */
.intention-gear    { border-left-color: var(--ambre); background: var(--surface); }
.intention-gear .intention-etat { color: var(--ambre); }
.intention-etat {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 .3rem;
}
.intention-dispo   .intention-etat { color: var(--bleu-fonce); }
.intention-bientot .intention-etat { color: var(--ambre); }
.intention-titre { font-size: 1.15rem; margin: 0 0 .3rem; }
.intention-sujet { font-size: .95rem; color: var(--texte-doux); margin: 0; }

/* ⚠️ 10/08/2026 — mesuré EN PRODUCTION : le titre du hero occupait 238 px
   (police Inter chargée, trois lignes) et repoussait l'action à 568 px, alors
   que ma mesure locale annonçait 383 px. ⛔ Une mesure sans la vraie police
   est une mesure fausse. On plafonne donc la taille et on resserre. */
@media (min-width: 561px) {
  .hero { padding: 60px 0 64px; }
  .hero h1 { max-width: 24ch; }         /* ⛔ la taille est fluide, voir `.hero h1` */
}

/* ── Les trois exemples du hero ────────────────────────────────────────
   ⭐ Ils disent en une seconde ce qu'on peut demander à MGI. Le premier mène
   à un parcours réel ; les deux autres montrent l'ambition et sont
   **volontairement en retrait** — ⛔ ils ne sont pas cliquables, et « Bientôt »
   est écrit dessus. Une fausse promesse coûte plus cher qu'une case vide. */
/* ⚠️ Les exemples ne sont plus des blocs à deux lignes mais des pastilles
   portant la phrase que le visiteur aurait écrite : elles s'alignent au fil
   du texte au lieu d'occuper une grille. */
.hero-exemples {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.4rem; max-width: 40rem;
}

/* ── LE HERO EN DEUX TEMPS : DIRE/ÉCRIRE à gauche, VOIR à droite ─────────
   ⭐ L'ordre du DOM est celui du mobile — promesse, champ, CTA, exemples,
   démonstration. La grille ne fait que poser la démonstration à côté sur
   grand écran ; ⛔ aucun réordonnancement, donc aucun piège au clavier. */
/* 🔴 LE HERO PASSE AU CENTRE — 14/08/2026, demande expresse d'Éric.
   ⛔ Fini les deux colonnes : le champ est **au centre de la page**, et la
   démonstration passe DESSOUS, centrée elle aussi.
   ⭐ Le lot 1 est préservé : la carte se remplit toujours pendant la frappe,
   sans un clic — c'était sa promesse, et elle tient. Elle change de place,
   ⛔ elle ne disparaît pas.
   ⚠️ L'ancienne composition en deux colonnes existait pour une raison : elle
   évitait 880 px de vide sous une carte de 336 px. Au centre, le problème
   disparaît de lui-même — la carte n'a plus de voisine à égaler.

   🔴 17/08/2026 — **CE BLOC NE CENTRE PLUS RIEN.** Il portait `text-align:
   center` pour redresser un balisage en deux colonnes qui n'était pas celui
   de la maquette : le hero RESSEMBLAIT à la maquette, ⛔ il ne l'était pas.
   ⭐ L'accueil porte désormais `.hero-reponse`, les mêmes classes que la tête
   de `/recherche`, et c'est ELLE qui centre — une seule fois, pour les deux
   pages. Ce qui reste ici ne fait qu'EMPILER et BORNER. */
.hero-scene {
  display: grid; gap: var(--e-6); justify-items: center;
}
.hero-dire { min-width: 0; max-width: 46rem; width: 100%; }
/* ⭐ Le chapô, le champ et les exemples se centrent avec le texte. ⚠️ Le
   `textarea` garde son alignement à gauche : on y écrit une phrase. */
.hero-dire .lead { margin-left: auto; margin-right: auto; }
.hero-dire .hero-recherche { margin-left: auto; margin-right: auto; }
.hero-dire .hero-recherche textarea { text-align: left; }
.hero-dire .hero-exemples { justify-content: center; margin-left: auto; margin-right: auto; }
.hero-reassurance {
  margin: calc(-1 * var(--e-2)) 0 var(--e-5);
  /* ⚠️ Éclairci deux fois : #8fa8c2 → #a8bdd2 → #bccfe2. C'est la ligne la plus
     petite du hero, et chaque fois que le voile s'allège elle passe sous le
     seuil la première. Mesurée à 5,3 sur le composé actuel. */
  font-size: var(--t-sm); color: #bccfe2;
}

/* ── LA CARTE — ce que MGI construit pendant qu'on écrit ─────────────────
   ⛔ Pas un mini /recherche : aucun prix, aucune offre nommée, aucune source
   dépliée. Elle donne un avant-goût et se lit d'un coup d'œil.
   ⭐ Elle est légèrement plus claire que le fond et posée un cran au-dessus :
   c'est l'objet que le produit fabrique, il doit se détacher. */
/* ⚠️ Le fond est devenu lumineux : une carte à peine plus claire que lui s'y
   dissolvait. Elle s'assombrit au contraire, et c'est ce qui la fait exister —
   un objet posé SUR l'aurore, ⛔ pas un voile de plus. */
.hero-carte {
  /* ⚠️ Centrée et bornée : sous le champ, elle n'a plus de colonne voisine
     pour lui donner sa largeur. Sans cette borne elle traverserait la page. */
  width: 100%; max-width: 34rem; text-align: left;
  min-width: 0;
  background: linear-gradient(180deg, rgba(6, 18, 36, .62), rgba(6, 18, 36, .48));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  padding: var(--e-6);
  box-shadow: 0 32px 80px rgba(2, 8, 20, .52);
  backdrop-filter: blur(14px) saturate(120%);
}
.hero-carte-titre {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #6fd8c8;
  margin: 0 0 var(--e-4);
}
.hero-carte-vide { color: #cbdaea; font-size: var(--t-md); margin: 0 0 var(--e-5); }
.hero-carte-vide strong { color: #fff; }

/* 🔴 Au repos, la carte n'était que quatre lignes minuscules dans un grand
   cadre : elle avait l'air INACHEVÉE, pas en attente. Les quatre temps
   deviennent des lignes numérotées à part entière — c'est un sommaire de ce
   qui va s'écrire là, ⛔ pas une note de bas de page. */
.hero-carte-etapes {
  margin: 0; padding: 0; list-style: none;
  counter-reset: temps;
  display: grid; gap: var(--e-3);
}
.hero-carte-etapes li {
  counter-increment: temps;
  display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline;
  gap: var(--e-3);
  color: #dbe6f2; font-size: var(--t-sm); line-height: 1.45;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hero-carte-etapes li:last-child { border-bottom: none; padding-bottom: 0; }
.hero-carte-etapes li::before {
  content: counter(temps);
  font-family: var(--police-titre); font-size: 1.05rem;
  color: #6fd8c8; line-height: 1;
}
/* Les mots du visiteur, renvoyés tels quels — le premier signe qu'on l'a lu. */
.hero-carte-citation {
  color: #fff; font-size: var(--t-md); line-height: 1.5;
  margin: 0 0 var(--e-4); font-style: italic;
}

/* ⭐ Les marques ✓ et ? PORTENT le niveau de certitude — ⛔ elles ne décorent
   rien. Un déduit et un à-confirmer ne doivent jamais se ressembler. */
.hero-carte-lus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.hero-carte-lus li {
  display: grid; grid-template-columns: 1.1rem 1fr auto;
  align-items: baseline; gap: var(--e-2);
  color: #fff; font-size: var(--t-sm); line-height: 1.5;
}
.hero-lu-marque { font-weight: 700; color: #6fd8c8; }
.hero-lu-a_confirmer .hero-lu-marque { color: #f0c088; }
.hero-lu-niveau { font-size: var(--t-xs); color: #8fa8c2; white-space: nowrap; }

.hero-carte-bloc {
  margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero-carte-etiquette {
  font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase;
  color: #8fa8c2; margin: 0 0 var(--e-2);
}
.hero-carte-chiffre { color: #dbe6f2; font-size: var(--t-sm); margin: 0 0 var(--e-3); }
.hero-carte-chiffre strong {
  display: block; color: #fff;
  font-family: var(--police-titre); font-size: 2.1rem; line-height: 1.05;
}
.hero-carte-repartition {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e-2);
}
.hero-carte-repartition li {
  font-size: var(--t-xs); color: #dbe6f2;
  background: rgba(255, 255, 255, .07);
  border-radius: 100px; padding: .2rem .6rem;
}
.hero-carte-repartition strong { color: #fff; }
/* ⚠️ #8fa8c2 donnait 4,42 DANS la pastille — le fond translucide de celle-ci
   s'ajoute à celui de la carte et remonte le composé. Mesuré, pas supposé. */
.hero-carte-gris, .hero-carte-gris strong { color: #9db4cb; }
.hero-carte-suite { border-top-color: rgba(47, 192, 174, .34); }
.hero-carte-action { color: #6fd8c8; font-weight: 600; margin: 0; }

/* ── Les exemples : des pastilles, ⛔ plus des blocs ─────────────────────
   Ils portent la phrase que le visiteur aurait écrite — une ligne suffit. */
/* ⚠️ Resserrées : cinq pastilles de longueurs très inégales s'enroulaient sur
   trois lignes irrégulières dans 598 px. Un cran plus petites, elles tiennent
   sur deux lignes régulières. */
.hero-exemple {
  display: inline-block; padding: .38rem .75rem;
  border-radius: 100px; font-size: var(--t-xs); line-height: 1.45;
  border: 1px solid rgba(255, 255, 255, .20);
  background: rgba(255, 255, 255, .06);
  color: #dbe6f2; text-decoration: none; white-space: nowrap;
}
.hero-exemple:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ⭐ Une couleur = un état, sur l'accueil comme ailleurs. La pastille reste
   sobre : c'est une phrase à emprunter, ⛔ pas une étiquette d'état à lire.
   ⚠️ Les trois classes sont attendues par le banc — elles portent le code
   d'état du produit et ne doivent pas disparaître. */
.hero-exemple-actif   { border-color: rgba(47, 192, 174, .45); }
.hero-exemple-humain  { border-color: rgba(240, 192, 136, .40); }
.hero-exemple-bientot { border-style: dashed; color: #8fa8c2; }
.hero-exemple-flou    { border-style: dashed; color: #b9cbe0; }
/* Certains exemples sont devenus des boutons : ⛔ ils ne doivent hériter ni du
   rendu par défaut du navigateur, ni d'un jeton de fond CLAIR.
   🔴 Mesuré : passé de `<span>` à `<button>`, le sous-titre « Bientôt »
   repassait sur `--texte-faible` (#64748b) — 2,5 sur le fond nuit, alors que
   la couleur du bloc (#8fa8c2) y donne 5,45. Même piège que les jetons d'état
   en v4.1 : un jeton clair ne va jamais sur du sombre. */
button.hero-exemple {
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
button.hero-exemple > span { color: inherit; font-size: var(--t-xs); }
/* ── Les niveaux de certitude, sur fond sombre ───────────────────────────
   🔴 Chaque teinte est vérifiée sur le dégradé nuit (#113052), ⛔ jamais sur
   la palette claire : #fff → 13,4 · #6fd8c8 → 7,9 · #f0c088 → 7,6 ·
   #8fa8c2 → 5,5. Toutes passent AA.
   ⚠️ Le bloc `.hero-lecture` du lot 1 a été retiré ici : la carte l'a
   remplacé. Il emportait `.hero-exemple-bientot span`, qui posait
   `--texte-faible` — un jeton de fond CLAIR — sur le fond nuit, à 2,5. */

/* Les deux autres champs de recherche — section « Vous vous demandez… » et la
   page /recherche — sont sur fond clair : le style standard des champs leur
   convient, il ne leur manquait que d'être à la hauteur de leur bouton. */
.form-recherche { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.form-recherche .champ { flex: 1 1 20rem; margin: 0; display: flex; }
.form-recherche .btn { flex: none; }
/* Ce qui vient APRÈS la simulation gratuite : la prestation payante.
   Elle était écrite en `--texte-faible` (#64748b) sur le marine du hero,
   soit un contraste de 2,8:1 — sous le minimum lisible de 4,5:1. Elle est
   maintenant portée par un bloc à filet turquoise, dans la couleur de texte
   du hero (contraste 11:1). Toujours placée après les boutons : l'action
   gratuite doit précéder l'annonce du payant. */
.hero-suite {
  margin-top: 1.4rem; max-width: 54ch;
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--bleu);
  background: rgba(47, 192, 174, .10);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .95rem; color: #dbe6f2;
}
.hero-suite strong { color: #fff; font-weight: 700; }
.hero-suite a { color: #6fd8c8; font-weight: 600; white-space: nowrap; }
.hero-preuves {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin-top: 2.2rem; font-size: .88rem; color: #8fa8c2;
}
.hero-preuves span { display: flex; align-items: center; gap: .4rem; }

/* ── Équipe (section « Qui sommes-nous ») ──────────────────────────────── */
.equipe { display: grid; gap: 1.5rem; margin-bottom: 1.4rem; }
@media (min-width: 720px) {
  .equipe { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.equipe-membre { padding-left: 1rem; border-left: 3px solid var(--bleu-pale); }
.equipe-membre p { font-size: .93rem; color: var(--texte-doux); }
.equipe-nom {
  font-weight: 700; color: var(--encre); margin-bottom: .45rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
}
.equipe-nom span {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  /* ⚠️ Texte de 11,8 px : `--bleu` n'y donne que 3,31. */
  text-transform: uppercase; color: var(--bleu-fonce);
}

/* ── Formulaire ────────────────────────────────────────────────────────── */
.champ { display: block; margin-bottom: 1.1rem; }
.champ > span {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--encre); margin-bottom: .35rem;
}
.champ .aide { display: block; font-weight: 400; color: var(--texte-faible); font-size: .8rem; margin-top: .15rem; }

/* `search` ajouté le 07/08/2026. Il manquait depuis la v2.93, qui a introduit
   les champs de recherche : sans lui, les trois champs du site — le hero, la
   section « Vous vous demandez… » et /recherche — tombaient sur le rendu natif
   du navigateur, soit 173 × 19 px en Chrome/Windows, bordure `2px inset` et
   police 13,3 px, à côté d'un bouton de 54 px. Le banc ne l'a pas vu : il lit
   le texte du HTML, jamais la géométrie rendue. */
input[type="text"], input[type="number"], input[type="email"],
input[type="search"], select {
  width: 100%; padding: .7rem .85rem;
  font-family: inherit; font-size: .95rem; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bordure-fort);
  border-radius: var(--r-sm);
}
/* Sans cette remise à zéro, WebKit impose au type `search` sa hauteur et sa
   bordure natives : `padding` et `font-size` ci-dessus resteraient sans effet. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
input:focus, select:focus { border-color: var(--bleu); }

.champ-inline { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.1rem; }
.champ-inline input { margin-top: .25rem; flex: none; }
.champ-inline span { font-size: .9rem; color: var(--texte-doux); }

/* ── Simulateur ────────────────────────────────────────────────────────── */
.simulateur { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .simulateur { grid-template-columns: 1fr; } }

.resultats-vide {
  display: grid; place-items: center; text-align: center;
  min-height: 320px; color: var(--texte-faible);
  border: 2px dashed var(--bordure-fort); border-radius: var(--r); padding: 32px;
}

/* Comparatif des 3 statuts */
.comparatif { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.statut {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--r); padding: 20px; position: relative;
}
.statut.gagnant { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.statut .badge {
  position: absolute; top: -11px; left: 20px;
  background: var(--vert); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 100px;
}
.statut h3 { margin-bottom: .2rem; }
.statut .montant {
  font-size: 1.85rem; font-weight: 800; color: var(--encre);
  letter-spacing: -.03em; line-height: 1.1; margin: .5rem 0 .1rem;
}
.statut .par-mois { font-size: .85rem; color: var(--texte-faible); }
.statut .taux {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--bordure);
  font-size: .82rem; color: var(--texte-faible);
}

/* Détail ligne à ligne */
.detail { width: 100%; border-collapse: collapse; font-size: .88rem; }
.detail th, .detail td { padding: .5rem .6rem; text-align: right; border-bottom: 1px solid var(--bordure); }
.detail th:first-child, .detail td:first-child { text-align: left; color: var(--texte-doux); font-weight: 500; }
.detail thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-faible); }
.detail tfoot td { font-weight: 700; color: var(--encre); border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* ── Score de création ─────────────────────────────────────────────────── */
.score-bloc { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.score-jauge { --pct: 0; width: 108px; height: 108px; flex: none; position: relative; }
.score-jauge::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--score-couleur, var(--bleu)) calc(var(--pct) * 1%), var(--bordure) 0);
}
.score-jauge::after {
  content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface);
}
.score-valeur {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-size: 1.7rem; font-weight: 800; color: var(--encre); letter-spacing: -.03em;
}
.score-valeur small { font-size: .75rem; font-weight: 600; color: var(--texte-faible); }

/* ── Points de blocage ─────────────────────────────────────────────────── */
.point {
  display: flex; gap: .85rem; padding: 14px 16px;
  border-radius: var(--r-sm); border: 1px solid var(--bordure);
  background: var(--surface-2); margin-bottom: 10px;
}
.point .puce { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; margin-top: 2px; }
.point strong { display: block; color: var(--encre); font-size: .93rem; }
.point p { font-size: .87rem; margin-top: .15rem; }
.point--bloquant  { background: var(--rouge-pale); border-color: #fecaca; }
.point--bloquant  .puce { background: var(--rouge); }
.point--attention { background: var(--ambre-pale); border-color: #fde68a; }
.point--attention .puce { background: var(--ambre); }
.point--info      { background: var(--bleu-pale); border-color: #c7d7fe; }
.point--info      .puce { background: var(--bleu); }

/* ── Encart d'avertissement légal ──────────────────────────────────────── */
.avertissement {
  border-left: 3px solid var(--ambre); background: var(--ambre-pale);
  padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .85rem; color: #78350f;
}
.avertissement strong { color: #78350f; }

/* ── Tarifs ────────────────────────────────────────────────────────────── */
.pack { display: flex; flex-direction: column; }
.pack.vedette { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale), var(--ombre); }
.pack .prix { font-size: 2.3rem; font-weight: 800; color: var(--encre); letter-spacing: -.03em; margin: .4rem 0; }
.pack .prix small { font-size: .9rem; font-weight: 500; color: var(--texte-faible); }
.pack ul { list-style: none; margin: 1.2rem 0; display: grid; gap: .55rem; }
/* Le texte doit rester un flux normal : en flex, chaque fragment (texte brut,
   <strong>) devenait un élément distinct et se repliait de façon incohérente.
   La puce est un simple contenu en ligne, avec un retrait négatif pour que les
   lignes suivantes s'alignent sous le texte et non sous la coche. */
.pack li {
  display: block;
  font-size: .9rem; color: var(--texte-doux); line-height: 1.5;
  margin-left: 1.5rem; text-indent: -1.5rem;
}
.pack li::before {
  content: '✓';
  display: inline-block; width: 1.5rem; text-indent: 0;
  color: var(--vert); font-weight: 800;
}
.pack li.exclu { color: var(--texte-faible); }
.pack li.exclu::before { content: '✕'; color: var(--rouge); }

/* Détail d'une ligne d'offre : apparaît au survol (souris) ou au clic
   (tactile, via la classe .ouvert posée en JS). Le retrait négatif du <li>
   est neutralisé pour que le paragraphe s'aligne normalement. */
.pack li.a-detail { cursor: help; }
.pack li.a-detail > .plus {
  display: inline-block; width: 15px; height: 15px; margin-left: .3rem;
  border-radius: 50%; background: var(--bleu-pale); color: var(--bleu-fonce);
  font-size: .62rem; font-weight: 800; line-height: 15px; text-align: center;
  vertical-align: 1px; text-indent: 0;
}
.pack li .detail {
  display: none; text-indent: 0; margin-top: .4rem;
  padding: .6rem .75rem; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--bordure);
  font-size: .82rem; line-height: 1.5; color: var(--texte-doux);
}
.pack li.a-detail:hover > .detail,
.pack li.a-detail.ouvert > .detail { display: block; }
.pack li .detail em { color: var(--encre); font-style: normal; font-weight: 600; }

.pack .btn { margin-top: auto; }

/* ── Pied de page ──────────────────────────────────────────────────────── */
footer { background: var(--encre); color: #cbd5e1; padding: 56px 0 32px; }
footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .9rem; }
footer a { color: #cbd5e1; text-decoration: none; font-size: .9rem; }
footer a:hover { color: #fff; text-decoration: underline; }
/* ⚠️ Cinq colonnes depuis que le pied recueille aussi la navigation : le
   gabarit en comptait quatre et la cinquième passait à la ligne, seule. */
footer .cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 980px) { footer .cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { footer .cols { grid-template-columns: 1fr 1fr; } }
/* Reprend les styles qui étaient posés en attribut `style=` sur l'accueil. */
.logo-pied { color: #fff; }
.pied-baseline {
  color: #94a3b8; font-size: var(--t-sm);
  margin-top: var(--e-4); max-width: 34ch;
}
footer ul { list-style: none; display: grid; gap: .5rem; }
footer .bas {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem; color: #94a3b8;
}

/* ── Contenu éditorial (mentions légales, CGU) ─────────────────────────── */
.doc { max-width: 76ch; margin: 0 auto; padding: 56px 24px 80px; }
.doc h1 { margin-bottom: .4rem; }
.doc h2 { font-size: 1.35rem; margin: 2.4rem 0 .7rem; }
.doc h3 { margin: 1.6rem 0 .5rem; }
.doc p, .doc li { color: var(--texte-doux); }
.doc ul, .doc ol { margin: .8rem 0 .8rem 1.3rem; display: grid; gap: .4rem; }
.doc .maj { font-size: .85rem; color: var(--texte-faible); }

/* Réduit les animations pour qui le demande. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Libellé lu par les lecteurs d'écran, invisible à l'œil.
   ⚠️ Ajouté en v2.93 : les champs de recherche portent un <span class="sr-only">
   qui, sans cette règle, s'affichait en clair au-dessus de l'input. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   SYSTÈME D'ÉCRAN — posé le 10/08/2026 (chantier « direction artistique »)
   ═══════════════════════════════════════════════════════════════════════

   ⛔ Ce bloc REMPLACE les styles en dur des écrans. Toute règle écrite ici
   sert une des trois questions du visiteur ; une règle purement décorative
   n'y a pas sa place.

   La hiérarchie tient en quatre niveaux, et le site n'en utilise pas plus :
     ecran      → le titre et le chapô, une seule fois par page
     bloc       → une étape du raisonnement, séparée par du VIDE, pas par un trait
     carte      → un objet qu'on peut lire seul (un volet, une offre)
     mention    → une étiquette d'état, jamais un paragraphe
   ───────────────────────────────────────────────────────────────────────── */

/* ── L'écran ─────────────────────────────────────────────────────────────
   ⭐ Une colonne de lecture étroite : un parcours se lit, il ne se balaie
   pas. Les grilles larges restent réservées aux listes d'objets. */
.ecran { max-width: var(--lisible); margin: 0 auto; padding: var(--e-7) var(--e-5) var(--e-8); }
.ecran-large { max-width: var(--largeur); }

.ecran-fil {                       /* « ← revenir » : discret, toujours au même endroit */
  font-size: var(--t-sm); color: var(--texte-faible);
  margin: 0 0 var(--e-3);
}
.ecran-fil a { color: inherit; text-decoration: none; }
.ecran-fil a:hover { color: var(--encre); text-decoration: underline; }

.ecran-titre {
  font-family: var(--police-titre); font-weight: 700;
  font-size: var(--t-3xl); line-height: 1.08; letter-spacing: -.015em;
  margin: 0 0 var(--e-4);
}
.ecran-chapo {
  font-size: var(--t-lg); color: var(--texte-doux); line-height: 1.55;
  margin: 0 0 var(--e-7); max-width: 60ch;
}

/* ── Le bloc : une étape du raisonnement ────────────────────────────────
   ⭐ C'est le VIDE qui sépare, pas un cadre. Empiler des cartes encadrées
   produit un damier où plus rien ne ressort. */
.bloc { margin: 0 0 var(--e-7); }
.bloc-titre {
  font-size: var(--t-xl); letter-spacing: -.02em; margin: 0 0 var(--e-2);
}
.bloc-sous {
  font-size: var(--t-sm); color: var(--texte-doux); margin: 0 0 var(--e-4);
  max-width: 62ch;
}
/* L'étiquette qui annonce à quoi sert le bloc — l'équivalent d'un onglet. */
.bloc-mention {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-faible); margin: 0 0 var(--e-2);
}

/* ── La carte ────────────────────────────────────────────────────────── */
.carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--r); padding: var(--e-5); box-shadow: var(--ombre);
}
/* ⭐ Une carte cliquable se soulève à peine : le mouvement dit « ceci
   répond », ⛔ il ne cherche pas à impressionner. */
a.carte, .carte-actionnable {
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.carte:hover, .carte-actionnable:hover {
  border-color: var(--bleu); box-shadow: var(--ombre-md); transform: translateY(-1px);
}

/* ── Les états — LE cœur du système ─────────────────────────────────────
   🔴 Quatre états, quatre couleurs, et jamais une cinquième. Le visiteur
   apprend le code une fois et le relit partout : accueil, volets, offres,
   espace client. ⛔ Une couleur qui ne dit pas un état est du décor.

     bleu   « vous pouvez le faire ici »      → MGI agit
     vert   « gratuit »                        → rien à payer
     ambre  « réalisable avec un consultant »  → un humain, un prix
     gris   « pas encore couvert »             → et nous le disons
   ───────────────────────────────────────────────────────────────────── */
.etat {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1.3;
}
.etat::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.etat-ici    { color: var(--bleu-fonce); }
.etat-gratuit{ color: var(--vert); }
.etat-humain { color: var(--ambre); }
.etat-absent { color: var(--texte-faible); }

/* La carte hérite du sens par son liseré gauche — même code, autre support. */
.carte-etat { border-left: 3px solid var(--bordure-fort); }
.carte-ici     { border-left-color: var(--bleu); }
.carte-humain  { border-left-color: var(--ambre); }
.carte-absent  { border-left-color: var(--bordure-fort); background: var(--surface-2); }

/* ── LOT 2 — UN TOUR DE BOUCLE ───────────────────────────────────────────
   ⭐ Surface CLAIRE (/recherche) : on emploie les jetons de fond clair, ⛔ pas
   ceux du hero. Aucune couleur nouvelle, aucun composant nouveau — des blocs
   et des listes, comme partout ailleurs (§21 : une carte doit être ouvrable
   ou achetable, une information simple n'en est pas une). */
.tour-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.tour-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2);
  color: var(--texte); line-height: 1.5;
}

/* 🔴 §8 — l'étiquette de niveau n'a JAMAIS la couleur de la valeur : une
   déduction qui ressemble à un fait est un mensonge d'interface. */
.tour-niveau {
  font-size: var(--t-xs); color: var(--texte-faible);
  border: 1px solid var(--bordure-fort); border-radius: 100px;
  padding: 0 .5rem; white-space: nowrap;
}
.tour-su-confirme    .tour-niveau { color: var(--vert); border-color: var(--vert); }
.tour-su-deduit      .tour-niveau,
.tour-su-a_confirmer .tour-niveau { color: var(--ambre); border-color: var(--ambre); }

/* 🔴 §17 étape 5 — LA RÉPONSE. Elle porte la question du visiteur, donc elle
   se lit avant tout le reste : un cran au-dessus du corps, ⛔ sans toucher à
   l'échelle typographique, qui est posée et vérifiée. */
.tour-reponse-phrase {
  font-size: var(--t-xl); line-height: 1.35; color: var(--texte);
  margin: 0; text-wrap: pretty; max-width: 46ch;
}
/* 🔴 LA DEMANDE, RENDUE AU VISITEUR — 25/08/2026.
   ⚠️ Elle se lit AVANT la réponse, et elle doit s'en distinguer : c'est un
   écho, ⛔ pas une affirmation de plus. D'où le corps plus petit, la couleur
   douce et le filet à gauche — le même vocabulaire visuel qu'une citation.
   ⛔ Ne pas lui donner la taille de `.tour-reponse-phrase` : deux phrases du
   même poids empilées, et on ne sait plus laquelle est la réponse. */
/* ⭐ LES POINTS À RÉGLER — repliés, discrets, et lisibles une fois ouverts.
   ⚠️ Le `summary` doit se voir comme une commande : c'est lui qui dit au
   visiteur qu'il y a du fond dessous. ⛔ Sans cela, personne ne l'ouvre. */
/* ⭐ CE QUE NOUS FAISONS PASSER — la ligne de la formalité INPI.
   ⚠️ Elle voisine « Nous pouvons le faire » (prestation GEAR) : elle doit
   s'en distinguer sans crier. Même rythme, ⛔ pas la même accroche. */
.acte-formalite { margin: var(--e-2) 0 0; font-size: var(--t-sm); line-height: 1.5; }
.acte-formalite strong { display: block; color: var(--texte); }
.acte-formalite a { text-decoration: underline; text-underline-offset: 2px; }

.acte-points { margin: var(--e-2) 0 0; }
.acte-points > summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--texte-doux);
  padding: 2px 0; width: fit-content;
}
.acte-points > summary:hover { color: var(--texte); }
.acte-points ul {
  margin: var(--e-2) 0 0; padding-left: var(--e-4);
  font-size: var(--t-sm); color: var(--texte-doux); line-height: 1.5;
}
.acte-points li { margin: 0 0 var(--e-1); }
.acte-point-cas {
  display: block; font-size: var(--t-xs); color: var(--texte-faible);
}

/* 🔴 L'OUVERTURE RÉDIGÉE — contrat 2.2. Elle porte la réponse, donc elle se
   lit d'abord et se lit comme du texte : mesure de ligne courte, interligne
   confortable. ⛔ Ses pastilles de source ne sont pas décoratives — c'est ce
   qui la distingue d'une réponse d'assistant, et elles doivent rester
   visibles. */
.tour-ouverture { margin: 0 0 var(--e-4); max-width: 62ch; }
.tour-ouverture p {
  font-size: var(--t-lg); line-height: 1.6; color: var(--texte);
  margin: 0 0 var(--e-2); text-wrap: pretty;
}

/* ⭐ LE RETOUR À LA RÉPONSE, en tête d'une fiche produit. Sur fond sombre :
   ⚠️ le lien doit rester lisible sans devenir un bouton — c'est un chemin,
   ⛔ pas une action. La question rappelée en dessous, en plus petit, prouve au
   visiteur qu'on ne lui a pas fait perdre son fil. */
.hero-retour { margin: 0 0 var(--e-3); font-size: var(--t-sm); }
.hero-retour a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hero-retour-quoi { display: block; opacity: .72; margin-top: 2px; }

/* 🔴 L'ATTENTE DE LA RÉPONSE RÉDIGÉE — elle doit se voir, ⛔ sans crier.
   ⚠️ Un encadré à la place EXACTE où la réponse va s'écrire : c'est le seul
   endroit que le visiteur regarde. ⛔ Pas de barre de progression — nous ne
   savons pas quand le modèle répond, et une barre inventée ment.
   ⭐ Les trois points respirent ; `prefers-reduced-motion` les arrête. */
/* 🔴 **L'ATTENTE MONTE EN HAUT DE L'ÉCRAN — 10/09/2026, demande d'Éric.**
   *« Le décompte est trop bas, il serait plus intéressant qu'il soit plus
   haut et peut-être même en popup. »*

   ⛔ **Pas un popup modal**, et c'est délibéré : il bloquerait la lecture
   pendant quinze secondes, alors que le texte promet l'inverse — *« voici ce
   que nous savons déjà »*. ⚠️ Un modal qu'on ne peut pas fermer est le pire
   des deux mondes : il retient sans rien apprendre.

   ⭐ **Un bandeau flottant** fait mieux : il est en haut, il y RESTE quand on
   défile, il n'empêche rien de lire, et il s'en va tout seul quand la réponse
   arrive. ⚠️ Il sort du flux — ⭐ la réponse déterministe remonte d'autant. */
.reponse-attente {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: block; margin: 0; padding: var(--e-3) var(--e-5);
  border-bottom: 2px solid var(--bordure-fort);
  /* ⚠️ Fond OPAQUE : ⛔ un fond translucide laisserait lire le texte de la
     page à travers, et le chrono deviendrait illisible en défilant. */
  background: var(--surface-2);
  box-shadow: 0 6px 24px rgba(8, 24, 43, .18);
  max-width: none;
}
/* ⭐ Le contenu reste borné à la largeur de lecture, ⛔ le bandeau non. */
.reponse-attente > * { max-width: var(--lisible); margin-left: auto; margin-right: auto; }
/* ⚠️ Le bandeau recouvre le haut : ⭐ on rend la place, sinon la tête du site
   passe dessous et le titre de l'écran devient illisible.
   ⛔ **MESURÉ, ⛔ pas estimé** : 143 px en large, 77 px en étroit — ⚠️ une
   valeur trop courte recouvrirait le contenu, et c'est le défaut qu'on
   corrige. ⭐ On arrondit au-dessus : un peu d'air vaut mieux qu'un titre
   caché. ⭐ Et ce padding n'existe QUE pendant l'attente — il s'en va avec le
   bandeau, sans une ligne de JavaScript. */
body:has(.reponse-attente) { padding-top: 152px; }
/* ⛔ `:has()` manque encore à quelques navigateurs : ⚠️ le repli garde le
   bandeau utile — il recouvre alors la bannière, ⭐ ce qui reste préférable à
   un décompte qu'on ne voit pas. */
@media (max-width: 700px) {
  .reponse-attente { padding: var(--e-2) var(--e-4); }
  /* ⭐ En étroit, l'explication passe à la trappe : ⛔ le bandeau doit rester
     une bande, pas un écran. */
  .reponse-attente .reponse-attente-quoi { display: none; }
  body:has(.reponse-attente) { padding-top: 92px; }
}
/* 🔴 **LE DÉCOMPTE SE VOIT — 26/08/2026, demande d'Éric.** La ligne devient
   une rangée : la roue, ce que nous faisons, et le nombre EN GRAND à droite.
   ⭐ C'est le nombre qui bouge, et il ne dit que le temps écoulé. */
.reponse-attente-titre {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-md); font-weight: 600; color: var(--texte);
}
.reponse-attente-mot { flex: 1 1 auto; }
.reponse-attente-quoi {
  display: block; margin-top: var(--e-1); font-size: var(--t-sm);
  color: var(--texte-doux); line-height: 1.5;
}
/* ⭐ LA ROUE. ⚠️ `currentColor` sur trois quarts du cercle et transparent sur
   le dernier : c'est ce quart manquant qui rend la rotation visible.
   ⛔ Aucune image, aucun SVG à charger — la roue doit tourner à la première
   milliseconde, sinon elle arrive après la question qu'elle répond. */
.reponse-attente-roue {
  display: inline-block; width: 1em; height: 1em; margin-right: .5em;
  vertical-align: -.12em; border-radius: 50%;
  border: 2px solid var(--bordure-fort); border-top-color: var(--texte);
  animation: mgi-roue .9s linear infinite;
}
@keyframes mgi-roue { to { transform: rotate(360deg); } }

/* ⭐ Le temps écoulé — ⛔ jamais une prédiction. ⚠️ `tabular-nums` : sans lui
   le nombre saute d'un chiffre à l'autre, et le saut se lit comme un défaut. */
.reponse-attente-chrono {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1;
  font-size: clamp(1.75rem, 6vw, 2.5rem); color: var(--texte);
}
.reponse-attente-chrono small {
  font-size: .42em; font-weight: 700; margin-left: .1em; color: var(--texte-faible);
}

/* ⭐ **CE QUE NOUS RELISONS** — les fiches réellement envoyées au modèle,
   en boucle. ⛔ Elles ne se cochent pas : une liste qui se coche serait une
   barre de progression déguisée, et nous ne savons pas où nous en sommes. */
.reponse-attente-defile {
  display: block; margin-top: var(--e-2);
  font-size: var(--t-sm); color: var(--texte-faible);
  /* ⚠️ Une seule ligne, coupée proprement : deux fiches de longueurs très
     différentes feraient sauter la hauteur du bloc à chaque rotation. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reponse-attente-lu {
  color: var(--texte-doux); font-style: italic;
  transition: opacity .22s ease;
}

/* ⚠️ Mouvement réduit : ⛔ la roue ne doit pas tourner, mais elle doit RESTER
   visible — c'est elle qui dit qu'on travaille. Elle devient un point plein. */
@media (prefers-reduced-motion: reduce) {
  .reponse-attente-roue {
    animation: none; border-color: var(--texte); border-width: 3px;
  }
}

/* 🔴 LES DÉMARCHES À EFFECTUER — contrat 2.3. La réponse d'abord, la liste
   ensuite, les produits DANS la liste. ⚠️ Une tâche se lit comme une consigne :
   titre net, explication en retrait, et l'offre en dessous — ⛔ jamais avant. */
.tour-taches { margin: var(--e-5) 0 0; max-width: 68ch; }
.tour-taches-titre { font-size: var(--t-lg); margin: 0 0 var(--e-3); }
.tour-taches-ensemble {
  margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4);
  background: var(--surface-2); border-left: 3px solid var(--bordure-fort);
  border-radius: 6px; font-size: var(--t-sm); line-height: 1.5;
}
.tour-taches-ensemble strong { display: block; color: var(--texte); }
.tour-taches-liste { margin: 0; padding-left: var(--e-5); }
.tour-taches-liste > li { margin: 0 0 var(--e-4); }
.tour-tache-titre { font-weight: 600; color: var(--texte); margin: 0; }
.tour-tache-quoi {
  margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--texte-doux);
  line-height: 1.55;
}
.tour-tache-offre { margin: var(--e-2) 0 0; font-size: var(--t-sm); line-height: 1.5; }
.tour-tache-offre strong { display: block; color: var(--texte); }
/* ⭐ L'OUTIL GRATUIT — 26/08/2026. Même gabarit que l'offre, la teinte du
   GRATUIT : `--vert` dit « acquis » partout ailleurs sur le site.
   ⛔ Aucune couleur nouvelle. */
.tour-tache-outil { margin: var(--e-2) 0 0; font-size: var(--t-sm); line-height: 1.5; }
.tour-tache-outil strong { display: block; color: var(--vert); }
.tour-taches-note { margin: var(--e-3) 0 0; }

/* ⭐ LE PANIER — 25/08/2026. Une liste, un total, rien de plus.
   ⚠️ « Ajouter au panier » est un LIEN, ⛔ pas un bouton : l'achat direct
   reste l'action principale de la fiche, et deux boutons de même poids
   feraient hésiter là où il faut décider. */
.formule-panier { margin: var(--e-2) 0 0; }
.lien-bouton {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-sm); color: var(--texte-doux);
  text-decoration: underline; text-underline-offset: 3px;
}
.lien-bouton:hover { color: var(--texte); }
.panier-lignes { list-style: none; margin: 0; padding: 0; }
.panier-lignes > li {
  display: flex; gap: var(--e-3); align-items: baseline; flex-wrap: wrap;
  padding: var(--e-3) 0; border-bottom: 1px solid var(--bordure);
}
.panier-libelle { flex: 1 1 20ch; }
.panier-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: var(--e-4) 0 0; font-size: var(--t-lg); font-weight: 600;
}

/* ⭐ LA PORTE DE SORTIE, sous une réponse — 25/08/2026. La vitrine ne
   s'étale plus ici : il reste UN lien vers le catalogue complet.
   ⚠️ Discret et centré : ⛔ ce n'est pas un appel à l'action, c'est une issue
   pour qui veut voir le reste. ⛔ Lui donner le poids d'un bouton relancerait
   exactement l'effet qu'on vient de retirer. */
.reponse-sortie {
  margin: var(--e-6) 0 0; padding-top: var(--e-4);
  border-top: 1px solid var(--bordure); text-align: center;
}
.reponse-sortie a { font-size: var(--t-md); text-underline-offset: 3px; }
.reponse-sortie span {
  display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--texte-doux);
}

/* ⭐ LE REPLI DES OFFRES — 25/08/2026. Trois formules visibles, le reste
   derrière un résumé cliquable. ⚠️ Le `summary` doit se voir comme une
   commande : sans cela, personne ne l'ouvre et les autres formules
   disparaissent pour de bon. ⛔ Rien n'est caché — tout est à un clic. */
.tour-offres-suite { margin: var(--e-3) 0 0; }
.tour-offres-suite > summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--texte-doux);
  padding: var(--e-2) 0; width: fit-content;
}
.tour-offres-suite > summary:hover { color: var(--texte); }

/* ⭐ **LES CARTES — 26/08/2026, demande d'Éric.** Les produits « dans des
   cadres », comme sur `offres.html` de GEAR : un cadre par produit, sa nature
   en tête, son prix, ce qu'il comprend, et un lien vers LUI.
   ⛔ Aucune couleur nouvelle — `--ambre` dit déjà « un humain le réalise »
   partout ailleurs sur le site.
   ⚠️ `auto-fit` + `minmax` : à une colonne sur téléphone, sans point de
   rupture à maintenir. */
.offre-cartes {
  display: grid; gap: var(--e-3); margin-top: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.offre-cartes-item {
  display: flex; flex-direction: column; gap: var(--e-1);
  padding: var(--e-4); border: 1px solid var(--bordure); border-radius: var(--r);
  background: var(--surface);
}
/* ⭐ Ce que la carte pousse en bas : le lien reste aligné d'une carte à
   l'autre, quelle que soit la longueur du texte. */
.offre-cartes-item > p:last-child { margin-top: auto; padding-top: var(--e-2); }
/* 🔴 LA NATURE, EN TÊTE ET SANS AMBIGUÏTÉ — GEAR **rédige** un acte, MGI
   **télétransmet** une formalité. ⛔ Les confondre reviendrait à vendre un
   document pour un dépôt. */
.offre-nature {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texte-faible); margin: 0;
}
.offre-nature-gear { color: var(--ambre); }
.offre-cartes-item .offre-titre { margin: 0; font-weight: 700; }
.offre-cartes-item .offre-prix {
  margin: 0; font-size: var(--t-lg); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.offre-cartes-item .bloc-sous { margin: 0; font-size: var(--t-sm); }

/* ⭐ **LE PARCOURS OFFICIEL, REPLIÉ — 26/08/2026.** Trois volets racontaient
   la même chose ; celui-ci attend qu'on le demande. ⛔ Rien n'est supprimé. */
.plan-officiel > summary {
  cursor: pointer; padding: var(--e-2) 0; width: fit-content;
}
.plan-officiel > summary:hover .bloc-mention { color: var(--texte); }
.plan-officiel-quoi {
  display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--texte-doux);
}

.tour-reformulation {
  font-size: var(--t-md); line-height: 1.5; color: var(--texte-doux);
  margin: 0 0 var(--e-3); padding-left: var(--e-3); max-width: 62ch;
  border-left: 2px solid var(--bordure-fort);
}
.tour-reponse-precision {
  font-size: var(--t-md); color: var(--texte-doux); line-height: 1.55;
  margin: var(--e-3) 0 0; max-width: 62ch;
}

/* 🔴 LE RYTHME DE LA BOUCLE — 14/08/2026, sur capture d'écran d'Éric.
   Quatre étiquettes en capitales empilées, 48 px entre chacune, et une page à
   moitié vide : ⛔ l'air ne fait pas le sérieux, il fait le vide. Les blocs du
   tour se resserrent — ⛔ `.bloc` reste inchangé ailleurs, son rythme est posé
   et vérifié sur les autres écrans. */
.tour-reponse, .tour-sources, .tour-plan, .tour-action, .tour-question,
.tour-decouvert { margin-bottom: var(--e-6); }

/* ⭐ Ce que nous avons compris : une LIGNE au-dessus de la réponse, ⛔ plus une
   section titrée pour un seul élément. L'étiquette et les pastilles partagent
   la même ligne tant que la place le permet. */
.tour-compris {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-4);
}
.tour-compris-quoi {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-faible);
}
.tour-compris .tour-liste {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
}

/* ═══════════════════════════════════════════════════════════════════════
   LA PAGE DE RÉPONSE — design validé le 14/08/2026.
   ⭐ Elle réutilise `.hero` de l'accueil : même aurore, mêmes contrastes déjà
   recalculés. ⛔ Aucun fond nouveau, aucune teinte nouvelle.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⭐ Variante de rythme du hero : plus courte que celle de l'accueil, et
   CENTRÉE. ⛔ Elle ne touche ni les couleurs ni l'échelle typographique. */
/* 🔴 **LA RÉPONSE TOMBAIT SOUS LA LIGNE DE FLOTTAISON — 10/09/2026.**
   ⚠️ Constat d'Éric : *« on doit bouger la barre latérale pour voir la
   réponse »*, et *« le compte à rebours est trop bas, on peut avoir
   l'impression que rien ne se passe »*. ⛔ Mesuré : la réponse commençait à
   **500 px** du haut — avec les barres du navigateur, il n'en restait qu'une
   ligne visible sur un portable.

   ⭐ **Un seul réglage sert les deux griefs** : ce qui précède la réponse,
   c'est cette tête. ⚠️ Elle répète la question que le champ affiche déjà
   juste dessous — ⛔ deux fois la même chose sur 130 px. ⭐ On la resserre,
   ⛔ on ne retire rien : le titre reste, pour le repérage et pour le
   référencement. */
.hero-reponse { padding: 28px 0 24px; text-align: center; }
/* 🔴 ⛔ **DEUX ESPACEMENTS S'EMPILAIENT SOUS LA TÊTE.** ⚠️ Mesuré le
   10/09/2026 : `.ecran` pose 48 px en haut, et le premier `.bloc` 72 px de
   plus — ⭐ **120 px de vide** entre la question et sa réponse, alors que la
   tête vient déjà de les séparer.
   ⛔ Le padding du bloc existe pour SÉPARER DEUX BLOCS : ⚠️ le premier n'a
   personne au-dessus de lui. ⭐ On ne l'applique donc qu'à partir du second. */
.hero-reponse + .ecran { padding-top: var(--e-5); }
.hero-reponse + .ecran > .bloc:first-child { padding-top: 0; }
/* ⭐ 17/08/2026 — l'accueil SANS question respire plus que la page de réponse :
   il n'a rien à restituer, il invite. ⚠️ Posé APRÈS `.hero-reponse` : à
   spécificité égale, c'est le dernier qui gagne. ⛔ Ne pas remonter ce bloc. */
.hero-accueil { padding: 64px 0 72px; }
@media (max-width: 700px) { .hero-accueil { padding: 44px 0 52px; } }
/* 🔴 17/08/2026 — LE TITRE N'ÉTAIT PAS CENTRÉ, il en avait seulement l'air.
   `.hero-titre-reponse` posait `margin: 0 auto`, mais `.hero h1` (une classe
   ET un élément) est plus spécifique et remettait `margin: 1.1rem 0` : le
   titre, borné à 24ch, restait donc collé à GAUCHE dans une tête centrée.
   ⚠️ Invisible en mobile, où 24ch remplit la largeur — c'est en desktop que le
   défaut se voit. ⭐ Deux classes reprennent la main, ⛔ sans toucher ni la
   taille ni la couleur. */
.hero .hero-titre-reponse { margin-left: auto; margin-right: auto; }
.hero-fil {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #a9c3d8; margin: 0 0 var(--e-2);
}
/* ⚠️ La demande du visiteur est un titre d'AFFICHAGE : Fraunces y a sa place —
   c'est le titre de l'écran, ⛔ pas un libellé de carte. */
.hero-titre-reponse {
  font-family: var(--police-titre); font-weight: 600;
  /* ⚠️ `--t-2xl` et non `--t-3xl` : ⭐ la question du visiteur reste le titre
     de l'écran, ⛔ mais elle n'a pas à occuper trois lignes avant la réponse
     — c'est LA RÉPONSE qu'il est venu chercher. */
  font-size: var(--t-2xl); line-height: 1.2; color: #f2f7fc;
  margin: 0 auto var(--e-4); max-width: 26ch; text-wrap: balance;
}
/* Le champ reprend `.champ` du site ; seule sa largeur et son centrage changent. */
.form-reponse {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  max-width: 680px; margin: 0 auto; text-align: left;
}
.form-reponse .champ { flex: 1 1 260px; margin: 0; }
.form-reponse .btn { flex: 0 0 auto; }

/* ⭐ Ce que nous avons compris : UNE ligne dans le hero. ⛔ Plus une section
   titrée pour un seul élément — c'est ce qui faisait paraître la page vide. */
.hero-compris {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--e-2) var(--e-3); margin: var(--e-5) 0 0;
}
.hero-compris-quoi {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #a9c3d8;
}
/* ⚠️ Fond translucide : le contraste a été calculé sur la couche COMPOSÉE
   (blanc à 10 % sur l'aurore), ⛔ pas sur la palette. */
.hero-puce {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  border-radius: 100px; padding: 3px var(--e-3);
  font-size: var(--t-sm); color: #f2f7fc;
}
.hero-puce em { font-style: normal; font-size: var(--t-xs); color: #bcd2e4; }

/* ⭐ La cascade : elle montre le guichet en train de LIRE. ⚠️ Cadence du
   lot 1 — 60 ms d'écart, 300 ms d'entrée. ⛔ Rien d'autre ne bouge ici. */
@keyframes mgi-monte {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.hero-puce { animation: mgi-monte .3s ease both; }
.hero-puce:nth-of-type(1) { animation-delay: .10s; }
.hero-puce:nth-of-type(2) { animation-delay: .16s; }
.hero-puce:nth-of-type(3) { animation-delay: .22s; }
.hero-puce:nth-of-type(4) { animation-delay: .28s; }

/* ── La colonne de lecture ─────────────────────────────────────────────
   ⭐ Une seule colonne, centrée : ⛔ pas de seconde colonne, donc aucun vide
   possible à côté du texte. C'était l'origine du défaut du 14/08. */
.ecran > .bloc, .ecran > .carte { max-width: 74ch; margin-left: auto; margin-right: auto; }
.tour-reponse, .tour-sources, .tour-plan, .tour-action, .tour-question,
.tour-decouvert { margin-bottom: var(--e-6); }

/* ── Le plan, en phases ───────────────────────────────────────────────── */
.phase { margin: 0 0 var(--e-6); }
.phase:last-of-type { margin-bottom: 0; }
.phase-tete {
  display: flex; align-items: center; gap: var(--e-3);
  margin: 0 0 var(--e-4); padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--bordure);
}
.phase-n {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 100px; background: var(--bleu-pale); color: var(--bleu-fonce);
  font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.phase-titre { font-size: var(--t-lg); font-weight: 700; color: var(--encre); }

.actes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); }
/* ⛔ Pas d'empattements sur un intitulé d'acte : la police de titre suit le
   RÔLE, règle du 11/08/2026. */
.acte-titre {
  font-size: var(--t-md); font-weight: 700; color: var(--encre); margin: 0 0 var(--e-1);
}
.acte-quoi {
  font-size: var(--t-sm); color: var(--texte-doux); line-height: 1.55; margin: 0;
}

/* ⭐ Les références : petites, vérifiables d'un clic. La fiche officielle
   d'abord, puis les articles de loi qu'elle cite. ⛔ Aucune source ajoutée. */
.refs { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: super; }
.refs a {
  font-size: .66rem; font-weight: 700; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--bordure);
  border-radius: 4px; padding: 0 4px; color: var(--texte-faible);
}
.refs a:hover, .refs a:focus-visible { color: var(--bleu-fonce); border-color: var(--bleu); }

/* ⭐ L'offre dans le fil : un filet ambre — la teinte qui dit déjà « un humain
   le réalise » partout ailleurs. ⛔ Pas un encadré qui coupe la lecture. */
.acte-offre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-2);
  margin: var(--e-3) 0 0; padding-left: var(--e-3);
  border-left: 2px solid var(--ambre);
  font-size: var(--t-sm); color: var(--texte-doux);
}
.acte-offre strong { color: var(--ambre); font-weight: 700; }
/* ⭐ Et l'outil gratuit de l'étape : même filet, la teinte de l'acquis. */
.acte-outil {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-2);
  margin: var(--e-3) 0 0; padding-left: var(--e-3);
  border-left: 2px solid var(--vert);
  font-size: var(--t-sm); color: var(--texte-doux);
}
.acte-outil strong { color: var(--vert); font-weight: 700; }
.acte-offre .prix { font-weight: 700; color: var(--ambre); font-variant-numeric: tabular-nums; }
.acte-offre-autres { width: 100%; font-size: var(--t-xs); color: var(--texte-faible); }
/* ⚠️ Un bouton, ⛔ pas un lien : il n'emmène pas ailleurs, il ouvre le détail. */
.ouvrir-offre {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--encre); cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--ambre);
  text-underline-offset: 3px;
}
.ouvrir-offre:hover, .ouvrir-offre:focus-visible { color: var(--ambre); }
.acte-offre-autres .ouvrir-offre { font-size: var(--t-xs); font-weight: 600; color: var(--texte-doux); }

/* ── Le reste du parcours, et la preuve ───────────────────────────────── */
.plan-suite { margin-top: var(--e-5); font-size: var(--t-sm); }
.plan-suite summary { cursor: pointer; color: var(--texte-doux); width: fit-content; }
.plan-liste {
  margin: var(--e-3) 0 0; padding-left: 1.5rem; color: var(--texte-doux);
  display: grid; gap: var(--e-1);
}
.plan-preuve-lien { font-size: var(--t-xs); color: var(--texte-faible); }
.plan-source {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin: var(--e-5) 0 0; padding-top: var(--e-4);
  border-top: 1px solid var(--bordure);
  font-size: var(--t-xs); color: var(--texte-faible); line-height: 1.5;
}
.etape-verifie {
  color: var(--vert); background: var(--vert-pale); border: 1px solid var(--vert);
  border-radius: 100px; padding: 0 var(--e-2); font-weight: 700; letter-spacing: .03em;
}

/* ── La bande d'articles ───────────────────────────────────────────────
   🔴 Design validé le 14/08/2026. ⭐ C'est la hauteur FIXE du bandeau qui
   aligne les cartes entre elles : ⛔ ce n'est pas l'espacement, et c'est ce
   qui supprime les vides. Toutes les cartes ont la même anatomie. */
.grille-articles {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.article {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--ombre);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* ⭐ « Une carte cliquable se soulève à peine » — la règle du site. */
.article:hover, .article:focus-visible {
  box-shadow: var(--ombre-md); border-color: var(--bleu); transform: translateY(-2px);
}
/* ⚠️ Lavis de MARQUE, ⛔ pas un état : du turquoise très bas, qui donne de la
   couleur sans prétendre signifier quoi que ce soit. */
.article-bandeau {
  height: 92px; display: grid; place-items: center;
  background: radial-gradient(120% 140% at 50% 0%, var(--bleu-pale) 0%, var(--surface-2) 70%);
  border-bottom: 1px solid var(--bordure);
  font-family: var(--police-titre); font-size: 1.5rem; font-weight: 600;
  color: var(--bleu-fonce); letter-spacing: .06em;
}
.article:hover .article-bandeau { color: var(--bleu); }
.article-corps {
  display: flex; flex-direction: column; gap: var(--e-2); flex: 1;
  padding: var(--e-4) var(--e-5) var(--e-5);
}
/* ⚠️ Pastille NEUTRE : une catégorie n'est pas un état, et il n'y a que quatre
   couleurs d'état. ⛔ La colorer ferait une cinquième. */
.categorie {
  align-self: start; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-2); border: 1px solid var(--bordure);
  color: var(--texte-faible); border-radius: var(--r-sm); padding: 1px var(--e-2);
}
/* ⛔ Pas d'empattements : la police de titre suit le RÔLE, ⛔ jamais un
   intitulé de carte. Règle du 11/08/2026. */
.article-titre { font-size: var(--t-md); font-weight: 700; color: var(--encre); }
.article-quoi { font-size: var(--t-sm); color: var(--texte-doux); line-height: 1.55; }
.article-lien {
  margin-top: auto; padding-top: var(--e-3);
  font-size: var(--t-sm); font-weight: 600; color: var(--bleu-fonce);
}

@media (prefers-reduced-motion: reduce) {
  .article { transition: none; }
  .article:hover { transform: none; }
}

/* ── Le panneau de détail — l'aller-retour sans perdre sa place ────────── */
.voile {
  position: fixed; inset: 0; background: rgba(11,31,58,.45); z-index: 40;
}
.tiroir {
  position: fixed; top: 0; right: 0; height: 100%; width: min(430px, 100%);
  background: var(--surface); border-left: 1px solid var(--bordure);
  box-shadow: -12px 0 40px rgba(11,31,58,.18); z-index: 50; overflow-y: auto;
}
.tiroir-dedans { display: flex; flex-direction: column; min-height: 100%; }
.tiroir-tete {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--e-4); padding: var(--e-5); border-bottom: 1px solid var(--bordure);
}
.tiroir-nature {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texte-faible); margin: 0 0 var(--e-1);
}
.tiroir-tete h3 { font-size: var(--t-lg); margin: 0; color: var(--encre); }
.tiroir-prix { font-size: var(--t-xl); font-weight: 700; color: var(--ambre); margin: var(--e-1) 0 0; }
.fermer {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 100px;
  background: none; border: 1px solid var(--bordure); color: var(--texte-doux);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.fermer:hover { border-color: var(--bordure-fort); color: var(--encre); }
.tiroir-corps { padding: var(--e-5); display: grid; gap: var(--e-5); }
.tiroir-corps h4 {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-faible); margin: 0 0 var(--e-2);
}
.tiroir-corps p { margin: 0; font-size: var(--t-sm); color: var(--texte-doux); }
.tiroir-pied {
  margin-top: auto; padding: var(--e-5); border-top: 1px solid var(--bordure);
  background: var(--surface-2); display: grid; gap: var(--e-2);
}

/* ⛔ Tout le mouvement s'arrête si le visiteur l'a demandé — et rien n'est
   perdu : la cascade n'apporte que du rythme, jamais une information. */
@media (prefers-reduced-motion: reduce) {
  .hero-puce { animation: none; }
}

.tour-sources .tour-liste li a { color: var(--bleu-fonce); }
.tour-options { display: grid; gap: var(--e-2); margin-top: var(--e-4); }
/* ⭐ L'option que nous avons déduite est signalée, ⛔ jamais présélectionnée :
   le visiteur choisit, il ne subit pas notre hypothèse. */
.tour-option-deduite { border-color: var(--ambre); background: var(--ambre-pale); }
.tour-change {
  margin-top: var(--e-3); font-size: var(--t-xs); color: var(--texte-faible);
}

/* 🔴 LE RAPPEL D'ÉTAPE — une offre déjà vendue dans la boucle ne se revend pas
   dans le plan. ⛔ Ni description, ni prix dominant : une ligne, un lien.
   ⭐ C'est ce qui distingue « le plan renvoie vers l'offre » de « le plan
   remet une carte commerciale ». */
.volet-rappel { margin: var(--e-2) 0 0; font-size: var(--t-sm); }
.volet-rappel a { color: var(--bleu-fonce); }

/* Le pli des prestations surnuméraires : ⛔ aucune offre n'est retirée du
   moteur, elles sont toutes atteignables — mais huit cartes à la suite se
   lisent comme un catalogue, pas comme une réponse. */
.volet-autres { margin-top: var(--e-3); }
.volet-autres summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--bleu-fonce);
}
.volet-autres[open] summary { margin-bottom: var(--e-2); }

/* La répartition des sujets — ⛔ chaque nombre est calculé, jamais écrit. */
.volets-repartition {
  list-style: none; margin: var(--e-3) 0 var(--e-5); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e-2);
}
.volets-repartition li {
  font-size: var(--t-sm); color: var(--texte-doux);
  border: 1px solid var(--bordure); border-left-width: 3px;
  border-radius: var(--r-sm); padding: .25rem .7rem;
}
.volets-repartition strong { color: var(--texte); }

/* ⭐ Le sujet non couvert et le hors-périmètre : ⛔ ni alarme, ni excuse. Un
   filet gris à gauche — la même sobriété que l'état « pas encore couvert »
   des volets, dont ils sont la version conversationnelle. */
.tour-decouvert {
  border-left: 3px solid var(--bordure-fort);
  padding-left: var(--e-5);
}

/* §14 — d'abord ce que le visiteur peut faire seul, ensuite ce que nous
   pouvons faire. ⛔ Jamais l'inverse : le gratuit n'est pas un lot de
   consolation, c'est le produit. */
.tour-action-seul, .tour-action-nous {
  margin: var(--e-2) 0 0; color: var(--texte); line-height: 1.6;
}
.tour-action-nous { color: var(--texte-doux); }
.tour-action-nous strong { color: var(--ambre); }

/* ── L'action suivante ──────────────────────────────────────────────────
   ⭐ Il n'y en a qu'UNE par écran, et elle se voit sans être criarde. */
.action-suite { margin: var(--e-5) 0 0; }
.action-note  { font-size: var(--t-sm); color: var(--texte-faible); margin: var(--e-2) 0 0; }

/* ── La progression ─────────────────────────────────────────────────────
   ⭐ Le visiteur doit savoir où il en est SANS compter les écrans. */
.progression { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-4); }
.progression-barre {
  flex: 1; height: 4px; border-radius: 2px; background: var(--bordure);
  overflow: hidden;
}
.progression-fait { display: block; height: 100%; background: var(--bleu); border-radius: 2px; }
.progression-txt { font-size: var(--t-xs); color: var(--texte-faible); white-space: nowrap; }

/* ── Le prix ────────────────────────────────────────────────────────────
   ⛔ Jamais en rouge, jamais en gros : un prix affiché franchement rassure ;
   un prix mis en scène inquiète. */
.prix {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--encre);
  white-space: nowrap;
}
.prix-gratuit { color: var(--vert); }

@media (max-width: 640px) {
  .ecran { padding: var(--e-5) var(--e-4) var(--e-7); }
  :root { --t-2xl: 1.5rem; --t-xl: 1.2rem; }
}

/* ── Un résultat du guide ───────────────────────────────────────────────
   ⭐ Il vient APRÈS le plan du projet : le visiteur veut d'abord savoir ce
   que son projet implique. La carte reste sobre — c'est une lecture, pas
   une offre. */
.resultat { display: block; margin-bottom: var(--e-3); text-decoration: none; }
.resultat-tete {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  align-items: baseline; justify-content: space-between;
}
.resultat-titre { font-size: var(--t-lg); letter-spacing: -.015em; margin: 0; flex: 1 1 16rem; }
.resultat-type  { font-size: var(--t-xs); color: var(--texte-faible); }
.resultat-extrait { font-size: var(--t-sm); color: var(--texte-doux); margin: var(--e-2) 0 0; line-height: 1.55; }
.resultat-detail  { font-size: var(--t-xs); color: var(--bleu-fonce); font-weight: 600; margin: var(--e-2) 0 0; }

/* ── La carte d'intention ───────────────────────────────────────────────
   ⭐ Elle porte la réponse principale : ce que nous savons faire de la
   demande. Un seul liseré, un seul état, une seule action. */
.intention { margin: 0 0 var(--e-5); border-left: 3px solid var(--bordure-fort); }
.intention-dispo   { border-left-color: var(--bleu); }
.intention-gear    { border-left-color: var(--ambre); }
.intention-bientot { border-left-color: var(--bordure-fort); background: var(--surface-2); }
.intention-etat {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 var(--e-2);
}
.intention-etat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.intention-dispo   .intention-etat { color: var(--bleu-fonce); }
.intention-gear    .intention-etat { color: var(--ambre); }
.intention-bientot .intention-etat { color: var(--texte-faible); }
.intention-titre { font-size: var(--t-xl); letter-spacing: -.02em; margin: 0 0 var(--e-1); }
.intention-sujet { font-size: var(--t-md); color: var(--texte-doux); margin: 0; line-height: 1.55; }

/* ── Le champ de demande ────────────────────────────────────────────────
   ⭐ C'est la porte d'entrée du site : il doit se voir sans être criard,
   et rester confortable au pouce. */
.form-recherche { margin: 0 0 var(--e-6); }
.form-recherche input[type="search"] {
  font-size: var(--t-md); padding: var(--e-4) var(--e-4);
  border-radius: var(--r);
}

/* ── La qualification ───────────────────────────────────────────────────
   ⭐ Un choix, pas un formulaire. Chaque option est une cible large : au
   pouce comme à la souris, on vise une carte entière, ⛔ pas un radio de
   14 px. C'est ce qui fait qu'un parcours de 5 questions ne fatigue pas. */
.choix { display: grid; gap: var(--e-3); max-width: 34rem; }
.choix-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-4) var(--e-5); text-decoration: none; color: var(--encre);
  font-size: var(--t-md); line-height: 1.4;
}
.choix-fleche { color: var(--bleu-fonce); flex: none; transition: transform .15s; }
.choix-option:hover .choix-fleche { transform: translateX(3px); }

/* Le rappel des réponses déjà données réutilise la carte de restitution :
   même objet, même sens — ⛔ pas un second style pour la même idée. */
.compris-phrase { font-size: var(--t-lg); color: var(--encre); margin: 0 0 var(--e-2); line-height: 1.45; }
.compris-modifier { font-size: var(--t-xs); margin-left: var(--e-2); white-space: nowrap; }

/* ── Les trois chiffres de tête du parcours ─────────────────────────────
   ⭐ Ce que le visiteur GAGNE, avant l'administration : combien d'actions,
   combien de chiffres vérifiés, et à partir de quel prix. */
.resume { margin-top: var(--e-5); }
.resume-chiffre {
  font-size: var(--t-2xl); font-weight: 800; color: var(--encre);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; margin: 0;
}
.resume-libelle { font-size: var(--t-sm); color: var(--texte-doux); margin: var(--e-1) 0 0; line-height: 1.4; }
.resume-detail  { font-size: var(--t-xs); color: var(--texte-faible); margin: var(--e-2) 0 0; line-height: 1.45; }

/* ── L'information vérifiée ─────────────────────────────────────────────
   🔴 C'est ce qui distingue MGI d'un blog : chaque chiffre porte sa source
   et sa date. ⭐ Une seule carte, des lignes séparées par un filet — ⛔ pas
   cinq cartes empilées, qui feraient de la preuve un catalogue. */
.faits { padding: 0; overflow: hidden; }
.fait { padding: var(--e-4) var(--e-5); border-top: 1px solid var(--bordure); }
.fait:first-child { border-top: 0; }
.fait-tete { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: baseline; margin: 0 0 var(--e-1); }
.fait-titre { font-size: var(--t-md); color: var(--encre); }
.fait-valeur {
  font-size: var(--t-lg); font-weight: 800; color: var(--bleu-fonce);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.fait-portee {
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texte-faible);
}
.fait-obligatoire { color: var(--encre); }
.fait-texte  { font-size: var(--t-sm); color: var(--texte-doux); margin: 0 0 var(--e-1); line-height: 1.55; }
.fait-source { font-size: var(--t-xs); color: var(--texte-faible); margin: 0; line-height: 1.5; }
.fait-doute  { color: var(--ambre); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; }

/* ── Ce qu'il faut préparer ─────────────────────────────────────────── */
.preparer { margin-bottom: var(--e-3); }
.preparer-titre { margin: 0 0 var(--e-2); font-size: var(--t-md); }
.preparer-liste { margin: 0 0 var(--e-2); padding-left: var(--e-4); font-size: var(--t-sm); color: var(--texte-doux); }
.preparer-liste li { margin-bottom: var(--e-1); line-height: 1.5; }

/* ── Une offre ──────────────────────────────────────────────────────────
   ⭐ Le prix se lit d'un coup d'œil, sans être mis en scène. L'état porte
   le même code que partout : bleu « nous le faisons », ambre « un
   consultant », vert « gratuit ». */
.offre { margin-bottom: var(--e-3); }
.offre-tete { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: baseline; margin: 0 0 var(--e-2); }
.offre-titre { font-size: var(--t-lg); letter-spacing: -.015em; }
.offre-devis { font-size: var(--t-sm); color: var(--texte-faible); }
.offre-pour { font-size: var(--t-sm); color: var(--texte-doux); margin: 0 0 var(--e-2); line-height: 1.55; }
.offre-contenu { margin: 0; padding-left: var(--e-4); font-size: var(--t-sm); color: var(--texte-doux); }
.offre-contenu li { margin-bottom: var(--e-1); line-height: 1.5; }
.offre-seule {
  font-size: var(--t-sm); color: var(--texte-doux); line-height: 1.55;
  margin: var(--e-3) 0 0; padding: var(--e-3) var(--e-4);
  background: var(--surface-2); border-radius: var(--r-sm);
}
.achat-erreur { font-size: var(--t-sm); color: var(--rouge); margin: 0 0 var(--e-2); }

/* ── L'espace client : des panneaux, pas un damier ──────────────────────
   ⭐ Après l'achat, le client doit voir en un écran : son projet, sa
   prochaine action, où il en est. ⛔ Douze cartes identiques ne hiérarchisent
   rien — un seul panneau porte l'accent, celui de l'action à faire. */
.tiroir { margin-bottom: var(--e-5); }
.tiroir-titre { font-size: var(--t-lg); letter-spacing: -.015em; margin: 0 0 var(--e-3); }
/* Le seul panneau accentué de l'écran : ce qu'il y a à faire maintenant. */
.tiroir-action { border-color: var(--bleu); box-shadow: var(--ombre-md); }
.tiroir-action .tiroir-titre { color: var(--encre); }

/* ── Une étape du guide ─────────────────────────────────────────────────
   ⭐ Le guide est un GUIDE D'ACTION : chaque étape dit qui la porte et ce
   qu'elle implique. La carte reste sobre — c'est une lecture continue, ⛔ pas
   une grille d'offres. */
.etape { margin-bottom: var(--e-3); }
.etape-titre { font-size: var(--t-md); font-weight: 600; margin: 0; flex: 1 1 16rem; }
.etape-texte { font-size: var(--t-sm); color: var(--texte-doux); margin: var(--e-2) 0 0; line-height: 1.6; }

/* Champ de saisie libre hors formulaire de recherche (aiguillage de l'accueil). */
.champ-libre {
  width: 100%; max-width: 62ch;
  padding: var(--e-4); font-family: inherit; font-size: var(--t-md);
  border: 1px solid var(--bordure-fort); border-radius: var(--r-sm);
  background: var(--surface); color: var(--texte);
}
.champ-libre:focus-visible { border-color: var(--bleu); }

/* ═══════════════════════════════════════════════════════════════════════
   LA BANDE DE RÉASSURANCE — 17/08/2026, dernier manque de la maquette.
   ⭐ La dernière chose lue avant le pied : ce qui reste vrai quelle que soit
   l'offre. ⛔ Aucun prix, aucune date — ce n'est pas une offre.
   ⛔ **Aucune couleur nouvelle** : `--vert` (l'acquis), `--encre`,
   `--texte-doux`, `--surface`, `--bordure`. Tous portent déjà leur sens
   ailleurs — une cinquième teinte n'aurait rien de plus à dire.
   ⛔ **Aucun empattement** : `--police-titre` ne sert qu'aux titres
   d'AFFICHAGE. Un intitulé de quatre mots n'en est pas un.
   ⚠️ `.reassurance` ≠ `.hero-reassurance`, qui est la ligne SOUS le champ du
   hero. Deux rôles, deux classes, ⛔ jamais mélangées.
   ═══════════════════════════════════════════════════════════════════════ */
.reassurance {
  background: var(--surface);
  border-top: 1px solid var(--bordure);
  padding: var(--e-7) 0;
}
/* ⚠️ Quatre colonnes, parce qu'il y a quatre items — voir `reassurance_items()`,
   qui le dit aussi. Un cinquième laisserait une case vide. */
.reassurance-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-6) var(--e-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .reassurance-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .reassurance-liste { grid-template-columns: minmax(0, 1fr); } }
/* La coche tient sa propre colonne : le texte reste aligné même sur deux lignes. */
.reassurance-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--e-4); row-gap: var(--e-1);
  align-items: start;
}
/* ⭐ La pastille ronde de la maquette. ⚠️ Fond `--bleu-pale`, dessin
   `--bleu-fonce` : mesuré à 4,56 sur ce fond, c'est le couple déjà éprouvé
   du site. ⛔ Aucune teinte nouvelle. */
.reassurance-marque {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bleu-pale); color: var(--bleu-fonce);
}
.reassurance-marque svg { width: 22px; height: 22px; display: block; }
.reassurance-titre {
  grid-column: 2; grid-row: 1; margin: 0;
  font-size: var(--t-md); font-weight: 700; line-height: 1.4;
  color: var(--encre);
}
.reassurance-texte {
  grid-column: 2; grid-row: 2; margin: 0;
  font-size: var(--t-sm); line-height: 1.6;
  color: var(--texte-doux);
}

/* ═══════════════════════════════════════════════════════════════════════
   LE HERO-PORTAIL — 17/08/2026, la présentation de la maquette d'Éric.
   Tête sombre pleine largeur · titre d'affichage centré · sous-titre ·
   UNE barre de recherche en pilule blanche.
   ⛔ Aucune couleur nouvelle : `.hero` fournit déjà le fond et les contrastes
   recalculés. Ce bloc ne change que le RYTHME et la FORME du champ.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-portail { padding: 76px 0 88px; text-align: center; }
@media (max-width: 700px) { .hero-portail { padding: 48px 0 56px; } }
/* ⚠️ Le titre reprend la taille de hero (`.hero h1`) : ⛔ ne pas la redéfinir
   ici, elle a déjà été mesurée deux fois — voir le commentaire de `.hero h1`. */
.hero-portail .hero-titre-portail { margin: 0 auto var(--e-4); max-width: 20ch; }
.hero-portail .hero-sous {
  margin: 0 auto var(--e-6); max-width: 60ch;
  font-size: var(--t-lg); line-height: 1.55; color: #cbdaea;
}
@media (max-width: 560px) { .hero-portail .hero-sous br { display: none; } }

/* ── La barre de recherche, en pilule ───────────────────────────────────
   ⭐ Loupe à gauche DANS la pilule, bouton bleu à droite DANS la pilule.
   ⚠️ `.hero-recherche` reste sur le formulaire : un contrôle du banc vérifie
   que la barre précède les exemples. ⛔ Ne pas renommer la classe. */
/* 🔴 17/08/2026 — LA BARRE S'ABAISSE, demande d'Éric.
   ⚠️ Elle sortait à ~146 px de haut : `.hero-recherche input[type="search"]`
   impose `min-height: 132px`, hérité du `textarea` de trois lignes du lot 1.
   Ma règle ne redéclarait pas `min-height`, donc il passait tel quel — un
   champ qui n'est plus un textarea gardait la hauteur d'un textarea.
   ⛔ Ne pas retirer `min-height: 0` ci-dessous en croyant qu'il ne sert à
   rien : c'est LUI qui tient la hauteur.
   ⭐ Cible : une pilule d'environ 60 px, centrée, et un bouton qui ne pèse
   plus autant que le champ — il n'a plus 132 px à équilibrer. */
.hero-barre {
  display: flex; align-items: center; gap: var(--e-2);
  /* ⚠️ Resserrée de 680 à 600 px : à 680 la pilule frôlait la largeur du
     sous-titre et ne se lisait plus comme un objet posé au centre. */
  width: 100%; max-width: 600px; margin-inline: auto; margin-block: 0;
  text-align: left;
  background: #fff; border-radius: 100px;
  padding: 6px 6px 6px var(--e-5);
  box-shadow: 0 18px 44px rgba(2, 8, 20, .30);
}
.hero-barre .champ {
  flex: 1 1 auto; margin: 0; display: flex; align-items: center;
  gap: var(--e-3); min-width: 0; background: none; border: none; padding: 0;
}
.hero-barre-loupe { flex: 0 0 auto; display: flex; color: #6b7f96; }
.hero-barre-loupe svg { width: 19px; height: 19px; }
/* ⛔ Le champ n'a NI fond NI bordure NI ombre NI hauteur minimale : c'est la
   pilule qui porte tout ça. Sans ça, on voit un champ dans un champ. */
.hero-barre input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  min-height: 0; height: auto;
  background: none; border: none; border-radius: 0;
  box-shadow: none; outline: none;
  padding: 0; margin: 0;
  font-family: inherit; font-size: var(--t-md); line-height: 1.4;
  color: var(--texte);
}
.hero-barre input[type="search"]::placeholder { color: #6b7f96; }
/* ⭐ L'anneau de focus se pose sur la PILULE, ⛔ pas sur le champ nu :
   sinon le repère clavier disparaît dans le blanc.
   ⚠️ Le champ lui-même ne doit RIEN peindre au focus — `.hero-recherche
   input:focus` pose une bordure turquoise et une ombre, qui dessineraient un
   second cadre à l'intérieur de la pilule. */
.hero-barre input[type="search"]:focus {
  border-color: transparent; box-shadow: none;
}
.hero-barre:focus-within { box-shadow: 0 0 0 3px rgba(47,192,174,.55), 0 18px 44px rgba(2,8,20,.30); }
/* ⚠️ `font-size` ET `box-shadow` sont redéclarés : `.hero-recherche .btn` les
   porte à 1,06 rem et une ombre lourde, calibrées pour un champ de 132 px.
   ⛔ Ne pas les omettre — c'est ce qui laissait le bouton surdimensionné. */
.hero-barre .btn {
  flex: 0 0 auto; border-radius: 100px;
  padding: .62rem 1.35rem; font-size: .95rem;
  box-shadow: none;
}
@media (max-width: 560px) {
  .hero-barre { flex-wrap: wrap; border-radius: var(--r-lg); padding: var(--e-3); }
  .hero-barre .champ { flex: 1 1 100%; padding-inline: var(--e-2); }
  .hero-barre .btn { width: 100%; border-radius: var(--r); }
}
/* Les exemples se resserrent sous la barre : ⛔ ils ne doivent pas concurrencer
   l'action, la maquette n'en montre pas. */
.hero-portail .hero-exemples { justify-content: center; margin: var(--e-5) auto 0; }

/* ═══════════════════ ARTICLES À LA UNE ═══════════════════
   ⭐ L'emplacement de la maquette : juste sous le hero — donc juste sous la
   réponse quand il y en a une, puisque la réponse s'insère dans le flux. */
.une-articles { padding: var(--e-8) 0; }
.une-tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--e-3);
  margin: 0 0 var(--e-6);
}
.une-tout { font-weight: 600; white-space: nowrap; }
/* ⚠️ Descendues du hero : sur fond CLAIR, ⛔ pas les couleurs de `.hero-suite`,
   qui sont calculées pour l'aurore. Un jeton, un rôle. */
.une-portes {
  margin: var(--e-5) 0 0; font-size: var(--t-sm);
  color: var(--texte-doux); line-height: 1.6;
}
.une-portes strong { color: var(--encre); }

/* ── Les sources, en appui — 17/08/2026 ────────────────────────────────
   🔴 Elles occupaient le premier rang de la réponse alors que ce sont des
   éléments SECONDAIRES : le bloc principal est « Ce que vous devez faire ».
   ⭐ Repliées, sous le plan. ⛔ Ni cachées ni supprimées — le titre les nomme
   et le nombre est affiché avant l'ouverture. */
.tour-sources > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3);
  cursor: pointer; list-style: none;
}
.tour-sources > summary::-webkit-details-marker { display: none; }
.tour-sources > summary .bloc-mention { margin: 0; }
/* Le chevron est dessiné ici : ⛔ pas de police d'icônes pour une flèche. */
.tour-sources > summary::after {
  content: ''; width: .48rem; height: .48rem; margin-left: auto;
  border-right: 2px solid var(--texte-faible);
  border-bottom: 2px solid var(--texte-faible);
  transform: rotate(45deg); transition: transform .15s;
}
.tour-sources[open] > summary::after { transform: rotate(-135deg); }
.tour-sources > summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
.tour-sources-n { font-size: var(--t-sm); color: var(--texte-faible); }
.tour-sources[open] .tour-liste { margin-top: var(--e-4); }

/* ── Les formalités que nous savons faire passer — 17/08/2026 ──────────
   ⭐ Une formalité, ses niveaux, ce que chacun promet. ⛔ Aucune couleur
   nouvelle : `en_preparation` réutilise l'ambre des états « bientôt », qui
   porte déjà ce sens partout ailleurs. */
.formalite { padding: var(--e-4) 0; border-top: 1px solid var(--bordure); }
.formalite:first-child { border-top: none; padding-top: 0; }
.formalite-titre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3);
  margin: 0 0 var(--e-2);
}
.formalite-niveaux { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.formalite-niveaux li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3);
  font-size: var(--t-sm);
}
.formalite-niveau { font-weight: 600; color: var(--encre); }
/* La promesse passe à la ligne : c'est une phrase, ⛔ pas une étiquette. */
.formalite-promesse { flex: 1 1 100%; color: var(--texte-faible); line-height: 1.5; }
/* ⭐ Ce que GEAR rédige, en complément d'une formalité MGI. ⚠️ Ambre —
   c'est le jeton de l'accompagnement HUMAIN, déjà porté par `.volet-gear` et
   `.intention-gear` ailleurs. ⛔ Aucune 5ᵉ couleur. */
.formalite-gear {
  margin: var(--e-3) 0 0; padding-left: var(--e-3);
  border-left: 3px solid var(--ambre);
  font-size: var(--t-sm); line-height: 1.6;
}
.formalite-gear strong { color: var(--ambre); }

/* ── Nos formalités, rangées par famille — 18/08/2026 ──────────────────
   ⭐ Une carte = une formalité. ⛔ Aucune couleur nouvelle : `en_preparation`
   reprend l'ambre des états « bientôt », qui porte déjà ce sens partout. */
.formalites-grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.formalite-carte { display: flex; flex-direction: column; gap: var(--e-2); }
.formalite-carte-titre { margin: 0; font-weight: 700; color: var(--encre); line-height: 1.35; }
.formalite-carte-portee {
  margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--texte-doux);
  /* ⚠️ La portée est une phrase entière au catalogue : on la borne à l'écran
     plutôt que de la tronquer à la source — ⛔ la donnée reste intacte. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* ⭐ `margin-top:auto` colle le pied en bas : les cartes s'alignent quelle que
   soit la longueur de la portée. ⚠️ C'est ce qui manquait aux cartes du 14/08. */
.formalite-carte-pied {
  margin: auto 0 0; padding-top: var(--e-3); border-top: 1px solid var(--bordure);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3);
}
.formalite-carte.formalite-en_preparation { border-left: 3px solid var(--ambre); }
.formalite-carte.formalite-disponible     { border-left: 3px solid var(--bleu-fonce); }
/* ⭐ La carte entière est cliquable. ⚠️ Le lien porte la mise en page interne :
   sans `display:flex` il redeviendrait une ligne de texte et casserait
   l'alignement des pieds de carte. */
.formalite-carte-lien {
  display: flex; flex-direction: column; gap: var(--e-2); flex: 1;
  text-decoration: none; color: inherit;
}
.formalite-carte-lien:hover .formalite-carte-titre { color: var(--bleu-fonce); }
.formalite-carte-lien:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; }

/* ── Les formules d'une formalité, sur sa page produit ─────────────────── */
.formules {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.formule { display: flex; flex-direction: column; gap: var(--e-3); }
.formule-titre { margin: 0; font-weight: 700; color: var(--encre); }
.formule-livraison {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2);
  font-size: var(--t-sm); line-height: 1.55; color: var(--texte-doux);
}
/* La coche reprend `--vert` : l'acquis, comme partout ailleurs sur le site. */
.formule-livraison li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--e-2); }
.formule-livraison li::before { content: '✓'; color: var(--vert); font-weight: 700; }
/* ⛔ Ambre pour ce qui n'est pas encore ouvert — jamais une 5ᵉ couleur. */
.formule-bientot { border-left: 3px solid var(--ambre); }
.formule .btn, .formule .tour-niveau { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   ACCUEIL v5 — le design reçu de Claude Design, 27/08/2026.

   🔴 **CE BLOC NE CRÉE AUCUNE COULEUR.** La maquette écrivait ses teintes en
   dur : `#0b1f3a`, `#157b70`, `#047857`, `#b45309`. ⭐ Ce sont EXACTEMENT
   `--encre`, `--bleu-fonce`, `--vert` et `--ambre` — elle a été dessinée sur
   notre palette, et tout se remappe sans un écart.
   ⛔ Les deux teintes qu'elle ajoutait — un bleu clair `#2f8fd6` et un vert
   clair `#0e9f6e` pour numéroter les étapes — ne sont PAS reprises : « il n'y
   a que quatre couleurs d'état, aucune 5ᵉ ». Les étapes portent donc les
   quatre teintes existantes.
   ⛔ Ni Newsreader ni Figtree : le site a déjà `--police-titre` (Fraunces) et
   `--police` (Inter). Deux familles de plus, c'est deux chargements de plus et
   une page d'accueil qui ne ressemblerait plus au reste du site.

   ⚠️ **TOUT EST PORTÉ PAR `.accueil-v5`**, posé par `index.php` seul : ⛔ aucune
   autre page ne peut être touchée par ce qui suit, même par accident.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA TÊTE — une photo, un voile, et de la place dessous ──────────────
   ⭐ La maquette pose une photographie derrière le titre et laisse **170 px**
   de vide en bas : c'est là que les cartes du guide viennent chevaucher.
   ⚠️ **La photo est FACULTATIVE** : sans le fichier, `background-color` et le
   dégradé du voile tiennent seuls, et la tête reste lisible. ⛔ Une page qui
   dépend d'un fichier absent n'est pas livrable en une fois. */
.accueil-v5 .hero-portail {
  padding: 76px 0 250px;
  background-color: #0d2438;
  background-image: url('/images/hero-dossiers.jpg');
  background-size: cover;
  background-position: 50% 62%;
}
/* ⚠️ Le voile est plus dense EN HAUT, là où le titre se lit, et se relâche au
   milieu pour laisser voir la photo. ⛔ Un voile uniforme éteint l'image ou
   noie le texte — il faut choisir, et on ne veut ni l'un ni l'autre.
   ⚠️ `z-index: 1` sur le contenu : une couche posée en `::after` passerait
   par-dessus — c'est le piège déjà payé sur l'aurore. */
.accueil-v5 .hero-portail::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(9,26,44,.90) 0%, rgba(9,26,44,.62) 26%,
    rgba(9,26,44,.20) 48%, rgba(9,26,44,.28) 100%);
}
.accueil-v5 .hero-portail > .inner { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .accueil-v5 .hero-portail { padding: 48px 0 190px; }
}

/* ⭐ Le titre gagne en présence — sans quitter l'échelle : la borne haute reste
   celle de `.hero h1`, on ne fait qu'aller la chercher. ⚠️ L'ombre portée n'est
   pas décorative : sur une photographie, elle est ce qui garde le blanc lisible
   là où l'image est claire. */
.accueil-v5 .hero-titre-portail {
  max-width: 22ch;
  text-shadow: 0 6px 34px rgba(0,0,0,.55);
}
.accueil-v5 .hero-portail .hero-sous {
  max-width: 56ch;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}

/* ── LA PILULE — pleinement ronde, et posée sur l'image ─────────────────
   ⭐ La maquette la veut en `999px` et non en rayon doux : sur une photo, une
   pilule franche se lit comme un objet posé, un rectangle arrondi comme un
   bloc découpé. ⚠️ L'ombre est plus profonde pour la détacher de l'image. */
.accueil-v5 .hero-barre {
  border-radius: 999px;
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.70);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.accueil-v5 .hero-barre:hover {
  transform: translateY(-2px);
  box-shadow: 0 34px 70px -26px rgba(0,0,0,.75);
}
.accueil-v5 .hero-barre .btn { border-radius: 999px; }
/* 🔴 15/09/2026 — l'ombre ci-dessus ÉCRASAIT l'anneau de `.hero-barre:focus-within`
   (sélecteur plus fort) : un champ actif ne se distinguait pas d'un champ
   inerte. ⭐ L'anneau revient. */
.accueil-v5 .hero-barre:focus-within {
  box-shadow: 0 0 0 4px rgba(47,192,174,.75), 0 26px 60px -26px rgba(0,0,0,.70);
}

/* ── LES EXEMPLES — en verre, sur l'image ───────────────────────────────
   ⚠️ Ils étaient dessinés pour un fond plat ; sur une photographie il leur
   faut un fond à eux, sinon ils disparaissent dans les zones claires.
   ⛔ `backdrop-filter` seul ne suffit pas : un navigateur qui l'ignore doit
   quand même voir un fond — d'où la couleur SOUS le filtre. */
.accueil-v5 .hero-exemples > * {
  background: rgba(13,36,56,.62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  transition: background .22s ease, color .22s ease,
              transform .22s ease, border-color .22s ease;
}
.accueil-v5 .hero-exemples > *:hover {
  background: var(--surface); border-color: var(--surface);
  color: var(--encre); transform: translateY(-2px);
}

/* ── LES CARTES DU GUIDE CHEVAUCHENT LA TÊTE ────────────────────────────
   🔴 C'est la signature de la maquette : trois cartes blanches remontées DANS
   la photo. ⭐ Elles font le lien entre la tête et la page, et donnent la
   profondeur que la version précédente n'avait pas.
   ⚠️ `z-index: 2` : sans lui, le voile de la tête passerait par-dessus.
   ⛔ Sur téléphone la remontée est réduite — à pleine valeur, les cartes
   couvriraient le champ de recherche. */
.accueil-v5 .une-articles {
  position: relative; z-index: 2;
  background: transparent; border-block: none;
  padding-top: 0;
}
.accueil-v5 .une-articles > .inner { margin-top: -170px; }
@media (max-width: 700px) {
  .accueil-v5 .une-articles > .inner { margin-top: -140px; }
}
.accueil-v5 .une-articles .grille-articles > * {
  box-shadow: 0 3px 8px -4px rgba(11,31,58,.25),
              0 30px 60px -34px rgba(11,31,58,.70);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.accueil-v5 .une-articles .grille-articles > *:hover {
  transform: translateY(-8px);
  box-shadow: 0 4px 10px -4px rgba(11,31,58,.28),
              0 44px 80px -34px rgba(11,31,58,.75);
}
/* ⚠️ Le titre « Articles à la une » est encore SUR l'image : il passe en clair,
   comme le reste de la tête. ⛔ Laissé en marine, il devenait illisible. */
.accueil-v5 .une-articles .une-tete { color: #eef4f8; }
.accueil-v5 .une-articles .une-tete .titre-section { color: #fff; }
.accueil-v5 .une-articles .une-tete .une-tout { color: #cbdaea; }

/* ── LE RYTHME DES SECTIONS ─────────────────────────────────────────────
   ⭐ La maquette respire davantage : ~88 px entre deux sections au lieu de 56.
   ⛔ Rien d'autre ne change — mêmes classes, même ordre, même contenu. */
.accueil-v5 > section { padding-block: 88px; }
@media (max-width: 700px) {
  .accueil-v5 > section { padding-block: 56px; }
}
/* ⛔ La tête et les cartes qui la chevauchent gardent LEUR rythme : la règle
   ci-dessus les casserait toutes les deux. */
.accueil-v5 > .une-articles { padding-block: 0 88px; }

/* ⭐ L'œillet de section, sans pastille — la maquette le pose en petites
   capitales turquoise, au-dessus du titre. ⛔ La classe ne change pas : c'est
   `.eyebrow`, déjà partout. */
.accueil-v5 .eyebrow {
  background: transparent; padding: 0;
  letter-spacing: .12em; font-size: var(--t-xs);
}

/* ── LES CARTES, UNE SEULE ÉCHELLE D'OMBRE ──────────────────────────────
   ⭐ La maquette empile deux ombres : une courte qui pose la carte, une longue
   et très diffuse qui la fait flotter. ⛔ Une seule ombre donne soit un contour
   dur, soit un halo mou. */
.accueil-v5 .carte {
  box-shadow: 0 2px 6px -3px rgba(11,31,58,.16),
              0 22px 46px -32px rgba(11,31,58,.55);
}
.accueil-v5 a.carte:hover,
.accueil-v5 .carte-actionnable:hover {
  box-shadow: 0 3px 8px -3px rgba(11,31,58,.20),
              0 34px 62px -32px rgba(11,31,58,.60);
}

/* ── LE FILET DE COULEUR EN TÊTE D'OFFRE ────────────────────────────────
   🔴 La maquette range nos trois façons de faire par un filet de 6 px :
   ⭐ VERT pour le gratuit, ⭐ TURQUOISE pour ce que MGI fait passer, ⭐ AMBRE
   pour ce qu'un humain réalise. ⛔ Ce ne sont pas trois couleurs choisies : ce
   sont exactement les trois SENS d'état du site, déjà écrits dans `--vert`,
   `--bleu-fonce` et `--ambre`.
   ⚠️ Le filet se pose sur les cartes EXISTANTES de `#tarifs` (`.carte.pack`)
   — ⛔ aucune carte nouvelle, aucun libellé changé.
   ⚠️ « Découverte » est à 0 € : c'est LUI le vert. ⛔ Le reconnaître à son
   prix serait deviner — il porte `.pack-gratuit`, posé dans `index.php`. */
.accueil-v5 .pack { position: relative; overflow: hidden; padding-top: 30px; }
.accueil-v5 .pack::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 6px;
  background: var(--bleu-fonce);
}
.accueil-v5 .pack-gratuit::before { background: var(--vert); }
.accueil-v5 .pack-humain::before  { background: var(--ambre); }

/* ── L'EN-TÊTE DE SECTION DE LA v5 — 27/08/2026 ─────────────────────────
   🔴 C'est LUI qui change le visage de la page, ⛔ pas les ombres : la v5
   CENTRE tout, met le titre en empattements et pose un chapô sous lui.
   ⚠️ Le site alignait tout à gauche, titre en grotesque. ⭐ Le contenu ne
   bouge pas d'un mot — c'est la mise en page qui change.
   ⛔ Aucune police nouvelle : `--police-titre` (Fraunces) tient le rôle de
   Newsreader, elle est déjà chargée. */
.accueil-v5 > section > .inner > .eyebrow,
.accueil-v5 > section > .inner > .titre-section,
.accueil-v5 > section > .inner > .lead {
  display: block; text-align: center; margin-inline: auto;
}
.accueil-v5 > section > .inner > .titre-section {
  font-family: var(--police-titre);
  max-width: 24ch; letter-spacing: -.028em; line-height: 1.1;
  margin-block: var(--e-2) var(--e-3);
}
.accueil-v5 > section > .inner > .lead {
  max-width: 62ch; margin-bottom: var(--e-7);
}

/* ── LES QUATRE ÉTAPES — la forme `#methode` de la v5 ───────────────────
   ⭐ Quatre cartes, une pastille numérotée en tête, un titre, deux lignes.
   ⛔ Les couleurs des pastilles sont les QUATRE états du site — la v5 en
   proposait deux nouvelles, elles ne passent pas. */
.v5-etapes {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.v5-etape { padding: 26px 24px 30px; }
.v5-etape-num {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  font-size: var(--t-sm); font-weight: 800; color: #fff;
  margin-bottom: 26px;
}
/* ⛔ Quatre teintes, et ce sont celles des états : ⛔ aucune cinquième. */
.v5-etape:nth-child(1) .v5-etape-num { background: var(--encre); }
.v5-etape:nth-child(2) .v5-etape-num { background: var(--bleu-fonce); }
.v5-etape:nth-child(3) .v5-etape-num { background: var(--vert); }
.v5-etape:nth-child(4) .v5-etape-num { background: var(--ambre); }
.v5-etape h3 {
  font-size: var(--t-lg); letter-spacing: -.012em; margin: 0 0 var(--e-2);
}
.v5-etape p { margin: 0; font-size: var(--t-sm); line-height: 1.55; }

/* ── LES OFFRES — la forme `#solutions` de la v5 ────────────────────────
   ⭐ Un badge en capitales, un titre en empattements, des puces à point
   coloré, et l'action collée en bas de carte pour que les trois s'alignent.
   ⚠️ Le CONTENU ne change pas : mêmes prix, mêmes listes, même bouton
   d'achat — ⛔ le tunnel n'est pas touché. */
.accueil-v5 .pack h3 {
  font-family: var(--police-titre); font-size: var(--t-2xl);
  letter-spacing: -.025em; margin: var(--e-3) 0 var(--e-2);
}
.v5-badge {
  align-self: flex-start; display: inline-block;
  padding: 6px 12px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bleu-fonce); background: var(--bleu-pale);
}
.pack-gratuit .v5-badge { color: var(--vert);  background: var(--vert-pale); }
.pack-humain  .v5-badge { color: var(--ambre); background: var(--ambre-pale); }
/* ⭐ Les cartes deviennent des colonnes : l'action tombe en bas, et les trois
   boutons se retrouvent sur la même ligne quelle que soit la longueur du
   texte. ⛔ Sans ça, la v5 perd son alignement — c'est ce qui la tient. */
.accueil-v5 .pack { display: flex; flex-direction: column; }
.accueil-v5 .pack .btn,
.accueil-v5 .pack .tour-niveau { margin-top: auto; }

/* ── LE BLOC DE CONFIANCE — la forme `#confiance` de la v5 ──────────────
   ⭐ Une grande carte blanche, trois colonnes coiffées d'un filet, et une
   rangée de pastilles nommant nos sources.
   🔴 ⛔ **Les sources sont RÉELLES** : ce sont celles que le site cite déjà
   dans ses réponses. ⛔ Aucune n'est ajoutée pour faire nombre. */
.v5-confiance { padding: 46px 44px 44px; border-radius: var(--r-lg); }
.v5-confiance-grille {
  display: grid; gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.v5-confiance-item { padding-top: var(--e-3); border-top: 2px solid var(--bordure-fort); }
.v5-confiance-item:nth-child(1) { border-top-color: var(--encre); }
.v5-confiance-item:nth-child(2) { border-top-color: var(--bleu-fonce); }
.v5-confiance-item:nth-child(3) { border-top-color: var(--ambre); }
.v5-confiance-item h3 {
  font-size: var(--t-lg); letter-spacing: -.012em; margin: 0 0 var(--e-2);
}
.v5-confiance-item p { margin: 0; font-size: var(--t-sm); line-height: 1.6; }
.v5-sources {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2);
  margin-top: var(--e-6); padding-top: var(--e-5);
  border-top: 1px solid var(--bordure);
}
.v5-source {
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface-2); font-size: var(--t-sm); color: var(--texte-doux);
}
@media (max-width: 700px) { .v5-confiance { padding: 28px 22px 26px; } }

/* ── LA PHOTO DES VIGNETTES — 27/08/2026 ────────────────────────────────
   🔴 La maquette pose une photographie en tête de chaque vignette, à la
   place du bandeau coloré. ⚠️ La hauteur est FIXE : c'est elle qui aligne
   les trois cartes, exactement comme le bandeau le faisait avant — ⛔ pas
   l'espacement, et c'est ce qui supprime les vides.
   ⛔ `object-fit: cover` : une photo au mauvais rapport se recadre, ⛔ elle
   ne se déforme pas. */
.article-photo {
  display: block; height: 130px; overflow: hidden;
  background: var(--surface-2);
}
.article-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* ⭐ Le léger zoom au survol accompagne le soulèvement de la carte.
     ⚠️ Sur la carte, ⛔ pas sur l'image seule : sinon elle bouge sans que la
     carte suive, et ça se lit comme un défaut. */
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.article:hover .article-photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .article-photo img, .article:hover .article-photo img { transition: none; transform: none; }
}

/* ⭐ La même photo, en tête de l'article ouvert. ⛔ Elle ne s'étire pas
   au-delà de la colonne de lecture, et elle garde le rayon des cartes. */
.article-photo-ouverte { margin: var(--e-4) 0 var(--e-5); }
.article-photo-ouverte img {
  width: 100%; max-height: 320px; object-fit: cover;
  border-radius: var(--r); display: block;
}

/* ── L'ÉCRAN D'ADMINISTRATION DES VIGNETTES ─────────────────────────────
   ⛔ Aucune couleur nouvelle : le back-office a déjà sa palette sombre. */
.une-admin-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08);
}
.une-admin-vignette {
  flex: 0 0 96px; height: 64px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,.06); display: flex;
  align-items: center; justify-content: center;
  font-size: .7rem; color: #94a3b8; text-align: center;
}
.une-admin-vignette img { width: 100%; height: 100%; object-fit: cover; }