/* =====================================================
   WEDIVIO — SITE PUBLIC
   -----------------------------------------------------
   Refonte « luxe éditorial ».

   Trois partis pris tiennent toute la feuille :

   1. Le blanc n'est pas neutre. Il est chaud (ivoire, crème),
      parce qu'une page de mariage froide ressemble à un
      tableau de bord SaaS.
   2. Les titres sont en serif, le reste en sans. Le contraste
      des deux familles fait la moitié du travail : on n'a plus
      besoin de dégradés, de cartes ombrées ni de pastilles
      colorées pour hiérarchiser.
   3. Aucune ombre portée sur les blocs de contenu. Les blocs
      se séparent par un filet d'un pixel et par du vide. Une
      ombre n'est autorisée que sur ce qui flotte réellement :
      la maquette d'application et l'en-tête au défilement.

   L'or est un accent, jamais un aplat : filet, pastille, ou
   un seul mot dans un titre.

   Cette feuille est volontairement autonome : le site ne doit
   jamais hériter du thème d'une agence.
   ===================================================== */

/* Posé sur <html>, hors du conteneur : c'est le seul élément que
   `.wv-site` ne peut pas atteindre. Sans `scroll-padding`, un lien
   « #tarifs » dépose la section sous l'en-tête collant. */
html.wv-js {
    scroll-behavior: smooth;
    scroll-padding-top: clamp(84px, 12vh, 116px);
}
@media (prefers-reduced-motion: reduce) {
    html.wv-js { scroll-behavior: auto; }
}

.wv-site {

    /* -----------------------------------------------------
       Palette
       -----------------------------------------------------
       L'encre et l'or restent ceux du design system : c'est la
       marque. Les surfaces, elles, sont réchauffées — le gris
       bleuté d'origine (#F7F8FA) donnait un rendu « logiciel ».
       ----------------------------------------------------- */
    /* Le bleu nuit reste la marque, mais il ne porte plus aucune
       surface : il n'existe qu'en trait, en lien actif et en un mot
       de titre. C'est le seul changement structurant de la refonte —
       tout le reste en découle. */
    /* Brun quasi noir : la seule surface sombre du site, au pied
       de page. Ce n'est pas un noir pur — sur un écran, à côté
       d'un écru, le noir pur fait un trou. */
    --sombre:      #1F1A14;
    --sombre-2:    #2A241C;

    --nuit:        #0D132A;
    --nuit-2:      #16213F;   /* survol d'un lien actif */
    --nuit-3:      #3A4266;   /* accent doux, 9,1:1 sur écru */

    --or:          #C9A227;   /* filets, pastilles, aplats fins */
    --or-titre:    #9E8019;   /* grand texte sur crème — 3,3:1 */
    --or-texte:    #7F6712;   /* petit texte sur fond clair — 5,1:1 */
    --or-clair:    #E7D8A8;
    --or-voile:    #F6EFDF;

    /* L'écru remplace le blanc pur comme fond par défaut. Le blanc
       ne subsiste que là où il faut une rupture nette : cartouche
       d'un tarif, cadre d'écran, fond de la maquette. */
    --blanc:       #FAF7F2;   /* écru principal */
    --blanc-pur:   #FFFFFF;   /* réservé aux cartes et cadres */
    --ivoire:      #FAF7F2;
    --creme:       #F3EEE6;   /* sections alternées */
    --creme-2:     #EAE3D7;   /* filets sur crème */

    /* Quasi-noir chaud, jamais noir pur : sur un fond écru, un gris
       bleuté trahit immédiatement l'interface logicielle. */
    --encre:       #1C1A17;
    --encre-douce: #4C4740;
    --encre-tenue: #6B6559;   /* 5,4:1 sur écru — conforme AA */
    --bordure:     #E4DED2;
    --bordure-forte: #D6CDBC;
    --bordure-nuit: rgba(255, 255, 255, .18);

    --sur-nuit-fort:   rgba(255, 255, 255, .94);
    --sur-nuit:        rgba(255, 255, 255, .74);
    --sur-nuit-doux:   rgba(255, 255, 255, .62);
    --sur-nuit-tenu:   rgba(255, 255, 255, .50);
    --sur-nuit-faible: rgba(255, 255, 255, .38);

    --success-600: #16A34A; --success-50: #ECFDF3;
    --danger-600:  #B91C1C; --danger-50:  #FEF2F2;

    /* Alias hérités : d'anciens gabarits les utilisent encore. */
    --gris: var(--bordure);
    --gris-2: var(--creme);
    --ivoire-2: var(--creme);
    --surface-page: var(--ivoire);

    /* -----------------------------------------------------
       Typographie
       ----------------------------------------------------- */
    /* -----------------------------------------------------
       Le couple typographique
       -----------------------------------------------------
       Trois familles, pas deux, et c'est le troisième qui fait
       tout le travail :

         --titre            une grotesque géométrique, en
                            capitales largement espacées. Le
                            serif de départ (Cormorant) donnait
                            un rendu « faire-part » ; la même
                            phrase en Jost donne un rendu
                            « maison de couture ».
         --titre-italique   les mots de liaison — des, qui, sans —
                            restent en italique serif. Le choc
                            des deux dessins au milieu d'un même
                            titre est exactement ce qui empêche
                            l'épure de tomber dans le froid.
         --texte            Inter, discret, pour tout le reste.

       Les trois sont surchargeables depuis le Studio du site :
       ces valeurs ne sont qu'un point de départ. */
    --titre: 'Jost', 'Futura', 'Avenir Next', -apple-system, sans-serif;
    --titre-italique: 'Cormorant Garamond', Georgia, serif;
    --texte: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Réglages de titre pilotés par le Studio. Les valeurs par
       défaut reproduisent exactement le dessin d'origine, si bien
       qu'un site qui n'a jamais ouvert le Studio ne bouge pas. */
    --echelle-titres: 1;
    --titre-casse: uppercase;
    --titre-graisse: 300;
    --titre-interlettrage: .06em;

    /* -----------------------------------------------------
       Rythme
       -----------------------------------------------------
       Les sections respirent nettement plus qu'avant : c'est le
       principal levier du « moins d'infos, plus de luxe ».
       ----------------------------------------------------- */
    --max: 1180px;
    --max-etroit: 780px;
    --max-texte: 60ch;
    --section-y: clamp(96px, 11.5vw, 176px);

    /* -----------------------------------------------------
       Gouttière
       -----------------------------------------------------
       Marge intérieure du conteneur. Elle DOIT être une variable
       et non une valeur recopiée : les photographies à fond perdu
       sortent de la grille par `calc(-1 * var(--gouttiere))`. Si
       les deux nombres divergent, l'image ne touche plus le bord
       et le décalage se voit à l'œil nu.

       Elle manquait : `var(--gouttiere)` était employé à cinq
       endroits sans jamais être déclaré. Une variable inconnue
       rend la déclaration entière invalide, donc `margin-left`
       et `padding` retombaient à zéro — d'où les images qui ne
       débordaient plus et le hero collé au bord de la fenêtre.
       ----------------------------------------------------- */
    --gouttiere: clamp(20px, 5vw, 48px);

    --r-s: 0;
    --r-m: 0;
    --r-l: 0;

    /* Une seule ombre, réservée à ce qui flotte. */
    --ombre-s: 0 1px 2px rgba(20, 25, 43, .04);
    --ombre-m: 0 18px 48px -24px rgba(20, 25, 43, .22);
    --ombre-l: 0 40px 90px -40px rgba(20, 25, 43, .30);

    --t: 160ms cubic-bezier(.4, 0, .2, 1);
    --t-lent: 420ms cubic-bezier(.22, .61, .36, 1);

    /* Une seule courbe de sortie pour tout ce qui « arrive » :
       séquence du hero, révélations au défilement, cadrages
       d'image. Un mouvement identique partout se remarque moins
       qu'un mouvement varié — et c'est exactement l'effet
       recherché : on doit sentir la finition, pas l'animation. */
    --e-sortie: cubic-bezier(.16, 1, .3, 1);
    --t-reveal: 720ms;
    --t-image:  900ms;

    margin: 0;
    background: var(--ivoire);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 16.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wv-site *, .wv-site *::before, .wv-site *::after { box-sizing: border-box; }

/* :where() n'ajoute aucune spécificité : ces remises à zéro ne
   prennent jamais le pas sur une règle de composant. */
.wv-site :where(a) { color: inherit; text-decoration: none; }
.wv-site :where(p, h1, h2, h3, h4, figure, blockquote) { margin: 0; }
.wv-site :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.wv-site :where(img) { max-width: 100%; display: block; }
.wv-site :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wv-site ::selection { background: var(--or-voile); color: var(--nuit); }

.wv-site :where(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--or-titre);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.wv-leurre {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wv-skip {
    position: absolute; left: -9999px; top: 12px; z-index: 200;
    background: var(--nuit); color: #fff;
    padding: 12px 20px; font-size: 14px; letter-spacing: .02em;
}
.wv-skip:focus { left: 12px; }


/* =====================================================
   1. TYPOGRAPHIE
   -----------------------------------------------------
   Le titre EST la mise en page. Il occupe l'écran, il est en
   capitales serif, et des mots de liaison en bas-de-casse
   italique le traversent. Ce contraste capitales/italique
   remplace à lui seul tout ce qu'on aurait mis ailleurs :
   couleur d'accent, filet, pastille, icône.

   Corps de texte en sans-serif discret : petit, gris, très
   aéré. Il n'a pas à concurrencer le titre, il l'explique.
   ===================================================== */

.wv-site h1, .wv-site h2, .wv-site h3,
.wv-titre-2, .wv-titre-3 {
    font-family: var(--titre);
    font-weight: var(--titre-graisse, 300);
    text-transform: var(--titre-casse, uppercase);
    /* Une grotesque en capitales a besoin de beaucoup plus d'air
       qu'un serif : sans interlettrage, « PLATEFORME » se lit
       comme un bloc plein. C'est ce réglage, plus que le choix de
       la police, qui fait la différence entre une capitale de
       logiciel et une capitale de magazine. */
    letter-spacing: var(--titre-interlettrage, .06em);
    line-height: 1.04;
    color: var(--encre);
    font-variant-ligatures: common-ligatures;
    text-wrap: balance;
    /* Un titre ne sort jamais de sa colonne : « FONCTIONNALITÉS »
       ou « PLATEFORME » en capitales à 128 px dépassent la largeur
       d'un écran de portable. */
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Les trois rangs passent par `--echelle-titres`, que le Studio
   pilote depuis l'espace d'administration du site. La valeur 1
   correspond au réglage d'origine ; l'auteur du site peut donc
   grossir ou réduire toute la hiérarchie d'un seul curseur, sans
   que les rapports entre les rangs se déforment.

   Les plafonds ont été ramenés : à 128 px, « LA PLATEFORME DES
   WEDDING PLANNERS QUI ORCHESTRENT SANS IMPROVISER » occupait
   quatre lignes pleines et sortait de l'écran. */
.wv-site h1 {
    font-size: calc(clamp(34px, 5.6vw, 86px) * var(--echelle-titres, 1));
    line-height: 1.04;
    font-optical-sizing: auto;
}

.wv-titre-2, .wv-site h2 {
    font-size: calc(clamp(28px, 4.2vw, 60px) * var(--echelle-titres, 1));
    line-height: 1.08;
}

.wv-titre-3, .wv-site h3 {
    font-size: calc(clamp(20px, 2.2vw, 30px) * var(--echelle-titres, 1));
    line-height: 1.2;
}

/* Titre de moindre rang, quand une page en enchaîne plusieurs :
   même dessin, mais il ne cherche pas à remplir l'écran. */
.wv-titre-mesure { font-size: calc(clamp(26px, 3.2vw, 44px) * var(--echelle-titres, 1)); }

/* -----------------------------------------------------
   Les mots de liaison en italique
   -----------------------------------------------------
   « LA PLATEFORME *des* WEDDING PLANNERS » : l'italique
   revient en bas-de-casse au milieu des capitales. C'est ce
   qui donne le rythme manuscrit du modèle.

   `text-transform: none` est indispensable : sans lui, le
   `uppercase` du titre parent remonterait les mots de liaison
   en capitales et le contraste disparaîtrait entièrement.
   ----------------------------------------------------- */
.wv-site h1 em, .wv-site h2 em, .wv-site h3 em,
.wv-titre-2 em, .wv-titre-3 em, .wv-or {
    font-family: var(--titre-italique);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    color: inherit;
    /* L'italique serif est nettement plus étroite et plus basse
       que la capitale grotesque : on lui rend un peu de corps et
       un peu d'air, sans quoi elle disparaît au milieu du titre. */
    font-size: 1.12em;
    letter-spacing: 0;
    padding-right: .08em;
}

/* Le surtitre : capitales sans-serif, minuscules, très espacées.
   Aucun filet, aucune pastille — la référence n'en a pas. */
.wv-surtitre {
    display: block;
    font-family: var(--texte);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--encre-tenue);
    margin-bottom: 30px;
}

.wv-chapo {
    font-family: var(--texte);
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--encre-douce);
    max-width: 58ch;
    margin-top: 34px;
    text-wrap: pretty;
}

.wv-site p { font-size: 15.5px; line-height: 1.85; }

.wv-entete-section .wv-chapo { margin-top: 30px; }
.wv-entete-section.centre { text-align: center; }
.wv-entete-section.centre .wv-chapo { margin-left: auto; margin-right: auto; }
.wv-entete-section.centre .wv-surtitre { text-align: center; }
.wv-entete-section { margin-bottom: clamp(56px, 7vw, 104px); }


/* =====================================================
   2. STRUCTURE
   ===================================================== */

/* La valeur de la marge n'est plus écrite ici : c'est la même
   variable que celle dont les blocs à fond perdu se servent pour
   sortir de la grille. Une seule source, aucun décalage possible. */
.wv-conteneur {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gouttiere);
}

