/* ============================================================
   CHORALE — page d'accueil modernisée (essai)
   Vocabulaire emprunté au site de la LNB : surfaces de verre,
   grands rayons, cartes claires pour les logos. Couleurs et
   polices du club inchangées.
   ============================================================ */

:root {
  /* Le bleu du club, celui de ses visuels : #172b73. Tout le reste de la
     gamme en découle — un cran plus profond pour ce qui doit reculer, un
     cran plus clair pour ce qui doit avancer. */
  --v2-encre: #172b73;        /* bleu du club, fond de tout le site */
  --v2-encre-nuit: #0f1c4d;   /* fond profond */
  --v2-encre-clair: #23409c;
  --v2-orange: #f15b1b;
  --v2-gris: #727696;

  --v2-verre: linear-gradient(90.21deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 100%);
  /* verre teinté : le reflet blanc posé sur une base bleue du club, pour
     que la barre tienne aussi devant un visuel clair */
  --v2-verre-bleu: linear-gradient(90.21deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%),
                   linear-gradient(180deg, rgba(23,43,115,.80), rgba(13,24,68,.86));
  --v2-verre-bord: rgba(255,255,255,.22);

  /* Le prochain match se signale en orange : c'est la seule rencontre de
     la liste qui appelle une action, et le bandeau de son chrono comme le
     liseré de sa carte portent la même couleur. */
  --v2-chrono-fond: linear-gradient(90deg, #c93c0c 0%, #ee5c19 100%);
  --v2-chrono-bord: rgba(238,92,25,.75);

  /* Verre épais des deux barres flottantes, celle du haut et celle du
     bas. Trois couches : le reflet du bord supérieur, où la lumière
     accroche la tranche ; une lueur diffuse au pied ; puis la teinte du
     club, dense — la barre passe devant des photos claires comme devant
     des fonds sombres, et le texte doit rester lisible dans les deux cas,
     ce qu'une vitre franchement transparente ne permet pas.
     Le flou et la saturation font le reste : le fond transparaît en
     couleurs vives plutôt qu'en gris, c'est ce qui donne la matière. */
  /* Du verre, pas du plastique bombé. Ce qui donnait l'aspect 3D, c'était
     le dégradé blanc massif en haut (22 %) et l'arête à 42 % : deux
     lumières peintes sur la surface, là où le vrai verre ne fait que
     laisser passer ce qu'il y a derrière. On enlève donc la peinture et
     on met la charge sur le flou — c'est lui, et la saturation, qui font
     la matière. Le fond ne teinte plus qu'à moitié : assez pour que le
     texte tienne devant une photo claire, pas assez pour boucher.
     L'arête haute reste, mais à peine, et le liseré fait le tour au même
     niveau au lieu de s'allumer d'un seul côté. */
  --v2-glace:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(16,29,80,.58);
  --v2-glace-flou: blur(38px) saturate(200%) brightness(1.03);
  --v2-glace-relief:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.17);
  --v2-biseau: -3.6px 3.6px 3.6px 0 rgba(255,255,255,.10) inset,
                3.6px -3.6px 3.6px 0 rgba(165,165,165,.10) inset;

  --v2-sortie: cubic-bezier(.23, 1, .32, 1);
  /* Courbe de dépliage : celle de sortie part trop fort — un tiroir
     atteignait 80 % de son opacité en 80 ms et se lisait comme une
     apparition brutale. Celle-ci démarre doucement et finit longuement,
     on voit le mouvement. */
  --v2-deplie: cubic-bezier(.38, .02, .18, 1);
  --v2-doux: cubic-bezier(.4, 0, .2, 1);
  --v2-r: 20px;          /* cartes, images, blocs */
  --v2-r-petit: 10px;    /* étiquettes, pastilles de texte */
  /* la colonne de lecture d'un article : une seule valeur, pour que le
     titre, l'image, le texte et la galerie tombent au même bord.
     En ch elle variait d'un bloc à l'autre, la mesure dépendant de la
     police du bloc — eurostile pour les titres, nimbus pour le corps. */
  --v2-colonne: 760px;
  /* Les surfaces de contenu sont peintes, pas floutées : le verre n'a de
     sens que posé sur quelque chose — une photo, la page qui défile
     dessous. Sur un fond uni il n'ajoute que du bruit. */
  /* la largeur de lecture d'une page intérieure : la même partout, celle
     des articles. L'accueil garde la pleine largeur du cadre. */
  --v2-page: 900px;
  /* Les deux fonds du site en place, relevés sur ses pages : un bleu
     clair pour les fiches de personnes, qui les détache du fond ; un
     bleu profond pour les rencontres, qui met les écussons en valeur. */
  --v2-carte: #233c8f;        /* fiches, blocs, listes */
  --v2-carte-bord: rgba(255,255,255,.10);
  --v2-carte-nuit: #101c4a;   /* rencontres de l'agenda et du calendrier */
  /* Garde autour de l'écusson : demi-largeur de l'écusson + l'air qu'on
     lui laisse. Les deux côtés de la barre s'arrêtent à cette distance
     du milieu, jamais moins — c'est ce qui empêche un logo de venir
     toucher le cercle. */
  --v2-ecusson: 104px;
  --v2-garde: 14px;
}

.v2 {
  margin: 0;                 /* le hero doit toucher les bords de l'écran */
  background: var(--v2-encre);
  color: #fff;
  font-family: nimbus-sans, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 img { max-width: 100%; display: block; }
.v2 a { color: inherit; text-decoration: none; }
.v2-wrap { width: min(1400px, 100% - 48px); margin-inline: auto; }



/* ---------------- navbar de verre ---------------- */
.v2-barre {
  position: fixed; top: 28px; left: 0; right: 0; z-index: 60;
  width: min(1400px, 100% - 48px); margin-inline: auto;
  pointer-events: none;
}
.v2-barre > * { pointer-events: auto; }

.v2-nav {
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: var(--v2-r);
  background: var(--v2-glace); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: var(--v2-glace-flou);
  backdrop-filter: var(--v2-glace-flou);
  box-shadow: var(--v2-glace-relief), 0 18px 44px -26px rgba(0,0,0,.55);
}
/* flex: none — sans quoi le ruban, qui réclame toute la place, écrase le
   bouton du menu et le label de la ligue */
.v2-nav-cote { display: flex; align-items: center; gap: 8px; flex: none; }

/* le label de la ligue, à côté du bouton, séparé par un filet */
.v2-nav-ligue {
  height: 46px; width: auto; flex: none;
  margin-left: 6px; padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.18);
}
/* L'écusson de la ligue vient entre le label et l'équipementier : la
   rangée s'équilibre, et le vide qui restait là se remplit. Un rond
   plein pèse plus qu'un mot posé sur la même hauteur — il est donc
   réglé un peu en dessous du label. */
.v2-nav-lnb {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px;
  margin-left: 13px; padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.18);
  box-sizing: content-box;
  color: #fff; opacity: .95;
  transition: opacity 220ms var(--v2-sortie), transform 140ms var(--v2-sortie);
}
.v2-nav-lnb svg { display: block; width: 100%; height: 100%; }
.v2-nav-lnb:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .v2-nav-lnb:hover { opacity: 1; }
}

.v2-nav-cote.is-fin { justify-content: flex-end; }

/* l'écusson est l'ancre de la barre : posé au milieu exact, quel que soit
   ce que portent les deux côtés, et débordant en haut comme en bas */
.v2-nav-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 104px; height: 104px;
  /* ombre courte : elle détache l'écusson de la photo sans le noyer */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.v2-nav-logo img { width: 100%; height: 100%; object-fit: contain; }

/* les partenaires majeurs, un à la fois, dans un encart borné à droite.
   La fenêtre ne montre qu'une ligne ; la piste monte d'un cran. */
.v2-sponsor {
  flex: none; width: 132px; height: 46px; overflow: hidden;
  margin-right: 12px; padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,.18);
}
.v2-sponsor-piste { display: flex; flex-direction: column; }
.v2-sponsor img {
  flex: none; width: 100%; height: 46px;
  object-fit: contain; object-position: center;
  opacity: .82;
  -webkit-user-drag: none; user-select: none;
}

/* l'écusson passe devant */
.v2-nav-logo { z-index: 2; }

/* l'équipementier, à la suite du label de la ligue. Même filet de
   séparation, même hauteur d'œil : les deux marques se répondent. */
/* Le tracé n'occupe que 81 % de son viewBox carré : à hauteur de boîte
   égale, il paraîtrait plus petit que le label de la ligue. La boîte est
   donc calée un cran au-dessus pour que les deux marques pèsent pareil. */
.v2-nav-equip {
  height: 40px; width: auto; flex: none;
  margin-left: 13px; padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.18);
  box-sizing: content-box;
  opacity: .95;
}

/* pastille de navigation — la maison, à gauche de la barre */
.v2-rond-lien {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.3);
  color: #fff; text-decoration: none;
  transition: background-color 220ms var(--v2-sortie), transform 140ms var(--v2-sortie);
}
.v2-rond-lien span { display: grid; place-items: center; line-height: 0; }
.v2-rond-lien:active { transform: scale(.96); }
.v2-rond-lien:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }

/* bouton d'appel du menu : les traits se croisent à l'ouverture */
.v2-menu-btn {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; padding: 0; border-radius: 14px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer;
  transition: background-color 220ms var(--v2-sortie), transform 140ms var(--v2-sortie);
}
.v2-menu-btn:active { transform: scale(.96); }
.v2-menu-icone { position: relative; flex: none; width: 18px; height: 12px; }
.v2-menu-icone i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
  transition: transform 340ms var(--v2-sortie);
}
.v2-menu-icone i:first-child { top: 0; }
.v2-menu-icone i:last-child { bottom: 0; }
.v2-menu-btn[aria-expanded="true"] .v2-menu-icone i:first-child { transform: translateY(5px) rotate(45deg); }
.v2-menu-btn[aria-expanded="true"] .v2-menu-icone i:last-child { transform: translateY(-5px) rotate(-45deg); }

/* ---------------- bouton de verre ---------------- */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 22px; border-radius: 18px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--v2-biseau);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  color: #fff; cursor: pointer;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  transition: background-color 320ms var(--v2-sortie), color 320ms var(--v2-sortie),
              transform 140ms var(--v2-sortie);
}
.v2-btn .v2-fleche {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  background: var(--v2-orange); color: #fff; flex: none;
  transition: transform 320ms var(--v2-sortie);
}
.v2-btn:active { transform: scale(.985); }
.v2-btn.is-plein { background: var(--v2-orange); border-color: transparent; box-shadow: none; }

/* version courte, pour tenir dans la navigation */
.v2-btn.is-compact {
  gap: 10px; padding: 9px 16px; border-radius: 14px;
  font-size: 12px; letter-spacing: .08em;
}
/* La pastille flèche, quand elle revient, reprend sa place à droite :
   le creux de 8px lui est réservé, il ne vaut que pour elle. */
.v2-btn:has(.v2-fleche) { padding: 8px 8px 8px 22px; }
.v2-btn.is-compact:has(.v2-fleche) { padding: 6px 6px 6px 16px; }
.v2-btn.is-compact .v2-fleche { width: 34px; height: 34px; border-radius: 11px; }
.v2-btn.is-compact:not(.is-plein) .v2-fleche { background: rgba(255,255,255,.14); }
/* version nue, sans pastille : elle rend sa place aux partenaires */
.v2-btn.is-nu { gap: 0; padding: 13px 20px; }
.v2-btn-ico { display: none; }

/* ---------------- hero ---------------- */
.v2-hero {
  position: relative; margin: 0;
  width: 100%; border-radius: 0; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.v2-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  /* léger débord : il évite les bords nus au fondu entre deux visuels */
  transform: scale(1.04);
}
.v2-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    /* fondu final vers le fond de page : le hero ne s'arrête pas net,
       il se dissout dans le bleu de la section suivante */
    linear-gradient(180deg,
                    rgba(23,43,115,0) 62%, rgba(23,43,115,.45) 82%,
                    rgba(23,43,115,.86) 94%, var(--v2-encre) 100%),
    /* voile de lisibilité sur la photo */
    linear-gradient(180deg, rgba(18,20,32,.62) 0%, rgba(18,20,32,.12) 22%,
                    rgba(18,20,32,.5) 58%, rgba(18,20,32,.9) 100%);
}
/* Le pied de la une : le titre à gauche, les repères de lecture à
   droite, sur la même ligne de base. Empilés, ils poussaient le titre
   vers le haut de l'image et laissaient un vide sous les repères. */
.v2-hero-pied {
  width: min(1400px, 100% - 48px); margin-inline: auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px 40px; padding-bottom: 40px;
}
.v2-hero-txt {
  width: auto; margin: 0; min-width: 0; flex: 1 1 auto;
  padding: 0 0 6px; max-width: none;
}
.v2-hero-txt > div { max-width: 940px; }
.v2-hero-date {
  display: block; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}
/* La marge basse reste petite : le lien qui suit est en inline-block,
   ses marges ne fusionnent pas avec celles du titre. À 26 px ici et
   18 px sur le lien, le trou faisait 44 px, trois fois l'écart entre la
   date et le titre. Le bloc se lisait en morceaux détachés. */
.v2-hero h1,
.v2-hero-txt h2 {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.03; font-weight: 700; text-transform: uppercase;
  margin: 0 0 4px; letter-spacing: -.01em;
}
.v2-points {
  display: flex; align-items: center; gap: 8px; padding: 26px 0 46px;
  width: min(1400px, 100% - 48px); margin-inline: auto;
}

/* ---------------- titres de section ---------------- */
.v2-section { padding: 84px 0 0; scroll-margin-top: 108px; }
/* Les trois blocs s'alignaient sur leur bas : le titre étant bien plus
   haut que les onglets, ceux-ci se retrouvaient collés à sa ligne de
   pied. On les centre, et le bouton et les onglets forment un ensemble. */
.v2-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 24px; margin-bottom: 28px; flex-wrap: wrap;
}
.v2-tete > div:first-child { flex: 1 1 260px; }
/* onglets et bouton : un même groupe, aligné à droite */
.v2-tete > .v2-onglets { margin-left: auto; }
.v2-tete > .v2-btn { flex: none; }
.v2-tete h2 {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 700; text-transform: uppercase; margin: 0; letter-spacing: -.01em;
}
.v2-tete p { margin: 10px 0 0; color: rgba(255,255,255,.55); font-size: .95rem; line-height: 1.45; }

/* Un lien souligné plutôt qu'un bouton : sur une photo pleine page, le
   bouton pesait autant que le titre qu'il accompagne. Le même trait
   qu'au roster, pour que les deux se lisent pareil. */
.v2-hero-lien {
  display: inline-block; margin-top: 16px; padding-bottom: 3px;
  border-bottom: 2px solid var(--v2-orange);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #fff;
  transition: color 220ms var(--v2-sortie), border-color 220ms var(--v2-sortie);
}
@media (hover: hover) and (pointer: fine) {
  .v2-hero-lien:hover { color: var(--v2-orange); }
}

/* les flèches encadrent les repères, à droite du titre */
.v2-hero-nav {
  display: flex; align-items: center; gap: 14px;
  flex: none; margin: 0; padding: 0 0 6px;
}
/* dans la barre, les repères ne portent plus ni largeur ni marge : le
   cadrage est celui de la barre, une bonne fois */
.v2-hero-nav .v2-points { width: auto; margin: 0; padding: 0; }

/* ---------------- cartes de match ---------------- */
/* Tout est centré et se lit dans l'ordre où l'on décide d'aller au
   match : quelle compétition, quel jour, à quelle heure, où, qui joue,
   comment y aller. Les écussons ferment la carte — ils ne renseignent
   pas, ils signent. */
.v2-matchs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.v2-match {
  position: relative; padding: 22px; border-radius: var(--v2-r);
  background: var(--v2-carte-nuit); border: 1px solid var(--v2-carte-bord);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.v2-match.is-next { border-color: var(--v2-chrono-bord); }
/* Toutes les cartes du rail réservent la même bande en pied : celle du
   prochain match y pose son chrono, les autres la laissent vide. Sans
   cette réserve, une seule carte aurait grandi et le rail aurait boité. */
/* La réserve vaut la hauteur du décompte, pas davantage : au-delà, la
   carte du prochain match creusait un vide au-dessus de ses écussons que
   les autres n'avaient pas, et le rail perdait son alignement. */
.v2-matchs .v2-match:not(.est-large),
.v2-rail .v2-match:not(.est-large) { padding-bottom: 74px; }
/* Nu, sans cadre ni fond : une plaque de plus dans une carte qui en
   compte déjà — l'étiquette, le bouton, les écussons — alourdissait
   l'ensemble. Le décompte se lit très bien posé sur la carte. */
.v2-match:not(.est-large) .v2-rebours {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  display: grid; justify-items: center; gap: 2px;
  margin: 0; padding: 0; background: none; border: 0;
}
.v2-match:not(.est-large) .v2-rebours-quoi {
  font-size: 8.5px; letter-spacing: .12em; line-height: 1;
  white-space: nowrap; color: rgba(255,255,255,.45);
}
.v2-match:not(.est-large) .v2-rebours-chrono { gap: 2px; }
.v2-match:not(.est-large) .v2-rebours-case { gap: 2px; }
.v2-match:not(.est-large) .v2-rebours-case b { font-size: 19px; }
.v2-match:not(.est-large) .v2-rebours-case i { font-size: 7px; color: rgba(255,255,255,.5); }
.v2-match:not(.est-large) .v2-rebours-pt { font-size: 13px; }
.v2-match.est-large.a-rebours { overflow: hidden; }

.v2-match-comp {
  padding: 6px 13px; border-radius: 8px; background: rgba(255,255,255,.10);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 13px;
}

/* Le jour de la semaine porte l'information — on sait tout de suite si
   c'est un soir de semaine ou un week-end ; l'heure le complète. */
.v2-match-quand {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 4px 10px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 17px; text-transform: uppercase; letter-spacing: .01em;
}
.v2-match-quand b { font-weight: 700; }
.v2-match-quand span { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Le lieu se lit en blanc comme le reste : en gris, il passait pour une
   note de bas de page alors que c'est une des trois informations qui
   situent la rencontre. */
.v2-match-lieu {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #fff; font-size: 14px;
}
.v2-match-lieu svg { width: 16px; height: 16px; opacity: .8; }

/* Sous 340 px, « Jeudi 3 septembre 2026 » ne tient plus à 17 px et se
   coupait en deux lignes avant même que l'heure ne bascule. Un point de
   corps en moins lui rend sa ligne entière : la date reste d'un bloc,
   l'heure passe dessous. C'est le seul écran où cela se joue, d'où la
   règle plutôt qu'une taille fluide qui rapetisserait partout. */
@media (max-width: 340px) {
  .v2-match-quand { font-size: 14.5px; }
}
.v2-match-lieu svg { flex: none; }

.v2-match-noms {
  margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1.15;
  /* `align-items` centre les noms l'un sous l'autre, mais il ne dit rien
     du texte à l'intérieur : un nom qui se coupe en deux lignes, comme
     « Gravelines-Dunkerque », voyait sa seconde ligne partir à gauche
     pendant que l'autre équipe restait au milieu. */
  text-align: center;
}
/* Le « vs » écrit entre les deux noms fait doublon avec celui des
   écussons, juste dessous : les cartes du rail se lisent comme celles du
   calendrier, où il est déjà masqué. */
.v2-match-noms i { display: none; }

.v2-match-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.v2-match-cta .v2-btn { flex: 1 1 auto; justify-content: center; }

/* poussés en bas de carte : quelle que soit la longueur des noms ou du
   lieu, les écussons s'alignent d'une carte à l'autre dans le rail */
.v2-match-eq {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.v2-match-eq img { width: 86px; height: 86px; object-fit: contain; }
/* Le « VS » sépare les deux écussons : à 13 px et presque transparent,
   il disparaissait entre eux. Il prend la taille et l'encre d'un élément
   de la carte, dans l'eurostile du site comme les scores qu'il remplace. */
.v2-match-vs {
  font-family: eurostile, nimbus-sans, sans-serif; font-weight: 700;
  color: rgba(255,255,255,.72); font-size: 26px; letter-spacing: .06em;
  line-height: 1;
}
/* le score remplace le « vs » sur les rencontres jouées */
.v2-match-score {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 1.6rem; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.v2-match-score b {
  padding: 3px 9px; border-radius: 9px; font-weight: 900;
  background: transparent; color: #fff;
}
/* le vainqueur en négatif : on lit le résultat sans comparer les chiffres */
.v2-match-score b.est-vainqueur { background: #fff; color: var(--v2-encre); }
.v2-match-score i { font-style: normal; opacity: .4; font-size: .8em; }
/* Le liseré vert des victoires a sauté : le score en négatif dit déjà qui
   a gagné, et une carte sur deux qui change de couleur de bord agitait la
   liste sans rien apprendre. Les classes restent, elles servent au score. */
.v2-match.est-gagne .v2-match-score b:not(.est-vainqueur) { color: rgba(255,255,255,.6); }
.v2-match.est-perdu .v2-match-score b:not(.est-vainqueur) { color: rgba(255,255,255,.6); }

/* La version du calendrier : même carte, même ordre, mais seule sur sa
   ligne — d'où plus d'air et des écussons plus grands. */
.v2-match.est-large {
  max-width: var(--v2-page); margin-inline: auto;
  padding: 26px 26px 28px; gap: 14px;
}
.v2-match.est-large[hidden] { display: none; }
.v2-match.est-large .v2-match-noms { font-size: 25px; }
.v2-match.est-large .v2-match-eq { gap: 30px; padding-top: 14px; }
.v2-match.est-large .v2-match-eq img { width: 116px; height: 116px; }
.v2-match.est-large.is-next {
  border-color: var(--v2-chrono-bord); border-width: 2px; background: #0c1743;
}

/* L'étiquette du prochain match, posée dans la carte et non à cheval sur
   son bord : à cheval, elle mordait sur la carte du dessus et se lisait
   comme une pastille collée après coup. */
.v2-match-marque {
  align-self: center; margin-bottom: 2px;
  padding: 7px 16px; border-radius: var(--v2-r-petit);
  background: var(--v2-orange); color: #fff; white-space: nowrap;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}

/* le calendrier empile ses rencontres */
.v2-calendrier { display: grid; gap: 16px; padding-bottom: 84px; }
.v2-calendrier > [hidden] { display: none; }

/* ---------------- onglets de rubrique ---------------- */
.v2-onglets {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;                 /* ils se rangent près du bouton */
  padding: 5px; border-radius: var(--v2-r);
  background: rgba(255,255,255,.06); border: 1px solid var(--v2-verre-bord);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.v2-onglet {
  border: 0; padding: 9px 16px; border-radius: 12px; background: transparent;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6); cursor: pointer; white-space: nowrap;
  transition: color 220ms var(--v2-sortie), background-color 220ms var(--v2-sortie),
              transform 140ms var(--v2-sortie);
}
.v2-onglet.on { background: var(--v2-orange); color: #fff; }
.v2-onglet:active { transform: scale(.97); }
.v2-onglet:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }

/* le panneau qui prend la main se pose, il n'apparaît pas d'un bloc */
@keyframes v2Entre { from { opacity: 0; transform: translateY(8px); } }
.v2-panneau.v2-entre { animation: v2Entre 260ms var(--v2-sortie); }

/* ---------------- cartes d'article ---------------- */
/* rail horizontal : défilement natif, accroche sur les cartes,
   barre de défilement masquée — les points servent de repère */
.v2-rail {
  display: flex;
  align-items: stretch;      /* toutes les cartes à la même hauteur */
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.v2-rail::-webkit-scrollbar { display: none; }
/* largeur figée : les cartes ne se compriment pas, le rail déborde
   et devient défilable — c'est ce qui rend le glissement possible */
.v2-rail > * { scroll-snap-align: start; flex: 0 0 300px; }
/* prise en main à la souris : la main ouverte annonce qu'on peut tirer */
@media (hover: hover) and (pointer: fine) {
  .v2-rail.v2-glissable { cursor: grab; }
  .v2-rail.v2-glisse { cursor: grabbing; }
}
/* pendant le glissement on coupe l'accroche : elle se rebattrait contre
   le doigt. Elle revient au relâchement, pour reposer sur une carte */
.v2-rail.v2-glisse {
  scroll-snap-type: none;
  user-select: none; -webkit-user-select: none;
}
.v2-rail.v2-glisse > * { transition: none; }
/* les images ne doivent pas partir en glisser-déposer natif */
.v2-rail img { -webkit-user-drag: none; user-select: none; }
@media (min-width: 1200px) {
  .v2-rail > * { flex-basis: calc((100% - 54px) / 4); }
}

/* barre de navigation d'un rail : les flèches encadrent les repères,
   pour qu'on puisse avancer d'un cran sans viser un point de 8 px */
/* Une seule ligne sous le rail : la navigation à gauche, le renvoi au
   bout. Posé en haut, à côté du titre, il ouvrait une ligne pour lui
   seul et éloignait le geste — on décide d'aller voir tout le calendrier
   après avoir fait défiler, pas avant. */
.v2-nav-rail {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px;
}
.v2-nav-rail .v2-plots { margin-top: 0; }
.v2-nav-rail-tout { margin-left: auto; flex: none; }
/* Un voile blanc sur le bleu du club virait au gris et se posait mal sur
   les photos des rubans : les flèches prennent le bleu du club, floutées
   comme les barres, avec un liseré assez net pour les détacher d'un
   visuel clair. */
.v2-fleche-rail {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(23,43,115,.66); border: 1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  color: #fff; cursor: pointer;
  transition: background-color 220ms var(--v2-sortie), border-color 220ms var(--v2-sortie),
              opacity 220ms var(--v2-sortie), transform 140ms var(--v2-sortie);
}
.v2-fleche-rail:active { transform: scale(.93); }
.v2-fleche-rail:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }
/* au bout du rail, la flèche s'éteint plutôt que de disparaître : la
   barre garde sa largeur, rien ne saute */
.v2-fleche-rail:disabled {
  opacity: .32; cursor: default;
  background: rgba(23,43,115,.4); border-color: rgba(255,255,255,.14);
}

/* ---------------- repères de position ---------------- */
/* une même écriture pour tous les défilés de la page : des pastilles
   rondes, et la vue courante qui s'étire en pilule */
.v2-plots { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.v2-point, .v2-plot {
  width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255,255,255,.26); cursor: pointer; flex: none;
  transition: width 400ms var(--v2-sortie), background-color 300ms var(--v2-sortie);
}
.v2-point.on, .v2-plot.on { width: 32px; background: var(--v2-orange); }
.v2-point:focus-visible, .v2-plot:focus-visible {
  outline: 2px solid var(--v2-orange); outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .v2-fleche-rail:not(:disabled):hover {
    background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3);
  }
  .v2-point:hover, .v2-plot:hover { background: rgba(255,255,255,.55); }
  .v2-point.on:hover, .v2-plot.on:hover { background: var(--v2-orange); }
}
/* ---------------- composition en bento ---------------- */
/* le dernier article tient la moitié gauche, les trois suivants se
   rangent en colonne : une lecture qui hiérarchise sans texte en plus */
.v2-bento {
  display: grid;
  grid-template-columns: 1.78fr 1fr;
  /* trois cartes puis le renvoi, qui ferme la colonne : un bouton posé
     seul sous la grille rompait le bento au lieu d'en faire partie */
  grid-template-rows: repeat(3, minmax(0, 176px)) auto;
  gap: 16px;
}
.v2-bento > .est-grande { grid-column: 1; grid-row: 1 / span 4; }

/* une carte, c'est une image et rien d'autre : le texte se pose dessus */
/* le même filet que les rencontres de l'agenda, le renvoi de rubrique et
   les vues de galerie : sur une photo à fond perdu, il redonne un bord à
   la carte au lieu de la laisser fondre dans la page. */
.v2-carte {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--v2-r);
  border: 1px solid var(--v2-carte-bord);
  background: linear-gradient(150deg, #1e389a, var(--v2-encre));
  text-decoration: none; color: #fff;
  transition: transform 320ms var(--v2-sortie), box-shadow 320ms var(--v2-sortie),
              border-color 300ms var(--v2-sortie);
}
.v2-carte-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--v2-doux);
}
/* faute de visuel, l'écusson au centre plutôt qu'une image cassée.
   Taille fixe : un remplissage en pourcentage l'écrasait dans les
   cartes plates de la colonne */
.v2-carte-img.est-ecusson {
  inset: 50% auto auto 50%;
  width: 108px; height: 108px;
  transform: translate(-50%, -50%);
  object-fit: contain; opacity: .34;
}
.v2-carte.est-grande .v2-carte-img.est-ecusson { width: 208px; height: 208px; }
/* l'écusson ne bouge pas au survol, il n'a rien à révéler */
.v2-carte::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,17,28,.94) 0%, rgba(15,17,28,.66) 30%,
                              rgba(15,17,28,.12) 62%, rgba(15,17,28,.04) 100%);
}
.v2-carte-txt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px;
}
.v2-carte-date {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums;
}
.v2-carte-titre {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 1rem; line-height: 1.24; font-weight: 700; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-carte.est-grande .v2-carte-txt { padding: 28px; gap: 10px; }
.v2-carte.est-grande .v2-carte-titre {
  font-size: clamp(1.25rem, 1.9vw, 1.85rem); -webkit-line-clamp: 3;
}
.v2-carte:active { transform: scale(.995); }
.v2-carte:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }

/* ---------------- boutique et bandeaux ---------------- */
/* un grand sur toute la largeur, deux à égalité en dessous */
.v2-trio {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  /* collés au bento qui précède : même respiration qu'entre deux cartes */
  margin-top: 16px;
}
.v2-trio > .v2-boutique { grid-column: 1 / -1; }

.v2-boutique {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr;
  align-items: center; gap: 24px;
  border-radius: var(--v2-r); overflow: hidden;
  background: var(--v2-encre-clair);          /* le bleu du site actuel */
  text-decoration: none; color: #fff;
  transition: transform 320ms var(--v2-sortie), box-shadow 320ms var(--v2-sortie);
}
.v2-boutique-img {
  display: block; width: 100%; height: auto;
  transition: transform 700ms var(--v2-doux);
}
.v2-boutique-txt { padding: 28px 40px 28px 0; text-align: right; }
.v2-boutique-titre {
  margin: 0; font-family: nimbus-sans, sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 2rem); font-weight: 900; line-height: 1.14;
}
.v2-boutique-titre span { color: #ff8a4c; }   /* l'accent : #3b76c5 sur ce
   bleu donnait 2,01:1, « aux couleurs » disparaissait dans le fond */
.v2-boutique-sous {
  margin: 8px 0 0; font-style: italic;
  font-size: clamp(.9rem, 1.15vw, 1.1rem); color: rgba(255,255,255,.9);
}
/* le bouton de la boutique garde sa forme et son rose */
.v2-boutique-cta {
  display: inline-block; margin-top: 20px;
  padding: 9px 26px; border-radius: 0 999px 999px 999px;
  background: #ef4b86; color: #fff;
  font-family: nimbus-sans, sans-serif; font-size: clamp(1rem, 1.4vw, 1.3rem);
  transition: background-color 300ms var(--v2-sortie);
}
.v2-boutique-cta b { font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-weight: 400; }
.v2-boutique-cta i { font-style: normal; font-size: .54em; }

.v2-barre-part {
  display: block; border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.04);
  transition: transform 320ms var(--v2-sortie), box-shadow 320ms var(--v2-sortie);
}
.v2-barre-part img {
  display: block; width: 100%; height: auto;
  transition: transform 700ms var(--v2-doux);
}
.v2-boutique:active, .v2-barre-part:active { transform: scale(.995); }
.v2-boutique:focus-visible, .v2-barre-part:focus-visible {
  outline: 2px solid var(--v2-orange); outline-offset: 3px;
}

/* ---------------- annonce du moment ---------------- */
/* posée entre la une et l'agenda, dans la largeur du cadre. Les
   dimensions déclarées réservent sa place avant que l'image n'arrive. */
.v2-annonce {
  display: block; margin: 34px 0 0;
  border-radius: var(--v2-r); overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  transition: transform 320ms var(--v2-sortie), box-shadow 320ms var(--v2-sortie);
}
.v2-annonce img {
  display: block; width: 100%; height: auto;
  transition: transform 700ms var(--v2-doux);
}
.v2-annonce:active { transform: scale(.995); }
.v2-annonce:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }

/* ---------------- bandeau partenaire ---------------- */
/* posé à cheval : sa moitié basse mord sur la vidéo qui suit, ce qui
   soude les deux blocs au lieu de les empiler */
.v2-bandeau {
  position: relative; z-index: 2;
  width: min(1400px, 100% - 48px);
  margin: 84px auto -90px;
}
.v2-bandeau-lien {
  display: block; border-radius: var(--v2-r); overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 64px -30px rgba(0,0,0,.8);
  transition: transform 320ms var(--v2-sortie), box-shadow 320ms var(--v2-sortie);
}
.v2-bandeau img { display: block; width: 100%; height: auto; }
.v2-bandeau-lien:active { transform: scale(.995); }

/* ---------------- appel aux réseaux ---------------- */
/* pleine largeur, comme sur le site actuel : la vidéo tient tout le cadre
   et se fond dans la page par le haut comme par le bas */
.v2-reseaux {
  position: relative; isolation: isolate;
  margin-top: 0;
  min-height: min(76svh, 620px);
  display: grid; place-items: center;
  overflow: hidden;
}
.v2-reseaux-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.v2-reseaux::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    /* fondus haut et bas vers le fond de page, voile central pour le texte */
    linear-gradient(180deg, var(--v2-encre) 0%, rgba(23,43,115,0) 26%,
                    rgba(23,43,115,0) 74%, var(--v2-encre) 100%),
    linear-gradient(180deg, rgba(18,20,32,.42), rgba(18,20,32,.42));
}
.v2-reseaux-txt {
  width: min(1400px, 100% - 48px);
  text-align: center;
  padding: 40px 0;
}
.v2-reseaux h2 {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1.06; font-weight: 700; text-transform: uppercase;
  margin: 0 auto 30px; max-width: 16ch; letter-spacing: -.01em;
}
.v2-reseaux-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.v2-reseaux-cta .v2-btn { font-size: 14px; }

/* Les comptes du club, en pastilles : deux boutons nommés n'en montraient
   que deux, et l'on va sur les réseaux par leur signe, pas par leur nom. */
.v2-reseaux-ronds {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 26px;
}
.v2-reseaux-ronds a {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  color: #fff;
  transition: background-color 240ms var(--v2-sortie), border-color 240ms var(--v2-sortie),
              transform 160ms var(--v2-sortie);
}
.v2-reseaux-ronds a svg { width: 22px; height: 22px; }
.v2-reseaux-ronds a:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .v2-reseaux-ronds a:hover { background: var(--v2-orange); border-color: transparent; }
}
@media (max-width: 720px) {
  .v2-reseaux-ronds { gap: 10px; margin-top: 20px; }
  .v2-reseaux-ronds a { width: 48px; height: 48px; }
  .v2-reseaux-ronds a svg { width: 20px; height: 20px; }
}

/* #ChoraleNation ferme la page : le mot-dièse annonce, l'appel suit */
.v2-nation-tag {
  margin: 0 0 6px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem); font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.82);
}
/* « Chorale » se détache par la graisse, pas par la couleur : l'orange
   est réservé aux appels à l'action. */
