/* ==========================================================================
   preview-v5.css — feuille de style de la PAGE D'APERÇU uniquement
   Servie directement depuis public/, hors pipeline Vite et hors Tailwind.
   Chargée par la seule route /apercu-accueil-v5-k7m2.

   DEUX RÈGLES QUI EXPLIQUENT TOUTE LA MISE EN FORME DE CE FICHIER
   ---------------------------------------------------------------
   1. TOUTES les classes créées ici sont préfixées « pv- ».
      Aucune exception. C'est ce préfixe qui garantit qu'aucune classe
      Tailwind nouvelle n'est introduite dans les fichiers neufs : à
      l'audit, toute classe « pv-* » vient d'ici, et tout ce qui n'est pas
      « pv-* » doit déjà exister sur la page d'accueil de production.

   2. Les règles qui doivent l'emporter sur landing.css sont préfixées
      « body.pv » ou « .pv-doc », JAMAIS laissées à l'ordre de chargement.
      Raison : le serveur de développement Vite injecte landing.css par
      JavaScript, donc APRÈS ce fichier ; en production le CSS compilé est
      lié AVANT lui. L'ordre s'inverse entre les deux environnements. Seule
      la spécificité est stable, on ne s'appuie donc que sur elle.
      .pv-doc .cta-phone  = (0,2,0) l'emporte sur  .cta-phone = (0,1,0).
      Pour les propriétés que landing.css marque !important (les deux
      « color » de .cta-phone et .cta-primary), !important est repris ici.

   Les widgets existants — boutons flottants, chatbot — gardent leurs
   classes et leurs styles de landing.css. Ce fichier ne leur touche QUE
   leur position verticale, pour les faire remonter au-dessus de la barre
   d'appel mobile (voir la dernière section).
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════
   0. POLICES, HÉBERGÉES EN LOCAL
   ───────────────────────────────────────────────────────────
   Servies depuis public/fonts/, plus aucun appel à Google Fonts : sur une
   page publique, un <link> vers fonts.googleapis.com expose l'adresse IP
   du visiteur à un tiers, ce qui n'est pas défendable au regard du RGPD,
   et ajoute deux résolutions DNS avant le premier rendu.

   woff2 uniquement, sous-ensemble « latin » seul : il couvre tout ce que
   la page emploie, y compris €, · et le tiret demi-cadratin.

   IBM Plex Sans est une police VARIABLE. Google sert le même fichier pour
   ses quatre graisses (empreintes SHA-256 identiques, vérifié) : un seul
   @font-face avec une plage 100-700 remplace donc quatre déclarations, et
   économise 137 Ko.

   font-display: swap partout : le texte s'affiche immédiatement dans la
   police de repli, puis bascule. Jamais de bloc invisible.
   ═══════════════════════════════════════════════════════════ */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-var.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
    font-family: "Spectral";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/spectral-600.woff2") format("woff2");
}

@font-face {
    font-family: "Spectral";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/spectral-700.woff2") format("woff2");
}

/* ═══════════════════════════════════════════════════════════
   1. VARIABLES
   Préfixées --pv- : landing.css utilise --primary-blue, --text-dark…
   et Tailwind 4 occupe l'espace --color-*. Aucun recouvrement possible.
   ═══════════════════════════════════════════════════════════ */
:root {
    --pv-ink: #0E1B2A;
    --pv-ink2: #48576B;
    --pv-ink3: #7C8798;
    --pv-paper: #F5F4EF;
    --pv-fill: #ECEBE4;
    --pv-line: #DEDCD2;
    --pv-white: #fff;
    --pv-green: #1D6B54;
    --pv-green-d: #14523F;
    --pv-green-t: #E7F0EC;
    --pv-brass: #A8813C;
    --pv-brass-t: #F0E7D5;
    --pv-todo: #8A6A0F;
    --pv-todo-bg: #FAF2D9;
    --pv-r: 6px;
    --pv-maxw: 1180px;
    --pv-gut: 24px;
    --pv-sh: 0 3px 16px rgba(14, 27, 42, .06);
    --pv-sh-lg: 0 16px 44px rgba(14, 27, 42, .11);

    /* Hauteur de la barre d'appel mobile. Sert à deux choses : réserver le
       bas de page pour que la barre ne recouvre aucun contenu, et remonter
       les trois widgets flottants au-dessus d'elle. */
    --pv-mbar-h: 74px;
}

/* html:root et non html : landing.css pose scroll-padding-top sur « html »
   (0,0,1) dans deux media queries. :root ajoute une classe, donc (0,1,1),
   qui l'emporte quel que soit l'ordre de chargement. */
html:root {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

@media (max-width: 768px) {
    html:root {
        scroll-padding-top: 72px;
    }
}

/* ═══════════════════════════════════════════════════════════
   2. CORPS DE PAGE
   body.pv remplace body.bg-gray-50 de la production.
   ═══════════════════════════════════════════════════════════ */
body.pv {
    margin: 0;
    background: var(--pv-paper);
    color: var(--pv-ink);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* .pv-doc enveloppe barre du haut, navigation, contenu et pied de page,
   mais PAS les widgets flottants ni le chatbot, qui sont ses frères dans
   le DOM. Toutes les règles de typographie générique ci-dessous sont
   portées par ce conteneur : sans lui, un « p { margin } » atteindrait les
   paragraphes du chatbot et déformerait un composant qu'on ne doit pas
   toucher. */
.pv-doc {
    position: relative;
}

.pv-doc *,
.pv-doc *::before,
.pv-doc *::after {
    box-sizing: border-box;
}

.pv-doc img {
    max-width: 100%;
    display: block;
}

.pv-doc a {
    color: inherit;
}

.pv-doc p {
    margin: 0 0 1.05rem;
}

.pv-doc h1,
.pv-doc h2,
.pv-doc h3,
.pv-doc h4 {
    font-family: "Spectral", Georgia, serif;
    font-weight: 600;
    letter-spacing: -.015em;
}

.pv-doc h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.35rem);
    line-height: 1.09;
    margin: 0 0 .7rem;
}

.pv-doc h2 {
    font-size: clamp(1.62rem, 2.9vw, 2.35rem);
    line-height: 1.18;
    margin: 0 0 .55rem;
}

.pv-doc h3 {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 0 0 .4rem;
}

.pv-doc a:focus-visible,
.pv-doc button:focus-visible,
.pv-doc input:focus-visible,
.pv-doc select:focus-visible,
.pv-doc textarea:focus-visible,
.pv-doc summary:focus-visible {
    outline: 2.5px solid var(--pv-brass);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════
   3. GABARIT
   ═══════════════════════════════════════════════════════════ */
.pv-wrap {
    max-width: var(--pv-maxw);
    margin: 0 auto;
    padding: 0 var(--pv-gut);
    position: relative;
    z-index: 2;
}

.pv-sec {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.pv-sec--tight {
    padding: 48px 0;
}

.pv-sec--white {
    background: var(--pv-white);
}

.pv-sec--fill {
    background: var(--pv-fill);
}

.pv-rule {
    width: 30px;
    height: 2px;
    background: var(--pv-brass);
    margin-bottom: 14px;
}

.pv-eyebrow {
    font-family: "IBM Plex Mono", monospace;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--pv-brass);
    margin: 0 0 .85rem;
}

.pv-lede {
    font-size: 1.09rem;
    color: var(--pv-ink2);
    max-width: 62ch;
}

.pv-num {
    font-variant-numeric: tabular-nums;
}

.pv-legalref {
    font-family: "IBM Plex Mono", monospace;
    font-size: .82em;
    color: var(--pv-ink3);
}

/* Décision non tranchée. Surlignage volontairement visible : ces passages
   doivent sauter aux yeux pendant la relecture. À retirer à la bascule. */
.pv-todo {
    background: var(--pv-todo-bg);
    color: var(--pv-todo);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    border-bottom: 1.5px dotted var(--pv-todo);
    font-size: .95em;
}

/* ═══════════════════════════════════════════════════════════
   4. BOUTONS
   .pv-btn porte la forme. Les classes de mesure cta-primary et cta-phone
   sont conservées sur le markup (déclencheurs GTM et landing.js), mais
   leur apparence de landing.css est entièrement neutralisée ici.
   ═══════════════════════════════════════════════════════════ */
.pv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    padding: 16px 26px;
    border-radius: var(--pv-r);
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s, transform .16s, box-shadow .16s;
}

.pv-btn--full {
    width: 100%;
}

/* Neutralisation de landing.css. .pv-doc .cta-* = (0,2,0) > .cta-* = (0,1,0).
   « color » reprend !important parce que landing.css l'y met aussi. */
/* PORTÉE « body.pv » ET NON « .pv-doc ».
   La barre d'appel mobile, les boutons flottants et le chatbot sont des
   FRÈRES de .pv-doc, pas ses descendants : une règle préfixée .pv-doc ne
   les atteint jamais. C'est ce qui laissait « Être rappelé » de la barre
   mobile en dégradé bleu, texte blanc — l'apparence que landing.css donne
   à .cta-phone, faute d'être neutralisée à cet endroit.
   body.pv = (0,2,1), donc l'emporte partout sur .cta-* = (0,1,0), à
   l'intérieur comme à l'extérieur de .pv-doc. */
body.pv .cta-primary,
body.pv .cta-phone {
    background: none;
    box-shadow: none;
    font-weight: 600;
    /* border-color et non « border: none » : .pv-btn--out doit pouvoir
       rendre son contour visible plus bas, à spécificité égale, en ne
       reposant que sur border-color. « border: none » supprimerait le
       style et la largeur, qu'une simple couleur ne ramènerait pas. */
    border-color: transparent;
    transition: background .16s, color .16s, border-color .16s, transform .16s, box-shadow .16s;
}

/* Liens d'appel qui ne sont PAS des boutons : la bordure de 2 px que
   landing.css pose sur .cta-phone doit disparaître entièrement, sinon elle
   ajoute 4 px à un simple texte. */
body.pv .pv-topbar__tel,
body.pv .pv-nav__tel,
body.pv .pv-form__tel,
body.pv .pv-ft__tel {
    border: none;
    padding: 0;
    background: none;
    box-shadow: none;
}

body.pv .pv-topbar__tel {
    color: #fff !important;
    font-weight: 600;
}

body.pv .cta-primary:hover,
body.pv .cta-phone:hover {
    box-shadow: none;
    transform: none;
}

/* Vert plein — action principale. Porte cta-primary. */
.pv-btn--go {
    background: var(--pv-green);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(29, 107, 84, .22);
}

body.pv .pv-btn--go {
    background: var(--pv-green);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(29, 107, 84, .22);
}

body.pv .pv-btn--go:hover {
    background: var(--pv-green-d);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(29, 107, 84, .28);
}

/* Contour encre — action secondaire. Porte cta-phone. */
body.pv .pv-btn--out {
    background: var(--pv-white);
    color: var(--pv-ink) !important;
    border-color: var(--pv-ink);
    box-shadow: none;
}

body.pv .pv-btn--out:hover {
    background: var(--pv-ink);
    color: #fff !important;
    border-color: var(--pv-ink);
    transform: translateY(-2px);
}

/* Contour clair — sur fond encre. */
body.pv .pv-btn--onink {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .5);
    box-shadow: none;
}

body.pv .pv-btn--onink:hover {
    background: #fff;
    color: var(--pv-ink) !important;
    border-color: #fff;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   5. AMBIANCE — bulles, anneaux, flottement, révélation
   Purement décoratif, pointer-events:none, aria-hidden côté markup.
   ═══════════════════════════════════════════════════════════ */
.pv-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.pv-bub {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    will-change: transform;
}

.pv-bub--1 {
    width: 360px;
    height: 360px;
    background: #BFD8CD;
    opacity: .55;
    top: -110px;
    left: -80px;
    animation: pv-drift1 22s ease-in-out infinite;
}

.pv-bub--2 {
    width: 290px;
    height: 290px;
    background: #E3D3B0;
    opacity: .45;
    top: 170px;
    right: -90px;
    animation: pv-drift2 27s ease-in-out infinite;
}

.pv-bub--3 {
    width: 230px;
    height: 230px;
    background: #C7D2DE;
    opacity: .5;
    bottom: -80px;
    left: 40%;
    animation: pv-drift3 19s ease-in-out infinite;
}

.pv-bub--4 {
    width: 180px;
    height: 180px;
    background: #D6E3DA;
    opacity: .5;
    top: 54%;
    left: 7%;
    animation: pv-drift2 30s ease-in-out infinite;
}

/* Variantes posées sur fond encre, sans style en ligne. */
.pv-bub--light {
    background: #fff;
    opacity: .07;
}

.pv-bub--mint {
    background: #57B394;
    opacity: .16;
}

.pv-bub--right {
    left: auto;
    right: -70px;
}

.pv-bub--left {
    left: -90px;
    right: auto;
    top: 100px;
}

.pv-bub--mid {
    left: 68%;
}

@keyframes pv-drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(48px, 32px) scale(1.08); }
}

