/* ==========================================================================
   Landing B2C — géométrie relevée sur « B2C - Desktop » (1920 × 7972).
   Trame : conteneur 1296px (3 × 416 + 2 × 24), blocs pleine largeur insérés
   de 34px avec un rayon de 20px.

   NB : seul le hero est maquetté en mobile. Le responsive des autres sections
   est une dérivation du desktop, à valider.
   ========================================================================== */

/* <main> DEVIENT L'UNITÉ DE RÉFÉRENCE DES DÉBORDEMENTS PLEINE LARGEUR.
   `100cqw` vaut alors la largeur de MISE EN PAGE — celle que `.shell` centre —
   là où `100vw` compte aussi l'ascenseur vertical. Les deux blocs
   « split--wide » débordaient donc systématiquement de la moitié de sa
   largeur, d'où les 8px d'ascenseur HORIZONTAL au-delà de 1400px.
   Le confinement est sans effet de bord ici : les seuls `position: fixed` de
   la page — barre d'appel et bandeau cookies — vivent hors de <main>, et
   `body` n'a pas de marge, donc la largeur de <main> est exactement celle de
   la mise en page. */
main { container-type: inline-size; }

.shell {
  width: min(1296px, 100% - 68px);
  margin-inline: auto;
}


/* Les titres relevés vont jusqu'à 120px : sans mise à l'échelle fluide ils
   débordent sous 1400px. Le maximum de chaque clamp est la valeur maquette. */
.section-title {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 80px);
  font-weight: var(--fw-black);
  line-height: 1.05;
}

.section-title--plum { color: var(--c-plum); }

.section-title--duo {
  display: flex;
  flex-direction: column;
  font-size: clamp(30px, 3.1vw, 60px);
}

/* Les deux lignes ne sont pas au même corps en maquette : 60px pour la ligne
   rose, 50px pour la magenta. */
