/* =========================================================
   JO Companion — Milano Cortina 2026
   Feuille de style commune
   ========================================================= */

/* =========================================================
   DESIGN SYSTEM — jetons (tokens) & intentions
   Convention de nommage :  --<élément>-<intention>-<état>
     élément   : text | bg | icon | border | ring | shadow
     intention : primary | brand-milan | brand-cortina | accent | neutral | info | danger
     état      : default | subtle | muted | strong | hover | active | focus | on-dark
   Les couleurs, fonds, bordures, ombres et animations sont des INTENTIONS :
   on stylise via ces jetons sémantiques, jamais via les primitives brutes.
   ========================================================= */
:root {

  /* ---------- 1. Primitives (palette brute — NE PAS utiliser directement) ---------- */
  --color-navy-900:   #1b2843;
  --color-navy-800:   #213151;   /* interaction / texte principal */
  --color-navy-600:   #2c3f68;
  --color-navy-soft:  rgba(46, 62, 96, 0.4);
  --color-red-500:    #F23C39;   /* Milan */
  --color-red-bg:     #FEECEC;
  --color-blue-500:   #4FA8D0;   /* Cortina */
  --color-blue-700:   #2b7ea3;   /* cyan lisible sur fond clair */
  --color-gold-500:   #FFD700;
  --color-gold-700:   #8a7400;   /* or lisible sur fond clair */
  --color-grey-500:   #919497;
  --color-ink-500:    #46566f;
  --color-ink-600:    #5a657a;
  --color-white:      #FFFFFF;
  --color-text-light: #F0F4F8;
  --color-sky-50:     #EEF7FF;

  /* ---------- 2. Texte ---------- */
  --text-primary-default: var(--color-navy-800);
  --text-primary-subtle:  var(--color-ink-500);
  --text-primary-muted:   var(--color-ink-600);
  --text-neutral-subtle:  var(--color-grey-500);
  --text-on-dark-default: var(--color-white);
  --text-on-dark-subtle:  var(--color-text-light);
  --text-brand-milan:        var(--color-red-500);
  --text-brand-cortina:      var(--color-blue-500);   /* cyan vif (titres/accents) */
  --text-brand-cortina-soft: var(--color-blue-700);   /* cyan lisible sur fond clair (tags soft) */
  --text-accent-default:     var(--color-gold-500);
  --text-accent-strong:      var(--color-gold-700);

  /* ---------- 3. Fonds (bg) ---------- */
  --bg-page:              var(--color-sky-50);
  --bg-primary-default:   var(--color-navy-800);
  --bg-band-primary:      linear-gradient(125deg, var(--color-navy-600) 0%, var(--color-navy-800) 55%, var(--color-navy-900) 100%);
  --bg-brand-milan:       var(--color-red-500);
  --bg-brand-cortina:     var(--color-blue-500);
  --bg-accent-default:    var(--color-gold-500);
  --bg-surface-navy-soft: var(--color-navy-soft);
  --bg-surface-frost:     linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02)), var(--color-navy-soft);
  --bg-soft-milan:        rgba(242, 60, 57, 0.12);
  --bg-soft-cortina:      rgba(79, 168, 208, 0.15);
  --bg-soft-accent:       rgba(255, 215, 0, 0.20);

  /* ---------- 4. Bordures & anneaux ---------- */
  --border-neutral-subtle:  rgba(33, 49, 81, 0.08);
  --border-neutral-default: rgba(33, 49, 81, 0.18);
  --border-glass:           rgba(255, 255, 255, 0.35);
  --border-brand-cortina:   var(--color-blue-500);
  --border-accent-default:  var(--color-gold-500);
  --border-accent-hover:    rgba(255, 215, 0, 0.5);
  --border-info-focus:      var(--color-blue-500);
  --ring-focus:             0 0 0 3px rgba(79, 168, 208, 0.25);

  /* ---------- 5. Icônes ---------- */
  --icon-on-dark: var(--color-white);
  --icon-neutral: var(--color-grey-500);
  --icon-accent:  var(--color-gold-500);

  /* ---------- 6. Typographie & mise en page ---------- */
  --font:      'Lato', system-ui, -apple-system, sans-serif;
  --container: 1281px;
  --pad-x:     50px;
  --radius:      30px;
  --radius-sm:   10px;
  --radius-pill: 999px;

  /* Échelle typographique (valeurs réelles du projet, nommage t-shirt) */
  --fs-3xs:  11px;
  --fs-2xs:  12px;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-md:   15px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  22px;
  --fs-3xl:  24px;
  --fs-4xl:  30px;
  --fs-5xl:  34px;

  /* Graisses — UNIQUEMENT les 4 fontes réelles de Lato (300/400/700/900).
     Lato n'a ni 500, ni 600, ni 800 : on ne tokenise que ce qui existe.
       light    : logos, mentions discrètes
       regular  : corps de texte, légendes
       bold     : libellés, sous-titres, accents
       black    : titres, gros chiffres */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------- 7. Mouvement (intentions d'animation) ---------- */
  --ease-bounce: cubic-bezier(.34, 1.45, .5, 1);  /* rebond court (Figma "Rapide") */
  --dur-bounce:  .42s;
  --ease-hover:  cubic-bezier(.33, 1, .68, 1);     /* ease-out doux (survol cartes) */
  --dur-hover:   .55s;

  /* ---------- 8. Verre givré & ombres (effets récurrents) ---------- */
  --glass-blur:   blur(14px) saturate(1.4);
  --glass-edge:   var(--border-glass);
  --glass-sheen:  inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --shadow-soft:  0 8px 22px rgba(0, 0, 0, .10), inset 0 1px 1px rgba(255, 255, 255, .12);   /* repos */
  --shadow-hover: 0 20px 48px rgba(0, 0, 0, .18), inset 0 1px 1px rgba(255, 255, 255, .16);  /* survol */

  /* ---------- 9. Alias hérités (compat ascendante) ---------- */
  --bg-body:      var(--bg-page);
  --c-dark:       var(--color-navy-800);
  --c-red:        var(--color-red-500);
  --c-blue:       var(--color-blue-500);
  --c-gold:       var(--color-gold-500);
  --c-legend:     var(--color-grey-500);
  --c-epreuve-bg: var(--color-red-bg);
  --c-text-light: var(--color-text-light);
  --c-white:      var(--color-white);
  --glass:        rgba(255, 255, 255, 0.10);
  --hover-edge:   var(--border-accent-hover);
}

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text-primary-default);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img { height: auto; }

ul { list-style: none; padding: 0; }

a { text-decoration: none; color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- 3. Utilitaires ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Bouton générique */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease,
              background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--light {
  background: var(--c-white);
  color: var(--text-primary-default);
}

/* Sprite SVG caché */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icônes (SVG inline via <use> -> recolorables par `color`/`fill`) */
.icon {
  display: inline-block;
  flex-shrink: 0;
  fill: currentColor;
}
.icon--burger  { width: 30px; height: 18px; }
.icon--search  { width: 21px; height: 21px; }
.icon--account { width: 22px; height: 22px; }
.icon--book    { width: 22px; height: 22px; }

/* Badge / tag */
/* TAG / étiquette — composant réutilisable
   (hero « à la une », tuiles actualités, cartes culturelles Milan/Cortina…) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-on-dark-default);
  background: var(--bg-brand-cortina);          /* cyan par défaut */
}
.tag--milan   { background: var(--bg-brand-milan); }
.tag--cortina { background: var(--bg-brand-cortina); }
.tag__sep { width: 9px; height: 1px; background: currentColor; opacity: .85; }

/* =========================================================
   TITRE DE SECTION (logo montagne estompé + texte penché)
   Réutilisé dans toutes les sections : NOS ACTUALITÉS, NOS SPORTS…
   ========================================================= */
.section-title {
  display: inline-flex;
  align-items: center;
}
.section-title__logo {
  flex: none;
  width: 130px;
  aspect-ratio: 135 / 117;
  margin-right: -55px;
  fill: var(--c-red);
  opacity: .20;
}
.section-title__text {
  position: relative;
  display: flex;
  flex-direction: column;
  transform: rotate(-8.64deg);
  color: var(--text-primary-default);
  line-height: 1.05;          /* interlignage unifié dans tout le site */
  text-transform: uppercase;
  white-space: nowrap;
}
.section-title__small { font-weight: var(--fw-bold); font-size: var(--fs-xl); }
.section-title__big   { font-weight: var(--fw-black); font-size: 60px; }

/* variante compacte (panneaux latéraux) */
.section-title--sm .section-title__logo { width: 90px; margin-right: -42px; }
.section-title--sm .section-title__text  { gap: 2px; }
.section-title--sm .section-title__small { font-size: var(--fs-xs); }
.section-title--sm .section-title__big   { font-size: 46px; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: relative;
  padding-bottom: 50px;
  color: var(--text-on-dark-default);
  background: linear-gradient(
    180deg,
    var(--c-dark) 0%,
    rgba(51, 75, 124, 0.58) 68%,
    rgba(75, 111, 183, 0) 100%
  );
}

/* ----- Bandeau rouge ----- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 46px;
  background: var(--bg-brand-milan);
}
.topbar__dates {
  font-weight: var(--fw-bold);
  color: var(--text-on-dark-subtle);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 22px;
  font-weight: var(--fw-bold);
  color: var(--text-on-dark-subtle);
}
.lang-switch li {
  position: relative;
  opacity: .85;
}
/* petit point séparateur entre les langues */
.lang-switch li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}
.lang-switch .is-active { opacity: 1; }

/* conteneur interne (menu + hero) */
.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 95px var(--pad-x) 0;
}

/* ----- Menu de navigation ----- */
.main-nav { margin-bottom: 95px; }

.main-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 16px;
  height: 69px;
  border-radius: 20px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.nav-burger { display: inline-flex; }

