/* =====================================================================
   PROGRAMME PARTENAIRE, V2 (templates/v2/programme-partenaire.twig)

   D'OU VIENT CE FICHIER. Copie de src/css/pages/programme-partenaire.css,
   le style de la page V1 (une maquette validee avec Phil), tout confine
   sous .pp. Le 2026-10-01, la copie passe au systeme de la V2 (v2.css) :
   - Gilroy en DEUX graisses, 400 et 500. Les 600, 700 et 800 de la V1
     deviennent 500, et les fichiers SemiBold et Bold ne sont plus charges ;
   - aucun texte sous 12 px, tailles en px. La V1 met la racine a 75 % au
     telephone ; la copie l'imitait, d'ou des textes de 8 a 11 px ;
   - les couleurs aux jetons de la V2 (--texte, --surface, --accent...) ;
   - la gouttiere et le conteneur de la V2 : les bords tombent sur ceux de
     l'entete (avant : 12 px au telephone, 24 px de decalage a l'ordinateur) ;
   - des espacements en multiples de 4, et 64 a 96 px d'une section a
     l'autre (un seul espace entre deux sections du meme fond) ;
   - des rayons de 4 px (boutons, petits elements) et 8 px (cartes, photos),
     des boutons a la hauteur --bouton-h (40 px, 44 au doigt), sans ombre
     ni degrade ;
   - le bloc css que le gabarit portait en ligne (escalier, jauge, voile)
     est ici : la V2 sert ce fichier tel quel, sans compilation.

   PAR LES VARIABLES. Les jetons de .pp lisent ceux de la V2, et les regles
   lisent les jetons de .pp (--fs-*, --space-*, --radius-*, --color-*) :
   pour retoucher l'echelle, on change le jeton, pas cent regles.

   CE QUI A ETE RETIRE : les regles des pages de la maquette que ce site
   n'affiche pas (politique, formulaire, localisateur, equipe, contact,
   barre collante, seuils...). Elles pesaient le tiers du fichier sans
   rien peindre.

   UNE PORTEE, PAS UNE FRONTIERE ETANCHE : les @keyframes restent globales,
   d'ou leur nom prefixe (pp-).
   ===================================================================== */

/* ---------- Les jetons ---------- */
.pp {
  /* Couleurs : les regles lisent directement les jetons de la V2 (--texte,
     --texte-2, --texte-3, --surface, --bordure, --accent, --accent-survol,
     --noir-williams, --etoile). Les bleus pales n'en ont pas : ce sont des
     teintes de l'accent, pour l'escalier, la jauge et les escomptes, posees
     une seule fois ici. #e7eff9 est deja celui de la V2 (rabais du panier). */
  --color-blue-pale: #ecf6fc;
  --color-blue-paler: #e7eff9;
  --color-blue-light: #cbddf1;
  --color-blue-mid: #a9c8e6;
  /* Les sept braquettes de la jauge, du plus pale au plus fonce. */
  --color-jauge-1: #dcebf8;
  --color-jauge-2: #c8dff3;
  --color-jauge-4: #8ab3db;
  --color-jauge-5: #5f93c8;
  /* Le texte secondaire pose sur le noir. */
  --color-sur-sombre: rgba(255, 255, 255, 0.72);

  /* Tailles, en px : celles de la V2 (13, 14, 16, 17, 20, 24). */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  /* Les roles typographiques de la V2 (v2.css, SYS-10), avec leur valeur
     de secours si la feuille de la V2 ne les porte pas encore. */
  --fs-titre-1: var(--fs-affiche, clamp(30px, 21.5px + 2.12vw, 52px)); /* .titre-affiche */
  --fs-titre-2: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); /* .titre-section */
  --fs-intro: var(--fs-chapeau, 17px); /* .hero__sous */

  /* Deux graisses, pas une de plus. */
  --fw-regular: 400;
  --fw-medium: 500;

  /* Espacements : l'echelle de la V2, multiples de 4. */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-section: var(--espace-section, clamp(64px, 7vw, 96px));
  --space-titre: var(--espace-titre, clamp(24px, 20.9px + 0.77vw, 32px));

  --radius-sm: var(--rayon);
  --radius-md: var(--rayon-photo);

  --transition-fast: var(--duree-courte) var(--courbe);

  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--texte-2);
}

/* ---------- La base, sous .pp ---------- */
.pp :is(h1, h2, h3, h4) {
  margin: 0 0 var(--space-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--texte);
  text-wrap: balance;
}
.pp h1 { font-size: var(--fs-titre-1); line-height: 1.06; letter-spacing: -0.022em; }
.pp h2 { font-size: var(--fs-titre-2); line-height: 1.12; letter-spacing: -0.016em; }
.pp h3 { font-size: var(--fs-lg); line-height: 1.25; }
.pp h4 { font-size: var(--fs-md); line-height: 1.3; }
.pp p { margin: 0 0 var(--space-md); }
.pp p:last-child { margin-bottom: 0; }
.pp strong, .pp b { font-weight: var(--fw-medium); color: var(--texte); }

