/* ═══════════════════════════════════════════════════════════════
   home.css — page d'accueil, refonte de septembre 2026.

   Chargé PAR LA SEULE page d'accueil : elle porte une grammaire de blocs
   — maquettes produit, bandeau défilant, démonstrateur — qu'aucune autre
   page n'emploie. La mettre dans la feuille partagée la ferait payer aux
   trente autres.

   ⚠️ Ce qui est STRUCTUREL a été promu dans site.css (§ « Alignement sur
   la refonte ») et vaut donc pour tout le site : la largeur de page
   (`--page`), la gouttière (`--gut`) et la grammaire de la barre de
   navigation. Ne pas les redéclarer ici — c'est la divergence qu'on
   vient de fermer.

   Tout le reste est scopé à `body.hm`, donc sans effet ailleurs.

   Les jetons de couleur viennent de la charte (cf. site.css § PALETTE) ;
   ceux qui n'y sont pas — violet profond des sections sombres, encre sur
   teinte claire — sont déclarés ici, à la racine du scope.
   ═══════════════════════════════════════════════════════════════ */

.hm {
  --ink: #231F1F;
  --ink2: #6B5F52;          /* encre secondaire */
  --ink3: #4A4038;          /* encre sur teinte claire */
  --bd: #E8E1CE;            /* bordure de carte */
  --bd2: #E4DCC4;           /* filet appuyé */
  --bd3: #D8CDAF;           /* pointillé */
  --cream: #F6F3E5;
  --soft: #F1ECDA;
  --deep: #3B1E45;          /* violet profond des sections sombres */
  --deep-ink: #D9CBE0;      /* encre sur violet profond */
  /* ⚠️ Le jaune de marque se pose EN APLAT, sans arête. Il ne fait que 1,56
     de contraste sur le fond : une arête ne le rendrait pas conforme, elle
     ajouterait juste une ligne. Choix de charte, cf. site.css § PALETTE. */
  --yellow: #F2BD3D;
  --green: #0B7A52;
  --link: #8B3FBF;
  /* Respiration entre deux blocs de la page. Même raison que --gut : UNE
     source, sinon les sections dérivent d'un cran les unes des autres —
     la maquette portait déjà un 18 px au milieu de huit 44 px, écart que
     rien ne justifiait.

     ⚠️ CE JETON PORTE AUSSI le haut du héros et les marges de la bande
     blanche « métier par métier » : le relever aère la page ENTIÈRE, ce qui
     est l'intention. Il est passé de 44 px (maquette) à 64, puis à 80
     (+ 25 %) à la demande. Les trois paliers gardent le même rapport. */
  --sp: 80px;
  --hero-air: 32px; /* réserve haute et basse du héros, en plus de --sp */
}

/* ⚠️ UNE SEULE RÈGLE décide de l'espace entre deux sections. Un padding
   posé à la main sur une section de plus finirait par s'ajouter à
   celui-ci au lieu de le remplacer — c'est exactement ce qui produit les
   écarts inégaux qu'on vient de corriger. */
.hm-flow > * + * { margin-top: var(--sp); }
.hm-flow { padding-bottom: var(--sp); }

/* Chiffres alignés partout où ils se comparent. */
.hm { font-variant-numeric: tabular-nums; }

/* ⚠️ La largeur (`--page`) et la gouttière (`--gut`) viennent de
   site.css : elles valent pour TOUT le site depuis que la grammaire de
   la maquette y a été promue. Les redéclarer ici rouvrirait la
   divergence qu'on vient de fermer. */
/* ⚠️ `margin-inline`, PAS `margin: 0 auto` : à spécificité égale et
   écrit plus bas, le raccourci remettait le `margin-top` du rythme à
   zéro — huit sections sur onze collaient donc à la précédente, et
   seules celles qui n'ont pas cette classe respiraient. */
.hm-sec { max-width: var(--page); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut); }

.hm h1, .hm h2, .hm h3, .hm .hm-display {
  font-family: "Bungee", var(--font-display-fallback, Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif);
  font-weight: 400; letter-spacing: 0;
}
.hm-h2 { font-size: 36px; line-height: 1.06; margin: 0 0 10px; }
.hm-sub { font-size: 17px; line-height: 1.6; color: var(--ink2); margin: 0 0 26px; max-width: 66ch; }

/* ── Boutons ───────────────────────────────────────────────────
   Pilule partout, encre SOMBRE sur le jaune de marque (le blanc y
   tombe à 1,73 — cf. site.css). */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 30px; border-radius: 999px; font-size: 16px; font-weight: 600;
  color: var(--ink); border: 1.5px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hm-btn-y { background: var(--yellow); }