/* display:contents -> les liens deviennent frères directs de la barre,
   donc tous les éléments du menu partagent le même espacement (space-between) */
.nav-links {
  display: contents;
  font-weight: var(--fw-bold);
}
.nav-links a { transition: opacity .15s ease; }
.nav-links a:hover { opacity: .7; }

/* Logo central qui déborde de la barre */
.nav-logo {
  flex-shrink: 0;
  margin-block: -45px;   /* déborde au-dessus et en dessous */
}
.nav-logo img { width: 130px; height: auto; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-icon { display: inline-flex; transition: opacity .15s ease; }
.nav-icon:hover { opacity: .7; }

/* ----- Cover / Hero ----- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 586px;
  padding: 50px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* dégradé sombre pour la lisibilité du texte */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(33, 49, 81, 0.8) 85%
  );
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  align-items: flex-start;
  gap: 24px;
}

.hero__title {
  max-width: 360px;
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-transform: uppercase;
}

.hero__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-bold);
  font-style: italic;
  transition: gap .15s ease;
}
.hero__more:hover { gap: 12px; }

/* Cover d'accueil : groupe des 2 boutons (Télécharger / Découvrir) */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Contrôles discrets de la vidéo de cover (pause/lecture + son) */
.hero__controls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  gap: 10px;
}
.hero__ctrl {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.hero__ctrl:hover,
.hero__ctrl:focus-visible { background: rgba(0, 0, 0, 0.6); transform: scale(1.06); }
.hero__ctrl svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* =========================================================
   SECTION NOS ACTUALITÉS
   ========================================================= */
.actus { padding-block: 40px; }
.actus__inner {
  display: flex;
  align-items: stretch;
  gap: 20px;
  max-width: var(--container);
  margin-inline: auto;
}
.actus__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 55px;
  padding: 0 50px;
  min-width: 0;
}

/* grille de 4 cartes */
.actus__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.news-card {
  position: relative;
  aspect-ratio: 385 / 254;
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: #000;
}
.news-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* tuile actu : positionnement du .tag (le visuel/casse viennent du composant .tag) */
.news-card__tag {
  position: absolute;
  top: 23px;
  left: 20px;
}
.news-card__title {
  position: absolute;
  left: 20px;
  bottom: 22px;
  max-width: 310px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.6);
  font-weight: var(--fw-bold);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* panneau latéral droit */
.actus__panel {
  flex: none;
  width: 392px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 40px 26px 47px 50px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
}

/* liste des prochaines épreuves */
.events {
  display: flex;
  flex-direction: column;
  width: 283px;
  max-height: 255px;
  overflow-y: auto;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
}
.event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.event + .event { border-top: 1px solid rgba(33, 49, 81, 0.15); }
.event__date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: #181f39;
  color: var(--text-on-dark-default);
}
.event__day   { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; }
.event__month { font-size: var(--fs-sm); color: #c4c4c4; }
.event__name   { font-size: var(--fs-base); font-weight: var(--fw-bold); color: #000; }
.event__detail { font-size: var(--fs-2xs); color: #000; }

/* tableau des médailles */
.medals {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-2xs);
  color: #000;
}
.medals th {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: #736a6a;
  text-align: left;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(33, 49, 81, 0.15);
}
.medals td { padding: 6px 0; }
.medals tbody tr td:first-child { color: #736a6a; font-weight: var(--fw-regular); }
.medals .medals__country { display: flex; align-items: center; gap: 12px; }
.medals .medals__country img {
  width: 24px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
}
.medals .is-total { opacity: .41; }
.medal-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
}
.medal-dot--gold   { background: var(--bg-accent-default); }
.medal-dot--silver { background: #c4c4c4; }
.medal-dot--bronze { background: #e0a270; }
.medals .icon-total { width: 15px; height: 14px; }

/* =========================================================
   SECTION LES SPORTS
   ========================================================= */
.sports {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-top: 40px;
}
.sports__head {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 50px;
}

/* bandeau gris en diagonale + carrousel */
.sports__ribbon {
  position: relative;
  padding-block: 45px;
  overflow: hidden;
}
/* =========================================================
   COMPOSANT « ruban incliné » — géométrie commune
   (hauteur & fond propres à chaque section). Deux inclinaisons :
   -2.4°/skew (sports, ambiances, culture, durabilité) ou -2° (épreuves, athlètes).
   ========================================================= */
.sports__band, .ambiances__band, .culture__band,
.durability__band, .epreuves__band, .athletes__band {
  position: absolute; left: 50%; top: 50%;
  width: 160vw; min-width: 1806px;
  transform: translate(-50%, -50%) rotate(-2.4deg) skewX(4.7deg);
}
.epreuves__band, .athletes__band { transform: translate(-50%, -50%) rotate(-2deg); }

.sports__band { height: 235px; background: var(--bg-band-primary); }
/* fines bandes claires au-dessus / en dessous pour l'effet ruban */
.sports__band::before,
.sports__band::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  background: #34487a;
}
.sports__band::before { top: -58px;    opacity: .35; }
.sports__band::after  { bottom: -58px; opacity: .35; }

/* piste de cartes (droite, scroll horizontal) */
/* conteneur centré : flèches | piste | flèches */
.sports__carousel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;          /* flèches centrées sur la hauteur des cartes */
  justify-content: center;      /* carrousel centré sur la page */
  gap: 28px;                     /* écart flèches <-> cartes */
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}
.sports__track {                /* fenêtre : 4 cartes visibles, le reste masqué */
  width: min(970px, 100%);      /* 4×212 + 3×30 + 2×16 de respiration latérale */
  padding-inline: 16px;         /* respiration : les ombres des cartes de bord s'y affichent */
  overflow-x: clip;             /* masque les cartes hors-champ (clip au bord du padding) */
  overflow-y: visible;          /* laisse passer les ombres (haut / bas) */
}
.sports__rail {
  display: flex;
  gap: 30px;
  transition: transform var(--dur-bounce) var(--ease-bounce);  /* rebond au défilement */
  will-change: transform;
}

.sport-card {
  position: relative;
  flex: none;
  width: 212px;
  height: 212px;
  border-radius: 18px;
  /* verre givré : fond translucide + flou de l'arrière-plan (le picto, au premier plan, reste net) */
  background: linear-gradient(135deg, rgba(238, 247, 255, 0.45), rgba(238, 247, 255, 0.1));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18),
              inset 0 1px 1px rgba(255, 255, 255, 0.55);   /* reflet de verre */
  overflow: hidden;
}
.sport-card__media {
  position: absolute;
  inset: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.sport-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sport-card__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  background: var(--c-epreuve-bg);
}
.sport-card__fav {
  display: inline-flex;
  color: var(--text-primary-default);
  transition: transform .15s ease, color .15s ease;
}
.sport-card__fav:hover { transform: scale(1.15); color: var(--text-brand-milan); }
.sport-card__fav.is-fav { color: var(--text-brand-milan); }
.sport-card__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: #000;
  line-height: 1.05;
  text-decoration: none;
  transition: color .15s ease;
}
a.sport-card__name:hover { color: var(--text-brand-milan); }
.icon--heart   { width: 18px; height: 18px; }
.icon--chevron { width: 11px; height: 17px; }

/* boutons chevrons */
.sports__nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(33, 49, 81, 0.55);
  color: var(--text-on-dark-default);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  /* remontées de la moitié du pied (44px) pour viser le centre de l'illustration */
  transform: translateY(-22px);
  transition: background .15s ease;
}
.sports__nav:hover { background: rgba(33, 49, 81, 0.8); }
.sports__nav--next .icon--chevron { transform: scaleX(-1); }

/* =========================================================
   SECTION NOS AMBIANCES
   ========================================================= */
.ambiances {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-top: 40px;
}
.ambiances__head {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 44px;
}
.ambiances__ribbon {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 35px;
  overflow: hidden;
}
.ambiances__band { height: 560px; background: var(--bg-brand-cortina); opacity: .9; }
.ambiances__band::before,
.ambiances__band::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  background: var(--bg-brand-cortina);
  opacity: .4;
}
.ambiances__band::before { top: -72px; }
.ambiances__band::after  { bottom: -72px; }

.ambiances__cities {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 120px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 30px;
}
.ambiances__cities figure {
  position: relative;
  isolation: isolate;          /* contient le mix-blend de la teinte */
  margin: 0;
  width: 453px;
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  outline-offset: 4px;
}
.ambiances__cities img {
  display: block;
  width: 100%;
  aspect-ratio: 453 / 561;
  object-fit: cover;
}
/* ville cliquable -> page ambiance */
.ville-link {
  display: block;
  width: 453px; max-width: 100%;
  border-radius: var(--radius);
}
.ville-link:focus-visible { outline: 3px solid var(--border-accent-default); outline-offset: 6px; border-radius: var(--radius); }

/* Teinte bleue (duotone) qui s'efface au survol -> photo en couleur */
.ville__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-brand-cortina);
  mix-blend-mode: color;
  opacity: 1;
  transition: opacity .55s ease;
  pointer-events: none;
}
.ville:hover .ville__tint,
.ville:focus-within .ville__tint { opacity: 0; }

