/*
Theme Name: Pura Vie
Theme URI: https://puravie.fr
Author: Pura Vie
Author URI: https://puravie.fr
Description: Thème WordPress sur mesure pour Pura Vie — services de nettoyage et désinfection pour situations sensibles. Design calme, digne et confidentiel. Entièrement modifiable depuis WordPress (Customizer + contenus). Léger, responsive et SEO-friendly.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: puravie
Tags: business, services, clean, responsive, custom-colors, custom-logo, custom-menu, featured-images
*/

/* ==========================================================================
   1. DESIGN SYSTEM — Variables
   ========================================================================== */
/* ==========================================================================
   DIRECTION ARTISTIQUE « SALLE CLAIRE » (27/08/2026)
   --------------------------------------------------------------------------
   Identité conservée, rôles réécrits. Le bleu #5b9bd5 et le vert #86c5a8
   restent les couleurs de la marque mais ne portent PLUS JAMAIS de texte :
   ils deviennent lumière, filet et surface. Les encres deviennent de vraies
   encres. Tous les ratios en commentaire sont mesurés, pas estimés.
   ========================================================================== */
:root {
  /* ---- Couleurs de marque (surchargées par le Customizer) --------------- */
  --pv-blue: #5b9bd5;         /* 2,96:1 — jamais de lettres */
  --pv-green: #86c5a8;        /* 1,99:1 — jamais de lettres */
  --pv-blue-dark: #4a90c4;    /* conservé : compatibilité ascendante */
  --pv-green-dark: #6fb595;
  --pv-blue-deep: #3d6990;    /* 5,80:1 — liens, icônes qui désignent */
  --pv-green-deep: #537a68;   /* 4,90:1 — RÔLE EXCLUSIF : la validation */

  /* ---- Encres ----------------------------------------------------------- */
  --pv-ink-900: #16303f;      /* 13,7:1 — h1 uniquement */
  --pv-ink-800: #21455f;      /* 10,1:1 — h2, h3, chiffres, téléphone, focus */
  --pv-ink: #3f5665;          /* 7,69:1 — corps de texte */
  --pv-ink-soft: #5e7484;     /* 4,94:1 — texte secondaire */
  --pv-ink-mute: #8aa0ad;     /* 2,72:1 — NON TEXTUEL : chevrons, filets */
  --pv-heading: #21455f;      /* alias historique → encre 800 */

  /* ---- Blancs stratifiés (même teinte ~198°, 1 à 3 % de luminance) ------- */
  --pv-w0: #ffffff;           /* surfaces flottantes : cartes, champs */
  --pv-w1: #fbfdfe;           /* fond de page */
  --pv-w2: #f4f9fb;           /* sections alternées */
  --pv-w3: #ebf3f7;           /* socle profond */
  --pv-w4: #dde9ef;           /* pastilles et repères */
  --pv-bg: var(--pv-w1);
  --pv-bg-soft: var(--pv-w2);
  --pv-bg-card: var(--pv-w0);
  --pv-badge-bg: #eef6fb;

  /* ---- Filets — trois niveaux, plus jamais un seul ----------------------- */
  --pv-line-hair: #e6eef3;    /* séparations internes */
  --pv-line: #cfdfe8;         /* bord de surface passive */
  --pv-line-control: #7b93a3; /* 3,22:1 — bord de TOUT élément interactif */
  --pv-border: var(--pv-line);

  /* ---- Dégradés — deux, jamais interchangeables -------------------------- */
  --pv-gradient: linear-gradient(95deg, var(--pv-blue) 0%, var(--pv-green) 100%);
  --pv-gradient-deep: linear-gradient(95deg, var(--pv-blue-deep) 0%, var(--pv-green-deep) 100%);
  --pv-gradient-soft: linear-gradient(120deg, #eaf4fb 0%, #ecf7f1 100%);

  /* ---- Rayons — la feuille et la pilule, rien d'autre -------------------- */
  --pv-radius: 4px;           /* ← le pari central : 16px → 4px */
  --pv-radius-sm: 4px;
  --pv-radius-lg: 8px;
  --pv-radius-pill: 999px;

  /* ---- Ombres — monotones, teintées encre et non bleu -------------------- */
  --pv-sh-1: 0 1px 2px rgba(18,48,63,.04), 0 2px 8px -4px rgba(18,48,63,.06);
  --pv-sh-2: 0 2px 4px rgba(18,48,63,.05), 0 8px 20px -8px rgba(18,48,63,.10);
  --pv-sh-3: 0 4px 8px rgba(18,48,63,.06), 0 20px 44px -16px rgba(18,48,63,.16);
  --pv-shadow: var(--pv-sh-2);
  --pv-shadow-sm: var(--pv-sh-1);

  /* ---- Espacement — base 4px, dix pas, aucune valeur hors échelle -------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px; --sp-10: 160px;

  /* ---- Échelle typographique — 8 crans, 2px d'écart minimum -------------- */
  --fs-100: 12px;   /* étiquette majuscules */
  --fs-200: 14px;   /* méta : signatures, mentions */
  --fs-300: 16px;   /* composants ET champs (16px = pas de zoom iOS) */
  --fs-400: 18px;   /* corps de prose */
  --fs-500: 21px;   /* chapô, titre de carte */
  --fs-600: 27px;   /* h3 de section */
  --fs-700: clamp(26px, 1.52vw + 20px, 42px);   /* h2 */
  --fs-800: clamp(34px, 3.05vw + 22px, 66px);   /* h1 — toujours > 1,3 × h2 */

  /* ---- Icônes — trois tailles, pas neuf ---------------------------------- */
  --icn-sm: 16px; --icn-md: 20px; --icn-lg: 28px;

  /* ---- Largeurs — deux, pas quatre --------------------------------------- */
  --pv-container: 1160px;
  --pv-w-text: 680px;

  --pv-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* L'étiquette : Poppins 500 majuscules interlettré. IBM Plex Mono reste
     une option à un seul changement près (voir décision 3 de la DA). */
  --pv-font-label: var(--pv-font);

  /* ---- REFONTE 2040 — extension du système, pas remplacement -------------
     Les jetons ci-dessus restent la base : encres, blancs et filets ne
     bougent pas. On ajoute ce que la refonte réclame et que le système
     n'avait pas : un fond profond pour les sections immersives, un cyan de
     lumière, et une matière « verre ». Les nouvelles couleurs suivent la
     même loi que les anciennes — les teintes CLAIRES ne portent jamais de
     lettres, seules les variantes profondes le peuvent. */

  /* Fond profond des sections immersives. 16,9:1 avec du blanc. */
  --pv-navy: #0c1f2e;
  --pv-navy-soft: #16344b;   /* strate haute du fond profond */

  /* Cyan de lumière. 1,9:1 sur blanc : SURFACE ET LUEUR, jamais du texte. */
  --pv-cyan: #6fc9de;
  --pv-cyan-deep: #2b6f83;   /* 5,12:1 sur blanc — la variante qui a le droit d'écrire */

  /* Encres posées SUR le fond profond. */
  --pv-on-navy: #f2f8fb;         /* 15,8:1 sur --pv-navy */
  --pv-on-navy-soft: #a9c2d1;    /* 7,2:1 — texte secondaire sur profond */

  /* Verre : une seule recette, pour que les surfaces translucides du site
     soient reconnaissables comme une même matière. */
  --pv-glass: rgba(255,255,255,.72);
  --pv-glass-line: rgba(255,255,255,.55);
  --pv-glass-blur: 14px;
  --pv-glass-dark: rgba(12,31,46,.55);
  --pv-glass-dark-line: rgba(255,255,255,.14);

  /* Dégradés de la couche immersive. */
  --pv-grad-navy: linear-gradient(155deg, var(--pv-navy) 0%, #123449 55%, #14415c 100%);
  --pv-grad-cyan: linear-gradient(95deg, var(--pv-blue-deep) 0%, var(--pv-cyan-deep) 100%);

  /* Barre CTA mobile : hauteur exposée en jeton, le corps de page s'en sert
     pour réserver sa place. Deux valeurs auraient fini par diverger. */
  --pv-ctabar-h: 62px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--pv-font);
  font-weight: 400;
  color: var(--pv-ink);
  background: var(--pv-w1);
  line-height: 1.65;
  font-size: var(--fs-400);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pv-blue-dark); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--pv-green-dark); }
/* Rampe unique : le h1 n'est plus jamais inférieur à 1,3 × le h2. Le défaut
   corrigé ici est que le titre d'accueil (43,2px) était plus petit que ses
   propres sous-titres (46,4px), et strictement égal à eux sous 768px. */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; color: var(--pv-ink-800); margin: 0 0 .5em; }
h1 { font-size: var(--fs-800); font-weight: 300; line-height: 1.08; letter-spacing: -.022em; color: var(--pv-ink-900); }
h2 { font-size: var(--fs-700); font-weight: 300; line-height: 1.14; letter-spacing: -.018em; }
h3 { font-size: var(--fs-500); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.pv-container { width: 100%; max-width: var(--pv-container); margin: 0 auto; padding: 0 24px; }
.pv-section { padding: 84px 0; position: relative; overflow: hidden; }
.pv-section--soft { background: var(--pv-bg-soft); }
.pv-section__head { text-align: center; max-width: 720px; margin: 0 auto 54px; }
.pv-section__head p { color: var(--pv-ink-soft); font-size: 1.12rem; margin: 0; }
/* Le dégradé de marque quitte le texte. Appliqué à une phrase longue il fait
   virer « Pura Vie » au kaki grisé — contraste techniquement correct, couleur
   morte. Il reste la marque du site, mais en filet (voir .pv-section__head) et
   en surface. Neutraliser la classe ici évite de toucher aux 9 gabarits. */
.pv-text-grad {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--pv-ink-900);
}
.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 18px; z-index: 1000; }
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.pv-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: .98rem; font-weight: 500;
  padding: 14px 28px; border-radius: var(--pv-radius-pill);
  border: none; cursor: pointer; line-height: 1; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.pv-btn--primary { background: var(--pv-gradient); color: #fff; box-shadow: var(--pv-shadow-sm); }
.pv-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(70,130,170,.7); }
.pv-btn--ghost { background: #fff; color: var(--pv-blue-dark); border: 1px solid var(--pv-border); }
.pv-btn--ghost:hover { color: var(--pv-green-dark); border-color: var(--pv-green); transform: translateY(-2px); }
.pv-btn--lg { padding: 17px 34px; font-size: 1.05rem; }

/* Taille par défaut des icônes inline (les contextes spécifiques la surchargent) */
.pv-i { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.pv-btn .pv-i { width: 1.1em; height: 1.1em; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.pv-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--pv-border);
}
.pv-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.pv-brand { display: inline-flex; align-items: center; gap: 12px; }
.pv-brand img { max-height: 54px; width: auto; }
.pv-brand__mark { width: 46px; height: 46px; flex: 0 0 auto; display: block; }
.pv-brand__logo { height: 58px; width: auto; max-width: 100%; display: block; }
.pv-footer .pv-brand__logo { height: 52px; }
.pv-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.pv-brand__name { font-size: 1.5rem; font-weight: 600; color: var(--pv-blue-dark); }
.pv-brand__name em { font-style: normal; color: var(--pv-green-dark); }
.pv-brand__tag { font-size: .62rem; letter-spacing: 1px; color: var(--pv-ink-soft); text-transform: uppercase; }
.pv-nav ul { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
.pv-nav a { color: var(--pv-ink); font-size: .98rem; font-weight: 400; position: relative; padding: 6px 0; }
.pv-nav a:hover, .pv-nav .current-menu-item > a { color: var(--pv-blue-dark); }
.pv-nav .current-menu-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--pv-gradient); }
.pv-header__cta { display: flex; align-items: center; gap: 14px; }
.pv-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.pv-burger span { display: block; width: 24px; height: 2px; background: var(--pv-blue-dark); margin: 5px 0; border-radius: 2px; transition: .3s; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.pv-hero { position: relative; padding: 70px 0 30px; }
.pv-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.pv-hero__title { margin-bottom: 18px; }
.pv-hero__sub { font-size: 1.18rem; color: var(--pv-ink); max-width: 460px; margin-bottom: 28px; }
.pv-hero__media { position: relative; border-radius: 28px; overflow: hidden; min-height: 360px; box-shadow: var(--pv-shadow); background: var(--pv-gradient-soft); }
.pv-hero__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Feuilles décoratives */
.pv-leaf { position: absolute; pointer-events: none; opacity: .5; z-index: 0; }
.pv-leaf svg { width: 100%; height: auto; display: block; }
.pv-leaf--tr { top: -40px; right: -60px; width: 360px; }
.pv-leaf--bl { bottom: -60px; left: -70px; width: 300px; opacity: .35; }
.pv-section > .pv-container { position: relative; z-index: 1; }

/* ==========================================================================
   7. TRUST BADGES
   ========================================================================== */
.pv-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; padding: 30px 0 4px; border-top: 1px solid var(--pv-border); }
.pv-trust__item { display: flex; align-items: center; gap: 14px; justify-content: center; }
.pv-trust__icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--pv-badge-bg); display: grid; place-items: center; color: var(--pv-blue); }
.pv-trust__icon svg { width: 24px; height: 24px; }
.pv-trust__item span { font-size: .98rem; color: var(--pv-ink); }

