/* ═══════════════════════════════════════════════════════════════════════════
   ACCUEIL — feuille dediee (refonte 2026)
   ───────────────────────────────────────────────────────────────────────────
   Pourquoi un FICHIER et pas le bloc <style> de index.html : l'ancien tenait
   1 100 lignes, dont la quasi-totalite en `!important` pour repasser par-dessus
   style.css. A ce stade ce n'est plus une surcharge, c'est une deuxieme feuille
   cachee dans le HTML — impossible a relire, et deja responsable de trois
   regressions de cascade dans ce projet.
   Ici, prefixe `hm-` sur TOUT, aucun `!important`, aucun selecteur d'element nu.
   Ce qui est dans style.css (nav, pied de page, boutons) n'est pas retouche.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Entrees au defilement ────────────────────────────────────────────────
   Pilotees par le script en bas de index.html, qui retire l'attribut une fois
   l'entree jouee pour rendre la main aux transitions de survol. */
@media (prefers-reduced-motion: no-preference) {
  [data-sa] {
    opacity: 0;
    transition:
      opacity .85s cubic-bezier(.22, 1, .36, 1),
      transform .85s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--sa-d, 0s);
    will-change: opacity, transform;
  }

  [data-sa="up"]    { transform: translateY(38px); }
  [data-sa="down"]  { transform: translateY(-26px); }
  [data-sa="left"]  { transform: translateX(-48px); }
  [data-sa="right"] { transform: translateX(48px); }
  [data-sa="zoom"]  { transform: scale(.94); }

  [data-sa].sa-in {
    opacity: 1;
    transform: none;
  }
}

/* Conteneur plus large que le `.container` du site (1080). Les grands titres
   et la bande de realisations ont besoin d'air lateral pour ne pas paraitre
   comprimes. */
.hm-wrap {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   Composition CENTREE, contrairement a la version precedente en deux colonnes.
   A ce corps de titre, une colonne de texte a gauche laisse un vide impossible
   a meubler a droite ; centre, le titre porte l'ecran a lui seul.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le bas du hero porte lui-meme son espace. Il etait a 0 tant qu'une bande de
   realisations occupait la fin de la section ; cette bande a ete retiree — le
   premier ecran ne montre plus de projets. */
.hm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 150px 112px;

  /* ⚠️ `min-height` et non `height` : sur un ecran court, ou en zoom texte, le
     contenu doit pouvoir POUSSER le hero au-dela de cette hauteur. Une hauteur
     fixe le ferait deborder de sa boite, et `overflow: hidden` juste au-dessus
     couperait le bouton du bas.

     ⚠️ `svh` APRES `vh`, et les deux sont necessaires. Sur mobile, `vh` se cale
     sur la fenetre BARRE D'URL RETRACTEE : un hero a 100vh y est plus haut que
     l'ecran reellement visible au chargement, et son bas passe sous la barre du
     navigateur. `svh` prend la fenetre la plus petite, celle avec la barre. La
     ligne `vh` reste au-dessus comme repli pour les moteurs qui ignorent `svh`
     — l'ordre fait tout : c'est la seconde qui gagne quand elle est comprise. */
  min-height: 100vh;
  min-height: 100svh;

  /* Le contenu se centre dans la hauteur. Les calques de fond (lueur, arc,
     trame, aurores, grain) sont en position absolue : ils sortent du flux et ne
     deviennent donc PAS des elements de cette boite flexible. Seul `.hm-wrap`
     en est un. */
  display: flex;
  align-items: center;
}

/* En element flexible, `.hm-wrap` garde sa largeur maximale et se recentre par
   ses marges automatiques. */
.hm-hero__inner {
  width: 100%;
}

/* Le fond est peint ICI et non sur <body> : il doit s'arreter net au bas du
   hero, sinon le degrade continue sous les sections suivantes et le rose
   remonte derriere les cartes. */
.hm-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% -4%, rgba(180, 24, 36, .13) 0%, transparent 68%),
    radial-gradient(40% 38% at 92% 22%, rgba(218, 108, 117, .10) 0%, transparent 70%),
    linear-gradient(180deg, #fdf6f5 0%, var(--paper) 62%, var(--paper) 100%);
}

/* La CLAIRIERE. Un voile ivoire, opaque au centre et transparent sur les bords :
   il rend au titre un fond uni, pendant que la carte continue d'exister autour.
   Pose en calque separe plutot qu'en masque compose sur la photo : `mask-composite`
   n'a pas le meme nom ni le meme comportement partout, et un calque de plus est ici
   le procede DEJA employe par le hero (wash, grain) — on ne fait qu'en ajouter un. */
.hm-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    64% 46% at 50% 44%,
    rgba(250, 248, 245, .92) 0%,
    rgba(250, 248, 245, .72) 48%,
    rgba(250, 248, 245, 0) 80%
  );
}

/* Grain, pose en couche separee du degrade. Melange au meme `background` il
   se faisait etirer par `background-size: auto` des autres couches. */
.hm-hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

.hm-hero__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pas de `max-width` serree ici : le retour a la ligne est pose a la main dans
   le HTML, entre « sites » et « internet ». Une largeur de 15ch coupait la
   deuxieme ligne en deux et laissait « Orleans » seul sur un troisieme rang. */
/* ⚠️ `margin-top: 0` : le titre portait 26px de marge haute pour se separer de
   la pastille « Agence web a Orleans », qui a ete retiree. Il est maintenant le
   premier element du premier ecran. */
.hm-hero__title {
  margin: 0;
  max-width: 22ch;
  color: var(--ink);
}


/* ══════════════════════════════════════════════════════════════════════════
   LE TITRE QUI S'ECRIT
   ──────────────────────────────────────────────────────────────────────────
   « Creation de » reste fixe ; la seconde ligne s'ecrit, s'efface et repart
   sur quatre declinaisons.

   ⚠️ LA HAUTEUR EST RESERVEE PAR UNE COPIE MASQUEE (`.hm-type__cale`), qui
   contient la declinaison la plus longue. Le texte qui s'ecrit est pose
   PAR-DESSUS, en position absolue. Sans cette cale, le bloc changerait de
   hauteur a chaque mot — et comme le heros centre son contenu sur 100 svh,
   c'est toute la page qui remonterait et redescendrait a chaque frappe.
   `visibility: hidden` et non `display: none` : il faut que la cale occupe
   sa place, justement.

   ⚠️ LE CURSEUR EST UNE BORDURE, sur une balise VIDE. Un vrai caractere aurait
   ete plus simple, mais il entrait dans le texte du titre : la page servait
   alors « Creation de sites internet a Orleans | » a tout ce qui lit le HTML
   sans le rendre. Une bordure ne fait partie d'aucun texte.

   ⚠️ Sa couleur est ECRITE, pas `currentColor`. Le <b> qui l'entoure porte
   `background-clip: text` sur fond sombre, avec `color: transparent` : son
   degrade est decoupe a la forme de son texte, et `currentColor` y vaut donc
   « transparent » — le curseur serait invisible.

   ⚠️ Le clignotement passe par `visibility` et non par `opacity`. `opacity`
   sur un enfant cree un contexte de composition, ce qui perturbe le decoupage
   du degrade du parent ; `visibility` se contente de ne pas peindre.
   ══════════════════════════════════════════════════════════════════════════ */
.hm-type {
  position: relative;
  display: block;
}

.hm-type__cale {
  display: block;
  visibility: hidden;
}

.hm-type__txt {
  position: absolute;
  inset: 0;
  display: block;
}

.hm-type__curseur {
  display: inline-block;
  width: 0;
  height: .74em;
  /* Colle a la derniere lettre : un espace avant le curseur le ferait flotter
     a un demi-cadratin du mot, et on lirait une barre au lieu d'un curseur. */
  margin-left: .06em;
  vertical-align: -.02em;
  border-right: .055em solid var(--hm-caret, #ff9aa2);
  animation: hm-caret 1.05s steps(1, end) infinite;
}

@keyframes hm-caret {
  0%   { visibility: visible; }
  50%  { visibility: hidden; }
  100% { visibility: visible; }
}

/* ── Mouvement reduit ───────────────────────────────────────────────────── */
/* Le reglage systeme est respecte : le titre garde la premiere declinaison,
   celle qui porte le referencement, et le curseur disparait plutot que de
   clignoter dans le vide. Le script s'arrete de lui-meme, cette regle ne fait
   que retirer ce qui resterait a l'ecran. */
@media (prefers-reduced-motion: reduce) {
  .hm-type__curseur {
    display: none;
  }
}

.hm-hero__sub {
  margin: 24px 0 0;
  max-width: 60ch;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.hm-hero__sub strong {
  color: var(--ink);
  font-weight: 600;
}

.hm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   EN-TETES DE SECTION (partages par les blocs qui suivent)
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-sec {
  padding-block: 96px;
  position: relative;
}

.hm-sec--tint {
  background: var(--bg-subtle);
}

.hm-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hm-head__t {
  margin-top: 20px;
  color: var(--ink);
}

/* ⚠️ Les pastilles de section ont ete retirees du HTML ; le titre est devenu le
   premier element de son en-tete. Sa marge haute servait a l'en separer — sans
   ce zero, chaque en-tete descend de 20px pour rien. `:first-child` plutot
   qu'une classe : la regle s'applique d'elle-meme aux sections qui gardent leur
   pastille comme a celles qui l'ont perdue. */
.hm-head__t:first-child {
  margin-top: 0;
}

/* ⚠️ Trois lettres, donc une taille que le reste du site ne peut pas se
   permettre : `clamp(2rem, 4vw, 3rem)` est calibre pour des titres de six a dix
   mots, qui passeraient a la ligne bien avant. « FAQ » tient sur une ligne a
   n'importe quelle largeur, et c'est ce qui autorise le grand corps.
   Le `line-height: .9` reprend le vide que laissent des capitales sans
   jambages : a 1,12 le titre flottait au-dessus de son sous-titre. */
.hm-head__t--faq {
  font-size: clamp(3.6rem, 12vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.04em;
}

.hm-head__s {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   POURQUOI — comparatif sans / avec
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.hm-cmp__col {
  border-radius: var(--r-xl);
  padding: 30px 28px;
  border: 1px solid var(--border);
  background: #fff;
}

.hm-cmp__col--no {
  background: var(--bg-subtle);
  border-color: #ddd7cc;
}

.hm-cmp__col--yes {
  border-color: rgba(180, 24, 36, .22);
  box-shadow: 0 12px 40px rgba(180, 24, 36, .07);
}

.hm-cmp__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.hm-cmp__badge {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
}

.hm-cmp__col--no .hm-cmp__badge {
  background: #e6e1d8;
  color: #7d786f;
}

.hm-cmp__col--yes .hm-cmp__badge {
  background: var(--red);
  color: #fff;
}

.hm-cmp__t {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}

.hm-cmp__s {
  display: block;
  font-size: .84rem;
  color: var(--muted);
}

.hm-cmp__row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-block: 13px;
}

.hm-cmp__row + .hm-cmp__row {
  border-top: 1px solid rgba(230, 225, 216, .7);
}

.hm-cmp__ico {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--muted);
}

.hm-cmp__col--yes .hm-cmp__ico {
  color: var(--red);
}

.hm-cmp__row b {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
}

.hm-cmp__row span {
  display: block;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESSUS — trois etapes
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   LA TRAJECTOIRE — « Votre projet en trois étapes »
   ───────────────────────────────────────────────────────────────────────────
   Une fusée décolle en bas à gauche et sort du cadre en haut à droite. La
   trajectoire ondule EN MONTANT : chaque arrêt est plus haut que le précédent
   (y = 150, puis 104, puis 46), et la courbe redescend un peu entre deux pour
   garder la vague — une montée régulière ne serait qu'une diagonale.

   La progression se lit ainsi dans la géométrie avant de se lire dans le
   texte, et le vol donne son sens à l'ordre des trois étapes.

   Les trois arrêts sont à x = 200, 600 et 1000 du viewBox, soit 1/6, 1/2 et
   5/6 de la largeur — exactement les centres des trois colonnes.

   ⚠️ CE QUI EST CACHÉ N'EST CACHÉ QUE SOUS `.js-anim`, la classe que le script
   d'entrée pose sur <html>. Script bloqué, erreur réseau, navigateur ancien :
   les bulles sont visibles et la route est dessinée d'un bout à l'autre. Une
   animation d'apparition ne doit jamais pouvoir effacer ce qu'elle révèle.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.hm-road {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.hm-road__svg {
  display: block;
  width: 100%;
  height: auto;
  /* La voiture déborde du cadre au départ et à l'arrivée : sans cela elle est
     coupée net par le bord du SVG. */
  overflow: visible;
  color: var(--red);
}

/* Devant la fusée, la trajectoire est en POINTILLÉS — ce qui reste à faire ;
   derrière, le trait plein se dessine. La différence de nature dit l'étape
   mieux qu'une simple différence de couleur. */
.hm-road__base {
  stroke: #d3ccc0;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
}

/* La route « parcourue », qui se dessine derrière la voiture. `pathLength=100`
   normalise la longueur : le tiret et son décalage se pilotent en pourcentage,
   sans avoir à mesurer le tracé. */
.hm-road__live {
  stroke: var(--red);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 3px 10px rgba(180, 24, 36, .28));
}

.js-anim .hm-road__live {
  stroke-dashoffset: 100;
}

.js-anim .hm-steps.hm-on .hm-road__live {
  animation: hm-route 3.1s linear both;
}

@keyframes hm-route {
  to { stroke-dashoffset: 0; }
}

/* La fusée attend hors champ tant que la section n'est pas atteinte : SMIL ne
   la pose sur la trajectoire qu'au démarrage, avant quoi elle serait à
   l'origine du SVG, en haut à gauche. */
.hm-road__ship {
  opacity: 0;
}

.js-anim .hm-steps.hm-on .hm-road__ship {
  opacity: 1;
  transition: opacity .25s ease;
}

/* La flamme bat. `steps(2)` et non une interpolation continue : une flamme se
   voit vaciller, elle ne respire pas. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .hm-steps.hm-on .hm-road__flame {
    animation: hm-flamme .16s steps(2) infinite alternate;
    transform-box: fill-box;
    transform-origin: right center;
  }
}

@keyframes hm-flamme {
  from { transform: scaleX(.72); opacity: .85; }
  to   { transform: scaleX(1.18); opacity: 1; }
}

/* Étincelles semées sur le passage : elles s'allument juste APRÈS que la fusée
   les a dépassées, comme une traînée qui retombe. */
.hm-road__sparks path {
  fill: rgba(180, 24, 36, .5);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js-anim .hm-steps.hm-on .hm-road__sparks path {
    animation: hm-etincelle 1.6s var(--ease) both;
  }

  .js-anim .hm-steps.hm-on .hm-road__sparks path:nth-of-type(1) { animation-delay: .75s; }
  .js-anim .hm-steps.hm-on .hm-road__sparks path:nth-of-type(2) { animation-delay: 1.25s; }
  .js-anim .hm-steps.hm-on .hm-road__sparks path:nth-of-type(3) { animation-delay: 1.85s; }
  .js-anim .hm-steps.hm-on .hm-road__sparks path:nth-of-type(4) { animation-delay: 2.15s; }
  .js-anim .hm-steps.hm-on .hm-road__sparks path:nth-of-type(5) { animation-delay: 2.75s; }
}

@keyframes hm-etincelle {
  0%   { opacity: 0; scale: .3; }
  35%  { opacity: 1; scale: 1.15; }
  100% { opacity: .55; scale: 1; }
}

/* ── Les bulles ─────────────────────────────────────────────────────────── */
.hm-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px 24px 24px;
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.hm-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* Les arrêts : tige qui descend de la route vers la bulle, pastille posée sur
   la vague. La pastille s'allume au passage de la voiture. */
.hm-road__stops line {
  stroke: var(--border);
  stroke-width: 2;
  transition: stroke .35s var(--ease);
}

.js-anim .hm-steps.hm-on .hm-road__stops line:nth-of-type(1) { stroke: rgba(180, 24, 36, .35); transition-delay: .62s; }
.js-anim .hm-steps.hm-on .hm-road__stops line:nth-of-type(2) { stroke: rgba(180, 24, 36, .35); transition-delay: 1.58s; }
.js-anim .hm-steps.hm-on .hm-road__stops line:nth-of-type(3) { stroke: rgba(180, 24, 36, .35); transition-delay: 2.52s; }

.hm-road__stops circle {
  fill: #fff;
  stroke: var(--border);
  stroke-width: 3;
  transition: stroke .35s var(--ease);
}

.js-anim .hm-steps.hm-on .hm-road__stops circle:nth-of-type(1) { stroke: var(--red); transition-delay: .62s; }
.js-anim .hm-steps.hm-on .hm-road__stops circle:nth-of-type(2) { stroke: var(--red); transition-delay: 1.58s; }
.js-anim .hm-steps.hm-on .hm-road__stops circle:nth-of-type(3) { stroke: var(--red); transition-delay: 2.52s; }

/* Apparition : la bulle monte et grossit légèrement, comme si elle sortait de
   la route. Les retards correspondent au moment où la voiture passe au-dessus
   de chaque arrêt (1/6, 1/2 et 5/6 d'un trajet de 2,9 s). */
.js-anim .hm-steps .hm-step {
  opacity: 0;
  transform: translateY(22px) scale(.96);
}

.js-anim .hm-steps.hm-on .hm-step {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s var(--ease),
    transform .55s cubic-bezier(.22, 1.4, .36, 1);
}

.js-anim .hm-steps.hm-on .hm-step:nth-child(2) { transition-delay: .62s; }
.js-anim .hm-steps.hm-on .hm-step:nth-child(3) { transition-delay: 1.58s; }
.js-anim .hm-steps.hm-on .hm-step:nth-child(4) { transition-delay: 2.52s; }

/* ⚠️ `nth-child` et non `nth-of-type` : la route est le PREMIER enfant de la
   grille, les trois bulles sont donc les enfants 2, 3 et 4. Compter à partir
   de 1 décalerait tous les retards d'un cran. */

.hm-step__n {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  color: rgba(180, 24, 36, .55);
  pointer-events: none;
}

.hm-step__ico {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--red-bg);
  color: var(--red);
  margin-bottom: 16px;
}

.hm-step__t {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hm-step__d {
  margin-top: 10px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--muted);
}

.hm-step__meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-2);
}

