/**
 * Header global Cent une découvertes - charte sombre / dorée.
 * Transparent par-dessus le hero, solide au scroll (ou sur pages sans hero).
 * Variables locales (la palette .vdf-dept est scopée aux pages département).
 */

.vdf-header {
    --h-or: #C2983F;       /* or ambré chaud (cohérent avec --vdf-or) */
    --h-or-clair: #E3C079;
    --h-sombre: #141B27;   /* recopiée plus bas : zone de compensation du body (signal 241) */
    --h-clair: #F5F0E8;

    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    padding: 1.15rem 0;
    background: transparent;
    transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}

/* Dégradé léger pour garantir la lisibilité du menu blanc sur un hero clair. */
.vdf-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 27, 39, .55) 0%, rgba(20, 27, 39, 0) 100%);
    opacity: 1;
    transition: opacity .35s ease;
    pointer-events: none;
}

.vdf-header.is-solid {
    /* Migre le 20/08. `--h-sombre` existait deja dans ce fichier mais n'etait pas
       utilisee ici : la valeur etait recopiee a la main, avec son alpha. */
    background: rgba(20, 27, 39, .96);
    background: color-mix(in srgb, var(--h-sombre, #141B27) 96%, transparent);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    padding: .55rem 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.vdf-header.is-solid::before {
    opacity: 0;
}

/* Collector (page intégralement sombre) : menu TRANSPARENT en permanence, y compris au scroll.
   On neutralise visuellement l'état .is-solid (le JS continue de le poser, sans effet ici) ;
   seul le léger dégradé sombre derrière le texte reste. Scopé sur .vdf-hero-dark UNIQUEMENT :
   Collection/Premium (sections claires) gardent le passage solide au scroll pour la lisibilité. */
body.vdf-hero-dark .vdf-header,
body.vdf-hero-dark .vdf-header.is-solid {
    background: transparent;
    box-shadow: none;
    padding: 1.15rem 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.vdf-hero-dark .vdf-header::before,
body.vdf-hero-dark .vdf-header.is-solid::before {
    opacity: 1;
}
/* AU SCROLL (is-solid posé par le JS) : le contenu défile sous le menu transparent et "salissait"
   le logo/les liens. On garde l'esprit transparent mais on DENSIFIE le voile dégradé (pas de barre
   opaque) + un léger flou, pour que le logo et le menu restent nets et lisibles à tout moment. */
body.vdf-hero-dark .vdf-header.is-solid {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
body.vdf-hero-dark .vdf-header.is-solid::before {
    background: linear-gradient(180deg, rgba(11, 16, 28, .9) 0%, rgba(11, 16, 28, .62) 55%, rgba(11, 16, 28, 0) 100%);
}

/* Lisibilité du menu transparent sur n'importe quelle image de hero (y compris claire) :
   ombre portée discrète sur le texte (invisible sur le fond solide des autres pages). */
.vdf-nav__list a {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .25);
}
.vdf-icone svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.vdf-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
}

/* --- Logo : PICTOGRAMME (illustration seule) + nom Cinzel OR + tagline, en TEXTE HTML --- */
.vdf-logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    flex-shrink: 0;
}
.vdf-logo__picto {
    height: clamp(2.7rem, 4.5vw, 3.2rem);
    width: auto;
    display: block;
    object-fit: contain; /* porte VERTICALE : jamais déformée, contrainte par la hauteur du header */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45));
}
.vdf-logo__txt {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1;
}
/* Nom sur DEUX lignes : "VILLAGES" (or) au-dessus de "DE FRANCE" (blanc). Taille réduite pour que
   les 2 lignes + les taglines tiennent dans la hauteur du picto -> le header ne grandit PAS. */