@keyframes pv-drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-42px, 46px) scale(1.11); }
}

@keyframes pv-drift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(36px, -40px) scale(1.06); }
}

.pv-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(29, 107, 84, .16);
    will-change: transform;
}

.pv-ring--a {
    width: 118px;
    height: 118px;
    top: 23%;
    right: 11%;
    animation: pv-rise 17s linear infinite;
}

.pv-ring--b {
    width: 68px;
    height: 68px;
    bottom: 15%;
    right: 27%;
    border-color: rgba(168, 129, 60, .24);
    animation: pv-rise 22s linear infinite 3s;
}

.pv-ring--c {
    width: 42px;
    height: 42px;
    top: 63%;
    left: 15%;
    border-color: rgba(14, 27, 42, .14);
    animation: pv-rise 14s linear infinite 1s;
}

.pv-ring--onink {
    border-color: rgba(255, 255, 255, .22);
}

@keyframes pv-rise {
    0% { transform: translateY(20px); opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { transform: translateY(-64px); opacity: 0; }
}

.pv-float {
    animation: pv-bob 8s ease-in-out infinite;
    will-change: transform;
}

.pv-float--slow {
    animation-duration: 11s;
}

@keyframes pv-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.pv-rv {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .7, .3, 1);
}

.pv-rv.pv-in {
    opacity: 1;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════
   6. BARRE DU HAUT + NAVIGATION
   z-index 55/56 : très en dessous des widgets existants, qui sont à 1000
   et 1001 dans landing.css. Aucun risque de recouvrement.
   ═══════════════════════════════════════════════════════════ */
.pv-topbar {
    background: var(--pv-ink);
    color: #B9C3D2;
    font-size: .81rem;
    position: relative;
    z-index: 56;
}

.pv-topbar .pv-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--pv-gut);
}

.pv-topbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.pv-topbar__r {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .pv-topbar__l { display: none; }
}

/* La balise reste <nav>, comme en production : le sélecteur de mesure est
   « nav a[href^="#"] » et il doit continuer à capter les ancres du menu
   desktop ET celles du menu mobile, toutes deux à l'intérieur. */
.pv-nav {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--pv-line);
    position: sticky;
    top: 0;
    z-index: 55;
}

.pv-nav__bar {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 13px;
    padding-bottom: 13px;
}

/* Sous 400 px, la barre porte trois éléments visibles (hamburger, logo,
   bloc Espace client), donc deux gouttières : les ramener de 22 à 14 px
   rend 16 px. C'est ce qui fait tenir la barre à 320 px, où le calcul
   sortait 2 px trop large, et cela reprend de la marge autour de 360 px,
   où les largeurs de texte n'étaient qu'estimées.
   Borne à 400 et non 320 : elle couvre aussi les Android de 360 px.
   Règle placée après la définition ci-dessus, même spécificité, donc
   c'est l'ordre du fichier qui tranche. */
@media (max-width: 400px) {
    .pv-nav__bar { gap: 14px; }
}

.pv-nav__logo img {
    height: 38px;
    width: auto;
}

/* Bascule des deux logos, équivalent exact de « hidden md:block » et
   « md:hidden » de la production.

   DEUX PIÈGES, TOUS DEUX RENCONTRÉS ICI.

   1. SPÉCIFICITÉ. « .pv-doc img » plus haut dans ce fichier pose
      display:block avec une spécificité de (0,1,1). Une simple classe
      « .pv-logo--m » vaut (0,1,0) et perd : les deux logos restaient
      affichés, empilés. Les règles ci-dessous sont donc préfixées
      .pv-doc, ce qui les porte à (0,2,1).

   2. SENS DE LA BORNE. Tailwind « md: » est un min-width:768px, donc à
      exactement 768px la production affiche le logo DESKTOP. Une règle
      écrite en max-width:768px inverse le comportement sur ce pixel
      précis. On calque donc la forme de Tailwind : le mobile est le
      défaut, le desktop est posé par un min-width.

   Les deux images gardent height:38px via .pv-nav__logo img : le passage
   de la borne ne produit aucun saut de hauteur, seule la largeur change. */
.pv-doc .pv-logo--d { display: none; }
.pv-doc .pv-logo--m { display: block; }

@media (min-width: 768px) {
    .pv-doc .pv-logo--d { display: block; }
    .pv-doc .pv-logo--m { display: none; }
}

/* Bascule liens / hamburger, arrêtée à 1024 px.
   Écrite comme « lg: » de Tailwind — le hamburger est le DÉFAUT, les liens
   sont posés par un min-width. Les deux règles sont exclusives et partagent
   la même borne : à 1023 px le hamburger seul, à 1024 px les liens seuls.
   Jamais les deux, jamais aucun des deux. */
.pv-nav__links {
    display: none;
    gap: 22px;
    font-size: .93rem;
    font-weight: 500;
    margin-left: auto;
}

.pv-nav__links a {
    text-decoration: none;
    color: var(--pv-ink2);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}

.pv-nav__links a:hover {
    color: var(--pv-green);
    border-bottom-color: var(--pv-green);
}

.pv-nav__links a.pv-on {
    color: var(--pv-ink);
    border-bottom-color: var(--pv-brass);
}

.pv-nav__side {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

body.pv .pv-nav__tel {
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    font-size: 1rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--pv-ink) !important;
}

body.pv .pv-nav__tel:hover {
    color: var(--pv-green) !important;
}

.pv-nav__acc {
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--pv-ink2);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    padding: 9px 15px;
    white-space: nowrap;
    transition: border-color .15s, color .15s, transform .15s;
}

.pv-nav__acc:hover {
    border-color: var(--pv-ink);
    color: var(--pv-ink);
    transform: translateY(-1px);
}

/* Cible tactile de 44 x 44 px, minimum recommandé pour le doigt.
   L'icône fait 26 px : c'est le bouton qui porte la surface, pas un padding
   calculé sur elle. display:flex et non block, pour centrer le SVG ; la
   bascule à 1024 px passe toujours par display:none. */
.pv-nav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--pv-ink2);
    line-height: 0;
}

.pv-nav__burger:hover { color: var(--pv-ink); }

.pv-nav__burger svg { width: 26px; height: 26px; }

@media (min-width: 1024px) {
    .pv-nav__links { display: flex; }
    .pv-nav__burger { display: none; }
}

/* Palier de sécurité entre 1024 et 1180 px.
   Au-dessus de 1024 la barre doit loger, sur une seule ligne : le logo,
   SEPT entrées de navigation, le numéro de téléphone et le bouton Espace
   client. Les liens portent white-space:nowrap et ne se coupent donc pas —
   le dépassement se traduirait par un débordement horizontal, pas par un
   retour à la ligne. On resserre gouttières et corps du texte sur cette
   plage, où la place est la plus comptée. Au-delà de 1180 px, largeur
   maximale du conteneur, on retrouve les valeurs nominales. */
@media (min-width: 1024px) and (max-width: 1180px) {
    .pv-nav__links { gap: 14px; font-size: .88rem; }
    .pv-nav__side { gap: 11px; }
    body.pv .pv-nav__tel { font-size: .92rem; }
}

/* Sous 600 px, la barre de navigation ne peut pas loger le hamburger, le
   logo, le numéro et le bouton Espace client sur une ligne : il manquait
   environ 80 px à 375 px, et le bouton se serait retrouvé coupé hors écran
   par l'overflow-x:hidden du corps de page.

   Le numéro passe donc en display:none, PAS le lien. Le <a href="tel:">
   reste dans le DOM, la parité tient à neuf liens tel:. Le numéro demeure
   par ailleurs visible deux fois sur mobile : dans la barre du haut, juste
   au-dessus, et dans la barre d'appel fixe en bas.

   Même borne que la règle « Espace client » ci-dessous, volontairement :
   deux bornes à un pixel d'écart au même endroit ne se relisent pas. */
@media (max-width: 600px) {
    body.pv .pv-nav__tel { display: none; }
    .pv-nav__acc em { display: none; }
}

/* Menu mobile. Conserve l'id #mobileMenu et la bascule de la classe
   « hidden » : c'est exactement le mécanisme de la production
   (toggleMobileMenu, layout + landing.js). */
.pv-mob {
    border-top: 1px solid var(--pv-line);
    background: #fff;
    padding: 10px var(--pv-gut) 16px;
    transition: all .3s ease-in-out;
}

/* ------------------------------------------------------------------
   FERMETURE DU MENU — ne dépend d'AUCUNE feuille servie par Vite.

   LE PROBLÈME. La classe « hidden » est un utilitaire Tailwind, et
   Tailwind n'existe que dans landing.css, servie par le serveur de
   développement Vite à l'adresse 127.0.0.1:5173. Cette adresse est
   écrite en dur dans le HTML (public/hot). Depuis un téléphone,
   « 127.0.0.1 » désigne le téléphone lui-même : la feuille n'arrive
   jamais, « hidden » n'existe pas, et le menu s'affiche déployé au
   chargement. Mesuré : 571 px de haut, en travers du contenu.
   Le même défaut frappe la page d'accueil de production, qui charge
   landing.css exactement de la même façon.

   LA RÈGLE CI-DESSOUS. Elle dit la même chose que « hidden », mais
   depuis CE fichier — servi par Laravel, sur la même origine que la
   page, et lié en <link> bloquant le rendu. Elle est donc toujours
   présente avant la première peinture, y compris sur un téléphone et
   quel que soit l'état du serveur Vite.

   POURQUOI PAS l'attribut HTML « hidden » ni un style en ligne :
   les deux créeraient un SECOND état à tenir synchronisé avec la
   classe, et obligeraient à réécrire toggleMobileMenu(). Ici la classe
   « hidden » reste l'unique source de vérité, le JavaScript est
   inchangé, et la parité avec la production est intacte.

   Spécificité (0,2,0), hors couche : l'emporte sur l'utilitaire
   Tailwind (0,1,0, dans @layer utilities) sans jamais le contredire —
   les deux masquent. Quand toggleMobileMenu() retire la classe, plus
   aucune des deux ne s'applique et le menu s'ouvre.
   ------------------------------------------------------------------ */
.pv-mob.hidden {
    display: none;
}

.pv-mob a {
    display: block;
    padding: 11px 2px;
    text-decoration: none;
    color: var(--pv-ink2);
    font-size: .97rem;
    font-weight: 500;
    border-bottom: 1px solid var(--pv-line);
}

.pv-mob a:last-child { border-bottom: none; }

.pv-mob a:hover { color: var(--pv-green); }

/* Le menu mobile ne doit jamais rester ouvert si l'on repasse en desktop,
   le hamburger disparaissant à la même borne de 1024 px. C'est le rôle que
   joue « md:hidden » sur #mobileMenu en production, exprimé ici en CSS pour
   ne pas introduire de classe Tailwind.

   DEUX SOURCES SUR display, ET C'EST VOULU — c'est exactement le montage de
   la production, où #mobileMenu porte « md:hidden hidden » :
     · « hidden », posée et retirée par toggleMobileMenu(), porte l'ÉTAT
       ouvert/fermé ;
     · la règle ci-dessous porte la BORNE, et n'a d'effet qu'au-dessus.
   Les deux ne se contredisent jamais : au-dessus de 1024 px elles disent
   toutes deux « masqué ». En dessous, celle-ci ne s'applique pas et l'état
   est gouverné par la seule classe « hidden ».
   Aucune règle de ce fichier ne pose display sur .pv-mob en dessous de
   1024 px : le JavaScript reste seul maître de l'ouverture. */
@media (min-width: 1024px) {
    .pv-mob { display: none !important; }
}

.pv-doc .pv-mob .pv-mob__tel {
    margin-top: 12px;
    border: none;
    text-align: center;
    background: var(--pv-green);
    color: #fff !important;
    border-radius: var(--pv-r);
    font-weight: 600;
    padding: 13px 8px;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   7. PREMIER ÉCRAN
   ═══════════════════════════════════════════════════════════ */
.pv-hero {
    background: var(--pv-paper);
    padding: 62px 0 70px;
    position: relative;
    overflow: hidden;
}

.pv-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--pv-brass);
    opacity: .35;
    z-index: 1;
}