/* Mouvement réduit : la route est dessinée, les bulles sont là, personne ne
   roule. C'est exactement ce que le réglage demande. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .hm-road__live {
    stroke-dashoffset: 0;
  }

  .hm-road__ship {
    display: none;
  }

  .js-anim .hm-steps .hm-step {
    opacity: 1;
    transform: none;
  }
}

/* Sous 901px la vague n'a plus la largeur qu'il lui faut : les bulles se
   rangent en colonne et la route disparaît. Une vague de 300px de large tient
   trois oscillations dans un mouchoir de poche — on ne lit plus un trajet, on
   lit un gribouillis. */
@media (max-width: 900px) {
  .hm-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hm-road {
    display: none;
  }

  .js-anim .hm-steps .hm-step {
    transform: translateY(16px) scale(.98);
  }

  /* Sans voiture à suivre, les retards se resserrent : trois bulles qui
     s'égrènent sur 2,9 s au doigt, c'est une attente, pas une animation. */
  .js-anim .hm-steps.hm-on .hm-step:nth-child(2) { transition-delay: .05s; }
  .js-anim .hm-steps.hm-on .hm-step:nth-child(3) { transition-delay: .18s; }
  .js-anim .hm-steps.hm-on .hm-step:nth-child(4) { transition-delay: .31s; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   « POURQUOI MAINTENANT » — le point d'interrogation en filigrane
   ───────────────────────────────────────────────────────────────────────────
   Le titre de la section pose une question ; le symbole la reprend, en fond, a
   droite du texte. Il est volontairement COUPE par le bord droit : un symbole
   entier, centre, se lit comme une illustration et attire l'oeil ; coupe et
   decadre, il reste ce qu'il doit etre — une texture.

   ⚠️ Le fichier source `why.jpg` portait le DAMIER de transparence cuit dans
   l'image (c'est un apercu telecharge, pas un fichier detourable). Pose tel
   quel, il aurait affiche un fond en petits carres gris. `why.webp` est la
   version detouree — remplissage depuis les bords plutot qu'un seuil de
   luminosite, sans quoi les gros reflets blancs du symbole disparaissaient
   avec le fond. Ne pas revenir au .jpg.

   ⚠️ `overflow: hidden` sur la section, sinon le symbole incline deborde a
   droite et cree un defilement horizontal sur toute la page.
   ═══════════════════════════════════════════════════════════════════════════ */
#pourquoi-2026 {
  overflow: hidden;
}

#pourquoi-2026::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 26px;
  right: -70px;
  width: 430px;
  height: 590px;
  background: url('../img/misc/why.webp') no-repeat center / contain;
  /* 7 % : a peine plus qu'un grain. Au-dela, le symbole se met a concurrencer
     le titre qu'il accompagne — et il est noir sur un fond ivoire, donc le
     moindre point d'opacite se voit. */
  opacity: .07;
  transform: rotate(9deg);
  pointer-events: none;
}

/* Le contenu repasse devant : un pseudo-element ABSOLU se peint au-dessus du
   contenu en flux normal, et le filigrane serait passe par-dessus le texte. */
#pourquoi-2026 > .hm-wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  #pourquoi-2026::before {
    top: 14px;
    right: -50px;
    width: 220px;
    height: 300px;
    opacity: .05;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA FINAL
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-cta {
  padding-block: 96px;
}

.hm-cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 74px 32px 68px;
}

.hm-cta__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 90% at 50% 0%, rgba(180, 24, 36, .40) 0%, transparent 70%),
    radial-gradient(38% 70% at 88% 100%, rgba(218, 108, 117, .18) 0%, transparent 72%);
}

.hm-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hm-cta__t {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  max-width: 18ch;
}

.hm-cta__s {
  margin-top: 18px;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .74);
}

.hm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* Bouton clair sur le panneau sombre. Il ne peut pas reutiliser `.btn--soft`,
   dont la bordure ivoire disparait sur ce fond. */
.hm-cta__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: var(--r-btn);
  border: 1.5px solid rgba(255, 255, 255, .34);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  transition: background var(--t), border-color var(--t), transform var(--t) var(--ease);
}

.hm-cta__ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .6);
  transform: translateY(-2px);
}

.hm-cta__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: .84rem;
  color: rgba(255, 255, 255, .6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .hm-steps {
    grid-template-columns: 1fr;
  }


  .hm-cmp {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 720px) {
  .hm-wrap {
    padding-inline: 20px;
  }

  .hm-hero {
    padding-block: 118px 76px;
  }

  .hm-hero__title {
    max-width: none;
  }

  .hm-hero__sub {
    font-size: .98rem;
  }

  .hm-sec,
  .hm-cta {
    padding-block: 68px;
  }

  .hm-cta__panel {
    padding: 54px 22px 50px;
  }

  /* Les deux actions passent pleine largeur : cote a cote sur 320px, elles
     tombent a une largeur ou le libelle se coupe en deux lignes. */
  .hm-hero__actions,
  .hm-cta__actions {
    width: 100%;
    flex-direction: column;
  }

  .hm-hero__actions > *,
  .hm-cta__actions > * {
    width: 100%;
  }
}

@media (max-width: 520px) {

  .hm-cmp__col,
  .hm-step {
    padding-inline: 20px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ███ COUCHE « DENSIFICATION » — septembre 2026 ███
   ───────────────────────────────────────────────────────────────────────────
   Objectif : la page disait les bonnes choses mais les disait dans du vide —
   en-tetes centrees sur 720px au milieu d'un ecran de 1400, sections separees
   par 96px d'ivoire nu, et une seule chose qui bouge (la fusee). Cette couche
   ne touche AUCUN texte : elle ne change que la forme.

   ⚠️ Elle est AJOUTEE EN FIN DE FICHIER et ne remplace rien au-dessus. A
   specificite egale, c'est elle qui gagne — donc pour annuler un effet il faut
   le neutraliser ici, pas aller editer le bloc d'origine (trois regressions de
   cascade dans ce projet viennent de remplacements « par bandeau »).

   ⚠️ `mobile.css` se charge APRES cette feuille. Tout ce qui est ajoute ici et
   qui concerne une classe deja connue de mobile.css est donc borne a
   `min-width: 769px` : sous cette largeur, c'est mobile.css qui decide, et il
   ne faut surtout pas se battre avec lui.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Jetons propres a cette couche ─────────────────────────────────────────
   Poses sur :root et prefixes `--hm-` : ils n'existent que pour l'accueil et
   ne doivent pas pouvoir etre confondus avec les jetons de style.css. */
:root {
  --hm-line: rgba(33, 34, 36, .10);
  --hm-line-2: rgba(33, 34, 36, .06);
  --hm-glow: rgba(180, 24, 36, .10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. ETAT « ON A DEFILE »
   ───────────────────────────────────────────────────────────────────────────
   La barre se detache davantage du fond des qu'on quitte le haut de page. La
   regle vit dans home.css, donc elle ne s'applique QU'A l'accueil — les autres
   pages ne chargent pas cette feuille et gardent la barre de style.css.

   ⚠️ Ce bloc portait aussi un filet de progression de lecture, accroche au bas
   de la carte de navigation. Il a ete retire : il reste sa regle de resserrement
   dans la section 2, qui elle sert toujours.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Au defilement, la barre ne gagne qu'un fond et un filet : ils sont declares
   sur `.nav` dans style.css, il n'y a plus rien a renforcer ici. */

/* ═══════════════════════════════════════════════════════════════════════════
   2. HERO — trois couches de plus, aucune ligne de texte de plus
   ═══════════════════════════════════════════════════════════════════════════ */

/* Deux halos qui respirent. Ils remplacent un fond fixe par quelque chose de
   VIVANT sans rien faire bouger de lisible : ce sont des taches floues, elles
   n ont pas de bord net dont l oeil pourrait suivre le deplacement. */
.hm-hero__orb {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
}

.hm-hero__orb--a {
  top: -90px;
  left: -60px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(180, 24, 36, .16) 0%, transparent 70%);
}

.hm-hero__orb--b {
  right: -110px;
  top: 120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(218, 108, 117, .14) 0%, transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .hm-hero__orb--a { animation: hm-float 15s ease-in-out infinite; }
  .hm-hero__orb--b { animation: hm-float 19s ease-in-out infinite reverse; }
}

@keyframes hm-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(26px, -22px, 0) scale(1.08); }
}

/* ── Revelation du titre, ligne par ligne ──────────────────────────────────
   Chaque ligne est un masque (`overflow: hidden`) dans lequel le texte remonte.
   C est le geste typographique qui distingue un titre d agence d un titre qui
   apparait en fondu comme le reste de la page.

   ⚠️ L etat CACHE n existe QUE sous `prefers-reduced-motion: no-preference`.
   Feuille chargee sans animation autorisee, ou navigateur qui ignore les
   keyframes : les lignes restent simplement visibles. Une animation d entree
   ne doit jamais pouvoir effacer definitivement le H1 de la page. */
.hm-line {
  display: block;
  overflow: hidden;
  /* `.display` tourne a `line-height: .94` EN CAPITALES : l accent de E et de A
     depasse la boite de ligne, et `overflow: hidden` le rognait net — « CREATION »
     perdait son accent. On ouvre la boite de .16em en haut et on la reprend en
     marge negative : la geometrie du titre est inchangee, l accent respire.
     Rien en bas : les capitales n ont pas de jambage, et une boite ouverte vers
     le bas laisserait voir la ligne suivante avant son entree. */
  padding-top: .16em;
  margin-top: -.16em;
}

.hm-line > span {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .hm-line > span {
    animation: hm-line-up .95s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--hm-ld, 0s);
  }
}

