/* ==========================================================================
   Volvic Vélo Nature — feuille de style du site
   Chargée automatiquement par le template Helix Ultimate (templates/shaper_helixultimate/css/custom.css).
   Copie maître : C:\Users\noadi\Documents\gilou\theme_vvn\custom.css

   Sommaire
     1. Police (Montserrat, hébergée sur le site)
     2. Palette et variables
     3. Typographie de base
     4. Contenu des articles (charte : titres, paragraphes, images, listes)
     5. Vidéos (page Vidéo, page TATAVE)
     6. Barre du haut (contact, réseaux sociaux)
     7. En-tête et menu principal
     8. Menu mobile
     9. Cohérence générale (sections, boutons, cartes, formulaires, fil d'Ariane, retour en haut)
   ========================================================================== */


/* 1. Police ----------------------------------------------------------------
   Une seule famille partout : Montserrat (licence SIL OFL 1.1), fichiers dans
   templates/shaper_helixultimate/fonts/montserrat/. Police variable : graisses 100 à 900. */

@font-face {
    font-family: "Montserrat VVN";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
        U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Montserrat VVN";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Montserrat VVN";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
        U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Montserrat VVN";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Palette et variables ---------------------------------------------------
   Couleurs du logo (bleu, gris) + blanc, et vert en accent pour la nature.
   Pour le texte sur fond coloré, utiliser les teintes « -fonce » (contraste suffisant). */

:root {
    /* bleu du logo */
    --vvn-bleu: #0A94F0;
    --vvn-bleu-fonce: #0773BD;
    --vvn-bleu-clair: #E7F4FE;
    --vvn-bleu-pale: #F4FAFF;

    /* gris du logo */
    --vvn-gris: #6D6E71;
    --vvn-gris-clair: #A7A9AC;
    --vvn-gris-trait: #E2E5E9;
    --vvn-gris-fond: #F3F5F7;

    /* vert nature (accent) */
    --vvn-vert: #3E9B4F;
    --vvn-vert-fonce: #2F7D3D;
    --vvn-vert-clair: #E8F5EA;

    /* neutres */
    --vvn-blanc: #FFFFFF;
    --vvn-texte: #2B2F33;
    --vvn-texte-doux: #5A6068;
    --vvn-fond: #FFFFFF;
    --vvn-fond-section: var(--vvn-gris-fond);

    /* police */
    --vvn-police: "Montserrat VVN", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* formes */
    --vvn-rayon-s: 8px;
    --vvn-rayon: 12px;
    --vvn-rayon-l: 20px;
    --vvn-rayon-pilule: 999px;

    /* ombres */
    --vvn-ombre-s: 0 2px 8px rgba(20, 40, 60, .08);
    --vvn-ombre: 0 6px 20px rgba(20, 40, 60, .12);
    --vvn-ombre-l: 0 14px 40px rgba(20, 40, 60, .18);

    /* espacements (échelle unique pour tout le site) */
    --vvn-esp-1: 4px;
    --vvn-esp-2: 8px;
    --vvn-esp-3: 12px;
    --vvn-esp-4: 16px;
    --vvn-esp-5: 24px;
    --vvn-esp-6: 32px;
    --vvn-esp-7: 48px;
    --vvn-esp-8: 64px;

    /* mouvements */
    --vvn-transition: .2s cubic-bezier(.2, .7, .2, 1);
    --vvn-transition-lente: .45s cubic-bezier(.2, .7, .2, 1);

    /* largeur de lecture confortable pour les articles */
    --vvn-largeur-lecture: 78ch;
}


/* 3. Typographie de base ----------------------------------------------------
   La même police partout : texte, titres, menus, boutons, formulaires. */

html {
    -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea,
.btn,
.sp-megamenu-parent > li > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.offcanvas-menu .offcanvas-inner ul.menu > li a,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--vvn-police) !important;
}

body {
    color: var(--vvn-texte);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--vvn-bleu-fonce);
    transition: color var(--vvn-transition);
}
a:hover,
a:focus {
    color: var(--vvn-vert-fonce);
}

::selection {
    background: var(--vvn-bleu-clair);
    color: var(--vvn-texte);
}


/* 4. Contenu des articles ---------------------------------------------------
   Charte appliquée à TOUT article, ancien ou nouveau, sans rien à régler à la publication.
   - Titre 1 : réservé au titre de la page.
   - Titre 2 : grandes parties d'un article.
   - Titre 3 : sous-parties.
   - Titre 4 : petits intertitres.
   Les polices et tailles collées depuis Word/Google Docs/anciens éditeurs (Comic Sans, Arial Black…)
   sont neutralisées : la police du site s'applique toujours. Les couleurs choisies sont conservées. */

.article-details,
.article-list .article,
.com-content-article,
.blog .article-body,
.sppb-addon-text-block {
    font-family: var(--vvn-police);
}

/* polices imposées par d'anciens contenus : on revient à la police du site */
#sp-main-body [style*="font-family"],
#sp-main-body font[face],
.article-details [style*="font-family"],
.article-details font[face],
.article-list [style*="font-family"],
.article-list font[face],
.com-content-article [style*="font-family"],
.moduletable [style*="font-family"],
.sp-module [style*="font-family"] {
    font-family: var(--vvn-police) !important;
}

/* tailles imposées dans les titres : le titre garde la taille de la charte */
.article-details :is(h1, h2, h3, h4) [style*="font-size"],
.article-list :is(h1, h2, h3, h4) [style*="font-size"] {
    font-size: inherit !important;
}

/* échelle des titres (s'adapte à la largeur de l'écran) */
.article-details h1,
.com-content-article h1,
.article-list h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--vvn-texte);
    margin: 0 0 var(--vvn-esp-5);
}

.article-details h2,
.com-content-article h2,
.article-list h2 {
    position: relative;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--vvn-texte);
    margin: var(--vvn-esp-7) 0 var(--vvn-esp-4);
    padding-bottom: var(--vvn-esp-3);
}
.article-details h2::after,
.com-content-article h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: var(--vvn-rayon-pilule);
    background: linear-gradient(90deg, var(--vvn-bleu), var(--vvn-vert));
}
/* un titre centré garde son trait centré */
.article-details h2[style*="center"]::after,
.com-content-article h2[style*="center"]::after {
    left: 50%;
    transform: translateX(-50%);
}

.article-details h3,
.com-content-article h3,
.article-list h3 {
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--vvn-bleu-fonce);
    margin: var(--vvn-esp-6) 0 var(--vvn-esp-3);
}

.article-details h4,
.com-content-article h4,
.article-list h4 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vvn-vert-fonce);
    margin: var(--vvn-esp-5) 0 var(--vvn-esp-2);
}

/* le premier titre d'un article ne pousse pas le contenu vers le bas */
[itemprop="articleBody"] > :is(h2, h3, h4):first-child {
    margin-top: 0;
}

/* paragraphes et listes */
[itemprop="articleBody"] p,
[itemprop="articleBody"] li {
    line-height: 1.7;
}
[itemprop="articleBody"] p {
    margin: 0 0 var(--vvn-esp-4);
}
[itemprop="articleBody"] ul,
[itemprop="articleBody"] ol {
    margin: 0 0 var(--vvn-esp-4);
    padding-left: 1.4em;
}
[itemprop="articleBody"] li {
    margin-bottom: var(--vvn-esp-2);
}
[itemprop="articleBody"] ul li::marker {
    color: var(--vvn-vert);
}
[itemprop="articleBody"] strong,
[itemprop="articleBody"] b {
    font-weight: 700;
}

/* images : jamais plus larges que la colonne, coins arrondis */
[itemprop="articleBody"] img {
    max-width: 100%;
    height: auto;
    border-radius: var(--vvn-rayon-s);
}

/* séparateurs */
[itemprop="articleBody"] hr {
    border: 0;
    height: 1px;
    margin: var(--vvn-esp-7) 0;
    background: linear-gradient(90deg, transparent, var(--vvn-gris-trait) 15%, var(--vvn-gris-trait) 85%, transparent);
    opacity: 1;
}

/* citations */
[itemprop="articleBody"] blockquote {
    margin: var(--vvn-esp-5) 0;
    padding: var(--vvn-esp-4) var(--vvn-esp-5);
    border-left: 4px solid var(--vvn-vert);
    border-radius: 0 var(--vvn-rayon) var(--vvn-rayon) 0;
    background: var(--vvn-vert-clair);
    font-style: italic;
    color: var(--vvn-texte);
}

/* tableaux : lisibles, et défilement horizontal sur petit écran plutôt que débordement */
[itemprop="articleBody"] table {
    max-width: 100%;
    border-collapse: collapse;
}


/* 5. Vidéos ------------------------------------------------------------------ */

/* Lecteurs vidéo de la page Vidéo (modules iframe 112, 113, 114) : adaptés à tous les écrans, format 16:9 */
iframe#blockrandom-112,
iframe#blockrandom-113,
iframe#blockrandom-114 {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--vvn-rayon);
    background: #000;
    box-shadow: var(--vvn-ombre);
    margin: 0 0 28px;
}

