/* ==========================================================================
   ASG Badminton Gournay-en-Bray - Feuille de styles principale
   Site conçu et réalisé par Studio Solaire - www.studio-solaire.fr

   Version 1.2.2 - 30 septembre 2026
   1.0.0  livraison initiale (charte navy de la maquette)
   1.1.0  charte noir/or du club, écusson officiel, photos du hero et des
          cartes, dégradés recalés pour le contraste AA
   1.1.1  utilitaire .photo (mêmes ratios que les placeholders), écusson
          agrandi sur desktop
   1.1.2  .info-line : la mise en forme « icône + information » ne dépend
          plus des couleurs du pied de page
   1.1.3  .qr pour le code d'invitation WhatsApp
   1.2.0  bandeau de consentement a la mesure d'audience
   1.2.1  le bouton Gerer les cookies passe dans le pied de page
   1.2.2  corrige le survol des liens sur fond sombre (texte noir sur noir)

   Les pages appellent ce fichier avec un suffixe ?v=1.1.0.<empreinte> :
   le cache navigateur (un an, immutable, cf. .htaccess) se renouvelle
   automatiquement dès que ce fichier change. Le numéro de version se met à
   jour dans CSS_VERSION, côté générateur.
   Méthodologie : MOBILE-FIRST strict.
   Les styles de base ciblent un viewport ~375-414px.
   Toutes les media queries sont en min-width uniquement :
   base (mobile) -> 600px -> 900px -> 1200px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Charte du club, relevée sur l'écusson officiel : or #F8B800 sur noir #0C0C0C.
     Elle remplace le navy #0B1B33 / #102A4C de la maquette initiale - le logo
     fourni a un fond noir opaque et ne s'intègre proprement que sur du noir.
     Pour revenir au navy : redonner leurs anciennes valeurs aux cinq alias
     ci-dessous et rétablir rgba(12,12,12,…) dans les dégradés. */
  --noir: #0C0C0C;
  --noir-2: #1A1A1A;
  --noir-3: #262626;
  --or: #F8B800;
  --or-fonce: #D19A00;

  /* Alias conservés : tout le reste de la feuille les utilise déjà. */
  --navy-deep: var(--noir);
  --navy: var(--noir-2);
  --navy-soft: var(--noir-3);
  --yellow: var(--or);
  --yellow-dark: var(--or-fonce);

  --white: #FFFFFF;
  --bg-light: #F5F4F2;
  --ink: #141414;
  --grey: #67666A; /* assombri par rapport au gris de maquette pour tenir l'AA sur --bg-light */
  --grey-line: #E2DFDA;

  /* Placeholders d'images (à supprimer une fois les visuels intégrés) */
  --ph-bg: #2A2522;
  --ph-stripe: #332D29;
  --ph-border: #4A423C;
  --ph-accent: #E8622A;
  --ph-text: #C9C4BE;
  --ph-muted: #8A837C;

  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .10);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .16);

  --header-h: 64px;
  --gutter: 20px;
  --maxw: 1240px;

  --step-body: 1rem;
  --step-h1: 2.5rem;
  --step-h2: 1.9rem;
  --step-h3: 1.25rem;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.65;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, figure { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.05; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }

/* Composants qui posent leur propre couleur sur fond sombre.
   Sans ces regles, a:hover (specificite 0,1,1) l'emporte sur leur classe
   (0,1,0) et le texte passe au noir de --navy-deep : invisible sur du noir.
   Toute nouvelle zone sombre contenant un lien doit etre ajoutee ici. */
.brand:hover { color: var(--white); }
.card-photo:hover { color: var(--white); }
.footer__info a:hover { color: var(--or); }
.breadcrumb a:hover { color: var(--or); }
.cookies__text a:hover { color: var(--or); }
.link-more--light:hover { color: var(--white); }

hr { border: 0; border-top: 1px solid var(--grey-line); margin: 2rem 0; }

::selection { background: var(--yellow); color: var(--navy-deep); }

/* Focus visible - outline jaune 2px, contrasté sur fond clair comme sombre */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible, .site-footer :focus-visible, .site-header :focus-visible {
  outline-color: var(--yellow);
}

/* Titres display : italique condensé majuscule */
.display, h1, .h1, .h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
}

h1, .h1 { font-size: var(--step-h1); }
.h2, h2.h2 { font-size: var(--step-h2); }

h2 { text-wrap: balance; font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: var(--step-h2); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-h3); font-style: normal; text-transform: none; letter-spacing: 0; }

