/* Site public de l'Académie Sportive Solingobou.
   Charger après polices.css, jetons.css et composants.css. Aucune règle n'est écrite dans les
   pages (politique de sécurité du contenu) : toute la présentation passe par ces classes.
   Signature : les photos de l'académie en grand, coupées en biais par l'écharpe rouge du maillot.
   Mouvement : diaporama et bandeaux défilants, apparitions au défilement ; tout s'arrête si le
   visiteur a demandé de réduire les animations. */

:root {
  --entete-hauteur: 84px;
  --entete-compacte: 66px;
  --biais: 5.5vw;                       /* hauteur de la coupe en biais des bannières */
  --echarpe: 12px;                      /* épaisseur de l'écharpe rouge */
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --nuit: #0b0c0e;
  --vert-pelouse: #0f6b35;
  --ombre-douce: 0 18px 50px rgba(0, 0, 0, 0.12);
  --ombre-carte: 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 34px rgba(0, 0, 0, 0.08);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-compacte) + 16px); }
body.site { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--texte); background: var(--fond); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.site img { max-width: 100%; height: auto; }
.site p { margin: 0; }
.site figure { margin: 0; }
.site ul, .site ol { margin: 0; }
.site main { display: block; }
.site main:focus { outline: none; }
.site .lien-evitement { position: absolute; left: 8px; top: -80px; z-index: 200; padding: 12px 16px; border-radius: var(--rayon); background: var(--encre); color: var(--texte-inverse); font-weight: 600; text-decoration: none; }
.site .lien-evitement:focus { top: 8px; color: var(--texte-inverse); }
.site .icone { width: 22px; height: 22px; }
.site .icone-lecture { fill: currentColor; stroke: none; }
.site .enveloppe { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding-left: var(--espace-8); padding-right: var(--espace-8); }
.site .enveloppe-large { max-width: 1440px; }
.site .enveloppe-etroite { max-width: 880px; }
.sans-js .site .entete-site { position: absolute; }
.site .messages-flottants { position: fixed; top: calc(var(--entete-hauteur) + 12px); right: 16px; z-index: 70; width: min(440px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 10px; }
.site .message-flottant { padding: 16px 48px 16px 18px; position: relative; border-radius: 4px; background: var(--encre); color: var(--fond); font-weight: 600; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); animation: monter 0.6s var(--sortie) both; }
.site .message-flottant.succes { background: var(--vert-fonce); }
.site .message-flottant.erreur { background: var(--erreur-texte); }
.site .message-flottant.attente { background: var(--attente-texte); }
.site .message-flottant.disparait { opacity: 0; transform: translateY(-12px); transition: opacity 0.4s, transform 0.4s; }
.site .message-flottant button { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.site .message-flottant button .icone { width: 18px; height: 18px; }
.site .visuellement-cache { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Boutons du site ---------- */
.site .btn { min-height: 54px; padding: 0 26px; font-weight: 700; letter-spacing: 0.005em; transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--sortie), box-shadow 0.25s; }
.site .btn:active { transform: translateY(1px); }
.site .btn .icone { width: 20px; height: 20px; }
.site .btn-rouge:hover { box-shadow: 0 10px 24px rgba(215, 25, 31, 0.32); }
.site .btn-clair { background: var(--fond); color: var(--encre); border-color: var(--fond); }
.site .btn-clair:hover { background: transparent; color: var(--fond); border-color: var(--fond); }
.site .btn-transparent { background: transparent; color: var(--fond); border-color: rgba(255, 255, 255, 0.7); }
.site .btn-transparent:hover { background: var(--fond); color: var(--encre); border-color: var(--fond); }
.site .btn-petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
.site .btn-fleche .icone { transition: transform 0.3s var(--sortie); }
.site .btn-fleche:hover .icone { transform: translateX(4px); }
.site .groupe-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.site .lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--encre); font-weight: 700; text-decoration: none; }
.site .lien-fleche .icone { width: 20px; height: 20px; color: var(--rouge); transition: transform 0.3s var(--sortie); }
.site .lien-fleche:hover { color: var(--lien); }
.site .lien-fleche:hover .icone { transform: translateX(5px); }
.site .section-noire .lien-fleche, .site .bandeau-page .lien-fleche { color: var(--fond); }