/* Vidéo hébergée sur le site (page Vidéo) */
.video-local {
    margin: 0 0 16px;
}
.video-local video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--vvn-rayon);
    background: #000;
    box-shadow: var(--vvn-ombre);
}

/* Bouton « Voir le post Facebook » */
a.btn-facebook-post {
    display: inline-block;
    padding: 12px 24px;
    background: #1877f2;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: var(--vvn-rayon-pilule);
    box-shadow: 0 3px 10px rgba(24, 119, 242, .35);
    transition: background var(--vvn-transition), transform var(--vvn-transition);
}
a.btn-facebook-post:hover,
a.btn-facebook-post:focus {
    background: #0f5fcc;
    transform: translateY(-1px);
}

/* Anciennes éditions de la TATAVE : une grande vignette (la plus récente) puis 3 petites */
.tatave-videos {
    margin: 8px 0 28px;
}
.tatave-videos .tv-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--vvn-rayon);
    background: #000;
    box-shadow: var(--vvn-ombre);
    text-decoration: none !important;
    line-height: 0;
}
.tatave-videos .tv-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--vvn-transition-lente);
}
.tatave-videos .tv-item:hover img,
.tatave-videos .tv-item:focus img {
    transform: scale(1.04);
}
/* bouton lecture */
.tatave-videos .tv-item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/50% no-repeat;
    z-index: 2;
    transition: background var(--vvn-transition), transform var(--vvn-transition);
}
.tatave-videos .tv-item:hover::before,
.tatave-videos .tv-item:focus::before {
    background-color: var(--vvn-bleu-fonce);
    transform: scale(1.08);
}
.tatave-videos .tv-item .tv-legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 22px 12px 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    background: linear-gradient(transparent, rgba(0, 0, 0, .8));
}
.tatave-videos .tv-grande {
    margin-bottom: 14px;
}
.tatave-videos .tv-grande::before {
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
}
.tatave-videos .tv-grande .tv-legende {
    font-size: 18px;
    padding: 30px 16px 14px;
}
.tatave-videos .tv-petites {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.tatave-videos .tv-petites .tv-item::before {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
}
.tatave-videos .tv-petites .tv-legende {
    font-size: 13px;
    padding: 18px 8px 8px;
}
@media (max-width: 640px) {
    .tatave-videos .tv-petites {
        grid-template-columns: 1fr;
    }
}

/* Lecteur intégré ouvert depuis une vignette */
.tatave-videos .tv-lecteur {
    position: relative;
    line-height: normal;
    box-shadow: var(--vvn-ombre);
}
.tatave-videos .tv-lecteur::before {
    display: none;
}
.tatave-videos .tv-lecteur a.tv-ytlink {
    display: block;
    padding: 6px 10px;
    background: #111;
    color: #fff !important;
    font-size: 12px;
    text-align: right;
    text-decoration: none !important;
}


/* 6. Barre du haut (contact, réseaux sociaux) ------------------------------- */

#sp-top-bar {
    padding: 6px 0;
    background: linear-gradient(90deg, var(--vvn-bleu-pale), var(--vvn-vert-clair));
    border-bottom: 1px solid var(--vvn-gris-trait);
    font-size: .85rem;
}

/* coordonnées : petites pastilles avec icône */
#sp-top-bar .sp-contact-info {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vvn-esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
#sp-top-bar .sp-contact-info li {
    margin: 0;
}
#sp-top-bar .sp-contact-info li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border-radius: var(--vvn-rayon-pilule);
    background: var(--vvn-blanc);
    box-shadow: var(--vvn-ombre-s);
    color: var(--vvn-texte);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--vvn-transition), box-shadow var(--vvn-transition), color var(--vvn-transition);
}
#sp-top-bar .sp-contact-info li a:hover,
#sp-top-bar .sp-contact-info li a:focus {
    transform: translateY(-1px);
    box-shadow: var(--vvn-ombre);
    color: var(--vvn-bleu-fonce);
}
/* icône déplacée dans le lien par custom.js, sur une pastille de couleur */
#sp-top-bar .sp-contact-info li .vvn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vvn-bleu-fonce);
    color: var(--vvn-blanc);
    font-size: 13px;
}
#sp-top-bar .sp-contact-email .vvn-ico {
    background: var(--vvn-vert-fonce);
}
#sp-top-bar .sp-contact-mobile a:hover .vvn-ico {
    animation: vvn-sonnerie .6s ease-in-out;
}
#sp-top-bar .sp-contact-email a:hover .vvn-ico {
    animation: vvn-rebond .6s ease-in-out;
}

/* réseaux sociaux : même forme, même taille, même couleur, même animation partout */
.social-icons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--vvn-esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.social-icons li {
    margin: 0 !important;
}
.social-icons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vvn-bleu-fonce);
    color: var(--vvn-blanc) !important;
    font-size: 16px;
    text-decoration: none;
    box-shadow: var(--vvn-ombre-s);
    transition: transform var(--vvn-transition), background var(--vvn-transition), box-shadow var(--vvn-transition);
}
.social-icons li a span {
    color: inherit !important;
    transition: transform var(--vvn-transition-lente);
}
.social-icons li a:hover,
.social-icons li a:focus {
    transform: translateY(-2px) scale(1.06);
    background: var(--vvn-vert-fonce);
    box-shadow: var(--vvn-ombre);
}
.social-icons li a:hover span,
.social-icons li a:focus span {
    transform: rotate(360deg);
}

/* boutons de partage des articles : même style que les réseaux sociaux */
.article-social-share .social-share-icon ul {
    display: inline-flex;
    gap: var(--vvn-esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.article-social-share .social-share-icon ul li {
    margin: 0 !important;
}
.article-social-share .social-share-icon ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vvn-bleu-fonce);
    color: var(--vvn-blanc) !important;
    font-size: 15px;
    box-shadow: var(--vvn-ombre-s);
    transition: transform var(--vvn-transition), background var(--vvn-transition);
}
.article-social-share .social-share-icon ul li a svg {
    fill: currentColor;
}
.article-social-share .social-share-icon ul li a:hover,
.article-social-share .social-share-icon ul li a:focus {
    transform: translateY(-2px) scale(1.06);
    background: var(--vvn-vert-fonce);
}


/* 7. En-tête et menu principal ----------------------------------------------
   En-tête collant (option déjà active dans le template) qui se réduit au défilement. */

#sp-header {
    height: 80px;
    background: var(--vvn-blanc);
    box-shadow: 0 1px 0 var(--vvn-gris-trait);
    transition: height var(--vvn-transition-lente), box-shadow var(--vvn-transition), background var(--vvn-transition);
}
#sp-header > .container,
#sp-header > .container > .container-inner,
#sp-header > .container > .container-inner > .row,
#sp-header #sp-logo,
#sp-header #sp-logo .sp-column,
#sp-header .logo,
#sp-header .logo > a {
    height: 100%;
}
#sp-header .logo,
#sp-header .logo > a {
    display: flex;
    align-items: center;
}
#sp-header .logo-image {
    height: 62px !important;
    width: auto;
    transition: height var(--vvn-transition-lente), transform var(--vvn-transition);
}
#sp-header .logo > a:hover .logo-image {
    transform: scale(1.04) rotate(-2deg);
}

/* une fois qu'on a défilé : plus bas, translucide, ombre douce */
#sp-header.header-sticky {
    height: 62px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: var(--vvn-ombre);
}
#sp-header.header-sticky .logo-image {
    height: 46px !important;
}

/* menu : des boutons arrondis, légèrement plus grands que le texte */
@media (min-width: 992px) {
    #sp-header .sp-megamenu-parent {
        display: flex !important;
        align-items: center;
        gap: 2px;
        margin: 0;
    }
}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    line-height: 1.2;
    font-size: 14px;
    font-weight: 600;
    color: var(--vvn-texte);
    border-radius: var(--vvn-rayon-pilule);
    cursor: pointer;
    transition: background var(--vvn-transition), color var(--vvn-transition),
        transform var(--vvn-transition), box-shadow var(--vvn-transition);
}
.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > a:focus,
.sp-megamenu-parent > li > span:hover,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > span {
    background: var(--vvn-bleu-clair);
    color: var(--vvn-bleu-fonce);
    transform: translateY(-1px);
}
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current-item > a,
.sp-megamenu-parent > li.active > span {
    background: var(--vvn-bleu-fonce);
    color: var(--vvn-blanc);
    box-shadow: 0 4px 12px rgba(7, 115, 189, .3);
}
/* petite flèche des sous-menus */
.sp-megamenu-parent > li.sp-has-child > a::after,
.sp-megamenu-parent > li.sp-has-child > span::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 6px;
    font-size: .8em;
    transition: transform var(--vvn-transition);
}
.sp-megamenu-parent > li.sp-has-child:hover > a::after,
.sp-megamenu-parent > li.sp-has-child:hover > span::after {
    transform: rotate(180deg);
}