.vdf-logo__nom {
    display: flex;
    flex-direction: column;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: clamp(.8rem, 1.05vw, .9rem);
    line-height: 1.0;
    letter-spacing: .1em;
    /* CASSE RETIREE le 19/08/2026 : le client demande « cent une découvertes » en
       minuscules, comme sa maquette. Le texte HTML porte donc la casse voulue et le CSS
       ne la force plus. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
/* Hiérarchie (retour client) : « VILLAGES » DOMINANT, « DE FRANCE » secondaire dessous. Tailles en em
   (relatives au parent) -> l'override mobile (992px) suit sans autre règle. Le tracking élargi de la
   ligne 2 cale sa largeur sous VILLAGES (facture logotype). Budget hauteur <= avant (header inchangé). */
.vdf-logo__nom-l1 { color: var(--h-or); font-size: 1.18em; }                              /* VILLAGES : or, dominant */
.vdf-logo__nom-l2 { color: var(--h-clair); font-size: .74em; letter-spacing: .42em; }      /* DE FRANCE : blanc, petit, étiré */
.vdf-logo__tagline {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--h-or-clair);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.vdf-logo__flag {
    flex: 0 0 auto;
    height: .9em;
    width: auto;
    aspect-ratio: 3 / 2;
    border-radius: 1px;
    overflow: hidden;
    display: block;
}
@media (max-width: 992px) {
    .vdf-logo__picto { height: 2.5rem; }
    .vdf-logo__nom { font-size: .98rem; }
    .vdf-logo__tagline { display: none; } /* barre mobile serrée : on garde picto + nom */
}

/* --- Menu desktop --- */
.vdf-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.vdf-nav__list a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--h-clair);
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    transition: color .2s ease;
}

.vdf-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--h-or);
    transition: width .25s ease;
}

.vdf-nav__list a:hover,
.vdf-nav__list .current-menu-item > a,
.vdf-nav__list .current_page_item > a {
    color: var(--h-or-clair);
}

.vdf-nav__list a:hover::after,
.vdf-nav__list .current-menu-item > a::after {
    width: 100%;
}

/* --- Actions (icônes + burger) --- */
.vdf-header__actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-shrink: 0;
}

.vdf-icone {
    display: inline-flex;
    align-items: center;
    color: var(--h-clair);
    transition: color .2s ease, transform .2s ease;
}

.vdf-icone:hover {
    color: var(--h-or);
    transform: translateY(-1px);
}

.vdf-icone svg {
    width: 21px;
    height: 21px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vdf-icone--favoris svg {
    fill: none;
}

/* ZONE TACTILE DE 44 PX AU TÉLÉPHONE — brief 27, 16/10/2026, décision « lisibilité oui » (UX-01).
   La loupe et le cœur n'offraient que leur dessin, 21 x 21 px. Sous 601 px, chaque lien prend
   44 x 44 px, l'icône centrée, au même dessin et à la même taille. Pour que les deux zones ne
   se chevauchent pas, l'écart passe dans la zone elle-même : le cœur et le menu ne bougent
   pas, la loupe se décale de 5,4 px vers la gauche. La zone déborde de 5 px au-dessus et
   au-dessous de la rangée (34 px, celle du menu) : l'en-tête garde sa hauteur. Tablette et
   ordinateur inchangés. */
@media (max-width: 600px) {
    .vdf-header .vdf-header__actions { gap: 0; }
    .vdf-header .vdf-icone { width: 44px; height: 44px; margin-block: -5px; justify-content: center; }
    .vdf-header .vdf-icone--favoris { margin-right: calc(1.1rem - 11.5px); }
}

/* Scopé sous .vdf-header pour battre reset.css ([type="button"]{display:inline-block}, même spécificité). */
.vdf-header .vdf-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 6px;
    background: none;
    border: 0;
    cursor: pointer;
}

.vdf-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--h-clair);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}

/* --- Menu off-canvas (mobile) --- */
.vdf-offcanvas__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.vdf-offcanvas__backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.vdf-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 320px;
    max-width: 86vw;
    z-index: 1100;
    padding: 5rem 2rem 2rem;
    background: var(--h-sombre);
    border-left: 1px solid rgba(201, 168, 76, .25);
    transform: translateX(100%);
    /* Fermé, le panneau sort de l'ordre de tabulation (audit du 16/10, F14) : hors écran, ses
       liens restaient atteignables au clavier. La visibilité ne tombe qu'à la fin du glissement,
       pour que la fermeture reste animée ; à l'ouverture elle revient aussitôt. */
    visibility: hidden;
    transition: transform .35s ease, visibility 0s linear .35s;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vdf-offcanvas.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s ease, visibility 0s;
    box-shadow: -10px 0 36px rgba(0, 0, 0, .5);
}