/* Nom de la ville révélé au survol */
.ville__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 52px 24px 22px;
  font-weight: var(--fw-black);
  font-size: var(--fs-4xl);
  color: #fff;
  background: linear-gradient(transparent, rgba(11, 21, 40, 0.72));
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.ville__name::before {
  content: "";
  flex: none;
  width: 6px;
  height: 30px;
  border-radius: 3px;
  background: var(--accent, #fff);
}
.ville--milan   { --accent: var(--c-red); }
.ville--cortina { --accent: var(--c-blue); }
.ambiances__cities figure:hover .ville__name,
.ambiances__cities figure:focus-visible .ville__name,
.ambiances__cities figure:focus-within .ville__name {
  opacity: 1;
  transform: none;
}

/* =========================================================
   SECTION APPLICATION (Olympic Journey)
   ========================================================= */
.app {
  display: flex;
  flex-wrap: nowrap;        /* ne passe PAS à la ligne : les 2 colonnes rétrécissent (cf. .app__intro/__steps) */
  gap: 42px;
  align-items: center;
  justify-content: center;
  padding: 60px 44px;
  background: var(--bg-primary-default);
  color: var(--text-on-dark-subtle);
}
.app__intro {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  flex: 0 1 607px;          /* 607px = taille MAX ; rétrécit pour rester sur la même ligne */
  min-width: 0;
}

/* logo Olympic Journey */
.app-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-logo__mark {
  flex: none;
  width: clamp(86px, 9vw, 120px);   /* 120px = taille max ; rétrécit sur écrans étroits */
  aspect-ratio: 135 / 117;
  fill: var(--c-text-light);
}
.app-logo__text { display: flex; flex-direction: column; align-items: center; line-height: .9; }
.app-logo__top { font-weight: var(--fw-light); font-size: clamp(36px, 4.4vw, 54px); letter-spacing: 3px; color: var(--text-on-dark-subtle); }
.app-logo__main { font-weight: var(--fw-black); font-size: clamp(40px, 5vw, 60px); color: var(--text-on-dark-subtle); }
.app-logo__sub { font-weight: var(--fw-light); font-size: clamp(17px, 2.1vw, 26px); letter-spacing: 1px; color: var(--text-on-dark-default); }

.app__quote {
  max-width: 430px;
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  color: var(--text-brand-cortina);
}
.app__desc {
  max-width: 576px;
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
}
.app__actions { display: flex; flex-wrap: wrap; gap: 20px; }
.btn--lg {
  padding: 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
}
/* Bouton or : se soulève + halo doré */
.btn--gold { background: var(--bg-accent-default); color: var(--text-primary-default); }
.btn--gold:hover,
.btn--gold:focus-visible {
  box-shadow: 0 12px 28px rgba(255, 215, 0, 0.45);
  filter: brightness(1.05);
}

/* Bouton contour : remplissage clair qui balaie depuis la gauche */
.btn--outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: var(--text-on-dark-subtle);
  border: 2px solid var(--c-text-light);
}
.btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-text-light);
  transform: translateX(-101%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.btn--outline:hover,
.btn--outline:focus-visible { color: var(--text-primary-default); }
.btn--outline:hover::before,
.btn--outline:focus-visible::before { transform: translateX(0); }

/* étapes numérotées */
.app__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 1 540px;          /* 540px = taille MAX ; rétrécit au lieu de passer à la ligne */
  min-width: 0;
  padding: 0;               /* <ol> : retire le retrait par défaut (non couvert par le reset ul) */
  list-style: none;
}
/* =========================================================
   COMPOSANT RÉUTILISABLE : carte d'info en verre (chiffre OU icône)
   Variantes : --steps (Olympic Journey, chiffre) / --feature (Durabilité, icône)
   Même verre, même accent or au survol, même animation ; taille différente.
   ========================================================= */
.info-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 26px;
  border-radius: 8px;
  background: var(--bg-surface-navy-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);  /* liseré "verre" en haut */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1),
              background-color .45s ease,
              border-color .45s ease,
              box-shadow .45s ease;
}
.info-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: var(--bg-brand-cortina);
  border-radius: 0 4px 4px 0;
  transition: width .45s cubic-bezier(.22, .61, .36, 1),
              background-color .45s ease, box-shadow .45s ease;
}
.info-card:hover {
  transform: translateY(-3px);                  /* léger soulèvement */
  background-color: rgba(64, 82, 120, 0.5);     /* la vitre s'éclaircit */
  border-color: var(--border-accent-hover);         /* liseré doré */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);  /* reflet "verre" renforcé */
}
.info-card:hover::before {
  background-color: var(--bg-accent-default);                       /* accent or */
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);          /* glow doux et modéré */
}
.info-card__lead {
  flex: none;
  line-height: 1;
  color: var(--text-brand-cortina);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), color .45s ease;
}
.info-card:hover .info-card__lead { transform: scale(1.06); }
/* le chiffre se dore au survol ; l'icône emoji garde sa couleur (juste l'échelle) */
.info-card:hover .info-card__lead--num { color: var(--text-accent-default); }
.info-card__title { color: var(--text-brand-cortina); margin-bottom: 6px; transition: color .45s ease; }
.info-card__desc  { color: var(--text-on-dark-subtle); }

/* Variante chiffre / étapes (Olympic Journey) */
.info-card--steps { min-height: 120px; }
.info-card--steps .info-card__lead  { font-family: var(--font); font-weight: var(--fw-bold); font-size: 28px; }
.info-card--steps .info-card__title { font-family: var(--font); font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .03em; text-transform: uppercase; }
.info-card--steps .info-card__desc  { font-family: var(--font); font-weight: var(--fw-regular); font-size: var(--fs-xs); }

/* Variante icône / feature (Durabilité) — plus grande */
.info-card--feature {
  width: 374px;
  max-width: 100%;
  min-height: 190px;
  gap: 16px;
}
.info-card--feature .info-card__lead  { font-size: var(--fs-4xl); }
.info-card--feature .info-card__title { font-weight: var(--fw-black); font-size: var(--fs-2xl); margin-bottom: 12px; }
.info-card--feature .info-card__desc  { font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: 1.5; }

/* =========================================================
   SECTION CALENDRIER OFFICIEL
   ========================================================= */
.calendar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 50px 0 60px;
  overflow: hidden;
  background: var(--bg-body);   /* même couleur que la page -> pas de bloc qui tranche */
  color: #000;
}
/* contenu aligné sur la largeur des autres sections */
.calendar > :not(.calendar__bg) {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 44px;
}
.calendar__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.calendar__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
}
.calendar__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* l'image se fond dans la page : transparent au centre -> couleur de page en haut et en bas */
  background: linear-gradient(180deg,
    var(--bg-body) 0%,
    rgba(238, 247, 255, 0) 28%,
    rgba(238, 247, 255, 0) 60%,
    var(--bg-body) 92%);
}
.calendar > *:not(.calendar__bg) { position: relative; z-index: 1; }

.calendar__intro {
  max-width: 1082px;
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xl);
}
.calendar__dates {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  justify-content: center;
}
.cal-date {
  flex: 1 1 230px;
  max-width: 295px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.cal-date__num { font-weight: var(--fw-black); font-size: 70px; line-height: 1; }
.cal-date__body { display: flex; flex-direction: column; gap: 10px; }
.cal-date__month { font-weight: var(--fw-bold); font-size: var(--fs-5xl); }
.cal-date__desc { font-weight: var(--fw-regular); font-size: var(--fs-base); }

/* =========================================================
   SECTION AU SERVICE DE LA DURABILITÉ
   ========================================================= */
.durability {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-top: 40px;
}
.durability__head {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 44px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.durability__intro {
  max-width: 1188px;
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xl);
  color: #000;
}
.durability__ribbon {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 35px;
  overflow: hidden;
}
.durability__band { height: 250px; background: var(--bg-band-primary); }
.durability__band::before,
.durability__band::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  background: #34487a;
  opacity: .4;
}
.durability__band::before { top: -64px; }
.durability__band::after  { bottom: -64px; }
.durability__cards {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 39px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}
/* (les cartes Durabilité utilisent désormais le composant .info-card--feature) */
/* Durabilité : survol plus doux */
.js .durability__cards .info-card {
  transition: transform .6s ease, background-color .6s ease,
              border-color .6s ease, box-shadow .6s ease;
}
.durability__cards .info-card::before {
  transition: width .6s ease, background-color .6s ease, box-shadow .6s ease;
}
.durability__cards .info-card__lead,
.durability__cards .info-card__title {
  transition: transform .6s ease, color .6s ease;
}

/* =========================================================
   SECTION FAQ (accordéon natif <details>)
   ========================================================= */
.faq {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 40px;
}
.faq__head {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 44px;
}
.faq__ribbon {
  position: relative;
  padding: 70px 0;
  overflow: hidden;
}
/* bande cyan en léger biais qui couvre toute la hauteur du contenu */
.faq__ribbon::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: 0;
  bottom: 0;
  background: var(--bg-brand-cortina);
  transform: skewY(-2.2deg);
  z-index: 0;
}
.faq__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 762px;
  margin-inline: auto;
  padding-inline: 24px;
}
.faq-item {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  overflow: hidden;
}
.faq-item__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 49px;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  color: var(--text-on-dark-subtle);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-chev {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  transition: transform var(--dur-bounce) var(--ease-bounce);  /* rebond (ouverture ET fermeture) */
}
.faq-chev .icon--chevron { transform: rotate(-90deg); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item__a {
  padding: 4px 24px 20px 30px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  line-height: 20px;
  color: var(--text-on-dark-subtle);
}

/* Animation d'ouverture/fermeture (Chrome moderne ; ignoré ailleurs -> bascule instantanée) */
:root { interpolate-size: allow-keywords; }
.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  /* rebond "Rapide" sur ouverture ET fermeture (token réutilisable) */
  transition: block-size var(--dur-bounce) var(--ease-bounce),
              content-visibility var(--dur-bounce) allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-item__a p { margin-bottom: 12px; }
.faq-item__a p:last-child { margin-bottom: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { color: #fff; }

/* bandeau partenaires */
.footer-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  /* barre pleine largeur, mais logos alignés sur le conteneur de la page */
  padding: 21px max(44px, calc((100% - var(--container)) / 2 + 44px));
  background: var(--bg-brand-cortina);
}
.footer-partners img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

/* zone principale */
.footer-main {
  position: relative;
  padding: 50px 0;
  overflow: hidden;
}
.footer-main__bg { position: absolute; inset: 0; z-index: 0; }
.footer-main__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.footer-main__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(24, 31, 57, 0.85));
}
.footer-main__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 44px;        /* aligné sur les autres sections */
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  background: rgba(24, 31, 57, 0.25);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  color: #fff;
  align-self: flex-start;
  transition: background .15s ease;
}
.footer-cta:hover { background: rgba(24, 31, 57, 0.45); }

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 66px;
  align-items: flex-start;
  justify-content: space-between;   /* brand + colonnes répartis sur toute la largeur */
}
.footer-brand { display: flex; gap: 40px; align-items: flex-end; }
.footer-brand__logo { width: 130px; }
.footer-brand__qr {
  width: 130px;
  height: 130px;
  border-radius: 20px;
}
/* la nav ne forme plus un bloc : ses 3 colonnes participent à la répartition */
.footer-nav { display: contents; }
.footer-col h3 {
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  color: var(--text-on-dark-subtle);
  margin-bottom: 10px;
}
.footer-col a {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  color: #fff;
  padding: 4px 0;
  transition: opacity .15s ease;
}
.footer-col a:hover { opacity: .7; }

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  padding: 12px 34px;
  border-radius: 15px;
  background: rgba(24, 31, 57, 0.3);
}
.footer-bar__links { display: flex; gap: 58px; }
.footer-bar__links a { font-weight: var(--fw-black); font-size: var(--fs-2xl); color: #fff; }
.footer-bar__copy { font-size: var(--fs-xs); }

/* =========================================================
   ANIMATIONS
   ========================================================= */

/* 0. Rebond réutilisable (design system) — easing : var(--ease-bounce)
   .bounce-in : apparition "pop" élastique sur n'importe quel élément */
@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(.85); }
  100% { opacity: 1; transform: scale(1); }
}
.bounce-in { animation: bounce-in var(--dur-bounce) var(--ease-bounce) both; }