.section-title--duo span:first-child { color: var(--c-pink-soft, #F090B5); }
.section-title--duo span + span { font-size: clamp(25px, 2.6vw, 50px); }

.section-title--duo span:last-child {
  color: var(--c-magenta);
  font-size: clamp(26px, 2.6vw, 50px);
}

/* --- Bouton générique ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-magenta);
  color: var(--c-white);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  text-align: center;
}

/* Les CTA des deux blocs texte/image sont navy en maquette, pas magenta
   (relevé : rect 336x48 radius 24 fill #22175B, y4628 et y5900). */
.btn--navy { background: var(--c-navy); }

.btn:hover { background: #B62D71; }
.btn--plum { background: var(--c-plum); }
.btn--plum:hover { background: #63153F; }

/* --- Barre d'appel collante ----------------------------------------------- */

.sticky-cta {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: 80px;
  background: var(--c-white);
  box-shadow: 0 2px 12px rgb(34 23 91 / .12);
}

.sticky-cta[hidden] { display: none; }

.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 100%;
}

.sticky-cta__text {
  margin: 0;
  color: var(--c-plum);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  /* L'ENCART ET LES MARGES SONT BORNÉS, PAS FIGÉS. En pixels fixes, toute la
     largeur perdue entre 1920 et 1281 était absorbée par la seule colonne de
     texte, qui tombait de 38 % à 24 % de la bande — or il n'existe aucun
     palier entre 1280 et le plein écran, c'est donc toute la plage « portable »
     qui se dégradait. Les deux bornes hautes valent exactement les valeurs de
     la maquette (526px et 282px atteints dès 1880px de fenêtre), le rendu à
     1920 est donc inchangé au pixel près. */
  grid-template-columns: 1fr clamp(440px, 28vw, 526px);
  align-items: center;
  /* La gouttière suit le même principe : 60px à 1920 (valeur actuelle), et
     elle cède avant la colonne de texte en dessous. */
  gap: clamp(36px, 3.13vw, 60px);
  /* La bande suit le rapport du montage (1860 x 930) au lieu d'une hauteur
     fixe : c'est la seule façon que `cover` n'ait rien à rogner, quelle que
     soit la largeur de fenêtre. Une hauteur de 960 px sur une bande large de
     3097 px obligeait à agrandir le montage 1,665x et à en couper 588 px par
     le bas — le ruban s'en trouvait décapité.
     Pas de min-height : le contenu (carte de 622 px + 120 de padding) fait
     déjà plancher quand la bande devient plus étroite que 1484 px. */
  aspect-ratio: 1860 / 930;
  margin: 34px;
  /* LA RÉSERVE LATÉRALE CÈDE PLUS VITE QUE LA PROPORTION. En 14,7vw elle
     restait à 212px à 1440, où elle ne sert plus à rien : la maquette ne lui
     donne cette ampleur que pour équilibrer une bande de 1920. En la faisant
     décroître de 0,18px par pixel de fenêtre perdu, elle vaut toujours ses
     282px à 1920 — le rendu y est donc inchangé — mais rend 35px par côté à
     1440 et 47px à 1281, au bénéfice du texte ET du formulaire.
     Le coefficient est borné par le macaron : sa débordante doit continuer de
     tenir dans cette réserve, ce qui interdit d'aller plus vite. */
  padding: 60px clamp(60px, calc(282px - (1920px - 100cqw) * .18), 282px);
  border-radius: 20px;
  background: var(--c-navy);
  color: var(--c-white);
  /* Pas d'overflow:hidden : le bandeau du montage doit sortir du cadre. */
}

/* Le montage fourni (1860 x 960) porte déjà le fond, l'intervenante, le
   squiggle et les coins arrondis dans son canal alpha : plus de couches ni
   de voile à composer en CSS.

   Relevé de son alpha : la bande commence à y30 et les 30 px du dessus sont
   transparents sauf la mèche (x865) et le ruban (x1053-1110), qui ressortent
   du cadre. La bande ne fait donc que 930 px du montage, et la couche image
   doit remonter de 30/930 = 3,226 % de la hauteur de bande.
   Ce décalage n'est exact que parce que .hero tient le rapport 1860/930 : la
   boîte média mesure alors W x (W/2 x 1,03226), soit le rapport 1860/960 du
   montage — `cover` ne rogne rien et le bandeau tombe pile au-dessus du
   bord.
   À 1860 px de large le bandeau mesure ses 30 px et tient dans la marge de
   34 px, comme en maquette. Au-delà il grandit avec le montage (50 px sur une
   fenêtre de 3165) et ses pointes affleurent le haut de page : la maquette
   les y colle déjà, le montage étant lui-même coupé à ras. */
.hero__media {
  position: absolute;
  inset-inline: 0;
  inset-block: -3.226% 0;
  z-index: 0;
  /* Le clip vit ici plutôt que sur .hero : il garantit les coins bas de la
     bande même quand `cover` rogne les côtés sous 1484 px. Ses coins hauts
     arrondissent le bandeau, transparent à cet endroit — sans effet. Les
     coins hauts de la bande, eux, viennent de l'encoche gravée dans l'alpha,
     à travers laquelle on voit le fond navy de .hero, arrondi au bon endroit. */
  overflow: hidden;
  border-radius: inherit;
}

/* <picture> est en ligne par défaut : sans hauteur propre, le `height: 100%`
   de l'image ne se résoudrait sur rien. */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le rognage éventuel se fait par le bas : le débordement du haut est le
     motif, pas une marge perdable. */
  object-position: center top;
}

.hero__content,
.hero__card { position: relative; z-index: 5; }

.hero__logo { display: inline-block; margin-block-end: 40px; }
/* La maquette desktop donne 142x160 sur un canvas de 1920 : le logo était
   posé à la moitié de sa taille. La borne haute vaut la valeur relevée. */
.hero__logo img { width: clamp(96px, 7.4vw, 142px); height: auto; }

.hero__title {
  margin: 0;
  font-size: clamp(40px, 4.2vw, 80px);
  font-weight: var(--fw-black);
  line-height: 1.05;
}

.hero__kicker {
  margin: 32px 0 0;
  font-size: clamp(24px, 1.9vw, 35px);
  font-weight: var(--fw-black);
}

.hero__lead {
  margin: 4px 0 0;
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: var(--fw-black);
}

.hero__sub {
  max-width: 30ch;
  margin: 24px 0 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

/* LA LIGNE SE CASSE ENTRE SES MEMBRES, PAS DEDANS. Sans `flex-wrap`, les trois
   éléments restaient sur une seule ligne et se rétrécissaient : chacun repliait
   son propre texte, ce qui donnait « 97 % de clients / satisfaits, » et
   « découvrez leurs / avis » — deux coupures en plein milieu d'une locution.
   Avec le retour autorisé et les membres rendus insécables, soit tout tient sur
   une ligne, soit le lien passe entier à la suivante. */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0;
  font-size: var(--fs-xl);
}

.hero__proof strong,
.hero__proof-link { white-space: nowrap; }

/* Lien vers le carrousel d'avis. Il garde le blanc du hero — le magenta de
   :where(a) serait illisible sur le navy — et reste souligné pour se
   distinguer sans s'appuyer sur la couleur. Le texte était déjà un item flex
   à lui seul, l'encadrer ne déplace donc rien. */
.hero__proof-link {
  color: inherit;
  text-underline-offset: 4px;
}

.hero__proof-link:hover { text-decoration-thickness: 2px; }

/* Carte de devis du hero — 526 × 622, rayon 20, padding 40 (relevés). */
.hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  border-radius: 20px;
  background: var(--c-white);
  color: var(--c-navy);
  text-align: center;
}

.hero__card-title {
  margin: 0;
  color: var(--c-magenta);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
}

.hero__card-question {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
}

/* Les deux choix reprennent .devis__option de la modale : même composant,
   même rendu sélectionné. Seules les dimensions changent (208 × 185). */
/* LES DEUX COLONNES SONT PLAFONNÉES, PAS FIGÉES. En `repeat(2, 208px)` la
   grille imposait un plancher de 446px, soit 526px avec le padding de
   l'encart : entre 641 et 660px de fenêtre, l'encart ne pouvait plus se
   réduire et débordait de la bande de 8px, entraînant le macaron avec lui.
   `minmax(0, 1fr)` sous un `max-width` de 446 donne exactement les 208px du
   relevé tant qu'il y a la place, et cède proprement en dessous. Le `0` du
   minmax est indispensable : `1fr` seul garde un minimum `auto`, qui aurait
   reproduit le même débordement. */
.hero__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 446px;
}

/* LA HAUTEUR SUIT LA LARGEUR, ELLE N'EST PLUS FIGÉE. Le relevé donne des cases
   de 208 x 185 ; en `min-height: 185px` la hauteur restait constante pendant
   que la largeur, elle, suivait l'encart — à 1440 les cases tombaient à
   146 x 185 et devenaient franchement portrait. Le rapport de la maquette est
   donc porté par `aspect-ratio`, et il tient à toutes les largeurs.
   `min-height: 0` pour que le rapport l'emporte ; si le libellé devait déborder
   (police de secours, taille système forcée), la case s'allonge quand même —
   `aspect-ratio` cède devant le contenu, il ne le rogne pas. */