/* ==========================================================================
   8. SERVICES
   ========================================================================== */
.pv-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pv-services--detailed { grid-template-columns: repeat(2, 1fr); gap: 26px; }
.pv-card {
  background: var(--pv-bg-card); border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius); padding: 30px 26px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.pv-card:hover { transform: translateY(-6px); box-shadow: var(--pv-shadow); border-color: #d9ebe4; }
.pv-card__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--pv-gradient-soft); display: grid; place-items: center; color: var(--pv-blue); margin-bottom: 18px; }
.pv-card__icon svg { width: 30px; height: 30px; }
.pv-card__media { margin: -30px -26px 18px; border-radius: var(--pv-radius) var(--pv-radius) 0 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--pv-gradient-soft); }
.pv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
/* (zoom d'image au survol supprimé : tic d'e-commerce, hors registre) */
.pv-services--compact .pv-card__media { margin: -28px -18px 16px; }
.pv-services--detailed .pv-card__media { margin: -32px -30px 22px; aspect-ratio: 16 / 9; }
.pv-card h3 { margin-bottom: 10px; }
.pv-card p { color: var(--pv-ink); font-size: .96rem; margin-bottom: 16px; }
.pv-card--link { position: relative; cursor: pointer; }
.pv-card--link .pv-card__more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pv-card__more { margin-top: auto; font-weight: 500; color: var(--pv-blue-dark); display: inline-flex; align-items: center; gap: 6px; }
.pv-card__more:hover { gap: 10px; color: var(--pv-green-dark); }
.pv-services--compact .pv-card { text-align: center; align-items: center; padding: 28px 18px; }
.pv-services--compact .pv-card p { display: none; }
.pv-services--detailed .pv-card { padding: 32px 30px; }
.pv-services--detailed .pv-card__icon { float: none; }

/* ==========================================================================
   9. FEATURES (3 colonnes atouts)
   ========================================================================== */
.pv-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pv-feature { text-align: center; }
.pv-feature__icon { width: 58px; height: 58px; border-radius: 50%; background: var(--pv-badge-bg); display: grid; place-items: center; color: var(--pv-blue); margin: 0 auto 16px; }
.pv-feature__icon svg { width: 26px; height: 26px; }
.pv-feature h3 { font-size: 1.1rem; margin-bottom: 6px; }
.pv-feature p { color: var(--pv-ink-soft); font-size: .95rem; margin: 0; }

/* ==========================================================================
   10. TESTIMONIALS
   ========================================================================== */
.pv-quote-feature {
  background: var(--pv-gradient-soft); border-radius: var(--pv-radius);
  padding: 34px 40px; display: flex; align-items: center; gap: 26px;
}
.pv-quote-feature__mark { font-size: 3.4rem; line-height: .6; color: var(--pv-blue); opacity: .5; font-family: Georgia, serif; }
.pv-quote-feature p { margin: 0; font-style: italic; color: var(--pv-ink); }
.pv-quote-feature cite { font-style: normal; font-weight: 500; color: var(--pv-ink-soft); display: block; margin-top: 8px; }
.pv-quote-feature__leaf { margin-left: auto; flex: 0 0 auto; color: var(--pv-green); opacity: .55; }
.pv-quote-feature__leaf svg { width: 52px; height: 52px; }

.pv-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pv-testimonial { background: #fff; border: 1px solid var(--pv-border); border-radius: var(--pv-radius); padding: 28px 26px; box-shadow: var(--pv-shadow-sm); }
.pv-testimonial__mark { font-family: Georgia, serif; font-size: 2.6rem; line-height: .4; color: var(--pv-blue); opacity: .45; }
.pv-testimonial p { color: var(--pv-ink); margin: 14px 0 18px; }
.pv-testimonial__sep { width: 28px; height: 1px; background: var(--pv-border); margin-bottom: 12px; }
.pv-testimonial cite { font-style: normal; font-size: .92rem; color: var(--pv-ink-soft); }

.pv-note { display: flex; align-items: center; gap: 16px; background: var(--pv-bg-soft); border: 1px solid var(--pv-border); border-radius: var(--pv-radius); padding: 22px 28px; margin-top: 36px; }
.pv-note__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--pv-badge-bg); display: grid; place-items: center; color: var(--pv-blue); }
.pv-note__icon svg { width: 20px; height: 20px; }
.pv-note p { margin: 0; color: var(--pv-ink-soft); font-size: .96rem; }

/* ==========================================================================
   11. CTA BAND
   ========================================================================== */
.pv-cta-band { background: var(--pv-gradient); color: #fff; position: relative; overflow: hidden; }
.pv-cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 46px 0; position: relative; z-index: 1; }
.pv-cta-band h2 { color: #fff; font-weight: 400; margin: 0 0 6px; }
.pv-cta-band p { color: rgba(255,255,255,.92); margin: 0; }
.pv-cta-band .pv-btn--ghost { background: #fff; }
.pv-cta-band__leaf { position: absolute; opacity: .18; color: #fff; }
.pv-cta-band__leaf--l { left: 2%; top: 50%; transform: translateY(-50%); width: 90px; }
.pv-cta-band__leaf--r { right: 2%; top: 50%; transform: translateY(-50%); width: 90px; }

/* ==========================================================================
   12. CONTACT
   ========================================================================== */
.pv-contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: start; }
.pv-contact-info { background: #fff; border: 1px solid var(--pv-border); border-radius: var(--pv-radius); padding: 34px 30px; box-shadow: var(--pv-shadow-sm); }
.pv-contact-info h2 { font-size: 1.6rem; margin-bottom: 26px; }
.pv-contact-info__row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--pv-border); }
.pv-contact-info__row:last-child { border-bottom: none; }
.pv-contact-info__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--pv-badge-bg); display: grid; place-items: center; color: var(--pv-blue); }
.pv-contact-info__icon svg { width: 20px; height: 20px; }
.pv-contact-info__row strong { color: var(--pv-blue-dark); font-size: 1.05rem; display: block; }
.pv-contact-info__row span { color: var(--pv-ink-soft); font-size: .92rem; }

.pv-form { background: #fff; border: 1px solid var(--pv-border); border-radius: var(--pv-radius); padding: 36px 34px; box-shadow: var(--pv-shadow-sm); }
.pv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pv-field { margin-bottom: 18px; }
.pv-field label { display: block; font-size: .9rem; color: var(--pv-ink); margin-bottom: 7px; font-weight: 500; }
.pv-field input, .pv-field select, .pv-field textarea {
  width: 100%; font-family: inherit; font-size: .98rem; color: var(--pv-ink);
  padding: 13px 15px; border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm);
  background: #fcfeff; transition: border-color .2s ease, box-shadow .2s ease;
}
.pv-field input:focus, .pv-field select:focus, .pv-field textarea:focus {
  outline: none; border-color: var(--pv-blue); box-shadow: 0 0 0 3px rgba(91,155,213,.12);
}
.pv-field textarea { min-height: 120px; resize: vertical; }
.pv-urgency { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv-urgency label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border: 1px solid var(--pv-border); border-radius: var(--pv-radius-sm);
  cursor: pointer; color: var(--pv-ink); font-weight: 400; margin: 0; transition: .2s ease;
}
.pv-urgency input { position: absolute; opacity: 0; }
.pv-urgency label:has(input:checked) { border-color: var(--pv-blue); background: var(--pv-badge-bg); color: var(--pv-blue-dark); font-weight: 500; }
.pv-form .pv-btn { width: 100%; justify-content: center; }
.pv-form__privacy { display: flex; align-items: center; gap: 8px; color: var(--pv-ink-soft); font-size: .85rem; margin: 16px 0 0; justify-content: center; }
.pv-form__privacy svg { width: 15px; height: 15px; }
.pv-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.pv-alert { padding: 14px 18px; border-radius: var(--pv-radius-sm); margin-bottom: 22px; font-size: .95rem; }
.pv-alert--ok { background: #ecf8f1; color: #2f7d56; border: 1px solid #cfeede; }
.pv-alert--err { background: #fdeeee; color: #c0504d; border: 1px solid #f6d6d5; }

/* Champs de formulaire avec icône */
.pv-input-icon { position: relative; display: block; }
.pv-input-icon__i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--pv-blue); pointer-events: none; }
.pv-input-icon__i svg { width: 18px; height: 18px; }
.pv-input-icon > input,
.pv-input-icon > textarea { padding-left: 42px; }
.pv-input-icon--corner .pv-input-icon__i { left: auto; right: 14px; top: auto; bottom: 12px; transform: none; color: var(--pv-ink-soft); }
.pv-input-icon--corner > textarea { padding-left: 15px; padding-right: 40px; }

/* ==========================================================================
   13. PAGE HEADER (pages internes)
   ========================================================================== */
.pv-pagehead { text-align: center; padding: 76px 0 40px; position: relative; overflow: hidden; }
.pv-pagehead h1 { margin-bottom: 12px; }
.pv-pagehead p { font-size: 1.15rem; color: var(--pv-ink-soft); max-width: 640px; margin: 0 auto; }

/* ==========================================================================
   13b. ARRIÈRES-PLANS D'AMBIANCE (image IA via --pv-bg-image)
   ========================================================================== */