/* Le conteneur de la V2 : meme largeur, meme gouttiere que l'entete et le
   pied, donc les memes bords. */
.pp .container {
  width: 100%;
  max-width: calc(var(--conteneur) + var(--gouttiere) * 2);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.pp .container-narrow { max-width: calc(840px + var(--gouttiere) * 2); }

/* ---------- Les sections ----------
   64 a 96 px d'une section a l'autre, comme le reste de la V2. Deux
   sections du meme fond qui se suivent ne gardent qu'un seul espace. La
   regle de la V2 qui fait ce travail ne vise que les enfants directs de
   <main> (v2.css, « main > ... ») : les sections de cette page sont dans
   .pp, elle ne les atteint pas. Ces regles font donc tout le travail ici,
   y compris pour la carte du reseau, enveloppee dans un div que la V2 ne
   connait pas. Les sections grises portent .section--grise, la classe de la
   V2 : c'est elle que ces regles lisent pour distinguer gris et blanc. */
.pp .section,
.pp .persona-section { padding-block: var(--space-section); }
.pp .section--grise,
.pp .persona-section--alt { background: var(--surface); }
.pp .section:not(.section--grise) + .section:not(.section--grise),
.pp .section--grise + .section--grise,
.pp .section:not(.section--grise) + .pp-localisateur .carte-reseau,
.pp .pp-localisateur + .section:not(.section--grise) { padding-top: 0; }

/* La V2 a ses propres .hero et .section, sur les memes noms : on neutralise
   la grille du hero de l'accueil, la page a la sienne. */
.pp .hero {
  display: block;
  grid-template-columns: none; grid-template-rows: none; grid-template-areas: none;
  gap: 0;
  padding-inline: 0;
}
.pp .section { padding-inline: 0; }

.pp .section-header { margin-bottom: var(--space-titre); text-align: center; }
.pp .section-header h2 { margin-bottom: var(--space-sm); }
.pp .section-header p { max-width: 560px; margin-inline: auto; color: var(--texte-3); }

/* Le surtitre, comme .surtitre de la V2 : 14 px, gris, sans capitales. */
.pp .eyebrow {
  display: inline-block;
  margin-bottom: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--texte-3);
}

/* ---------- Les boutons : ceux de la V2 (.bouton) ---------- */
.pp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--bouton-h);
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform 120ms var(--courbe);
}
.pp .btn:active { transform: scale(0.985); }
.pp .btn--primary { background: var(--accent); color: #fff; }
.pp .btn--primary:hover { background: var(--accent-survol); color: #fff; }
/* Le bouton secondaire de la V2 : gris pale sur fond blanc ; sur fond gris,
   blanc avec un filet, comme .section--grise .bouton--secondaire. */
.pp .btn--outline { background: var(--surface); color: var(--texte); }
.pp .btn--outline:hover { background: var(--surface-survol); color: var(--texte); }
.pp :is(.section--grise, .persona-section--alt) .btn--outline { background: var(--fond); box-shadow: inset 0 0 0 1px var(--bordure); }
.pp :is(.section--grise, .persona-section--alt) .btn--outline:hover { background: var(--fond); box-shadow: inset 0 0 0 1px var(--texte-3); }

/* ---------- Le haut de page ---------- */
.pp .hero { padding-block: var(--space-lg) var(--space-2xl); background: var(--fond); }
.pp .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
  text-align: center;
}
.pp .hero__title { max-width: 18ch; margin: 0 auto var(--space-sm); }
.pp .hero__subtitle {
  max-width: 38ch;
  margin: 0 auto var(--space-lg);
  font-size: var(--fs-intro);
  color: var(--texte-2);
}
.pp .hero__ctas { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); }
.pp .hero__ctas .btn { width: 100%; }
.pp .hero__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 10;
  margin: var(--space-xs) auto 0;
  border-radius: var(--radius-md);
  background: var(--surface);
}
.pp .hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) {
  .pp .hero__title { max-width: 22ch; }
  .pp .hero__subtitle { max-width: 52ch; }
  .pp .hero__ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .pp .hero__ctas .btn { width: auto; }
  .pp .hero__media { max-width: 560px; aspect-ratio: 4 / 3; }
}
@media (min-width: 960px) {
  .pp .hero { padding-block: 40px var(--space-3xl); }
  .pp .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-3xl); text-align: left; }
  .pp .hero__title { max-width: 14ch; margin-left: 0; }
  .pp .hero__subtitle { max-width: 48ch; margin-left: 0; margin-bottom: var(--space-xl); }
  .pp .hero__ctas { justify-content: flex-start; }
  .pp .hero__media { max-width: none; margin: 0; }
}