/* Surtitre / kicker */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 .75rem;
}
.kicker--light { color: rgba(255,255,255,.78); }
.kicker__brush { width: 54px; height: 8px; color: var(--yellow); flex: none; }

/* Annotation manuscrite (décorative) */
.script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--ink);
  display: inline-block;
  position: relative;
}
.script--light { color: var(--white); }
.script__brush { width: 100%; height: 10px; color: var(--yellow); margin-top: -2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--yellow);
  color: var(--navy-deep);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 44px; }
.section--light { background: var(--bg-light); }
.section--navy { background: var(--navy-deep); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section__head { margin-bottom: 24px; }
.section__intro { color: var(--grey); max-width: 60ch; }
.section--navy .section__intro { color: rgba(255,255,255,.82); }

.lede { font-size: 1.06rem; color: var(--grey); max-width: 62ch; }

/* --------------------------------------------------------------------------
   3. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--yellow); color: var(--navy-deep); border-color: var(--yellow); }
.btn--primary:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); color: var(--navy-deep); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--white); border-color: var(--white); }
.btn--dark { background: var(--navy-deep); color: var(--white); border-color: var(--navy-deep); }
.btn--dark:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--outline { background: transparent; color: var(--navy-deep); border-color: var(--navy-deep); }
.btn--outline:hover { background: var(--navy-deep); color: var(--white); }
.btn--block { width: 100%; }

.btn-group { display: flex; flex-direction: column; gap: 12px; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  min-height: 44px;
}
.link-more svg { width: 16px; height: 16px; transition: transform .18s ease; }
.link-more:hover svg { transform: translateX(4px); }
.link-more--light { color: var(--white); }

/* --------------------------------------------------------------------------
   4. En-tête + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-deep);
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-body);
}
.brand__logo { width: 38px; height: 38px; flex: none; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 800; font-size: .98rem; letter-spacing: .01em; white-space: nowrap; }
.brand__place { font-size: .74rem; color: var(--yellow); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius);
  color: var(--white);
  cursor: pointer;
}
.burger svg { width: 22px; height: 22px; }
.burger .icon-close { display: none; }
.burger[aria-expanded="true"] .icon-close { display: block; }
.burger[aria-expanded="true"] .icon-menu { display: none; }

/* Panneau de navigation : plein écran sur mobile */
.nav-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px var(--gutter) 40px;
  background: var(--navy-deep);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .25s ease, visibility .25s ease;
}
.nav-panel.is-open { transform: translateX(0); visibility: visible; }

