/*
Theme Name: C2 Course
Theme URI: https://c2projetweb.fr
Author: C2 Projet Web
Author URI: https://c2projetweb.fr
Description: Thème sur-mesure pour un site de course à pied, réutilisable d'un événement à l'autre. Couleurs, polices, logo, textes et photos se règlent depuis l'administration (Charte graphique, Réglages de la course, Contenu des pages) sans toucher au code. Épreuves en fiches avec emplacements pour le plan du parcours et la trace GPX, espace client maison, bandeau cookies, SEO intégré. Aucun constructeur de pages. Première mise en service : Roanne Trail Urbain.
Version: 1.8.0
Requires at least: 6.4
Requires PHP: 8.0
License: Propriétaire
Text Domain: rtu
*/

/* =========================================================
   Design system — valeurs par défaut
   Toutes les couleurs et les polices ci-dessous peuvent être
   remplacées depuis « Charte graphique » dans l'administration
   (inc/charte.php les réinjecte après cette feuille).
   Réglage d'origine : Roanne Trail Urbain, un site de nuit.
   ========================================================= */
:root {
  --noir: #08080a;
  --noir-2: #0f0f13;
  --noir-3: #16161c;
  --rose: #e61873;
  --rose-clair: #ff4d99;
  --rose-sombre: #a60f51;
  --or: #f6c86a;
  --blanc: #f7f3f5;
  --gris: rgba(247, 243, 245, .62);
  --gris-faible: rgba(247, 243, 245, .38);
  --trait: rgba(247, 243, 245, .12);
  --font-sans: "Archivo", system-ui, -apple-system, sans-serif;
  --font-display: "Big Shoulders Display", "Archivo", sans-serif;
  /* Compat : les modules partagés (cookies, espace, édition en direct) parlent en --accent */
  --accent: #e61873;
  --accent-light: #ff4d99;
  --accent-ink: #ff4d99;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--noir);
  color: var(--blanc);
  overflow-x: hidden;
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; }

.font-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.hl { color: var(--rose-clair); }
.rose { color: var(--rose-clair); }

/* ===== Layout ===== */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.wrap-md { max-width: 980px; margin: 0 auto; padding: 0 1.5rem; }
.wrap-sm { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.bg-noir2 { background: var(--noir-2); }
.text-center { text-align: center; }
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Coin coupé, repris de la signature graphique de l'agence */
.clip {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* Halo rose en fond de section */
.halo { position: relative; overflow: hidden; }
.halo::before {
  content: ""; position: absolute; inset: auto auto 100% 50%;
  width: 70vw; height: 70vw; transform: translate(-50%, 55%);
  background: radial-gradient(circle, rgba(230, 24, 115, .18), transparent 62%);
  pointer-events: none;
}

/* ===== Titres de section ===== */
.titre-section { font-size: clamp(2.2rem, 7vw, 3.6rem); margin: 0 0 1rem; }
.titre-section .deux { display: block; color: var(--rose-clair); }
.chapeau { color: var(--gris); max-width: 46rem; margin: 0 0 2.5rem; font-size: 1.05rem; }
.section-head { margin-bottom: 3rem; }

/* ===== Labels ===== */
.label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .28em; color: var(--blanc); display: inline-block; margin: 0 0 1rem;
}
.label-light { color: var(--rose-clair); }
.label::before {
  content: ""; display: inline-block; width: 1.6rem; height: .14rem;
  background: var(--rose); vertical-align: middle; margin-right: .6rem; margin-top: -.18em;
}

/* ===== Boutons ===== */
.btn-primary, .btn-outline, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 2rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: .78rem; line-height: 1;
  border: 2px solid transparent; cursor: pointer; transition: all .3s;
}
.btn-primary { background: var(--rose); color: #fff; position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .55s ease; pointer-events: none;
}
.btn-primary:hover::after { left: 140%; }
.btn-primary:hover { background: var(--rose-clair); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(230,24,115,.45); }
.btn-outline { border-color: rgba(247,243,245,.45); color: var(--blanc); }
.btn-outline:hover { border-color: var(--blanc); background: var(--blanc); color: var(--noir); }
.btn-ghost { padding: .7rem 0; border: 0; color: var(--rose-clair); border-bottom: 2px solid var(--rose); }
.btn-ghost:hover { color: var(--blanc); }
.lien-fleche {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--rose-clair);
  border-bottom: 2px solid var(--rose); padding-bottom: .2rem; transition: color .2s, gap .2s;
}
.lien-fleche:hover { color: var(--blanc); gap: .8rem; }