/* ---------- La bande des preuves ----------
   La note et le nombre d'avis viennent du CMS ; une case peut manquer. En
   rangee souple plutot qu'en grille : deux, trois ou quatre cases se
   repartissent toujours la largeur. */
.pp .social-proof { padding-block: var(--space-lg); background: var(--noir-williams); color: #fff; }
.pp .social-proof__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-lg) var(--space-md);
  text-align: center;
}
.pp .social-proof__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs);
  flex: 1 1 calc(50% - var(--space-md));
  min-width: 0;
}
.pp .social-proof__value {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: #fff;
}
.pp .social-proof__etoiles { display: inline-flex; gap: 2px; color: var(--etoile); }
.pp .social-proof__label { font-size: var(--fs-xs); line-height: 1.3; color: var(--color-sur-sombre); }
@media (min-width: 768px) {
  .pp .social-proof { padding-block: var(--space-xl); }
  .pp .social-proof__item { flex-basis: 0; }
  .pp .social-proof__value { font-size: var(--fs-xl); }
}

/* ---------- Sur le terrain : la bande de photos ---------- */
.pp .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.pp .gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--surface);
}
.pp .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--courbe-sortie); }
.pp .gallery__item:hover img { transform: scale(1.04); }
@media (min-width: 768px) {
  .pp .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
  .pp .gallery__item { aspect-ratio: 4 / 5; }
}

/* ---------- Les avantages (Pourquoi Williams, le portail) ---------- */
.pp .benefits { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.pp .benefit { text-align: center; }
.pp .benefit__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  margin: 0 auto var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-blue-paler);
  color: var(--accent);
}
.pp .benefit__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pp .benefit h3 { margin-bottom: var(--space-xs); }
.pp .benefit p { max-width: 42ch; margin-inline: auto; color: var(--texte-2); }
@media (min-width: 768px) {
  .pp .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
  .pp .benefit__icon { width: 56px; height: 56px; padding: var(--space-md); margin-bottom: var(--space-md); }
  /* LES TITRES S'ALIGNENT. Un titre de deux lignes a cote d'un titre d'une
     ligne decalait tout le paragraphe dessous ; on reserve deux lignes, en
     grille seulement (en pile, il n'y a rien a aligner). */
  .pp .benefit h3 { display: flex; align-items: flex-end; justify-content: center; min-height: 2.5em; }
}

/* ---------- Le programme : onglets et panneaux ---------- */
/* Un selecteur a trois segments, comme le choix du profil de la V2 : un
   cadre blanc, l'onglet choisi en fonce. Les trois choix restent toujours
   sur une rangee : un defilement horizontal en cacherait un sans le dire,
   un retour a la ligne en laissait un seul en dessous. */
.pp .persona-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--space-lg);
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
  background: var(--fond);
}
.pp .persona-tab {
  flex: 0 1 auto;
  min-height: var(--bouton-h);
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--texte-2);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.pp .persona-tab:hover { background: var(--surface); color: var(--texte); }
.pp .persona-tab[aria-selected="true"] { background: var(--texte); color: #fff; }
@media (max-width: 469px) {
  /* Au telephone, les trois onglets ne tiennent pas sur une ligne a leur
     largeur naturelle : les deux libelles courts gardent la leur, le long
     prend le reste et passe sur deux lignes. Sous 340 px, « developpement »
     se coupe d'un trait d'union plutot que de deborder de son onglet. */
  .pp .persona-tabs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; }
  .pp .persona-tab {
    padding: var(--space-2xs) var(--space-xs);
    line-height: 1.2;
    white-space: normal;
    text-wrap: balance;
    -webkit-hyphens: auto; hyphens: auto;
  }
}

.pp .persona-panel { display: none; }
.pp .persona-panel.is-active { display: block; animation: pp-panneau var(--duree) var(--courbe); }
@keyframes pp-panneau {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.pp .panel-intro { max-width: 680px; margin: 0 auto var(--space-lg); text-align: center; }
.pp .panel-intro p { color: var(--texte-2); }

.pp .panel-checklist-block {
  max-width: 920px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--fond);
}
.pp .panel-checklist-block h3 { margin-bottom: var(--space-md); font-size: var(--fs-md); text-align: center; }
.pp .checklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm) var(--space-xl); }
.pp .checklist li { position: relative; padding-left: 28px; color: var(--texte); }
.pp .checklist li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") center / 12px no-repeat;
}
@media (min-width: 700px) { .pp .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .pp .panel-checklist-block { padding: var(--space-xl); } }

