/* ==========================================================================
   Aperçu du configurateur « Créer mon site ».

   Feuille AUTOPORTANTE : elle habille un faux site, pas le portfolio. Elle ne
   dépend donc pas de style.css et n'en hérite rien. Toutes les couleurs, les
   rayons et les polices viennent de variables posées par builder-preview.js
   (--p, --s, --a, --bg, --surface, --ink, --radius, --font-h, --font-b…) :
   changer de palette ou de police ne touche pas une seule règle ci-dessous.

   Les 5 directions de mise en page sont des modificateurs sur la racine
   (.pv--moderne / --editorial / --audacieux / --plein-cadre / --artisanal).
   Elles ne changent JAMAIS la couleur ni la famille de police (choix du
   visiteur) : elles changent les proportions, les graisses et les traits.
   ========================================================================== */

/* Page autoporteuse : la remise à zéro peut être globale, et elle doit l'être.
   Les fenêtres de l'aperçu vivent en dehors de #pvRoot (elles se superposent à
   tout) : un reset limité à `.pv *` les laisserait de côté. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-b, system-ui, sans-serif); color: var(--ink, #16150f); }

.pv {
  --wrap: 1120px;
  --gap: 22px;
  --sec-y: 76px;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.pv img { max-width: 100%; display: block; }
/* Remises à zéro en `:where()` : leur poids est nul, donc la moindre classe
   l'emporte. Sans ça, `.pv button { color: inherit }` (deux composantes)
   battait `.pv-btn--p { color: var(--on-p) }` (une seule) et TOUS les boutons
   pleins de l'aperçu affichaient de l'encre sombre sur leur aplat de couleur :
   1,7:1 de contraste sur les palettes profondes. */
:where(.pv button) { font: inherit; color: inherit; cursor: pointer; }
:where(.pv a) { color: inherit; text-decoration: none; }
.pv-ico { display: inline-flex; align-items: center; justify-content: center; }
.pv-ico svg { width: 1em; height: 1em; }

.pv-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 26px;
}
.pv-sec { padding: var(--sec-y) 0; }
.pv-sec + .pv-sec { padding-top: 0; }

/* ── Titres ─────────────────────────────────────────────────────────────── */
.pv-h1, .pv-h2, .pv-h3 {
  font-family: var(--font-h);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pv-h1 { font-size: clamp(30px, 5.4vw, 54px); font-weight: 700; }
.pv-h1--sm { font-size: clamp(26px, 4.4vw, 40px); }
.pv-h2 { font-size: clamp(23px, 3.2vw, 34px); font-weight: 700; }
.pv-h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.pv-p { margin: 8px 0 0; color: var(--ink-soft); }
.pv-lede { margin: 10px 0 0; font-size: 16px; color: var(--ink-soft); max-width: 62ch; }
.pv-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* --p-ink et non --p : cette couleur est ici de l'ENCRE, pas un aplat. */
  color: var(--p-ink);
}
.pv-meta { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.04em; }
.pv-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.pv-head { margin-bottom: 30px; max-width: 68ch; }
.pv-head .pv-h2 { margin-top: 6px; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  /* Un libellé d'action ne se coupe pas : « Prendre rendez-vous » sur trois
     lignes dans la barre, c'est le signe d'un site mal fini. */
  white-space: nowrap;
  transition: transform .16s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.pv-btn:hover { transform: translateY(-1px); }
.pv-btn:active { transform: translateY(0); }
.pv-btn--p { background: var(--p); color: var(--on-p); border-color: var(--p); }
.pv-btn--p:hover { opacity: .92; }
.pv-btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.pv-btn--ghost:hover { border-color: var(--p); color: var(--p-ink); }
.pv-btn--soft { background: var(--p-soft); color: var(--p-ink); border-color: transparent; }
.pv-btn--lg { padding: 13px 24px; font-size: 15px; min-height: 48px; }
.pv-btn--sm { padding: 8px 14px; font-size: 13px; min-height: 38px; }
.pv-btn--block { width: 100%; margin-top: 14px; }
.pv-more { margin-top: 26px; }

/* ── En-tête du faux site ───────────────────────────────────────────────── */
.pv-nav {
  position: sticky; top: 0; z-index: 40;
  /* L'encre et les filets de la barre passent par deux variables : la mise en
     page « plein cadre » les bascule d'un bloc quand la barre se pose sur la
     photo du hero, sans réécrire une règle par élément (et sans jamais pouvoir
     les désaccorder du fond, cf. plus bas). */
  /* `--ink` et non `--ink-soft` : la barre laisse passer 12 % de ce qui défile
     dessous, donc son fond EFFECTIF n'est pas `--bg`. `--ink-soft` est garanti
     lisible sur `--bg` (chaîne `ensure()` de builder-preview.js), pas sur une
     photo ni sur une bande de couleur. Mesuré au pixel, une section sombre qui
     passait sous la barre faisait tomber les liens à 4,05:1 en thème clair, sur
     quatre mises en page sur cinq. L'encre pleine tient le pire fond mesuré à
     plus de 10:1, et c'est la graisse d'un lien de navigation, pas d'un texte
     secondaire. */
  --nav-ink: var(--ink);
  --nav-line: var(--line-strong);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  /* Sans effet ici (pas d'image de fond), mais indispensable au dégradé que
     pose « plein cadre » : une image de fond est dimensionnée sur la boîte de
     padding et se RÉPÈTE sur la bordure, ce qui redessinait le haut du dégradé
     en filet sur le pixel de bordure du bas. */
  background-repeat: no-repeat;
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.pv-nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 26px;
  display: flex; align-items: center; gap: 18px;
}
.pv-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pv-brand-mark {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--p); color: var(--on-p);
  font-family: var(--font-h); font-weight: 700; font-size: 16px;
}
.pv-brand-name {
  font-family: var(--font-h); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; white-space: nowrap;
}
/* Jusqu'à dix pages peuvent être cochées : la rangée de liens se resserre au
   lieu de pousser le bouton d'action hors de la barre. */
