/* ==========================================================================
   Audit du site, 21 septembre 2026, sur demande.

   Les reprises de l'audit sont écrites ici, dans une seule feuille chargée
   après toutes les autres : elles se lisent d'un bloc, et les règles d'avant,
   plus haut dans styles.css, restent en place le temps du nettoyage.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Global. La barre de navigation s'aligne sur le H1.

   La marque tombait 72 px à droite du titre (le retrait de la barre), et
   encore plus loin une fois la barre défilée (la contraction). Les deux sont
   ramenés à zéro : la marque tombe sur le bord gauche du titre, le bouton sur
   le bord droit de la grille, et la pilule déborde de --marge-pilule autour,
   au repos comme défilée.
   -------------------------------------------------------------------------- */
.entete {
  --retrait-entete: 0px;
  --contraction-entete: 0px;
}


/* --------------------------------------------------------------------------
   Global. L'interligne, en détail final.

   Titres à 1,1 partout (la valeur de Pulsor) sauf les très grands, resserrés
   à 1,05 ; corps courant ouvert à 1,5 au lieu de 1,4, qui serrait les
   paragraphes de plus de deux lignes.
   -------------------------------------------------------------------------- */
:root { --lh-corps: 1.5; }
body { line-height: var(--lh-corps); }
p { line-height: inherit; }
h1 { line-height: 1.05; }
h2 { line-height: 1.08; }
h3, h4 { line-height: 1.15; }


/* --------------------------------------------------------------------------
   Hero. Le titre en deux lignes, à l'essai : « Une acquisition régulière, »
   puis « installée chez vous, en 12 mois. »

   La coupe est écrite dans le balisage (br.hero-coupe). Le corps est borné
   par la colonne : la seconde ligne mesure 13,6 em, le titre prend donc au
   plus la largeur de la colonne divisée par 13,8, et jamais plus que --h1.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .s-hero .pile-bloc { container-type: inline-size; }
  .s-hero h1.hero-h1 {
    max-width: none;
    font-size: min(var(--h1), 100cqi / 13.8);
  }
}


/* Le constat garde son ancien format (colonnes, icône et filet, sans carte),
   sur demande du 21 septembre 2026 : les cartes grises sont retirées. */


/* --------------------------------------------------------------------------
   La méthode. La transition émotionnelle : le titre s'écrit en grand au
   centre de l'écran, puis se réduit à sa taille de H2 en remontant. site.js
   pose --titre-echelle ; l'échelle part du centre, le point que le décalage
   vise, donc les deux ne se contrarient pas.
   -------------------------------------------------------------------------- */
.piliers[data-arme] .piliers-tete h2 {
  scale: var(--titre-echelle, 1);
  transform-origin: 50% 50%;
}
@media (max-width: 1023px) {
  .piliers-coupe { display: none; }
}

/* Le paragraphe du deck, entre la loi et les coches. */
.pilier-dit {
  margin: 0;
  color: var(--gris-lisible);
  font-size: var(--corps);
  line-height: 1.5;
  max-width: var(--mesure-incise);
}

/* Les trois illustrations redessinées de la méthode (Cadrer, Valoriser,
   Centraliser), 21 septembre 2026 : une seule interface claire chacune, à la
   manière de Capter. Le texte courant des illustrations prend ce corps. */
.ill .ill-ligne { font-family: var(--font-corps); font-size: 12.5px; fill: var(--noir); letter-spacing: -.01em; }


/* --------------------------------------------------------------------------
   L'opportunité. Le titre descend d'un cran, sur demande (« réduire la
   taille ») : entre le H3 et le H2. Le coût du lead, venu de la section
   supprimée, se pose sous les atouts, titre en H3 et ses deux courbes.
   -------------------------------------------------------------------------- */
#opportunite .opp-h2 {
  font-size: clamp(var(--h4), 3.2vw, calc(var(--u) * 2.75));
  max-width: 26ch;
}
.opp-cout { display: flex; flex-direction: column; gap: var(--rythme-intra); }
#opportunite .pile-bloc > .opp-cout { margin-block-start: var(--rythme-section); }
.opp-cout-titre { font-size: var(--h3); }
.opp-cout .duo { margin-block-start: calc(var(--spacing) * 8); }


/* --------------------------------------------------------------------------
   Signal, juste sous l'opportunité. Le sombre prend toute la largeur de
   l'écran : la marge négative va jusqu'aux bords, la garniture de même
   valeur ramène le contenu sur la grille des autres sections. Plus d'arrondi,
   il n'y a plus de bord à arrondir.
   -------------------------------------------------------------------------- */
#signal.s-signal {
  /* 21 septembre 2026, sur demande : le panneau s'arrête à 20 px des bords
     de l'écran, et reprend ses coins arrondis. */
  --debord-signal: calc(50vw - 50% - var(--barre-defilement, 0px) / 2 - var(--spacing) * 20);
  margin-inline: calc(-1 * var(--debord-signal));
  padding-inline: var(--debord-signal);
  border-radius: var(--r-3xl);
}
/* Le logo dans le titre : à la hauteur des capitales, et hors du dégradé
   découpé (c'est une image, elle se peint telle quelle). */
.signal-h2 { white-space: normal; }
.signal-h2-logo {
  display: inline-block;
  inline-size: auto;
  block-size: .82em;
  vertical-align: -.08em;
  margin-inline: .06em .02em;
}


/* --------------------------------------------------------------------------
   Les résultats, à lire d'un coup d'œil : six tuiles, sans illustration.
   Le chiffre d'abord, le titre, une ligne, et le levier en pied.
   -------------------------------------------------------------------------- */
.res-tuiles {
  list-style: none;
  margin-inline: 0;
  margin-block-end: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--spacing) * 16);
}
.res-tuile {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 8);
  padding: calc(var(--spacing) * 28);
  border-radius: var(--r-xl);
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .06);
  box-shadow: var(--ombre-carte);
}
.res-tuile > * { margin: 0; }
.res-tuile-chiffre {
  font-family: var(--font-titre);
  font-weight: var(--graisse-titre, 700);
  font-size: var(--h3);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--noir);
}
.res-tuile-unite {
  font-family: var(--font-corps);
  font-weight: 500;
  font-size: var(--corps-sm);
  letter-spacing: -.01em;
  color: var(--gris-lisible);
}
.res-tuile-titre { font-size: var(--h5); margin-block-start: calc(var(--spacing) * 12) !important; }
.res-tuile-texte { color: var(--gris-lisible); font-size: var(--corps-sm); line-height: 1.45; }
@media (max-width: 1023px) { .res-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .res-tuiles { grid-template-columns: minmax(0, 1fr); } }


/* --------------------------------------------------------------------------
   L'éligibilité, en couleur (audit du 21 septembre 2026, « mettre de la
   couleur »). Les trois conditions prennent une teinte du dégradé du site et
   une tuile d'icône en dégradé plein ; le verdict oppose un noir (ce qui
   exclut) et le dégradé approfondi du site (ce qu'on attend). Contrastes :
   blanc sur #1C1C1C 17 pour 1, blanc sur l'extrémité claire du dégradé
   approfondi (#0A5FB0) 6,3 pour 1.
   -------------------------------------------------------------------------- */
#offre .cond-carte {
  background:
    linear-gradient(160deg, rgb(102 71 240 / .10), rgb(0 145 255 / .08)),
    var(--blanc);
  border-color: rgb(102 71 240 / .18);
}
/* La tuile d'icône du design system : surface blanche, liseré, icône
   coolicons à l'encre, ombre de base (sur demande, 21 septembre 2026). */
#offre .cond-tete .cond-icone.cond-icone {
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .08);
  box-shadow: var(--ombre-carte);
  color: var(--noir);
}
#offre .cond-texte {
  margin: 0;
  max-width: 34ch;
  margin-inline: auto;
  color: var(--gris-lisible);
  font-size: var(--corps-sm);
  line-height: 1.5;
}
#offre .verdict.verdict {
  padding: calc(var(--spacing) * 32);
  border-radius: var(--r-xl);
  color: var(--blanc);
}
/* Les deux verdicts, sur demande : cartes blanches, texte à l'encre, et la
   couleur ne passe que par les icônes. Croix au rouge Danger 700 du design
   system, coches au bleu du système : ce sont des éléments graphiques, le
   seuil est 3 pour 1, et les deux le tiennent sur blanc (3,9 et 3,3). */
#offre .verdict.verdict { background: var(--blanc); box-shadow: var(--ombre-carte); }
#offre .verdict .cond-titre,
#offre .verdict .verdict-liste li,
#offre .verdict .verdict-liste li > :not(.verdict-marque) { color: var(--noir); }
#offre .verdict-dehors { --verdict-teinte: #EC2D30; }
#offre .verdict-attendu { --verdict-teinte: #0091FF; }
#offre .verdict .cond-tete .cond-icone.cond-icone {
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .08);
  color: var(--verdict-teinte);
}
#offre .verdict .verdict-marque.verdict-marque {
  color: var(--verdict-teinte);
  border-color: color-mix(in srgb, var(--verdict-teinte) 30%, transparent);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   L'étude de cas, refaite. Récit en trois temps à gauche, vraie capture à
   droite, puis les quatre chiffres en rangée, à poids égal.
   -------------------------------------------------------------------------- */