/* ---------- Les fiches de palier, et les deux portes du bas ---------- */
.pp .tier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  max-width: 920px;
  margin: 0 auto;
}
.pp .tier-grid--single { max-width: 480px; }
.pp .tier-box {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--fond);
}
.pp .tier-box__head { display: flex; align-items: center; gap: var(--space-sm); }
.pp .tier-box__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--texte-3); }
.pp .tier-box__name { margin: 0; font-size: var(--fs-lg); line-height: 1.25; }
.pp .tier-box__volume { margin: 0; font-size: var(--fs-sm); color: var(--texte-2); }
.pp .tier-box__volume strong { display: block; margin-bottom: var(--space-2xs); font-size: var(--fs-base); color: var(--texte); }
.pp .tier-box__features { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-2xs); }
.pp .tier-box__features li { position: relative; padding-left: 24px; font-size: var(--fs-sm); color: var(--texte-2); }
.pp .tier-box__features li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") center / 10px no-repeat;
}

/* Le palier suivant, signale par un filet bleu et une etiquette. */
.pp .tier-box--next { box-shadow: inset 0 0 0 2px var(--accent); }
.pp .tier-box--next::before {
  content: "Prochain palier";
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 16px;
  white-space: nowrap;
}

.pp .tier-discount {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: auto;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-blue-paler);
}
.pp .tier-discount__caption,
.pp .tier-discount__sub { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent-survol); }
.pp .tier-discount__value {
  font-size: 28px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Le bouton des fiches : le bouton principal de la V2, pleine largeur. Il
   peut passer sur deux lignes sans deborder. */
.pp .tier-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  width: 100%;
  min-height: var(--bouton-h);
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-fast);
}
.pp .tier-cta:hover { background: var(--accent-survol); color: #fff; }
/* LES DEUX PORTES : LES BOUTONS S'ALIGNENT au bas de leur boite, meme
   quand les deux boites n'ont pas autant de texte. Reserve a cette grille :
   les fiches de palier ont deja une marge automatique sur leur escompte. */
.pp .tier-grid--portes .tier-cta { margin-top: auto; }

@media (min-width: 700px) { .pp .tier-grid:not(.tier-grid--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .pp .tier-box { gap: var(--space-md); padding: var(--space-xl); }
  .pp .tier-box__name { font-size: var(--fs-xl); }
  .pp .tier-discount { padding: var(--space-md); }
  .pp .tier-discount__value { font-size: 36px; }
}

/* La citation de l'entrepreneur, sous ses paliers. */
.pp .panel-quote {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  max-width: 920px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--fond);
  text-align: center;
}
.pp .panel-quote__photo { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--surface); }
.pp .panel-quote__photo img { width: 100%; height: 100%; object-fit: cover; }
.pp .panel-quote__body { flex: 1; }
.pp .panel-quote__text { margin: 0 0 var(--space-xs); font-size: var(--fs-md); color: var(--texte); }
.pp .panel-quote__attr { font-size: var(--fs-sm); color: var(--texte-3); }
.pp .panel-quote__name { font-weight: var(--fw-medium); color: var(--texte); }
@media (min-width: 768px) {
  .pp .panel-quote { flex-direction: row; gap: var(--space-xl); padding: var(--space-xl); text-align: left; }
  .pp .panel-quote__photo { width: 80px; height: 80px; }
}

/* Le mecanisme du palier suivant : une carte blanche, un trait bleu. */
.pp .discount-mechanism {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--fond);
  box-shadow: inset 4px 0 0 var(--accent);
}
.pp .discount-mechanism h3 { margin-bottom: var(--space-xs); font-size: var(--fs-md); line-height: 1.3; }
.pp .discount-mechanism p { color: var(--texte-2); }
@media (min-width: 768px) {
  .pp .discount-mechanism { margin-top: var(--space-2xl); padding: var(--space-xl); }
  .pp .discount-mechanism h3 { font-size: var(--fs-lg); }
}

/* L'appel a l'action au bas des paliers, separe de la mecanique par un
   filet : sans lui, le bouton se lisait comme la suite du paragraphe. */
.pp .tier-cta-block {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--bordure);
  text-align: center;
}
.pp .tier-cta-block p { margin-bottom: var(--space-md); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--texte); }
.pp .tier-cta-block span { display: block; max-width: 52ch; margin: var(--space-sm) auto 0; font-size: var(--fs-sm); color: var(--texte-3); }

/* ---------- Le voile sur les escomptes ----------
   LE VRAI TAUX N'EST PAS DANS LA PAGE pour qui ne le voit pas : le gabarit
   ecrit « ?? % », jamais le chiffre. Un flou CSS se retire en deux clics
   dans l'inspecteur ; il n'est la que pour dire « il y a un chiffre ici ».
   Le lecteur d'ecran recoit une phrase d'invitation a la place (.pp-sr). */
.pp .pp-voile {
  display: inline-block;
  filter: blur(6px);
  -webkit-user-select: none; user-select: none;
  pointer-events: none;
  letter-spacing: 0.08em;
  /* LE CHIFFRE VOILE GROSSIT AVEC LE PALIER, dans la jauge : la taille dit
     « ca monte » sans dire de combien. */
  transform: scale(var(--voile-ech, 1));
  transform-origin: right center;
  transition: filter 280ms ease, transform 280ms ease;
}
/* Dans une phrase, le flou s'allege pour ne pas baver sur les mots voisins,
   un cran plus fonce que le texte : sinon il passe pour un glyphe manquant. */
