/* ═══════════════════════════════════════════════════════════════
   VetoPulse — page de présentation.

   Feuille AUTONOME : la page ne charge ni style.css ni app.js du
   site clinique. Palette identique au thème, écrite en dur.

   Parti pris : page claire. Un seul aplat de couleur soutenue,
   l'appel final. Partout ailleurs, du blanc, du bleu très clair,
   et des photos pour porter la couleur.
   ═══════════════════════════════════════════════════════════════ */

.vp {
  --marque:    #2C5AA0;
  --marque-f:  #22467E;
  --marque-c:  #EAF1FA;
  --action:    #F4783A;
  --action-h:  #DD6724;
  --texte:     #15243D;
  --gris:      #5E6E80;
  --filet:     #E2E8F0;
  --fond:      #F5F8FC;
}

/* ── Remise à zéro locale ──────────────────────────────────────── */
.vp, .vp *, .vp *::before, .vp *::after { box-sizing: border-box; }

/* Sans limite de largeur, un seul élément qui déborde suffit à rendre
   la page défilable horizontalement — et un en-tête « sticky » suit
   alors ce défilement, donc se décale vers la droite. Le site
   clinique avait cette protection, pas cette page.               */
html, body.vp { overflow-x: clip; max-width: 100%; }

body.vp {
  margin: 0;
  background: #fff;
  color: var(--texte);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vp h1, .vp h2, .vp h3 {
  font-family: Nunito, system-ui, sans-serif;
  font-weight: 800; line-height: 1.16; letter-spacing: -.018em;
  margin: 0; color: var(--texte); text-wrap: balance;
}
.vp h1 { font-size: clamp(31px, 3.4vw, 47px); }
.vp h2 { font-size: clamp(25px, 2.4vw, 34px); }
.vp h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.vp p  { margin: 0 0 14px; color: var(--texte); }
.vp p:last-child { margin-bottom: 0; }
.vp a  { color: inherit; text-decoration: none; }
.vp ul, .vp ol { margin: 0; padding: 0; list-style: none; }
.vp img { max-width: 100%; height: auto; display: block; }
.vp figure { margin: 0; }
.vp :focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 6px; }

.vp-wrap {
  /* Nommée pour que les rangées à défilement puissent la reprendre
     exactement, au lieu d'en supposer la valeur.                 */
  --marge-vp: clamp(20px, 5vw, 48px);
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-inline: var(--marge-vp);
}

/* ── En-têtes de section ───────────────────────────────────────── */
.vp-head { max-width: 720px; margin: 0 0 clamp(30px, 3.6vw, 44px); }
.vp-head--c { margin-inline: auto; text-align: center; }

.vp-eyebrow {
  display: block;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--marque); margin: 0 0 12px;
}
.vp .vp-lead {
  font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.62;
  color: var(--gris); margin: 15px 0 0; text-wrap: pretty;
}

/* ── Boutons ───────────────────────────────────────────────────────
   Trois variantes seulement, chacune avec un contraste vérifié :
   orange plein sur clair, contour bleu sur clair, blanc plein sur
   l'aplat bleu. Aucun bouton clair sur fond clair.               */
.vp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 100px;
  font-family: Poppins, system-ui, sans-serif; font-weight: 600; font-size: 15.5px;
  border: 2px solid transparent; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.vp-btn--cta {
  background: var(--action); border-color: var(--action); color: #fff;
  box-shadow: 0 8px 20px rgba(244, 120, 58, .26);
}
.vp-btn--cta:hover {
  background: var(--action-h); border-color: var(--action-h);
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(244, 120, 58, .34);
}
.vp-btn--outline,
.vp-btn--blanc {
  background: var(--marque); border-color: var(--marque); color: #fff;
  box-shadow: 0 8px 20px rgba(44, 90, 160, .22);
}
.vp-btn--outline:hover,
.vp-btn--blanc:hover {
  background: var(--marque-f); border-color: var(--marque-f);
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(44, 90, 160, .3);
}
.vp-btn--sm { padding: 11px 22px; font-size: 14.5px; }

/* Un libellé de bouton ne se coupe jamais en deux lignes */
.vp-btn { white-space: nowrap; }
.vp-court { display: none; }

/* Le texte d'un bouton est blanc, quelle que soit la variante et quel
   que soit l'élément qui le porte — y compris les <span> des libellés
   adaptatifs, qui n'héritaient pas de la couleur.                  */