.pv-hero__grid {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 56px;
    align-items: start;
}

@media (max-width: 1000px) {
    .pv-hero__grid { grid-template-columns: 1fr; gap: 36px; }
}

.pv-doc .pv-hero h1 em {
    font-style: normal;
    color: var(--pv-green);
}

/* Pastille « Consultation gratuite et sans engagement ». */
.pv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pv-green-t);
    color: var(--pv-green-d);
    border: 1px solid rgba(29, 107, 84, .2);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.pv-price {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    padding: 10px 16px;
    margin-bottom: 20px;
    box-shadow: var(--pv-sh);
}

.pv-price b {
    font-family: "Spectral", serif;
    font-size: 1.45rem;
    font-weight: 700;
}

.pv-price span {
    font-size: .83rem;
    color: var(--pv-ink3);
}

.pv-proof {
    list-style: none;
    padding: 0;
    margin: 22px 0 28px;
    display: grid;
    gap: 12px;
}

.pv-proof li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    font-size: .99rem;
    color: var(--pv-ink2);
}

.pv-proof svg { margin-top: 4px; }

.pv-proof strong { color: var(--pv-ink); }

.pv-ctarow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
}

.pv-undercta {
    font-size: .9rem;
    color: var(--pv-ink2);
    margin: 0 0 10px;
    max-width: 56ch;
}

.pv-wa {
    font-size: .9rem;
    color: var(--pv-ink3);
}

.pv-doc .pv-wa a {
    color: var(--pv-green);
    font-weight: 600;
}

.pv-wa__num { display: none; }

@media (min-width: 1024px) {
    .pv-wa__num { display: inline; }
}

/* ═══════════════════════════════════════════════════════════
   8. FORMULAIRE
   ═══════════════════════════════════════════════════════════ */
.pv-form {
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    box-shadow: var(--pv-sh-lg);
    overflow: hidden;
}

.pv-form__top {
    background: var(--pv-ink);
    color: #fff;
    padding: 21px 26px;
    position: relative;
    overflow: hidden;
}

.pv-doc .pv-form__top h2 {
    color: #fff;
    font-size: 1.32rem;
    margin: 0 0 .25rem;
    position: relative;
    z-index: 2;
}

.pv-doc .pv-form__top p {
    margin: 0;
    font-size: .85rem;
    color: #AAB5C6;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.pv-form__top::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    top: -95px;
    right: -55px;
}

.pv-form__body {
    padding: 24px 26px 26px;
}

.pv-f {
    margin-bottom: 14px;
}

.pv-f label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--pv-ink2);
}

/* form-input est conservée sur les champs (classe de production). Son seul
   effet dans landing.css est « color: var(--text-dark) !important » ; la
   règle ci-dessous la neutralise avec la même arme. */
.pv-doc .pv-input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    font-family: inherit;
    font-size: .97rem;
    background: var(--pv-paper);
    color: var(--pv-ink) !important;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.pv-doc .pv-input:hover {
    border-color: var(--pv-ink3);
}

.pv-doc .pv-input:focus {
    background: #fff;
    border-color: var(--pv-green);
    box-shadow: 0 0 0 3px rgba(29, 107, 84, .12);
    outline: none;
}

.pv-doc .pv-input::placeholder {
    color: var(--pv-ink3) !important;
}

.pv-f2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 430px) {
    .pv-f2 { grid-template-columns: 1fr; }
}

.pv-consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    font-size: .79rem;
    color: var(--pv-ink3);
    margin: 16px 0 18px;
    line-height: 1.5;
}

.pv-consent input {
    width: auto;
    margin-top: 3px;
}

.pv-doc .pv-consent label {
    font-weight: 400;
    font-size: .79rem;
    margin: 0;
    color: var(--pv-ink3);
}

.pv-doc .pv-consent a {
    color: var(--pv-green);
    font-weight: 600;
}

/* Retours d'état du formulaire — mêmes conditions Alpine qu'en production,
   habillage seulement. */
.pv-err {
    font-size: .78rem;
    color: #B91C1C;
    margin-top: 5px;
}

/* Messages d'état du formulaire.
   PORTÉE « body.pv » ET NON « .pv-ok » SEULE, et ce n'est pas cosmétique :
   ces deux div portent aussi text-green-600 / text-red-600, exigées par le
   déclencheur de conversion GTM. Ces utilitaires Tailwind valent (0,1,0),
   exactement comme une classe nue : à égalité, c'est l'ordre de chargement
   qui tranche, et cet ordre S'INVERSE entre le développement (Vite injecte
   landing.css après) et la production (CSS compilé lié avant). Le message
   changerait donc de couleur d'un environnement à l'autre.
   body.pv = (0,2,1) : l'habillage gagne partout, sans !important. */
body.pv .pv-ok {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--pv-r);
    background: var(--pv-green-t);
    border: 1px solid rgba(29, 107, 84, .25);
    color: var(--pv-green-d);
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
}

body.pv .pv-ko {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--pv-r);
    background: #FDECEC;
    border: 1px solid #F0B4B4;
    color: #B91C1C;
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
}

.pv-spin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.pv-spin svg {
    width: 1.15rem;
    height: 1.15rem;
}

.pv-form__after {
    margin-top: 16px;
    font-size: .82rem;
    color: var(--pv-ink3);
    line-height: 1.55;
}

.pv-doc .pv-form__after a {
    color: var(--pv-green);
    font-weight: 600;
}

.pv-form__call {
    margin: 20px -26px -26px;
    padding: 18px 26px;
    background: var(--pv-green-t);
    border-top: 1px solid var(--pv-line);
    text-align: center;
}

.pv-form__call span {
    display: block;
    font-size: .8rem;
    color: var(--pv-green-d);
    margin-bottom: 3px;
    font-weight: 600;
}

.pv-doc .pv-form__call .pv-form__tel {
    font-family: "Spectral", serif;
    font-size: 1.45rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--pv-green-d) !important;
    background: none;
    border: none;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   9. BANDEAU DES GARANTIES  (#avantages)
   ═══════════════════════════════════════════════════════════ */
.pv-band {
    background: var(--pv-ink);
    color: #E5E9F0;
    position: relative;
    overflow: hidden;
}

.pv-band__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.pv-band__i {
    padding: 8px 28px;
    border-left: 1px solid rgba(255, 255, 255, .13);
}

.pv-band__i:first-child {
    border-left: none;
    padding-left: 0;
}

.pv-doc .pv-band__i h3 {
    color: #fff;
    font-size: .94rem;
    margin-bottom: .3rem;
}

.pv-doc .pv-band__i p {
    font-size: .85rem;
    color: #9FAABC;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .pv-band__grid { grid-template-columns: 1fr 1fr; gap: 26px 0; }
    .pv-band__i { padding: 0 22px; }
    .pv-band__i:nth-child(odd) { border-left: none; padding-left: 0; }
}

@media (max-width: 520px) {
    .pv-band__grid { grid-template-columns: 1fr; }
    .pv-band__i { border-left: none; padding: 0; }
}

/* ═══════════════════════════════════════════════════════════
   10. AVOCAT
   ═══════════════════════════════════════════════════════════ */
.pv-avo {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 52px;
    align-items: start;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .pv-avo { grid-template-columns: 1fr; gap: 30px; }
}

.pv-avo__img {
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    overflow: hidden;
    background: var(--pv-fill);
    box-shadow: var(--pv-sh-lg);
}

.pv-avo__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.pv-card {
    background: var(--pv-paper);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    padding: 26px;
    transition: transform .2s, box-shadow .2s;
}

.pv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pv-sh);
}

.pv-card + .pv-card {
    margin-top: 16px;
}

.pv-card--g { border-left: 4px solid var(--pv-green); }

.pv-card--brass { border-left: 4px solid var(--pv-brass); }

.pv-card p:last-child { margin-bottom: 0; }

/* Engagement vérifiable du bloc avocat.
   Le seul énoncé concret et contrôlable de la section : les avocats n'étant
   pas nommés sur le site, tout le reste du bloc est générique. Il est donc
   sorti du corps de texte et encadré, pour qu'on ne puisse pas le manquer. */
.pv-engage {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--pv-green-t);
    border: 1px solid rgba(29, 107, 84, .28);
    border-left: 4px solid var(--pv-green);
    border-radius: var(--pv-r);
}

.pv-doc .pv-engage p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pv-green-d);
    font-weight: 500;
}

/* Dans l'encadré d'engagement, la mention de vérifiabilité est du texte
   courant, pas une pastille : l'encadré blanc en chasse fixe cassait le
   rythme du bloc. On neutralise donc ce que .pv-verify pose plus bas, en
   gardant la flèche et la même police que le reste. */
.pv-engage .pv-verify {
    display: block;
    margin-top: 10px;
    padding: 0;
    background: none;
    border-radius: 0;
    font-family: inherit;
    font-size: .92rem;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--pv-green-d);
}

.pv-verify {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-family: "IBM Plex Mono", monospace;
    font-size: .76rem;
    letter-spacing: .04em;
    color: var(--pv-brass);
    background: var(--pv-brass-t);
    padding: 6px 12px;
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════
   11. CALENDRIER DES DÉLAIS
   ═══════════════════════════════════════════════════════════ */
.pv-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 24px 0 32px;
    font-size: .855rem;
    color: var(--pv-ink2);
}

.pv-sw {
    display: inline-block;
    width: 26px;
    height: 12px;
    border-radius: 2px;
    margin-right: 9px;
    vertical-align: -1px;
}

.pv-sw--us { background: var(--pv-green); }