.cas2 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: calc(var(--spacing) * 48);
  align-items: center;
}
.cas2-client { display: flex; align-items: center; gap: calc(var(--spacing) * 14); }
.cas2-monogramme {
  display: grid; place-items: center;
  inline-size: 48px; block-size: 48px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #F76808, #F5B400);
  color: var(--blanc);
  font-family: var(--font-titre); font-weight: 700; font-size: 22px;
}
.cas2-nom { margin: 0; font-weight: 600; font-size: var(--text-l); color: var(--noir); }
.cas2-metier { margin: 0; font-size: var(--corps-sm); color: var(--gris-lisible); }
.cas2-etapes {
  list-style: none; margin: calc(var(--spacing) * 32) 0 0; padding: 0;
  display: flex; flex-direction: column;
}
.cas2-etape {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--spacing) * 16);
  padding-block: calc(var(--spacing) * 20);
  border-top: 1px solid var(--gris-grille);
}
.cas2-etape:last-child { border-bottom: 1px solid var(--gris-grille); }
.cas2-num { font-family: var(--font-mono); font-size: var(--legende); color: #4A30CF; padding-top: .2em; }
.cas2-titre { font-size: var(--h5); margin: 0 0 calc(var(--spacing) * 6) !important; }
.cas2-texte { margin: 0; color: var(--gris-lisible); font-size: var(--corps-sm); line-height: 1.5; }
.cas2-visuel {
  grid-column: auto; grid-row: auto;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  box-shadow: var(--ombre-carte);
}
/* Les quatre chiffres, sur demande du 21 septembre 2026 : un contour seul,
   sans fond ni ombre (filet de grille, rayon 24), le
   chiffre au corps H3 du titre, le libellé en mono capitales. Poids
   strictement égal : une rangée de quatre, et une colonne sur téléphone,
   jamais deux rangées de deux. */
.cas-v2 .cas2-chiffres {
  grid-column: auto; grid-row: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--spacing) * 16);
  margin-block-start: var(--rythme-bloc);
}
.cas-v2 .cas2-chiffres .cas-chiffre {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 16);
  padding: calc(var(--spacing) * 24);
  container-type: inline-size;
  border-radius: var(--r-xl);
  background: none;
  border: 1px solid var(--gris-grille);
  box-shadow: none;
}
.cas-v2 .cas2-chiffres .stat-valeur {
  font-family: var(--font-titre);
  font-weight: var(--graisse-titre, 700);
  /* Borné par la tuile : « +10 000 € » débordait de 6 px à 872 px. Les
     quatre tuiles ont la même largeur, donc le même corps. */
  font-size: min(var(--h3), 20cqi);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--noir);
  white-space: nowrap;
}
.cas-v2 .cas2-chiffres .stat-libelle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgb(28 28 28 / .64);
}
@media (max-width: 1023px) {
  .cas2 { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 32); }
}
@media (max-width: 767px) {
  .cas-v2 .cas2-chiffres { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   Nos industries : six cartes simples, sans surcharge. Une tuile d'icône,
   un titre, une ligne.
   -------------------------------------------------------------------------- */
.industries {
  list-style: none; margin-inline: 0; margin-block-end: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--spacing) * 16);
}
.industrie {
  display: flex; flex-direction: column; gap: calc(var(--spacing) * 12);
  padding: calc(var(--spacing) * 28);
  border-radius: var(--r-xl);
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .06);
}
.industrie > * { margin: 0 !important; }
.industrie-icone {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgb(102 71 240 / .12), rgb(0 145 255 / .12));
  color: #4A30CF;
}
.industrie-icone svg { inline-size: 22px; block-size: 22px; }
.industrie-titre { font-size: var(--h5); margin-block-start: calc(var(--spacing) * 8) !important; }
.industrie-texte { color: var(--gris-lisible); font-size: var(--corps-sm); line-height: 1.5; }
@media (max-width: 1023px) { .industries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .industries { grid-template-columns: minmax(0, 1fr); } }


/* --------------------------------------------------------------------------
   La FAQ : le H2 et la carte d'appel à gauche, en face des questions ; les
   catégories passent en ligne au-dessus des questions.
   -------------------------------------------------------------------------- */
.faq2 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: calc(var(--spacing) * 56);
  align-items: start;
}
.faq2-tete {
  position: sticky;
  top: calc(var(--spacing) * 112);
  display: flex; flex-direction: column; gap: var(--rythme-bloc);
}
.faq2 .faq-vues,
.faq2 .faq-vues[data-arme] { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 24); }
.faq2 .onglets.onglets-vertical {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  inline-size: fit-content;
}
.faq-appel {
  padding: calc(var(--spacing) * 28);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #4A30CF, #0A5FB0);
  color: var(--blanc);
  display: flex; flex-direction: column; gap: calc(var(--spacing) * 12);
}
.faq-appel > * { margin: 0; }
.faq-appel-titre { font-family: var(--font-titre); font-weight: var(--graisse-titre, 700); font-size: var(--h5); letter-spacing: -.02em; line-height: 1.2; }
.faq-appel-sous { font-size: var(--corps-sm); color: rgb(255 255 255 / .85); }
.faq-appel-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: calc(var(--spacing) * 8); font-size: var(--corps-sm); }
.faq-appel-liste li { display: flex; align-items: center; gap: calc(var(--spacing) * 10); }
.faq-appel-coche { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: rgb(255 255 255 / .18); flex: none; }
.faq-appel-coche svg { inline-size: 14px; block-size: 14px; }
.faq-appel-bouton { align-self: flex-start; margin-block-start: calc(var(--spacing) * 8) !important; }
@media (max-width: 1023px) {
  .faq2 { grid-template-columns: minmax(0, 1fr); gap: var(--rythme-bloc); }
  .faq2-tete { position: static; }
}
.faq2 .onglets.onglets-vertical { border-radius: var(--r-full); align-self: start; }
.faq2 .onglets-vertical .onglet { border-radius: var(--r-full); padding: calc(var(--spacing) * 10) calc(var(--spacing) * 18); }


/* --------------------------------------------------------------------------
   Le formulaire d'éligibilité tient dans un écran (audit du 21 septembre
   2026, « ULTRA IMPORTANT »). Au-delà de 1 024 px : la section prend la
   hauteur de la fenêtre et centre son contenu, les champs de chaque étape
   passent sur deux colonnes, et tout se resserre. Le texte des champs reste à
   16 px, sous lesquels Safari iOS zoome.
   -------------------------------------------------------------------------- */
.prequal-grille2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 14) calc(var(--spacing) * 16);
  align-items: start;
}
@media (max-width: 767px) { .prequal-grille2 { grid-template-columns: minmax(0, 1fr); } }

@media (min-width: 1024px) {
  #rendez-vous.s-prequal {
    min-block-size: 100svh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--spacing) * 92) calc(var(--spacing) * 24);
  }
  #rendez-vous > .conteneur { inline-size: 100%; }
  #rendez-vous .prequal-grille { align-items: center; }
  #rendez-vous .prequal-intro { position: static; gap: calc(var(--spacing) * 16); }
  #rendez-vous .prequal-intro h2 { font-size: clamp(var(--h4), 5.4svh, var(--h2)); }
  #rendez-vous .prequal-intro .chapo { font-size: var(--corps); }
  #rendez-vous .prequal {
    gap: calc(var(--spacing) * 16);
    padding: calc(var(--spacing) * 28);
    max-block-size: calc(100svh - var(--spacing) * 120);
  }
  #rendez-vous .prequal-sous-titre { display: none; }
  #rendez-vous .prequal-titre { font-size: var(--h5); }
  #rendez-vous .prequal-etape { gap: calc(var(--spacing) * 14); }
  #rendez-vous .prequal-champ { gap: calc(var(--spacing) * 6); }
  #rendez-vous .prequal-libelle { font-size: 13px; line-height: 1.3; }
  #rendez-vous .prequal-saisie { padding: calc(var(--spacing) * 9) calc(var(--spacing) * 14); }
  #rendez-vous .prequal-option { min-block-size: 0; padding-block: calc(var(--spacing) * 9); }
  #rendez-vous textarea.prequal-saisie { min-block-size: calc(var(--spacing) * 64); }
  #rendez-vous .prequal-aide { font-size: 12px; margin: 0; }
  #rendez-vous .prequal-consentement { font-size: 12px; line-height: 1.4; }
}


/* --------------------------------------------------------------------------
   Charly se retire en descendant (chatbot.js pose data-retire) et revient en
   remontant. Sous prefers-reduced-motion, la transition est coupée par la
   règle globale : il disparaît et réapparaît sans glisser.
   -------------------------------------------------------------------------- */
.chat-dock .bouton.bouton-contour.chat-pilule {
  transition: translate var(--motion-slow) var(--ease-out), opacity var(--motion-slow) var(--ease-out), color var(--motion-slow) var(--ease-inout);
}
.chat-dock[data-retire]:not([data-ouvert]) .bouton.bouton-contour.chat-pilule {
  translate: 0 calc(100% + var(--spacing) * 40);
  opacity: 0;
  pointer-events: none;
}


/* Le constat reprend le titre de la proposition (la météo), sur demande :
   chaque phrase ouvre sa ligne, comme sur la planche. */
.s-constat .constat-h2 { max-width: none; }
.s-constat .constat-h2 > span:not(.frappe-mot) { display: block; text-wrap: balance; }

/* Les trois temps de l'étude de cas, sans numéro, sur demande : l'intitulé
   passe en petite étiquette au-dessus, le texte prend le corps courant et
   l'encre noire, et un filet vertical au dégradé du site tient la colonne. */