.wv-section { padding: var(--section-y) 0; background: var(--ivoire); }
.wv-section-ivoire { background: var(--creme); }
.wv-section-creme  { background: var(--creme); }

/* -----------------------------------------------------
   Bandeau photo — ce qui remplace l'aplat bleu nuit
   -----------------------------------------------------
   `.wv-section-nuit` ne peint plus de bleu : le nom est conservé
   parce qu'une dizaine de gabarits l'emploient, mais la règle
   dessine désormais une photographie voilée. Renommer la classe
   aurait obligé à toucher chaque page pour un résultat identique,
   et aurait laissé passer celles qu'on aurait oubliées.

   L'image se pose par `--wv-fond`, ce qui permet à chaque page de
   choisir la sienne sans une ligne de CSS supplémentaire. Sans
   image, le dégradé d'encre reste lisible : le bandeau ne dépend
   jamais d'un fichier qui manque.
   ----------------------------------------------------- */
.wv-section-nuit,
.wv-bandeau {
    position: relative;
    isolation: isolate;
    background: var(--nuit);
    color: var(--sur-nuit-fort);
    overflow: hidden;
}
.wv-section-nuit::before,
.wv-bandeau::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background-image: var(--wv-fond, none);
    background-size: cover;
    background-position: center 40%;
    /* Les photographies fournies sont naturelles ; on les désature
       d'un cran seulement, le temps qu'elles s'accordent à l'écru. */
    filter: saturate(.72) contrast(1.02);
}
/* Voile obligatoire : le brief interdit tout texte clair posé
   directement sur une photo (§3.3). Le dégradé est plus dense en
   bas, là où se trouvent le bouton et la mention légale. */