.pp .pp-voile--enligne {
  filter: blur(3.4px);
  padding: 0 var(--space-2xs);
  vertical-align: baseline;
  color: var(--texte);
  font-weight: var(--fw-medium);
}
/* Un bref surcroit de flou au changement de palier : l'oeil accroche le
   mouvement meme quand l'ecart de taille est petit. */
.pp .pp-voile.est-recalcule { filter: blur(14px); transform: scale(calc(var(--voile-ech, 1) * 0.94)); }
@media (prefers-reduced-motion: reduce) {
  .pp .pp-voile { transition: none; }
  .pp .pp-voile.est-recalcule { filter: blur(6px); }
  .pp .persona-panel.is-active { animation: none; }
  .pp .gallery__item img { transition: none; }
}
/* Le flou ne survit ni a l'impression ni au contraste eleve : on retire le
   chiffre de remplacement plutot que de le laisser paraitre en clair. */
@media print, (forced-colors: active) {
  .pp .pp-voile { filter: none; color: transparent; transform: none; }
}
.pp .pp-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le bouton du PDF (connectes qui voient les taux), sous l'entete des paliers. */
.pp .pp-pdf { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.pp .pp-pdf__mot { font-size: var(--fs-sm); color: var(--texte-3); }
.pp .pp-pdf .btn { white-space: normal; }
.pp .pp-pdf svg {
  flex: none; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pp .pp-voile-note { display: block; margin-top: var(--space-2xs); font-size: var(--fs-xs); line-height: 1.4; color: var(--texte-3); }

/* ---------- L'escalier des paliers ----------
   DEUX GRILLES SUPERPOSEES : les barres dans la leur, sur une meme ligne de
   base ; les noms dans une autre, dessous. Ensemble, un nom de deux lignes
   faisait flotter sa barre au-dessus des voisines.
   UNE SEULE FAMILLE DE BLEUS : pale pour l'entrepreneur, clair pour le
   compte en developpement, plein pour le detaillant. Plus c'est profond,
   plus l'escompte est grand.
   La hauteur de chaque barre (--marche) est posee par le gabarit : la vraie
   pour qui voit les taux, une marche reguliere pour les autres. */
.pp .pp-escalier { margin: var(--space-xl) 0 var(--space-2xl); }
.pp .pp-escalier__cadre {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-xs);
  align-items: end;
  height: 240px;
  margin: 0; padding: 0; list-style: none;
}
.pp .pp-escalier__col { display: flex; flex-direction: column; height: 100%; margin: 0; }
/* LA BARRE A SA PROPRE PISTE : la hauteur restante une fois le taux pose.
   100 % veut alors dire le haut de la piste, pour de vrai. */
.pp .pp-escalier__piste { display: flex; flex: 1 1 auto; align-items: flex-end; min-height: 0; }
.pp .pp-escalier__taux {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-align: center;
  color: var(--teinte-texte);
}
/* LE SECOND TAUX (articles vendus en palette) est rendu sur TOUTES les
   colonnes, vide sur celles qui n'en ont pas : une etiquette plus courte
   laisserait a sa colonne une piste plus haute. */
.pp .pp-escalier__second { display: block; margin-top: var(--space-2xs); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1; opacity: 0.7; }
/* « d'escompte » ne s'ecrit qu'au telephone. */
.pp .pp-escalier__unite { display: none; }
/* Le nom du palier, en vrai texte dans la marche : masque a l'oeil sur
   grand ecran (les pieds le disent), lu par le lecteur d'ecran. */
.pp .pp-escalier__libelle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pp .pp-escalier__barre {
  display: block;
  flex: none;
  width: 100%;
  height: var(--marche);
  border: 1px solid var(--teinte-bord);
  border-bottom: 3px solid var(--teinte-base);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--teinte-fond);
}
.pp .pp-escalier__pieds {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-xs);
  margin: var(--space-sm) 0 0; padding: 0; list-style: none;
}
.pp .pp-escalier__pied { margin: 0; text-align: center; }
.pp .pp-escalier__nom { display: block; font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.3; color: var(--texte); }
.pp .pp-escalier__volume { display: block; margin-top: var(--space-2xs); font-size: 12px; line-height: 1.3; color: var(--texte-3); }

.pp .pp-escalier--entrepreneur {
  --teinte-fond: var(--color-blue-pale); --teinte-bord: var(--color-blue-light);
  --teinte-base: var(--color-blue-light); --teinte-texte: var(--texte-2);
}
.pp .pp-escalier--developpement {
  --teinte-fond: var(--color-blue-light); --teinte-bord: var(--color-blue-mid);
  --teinte-base: var(--color-blue-mid); --teinte-texte: var(--accent);
}
.pp .pp-escalier--detaillant {
  --teinte-fond: var(--accent); --teinte-bord: var(--accent-survol);
  --teinte-base: var(--accent-survol); --teinte-texte: var(--accent-survol);
}