/* ===== Header ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(8,8,10,.92), rgba(8,8,10,.35));
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.site-header.solid {
  background: rgba(8,8,10,.96); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--trait), 0 18px 40px rgba(0,0,0,.5);
}
.site-header .wrap { height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 768px) { .site-header .wrap { height: 5.75rem; } }
.site-header img.logo { height: 3.1rem; width: auto; }
@media (min-width: 768px) { .site-header img.logo { height: 4.2rem; } }

.main-nav { display: none; align-items: center; }
@media (min-width: 1200px) { .main-nav { display: flex; } }
@media (min-width: 1400px) { .nav-item { padding: 0 .7rem; } .nav-link { font-size: .75rem; letter-spacing: .09em; } }
.nav-link {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--blanc); transition: color .2s; white-space: nowrap;
}
.nav-item:hover > .nav-link, .nav-link:hover { color: var(--rose-clair); }
.nav-item { position: relative; display: flex; align-items: center; padding: 0 .52rem; }
.nav-item > .nav-link { display: inline-flex; align-items: center; gap: .3rem; height: 100%; }
.nav-item > .nav-link.has-caret::after { content: "\25BE"; font-size: .6em; opacity: .55; transition: transform .2s; }
.nav-item:hover > .nav-link.has-caret::after { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: rgba(12,12,16,.98); backdrop-filter: blur(10px);
  border: 1px solid var(--trait); padding: .4rem 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: .6rem 1.4rem; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--gris);
  white-space: nowrap; transition: background .15s, color .15s;
}
.dropdown a:hover { background: rgba(255,255,255,.05); color: var(--rose-clair); border-left: 3px solid var(--rose); padding-left: calc(1.4rem - 3px); }
.dropdown .dropdown-head {
  display: block; padding: .2rem 1.4rem .6rem; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--rose); white-space: nowrap;
}
.dropdown .dropdown-head:hover { background: none; border-left: 0; padding-left: 1.4rem; color: var(--blanc); }
.dropdown-group + .dropdown-group { margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--trait); }
.header-cta { margin-left: .8rem; padding: .85rem 1.2rem; white-space: nowrap; font-size: .72rem; letter-spacing: .1em; }

.burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 2.5rem; height: 2.5rem; background: none; border: 0; cursor: pointer; padding: 0; }
@media (min-width: 1200px) { .burger { display: none; } }
.burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--blanc); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
.burger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

section[id] { scroll-margin-top: 5.5rem; }

/* ===== Menu mobile ===== */
body.menu-open { overflow: hidden; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(130% 90% at 100% 0%, rgba(230,24,115,.18), transparent 58%), var(--noir);
  display: flex; flex-direction: column; padding: 1.1rem 1.5rem 2rem;
  transform: translateX(100%); transition: transform .4s cubic-bezier(.16,1,.3,1);
  overflow-y: auto; visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex: 0 0 auto; }