.pv-hero[style*="--pv-bg-image"]::before,
.pv-pagehead[style*="--pv-bg-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--pv-bg-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* En-tête de page interne : voile doux qui s'efface vers le bas. */
.pv-pagehead[style*="--pv-bg-image"]::before {
  opacity: .20;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}
/* Accueil : l'image d'ambiance occupe la moitié droite (côté texte préservé). */
/* Le masque est sorti en variables : la vidéo d'ambiance (§ 28) doit occuper
   EXACTEMENT la même surface que l'image qu'elle remplace. Deux masques
   recopiés auraient fini par diverger, et l'écart se serait vu au moment
   précis du fondu de l'une vers l'autre. */
.pv-hero {
  --pv-hero-mask-x: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 40%, #000 72%);
  --pv-hero-mask-y: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
}
.pv-hero[style*="--pv-bg-image"]::before {
  opacity: .5;
  background-position: right center;
  -webkit-mask-image: var(--pv-hero-mask-x), var(--pv-hero-mask-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--pv-hero-mask-x), var(--pv-hero-mask-y);
  mask-composite: intersect;
}
/* Le contenu reste au-dessus de l'image et des feuilles décoratives. */
.pv-hero > .pv-container,
.pv-pagehead > .pv-container { position: relative; z-index: 2; }

/* ==========================================================================
   14. GENERIC CONTENT (page.php / single.php)
   ========================================================================== */
.pv-content { max-width: 760px; margin: 0 auto; padding: 60px 0; }
.pv-content img { border-radius: var(--pv-radius); margin: 24px 0; }
.pv-content h2 { font-size: 1.7rem; margin-top: 1.6em; }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.pv-footer { border-top: 3px solid transparent; border-image: var(--pv-gradient) 1; background: var(--pv-bg-soft); padding: 44px 0 28px; }
.pv-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pv-footer__nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; flex-wrap: wrap; }
.pv-footer__nav a { color: var(--pv-ink); font-size: .95rem; }
.pv-footer__contact { display: flex; gap: 26px; flex-wrap: wrap; }
.pv-footer__contact a { color: var(--pv-ink); display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; }
.pv-footer__contact svg { width: 16px; height: 16px; color: var(--pv-blue); }
.pv-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--pv-border); color: var(--pv-ink-soft); font-size: .86rem; }
.pv-footer__legal { display: flex; gap: 20px; }
.pv-footer__legal a { color: var(--pv-ink-soft); }
.pv-social { display: flex; gap: 12px; }
.pv-social a { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--pv-border); display: grid; place-items: center; color: var(--pv-blue); }
.pv-social a:hover { background: var(--pv-gradient); color: #fff; border-color: transparent; }
.pv-social svg { width: 17px; height: 17px; }

/* Bouton WhatsApp flottant */
.pv-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 26px -10px rgba(37,211,102,.7); }
.pv-whatsapp:hover { color: #fff; transform: scale(1.06); }
.pv-whatsapp svg { width: 28px; height: 28px; }

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .pv-hero__grid { grid-template-columns: 1fr; }
  .pv-hero__media { min-height: 280px; order: -1; }
  .pv-hero__media:empty { display: none; } /* pas de panneau vide si aucune image */
  .pv-services { grid-template-columns: repeat(2, 1fr); }
  .pv-testimonials { grid-template-columns: repeat(2, 1fr); }
  .pv-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pv-nav, .pv-header__cta .pv-btn { display: none; }
  .pv-burger { display: block; }
  .pv-header.is-open .pv-nav { display: block; position: absolute; top: 84px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--pv-border); box-shadow: var(--pv-shadow-sm); }
  .pv-header.is-open .pv-nav ul { flex-direction: column; gap: 0; padding: 8px 24px 18px; }
  .pv-header.is-open .pv-nav li { border-bottom: 1px solid var(--pv-border); }
  .pv-header.is-open .pv-nav a { display: block; padding: 14px 0; }
  .pv-cta-band__inner { flex-direction: column; text-align: center; }
  .pv-footer__top, .pv-footer__bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 620px) {
  .pv-section { padding: 60px 0; }
  .pv-services, .pv-services--detailed, .pv-testimonials, .pv-features, .pv-trust, .pv-form__row { grid-template-columns: 1fr; }
  .pv-quote-feature { flex-direction: column; text-align: center; }
  .pv-quote-feature__leaf { margin: 0; }
  .pv-pagehead { padding: 54px 0 30px; }
}

/* Accessibilité : focus visible */
:focus-visible { outline: 3px solid rgba(91,155,213,.5); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ==========================================================================
   17. SOUS-MENU « SERVICES » (déroulant)
   ========================================================================== */
.pv-nav .menu-item-has-children { position: relative; }
.pv-nav .menu-item-has-children > a { padding-right: 16px; }

/* Chevron / bouton d'ouverture (clavier + tactile). */
.pv-submenu-toggle {
  position: absolute; top: 50%; right: -4px; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; border: none; background: none;
  cursor: pointer; display: grid; place-items: center; color: var(--pv-ink-soft);
}
.pv-submenu-toggle::before {
  content: ""; width: 7px; height: 7px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s ease;
}
.pv-nav .menu-item-has-children:hover > .pv-submenu-toggle,
.pv-nav .menu-item-has-children.is-expanded > .pv-submenu-toggle { color: var(--pv-blue-dark); }
.pv-nav .menu-item-has-children.is-expanded > .pv-submenu-toggle::before { transform: rotate(-135deg) translate(-2px, -2px); }

.pv-nav .sub-menu {
  position: absolute; top: calc(100% + 16px); left: -20px;
  min-width: 300px; max-width: 340px;
  list-style: none; margin: 0; padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-sm); box-shadow: var(--pv-shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 120;
}
/* Pont invisible : évite que le déroulant se ferme en traversant l'espace. */
.pv-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }

.pv-nav .menu-item-has-children:hover > .sub-menu,
.pv-nav .menu-item-has-children:focus-within > .sub-menu,
.pv-nav .menu-item-has-children.is-expanded > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
}
.pv-nav .sub-menu li { border: none; }
.pv-nav .sub-menu a {
  display: block; padding: 11px 14px; border-radius: 10px;
  font-size: .93rem; line-height: 1.4; color: var(--pv-ink);
}
.pv-nav .sub-menu a:hover,
.pv-nav .sub-menu a:focus-visible { background: var(--pv-bg-soft); color: var(--pv-blue-dark); }
.pv-nav .sub-menu .current-menu-item > a { background: var(--pv-badge-bg); color: var(--pv-blue-dark); font-weight: 500; }
/* Le soulignement dégradé de l'item courant ne s'applique pas dans le déroulant. */
.pv-nav .sub-menu .current-menu-item > a::after { display: none; }
.pv-nav .current-menu-parent > a::after {
  content: ""; position: absolute; left: 0; right: 16px; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--pv-gradient);
}

/* ==========================================================================
   18. FIL D'ARIANE
   ========================================================================== */
.pv-breadcrumb { padding: 18px 0 0; font-size: .88rem; }
.pv-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pv-breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--pv-ink-soft); }
.pv-breadcrumb li + li::before { content: "›"; color: var(--pv-ink-soft); opacity: .7; }
.pv-breadcrumb a { color: var(--pv-ink-soft); }
.pv-breadcrumb a:hover { color: var(--pv-blue-dark); }
.pv-breadcrumb [aria-current="page"] { color: var(--pv-heading); }

/* ==========================================================================
   19. PAGE SERVICE — en-tête
   ========================================================================== */
.pv-pagehead--service { padding-top: 46px; }
.pv-pagehead__icon {
  width: 62px; height: 62px; border-radius: 50%; background: var(--pv-badge-bg);
  display: grid; place-items: center; color: var(--pv-blue); margin: 0 auto 20px;
}
.pv-pagehead__icon svg { width: 28px; height: 28px; }

.pv-badges {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px;
}
.pv-badges li {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pv-badge-bg); color: var(--pv-blue-dark);
  border-radius: var(--pv-radius-pill); padding: 9px 18px; font-size: .9rem;
}
.pv-badges svg { width: 15px; height: 15px; color: var(--pv-green-dark); }

.pv-pagehead__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }

/* ==========================================================================
   20. PAGE SERVICE — sections
   ========================================================================== */
.pv-section--tight { padding: 56px 0; }

/* Texte + image */
.pv-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
.pv-split--solo { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; }
.pv-split__text h2 { margin-bottom: .6em; }
.pv-split__text p { color: var(--pv-ink); }
.pv-split__media { margin: 0; }
.pv-split__media img { border-radius: var(--pv-radius); box-shadow: var(--pv-shadow); width: 100%; }

/* Ce que comprend l'intervention */
.pv-includes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pv-include {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--pv-border); border-radius: var(--pv-radius);
  padding: 26px 26px; box-shadow: var(--pv-shadow-sm);
}
.pv-include__icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: var(--pv-badge-bg); display: grid; place-items: center; color: var(--pv-blue);
}
.pv-include__icon svg { width: 22px; height: 22px; }
.pv-include h3 { font-size: 1.08rem; margin: 0 0 6px; }
.pv-include p { margin: 0; color: var(--pv-ink-soft); font-size: .95rem; }

/* Barre de confiance.
   Le texte est blanc : le dégradé de marque seul plafonne à 1,99:1 sur son
   extrémité verte (WCAG AA exige 4,5:1). On superpose donc un voile sombre,
   qui garantit le contraste tout en laissant lire le dégradé — et qui tient
   même si le client change ses couleurs dans le Customizer. */
.pv-trustbar {
  background:
    linear-gradient(rgba(12, 40, 60, .55), rgba(12, 40, 60, .55)),
    var(--pv-gradient);
  color: #fff; padding: 40px 0;
}
.pv-trustbar__points {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 26px;
}
.pv-trustbar__points li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.pv-trustbar__points svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 4px; opacity: .95; }
.pv-trustbar__text {
  margin: 0; color: #fff; font-size: .96rem;
  border-top: 1px solid rgba(255,255,255,.32); padding-top: 18px;
}