.hero__choices .devis__option-box {
  aspect-ratio: 208 / 185;
  min-height: 0;
  padding: 20px;
}
.hero__choices .devis__option-label { font-size: var(--fs-md); }

/* Macaron fourni en SVG (texte vectorisé) — 200 x 194 @ (1584, 300)
   dans le bloc 1860 x 960, soit left 83,3 % / top 31,25 %. */
/* ANCRÉ À L'ENCART, PAS AU HERO. Tant qu'il était positionné en pourcentage du
   hero alors que l'encart était en pixels fixes, les deux dérivaient l'un par
   rapport à l'autre et le macaron finissait par recouvrir le titre puis la
   question (jusqu'à 70px et 102px de recouvrement à 1280).

   Relevé maquette : macaron 200x194 en (1580, 300), encart 526x622 en
   (1082, 268). Le macaron mord donc de 28px sur le coin haut-droit de
   l'encart — soit 5,32 % de sa largeur — et commence 32px sous son bord haut.
   Exprimés en pourcentage de l'encart, ces rapports tiennent à toutes les
   largeurs, et la morsure (5,32 % de 420px au minimum, soit 22px) reste
   toujours inférieure aux 40px de padding de l'encart : le macaron ne peut
   plus atteindre le texte, quelle que soit la fenêtre. */
.hero__macaron {
  position: absolute;
  inset-block-start: 32px;
  inset-inline-start: 94.68%;
  z-index: 1;
  width: clamp(120px, 38%, 200px);
  height: auto;
}

/* --- Réassurances --------------------------------------------------------- */

.reassurance { padding-block: 60px; }

/* margin-block et non `margin: 0` : le raccourci écraserait le
   `margin-inline: auto` de .shell et décalerait toute la bande à gauche. */
.reassurance__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.reassurance__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--c-plum);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 25px;
  text-align: center;
}

.reassurance__list img { height: 60px; width: auto; }

.reassurance__text {
  display: flex;
  flex-direction: column;
}

.reassurance__list b { font-weight: var(--fw-black); }

/* --- Services ------------------------------------------------------------- */

.services { padding-block: 60px 100px; }

/* L'étoile se pose à droite du titre, décalée vers le bas : relevé à
   (724, 1522) pour un titre calé à (316, 1499) — soit ~24px après le bloc
   et ~90px sous son sommet. Le flex garde ce rapport quelle que soit la
   largeur, l'étoile ne pouvant pas rétrécir. */
.services__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.services__star {
  flex: none;
  width: 70px;
  height: auto;
  margin-block-start: 90px;
}

/* line-height 1.05 sur trois lignes de 80px : la maquette cale les lignes
   à 80px pile, sans interligne additionnel. */
.services__head .section-title { line-height: 1; }

/* CHAQUE CARTE PREND SA PROPRE HAUTEUR. Étirées (`stretch`, le défaut), les
   trois partageaient la hauteur de la plus haute : déplier « voir plus » sur
   l'une gonflait les deux autres, qui se retrouvaient avec un grand vide entre
   leur texte et leur bouton. Or seul le bloc cliqué doit s'ouvrir.
   Le repli reste aligné : à 1440 et au-delà, les trois textes donnent la même
   hauteur naturelle au pixel près (458px), l'étirement n'apportait donc rien.
   En dessous, les retours à la ligne diffèrent et l'écart atteint 27 à 49px —
   préférable au vide que produisait l'étirement. */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 24px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 30px;
  border-radius: 20px;
  background: var(--c-blush);
  text-align: center;
}

.card__title {
  margin: 0;
  color: var(--c-magenta);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}

.card__lead {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.card__text {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
}

/* UN <button>, PAS UN LIEN : il ne mène nulle part, il révèle. Il reprend
   l'aspect du « voir plus » de la maquette — prune, chevron — sans en prendre
   la sémantique, qui promettrait une navigation qui n'existe pas. */
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-plum);
  font: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
}

.card__more:hover .card__more-label { text-decoration: underline; }
.card__more:focus-visible { outline: 2px solid var(--c-magenta); outline-offset: 4px; }

.card__more-chevron { flex: none; transition: transform .2s ease; }
.card__more[aria-expanded="true"] .card__more-chevron { transform: rotate(180deg); }

/* Le contenu déplié garde la gouttière de la carte entre ses paragraphes. */
.card__more-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* INDISPENSABLE : `display: flex` l'emporte sur le `display: none` que la
   feuille du navigateur attache à [hidden], et les trois cartes s'affichaient
   dépliées. Même parade que `.devis__step[hidden]` dans modal.css. */
.card__more-text[hidden] { display: none; }

.card__more-text p { margin: 0; }

/* La chute de chaque bloc — « Un besoin spécifique ? … », « Besoin de
   flexibilité ? … », « Une demande particulière ? … » — passe en gras : c'est
   l'invitation à prendre contact, elle ne doit pas se lire comme la suite du
   descriptif. Même graisse que `.card__lead`, l'autre accroche de la carte.
   Ciblée par `:last-child` : ces blocs sont bâtis en deux paragraphes, le
   descriptif puis la chute. Un troisième paragraphe déplacerait le gras — le
   jour où il en faut un, poser une classe. */
.card__more-text p:last-child { font-weight: var(--fw-semibold); }

/* `margin-block-start: auto` A ÉTÉ RETIRÉ du bouton : il le calait en bas de
   l'espace que l'étirement de la grille laissait libre. Depuis que chaque carte
   prend sa hauteur propre, il n'y a plus d'espace à combler — et c'était
   précisément ce vide qui creusait les cartes non dépliées. */