.pv-sw--law {
    background: repeating-linear-gradient(45deg, #C3BDAC, #C3BDAC 3px, #D7D2C4 3px, #D7D2C4 6px);
}

.pv-tl {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.pv-tl__s {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pv-tl__s--1 { flex: 1.05; }
.pv-tl__s--2 { flex: 1.3; }
.pv-tl__s--3 { flex: 2.2; }
.pv-tl__s--4 { flex: 2.5; }

.pv-tl__bar {
    height: 16px;
    border-radius: 3px;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .75s cubic-bezier(.22, .7, .3, 1);
    margin-bottom: 13px;
}

.pv-tl.pv-in .pv-tl__bar { transform: scaleX(1); }

.pv-tl__s--us .pv-tl__bar { background: var(--pv-green); }

.pv-tl__s--law .pv-tl__bar {
    background: repeating-linear-gradient(45deg, #C3BDAC, #C3BDAC 3px, #D7D2C4 3px, #D7D2C4 6px);
}

.pv-d1 { transition-delay: 0ms; }
.pv-d2 { transition-delay: 90ms; }
.pv-d3 { transition-delay: 180ms; }
.pv-d4 { transition-delay: 270ms; }
.pv-d5 { transition-delay: 360ms; }
.pv-d6 { transition-delay: 450ms; }

.pv-tl__d {
    font-weight: 700;
    font-size: .98rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
    line-height: 1.2;
}

.pv-tl__s--us .pv-tl__d { color: var(--pv-green-d); }

.pv-tl__s--law .pv-tl__d { color: #6E6754; }

.pv-tl__t {
    font-size: .84rem;
    color: var(--pv-ink2);
    line-height: 1.42;
}

.pv-tl__w {
    font-family: "IBM Plex Mono", monospace;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pv-ink3);
    margin-top: 7px;
}

@media (max-width: 860px) {
    .pv-tl { flex-direction: column; gap: 0; }
    .pv-tl__s { flex-direction: row; gap: 15px; padding-bottom: 20px; }
    .pv-tl__bar {
        height: auto;
        width: 10px;
        flex: 0 0 10px;
        margin-bottom: 0;
        border-radius: 6px;
        transform: scaleY(0);
        transform-origin: center top;
    }
    .pv-tl.pv-in .pv-tl__bar { transform: scaleY(1); }
}

.pv-cal__out {
    margin-top: 34px;
    padding: 22px 26px;
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-left: 4px solid var(--pv-green);
    border-radius: var(--pv-r);
    font-size: 1rem;
    color: var(--pv-ink2);
    max-width: 900px;
}

.pv-cal__out b {
    font-family: "Spectral", serif;
    font-size: 1.28rem;
    color: var(--pv-ink);
}

/* ═══════════════════════════════════════════════════════════
   12. FORMULES
   ═══════════════════════════════════════════════════════════ */
/* Grille des formules : QUATRE cartes depuis le 2026-09-10.
   Trois paliers, et le choix de chacun tient à la place réellement
   disponible, le conteneur étant plafonné à --pv-maxw (1180 px) :

     >= 1180 px  4 colonnes  (1132 - 3x20) / 4 = 268 px par carte
     941..1179   2 x 2       a 1024 : (976 - 20) / 2 = 478 px, confortable
     <= 940 px   1 colonne

   Pourquoi PAS 4 colonnes en dessous de 1180 : a 1024 px la carte
   tomberait a 229 px, soit 173 px de contenu une fois les 28 px de marge
   interne retires de chaque cote. Les montants resteraient lisibles, mais
   les titres sur trois lignes et les listes de prestations sur quatre
   rendraient la comparaison penible. Le 2 x 2 garde des cartes larges.

   Le badge reste degage dans les trois dispositions : en 4 colonnes et en
   2 x 2 la carte mise en avant est sur la premiere ligne, donc rien
   au-dessus d'elle ; empilee, la gouttiere de 34 px s'en charge. */
.pv-plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 34px;
}

@media (max-width: 1179px) {
    .pv-plans { grid-template-columns: repeat(2, 1fr); }
}

/* A 4 colonnes la carte ne fait plus que 268 px, dont 212 de contenu.
   « Sur devis » a 2,5 rem en Spectral y tiendrait a 8 px pres : on
   redescend le corps du prix, qui reste tres au-dessus du reste. */
@media (min-width: 1180px) {
    /* .pv-plans .pv-plan__p et non .pv-plan__p seule : la regle de base est
       declaree PLUS BAS dans ce fichier, et a specificite egale c'est elle
       qui gagnerait. (0,2,0) tranche sans dependre de l'ordre. */
    .pv-plans .pv-plan__p { font-size: 2.1rem; }
}

/* Les deux boutons d'appel a l'action de chaque carte.
   Une grille plutot que des marges : l'ecart est pose une fois, il reste
   identique sur les quatre cartes, et les deux boutons heritent de la
   meme largeur sans que .pv-btn--full ait a lutter contre quoi que ce
   soit. Le bas du second bouton s'aligne donc entre cartes, la <ul>
   au-dessus absorbant la difference de hauteur. */
.pv-plan__cta {
    display: grid;
    gap: 10px;
}

/* Les boutons de carte peuvent revenir a la ligne : .pv-btn impose
   white-space:nowrap par defaut, et une carte de 264 px ne laisse que
   156 px de texte utile. Le filet reste utile meme avec des libelles
   courts, si la police de repli s'avere plus large. */
.pv-plan .pv-btn {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

/* La carte « Sur devis » a desormais sa propre liste de cas, comme les
   trois autres : c'est donc .pv-plan ul qui absorbe la hauteur restante et
   aligne son bouton. Aucune regle particuliere n'est necessaire ici. */

@media (max-width: 940px) {
    .pv-plans {
        grid-template-columns: 1fr;
        /* 34 px et non 20 : empilées, la carte mise en avant a désormais une
           voisine au-dessus d'elle, et son badge remonte de 12 px hors de la
           carte (.pv-plan__tag, top:-12px). 20 px de gouttière ne laissaient
           que 8 px de dégagement. 34 en laissent 22. */
        gap: 34px;
    }
}

.pv-plan {
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    padding: 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .2s, box-shadow .2s;
}

.pv-plan:hover {
    transform: translateY(-5px);
    box-shadow: var(--pv-sh-lg);
}

.pv-plan--best {
    border: 2px solid var(--pv-green);
    box-shadow: 0 10px 30px rgba(29, 107, 84, .09);
}

.pv-plan__tag {
    position: absolute;
    top: -12px;
    left: 26px;
    background: var(--pv-green);
    color: #fff;
    font-family: "IBM Plex Mono", monospace;
    font-size: .67rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 3px;
}

/* « à partir de » devant un prix.
   Posé en sans-serif, petit et gris, sur sa propre ligne dans les cartes de
   formules : à 2,5 rem en Spectral, « à partir de 479 € » sortirait de la
   carte, et en ligne dans la pastille du premier écran il pousserait la
   mention « TTC par personne » hors de l'écran à 375 px. Le montant reste
   ainsi l'élément qui porte le regard. */
.pv-from {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 500;
    color: var(--pv-ink3);
    letter-spacing: 0;
}

.pv-plan__p .pv-from {
    display: block;
    font-size: .8rem;
    line-height: 1.2;
    margin-bottom: 3px;
}

.pv-price .pv-from {
    font-size: .78rem;
}

.pv-plan__p {
    font-family: "Spectral", serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 16px 0 3px;
    font-variant-numeric: tabular-nums;
}

.pv-plan__u {
    font-size: .82rem;
    color: var(--pv-ink3);
    margin-bottom: 18px;
}

.pv-plan__d {
    font-size: .93rem;
    color: var(--pv-ink2);
    margin-bottom: 18px;
}

.pv-plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    font-size: .89rem;
    color: var(--pv-ink2);
    flex: 1;
}

.pv-plan ul li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 9px;
}

.pv-plan ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--pv-green);
    background: var(--pv-green-t);
}

/* Note de bas de tarifs. Encadrée légèrement, pour qu'elle se lise comme une
   précision du tableau au-dessus et non comme une mention à sauter. */
.pv-pricenote {
    margin: 26px 0 0;
    padding: 18px 20px;
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-left: 4px solid var(--pv-brass);
    border-radius: var(--pv-r);
    font-size: .9rem;
    line-height: 1.6;
    color: var(--pv-ink2);
    max-width: 900px;
}

.pv-pricenote strong {
    color: var(--pv-ink);
}

.pv-special {
    margin-top: 20px;
    background: var(--pv-ink);
    color: #fff;
    border-radius: var(--pv-r);
    padding: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}

.pv-doc .pv-special h3 {
    color: #fff;
    font-size: 1.12rem;
}

.pv-doc .pv-special p {
    margin: 0;
    font-size: .93rem;
    color: #A9B4C6;
    max-width: 56ch;
}

.pv-special__t {
    flex: 1;
    min-width: 280px;
}

/* ═══════════════════════════════════════════════════════════
   13. ÉTAPES
   ═══════════════════════════════════════════════════════════ */
.pv-steps {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 52px;
    align-items: start;
    margin-top: 32px;
}

@media (max-width: 940px) {
    .pv-steps { grid-template-columns: 1fr; gap: 30px; }
}

.pv-steps__list {
    counter-reset: pv-s;
}

.pv-st {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--pv-line);
}

.pv-st:first-child {
    border-top: none;
    padding-top: 0;
}

.pv-st__n {
    counter-increment: pv-s;
    font-family: "Spectral", serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--pv-brass);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pv-st__n::before {
    content: "0" counter(pv-s);
}

.pv-doc .pv-st p {
    margin: 0;
    font-size: .94rem;
    color: var(--pv-ink2);
}

.pv-steps__img {
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    overflow: hidden;
    position: sticky;
    top: 96px;
    box-shadow: var(--pv-sh-lg);
}

.pv-steps__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 4;
}

@media (max-width: 940px) {
    .pv-steps__img { position: static; }
    .pv-steps__img img { aspect-ratio: 16 / 9; }
}

/* ═══════════════════════════════════════════════════════════
   14. FAQ
   ═══════════════════════════════════════════════════════════ */
.pv-faqgrid {
    display: grid;
    grid-template-columns: 1.32fr .68fr;
    gap: 52px;
    align-items: start;
    margin-top: 30px;
}

@media (max-width: 940px) {
    .pv-faqgrid { grid-template-columns: 1fr; gap: 28px; }
}

.pv-faq__img {
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    overflow: hidden;
    background: var(--pv-white);
}

/* L'image remplit la largeur du cadre, quelle que soit la valeur de son
   attribut width ; height:auto garde son ratio, le cadre suit. Sans cette
   regle, le remplissage dependrait d'un hasard de dimensions : un attribut
   plus etroit que le cadre laisserait une bande blanche a droite (c'etait
   le cas de l'image du premier ecran, 400 px dans un cadre de 570).
   .pv-avo__img img et .pv-steps__img img ont la leur, avec object-fit:cover
   et un aspect-ratio impose.
   Premier ecran : plus d'image depuis le 2026-09-15, ses regles
   .pv-hero__img sont retirees. Son image est ici, en WebP. */
.pv-faq__img img {
    width: 100%;
    height: auto;
}

@media (max-width: 940px) {
    .pv-faq__img { display: none; }
}

.pv-q {
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    margin-bottom: 10px;
    transition: box-shadow .2s, border-color .2s;
}

.pv-q[open] {
    box-shadow: var(--pv-sh);
    border-color: var(--pv-green-t);
}

