/* ═══════════════════════════════════════════════════════════════════════════
   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;
}

/* 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);
}

.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;
}

.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: 550;
  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-pill);
  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.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-scrolled .nav {
  box-shadow:
    0 1px 2px rgba(34, 30, 26, .06),
    0 10px 34px rgba(34, 30, 26, .14);
}

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

/* Trame verticale. C est le fond le plus discret possible qui remplit encore
   quelque chose : des filets, effaces sur les bords par le masque, qui donnent
   au premier ecran une structure au lieu d un aplat. */
.hm-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--hm-line-2) 1px, transparent 1px);
  background-size: 152px 100%;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 42%, #000 0%, transparent 82%);
  mask-image: radial-gradient(70% 60% at 50% 42%, #000 0%, transparent 82%);
}

/* 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); }
}

@media (max-width: 768px) {
  .hm-hero__grid { background-size: 92px 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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
   ═══════════════════════════════════════════════════════════════════════════ */

/* Trame reguliere sous les halos : le panneau etait le plus grand aplat sombre
   de la page et n avait aucune matiere. */
.hm-cta__panel {
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;
  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);
}

/* Trame + halo, communs. C est ce qui empeche 900px d anthracite de se lire
   comme un rectangle vide — exactement le reproche fait a l ancienne version
   claire, transpose. */
.hm-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 58px 58px, 58px 58px;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 30%, #000 0%, transparent 88%);
  mask-image: radial-gradient(90% 80% at 50% 30%, #000 0%, transparent 88%);
}

/* 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__grid {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}

.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;
  }

  .hm-dark::before {
    background-size: 40px 40px, 40px 40px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   █████ 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
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-incl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.hm-incl__i {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}

/* 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. */
.hm-incl__i::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform .35s var(--ease);
}

.hm-incl__i:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 24, 36, .22);
  box-shadow: var(--sh-lg);
}

.hm-incl__i:hover::before {
  transform: scaleX(1);
}

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

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

.hm-incl__d {
  margin-top: 9px;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. QUESTIONS FREQUENTES
   ───────────────────────────────────────────────────────────────────────────
   Bati sur `<details>`/`<summary>` : ouverture, fermeture, clavier, recherche
   dans la page et annonce aux lecteurs d ecran sont natifs. Il n y a aucun
   script a ecrire, donc aucun script a reparer.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-faq {
  max-width: 900px;
  margin-inline: auto;
  border-radius: var(--hm-r-panneau);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  overflow: hidden;
}

.hm-faq__i + .hm-faq__i {
  border-top: 1px solid var(--border);
}

.hm-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  transition: background var(--t), color var(--t);
  /* ⚠️ Les deux lignes qui suivent retirent le triangle natif : `list-style`
     pour Firefox, le pseudo `-webkit-details-marker` pour Safari. Il en faut
     DEUX — aucune des deux ne couvre les deux moteurs. */
  list-style: none;
}

.hm-faq__q::-webkit-details-marker {
  display: none;
}

.hm-faq__q:hover {
  background: var(--red-bg);
  color: var(--red-dk);
}

/* Le signe + / −, dessine en deux barres. Il TOURNE d un quart de tour a
   l ouverture, ce qui transforme le plus en moins sans changer de dessin. */
.hm-faq__s {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  transition: transform .3s var(--ease), background var(--t), border-color var(--t);
}

.hm-faq__s::before,
.hm-faq__s::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.8px;
  margin: -.9px 0 0 -5.5px;
  border-radius: 2px;
  background: var(--red);
}

.hm-faq__s::after {
  transform: rotate(90deg);
}

.hm-faq__i[open] .hm-faq__s {
  transform: rotate(135deg);
  background: var(--red);
  border-color: var(--red);
}

.hm-faq__i[open] .hm-faq__s::before,
.hm-faq__i[open] .hm-faq__s::after {
  background: #fff;
}

.hm-faq__i[open] .hm-faq__q {
  color: var(--red-dk);
}

.hm-faq__a {
  padding: 0 26px 24px;
}

.hm-faq__a p {
  max-width: 70ch;
  font-size: .95rem;
  line-height: 1.72;
  color: var(--ink-2);
}

/* La reponse se deplie au lieu d apparaitre d un bloc.
   ⚠️ Pose sur le CONTENU et pas sur `<details>` : animer la hauteur de
   `<details>` lui-meme demande de connaitre la hauteur finale, que le
   navigateur ne donne pas avant l ouverture. Ici c est le contenu qui glisse,
   `<details>` s ouvre instantanement, et le resultat se lit pareil. */
@media (prefers-reduced-motion: no-preference) {
  .hm-faq__i[open] .hm-faq__a {
    animation: hm-deplie .3s var(--ease) both;
  }
}

