/* =====================================================================
   STYLE DU SITE TCJ : direction « Terre & Craie »
   Une affiche de tournoi : craie, terre battue, brun fumé, et une touche de jaune balle.
   Pour changer les couleurs ou les polices, modifie uniquement le bloc :root.
   ===================================================================== */

/* 1) POLICES (hébergées sur le site : rien n'est chargé depuis Google, RGPD) */
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: block; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: block; }

/* 2) COULEURS ET RÉGLAGES */
:root {
  --chalk: #F3ECDD;       /* craie : fond principal */
  --paper: #FAF6EC;       /* papier : cartes */
  --sand: #E9DCC1;        /* sable : bandes alternées */
  --clay: #C04E27;        /* terre battue (assez foncée pour du texte blanc lisible) */
  --clay-deep: #96361A;   /* terre battue foncée (texte lisible sur craie) */
  --smoke: #3A1A10;       /* brun fumé : sections sombres */
  --night: #1E100A;       /* brun nuit : pied de page */
  --ball: #DCEB4C;        /* jaune balle : accent, à petites doses */
  --ink: #1E1814;         /* texte */
  --muted: #5B5550;       /* texte secondaire */
  --line: #D9CBAA;

  --f-display: 'Manrope', 'Instrument Sans', system-ui, sans-serif;
  --f-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 94rem;
  --gut: clamp(1.1rem, 4.5vw, 4.5rem);
  --r: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 3) BASE */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
html { overflow-x: clip; }
body { margin: 0; background: var(--chalk); color: var(--ink); font: 400 1.125rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { max-width: 100%; height: auto; }
a { color: var(--clay-deep); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.02; margin: 0; text-wrap: balance; letter-spacing: -.03em; }
em { font-style: normal; color: var(--clay); }
.sec.dark em, .band em, .page-head em { color: var(--ball); }
.hero em { color: var(--clay); }
p { margin: 0; }
figure { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; box-shadow: 0 0 0 6px var(--smoke); border-radius: 6px; }
h1:focus { outline: none; box-shadow: none; }
.skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--ball); color: var(--night); padding: .7rem 1rem; font-weight: 600; }
.skip:focus { left: 8px; top: 8px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
.sec { padding-block: clamp(3.4rem, 8vw, 7rem); position: relative; }
.alt { background: var(--sand); }
.sec.dark { background: var(--smoke); color: var(--chalk); }
.h2 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); }
.h3 { font-size: 1.8rem; margin-top: 2.2rem; }
.lead { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); color: var(--muted); margin-top: 1.4rem; max-width: 36rem; }
.sec.dark .lead, .sec.dark p { color: #EBD9CC; }
.note { margin-top: 1.2rem; font-size: .92rem; color: var(--muted); }
.lab { font: 600 .76rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }

/* Petit titre au-dessus des grands titres */
.kicker { display: flex; align-items: center; gap: .8rem; font: 600 .78rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ball); margin: 0 0 1.3rem; }
.kicker span { display: inline-block; }
.kicker::before { content: ""; width: 2.6rem; height: 2px; background: currentColor; }
.kicker.dark { color: var(--clay-deep); }
.sec.dark .kicker { color: var(--ball); }

/* Marqueurs « À compléter » : visibles seulement en mode maquette */
.todo { margin-top: 1.2rem; padding: .7rem 1rem; border: 1px dashed var(--clay); border-radius: 12px; color: var(--clay-deep); font-size: .95rem; max-width: 40rem; background: rgb(200 83 42 / .05); }
.sec.dark .todo { color: #F0B49A; border-color: #F0B49A; background: rgb(255 255 255 / .04); }
.tag { display: inline-block; border: 1px dashed var(--clay); color: var(--clay-deep); border-radius: 6px; padding: .1rem .55rem; font-size: .9rem; font-weight: 500; }
.maq-badge { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 16rem; background: var(--night); color: var(--chalk); border: 1px solid var(--ball); border-radius: 12px; padding: .5rem .8rem; font-size: .76rem; line-height: 1.3; opacity: .92; }

/* Texture de grain (très légère) sur tout le site */
.grain { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: url('../img/grain.svg'); opacity: .06; mix-blend-mode: multiply; }

/* 4) BOUTONS : remplissage au survol, flèche qui glisse, appui qui enfonce */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.1rem; padding: .7rem 1.5rem; border-radius: 999px; border: 2px solid transparent; font: 600 1rem var(--f-body); text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .3s var(--ease), transform .2s var(--ease), border-color .3s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill, var(--ink)); transform: translateY(101%); border-radius: inherit; transition: transform .4s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.btn:hover i { transform: translateX(4px) rotate(-8deg); }
.btn:active { transform: scale(.96); }
.btn-clay { background: var(--clay); color: #fff; --fill: var(--night); }
.btn-ball { background: var(--ball); color: var(--night); --fill: var(--chalk); }
.btn-line { border-color: currentColor; color: var(--ink); --fill: var(--ink); }
.btn-line:hover, .btn-line:focus-visible { color: var(--chalk); border-color: var(--ink); }
.hero .btn-line { color: var(--ink); }
.sec.dark .btn-line { color: var(--chalk); --fill: var(--chalk); }
.sec.dark .btn-line:hover { color: var(--night); border-color: var(--chalk); }
.btn.small { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .95rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: .5rem; align-items: center; border-bottom: 2px solid currentColor; padding-bottom: .1rem; }
.link-arrow i { font-style: normal; transition: transform .3s var(--ease); }
.link-arrow:hover i { transform: translateX(6px); }

/* 5) EN-TÊTE */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: env(safe-area-inset-top, 0px); transition: transform .45s var(--ease), background-color .3s, box-shadow .3s; }
.top { background: rgb(243 236 221 / .93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.top.hide { transform: translateY(-110%); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.6rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand-img { height: 2.5rem; width: auto; }
.brand-t { font: 800 1.5rem/1 var(--f-display); letter-spacing: -.02em; }
.brand-t small { display: block; font: 600 .62rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
nav ul { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 2rem); list-style: none; margin: 0; padding: 0; }
nav a { position: relative; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; padding: .4rem 0; display: inline-block; }
nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--clay); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
nav a:not(.nav-cta):hover::after, nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
nav a.nav-cta { background: var(--ink); color: var(--chalk); padding: .65rem 1.3rem; border-radius: 999px; font-weight: 600; transition: background-color .3s, transform .2s var(--ease); }
nav a.nav-cta:hover { background: var(--clay); transform: translateY(-2px); }
nav a.nav-cta[aria-current="page"] { background: var(--clay); }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--clay); transform: scaleX(0); transform-origin: left; }
.burger { display: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1.5px solid var(--ink); background: none; cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: .85rem; right: .85rem; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 1.05rem; } .burger span:nth-child(2) { top: 1.4rem; } .burger span:nth-child(3) { top: 1.75rem; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.35rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.35rem) rotate(-45deg); }
@media (max-width: 1180px) {
  .burger { display: block; }
  nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--chalk); border-bottom: 1px solid var(--line); display: none; }
  nav.open { display: block; animation: drop .35s var(--ease); }
  nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .4rem var(--gut) 1.2rem; }
  nav li { border-bottom: 1px solid var(--line); }
  nav a { display: block; padding: 1.05rem 0; font: 700 1.5rem var(--f-display); letter-spacing: -.02em; }
  nav a:not(.nav-cta)::after { display: none; }
  nav a.nav-cta { display: inline-block; margin-top: 1rem; font: 600 1rem var(--f-body); padding: .85rem 1.5rem; }
  nav li:last-child { border-bottom: 0; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* 6) RIDEAU DE TRANSITION ENTRE RUBRIQUES */
.curtain { position: fixed; inset: 0; z-index: 140; pointer-events: none; display: grid; grid-template-columns: repeat(3, 1fr); visibility: hidden; }
.curtain i { background: var(--clay); transform: translateY(101%); }
.curtain i:nth-child(2) { background: var(--smoke); }
.curtain i:nth-child(3) { background: var(--ball); }
.curtain.cover, .curtain.leave { visibility: visible; pointer-events: all; }
.curtain.cover i { transform: none; transition: transform .5s var(--ease); }
.curtain.cover i:nth-child(2) { transition-delay: .06s; } .curtain.cover i:nth-child(3) { transition-delay: .12s; }
.curtain.leave i { transform: translateY(-101%); transition: transform .55s var(--ease); }
.curtain.leave i:nth-child(2) { transition-delay: .06s; } .curtain.leave i:nth-child(3) { transition-delay: .12s; }