.pv-q summary {
    cursor: pointer;
    padding: 19px 24px;
    font-weight: 600;
    font-size: 1.02rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.pv-q summary::-webkit-details-marker { display: none; }

.pv-q summary::after {
    content: "+";
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--pv-fill);
    color: var(--pv-green);
    font-size: 1.1rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pv-q[open] summary::after {
    content: "\2013";
    background: var(--pv-green-t);
}

.pv-q[open] summary {
    border-bottom: 1px solid var(--pv-line);
}

.pv-faq__b {
    padding: 18px 24px 22px;
    font-size: .95rem;
    color: var(--pv-ink2);
}

.pv-faq__b p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   15. APPEL FINAL
   ═══════════════════════════════════════════════════════════ */
.pv-final {
    background: var(--pv-ink);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pv-doc .pv-final h2 { color: #fff; }

.pv-doc .pv-final .pv-eyebrow { color: var(--pv-brass); }

.pv-final .pv-rule { margin-left: auto; margin-right: auto; }

.pv-doc .pv-final p {
    color: #A9B4C6;
    max-width: 56ch;
    margin: 0 auto 28px;
}

.pv-final .pv-ctarow {
    justify-content: center;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   16. PIED DE PAGE
   ═══════════════════════════════════════════════════════════ */
.pv-ft {
    background: #08131F;
    color: #8E99AC;
    font-size: .88rem;
    padding: 56px 0 44px;
}

.pv-ft__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 36px;
}

@media (max-width: 900px) {
    .pv-ft__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 560px) {
    .pv-ft__grid { grid-template-columns: 1fr; }
}

/* Logotype texte, faute de version claire du logo pour fond sombre.
   public/images/logos/ ne contient que des versions foncées. */
.pv-ft__mark {
    font-family: "Spectral", serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    text-decoration: none;
    display: inline-block;
}

.pv-ft__mark em {
    font-style: normal;
    color: #57B394;
}

.pv-doc .pv-ft h4 {
    font-family: "IBM Plex Mono", monospace;
    color: #fff;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 500;
}

.pv-ft ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pv-ft li { margin-bottom: 8px; }

.pv-doc .pv-ft a {
    color: #BAC3D2;
    text-decoration: none;
}

.pv-doc .pv-ft a:hover {
    color: #fff;
    text-decoration: underline;
}

.pv-ft__intro {
    margin-top: 14px;
    max-width: 330px;
}

.pv-doc .pv-ft .pv-ft__acc {
    color: #fff !important;
    font-weight: 700;
}

.pv-doc .pv-ft .pv-ft__tel {
    background: none;
    border: none;
    padding: 0;
    color: #BAC3D2 !important;
    font-weight: 400;
}

.pv-doc .pv-ft .pv-ft__tel:hover {
    color: #fff !important;
}

.pv-ft__legal {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #1B2938;
    font-size: .79rem;
    line-height: 1.65;
    color: #75808F;
}

.pv-ft__wa { display: none; }

@media (min-width: 1024px) {
    .pv-ft__wa { display: list-item; }
}

/* ═══════════════════════════════════════════════════════════
   17. BARRE D'APPEL MOBILE + EMPILEMENT DES WIDGETS EXISTANTS
   ───────────────────────────────────────────────────────────
   Z-INDEX RETENUS, ET POURQUOI ILS NE SONT PAS CEUX DE LA MAQUETTE.
   La maquette proposait barre 60 · flottants 65 · chatbot 70. Or les
   valeurs réelles de landing.css sont 1000 pour les trois boutons
   flottants et la bulle d'accroche, et 1001 pour la feuille mobile du
   chatbot. Une barre à 60 passerait donc SOUS les trois widgets.

   Retenu :  barre 990  ·  flottants 1000 (inchangés)  ·  chatbot 1001
             (inchangé)  ·  navigation collante 55.

   Aucun z-index existant n'est modifié : la barre est simplement glissée
   juste en dessous. C'est le seul agencement qui laisse les widgets
   au-dessus d'elle sans toucher à landing.css.

   BORNE À 768 px, ET NON 860 COMME LA MAQUETTE. landing.css bascule les
   flottants à 768/769 px, et le chatbot desktop reprend le coin bas droit
   à partir de 769. Une barre affichée jusqu'à 860 recouvrirait ce panneau
   d'angle entre 769 et 860 px. Une seule frontière, la même que le reste
   du site : ni trou, ni recouvrement.
   ═══════════════════════════════════════════════════════════ */
.pv-mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--pv-line);
    box-shadow: 0 -4px 18px rgba(14, 27, 42, .12);
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.pv-mbar .pv-btn {
    padding: 14px 8px;
    font-size: .94rem;
}

@media (max-width: 768px) {
    .pv-mbar { display: grid; }

    /* Le contenu ne doit jamais finir sous la barre. */
    body.pv { padding-bottom: calc(var(--pv-mbar-h) + 12px); }

    .pv-sec { padding: 58px 0; }
    .pv-hero { padding: 46px 0 54px; }

    /* ---------------------------------------------------------------
       PILE DES WIDGETS FLOTTANTS, RESSERRÉE.

       Le problème : trois boutons de 65 px espacés de 75 px, remontés de
       la hauteur de la barre, occupaient de 99 à 314 px du bas, soit
       215 px de hauteur et 90 px de largeur pris sur le texte. Sur un
       iPhone de 844 px, leur sommet atteignait 63 % de la hauteur
       d'écran, et ils tronquaient le texte à droite en plein milieu de
       la page.

       Ce qui change ici, et UNIQUEMENT ici, jamais dans landing.css :
         · 48 px au lieu de 65, icône 22 au lieu de 28. 48 reste au-dessus
           des 44 px recommandés pour une cible tactile.
         · écart de 58 px au lieu de 75, soit 10 px entre deux boutons.
         · right 14 px au lieu de 25, pour les coller au bord.

       Résultat : la pile occupe de 90 à 254 px du bas, 164 px de hauteur
       au lieu de 215, et ne mord plus que 62 px de largeur au lieu de 90.
       Le sommet redescend de 314 à 254 px du bas.

       body.pv .floating-x = (0,2,1) l'emporte sur le
       « @media { .floating-x } » de landing.css = (0,1,0), quel que soit
       l'ordre de chargement des deux feuilles.
       --------------------------------------------------------------- */
    body.pv .floating-phone,
    body.pv .floating-whatsapp,
    body.pv .floating-chatbot {
        width: 48px;
        height: 48px;
        right: 14px;
    }

    body.pv .floating-phone svg,
    body.pv .floating-whatsapp svg,
    body.pv .floating-chatbot svg {
        width: 22px;
        height: 22px;
    }

    body.pv .floating-phone {
        bottom: calc(var(--pv-mbar-h) + 16px);
    }

    body.pv .floating-whatsapp {
        bottom: calc(var(--pv-mbar-h) + 74px);
    }

    body.pv .floating-chatbot {
        bottom: calc(var(--pv-mbar-h) + 132px);
    }

    body.pv .chatbot-teaser {
        bottom: calc(var(--pv-mbar-h) + 144px);
        right: 70px;
        max-width: calc(100vw - 6rem);
    }
}

/* ═══════════════════════════════════════════════════════════
   18. PAGES LÉGALES  (mentions légales · conditions générales)
   Tout ce bloc est porté par .pv-legal, posé sur le conteneur des vues
   preview/mentions-legales-v5 et preview/cgv-v5. La page d'accueil n'a pas
   cette classe : aucune règle d'ici ne peut l'atteindre.

   .pv-legal est RÉUTILISÉE par la seconde page, pas dupliquée. Les deux
   documents ont le même besoin — une colonne de lecture, un sommaire, des
   fiches, et l'extinction des dispositifs d'appel — et inventer une classe
   par page aurait doublé chaque règle pour rien.
   ═══════════════════════════════════════════════════════════ */

/* 18.1 — EXTINCTION DE LA BARRE D'APPEL ET DES TROIS WIDGETS
   ───────────────────────────────────────────────────────────
   Le problème : la barre d'appel mobile, les deux boutons flottants et le
   chatbot sont écrits EN DUR dans layouts/preview.blade.php, hors de
   .pv-doc, et le gabarit est partagé avec la page d'accueil v5. On ne peut
   donc ni les retirer du gabarit, ni les atteindre depuis le contenu de la
   page : dans le DOM, ils sont les FRÈRES de .pv-doc, pas ses descendants.

   La solution : :has(). body.pv:has(.pv-legal) ne vaut que si la page rend
   un élément .pv-legal, c'est-à-dire uniquement sur les mentions légales.
   Aucun fichier partagé n'est modifié, et la page d'accueil ne voit rien.

   Le chatbot est éteint par la racine de son partial, [x-data="chatbotFunnel()"],
   qui enveloppe à la fois la pastille de bureau, la bulle d'accroche, le
   panneau et le bouton flottant mobile. .floating-chatbot est listé en plus,
   par sécurité, au cas où cette racine changerait.

   Repli si :has() n'est pas reconnu (navigateurs antérieurs à 2022) : la
   règle entière est ignorée et les widgets restent affichés. La page reste
   lisible et complète, elle porte simplement des boutons d'appel en trop.
   Aucune dégradation du contenu légal lui-même. */
body.pv:has(.pv-legal) .pv-mbar,
body.pv:has(.pv-legal) .floating-phone,
body.pv:has(.pv-legal) .floating-whatsapp,
body.pv:has(.pv-legal) .floating-chatbot,
body.pv:has(.pv-legal) [x-data="chatbotFunnel()"] {
    display: none !important;
}

/* La réserve de bas de page ne sert qu'à dégager la barre d'appel. Sans
   barre, elle laisserait 86 px de vide. (0,2,1) l'emporte sur le
   « body.pv » (0,1,1) de la section 17, quel que soit l'ordre. */
body.pv:has(.pv-legal) {
    padding-bottom: 0;
}

/* 18.2 — COLONNE DE LECTURE
   840 px : autour de 90 caractères par ligne dans la graisse du texte
   courant. C'est une page qui se lit d'un bout à l'autre, pas une page
   qui vend ; elle n'a donc ni grille ni colonnes latérales. */
.pv-read {
    max-width: 840px;
    margin: 0 auto;
}

/* ───────────────────────────────────────────────────────────
   18.2 bis — DÉCOR DE L'EN-TÊTE, ET RIEN QUE DE L'EN-TÊTE
   ───────────────────────────────────────────────────────────
   Relevé du 2026-09-10 : l'accueil porte 25 éléments d'ambiance — 10
   bulles floutées, 6 anneaux, 4 flottants — et les pages légales zéro.
   C'est cet écart, bien plus que les couleurs ou les polices, qui
   donnait l'impression de deux thèmes.

   TROIS BULLES, PAS DIX, ET SEULEMENT DERRIÈRE L'EN-TÊTE. Les teintes,
   le flou et les opacités sont ceux de l'accueil, repris tels quels par
   les classes .pv-bub--1, --2 et --4 : rien n'est recréé, seules les
   positions changent. Le corps du document reste net d'un bout à
   l'autre — un contrat ne se lit pas sur un fond qui bouge.

   AUCUNE ANIMATION. Les .pv-bub de l'accueil dérivent en boucle sur 19 à
   30 secondes ; ici elles sont figées. C'est une exigence, pas une
   simplification : un document contractuel ne bouge pas. Ni anneau, ni
   élément flottant, ni révélation au défilement.

   LE CLIPPING EST DÉJÀ ACQUIS : .pv-sec porte overflow:hidden et
   position:relative, .pv-bubbles s'y colle en inset:0. Une bulle ne peut
   donc pas déborder sur la section suivante, même en débordant de son
   propre cadre.

   CONTRASTE VÉRIFIÉ AU PIRE CAS, bulle à pleine intensité et sans tenir
   compte du flou qui l'atténue : le texte encre reste à 14:1, le chapeau
   à 5,9:1 et les liens à 5,2:1. Le seuil est 4,5:1. */
.pv-legal .pv-bub {
    animation: none;
}

/* POSITIONS CALCULÉES SUR LA COLONNE DE TEXTE, pas à l'estime. La colonne
   fait 840 px, centrée dans un .pv-wrap plafonné à 1180 px : à 1440 elle
   occupe 293→1133, à 1180 elle occupe 170→1010. Les décalages ci-dessous
   laissent les trois bulles hors de cette bande à toutes les largeurs où
   elles s'affichent. Mesuré, pas supposé. */
.pv-legal__deco .pv-bub--1 {
    top: -150px;
    left: -200px;
}

.pv-legal__deco .pv-bub--2 {
    top: -80px;
    right: -130px;
}

.pv-legal__deco .pv-bub--4 {
    top: auto;
    bottom: -90px;
    left: -60px;
}

/* Sous 1180 px le .pv-wrap n'est plus plafonné : la colonne s'élargit
   jusqu'aux gouttières et il n'y a plus de marge latérale où loger une
   bulle. On n'en garde qu'une, remontée AU-DESSUS du filet laiton.

   Le décalage de -310 px n'est pas décoratif, il est mesuré : à 375 px le
   filet commence à 58 px du haut de la section, et une bulle de 360 px
   posée à -310 px s'arrête à 50 px. Une version antérieure la plaçait à
   -190 px : elle couvrait le sur-titre et faisait tomber son contraste de
   3,58:1 à 2,88:1, sous le seuil. C'est le seul défaut que le contrôle de
   contraste a trouvé, et il ne se voyait qu'à 375 px. */
@media (max-width: 1179px) {
    .pv-legal__deco .pv-bub--2,
    .pv-legal__deco .pv-bub--4 {
        display: none;
    }

    .pv-legal__deco .pv-bub--1 {
        top: -310px;
        left: -160px;
    }
}

/* ───────────────────────────────────────────────────────────
   18.2 ter — ALTERNANCE DES FONDS
   ───────────────────────────────────────────────────────────
   Relevé du 2026-09-10 : l'accueil répartit sa hauteur entre quatre
   fonds — blanc 25 %, sable 23 %, papier 15 %, encre 6 % — quand les
   pages légales étaient blanches à 79 et 90 %. Le document paraissait
   plat pour cette seule raison.

   PAR GROUPES DE SENS, PAS UNE SECTION SUR DEUX. Sur dix-neuf sections,
   alterner mécaniquement donnerait des zébrures et découperait des
   sujets qui vont ensemble. Les bandes suivent donc le plan : ce que
   nous faisons, ce que ça coûte, comment on règle, en combien de temps,
   changer d'avis, le site et vos données, les litiges. Un lecteur qui
   cherche le prix voit un bloc continu, pas trois bandes.

   PAS DE BLOC ENCRE. Il reste à l'accueil : sur un document contractuel
   il ferait bannière publicitaire au milieu d'un texte de loi.

   PADDING RÉDUIT À 44 px. Les 80 px de .pv-sec en donneraient 160 entre
   deux groupes, ce qui casserait la continuité de lecture au lieu de la
   rythmer. Le filet de séparation des .pv-art disparaît en tête de
   groupe, la bordure de bande le remplace. */
.pv-legal .pv-grp {
    padding: 44px 0;
}

.pv-legal .pv-grp:first-of-type {
    padding-top: 52px;
}

/* Les titres de l'accueil montent à 2.35rem : trop haut pour huit
   intertitres dans une colonne de lecture. Ramenés à une échelle de
   document. Le h1 garde sa présence, il n'y en a qu'un. */
.pv-doc .pv-legal h1 {
    font-size: clamp(1.95rem, 3.4vw, 2.7rem);
}

.pv-doc .pv-legal h2 {
    font-size: clamp(1.32rem, 2.1vw, 1.62rem);
    line-height: 1.25;
    margin: 0 0 .75rem;
}

/* Les liens du corps doivent se voir : .pv-doc a les remet en color:inherit,
   ce qui convient au chrome mais pas à un texte de loi. (0,3,1) l'emporte
   sur .pv-doc a (0,2,0).

   !important OBLIGATOIRE ICI, et ce n'est pas un raccourci. Les liens
   d'appel portent la classe de mesure cta-phone, à laquelle landing.css
   impose « color: #fff !important » — pensé pour un bouton sur fond
   coloré. Dans une colonne de lecture à fond blanc, cela donne du texte
   blanc sur blanc : le numéro de téléphone devient INVISIBLE alors que le
   lien reste cliquable. Aucune spécificité ne bat un !important, seul un
   autre !important le fait. La classe cta-phone, elle, ne bouge pas : elle
   déclenche la mesure et ne doit jamais être retirée du markup.
   Même logique que la section 4 pour les boutons. */
.pv-doc .pv-read p a,
.pv-doc .pv-read dd a {
    color: var(--pv-green) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* --pv-green ET NON --pv-green-d, aligné sur les liens de l'accueil depuis
   le 2026-09-10. Le vert sombre venait d'un réflexe de contraste jamais
   vérifié, et il créait le seul écart de couleur entre les pages v5.
   Mesuré avant de trancher : #1D6B54 rend 6,40:1 sur blanc, 5,81:1 sur
   papier et 5,35:1 sur la bande sable du sommaire. Le seuil est 4,5:1.
   Le survol descend d'un cran vers le vert sombre, au lieu de monter. */
.pv-doc .pv-read p a:hover,
.pv-doc .pv-read dd a:hover {
    color: var(--pv-green-d) !important;
}

/* 18.3 — EN-TÊTE */
.pv-upd {
    margin: 1.4rem 0 0;
    font-size: .92rem;
    color: var(--pv-ink2);
}

.pv-legal__intro {
    padding: 18px 20px;
    background: var(--pv-fill);
    border-left: 3px solid var(--pv-line);
    border-radius: var(--pv-r);
    font-size: .97rem;
    color: var(--pv-ink2);
    margin-bottom: 2.6rem;
}

/* 18.4 — SOMMAIRE
   Deux colonnes au-dessus de 620 px, une seule en dessous. « columns »
   plutôt qu'une grille : le remplissage se fait colonne par colonne, donc
   les entrées se lisent 1-2-3-4 à gauche puis 5-6-7-8 à droite, et le
   nombre de sections peut changer sans retoucher la règle. */
.pv-toc {
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    padding: 22px 24px;
}

/* --pv-ink2 et non --pv-ink3, contrairement aux petits libellés de
   l'accueil. Mesuré : ink3 sur blanc donne un contraste de 3,64:1, sous le
   seuil de 4,5:1 exigé à cette taille. Sur une page dont le contenu est
   imposé par la loi, un libellé illisible n'est pas un choix graphique.
   ink2 monte à 7,4:1. Même correction sur .pv-id dt. */
.pv-toc__t {
    font-family: "IBM Plex Mono", monospace;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--pv-ink2);
    margin: 0 0 .9rem;
}

.pv-toc__l {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 1;
    column-gap: 32px;
}

@media (min-width: 620px) {
    .pv-toc__l {
        columns: 2;
    }
}

.pv-toc__l li {
    break-inside: avoid;
    margin: 0 0 .5rem;
}

.pv-doc .pv-toc__l a {
    color: var(--pv-ink);
    text-decoration: none;
    font-size: .96rem;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.pv-doc .pv-toc__l a:hover {
    color: var(--pv-green-d);
    border-bottom-color: var(--pv-green);
}

/* 18.5 — SECTIONS
   scroll-margin-top en plus du scroll-padding-top global de html:root :
   les deux se cumulent sans se gêner, et celui-ci survit si un jour le
   global change. */
.pv-art {
    padding-top: 2.4rem;
    margin-top: 2.4rem;
    border-top: 1px solid var(--pv-line);
    scroll-margin-top: 104px;
}

.pv-art:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.pv-doc .pv-art p:last-child {
    margin-bottom: 0;
}

/* 18.6 — FICHES D'IDENTIFICATION
   Libellé et valeur en deux colonnes, une seule sous 620 px. Un <dl> plutôt
   qu'un tableau : ce sont des paires terme/définition, pas des données
   tabulaires, et un lecteur d'écran les annonce correctement. */
.pv-id {
    display: grid;
    grid-template-columns: minmax(140px, 230px) 1fr;
    margin: 1.4rem 0 0;
    border-top: 1px solid var(--pv-line);
}

.pv-id dt {
    padding: 11px 16px 11px 0;
    border-bottom: 1px solid var(--pv-line);
    font-size: .87rem;
    color: var(--pv-ink2);
    letter-spacing: .01em;
}

.pv-id dd {
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--pv-line);
    font-size: .97rem;
}

@media (max-width: 619px) {
    .pv-id {
        grid-template-columns: 1fr;
    }

    /* En une colonne, le libellé et sa valeur forment un seul bloc : le
       filet ne doit passer qu'APRÈS la valeur, sinon il coupe la paire. */
    .pv-id dt {
        padding: 12px 0 0;
        border-bottom: 0;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .pv-id dd {
        padding: 2px 0 12px;
    }
}

/* 18.6 bis — NOTE SOUS UNE FICHE
   Ajoutée le 2026-09-15 pour l'hébergeur : une précision en texte courant,
   discrète mais lisible. --pv-ink2 et non --pv-ink3, pour la raison de 18.4
   (ink3 descend à 3,64:1 sur blanc). Discrète par la taille, pas par le
   contraste. */
.pv-doc .pv-legal__note {
    margin: .9rem 0 .8rem;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--pv-ink2);
}

/* 18.7 — ENCADRÉ DE FIN
   .pv-engage remet toutes ses <p> à margin 0 : il n'en portait qu'une sur
   l'accueil. Ici il y en a deux, il faut donc les réespacer. */
.pv-legal__end {
    margin-top: 2.8rem;
}

.pv-doc .pv-legal__end p + p,
.pv-doc .pv-engage p + p {
    margin-top: .5rem;
}

/* ───────────────────────────────────────────────────────────
   18.8 — CE QUI SUIT SERT LES CONDITIONS GÉNÉRALES
   Dix-neuf sections numérotées, du texte juridique dense, et huit
   décisions en attente. La navigation est le vrai sujet de cette page :
   un lecteur doit retrouver « prix » sans lire le reste.
   ─────────────────────────────────────────────────────────── */

/* NUMÉROTATION. Écrite dans le markup et non par un compteur CSS : un
   numéro de section d'un document contractuel se cite, se copie et doit
   exister dans le texte copié-collé. Un ::before CSS disparaîtrait du
   presse-papier et d'une impression sans styles. */
.pv-art__n {
    display: inline-block;
    min-width: 1.9em;
    color: var(--pv-brass);
    font-variant-numeric: tabular-nums;
}

/* SOMMAIRE À DIX-NEUF ENTRÉES. Les numéros sont alignés sur une colonne
   fixe pour que l'œil descende sans zigzaguer, et le libellé s'indente
   sous lui-même quand il passe sur deux lignes. */
.pv-toc__l li {
    line-height: 1.35;
}

.pv-doc .pv-toc__l a {
    display: block;
    padding-left: 2.1em;
    text-indent: -2.1em;
}

.pv-toc__n {
    display: inline-block;
    min-width: 1.7em;
    text-indent: 0;
    color: var(--pv-brass);
    font-variant-numeric: tabular-nums;
    font-size: .88em;
}

/* Repère « à compléter » du sommaire. Il dit d'un coup d'œil quelles
   sections portent une décision en attente, sans qu'on ait à parcourir
   la page. Même palette que .pv-todo, en plus discret : c'est un
   indicateur de navigation, pas le surlignage lui-même. */
.pv-toc__f {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--pv-todo-bg);
    color: var(--pv-todo);
    font-family: "IBM Plex Mono", monospace;
    font-size: .66rem;
    letter-spacing: .04em;
    text-indent: 0;
    vertical-align: 1px;
    white-space: nowrap;
}

/* SURLIGNAGE EN BLOC. .pv-todo seul est pensé pour quelques mots au fil
   du texte ; un paragraphe entier a besoin de respirer, sinon les lignes
   se collent et le fond ambre devient illisible. Le filet à gauche le
   rattache visuellement à la famille des encadrés. */
.pv-todo--block {
    display: block;
    padding: 14px 16px;
    border-radius: var(--pv-r);
    border-bottom: 0;
    border-left: 3px solid var(--pv-todo);
    line-height: 1.55;
    font-weight: 500;
}

/* ENCADRÉS DU TEXTE. La production en emploie cinq couleurs différentes —
   bleu, jaune, rouge, vert, indigo — sans qu'aucune ne signifie quoi que
   ce soit de stable. Trois suffisent ici : neutre pour un aparté, --warn
   pour un avertissement, --strong pour ce qui engage le lecteur. L'ambre
   reste RÉSERVÉ aux décisions en attente : lui donner un second sens
   aurait rendu les surlignages invisibles au milieu du décor. */
.pv-note {
    margin: 1.4rem 0;
    padding: 16px 18px;
    background: var(--pv-fill);
    border-left: 3px solid var(--pv-line);
    border-radius: var(--pv-r);
}

.pv-note--warn {
    background: var(--pv-brass-t);
    border-left-color: var(--pv-brass);
}

.pv-note--strong {
    background: var(--pv-green-t);
    border-left-color: var(--pv-green);
}

.pv-note__t {
    font-weight: 600;
    font-size: .93rem;
}

.pv-doc .pv-note p {
    margin: 0;
    font-size: .97rem;
    line-height: 1.55;
}

.pv-doc .pv-note p + p {
    margin-top: .6rem;
}

/* LISTES DU CORPS. landing.css ne les habille pas dans ce contexte et le
   navigateur les indente de 40 px, ce qui les décroche de la colonne de
   lecture. Puces en laiton, alignées sur le texte. */
.pv-doc .pv-read > .pv-art ul,
.pv-doc .pv-read .pv-note ul {
    margin: 0 0 1.05rem;
    padding-left: 1.35rem;
    list-style: none;
}

.pv-doc .pv-read > .pv-art li,
.pv-doc .pv-read .pv-note li {
    position: relative;
    margin-bottom: .5rem;
    line-height: 1.55;
}

.pv-doc .pv-read > .pv-art li::before,
.pv-doc .pv-read .pv-note li::before {
    content: "";
    position: absolute;
    left: -1.35rem;
    top: .62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pv-brass);
}

