/* =======================================================================
   BCAN — Billard Club Amboise Nazelles
   Design system : bleu nuit + or, ambiance "salle de billard sous la lampe"
   Signature : diamants de bande + boules numérotées
   ======================================================================= */

:root {
    --nuit:        #001a33;
    --nuit-800:    #0a1526;
    --nuit-700:    #0c2033;
    --surface:     #10243c;
    --surface-2:   #16304d;
    --bord:        #24425f;
    --or:          #FFD700;
    --or-clair:    #FFE87A;
    --feutre:      #17a06a;
    --texte:       #eaf1f8;
    --texte-doux:  #9fb4ca;
    --blanc:       #ffffff;
    --radius:      14px;
    --radius-sm:   10px;
    /* Hauteur reelle de la navbar (logo 42px + paddings + bordure).
       Sert de reference unique : body, hero et ancres s'y alignent. */
    /* Valeur de repli seulement : la hauteur reelle est mesuree au
       chargement et remplace celle-ci. 86px etait surevalue d'environ 18px,
       ce qui laissait une bande de fond sous le menu. */
    --nav-h:       68px;
    --ombre:       0 10px 30px rgba(0,0,0,.45);
    --ombre-or:    0 8px 26px rgba(255,215,0,.18);
    --ease:        cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
/* Taille de reference abaissee (16px -> 15px) : tout le site etant en rem,
   cela reduit proportionnellement textes, boutons et espacements. */
html { scroll-behavior: smooth; font-size: 15px; }
body {
    font-family: 'Open Sans', system-ui, sans-serif;
    background:
        radial-gradient(1200px 600px at 50% -10%, #0c2b4a 0%, transparent 60%),
        var(--nuit-800);
    color: var(--texte);
    line-height: 1.65;
    padding-top: var(--nav-h);
    /* `overflow-x: hidden` sur le body neutralise `position: sticky` pour
       TOUS ses descendants -- c'est ce qui empechait la barre de filtres de
       rester collee. `clip` produit le meme resultat (pas de defilement
       horizontal parasite) sans casser le collage. */
    overflow-x: clip;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    color: var(--blanc);
    line-height: 1.15;
    letter-spacing: -.01em;
}
p { color: var(--texte); }
a { color: var(--or); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--or-clair); }
img { max-width: 100%; }
::selection { background: var(--or); color: #10131a; }

.container { max-width: 1140px; }

/* Accessibilité : focus visible */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.accordion-button:focus-visible {
    outline: 3px solid var(--or);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Eyebrow + titres de section ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--or); margin-bottom: .9rem;
}
.eyebrow::before {
    content: ""; width: 9px; height: 9px; background: var(--or);
    transform: rotate(45deg); display: inline-block;
}
.section-title {
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    margin-bottom: 1rem;
}
.section-head { margin-bottom: clamp(1.4rem, 2.2vw, 2rem); }
.lead-2 { color: var(--texte-doux); font-size: 1.08rem; max-width: 620px; }

/* Sections */
/* Espacement vertical adaptatif : compact sur grand ecran, aere sur mobile */
.section { padding: clamp(2.5rem, 4.5vw, 3.75rem) 0; position: relative; }
.section--serre { padding-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.section--alt { background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-700) 100%); }

/* Frise de diamants (signature) */
.rail {
    height: 22px; width: 100%;
    background-image: radial-gradient(var(--or) 0 1px, transparent 1.5px);
    /* fallback ligne */
    display: flex; align-items: center; justify-content: center; gap: 14px;
    background: none;
}
.rail::before {
    content: "◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆";
    letter-spacing: 14px; color: var(--or); opacity: .55; font-size: .6rem;
}

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(0, 20, 40, .72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Filet dore retire : sur une page dont l'en-tete est deja sombre, il se
       lisait comme un defaut d'affichage plutot que comme une separation.
       L'ombre portee au defilement suffit a detacher la barre. */
    border-bottom: 1px solid transparent;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
    padding-top: .7rem; padding-bottom: .7rem;
}
.navbar.scrolled {
    background: rgba(0, 15, 30, .95) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.navbar-brand {
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: 1.3rem; color: var(--blanc) !important;
    display: flex; align-items: center; gap: .6rem;
}
.navbar-brand img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.navbar-brand .brand-sub {
    display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em;
    color: var(--or); text-transform: uppercase; margin-top: -3px;
}
.nav-link {
    color: var(--texte-doux) !important;
    font-weight: 600; font-size: .96rem;
    position: relative; padding: .4rem .9rem !important;
    transition: color .2s var(--ease);
}
.nav-link::after {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .1rem;
    height: 2px; background: var(--or); transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--blanc) !important; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.navbar-toggler { border-color: rgba(255,215,0,.4); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,215,0,.4); }

/* ---------- Boutons ---------- */
.btn { font-family: 'Poppins', sans-serif; font-weight: 600; border-radius: 50px;
       padding: .7rem 1.6rem; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.btn-or {
    background: linear-gradient(135deg, var(--or), #f6b800);
    color: #10131a !important; border: none; box-shadow: var(--ombre-or);
}
.btn-or:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,215,0,.32); color:#10131a; }
.btn-ghost {
    background: transparent; color: var(--or) !important;
    border: 1.5px solid rgba(255,215,0,.55);
}
.btn-ghost:hover { background: rgba(255,215,0,.1); border-color: var(--or); transform: translateY(-2px); }
.btn-wa { background: #25D366; color: #fff !important; border: none; }
.btn-wa:hover { background: #1fbb59; transform: translateY(-2px); color:#fff; }

/* ---------- Hero ---------- */
.hero {
    position: relative; min-height: min(88vh, 660px); display: flex; align-items: center;
    text-align: left; overflow: hidden;
    /* Le hero remonte sous la navbar transparente puis compense sa hauteur
       reelle, plus une marge pour que le badge ne colle pas au menu. */
    margin-top: calc(var(--nav-h) * -1);
    padding-top: calc(var(--nav-h) + 1.5rem);
    /* Le bas doit loger les deux boutons ET l'invite a derouler posee
       dessous, sinon le second bouton se fait couper par la section
       suivante. */
    padding-bottom: 5.5rem;
}
.hero__bg {
    position: absolute; inset: 0; z-index: 0;
    background: url('../images/svg/hero.svg') center/cover no-repeat;
}
.hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,10,20,.85) 0%, rgba(0,15,30,.55) 55%, rgba(0,15,30,.15) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.3rem); font-weight: 700; margin-bottom: 1.2rem;
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.hero h1 .gold { color: var(--or); }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.35rem); color: #dbe6f2; max-width: 560px; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.stat { text-align: center; padding: .9rem .8rem; }
.stat__num {
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3.1rem); color: var(--or); line-height: 1;
}
.stat__label { color: var(--texte-doux); font-size: .92rem; margin-top: .5rem; letter-spacing: .02em; }
@media (max-width: 640px){ .stats { grid-template-columns: repeat(2,1fr);} }

/* ---------- Cartes ---------- */
.card {
    background: var(--surface); border: 1px solid var(--bord);
    border-radius: var(--radius); box-shadow: var(--ombre);
    transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
    height: 100%;
}
.card:hover { transform: translateY(-6px); border-color: rgba(255,215,0,.45); }

/* Colonne contenant plusieurs cartes empilees : sans cela, chaque carte
   reclame 100% de la hauteur de la colonne etiree et deborde. */
.card-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.card-stack > .card { height: auto; flex: 0 0 auto; margin-bottom: 0; }
.card .card-icon {
    width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(255,215,0,.12); color: var(--or); font-size: 1.35rem; margin-bottom: 1rem;
}
.card h3, .card .card-title { color: var(--blanc); }