/* --- Crédit d'impôt -------------------------------------------------------
   Bande 1860 x 743 @ (34, 2692). Le texte démarre à x756, soit 38,8 % de la
   bande : la colonne image n'est donc pas à 50 % comme une grille naïve le
   suggérerait. Macaron 340 x 330 @ (756, 2612) — aligné sur ce bord de
   colonne et débordant de 80px au-dessus. Étoiles 94 x 100 @ (1174, 2770). */

.credit {
  position: relative;
  display: grid;
  grid-template-columns: 38.8% 1fr;
  align-items: center;
  gap: 0;
  margin: 34px;
  padding: 60px 60px 60px 0;
  border-radius: 20px;
  background: var(--c-navy);
  color: var(--c-white);
}

/* L'illustration sort de la bande : le débordement est le motif, pas un
   accident — d'où l'absence d'overflow:hidden sur .credit. */
.credit__illu {
  align-self: end;
  width: 100%;
  max-width: 611px;
  height: auto;
  margin-block-start: -80px;
  margin-inline-start: -34px;
}

.credit__body { max-width: 68ch; }

.credit__badges {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0 0 24px;
}

.credit__macaron {
  width: clamp(180px, 18.3vw, 340px);
  height: auto;
  margin-block-start: -140px;
}

.credit__title {
  margin: 0;
  font-size: clamp(26px, 1.9vw, 35px);
  font-weight: var(--fw-black);
}

.credit__subtitle {
  margin: 8px 0 0;
  color: var(--c-pink-soft);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
}

.credit__text,
.credit__highlight {
  margin: 24px 0 0;
  font-size: var(--fs-xl);
  line-height: 1.5;
}

.credit__text { font-weight: var(--fw-semibold); }
.credit__highlight { font-weight: var(--fw-black); }
.credit .btn { margin-block-start: 32px; }

/* --- Blocs texte / image -------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  padding-block: 100px;
}

/* Sans min-width:0, une colonne de grille ne descend pas sous la largeur
   intrinsèque de son image : la colonne texte se retrouve écrasée et les
   titres cassent au mauvais endroit. */
.split > *,
.credit > * { min-width: 0; }

/* --- Bloc qualité : l'illustration file jusqu'au bord de page --------------
   Relevé sur une planche de 1928 de large (shell 1296, de x316 à x1612) :
   l'illustration occupe x776 -> x2076, donc elle sort de la shell de 464px et
   même de la planche. L'export Figma est coupé au bord de planche : 1148 px de
   large = 1928 - 780. Ses 200 premières colonnes sont transparentes, la photo
   ne commence qu'à x976 — c'est ce vide qui sert de gouttière, et l'étincelle
   s'y pose à cheval sur le texte.
   Colonnes : texte 316->970 (654) puis média 970->bord de page. */
.split--wide {
  grid-template-columns: 654fr 642fr;
  gap: 0;
}

.split__media {
  position: relative;
}

.split--wide .split__media {
  /* La colonne s'étend de sa fin de shell jusqu'au bord droit de la fenêtre,
     là où la maquette colle l'illustration. La marge extérieure de la shell
     est celle de .shell : min(1296px, 100% - 68px), donc 34px au minimum. */
  display: flex;
  justify-content: flex-end;
  margin-inline-end: calc(-1 * max(34px, (100cqw - 1296px) / 2));
}

/* 1148 / 958 = 119,8 % de la colonne média : le montage garde son cadrage de
   maquette, bord droit collé au bord de page, et empiète à gauche sur la
   colonne texte par sa partie transparente. En % et non en px pour que le
   cadrage tienne à toute largeur. `max-width` l'empêche d'être agrandi
   au-delà de son échelle natale sur les très grands écrans. */
.split__illu {
  position: relative;
  flex: none;
  width: 119.8%;
  max-width: 1148px;
}

/* --- Bloc proximité : même mécanique, débordement à gauche -----------------
   Relevé : l'illustration occupe x-146 -> x1075 (1221 x 1072), elle sort donc
   de la planche à gauche. L'export Figma est coupé au bord de page : 1071 px
   de large = 1924 - 853... plus simplement, il couvre x4 -> x1075, soit du
   bord gauche de la page (le blanc de la planche commence à x4) jusqu'à 33 px
   après le début du texte. Ses 124 dernières colonnes sont transparentes :
   c'est la gouttière, et le texte passe dessous.
   Colonnes : média bord de page -> 1042, puis texte 1042 -> 1612 (570).
   Pas de marge basse : le bloc rose des avis démarre exactement où finit
   l'illustration (y5948 des deux côtés). Les 100 px du haut restent — avec
   ceux du bloc qualité, ils font les 200 px qui séparent les deux images. */
.split--wide-rev {
  grid-template-columns: 726fr 570fr;
  padding-block-end: 0;
}

.split--wide-rev .split__media {
  order: -1;
  justify-content: flex-start;
  margin-inline-start: calc(-1 * max(34px, (100cqw - 1296px) / 2));
  margin-inline-end: 0;
}

/* 1071 / 1038 = 103,2 % de la colonne média (1038 = 1042 - 4). */
.split--wide-rev .split__illu {
  width: 103.2%;
  max-width: 1071px;
}

/* Ciblé sur le premier enfant seulement : sans ça, `.split__illu img` (0,1,1)
   l'emporterait sur `.split__illu-star` (0,1,0) et l'étoile s'étalerait. */
.split__illu > img:first-child { width: 100%; height: auto; }

/* Étoile 3 de la planche, 81 x 70 @ (1164, 4160) : extraite de la planche car
   absente du montage. Positionnée en % du montage lui-même — l'illustration
   étant le conteneur, pas la colonne. */
.split__illu-star {
  position: absolute;
  inset-block-start: 52.7%;
  inset-inline-start: 33.4%;
  width: 7.06%;
  height: auto;
}