/* Les sous-titres d'une section longue. .pv-doc h3 est déjà défini pour
   l'accueil ; il lui manque seulement de l'air au-dessus quand il suit un
   paragraphe dans un document qui se lit d'un trait. */
.pv-doc .pv-art h3 {
    margin-top: 1.8rem;
    color: var(--pv-ink);
}

.pv-doc .pv-art > h3:first-of-type {
    margin-top: 1.1rem;
}

/* Règle « .pv-doc .pv-art > .pv-legalref » RETIRÉE le 2026-09-15 : elle
   détachait les notes de relecture posées sous un article des pages
   légales, et ces notes ne sont plus rendues. La classe .pv-legalref
   elle-même reste : l'accueil l'emploie pour ses références d'articles
   (« art. 229-4 C. civ. », « art. 1146 CPC »). */

/* ═══════════════════════════════════════════════════════════
   19. MOUVEMENT RÉDUIT
   Portée limitée à .pv-doc et aux éléments d'ambiance : on ne coupe pas
   les transitions du chatbot, qui appartiennent à un composant existant.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .pv-doc *,
    .pv-doc *::before,
    .pv-doc *::after {
        animation: none !important;
        transition: none !important;
    }

    .pv-rv {
        opacity: 1;
        transform: none;
    }

    .pv-tl__bar {
        transform: none !important;
    }

    html:root {
        scroll-behavior: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   20. IMPRESSION
   Portée : les quatre pages v5. Le gros des règles vise .pv-legal,
   quelques-unes body.pv pour que l'accueil s'imprime sans horreur.

   ÉPROUVÉE LE 2026-09-11, SUR CHROME ET SUR CHROME SEUL.
   Les quatre pages ont été rendues en PDF par Chrome headless
   (--headless=new --print-to-pdf) et les PDF ont été analysés. Le rendu a
   trouvé deux défauts que la lecture du CSS n'aurait pas montrés :
     · l'accueil s'imprimait sur neuf feuilles SANS aucune identification,
       la règle étant accrochée à .pv-legal qu'il n'a pas ;
     · les surlignages EN LIGNE n'avaient aucun marqueur, et cette feuille
       remettait même leur filet à zéro.
   Les deux sont corrigés et revérifiés sur le PDF.

   ⚠️ FIREFOX ET SAFARI N'ONT PAS ÉTÉ ESSAYÉS. Le prochain qui ouvre ce
   fichier doit savoir sur quel moteur il a été mis au point. Deux écarts
   connus par la spécification, non observés ici :
     · orphans et widows sont IGNORÉS par Firefox : la règle 20.5 qui
       interdit une ligne seule en haut ou en bas de page n'y produira
       rien. Elle n'est pas fausse, elle est sans effet.
     · le pied de page de la règle 20.7 ne s'y répète pas — voir le
       commentaire de cette règle, c'est assumé.
   break-inside: avoid-page, en revanche, est vérifié sur Chrome : une
   fiche d'identification de la page des mentions légales est bien partie
   entière à la page suivante plutôt que d'être coupée.
   ═══════════════════════════════════════════════════════════ */