.pv-links {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; flex-wrap: wrap; justify-content: flex-end;
  min-width: 0;
}
.pv-link {
  padding: 8px 11px; border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--nav-ink);
  transition: color .18s ease, background .18s ease;
}
.pv-link:hover { color: var(--ink); background: var(--surface-2); }
.pv-link.is-on { color: var(--p-ink); background: var(--p-soft); }
/* `flex: 0 0 auto` : sans lui, les outils se laissaient comprimer et les
   liens s'empilaient un par ligne entre 881 et 1060 px (barre de 427 px de
   haut), tandis que le sélecteur de langue était rogné à toutes les largeurs. */
.pv-nav-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pv-icon-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 12px; min-height: 40px;
  border: 1px solid var(--nav-line); border-radius: var(--radius-sm);
  background: transparent; font-size: 13px; font-weight: 500;
}
.pv-icon-btn:hover { border-color: var(--p); color: var(--p-ink); }
.pv-cart-n {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--p); color: var(--on-p);
  font-size: 11px; font-weight: 700;
}
/* Bouton de menu replié : caché tant que la barre tient sur une ligne. */
.pv-burger {
  display: none;
  width: 42px; height: 42px; flex: 0 0 auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--nav-line); border-radius: var(--radius-sm);
  background: transparent;
}
/* `currentColor` et non `--ink` : les trois barres suivent l'encre de l'en-tête,
   qui vaut déjà `--ink` partout ailleurs. */
.pv-burger i { display: block; width: 17px; height: 1.8px; background: currentColor; border-radius: 2px; }

.pv-lang {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--nav-line); border-radius: var(--radius-sm); overflow: hidden;
}
.pv-lang-b { padding: 7px 9px; min-height: 38px; border: 0; background: transparent; font-size: 12px; font-weight: 600; }
.pv-lang-b.is-on { background: var(--p); color: var(--on-p); }

/* ── Bandeau d'annonce ──────────────────────────────────────────────────── */
.pv-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 20px;
  background: var(--s); color: var(--on-s);
  font-size: 13.5px; text-align: center; flex-wrap: wrap;
}
.pv-banner-link {
  border: 0; background: transparent; color: inherit;
  font-size: 13px; font-weight: 700; text-decoration: underline; padding: 4px 2px;
}

/* ── Visuels : photo ou motif ───────────────────────────────────────────── */
.pv-media {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.pv-media img { width: 100%; height: 100%; object-fit: cover; }
.pv-motif {
  position: absolute; inset: 0;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--p) 22%, var(--surface)),
    color-mix(in srgb, var(--a) 26%, var(--surface)));
  overflow: hidden;
}
.pv-motif > span { position: absolute; display: block; border-radius: 999px; opacity: .5; }
/* Trame fine par-dessus les aplats : sans elle, le motif ressemble à une image
   qui n'a pas fini de charger plutôt qu'à un visuel voulu. */
