/* ==========================================================================
   Légèrement Crinqué — feuille de style commune à toutes les pages
   ========================================================================== */

:root{
  --navy:#0d1238; --navy-2:#171d52; --red:#ff171f; --red-dark:#c4000b;
  --cream:#f5f1ea; --paper:#fffdf9; --ink:#15161b; --muted:#6e7078;
  --line:#ded9d0; --pad:clamp(24px,8vw,130px);
  /* Jaune repris des feux de l'arbre de départ du logo. */
  --jaune:#ffc93c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
     font-family:Montserrat,Arial,Helvetica,sans-serif;line-height:1.55}
img{max-width:100%}
a{transition:.25s ease}
h1,h2,h3{font-family:"Barlow Condensed",Arial,sans-serif;text-transform:uppercase;
         letter-spacing:-.02em;line-height:.9;margin:0}
em{font-style:normal;color:var(--red)}
.eyebrow{color:var(--red);font-size:10px;letter-spacing:.2em;font-weight:700;margin:0 0 22px}
.vide{color:var(--muted);font-size:14px}

/* ---------------- Bandeau défilant (toutes les pages) ---------------- */
.defilant{background:var(--ink);color:#fff;overflow:hidden;padding:11px 0;
          border-bottom:2px solid var(--red);position:relative}
.defilant .piste{display:inline-flex;white-space:nowrap;will-change:transform;
                 animation:defile var(--vitesse,60s) linear infinite}
.defilant:hover .piste{animation-play-state:paused}
.defilant .piste span{padding:0 34px;font-size:11px;font-weight:700;
                      letter-spacing:.16em;text-transform:uppercase;color:var(--jaune)}
