/* Feuille des pages ville — extraite le 25/09/2026 de VillePage.styles()
   et illustrations.stylesIllustrations(). Elle etait injectee en <style>
   inline : 26 ko renvoyes a l'identique sur les 50 villes, et rediffusés
   une seconde fois dans le payload RSC. Jamais mis en cache.
   Source unique desormais : ce fichier. */


.vp {
  --carte: #F5F8FC;
  --creux: #DCE3EE;
  --plaque: #DDE4EF;
  --ink: var(--text-primary, #33363D);
  --ink2: var(--text-secondary, #5A5F6B);
  --ink3: var(--text-muted, #616671);
  --bleu: #068FFF;
  /* Le bleu d'encre est plus sombre que le bleu de marque. #0570CC tient sur
     une carte claire mais tombe à 3,90:1 dès qu'on le pose sur la plaque
     #DDE4EF — c'est-à-dire exactement là où il sert. Celui-ci passe partout :
     5,5:1 sur la plaque, 6,6:1 sur la carte. */
  --bleu-i: #0A5A9E;
  /* Le bleu des objets graphiques. #068FFF ne tient que 2,57:1 sur la plaque
     et 2,55:1 sur le creux, sous le seuil de 3:1 exigé d'un objet graphique ;
     celui-ci passe partout (3,52:1 sur la plaque, 3,48:1 sur le creux). Le
     bleu de marque reste réservé aux surfaces qui portent l'encre #191919. */
  --bleu-d: #0B7ACC;
  --vert: #00D084;
  --vert-i: #0A6A4A;
  --orange-i: #9A4415;
  --trait: rgba(163,177,198,0.40);
  --porte: 0 14px 34px -14px rgba(80,100,130,0.24);
  --porte-h: 0 24px 48px -18px rgba(80,100,130,0.32);
  --ease: cubic-bezier(.22,1,.36,1);
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  /* Le rayon des cartes est un levier de variante : « estampe » à 12 px se
     lit comme une gravure, « quai » à 28 px comme un galet. Il est posé en
     ligne sur le <main>, et toutes les surfaces s'y accrochent. */
  --rayon: 20px;
  color: var(--ink);
  background: var(--sol, #E3E8EF);
  line-height: 1.6;
}
.vp-large { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px,3vw,32px); }

/* ══ LE HÉROS ══════════════════════════════════════════════════════════════
   Cinq traitements. Ce qui ne change pas : le fil d'Ariane vient en premier,
   le titre est un h1 unique, et le bouton d'essai reste bleu de marque sur
   les vingt-deux pages — l'accent de la ville colore la page, pas l'action
   principale, qui doit rester la même d'un bout à l'autre du site. */
.vp-heros { padding: clamp(104px,11vw,140px) 0 clamp(30px,3.4vw,48px); }
.vp-heros--centre, .vp-heros--bandeau, .vp-heros--socle { text-align: center; }
.vp-fil { font-size: 12.5px; color: var(--ink3); display: flex; gap: 9px;
  flex-wrap: wrap; margin-bottom: 22px; }
.vp-heros--centre .vp-fil, .vp-heros--bandeau .vp-fil, .vp-heros--socle .vp-fil { justify-content: center; }
.vp-fil a { color: var(--ink2); text-decoration: none; }
.vp-fil a:hover { color: var(--ink); }

/* L'étiquette : un creux, pas une pastille colorée. L'encre y est courante et
   non discrète — #616671 sur un creux tombe à 4,26:1. Le filet de gauche est
   le seul endroit du héros où la couleur de la ville apparaît. */
.vp-etiquette { display: inline-block; margin: 0 0 clamp(16px,2vw,24px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink2); background: var(--creux); border-radius: 100px; padding: 8px 17px 8px 15px;
  box-shadow: inset 1px 1px 3px rgba(163,177,198,.5); border-left: 4px solid var(--accs); }

.vp h1 { font-size: clamp(30px,5.2vw,62px); font-weight: 800; letter-spacing: -.042em;
  line-height: 1.05; margin: 0 0 20px; max-width: none; text-wrap: balance; }
.vp-heros--centre h1, .vp-heros--bandeau h1, .vp-heros--socle h1 { margin-left: auto; margin-right: auto; }
.vp-chapo { font-size: clamp(16px,1.7vw,21px); line-height: 1.58; color: var(--ink2);
  margin: 0 0 26px; max-width: 74ch; text-wrap: pretty; }
.vp-heros--centre .vp-chapo, .vp-heros--bandeau .vp-chapo, .vp-heros--socle .vp-chapo { margin-left: auto; margin-right: auto; }
.vp-bref { font-size: 15px; line-height: 1.6; margin: 0; max-width: 86ch; text-align: left;
  background: var(--carte); box-shadow: var(--porte); border-radius: var(--rayon); padding: 16px 20px;
  border-left: 3px solid var(--accs); }
.vp-heros--centre .vp-bref, .vp-heros--bandeau .vp-bref { margin: 0 auto; }
.vp-bref b { font-weight: 800; }

.vp-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 26px; }
.vp-heros--centre .vp-actions, .vp-heros--bandeau .vp-actions, .vp-heros--socle .vp-actions { justify-content: center; }
.vp-b1, .vp-b2 { display: inline-flex; align-items: center; gap: 9px; padding: 15px 25px;
  border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 700;
  letter-spacing: -.012em; transition: transform .24s var(--ease), box-shadow .24s var(--ease); }
/* Le bleu #068FFF ne porte jamais de blanc : l'encre y est #191919. */
.vp-b1 { background: var(--bleu); color: #191919; box-shadow: var(--porte); }
.vp-b2 { background: var(--carte); color: var(--ink); box-shadow: var(--porte); }
.vp-b1:hover, .vp-b2:hover { transform: translateY(-2px); box-shadow: var(--porte-h); }
.vp-b1 svg, .vp-b2 svg { width: 15px; height: 15px; }
.vp-mention { font-size: 13px; color: var(--ink3); margin: 18px 0 0; }

/* ── Variante « aplomb » : l'illustration ferme le héros ── */
.vi--pied { margin-top: clamp(28px,3.4vw,44px); }

/* ── Variante « estampe » : l'illustration ouvre la page ── */
.vi--tete { margin-bottom: clamp(24px,3vw,38px); }

/* ── Variante « quai » : deux colonnes ──
   Le texte à gauche, l'illustration à droite. Sous 900 px on empile, et
   l'illustration passe sous le texte : elle décore, elle n'annonce pas. */
.vp-duo { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(24px,3.4vw,52px); align-items: center; margin-bottom: clamp(24px,3vw,36px); }
.vp-duo-t { min-width: 0; }
.vp-duo-i { min-width: 0; }
@media (max-width: 900px) { .vp-duo { grid-template-columns: 1fr; } }

/* ── Variante « carnet » : titre pleine largeur, puis deux colonnes ── */
.vp-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(24px,3.4vw,48px); align-items: start; }
.vp-col-t { min-width: 0; }
.vp-col-i { display: grid; gap: clamp(16px,2vw,22px); min-width: 0; }
@media (max-width: 900px) { .vp-col { grid-template-columns: 1fr; } }

/* ── Variante « horizon » : la carte « en bref » chevauche l'illustration ──
   Le chevauchement est une marge négative, jamais une position absolue : en
   absolu, la carte sortirait du flux et la hauteur du héros ne tiendrait plus
   compte d'elle — sur un écran étroit, où la carte fait cinq lignes, elle
   recouvrirait les boutons. */
.vp-socle { margin: clamp(22px,2.6vw,34px) 0 0; }
.vp-socle-b { margin: -34px clamp(12px,3vw,48px) 0; position: relative; }
@media (max-width: 620px) { .vp-socle-b { margin: -16px 0 0; } }

/* ══ LES SECTIONS ══════════════════════════════════════════════════════════
   Trois fonds, distribués par la variante :
     · plat   — rien, la page elle-même ;
     · plaque — un creux, la surface s'enfonce ;
     · carte  — un relief, la surface se soulève.
   Le filet ne se pose qu'entre deux sections plates qui se suivent : entre
   une plate et une plaque, la plaque fait déjà la séparation, et deux
   séparations d'affilée se lisent comme une erreur. */
/* Le bas de page s'arrête court : la plaque d'appel suit immédiatement,
   et un blanc de plus de cent pixels juste avant l'action se paie en clics. */
.vp-corps { padding-bottom: 34px; }
.vp-sec { scroll-margin-top: 96px; }
.vp-sec--plat { padding-top: clamp(48px,6vw,80px); }
.vp-sec--plat + .vp-sec--plat { border-top: 1px solid var(--trait); }
.vp-sec--plaque, .vp-sec--carte { margin-top: clamp(40px,5vw,68px); }
.vp-sec--plaque .vp-sec-in { background: var(--plaque); border-radius: calc(var(--rayon) + 12px);
  padding: clamp(28px,4vw,56px) clamp(18px,3vw,44px);
  box-shadow: inset 3px 3px 8px rgba(163,177,198,.5), inset -2px -2px 6px rgba(255,255,255,.55); }
.vp-sec--carte .vp-sec-in { background: var(--carte); border-radius: calc(var(--rayon) + 12px);
  padding: clamp(28px,4vw,56px) clamp(18px,3vw,44px); box-shadow: var(--porte); }

.vp-sec h2 { font-size: clamp(23px,2.9vw,38px); font-weight: 800; letter-spacing: -.034em;
  line-height: 1.12; margin: 0 0 12px; text-wrap: balance; max-width: 26ch; }
.vp-sous { font-size: 15.5px; line-height: 1.62; color: var(--ink2); margin: 0 0 30px;
  max-width: 76ch; text-wrap: pretty; }
/* L'alignement des titres est un levier de variante. Il s'applique aux
   sections, jamais au héros, qui a son propre traitement. */
.vp--titres-centre .vp-sec h2, .vp--titres-centre .vp-sous { text-align: center; margin-left: auto; margin-right: auto; }
.vp--titres-centre .vp-note { text-align: center; margin-left: auto; margin-right: auto; }
/* Le lien vers la grille, posé sous les formules. Il vit hors de la règle de
   variante : rangé dedans, il n'existait que sur les pages à titres centrés,
   et les autres affichaient un prix sans bouton — exactement ce qu'on
   voulait supprimer. */
.vp-tarifs-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 14px 24px; border-radius: 14px;
  background: var(--carte); box-shadow: var(--porte);
  color: var(--ink); font-size: 14.5px; font-weight: 700; letter-spacing: -.012em;
  text-decoration: none;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
.vp--titres-centre .vp-tarifs-cta { margin-left: auto; margin-right: auto; }
.vp-tarifs-cta:hover { transform: translateY(-2px); box-shadow: var(--porte-h); }
.vp-tarifs-cta:focus-visible { outline: 2px solid #0570CC; outline-offset: 3px; }
.vp-tarifs-cta svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .vp-tarifs-cta { transition: none; } .vp-tarifs-cta:hover { transform: none; } }
.vp-releve { text-align: center; margin-left: auto; margin-right: auto; }
/* La FAQ et les villes voisines restent calées à gauche dans les deux cas :
   une liste de questions centrée se lit mal, les lignes n'ont pas de bord
   commun où revenir. */
.vp-gauche h2, .vp-gauche .vp-sous { text-align: left !important; margin-left: 0 !important; max-width: 70ch; }
.vp h3 { font-size: clamp(16px,1.7vw,20px); font-weight: 800; letter-spacing: -.026em; margin: 0 0 10px; }
/* La note de source : encre courante et non discrète, parce qu'elle tombe
   souvent sous une carte en gradient de matière où #616671 ne passe plus. */
.vp-note { font-size: 12.5px; line-height: 1.6; color: var(--ink2); margin: 18px 0 0; max-width: 82ch; }

/* ── Les grilles à compte fixe ──
   Le nombre de colonnes est décidé au rendu par la fonction « colonnes » et
   posé ici en dur, parce que « repeat(auto-fit, minmax()) » choisit selon la
   place disponible et laisse régulièrement une carte seule au bout d'un
   rang. Le second chiffre de la classe est le repli intermédiaire : il ne
   vaut 2 que s'il divise le nombre d'éléments. */
.vp-g { display: grid; gap: clamp(12px,1.5vw,16px); }
.vp-g--21 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.vp-g--31 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.vp-g--32 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.vp-g--41 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.vp-g--42 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .vp-g--42 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  { .vp-g--41 { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .vp-g--31 { grid-template-columns: 1fr; }
  .vp-g--32 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .vp-g--21, .vp-g--32, .vp-g--42 { grid-template-columns: 1fr; }
}

/* ── Les chiffres du territoire ── */
.vp-chiffre { background: var(--carte); box-shadow: var(--porte); border-radius: var(--rayon);
  padding: clamp(18px,2vw,24px); display: flex; flex-direction: column; gap: 6px;
  border-top: 3px solid var(--accs); text-align: left; }
.vp-sec--carte .vp-chiffre { background: var(--creux); box-shadow: inset 2px 2px 6px rgba(163,177,198,.45); }
.vp-chiffre b { font-size: clamp(26px,3.4vw,38px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; }
.vp-chiffre-lib { font-size: 14px; font-weight: 700; letter-spacing: -.016em; color: var(--ink); }
.vp-chiffre-rep { font-size: 12.5px; color: var(--ink2); }

/* ── Le tissu : trois barres, chacune contre son repère national ── */
.vp-tissu { background: var(--plaque); border-radius: calc(var(--rayon) + 4px); padding: clamp(20px,2.8vw,34px);
  margin-bottom: clamp(12px,1.5vw,16px); text-align: left; }
.vp-sec--plaque .vp-tissu { background: var(--carte); box-shadow: var(--porte); }
.vp-barres { display: grid; gap: 16px; }
.vp-barre { display: grid; grid-template-columns: minmax(0,15ch) minmax(0,1fr) minmax(0,12ch);
  align-items: center; gap: clamp(10px,1.6vw,18px); }
@media (max-width: 720px) {
  .vp-barre { grid-template-columns: 1fr; gap: 6px; }
  .vp-barre-val { display: flex !important; align-items: baseline; gap: 10px; }
}
.vp-barre-nom { font-size: 13px; font-weight: 700; letter-spacing: -.014em; color: var(--ink); }
.vp-barre-piste { position: relative; height: 18px; border-radius: 9px; background: var(--creux);
  box-shadow: inset 1px 1px 3px rgba(163,177,198,.5); overflow: hidden; }
/* La barre prend l'accent SOMBRE de la ville, jamais l'accent vif : elle est
   posée sur le creux clair, où le rose et le vert de la palette tombent à
   1,5:1. Les quatre accents sombres tiennent 4,7:1 au minimum. */
.vp-barre-loc { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px;
  background: var(--accs); }
/* Le repère France est un trait, pas une seconde barre : deux barres se
   lisent comme deux mesures concurrentes, un trait se lit comme un seuil. */
.vp-barre-fr { position: absolute; top: -2px; bottom: -2px; width: 3px; border-radius: 2px;
  background: var(--ink); transform: translateX(-1.5px); }
.vp-barre-val { display: block; font-size: 12.5px; text-align: right; }
.vp-barre-val b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums; }
.vp-barre-val em { font-style: normal; color: var(--ink2); font-size: 11.5px; }
.vp-tissu-lg { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 20px 0 0;
  padding-top: 16px; border-top: 1px solid var(--trait); font-size: 12.5px; color: var(--ink2); }
.vp-lg-pt { width: 14px; height: 10px; border-radius: 5px; background: var(--accs); flex: none; }
.vp-lg-tr { width: 3px; height: 14px; border-radius: 2px; background: var(--ink); flex: none;
  margin-left: 14px; }

/* ── Les trois constats ── */
.vp-faits { list-style: none; margin: 0; padding: 0; text-align: left; }
.vp-faits li { display: flex; align-items: flex-start; gap: 11px; background: var(--carte);
  box-shadow: var(--porte); border-radius: calc(var(--rayon) - 4px); padding: 16px 18px;
  font-size: 13.5px; line-height: 1.55; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
.vp-sec--carte .vp-faits li { background: var(--creux); box-shadow: inset 2px 2px 6px rgba(163,177,198,.45); }
/* La pastille prend l'accent VIF et porte l'encre #191919 : rose 9,2:1,
   vert 8,7:1, orange 6,2:1, bleu 5,3:1. Aucune ne porte de blanc. */
.vp-ok { display: inline-grid; place-items: center; width: 21px; height: 21px; flex: none;
  border-radius: 50%; background: var(--acc); color: #191919; margin-top: 1px; }
.vp-ok svg { width: 12px; height: 12px; }

/* ── Les angles propres à la ville ──
   La face de la carte porte un gradient de matière : même teinte neutre,
   moins de 5 % d'écart de luminance, pour simuler la chute de lumière du
   neumorphisme. Ce n'est pas un dégradé décoratif — on ne le voit pas comme
   tel, on voit une surface. L'encre y reste courante, parce que l'encre
   discrète #616671 ne passe plus sur le bas de la face. */
.vp-point { background: linear-gradient(145deg, #F7FAFD, #EDF1F7); box-shadow: var(--porte);
  border-radius: var(--rayon); padding: clamp(18px,2vw,24px); text-align: left; }
.vp-sec--carte .vp-point { background: var(--creux); box-shadow: inset 2px 2px 6px rgba(163,177,198,.45); }
/* Le numéro d'ordre prend l'accent vif et l'encre #191919 : c'est le
   marqueur le plus visible de la couleur de la ville dans le corps. */
.vp-point-n { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: #191919; background: var(--acc); border-radius: 7px; padding: 4px 9px; margin-bottom: 14px; }
.vp-point h3 { margin-bottom: 9px; }
.vp-point p { margin: 0; font-size: 13.8px; line-height: 1.6; color: var(--ink2); }

/* ── Les professions de santé ── */
.vp-pro { background: var(--carte); box-shadow: var(--porte); border-radius: calc(var(--rayon) - 2px);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.vp-sec--carte .vp-pro, .vp-sec--plaque .vp-pro { background: var(--creux); box-shadow: inset 2px 2px 6px rgba(163,177,198,.45); }
.vp-pro-nom { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink2); }
.vp-pro b { font-size: clamp(24px,2.8vw,32px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; }
.vp-pro-d { font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.vp-pro-d em { font-style: normal; font-weight: 700; }
.vp-pro-d em.est-plus { color: var(--vert-i); }
.vp-pro-d em.est-moins { color: var(--orange-i); }

/* ── La couverture ──
   Le nombre de colonnes vient de la classe « vp-g » posée au rendu, comme
   pour toutes les autres grilles de la page : deux blocs sur deux colonnes,
   trois blocs sur trois colonnes, et un repli qui divise le compte. */
.vp-couvr-part { background: var(--carte); box-shadow: var(--porte); border-radius: var(--rayon);
  padding: clamp(18px,2vw,24px); text-align: left; }
.vp-sec--carte .vp-couvr-part { background: var(--creux); box-shadow: inset 2px 2px 6px rgba(163,177,198,.45); }
.vp-couvr-part p { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink2); }
.vp-jetons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.vp-jetons li { font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: var(--creux); border-radius: 8px; padding: 6px 11px;
  box-shadow: inset 1px 1px 3px rgba(163,177,198,.5); }
.vp-sec--carte .vp-jetons li { background: var(--plaque); }
.vp-jetons--texte li { font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: -.01em; }

/* ── Les métiers ── */
.vp-metiers a { display: grid; grid-template-columns: minmax(0,1fr) 14px; align-items: center;
  gap: 4px 11px; background: var(--carte); box-shadow: var(--porte); border-radius: calc(var(--rayon) - 4px);
  padding: 16px 18px; text-decoration: none; color: var(--ink); text-align: left;
  border-left: 3px solid transparent;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease); }
.vp-sec--carte .vp-metiers a { background: var(--creux); box-shadow: inset 2px 2px 6px rgba(163,177,198,.45); }
.vp-metiers a:hover { transform: translateY(-2px); box-shadow: var(--porte-h); border-left-color: var(--accs); }
.vp-metiers b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.vp-metiers span { grid-column: 1; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.vp-metiers svg { grid-row: 1; grid-column: 2; width: 14px; height: 14px; flex: none; color: var(--ink3); }
.vp-tout { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px;
  font-weight: 700; color: var(--ink); text-decoration: none; }
.vp-tout svg { width: 14px; height: 14px; }

/* ── La couverture horaire ── */
.vp-couv { background: var(--plaque); border-radius: calc(var(--rayon) + 4px); padding: clamp(20px,2.8vw,36px); }
.vp-sec--plaque .vp-couv, .vp-sec--carte .vp-couv { background: transparent; padding: 0; }
.vp-couv-grille { display: grid; gap: 7px; }
.vp-couv-heures { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 10px; color: var(--ink2); padding-left: clamp(58px,7vw,88px); margin-bottom: 3px; }
.vp-couv-jour { display: grid; grid-template-columns: clamp(58px,7vw,88px) minmax(0,1fr);
  align-items: center; gap: clamp(8px,1.2vw,12px); }
.vp-couv-nom { font-size: 11.5px; font-weight: 600; color: var(--ink2); text-align: left; }
.vp-couv-barre { display: grid; grid-template-columns: repeat(24,1fr); gap: 2px; }
.vp-couv-barre i { height: 16px; border-radius: 3px; background: var(--accs); }
.vp-couv-barre i.est-ouvert { background: var(--ink); }
@media (max-width: 520px) { .vp-couv-barre { gap: 1px; } .vp-couv-barre i { height: 13px; border-radius: 2px; } }

.vp-couv-legende { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--trait); text-align: left; }
@media (max-width: 700px) { .vp-couv-legende { grid-template-columns: 1fr; } }
.vp-couv-lg { display: flex; align-items: flex-start; gap: 11px; }
.vp-couv-pt { width: 12px; height: 12px; border-radius: 4px; flex: none; margin-top: 4px;
  background: var(--accs); }
.vp-couv-pt.est-ouvert { background: var(--ink); }
.vp-couv-lg b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums; }
.vp-couv-lg span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink2); margin-top: 6px; }
.vp-couv-lg--fort b { color: var(--bleu-i); font-size: 26px; }

/* ── La mise en service ── */
.vp-frise { list-style: none; margin: 0; padding: 0; text-align: left; }
.vp-frise li { background: var(--carte); box-shadow: var(--porte); border-radius: var(--rayon); padding: 20px; }
.vp-sec--carte .vp-frise li { background: var(--creux); box-shadow: inset 2px 2px 6px rgba(163,177,198,.45); }
.vp-frise-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--acc); color: #191919; font-size: 13px; font-weight: 800; margin-bottom: 13px; }
.vp-frise b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.018em; margin-bottom: 7px; }
.vp-frise p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink2); }