/* Étoile 4 de la planche, 82 x 70 @ (534, 5070), dans un montage qui couvre
   x4 -> x1075 et y4876 -> y5948. */
.split--wide-rev .split__illu-star {
  inset-block-start: 18.1%;
  inset-inline-start: 49.5%;
  width: 7.66%;
}

.split__body p {
  margin: 24px 0 0;
  font-size: var(--fs-xl);
  line-height: 1.5;
}

.split__body strong { font-weight: var(--fw-semibold); }

/* Figma pose sur ces deux intertitres un contour de 8px #F7E9EE (relevé :
   stroke="#F7E9EE" stroke-width="8" sur le <text>), soit un halo de 4px
   au-dehors du glyphe. `paint-order` est indispensable : sans lui le contour
   se peint par-dessus le remplissage et ronge la lettre. */
.split__heading {
  margin: 40px 0 0;
  font-size: clamp(26px, 2.1vw, 40px);
  font-weight: var(--fw-black);
  -webkit-text-stroke: 8px var(--c-blush);
  paint-order: stroke fill;
}

.split .btn { margin-block-start: 32px; }

.ticks {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

/* Puce : ce n'est pas une coche mais l'étincelle rose. Relevé de chaque item
   (Etoiles_5 à Etoiles_13) : deux paths #F191B6 de 36 et 28 commandes, soit
   la signature exacte de etoiles.svg (40 x 38). Fond CSS plutôt qu'un <img>
   par ligne : une seule requête pour les neuf puces des deux sections.
   Le retrait vaut 52px et non les 40px du relevé (texte à x356 pour un bloc
   à x316) : la maquette ne laisse quasi pas d'air entre l'étincelle et le
   texte, on en ajoute 12px. L'étincelle reste calée à 0, donc la colonne des
   puces garde son alignement sur les paragraphes au-dessus. */
.ticks li {
  padding-inline-start: 52px;
  background: url("../icons/etoiles.svg") no-repeat 0 center / 40px 38px;
  font-size: var(--fs-xl);
  line-height: 40px;
}

/* --- Avis ----------------------------------------------------------------- */

/* Le rose n'est pas une bande pleine largeur : la maquette pose un bloc
   #F090B5 collé au bord gauche (path « Rectangle » : x4 -> x622, y5948 ->
   y7174, seul le coin bas-droit arrondi de 20). Il commence à la fin de
   l'illustration de proximité et s'arrête au CTA des chiffres — soit, ici,
   exactement les bords de la section. Le titre le déborde, les cartes se
   posent dessus.
   Rythme relevé : 232 au-dessus de l'étoile, 80 entre le titre et les cartes,
   40 avant les flèches, 150 en dessous (total 1226 = la hauteur du bloc). */
.reviews {
  position: relative;
  padding-block: 232px 150px;
  /* Cible de l'ancre #avis : la barre collante, révélée dès que le hero sort
     du champ, occupe les 80 px du haut — le bord du bloc rose s'arrête juste
     dessous. */
  scroll-margin-block-start: 80px;
}

.reviews::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: -1;
  /* Le bord droit du bloc tombe 306 px après le début de la shell (622 - 316) :
     exprimé ainsi, il garde ce rapport au texte à toute largeur, au lieu de se
     décrocher à gauche sur les grands écrans. */
  width: calc(max(34px, (100cqw - 1296px) / 2) + 306px);
  border-end-end-radius: 20px;
  background: var(--c-pink-soft);
}

/* Étoile 5 de la planche (91 x 70 @ 584,6180) : 268 px après le bord de shell,
   posée juste au-dessus de la casse haute du « 97% ». */
.reviews__star {
  display: block;
  margin-inline-start: 268px;
}

.reviews__title {
  margin: 0 0 80px;
  color: var(--c-plum);
  line-height: 1;
}

.reviews__pct {
  display: block;
  font-size: clamp(56px, 6.3vw, 120px);
  font-weight: var(--fw-black);
}

.reviews__label {
  display: block;
  font-size: clamp(38px, 4.2vw, 80px);
  font-weight: var(--fw-black);
}

/* 4 cartes de 416 dépassent la trame de 1296 : c'est un carrousel dans la
   maquette, rendu ici par un défilement horizontal natif. */
.reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 416px;
  gap: 24px;
  margin: 0;
  padding: 0 max(34px, calc((100% - 1296px) / 2));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sans scroll-padding, l'ancrage obligatoire aligne dès le chargement la
     première carte sur le bord du scrollport : la gouttière de gauche est
     avalée et les cartes ne sont plus alignées sous le titre. */
  scroll-padding-inline-start: max(34px, calc((100% - 1296px) / 2));
  /* Barre masquée : la maquette ne la montre pas et la navigation passe par
     les deux flèches. Le défilement reste natif — molette, tactile, et clavier
     grâce au tabindex de la liste. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reviews__track::-webkit-scrollbar { display: none; }

.review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 416px;
  /* Carte 416 x 416 : texte à x356 pour une carte à x316, étoiles à 30 du
     haut, dernière ligne de méta à 38 du bas. */
  padding: 30px 40px;
  border-radius: 20px;
  background: var(--c-blush);
  scroll-snap-align: start;
}

.review h3 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
}

.review p { margin: 0; font-size: var(--fs-xl); line-height: 1.4; }

.review__meta {
  margin-block-start: auto !important;
  color: var(--c-plum);
  font-size: var(--fs-lg) !important;
  text-transform: uppercase;
}