.pp .pp-escalier__legende {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg);
  margin: var(--space-lg) 0 0; padding: 0; list-style: none;
  font-size: var(--fs-xs);
  color: var(--texte-2);
}
.pp .pp-escalier__legende li { display: flex; align-items: center; gap: var(--space-xs); margin: 0; }
.pp .pp-escalier__puce {
  width: 12px; height: 12px;
  border: 1px solid var(--teinte-bord);
  border-radius: var(--radius-sm);
  background: var(--teinte-fond);
}
.pp .pp-escalier__note { margin-top: var(--space-md); font-size: var(--fs-xs); color: var(--texte-3); text-align: center; }

/* La marche que la jauge designe, pour relier les deux lectures. */
.pp .pp-escalier__col.est-le-votre .pp-escalier__barre { outline: 2px solid var(--accent-survol); outline-offset: 2px; }
.pp .pp-escalier__col.est-le-votre .pp-escalier__taux { text-decoration: underline; text-underline-offset: 4px; }

/* Le titre de l'escalier, qui sert aussi de poignee au telephone. */
.pp .pp-escalier-bloc { margin-top: var(--space-xs); }
.pp .pp-escalier-bloc__titre {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--texte);
  list-style: none;
  cursor: default;
  pointer-events: none;
}
.pp .pp-escalier-bloc__titre::-webkit-details-marker { display: none; }
.pp .pp-escalier-bloc__bouton { display: none; }

/* ---------- La jauge des volumes ----------
   Une carte blanche, un instrument ; la reponse sur un panneau sombre. Sa
   piste est l'echelle elle-meme : les sept braquettes dessinees dessous,
   le curseur par-dessus, sur une piste transparente.
   Pas de « display » ici : la jauge porte l'attribut hidden tant que le
   script ne tourne pas. */
.pp .pp-jauge {
  margin: var(--space-xl) 0 var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--fond);
}
.pp .pp-jauge__titre { margin: 0 0 var(--space-2xs); font-size: var(--fs-lg); line-height: 1.25; }
.pp .pp-jauge__label { display: block; margin-bottom: var(--space-md); font-size: var(--fs-sm); color: var(--texte-3); }
.pp .pp-jauge__montant {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: 36px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent-survol);
  font-variant-numeric: tabular-nums;
}
.pp .pp-jauge__zone { position: relative; height: 44px; }
.pp .pp-jauge__segments {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2xs);
  align-items: center;
}
.pp .pp-jauge__seg {
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-blue-light);
  transition: height 120ms ease, background-color 120ms ease;
}
/* Le bleu se fonce de gauche a droite, comme les barres de l'escalier. */
.pp .pp-jauge__seg[data-seg="0"] { background: var(--color-jauge-1); }
.pp .pp-jauge__seg[data-seg="1"] { background: var(--color-jauge-2); }
.pp .pp-jauge__seg[data-seg="2"] { background: var(--color-blue-mid); }
.pp .pp-jauge__seg[data-seg="3"] { background: var(--color-jauge-4); }
.pp .pp-jauge__seg[data-seg="4"] { background: var(--color-jauge-5); }
.pp .pp-jauge__seg[data-seg="5"] { background: var(--accent); }
.pp .pp-jauge__seg[data-seg="6"] { background: var(--accent-survol); }
.pp .pp-jauge__seg.est-actif { height: 24px; }

.pp .pp-jauge__piste {
  position: absolute; inset: 0;
  width: 100%; height: 44px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  cursor: grab;
}
.pp .pp-jauge__piste:active { cursor: grabbing; }
.pp .pp-jauge__piste::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.pp .pp-jauge__piste::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px;
  margin-top: 8px;
  border: 3px solid var(--accent-survol);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
}
.pp .pp-jauge__piste::-moz-range-track { height: 44px; background: transparent; border: 0; }
.pp .pp-jauge__piste::-moz-range-thumb {
  width: 22px; height: 22px;
  border: 3px solid var(--accent-survol);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
}
.pp .pp-jauge__piste:focus-visible { outline: 2px solid var(--accent-survol); outline-offset: 4px; }

/* UNE GRADUATION PAR PALIER, sur la meme grille que les segments, donc sous
   le debut du palier qu'elle nomme. */
.pp .pp-jauge__graduations {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2xs);
  margin-top: var(--space-xs);
  font-size: 12px;
  line-height: 1;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}
.pp .pp-jauge__graduations span { white-space: nowrap; }