/* bouton « Inscription » mis en avant */
.sp-megamenu-parent > li > a[href$="/inscription"],
.offcanvas-menu ul.menu > li > a[href$="/inscription"] {
    background: var(--vvn-vert-fonce);
    color: var(--vvn-blanc) !important;
    box-shadow: 0 4px 12px rgba(47, 125, 61, .3);
}
.sp-megamenu-parent > li > a[href$="/inscription"]:hover,
.sp-megamenu-parent > li > a[href$="/inscription"]:focus {
    background: var(--vvn-vert);
    color: var(--vvn-blanc);
}
.sp-megamenu-parent > li > a[href$="/inscription"]::before {
    animation: vvn-pulsation 2.4s ease-in-out infinite;
}

/* sous-menus : carte arrondie */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    padding: 8px;
    border-radius: var(--vvn-rayon);
    border: 1px solid var(--vvn-gris-trait);
    background: var(--vvn-blanc);
    box-shadow: var(--vvn-ombre-l);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--vvn-rayon-s);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--vvn-texte);
    transition: background var(--vvn-transition), color var(--vvn-transition), padding var(--vvn-transition);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus {
    background: var(--vvn-bleu-pale);
    color: var(--vvn-bleu-fonce);
    padding-left: 16px;
}

/* icônes devant chaque entrée (menu ordinateur + menu mobile) */
.sp-megamenu-parent a::before,
.sp-megamenu-parent li.sp-has-child > span::before,
.offcanvas-menu ul.menu a::before,
.offcanvas-menu ul.menu .menu-separator::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    width: 1.2em;
    margin-right: .45em;
    text-align: center;
    font-size: .95em;
    transition: transform var(--vvn-transition-lente);
}
.sp-megamenu-parent li:hover > a::before,
.sp-megamenu-parent li:hover > span::before,
.offcanvas-menu ul.menu a:hover::before {
    transform: scale(1.2) rotate(-8deg);
}
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href$="/accueil"]::before { content: "\f015"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href$="/inscription"]::before { content: "\f234"; }
.sp-megamenu-parent li.sp-has-child > span.sp-menu-separator::before,
.offcanvas-menu ul.menu .menu-separator::before { content: "\f783"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="bulletin-calendriers"]::before { content: "\f073"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="traces-gps"]::before,
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="parcours"]::before { content: "\f4d7"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href="/index.php"]::before,
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href$="/la-tatave"]::before { content: "\f206"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href$="/video"]::before { content: "\f03d"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href$="/contacts-bureau"]::before { content: "\f0e0"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href$="/actualites"]::before { content: "\f004"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href$="/petites-annonces"]::before { content: "\f0a1"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href$="/petites-annonces/petites-annonces"]::before { content: "\f02b"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="infos-bureau"]::before { content: "\f05a"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="vetements"]::before { content: "\f553"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="photos"]::before { content: "\f302"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="licence"]::before { content: "\f2c2"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="projets-sorties"]::before { content: "\f279"; }
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="profile"]::before,
:is(.sp-megamenu-parent, .offcanvas-menu ul.menu) a[href*="users/login"]::before { content: "\f007"; }

/* tout le menu tient sur une ligne, à côté du logo :
   - le texte des boutons ne passe jamais à la ligne ;
   - sur ordinateur, les boutons du haut n'ont pas d'icône (sauf « Inscription ») pour gagner la place,
     les icônes restent dans les sous-menus et dans le menu mobile ;
   - en dessous de 1200 px de large, le menu du haut laisse la place au bouton « burger ». */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    white-space: nowrap;
}
.sp-megamenu-parent > li > a:not([href$="/inscription"])::before,
.sp-megamenu-parent > li > span::before {
    content: none !important;
}
@media (max-width: 1199.98px) {
    #sp-header .sp-megamenu-parent {
        display: none !important;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span {
        padding: 8px 10px;
        font-size: 13.5px;
    }
}

/* bouton « burger » */
#offcanvas-toggler {
    width: 44px;
    height: 44px;
    margin-left: var(--vvn-esp-2);
    justify-content: center;
    border-radius: 50%;
    transition: background var(--vvn-transition);
}
#offcanvas-toggler:hover,
#offcanvas-toggler:focus {
    background: var(--vvn-bleu-clair);
}
.burger-icon > span {
    background-color: var(--vvn-texte);
    border-radius: 2px;
}


/* 8. Menu mobile ---------------------------------------------------------------
   Une carte arrondie qui fait juste la hauteur des boutons, au lieu de tout le côté de l'écran. */

.offcanvas-menu {
    top: 12px !important;
    height: auto;
    max-height: calc(100vh - 24px);
    width: min(320px, calc(100vw - 24px));
    border-radius: var(--vvn-rayon-l);
    background: var(--vvn-blanc);
    box-shadow: var(--vvn-ombre-l);
    overflow: hidden;
    transition: right var(--vvn-transition-lente), opacity var(--vvn-transition-lente), transform var(--vvn-transition-lente);
}
.offcanvs-position-right .offcanvas-menu {
    right: calc(-1 * min(320px, 100vw) - 40px) !important;
    opacity: 0;
    transform: scale(.96);
    transform-origin: top right;
}
.offcanvs-position-right.offcanvas-active .offcanvas-menu {
    right: 12px !important;
    opacity: 1;
    transform: none;
}
/* le template grisait les liens du menu mobile (opacité 70 %) : on les affiche pleinement */
.offcanvas-menu ul.menu a,
.offcanvas-menu ul.menu .menu-separator {
    opacity: 1 !important;
}
/* « Inscription » reste vert dans le menu mobile, même survolé ou sélectionné */
.offcanvas-menu ul.menu > li > a[href$="/inscription"],
.offcanvas-menu ul.menu > li > a[href$="/inscription"]:hover,
.offcanvas-menu ul.menu > li > a[href$="/inscription"]:focus {
    background: var(--vvn-vert-fonce) !important;
    color: var(--vvn-blanc) !important;
}
.offcanvas-menu > .d-flex {
    padding: 10px 12px 0 !important;
    justify-content: flex-end !important;
}
.offcanvas-menu .offcanvas-inner {
    max-height: calc(100vh - 90px);
    padding: 4px 12px 14px;
}
.offcanvas-menu .offcanvas-inner .header-modules:empty {
    display: none !important;
}
.offcanvas-menu ul.menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.offcanvas-menu ul.menu > li {
    margin: 0;
    padding: 0;
    border: 0;
}
.offcanvas-menu ul.menu > li > a,
.offcanvas-menu ul.menu > li > .menu-separator {
    display: flex !important;
    align-items: center;
    padding: 11px 14px !important;
    border-radius: var(--vvn-rayon);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--vvn-texte);
    transition: background var(--vvn-transition), color var(--vvn-transition);
}
.offcanvas-menu ul.menu > li > a:hover,
.offcanvas-menu ul.menu > li > a:focus,
.offcanvas-menu ul.menu > li > .menu-separator:hover {
    background: var(--vvn-bleu-pale);
    color: var(--vvn-bleu-fonce);
}
.offcanvas-menu ul.menu > li.active > a,
.offcanvas-menu ul.menu > li.current > a {
    background: var(--vvn-bleu-fonce);
    color: var(--vvn-blanc) !important;
}
.offcanvas-menu ul.menu ul.menu-child {
    margin: 2px 0 6px 14px;
    padding: 0 0 0 10px;
    border-left: 2px solid var(--vvn-bleu-clair);
}
.offcanvas-menu ul.menu ul.menu-child li a {
    display: flex !important;
    align-items: center;
    padding: 8px 12px !important;
    border-radius: var(--vvn-rayon-s);
    font-size: 14px;
    font-weight: 500;
    color: var(--vvn-texte-doux);
}
.offcanvas-menu ul.menu ul.menu-child li a:hover {
    background: var(--vvn-bleu-pale);
    color: var(--vvn-bleu-fonce);
}


/* 9. Cohérence générale -------------------------------------------------------- */

/* respiration entre l'en-tête, le contenu et le pied de page */
#sp-main-body {
    padding: clamp(28px, 4vw, 56px) 0;
}