/* Étapes */
.pv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: pv-step; }
.pv-step {
  background: #fff; border: 1px solid var(--pv-border); border-radius: var(--pv-radius);
  padding: 28px 24px; box-shadow: var(--pv-shadow-sm); position: relative;
}
.pv-step__num {
  display: block; font-size: 1.9rem; font-weight: 300; line-height: 1;
  margin-bottom: 12px; background: var(--pv-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pv-step h3 { font-size: 1.06rem; margin: 0 0 8px; }
.pv-step p { margin: 0; color: var(--pv-ink-soft); font-size: .93rem; }

/* Qui sommes-nous */
.pv-about { display: flex; align-items: flex-start; gap: 26px; max-width: 880px; margin: 0 auto; }
.pv-about__mark { flex: 0 0 auto; }
.pv-about__mark svg { width: 64px; height: 64px; }
.pv-about h2 { font-size: 1.7rem; margin-bottom: .5em; }
.pv-about p { color: var(--pv-ink); }

/* Avis Google */
.pv-section--reviews .pv-section__head { margin-bottom: 34px; }
.pv-reviews-embed { max-width: 1000px; margin: 0 auto; }
.pv-reviews-embed iframe { max-width: 100%; border: 0; }
.pv-reviews-link { text-align: center; margin: 26px 0 0; }
.pv-admin-note {
  border: 1px dashed var(--pv-blue); background: var(--pv-badge-bg);
  border-radius: var(--pv-radius-sm); padding: 18px 22px;
  color: var(--pv-ink); font-size: .93rem;
}

/* ==========================================================================
   21. FAQ (accordéon natif <details>)
   ========================================================================== */
.pv-faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.pv-faq__item {
  background: #fff; border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-sm); box-shadow: var(--pv-shadow-sm);
}
.pv-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-weight: 500; color: var(--pv-heading); line-height: 1.45;
}
.pv-faq__item summary::-webkit-details-marker { display: none; }
.pv-faq__item summary:hover { color: var(--pv-blue-dark); }
.pv-faq__chevron { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; opacity: .65; }
.pv-faq__item[open] > summary .pv-faq__chevron { transform: rotate(-135deg); }
.pv-faq__answer { padding: 0 24px 22px; }
.pv-faq__answer p { margin: 0; color: var(--pv-ink); font-size: .97rem; }

/* ==========================================================================
   22. RESPONSIVE — nouveautés
   ========================================================================== */
@media (max-width: 980px) {
  .pv-split { grid-template-columns: 1fr; gap: 30px; }
  .pv-split__media { order: -1; }
  .pv-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* Le déroulant devient un accordéon dans le menu mobile. */
  .pv-header.is-open .pv-nav .sub-menu {
    position: static; min-width: 0; max-width: none;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    padding: 0 0 10px 14px; margin: 0;
    display: none; gap: 0;
  }
  .pv-header.is-open .pv-nav .menu-item-has-children.is-expanded > .sub-menu { display: flex; }
  .pv-header.is-open .pv-nav .sub-menu::before { display: none; }
  .pv-header.is-open .pv-nav .sub-menu li { border-bottom: none; }
  .pv-header.is-open .pv-nav .sub-menu a { padding: 10px 12px; font-size: .92rem; }
  /* Le <li> grandit quand le sous-menu est déplié : on ancre le chevron en
     haut plutôt qu'au centre, sinon il glisse au milieu de la liste. */
  .pv-submenu-toggle { top: 0; transform: none; right: 2px; width: 44px; height: 52px; }
  .pv-header.is-open .pv-nav .menu-item-has-children > a { padding-right: 50px; }

  .pv-trustbar__points { grid-template-columns: 1fr; }
  .pv-about { flex-direction: column; gap: 18px; }
}

@media (max-width: 620px) {
  .pv-includes, .pv-steps { grid-template-columns: 1fr; }
  .pv-pagehead__actions { flex-direction: column; align-items: stretch; }
  .pv-pagehead__actions .pv-btn { justify-content: center; }
  .pv-badges { gap: 8px; }
  .pv-badges li { font-size: .84rem; padding: 8px 14px; }
  .pv-section--tight { padding: 44px 0; }
  .pv-faq__item summary { padding: 17px 18px; }
  .pv-faq__answer { padding: 0 18px 18px; }
}

/* ==========================================================================
   23. ACCUEIL — HERO ENRICHI, BADGE D'AVIS, ÉTAPES, « QUI SOMMES-NOUS »
   ========================================================================== */

/* Texte réservé aux lecteurs d'écran (le .skip-link a son propre traitement). */
.screen-reader-text:not(.skip-link) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Le titre d'accueil est désormais une phrase complète : la taille XXL du h1
   générique la ferait déborder sur trois lignes géantes. */
.pv-hero h1 { margin-bottom: var(--sp-5); }
/* Le dégradé de marque plafonne à 2,97:1 sur blanc et tombe à 1,53:1 sur son
   extrémité verte : acceptable sur deux mots courts, illisible dès qu'un titre
   court sur plusieurs lignes ou passe sur l'image d'ambiance. Les grands titres
   prennent donc la rampe assombrie (4,8:1 à 5,8:1), qui suit toujours les
   couleurs choisies dans le Customizer.
   Toujours « background-image » et jamais le raccourci « background » : celui-ci
   réinitialiserait background-clip:text et le titre deviendrait un aplat. */
/* (le dégradé sur les titres est supprimé — voir .pv-text-grad) */
.pv-hero__text { max-width: 620px; }

/* Badge de note « avis Google », en haut du hero. */
.pv-rating {
  display: inline-flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-pill); padding: 8px 18px 8px 14px;
  box-shadow: var(--pv-shadow-sm); margin-bottom: 22px;
  color: var(--pv-ink); font-size: .9rem; line-height: 1.3;
}
a.pv-rating:hover { color: var(--pv-ink); border-color: var(--pv-green); transform: translateY(-1px); }
a.pv-rating { transition: transform .2s ease, border-color .2s ease; }
.pv-rating__stars { position: relative; display: inline-flex; flex: 0 0 auto; }
.pv-rating__layer { display: inline-flex; gap: 2px; }
.pv-rating__layer--bg { color: #dfe9ef; }
.pv-rating__layer--fg {
  position: absolute; top: 0; left: 0; overflow: hidden;
  width: var(--pv-rating, 100%); color: #f0a92d;
}
.pv-rating__stars svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pv-rating__text { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
/* --pv-blue-dark (3,45:1) et --pv-ink-soft (2,7:1) échouent au seuil AA de
   4,5:1 sur le blanc du badge : on prend les variantes assombries. */
.pv-rating__text strong { color: var(--pv-blue-deep); font-weight: 600; }
.pv-rating__count { color: var(--pv-ink); font-size: .86rem; }

/* Deux boutons côte à côte sous le sous-titre du hero. */
.pv-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Ligne complémentaire des cartes de service.
   Le brief demande de l'ajouter SOUS la description existante : les cartes
   compactes de l'accueil masquaient jusqu'ici leur extrait (règle ligne 192),
   on le réaffiche pour que la description soit bien présente au-dessus.
   Le sélecteur porte .pv-card pour passer devant « .pv-card p ». */
.pv-services--compact .pv-card p { display: block; }
.pv-card .pv-card__plus {
  font-size: .9rem; font-weight: 500; color: var(--pv-blue-deep);
  border-top: 1px solid var(--pv-border); padding-top: 13px; margin-bottom: 16px;
}

/* « Qui sommes-nous » avec visuel — variante du bloc des pages service. */
.pv-about--media {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 44px;
  align-items: center; max-width: 1040px;
}
.pv-about__figure { margin: 0; }
.pv-about__figure img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;
  border-radius: var(--pv-radius); box-shadow: var(--pv-shadow);
}
.pv-about__body h2 { font-size: 1.7rem; margin-bottom: .5em; }
.pv-about__body p { color: var(--pv-ink); margin: 0; }

/* ==========================================================================
   24. RESPONSIVE — accueil enrichi
   ========================================================================== */
@media (max-width: 980px) {
  .pv-hero__text { max-width: none; }
  /* Le hero passe sur une colonne : les lignes du titre traversent alors la
     zone où la photo d'ambiance est pleinement visible (72 % de la largeur).
     On l'atténue pour préserver la lisibilité du message principal. */
  .pv-hero[style*="--pv-bg-image"]::before { opacity: .28; }
  .pv-about--media { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 620px) {
  .pv-hero__actions { flex-direction: column; align-items: stretch; }
  .pv-hero__actions .pv-btn { justify-content: center; }
  .pv-rating { font-size: .85rem; padding: 7px 15px 7px 12px; gap: 9px; }
  .pv-rating__text { flex-wrap: wrap; white-space: normal; }
}

/* ==========================================================================
   25. PAGE « À PROPOS »
   ========================================================================== */

/* Alternance visuelle : la section « Zone d'intervention » place sa photo à
   gauche, à l'inverse de « Notre histoire ». En dessous de 980px, la règle
   commune .pv-split__media { order: -1 } remet l'image au-dessus du texte. */
.pv-split--reverse { grid-template-columns: .95fr 1.05fr; }
.pv-split--reverse .pv-split__media { order: -1; }

/* Les trois valeurs : mêmes cartes que les étapes, sur le fond adouci.
   Le texte prend --pv-ink (5,1:1) et non --pv-ink-soft (2,7:1), qui échoue au
   seuil AA de 4,5:1 sur ces paragraphes pleine largeur. */
.pv-values .pv-feature {
  background: #fff; border: 1px solid var(--pv-border); border-radius: var(--pv-radius);
  padding: 34px 26px; box-shadow: var(--pv-shadow-sm);
}
.pv-values .pv-feature p { color: var(--pv-ink); }

/* Zone d'intervention */
.pv-zone__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--pv-badge-bg); display: grid; place-items: center;
  color: var(--pv-blue); margin-bottom: 18px;
}
.pv-zone__icon svg { width: 26px; height: 26px; }
.pv-zone h2 { margin-bottom: .4em; }
.pv-zone__lead { font-size: 1.2rem; color: var(--pv-ink); margin: 0; }

/* Avis clients : cinq cartes. La grille à 3 colonnes laisserait les deux
   dernières collées à gauche ; en flex, la ligne incomplète reste centrée. */
.pv-testimonials--flow { display: flex; flex-wrap: wrap; justify-content: center; }
.pv-testimonials--flow .pv-testimonial { flex: 1 1 280px; max-width: calc((100% - 48px) / 3); }

/* Appel final : deux boutons côte à côte dans la bande.
   Tous deux en variante blanche — un bouton dégradé se fondrait dans la bande. */
.pv-cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; flex: 0 0 auto; }

@media (max-width: 980px) {
  .pv-split--reverse { grid-template-columns: 1fr; }
  .pv-testimonials--flow .pv-testimonial { max-width: calc((100% - 24px) / 2); }
}
@media (max-width: 620px) {
  .pv-testimonials--flow .pv-testimonial { max-width: 100%; }
  .pv-cta-band__actions { width: 100%; flex-direction: column; }
  .pv-cta-band__actions .pv-btn { justify-content: center; }
}

/* ==========================================================================
   25. ANIMATIONS — sobres, discrètes, réversibles
   --------------------------------------------------------------------------
   Le sujet du site impose la retenue : aucun rebond, aucun effet appuyé.
   Uniquement des fondus lents et de très courtes translations.

   Tout est conditionné à la classe « pv-motion », posée sur <html> par un
   script inline UNIQUEMENT si le visiteur n'a pas demandé de réduire les
   animations. Sans JavaScript, ou en mode « animations réduites », aucune
   règle ci-dessous ne s'applique : rien n'est masqué, la page reste entière.
   C'est le piège classique de ce genre d'effet — un « animation: none »
   global laisserait sinon les éléments figés à opacity 0.
   ========================================================================== */

/* LOI 3 — une montée de lumière, pas un déplacement. Huit pixels, pas vingt.
   will-change est posé par le JS au moment de révéler, jamais ici. */
.pv-motion .pv-anim { opacity: 0; transform: translateY(8px); }
.pv-motion .pv-anim.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   560ms cubic-bezier(.22, .61, .36, 1) calc(var(--pv-i, 0) * 60ms),
    transform 560ms cubic-bezier(.22, .61, .36, 1) calc(var(--pv-i, 0) * 60ms);
}

/* L'image du hero et celle du bloc « Qui sommes-nous » montent un peu moins :
   un grand bloc qui se déplace autant attire trop l'œil. */
.pv-motion .pv-about__figure.pv-anim { transform: translateY(6px); }
.pv-motion .pv-about__figure.pv-anim.is-in { transform: none; }

/* Impression : jamais d'élément manquant sur un document imprimé. */
@media print {
  .pv-anim { opacity: 1 !important; transform: none !important; }
}

/* --- En-tête : se détache doucement dès que la page défile ---------------- */
.pv-header { transition: box-shadow .35s ease, background-color .35s ease; }
.pv-header.is-scrolled {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 30px -24px rgba(70, 130, 170, .85);
}

/* LOI 4 — rien ne boucle, rien ne tourne hors écran.
   L'ondulation des feuilles tournait en permanence, y compris hors champ, sur
   trois pages. Une page qui bouge en permanence est le contraire du silence. */

/* --- Micro-interactions au survol ---------------------------------------- */
.pv-include, .pv-step, .pv-testimonial {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pv-include:hover, .pv-step:hover, .pv-testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--pv-shadow);
  border-color: #d9ebe4;
}
.pv-trust__icon, .pv-include__icon, .pv-card__icon {
  transition: transform .3s ease, background-color .3s ease;
}
.pv-trust__item:hover .pv-trust__icon,
.pv-include:hover .pv-include__icon,
.pv-card:hover .pv-card__icon { transform: scale(1.07); }

/* Le numéro d'étape s'affirme légèrement au survol de sa carte. */
.pv-step__num { transition: opacity .3s ease; opacity: .85; }
.pv-step:hover .pv-step__num { opacity: 1; }