.hm-btn-y:hover { background: #E7AF28; color: var(--ink); }
.hm-btn-o { border-color: var(--ink); }
.hm-btn-o:hover { background: rgba(35,31,31,.05); color: var(--ink); }
.hm-btn-d { background: var(--deep); border-color: var(--deep); color: var(--cream); padding: 16px 34px; }
.hm-btn-d:hover { background: #4C2A58; color: var(--cream); }

/* ── 1. Héros ──────────────────────────────────────────────────── */
.hm-hero {
  display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr);
  gap: 56px; align-items: start;
  /* Le héros respire plus que les autres sections : --sp au-dessus (comme
     elles) plus une réserve dédiée en haut ET en bas, pour que le titre ne
     colle ni à la barre de navigation ni au bandeau qui suit. */
  padding-top: calc(var(--sp) + var(--hero-air)); padding-bottom: var(--hero-air);
}
.hm-hero h1 { font-size: 55px; line-height: 1.05; margin: 24px 0 0; text-wrap: balance; }
.hm-lead { font-size: 19.5px; line-height: 1.6; color: var(--ink2); margin: 22px 0 0; max-width: 62ch; text-wrap: pretty; }
.hm-cta-row { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* Les quatre points clés.
   ⚠️ Cartes BLANCHES bordées, avec une vignette de picto en aplat de
   marque — la même grammaire que les tuiles métier et que les six canaux.
   Les tuiles en dégradé pastel de la maquette étaient les seules de la
   page à ne pas la suivre : quatre aplats de couleur pleine, sans bordure,
   au milieu d'un site de cartes blanches bordées. La couleur reste, elle
   se concentre dans la vignette.

   ⚠️ Contenu calé EN HAUT, gaps FIXES. Elles étaient en
   `justify-content: space-between` : le picto en haut, le chiffre collé en
   bas, donc le chiffre descendait ou montait selon la longueur de la
   légende. Les quatre nombres ne tombaient pas sur la même ligne, et
   l'écart grandissait à mesure que la colonne se resserrait. Tout ce qui
   précède le nombre a maintenant une hauteur fixe : ils s'alignent quelle
   que soit la place. */
.hm-promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
.hm-promise > * {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 20px; border-radius: 18px;
  background: #fff; border: 1px solid var(--bd); color: var(--ink);
}
.hm-promise .hm-ic {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: 16px; color: var(--ink);
}
.hm-promise b { display: block; font-size: 26px; line-height: 1.1; }
.hm-promise .u { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--ink2); }
.hm-promise span.t { display: block; font-size: 13px; line-height: 1.45; color: var(--ink2); margin-top: 7px; }
/* Les aplats de la charte, ceux-là mêmes que les tuiles métier. */
.hm-t-blue .hm-ic { background: #6FC8E8; }
.hm-t-yellow .hm-ic { background: #F2BD3D; }
.hm-t-green .hm-ic { background: #4FC2A0; }
.hm-t-violet .hm-ic { background: #CF75DA; }

/* ── 2. Bandeau défilant des publics ───────────────────────────── */
/* ⚠️ PLEINE LARGEUR DE LA FENÊTRE, et non 1180 px comme la maquette.
   Celle-ci est une carte posée sur un bureau : le bandeau y finit sur le
   bord de la carte, donc il n'a pas de bout à finir. Sur une vraie page
   il en a deux, et deux arêtes franches au milieu du crème se lisent
   comme un ruban tronqué. On les fait sortir de l'écran plutôt que de
   les décorer : rien à entretenir, et le bandeau redevient une bande.
   ⚠️ Pas de `100vw` : la barre de défilement y est comptée, ce qui
   redonnerait à la page un défilement latéral. `<main>` fait déjà la
   largeur utile. */
.hm-marquee { overflow: hidden; background: var(--deep); padding: 24px 0; }
.hm-marquee-track { display: flex; align-items: center; width: max-content; animation: hm-marquee 38s linear infinite; }
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hm-marquee-item { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.hm-marquee-item .p { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; flex: none; color: var(--ink); }
.hm-marquee-item .l { font-family: "Bungee", var(--font-display-fallback, Impact, sans-serif); font-weight: 400; letter-spacing: 0; font-size: 23px; color: var(--cream); white-space: nowrap; }
.hm-marquee-item .d { display: block; width: 7px; height: 7px; border-radius: 999px; background: var(--ink2); margin: 0 18px; flex: none; }

/* ── Cartes-maquette (démonstrateur, assistant, projet) ────────── */
.hm-card { background: #fff; border: 1px solid var(--bd); border-radius: 24px; overflow: hidden; }
.hm-card-intro { padding: 30px 34px 22px; }
.hm-card-intro p { font-size: 22px; line-height: 1.34; margin: 0; max-width: 82ch; }
.hm-card-intro p span { color: var(--ink2); }

/* Fenêtre de navigateur posée sur un aplat dégradé. */
.hm-stage { padding: 26px 46px 0; }
/* ⚠️ Le cadre en dégradé est PLUS FIN sur le démonstrateur que sur les deux
   autres maquettes. Le handoff cale sa géométrie sur 1012 px utiles (page
   moins gouttières moins padding de carte) ; les 46 px de dégradé des
   autres scènes en mangeaient 92, et la colonne de réponse tombait à
   282 px, trop peu pour porter la superposition des objets produits. Le
   cadre reste lisible, la géométrie interne reste au pixel du handoff. */
.hm-stage-1 { background: linear-gradient(136deg, #E19A88, #CF75DA); padding-left: 20px; padding-right: 20px; }
.hm-stage-2 { background: linear-gradient(140deg, #CF75DA, #6FC8E8); }
.hm-stage-3 { background: linear-gradient(140deg, #4FC2A0, #F2BD3D); }
.hm-window { background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 40px rgba(35,31,31,.26); overflow: hidden; }
.hm-chrome { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--soft); border-bottom: 1px solid var(--bd2); }
.hm-chrome i { display: block; width: 9px; height: 9px; border-radius: 999px; background: var(--bd3); }
.hm-chrome .dots { display: flex; gap: 6px; }
.hm-chrome .url { flex: 1; max-width: 300px; padding: 5px 14px; border-radius: 999px; background: #fff; font-size: 12px; color: var(--ink2); text-align: center; }

/* ── 2 bis. Les objections ─────────────────────────────────────
   Portage hi-fi du handoff `design/design_handoff_objections` : couleurs,
   corps, espacements, rayons et ombres sont ceux de la référence.

   ⚠️ C'EST UN RAIL, PAS UNE GRILLE. La section doit tenir à sept cartes
   aujourd'hui et à vingt demain sans changer de mise en page : rien ici ne
   dépend du nombre de cartes. */
/* ⚠️ L'EN-TÊTE DÉBORDE À DROITE, comme la fenêtre du rail. Sans ça les
   boutons s'arrêtent sur la colonne de texte, 46 px avant le bord où les
   cartes, elles, sont coupées : l'œil lit un décalage. Le titre garde en
   revanche le bord gauche de la colonne, sur lequel s'aligne la première
   carte. */
/* ⚠️ L'EN-TÊTE PASSE AU-DESSUS DES VOILES. Ceux-ci remontent de 30 px pour
   couvrir l'ombre des cartes (cf. `.hm-obj-win`), et ils atteignaient donc
   le bas des boutons : le rond noir « suivant » se retrouvait à moitié
   estompé par le dégradé crème. Sous l'en-tête, le voile peint du crème sur
   du crème, donc rien. */
.hm-obj-head { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin: 0 calc(var(--gut) * -1) 34px 0; }
.hm-obj h2 { font-size: 40px; line-height: 1.06; margin: 0; max-width: 19ch; }
.hm-obj-nav { display: flex; align-items: center; gap: 12px; flex: none; padding-bottom: 6px; }
.hm-obj-nav button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 999px; border: none; cursor: pointer; color: var(--ink);
  background: #fff; box-shadow: 0 3px 10px rgba(35,31,31,.12);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.hm-obj-nav .next { background: var(--ink); color: var(--cream); box-shadow: 0 3px 10px rgba(35,31,31,.2); }
.hm-obj-nav .prev:hover { background: var(--ink); color: var(--cream); }
/* ⚠️ Un bouton en bout de course est DÉSACTIVÉ, pas masqué : il garde sa
   place, donc l'en-tête ne se réorganise pas au premier clic. */
.hm-obj-nav button[disabled] { opacity: .35; cursor: default; }

/* ⚠️ DÉFILEMENT NATIF, là où la maquette déplace une piste en `translateX`.
   Le handoff demande lui-même le doigt et le clavier « à ajouter en
   production » : les deux viennent gratuitement ici, la barre de
   progression suit le doigt et pas seulement les boutons, et la section
   reste parcourable sans JavaScript.

   ⚠️ La fenêtre DÉBORDE de la gouttière (`margin` négative compensée par le
   `padding`) : les cartes affleurent le bord de page et la suivante dépasse
   visuellement, ce qui dit qu'il y en a d'autres. `scroll-padding-left`
   reprend la même valeur, sans quoi l'accrochage collerait la carte au bord
   du snapport et mangerait la gouttière. */
/* ⚠️ LA MARGE VERTICALE N'EST PAS DE LA RESPIRATION, C'EST LA PLACE DE
   L'OMBRE. `overflow-y: hidden` coupe à la boîte de remplissage : avec un
   remplissage nul, l'ombre des cartes (`0 12px 34px`, soit 22 px au-dessus
   et 46 px au-dessous) était tranchée net en haut et en bas. Le
   remplissage lui fait de la place, la marge négative le reprend
   exactement : les cartes ne bougent pas d'un pixel. */
.hm-obj-win {
  overflow-x: auto; overflow-y: hidden;
  margin: -30px calc(var(--gut) * -1) -44px; padding: 30px var(--gut) 50px;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--gut);
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hm-obj-win::-webkit-scrollbar { display: none; }
/* `align-items: flex-start` : une carte dépliée grandit vers le bas sans
   étirer ses voisines. */
.hm-obj-track { display: flex; align-items: flex-start; gap: 24px; }

/* ⚠️ DEUX VOILES, PAS UN. La coupure nette est aussi franche à gauche dès
   qu'on a fait défiler ; n'en poser qu'à droite laisserait un bord net d'un
   côté et fondu de l'autre. Chacun s'efface quand il n'y a plus rien de ce
   côté-là : un dégradé qui subsiste en fin de course annonce une suite qui
   n'existe pas.

   ⚠️ Les voiles sont posés sur l'ENVELOPPE, pas sur la fenêtre : enfants
   d'un conteneur qui défile, ils partiraient avec les cartes.

   ⚠️ `rgba(246,243,229,0)` et NON `transparent` : Safari interpole vers le
   noir transparent et le dégradé vire au gris sale. */
.hm-obj-rail { position: relative; }
/* ⚠️ Un seul voile, à DROITE. Le voile de gauche (retiré le 2026-09-10)
   se lisait comme un dégradé PEINT SUR LA CARTE : posé sur le bord
   gauche d'une carte à moitié sortie, il en grisait le coin blanc, et
   rien n'indiquait qu'il s'agissait d'un masque. Ce qui précède est déjà
   dit par la flèche « précédent », qui s'active dès qu'on a défilé. */
.hm-obj-rail::after {
  content: ""; position: absolute; top: -30px; bottom: -50px; width: 88px; z-index: 2;
  pointer-events: none; transition: opacity .25s ease;
  right: calc(var(--gut) * -1); background: linear-gradient(to right, rgba(246,243,229,0), var(--cream) 78%);
}
.hm-obj-rail.fin::after { opacity: 0; }

.hm-obj-c {
  flex: 0 0 400px; display: flex; flex-direction: column; scroll-snap-align: start;
  background: #fff; border-radius: 24px; box-shadow: 0 12px 34px rgba(35,31,31,.10); overflow: hidden;
}
/* ⚠️ HAUTEUR MINIMALE, calée sur la citation la plus longue (trois lignes,
   166 px). Sans elle, les sept cartes ne se distinguaient plus que par la
   longueur de leur citation, et le trait qui sépare l'objection de la
   réponse tombait à une hauteur différente sur chacune : une rangée de
   marches. C'est un PLANCHER, donc les citations plus longues du mobile
   le dépassent sans être coupées. */
.hm-obj-c .q {
  min-height: 166px; padding: 22px 26px 24px;
  /* NACRE, d'après le thème du même nom de l'app : le beige d'avant
     (#EFE9D8) se confondait avec le crème de la page, on ne voyait plus où
     la carte commençait. ⚠️ Pas le lavis radial de l'app tel quel : à 16 %
     d'opacité il habille une page entière, mais sur un bloc de 166 px il
     est invisible et le haut de carte se confondait alors avec le bas,
     blanc (essayé, mesuré à l'écran). D'où un dégradé FRANC, du lilas de
     la barre latérale « nacre » (#F1E3F5) vers un crème chaud. Le bloc de
     réponse reste blanc pur : la coupure entre les deux structure la carte.
     La teinte SUIT L'ICÔNE de la carte (`--tint` posé sur chaque article :
     bleu, jaune, vert, corail, violet) : le nacre devient celui de son
     thème, et sept cartes d'affilée ne sont plus sept fois la même. La
     première ligne est le repli des navigateurs sans `color-mix`. */
  background: linear-gradient(165deg, #F1E3F5 0%, #F9F0E4 100%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--tint, #CF75DA) 26%, #FDFBF8) 0%, #F9F0E4 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--tint, #CF75DA) 22%, #F3ECDC);
}
.hm-obj-c .q-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.hm-obj-c .th { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.hm-obj-c .ic { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; flex: none; color: var(--ink); }
.hm-obj-c .q p { font-size: 18px; line-height: 1.45; font-weight: 600; margin: 0; text-wrap: pretty; }

/* ⚠️ PLANCHER ICI AUSSI. Une fois la citation calée, il restait 24 px
   d'écart entre les cartes, venus des réponses à deux ou trois lignes : le
   bouton « Dans le détail » ne tombait pas à la même hauteur d'une carte à
   l'autre. Ces deux planchers, et EUX SEULS, alignent les sept cartes : on
   ne touche pas à `align-items: flex-start`, qui est ce qui empêche une
   carte dépliée d'étirer ses voisines. */
.hm-obj-c .a { display: flex; flex-direction: column; flex: 1; min-height: 175px; padding: 22px 26px; }
.hm-obj-c .a > p { font-size: 16px; line-height: 1.55; margin: 0 0 18px; text-wrap: pretty; }

.hm-obj-c .pr { display: flex; flex-direction: column; gap: 12px; padding: 18px 0 20px; border-top: 1px solid #EDE6D4; animation: hm-obj-fade .3s ease both; }
/* ⚠️ `[hidden]` de la feuille du navigateur perd contre un `display: flex`
   de classe : sans cette règle, le bloc de preuves resterait visible. */
.hm-obj-c .pr[hidden] { display: none; }
.hm-obj-c .pr > div { display: flex; align-items: flex-start; gap: 10px; }
.hm-obj-c .pr svg { flex: none; }
.hm-obj-c .pr > div svg { margin-top: 2px; color: #4FC2A0; }
.hm-obj-c .pr span { font-size: 13.5px; line-height: 1.5; color: var(--ink3); }
.hm-obj-c .pr a { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--link); margin-top: 2px; }
@keyframes hm-obj-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hm-obj-c .more {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto;
  padding: 9px 15px 9px 16px; border-radius: 999px; border: none; background: #F3EEDE;
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.hm-obj-c .more svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.hm-obj-c .more[aria-expanded="true"] svg { transform: rotate(180deg); }


/* ── 3. Le démonstrateur ───────────────────────────────────────── */
/* ⚠️ LE CADRE AUTOUR DE LA PISTE DOIT ÊTRE ÉGAL SUR LES QUATRE CÔTÉS, et
   la marge basse se calcule à DEUX endroits : celle d'ici PLUS les 10 px
   que `.hm-rail` réserve à sa barre de défilement. D'où 7 en bas pour 17
   en haut. Régler le bas sans tenir compte de ces 10 px produit exactement
   le déséquilibre qu'on vient de corriger. */
.hm-rail-wrap { position: relative; padding: 17px 17px 7px; }
.hm-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scroll-behavior: smooth; overscroll-behavior-x: contain; }
/* ⚠️ `display: flex` + `justify-content: flex-start` : un <button> centre
   son contenu VERTICALEMENT par défaut. Les cartes de la piste s'étirant à
   la hauteur de la plus haute, les questions courtes flottaient au milieu
   pendant que la longue occupait toute sa carte — les intitulés ne
   commençaient pas sur la même ligne. */
.hm-rail-item {
  flex: none; width: 248px; text-align: left; padding: 16px 18px; border-radius: 16px;
  border: 1.5px solid var(--bd2); background: var(--cream); color: var(--ink);
  font: inherit; cursor: pointer; scroll-snap-align: start; transition: background .15s, color .15s;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
}
.hm-rail-item[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.hm-rail-item .tag { display: block; font-size: 11.5px; opacity: .7; margin-bottom: 7px; }
/* ⚠️ QUATRE LIGNES AU PLUS, en filet. Les questions sont celles qu'on pose
   vraiment, donc plus longues qu'un intitulé de rubrique : elles tiennent
   aujourd'hui entre 73 et 84 signes, soit quatre lignes, et aucune n'est
   coupée. Le plafond est là pour la prochaine : les cartes s'alignent sur
   la plus haute, donc une seule question bavarde étirerait les treize. La
   question entière se lit de toute façon dans le panneau, une fois
   choisie. */
.hm-rail-item .q {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 14.5px; line-height: 1.4; font-weight: 600;
}
.hm-rail-nav {
  position: absolute; top: 50%; transform: translateY(-50%); display: none;
  align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1.5px solid var(--bd2); background: #fff; box-shadow: 0 4px 16px rgba(35,31,31,.16);
  cursor: pointer; z-index: 2; color: var(--ink);
}
.hm-rail-nav.on { display: flex; }
.hm-rail-nav.prev { left: 10px; }
.hm-rail-nav.prev svg { transform: rotate(180deg); }
.hm-rail-nav.next { right: 10px; }

.hm-panel { padding: 24px; }
.hm-panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--soft); }
/* ⚠️ AVATAR EN FOND CSS, PAS EN <img>. Le panneau est reconstruit à chaque
   clic de la piste : ses images sont donc réinstanciées treize fois, et une
   requête qui échoue peignait l'icône « image cassée » du navigateur au
   milieu de la bulle de réponse, c'est-à-dire exactement là où se joue la
   démonstration. Un fond CSS qui échoue ne montre rien. Décoratif de bout
   en bout (l'ancien <img> portait déjà alt=""), donc aria-hidden. */
.hm-ava { background: url(/miraca-color.svg) center / cover no-repeat; border-radius: 7px; flex: none; display: block; }
.hm-panel-head .hm-ava { width: 26px; height: 26px; }
.hm-panel-head .q { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.hm-panel-head .tag { padding: 4px 11px; border-radius: 999px; background: #F1D6F4; font-size: 11.5px; font-weight: 600; flex: none; }
/* ── LA ZONE D'ANIMATION ───────────────────────────────────────
   Portage hi-fi du handoff `design/design_handoff_croiseur` : couleurs,
   espacements, rayons, ombres et minutages sont ceux de la référence.

   ⚠️ « Le plan de travail » (#EDE7D6) n'est pas un fond décoratif : c'est
   ce qui sépare la QUESTION (posée sur le blanc de la fenêtre) du TRAVAIL
   qu'elle déclenche. Les deux ne se lisent plus comme un seul bloc.

   ⚠️ LES LARGEURS DE COLONNE SONT FIXES (274 / 62 / 138 / 62 / reste).
   Elles portent la géométrie des courbes de liaison, qui sont des tracés
   SVG absolus : les rendre élastiques décalerait les points d'arrivée. */
.hm-plan { padding: 26px 34px 30px; background: #EDE7D6; border-top: 1px solid var(--bd2); }
.hm-sch { display: flex; align-items: center; gap: 0; }
.hm-tools { flex: 0 0 274px; }
.hm-tools-t { display: block; font-size: 12px; color: var(--ink2); margin-bottom: 12px; }
.hm-tools-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }

/* ⚠️ Une tuile éteinte n'est pas une tuile transparente : elle garde sa
   place, sa taille et son opacité pleine. Jouer sur l'opacité ou l'échelle
   ferait « flotter » les six outils non concernés, alors qu'ils sont là
   pour dire que Miraca y a accès et ne les a PAS lus. */
/* ⚠️ GRAMMAIRE DE LA PAGE, PAS CELLE DE LA RÉFÉRENCE. Partout ailleurs sur
   la vitrine — tuiles métier, canaux, promesses du héros — un pictogramme
   se pose sur un APLAT DE COULEUR PLEINE et se dessine en ENCRE SOMBRE.
   Le handoff fait l'inverse (plaque crème, glyphe pastel) et donnait une
   grille qui ne ressemblait à rien d'autre chez nous. La carte, elle,
   reprend la carte blanche à filet `--bd2` du reste de la page, plutôt
   que l'arête colorée de 2 px de la référence. */
.hm-tool {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 6px 13px; border-radius: 16px;
  background: var(--soft); border: 1px solid transparent; color: var(--ink2);
  transition: box-shadow .45s ease, background .45s ease, border-color .45s ease, color .45s ease;
}
.hm-tool .pl {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 13px; background: rgba(35,31,31,.05); transition: background .45s ease;
}
.hm-tool .pl svg { opacity: .45; transition: opacity .45s ease; }
/* Un vrai logo se désature quand l'outil n'est pas lu : la couleur de
   marque reviendrait sinon crier plus fort que la tuile allumée d'à côté. */
.hm-tool .pl img { width: 26px; height: 26px; object-fit: contain; display: block; filter: grayscale(1); opacity: .4; transition: filter .45s ease, opacity .45s ease; }
.hm-tool .n { display: block; font-size: 10.5px; line-height: 1.25; font-weight: 600; text-align: center; color: var(--ink2); transition: color .45s ease; }
.hm-plan.s1 .hm-tool.lit { background: #fff; border-color: var(--bd2); box-shadow: 0 10px 26px rgba(35,31,31,.13); color: var(--ink); }
.hm-plan.s1 .hm-tool.lit .pl { background: var(--tc); }
.hm-plan.s1 .hm-tool.lit .pl svg { opacity: 1; }
.hm-plan.s1 .hm-tool.lit .n { color: var(--ink); }
/* ⚠️ Une MARQUE ne se pose jamais sur un aplat de couleur : sa plaque
   reste neutre, allumée comme éteinte. C'est la seule exception à la
   règle du dessus, et elle est dictée par les chartes des tiers. */
.hm-tool.marque .pl { background: rgba(35,31,31,.05); }
.hm-plan.s1 .hm-tool.marque.lit .pl { background: var(--cream); }
.hm-plan.s1 .hm-tool.lit .pl img { filter: none; opacity: 1; }

/* Les courbes : tracées, pas apparues. Le pointillé du handoff est ici un
   trait plein tiré par `stroke-dashoffset`, comme dans la référence. */
.hm-lnk { flex: 0 0 62px; display: flex; align-items: center; justify-content: center; }
.hm-lnk .v { display: none; }
.hm-lnk path { fill: none; stroke: #D2C7AF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.hm-lnk path.tip { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
.hm-plan.s2 .hm-lnk:not(.out) path { animation: mdraw .7s ease both; }
.hm-plan.s3 .hm-lnk.out path { animation: mdraw .6s ease both; }
.hm-plan.s3 .hm-lnk.out path.tip { animation: mfade .3s ease .45s both; }

/* Le nœud : le logo de marque EN PLEIN, sans disque ni cadre ajouté. */
.hm-hub { flex: 0 0 138px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-hub-im { position: relative; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; }
.hm-hub-im .hm-ava { width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 14px 34px rgba(35,31,31,.2); }
.hm-hub b { display: block; font-size: 14px; margin-top: 12px; }
/* ⚠️ L'anneau ne pulse QU'AU TEMPS 2 : avant, rien n'est lu ; après, la
   lecture est finie. Un anneau qui continuerait de battre sous la réponse
   dirait que le travail n'est pas terminé. */
.hm-ring { display: none; position: absolute; inset: -6px; border-radius: 36px; border: 2.5px solid var(--yellow); }
.hm-plan.s2:not(.s3) .hm-ring { display: block; animation: mring 1.1s ease-out infinite; }

/* La réponse écrite. */
.hm-ansc { position: relative; flex: 1; min-width: 0; padding-bottom: 40px; }
.hm-ans-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; font-size: 12px; color: var(--ink2); }
.hm-ans-h .b { padding: 3px 9px; border-radius: 999px; background: #E4DCC8; font-size: 11px; font-weight: 600; color: var(--ink2); }
.hm-ans { padding: 22px 24px 24px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(35,31,31,.12); }
/* ⚠️ LE CHIFFRE ET SON LIBELLÉ SONT UN SEUL BLOC, SUR UNE LIGNE. En
   `flex-wrap: wrap`, un libellé un peu long passait sous le chiffre, où il
   devenait indiscernable du constat juste en dessous : deux lignes de même
   corps et de même graisse, et on ne savait plus laquelle commentait le
   chiffre. `nowrap` garde le couple ensemble ; le libellé se replie DANS
   sa propre colonne s'il le faut. */
/* ⚠️ CENTRÉ, PAS ALIGNÉ SUR LA LIGNE DE BASE. Le rapport de corps est de
   trois pour un (46 px contre 15,5) : sur la ligne de base, le libellé se
   colle au PIED du chiffre, avec trente pixels de vide au-dessus de lui, et
   il a l'air d'être tombé là. L'alignement de base ne vaut que pour deux
   corps voisins. */
.hm-num-r { display: flex; align-items: center; gap: 13px; flex-wrap: nowrap; margin-bottom: 16px; }
/* ⚠️ Le halo `box-shadow` FAIT OFFICE DE PADDING : un padding réel
   décalerait la ligne de base du chiffre par rapport à son libellé. */
.hm-num { flex: none; font-family: Bungee, Impact, sans-serif; font-weight: 400; letter-spacing: 0; font-size: 46px; line-height: .95; background: #FBEBC5; box-shadow: 0 0 0 8px #FBEBC5; border-radius: 2px; }
/* Filet : un chiffre exceptionnellement long descend d'un cran plutôt que
   d'écraser son libellé. Les treize cas tiennent en cinq caractères, donc
   il ne se déclenche pas aujourd'hui : il est là pour le quatorzième. */
.hm-num.long { font-size: 34px; }
/* ⚠️ LE LIBELLÉ EST EN ENCRE SECONDAIRE, le constat en encre pleine. Ils
   étaient au même corps, à la même graisse et dans la même couleur : rien ne
   disait lequel était l'unité du chiffre et lequel était la phrase. Le
   libellé complète le chiffre (« 3 décisions en attente ») ; le constat est
   une phrase qui se tient seule. Deux natures, deux encres. */
.hm-numsub { min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--ink2); }
.hm-punch { font-size: 15.5px; line-height: 1.5; font-weight: 600; margin: 0 0 16px; text-wrap: pretty; }
.hm-synth { padding-top: 16px; border-top: 1px solid var(--bd2); }
.hm-synth p { font-size: 14px; line-height: 1.6; margin: 0 0 11px; text-wrap: pretty; }
.hm-synth p:last-child { margin-bottom: 0; }

/* ⚠️ Les objets produits RECOUVRENT volontairement la fin de la synthèse.
   La lisibilité du dernier paragraphe n'est pas l'objectif ; la lecture
   « et ça produit ces objets-là » l'est. Ombre double : ils doivent
   flotter au-dessus de la carte, pas être posés dessus. */
/* ⚠️ `bottom: 2px` et non `-38px` : l'ancrage s'est déplacé de la carte à
   la COLONNE, qui porte 40 px de marge basse. Le bas des objets tombe
   donc à 38 px sous la carte, la valeur du handoff, mais mesurée depuis
   l'autre bord. */
.hm-prod { position: absolute; right: -24px; bottom: 2px; z-index: 3; width: 326px; display: flex; flex-direction: column; gap: 8px; }
.hm-prod-i { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(35,31,31,.26), 0 3px 10px rgba(35,31,31,.14); }
.hm-prod-i .ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; flex: none; }
.hm-prod-i .tx { flex: 1; min-width: 0; }
.hm-prod-i .t { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.hm-prod-i b { display: block; font-size: 12.5px; line-height: 1.32; }
.hm-prod-i .v { padding: 8px 14px; border-radius: 999px; background: #EDE7D6; font-size: 11.5px; font-weight: 600; flex: none; }

/* ⚠️ ÉCART ASSUMÉ AU HANDOFF : la carte réponse et les objets sont
   TOUJOURS dans le DOM, masqués par `visibility` avant leur temps, là où
   la référence les monte et les démonte. Sur une page qu'on fait défiler,
   un bloc qui grandit pousse tout ce qui suit ; ici la hauteur de la zone
   est prise dès la première image. `mrise` ne déplace rien : c'est une
   transformation. */
.hm-ansc, .hm-prod { opacity: 0; visibility: hidden; }
.hm-plan.s4 .hm-ansc { opacity: 1; visibility: visible; animation: mrise .5s ease both; }
.hm-plan.s5 .hm-prod { opacity: 1; visibility: visible; }
.hm-plan.s5 .hm-prod-i { animation: mrise .45s ease both; }

/* Mentions de bas de bloc. */
.hm-ment { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; font-size: 12px; color: var(--ink2); }
.hm-ment .r { margin-left: auto; }
.hm-ment span { display: inline-flex; align-items: center; gap: 6px; }

/* La question qui se tape. Le curseur est piloté par `display` et non par
   l'opacité : son clignotement est une animation CSS, qui gagnerait contre
   une opacité posée en ligne. */
.hm-caret { display: none; width: 2px; height: .95em; margin-left: 3px; vertical-align: -2px; background: var(--ink); animation: mcaret .7s steps(1) infinite; }

@keyframes mfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mrise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mdraw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes mring { 0% { transform: scale(.92); opacity: .6; } 80%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes mcaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hm-idle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 300px; padding: 40px; text-align: center; color: var(--ink2); }
.hm-idle p { font-size: 15px; line-height: 1.6; max-width: 46ch; margin: 0; }

/* ── 4. Métier par métier ──────────────────────────────────────── */
.hm-metier { padding-top: var(--sp); padding-bottom: var(--sp); background: #fff; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.hm-metier .hm-h2 { max-width: 24ch; }
.hm-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hm-usecase { display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: 20px; background: var(--cream); color: var(--ink); transition: transform .15s; }
.hm-usecase .ic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px; color: var(--ink); }
.hm-usecase b { display: block; font-size: 17.5px; margin-bottom: 7px; }
.hm-usecase p { font-size: 14px; line-height: 1.55; color: var(--ink2); margin: 0 0 18px; }
.hm-usecase .gain { align-self: flex-start; margin-top: auto; padding: 7px 14px; border-radius: 999px; font-family: "Bungee", var(--font-display-fallback, Impact, sans-serif); font-weight: 400; font-size: 13px; letter-spacing: 0; }
.hm-usecase:hover { color: var(--ink); }
.hm-usecase-more { display: flex; flex-direction: column; justify-content: center; padding: 24px; border-radius: 20px; border: 1.5px dashed var(--bd3); color: var(--ink); }
.hm-usecase-more b { display: block; font-size: 17.5px; margin-bottom: 7px; }
.hm-usecase-more p { font-size: 14px; line-height: 1.55; color: var(--ink2); margin: 0 0 14px; }
.hm-usecase-more .go { font-size: 14px; font-weight: 600; color: var(--link); }
.hm-usecase-more:hover .go { color: #7A2E9E; }

/* ── 5. Canaux (« Vous ne changez ni d'outil, ni d'habitude ») ─── */
.hm-chan { display: flex; gap: 15px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--bd); color: var(--ink); }
.hm-chan.lead { border: 1.5px solid var(--ink); }
.hm-chan b { display: block; font-size: 16px; margin-bottom: 5px; }
.hm-chan p { font-size: 14px; line-height: 1.55; color: var(--ink2); margin: 0; }
.hm-chan:hover { color: var(--ink); }
/* Vignette de marque partenaire.
   ⚠️ UNE SEULE GÉOMÉTRIE POUR LES SIX CARTES, et c'est ce qui manquait :
   la carte Miraca portait son logo NU en 38x38 quand les cinq autres
   posaient le leur sur une plaque de 98x64, et Slack y mettait un mot en
   Bungee. Trois objets de nature différente dans une grille de 3x2 se
   lisent comme un défaut de fabrication, pas comme une hiérarchie.
   ⚠️ Les tracés sont en ENCRE, pas aux couleurs officielles : six chartes
   de couleur côte à côte se battraient entre elles, et la marque Miraca,
   seule en couleur, perdrait son rang. La reproduction en une seule
   couleur est prévue par les chartes concernées, et les fichiers de
   `logos/` portent désormais l'encre `#231F1F` (cf. logos/README.md).
   ⚠️ Slack garde un PICTOGRAMME MAISON, pas un monogramme : son fichier
   n'est servi que derrière un portail dont l'accès vaut acceptation de sa
   charte de marque, ce qui se signe par l'éditeur et pas au fil d'une
   intégration. C'est la règle déjà appliquée aux tuiles sans logo du
   démonstrateur (`logo: ''` dans OUTILS) : un glyphe de catégorie, à la
   même encre et sur la même plaque, tient sa place ; un mot écrit en
   Bungee, non. Déposer `logos/slack.svg` suffira à le remplacer. */
.hm-mark {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--soft); flex: none; color: var(--ink);
}
/* ⚠️ Une TAILLE EXPLICITE, jamais `width/height: auto` seuls : ces tracés
   sont des symboles carrés dont la dimension intrinsèque a dû être
   ajoutée à la main, et un <img> qui n'a qu'un `max-width` à résoudre se
   replie sur ZÉRO. La vignette reste alors vide, sans image cassée ni
   erreur de console. */
.hm-mark img { width: 26px; height: 26px; object-fit: contain; display: block; }
/* Le glyphe maison est TRACÉ (1,7 px de trait), les marques sont PLEINES :
   à taille égale il pèserait deux fois moins. On le dessine plus grand,
   comme le fait déjà `.hm-tool` du démonstrateur. */
.hm-mark svg { width: 30px; height: 30px; display: block; }
/* ⚠️ DEUX des six fichiers sont des ICÔNES D'APPLICATION, pas des symboles
   détourés : `zapier.svg` et `miraca-color.svg` sont des carrés arrondis
   pleins bord à bord. Mesuré sur un rendu en 48x48, la part de pixels
   opaques va de 10 % (n8n, un graphe de nœuds au trait) à 86 % (Zapier) :
   une taille commune ne donne donc PAS un poids commun.
   ⚠️ Zapier a quand même la taille commune, et c'est un ARBITRAGE, pas un
   oubli : à 20 px, la taille qui égalisait sa masse d'encre, son sigle
   n'était plus qu'une tache sombre illisible. Sur un mur de marques,
   reconnaître le logo prime sur égaliser les gris. Le jour où Zapier
   distribue son seul sigle détouré, la question disparaît. */
/* Miraca est la seule vignette en couleur : c'est ce qui lui donne son
   rang, maintenant que la géométrie ne l'en distingue plus. Son fichier
   étant lui aussi un carré plein, on lui rend son arrondi propre plutôt
   que de le poser en angle vif sur la plaque. */
.hm-mark.marque img { width: 30px; height: 30px; border-radius: 7px; }

/* ── 6-7. Maquettes assistant & projet ─────────────────────────── */
.hm-app { display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.hm-side { display: flex; flex-direction: column; padding: 14px 12px; background: var(--cream); border-right: 1px solid var(--bd2); }
.hm-side-org { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--bd2); margin-bottom: 16px; }
.hm-side-org img { width: 26px; height: 26px; border-radius: 7px; flex: none; display: block; }
.hm-side-org b { display: block; font-size: 13px; font-weight: 600; }
.hm-side-org small { display: block; font-size: 11px; color: var(--ink2); }
.hm-side-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 18px; }
.hm-side-i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px; color: var(--ink2); }
.hm-side-i.on { font-weight: 600; color: var(--ink); }
.hm-side-i i.sq { display: block; width: 16px; height: 16px; border-radius: 5px; flex: none; }
.hm-side-i i.dot { display: block; width: 6px; height: 6px; border-radius: 999px; flex: none; }
.hm-side-lbl { display: block; font-size: 11px; color: var(--ink2); margin: 0 10px 8px; }
.hm-side-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--bd2); margin-top: 6px; }
.hm-av { display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 10.5px; font-weight: 600; flex: none; width: 26px; height: 26px; color: var(--ink); }
.hm-crumb { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--soft); font-size: 13px; color: var(--ink2); }
.hm-crumb .cur { color: var(--ink); }
.hm-thread { padding: 24px 26px 18px; display: flex; flex-direction: column; gap: 20px; }
.hm-ask { display: flex; justify-content: flex-end; gap: 12px; }
.hm-ask p { max-width: 70%; margin: 0; padding: 13px 17px; border-radius: 16px 16px 4px 16px; background: #F1D6F4; font-size: 14.5px; line-height: 1.55; }
.hm-ask .hm-av { width: 30px; height: 30px; font-size: 11px; }
.hm-reply { display: flex; gap: 12px; }
.hm-reply > img { width: 30px; height: 30px; border-radius: 8px; flex: none; display: block; }
.hm-reply .body { min-width: 0; flex: 1; }
.hm-bul { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.hm-bul i { display: block; width: 5px; height: 5px; border-radius: 999px; background: var(--link); flex: none; margin-top: 9px; }
.hm-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--bd2); border-radius: 14px; margin-bottom: 12px; }
.hm-file .ic { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #FBEBC5; flex: none; }
.hm-file b { display: block; font-size: 14px; }
.hm-file small { display: block; font-size: 12px; color: var(--ink2); }
.hm-src-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: var(--soft); font-size: 11.5px; color: var(--ink2); }
.hm-src-chip.ok { background: #E6F6F2; color: var(--ink); }
.hm-composer { margin-top: auto; padding: 0 26px 22px; }
.hm-composer .warn { font-size: 12px; color: var(--ink2); text-align: center; margin: 0 0 10px; }
.hm-composer .box { border: 1px solid var(--bd2); border-radius: 16px; padding: 14px 16px 12px; }
.hm-composer .ph { display: block; font-size: 14px; color: var(--ink2); margin-bottom: 14px; }
.hm-composer .row { display: flex; align-items: center; gap: 10px; }
.hm-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: var(--soft); font-size: 12.5px; }
.hm-pill.ok { background: #E6F6F2; font-size: 12px; }
.hm-send { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--yellow); flex: none; color: var(--ink); }
.hm-tabbar { display: none; }

.hm-proj { padding: 32px 46px 34px; }
.hm-proj-head { text-align: center; margin-bottom: 30px; }
.hm-proj-head .ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; background: #F1D6F4; margin-bottom: 14px; }
.hm-proj-head h3 { font-size: 26px; margin: 0 0 8px; }
.hm-proj-head p { font-size: 15px; line-height: 1.6; color: var(--ink2); margin: 0 auto 20px; max-width: 52ch; }
.hm-row-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.hm-row-head .t { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.hm-doc { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid var(--bd2); border-radius: 14px; }
.hm-doc b { display: block; font-size: 13.5px; }
.hm-doc small { display: block; font-size: 11.5px; color: var(--ink2); }
.hm-doc.add { justify-content: center; border: 1.5px dashed var(--bd3); font-size: 13.5px; color: var(--ink2); }
.hm-mem { padding: 18px 20px; border-radius: 16px; background: #E6F6F2; margin-bottom: 28px; }
.hm-mem-i { display: flex; gap: 12px; padding: 13px 16px; border-radius: 13px; background: #fff; }
.hm-mem-i .l { display: block; font-size: 14px; line-height: 1.55; }
.hm-mem-i .s { display: block; font-size: 11.5px; color: var(--ink2); margin-top: 3px; }
.hm-mem .note { font-size: 12.5px; line-height: 1.55; color: var(--ink2); margin: 0; padding-top: 12px; border-top: 1px solid rgba(35,31,31,.12); }
.hm-conv { border: 1px solid var(--bd2); border-radius: 14px; overflow: hidden; }
.hm-conv-r { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--soft); }
.hm-conv-r:last-child { border-bottom: none; }
.hm-conv-r .t { flex: 1; min-width: 0; font-size: 14px; }
.hm-conv-r .d { font-size: 12px; color: var(--ink2); flex: none; }

/* ── 8. Vos principes ──────────────────────────────────────────── */
.hm-principes { border-radius: 26px; background: linear-gradient(126deg, #6FC8E8, #4FC2A0); padding: 44px 46px; }
.hm-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.hm-principes h2 { font-size: 36px; line-height: 1.06; margin: 0; color: var(--ink); }
.hm-principes .lede { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 16px 0 0; }
.hm-rules { background: var(--cream); border-radius: 20px; padding: 26px 28px; }
.hm-rules .lbl { display: block; font-size: 12.5px; color: var(--ink2); margin-bottom: 14px; }
.hm-rule { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: 13px; background: #fff; font-size: 14.5px; }
.hm-rules .note { font-size: 13px; line-height: 1.55; color: var(--ink2); margin: 14px 0 0; }

/* ── 9. La chaîne souveraine ───────────────────────────────────── */
.hm-chaine { border-radius: 26px; background: var(--deep); padding: 44px 46px; }
.hm-chaine h2 { font-size: 36px; line-height: 1.06; margin: 0; color: var(--cream); max-width: 26ch; }
.hm-chaine .lede { font-size: 18px; line-height: 1.6; color: var(--deep-ink); margin: 16px 0 0; max-width: 74ch; }
.hm-chaine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 44px; margin-top: 30px; }
.hm-chaine-i { display: flex; gap: 15px; }
.hm-chaine-i b { display: block; font-size: 16.5px; color: var(--cream); margin-bottom: 4px; }
.hm-chaine-i p { font-size: 14.5px; line-height: 1.6; color: var(--deep-ink); margin: 0; }
.hm-chaine-note { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding: 18px 22px; border-radius: 16px; background: rgba(246,243,229,.1); color: var(--cream); }
.hm-chaine-note p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.hm-chaine-note .go { color: var(--deep-ink); white-space: nowrap; }
.hm-chaine-note:hover .go { color: var(--cream); }

/* ── 10. Les trois promesses commerciales ──────────────────────── */
.hm-offer-grid { gap: 16px; }
.hm-offer { padding: 26px 28px; border-radius: 22px; }
.hm-offer b { display: block; font-size: 30px; margin-bottom: 8px; }
.hm-offer .t { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.hm-offer p { font-size: 14px; line-height: 1.55; color: var(--ink2); margin: 0; }

/* ── 11. Appel à l'action final ────────────────────────────────── */
.hm-final { border-radius: 28px; background: linear-gradient(124deg, #E19A88, #CF75DA); padding: 56px 48px; text-align: center; }
.hm-final h2 { font-size: 46px; line-height: 1.04; margin: 0 auto; color: var(--ink); max-width: 22ch; }
.hm-final p { font-size: 17.5px; line-height: 1.6; color: var(--ink); margin: 18px auto 30px; max-width: 58ch; }


/* ── Mouvement ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hm-marquee-track { animation: none; }
  /* ⚠️ La scène est rendue à son état FINAL (`run()` pose s1…s5 d'un coup),
     donc rien ne doit se tracer, pulser ni clignoter au passage. Les
     courbes sont ramenées à leur tracé complet, sinon elles resteraient
     invisibles : leur `stroke-dashoffset` de repos vaut 420. */
  .hm-tool, .hm-tool .pl, .hm-tool .pl svg, .hm-tool .n { transition: none; }
  .hm-plan .hm-lnk path { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .hm-plan .hm-ansc, .hm-plan .hm-prod-i { animation: none; }
  .hm-ring, .hm-caret { animation: none; }
  .hm-rail { scroll-behavior: auto; }
}

/* ═══ Entre 1180 et 1024 px ═══ */
@media (max-width: 1120px) {
  .hm { --sp: 65px; --hero-air: 24px; }
  /* Mesuré : à 55 px le titre saute à CINQ lignes dans cette colonne (568 px),
     contre trois à 48. 52 px en garde quatre. */
  .hm-hero h1 { font-size: 52px; }
  .hm-stage { padding-left: 28px; padding-right: 28px; }
  .hm-stage-1 { padding-left: 16px; padding-right: 16px; }
  /* La zone d'animation s'empile : les outils, le nœud, la réponse.
     ⚠️ Les courbes horizontales cèdent la place aux liaisons VERTICALES
     déjà présentes dans le balisage : une courbe de gauche à droite ne
     relierait plus rien une fois les voies l'une sous l'autre. */
  .hm-sch { flex-direction: column; align-items: stretch; }
  .hm-tools, .hm-hub, .hm-ansc { flex: 1 1 auto; width: 100%; }
  .hm-lnk { flex: none; height: 40px; }
  .hm-lnk .h { display: none; }
  .hm-lnk .v { display: block; }
  .hm-hub { align-items: center; }
  .hm-hub-im { width: 88px; height: 88px; }
  .hm-hub-im .hm-ava { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 12px 28px rgba(35,31,31,.2); }
  .hm-ring { inset: -6px; border-radius: 28px; }
  /* ⚠️ Les objets produits ne se SUPERPOSENT plus : empilés sous la carte,
     pleine largeur. Recouvrir un paragraphe est tenable sur 476 px de
     colonne, pas sur 350 px où il ne resterait plus rien à lire. */
  .hm-ansc { padding-bottom: 0; }
  .hm-prod { position: static; width: auto; margin-top: 12px; }
  .hm-ment { flex-direction: column; align-items: flex-start; gap: 7px; }
  .hm-ment .r { margin-left: 0; }

  /* ⚠️ L'empilement se déclenche à 1120 px et non à 940 comme le reste de
     la page : les quatre colonnes de gauche font 536 px FIXES, donc sous
     cette largeur la colonne de réponse passe sous 400 px et le bloc des
     objets produits (326 px) la recouvrirait en entier. Ce n'est pas la
     taille de l'écran qui commande ici, c'est la place qui reste. */
  .hm-proj { padding-left: 28px; padding-right: 28px; }
  .hm-principes, .hm-chaine { padding: 36px 32px; }
  .hm-final { padding: 44px 32px; }
}

/* ═══ Le héros passe en une colonne ═══ */
@media (max-width: 940px) {
  .hm-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hm-hero h1 { font-size: 46px; }
  .hm-lead { font-size: 18px; }
  .hm-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-2col { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hm-chaine-grid { gap: 24px 32px; }
  /* La barre latérale de l'assistant cède la place à une barre d'onglets. */
  .hm-app { grid-template-columns: minmax(0, 1fr); }
  .hm-side { display: none; }
  .hm-tabbar { display: flex; border-top: 1px solid var(--bd2); background: var(--cream); }
  .hm-tabbar span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 10px; font-size: 11px; color: var(--ink2); }
  .hm-tabbar span.on { color: var(--ink); font-weight: 600; }
}

/* ═══ Échelle mobile (maquette 9a) ═══ */
@media (max-width: 760px) {
  .hm { --sp: 50px; --hero-air: 16px; }

  .hm-hero { gap: 26px; }
  .hm-hero h1 { font-size: 38px; line-height: 1.06; margin-top: 18px; }
  .hm-lead { font-size: 16px; margin-top: 16px; }
  .hm-cta-row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .hm-cta-row .hm-btn { height: 52px; padding: 0 20px; }
  .hm-promise { gap: 10px; }
  .hm-promise > * { padding: 16px; border-radius: 16px; }
  .hm-promise .hm-ic { width: 36px; height: 36px; border-radius: 11px; margin-bottom: 13px; }
  .hm-promise b { font-size: 22px; }
  .hm-promise .u { font-size: 12px; }
  .hm-promise span.t { font-size: 12.5px; margin-top: 6px; }

  .hm-marquee { padding: 16px 0; }
  .hm-marquee-track { animation-duration: 30s; }
  .hm-marquee-item { gap: 10px; }
  .hm-marquee-item .p { width: 30px; height: 30px; }
  .hm-marquee-item .l { font-size: 17px; }
  .hm-marquee-item .d { width: 5px; height: 5px; margin: 0 13px; }

  .hm-h2 { font-size: 26px; line-height: 1.08; }
  .hm-sub { font-size: 15px; margin-bottom: 20px; }
  .hm-card { border-radius: 22px; }
  .hm-card-intro { padding: 22px 18px 16px; }
  .hm-card-intro p { font-size: 18px; line-height: 1.38; }

  /* ⚠️ En mobile, seule la VERTICALE est réduite de moitié : 8 + 2 en
     haut, 2 + 8 en bas. L'horizontale reste la gouttière de page
     (`--gut`), qui aligne la première carte sur la marge du texte et
     que `scroll-padding-left` reprend à l'identique. */
  .hm-rail-wrap { padding: 8px 0 2px; }
  /* ⚠️ `scroll-padding-left` EN PLUS du padding. L'accrochage `mandatory`
     aligne la carte sur le bord du SNAPPORT, qui est la boîte de padding :
     le navigateur fait donc défiler de 20 px pour y coller la première
     carte, et la marge qu'on venait de poser disparaît — mesuré
     `scrollLeft: 20` pour un écart visuel de 0. `scroll-padding` rentre le
     snapport, et la marge tient. */
  .hm-rail {
    padding: 2px var(--gut) 8px; scroll-padding-left: var(--gut);
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .hm-rail-item { width: 232px; }
  .hm-rail-nav { display: none !important; }
  .hm-stage { padding: 18px 14px 0; }
  .hm-panel-head { padding: 13px 16px; gap: 10px; }
  .hm-panel-head .q { font-size: 14px; }
  .hm-plan { padding: 18px 14px 20px; }
  .hm-tool { padding: 10px 5px; }
  .hm-tool .pl { width: 40px; height: 40px; border-radius: 12px; }
  .hm-tool .n { font-size: 10px; }
  .hm-ans { padding: 18px 16px; border-radius: 18px; box-shadow: 0 10px 26px rgba(35,31,31,.12); }
  .hm-num { font-size: 38px; box-shadow: 0 0 0 7px #FBEBC5; }
  .hm-numsub { font-size: 14px; }
  .hm-punch { font-size: 14.5px; }
  .hm-prod-i { padding: 11px 12px; box-shadow: 0 14px 32px rgba(35,31,31,.2), 0 3px 8px rgba(35,31,31,.12); }
  .hm-prod-i .ic { width: 36px; height: 36px; }
  /* ⚠️ Cible tactile : le bouton d'action passe à 38 px de haut. */
  .hm-prod-i .v { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; }
  .hm-ment { font-size: 11.5px; }

  /* ── Les objections en mobile ─────────────────────────────────
     Comportement décrit par le handoff (non maquetté) : cartes à 86 vw,
     en-tête empilé, titre à 24 px. Le rail défile déjà au doigt : il n'a
     jamais reposé sur les boutons, qui restent là pour la souris.
     ⚠️ La fenêtre n'a rien à changer : sa gouttière est `--gut`, qui vaut
     déjà 20 px sous 760 px. */
  .hm-obj h2 { font-size: 24px; line-height: 1.1; max-width: none; }
  .hm-obj-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
  .hm-obj-nav { padding-bottom: 0; }
  .hm-obj-c { flex: 0 0 86vw; }
  /* ⚠️ Plancher RECALÉ pour le mobile : les cartes y font 86 vw, les
     citations passent donc à quatre lignes sur deux d'entre elles. Les deux
     planchers sont calés sur la citation la plus longue du jeu : à
     revérifier si on en ajoute une, sinon elle dépassera et rétablira le
     désalignement qu'ils corrigent. */
  .hm-obj-c .q { min-height: 183px; padding: 20px 22px 22px; }
  .hm-obj-c .q p { font-size: 17px; }
  .hm-obj-c .a { padding: 20px 22px; }

  .hm-metier { padding-left: 0; padding-right: 0; }
  .hm-metier .hm-h2, .hm-metier .hm-sub { padding-left: 20px; padding-right: 20px; }
  /* Piste horizontale à glisser : la première carte s'aligne sur la marge,
     la suivante dépasse — c'est l'accroche qui dit « ça glisse ». */
  .hm-grid3 {
    display: flex; grid-template-columns: none; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px var(--gut) 10px; scroll-padding-left: var(--gut);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hm-grid3::-webkit-scrollbar { display: none; }
  .hm-grid3 > * { flex: none; width: 232px; scroll-snap-align: start; }
  .hm-usecase { padding: 20px; }
  .hm-usecase b { font-size: 16.5px; }
  .hm-usecase .ic { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 13px; }
  /* Les canaux restent EMPILÉS : ce ne sont pas des cartes à parcourir. */
  .hm-chan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: visible; padding: 0; }
  .hm-chan-grid > * { width: auto; }
  .hm-chan { padding: 16px 18px; gap: 13px; border-radius: 18px; }
  .hm-chan b { font-size: 15px; }
  .hm-mark { width: 48px; height: 48px; border-radius: 12px; }
  .hm-mark img { width: 24px; height: 24px; }
  .hm-mark svg { width: 26px; height: 26px; }
  .hm-mark.marque img { width: 26px; height: 26px; border-radius: 6px; }

  .hm-crumb { padding: 12px 16px; font-size: 12px; }
  .hm-thread { padding: 16px 14px 14px; gap: 16px; }
  .hm-ask p { max-width: 88%; }
  .hm-composer { padding: 0 14px 16px; }
  .hm-composer .ph { font-size: 13px; }
  .hm-pill { font-size: 11.5px; padding: 5px 11px; }
  .hm-proj { padding: 22px 16px 26px; }
  .hm-proj-head h3 { font-size: 22px; }
  .hm-proj-grid { grid-template-columns: minmax(0, 1fr); }

  .hm-principes, .hm-chaine { padding: 28px 22px; border-radius: 22px; }
  .hm-principes h2, .hm-chaine h2 { font-size: 24px; line-height: 1.1; }
  .hm-principes .lede { font-size: 15px; }
  .hm-chaine .lede { font-size: 15.5px; }
  .hm-rules { padding: 20px; }
  .hm-rule { font-size: 14px; padding: 11px 13px; }
  .hm-chaine-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hm-chaine-note { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }

  .hm-offer-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hm-offer { padding: 22px 20px; }
  .hm-offer b { font-size: 26px; }

  .hm-final { padding: 34px 22px; border-radius: 24px; }
  .hm-final h2 { font-size: 27px; line-height: 1.08; }
  .hm-final p { font-size: 15.5px; margin-bottom: 24px; }
  .hm-final .hm-btn { width: 100%; height: 52px; padding: 0 20px; }

}

@media (max-width: 420px) {
  .hm-hero h1 { font-size: 31px; } /* 33 px = cinq lignes sur 375 px ; 31 en garde quatre */
  .hm-h2 { font-size: 23px; }
  .hm-final h2 { font-size: 24px; }
}

/* Renvoi discret vers la page de fond, sous l'accroche d'une maquette.
   Écrit dans la grammaire du « Voir les quatorze → » de la maquette. */
.hm-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--link); }
.hm-more:hover { color: #7A2E9E; }