/* boutons : un seul style dans tout le site */
.btn,
button[type="submit"],
input[type="submit"],
input[type="button"] {
    border-radius: var(--vvn-rayon-pilule) !important;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .62em 1.5em;
    transition: background var(--vvn-transition), border-color var(--vvn-transition), color var(--vvn-transition),
        transform var(--vvn-transition), box-shadow var(--vvn-transition);
}
.btn-primary,
button[type="submit"]:not([class*="btn-"]),
input[type="submit"]:not([class*="btn-"]) {
    background: var(--vvn-bleu-fonce) !important;
    border-color: var(--vvn-bleu-fonce) !important;
    color: var(--vvn-blanc) !important;
    box-shadow: 0 4px 12px rgba(7, 115, 189, .25);
}
.btn-primary:hover,
.btn-primary:focus,
button[type="submit"]:not([class*="btn-"]):hover,
input[type="submit"]:not([class*="btn-"]):hover {
    background: var(--vvn-vert-fonce) !important;
    border-color: var(--vvn-vert-fonce) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(47, 125, 61, .3);
}
.btn-secondary,
.btn-outline-primary {
    background: var(--vvn-blanc) !important;
    border: 2px solid var(--vvn-bleu-fonce) !important;
    color: var(--vvn-bleu-fonce) !important;
}
.btn-secondary:hover,
.btn-outline-primary:hover {
    background: var(--vvn-bleu-pale) !important;
    transform: translateY(-1px);
}
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(10, 148, 240, .45);
    outline-offset: 2px;
}

/* champs de formulaire */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    border: 1.5px solid var(--vvn-gris-trait);
    border-radius: var(--vvn-rayon-s);
    background-color: var(--vvn-blanc);
    color: var(--vvn-texte);
    transition: border-color var(--vvn-transition), box-shadow var(--vvn-transition);
}
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--vvn-bleu);
    box-shadow: 0 0 0 4px rgba(10, 148, 240, .15);
    outline: none;
}
.input-group-text {
    border: 1.5px solid var(--vvn-gris-trait);
    background: var(--vvn-bleu-pale);
    color: var(--vvn-bleu-fonce);
}
.input-group > .input-group-text:first-child {
    border-radius: var(--vvn-rayon-s) 0 0 var(--vvn-rayon-s);
}
.input-group > .form-control:last-child {
    border-radius: 0 var(--vvn-rayon-s) var(--vvn-rayon-s) 0;
}

/* modules de la colonne latérale : des cartes */
#sp-right .sp-module,
#sp-left .sp-module {
    display: block;
    margin: 0 0 var(--vvn-esp-5) !important;
    padding: var(--vvn-esp-5);
    border: 1px solid var(--vvn-gris-trait);
    border-radius: var(--vvn-rayon);
    background: var(--vvn-blanc);
    box-shadow: var(--vvn-ombre-s);
}
.sp-module .sp-module-title {
    position: relative;
    margin: 0 0 var(--vvn-esp-4);
    padding-bottom: var(--vvn-esp-2);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vvn-texte);
}
.sp-module .sp-module-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: var(--vvn-rayon-pilule);
    background: linear-gradient(90deg, var(--vvn-bleu), var(--vvn-vert));
}

/* fil d'Ariane : une pastille discrète */
.breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 8px 16px;
    border-radius: var(--vvn-rayon-pilule);
    background: var(--vvn-bleu-pale);
    font-size: .85rem;
}
.breadcrumb a {
    font-weight: 600;
    text-decoration: none;
}

/* images cliquables : survol doux */
a img {
    transition: transform var(--vvn-transition-lente), box-shadow var(--vvn-transition-lente), filter var(--vvn-transition);
}
[itemprop="articleBody"] a:hover img,
.sp-module a:hover img {
    transform: translateY(-2px);
    box-shadow: var(--vvn-ombre);
    filter: saturate(1.08);
}

/* tableaux larges : défilement horizontal (enveloppe ajoutée par custom.js) */
.vvn-table-defile {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 var(--vvn-esp-4);
}

/* bouton « retour en haut » */
.sp-scroll-up {
    width: 46px;
    height: 46px;
    line-height: 46px;
    right: 20px;
    bottom: 24px;
    background: var(--vvn-bleu-fonce);
    color: var(--vvn-blanc);
    box-shadow: var(--vvn-ombre);
    font-size: 18px;
}
.sp-scroll-up:hover,
.sp-scroll-up:focus {
    background: var(--vvn-vert-fonce);
    color: var(--vvn-blanc);
    transform: translateY(-3px);
}

/* animations partagées */
@keyframes vvn-sonnerie {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-18deg); }
    40% { transform: rotate(16deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(6deg); }
}
@keyframes vvn-rebond {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-4px); }
    65% { transform: translateY(1px); }
}
@keyframes vvn-pulsation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* 10. Animations et micro-interactions ------------------------------------------
   Actives seulement si le JavaScript tourne (classe vvn-js posée par custom.js) :
   sans JavaScript, tout reste visible normalement. */

/* transition douce entre les pages (navigateurs récents) */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: vvn-sortie .25s ease both;
}
::view-transition-new(root) {
    animation: vvn-entree .35s ease both;
}
@keyframes vvn-sortie {
    to { opacity: 0; transform: translateY(-6px); }
}
@keyframes vvn-entree {
    from { opacity: 0; transform: translateY(8px); }
}

/* apparition douce des blocs quand ils arrivent à l'écran */
.vvn-js .vvn-apparition {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--vvn-delai, 0s);
}
.vvn-js .vvn-apparition.vvn-visible {
    opacity: 1;
    transform: none;
}

/* images : fondu à la fin du chargement */
.vvn-js img.vvn-image-attente {
    opacity: 0;
    filter: blur(6px);
}
.vvn-js img.vvn-image-prete {
    opacity: 1;
    filter: none;
    transition: opacity .6s ease, filter .6s ease;
}


/* 11. Page d'erreur (404, 403, 500) ---------------------------------------------
   Gabarit : templates/shaper_helixultimate/error.php (version du club). */

html.error-page,
html.error-page body.vvn-erreur {
    min-height: 100%;
}
body.vvn-erreur {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 15% 20%, rgba(10, 148, 240, .16), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(62, 155, 79, .18), transparent 45%),
        linear-gradient(160deg, var(--vvn-bleu-pale), var(--vvn-vert-clair));
    font-family: var(--vvn-police);
    color: var(--vvn-texte);
    text-align: center;
}
.vvn-erreur-carte {
    width: 100%;
    max-width: 620px;
    padding: 36px 28px 30px;
    border-radius: var(--vvn-rayon-l);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--vvn-ombre-l);
    animation: vvn-entree .6s cubic-bezier(.2, .7, .2, 1) both;
}
.vvn-erreur-logo img {
    display: block;
    width: 130px;
    height: auto;
    margin: 0 auto 6px;
    filter: drop-shadow(0 6px 14px rgba(20, 40, 60, .18));
    transition: transform var(--vvn-transition-lente);
}
.vvn-erreur-logo:hover img {
    transform: rotate(-6deg) scale(1.05);
}
.vvn-erreur-code {
    margin: 0;
    font-size: clamp(4.5rem, 3rem + 8vw, 7.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(90deg, var(--vvn-bleu), var(--vvn-vert));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* petit vélo qui roule sur la route */
.vvn-erreur-route {
    position: relative;
    height: 46px;
    margin: 4px auto 14px;
    max-width: 360px;
    overflow: hidden;
    border-bottom: 3px dashed var(--vvn-gris-clair);
}
.vvn-erreur-velo {
    position: absolute;
    bottom: 2px;
    left: -70px;
    color: var(--vvn-bleu-fonce);
    animation: vvn-velo-roule 4.5s linear infinite;
}
@keyframes vvn-velo-roule {
    0% { left: -70px; transform: translateY(0); }
    25% { transform: translateY(-2px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-2px); }
    100% { left: calc(100% + 10px); transform: translateY(0); }
}

.vvn-erreur-titre {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
    font-weight: 800;
    color: var(--vvn-texte);
}
.vvn-erreur-texte {
    margin: 0 auto 22px;
    max-width: 46ch;
    color: var(--vvn-texte-doux);
    line-height: 1.6;
}
.vvn-erreur-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.vvn-erreur-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* 12. Préférences d'affichage : mode sombre et taille du texte ------------------
   custom.js pose sur <html> : data-theme="clair|sombre" et data-taille="normal|grand|tres-grand".
   Le choix « Auto » suit le réglage de l'appareil (clair ou sombre). */

/* taille du texte (tout le texte des articles suit, les titres aussi) */
html[data-taille="grand"] {
    font-size: 112.5%;
}
html[data-taille="tres-grand"] {
    font-size: 125%;
}

/* ---------- panneau de préférences ---------- */
.vvn-prefs-bouton {
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--vvn-blanc);
    color: var(--vvn-bleu-fonce);
    box-shadow: var(--vvn-ombre);
    font-size: 18px;
    cursor: pointer;
    transition: transform var(--vvn-transition), background var(--vvn-transition);
}
.vvn-prefs-bouton:hover,
.vvn-prefs-bouton:focus-visible {
    transform: translateY(-3px) rotate(20deg);
}
.vvn-prefs-panneau {
    position: fixed;
    left: 20px;
    bottom: 82px;
    z-index: 1001;
    width: min(290px, calc(100vw - 40px));
    padding: 16px;
    border-radius: var(--vvn-rayon-l);
    background: var(--vvn-blanc);
    color: var(--vvn-texte);
    box-shadow: var(--vvn-ombre-l);
    border: 1px solid var(--vvn-gris-trait);
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transform-origin: bottom left;
    pointer-events: none;
    transition: opacity var(--vvn-transition), transform var(--vvn-transition);
}
.vvn-prefs-panneau.vvn-ouvert {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.vvn-prefs-panneau h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: 800;
}
.vvn-prefs-panneau h2::after {
    display: none;
}
.vvn-prefs-groupe {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
.vvn-prefs-groupe:last-child {
    margin-bottom: 0;
}
.vvn-prefs-groupe legend {
    margin: 0 0 6px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vvn-texte-doux);
}
.vvn-prefs-choix {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--vvn-rayon-pilule);
    background: var(--vvn-gris-fond);
}
.vvn-prefs-choix button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    border: 0;
    border-radius: var(--vvn-rayon-pilule);
    background: transparent;
    color: var(--vvn-texte);
    font: 600 .85rem/1.2 var(--vvn-police);
    cursor: pointer;
    transition: background var(--vvn-transition), color var(--vvn-transition), box-shadow var(--vvn-transition);
}
.vvn-prefs-choix button[aria-pressed="true"] {
    background: var(--vvn-bleu-fonce);
    color: #fff;
    box-shadow: 0 3px 10px rgba(7, 115, 189, .3);
}
@media (max-width: 575.98px) {
    .vvn-prefs-bouton {
        left: 14px;
        bottom: 18px;
    }
    .vvn-prefs-panneau {
        left: 14px;
        bottom: 74px;
    }
}