/* Réponse de la FAQ : ouverture en fondu plutôt que d'un bloc. */
@keyframes pv-faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pv-motion .pv-faq__item[open] .pv-faq__answer { animation: pv-faq-open .35s ease both; }

/* ==========================================================================
   26. SALLE CLAIRE — COMPOSANTS
   --------------------------------------------------------------------------
   Couche d'application de la direction. Les couleurs, rayons et ombres se
   propagent déjà seuls par les jetons : on ne traite ici que ce qui hardcode
   une valeur, ce qui doit changer de forme, et les défauts fonctionnels
   relevés par l'audit.
   ========================================================================== */

/* --- Rythme de section : deux valeurs, symétriques ------------------------ */
.pv-section { padding: var(--sp-9) 0; }
.pv-section--tight { padding: var(--sp-8) 0; }
@media (max-width: 1023px) {
  .pv-section { padding: var(--sp-8) 0; }
  .pv-section--tight { padding: var(--sp-7) 0; }
}
@media (max-width: 639px) {
  .pv-section { padding: 56px 0; }
  .pv-section--tight { padding: var(--sp-5) 0 var(--sp-6); }
}

/* --- Un seul bord gauche pour toute la page ------------------------------- */
/* Le rendu précédent enchaînait 5 bascules centré/gauche par page et 8 bords
   gauches distincts. Ce qui fait « modèle », c'est l'alternance ; ce qui fait
   « institution », c'est une seule ligne tenue du haut en bas de la page. */
.pv-section__head { text-align: left; margin-left: 0; margin-right: 0; max-width: 900px; }
.pv-section__head h2 { margin-bottom: var(--sp-4); }
.pv-section__head p { max-width: var(--pv-w-text); font-size: var(--fs-500); }
/* La nervure de la feuille, redressée : le motif de marque devient la
   ponctuation du document, et le dégradé retrouve son seul emploi légitime —
   un trait, jamais une lettre. */
.pv-section__head::before {
  content: ""; display: block; width: 72px; height: 1px;
  background: var(--pv-gradient); margin-bottom: var(--sp-5);
}
.pv-services--compact .pv-card { text-align: left; align-items: flex-start; padding: var(--sp-5); }
.pv-trust__item { justify-content: flex-start; }
.pv-badges { justify-content: flex-start; }
.pv-trustbar__text { max-width: var(--pv-w-text); }
.pv-faq__answer p, .pv-split__text p, .pv-about__body p { max-width: var(--pv-w-text); }

/* --- Les trois plans ------------------------------------------------------ */
.pv-card, .pv-step, .pv-include, .pv-testimonial, .pv-faq__item,
.pv-contact-info, .pv-form, .pv-note {
  background: var(--pv-w0);
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-radius);
  box-shadow: var(--pv-sh-1);
}
/* Le geste signature : une transition de lumière, assez lente (420 ms) pour
   être prise pour un changement d'éclairage et non pour un mouvement. */
.pv-card, .pv-step, .pv-include, .pv-testimonial, .pv-faq__item {
  transition: border-color 420ms cubic-bezier(.4, 0, .2, 1),
              box-shadow   420ms cubic-bezier(.4, 0, .2, 1),
              transform    420ms cubic-bezier(.4, 0, .2, 1);
}
.pv-card:hover, .pv-step:hover, .pv-include:hover,
.pv-testimonial:hover, .pv-faq__item:hover {
  border-color: var(--pv-line-control);
  box-shadow: var(--pv-sh-2);
  transform: translateY(-2px);
}

/* --- Les six disques disparaissent : l'icône se pose nue ------------------ */
.pv-trust__icon, .pv-card__icon, .pv-feature__icon, .pv-include__icon, .pv-note__icon {
  width: auto; height: auto; border-radius: 0; background: none;
  display: inline-flex; align-items: center; color: var(--pv-blue-deep);
  margin-bottom: var(--sp-3);
}
.pv-trust__icon svg, .pv-note__icon svg { width: var(--icn-md); height: var(--icn-md); }
.pv-card__icon svg, .pv-feature__icon svg, .pv-include__icon svg { width: var(--icn-lg); height: var(--icn-lg); }
.pv-trust__icon, .pv-include__icon { margin-bottom: 0; }
/* Exception unique : dans le bloc de contact, l'icône sert de repère de
   colonne — elle garde un carré. Carré, jamais cercle. */
.pv-contact-info__icon {
  width: 40px; height: 40px; border-radius: var(--pv-radius);
  background: var(--pv-w2); border: 1px solid var(--pv-line); color: var(--pv-blue-deep);
}
/* Le vert de marque prend son rôle exclusif : ce qui valide. */
.pv-badges svg, .pv-trustbar__points svg, .pv-trust__icon svg { color: var(--pv-green-deep); }
.pv-trustbar__points svg { color: rgba(255,255,255,.9); }

/* --- Icônes : trois tailles, un trait plus fin ---------------------------- */
.pv-i { width: var(--icn-md); height: var(--icn-md); stroke-width: 1.5; }
.pv-btn .pv-i, .pv-footer__contact svg, .pv-breadcrumb svg { width: var(--icn-sm); height: var(--icn-sm); }

/* --- Boutons : le dégradé porteur passe sur la rampe profonde ------------- */
/* Blanc sur le dégradé clair : 1,99:1 mesuré à l'extrémité verte, la seconde
   moitié du libellé peinte sous 2,4:1. Même geste, même dégradé de marque,
   rampe assombrie : 4,90:1 minimum sur toute la largeur. */
.pv-btn--primary { background: var(--pv-gradient-deep); box-shadow: var(--pv-sh-1); }
.pv-btn--primary:hover { box-shadow: var(--pv-sh-2); }
.pv-btn--ghost { border-color: var(--pv-line-control); color: var(--pv-ink-800); }
.pv-btn--ghost:hover { border-color: var(--pv-blue-deep); color: var(--pv-blue-deep); }
.pv-cta-band { background: var(--pv-gradient-deep); }
.pv-cta-band h2 { font-size: var(--fs-600); font-weight: 300; }
.pv-cta-band .pv-btn { flex: 0 0 auto; white-space: nowrap; }

/* --- En-tête : le verre dépoli ne floutait rien et coûtait 6,5 ms/frame --- */
.pv-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--pv-w0); }
.pv-header.is-scrolled { background: var(--pv-w0); box-shadow: var(--pv-sh-2); }

/* --- Commandes : un bord qui existe --------------------------------------- */
.pv-field input, .pv-field select, .pv-field textarea, .pv-urgency label {
  border-color: var(--pv-line-control);
  border-radius: var(--pv-radius);
  background: var(--pv-w0);
  font-size: var(--fs-300);        /* 16px : supprime le zoom automatique iOS */
}
.pv-field label { font-size: var(--fs-200); color: var(--pv-ink-soft); }

/* CORRECTIF FONCTIONNEL — le bouton « Standard » cochait « Urgente ».
   La radio invisible gardait la largeur du formulaire (340px à 390px) et
   recouvrait le label voisin : un clic au centre de « Standard » activait
   « Urgente ». On la confine à son propre label. */
.pv-urgency label { position: relative; }
.pv-urgency input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
}

/* --- Focus clavier : opaque, et non un voile à 1,65:1 --------------------- */
:focus-visible { outline: 2px solid var(--pv-ink-800); outline-offset: 2px; border-radius: 2px; }

/* --- Médias : la boîte réserve sa hauteur avant le chargement ------------- */
/* Chaque vignette décalait la page de 226px en arrivant. */
.pv-card__media { aspect-ratio: 3 / 2; }
.pv-card__media img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Étiquettes : chiffres tabulaires et interlettrage -------------------- */
.pv-step__num, .pv-rating__text strong { font-variant-numeric: tabular-nums; }
.pv-breadcrumb {
  font-family: var(--pv-font-label); font-size: var(--fs-100);
  letter-spacing: .14em; text-transform: uppercase; color: var(--pv-ink-soft);
}
.pv-rating__count {
  font-family: var(--pv-font-label); font-size: var(--fs-100);
  letter-spacing: .12em; text-transform: uppercase; color: var(--pv-ink-soft);
}

/* --- La feuille : moins nombreuse, enfin vue ------------------------------ */
/* Quatre apparitions dont deux à 18 % d'opacité, c'est-à-dire jamais.
   Il en reste une par page, grande, nette, recadrée par le bord de section. */
.pv-leaf--bl, .pv-cta-band__leaf { display: none; }
.pv-leaf--tr { width: 560px; top: -80px; right: -140px; opacity: .05; }
.pv-hero .pv-leaf--tr { color: var(--pv-blue-deep); }

/* --- Hero : la colonne de texte passe à 7 colonnes sur 12 ----------------- */
/* Elle était rendue à 563px : le titre tombait sur 5 lignes et les deux
   boutons (301 + 268 + 16 de gouttière = 585px) dépassaient de 22px, si bien
   que le bouton d'appel perdait son rang sur la page la plus consultée. */
.pv-hero__grid { grid-template-columns: minmax(0, 656px) 1fr; gap: var(--sp-7); }
.pv-hero__text { max-width: none; }
.pv-hero__sub { max-width: 30em; font-size: var(--fs-500); font-weight: 300; color: var(--pv-ink); margin-bottom: var(--sp-6); }
.pv-hero__actions { flex-wrap: nowrap; gap: var(--sp-4); }
.pv-trust { border-top: 1px solid var(--pv-line); gap: var(--sp-6); }
@media (max-width: 1023px) {
  .pv-hero__grid { grid-template-columns: 1fr; }
  .pv-hero__actions { flex-wrap: wrap; }
}

/* --- La pastille WhatsApp cesse d'être l'élément le plus saturé du site --- */
/* #25d366 avec un halo vert : de loin la couleur la plus vive de l'interface,
   sur un site dont le SOP impose la discrétion. La forme suffit à la
   reconnaître ; la couleur criait. */
.pv-whatsapp {
  background: var(--pv-ink-800); color: #fff;
  box-shadow: var(--pv-sh-2);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform 420ms cubic-bezier(.4,0,.2,1), background-color 420ms cubic-bezier(.4,0,.2,1);
}
.pv-whatsapp:hover { background: var(--pv-ink-900); color: #fff; transform: none; box-shadow: var(--pv-sh-3); }
.pv-whatsapp svg { width: 26px; height: 26px; }
@media (max-width: 639px) { .pv-whatsapp { width: 48px; height: 48px; right: 12px; bottom: 12px; } }

/* --- Le dernier jeton clair encore posé sur du texte ---------------------- */
/* --pv-blue-dark rend à 3,62:1 sur blanc et 3,31:1 sur le fond de badge. Il
   portait encore les liens de navigation, les « En savoir plus » et les puces
   d'engagement — soit les 24 derniers blocs non conformes. Il passe à la
   variante profonde (5,80:1), sans changer la teinte. */
.pv-nav a:hover, .pv-nav .current-menu-item > a,
.pv-card__more, .pv-brand__name, .pv-contact-info__row strong,
.pv-faq__item summary, .pv-nav .sub-menu a:hover,
.pv-nav .sub-menu .current-menu-item > a { color: var(--pv-blue-deep); }
.pv-badges li { color: var(--pv-ink-800); background: var(--pv-w2); border: 1px solid var(--pv-line); }
.pv-nav a { color: var(--pv-ink); }
.pv-card__more:hover { color: var(--pv-ink-800); }
.pv-social a { color: var(--pv-blue-deep); }
.pv-footer__contact svg, .pv-contact-info__icon svg, .pv-input-icon__i { color: var(--pv-blue-deep); }
.pv-urgency label:has(input:checked) { border-color: var(--pv-blue-deep); background: var(--pv-w2); color: var(--pv-ink-800); }


/* ==========================================================================
   27. SECTION SERVICES — SUR-TITRE, ACCENT, CARTES ENRICHIES
   --------------------------------------------------------------------------
   Reprise de la structure demandée par le client (numéro, icône, liste de
   prestations, bouton fléché) écrite dans la langue de « Salle claire » :
   4 px et carrés au lieu de 20 px et cercles, fer à gauche au lieu du centrage,
   bleu profond plein au lieu du dégradé clair — le dégradé reste un trait.
   ========================================================================== */

/* --- Sur-titre : la même étiquette que le fil d'Ariane et le compteur d'avis */
.pv-eyebrow {
  display: block;
  font-family: var(--pv-font-label); font-size: var(--fs-100);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pv-ink-soft);
  margin-bottom: var(--sp-3);
}
/* Le filet dégradé du .pv-section__head reste en tête ; le sur-titre se glisse
   dessous, et l'écart passe du filet au sur-titre plutôt qu'au titre. */