/* La reponse, sur panneau sombre : le palier a gauche, le taux a droite. */
.pp .pp-jauge__resultat {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--texte);
  color: #fff;
}
.pp .pp-jauge__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.pp .pp-jauge__gauche { min-width: 0; }
.pp .pp-jauge__amorce { display: block; margin-bottom: var(--space-2xs); font-size: var(--fs-xs); color: var(--color-sur-sombre); }
.pp .pp-jauge__phrase { display: block; font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: 1.25; }
.pp .pp-jauge__detail { display: block; margin-top: var(--space-2xs); font-size: var(--fs-sm); line-height: 1.4; color: var(--color-sur-sombre); }
.pp .pp-jauge__droite { flex: none; text-align: right; }
.pp .pp-jauge__taux {
  display: block;
  font-size: 32px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-blue-light);
  font-variant-numeric: tabular-nums;
}
.pp .pp-jauge__taux-mot { display: block; margin-top: var(--space-2xs); font-size: var(--fs-xs); color: var(--color-sur-sombre); }
.pp .pp-jauge__second { display: block; margin-top: var(--space-2xs); font-size: var(--fs-xs); color: var(--color-sur-sombre); }
.pp .pp-jauge__second:empty { display: none; }
/* Le bouton sur fond sombre : blanc plein, c'est le seul contraste qui tient. */
.pp .pp-jauge__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--bouton-h);
  margin-top: var(--space-md);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--fond);
  color: var(--texte);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-fast);
}
.pp .pp-jauge__cta:hover { background: var(--surface-survol); color: var(--texte); }
.pp .pp-jauge__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Au telephone et a la tablette debout ----------
   L'ESCALIER SE COUCHE : huit colonnes de 40 px ne se lisent pas. Chaque
   palier devient une ligne (le taux, le nom, puis une piste pleine largeur
   ou la barre occupe sa part) : des pistes de meme longueur se comparent
   d'un coup d'oeil. Le titre porte un vrai bouton pour le replier. */
@media (max-width: 900px) {
  .pp .pp-escalier__cadre { grid-template-columns: minmax(0, 1fr); gap: 0; height: auto; }
  .pp .pp-escalier__col {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "taux nom" "piste piste";
    align-items: center;
    gap: var(--space-2xs) var(--space-xs);
    height: auto;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--bordure);
  }
  .pp .pp-escalier__taux { grid-area: taux; margin: 0; font-size: var(--fs-base); text-align: left; }
  .pp .pp-escalier__unite { display: inline; font-size: var(--fs-xs); font-weight: var(--fw-regular); }
  .pp .pp-escalier__libelle {
    position: static;
    grid-area: nom;
    width: auto; height: auto;
    margin: 0; padding: 0;
    overflow: visible;
    clip: auto; clip-path: none;
    white-space: normal;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    color: var(--texte);
    text-align: left;
  }
  .pp .pp-escalier__piste { grid-area: piste; display: block; margin-top: var(--space-2xs); }
  .pp .pp-escalier__barre { width: var(--marche); height: 8px; border-bottom-width: 1px; border-radius: var(--radius-sm); }
  .pp .pp-escalier__pieds { display: none; }
  .pp .pp-escalier__legende { justify-content: flex-start; gap: var(--space-xs) var(--space-md); }

  .pp .pp-escalier-bloc { margin-bottom: var(--space-lg); }
  .pp .pp-escalier-bloc__titre { pointer-events: auto; cursor: pointer; }
  .pp .pp-escalier-bloc__mot { display: block; margin-bottom: var(--space-sm); }
  .pp .pp-escalier-bloc__bouton {
    display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
    width: 100%;
    min-height: var(--bouton-h);
    padding: 0 var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--fond);
    color: var(--texte);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
  }
  .pp .pp-escalier-bloc__bouton svg {
    flex: none; width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--duree) var(--courbe-sortie);
  }
  .pp .pp-escalier-bloc__cacher { display: none; }
  .pp .pp-escalier-bloc[open] .pp-escalier-bloc__voir { display: none; }
  .pp .pp-escalier-bloc[open] .pp-escalier-bloc__cacher { display: inline; }
  .pp .pp-escalier-bloc[open] .pp-escalier-bloc__bouton svg { transform: rotate(180deg); }

  /* La reponse de la jauge se met en colonne : le taux passe sous le nom. */
  .pp .pp-jauge { padding: var(--space-lg) var(--space-md) var(--space-md); }
  .pp .pp-jauge__montant { font-size: 32px; }
  .pp .pp-jauge__ligne { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .pp .pp-jauge__droite { text-align: left; }
  .pp .pp-jauge__taux { font-size: 28px; }
  .pp .pp-jauge__cta { width: 100%; }
}

/* ---------- Les temoignages ----------
   Comme les temoignages de la V2 : des cartes grises sans bordure, la
   citation en 17 px, le nom en 500. Les etoiles sont le dessin de la V2. */
.pp .testimonial-featured {
  position: relative;
  max-width: 820px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}