.cas2-etapes { gap: calc(var(--spacing) * 24); }
.cas2-etape.cas2-etape {
  display: block;
  padding: 0 0 0 calc(var(--spacing) * 20);
  border: 0;
  border-inline-start: 2px solid transparent;
  border-image: linear-gradient(180deg, #6647F0, #0091FF) 1;
}
.cas2-etape:last-child { border-bottom: 0; }
.cas2-titre.cas2-titre { margin: 0 0 calc(var(--spacing) * 8) !important; }
.cas2-texte { font-size: var(--corps); line-height: 1.5; color: var(--noir); }


/* --------------------------------------------------------------------------
   Interligne des têtes de section, 21 septembre 2026, sur demande : 16 px
   entre le label et le H2, 24 px entre le H2 et le texte qui le suit. Les
   écarts sont visuels : le H2 porte une garniture de .26em (les jambages du
   dégradé), qu'on retranche de la marge.
   -------------------------------------------------------------------------- */
.pile-intra > .section-nom + :is(h2, h3) { margin-block-start: calc(16px - .26em) !important; }
.pile-intra > :is(h2, h3) { margin-block-end: calc(24px - .26em) !important; }
.pile-intra > :is(h2, h3) + * { margin-block-start: 0 !important; }


/* Nos industries : la tuile d'icône du design system (surface blanche,
   liseré, ombre de base, rayon md), icônes coolicons. Tracé en bleu
   #0091FF, sur demande du 21 septembre 2026 : 3,26:1 sur le blanc,
   au-dessus des 3 exigés d'un élément graphique. */
.industrie-icone {
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .08);
  box-shadow: var(--ombre-carte);
  color: #0091FF;
}


/* La carte d'appel de la FAQ, accordée au design system : une carte claire
   (surface, liseré, ombre de base), l'encre du texte, et le bouton sans son
   halo extérieur. */
.faq-appel {
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .08);
  box-shadow: var(--ombre-carte);
  color: var(--noir);
}
.faq-appel-sous { color: var(--gris-lisible); }
.faq-appel-coche { background: var(--blanc); border: 1px solid rgb(28 28 28 / .12); color: var(--noir); }
.faq-appel .btn-principal.faq-appel-bouton { box-shadow: none; }


/* Le rendez-vous, resserré : le panneau ne cumule plus sa garniture de
   section avec celle du formulaire, et les champs ne passent sur deux
   colonnes que si le formulaire a la place (requête de conteneur). */
.panneau-sombre.rdv-sombre { padding-block: 0; }
@media (min-width: 1024px) {
  #rendez-vous.s-prequal {
    min-block-size: calc(100svh - var(--spacing) * 40);
    padding-block: calc(var(--spacing) * 88) calc(var(--spacing) * 32);
  }
  #rendez-vous .prequal-grille { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
#rendez-vous .prequal { container-type: inline-size; }
.prequal-grille2 { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 480px) {
  .prequal-grille2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Les têtes empilées en flex portent un gap qui s'ajoutait aux 16 et 24 px. */
#rendez-vous .prequal-intro,
.piliers[data-arme] .piliers-tete { gap: 0; }


/* --------------------------------------------------------------------------
   Une seule taille de H3 sur toute la page, 21 septembre 2026, sur demande
   (« trop petit ces H3, accorde la taille ») : le niveau h4 de l'échelle,
   24 px à 1 440, interligne 1,15. Les titres de carte à 16 px et les lois
   des leviers à 32 px s'y rejoignent.
   -------------------------------------------------------------------------- */
main h3,
main h3[class] {
  font-size: var(--h4) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
}
/* Deux colonnes étroites : un libellé peut tenir sur deux lignes, les champs
   s'alignent donc par le bas pour rester sur la même ligne. */
.prequal-grille2 { align-items: end; }
/* Fenêtre basse : le formulaire se resserre encore, pour que l'étape 3, la
   plus longue, tienne aussi à 768 et 800 px de haut. */
@media (min-width: 1024px) and (max-height: 880px) {
  #rendez-vous.s-prequal { padding-block: calc(var(--spacing) * 80) calc(var(--spacing) * 20); }
  #rendez-vous .prequal { padding: calc(var(--spacing) * 22); gap: calc(var(--spacing) * 12); }
  #rendez-vous .prequal-etape { gap: calc(var(--spacing) * 10); }
  #rendez-vous .prequal-grille2 { row-gap: calc(var(--spacing) * 10); }
  #rendez-vous .prequal-champ { gap: calc(var(--spacing) * 4); }
  #rendez-vous .prequal-saisie { padding-block: calc(var(--spacing) * 7); }
  #rendez-vous .prequal-option { padding-block: calc(var(--spacing) * 7); }
  #rendez-vous textarea.prequal-saisie { min-block-size: calc(var(--spacing) * 48); }
}
@media (max-width: 1023px) { .constat-coupe { display: none; } }


/* Le point du label n'apparaît qu'avec son texte, 21 septembre 2026, sur
   demande : tant que le label attend son entrée, le point est masqué ; il
   entre en fondu quand le texte se brouille. */
html[data-apparitions] [data-apparition]:not([data-apparu]).section-nom.section-nom::before { opacity: 0; }
[data-apparition][data-apparu].section-nom.section-nom::before {
  opacity: 1;
  transition: opacity var(--t-base, 400ms) var(--ease-out) var(--app-retard, 0ms);
}


/* L'étude de cas accordée au design system, 21 septembre 2026, sur demande :
   la couleur n'y est plus qu'un événement. Pas de filet en dégradé, des
   séparateurs neutral-150, une tuile d'icône coolicons à l'encre par temps,
   le titre en ink-1 et le texte en ink-2. Le monogramme orange devient une
   tuile neutre. */
.cas2-etapes.cas2-etapes { gap: 0; }
.cas2-etape.cas2-etape {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--spacing) * 16);
  align-items: start;
  padding: calc(var(--spacing) * 20) 0;
  border: 0;
  border-image: none;
  border-top: 1px solid var(--gris-grille);
}
.cas2-etape.cas2-etape:last-child { border-bottom: 1px solid var(--gris-grille); }
.cas2-icone,
.cas2-monogramme.cas2-monogramme {
  display: grid; place-items: center;
  inline-size: 40px; block-size: 40px;
  border-radius: var(--r-md);
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .08);
  box-shadow: var(--ombre-carte);
  color: var(--noir);
}
.cas2-icone svg { inline-size: 20px; block-size: 20px; }
.cas2-icone { color: var(--bleu); }
.cas2-monogramme.cas2-monogramme { inline-size: 48px; block-size: 48px; font-size: 20px; }
.cas2-texte.cas2-texte { font-size: var(--corps-sm); color: rgb(28 28 28 / .64); }
.cas2-monogramme img { inline-size: 30px; block-size: auto; display: block; }

/* La pilule en tête des trois conditions passe en verre, sur demande :
   blanc translucide et flou d'arrière-plan (25 px, la valeur de la classe
   verre), pour laisser voir les couleurs de la carte derrière. Le titre à
   l'encre y garde plus de 12 pour 1. */
#offre .cond-carte .cond-tete.cond-tete {
  background: rgb(255 255 255 / .3);
  -webkit-backdrop-filter: blur(25px) saturate(1.4);
  backdrop-filter: blur(25px) saturate(1.4);
  border-color: rgb(255 255 255 / .7);
}
#offre .cond-carte .cond-tete .cond-icone.cond-icone {
  background: rgb(255 255 255 / .45);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}

/* Le logo d'Eliance seul, sans la tuile, sur demande. */
.cas2-monogramme.cas2-monogramme.cas2-monogramme {
  background: none;
  border: 0;
  box-shadow: none;
  inline-size: auto;
  block-size: auto;
}
.cas2-monogramme.cas2-monogramme img { inline-size: 40px; }

/* Éligibilité, 21 septembre 2026, sur demande : le titre de section passe en
   H2, les titres de carte passent donc de H4 à H3 pour que la hiérarchie ne
   saute pas. Ils gardent leur taille d'avant, que la taille unique des H3
   ci-dessus écraserait : 16 px dans les cartes, 24 px sur les verdicts. */
main .cond-tete .cond-titre { font-size: var(--text-m) !important; line-height: 1.25 !important; }
main .verdict .cond-tete .cond-titre { font-size: var(--titre-sm) !important; line-height: var(--lh-titre) !important; }

/* Éligibilité, 21 septembre 2026, sur demande (« bg blanc, enlève le
   dégradé ») : les deux lueurs du dégradé de site sortent, le fond est un
   blanc plein, même emprise (20 px des bords) et même rayon qu'avant. */
.eligibilite::before { background: var(--blanc) !important; }

/* Éligibilité, 21 septembre 2026, sur demande (« retire le bg de la
   section ») : le panneau blanc sort, les cartes se posent sur la page. */
.eligibilite::before { content: none !important; }

/* Les marques des verdicts, sur demande (« aligne les check ») : centrées sur
   la première ligne de leur texte, et non plus posées 2 px sous son haut. Le
   centre se calcule sur la hauteur de ligne, il tient donc si le texte casse. */
#offre .verdict .verdict-marque.verdict-marque {
  margin-block-start: calc((1lh - var(--spacing) * 20) / 2);
  /* Sur demande (« aligne toutes les icônes ») : la marque de 20 px se centre
     sous le rond de 40 px de l'en-tête, soit 10 px de retrait. */
  margin-inline-start: calc(var(--spacing) * 10);
}


/* --------------------------------------------------------------------------
   Ce que financent les 18 000 € (07e), 21 septembre 2026, sur demande :
   d'après « Valeur de l'investissement » de mama-seo.fr. En-tête à gauche,
   collant au bureau ; à droite, quatre cartes à poids égal puis le seuil de
   rentabilité. Même matière que les verdicts juste dessous : carte blanche,
   ombre des cartes, la couleur ne passe que par les icônes, au bleu.
   -------------------------------------------------------------------------- */
.pile-bloc > .valeur { margin-block-start: var(--rythme-section); }
.valeur {
  display: grid;
  gap: var(--rythme-bloc);
  align-items: start;
}
@media (min-width: 1024px) {
  .valeur { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: calc(var(--spacing) * 64); }
  .valeur-tete { position: sticky; top: 120px; }
}
.valeur-tete .chapo { max-width: var(--mesure-incise); }