.pv-section__head:has(.pv-eyebrow)::before { margin-bottom: var(--sp-4); }

/* --- Accent du titre : bleu profond PLEIN, 5,80:1 ------------------------- */
/* Surtout pas var(--pv-gradient) : à l'extrémité verte le texte tombe à
   1,99:1. La rampe profonde porte déjà les liens du site. */
.pv-accent { color: var(--pv-blue-deep); }

/* --- Grille : deux colonnes, la même sur l'accueil et sur /services ------- */
.pv-services--rich { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (max-width: 860px) { .pv-services--rich { grid-template-columns: 1fr; } }

.pv-services--rich .pv-card {
  display: flex; flex-direction: column;
  text-align: left; align-items: stretch;
  padding: var(--sp-5);
}

/* --- Photo : le seul rayon large tolérable, celui du jeton -lg ------------ */
.pv-services--rich .pv-card__media {
  position: relative;
  margin: 0 0 var(--sp-4);
  border-radius: var(--pv-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--pv-w3);
}
.pv-services--rich .pv-card__media img {
  width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

/* --- Numéro : puce carrée, jamais un disque ------------------------------- */
.pv-card__num {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  padding: 2px var(--sp-2);
  background: var(--pv-w0);
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-radius);
  font-family: var(--pv-font-label); font-size: var(--fs-100);
  font-weight: 500; letter-spacing: .1em; line-height: 1.6;
  color: var(--pv-ink-800);
  font-variant-numeric: tabular-nums;
}

/* --- Corps de carte ------------------------------------------------------- */
.pv-services--rich .pv-card__icon { margin-bottom: var(--sp-3); }
.pv-services--rich .pv-card h3 { color: var(--pv-ink-800); margin-bottom: var(--sp-3); }
.pv-services--rich .pv-card > p { display: block; color: var(--pv-ink); font-size: var(--fs-300); margin-bottom: var(--sp-4); }
.pv-services--rich .pv-card .pv-card__plus { margin-bottom: var(--sp-4); }

/* --- Prestations : le vert profond dans son rôle exclusif, la validation --- */
.pv-card__points { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.pv-card__points li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-300); color: var(--pv-ink); line-height: 1.45;
}
.pv-card__points svg {
  flex: 0 0 auto; width: var(--icn-sm); height: var(--icn-sm);
  margin-top: 4px; color: var(--pv-green-deep);
}

/* --- Pied de carte : le lien garde son rang, la flèche n'est qu'un repère -- */
.pv-card__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--pv-line-hair);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.pv-services--rich .pv-card__more { margin-top: 0; }
.pv-card__arrow {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--pv-line-control);
  border-radius: var(--pv-radius);
  background: var(--pv-w0);
  color: var(--pv-blue-deep);
  transition: background-color 420ms cubic-bezier(.4, 0, .2, 1),
              border-color     420ms cubic-bezier(.4, 0, .2, 1),
              color            420ms cubic-bezier(.4, 0, .2, 1);
}
.pv-card__arrow svg { width: var(--icn-md); height: var(--icn-md); }
/* Le survol de la CARTE remplit la flèche : c'est la carte entière qui est
   cliquable (.pv-card--link), la flèche n'est donc pas une cible à part. */
.pv-card:hover .pv-card__arrow,
.pv-card:focus-within .pv-card__arrow {
  background: var(--pv-blue-deep);
  border-color: var(--pv-blue-deep);
  color: var(--pv-w0);
}

@media (max-width: 639px) {
  .pv-services--rich .pv-card { padding: var(--sp-4); }
  .pv-card__points { margin-bottom: var(--sp-4); }
}


/* ==========================================================================
   28. HERO — VIDÉO D'AMBIANCE
   --------------------------------------------------------------------------
   La vidéo ne s'ajoute pas au décor : elle REMPLACE l'image de fond, au même
   endroit, sous le même masque et à la même opacité. Tant qu'elle ne joue pas
   — réglage « moins d'animations », navigateur sans autoplay, fichier absent —
   le hero est exactement celui d'avant. C'est l'image qui est l'état stable,
   la vidéo n'est qu'un enrichissement.
   ========================================================================== */
.pv-hero__video {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.4, 0, .2, 1);
  -webkit-mask-image: var(--pv-hero-mask-x), var(--pv-hero-mask-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--pv-hero-mask-x), var(--pv-hero-mask-y);
  mask-composite: intersect;
}
.pv-hero__video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  display: block;
}
/* Le JS pose cette classe à la première frame réellement peinte, jamais avant :
   révéler sur l'événement `play` laisserait voir un rectangle vide le temps du
   premier décodage. */
.pv-hero--video-on .pv-hero__video { opacity: .5; }
/* L'image cède la place plutôt que de s'additionner : deux calques à 50 %
   donneraient un fond deux fois plus dense que celui qui a été validé. */
.pv-hero[style*="--pv-bg-image"]::before { transition: opacity 900ms cubic-bezier(.4, 0, .2, 1); }
.pv-hero--video-on[style*="--pv-bg-image"]::before { opacity: 0; }

/* Raccord de boucle. Le modèle refuse une première et une dernière frame
   identiques, le clip ne boucle donc pas au pixel près. Plutôt que de monter un
   aller-retour (pas de ffmpeg sur ce poste), on éteint la vidéo une demi-seconde
   de part et d'autre du raccord : l'image de fond réapparaît dessous, et la
   coupure devient une respiration. */
.pv-hero--video-on .pv-hero__video.is-looping { opacity: 0; transition-duration: 320ms; }
.pv-hero--video-on.is-looping[style*="--pv-bg-image"]::before { opacity: .5; transition-duration: 320ms; }

/* --- Bouton pause : exigence WCAG 2.2.2, pas une option ------------------- */
/* Toute animation qui démarre seule et dure plus de cinq secondes doit pouvoir
   être arrêtée. Le bouton reste discret mais jamais caché : il apparaît dès que
   le JS a effectivement lancé la lecture (attribut `hidden` retiré). */
.pv-hero__video-toggle {
  position: absolute; z-index: 3;
  right: var(--sp-5); bottom: var(--sp-5);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--pv-line-control);
  border-radius: var(--pv-radius);
  color: var(--pv-ink-800);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 420ms cubic-bezier(.4, 0, .2, 1),
              border-color     420ms cubic-bezier(.4, 0, .2, 1);
}
.pv-hero__video-toggle:hover { background: var(--pv-w0); border-color: var(--pv-blue-deep); }
.pv-hero__video-toggle[hidden] { display: none; }
/* Deux barres = pause ; un triangle = lecture. Dessinés en CSS : deux formes de
   12 px ne valent pas une requête ni une entrée dans la table des icônes. */
.pv-hero__video-toggle-icon {
  width: 10px; height: 12px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.pv-hero__video-toggle[aria-pressed="true"] .pv-hero__video-toggle-icon {
  width: 0; height: 0;
  border-left: 11px solid currentColor; border-right: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@media (max-width: 980px) {
  /* --- Le masque horizontal n'a plus de raison d'être en une seule colonne ---
     Il réservait la moitié gauche au texte. Sur téléphone le hero passe en une
     colonne : le texte occupe TOUTE la largeur, il n'y a plus de moitié à
     préserver — mais le masque, lui, continuait de tout effacer avant 72 % de
     la largeur. Mesuré à 390 px : 109 px visibles sur 390, et « object-position:
     right » y cadrait le voilage blanc. La vidéo jouait, elle était hors cadre.
     On la remet pleine largeur, recadrée au centre sur le feuillage, et c'est
     le fondu vertical qui protège le bas de section. */
  .pv-hero {
    --pv-hero-mask-x: linear-gradient(90deg, #000 0%, #000 100%);
    --pv-hero-mask-y: linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,.65) 75%, transparent 100%);
  }
  .pv-hero[style*="--pv-bg-image"]::before { background-position: center; }
  .pv-hero__video-el { object-position: center center; }
  .pv-hero--video-on .pv-hero__video { opacity: .3; }
  .pv-hero__video-toggle { right: var(--sp-4); bottom: var(--sp-4); }

  /* --- Voile de lisibilité ------------------------------------------------
     Sur ordinateur le texte est à GAUCHE et le visuel à DROITE : ils ne se
     croisent jamais. Sur téléphone ils se superposent, et le sous-titre est
     tombé à 3,36:1 sur les feuilles les plus sombres (mesuré sur la plaque de
     fond, à cinq instants du clip). Un voile blanc s'intercale donc entre la
     vidéo (z-index 0) et le contenu (z-index 2). Il est fort là où le texte
     vit, et s'efface vers le bas pour rendre au visuel sa présence. */
  .pv-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(251,253,254,.58) 0%,
      rgba(251,253,254,.58) 55%,
      rgba(251,253,254,.24) 80%,
      rgba(251,253,254,0) 100%);
  }
}
/* Sur téléphone, le bouton se recentre. Collé à droite il tombait au ras du
   bord, à hauteur des gages de confiance, et se lisait comme un élément égaré
   plutôt que comme la commande de la vidéo qu'il pilote. */
@media (max-width: 860px) {
  .pv-hero__video-toggle {
    left: 50%; right: auto;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   29. ANIMATIONS — LE MOUVEMENT RESTE UNE LUMIÈRE
   --------------------------------------------------------------------------
   Tout ce qui suit est conditionné à .pv-motion (posée sur <html> par le JS) et
   neutralisé par la requête « prefers-reduced-motion » déjà en place (§ 462).
   Les durées sont longues à dessein : 420 ms pour ce qui répond au curseur,
   14 s pour ce qui vit tout seul. Rien ne doit attraper l'œil.
   ========================================================================== */

/* --- Le visuel 3D a besoin d'un sol, l'icône SVG non ---------------------- */
/* « Les six disques disparaissent : l'icône se pose nue » (§ 26) vise une icône
   SVG, qui prend la couleur de l'encre et se détache donc seule sur le blanc.
   Un objet 3D est en céramique perle : posé nu sur une carte blanche, il n'a
   plus de silhouette — mesuré à l'œil, la porte disparaissait purement et
   simplement. On lui rend une surface, en respectant la règle qui suit
   immédiatement celle-là : « Carré, jamais cercle », comme le repère de
   colonne du bloc de contact. */
/* Elle est posée À CHEVAL sur le bas de la photo, décalée sur le côté gauche,
   et non rangée en dessous : c'est ce qui l'ancre au visuel au lieu de la
   laisser flotter entre la photo et le titre. Le fond passe en blanc opaque —
   une pastille translucide sur une photo laisserait voir le décor à travers
   l'objet et lui reprendrait la silhouette qu'on vient de lui rendre. */
.pv-card__icon--3d {
  position: relative; z-index: 2;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--pv-w0);
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-radius);
  box-shadow: var(--pv-sh-1);
  margin: -32px 0 var(--sp-4) var(--sp-4);
}
.pv-card__icon--3d .pv-i3d { width: 46px; height: 46px; display: block; }
.pv-card__icon--3d img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* La photo ne garde plus d'écart en bas : c'est la pastille qui tient
   maintenant la distance jusqu'au titre. */