/* 1. Apparition au scroll (uniquement si JS actif) */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Nos Ambiances : fondu + zoom + léger flou (esprit Smart Animate "dissolve")
   avec dérive diagonale. Keyframes = lecture fiable de bout en bout. */
.js .ambiances__cities figure.reveal { opacity: 0; }
.js .ambiances__cities figure.reveal.is-visible {
  animation: ambiance-in-left 1s cubic-bezier(.2, .75, .25, 1) both;
}
.js .ambiances__cities figure.reveal:nth-child(2).is-visible {
  animation-name: ambiance-in-right;
  animation-delay: .18s;
}
@keyframes ambiance-in-left {
  0%   { opacity: 0; transform: scale(.82) translate(-34px, 46px) rotate(-2.2deg); filter: blur(7px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes ambiance-in-right {
  0%   { opacity: 0; transform: scale(.82) translate(34px, 46px) rotate(2.2deg); filter: blur(7px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* 2. Menu compact collant */
.mininav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  background: rgba(33, 49, 81, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-100%);
  transition: transform .35s ease;
  color: var(--text-on-dark-default);
}
.mininav.is-visible { transform: translateY(0); }
.mininav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 8px 50px;
}
.mininav__logo img { height: 46px; width: auto; }
.mininav__links {
  display: flex;
  gap: 28px;
  margin-right: auto;
  font-weight: var(--fw-bold);
}
.mininav__links a { transition: opacity .15s ease; }
.mininav__links a:hover { opacity: .7; }
.mininav .btn--light { padding: 6px 14px; }

/* 3. Survols renforcés */
.news-card > img { transition: transform .45s ease; }
.news-card:hover > img { transform: scale(1.06); }

.sport-card { transition: transform .2s ease, box-shadow .2s ease; }
.sport-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28),
              inset 0 1px 1px rgba(255, 255, 255, 0.55);
}

.ambiances__cities img { transition: transform .5s ease, box-shadow .3s ease; }
.ambiances__cities figure:hover img { transform: scale(1.03); }

/* Cartes .info-card : apparition en cascade (glissement depuis la gauche).
   fill `backwards` (pas `both`) -> ne verrouille pas le transform, le survol reste actif. */
.js .info-card.reveal { opacity: 0; }
/* la transition de survol doit primer sur celle du reveal générique (0.7s) */
.js .info-card {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1),
              background-color .45s ease, border-color .45s ease,
              box-shadow .45s ease, color .45s ease;
}
.js .info-card.reveal.is-visible {
  opacity: 1;
  animation: card-in .6s cubic-bezier(.2, .7, .2, 1) backwards;
}
.js .info-card.reveal:nth-child(2).is-visible { animation-delay: .09s; }
.js .info-card.reveal:nth-child(3).is-visible { animation-delay: .18s; }
.js .info-card.reveal:nth-child(4).is-visible { animation-delay: .27s; }
@keyframes card-in {
  from { opacity: 0; transform: translateX(-45px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sustain-card { transition: transform .2s ease; }
.sustain-card:hover { transform: translateY(-4px); }

.btn--gold:hover, .footer-cta:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }

/* 4. Accessibilité : on coupe tout si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .mininav { transition: none; }
  .faq-item::details-content { transition: none; }
  .faq-chev { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* =========================================================
   GLASSMORPHISME RÉUTILISABLE (design system)
   À ajouter sur tout élément translucide. Prime sur les
   backdrop-filter individuels (placé en fin de feuille).
   ========================================================= */
.glass {
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-sheen);
}

/* =========================================================
   PAGE « LES JEUX » — composants réutilisables
   ========================================================= */

/* Hero variante : plus court, pastille « LES JEUX » */
.hero--jeux { min-height: 320px; }
.hero--jeux .hero__content { justify-content: center; }
.hero__pill {
  display: inline-block;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-cortina);
  color: var(--text-on-dark-default);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  letter-spacing: 1px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* Layout : contenu principal + panneau latéral collant */
.jeux { padding: 44px 0 60px; }
.jeux__inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 50px;
}
.jeux__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.jeux__side {
  flex: none;
  width: 392px;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Barre de filtres */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter {
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(33, 49, 81, 0.25);
  background: transparent;
  color: var(--text-primary-default);
  font: 700 15px var(--font);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter:hover { border-color: var(--border-brand-cortina); color: var(--text-brand-cortina); }
.filter.is-active { background: var(--bg-brand-cortina); border-color: var(--border-brand-cortina); color: var(--text-on-dark-default); }
.filters__search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(33, 49, 81, 0.15);
}
.filters__search input {
  border: 0; background: transparent; outline: none;
  font: 400 14px var(--font); color: var(--text-primary-default); width: 150px;
}
.filters__search .icon--search { width: 15px; height: 17px; color: var(--text-neutral-subtle); }

/* Grille de sports — réutilise .sport-card (remplit la colonne) */
.sport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sport-grid .sport-card { width: auto; height: auto; aspect-ratio: 13 / 14; }
/* masquage fiable pour le filtre (prime sur display:grid/none) */
.sport-grid[hidden], .jeux__divider[hidden], .sport-card[hidden] { display: none; }
.sport-empty { color: var(--text-neutral-subtle); font-weight: var(--fw-bold); padding: 8px 2px; }

/* Séparateur « Sports paralympiques » */
.jeux__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  color: var(--text-primary-default);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}
.jeux__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-neutral-default); }

/* En-tête de section centré (sur fond sombre) */
.section-header--center { text-align: center; max-width: 720px; margin-inline: auto; }
.section-header__eyebrow {
  display: block;
  color: var(--text-brand-cortina);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.section-header__title {
  margin-top: 16px;
  color: var(--text-on-dark-default);
  font-weight: var(--fw-black);
  font-size: 54px;
  line-height: 1.08;
}
.section-header__sub { margin-top: 16px; color: var(--text-neutral-subtle); font-size: var(--fs-base); }

/* === Section Héritage (bandeau navy) + Timeline + Stats === */
.heritage {
  padding: 70px 0 66px;
  background: var(--bg-band-primary);
}
.heritage__inner { max-width: var(--container); margin-inline: auto; padding-inline: 50px; }

/* Chronologie alternée reliée par une ligne centrale à nœuds */
.timeline { position: relative; max-width: 1000px; margin: 58px auto 0; }
.timeline::before {
  content: "";
  position: absolute;
  left: 50%; top: 8px; bottom: 8px;
  width: 2px;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
}
.tl-item { position: relative; width: 50%; box-sizing: border-box; margin-bottom: 44px; }
.tl-item--left  { left: 0;   padding-right: 54px; }
.tl-item--right { left: 50%; padding-left: 54px; }
.tl-node {
  position: absolute;
  top: 26px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-primary-default);
  border: 4px solid var(--border-brand-cortina);
  z-index: 2;
}
.tl-item--left  .tl-node { right: -11px; }
.tl-item--right .tl-node { left: -11px; }

.tl-card { position: relative; overflow: hidden; }   /* surface & états : composant « carte givrée navy » */
.tl-card__media { position: relative; height: 152px; }
.tl-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tl-year {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;                 /* reste au-dessus de l'image qui zoome au survol */
  padding: 6px 16px;
  border-bottom-right-radius: var(--radius-sm);
  font-weight: var(--fw-black);
  color: var(--text-on-dark-default);
  background: var(--bg-brand-cortina);
}
.tl-year--gold { background: var(--bg-accent-default); color: var(--text-primary-default); }
.tl-year--red  { background: var(--bg-brand-milan); }
.tl-card__body { padding: 18px 20px 22px; }
.tl-card__title { color: var(--text-on-dark-default); font-weight: var(--fw-bold); font-size: 17px; }
.tl-card__text { margin-top: 8px; color: var(--text-on-dark-subtle); font-size: var(--fs-xs); line-height: 1.55; opacity: .82; }
.tl-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tl-stat {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-dark-subtle);
  background: rgba(79, 168, 208, 0.16);
  border: 1px solid rgba(79, 168, 208, 0.35);
}