.pp .testimonial-featured__stars { display: flex; justify-content: center; gap: 2px; margin-bottom: var(--space-sm); color: var(--etoile); }
.pp .testimonial-featured__quote {
  margin: 0 0 var(--space-lg);
  font-size: clamp(18px, 14px + 0.7vw, 24px);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--texte);
  text-wrap: pretty;
}
.pp .testimonial-featured__quote::before { content: "« "; }
.pp .testimonial-featured__quote::after { content: " »"; }
.pp .testimonial-featured__author { display: inline-flex; align-items: center; gap: var(--space-sm); }
.pp .testimonial-featured__author .avatar { width: 48px; height: 48px; font-size: var(--fs-sm); }
@media (min-width: 768px) {
  .pp .testimonial-featured { margin-bottom: var(--space-xl); padding: var(--space-2xl) var(--space-3xl); }
}

.pp .testimonials-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 640px) { .pp .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pp .testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp .testimonial {
  display: flex; flex-direction: column; gap: var(--space-sm);
  margin: 0;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.pp .testimonial__head { display: flex; align-items: center; gap: var(--space-sm); }
.pp .testimonial__head-info { flex: 1; min-width: 0; }
.pp .testimonial__name { font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1.3; color: var(--texte); }
.pp .testimonial__company { font-size: var(--fs-sm); line-height: 1.3; color: var(--texte-3); }
.pp .testimonial__stars { display: flex; gap: 2px; margin-top: var(--space-2xs); color: var(--etoile); }
.pp .testimonial__quote { margin: 0; font-size: var(--fs-md); color: var(--texte); }
/* La video : la facade de la V2 (v2/_video). Son titre redirait le nom deja
   ecrit en tete de la carte ; il reste lu par le lecteur d'ecran (le lien
   porte « Lire la video : ... »). */
.pp .testimonial__video { margin-top: var(--space-2xs); }
.pp .testimonial__video .video figcaption { display: none; }

.pp .avatar {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.pp .avatar--alt { background: var(--accent-survol); }
.pp .avatar--ink { background: var(--texte); }
.pp .avatar--soft { background: var(--texte-3); }

.pp .reviews-cta { margin: var(--space-xl) 0 0; text-align: center; }

/* ---------- La carte du reseau (v2/_carte-reseau) ---------- */
.pp .carte-reseau { padding-block: var(--space-section); background: var(--fond); }
.pp .carte-reseau__grille { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 1024px) { .pp .carte-reseau__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }
.pp .carte-reseau__titre { margin: 0; font-size: var(--fs-titre-2); }
.pp .carte-reseau__texte { max-width: 36rem; margin-top: var(--space-sm); color: var(--texte-2); }
.pp .carte-reseau__lien { margin-top: var(--space-md); }
.pp .carte-reseau__cadre { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--surface); }
@media (min-width: 1024px) { .pp .carte-reseau__cadre { aspect-ratio: 16 / 10; } }
.pp .carte-reseau__cadre--large { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .pp .carte-reseau__cadre--large { aspect-ratio: 21 / 9; } }
.pp .carte-reseau__carte { width: 100%; height: 100%; background: var(--surface); }
/* Les bulles de la carte : leur style vient de v2/_carte-reseau (10 a 11 px,
   graisse 600, capitales). On les ramene au systeme, ici, sans toucher au
   gabarit partage. Leaflet ecrit en Helvetica, ses boutons + et - en gras :
   meme police et meme graisse que le reste. */
.pp .leaflet-container,
.pp .dm-popup { font-family: var(--police); }
.pp .leaflet-bar a { font-family: var(--police); font-weight: var(--fw-medium); }
.pp .dm-popup__badge {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--texte);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
}
.pp .dm-popup__title { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--texte); }
.pp .dm-popup__city { font-size: var(--fs-xs); color: var(--texte-3); }
.pp .dm-popup__phone,
.pp .dm-popup__link { font-size: var(--fs-xs); color: var(--accent-survol); }
.pp .dm-popup__actions { gap: var(--space-md); }
.pp .dm-popup__btn {
  display: inline-flex; align-items: center;
  min-height: var(--bouton-h);
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
}
.pp .dm-popup__btn:hover { background: var(--accent-survol); }

/* ---------- Vos outils ---------- */
.pp .tools-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 768px) { .pp .tools-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp .tool-card {
  display: block;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.pp .tool-card h3 { margin-bottom: var(--space-xs); }
.pp .tool-card p { color: var(--texte-2); }
/* L'etiquette, comme .etiquette de la V2 : 12 px, blanc, rayon de 4 px. */
.pp .tool-card__badge {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--fond);
  color: var(--texte);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 16px;
}
.pp .tool-card--link { transition: background-color var(--transition-fast); }
.pp .tool-card--link:hover { background: var(--surface-survol); }

/* ---------- Le portail : l'encadre de bas de section ---------- */
.pp .callout {
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--fond);
  color: var(--texte-2);
}