.wv-section-nuit::after,
.wv-bandeau::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg,
                rgba(28, 26, 23, .52) 0%,
                rgba(28, 26, 23, .62) 55%,
                rgba(28, 26, 23, .74) 100%);
}
.wv-section-nuit h1, .wv-section-nuit h2, .wv-section-nuit h3,
.wv-section-nuit .wv-titre-2, .wv-section-nuit .wv-titre-3,
.wv-bandeau h1, .wv-bandeau h2 { color: #fff; }
.wv-section-nuit .wv-chapo, .wv-bandeau .wv-chapo { color: var(--sur-nuit-fort); }
.wv-section-nuit .wv-surtitre, .wv-bandeau .wv-surtitre { color: var(--or-clair); }
.wv-section-nuit .wv-or, .wv-bandeau .wv-or { color: var(--or-clair); }
.wv-section-nuit .wv-entete-section.centre .wv-titre-2::after { background: var(--or); }

/* Deux colonnes texte / visuel. */
.wv-duo {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(48px, 7vw, 104px);
    align-items: center;
}
.wv-duo-inverse .wv-duo-texte { order: 2; }
.wv-duo-texte { min-width: 0; }


/* =====================================================
   3. EN-TÊTE
   ===================================================== */

.wv-entete {
    position: sticky; top: 0; z-index: 100;
    /* Transparent en haut de page, écru dès le premier défilement.
       Pas d'ombre : un filet d'un pixel suffit à décoller la barre,
       et une ombre dure sur un fond écru se voit comme une tache. */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t), background var(--t), backdrop-filter var(--t);
}
.wv-entete.defile {
    background: rgba(250, 247, 242, .92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--bordure);
}

/* Progression de lecture. C'est le seul élément de la page animé
   en continu, et on se l'autorise parce qu'il porte une
   information réelle : sur les pages longues (Fonctionnalités,
   Mentions légales), on sait où l'on en est. Un pixel d'or, posé
   sur le filet inférieur de l'en-tête. */
.wv-entete::after {
    content: "";
    position: absolute; left: 0; bottom: -1px;
    width: 100%; height: 1px;
    background: var(--or);
    transform: scaleX(var(--wv-progres, 0));
    transform-origin: left;
    opacity: 0;
    transition: opacity var(--t);
}
.wv-entete.defile::after { opacity: .9; }

.wv-entete-inner {
    display: flex; align-items: center;
    /* Plafonné à 24 px : au-delà, sur un écran large, les écarts
       continuaient de croître avec la fenêtre alors que le conteneur,
       lui, est bloqué à 1180 px. La barre redébordait donc au-dessus
       de 1400 px, après avoir cessé de déborder en dessous. */
    gap: clamp(16px, 2vw, 24px);
    height: 82px;
    transition: height var(--t-lent);
}
/* L'en-tête se resserre dès qu'on quitte le haut de page : quatorze
   pixels rendus au contenu, et le geste se sent sans se voir. */
.wv-entete.defile .wv-entete-inner { height: 68px; }

/* La barre a besoin de plus que les 1180 px du conteneur de
   contenu : logo + cinq entrées en capitales espacées + langue +
   connexion + bouton demandent environ 1250 px. À 1180, « À PROPOS »
   passait par-dessus « FR EN ». Le contenu, lui, garde sa mesure. */
.wv-entete .wv-conteneur { max-width: 1440px; }

.wv-entete-marque { display: flex; align-items: center; flex: 0 0 auto; }
.wv-logo-image { height: 32px; width: auto; }

.wv-nav {
    display: flex; align-items: center;
    /* Six entrées, un sélecteur de langue, un lien de connexion et un
       bouton doivent tenir sur une ligne. L'écart fixe de 32 px les y
       obligeait par la force : passé sous 1100 px, la barre débordait
       et se repliait. Il se resserre désormais avec la fenêtre. */
    gap: clamp(15px, 2.2vw, 24px);
    margin-left: auto;
    min-width: 0;
}
.wv-nav a {
    /* Minuscules et interlettrage large : la navigation cesse de
       s'annoncer comme un menu de logiciel. Le `lowercase` est posé
       en CSS et non dans le contenu, pour que les intitulés restent
       correctement capitalisés partout ailleurs — pied de page,
       fil d'Ariane, titre d'onglet. */
    font-size: 11.5px;
    color: var(--encre-douce);
    text-transform: uppercase;
    letter-spacing: .2em;
    padding: 6px 0;
    position: relative;
    /* « Pour les couples » et « À propos » se coupaient en deux au
       milieu de la barre : deux entrées de menu sur deux lignes
       chacune, et l'en-tête doublait de hauteur. Un intitulé de
       navigation ne se coupe jamais. */
    white-space: nowrap;
    transition: color var(--t);
}
/* Le filet entre par la gauche et sort par la droite : le
   mouvement suit le sens de lecture au lieu de se replier sur
   lui-même. */
.wv-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--nuit);
    transform: scaleX(0); transform-origin: right;
    transition: transform 280ms var(--e-sortie);
}
.wv-nav a:hover, .wv-nav a.actif { color: var(--nuit); }
.wv-nav a:hover::after, .wv-nav a.actif::after {
    transform: scaleX(1); transform-origin: left;
}

/* Lien de connexion réservé au menu mobile : sur petit écran,
   `.wv-lien-discret` disparaît de la barre faute de place, et
   l'entrée « Connexion » n'était plus atteignable que depuis le
   pied de page. */
.wv-nav-connexion { display: none; }
.wv-nav a.actif { color: var(--nuit); }

.wv-entete-actions {
    display: flex; align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    flex: 0 0 auto;
    /* Elle passe devant la navigation : si un intitulé traduit
       s'allonge au point de déborder, il glisse dessous plutôt
       que de venir se superposer au sélecteur de langue. */
    position: relative; z-index: 2;
    background: inherit;
}
.wv-lien-discret {
    font-size: clamp(13.5px, 1.15vw, 14.5px); color: var(--encre-douce);
    white-space: nowrap;
    transition: color var(--t);
}
.wv-lien-discret:hover { color: var(--nuit); }

/* Sélecteur de langue.
   -----------------------------------------------------
   Il n'était stylé que dans style.css, la feuille de
   l'application. Sur le site public, qui ne charge que
   site.css, les deux liens se touchaient : « FR » et « EN »
   se lisaient « FREN ». */
.wv-entete-actions .lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.wv-entete-actions .lang-switch-item {
    font-size: 12px; font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    padding: 6px 8px;
    border-radius: var(--r-s);
    color: var(--encre-tenue);
    transition: background var(--t), color var(--t);
}
.wv-entete-actions .lang-switch-item:hover { background: var(--creme); color: var(--nuit); }
.wv-entete-actions .lang-switch-item.active { background: var(--or-voile); color: var(--or-texte); }

.wv-burger {
    display: none; width: 40px; height: 40px;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.wv-burger span {
    display: block; width: 19px; height: 1px; background: var(--nuit);
    transition: transform 240ms var(--e-sortie), opacity 160ms;
}
/* Le bouton dit ce qu'il fera : trois traits deviennent une croix. */
.wv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.wv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* =====================================================
   4. BOUTONS
   -----------------------------------------------------
   Un rectangle, un filet d'un pixel, des capitales espacées.
   Pas de fond plein, pas d'arrondi, pas d'ombre. Au survol,
   le fond s'encre et le texte passe en écru — c'est la seule
   animation autorisée.
   ===================================================== */

.wv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 44px;
    font-family: var(--texte);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--encre);
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
    white-space: nowrap;
}

/* Le bouton « principal » et le « secondaire » ont exactement le
   même dessin. La hiérarchie se joue à la place dans la page, pas
   à la couleur : la référence ne distingue jamais deux boutons. */
.wv-btn-or,
.wv-btn-ligne,
.wv-btn-nuit {
    background: transparent;
    color: var(--encre);
    border-color: var(--encre);
}
.wv-btn-or:hover,
.wv-btn-ligne:hover,
.wv-btn-nuit:hover {
    background: var(--encre);
    color: var(--ivoire);
    border-color: var(--encre);
}

.wv-btn-large { padding: 24px 52px; font-size: 12.5px; }
/* Dans la barre de navigation, le bouton doit tenir sur 68 px de
   hauteur : il garde le dessin, il perd la respiration. */
.wv-entete .wv-btn { padding: 13px 24px; font-size: 10.5px; letter-spacing: .16em; }
.wv-btn-petit { padding: 16px 30px; font-size: 11px; letter-spacing: .18em; }
.wv-btn-large svg, .wv-btn svg { display: none; }

/* Sur une photographie : filet et texte blancs, remplissage
   inverse au survol. */