.valeur-corps { display: flex; flex-direction: column; gap: calc(var(--spacing) * 20); }
.valeur-grille {
  display: grid;
  gap: calc(var(--spacing) * 20);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .valeur-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.valeur-carte,
.valeur-seuil {
  background: var(--blanc);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-carte);
  padding: calc(var(--spacing) * 28);
}
.valeur-carte { display: flex; flex-direction: column; gap: calc(var(--spacing) * 12); }

.valeur-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--spacing) * 44);
  block-size: calc(var(--spacing) * 44);
  margin-block-end: calc(var(--spacing) * 8);
  border-radius: var(--r-md);
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .08);
  color: var(--bleu);
}
.valeur-icone svg { inline-size: calc(var(--spacing) * 20); block-size: calc(var(--spacing) * 20); }

/* Titre de carte : la taille unique des H3 de la page l'écraserait. */
main .valeur-titre.valeur-titre {
  font-size: var(--text-l) !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
}
.valeur-texte,
.valeur-note {
  margin: 0;
  font-size: var(--corps-sm);
  line-height: 1.5;
  color: var(--gris-lisible);
  max-width: none;
}

.valeur-seuil { display: flex; flex-direction: column; gap: calc(var(--spacing) * 14); }
.valeur-seuil-nom {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(28 28 28 / .64);
}
.valeur-formule {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: var(--graisse-titre);
  font-size: var(--h4);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--noir);
  max-width: none;
}
.valeur-exemples {
  display: grid;
  gap: calc(var(--spacing) * 12);
  margin: calc(var(--spacing) * 6) 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .valeur-exemples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.valeur-exemple {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 16);
  border-radius: var(--r-lg);
  background: #FAFAFA;
  border: 1px solid var(--gris-grille);
}
.valeur-ex-nom { font-size: var(--legende); color: var(--gris-lisible); }
.valeur-ex-marge {
  font-family: var(--font-titre);
  font-weight: var(--graisse-titre);
  font-size: var(--text-xl);
  letter-spacing: -.02em;
  color: var(--noir);
}
.valeur-ex-clients { font-size: var(--corps-sm); color: var(--noir); }
.valeur-ex-clients .chiffre { font-weight: 600; } /* pas de bleu : 3,26 pour 1, sous le minimum AA */
/* Le montant du titre est un ::after (la constante de prix) : le dégradé
   découpé du H2 le laisse transparent. Il prend l'encre pleine du titre. */
.valeur-tete h2 .prix-total { color: var(--noir); -webkit-text-fill-color: var(--noir); }
/* L'avance, dans la valeur de l'investissement : une carte pleine largeur
   entre les quatre cartes et le seuil. Même matière, l'étiquette mono au-dessus
   du titre, comme le seuil. */
.valeur-lisse .valeur-seuil-nom { margin-block-start: calc(var(--spacing) * -4); }

/* Valeur, sur demande (« une seule card », pas une grande carte large) :
   l'avance est une carte de la grille, et le seuil prend la sixième case,
   à côté d'elle. La liste s'efface de la mise en page (display: contents)
   pour que ses cartes et le seuil partagent la même grille. Les trois
   exemples s'empilent, en lignes : marge à gauche, clients à droite. */
@media (min-width: 640px) {
  .valeur-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 20); }
  .valeur-corps > .valeur-grille { display: contents; }
  .valeur-seuil .valeur-exemples { grid-template-columns: minmax(0, 1fr); margin-block: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 8); }
  .valeur-seuil .valeur-exemple {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nom clients" "marge clients";
    align-items: center;
    column-gap: calc(var(--spacing) * 12);
    padding: calc(var(--spacing) * 12) calc(var(--spacing) * 16);
  }
  .valeur-seuil .valeur-ex-nom { grid-area: nom; }
  .valeur-seuil .valeur-ex-marge { grid-area: marge; }
  .valeur-seuil .valeur-ex-clients { grid-area: clients; text-align: end; }
  .valeur-seuil .valeur-formule { font-size: var(--text-xl); }
}

/* Le seuil repasse en carte large, sur demande : toute la largeur de la
   grille, et ses trois exemples côte à côte comme au départ. */
@media (min-width: 640px) {
  .valeur-corps > .valeur-seuil { grid-column: 1 / -1; }
  .valeur-seuil .valeur-exemples { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: calc(var(--spacing) * 6); gap: calc(var(--spacing) * 12); }
  .valeur-seuil .valeur-exemple { display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 16); }
  .valeur-seuil .valeur-exemple { align-items: flex-start; text-align: start; }
  .valeur-seuil .valeur-formule { font-size: var(--h4); }
}

/* L'opportunité, sur demande : le titre tient sur deux lignes au bureau, et
   la date redevient dynamique (data-mois, data-annee, comme le constat), dans
   le cadre de .constat-marque. Le mois ouvre la phrase et
   garde sa capitale (data-mois-maj, site.js). */
#opportunite .opp-h2 { max-width: 48ch; }

/* Les dates dynamiques (constat, opportunité, offre), sur demande : le cadre
   de sélection des illustrations de la méthode remplace la carte blanche.
   Liseré violet de 1,5 px, dégradé de site à 10 % dedans, angles droits, et
   quatre poignées carrées aux coins, dessinées par un seul ::before en quatre
   couches de fond (le violet, puis le blanc qui le creuse). Le texte reste
   à l'encre noire pleine. */