/* ---------- mode sombre ---------- */
html[data-theme="sombre"] {
    color-scheme: dark;
    --vvn-texte: #E6EDF3;
    --vvn-texte-doux: #A9B4C0;
    --vvn-bleu-clair: rgba(10, 148, 240, .18);
    --vvn-bleu-pale: #16212C;
    --vvn-vert-clair: rgba(62, 155, 79, .18);
    --vvn-gris-trait: #2C3947;
    --vvn-gris-fond: #1B242E;
    --vvn-fond: #11161C;
    --vvn-surface: #18202A;
    --vvn-lien: #5BB8F5;
    --vvn-ombre-s: 0 2px 8px rgba(0, 0, 0, .35);
    --vvn-ombre: 0 6px 20px rgba(0, 0, 0, .45);
    --vvn-ombre-l: 0 14px 40px rgba(0, 0, 0, .55);
}

/* fonds de page */
html[data-theme="sombre"] body {
    background-color: #0B0F14 !important;
    background-image: linear-gradient(rgba(8, 12, 16, .78), rgba(8, 12, 16, .78)), url("/images/fond-min-1.jpg") !important;
    color: var(--vvn-texte);
}
html[data-theme="sombre"] .body-innerwrapper {
    background-color: var(--vvn-fond) !important;
}
html[data-theme="sombre"] #sp-main-body {
    background-image: linear-gradient(rgba(17, 22, 28, .94), rgba(17, 22, 28, .94)), url("/images/fond.jpg") !important;
}
html[data-theme="sombre"] #sp-top-bar {
    background: linear-gradient(90deg, #132232, #142619);
    border-bottom-color: var(--vvn-gris-trait);
}
html[data-theme="sombre"] #sp-top-bar .sp-contact-info li a {
    background: var(--vvn-surface);
    color: var(--vvn-texte);
}
html[data-theme="sombre"] #sp-header {
    background: #151C24;
    box-shadow: 0 1px 0 var(--vvn-gris-trait);
}
html[data-theme="sombre"] #sp-header.header-sticky {
    background: rgba(21, 28, 36, .9);
}
/* le logo garde un fond blanc arrondi pour rester lisible */
html[data-theme="sombre"] #sp-header .logo-image {
    padding: 4px 8px;
    border-radius: 12px;
    background: #fff;
}

/* textes et liens */
html[data-theme="sombre"] a {
    color: var(--vvn-lien);
}
html[data-theme="sombre"] a:hover,
html[data-theme="sombre"] a:focus {
    color: #7FD18C;
}
html[data-theme="sombre"] :is(.article-details, .com-content-article, .article-list) :is(h1, h2) {
    color: var(--vvn-texte);
}
html[data-theme="sombre"] :is(.article-details, .com-content-article, .article-list) h3 {
    color: var(--vvn-lien);
}
html[data-theme="sombre"] :is(.article-details, .com-content-article, .article-list) h4 {
    color: #7FD18C;
}
/* couleurs de texte très sombres ou fonds blancs collés dans d'anciens articles */
html[data-theme="sombre"] #sp-main-body :is([style*="color: #000"], [style*="color:#000"], [style*="color: rgb(0, 0, 0)"], [style*="color: #333"], [style*="color: #222"], [style*="color: black"]) {
    color: var(--vvn-texte) !important;
}
html[data-theme="sombre"] #sp-main-body :is([style*="background-color: #fff"], [style*="background-color: #FFF"], [style*="background-color: rgb(255, 255, 255)"], [style*="background: #fff"], [style*="background-color: white"]) {
    background-color: transparent !important;
}
html[data-theme="sombre"] #sp-main-body :is(table, td, th) {
    border-color: var(--vvn-gris-trait) !important;
}

/* menus */
html[data-theme="sombre"] .sp-megamenu-parent > li > a,
html[data-theme="sombre"] .sp-megamenu-parent > li > span {
    color: var(--vvn-texte);
}
html[data-theme="sombre"] .sp-megamenu-parent > li:hover > a,
html[data-theme="sombre"] .sp-megamenu-parent > li:hover > span {
    color: #fff;
}
html[data-theme="sombre"] .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner,
html[data-theme="sombre"] .offcanvas-menu {
    background: var(--vvn-surface);
    border-color: var(--vvn-gris-trait);
}
html[data-theme="sombre"] .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
html[data-theme="sombre"] .offcanvas-menu ul.menu > li > a,
html[data-theme="sombre"] .offcanvas-menu ul.menu > li > .menu-separator,
html[data-theme="sombre"] .offcanvas-menu ul.menu ul.menu-child li a,
html[data-theme="sombre"] .offcanvas-menu .fa,
html[data-theme="sombre"] .offcanvas-menu .fas {
    color: var(--vvn-texte);
}
html[data-theme="sombre"] .burger-icon > span {
    background-color: var(--vvn-texte);
}

/* cartes, modules, formulaires */
html[data-theme="sombre"] #sp-right .sp-module,
html[data-theme="sombre"] #sp-left .sp-module,
html[data-theme="sombre"] .vvn-prefs-panneau,
html[data-theme="sombre"] .vvn-prefs-bouton {
    background: var(--vvn-surface);
    border-color: var(--vvn-gris-trait);
    color: var(--vvn-texte);
}
html[data-theme="sombre"] .vvn-prefs-bouton {
    color: var(--vvn-lien);
}
html[data-theme="sombre"] :is(.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea) {
    background-color: #0F141A;
    color: var(--vvn-texte);
    border-color: var(--vvn-gris-trait);
}
html[data-theme="sombre"] .input-group-text {
    background: var(--vvn-gris-fond);
    color: var(--vvn-lien);
    border-color: var(--vvn-gris-trait);
}
html[data-theme="sombre"] :is(.btn-secondary, .btn-outline-primary) {
    background: transparent !important;
    border-color: var(--vvn-lien) !important;
    color: var(--vvn-lien) !important;
}
html[data-theme="sombre"] :is(.btn-secondary, .btn-outline-primary):hover {
    background: var(--vvn-bleu-clair) !important;
}

/* pied de page : les logos partenaires (texte sombre) gardent un fond clair */
html[data-theme="sombre"] #sp-footer,
html[data-theme="sombre"] #sp-bottom {
    background-color: #0B1015 !important;
    color: var(--vvn-texte-doux);
}
html[data-theme="sombre"] #sp-footer img {
    padding: 6px 10px;
    border-radius: 10px;
    background: #fff;
}

/* carte des parcours */
html[data-theme="sombre"] :is(.vp-item, .vp-chiffres > div, .vp-carte) {
    background: var(--vvn-surface);
}
html[data-theme="sombre"] .vp-outils .vp-recherche {
    background-color: #0F141A;
}
html[data-theme="sombre"] .vp .leaflet-tile {
    filter: brightness(.82) contrast(1.05) !important;
}

/* page d'erreur */
html[data-theme="sombre"] body.vvn-erreur {
    background: radial-gradient(circle at 15% 20%, rgba(10, 148, 240, .18), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(62, 155, 79, .18), transparent 45%),
        #0B0F14 !important;
}
html[data-theme="sombre"] .vvn-erreur-carte {
    background: rgba(24, 32, 42, .95);
}