@keyframes hm-line-up {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. EN-TETES DE SECTION — la composition qui change tout
   ───────────────────────────────────────────────────────────────────────────
   Avant : bloc centre de 720px de large, au milieu de 1220. Deux colonnes de
   vide a gauche et a droite de CHAQUE en-tete, quatre fois dans la page.
   Maintenant : le titre tient la colonne gauche, le sous-titre la droite, et un
   filet ferme l ensemble sur toute la largeur.

   Borne a 981px et au-dessus : en dessous, la disposition centree d origine
   reste la bonne, et c est celle que mobile.css connait.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
  .hm-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: 60px;
    align-items: end;
    max-width: none;
    text-align: left;
    margin-bottom: 58px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--hm-line);
  }

  .hm-head__t {
    grid-column: 1;
    grid-row: 2;
    margin-top: 18px;
    max-width: 17ch;
  }

  /* ⚠️ Sans pastille, la rangee 1 de la grille est vide. Elle ne prend aucune
     hauteur, mais la marge haute du titre, elle, reste : d'ou ce zero. Le titre
     remonte aussi en rangee 1, sinon `align-items: end` cale le sous-titre sur
     une rangee 2 qui commence plus bas que lui. */
  .hm-head__t:first-child {
    grid-row: 1;
    margin-top: 0;
  }

  /* Le sous-titre occupe la colonne droite sur toute la hauteur et se cale en
     bas : sa derniere ligne s aligne alors sur la derniere ligne du titre,
     ce qui est ce qui fait tenir une composition asymetrique. */
  .hm-head__s {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
    padding-left: 26px;
    border-left: 2px solid rgba(180, 24, 36, .22);
    font-size: 1.02rem;
  }
}

/* ── Matiere de fond des sections claires ──────────────────────────────────
   Un point tous les 30px, a 6% d opacite. Invisible si on le cherche, mais
   l ivoire n est plus une page blanche. */