.pv-motif::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 9px);
}
.pv-motif-tag {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-b); font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.pv-motif-tag i { font-style: normal; margin-left: 8px; }
.pv-motif-tag .pv-ico { font-size: 15px; color: var(--p-ink); flex: 0 0 auto; }
.pv-motif > span:nth-child(1) { width: 62%; aspect-ratio: 1; left: -12%; top: -18%; background: var(--p); opacity: .26; }
.pv-motif > span:nth-child(2) { width: 40%; aspect-ratio: 1; right: -8%; bottom: -14%; background: var(--a); opacity: .34; }
.pv-motif > span:nth-child(3) { width: 30%; aspect-ratio: 1; right: 18%; top: 12%; background: var(--s); opacity: .14; }
.pv-motif > span:nth-child(4) {
  width: 74%; height: 2px; left: 13%; top: 58%; border-radius: 0;
  background: var(--ink); opacity: .12;
}
.pv-motif--2 > span:nth-child(1) { border-radius: var(--radius); transform: rotate(14deg); }
.pv-motif--2 > span:nth-child(2) { border-radius: var(--radius); transform: rotate(-9deg); }
.pv-motif--3 > span:nth-child(1) { left: auto; right: -20%; top: 30%; }
.pv-motif--3 > span:nth-child(3) { left: 10%; top: auto; bottom: 14%; }
.pv-motif--4 > span:nth-child(1) { border-radius: 0; width: 46%; height: 120%; top: -10%; left: 8%; transform: rotate(18deg); }
.pv-motif--4 > span:nth-child(2) { border-radius: 0; width: 30%; height: 120%; top: -10%; right: 12%; transform: rotate(18deg); }
.pv-motif--5 > span:nth-child(1) { width: 90%; aspect-ratio: 1; left: 5%; top: 20%; opacity: .16; }
.pv-motif--5 > span:nth-child(2) { width: 56%; aspect-ratio: 1; left: 22%; top: 34%; opacity: .22; }
.pv-motif--5 > span:nth-child(3) { width: 26%; aspect-ratio: 1; left: 37%; top: 48%; opacity: .3; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.pv-hero { padding-top: 58px; }
.pv-hero .pv-wrap {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
}
.pv-hero-txt { min-width: 0; }
.pv-hero-txt .pv-h1 { margin-top: 12px; }
.pv-hero-lede { margin: 16px 0 0; font-size: 16.5px; color: var(--ink-soft); max-width: 52ch; }
.pv-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pv-hero-media { aspect-ratio: 4 / 5; min-height: 320px; }
.pv-facts {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin: 30px 0 0; padding: 22px 0 0; list-style: none;
  border-top: 1px solid var(--line);
}
.pv-facts li { display: flex; flex-direction: column; }
.pv-facts b { font-family: var(--font-h); font-size: 24px; line-height: 1.1; color: var(--p-ink); }
.pv-facts span { font-size: 12.5px; color: var(--ink-soft); }

/* Plein cadre : la photo prend tout l'écran, le texte passe par-dessus. */
.pv-hero--full { position: relative; padding: 0; min-height: min(76vh, 620px); display: grid; }
.pv-hero--full > .pv-media {
  position: absolute; inset: 0; border-radius: 0; z-index: 0;
}
.pv-hero--full > .pv-media::after {
  content: ""; position: absolute; inset: 0;
  /* Le texte se pose entre 40 et 90 % de hauteur : le voile doit y être
     franchement opaque, sinon rien n'est lisible sur une photo claire (mesuré
     à 1,0-2,9:1 avec l'ancien dégradé, sur les 20 combinaisons). Un repli
     opaque précède le dégradé pour les navigateurs sans `color-mix`. */
  background-color: rgba(10, 10, 10, .62);
  background-image: linear-gradient(to top,
    color-mix(in srgb, var(--s) 96%, transparent) 0%,
    color-mix(in srgb, var(--s) 92%, transparent) 42%,
    color-mix(in srgb, var(--s) 68%, transparent) 72%,
    color-mix(in srgb, var(--s) 34%, transparent) 100%);
}
.pv-hero--full .pv-hero-over {
  position: relative; z-index: 1;
  display: block; align-self: end;
  padding-top: 120px; padding-bottom: 62px;
}
.pv-hero--full .pv-h1,
.pv-hero--full .pv-hero-lede,
.pv-hero--full .pv-facts b,
.pv-hero--full .pv-facts span { color: var(--on-s); }
/* Sur le voile, le surtitre suit l'encre du bloc : l'accent (or clair)
   tombait à 1,0:1 sur une zone surexposée de la photo. */
.pv-hero--full .pv-eyebrow { color: var(--on-s); }
.pv-hero--full .pv-facts { border-top-color: color-mix(in srgb, var(--on-s) 26%, transparent); }
.pv-hero--full .pv-btn--ghost { border-color: color-mix(in srgb, var(--on-s) 46%, transparent); color: var(--on-s); }

/* Éditorial : le titre déborde, un filet sépare les colonnes. */
.pv-hero--edit .pv-wrap { grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: start; }
.pv-hero--edit .pv-h1 { font-size: clamp(34px, 6.2vw, 66px); letter-spacing: -0.035em; }
.pv-hero--edit .pv-hero-media { aspect-ratio: 3 / 4; border-radius: 0; }

/* Audacieux : bloc plein, tout en graisse. */
.pv-hero--bold .pv-wrap { align-items: stretch; }
.pv-hero--bold .pv-hero-txt {
  background: var(--p); color: var(--on-p);
  padding: 40px; border-radius: var(--radius);
}
.pv-hero--bold .pv-h1 { color: var(--on-p); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 4.6vw, 46px); }
.pv-hero--bold .pv-eyebrow,
.pv-hero--bold .pv-hero-lede { color: color-mix(in srgb, var(--on-p) 82%, transparent); }
.pv-hero--bold .pv-facts { border-top-color: color-mix(in srgb, var(--on-p) 28%, transparent); }
.pv-hero--bold .pv-facts b, .pv-hero--bold .pv-facts span { color: var(--on-p); }
.pv-hero--bold .pv-btn--p { background: var(--on-p); color: var(--p); border-color: var(--on-p); }
.pv-hero--bold .pv-btn--ghost { border-color: color-mix(in srgb, var(--on-p) 45%, transparent); color: var(--on-p); }
.pv-hero--bold .pv-hero-media { aspect-ratio: auto; height: 100%; }

/* ── Bandeaux de réassurance ────────────────────────────────────────────── */
.pv-badges .pv-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pv-badge {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.pv-badge-i { grid-row: span 2; align-self: start; margin-top: 3px; color: var(--p-ink); font-size: 19px; }
.pv-badge b { font-family: var(--font-h); font-size: 15px; }
.pv-badge span { font-size: 13px; color: var(--ink-soft); }

.pv-stats .pv-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pv-stat {
  padding: 26px 22px; text-align: center;
  border-radius: var(--radius); background: var(--p-soft);
}
.pv-stat b { display: block; font-family: var(--font-h); font-size: 34px; line-height: 1; color: var(--p-ink); }
.pv-stat span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }

/* ── Grilles de cartes ──────────────────────────────────────────────────── */
.pv-grid { display: grid; gap: var(--gap); }
.pv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pv-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.pv-card--service { padding: 22px; }
.pv-card--service:hover { border-color: var(--p-line); transform: translateY(-2px); }
.pv-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pv-card--service .pv-btn { margin-top: 14px; }
.pv-price { font-family: var(--font-h); font-weight: 700; font-size: 15px; color: var(--p-ink); white-space: nowrap; }
.pv-price--big { font-size: 19px; }

/* ── Carte / menu ───────────────────────────────────────────────────────── */
.pv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pv-tab {
  padding: 9px 16px; min-height: 42px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; font-size: 13.5px; font-weight: 600;
}
.pv-tab.is-on { background: var(--p); color: var(--on-p); border-color: var(--p); }
.pv-menu-note { margin: 0 0 16px; font-size: 13px; color: var(--ink-soft); font-style: italic; }
.pv-menu-list { list-style: none; margin: 0; padding: 0; }
.pv-menu-item {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 0; border-bottom: 1px dashed var(--line-strong);
}
.pv-menu-item:last-child { border-bottom: 0; }
.pv-menu-l { flex: 1 1 auto; min-width: 0; }
.pv-menu-l b { display: block; font-family: var(--font-h); font-size: 16px; }
.pv-menu-l span { font-size: 13.5px; color: var(--ink-soft); }
.pv-menu-p { font-family: var(--font-h); font-weight: 700; color: var(--p-ink); white-space: nowrap; }