/* ---------- En-tête ---------- */
.site .entete-site { position: fixed; top: 0; left: 0; right: 0; z-index: 60; color: var(--fond); transition: background-color 0.35s, box-shadow 0.35s, color 0.35s, transform 0.45s var(--sortie); }
.site .entete-site::before { content: ""; position: absolute; inset: 0 0 -48px 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); pointer-events: none; transition: opacity 0.35s; }
.site .entete-site-contenu { position: relative; max-width: 1440px; height: var(--entete-hauteur); margin: 0 auto; padding: 0 var(--espace-8); display: flex; align-items: center; gap: 28px; transition: height 0.35s var(--sortie); }
.site .entete-site.defile { background: rgba(255, 255, 255, 0.97); color: var(--encre); box-shadow: 0 1px 0 var(--bordure), 0 10px 30px rgba(0, 0, 0, 0.06); }
.site .entete-site.defile::before { opacity: 0; }
.site .entete-site.defile .entete-site-contenu { height: var(--entete-compacte); }
.site .entete-site.cache { transform: translateY(-105%); }
.site .logo-site { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; color: inherit; text-decoration: none; }
.site .logo-site:hover { color: inherit; }
.site .logo-site-image { width: 52px; height: 52px; border-radius: 50%; transition: width 0.35s var(--sortie), height 0.35s var(--sortie), transform 0.6s var(--sortie); }
.site .logo-site:hover .logo-site-image { transform: rotate(-12deg); }
.site .entete-site.defile .logo-site-image { width: 44px; height: 44px; }
.site .logo-site-texte { display: flex; flex-direction: column; line-height: 1.05; }
.site .logo-site-nom { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.site .logo-site-lieu { margin-top: 3px; font-size: 12.5px; font-weight: 500; opacity: 0.82; }
.site .nav-site { margin-left: auto; }
.site .nav-site ul { list-style: none; padding: 0; display: flex; gap: 2px 26px; }
.site .nav-site-lien { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 15px; font-weight: 600; text-decoration: none; }
.site .nav-site-lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: var(--rouge); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--sortie); }
.site .nav-site-lien:hover { color: inherit; }
.site .nav-site-lien:hover::after, .site .nav-site-lien[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site .entete-site-actions { display: flex; align-items: center; gap: 10px; }
.site .entete-site .btn-clair { background: transparent; color: var(--fond); border-color: rgba(255, 255, 255, 0.75); }
.site .entete-site .btn-clair:hover { background: var(--fond); color: var(--encre); border-color: var(--fond); }
.site .entete-site.defile .btn-clair { color: var(--encre); border-color: var(--encre); }
.site .entete-site.defile .btn-clair:hover { background: var(--encre); color: var(--fond); }
.site .bouton-rond-whatsapp { width: 44px; height: 44px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; background: var(--vert); color: var(--fond); transition: transform 0.3s var(--sortie), background-color 0.25s; }
.site .bouton-rond-whatsapp:hover { background: var(--vert-fonce); color: var(--fond); transform: scale(1.06); }
.site .bouton-menu { display: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.site .bouton-menu-barres { width: 24px; height: 14px; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; }
.site .bouton-menu-barres span { display: block; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--sortie); }
.site .bouton-menu-barres span:last-child { width: 70%; margin-left: auto; }
.site .bouton-menu:hover .bouton-menu-barres span:last-child { transform: scaleX(1.43); transform-origin: right; }

/* ---------- Menu plein écran (téléphone, tablette) ---------- */
.site .menu-mobile { position: fixed; inset: 0; z-index: 100; padding: 16px 20px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 28px; overflow-y: auto; background: var(--encre); color: var(--fond); transform: translateX(100%); visibility: hidden; transition: transform 0.5s var(--sortie), visibility 0s linear 0.5s; }
.site .menu-mobile[hidden] { display: flex; }
.site .menu-mobile.ouvert { transform: none; visibility: visible; transition: transform 0.5s var(--sortie), visibility 0s; }
.sans-js .site .menu-mobile[hidden] { display: none; }
.site .menu-mobile-haut { display: flex; align-items: center; justify-content: space-between; }
.site .bouton-fermer { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: transparent; color: var(--fond); cursor: pointer; }
.site .menu-mobile-liens { list-style: none; padding: 0; display: flex; flex-direction: column; }
.site .menu-mobile-liens a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: var(--fond); font-size: clamp(26px, 7vw, 34px); font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
.site .menu-mobile-liens a[aria-current="page"] { color: var(--rouge); }
.site .menu-mobile-liens li { opacity: 0; transform: translateX(32px); transition: opacity 0.5s var(--sortie), transform 0.5s var(--sortie); }
.site .menu-mobile.ouvert .menu-mobile-liens li { opacity: 1; transform: none; }
.site .menu-mobile.ouvert .menu-mobile-liens li:nth-child(2) { transition-delay: 0.04s; }
.site .menu-mobile.ouvert .menu-mobile-liens li:nth-child(3) { transition-delay: 0.08s; }
.site .menu-mobile.ouvert .menu-mobile-liens li:nth-child(4) { transition-delay: 0.12s; }
.site .menu-mobile.ouvert .menu-mobile-liens li:nth-child(5) { transition-delay: 0.16s; }
.site .menu-mobile.ouvert .menu-mobile-liens li:nth-child(6) { transition-delay: 0.2s; }
.site .menu-mobile.ouvert .menu-mobile-liens li:nth-child(7) { transition-delay: 0.24s; }
.site .menu-mobile.ouvert .menu-mobile-liens li:nth-child(8) { transition-delay: 0.28s; }
.site .menu-mobile-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.site .menu-mobile-actions .btn-clair:hover { background: var(--texte-inverse-doux); color: var(--encre); }
body.site.menu-ouvert { overflow: hidden; }

/* ---------- Bannière d'accueil : diaporama ---------- */
.site .hero-cadre { position: relative; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biais)), 0 100%); }
.site .hero { position: relative; isolation: isolate; min-height: max(620px, min(100svh, 980px)); display: flex; align-items: flex-end; overflow: hidden; color: var(--fond); background: var(--nuit); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biais) - var(--echarpe)), 0 calc(100% - var(--echarpe))); }
.site .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.12) 72%, rgba(0, 0, 0, 0.05) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 46%); }
.site .hero-diapos { position: absolute; inset: 0; z-index: -2; margin: 0; padding: 0; list-style: none; }
.site .hero-diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.site .hero-diapo:first-child, .site .hero-diapo.active { opacity: 1; }
.js .site .hero-diapo:first-child:not(.active) { opacity: 0; }
.site .hero-diapo picture, .site .hero-diapo img { display: block; width: 100%; height: 100%; }
.site .hero-diapo img { object-fit: cover; transform: scale(1.1); transform-origin: 60% 40%; }
.site .hero-diapo.active img { animation: ken-burns 10s linear forwards; }
.site .hero-diapo:nth-child(2n).active img { animation-name: ken-burns-inverse; transform-origin: 30% 60%; }
@keyframes ken-burns { from { transform: scale(1.14) translate3d(1.5%, 0, 0); } to { transform: scale(1.02) translate3d(-1%, -1%, 0); } }
@keyframes ken-burns-inverse { from { transform: scale(1.02) translate3d(-1%, 1%, 0); } to { transform: scale(1.14) translate3d(1.5%, -0.5%, 0); } }
.site .hero-sans-photo { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 85% 20%, #3a0a0c 0%, var(--nuit) 60%); }
.site .hero-contenu { width: 100%; max-width: 1440px; margin: 0 auto; padding: calc(var(--entete-hauteur) + 56px) var(--espace-8) calc(var(--biais) + var(--echarpe) + 64px); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.site .hero-surtitre { display: inline-flex; align-items: center; gap: 12px; color: var(--fond); font-size: 15px; font-weight: 600; }
.site .hero-surtitre::before { content: ""; width: 34px; height: 3px; background: var(--rouge); }
.site .hero-titre { max-width: 13ch; margin: 0; color: var(--fond); font-size: clamp(46px, 7.4vw, 116px); line-height: 0.94; font-weight: 900; letter-spacing: -0.04em; }
.site .hero-texte { max-width: 34em; color: rgba(255, 255, 255, 0.9); font-size: clamp(17px, 0.5vw + 15px, 20px); line-height: 1.6; }
.site .hero-bas { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 18px; }
.site .hero-progression { display: flex; align-items: center; gap: 10px; }
.site .hero-barres { list-style: none; padding: 0; display: flex; gap: 8px; }
.site .hero-barre { position: relative; width: 52px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.site .hero-barre::before, .site .hero-barre span { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.32); }
.site .hero-barre span { background: var(--fond); transform: scaleX(0); transform-origin: left; }
.site .hero-barre.passee span { transform: scaleX(1); }
.site .hero-barre.active span { animation: barre-remplie var(--duree-diapo, 6.5s) linear forwards; }
.site .hero.en-pause .hero-barre.active span, .site .hero.en-pause .hero-diapo.active img { animation-play-state: paused; }
@keyframes barre-remplie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.site .hero-pause { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; background: transparent; color: var(--fond); cursor: pointer; }
.site .hero-pause .icone { width: 18px; height: 18px; }
.site .hero-pause:hover { background: rgba(255, 255, 255, 0.14); }
.site .hero-legende { color: rgba(255, 255, 255, 0.72); font-size: 13.5px; }
.sans-js .site .hero-progression { display: none; }
/* Séquence d'arrivée (une seule, au chargement) */
.site .hero-contenu > * { animation: monter 1s var(--sortie) both; }
.site .hero-contenu > :nth-child(2) { animation-delay: 0.12s; }
.site .hero-contenu > :nth-child(3) { animation-delay: 0.24s; }
.site .hero-contenu > :nth-child(4) { animation-delay: 0.36s; }
.site .hero-contenu > :nth-child(5) { animation-delay: 0.48s; }
@keyframes monter { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

/* ---------- Bannière des pages intérieures ---------- */
.site .bandeau-cadre { position: relative; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biais) * 0.6), 0 100%); }
.site .bandeau-page { position: relative; isolation: isolate; min-height: clamp(420px, 62vh, 640px); display: flex; align-items: flex-end; overflow: hidden; background: var(--nuit); color: var(--fond); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biais) * 0.6 - var(--echarpe)), 0 calc(100% - var(--echarpe))); }
.site .bandeau-page.compact { min-height: clamp(320px, 44vh, 460px); }
.site .bandeau-page::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 55%); }
.site .bandeau-page.sans-photo::after { background: radial-gradient(110% 120% at 90% 0%, rgba(215, 25, 31, 0.28) 0%, rgba(0, 0, 0, 0) 55%); }
.site .bandeau-image { position: absolute; inset: 0; z-index: -2; }
.site .bandeau-image picture, .site .bandeau-image img { display: block; width: 100%; height: 100%; }
.site .bandeau-image img { object-fit: cover; animation: approche 14s var(--sortie) both; }
@keyframes approche { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.site .bandeau-contenu { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding: calc(var(--entete-hauteur) + 48px) var(--espace-8) calc(var(--biais) * 0.6 + var(--echarpe) + 48px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.site .bandeau-contenu > * { animation: monter 0.9s var(--sortie) both; }
.site .bandeau-contenu > :nth-child(2) { animation-delay: 0.1s; }
.site .bandeau-contenu > :nth-child(3) { animation-delay: 0.2s; }
.site .bandeau-contenu > :nth-child(4) { animation-delay: 0.3s; }
.site .fil-site { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.75); font-size: 14px; font-weight: 500; }
.site .fil-site li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.site .fil-site a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site .fil-site a:hover { color: var(--fond); text-decoration: underline; }
.site .bandeau-titre { max-width: 18ch; margin: 0; color: var(--fond); font-size: clamp(40px, 5.4vw, 80px); line-height: 0.98; font-weight: 900; letter-spacing: -0.035em; }
.site .bandeau-texte { max-width: 36em; color: rgba(255, 255, 255, 0.88); font-size: clamp(17px, 0.4vw + 15.5px, 19.5px); line-height: 1.6; }
.site .bandeau-page .groupe-boutons { margin-top: 8px; }

/* ---------- Sections ---------- */
.site .section { padding-top: clamp(72px, 9vw, 132px); padding-bottom: clamp(72px, 9vw, 132px); }
.site .section-serree { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
.site .section-apres-bandeau { padding-top: clamp(48px, 6vw, 88px); }
.site .section-douce { background: var(--fond-doux); }
.site .section-noire { background: var(--encre); color: var(--texte-inverse-doux); }
.site .section-noire :is(h2, h3, h4, strong) { color: var(--fond); }
.site .section-noire a:not(.btn) { color: var(--fond); }
.site .entete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.site .entete-section > div { max-width: 46em; display: flex; flex-direction: column; gap: 16px; }
.site .titre-section { margin: 0; color: var(--encre); font-size: clamp(34px, 3.9vw, 60px); line-height: 1.02; font-weight: 900; letter-spacing: -0.035em; }
.site .section-noire .titre-section, .site .appel-final .titre-section { color: var(--fond); }
.site .titre-moyen { margin: 0; color: var(--encre); font-size: clamp(24px, 1.6vw + 16px, 34px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }
.site .titre-carte { margin: 0; color: var(--encre); font-size: clamp(20px, 0.6vw + 17px, 24px); line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; }
.site .texte-section { max-width: 40em; font-size: clamp(17px, 0.3vw + 15.8px, 19px); line-height: 1.7; color: var(--texte-doux); }
.site .section-noire .texte-section { color: var(--texte-inverse-doux); }
.site .contenu-riche { max-width: 44em; display: flex; flex-direction: column; gap: 18px; font-size: 17.5px; line-height: 1.75; color: var(--texte); }
.site .contenu-riche h2, .site .contenu-riche h3 { margin: 18px 0 0; color: var(--encre); font-size: clamp(22px, 1vw + 17px, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.site .contenu-riche h2:first-child, .site .contenu-riche h3:first-child { margin-top: 0; }
.site .contenu-riche :is(ul, ol) { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site .contenu-riche ul > li { position: relative; padding-left: 26px; }
.site .contenu-riche ul > li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); }
.site .contenu-riche ol { counter-reset: etape; }
.site .contenu-riche ol > li { position: relative; padding-left: 40px; counter-increment: etape; }
.site .contenu-riche ol > li::before { content: counter(etape); position: absolute; left: 0; top: 0.1em; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--encre); color: var(--fond); font-size: 14px; font-weight: 800; }
.site .contenu-riche a { color: var(--lien); font-weight: 600; }
.site .contenu-riche strong { font-weight: 700; }
.site .grille-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.site .grille-deux.haut { align-items: start; }
.site .grille-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.site .note-site { color: var(--texte-aide); font-size: 14.5px; }
.site .section-noire .note-site { color: var(--texte-inverse-aide); }

/* ---------- Frise des repères ---------- */
.site .frise { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--colonnes, 3), minmax(0, 1fr)); gap: 24px; position: relative; padding-top: 34px; }
/* Quatre repères dans une demi-colonne : deux par ligne (les années ne tiennent pas à quatre de front). */
.site .frise.quatre { --colonnes: 2; row-gap: 64px; }
.site .frise.quatre::before { display: none; }
.site .frise::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; background: var(--encre); transform-origin: left; transition: transform 1.4s var(--sortie); }
.js .site .frise[data-reveler]::before { transform: scaleX(0); }
.js .site .frise[data-reveler].visible::before { transform: scaleX(1); }
.site .frise li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.site .frise li::before { content: ""; position: absolute; top: -34px; left: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--encre); box-shadow: 0 0 0 5px var(--fond); }
.site .frise li:last-child::before { background: var(--rouge); }
.site .section-douce .frise li::before { box-shadow: 0 0 0 5px var(--fond-doux); }
.site .frise-annee { color: var(--encre); font-size: clamp(44px, 4.6vw, 76px); line-height: 0.9; font-weight: 900; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.site .frise li:last-child .frise-annee { color: var(--rouge); }
.site .frise-texte { max-width: 22em; color: var(--texte-doux); font-size: 16px; line-height: 1.5; }
.site .frise-annee.mot { font-size: clamp(32px, 3vw, 48px); line-height: 1; }

/* ---------- Grandes cartes photo ---------- */
.site .double-appel { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(16px, 2vw, 28px); }
.site .carte-photo { position: relative; isolation: isolate; min-height: clamp(460px, 44vw, 600px); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; overflow: hidden; border-radius: 4px; background: var(--nuit); color: var(--fond); text-decoration: none; }
.site .carte-photo.terrain { background: var(--vert-pelouse); }
.site .carte-photo-image { position: absolute; inset: 0; z-index: -2; }
.site .carte-photo-image picture, .site .carte-photo-image img { display: block; width: 100%; height: 100%; }
.site .carte-photo-image img { object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--sortie); }
.site .carte-photo:hover .carte-photo-image img, .site .carte-photo:focus-within .carte-photo-image img { transform: scale(1.08); }
.site .carte-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.05) 75%); }
.site .carte-photo.terrain::after { background: linear-gradient(0deg, rgba(5, 40, 20, 0.92) 0%, rgba(5, 40, 20, 0.55) 50%, rgba(5, 40, 20, 0.15) 80%); }
.site .carte-photo.terrain .lignes-terrain { position: absolute; inset: 0; z-index: -1; opacity: 0.22; background:
  linear-gradient(90deg, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px)),
  radial-gradient(circle at 50% 50%, transparent 68px, #fff 69px, #fff 71px, transparent 72px); }
.site .carte-photo h2, .site .carte-photo h3 { margin: 0; color: var(--fond); font-size: clamp(28px, 2.4vw + 12px, 44px); line-height: 1.02; font-weight: 900; letter-spacing: -0.03em; max-width: 14ch; }
.site .carte-photo p { max-width: 30em; color: rgba(255, 255, 255, 0.88); font-size: 17px; }
.site .carte-photo .groupe-boutons { margin-top: 8px; }
.site .prix-terrain { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.site .prix-terrain li { padding: 10px 16px; display: flex; flex-direction: column; border-radius: 4px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); line-height: 1.25; }
.site .prix-terrain .montant { color: var(--fond); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.site .prix-terrain .periode { color: rgba(255, 255, 255, 0.8); font-size: 13.5px; }

/* ---------- Image et texte côte à côte ---------- */
.site .photo-cadre { position: relative; overflow: hidden; border-radius: 4px; background: var(--fond-image); }
.site .photo-cadre picture, .site .photo-cadre img { display: block; width: 100%; height: 100%; }
.site .photo-cadre img { object-fit: cover; }
.site .photo-haute { aspect-ratio: 4 / 5; }
.site .photo-large { aspect-ratio: 16 / 10; }
.site .photo-carree { aspect-ratio: 1 / 1; }
.site .photo-cadre.avec-echarpe::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 9%; height: 14px; background: var(--rouge); transform: rotate(-4deg); }
.site .photo-legende { margin-top: 10px; color: var(--texte-aide); font-size: 14px; }
.site .mosaique { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 520px; }
.site .mosaique > :first-child { grid-row: 1 / 3; }
.site .mosaique .photo-cadre { height: 100%; }

/* ---------- Axes de la formation et valeurs ---------- */
.site .axes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0; border-top: 2px solid var(--encre); }
.site .axe { padding: 26px 26px 30px 0; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--bordure-carte); }
.site .axe-icone { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--rouge); color: var(--fond); }
.site .axe-icone .icone { width: 24px; height: 24px; }
.site .axe p { color: var(--texte-doux); font-size: 16px; line-height: 1.6; }
.site .liste-axes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; margin-top: 8px; border-top: 1px solid var(--bordure-carte); }
.site .liste-axes li { padding: 16px 0; display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--bordure-carte); }
.site .liste-axes li::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--rouge); transform: translateY(-1px); }
.site .liste-axes strong { display: block; color: var(--encre); font-size: 18px; }
.site .liste-axes span { display: block; color: var(--texte-doux); font-size: 15.5px; line-height: 1.55; }