.mm-close { background: none; border: 0; color: var(--blanc); font-size: 2.4rem; line-height: 1; cursor: pointer; padding: .25rem .5rem; }
.mm-close:hover, .mm-close:active { color: var(--rose-clair); }
.mm-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mm-nav { display: flex; flex-direction: column; }
.mm-nav > * { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.mobile-menu.open .mm-nav > * { opacity: 1; transform: translateY(0); }
.mm-nav > *:nth-child(1) { transition-delay: .08s; }
.mm-nav > *:nth-child(2) { transition-delay: .12s; }
.mm-nav > *:nth-child(3) { transition-delay: .16s; }
.mm-nav > *:nth-child(4) { transition-delay: .2s; }
.mm-nav > *:nth-child(5) { transition-delay: .24s; }
.mm-nav > *:nth-child(6) { transition-delay: .28s; }
.mm-nav > *:nth-child(7) { transition-delay: .32s; }
.mm-group { border-bottom: 1px solid var(--trait); }
.mm-row { display: flex; align-items: center; justify-content: space-between; }
.mm-link { flex: 1; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.9rem; line-height: 1; color: var(--blanc); padding: .8rem 0; }
.mm-link:active { color: var(--rose-clair); }
.mm-toggle { background: none; border: 0; color: var(--rose-clair); font-size: 1.8rem; line-height: 1; width: 3rem; height: 3rem; cursor: pointer; }
.mm-sub { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mm-sub.open { max-height: 900px; }
.mm-sub a { display: block; color: var(--gris); text-transform: uppercase; letter-spacing: .07em; font-size: .76rem; font-weight: 600; padding: .55rem 0 .55rem 1rem; border-left: 2px solid var(--trait); margin-left: .25rem; }
.mm-sub a:active, .mm-sub a:hover { color: var(--rose-clair); border-color: var(--rose); }
.mm-subhead { margin: .9rem 0 .2rem; padding-left: 1rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--rose); }
.mm-cta { justify-content: center; margin-top: 1.5rem; display: flex; }
.mm-pied { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--trait); color: var(--gris-faible); font-size: .78rem; }
.mm-pied strong { color: var(--blanc); display: block; font-size: .95rem; }

/* ===== Hero d'accueil ===== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; }
/* Tant qu'aucune photo n'est choisie, le bandeau se contente de sa hauteur utile. */
.hero.sans-image { min-height: 0; }
.hero.sans-image .hero-content { padding-top: 9rem; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; background: var(--noir); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg .overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(230,24,115,.2), transparent 55%),
    linear-gradient(180deg, rgba(8,8,10,.6) 0%, rgba(8,8,10,.45) 35%, rgba(8,8,10,.97) 100%);
}
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 8rem 1.5rem 3rem; text-align: center; }
.hero-edition {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3em; color: var(--rose-clair); border: 1px solid rgba(230,24,115,.5);
  padding: .5rem 1.1rem; margin-bottom: 1.5rem;
}
.hero-content h1 { font-size: clamp(2.9rem, 14vw, 5rem); line-height: .88; margin: 0 auto; max-width: 20ch; }
@media (min-width: 768px) { .hero-content h1 { font-size: 6.5rem; } }
@media (min-width: 1100px) { .hero-content h1 { font-size: 8.5rem; } }
.hero-date { margin: 1.4rem 0 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.1rem, 4.6vw, 1.75rem); letter-spacing: .06em; color: var(--blanc); }
.hero-date span { color: var(--rose-clair); }
.hero-lieu { margin: .35rem 0 0; color: var(--gris); font-size: .95rem; letter-spacing: .04em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.25rem; }
.hero-note { margin: 1.5rem 0 0; color: var(--gris-faible); font-size: .82rem; }

/* Le titre scintille, comme sur la page d'attente */
/* Un mot ne se coupe jamais en deux, même sur un écran étroit. */
.scintille .mot { display: inline-block; white-space: nowrap; }
.scintille .lettre {
  display: inline-block;
  animation: scintille var(--duree, 3.4s) ease-in-out var(--retard, 0s) infinite;
}
@keyframes scintille {
  0%, 100% { opacity: .78; text-shadow: none; }
  50% { opacity: 1; text-shadow: 0 0 14px rgba(255,255,255,.85), 0 0 34px rgba(255,255,255,.35); }
}
@media (prefers-reduced-motion: reduce) {
  .scintille .lettre { animation: none; opacity: 1; }
}

/* ===== Compte à rebours ===== */
.compte { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.5rem; }
.compte-case {
  min-width: 5.2rem; padding: .9rem .6rem .7rem;
  background: rgba(247,243,245,.05); border: 1px solid var(--trait);
}
.compte-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--rose-clair); }
.compte-lbl { display: block; margin-top: .35rem; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--gris-faible); }
.compte-fini { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--rose-clair); }
@media (min-width: 640px) { .compte-case { min-width: 6.4rem; } .compte-num { font-size: 3.2rem; } }