/* ── Les tarifs ──
   Le plan mis en avant garde le bleu de marque sur les vingt-deux pages :
   c'est une information commerciale, pas une décoration, et elle doit se
   lire pareil partout. */
.vp-plan-c { position: relative; background: var(--carte); box-shadow: var(--porte);
  border-radius: calc(var(--rayon) + 2px); padding: clamp(20px,2.2vw,26px); display: flex;
  flex-direction: column; text-align: left; }
.vp-sec--carte .vp-plan-c { background: var(--creux); box-shadow: inset 2px 2px 6px rgba(163,177,198,.45); }
.vp-plan-c.est-fort { background: var(--plaque); box-shadow: var(--porte), inset 0 0 0 2px var(--bleu-d); }
.vp-plan-ruban { position: absolute; top: -10px; left: clamp(20px,2.2vw,26px);
  background: var(--bleu); color: #191919; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 7px; padding: 4px 10px; }
.vp-plan-c h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.vp-plan-prix { margin: 0 0 4px; display: flex; align-items: baseline; gap: 7px; }
.vp-plan-prix b { font-size: clamp(28px,3.2vw,38px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; }
.vp-plan-prix span { font-size: 12.5px; color: var(--ink2); }
.vp-plan-min { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--trait);
  font-size: 13.5px; font-weight: 700; color: var(--bleu-i); }
.vp-plan-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vp-plan-c li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.vp-plan-c li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accs); }
.vp-releve { font-size: 12.5px; color: var(--ink2); margin: 20px 0 0; max-width: 78ch; line-height: 1.6; }
.vp-releve a { color: var(--ink); }