.constat-marque.constat-marque {
  position: relative;
  border: 1.5px solid var(--cadre, #6647F0);
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(90deg, rgb(102 71 240 / .1) 21.844%, rgb(0 145 255 / .1) 80.12%),
    var(--blanc);
}
.constat-marque.constat-marque::before {
  --p: 7px;  /* côté de la poignée */
  content: "";
  position: absolute;
  inset: calc(var(--p) / -2 - .75px);
  pointer-events: none;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) 1.5px 1.5px / calc(var(--p) - 3px) calc(var(--p) - 3px) no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) calc(100% - 1.5px) 1.5px / calc(var(--p) - 3px) calc(var(--p) - 3px) no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) 1.5px calc(100% - 1.5px) / calc(var(--p) - 3px) calc(var(--p) - 3px) no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) calc(100% - 1.5px) calc(100% - 1.5px) / calc(var(--p) - 3px) calc(var(--p) - 3px) no-repeat,
    linear-gradient(var(--cadre, #6647F0), var(--cadre, #6647F0)) 0 0 / var(--p) var(--p) no-repeat,
    linear-gradient(var(--cadre, #6647F0), var(--cadre, #6647F0)) 100% 0 / var(--p) var(--p) no-repeat,
    linear-gradient(var(--cadre, #6647F0), var(--cadre, #6647F0)) 0 100% / var(--p) var(--p) no-repeat,
    linear-gradient(var(--cadre, #6647F0), var(--cadre, #6647F0)) 100% 100% / var(--p) var(--p) no-repeat;
}

/* Le constat, sur demande : « Et vos clients arrivent toujours au hasard. »
   et le titre entier sur deux lignes au bureau, une phrase par ligne. Le
   corps se règle sur la largeur du conteneur (la première phrase fait une
   trentaine de fois le corps), plafonné au H2. Sous 1 024 px il se replie. */
@media (min-width: 1024px) {
  .s-constat .constat-h2 {
    font-size: min(var(--h2), calc((min(100vw, 1280px) - 80px) / 26.5)) !important;
  }
  .s-constat .constat-h2 > span:not(.frappe-mot) { white-space: nowrap; }
}

/* Le titre de Signal, sur demande : plus de dégradé sur le titre, il est au
   blanc du thème. « [logo] Signal » prend le cadre de sélection des dates
   dynamiques ; sur le sombre, le fond du cadre est le seul dégradé à 10 %,
   sans le blanc dessous, et l'encre reste claire. */
.signal-h2,
.signal-h2 * {
  color: #F5F5F5;
  -webkit-text-fill-color: #F5F5F5;
}
/* Aux couleurs de Signal, sur demande : liseré et poignées au rose de
   Signal (#FF02F0), fond au dégradé de Signal à 16 %. */
.constat-marque.signal-marque {
  --cadre: #FF02F0;
  background: linear-gradient(90deg, rgb(255 2 240 / .16) 3.45%, rgb(247 104 8 / .16) 79.757%);
  margin-inline-end: 0;
}
.signal-marque .signal-h2-logo { margin-inline-start: 0; }

/* --------------------------------------------------------------------------
   La barre de navigation d'agentfrancais.com, sur demande, relevée à la
   source le 21 septembre 2026.

   Au repos, rien : la barre est nue sur la grille. Dès le premier pixel de
   défilement (site.js, data-pose), la pilule blanche apparaît et se resserre
   de chaque côté, en 0,45 s sur leur courbe. Contraction mesurée chez eux :
   62 px à 998 de fenêtre, 122 px à 1 440, d'où la droite ci-dessous, plafonnée
   à 122. La pilule garde 28 px de garniture autour du contenu, comme chez eux.
   Sous 1 024 px la barre est déjà au plus juste : pas de contraction.
   -------------------------------------------------------------------------- */
.entete { --contraction-entete: clamp(0px, 13.46vw - 72px, 122px); }
@media (max-width: 1023px) { .entete { --contraction-entete: 0px; } }
.entete-barre,
.entete-barre::before { transition-timing-function: cubic-bezier(.6, .6, 0, 1); }

/* Le bouton : le bouton secondaire, sur demande du 21 septembre 2026, le
   même que « Voir la méthode » dans le hero (double coque, verre, chevron qui
   se relaie). La pilule sombre relevée chez eux est retirée. Rayon plein sur
   les deux coques, qui restent concentriques. */
.entete .entete-cta .bouton.bouton-contour,
.entete .entete-cta .bouton-contour .bouton-noyau { border-radius: var(--r-full); }

/* Le formulaire, sur demande : les boutons d'étape (« Continuer vers vos
   coordonnées », « Suivant ») prennent le bouton secondaire, à contour, et
   toute la largeur. « Envoyer la demande » reste le bouton principal. */
.prequal .bouton.bouton-contour.prequal-large { inline-size: 100%; }

/* Les cadres de sélection (dates dynamiques, « Signal »), sur demande : plus
   de dégradé dedans. Blanc plein sur le clair, transparent sur le sombre ;
   le liseré et les poignées restent. */
.constat-marque.constat-marque { background: var(--blanc); }
.constat-marque.signal-marque { background: transparent; }


/* --------------------------------------------------------------------------
   08. Le prix comparé, d'après la maquette fournie le 21 septembre 2026 :
   « L'autre option, c'est un salarié de plus ». Titre centré avec une tuile
   d'icône dans la ligne, Percer en grande carte blanche à gauche, les deux
   embauches empilées à droite, en cartes plus effacées. La couleur ne passe
   que par le montant de Percer (dégradé de site, texte de grande taille :
   le bleu tient 3,26 pour 1, le seuil est 3), les coches et les icônes.
   -------------------------------------------------------------------------- */
.emb-tete { align-items: center; text-align: center; }
.emb-tete .section-nom { align-self: center; }
.emb-tete .chapo { max-width: var(--mesure-incise); margin-inline: auto; }
.emb-h2 { max-width: none; margin-inline: auto; }
/* L'icône du titre, refaite en CSS d'après l'icône fournie le
   21 septembre 2026 : tuile blanche penchée de 3,74°, liseré à 12 %, cinq
   ombres bleutées, pictogramme « ajouter une personne » en masque. Le
   pictogramme prend le dégradé de Signal et non celui du site, sur demande :
   au dégradé du site, il se lirait comme notre méthode. Aux proportions de
   la source (76 × 74 pour un titre à 62,7 px) ; rayon 20, multiple de 4,
   pour 20,68 relevés. */
.emb-h2-tuile {
  position: relative;
  display: inline-block;
  inline-size: 1.214em;
  block-size: 1.18em;
  margin-inline: .08em;
  vertical-align: -.2em;
  border-radius: 20px;
  background: var(--blanc);
  border: 1px solid rgb(28 28 28 / .12);
  box-shadow:
    0 1px 1px rgb(9 23 78 / .04),
    0 3px 3px rgb(9 23 78 / .04),
    0 6px 6px rgb(9 23 78 / .04),
    0 12px 12px rgb(9 23 78 / .04),
    0 24px 24px rgb(9 23 78 / .04);
  transform: rotate(-3.7396deg);
}
.emb-h2-tuile::after {
  content: "";
  position: absolute;
  left: 26.7%;
  top: 19.7%;
  inline-size: 52.2%;
  block-size: 53.7%;
  background: linear-gradient(90deg, #FF02F0 3.45%, #F76808 79.757%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='41.9922 20.8569 39.7126 39.7701'%3E%3Cpath transform='rotate(3.7396 41.9922 20.8569)' d='M82.7875 36.1283L76.8433 36.5168L76.4548 30.5726L72.492 30.8316L72.8805 36.7758L66.9363 37.1644L67.1953 41.1272L73.1395 40.7386L73.528 46.6828L77.4908 46.4238L77.1023 40.4796L83.0465 40.0911L82.7875 36.1283ZM54.1413 24.0716C52.0393 24.209 50.078 25.1758 48.6888 26.7592C47.2996 28.3427 46.5964 30.4132 46.7338 32.5152C46.8711 34.6172 47.8379 36.5786 49.4214 37.9677C51.0049 39.3569 53.0754 40.0602 55.1774 39.9228C57.2794 39.7854 59.2407 38.8186 60.6299 37.2351C62.0191 35.6517 62.7223 33.5812 62.585 31.4792C62.4476 29.3772 61.4808 27.4158 59.8973 26.0266C58.3138 24.6375 56.2433 23.9342 54.1413 24.0716ZM46.3064 56.4215L66.1204 55.1265C67.2102 55.0552 68.0436 54.1053 67.9723 53.0156L67.8428 51.0342C67.4854 45.5655 62.757 41.4172 57.2883 41.7747L53.3255 42.0337C47.8568 42.3911 43.7086 47.1196 44.066 52.5882L44.1955 54.5696C44.2668 55.6594 45.2167 56.4928 46.3064 56.4215Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='41.9922 20.8569 39.7126 39.7701'%3E%3Cpath transform='rotate(3.7396 41.9922 20.8569)' d='M82.7875 36.1283L76.8433 36.5168L76.4548 30.5726L72.492 30.8316L72.8805 36.7758L66.9363 37.1644L67.1953 41.1272L73.1395 40.7386L73.528 46.6828L77.4908 46.4238L77.1023 40.4796L83.0465 40.0911L82.7875 36.1283ZM54.1413 24.0716C52.0393 24.209 50.078 25.1758 48.6888 26.7592C47.2996 28.3427 46.5964 30.4132 46.7338 32.5152C46.8711 34.6172 47.8379 36.5786 49.4214 37.9677C51.0049 39.3569 53.0754 40.0602 55.1774 39.9228C57.2794 39.7854 59.2407 38.8186 60.6299 37.2351C62.0191 35.6517 62.7223 33.5812 62.585 31.4792C62.4476 29.3772 61.4808 27.4158 59.8973 26.0266C58.3138 24.6375 56.2433 23.9342 54.1413 24.0716ZM46.3064 56.4215L66.1204 55.1265C67.2102 55.0552 68.0436 54.1053 67.9723 53.0156L67.8428 51.0342C67.4854 45.5655 62.757 41.4172 57.2883 41.7747L53.3255 42.0337C47.8568 42.3911 43.7086 47.1196 44.066 52.5882L44.1955 54.5696C44.2668 55.6594 45.2167 56.4928 46.3064 56.4215Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.emb-grille {
  display: grid;
  gap: calc(var(--spacing) * 16);
  inline-size: 100%;
  max-inline-size: calc(var(--spacing) * 880);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .emb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.emb-droite { display: flex; flex-direction: column; gap: calc(var(--spacing) * 16); }

.emb-carte {
  display: flex;
  flex-direction: column;
  padding: calc(var(--spacing) * 28);
  border-radius: var(--r-2xl);
  border: 1px solid rgb(28 28 28 / .08);
  background: rgb(255 255 255 / .5);
}
.emb-droite .emb-carte { flex: 1; }
.emb-percer {
  background: var(--blanc);
  border-color: transparent;
  box-shadow: var(--ombre-carte), 0 24px 48px -24px rgb(28 28 28 / .18);
}

.emb-haut { display: flex; align-items: center; justify-content: space-between; margin-block-end: calc(var(--spacing) * 10); }
.emb-option {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(28 28 28 / .64);
}
.emb-icone { display: inline-flex; color: rgb(28 28 28 / .64); }
.emb-icone svg { inline-size: calc(var(--spacing) * 20); block-size: calc(var(--spacing) * 20); }
.emb-icone-percer { color: var(--violet); }
.emb-icone-percer svg { inline-size: calc(var(--spacing) * 18); block-size: auto; }

main .emb-titre.emb-titre {
  margin: 0 0 calc(var(--spacing) * 20);
  font-size: var(--text-l) !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
}
.emb-montant {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: var(--graisse-titre);
  font-size: var(--h3);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--noir);
  max-width: none;
}
.emb-percer .emb-montant {
  background: var(--gradient-site);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  inline-size: fit-content;
}
.emb-detail {
  margin: calc(var(--spacing) * 6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(28 28 28 / .64);
}
.emb-texte {
  margin: calc(var(--spacing) * 28) 0 0;
  font-size: var(--corps-sm);
  line-height: 1.5;
  color: var(--gris-lisible);
  max-width: none;
}
.emb-liste {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 14);
  margin: calc(var(--spacing) * 28) 0 0;
  padding: 0;
  list-style: none;
}
.emb-liste li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 12);
  font-size: var(--corps-sm);
  color: var(--gris-lisible);
}
.emb-coche {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--spacing) * 20);
  block-size: calc(var(--spacing) * 20);
  border-radius: var(--r-sm);
  background: var(--bleu);
  color: var(--blanc);
}
.emb-coche svg { inline-size: calc(var(--spacing) * 13); block-size: calc(var(--spacing) * 13); }
/* Les coches de Percer, d'après une icône fournie le 21 septembre 2026 :
   tuile blanche, liseré à 12 %, coche au dégradé du site, ombre bleutée
   dessous et halo blanc. Rayon 8 au lieu des 8,25 relevés, multiple de 4. */
.emb-percer .emb-coche {
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--r-sm);
  background: var(--blanc);
  border: 1px solid rgb(13 33 29 / .12);
  box-shadow:
    0 4px 4px rgb(8 73 250 / .08),
    0 0 20px rgb(255 255 255 / .12),
    0 0 3px rgb(255 255 255 / .35);
}
.emb-percer .emb-coche svg { flex: none; inline-size: 22px; block-size: 22px; margin: -1px; }

.emb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--spacing) * 16);
}
/* Les deux boutons sous les cartes, d'après deux boutons fournis le
   21 septembre 2026 : pilules de 51 px. Le principal, noir dans la source,
   prend le bleu du système ; son ombre est celle du bouton primaire
   (quatre couches, lumière en haut à droite). Le secondaire est blanc, liseré
   à 12 %, six ombres bleutées très faibles, flèche de sortie. Le libellé du
   principal reste « Voir mon éligibilité » : la page n'a qu'un appel. */