/* ===== Bandeau défilant ===== */
.ticker { background: var(--rose); color: #fff; overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: ticker 30s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span.item {
  font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; padding: .55rem 0; display: inline-flex; align-items: center;
}
.ticker-track span.item::after { content: "\25C6"; margin: 0 1.6rem; font-size: .7rem; opacity: .7; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ===== Cartes épreuves ===== */
.epreuves-grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .epreuves-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .epreuves-grid { grid-template-columns: repeat(4, 1fr); } }
.epreuve-carte {
  position: relative; display: flex; flex-direction: column; min-height: 23rem;
  background: var(--noir-2); border: 1px solid var(--trait); overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.epreuve-carte:hover { border-color: var(--rose); transform: translateY(-5px); }
.epreuve-visuel { position: absolute; inset: 0; }
.epreuve-visuel img { width: 100%; height: 100%; object-fit: cover; opacity: .42; transition: opacity .4s, transform .6s; }
.epreuve-carte:hover .epreuve-visuel img { opacity: .55; transform: scale(1.05); }
.epreuve-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,.35), rgba(8,8,10,.95)); }
.epreuve-corps { position: relative; margin-top: auto; padding: 1.5rem; }
.epreuve-type { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--rose-clair); }
.epreuve-carte h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.9rem; margin: .4rem 0 .6rem; }
.epreuve-chiffres { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: var(--gris); font-size: .82rem; }
.epreuve-chiffres b { color: var(--blanc); font-weight: 700; }
.epreuve-carte .lien-fleche { margin-top: 1rem; }
.epreuve-carte.is-vide .epreuve-visuel { background: linear-gradient(140deg, var(--rose-sombre), var(--noir)); }