.vp .vp-btn,
.vp .vp-btn span,
.vp .vp-btn b {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Les boutons passent au-dessus de tout élément décoratif et
   reçoivent le toucher en priorité. « touch-action » supprime le
   délai de double-tap de Chrome mobile.                          */
.vp-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px;
  position: relative; z-index: 3; }
.vp-btn { position: relative; z-index: 3; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; }
.vp a { -webkit-tap-highlight-color: transparent; }
.vp-btns--c { justify-content: center; }

/* ── En-tête de page ───────────────────────────────────────────── */
.vp-hdr .vp-btn { z-index: 41; }
.vp-hdr {
  position: sticky; top: 0; z-index: 40;
  background: #fff; border-bottom: 1px solid var(--filet);
}
.vp-hdr .vp-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-block: 13px;
}
.vp-hdr .vp-btn { flex: none; }
.vp-mark { display: flex; align-items: center; gap: 11px; min-width: 0; }
.vp-mark svg { width: 34px; height: 34px; flex: none; }
.vp-mark span { min-width: 0; }
.vp-mark b {
  display: block; color: var(--marque);
  font-family: Nunito, system-ui, sans-serif; font-weight: 800;
  font-size: 21px; line-height: 1.2; letter-spacing: -.02em;
}
.vp-mark small {
  display: block; color: var(--gris);
  font-family: Inter, system-ui, sans-serif; font-weight: 500;
  font-size: 11.5px; line-height: 1.35;
  white-space: nowrap;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.vp-hero {
  background: linear-gradient(180deg, var(--marque-c) 0%, #F7FAFD 62%, #fff 100%);
  padding-block: clamp(46px, 5.5vw, 78px);
}
.vp-hero__in {
  display: grid; gap: clamp(32px, 4.5vw, 58px);
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
}
.vp-hero h1 { margin-bottom: 18px; }
.vp-hero .vp-lead { margin-top: 0; max-width: 54ch; color: #4A5C70; }

.vp .vp-puces { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 52px; }
.vp-puces li {
  position: relative; padding-left: 25px;
  font-size: 15px; color: var(--gris);
}
.vp-puces li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--marque-c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5AA0' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.vp-hero__img { position: relative; }
.vp-hero__img img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 24px 54px rgba(21, 36, 61, .18);
}
/* Purement informative : elle ne doit jamais capter un toucher */
.vp-hero__vignette {
  pointer-events: none;
  position: absolute; left: -14px; bottom: -20px;
  max-width: 260px; background: #fff;
  border: 1px solid var(--filet); border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 14px 34px rgba(21, 36, 61, .13);
}
.vp-hero__vignette b {
  display: block; font-family: Nunito, system-ui, sans-serif; font-weight: 800;
  font-size: 22px; color: var(--marque); line-height: 1.2;
}
.vp-hero__vignette span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--gris); }

/* ── Bandeau de chiffres ───────────────────────────────────────── */
.vp-band { background: var(--marque-c); padding-block: 30px; }
/* Les colonnes suivent le nombre de chiffres. Fixer « repeat(4, …) »
   laissait une colonne vide après le retrait d'un chiffre, ce qui
   décalait l'ensemble vers la gauche.                             */
.vp-band ul {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 22px; text-align: center;
}
.vp-band b {
  display: block; font-family: Nunito, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(23px, 2.2vw, 29px); line-height: 1.15; color: var(--marque);
}
.vp-band span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: #4A5C70; }

/* ── Sections ──────────────────────────────────────────────────── */
.vp-sec { padding-block: clamp(52px, 6.2vw, 82px); }
.vp-sec--pale { background: var(--fond); }

/* ── Deux colonnes texte / photo ───────────────────────────────── */
.vp-duo {
  display: grid; gap: clamp(30px, 4.5vw, 58px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
}
.vp-duo .vp-head { margin-bottom: 18px; }
.vp-duo p { color: var(--gris); }
.vp-duo__img img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 22px; box-shadow: 0 18px 42px rgba(21, 36, 61, .14);
}

/* ── Cartes ────────────────────────────────────────────────────── */
.vp-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--filet); border-radius: 18px;
  padding: 26px 24px 28px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.vp-card:hover {
  border-color: #BFD4EE; transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(21, 36, 61, .09);
}
.vp-card h3 { margin-bottom: 9px; }
.vp-card p { font-size: 15.5px; line-height: 1.6; color: var(--gris); }
.vp-ic {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--marque-c); color: var(--marque);
  display: grid; place-items: center; margin-bottom: 16px;
  font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 17px;
}

