/* Site CCVM, navigation par roue : tokens et polices de la charte. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/cormorant-garamond-latin.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/outfit-latin.woff2') format('woff2')}

:root{
  --primary:#C0392B;
  --primary-600:#A13024;
  --primary-wash:#FAEFEE;
  --bg:#F4EEE3;
  --surface:#fff;
  --border:#E6DCC9;
  --ring:#D9CCB4;
  --text:#233044;
  --muted:#5f6676;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.8,.3,1);
  --header:72px;

  /* Fond et verre dépoli : mêmes valeurs que css/style.css du site. */
  --gold:#E8A12B;
  --primary-shift:color-mix(in oklab,var(--primary) 82%,var(--gold) 18%);
  --glass-card:color-mix(in srgb,var(--surface) 50%,transparent);
  --glass-bar:color-mix(in srgb,var(--primary-wash) 78%,transparent);
  --glass-blur:blur(28px) saturate(1.32);
  --glass-border:color-mix(in srgb,#fff 72%,transparent);
  --glass-shadow:0 2px 8px rgba(20,24,33,.08),0 14px 34px rgba(20,24,33,.12),inset 0 1px 0 color-mix(in srgb,#fff 88%,transparent);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Géométrie de la roue. Écran large : page active à gauche, côté contenu. */
  --size:min(42vw, calc(100dvh - var(--header) - 24px), 640px);
  --radius:calc(var(--size) * .372);
  --disc:calc(var(--size) * .232);
  --base:180deg;
  --dir:1;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--header)}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:var(--primary-600);text-underline-offset:3px}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* Fond du site : nappe crème, photo du terrain très voilée, puis halos corail et or. */
.backdrop{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(150% 130% at 100% 100%,
    color-mix(in srgb,var(--primary) 12%,var(--bg)) 0%,
    var(--bg) 56%,
    color-mix(in srgb,#fff 55%,var(--bg)) 100%);
}
.backdrop::before,.backdrop::after{content:"";position:absolute;inset:0}
.backdrop::before{background:url('../images/hero.jpg') center/cover no-repeat;opacity:.07}
.backdrop::after{
  background-image:
    radial-gradient(38% 34% at 88% 86%,
      color-mix(in srgb,var(--primary) 64%,transparent) 0%,
      color-mix(in srgb,var(--primary) 30%,transparent) 38%,
      transparent 68%),
    radial-gradient(34% 30% at 96% 6%,
      color-mix(in srgb,var(--gold) 42%,transparent) 0%,
      color-mix(in srgb,var(--primary-shift) 22%,transparent) 40%,
      transparent 70%),
    radial-gradient(40% 38% at 4% 8%,
      color-mix(in srgb,var(--primary) 34%,transparent) 0%,
      color-mix(in srgb,var(--primary) 12%,transparent) 42%,
      transparent 72%);
}
/* Bande d'encoche des téléphones, au-dessus de l'en-tête. */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}

/* Cartes en verre dépoli : le fond transparaît, comme sur le site. */
.stats li,.horaire-card,.event-card,.course,.faq,.join,.empty,.value,.team-card,.infos > div,.form{
  position:relative;overflow:hidden;
  background:var(--glass-card);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.stats li::after,.horaire-card::after,.event-card::after,.course::after,.faq::after,.join::after,.empty::after,.value::after,.team-card::after,.infos > div::after,.form::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:var(--grain) repeat;background-size:140px 140px;opacity:.045;mix-blend-mode:multiply;
}
.horaire-card > *,.event-card > *,.course > *,.faq > *,.join > *,.empty > *,.value > *,.infos > div > *,.form > *{position:relative;z-index:1}

/* En-tête */
.top{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:5;height:var(--header);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-left:max(clamp(16px,4vw,48px),env(safe-area-inset-left,0px));
  padding-right:max(clamp(16px,4vw,48px),env(safe-area-inset-right,0px));
}
/* Bandeau invisible en haut de page. Dès qu'on défile, un voile en fondu garde le logo lisible, sans bord net. */
.top::before{
  content:"";position:absolute;inset:0 0 -24px;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .25s;
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent);
}
.top.is-scrolled::before{opacity:1}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;line-height:1.2;color:var(--text)}
.brand small{display:block;margin-top:2px;font-size:.75rem;font-weight:500;color:var(--primary-600)}
.brand img{width:44px;height:44px;border-radius:50%;border:1px solid var(--border)}
.top__link{
  min-height:44px;display:inline-flex;align-items:center;padding:0 16px;flex:none;
  border:1px solid var(--ring);border-radius:999px;text-decoration:none;font-size:.875rem;font-weight:500;color:var(--text);
  transition:background-color .2s,border-color .2s,color .2s;
}
.top__link:hover{background:var(--surface);border-color:var(--primary);color:var(--primary-600)}