.wv-sur-photo .wv-btn,
.wv-bandeau .wv-btn,
.wv-section-nuit .wv-btn,
.wv-hero-plein .wv-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}
.wv-sur-photo .wv-btn:hover,
.wv-bandeau .wv-btn:hover,
.wv-section-nuit .wv-btn:hover,
.wv-hero-plein .wv-btn:hover {
    background: #fff;
    color: var(--encre);
    border-color: #fff;
}

/* -----------------------------------------------------
   Lien souligné
   -----------------------------------------------------
   Le seul appel secondaire. Capitales espacées comme le
   bouton, mais sans cadre : un simple filet sous le texte.
   ----------------------------------------------------- */
.wv-lien-souligne {
    display: inline-block;
    font-family: var(--texte);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--encre);
    border-bottom: 1px solid var(--bordure-forte);
    padding-bottom: 8px;
    transition: border-color var(--t);
}
.wv-lien-souligne:hover { border-color: var(--encre); }

.wv-sur-photo .wv-lien-souligne,
.wv-bandeau .wv-lien-souligne,
.wv-section-nuit .wv-lien-souligne {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
.wv-sur-photo .wv-lien-souligne:hover,
.wv-bandeau .wv-lien-souligne:hover,
.wv-section-nuit .wv-lien-souligne:hover { border-color: #fff; }


/* =====================================================
   5. HERO
   -----------------------------------------------------
   Photographie plein écran, titre superposé. Le titre est
   centré et occupe la largeur du texte, pas celle de la page :
   au-delà, les capitales serif deviennent illisibles.

   `100svh` et non `100vh` : sur mobile, `vh` compte la barre
   d'adresse du navigateur, et le bouton se retrouvait sous le
   pli au chargement.
   ===================================================== */

.wv-hero-plein {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(120px, 16vh, 200px) 0 clamp(64px, 10vh, 120px);
    overflow: hidden;
    background: var(--encre);
}
/* Le repli `.wv-photo-absente` DOIT être listé ici avec l'image.
   Sans lui, quand la photographie manque, le <span> de repli reste
   un enfant du flex : il occupait la moitié gauche du hero et
   poussait le titre vers la droite. Le titre paraissait « pas
   centré » alors qu'il était parfaitement centré dans la place
   qu'on lui laissait. */
.wv-hero-plein > img,
.wv-hero-plein > picture,
.wv-hero-plein > .wv-photo-absente {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
}
/* Rayures à peine perceptibles sur l'encre : la géométrie du hero
   est conservée sans que le repli se donne en spectacle. */
.wv-hero-plein > .wv-photo-absente { opacity: .06; }
.wv-hero-plein > img,
.wv-hero-plein picture img {
    width: 100%; height: 100%; object-fit: cover;
    /* Noir et blanc assombri, comme le bandeau de la référence.
       Ce n'est pas qu'une intention graphique : c'est ce qui rend
       le contraste du titre indépendant de la photographie
       choisie. Sans ce filtre, un cliché clair faisait tomber le
       texte à 2,6:1 au milieu du dégradé. */
    filter: grayscale(1) brightness(.72);
}
/* Voile obligatoire : aucun texte clair ne se pose directement
   sur une photographie. Plus dense en haut et en bas, là où se
   trouvent la barre de navigation et le bouton. */
.wv-hero-plein::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg,
                rgba(20, 17, 13, .58) 0%,
                rgba(20, 17, 13, .52) 42%,
                rgba(20, 17, 13, .68) 100%);
}
.wv-hero-plein h1 { color: #fff; }
.wv-hero-plein .wv-chapo {
    color: rgba(255, 255, 255, .90);
    margin-left: auto; margin-right: auto;
    max-width: 54ch;
}
.wv-hero-plein .wv-surtitre { color: rgba(255, 255, 255, .72); }

.wv-hero-contenu {
    /* `width: 100%` et `min-width: 0` : dans un conteneur flex, un
       bloc sans largeur se dimensionne sur son contenu. Le titre
       étant volontairement énorme, il débordait à droite au lieu
       de se replier. */
    width: 100%;
    min-width: 0;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--gouttiere);
}
.wv-hero-actions {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 22px 34px;
    margin-top: clamp(40px, 5vh, 62px);
}

/* Hero de page intérieure : même dessin, sans photographie et
   sans plein écran. Les capitales portent la page seules. */
.wv-hero, .wv-hero-court {
    background: var(--ivoire);
    padding: clamp(150px, 19vh, 250px) 0 clamp(56px, 7vw, 96px);
    text-align: center;
}
.wv-hero-intro, .wv-hero-court .wv-entete-section {
    max-width: 1080px; margin: 0 auto; text-align: center;
}
.wv-hero .wv-chapo, .wv-hero-court .wv-chapo {
    margin-left: auto; margin-right: auto;
}
.wv-hero-legende {
    font-family: var(--titre);
    font-style: italic;
    text-transform: none;
    font-size: clamp(19px, 2vw, 26px);
    color: var(--encre-tenue);
    text-align: center;
    margin-top: 24px;
}


/* =====================================================
   6. BLOC IMAGE / TEXTE
   -----------------------------------------------------
   Le composant principal du site. Une photographie qui touche
   le bord de l'écran d'un côté, du texte de l'autre, et rien
   entre les deux. Une ligne sur deux s'inverse.

   L'image sort de la grille par une marge négative calculée
   sur la gouttière plutôt qu'avec `100vw` : `100vw` compte la
   barre de défilement et provoque un débordement horizontal
   sur Windows.
   ===================================================== */

.wv-blocs { display: grid; }

.wv-bloc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
    padding: clamp(72px, 9vw, 150px) 0;
}
.wv-bloc-visuel { position: relative; min-width: 0; align-self: stretch; }
.wv-bloc-visuel img {
    width: 100%; height: 100%;
    min-height: clamp(380px, 62vh, 760px);
    object-fit: cover;
    display: block;
}
/* L'image du haut touche le bord gauche, celle du bas le bord
   droit, et ainsi de suite. */
.wv-bloc:nth-child(odd)  .wv-bloc-visuel { margin-left: calc(-1 * var(--gouttiere)); }
.wv-bloc:nth-child(even) .wv-bloc-visuel { margin-right: calc(-1 * var(--gouttiere)); order: 2; }

.wv-bloc-texte { max-width: 46ch; }
.wv-bloc:nth-child(even) .wv-bloc-texte { order: 1; }
.wv-bloc-texte .wv-btn, .wv-bloc-texte .wv-lien-souligne { margin-top: 42px; }

@media (max-width: 900px) {
    .wv-bloc {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: clamp(56px, 9vw, 88px) 0;
    }
    /* En une colonne, l'image repasse systématiquement au-dessus
       du texte, quelle que soit la parité de la ligne. */
    .wv-bloc:nth-child(even) .wv-bloc-visuel,
    .wv-bloc:nth-child(odd)  .wv-bloc-visuel { order: -1; }
    .wv-bloc:nth-child(even) .wv-bloc-texte  { order: 0; }
    .wv-bloc-visuel {
        margin-left: calc(-1 * var(--gouttiere)) !important;
        margin-right: calc(-1 * var(--gouttiere)) !important;
    }
    .wv-bloc-visuel img { min-height: clamp(300px, 46vh, 460px); }
    .wv-bloc-texte { max-width: none; }
}


/* =====================================================
   7. BANDEAU PHOTOGRAPHIQUE
   -----------------------------------------------------
   Photographie pleine largeur, texte centré par-dessus.
   Remplace tous les aplats de couleur du site : il n'y a plus
   une seule section peinte en bleu nuit.
   ===================================================== */