/* ── Galerie de personnalisation ───────────────────────────────── */
.vp-gal { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-gal figure { position: relative; border-radius: 18px; overflow: hidden; }
.vp-gal img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .35s;
}
.vp-gal figure:hover img { transform: scale(1.04); }
.vp-gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 15px; color: #fff;
  font-family: Poppins, system-ui, sans-serif; font-weight: 600; font-size: 15px;
  background: linear-gradient(180deg, rgba(21,36,61,0) 0%, rgba(21,36,61,.82) 100%);
}

/* ── Étiquettes ────────────────────────────────────────────────── */
.vp-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.vp-tags span {
  background: var(--marque-c); color: var(--marque);
  border-radius: 100px; padding: 9px 20px;
  font-size: 15px; font-weight: 500;
}

/* ── Les huit pages ────────────────────────────────────────────── */
.vp-pages { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vp-pages a {
  display: block; background: #fff;
  border: 1px solid var(--filet); border-radius: 16px; padding: 20px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.vp-pages a:hover {
  border-color: var(--marque); transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(21, 36, 61, .10);
}
.vp-pages b {
  display: block; font-family: Nunito, system-ui, sans-serif; font-weight: 700;
  font-size: 17px; color: var(--marque); margin-bottom: 6px;
}
.vp-pages span { display: block; font-size: 14px; line-height: 1.5; color: var(--gris); }

/* ── Tableau comparatif ────────────────────────────────────────── */
.vp-tbl { background: #fff; border: 1px solid var(--filet); border-radius: 18px; overflow: hidden; }
.vp-tbl table { width: 100%; border-collapse: collapse; }
.vp-tbl th, .vp-tbl td {
  padding: 15px 18px; text-align: left; font-size: 15.5px;
  border-bottom: 1px solid var(--filet);
}
.vp-tbl thead th {
  font-family: Poppins, system-ui, sans-serif; font-weight: 600; font-size: 13.5px;
  color: var(--gris); background: var(--fond); white-space: nowrap;
}
.vp-tbl tbody td:first-child { color: var(--gris); }
.vp-tbl .vp-hi { background: var(--marque-c); color: var(--marque); font-weight: 600; }
.vp-tbl thead th.vp-hi { color: var(--marque); }
.vp-tbl tbody tr:last-child td { border-bottom: none; }
.vp .vp-note { margin-top: 20px; font-size: 14.5px; color: var(--gris); text-align: center; }

/* ── Étapes ────────────────────────────────────────────────────── */
.vp-steps {
  counter-reset: vp;
  display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vp-steps li { counter-increment: vp; }
.vp-steps li::before {
  content: counter(vp);
  font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 13px;
  color: #fff; background: var(--marque);
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 14px;
}
/* Le filet sépare le titre de son paragraphe, il ne coiffe plus la
   colonne : numéro, titre, filet, texte.                          */
.vp-steps b {
  display: block; font-family: Nunito, system-ui, sans-serif;
  font-weight: 700; font-size: 17.5px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 3px solid #CFDFF2;
}
.vp-steps span { font-size: 15px; line-height: 1.55; color: var(--gris); }

/* ── Questions fréquentes ──────────────────────────────────────── */
.vp-faq { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.vp-faq details {
  background: #fff; border: 1px solid var(--filet); border-radius: 14px; padding: 0 22px;
}
.vp-faq details[open] { border-color: #BFD4EE; }
.vp-faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 17px 32px 17px 0;
  font-family: Nunito, system-ui, sans-serif; font-weight: 700; font-size: 16.5px;
}
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary::after {
  content: ""; position: absolute; right: 5px; top: 23px;
  width: 9px; height: 9px;
  border-right: 2.2px solid var(--marque); border-bottom: 2.2px solid var(--marque);
  transform: rotate(45deg); transition: transform .2s, top .2s;
}
.vp-faq details[open] summary::after { transform: rotate(-135deg); top: 27px; }
.vp-faq p { padding-bottom: 18px; font-size: 15.5px; line-height: 1.62; color: var(--gris); }

/* ── Appel final ───────────────────────────────────────────────────
   Clair comme le reste de la page : titre foncé sur fond très clair,
   la couleur ne porte que sur le bouton.                          */
.vp-cta {
  background: var(--fond);
  border-top: 1px solid var(--filet);
  padding-block: clamp(54px, 6.6vw, 88px);
}
.vp-cta h2 { color: var(--texte); }
.vp-cta .vp-lead { color: var(--gris); }
.vp .vp-sign { margin-top: 52px; font-size: 13.5px; color: var(--gris); text-align: center; }

/* ── Pied ──────────────────────────────────────────────────────── */
.vp-ft { background: #fff; border-top: 1px solid var(--filet); padding-block: 24px; font-size: 14px; color: var(--gris); }
.vp-ft .vp-wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.vp-ft a { color: var(--marque); font-weight: 600; }
.vp-ft a:hover { text-decoration: underline; }

/* ── Bandeau de démonstration, en haut du site clinique ────────── */
.vp-bandeau {
  background: #15243D; color: #DCE6F3;
  font-family: Inter, system-ui, sans-serif; font-size: 13.5px;
  padding-block: 9px;
}
.vp-bandeau .vp-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 8px 16px; flex-wrap: wrap; text-align: center;
}
.vp-bandeau b { color: #fff; font-weight: 600; }
.vp-bandeau a { color: #F4783A; font-weight: 600; border-bottom: 1px solid rgba(244,120,58,.5); }
.vp-bandeau a:hover { color: #fff; border-color: #fff; }

/* ── Adaptation aux écrans ─────────────────────────────────────── */
@media (max-width: 1000px) {
  .vp-hero__in { grid-template-columns: 1fr; }
  .vp-hero__img { order: -1; }
  .vp-hero__vignette { left: auto; right: 12px; bottom: -16px; max-width: 220px; }
  .vp-duo { grid-template-columns: 1fr; }
  .vp-duo__img { order: -1; }
  .vp-grid, .vp-pages, .vp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-band ul { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-gal { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* En-tête : libellé court côté bouton, et tout le bloc du logo
     réduit — mot-symbole ET sous-titre — pour que les deux tiennent
     côte à côte sur une seule ligne. Le sous-titre était masqué,
     il reste désormais lisible.                                    */
  .vp-long  { display: none; }
  .vp-court { display: inline; }
  .vp-mark b { font-size: 17px; }
  .vp-mark small { font-size: 10.5px; letter-spacing: -.01em; }
  .vp-mark svg { width: 28px; height: 28px; }
  .vp-mark { gap: 9px; }
  .vp-hdr .vp-wrap { gap: 10px; }
  .vp-hdr .vp-btn { width: auto; padding: 10px 15px; font-size: 13.5px; }
}

/* On serre par paliers plutôt que de sacrifier le sous-titre. */
@media (max-width: 440px) {
  /* Le logo respire un peu plus du bord gauche */
  .vp-hdr .vp-wrap { padding-left: 18px; }
  .vp-mark b { font-size: 15.5px; }
  .vp-mark small { font-size: 8.6px; letter-spacing: -.015em; }
  .vp-mark svg { width: 26px; height: 26px; }
  .vp-hdr__a { gap: 7px; }
  /* Le sous-titre est conservé. C'est le libellé du bouton qui cède :
     « Démo » suffit à côté d'un bouton orange, alors qu'un sous-titre
     tronqué ne dit plus rien.                                     */
  .vp-hdr .vp-btn { padding: 9px 12px; font-size: 12.5px; }
  .vp-hdr .vp-btn .vp-court { display: none; }
  .vp-hdr .vp-btn::after { content: "Démo"; }
}
@media (max-width: 370px) {
  .vp-mark b { font-size: 15px; }
  .vp-mark small { font-size: 8.8px; }
  .vp-mark svg { width: 24px; height: 24px; }
  .vp-mark { gap: 7px; }
  .vp-hdr .vp-wrap { padding-inline: 14px; gap: 8px; }
  .vp-hdr .vp-btn { padding: 8px 11px; font-size: 12px; }
}
/* Dernier recours, sous 335 px : le bouton passe sous le logo plutôt
   que de déborder. Mieux vaut deux lignes qu'un débordement.      */
/* Dernier recours : le groupe téléphone + bouton passe sous le logo
   plutôt que de déborder. La règle visait le bouton seul, qui est
   depuis logé dans un conteneur : elle ne s'appliquait plus.     */
@media (max-width: 335px) {
  .vp-hdr .vp-wrap { flex-wrap: wrap; justify-content: center; }
  .vp-hdr__a { width: 100%; }
  .vp-hdr__a .vp-btn { flex: 1; justify-content: center; }
}
@media (max-width: 620px) {
  body.vp { font-size: 16px; }
  .vp-grid, .vp-pages, .vp-steps { grid-template-columns: 1fr; }
  .vp-btns { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .vp-btns .vp-btn { width: 100%; }
  .vp .vp-puces { margin-top: 38px; gap: 14px 18px; }
  .vp-hero__vignette { position: static; max-width: none; margin-top: 16px; }
  /* Le tableau conserve sa largeur minimale mais défile dans son
     propre cadre. « max-width » l'empêche de pousser la page :
     sans lui, le conteneur s'élargit avec son contenu.          */
  .vp-tbl { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .vp-tbl table { min-width: 580px; }
  .vp-ft .vp-wrap { justify-content: center; text-align: center; }
}

/* ══ Icônes des titres ═════════════════════════════════════════════
   Mêmes règles que sur le site clinique, reprises ici parce que cette
   page ne charge pas la feuille du thème. Le réglage est commun :
   Réglages > Clinique > Icônes des titres de section.             */
.has-ttl-ic { display: flex; align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
.ttl-ic { width: 1.55em; height: 1.55em; object-fit: contain; flex: none;
  display: block; margin-top: .06em; }
.ttl-tx { display: block; min-width: 0; }
.vp-eyebrow .ttl-ic { width: 1.3em; height: 1.3em; }

.has-ttl-ic--c { justify-content: center; }
.has-ttl-ic--d { justify-content: flex-end; }

/* Grands titres : icône à gauche, texte aligné sur son bas */
h1.has-ttl-ic, h2.has-ttl-ic { align-items: flex-end; gap: 14px; }
h1.has-ttl-ic .ttl-ic, h2.has-ttl-ic .ttl-ic { width: 56px; height: 56px; margin-top: 0; }
h1.has-ttl-ic .ttl-tx, h2.has-ttl-ic .ttl-tx { text-wrap: balance; }

@media (max-width: 640px) {
  .has-ttl-ic { gap: 9px; }
  .ttl-ic { width: 1.35em; height: 1.35em; }
  h1.has-ttl-ic, h2.has-ttl-ic { gap: 11px; }
  h1.has-ttl-ic .ttl-ic, h2.has-ttl-ic .ttl-ic { width: 42px; height: 42px; }
}

/* ══ Illustrations de section ══════════════════════════════════════
   Posées sur le côté, en partie derrière le contenu. Le conteneur
   passe au premier plan pour que le texte et les cartes restent
   lisibles ; l'image reste en arrière-plan et ne capte aucun clic. */
.vp-a-deco { position: relative; }
.vp-a-deco > .vp-wrap { position: relative; z-index: 1; }

/* La largeur vient du réglage de chaque section. Deux garde-fous :
   l'image ne dépasse jamais 38 % de la largeur d'écran, ni 88 % de
   la hauteur de sa section. Et elle se cale À L'INTÉRIEUR du bord,
   avec une marge — la placer en négatif la faisait sortir de la
   page et se faire couper.                                        */
.vp-deco {
  position: absolute;
  width: 420px; max-width: 38vw;
  height: auto; max-height: 88%; object-fit: contain;
  z-index: 0; pointer-events: none; user-select: none;
}
.vp-deco--g { left: clamp(12px, 2.5vw, 48px); }
.vp-deco--d { right: clamp(12px, 2.5vw, 48px); }

/* Position en hauteur. La marge haute et basse reprend celle des
   côtés, pour que l'image soit à la même distance de chaque bord. */
.vp-deco--c { top: 50%; transform: translateY(-50%); }
.vp-deco--h { top: clamp(12px, 2.5vw, 48px); }
.vp-deco--b { bottom: clamp(12px, 2.5vw, 48px); }

/* En dessous de 1100 px, la place manque : l'illustration passe
   derrière le contenu plutôt que sur le côté, en très discret. */
@media (max-width: 1100px) {
  .vp-deco { max-width: 30vw; opacity: .35; }
}
/* Sous 900 px, elle gênerait la lecture : on la retire. */
@media (max-width: 900px) {
  .vp-deco { display: none; }
}

/* Icône placée après le texte */
.has-ttl-ic--apres { flex-direction: row-reverse; }
.has-ttl-ic--apres.has-ttl-ic--c { justify-content: center; }
h1.has-ttl-ic--apres, h2.has-ttl-ic--apres { flex-direction: row-reverse; }

/* ══ Tarif ═════════════════════════════════════════════════════════ */
.vp-prix {
  display: grid; gap: 28px; align-items: start;
  background: #fff; border: 1px solid var(--filet); border-radius: 22px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 18px 44px rgba(21, 36, 61, .07);
}
@media (min-width: 860px) { .vp-prix { grid-template-columns: 1fr 1.15fr; gap: 44px; } }

.vp-prix__c { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vp-prix__l { font-size: 14px; color: var(--gris); }
.vp-prix__v {
  font-family: Nunito, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(40px, 6vw, 58px); line-height: 1.05; color: var(--marque);
}
.vp-prix__n { font-size: 13.5px; color: var(--gris); line-height: 1.5; }

.vp-prix__i { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vp-prix__i li { position: relative; padding-left: 28px; line-height: 1.55; }
.vp-prix__i li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--action);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ══ Simulateur de mise en ligne ═══════════════════════════════════
   Le visiteur choisit le jour où il peut envoyer ses contenus et lit
   sa date de livraison. Placé sur TOUTE la largeur de la carte, sous
   les deux colonnes : cantonné à gauche, il laissait un vide à
   droite.                                                         */
.vp-simu {
  grid-column: 1 / -1; order: 3;
  margin-top: 4px; padding: 18px 22px;
  background: #F7FAFD; border: 1px solid #E2EAF4; border-radius: 16px;
  display: grid; gap: 14px; align-items: center;
}
@media (min-width: 760px) {
  .vp-simu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
  .vp-simu__r { position: relative; padding-left: 46px; }
  .vp-simu__r::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 28px; height: 14px;
    background: var(--action);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}
.vp-simu__l {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 8px;
}
.vp-simu__i {
  width: 100%; font: inherit; font-size: 15px; color: var(--marque);
  background: #fff; border: 1px solid var(--filet); border-radius: 10px;
  padding: 11px 13px; cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.vp-simu__i:hover { border-color: #C9D8EC; }
.vp-simu__i:focus { outline: none; border-color: var(--marque);
                    box-shadow: 0 0 0 3px rgba(44, 90, 160, .13); }

.vp-simu__r { display: flex; flex-direction: column; gap: 2px; }
.vp-simu__r span { font-size: 13px; color: var(--gris); }
.vp-simu__v {
  font-family: Nunito, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.25; color: var(--action);
}

/* Sous 760 px, les deux blocs s'empilent et la flèche disparaît */
@media (max-width: 759px) {
  .vp-simu__r { padding-top: 14px; border-top: 1px dashed #DCE5F0; }
}

/* ══ Bénéfices ═════════════════════════════════════════════════════ */
.vp-ben { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .vp-ben { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .vp-ben { grid-template-columns: repeat(3, 1fr); } }

.vp-ben__i {
  background: #fff; border: 1px solid var(--filet); border-radius: 16px;
  padding: 24px 22px 26px;
}
.vp-ben__i h3 {
  font-family: Nunito, system-ui, sans-serif; font-weight: 800;
  font-size: 17.5px; line-height: 1.3; color: var(--marque);
  margin: 0 0 8px;
}
.vp-ben__i p { margin: 0; color: var(--gris); line-height: 1.65; font-size: 14.6px; }

/* Icône placée après le texte */
.has-ttl-ic--apres { flex-direction: row-reverse; }
.has-ttl-ic--apres.has-ttl-ic--c { justify-content: center; }
h1.has-ttl-ic--apres, h2.has-ttl-ic--apres { flex-direction: row-reverse; }

/* ══ Tarif ═════════════════════════════════════════════════════════ */
.vp-prix {
  display: grid; gap: 28px; align-items: start;
  background: #fff; border: 1px solid var(--filet); border-radius: 22px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 18px 44px rgba(21, 36, 61, .07);
}
@media (min-width: 860px) { .vp-prix { grid-template-columns: 1fr 1.15fr; gap: 44px; } }

.vp-prix__c { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vp-prix__l { font-size: 14px; color: var(--gris); }
.vp-prix__v {
  font-family: Nunito, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(40px, 6vw, 58px); line-height: 1.05; color: var(--marque);
}
.vp-prix__n { font-size: 13.5px; color: var(--gris); line-height: 1.5; }

.vp-prix__i { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vp-prix__i li { position: relative; padding-left: 28px; line-height: 1.55; }
.vp-prix__i li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--action);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;
}



/* ══ Numéro dans l'en-tête ═════════════════════════════════════════
   Le téléphone n'était accessible qu'en bas de page. Il rejoint le
   bouton de démonstration, dans le même groupe à droite.          */
.vp-hdr__a { display: flex; align-items: center; gap: 14px; }

.vp-tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15.5px; color: var(--marque);
  text-decoration: none; white-space: nowrap;
  padding: 8px 4px; border-radius: 10px;
  transition: color .18s;
}
.vp-tel svg { width: 17px; height: 17px; flex: none; color: var(--action); }
.vp-tel:hover { color: var(--action); }

/* Sous 900 px, le numéro se réduit à son pictogramme : le libellé et
   le bouton ne tiennent pas côte à côte.                          */
@media (max-width: 900px) {
  .vp-hdr__a { gap: 8px; }
  .vp-tel span { display: none; }
  .vp-tel { padding: 9px; background: #FEF5EF; border: 1px solid #F7DFCE; }
  .vp-tel svg { width: 19px; height: 19px; }
}

/* ══ Grilles en défilement sur mobile ══════════════════════════════
   Empilées, ces grilles imposaient de longs défilements verticaux
   sans qu'on devine combien de cartes restaient. Sous 700 px elles
   deviennent des rangées à faire glisser, avec des pastilles qui
   signalent le nombre de cartes et la position.                    */
@media (max-width: 699px) {
  .vp-grid, .vp-pages, .vp-ben, .vp-gal {
    display: grid;
    /* Indispensable : sans annuler le nombre de colonnes fixe declare
       plus haut, les cartes se placent d'abord dans ces colonnes puis
       debordent en colonnes automatiques — d'ou le chevauchement.  */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    /* Étirées : toutes les cartes d'une rangée ont la même hauteur */
    align-items: stretch;
    gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    /* La rangée reste dans les marges de la page : la première carte
       n'est plus collée au bord, et la suivante dépasse assez pour
       se laisser deviner.                                         */
    scrollbar-width: none;
  }
  .vp-grid::-webkit-scrollbar, .vp-pages::-webkit-scrollbar,
  .vp-ben::-webkit-scrollbar,  .vp-gal::-webkit-scrollbar { display: none; }

  .vp-grid > *, .vp-pages > *, .vp-ben > *, .vp-gal > * {
    scroll-snap-align: start; min-width: 0; height: 100%;
  }
  /* Aucune animation au survol ni au toucher : sur un écran tactile,
     l'effet se déclenchait au moindre appui et donnait l'impression
     que la carte gonflait.                                        */
  .vp-grid > *, .vp-pages > *, .vp-ben > *, .vp-gal > *,
  .vp-card, .vp-ben__i, .vp-pages a, .vp-gal figure img {
    transition: none !important; transform: none !important;
  }

  /* Pastilles, posées par le script sous la rangée */
  .vp-dots {
    display: flex; justify-content: center; gap: 7px; margin-top: 16px;
  }
  /* Pastilles rondes, y compris l'active : elle se distingue par sa
     couleur et sa taille, pas par sa forme.                       */
  .vp-dots i {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: #D5DFEC; transition: background .2s, transform .2s;
  }
  .vp-dots i.on { background: var(--action); width: 10px; height: 10px; }
}
@media (min-width: 700px) { .vp-dots { display: none; } }

/* FAQ : ni surbrillance au toucher, ni sélection du libellé quand on
   ouvre une question un peu vivement.                             */
.vp-faq summary, .vp-faq details {
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.vp-faq details p { user-select: text; -webkit-user-select: text; }

/* ══ Étiquettes, allégées ══════════════════════════════════════════
   Grosses pastilles bleues alignées en trois rangs : l'ensemble
   pesait plus que la galerie qu'il accompagne. Trait plus fin, fond
   neutre, texte réduit — une énumération, pas une série de boutons. */
.vp-tags { gap: 8px; margin-top: 26px; }
.vp-tags span {
  background: transparent; border: 1px solid var(--filet);
  color: var(--gris); font-size: 13.5px; font-weight: 500;
  padding: 7px 15px;
}

/* Sur mobile, la galerie garde des vignettes de hauteur constante */
@media (max-width: 699px) {
  .vp-gal figure { height: 100%; }
  .vp-gal img { aspect-ratio: 4 / 3; height: 100%; }
  .vp-tags { margin-top: 22px; }
}