@media print {

    /* 20.1 — PAGE ET FOND
       Marge basse généreuse : le pied de page fixe occupe le bas, il faut
       lui réserver la place. Fond blanc imposé : les bandes sable et le
       bloc encre n'ont aucun sens sur papier et videraient une cartouche. */
    @page {
        size: A4 portrait;
        margin: 18mm 16mm 26mm 16mm;
    }

    body.pv,
    body.pv .pv-sec,
    body.pv .pv-sec--white,
    body.pv .pv-sec--fill,
    body.pv .pv-grp {
        background: #fff !important;
        color: #000 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 20.2 — CE QUI DISPARAÎT
       Le chrome ne dit rien sur papier : un menu n'est pas cliquable, un
       bouton d'appel non plus, et le sommaire renvoie à des ancres qui
       n'existent pas hors écran. Les bulles seraient un aplat gris au
       milieu du titre. */
    body.pv .pv-topbar,
    body.pv .pv-nav,
    body.pv .pv-mob,
    body.pv .pv-ft,
    body.pv .pv-mbar,
    body.pv .pv-toc,
    body.pv .pv-bubbles,
    body.pv .pv-ring,
    body.pv .pv-float,
    body.pv .pv-legal__end,
    body.pv .floating-phone,
    body.pv .floating-whatsapp,
    body.pv .floating-chatbot,
    body.pv [x-data="chatbotFunnel()"] {
        display: none !important;
    }

    /* Propre à l'accueil : le bloc final sur fond encre sortirait en
       rectangle noir pleine page. Neutralisé, pas masqué : son texte a du
       sens. */
    body.pv .pv-final,
    body.pv .pv-final h2,
    body.pv .pv-final p {
        background: #fff !important;
        color: #000 !important;
    }

    /* 20.3 — LA COLONNE DE LECTURE
       840 px n'a pas de sens en millimètres. On rend la largeur à la page
       et on passe en points, la seule unité fiable en impression. */
    .pv-read,
    .pv-wrap {
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.pv { font-size: 10.5pt; line-height: 1.45; }
    .pv-doc .pv-legal h1 { font-size: 20pt; }
    .pv-doc .pv-legal h2 { font-size: 13pt; }
    .pv-doc .pv-art h3   { font-size: 11pt; }

    /* 20.4 — LES ADRESSES DES LIENS
       Un lien souligné sans son adresse est une information perdue. Trois
       traitements distincts : une URL se cite entière, un courriel et un
       téléphone ne se citent pas puisque le libellé porte déjà la valeur,
       et une ancre interne ne se cite pas non plus — elle ne mène nulle
       part sur papier. */
    .pv-doc a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .85em;
        word-break: break-all;
    }

    .pv-doc a[href^="mailto:"]::after { content: ""; }
    .pv-doc a[href^="tel:"]::after    { content: ""; }
    .pv-doc a[href^="#"]::after       { content: ""; }

    .pv-doc a {
        color: #000 !important;
        text-decoration: underline;
    }

    /* 20.5 — LES COUPURES
       Trois interdits. Un titre seul en bas de page, une fiche coupée en
       deux, un encadré coupé en deux. Les deux derniers rendraient le
       document FAUX à la lecture : une moitié de fiche d'identification se
       lit comme une identification incomplète. */
    .pv-doc h1,
    .pv-doc h2,
    .pv-doc h3 {
        break-after: avoid-page;
        break-inside: avoid-page;
    }

    .pv-id,
    .pv-note,
    .pv-engage,
    .pv-todo--block,
    .pv-art > ul,
    .pv-legal__intro {
        break-inside: avoid-page;
    }

    /* Une fiche longue peut dépasser une page : dans ce cas on n'interdit
       plus, on coupe ENTRE deux paires, jamais dedans. */
    .pv-id dt { break-after: avoid-page; }
    .pv-id dd { break-before: avoid-page; }

    /* Jamais une ligne seule, en haut ou en bas. Firefox les ignore. */
    .pv-doc p,
    .pv-doc li { orphans: 3; widows: 3; }

    .pv-art { break-inside: auto; padding-top: 8pt; }

    /* 20.6 — LES PASSAGES SURLIGNÉS : GARDÉS, ET RETRAITÉS
       Arbitrage du 2026-09-11. Ces pages ne sont imprimées que pour être
       relues : un document dont les surlignages ont disparu aurait l'air
       fini et cacherait exactement ce qui doit être tranché.

       L'ambre ne s'imprime pas. Les navigateurs suppriment les fonds par
       défaut, et #FAF2D9 sur une imprimante noir et blanc sort en gris à
       peine distinct du papier. D'où le triple traitement : fond gris,
       filet noir épais, ET un préfixe textuel. Le préfixe est la SEULE
       partie qui survit à une imprimante qui ignore tout le reste.

       Le jour de la bascule il n'y aura plus un seul pv-todo dans le
       markup : ces règles ne s'appliqueront alors à rien. */
    .pv-todo {
        background: #EEE !important;
        color: #000 !important;
        font-weight: 600;
    }

    /* LE FILET EST CONSERVÉ EN IMPRESSION, contrairement à une version
       antérieure de cette feuille qui le remettait à zéro. C'était une
       erreur mesurée le 2026-09-11 : le fond gris est supprimé par défaut
       par les navigateurs à l'impression, et sans filet il ne restait
       RIEN pour distinguer un surlignage en ligne du texte courant. */
    .pv-todo:not(.pv-todo--block) {
        border-bottom: 1.2pt solid #000 !important;
    }

    /* Et un marqueur textuel, pour la même raison que le préfixe des
       blocs : c'est la seule partie qui survit à une imprimante qui
       ignore fonds et filets. Il coupe la phrase — c'est voulu sur un
       document de relecture. */
    .pv-todo:not(.pv-todo--block)::after {
        content: " [à trancher]";
        font-size: .85em;
        font-weight: 700;
    }

    .pv-todo--block {
        border-left: 3pt solid #000 !important;
        padding: 8pt 10pt !important;
    }

    .pv-todo--block::before {
        content: "[À TRANCHER] ";
        font-weight: 700;
        letter-spacing: .04em;
    }

    .pv-toc__f { display: none !important; }

    /* 20.7 — L'IDENTIFICATION DE LA SOCIÉTÉ

       RÉVISÉ LE 2026-09-14 : LE PIED N'EST PLUS RÉPÉTÉ SUR CHAQUE FEUILLE.
       Jusque-là il était en position:fixed, seule mécanique qui répète un
       bloc par feuille sans envelopper le document dans un <table><tfoot>.
       Le PDF de Chrome a montré le prix : un élément fixe n'est pas du flux,
       il se pose au bas de la ZONE DE CONTENU, et la dernière ligne de chaque
       feuille s'imprimait PAR-DESSUS lui (relevé sur les mentions légales,
       pages 1 et 2). La marge basse de 26 mm de 20.1 ne réservait rien.
       Le descendre dans la marge par un bottom négatif a été essayé sur le
       blog : Chrome le rogne, il disparaît de la première feuille.

       Décision de Kevin le 2026-09-14 : un pied qui écrase le texte est un
       défaut visible sur tout document imprimé. Pour les pages légales et le
       blog, l'identification repasse DANS LE FLUX, une seule fois, sous le
       dernier paragraphe (règle qui suit, et 21.6 pour le blog). Plus aucun
       chevauchement possible, et le même rendu sur tous les moteurs.

       L'ACCUEIL GARDE LE PIED FIXE : il n'était pas dans le périmètre de la
       correction. Si la répétition par feuille redevient une exigence, la
       solution passe par le markup, pas par cette feuille. */
    /* La page d'accueil n'a PAS de .pv-legal : sans le second sélecteur
       elle s'imprimait sur neuf feuilles sans la moindre identification.
       Mesuré le 2026-09-11 sur le PDF, 0 page sur 9. Le :not() évite de
       poser deux pieds sur les pages légales, qui ont les deux éléments. */
    .pv-legal::after,
    body.pv:not(:has(.pv-legal)) .pv-doc::after {
        content: "Solution Conseil · SASU au capital de 100 € · 39 rue Castor 14800 Deauville · RCS Lisieux 100 620 483 · SIRET 100 620 483 00014 · TVA FR80100620483";
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 4pt;
        border-top: .5pt solid #666;
        font-size: 7.5pt;
        line-height: 1.3;
        color: #333;
    }

    /* Pages légales : dans le flux, une fois, en fin de document. .pv-legal
       enveloppe tout le contenu, son ::after vient donc après la dernière
       section. Même sélecteur que dans la règle précédente, même
       spécificité : c'est l'ordre qui la fait gagner, elle doit donc
       rester APRÈS. */
    .pv-legal::after {
        position: static;
        display: block;
        margin-top: 18pt;
    }

    /* PAS DE NUMÉROTATION DE PAGE, et ce n'est pas un oubli.
       @page { @bottom-right { content: counter(page) } } n'est implémenté
       par aucun navigateur courant : c'est une fonctionnalité des moteurs
       d'impression dédiés. Le navigateur pose les siens si l'utilisateur
       les laisse cochés dans sa boîte de dialogue, et cela ne se pilote
       pas depuis le CSS. */

    /* 20.8 — DIVERS */
    .pv-doc img { max-width: 100% !important; }
    .pv-legalref { color: #444 !important; font-size: 8pt; }
}

/* ═══════════════════════════════════════════════════════════
   21. BLOG  (index des articles · gabarit d'article)
   Tout ce bloc est porté par .pv-blog, posé sur le conteneur des vues
   preview/blog-index-v5 et preview/blog-article-v5.

   .pv-blog N'EST PAS .pv-legal, ET C'EST TOUT LE POINT. La barre d'appel et
   les widgets flottants sont éteints par body.pv:has(.pv-legal) (18.1),
   qui ne regarde que cette classe exacte. Les pages du blog ne la portent
   pas : ils y restent affichés, sans qu'aucune règle d'extinction ni le
   gabarit partagé aient été touchés. Un lecteur d'article est un prospect.
   Ne jamais poser .pv-legal sur une page du blog pour hériter de sa
   colonne ou de son impression : elle éteindrait les appels avec.

   Les règles de la section 18 (.pv-read, .pv-art, .pv-toc…) ne sont pas
   réutilisées pour la même raison de principe : elles servent un document
   qui se lit par sections, pas un texte qui se lit au fil.
   ═══════════════════════════════════════════════════════════ */

/* 21.1 — COLONNES
   Index à 840 px, la largeur des pages légales : on y parcourt une liste.
   Article à 720 px : autour de 75 caractères par ligne dans le corps du
   texte, la largeur d'une lecture continue. */
.pv-blog__index {
    max-width: 840px;
    margin: 0 auto;
}

.pv-blog__col {
    max-width: 720px;
    margin: 0 auto;
}

.pv-doc .pv-blog h1 {
    font-size: clamp(1.95rem, 3.4vw, 2.7rem);
}

/* 21.2 — DÉCOR DE L'EN-TÊTE
   Mêmes trois bulles que les pages légales, mêmes positions, FIGÉES : une
   page de lecture ne bouge pas. Les décalages de 18.2 bis ont été mesurés
   pour une colonne de 840 px ; celle de l'article est plus étroite, les
   bulles en sont donc plus loin encore. Sous 1180 px, une seule, remontée
   au-dessus du filet laiton, pour la raison de contraste donnée en 18.2 bis. */
.pv-blog .pv-bub {
    animation: none;
}

.pv-blog__deco .pv-bub--1 {
    top: -150px;
    left: -200px;
}

.pv-blog__deco .pv-bub--2 {
    top: -80px;
    right: -130px;
}

.pv-blog__deco .pv-bub--4 {
    top: auto;
    bottom: -90px;
    left: -60px;
}

@media (max-width: 1179px) {
    .pv-blog__deco .pv-bub--2,
    .pv-blog__deco .pv-bub--4 {
        display: none;
    }

    .pv-blog__deco .pv-bub--1 {
        top: -310px;
        left: -160px;
    }
}

/* 21.3 — L'INDEX : UNE LISTE, PAS UNE GRILLE
   Un seul panneau blanc, une ligne par article, un filet entre deux. La
   liste s'allonge sans jamais se réorganiser : deux articles ou vingt, la
   mise en page est la même, seule la hauteur change. Au-dessus de 620 px la
   date tient une colonne fixe à gauche ; en dessous elle passe au-dessus du
   titre. */
.pv-blog__listing {
    padding: 40px 0 88px;
}

.pv-doc .pv-blog__list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
}

.pv-blog__item + .pv-blog__item {
    border-top: 1px solid var(--pv-line);
}

.pv-blog__item article {
    display: grid;
    grid-template-columns: 124px 1fr;
    column-gap: 28px;
    padding: 28px 32px;
}

/* --pv-ink2 et non --pv-ink3 : même mesure qu'en 18.4, ink3 descend à
   3,64:1 sur blanc. */
.pv-doc .pv-blog__date {
    margin: 0;
    padding-top: .45rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--pv-ink2);
    font-variant-numeric: tabular-nums;
}