.wv-bandeau, .wv-section-nuit, .wv-cta-final {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--encre);
    color: #fff;
    text-align: center;
    padding: clamp(110px, 16vw, 220px) 0;
}
.wv-bandeau::before, .wv-section-nuit::before, .wv-cta-final::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background-image: var(--wv-fond, none);
    background-size: cover;
    background-position: center 45%;
    filter: grayscale(1) contrast(1.05);
}
.wv-bandeau::after, .wv-section-nuit::after, .wv-cta-final::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: rgba(20, 17, 13, .62);
}
.wv-bandeau h2, .wv-section-nuit h2, .wv-cta-final h2,
.wv-bandeau h1, .wv-section-nuit h1 { color: #fff; }
.wv-bandeau .wv-chapo, .wv-section-nuit .wv-chapo, .wv-cta-final p {
    color: rgba(255, 255, 255, .88);
    margin-left: auto; margin-right: auto;
    max-width: 56ch;
}
.wv-bandeau .wv-surtitre, .wv-section-nuit .wv-surtitre {
    color: rgba(255, 255, 255, .68);
}
.wv-cta-actions {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 22px 34px;
    margin-top: clamp(40px, 5vw, 62px);
}


/* =====================================================
   8. TARIFS TYPOGRAPHIQUES
   -----------------------------------------------------
   Les cartes de prix ont disparu. Reste une liste réglée :
   le nom de la formule en capitales serif, le prix en grand
   à droite, un filet entre chaque ligne. C'est la même
   information, sans le mobilier.
   ===================================================== */

.wv-tarifs { display: block; border: 0; background: transparent; }

/* Deux colonnes franches : tout le discours à gauche, le prix
   seul à droite. L'ancienne version mélangeait les deux sur une
   ligne de base commune, avec les inclusions étalées en une seule
   rangée séparée par des tirets — d'où une page de tarifs qu'on
   ne pouvait pas lire en diagonale, ce qui est pourtant la seule
   façon dont on lit une page de tarifs. */
.wv-tarif-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    align-items: start;
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: 0;
    padding: clamp(40px, 4.6vw, 68px) 0;
    border-top: 1px solid var(--bordure);
}
.wv-tarif-ligne:last-child { border-bottom: 1px solid var(--bordure); }

.wv-tarif-nom {
    grid-column: 1;
    font-family: var(--titre);
    font-weight: var(--titre-graisse, 300);
    letter-spacing: var(--titre-interlettrage, .06em);
    text-transform: var(--titre-casse, uppercase);
    font-size: calc(clamp(22px, 2.4vw, 34px) * var(--echelle-titres, 1));
    line-height: 1.1;
    color: var(--encre);
}

/* Le prix occupe sa propre colonne et reste aligné sur la
   première ligne du nom : l'œil descend la colonne de droite
   sans jamais avoir à revenir en arrière. */
.wv-tarif-prix {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    text-align: right;
    font-family: var(--titre);
    font-size: calc(clamp(24px, 2.6vw, 38px) * var(--echelle-titres, 1));
    line-height: 1.05;
    color: var(--encre);
    white-space: nowrap;
}
.wv-tarif-prix small {
    display: block;
    font-family: var(--texte);
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--encre-tenue);
    margin-top: 12px;
    white-space: normal;
}

.wv-tarif-desc {
    grid-column: 1;
    max-width: 46ch;
    margin-top: 14px;
    font-size: 15px;
    color: var(--encre-douce);
}

/* Les inclusions : une vraie liste, deux colonnes, un tiret d'or
   en puce. Elles étaient rangées côte à côte sur une seule ligne,
   séparées par des filets — six intitulés se lisaient alors comme
   une phrase unique et interminable. */
.wv-tarif-inclus {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 2px clamp(32px, 4vw, 64px);
    margin-top: clamp(26px, 3vw, 38px);
    font-size: 14px;
    color: var(--encre-douce);
}
.wv-tarif-inclus li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: baseline;
    gap: 0;
    padding: 7px 0;
}
.wv-tarif-inclus li::before {
    content: "";
    width: 9px; height: 1px;
    background: var(--or);
    transform: translateY(-4px);
}

.wv-tarif-ligne .wv-lien-souligne {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: clamp(28px, 3.4vw, 42px);
}

/* Formule mise en avant : un filet d'or à gauche et rien d'autre.
   Pas de carte, pas de fond, pas d'étiquette « populaire ». */
.wv-tarif-ligne.wv-tarif-phare {
    border-left: 2px solid var(--or);
    padding-left: clamp(22px, 3vw, 40px);
}

@media (max-width: 760px) {
    .wv-tarif-ligne { grid-template-columns: 1fr; }
    .wv-tarif-prix {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        text-align: left;
        margin-top: 18px;
    }
    .wv-tarif-inclus { grid-template-columns: 1fr; }
}
    .wv-tarif-prix { margin-top: 14px; }
}


/* =====================================================
   9. LISTE RÉGLÉE
   -----------------------------------------------------
   Ce qui remplace les grilles de cartes à icônes : un intitulé
   en capitales serif, une explication en dessous, un filet
   entre chaque. Deux colonnes au maximum, jamais quatre.
   ===================================================== */

.wv-liste-reglee {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 0 clamp(48px, 6vw, 96px);
}
.wv-liste-reglee > li { padding: clamp(32px, 3.6vw, 50px) 0; border-top: 1px solid var(--bordure); }
.wv-liste-reglee b {
    display: block;
    font-family: var(--titre);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(19px, 1.9vw, 25px);
    letter-spacing: .012em;
    color: var(--encre);
    margin-bottom: 16px;
}
.wv-liste-reglee span { display: block; color: var(--encre-douce); }

/* L'ancienne liste à icônes retombe sur le même dessin : les
   gabarits qui l'utilisent encore n'affichent plus de pictogramme. */
.wv-liste-detail { display: grid; gap: 0; }
.wv-liste-detail li {
    display: block;
    padding: clamp(26px, 3vw, 40px) 0;
    border-top: 1px solid var(--bordure);
}
.wv-liste-detail svg { display: none; }
.wv-liste-detail b {
    display: block;
    font-family: var(--titre); font-weight: 400; text-transform: uppercase;
    font-size: clamp(18px, 1.8vw, 23px); letter-spacing: .012em;
    color: var(--encre); margin-bottom: 14px;
}
.wv-liste-detail span { display: block; color: var(--encre-douce); }


/* =====================================================
   10. ÉTAPES
   -----------------------------------------------------
   Le numéro devient un grand chiffre serif en filigrane, à la
   place de la pastille ronde numérotée.
   ===================================================== */

.wv-etapes { display: grid; }
.wv-etape {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(28px, 4vw, 70px);
    align-items: start;
    padding: clamp(38px, 4.4vw, 62px) 0;
    border-top: 1px solid var(--bordure);
}
.wv-etape-numero {
    font-family: var(--titre);
    font-size: clamp(34px, 4.4vw, 66px);
    line-height: .9;
    color: var(--bordure-forte);
}
.wv-etape h3 { margin-bottom: 16px; }
.wv-etape p { color: var(--encre-douce); max-width: 62ch; }


/* =====================================================
   11. TÉMOIGNAGE
   -----------------------------------------------------
   Photographie carrée à gauche, citation à droite, flèches
   aux extrémités de l'écran. Le nom du couple sert de titre.
   ===================================================== */

.wv-temoignages { position: relative; }
.wv-temoignages-piste {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.wv-temoignages-piste::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
    .wv-temoignages-piste { scroll-behavior: auto; }
}

.wv-temoignage {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(40px, 6vw, 110px);
    padding: 0 clamp(0px, 4vw, 64px);
}
.wv-temoignage-photo { aspect-ratio: 1 / 1; overflow: hidden; }
.wv-temoignage-photo img { width: 100%; height: 100%; object-fit: cover; }
.wv-temoignage-nom {
    font-family: var(--titre);
    font-weight: 400; text-transform: uppercase;
    font-size: clamp(21px, 2.4vw, 34px);
    letter-spacing: .012em;
    color: var(--encre);
    margin-bottom: 34px;
}
.wv-temoignage blockquote p { color: var(--encre-douce); }
.wv-temoignage blockquote p + p { margin-top: 22px; }
/* Les passages saillants sont en gras italique, comme dans la
   référence : la citation se lit alors en diagonale. */
.wv-temoignage blockquote strong { font-weight: 600; font-style: italic; color: var(--encre); }

.wv-temoignages-pilotage { position: static; }
.wv-temoignages-pilotage button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    color: var(--encre);
    transition: opacity var(--t);
}
.wv-temoignages-pilotage button svg { width: 30px; height: 30px; stroke-width: 1; display: block; }
.wv-temoignages-pilotage button[data-sens="-1"] { left: 0; }
.wv-temoignages-pilotage button[data-sens="1"]  { right: 0; }
.wv-temoignages-pilotage button[disabled] { opacity: .18; cursor: default; }