.pv-services--rich .pv-card:has(.pv-card__icon--3d) .pv-card__media { margin-bottom: 0; }

/* --- La photo de carte respire au survol --------------------------------- */
.pv-motion .pv-services--rich .pv-card__media img {
  transition: transform 900ms cubic-bezier(.4, 0, .2, 1);
}
.pv-motion .pv-services--rich .pv-card:hover .pv-card__media img,
.pv-motion .pv-services--rich .pv-card:focus-within .pv-card__media img { transform: scale(1.035); }

/* --- La flèche avance de trois pixels ------------------------------------ */
.pv-motion .pv-card__arrow svg { transition: transform 420ms cubic-bezier(.4, 0, .2, 1); }
.pv-motion .pv-card:hover .pv-card__arrow svg,
.pv-motion .pv-card:focus-within .pv-card__arrow svg { transform: translateX(3px); }

/* --- L'objet 3D flotte, très lentement ----------------------------------- */
/* 14 s et 3 px d'amplitude : à l'échelle d'un regard, l'icône est immobile ;
   à l'échelle d'une page qu'on parcourt, elle est vivante. Le décalage par
   carte évite les quatre icônes qui montent et descendent au même instant. */
@keyframes pv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.pv-motion .pv-i3d { animation: pv-float 14s ease-in-out infinite both; }
.pv-motion .pv-services--rich .pv-card:nth-child(2) .pv-i3d { animation-delay: -3.5s; }
.pv-motion .pv-services--rich .pv-card:nth-child(3) .pv-i3d { animation-delay: -7s; }
.pv-motion .pv-services--rich .pv-card:nth-child(4) .pv-i3d { animation-delay: -10.5s; }

/* --- Les prestations se posent l'une après l'autre ------------------------ */
/* La cascade est plafonnée à 4 crans par le JS (variable --pv-i), la rangée
   entière se pose donc en 240 ms : c'est une arrivée, pas un défilé. */
.pv-motion .pv-card__points > li.pv-anim { opacity: 0; transform: translateY(4px); }
.pv-motion .pv-card__points > li.pv-anim.is-in {
  opacity: 1; transform: none;
  transition: opacity 520ms cubic-bezier(.4, 0, .2, 1) calc(var(--pv-i, 0) * 80ms),
              transform 520ms cubic-bezier(.4, 0, .2, 1) calc(var(--pv-i, 0) * 80ms);
}

/* --- Le visuel 3D grandit d'un cheveu au survol de sa carte -------------- */
.pv-motion .pv-services--rich .pv-card .pv-i3d { transition: transform 420ms cubic-bezier(.4, 0, .2, 1); }
.pv-motion .pv-services--rich .pv-card:hover .pv-i3d { animation-play-state: paused; transform: scale(1.06); }


/* ==========================================================================
   30. BARRE D'ACTION MOBILE
   --------------------------------------------------------------------------
   Elle n'existe que sous 860 px, là où la mesure a montré 7 297 px de
   défilement sans aucun moyen de contact. Sur ordinateur le header reste
   visible en permanence et porte déjà son bouton : la barre y serait un
   doublon qui mange de la hauteur utile.
   ========================================================================== */
.pv-ctabar { display: none; }

@media (max-width: 860px) {
  .pv-ctabar {
    display: grid;
    grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    min-height: var(--pv-ctabar-h);
    /* L'encoche et la barre de geste des iPhone récents mangent le bas de
       l'écran : sans cette réserve, « Demander » tombe sous la zone tactile. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--pv-glass);
    -webkit-backdrop-filter: blur(var(--pv-glass-blur)) saturate(140%);
            backdrop-filter: blur(var(--pv-glass-blur)) saturate(140%);
    border-top: 1px solid var(--pv-line);
    box-shadow: 0 -2px 18px -8px rgba(18,48,63,.22);
  }
  /* Repli net là où le flou n'existe pas : sans fond opaque, la barre
     laisserait lire le texte de la page à travers ses libellés. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pv-ctabar { background: var(--pv-w0); }
  }

  .pv-ctabar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: var(--pv-ctabar-h);
    font-family: var(--pv-font-label); font-size: var(--fs-100);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--pv-ink-800);
    border-right: 1px solid var(--pv-line-hair);
    text-decoration: none;
  }
  .pv-ctabar__item:last-child { border-right: 0; }
  .pv-ctabar__item svg { width: var(--icn-md); height: var(--icn-md); color: var(--pv-blue-deep); }
  .pv-ctabar__item:active { background: var(--pv-w2); }

  /* Une seule action est primaire — c'est l'objectif de conversion du site.
     Les deux autres sont des raccourcis, elles restent en encre. */
  .pv-ctabar__item--primary {
    background: var(--pv-gradient-deep);
    color: var(--pv-w0);
  }
  .pv-ctabar__item--primary svg { color: currentColor; }
  .pv-ctabar__item--primary:active { background: var(--pv-navy); }

  /* La page réserve la hauteur de la barre : sinon le dernier lien du pied
     de page reste définitivement inatteignable, ce qu'aucun défilement ne
     rattrape. */
  body { padding-bottom: calc(var(--pv-ctabar-h) + env(safe-area-inset-bottom, 0px)); }

  /* Le flotteur WhatsApp cède la place : deux objets flottants dans le même
     coin, le second devient un obstacle. Il reste sur ordinateur. */
  .pv-whatsapp { display: none; }
}

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .pv-ctabar__item { transition: background-color 200ms ease; }
}


/* ==========================================================================
   31. COMPARATEUR AVANT / APRÈS
   --------------------------------------------------------------------------
   Une seule variable, --pv-ba-pos, pilote le découpage de l'image du dessus,
   la position du trait et celle de la poignée. Le curseur natif la met à jour ;
   sans JavaScript elle vaut 50 %, et la section reste lisible.
   ========================================================================== */
.pv-ba { margin: 0; }
.pv-ba__frame {
  position: relative;
  border-radius: var(--pv-radius-lg);
  overflow: hidden;
  border: 1px solid var(--pv-line);
  box-shadow: var(--pv-sh-2);
  aspect-ratio: 3 / 2;
  background: var(--pv-w3);
  isolation: isolate;
}
.pv-ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* L'image « avant » est découpée à la position du curseur. clip-path plutôt
   qu'une largeur : la photo ne se déforme pas, elle se dévoile. */
.pv-ba__clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pv-ba-pos, 50%)) 0 0);
}

/* --- Trait de séparation et poignée -------------------------------------- */
.pv-ba__line {
  position: absolute; top: 0; bottom: 0;
  left: var(--pv-ba-pos, 50%);
  width: 2px; margin-left: -1px;
  background: var(--pv-w0);
  box-shadow: 0 0 0 1px rgba(18,48,63,.18);
  pointer-events: none;
  display: grid; place-items: center;
}
.pv-ba__grip {
  width: 44px; height: 44px;
  border-radius: var(--pv-radius);
  background: var(--pv-w0);
  border: 1px solid var(--pv-line-control);
  box-shadow: var(--pv-sh-2);
  display: grid; place-items: center;
}
/* Deux chevrons opposés, dessinés en CSS : la poignée dit « ça se déplace »
   sans ajouter d'icône ni de requête. */
.pv-ba__grip::before, .pv-ba__grip::after {
  content: ""; position: absolute;
  width: 7px; height: 7px;
  border-top: 2px solid var(--pv-blue-deep);
  border-right: 2px solid var(--pv-blue-deep);
}
.pv-ba__grip::before { transform: translateX(-7px) rotate(-135deg); }
.pv-ba__grip::after  { transform: translateX(7px) rotate(45deg); }

/* --- Étiquettes ---------------------------------------------------------- */
/* Fond OPAQUE, pas de verre. Une étiquette posée sur une photographie
   quelconque ne peut pas dépendre de la transparence : mesuré à 390 px sur la
   zone sombre de l'« avant », l'encre tombait à 1,00:1 — le libellé
   disparaissait purement et simplement. Le verre reste réservé aux surfaces
   dont on connaît le fond (la barre d'action, posée sur la page). */
.pv-ba__tag {
  position: absolute; top: var(--sp-4);
  font-family: var(--pv-font-label); font-size: var(--fs-100);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px var(--sp-3);
  border-radius: var(--pv-radius);
  background: var(--pv-w0);
  border: 1px solid var(--pv-line);
  box-shadow: var(--pv-sh-1);
  color: var(--pv-ink-800);
}
.pv-ba__tag--avant { left: var(--sp-4); }
.pv-ba__tag--apres { right: var(--sp-4); }

/* --- Le curseur : natif, transparent, étalé sur toute l'image ------------- */
/* Il porte l'accessibilité (clavier, lecteur d'écran, tactile) ; la poignée
   visible n'est qu'un décor qui suit la même variable. */
.pv-ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: ew-resize;
}
.pv-ba__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 46px; height: 100%; background: transparent; border: 0; cursor: ew-resize;
}
.pv-ba__range::-moz-range-thumb {
  width: 46px; height: 200px; background: transparent; border: 0; cursor: ew-resize;
}
.pv-ba__range::-moz-range-track { background: transparent; }
.pv-ba__range:focus { outline: none; }
/* Le focus clavier s'affiche sur la poignée, pas sur un rectangle invisible
   de la taille de l'image : sans cela, la tabulation semblait ne rien faire. */
.pv-ba__range:focus-visible ~ .pv-ba__line .pv-ba__grip {
  outline: 3px solid rgba(61,105,144,.55);
  outline-offset: 3px;
  border-color: var(--pv-blue-deep);
}

.pv-ba__legende {
  margin-top: var(--sp-4);
  font-size: var(--fs-200);
  color: var(--pv-ink-soft);
  max-width: var(--pv-w-text);
}

@media (max-width: 639px) {
  .pv-ba__frame { aspect-ratio: 4 / 3; }
  .pv-ba__grip { width: 38px; height: 38px; }
  .pv-ba__tag { top: var(--sp-3); }
  .pv-ba__tag--avant { left: var(--sp-3); }
  .pv-ba__tag--apres { right: var(--sp-3); }
}


/* ==========================================================================
   32. BANDE PROFONDE — PROTOCOLES
   --------------------------------------------------------------------------
   La seule section sombre du site. Elle existe pour le rythme autant que pour
   le fond : après trois blocs clairs, la bascule marque l'endroit où le site
   cesse de rassurer et se met à prouver. En faire deux ou trois lui retirerait
   exactement ce qui la rend efficace.
   ========================================================================== */
.pv-deep {
  position: relative; overflow: hidden;
  background: var(--pv-grad-navy);
  color: var(--pv-on-navy);
}
/* Une seule lueur, très large et très faible : elle donne de la profondeur au
   fond sans jamais se lire comme un objet. */
.pv-deep__glow {
  position: absolute; pointer-events: none;
  width: 760px; height: 760px; top: -320px; right: -220px;
  background: radial-gradient(circle, rgba(111,201,222,.16) 0%, rgba(111,201,222,0) 68%);
}
.pv-deep .pv-container { position: relative; z-index: 1; }