/* Bandeau défilant des valeurs */
.site .bandeau-valeurs { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 48px) 0; background: var(--encre); color: var(--fond); }
.site .bandeau-valeurs-piste { display: flex; width: max-content; animation: defiler 46s linear infinite; }
.site .bandeau-valeurs:hover .bandeau-valeurs-piste { animation-play-state: paused; }
.site .bandeau-valeurs ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.site .bandeau-valeurs li { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 48px); font-size: clamp(44px, 7vw, 112px); line-height: 1; font-weight: 900; letter-spacing: -0.04em; white-space: nowrap; }
.site .bandeau-valeurs li:nth-child(odd) { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85); }
.site .bandeau-valeurs li::after { content: ""; flex: 0 0 auto; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--rouge); }
@keyframes defiler { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Cartes d'actualité ---------- */
.site .cartes-actualites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.site .carte-actualite { position: relative; display: flex; flex-direction: column; gap: 14px; }
.site .carte-actualite-image { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 4px; background: var(--fond-image); }
.site .carte-actualite-image picture, .site .carte-actualite-image img { display: block; width: 100%; height: 100%; }
.site .carte-actualite-image img { object-fit: cover; transition: transform 1.1s var(--sortie); }
.site .carte-actualite:hover .carte-actualite-image img { transform: scale(1.06); }
.site .carte-actualite-image .sans-image { width: 100%; height: 100%; display: grid; place-items: center; background: var(--encre); }
.site .carte-actualite-image .sans-image img { width: 38%; height: auto; opacity: 0.9; }
.site .etiquette { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 5px 11px; border-radius: 3px; background: var(--rouge); color: var(--fond); font-size: 13px; font-weight: 700; }
.site .etiquette.noire { background: var(--encre); }
.site .carte-actualite-meta { color: var(--texte-aide); font-size: 14px; font-weight: 500; }
.site .carte-actualite :is(h2, h3) { margin: 0; color: var(--encre); font-size: clamp(20px, 0.6vw + 17px, 24px); line-height: 1.22; font-weight: 800; letter-spacing: -0.015em; }
.site .carte-actualite :is(h2, h3) a { color: inherit; text-decoration: none; }
.site .carte-actualite :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.site .carte-actualite:hover :is(h2, h3) a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site .carte-actualite p { color: var(--texte-doux); font-size: 16px; line-height: 1.6; }
.site .carte-actualite.une { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.site .carte-actualite.une .carte-actualite-image { aspect-ratio: 16 / 10; }
.site .carte-actualite.une :is(h2, h3) { font-size: clamp(28px, 2.2vw + 12px, 42px); line-height: 1.08; font-weight: 900; letter-spacing: -0.03em; }
.site .carte-actualite.une .corps-une { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Calendrier : prochain match, résultats ---------- */
.site .duo-matchs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.site .carte-match { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; border-radius: 4px; background: var(--fond); border: 1px solid var(--bordure-carte); }
.site .section-noire .carte-match { background: #17181b; border-color: #2a2c30; color: var(--texte-inverse-doux); }
.site .carte-match-type { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--texte-aide); font-size: 14px; font-weight: 600; }
.site .section-noire .carte-match-type { color: var(--texte-inverse-aide); }
.site .affiche-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.site .equipe { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--encre); }
.site .section-noire .equipe { color: var(--fond); }
.site .equipe:last-child { text-align: right; align-items: flex-end; }
.site .equipe small { color: var(--texte-aide); font-size: 13px; font-weight: 600; }
.site .score { padding: 8px 14px; border-radius: 4px; background: var(--encre); color: var(--fond); font-size: clamp(26px, 2vw + 14px, 38px); font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site .section-noire .score { background: var(--rouge); }
.site .score.contre { background: var(--rouge); color: var(--fond); font-size: 18px; }
.site .score-tab { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; text-align: center; opacity: 0.85; }
.site .carte-match-date { display: flex; align-items: center; gap: 8px; color: var(--encre); font-weight: 700; }
.site .section-noire .carte-match-date { color: var(--fond); }
.site .carte-match-date .icone { color: var(--rouge); }
.site .liste-matchs { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 2px solid var(--encre); }
.site .ligne-match { padding: 20px 0; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; border-bottom: 1px solid var(--bordure-carte); }
.site .ligne-match-date { display: flex; flex-direction: column; color: var(--encre); font-weight: 800; line-height: 1.3; }
.site .ligne-match-date small { color: var(--texte-aide); font-weight: 500; font-size: 14px; }
.site .ligne-match-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site .ligne-match-titre { color: var(--encre); font-size: 18px; font-weight: 800; line-height: 1.3; }
.site .ligne-match-meta { color: var(--texte-aide); font-size: 15px; }
.site .ligne-match .score { font-size: 22px; padding: 6px 12px; }
.site .statut-match { padding: 4px 10px; border-radius: 999px; background: var(--neutre-fond); color: var(--texte-doux); font-size: 13px; font-weight: 700; white-space: nowrap; }
.site .statut-match.a-venir { background: var(--succes-fond); color: var(--succes-texte); }
.site .statut-match.reporte { background: var(--attente-fond); color: var(--attente-texte); }
.site .statut-match.annule { background: var(--erreur-fond); color: var(--erreur-texte); }
.site .statut-match.victoire { background: var(--succes-fond); color: var(--succes-texte); }
.site .statut-match.defaite { background: var(--erreur-fond); color: var(--erreur-texte); }
.site .palmares { padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: center; border-radius: 4px; background: var(--encre); color: var(--texte-inverse-doux); }
.site .palmares .icone-trophee-grand { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--rouge); color: var(--fond); }
.site .palmares .icone-trophee-grand .icone { width: 36px; height: 36px; }
.site .palmares .contenu-riche { color: var(--texte-inverse-doux); }
.site .palmares .contenu-riche strong { color: var(--fond); }

/* ---------- Défilement de photos ---------- */
.site .defile-photos { display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding: 4px 0; }
.site .defile-piste { display: flex; gap: 12px; width: max-content; animation: defiler 80s linear infinite; }
.site .defile-piste.inverse { animation-direction: reverse; animation-duration: 95s; }
.site .defile-photos:hover .defile-piste, .site .defile-photos:focus-within .defile-piste { animation-play-state: paused; }
.site .defile-piste a, .site .defile-piste button { position: relative; display: block; height: clamp(170px, 18vw, 260px); flex: 0 0 auto; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: var(--fond-image); cursor: zoom-in; }
.site .defile-piste picture, .site .defile-piste img { display: block; height: 100%; width: auto; }
.site .defile-piste img { transition: transform 0.9s var(--sortie), filter 0.6s; filter: saturate(0.92); }
.site .defile-piste a:hover img, .site .defile-piste button:hover img { transform: scale(1.06); filter: saturate(1.1); }

/* ---------- Galerie : grille d'albums et de photos ---------- */
.site .grille-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(18px, 2vw, 28px); }
.site .carte-album { position: relative; display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.site .carte-album-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--fond-image); }
.site .carte-album-image picture, .site .carte-album-image img { display: block; width: 100%; height: 100%; }
.site .carte-album-image img { object-fit: cover; transition: transform 1.1s var(--sortie); }
.site .carte-album:hover .carte-album-image img { transform: scale(1.07); }
.site .carte-album-nombre { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.72); color: var(--fond); font-size: 13.5px; font-weight: 700; }
.site .carte-album-nombre .icone { width: 16px; height: 16px; }
.site .carte-album h3 { margin: 0; color: var(--encre); font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; }
.site .carte-album:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site .carte-album .meta-album { color: var(--texte-aide); font-size: 14px; }
.site .mur-photos { columns: 3 300px; column-gap: 12px; }
.site .mur-photos > * { break-inside: avoid; margin-bottom: 12px; }
.site .vignette-photo { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: var(--fond-image); cursor: zoom-in; }
.site .vignette-photo picture, .site .vignette-photo img { display: block; width: 100%; height: auto; }
.site .vignette-photo img { transition: transform 1s var(--sortie); }
.site .vignette-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 40%); opacity: 0; transition: opacity 0.4s; }
.site .vignette-photo:hover img { transform: scale(1.05); }
.site .vignette-photo:hover::after { opacity: 1; }
.site .grille-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 24px; }
.site .video-carte { display: flex; flex-direction: column; gap: 12px; }
.site .video-lecteur { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--encre); }
.site .video-lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site .video-lancer { position: absolute; inset: 0; width: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 0; background: radial-gradient(circle at 50% 45%, #2a2c30 0%, var(--encre) 70%); color: var(--fond); font: inherit; font-weight: 700; text-align: center; cursor: pointer; }
.site .video-lancer .rond-lecture { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--rouge); transition: transform 0.35s var(--sortie); }
.site .video-lancer:hover .rond-lecture { transform: scale(1.1); }
.site .video-lancer small { color: var(--texte-inverse-aide); font-weight: 500; font-size: 13px; max-width: 30em; }

/* ---------- Filtres (actualités, galerie, calendrier) ---------- */
.site .filtres-site { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.site .filtre-site { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--bordure-champ); border-radius: 999px; background: var(--fond); color: var(--encre); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.site .filtre-site:hover { border-color: var(--encre); color: var(--encre); }
.site .filtre-site[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.site .barre-filtres-site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.site .barre-filtres-site .filtres-site { margin-bottom: 0; }
.site .pagination-site { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- Article ---------- */
.site .article-entete-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: rgba(255, 255, 255, 0.85); font-size: 15px; font-weight: 600; }
.site .article-corps { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.site .article-chapo { margin-bottom: 28px; color: var(--encre); font-size: clamp(19px, 0.5vw + 17px, 23px); line-height: 1.55; font-weight: 600; }
.site .article-image-principale { margin-bottom: 32px; }
.site .partage { position: sticky; top: calc(var(--entete-compacte) + 24px); padding: 24px; display: flex; flex-direction: column; gap: 12px; border-radius: 4px; background: var(--fond-doux); }
.site .partage h2 { margin: 0; color: var(--encre); font-size: 17px; font-weight: 800; }
.site .partage .btn { justify-content: flex-start; }
.site .copie-faite { color: var(--succes-texte); font-weight: 700; font-size: 14px; }

/* ---------- Encadrement, effectif, partenaires ---------- */
.site .grille-personnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: clamp(18px, 2vw, 28px); }
.site .carte-personne { display: flex; flex-direction: column; gap: 12px; }
.site .carte-personne-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--fond-image); }
.site .carte-personne-photo picture, .site .carte-personne-photo img { display: block; width: 100%; height: 100%; }
.site .carte-personne-photo img { object-fit: cover; transition: transform 1s var(--sortie); }
.site .carte-personne:hover .carte-personne-photo img { transform: scale(1.05); }
.site .carte-personne-photo.initiales { display: grid; place-items: center; background: var(--encre); color: var(--fond); font-size: 56px; font-weight: 900; letter-spacing: -0.03em; }
.site .carte-personne h3 { margin: 0; color: var(--encre); font-size: 19px; font-weight: 800; line-height: 1.25; }
.site .carte-personne p { color: var(--texte-doux); font-size: 15px; }
.site .carte-personne .numero { color: var(--rouge); font-weight: 900; }
.site .onglets-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.site .grille-partenaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.site .carte-partenaire { padding: 28px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--bordure-carte); border-radius: 4px; background: var(--fond); transition: box-shadow 0.35s, transform 0.35s var(--sortie); }
.site .carte-partenaire:hover { box-shadow: var(--ombre-carte); transform: translateY(-3px); }
.site .carte-partenaire-logo { height: 84px; display: flex; align-items: center; }
.site .carte-partenaire-logo img { max-height: 84px; width: auto; filter: grayscale(1); transition: filter 0.4s; }
.site .carte-partenaire:hover .carte-partenaire-logo img { filter: none; }
.site .carte-partenaire-type { color: var(--texte-aide); font-size: 14px; font-weight: 600; }
.site .logos-partenaires { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.site .logos-partenaires img { max-height: 64px; width: auto; filter: grayscale(1); opacity: 0.8; transition: filter 0.4s, opacity 0.4s; }
.site .logos-partenaires a:hover img { filter: none; opacity: 1; }
.site .logos-partenaires .nom-partenaire { color: var(--encre); font-size: 20px; font-weight: 800; }
.site .pistes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.site .pistes li { padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; font-weight: 600; }

/* ---------- Catégories ---------- */
.site .grille-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.site .carte-categorie { position: relative; padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; border-radius: 4px; background: var(--fond); border: 1px solid var(--bordure-carte); transition: border-color 0.3s, transform 0.35s var(--sortie), box-shadow 0.35s; }
.site .carte-categorie:hover { border-color: var(--encre); transform: translateY(-4px); box-shadow: var(--ombre-carte); }
.site .carte-categorie-code { color: var(--rouge); font-size: 44px; line-height: 1; font-weight: 900; letter-spacing: -0.04em; }
.site .carte-categorie-age { color: var(--encre); font-weight: 800; }
.site .carte-categorie-ans { color: var(--texte-aide); font-size: 14px; }
.site .carte-categorie p { color: var(--texte-doux); font-size: 15px; line-height: 1.55; }
.site .carte-categorie .horaires { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; border-top: 1px solid var(--bordure); color: var(--encre); font-size: 14px; font-weight: 600; }
.site .carte-categorie .horaires .icone { width: 18px; height: 18px; color: var(--rouge); flex: 0 0 auto; }
.site .tableau-categories { width: 100%; border-collapse: collapse; font-size: 16px; }
.site .tableau-categories th { padding: 12px 16px; border-bottom: 2px solid var(--encre); color: var(--texte-doux); font-size: 14px; text-align: left; }
.site .tableau-categories td { padding: 14px 16px; border-bottom: 1px solid var(--bordure-carte); color: var(--encre); }
.site .tableau-categories td:first-child { font-weight: 900; color: var(--rouge); }

/* ---------- Étapes, conditions, questions ---------- */
.site .etapes-site { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: etape; }
.site .etapes-site li { position: relative; padding: 0 24px 0 0; display: flex; flex-direction: column; gap: 10px; counter-increment: etape; }
.site .etapes-site li::before { content: counter(etape); width: 56px; height: 56px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 50%; background: var(--encre); color: var(--fond); font-size: 22px; font-weight: 900; position: relative; z-index: 1; }
.site .etapes-site li::after { content: ""; position: absolute; top: 27px; left: 56px; right: 0; height: 2px; background: var(--bordure-forte); }
.site .etapes-site li:last-child::after { display: none; }
.site .etapes-site li:last-child::before { background: var(--rouge); }
.site .etapes-site p { color: var(--texte-doux); font-size: 16px; }
.site .cartes-prevoir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.site .carte-prevoir { padding: 28px; display: flex; flex-direction: column; gap: 12px; border-radius: 4px; background: var(--fond); border: 1px solid var(--bordure-carte); }
.site .carte-prevoir .icone { width: 30px; height: 30px; color: var(--rouge); }
.site .questions { display: flex; flex-direction: column; border-top: 2px solid var(--encre); }
.site .question { border-bottom: 1px solid var(--bordure-carte); }
.site .question summary { min-height: 64px; padding: 16px 48px 16px 0; position: relative; display: flex; align-items: center; color: var(--encre); font-size: 18px; font-weight: 800; cursor: pointer; list-style: none; }
.site .question summary::-webkit-details-marker { display: none; }
.site .question summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-right: 3px solid var(--rouge); border-bottom: 3px solid var(--rouge); transform: rotate(45deg); transition: transform 0.35s var(--sortie); }
.site .question[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.site .question p { padding: 0 0 22px; max-width: 46em; color: var(--texte-doux); }
.site .encadre-site { padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; border-radius: 4px; background: var(--fond-doux); color: var(--encre); }
.site .encadre-site .icone { flex: 0 0 auto; color: var(--rouge); }
.site .encadre-site.attente { background: var(--attente-fond); color: var(--attente-texte); }
.site .encadre-site.succes { background: var(--succes-fond); color: var(--succes-texte); }
.site .encadre-site.erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.site .encadre-site.noir { background: var(--encre); color: var(--texte-inverse-doux); }
.site .encadre-site.noir strong { color: var(--fond); }
.site .mention-admission { display: flex; gap: 10px; align-items: flex-start; color: var(--texte-doux); font-size: 15px; }
.site .mention-admission .icone { flex: 0 0 auto; width: 20px; height: 20px; color: var(--rouge); margin-top: 2px; }

/* ---------- Contact ---------- */
.site .coordonnees-liste { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 2px solid var(--encre); }
.site .coordonnees-liste li { padding: 18px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; border-bottom: 1px solid var(--bordure-carte); }
.site .coordonnees-liste .rond { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--fond-doux); color: var(--rouge); }
.site .coordonnees-liste .rond.vert { background: var(--vert); color: var(--fond); }
.site .coordonnees-liste dt, .site .coordonnees-liste .libelle-coord { color: var(--texte-aide); font-size: 14px; font-weight: 600; }
.site .coordonnees-liste a, .site .coordonnees-liste .valeur-coord { color: var(--encre); font-size: 18px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.site .coordonnees-liste a:hover { color: var(--lien); text-decoration: underline; }
.site .formulaire-site { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 20px; border-radius: 4px; background: var(--fond); box-shadow: var(--ombre-douce); }
.site .formulaire-site .champ > label, .site .formulaire-site .legende-champ, .site .formulaire-site .choix > legend { font-size: 15.5px; font-weight: 700; color: var(--encre); }
.site .formulaire-site .champ :is(input, select, textarea) { min-height: 52px; border-radius: 4px; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
.site .formulaire-site .champ textarea { min-height: 150px; padding: 12px 14px; }
.site .formulaire-site .champ :is(input, select, textarea):focus { border-color: var(--encre); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); outline: none; }
.site .formulaire-site .champ :is(input, select, textarea):focus-visible { outline: 3px solid var(--rouge); outline-offset: 1px; }
.site .formulaire-site .aide { font-size: 14px; color: var(--texte-aide); }
.site .formulaire-site .message-erreur { font-size: 15px; }
.site .formulaire-site fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.site .ligne-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.site .pot-de-miel { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site .carte-site-lieu { display: flex; flex-direction: column; gap: 14px; }
.site .carte-site-lieu .photo-cadre { aspect-ratio: 16 / 10; }
.site .carte-site-lieu .vide-terrain { aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 4px; background: var(--vert-pelouse); color: rgba(255, 255, 255, 0.85); position: relative; overflow: hidden; }
.site .carte-site-lieu .vide-terrain.stade { background: var(--encre); }
.site .vide-terrain .lignes-terrain { position: absolute; inset: 14px; border: 2px solid rgba(255, 255, 255, 0.4); }
.site .vide-terrain .lignes-terrain::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.4); }
.site .vide-terrain .lignes-terrain::after { content: ""; position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%; }
.site .vide-terrain .icone { position: relative; width: 44px; height: 44px; }
.site .carte-site-lieu h3 { margin: 0; color: var(--encre); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.site .section-noire .carte-site-lieu h3 { color: var(--fond); }
.site .etiquette-lieu { align-self: flex-start; padding: 4px 10px; border-radius: 3px; background: var(--encre); color: var(--fond); font-size: 13px; font-weight: 700; }
.site .etiquette-lieu.vert { background: var(--vert); }

/* ---------- Appel final ---------- */
.site .appel-final { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; background: var(--rouge); color: var(--fond); clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--biais) * -0.2); }
.site .appel-final::before { content: ""; position: absolute; right: -6vw; top: 50%; z-index: -1; width: min(52vw, 640px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; border: clamp(18px, 2.6vw, 36px) solid rgba(255, 255, 255, 0.12); }
.site .appel-final::after { content: ""; position: absolute; right: 8vw; top: 50%; z-index: -1; width: min(24vw, 300px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: rgba(0, 0, 0, 0.12); }
.site .appel-final-contenu { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.site .appel-final .titre-section { max-width: 15ch; font-size: clamp(40px, 5.4vw, 84px); }
.site .appel-final p { max-width: 34em; color: rgba(255, 255, 255, 0.92); font-size: clamp(17px, 0.4vw + 15.5px, 20px); }
.site .appel-final .btn-noir:hover { background: var(--fond); color: var(--encre); }

/* ---------- Pied de page ---------- */
.site .pied-site { position: relative; padding-bottom: env(safe-area-inset-bottom); background: var(--encre); color: var(--texte-inverse-doux); font-size: 15.5px; }
.site .pied-site::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--rouge); }
.site .pied-site-haut { padding-top: clamp(56px, 6vw, 88px); padding-bottom: 48px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.site .pied-site h2 { margin: 0 0 16px; color: var(--fond); font-size: 16px; font-weight: 800; }
.site .pied-site a { color: var(--texte-inverse-doux); text-decoration: none; }
.site .pied-site a:hover { color: var(--fond); text-decoration: underline; text-underline-offset: 4px; }
.site .pied-site-marque { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 26em; }
.site .pied-site-marque .logo-site-nom { color: var(--fond); font-size: 20px; line-height: 1.15; }
.site .logo-site-pied .logo-site-image { width: 72px; height: 72px; }
.site .pied-site-devise { color: var(--fond); font-weight: 700; font-style: italic; }
.site .pied-site-colonne { display: flex; flex-direction: column; gap: 12px; }
.site .pied-site-colonne strong { color: var(--fond); }
.site .pied-site-liens { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site .pied-site-reseaux { list-style: none; padding: 0; display: flex; gap: 10px; }
.site .pied-site-reseaux a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); color: var(--fond); transition: background-color 0.25s, border-color 0.25s; }
.site .pied-site-reseaux a:hover { background: var(--rouge); border-color: var(--rouge); }
.site .lien-pied-fort { color: var(--fond) !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 4px; }
.site .pied-site-bas { padding-top: 22px; padding-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid #2a2c30; color: var(--texte-inverse-aide); font-size: 14px; }

/* ---------- Barre d'actions sur téléphone ---------- */
.site .barre-mobile-site { display: none; }

/* ---------- Visionneuse de photos ---------- */
.site .visionneuse { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(5, 5, 6, 0.96); color: var(--fond); opacity: 0; transition: opacity 0.3s; }
.site .visionneuse.ouverte { opacity: 1; }
.site .visionneuse-haut { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site .visionneuse-compteur { font-weight: 700; font-variant-numeric: tabular-nums; }
.site .visionneuse-scene { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 72px; min-height: 0; touch-action: pan-y; }
.site .visionneuse-scene img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 2px; transition: opacity 0.35s, transform 0.45s var(--sortie); }
.site .visionneuse-scene img.charge { opacity: 0; transform: scale(0.97); }
.site .visionneuse-bouton { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: var(--fond); cursor: pointer; transition: background-color 0.2s; }
.site .visionneuse-bouton:hover { background: var(--rouge); border-color: var(--rouge); }
.site .visionneuse-precedent, .site .visionneuse-suivant { position: absolute; top: 50%; transform: translateY(-50%); }
.site .visionneuse-precedent { left: 12px; }
.site .visionneuse-suivant { right: 12px; }
.site .visionneuse-bas { padding: 14px 20px max(18px, env(safe-area-inset-bottom)); min-height: 56px; color: var(--texte-inverse-doux); font-size: 15px; text-align: center; }

/* ---------- Pré-inscription et réservation ---------- */
.site .parcours { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.site .parcours-cote { position: sticky; top: calc(var(--entete-compacte) + 24px); display: flex; flex-direction: column; gap: 16px; }
.site .carte-cote { padding: 24px; display: flex; flex-direction: column; gap: 12px; border-radius: 4px; background: var(--fond-doux); }
.site .carte-cote h2 { margin: 0; color: var(--encre); font-size: 18px; font-weight: 800; }
.site .carte-cote ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site .carte-cote li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.site .carte-cote li .icone { flex: 0 0 auto; width: 20px; height: 20px; color: var(--vert); margin-top: 2px; }
.site .etape-formulaire { display: flex; flex-direction: column; gap: 20px; }
.js .site .formulaire-etapes .etape-formulaire:not(.active) { display: none; }
.site .etape-formulaire > h2 { margin: 0; color: var(--encre); font-size: clamp(26px, 1.4vw + 18px, 34px); font-weight: 900; letter-spacing: -0.025em; }
.site .etape-formulaire.active { animation: monter 0.5s var(--sortie) both; }
.sans-js .site .formulaire-etapes .etape-formulaire + .etape-formulaire { padding-top: 28px; border-top: 1px solid var(--bordure); }
.sans-js .site [data-seulement-js] { display: none !important; }
.js .site [data-seulement-sans-js] { display: none !important; }
.site .categorie-proposee { padding: 16px 18px; display: flex; align-items: center; gap: 16px; border-radius: 4px; background: var(--encre); color: var(--fond); }
.site .categorie-proposee .code { color: var(--fond); font-size: 36px; font-weight: 900; letter-spacing: -0.03em; }
.site .categorie-proposee.hors { background: var(--attente-fond); color: var(--attente-texte); }
.site .navigation-etapes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--bordure); }
.site .navigation-etapes .btn:only-child { margin-left: auto; }
.site .recap-inscription { padding: 20px; display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--encre); border-radius: 4px; }
.site .recap-inscription dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; }
.site .recap-inscription dt { color: var(--texte-aide); font-size: 14.5px; }
.site .recap-inscription dd { margin: 0; color: var(--encre); font-weight: 600; }
.site .reference-grande { color: var(--encre); font-size: clamp(36px, 4vw, 56px); font-weight: 900; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.site .confirmation-site { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--vert); color: var(--fond); animation: apparition 0.7s var(--sortie) both; }
.site .confirmation-site .icone { width: 44px; height: 44px; stroke-width: 2.5; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trace 0.6s 0.35s var(--sortie) forwards; }
@keyframes apparition { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
.site .suite-etapes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; border-left: 3px solid var(--bordure-carte); margin-left: 12px; }
.site .suite-etapes li { position: relative; padding: 0 0 22px 28px; display: flex; flex-direction: column; gap: 2px; }
.site .suite-etapes li::before { content: ""; position: absolute; left: -11px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--fond); border: 3px solid var(--bordure-forte); }
.site .suite-etapes li.faite::before { background: var(--vert); border-color: var(--vert); }
.site .suite-etapes li.en-cours::before { background: var(--rouge); border-color: var(--rouge); box-shadow: 0 0 0 5px rgba(215, 25, 31, 0.18); }
.site .suite-etapes strong { color: var(--encre); }
.site .suite-etapes span { color: var(--texte-aide); font-size: 15px; }
.site .statut-dossier { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--attente-fond); color: var(--attente-texte); font-weight: 800; font-size: 14.5px; }
.site .statut-dossier.succes { background: var(--succes-fond); color: var(--succes-texte); }
.site .statut-dossier.erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.site .statut-dossier.neutre { background: var(--neutre-fond); color: var(--texte-doux); }