.nav__list { list-style: none; margin: 0 0 20px; padding: 0; }
.nav__list li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.nav__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
}
.nav__link:hover { color: var(--yellow); }
.nav__link[aria-current="page"] {
  color: var(--yellow);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.nav-panel__cta { display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------------------------
   5. Placeholders d'images (.img-ph) - composant unique
   Remplacement final : <figure class="img-ph"> -> <img>/<picture>
   Le ratio est porté par --ratio, donc aucun layout shift.
   -------------------------------------------------------------------------- */
.img-ph {
  --ratio: 16/9;
  position: relative;
  aspect-ratio: var(--ratio);
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 8% 10%;
  text-align: center;
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(
    45deg,
    var(--ph-stripe) 0 10px,
    var(--ph-bg) 10px 20px
  );
  border: 1px dashed var(--ph-border);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--font-body);
}
.img-ph__name {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ph-accent);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.img-ph__desc {
  font-size: .72rem;
  line-height: 1.45;
  color: var(--ph-text);
  max-width: 34ch;
}
.img-ph__dim { font-size: .68rem; color: var(--ph-muted); letter-spacing: .04em; }
.img-ph__todo {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
/* Photo livrée : même API que le placeholder (--ratio), pour que le
   remplacement d'un <figure class="img-ph"> par un <img class="photo">
   ne touche à rien d'autre. */
.photo {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 3/2);
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}

/* Variantes : uniquement ratio + échelle typographique */
.img-ph--hero { --ratio: 16/9; }
.img-ph--hero .img-ph__name { font-size: .82rem; }
.img-ph--card { --ratio: 4/5; }
.img-ph--news { --ratio: 8/5; }
.img-ph--wide { --ratio: 3/2; }
.img-ph--band { --ratio: 12/5; }
.img-ph--mascotte { --ratio: 7/9; }
.img-ph--mascotte .img-ph__desc { display: none; }
.img-ph--compact .img-ph__desc { font-size: .68rem; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media .img-ph,
.hero__media img {
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}
/* La photo du hero est plus large que son conteneur : on garde le joueur,
   cadré à droite du cliché, dans le champ visible sur mobile. */
.hero__media img {
  object-fit: cover;
  object-position: 78% center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Calque dose au pixel pres : assez sombre pour garder le texte blanc au-dessus
     de 4,5:1 (mesure sur la photo livree), assez clair pour que le joueur reste
     visible, y compris sur le cadrage serre du mobile. */
  background:
    linear-gradient(180deg, rgba(12,12,12,.66) 0%, rgba(12,12,12,.54) 45%, rgba(12,12,12,.93) 100%);
}
.hero__inner { padding-block: 40px 28px; }
.hero__title { margin: 0 0 .35em; font-size: clamp(2.6rem, 14vw, 3.6rem); line-height: .92; }
.hero__title span { display: block; }
.hero__script { margin: 0 0 22px; }
.hero__script .script { font-size: 1.75rem; }
.hero .btn-group { margin-bottom: 30px; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.stat { display: flex; align-items: flex-start; gap: 10px; }
.stat__icon { width: 26px; height: 26px; color: var(--yellow); flex: none; margin-top: 2px; }
.stat__value { font-weight: 800; font-size: 1rem; line-height: 1.2; }
.stat__label { font-size: .78rem; color: rgba(255,255,255,.78); line-height: 1.3; }

/* --------------------------------------------------------------------------
   7. Cartes photo (Loisir / Compétition / Jeunes)
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: 16px; }
.card-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--white);
  text-decoration: none;
  background: var(--navy-deep);
}
.card-photo__media { overflow: hidden; }
.card-photo__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.card-photo__media .img-ph,
.card-photo__media img { transition: transform .4s ease; }
.card-photo:hover .card-photo__media .img-ph,
.card-photo:hover .card-photo__media img { transform: scale(1.05); }
.card-photo__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 20px;
  /* Assombrissement calé sur la zone de titre : mesuré sur la photo « Loisir »,
     le réglage précédent tombait à 2,4:1 sur une zone claire du cliché. */
  background: linear-gradient(180deg, rgba(12,12,12,.10) 28%, rgba(12,12,12,.74) 64%, rgba(12,12,12,.96) 100%);
}
.card-photo__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.6rem;
  margin: 0;
}
.card-photo__sub { font-size: .9rem; color: rgba(255,255,255,.85); margin: 0 0 12px; }
.card-photo__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 600;
}
.card-photo__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  flex: none;
}
.card-photo__bullet svg { width: 16px; height: 16px; }
.card-photo:hover .card-photo__bullet { background: var(--yellow); color: var(--navy-deep); border-color: var(--yellow); }

/* --------------------------------------------------------------------------
   8. Bloc "Pourquoi nous rejoindre ?"
   -------------------------------------------------------------------------- */
.why { position: relative; }
.why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 20px;
}
.why__item {
  padding: 20px 12px;
  text-align: center;
  border-bottom: 1px solid var(--grey-line);
}
.why__item:nth-child(odd) { border-right: 1px solid var(--grey-line); }
.why__icon { width: 30px; height: 30px; margin: 0 auto 12px; color: var(--ink); }
.why__value { font-family: var(--font-body); font-weight: 800; font-size: 1.3rem; line-height: 1.2; }
.why__label { font-size: .84rem; color: var(--grey); line-height: 1.35; }
.why__note { margin-top: 20px; text-align: center; }

/* --------------------------------------------------------------------------
   9. Section créneaux (fond photo assombri)
   -------------------------------------------------------------------------- */
.slots { position: relative; color: var(--white); background: var(--navy-deep); isolation: isolate; }
.slots__media { position: absolute; inset: 0; z-index: -2; }
.slots__media .img-ph { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.slots::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12,12,12,.88), rgba(26,26,26,.9));
}
.slots__grid { display: grid; gap: 12px; margin-bottom: 20px; }
.day-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.day-card__day {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin: 0 0 2px;
}
.day-card__time { font-weight: 700; font-size: 1rem; margin: 0; }
.day-card__who { font-size: .82rem; color: var(--grey); margin: 0; }

.note {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
}
.note__icon { width: 24px; height: 24px; color: var(--yellow); flex: none; }
.note__title { font-weight: 700; margin: 0 0 4px; }
.note p { font-size: .88rem; color: rgba(255,255,255,.85); margin: 0; }
.note--light { background: var(--white); border-color: var(--grey-line); color: var(--ink); }
.note--light .note__icon { color: var(--navy); }
.note--light p { color: var(--grey); }