/* ── Boutique ───────────────────────────────────────────────────────────── */
.pv-prod { cursor: pointer; display: flex; flex-direction: column; }
.pv-prod:hover { transform: translateY(-3px); border-color: var(--p-line); }
.pv-prod-media { aspect-ratio: 4 / 3; border-radius: 0; }
.pv-prod-b { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
/* `flex-wrap` : le prix ET le bouton refusent de se couper (un libellé d'action
   sur deux lignes, un prix coupé au milieu du montant), donc à quatre colonnes
   un prix qui est une phrase (« 79 € par mois », « dès 280 € ») poussait le
   bouton hors de la carte, que `overflow: hidden` tranchait net à droite,
   coin arrondi amputé : 26 px de trop mesurés à 1010 px de large. Faute de
   place sur une ligne, le bouton passe donc dessous. Il reste aligné avec ceux
   des cartes voisines, que `margin-top: auto` colle déjà en bas. */
.pv-prod-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: auto; padding-top: 14px;
}
.pv-tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 999px;
  background: var(--a); color: var(--on-a);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.pv-payline {
  display: flex; align-items: center; gap: 9px;
  margin: 22px 0 0; padding: 12px 16px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13px; color: var(--ink-soft);
}
.pv-payline .pv-ico { color: var(--p-ink); font-size: 16px; flex: 0 0 auto; }

/* ── Réalisations · équipe · articles ───────────────────────────────────── */
.pv-work-media, .pv-post-media { aspect-ratio: 16 / 10; border-radius: 0; }
.pv-member-media { aspect-ratio: 1; border-radius: 0; }
.pv-work-b, .pv-post-b, .pv-member-b { padding: 18px; }
.pv-role { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--p-ink); }
.pv-job { padding: 22px; }

/* ── Galerie ────────────────────────────────────────────────────────────── */
/* Cellules de hauteur FIXE : la première occupe 2 colonnes sur 2 rangées, donc
   la hauteur de rangée ne peut pas dépendre du contenu (sinon les cellules
   simples s'étirent et les légendes se chevauchent). La légende passe en
   surimpression, hors du flux. */
.pv-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 168px;
  gap: 12px;
}
.pv-shot { margin: 0; cursor: pointer; min-height: 0; }
.pv-shot:first-child { grid-column: span 2; grid-row: span 2; }
.pv-shot-media { width: 100%; height: 100%; aspect-ratio: auto; }
.pv-shot-media img { transition: transform .35s ease; }
.pv-shot:hover .pv-shot-media img { transform: scale(1.04); }
.pv-shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 14px 11px;
  /* La légende se pose sur une photo dont on ne connaît pas la clarté : le
     voile doit être franc sous le texte, et l'ombre porte le reste. */
  background-image: linear-gradient(to top,
    rgba(8,8,8,.88) 0%, rgba(8,8,8,.72) 55%, rgba(8,8,8,0) 100%);
  color: #fff; font-size: 12.5px; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* ── Vidéo ──────────────────────────────────────────────────────────────── */
.pv-videoframe { position: relative; border-radius: var(--radius); overflow: hidden; }
.pv-video-media { aspect-ratio: 16 / 9; border-radius: 0; }
.pv-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border: 0; border-radius: 999px;
  background: var(--p); color: var(--on-p); font-size: 26px;
  display: grid; place-items: center;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
.pv-play:hover { transform: translate(-50%, -50%) scale(1.06); }

/* ── Histoire ───────────────────────────────────────────────────────────── */
.pv-about .pv-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
/* Le bandeau des valeurs occupe toute la largeur, sous les deux colonnes. */
.pv-about .pv-about-vals { display: block; }
.pv-about-media { aspect-ratio: 5 / 4; }
.pv-about-txt .pv-h2 { margin-top: 8px; }
.pv-quote {
  margin: 22px 0 0; padding: 16px 0 0 18px;
  border-left: 3px solid var(--a);
}
.pv-quote p { margin: 0; font-family: var(--font-h); font-size: 17px; line-height: 1.45; }
.pv-quote cite { display: block; margin-top: 8px; font-size: 12.5px; font-style: normal; color: var(--ink-soft); }
.pv-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 46px; }
.pv-value { display: flex; flex-direction: column; gap: 4px; }
.pv-value-i { color: var(--a); font-size: 20px; }
.pv-value b { font-family: var(--font-h); font-size: 15px; }
.pv-value span { font-size: 13px; color: var(--ink-soft); }