/* Hover des cartes de la timeline — même langage que les .info-card de la home
   (liseré doré + glow + accent or sur le titre + zoom image).
   Déclenché sur .tl-item (zone stable) pour éviter tout scintillement des dates,
   et pour pouvoir allumer le nœud (frère de la carte). */
/* sous-éléments timeline : transitions propres (le survol carte vient de .lift) */
.tl-card__title { transition: color .6s ease; }
.tl-card__media { overflow: hidden; }   /* clippe l'image zoomée proprement */
.tl-card__media img { transition: transform 1s cubic-bezier(.22, .61, .36, 1); }
.tl-node {
  transition: background-color .5s ease, border-color .5s ease,
              box-shadow .5s ease, transform .5s ease;
}
.tl-item:hover .tl-card__title { color: var(--text-accent-default); }
.tl-item:hover .tl-card__media img { transform: scale(1.04); }
/* le nœud de la timeline s'allume au survol de la carte */
.tl-item:hover .tl-node {
  background: var(--bg-accent-default);
  border-color: var(--border-accent-default);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.75);
  transform: scale(1.18);
}

/* Statistiques clés (cartes en verre, compteurs animés) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 44px auto 0;
}
.stat-card { padding: 34px; text-align: center; }   /* surface & états : composant « carte givrée navy » */
.stat-card__num {
  font-weight: var(--fw-black);
  font-size: 64px;
  line-height: 1;
  color: var(--text-brand-cortina);
  transition: color .45s ease;
}
.stat-card:hover .stat-card__num { color: var(--text-accent-default); }
.stat-card__label { margin-top: 10px; font-weight: var(--fw-bold); font-size: var(--fs-3xl); color: var(--text-on-dark-default); }
.stat-card__sub { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-neutral-subtle); }

/* =========================================================
   PAGE « APPLICATION » — composants
   ========================================================= */

/* --- Les épreuves culturelles : bandeau rose (bords diagonaux) + cartes ville --- */
.culture { display: flex; flex-direction: column; gap: 0; padding-top: 40px; }
.culture__head {
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 50px;
}
/* deux bandeaux distincts, style « ruban incliné » de la home (sports/durabilité),
   teintés aux couleurs DA en opacité : ROUGE de Milan / BLEU de Cortina */
.culture__ribbon {
  position: relative;
  padding-block: 80px;
  overflow: hidden;
}
/* Ruban incliné — MÊME géométrie que les rubans de l'accueil (Nos Sports /
   Nos Ambiances) : bande pleine largeur + deux fines bandes parallèles
   au-dessus / en-dessous. Seule la teinte change : pâle, couleurs DA
   (rouge Milan / bleu Cortina), conformément à la maquette. */
.culture__band { height: calc(100% - 104px); }   /* fond : variantes --milan / --cortina */
.culture__band::before, .culture__band::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 30px;
}
.culture__band::before { top: -50px; }
.culture__band::after  { bottom: -50px; }
.culture__ribbon--milan .culture__band {
  background: linear-gradient(125deg, rgba(242, 60, 57, 0.16), rgba(242, 60, 57, 0.07) 55%, rgba(242, 60, 57, 0.17));
}
.culture__ribbon--milan .culture__band::before,
.culture__ribbon--milan .culture__band::after { background: rgba(242, 60, 57, 0.13); }
.culture__ribbon--cortina .culture__band {
  background: linear-gradient(125deg, rgba(79, 168, 208, 0.20), rgba(79, 168, 208, 0.08) 55%, rgba(79, 168, 208, 0.21));
}
.culture__ribbon--cortina .culture__band::before,
.culture__ribbon--cortina .culture__band::after { background: rgba(79, 168, 208, 0.15); }

.culture__inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin-inline: auto; padding-inline: 50px;
}
.culture__group {
  width: 100%; max-width: var(--container); margin: 40px auto 14px; padding-inline: 50px;
  font-weight: var(--fw-black); font-size: 26px; color: var(--text-primary-default);
}
.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.culture-card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.culture-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16); }
.culture-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.culture-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
.culture-card:hover .culture-card__media img { transform: scale(1.05); }
.culture-card__tag { position: absolute; top: 14px; left: 14px; }
.culture-card__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.culture-card__label {
  font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-neutral-subtle);
}
.culture-card__title { font-weight: var(--fw-black); font-size: 19px; color: var(--text-primary-default); }
.culture-card__desc { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-primary-muted); }

/* --- Les valeurs (bandeau navy, 3 colonnes) --- */
.values {
  padding: 64px 0;
  background: var(--bg-band-primary);
}
.values__inner { max-width: var(--container); margin-inline: auto; padding-inline: 50px; }
.values__eyebrow {
  color: var(--text-brand-cortina); font-weight: var(--fw-bold); font-size: var(--fs-base); letter-spacing: 2px;
  text-transform: uppercase; text-align: center; margin-bottom: 38px;
}
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.values__item { padding: 6px 42px; }
.values__item + .values__item { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.values__title { color: var(--text-brand-cortina); font-weight: var(--fw-black); font-size: 26px; margin-bottom: 14px; }
.values__text { color: var(--text-on-dark-subtle); font-size: var(--fs-md); line-height: 1.6; opacity: .85; }

/* --- Bandeau citation (photo + voile navy + texte) --- */
.quote-banner {
  position: relative;
  display: flex; align-items: center;
  min-height: 340px;
  overflow: hidden;
}
.quote-banner__media { position: absolute; inset: 0; z-index: 0; }
.quote-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.quote-banner::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20, 28, 52, 0.88) 0%, rgba(20, 28, 52, 0.55) 55%, rgba(20, 28, 52, 0.25) 100%);
}
.quote-banner__text {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 50px;
  color: var(--text-on-dark-default); font-weight: var(--fw-black); font-size: 38px; line-height: 1.25;
}

/* =========================================================
   PAGE « SPORT » (fiche détail, ex. Curling) — composants
   ========================================================= */

/* --- Intro sport (bandeau navy) : titre + méta + stats or --- */
.sport-intro {
  padding: 56px 0;
  background: var(--bg-band-primary);
}
.sport-intro__inner {
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: center;
  max-width: var(--container); margin-inline: auto; padding-inline: 50px;
}
.sport-intro__main { flex: 1 1 480px; min-width: 0; }
.sport-intro__title {
  display: flex; flex-direction: column;
  font-weight: var(--fw-black); font-size: 44px; line-height: 1.05; color: var(--text-on-dark-default);
}
.sport-intro__sub { color: var(--text-brand-cortina); }
.sport-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
.sport-meta li { display: inline-flex; align-items: center; gap: 10px; color: var(--text-on-dark-subtle); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.sport-meta__ico { font-size: var(--fs-lg); }

.sport-intro__stats { display: flex; flex-direction: column; gap: 16px; flex: 0 0 256px; }
.sport-stat { padding: 18px 24px; text-align: center; }   /* surface & états : composant « carte givrée navy » */
.sport-stat__num { font-weight: var(--fw-black); font-size: 40px; line-height: 1; color: var(--text-accent-default); }
.sport-stat__num span { font-size: var(--fs-2xl); }
.sport-stat__label { margin-top: 8px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark-subtle); opacity: .85; }

/* --- Prochaines épreuves : liste sur bandeau navy --- */
.epreuves { display: flex; flex-direction: column; gap: 25px; padding-top: 40px; }
.epreuves__head { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 50px; }
.epreuves__ribbon { position: relative; padding-block: 52px; overflow: hidden; }
.epreuves__band { height: 112%; background: var(--bg-band-primary); }
.epreuves__list {
  position: relative; z-index: 1;
  max-width: var(--container); margin-inline: auto; padding-inline: 50px;
  display: flex; flex-direction: column; gap: 14px;
}
.epreuve {
  display: grid; grid-template-columns: 1.1fr 1.5fr 1fr auto; align-items: center; gap: 20px;
  padding: 16px 24px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen);
  transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.epreuve:hover {
  border-color: var(--border-accent-hover);          /* liseret doré, comme les autres cartes */
  background: rgba(255, 255, 255, 0.10);
  box-shadow: var(--glass-sheen), 0 0 14px rgba(255, 215, 0, 0.12);
}
.epreuve__phase { color: var(--text-brand-cortina); font-weight: var(--fw-bold); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; }
.epreuve__name { color: var(--text-on-dark-default); font-weight: var(--fw-bold); font-size: var(--fs-base); }
.epreuve__date { color: var(--text-on-dark-subtle); font-size: var(--fs-sm); opacity: .85; }
.epreuve__btn { justify-self: end; }

/* --- La discipline : texte + image --- */
.discipline { padding: 56px 0; }
.discipline__inner { max-width: 1000px; margin-inline: auto; padding-inline: 50px; display: flex; flex-direction: column; gap: 30px; }
.discipline__text h3 { font-weight: var(--fw-black); font-size: 28px; color: var(--text-primary-default); margin-bottom: 18px; }
.discipline__text p { color: var(--text-primary-subtle); font-size: var(--fs-base); line-height: 1.6; margin-bottom: 14px; max-width: 72ch; }
.discipline__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.discipline__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Les règles du jeu : cartes claires (icône + barre d'accent + hover) --- */
.rules { padding: 16px 0 56px; }
.rules__inner { max-width: var(--container); margin-inline: auto; padding-inline: 50px; }
.rule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 30px; }
.rule-card {
  position: relative; overflow: hidden;
  padding: 26px 30px 26px 34px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--border-neutral-subtle);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}