/* 7) APPARITION AU DÉFILEMENT (dans les deux sens)
   Sans JavaScript ou en mode « moins d'animations », tout reste simplement visible. */
.js:not(.rm) [data-rv] { opacity: 0; transform: translate3d(0, 46px, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js:not(.rm) [data-rv].from-top { transform: translate3d(0, -46px, 0); }
.js:not(.rm) [data-rv].in { opacity: 1; transform: none; }
.js:not(.rm) .bento .tile[data-rv]:nth-child(2), .js:not(.rm) .cards > :nth-child(2) { transition-delay: .08s; }
.js:not(.rm) .bento .tile[data-rv]:nth-child(3), .js:not(.rm) .cards > :nth-child(3) { transition-delay: .16s; }
.js:not(.rm) .bento .tile[data-rv]:nth-child(4) { transition-delay: .24s; }
/* titres : chaque mot monte comme sous un cache */
.ln { display: block; overflow: hidden; padding: .04em .06em .16em 0; margin: -.04em 0 -.16em; }
.js:not(.rm) .mega[data-split] { opacity: 0; transform: translateY(.3em); transition: transform .8s var(--ease), opacity .8s var(--ease); }
.js:not(.rm) .mega[data-split].in { opacity: 1; transform: none; }
.js:not(.rm) .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); }
.js:not(.rm) .mega.in .ln > span, .js:not(.rm) .ln.in > span { transform: none; }
.js:not(.rm) .mega .ln:nth-child(2) > span { transition-delay: .1s; }
.js:not(.rm) .mega .ln:nth-child(3) > span { transition-delay: .2s; }
/* traits de court qui se dessinent */
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js:not(.rm) .draw { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.js:not(.rm) .draw.in { stroke-dashoffset: 0; }
/* parallaxe : l'image se décale légèrement */
[data-par] { --py: 0px; }
img[data-par] { transform: translate3d(0, var(--py), 0) scale(1.14); }
/* page entière : apparition douce */
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
[data-route]:not([hidden]) { animation: viewIn .5s ease both; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .curtain { display: none; } }

/* 8) ACCUEIL */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: 8rem 5rem; overflow: hidden; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero-grid > * { min-width: 0; }
.mega { font-size: clamp(3rem, 1rem + 7.4vw, 8rem); line-height: .92; font-weight: 800; letter-spacing: -.05em; }
.mega em { font-weight: 800; }
.mega.sm { font-size: clamp(2.6rem, 1rem + 5.6vw, 6.4rem); line-height: .96; max-width: 11em; text-wrap: balance; }
.hero-p { font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem); color: var(--muted); margin-top: 2rem; max-width: 30rem; }
.hero .kicker { color: var(--clay-deep); }
.solo > div { max-width: 58rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 920px) {
  .hero { padding-block: 7rem 4rem; min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; }
}

/* accès rapide : les 4 actions les plus utiles, juste sous l'accueil */
.quick { background: var(--smoke); color: var(--chalk); position: relative; z-index: 2; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.q { position: relative; display: grid; gap: .3rem; align-content: start; padding: 2rem 1.6rem 2.2rem; color: var(--chalk); text-decoration: none; border-left: 1px solid rgb(243 236 221 / .16); overflow: hidden; isolation: isolate; transition: color .35s var(--ease); }
.q:first-child { border-left: 0; }
.q::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ball); transform: translateY(101%); transition: transform .45s var(--ease); }
.q:hover, .q:focus-visible { color: var(--night); } .q:hover::before, .q:focus-visible::before { transform: none; }
.q-n { font: 700 .85rem var(--f-display); color: var(--ball); transition: color .35s; } .q:hover .q-n { color: var(--clay-deep); }
.q b { font: 800 clamp(1.3rem, 1rem + .8vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -.03em; margin-top: .5rem; }
.q small { font-size: .98rem; color: #D6C0B2; transition: color .35s; } .q:hover small { color: #4A3027; }
.q i { position: absolute; right: 1.4rem; top: 1.6rem; font-style: normal; font-size: 1.4rem; transition: transform .35s var(--ease); } .q:hover i { transform: translate(4px, -4px); }
@media (max-width: 900px) { .quick-grid { grid-template-columns: 1fr 1fr; } .q:nth-child(3) { border-left: 0; } .q:nth-child(n+3) { border-top: 1px solid rgb(243 236 221 / .16); } }
@media (max-width: 520px) { .quick-grid { grid-template-columns: 1fr; } .q { border-left: 0; border-top: 1px solid rgb(243 236 221 / .16); } .q:first-child { border-top: 0; } }

/* quatre grandes tuiles asymétriques */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(12rem, 20vw, 17rem); gap: 1.1rem; margin-top: 2.8rem; }
.tile { position: relative; overflow: hidden; border-radius: var(--r); color: var(--chalk); text-decoration: none; display: block; background: var(--smoke); }
.t1 { grid-column: span 7; grid-row: span 2; } .t2 { grid-column: span 5; } .t3 { grid-column: span 5; } .t4 { grid-column: span 12; grid-row: span 1; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .5s; }
.tile:hover img { filter: saturate(1.15) brightness(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(30 16 10 / 0) 35%, rgb(30 16 10 / .9)); transition: opacity .4s; }
.tile-n { position: absolute; top: 1rem; left: 1.2rem; z-index: 2; font: 700 1rem var(--f-display); color: var(--ball); }
.tile-t { position: absolute; left: 1.3rem; right: 4.5rem; bottom: 1.2rem; z-index: 2; display: grid; gap: .25rem; transition: transform .4s var(--ease); }
.tile-t b { font: 800 clamp(1.6rem, 1rem + 1.6vw, 2.5rem)/1.05 var(--f-display); letter-spacing: -.03em; }
.tile-t small { font-size: 1rem; color: #EBD9CC; }
.tile-go { position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 2; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ball); color: var(--night); display: grid; place-items: center; font-style: normal; font-size: 1.3rem; transform: scale(.7) rotate(-45deg); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.tile:hover .tile-go, .tile:focus-visible .tile-go { transform: none; opacity: 1; }
.tile:hover .tile-t { transform: translateY(-4px); }
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 13rem; }
  .t1, .t2, .t3, .t4 { grid-column: 1; grid-row: span 1; }
  .tile-go { opacity: 1; transform: none; }
}
.row-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }
.band { background: var(--clay); color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 22rem; height: 22rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / .25); box-shadow: 0 0 0 2.2rem rgb(255 255 255 / .06); }
.band em { color: var(--night); }
.band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; position: relative; z-index: 1; }
.band .h2 { max-width: 20ch; }

/* 9) EN-TÊTE DE CHAQUE PAGE */
.page-head { position: relative; background: var(--smoke); color: var(--chalk); padding-block: clamp(8rem, 16vw, 12rem) clamp(4rem, 8vw, 6.5rem); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), 0 100%); margin-bottom: -3vw; z-index: 1; }
.page-head .wrap { position: relative; z-index: 1; }
.page-head .sub { margin-top: 1.6rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); color: #EBD9CC; max-width: 34rem; }
.court-art { position: absolute; right: -3%; top: 50%; width: min(58rem, 70%); transform: translateY(-50%); opacity: .16; pointer-events: none; }
.court-art path { stroke: var(--chalk); stroke-width: 2.2; }
.page-head + .sec, .page-head + .sec.alt { padding-top: calc(clamp(3.4rem, 8vw, 7rem) + 3vw); }