.v2-nation-tag b { font-weight: 700; color: #fff; }
.v2-reseaux.est-nation h2 { margin-top: 0; }

/* ---------------- survol : pointeurs seulement ---------------- */
@media (hover: hover) and (pointer: fine) {
  .v2-bandeau-lien:hover {
    transform: translateY(-3px);
    box-shadow: 0 40px 74px -30px rgba(0,0,0,.9);
  }
  .v2-onglet:not(.on):hover { color: #fff; background: rgba(255,255,255,.10); }
  .v2-menu-btn:hover, .v2-rond-lien:hover { background: rgba(255,255,255,.22); }
  .v2-menu-lien:hover { color: #fff; background: rgba(255,255,255,.10); }
  .v2-menu-cta:hover { background: rgba(255,255,255,.16); }
  .v2-menu-cta.est-fort:hover { background: #ff6a2f; }
  .v2-btn:hover { background: #fff; color: var(--v2-encre-nuit); }
  .v2-btn:hover .v2-fleche { transform: translateX(3px); }
  .v2-btn.is-plein:hover { background: #fff; }
  .v2-annonce:hover {
    transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(0,0,0,.9);
  }
  .v2-boutique:hover, .v2-barre-part:hover {
    transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(0,0,0,.9);
  }
  /* Le rose n'appartient qu'au bouton. Groupé avec l'image, il passait
     derrière elle et couvrait de rose tout le cadre du visuel au survol. */
  .v2-boutique:hover .v2-boutique-cta { background: #ff5f97; }
  /* l'image, elle, avance à peine : c'est à cela que servait sa transition */
  .v2-boutique:hover .v2-boutique-img { transform: scale(1.03); }
  /* au survol le filet se relève, comme sur les vues de galerie */
}

/* ---------------- apparition au défilement ---------------- */
/* le voile n'existe que si le script d'apparition est en place */
.v2-anime .v2-monte { opacity: 0; transform: translateY(14px); }
.v2-anime .v2-monte.vu {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--v2-sortie), transform 620ms var(--v2-sortie);
}

/* ---------------- petits écrans ---------------- */
@media (max-width: 991px) {
  .v2-wrap { width: min(1400px, 100% - 28px); }
  .v2-annonce { margin-top: 24px; }
  /* les partenaires restent, dans une fenêtre plus étroite ; c'est la
     billetterie qui rend de la place, réduite à son billet */
  .v2-sponsor { width: 104px; margin-right: 10px; padding-right: 12px; }
  .v2-btn.is-nu { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .v2-btn-mot { display: none; }
  .v2-btn-ico { display: grid; place-items: center; }
  .v2-bandeau { width: min(1400px, 100% - 28px); margin: 56px auto -44px; }
  .v2-reseaux { min-height: min(64svh, 460px); }
  .v2-reseaux-txt { width: min(1400px, 100% - 28px); padding: 30px 0; }
  .v2-reseaux h2 { margin-bottom: 22px; }
  .v2-hero-txt { width: min(1400px, 100% - 28px); padding: 0 0 4px; }
  /* les repères se calent au ras du bas de la une, la barre commence
     juste après */
  .v2-points { width: min(1400px, 100% - 28px); padding: 18px 0 22px; }
  /* au téléphone les repères restent en face, à hauteur du lien de
     lecture : la ligne du lien est courte, la place est là */
  .v2-hero-pied {
    width: min(1400px, 100% - 28px);
    align-items: flex-end; gap: 12px 16px; padding-bottom: 24px;
  }
  /* La navigation tenait sa propre colonne sur toute la hauteur du pied :
     le titre n'avait plus que la moitié de l'écran et se cassait en cinq
     lignes. Elle passe hors du flux, posée en face du lien de lecture, et
     le titre retrouve la largeur. */
  .v2-hero-pied { position: relative; display: block; }
  .v2-hero-txt { width: 100%; }
  .v2-hero-txt > div { max-width: 100%; }
  .v2-hero h1,
  .v2-hero-txt h2 { max-width: 90%; }
  .v2-hero-nav {
    position: absolute; right: 0; bottom: 24px;
    gap: 8px; padding: 0 0 2px;
  }
  .v2-hero-nav .v2-fleche-rail { width: 32px; height: 32px; }
  .v2-hero-nav .v2-plot { width: 6px; height: 6px; }
  .v2-hero-nav .v2-plot.on { width: 22px; }
  /* l'écusson déborde de la barre : il lui faut de l'air au-dessus */
  .v2-barre { top: 18px; width: min(1400px, 100% - 28px); }
  .v2-section { padding-top: 52px; }
  /* La une prend la hauteur de l'écran moins la barre du bas : le visuel
     respire, et ses repères de position tombent juste au-dessus de la
     barre plutôt que derrière elle. */
  .v2-hero { min-height: calc(82svh - env(safe-area-inset-bottom, 0px)); }
  /* plus la place de les glisser entre le titre et le bouton :
     ils prennent leur propre ligne, et défilent si besoin */
  /* Titre puis onglets, sur le même axe : à gauche d'un côté et à
     droite de l'autre, les deux dessinaient un escalier. */
  .v2-tete { flex-wrap: wrap; justify-content: center; text-align: center; }
  .v2-tete > div:first-child { flex: 1 1 100%; text-align: center; }
  /* le thème aligne les titres à gauche : ici ils suivent leurs onglets */
  .v2 .v2-tete h2, .v2 .v2-tete p { text-align: center; }
  /* on lit le titre, on choisit sa rubrique, puis on va voir le reste */
  .v2-onglets {
    order: 2; width: max-content; max-width: 100%; margin-inline: auto;
    overflow-x: auto; scrollbar-width: none;
  }
  .v2-onglets.is-centre { order: 0; }
  .v2-tete > .v2-btn { order: 3; }
  .v2-onglets::-webkit-scrollbar { display: none; }
  .v2-onglet { padding: 9px 14px; }
  /* le visuel passe au-dessus du texte, qui se recentre */
  .v2-trio { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .v2-boutique { grid-template-columns: 1fr; gap: 0; }
  .v2-boutique-img { max-width: 300px; margin: 8px auto 0; }
  .v2-boutique-txt { padding: 4px 22px 26px; text-align: center; }

  /* en colonne : la grande garde son avantage par la hauteur */
  .v2-bento { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .v2-bento > .est-grande { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .v2-bento > .v2-carte:not(.est-grande) { aspect-ratio: 16 / 9; }
  .v2-carte.est-grande .v2-carte-txt { padding: 20px; }
  .v2-rail {
    gap: 14px;
    margin-inline: -14px;              /* la moitié du creux de .v2-wrap */
    padding-inline: 14px;
    scroll-padding-inline: 14px;
  }
  .v2-rail > * { flex-basis: min(78%, 300px); }
  .v2-plots { margin-top: 18px; }
  .v2-nav-rail { margin-top: 18px; gap: 10px; }
  .v2-nav-rail .v2-plots { margin-top: 0; }
  /* Cinq rencontres au téléphone : au-delà, la file de pastilles
     poussait le renvoi hors de sa ligne. Qui veut la suite ouvre le
     calendrier, c'est justement ce que le bouton propose. */
  .v2-rail[data-rail="agenda"] > *:nth-child(n+6) { display: none; }
  .v2-fleche-rail { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2 * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .v2-monte { opacity: 1; transform: none; }
  /* l'ascenseur des partenaires reste sur le premier logo */
  .v2-sponsor-piste { transform: none !important; transition: none !important; }
}

/* ---------------- panneau de navigation ---------------- */
/* la même navigation à toutes les tailles : la barre reste dégagée,
   l'écusson garde le milieu, les rubriques s'ouvrent en dessous */
.v2-menu {
  margin-top: 20px; padding: 12px;
  border-radius: var(--v2-r);
  /* plus dense que la barre : les rubriques passent devant des photos
     claires, elles doivent rester lisibles sans effort */
  /* Le bleu profond du club, et non le gris-noir d'origine : posé sur le
     nouveau fond, il paraissait terne et étranger à la page. */
  background: linear-gradient(180deg, rgba(14,26,72,.93), rgba(10,19,55,.96)), var(--v2-verre-bleu);
  border: 1px solid var(--v2-verre-bord);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.9);
  visibility: hidden; opacity: 0;
  transform: translateY(-10px);
  transform-origin: top center;
  transition: opacity 240ms var(--v2-sortie), transform 300ms var(--v2-sortie),
              visibility 0s linear 300ms;
}
.v2-menu.est-ouvert {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 240ms var(--v2-sortie), transform 300ms var(--v2-sortie),
              visibility 0s;
}
/* cinq colonnes ouvertes dès la tablette ; au téléphone, chaque bloc
   se déplie au toucher */
.v2-menu-cols {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 26px;
}
.v2-menu-col { min-width: 0; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.14); }
.v2-menu-col:first-child { padding-left: 10px; border-left: 0; }
.v2-menu-col h2,
.v2-menu-col .v2-menu-titre { margin: 0; }

/* Le titre d'un bloc se lit comme un titre sans emprunter l'orange, qui
   dit l'action ailleurs sur le site : il est plus lumineux que les liens
   mais plus petit et plus aéré, souligné d'un filet qui s'éteint. */
.v2-menu-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 2px 10px 11px; margin-bottom: 9px;
  border: 0; background: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; text-align: left; cursor: default; line-height: 1.25;
  position: relative;
}
/* le filet part franc et se dissout : il souligne sans encadrer */
.v2-menu-tete::after {
  content: ''; position: absolute; left: 10px; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.04));
}
/* le chevron ne sert qu'au téléphone, là où les blocs se replient */
.v2-menu-chevron { display: none; }

.v2-menu-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.v2-menu-lien {
  display: block; padding: 9px 10px; border-radius: 10px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.66); text-decoration: none; line-height: 1.3;
  transition: background-color 200ms var(--v2-sortie), color 200ms var(--v2-sortie);
}
.v2-menu-lien:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 2px; }

/* les trois accès directs, centrés sous les colonnes */
.v2-menu-bas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
/* Les accès du menu sont des boutons du site comme les autres : même
   rayon, même liseré, même graisse. Ils avaient leur propre style, avec
   des arrondis plus serrés, et détonnaient à côté de ceux des pages. */

/* les rubriques arrivent en cascade légère */
.v2-menu .v2-menu-col, .v2-menu .v2-menu-bas { opacity: 0; transform: translateY(-6px); }
.v2-menu.est-ouvert .v2-menu-col,
.v2-menu.est-ouvert .v2-menu-bas {
  opacity: 1; transform: none;
  transition: opacity 260ms var(--v2-sortie), transform 260ms var(--v2-sortie);
}
.v2-menu.est-ouvert .v2-menu-col:nth-child(1) { transition-delay: 30ms; }
.v2-menu.est-ouvert .v2-menu-col:nth-child(2) { transition-delay: 60ms; }
.v2-menu.est-ouvert .v2-menu-col:nth-child(3) { transition-delay: 90ms; }
.v2-menu.est-ouvert .v2-menu-col:nth-child(4) { transition-delay: 120ms; }
.v2-menu.est-ouvert .v2-menu-col:nth-child(5) { transition-delay: 150ms; }
.v2-menu.est-ouvert .v2-menu-bas { transition-delay: 180ms; }

@media (min-width: 992px) { .v2-menu { padding: 22px 18px 18px; } }

/* tablette : cinq colonnes, c'est trop serré — on passe à trois, toujours
   ouvertes comme demandé */
@media (min-width: 721px) and (max-width: 1100px) {
  .v2-menu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
  .v2-menu-col:nth-child(4) { border-left: 0; padding-left: 10px; }
}

/* téléphone : une colonne, chaque bloc replié jusqu'au toucher */
@media (max-width: 720px) {
  .v2-menu { padding: 8px; }
  .v2-menu-cols { grid-template-columns: 1fr; gap: 0; }
  /* les filets vont d'un bord à l'autre du panneau, comme une liste */
  .v2-menu-col {
    padding-left: 0; border-left: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .v2-menu-tete { padding-left: 12px; padding-right: 12px; }
  .v2-menu-col:first-child { padding-left: 0; }
  .v2-menu-col:last-of-type { border-bottom: 0; }
  /* le titre redevient une commande : il porte le pli, il doit se voir */
  .v2-menu-tete {
    padding: 15px 12px; margin: 0; border-bottom: 0;
    cursor: pointer; font-size: 12px; letter-spacing: .12em; color: #fff;
  }
  /* ouvert : le titre reste blanc, c'est le chevron qui dit l'état */
  .v2-menu-tete[aria-expanded="true"] { color: #fff; }
  .v2-menu-tete[aria-expanded="false"] { color: rgba(255,255,255,.82); }
  .v2-menu-chevron {
    display: grid; place-items: center; flex: none;
    color: rgba(255,255,255,.7);
    transition: transform 300ms var(--v2-sortie);
  }
  .v2-menu-tete[aria-expanded="true"] .v2-menu-chevron { transform: rotate(180deg); }
  /* Replié : l'enveloppe passe à hauteur nulle. Poser la grille sur la
     liste elle-même ne marchait pas — ses enfants sont les <li>, et une
     grille de plusieurs lignes ne s'écrase pas d'un bloc. */
  .v2-menu-tiroir {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 340ms var(--v2-sortie);
  }
  .v2-menu-tiroir > .v2-menu-liste { overflow: hidden; min-height: 0; }
  .v2-menu-col.est-deplie .v2-menu-tiroir { grid-template-rows: 1fr; }

  /* Le contenu déplié se détache du titre : un panneau en retrait, sur
     un fond plus sombre, avec un filet vertical qui court le long des
     liens. Sans cela, ces liens se lisaient comme des titres de plus. */
  /* le retrait et le filet suffisent à rattacher les liens à leur
     titre : un fond en plus alourdissait sans rien dire de neuf */
  /* Le filet du sous-menu s'aligne sur le texte de son titre, et les
     liens se posent juste après : il partait de 20 px quand le titre
     commençait à 12, et rien ne tombait sur le même axe. */
  .v2-menu-col.est-deplie .v2-menu-liste {
    margin: 0 12px 8px 12px;
    padding: 2px 0 2px 14px;
    border-left: 1px solid rgba(255,255,255,.18);
  }
  .v2-menu-lien {
    padding: 11px 0;
    font-size: 12px; letter-spacing: .07em;
    color: rgba(255,255,255,.72);
  }
  /* le titre du bloc ouvert perd son filet du bas : le panneau le suit */
  .v2-menu-col.est-deplie { border-bottom-color: rgba(255,255,255,.16); }
  .v2-menu-bas { margin-top: 14px; padding-top: 14px; }
  .v2-menu-cta { flex: 1 1 auto; text-align: center; padding: 13px 16px; }
}

/* écran étroit : seule la billetterie reste en vue, le reste passe
   dans le panneau ; le mot « menu » cède la place à sa seule icône */
@media (max-width: 720px) {
  .v2-btn.is-compact { padding: 8px 13px; font-size: 11px; letter-spacing: .06em; }
  .v2-btn.is-compact .v2-fleche { width: 30px; height: 30px; border-radius: 10px; }
  .v2-nav { padding: 8px 9px; gap: 7px; }
  .v2-menu-btn, .v2-rond-lien { width: 44px; height: 44px; }
  /* Les trois marques restent ensemble : séparées, la rangée perdait son
     aplomb. Les filets coûtent une quarantaine de pixels à eux deux —
     c'est eux qui cèdent, l'espacement suffit à distinguer. */
  .v2-nav-ligue { height: 36px; margin-left: 8px; padding-left: 0; border-left: 0; }
  .v2-nav-lnb { width: 32px; height: 32px; margin-left: 12px; padding-left: 0; border-left: 0; }
  .v2-nav-equip { height: 32px; margin-left: 12px; padding-left: 0; border-left: 0; }
  /* Le côté de barre est borné pour ne pas passer sous l'écusson, et il
     rogne ce qui dépasse. Les trois marques cèdent donc un peu de largeur
     plutôt que d'être coupées — « contain » leur garde leurs propor­tions. */
  .v2-nav-ligue, .v2-nav-lnb, .v2-nav-equip { flex: 0 1 auto; min-width: 0; }
  .v2-nav-ligue, .v2-nav-equip { object-fit: contain; }
  .v2-sponsor { width: 74px; margin-right: 8px; padding-right: 10px; }
  .v2-nav-logo { width: 82px; height: 82px; }
  .v2-menu { margin-top: 16px; }
}

/* Le renvoi tient le rang d'une carte : dernier de la colonne, à sa
   largeur, il se prend après avoir parcouru le reste. Il dit où il mène
   plutôt que « voir tout », qui ne dirait rien de la rubrique. */
.v2-bento-tout {
  display: grid; place-items: center;
  min-height: 58px; padding: 16px 20px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
  color: #fff; text-align: center;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  transition: background-color 260ms var(--v2-sortie), border-color 260ms var(--v2-sortie),
              transform 140ms var(--v2-sortie);
}
.v2-bento-tout:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .v2-bento-tout:hover { background: var(--v2-orange); border-color: transparent; }
}
/* Il ne rejoint la colonne de droite que là où il y a deux colonnes.
   Exprimé en min-width, la règle ne peut plus l'emporter sur la mise en
   pile du téléphone, quel que soit son rang dans la feuille. */
@media (min-width: 992px) {
  .v2-bento-tout { grid-column: 2; }
}

/* ---------------- champs de saisie ---------------- */
/* Safari sur iOS agrandit la page dès qu'on entre dans un champ dont le
   texte fait moins de 16 px — et n'en ressort pas : le site reste zoomé
   ensuite. La parade tient au texte lui-même ; interdire le zoom par le
   viewport priverait de loupe celles et ceux qui en ont besoin.
   Seize pixels partout, donc, sur nos champs comme sur ceux hérités du
   thème (.w-input et .w-select sont posés à 14 px). */
.v2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.v2 select,
.v2 textarea,
.v2 .w-input,
.v2 .w-select {
  font-size: 16px;
}

/* ---------------- garde-fous face au thème ---------------- */
/* Les feuilles du thème sont chargées pour le pied de page. Elles posent
   au passage, sur toute la page, une graisse fine, un interlignage large
   et des paragraphes justifiés. On rétablit ce que ces blocs attendent —
   sans toucher au pied de page, qui a besoin du thème tel quel. */
.v2 .v2-tete p,
.v2 .v2-boutique-sous,
.v2 .v2-boutique-cta,
.v2 .v2-match-date,
.v2 .v2-match-lieu { font-weight: 400; }
/* les noms des équipes portent la carte : ils gardent leur graisse */
.v2 .v2-match-noms { font-weight: 800; }

.v2 .v2-tete p { text-align: left; line-height: 1.45; }
.v2 .v2-boutique-titre,
.v2 .v2-boutique-sous { text-align: right; }
.v2 .v2-reseaux h2, .v2 .v2-nation-tag { text-align: center; }
/* Le thème justifie les paragraphes : sur une offre courte, cela creuse
   des gouffres entre les mots. */
.v2 .v2-enseigne-offre, .v2 .v2-enseigne-adresse { text-align: left; }

/* interlignage : le thème impose 1.4 partout, trop lâche pour ces textes */
.v2 .v2-hero-date,
.v2 .v2-carte-date,
.v2 .v2-match-comp,
.v2 .v2-match-date,
.v2 .v2-match-lieu,
.v2 .v2-onglet,
.v2 .v2-menu-btn,
.v2 .v2-menu-lien,
.v2 .v2-btn,
.v2 .v2-actu-lire,
.v2 .v2-boutique-cta { line-height: 1.15; }
.v2 .v2-match-noms { line-height: 1.35; }
.v2 .v2-joueur-poste, .v2 .v2-joueur-contact { line-height: 1.3; }
.v2 .v2-fiche-poste { line-height: 1.25; }
.v2 .v2-carte-titre { line-height: 1.24; }
.v2 .v2-carte.est-grande .v2-carte-titre { line-height: 1.1; }

@media (max-width: 991px) {
  .v2 .v2-boutique-titre,
  .v2 .v2-boutique-sous { text-align: center; }
}

/* ---------------- pied de page ---------------- */
/* le dernier bloc du thème (coordonnées et crédits) cède la place au
   nôtre : liens en colonnes, écusson, puis le cri du club */
.v2 .div-footer-new { display: none; }

.v2-pied {
  /* le même bleu que la page : la vidéo qui le précède se fond vers ce
     ton-là, une teinte plus sombre ici rouvrait une couture juste sous
     elle */
  background: var(--v2-encre);
  padding: 64px 0 0;
  color: #fff;
}
/* L'écusson en grand, l'accès à la salle et les réseaux en face. Les
   quatre colonnes de liens ont disparu : elles reprenaient le menu, qui
   est déjà sur toutes les pages, et personne ne recopie une adresse. */
.v2-pied-corps {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px 48px; flex-wrap: wrap;
}
.v2-pied-ecusson { display: block; width: clamp(150px, 18vw, 220px); flex: none; }
.v2-pied-ecusson img { width: 100%; height: auto; }

.v2-pied-acces {
  display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
}
.v2-pied-acces .v2-btn svg { flex: none; opacity: .9; }

.v2-pied-reseaux { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-pied-reseaux a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid var(--v2-verre-bord);
  color: #fff;
  transition: background-color 220ms var(--v2-sortie), transform 140ms var(--v2-sortie);
}
.v2-pied-reseaux a:active { transform: scale(.94); }
/* L'écusson de la ligue est un disque plein, et son SVG ne portait pas de
   dimensions : il remplissait la pastille jusqu'aux bords et touchait le
   cadre, quand les autres repères gardent leur marge. On leur donne à
   tous la même place à l'intérieur. */
.v2-pied-reseaux svg { width: 19px; height: 19px; display: block; }
.v2-pied-reseaux a[aria-label^="Ligue"] svg { width: 23px; height: 23px; }

/* la ligne du bas : le légal d'un côté, les crédits de l'autre */
/* Elle ferme la page, sous le cri du club : le grand trait de séparation
   qu'elle portait quand elle venait avant n'a plus lieu d'être, le mot
   fait la coupure à lui seul. */
.v2-pied-bas.est-final {
  margin-top: 0; padding: 16px 0 26px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.v2-pied-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 32px; flex-wrap: wrap;
  margin-top: 44px; padding: 20px 0 26px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.v2-pied-legal { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.v2-pied-legal a {
  font-size: 12.5px; color: rgba(255,255,255,.62); text-decoration: none;
  transition: color 200ms var(--v2-sortie);
}
.v2-pied-credits {
  margin: 0; font-size: 12.5px; color: rgba(255,255,255,.42); line-height: 1.5;
}
.v2-pied-credits a { color: rgba(255,255,255,.62); text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .v2-pied-legal a:hover, .v2-pied-credits a:hover { color: #fff; }
  .v2-pied-reseaux a:hover { background: rgba(255,255,255,.16); }
}

@media (max-width: 720px) {
  /* tout se centre et s'empile : l'écusson, puis l'accès, puis le légal */
  .v2-pied-corps { flex-direction: column; gap: 26px; }
  .v2-pied-acces { align-items: center; }
  .v2-pied-bas { flex-direction: column; text-align: center; margin-top: 32px; }
  .v2-pied-legal { justify-content: center; }
}

/* ---------------- le cri du club ---------------- */
/* CHORALE d'un bord à l'autre de l'écran, à la graisse la plus lourde
   qu'ait Eurostile, et la vidéo de la salle ne se voit qu'à travers ses
   lettres. Le découpage se fait par masque dessiné en canvas — voir le
   pied de page : c'est la seule façon de garder un pourtour vraiment
   transparent, les fusions imposant du noir ou du blanc. */
/* La carte d'identité du club, en tête du pied : les emblèmes et
   l'adresse d'un côté, l'accès à la salle et les comptes de l'autre. */
.v2-pied-carte {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px 40px; flex-wrap: wrap;
  /* de l'air sous la carte d'identité : elle touchait presque le cri */
  padding: 34px 0 58px;
}
.v2-pied-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
/* le label est vertical (85 × 163) : c'est sa hauteur qui se cale sur
   celle de l'écusson, pas sa largeur */
.v2-pied-label { height: 92px; width: auto; flex: none; }
.v2-pied-blason { display: block; flex: none; }
.v2-pied-blason img { width: 92px; height: 92px; }
/* L'adresse se lit en trois lignes ; le courriel a été retiré, le
   formulaire de contact fait mieux le travail. */
.v2-pied-adresse {
  display: flex; flex-direction: column; gap: 3px;
  font-style: normal; font-size: 13.5px; line-height: 1.45;
  color: rgba(255,255,255,.74);
}
.v2-pied-adresse a { color: #fff; font-weight: 700; text-decoration: none; }
/* Le bouton et la rangée de comptes s'empilent au même bord : centré, le
   bouton flottait au-dessus des pastilles sans s'aligner sur rien. */
.v2-pied-acces {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* La ligne qui annonce le cri : « Ici c'est » sur l'axe du mot qu'il
   annonce, refermé sur lui par une marge basse négative. */
.v2-cri-tete {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 18px 32px; flex-wrap: wrap; margin-bottom: -1.1vw;
}
.v2-cri-cadre { padding: 0 0 20px; overflow: hidden; }

/* « Ici c'est » à la main, comme les titres du site, en blanc et posé
   au-dessus du mot qu'il annonce */
.v2-cri-ici {
  text-align: center;
  /* Au milieu, sur l'axe de CHORALE. Le rapprochement des deux lignes est
     porté par la ligne entière (.v2-cri-tete), la Pinyon Script réservant
     beaucoup de blanc sous sa ligne de base. */
  margin: 0;
  font-family: 'Pinyon Script', 'Apple Chancery', cursive;
  font-size: clamp(2.6rem, 7.4vw, 4.6rem);
  font-weight: 400; line-height: 1;
  color: #fff;
}

/* CHORALE d'un bord à l'autre, en toutes lettres. La vidéo découpée
   dans le mot a été retirée : elle se chargeait sur chaque page du site
   pour un effet de fond, et la découpe demandait un masque dessiné en
   canvas à chaque redimensionnement. Un mot blanc dit la même chose.
   La taille en vw le fait tenir sur une seule ligne à toute largeur. */
.v2-cri-mot {
  margin: 0; display: block; width: 100%;
  font-family: eurostile, nimbus-sans, sans-serif;
  /* Le mot occupe toute la largeur de l'écran, quelle qu'elle soit.
     « CHORALE » en eurostile 900 mesure 4,469 fois son corps ; avec un
     interlettrage de -0,012 em sur sept lettres il descend à 4,385, d'où
     ce 22,6 vw mesuré dans le navigateur plutôt qu'estimé. */
  font-weight: 900; font-size: 22.6vw; line-height: .8;
  letter-spacing: -.012em; text-align: center; text-transform: uppercase;
  color: #fff;
  /* il monte à sa place quand le pied de page arrive à l'écran */
  animation: v2-cri-monte 900ms var(--v2-sortie) both;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
}
@keyframes v2-cri-monte {
  from { opacity: 0; transform: translateY(.12em); }
  to { opacity: 1; transform: none; }
}
/* sans animation liée au défilement, le mot est simplement là */
@supports not (animation-timeline: view()) {
  .v2-cri-mot { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-cri-mot { animation: none; }
}

@media (max-width: 991px) {
  .v2-cri-cadre { padding: 0 0 20px; }
  /* au téléphone, tout se centre et s'empile */
  .v2-cri-tete { justify-content: center; margin-bottom: -.6vw; }
  .v2-cri-ici { text-align: center; padding-left: 0; }
  /* Au téléphone la carte s'empile, mais son bloc d'identité garde sa
     ligne : les deux emblèmes et l'adresse ensemble, comme sur desktop.
     Empilés et centrés, ils formaient une colonne d'objets sans rapport.
     Les emblèmes rapetissent pour que la ligne tienne dans l'écran. */
  .v2-pied-carte {
    flex-direction: column; align-items: center;
    /* « Ici c'est » est le dernier de la pile (order: 3) : la réserve du
       bas ne sépare plus la carte du cri, elle creuse l'écart entre
       l'annonce et le mot. Elle tombe à 8 px, le gap de 20 px suffisant
       déjà à détacher l'annonce des comptes qui la précèdent. */
    gap: 20px; padding: 28px 0 8px;
  }
  .v2-pied-id { flex-direction: row; align-items: center; gap: 12px; }
  .v2-pied-label { height: 62px; }
  .v2-pied-blason img { width: 62px; height: 62px; }
  .v2-pied-adresse { align-items: flex-start; text-align: left; font-size: 12.5px; }
  /* le bouton et les comptes se centrent, l'un sous l'autre */
  .v2-pied-acces { align-items: center; }
}

}

@media (hover: hover) and (pointer: fine) {
  .v2-pied-col a:hover { color: #fff; }
  .v2-pied-reseaux a:hover { background: rgba(255,255,255,.16); }
  .v2-pied-credits a:hover { color: #fff; }
}

@media (max-width: 991px) {
  .v2-pied { padding-top: 46px; }
  .v2-pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .v2-pied-ecusson { width: 96px; grid-column: 2; justify-self: end; }
  /* Au téléphone, « Ici c'est » tient une ligne et « Chorale » la
     suivante : sur une seule, le corps deviendrait trop petit pour que
     le cri porte. */
  /* le saut occupe toute la ligne : les mots suivants passent dessous,
     en gardant chacun la largeur de son texte */
}
@media (max-width: 560px) {
  .v2-pied-haut { grid-template-columns: 1fr; }
  .v2-pied-ecusson { grid-column: auto; justify-self: start; }
}

/* ---------------- accès rapide, façon application ---------------- */
.v2-appli, .v2-appel { display: none; }

@media (max-width: 991px) {
  /* Cinq places de largeur égale, la billetterie au centre. Des colonnes
     égales plutôt qu'un flux : l'indicateur connaît alors sa position par
     le calcul, sans avoir à mesurer quoi que ce soit — c'est ce qui le
     rend juste dès la première image. */
  /* Le même verre que l'en-tête, aux mêmes valeurs : deux barres
     flottantes, l'une en haut l'autre en bas, faites de la même matière.
     Détachée des bords comme elle — collée, elle aurait été une barre
     système, pas un objet posé sur la page. */
  .v2-appli {
    position: fixed; z-index: 70; left: 0; right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: min(560px, 100% - 24px); margin-inline: auto;
    isolation: isolate;
    /* minmax(0, 1fr) et non 1fr : une piste en 1fr ne descend jamais
       sous la taille de son contenu, si bien que « Classement » élargissait
       sa place et rétrécissait celle des quatre autres. Le repère, lui,
       fait toujours un cinquième : il ne tombait plus en face. */
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    padding: 6px 2px;
    border-radius: var(--v2-r);
    background: var(--v2-glace);
    border: 1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter: var(--v2-glace-flou);
    backdrop-filter: var(--v2-glace-flou);
    box-shadow: var(--v2-glace-relief), 0 18px 44px -24px rgba(0,0,0,.6);
  }

  /* Un trait sous la place occupée. Il ne change que de `transform` :
     ni largeur ni position ne sont recalculées, le navigateur n'a donc
     aucune mise en page à refaire d'une image à l'autre — c'est là que se
     gagne la fluidité. */
  /* Un curseur, pas une pastille. La pastille pleine hauteur enfermait le
     libellé : « Classement » fait dix lettres là où les autres en font
     six, il venait toucher les bords de sa case et la barre paraissait à
     l'étroit. Le trait, lui, ne prend aucune place au texte : il se pose
     sur la ligne basse du cadre et glisse d'un onglet à l'autre. */
  .v2-appli-jauge {
    position: absolute; z-index: 0; top: auto; bottom: 5px; left: 0;
    height: 3px; width: 20%;
    pointer-events: none;
    transform: translateX(calc(var(--place, 0) * 100%));
    transition: transform 420ms cubic-bezier(.32, .9, .2, 1);
  }
  /* Aucune des quatre destinations n'est la page courante : rien ne
     s'allume. Sans place assignée, le repère retombait sur la première
     et désignait l'accueil depuis n'importe quelle page. */
  .v2-appli:not([data-place]) .v2-appli-jauge { display: none; }
  .v2-appli-jauge::before {
    content: ''; display: block;
    width: 26px; height: 100%; margin: 0 auto;
    border-radius: 999px; background: var(--v2-orange);
  }
  /* sans rang connu — une page hors de la barre — rien ne s'allume */
  .v2-appli:not([data-place]) .v2-appli-jauge { opacity: 0; }

  .v2-appli-lien {
    position: relative; z-index: 1; min-width: 0;
    display: grid; justify-items: center; gap: 4px;
    /* de l'air sous le libellé : c'est là que passe le curseur */
    padding: 8px 1px 12px;
    color: rgba(255,255,255,.55); text-decoration: none;
    transition: color 260ms var(--v2-sortie);
  }
  .v2-appli-ico {
    display: grid; place-items: center; line-height: 0;
    transition: transform 380ms cubic-bezier(.34, 1.4, .5, 1);
  }
  .v2-appli-mot {
    font-family: eurostile, nimbus-sans, sans-serif;
    /* « Classement » fait dix lettres quand les autres en font six : c'est
       lui qui fixe le corps de toute la rangée. Sous 360 px, sa place ne
       mesure plus que 58 px, il lui faut donc ce corps-là et un
       interlettrage nul pour tenir sans toucher ses voisins. */
    font-size: clamp(7.6px, 2.35vw, 9.5px); font-weight: 700;
    letter-spacing: .01em; text-transform: uppercase;
    line-height: 1; white-space: nowrap;
  }
  .v2-appli-lien.est-ici { color: #fff; }
  /* l'icône occupée se soulève d'un cheveu : ce rien fait toute la
     différence entre une barre qui répond et une barre qui subit */
  .v2-appli-lien.est-ici .v2-appli-ico { transform: translateY(-2px); }
  .v2-appli-lien:active { color: #fff; }
  .v2-appli-lien:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

  /* ---- la billetterie, au centre et en saillie ----
     C'est le geste qu'on vient chercher le plus souvent : il tient le
     milieu et dépasse la barre, pour se trouver sans être cherché. */
  .v2-appel {
    position: relative; z-index: 2;
    display: grid; justify-items: center; gap: 4px;
    margin-top: -24px; padding-bottom: 2px;
    color: #fff; text-decoration: none;
    transition: transform 200ms cubic-bezier(.34, 1.4, .5, 1);
  }
  .v2-appel-ico {
    display: grid; place-items: center; line-height: 0;
    width: 52px; height: 52px; border-radius: 999px;
    background: var(--v2-orange);
    /* un anneau clair, non un anneau sombre : sur du verre, le second
       creuserait un trou là où le premier détache */
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 10px 22px -8px rgba(241,91,27,.75);
  }
  .v2-appel-mot {
    font-family: eurostile, nimbus-sans, sans-serif;
    /* « Classement » fait dix lettres quand les autres en font six : c'est
       lui qui fixe le corps de toute la rangée. Sous 360 px, sa place ne
       mesure plus que 58 px, il lui faut donc ce corps-là et un
       interlettrage nul pour tenir sans toucher ses voisins. */
    font-size: clamp(7.6px, 2.35vw, 9.5px); font-weight: 700;
    letter-spacing: .01em; text-transform: uppercase;
    line-height: 1; white-space: nowrap;
  }
  .v2-appel:active { transform: scale(.94); }
  .v2-appel:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

  /* le trait ne bondit pas pour qui demande moins de mouvement */
  @media (prefers-reduced-motion: reduce) {
    .v2-appli-jauge, .v2-appli-ico, .v2-appel { transition: none; }
  }

  /* la barre couvre le bas de page : on lui réserve sa place au sein du
     pied, pour que la bande garde la couleur du pied */
  /* Le dégagement de la barre d'application appartient au dernier bloc de
     la page : c'est la ligne légale, maintenant, et non plus le cri. */
  .v2-cri-cadre { padding-bottom: 8px; }
  .v2-pied-bas.est-final { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

  /* ---- la barre du haut ----
     l'écusson garde le milieu ; à gauche la maison et le label de la
     ligue, à droite les partenaires et le menu. */
  /* Les filets verticaux coûtent une quarantaine de pixels à eux deux.
     Sur un écran étroit, cette place vaut mieux que la séparation :
     l'espacement suffit à distinguer les marques. */
  /* Sans les filets, c'est l'espacement seul qui sépare les marques : il
     doit être le même partout — entre le bord et le premier logo, et
     entre les deux logos. */
  .v2-nav-ligue { height: 28px; margin-left: 4px; padding-left: 0; border-left: 0; }
  .v2-nav-lnb { width: 25px; height: 25px; margin-left: 9px; padding-left: 0; border-left: 0; }
  .v2-nav-equip { height: 25px; margin-left: 9px; padding-left: 0; border-left: 0; }
  /* Les deux côtés s'arrêtent avant l'écusson. Sans cette borne, le côté
     droit prend toute la largeur disponible et passe dessous : l'écusson
     est en position absolue, il ne réserve aucune place. */
  .v2-nav-cote {
    max-width: calc(50% - var(--v2-ecusson) / 2 - var(--v2-garde));
    min-width: 0; overflow: hidden;
  }
  .v2-sponsor {
    flex: 1 1 auto; width: auto; min-width: 0;
    height: 38px; margin: 0 10px 0 0; padding: 0;
    border-right: 0;
  }
  .v2-sponsor img { height: 38px; }
  /* la billetterie du haut ferait double emploi avec la pastille */
  .v2-nav-cote.is-fin .v2-btn.is-nu { display: none; }
  /* la maison aussi : elle a rejoint la barre du bas, où le pouce
     l'atteint. La place revient aux deux marques. */
  .v2-rond-lien { display: none; }
  /* la maison partie, le label reprend l'air que le padding de la barre
     ne suffit pas à lui donner */
  .v2-nav-ligue { margin-left: 7px; }
}

@media (hover: hover) and (pointer: fine) {
  .v2-appli-lien:hover { color: #fff; }
}

@media (max-width: 560px) {
  /* au plus étroit, la ligue cède la place aux partenaires */
  /* au plus étroit, la ligue s'efface mais l'équipementier reste : le
     contrat veut qu'il soit visible en permanence */
  /* elles rétrécissent plutôt que de s'effacer : les trois marques vont
     de pair, et l'équipementier doit être visible en permanence */
  .v2-nav-ligue { height: 30px; margin-left: 7px; }
  .v2-nav-lnb { width: 27px; height: 27px; margin-left: 10px; }
  .v2-nav-equip { height: 27px; margin-left: 10px; padding-left: 0; border-left: 0; }
  .v2-nav-logo { width: 74px; height: 74px; }
  /* l'écusson est plus petit ici : la borne se resserre d'autant */
  /* l'écusson rétrécit : la garde suit */
  .v2-nav-cote { --v2-ecusson: 74px; }
  .v2-sponsor { height: 34px; }
  .v2-sponsor img { height: 34px; }
}

@media (max-width: 380px) {
  /* au plus étroit, l'écusson cède quelques pixels : sans quoi il ne
     resterait pas de quoi lire un logo de partenaire */
  .v2-nav-logo { width: 64px; height: 64px; }
  /* l'écusson rétrécit : la garde suit */
  .v2-nav-cote { --v2-ecusson: 64px; }
  .v2-menu-btn, .v2-rond-lien { width: 40px; height: 40px; }
  .v2-nav { padding: 8px; }
}

@media (max-width: 340px) {
  /* en deçà, un logo de partenaire ne serait plus lisible : mieux vaut
     ne rien montrer qu'un timbre-poste */
  .v2-sponsor { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .v2-appli-lien:hover { color: #fff; }
}
}

/* ---------------- flèches mises de côté ---------------- */
/* Le temps de la refonte, aucun bouton ne porte de flèche. Les pastilles
   qui portent un pictogramme parlant — réseaux sociaux, billet — restent.
   Une seule règle à retirer le jour où on les remet. */
.v2 .link-cta-03 img,
.v2 .link-cta-03-lire-artcle img,
.v2 .link-cta-02-a img,
.v2 .link-cta-02-b img,
.v2 .swiper-arrow-icon,
.v2 img[src*="arrow-right"] { display: none; }

/* sans son image, le lien du thème ne doit pas garder l'espace vide */
.v2 .link-cta-03,
.v2 .link-cta-03-lire-artcle { gap: 0; }

/* ---------------- en-tête de page intérieure ---------------- */
/* Tout est centré, comme sur le site en place : le fil d'Ariane, le
   titre, et rien dessous. */
.v2-page-tete {
  max-width: var(--v2-page); margin-inline: auto;
  padding: 118px 0 36px; text-align: center;
}
.v2-fil {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.v2-fil a { color: rgba(255,255,255,.62); text-decoration: none; }
.v2-page-tete h1 {
  margin: 0; font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; line-height: 1;
  text-transform: uppercase; letter-spacing: -.01em;
}
.v2-page-tete h1 b { font-weight: 700; }

/* Rangé : le titre cale à gauche, l'action tient la droite sur la même
   ligne. Une loupe seule sur sa propre ligne laissait un vide que rien
   ne venait remplir. La quête rend ses deux parties à cette grille — la
   loupe se range au bout de la ligne du titre, le champ descend sous
   l'ensemble, sur toute la largeur. */
.v2-page-tete.est-rangee {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 0 18px;
  text-align: left;
}
.v2-page-tete.est-rangee .v2-page-tete-txt { grid-column: 1; min-width: 0; }
.v2-page-tete.est-rangee .v2-fil { justify-content: flex-start; }
.v2-page-tete.est-rangee .v2-quete { display: contents; }
.v2-page-tete.est-rangee .v2-quete-btn { grid-column: 2; align-self: end; margin-bottom: 6px; }
.v2-page-tete.est-rangee .v2-quete-boite { grid-column: 1 / -1; }
.v2-page-tete p {
  margin: 14px 0 0; color: rgba(255,255,255,.55); font-size: .95rem;
}

/* ---------------- effectif ---------------- */
/* un panneau masqué le reste : sans cette règle, display:grid
   l'emporterait sur l'attribut hidden et les deux onglets s'afficheraient */
.v2-effectif[hidden] { display: none; }
.v2-effectif {
  max-width: var(--v2-page); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px; padding-bottom: 84px;
}

/* le numéro tient le fond, la photo se pose devant, le texte au-dessus */
.v2-joueur {
  position: relative; isolation: isolate; overflow: hidden;
  /* la carte devient l'unité de mesure du numéro qu'elle porte */
  container-type: size;
  aspect-ratio: 16 / 10;
  border-radius: var(--v2-r);
  background: var(--v2-carte);
  border: 1px solid var(--v2-carte-bord);
  transition: border-color 320ms var(--v2-sortie), transform 320ms var(--v2-sortie),
              box-shadow 320ms var(--v2-sortie);
}
/* le numéro : en creux au centre exact de la carte, derrière le joueur.
   Placé dans un coin il disparaissait sous la photo ; au milieu, il se
   lit de part et d'autre de la silhouette. */
/* Centré sur la partie laissée libre par la photo, non sur la carte
   entière : au centre géométrique, la silhouette en cachait la moitié
   droite et le chiffre paraissait décalé. */
.v2-joueur-num {
  position: absolute; inset: 0 38% 0 0; z-index: -1;
  display: grid; place-items: center;
  font-family: eurostile, nimbus-sans, sans-serif;
  /* le chiffre prend toute la hauteur de la carte. La hauteur des
     capitales d'Eurostile vaut environ 0,7 em : 130 cqh en occupent donc
     un peu plus de neuf dixièmes, sans toucher les bords. La première
     valeur sert aux navigateurs qui ignorent les unités de conteneur. */
  font-size: clamp(5.5rem, 13vw, 9.5rem);
  font-size: 130cqh;
  font-weight: 700; line-height: 1;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.22);
  transition: -webkit-text-stroke-color 400ms var(--v2-doux);
}
.v2-joueur-photo {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  height: 100%; width: auto; max-width: 62%;
  object-fit: contain; object-position: bottom right;
  transition: transform 700ms var(--v2-doux);
}
.v2-joueur-txt {
  position: absolute; inset: auto auto 0 0; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px 24px 22px;
  max-width: 62%;
}
.v2-joueur-prenom {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .01em;
}
.v2-joueur-nom {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.7rem, 2.9vw, 2.45rem); font-weight: 700; line-height: 1.02;
  text-transform: uppercase; letter-spacing: -.01em;
}
/* Le thème impose 1,4 d'interligne : sur un poste qui tient deux lignes,
   l'écart devenait plus grand que celui séparant le nom du poste. */
.v2-joueur-poste {
  display: flex; align-items: center; gap: 9px;
  margin-top: 8px; font-size: 13px; line-height: 1.3;
  color: rgba(255,255,255,.72);
}
.v2-drapeau {
  display: block; flex: none; width: 21px; height: 14px;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset;
}
.v2-drapeau svg { display: block; width: 100%; height: 100%; }
.v2-joueur-lien {
  margin-top: 16px; padding-bottom: 3px;
  border-bottom: 2px solid var(--v2-orange);
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  transition: color 220ms var(--v2-sortie), border-color 220ms var(--v2-sortie);
}
.v2-joueur-lien:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }

.v2-joueur-contact {
  display: flex; flex-direction: column; gap: 3px; margin-top: 8px;
  font-size: 12.5px; color: rgba(255,255,255,.62);
}
.v2-joueur-contact a { color: inherit; text-decoration: none; }

/* ---------------- ensembles de fiches ---------------- */
.v2-groupe { max-width: var(--v2-page); margin-inline: auto; }
.v2-groupe + .v2-groupe { margin-top: 44px; }
.v2-groupe-titre {
  margin: 0 0 18px; text-align: center;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.v2-groupe .v2-effectif { padding-bottom: 0; }
.v2-groupe:last-of-type .v2-effectif { padding-bottom: 84px; }

@media (hover: hover) and (pointer: fine) {
  .v2-joueur-contact a:hover { color: #fff; }
  .v2-joueur-lien:hover { color: var(--v2-orange); }
}

@media (max-width: 991px) {
  .v2-page-tete { padding: 96px 0 26px; }
  .v2-retour { padding-top: 96px; }
  .v2-effectif { grid-template-columns: 1fr; gap: 14px; padding-bottom: 56px; }
}
@media (max-width: 560px) {
  .v2-joueur { aspect-ratio: 3 / 2; }
  .v2-joueur-txt { padding: 18px; max-width: 70%; }
}

/* ---------------- fiche d'un joueur ---------------- */
.v2-retour {
  max-width: var(--v2-page); margin-inline: auto;
  padding-top: 118px; justify-content: center;
}

/* ============================================================
   FICHE JOUEUR ET STAFF
   ------------------------------------------------------------
   Le cadre d'origine retrouvé : l'identité à gauche, la photo à
   droite sur toute la hauteur. Ce qui change, c'est que la photo
   s'y voit en entier.

   La cause du rognage était que .v2-fiche portait container-type:
   size (donc contain: size) : le height: 100% de la photo ne
   pouvait pas se résoudre, elle retombait sur sa taille propre et
   débordait de 93 px, coupés par overflow: hidden. Ici la boîte
   de la photo a une hauteur EXPLICITE, une longueur et non un
   pourcentage : le height: 100% de l'image se résout enfin, et
   sa largeur suit son format. Du portrait le plus étroit (0,666)
   au buste le plus large (1,098), rien n'est coupé.
   ============================================================ */
.v2-fiche {
  /* la hauteur de la photo, donc du cadre : bornée par la vue pour
     que la fiche tienne d'un coup d'oeil sur un portable comme sur
     un grand écran */
  --v2-photo-h: clamp(380px, 54vh, 540px);
  position: relative; isolation: isolate; overflow: hidden;
  /* on annule le container-type: size d'origine, la cause du rognage */
  container-type: normal;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46%;
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 36px; row-gap: 20px;
  aspect-ratio: auto; max-height: none;
  /* le cadre fait au moins la hauteur de la photo, qui monte jusqu'à son
     bord haut : c'est elle qui donne la mesure */
  min-height: var(--v2-photo-h);
  max-width: var(--v2-page); margin: 22px auto 0;
  padding: 34px 0 0 40px;
  border-radius: var(--v2-r);
  background: var(--v2-carte);
  border: 1px solid var(--v2-carte-bord);
}

/* l'identité : prénom, nom, et le rôle en pastille juste dessous */
.v2-fiche-txt {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 2;
  display: flex; flex-direction: row; align-items: stretch;
  gap: 20px; padding: 0 0 20px; text-align: left;
  border-bottom: 1px solid var(--v2-carte-bord);
}
/* Sans numéro, il n'y a pas de colonne à tenir : le nom et le rôle
   s'empilent sur toute la largeur, c'est le cas des fiches du staff. */
.v2-fiche-txt.est-sans-numero { flex-direction: column; align-items: flex-start; gap: 0; }
.v2-fiche-txt.est-sans-numero .v2-fiche-nom-bloc { width: 100%; }

/* le nom et le rôle tiennent leur colonne, à droite du numéro */
.v2-fiche-nom-bloc {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 14px; min-width: 0; flex: 1 1 auto;
}
/* Le numéro du maillot, en pleine hauteur de l'identité : du haut du
   prénom au bas de la pastille du poste, exactement. Un texte en CSS ne
   sait pas remplir une hauteur qu'il ne connaît pas d'avance ; dessiné
   dans un SVG, il épouse sa boîte quelle que soit la longueur du nom.
   À deux chiffres, le dessin s'élargit et pousse le nom vers la droite. */
/* Le numéro couvre exactement la hauteur du bloc d'identité : du haut du
   prénom au bas de la pastille du poste.

   Les valeurs sont mesurées, pas estimées. Un chiffre d'eurostile occupe
   0,673 de son corps : pour couvrir un bloc qui vaut 9,36 fois ce corps
   à l'échelle du nom, il faut 13,91 vw, et une interligne de 0,673 pour
   que sa boîte fasse exactement la hauteur du dessin. Le glyphe ne se
   pose pas au sommet de cette boîte, il descend de 0,055 em : on le
   remonte d'autant, en relatif pour ne pas toucher à la mise en page.
   Calibré au pixel dans le navigateur, écart nul en haut, 1 px en bas. */
.v2-fiche-numero {
  flex: none; align-self: center;
  position: relative; top: -.055em;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(7.3rem, 13.91vw, 12.4rem);
  font-weight: 700; line-height: .673; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2.4px rgba(255,255,255,.5);
}
/* À deux chiffres, les chiffres se rapprochent un peu, sans être écrasés.
   Le nom se cassait en NE-ED-HA-M non par manque de place mais parce
   qu'il s'autorisait à couper entre ses lettres : une fois cette coupe
   interdite, tous les noms du roster tiennent sur une ligne à côté d'un
   numéro à pleine largeur. Vérifié sur les plus longs, Monrazel,
   Levarity, Williams et Needham. */
.v2-fiche-numero.est-double { letter-spacing: -.1em; }
.v2-fiche-numero text {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 700; letter-spacing: -.05em;
  fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2.4;
  paint-order: stroke;
}
.v2-fiche-titre { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
/* Le prénom annonce, le nom signe : c'est le contraste des deux qui fait
   lire la fiche d'un coup d'oeil. Un nom à rallonge revient à la ligne
   au lieu de sortir du cadre. */
.v2-fiche-prenom {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.95rem); font-weight: 400; line-height: 1.04;
  text-transform: uppercase;
}
.v2-fiche-nom {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.4rem); font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: -.015em;
  /* un nom se coupe entre ses mots, jamais entre ses lettres */
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
/* Le poste se lit nu sous le nom, drapeau devant, comme sur le roster :
   le cadre en faisait une étiquette, alors que c'est une légende. */
.v2-fiche-poste {
  display: inline-flex; align-items: center; gap: 10px;
  flex: none; margin: 6px 0 0; padding: 0;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
/* Une double nationalité montre ses deux drapeaux, serrés l'un contre
   l'autre : ils forment un seul signe devant le poste. */
.v2-drapeaux { display: inline-flex; align-items: center; gap: 5px; flex: none; }

/* Sur desktop, la colonne du nom est étroite : un poste long s'y repliait
   et sa deuxième ligne tombait derrière la photo, illisible. Il tient donc
   sur une ligne, à un corps calculé sur la largeur réelle du bloc — `--wp`
   est sa largeur en cadratins, `--d` la place de ses drapeaux. Sur mobile
   la photo est ailleurs, deux lignes ne gênent personne. */
@media (min-width: 992px) {
  .v2-fiche-nom-bloc { container-type: inline-size; }
  .v2-fiche-poste {
    white-space: nowrap;
    font-size: clamp(9.5px, calc((100cqw - var(--d, 0) * 1px) / var(--wp, 12)), 12px);
  }
}

/* L'état civil sur deux colonnes : en une seule liste il tirait la
   colonne de gauche vers le bas et volait sa hauteur à la photo. */
.v2-fiche-etat {
  grid-column: 1; grid-row: 2; align-self: start;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  min-width: 0; padding-bottom: 32px;
}
/* Chaque information sur sa propre plaque, toutes à la même hauteur et
   à la même garde intérieure. Le libellé se lit au-dessus de sa valeur :
   en face, les deux se touchaient sur les valeurs longues et l'écart
   changeait d'une ligne à l'autre. */
.v2-fiche-lignes {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.v2-fiche-ligne {
  /* la plaque se mesure elle-même : sa valeur s'y ajuste en cqw */
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; min-width: 0; min-height: 72px;
  padding: 16px 18px; border-radius: 14px;
  /* fond plein, pas translucide : le trait du numéro passait dessous et
     traversait le texte, qui devenait illisible */
  background: #2a49a3;
  border: 1px solid rgba(255,255,255,.09);
}
.v2-fiche-ligne dt {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45); line-height: 1;
}
/* La valeur tient sur une ligne, toujours. `--w` est sa largeur en
   cadratins, calculée au build : le corps qui la fait entrer vaut la
   largeur de la plaque divisée par ce nombre, plafonné à 14 px pour que
   les valeurs courtes gardent leur taille normale et 9 px au plancher.
   Sans cela une adresse longue se repliait, la plaque grandissait, et la
   photo — qui prend la hauteur du cadre — enflait avec elle. */
.v2-fiche-ligne dd {
  margin: 0; min-width: 0;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(9px, calc(100cqw / var(--w, 8)), 14px);
  font-weight: 700; line-height: 1.28; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}

/* Instagram ferme la liste sur toute sa largeur, à la même garde et au
   même rayon que les plaques : c'est une information de plus, pas un
   bouton d'un autre monde. */
/* Instagram est une plaque comme les autres — libellé, puis le pseudo,
   qui est un lien : en bandeau pleine largeur avec son icône, il faisait
   un objet à part et laissait une case vide à côté de la nationalité. */
.v2-fiche-ligne dd a { color: inherit; text-decoration: none; }
.v2-fiche-ligne dd a:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }

/* La photo occupe toute la hauteur du cadre, du bord haut au bord bas,
   au premier plan devant le texte.

   Elle est posée hors du flux : dans le flux, elle demandait sa hauteur
   à une ligne qu'elle contribue elle-même à définir, et le cadre montait
   à 1500 px. Sa colonne est étirée par la grille et reste vide ; la
   photo s'y pose en absolu et prend cette hauteur, sans jamais peser sur
   elle. La colonne garde 44 % de la largeur, le texte n'y passe pas. */
.v2-fiche-visuel {
  grid-column: 2; grid-row: 1 / -1; align-self: stretch;
  position: relative; z-index: 2; isolation: isolate;
  margin: -34px 0 0;
}
.v2-fiche-photo {
  position: absolute; inset: 0 0 0 auto; z-index: 1;
  display: block; height: 100%; width: auto;
  object-fit: contain; object-position: bottom right;
}
/* Sa largeur suit sa hauteur, mais avec une borne. Sans borne, une photo
   large — Needham est presque carré — atteignait 617 px pour une colonne
   qui en fait 414, passait au premier plan par-dessus les plaques d'état
   civil et en masquait la moitié. Le plafond vaut 108 % de sa colonne,
   soit à peine plus d'un demi-cadre : la photo déborde encore un peu vers
   la gauche, ce qui fait la profondeur, sans mordre sur le texte.
   Au-delà, `object-fit: contain` réduit la hauteur plutôt que de couper :
   la photo reste entière, calée en bas à droite. Il faut aussi passer
   devant le max-width: 100% que le thème pose sur toutes les images. */
.v2 .v2-fiche-photo { max-width: 108%; }
@media (max-width: 991px) {
  .v2 .v2-fiche-photo { max-width: 100%; }
}

/* sans photo, l'identité et l'état civil prennent tout le cadre */
.v2-fiche:not(:has(.v2-fiche-visuel)) { grid-template-columns: minmax(0, 1fr); padding-right: 40px; }
/* sans une seule information, la photo remonte contre le nom */
.v2-fiche.est-nue { padding-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
}

/* ---------------- le même cadre au téléphone ---------------- */
@media (max-width: 991px) {
  .v2-fiche {
    --v2-photo-h: clamp(300px, 42svh, 400px);
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
    justify-items: center; align-items: start;
    aspect-ratio: auto; min-height: 0; max-height: none;
    row-gap: 20px; padding: 26px 22px 0;
  }
  /* tout en colonne : identité, photo, état civil */
  /* le téléphone garde la même composition : le numéro à gauche, le nom
     et le poste à sa droite, seulement à l'échelle de l'écran */
  .v2-fiche-txt {
    grid-column: 1; grid-row: 1; width: 100%;
    flex-direction: row; align-items: stretch; justify-content: center;
    gap: 14px; padding: 0 0 18px; text-align: left;
  }
  .v2-fiche-nom-bloc { align-items: flex-start; text-align: left; }
  /* Sous 992 px le nom est à sa taille plancher : le bloc d'identité
     mesure 102 px quelle que soit la largeur de l'écran. Le numéro doit
     donc suivre une taille fixe, pas la largeur : en vw il atteignait
     259 px sur une tablette pour un bloc qui en faisait toujours 102. */
  .v2-fiche-numero { font-size: 9.5rem; }
  /* et le bloc ne s'étire plus : l'ensemble se centre sur l'écran */
  .v2-fiche-nom-bloc { flex: 0 1 auto; }
  .v2-fiche-titre { align-items: flex-start; text-align: left; }
  /* Une fiche de staff n'a pas de numéro : rien ne tient la gauche, et le
     nom restait collé au bord pendant que la photo, elle, se centrait.
     L'identité se centre à son tour, sous la même verticale que le
     portrait. */
  .v2 .v2-fiche-txt.est-sans-numero { align-items: center; text-align: center; }
  .v2 .v2-fiche-txt.est-sans-numero .v2-fiche-nom-bloc,
  .v2 .v2-fiche-txt.est-sans-numero .v2-fiche-titre {
    align-items: center; text-align: center;
  }
  .v2 .v2-fiche-txt.est-sans-numero .v2-fiche-poste { justify-content: center; }
  /* La photo revient dans le flux : hors flux, sa boîte n'avait plus
     aucune hauteur ici et l'image disparaissait complètement. */
  .v2-fiche-visuel {
    grid-column: 1; grid-row: 2; justify-self: center; align-self: center;
    justify-content: center; width: 100%;
    position: relative; height: var(--v2-photo-h); margin: 0;
  }
  /* Le portrait se centre sur la personne, pas sur le fichier : `--cx`
     vient de la table de recadrage, et vaut zéro pour les photos déjà
     droites. Sur desktop la photo est calée à droite du cadre, la
     question ne se pose pas. */
  .v2-fiche-photo { transform: translateX(var(--cx, 0)); }
  .v2-fiche-photo {
    position: relative; inset: auto; height: 100%; width: auto;
    max-width: 100%; margin-inline: auto; object-position: bottom center;
  }
  .v2-fiche-etat {
    grid-column: 1; grid-row: 3; width: 100%; max-width: 480px;
    padding-bottom: 26px;
  }

  /* on annule le height: auto et le max-width: 86% de l'ancienne version */
  .v2-fiche-photo { margin-top: 0; height: 100%; width: auto; max-width: 100%; }
}
@media (max-width: 720px) {
  .v2-fiche { --v2-photo-h: min(62vh, 340px); padding: 22px 18px 0; }
  .v2-fiche-txt { padding-bottom: 16px; }
  /* une seule colonne d'informations : à deux, les valeurs se coupaient
     en trois lignes chacune */
  /* En une seule colonne, le libellé et sa valeur se font face : ils
     tiennent largement sur une ligne, et la plaque n'a plus besoin de
     deux étages. Si une valeur est trop longue, elle passe dessous
     d'elle-même. */
  .v2-fiche-lignes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .v2-fiche-ligne {
    flex-direction: row; flex-wrap: wrap;
    align-items: baseline; justify-content: space-between;
    gap: 4px 16px; min-height: 0; padding: 14px 16px;
  }
  .v2-fiche-ligne dt { flex: none; }
  /* Le libellé occupe sa part de la plaque : la valeur se calcule sur ce
     qu'il en reste, gouttière comprise. */
  .v2-fiche-ligne dd {
    font-size: clamp(9px, calc((100cqw - var(--wl, 100) * 1px - 22px) / var(--w, 8)), 13.5px);
    text-align: right;
  }
  .v2-fiche-etat { padding-bottom: 22px; }
}

/* ---------------- la carrière, mise en avant ---------------- */
/* Un seul bloc dépliable sous le cadre, et on lui donne du poids :
   barre de titre plus haute, repère orange, texte plus grand. */
.v2-bloc.est-majeur {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 22px 48px -34px rgba(0,0,0,.85);
}
.v2-bloc.est-majeur .v2-bloc-tete {
  padding: 24px 28px; gap: 18px;
  font-size: 15px; letter-spacing: .18em;
}
.v2-bloc.est-majeur .v2-bloc-tete > span {
  display: inline-flex; align-items: center; gap: 14px;
}
.v2-bloc-tete:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: -3px; }
.v2-bloc.est-majeur .v2-bloc-chevron { width: 19px; height: 19px; }
.v2-bloc.est-majeur[open] .v2-bloc-tete { border-bottom: 1px solid var(--v2-carte-bord); }
.v2-bloc.est-majeur[open] .v2-bloc-chevron { color: var(--v2-orange); }
.v2-bloc.est-majeur .v2-bloc-corps { padding: 20px 26px 26px; }
.v2-bloc.est-majeur .v2-carriere {
  font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.84);
}
.v2-bloc.est-majeur .v2-carriere p { margin: 0 0 .55em; }
@media (max-width: 720px) {
  .v2-bloc.est-majeur .v2-bloc-tete { padding: 18px; font-size: 12px; letter-spacing: .16em; }
  .v2-bloc.est-majeur .v2-bloc-corps { padding: 16px 18px 20px; }
  .v2-bloc.est-majeur .v2-carriere { font-size: 14.5px; line-height: 1.7; }
}

/* ---------------- garde-fous face au thème ---------------- */
/* Les feuilles du thème alignent et espacent titres et paragraphes à leur
   façon : on rend à ces blocs ce qu'ils attendent. */
.v2 .v2-fiche-titre { margin: 0; text-align: left; font-weight: 700; line-height: 1; }
/* Les copies de .v2-fiche-ligne dd restées plus bas dans la feuille
   alignent la valeur à droite : sous son libellé, une valeur longue
   revenait alors à la ligne en escalier. Ici la valeur se lit sous son
   libellé, au même bord que lui. */
.v2 .v2-fiche-ligne dd { line-height: 1.25; text-align: left; }
@media (max-width: 720px) {
  /* en une seule colonne, libellé et valeur se font face : la valeur
     reprend le bord droit */
  .v2 .v2-fiche-ligne dd { text-align: right; }
}
.v2 .v2-fiche-poste { line-height: 1.15; }
.v2 .v2-section.is-galerie .v2-tete h2 { text-align: center; }
.v2 .v2-carriere p { text-align: left; font-weight: 400; }
@media (max-width: 991px) {
  .v2 .v2-fiche-titre { text-align: center; }
}

/* ---------------- galerie ---------------- */
.v2-section.is-galerie { padding-top: 56px; padding-bottom: 84px; }
/* Le titre suit la colonne de la mosaïque. Sans cela il s'alignait sur
   le cadre de la page, large de 1400 px, quand les photos tiennent dans
   900 : il flottait 250 px à leur gauche. */
.v2-section.is-galerie > .v2-tete {
  max-width: var(--v2-page); margin-inline: auto;
}
/* sur un article, la galerie et la suite suivent la colonne du texte */
.v2-article ~ .v2-section { max-width: var(--v2-colonne); margin-inline: auto; }
/* Une mosaïque en colonnes : chaque photo garde ses proportions, aucune
   n'est rognée. Les colonnes se remplissent de haut en bas, ce qui donne
   ce pêle-mêle où portraits et paysages se répondent. */
.v2-galerie {
  max-width: var(--v2-page); margin-inline: auto;
  columns: 3 220px; column-gap: 14px;
}
.v2-galerie.is-large { columns: 4 250px; padding-bottom: 84px; }
/* une image ne doit jamais être coupée entre deux colonnes */
.v2-galerie > * {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: block; width: 100%; margin: 0 0 14px;
}
.v2-galerie-vue {
  padding: 0; border: 1px solid rgba(255,255,255,.10); border-radius: var(--v2-r);
  overflow: hidden; background: var(--v2-carte); cursor: zoom-in;
  transition: border-color 300ms var(--v2-sortie), transform 300ms var(--v2-sortie);
}
/* hauteur libre : c'est la photo qui décide, pas le cadre */
.v2-galerie-vue img {
  display: block; width: 100%; height: auto;
  transition: transform 700ms var(--v2-doux);
}
.v2-galerie-vue:active { transform: scale(.99); }
.v2-galerie-vue:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }

/* la vue agrandie */
.v2-loupe {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 14px; padding: 5vmin;
  background: rgba(10,12,20,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.v2-loupe[hidden] { display: none; }
.v2-loupe-img {
  grid-column: 2; justify-self: center;
  max-width: 100%; max-height: 90vh; width: auto; height: auto;
  border-radius: 12px;
}
.v2-loupe-pas, .v2-loupe-fermer {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 14px; border: 1px solid var(--v2-verre-bord);
  background: rgba(255,255,255,.09); color: #fff; cursor: pointer;
  transition: background-color 200ms var(--v2-sortie), transform 140ms var(--v2-sortie);
}
.v2-loupe-fermer { position: absolute; top: 4vmin; right: 4vmin; }
.v2-loupe-pas:active, .v2-loupe-fermer:active { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
  .v2-loupe-pas:hover, .v2-loupe-fermer:hover { background: rgba(255,255,255,.2); }
}

@media (max-width: 991px) {
  .v2-retour { padding-top: 96px; }
  .v2-section.is-galerie { padding-top: 40px; padding-bottom: 56px; }
  /* au téléphone, deux colonnes : une seule donnerait des photos
     immenses, quatre les rendrait illisibles */
  .v2-galerie, .v2-galerie.is-large { columns: 2 auto; column-gap: 10px; }
  .v2-galerie > * { margin-bottom: 10px; }
  .v2-loupe { grid-template-columns: 1fr; padding: 4vmin; }
  .v2-loupe-img { grid-column: 1; max-height: 74vh; }
  .v2-loupe-pas { position: absolute; bottom: 5vmin; }
  .v2-loupe-pas.is-avant { left: 5vmin; }
  .v2-loupe-pas.is-apres { right: 5vmin; }
}

/* Les onglets gardent leur largeur à gauche, la loupe attend à droite :
   repliée, elle ne demande qu'un rond. */
/* Trois colonnes : les onglets tiennent celle du milieu et tombent donc
   sur l'axe du titre, la loupe garde la droite. En ligne simple, ils
   commençaient au bord gauche et le titre, lui, était centré. */
.v2-barre-cal {
  max-width: var(--v2-page); margin: 0 auto 22px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px;
}
/* la quête rend ses deux parties à la barre : la loupe se range au bout
   de la ligne des onglets, le champ passe dessous sur toute la largeur */
.v2-barre-cal .v2-quete { display: contents; }
.v2-barre-cal .v2-quete-btn { grid-column: 3; justify-self: end; margin: 0; }
.v2-barre-cal .v2-quete-boite { grid-column: 1 / -1; }
/* sous 992 px, les onglets passent en `order: 2` pour l'en-tête des
   actualités : ici ils gardent leur rang, sans quoi la loupe leur
   passerait devant */
.v2-barre-cal .v2-onglets { grid-column: 2; justify-self: center; flex: none; margin: 0; min-width: 0; order: 0; }

@media (max-width: 860px) { .v2-barre-cal { gap: 10px; } }

/* rien ne correspond à la recherche : le panneau le dit plutôt que de
   se vider en silence */
.v2-rien {
  margin: 0; padding: 40px 20px; text-align: center;
  color: rgba(255,255,255,.5); font-size: .95rem;
}
.v2-calendrier > [hidden] { display: none; }

/* on en redemande quand on est arrivé au bout, pas avant */
.v2-encore {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 34px 0 84px;
}
.v2-encore[hidden] { display: none; }
.v2-encore-compte {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

/* ---------------- recherche, repliée derrière sa loupe ---------------- */
/* Un champ toujours ouvert prend une ligne entière pour rien : on
   cherche rarement, on parcourt souvent. Seule la loupe attend, à
   droite ; elle fait descendre le champ sous elle, sur toute la largeur
   de la colonne — un champ déplié à moitié ne vaudrait pas mieux que le
   vide qu'il remplace. */
.v2-quete {
  max-width: var(--v2-page); margin: 0 auto 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
}
.v2-quete-btn {
  grid-column: 2;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
  color: #fff; cursor: pointer;
  transition: background-color 220ms var(--v2-sortie), transform 140ms var(--v2-sortie);
}
.v2-quete-btn:active { transform: scale(.94); }
.v2-quete-btn:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 3px; }
/* la loupe devient croix une fois ouverte : le même bouton referme */
.v2-quete-btn > svg { grid-area: 1 / 1; transition: opacity 200ms var(--v2-sortie); }
.v2-quete-croix { opacity: 0; }
.v2-quete.est-ouverte .v2-quete-loupe { opacity: 0; }
.v2-quete.est-ouverte .v2-quete-croix { opacity: 1; }

/* Le tiroir : une grille de 0fr à 1fr. La hauteur s'anime sans qu'on ait
   à la connaître — « auto » ne se transitionne pas. */
.v2-quete-boite {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: 0fr;
  opacity: 0; margin-top: 0;
  /* Fermeture : plus vive que l'ouverture, et sans retard. Un tiroir qui
     se referme doit libérer la place tout de suite. */
  transition: grid-template-rows 260ms var(--v2-deplie),
              margin-top 260ms var(--v2-deplie),
              opacity 170ms var(--v2-deplie);
}
.v2-quete-tiroir { min-height: 0; overflow: hidden; }
/* Le champ glisse depuis le haut du tiroir pendant qu'il s'ouvre : la
   hauteur seule donnait l'impression d'un volet qui claque, le
   déplacement fait voir le mouvement. */
.v2-quete-champ {
  transform: translateY(-14px);
  transition: transform 260ms var(--v2-deplie), border-color 220ms var(--v2-sortie);
}
.v2-quete.est-ouverte .v2-quete-boite {
  grid-template-rows: 1fr; opacity: 1; margin-top: 10px;
  /* L'opacité suit la hauteur au lieu de la devancer : elle démarre après
     un souffle et finit avec elle. */
  transition: grid-template-rows 440ms var(--v2-deplie),
              margin-top 440ms var(--v2-deplie),
              opacity 340ms var(--v2-deplie) 70ms;
}
.v2-quete.est-ouverte .v2-quete-champ {
  transform: none;
  transition: transform 480ms var(--v2-deplie) 40ms, border-color 220ms var(--v2-sortie);
}

.v2-quete-champ {
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 8px 0 16px; border-radius: 999px;
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
  transition: border-color 220ms var(--v2-sortie);
}
/* le champ actif s'éclaire d'un filet blanc, pas d'un contour orange :
   l'orange appartient aux appels à l'action */
.v2-quete-champ:focus-within { border-color: rgba(255,255,255,.3); }
.v2-quete-ico { flex: none; color: rgba(255,255,255,.45); }

.v2-cherche-champ {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: nimbus-sans, sans-serif; font-size: 16px; color: #fff;
}
.v2-cherche-champ::placeholder { color: rgba(255,255,255,.4); }
/* la croix native de Safari ferait doublon avec la nôtre */
.v2-cherche-champ::-webkit-search-cancel-button { -webkit-appearance: none; }
.v2-cherche-vider {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  transition: background-color 200ms var(--v2-sortie);
}
.v2-cherche-vider[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .v2-quete-btn:hover { background: rgba(255,255,255,.14); }
  .v2-cherche-vider:hover { background: rgba(255,255,255,.24); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-quete-boite,
  .v2-quete.est-ouverte .v2-quete-boite { transition: opacity 200ms; }
  .v2-quete-champ,
  .v2-quete.est-ouverte .v2-quete-champ { transform: none; transition: none; }
}

/* pendant un filtrage, la vedette redevient une carte comme les autres :
   « la plus récente » n'a de sens que sur la liste entière */
.v2-actus-grille.est-filtree { grid-auto-rows: auto; }
.v2-actus-grille.est-filtree > .est-vedette { grid-column: auto; grid-row: auto; }
.v2-actus-grille.est-filtree .v2-carte { aspect-ratio: 16 / 11; height: auto; }
.v2-actus-grille > [hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .v2-cherche-vider:hover { background: rgba(255,255,255,.24); }
}
@media (max-width: 720px) {
  .v2-cherche { height: 48px; padding: 0 13px; margin-bottom: 16px; }
}

/* ---------------- liste d'une rubrique ---------------- */
/* Les rangées sont figées : la vedette occupe deux colonnes ET deux
   rangées, si bien qu'elle se remplit au lieu de laisser un trou à côté
   d'elle. Avec des rangées automatiques, sa hauteur double sans que rien
   ne vienne combler le vide en vis-à-vis. */
.v2-actus-grille {
  max-width: var(--v2-page); margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; padding-bottom: 84px;
}
.v2-actus-grille > * { display: grid; }
.v2-actus-grille .v2-carte { aspect-ratio: 16 / 11; }

/* Seules les listes à vedette figent leurs rangées : la vedette occupe
   deux colonnes ET deux rangées, sinon elle laisse un trou en vis-à-vis.
   Les autres grilles — « à lire aussi », camps, équipes — gardent des
   rangées libres et le rapport propre à chaque carte. */
.v2-actus-grille:has(.est-vedette) { grid-auto-rows: 220px; }
.v2-actus-grille:has(.est-vedette) .v2-carte { aspect-ratio: auto; height: 100%; }
.v2-actus-grille > .est-vedette { grid-column: span 2; grid-row: span 2; }

@media (min-width: 1180px) {
  .v2-actus-grille:has(.est-vedette) { grid-auto-rows: 244px; }
}

.v2-vide {
  padding: 32px 0 84px; color: rgba(255,255,255,.55);
}

@media (max-width: 720px) {
  /* une seule colonne : plus de vedette à étaler, chaque carte reprend
     son propre rapport */
  .v2-actus-grille,
  .v2-actus-grille:has(.est-vedette) {
    grid-template-columns: 1fr; grid-auto-rows: auto;
    gap: 12px; padding-bottom: 56px;
  }
  .v2-actus-grille > .est-vedette { grid-column: auto; grid-row: auto; }
  .v2-actus-grille .v2-carte,
  .v2-actus-grille:has(.est-vedette) .v2-carte { aspect-ratio: 16 / 10; height: auto; }
}

/* ---------------- classement ---------------- */
/* Les mêmes colonnes à toutes les tailles : au téléphone on vient
   justement chercher le bilan, en effacer la moitié le rendrait vain.
   Seule la jauge cède, et elle seule — elle ne dit rien de plus que le
   taux qu'elle illustre.
   Une seule couleur d'accent, pour notre ligne. Le reste est du blanc
   plus ou moins retenu : sur vingt lignes, chaque teinte de plus est un
   repère de moins. */
.v2-classement {
  --cl-cols: 34px minmax(0, 1fr) 38px 38px 38px 110px 52px;
  max-width: var(--v2-page); margin: 0 auto 84px;
  border-radius: var(--v2-r); overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}
.v2-cl-tete, .v2-cl-ligne {
  display: grid; grid-template-columns: var(--cl-cols);
  align-items: center; gap: 10px;
  padding: 0 16px;
}
.v2-cl-tete {
  height: 38px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.v2-cl-tete abbr { text-decoration: none; text-align: center; }
.v2-cl-liste { margin: 0; padding: 0; list-style: none; }
.v2-cl-ligne {
  min-height: 56px; padding-block: 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.v2-cl-liste > li:last-child { border-bottom: 0; }

/* notre ligne : un liseré plutôt qu'un aplat */
.v2-cl-ligne.est-nous { box-shadow: inset 3px 0 0 var(--v2-orange); }
.v2-cl-ligne.est-nous .v2-cl-club b { color: var(--v2-orange); }

.v2-cl-rang {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 15px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,.5);
}

.v2-cl-club { display: flex; align-items: center; gap: 11px; min-width: 0; }
.v2-cl-club img { width: 28px; height: 28px; object-fit: contain; flex: none; }
/* Deux lignes plutôt qu'un texte rapetissé : « Saint-Chamond-Andrezieux »
   ne tient pas sur une seule au téléphone, et le tronquer effacerait ce
   qui distingue justement deux clubs voisins. */
.v2-cl-club b {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13.5px; font-weight: 700; text-transform: uppercase;
  line-height: 1.14; min-width: 0;
}

/* J, V, D — le même gabarit, seule la victoire est appuyée */
.v2-cl-nb {
  text-align: center; font-size: 14px;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,.55);
}
.v2-cl-nb.est-fort { color: #fff; font-weight: 700; }

.v2-cl-jauge {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.10);
}
.v2-cl-tete .v2-cl-jauge { height: auto; background: none; }
.v2-cl-remplie {
  display: block; height: 100%; border-radius: 3px;
  background: rgba(255,255,255,.55);
}
.v2-cl-ligne.est-nous .v2-cl-remplie { background: var(--v2-orange); }

.v2-cl-taux {
  text-align: right; font-size: 13px; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.72); white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .v2-cl-ligne:hover { background: rgba(255,255,255,.05); }
}

/* la jauge cède la place ; les chiffres, jamais */
@media (max-width: 860px) {
  .v2-classement { --cl-cols: 32px minmax(0, 1fr) 34px 34px 34px 46px; }
  .v2-cl-jauge { display: none; }
}
@media (max-width: 560px) {
  .v2-classement { --cl-cols: 24px minmax(0, 1fr) 28px 28px 28px 40px; }
  .v2-cl-tete, .v2-cl-ligne { padding: 0 12px; gap: 7px; }
  .v2-cl-ligne { min-height: 52px; }
  .v2-cl-club { gap: 8px; }
  .v2-cl-club img { width: 24px; height: 24px; }
  .v2-cl-club b { font-size: 12px; }
  .v2-cl-rang { font-size: 13px; }
  .v2-cl-nb { font-size: 13px; }
  .v2-cl-taux { font-size: 12px; }
}

/* ---------------- logos de partenaires ---------------- */
/* les logos se rangent centrés, la dernière ligne comprise */
.v2-logos {
  max-width: var(--v2-page); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
/* Blanc pur, sans bordure : la plupart des logos portent eux-mêmes un
   fond blanc. À 94 % d'opacité, le bleu de la page transparaissait et
   leur carré se détachait de la carte. */
.v2-logo {
  display: grid; place-items: center;
  width: 176px; height: 96px; padding: 14px; border-radius: var(--v2-r);
  background: #fff; border: 0;
  transition: transform 300ms var(--v2-doux), box-shadow 300ms var(--v2-doux);
}
.v2-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.v2-logo.is-grand { width: 224px; height: 118px; }
.v2-logo.is-grand img { max-height: 80px; }

/* Les noms au fil du texte, centrés — comme sur le site en place. Un
   nom court n'a pas besoin d'une ligne entière ; le flux les répartit et
   l'ordre alphabétique se lit de gauche à droite. */
.v2-noms {
  max-width: var(--v2-page); margin: 0 auto; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px;
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72);
  text-align: center;
}
.v2-noms li {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.v2-noms a { color: inherit; text-decoration: none; }

/* ---------------- Club Affaires : une seule colonne ---------------- */
/* La page mêlait deux largeurs : le titre tenait dans les 900 px des
   pages intérieures, la promesse, les atouts et les événements prenaient
   les 1400 px du cadre. Chaque section repartait d'un bord différent.
   Tout s'aligne désormais sur la colonne du titre. */
.v2-ca-page > .v2-section,
.v2-ca-page > .v2-groupe {
  max-width: var(--v2-page); margin-inline: auto;
}

/* ---------------- une vidéo en ouverture de page ---------------- */
/* Elle monte jusqu'au bord haut et la barre de navigation flotte
   par-dessus, comme la une de l'accueil. Son fondu du haut, déjà prévu,
   porte la barre sans qu'il faille l'assombrir davantage. Le titre de
   page qui suit n'a plus à dégager la barre : il rend ses 118 px. */
.v2-ca-video.est-ouverture {
  margin-top: 0;
  aspect-ratio: 21 / 9; min-height: min(62svh, 620px);
}
.v2-ca-video.est-ouverture + .v2-wrap .v2-page-tete { padding-top: 40px; }

@media (max-width: 991px) {
  /* au téléphone la vidéo se redresse, sinon elle n'est qu'une fente */
  .v2-ca-video.est-ouverture { aspect-ratio: 3 / 4; min-height: min(56svh, 460px); }
  .v2-ca-video.est-ouverture + .v2-wrap .v2-page-tete { padding-top: 28px; }
}

/* La vidéo qui doit se montrer entière : celle des bénévoles, où l'on
   doit voir tout le monde. Pleine largeur de l'écran, et la hauteur suit
   son 16/9 : rien n'est coupé, quitte à ce qu'elle soit petite au
   téléphone ou qu'elle emplisse l'écran sur un grand moniteur. */
.v2-ca-video.est-entiere { aspect-ratio: 16 / 9; min-height: 0; margin-top: 0; }
.v2-ca-video.est-entiere .v2-ca-video-fond { object-fit: contain; }
@media (max-width: 991px) {
  .v2-ca-video.est-entiere { aspect-ratio: 16 / 9; min-height: 0; }
}

/* et l'on resserre la page : le titre venait 40 px sous la vidéo, puis
   le texte 84 px plus bas encore, deux respirations pour une seule idée */
.v2-ca-video.est-ouverture + .v2-wrap + .v2-wrap > .v2-section:first-child {
  padding-top: 4px;
}

/* ---------------- Chora'Lien ---------------- */
/* Un seul niveau de fond : le métier n'est plus un cadre mais un simple
   titre suivi d'un filet, et ce sont les enseignes qui portent le bleu.
   Deux fonds emboîtés faisaient trois bleus à l'écran, un de trop pour
   qu'aucun ne veuille dire quelque chose. */
.v2-metier {
  max-width: var(--v2-page); margin: 0 auto;
  background: none; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.v2-metier[hidden] { display: none; }
.v2-metier-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 2px; cursor: pointer; list-style: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  transition: color 220ms var(--v2-sortie);
}
.v2-metier-tete::-webkit-details-marker { display: none; }
.v2-metier-fin { display: flex; align-items: center; gap: 12px; flex: none; }
.v2-metier[open] .v2-bloc-chevron { transform: rotate(180deg); }
/* Le métier ouvert se signale en passant au blanc franc, pas en orange :
   une ligne de titre entière en couleur d'accent tapait à l'oeil et
   entrait en concurrence avec les enseignes qu'elle venait d'ouvrir.
   Le chevron retourné dit déjà l'état, la couleur ne fait que l'appuyer. */
.v2-metier[open] .v2-metier-tete { color: #fff; }

.v2-enseignes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px; padding: 2px 0 22px;
}
/* Chaque enseigne est un bloc plein : le logo carré, le nom et l'adresse
   à côté, puis l'offre dessous sur toute sa largeur — elle est ce qu'on
   vient chercher, elle ne se met pas dans une colonne. */
.v2-enseigne {
  display: grid; grid-template-columns: 62px minmax(0, 1fr);
  align-items: center; gap: 10px 14px;
  padding: 16px; border-radius: var(--v2-r);
  background: var(--v2-carte-nuit);
}
.v2-enseigne[hidden] { display: none; }

/* le seul aplat clair : ces logos sont dessinés pour du blanc */
.v2-enseigne-logo {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 12px;
  background: #fff; padding: 7px; overflow: hidden;
}
.v2-enseigne-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* faute de logo, l'initiale tient la place plutôt que de laisser un trou */
.v2-enseigne-logo b {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 24px; font-weight: 700; color: var(--v2-encre);
}

.v2-enseigne-txt { grid-column: 2; grid-row: 1; display: grid; gap: 3px; min-width: 0; }
.v2-enseigne h3 {
  margin: 0; min-width: 0;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 15px; font-weight: 700; text-transform: uppercase; line-height: 1.2;
  /* un nom long revient à la ligne au lieu de pousser le bloc */
  overflow-wrap: anywhere;
}
.v2-enseigne-adresse {
  font-style: normal; font-size: 12.5px; line-height: 1.45;
  color: rgba(255,255,255,.5);
  overflow-wrap: anywhere;
}

.v2-enseigne-offre {
  grid-column: 1 / -1;
  margin: 2px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.88);
  overflow-wrap: anywhere;
}
.v2-enseigne .v2-btn { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }

@media (hover: hover) and (pointer: fine) {
  .v2-metier-tete:hover { color: #fff; }
}
@media (max-width: 720px) {
  .v2-metier-tete { padding: 17px 2px; font-size: 11px; }
  .v2-enseignes { grid-template-columns: 1fr; padding-bottom: 18px; }
  .v2-enseigne { grid-template-columns: 52px minmax(0, 1fr); padding: 14px; gap: 9px 12px; }
  .v2-enseigne-logo { width: 52px; height: 52px; border-radius: 10px; padding: 6px; }
}

/* ---------------- article ---------------- */
/* Une colonne unique, alignée sur celle du texte : la date et la rubrique
   se font face, l'image suit dans son format d'origine, le titre après. */
.v2-article { max-width: var(--v2-colonne); margin: 0 auto; padding-top: 118px; }
.v2-article-titre { text-align: center; }

.v2-article-marques {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
/* la date porte la même étiquette que les rubriques : seule, en texte
   nu, elle flottait sans rien pour la tenir */
.v2-article-date, .v2-article-rub {
  display: inline-block;
  padding: 6px 13px; border-radius: var(--v2-r-petit);
  background: rgba(255,255,255,.09); border: 1px solid var(--v2-verre-bord);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.82); text-decoration: none;
  line-height: 1.1;
}
.v2-article-date { font-variant-numeric: tabular-nums; }
.v2-article-rub {
  transition: background-color 200ms var(--v2-sortie), color 200ms var(--v2-sortie);
}
.v2-article-rubs { display: flex; flex-wrap: wrap; gap: 8px; }

/* l'image garde son format : du portrait au bandeau, rien n'est rogné.
   Une hauteur maximale l'empêche seulement de manger tout l'écran. */
.v2-article-visuel {
  margin: 0; border-radius: var(--v2-r); overflow: hidden;
  border: 1px solid var(--v2-carte-bord);
  background: rgba(255,255,255,.04);
  display: flex; justify-content: center;
}
.v2-article-visuel img {
  display: block; width: auto; max-width: 100%;
  height: auto; max-height: 78svh;
  object-fit: contain;
}

.v2-article-titre {
  margin: 26px 0 0;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1.08;
  text-transform: uppercase; letter-spacing: -.01em;
}

/* le corps du texte : une colonne lisible, pas toute la largeur */
.v2-texte {
  max-width: var(--v2-colonne); margin: 30px auto 0;
  font-size: 1.02rem; line-height: 1.72; color: rgba(255,255,255,.82);
}
.v2-texte > :first-child { margin-top: 0; }
.v2-texte p { margin: 0 0 1.15em; }
.v2-texte h2, .v2-texte h3, .v2-texte h4 {
  margin: 1.9em 0 .6em;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 700; text-transform: uppercase; line-height: 1.2; color: #fff;
}
.v2-texte h2 { font-size: 1.5rem; }
.v2-texte h3 { font-size: 1.22rem; }
.v2-texte h4 { font-size: 1.05rem; }
.v2-texte a { color: var(--v2-orange); text-decoration: underline; text-underline-offset: 3px; }
.v2-texte img, .v2-texte iframe, .v2-texte video {
  display: block; max-width: 100%; height: auto; margin: 1.6em 0; border-radius: 14px;
  /* le filet de la maison, ici aussi : dans le corps de l'article, une
     photo sombre se perdait dans le fond de page */
  border: 1px solid var(--v2-carte-bord);
}
.v2-texte iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.v2-texte ul, .v2-texte ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.v2-texte li { margin-bottom: .4em; }
.v2-texte blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--v2-orange);
  color: rgba(255,255,255,.7); font-style: italic;
}
.v2-texte strong, .v2-texte b { color: #fff; }
.v2-texte hr { margin: 2em 0; border: 0; border-top: 1px solid rgba(255,255,255,.12); }

@media (hover: hover) and (pointer: fine) {
  .v2-article-rub:hover { background: rgba(255,255,255,.24); }
}

@media (max-width: 720px) {
  .v2-article { padding-top: 96px; }
  .v2-article-visuel { border-radius: 14px; }
  .v2-article-visuel img { max-height: 70svh; }
  .v2-article-titre { margin-top: 20px; }
  .v2-texte { margin-top: 24px; font-size: .98rem; }
}

/* ---------------- Club Affaires ---------------- */
.v2-ca-video {
  position: relative; width: 100%; margin: 8px 0 0;
  aspect-ratio: 21 / 9; overflow: hidden; isolation: isolate;
  background: var(--v2-encre);
}
.v2-ca-video-fond {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
/* la vidéo se fond dans la page par le haut comme par le bas */
.v2-ca-video::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--v2-encre) 0%, rgba(23,43,115,0) 22%,
                              rgba(23,43,115,0) 74%, var(--v2-encre) 100%);
}

.v2-ca-promesse {
  padding: 28px 32px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-ca-promesse.est-fin { border-color: rgba(241,91,27,.3); }
.v2-ca-phrase {
  margin: 0; max-width: 68ch;
  font-size: 1.05rem; line-height: 1.62; color: rgba(255,255,255,.86);
}
.v2-ca-titre {
  margin: 40px 0 20px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.01em;
}

/* les points forts : une grille de promesses, pas une liste à puces */
.v2-atouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.v2-atout {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; line-height: 1.35;
  transition: border-color 260ms var(--v2-sortie), transform 260ms var(--v2-sortie);
}
.v2-atout-marque {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--v2-orange); color: #fff;
}
.v2-ca-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

@media (max-width: 720px) {
  .v2-ca-video { aspect-ratio: 4 / 3; }
  .v2-ca-promesse { padding: 20px; }
  .v2-ca-phrase { font-size: .98rem; }
  .v2-ca-titre { margin: 30px 0 16px; }
  .v2-atouts { grid-template-columns: 1fr; }
  .v2-atout { padding: 15px 16px; font-size: 12.5px; }
}

/* un chapeau de page : une phrase et deux accès */
.v2-manifeste {
  padding: 30px 34px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-manifeste p {
  margin: 0; max-width: 68ch;
  font-size: 1.05rem; line-height: 1.62; color: rgba(255,255,255,.84);
}
.v2-manifeste-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

@media (max-width: 720px) {
  .v2-manifeste { padding: 22px; }
  .v2-manifeste p { font-size: .98rem; }
}

.v2-blocs { display: grid; }



/* ---------------- blocs d'une fiche joueur ---------------- */
/* Le tableau de la fiche staff — libellé à gauche, valeur à droite,
   filet entre les lignes — mais rangé dans des blocs qu'on déplie : les
   informations tiennent en un coup d'œil, la carrière ne s'impose pas. */
.v2-blocs {
  /* l'affichage est décidé plus haut selon la largeur : ici, seulement
     la forme */
  max-width: var(--v2-page); margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; margin-top: 22px;
}
.v2-bloc {
  border-radius: var(--v2-r); overflow: hidden;
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
  align-self: start;
}
.v2-bloc-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  transition: background-color 220ms var(--v2-sortie);
}
.v2-bloc-tete::-webkit-details-marker { display: none; }
.v2-bloc-chevron { flex: none; color: rgba(255,255,255,.5);
  transition: transform 300ms var(--v2-sortie); }
.v2-bloc[open] .v2-bloc-chevron { transform: rotate(180deg); }
.v2-bloc-corps { padding: 0 20px 18px; }

/* les lignes d'information, à la manière de la fiche staff */
.v2-donnees { margin: 0; padding: 0; }
.v2-donnee {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.v2-donnee:last-child { border-bottom: 0; }
.v2-donnee dt {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.v2-donnee dd {
  margin: 0; text-align: right;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 14px; font-weight: 700; text-transform: uppercase;
}
.v2-donnee dd i { font-style: normal; font-weight: 400; text-transform: none;
  font-size: 11.5px; color: rgba(255,255,255,.45); }

/* les moyennes se lisent en grand : ce sont des chiffres, pas du texte */
.v2-donnees.est-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v2-donnees.est-chiffres .v2-donnee {
  display: block; text-align: center; border-bottom: 0;
  padding: 14px 6px; border-radius: 14px; background: rgba(255,255,255,.05);
}
.v2-donnees.est-chiffres dt { display: block; margin-bottom: 6px; }
.v2-donnees.est-chiffres dd { text-align: center; font-size: 1.7rem; line-height: 1; }
.v2-donnees.est-chiffres dd i { display: block; margin-top: 5px; font-size: 10px; }

/* la carrière : un paragraphe par saison, pas un pavé */
.v2-carriere { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.76); }
.v2-carriere p { margin: 0 0 .7em; }
.v2-carriere p:last-child { margin-bottom: 0; }
.v2-carriere br { display: block; content: ''; margin-top: .35em; }

.v2-bloc-lien {
  display: inline-block; margin-top: 14px; padding-bottom: 2px;
  border-bottom: 2px solid rgba(255,255,255,.3);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  transition: border-color 200ms var(--v2-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .v2-bloc-tete:hover { background: rgba(255,255,255,.05); }
  .v2-bloc-lien:hover { border-color: var(--v2-orange); }
}
@media (max-width: 720px) {
  .v2-blocs { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .v2-bloc-tete { padding: 15px 16px; }
  .v2-bloc-corps { padding: 0 16px 15px; }
  .v2-donnee { flex-wrap: wrap; gap: 4px 12px; }
}

/* ---------------- calendrier en lignes ---------------- */
/* Une colonne, du haut vers le bas : un calendrier se parcourt dans
   l'ordre des dates, pas en damier. */
.v2-onglet i {
  font-style: normal; margin-left: 6px; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.v2-onglet.on i { opacity: .8; }


/* Le compte à rebours ferme la carte, posé à cheval sur son bord bas,
   comme sur le site en place : il ne s'insère plus dans la lecture entre
   le lieu et les équipes, où il coupait la carte en deux.
   Quatre cases, l'unité sous le chiffre — l'affichage d'une salle. */
.v2-rebours {
  display: grid; justify-items: center; gap: 6px;
  margin: 2px 0 4px;
}
/* Un bandeau en pied de carte, d'un bord à l'autre : il annule le retrait
   du cadre pour venir toucher ses trois côtés, et ses coins bas épousent
   ceux de la carte. Le libellé et le chrono partagent une seule ligne —
   sur deux étages, le bandeau prenait plus de place que la rencontre.
   Le décompte reste lisible : c'est du blanc sur l'orange du club. */
.v2-match.est-large .v2-rebours {
  grid-column: 1 / -1; justify-self: stretch;
  /* L'annonce contre le bord gauche, le décompte contre le droit : au
     centre de leurs moitiés, ils flottaient au milieu du bandeau sans
     rien tenir. */
  display: grid; grid-template-columns: auto auto;
  align-items: center; justify-content: space-between; gap: 6px 24px;
  margin: 14px -30px -30px; padding: 12px 30px 14px;
  border-radius: 0 0 calc(var(--v2-r) - 2px) calc(var(--v2-r) - 2px);
  background: var(--v2-chrono-fond); border: 0;
}
/* les écussons ne descendent plus jusqu'au bandeau */
.v2-match.est-large.a-rebours .v2-match-eq { grid-row: 1 / -2; }
.v2-match.est-large .v2-rebours-quoi {
  color: #fff; text-align: left; line-height: 1.25;
  font-size: clamp(12px, 3.4vw, 14px); letter-spacing: .1em;
}
.v2-match.est-large .v2-rebours-chrono { gap: 3px; }
.v2-match.est-large .v2-rebours-case { gap: 0; }
.v2-match.est-large .v2-rebours-case b { font-size: clamp(1.6rem, 5.4vw, 2.1rem); }
.v2-match.est-large .v2-rebours-case i { color: rgba(255,255,255,.76); font-size: 8.5px; }
.v2-match.est-large .v2-rebours-pt {
  font-size: clamp(1.3rem, 3.2vw, 1.6rem); color: rgba(255,255,255,.5);
}
/* dans le bandeau, l'orange ne peut plus signaler l'imminence : c'est le
   blanc plein qui prend le relais */
.v2-match.est-large .v2-rebours.est-imminent .v2-rebours-case b { color: #fff; }
.v2-match.est-large .v2-rebours.est-imminent .v2-rebours-pt { color: rgba(255,255,255,.6); }
.v2-rebours-quoi {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.v2-rebours-chrono {
  display: flex; align-items: flex-start; gap: 4px;
  font-family: eurostile, nimbus-sans, sans-serif;
}
.v2-rebours-case { display: grid; justify-items: center; gap: 2px; min-width: 2ch; }
.v2-rebours-case b {
  font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 900; line-height: .92;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: #fff;
}
.v2-rebours-case i {
  font-style: normal; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
/* Les deux-points battent la seconde, comme au tableau d'affichage.
   C'est le seul mouvement : les chiffres, eux, restent lisibles. */
.v2-rebours-pt {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 900; line-height: 1.05;
  color: rgba(255,255,255,.28);
  animation: v2-bat 1s steps(1, end) infinite;
}
@keyframes v2-bat { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }

/* la dernière heure : le chrono passe à l'orange du club */
/* la dernière heure garde l'orange : là, il signale bien une urgence */
.v2-rebours.est-imminent .v2-rebours-case b { color: var(--v2-orange); }
.v2-rebours.est-imminent .v2-rebours-pt { color: rgba(241,91,27,.5); }
.v2-rebours.est-lance .v2-rebours-chrono { display: none; }
.v2-rebours.est-lance .v2-rebours-quoi::after { content: ' — c’est parti'; }

@media (prefers-reduced-motion: reduce) {
  .v2-rebours-pt { animation: none; opacity: .4; }
}

@media (max-width: 780px) {
  .v2-calendrier { padding-bottom: 56px; }
}

/* ---------------- logos de partenaires ---------------- */
/* les logos se rangent centrés, la dernière ligne comprise */
.v2-logos {
  max-width: var(--v2-page); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
/* Blanc pur, sans bordure : la plupart des logos portent eux-mêmes un
   fond blanc. À 94 % d'opacité, le bleu de la page transparaissait et
   leur carré se détachait de la carte. */
.v2-logo {
  display: grid; place-items: center;
  width: 176px; height: 96px; padding: 14px; border-radius: var(--v2-r);
  background: #fff; border: 0;
  transition: transform 300ms var(--v2-doux), box-shadow 300ms var(--v2-doux);
}
.v2-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.v2-logo.is-grand { width: 224px; height: 118px; }
.v2-logo.is-grand img { max-height: 80px; }

/* Les noms au fil du texte, centrés — comme sur le site en place. Un
   nom court n'a pas besoin d'une ligne entière ; le flux les répartit et
   l'ordre alphabétique se lit de gauche à droite. */
.v2-noms {
  max-width: var(--v2-page); margin: 0 auto; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px;
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72);
  text-align: center;
}
.v2-noms li {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.v2-noms a { color: inherit; text-decoration: none; }

/* ---------------- article ---------------- */
/* Une colonne unique, alignée sur celle du texte : la date et la rubrique
   se font face, l'image suit dans son format d'origine, le titre après. */
.v2-article { max-width: var(--v2-colonne); margin: 0 auto; padding-top: 118px; }
.v2-article-titre { text-align: center; }

.v2-article-marques {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
/* la date porte la même étiquette que les rubriques : seule, en texte
   nu, elle flottait sans rien pour la tenir */
.v2-article-date, .v2-article-rub {
  display: inline-block;
  padding: 6px 13px; border-radius: var(--v2-r-petit);
  background: rgba(255,255,255,.09); border: 1px solid var(--v2-verre-bord);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.82); text-decoration: none;
  line-height: 1.1;
}
.v2-article-date { font-variant-numeric: tabular-nums; }
.v2-article-rub {
  transition: background-color 200ms var(--v2-sortie), color 200ms var(--v2-sortie);
}
.v2-article-rubs { display: flex; flex-wrap: wrap; gap: 8px; }

/* l'image garde son format : du portrait au bandeau, rien n'est rogné.
   Une hauteur maximale l'empêche seulement de manger tout l'écran. */
.v2-article-visuel {
  margin: 0; border-radius: var(--v2-r); overflow: hidden;
  border: 1px solid var(--v2-carte-bord);
  background: rgba(255,255,255,.04);
  display: flex; justify-content: center;
}
.v2-article-visuel img {
  display: block; width: auto; max-width: 100%;
  height: auto; max-height: 78svh;
  object-fit: contain;
}

.v2-article-titre {
  margin: 26px 0 0;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1.08;
  text-transform: uppercase; letter-spacing: -.01em;
}

/* le corps du texte : une colonne lisible, pas toute la largeur */
.v2-texte {
  max-width: var(--v2-colonne); margin: 30px auto 0;
  font-size: 1.02rem; line-height: 1.72; color: rgba(255,255,255,.82);
}
.v2-texte > :first-child { margin-top: 0; }
.v2-texte p { margin: 0 0 1.15em; }
.v2-texte h2, .v2-texte h3, .v2-texte h4 {
  margin: 1.9em 0 .6em;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 700; text-transform: uppercase; line-height: 1.2; color: #fff;
}
.v2-texte h2 { font-size: 1.5rem; }
.v2-texte h3 { font-size: 1.22rem; }
.v2-texte h4 { font-size: 1.05rem; }
.v2-texte a { color: var(--v2-orange); text-decoration: underline; text-underline-offset: 3px; }
.v2-texte img, .v2-texte iframe, .v2-texte video {
  display: block; max-width: 100%; height: auto; margin: 1.6em 0; border-radius: 14px;
  /* le filet de la maison, ici aussi : dans le corps de l'article, une
     photo sombre se perdait dans le fond de page */
  border: 1px solid var(--v2-carte-bord);
}
.v2-texte iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.v2-texte ul, .v2-texte ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.v2-texte li { margin-bottom: .4em; }
.v2-texte blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--v2-orange);
  color: rgba(255,255,255,.7); font-style: italic;
}
.v2-texte strong, .v2-texte b { color: #fff; }
.v2-texte hr { margin: 2em 0; border: 0; border-top: 1px solid rgba(255,255,255,.12); }

@media (hover: hover) and (pointer: fine) {
  .v2-article-rub:hover { background: rgba(255,255,255,.24); }
}

@media (max-width: 720px) {
  .v2-article { padding-top: 96px; }
  .v2-article-visuel { border-radius: 14px; }
  .v2-article-visuel img { max-height: 70svh; }
  .v2-article-titre { margin-top: 20px; }
  .v2-texte { margin-top: 24px; font-size: .98rem; }
}

/* ---------------- Club Affaires ---------------- */
.v2-ca-video {
  position: relative; width: 100%; margin: 8px 0 0;
  aspect-ratio: 21 / 9; overflow: hidden; isolation: isolate;
  background: var(--v2-encre);
}
.v2-ca-video-fond {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
/* la vidéo se fond dans la page par le haut comme par le bas */
.v2-ca-video::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--v2-encre) 0%, rgba(23,43,115,0) 22%,
                              rgba(23,43,115,0) 74%, var(--v2-encre) 100%);
}

.v2-ca-promesse {
  padding: 28px 32px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-ca-promesse.est-fin { border-color: rgba(241,91,27,.3); }
.v2-ca-phrase {
  margin: 0; max-width: 68ch;
  font-size: 1.05rem; line-height: 1.62; color: rgba(255,255,255,.86);
}
.v2-ca-titre {
  margin: 40px 0 20px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.01em;
}

/* les points forts : une grille de promesses, pas une liste à puces */
.v2-atouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.v2-atout {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; line-height: 1.35;
  transition: border-color 260ms var(--v2-sortie), transform 260ms var(--v2-sortie);
}
.v2-atout-marque {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--v2-orange); color: #fff;
}
.v2-ca-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

@media (max-width: 720px) {
  .v2-ca-video { aspect-ratio: 4 / 3; }
  .v2-ca-promesse { padding: 20px; }
  .v2-ca-phrase { font-size: .98rem; }
  .v2-ca-titre { margin: 30px 0 16px; }
  .v2-atouts { grid-template-columns: 1fr; }
  .v2-atout { padding: 15px 16px; font-size: 12.5px; }
}

/* un chapeau de page : une phrase et deux accès */
.v2-manifeste {
  padding: 30px 34px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-manifeste p {
  margin: 0; max-width: 68ch;
  font-size: 1.05rem; line-height: 1.62; color: rgba(255,255,255,.84);
}
.v2-manifeste-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

@media (max-width: 720px) {
  .v2-manifeste { padding: 22px; }
  .v2-manifeste p { font-size: .98rem; }
}



/* ---------------- blocs d'une fiche joueur ---------------- */
/* Le tableau de la fiche staff — libellé à gauche, valeur à droite,
   filet entre les lignes — mais rangé dans des blocs qu'on déplie : les
   informations tiennent en un coup d'œil, la carrière ne s'impose pas. */
.v2-blocs {
  /* l'affichage est décidé plus haut selon la largeur : ici, seulement
     la forme */
  max-width: var(--v2-page); margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; margin-top: 22px;
}
.v2-bloc {
  border-radius: var(--v2-r); overflow: hidden;
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
  align-self: start;
}
.v2-bloc-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  transition: background-color 220ms var(--v2-sortie);
}
.v2-bloc-tete::-webkit-details-marker { display: none; }
.v2-bloc-chevron { flex: none; color: rgba(255,255,255,.5);
  transition: transform 300ms var(--v2-sortie); }
.v2-bloc[open] .v2-bloc-chevron { transform: rotate(180deg); }
.v2-bloc-corps { padding: 0 20px 18px; }

/* les lignes d'information, à la manière de la fiche staff */
.v2-donnees { margin: 0; padding: 0; }
.v2-donnee {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.v2-donnee:last-child { border-bottom: 0; }
.v2-donnee dt {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.v2-donnee dd {
  margin: 0; text-align: right;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 14px; font-weight: 700; text-transform: uppercase;
}
.v2-donnee dd i { font-style: normal; font-weight: 400; text-transform: none;
  font-size: 11.5px; color: rgba(255,255,255,.45); }

/* les moyennes se lisent en grand : ce sont des chiffres, pas du texte */
.v2-donnees.est-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v2-donnees.est-chiffres .v2-donnee {
  display: block; text-align: center; border-bottom: 0;
  padding: 14px 6px; border-radius: 14px; background: rgba(255,255,255,.05);
}
.v2-donnees.est-chiffres dt { display: block; margin-bottom: 6px; }
.v2-donnees.est-chiffres dd { text-align: center; font-size: 1.7rem; line-height: 1; }
.v2-donnees.est-chiffres dd i { display: block; margin-top: 5px; font-size: 10px; }

/* la carrière : un paragraphe par saison, pas un pavé */
.v2-carriere { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.76); }
.v2-carriere p { margin: 0 0 .7em; }
.v2-carriere p:last-child { margin-bottom: 0; }
.v2-carriere br { display: block; content: ''; margin-top: .35em; }

.v2-bloc-lien {
  display: inline-block; margin-top: 14px; padding-bottom: 2px;
  border-bottom: 2px solid rgba(255,255,255,.3);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  transition: border-color 200ms var(--v2-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .v2-bloc-tete:hover { background: rgba(255,255,255,.05); }
  .v2-bloc-lien:hover { border-color: var(--v2-orange); }
}
@media (max-width: 720px) {
  .v2-blocs { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .v2-bloc-tete { padding: 15px 16px; }
  .v2-bloc-corps { padding: 0 16px 15px; }
  .v2-donnee { flex-wrap: wrap; gap: 4px 12px; }
}

/* ---------------- calendrier en lignes ---------------- */
/* Une colonne, du haut vers le bas : un calendrier se parcourt dans
   l'ordre des dates, pas en damier. */
/* Un groupe de boutons qui garde sa largeur : étalé, il ne ressemble
   plus à des onglets mais à une barre. */
.v2-onglets.is-centre {
  width: max-content; max-width: 100%;
  margin: 0 auto 24px;
}
.v2-onglet i {
  font-style: normal; margin-left: 6px; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.v2-onglet.on i { opacity: .8; }

.v2-calendrier {
  display: grid; gap: 10px; max-width: var(--v2-page); margin: 0 auto;
  padding-bottom: 84px;
}
.v2-calendrier[hidden] { display: none; }

/* ---------------- logos de partenaires ---------------- */
/* les logos se rangent centrés, la dernière ligne comprise */
.v2-logos {
  max-width: var(--v2-page); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
/* Blanc pur, sans bordure : la plupart des logos portent eux-mêmes un
   fond blanc. À 94 % d'opacité, le bleu de la page transparaissait et
   leur carré se détachait de la carte. */
.v2-logo {
  display: grid; place-items: center;
  width: 176px; height: 96px; padding: 14px; border-radius: var(--v2-r);
  background: #fff; border: 0;
  transition: transform 300ms var(--v2-doux), box-shadow 300ms var(--v2-doux);
}
.v2-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.v2-logo.is-grand { width: 224px; height: 118px; }
.v2-logo.is-grand img { max-height: 80px; }

/* Les noms au fil du texte, centrés — comme sur le site en place. Un
   nom court n'a pas besoin d'une ligne entière ; le flux les répartit et
   l'ordre alphabétique se lit de gauche à droite. */
.v2-noms {
  max-width: var(--v2-page); margin: 0 auto; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px;
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72);
  text-align: center;
}
.v2-noms li {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.v2-noms a { color: inherit; text-decoration: none; }

/* ---------------- article ---------------- */
/* Une colonne unique, alignée sur celle du texte : la date et la rubrique
   se font face, l'image suit dans son format d'origine, le titre après. */
.v2-article { max-width: var(--v2-colonne); margin: 0 auto; padding-top: 118px; }
.v2-article-titre { text-align: center; }

.v2-article-marques {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
/* la date porte la même étiquette que les rubriques : seule, en texte
   nu, elle flottait sans rien pour la tenir */
.v2-article-date, .v2-article-rub {
  display: inline-block;
  padding: 6px 13px; border-radius: var(--v2-r-petit);
  background: rgba(255,255,255,.09); border: 1px solid var(--v2-verre-bord);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.82); text-decoration: none;
  line-height: 1.1;
}
.v2-article-date { font-variant-numeric: tabular-nums; }
.v2-article-rub {
  transition: background-color 200ms var(--v2-sortie), color 200ms var(--v2-sortie);
}
.v2-article-rubs { display: flex; flex-wrap: wrap; gap: 8px; }

/* l'image garde son format : du portrait au bandeau, rien n'est rogné.
   Une hauteur maximale l'empêche seulement de manger tout l'écran. */
.v2-article-visuel {
  margin: 0; border-radius: var(--v2-r); overflow: hidden;
  border: 1px solid var(--v2-carte-bord);
  background: rgba(255,255,255,.04);
  display: flex; justify-content: center;
}
.v2-article-visuel img {
  display: block; width: auto; max-width: 100%;
  height: auto; max-height: 78svh;
  object-fit: contain;
}

.v2-article-titre {
  margin: 26px 0 0;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1.08;
  text-transform: uppercase; letter-spacing: -.01em;
}

/* le corps du texte : une colonne lisible, pas toute la largeur */
.v2-texte {
  max-width: var(--v2-colonne); margin: 30px auto 0;
  font-size: 1.02rem; line-height: 1.72; color: rgba(255,255,255,.82);
}
.v2-texte > :first-child { margin-top: 0; }
.v2-texte p { margin: 0 0 1.15em; }
.v2-texte h2, .v2-texte h3, .v2-texte h4 {
  margin: 1.9em 0 .6em;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 700; text-transform: uppercase; line-height: 1.2; color: #fff;
}
.v2-texte h2 { font-size: 1.5rem; }
.v2-texte h3 { font-size: 1.22rem; }
.v2-texte h4 { font-size: 1.05rem; }
.v2-texte a { color: var(--v2-orange); text-decoration: underline; text-underline-offset: 3px; }
.v2-texte img, .v2-texte iframe, .v2-texte video {
  display: block; max-width: 100%; height: auto; margin: 1.6em 0; border-radius: 14px;
  /* le filet de la maison, ici aussi : dans le corps de l'article, une
     photo sombre se perdait dans le fond de page */
  border: 1px solid var(--v2-carte-bord);
}
.v2-texte iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.v2-texte ul, .v2-texte ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.v2-texte li { margin-bottom: .4em; }
.v2-texte blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--v2-orange);
  color: rgba(255,255,255,.7); font-style: italic;
}
.v2-texte strong, .v2-texte b { color: #fff; }
.v2-texte hr { margin: 2em 0; border: 0; border-top: 1px solid rgba(255,255,255,.12); }

@media (hover: hover) and (pointer: fine) {
  .v2-article-rub:hover { background: rgba(255,255,255,.24); }
}

@media (max-width: 720px) {
  .v2-article { padding-top: 96px; }
  .v2-article-visuel { border-radius: 14px; }
  .v2-article-visuel img { max-height: 70svh; }
  .v2-article-titre { margin-top: 20px; }
  .v2-texte { margin-top: 24px; font-size: .98rem; }
}

/* ---------------- Club Affaires ---------------- */
.v2-ca-video {
  position: relative; width: 100%; margin: 8px 0 0;
  aspect-ratio: 21 / 9; overflow: hidden; isolation: isolate;
  background: var(--v2-encre);
}
.v2-ca-video-fond {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
/* la vidéo se fond dans la page par le haut comme par le bas */
.v2-ca-video::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--v2-encre) 0%, rgba(23,43,115,0) 22%,
                              rgba(23,43,115,0) 74%, var(--v2-encre) 100%);
}

.v2-ca-promesse {
  padding: 28px 32px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-ca-promesse.est-fin { border-color: rgba(241,91,27,.3); }
.v2-ca-phrase {
  margin: 0; max-width: 68ch;
  font-size: 1.05rem; line-height: 1.62; color: rgba(255,255,255,.86);
}
.v2-ca-titre {
  margin: 40px 0 20px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.01em;
}

/* les points forts : une grille de promesses, pas une liste à puces */
.v2-atouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.v2-atout {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; line-height: 1.35;
  transition: border-color 260ms var(--v2-sortie), transform 260ms var(--v2-sortie);
}
.v2-atout-marque {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--v2-orange); color: #fff;
}
.v2-ca-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

@media (max-width: 720px) {
  .v2-ca-video { aspect-ratio: 4 / 3; }
  .v2-ca-promesse { padding: 20px; }
  .v2-ca-phrase { font-size: .98rem; }
  .v2-ca-titre { margin: 30px 0 16px; }
  .v2-atouts { grid-template-columns: 1fr; }
  .v2-atout { padding: 15px 16px; font-size: 12.5px; }
}

/* un chapeau de page : une phrase et deux accès */
.v2-manifeste {
  padding: 30px 34px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-manifeste p {
  margin: 0; max-width: 68ch;
  font-size: 1.05rem; line-height: 1.62; color: rgba(255,255,255,.84);
}
.v2-manifeste-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

@media (max-width: 720px) {
  .v2-manifeste { padding: 22px; }
  .v2-manifeste p { font-size: .98rem; }
}



/* ---------------- blocs d'une fiche joueur ---------------- */
/* Le tableau de la fiche staff — libellé à gauche, valeur à droite,
   filet entre les lignes — mais rangé dans des blocs qu'on déplie : les
   informations tiennent en un coup d'œil, la carrière ne s'impose pas. */
.v2-blocs {
  /* l'affichage est décidé plus haut selon la largeur : ici, seulement
     la forme */
  max-width: var(--v2-page); margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; margin-top: 22px;
}
.v2-bloc {
  border-radius: var(--v2-r); overflow: hidden;
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
  align-self: start;
}
.v2-bloc-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  transition: background-color 220ms var(--v2-sortie);
}
.v2-bloc-tete::-webkit-details-marker { display: none; }
.v2-bloc-chevron { flex: none; color: rgba(255,255,255,.5);
  transition: transform 300ms var(--v2-sortie); }
.v2-bloc[open] .v2-bloc-chevron { transform: rotate(180deg); }
.v2-bloc-corps { padding: 0 20px 18px; }

/* les lignes d'information, à la manière de la fiche staff */
.v2-donnees { margin: 0; padding: 0; }
.v2-donnee {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.v2-donnee:last-child { border-bottom: 0; }
.v2-donnee dt {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.v2-donnee dd {
  margin: 0; text-align: right;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 14px; font-weight: 700; text-transform: uppercase;
}
.v2-donnee dd i { font-style: normal; font-weight: 400; text-transform: none;
  font-size: 11.5px; color: rgba(255,255,255,.45); }

/* les moyennes se lisent en grand : ce sont des chiffres, pas du texte */
.v2-donnees.est-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v2-donnees.est-chiffres .v2-donnee {
  display: block; text-align: center; border-bottom: 0;
  padding: 14px 6px; border-radius: 14px; background: rgba(255,255,255,.05);
}
.v2-donnees.est-chiffres dt { display: block; margin-bottom: 6px; }
.v2-donnees.est-chiffres dd { text-align: center; font-size: 1.7rem; line-height: 1; }
.v2-donnees.est-chiffres dd i { display: block; margin-top: 5px; font-size: 10px; }

/* la carrière : un paragraphe par saison, pas un pavé */
.v2-carriere { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.76); }
.v2-carriere p { margin: 0 0 .7em; }
.v2-carriere p:last-child { margin-bottom: 0; }
.v2-carriere br { display: block; content: ''; margin-top: .35em; }

.v2-bloc-lien {
  display: inline-block; margin-top: 14px; padding-bottom: 2px;
  border-bottom: 2px solid rgba(255,255,255,.3);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  transition: border-color 200ms var(--v2-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .v2-bloc-tete:hover { background: rgba(255,255,255,.05); }
  .v2-bloc-lien:hover { border-color: var(--v2-orange); }
}
@media (max-width: 720px) {
  .v2-blocs { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .v2-bloc-tete { padding: 15px 16px; }
  .v2-bloc-corps { padding: 0 16px 15px; }
  .v2-donnee { flex-wrap: wrap; gap: 4px 12px; }
}

/* ---------------- calendrier en lignes ---------------- */
/* Une colonne, du haut vers le bas : un calendrier se parcourt dans
   l'ordre des dates, pas en damier. */
/* ---------------- fiche d'une équipe ---------------- */
/* La photo de groupe tient la tête de page, le nom posé dessus : ces
   visuels sont larges, ils supportent le format sans être rognés. */
.v2-equipe {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: var(--v2-page); margin: 22px auto 0;
  border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-equipe-photo { display: block; width: 100%; height: auto; }
.v2-equipe-photo.est-ecusson {
  width: 40%; margin: 60px auto; opacity: .35;
}
.v2-equipe::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,17,28,.92) 0%, rgba(15,17,28,.4) 32%,
                              rgba(15,17,28,0) 62%);
}
.v2-equipe-txt { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 28px 32px; }
.v2-equipe h1 {
  margin: 0; font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.01em;
}

.v2-equipe-detail {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 24px;
  max-width: var(--v2-page); margin: 16px auto 0;
  padding: 22px 26px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-equipe-infos { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.8); }
.v2-equipe-infos p { margin: 0; }

@media (max-width: 720px) {
  .v2-equipe-txt { padding: 20px; }
  .v2-equipe-detail { padding: 18px; margin-top: 12px; }
  .v2-equipe-detail .v2-btn { width: 100%; justify-content: center; }
}

/* les responsables : un tableau sobre sous le texte */
.v2-responsables {
  max-width: var(--v2-colonne); margin: 34px auto 0;
  padding: 24px 28px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-responsables h2 {
  margin: 0 0 6px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
@media (max-width: 720px) { .v2-responsables { padding: 18px 20px; } }

/* ============================================================
   CLUB AFFAIRES : LES CINQ PROMESSES, DÉPLIABLES
   Elles étaient réduites à cinq titres en grille : on lisait la
   promesse sans jamais savoir ce qu'elle recouvrait. Chacune
   redevient un dépliant, en une seule colonne pour qu'un texte
   qui s'ouvre ne pousse pas ses voisines de côté.
   Ce bloc passe après les copies de .v2-atouts restées plus haut
   dans la feuille, et fait donc autorité.
   ============================================================ */
.v2-atouts {
  display: flex; flex-direction: column;
  grid-template-columns: none;              /* on annule la grille d'avant */
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.v2-atout {
  display: block; padding: 0; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
  transition: border-color 260ms var(--v2-sortie), background-color 260ms var(--v2-sortie);
  /* les copies restées plus haut posaient eurostile en capitales sur tout
     le bloc : le texte qui s'ouvre en héritait et se lisait en criant */
  font-family: nimbus-sans, sans-serif;
  font-size: 1rem; font-weight: 400; text-transform: none; line-height: 1.6;
}
.v2-atout[open] { border-color: rgba(255,255,255,.2); }

/* la barre de titre : le signe, le texte, rien d'autre à cliquer */
.v2-atout-tete {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; line-height: 1.35;
  color: rgba(255,255,255,.82);
  transition: color 220ms var(--v2-sortie);
}
.v2-atout-tete::-webkit-details-marker { display: none; }
.v2-atout[open] .v2-atout-tete { color: #fff; }
.v2-atout-tete:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: -3px; }
.v2-atout-titre { min-width: 0; }

/* le signe plus bascule en croix : le même geste que sur le site en
   place, en une rotation plutôt qu'en deux icônes */
.v2-atout-marque {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  /* fond transparent, trait orange : en pastille pleine, le signe orange
     disparaissait dans l'orange */
  background: none;
  border: 1px solid rgba(241,91,27,.55); color: var(--v2-orange);
  transition: transform 320ms var(--v2-sortie), background-color 260ms var(--v2-sortie),
              border-color 260ms var(--v2-sortie);
}
.v2-atout[open] .v2-atout-marque {
  transform: rotate(45deg); background: rgba(241,91,27,.12);
}

.v2-atout-corps {
  margin: 0; padding: 0 22px 20px 68px;
  font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.74);
}

@media (hover: hover) and (pointer: fine) {
  .v2-atout-tete:hover { color: #fff; }
}
@media (max-width: 720px) {
  .v2-atouts { grid-template-columns: none; }
  .v2-atout-tete { padding: 15px 16px; gap: 13px; font-size: 12.5px; }
  .v2-atout-marque { width: 26px; height: 26px; }
  /* au téléphone le texte reprend toute la largeur : le décalage sous le
     signe ne laissait plus qu'une colonne de trois mots */
  .v2-atout-corps { padding: 0 16px 16px; font-size: .95rem; }
}

/* Le chapeau d'une page : la promesse, sous le titre, centrée sur lui.
   Il faut passer par .v2-page-tete p pour l'emporter : cette règle-là,
   plus spécifique, imposait margin: 14px 0 0 et empêchait le bloc de se
   centrer. Le thème justifie les paragraphes, d'où le centrage explicite. */
.v2 .v2-page-tete p.v2-page-chapeau {
  max-width: 62ch; margin: 18px auto 0;
  font-size: 1.02rem; line-height: 1.62; text-align: center;
  color: rgba(255,255,255,.78);
}
@media (max-width: 720px) {
  .v2 .v2-page-tete p.v2-page-chapeau { margin-top: 14px; font-size: .98rem; }
}

/* ============================================================
   CALENDRIER : LA RENCONTRE SUR TOUTE LA LARGEUR
   ------------------------------------------------------------
   La carte du calendrier tenait 330 px au milieu d'une colonne
   de 900 : sur un élément de grille, margin-inline: auto annule
   l'étirement et ramène la boîte à la largeur de son contenu.
   Elle prend maintenant toute la largeur, et s'organise comme
   sur le site en place : les informations d'un côté, les
   écussons de l'autre.
   ============================================================ */
/* Les rangées sont déclarées, et non laissées à l'implicite : sans elles,
   `grid-row: 1 / -1` sur les écussons se résout à une seule rangée et le
   chrono partait se ranger dans la case libre à leur droite. Une rangée
   par bloc présent — l'étiquette, le corps, le chrono. */
.v2-match.est-large {
  width: 100%; max-width: none; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center; gap: 18px 34px;
  padding: 28px 30px; text-align: left;
}
.v2-match.est-large.is-next { grid-template-rows: auto auto; }
.v2-match.est-large.a-rebours { grid-template-rows: auto auto auto; }
.v2-match.est-large .v2-match-marque { grid-column: 1; justify-self: start; }
/* Par défaut, à l'accueil, la carte reste une pile centrée : c'est au
   calendrier seulement que le contenu se range à gauche. */
.v2-match-infos {
  grid-column: 1; min-width: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.v2-match.est-large .v2-match-infos { align-items: flex-start; }
/* la compétition et la date sur une ligne, soulignées d'un filet :
   c'est l'en-tête de la rencontre */
/* Trois lignes, dans l'ordre où l'on situe une rencontre : quelle
   compétition, quel jour et à quelle heure, où. Le filet les ferme —
   au-dessous commence le match lui-même. */
/* Le filet ferme l'en-tête sur toutes les cartes, celles du rail de
   l'accueil comprises : c'est la même rencontre, présentée pareil. */
.v2-match-entete {
  /* l'en-tête se mesure : la date s'y ajuste pour tenir sur une ligne */
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 100%; padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* « Dimanche 6 septembre 2026 » ne tient pas à 17 px dans une carte du
   rail : elle s'y coupait en deux lignes et décalait tout ce qui suit.
   `--wd` est sa largeur en cadratins, mesurée au build ; le corps se
   déduit de la place réelle, sans jamais dépasser celui de la ligne. */
.v2-match-quand b {
  white-space: nowrap;
  font-size: min(1em, calc(100cqw / var(--wd, 16)));
}
/* Dans une carte du rail, la date garde sa ligne et l'heure prend la
   sienne — toujours, quelle que soit la place : d'une carte à l'autre,
   la même information doit tomber au même endroit. */
/* en colonne, c'est align-items qui centre : justify-content ne joue plus
   que sur l'axe vertical, et l'heure restait collée à gauche */
.v2-match:not(.est-large) .v2-match-quand { flex-direction: column; align-items: center; gap: 5px; }
.v2-match.est-large .v2-match-entete {
  align-items: flex-start; width: 100%; max-width: 460px;
  padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.v2-match.est-large .v2-match-quand {
  margin: 0; justify-content: flex-start;
  color: rgba(255,255,255,.72);
}
.v2-match.est-large .v2-match-lieu { justify-content: flex-start; margin: 0; }
/* les deux équipes l'une sous l'autre, le vs vit entre les écussons */
.v2-match.est-large .v2-match-noms {
  margin: 0; align-items: flex-start; gap: 0; font-size: 27px;
  /* sur la carte large, les noms sont au fer à gauche : le texte suit */
  text-align: left;
}
.v2-match.est-large .v2-match-noms i { display: none; }
.v2-match.est-large .v2-match-cta {
  justify-content: flex-start; width: auto; margin-top: 2px;
}
.v2-match.est-large .v2-match-cta .v2-btn { flex: 0 0 auto; }
/* les écussons tiennent la droite, centrés sur la hauteur de la carte */
.v2-match.est-large .v2-match-eq {
  grid-column: 2; grid-row: 1 / -1;
  margin: 0; padding: 0; align-self: center; flex: none;
}
/* le chrono ferme la carte, sur toute sa largeur (voir plus haut) */
.v2-match.est-large .v2-rebours { grid-row: -2 / -1; }

@media (max-width: 860px) {
  /* plus la place de deux colonnes : les informations reprennent la
     largeur, les écussons passent dessous et se centrent */
  .v2-match.est-large,
  .v2-match.est-large.is-next,
  .v2-match.est-large.a-rebours {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    justify-items: center; padding: 24px 20px; text-align: center; gap: 16px;
  }
  .v2-match.est-large .v2-match-marque { justify-self: center; }
  /* Ces deux-là doivent porter `.est-large` : sans lui, les règles de la
     version large les battaient en spécificité et le contenu restait au
     fer à gauche pendant que la carte, elle, était centrée. */
  .v2-match.est-large .v2-match-infos { align-items: center; width: 100%; }
  /* L'en-tête empile ses lignes : c'est `align-items` qui les centre,
     `justify-content` ne fait plus rien sur une colonne. */
  .v2-match.est-large .v2-match-entete {
    align-items: center; justify-content: center; width: 100%; max-width: none;
  }
  .v2-match.est-large .v2-match-quand,
  .v2-match.est-large .v2-match-lieu { justify-content: center; }
  .v2-match.est-large .v2-match-noms { align-items: center; text-align: center; font-size: 24px; }
  .v2-match.est-large .v2-match-cta { justify-content: center; width: 100%; }
  /* `.a-rebours` doit figurer ici aussi : sans lui, la règle desktop qui
     empêche les écussons de descendre sous le bandeau les remontait en
     première rangée, avant même le nom de la compétition. */
  .v2-match.est-large .v2-match-eq,
  .v2-match.est-large.a-rebours .v2-match-eq { grid-column: 1; grid-row: auto; }
  /* Au téléphone, deux écussons de 116 px et le score entre eux passaient
     la largeur de la carte et débordaient par les côtés : les logos
     suivent l'écran, et la ligne ne dépasse plus. */
  .v2-match.est-large .v2-match-eq { gap: 12px; max-width: 100%; }
  .v2-match.est-large .v2-match-eq img {
    width: clamp(66px, 22vw, 116px); height: auto; aspect-ratio: 1;
  }
  .v2-match.est-large .v2-rebours {
    grid-column: 1; grid-row: auto; justify-self: stretch;
    margin: 12px -20px -26px; padding: 11px 20px 13px; gap: 4px 12px;
  }
}

/* ============================================================
   LE RUBAN DE PHOTOS
   Un bandeau pleine largeur qui défile, fondu dans la page par
   le haut comme par le bas : rien ne commence ni ne finit net.
   Le défilement est natif, avec accrochage ; les flèches et les
   repères ne font que le pousser d'une vue.
   ============================================================ */
.v2-ruban {
  position: relative; width: 100%; margin: 8px 0 0;
  isolation: isolate; background: var(--v2-encre);
}
.v2-ruban-piste {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.v2-ruban-piste::-webkit-scrollbar { display: none; }
/* Toute la largeur, et le rapport des photos (1400 x 900, soit 14/9)
   tant qu'il tient dans la fenêtre. Au-delà, la hauteur est plafonnée à
   82 % de la vue : la photo est alors un peu rognée en haut et en bas,
   ce qui vaut mieux qu'un bandeau plus haut que l'écran. */
.v2-ruban-vue {
  flex: 0 0 100%; width: 100%;
  height: auto; aspect-ratio: 14 / 9;
  max-height: min(82svh, 900px);
  object-fit: cover; object-position: center; scroll-snap-align: start;
  -webkit-user-drag: none; user-select: none;
}
/* les deux fondus : la photo se dissout dans le bleu de la page */
.v2-ruban::before,
.v2-ruban::after {
  content: ''; position: absolute; left: 0; right: 0; height: 22%;
  pointer-events: none; z-index: 2;
}
.v2-ruban::before {
  top: 0;
  background: linear-gradient(180deg, var(--v2-encre) 0%, rgba(23,43,115,0) 100%);
}
.v2-ruban::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--v2-encre) 0%, rgba(23,43,115,0) 100%);
}

/* Les flèches encadrent les repères au bas du ruban, serrées contre eux,
   comme au bas des autres défilés du site. Jetées contre les bords, elles
   tombaient au milieu de la photo et n'appartenaient à rien. */
.v2-ruban-nav {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
/* Les flèches du ruban sont celles de tous les défilés du site — elles
   portaient un fond gris-noir de l'ancienne palette qui jurait devant la
   photo comme à côté des flèches de l'accueil. */
.v2-ruban-plots { margin: 0; }

/* le texte de la page reprend la colonne de lecture des autres pages */
.v2-section.is-partenaire { max-width: var(--v2-page); margin-inline: auto; }
.v2-section.is-partenaire .v2-texte { margin-top: 0; }
.v2-section.is-partenaire .v2-ca-promesse { margin-top: 32px; }

@media (max-width: 720px) {
  .v2-ruban-nav { bottom: 12px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-ruban-piste { scroll-behavior: auto; }
}

/* les paragraphes qui suivent la promesse, dans la même colonne */
.v2 .v2-page-tete p.v2-page-chapeau.est-suite {
  margin-top: 12px;
  font-size: .99rem; color: rgba(255,255,255,.7);
}
/* les accès, nus : deux boutons sous le texte, sans cadre autour.
   Un cadre bleu clair ici doublait la surface de la page pour ne porter
   que deux liens. */
.v2-page-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 26px;
}
@media (max-width: 720px) {
  .v2 .v2-page-tete p.v2-page-chapeau.est-suite { font-size: .95rem; }
  .v2-page-actions { margin-top: 20px; }
}
/* le ruban ferme la page : il lui faut de l'air avant le pied */
.v2-ruban:last-of-type { margin-bottom: 0; }

/* ---------------- Club Affaires : l'épure ---------------- */
/* Le bleu clair des dépliants pesait autant que les cartes d'article
   alors qu'ils ne portent que du texte : ils reviennent à un simple
   voile sur le fond de page, tenu par le filet de la maison. */
.v2-atout {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.v2-atout[open] {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
/* le titre du bloc se centre, comme le titre de page qu'il prolonge */
.v2-ca-titre { text-align: center; }
.v2-ca-cta.est-centre { justify-content: center; margin-top: 26px; }

/* une icône dans un bouton : elle précède le mot, à la même couleur */
.v2-btn > svg { flex: none; opacity: .85; }
.v2-btn.is-plein > svg { opacity: 1; }

/* le renvoi vers le bas de page glisse au lieu de sauter */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* l'ancre ne se cale pas sous la barre de navigation */
.v2-ca-titre[id] { scroll-margin-top: 118px; }

/* ============================================================
   CLUB AFFAIRES : L'EXPÉRIENCE EN BANDES
   ------------------------------------------------------------
   Une bande par promesse, sur toute la largeur de la colonne.
   Le texte tient une moitié sur le bleu du club, la photo tient
   l'autre et s'y fond par un masque en dégradé, sans coupe nette
   et sans voile noir : les photos sont horizontales, elles ont
   enfin la place de se voir.

   D'une bande à la suivante, le texte et la photo échangent leur
   place, et le texte se cale du côté où il se trouve. Le chiffre
   tient une bande plus fine, sans image.

   Aucun effet au survol : ce sont des blocs de lecture, pas des
   liens, rien ne doit laisser croire qu'on peut cliquer.
   ============================================================ */
.v2-bandes { display: flex; flex-direction: column; gap: 14px; }

.v2-bande {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 320px;
  border-radius: var(--v2-r);
  border: 1px solid var(--v2-carte-bord);
  background: linear-gradient(100deg, #1e389a 0%, var(--v2-encre) 62%);
  display: flex; align-items: center;
}
.v2-bande-img {
  position: absolute; inset: 0 0 0 auto; z-index: -2;
  width: 56%; height: 100%; object-fit: cover;
  /* le raccord : la photo se dissout dans le bleu au lieu d'être coupée */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
}
.v2-bande-txt {
  position: relative; z-index: 1;
  width: 50%; padding: 44px 46px;
}
.v2-bande-titre {
  margin: 0 0 14px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 700; line-height: 1.14;
  text-transform: uppercase; color: #fff;
}
.v2-bande-mot {
  margin: 0; font-size: 1rem; line-height: 1.62;
  color: rgba(255,255,255,.78);
  /* le thème justifie les paragraphes : les mots s'écartaient pour
     remplir la ligne et le bloc paraissait bancal */
  text-align: left;
}

/* ---- une bande sur deux : la photo passe à gauche, le texte suit ---- */
.v2-bande.est-gauche {
  flex-direction: row-reverse;
  background: linear-gradient(260deg, #1e389a 0%, var(--v2-encre) 62%);
}
.v2-bande.est-gauche .v2-bande-img {
  inset: 0 auto 0 0;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 40%, #000 100%);
}
/* Le thème pose un alignement directement sur les titres comme sur les
   paragraphes : l'héritage du bloc ne suffit pas, chacun porte le sien. */
.v2-bande.est-gauche .v2-bande-txt,
.v2 .v2-bande.est-gauche .v2-bande-titre,
.v2 .v2-bande.est-gauche .v2-bande-mot { text-align: right; }

/* ---- la bande du chiffre : plus fine, le nombre et sa légende en face ---- */
.v2-bande.est-chiffre {
  min-height: 0; align-items: center; gap: 32px;
  padding: 30px 46px;
  background: linear-gradient(100deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
}
.v2-bande-valeur {
  flex: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(3.4rem, 6vw, 5.2rem); font-weight: 700; line-height: .9;
  letter-spacing: -.03em; color: #fff;
}
.v2-bande.est-chiffre .v2-bande-txt { width: auto; padding: 0; }
.v2-bande.est-chiffre .v2-bande-titre {
  margin: 0 0 6px; font-size: 13px; letter-spacing: .14em;
  color: rgba(255,255,255,.62);
}
.v2-bande.est-chiffre .v2-bande-mot { font-size: .97rem; }

/* Sous 992 px, tablette comprise, la photo cesse de servir de fond au
   texte : elle prend le haut de la bande, le texte s'installe sous elle
   sur le bleu plein. Posé sur l'image, il se lisait mal quelle que soit
   la force du voile ; séparés, les deux respirent, et la bande grandit,
   ce qui n'est pas un problème sur une page qui défile. */
@media (max-width: 991px) {
  .v2-bande, .v2-bande.est-gauche {
    flex-direction: column; align-items: stretch;
    min-height: 0;
  }
  .v2-bande-img, .v2-bande.est-gauche .v2-bande-img {
    position: relative; inset: auto; z-index: 0;
    width: 100%; height: clamp(200px, 34vw, 300px);
    object-fit: cover;
    /* un fondu court en pied d'image : le raccord au bleu se fait sans
       couture, mais le texte garde un fond plein */
    -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  }
  .v2-bande-txt, .v2-bande.est-gauche .v2-bande-txt {
    width: 100%; padding: 22px 24px 28px; text-align: left;
  }
  .v2 .v2-bande.est-gauche .v2-bande-titre,
  .v2 .v2-bande.est-gauche .v2-bande-mot { text-align: left; }
  .v2-bande-titre { font-size: clamp(1.2rem, 3.4vw, 1.6rem); }
  .v2-bande-mot { font-size: 1rem; }
  .v2-bande.est-chiffre {
    flex-direction: row; align-items: center;
    padding: 26px 24px; gap: 24px;
  }
}
@media (max-width: 560px) {
  .v2-bande.est-chiffre {
    flex-direction: column; align-items: flex-start; gap: 12px;
  }
}

/* La section qui suit la vidéo n'a pas besoin des 84 px du haut : le
   fondu du bas de la vidéo fait déjà la respiration, et les deux
   s'ajoutaient en un couloir vide, très visible au téléphone. */
.v2-ca-video + .v2-wrap .v2-section:first-of-type { padding-top: 20px; }
@media (max-width: 991px) {
  .v2-ca-video + .v2-wrap .v2-section:first-of-type { padding-top: 8px; }
}

/* ============================================================
   PALMARÈS : LA FRISE
   ------------------------------------------------------------
   L'année tient la colonne de gauche et reste au regard pendant
   qu'on lit la période ; le récit et les photos défilent à sa
   droite. Un trait les relie, qui se remplit à mesure qu'on
   descend : on voit d'un coup d'oeil le chemin parcouru.
   ============================================================ */

/* ---------------- la une du palmarès ---------------- */
/* La vidéo tient le fond, le titre et le palmarès se posent dessus. Le
   fondu du bas raccorde la une au bleu de la page, celui du haut porte
   la barre de navigation qui flotte par-dessus. */
.v2-palm-une {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--v2-encre);
}
.v2-palm-une-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.v2-palm-une::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,20,32,.78) 0%, rgba(18,20,32,.42) 26%,
                              rgba(23,43,115,.66) 62%, var(--v2-encre) 100%);
}
.v2-palm-une-txt { padding-bottom: 168px; }

/* le palmarès, sur une plaque de verre : il se lit sur des images qui
   bougent sans que la vidéo cesse de se voir derrière */
.v2-titres {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px; padding: 12px 28px; list-style: none;
  /* à cheval : la plaque mord sur le bas de la vidéo et redescend sur la
     page, à la largeur de lecture des autres pages */
  max-width: var(--v2-page); margin: -112px auto 0;
  border-radius: var(--v2-r); border: 1px solid var(--v2-verre-bord);
  background: var(--v2-verre-bleu);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--v2-biseau);
}
.v2-titre-ligne {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.10);
}
.v2-titre-an {
  flex: none; width: 3.4em;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums;
}
.v2-titre-quoi { font-size: .93rem; line-height: 1.4; color: #fff; }

/* la frise */
.v2-frise {
  position: relative;
  max-width: var(--v2-page); margin: 0 auto;
  padding: 60px 0 84px;
}
/* le trait, et la jauge qui le remplit */
.v2-frise-trait {
  position: absolute; top: 60px; bottom: 84px; left: 27px; width: 2px;
  background: rgba(255,255,255,.10); border-radius: 2px; overflow: hidden;
}
.v2-frise-trait span {
  display: block; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--v2-orange), rgba(241,91,27,.15));
  border-radius: 2px;
}

.v2-etape {
  display: grid; grid-template-columns: 180px minmax(0, 1fr);
  gap: 0 40px; padding-bottom: 64px;
}
.v2-etape:last-child { padding-bottom: 0; }

/* l'année reste en vue tant que sa période se lit */
.v2-etape-an {
  position: sticky; top: 132px; align-self: start;
  display: flex; align-items: center; gap: 18px;
  padding-top: 2px;
}
.v2-etape-pastille {
  flex: none; width: 14px; height: 14px; margin-left: 21px; border-radius: 999px;
  background: var(--v2-encre); border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 6px var(--v2-encre);
}
.v2-etape-an h2 {
  margin: 0; min-width: 0;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1.02;
  letter-spacing: -.01em; color: rgba(255,255,255,.9);
  font-variant-numeric: tabular-nums;
}
/* une période tient sur deux lignes : « 1970 – 1975 » d'un seul tenant
   sortait de sa colonne et se posait par-dessus le récit */
.v2-etape-an h2 span { display: block; }
.v2-etape-an h2.est-periode { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.v2-etape-an h2.est-periode span + span { color: rgba(255,255,255,.6); }

.v2-etape-corps { min-width: 0; }
.v2-etape-titre {
  margin: 0 0 18px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); font-weight: 700; line-height: 1.15;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}

/* ce qui s'est gagné cette année-là */
.v2-etape-faits {
  margin: 0 0 22px; padding: 16px 18px; list-style: none;
  border-radius: var(--v2-r-petit);
  background: rgba(255,255,255,.04); border: 1px solid var(--v2-carte-bord);
  display: flex; flex-direction: column; gap: 9px;
}
.v2-etape-faits li {
  display: flex; align-items: flex-start; gap: 11px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13px; font-weight: 700; text-transform: uppercase; line-height: 1.3;
  color: #fff;
}
.v2-etape-faits svg { flex: none; }

.v2-etape-bloc + .v2-etape-bloc { margin-top: 26px; }
.v2-etape-bloc h4 {
  margin: 0 0 10px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.v2-etape-bloc p {
  margin: 0 0 1em; font-size: .97rem; line-height: 1.68;
  color: rgba(255,255,255,.78);
}
.v2-etape-bloc p:last-child { margin-bottom: 0; }

/* Chaque photo garde ses proportions et prend toute la largeur du récit.
   À hauteur imposée et en cover, les documents d'archive se faisaient
   trancher : une coupe de tête ou de trophée en moins à chaque fois. */
.v2-etape-photos {
  display: flex; flex-direction: column; gap: 12px; margin-top: 24px;
}
.v2-etape-photos img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--v2-carte-bord);
  background: var(--v2-carte-nuit);
}

/* La suite de l'histoire ferme la page. C'est un bloc à part entière,
   posé et centré : en texte nu, l'appel se lisait comme la fin du récit
   plutôt que comme une invitation. */
.v2-section.is-suite {
  max-width: var(--v2-page); margin-inline: auto;
  padding-top: 40px; padding-bottom: 96px;
}
.v2-suite {
  display: flex; flex-direction: column; align-items: center;
  padding: 54px 40px 48px; text-align: center;
  border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-carte-bord);
}
.v2-suite-mot {
  margin: 0; text-align: center;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.06;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
/* le dernier mot à la plume, comme le titre de la page */
.v2-suite-mot em {
  display: block; margin-top: .1em; text-align: center;
  font-family: 'Pinyon Script', 'Apple Chancery', cursive;
  font-style: normal; font-weight: 400;
  font-size: 1.42em; line-height: 1.2;
  text-transform: none; letter-spacing: 0;
  color: rgba(255,255,255,.92); padding: 0 .12em .08em;
}
.v2-suite-quoi {
  margin: 18px auto 0; max-width: 46ch; text-align: center;
  font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.72);
}
.v2-suite .v2-page-actions { margin-top: 28px; }

@media (max-width: 720px) {
  .v2-section.is-suite { padding-top: 24px; padding-bottom: 64px; }
  .v2-suite { padding: 36px 22px 32px; }
  .v2-suite-quoi { margin-top: 14px; font-size: .95rem; }
  .v2-suite .v2-page-actions { margin-top: 22px; }
}

@media (max-width: 860px) {
  .v2-palm-une-txt { padding-bottom: 120px; }
  .v2-titres { padding: 6px 18px; margin-top: -84px; grid-template-columns: minmax(0, 1fr); }
  .v2-titre-ligne { padding: 11px 0; }
  /* l'année passe au-dessus de son récit : deux colonnes ne laisseraient
     de place ni à l'une ni à l'autre */
  .v2-frise { padding: 40px 0 56px; }
  .v2-frise-trait { top: 40px; bottom: 56px; left: 6px; }
  .v2-etape { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 44px; }
  .v2-etape-an {
    position: static; gap: 14px; padding-left: 0;
  }
  .v2-etape-pastille { margin-left: 0; align-self: center; }
  /* au téléphone la colonne fait toute la largeur : la période se relit
     sur une seule ligne */
  .v2-etape-an h2 span { display: inline; }
  .v2-etape-an h2 span + span::before { content: ' '; }
  .v2-etape-corps { padding-left: 28px; }
}
@media (max-width: 720px) {
  .v2-etape-faits { padding: 14px 15px; }
  .v2-etape-faits li { font-size: 12px; }
  .v2-etape-bloc p { font-size: .94rem; line-height: 1.62; }
}

/* Le thème justifie les paragraphes. Sur la colonne étroite de la frise,
   et plus encore au téléphone, cela ouvre des rivières blanches au
   milieu du texte : le récit se lit au fer à gauche. */
.v2 .v2-etape-bloc p { text-align: left; }

/* Un trophée pour un titre, une médaille pour une finale : le repère se
   lit avant même le texte, et dit lequel des deux on regarde. */
.v2-titre-marque, .v2-fait-marque {
  flex: none; display: grid; place-items: center;
  color: rgba(255,255,255,.62);
}
.v2-fait-marque { color: rgba(255,255,255,.75); margin-top: 1px; }
.v2-etape-faits li { align-items: flex-start; }

/* ---------------- le titre à deux mains ---------------- */
/* Le premier mot pose le sujet dans la police du club, le second le
   signe à la plume, sur sa propre ligne. Pinyon Script est une anglaise
   fine : il lui faut plus de corps que le mot qu'elle accompagne, une
   casse normale et de l'air sous elle, sinon ses déliés se perdent. */
.v2-page-tete h1.est-plume { line-height: 1; }
/* Les deux lignes se serrent l'une contre l'autre : l'anglaise a une
   grande hauteur de boîte pour loger ses boucles, ce qui creusait un
   trou entre le mot en capitales et sa signature. On remonte la seconde
   ligne dans cet espace vide plutôt que de l'écrire plus petit. */
.v2-page-tete h1.est-plume em {
  display: inline-block; margin-top: -.3em;
  font-family: 'Pinyon Script', 'Apple Chancery', cursive;
  font-style: normal; font-weight: 400;
  font-size: 1.42em; line-height: 1;
  text-transform: none; letter-spacing: 0;
  color: rgba(255,255,255,.94);
  /* les déliés débordent de la boîte : on leur laisse de quoi passer */
  padding: .12em .14em .1em;
}
@media (max-width: 720px) {
  .v2-page-tete h1.est-plume em { font-size: 1.34em; margin-top: -.26em; }
}

/* le « à » qui relie les deux bornes d'une période : plus discret que le
   nombre qu'il accompagne, et il ne se lit plus comme un signe moins */
.v2-etape-an h2 span i {
  font-style: normal; font-weight: 400;
  color: rgba(255,255,255,.45);
}

/* une photo de la frise s'agrandit au clic */
.v2-etape-photo {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: 14px;
  transition: transform 300ms var(--v2-sortie);
}
.v2-etape-photo:active { transform: scale(.995); }
.v2-etape-photo:focus-visible { outline: 2px solid var(--v2-orange); outline-offset: 4px; }

/* la vue agrandie : la photo, et de quoi refermer. Rien d'autre. */
.v2-zoom {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 5vmin;
  background: rgba(10,12,20,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: zoom-out;
}
.v2-zoom[hidden] { display: none; }
.v2-zoom-img {
  max-width: 100%; max-height: 90vh; width: auto; height: auto;
  border-radius: 12px;
}
.v2-zoom-fermer {
  position: absolute; top: 4vmin; right: 4vmin;
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 14px; border: 1px solid var(--v2-verre-bord);
  background: rgba(255,255,255,.09); color: #fff; cursor: pointer;
  transition: background-color 200ms var(--v2-sortie), transform 140ms var(--v2-sortie);
}
.v2-zoom-fermer:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .v2-zoom-fermer:hover { background: rgba(255,255,255,.2); }
}

/* La plume peut aussi ouvrir le titre, sur la même ligne : « Le »
   à la main, puis « CALENDRIER » en capitales. Elle est un peu remontée,
   une anglaise posée sur la même ligne de base que des capitales paraît
   toujours tomber. */
.v2-page-tete h1.est-plume em.est-avant {
  display: inline-block; margin: 0 .16em 0 0;
  font-size: .94em; line-height: 1;
  /* posée sur la même ligne de base que les capitales : la cursive garde
     ses jambages sous la ligne, elle n'est pas remontée hors du mot */
  vertical-align: baseline;
  color: rgba(255,255,255,.9);
  padding: 0 .04em;
}
/* et la plume qui ferme le titre, sur la même ligne : « CHORA’Lien » */
.v2-page-tete h1.est-plume em.est-suite {
  display: inline-block; margin: 0 0 0 .02em;
  font-size: 1.1em; line-height: 1;
  vertical-align: baseline;
  color: rgba(255,255,255,.94);
  padding: 0 .06em;
}
/* la plume peut aussi prendre sa propre ligne, au-dessus du titre :
   « Organigramme » puis « DU CLUB » dessous, serrés l'un contre l'autre */
.v2-page-tete h1.est-plume em.est-avant.est-bloc {
  display: block; margin: 0 0 -.06em;
  font-size: 1.06em;
}
@media (max-width: 720px) {
  .v2-page-tete h1.est-plume em.est-avant { font-size: .9em; }
  .v2-page-tete h1.est-plume em.est-avant.est-bloc { font-size: 1em; }
  .v2-page-tete h1.est-plume em.est-suite { font-size: 1.06em; }
}

/* ---------------- les titres de section à deux mains ---------------- */
/* Même principe qu'en tête de page : le sujet en capitales, le complément
   à la plume. En bloc il passe à la ligne, en ligne il reste dans la
   phrase (« sur les réseaux »). */
.v2-tete h2.est-plume, .v2-reseaux h2.est-plume { line-height: 1; }
.v2-tete h2.est-plume em, .v2-reseaux h2.est-plume em {
  font-family: 'Pinyon Script', 'Apple Chancery', cursive;
  font-style: normal; font-weight: 400;
  font-size: 1.34em; line-height: 1;
  text-transform: none; letter-spacing: 0;
  color: rgba(255,255,255,.94);
  padding: .1em .12em .08em;
}
/* en bloc : le complément prend sa propre ligne, serré sous le sujet */
.v2-tete h2.est-plume em, .v2-reseaux h2.est-plume em {
  display: block; margin-top: -.26em;
}
@media (max-width: 720px) {
  .v2-tete h2.est-plume em, .v2-reseaux h2.est-plume em { font-size: 1.26em; }
}


/* l'affiche des détections : entière, centrée, dans la colonne de lecture */
.v2-section.is-affiche {
  max-width: var(--v2-page); margin-inline: auto;
  padding-top: 44px; padding-bottom: 84px;
}
.v2-affiche-detection {
  display: block; width: min(100%, 640px); height: auto; margin-inline: auto;
  border-radius: var(--v2-r); border: 1px solid var(--v2-carte-bord);
  background: var(--v2-carte-nuit);
}
@media (max-width: 720px) {
  .v2-section.is-affiche { padding-top: 28px; padding-bottom: 56px; }
}

/* ============================================================
   LES CAMPS
   Deux colonnes de grandes cartes : la période et l'âge en
   pastilles, le titre en grand. Un camp terminé s'éteint : la
   photo passe au gris sous un voile, le mot Terminé se pose en
   filigrane, et la carte ne s'ouvre plus.
   ============================================================ */
.v2-camps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; padding-bottom: 84px;
  /* la colonne des pages intérieures, comme partout ailleurs */
  max-width: var(--v2-page); margin-inline: auto;
}
.v2-carte.est-camp { aspect-ratio: 16 / 10; }
.v2-carte.est-camp .v2-carte-txt { padding: 24px 26px; gap: 10px; }
.v2-carte.est-camp .v2-carte-titre {
  font-size: clamp(1.15rem, 1.8vw, 1.6rem); -webkit-line-clamp: 3;
}
.v2-camp-quand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-camp-dates, .v2-camp-ages, .v2-camp-plein {
  padding: 6px 12px; border-radius: var(--v2-r-petit);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.1; color: #fff;
}
.v2-camp-dates { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.v2-camp-ages { background: rgba(255,255,255,.08); border: 1px solid var(--v2-carte-bord); }
.v2-camp-plein { background: var(--v2-orange); }

/* le camp terminé : éteint, marqué, fermé */
.v2-carte.est-camp.est-fini { cursor: default; }
.v2-carte.est-camp.est-fini .v2-carte-img { filter: grayscale(1) brightness(.72); }
.v2-carte.est-camp.est-fini .v2-carte-txt { opacity: .6; }
.v2-carte.est-camp.est-fini:hover .v2-carte-img { transform: none; }
.v2-carte.est-camp.est-fini:active { transform: none; }
.v2-camp-filigrane {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background: rgba(12,14,24,.44);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.42);
  transform: rotate(-8deg); pointer-events: none;
}

@media (max-width: 860px) {
  .v2-camps { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 56px; }
  .v2-carte.est-camp { aspect-ratio: 16 / 10; }
  .v2-carte.est-camp .v2-carte-txt { padding: 18px; }
}

/* ============================================================
   CHORA'LIEN : CE QUE LA CARTE APPORTE
   ------------------------------------------------------------
   La page n'ouvrait que sur la liste des commerçants : on tombait
   sur un annuaire sans savoir de quoi il retournait. La carte se
   montre maintenant, avec ce qu'elle donne, avant la liste.
   Même vocabulaire que Club Affaires : une promesse, des chiffres
   pris sur les données réelles, deux accès, puis le détail.
   ============================================================ */
/* La garde du haut tombe à 8 px : le titre de page en pose déjà 36 en
   bas, les deux s'ajoutaient et ouvraient un couloir vide. */
.v2-section.is-cl-une { max-width: var(--v2-page); margin-inline: auto; padding-top: 8px; }

.v2-cl-une {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
/* la carte, posée comme un objet : légèrement inclinée, avec son ombre */
.v2-cl-carte {
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  transform: rotate(-2.2deg);
}
.v2-cl-carte img { display: block; width: 100%; height: auto; }

/* Le thème justifie les paragraphes : sur deux lignes courtes, l'accroche
   s'étirait d'un bord à l'autre et laissait de grands trous entre les
   mots. Elle se lit au fer à gauche, comme le texte qui la suit. */
.v2-cl-accroche {
  margin: 0 0 14px; text-align: left;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem); font-weight: 700; line-height: 1.16;
  text-transform: uppercase; color: #fff;
}
.v2-cl-texte {
  margin: 0; font-size: 1rem; line-height: 1.62; text-align: left;
  color: rgba(255,255,255,.78);
}

/* L'accès aux enseignes est l'action principale de la page : un bouton
   plein sur toute la largeur de la colonne, pas une pastille posée au
   milieu d'un grand vide. */
.v2-cl-dire .v2-page-actions { justify-content: stretch; }
.v2-cl-dire .v2-page-actions .v2-btn { flex: 1 1 100%; justify-content: center; }

/* Les deux chiffres tiennent une seule ligne, séparés par un filet :
   en deux pastilles empilées, ils faisaient deux boutons de plus dans
   une colonne qui en comptait déjà. */
/* Les deux mesures partagent la même ligne de base. En align-items:
   center, une légende sur deux lignes décalait son nombre par rapport à
   son voisin : c'est le pied du chiffre qui doit s'aligner, pas le
   milieu de la boîte. */
.v2-cl-chiffres {
  display: flex; align-items: stretch; gap: 0;
  margin-top: 26px; padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.v2-cl-chiffres span {
  display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 0;
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  line-height: 1.3; color: rgba(255,255,255,.55);
}
.v2-cl-chiffres span + span {
  padding-left: 28px; border-left: 1px solid rgba(255,255,255,.12);
}
.v2-cl-chiffres b { align-self: baseline; }
.v2-cl-chiffres b {
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff;
}

/* où retirer la carte : une information, pas un appel à l'action */
.v2-cl-ou {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 0; font-size: .95rem; line-height: 1.5; text-align: left;
  color: rgba(255,255,255,.7);
}
.v2-cl-ou svg { flex: none; opacity: .6; }
.v2-cl-ou a {
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px;
}
.v2-cl-dire .v2-page-actions { justify-content: flex-start; margin-top: 22px; }

/* Les quatre promesses : numérotées, séparées par un filet plutôt que
   posées dans quatre cadres. En cartes, elles pesaient autant que la
   carte elle-même et la page se lisait comme une grille de boutons. */
.v2-cl-promesses {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 52px 0 0; padding: 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,.12);
}
.v2-cl-promesse { padding: 26px 26px 4px 0; }
.v2-cl-promesse + .v2-cl-promesse {
  padding-left: 26px; border-left: 1px solid rgba(255,255,255,.12);
}
.v2-cl-index {
  display: block; margin-bottom: 12px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: rgba(255,255,255,.34); font-variant-numeric: tabular-nums;
}
.v2-cl-promesse h3 {
  margin: 0 0 8px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  line-height: 1.3; color: #fff;
}
.v2-cl-promesse p {
  margin: 0; font-size: .93rem; line-height: 1.58; text-align: left;
  color: rgba(255,255,255,.68);
}

/* Le titre de la liste et sa recherche, à la largeur des enseignes. Le
   titre passe sur deux lignes : la loupe tient alors à côté de lui, sur
   la même ligne de base, au lieu d'être renvoyée dessous. */
/* Le titre et sa loupe partagent une grille, comme sur les pages
   d'actualité : la loupe tient le coin, et le champ qu'elle déplie
   passe sous les deux et prend toute la largeur de lecture. Enfermé
   dans la loupe, il n'affichait qu'un tiers de ce qu'on tapait. */
.v2-tete#enseignes {
  max-width: var(--v2-page); margin: 56px auto 22px; scroll-margin-top: 110px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 14px 16px;
}
.v2-tete#enseignes > div:first-child { grid-column: 1; min-width: 0; }
.v2-tete#enseignes h2 { line-height: 1.08; }
.v2-tete#enseignes .v2-quete { display: contents; }
.v2-tete#enseignes .v2-quete-btn { grid-column: 2; align-self: end; margin-bottom: 4px; }
.v2-tete#enseignes .v2-quete-boite { grid-column: 1 / -1; }
/* Sous 992 px, les titres de section se centrent avec leurs onglets.
   Celui-ci n'en a pas : il ouvre une liste alignée à gauche, il doit
   partir du même bord qu'elle. */
@media (max-width: 991px) {
  .v2-tete#enseignes { justify-content: start; text-align: left; }
  .v2-tete#enseignes > div:first-child { flex: 1 1 auto; text-align: left; }
  .v2 .v2-tete#enseignes h2 { text-align: left; }
}
@media (max-width: 560px) {
  /* deux lignes, pas trois : à sa taille de titre de section, « les
     enseignes » ne tenait pas dans la largeur restée libre à côté de
     la loupe */
  .v2-tete#enseignes h2 { font-size: clamp(1.3rem, 6.4vw, 1.9rem); }
  .v2-tete#enseignes { margin-top: 40px; gap: 12px; }
}

@media (max-width: 991px) {
  .v2-cl-une { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .v2-cl-carte { max-width: 460px; margin-inline: auto; }
  .v2-cl-promesses { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 38px; }
  .v2-cl-promesse:nth-child(3) { padding-left: 0; border-left: 0; }
  .v2-cl-promesse:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; }
}
@media (max-width: 560px) {
  .v2-cl-promesses { grid-template-columns: minmax(0, 1fr); }
  .v2-cl-promesse, .v2-cl-promesse + .v2-cl-promesse {
    padding: 22px 0 4px; border-left: 0;
  }
  .v2-cl-promesse + .v2-cl-promesse { border-top: 1px solid rgba(255,255,255,.12); }
  .v2-cl-chiffres { gap: 18px; }
  .v2-cl-chiffres span + span { padding-left: 18px; }
  .v2-cl-chiffres b { font-size: 1.7rem; }
}


/* ---------------- les équipes de l'Academy ---------------- */
/* Deux colonnes : une photo d'équipe compte une vingtaine de visages,
   en trois colonnes on n'en reconnaissait aucun. */
.v2-equipes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; padding-bottom: 84px;
  /* la colonne de lecture des pages intérieures, comme partout */
  max-width: var(--v2-page); margin-inline: auto;
}
.v2-equipes .v2-carte { aspect-ratio: 16 / 10; }
.v2-equipes .v2-carte-txt { padding: 24px 26px; gap: 10px; }
.v2-equipes .v2-carte-titre { font-size: clamp(1.1rem, 1.7vw, 1.5rem); }

/* le renvoi porte le trait orange des fiches : il dit qu'on peut ouvrir */
.v2-carte-lien {
  align-self: flex-start; margin-top: 4px; padding-bottom: 3px;
  border-bottom: 2px solid var(--v2-orange);
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #fff;
}

@media (max-width: 720px) {
  .v2-equipes { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 56px; }
  .v2-equipes .v2-carte-txt { padding: 18px; }
}

/* ---------------- venir à la salle ---------------- */
/* Trois applications pour un même trajet : on ne peut pas deviner celle
   qu'utilise la personne, et se tromper l'envoie dans une application
   qu'elle n'a pas. Le fond de page est flouté, la boîte reste sobre. */
.v2-route {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center; padding: 6vmin;
  background: rgba(10,12,20,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.v2-route[hidden] { display: none; }
.v2-route-boite {
  position: relative; width: min(420px, 100%);
  padding: 34px 32px 30px; border-radius: var(--v2-r);
  background: var(--v2-carte); border: 1px solid var(--v2-verre-bord);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
  text-align: center;
}
/* Le thème range les titres au fer à gauche : dans une fenêtre centrée,
   celui-ci se retrouvait seul contre le bord. */
.v2-route-titre {
  margin: 0 0 12px; text-align: center;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 1.3rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: -.01em; color: #fff;
}
/* Une adresse se lit en trois lignes, le nom du lieu d'abord : à la
   suite, elle formait une phrase à virgules qui se cassait n'importe où. */
.v2-route-lieu {
  margin: 0 0 24px; font-size: .95rem; line-height: 1.55;
  color: rgba(255,255,255,.7); text-align: center;
}
.v2-route-lieu b, .v2-route-lieu span { display: block; }
.v2-route-lieu b { font-weight: 700; color: #fff; }
.v2-route-choix { display: grid; gap: 10px; }
.v2-route-choix .v2-btn { justify-content: center; }
.v2-route-fermer {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; border: 1px solid var(--v2-verre-bord);
  background: rgba(255,255,255,.07); color: #fff; cursor: pointer;
}


/* ---------------- le menu déplié floute la page ---------------- */
/* Tout ce qui n'est pas une barre de navigation passe au flou pendant
   que le menu est ouvert : les deux barres font partie du menu, pas de
   ce qu'il recouvre. Le flou porte sur le contenu lui-même plutôt que
   sur un voile posé par-dessus, qui créerait un contexte d'empilement
   au-dessus du menu et le masquerait. */
body > *:not(.v2-barre):not(.v2-appli):not(.v2-zoom):not(.v2-route):not(script):not(noscript) {
  transition: filter 320ms var(--v2-sortie);
}
.v2-menu-ouvert body > *:not(.v2-barre):not(.v2-appli):not(.v2-zoom):not(.v2-route):not(script):not(noscript) {
  filter: blur(7px) brightness(.7);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body > *:not(.v2-barre):not(.v2-appli) { transition: none; }
}

/* le club formateur ouvre la carrière, légèrement détaché de la suite */
.v2-carriere .est-formation {
  margin: 0 0 .9em; padding-bottom: .7em;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: #fff; font-weight: 700;
}

/* ---------------- la signature des photos ---------------- */
/* La mention du photographe ne se pose plus sur la vignette : répétée sous
   chaque image d'une mosaïque, elle chargeait la page sans être lue. Elle
   apparaît à l'agrandissement, là où l'on regarde vraiment la photo. La
   grille garde sa position relative, dont la loupe se sert encore. */
.v2-galerie-vue { position: relative; }
/* dans la loupe, la mention se centre sous la photo agrandie */
.v2-loupe-signature {
  position: absolute; left: 0; right: 0; bottom: 1.6vmin; margin: 0;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 11px; font-weight: 700; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  pointer-events: none;
}
.v2-loupe-signature[hidden] { display: none; }
@media (max-width: 991px) {
  /* au téléphone les flèches occupent le pied : la signature se cale
     entre elles, à leur hauteur */
  .v2-loupe-signature { bottom: calc(5vmin + 17px); }
}

/* ==========================================================
   FIN DE FEUILLE — reprises de main
   ==========================================================
   Ce fichier contient des sections recopiées jusqu'à trois fois, héritées
   de l'export Webflow : une correction posée au milieu se fait écraser
   plus bas. Ce qui suit vient donc en dernier, à dessein.
*/

/* Le texte justifié sans césure creuse des rivières blanches dans une
   colonne de 360 px : c'est le format le plus lu du site, souvent d'une
   main après un match. La justification vient du CSS que WordPress
   embarquait avec les articles. */
.v2-article-corps p,
.v2-texte p,
.w-richtext p,
.rich-text-content-page p,
.v2-contact-orga p,
.parag_histoire {
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* `[hidden]` ne suffit pas ici : `.v2-rebours-chrono` porte un `display:
   flex` de même spécificité, déclaré plus haut, et les tirets du décompte
   restaient affichés sous « Match en cours ». */
.v2-rebours [hidden] { display: none !important; }

/* L'état de la rencontre, à la place du décompte : « Match en cours »
   pendant deux heures trente, puis « Match terminé » jusqu'à ce que la
   base passe au match suivant, le lendemain.
   Même famille que le décompte qu'il remplace : le bandeau ne doit pas
   changer de typographie en cours de soirée. */
.v2-rebours-etat {
  display: block;
  text-align: center;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-weight: 900;
  font-size: clamp(.92rem, 2.6vw, 1.12rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.1;
  padding: 6px 4px 2px;
  color: #ff8a4c;
}
.v2-rebours.est-termine .v2-rebours-etat { color: rgba(255, 255, 255, .62); }

/* Dans le bandeau orange de la page Agenda, l'orange sur l'orange ne se
   lit pas : c'est le blanc qui prend, sur toute la largeur du bandeau. */
.v2-match.est-large .v2-rebours-etat {
  grid-column: 1 / -1;
  justify-self: stretch;
  color: #fff;
  padding: 2px 0;
}
.v2-match.est-large .v2-rebours.est-termine .v2-rebours-etat { color: rgba(255, 255, 255, .82); }

/* ---------------- le bandeau du jeu éphémère (accueil) ---------------- */
.v2-jeu-bandeau {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 22px;
  padding: 16px 26px 16px 18px; border-radius: var(--v2-r);
  background: linear-gradient(90deg, #c93c0c 0%, #ee5c19 100%);
  color: #fff; text-decoration: none;
  transition: transform 320ms var(--v2-sortie), box-shadow 320ms var(--v2-sortie);
}
.v2-jeu-bandeau:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(0,0,0,.9); }
.v2-jeu-bandeau-chaco { width: 92px; height: auto; }
.v2-jeu-bandeau-txt { display: grid; gap: 2px; min-width: 0; }
.v2-jeu-bandeau-sur { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.v2-jeu-bandeau strong {
  font-family: eurostile, nimbus-sans, sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight: 900; text-transform: uppercase; line-height: 1.1;
}
.v2-jeu-bandeau-txt > span:last-child { font-size: .92rem; opacity: .92; }
.v2-jeu-bandeau-logo { height: 40px; width: auto; max-width: 150px; object-fit: contain; background: #fff; border-radius: 8px; padding: 5px 8px; }
.v2-jeu-bandeau .v2-btn { background: #fff; color: #c93c0c; border-color: transparent; }
@media (max-width: 720px) {
  .v2-jeu-bandeau { grid-template-columns: auto 1fr; gap: 14px; padding: 14px 16px; }
  .v2-jeu-bandeau-logo { grid-column: 1 / -1; justify-self: start; }
  .v2-jeu-bandeau .v2-btn { grid-column: 1 / -1; justify-self: stretch; }
}

/* ---------------- le pied de page sur grand écran ---------------- */
/* Trois blocs sur une seule ligne : la carte d'identité, l'annonce du cri,
   les comptes. Ils partagent la même base, si bien que « Ici c'est » se
   pose à la hauteur de l'adresse et des réseaux au lieu de flotter seul
   sur une ligne à part. Sur téléphone, l'empilement reste celui d'avant. */
@media (min-width: 992px) {
  .v2-pied-carte {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    /* le rapprochement du cri est porté par .v2-cri-tete : la carte ne
       doit plus ajouter sa propre réserve en bas */
    padding-bottom: 0;
    flex-wrap: nowrap;
  }
  .v2-pied-carte .v2-cri-tete { margin-bottom: 0; }
  .v2-pied-carte .v2-pied-acces { align-items: flex-end; }
  /* la ligne entière descend vers le mot, comme le faisait l'annonce seule */
  .v2-pied-carte + .v2-cri-cadre,
  .v2-pied .v2-cri-cadre { margin-top: -1.1vw; }
}

/* Sur téléphone et tablette, l'annonce reprend sa ligne, sous la carte. */
@media (max-width: 991px) {
  .v2-pied-carte .v2-cri-tete { flex: 1 1 100%; order: 3; }
}

/* ---------------- les archives d'une rubrique ---------------- */
/* Au-delà de trois cents articles, la liste bascule en liens : mille
   cartes chargées d'un coup pesaient plus d'un méga-octet. Repliées par
   saison, elles gardent l'accès sans peser sur la page. */
.v2-archives {
  margin: 72px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.v2-archives-titre {
  margin: 0 0 6px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: .01em; color: #fff;
}
.v2-archives-intro {
  margin: 0 0 22px; font-size: 14px; color: rgba(255, 255, 255, .62);
}
.v2-archives-saison {
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.v2-archives-saison > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 4px; cursor: pointer; list-style: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
}
.v2-archives-saison > summary::-webkit-details-marker { display: none; }
.v2-archives-saison > summary span {
  min-width: 2.4em; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  font-size: 12px; font-weight: 700; text-align: center;
  color: rgba(255, 255, 255, .75);
}
.v2-archives-saison > summary::after {
  content: '+'; font-size: 19px; line-height: 1; color: rgba(255, 255, 255, .55);
}
.v2-archives-saison[open] > summary::after { content: '–'; }
.v2-archives-saison ul {
  margin: 0; padding: 0 4px 18px; list-style: none;
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.v2-archives-saison li a {
  display: block; padding: 7px 0; font-size: 14.5px; line-height: 1.35;
  color: rgba(255, 255, 255, .74); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .v2-archives-saison li a:hover { color: #fff; text-decoration: underline; }
}

/* ---------------- les pages de texte légales ---------------- */
/* Mentions légales, confidentialité, label LNB, club affaires : ces pages
   viennent du rendu d'origine et s'appuyaient sur la feuille du thème,
   retirée en septembre 2026. Elles n'avaient plus ni marge ni colonne :
   le texte partait d'un bord à l'autre, sous la barre de navigation.
   On leur redonne la colonne du site et une hiérarchie lisible. */
.section-base { padding: 0 0 72px; }
.wrap.is-page-basique {
  width: min(var(--v2-page), 100% - 48px);
  margin-inline: auto;
  padding-top: 120px;
}
.div-heading1.special-legal { display: block; }
.div-file-ariane.is-players {
  margin-bottom: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.div-file-ariane.is-players .link_ariane {
  color: rgba(255, 255, 255, .55); text-decoration: none;
}
.heading_1_last.special-legal,
.heading-legal {
  margin: 0 0 28px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 900;
  line-height: 1.05; text-transform: uppercase; color: #fff;
}

.rich-text-content-page {
  color: rgba(255, 255, 255, .84);
  font-size: 15.5px; line-height: 1.65;
  max-width: 68ch;
}
.rich-text-content-page h2 {
  margin: 34px 0 12px;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em; color: #fff;
}
.rich-text-content-page h2:first-child { margin-top: 0; }
.rich-text-content-page h3 {
  margin: 24px 0 8px; font-size: 1.05rem; font-weight: 700; color: #fff;
}
.rich-text-content-page p { margin: 0 0 14px; }
.rich-text-content-page ul,
.rich-text-content-page ol { margin: 0 0 16px; padding-left: 22px; }
.rich-text-content-page li { margin-bottom: 6px; }
.rich-text-content-page strong { color: #fff; font-weight: 700; }
.rich-text-content-page a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rich-text-content-page .maj-legal {
  margin-top: 30px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px; color: rgba(255, 255, 255, .55);
}

/* le lien de retour, en bas de ces pages */
.link-cta-03 {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 30px; padding: 12px 22px; min-height: 44px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; text-decoration: none;
  font-family: eurostile, nimbus-sans, sans-serif;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
@media (hover: hover) and (pointer: fine) {
  .link-cta-03:hover { background: rgba(255, 255, 255, .10); }
}

@media (max-width: 760px) {
  .wrap.is-page-basique { width: min(var(--v2-page), 100% - 28px); padding-top: 96px; }
  .rich-text-content-page { font-size: 15px; }
}