@media (max-width: 900px) {
    .wv-temoignage { grid-template-columns: 1fr; gap: 32px; }
    .wv-temoignages-pilotage button { position: static; transform: none; border: 1px solid var(--bordure-forte); }
    .wv-temoignages-pilotage {
        display: flex; justify-content: center; gap: 16px; margin-top: 32px;
    }
}


/* =====================================================
   12. FAQ
   -----------------------------------------------------
   Intitulé en capitales espacées, un « + » à droite, un filet
   dessous. Aucun fond, aucun cadre, aucune bordure latérale.
   ===================================================== */

.wv-faq { max-width: 880px; margin: 0 auto; }
.wv-faq details { border-bottom: 1px solid var(--bordure-forte); }
.wv-faq summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px;
    padding: 30px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--texte);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--encre);
    transition: color var(--t);
}
.wv-faq summary::-webkit-details-marker { display: none; }
.wv-faq summary:hover { color: var(--encre-tenue); }
/* Le « + » devient « − » à l'ouverture. Dessiné en contenu
   généré : pas d'icône, donc rien à charger. */
.wv-faq summary::after {
    content: "+";
    font-family: var(--texte);
    font-size: 20px; font-weight: 300;
    line-height: 1;
    color: var(--encre-tenue);
    flex: 0 0 auto;
}
.wv-faq details[open] summary::after { content: "\2212"; }
.wv-faq details p {
    padding: 0 0 34px;
    max-width: 68ch;
    color: var(--encre-douce);
}


/* =====================================================
   13. BANDE INSTAGRAM
   -----------------------------------------------------
   Six vignettes carrées bord à bord, juste au-dessus du pied
   de page, sans marge ni gouttière.
   ===================================================== */

.wv-instagram {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}
.wv-instagram a, .wv-instagram figure { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.wv-instagram img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--t-lent) var(--e-sortie);
}
@media (hover: hover) { .wv-instagram a:hover img { transform: scale(1.04); } }
@media (max-width: 900px) { .wv-instagram { grid-template-columns: repeat(3, 1fr); } }


/* =====================================================
   14. PIED DE PAGE
   -----------------------------------------------------
   La seule surface sombre du site, et elle arrive en dernier :
   après une page entière d'écru, elle ferme la lecture au lieu
   de l'interrompre. Intitulés de colonne en capitales serif,
   liens soulignés et centrés, comme dans la référence.
   ===================================================== */

.wv-pied {
    background: var(--sombre);
    color: rgba(255, 255, 255, .72);
    padding: clamp(80px, 10vw, 130px) 0 44px;
    font-size: 14px;
    border-top: 0;
}
.wv-pied-haut {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: clamp(48px, 6vw, 80px);
    padding-bottom: 60px;
    text-align: center;
}
/* `display: contents` fait remonter les colonnes dans la grille
   du parent : sans lui, les cinq nav se tasseraient dans une
   seule cellule à côté de la marque. */
.wv-pied-colonnes { display: contents; }
.wv-pied-marque { grid-column: 1 / -1; }
.wv-pied-marque p {
    margin: 26px auto 0;
    font-family: var(--texte);
    font-style: normal;
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .66);
    max-width: 62ch;
}
.wv-pied-colonne h2, .wv-pied-colonne b {
    display: block;
    font-family: var(--titre);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: clamp(20px, 2vw, 30px);
    color: #fff;
    margin-bottom: 26px;
}
.wv-pied-colonne a {
    display: block;
    padding: 7px 0;
    color: rgba(255, 255, 255, .74);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, .32);
    transition: color var(--t), text-decoration-color var(--t);
}
.wv-pied-colonne a:hover { color: #fff; text-decoration-color: #fff; }

.wv-pied-bas {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 16px 28px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    text-align: center;
}
.wv-pied-mentions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px; }
.wv-pied-mentions a { transition: color var(--t); }
.wv-pied-mentions a:hover { color: #fff; }
.wv-pied .wv-logo-texte, .wv-pied svg { color: #fff; }


/* =====================================================
   15. PHOTOGRAPHIES
   -----------------------------------------------------
   Ce qui reste après suppression des sections « maquette
   d'application », « aperçu du portail » et « blocs des pages
   intérieures » : le site ne montre plus une seule capture
   d'écran, plus un seul tableau comparatif, plus une seule
   grille de cartes à icônes. Il ne reste que des photographies.
   ===================================================== */

.wv-photo {
    position: relative;
    overflow: hidden;
    background: var(--creme);
    border-radius: 0;
}
.wv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Photographie qui traverse toute la largeur de la fenêtre. */
/* La légende était posée en `position: absolute` au bas de la
   figure. Tant qu'elle tenait dans la hauteur de la photographie,
   tout allait bien ; dès qu'un titre passait à trois lignes, elle
   débordait vers le haut et `overflow: hidden` lui coupait les
   premiers mots.

   La figure est maintenant une grille d'une seule cellule où la
   photographie et la légende se superposent. La hauteur de la
   ligne est celle du plus grand des deux : la légende ne peut
   donc plus être coupée, quelle que soit sa longueur. */
.wv-photo-pleine {
    position: relative;
    display: grid;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: auto; max-width: 100vw;
    overflow: hidden;
    background: var(--creme);
}
.wv-photo-pleine > img,
.wv-photo-pleine > picture,
.wv-photo-pleine > .wv-photo-absente,
.wv-photo-pleine > figcaption {
    grid-area: 1 / 1;
}
.wv-photo-pleine > img,
.wv-photo-pleine picture img {
    width: 100%;
    height: 100%;
    min-height: clamp(360px, 62vh, 780px);
    object-fit: cover; display: block;
}

/* Repli quand le fichier manque : un aplat écru rayé, jamais
   l'icône d'image cassée du navigateur. La géométrie de la page
   reste identique, ce qui permet de travailler les gabarits
   avant que la banque d'images soit complète. */
.wv-photo-absente {
    display: block;
    width: 100%; height: 100%;
    min-height: 320px;
    background: repeating-linear-gradient(135deg,
                var(--creme) 0 14px, var(--ivoire) 14px 28px);
}
.wv-photo-pleine .wv-photo-absente { height: clamp(360px, 62vh, 780px); }
.wv-bloc-visuel .wv-photo-absente { min-height: clamp(380px, 62vh, 760px); }

/* Légende posée en bas d'une photographie pleine largeur.
   `align-self: end` la colle au bas de la cellule, comme le
   faisait `inset: auto 0 0 0`, mais sans la sortir du flux :
   si elle est plus haute que la photo, c'est la figure qui
   grandit. La marge haute laisse le dégradé s'installer avant
   le premier mot. */
.wv-photo-legende-bas {
    align-self: end;
    padding: clamp(96px, 14vw, 200px) 0 clamp(32px, 5vw, 80px);
    background: linear-gradient(0deg,
                rgba(20, 17, 13, .70) 0%,
                rgba(20, 17, 13, .30) 60%,
                rgba(20, 17, 13, 0) 100%);
    color: #fff;
    text-align: center;
}
.wv-photo-legende-bas h2 { color: #fff; }
.wv-photo-legende-bas p {
    color: rgba(255, 255, 255, .88);
    max-width: 54ch; margin: 26px auto 0;
}
.wv-photo-legende-bas .wv-surtitre { color: rgba(255, 255, 255, .7); }

/* Mosaïque asymétrique — page Univers. */
.wv-mosaique { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.wv-mosaique figure { overflow: hidden; background: var(--creme); }
.wv-mosaique img { width: 100%; height: 100%; object-fit: cover; }
.wv-mosaique .m1 { grid-column: span 4; aspect-ratio: 4 / 3; }
.wv-mosaique .m2 { grid-column: span 2; aspect-ratio: 3 / 4; }
.wv-mosaique .m3 { grid-column: span 2; aspect-ratio: 3 / 4; }
.wv-mosaique .m4 { grid-column: span 4; aspect-ratio: 4 / 3; }
@media (max-width: 720px) {
    .wv-mosaique { grid-template-columns: repeat(2, 1fr); }
    .wv-mosaique .m1, .wv-mosaique .m4 { grid-column: span 2; }
    .wv-mosaique .m2, .wv-mosaique .m3 { grid-column: span 1; }
}


/* =====================================================
   18. FORMULAIRES
   ===================================================== */

.wv-demo-grille {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}
.wv-demo-atouts { margin-top: 34px; }
.wv-demo-atout {
    display: flex; gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bordure);
}
.wv-demo-atout:first-child { border-top: 1px solid var(--bordure); }
.wv-demo-atout svg { color: var(--or); flex: 0 0 auto; margin-top: 4px; }
.wv-demo-atout b { display: block; font-size: 15px; font-weight: 600; }
.wv-demo-atout span { display: block; font-size: 14px; color: var(--encre-tenue); margin-top: 3px; }

.wv-formulaire {
    background: var(--blanc-pur);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    padding: clamp(26px, 3.4vw, 44px);
}
.wv-champs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}
.wv-champ { display: flex; flex-direction: column; gap: 8px; }
.wv-champ-large { grid-column: 1 / -1; }
.wv-champ label {
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--encre-tenue);
}
.wv-champ input, .wv-champ select, .wv-champ textarea {
    font-family: var(--texte); font-size: 15px; color: var(--encre);
    background: var(--blanc-pur);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-s);
    padding: 12px 14px;
    width: 100%;
    transition: border-color var(--t), box-shadow var(--t);
}
.wv-champ textarea { min-height: 116px; resize: vertical; }
/* Halo d'or de trois pixels : le champ actif se voit d'un coup
   d'œil sur un formulaire de huit champs, sans bordure épaissie
   qui ferait sauter la ligne de base. */