.pv-blog__main {
    min-width: 0;
}

.pv-doc .pv-blog__t {
    font-size: clamp(1.28rem, 2vw, 1.52rem);
    line-height: 1.25;
    margin: 0 0 .5rem;
}

.pv-doc .pv-blog__t a {
    color: var(--pv-ink);
    text-decoration: none;
}

.pv-doc .pv-blog__t a:hover {
    color: var(--pv-green-d);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pv-doc .pv-blog__chapo {
    margin: 0 0 .75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pv-ink2);
}

.pv-doc .pv-blog__more {
    font-size: .95rem;
    font-weight: 600;
    color: var(--pv-green);
    text-decoration: none;
}

.pv-doc .pv-blog__more:hover {
    color: var(--pv-green-d);
}

/* Aucun article publié (2026-09-15) : le message prend le cadre de la liste,
   pour que la page vide garde la silhouette d'une page pleine. */
.pv-doc .pv-blog__empty {
    margin: 0;
    padding: 28px 32px;
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pv-ink2);
}

/* Pagination de l'index (partials/pv-pagination, 2026-09-15). Même langage
   que le précédent / suivant d'un article : cases blanches à filet, libellé
   en capitales à chasse fixe, filet vert au survol. Trois colonnes : plus
   anciens à gauche, état au centre, plus récents à droite ; une case vide
   garde sa place quand un côté manque. Une colonne sous 620 px, état en tête. */
.pv-pages {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 1.6rem 0 0;
}

.pv-doc .pv-pages__lien {
    display: block;
    padding: 14px 18px;
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    color: var(--pv-ink);
    text-decoration: none;
}

.pv-doc .pv-pages__lien:hover {
    border-color: var(--pv-green);
    color: var(--pv-green-d);
}

.pv-pages__lien--recents {
    grid-column: 3;
    text-align: right;
}

.pv-pages__l {
    font-family: "IBM Plex Mono", monospace;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pv-doc .pv-pages__etat {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: .78rem;
    color: var(--pv-ink2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 619px) {
    .pv-pages {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pv-pages__vide {
        display: none;
    }

    .pv-pages__lien--recents,
    .pv-doc .pv-pages__etat {
        grid-column: auto;
        grid-row: auto;
        text-align: center;
    }

    .pv-doc .pv-pages__etat {
        order: -1;
    }
}

@media (max-width: 619px) {
    .pv-blog__listing {
        padding: 28px 0 64px;
    }

    .pv-blog__item article {
        grid-template-columns: 1fr;
        padding: 22px 20px;
    }

    .pv-doc .pv-blog__date {
        padding-top: 0;
        margin-bottom: .35rem;
    }
}

/* 21.4 — L'ARTICLE : EN-TÊTE ET CORPS
   En-tête et corps sur le même fond blanc, séparés par un simple filet :
   le lecteur passe du titre au texte sans changer de bande. */
.pv-doc .pv-blog__meta {
    margin: .5rem 0 0;
    font-size: .95rem;
    color: var(--pv-ink2);
}

.pv-blog__body {
    padding: 0 0 88px;
}

.pv-blog__body .pv-blog__col {
    border-top: 1px solid var(--pv-line);
    padding-top: 2.6rem;
}

/* 21.5 — TYPOGRAPHIE DE LECTURE
   .pv-prose habille du HTML sans classe, tel que CKEditor l'écrit et
   qu'ArticleHtml le laisse passer. landing.css importe Tailwind et donc
   son preflight, qui retire puces, numéros et retraits des listes : ils
   sont reposés explicitement ici, sinon une liste numérotée d'étapes se lit
   comme des paragraphes collés. */
.pv-doc .pv-prose {
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--pv-ink);
}

.pv-doc .pv-prose > :first-child {
    margin-top: 0;
}

.pv-doc .pv-prose p {
    margin: 0 0 1.15rem;
}

.pv-doc .pv-prose h2 {
    font-size: clamp(1.4rem, 2.3vw, 1.72rem);
    line-height: 1.25;
    margin: 2.6rem 0 .8rem;
}

.pv-doc .pv-prose h3,
.pv-doc .pv-prose h4 {
    margin: 2rem 0 .6rem;
    font-size: 1.12rem;
}

.pv-doc .pv-prose ul,
.pv-doc .pv-prose ol {
    margin: 0 0 1.3rem;
    padding-left: 1.5rem;
}

.pv-doc .pv-prose ul {
    list-style: disc;
}

.pv-doc .pv-prose ol {
    list-style: decimal;
}

.pv-doc .pv-prose li {
    margin-bottom: .55rem;
    padding-left: .3rem;
}

.pv-doc .pv-prose li::marker {
    color: var(--pv-brass);
}

.pv-doc .pv-prose ol > li::marker {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pv-doc .pv-prose strong,
.pv-doc .pv-prose b {
    font-weight: 600;
}

/* Aucun des deux articles n'a de lien ni de citation aujourd'hui. Ces deux
   règles servent le prochain : CKEditor propose les deux boutons. !important
   sur color pour la raison donnée en 18.2 (cta-phone impose du blanc). */
.pv-doc .pv-prose a {
    color: var(--pv-green) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pv-doc .pv-prose blockquote {
    margin: 1.6rem 0;
    padding: 14px 18px;
    background: var(--pv-fill);
    border-left: 3px solid var(--pv-brass);
    border-radius: var(--pv-r);
}

.pv-doc .pv-prose blockquote p:last-child {
    margin-bottom: 0;
}

.pv-doc .pv-blog__back {
    margin: 3rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--pv-line);
}

.pv-doc .pv-blog__back a {
    font-weight: 600;
    color: var(--pv-green);
    text-decoration: none;
}

.pv-doc .pv-blog__back a:hover {
    color: var(--pv-green-d);
}

/* 21.5 bis — FIL D'ARIANE, CONTACT, PRÉCÉDENT / SUIVANT
   Ajoutés le 2026-09-14. */

/* Fil d'Ariane court, au-dessus du filet laiton. Le séparateur est en
   ::before : il ne se lit pas, ne se copie pas, et n'est pas un lien. */
.pv-doc .pv-crumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    font-size: .86rem;
    color: var(--pv-ink2);
}

.pv-doc .pv-crumb li + li::before {
    content: "›";
    margin: 0 .55rem;
    color: var(--pv-ink3);
}

.pv-doc .pv-crumb a {
    color: var(--pv-ink2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.pv-doc .pv-crumb a:hover {
    color: var(--pv-green-d);
    border-bottom-color: var(--pv-green);
}

/* Encadré de contact. Discret : fond papier, filet laiton, aucun bouton.
   Ses deux liens portent cta-phone et cta-primary, auxquelles landing.css
   donne un habillage de bouton (dégradé, bordure de 2 px, padding et, sous
   768 px, une taille de police) et une couleur en !important.
   body.pv .pv-blog__contact a = (0,2,2) l'emporte sur body.pv .cta-* (0,2,1)
   et sur .cta-* (0,1,0) ; la couleur reprend !important pour la raison
   donnée en 18.2. */
.pv-blog__contact {
    margin: 2.8rem 0 0;
    padding: 18px 20px;
    background: var(--pv-paper);
    border: 1px solid var(--pv-line);
    border-left: 3px solid var(--pv-brass);
    border-radius: var(--pv-r);
}

.pv-doc .pv-blog__contact p {
    margin: 0;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--pv-ink2);
}

.pv-doc .pv-blog__contact .pv-blog__contact-t {
    margin-bottom: .3rem;
    font-weight: 600;
    color: var(--pv-ink);
}

body.pv .pv-blog__contact a,
body.pv .pv-blog__contact a:hover {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
    font-size: inherit;
    font-weight: 600;
    color: var(--pv-green-d) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

body.pv .pv-blog__contact a:hover {
    color: var(--pv-green) !important;
}

/* Précédent / suivant. Deux cases ; le suivant est TOUJOURS dans la case de
   droite, même quand le précédent manque, pour que le sens de lecture ne
   dépende pas de la position de l'article dans la liste. Une colonne sous
   620 px. */
.pv-blog__pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 2.2rem 0 0;
}

.pv-doc .pv-blog__pn {
    display: block;
    padding: 16px 18px;
    background: var(--pv-white);
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    color: var(--pv-ink);
    text-decoration: none;
}

.pv-doc .pv-blog__pn:hover {
    border-color: var(--pv-green);
}

.pv-doc .pv-blog__pn:hover .pv-blog__pn-t {
    color: var(--pv-green-d);
}

.pv-blog__pn--next {
    grid-column: 2;
    text-align: right;
}

.pv-blog__pn-l {
    display: block;
    margin-bottom: .35rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pv-ink2);
}

.pv-blog__pn-t {
    display: block;
    font-family: "Spectral", Georgia, serif;
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.3;
}

@media (max-width: 619px) {
    .pv-blog__pager {
        grid-template-columns: 1fr;
    }

    .pv-blog__pn--next {
        grid-column: auto;
        text-align: left;
    }
}

/* 21.6 — IMPRESSION DE L'ARTICLE
   La section 20 fait déjà l'essentiel, parce que ses règles de chrome sont
   portées par body.pv et non par .pv-legal : barre du haut, navigation,
   pied de page, barre d'appel, widgets et bulles disparaissent, et le pied
   d'identification s'imprime par body.pv:not(:has(.pv-legal)) .pv-doc::after.
   Il reste à rendre la colonne à la page, à passer la typographie en points
   et à retirer le lien de retour, qui ne mène nulle part sur papier. */
@media print {
    .pv-blog__index,
    .pv-blog__col {
        max-width: none !important;
        margin: 0 !important;
    }

    .pv-doc .pv-blog h1 { font-size: 20pt; }

    .pv-doc .pv-blog__meta {
        color: #000 !important;
        font-size: 9.5pt;
        margin-bottom: 10pt;
    }

    .pv-blog__body .pv-blog__col {
        border-top: .5pt solid #666;
        padding-top: 10pt !important;
    }

    .pv-doc .pv-prose {
        font-size: 10.5pt;
        line-height: 1.5;
        color: #000 !important;
    }

    .pv-doc .pv-prose h2 {
        font-size: 13pt;
        margin: 14pt 0 5pt;
    }

    .pv-doc .pv-prose li {
        break-inside: avoid-page;
    }

    .pv-doc .pv-prose li::marker {
        color: #000;
    }

    /* Rien de cela ne mène nulle part sur papier. L'identification de la
       société, elle, s'imprime sous le texte (règle suivante). */
    .pv-blog__back,
    .pv-crumb,
    .pv-blog__contact,
    .pv-blog__pager {
        display: none !important;
    }

    /* LE PIED D'IDENTIFICATION REVIENT DANS LE FLUX, UNE FOIS, EN FIN
       D'ARTICLE. Même correction que les pages légales, voir 20.7 : posé en
       position:fixed, il faisait imprimer la dernière ligne de chaque
       feuille par-dessus lui. */
    body.pv:has(.pv-blog) .pv-doc::after {
        position: static;
        display: block;
        margin-top: 18pt;
    }
}