.defilant .piste span::after{content:"◆";color:var(--red);margin-left:34px}
@keyframes defile{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* Si le visiteur a désactivé les animations dans son système, le message
   reste affiché mais ne défile pas : une seule copie, centrée. */
@media(prefers-reduced-motion:reduce){
  .defilant{text-align:center}
  .defilant .piste{animation:none;display:block}
  .defilant .piste span:not(:first-child){display:none}
  .defilant .piste span::after{content:none}
}

/* ---------------- Navigation ---------------- */
nav{height:86px;background:rgba(13,18,56,.98);display:flex;align-items:center;
    padding:0 var(--pad);gap:42px;position:sticky;top:0;z-index:30;
    box-shadow:0 8px 24px rgba(8,11,36,.16)}
nav .brand img{width:132px;height:56px;object-fit:contain;display:block}
.links{display:flex;gap:20px;flex:1}
.links a,.ticket,footer a{color:#fff;text-decoration:none;text-transform:uppercase;
    font-size:10px;letter-spacing:.15em;font-weight:700}
.links a{opacity:.78;padding:6px 0;border-bottom:2px solid transparent}
.links a:hover{opacity:1;color:var(--red)}
.links a.actif{opacity:1;color:#fff;border-bottom-color:var(--red)}
.ticket{border:1px solid rgba(255,255,255,.5);padding:13px 17px;white-space:nowrap}
.ticket:hover{background:#fff;color:var(--navy);border-color:#fff}
.burger{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;padding:0 4px}
.menu-mobile{display:none;background:var(--navy-2);position:sticky;top:70px;z-index:29}
.menu-mobile.ouvert{display:flex;flex-direction:column}
.menu-mobile a{color:#fff;text-decoration:none;text-transform:uppercase;font-size:11px;
               letter-spacing:.14em;font-weight:700;padding:16px 24px;
               border-bottom:1px solid rgba(255,255,255,.1)}

/* ---------------- Accueil ---------------- */
.hero{background:radial-gradient(circle at 78% 44%,#29316e 0,#111642 35%,var(--navy) 72%);
      color:#fff;padding:96px var(--pad);display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(52px,6.4vw,90px);font-weight:800;margin-bottom:28px}
.lede{max-width:460px;line-height:1.8;color:#d0d4e4;font-size:16px;margin:0 0 32px}
.hero-logo{border-radius:14px;overflow:hidden;box-shadow:0 26px 55px rgba(0,0,0,.55);
           border:1px solid rgba(255,255,255,.12)}
.hero-logo img{display:block;width:100%}
.chiffres{display:flex;gap:38px;margin-top:44px;flex-wrap:wrap}
.chiffres b{font-family:"Barlow Condensed",Arial,sans-serif;font-size:40px;
            display:block;line-height:1;color:#fff}
.chiffres span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9aa1c4}

/* ==========================================================================
   Fond personnalisé des bannières (couleur, photo ou vidéo muette)

   La classe « fond-perso » est posée par assets/site.js sur .hero et
   .banniere quand l'administration a choisi autre chose que le marine.
   Le média se place derrière le texte, un voile noir réglable garantit
   que les titres restent lisibles quoi qu'on mette en arrière-plan.
   ========================================================================== */
.hero.fond-perso,.banniere.fond-perso{position:relative;overflow:hidden;
  background:var(--fond-couleur,var(--navy))}

/* Le média : photo ou vidéo, toujours en « cover » — il remplit le
   rectangle sans se déformer, quelle que soit sa taille d'origine. */
.fond-perso .fond-media{position:absolute;inset:0;z-index:0;
  background-size:cover;background-repeat:no-repeat;
  background-position:var(--fond-cadrage,center);
  opacity:calc(var(--fond-opacite,100) / 100);
  filter:brightness(calc(var(--fond-luminosite,100) / 100))
         blur(calc(var(--fond-flou,0) * 1px));
  /* Léger débord : sans lui, un flou laisse voir les bords transparents. */
  transform:scale(calc(1 + var(--fond-flou,0) / 60))}
.fond-perso .fond-media video{width:100%;height:100%;object-fit:cover;display:block}

/* Voile assombrissant, pour que le texte blanc reste lisible. */
.fond-perso .fond-voile{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(7,9,31,calc(var(--fond-assombrir,45) / 100))}

/* Le contenu repasse devant. */
.fond-perso > *:not(.fond-media):not(.fond-voile){position:relative;z-index:2}

/* ---------------- Bannière des pages intérieures ---------------- */
.banniere{background:radial-gradient(circle at 70% 50%,#29316e 0,#111642 40%,var(--navy) 75%);
          color:#fff;padding:78px var(--pad) 70px}
.banniere h1{font-size:clamp(44px,5.6vw,78px);font-weight:800}
.banniere p{color:#c3c8de;max-width:520px;margin:22px 0 0;line-height:1.8}

/* ---------------- Boutons ---------------- */
.button{display:inline-block;background:var(--red);color:#fff;padding:16px 22px;
        text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.16em;
        font-weight:700;border:1px solid var(--red);cursor:pointer;
        box-shadow:0 10px 22px rgba(196,0,11,.25)}
.button:hover{background:#ff333b;transform:translateY(-2px)}
.button.fantome{background:none;border-color:rgba(255,255,255,.45);box-shadow:none;margin-left:10px}
.button.fantome:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ---------------- Bandeau rouge ---------------- */
.ticker{background:var(--red);color:#fff;padding:18px var(--pad);font-size:10px;
        letter-spacing:.17em;font-weight:700;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ticker strong{font-size:12px}
.ticker a{color:#fff;text-decoration:none;margin-left:auto;border-bottom:1px solid rgba(255,255,255,.6)}

/* ---------------- Sections ---------------- */
section{padding:96px var(--pad)}
section h2{font-size:clamp(42px,5vw,70px);font-weight:800;margin-bottom:14px}
.fond-clair{background:var(--paper)}
.fond-creme{background:var(--cream)}

/* ---------------- Calendrier ---------------- */
.cal-navigation{display:flex;align-items:center;justify-content:space-between;max-width:720px;margin-top:36px}
.cal-navigation .cal-titre{margin:0}
.cal-fleche{width:42px;height:42px;border:1px solid var(--line);background:#fff;color:var(--navy);
            font-size:32px;line-height:1;cursor:pointer;display:grid;place-items:center}
.cal-fleche:hover:not(:disabled){background:var(--navy);color:#fff}
.cal-fleche:disabled{opacity:.28;cursor:default}
.cal-titre{font-family:"Barlow Condensed",Arial,sans-serif;font-size:26px;
           text-transform:uppercase;margin:0 0 14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:720px}
.cal-grid b{text-align:center;color:#8a8a8a;font-size:10px;padding:8px;
            letter-spacing:.1em;text-transform:uppercase}
.cal-case{min-height:74px;border:1px solid var(--line);background:#fff;padding:8px;
          font-size:12px;color:#9a9a9a}
.cal-case.actif{color:#fff;font-weight:700;border-color:transparent}
.cal-case small{display:block;font-size:9px;font-weight:700;line-height:1.15;margin-top:5px}
.cal-legende{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 15px;font-size:11px;font-weight:700}
.leg-organise{color:var(--red)}.leg-participe{color:#4c8600}
.cal-event{color:#fff;border-left:3px solid var(--event-color);padding-left:4px}
.cal-event.participe{background:#4d8700}.cal-event.organise{background:#bd1720}

/* ---------------- Cartes d'événements ---------------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
        gap:18px;margin-top:44px}
.event{background:var(--cream);border:1px solid var(--line);padding:30px;min-height:255px;
       display:flex;flex-direction:column;transition:.25s ease;border-top:5px solid var(--red)}
.event:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(34,34,34,.09)}
.event small{color:var(--red);font-size:10px;font-weight:700;letter-spacing:.14em;
             text-transform:uppercase}
.event h3{font-size:26px;margin:16px 0 12px}
.event p{font-size:13px;color:var(--muted);margin:0 0 8px}
.event .prix{margin-top:auto;font-weight:700;font-size:14px;color:var(--ink);
             display:flex;justify-content:space-between;align-items:center;gap:12px}
.event .prix a{color:var(--red);text-decoration:none;font-size:10px;letter-spacing:.12em;
               text-transform:uppercase;border-bottom:1px solid var(--red)}
/* Affiche / poster de l'événement */
.event.avec-affiche{padding:0}
.event .affiche{display:block;background:var(--navy);line-height:0;overflow:hidden}
.event .affiche img{width:100%;height:250px;object-fit:cover;transition:.35s ease}
.event .affiche:hover img{transform:scale(1.04)}
.event.avec-affiche > small,.event.avec-affiche > h3,
.event.avec-affiche > p{margin-left:28px;margin-right:28px}
.event.avec-affiche > small{display:block;margin-top:24px}
.event.avec-affiche > .prix{margin:auto 28px 26px}
.fond-clair .event{background:var(--paper)}

/* ==========================================================================
   Billet Légèrement Crinqué
   Inspiré du billet de concert classique : souche verticale à gauche,
   corps central sur fond rayonnant, talon détachable à droite.
   ========================================================================== */
.billets-modeles{display:flex;flex-direction:column;gap:34px;margin-top:44px}

.billet-lc{display:grid;grid-template-columns:56px 1fr 236px;
           background:var(--navy);color:#fff;position:relative;
           box-shadow:0 22px 46px rgba(0,0,0,.45);
           border-radius:4px;overflow:hidden}
/* Filet rouge en haut : la même signature que les cartes du site. */
.billet-lc::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
                   background:linear-gradient(90deg,var(--red),#ff6a2e,var(--jaune));z-index:4}

/* --- Souche verticale rouge --- */
.billet-lc .souche{background:linear-gradient(180deg,#ff2028,#c4000b);
                   display:grid;place-items:center;position:relative}
.billet-lc .souche span{writing-mode:vertical-rl;transform:rotate(180deg);
                        font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;
                        font-size:16px;letter-spacing:.44em;text-transform:uppercase;
                        color:#fff;white-space:nowrap;
                        text-shadow:0 2px 6px rgba(0,0,0,.35)}

/* --- Corps central, marine avec rayons --- */
.billet-lc .corps{padding:26px 28px 20px;text-align:center;position:relative;
  background:
    repeating-conic-gradient(from 0deg at 50% 42%,
      rgba(255,255,255,.055) 0deg 5deg, rgba(255,255,255,0) 5deg 10deg),
    radial-gradient(circle at 50% 40%, #29316e 0, #141a4a 45%, var(--navy) 78%)}
/* Monogramme en filigrane */
.billet-lc .corps::before{content:"LC";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:190px;font-weight:900;color:rgba(255,255,255,.035);line-height:1;
  letter-spacing:-.06em;pointer-events:none}
.billet-lc .corps > *{position:relative;z-index:1}

.billet-lc .cases{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.billet-lc .cases span{border:1px solid rgba(255,255,255,.32);padding:5px 10px;
                       font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
                       font-weight:600;display:flex;gap:7px;align-items:center;
                       background:rgba(255,255,255,.06);color:#e6e9f5}
.billet-lc .cases b{font-weight:800;font-size:9.5px;color:var(--jaune);letter-spacing:.06em}

.billet-lc .destinataire{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
                         margin:0 0 12px;color:var(--jaune);font-weight:700}
.billet-lc .nom-event{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;
                      font-size:clamp(26px,3.4vw,42px);text-transform:uppercase;
                      line-height:.93;margin:0 0 10px;letter-spacing:-.015em;color:#fff;
                      text-shadow:0 3px 14px rgba(0,0,0,.4)}
.billet-lc .sous-nom{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
                     margin:0 0 22px;font-weight:700;color:#ff4d54}

/* Bande damier pleine largeur */
.billet-lc .damier{height:11px;margin:0 -28px 20px;opacity:.9;
  background:repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%) 0 0/14px 14px}

.billet-lc .details{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
                    border-top:1px solid rgba(255,255,255,.22);padding-top:16px}
.billet-lc .details > div{display:flex;flex-direction:column;gap:3px}
.billet-lc .details b{font-size:8px;letter-spacing:.18em;text-transform:uppercase;
                      color:#8f97c0;font-weight:700}
.billet-lc .details span{font-family:"Barlow Condensed",Arial,sans-serif;font-size:25px;
                         font-weight:800;text-transform:uppercase;line-height:1;color:#fff}
.billet-lc .details small{font-size:8px;letter-spacing:.16em;text-transform:uppercase;
                          color:#8f97c0}
.billet-lc .bas{font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;
                color:#767ea8;margin:18px 0 0}

/* --- Talon détachable, en crème pour trancher --- */
.billet-lc .talon{background:var(--cream);color:var(--ink);padding:22px 20px 16px;
                  display:flex;flex-direction:column;gap:3px;position:relative}
/* Perforation : une vraie ligne de déchirure, pointillés sur toute la hauteur */
.billet-lc .talon::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:3px;
  background:repeating-linear-gradient(180deg,
    var(--navy) 0 8px, transparent 8px 16px);z-index:3}
.billet-lc .talon > *{position:relative;z-index:4}

.billet-lc .admis{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;
                  font-size:32px;color:var(--red);text-transform:uppercase;
                  margin:0 0 14px;line-height:1;letter-spacing:-.015em;
                  border-bottom:3px solid var(--navy);padding-bottom:9px}
.billet-lc .etiq{font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;
                 color:#5c5e68;margin:9px 0 2px;font-weight:700}
.billet-lc .val{font-size:11.5px;font-weight:700;margin:0;line-height:1.35;
                text-transform:uppercase;color:var(--navy)}
.billet-lc .mini-cases{display:flex;gap:5px;margin:14px 0 12px}
.billet-lc .mini-cases div{border:1.5px solid var(--navy);padding:5px 7px;
                           text-align:center;flex:1;background:#fff}
.billet-lc .mini-cases b{display:block;font-size:6.5px;letter-spacing:.12em;color:#5c5e68}
.billet-lc .mini-cases span{font-family:"Barlow Condensed",Arial,sans-serif;
                            font-size:18px;font-weight:800;color:var(--red)}
.billet-lc .codebarres{height:46px;margin-top:auto;background:#fff;padding:4px;
  background-image:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, #fff 2px 4px, var(--ink) 4px 5px, #fff 5px 9px,
    var(--ink) 9px 12px, #fff 12px 14px);
  background-clip:content-box}
.billet-lc .code{font-size:8.5px;letter-spacing:.22em;color:var(--navy);margin:6px 0 0;
                 text-align:center;font-weight:700}

/* --- Bouton d'achat sous le billet --- */
.billet-achat{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:-14px}
.billet-achat .montant{font-family:"Barlow Condensed",Arial,sans-serif;font-size:34px;
                       color:#fff;line-height:1}
.billet-achat .montant small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
                             color:#bbc1d5;display:block;font-family:Montserrat,Arial,sans-serif}

@media(max-width:860px){
  .billet-lc{grid-template-columns:42px 1fr}
  .billet-lc .souche span{font-size:13px;letter-spacing:.32em}
  .billet-lc .corps{padding:22px 20px 16px}
  .billet-lc .corps::before{font-size:140px}
  .billet-lc .damier{margin:0 -20px 16px}
  /* Le talon passe dessous : la perforation devient horizontale. */
  .billet-lc .talon{grid-column:1/-1;padding:20px}
  .billet-lc .talon::before{left:0;right:0;top:-1px;bottom:auto;width:auto;height:3px;
    background:repeating-linear-gradient(90deg,
      var(--navy) 0 8px, transparent 8px 16px)}
  .billet-lc .details span{font-size:21px}
  .billet-lc .codebarres{margin-top:16px}
}
.lien-compte{color:#fff;text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:700;white-space:nowrap}.lien-compte:hover{color:var(--red)}
@media(max-width:480px){
  .billet-lc .details{grid-template-columns:1fr;gap:12px;text-align:left}
  .billet-lc .nom-event{font-size:24px}
  .billet-lc .corps::before{font-size:110px}
  .billet-lc .cases span{font-size:8px;padding:4px 8px}
}

/* ---------------- Billetterie ---------------- */
.billetterie{background:var(--navy);color:#fff}
.billetterie .intro{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}
.billetterie p{line-height:1.8;color:#bbc1d5;max-width:460px}
.billets{display:flex;flex-direction:column;gap:14px;margin-top:44px}
.billet{background:linear-gradient(135deg,#ff2028,#d9000b);padding:26px 30px;
        display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
        box-shadow:14px 16px 0 rgba(8,11,37,.5)}
.billet strong{font-family:"Barlow Condensed",Arial,sans-serif;font-size:30px;
               text-transform:uppercase;line-height:1;display:block}
.billet span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.billet .montant{font-family:"Barlow Condensed",Arial,sans-serif;font-size:34px;margin-left:auto}
.billet .achat{background:#fff;color:var(--navy);padding:13px 17px;text-decoration:none;
               font-size:10px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;
               white-space:nowrap}
.billet .achat:hover{background:var(--navy);color:#fff}
.info-billets{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
              gap:18px;margin-top:64px;border-top:1px solid rgba(255,255,255,.15);padding-top:44px}
.info-billets h3{font-size:20px;margin-bottom:10px}
.info-billets p{font-size:13px;margin:0}

/* ---------------- Boutique ---------------- */
/* Filtres par catégorie */
.categories-boutique{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 0}
.categories-boutique button{background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:11px 17px;font:inherit;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:.2s}
.categories-boutique button:hover{border-color:var(--navy)}
.categories-boutique button.actif{background:var(--navy);color:#fff;border-color:var(--navy)}
.categories-boutique button .nb{opacity:.6;margin-left:6px;font-weight:600}

/* Titre de groupe quand on affiche tout */
.titre-categorie{display:flex;align-items:center;gap:16px;margin:44px 0 18px}
.titre-categorie h3{font-size:26px;white-space:nowrap}
.titre-categorie span{flex:1;height:2px;background:var(--line)}

.produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
          gap:18px;margin-top:22px}
.produit{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
         transition:.25s ease}
.produit:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(20,20,35,.12)}
/* Le fond derrière les photos se choisit dans Admin → Boutique. Blanc par
   défaut : les photos de produits sont détourées, elles ressortent mieux.
   --mono-produit suit automatiquement pour rester lisible. */
.produit .visuel{height:250px;background:var(--fond-produit,#ffffff);
                 display:grid;place-items:center;
                 overflow:hidden;padding:18px;position:relative}
.produit .visuel img{max-height:100%;max-width:100%;object-fit:contain;
                     transition:opacity .2s ease, transform .28s ease}

/* Loupe au survol : l'image grossit sous le curseur, pour examiner le logo
   et la couture. Réservé à la souris — sur un écran tactile il n'y a pas de
   survol, l'image resterait grossie après un simple toucher. */
@media (hover:hover) and (pointer:fine){
  .produit .visuel{cursor:zoom-in}
  .produit .visuel img{transform-origin:var(--zx,50%) var(--zy,50%)}
  .produit .visuel:hover img{transform:scale(2.1)}
}
@media (prefers-reduced-motion:reduce){
  .produit .visuel img{transition:opacity .2s ease}
  .produit .visuel:hover img{transform:none}
}
.produit .visuel .mono{font-family:"Barlow Condensed",Arial,sans-serif;font-size:64px;
                       color:var(--mono-produit,rgba(20,22,35,.18));font-weight:800}

/* Vignettes de vues : devant, dos, côté… */
.produit .vues{display:flex;gap:5px;padding:9px 10px;background:#f2efe9;
               border-bottom:1px solid var(--line);flex-wrap:wrap}
.produit .vues button{background:#fff;border:1px solid var(--line);padding:5px 9px;
  font:inherit;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;color:var(--muted);margin:0;transition:.15s}
.produit .vues button:hover{border-color:var(--navy);color:var(--ink)}
.produit .vues button.actif{background:var(--navy);color:#fff;border-color:var(--navy)}

.produit .info{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.produit .etiq-cat{font-size:9px;letter-spacing:.14em;text-transform:uppercase;
                   color:var(--red);font-weight:700}
.produit .nom{font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.produit .desc{font-size:12px;color:var(--muted);flex:1;line-height:1.6}
.produit .prix{font-family:"Barlow Condensed",Arial,sans-serif;font-size:28px;color:var(--red)}
.produit .commander{margin-top:4px;text-align:center}

/* Paiement en ligne : couleurs officielles des deux services, pour que le
   client reconnaisse tout de suite où il s'en va. */
.produit .paiement{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.produit .paiement .button{text-align:center;padding:11px 12px;font-size:11px}
.produit .paiement .paypal{background:#003087;color:#fff;border-color:#003087}
.produit .paiement .paypal:hover{background:#001c4f;border-color:#001c4f}
.produit .paiement .square{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.produit .paiement .square:hover{background:#000;border-color:#000}
/* Quand le paiement est en ligne, le courriel devient le choix secondaire. */
.produit .commander.secondaire{background:transparent;color:var(--navy);
  border:1px solid var(--line);padding:9px 12px;font-size:10px}
.produit .commander.secondaire:hover{border-color:var(--navy);background:#f2efe9}

.note-paiement{margin:18px 0 0;font-size:13px;color:var(--muted);line-height:1.7;
  border-left:3px solid var(--jaune);padding-left:14px;max-width:760px}

@media(max-width:600px){
  .produits{grid-template-columns:1fr 1fr;gap:10px}
  .produit .visuel{height:180px;padding:12px}
  .produit .info{padding:13px}
  .produit .vues{padding:7px}
  .produit .vues button{padding:4px 7px;font-size:8px}
  .produit .paiement .button{padding:10px 8px;font-size:10px}
  .titre-categorie h3{font-size:21px}
}

/* ==========================================================================
   Fiche de pilote — photo à gauche, pedigree à droite
   ========================================================================== */
/* Grille de cartes, comme une collection étalée sur une table. */
.coureurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
          gap:26px;margin-top:44px}

/* La carte : bordure épaisse marine, liseré rouge intérieur. */
.coureur{background:var(--navy);padding:9px;border-radius:9px;
         box-shadow:0 16px 34px rgba(10,12,30,.35);transition:.3s ease;
         display:flex;flex-direction:column}
.coureur:hover{transform:translateY(-7px) rotate(-.5deg);
               box-shadow:0 26px 48px rgba(10,12,30,.5)}
.coureur .carte{border:2px solid var(--red);border-radius:4px;overflow:hidden;
                display:flex;flex-direction:column;flex:1;background:var(--cream)}

/* --- Bandeau du haut : discipline + marque --- */
.coureur .bandeau{background:linear-gradient(90deg,var(--red),#c4000b);color:#fff;
                  padding:7px 11px;display:flex;align-items:center;gap:8px}
.coureur .bandeau .disc{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
                        font-weight:800}
.coureur .bandeau .marque{margin-left:auto;font-family:"Barlow Condensed",Arial,sans-serif;
                          font-size:13px;font-weight:800;letter-spacing:.1em;opacity:.9}

/* --- Photo, l'élément dominant de la carte --- */
.coureur .portrait{position:relative;background:
  radial-gradient(circle at 50% 32%,#2b3576 0,#151b4d 55%,#0b0f33 100%);
  aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.coureur .portrait img{width:100%;height:100%;object-fit:cover}
/* Sans photo : le dossard en très grand */
.coureur .dossard{font-family:"Barlow Condensed",Arial,sans-serif;font-size:120px;
                  font-weight:900;color:rgba(255,255,255,.16);line-height:1;
                  letter-spacing:-.05em}
/* Le numéro, en pastille d'angle comme sur une carte de hockey */
.coureur .numero{position:absolute;top:9px;right:9px;background:var(--jaune);
                 color:var(--navy);font-family:"Barlow Condensed",Arial,sans-serif;
                 font-size:27px;font-weight:900;line-height:1;
                 min-width:46px;height:46px;display:grid;place-items:center;
                 border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.45);
                 border:2px solid #fff;padding:0 6px}
/* Damier en bas de la photo */
.coureur .portrait::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;
  background:repeating-conic-gradient(#fff 0% 25%, var(--ink) 0% 50%) 0 0/12px 12px}

/* --- Plaque du nom --- */
.coureur .plaque{background:var(--navy);color:#fff;padding:13px 14px 12px;text-align:center}
.coureur h3{font-size:clamp(21px,2.1vw,26px);line-height:.98;margin:0 0 5px;color:#fff}
.coureur .machine{font-size:10px;color:var(--jaune);font-weight:700;
                  letter-spacing:.11em;text-transform:uppercase;display:block}
.coureur .ville{font-size:10px;color:#9aa1c4;display:block;margin-top:4px;
                letter-spacing:.05em}

/* --- Bande de statistiques --- */
.pedigree{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));
          gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.pedigree div{background:var(--cream);padding:9px 6px;text-align:center}
.pedigree b{display:block;font-size:7px;letter-spacing:.13em;text-transform:uppercase;
            color:#6a6c76;font-weight:700;margin-bottom:3px}
.pedigree span{font-family:"Barlow Condensed",Arial,sans-serif;font-size:17px;
               font-weight:800;text-transform:uppercase;line-height:1.05;
               display:block;color:var(--navy)}

/* --- Palmarès, en or --- */
.coureur .palmares{background:linear-gradient(90deg,#fff2cc,#ffe49a);
                   padding:9px 13px;border-bottom:1px solid var(--line)}
.coureur .palmares b{display:block;font-size:7px;letter-spacing:.15em;
                     text-transform:uppercase;color:#8a6a00;margin-bottom:2px}
.coureur .palmares span{font-size:11.5px;line-height:1.45;display:block;
                        color:#4a3a00;font-weight:600}

/* --- Bas de carte --- */
.coureur .bas-carte{padding:12px 14px 13px;display:flex;flex-direction:column;
                    gap:9px;flex:1;background:var(--cream)}
.coureur .bio{font-size:11.5px;color:#5c5e68;line-height:1.6;margin:0;flex:1}
.coureur .reseau{align-self:flex-start;font-size:9px;letter-spacing:.13em;
                 text-transform:uppercase;font-weight:700;color:var(--red);
                 text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:2px}
.coureur .reseau:hover{color:var(--navy);border-color:var(--navy)}

@media(max-width:600px){
  .coureurs{grid-template-columns:1fr;gap:20px;max-width:390px;margin-left:auto;margin-right:auto}
  .coureur:hover{transform:none}
}

/* ==========================================================================
   Bandeau défilant des logos de commanditaires

   Même principe que le bandeau de texte : la piste est dupliquée et
   translatée de -50 %, ce qui rend la boucle invisible.
   ========================================================================== */
.bandeau-comm{background:var(--paper);border-top:1px solid var(--line);
              border-bottom:1px solid var(--line);padding:26px 0 30px;overflow:hidden}
.bandeau-comm .titre-comm{text-align:center;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 20px;
  padding:0 20px}
.bandeau-comm .piste-comm{display:inline-flex;align-items:center;white-space:nowrap;
  will-change:transform;animation:defileComm var(--vitesse,40s) linear infinite}
.bandeau-comm:hover .piste-comm{animation-play-state:paused}
@keyframes defileComm{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Chaque logo : un lien si le commanditaire a un site, sinon une simple case.
   Les logos restent toujours en couleur — ce sont les marques de vos
   partenaires, elles doivent être reconnaissables du premier coup d'œil. */
.bandeau-comm .logo-comm{display:inline-flex;align-items:center;justify-content:center;
  height:74px;min-width:150px;padding:0 26px;text-decoration:none;flex:none;
  transition:transform .25s ease}
.bandeau-comm .logo-comm:hover{transform:scale(1.07)}
.bandeau-comm .logo-comm img{max-height:58px;max-width:170px;object-fit:contain}
/* Sans logo téléversé, on affiche le nom en lettres */
.bandeau-comm .logo-comm .nom-comm{font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:23px;font-weight:800;text-transform:uppercase;color:var(--navy);
  letter-spacing:.02em;line-height:1.05;text-align:center;white-space:normal;
  max-width:170px}
/* Petit trait de séparation, repris du damier */
.bandeau-comm .logo-comm + .logo-comm{border-left:1px solid var(--line)}

/* Sur fond crème, le bandeau prend le fond clair pour se détacher. */
.fond-creme + .bandeau-comm,.bandeau-comm.sur-creme{background:#fff}

@media(prefers-reduced-motion:reduce){
  .bandeau-comm .piste-comm{animation:none}
  .bandeau-comm{overflow-x:auto}
}
@media(max-width:640px){
  .bandeau-comm{padding:20px 0 24px}
  .bandeau-comm .logo-comm{height:58px;min-width:120px;padding:0 18px}
  .bandeau-comm .logo-comm img{max-height:46px;max-width:130px}
  .bandeau-comm .logo-comm .nom-comm{font-size:18px;max-width:130px}
}

/* ---------------- Commanditaires et partenaires ---------------- */
.niveau{margin-top:52px}
.niveau-titre{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.niveau-titre h3{font-size:26px;white-space:nowrap}
.niveau-titre span{flex:1;height:2px;background:var(--line)}
.niveau-titre b{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
                color:#fff;background:var(--red);padding:5px 10px;font-weight:700}
.commanditaires{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.commanditaire{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
               text-decoration:none;color:inherit;transition:.25s ease}
.commanditaire:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(34,34,34,.1);
                     border-color:#c8bfb3}
.commanditaire .visuel{height:130px;background:var(--navy);display:grid;place-items:center;
                       padding:18px;overflow:hidden}
.commanditaire .visuel img{max-height:94px;max-width:100%;object-fit:contain}
.commanditaire .visuel .mono{font-family:"Barlow Condensed",Arial,sans-serif;font-size:34px;
                             color:#fff;font-weight:800;text-align:center;line-height:1;
                             letter-spacing:.02em}
.commanditaire .info{padding:18px;display:flex;flex-direction:column;gap:7px;flex:1}
.commanditaire .nom{font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.commanditaire .desc{font-size:12px;color:var(--muted);flex:1}
.commanditaire .visite{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
                       color:var(--red);font-weight:700}

/* Forfaits de commandite */
.forfaits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
          gap:18px;margin-top:44px}
.forfait{background:var(--navy);color:#fff;padding:30px;display:flex;flex-direction:column;
         border-top:5px solid var(--red)}
.forfait h3{font-size:28px;margin-bottom:6px}
.forfait .prix{font-family:"Barlow Condensed",Arial,sans-serif;font-size:38px;
               color:var(--red);line-height:1;margin:10px 0 18px}
.forfait ul{list-style:none;padding:0;margin:0;font-size:13px;color:#c3c8de;line-height:1.9}
.forfait li::before{content:"▸ ";color:var(--red);font-weight:700}
.fond-clair .forfait,.fond-creme .forfait{background:var(--navy)}

/* ---------------- Proposer un événement ---------------- */
.proposer{background:#171717;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:7vw}
.proposer p{line-height:1.8;color:#b6b6b6;max-width:440px}
.proposer ol{color:#b6b6b6;font-size:14px;line-height:1.9;padding-left:20px;margin:26px 0 0}
.proposer ol b{color:#fff}
.proposer form{display:flex;flex-direction:column;gap:12px}
.proposer input,.proposer textarea{background:none;border:0;border-bottom:1px solid #5c5c5c;
    padding:15px 0;color:#fff;font:inherit;outline:0}
.proposer input::placeholder,.proposer textarea::placeholder{color:#8d8d8d}
.proposer input:focus,.proposer textarea:focus{border-bottom-color:var(--red)}
.proposer textarea{min-height:120px;resize:vertical}
.proposer button{align-self:start;margin-top:14px;border:0}
.avis{font-size:13px;margin-top:8px;min-height:18px;color:#8bd39b}
.avis.erreur{color:#ff8a8a}

/* ---------------- Nous joindre ---------------- */
.coordonnees{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
             gap:18px;margin-top:44px}
.coordonnee{background:var(--paper);border:1px solid var(--line);padding:28px;
            border-top:5px solid var(--red)}
.coordonnee h3{font-size:22px;margin-bottom:10px}
.coordonnee a,.coordonnee span{display:block;font-size:14px;color:var(--ink);
                               text-decoration:none;line-height:1.7;word-break:break-word}
.coordonnee a:hover{color:var(--red)}
.coordonnee small{display:block;font-size:12px;color:var(--muted);margin-top:8px}
/* Lien avec le logo Facebook, reconnaissable d'un coup d'œil */
.lien-fb{display:flex!important;align-items:center;gap:9px;margin-bottom:7px}
.ico-fb{width:20px;height:20px;flex:none;fill:#1877F2}
.lien-fb:hover .ico-fb{fill:var(--red)}
/* Version pour le pied de page et le bas des fiches */
.reseau .ico-fb{width:14px;height:14px;vertical-align:-2px;margin-right:5px;fill:currentColor}
.fond-creme .coordonnee{background:#fff}

/* ==========================================================================
   Galerie photos et vidéos
   ========================================================================== */
.filtres-galerie{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 8px}
.filtres-galerie button{background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:10px 15px;font:inherit;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:.2s}
.filtres-galerie button:hover{border-color:var(--navy)}
.filtres-galerie button.actif{background:var(--navy);color:#fff;border-color:var(--navy)}

.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
         gap:14px;margin-top:26px}
.media{position:relative;background:var(--navy);border:0;padding:0;cursor:pointer;
       overflow:hidden;aspect-ratio:4/3;display:block;width:100%}
.media img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.media:hover img{transform:scale(1.07)}
.media .sans-image{display:grid;place-items:center;height:100%;
  font-family:"Barlow Condensed",Arial,sans-serif;font-size:46px;font-weight:800;
  color:rgba(255,255,255,.18)}
/* Voile dégradé pour que la légende reste lisible sur n'importe quelle photo */
.media .voile{position:absolute;left:0;right:0;bottom:0;padding:32px 13px 11px;
  background:linear-gradient(transparent,rgba(7,9,31,.88));text-align:left;
  color:#fff;pointer-events:none}
.media .voile b{display:block;font-size:13px;font-weight:700;line-height:1.3}
.media .voile small{display:block;font-size:10px;color:#c3c8de;margin-top:3px;
  letter-spacing:.06em}
/* Pastille « vidéo » */
.media .lecture{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(255,23,31,.92);
  display:grid;place-items:center;pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.5);transition:.3s ease}
.media:hover .lecture{transform:translate(-50%,-50%) scale(1.12)}
.media .lecture::after{content:"";border-left:16px solid #fff;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
  margin-left:4px}
.media .etiq-type{position:absolute;top:0;left:0;background:var(--jaune);
  color:var(--navy);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;padding:5px 9px}
.media.est-video .etiq-type{background:var(--red);color:#fff}

/* --- Visionneuse plein écran --- */
.visionneuse{position:fixed;inset:0;z-index:100;background:rgba(5,6,20,.96);
  display:grid;place-items:center;padding:60px 20px}
.visionneuse[hidden]{display:none}
.v-contenu{max-width:min(94vw,1100px);max-height:78vh;display:grid;place-items:center}
.v-contenu img{max-width:100%;max-height:78vh;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.7)}
.v-contenu iframe{width:min(94vw,1000px);aspect-ratio:16/9;height:auto;border:0;
  box-shadow:0 20px 60px rgba(0,0,0,.7)}
.v-contenu video{max-width:min(94vw,1000px);max-height:78vh;background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.7)}
.v-legende{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#fff;
  font-size:14px;padding:0 20px;margin:0}
.v-legende span{display:block;font-size:11px;color:#9aa1c4;margin-top:4px;
  letter-spacing:.08em;text-transform:uppercase}
.visionneuse button{position:absolute;background:rgba(255,255,255,.12);border:0;
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}
.visionneuse button:hover{background:var(--red)}
.v-fermer{top:18px;right:18px;width:46px;height:46px;font-size:20px;border-radius:50%}
.v-precedent,.v-suivant{top:50%;transform:translateY(-50%);width:50px;height:76px;
  font-size:38px;line-height:1}
.v-precedent{left:14px}
.v-suivant{right:14px}

@media(max-width:640px){
  .galerie{grid-template-columns:1fr 1fr;gap:9px}
  .media .voile{padding:24px 9px 8px}
  .media .voile b{font-size:11px}
  .media .voile small{display:none}
  .media .lecture{width:42px;height:42px}
  .media .lecture::after{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
  .visionneuse{padding:56px 10px}
  .v-precedent,.v-suivant{width:38px;height:60px;font-size:30px}
  .v-legende{bottom:14px;font-size:12px}
}

/* ---------------- Page en construction ---------------- */
.construction{min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:40px 24px;
  background:radial-gradient(circle at 75% 28%,#303b85 0,#141a4a 43%,#07091f 88%);color:#fff}
.construction::before,.construction::after{content:"";position:absolute;inset:auto -10% 10%;height:8px;
  background:repeating-linear-gradient(135deg,var(--red) 0 18px,#fff 18px 36px);opacity:.9;transform:rotate(-3deg)}
.construction::after{bottom:12%;opacity:.16;transform:rotate(3deg)}
.construction-carte{position:relative;z-index:1;width:min(100%,720px);padding:42px 38px 46px;
  background:rgba(13,18,56,.86);border:1px solid rgba(255,255,255,.16);
  border-top:6px solid var(--red);box-shadow:0 28px 70px #0009}
.construction .eyebrow{margin:0 0 26px}.construction img{width:min(88vw,500px);height:auto;margin:0 auto 24px;
  filter:drop-shadow(0 18px 18px #0008)}
.construction-statut{display:inline-block;background:var(--red);color:#fff;padding:7px 13px;margin-bottom:19px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.construction h1{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;
                 font-size:clamp(34px,6vw,60px);text-transform:uppercase;
                 letter-spacing:-.02em;line-height:.95;margin:0 0 14px}
.construction p{color:#c3c8de;font-size:16px;line-height:1.8;max-width:520px;
                margin:0 0 30px;white-space:pre-line}
.construction-bas{position:absolute;bottom:28px;color:#abb2cd;font-size:9px;font-weight:700;letter-spacing:.22em}
.construction .button span{margin-left:12px}
@media(max-width:560px){.construction-carte{padding:32px 20px 36px}.construction-bas{font-size:8px;letter-spacing:.12em}}

/* ---------------- Pages de politiques ---------------- */
.legal{max-width:760px}
.legal h2{font-size:clamp(30px,3.4vw,42px);margin:0 0 10px}
.legal h3{font-size:22px;margin:38px 0 12px;color:var(--navy);
          padding-top:26px;border-top:2px solid var(--line)}
.legal h3:first-of-type{border-top:0;padding-top:0;margin-top:26px}
.legal p,.legal li{font-size:15px;line-height:1.85;color:#3a3c44}
.legal ul,.legal ol{padding-left:22px;margin:12px 0}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--red)}
.legal strong{color:var(--ink)}
.legal a{color:var(--red)}
.legal .encadre{background:var(--paper);border-left:5px solid var(--red);
                padding:20px 24px;margin:26px 0}
.legal .encadre p{margin:0;font-size:14px}
.legal .encadre p + p{margin-top:10px}
.legal .maj{font-size:12px;color:var(--muted);text-transform:uppercase;
            letter-spacing:.1em;font-weight:700;margin-bottom:30px}
.legal dt{font-weight:700;margin-top:16px;font-size:15px}
.legal dd{margin:4px 0 0;font-size:15px;line-height:1.8;color:#3a3c44}

/* Liens de politiques dans le pied de page */
footer .legales{width:100%;border-top:1px solid rgba(255,255,255,.15);
                padding-top:18px;margin-top:4px;display:flex;gap:18px;flex-wrap:wrap}
footer .legales a{opacity:.75;font-size:10px}
footer .legales a:hover{opacity:1}

/* ---------------- Pied de page ---------------- */
footer{background:var(--navy);color:#c5c9d8;padding:30px var(--pad);display:flex;
       gap:26px;align-items:center;flex-wrap:wrap;font-size:11px}
footer img{width:104px;height:42px;object-fit:contain}
footer a:hover{color:var(--red)}
footer .droite{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}

/* ==========================================================================
   Adaptation aux écrans : tablette, cellulaire, petit cellulaire
   ========================================================================== */

/* Le menu compte 8 liens : on bascule tôt sur le menu burger,
   sans encore changer la mise en page du contenu. */
@media(max-width:1180px){
  nav{gap:14px}
  .links{display:none}
  .burger{display:block;order:3}
  .ticket{margin-left:auto}
}
.compteur-visites{margin-left:auto;color:#747b9d;font-size:9px;letter-spacing:.05em;opacity:.75}
.zone-musique{position:fixed;right:22px;bottom:22px;z-index:20;display:flex;box-shadow:0 8px 20px #0005}.lecteur-musique,.bouton-muet{background:var(--red);color:#fff;border:0;padding:11px 14px;display:flex;align-items:center;gap:9px;text-transform:uppercase;font-size:9px;font-weight:800;letter-spacing:.1em;cursor:pointer}.bouton-muet{border-left:1px solid #ffffff80;padding:11px 12px;font-size:14px}.lecteur-musique:hover,.bouton-muet:hover{background:#c9000b}.musique-icone{font-size:18px;line-height:1}.musique-etat{opacity:.7;border-left:1px solid #ffffff80;padding-left:9px}.lecteur-musique.en-lecture .musique-icone{animation:pulsation 1s infinite alternate}@keyframes pulsation{to{transform:scale(1.25);color:#ffe8a8}}
.inscription-courriel{display:flex;align-items:center;gap:8px;color:#c5c9d8;font-size:10px}.inscription-courriel input{background:transparent;border:1px solid #555;padding:8px;color:#fff;width:170px}.inscription-courriel button{margin:0;padding:8px 11px;background:var(--red);color:#fff;border:0}
.participation-section{border-top:1px solid var(--line)}
.intro-section{max-width:560px;color:var(--muted);line-height:1.8}
.badge-participation{display:inline-block;background:#75c900;color:#10152f;padding:6px 9px;margin:18px 0 10px;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}

/* Tablette et cellulaire : une seule colonne. */
@media(max-width:900px){
  nav{height:70px;padding:0 18px;gap:10px}
  nav .brand img{width:104px;height:42px}
  .ticket{padding:11px 13px}
  .menu-mobile{top:70px}
  .hero{display:block;padding:56px 20px 46px}
  .hero-logo{margin-top:36px}
  .chiffres{gap:24px}
  .banniere{padding:52px 20px 46px}
  section{padding:60px 20px}
  .billetterie .intro,.proposer{display:block}
  .proposer form{margin-top:36px}
  .ticker{padding:16px 20px}
  .ticker a{margin-left:0}
  .cal-case{min-height:54px;font-size:10px}
  .cal-case small{display:none}
  .billet{padding:22px}
  .billet .montant{margin-left:0}
  .info-billets{margin-top:44px;padding-top:34px}
  footer{padding:26px 20px;gap:18px}
  .compteur-visites{width:100%;margin-left:0}
  .zone-musique{right:14px;bottom:14px}

  /* ------------------------------------------------------------------
     Lecteur de musique sur petit écran

     En pleine largeur, les quatre commandes font 392 px : sur un
     téléphone de 375 px, le bouton de lecture se retrouvait à cheval
     hors de l'écran, à moitié intouchable.

     On ne garde donc que l'essentiel, en icônes : lecture, son et
     téléchargement. Le curseur de volume disparaît — un téléphone a
     déjà ses boutons de volume physiques. Les libellés partent aussi,
     mais les aria-label restent, donc rien n'est perdu pour les
     lecteurs d'écran.
     ------------------------------------------------------------------ */
  .zone-musique{border-radius:26px;overflow:hidden}
  .volume-musique{display:none}
  .musique-texte,.musique-etat{display:none}
  .lecteur-musique,.bouton-muet,.bouton-telecharger-musique{
    min-width:46px;min-height:46px;                /* cible tactile confortable */
    padding:0;justify-content:center;font-size:17px}
  .musique-icone{font-size:20px}
  footer .droite{margin-left:0;width:100%;gap:14px}
}

/* Cellulaire : on resserre le texte et les grilles. */
@media(max-width:640px){
  .defilant{padding:9px 0}
  .defilant .piste span{font-size:10px;letter-spacing:.12em;padding:0 22px}
  .defilant .piste span::after{margin-left:22px}
  .hero h1{font-size:clamp(38px,11vw,54px)}
  .banniere h1{font-size:clamp(34px,10vw,50px)}
  section h2{font-size:clamp(32px,9vw,46px)}
  .lede,.banniere p{font-size:15px}
  .chiffres{gap:18px}
  .chiffres b{font-size:32px}

  /* Grilles : une carte par ligne, plus lisible au pouce. */
  .grille,.produits,.coureurs,.commanditaires,.forfaits,.coordonnees{
    grid-template-columns:1fr;gap:14px}
  .event{min-height:auto;padding:24px}
  .coureur .portrait{height:200px}
  .produit .visuel{height:180px}

  /* Le titre de niveau ne doit pas déborder. */
  .niveau-titre{flex-wrap:wrap;gap:10px}
  .niveau-titre h3{white-space:normal;font-size:22px}
  .niveau-titre span{display:none}

  /* Billets : tout en colonne, bouton pleine largeur. */
  .billet{flex-direction:column;align-items:flex-start;gap:14px;box-shadow:8px 9px 0 rgba(8,11,37,.5)}
  .billet strong{font-size:24px}
  .billet .achat{width:100%;text-align:center;padding:14px}

  /* Boutons plus faciles à toucher. */
  .button{display:block;text-align:center;padding:16px}
  .button.fantome{margin-left:0;margin-top:10px}
  .forfait{padding:24px}
}

/* Très petits écrans. */
@media(max-width:380px){
  nav .brand img{width:88px}
  .ticket{font-size:9px;padding:10px}
  .cal-grid{gap:3px}
  .cal-case{min-height:44px;padding:4px;font-size:9px}
}
.bouton-telecharger-musique{background:var(--navy);color:#fff;text-decoration:none;padding:11px 13px;font-size:15px;line-height:1}.bouton-telecharger-musique:hover{background:#000}