/* 10) BLOCS DE PAGE : on occupe toute la largeur */
.split-l, .split-r { display: grid; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split-l { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split-r { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 900px) { .split-l, .split-r { grid-template-columns: 1fr; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; margin-top: 2.5rem; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; display: grid; gap: .6rem; align-content: start; transition: transform .35s var(--ease), box-shadow .35s; }
.card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 20px 36px -20px rgb(30 16 10 / .5); }
.card h3 { font-size: 1.6rem; }
.card p { color: var(--muted); }
.date { font: 600 .78rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--clay-deep); }
.addr { font: 700 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.3 var(--f-display); letter-spacing: -.02em; margin-top: 1.4rem; }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem)); gap: 1.6rem; margin-top: 2.5rem; justify-content: start; }
.person img, .avatar { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 999px 999px 14px 14px; background: var(--smoke); color: var(--ball); font: 800 3rem var(--f-display); }
.person h3 { margin-top: 1rem; font-size: 1.4rem; }
.person p { color: var(--muted); font-size: .98rem; }
.people .todo { grid-column: 1 / -1; margin-top: 0; }

/* carte stylisée (le vrai plan s'ouvre dans Google Maps) */
.mapcard { position: relative; border-radius: var(--r); overflow: hidden; background: var(--sand); min-height: 22rem; border: 1px solid var(--line); box-shadow: 0 24px 50px -28px rgb(30 16 10 / .5); }
.mapcard.tall { min-height: 30rem; }
.mapcard svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-r { stroke: var(--paper); stroke-width: 16; stroke-linecap: round; } .map-r.thin { stroke-width: 7; }
.map-pin-halo { fill: rgb(200 83 42 / .22); transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
.map-pin { fill: var(--clay); stroke: var(--paper); stroke-width: 4; }
@keyframes pulse { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.mapcard-t { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: var(--chalk); border-radius: 14px; padding: 1rem 1.2rem; display: grid; gap: .3rem; justify-items: start; box-shadow: 0 10px 24px -10px rgb(30 16 10 / .4); }
.mapcard-t b { font: 800 1.25rem var(--f-display); letter-spacing: -.02em; } .mapcard-t address { color: var(--muted); font-size: 1rem; }
.mapcard-t .btn { margin-top: .5rem; }


/* 11) INTERNATIONAL : le globe */
.globe-sec { overflow: hidden; }
.globe-sec::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 50%, rgb(200 83 42 / .22), transparent 70%); pointer-events: none; }
.globe-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
@media (max-width: 960px) { .globe-grid { grid-template-columns: 1fr; } }
.globe-stage { position: relative; width: 100%; max-width: 48rem; margin-inline: auto; aspect-ratio: 1; }
#globe { display: block; width: 100%; touch-action: pan-y; cursor: grab; border-radius: 50%; }
#globe.grab { cursor: grabbing; }
.globe-hint { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); background: rgb(30 16 10 / .8); border: 1px solid rgb(243 236 221 / .3); color: var(--chalk) !important; padding: .5rem 1rem; border-radius: 999px; font-size: .9rem; pointer-events: none; transition: opacity .5s; white-space: nowrap; }
.globe-hint span { display: inline-block; animation: spin 3s linear infinite; margin-right: .3rem; }
.globe-hint.off { opacity: 0; }
.glist { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid rgb(243 236 221 / .25); }
.glist li { border-bottom: 1px solid rgb(243 236 221 / .25); }
.grow { width: 100%; display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .6rem; text-align: left; padding: 1.1rem .2rem; background: none; border: 0; color: var(--chalk); font: 800 clamp(1.4rem, 1rem + 1vw, 2rem)/1.1 var(--f-display); letter-spacing: -.03em; cursor: pointer; transition: padding .35s var(--ease), color .25s; }
.grow .gn { font: 700 .9rem var(--f-display); color: var(--ball); letter-spacing: 0; }
.grow .ga { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid rgb(243 236 221 / .5); display: grid; place-items: center; font-size: 1.1rem; transition: transform .4s var(--ease), background-color .25s, color .25s; }
.grow:hover { padding-left: .8rem; } .grow:hover .ga { background: var(--chalk); color: var(--night); }
.grow[aria-expanded="true"] { color: var(--ball); } .grow[aria-expanded="true"] .ga { background: var(--ball); color: var(--night); border-color: var(--ball); transform: rotate(45deg); }
.gdetail { display: grid; gap: .7rem; justify-items: start; padding: .2rem .2rem 1.6rem 3.6rem; animation: pop .55s var(--ease); }
.gdetail img { width: 100%; max-width: 26rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.gdetail h3 { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); color: var(--chalk); }
.gdetail p { color: #EBD9CC; }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gp-country { font: 700 .78rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ball); }
.countries { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.4rem; margin-top: 2.5rem; }
.country { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.country:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgb(30 16 10 / .55); }
.country img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.country-b { padding: 1.6rem; display: grid; gap: .6rem; justify-items: start; }
.country-b .gp-country { color: var(--clay-deep); }
.country-b h3 { font-size: 1.8rem; } .country-b p { color: var(--muted); }

/* 12) CONTACT */
.contact { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.contact li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: 1.2rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); transition: transform .3s var(--ease); }
.contact li:hover { transform: translateX(6px); }
.contact .lab { flex-basis: 100%; margin: 0; }
.contact .val { font: 700 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.2 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; color: var(--ink); text-decoration: none; }
.contact a.val { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 5px; }
.copy { margin-left: auto; min-height: 2.5rem; padding: .3rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 600 .9rem var(--f-body); cursor: pointer; transition: background-color .25s, color .25s; }
.copy:hover { background: var(--ink); color: var(--chalk); }
.social { display: inline-flex; align-items: center; min-height: 3rem; padding: .6rem 1.3rem; border-radius: 999px; border: 2px solid var(--ink); color: var(--ink); font-weight: 600; text-decoration: none; transition: background-color .25s, color .25s, transform .2s var(--ease); }
.social:hover { background: var(--clay); border-color: var(--clay); color: #fff; transform: translateY(-3px) rotate(-2deg); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.5rem; max-width: 44rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: center; font-size: 1.3rem; }
.steps li::before { content: counter(s); font: 800 3.6rem/.9 var(--f-display); letter-spacing: -.05em; color: var(--clay); }
.legal { max-width: 46rem; }
.legal p { margin-top: 1rem; color: var(--muted); }
.legal-dl dt { font: 600 .78rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 1.4rem; }
.legal-dl dd { margin: .2rem 0 0; font-size: 1.2rem; }

/* 13) PIED DE PAGE */
.foot { background: var(--night); color: #CDB2A2; padding-block: 4rem 6rem; position: relative; z-index: 2; overflow: hidden; }
.foot a { color: var(--chalk); text-decoration-color: rgb(243 236 221 / .4); }
.foot-big { font: 800 clamp(2.4rem, 1rem + 7vw, 8rem)/.95 var(--f-display); color: var(--chalk); letter-spacing: -.055em; margin: 0 0 3rem; white-space: nowrap; }
.foot-big em { color: var(--clay); }
.foot-row { display: grid; grid-template-columns: auto 1fr auto; gap: 2.5rem; align-items: center; }
.foot-logo { height: 3.8rem; width: auto; background: var(--chalk); padding: .45rem .9rem; border-radius: 12px; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: flex-end; }
.foot .fine { margin-top: 2rem; font-size: .9rem; color: #A98C7C; }
@media (max-width: 820px) { .foot-row { grid-template-columns: 1fr; gap: 1.3rem; } .foot-links { justify-content: flex-start; } .foot-big { white-space: normal; } }

.toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--night); color: var(--chalk); border: 1px solid var(--ball); padding: .7rem 1.2rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 190; font-size: .95rem; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Impression / lecteurs : tout est visible, sans animation */
@media print {
  .top, .curtain, .grain, .maq-badge, .toast { display: none !important; }
  [data-rv], .ln > span, .draw { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}

/* Entrée de l'accueil : animation unique au chargement (pas liée au défilement) */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.js:not(.rm) .fx { animation: rise 1s var(--ease) both; animation-delay: var(--d, .5s); }
.maq-badge { pointer-events: none; }
.fx.fx2 { --d: .75s; } .hero-p.fx { --d: .65s; }

/* version sans photos : les tuiles de l'accueil sont colorées */
.tile.t1 { background: var(--clay-deep); } .tile.t2 { background: var(--smoke); } .tile.t3 { background: var(--clay); } .tile.t4 { background: var(--night); }
.tile::after { background: linear-gradient(180deg, rgb(255 255 255 / 0) 55%, rgb(0 0 0 / .22)); }
.tile::before { content: ""; position: absolute; z-index: 1; width: min(58%, 22rem); aspect-ratio: 1; right: -9%; top: -26%; border-radius: 50%; border: 2px solid rgb(243 236 221 / .2); box-shadow: 0 0 0 1.6rem rgb(243 236 221 / .05), 0 0 0 3.2rem rgb(243 236 221 / .03); transition: transform .7s var(--ease); }
.tile:hover::before { transform: scale(1.12) translate(-3%, 4%); }
.tile.t4::before { right: 6%; top: -40%; }


/* ===== VERSION « IMPACT » : terre battue pleine page ===== */
.hero { background: #B8481F; color: var(--chalk); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { grid-template-columns: 1fr; }
.hero-text { max-width: 44rem; }
.hero .kicker { color: var(--ball); }
.hero .kicker::before { background: var(--ball); }
.hero h1 { color: #FAF6EC; text-shadow: 0 4px 0 rgb(90 30 10 / .3); }
.hero .mega em, .hero em { color: var(--ball); }
.hero-p { color: #FAF6EC; }
.hero .btn-clay { background: var(--night); color: var(--chalk); --fill: var(--ball); }
.hero .btn-clay:hover { color: var(--night); }
.hero .btn-line { color: var(--chalk); border-color: var(--chalk); --fill: var(--chalk); }
.hero .btn-line:hover { color: var(--night); }
.page-head { background: #B8481F url(../img/grain.svg); }
.page-head .sub { color: #FAF6EC; }
@keyframes wipe { from { transform: translateX(-12%); opacity: 0; } to { transform: none; opacity: .92; } }
@keyframes impact { from { transform: scale(.1); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes dot { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.js:not(.rm) .ib-line { animation: wipe 1.1s var(--ease) .15s both; }
.js:not(.rm) .ib-mark { transform-box: fill-box; transform-origin: center; animation: impact 1s cubic-bezier(.2,.8,.2,1) 1.7s both; }
.js:not(.rm) .dt { transform-box: fill-box; transform-origin: center; animation: dot .35s ease-out both; }
.js:not(.rm) .ib-ball { animation: hop 2.8s ease-in-out 2.6s infinite; }
@media (max-width: 900px) { .hero { padding-block: 7rem 23rem; } .hero-bg { top: auto; height: 22rem; } }
.d50 { animation-delay: 0.50s !important; }
.d62 { animation-delay: 0.62s !important; }
.d74 { animation-delay: 0.74s !important; }
.d86 { animation-delay: 0.86s !important; }
.d98 { animation-delay: 0.98s !important; }
.d110 { animation-delay: 1.10s !important; }
.d122 { animation-delay: 1.22s !important; }
.d134 { animation-delay: 1.34s !important; }
/* ===== COACH TCJ : l'assistant du site ===== */
.coach { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; font-family: var(--f-body); }
.coach-btn { position: relative; width: 4.6rem; height: 4.6rem; border: 0; padding: 0; border-radius: 50%; background: var(--ball); box-shadow: 0 14px 30px -10px rgb(0 0 0 / .55), inset 0 0 0 3px var(--night); cursor: pointer; transition: transform .3s var(--ease); }
.coach-btn:hover { transform: translateY(-3px) rotate(-4deg); }
.coach-btn:focus-visible, .coach-x:focus-visible, .coach-form button:focus-visible, .coach-chips button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.coach-av { position: absolute; left: 50%; bottom: -.2rem; width: 5.6rem; height: 5.9rem; transform: translateX(-50%); overflow: visible; pointer-events: none; }
.coach-dot { position: absolute; top: .15rem; right: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--clay); border: 2px solid var(--chalk); }
.js:not(.rm) .coach-av { animation: coachbob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes coachbob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
.coach.open .coach-btn { display: none; }
.coach-tease { position: absolute; right: 5.4rem; bottom: 1.1rem; width: max-content; max-width: 14rem; background: var(--ink); color: var(--chalk); padding: .7rem 1rem; border-radius: 16px 16px 4px 16px; font-size: .95rem; line-height: 1.3; box-shadow: 0 12px 28px -10px rgb(0 0 0 / .5); opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; transition: opacity .35s, transform .35s var(--ease); }
.coach-tease.on { opacity: 1; transform: none; }
.coach-panel { width: min(24rem, calc(100vw - 32px)); height: min(36rem, calc(100vh - 32px)); height: min(36rem, calc(100dvh - 32px)); display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px -20px rgb(0 0 0 / .6), 0 0 0 1px rgb(0 0 0 / .08); transform-origin: 100% 100%; }
.coach-panel:not([hidden]) { animation: coachin .4s var(--ease); }
@keyframes coachin { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.coach-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; background: var(--night); color: var(--chalk); position: relative; }
.coach-hav { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--ball); position: relative; flex: none; }
.coach-av2 { position: absolute; left: 50%; bottom: -.1rem; width: 3.7rem; height: 3.9rem; transform: translateX(-50%); overflow: visible; }
.coach-ht { display: grid; line-height: 1.2; min-width: 0; }
.coach-ht b { font: 800 1.1rem var(--f-display); letter-spacing: -.02em; }
.coach-ht small { font-size: .78rem; color: #CDB2A2; }
.coach-x { margin-left: auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .25); background: transparent; color: var(--chalk); cursor: pointer; font-size: 1rem; }
.coach-x:hover { background: rgb(255 255 255 / .12); }
.coach-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--chalk); scroll-behavior: smooth; }
.msg { max-width: 88%; padding: .65rem .9rem; border-radius: 16px; font-size: .96rem; line-height: 1.45; animation: coachmsg .35s var(--ease) both; }
@keyframes coachmsg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg p { margin: 0; }
.msg.bot { align-self: flex-start; background: var(--paper); border: 1px solid rgb(0 0 0 / .07); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--clay); color: #fff; border-bottom-right-radius: 4px; }
.msg-steps { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.msg-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.msg-links a { display: inline-block; padding: .4rem .8rem; border-radius: 999px; background: var(--ink); color: var(--chalk); text-decoration: none; font-size: .86rem; font-weight: 600; }
.msg-links a:hover { background: var(--clay); }
.msg-links a:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.msg-links i { font-style: normal; }
.msg.typing { display: flex; gap: .3rem; padding: .85rem 1rem; }
.msg.typing span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); animation: coachdot 1s ease-in-out infinite; }
.msg.typing span:nth-child(2) { animation-delay: .15s; } .msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes coachdot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.coach-chips { display: flex; gap: .4rem; padding: .6rem 1rem; overflow-x: auto; background: var(--chalk); border-top: 1px solid rgb(0 0 0 / .06); scrollbar-width: none; }
.coach-chips::-webkit-scrollbar { display: none; }
.coach-chips button { flex: none; padding: .45rem .85rem; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 600 .85rem var(--f-body); cursor: pointer; white-space: nowrap; }
.coach-chips button:hover { background: var(--ball); }
.coach-form { display: flex; gap: .5rem; padding: .7rem 1rem; background: var(--paper); border-top: 1px solid rgb(0 0 0 / .08); }
.coach-form input { flex: 1; min-width: 0; padding: .7rem 1rem; border-radius: 999px; border: 1.5px solid rgb(0 0 0 / .2); background: #fff; font: 1rem var(--f-body); color: var(--ink); }
.coach-form input:focus { outline: 3px solid var(--ball); border-color: var(--ink); }
.coach-form button { width: 2.9rem; border-radius: 50%; border: 0; background: var(--clay); color: #fff; font-size: 1.2rem; cursor: pointer; }
.coach-form button:hover { background: var(--clay-deep); }
.coach-foot { margin: 0; padding: 0 1rem .7rem; font-size: .72rem; color: var(--muted); background: var(--paper); text-align: center; }
@media (max-width: 640px) { .coach-tease { display: none; } .coach.open { right: 8px; bottom: 8px; } .coach-panel { width: calc(100vw - 16px); height: min(40rem, calc(100vh - 16px)); height: min(40rem, calc(100dvh - 16px)); } .coach-form input { font-size: 16px; } }
.rm .coach-panel, .rm .msg, .rm .coach-tease { animation: none; transition: none; }
@media print { .coach { display: none; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.coach-dot { display: none; }

/* ===== Rubriques de l'accueil : petites scènes de tennis dessinées ===== */
.tile::before { display: none; }
.tile-art { position: absolute; z-index: 1; right: 4%; top: 6%; height: 70%; aspect-ratio: 1; overflow: visible; pointer-events: none; transition: transform .6s var(--ease); }
.tile-art .st, .tile-art .ct path:not(.net) { fill: none; stroke: #F3ECDD; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tile-art .strg { stroke: #F3ECDD; }
.tile-art ellipse.st { stroke: #F3ECDD; }
.tile-art .bl, .tile-art .rk, .tile-art .tr, .tile-art .ct, .tile-art .orb, .tile-art .cf { transform-box: fill-box; transform-origin: center; }
.tile:hover .tile-art { transform: scale(1.06) rotate(-2deg); }
@keyframes tbounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-14px); } 70% { transform: translateY(0); } 85% { transform: translateY(-4px); } }
@keyframes tspin { to { transform: rotate(360deg); } }
@keyframes tsway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes tpop { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-6px) scale(1.25); opacity: .6; } }
.js:not(.rm) .tile-art .bl { animation: tbounce 2.8s ease-in-out infinite; }
.js:not(.rm) .tile-art .b2 { animation-delay: .25s; } .js:not(.rm) .tile-art .b3 { animation-delay: .5s; }
.js:not(.rm) .tile-art .orb { animation: tspin 36s linear infinite; }
.js:not(.rm) .tile:hover .tile-art .orb { animation-duration: 8s; }
.js:not(.rm) .tile:hover .tile-art .rk { animation: tsway 1s ease-in-out infinite; transform-origin: 50% 90%; }
.js:not(.rm) .tile:hover .tile-art .cf circle, .js:not(.rm) .tile:hover .tile-art .cf rect { animation: tpop .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.js:not(.rm) .tile-art .st, .js:not(.rm) .tile-art .ct path:not(.net) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.js:not(.rm) .tile.in .tile-art .st, .js:not(.rm) .tile.in .tile-art .ct path:not(.net) { stroke-dashoffset: 0; }
@media (max-width: 760px) { .tile-art { height: 62%; right: 3%; top: 4%; } }

/* ===== Accueil : « Suivez-nous » et réseaux sociaux ===== */
.suivez-wrap { margin-top: 3rem; }
.suivez { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.sn { position: relative; display: inline-flex; align-items: center; gap: 1rem; padding: .7rem 1.6rem .7rem .7rem; border-radius: 999px; border: 2px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.sn:hover, .sn:focus-visible { background: var(--clay); border-color: var(--clay); color: var(--chalk); transform: translateY(-4px) rotate(-1.5deg); }
.sn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sn-i { position: relative; width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--chalk); transition: background-color .35s var(--ease), color .35s var(--ease), transform .5s var(--ease); }
.sn:hover .sn-i, .sn:focus-visible .sn-i { background: var(--ball); color: var(--night); transform: rotate(-12deg) scale(1.06); }
.sn-i svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sn-t { display: grid; text-align: left; line-height: 1.15; }
.sn-t b { font: 800 1.25rem var(--f-display); letter-spacing: -.02em; }
.sn-t small { font-size: .85rem; opacity: .75; }
.sn.off { border-style: dashed; border-color: var(--clay); }
.sn.off .sn-i { background: var(--clay); }
.sn.off:hover .sn-i { background: var(--ball); }
.sn-i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--ball); opacity: 0; pointer-events: none; }
.sn.pop .sn-i { animation: snpop .6s var(--ease); }
.sn.pop .sn-i::after { animation: snring .7s ease-out; }
.sn-p { position: absolute; left: 50%; top: 50%; width: .6rem; height: .6rem; margin: -.3rem 0 0 -.3rem; border-radius: 50%; background: var(--ball); box-shadow: inset 0 0 0 1.5px var(--night); pointer-events: none; animation: snburst .75s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes snpop { 0% { transform: scale(1); } 30% { transform: scale(.78) rotate(-14deg); } 65% { transform: scale(1.22) rotate(8deg); } 100% { transform: scale(1); } }
@keyframes snring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@keyframes snburst { from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.3); opacity: 0; } }
@media (max-width: 520px) { .suivez { flex-direction: column; } .sn { width: 100%; } }
.rm .sn, .rm .sn-i { transition: none; }
.hero-p { max-width: 42rem; }

/* ===== Mise à jour contenu : Le club, Enseignements, Vie du club, équipes, dons ===== */
.lead.wide { max-width: 52rem; }
.mt { margin-top: 2.4rem; }
.h3.mt { margin-top: 2.6rem; }
.stars { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem; padding: 0; margin: 1.6rem 0 0; }
.stars li { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.2rem; border: 2px solid var(--clay); border-radius: 14px; font: 700 1.05rem var(--f-display); color: var(--clay-deep); background: var(--paper); }
.stars svg { width: 1.4rem; height: 1.4rem; fill: var(--ball); stroke: var(--night); stroke-width: 1.4; stroke-linejoin: round; }
.sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.4rem; margin-top: 2.5rem; }
.site { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.8rem; border-top: 6px solid var(--clay); }
.site h3 { font-size: 1.7rem; }
.site-a { color: var(--muted); margin-top: .3rem; }
.ticks { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.7rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: .8rem; height: .8rem; border-radius: 50%; background: var(--ball); box-shadow: inset 0 0 0 2px var(--night); }
.people + .h3, .people { margin-bottom: 0; }
.acces { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.acces-i b { font: 800 1.3rem var(--f-display); }
.addr.s { font-size: 1.15rem; margin-top: .3rem; font-weight: 600; }
.actions.tight { margin-top: .8rem; }
.btn.small { padding: .6rem 1.1rem; font-size: .95rem; }
.transports { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.transports li { padding: .45rem 1rem; border-radius: 999px; background: var(--ink); color: var(--chalk); font-weight: 600; font-size: 1rem; }
.transports li:last-child { background: var(--clay); }
.mapcard-t address { margin-top: .5rem; font-style: normal; }

.speeds { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.speeds li { display: inline-flex; align-items: center; gap: .7rem; padding: .6rem 1.3rem .6rem .6rem; border-radius: 999px; background: var(--ink); color: var(--chalk); font: 700 1.2rem var(--f-display); }
.speeds .n { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ball); color: var(--night); font-size: 1rem; }
.publics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.2rem; margin-top: 2.4rem; }
.pub { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; border-left: 6px solid var(--clay); }
.pub h3 { font-size: 1.6rem; }
.pub .age { margin-top: .4rem; color: var(--clay-deep); font-weight: 700; font-size: 1.15rem; }
.elite { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.elite-i { background: var(--smoke); color: var(--chalk); border-radius: var(--r); padding: 1.8rem; }
.elite-i b { font: 800 1.5rem var(--f-display); color: var(--ball); }
.elite-i p { margin-top: .6rem; color: #EBD9CC; }
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.4rem; margin-top: 2.2rem; }
.contact-i { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; }
.contact-i h3 { font-size: 1.35rem; }
.contact-i .btn { max-width: 100%; overflow-wrap: anywhere; }


.promo { margin-top: 2rem; }
.sponsors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.1rem; margin-top: 1.6rem; }
.sp { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; display: grid; gap: .5rem; align-content: start; justify-items: start; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.sp:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgb(30 16 10 / .55); }
.sp h3 { font-size: 1.35rem; }
.sp p { color: var(--muted); font-size: 1rem; }
.sp-l { font-weight: 700; color: var(--clay-deep); display: inline-flex; gap: .4rem; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.don { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); margin-top: 2.6rem; align-items: start; }
@media (max-width: 900px) { .don { grid-template-columns: 1fr; } }
.panel { background: var(--smoke); color: var(--chalk); border-radius: 24px; padding: clamp(1.4rem, 3vw, 2.4rem); }
.seg { display: inline-flex; padding: .3rem; border-radius: 999px; background: rgb(255 255 255 / .1); margin-bottom: 1.6rem; }
.seg button { font: 700 1rem var(--f-display); border: 0; padding: .6rem 1.4rem; border-radius: 999px; background: transparent; color: var(--chalk); cursor: pointer; transition: background-color .3s var(--ease), color .3s; }
.seg button[aria-pressed="true"] { background: var(--ball); color: var(--night); }
.seg button:focus-visible { outline: 3px solid var(--ball); outline-offset: 2px; }
.panel .lab { display: block; color: #CDB2A2; font-size: .95rem; }
.amount { font: 800 clamp(3rem, 8vw, 5rem)/1 var(--f-display); letter-spacing: -.04em; color: var(--ball); margin: .3rem 0 1rem; }
#donAmt { width: 100%; accent-color: var(--ball); height: 2rem; cursor: pointer; }
.res { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.res > div { background: rgb(255 255 255 / .08); border-radius: 14px; padding: 1rem 1.2rem; }
.res .good { background: var(--ball); color: var(--night); }
.res small { display: block; font-size: .9rem; opacity: .85; }
.res b { font: 800 1.9rem var(--f-display); letter-spacing: -.03em; }
.panel .note { color: #CDB2A2; }
.don .steps { margin-top: 1.2rem; }
.don .steps li { grid-template-columns: 3.4rem 1fr; font-size: 1.15rem; }
.don .steps li::before { font-size: 2.8rem; }

/* ===== v4.1 : interactions, élite "en plus", transports cliquables ===== */
.speeds li, .stars li, .pub, .elite-i, .contact-i, .site { transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s, color .3s; cursor: default; }
.speeds li:hover { transform: translateY(-4px) rotate(-1.5deg); background: var(--clay); }
.stars li:hover { transform: translateY(-4px) rotate(1deg); background: var(--ball); box-shadow: 0 12px 22px -14px rgb(30 16 10 / .6); }
.stars li:hover svg { animation: spinstar .6s var(--ease); }
@keyframes spinstar { to { transform: rotate(360deg) scale(1.2); } }
.pub:hover, .contact-i:hover, .site:hover { transform: translateY(-5px); box-shadow: 0 18px 34px -22px rgb(30 16 10 / .55); }
.elite-i:hover { transform: translateY(-5px); }
.transports a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem; border-radius: 999px; background: var(--ink); color: var(--chalk); font-weight: 600; text-decoration: none; transition: background-color .3s, transform .3s var(--ease), color .3s; }
.transports a:hover, .transports a:focus-visible { background: var(--clay); transform: translateY(-3px) rotate(-1deg); }
.transports a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.transports li { padding: 0; background: none; }
.transports li.plain { padding: .45rem 1rem; background: var(--clay); color: #fff; border-radius: 999px; font-weight: 600; }
.btn .ic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.btn .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .ic { animation: wiggle .5s var(--ease); }
@keyframes wiggle { 30% { transform: rotate(-14deg) scale(1.15); } 70% { transform: rotate(10deg) scale(1.15); } }
.btn:active, .copy:active, .sn:active, .seg button:active { transform: scale(.96); }
.contact .addr-b { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.contact .addr-b .copy { margin-left: 0; text-decoration: none; display: inline-flex; align-items: center; }
.rm .speeds li, .rm .stars li, .rm .transports a { transition: none; }

/* ===== Élite : bloc propre, aligné ===== */
.lad2 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.2rem; margin-top: 1.4rem; }
.lad-g { display: grid; gap: .55rem; }
.lad-l { margin: 0; font: 700 .78rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lad-l.clay { color: var(--clay-deep); }
.lad-r { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0; }
.lad-r li, .lad-e { display: inline-flex; align-items: center; gap: .6rem; height: 3.2rem; padding: 0 1.3rem 0 .6rem; border-radius: 999px; font: 700 1.1rem var(--f-display); margin: 0; transition: transform .3s var(--ease), background-color .3s, box-shadow .3s; }
.lad-r li { background: var(--ink); color: var(--chalk); }
.lad-r li span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ball); color: var(--night); font-size: .95rem; }
.lad-e { background: var(--clay); color: #fff; padding-left: 1.3rem; box-shadow: 0 0 0 3px var(--chalk), 0 0 0 5px var(--clay); }
.lad-e span { color: var(--ball); font-size: 1.15rem; }
.lad-plus { height: 3.2rem; display: grid; place-items: center; font: 800 2rem/1 var(--f-display); color: var(--clay-deep); }
.lad-r li:hover { transform: translateY(-4px); background: var(--clay); }
.lad-e:hover { transform: translateY(-4px) scale(1.04); background: var(--clay-deep); }
@media (max-width: 640px) { .lad2 { gap: .8rem; } .lad-plus { height: auto; width: 100%; justify-content: start; } }
.rm .lad-r li, .rm .lad-e { transition: none; }

/* ===== Newsletter, rendez-vous, PlayN'co, promo Dolce ===== */
.zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; overflow: hidden; }
.zoom img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease); }
.zoom:hover img, .zoom:focus-visible img { transform: scale(1.04); }
.zoom:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.zoom-i { position: absolute; right: .6rem; bottom: .6rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--chalk); font-size: 1.1rem; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .3s var(--ease); }
.zoom:hover .zoom-i, .zoom:focus-visible .zoom-i { opacity: 1; transform: none; }
@media (hover: none) { .zoom-i { opacity: .9; transform: none; } }
.nl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.6rem; }
.nl-head h3 { font-size: 1.6rem; }
.nl-head .actions { margin-top: 0; }
.nl-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.2rem; margin-top: 2rem; }
.nl-p, .rdv-i { margin: 0; }
.nl-p .zoom, .rdv-i .zoom { box-shadow: 0 18px 34px -22px rgb(30 16 10 / .6); border: 1px solid var(--line); }
.nl-p figcaption, .rdv-i figcaption { margin-top: .6rem; font: 700 1rem var(--f-display); color: var(--muted); }
.rdv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.4rem; margin-top: 2rem; }
.rdv-i figcaption { color: var(--clay-deep); }

.playnco { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(1.6rem, 5vw, 4rem); align-items: center; margin-top: 2rem; }
@media (max-width: 820px) { .playnco { grid-template-columns: 1fr; } }
.pn-t { display: grid; gap: 1rem; justify-items: start; }
.pn-t h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.pn-t .lead { margin-top: 0; }
.pn-logo { width: 7.5rem; height: 7.5rem; border-radius: 50%; box-shadow: 0 14px 28px -14px rgb(30 16 10 / .7); transition: transform .5s var(--ease); }
.pn-logo:hover { transform: rotate(-8deg) scale(1.06); }
.pn-date { display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--ball); font: 700 1.05rem var(--f-display); margin: 0; }
.pn-affiche { max-width: 26rem; justify-self: end; width: 100%; }
@media (max-width: 820px) { .pn-affiche { justify-self: start; } }
.pn-affiche .zoom { border-radius: 18px; box-shadow: 0 26px 46px -24px rgb(30 16 10 / .8); }

.promo-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; background: var(--smoke); color: var(--chalk); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.6rem); }
@media (max-width: 760px) { .promo-c { grid-template-columns: 1fr; } .promo-aff { max-width: 14rem; } }
.promo-b { display: grid; gap: .9rem; justify-items: start; }
.promo-logo { width: 11rem; height: auto; }
.promo-b h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); color: var(--ball); }
.promo-b p { color: #EBD9CC; }
.promo-b .gp-country { color: var(--ball); }
.offres { list-style: none; padding: 0; margin: .3rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; width: 100%; }
.offres li { display: grid; gap: .1rem; padding: .9rem 1.1rem; border-radius: 14px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .15); transition: transform .3s var(--ease), background-color .3s; }
.offres li:hover { transform: translateY(-4px); background: rgb(255 255 255 / .14); }
.offres b { font: 800 2.2rem/1 var(--f-display); color: var(--ball); letter-spacing: -.03em; }
.offres span { color: #EBD9CC; font-size: .98rem; }
.promo-b .promo-cond { font-weight: 600; color: var(--chalk); }
.promo-b .btn-line { color: var(--chalk); --fill: var(--chalk); }
.promo-b .btn-line:hover { color: var(--night); border-color: var(--chalk); }
.promo-aff .zoom { border-radius: 12px; box-shadow: 0 20px 36px -20px rgb(0 0 0 / .8); }

/* visionneuse */
/* .lb : défini plus bas */
.lb-cap { position: absolute; left: 0; right: 0; bottom: .9rem; text-align: center; color: #EBD9CC; font-size: .98rem; margin: 0; padding-inline: 4rem; }
.lb-b { position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--chalk); background: rgb(30 16 10 / .6); color: var(--chalk); font: 700 1.2rem var(--f-display); cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--ease); }
.lb-b:hover, .lb-b:focus-visible { background: var(--ball); color: var(--night); transform: scale(1.1); outline: none; }
.lb-x { top: .8rem; right: .8rem; }
.lb-p { left: .8rem; top: 50%; margin-top: -1.5rem; }
.lb-n { right: .8rem; top: 50%; margin-top: -1.5rem; }
.lb-open { overflow: hidden; }
.rm .zoom img, .rm .zoom-i, .rm .offres li { transition: none; }
.nl-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rdv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .nl-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rdv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .rdv { grid-template-columns: repeat(5, minmax(0, 1fr)); } .nl-pages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } }

/* visionneuse v2 : défilement dans tous les sens, zoom, balayage */
.lb { position: fixed; inset: 0; z-index: 300; background: rgb(20 10 6 / .94); }
.lb[hidden] { display: none; }
.lb-fig { position: absolute; inset: 3.9rem 0 3.2rem; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-color: var(--clay) transparent; }
.lb-fig.grab { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.lb-fig img { display: block; width: min(100%, 56rem); max-width: none; height: auto; margin-inline: auto; border-radius: 6px; cursor: zoom-in; }
.lb.zoomed .lb-fig img { width: calc(min(100%, 56rem) * 2.2); cursor: grab; }
@media (max-width: 700px) { .lb.zoomed .lb-fig img { width: 230%; } }
.lb-fig img.in-r { animation: lbr .35s var(--ease); } .lb-fig img.in-l { animation: lbl .35s var(--ease); }
@keyframes lbr { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes lbl { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 3.2rem; display: grid; place-items: center; text-align: center; color: #EBD9CC; font-size: .98rem; margin: 0; padding-inline: 1rem; }
.lb-b { z-index: 2; position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--chalk); background: rgb(30 16 10 / .75); color: var(--chalk); font: 700 1.3rem var(--f-display); cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--ease); padding: 0; }
.lb-b:hover, .lb-b:focus-visible { background: var(--ball); color: var(--night); transform: scale(1.1); outline: none; }
.lb-x { top: .6rem; right: .8rem; } .lb-z { top: .6rem; left: .8rem; }
.lb-p { left: .8rem; top: 50%; margin-top: -1.5rem; } .lb-n { right: .8rem; top: 50%; margin-top: -1.5rem; }
@media (max-width: 700px) { .lb-p, .lb-n { top: auto; bottom: .1rem; margin: 0; width: 2.8rem; height: 2.8rem; } .lb-p { left: 1rem; } .lb-n { right: 1rem; } }
.rm .lb-fig img { animation: none !important; }
.lb { background: rgb(20 10 6 / .98); }
.lb-open .maq-badge, .lb-open .toast, .lb-open [class^="coach"], .lb-open [id^="coach"]:not(svg) { display: none !important; }

/* ===== Nos équipes, tournois, films, formulaire ===== */
.team-hero, .tourn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .team-hero, .tourn { grid-template-columns: 1fr; } .tourn-photo { order: -1; } }
.team-photo img, .tourn-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); box-shadow: 0 30px 50px -30px rgb(30 16 10 / .7); }
.team-photo, .tourn-photo { position: relative; }
.team-photo .ph::after, .tourn-photo .ph::after { content: ""; position: absolute; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--ball); right: -1.2rem; bottom: -1.2rem; z-index: -1; }
.tourn-photo .ph::after { right: auto; left: -1.2rem; background: var(--clay); }
.eq-stats { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .eq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eq-stats li { background: var(--smoke); color: var(--chalk); border-radius: var(--r); padding: 1.3rem 1.4rem; display: grid; gap: .2rem; transition: transform .3s var(--ease), background-color .3s; }
.eq-stats li:hover { transform: translateY(-5px) rotate(-1deg); background: var(--clay); }
.eq-stats b { font: 800 clamp(2.6rem, 2rem + 2.4vw, 4rem)/1 var(--f-display); letter-spacing: -.04em; color: var(--ball); }
.eq-stats span { font: 600 1rem var(--f-display); }
.eq-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; margin-top: 1.3rem; align-items: start; }
@media (max-width: 860px) { .eq-groups { grid-template-columns: 1fr; } }
.eq { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.3rem, 2.5vw, 2rem); border-top: 6px solid var(--clay); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.eq:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -24px rgb(30 16 10 / .55); }
.eq h3 { font-size: 1.7rem; }
.eq-s { display: inline-flex; align-items: center; gap: .5rem; margin: 1.3rem 0 0; font: 700 .78rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.eq-s::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ink); }
.eq-s.printemps::before { background: var(--ball); box-shadow: inset 0 0 0 2px var(--night); }
.eq-l { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .5rem; }
.eq-l li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .9rem; align-items: center; padding: .55rem .9rem .55rem .55rem; border-radius: 14px; background: rgb(30 16 10 / .045); transition: background-color .3s, transform .3s var(--ease); }
.eq-l li:hover { background: rgb(30 16 10 / .09); transform: translateX(4px); }
.eq-n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ink); color: var(--chalk); font: 800 1.15rem var(--f-display); }
.eq-t { display: grid; }
.eq-t b { font: 700 1.1rem var(--f-display); }
.eq-t small { color: var(--muted); font-size: .92rem; }
.eq-l li.star { background: var(--clay); color: #fff; }
.eq-l li.star:hover { background: var(--clay-deep); }
.eq-l li.star .eq-n { background: var(--ball); color: var(--night); }
.eq-l li.star small { color: #FFE9DD; }
.eq-star { color: var(--ball); font-size: 1.3rem; }
.tourn-l { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .8rem; }
.tourn-l li { display: grid; gap: .1rem; padding: 1rem 1.2rem 1rem 1.4rem; border-left: 6px solid var(--clay); background: var(--paper); border-radius: 0 14px 14px 0; transition: transform .3s var(--ease), border-color .3s; }
.tourn-l li:hover { transform: translateX(6px); border-left-color: var(--ball); }
.tourn-l b { font: 800 1.3rem var(--f-display); }
.tourn-l span { color: var(--muted); }
.tourn-i { margin: 1.6rem 0 0; font: 700 1.15rem var(--f-display); }

.film { margin-top: 2.2rem; }
.film-box { margin: 0 auto; max-width: 62rem; }
.film-box video { display: block; width: 100%; height: auto; border-radius: var(--r); background: #000; box-shadow: 0 40px 70px -40px #000; }
.film-box figcaption { margin-top: .9rem; color: #EBD9CC; font: 600 1rem var(--f-display); text-align: center; }

.formu { margin-top: 2.4rem; }
.formu-c { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--clay); border-radius: var(--r); padding: clamp(1.2rem, 2.5vw, 1.8rem); max-width: 52rem; }
@media (max-width: 560px) { .formu-c { grid-template-columns: 1fr; } .formu-th { max-width: 9rem; } }
.formu-th .zoom { border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 26px -18px rgb(30 16 10 / .6); transform: rotate(-3deg); transition: transform .4s var(--ease); }
.formu-c:hover .formu-th .zoom { transform: rotate(0deg) scale(1.03); }
.formu-b { display: grid; gap: .5rem; justify-items: start; }
.formu-b h3 { font-size: 1.6rem; }
.formu-b p { color: var(--muted); margin: 0; }
.formu-b .gp-country { color: var(--clay-deep); }
.rm .eq-stats li, .rm .eq, .rm .eq-l li, .rm .tourn-l li, .rm .formu-th .zoom { transition: none; }

.elite-i.with-logo { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 1.4rem; align-items: center; }
@media (max-width: 520px) { .elite-i.with-logo { grid-template-columns: 1fr; } .cf2v-logo { max-width: 11rem; } }
.cf2v-logo { display: block; width: 100%; height: auto; border-radius: 14px; transition: transform .4s var(--ease); }
.elite-i.with-logo:hover .cf2v-logo { transform: scale(1.05) rotate(-2deg); }

.cf2v-logo { border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 3px var(--smoke), 0 0 0 5px var(--ball); }
.elite-i.with-logo { grid-template-columns: minmax(6.5rem, 9.5rem) minmax(0, 1fr); }
@media (max-width: 520px) { .elite-i.with-logo { grid-template-columns: 1fr; } .cf2v-logo { max-width: 9rem; } }

/* réseaux : compte "arrive bientôt" ; logos des partenaires */
.sn.soon { border-style: dashed; border-color: var(--muted); opacity: .85; cursor: default; }
.sn.soon .sn-i { background: var(--muted); }
.sn.soon small { color: var(--clay-deep); font-weight: 700; }
.sn small { overflow-wrap: anywhere; }
.sp-logo { width: 100%; height: 5rem; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; margin-bottom: .4rem; }
.sp-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .35s var(--ease); }
.sp:hover .sp-logo img { transform: scale(1.06); }

/* ===== Photos du club ===== */
.ph { position: relative; display: block; }
.ph-fig { margin: 0; }
.team-photo img { aspect-ratio: 4 / 5; object-position: 50% 88%; }
.team-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 860px) { .team-hero { grid-template-columns: 1fr; } .team-photo { max-width: 30rem; } }
.ph-fig figcaption { margin-top: 1rem; padding-left: 1rem; border-left: 4px solid var(--clay); font: 700 1.05rem/1.35 var(--f-display); color: var(--ink); }
.gal { display: grid; gap: 1rem; margin-top: 2.2rem; }
.gal-i .zoom { height: 100%; border-radius: var(--r); box-shadow: 0 24px 40px -28px rgb(30 16 10 / .7); }
.gal-i .zoom img { width: 100%; height: 100%; object-fit: cover; }
.gal.trio { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: 1fr 1fr; height: clamp(22rem, 46vw, 38rem); }
.gal.trio .gal-i:first-child { grid-row: 1 / 3; }
.gal.trio .gal-i:first-child img { object-position: 50% 62%; }
@media (max-width: 640px) {
  .gal.trio { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .gal.trio .gal-i:first-child { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 4 / 3; }
  .gal.trio .gal-i { aspect-ratio: 1; }
}
.gal-i { min-height: 0; min-width: 0; }
.gal.trio { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 640px) { .gal.trio { grid-template-rows: auto; } }
.gal { align-items: stretch; }
.gal.trio .gal-i { height: 100%; overflow: hidden; border-radius: var(--r); }
@media (max-width: 640px) { .gal.trio .gal-i { height: auto; } }

/* ===== Enseignements : photos intégrées à la mise en page ===== */
.ens-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ens-top .publics { grid-template-columns: 1fr; gap: .8rem; margin-top: 2rem; }
.ens-top .pub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.5rem; padding: 1.1rem 1.5rem; }
.ens-top .pub h3 { font-size: 1.45rem; }
.ens-top .pub .age { margin-top: 0; }
.ph-one { position: relative; }
.ph-one .zoom { border-radius: var(--r); box-shadow: 0 34px 56px -32px rgb(30 16 10 / .75); }
.ens-ph .ph-one::before { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; border-radius: var(--r); background: var(--clay); z-index: -1; }
.ens-ph .ph-one::after { content: ""; position: absolute; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--ball); left: -1.6rem; top: -1.6rem; z-index: -1; }
.ens-ph .zoom img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 35%; }
.ens-elite { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ens-ph2 .zoom img { aspect-ratio: 3 / 2; object-fit: cover; }
.ens-ph2 .ph-one::before { content: ""; position: absolute; inset: -1rem 1.6rem 1.6rem -1rem; border: 2px solid var(--ball); border-radius: var(--r); z-index: 0; pointer-events: none; }
.ens-ph2 .zoom { z-index: 1; }
.ens-elite .elite { grid-template-columns: 1fr; margin-top: 1.8rem; }
.sec.dark .elite-i { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); }
@media (max-width: 900px) {
  .ens-top, .ens-elite { grid-template-columns: 1fr; }
  .ens-ph { max-width: 22rem; margin-inline: auto; padding: 0 1.4rem 1.4rem 0; }
  .ens-ph2 { padding: 1rem 0 0 1rem; }
}
/* "Suivez-nous" : de l'air entre le titre et les boutons */
.h3 + .suivez { margin-top: 1.4rem; }
[data-route="nous-rejoindre"] .h3.mt { margin-top: 3rem; }