.emb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  block-size: 51px;
  padding-inline: 19px;
  border-radius: var(--r-full);
  font-family: var(--font-corps);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--motion-instant) var(--ease-out);
}
.emb-btn-bleu {
  background: var(--bleu);
  color: var(--blanc);
  box-shadow:
    -21px 16px 10px rgb(0 0 0 / .04),
    -12px 9px 9px rgb(0 0 0 / .13),
    -5px 4px 6px rgb(0 0 0 / .23),
    -1px 1px 4px rgb(0 0 0 / .26);
}
.emb-btn-blanc {
  padding-inline: 23px 22px;
  background: var(--blanc);
  color: #262626;
  border: 1px solid rgb(13 33 29 / .12);
  box-shadow:
    0 1px 1px rgb(9 23 78 / .04),
    0 3px 3px rgb(9 23 78 / .04),
    0 6px 6px rgb(9 23 78 / .04),
    0 12px 12px rgb(9 23 78 / .04),
    0 24px 24px rgb(9 23 78 / .04);
}
.emb-btn:hover { filter: brightness(.95); }
.emb-btn:active { filter: brightness(.9); }
.emb-btn-blanc .emb-sortie { inline-size: 10px; block-size: 10px; margin-inline-start: 14px; }
.emb-urssaf { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 8); }
.emb-sortie { inline-size: 16px; block-size: 16px; margin-inline-start: 6px; }
.emb-urssaf-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(28 28 28 / .64);
}

/* Le prix comparé, sur demande :
   1. le chevron Percer, au dégradé de site, en fond de section à 1 %
      d'opacité, derrière les cartes ;
   2. le montant de Percer en bleu uni, son titre et son chevron en noir,
      sur demande (3,26 pour 1 sur blanc : le montant passe au titre de gros
      texte, à 33 px en 600, où le minimum est 3) ;
   3. la matière des cartes de l'éligibilité, sur blanc, avec un voile
      violet vers bleu à 1 %, sur demande (après 10 %, 1 %, 25 % et un masque) ;
   4. un bandeau de verre posé à 4 px du bord, rayons concentriques, qui
      porte l'option, l'icône, le titre, le montant et sa ligne de détail. */
#prix { position: relative; isolation: isolate; }
#prix::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .01;
  pointer-events: none;
  background: var(--gradient-site);
  -webkit-mask: url("favicon.svg") center / min(70%, 720px) auto no-repeat;
  mask: url("favicon.svg") center / min(70%, 720px) auto no-repeat;
}

.emb-percer .emb-montant {
  background: none;
  color: var(--bleu);
  -webkit-text-fill-color: var(--bleu);
}


.emb-carte.emb-carte {
  --emb-marge: calc(var(--spacing) * 4);
  background:
    linear-gradient(160deg, rgb(102 71 240 / .01), rgb(0 145 255 / .01)),
    var(--blanc);
  border: 1px solid rgb(102 71 240 / .18);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-carte);
}
.emb-carte .emb-bandeau {
  margin: calc(var(--emb-marge) - var(--spacing) * 28) calc(var(--emb-marge) - var(--spacing) * 28) 0;
  padding: calc(var(--emb-marge) - 1px) calc(var(--spacing) * 24) calc(var(--spacing) * 20);
  border-radius: calc(var(--r-xl) - var(--emb-marge));
  background: rgb(255 255 255 / .3);
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: var(--ombre-carte);
  -webkit-backdrop-filter: blur(25px) saturate(1.4);
  backdrop-filter: blur(25px) saturate(1.4);
}
.emb-carte .emb-haut {
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: calc(var(--spacing) * 10);
  margin: 0 0 calc(var(--spacing) * 16) calc(var(--emb-marge) - 1px - var(--spacing) * 24);
}
.emb-carte .emb-icone {
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--spacing) * 36);
  block-size: calc(var(--spacing) * 36);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / .45);
  border: 1px solid rgb(28 28 28 / .08);
  box-shadow: var(--ombre-carte);
  color: var(--noir);
}
.emb-carte .emb-icone svg { inline-size: calc(var(--spacing) * 18); block-size: calc(var(--spacing) * 18); }
.emb-carte .emb-icone-percer { color: var(--noir); }

/* Options 2 et 3, sur demande : un contour seul, sans fond, pour se fondre
   dans la page. Un filet de grille, ni fond, ni voile, ni ombre, ni bandeau de verre ; l'option à gauche,
   l'icône nue à droite, comme au premier dessin. */
.emb-droite .emb-carte.emb-carte {
  background: none;
  border-color: var(--gris-grille);
  box-shadow: none;
}
.emb-droite .emb-carte .emb-bandeau {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.emb-droite .emb-carte .emb-haut {
  flex-direction: row;
  justify-content: space-between;
  margin: 0 0 calc(var(--spacing) * 10);
}
.emb-droite .emb-carte .emb-icone {
  inline-size: auto;
  block-size: auto;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgb(28 28 28 / .64);
}
.emb-droite .emb-carte .emb-icone svg { inline-size: calc(var(--spacing) * 20); block-size: calc(var(--spacing) * 20); }
.emb-carte .emb-icone-percer svg { inline-size: calc(var(--spacing) * 16); block-size: auto; }

/* --------------------------------------------------------------------------
   Pied de page, 21 septembre 2026, sur demande : « le trait simple sur fond
   blanc ». Plus de dégradé de site, plus de carte de verre, plus de filigrane.
   Une feuille blanche pleine largeur, un filet de grille en haut, le contenu
   posé à même le blanc et aligné sur le conteneur de la page. Le filet du bas
   sépare toujours les colonnes de la ligne légale.
   Les règles d'avant (styles.css, section 19) restent et sortent au prochain
   nettoyage. */
.pied {
  margin-block-start: 0;
  /* Ni filet ni changement de fond, sur demande du 25 septembre 2026 : le
     pied de page prend le fond de la page et s'y fond. */
  background: transparent;
  border-block-start: 0;
}
.pied-feuille {
  overflow: visible;
  padding-block: calc(var(--spacing) * 56) calc(var(--spacing) * 32);
  background: none;
  box-shadow: none;
}
.pied-feuille::after,
.pied-filigrane { display: none; }
.pied-feuille > .conteneur { max-width: var(--largeur-max); }
.pied-carte,
.pied .pied-carte {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.pied-bas {
  margin-block-start: calc(var(--spacing) * 48);
  padding-block-start: calc(var(--spacing) * 20);
}
@media (max-width: 767px) {
  .pied-feuille { padding-block-start: calc(var(--spacing) * 40); }
  .pied-bas { margin-block-start: calc(var(--spacing) * 32); }
}

/* --------------------------------------------------------------------------
   Les flèches des boutons, 21 septembre 2026, sur demande.
   Le bouton principal prend le double chevron du bouton à contour, à
   l'horizontale : ni la flèche en diagonale, ni le chevron incliné, et la
   pastille ne pivote plus au survol, au focus ni à la pression. Elle glisse
   seulement. Le bouton à contour perd sa flèche : le balisage la retire, la
   règle `.bouton-icone` de styles.css n'a plus d'emploi.
   -------------------------------------------------------------------------- */
.btn-principal .btn-principal__icon,
.btn-principal:hover .btn-principal__icon,
.btn-principal:focus-visible .btn-principal__icon,
.btn-principal:active .btn-principal__icon { rotate: none; }
.btn-principal .btn-principal__icon svg,
.btn-principal.btn-chevron .btn-principal__icon svg {
  width: 20px;
  height: 20px;
  rotate: none;
}

/* « Et c'est normal. » perd sa pilule, 21 septembre 2026, sur demande :
   plus de fond, de liseré, de flou ni d'ombre, et plus de garniture. Le
   texte seul, centré, dans le corps de la page. */
.constat-chute {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* La barre des quatre leviers, un cran plus grande, 21 septembre 2026, sur
   demande (« c'est trop petit ») : libellé de `text-m` à `text-l`, icône de
   18 à 20, garniture des onglets de 10 × 20 à 13 × 26, et de la barre de 5
   à 6. Les onglets de Signal ne bougent pas. */
.piliers .onglets { padding: calc(var(--spacing) * 6); gap: calc(var(--spacing) * 6); }
.piliers .onglet {
  gap: calc(var(--spacing) * 10);
  padding: calc(var(--spacing) * 13) calc(var(--spacing) * 26);
  font-size: var(--text-l);
}
.piliers .onglet-icone svg {
  inline-size: calc(var(--spacing) * 20);
  block-size: calc(var(--spacing) * 20);
}

/* Signal, 21 septembre 2026, sur demande : dans chaque vue, le texte tient
   le haut et le bouton le bas de la colonne (space-between), au lieu d'être
   centrés ensemble. La colonne prend la hauteur de la vue. */
.signal-texte {
  align-self: stretch;
  justify-content: space-between;
}

/* Tous les boutons en pilule, 21 septembre 2026, sur demande : rayon plein
   sur l'enveloppe et sur le noyau du bouton à contour, qui restent ainsi
   concentriques. `!important` parce que les rayons sont posés par des
   variantes de poids différents dans les deux feuilles. */
.bouton,
.bouton .bouton-noyau,
.btn-principal,
.emb-btn {
  border-radius: var(--r-full) !important;
}

/* Le bouton de la barre prend la graisse et le corps des autres boutons, sur
   demande du 21 septembre 2026 : Geist 500 à 16 px, comme « Voir la méthode »
   du hero. Il était en 700, héritage du bouton-md. */
.entete .bouton.bouton-contour,
.entete .bouton.bouton-contour .bouton-noyau,
.entete .bouton.bouton-contour .lettre {
  font-size: 16px;
  font-weight: 500;
}

/* Tous les boutons en 500, sur demande du 21 septembre 2026 : les boutons
   bouton-md (Signal, formulaire, consentement, menu) étaient restés en 700. */
.bouton, .bouton *, .btn-principal, .btn-principal *, .emb-btn { font-weight: 500 !important; }

/* Et tous en 16 px, sur demande du même jour. La pilule de Charly garde son
   corps à elle, ce n'est pas un bouton d'action. */
.bouton:not(.chat-pilule), .bouton:not(.chat-pilule) * { font-size: 16px !important; }

/* Carte Percer du prix comparé : l'ombre du SVG fourni le 21 septembre 2026,
   sur demande. Cinq couches, bleu nuit rgb(9 23 78) à 4 %, flou double à
   chaque couche et décalage vertical égal au flou. La sixième couche du
   fichier (0 0 0, sans étalement) ne peint rien et n'est pas reprise. */
.emb-percer.emb-carte.emb-carte {
  box-shadow:
    0 1px 1px rgb(9 23 78 / .04),
    0 3px 3px rgb(9 23 78 / .04),
    0 6px 6px rgb(9 23 78 / .04),
    0 12px 12px rgb(9 23 78 / .04),
    0 24px 24px rgb(9 23 78 / .04);
}

/* Carte Percer : l'option passe à gauche et le chevron à droite, sur demande
   du 21 septembre 2026. Le retrait négatif change de côté avec le chevron,
   qui reste à 4 px du bord du bandeau. */
.emb-percer.emb-carte .emb-haut {
  flex-direction: row;
  margin: 0 calc(var(--emb-marge) - 1px - var(--spacing) * 24) calc(var(--spacing) * 16) 0;
}

/* Éligibilité, 21 septembre 2026, sur demande : les tuiles d'icônes des
   cartes (conditions et verdicts) prennent la tuile des coches de Percer.
   Surface blanche opaque, liseré à 12 %, ombre bleutée dessous et halo
   blanc. Rayon 12 : les 8 px de la coche de 22 px, rapportés à une tuile
   de 36 et 40 px, et ramenés au multiple de 4. */
#offre :is(.cond-carte, .verdict) .cond-tete .cond-icone.cond-icone.cond-icone {
  border-radius: var(--r-md);
  background: var(--blanc);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgb(13 33 29 / .12);
  box-shadow:
    0 4px 4px rgb(8 73 250 / .08),
    0 0 20px rgb(255 255 255 / .12),
    0 0 3px rgb(255 255 255 / .35);
}

/* Même tuile sur les marques des listes du verdict, sur demande du même jour.
   Elles font 20 px, presque la taille de la coche : rayon 8 comme elle.
   La croix et la coche gardent leur teinte. */
#offre .verdict .verdict-liste .verdict-marque.verdict-marque {
  border-radius: var(--r-sm);
  background: var(--blanc);
  border: 1px solid rgb(13 33 29 / .12);
  box-shadow:
    0 4px 4px rgb(8 73 250 / .08),
    0 0 20px rgb(255 255 255 / .12),
    0 0 3px rgb(255 255 255 / .35);
}

/* --------------------------------------------------------------------------
   Le blanc des onglets glisse, 21 septembre 2026, sur demande.
   Un seul curseur par barre (site.js, « Les onglets simples ») porte la
   surface de l'onglet tenu ; l'onglet ne la peint plus. ease-inout sur t-base :
   le design system range là ce qui se déplace d'un point à un autre.
   -------------------------------------------------------------------------- */
[data-curseur] { isolation: isolate; }
.onglets-curseur {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--blanc);
  box-shadow: var(--lueur-carte-douce), var(--ombre-carte);
  transition: opacity var(--t-micro) var(--ease-out);
}

/* Rien de tenu : le curseur se retire au lieu de rester posé sur le dernier.
   Les onglets ont toujours un tenu et ne rencontrent jamais cet état ; les
   filtres des réalisations s'ouvrent dedans. */
.onglets-curseur[data-retire] { opacity: 0; }

.onglets-curseur[data-anime] {
  transition:
    opacity var(--t-micro) var(--ease-out),
    translate var(--t-base) var(--ease-inout),
    inline-size var(--t-base) var(--ease-inout),
    block-size var(--t-base) var(--ease-inout);
}
[data-curseur] .onglet[data-actif] { background: transparent; box-shadow: none; }
.signal-vues .onglets-curseur {
  background: var(--surface-haute);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / .08);
}