.rule-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--bg-brand-cortina); border-radius: 0 4px 4px 0;
  transition: background-color .45s ease, box-shadow .45s ease;
}
.rule-card:hover { transform: translateY(-4px); border-color: var(--border-accent-hover); box-shadow: 0 16px 32px rgba(0, 0, 0, .12); }
.rule-card:hover::before { background: var(--bg-accent-default); box-shadow: 0 0 12px rgba(255, 215, 0, .45); }
.rule-card__ico { display: block; font-size: var(--fs-4xl); margin-bottom: 14px; }
.rule-card__title { font-weight: var(--fw-black); font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: .02em; color: var(--text-primary-default); margin-bottom: 8px; }
.rule-card__desc { color: var(--text-primary-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* --- Informations pratiques : lignes icône + label + valeur --- */
.facts { padding: 16px 0 56px; }
.facts__inner { max-width: 1000px; margin-inline: auto; padding-inline: 50px; }
.fact-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.fact {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 24px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--border-neutral-subtle);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
}
.fact__ico { flex: none; font-size: var(--fs-3xl); }
.fact__label { color: var(--text-brand-cortina); font-weight: var(--fw-bold); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; }
.fact__value { color: var(--text-primary-default); font-size: var(--fs-md); font-weight: var(--fw-bold); margin-top: 2px; }

/* --- Les athlètes : bandeau navy + cartes photo --- */
.athletes { display: flex; flex-direction: column; gap: 25px; padding-top: 16px; }
.athletes__head { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 50px; }
.athletes__ribbon { position: relative; padding-block: 52px; overflow: hidden; }
.athletes__band { height: 112%; background: var(--bg-band-primary); }
/* carte athlète : item du carrousel (largeur fixe, comme .sport-card) */
.athlete-card { flex: none; width: 212px; overflow: hidden; }   /* surface & états : composant « carte givrée navy » */
.athlete-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent-hover);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .32), inset 0 1px 1px rgba(255, 255, 255, 0.18);
}
.athlete-card__media { aspect-ratio: 1 / 1; overflow: hidden; }
.athlete-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1s cubic-bezier(.22, .61, .36, 1); }
.athlete-card:hover .athlete-card__media img { transform: scale(1.05); }
.athlete-card__foot { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.athlete-card__name { color: var(--text-on-dark-default); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.athlete-card__country { display: flex; align-items: center; gap: 7px; color: var(--text-on-dark-subtle); font-size: var(--fs-2xs); opacity: .85; }
/* drapeau du pays (image) */
.athlete-card__flag {
  flex: none; width: 20px; height: 14px;
  object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* =========================================================
   COMPOSANT « carte givrée navy » — surface commune
   Une seule recette : fond frost + bord verre + flou. Les ÉTATS (ombre
   repos / survol doré) sont fournis par le bloc design-system .lift ci-dessous.
   ========================================================= */
.stat-card, .sport-stat, .tl-card, .athlete-card {
  border-radius: var(--radius-sm);
  background: var(--bg-surface-frost);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}

/* =========================================================
   SURVOL « CARTE » — élément de design system
   Soulèvement + liseré doré + ombre douce, transition lente et fluide.
   Source unique : ajuster les tokens --shadow-hover / --dur-hover / --ease-hover.
   Pour une nouvelle carte : ajouter la classe .lift. Les composants existants
   sont retrofités via la liste ci-dessous (repos + survol unifiés).
   ========================================================= */
.lift,
.stat-card, .sport-stat, .tl-card, .info-card,
.athlete-card, .rule-card, .culture-card, .epreuve, .practical-card {
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) ease,
              background-color var(--dur-hover) ease,
              box-shadow var(--dur-hover) var(--ease-hover);
}
.lift:hover,
.stat-card:hover, .sport-stat:hover, .tl-item:hover .tl-card, .info-card:hover,
.athlete-card:hover, .rule-card:hover, .culture-card:hover, .epreuve:hover, .practical-card:hover {
  transform: translateY(-4px);
  border-color: var(--hover-edge);
  box-shadow: var(--shadow-hover);
}

/* =========================================================
   PAGE « AMBIANCE » (Milan / Cortina) — composants
   ========================================================= */

/* Pastille hero aux couleurs de l'ambiance (Milan = rouge, Cortina = bleu) */
.hero__pill--amb { background: var(--bg-brand-milan); }
.amb--cortina .hero__pill--amb { background: var(--bg-brand-cortina); }

/* --- Les sites olympiques : intro + carte + grille de sites --- */
.sites { padding: 44px 0 56px; }
.sites__inner { max-width: var(--container); margin-inline: auto; padding-inline: 50px; }
.sites__intro { margin-top: 16px; max-width: none; color: var(--text-primary-subtle); font-size: var(--fs-base); line-height: 1.6; }
.sites__map { margin: 30px 0 36px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
.sites__map img { display: block; width: 100%; height: auto; }

.venue-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.venue-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border-neutral-subtle);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.venue-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .14); }
.venue-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.venue-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, .61, .36, 1); }
.venue-card:hover .venue-card__media img { transform: scale(1.05); }
.venue-card__tag { position: absolute; top: 16px; left: 16px; }
.venue-card__body { display: flex; flex-direction: column; padding: 20px 24px 24px; }
.venue-card__sport { color: var(--text-brand-cortina); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.venue-card__name { color: var(--text-primary-default); font-weight: var(--fw-black); font-size: var(--fs-3xl); margin: 4px 0 16px; }
.venue-card__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 14px; border-bottom: 1px solid rgba(33, 49, 81, .12); }
.venue-card__stat { color: var(--text-primary-default); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.venue-card__access { margin-top: 14px; color: var(--text-primary-muted); font-size: var(--fs-xs); line-height: 1.5; }

/* --- Informations pratique : 3 cartes sur le bandeau d'ambiance --- */
.practical { display: flex; flex-direction: column; gap: 25px; padding-top: 40px; }
.practical__head { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 50px; }
.practical__ribbon { padding-block: 80px; }
/* le ruban réutilise la bande PÂLE cohérente (.culture__ribbon--milan / --cortina) :
   mêmes couleurs atténuées que « Parcours dans la ville » */
.practical__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch;
  max-width: var(--container); margin-inline: auto; padding-inline: 50px;
}
/* Cartes Pratique : verre givré CLAIR (couleurs atténuées, esprit « Parcours dans
   la ville »), avec une « tête » (icône + titre) et un corps qui s'étire -> hauteurs égales. */
.practical-card {
  display: flex; flex-direction: column;       /* tête + corps -> justifié sur la hauteur */
  height: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* frozen glass CLAIR : fond translucide -> le ruban pâle transparaît + flou d'arrière-plan */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
/* tête du composant (icône dans un carré doux + titre, centrés) */
.practical-card__head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 20px 18px; text-align: center;
  border-bottom: 1px solid var(--border-neutral-subtle);
}
.practical-card__ico {
  display: grid; place-items: center;
  width: 58px; height: 58px; font-size: 28px; line-height: 1;
  border-radius: 16px;
  background: rgba(33, 49, 81, 0.06);
  border: 1px solid var(--border-neutral-subtle);
}
.practical-card__title { color: var(--text-primary-default); font-weight: var(--fw-black); font-size: 19px; }
.practical-card__body {
  flex: 1 1 auto;                              /* s'étire -> bas des cartes alignés */
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 24px 26px;
}
.practical-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.practical-list li { position: relative; padding-left: 26px; color: var(--text-primary-subtle); font-size: var(--fs-sm); line-height: 1.5; }
.practical-list li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--text-brand-milan); font-weight: var(--fw-bold); }
.amb--cortina .practical-list li::before { color: var(--text-brand-cortina); }
/* grille météo : pastilles douces */
.weather-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.weather-stat {
  text-align: center; padding: 14px 8px; border-radius: var(--radius-sm);
  background: rgba(33, 49, 81, 0.05); border: 1px solid rgba(33, 49, 81, 0.06);
}
.weather-stat__num { font-weight: var(--fw-black); font-size: 26px; color: var(--text-primary-default); line-height: 1; }
.weather-stat__label { margin-top: 4px; font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-neutral-subtle); }

/* --- Atmosphère : galerie photos (masonry) --- */
.atmo { display: flex; flex-direction: column; gap: 25px; padding: 16px 0 60px; }
.atmo__head { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 50px; }
.atmo__gallery {
  max-width: var(--container); margin-inline: auto; padding-inline: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 18px;
}
.atmo__gallery img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.atmo__gallery img:first-child { grid-row: span 2; }   /* grande image verticale à gauche (Duomo) */
.atmo__gallery img:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }

/* tiroir mobile : masqué en desktop */
.nav-drawer { display: none; }

/* =========================================================
   PAGE COMPTE / CONNEXION (auth) — carte en verre givré sur fond Milan/Cortina
   Réutilise : .glass, .btn--light, sprite #ic-account. Animations sobres.
   ========================================================= */
.auth__screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 40px 20px;
  background:
    linear-gradient(180deg, rgba(20, 28, 52, 0.30), rgba(20, 28, 52, 0.45)),
    url("../assets/img/auth-bg.jpg") center / cover no-repeat fixed;
}
.auth__logo img { height: 132px; width: auto; }

/* carte (verre givré, teinte claire translucide comme la maquette) */
.auth-card {
  width: min(685px, 100%);
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding: 48px 56px;
  border-radius: var(--radius-sm);
  background: rgba(238, 247, 255, 0.15);   /* teinte maquette ; .glass apporte flou + liseré */
  color: #fff;
}

/* tête : avatar + titre + réseaux */
.auth-card__head { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.auth-card__avatar {
  display: grid; place-items: center;
  width: 80px; height: 80px;
  border: 3px solid #fff;
  border-radius: 50%;
}
.auth-card__avatar svg { width: 40px; height: 40px; fill: #fff; }
.auth-card__title {
  margin: 0;
  font-weight: var(--fw-black); font-size: var(--fs-4xl); line-height: 1.2; text-align: center;
  text-transform: uppercase;
}
.auth-social { display: flex; gap: 14px; }
.auth-social__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: transform var(--dur-hover) var(--ease-hover),
              background-color var(--dur-hover) ease,
              border-color var(--dur-hover) ease;
}
.auth-social__btn svg { width: 20px; height: 20px; fill: currentColor; }
.auth-social__btn:hover,
.auth-social__btn:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--hover-edge);
}