/* Deux colonnes : la page qui défile à gauche, la roue fixe à droite. */
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) var(--size);align-items:start;
  gap:clamp(24px,3vw,56px);
  padding-left:max(clamp(24px,4vw,64px),env(safe-area-inset-left,0px));
  padding-right:max(clamp(24px,4vw,64px),env(safe-area-inset-right,0px));
  max-width:1560px;margin:0 auto;
}
.column{min-width:0;min-height:calc(100dvh - var(--header));display:flex;flex-direction:column}
.panels{flex:1;padding:clamp(16px,4vh,48px) 0 64px;container-type:inline-size}
.stage{
  position:sticky;top:var(--header);height:calc(100dvh - var(--header));
  display:flex;align-items:center;justify-content:center;
}

/* Une seule page affichée à la fois ; l'entrée se fait en cascade. */
.panel{display:none}
.panel.is-active{display:block}
.panel:focus-visible{outline:none}
.panel.is-active > *{animation:rise .55s var(--ease) both}
.panel.is-active > :nth-child(2){animation-delay:.04s}
.panel.is-active > :nth-child(3){animation-delay:.08s}
.panel.is-active > :nth-child(4){animation-delay:.12s}
.panel.is-active > :nth-child(n+5){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Typographie des pages */
.eyebrow{
  display:flex;align-items:center;gap:12px;margin-bottom:8px;
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-600);
}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--primary)}
.title{margin-bottom:16px;font:500 clamp(2.5rem,4.4vw,4rem)/1.05 var(--display);letter-spacing:-.01em}
.title em,.subtitle em,.lead em{color:var(--primary);font-weight:400}
.subtitle{margin-bottom:16px;font:500 clamp(1.875rem,2.8vw,2.5rem)/1.1 var(--display)}
.lead{margin-bottom:24px;font-size:1.1875rem;max-width:60ch}
.panel > p:not(.eyebrow,.lead){margin-bottom:16px;max-width:65ch}
.block{margin-top:64px}
.block > p:not(.eyebrow){margin-bottom:24px;max-width:65ch}

.banner{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:16px;margin-bottom:16px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.stats li{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:.875rem;color:var(--muted);line-height:1.3}
.stats b{display:block;margin-bottom:4px;font:600 1.75rem/1.1 var(--body);color:var(--primary)}

.tag,.horaire-tag{
  display:inline-block;padding:2px 12px;border-radius:999px;background:var(--primary-wash);
  color:var(--primary-600);font-size:.8125rem;font-weight:600;
}
.tag--pause,.horaire-tag--pause{background:var(--bg);color:var(--muted)}
.note{color:var(--primary-600);font-size:.875rem;font-weight:600}

/* Horaires */
.horaires-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.horaire-card{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:transform .2s var(--ease),box-shadow .2s}
.horaire-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(35,48,68,.35)}
.horaire-icon{display:block;font-size:1.5rem;line-height:1;margin-bottom:12px}
.horaire-card h3{font-size:1.0625rem;font-weight:600;margin-bottom:12px}
.horaire-card .horaire-tag{display:table;margin-top:4px}