/* ── FAQ ──
   Aucune classe nouvelle : ce sont celles du site, et le pliage est celui du
   navigateur. On ne déclare surtout AUCUN display sur le summary — WebKit y
   rattache l'ouverture native d'un details, et la question cesse de s'ouvrir
   au clic sur Safari et sur iOS sans qu'aucune erreur ne le signale. */
.vp-faq { display: grid; gap: 8px; }
.vp-faq.faq-modern { max-width: none; }

/* ── Les villes voisines ── */
.vp-voisins a { display: grid; grid-template-columns: minmax(0,1fr) 14px; align-items: center;
  gap: 3px 11px; background: var(--carte); box-shadow: var(--porte); border-radius: calc(var(--rayon) - 4px);
  padding: 15px 18px; text-decoration: none; color: var(--ink);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease); }
.vp-voisins a:hover { transform: translateY(-2px); box-shadow: var(--porte-h); }
.vp-voisins b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }
.vp-voisins span { grid-column: 1; font-size: 12px; color: var(--ink2); }
.vp-voisins svg { grid-row: 1; grid-column: 2; width: 14px; height: 14px; flex: none; color: var(--ink3); }

@media (prefers-reduced-motion: reduce) {
  .vp-b1:hover, .vp-b2:hover, .vp-voisins a:hover, .vp-metiers a:hover { transform: none; }
}

.vi { width: 100%; overflow: hidden; line-height: 0; }
.vi svg { display: block; width: 100%; height: auto; }

/* Un creux : l'illustration est enfoncée dans la page. */
.vi--plaque { border-radius: 24px;
  box-shadow: inset 3px 3px 8px rgba(120,136,160,.42), inset -3px -3px 8px rgba(255,255,255,.7); }

/* Une carte : l'illustration est posée en relief au-dessus de la page. */
.vi--carte { border-radius: 20px; box-shadow: 0 16px 38px -14px rgba(80,100,130,.30); }

/* Un bandeau : large, peu arrondi, il file d'un bord à l'autre du corps. */
.vi--bandeau { border-radius: 14px; box-shadow: 0 10px 26px -12px rgba(80,100,130,.26); }

/* Un médaillon : très arrondi, pour un héros à deux colonnes. */
.vi--medaillon { border-radius: 36px;
  box-shadow: inset 2px 2px 6px rgba(120,136,160,.36), 0 14px 32px -16px rgba(80,100,130,.28); }
@media (max-width: 620px) { .vi--medaillon { border-radius: 24px; } }