/* Navigation du carrousel : sous les cartes et calée à gauche, comme le
   groupe « Indicateurs » de la maquette — deux pastilles 66 x 40 (r20) en
   #7D1B54 à x316 et x402, flèche blanche de 26 x 19 au centre. */
.reviews__nav {
  display: flex;
  gap: 20px;
  margin-block-start: 40px;
}

.reviews__arrow {
  display: grid;
  place-items: center;
  width: 66px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--c-plum);
  color: var(--c-white);
}

.reviews__arrow:hover { background: var(--c-magenta); }
.reviews__arrow[disabled] { opacity: .4; cursor: default; }

/* --- Chiffres ------------------------------------------------------------- */

/* Le CTA démarre pile où s'arrête le bloc rose des avis (y7174) : pas de
   marge haute. z-index pour que le gant, qui mord de 48 px sur le pied de
   page, passe par-dessus le bandeau navy comme dans la maquette. */
.figures {
  position: relative;
  z-index: 1;
  padding-block: 0 100px;
}

/* Le bloc CTA + chiffres n'est pas centré dans la page : la maquette le pousse
   à droite pour libérer la moitié gauche, occupée par le gant. Centres relevés
   à x1045 et x1513, CTA centré sur x1285 — soit un bloc de 936 aligné à droite.
   Écart assumé : la maquette le laisse dépasser de 134 px hors de la shell,
   on le garde dedans pour ne pas créer de débordement horizontal. */
.figures__col {
  max-width: 936px;
  margin-inline-start: auto;
  text-align: center;
}

/* Relevé : lignes à y7441 et y7651 (pas de 210), libellé 53 sous le chiffre. */
.figures__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 90px 0;
  margin: 150px 0 0;
  padding: 0;
  list-style: none;
}

.figures__grid li { display: flex; flex-direction: column; gap: 20px; }

/* Relevé : fill #F7E9EE + stroke #CE3480 de 12 px. L'export SVG ne dit pas
   l'alignement du contour, mais le rendu Figma le trahit : sur « 55 », les
   plages blush font 37 à 44 px alors qu'un contour centré peint par-dessus
   n'en laisserait que 33, et l'espace de « 15 000 » reste blanc — le magenta
   ne grandit donc que d'environ 6 px vers l'extérieur et ne ronge pas
   l'intérieur. C'est un contour peint DERRIÈRE le remplissage, comme pour
   .split__heading. Sans `paint-order`, les 12 px mangeaient les contreformes
   et soudaient « 23 » et « 55 ». En em pour suivre la taille fluide. */
.figures__grid b {
  color: var(--c-blush);
  font-size: clamp(48px, 4.2vw, 80px);
  font-weight: var(--fw-black);
  line-height: 1;
  -webkit-text-stroke: .15em var(--c-magenta);
  paint-order: stroke fill;
}