/* Carte "feature" avec numéro de boule */
.ball-badge {
    width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center;
    font-family: 'Poppins', sans-serif; font-weight: 700; color: #10131a;
    background: radial-gradient(circle at 35% 30%, #fff 0%, var(--or) 35%, #e0a800 100%);
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

/* ---------- Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 992px){ .gallery { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 640px){ .gallery { grid-template-columns: repeat(2,1fr);} }
.gallery__item {
    position: relative; border-radius: var(--radius-sm); overflow: hidden;
    aspect-ratio: 4/3; border: 1px solid var(--bord); cursor: pointer;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--ease); }
.gallery__item::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,10,20,.55));
    opacity: 0; transition: opacity .3s var(--ease);
}
.gallery__item:hover img { transform: scale(1.08); }
.gallery__item:hover::after { opacity: 1; }

/* ---------- Partenaires ---------- */
/* Les logos s'affichent tels que leurs propriétaires les ont dessinés. Le
   virage au gris uniformisait la bande, mais un partenaire qui soutient le
   club mérite ses couleurs — c'est aussi ce qu'il attend en échange.

   Chaque logo occupe une boîte de taille identique et s'y adapte. Un simple
   `max-height` ne faisait que réduire : un logo déjà petit restait
   minuscule pendant qu'un logo large prenait toute la place, ce qui
   donnait une bande où certains partenaires disparaissaient. */
.partner-logo {
    width: 190px; height: 80px; object-fit: contain;
    transition: transform .3s var(--ease);
}
.partner-logo:hover { transform: translateY(-3px); }

/* Plaque claire pour les logos dessines en noir. Ils sont concus pour du
   papier blanc : sur le bleu nuit, leur texte s'efface. La plaque leur rend
   le fond qu'ils attendent, sans imposer le meme traitement a ceux qui ont
   ete dessines pour un fond sombre -- eux y perdraient.

   Blanc casse plutot que blanc pur : un rectangle d'un blanc franc sur une
   page de nuit se lit comme une image qui n'a pas fini de charger. */
.partner-logo--clair {
    background: #f4f4f2;
    border-radius: 10px;
    padding: .5rem .8rem;
    /* La boite garde la meme taille que les autres : la plaque se prend sur
       le logo, pas sur la grille, sinon la rangee se desaligne. */
    box-sizing: border-box;
}

/* Grille de la page dédiée. Les logos posent sur le fond comme dans la
   bande d'accueil.

   Quatre par ligne : avec onze partenaires, la dernière rangée en contient
   trois, ce qui se tient mieux qu'un logo seul. Le compte est volontaire et
   non calculé — si le nombre de partenaires change, il faudra sans doute
   revoir ce chiffre. */
.partenaires-grille {
    display: grid; justify-items: center; align-items: center;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 1.5rem; margin-top: 2rem;
}

/* En dessous, quatre logos côte à côte deviennent illisibles. */
@media (max-width: 900px) {
    .partenaires-grille { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .partenaires-grille { grid-template-columns: repeat(2, 1fr); }
}
.partenaires-grille a { display: flex; align-items: center; justify-content: center; }

@media (max-width: 480px) {
    .partner-logo { width: 150px; height: 66px; }
    .partenaires-grille { gap: 2rem 1rem; }
}

/* ---------- Accordéon FAQ ---------- */
.accordion { --bs-accordion-bg: transparent; }
.accordion-item { background: var(--surface); border: 1px solid var(--bord) !important;
    border-radius: var(--radius-sm) !important; margin-bottom: .8rem; overflow: hidden; }
.accordion-button {
    background: var(--surface) !important; color: var(--blanc) !important;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.02rem;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--or) !important; background: var(--surface-2) !important; }
.accordion-button::after {
    filter: invert(78%) sepia(60%) saturate(1200%) hue-rotate(1deg) brightness(103%);
}
.accordion-body { color: var(--texte-doux); }

/* ---------- List-group (presse, liens) ---------- */
.list-tile {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--surface); border: 1px solid var(--bord);
    border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; margin-bottom: .8rem;
    transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.list-tile:hover { border-color: rgba(255,215,0,.45); transform: translateX(4px); background: var(--surface-2); }
.list-tile h5 { margin: 0; color: var(--blanc); font-size: 1.05rem; }
.list-tile p { margin: .2rem 0 0; color: var(--texte-doux); font-size: .9rem; }

/* ---------- Formulaire ---------- */
.form-control, .form-select {
    background: var(--nuit-700); border: 1px solid var(--bord); color: var(--texte);
    border-radius: var(--radius-sm); padding: .75rem 1rem;
}
.form-control::placeholder { color: #6f849b; }
.form-control:focus, .form-select:focus {
    background: var(--nuit-700); border-color: var(--or); color: var(--texte);
    box-shadow: 0 0 0 3px rgba(255,215,0,.18);
}
.form-label { color: var(--texte-doux); font-weight: 600; font-size: .9rem; }

/* Message flash */
.flash {
    border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 1.4rem;
    border: 1px solid; font-weight: 600;
}
.flash-success { background: rgba(23,160,106,.12); border-color: rgba(23,160,106,.5); color: #6ee7b0; }

/* ---------- En-tête de page (pages internes) ---------- */
.page-head {
    /* Espaces resserres : l'en-tete occupait pres d'un demi-ecran avant que
       le premier contenu n'apparaisse. */
    position: relative; text-align: center;
    padding: clamp(.7rem, 1.3vw, 1.1rem) 0 clamp(.5rem, .9vw, .8rem);
    background:
        radial-gradient(700px 260px at 50% -30%, rgba(255,215,0,.10), transparent 70%),
        linear-gradient(180deg, var(--nuit) 0%, var(--nuit-800) 100%);
    /* Pas de filet : le degrade suffit a marquer la separation, et la ligne
       doree se lisait comme un defaut d'affichage sous la barre de menu. */
}
/* La premiere section suit de pres : l'ecart cumule des deux blocs faisait
   descendre la premiere carte sous la ligne de flottaison. */
.page-head + .section { padding-top: clamp(.4rem, .8vw, .7rem); }

/* Titre ramene d'un cran : a 3rem, l'en-tete repoussait le premier contenu
   sous la ligne de flottaison sur les pages de liste. La borne basse bouge
   peu -- sur telephone l'en-tete tenait deja dans l'ecran, il n'y avait rien
   a gagner et un titre lisible a perdre. */
.page-head h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; }
.page-head p { color: var(--texte-doux); max-width: 620px; margin: .25rem auto 0; }

/* L'oeil-de-boeuf se rapproche de son titre : l'ecart avait ete regle quand
   le titre etait plus grand, il paraissait flottant une fois celui-ci
   reduit. */
.page-head .eyebrow { margin-bottom: .5rem; letter-spacing: .2em; }

/* ---------- Carte / iframe ---------- */
.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--bord); box-shadow: var(--ombre); }
/* Version reduite, utilisee en colonne laterale */
.map-frame--mini { max-height: 220px; }
.map-frame--mini iframe { filter: saturate(.85) brightness(.92); }

/* ---------- Bouton Facebook ---------- */
.btn-fb { background: #1877F2; color: #fff !important; border: none; }
.btn-fb:hover { background: #1462c9; transform: translateY(-2px); color: #fff; }

/* ---------- Boutons flottants (pile verticale) ---------- */
.flottants {
    position: fixed; bottom: 26px; right: 26px; z-index: 1000;
    display: flex; flex-direction: column-reverse; gap: .8rem;
}
.btn-flottant {
    position: relative;
    width: 56px; height: 56px; border-radius: 50%;
    color: #fff; display: grid; place-items: center;
    font-size: 1.7rem; box-shadow: 0 8px 24px rgba(0,0,0,.45);
    transition: transform .2s var(--ease);
}
.btn-flottant:hover { transform: scale(1.08); color: #fff; }
.btn-flottant--wa { background: #25D366; }
.btn-flottant--fb { background: #1877F2; }
.btn-flottant--wa::before,
.btn-flottant--fb::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
}
.btn-flottant--wa::before {
    box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: wa-pulse 2.4s infinite;
}
/* Decalage pour que les deux halos ne pulsent pas a l'unisson */
.btn-flottant--fb::before {
    box-shadow: 0 0 0 0 rgba(24,119,242,.5); animation: fb-pulse 2.4s infinite .8s;
}
@keyframes wa-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@keyframes fb-pulse { 0%{box-shadow:0 0 0 0 rgba(24,119,242,.45);} 70%{box-shadow:0 0 0 16px rgba(24,119,242,0);} 100%{box-shadow:0 0 0 0 rgba(24,119,242,0);} }

/* ---------- Footer ---------- */
footer.site-footer {
    background: linear-gradient(180deg, var(--nuit-800) 0%, #050c16 100%);
    border-top: 1px solid rgba(255,215,0,.15); color: var(--texte-doux);
    padding: 3.2rem 0 1.6rem;
}
footer.site-footer h5 { color: var(--blanc); font-size: 1rem; letter-spacing: .04em; margin-bottom: 1rem; }
footer.site-footer a { color: var(--texte-doux); }
footer.site-footer a:hover { color: var(--or); }
.footer-social a {
    width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center;
    border: 1px solid var(--bord); color: var(--texte-doux); margin-right: .5rem;
    transition: all .25s var(--ease);
}
.footer-social a:hover { border-color: var(--or); color: var(--or); transform: translateY(-3px); }
.admin-link { font-size: .8rem; opacity: .25; color: var(--texte-doux); }
.admin-link:hover { opacity: .8; color: var(--or); }
.footer-bottom { border-top: 1px solid var(--bord); margin-top: 2.2rem; padding-top: 1.4rem;
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; }

/* ---------- Animations reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn-flottant--wa::before,
    .btn-flottant--fb::before { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
    .navbar { background: rgba(0,15,30,.97) !important; }
    .hero { min-height: 80vh; text-align: center; }
    .hero__cta { justify-content: center; }
    .hero .lead { margin-left: auto; margin-right: auto; }
    .hero__bg::after { background: linear-gradient(180deg, rgba(0,10,20,.75), rgba(0,15,30,.85)); }
}

/* Lien discret vers l'espace de gestion, dans le pied de page.
   Volontairement peu contraste : utile a qui le cherche, invisible pour
   les autres. Le contraste remonte au survol et au focus clavier pour
   rester accessible. */
.lien-gestion {
    color: rgba(159, 180, 202, .45);
    text-decoration: none;
    font-size: .82em;
    transition: color .2s ease;
}

.lien-gestion:hover,
.lien-gestion:focus-visible {
    color: var(--or, #FFD700);
    text-decoration: underline;
}

/* ---------- Badges des articles ---------- */
/* Discipline, format et horaire, affichés sous le titre. */

.badges-article {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .6rem;
}

.badge-article {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 30px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.5;
    white-space: nowrap;
}

/* Discipline : or, la couleur d'identité du club */
.badge-article.badge-type {
    background: rgba(255, 215, 0, .13);
    color: #FFE87A;
    border: 1px solid rgba(255, 215, 0, .32);
}

/* Format : bleu clair, secondaire */
.badge-article.badge-format {
    background: rgba(120, 170, 220, .13);
    color: #a9cdec;
    border: 1px solid rgba(120, 170, 220, .3);
}

/* Horaire : vert, information pratique */
.badge-article.badge-heure {
    background: rgba(23, 160, 106, .14);
    color: #8ee9c1;
    border: 1px solid rgba(23, 160, 106, .32);
}

.badge-article i { font-size: .9em; opacity: .85; }

/* Centrés sur la page d'un article */
.article-hero .badges-article,
.article-corps .badges-article { justify-content: center; }

/* Bouton « Nous rejoindre » de la barre de navigation.
   L'espace insécable empêche déjà la coupure ; white-space verrouille le
   cas où la barre devient très étroite. */
.nav-cta {
    white-space: nowrap;
    flex-shrink: 0;
}

/* =======================================================================
   Inscriptions aux tournois
   ======================================================================= */

/* Badge « type d'épreuve » : vert feutre, troisième axe distinct de la
   discipline (or) et du format (bleu). */
.badge-article.badge-epreuve {
    background: rgba(23, 160, 106, .15);
    color: #6fe0b0;
    border: 1px solid rgba(23, 160, 106, .38);
}

/* ---------- Carte : bouton, ruban, mention de places ---------- */

.carte-inscription .btn { flex-shrink: 0; }
.carte-inscription .btn:disabled {
    opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ---------- Annulation ---------- */

.badge-article.badge-annule {
    background: rgba(180, 35, 43, .2);
    color: #ff9ba1; border: 1px solid rgba(180, 35, 43, .55);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.ruban-annule { background: linear-gradient(135deg, #8d1f26, #5e0f14); }

.article-carte--annule .card { opacity: .72; }
.article-carte--annule .card:hover { transform: none; }
.article-carte--annule .carte-texte h2 { text-decoration: line-through; }
.article-carte--annule .carte-media img { filter: grayscale(.8); }

.motif-annulation {
    margin: .7rem 0 0; padding: .5rem .8rem;
    background: rgba(180, 35, 43, .1);
    border-left: 2px solid rgba(180, 35, 43, .55);
    border-radius: 0 6px 6px 0;
    font-size: .84rem; color: #f0c2c6;
}

.mention-places {
    font-family: 'Poppins', sans-serif;
    font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    color: var(--or-clair); position: relative; z-index: 2;
}
.mention-places::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 7px; height: 7px; margin-right: .45rem;
    background: var(--or); border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, .18);
}

/* ---------- Carte cliquable sans lien englobant ---------- */

/* Le titre porte le seul vrai lien, dont le pseudo-element couvre toute la
   carte. Les boutons places au-dessus (z-index) restent cliquables : c'est
   ce qui permet d'avoir « S'inscrire » a l'interieur de la carte sans
   imbriquer un bouton dans un lien. */
.article-carte { position: relative; }
.article-carte .card { position: relative; overflow: hidden; }

.lien-carte {
    color: inherit; text-decoration: none;
    transition: color .2s var(--ease);
}
.lien-carte::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
}
.article-carte .card:hover .lien-carte { color: var(--or); }

/* Tout ce qui doit rester interactif passe au-dessus du lien etale.
   Le bouton d'inscription vit desormais dans le pied du texte, aux cotes
   de « Lire la suite » : c'est la que l'oeil arrive, et non dans une barre
   detachee en bas de carte ou il se remarquait a peine. */
.carte-pied .btn,
.bouton-inscription { position: relative; z-index: 2; }

.bouton-inscription { box-shadow: 0 4px 14px rgba(255, 215, 0, .22); }
.carte-pied .btn:disabled {
    opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Visuel de repli quand l'article n'a ni photo ni album : le logo du club,
   pose sur le fond plutot que recadre en pleine largeur. */
.carte-media--defaut {
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(320px 200px at 50% 40%, rgba(255, 215, 0, .1), transparent 70%),
        var(--nuit-700);
    border: 1px solid var(--bord);
}
.carte-media--defaut img {
    width: auto !important; height: auto !important;
    max-width: 72%; max-height: 72%;
    object-fit: contain !important;
    opacity: .5;
}

.ruban-complet {
    position: absolute; top: 18px; right: -46px; z-index: 3;
    width: 176px; padding: .32rem 0;
    transform: rotate(38deg);
    background: linear-gradient(135deg, #b4232b, #7d1319);
    color: #fff; text-align: center;
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    pointer-events: none;
}
.article-carte--complet .card { opacity: .82; }
.article-carte--complet .card:hover { transform: none; }

@media (max-width: 768px) {
    .carte-inscription { padding: 1rem 1.5rem 1.3rem; }
}

/* Bloc d'inscription sur la page d'un article */
.bloc-inscription {
    margin-top: 2.25rem; padding: 1.6rem;
    background: var(--surface);
    border: 1px solid var(--bord); border-left: 3px solid var(--or);
    border-radius: var(--radius);
    text-align: center;
}
.bloc-inscription p { color: var(--texte-doux); font-size: .92rem; }

.etiquette-complet {
    display: inline-block; margin-bottom: .8rem;
    padding: .3rem 1rem; border-radius: 30px;
    background: rgba(180, 35, 43, .18);
    border: 1px solid rgba(180, 35, 43, .5);
    color: #ff9ba1;
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}

/* ---------- Fenêtre d'inscription ---------- */

body.modal-ouverte { overflow: hidden; }

.inscription-voile {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 4vh 1rem;
    background: rgba(3, 10, 20, .78);
    backdrop-filter: blur(5px);
    overflow-y: auto;
    animation: voile-entre .22s var(--ease);
}
.inscription-voile[hidden] { display: none; }
@keyframes voile-entre { from { opacity: 0; } to { opacity: 1; } }

.inscription-fenetre {
    position: relative;
    width: 100%; max-width: 560px; margin: auto;
    background:
        radial-gradient(600px 220px at 50% -10%, rgba(255, 215, 0, .09), transparent 62%),
        var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--radius);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
    animation: fenetre-entre .28s var(--ease);
}
@keyframes fenetre-entre {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
/* Liseré doré : la signature du club, reprise du gabarit des courriels. */
.inscription-fenetre::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--or), transparent);
    border-radius: var(--radius) var(--radius) 0 0;
}

.inscription-fermer {
    position: absolute; top: .5rem; right: .8rem; z-index: 2;
    background: none; border: 0; cursor: pointer;
    color: var(--texte-doux); font-size: 1.9rem; line-height: 1;
    padding: .2rem .5rem; border-radius: 8px;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.inscription-fermer:hover { color: var(--or); background: rgba(255, 255, 255, .05); }

.inscription-entete { padding: 2rem 1.9rem .6rem; text-align: center; }
.inscription-entete h2 {
    font-size: 1.45rem; margin: 0 0 .35rem; color: var(--blanc);
}
.inscription-tournoi {
    margin: 0; color: var(--or-clair);
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem;
}

/* Trois billes de carambole, dessinées sans image. */
.inscription-billes {
    display: flex; justify-content: center; gap: .45rem; margin-bottom: 1rem;
}
.inscription-billes i {
    width: 15px; height: 15px; border-radius: 50%; display: block;
}
/* Jaune, blanche, rouge : le meme trio que dans les courriels du club. */
.inscription-billes i:nth-child(1) { background: var(--or); border: 1px solid #c9a800; }
.inscription-billes i:nth-child(2) { background: #f5f5f0; border: 1px solid #c9c9c0; }
.inscription-billes i:nth-child(3) { background: #d62828; border: 1px solid #a01c1c; }

.inscription-corps { padding: .4rem 1.9rem 1.9rem; }

.inscription-duo { display: flex; gap: 1rem; flex-wrap: wrap; }
.inscription-duo > .inscription-champ { flex: 1 1 190px; }

.inscription-champ { margin-bottom: 1rem; }
.inscription-champ label {
    display: block; margin-bottom: .35rem;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .84rem;
    color: var(--texte);
}
.inscription-champ label span { color: var(--or); }
.inscription-champ label em { color: var(--texte-doux); font-weight: 400; font-style: normal; }

.inscription-champ input,
.inscription-champ textarea {
    width: 100%; padding: .68rem .85rem;
    background: var(--nuit-700);
    border: 1px solid var(--bord); border-radius: var(--radius-sm);
    color: var(--texte); font-family: inherit; font-size: .93rem;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.inscription-champ input::placeholder,
.inscription-champ textarea::placeholder { color: #62809c; }
.inscription-champ input:focus,
.inscription-champ textarea:focus {
    outline: none; border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, .16);
}
.inscription-champ textarea { resize: vertical; min-height: 74px; }

.inscription-aide {
    display: block; margin-top: .3rem;
    font-size: .78rem; color: var(--texte-doux);
}

/* Piège à robots : hors de l'écran plutôt que display:none, que certains
   automates savent détecter. */
.inscription-piege {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden;
}

.inscription-alertes { padding: 0 1.9rem; }
.inscription-alerte {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .7rem .9rem; margin-bottom: .6rem;
    border-radius: var(--radius-sm); font-size: .86rem; line-height: 1.55;
}
.inscription-alerte.danger {
    background: rgba(220, 53, 69, .12);
    border: 1px solid rgba(220, 53, 69, .4); color: #ffb3ba;
}
.inscription-alerte.info {
    background: rgba(255, 215, 0, .09);
    border: 1px solid rgba(255, 215, 0, .3); color: var(--or-clair);
}

.inscription-rgpd {
    margin: 1rem 0 1.3rem; padding: .8rem .95rem;
    background: rgba(255, 255, 255, .03);
    border-left: 2px solid var(--bord); border-radius: 0 6px 6px 0;
    font-size: .77rem; line-height: 1.6; color: var(--texte-doux);
}

.inscription-actions {
    display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center;
}

@media (max-width: 575.98px) {
    .inscription-voile { padding: 0; }
    .inscription-fenetre { border-radius: 0; min-height: 100%; }
    .inscription-entete { padding-top: 2.4rem; }
    .inscription-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .inscription-voile, .inscription-fenetre { animation: none; }
}

/* ---------- Pages d'étape (envoi, confirmation, lien expiré) ---------- */

.etape-carte { align-items: center; }
.etape-carte:hover { transform: none; border-color: var(--bord); }

.etape-icone {
    width: 78px; height: 78px; margin: 0 auto 1.4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.9rem;
    background: rgba(255, 215, 0, .1);
    border: 1px solid rgba(255, 215, 0, .32);
    color: var(--or);
}
.etape-icone--succes {
    background: rgba(23, 160, 106, .13);
    border-color: rgba(23, 160, 106, .42);
    color: #6fe0b0;
    animation: pastille-succes .5s var(--ease);
}
.etape-icone--alerte {
    background: rgba(180, 35, 43, .13);
    border-color: rgba(180, 35, 43, .45);
    color: #ff9ba1;
}
@keyframes pastille-succes {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.texte-or { color: var(--or-clair); }

.etape-avertissement {
    display: flex; gap: .8rem; align-items: flex-start; text-align: left;
    width: 100%; padding: .95rem 1.1rem; margin-bottom: 1.4rem;
    background: rgba(255, 215, 0, .07);
    border: 1px solid rgba(255, 215, 0, .28);
    border-left: 3px solid var(--or);
    border-radius: var(--radius-sm);
    font-size: .87rem; line-height: 1.65; color: var(--texte-doux);
}
.etape-avertissement i { color: var(--or); margin-top: .18rem; flex-shrink: 0; }
.etape-avertissement strong { color: var(--or-clair); }

.etape-avertissement--rouge {
    background: rgba(220, 53, 69, .1);
    border-color: rgba(220, 53, 69, .38);
    border-left-color: #b4232b;
    color: #f0c2c6;
}
.etape-avertissement--rouge i { color: #ff9ba1; }
.etape-avertissement--rouge strong { color: #ffb3ba; }

.etape-actions {
    display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center;
    margin-top: .4rem;
}
.etape-note {
    margin: 1.1rem 0 0; font-size: .8rem; color: var(--texte-doux);
}

@media (prefers-reduced-motion: reduce) {
    .etape-icone--succes { animation: none; }
}

/* =======================================================================
   Billes animées en fin de titre — « bille de tête »
   =======================================================================
   La jaune part seule, percute la blanche, qui percute la rouge : le
   roulement provoque la casse, en chaîne. Le cycle dure 4,5 s pour que le
   mouvement reste une respiration et non un tic.

   Portée volontairement limitée aux titres de page (ceux qui portent
   `justify-content-center`, marque des en-têtes de section hero dans les
   gabarits). Les dates des cartes d'articles gardent le seul losange :
   dix animations simultanées dans le champ de vision seraient
   insoutenables sur la page Vie du club. */

.billes-titre {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    /* Marge quasi nulle : le letter-spacing de .18em du .eyebrow ajoute
       déjà une espace après la dernière lettre. Un écart plus large ferait
       flotter les billes loin du mot. */
    margin-left: .05rem;
    vertical-align: .06em;
    flex-shrink: 0;
}

.billes-titre i {
    display: block;
    width: 9px; height: 9px;
    border-radius: 50%;
    /* Reflet du spot au-dessus du tapis, et un liseré sombre pour détacher
       la bille blanche du fond clair éventuel. */
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, .45),
                0 0 0 1px rgba(0, 0, 0, .25);
}

.billes-titre .bille-jaune  { background: radial-gradient(circle at 32% 28%, #fff2a8, var(--or) 60%); }
.billes-titre .bille-blanche{ background: radial-gradient(circle at 32% 28%, #ffffff, #f5f5f0 60%); }
.billes-titre .bille-rouge  { background: radial-gradient(circle at 32% 28%, #ff7a7a, #d62828 60%); }

/* La jaune : elle tire, touche, recule légèrement. */
.billes-titre .bille-jaune {
    animation: bille-tire 4.5s var(--ease) infinite;
}
@keyframes bille-tire {
    0%, 55%  { transform: translateX(0); }
    66%      { transform: translateX(7px); }
    72%      { transform: translateX(5px); }
    100%     { transform: translateX(0); }
}

/* Les deux autres partent seulement après le contact — d'où les délais
   inscrits dans les pourcentages plutôt que dans animation-delay : c'est
   ce qui rend la chaîne de causes lisible. */
.billes-titre .bille-blanche {
    animation: bille-touchee-1 4.5s cubic-bezier(.15, .9, .25, 1.4) infinite;
}
@keyframes bille-touchee-1 {
    0%, 71% { transform: translateX(0); }
    80%     { transform: translateX(5px) translateY(-2px); }
    100%    { transform: translateX(0); }
}

.billes-titre .bille-rouge {
    animation: bille-touchee-2 4.5s cubic-bezier(.15, .9, .25, 1.4) infinite;
}
@keyframes bille-touchee-2 {
    0%, 73% { transform: translateX(0); }
    82%     { transform: translateX(8px) translateY(2px); }
    100%    { transform: translateX(0); }
}

@media (max-width: 575.98px) {
    .billes-titre i { width: 7px; height: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .billes-titre i { animation: none !important; }
}

/* =======================================================================
   Cartes d'evenement — ecusson, fond dedie, bande d'informations
   ======================================================================= */

/* Fondu sur le bord gauche du visuel : la coupure nette entre la colonne de
   texte et l'image decoupait la carte en deux moities qui ne se parlaient
   pas. Le degrade part de la couleur exacte du fond. */
.carte-media::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    /* Fondu resserre : il doit raccorder le visuel au fond, pas manger la
       photo. Sur un album, le degre precedent devorait le tiers gauche de
       l'image -- souvent le sujet. */
    background: linear-gradient(90deg, var(--surface) 0%,
                rgba(11, 35, 64, .55) 6%, rgba(11, 35, 64, 0) 20%);
}
.carte-evenement .carte-media::before {
    background: linear-gradient(90deg, #0c2745 0%,
                rgba(12, 39, 69, .55) 6%, rgba(12, 39, 69, 0) 20%);
}
/* Le repli logo n'a pas de sujet a proteger : on lui laisse un fondu large. */
.carte-media--defaut::before {
    background: linear-gradient(90deg, var(--surface) 0%,
                rgba(11, 35, 64, .7) 14%, rgba(11, 35, 64, 0) 45%);
}

/* Le visuel remplit desormais son cadre. */
.carte-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.carte-media--defaut {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 215, 0, .13), transparent 55%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
        linear-gradient(160deg, #0d3050, #061b30);
}
/* Diamants de bande en haut du cadre. */
.carte-media--defaut::after {
    content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 8px;
    background-image: radial-gradient(circle, var(--or) 42%, transparent 45%);
    background-size: 36px 8px; opacity: .28; z-index: 1;
}
.carte-media--defaut img {
    /* Plus genereux qu'avant, et entier : `contain` agrandit jusqu'a toucher
       le bord le plus contraignant sans jamais deformer. En filigrane, pour
       rester un fond et non une illustration. */
    width: 68% !important; height: 68% !important;
    max-width: 68%; max-height: 68%;
    object-fit: contain !important;
    margin: auto; inset: 0; opacity: .3; z-index: 3;
}

/* Fond dedie aux evenements : la difference se voit au premier coup d'oeil
   sans que la carte hurle. */
.carte-evenement {
    background:
        radial-gradient(700px 260px at 12% 0%, rgba(255, 215, 0, .10), transparent 62%),
        linear-gradient(180deg, #0e2b4d, #0a1f39) !important;
    border-color: rgba(255, 215, 0, .30) !important;
}
/* Filet dore en ombre INTERNE : dessine en absolu, il debordait du coin
   arrondi et laissait une encoche visible en haut a gauche. */
/* Filet dore en ombre interne : il epouse ainsi l'arrondi au lieu de le
   depasser, ce qu'un element positionne en absolu ne savait pas faire. */
.carte-evenement .carte-grille {
    box-shadow: inset 3px 0 0 rgba(255, 215, 0, .85);
    border-radius: var(--radius);
}

/* Ecusson a cheval sur la bordure superieure. */
/* Hauteur : la colonne visuelle imposait 150 px de haut meme quand le texte
   en demandait moins, et la ligne de publication ajoutait sa propre marge
   sous la grille, d'ou l'impression de decalage. */
.article-carte .carte-media { min-height: 0; }
.article-carte .carte-grille { align-items: stretch; }
.article-carte__pub {
    /* `margin-left:auto` la pousse a l'autre bout de la ligne des boutons,
       qui est un conteneur flexible. Alignement sur leur base plutot que sur
       leur centre : l'oeil suit la ligne d'ecriture, pas le milieu du bouton. */
    margin: 0 0 0 auto; padding: 0 .2rem 0 1rem;
    align-self: flex-end;
    font-style: italic; font-size: .72rem; text-align: right;
    opacity: .45; color: var(--bs-secondary-color);
}
.carte-evenement .article-carte__pub {
    /* Sur le fond dore, l'opacite d'origine rendait la ligne illisible. */
    opacity: .7; color: var(--texte-doux);
    border-top-color: rgba(255, 255, 255, .08);
}

.ecusson {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    z-index: 5;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem 1.1rem; border-radius: 30px;
    background: linear-gradient(135deg, var(--or), #e6b800);
    color: #001a33;
    font-family: 'Poppins', sans-serif; font-weight: 700;
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 5px 18px rgba(255, 215, 0, .35);
    white-space: nowrap; pointer-events: none;
}
/* L'ecusson deborde vers le haut : la carte ne doit donc pas rogner, et
   c'est la grille interieure qui porte le rognage des coins arrondis. */
.article-carte { margin-top: 1.1rem; }

/* Une carte d'evenement demande plus d'air au-dessus : son ecusson deborde
   de 13 px et venait presque toucher la carte precedente. La marge est
   posee sur l'article ET non sur la carte, pour que l'ecart se voie aussi
   quand deux evenements se suivent. */
.article-carte:has(.ecusson) { margin-top: 2.4rem; }
.article-carte .card { overflow: visible; }
/* Les QUATRE coins : la grille porte desormais tout le contenu de la carte,
   ligne de publication comprise. N'arrondir que le haut laissait le coin
   inferieur droit carre et faisait deborder le filet dore en bas a gauche. */
.article-carte .carte-grille {
    border-radius: var(--radius); overflow: hidden;
}

/* Bande d'informations : comble le vide sous le chapo. */
.carte-infos {
    display: flex; gap: 1.6rem; flex-wrap: wrap;
    padding: .75rem 0 0; margin-top: .8rem;
    border-top: 1px dashed rgba(255, 255, 255, .09);
}
.carte-infos .info { display: flex; flex-direction: column; gap: .1rem; }
.carte-infos .k {
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--texte-doux);
}
.carte-infos .v {
    font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: .88rem; color: var(--texte);
}
.carte-infos .v.or { color: var(--or-clair); }
.carte-infos .v-complet { color: #ff9ba1; }

/* Disponibilite : toujours en vert, et jamais chiffree. Le club n'annonce ni
   sa jauge ni son nombre d'inscrits. */
.carte-infos .dispo { color: #6fe0b0; }
.carte-infos .dispo::before {
    content: ""; display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: #6fe0b0; margin-right: .4rem;
    vertical-align: .08em; box-shadow: 0 0 0 3px rgba(111, 224, 176, .18);
}

/* Badges tarif et repas : deux couleurs qui ne servent qu'a ca. */
.badge-article.badge-tarif {
    background: rgba(0, 200, 190, .16); color: #5feee2;
    border: 1px solid rgba(0, 200, 190, .45);
}
.badge-article.badge-repas {
    background: rgba(255, 150, 60, .14); color: #ffc089;
    border: 1px solid rgba(255, 150, 60, .40);
}
/* « Terminé » en vert, pendant du « Annulé » rouge : les deux disent qu'il
   n'y a plus rien a faire, mais l'un est un aboutissement et l'autre un
   renoncement. Le gris les confondait avec un simple detail. */
.badge-article.badge-termine {
    background: rgba(23, 160, 106, .16); color: #6fe0b0;
    border: 1px solid rgba(23, 160, 106, .45);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

@media (max-width: 768px) {
    .carte-infos { gap: 1rem; }
    .ecusson { font-size: .66rem; padding: .26rem .9rem; }
}


/* Ancre d'inscription : sans marge de defilement, le lien « #inscription »
   amenait le bloc juste sous la barre de navigation fixe, qui le recouvrait
   a moitie. */
#inscription { scroll-margin-top: 110px; }
@media (max-width: 768px) { #inscription { scroll-margin-top: 90px; } }

/* =======================================================================
   Fenêtre d'inscription — options (catégorie, repas)
   =======================================================================
   Toutes ces règles portent le préfixe `.inscription-fenetre`. Sans lui,
   Bootstrap — chargé sur le site public — reprend la main sur les `label`
   et les `input` : les boutons radio partent flotter au centre pendant que
   leurs libellés restent à gauche, et le cadre de chaque option disparaît. */

.inscription-fenetre .choix-ligne {
    display: flex; gap: .6rem; flex-wrap: wrap; margin: 0;
}

.inscription-fenetre .choix {
    flex: 1 1 160px;
    display: flex !important; gap: .6rem; align-items: flex-start;
    padding: .7rem .85rem; margin: 0 !important; width: auto;
    cursor: pointer;
    background: var(--nuit-700); border: 1px solid var(--bord);
    border-radius: var(--radius-sm);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.inscription-fenetre .choix:hover { border-color: rgba(255, 215, 0, .45); }

/* L'option retenue se signale par sa bordure et son fond, pas seulement par
   un point coché : c'est ce qui manquait le plus à la lecture. */
.inscription-fenetre .choix:has(input:checked) {
    border-color: var(--or); background: rgba(255, 215, 0, .07);
}

.inscription-fenetre .choix input {
    margin: .15rem 0 0 !important; flex: 0 0 auto;
    width: 16px; height: 16px;
    accent-color: var(--or);        /* et non le bleu du système */
}

/* Le nom et le prix sur deux lignes : côte à côte, ils se collaient
   l'un à l'autre — « Membre du club8 € ». */
.inscription-fenetre .choix-corps {
    display: flex; flex-direction: column; gap: .12rem; min-width: 0;
}
.inscription-fenetre .choix-nom {
    font-size: .88rem; color: var(--texte); font-weight: 500;
}
.inscription-fenetre .choix-prix {
    font-weight: 700; color: var(--or-clair); font-size: .82rem;
}
.inscription-fenetre .choix small {
    display: block; color: var(--texte-doux); font-size: .75rem;
}

.inscription-fenetre .choix-repas { flex: 1 1 100%; }

/* Même allure que les autres eyebrow, sans le centrage que le script des
   titres reconnaît pour y accrocher ses trois billes — la fenêtre en
   dessine déjà, on évite le doublon. */
.inscription-fenetre .eyebrow-modale {
    display: inline-flex; align-items: center; gap: .5rem;
}

.inscription-fenetre .bloc-repas {
    padding: .2rem 0 0; margin-top: 1.1rem;
    border-top: 1px dashed rgba(255, 255, 255, .1);
}
.inscription-fenetre .bloc-repas > .choix-repas { margin-top: .9rem !important; }
.inscription-fenetre #zone-regime { margin-top: .8rem; }
.inscription-fenetre #zone-regime label {
    display: block; margin-bottom: .35rem; font-size: .84rem;
}

/* Choix des journées : de vrais boutons plutôt que des cases à cocher. La
   question est la première que se pose la personne — « je viens quel
   jour ? » — et mérite d'occuper la place, pas de se cacher dans une ligne
   de formulaire. La case réelle reste dans le DOM pour le clavier et les
   lecteurs d'écran ; c'est la pastille qui est peinte. */
.inscription-fenetre .journees-choix {
    display: grid; gap: .7rem; margin-top: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.inscription-fenetre .journee {
    display: block; margin: 0 !important; cursor: pointer;
}
.inscription-fenetre .journee input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
}
.inscription-fenetre .journee-corps {
    display: flex; align-items: center; gap: .7rem;
    padding: .8rem .9rem;
    background: rgba(255, 255, 255, .04);
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-sm);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.inscription-fenetre .journee:hover .journee-corps {
    border-color: rgba(255, 215, 0, .45);
}
.inscription-fenetre .journee-marque {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .3);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.inscription-fenetre .journee-texte {
    display: flex; flex-direction: column; gap: .12rem; min-width: 0;
}
.inscription-fenetre .journee-nom { font-size: .92rem; color: var(--texte); }
.inscription-fenetre .journee-date {
    font-size: .8rem; color: var(--texte-doux);
}

.inscription-fenetre .journee:has(input:checked) .journee-corps {
    border-color: var(--or); background: rgba(255, 215, 0, .12);
}
.inscription-fenetre .journee:has(input:checked) .journee-marque {
    background: var(--or); border-color: var(--or);
}
/* La coche est dessinée en CSS : deux traits, pas d'icône à charger. */
.inscription-fenetre .journee:has(input:checked) .journee-marque::after {
    content: ''; width: 5px; height: 9px; margin-top: -2px;
    border: solid var(--nuit-900);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.inscription-fenetre .journee:has(input:checked) .journee-nom {
    color: var(--or);
}
/* Le focus clavier doit se voir : sans cela, la case étant masquée, on
   navigue à l'aveugle. */
.inscription-fenetre .journee input:focus-visible + .journee-corps {
    outline: 2px solid var(--or-clair); outline-offset: 2px;
}
.inscription-fenetre .journees-erreur {
    margin: .7rem 0 0; font-size: .84rem; color: #e8a0a0;
}
.inscription-fenetre .journees-erreur i { margin-right: .35rem; }

.inscription-lieu {
    margin: .2rem 0 .8rem; font-size: .85rem; color: var(--or-clair);
}
.inscription-lieu i { margin-right: .35rem; }

.champ-piege {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Liseré du haut adouci : sur toute la largeur et à pleine intensité, il
   attirait l'œil plus que le titre. */
.inscription-fenetre::before {
    background: linear-gradient(90deg, transparent 12%,
                rgba(255, 215, 0, .55) 50%, transparent 88%) !important;
}

/* ---------- Règlement et tarif unique dans la fenêtre ---------- */

.inscription-fenetre .rappel-tarif {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 1rem; padding: .6rem .85rem;
    background: rgba(0, 200, 190, .1);
    border: 1px solid rgba(0, 200, 190, .32);
    border-radius: var(--radius-sm);
    font-size: .88rem; color: var(--texte);
}
.inscription-fenetre .rappel-tarif i { color: #5feee2; }
.inscription-fenetre .rappel-tarif strong { color: #5feee2; }

/* Pastilles de règlement : gris neutre, jamais aux couleurs des badges de
   l'événement. Les badges décrivent l'épreuve ; celles-ci disent comment on
   paie — deux informations qu'il ne faut pas confondre à l'œil. */
.moyens-paiement {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    margin: 0 0 1rem;
}
.moyens-paiement__titre {
    font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--texte-doux); margin-right: .15rem;
}
.moyens-paiement .moyen {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .22rem .7rem; border-radius: 20px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--texte-doux); font-size: .78rem; font-weight: 500;
}
.moyens-paiement .moyen i { font-size: .8em; opacity: .85; }

/* Mention de conception, sous la ligne de copyright : discrète, elle
   informe sans se mettre en avant. */
.mention-conception {
    margin: .35rem 0 0;
    font-size: .78rem; font-style: italic;
    color: var(--texte-doux); opacity: .75;
}

/* ---------- Pastille du menu « Vie du club » ---------- */

/* Le lien porte le point de reference de la pastille. */
.navbar .nav-link { position: relative; }

/* Un simple point, sans chiffre : savoir qu'il y a deux inscriptions
   ouvertes plutot qu'une ne change pas la decision d'aller voir. C'est le
   signal qui compte. */
.pastille-menu {
    /* Posee DANS l'angle du bouton, a cheval sur sa bordure : a l'exterieur,
       elle flottait entre deux entrees de menu sans se rattacher a l'une ni
       a l'autre. */
    position: absolute; top: 5px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #6fd6a6;
    /* Halo pulsant : c'est lui qui attire l'oeil, ce qui permet au point de
       rester discret. Rythme lent -- deux secondes et demie -- pour appeler
       sans harceler. */
    animation: halo-menu 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes halo-menu {
    0%, 100% { box-shadow: 0 0 0 0 rgba(111, 214, 166, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(111, 214, 166, 0); }
}

/* Sur mobile, le menu se replie : la pastille se cale a droite du libelle
   plutot que de flotter au-dessus. */
@media (max-width: 991.98px) {
    .pastille-menu {
        position: static; display: inline-block;
        margin-left: .45rem; vertical-align: middle;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pastille-menu {
        animation: none;
        box-shadow: 0 0 0 3px rgba(111, 214, 166, .25);
    }
}


/* ---------- Filtres loges dans l'en-tete ---------- */

/* Les pastilles occupent la place laissee libre a gauche du titre, qui ne
   servait a rien. Elles n'ajoutent plus aucune hauteur a la page : c'est
   tout ce qui separait le chapo de la premiere carte qui disparait. */
.page-head__rangee {
    display: flex; align-items: center; gap: 1rem;
}
.page-head__titre { flex: 1 1 auto; min-width: 0; }

/* Les deux blocs lateraux partagent la meme base de largeur : le titre reste
   ainsi centre sur la page, et non sur l'espace qui lui reste. */
.page-head__filtres,
.page-head__contrepoids { flex: 0 0 auto; }
.page-head__contrepoids { width: var(--largeur-filtres, 11rem); }

/* La bulle de compteur deborde du haut de sa pastille : la rangee lui laisse
   la place, sinon elle se ferait couper par le bord de l'en-tete. */
.page-head--avec-filtres { padding-top: clamp(1rem, 1.8vw, 1.5rem); }

/* Sous 992 px, la rangee redevient une colonne : les pastilles repassent
   sous le titre, et le contrepoids n'a plus lieu d'etre. */
@media (max-width: 991.98px) {
    .page-head__rangee { flex-direction: column; gap: .7rem; }
    .page-head__contrepoids { display: none; }
    .page-head__filtres { order: 2; justify-content: center; }
    .page-head__titre { order: 1; }
}

/* ---------- Centrage du menu ---------- */

/* Le bouton « Nous rejoindre » ne fait plus partie de la liste : il est pose
   a droite, et la liste se centre entre lui et la marque. Les marges
   automatiques font le calcul, donc le centre se deplace tout seul quand
   l'ecran change de largeur ou qu'une entree change de libelle. */
.nav-cta-zone { flex: 0 0 auto; }

/* Replie, la barre redevient une colonne : le bouton reprend sa place en bas
   de la liste, pleine largeur. */
@media (max-width: 991.98px) {
    .nav-cta-zone { margin: .8rem .25rem .2rem; }
}

/* ---------- Entree « Inscriptions aux evenements » ---------- */

/* Regle cardinale de cette entree : elle ne doit RIEN ajouter a la hauteur
   de la barre. La hauteur reelle de la navbar est mesuree en JavaScript et
   recopiee dans --nav-h, qui decale ensuite tout le contenu de la page --
   un demi-centimetre gagne ici se paie en decalage sur chaque ecran.
   La seconde ligne est donc posee en absolu dans la marge basse que la
   barre possede deja, sans reserve supplementaire nulle part. */
.nav-link.nav-inscriptions { position: relative; }

.nav-inscriptions__mot { display: block; position: relative; }

.nav-inscriptions__sous {
    position: absolute; left: 0; right: 0; top: 100%;
    margin-top: .02rem;
    font-size: .66rem; font-weight: 600; line-height: 1;
    letter-spacing: .01em; color: var(--or);
    white-space: nowrap; text-align: center;
    pointer-events: none;
}

/* Le trait du survol appartient au lien entier, qui englobe desormais les
   deux lignes : il barrait la seconde. Il est donc supprime ici et redessine
   sous le seul mot principal. */
.nav-link.nav-inscriptions::after { display: none; }

.nav-inscriptions__mot::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.14rem;
    height: 2px; background: var(--or);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
}
.nav-link.nav-inscriptions:hover .nav-inscriptions__mot::after,
.nav-link.nav-inscriptions.active .nav-inscriptions__mot::after {
    transform: scaleX(1);
}

/* La pastille se pose DANS l'angle du contour, comme sur une icone
   d'application. A l'exterieur, elle flottait entre deux entrees et se
   rattachait visuellement a la suivante plutot qu'a la sienne. */
.nav-inscriptions .pastille-menu { top: 4px; right: 5px; }

/* Sur mobile la liste est verticale : la place ne manque pas, la seconde
   ligne reprend le flux normal et s'aligne a gauche. */
@media (max-width: 991.98px) {
    .nav-inscriptions__sous {
        position: static; margin-top: .1rem;
        text-align: left; font-size: .78rem;
    }
    .nav-link.nav-inscriptions { line-height: 1.25; }
    .nav-inscriptions__mot::after { display: none; }
}

/* ---------- Tiroir « Plus d'infos » ---------- */

/* Le panneau reprend le bleu de la barre plutot que le blanc par defaut de
   Bootstrap : un rectangle blanc sous une barre de nuit se lit comme une
   erreur d'affichage. */
.nav-infos .dropdown-menu {
    background: #06213a;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: .35rem 0;
    margin-top: .35rem;
    min-width: 11rem;
}
.nav-infos .dropdown-item {
    color: var(--texte-doux);
    font-weight: 600; font-size: .92rem;
    padding: .5rem 1rem;
}
.nav-infos .dropdown-item:hover,
.nav-infos .dropdown-item:focus {
    background: rgba(255, 215, 0, .1);
    color: var(--blanc);
}
.nav-infos .dropdown-item.active {
    background: rgba(255, 215, 0, .14);
    color: var(--or);
}

/* Chevron dessine a part (voir le commentaire du gabarit). Un simple
   triangle CSS, aligne sur le texte. */
.nav-infos__chevron {
    display: inline-block; margin-left: .4em; vertical-align: .16em;
    border-left: .3em solid transparent; border-right: .3em solid transparent;
    border-top: .3em solid currentColor;
    opacity: .7;
}
.nav-infos.show .nav-infos__chevron { transform: rotate(180deg); opacity: 1; }

/* Replie, le menu mobile n'a pas de survol : le tiroir se deroule sur place,
   en retrait, et le panneau perd son cadre -- il fait partie de la liste. */
@media (max-width: 991.98px) {
    .nav-infos .dropdown-menu {
        background: transparent;
        border: 0; border-left: 1px solid rgba(255, 255, 255, .12);
        border-radius: 0;
        margin: 0 0 .3rem .9rem; padding: .1rem 0;
        min-width: 0;
    }
    .nav-infos .dropdown-item {
        font-size: .92rem; font-weight: 500;
        padding: .55rem .9rem;
    }
}

/* =======================================================================
   Menu mobile
   ======================================================================= */

/* Le bouton porte le mot « Menu » à côté de l'icône : trois traits seuls
   sont une convention que tout le monde ne connaît pas, en particulier les
   visiteurs plus âgés du club. */
.navbar-toggler {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .8rem;
    border: 1px solid rgba(255, 215, 0, .4); border-radius: 30px;
    background: rgba(255, 215, 0, .06);
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 215, 0, .35); }

.toggler-mot {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600; font-size: .82rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--or);
}

/* Trois traits dessinés plutôt que l'image de fond de Bootstrap : ils
   peuvent ainsi se transformer en croix à l'ouverture. */
.toggler-barres {
    display: flex; flex-direction: column; justify-content: center;
    gap: 4px; width: 18px; height: 14px;
}
.toggler-barres i {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--or);
    transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.navbar-toggler[aria-expanded="true"] .toggler-barres i:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .toggler-barres i:nth-child(2) {
    opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .toggler-barres i:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 991.98px) {
    /* Le menu déplié devient un panneau lisible : entrées espacées, filets
       de séparation, et une zone de clic confortable. Les liens serrés les
       uns contre les autres se touchaient au doigt. */
    .navbar-collapse {
        margin-top: .8rem;
        padding: .4rem 0 .6rem;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .navbar-nav .nav-item + .nav-item {
        border-top: 1px solid rgba(255, 255, 255, .05);
    }
    .navbar .nav-link {
        padding: .75rem .25rem !important;
        font-size: 1rem;
        border-radius: 0;
    }
    .navbar .nav-link.active {
        color: var(--or) !important;
        background: rgba(255, 215, 0, .07);
        padding-left: .7rem !important;
        border-left: 3px solid var(--or);
    }
    /* Les entrées « vedettes » perdent leur pastille sur mobile : dans une
       liste verticale, elles ressemblaient à des boutons flottants. */
    .navbar .nav-link.nav-vedette {
        background: none; border: 0;
    }
    /* La marge est desormais portee par .nav-cta-zone, qui a remplace
       l'element de liste. Le bouton n'a plus qu'a s'etaler. */
    .nav-cta {
        display: block; text-align: center;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toggler-barres i { transition: none; }
}

/* Partenaire sans logo : le nom tient lieu de vignette, plutôt qu'une image
   manquante. */
.partner-nom {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600; font-size: 1rem;
    color: var(--texte-doux); opacity: .75;
    padding: .5rem .9rem;
    border: 1px solid var(--bord); border-radius: var(--radius-sm);
    transition: color .2s var(--ease), border-color .2s var(--ease);
}
a:hover .partner-nom { color: var(--or-clair); border-color: rgba(255,215,0,.4); }

/* ---------- Page d'un événement : affiche à gauche, détail à droite ------ */

.article-duo { align-items: flex-start; }

.article-affiche {
    margin: 0;
    position: sticky; top: calc(var(--nav-h, 68px) + 1.2rem);
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--bord);
    background: var(--nuit-700);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.article-affiche img {
    display: block; width: 100%; height: auto;
    /* Plafond de hauteur : une affiche verticale de loto occupait tout
       l'écran et repoussait le détail hors de vue. Le clic ouvre l'image
       entière pour qui veut la lire. */
    max-height: 70vh; object-fit: contain;
    transition: transform .3s var(--ease);
}
.article-affiche a:hover img { transform: scale(1.02); }

/* ---------- Corps d'article : paragraphes vides ---------- */

/* L'editeur laisse des paragraphes vides en fin de corps -- une frappe sur
   Entree avant d'enregistrer suffit. Ils creusaient jusqu'a cent pixels de
   blanc entre le texte et les informations qui suivent. Les masquer ici
   evite de repasser dans chaque article, et evite surtout que le probleme
   revienne au prochain enregistrement. */
.article-corps > p:empty,
.article-corps > p:has(> br:only-child) { display: none; }

/* Le dernier element du corps ne porte plus sa marge basse : l'ecart au bloc
   suivant est celui du bloc suivant, pas la somme des deux. */
.article-corps > :last-child { margin-bottom: 0; }

/* ---------- Informations pratiques ---------- */

/* Horaire et lieu, sous le titre, aupres de la date. Centres comme le reste
   de l'en-tete, et replies en colonne quand la largeur ne suffit plus. */
.infos-pratiques {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .5rem .9rem; margin-top: .9rem;
}
.infos-pratiques__item {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .38rem .8rem;
    font-size: .88rem; color: var(--or-clair);
    background: rgba(255, 215, 0, .07);
    border: 1px solid rgba(255, 215, 0, .18);
    border-radius: 20px;
}
.infos-pratiques__item i { opacity: .8; font-size: .85em; }

.article-lieu {
    margin: 1.2rem 0 0; padding: .7rem .95rem;
    background: rgba(255, 215, 0, .06);
    border-left: 3px solid var(--or); border-radius: 0 8px 8px 0;
    font-size: .92rem; color: var(--or-clair);
}
.article-lieu i { margin-right: .4rem; }

@media (max-width: 991.98px) {
    /* Empilé : l'affiche passe au-dessus, sans coller — sur un téléphone,
       une image figée mangerait la moitié de l'écran en permanence. */
    .article-affiche { position: static; }
    .article-affiche img { max-height: 55vh; }
}

/* ================= Invite a derouler ================= */
/* Posee en absolu par rapport a la page, a un ecran du haut : elle tombe au
   bas du premier ecran sur toutes les pages, sans qu'aucun script n'ait a
   mesurer quoi que ce soit, et s'en va au defilement comme le reste du
   contenu. */
.invite-defiler {
  position: absolute;
  left: 50%;
  /* Collee au bas du premier ecran. La scene fait 46 px de haut : elle tient
     dans la bande vide sous les boutons, la ou aucun contenu ne descend. */
  top: calc(100vh - 62px);
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  text-decoration: none;
  color: var(--or, #FFD700);
  opacity: 1;
  transition: opacity .45s ease;
}
.invite-defiler.efface { opacity: 0; pointer-events: none; }

.invite-defiler__scene {
  display: flex;
  align-items: center;
  gap: .45rem;
  line-height: 0;
}
.invite-defiler__svg { overflow: visible; display: block; }

.invite-defiler__fleche {
  display: block;
  opacity: .5;
  animation: bcva-fleche 3.6s ease-in-out infinite;
}

/* La queue descend, frappe a mi-course, puis remonte hors champ. */
@keyframes bcva-queue {
  0%, 16%   { transform: translateY(0); }
  28%       { transform: translateY(11px); }
  34%       { transform: translateY(8px); }
  58%, 100% { transform: translateY(0); }
}
/* La bille part au contact, descend, puis s'efface. Elle revient a sa place
   pendant qu'elle est invisible : le retour ne se voit jamais. */
@keyframes bcva-bille {
  0%, 28%   { transform: translateY(0);    opacity: 1; }
  50%       { transform: translateY(12px); opacity: 1; }
  68%       { transform: translateY(20px); opacity: 0; }
  69%       { transform: translateY(0);    opacity: 0; }
  100%      { transform: translateY(0);    opacity: 1; }
}
/* Un tour complet pendant la descente. C'est ce qui distingue une bille qui
   roule d'une bille qui glisse. */
@keyframes bcva-roule {
  0%, 28%   { transform: rotate(0deg); }
  68%, 100% { transform: rotate(360deg); }
}
/* L'ombre suit la bille mais reste au sol : elle s'etale et palit a mesure
   que la bille s'eloigne. */
@keyframes bcva-ombre {
  0%, 28%  { opacity: .9; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.25); }
  68%, 100%{ opacity: 0;  transform: scale(1.5); }
}
@keyframes bcva-fleche {
  0%, 30%  { opacity: .28; transform: translateY(-2px); }
  55%      { opacity: .72; transform: translateY(2px); }
  85%, 100%{ opacity: .28; transform: translateY(-2px); }
}

.invite-defiler__queue  { animation: bcva-queue 3.6s ease-in-out infinite; }
.invite-defiler__bille  { animation: bcva-bille 3.6s ease-in-out infinite; }
.invite-defiler__points {
  transform-origin: 21.6px 17px;
  animation: bcva-roule 3.6s ease-in-out infinite;
}
.invite-defiler__ombre  {
  transform-origin: 21.6px 29px;
  animation: bcva-ombre 3.6s ease-in-out infinite;
}

@media (max-width: 575.98px) {
  .invite-defiler { top: calc(100vh - 54px); }
  .invite-defiler__svg { width: 34px; height: 35px; }
  .invite-defiler__fleche { width: 10px; height: 20px; }
}

/* Mouvement reduit : la scene reste, figee, l'intention se lit sans que rien
   ne bouge. C'est un reglage systeme des personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  .invite-defiler__queue,
  .invite-defiler__bille,
  .invite-defiler__points,
  .invite-defiler__ombre,
  .invite-defiler__fleche { animation: none; }
  .invite-defiler__fleche { opacity: .55; }
}

/* ================= Bille du bandeau ================= */
/* La bille partage la ligne du sigle. Placee apres le bloc de marque, elle
   demarrait a la fin du sous-titre « BILLARD CLUB VAL D'AMBOISE », quatre
   fois plus long que « BCVA » : d'ou les 162 px de vide mesures. En la
   mettant dans la ligne du sigle, elle se colle a lui. */
.navbar-brand .brand-ligne {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* `flex: 1 1 auto` fait que la bande occupe tout ce qui reste de la ligne.
   Comme le bloc de marque prend la largeur de son element le plus large --
   le sous-titre --, la bande s'arrete pile a la fin de « Amboise », sans
   qu'aucune largeur n'ait a etre ecrite en dur. */
.navbar-bille {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  margin-left: .55rem;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
/* Visible des que la ligne du sigle a de quoi la loger. La bande se mesure
   sur le sous-titre, qui est affiche a toutes les largeurs : le mecanisme n'a
   jamais eu besoin d'un grand ecran, seul ce seuil l'en empechait.
   Sous 360 px, la ligne devient trop courte pour que la course se lise --
   la bille apparaitrait et disparaitrait presque aussitot. */
@media (min-width: 360px) { .navbar-bille { display: block; } }

/* Course plus courte sur telephone : le nombre de tours est calcule pour
   environ 196 px (voir plus bas). Ralentir la rotation evite que la bille
   paraisse deraper sur une bande deux fois moins longue. */
@media (max-width: 991.98px) {
  .navbar-bille { height: 16px; margin-left: .45rem; }
  .navbar-bille__points { animation-name: bcva-traverse-points-court; }
}
@keyframes bcva-traverse-points-court {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(900deg); }
}

/* La bande : un filet dore qui s'estompe aux deux bouts. La bille roule
   dessus, elle ne flotte pas. */
.navbar-bille::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: linear-gradient(90deg,
    rgba(255,215,0,0), rgba(255,215,0,.28) 12%,
    rgba(255,215,0,.28) 88%, rgba(255,215,0,0));
}

/* La course est animee sur `left` plutot que sur `transform` : une valeur en
   pourcentage de `transform` se rapporte a la taille de la bille, pas a
   celle de la bande. Avec `left`, elle traverse toute la largeur disponible
   quelle que soit la longueur du nom du club. */
.navbar-bille__svg {
  position: absolute;
  bottom: 1px;             /* le bas de la bille touche le filet */
  left: 0;
  animation: bcva-traverse 4s linear infinite;
}
@keyframes bcva-traverse {
  0%   { left: -16px; }
  100% { left: 100%; }
}
/* Rotation accordee au deplacement, sinon la bille patine ou derape et
   l'oeil le voit meme sans savoir pourquoi. Le dessin fait 24 unites rendues
   sur 16 px : le rayon vaut 9,4 * 16/24 = 6,27 px, la circonference
   2*PI*6,27 = 39,4 px. Sur environ 196 px de course, cela fait 4,98 tours,
   soit 1792 degres. */
@keyframes bcva-traverse-points {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(1792deg); }
}
.navbar-bille__points {
  transform-origin: 12px 12px;
  animation: bcva-traverse-points 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-bille__svg,
  .navbar-bille__points { animation: none; }
  .navbar-bille__svg { left: 45%; }
}