@keyframes hm-deplie {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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) {
  .hm-incl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .hm-incl {
    grid-template-columns: 1fr;
  }

  .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;
  }

  .hm-incl__i {
    padding: 22px 20px 20px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ██████ 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 »
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-incl__ico {
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: var(--r-md);
  display: block;
  background: var(--red-bg);
  color: var(--ink);
  margin-bottom: 16px;
  transition: background var(--t), transform var(--t) var(--ease);
}

.hm-incl__i:hover .hm-incl__ico {
  transform: translateY(-2px) rotate(-4deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════ */
.hm-dark .hm-incl__i {
  background: var(--hm-nuit-2);
  border-color: var(--hm-trait-nuit);
  box-shadow: none;
}

.hm-dark .hm-incl__i:hover {
  border-color: rgba(224, 80, 92, .42);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .42);
}

.hm-dark .hm-incl__i::before {
  background: linear-gradient(90deg, #b41824, #e0505c);
}

.hm-dark .hm-incl__ico {
  background: rgba(224, 80, 92, .13);
  border: 1px solid var(--hm-trait-nuit);
  color: var(--hm-sur-nuit);
  /* Le rouge de marque manque de lumiere sur l anthracite : l accent des
     pictogrammes passe au rose clair, comme partout ailleurs sur la nuit. */
  --g-accent: #ff8a94;
}

.hm-dark .hm-incl__t { color: var(--hm-sur-nuit); }
.hm-dark .hm-incl__d { color: var(--hm-sur-nuit-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   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. */
.hm-sec--marked {
  overflow: hidden;
}

.hm-mark {
  position: absolute;
  top: 40px;
  right: -110px;
  width: 420px;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  opacity: .055;
  color: var(--ink);
  --g-accent: var(--red);
  transform: rotate(-8deg);
}

.hm-dark .hm-mark {
  opacity: .05;
  color: #fff;
  --g-accent: #ff8a94;
}

/* 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) {
  .hm-mark {
    width: 300px;
    height: 300px;
    right: -90px;
    opacity: .045;
  }
}

/* ⚠️ 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) {
  .hm-mark {
    display: none;
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   ███████ « 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:
    radial-gradient(110% 70% at 50% -12%, rgba(180, 24, 36, .34) 0%, rgba(180, 24, 36, .09) 40%, transparent 68%),
    radial-gradient(60% 48% at 84% 24%, rgba(224, 80, 92, .13) 0%, transparent 70%),
    radial-gradient(55% 45% at 10% 92%, rgba(141, 17, 26, .16) 0%, transparent 72%),
    linear-gradient(180deg, #1b1d21 0%, #141517 46%, #0f1012 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%);
}

/* ── La trame ──────────────────────────────────────────────────────────────
   En QUADRILLAGE. En lignes verticales seules, on lisait des barreaux ; croisee,
   c est un papier millimetre, et le regard ne s y accroche plus. */
.hm-hero__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 76px 76px, 76px 76px;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(62% 58% at 50% 40%, #000 0%, rgba(0, 0, 0, .45) 55%, transparent 84%);
  mask-image: radial-gradient(62% 58% at 50% 40%, #000 0%, rgba(0, 0, 0, .45) 55%, transparent 84%);
}

/* ── 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: -140px;
  left: -120px;
  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 {
  right: -160px;
  top: 60px;
  width: 660px;
  height: 660px;
  background: radial-gradient(circle, rgba(224, 80, 92, .26) 0%, rgba(141, 17, 26, .10) 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__grid {
    background-size: 48px 48px, 48px 48px;
  }

  .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 {
  background-color: transparent;
  box-shadow: none;
}

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`, une pilule BLANCHE : elle porte
       son propre fond, elle se voit sur le hero sombre, rien a faire.
     · 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.
   Le bouton n'existant pas dans le HTML de depart, il ne se voit pas en
   relisant la page : toute retouche de cette barre doit passer auth.js en
   revue. */
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;
}

body:not(.hm-scrolled) .nav__burger {
  background: rgba(255, 255, 255, .12);
}

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,
.nav__burger,
.nav__burger span {
  transition: color .35s var(--ease), background-color .35s var(--ease), filter .35s var(--ease), opacity .35s var(--ease);
}

/* ⚠️ `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. */
.hm-scrolled .nav {
  left: max(clamp(10px, 1.6vw, 26px), calc(50% - 560px));
  right: max(clamp(10px, 1.6vw, 26px), calc(50% - 560px));
  padding: 0 14px 0 22px;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  /* ⚠️ Le contour est un `inset` de l ombre, PAS un `border`. Un border ajoute
     1px a la boite au moment ou il apparait : tout le contenu de la barre
     sauterait d un pixel au premier defilement. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .60),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 2px 6px rgba(34, 30, 26, .06),
    0 16px 44px rgba(34, 30, 26, .18);
}

/* ⚠️ 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: rgba(255, 255, 255, .96);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   █████████ 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. */
.hm-prests {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* L ecart entre les cartes est presque aussi large que leur marge
     interieure : c est cette respiration qui les fait lire comme trois objets
     poses, et pas comme un tableau a trois colonnes. */
  gap: 36px;
}

/* ⚠️ 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. */
.hm-prest {
  display: flex;
  flex-direction: column;
  /* Marges interieures larges. Sur le conteneur elargi, chaque carte fait
     ~457px et la colonne de texte ~369px, soit environ 49 caracteres par
     ligne : confortable, la marge ne corrige donc aucun probleme de
     lisibilite. Elle est la pour l AMPLEUR — c est ce qui fait qu une carte
     parait large plutot que simplement etiree, et elle grandit avec la carte. */
  padding: 44px 44px 48px;
  border-radius: 20px;
  background: #fff;
  /* ⚠️ Le fond de la section est BLANC, comme les cartes. Elles n ont donc
     aucune difference de teinte pour se detacher : l ombre est la seule chose
     qui les fait exister. D ou deux couches — une courte qui pose l arete, une
     longue et tres diffuse qui cree le volume. */
  box-shadow:
    0 1px 2px rgba(34, 30, 26, .04),
    0 14px 40px rgba(34, 30, 26, .07);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.hm-prest:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(34, 30, 26, .05),
    0 26px 60px rgba(34, 30, 26, .12);
}

/* ── 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. */
.hm-prest__ico {
  display: block;
  width: 76px;
  aspect-ratio: 1;
  margin-bottom: 26px;
}

.hm-prest__ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* A gauche : le reste de la carte est cale a gauche, une image centree dans
     sa boite decalerait le seul element qui ne l'est pas. */
  object-position: left center;
  transition: transform var(--t) var(--ease);
}

.hm-prest:hover .hm-prest__ico img {
  transform: translateY(-4px) scale(1.04);
}

.hm-prest__t {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.2;
  color: var(--ink);
}

/* ⚠️ `--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. */
.hm-prest__d {
  margin-top: 22px;
  font-size: 1.01rem;
  line-height: 1.74;
  color: var(--ink-2);
}

/* ── 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. */
.hm-prest__go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 38px;
  padding: 15px 31px;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, #8d111a 0%, #b41824 52%, #d43a46 100%);
  background-size: 170% 100%;
  background-position: 0 0;
  color: #fff;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(180, 24, 36, .30);
  transition: background-position .5s var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.hm-prest__go:hover {
  background-position: 100% 0;
  box-shadow: 0 10px 28px rgba(180, 24, 36, .40);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTATIONS
   ⚠️ `.hm-offres` faisait partie du carrousel a defilement magnetique de
   mobile.css, avec cinq autres grilles du site. `.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 font 260px et n ont plus de liste
   d inclus a comparer — empilees, elles tiennent dans un ecran et demi, 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;
  }

  .hm-prests {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .hm-prest {
    padding: 30px 26px 32px;
  }

  .hm-prest__ico {
    width: 64px;
    margin-bottom: 20px;
  }

  .hm-prest__t {
    font-size: 1.2rem;
  }

  .hm-prest__d {
    margin-top: 12px;
    font-size: .92rem;
  }

  /* 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. */
  .hm-prest__go {
    align-self: stretch;
    margin-block-start: 26px;
    padding: 13px 22px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LE PREMIER ECRAN OCCUPE PRESQUE TOUTE LA HAUTEUR
   ───────────────────────────────────────────────────────────────────────────
   Le hero se dimensionnait sur son contenu : environ 650px, soit les deux tiers
   d'un ecran d'ordinateur courant. La bande defilante apparaissait donc en
   haut, avant meme qu'on ait defile. Il prend maintenant 92 % de la hauteur de
   fenetre — assez pour se lire comme un ecran a lui seul, et pas assez pour
   masquer qu'il y a une suite.

   ⚠️ `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` couperait le
   bouton du bas.

   ⚠️ `svh` avant `vh` : sur mobile, `vh` se cale sur la fenetre BARRE D'URL
   RETRACTEE. Un hero a 92vh y est donc 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
   dessous comme repli pour les moteurs qui ignorent `svh`.

   ⚠️ Borne a 769px : sous cette largeur, mobile.css fixe deja ses propres
   marges, et un premier ecran plein ecran au telephone repousse la premiere
   section sous la ligne de flottaison sans rien apporter.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .hm-hero {
    min-height: 92vh;
    min-height: 92svh;
    /* Le contenu se centre dans la hauteur gagnee. 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;
    /* Marge haute plus grande que la basse, et ce n'est pas un desequilibre :
       la barre de navigation flotte au-dessus des 90 premiers pixels du hero.
       A marges egales, le contenu paraitrait cale trop haut. */
    padding-block: 168px 108px;
  }

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