.figures__grid span {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

/* Gant : 666 x 750 collé au bord gauche de la page (@4,7110). Il déborde en
   haut sur le bloc rose des avis et en bas de 48 px sur le pied de page. */
/* LE GANT SUIT LA GRILLE, IL N'EST PLUS FIGÉ. En 666px fixes il gardait sa
   taille pendant que la colonne des chiffres, elle, se décalait vers la
   gauche : il recouvrait « 23 / ans de savoir-faire » et « 1 800 /
   intervenants » de 162px à 1600, 242px à 1440 et 371px à 1280 — le « 23 »
   disparaissait presque entièrement derrière le chiffon.

   Même nature de défaut que le hero : un décor en pixels dans une trame qui
   se resserre. La largeur est donc bornée par la position réelle du bord
   gauche de la colonne, calculée dans les deux régimes de `.shell` :
     - au-delà de 1364px la shell est bloquée à 1296, la colonne commence à
       50cqw - 288 ;
     - en deçà elle vaut 100% - 68, la colonne commence à 100cqw - 970.
   `min()` retient le plus contraignant des trois, donc le décor s'arrête
   toujours avant le texte. `cqw` et non `vw` : la référence est la largeur de
   mise en page, cf. le container posé sur <main>. */
.figures__deco {
  position: absolute;
  inset-block-end: -48px;
  inset-inline-start: 0;
  width: min(666px, 50cqw - 288px, 100cqw - 970px);
  height: auto;
}

/* --- Pied de page --------------------------------------------------------- */

/* Bandeau de 160 px dans la maquette : les trois mentions s'y suivent au pas
   de 20 px, sans interligne supplémentaire entre paragraphes (7847, 7867,
   7887, 7907), puis le copyright à 7948. */
/* EMPILÉ AU-DESSUS DU DÉCOR. `.figures__deco` déborde volontairement de 48px
   sous sa section pour que le gant morde sur le pied de page ; sans contexte
   d'empilement ici, il passait par-dessus et masquait le début de la première
   ligne de mentions. Le décor reste, il passe simplement dessous. */
.site-footer {
  position: relative;
  z-index: 2;
  padding-block: 26px 20px;
  background: var(--c-navy);
  color: var(--c-white);
}

.site-footer__legal {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.site-footer__copy {
  margin: 21px 0 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.site-footer a { color: var(--c-white); }

/* ==========================================================================
   Responsive — dérivé du desktop : seul le hero est maquetté en mobile.
   ========================================================================== */

@media (max-width: 1280px) {
  /* RÉSERVE ASYMÉTRIQUE, ET C'EST VOULU. La maquette garde 282px à droite pour
     y loger le débordement du macaron ; à 60px de chaque côté il ne restait que
     9px de garde entre le badge et lui, et le macaron tombait de 152 à 100px au
     passage du palier. Les 40px rendus à droite rachètent l'un et l'autre, et la
     colonne de texte, qui dispose ici de plus de 50 % de la bande, les cède sans
     dommage. */
  .hero { padding-inline: 60px 100px; }

  /* Sous 1281 la formule ci-dessus ne laisserait au gant que 310px et moins :
     un chiffon minuscule collé au bord se lit mal. Il s'efface, comme il le
     fait déjà sous 1024. C'est un décor, les chiffres sont le contenu. */
  .figures__deco { display: none; }

  /* SOUS 1281 IL N'Y A PLUS LES 282px DE RÉSERVE de la maquette pour héberger
     le débordement du macaron : le suivre à la lettre le ferait sortir de la
     bande de 77px, donc de la page.

     LE FAIRE REMONTER AU-DESSUS DE L'ENCART NE MARCHE PAS NON PLUS — c'était la
     version précédente : l'encart ne commence qu'à 60px du haut de la bande, si
     bien qu'un macaron de 116px posé au-dessus dépassait de 16px par le haut et
     flottait sur le blanc de la page, détaché de tout. Sous 1024, où la bande
     est en `overflow: hidden`, il était même tranché.

     Il garde donc la position de la maquette — calé sur le bord haut de
     l'encart, débordant à droite — avec des cotes ajustées à la place réelle :
     l'encart mesure 400px, le badge 282, il reste donc 59px libres à sa droite.
     Un macaron de 100px qui déborde de 50px n'en mord que 50 : 9px de garde sur
     le badge, et les 50px de débord tiennent dans les 60px de padding du hero. */
  .hero__macaron {
    /* Remonté de 40px : son bas s'arrête à 86px du haut de l'encart, soit juste
       avant le titre qui commence à 90. Il ne croise donc plus que le badge, à
       19px de garde. Sans ce décalage il effleurait le titre à 0px. */
    inset-block-start: -40px;
    inset-inline-start: auto;
    inset-inline-end: -90px;
    width: 130px;
  }
  .reassurance__list { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    /* En colonne unique le contenu impose la hauteur : le rapport de la
       maquette n'a plus de sens et `cover` rogne les côtés. */
    aspect-ratio: auto;
    padding: 40px;
    /* La maquette mobile (B2C - Mobile) montre la bande à ras des bords, sans
       débordement : la bande y étant très haute, le bandeau grandirait à ~45 px
       pour une marge de 12, et ses pointes seraient tranchées par le haut de
       page. On le referme donc. */
    overflow: hidden;
  }
  .hero__card { align-self: stretch; }

  /* En colonne unique, l'encart s'étire sur toute la bande et son titre occupe
     presque toute la largeur : à 641px il ne reste que 47px de dégagement de
     chaque côté, moins que la morsure du macaron. Celui-ci passe donc au COIN
     BAS DROIT, où le bouton — 185px — en laisse 146. Le padding du hero étant
     tombé à 40px, le débord se resserre à 30. */
  .hero__macaron {
    inset-block-start: auto;
    inset-block-end: -20px;
    inset-inline-end: -30px;
  }
  .services__grid { grid-template-columns: 1fr; }
  .credit,
  .split { grid-template-columns: 1fr; gap: 40px; padding-block: 60px; }
  .credit { padding: 40px; margin:20px; margin-top:0px; }
  /* L'illustration cesse de déborder une fois la bande en colonne unique. */
  .credit__illu {
    justify-self: center;
    max-width: 380px;
    margin-block-start: 0;
    margin-inline-start: 0;
  }
  /* En colonne unique l'illustration rentre dans la shell : plus de
     débordement jusqu'au bord de page, plus de largeur à 119,8 % ni 103,2 %. */
  .split--wide .split__media,
  .split--wide-rev .split__media {
    order: 0;
    justify-content: center;
    margin-inline: 0;
  }
  .split--wide .split__illu,
  .split--wide-rev .split__illu { width: 100%; }
  /* Le bloc rose n'a plus de moitié gauche à occuper : il redevient une bande. */
  .reviews { padding-block: 60px; }
  .reviews::before { width: 100%; border-radius: 0; }
  .reviews__star { margin-inline-start: 0; }
  .figures { padding-block: 60px; }
  .figures__col { max-width: none; }
  .figures__grid { gap: 60px 40px; margin-block-start: 60px; }
  .figures__deco { display: none; }
  .split__illu{
    display:none;
  }
  .shell{
    padding-top:0;
  }
}

@media (max-width: 640px) {
  .shell { width: min(1296px, 100% - 40px); }
  .hero { margin: 12px; padding: 24px; }
  .hero__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  /* Sous 641px l'encart devient trop étroit pour que le macaron tienne en haut
     à droite : le badge n'y garde que 63px de dégagement, moins que la morsure.
     Il passe donc au COIN BAS DROIT, où le bouton, plus court, en laisse 112.
     Le débord de 12px reste dans les 24px de padding du hero. */
  .hero__macaron {
    inset-block-start: auto;
    inset-block-end: -20px;
    inset-inline-end: -12px;
    width: 96px;
  }
  /* En colonne unique le macaron reprend le flux : plus de remontée
     négative, qui le ferait sortir de la bande. */
  .credit__macaron { width: 160px; margin-block-start: 0; }
  .credit__badges { gap: 20px; }
  .reassurance__list { grid-template-columns: repeat(2, 1fr); }
  .reviews__track {
    grid-auto-columns: min(335px, 85vw);
    padding-inline: 20px;
    scroll-padding-inline-start: 20px;
  }
  .figures__grid { grid-template-columns: 1fr; gap: 40px; }
  .sticky-cta { height: auto; padding-block: 12px; }
  .sticky-cta__inner { flex-direction: column; gap: 12px; }
  .sticky-cta__text { font-size: var(--fs-base); }
}


/* --- Téléphone : hero et barre d'appel de la planche « B2C - Mobile » ------
   Seul le hero est maquetté en mobile ; tout ce qui suit vient donc du relevé
   de cette planche (page de 375 px commençant à x4), le reste de la page
   gardant les paliers ci-dessus.

   Écart de fond avec le bureau : la bande passe pleine largeur sans marge ni
   rayon, la photo n'occupe plus que le haut, une barre d'appel est ancrée en
   bas d'écran dès le premier écran, et la ligne « 97 % de clients satisfaits »
   n'est pas reprise.

   LA CARTE DE DEVIS NE DISPARAÎT PLUS : elle sort de la bande et devient la
   section formulaire autonome que montre la planche, juste sous le hero. Le
   macaron « 50 % », lui, reste dans la bande. Ce sont les mêmes éléments qu'en
   bureau, déplacés par landing.js — pas des copies : dupliquer le formulaire
   dupliquerait aussi les `id` de ses boutons radio et le câblage du tunnel.

   `--k` porte l'échelle : `100vw / 375` vaut 1 px sur la largeur de la
   planche et s'étire proportionnellement ailleurs. Chaque cote relevée
   s'écrit donc `calc(N * var(--k))`, et la bande garde le cadrage exact du
   montage sur n'importe quel téléphone. Palier à 480 px : au-delà, cet
   homothétique donnerait des titres démesurés, et la mise en page de tablette
   reprend la main. */
@media (max-width: 480px) {
  :root { --k: calc(100vw / 375); }

  body { padding-block-end: calc(80 * var(--k)); }

  .hero {
    /* Relevé : bande 375 x 1000 à ras des bords, texte à 24 du bord gauche et
       logo à 20 du haut. `min-height` plutôt que `aspect-ratio` : si le texte
       devait déborder (police de secours, taille système forcée), la bande
       s'allonge au lieu de rogner.
       1104 ET NON 1000 : les 104px du bas reçoivent le macaron, que la planche
       pose à cheval sur le dégradé. Le montage, lui, garde ses 1000px et reste
       calé en haut — l'étirer en `cover` sur 1104 rognerait 39px sur les côtés
       et couperait le visage. */
    align-items: start;
    min-height: calc(1104 * var(--k));
    margin: 0;
    padding: calc(20 * var(--k)) calc(24 * var(--k));
    border-radius: 0;
  }

  /* Le montage mobile n'a ni bandeau débordant ni coins arrondis : la couche
     image occupe le haut de la bande, sur ses 1000px d'origine. Les 104px
     restants laissent voir le fond navy de `.hero` : la dernière ligne de
     pixels du montage vaut rgb(34,23,90), soit ce navy à une unité près, la
     jonction ne se voit pas. */
  .hero__media {
    inset: 0 auto auto 0;
    width: 100%;
    height: calc(1000 * var(--k));
    border-radius: 0;
  }

  /* Bloc en ligne : sa ligne de base laisserait un jour sous le logo, que le
     relevé ne connaît pas. `fit-content` garde la zone cliquable sur l'image. */
  .hero__logo {
    display: block;
    width: fit-content;
    /* 200 px de vide entre le logo (bas à y140) et le titre (haut à y340) :
       le visage occupe cette moitié haute de la bande. */
    margin-block-end: calc(200 * var(--k));
  }

  .hero__logo img { width: calc(107 * var(--k)); }

  /* Interlignes en valeurs sans unité pour suivre `--k` : 50/55, 35/33, 35/28
     et 28/18 relevés sur les lignes de base de la planche. */
  .hero__title {
    font-size: calc(55 * var(--k));
    line-height: .909;
  }

  .hero__kicker {
    margin-block-start: calc(40 * var(--k));
    font-size: calc(33 * var(--k));
    line-height: 1.061;
  }

  .hero__lead {
    margin-block-start: calc(5 * var(--k));
    font-size: calc(28 * var(--k));
    line-height: 1.25;
  }

  .hero__sub {
    max-width: none;
    margin-block-start: calc(20 * var(--k));
    font-size: calc(18 * var(--k));
    line-height: 1.556;
  }

  /* Absents de la planche mobile : la preuve sociale, la carte de devis (dont
     le rôle passe à la barre d'appel) et le macaron. */
  .hero__proof { display: none; }

  /* Sortie de la bande par landing.js, la carte devient la section formulaire
     de la planche : 335 de large dans 375, soit 20 de marge de chaque côté. */
  .hero__card {
    margin: calc(20 * var(--k));
    padding: calc(24 * var(--k));
    gap: calc(16 * var(--k));
  }

  /* Le macaron reste dans la bande, à la place que lui donne la planche :
     200 x 194 en (88, 910). */
  .hero__macaron {
    inset-block-start: calc(910 * var(--k));
    inset-inline-start: calc(88 * var(--k));
    inset-inline-end: auto;
    width: calc(200 * var(--k));
  }

  /* Barre d'appel : 80 px collés en bas, une seule pastille prune de
     323 x 48 centrée (26 px de chaque bord), sans la phrase d'accroche.
     L'ombre remonte, la barre n'ayant plus de contenu au-dessus d'elle.
     Son affichage dès le chargement est réglé dans landing.js. */
  .sticky-cta {
    inset-block: auto 0;
    height: calc(80 * var(--k));
    padding-block: 0;
    box-shadow: 0 -2px 12px rgb(34 23 91 / .12);
  }

  .sticky-cta__text { display: none; }

  .sticky-cta .btn {
    width: calc(323 * var(--k));
    min-height: calc(48 * var(--k));
    font-size: calc(18 * var(--k));
  }
}