/* séparateur « Ou » */
.auth-divider { display: flex; align-items: center; gap: 18px; color: var(--text-neutral-subtle); }
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.25); }
.auth-divider span { font-weight: var(--fw-black); font-size: var(--fs-md); }

/* formulaire */
.auth-form { display: flex; flex-direction: column; gap: 32px; }
.field { display: flex; flex-direction: column; gap: 14px; }
.field__label { font-weight: var(--fw-regular); font-size: var(--fs-xl); color: #fff; }
.field__control {
  display: flex; align-items: center; gap: 16px;
  height: 48px; padding: 0 19px;
  border: 1px solid var(--c-legend);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.field__control:focus-within {
  border-color: var(--border-brand-cortina);
  box-shadow: var(--ring-focus);
}
.field__ico { flex: none; width: 20px; height: 20px; fill: var(--icon-neutral); }
.field__input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: #fff; font: inherit; font-size: var(--fs-base);
}
.field__input::placeholder { color: var(--text-neutral-subtle); }

.auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.checkbox { display: inline-flex; align-items: center; gap: 13px; color: var(--text-neutral-subtle); font-size: var(--fs-base); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--text-brand-cortina); cursor: pointer; }
.auth-form__forgot { color: var(--text-neutral-subtle); font-size: var(--fs-base); transition: color var(--dur-hover) ease; }
.auth-form__forgot:hover { color: #fff; }

.auth-form__submit {
  width: 100%; justify-content: center;
  padding: 15px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold); font-size: var(--fs-base);
}

.auth__copy { color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-black); text-align: center; }

/* animations sobres : entrée en fondu + léger glissement */
@keyframes auth-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .auth__logo  { animation: auth-rise .5s ease both; }
.js .auth-card   { animation: auth-rise .6s var(--ease-hover) .06s both; }
.js .auth__copy  { animation: auth-rise .7s ease .12s both; }
@media (prefers-reduced-motion: reduce) {
  .js .auth__logo, .js .auth-card, .js .auth__copy { animation: none; }
}

/* =========================================================
   PAGE BILLETTERIE — bandeau stats + filtres + liste d'événements
   Réutilise : hero--jeux, section-title, .stat-card, .filters/.filter, .tag, .btn
   ========================================================= */
.tickets__head { max-width: var(--container); margin: 40px auto 0; padding-inline: 50px; }

/* bandeau statistiques (navy, chiffres or) */
.tickets__stats {
  margin-top: 30px;
  padding: 48px 50px;
  background: var(--bg-band-primary);
}
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); max-width: var(--container); }
.tickets__stats .stat-card { padding: 26px 20px; }
.tickets__stats .stat-card__num { color: var(--text-accent-default); font-size: 54px; }
.tickets__stats .stat-card__num--date { font-size: 44px; }
.tickets__stats .stat-card__label { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .04em; color: var(--text-on-dark-subtle); }

.tickets__inner { max-width: var(--container); margin: 40px auto 70px; padding-inline: 50px; }

/* barre filtres + tri */
.tickets__bar { display: flex; flex-direction: column; gap: 22px; }
.tickets__filters {
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 22px;
}
.tickets__filters-title { font-weight: var(--fw-black); font-size: var(--fs-2xl); color: var(--text-primary-default); }
.filter-group { display: flex; flex-direction: column; gap: 12px; }
.filter-group__label { font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-neutral-subtle); }

.tickets__sort { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.tickets__sort label { color: var(--text-neutral-subtle); font-size: var(--fs-md); }
.select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-primary-default);
  padding: 11px 44px 11px 18px;
  border: 1px solid var(--border-neutral-default); border-radius: var(--radius-sm);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23213151' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  cursor: pointer; transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.select:focus-visible { outline: none; border-color: var(--border-info-focus); box-shadow: var(--ring-focus); }

/* liste d'événements */
.tickets__list { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.ticket {
  display: flex; align-items: stretch; gap: 0;
  background: #fff; border-radius: var(--radius-sm);
  border: 1px solid rgba(33, 49, 81, .07);
  overflow: hidden;
}
.ticket[hidden] { display: none; }
.ticket__date {
  flex: none; width: 118px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 18px 10px; text-align: center;
  background: var(--bg-accent-default); color: var(--text-primary-default);
}
.ticket__day { font-weight: var(--fw-black); font-size: 36px; line-height: 1; }
.ticket__month { font-weight: var(--fw-black); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.ticket__time { font-weight: var(--fw-bold); font-size: var(--fs-xs); opacity: .75; }
.ticket__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; justify-content: center; }
.ticket__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket__title { font-weight: var(--fw-black); font-size: var(--fs-xl); color: var(--text-primary-default); }
.ticket__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--text-primary-muted); font-size: var(--fs-sm); }
.ticket__cta { flex: none; align-self: center; margin-right: 26px; padding: 13px 26px; border-radius: var(--radius-sm); font-size: var(--fs-md); }

/* tags « soft » (fond teinté + texte coloré) propres à la billetterie */
.tag--soft-milan  { background: var(--bg-soft-milan);   color: var(--text-brand-milan); }
.tag--soft-cortina{ background: var(--bg-soft-cortina); color: var(--text-brand-cortina-soft); }
.tag--soft-sport  { background: var(--bg-soft-cortina); color: var(--text-brand-cortina-soft); }
.tag--soft-gold   { background: var(--bg-soft-accent);  color: var(--text-accent-strong); }

.tickets__empty { padding: 40px 0; text-align: center; color: var(--text-neutral-subtle); font-weight: var(--fw-bold); }

/* =========================================================
   RESPONSIVE — mobile / petite tablette (≤ 820px)
   ========================================================= */