/* Réservation : jours, créneaux, récapitulatif */
.site .tarifs-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.site .tarif-carte { padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; border-radius: 4px; background: var(--encre); color: var(--texte-inverse-doux); }
.site .tarif-carte.nuit { background: #10131f; background-image: radial-gradient(circle at 85% 20%, rgba(255, 220, 120, 0.22) 0 6px, transparent 7px), radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.25) 0 2px, transparent 3px); }
.site .tarif-carte .montant { color: var(--fond); font-size: 30px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.site .regles-terrain { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site .regles-terrain li { display: flex; gap: 10px; align-items: flex-start; }
.site .regles-terrain .icone { flex: 0 0 auto; width: 20px; height: 20px; color: var(--vert); margin-top: 3px; }
.site .jours-site { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.site .jour-site { flex: 0 0 76px; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--bordure-champ); border-radius: 4px; background: var(--fond); color: var(--encre); font: inherit; text-decoration: none; scroll-snap-align: start; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.25s var(--sortie); }
.site .jour-site:hover { border-color: var(--encre); color: var(--encre); transform: translateY(-2px); }
.site .jour-site .jour-nom { font-size: 13px; font-weight: 600; color: var(--texte-aide); }
.site .jour-site .jour-num { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.site .jour-site .jour-mois { font-size: 12.5px; font-weight: 600; color: var(--texte-aide); }
.site .jour-site[aria-current="date"], .site .jour-site[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.site .jour-site[aria-current="date"] :is(.jour-nom, .jour-mois), .site .jour-site[aria-pressed="true"] :is(.jour-nom, .jour-mois) { color: var(--texte-inverse-aide); }
.site .grille-creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.site .creneau-site { position: relative; }
.site .creneau-site input { position: absolute; opacity: 0; pointer-events: none; }
.site .creneau-site label, .site .creneau-site .occupe { min-height: 48px; padding: 4px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--bordure-champ); border-radius: 4px; background: var(--fond); color: var(--encre); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.site .creneau-site label small, .site .creneau-site .occupe small { font-size: 11.5px; font-weight: 600; color: var(--texte-aide); }
.site .creneau-site label:hover { border-color: var(--encre); }
.site .creneau-site input:checked + label { background: var(--rouge); border-color: var(--rouge); color: var(--fond); }
.site .creneau-site input:checked + label small { color: rgba(255, 255, 255, 0.85); }
.site .creneau-site input:focus-visible + label { outline: 3px solid var(--rouge); outline-offset: 2px; }
.site .creneau-site .occupe { cursor: not-allowed; color: var(--texte-aide); background: repeating-linear-gradient(135deg, var(--bordure) 0 4px, var(--fond-doux) 4px 8px); border-color: var(--bordure-forte); text-decoration: line-through; }
.site .creneau-site .occupe.academie { background: var(--texte); border-color: var(--texte); color: var(--texte-inverse-aide); text-decoration: none; }
.site .creneau-site .occupe.academie small { color: var(--texte-inverse-aide); }
.site .creneau-site.nuit label { background-image: linear-gradient(0deg, rgba(16, 19, 31, 0.06), rgba(16, 19, 31, 0.06)); }
.site .creneau-site.indisponible-duree label { opacity: 0.45; }
.site .separateur-nuit { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; color: var(--texte-doux); font-size: 14px; font-weight: 700; }
.site .separateur-nuit::before, .site .separateur-nuit::after { content: ""; flex: 1; height: 1px; background: var(--bordure-champ); }
.site .durees-site { display: flex; flex-wrap: wrap; gap: 8px; }
.site .duree-site { position: relative; }
.site .duree-site input { position: absolute; opacity: 0; pointer-events: none; }
.site .duree-site label { min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; border: 1px solid var(--bordure-champ); border-radius: 999px; background: var(--fond); color: var(--encre); font-weight: 700; cursor: pointer; }
.site .duree-site input:checked + label { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.site .duree-site input:disabled + label { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.site .duree-site input:focus-visible + label { outline: 3px solid var(--rouge); outline-offset: 2px; }
.site .recap-reservation { padding: 24px; display: flex; flex-direction: column; gap: 12px; border-radius: 4px; background: var(--encre); color: var(--texte-inverse-doux); }
.site .recap-reservation h2 { margin: 0; color: var(--fond); font-size: 18px; font-weight: 800; }
.site .recap-reservation .recap-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.site .recap-reservation .recap-ligne span:last-child { color: var(--fond); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.site .recap-reservation .recap-total-site { margin-top: 6px; padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.site .recap-reservation .recap-total-site strong { color: var(--fond); font-size: 30px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.site .recap-reservation .vide { color: var(--texte-inverse-aide); font-size: 15px; }
.site .legende-creneaux { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--texte-doux); }
.site .legende-creneaux li { display: flex; align-items: center; gap: 8px; }
.site .temoin-site { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--bordure-champ); background: var(--fond); }
.site .temoin-site.reserve { background: repeating-linear-gradient(135deg, var(--bordure) 0 3px, var(--fond-doux) 3px 6px); border-color: var(--bordure-forte); }
.site .temoin-site.academie { background: var(--texte); border-color: var(--texte); }
.site .temoin-site.choix { background: var(--rouge); border-color: var(--rouge); }

/* ---------- Apparitions au défilement (seulement avec JavaScript) ---------- */
.js .site [data-reveler] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--sortie), transform 1s var(--sortie); }
.js .site [data-reveler].visible { opacity: 1; transform: none; }
.js .site [data-reveler="photo"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--sortie); }
.js .site [data-reveler="photo"] img { transform: scale(1.18); transition: transform 1.8s var(--sortie); }
.js .site [data-reveler="photo"].visible { clip-path: inset(0 0 0 0); }
.js .site [data-reveler="photo"].visible img { transform: scale(1); }
.js .site [data-reveler="frise"] { opacity: 1; transform: none; }
.js .site [data-reveler="frise"] li { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--sortie), transform 0.8s var(--sortie); }
.js .site [data-reveler="frise"].visible li { opacity: 1; transform: none; }
.js .site [data-reveler="frise"].visible li:nth-child(2) { transition-delay: 0.25s; }
.js .site [data-reveler="frise"].visible li:nth-child(3) { transition-delay: 0.5s; }
.js .site [data-reveler="frise"].visible li:nth-child(4) { transition-delay: 0.75s; }
.js .site [data-reveler-groupe] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--sortie), transform 0.9s var(--sortie); }
.js .site [data-reveler-groupe].visible > * { opacity: 1; transform: none; }
.js .site [data-reveler-groupe].visible > :nth-child(2) { transition-delay: 0.1s; }
.js .site [data-reveler-groupe].visible > :nth-child(3) { transition-delay: 0.2s; }
.js .site [data-reveler-groupe].visible > :nth-child(4) { transition-delay: 0.3s; }
.js .site [data-reveler-groupe].visible > :nth-child(5) { transition-delay: 0.4s; }
.js .site [data-reveler-groupe].visible > :nth-child(6) { transition-delay: 0.5s; }
.js .site [data-reveler-groupe].visible > :nth-child(n+7) { transition-delay: 0.6s; }

/* ---------- Tablette ---------- */
@media (max-width: 1180px) {
  .site .nav-site { display: none; }
  .site .bouton-menu { display: inline-grid; place-items: center; }
  .site .entete-site-actions { margin-left: auto; }
  .site .pied-site-haut { grid-template-columns: 1fr 1fr; }
  .site .article-corps { grid-template-columns: minmax(0, 1fr); }
  .site .partage { position: static; }
}
@media (max-width: 980px) {
  :root { --biais: 8vw; }
  .site .grille-deux, .site .double-appel, .site .parcours { grid-template-columns: minmax(0, 1fr); }
  .site .parcours-cote { position: static; }
  .site .cartes-actualites { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site .carte-actualite.une { grid-template-columns: minmax(0, 1fr); }
  .site .etapes-site { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .site .etapes-site li:nth-child(2)::after { display: none; }
  .site .cartes-prevoir { grid-template-columns: minmax(0, 1fr); }
  .site .grille-trois { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site .mosaique { min-height: 420px; }
  .site .barre-mobile-site { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 -1px 0 var(--bordure), 0 -10px 30px rgba(0, 0, 0, 0.08); transform: translateY(0); transition: transform 0.4s var(--sortie); }
  .site .barre-mobile-site.cachee { transform: translateY(110%); }
  .site .barre-mobile-site .btn { flex: 1 1 0; min-height: 50px; padding: 0 12px; font-size: 15px; }
  .site .barre-mobile-icone { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--encre); color: var(--fond); }
  .site .barre-mobile-icone.barre-mobile-whatsapp { background: var(--vert); }
  body.site { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.site.sans-barre { padding-bottom: 0; }
  .site .entete-site-actions .btn, .site .entete-site-actions .bouton-rond-whatsapp { display: none; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  :root { --entete-hauteur: 70px; --entete-compacte: 62px; --biais: 9vw; --echarpe: 9px; }
  body.site { font-size: 16.5px; }
  .site .enveloppe, .site .entete-site-contenu { padding-left: 20px; padding-right: 20px; }
  .site .hero-contenu, .site .bandeau-contenu { padding-left: 20px; padding-right: 20px; }
  .site .logo-site-image { width: 44px; height: 44px; }
  .site .logo-site-nom { font-size: 20px; }
  .site .logo-site-lieu { display: none; }
  .site .hero { min-height: max(600px, 100svh); }
  .site .hero-contenu { gap: 20px; padding-bottom: calc(var(--biais) + var(--echarpe) + 40px); }
  .site .hero-titre { font-size: clamp(42px, 12.4vw, 64px); }
  .site .hero-contenu .groupe-boutons { width: 100%; }
  .site .hero-contenu .groupe-boutons .btn { flex: 1 1 100%; }
  .site .bandeau-page { min-height: 440px; }
  .site .bandeau-titre { font-size: clamp(36px, 10vw, 52px); }
  .site .frise { --colonnes: 1; gap: 28px; padding-top: 0; padding-left: 34px; }
  .site .frise::before { left: 7px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .js .site .frise[data-reveler]::before { transform: scaleY(0); transform-origin: top; }
  .js .site .frise[data-reveler].visible::before { transform: scaleY(1); }
  .site .frise li::before { top: 6px; left: -34px; }
  .site .frise.quatre { --colonnes: 1; row-gap: 32px; }
  .site .frise.quatre::before { display: block; }
  .site .cartes-actualites, .site .grille-trois, .site .duo-matchs, .site .tarifs-cartes, .site .ligne-champs { grid-template-columns: minmax(0, 1fr); }
  .site .etapes-site { grid-template-columns: minmax(0, 1fr); }
  .site .etapes-site li::after { display: none; }
  .site .carte-photo { min-height: 440px; }
  .site .ligne-match { grid-template-columns: minmax(0, 1fr) auto; }
  .site .ligne-match-date { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .site .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px; min-height: 0; }
  .site .mosaique > :first-child { grid-column: 1 / -1; grid-row: auto; }
  .site .pied-site-haut { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .site .palmares { grid-template-columns: minmax(0, 1fr); }
  .site .visionneuse-scene { padding: 0 8px; }
  .site .visionneuse-precedent, .site .visionneuse-suivant { top: auto; bottom: -62px; transform: none; }
  .site .visionneuse-precedent { left: 16px; }
  .site .visionneuse-suivant { right: 16px; }
  .site .visionneuse-bas { padding-left: 80px; padding-right: 80px; }
  .site .formulaire-site { padding: 20px; box-shadow: none; border: 1px solid var(--bordure-carte); }
  .site .appel-final .groupe-boutons .btn { flex: 1 1 100%; }
}

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site *, .site *::before, .site *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .site .hero-diapo img, .site .bandeau-image img { animation: none !important; transform: none !important; }
  .site .bandeau-valeurs-piste, .site .defile-piste { animation: none !important; }
  /* Valeurs immobiles : les mots passent à la ligne (pas de zone à faire défiler au clavier) ; photos : défilement à la main. */
  .site .bandeau-valeurs-piste { width: auto; }
  .site .bandeau-valeurs ul { flex-wrap: wrap; justify-content: center; row-gap: 12px; padding: 0 16px; }
  .site .bandeau-valeurs ul[aria-hidden="true"] { display: none; }
  .site .bandeau-valeurs li { font-size: clamp(32px, 6vw, 80px); }
  .site .defile-photos { overflow-x: auto; }
  .js .site [data-reveler], .js .site [data-reveler-groupe] > *, .js .site [data-reveler="frise"] li { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .site [data-reveler="photo"] img { transform: none !important; }
}

/* ---------- Impression ---------- */
@media print {
  .site .entete-site, .site .barre-mobile-site, .site .menu-mobile, .site .pied-site, .site .hero-progression { display: none !important; }
  .site .hero-cadre, .site .hero, .site .bandeau-cadre, .site .bandeau-page { clip-path: none; min-height: 0; background: none; color: #000; }
  .site .bandeau-titre, .site .hero-titre { color: #000; }
  body.site { padding: 0; }
}

/* ---------- Compléments : piles, valeurs ---------- */
.site .pile { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.site .pile-petite { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.site .pile-grande { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.site .pile-carte { display: flex; flex-direction: column; gap: 10px; }
.site .grille-valeurs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--encre); border-left: 1px solid var(--bordure-carte); }
.site .grille-valeurs li { position: relative; min-height: clamp(120px, 12vw, 170px); padding: 24px; display: flex; align-items: flex-end; overflow: hidden; border-right: 1px solid var(--bordure-carte); border-bottom: 1px solid var(--bordure-carte); color: var(--encre); font-size: clamp(26px, 2.4vw + 10px, 42px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; transition: color 0.4s; isolation: isolate; }
.site .grille-valeurs li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rouge); transform: translateY(101%); transition: transform 0.55s var(--sortie); }
.site .grille-valeurs li:hover { color: var(--fond); }
.site .grille-valeurs li:hover::before { transform: none; }
@media (max-width: 640px) { .site .grille-valeurs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .site .grille-valeurs li { padding: 18px; } }
.site .ligne-semaine { padding: 14px 0; display: grid; grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr); gap: 12px; border-bottom: 1px solid var(--bordure-carte); }
.site .ligne-semaine dt { color: var(--texte-aide); font-size: 15px; font-weight: 600; }
.site .ligne-semaine dd { margin: 0; color: var(--encre); font-weight: 700; }
.site .effectif-categorie + .effectif-categorie { margin-top: clamp(40px, 5vw, 64px); }
.site .statut-ouverture { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--fond); font-weight: 700; font-size: 15px; }
.site .statut-ouverture::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: pulsation 2s infinite; }
.site .statut-ouverture.fermees::before { background: var(--attente-bordure); animation: none; }
@keyframes pulsation { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.site .sommaire li { display: block; }
.site .sommaire a { color: var(--encre); font-weight: 600; text-decoration: none; }
.site .sommaire a:hover { color: var(--lien); text-decoration: underline; }
.site .texte-legal h2 { scroll-margin-top: calc(var(--entete-compacte) + 20px); }
.site .etiquette-lieu.rouge { background: var(--rouge); }
.site .palmares h2 { color: var(--fond); }
.site .palmares .contenu-riche ul > li::before { background: var(--fond); }
.site .options-colonne { flex-direction: column; }
.site .options-colonne .option { flex: 0 0 auto; }
.site .formulaire-site .option { min-height: 52px; border-radius: 4px; transition: border-color 0.2s, box-shadow 0.2s; }
.site .formulaire-site .option:hover { border-color: var(--encre); }
.site .formulaire-site .recapitulatif-erreurs { padding: 16px 18px; border-radius: 4px; background: var(--erreur-fond); color: var(--erreur-texte); }
.site .formulaire-site .recapitulatif-erreurs h2 { margin: 0 0 6px; color: var(--erreur-texte); font-size: 17px; font-weight: 800; }
.site .formulaire-site .recapitulatif-erreurs ul { margin: 0; padding-left: 20px; }
.site .formulaire-site .recapitulatif-erreurs a { color: var(--erreur-texte); font-weight: 600; }
.site .code-introuvable { color: var(--rouge); font-size: clamp(72px, 12vw, 180px); line-height: 0.8; font-weight: 900; letter-spacing: -0.06em; }
.site .liens-rubriques { list-style: none; padding: 0; margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0; border-top: 2px solid var(--encre); }
.site .liens-rubriques a { min-height: 72px; padding: 0 4px; display: flex; align-items: center; border-bottom: 1px solid var(--bordure-carte); color: var(--encre); font-size: 19px; font-weight: 800; text-decoration: none; }
.site .liens-rubriques a:hover { color: var(--rouge); }
.site .etapes-site-formulaire { margin-bottom: 18px; font-size: 14.5px; }
.site .aide-claire { color: var(--texte-inverse-aide); font-size: 13.5px; }
.site .categorie-proposee strong { color: var(--fond); }
.site .categorie-proposee.hors a { color: inherit; font-weight: 700; }
.site .bloc-second { margin-top: 10px; padding: 18px; border-left: 3px solid var(--rouge); background: var(--fond-doux); border-radius: 4px; }
.site .formulaire-site .case { font-size: 15.5px; line-height: 1.5; }
.site .formulaire-site .precision { margin-left: 34px; }
.site .formulaire-site input[type="file"] { padding: 10px; min-height: 0; font-size: 15px; }
.site .bouton-lien { padding: 0; border: 0; background: none; color: var(--lien); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.site .creneau-site .occupe.indisponible { background: var(--fond-doux); border: 1px dashed var(--bordure-forte); color: var(--texte-aide); text-decoration: none; }
.site .creneau-site .occupe.indisponible small { color: var(--texte-aide); font-weight: 500; }
.site .detail-montant { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site .detail-montant div { display: flex; justify-content: space-between; gap: 12px; }
.site .detail-montant dd { margin: 0; font-weight: 700; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.site .detail-montant .total { padding-top: 10px; border-top: 2px solid var(--encre); font-size: 20px; font-weight: 900; color: var(--encre); }
.site .insecable { white-space: nowrap; }