.wv-champ input:focus, .wv-champ select:focus, .wv-champ textarea:focus {
    border-color: var(--or); outline: none;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .14);
}
.wv-champ input::placeholder, .wv-champ textarea::placeholder { color: #A9A79F; }
.wv-erreur { font-size: 12.5px; color: var(--danger-600); }
.wv-formulaire .wv-btn { width: 100%; margin-top: 24px; }
.wv-formulaire-mention {
    margin-top: 16px; font-size: 12.5px; color: var(--encre-tenue); text-align: center;
}

.wv-message {
    padding: 20px 24px;
    border-radius: var(--r-m);
    font-size: 15px;
    margin-bottom: 28px;
}
.wv-message-succes { background: var(--success-50); color: #14532D; border: 1px solid #BBF7D0; }
.wv-message-erreur { background: var(--danger-50); color: #7F1D1D; border: 1px solid #FECACA; }
.wv-message b { display: block; font-family: var(--titre); font-size: 21px; margin-bottom: 6px; }


/* =====================================================
   19. PROSE (mentions légales)
   ===================================================== */

.wv-prose { max-width: 72ch; }
.wv-prose h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    margin: 56px 0 18px;
    padding-top: 28px;
    border-top: 1px solid var(--bordure);
}
.wv-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.wv-prose h3 { font-size: 21px; margin: 32px 0 12px; }
.wv-prose p { margin-bottom: 16px; color: var(--encre-douce); font-size: 16px; }
.wv-prose ul { margin: 0 0 20px; }
.wv-prose li {
    position: relative; padding: 5px 0 5px 20px;
    color: var(--encre-douce); font-size: 15.5px;
}
.wv-prose li::before {
    content: ""; position: absolute; left: 0; top: 15px;
    width: 7px; height: 1px; background: var(--or);
}
.wv-prose a { color: var(--or-texte); border-bottom: 1px solid var(--or-clair); }
.wv-a-completer {
    background: var(--or-voile); color: var(--or-texte);
    padding: 1px 7px; border-radius: 2px;
    font-size: .92em; font-style: italic;
}


/* =====================================================
   20. RÉVÉLATION AU DÉFILEMENT
   -----------------------------------------------------
   Le masquage n'est appliqué que si JavaScript est présent
   (classe posée sur <html> avant le rendu).
   ===================================================== */

/* Le décalage entre blocs voisins passe du JavaScript au CSS :
   `--wv-rang` est posé une fois au démarrage, et le navigateur
   gère la cascade sans minuteur. Un `setTimeout` par élément
   produisait des vagues irrégulières sur les grilles longues. */
.wv-js .wv-anim {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity   var(--t-reveal) var(--e-sortie),
        transform var(--t-reveal) var(--e-sortie),
        clip-path var(--t-image)  var(--e-sortie);
    transition-delay: calc(min(var(--wv-rang, 0), 6) * 70ms);
}
.wv-js .wv-anim.wv-visible { opacity: 1; transform: none; }

/* Variante image : le cadrage se dévoile par le bas au lieu de
   glisser. Réservée aux figures — sur du texte, l'effet serait
   voyant. */
.wv-js .wv-anim-image {
    clip-path: inset(0 0 86% 0);
    transform: none;
}
.wv-js .wv-anim-image.wv-visible { clip-path: inset(0 0 0 0); }


/* -----------------------------------------------------
   Séquence d'ouverture
   -----------------------------------------------------
   Le haut de page n'a pas à être « révélé au défilement » : il est
   déjà visible. Il se compose à l'ouverture, dans l'ordre de
   lecture — surtitre, titre, chapô, boutons, preuves — puis la
   photo, puis son cadre d'or. Délais courts (70 ms) : on doit
   percevoir une mise en place, pas une animation.
   ----------------------------------------------------- */
.wv-js .wv-sequence > *,
.wv-js .wv-hero-court .wv-entete-section > * {
    opacity: 0;
    transform: translateY(14px);
    animation: wv-entree 620ms var(--e-sortie) forwards;
}
.wv-js .wv-sequence > *:nth-child(1),
.wv-js .wv-hero-court .wv-entete-section > *:nth-child(1) { animation-delay:  60ms; }
.wv-js .wv-sequence > *:nth-child(2),
.wv-js .wv-hero-court .wv-entete-section > *:nth-child(2) { animation-delay: 130ms; }
.wv-js .wv-sequence > *:nth-child(3),
.wv-js .wv-hero-court .wv-entete-section > *:nth-child(3) { animation-delay: 200ms; }
.wv-js .wv-sequence > *:nth-child(4) { animation-delay: 270ms; }
.wv-js .wv-sequence > *:nth-child(5) { animation-delay: 340ms; }

@keyframes wv-entree { to { opacity: 1; transform: none; } }

/* Le visuel du hero : le cadrage s'ouvre, l'image se recadre de
   6 % à 0, le cadre d'or apparaît en dernier. Trois durées
   différentes, une seule courbe. */
.wv-js .wv-sequence-visuel .wv-photo-hero {
    clip-path: inset(0 0 100% 0);
    animation: wv-devoile var(--t-image) var(--e-sortie) 180ms forwards;
}
.wv-js .wv-sequence-visuel .wv-photo-hero img {
    transform: scale(1.06);
    animation: wv-recadre 1500ms var(--e-sortie) 180ms forwards;
}
.wv-js .wv-sequence-visuel::before {
    opacity: 0;
    animation: wv-parait 700ms var(--e-sortie) 620ms forwards;
}
.wv-js .wv-sequence-visuel .wv-hero-legende {
    opacity: 0;
    animation: wv-entree 620ms var(--e-sortie) 760ms forwards;
}

@keyframes wv-devoile { to { clip-path: inset(0 0 0 0); } }
@keyframes wv-recadre { to { transform: none; } }
@keyframes wv-parait  { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .wv-js .wv-anim {
        opacity: 1; transform: none; clip-path: none; transition: none;
    }
    .wv-js .wv-sequence > *,
    .wv-js .wv-hero-court .wv-entete-section > *,
    .wv-js .wv-sequence-visuel .wv-photo-hero,
    .wv-js .wv-sequence-visuel .wv-photo-hero img,
    .wv-js .wv-sequence-visuel::before,
    .wv-js .wv-sequence-visuel .wv-hero-legende {
        opacity: 1; transform: none; clip-path: none; animation: none;
    }
    .wv-entete::after { display: none; }
    .wv-site *, .wv-site *::before, .wv-site *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}


/* =====================================================
   20 bis. PAGES ÉDITORIALES
   -----------------------------------------------------
   Le manifeste et le journal. Deux gabarits de lecture, sans
   aucun composant d'interface.
   ===================================================== */

/* -----------------------------------------------------
   Manifeste — page Univers
   ----------------------------------------------------- */
.wv-manifeste { max-width: 620px; margin: 0 auto; text-align: center; }
.wv-manifeste p { color: var(--encre-douce); }
.wv-manifeste p + p { margin-top: 34px; }
.wv-manifeste .wv-manifeste-fort {
    font-family: var(--titre);
    text-transform: uppercase;
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1.12;
    letter-spacing: .012em;
    color: var(--encre);
    margin-top: clamp(56px, 7vw, 88px);
}
.wv-manifeste .wv-manifeste-fort:first-child { margin-top: 0; }
.wv-manifeste .wv-manifeste-fort + p { margin-top: 30px; }
.wv-manifeste-signature {
    margin-top: 60px;
    font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--encre-tenue);
}

/* -----------------------------------------------------
   Journal — page Ressources
   ----------------------------------------------------- */
.wv-journal { display: grid; }
.wv-journal-article { display: grid; gap: 32px; }
.wv-journal-meta {
    font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--encre-tenue);
}
.wv-journal-article h3 { max-width: 22ch; }
.wv-journal-article p { color: var(--encre-douce); max-width: 62ch; }
.wv-journal-suite {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(48px, 6vw, 80px);
    margin-top: clamp(64px, 8vw, 110px);
    padding-top: clamp(64px, 8vw, 110px);
    border-top: 1px solid var(--bordure);
}
.wv-journal-suite h3 { font-size: clamp(20px, 2vw, 27px); }