/* ── Réservation ────────────────────────────────────────────────────────── */
.pv-book {
  display: grid; grid-template-columns: 1.25fr .95fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
}
.pv-book-l { padding: 26px; }
.pv-book-r { padding: 26px; background: var(--surface-2); border-left: 1px solid var(--line); }
.pv-flabel {
  display: block; margin: 20px 0 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pv-book-l > .pv-flabel:first-child { margin-top: 0; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-chip {
  padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; font-size: 13px; font-weight: 500;
}
.pv-chip:hover { border-color: var(--p); }
.pv-chip.is-on { background: var(--p); color: var(--on-p); border-color: var(--p); }
.pv-chip.is-off { opacity: .38; text-decoration: line-through; }
.pv-chip--sm { padding: 7px 12px; min-height: 36px; }
.pv-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pv-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 2px; min-height: 62px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: transparent; line-height: 1.15;
}
.pv-day b { font-family: var(--font-h); font-size: 17px; }
.pv-day-d, .pv-day-m { font-size: 10.5px; color: var(--ink-soft); }
.pv-day:hover { border-color: var(--p); }
.pv-day.is-on { background: var(--p); color: var(--on-p); border-color: var(--p); }
.pv-day.is-on .pv-day-d, .pv-day.is-on .pv-day-m { color: color-mix(in srgb, var(--on-p) 78%, transparent); }
.pv-day.is-off { opacity: .34; }
.pv-slots { margin-top: 4px; }
.pv-field { display: block; margin-top: 14px; }
.pv-field > span {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.pv-field input, .pv-field textarea {
  width: 100%; padding: 11px 13px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-b); font-size: 14px;
}
.pv-field textarea { min-height: 84px; resize: vertical; }
.pv-field input:focus, .pv-field textarea:focus { outline: 2px solid var(--p); outline-offset: 1px; }
.pv-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ── Devis ──────────────────────────────────────────────────────────────── */
.pv-quote-form {
  padding: 28px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.pv-steps { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pv-step {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface-2); font-size: 13px; color: var(--ink-soft);
}
.pv-step b {
  width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 999px; background: var(--line-strong); color: var(--ink);
  font-size: 11.5px;
}
.pv-step.is-on { background: var(--p-soft); color: var(--p-ink); }
.pv-step.is-on b { background: var(--p); color: var(--on-p); }
.pv-quote-form .pv-btn--lg { margin-top: 20px; }

/* ── Avis ───────────────────────────────────────────────────────────────── */
.pv-avis-c { padding: 24px; display: flex; flex-direction: column; }
.pv-stars { display: flex; gap: 2px; color: var(--a); font-size: 15px; }
/* Une note se lit d'un coup d'œil : les étoiles doivent être pleines, pas des
   contours (l'icône partagée est monoligne par défaut). */
.pv-stars svg { fill: currentColor; stroke-width: 1; }
.pv-avis-c blockquote { margin: 12px 0 0; font-size: 14.5px; line-height: 1.62; }
.pv-avis-c figcaption { margin-top: auto; padding-top: 16px; }
.pv-avis-c figcaption b { display: block; font-family: var(--font-h); font-size: 14px; }
.pv-avis-c figcaption span { font-size: 12.5px; color: var(--ink-soft); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.pv-faq-l { border-top: 1px solid var(--line); }
.pv-faq-i { border-bottom: 1px solid var(--line); }
.pv-faq-i summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-h); font-size: 16px; font-weight: 600;
}
.pv-faq-i summary::-webkit-details-marker { display: none; }
.pv-faq-chev { color: var(--p-ink); font-size: 18px; transition: transform .2s ease; flex: 0 0 auto; }
.pv-faq-i[open] .pv-faq-chev { transform: rotate(180deg); }
.pv-faq-i > .pv-p { margin: 0 0 20px; max-width: 76ch; }

/* ── Carte cadeau ───────────────────────────────────────────────────────── */
.pv-gift-c {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center;
  padding: 34px; border-radius: var(--radius); background: var(--surface-2);
}
.pv-giftcard {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  aspect-ratio: 16 / 10; padding: 26px;
  border-radius: var(--radius);
  /* Dégradé tenu entre deux teintes profondes, et encre calculée pour la plus
     profonde : un dégradé qui allait de --p à --s pouvait porter une encre
     lisible à un bout et invisible à l'autre. */
  /* Longhands séparés : un second `background` (raccourci) remettrait la
     couleur de repli à transparent dès que le dégradé est compris. */
  background-color: var(--s);
  background-image: linear-gradient(140deg,
    color-mix(in srgb, var(--p) 55%, var(--s)), var(--s));
  color: var(--on-s);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.pv-giftcard-brand { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.pv-giftcard b { font-family: var(--font-h); font-size: 26px; }
.pv-giftcard-v { font-size: 13px; opacity: .82; }

/* ── Infos pratiques ────────────────────────────────────────────────────── */
.pv-practical-g { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pv-hours { padding: 24px; }
.pv-hours-h { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-family: var(--font-h); }
.pv-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ink-soft); flex: 0 0 auto; }
.pv-dot.is-open { background: #2fa360; box-shadow: 0 0 0 4px color-mix(in srgb, #2fa360 22%, transparent); }
.pv-hours-l { list-style: none; margin: 0; padding: 0; }
.pv-hours-l li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.pv-hours-l li:last-child { border-bottom: 0; }
.pv-hours-l li.is-today { color: var(--p-ink); font-weight: 600; }
.pv-map { display: flex; flex-direction: column; }
.pv-mapart {
  position: relative; aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 34px),
    var(--surface-2);
}
.pv-road { position: absolute; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.pv-road--0 { left: 0; right: 0; top: 34%; height: 9px; }
.pv-road--1 { left: 0; right: 0; top: 71%; height: 6px; }
.pv-road--2 { top: 0; bottom: 0; left: 26%; width: 8px; }
.pv-road--3 { top: 0; bottom: 0; left: 68%; width: 5px; }
.pv-road--4 { left: 6%; right: 42%; top: 52%; height: 4px; transform: rotate(-13deg); }
.pv-road--5 { left: 52%; right: 4%; top: 18%; height: 4px; transform: rotate(9deg); }
.pv-pin {
  position: absolute; left: 50%; top: 46%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 999px 999px 999px 2px;
  background: var(--p); transform: rotate(-45deg);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--p) 22%, transparent);
}
.pv-map-b { padding: 18px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pv-map-b b { font-family: var(--font-h); font-size: 15px; }
.pv-map-b .pv-btn { margin-top: 12px; }

/* ── Contact ────────────────────────────────────────────────────────────── */
.pv-contact-g { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--gap); align-items: start; }
.pv-cform { padding: 26px; }
.pv-contact-side { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.pv-cline { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; }
.pv-cline .pv-ico { color: var(--p-ink); font-size: 17px; margin-top: 2px; flex: 0 0 auto; }

/* ── Newsletter ─────────────────────────────────────────────────────────── */
.pv-news-c {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center;
  padding: 32px; border-radius: var(--radius);
  background: var(--s); color: var(--on-s);
}
.pv-news-c .pv-h2, .pv-news-c .pv-p { color: var(--on-s); }
.pv-news-c .pv-p { opacity: .82; }
.pv-news-f { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-news-f input {
  flex: 1 1 200px; padding: 12px 14px; min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--on-s) 32%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--on-s) 8%, transparent);
  color: var(--on-s); font-family: var(--font-b); font-size: 14px;
}
.pv-news-f input::placeholder { color: color-mix(in srgb, var(--on-s) 55%, transparent); }

