/* Mairie 2000 — styles globaux
   La mise en page vient de l'export Claude Design (styles en ligne dans le HTML).
   Ce fichier ajoute la base commune, l'en-tête et toute la couche d'animation. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Karla, system-ui, sans-serif; color: #12233A; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
a { color: #0A549E; text-decoration: none; }
a:hover { color: #063B73; text-decoration: underline; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; }
::selection { background: #4EAFE0; color: #fff; }
:focus-visible { outline: 2px solid #4EAFE0; outline-offset: 3px; }

:root {
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --blue: #0A549E;
}

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--blue); color: #fff; padding: 10px 16px; font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 12px; color: #fff; }

.no-tr, .no-tr * { transition: none !important; }

/* ---------- En-tête ---------- */
.hdr-spacer { height: calc(clamp(48px, 5vw, 68px) + 25px); }
.site-header { transition: box-shadow .4s var(--ease); }
.site-header__inner { transition: padding .4s var(--ease); }
.site-logo img { transition: height .4s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(10, 84, 158, .08); }
.site-header.is-scrolled .site-header__inner { padding-top: 6px !important; padding-bottom: 6px !important; }
.site-header.is-scrolled .site-logo img { height: calc(clamp(48px, 5vw, 68px) * .8) !important; }
.site-nav::-webkit-scrollbar { display: none; }
/* flex-end + overflow rendait le premier lien inatteignable sur mobile : on aligne à droite via margin auto */
.site-nav { justify-content: flex-start !important; }
.site-nav > :first-child { margin-left: auto; }

.nav-link { position: relative; color: #12233A; padding: 8px 0; transition: color .25s; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blue);
  transform: scaleX(0); transform-origin: right center; transition: transform .45s var(--ease-out);
}
.nav-link:hover { color: var(--blue); text-decoration: none; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left center; }

/* Barre de lecture (pages avec sommaire) */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform-origin: left center; transform: scaleX(0); }

/* ---------- Transitions partagées ----------
   Une seule déclaration pour éviter qu'une règle n'écrase la transition d'une autre. */
.hv, .rv, .fx-lift, .fx-spot, .mag {
  transition:
    opacity .9s var(--ease-out) var(--rv-d, 0s),
    translate .9s var(--ease-out) var(--rv-d, 0s),
    transform .45s var(--ease-out),
    scale .2s ease,
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .45s var(--ease-out);
}

/* ---------- Hero : entrée au chargement ---------- */
.hero-copy > * { animation: heroUp 1s var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: .1s; }
.hero-copy > :nth-child(2) { animation-delay: .2s; }
.hero-copy > :nth-child(3) { animation-delay: .32s; }
.hero-copy > :nth-child(4) { animation-delay: .44s; }
.hero-copy > :nth-child(5) { animation-delay: .56s; }
.hero-copy .leaf { animation: leafPop .9s var(--ease-out) both; animation-delay: .35s; }
.hero-copy .leaf:nth-child(2) { animation-delay: .45s; }
.hero-copy .leaf:nth-child(3) { animation-delay: .55s; }

.hero-media img { scale: 1.12; animation: heroImg 1.8s var(--ease-out) both; will-change: translate; }
.hero-wedge { animation: wedge 1.5s var(--ease-out) .1s both; }

@keyframes heroUp { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: none; } }
@keyframes heroImg { from { opacity: 0; scale: 1.22; } to { opacity: 1; scale: 1.12; } }
@keyframes wedge { from { clip-path: polygon(0 0, 62% 0, 0 100%); } to { clip-path: polygon(0 0, 20% 0, 0 100%); } }
@keyframes leafPop { from { opacity: 0; scale: .2; rotate: -60deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

/* ---------- Reveal au scroll ---------- */
.rv { opacity: 0; translate: 0 24px; }
.rv.in { opacity: 1; translate: none; }

.leaf { transition: rotate .6s var(--ease-out), scale .6s var(--ease-out), opacity .4s ease; }
.rv .leaf { opacity: 0; scale: .3; rotate: -45deg; }
.rv.in .leaf { opacity: 1; scale: 1; rotate: 0deg; transition-delay: calc(var(--rv-d, 0s) + .25s); }

/* ---------- Parallaxe des images ---------- */
.px-img { scale: 1.08; will-change: translate; }
.px-bg { scale: 1.16; will-change: translate; }
.zoom-img { transition: scale 1.1s var(--ease-out); }
.zoom-frame:hover .zoom-img { scale: 1.05; }
.zoom-frame:hover .px-img { scale: 1.13; }

/* ---------- Cartes ---------- */
.fx-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10, 84, 158, .12), 0 2px 6px rgba(10, 84, 158, .06) !important; }

/* Halo qui suit le curseur */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(78, 175, 224, .16)), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
.fx-spot:hover::after { opacity: 1; }
.fx-spot.is-dark, .fx-row { --spot: rgba(255, 255, 255, .13); }