/* ===== Fiche épreuve ===== */
.fiche-entete { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .fiche-entete { grid-template-columns: 1.3fr .9fr; align-items: start; } }
.fiche-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.fiche-chiffre { background: var(--noir-2); padding: 1.3rem 1.1rem; }
.fiche-chiffre .lbl { margin: 0 0 .3rem; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--gris-faible); }
.fiche-chiffre .val { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: 1; color: var(--blanc); }
.fiche-chiffre .val.petit { font-size: 1.15rem; letter-spacing: .02em; }
.fiche-texte p { color: rgba(247,243,245,.82); margin: 0 0 1.1rem; }
.fiche-texte p:last-child { margin-bottom: 0; }
.fiche-texte ul { margin: 0 0 1.25rem; padding-left: 0; }
.fiche-texte li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; color: rgba(247,243,245,.82); }
.fiche-texte li::before { content: "\25C6"; position: absolute; left: 0; top: .05em; font-size: .6rem; color: var(--rose); }
.fiche-encart {
  background: rgba(230,24,115,.08); border-left: 3px solid var(--rose);
  padding: 1.1rem 1.3rem; margin: 0 0 1.5rem; color: rgba(247,243,245,.9); font-size: .95rem;
}
.fiche-encart strong { color: #fff; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ===== Bloc parcours (PDF + GPX) =====
   Écrit et stylé d'avance : masqué tant qu'aucun fichier n'est déposé. */
.parcours { border-top: 1px solid var(--trait); margin-top: 3.5rem; padding-top: 2.5rem; }
.parcours h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 2rem; margin-bottom: 1.25rem; }
.parcours-liens { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.parcours-fichier {
  display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.3rem;
  background: var(--noir-2); border: 1px solid var(--trait); color: var(--blanc);
  font-size: .85rem; font-weight: 600; transition: border-color .25s, background .25s;
}
.parcours-fichier:hover { border-color: var(--rose); background: var(--noir-3); }
.parcours-fichier svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: var(--rose-clair); }
.parcours-fichier small { display: block; font-weight: 400; color: var(--gris-faible); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.parcours-carte {
  position: relative; aspect-ratio: 16 / 10; background: var(--noir-2);
  border: 1px solid var(--trait); overflow: hidden;
}
.parcours-carte svg { width: 100%; height: 100%; display: block; }
.parcours-trace { fill: none; stroke: var(--rose-clair); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,77,153,.6)); }
.parcours-depart { fill: #fff; }
.parcours-legende { margin: .8rem 0 0; font-size: .78rem; color: var(--gris-faible); }

/* ===== Programme / horaires ===== */
.programme { border-left: 2px solid var(--trait); margin-left: .6rem; }
.programme-ligne { position: relative; padding: 0 0 2.25rem 2rem; }
.programme-ligne::before {
  content: ""; position: absolute; left: -.56rem; top: .35rem; width: 1rem; height: 1rem;
  background: var(--noir); border: 2px solid var(--rose); border-radius: 50%;
}
.programme-ligne.fort::before { background: var(--rose); box-shadow: 0 0 0 5px rgba(230,24,115,.2); }
.programme-heure { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1; color: var(--rose-clair); }
.programme-quoi { margin: .35rem 0 0; font-size: 1.05rem; font-weight: 600; color: var(--blanc); }
.programme-detail { margin: .2rem 0 0; color: var(--gris); font-size: .9rem; }

/* ===== Blocs de texte riche ===== */
.texte-intro p, .rte p { color: rgba(247,243,245,.8); line-height: 1.75; margin: 0 0 1.1rem; }
.texte-intro p:last-child, .rte p:last-child { margin-bottom: 0; }
.rte h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.9rem; margin: 2.5rem 0 1rem; }
.rte h3 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 .6rem; color: #fff; }
.rte ul { margin: 0 0 1.3rem; }
.rte li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; color: rgba(247,243,245,.8); }
.rte li::before { content: "\25C6"; position: absolute; left: 0; top: .1em; font-size: .6rem; color: var(--rose); }
.rte a { color: var(--rose-clair); border-bottom: 1px solid rgba(255,77,153,.4); }
.rte a:hover { border-color: var(--rose-clair); }
.rte strong { color: #fff; }

/* ===== Cartes génériques ===== */
.carte { background: var(--noir-2); border: 1px solid var(--trait); padding: 1.75rem; transition: border-color .25s, transform .25s; }
.carte:hover { border-color: rgba(230,24,115,.5); }
.carte h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .6rem; }
.carte p { color: var(--gris); margin: 0; font-size: .95rem; }
.carte-num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: rgba(230,24,115,.55); }

/* ===== Page hero (sous-pages) ===== */
.page-hero { position: relative; min-height: 48vh; display: flex; align-items: flex-end; background: var(--noir); overflow: hidden; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s ease-in-out infinite alternate; }
.page-hero .overlay {
  position: absolute; inset: 0;
  background: radial-gradient(110% 85% at 20% 0%, rgba(230,24,115,.22), transparent 55%), linear-gradient(180deg, rgba(8,8,10,.55), rgba(8,8,10,.96));
}
.page-hero .content { position: relative; max-width: 1240px; margin: 0 auto; padding: 8rem 1.5rem 3rem; width: 100%; }
.page-hero h1 { font-size: clamp(2.5rem, 10vw, 3.4rem); max-width: 42rem; }
@media (min-width: 768px) { .page-hero h1 { font-size: 4.4rem; } }
@media (min-width: 1100px) { .page-hero h1 { font-size: 5.4rem; } }
.page-hero .subtitle { color: var(--gris); font-size: 1.1rem; max-width: 38rem; margin-top: 1.1rem; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
/* Sans photo de fond, le bandeau n'a pas besoin d'occuper la moitié de l'écran. */
.page-hero.sans-image { min-height: 0; }
.page-hero.sans-image .content { padding-top: 7rem; padding-bottom: 2.5rem; }
.page-hero.sans-image .overlay { background: radial-gradient(90% 120% at 15% 0%, rgba(230,24,115,.2), transparent 60%); }

/* ===== Résultats ===== */
.resultats-annee { border-top: 1px solid var(--trait); padding: 2rem 0; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .resultats-annee { grid-template-columns: 10rem 1fr; align-items: start; } }
.resultats-annee h3 { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--rose-clair); }
.resultats-liens { display: flex; flex-wrap: wrap; gap: .6rem; }
.resultat-lien { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; background: var(--noir-2); border: 1px solid var(--trait); font-size: .85rem; font-weight: 600; transition: border-color .25s, color .25s; }
.resultat-lien:hover { border-color: var(--rose); color: var(--rose-clair); }