.hm-sec {
  background-image: radial-gradient(var(--hm-line-2) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Filet de separation sur les sections teintees : la transition entre deux
   fonds tres proches (#faf8f5 et #f0ede7) ne se voyait pas. */
.hm-sec--tint {
  background-image: radial-gradient(rgba(33, 34, 36, .05) 1px, transparent 1px);
  background-size: 28px 28px;
  border-top: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. COMPARAISON — les deux colonnes cessent d etre jumelles
   ───────────────────────────────────────────────────────────────────────────
   Elles portaient le meme fond clair et ne se distinguaient que par la couleur
   d une pastille. Le propos de la section est une OPPOSITION : elle doit se
   lire avant le texte. La colonne « avec site » passe donc sur l anthracite de
   la marque, la colonne « sans site » reste claire et se desature.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-cmp__col {
  position: relative;
  overflow: hidden;
}

/* ── Colonne « sans site web » : ternie, et rayee d une trame diagonale ── */
.hm-cmp__col--no {
  background: linear-gradient(180deg, #f4f1ec 0%, #efece6 100%);
}

.hm-cmp__col--no::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(33, 34, 36, .028) 0 6px,
    transparent 6px 14px
  );
}

/* ⚠️ Les deux colonnes recoivent un calque de fond en `::before` ABSOLU, qui se
   peint au-dessus du contenu en flux normal. Sans ce `position: relative` sur
   les enfants, la trame passerait par-dessus le texte. */
.hm-cmp__col--no > *,
.hm-cmp__col--yes > * {
  position: relative;
}

/* ── Colonne « avec votre site » : le seul bloc sombre de cette moitie de page.
   Tout ce qui y vit doit repasser en clair, ligne par ligne : un `color: #fff`
   sur le conteneur ne descend pas dans les regles qui fixent deja une couleur
   plus bas (`.hm-cmp__row b`, `.hm-cmp__t`, etc.). ── */
.hm-cmp__col--yes {
  background: linear-gradient(165deg, #2b2d30 0%, var(--ink) 55%, #17181a 100%);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 20px 50px rgba(34, 30, 26, .18);
}

.hm-cmp__col--yes::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 100% 0%, rgba(180, 24, 36, .26) 0%, transparent 70%);
}

.hm-cmp__col--yes .hm-cmp__t { color: #fff; }
.hm-cmp__col--yes .hm-cmp__s { color: rgba(255, 255, 255, .62); }
.hm-cmp__col--yes .hm-cmp__row b { color: #fff; }
.hm-cmp__col--yes .hm-cmp__row > span:not(.hm-cmp__ico) > span { color: rgba(255, 255, 255, .66); }
.hm-cmp__col--yes .hm-cmp__row + .hm-cmp__row { border-top-color: rgba(255, 255, 255, .10); }
.hm-cmp__col--yes .hm-cmp__head { border-bottom-color: rgba(255, 255, 255, .12); }

.hm-cmp__col--yes .hm-cmp__ico {
  background: rgba(180, 24, 36, .22);
  color: #ff9aa2;
}

.hm-cmp__col--yes .hm-cmp__badge {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 16px rgba(180, 24, 36, .45);
}

/* Les rangees s eclairent au passage : c est la seule section ou l on demande
   au visiteur de LIRE huit lignes d affilee. */
@media (min-width: 769px) {
  .hm-cmp__row {
    padding-inline: 12px;
    margin-inline: -12px;
    border-radius: var(--r-md);
    transition: background var(--t);
  }

  .hm-cmp__col--no .hm-cmp__row:hover  { background: rgba(33, 34, 36, .04); }
  .hm-cmp__col--yes .hm-cmp__row:hover { background: rgba(255, 255, 255, .05); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. LES TROIS ETAPES
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-step {
  position: relative;
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}

/* Un halo de marque monte du bas de la carte au survol, au lieu du simple
   deplacement qui existait. */
.hm-step::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, var(--hm-glow) 0%, transparent 62%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.hm-step:hover::after {
  opacity: 1;
}

.hm-step:hover {
  box-shadow: 0 18px 44px rgba(34, 30, 26, .10);
}

/* ⚠️ Le halo est ABSOLU : il se peint au-dessus du contenu en flux. Les enfants
   de la carte repassent donc devant — SAUF `.hm-step__n`, qui est deja
   `position: absolute` (c est un filigrane cale en haut a droite). Lui poser un
   `position: relative` le renverrait dans le flux, en tete de carte. Il lui
   suffit du `z-index`. */
.hm-step > :not(.hm-step__n) {
  position: relative;
  z-index: 1;
}

.hm-step__n {
  z-index: 1;
}

/* Le numero en filigrane grossit et se teinte : il etait fixe, il devient le
   marqueur de la carte visee. */
.hm-step__n {
  transition: color var(--t), transform var(--t) var(--ease);
}

.hm-step:hover .hm-step__n {
  color: rgba(180, 24, 36, .16);
  transform: scale(1.06);
}

/* La mention de duree devient un jeton pose sur un fond, plutot qu une ligne
   de texte gris de plus en bas de carte. */
.hm-step__meta {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--red-bg);
  color: var(--red-dk);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. CTA FINAL — le panneau devient un objet
   ═══════════════════════════════════════════════════════════════════════════ */

/* La trame qui vivait ici est partie avec les trois autres : les halos du
   panneau lui donnent deja sa matiere. */
.hm-cta__panel {
  box-shadow: 0 30px 70px rgba(34, 30, 26, .22);
}

/* Filet lumineux sur l arete haute, comme sur le bandeau de chiffres : les deux
   aplats sombres de la page partagent ainsi une signature. */
.hm-cta__panel::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--red) 22%, #f06b76 50%, var(--red) 70%, transparent 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hm-cta__panel::after {
    background-size: 220% 100%;
    animation: hm-sweep 7s linear infinite;
  }
}

/* ⚠️ `hm-sweep` etait defini dans le bloc du bandeau de chiffres, dont il
   animait aussi le filet rouge. Ce bandeau a ete supprime, et sa definition
   avec : le filet du panneau final appelait alors une animation inexistante —
   pas d'erreur, pas de plantage, simplement plus rien qui bouge, et rien pour
   le signaler. La definition vit desormais a cote de son seul usage restant. */
@keyframes hm-sweep {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. BOUTONS — le reflet de survol
   ───────────────────────────────────────────────────────────────────────────
   `.btn` vit dans style.css et sert a tout le site. On ne le modifie pas : le
   reflet est ajoute UNIQUEMENT sous les trois conteneurs de l accueil, et
   uniquement sur les boutons rouges.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-hero__actions .btn--red,
.hm-cta__actions .btn--red {
  position: relative;
  overflow: hidden;
}

.hm-hero__actions .btn--red::after,
.hm-cta__actions .btn--red::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .30) 50%, transparent 100%);
  transform: skewX(-16deg);
  transition: left .6s var(--ease);
}

.hm-hero__actions .btn--red:hover::after,
.hm-cta__actions .btn--red:hover::after {
  left: 140%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. DENSITE VERTICALE
   ───────────────────────────────────────────────────────────────────────────
   96px de respiration entre deux sections etait juste quand chaque section
   etait maigre. Elles sont maintenant pleines : on resserre, ce qui met deux
   blocs a l ecran au lieu d un et demi. Borne au-dessus de 768px — mobile.css
   descend deja a 52px et c est lui qui a le dernier mot.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .hm-sec,
  .hm-cta {
    padding-block: 84px;
  }

  .hm-hero {
    padding-block: 146px 96px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ████ DIRECTION « SOMBRE » — septembre 2026 ████
   ───────────────────────────────────────────────────────────────────────────
   TROISIEME et derniere couche du fichier. Elle change la DOMINANTE de la page :
   l accueil etait ivoire avec un seul bandeau sombre ; il devient une
   alternance, ouverte et fermee par du sombre.

       1. HERO ................ SOMBRE
       2. bande defilante ..... SOMBRE (fine, elle prolonge le hero)
       3. chiffres ............ CLAIR   ← inverse de l ancienne version
       4. trois offres ........ CLAIR
       5. reservation ......... SOMBRE
       6. pourquoi ............ CLAIR
       7. trois etapes ........ CLAIR teinte
       8. CTA final ........... SOMBRE

   Reference assumee : wedezign.fr. Ce qui est repris est la GRAMMAIRE — fond
   sombre dominant, accent en degrade, grands rayons sur les panneaux, bande de
   texte defilante, chiffres surdimensionnes en contour. Ce qui n est PAS repris
   est leur identite : ni leur navy #15172b, ni leur bleu #1a27c9→#2d8fff, ni
   leur Outfit. L anthracite #17181a et le rouge #b41824 de Clairtis tiennent
   exactement les memes roles, et Bricolage Grotesque reste la police de titre.

   ⚠️ Le marqueur d une section sombre est la classe `.hm-dark`, posee dans le
   HTML. Tout ce qui doit repasser en clair est ecrit UNE fois, descendant de
   cette classe. Ne pas ecrire de regle sombre attachee a une section precise
   (`#faq .hm-head__t` etc.) : c est ce qui rend une feuille impossible a relire
   quand une section de plus passe au noir.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Les deux fonds sombres de la page. `--hm-nuit` est le fond plein,
     `--hm-nuit-2` la nuance haute des degrades : un aplat parfaitement uni sur
     900px de haut se lit comme une panne d affichage. */
  --hm-nuit: #141517;
  --hm-nuit-2: #1e2023;

  /* L accent en degrade, l equivalent Clairtis du bleu electrique de la
     reference. Il ne remplace pas `--red` : il s y ajoute, et UNIQUEMENT sur
     les surfaces sombres, ou le rouge plein manque de luminosite.

     ⚠️ DEUX degrades, et c est une contrainte de contraste, pas un gout.
     · `--hm-accent` est un FOND, sous du texte blanc : chacune de ses etapes
       doit tenir 4,5:1 avec le blanc. #b41824 donne 5,9:1, #d43a46 4,7:1 —
       la version claire de ce degrade (#ff8a72) tombait a 2,3:1, le libelle
       du bouton y devenait illisible.
     · `--hm-accent-texte` est du TEXTE, sur l anthracite : c est l inverse,
       il lui faut de la luminosite. #ff6b78 donne 6,6:1 sur #141517 ; partir
       du #b41824 de marque, comme le faisait la premiere version, donnait
       1,8:1 — les premieres lettres du titre etaient a peine visibles. */
  --hm-accent: linear-gradient(100deg, #8d111a 0%, #b41824 50%, #d43a46 100%);
  --hm-accent-texte: linear-gradient(100deg, #ff6b78 0%, #ff9aa2 52%, #ffcbb4 100%);

  /* Trois valeurs de texte sur fond sombre. Elles remplacent les rgba() ecrits
     a la main un peu partout dans les couches precedentes : au bout de trois
     sections, six opacites differentes coexistaient. */
  --hm-sur-nuit: rgba(255, 255, 255, .96);
  --hm-sur-nuit-2: rgba(255, 255, 255, .70);
  --hm-sur-nuit-3: rgba(255, 255, 255, .48);
  --hm-trait-nuit: rgba(255, 255, 255, .12);

  /* Rayons des grands panneaux. La reference tourne a 20/32/50px. On monte de
     24 a 30 sur les panneaux SEULEMENT : la regle de l echelle contrastee tient
     toujours — une pastille garde ses 6px, un panneau prend 30px, et la pilule
     pleine reste reservee aux boutons. */
  --hm-r-panneau: 30px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A. LE SOCLE SOMBRE — ecrit une fois, valable pour les trois sections
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-dark {
  position: relative;
  isolation: isolate;
  background: var(--hm-nuit);
  color: var(--hm-sur-nuit);
}

/* Un filet clair sur l arete haute : c est le detail qui fait qu une bande
   sombre parait POSEE sur la page au lieu d y etre decoupee. */
.hm-dark::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--hm-trait-nuit) 25%, var(--hm-trait-nuit) 75%, transparent);
}

/* Le contenu repasse devant les deux calques. */
.hm-dark > .hm-wrap {
  position: relative;
  z-index: 1;
}

/* ── Le texte, sur fond sombre ─────────────────────────────────────────────
   Ecrit element par element : les couleurs vivent dans des regles plus
   specifiques plus haut dans le fichier, et un `color` pose sur le conteneur
   ne les atteint pas. */
.hm-dark .hm-head__t,
.hm-dark .hm-hero__title { color: var(--hm-sur-nuit); }
.hm-dark .hm-head__s     { color: var(--hm-sur-nuit-2); }

.hm-dark .hm-head {
  border-bottom-color: var(--hm-trait-nuit);
}

.hm-dark .hm-head__s {
  border-left-color: rgba(224, 80, 92, .55);
}

/* ═══════════════════════════════════════════════════════════════════════════
   B. HERO — de l ivoire a la nuit
   ───────────────────────────────────────────────────────────────────────────
   Les quatre calques du hero d origine (wash, photo, veil, grain) etaient tous
   regles pour un fond ivoire. Ils sont repris un par un ici plutot que
   supprimes : la carte d Orleans en fond reste un bon parti pris, elle change
   seulement de regime — carte de jour imprimee, carte de nuit retro-eclairee.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-hero {
  background: var(--hm-nuit);
}

.hm-hero__wash {
  background:
    radial-gradient(62% 50% at 50% -6%, rgba(180, 24, 36, .38) 0%, transparent 70%),
    radial-gradient(42% 40% at 88% 18%, rgba(224, 80, 92, .18) 0%, transparent 72%),
    linear-gradient(180deg, var(--hm-nuit-2) 0%, var(--hm-nuit) 58%, var(--hm-nuit) 100%);
}

/* La clairiere passe a l anthracite : c est le meme procede qu avant (creuser
   un fond uni sous le titre), dans l autre sens. */
.hm-hero__veil {
  background: radial-gradient(
    66% 48% at 50% 44%,
    rgba(20, 21, 23, .90) 0%,
    rgba(20, 21, 23, .66) 50%,
    rgba(20, 21, 23, 0) 82%
  );
}

/* Le grain se voit BEAUCOUP plus sur du sombre que sur de l ivoire : a .38 il
   devenait une neige. */
.hm-hero__grain {
  opacity: .16;
}


.hm-hero__orb--a {
  background: radial-gradient(circle, rgba(180, 24, 36, .34) 0%, transparent 70%);
}

.hm-hero__orb--b {
  background: radial-gradient(circle, rgba(224, 80, 92, .22) 0%, transparent 70%);
}

/* ── Le titre ──────────────────────────────────────────────────────────────
   Premiere ligne en blanc, seconde en DEGRADE. C est le geste central de la
   reference (leur bleu electrique) transpose au rouge de marque : sur fond
   sombre, un aplat rouge plein manque de lumiere, un degrade en a.

   ⚠️ `background-clip: text` supprime toute couleur de repli : si la propriete
   n est pas supportee, le texte est transparent — donc invisible. D ou
   `color` pose AVANT, en rose clair lisible : les navigateurs qui comprennent
   `background-clip` le remplacent, les autres gardent une vraie couleur. */
.hm-hero__title { color: var(--hm-sur-nuit); }

.display b {
  color: #ff9aa2;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hm-dark .display b {
    background: var(--hm-accent-texte);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hm-hero__sub {
  color: var(--hm-sur-nuit-2);
}

.hm-hero__sub strong {
  color: var(--hm-sur-nuit);
}

/* Les jetons de confiance : verre depoli sur la nuit. */

/* Le second bouton du hero etait `.btn--soft` : bordure ivoire sur fond ivoire.
   Sur la nuit, il disparaissait. Meme traitement que `.hm-cta__ghost`, qui
   resolvait deja ce probleme sur le panneau final. */
.hm-dark .btn--soft {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: var(--hm-sur-nuit);
}

.hm-dark .btn--soft:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   C. LA BANDE DEFILANTE — deux lignes geantes, en sens opposes
   ───────────────────────────────────────────────────────────────────────────
   Composition demandee, calquee sur celle de wedezign.fr : deux lignes de texte
   tres grand qui traversent l ecran, coupees net aux deux bords.

   ⚠️ Elle est CLAIRE alors que le hero juste au-dessus est sombre, et c est le
   but : une bande blanche a caracteres geants apres un premier ecran anthracite
   est une coupure franche, pas une transition. C est ce que fait la reference,
   et c est ce qui empeche la page de ressembler a un long tunnel sombre.

   ⚠️ Les deux lignes defilent en SENS OPPOSES. Dans le meme sens, elles se
   lisent comme une seule image qui derive ; en sens contraires, c est le
   croisement qu on voit, et le mouvement devient lisible.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-ticker {
  position: relative;
  overflow: hidden;
  padding-block: 40px;
  background: linear-gradient(155deg, #ffffff 0%, #fffdfc 55%, #fdf3f4 100%);
  border-bottom: 1px solid var(--hm-line);
  /* Les deux bouts s effacent : une ligne qui se coupe net sur le bord de
     l ecran se lit comme un debordement, pas comme un mouvement. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.hm-ticker__line {
  overflow: hidden;
}

.hm-ticker__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  /* ⚠️ `--ready` est pose par le script APRES qu il a rempli puis duplique la
     piste. Sans cette condition, une piste plus etroite que l ecran glisserait
     de -50% et laisserait un trou a chaque tour. */
  .hm-ticker--ready .hm-ticker__track {
    animation: hm-defile 38s linear infinite;
  }

  /* La seconde ligne remonte le meme chemin a l envers. `animation-direction`
     plutot qu une seconde serie de keyframes : une seule trajectoire a tenir,
     donc aucun risque que les deux divergent au prochain reglage. */
  .hm-ticker--ready .hm-ticker__line--rev .hm-ticker__track {
    animation-direction: reverse;
    animation-duration: 46s;
  }

  /* Le defilement s arrete au survol : on peut vouloir lire ce qui passe. */
  .hm-ticker--ready:hover .hm-ticker__track {
    animation-play-state: paused;
  }
}

@keyframes hm-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.hm-ticker__track > span {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 5rem);
  /* Graisse 500 et non 700 : a ce corps, une graisse forte remplit la bande de
     noir et ecrase le titre du hero juste au-dessus, qui est lui en 800. La
     bande doit etre grande, pas lourde. */
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: var(--ink);
}

/* La seconde ligne en CONTOUR : les deux lignes pleines faisaient un bloc noir
   de 200px de haut au sortir du hero. Evidee, la seconde donne la profondeur et
   laisse la premiere porter le propos.
   ⚠️ `-webkit-text-stroke` n existe pas partout. `color` est donc pose AVANT,
   en gris clair lisible : la ou le contour n est pas supporte, il reste du
   texte gris, pas un trou. */
.hm-ticker__line--rev .hm-ticker__track > span {
  color: #cfc9c2;
}

@supports (-webkit-text-stroke: 1px red) {
  .hm-ticker__line--rev .hm-ticker__track > span {
    color: transparent;
    -webkit-text-stroke: 1.3px rgba(33, 34, 36, .30);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   F. TROIS ETAPES — les chiffres surdimensionnes en contour
   ───────────────────────────────────────────────────────────────────────────
   La reference empile deux fois le meme numeral, un plein et un evide. Ici un
   seul element suffit : `-webkit-text-stroke` donne le contour, et le numeral
   d origine (0,74rem, en haut a droite) devient un grand chiffre fantome en
   bas de carte. Aucun changement de markup.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-step {
  border-radius: var(--hm-r-panneau);
  padding: 30px 28px 28px;
}

.hm-step__n {
  top: auto;
  right: 18px;
  bottom: -14px;
  font-size: 5.6rem;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(180, 24, 36, .22);
  transition: -webkit-text-stroke-color var(--t), transform var(--t) var(--ease);
}

.hm-step:hover .hm-step__n {
  color: transparent;
  -webkit-text-stroke-color: rgba(180, 24, 36, .42);
  transform: translateY(-4px);
}

/* ⚠️ `-webkit-text-stroke` n existe pas partout. Sans lui, `color: transparent`
   laisse un chiffre INVISIBLE — pas grave ici (c est un filigrane decoratif),
   mais autant lui rendre une teinte plutot qu un trou. */
@supports not (-webkit-text-stroke: 1px red) {
  .hm-step__n {
    color: rgba(180, 24, 36, .14);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   G. GRANDS PANNEAUX — le rayon de la reference
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-cmp__col,
.hm-cta__panel {
  border-radius: var(--hm-r-panneau);
}

/* ⚠️ La section `.hm-cta` est passee sombre elle aussi. Un panneau du meme noir
   sur ce fond ne serait plus un panneau, juste une zone. Il prend donc la
   nuance HAUTE (`--hm-nuit-2`) et un contour : c est ce qui le fait tenir
   comme un objet pose sur la page. */
.hm-cta__panel {
  background-color: var(--hm-nuit-2);
  border: 1px solid var(--hm-trait-nuit);
  padding: 86px 32px 78px;
}

/* Le titre du panneau final passe en degrade lui aussi : c est le dernier mot
   de la page, il porte la meme signature que le premier. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hm-cta__t {
    background: linear-gradient(100deg, #ffffff 0%, #ffd5d8 60%, #ff9aa2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   H. BOUTONS ROUGES — le degrade d accent
   ───────────────────────────────────────────────────────────────────────────
   Toujours scope a l accueil (`.hm-*`), jamais sur `.btn--red` nu : ce bouton
   sert a tout le site, et style.css reste la seule source de sa forme.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-hero__actions .btn--red,
.hm-cta__actions .btn--red {
  background: var(--hm-accent);
  background-size: 160% 100%;
  background-position: 0 0;
  border: none;
  box-shadow: 0 8px 26px rgba(180, 24, 36, .40);
  transition: background-position .5s var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.hm-hero__actions .btn--red:hover,
.hm-cta__actions .btn--red:hover {
  background-position: 100% 0;
  box-shadow: 0 12px 34px rgba(180, 24, 36, .52);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   J. REPRISES MOBILE
   ───────────────────────────────────────────────────────────────────────────
   mobile.css se charge apres et garde le dernier mot sur tout ce qu il connait.
   Ne sont repris ici que les elements qu il ignore, parce qu ils n existaient
   pas quand il a ete ecrit.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hm-ticker {
    padding-block: 22px;
  }

  .hm-ticker__track {
    gap: 16px;
  }

  .hm-ticker__line--rev .hm-ticker__track > span {
    -webkit-text-stroke-width: .9px;
  }

  .hm-step__n {
    font-size: 4.2rem;
    bottom: -10px;
  }

  .hm-cta__panel {
    padding: 58px 22px 52px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   █████ DEUX SECTIONS AJOUTEES — septembre 2026 █████
   ───────────────────────────────────────────────────────────────────────────
   L accueil annonçait « tout compris » sans dire ce que « tout » recouvre, et
   ne repondait a aucune des objections qu il soulevait lui-meme. Deux blocs
   comblent ca, et leur contenu ne vient pas de nulle part :

     · INCLUS ............ les 6 prestations de « Inclus dans toutes nos offres »
                           de services.html
     · FAQ ............... les 5 questions/reponses de faq.html

   ⚠️ Aucun de ces textes n a ete reecrit. Si l un d eux change a sa source, il
   faut le changer ICI AUSSI — c est le prix d avoir deux endroits qui disent la
   meme chose, et c est assume : l accueil doit pouvoir convaincre sans envoyer
   le visiteur sur trois autres pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   2. INCLUS DANS TOUTES LES OFFRES — sur fond clair
   ═══════════════════════════════════════════════════════════════════════════ */

/* Un filet rouge se tire sur l arete haute au survol. Il part du centre : sur
   une grille de six, six traits qui partent tous de la gauche donnent une
   lecture en escalier, pas une reaction a ce qu on vise. */

/* ── Les accordeons de questions ont ete retires ──────────────────────────
   Les deux pages qui en portaient un (l'accueil et /faq) affichent desormais
   les rangees defilantes de `tools/partials/faq.html`. Le CSS qui vivait ici
   n'avait plus une seule balise a habiller ; il est retire plutot que laisse
   en place, ou il aurait fini par etre recopie par mimetisme.
   Le nouveau bloc est en fin de style.css, sous « FAQ — DEUX RANGEES ». */

/* ═══════════════════════════════════════════════════════════════════════════
   4. ADAPTATIONS DES TROIS NOUVELLES SECTIONS
   ───────────────────────────────────────────────────────────────────────────
   Ces classes n existaient pas quand mobile.css a ete ecrit : il ne les connait
   pas, donc c est ici et nulle part ailleurs qu elles sont adaptees.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
}

@media (max-width: 700px) {

  .hm-faq__q {
    padding: 18px 18px;
    font-size: .96rem;
    gap: 14px;
  }

  .hm-faq__a {
    padding: 0 18px 20px;
  }

  .hm-faq__a p {
    font-size: .91rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████ PICTOGRAMMES MAISON ET FILIGRANES — septembre 2026 ██████
   ───────────────────────────────────────────────────────────────────────────
   Le jeu de dix signes defini en tete de index.html sert a deux echelles :

     · 22-26px ... l icone d une carte ou d un chiffre
     · 300-460px . le filigrane de fond d une section, coupe par le bord

   C est le second usage qui compte ici : une section a trois cartes laisse
   toujours une moitie d ecran vide sur les cotes, et jusqu a present cette
   moitie ne portait rien. Elle porte maintenant le signe de la section, assez
   grand pour occuper la place et assez pale pour ne jamais concurrencer le
   texte.

   ⚠️ Un filigrane est DECORATIF. Il est `aria-hidden` dans le HTML, il ne
   contient aucune information qui ne soit pas deja ecrite a cote, et il ne doit
   jamais monter en opacite au point de se lire comme une illustration : au-dela
   de ~8 % sur clair et ~6 % sur sombre, il cesse d etre une texture et devient
   un objet qui attire l oeil hors du titre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La reserve de formes : presente dans le document, jamais affichee. */
.hm-sprite {
  display: none;
}

/* ⚠️ `--g-accent` est une VARIABLE et non une regle ciblant l interieur du
   pictogramme : les selecteurs du document ne traversent pas l arbre fantome
   de <use>, les variables CSS si. C est le seul levier de couleur disponible
   ici, avec `color` pour le trait. */
.hm-glyph {
  display: block;
  width: 100%;
  height: 100%;
  --g-accent: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. LES SIX PICTOGRAMMES DE « INCLUS »
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   2. « INCLUS » PASSE SUR FOND SOMBRE
   ───────────────────────────────────────────────────────────────────────────
   La section a repris le creneau sombre laisse libre par les realisations, pour
   que l alternance clair/sombre de la page tienne toujours. Les six cartes
   etaient blanches : sur l anthracite, six aplats blancs auraient fait un mur.
   Elles passent donc sur la nuance haute, comme les panneaux des autres
   sections sombres.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   4. FILIGRANE DE SECTION
   ───────────────────────────────────────────────────────────────────────────
   Volontairement COUPE par le bord droit, et jamais centre : un signe entier
   au milieu se lit comme une illustration et capte l oeil ; decadre et tronque,
   il reste ce qu il doit etre — une texture qui occupe la marge.
   C est le procede deja employe par le point d interrogation de la section
   « Pourquoi maintenant » ; on ne fait que le generaliser.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ Le rognage est pose sur `--marked` et PAS sur `.hm-sec`. Le filigrane
   deborde de 110px a droite : sans rognage il cree un defilement horizontal sur
   toute la page. Mais `overflow: hidden` sur TOUTES les sections rognerait au
   passage les ombres des trois telephones, qui portent 78px de flou lateral —
   sur une fenetre de 1240px, ou il ne reste que 10px de marge de chaque cote du
   conteneur, la moitie de l ombre disparaissait. Seules les quatre sections qui
   portent reellement un filigrane sont donc rognees. */

/* Le contenu repasse devant le filigrane. `.hm-dark > .hm-wrap` le faisait deja
   pour les sections sombres ; les sections claires en ont besoin aussi. */
.hm-sec > .hm-wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 1200px) {
}

/* ⚠️ Sous 768px, le filigrane occuperait un tiers de la largeur de l ecran
   DERRIERE le texte, sur une colonne unique : il n y a plus de marge vide a
   remplir, il ne resterait que la gene. */
@media (max-width: 768px) {

}


/* ═══════════════════════════════════════════════════════════════════════════
   ███████ « POURQUOI CHOISIR CLAIRTIS » — septembre 2026 ███████
   ───────────────────────────────────────────────────────────────────────────
   Composition demandee, calquee sur celle de wedezign.fr : grand titre en deux
   lignes cale a gauche, un manifeste en lignes courtes, puis quatre arguments
   en rangee. Leur fond va du blanc au bleu pale en diagonale ; ici il va du
   blanc a l ivoire puis au rose de marque — meme geste, autre couleur.

   ⚠️ Cette section ne porte PAS `.hm-sec`. C est delibere : `.hm-sec` impose
   un fond pointille et un en-tete `.hm-head` centre-puis-asymetrique, alors que
   la composition d ici est cale a gauche d un bout a l autre et que son fond
   est un degrade. Elle gere donc ses propres marges verticales, alignees sur
   celles de `.hm-sec` pour que le rythme de la page ne se casse pas.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-why {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 96px;

  /* ⚠️ Un gris secondaire PROPRE a cette section, et ce n est pas un caprice.
     `--muted` (#6e6b66) est calibre — style.css le dit en commentaire — pour le
     papier ivoire #faf8f5. Le coin bas droit de ce degrade descend a #f8e6e8,
     nettement plus sombre : `--muted` y tombe a 4,42:1, sous le seuil AA de
     4,5. C est exactement la ou vivent les quatre descriptions de cartes. Deux
     crans plus fonce, on repasse a 4,98:1 sur ce meme coin, et la nuance reste
     un gris secondaire — le titre, lui, est a 13:1. */
  --hm-why-texte: #66635e;
  /* Blanc en haut a gauche, rose de marque en bas a droite. La diagonale est
     ce qui fait lire le fond comme une lumiere plutot que comme un aplat. */
  background: linear-gradient(140deg, #ffffff 0%, #fdfbf9 38%, #fbf0f1 78%, #f8e6e8 100%);
  border-block: 1px solid var(--hm-line);
}

/* Un halo rouge diffus dans le coin bas droit, par-dessus le degrade : c est
   lui qui donne la profondeur, un degre lineaire seul restant plat. */
.hm-why::before {
  content: '';
  position: absolute;
  right: -140px;
  bottom: -180px;
  width: 620px;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 24, 36, .13) 0%, transparent 68%);
  filter: blur(40px);
}

/* ── Le titre ──────────────────────────────────────────────────────────────
   ⚠️ Pas de `.display` : cette classe force les capitales, et la phrase fait
   sept mots. En capitales elle prend trois lignes pleines et cesse de se lire
   comme une question. Bricolage Grotesque en bas de casse, graisse 800. */
.hm-why__t {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.7vw, 3.05rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--ink);
  max-width: 20ch;
}

/* ── Le manifeste ──────────────────────────────────────────────────────────
   Trois groupes de deux lignes courtes, separes par du blanc. Les retours a la
   ligne sont poses A LA MAIN dans le HTML, comme dans la reference : c est la
   coupure qui donne le rythme de lecture, et une coupure automatique la
   placerait n importe ou.

   ⚠️ D ou `text-wrap: pretty` plutot que `balance` : `balance` REDISTRIBUE les
   lignes pour les egaliser, ce qui defait exactement les coupures voulues. */
.hm-why__lede {
  margin-top: 34px;
  max-width: 66ch;
  text-wrap: pretty;
}

.hm-why__lede p {
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--ink-2);
}

.hm-why__lede p + p {
  margin-top: 22px;
}

/* ── Les quatre arguments ──────────────────────────────────────────────────
   `align-items: start` : les quatre textes n ont pas la meme longueur, et un
   etirement les centrerait verticalement — les quatre titres ne seraient plus
   sur la meme ligne, ce qui est la seule chose qui tient cette rangee. */
.hm-why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
  margin-top: 68px;
}

/* ── Le pictogramme, en deux calques ───────────────────────────────────────
   Une tuile en degradé, et le signe POSE PAR-DESSUS, decale vers le bas-droite.
   Le chevauchement est tout l effet : deux formes qui se recouvrent donnent du
   relief la ou un signe centre dans un carre ne donne qu une icone de plus.

   ⚠️ Le signe doit rester AUX TROIS QUARTS sur la tuile. Ici : tuile de 44,
   signe de 36 cale a 15/14, donc 29px des 36 sur la tuile, et un debord de 7px
   en bas a droite qui suffit a creer le relief.

   ⚠️ Les signes de cette section sont PLEINS (prefixe `gs-`). Un contour de 2px
   rendu a 36px disparaissait sur le rose de la tuile et flottait sur le fond
   clair : a cheval sur deux fonds, il faut une masse. */
.hm-why__ico {
  position: relative;
  display: block;
  width: 58px;
  height: 56px;
  margin-bottom: 20px;
}

.hm-why__tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(150deg, #fbdfe2 0%, #f6c3c8 58%, #eea3ab 100%);
  transition: transform var(--t) var(--ease);
}

.hm-why__ico .hm-glyph {
  position: absolute;
  top: 14px;
  left: 15px;
  width: 36px;
  height: 36px;
  color: var(--red);
  --g-accent: var(--red-dk);
  /* Une ombre portee tres courte : c est elle qui pose le signe SUR la tuile au
     lieu de le laisser flotter contre. Sans elle, les deux calques sont a plat
     et le decalage se lit comme un defaut de calage. */
  filter: drop-shadow(0 2px 3px rgba(141, 17, 26, .28));
}

/* La tuile glisse legerement au survol, le signe reste en place : le
   chevauchement s'accentue, ce qui accuse le relief. */
.hm-why__c:hover .hm-why__tile {
  transform: translate(-2px, -2px);
}

.hm-why__ct {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hm-why__cd {
  margin-top: 12px;
  font-size: .92rem;
  line-height: 1.62;
  color: var(--hm-why-texte);
}

/* La troisieme carte porte une liste et non un paragraphe — comme dans la
   reference, ou c est la carte des resultats. Ici ce sont les cinq elements de
   l abonnement : la liste rend leur denombrement immediat, ce qu un paragraphe
   ne fait pas. */
.hm-why__list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hm-why__list li {
  position: relative;
  padding-left: 17px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--hm-why-texte);
}

.hm-why__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTATIONS DE « POURQUOI CHOISIR CLAIRTIS »
   ⚠️ Classes inconnues de mobile.css : c est ici, et nulle part ailleurs,
   qu elles sont adaptees.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hm-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 30px;
  }
}