.vdf-offcanvas__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    color: var(--h-clair);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease;
}

.vdf-offcanvas__close:hover {
    color: var(--h-or);
}

.vdf-offcanvas__list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.vdf-offcanvas__list a {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--h-clair);
    text-decoration: none;
    transition: color .2s ease;
}

.vdf-offcanvas__list a:hover,
.vdf-offcanvas__list .current-menu-item > a {
    color: var(--h-or);
}

.vdf-offcanvas__actions {
    display: flex;
    gap: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(201, 168, 76, .3);
}

.vdf-offcanvas__actions a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--h-or);
    text-decoration: none;
}

/* --- Offset du contenu sur les pages SANS hero (header fixe hors flux) --- */
/* LA ZONE DE COMPENSATION PREND LA COULEUR DE L'EN-TÊTE — 01/10/2026, signal 241.
   L'en-tête solide est moins haut que la compensation : 68,8 px à partir de 1280, 62 à 64 px
   entre 993 et 1024, 57,6 px jusqu'à 992 (mesuré, preprod/signal-241/), pour 76 et 68 px de
   padding. Entre les deux, le blanc du body dessinait une bande claire de 7 à 14 px sous
   l'en-tête, sur toutes les pages sans bandeau. La hauteur de l'en-tête varie avec la largeur
   et n'est pas entière : plutôt que de courir après elle, la zone est peinte à sa couleur
   (--h-sombre, qui n'est définie que sur .vdf-header : d'où la valeur écrite ici).
   UN PIXEL DE PLUS QUE LE PADDING (77 et 69) : quand padding x densité de l'écran n'est pas
   entier (téléphone à 2,625, zoom à 110 %), le bord de la zone peinte est lissé et laissait un
   filet clair d'un pixel au-dessus du contenu (revue adverse du 241). Le pixel en trop passe
   sous le contenu. */