/* ===== Boutique ===== */
.boutique-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .boutique-grille { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .boutique-grille { grid-template-columns: repeat(4, 1fr); } }
.boutique-carte {
  display: flex; flex-direction: column; background: var(--noir-2);
  border: 1px solid var(--trait); padding: 1rem 1rem 1.1rem;
  transition: border-color .25s, transform .25s;
}
.boutique-carte:hover { border-color: var(--rose); transform: translateY(-4px); }
.boutique-visuel {
  display: block; width: 100%; aspect-ratio: 1 / 1; margin-bottom: .9rem;
  background: #fff center / contain no-repeat;
}
.boutique-visuel.is-vide { background: linear-gradient(140deg, var(--rose-sombre), var(--noir)); }
.boutique-corps { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.boutique-nom { font-weight: 600; font-size: .95rem; color: var(--blanc); }
.boutique-prix { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--rose-clair); white-space: nowrap; }
.boutique-carte .lien-fleche { margin-top: .8rem; align-self: flex-start; }

/* ===== Galerie ===== */
.galerie { column-gap: 1rem; column-count: 2; }
@media (min-width: 768px) { .galerie { column-count: 3; } }
@media (min-width: 1100px) { .galerie { column-count: 4; } }
.galerie img { width: 100%; margin-bottom: 1rem; break-inside: avoid; border: 1px solid var(--trait); }

/* ===== Partenaires ===== */
.partners { background: var(--noir-2); padding: 3.5rem 0 3rem; overflow: hidden; border-top: 1px solid var(--trait); }
.partners-head { text-align: center; margin-bottom: 2.25rem; padding: 0 1.5rem; }
.partners-head h2 { font-size: 2.1rem; }
.marquee-mask { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee { display: flex; gap: 1.5rem; width: max-content; animation: marquee 34s linear infinite; }
.partners:hover .marquee { animation-play-state: paused; }
.partner {
  flex: 0 0 auto; height: 100px; width: 208px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--trait); background: rgba(247,243,245,.04); color: var(--gris-faible);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .05em; font-size: 1.2rem;
  text-align: center; padding: 0 .75rem; transition: color .25s, border-color .25s;
}
.partner img { max-height: 74px; max-width: 176px; width: auto; object-fit: contain; opacity: .85; transition: opacity .25s; }
.partner:hover { color: var(--rose-clair); border-color: var(--rose); }
.partner:hover img { opacity: 1; }
@keyframes marquee { to { transform: translateX(calc(-50% - .75rem)); } }

.partners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.partner-card {
  flex: 0 1 260px; display: flex; align-items: center; justify-content: center; min-height: 164px;
  padding: 1.5rem; border: 1px solid var(--trait); background: rgba(247,243,245,.04);
  transition: border-color .25s, background .25s;
}
.partner-card:hover { border-color: var(--rose); background: rgba(247,243,245,.07); }
.partner-card img { max-height: 108px; max-width: 86%; width: auto; height: auto; object-fit: contain; }
.partner-nom { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; color: var(--gris); text-align: center; }
@media (max-width: 640px) { .partner-card { flex: 0 1 150px; min-height: 126px; padding: 1rem; } .partner-card img { max-height: 74px; } }

/* ===== Formulaires ===== */
.form-field {
  width: 100%; background: rgba(247,243,245,.05); border: 1px solid var(--trait);
  padding: .85rem 1rem; font-family: inherit; font-size: .95rem; color: var(--blanc);
}
.form-field::placeholder { color: var(--gris-faible); }
.form-field:focus { border-color: var(--rose); outline: none; background: rgba(247,243,245,.08); }
.form-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gris); margin-bottom: .4rem; }
.form-ligne { margin-bottom: 1.1rem; }
.form-note { color: var(--gris-faible); font-size: .8rem; }