.fx-spot:hover .leaf, .fx-lift:hover .leaf { rotate: 14deg; }
.fx-pub span:last-child { transition: color .25s ease; }
.fx-pub:hover span:last-child { color: var(--blue); }
.fx-logo img { transition: scale .5s var(--ease-out); }
.fx-logo:hover img { scale: 1.06; }
.fx-row span { display: inline-block; transition: transform .4s var(--ease-out); }
.fx-row:hover span { transform: translateX(5px); }
.fx-row:hover span.is-down { transform: translateY(3px); }

/* Chiffres clés */
[data-count] { font-variant-numeric: tabular-nums; }
.fx-lift [style*="border-radius: 50%"] { transition: background-color .35s ease, scale .5s var(--ease-out); }
.fx-lift:hover [style*="border-radius: 50%"] { background-color: #DCEAF7 !important; scale: 1.06; }

/* Boutons */
.mag:active { scale: .97; }

/* ---------- Instances (A propos) : conseil d'administration et équipe alignés sur ordinateur ---------- */
@media (min-width: 761px) {
  .instances-grid { grid-template-columns: 1fr 1fr !important; }
  .instances-intro { grid-column: 1; grid-row: 1; }
  .instances-ca { grid-column: 1; grid-row: 2; }
  .instances-team { grid-column: 2; grid-row: 2; }
}

/* ---------- Mosaïque « Le club sur le terrain » (A propos) ---------- */
.club-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 17vw, 220px); grid-auto-flow: dense; gap: 12px; }
.club-mosaic__tile--tall { grid-row: span 2; }
.club-mosaic__tile--wide { grid-column: span 2; }
@media (max-width: 760px) {
  .club-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 8px; }
}

/* ---------- Carrousel ---------- */
[data-carousel-track]::-webkit-scrollbar { display: none; }
.car-btn { transition: background-color .25s, color .25s, scale .35s var(--ease-out), transform .45s var(--ease-out) !important; }
.car-btn:hover { scale: 1.08; }
.car-dot {
  position: relative; overflow: hidden; width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0;
  background: #C6D6E6; cursor: pointer; transition: width .4s var(--ease-out), background-color .25s;
}
.car-dot:hover { background: #A9C1D8; }
.car-dot.is-active { width: 28px; }
.car-dot.is-active::after {
  content: ""; position: absolute; inset: 0; background: var(--blue); border-radius: inherit;
  transform-origin: left center; animation: dotFill 6s linear both;
}
.is-paused .car-dot.is-active::after { animation-play-state: paused; }
.no-autoplay .car-dot.is-active::after { animation: none; }
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Sommaires (scrollspy) ---------- */
[data-toc] a { position: relative; display: inline-block; transition: color .25s ease, transform .4s var(--ease-out); }
[data-toc] a::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 7px; height: 10px; margin-top: -5px;
  background: var(--blue); border-radius: 80% 0 80% 0; opacity: 0; scale: .3; transition: opacity .3s ease, scale .45s var(--ease-out);
}
[data-toc] a.is-current { color: var(--blue) !important; transform: translateX(6px); }
[data-toc] a.is-current::before { opacity: 1; scale: 1; }
/* Ecran etroit : le sommaire passe au-dessus (ou en dessous) du texte, il ne doit plus rester colle en le recouvrant */
@media (max-width: 860px) {
  [data-toc] { position: static !important; }
}

/* ---------- Vidéo YouTube : image cliquable avant chargement ---------- */
.yt-facade { cursor: pointer; }
.yt-facade__play { transition: scale .45s var(--ease-out), box-shadow .3s ease; }
.yt-facade:hover .yt-facade__play, .yt-facade:focus-visible .yt-facade__play { scale: 1.08; box-shadow: 0 16px 48px rgba(0, 0, 0, .4) !important; }
.yt-facade:focus-visible { outline: 3px solid #4EAFE0; outline-offset: -3px; }

/* ---------- Pied de page ---------- */
.site-footer ul a { display: inline-block; transition: transform .35s var(--ease-out), color .25s ease; }
.site-footer ul a:hover { transform: translateX(3px); color: #fff !important; text-decoration: none; }
.site-footer input[type="email"] { transition: border-color .25s ease, background-color .25s ease; }
.site-footer input[type="email"]:focus { outline: none; border-color: #4EAFE0 !important; background: rgba(255, 255, 255, .12) !important; }
[data-newsletter-note]:not(:empty) { animation: heroUp .6s var(--ease-out) both; }

/* ---------- Accessibilité & impression ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
}
@media print {
  .rv, .rv .leaf { opacity: 1 !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; }
  .site-header { position: static !important; box-shadow: none !important; }
  .hdr-spacer { display: none; }
}