/* ── Appel à l'action final ─────────────────────────────────────────────── */
.pv-cta { text-align: center; }
.pv-cta .pv-lede { margin-left: auto; margin-right: auto; }
.pv-cta .pv-hero-acts { justify-content: center; }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.pv-foot {
  margin-top: var(--sec-y);
  padding: 48px 0 30px;
  background: var(--s); color: var(--on-s);
}
.pv-foot .pv-wrap { display: flex; flex-wrap: wrap; gap: 34px; }
.pv-foot-brand { flex: 1 1 220px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.pv-foot-brand b { font-family: var(--font-h); font-size: 19px; }
.pv-foot-brand .pv-p { color: color-mix(in srgb, var(--on-s) 70%, transparent); }
.pv-foot-cols { flex: 2 1 460px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pv-foot-col { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.pv-foot-col > span, .pv-foot-col > a { color: color-mix(in srgb, var(--on-s) 76%, transparent); }
.pv-foot-col > a:hover { color: var(--on-s); }
.pv-foot-h {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--a) !important; margin-bottom: 3px;
}
.pv-social { flex: 1 1 100%; display: flex; gap: 10px; }
.pv-soc {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--on-s) 26%, transparent);
  border-radius: var(--radius-sm); background: transparent; color: var(--on-s); font-size: 17px;
}
.pv-soc:hover { background: var(--a); color: var(--on-a); border-color: var(--a); }
.pv-foot-legal {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  margin-top: 12px; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--on-s) 18%, transparent);
  font-size: 12px; color: color-mix(in srgb, var(--on-s) 60%, transparent);
}

/* ── Boutons flottants ──────────────────────────────────────────────────── */
.pv-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.pv-float-b {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; min-height: 48px;
  border: 0; border-radius: 999px;
  background: var(--p); color: var(--on-p);
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
}
/* Vert assombri : le vert de messagerie d'origine donnait 3,25:1 avec du
   blanc, sous le seuil pour un libellé de 14 px. */
.pv-float-b--chat { background: #12804a; color: #fff; }
.pv-float-b:hover { transform: translateY(-2px); }

/* ── Fenêtres (fiche produit, panier, photo) ────────────────────────────── */
.pv-modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 22px;
  background: rgba(10,10,10,.62);
  opacity: 0; transition: opacity .2s ease;
}
.pv-modal.is-on { opacity: 1; }
.pv-modal-box {
  position: relative;
  width: min(760px, 100%); max-height: 88vh; overflow: auto;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.pv-modal-box--photo { padding: 14px; width: min(920px, 100%); }
.pv-modal-x {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); font-size: 17px;
}
.pv-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pv-pm-media { aspect-ratio: 1; }
.pv-lightbox { aspect-ratio: 16 / 10; }
.pv-cart-l { list-style: none; margin: 16px 0 0; padding: 0; }
.pv-cart-l li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}