/* ===== CTA ===== */
.cta-rose { background: var(--rose); color: #fff; padding: 5rem 0; text-align: center; }
.cta-rose h2 { font-size: clamp(2.2rem, 7vw, 3.4rem); margin-bottom: 1rem; }
.cta-rose p { color: rgba(255,255,255,.88); max-width: 34rem; margin: 0 auto 2rem; }
.cta-rose .btn-primary { background: #fff; color: var(--rose-sombre); }
.cta-rose .btn-primary:hover { background: var(--noir); color: #fff; box-shadow: none; }
.cta-sombre { background: var(--noir-2); padding: 5rem 0; text-align: center; border-top: 1px solid var(--trait); }
.cta-sombre p { color: var(--gris); max-width: 34rem; margin: 1rem auto 2rem; }

/* ===== Footer ===== */
.site-footer { background: var(--noir); color: var(--gris); padding: 3.5rem 0 0; border-top: 1px solid var(--trait); }
.footer-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-grid img { height: 4.5rem; width: auto; margin-bottom: 1rem; }
.footer-grid p { font-size: .88rem; max-width: 21rem; }
.footer-col p.head { font-weight: 700; color: var(--blanc); text-transform: uppercase; letter-spacing: .14em; margin-bottom: .75rem; font-size: .72rem; }
.footer-col a, .footer-col span { display: block; font-size: .88rem; padding: .2rem 0; }
.footer-col a:hover { color: var(--rose-clair); }
.footer-orga { margin-top: 1.25rem; font-size: .82rem; color: var(--gris-faible); }
.footer-orga a { color: var(--rose-clair); }
.footer-bottom {
  max-width: 1240px; margin: 3rem auto 0; padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--trait);
  font-size: .74rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .9rem;
}
.footer-bottom .links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom button { background: none; border: 0; color: inherit; font-size: inherit; cursor: pointer; padding: 0; }
.footer-bottom button:hover, .footer-bottom a:hover { color: var(--rose-clair); }

/* ===== Bandeau fixe en bas de page =====
   La hauteur suit la largeur de l'écran : l'image garde ses proportions et
   reste lisible du téléphone au grand écran. Le fond prolonge la couleur des
   bords de l'image, pour qu'on ne voie pas où elle s'arrête. */
:root { --bandeau-h: clamp(52px, 6.5vw, 96px); }
.rtu-bandeau {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
  height: var(--bandeau-h); background: #faf7ee; line-height: 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.5);
}
.rtu-bandeau a, .rtu-bandeau picture, .rtu-bandeau img { display: block; width: 100%; height: 100%; }
/* « contain » tant que l'image n'a pas le bon rapport : jamais de déformation.
   Dès que sa hauteur est calculée sur ses proportions réelles, elle remplit
   exactement le bandeau. */
.rtu-bandeau img { object-fit: contain; object-position: center; }
body.a-bandeau { padding-bottom: var(--bandeau-h); }
body.a-bandeau .rtu-ck { bottom: var(--bandeau-h); }
@media print { .rtu-bandeau { display: none; } body.a-bandeau { padding-bottom: 0; } }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .ticker-track, .marquee, .page-hero img { animation: none; }
}

/* ===== Champ piège anti-spam ===== */
/* Sorti de l'écran plutôt que masqué : certains robots ignorent ce qui est
   explicitement caché, mais remplissent ce qu'ils trouvent dans le HTML. */
.rtu-piege {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Cases à cocher des formulaires ===== */
.form-cases { display: grid; gap: .55rem; margin-top: .55rem; }
.form-case {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gris);
}
.form-case input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .18rem;
  accent-color: var(--rose);
  cursor: pointer;
}
.form-case a { color: var(--rose-clair); }
.form-consentement { margin-top: 1.6rem; }
.form-consentement .form-case { font-size: .86rem; color: var(--gris); }