/* --------------------------------------------------------------------------
   L'étude de cas en trois volets déroulants, d'après pulsor.agency, sur
   demande du 21 septembre 2026 : le point de départ, ce qu'on fait, les
   premiers résultats. Un déclencheur (icône, intitulé, chevron à 50 %), un
   filet entre les volets, et au déplié un trait pointillé qui tient la
   colonne du texte. L'intitulé ouvert passe au bleu : un seul endroit de
   couleur, sur ce qui est tenu. Les quatre cartes de chiffres sortent, les
   chiffres vivent dans le troisième volet. L'ancienne liste .cas2-etapes n'a
   plus de balisage.
   -------------------------------------------------------------------------- */
.cas3-volets {
  margin-block-start: calc(var(--spacing) * 24);
  border-block-start: 1px solid var(--gris-grille);
}
.cas3-volet { border-block-end: 1px solid var(--gris-grille); }
.cas3-declencheur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 16);
  padding-block: calc(var(--spacing) * 16);
  cursor: pointer;
  list-style: none;
  color: var(--noir);
  transition: color var(--motion-instant) var(--ease-out);
}
.cas3-declencheur::-webkit-details-marker { display: none; }
.cas3-intitule { display: flex; align-items: center; gap: calc(var(--spacing) * 10); }
.cas3-icone { display: grid; place-items: center; inline-size: 20px; block-size: 20px; color: currentColor; }
.cas3-icone svg { inline-size: 20px; block-size: 20px; }
.cas3-titre { font-size: var(--corps); font-weight: 500; line-height: 1.3; }
.cas3-chevron {
  display: grid; place-items: center;
  inline-size: 12px; block-size: 12px;
  opacity: .5;
  transition: transform var(--deplie-duree, 600ms) var(--deplie-courbe, ease);
}
.cas3-chevron svg { inline-size: 12px; block-size: 12px; }
.cas3-volet[open] .cas3-chevron { transform: rotate(180deg); }
.cas3-volet[open] .cas3-declencheur,
.cas3-declencheur:hover { color: var(--bleu); }

.cas3-contenu {
  position: relative;
  padding: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 20) calc(var(--spacing) * 30);
}
/* Le trait pointillé, dans l'axe de l'icône. */
.cas3-contenu::before {
  content: "";
  position: absolute;
  inset-block: 0 calc(var(--spacing) * 20);
  inset-inline-start: 9px;
  border-inline-start: 1px dotted rgb(28 28 28 / .3);
}
.cas3-contenu p {
  margin: 0;
  font-size: var(--corps-sm);
  line-height: 1.5;
  color: rgb(28 28 28 / .72);
}
.cas3-resultats {
  list-style: none;
  margin: calc(var(--spacing) * 16) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--spacing) * 8);
}
.cas3-resultats li {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 8);
  padding-block-end: calc(var(--spacing) * 8);
  border-block-end: 1px solid var(--gris-grille);
}
.cas3-resultats li:last-child { border-block-end: 0; padding-block-end: 0; }
.cas3-valeur {
  min-inline-size: 5.5em;
  font-family: var(--font-titre);
  font-weight: var(--graisse-titre, 700);
  font-size: var(--h5);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--noir);
  white-space: nowrap;
}
.cas3-libelle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(28 28 28 / .64);
}
/* Le récit tient le haut de sa colonne, en face de la capture. */
.cas-v2 .cas2 { align-items: start; }

/* Les deux premiers volets développés, et le statut du projet dans le
   bandeau client, 21 septembre 2026, sur demande. Le rouge est celui du
   jeton --erreur : le blanc y tient 5,4 pour 1. Pas de point qui pulse, ce
   serait un mouvement permanent de plus. */