/* Cours et disciplines */
.course{display:grid;gap:16px;padding:16px;margin-bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.course img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.course h3{font:500 1.75rem/1.2 var(--display);margin:8px 0}
.course p:not(.tag){margin-bottom:8px;font-size:.9375rem}
.course p:last-child{margin-bottom:0}
@container (min-width:620px){
  .course{grid-template-columns:2fr 3fr;gap:24px}
  .course img{aspect-ratio:1;height:100%;min-height:240px}
}

/* FAQ */
.faq{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:8px}
.faq summary{min-height:48px;padding:12px 16px;cursor:pointer;font-weight:600;border-radius:12px}
.faq summary:hover{color:var(--primary-600)}
.faq p{padding:0 16px 16px;font-size:.9375rem}

/* Bloc d'appel */
.join{margin-top:64px;padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.join p{margin-bottom:24px;max-width:60ch}
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 24px;border:0;
  background:var(--primary);color:#fff;border-radius:999px;text-decoration:none;font:600 1rem var(--body);cursor:pointer;
  box-shadow:0 1px 2px rgba(35,48,68,.12),0 8px 20px -8px rgba(192,57,43,.55);
  transition:background-color .2s,transform .2s var(--ease);
}
.cta span{transition:transform .2s var(--ease)}
.cta:hover{background:var(--primary-600)}
.cta:hover span{transform:translateX(4px)}
.cta:active{transform:scale(.98)}
.cta[disabled]{background:var(--ring);color:var(--text);box-shadow:none;cursor:not-allowed}
.cta--block{width:100%}

/* Photos */
.empty{padding:48px 24px;text-align:center;background:var(--surface);border:1px dashed var(--ring);border-radius:16px}
.empty h2{font:500 1.75rem/1.2 var(--display);margin-bottom:8px}
.empty p{margin:0 auto 24px;max-width:48ch}

/* Le club */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:32px}
.value{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:.9375rem}
.value h3{font-size:1.0625rem;font-weight:600;margin-bottom:8px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.team-card{
  display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;padding:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:.875rem;color:var(--muted);line-height:1.3;
}
.team-mono{grid-row:span 2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--primary-wash);color:var(--primary-600);font:600 .875rem var(--body)}
.team-name{align-self:end;color:var(--text);font-size:.9375rem;font-weight:600}