@media (max-width: 820px) {
  body { overflow-x: hidden; }

  /* ---------- Header / navigation ---------- */
  .topbar { flex-direction: column; gap: 6px; padding: 10px 16px; text-align: center; }
  .topbar__dates { font-size: var(--fs-3xs); line-height: 1.4; }
  .header__inner { padding: 56px 16px 0; }

  .main-nav { margin-bottom: 60px; }
  .main-nav__bar { gap: 12px; padding: 6px 14px; }
  .main-nav__bar .nav-links,
  .main-nav__bar > .btn--light { display: none; }   /* -> tiroir */
  .nav-logo { margin-block: -28px; }
  .nav-logo img { height: 84px; width: auto; }

  /* Menu mobile : overlay plein écran moderne (glass/navy + accent cyan) */
  .nav-drawer {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 2px; padding: 0 36px;
    background:
      radial-gradient(120% 75% at 100% 0%, rgba(79, 168, 208, 0.20), transparent 60%),
      linear-gradient(160deg, #21314f 0%, #131b32 100%);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transform: scale(1.05);
    transition: opacity .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1), visibility .4s;
  }
  .main-nav.is-open .nav-drawer { opacity: 1; visibility: visible; transform: none; }

  .nav-drawer__nav { display: flex; flex-direction: column; width: 100%; }
  .nav-drawer__nav a {
    position: relative;
    color: #fff; font-weight: var(--fw-black); font-size: var(--fs-5xl); line-height: 1.55;
    text-decoration: none;
    transition: color .25s ease, padding-left .3s ease;
  }
  .nav-drawer__nav a::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 0; height: 3px; border-radius: 2px; background: var(--bg-brand-cortina);
    transition: width .3s ease;
  }
  .nav-drawer__nav a.is-active, .nav-drawer__nav a:hover { color: var(--text-brand-cortina); padding-left: 24px; }
  .nav-drawer__nav a.is-active::before, .nav-drawer__nav a:hover::before { width: 16px; }

  .nav-drawer__cta { align-self: flex-start; margin-top: 30px; color: var(--text-primary-default); font-size: 17px; padding: 14px 32px; }

  .nav-drawer__lang { list-style: none; display: flex; gap: 24px; margin-top: 46px; }
  .nav-drawer__lang a { color: rgba(255, 255, 255, 0.55); font-weight: var(--fw-bold); font-size: var(--fs-md); text-decoration: none; }
  .nav-drawer__lang .is-active a { color: #fff; }

  .nav-drawer__logo { position: absolute; top: 20px; left: 30px; }
  .nav-drawer__logo img { display: block; height: 78px; width: auto; }

  .nav-drawer__close {
    position: absolute; top: 24px; right: 24px;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
  }
  .nav-drawer__close::before, .nav-drawer__close::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 18px; height: 2px; background: #fff; border-radius: 2px;
  }
  .nav-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .nav-drawer__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

  .mininav__inner { padding: 8px 16px; gap: 14px; }
  .mininav__links { display: none; }

  .hero { min-height: 66vh; padding: 22px; border-radius: 18px; }
  .hero__title { font-size: 25px; max-width: 100%; }
  /* Cover accueil : contrôles vidéo en haut à droite sur mobile (sinon ils chevauchent les CTA empilés en bas) */
  .hero__controls { top: 14px; bottom: auto; right: 14px; }

  /* ---------- Titres de section ---------- */
  .section-title__logo { width: 92px; margin-right: -36px; }
  .section-title__big { font-size: var(--fs-4xl); }
  .section-title__small { font-size: var(--fs-xs); }
  .section-title__text { white-space: normal; }   /* les longs titres reviennent à la ligne */
  .section-title--sm .section-title__big { font-size: 32px; }

  /* ---------- Bandeaux diagonaux : pleine couverture sur mobile ---------- */
  .sports__band, .durability__band, .ambiances__band {
    width: 135%; height: 106%;
    transform: translate(-50%, -50%) rotate(-1.5deg);
  }
  .sports__band::before, .sports__band::after,
  .durability__band::before, .durability__band::after,
  .ambiances__band::before, .ambiances__band::after { display: none; }

  /* ---------- Nos actualités ---------- */
  .actus__inner { flex-direction: column; gap: 22px; }
  .actus__left { padding: 0 16px; gap: 28px; }
  .actus__grid { grid-template-columns: 1fr; }
  .actus__panel { width: auto; margin: 0 16px; border-radius: var(--radius-sm); padding: 26px 18px; gap: 28px; }
  .events { width: 100%; }

  /* ---------- Sports : carrousel tactile (swipe) ---------- */
  .sports__carousel { padding-inline: 0; }
  /* flèches en overlay au-dessus de la piste (la piste reste plein écran) */
  .sports__nav {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
  }
  .sports__nav--prev { left: 6px; }
  .sports__nav--next { right: 6px; }
  .sports__track {
    width: 100%; max-width: 100%;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px;
    scrollbar-width: none;
  }
  .sports__track::-webkit-scrollbar { display: none; }
  .sports__rail { transform: none !important; }     /* désactive la translation JS */
  .sport-card { scroll-snap-align: center; }

  /* ---------- Nos ambiances ---------- */
  .ambiances__cities { flex-direction: column; align-items: center; gap: 22px; padding: 16px; }
  .ambiances__cities figure { width: min(100%, 340px); }

  /* ---------- Application / Olympic Journey ---------- */
  .app { flex-direction: column; align-items: center; padding: 40px 20px; gap: 30px; }
  .app__intro { flex: none; width: 100%; gap: 28px; align-items: center; text-align: center; }
  .app__actions { justify-content: center; }
  .app-logo__top { font-size: 36px; }
  .app-logo__main { font-size: 40px; }
  .app-logo__sub { font-size: 17px; }
  .app__quote { font-size: var(--fs-lg); }
  .app__steps { flex: none; width: 100%; }
  .btn--lg { font-size: var(--fs-lg); padding: 16px; }

  /* ---------- Calendrier officiel ---------- */
  .calendar { padding: 40px 0; gap: 32px; }
  .calendar > :not(.calendar__bg) { padding-inline: 20px; }
  .calendar__dates { gap: 26px 18px; }
  .cal-date { flex: 1 1 42%; gap: 16px; }
  .cal-date__num { font-size: 52px; }
  .cal-date__month { font-size: var(--fs-3xl); }

  /* ---------- Durabilité ---------- */
  .durability__head { padding-inline: 20px; }
  .durability__cards { flex-direction: column; align-items: center; gap: 18px; padding: 14px; }
  .info-card--feature { width: min(100%, 360px); }

  /* ---------- FAQ ---------- */
  .faq__head { padding-inline: 20px; }
  .faq__list { padding-inline: 16px; }
  .faq-item__q { font-size: var(--fs-base); gap: 10px; }

  /* ---------- Footer ---------- */
  .footer-partners { justify-content: center; gap: 14px 18px; padding: 18px; }
  .footer-partners img { height: 38px; }
  .footer-main { padding: 40px 0; }
  .footer-main__inner { padding-inline: 20px; gap: 30px; }
  .footer-cta { align-self: center; }
  .footer-content { flex-direction: column; align-items: center; gap: 30px; }
  .footer-brand { justify-content: center; }
  .footer-nav { flex-direction: column; align-items: center; gap: 26px; width: 100%; }
  .footer-col { text-align: center; }
  .footer-bar { flex-direction: column; gap: 14px; text-align: center; padding: 16px 20px; }
  .footer-bar__links { justify-content: center; }

  /* ---------- Accessibilité : lisibilité du texte + cibles tactiles ---------- */
  /* Remontée des petits textes (≥ 13-14px) */
  .topbar__dates { font-size: var(--fs-2xs); }
  .event__detail, .footer-bar__copy { font-size: var(--fs-xs); }
  .footer-col a { font-size: var(--fs-sm); padding-block: 6px; }   /* + cible tactile */
  .faq-item__a { font-size: var(--fs-sm); line-height: 1.6; }
  .faq-item__a p { margin-bottom: 10px; }
  .info-card--steps .info-card__desc { font-size: var(--fs-sm); }
  .info-card--steps .info-card__title { font-size: var(--fs-xs); }
  .medals { font-size: var(--fs-xs); }

  /* Cibles tactiles élargies (~44px) */
  .nav-icon { padding: 11px; }
  .nav-burger { padding: 12px; }
  .sport-card__fav { padding: 8px; }
  .lang-switch a { display: inline-block; padding: 6px 2px; }
  .nav-drawer__lang a { padding: 6px 2px; }
  .footer-bar__links a { padding: 6px 4px; }

  /* ---------- Page « Les Jeux » ---------- */
  .hero--jeux { min-height: 230px; }
  .jeux { padding: 28px 0 40px; }
  .jeux__inner { flex-direction: column; gap: 28px; padding-inline: 16px; }
  .jeux__side { width: auto; position: static; }
  .jeux__side .actus__panel { width: auto; margin: 0; }
  .filters { gap: 8px; }
  .filters__search { margin-left: 0; width: 100%; }
  .filters__search input { width: 100%; }
  .sport-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .heritage { padding: 46px 0 44px; }
  .heritage__inner { padding-inline: 16px; }
  .section-header__eyebrow { font-size: var(--fs-sm); }
  .section-header__title { font-size: var(--fs-4xl); }

  /* timeline : colonne unique, ligne à gauche */
  .timeline { margin-top: 36px; }
  .timeline::before { left: 11px; }
  .tl-item,
  .tl-item--left,
  .tl-item--right { width: 100%; left: 0; padding-left: 44px; padding-right: 0; margin-bottom: 30px; }
  .tl-item--left .tl-node,
  .tl-item--right .tl-node { left: 0; right: auto; }

  .stats-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .stat-card { padding: 26px; }
  .stat-card__num { font-size: 52px; }
  .stat-card__label { font-size: 21px; }

  /* ---------- Page « Application » ---------- */
  .culture__head { padding-inline: 16px; }
  .culture__ribbon { padding-block: 40px; }
  .culture__inner { padding-inline: 16px; }
  .culture__group { font-size: var(--fs-2xl); padding-inline: 16px; margin-top: 30px; }
  .culture-grid { grid-template-columns: 1fr; gap: 16px; }

  .values { padding: 46px 0; }
  .values__inner { padding-inline: 16px; }
  .values__grid { grid-template-columns: 1fr; gap: 4px; }
  .values__item { padding: 18px 0; }
  .values__item + .values__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }

  .quote-banner { min-height: 230px; }
  .quote-banner__text { font-size: 25px; padding-inline: 16px; }

  /* ---------- Page « Sport » (curling) ---------- */
  .sport-intro { padding: 40px 0; }
  .sport-intro__inner { flex-direction: column; align-items: stretch; gap: 28px; padding-inline: 16px; }
  .sport-intro__title { font-size: var(--fs-4xl); }
  .sport-intro__stats { flex: auto; }

  .epreuves__head, .epreuves__list,
  .discipline__inner, .rules__inner, .facts__inner,
  .athletes__head, .athlete-grid { padding-inline: 16px; }
  .epreuve { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .epreuve__btn { justify-self: start; margin-top: 10px; }

  .discipline { padding: 40px 0; }
  .discipline__text h3 { font-size: var(--fs-3xl); }
  .discipline__media { aspect-ratio: 16 / 10; }

  .rule-grid { grid-template-columns: 1fr; gap: 16px; }
  .athlete-card { scroll-snap-align: center; }   /* carrousel swipe (comme les sports) */

  /* ---------- Page « Ambiance » (Milan / Cortina) ---------- */
  .sites__inner, .practical__head, .practical__grid,
  .atmo__head, .atmo__gallery { padding-inline: 16px; }
  .sites { padding: 28px 0 40px; }
  .venue-grid { grid-template-columns: 1fr; gap: 16px; }
  .venue-card__name { font-size: 21px; }
  .practical__ribbon { padding-block: 40px; }
  /* carrousel « cartes qui dépassent » (peek) : défilement horizontal + snap,
     la carte suivante dépasse au bord droit */
  .practical__grid {
    display: flex; grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 14px;          /* 16px de marge = amorce du peek de gauche */
    scroll-padding-inline: 16px;
    scrollbar-width: none;            /* Firefox */
  }
  .practical__grid::-webkit-scrollbar { display: none; }   /* WebKit */
  .practical__grid::after { content: ""; flex: 0 0 2px; }  /* respiration de fin */
  .practical-card {
    flex: 0 0 82%;                    /* < 100% -> la carte suivante dépasse */
    scroll-snap-align: start;
  }
  .atmo__gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .atmo__gallery img:first-child { grid-column: span 2; grid-row: span 1; }

  /* ---------- Page Compte / Connexion ---------- */
  .auth__screen { gap: 30px; padding: 32px 16px; background-attachment: scroll; }
  .auth__logo img { height: 104px; }
  .auth-card { padding: 34px 22px; gap: 32px; }
  .auth-card__title { font-size: var(--fs-3xl); }
  .field__label { font-size: var(--fs-lg); }

  /* ---------- Page Billetterie ---------- */
  .tickets__head, .tickets__inner { padding-inline: 16px; }
  .tickets__stats { padding: 30px 16px; }
  .stats-grid--4 { grid-template-columns: 1fr 1fr; }
  .tickets__stats .stat-card__num { font-size: 42px; }
  .tickets__stats .stat-card__num--date { font-size: var(--fs-5xl); }
  .tickets__filters { padding: 20px; }
  .tickets__sort { justify-content: flex-start; }
  .ticket { flex-direction: column; }
  .ticket__date { width: 100%; flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; padding: 12px; }
  .ticket__day { font-size: 26px; }
  .ticket__body { padding: 18px 20px; }
  .ticket__cta { align-self: stretch; justify-content: center; margin: 0 20px 20px; }
}