.cas2-client.cas2-client { justify-content: space-between; flex-wrap: wrap; row-gap: calc(var(--spacing) * 12); }
.cas2-client > .cas2-monogramme + .cas2-identite { margin-inline-end: auto; }
.cas2-statut {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 8);
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 14);
  border-radius: var(--r-full);
  background: var(--erreur);
  color: var(--blanc);
  font-size: var(--corps-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 1px 2px rgb(196 50 28 / .3);
}
.cas2-statut-point {
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cas3-contenu p + p { margin-block-start: calc(var(--spacing) * 12); }
.cas3-liste {
  margin: calc(var(--spacing) * 12) 0 0;
  padding-inline-start: 1.1em;
  list-style: disc outside;
  display: grid;
  gap: calc(var(--spacing) * 6);
  font-size: var(--corps-sm);
  line-height: 1.5;
  color: rgb(28 28 28 / .72);
}
.cas3-liste li { display: list-item; }
.cas3-liste li::marker { color: rgb(28 28 28 / .4); }
.cas3-liste strong { color: var(--noir); font-weight: 600; }
/* Aux quatre leviers, même curseur (site.js, curseurOnglets). Épinglée, la
   barre garde son voile de blanc à 18 % sous le remplissage de lecture, qui
   reste dans l'onglet : c'est le voile qui glisse, la lecture repart de zéro. */
.piliers[data-arme] [data-curseur] .onglet[data-actif] { background: transparent; box-shadow: none; }
.piliers[data-arme] .onglets-curseur { background: rgb(255 255 255 / .18); }

/* Un volet ouvert à la fois (details name, sans script), et au bureau la
   règle demandée le 21 septembre 2026 : le bandeau, le volet ouvert et les
   deux fermés font exactement la hauteur de la capture, qui garde son ratio
   d'origine (1440/900) et décide seule de cette hauteur. site.js pose la
   hauteur (--cas3-hauteur) et la place du volet ouvert (--cas3-place) ; un
   texte plus long que sa place défile dans son volet au lieu de pousser.
   Sous 1 280 px la capture tombe sous 400 px de haut et ne laisse plus de
   place lisible au volet ouvert : la section s'empile, règle levée. */
@media (max-width: 1279px) {
  .cas-v2 .cas2 { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 32); }
}
@media (min-width: 1280px) {
  .cas-v2 .cas2 { align-items: start; }
  .cas-v2 .cas2-recit {
    display: flex;
    flex-direction: column;
    block-size: var(--cas3-hauteur, auto);
  }
  .cas-v2 .cas3-volets { flex: 1; display: flex; flex-direction: column; min-block-size: 0; }
  .cas-v2 .cas3-volet[open] { flex: 1; min-block-size: 0; }
  .cas-v2 .cas2-client + .cas3-volets { margin-block-start: calc(var(--spacing) * 16); }
  .cas-v2 .cas3-contenu p + p { margin-block-start: calc(var(--spacing) * 8); }
  .cas-v2 .cas3-liste { margin-block-start: calc(var(--spacing) * 8); gap: calc(var(--spacing) * 2); }
  .cas-v2 .cas3-resultats { margin-block-start: calc(var(--spacing) * 10); gap: calc(var(--spacing) * 6); }
  .cas-v2 .cas3-resultats li { padding-block-end: calc(var(--spacing) * 6); }
  .cas-v2 .cas3-declencheur { padding-block: calc(var(--spacing) * 12); }
  .cas-v2 .cas3-contenu {
    padding-block-end: calc(var(--spacing) * 12);
    max-block-size: var(--cas3-place, none);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* Le titre de l'éligibilité tient sur deux lignes à toutes les largeurs,
   sur demande du 21 septembre 2026 : coupe écrite après « ces », aucune
   autre coupe, et le corps descend avec la largeur pour que la plus longue
   ligne (14 em environ) tienne dans la colonne. */
.eligi-tete h2 {
  max-width: none;
  white-space: nowrap;
  font-size: min(var(--titre-lg), calc((100vw - 2 * var(--marge-laterale) - 24px) / 14));
}

/* Le seuil de rentabilité prend le thème Signal, sur demande du 22 septembre
   2026 : même fond que la section Signal (noir, dégradé radial en haut à
   droite), encres du thème, montant au dégradé chaud. Les jetons du thème
   sont lus, puisque la carte entière est sombre et ne contient aucune carte
   claire. */
.valeur-seuil[data-theme="signal"] {
  background: var(--degrade-fond-sombre), var(--fond);
  box-shadow: var(--ombre-carte);
  color: var(--texte);
}
.valeur-seuil[data-theme="signal"] .valeur-seuil-nom { color: rgb(255 255 255 / .64); }
.valeur-seuil[data-theme="signal"] .valeur-formule { color: var(--texte); }
.valeur-seuil[data-theme="signal"] .valeur-formule .prix-total {
  background: var(--gradient-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.valeur-seuil[data-theme="signal"] .valeur-note { color: var(--texte-secondaire); }
.valeur-seuil[data-theme="signal"] .valeur-exemple {
  background: var(--surface-haute);
  border-color: rgb(255 255 255 / .12);
}
.valeur-seuil[data-theme="signal"] .valeur-ex-nom { color: var(--texte-secondaire); }
.valeur-seuil[data-theme="signal"] .valeur-ex-marge,
.valeur-seuil[data-theme="signal"] .valeur-ex-clients { color: var(--texte); }

/* Nos industries : l'en-tête est centré, sur demande du 22 septembre 2026.
   Le label et le H2 se centrent dans leur pile ; le texte du titre aussi,
   s'il passe sur deux lignes. Les cartes ne bougent pas.                  */
#industries .pile-intra { align-items: center; text-align: center; }
#industries .pile-intra .section-nom { align-self: center; }

/* Valeur de l'investissement : un bouton sous le chapô, 22 septembre 2026,
   sur demande. Même libellé et même cible que l'éligibilité. */
.valeur-action { align-self: flex-start; margin-block-start: calc(var(--spacing) * 8); }


/* --------------------------------------------------------------------------
   L'étiquette du titre, reprise de pulsor.agency (.hero_span_data), sur
   demande du 22 septembre 2026 : « digitale », en Geist 500, bleu plein, penchée de 3 degrés, posée à cheval sur l'interligne entre
   « acquisition » et « régulière ».

   Elle est en position absolue sans coordonnées : elle reste donc à sa place
   dans la ligne, juste après « acquisition », quelle que soit la largeur, et
   ne prend aucune place. Le décalage la descend sur l'interligne.
   Hors du découpage en mots (data-mots-non) et hors de la voix : le titre se
   lit sans elle. Le bleu est celui de Pulsor, #0071E3 : le blanc y tient
   4,8 pour 1, là où le #0091FF du système tombe à 3,26.
   -------------------------------------------------------------------------- */
.s-hero h1 .hero-etiquette {
  /* L'enveloppe garde le corps du titre : ses marges se comptent en em du H1. */
  position: absolute;
  z-index: 1;
  display: inline-flex;
  margin: .86em 0 0 -.6em;
  pointer-events: none;
}
.s-hero h1 .hero-etiquette > span {
  display: inline-flex;
  padding: .25em .5em;
  border-radius: .5em;
  background: #0071E3;
  box-shadow: 0 .35em 1.2em rgb(0 113 227 / .35), inset 0 1px 0 rgb(255 255 255 / .25);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  /* La typographie est la nôtre, sur demande : Geist 500, comme les boutons,
     au corps et à l'interlettrage du système. */
  font-family: var(--font-corps);
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-corps);
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(3deg);
}
.s-hero h1[data-mots-prets] .hero-etiquette > span {
  animation: sous-titre-entre var(--sous-titre-duree) var(--sous-titre-courbe) both;
  animation-delay: var(--retard-sous, 0ms);
}
/* Sur téléphone, « acquisition » finit sa ligne : l'étiquette se cale sur la
   fin du mot au lieu d'en partir, sinon elle sort de l'écran. */
@media (max-width: 1023px) {
  .s-hero h1 .hero-etiquette { margin-left: 0; translate: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .s-hero h1 .hero-etiquette > span { animation: none; }
}


/* --------------------------------------------------------------------------
   Le bleu des boutons, 23 septembre 2026, sur demande : celui de l'étiquette
   « digitale » du H1, le #0071E3 de Pulsor, posé sur tous les boutons bleus
   de la page.

   ⚠️ **Le dégradé #37A9FF vers #0091FF sort**, avec lui la ligne de la
   section 5.8 qui le donnait à tous les boutons primaires : c'est un aplat,
   comme l'étiquette. **Et le libellé blanc repasse au-dessus du minimum AA**,
   4,70 pour 1 au lieu de 3,26, ce que ce document notait jusqu'ici comme un
   écart assumé. Les états s'assombrissent, comme le veut la section 5.5 :
   5,57 au survol, 6,69 au clic.

   ⚠️ **Le voile noir du bouton d'envoi du chatbot part avec.** Il n'était pas
   décoratif : il remontait le blanc de 3,23 à 4,6 sur le bleu du système. Ce
   bleu-ci n'en a pas besoin, et le garder assombrirait précisément ce qu'on
   vient chercher. C'est le raisonnement déjà écrit pour le violet en
   section 2.

   ⚠️ **Le jeton `--bleu` ne bouge pas** : il porte aussi le levier tenu, la
   frise, les coches, la pastille des labels et les flèches de l'équipe, qui
   ne sont pas des boutons. La demande nomme les boutons, et elle seule.
   -------------------------------------------------------------------------- */
:root {
  --bleu-bouton:        #0071E3;
  --bleu-bouton-hover:  #0066CC;
  --bleu-bouton-actif:  #005AB6;
}

.btn-principal,
.bouton-primaire,
.emb-btn-bleu { background: var(--bleu-bouton); color: var(--blanc); }

.btn-principal:hover,
.bouton-primaire:hover { background: var(--bleu-bouton-hover); }

.btn-principal:active,
.bouton-primaire:active { background: var(--bleu-bouton-actif); }

/* Le bouton d'envoi du chatbot : même aplat, lueur blanche et halo gardés,
   voile noir retiré. Le sélecteur pèse une classe de plus que celui de
   `chatbot.css`, qui vient avant dans l'ordre des feuilles. */
.chat-envoyer.chat-envoyer:not(:disabled) {
  background: var(--bleu-bouton);
  box-shadow:
    inset 0 0 calc(var(--spacing) * 10) rgb(255 255 255 / .45),
    inset 0 1px 0 rgb(255 255 255 / .6),
    0 calc(var(--spacing) * 10) calc(var(--spacing) * 24) calc(var(--spacing) * -8) rgb(0 113 227 / .65);
}
.chat-envoyer.chat-envoyer:not(:disabled):hover {
  background: var(--bleu-bouton-hover);
  box-shadow:
    inset 0 0 calc(var(--spacing) * 10) rgb(255 255 255 / .45),
    inset 0 1px 0 rgb(255 255 255 / .6),
    0 calc(var(--spacing) * 10) calc(var(--spacing) * 24) calc(var(--spacing) * -8) rgb(0 113 227 / .65);
}
.chat-envoyer.chat-envoyer:not(:disabled):active {
  background: var(--bleu-bouton-actif);
}

/* La barre d'action du téléphone porte la classe du bouton principal : son
   halo suit la nouvelle teinte. */
@media (max-width: 767px) {
  .chat-dock .mobile-cta.btn-principal {
    box-shadow:
      0 calc(var(--spacing) * 8) calc(var(--spacing) * 24) rgb(0 113 227 / .28),
      0 calc(var(--spacing) * 2) calc(var(--spacing) * 6) rgb(28 28 28 / .12);
  }
}

/* Le panneau du rendez-vous est le dernier bloc de la home. Depuis que le pied
   de page a perdu son fond et son filet, il y collait (0 px) : il prend le même
   écart qu'entre deux sections, comme l'appel de /realisations. Sur demande du
   25 septembre 2026. */
main .panneau-sombre.rdv-sombre { margin-block-end: var(--rythme-section); }