.pv-section__head--deep h2 { color: var(--pv-on-navy); }
.pv-section__head--deep p { color: var(--pv-on-navy-soft); }
.pv-section__head--deep .pv-eyebrow { color: var(--pv-cyan); }
/* Le filet de marque reprend sa rampe claire : sur fond profond, c'est la
   version sombre qui disparaîtrait. */
.pv-section__head--deep::before { background: linear-gradient(95deg, var(--pv-cyan) 0%, var(--pv-green) 100%); }

/* --- La chaîne des cinq temps -------------------------------------------- */
.pv-proto {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4);
}
.pv-proto__item {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--pv-radius);
  background: var(--pv-glass-dark);
  border: 1px solid var(--pv-glass-dark-line);
  -webkit-backdrop-filter: blur(var(--pv-glass-blur)); backdrop-filter: blur(var(--pv-glass-blur));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pv-proto__item { background: rgba(12,31,46,.72); }
}
/* Le trait qui relie les cinq temps : c'est lui qui dit « dans cet ordre ».
   Il s'arrête au dernier, sinon il pointerait vers du vide. */
.pv-proto__item::after {
  content: ""; position: absolute;
  top: calc(var(--sp-5) + 13px); right: calc(var(--sp-4) * -1 - 1px);
  width: var(--sp-4); height: 1px;
  background: linear-gradient(90deg, var(--pv-cyan), rgba(111,201,222,.15));
}
.pv-proto__item:last-child::after { display: none; }

.pv-proto__num {
  display: block;
  font-family: var(--pv-font-label); font-size: var(--fs-100);
  letter-spacing: .14em; color: var(--pv-cyan);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3);
}
.pv-proto__icon { display: inline-flex; color: var(--pv-cyan); margin-bottom: var(--sp-3); }
.pv-proto__icon svg { width: var(--icn-lg); height: var(--icn-lg); }
.pv-proto h3 { color: var(--pv-on-navy); font-size: var(--fs-500); margin: 0 0 var(--sp-2); }
.pv-proto p  { color: var(--pv-on-navy-soft); font-size: var(--fs-300); margin: 0; line-height: 1.5; }

@media (max-width: 1023px) {
  .pv-proto { grid-template-columns: repeat(2, 1fr); }
  /* En grille, le trait horizontal relierait des cases qui ne se suivent pas. */
  .pv-proto__item::after { display: none; }
}
@media (max-width: 639px) {
  .pv-proto { grid-template-columns: 1fr; gap: var(--sp-3); }
  .pv-deep__glow { width: 420px; height: 420px; top: -180px; right: -140px; }
}


/* ==========================================================================
   33. TIMELINE DU DÉROULÉ
   --------------------------------------------------------------------------
   Le rail se remplit au défilement. Le mouvement n'est pas décoratif : il dit
   « c'est une séquence », ce qu'une rangée de quatre cartes ne disait pas.
   Sans JavaScript ou en « moins d'animations », le rail est plein d'emblée —
   la séquence reste lisible, elle ne s'anime simplement plus.
   ========================================================================== */
.pv-steps--timeline { position: relative; padding-top: var(--sp-6); }
/* La grille étire les quatre cartes à la hauteur de la plus haute ; les deux
   textes les plus longs remplissaient alors leur carte au pixel près, et les
   jambages de la dernière ligne venaient toucher le filet du bord (mesuré :
   1 px de garde, contraste tombant à 3,57 sur ce filet). Rien n'était tronqué,
   c'était simplement trop serré pour du texte. */
.pv-steps--timeline .pv-step { padding-bottom: var(--sp-6); }
.pv-steps__rail {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--pv-line);
}
.pv-steps__rail-fill {
  display: block; height: 100%; width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--pv-progress, 1));
  background: var(--pv-gradient-deep);
}
.pv-motion .pv-steps__rail-fill { transition: transform 240ms linear; }
/* La pastille de chaque étape s'allume quand le rail l'a dépassée. */
.pv-steps--timeline .pv-step::before {
  content: ""; position: absolute; top: calc(var(--sp-6) * -1 - 4px); left: var(--sp-5);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pv-w0); border: 1px solid var(--pv-line-control);
}
.pv-steps--timeline .pv-step.is-passed::before {
  background: var(--pv-blue-deep); border-color: var(--pv-blue-deep);
}
.pv-motion .pv-steps--timeline .pv-step::before {
  transition: background-color 420ms cubic-bezier(.4,0,.2,1), border-color 420ms cubic-bezier(.4,0,.2,1);
}
@media (max-width: 860px) {
  /* Verticale sur téléphone : un rail horizontal sur une colonne unique
     relierait des cartes qui ne sont pas côte à côte. */
  .pv-steps--timeline { padding-top: 0; padding-left: var(--sp-6); }
  .pv-steps__rail { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .pv-steps__rail-fill { width: 100%; height: 100%; transform-origin: center top;
    transform: scaleY(var(--pv-progress, 1)); }
  .pv-steps--timeline .pv-step::before { top: var(--sp-6); left: calc(var(--sp-6) * -1 - 4px); }
}

/* ==========================================================================
   34. POURQUOI PURA VIE
   --------------------------------------------------------------------------
   Pas de cartes. La section arrive juste après la bande profonde ; trois blocs
   encadrés d'affilée auraient fait catalogue de composants. Un filet, un
   numéro, de l'air.
   ========================================================================== */
.pv-why {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7) var(--sp-6);
}
.pv-why__item { position: relative; padding-top: var(--sp-4); border-top: 1px solid var(--pv-line); }
.pv-why__num {
  position: absolute; top: var(--sp-4); right: 0;
  font-family: var(--pv-font-label); font-size: var(--fs-100);
  letter-spacing: .12em; color: var(--pv-ink-mute);
  font-variant-numeric: tabular-nums;
}
.pv-why__icon { display: inline-flex; color: var(--pv-blue-deep); margin-bottom: var(--sp-3); }
.pv-why__icon svg { width: var(--icn-lg); height: var(--icn-lg); }
.pv-why h3 { color: var(--pv-ink-800); margin: 0 0 var(--sp-2); font-size: var(--fs-500); }
.pv-why p { color: var(--pv-ink); font-size: var(--fs-300); margin: 0; max-width: 34ch; }
@media (max-width: 1023px) { .pv-why { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); } }
@media (max-width: 639px)  { .pv-why { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ==========================================================================
   35. BANDE CTA FINALE ET PIED DE PAGE — FOND PROFOND
   ========================================================================== */
/* Trame moléculaire : hexagones à 3 % d'opacité. À ce niveau elle ne se voit
   pas, elle se sent — c'est exactement le but. Un SVG en data-URI plutôt qu'un
   fichier : 400 octets, aucune requête. */
.pv-deep__mesh {
  position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath d='M28 64 56 80v32L28 128 0 112V80z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 97px;
}

.pv-cta-band.pv-deep {
  background: var(--pv-grad-navy);
  color: var(--pv-on-navy);
  position: relative; overflow: hidden;
}
.pv-cta-band__inner { position: relative; z-index: 1; align-items: center; }
.pv-cta-band__text { max-width: 40ch; }
.pv-cta-band.pv-deep h2 { color: var(--pv-on-navy); }
.pv-cta-band.pv-deep p  { color: var(--pv-on-navy-soft); margin-top: var(--sp-3); }
.pv-cta-band__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; flex: 0 0 auto; }

/* Deux boutons pensés POUR le fond profond. Réutiliser --ghost aurait donné un
   bord gris ardoise sur du bleu nuit : 1,4:1, un bouton qu'on devine. */
.pv-btn--onDeep { background: var(--pv-w0); color: var(--pv-ink-900); border: 1px solid var(--pv-w0); }
.pv-btn--onDeep:hover { background: var(--pv-cyan); border-color: var(--pv-cyan); color: var(--pv-navy); }
.pv-btn--ghostDeep { background: transparent; color: var(--pv-on-navy); border: 1px solid rgba(255,255,255,.42); }
.pv-btn--ghostDeep:hover { border-color: var(--pv-cyan); color: var(--pv-cyan); background: rgba(255,255,255,.06); }
.pv-btn--ghostDeep svg { color: currentColor; }

.pv-footer--deep {
  position: relative; overflow: hidden;
  background: var(--pv-navy);
  color: var(--pv-on-navy-soft);
  border-top: 0;
}
.pv-footer--deep .pv-container { position: relative; z-index: 1; }
.pv-footer--deep a { color: var(--pv-on-navy-soft); }
.pv-footer--deep a:hover { color: var(--pv-cyan); }
.pv-footer--deep .pv-brand__name { color: var(--pv-on-navy); }
.pv-footer--deep .pv-footer__contact svg { color: var(--pv-cyan); }
.pv-footer--deep .pv-footer__top,
.pv-footer--deep .pv-footer__bottom { border-color: rgba(255,255,255,.12); }

@media (max-width: 860px) {
  .pv-cta-band__inner { flex-direction: column; align-items: flex-start; text-align: left; gap: var(--sp-5); }
  .pv-cta-band__actions { width: 100%; }
  .pv-cta-band__actions .pv-btn { flex: 1 1 auto; justify-content: center; }
}


/* ==========================================================================
   36. VISUELS 3D DANS « POURQUOI » ET « PROTOCOLES »
   --------------------------------------------------------------------------
   Deux traitements opposés, pour une raison physique et non stylistique :
   un objet en céramique perle a besoin d'un sol sur fond CLAIR (posé nu sur du
   blanc, il n'a plus de silhouette — la porte du premier essai disparaissait
   littéralement), et n'en a aucun besoin sur fond PROFOND, où il se détache
   tout seul. Poser une pastille sur le navy reviendrait à découper un carré
   clair autour de chaque objet : on verrait la boîte, plus l'objet.
   ========================================================================== */

/* --- Sur fond clair : socle carré, plus léger que celui des cartes -------- */
.pv-why__icon--3d {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--pv-w2);
  border-radius: var(--pv-radius);
  margin-bottom: var(--sp-4);
}
.pv-why__icon--3d .pv-i3d { width: 52px; height: 52px; display: block; }
.pv-why__icon--3d img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- Sur fond profond : l'objet se pose nu ------------------------------- */
/* L'ombre douce cuite dans le PNG est sombre et semi-transparente : sur le
   navy elle disparaît d'elle-même, aucun halo clair à corriger. */
.pv-proto__icon--3d { display: block; margin-bottom: var(--sp-3); }
.pv-proto__icon--3d .pv-i3d { width: 58px; height: 58px; display: block; }
.pv-proto__icon--3d img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Le flottement (§ 29) s'applique déjà à tout .pv-i3d. On décale chaque item
   pour éviter que onze objets montent et descendent au même instant — ce qui
   se remarquerait, alors que le geste doit rester imperceptible. */
.pv-motion .pv-why__item:nth-child(2) .pv-i3d  { animation-delay: -2.3s; }
.pv-motion .pv-why__item:nth-child(3) .pv-i3d  { animation-delay: -4.6s; }
.pv-motion .pv-why__item:nth-child(4) .pv-i3d  { animation-delay: -7s; }
.pv-motion .pv-why__item:nth-child(5) .pv-i3d  { animation-delay: -9.3s; }
.pv-motion .pv-why__item:nth-child(6) .pv-i3d  { animation-delay: -11.6s; }
.pv-motion .pv-proto__item:nth-child(2) .pv-i3d { animation-delay: -2.8s; }
.pv-motion .pv-proto__item:nth-child(3) .pv-i3d { animation-delay: -5.6s; }
.pv-motion .pv-proto__item:nth-child(4) .pv-i3d { animation-delay: -8.4s; }
.pv-motion .pv-proto__item:nth-child(5) .pv-i3d { animation-delay: -11.2s; }