/* -----------------------------------------------------
   Citation longue — page Témoignages
   ----------------------------------------------------- */
.wv-citation-longue p { color: var(--encre-douce); }
.wv-citation-longue p + p { margin-top: 22px; }
.wv-citation-longue strong { font-weight: 600; font-style: italic; color: var(--encre); }
.wv-citation-signature {
    margin-top: 34px;
    font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--encre-tenue);
}

/* -----------------------------------------------------
   Ligne de réassurance
   -----------------------------------------------------
   Trois mentions sur une seule ligne, séparées par des tirets
   dessinés en CSS plutôt que saisis : un lecteur d'écran ne les
   annonce donc pas.
   ----------------------------------------------------- */
.wv-ligne-preuves {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 10px 26px;
    margin-top: 40px;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--encre-tenue);
}
.wv-hero-plein .wv-ligne-preuves { color: rgba(255, 255, 255, .68); }
.wv-ligne-preuves li { display: flex; align-items: center; gap: 26px; }
.wv-ligne-preuves li:not(:last-child)::after {
    content: ""; width: 16px; height: 1px; background: currentColor; opacity: .45;
}


/* =====================================================
   21. RESPONSIVE
   ===================================================== */

/* =====================================================
   REPLI DE L'EN-TÊTE — 1140 px
   -----------------------------------------------------
   Son propre palier, distinct de celui de la mise en page.
   Budget mesuré : logo (150) + six entrées (486) + langue,
   connexion et bouton (341) + écarts (46) ≈ 1023 px. Sous
   1280 px de fenêtre, le conteneur n'offre plus assez de
   place : les entrées passaient par-dessus le sélecteur de
   langue au lieu de se replier.
   ===================================================== */
@media (max-width: 1280px) {
    .wv-entete-inner { height: 68px; }

    .wv-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        display: none;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--ivoire);
        border-top: 1px solid var(--bordure);
        border-bottom: 1px solid var(--bordure);
        padding: 8px var(--gouttiere) 16px;
        box-shadow: var(--ombre-m);
    }
    .wv-nav.ouvert { display: flex; }
    .wv-nav a { padding: 15px 0; border-bottom: 1px solid var(--bordure); font-size: 16.5px; }
    .wv-nav a:last-child { border-bottom: 0; }
    .wv-nav a::after { display: none; }

    /* Le panneau se remplit de haut en bas plutôt que d'apparaître
       d'un bloc : 30 ms par entrée, imperceptible à la lecture,
       suffisant pour que l'ouverture ait une direction. */
    .wv-nav.ouvert a { animation: wv-entree 300ms var(--e-sortie) backwards; }
    .wv-nav.ouvert a:nth-child(1) { animation-delay:  20ms; }
    .wv-nav.ouvert a:nth-child(2) { animation-delay:  50ms; }
    .wv-nav.ouvert a:nth-child(3) { animation-delay:  80ms; }
    .wv-nav.ouvert a:nth-child(4) { animation-delay: 110ms; }
    .wv-nav.ouvert a:nth-child(5) { animation-delay: 140ms; }
    .wv-nav.ouvert a:nth-child(6) { animation-delay: 170ms; }
    .wv-nav.ouvert a:nth-child(7) { animation-delay: 200ms; }

    /* Rendu au menu mobile : sans lui, « Connexion » n'existait
       plus qu'au fond du pied de page. */
    .wv-nav-connexion { display: block; color: var(--encre-douce); }

    .wv-burger { display: flex; }
    .wv-lien-discret { display: none; }
}

@media (max-width: 1080px) {
    /* En dessous, tenir sur une ligne demanderait un corps illisible :
       le bandeau se replie plutôt que de se réduire encore. */
    .wv-confiance-liste { flex-wrap: wrap; gap: 16px 34px; }

    .wv-duo, .wv-couple { grid-template-columns: 1fr; gap: 48px; }
    .wv-duo-inverse .wv-duo-texte { order: 0; }
    .wv-mise-en-service { grid-template-columns: 1fr; }
    .wv-mise-en-service-action { text-align: left; }
    .wv-demo-grille { grid-template-columns: 1fr; }
    .wv-pied-haut { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 900px) {
    .wv-piliers { grid-template-columns: 1fr; }
    .wv-pilier { border-right: 0; padding-left: 0; padding-right: 0; }


    /* La maquette n'est plus pilotée ici : ses propres paliers
       (@container maquette) mesurent la place dont elle dispose,
       ce qui vaut aussi bien dans une colonne étroite que sur une
       tablette où elle occupe toute la largeur. */

    .wv-resolution { grid-template-columns: 1fr; }
    .wv-autos { grid-template-columns: 1fr; }
    .wv-auto { padding-right: 0; }
}

@media (max-width: 720px) {
    /* Deux colonnes de modules sur un écran de 700 px donnent des
       intitulés coupés : on repasse à une grille plus généreuse. */
    .wv-modules { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .wv-etapes { gap: 32px; }
}

@media (max-width: 560px) {
    .wv-site { font-size: 16px; }
    /* Aucun bloc ne doit provoquer de défilement horizontal : le
       cadre d'or du hero et les grilles larges sont les deux
       coupables habituels. */
    .wv-hero, .wv-section, .wv-pied { overflow-x: clip; }
    .wv-hero-preuves { gap: 10px 22px; }
    .wv-surtitre { letter-spacing: .18em; }
    .wv-hero-actions .wv-btn, .wv-cta-actions .wv-btn { width: 100%; padding-left: 20px; padding-right: 20px; }
    .wv-onglets { width: 100%; }
    .wv-onglet { flex: 1; padding: 10px 12px; }
    .wv-confiance-liste { gap: 14px 28px; }
    .wv-confiance-liste li { font-size: 16px; }
}

@media print {
    .wv-entete, .wv-pied, .wv-cta-final, .wv-burger { display: none; }
    .wv-js .wv-anim { opacity: 1; transform: none; }
}


/* =====================================================
   22. LOGO (composant partagé avec l'application)
   ===================================================== */

.wv-logo {
    display: inline-flex; align-items: center;
    gap: calc(var(--wv-logo-h, 34px) * 0.36);
    line-height: 1;
}
.wv-logo-texte { display: flex; flex-direction: column; gap: 2px; }
.wv-logo-nom {
    font-family: var(--texte);
    font-weight: 600;
    letter-spacing: .16em;
    font-size: calc(var(--wv-logo-h, 34px) * 0.50);
    color: currentColor;
}
.wv-logo-baseline {
    font-family: var(--titre); font-style: italic;
    font-size: calc(var(--wv-logo-h, 34px) * 0.30);
    color: var(--encre-tenue);
}
.wv-pastille {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nuit); border-radius: var(--r-m);
}