/* --------------------------------------------------------------------------
   10. Actualités
   -------------------------------------------------------------------------- */
.news { display: grid; gap: 22px; }
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.news-card__media { overflow: hidden; }
.news-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.news-card__date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--grey);
  margin-bottom: 8px;
}
.news-card__date svg { width: 15px; height: 15px; }
.news-card__title { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; line-height: 1.25; }
.news-card__excerpt { font-size: .92rem; color: var(--grey); margin: 0 0 14px; }
.news-card__body .link-more { margin-top: auto; }

.article { border-bottom: 1px solid var(--grey-line); padding-bottom: 30px; margin-bottom: 30px; }
.article:last-child { border-bottom: 0; margin-bottom: 0; }
.article__meta { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--grey); margin-bottom: 10px; }
.article__meta svg { width: 15px; height: 15px; }
.article__media { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   11. Bandeau CTA jaune
   -------------------------------------------------------------------------- */
.cta-band { background: var(--yellow); color: var(--navy-deep); position: relative; overflow: hidden; }
.cta-band__inner { display: grid; gap: 22px; padding-block: 36px; }
.cta-band__mascotte { max-width: 220px; margin-inline: auto; }
.cta-band__title { font-size: 2rem; margin: 0 0 14px; }
.cta-band__text { color: #3A2E05; max-width: 46ch; }
.cta-band__box {
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(12,12,12,.18);
  border-radius: var(--radius);
  padding: 18px;
}
.cta-band__box h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin: 0 0 6px; }
.cta-band__box svg.box-icon { width: 22px; height: 22px; flex: none; }
.cta-band__box p { font-size: .88rem; color: #3A2E05; margin: 0 0 14px; }
.cta-band .script { color: var(--navy-deep); }

/* --------------------------------------------------------------------------
   12. Pied de page
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.8); padding-block: 40px 24px; }
.footer__grid { display: grid; gap: 28px; }
.footer__title {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 12px;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin: 0; }
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .92rem;
}
.footer__list a:hover { color: var(--yellow); text-decoration: underline; }
.footer__socials { display: flex; gap: 12px; }
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
}
.social svg { width: 22px; height: 22px; }
.social:hover { background: var(--yellow); color: var(--navy-deep); border-color: var(--yellow); }
.footer__bottom {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  gap: 14px;
  font-size: .85rem;
}
/* Ligne « icône + information ». .footer__info ne sert QUE dans le pied de
   page, ou le fond est noir : ses liens y sont blancs. Sur fond clair, utiliser
   .info-line, qui ne porte que la mise en forme et laisse les liens au style
   courant du site. */
.footer__info,
.info-line { display: flex; align-items: flex-start; gap: 10px; }
.footer__info svg,
.info-line svg { width: 18px; height: 18px; color: var(--or); flex: none; margin-top: 3px; }
.footer__info a { color: rgba(255,255,255,.85); }
.footer__copy { color: rgba(255,255,255,.6); font-size: .8rem; }

/* --------------------------------------------------------------------------
   13. Barre d'actions fixe (mobile uniquement)
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(12,12,12,.97);
  border-top: 1px solid rgba(255,255,255,.14);
}
.mobile-bar .btn { min-height: 46px; font-size: .74rem; padding-inline: 10px; }
body { padding-bottom: 74px; }

/* --------------------------------------------------------------------------
   13 bis. Consentement a la mesure d'audience
   Le bandeau et le bouton se placent au-dessus de la barre d'actions fixe
   tant qu'elle est affichee (sous 1080 px).
   -------------------------------------------------------------------------- */
.cookies {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 86px;
  z-index: 110;
  max-width: 520px;
  padding: 18px;
  background: var(--noir);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.cookies[hidden] { display: none; }
.cookies__title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 6px;
  color: var(--white);
}
.cookies__text { font-size: .88rem; color: rgba(255,255,255,.85); margin: 0 0 14px; }
.cookies__text a { color: var(--or); }
.cookies__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookies__actions .btn { min-height: 46px; font-size: .72rem; padding-inline: 10px; }

/* Bouton de reglage, dans le pied de page : toujours visible, quel que soit
   le choix deja fait. */
.footer__cookies { margin: 20px 0 0; }
.cookies-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius);
  font: 700 .78rem/1.2 var(--font-body);
  cursor: pointer;
}
.cookies-manage:hover { background: rgba(255,255,255,.1); color: var(--white); }