/* ── Note de démonstration ──────────────────────────────────────────────── */
.pv-toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 14px;
  background: #16150f; color: #fbfaf7;
  font-size: 13.5px; line-height: 1.45; text-align: left;
  box-shadow: 0 14px 40px rgba(0,0,0,.36);
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.pv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pv-toast .pv-ico { color: #ffd479; font-size: 17px; flex: 0 0 auto; }

.pv-fail { padding: 60px 26px; text-align: center; color: var(--ink-soft); }

/* Bandeau « ceci est une démonstration », affiché uniquement quand l'aperçu est
   ouvert hors du configurateur (lien partagé). Volontairement hors charte du
   faux site : il ne doit pas passer pour un élément de celui-ci. */
.pv-standalone {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 20px;
  background: #16150f; color: #fbfaf7;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; line-height: 1.45; text-align: center;
}
.pv-standalone .pv-ico { color: #ffd479; font-size: 16px; flex: 0 0 auto; }
/* Sélecteur porté par `.pv` : sinon `.pv a { color: inherit }` (deux
   composantes) gagne, et le libellé devient crème sur crème. */
.pv .pv-standalone-cta {
  padding: 7px 14px; min-height: 36px;
  display: inline-flex; align-items: center;
  border-radius: 999px; background: #fbfaf7; color: #16150f;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  text-decoration: none;
}
.pv .pv-standalone-cta:hover { background: #ffd479; color: #16150f; }

/* ══════════════════ Directions de mise en page ═════════════════════════ */

/* Moderne : aéré, arrondi, ombres douces. */
.pv--moderne { --sec-y: 80px; }
.pv--moderne .pv-card { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.pv--moderne .pv-head { text-align: center; margin-left: auto; margin-right: auto; }
.pv--moderne .pv-head .pv-lede { margin-left: auto; margin-right: auto; }

/* Éditorial : filets, titres serrés, alignement à gauche, peu d'arrondi. */
.pv--editorial { --sec-y: 72px; --wrap: 1080px; }
.pv--editorial .pv-card { border-radius: 0; }
.pv--editorial .pv-media { border-radius: 0; }
.pv--editorial .pv-h2 { font-size: clamp(25px, 3.6vw, 40px); letter-spacing: -0.03em; }
.pv--editorial .pv-head {
  padding-bottom: 18px; margin-bottom: 34px;
  border-bottom: 2px solid var(--ink);
}
.pv--editorial .pv-eyebrow { color: var(--ink-soft); }
.pv--editorial .pv-sec + .pv-sec { padding-top: 12px; }
.pv--editorial .pv-btn { border-radius: 0; }
.pv--editorial .pv-chip, .pv--editorial .pv-tab { border-radius: 0; }

/* Audacieux : graisses fortes, blocs pleins, bordures franches. */
.pv--audacieux { --sec-y: 74px; }
.pv--audacieux .pv-h1, .pv--audacieux .pv-h2 { text-transform: uppercase; letter-spacing: -0.02em; }
.pv--audacieux .pv-h2 { font-size: clamp(24px, 3.4vw, 38px); }
.pv--audacieux .pv-card { border-width: 2px; border-color: var(--ink); box-shadow: 5px 5px 0 var(--p-soft); }
.pv--audacieux .pv-btn { border-width: 2px; font-weight: 700; }
.pv--audacieux .pv-btn--ghost { border-color: var(--ink); }
.pv--audacieux .pv-stat { border: 2px solid var(--ink); background: var(--a-soft); }
.pv--audacieux .pv-eyebrow { background: var(--a); color: var(--on-a); padding: 3px 9px; border-radius: 3px; }
.pv--audacieux .pv-tab.is-on { box-shadow: 3px 3px 0 var(--ink); }

/* Plein cadre : bord à bord, chrome minimal. */
/* `--hero-lift` : de combien le hero remonte pour passer SOUS la barre. C'est
   aussi la hauteur de barre réellement posée sur la photo, d'où la variable :
   les deux ne peuvent plus se désaccorder. */
.pv--plein-cadre { --sec-y: 70px; --wrap: 1180px; --hero-lift: 70px; }
.pv--plein-cadre .pv-hero { padding-top: 0; margin-top: calc(-1 * var(--hero-lift)); }

/* La barre ne s'efface QUE là où c'est le parti pris de la mise en page : posée
   sur la photo du hero, tout en haut de l'accueil. Elle porte alors l'encre du
   hero, comme les titres qui sont dessus. Partout ailleurs elle garde son fond.
   Transparente en permanence, elle laissait le contenu défiler DERRIÈRE les
   libellés : mesuré au pixel, 2,2:1 entre l'encre d'un lien et le texte qui
   glisse dessous sur une page intérieure, 1,9:1 sur la photo du hero, 1,1:1
   pour le nom de la marque. Le flou du fond ne fabrique pas de contraste, il ne
   fait que brouiller.

   `:has(+ .pv-main > .pv-hero--full:first-child)` : la barre ne se pose que sur
   un hero plein cadre qui est vraiment le PREMIER bloc de la page, sinon c'est
   le bandeau d'annonce qui est dessous, pas la photo.

   Le retour au fond plein est piloté par le défilement. Sans cette capacité
   (`@supports`), la barre reste pleine partout : on perd l'effet, jamais la
   lisibilité. Fond, filet et encre voyagent dans la MÊME animation : ils ne
   peuvent pas se désaccorder, donc aucune position de défilement ne peut poser
   une encre claire sur un fond clair. */
@supports (animation-timeline: scroll()) {
  .pv--plein-cadre .pv-nav:has(+ .pv-main > .pv-hero--full:first-child) {
    --nav-ink: currentColor;
    /* 34 % : le poids d'un `--line-strong` (28 % d'encre) une fois la barre
       pleine, et un filet encore visible sur la photo. */
    --nav-line: color-mix(in srgb, currentColor 34%, transparent);
    animation-name: pv-nav-pose;
    /* Une marche, pas un fondu : à mi-fondu la barre est à moitié pleine sous
       une encre à moitié claire, et le défilement peut s'arrêter là. Mesuré à
       1,0:1 au milieu de la transition ; la marche bascule d'un état lisible à
       l'autre, comme le ferait une classe posée par un script. */
    animation-timing-function: steps(1, jump-end);
    animation-fill-mode: both;
    animation-timeline: scroll();
    animation-range: 0 48px;
  }
  /* Le survol d'un outil vire à l'accent (`--p-ink`), une couleur profonde qui
     tombe à 1,6:1 sur la photo du hero. Ici c'est donc le filet qui s'affirme,
     et le libellé garde l'encre de la barre. */
  .pv--plein-cadre .pv-nav:has(+ .pv-main > .pv-hero--full:first-child) .pv-icon-btn:hover {
    border-color: currentColor;
    color: inherit;
  }
  /* Une seule étape déclarée : l'étape d'arrivée est reprise de la règle
     `.pv-nav`, donc la barre revient exactement à son fond habituel. */
  @keyframes pv-nav-pose {
    from {
      background-color: transparent;
      /* Pas de flou tant que la barre est posée sur la photo : le flou prend
         son échantillon derrière TOUTE la barre, donc il étalait le fond de
         page clair (derrière la bande du haut) une dizaine de pixels plus bas,
         en travers de la première rangée de liens, mesuré à 2,8:1. Sur la
         photo il n'apportait rien : c'est le voile du hero qui porte le
         contraste, pas lui. */
      backdrop-filter: none;
      /* La barre n'est posée sur la photo que sur ses `--hero-lift` derniers
         pixels. Elle est souvent plus haute que ça : deux rangées dès que les
         liens passent à la ligne (mesuré 118 px à 1000 px de large, 200 px à
         621 px avec dix pages), et toute la hauteur du menu quand il est
         déplié. Ce qui dépasse est donc peint en `--s` opaque, dont `--on-s`
         est justement l'encre : le fond de page clair ne remonte jamais sous
         une encre claire. Barre d'une seule rangée : le point d'arrêt tombe à
         zéro ou dans le négatif, et la barre est entièrement transparente.
         Le `+ 1px` fait mordre la bande d'un pixel sur la photo : le bas de la
         bande et le haut de la photo tombent sinon sur le même pixel
         fractionnaire, et il reste entre les deux un fil de fond de page en
         travers des lettres, mesuré à 1,1:1. */
      background-image: linear-gradient(to bottom,
        var(--s) 0, var(--s) calc(100% - var(--hero-lift) + 1px),
        transparent calc(100% - var(--hero-lift) + 1px));
      border-bottom-color: transparent;
      color: var(--on-s);
    }
  }
}
.pv--plein-cadre .pv-hero--full .pv-hero-over { padding-top: 160px; }
.pv--plein-cadre .pv-media { border-radius: var(--radius); }
.pv--plein-cadre .pv-mosaic { gap: 6px; }
.pv--plein-cadre .pv-card { border-color: transparent; background: var(--surface-2); }
.pv--plein-cadre .pv-head { text-align: center; margin-left: auto; margin-right: auto; }
.pv--plein-cadre .pv-head .pv-lede { margin-left: auto; margin-right: auto; }

/* Artisanal : chaleureux, formes souples, filets pointillés, petites rotations. */
.pv--artisanal { --sec-y: 76px; }
.pv--artisanal .pv-card { border-color: var(--p-line); }
.pv--artisanal .pv-head::after {
  content: ""; display: block; width: 62px; height: 3px; margin-top: 14px;
  border-radius: 999px; background: var(--a);
}
.pv--artisanal .pv-brand-mark { border-radius: 999px; }
.pv--artisanal .pv-media { border-radius: calc(var(--radius) + 6px); }
.pv--artisanal .pv-hero-media { transform: rotate(1.2deg); }
.pv--artisanal .pv-about-media { transform: rotate(-1deg); }
.pv--artisanal .pv-value-i { color: var(--p-ink); }
.pv--artisanal .pv-stat { border-radius: calc(var(--radius) + 8px); }

/* ══════════════════════════ Responsive ═════════════════════════════════ */
@media (max-width: 1000px) {
  .pv-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pv-values { grid-template-columns: repeat(2, 1fr); }
  .pv-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .pv-shot:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 1080px) {
  .pv-links { flex-basis: 100%; justify-content: flex-start; order: 4; margin-left: 0; }
  .pv-nav-in { flex-wrap: wrap; row-gap: 8px; }
}

@media (max-width: 880px) {
  .pv { --sec-y: 56px; }
  .pv-wrap { padding: 0 20px; }
  .pv-hero .pv-wrap,
  .pv-about .pv-wrap,
  .pv-gift-c, .pv-news-c,
  .pv-contact-g, .pv-practical-g,
  .pv-book, .pv-pm { grid-template-columns: 1fr; }
  .pv-book-r { border-left: 0; border-top: 1px solid var(--line); }
  .pv-grid--3, .pv-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .pv-badges .pv-wrap, .pv-stats .pv-wrap { grid-template-columns: 1fr; }
  .pv-hero-media { aspect-ratio: 16 / 10; min-height: 0; }
  .pv--audacieux .pv-hero-media { height: auto; aspect-ratio: 16 / 10; }
  .pv-foot-cols { grid-template-columns: 1fr 1fr; }
  .pv-nav-tools { margin-left: auto; }
}
@media (max-width: 620px) {
  .pv { font-size: 14.5px; }
  .pv-grid--3, .pv-grid--2, .pv-grid--4,
  .pv-mosaic, .pv-values, .pv-foot-cols, .pv-fgrid { grid-template-columns: 1fr; }
  .pv-shot:first-child { grid-column: auto; }
  .pv-cal { grid-template-columns: repeat(4, 1fr); }
  .pv-nav-cta { display: none; }
  .pv-burger { display: flex; }
  /* Menu replié : les liens ne s'affichent qu'au clic sur le bouton. */
  .pv-links {
    display: none; order: 4; width: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0; margin: 6px 0 2px; padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .pv-links.is-open { display: flex; }
  /* Le menu déplié est la seule façon de circuler dans l'aperçu au doigt :
     ses lignes doivent être de vraies lignes (22 px de haut mesurés avant). */
  .pv-link { padding: 11px 10px; min-height: 44px; display: flex; align-items: center;
             font-size: 15px; border-radius: var(--radius-sm); }
  /* L'aperçu MONTRE ce qu'on livre : un champ qui déclenche le zoom auto d'iOS
     y ferait mauvaise démonstration autant que mauvaise impression, et le zoom
     casserait le cadrage du faux site qu'on est venu regarder. */
  .pv-field input, .pv-field textarea, .pv-field select { font-size: 16px; }
  /* Retour au configurateur depuis un aperçu ouvert seul (36 px mesurés). */
  .pv .pv-standalone-cta { min-height: 44px; }
  /* Le pied du faux site : mêmes lignes cliquables que dans le menu. */
  .pv-foot-col { gap: 0; }
  .pv-foot-col > a { display: flex; align-items: center; min-height: 44px; }
  .pv-brand { min-height: 44px; }
  .pv-btn--sm { min-height: 44px; }
  .pv-book-l, .pv-book-r, .pv-cform, .pv-quote-form { padding: 18px; }
  .pv-gift-c, .pv-news-c { padding: 22px; }
  .pv-hero--full { min-height: 0; }
  .pv-hero--full .pv-hero-over { padding-top: 90px; padding-bottom: 40px; }
  .pv--plein-cadre .pv-hero--full .pv-hero-over { padding-top: 110px; }
  .pv-float-b span { display: none; }
  .pv-float-b { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv *, .pv *::before, .pv *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .pv--artisanal .pv-hero-media,
  .pv--artisanal .pv-about-media { transform: none; }
}