body:not(.vdf-has-hero) {
    padding-top: 76px;
    background-image: linear-gradient(#141B27, #141B27);
    background-repeat: no-repeat;
    background-size: 100% 77px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .vdf-header .vdf-nav {
        display: none;
    }

    .vdf-header .vdf-burger {
        display: flex;
    }

    .vdf-logo__nom {
        font-size: .98rem;
    }

    body:not(.vdf-has-hero) {
        padding-top: 68px;
        background-size: 100% 69px;
    }
}

/* Menu à six entrées (brief 55, « Saveurs et bonnes adresses ») : la rangée du bureau demande
   1 252 px (mesuré hors ligne, preprod/adresses-1810/mesure-entete-hors-ligne.mjs) ; en dessous de
   1 280 px, burger et menu téléphone, comme à 992. Seulement si l'en-tête a une sixième entrée :
   à cinq, rendu inchangé. Navigateur sans :has() : rangée du bureau, comme avant. */
@media (min-width: 993px) and (max-width: 1279px) {
    .vdf-header:has(.vdf-nav__list > li:nth-child(6)) .vdf-nav {
        display: none;
    }

    .vdf-header:has(.vdf-nav__list > li:nth-child(6)) .vdf-burger {
        display: flex;
    }
}

/* --- Footer global (sombre / doré) - commun à tout le site --- */
.vdf-footer {
    /* Migre le 20/08/2026 : ces trois valeurs etaient en dur, hors de la charte.
       Le pied de page suit desormais la palette — et reste plus sombre qu'une
       section, l'ecart relatif d'origine etant conserve. Replis obligatoires :
       le pied de page n'est PAS sous `.vdf-dept`, ou vivent les variables. */
    background: var(--vdf-fond-pied, #202f52);
    color: var(--vdf-blanc-casse, #F5F0E8);
    border-top: 2px solid var(--vdf-or, #C9A84C);
    font-family: 'Inter', system-ui, sans-serif;
}
.vdf-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 2.5rem;
}
.vdf-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    margin-bottom: 1.25rem;
}
/*
 * L'ENFANT FLEX EST LE <picture>, PAS LE <img> — mesuré le 19/08/2026.
 *
 * `.vdf-footer__logo` est en `inline-flex`. Son enfant direct est le `<picture>` qui
 * enveloppe l'image ; c'est donc LUI qui se laisse comprimer quand la place manque, et
 * l'image suit par son `max-width: 100%`.
 *
 * Constaté sur la page racine à 850 px : 34 px de large au lieu de 41, soit 16 %
 * d'écrasement, ratio 0,607 contre 0,725 natif. Poser `flex: none` sur le `<img>` ne
 * suffisait pas — vérifié au rendu, l'image portait bien `flex-shrink: 0` et restait
 * écrasée.
 *
 * Le défaut n'existait pas avant : l'ancien pictogramme (169 x 200) était plus large et
 * ne rencontrait pas la limite. Changer d'image l'a révélé.
 */
.vdf-footer__logo > picture {
    flex: none;
}

.vdf-footer__picto {
    height: 3.5rem;
    width: auto;
    display: block;
    flex: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
}
.vdf-footer__logo-txt { display: flex; flex-direction: column; gap: .3rem; line-height: 1; }
.vdf-footer__logo-nom {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c2983f;
}
.vdf-footer__logo-tag {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #e3c079;
}
.vdf-footer__logo-flag {
    flex: 0 0 auto;
    height: .9em;
    width: auto;
    aspect-ratio: 3 / 2;
    border-radius: 1px;
    overflow: hidden;
    display: block;
}
.vdf-footer__tagline {
    color: #C9A84C;
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin: 0.5rem 0 1rem;
}
.vdf-footer__pitch {
    color: rgba(245, 240, 232, 0.6);
    font-size: 0.85rem;
    max-width: 36ch;
    line-height: 1.6;
    margin: 0;
}
.vdf-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.vdf-footer__titre {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C9A84C;
    margin: 0 0 1rem;
}
.vdf-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.vdf-footer__col a {
    color: rgba(245, 240, 232, 0.78);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}
.vdf-footer__col a:hover {
    color: #E0C77E;
}
.vdf-footer__bas {
    border-top: 1px solid rgba(201, 168, 76, 0.18);
    padding: 1.2rem 1.5rem;
    text-align: center;
    /* 0.5 donnait 4.11:1 à 12,5 px sur le fond rgb(32,47,82) : sous le seuil AA de 4.5.
       Même traitement que la mention IA — 0.58 mesuré à 5.01:1. */
    color: rgba(245, 240, 232, 0.58);
    font-size: 0.78rem;
}
/* Mention IA : une ligne au-dessus du copyright, discrète mais lisible. Elle informe,
   elle ne s'excuse pas — d'où la taille réduite et l'absence de tout ornement.

   OPACITÉ MESURÉE, PAS CHOISIE. À 0.42 (premier jet) le texte composité donnait
   rgb(122,128,145) sur le fond rgb(32,47,82) du pied, soit 3.35:1 — sous le seuil AA de
   4.5 exigé à 11.5 px. À 0.58 : rgb(156,159,169), soit 5.0:1. La mention est discrète
   parce qu'elle est petite, pas parce qu'elle est délavée. */
.vdf-footer__mention {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    color: rgba(245, 240, 232, 0.58);
}
@media (max-width: 800px) {
    .vdf-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
    .vdf-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* Polish revue : focus clavier visible + 1 colonne sur petit mobile */
.vdf-footer__col a:focus-visible,
.vdf-footer__logo:focus-visible {
    outline: 2px solid #E0C77E;
    outline-offset: 2px;
    border-radius: 2px;
}
@media (max-width: 480px) {
    .vdf-footer__cols { grid-template-columns: 1fr; }
}

/* --- Neutralisation du rose #c36 du thème parent (correctif garantie, 2026-08-11) ---
   hello-elementor/assets/css/reset.css impose `a { color:#c36 }` et
   `[type=button],[type=submit],button { color:#c36 }`. Vérifié à la cascade (CDP) : ces
   règles l'emportent sur nos sélecteurs de classe, et le rose se calculait à 3,48 sur le
   « × » de fermeture du menu — sous le seuil AA de 4,5.
   On ne neutralise QUE là où ce rose peint du texte visible ; le reste de la page n'est
   pas touché. Les variables --h-* sont portées par .vdf-header : hors du header, il faut
   une valeur de repli explicite (le pied n'hérite d'aucune --h-*). */
/* Le cadre aussi : `[type=button]{border:1px solid #c36}` du parent (même spécificité que
   `.vdf-offcanvas__close`) dessinait un cadre rose autour du « × » (audit du 16/10, F14).
   Il prend le liseré doré des boutons de la charte (bouton « Réinitialiser » de la carte). */
.vdf-header .vdf-offcanvas__close { color: var(--h-clair, #f5f0e8); background: none; border: 1px solid rgba(201, 168, 76, .4); }
.vdf-header .vdf-offcanvas__close:hover,
.vdf-header .vdf-offcanvas__close:focus,
.vdf-header .vdf-offcanvas__close:focus-visible {
    color: var(--h-or, #c2983f);
    /* Le parent applique AUSSI `background-color:#c36` sur button:hover ET button:focus.
       Sur mobile le focus persiste après le tap : sans cette ligne, le « × » vire au rose
       vif plein cadre une fois le menu ouvert. Réaffirmer le fond, pas seulement la
       couleur du texte — c'est le piège déjà consigné au ledger. */
    background: none;
}
.vdf-footer a.vdf-footer__logo { color: var(--vdf-blanc-casse, #f5f0e8); }

/* --- Bandeau cookies : hauteur plafonnée (retour client, 2026-08-11) ---
   Mesuré à 390 px : 435 px de haut sur 844, soit 52 % de l'écran, par-dessus le milieu
   du hero. Le plugin CookieAdmin (version gratuite) n'expose aucun réglage de hauteur —
   `cookieadmin_settings` ne porte que `block_scripts`. On plafonne donc en CSS, sans
   toucher au plugin ni à son comportement de consentement : le bandeau reste entier,
   ses boutons restent atteignables, seul le pavé de texte défile s'il déborde.
   Réversible : supprimer ce bloc rend l'affichage d'origine. */
.cookieadmin_law_container {
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* défilement fluide iOS */
    overscroll-behavior: contain;      /* ne pas entraîner la page derrière */
}

/* Le retour discret au pied de page du site France.
 *
 * VALEURS DE REPLI OBLIGATOIRES ICI — mesuré le 19/08/2026.
 *
 * Les variables de charte sont portées par `.vdf-dept`. Le pied de page n'est PAS sous
 * `.vdf-dept` : `var(--vdf-or)` n'y résout rien, et la couleur retombait sur celle du
 * thème parent — `rgb(204, 51, 102)`, un rose, sur toutes les pages du site.
 *
 * Le piège est le même que celui de l'en-tête de marque, où le noir devenait gris. La
 * différence : là-bas on pouvait ajouter la classe `vdf-dept` à l'élément ; ici le pied
 * de page est commun à tout le site et le reclasser aurait des effets ailleurs. On donne
 * donc une valeur de repli à chaque variable.
 */
.vdf-footer__racine {
  font-size: var(--vdf-fs-petit, 0.875rem);
  letter-spacing: 0.04em;
  color: var(--vdf-or, #c2983f);
  text-decoration: none;
  opacity: 0.8;
}

.vdf-footer__racine:hover,
.vdf-footer__racine:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* Entrée de pied de page SANS destination : même graisse et même taille qu'un lien, mais
   ni curseur de clic ni survol. Elle annonce une rubrique attendue (Contact, Mentions
   légales) sans promettre un clic qui ne mène nulle part. */
.vdf-footer__inactif {
    color: rgba(245, 240, 232, .5);
    cursor: default;
}