@media (min-width: 1080px) {
  /* la barre d'actions fixe disparait : le bandeau redescend */
  .cookies { right: auto; width: 520px; bottom: 16px; }
}

/* --------------------------------------------------------------------------
   14. Contenus éditoriaux : grilles, tableaux, listes, formulaires
   -------------------------------------------------------------------------- */
.page-header { background: var(--navy-deep); color: var(--white); padding-block: 34px 30px; }
.page-header h1 { margin-bottom: .3em; }
.page-header p { color: rgba(255,255,255,.82); max-width: 60ch; margin: 0; }
.breadcrumb { font-size: .8rem; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 8px; }
.breadcrumb svg { width: 12px; height: 12px; }

.grid-2 { display: grid; gap: 24px; }
.grid-3 { display: grid; gap: 20px; }

.panel {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 20px;
}
.panel--light { background: var(--bg-light); border-color: transparent; }
.panel h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.panel h3 svg { width: 22px; height: 22px; color: var(--navy); flex: none; }

/* QR code : fond blanc franc et marge de silence, sinon les scanners peinent. */
.qr {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  background: var(--white);
  padding: 10px;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
}

.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.list-check svg { width: 18px; height: 18px; color: var(--yellow-dark); flex: none; margin-top: 4px; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; min-width: 480px; background: var(--white); }
caption { text-align: left; font-size: .85rem; color: var(--grey); padding-bottom: 10px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--grey-line); font-size: .92rem; }
thead th { background: var(--navy-deep); color: var(--white); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
tbody th { font-weight: 700; }
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background: var(--bg-light); }