/* page d'erreur : elle n'a pas de script, elle suit donc directement le réglage de l'appareil */
@media (prefers-color-scheme: dark) {
    body.vvn-erreur {
        background: radial-gradient(circle at 15% 20%, rgba(10, 148, 240, .18), transparent 45%),
            radial-gradient(circle at 85% 80%, rgba(62, 155, 79, .18), transparent 45%),
            #0B0F14;
        color: #E6EDF3;
    }
    body.vvn-erreur .vvn-erreur-carte {
        background: rgba(24, 32, 42, .95);
    }
    body.vvn-erreur .vvn-erreur-titre {
        color: #E6EDF3;
    }
    body.vvn-erreur .vvn-erreur-texte {
        color: #A9B4C0;
    }
}

/* liens que le template colore en gris foncé (titres d'articles, liens des modules) */
html[data-theme="sombre"] :is(.article-header, .article-list .article-header, .sp-module) a:not(.btn) {
    color: var(--vvn-lien);
}
html[data-theme="sombre"] :is(.article-header h1, .article-header h2) a:not(.btn) {
    color: var(--vvn-texte);
}
html[data-theme="sombre"] .sp-module ul > li {
    border-color: var(--vvn-gris-trait) !important;
}


/* 13. Formulaires : inscription en étapes, libellés, messages --------------------
   Uniquement les formulaires du site (Joomla). Les formulaires Yapla (liens externes) ne sont pas concernés. */

/* libellés toujours visibles, au-dessus du champ */
#sp-main-body .control-group {
    margin-bottom: var(--vvn-esp-4);
}
#sp-main-body .control-group .form-label,
#sp-main-body .control-group > .control-label label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--vvn-texte);
}
#sp-main-body .form-label .star,
#sp-main-body label .star {
    color: #C0392B;
}
#sp-main-body .control-group .form-control {
    padding: .7em .9em;
}

/* inscription : barre de progression */
.vvn-progression {
    margin: 0 0 var(--vvn-esp-5);
}
.vvn-progression-barre {
    height: 8px;
    border-radius: var(--vvn-rayon-pilule);
    background: var(--vvn-gris-fond);
    overflow: hidden;
}
.vvn-progression-barre span {
    display: block;
    height: 100%;
    width: 33%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vvn-bleu), var(--vvn-vert));
    transition: width var(--vvn-transition-lente);
}
.vvn-progression-etapes {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.vvn-progression-etapes li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--vvn-texte-doux);
    transition: color var(--vvn-transition);
}
.vvn-progression-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vvn-gris-fond);
    color: var(--vvn-texte-doux);
    font-size: 14px;
    transition: background var(--vvn-transition), color var(--vvn-transition), transform var(--vvn-transition);
}
.vvn-progression-etapes li.vvn-actuelle {
    color: var(--vvn-bleu-fonce);
}
.vvn-progression-etapes li.vvn-actuelle .vvn-progression-num {
    background: var(--vvn-bleu-fonce);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(7, 115, 189, .3);
}
.vvn-progression-etapes li.vvn-fait {
    color: var(--vvn-vert-fonce);
}
.vvn-progression-etapes li.vvn-fait .vvn-progression-num {
    background: var(--vvn-vert-fonce);
    color: #fff;
}
.vvn-progression-etapes li.vvn-fait .vvn-progression-num .fas::before {
    content: "\f00c";
}
@media (max-width: 575.98px) {
    .vvn-progression-etapes li:not(.vvn-actuelle) .vvn-progression-titre {
        display: none;
    }
}

/* inscription : une étape à la fois, avec une petite entrée en fondu */
.vvn-etape {
    padding: var(--vvn-esp-5);
    border: 1px solid var(--vvn-gris-trait);
    border-radius: var(--vvn-rayon);
    background: var(--vvn-blanc);
    box-shadow: var(--vvn-ombre-s);
    animation: vvn-entree .35s ease both;
}
.vvn-etape[hidden] {
    display: none !important;
}
.vvn-etape-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: var(--vvn-esp-5);
}
.vvn-etape-nav .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vvn-etape-nav .btn:only-child {
    margin-left: auto;
}
html[data-theme="sombre"] .vvn-etape {
    background: var(--vvn-surface);
}

/* messages de Joomla (confirmation d'inscription, erreurs…) : clairs et visibles */
#system-message-container .alert {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 var(--vvn-esp-5);
    padding: var(--vvn-esp-4) var(--vvn-esp-5);
    border: 0;
    border-left: 5px solid var(--vvn-bleu);
    border-radius: var(--vvn-rayon);
    background: var(--vvn-bleu-pale);
    color: var(--vvn-texte);
    box-shadow: var(--vvn-ombre-s);
    animation: vvn-entree .45s cubic-bezier(.2, .7, .2, 1) both;
}
#system-message-container .alert::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f05a";
    font-size: 1.5rem;
    line-height: 1;
    color: var(--vvn-bleu-fonce);
}
#system-message-container .alert-success,
#system-message-container .alert-message {
    border-left-color: var(--vvn-vert);
    background: var(--vvn-vert-clair);
}
#system-message-container .alert-success::before,
#system-message-container .alert-message::before {
    content: "\f058";
    color: var(--vvn-vert-fonce);
    animation: vvn-pulsation 1.2s ease 2;
}
#system-message-container .alert-danger,
#system-message-container .alert-error {
    border-left-color: #C0392B;
    background: #FDECEA;
}
#system-message-container .alert-danger::before,
#system-message-container .alert-error::before {
    content: "\f06a";
    color: #C0392B;
}
#system-message-container .alert-warning {
    border-left-color: #E0A100;
    background: #FFF6E5;
}
#system-message-container .alert-warning::before {
    content: "\f071";
    color: #B07D00;
}
html[data-theme="sombre"] #system-message-container .alert-danger,
html[data-theme="sombre"] #system-message-container .alert-error {
    background: rgba(192, 57, 43, .18);
}
html[data-theme="sombre"] #system-message-container .alert-warning {
    background: rgba(224, 161, 0, .16);
}
#system-message-container .alert .alert-heading,
#system-message-container .alert h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: inherit;
}
#system-message-container .alert .btn-close,
#system-message-container .alert joomla-alert-button {
    margin-left: auto;
}

/* boutons d'envoi : état « envoi en cours » (évite les doubles clics, posé par custom.js) */
.vvn-envoi-en-cours {
    pointer-events: none;
    opacity: .75;
}
.vvn-envoi-en-cours::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: vvn-tourne .7s linear infinite;
}
@keyframes vvn-tourne {
    to { transform: rotate(360deg); }
}


/* 14. Page de présentation : bandeau, chiffres, diaporama, actualités, aperçu de carte ----------
   Ces blocs sont des modules « Personnalisé » de Joomla : textes, liens et photos se modifient dans le panel.
   Modèles prêts à coller : accueil_vvn/modules_accueil.html */

/* bandeau d'accroche */
.vvn-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(320px, 52vh, 520px);
    margin: 0 0 var(--vvn-esp-7);
    padding: clamp(24px, 4vw, 48px);
    border-radius: var(--vvn-rayon-l);
    overflow: hidden;
    color: #fff;
    background: #0B2233 var(--vvn-hero-image, none) center / cover no-repeat;
    box-shadow: var(--vvn-ombre-l);
    isolation: isolate;
}
.vvn-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 20, 30, .05) 20%, rgba(8, 20, 30, .78) 100%),
        linear-gradient(90deg, rgba(7, 115, 189, .35), transparent 60%);
}
.vvn-hero-badge {
    display: block;
    margin: 0 0 14px;
    width: clamp(70px, 8vw, 100px);
    height: auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
    animation: vvn-flotte 6s ease-in-out infinite;
}
.vvn-hero h1,
.vvn-hero h2 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em;
    color: #fff !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .35);
}
.vvn-hero h1::after,
.vvn-hero h2::after {
    display: none !important;
}
.vvn-hero p {
    max-width: 52ch;
    margin: 0 0 22px !important;
    font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}
.vvn-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.vvn-hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--vvn-rayon-pilule);
    font-weight: 700;
    text-decoration: none !important;
    transition: transform var(--vvn-transition), box-shadow var(--vvn-transition), background var(--vvn-transition);
}
.vvn-hero-actions a.vvn-principal {
    background: var(--vvn-vert-fonce);
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(47, 125, 61, .45);
}
.vvn-hero-actions a.vvn-principal:hover {
    background: var(--vvn-vert);
    transform: translateY(-2px);
}
.vvn-hero-actions a.vvn-secondaire {
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.vvn-hero-actions a.vvn-secondaire:hover {
    background: rgba(255, 255, 255, .28);
    transform: translateY(-2px);
}
.vvn-hero-actions a .fas {
    transition: transform var(--vvn-transition);
}
.vvn-hero-actions a:hover .fas {
    transform: translateX(3px);
}
@keyframes vvn-flotte {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-6px) rotate(-2deg); }
}