@media (max-width: 768px) {
  .hm-why {
    padding-block: 56px;
  }

  .hm-why__t {
    font-size: clamp(1.55rem, 6.6vw, 2rem);
    max-width: none;
  }

  /* ⚠️ Les coupures manuelles du titre et du manifeste sont calees sur une
     ligne large. Sur 360px elles tombent au milieu d une ligne deja repliee et
     laissent des trous. Les retours a la ligne sont donc neutralises, et le
     texte se replie normalement. */
  .hm-why__t br,
  .hm-why__lede br {
    display: none;
  }

  .hm-why__lede {
    margin-top: 24px;
  }

  .hm-why__lede p {
    font-size: .96rem;
  }

  .hm-why__lede p + p {
    margin-top: 16px;
  }

  .hm-why__grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 44px;
  }

  /* Memes proportions, a l echelle : tuile 40, signe 33 a 13/13. */
  .hm-why__ico {
    width: 53px;
    height: 51px;
    margin-bottom: 16px;
  }

  .hm-why__tile {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .hm-why__ico .hm-glyph {
    top: 13px;
    left: 13px;
    width: 33px;
    height: 33px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ████████ PREMIER ECRAN RECOMPOSE + BARRE DYNAMIQUE ████████
   ───────────────────────────────────────────────────────────────────────────
   1. LE FOND DU HERO portait une carte d Orleans passee en NEGATIF pour tenir
      sur l anthracite. Une carte claire inversee ne donne pas une carte de
      nuit : elle donne des traits blancs sans contour lisible, c est-a-dire du
      bruit. Elle est remplacee par une composition de lumiere pure — un arc,
      deux aurores, une trame, un vignettage — ou rien ne peut « faire bizarre »
      parce qu il n y a plus d objet a reconnaitre.

   2. LA BARRE DE NAVIGATION s efface dans le hero en haut de page, puis se
      resserre en pilule centree des qu on defile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La base ───────────────────────────────────────────────────────────────
   Trois foyers et un degre vertical. Le degre ne va PAS du meme noir au meme
   noir : il s eclaircit vers le haut (#1b1d21) et s assombrit vers le bas
   (#0f1012). Un aplat parfaitement uni sur 700px de haut se lit comme une panne
   d affichage ; cette difference de deux tons suffit a donner un volume, sans
   qu on puisse la nommer. */
.hm-hero__wash {
  background:
    /* ⚠️ LE ROUGE S'ARRETE AVANT LE GLOBE, ET C'EST TOUT L'ENJEU DE CE BLOC.
       Il y avait ici un troisieme halo, `at 10% 92%`, pose exactement sur la
       planete — plus une aurore qui descendait dans sa zone. Resultat : de la
       lumiere rouge baignait la Terre. Ce n'est pas une association de couleurs
       discutable, c'est physiquement impossible : sur toute photo prise en
       orbite le ciel autour de la Terre est NOIR, et l'oeil le sait sans le
       formuler.

       Le rouge est donc EMPILE au-dessus du globe au lieu d'etre melange avec
       lui : il tient le haut, derriere le titre, et s'eteint avant le limbe. Le
       bas du degrade descend jusqu'au noir de l'espace.

       ⚠️ NE PAS RALLUMER DE HALO SOUS 60 % DE HAUTEUR. Le rouge de marque n'a
       pas disparu, il s'est concentre la ou il travaille : le titre, le bouton,
       le logo. */
    radial-gradient(96% 50% at 50% -16%, rgba(180, 24, 36, .36) 0%, rgba(180, 24, 36, .08) 32%, transparent 56%),
    radial-gradient(50% 32% at 84% 12%, rgba(224, 80, 92, .12) 0%, transparent 60%),
    linear-gradient(180deg, #1b1d21 0%, #121316 38%, #090a0c 68%, #050607 100%);
}

/* ── L ARC ─────────────────────────────────────────────────────────────────
   Un cercle geant dont seule la BORDURE s allume, place tres haut : il ne reste
   de lui que la portion basse, qui traverse le premier ecran comme un lever de
   soleil. C est le detail qui donne son identite a cet ecran, et il est fait
   d un seul degrade radial.

   ⚠️ `closest-side` et non `farthest-corner` : sur un cercle, la premiere
   valeur cale le 100 % du degrade sur le RAYON. Les paliers 76/86/93/97 % sont
   donc des fractions du rayon, et l anneau garde la meme finesse quelle que
   soit la largeur de l ecran. En `farthest-corner`, il s epaissit sur un ecran
   large et disparait sur un etroit. */
.hm-hero__arc {
  position: absolute;
  left: 50%;
  top: -128%;
  width: 168%;
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    transparent 76%,
    rgba(180, 24, 36, .16) 86%,
    rgba(224, 80, 92, .46) 93%,
    rgba(255, 168, 150, .34) 97%,
    transparent 100%
  );
  /* L anneau s efface sur les cotes : un cercle entier se reconnaitrait comme
     un cercle, et l effet ne tient que tant qu on ne voit qu un arc. */
  -webkit-mask-image: radial-gradient(58% 58% at 50% 100%, #000 30%, transparent 78%);
  mask-image: radial-gradient(58% 58% at 50% 100%, #000 30%, transparent 78%);
}
/* ══════════════════════════════════════════════════════════════════════════
   LE GLOBE DU PREMIER ECRAN
   ──────────────────────────────────────────────────────────────────────────
   Une photographie satellite reelle projetee sur une sphere par
   assets/js/globe.js. Ce bloc ne pose que le CADRE et les deux anneaux
   d'atmosphere : tout le rendu de la planete vit dans le <canvas>.

   ⚠️ IL EST BEAUCOUP PLUS LARGE QUE L'ECRAN (168 %) ET DEBORDE PAR LE BAS.
   C'est ce qui donne l'echelle : une sphere entierement visible se lit comme
   une bille, une sphere dont on ne voit qu'un arc se lit comme une planete.

   ⚠️ `overflow: hidden` est porte par `.hm-hero`, pas par le globe. Le rognage
   par le bas EST l'effet ; un `overflow` local redecouperait la sphere sur sa
   propre boite et la ferait finir en ligne droite.

   ⚠️ NE PAS DONNER DE `width`/`height` EN CSS A `.hm-globe__toile`. Le script
   les calcule en pixels a partir de l'intersection reelle du disque et du
   heros, puis les ecrit en style inline ; une regle ici les ecraserait a la
   premiere remise en page.

   ⚠️ TOUCHER A `top` OU `width` CHANGE LES LATITUDES VISIBLES. La texture
   n'est pas un planisphere complet mais la calotte 20 N - 90 N (voir
   tools/build-terre.py) : descendre le globe plus bas dans le cadre ferait
   chercher au script des latitudes qui ne sont pas dans l'image.
   ══════════════════════════════════════════════════════════════════════════ */
.hm-globe {
  position: absolute;
  left: 50%;
  /* Le sommet du disque tombe aux deux tiers du heros : au-dessus, le texte a
     la place de respirer ; au-dessous, la courbe a la place de se lire. */
  top: 62%;
  width: 168%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;

  /* Rien ne s'affiche tant que la carte n'est pas chargee ET projetee : voir
     `is-pret` dans globe.js. */
  opacity: 0;
  transition: opacity .9s ease;
}

.hm-globe.is-pret {
  opacity: 1;
}

/* ── La toile ────────────────────────────────────────────────────────────── */
/* `left`, `top`, `width` et `height` arrivent du script, en pixels.

   ⚠️ IL N'Y A PLUS D'ANNEAU D'ATMOSPHERE EN CSS, ET IL NE FAUT PAS EN REMETTRE.
   Les deux qui vivaient ici — un trait cyan sur le bord du disque, un halo
   autour — etaient des traits : des arrets nets, etales sur 7,5 % du rayon,
   quand l'atmosphere terrestre en fait 1,6 %. C'est le shader qui calcule
   desormais la diffusion, du meme cote et de l'autre du limbe, avec le meme
   eclairement que le sol. Un anneau CSS repose par-dessus se verrait
   immediatement : il ne saurait ni s'eteindre avec la nuit, ni suivre la
   courbure au pixel pres. */
.hm-globe__toile {
  position: absolute;
  display: block;
}

/* ── Telephone ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hm-globe {
    /* Plus large encore, et plus bas : sur un ecran etroit, une sphere a 168 %
       laisse voir presque tout son disque et redevient une bille. */
    width: 280%;
    top: 74%;
  }
}


/* ⚠️ PLUS AUCUN QUADRILLAGE DE FOND SUR LE SITE, et c'est un choix, pas un
   oubli. Il y en avait quatre — deux superposes sur le heros, un sur le panneau
   de contact, un sur le pied de page — poses a l'epoque ou ces grands aplats
   sombres n'avaient aucune matiere. Le heros a depuis un globe, et les halos
   suffisent aux deux autres. Ne pas en reintroduire un sans regarder d'abord ce
   que la surface contient deja. */

/* ── Les deux aurores ──────────────────────────────────────────────────────
   Plus larges et plus floues qu avant : a 70px de flou elles avaient encore un
   bord, et un bord qui bouge se suit du regard. A 110px il n y a plus de bord,
   seulement une couleur qui respire. */
.hm-hero__orb {
  filter: blur(110px);
}

.hm-hero__orb--a {
  top: -180px;
  left: -140px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(180, 24, 36, .40) 0%, rgba(180, 24, 36, .12) 48%, transparent 72%);
}

.hm-hero__orb--b {
  /* Remontee : a `top: 60px` avec 110px de flou, elle deversait du rose sur le
     limbe de la planete. */
  right: -180px;
  top: -60px;
  width: 660px;
  height: 660px;
  background: radial-gradient(circle, rgba(224, 80, 92, .20) 0%, rgba(141, 17, 26, .07) 50%, transparent 74%);
}

/* ── Le voile ──────────────────────────────────────────────────────────────
   Il faisait une CLAIRIERE : il creusait un fond uni sous le titre pour le
   detacher de la carte. Il n y a plus de carte a masquer — il devient donc un
   VIGNETTAGE, qui assombrit les bords au lieu d eclaircir le centre. Le role
   est le meme (concentrer le regard sur le titre), le sens est inverse. */
.hm-hero__veil {
  background:
    radial-gradient(72% 62% at 50% 42%, rgba(20, 21, 23, .55) 0%, rgba(20, 21, 23, .18) 52%, transparent 78%),
    radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(9, 10, 11, .55) 100%);
}

.hm-hero__grain {
  opacity: .13;
}

/* Le trait de separation du bas : l ecran sombre ne doit pas s arreter net sur
   la bande claire qui suit.

   ⚠️ Ce `::after` est LE MEME pseudo-element que celui de `.hm-dark`, qui pose
   un filet clair sur l arete HAUTE de toutes les sections sombres. A specificite
   egale, cette regle-ci est ecrite plus bas et gagne : le hero echange donc son
   filet du haut contre un filet du bas. C est le bon arbitrage — le hero est la
   premiere section de la page, un filet sur son arete haute passe sous la barre
   de navigation et ne se voit pas. `position` et `z-index` sont redeclares ici
   plutot qu herites de `.hm-dark::after` : la regle doit tenir debout seule. */
.hm-hero::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(224, 80, 92, .40) 30%, rgba(224, 80, 92, .40) 70%, transparent);
}