.tbc {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #FFF3CF;
  border: 1px dashed var(--yellow-dark);
  color: #6A4E00;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .9rem; }
.field .hint { font-size: .8rem; color: var(--grey); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--navy); }
.field--check { display: flex; align-items: flex-start; gap: 10px; }
.field--check input { width: 22px; min-height: 22px; height: 22px; margin-top: 3px; flex: none; }
.req { color: #B3261E; }
.form__error { color: #B3261E; font-size: .84rem; font-weight: 600; }
.form__status { padding: 14px 16px; border-radius: var(--radius); background: var(--bg-light); border: 1px solid var(--grey-line); font-size: .9rem; }

/* 404 */
.page-404 { background: var(--navy-deep); color: var(--white); text-align: center; padding-block: 60px; }
.page-404__code { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: clamp(4.5rem, 26vw, 9rem); line-height: .85; color: var(--yellow); margin: 0; }
.page-404 .shuttle-fall { width: 56px; height: 56px; color: var(--white); margin: 0 auto 18px; animation: fall 2.6s ease-in-out infinite; }
@keyframes fall {
  0% { transform: translateY(-12px) rotate(-8deg); }
  50% { transform: translateY(10px) rotate(8deg); }
  100% { transform: translateY(-12px) rotate(-8deg); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   15. Progressive enhancement - min-width: 600px
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  :root { --gutter: 28px; --step-h1: 3rem; --step-h2: 2.2rem; }
  .section { padding-block: 56px; }
  .btn-group { flex-direction: row; flex-wrap: wrap; }
  .btn--block { width: auto; }
  .hero__stats { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards .card-photo:first-child { grid-column: span 2; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .slots__grid { grid-template-columns: repeat(2, 1fr); }
  .news { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { grid-template-columns: 200px 1fr; align-items: center; }
  .cta-band__mascotte { max-width: none; }
}

/* --------------------------------------------------------------------------
   16. Progressive enhancement - min-width: 900px (desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --header-h: 84px; --gutter: 32px; --step-h1: 3.4rem; --step-h2: 2.5rem; }
  .section { padding-block: 72px; }

  .hero__media img { object-position: center; }
  .hero__inner { padding-block: 80px 34px; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__title { font-size: clamp(3.6rem, 7vw, 5.6rem); }
  .hero__body { max-width: 640px; }
  .hero__script .script { font-size: 2.2rem; }
  .hero__stats { gap: 24px; padding-top: 26px; }

  .cards { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .cards .card-photo:first-child { grid-column: auto; }
  .why__grid { grid-template-columns: repeat(4, 1fr); }
  .why__item { border-bottom: 0; border-right: 1px solid var(--grey-line); padding: 8px 22px; }
  .why__item:last-child { border-right: 0; }
  .why__item:nth-child(odd) { border-right: 1px solid var(--grey-line); }
  .why { position: relative; }
  .why__head { display: flex; align-items: baseline; gap: 22px; }
  .why__note { position: absolute; right: var(--gutter); bottom: 26px; margin: 0; text-align: right; }

  .slots__layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
  .slots__grid { grid-template-columns: repeat(4, 1fr); }
  .news { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2--wide { grid-template-columns: 1.1fr .9fr; }

  .section__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

  .cta-band__inner { grid-template-columns: 280px 1fr 200px; gap: 34px; padding-block: 48px; }
  .cta-band__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
  .cta-band__title { font-size: 2.6rem; }
  .cta-band__script { justify-self: end; text-align: right; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
  .footer__bottom { grid-template-columns: repeat(4, 1fr); align-items: start; }

  .page-header { padding-block: 56px 48px; }
  table { min-width: 0; }
}

/* --------------------------------------------------------------------------
   16 bis. Navigation horizontale - min-width: 1080px
   En dessous, le menu reste en plein écran (burger) et la barre d'actions
   fixe est conservée : c'est le seuil à partir duquel les 6 entrées de menu
   et les 2 CTA tiennent confortablement sur une ligne.
   -------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  body { padding-bottom: 0; }
  .site-header .container { padding-inline: 18px; }
  .header__inner { gap: 8px; }
  .mobile-bar { display: none; }
  .burger { display: none; }

  .nav-panel {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex: 1;
    padding: 0;
    background: transparent;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .nav__list { display: flex; align-items: center; gap: 2px; margin: 0; }
  .nav__list li { border-bottom: 0; }
  .nav__link { min-height: 44px; padding-inline: 6px; font-size: .77rem; font-weight: 600; white-space: nowrap; }
  .nav-panel__cta { flex-direction: row; gap: 8px; }
  .nav-panel__cta .btn { min-height: 44px; font-size: .63rem; padding: 10px 10px; letter-spacing: .04em; }
  .nav-panel__cta .btn svg { display: none; }
  .brand__logo { width: 52px; height: 52px; }
  .brand__name { font-size: .95rem; }
}

/* --------------------------------------------------------------------------
   17. Progressive enhancement - min-width: 1200px
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  :root { --step-h1: 3.8rem; --step-h2: 2.7rem; }
  .hero__inner { min-height: 640px; padding-block: 110px 38px; }
  .section { padding-block: 86px; }
  .container { padding-inline: 40px; }
}

/* En-tête au large : entrées de menu et CTA retrouvent leur respiration. */
@media (min-width: 1420px) {
  .site-header .container { max-width: 1420px; padding-inline: 32px; }
  .header__inner { gap: 12px; }
  .nav-panel { gap: 20px; }
  .nav__list { gap: 4px; }
  .nav__link { padding-inline: 12px; font-size: .9rem; }
  .nav-panel__cta .btn { font-size: .72rem; padding: 10px 16px; letter-spacing: .08em; }
  .nav-panel__cta .btn svg { display: block; width: 16px; height: 16px; }
  .brand__logo { width: 64px; height: 64px; }
  .brand__name { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   18. Préférences de mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card-photo:hover .card-photo__media .img-ph,
  .card-photo:hover .card-photo__media img { transform: none; }
  .link-more:hover svg { transform: none; }
  .nav-panel { transition: none; }
}

/* --------------------------------------------------------------------------
   19. Impression
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-bar, .cta-band, .hero__media, .slots__media { display: none !important; }
  body { padding-bottom: 0; color: #000; }
  .hero, .page-header, .site-footer, .section--navy, .slots { background: #fff !important; color: #000 !important; }
}

/* --------------------------------------------------------------------------
   20. Compléments de composition (hero, bandeau CTA)
   Mobile-first : base mobile, enrichissements en min-width.
   -------------------------------------------------------------------------- */
.hero__title-sub {
  display: block;
  font-size: .26em;
  letter-spacing: .3em;
  font-weight: 700;
  margin-top: .5em;
  color: rgba(255,255,255,.92);
}
.hero__aside { display: none; }
.cta-band__script { text-align: center; margin: 0; }

@media (min-width: 900px) {
  .hero__aside {
    display: block;
    align-self: flex-end;
    text-align: right;
    margin: 0 0 8px;
  }
  .hero__aside .script { font-size: 1.5rem; line-height: 1.05; }
  .hero__title-sub { font-size: .2em; letter-spacing: .38em; }
  .cta-band__script { text-align: right; margin: 0; }
}