/* chiffres clés */
.vvn-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--vvn-esp-4);
    margin: 0 0 var(--vvn-esp-7);
    padding: 0;
    list-style: none;
}
.vvn-chiffres li {
    margin: 0 !important;
    padding: var(--vvn-esp-5) var(--vvn-esp-4);
    border-radius: var(--vvn-rayon);
    background: var(--vvn-blanc);
    border: 1px solid var(--vvn-gris-trait);
    box-shadow: var(--vvn-ombre-s);
    text-align: center;
    transition: transform var(--vvn-transition), box-shadow var(--vvn-transition);
}
.vvn-chiffres li:hover {
    transform: translateY(-4px);
    box-shadow: var(--vvn-ombre);
}
.vvn-chiffres li::marker {
    content: none;
}
.vvn-chiffres .vvn-chiffre-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--vvn-bleu-clair);
    color: var(--vvn-bleu-fonce);
    font-size: 22px;
}
.vvn-chiffres li:nth-child(even) .vvn-chiffre-icone {
    background: var(--vvn-vert-clair);
    color: var(--vvn-vert-fonce);
}
.vvn-chiffres li:hover .vvn-chiffre-icone .fas {
    animation: vvn-rebond .6s ease;
}
.vvn-chiffres strong {
    display: block;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    font-weight: 900;
    line-height: 1.1;
    background: linear-gradient(90deg, var(--vvn-bleu-fonce), var(--vvn-vert-fonce));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vvn-chiffres span.vvn-chiffre-texte {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    color: var(--vvn-texte-doux);
}
html[data-theme="sombre"] .vvn-chiffres li {
    background: var(--vvn-surface);
}
html[data-theme="sombre"] .vvn-chiffres strong {
    background: linear-gradient(90deg, #5BB8F5, #7FD18C);
    -webkit-background-clip: text;
    background-clip: text;
}

/* diaporama des sorties */
.vvn-diapo {
    position: relative;
    margin: 0 0 var(--vvn-esp-7);
    border-radius: var(--vvn-rayon-l);
    overflow: hidden;
    background: #0B1015;
    box-shadow: var(--vvn-ombre-l);
    aspect-ratio: 16 / 7;
    min-height: 240px;
}
.vvn-diapo figure {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    opacity: 0;
    transition: opacity .9s ease;
}
.vvn-diapo figure.vvn-actif {
    opacity: 1;
    z-index: 1;
}
.vvn-diapo figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    transform: scale(1.06);
    transition: transform 7s ease-out;
}
.vvn-diapo figure.vvn-actif img {
    transform: scale(1);
}
.vvn-diapo figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 24px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    color: #fff;
    font-weight: 700;
    font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
    transform: translateY(12px);
    opacity: 0;
    transition: transform .6s ease .3s, opacity .6s ease .3s;
}
.vvn-diapo figure.vvn-actif figcaption {
    transform: none;
    opacity: 1;
}
.vvn-diapo figcaption small {
    display: block;
    margin-top: 2px;
    font-weight: 500;
    font-size: .8em;
    opacity: .85;
}
.vvn-diapo-fleche {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--vvn-texte);
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--vvn-ombre);
    transition: transform var(--vvn-transition), background var(--vvn-transition);
}
.vvn-diapo-fleche:hover {
    background: #fff;
    transform: scale(1.08);
}
.vvn-diapo-precedent {
    left: 14px;
}
.vvn-diapo-suivant {
    right: 14px;
}
.vvn-diapo-points {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 6px;
}
.vvn-diapo-points button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--vvn-rayon-pilule);
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width var(--vvn-transition), background var(--vvn-transition);
}
.vvn-diapo-points button[aria-current="true"] {
    width: 26px;
    background: #fff;
}
@media (max-width: 575.98px) {
    .vvn-diapo {
        aspect-ratio: 4 / 3;
    }
    .vvn-diapo-fleche {
        width: 38px;
        height: 38px;
        margin-top: -19px;
    }
}

/* actualités en vignettes : à mettre en « suffixe de classe du module » : vvn-actus
   (fonctionne avec les modules Joomla « Articles - Catégorie » et « Articles - Dernières actualités ») */
.vvn-actus ul,
ul.vvn-actus,
.vvn-actus .mod-articlescategory,
.vvn-actus .mod-articlesnews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--vvn-esp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.vvn-actus li,
.vvn-actus .mod-articlesnews__item {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 0 var(--vvn-esp-4) !important;
    border: 1px solid var(--vvn-gris-trait) !important;
    border-radius: var(--vvn-rayon);
    background: var(--vvn-blanc);
    box-shadow: var(--vvn-ombre-s);
    overflow: hidden;
    transition: transform var(--vvn-transition), box-shadow var(--vvn-transition);
}
.vvn-actus li:hover,
.vvn-actus .mod-articlesnews__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--vvn-ombre);
}
.vvn-actus li img,
.vvn-actus .mod-articlesnews__item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 0 var(--vvn-esp-3);
    border-radius: 0 !important;
    transition: transform var(--vvn-transition-lente);
}
.vvn-actus li:hover img,
.vvn-actus .mod-articlesnews__item:hover img {
    transform: scale(1.05);
}
.vvn-actus li > *:not(img):not(figure):not(a:first-child),
.vvn-actus .mod-articlesnews__item > *:not(figure) {
    padding-left: var(--vvn-esp-4);
    padding-right: var(--vvn-esp-4);
}
.vvn-actus a.mod-articles-category-title,
.vvn-actus .newsflash-title,
.vvn-actus li > a {
    font-weight: 700;
    color: var(--vvn-texte);
    text-decoration: none;
}
/* toute la carte est cliquable : le lien du titre couvre la vignette */
.vvn-actus a.mod-articles-category-title::after,
.vvn-actus .newsflash-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.vvn-actus .mod-articles-category-date,
.vvn-actus .mod-articles-category-category {
    font-size: .8rem;
    color: var(--vvn-texte-doux);
}
html[data-theme="sombre"] .vvn-actus li,
html[data-theme="sombre"] .vvn-actus .mod-articlesnews__item {
    background: var(--vvn-surface);
}

/* aperçu de la carte des parcours (accueil) */
.vvn-carte-apercu {
    position: relative;
    height: clamp(260px, 38vh, 380px);
    margin: 0 0 var(--vvn-esp-7);
    border-radius: var(--vvn-rayon-l);
    overflow: hidden;
    box-shadow: var(--vvn-ombre);
    border: 1px solid var(--vvn-gris-trait);
    z-index: 0;
}
.vvn-carte-apercu .leaflet-container img,
.vvn-carte-apercu .leaflet-tile {
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.vvn-carte-apercu-lien {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 500;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--vvn-rayon-pilule);
    background: var(--vvn-bleu-fonce);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: var(--vvn-ombre);
    white-space: nowrap;
}
.vvn-carte-apercu-lien:hover {
    background: var(--vvn-vert-fonce);
}
.vvn-carte-apercu .vp-marqueur span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background: var(--vvn-bleu-fonce);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* sections de la page de présentation : moins de blocs empilés, plus d'air */
.vvn-section-titre {
    margin: var(--vvn-esp-7) 0 var(--vvn-esp-5) !important;
    text-align: center;
}
.vvn-section-titre::after {
    left: 50% !important;
    transform: translateX(-50%);
}


/* 15. Pied de page, trombinoscope du bureau, vêtements du club ------------------------
   Modèles prêts à coller : accueil_vvn/modules_pied_de_page.html, accueil_vvn/pages_bureau_vetements.html */