/* ===== Finitions ===== */
.noscript { margin: 0; padding: 1rem 1.2rem; background: var(--ink); color: var(--chalk); text-align: center; font-weight: 600; }
#contenu:focus { outline: none; }
.note.dark { color: var(--muted); font-size: .95rem; margin-top: 1.2rem; }
.nf { min-height: 100vh; display: grid; align-content: center; justify-items: start; gap: .6rem; padding: 2rem clamp(1.2rem, 6vw, 6rem); max-width: 46rem; margin-inline: auto; }
.nf-logo { width: 9rem; height: auto; margin-bottom: 1.5rem; }

/* Contrastes (accessibilité : texte lisible par tous) */
.hero .kicker { color: #fff; }
.eq-l li.star small { color: #fff; }
.sn.soon { opacity: 1; }
.sn.soon .sn-i { background: var(--muted); }
[data-list][hidden] { display: none !important; }
.sn-t small { opacity: 1; color: var(--muted); }
.sn.soon small { color: var(--clay-deep); }
nav a.nav-cta:hover, nav a.nav-cta[aria-current="page"] { color: #fff; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ===== Finitions ===== */
.foot address { white-space: nowrap; }
.don > * { min-width: 0; }
.sp-l { min-height: 2.75rem; align-items: center; }
.contact a.val { display: inline-block; padding-block: .3rem; }
@media (max-width: 1180px) { nav { max-height: calc(100vh - 4.6rem); max-height: calc(100dvh - 4.6rem); overflow-y: auto; overscroll-behavior: contain; } }
/* contraste (lisibilité des petits textes sur terre battue) */
.page-head { background-color: #A53F1A; }
.tile.t3 { background: #A53F1A; }
.hero .kicker, .hero .btn-line { color: #fff; }
.hero .btn-line { border-color: #fff; }
.eq-l li.star small { color: #fff; }

/* ===== Compatibilité téléphones et tablettes (iOS, Android) ===== */
.nocss { display: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input { -webkit-tap-highlight-color: rgb(192 78 39 / .18); }
button { touch-action: manipulation; }
input[type="range"] { touch-action: pan-y; }
video { background: #000; }
@supports not (aspect-ratio: 1) { .team-photo img, .tourn-photo img, .ens-ph .zoom img, .ens-ph2 .zoom img { height: auto; } }
/* téléphone tenu à l'horizontale : en-têtes moins hauts */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 0; padding-block: 6rem 3rem; }
  .page-head { padding-block: 6.5rem 3.5rem; }
  .coach-tease { display: none; }
}
.coach.open { z-index: 120; }
@media (max-height: 480px) and (orientation: landscape) {
  .coach.open { right: 8px; bottom: 8px; }
  .coach-panel { height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  nav.open a { font-size: 1.15rem; padding-block: .55rem; }
}
/* téléphone : le décor du court passe DERRIÈRE le titre (et non plus dessous) */
@media (max-width: 900px) {
  .hero { padding-block: 7.5rem 4.5rem; }
  .hero-bg { top: 0; height: 100%; opacity: .6; }
}
@media (max-width: 640px) { .ib-fly { transform: translate(60px, 55px); } }