/* Contact */
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.infos > div{padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.infos dt{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.form{display:grid;gap:16px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.form label{display:grid;gap:4px;font-size:.875rem;font-weight:600}
.form input,.form select,.form textarea{
  width:100%;min-height:48px;padding:8px 12px;font:400 1rem var(--body);color:var(--text);
  background:var(--surface);border:1px solid var(--ring);border-radius:8px;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--primary);outline-offset:0;border-color:var(--primary)}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.form__hint{text-align:center;font-size:.8125rem;color:var(--muted)}

/* Pied de page */

/* Roue. --rot est piloté image par image par wheel.js. */
.wheel{--rot:0deg;position:relative;width:var(--size);height:var(--size);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.wheel.is-dragging{cursor:grabbing}

.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rings circle{fill:none;stroke:var(--ring);vector-effect:non-scaling-stroke}
.rings__a,.rings__b,.rings__c{transform-origin:500px 500px}
.rings__a{transform:rotate(calc(var(--rot) * -.35))}
.rings__b{transform:rotate(var(--rot))}
.rings__c{transform:rotate(calc(var(--rot) * -.8))}
.rings__ticks{stroke-width:8;stroke-dasharray:1.5 24;stroke-opacity:.8}
/* Cordelette de laisse : deux brins torsadés, à peine plus marqués que le filet d'origine. */
.rings .rings__cord{stroke:color-mix(in srgb,var(--primary) 22%,var(--ring));stroke-width:2.5}
.rings .rings__twist{stroke:color-mix(in srgb,var(--primary) 50%,var(--ring));stroke-width:2.5;stroke-dasharray:4 5}
.rings__dash{stroke-width:1;stroke-dasharray:3 9}

/* Mousqueton au trait. Il n'apparaît qu'une fois un disque en place (--snap) et oscille avec --sway. */
.clasp-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.clasp{opacity:var(--snap,1)}
.clasp--phone{display:none}
.clasp__swing{transform:rotate(var(--sway,0deg))}
#clasp-shape{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

/* Chaque disque : placé sur l'orbite, puis contre-tourné pour rester droit. */
.items{position:absolute;inset:0}
.item{
  --angle:calc(var(--base) - var(--dir) * var(--i) * 60deg + var(--rot));
  position:absolute;left:50%;top:50%;width:var(--disc);height:var(--disc);
  margin:calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2);
  padding:0;border:0;background:none;color:var(--text);font:inherit;cursor:pointer;border-radius:50%;
  transform:rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle))) scale(var(--s,1));
  z-index:var(--z,1);touch-action:pan-y;-webkit-tap-highlight-color:transparent;
}
.wheel.is-dragging .item{cursor:grabbing}
.item img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--surface);
  box-shadow:0 0 0 calc(var(--on,0) * 4px) var(--primary),0 0 0 calc(var(--on,0) * 10px) rgba(192,57,43,.14),0 12px 28px -10px rgba(35,48,68,.45);
  filter:saturate(calc(.7 + var(--on,0) * .3));
  transition:filter .25s;
  pointer-events:none;
}
.item img.is-logo{object-fit:contain;padding:8%}
.item:hover img{filter:saturate(1)}
.item:focus-visible{outline-offset:8px}
.item__label{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;
  padding:3px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);
  font-size:.8125rem;font-weight:600;line-height:1.4;
  transition:background-color .25s,color .25s,border-color .25s;
}
.item[aria-current="page"] .item__label{background:var(--primary);border-color:var(--primary);color:#fff}

/* Centre de la roue */
.hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--size) * .42);
  text-align:center;margin-top:calc(var(--size) * -.03);
}
.hub__count{margin-bottom:4px;font-size:.8125rem;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.hub__title{font:500 clamp(1.75rem,calc(var(--size) * .075),3rem)/1.05 var(--display)}

.arrows{position:absolute;left:50%;top:50%;transform:translateX(-50%);display:flex;gap:8px;margin-top:calc(var(--size) * .055)}
.arrow{
  width:44px;height:44px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--surface);border:1px solid var(--ring);border-radius:50%;color:var(--text);
  transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.arrow:hover{background:var(--primary);border-color:var(--primary);color:#fff}}
.arrow:active{transform:scale(.92)}

/* Téléphone et tablette portrait : la roue devient une barre fixe en bas de l'écran, on ne voit que son sommet. */
@media (max-width:980px){
  :root{
    --header:64px;
    --size:min(77vw, 460px);
    --radius:calc(var(--size) * .47);
    --disc:calc(var(--size) * .26);
    --base:270deg;
    --dir:-1;
    --dock:calc(var(--disc) * 1.08 + var(--radius) * .5 + 24px);
  }
  .brand{font-size:.9375rem}
  .brand img{width:40px;height:40px}
  .layout{
    display:block;
    padding-left:max(24px,env(safe-area-inset-left,0px));
    padding-right:max(24px,env(safe-area-inset-right,0px));
    padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px) + 16px);
  }
  .column{min-height:0}
  .panels{padding:8px 0 48px}
  .title{font-size:clamp(2.5rem,11vw,3.5rem)}
  .lead{font-size:1.0625rem}
  .stage{
    position:fixed;left:0;right:0;bottom:0;top:auto;height:calc(var(--dock) + env(safe-area-inset-bottom,0px));z-index:4;
    display:block;
  }
  /* Pas de barre : la page passe derrière la roue et s'estompe progressivement vers le bas. */
  .stage::before{
    content:"";position:absolute;inset:-32px 0 0;pointer-events:none;
    background:linear-gradient(to top,
      color-mix(in srgb,var(--bg) 72%,transparent) 0%,
      color-mix(in srgb,var(--bg) 45%,transparent) 55%,
      transparent 100%);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent);
  }
  .wheel{
    position:absolute;left:50%;margin-left:calc(var(--size) / -2);
    top:calc(var(--disc) * .5 + 14px + var(--radius) - var(--size) / 2);
  }
  .hub,.rings__a,.rings__c,.clasp--wide{display:none}
  .clasp--phone{display:block}
  .rings,.clasp-layer{transform:scale(calc(.47 / .372))} /* le cercle suit l'orbite mobile, plus large */
  .arrows{margin:0;top:calc(50% - var(--radius) + var(--disc) * .5 + 18px)}
  .arrow{width:40px;height:40px}
  .item__label{bottom:-4px;font-size:.75rem;padding:2px 10px}
}

/* Écran large mais très bas (téléphone en paysage) : commandes réduites. */
@media (min-width:981px) and (max-height:560px){
  :root{--header:56px}
  .arrows{margin-top:calc(var(--size) * .03)}
  .hub__title{font-size:1.5rem}
  .hub__count{display:none}
  .arrow{width:36px;height:36px}
  .item__label{font-size:.6875rem;padding:1px 8px}
}

/* Sans JavaScript : toutes les pages se lisent à la suite, la roue disparaît. */
.no-js .stage{display:none}
.no-js .layout{display:block}
.no-js .panel{display:block;margin-bottom:96px}