@media (max-width: 768px) {
  .hm-hero__arc {
    top: -104%;
    width: 230%;
  }

  .hm-hero__orb {
    filter: blur(80px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRE DE NAVIGATION
   ───────────────────────────────────────────────────────────────────────────
   En haut de page : effacee, elle fait partie du hero.
   Des qu on defile : une pilule CENTREE, en verre depoli.

   ⚠️ Ces regles vivent dans home.css, qui n est charge QUE par l accueil. La
   barre des autres pages n est pas touchee — et c est voulu : elles n ont pas
   de premier ecran sombre sous lequel ce comportement ait un sens.

   ⚠️ La pilule garde un fond CLAIR, la ou la reference a une pilule sombre. Le
   logo Clairtis est rouge #b41824 sur transparent, et ce rouge donne 2,7:1 sur
   l anthracite — sous le seuil de 3:1, donc un logo qu on devine au lieu de le
   lire. Sur le verre depoli clair il tient 6,6:1.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav {
  transition:
    left .5s var(--ease),
    right .5s var(--ease),
    padding .5s var(--ease),
    border-radius .5s var(--ease),
    background-color .35s var(--ease),
    box-shadow .35s var(--ease);
}

/* ── HAUT DE PAGE : la barre s efface dans le hero ─────────────────────────
   ⚠️ Tout ce qui vit dedans doit alors repasser en clair, un element a la fois.
   Sur l anthracite du hero, le gris chaud des liens (#413f3c) tombe a 1,74:1 —
   c est-a-dire illisible. Un `color` pose sur `.nav` ne suffit pas : les regles
   de style.css fixent deja une couleur plus bas, et elles gagnent.

   ⚠️ Selecteurs en `> li >` : les liens du sous-menu Services vivent EUX AUSSI
   dans `.nav__links`. Sans cette restriction ils passeraient en blanc… sur la
   carte blanche du sous-menu. */
body:not(.hm-scrolled) .nav {
  /* Au-dessus du heros sombre, la barre s'efface completement — filet compris,
     sinon un trait clair barrerait le globe. */
  background-color: transparent;
  border-bottom-color: transparent;
}

body:not(.hm-scrolled) .nav__links > li > a:not(.btn) {
  color: rgba(255, 255, 255, .78);
}

body:not(.hm-scrolled) .nav__links > li > a:not(.btn):hover,
body:not(.hm-scrolled) .nav__links > li > a.nav__link--active:not(.btn) {
  color: #fff;
}

/* ⚠️ Le logo est ROUGE sur transparent, et le rouge de marque donne 2,69:1 sur
   l anthracite — sous le seuil de 3:1 d un element graphique, et sa nuance
   sombre descend a 1,94. On l ECLAIRCIT plutot que de le blanchir : a 1,55 de
   luminosite il passe a 4,84 et sa nuance sombre a 3,46, tout en restant
   reconnaissable comme le rouge Clairtis. `brightness(0) invert(1)` donnerait
   un logo blanc, lisible mais sans identite — c est l option de repli s il faut
   un jour un vrai fichier clair. */
body:not(.hm-scrolled) .logo__img {
  filter: brightness(1.55) saturate(1.05);
}

body:not(.hm-scrolled) .btn-profile {
  color: rgba(255, 255, 255, .82);
}

/* ⚠️ `.btn-profile` ne suffit PAS. Au chargement, auth.js REMPLACE ce bouton
   selon l'etat de connexion :
     · visiteur connecte  -> `.nav__user-btn`, reduit a la PASTILLE rouge depuis
       qu'il a perdu son prenom et son chevron. La pilule blanche qui l'entourait
       le detachait du hero sombre ; sans elle, le rouge de marque ne rend que
       2,69:1 sur l'anthracite, sous le seuil d'un contour de commande. D'ou
       l'anneau clair pose plus bas, qui remonte a 6,17:1.
     · visiteur deconnecte -> `.nav__login-btn`, un simple texte en `--ink`
       (#212224). Sur l'anthracite du hero il donne 1,13:1, c'est-a-dire
       INVISIBLE. C'est l'element que la barre transparente avait oublie.
   Aucun de ces deux boutons n'existe dans le HTML de depart : ils ne se voient
   pas en relisant la page, et toute retouche de cette barre doit passer auth.js
   en revue. */
body:not(.hm-scrolled) .nav__avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

/* ⚠️ La liste de transitions plus bas ne couvre PAS `box-shadow`. Sans cette
   ligne, l'anneau apparait et disparait d'un coup au moment ou la barre se
   resserre, alors que tout le reste s'y fond en .35 s. */
.nav__avatar {
  transition: box-shadow .35s var(--ease);
}
body:not(.hm-scrolled) .nav__login-btn {
  color: rgba(255, 255, 255, .86);
}

body:not(.hm-scrolled) .nav__login-btn:hover {
  color: #fff;
}

body:not(.hm-scrolled) .nav__login-btn svg {
  opacity: .8;
}

/* Le bouton n'a plus de pastille ronde : sur le heros sombre il ne reste que
   les deux barres, qui passent au blanc. */
body:not(.hm-scrolled) .nav__burger span {
  background: #fff;
}

/* La bascule doit se jouer en meme temps que le resserrement de la barre,
   sinon le texte change de couleur avant que le fond n arrive sous lui. */
.logo__img,
.nav__links > li > a:not(.btn),
.btn-profile,
.nav__login-btn,
.nav__login-btn svg {
  transition: color .35s var(--ease), background-color .35s var(--ease), filter .35s var(--ease), opacity .35s var(--ease);
}

/* ⚠️ `.nav__burger span` est SORTI de cette liste. Ses barres portent deja leur
   propre transition — rotation, largeur et couleur — dans style.css ; la
   reprendre ici l'ecrasait, et la croix de fermeture s'animait alors sur la
   duree de la barre de navigation (.35 s) au lieu de la sienne (.3 s), avec la
   mauvaise courbe et sans le claquement de fin. */

/* ⚠️ `max()` et non une largeur fixe. La pilule vise 1120px de large (2 x 560
   de part et d autre du milieu), MAIS jamais moins que la gouttiere d origine :
   sous 1172px de fenetre, `calc(50% - 560px)` devient negatif et la barre
   deborderait de l ecran des deux cotes. `max()` la rabat alors sur la marge
   normale, et le resserrement ne se produit tout simplement pas — ce qui est le
   bon comportement sur un ecran ou il n y a deja plus de marge a reprendre. */
/* ⚠️ ICI VIVAIT LA METAMORPHOSE EN PASTILLE : largeur, rayon, remplissage et
   flou d'arriere-plan changeaient tous au premier defilement. Elle a ete
   supprimee, et la geometrie unique est desormais posee dans style.css. Ne rien
   remettre dans ce selecteur qui deplace quoi que ce soit. */

/* ⚠️ Repli pour les moteurs sans flou d arriere-plan (Firefox ou l option est
   desactivee, vieux navigateurs). Sans lui, `rgba(255,255,255,.72)` reste une
   simple transparence : le texte de la page se lit EN TRANSPARENCE derriere les
   liens de menu. On repasse alors sur un blanc presque plein. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hm-scrolled .nav {
    background-color: #fff;
    border-bottom-color: rgba(34, 30, 26, .10);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   █████████ LES TROIS OFFRES — version epuree █████████
   ───────────────────────────────────────────────────────────────────────────
   Elles etaient presentees DANS DES TELEPHONES : chassis dessine en CSS,
   boutons de volume, ile, ecran qui s allume a l entree, inclinaison 3D, reflet
   au survol, et un prix par carte. Tout ca est supprime.

   A la place : trois cartes blanches, une illustration, une phrase, un bouton.
   C est moins spectaculaire et ca se lit dix fois plus vite, ce qui est le
   propos d une section qui doit faire choisir entre trois offres.

   ⚠️ Les prix ne sont plus affiches ici : c est un endroit de moins ou le
   montant affiche peut diverger de celui facture.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LE FOND : BLANC UNI ───────────────────────────────────────────────────
   ⚠️ Il n y a rien a composer ici. J y avais mis un halo de marque dans un
   angle sur un degrade vertical ; c etait une lecture erronee d une capture
   d ecran, ou la teinte du coin venait du navigateur et pas de la page. Le fond
   est BLANC UNI, et c est lui qui fait tout le travail : trois cartes blanches
   sur un blanc identique ne tiennent que par leur ombre, et c est ce qui donne
   l impression de legerete. Ne pas y remettre de degrade. */
.hm-prest-sec {
  background: #fff;
  border-block: 0;
}

/* ⚠️ Conteneur ELARGI pour cette section seule : 1500px au lieu des 1220 du
   reste de la page. Les cartes de la maquette font pres de 450px de large, ce
   qui est impossible a 1220 moins les gouttieres. Le debordement par rapport
   aux sections voisines est assume — c est la seule section en trois colonnes
   larges, et elle respire de l etre. */
.hm-prest-sec .hm-wrap {
  max-width: 1500px;
}

/* ── En-tete : un titre SEUL, centre ───────────────────────────────────────
   ⚠️ Contredit volontairement `.hm-head`, qui passe en deux colonnes
   asymetriques au-dessus de 981px. Cette section est la seule calee sur une
   maquette centree. Le modificateur est ecrit ici, et NON en modifiant
   `.hm-head`, qui sert a quatre autres sections. */

/* Hors media query : la pastille a ete retiree du HTML, et `.hm-head__t` porte
   une marge haute destinee a l en separer. */
.hm-head--center .hm-head__t {
  margin-top: 0;
}

.hm-head--center .hm-head__s {
  margin-inline: auto;
  text-align: center;
  /* `balance` et non `pretty` : ce sous-titre fait deux lignes sous un titre
     centre. `pretty` ne traite que la derniere ligne ; `balance` egalise toutes
     les lignes, et c est la seule facon qu un bloc centre ne finisse pas par un
     mot isole au milieu. */
  text-wrap: balance;
}

@media (min-width: 981px) {
  .hm-head--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 860px;
    /* 76px sous l en-tete : c est l ecart de la maquette, et il est GRAND a
       dessein. C est ce blanc qui separe le propos de la section de son
       catalogue ; sans lui les trois cartes remontent contre le sous-titre. */
    margin: 0 auto 76px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* ⚠️ `max-width` en `ch` : l unite vaut la largeur d un caractere, donc la
     capacite d une ligne reste la meme quand le corps du titre change avec le
     `clamp`. Le titre fait 36 caracteres ; a 19ch il passait a trois lignes, a
     24ch il en fait deux quelle que soit la largeur de fenetre. */
  .hm-head--center .hm-head__t {
    grid-column: auto;
    grid-row: auto;
    max-width: 24ch;
    text-wrap: balance;
    font-size: clamp(2.1rem, 3.9vw, 3.35rem);
    line-height: 1.13;
    letter-spacing: -.035em;
  }

  /* ⚠️ `max-width` cale sur le NOMBRE DE LIGNES voulu, pas sur une largeur de
     lecture confortable. La phrase fait 163 caracteres. Une ligne de N ch en
     tient environ 1,1 x N (le caractere moyen est plus etroit que le zero). A
     54ch elle tombait sur 2,7 lignes, donc trois. A 80ch elle en tient ~88 par
     ligne, soit 1,9 — deux lignes, avec de la marge.

     ⚠️ 88 caracteres par ligne depasse la fourchette de confort (45-75). C est
     un arbitrage assume : ici le sous-titre est une accroche de deux lignes
     sous un grand titre, pas un paragraphe a lire longuement. Si le texte
     s allonge nettement, reduire le corps plutot que d elargir encore.

     ⚠️ 80ch a ce corps fait ~750px, et l en-tete est bornee a 860px : la valeur
     tient dans son conteneur. Elargir l un sans verifier l autre ne donnerait
     rien. */
  .hm-head--center .hm-head__s {
    grid-column: auto;
    grid-row: auto;
    margin-top: 22px;
    padding-left: 0;
    border-left: 0;
    max-width: 80ch;
    font-size: 1.06rem;
    line-height: 1.68;
    /* Le sous-titre de la maquette se lit comme une phrase, pas comme une
       legende : `--ink-2` plutot que le gris secondaire. */
    color: var(--ink-2);
  }
}

/* ── Les trois cartes ──────────────────────────────────────────────────────
   `align-items: stretch` (defaut de la grille) : les trois descriptions n ont
   pas la meme longueur, et trois cartes de hauteurs differentes se lisent comme
   un defaut de fabrication. */

/* ⚠️ AUCUNE BORDURE, et une ombre a peine visible. La maquette ne pose pas de
   contour : les cartes se detachent par leur blanc pur contre le fond, rien
   d autre. Un contour, meme a 7 %, les transforme en cadres et c est exactement
   ce qu on cherchait a quitter en retirant les telephones. */

/* ── L'illustration ────────────────────────────────────────────────────────
   Trois images fournies, en rouge et en volume. Elles portent DEJA leur propre
   carte : la tuile en degradé qui servait de fond aux anciens signes a donc
   ete retiree — une carte posee sur une carte ne fait pas un relief, elle fait
   un doublon.

   ⚠️ Boite CARREE + `object-fit: contain`. Les trois fichiers n'ont ni le meme
   format ni la meme marge transparente (1024x812, 965x1024, 1024x972) ; ils
   ont ete recadres sur leur contenu a la conversion, et cette boite commune
   finit de les aligner. Sans elle, trois images de trois formats dans une
   rangee paraissent de trois tailles differentes.

   ⚠️ La boite porte `aspect-ratio` et non une hauteur fixe seule : c'est elle
   qui reserve la place AVANT que l'image n'arrive. Les trois sont en
   `loading="lazy"` ; sans reserve, elles poussent le titre et le texte vers le
   bas en se chargeant. */

/* ⚠️ `--ink-2` et non `--muted`. La description de la maquette est un texte
   qu on LIT, pas une legende qu on survole : elle y est nettement plus sombre
   qu un gris secondaire. `--muted` donnait une carte qui s efface. */

/* ── Le bouton ─────────────────────────────────────────────────────────────
   `align-self: flex-start` : il s arrete a la largeur de son libelle. Etire sur
   toute la carte, trois boutons de 300px de large auraient pese plus lourd que
   les trois titres.
   ⚠️ Il ne reutilise pas `.btn` de style.css : cette classe sert a tout le
   site et porte deja quatre variantes. Un bouton de plus ici, c est une
   variante de plus la-bas, pour trois occurrences. */
/* ⚠️ PAS de `margin-top: auto`. C etait mon reflexe — caler les trois boutons
   sur la meme ligne — mais la maquette ne le fait pas : ses trois boutons sont
   a trois hauteurs differentes, chacun colle a la fin de sa description. Les
   cartes, elles, restent de meme hauteur (la grille les etire), et la carte la
   plus courte garde simplement du blanc sous son bouton. C est ce blanc inegal
   qui donne le cote pose et non tabulaire de la mise en page. */

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTATIONS
   ⚠️ `.hm-offres` faisait partie du carrousel a defilement magnetique de
   mobile.css, avec cinq autres grilles du site. `.hf-grille`, qui a remplace
   `.hm-prests`, n y entre PAS : la raison d etre de ce carrousel etait de garder
   trois cartes de 480px comparables cote a cote. Ces cartes-ci portent chacune
   leur liste et leur bouton — empilees, elles se lisent mieux qu'en bande, et une
   colonne qui defile normalement est plus simple qu un carrousel a apprendre.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .hm-prest-sec .hm-wrap {
    max-width: 1220px;
  }
}

@media (max-width: 768px) {

  /* Pleine largeur au telephone : cale a gauche sur une carte etroite, le
     bouton laisse un grand vide a sa droite en bas de chaque carte. */
}


/* ═══════════════════════════════════════════════════════════════════════════
   LES MARGES DU PREMIER ECRAN, SUR GRAND ECRAN
   ───────────────────────────────────────────────────────────────────────────
   La HAUTEUR du hero ne se regle plus ici : elle est posee sur `.hm-hero`
   lui-meme, tout en haut de ce fichier, et vaut a toutes les largeurs. Il ne
   reste dans ce bloc que les marges verticales, qui sont les seules a differer
   entre l'ordinateur et le telephone (mobile.css fixe les siennes).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ LA MARGE BASSE EST DESORMAIS LA PLUS GRANDE, et c'est l'inverse de ce qui
   etait ecrit ici. Le contenu se centre entre les deux marges : en gonflant
   celle du bas, il remonte — juste assez pour degager la calotte du globe, qui
   commence a 62 % de la hauteur.

   La marge haute reste genereuse pour une autre raison, inchangee : la barre de
   navigation flotte au-dessus des 90 premiers pixels du heros. Les deux
   contraintes tirent dans le meme sens, elles ne se contredisent pas. */
@media (min-width: 769px) {
  .hm-hero {
    padding-block: 150px 260px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TROIS FORMULES — COTATIONS DU MODELE, AU PIXEL
   ──────────────────────────────────────────────────────────────────────────
   Les valeurs viennent du modele fourni, relevees une a une : rayon 28px,
   retrait 28px, titre 22px gras, delai 15px, filet a 18 %, texte 15/24,
   points 14/20, bouton de 48px de haut.

   ⚠️ LE TEXTE N'EST PAS NOIR : chaque carte a SA propre couleur de texte, une
   version tres sombre de sa teinte (#0b3444 sur le bleu, et ainsi de suite).
   C'est ce qui fait qu'une carte coloree ne ressemble pas a une carte blanche
   qu'on aurait peinte. Tout le contenu herite de `color` sur `.hf` ; ne rien
   recolorer plus bas.

   ⚠️ Le modele module ses niveaux de texte par `opacity` et non par des
   couleurs distinctes. C'est ce qui permet a une seule teinte de servir les
   quatre niveaux — mais chaque opacite produit une couleur effective qu'il faut
   MESURER separement, ce que ne dit aucune maquette.
   ══════════════════════════════════════════════════════════════════════════ */
.hf-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.hf {
  /* Valeurs de repli, pour une carte qui arriverait sans modificateur. */
  --hf-fond: #ade8fa;
  --hf-txt: #0b3444;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 28px;
  background: var(--hf-fond);
  color: var(--hf-txt);
  border: 0;
}

/* ⚠️ CES TROIS REGLES DOIVENT RESTER APRES `.hf`, juste au-dessus. Elles ont la
   MEME specificite (0,1,0) : a egalite, c'est la derniere ecrite qui gagne.
   Placees avant, comme elles l'etaient, le repli `--hf-fond: #ade8fa` de `.hf`
   les ecrasait toutes les trois — LES TROIS CARTES SORTAIENT BLEUES, et rien ne
   le signalait puisque le CSS etait parfaitement valide.

   Les teintes sont SATUREES. Un premier essai les avait prises tres pales, dans
   le rouge de marque : les cartes se distinguaient a peine et la couleur ne
   servait a rien. Le bleu est celui du modele au pixel (rgb 173 232 250) ; le
   vert et le violet en sont deduits, meme saturation et meme rapport entre le
   fond et son texte. */
.hf--1 { --hf-fond: #ade8fa; --hf-txt: #0b3444; }
.hf--2 { --hf-fond: #a6efc9; --hf-txt: #0b4029; }
.hf--3 { --hf-fond: #cdc9fb; --hf-txt: #221950; }

/* ── Titre et pictogramme, sur une ligne ─────────────────────────────────── */
.hf__t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: inherit;
}

.hf__ico {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ── Le delai ────────────────────────────────────────────────────────────── */
/* ⚠️ 0,74 et non les 0,7 du modele. MESURE, couleur effective a l'appui : a 0,7
   la ligne tombe a 4,44:1 sur le bleu et 4,09:1 sur le vert, sous le seuil d'un
   texte de 15px. 0,74 est la plus BASSE valeur qui passe sur les trois fonds a
   la fois — 4,93 / 4,52 / 5,30:1. */
.hf__delai {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: inherit;
  opacity: .74;
}

/* ── Le filet ────────────────────────────────────────────────────────────── */
/* Un vrai separateur, et non une bordure posee sur la ligne du dessus : le
   modele l'espace de 20px des deux cotes, ce qu'une bordure ne sait pas faire
   sans deplacer le texte. `currentColor` a 18 % le teinte de la carte. */
.hf__filet {
  height: 1px;
  margin: 20px 0 0;
  border: 0;
  background: currentColor;
  opacity: .18;
}

.hf__d {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: inherit;
  opacity: .8;
}

/* ── Les trois points ────────────────────────────────────────────────────── */
.hf__pts {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  /* `flex: 1` pousse le bouton en bas : c'est la liste qui absorbe la hauteur
     restante, pas une marge automatique sur le bouton. */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hf__pts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  color: inherit;
  opacity: .9;
}

/* Trait plus epais que celui des autres coches du site : a 16px, un trait de 2
   se perd ; le modele monte a 2,6. */
.hf__ok {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* ── Le bouton ───────────────────────────────────────────────────────────── */
.hf__go {
  margin-top: 28px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 6px 24px 6px 6px;
  border-radius: var(--r-btn);
  background: #0a0a0a;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  /* Le lisere interieur du modele : il detache le noir du fond colore sans lui
     ajouter d'ombre. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: background-color .22s var(--ease);
}

.hf__go:hover,
.hf__go:focus-visible {
  background: #000;
  color: #fff;
}

/* ⚠️ 36px de cote, soit la hauteur utile du bouton (48 moins 2 x 6 de retrait).
   Le modele ecrit `w-12 h-full`, ce qui donnerait 48 de large pour 36 de haut —
   une pastille ovale, alors que la maquette en montre une ronde. La hauteur
   fait foi. */
.hf__rond {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s var(--ease);
}

.hf__go:hover .hf__rond,
.hf__go:focus-visible .hf__rond {
  transform: translateX(2px);
}

/* ══════════════════════════════════════════════════════════════════════════
   L'ENVOL DU BOUTON, AU CLIC
   ──────────────────────────────────────────────────────────────────────────
   Le bouton quitte sa carte, se pose au centre de l'ecran en grand, sa fleche
   file vers la droite, et la page change. C'est assets/js/envol.js qui pilote ;
   ici il n'y a que les etats de depart et d'arrivee.

   ⚠️ CE N'EST PAS LE BOUTON QUI S'ENVOLE MAIS UN CLONE. Voir le commentaire en
   tete de envol.js : sortir l'original du flux ferait se retracter la carte
   sous les yeux du visiteur, au moment precis ou il suit le bouton.

   ⚠️ LES TRANSITIONS NE PORTENT QUE SUR `transform`, `opacity` ET `box-shadow`.
   Les deux premieres n'obligent a rien recalculer ; y ajouter `width`, `left`
   ou `font-size` ferait refaire la mise en page a chaque image, et l'animation
   saccaderait exactement la ou on la regarde le plus.

   ⚠️ LE FLOU DE FOND EST DECLARE UNE FOIS, A RAYON FIXE, ET N'EST PAS ANIME.
   C'est l'opacite du voile qui monte, ce qui donne le meme flou progressif a
   l'oeil pour une fraction du cout. Voir le detail sur `.hf-vol__voile`.

   ⚠️ LE BOUTON RESTE NOIR. C'est le flou et la desaturation du fond qui lui
   rendent son contraste, pas un changement de couleur. Une version
   intermediaire le faisait virer au rouge de marque : inutile des lors que la
   page derriere recule vraiment.

   ⚠️ LA SPECIFICITE FAIT LE TRAVAIL, PAS L'ORDRE. `.hf-vol .hf__go` pese 0,2,0
   contre 0,1,0 pour `.hf__go` : ce bloc l'emporte ou qu'il soit place. Ne pas
   le "simplifier" en `.hf__go` seul — il se retrouverait a egalite, et c'est la
   derniere declaration qui gagnerait.
   ══════════════════════════════════════════════════════════════════════════ */
.hf-vol {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* Rien n'est cliquable pendant le vol : le visiteur est deja parti. */
  pointer-events: none;
}

.hf-vol__voile {
  position: absolute;
  inset: 0;

  /* ⚠️ LA TEINTE EST LEGERE PARCE QUE C'EST LE FLOU QUI TRAVAILLE. Un voile
     presque opaque ferait disparaitre la page, et le bouton — qui est NOIR —
     deviendrait un trou noir sur fond noir. Floutee mais encore lumineuse, la
     page lui rend le contraste que sa propre couleur ne peut pas lui donner. */
  background: rgba(9, 8, 12, .52);

  /* ⚠️ LE RAYON DE FLOU EST FIXE, C'EST L'OPACITE QUI S'ANIME. Le resultat a
     l'oeil est le meme — un element floutant son fond se compose avec sa propre
     opacite, donc a 30 % on voit 30 % de flou — mais le cout n'a rien a voir :
     animer le rayon oblige le navigateur a refaire un noyau de flou different a
     chaque image, sur tout l'ecran. C'est exactement ce qui fait saccader ce
     genre d'effet, et une animation qui saccade n'est pas lente, elle est
     cassee.

     La desaturation compte autant que le flou : elle retire a la page derriere
     le droit de rivaliser avec le bouton. */
  -webkit-backdrop-filter: blur(22px) saturate(.72);
  backdrop-filter: blur(22px) saturate(.72);
  opacity: 0;

  /* Le voile monte plus vite que le bouton ne vole : la page recule d'abord, le
     bouton s'en detache ensuite. Les faire finir ensemble donnerait un seul
     mouvement massif au lieu de deux plans. */
  transition: opacity .9s cubic-bezier(.33, 1, .68, 1);
  will-change: opacity;
}

.hf-vol.is-actif .hf-vol__voile {
  opacity: 1;
}

/* ⚠️ REPLI OBLIGATOIRE. Sans `backdrop-filter`, la page resterait NETTE
   derriere un voile a peine teinte : le bouton noir s'y perdrait completement.
   On echange alors le flou contre de l'opacite — moins beau, mais lisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hf-vol.is-actif .hf-vol__voile {
    background: rgba(9, 8, 12, .93);
  }
}

.hf-vol .hf__go {
  position: fixed;
  margin: 0;
  /* Le clone herite d'un bouton place dans une grille : ces deux-la n'ont plus
     aucun sens hors du flux, et `align-self` decalerait le point de depart. */
  align-self: auto;
  transform-origin: 50% 50%;

  /* ⚠️ `cubic-bezier(.16,1,.3,1)` : depart franc, arrivee tres longuement
     amortie. Sur une seconde entiere, une courbe symetrique donnerait
     l'impression d'un objet tire par un cable ; celle-ci le fait glisser puis
     se poser. C'est elle qui fait la fluidite, bien plus que la duree. */
  transition:
    transform 1.15s cubic-bezier(.16, 1, .3, 1),
    box-shadow 1s var(--ease);
  will-change: transform;
}

/* L'ombre portee n'apparait qu'en vol : c'est elle, et non la taille, qui fait
   lire le bouton comme DEVANT l'ecran plutot que dessus. Le lisere interieur du
   modele est repris a l'identique — l'omettre ferait clignoter le contour au
   premier tour d'animation. */
.hf-vol.is-actif .hf__go {
  /* ⚠️ LE HALO CLAIR N'EST PAS DECORATIF, IL DETACHE UN NOIR D'UN NOIR. Le
     bouton garde sa couleur ; sans cette lueur et sans le lisere interieur, son
     contour se dissoudrait dans le voile des que la page floutee s'assombrit. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 40px 110px rgba(0, 0, 0, .7),
    0 0 140px rgba(255, 255, 255, .1);
}

.hf-vol .hf__rond {
  /* Elle part apres le bouton : on voit d'abord la pastille s'avancer, puis la
     fleche la traverser. Deux gestes qui se suivent, pas un seul brouillon. */
  transition: transform .95s cubic-bezier(.16, 1, .3, 1) .22s;
}

/* Le libelle s'efface pendant que la fleche traverse : a l'arrivee il ne reste
   que le mouvement, qui est le sujet. */
.hf-vol__txt {
  transition: opacity .45s var(--ease) .12s;
}

.hf-vol.is-actif .hf-vol__txt {
  opacity: 0;
}

/* ⚠️ Repli sans script ni mouvement : envol.js laisse alors le clic suivre son
   cours normal et ce bloc n'est jamais atteint. Rien a desactiver ici. */
@media (prefers-reduced-motion: reduce) {
  .hf-vol {
    display: none;
  }
}

/* ── La note de bas de section ───────────────────────────────────────────── */
.hf-note {
  margin: 30px auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
}

.hf-note a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hf-note a:hover,
.hf-note a:focus-visible {
  color: var(--red);
}

/* ── Tablette et telephone ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hf-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .hf-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .hf {
    padding: 24px 22px;
    border-radius: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   INCLUS DANS TOUTES NOS OFFRES — REPRISE DU MODELE FOURNI
   ──────────────────────────────────────────────────────────────────────────
   Un bandeau blanc, un titre cale a gauche, et six cartes grises a coins
   doux : pas de filet, pas d'ombre, pas de soulevement au survol. La section
   etait sombre, ses cartes bordees et ombrees, et un bouclier en filigrane
   debordait du bord droit. Tout cela est parti.

   ⚠️ LE FOND DE SECTION EST BLANC, PAS LE PAPIER IVOIRE DE LA PAGE. MESURE :
   une carte grise (#f4f4f5) sur le papier (#faf8f5) ne rend que 1,04:1 — les
   cartes disparaissaient purement et simplement. Sur du blanc, 1,10:1 : c'est
   le meme ecart tenu que dans le modele, et il se voit. Ne pas rendre cette
   section transparente en croyant l'harmoniser avec le reste de la page.

   ⚠️ Ce faible ecart est ACCEPTABLE ici, et seulement ici : la carte est un
   support decoratif, pas une commande. Ce sont son titre (16,31:1) et son texte
   (4,67:1) qui portent l'information, et eux sont largement au-dessus.
   ══════════════════════════════════════════════════════════════════════════ */
.hi-sec {
  background: #fff;
}

/* ── L'en-tete, cale a gauche ────────────────────────────────────────────── */
.hi-head {
  margin-bottom: 30px;
}

/* Une seule ligne, calee a gauche sous le titre, comme dans le modele. Elle ne
   reprend pas l'ancien sous-titre — celui-la faisait trois lignes et repetait
   ce que les six cartes disent chacune a leur tour. */
.hi-head__s {
  max-width: 46ch;
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #686e78;
}

.hi-head__t {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #171717;
}

/* ── La grille ───────────────────────────────────────────────────────────── */
.hi-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hi {
  --hi-accent: #0b6c99;

  /* ⚠️ COTATIONS FOURNIES, A NE PAS RETOUCHER SANS RAISON :
         rounded-xl        12px
         p-6               24px, sur les quatre cotes
         bg-foreground/5   la couleur du texte a 5 %

     Le fond est TRANSLUCIDE et non un gris fige. C'est tout l'interet de la
     cotation : pose sur le blanc de `.hi-sec` il donne #f3f3f3, mais si la
     section change de fond un jour, les six cartes suivent au lieu de flotter
     sur un gris devenu faux. */
  padding: 24px;
  border-radius: 12px;
  background: rgba(9, 9, 11, .05);

  /* Ni filet, ni ombre, ni soulevement : dans le modele la carte est un aplat,
     et c'est ce qui permet d'en aligner six sans que la page ne se charge. */
  border: 0;
  box-shadow: none;
}

/* Six accents, un par carte. Le modele aligne six logos de couleurs
   differentes ; nos pictogrammes sont d'un meme trait, c'est donc la couleur
   qui les distingue. MESURE sur le fond de la carte, recalculee apres le
   passage a `bg-foreground/5` : de 4,45:1 (l'orange, le plus faible) a 7,30:1
   — tous au-dessus des 3:1 demandes a un pictogramme. */
.hi--1 { --hi-accent: #0b6c99; }   /* bleu    */
.hi--2 { --hi-accent: #0e6f47; }   /* vert    */
.hi--3 { --hi-accent: #4a3eae; }   /* violet  */
.hi--4 { --hi-accent: #b3560a; }   /* orange  */
.hi--5 { --hi-accent: #0a6e6e; }   /* sarcelle*/
.hi--6 { --hi-accent: #b41824; }   /* marque  */

/* ── Le pictogramme ──────────────────────────────────────────────────────── */
/* ⚠️ Pas de pastille derriere. Le modele pose l'icone A MEME la carte ; un
   carre colore sous chacune des six ferait six vignettes de plus a regarder
   avant d'arriver au texte. */
/* 28px au lieu de 34, et 16px d'ecart au lieu de 22 : le pictogramme etait ce
   qui poussait le plus la carte vers le bas, pour la part d'information la plus
   faible des trois elements. */
.hi__ico {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  color: var(--hi-accent);
}

/* ⚠️ `--g-accent` DOIT etre pose sur `.hm-glyph` LUI-MEME, pas sur son parent.
   `.hm-glyph` declare `--g-accent: var(--red)` en propre : une valeur heritee du
   parent, quelle que soit sa specificite, perd toujours contre une declaration
   posee sur l'element. C'est ce qui rendait inoperante l'ancienne regle
   `.hm-dark .hm-incl__ico { --g-accent: #ff8a94 }` — les pictogrammes de la
   version sombre sont restes rouges sans que personne ne le voie. */
.hi__ico .hm-glyph {
  width: 100%;
  height: 100%;
  display: block;
  --g-accent: var(--hi-accent);
}

/* ── Titre et texte ──────────────────────────────────────────────────────── */
.hi__t {
  margin: 0;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: #171717;
}

/* ⚠️ Les six textes sont ECRITS pour tenir sur deux lignes, plutot que coupes
   a deux lignes par `-webkit-line-clamp`. Le modele affiche des points de
   suspension parce que son contenu est du faux texte ; ici, tronquer voudrait
   dire cacher la moitie d'une phrase que rien ne permet ensuite de lire. */
.hi__d {
  margin: 8px 0 0;
  font-size: .87rem;
  line-height: 1.5;
  /* #686e78 et non #6b7280 : MESURE, celui du modele tombe sous le seuil sur le
     fond de la carte. Celui-ci donne 4,63:1 apres le passage a
     `bg-foreground/5`, donc toujours au-dessus des 4,5:1 exiges.

     ⚠️ CE GRIS N'EST PAS `text-card-foreground` ET NE DOIT PAS LE DEVENIR. La
     cotation fournie s'applique au titre, deja en quasi-noir a 16:1 ; la donner
     aussi a la description mettrait les deux au meme poids et la carte n'aurait
     plus de hierarchie. */
  color: #686e78;
}

/* ── Tablette et telephone ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hi-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .hi__ico {
    margin-bottom: 13px;
  }
}