/* ---------- pied de page ---------- */
.vvn-pied {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(28px, 4vw, 48px) 0 var(--vvn-esp-5);
    text-align: left;
}
.vvn-pied h3 {
    position: relative;
    margin: 0 0 var(--vvn-esp-4) !important;
    padding-bottom: var(--vvn-esp-2);
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--vvn-texte) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.vvn-pied h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    border-radius: var(--vvn-rayon-pilule);
    background: linear-gradient(90deg, var(--vvn-bleu), var(--vvn-vert));
}
.vvn-pied-logo img {
    width: 150px;
    height: auto;
    margin-bottom: var(--vvn-esp-3);
}
.vvn-pied-slogan {
    margin: 0 0 var(--vvn-esp-4) !important;
    font-weight: 600;
    color: var(--vvn-texte-doux);
}
.vvn-pied ul.vvn-pied-liens {
    margin: 0;
    padding: 0;
    list-style: none;
}
.vvn-pied ul.vvn-pied-liens li {
    margin: 0 0 8px;
}
.vvn-pied ul.vvn-pied-liens a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vvn-texte);
    text-decoration: none;
    transition: color var(--vvn-transition), transform var(--vvn-transition);
}
.vvn-pied ul.vvn-pied-liens a .fas {
    width: 1.1em;
    color: var(--vvn-vert-fonce);
    text-align: center;
}
.vvn-pied ul.vvn-pied-liens a:hover {
    color: var(--vvn-bleu-fonce);
    transform: translateX(3px);
}
.vvn-pied-carte {
    height: 150px;
    margin-top: var(--vvn-esp-3);
    border-radius: var(--vvn-rayon);
    overflow: hidden;
    border: 1px solid var(--vvn-gris-trait);
    z-index: 0;
}
.vvn-pied-carte .leaflet-container img,
.vvn-pied-carte .leaflet-tile {
    max-width: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.vvn-pied-bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--vvn-esp-4) 0;
    border-top: 1px solid var(--vvn-gris-trait);
    font-size: .85rem;
    color: var(--vvn-texte-doux);
}
.vvn-pied-bas nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.vvn-pied-bas a {
    color: var(--vvn-texte-doux);
}
.vvn-pied-bas a:hover {
    color: var(--vvn-bleu-fonce);
}
@media (max-width: 991.98px) {
    .vvn-pied {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 575.98px) {
    .vvn-pied {
        grid-template-columns: 1fr;
    }
}

/* formulaire newsletter (module « Lettre du club ») */
.vvn-lettre-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vvn-lettre-ligne {
    display: flex;
    gap: 6px;
}
.vvn-lettre-ligne input[type="email"] {
    flex: 1;
    min-width: 0;
    border-radius: var(--vvn-rayon-pilule) !important;
    padding: .65em 1em;
}
.vvn-lettre-ligne button {
    flex: 0 0 auto;
    padding: .65em 1.1em !important;
}
.vvn-lettre-accord {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--vvn-texte-doux);
}
.vvn-lettre-accord input {
    margin-top: 2px;
}
.vvn-lettre-piege {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- trombinoscope du bureau ---------- */
.vvn-trombi {
    margin: 0 0 var(--vvn-esp-7);
}
.vvn-trombi-niveau {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vvn-esp-5);
    margin: 0 0 var(--vvn-esp-6);
    padding: 0;
    list-style: none;
}
.vvn-trombi-niveau + .vvn-trombi-niveau {
    position: relative;
    padding-top: var(--vvn-esp-5);
}
.vvn-trombi-niveau + .vvn-trombi-niveau::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 2px;
    height: 24px;
    background: var(--vvn-gris-trait);
}
.vvn-trombi-carte {
    width: 200px;
    margin: 0 !important;
    padding: var(--vvn-esp-5) var(--vvn-esp-4);
    border-radius: var(--vvn-rayon-l);
    background: var(--vvn-blanc);
    border: 1px solid var(--vvn-gris-trait);
    box-shadow: var(--vvn-ombre-s);
    text-align: center;
    transition: transform var(--vvn-transition), box-shadow var(--vvn-transition);
}
.vvn-trombi-carte:hover {
    transform: translateY(-5px);
    box-shadow: var(--vvn-ombre);
}
.vvn-trombi-carte img {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto var(--vvn-esp-3);
    border-radius: 50% !important;
    object-fit: cover;
    border: 4px solid var(--vvn-blanc);
    box-shadow: 0 0 0 3px var(--vvn-bleu), var(--vvn-ombre-s);
}
.vvn-trombi-niveau--1 .vvn-trombi-carte img {
    width: 140px;
    height: 140px;
    box-shadow: 0 0 0 3px var(--vvn-vert), var(--vvn-ombre);
}
.vvn-trombi-nom {
    display: block;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--vvn-texte);
}
.vvn-trombi-poste {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 12px;
    border-radius: var(--vvn-rayon-pilule);
    background: var(--vvn-bleu-clair);
    color: var(--vvn-bleu-fonce);
    font-size: .8rem;
    font-weight: 700;
}
.vvn-trombi-niveau--1 .vvn-trombi-poste {
    background: var(--vvn-vert-clair);
    color: var(--vvn-vert-fonce);
}
.vvn-trombi-carte p {
    margin: 10px 0 0 !important;
    font-size: .85rem;
    color: var(--vvn-texte-doux);
}
html[data-theme="sombre"] .vvn-trombi-carte {
    background: var(--vvn-surface);
}

/* ---------- vêtements du club : fiches produits ---------- */
.vvn-produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--vvn-esp-5);
    margin: 0 0 var(--vvn-esp-7);
    padding: 0;
    list-style: none;
}
.vvn-produit {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    border-radius: var(--vvn-rayon-l);
    background: var(--vvn-blanc);
    border: 1px solid var(--vvn-gris-trait);
    box-shadow: var(--vvn-ombre-s);
    overflow: hidden;
    transition: transform var(--vvn-transition), box-shadow var(--vvn-transition);
}
.vvn-produit:hover {
    transform: translateY(-4px);
    box-shadow: var(--vvn-ombre);
}
.vvn-produit-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--vvn-gris-fond);
    overflow: hidden;
}
.vvn-produit-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0 !important;
    transition: transform var(--vvn-transition-lente);
}
.vvn-produit:hover .vvn-produit-photo img {
    transform: scale(1.05);
}
.vvn-produit-etiquette {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: var(--vvn-rayon-pilule);
    background: var(--vvn-vert-fonce);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}
.vvn-produit-corps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--vvn-esp-4) var(--vvn-esp-5) var(--vvn-esp-5);
    flex: 1;
}
.vvn-produit-nom {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    color: var(--vvn-texte) !important;
}
.vvn-produit-nom::after {
    display: none !important;
}
.vvn-produit-description {
    margin: 0 !important;
    font-size: .9rem;
    color: var(--vvn-texte-doux);
}
.vvn-produit-tailles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.vvn-produit-tailles li {
    margin: 0 !important;
    min-width: 38px;
    padding: 4px 8px;
    border-radius: var(--vvn-rayon-s);
    border: 1.5px solid var(--vvn-gris-trait);
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
}
.vvn-produit-tailles li::marker {
    content: none;
}
.vvn-produit-prix {
    margin-top: auto !important;
    padding-top: 8px;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--vvn-bleu-fonce);
}
html[data-theme="sombre"] .vvn-produit {
    background: var(--vvn-surface);
}
html[data-theme="sombre"] .vvn-produit-prix {
    color: var(--vvn-lien);
}
.vvn-pied-carte .vp-marqueur span {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background: var(--vvn-vert-fonce);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    animation: vvn-rebond 2s ease-in-out infinite;
}


/* 16. Pastille « Mon compte » dans la barre de navigation -------------------------
   Insérée par le plugin « Système - Mon compte dans le menu » quand un adhérent est connecté. */

.vvn-compte {
    position: relative;
    margin-left: var(--vvn-esp-2);
}
.vvn-compte-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--vvn-rayon-pilule);
    background: var(--vvn-bleu-pale);
    border: 1.5px solid var(--vvn-gris-trait);
    color: var(--vvn-texte) !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--vvn-transition), border-color var(--vvn-transition), box-shadow var(--vvn-transition);
}
.vvn-compte-bouton:hover,
.vvn-compte-bouton[aria-expanded="true"] {
    background: var(--vvn-bleu-clair);
    border-color: var(--vvn-bleu);
    box-shadow: var(--vvn-ombre-s);
}
.vvn-compte-photo {
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--vvn-blanc);
    box-shadow: 0 0 0 2px var(--vvn-vert);
}
.vvn-compte-initiales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--vvn-bleu-fonce), var(--vvn-vert-fonce));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}
.vvn-compte-fleche {
    font-size: 11px;
    transition: transform var(--vvn-transition);
}
.vvn-compte-bouton[aria-expanded="true"] .vvn-compte-fleche {
    transform: rotate(180deg);
}
.vvn-compte-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1002;
    min-width: 250px;
    padding: 8px;
    border-radius: var(--vvn-rayon);
    border: 1px solid var(--vvn-gris-trait);
    background: var(--vvn-blanc);
    box-shadow: var(--vvn-ombre-l);
    animation: vvn-entree .25s ease both;
}
.vvn-compte-menu[hidden] {
    display: none !important;
}
.vvn-compte-entete {
    margin: 4px 10px 8px !important;
    font-size: .8rem;
    color: var(--vvn-texte-doux);
}
.vvn-compte-menu a,
.vvn-compte-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--vvn-rayon-s);
    background: transparent;
    color: var(--vvn-texte);
    font: 500 14px/1.3 var(--vvn-police);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--vvn-transition), color var(--vvn-transition);
}
.vvn-compte-menu a:hover,
.vvn-compte-menu button:hover {
    background: var(--vvn-bleu-pale);
    color: var(--vvn-bleu-fonce);
}
.vvn-compte-menu form {
    margin: 4px 0 0;
    padding-top: 4px;
    border-top: 1px solid var(--vvn-gris-trait);
}
.vvn-compte-menu button {
    color: #B3261E;
}
/* version menu mobile : la pastille prend toute la largeur, le menu s'ouvre dessous */
.vvn-compte-mobile {
    margin: 0 0 8px;
    width: 100%;
}
.vvn-compte-mobile .vvn-compte-bouton {
    width: 100%;
}
.vvn-compte-mobile .vvn-compte-menu {
    position: static;
    margin-top: 6px;
    box-shadow: none;
}
html[data-theme="sombre"] .vvn-compte-menu {
    background: var(--vvn-surface);
}
html[data-theme="sombre"] .vvn-compte-bouton {
    background: var(--vvn-surface);
}