@media (prefers-reduced-motion:reduce){
  .panel.is-active > *{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ═══ Fonctions du site réel, ajoutées à la maquette ═══ */
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-64px;z-index:10;padding:12px 16px;border-radius:8px;background:var(--surface);color:var(--text);transition:top .2s}
.skip-link:focus{top:12px}
.item{display:block;text-decoration:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.team-role{align-self:start}

/* En-tête : thème clair ou sombre et accès à l'espace membre. */
.top__actions{display:flex;align-items:center;gap:8px;flex:none}
.theme-toggle{
  width:44px;height:44px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:none;border:1px solid var(--ring);border-radius:50%;color:var(--text);
  transition:background-color .2s,border-color .2s,color .2s;
}
.theme-toggle:hover{background:var(--surface);border-color:var(--primary);color:var(--primary-600)}
.theme-toggle svg{width:18px;height:18px}
.icon-sun{display:none}
html.dark .icon-sun{display:block}
html.dark .icon-moon{display:none}

/* Horaires dynamiques (js/cours.js) */
.horaire-card--pause .horaire-icon{opacity:.6}
.horaire-places{margin-left:6px;font-weight:700}
.horaire-places--complet{color:var(--muted)}
.horaire-cta{
  display:inline-flex;align-items:center;min-height:44px;margin-top:12px;padding:0 16px;border-radius:999px;
  background:var(--primary);color:#fff;font-size:.875rem;font-weight:600;text-decoration:none;
  transition:background-color .2s;
}
.horaire-cta:hover{background:var(--primary-600)}

/* Agenda dynamique (js/evenements.js) */
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.event-card{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:.9375rem}
.event-date{margin-bottom:8px;color:var(--primary-600);font-size:.8125rem;font-weight:600}
.event-card h3{margin-bottom:8px;font-size:1.0625rem;font-weight:600}

/* Galerie, prête pour le jour où des photos seront déposées (js/photos.js). */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.photo-item{aspect-ratio:1;overflow:hidden;border-radius:12px;cursor:pointer}
.photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.photo-item:hover img{transform:scale(1.06)}
.lightbox{display:none;position:fixed;inset:0;z-index:500;align-items:center;justify-content:center;padding:24px;background:rgba(26,26,26,.94)}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px}
.lightbox-close{position:absolute;top:24px;right:28px;padding:6px;border:0;background:none;color:rgba(247,242,233,.8);font-size:30px;line-height:1;cursor:pointer}
.lightbox-close:hover{color:#fff}

/* Contact : carte et retour d'envoi du formulaire. */
.map{margin-top:16px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.map iframe{display:block;width:100%;height:260px;border:0}
.form__status{display:none;text-align:center;font-size:.875rem}

/* Pied de page */
.foot{padding:40px 0 24px;border-top:1px solid var(--border);font-size:.875rem;color:var(--muted)}
.foot__top{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-weight:600;color:var(--text)}
.foot__brand img{width:44px;height:44px;border-radius:50%;border:1px solid var(--border)}
.foot__social{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.foot__social svg{width:18px;height:18px}
.foot__col h2{margin-bottom:8px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.foot__col a{display:flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:none}
.foot__col a:hover{color:var(--primary-600)}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-top:32px;padding-top:16px;border-top:1px solid var(--border);font-size:.8125rem}
@media (max-width:620px){.foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}.foot__top > :first-child{grid-column:1 / -1}}
@media (max-width:980px){.top__link{padding:0 12px}.theme-toggle{width:40px;height:40px}}

/* Thème sombre : mêmes valeurs que le reste du site. */
html.dark{
  --primary:color-mix(in srgb,#C0392B 62%,#fff);
  --primary-600:color-mix(in srgb,#C0392B 48%,#fff);
  --primary-wash:color-mix(in srgb,var(--primary) 10%,transparent);
  --bg:#161a22;
  --surface:#1f2530;
  --border:#333b49;
  --ring:#3f4858;
  --text:#e7eaf0;
  --muted:#98a2b4;
  --glass-border:color-mix(in srgb,#fff 18%,transparent);
  --glass-shadow:0 2px 8px rgba(0,0,0,.36),0 14px 34px rgba(0,0,0,.46),inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);
  color-scheme:dark;
}
html.dark .backdrop{
  background:radial-gradient(150% 130% at 100% 100%,
    color-mix(in srgb,var(--primary) 10%,var(--bg)) 0%,
    var(--bg) 56%,
    color-mix(in srgb,#000 22%,var(--bg)) 100%);
}
html.dark .backdrop::before{opacity:.05}
html.dark .backdrop::after{opacity:.45}
html.dark .cta,html.dark .horaire-cta,html.dark .item[aria-current="page"] .item__label{color:#1b1410}