/* ==========================================================
   ÉQUIPE
   ========================================================== */
.team-group             { margin-top: 2.75rem; }
.team-group:first-child { margin-top: 0; }
.team-group h2 {
  font-family: var(--race); font-weight: 700; font-size: 1.9rem;
  margin: 0 0 1.25rem; padding-bottom: .4rem; border-bottom: 2px solid #000;
}

.member-grid {
  display: grid; gap: 1.75rem 1.25rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* Ratio du cadre des photos : 1 = carré, 4 / 5 = portrait, 3 / 4 = plus haut. Tous les cadres restent identiques. */
.member-grid { --member-ratio: 1; }
.member { min-width: 0; }
.member-frame {
  position: relative; overflow: hidden; aspect-ratio: var(--member-ratio);
  background: var(--paper);
  border-bottom: 6px solid var(--orange);   /* sur le cadre : ne subit pas le zoom */
}
/* L'image est positionnée en absolu : sa taille d'origine ne peut plus déformer le cadre. */
.member-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Secours si un ancien team.js (sans cadre) est encore en cache */
.member > img, .member-photo > img {
  width: 100%; height: auto; aspect-ratio: var(--member-ratio); object-fit: cover;
  background: var(--paper); border-bottom: 6px solid var(--orange);
}
/* Photo cliquable vers LinkedIn (seulement si le membre a un lien dans data/*.json) */
.member-photo { display: block; position: relative; }
.member-photo img { transition: filter .3s ease; }
.member-photo:hover img,
.member-photo:focus-visible img { filter: brightness(.8); }
/* Pastille « in » : montre que la photo mène à LinkedIn (visible au survol) */
.member-photo::after {
  content: "in"; position: absolute; right: .55rem; bottom: .95rem;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 6px; background: #0a66c2; color: #fff;
  font: 700 1.05rem/1 Arial, sans-serif; letter-spacing: -.04em;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.member-photo:hover::after,
.member-photo:focus-visible::after { opacity: 1; transform: none; }
/* Écrans tactiles (pas de survol) : la pastille reste visible */
@media (hover: none) { .member-photo::after { opacity: 1; transform: none; } }

.member strong { display: block; margin-top: .65rem; }
.member span   { color: var(--ink-soft); font-size: .95rem; }
.member .level {
  display: inline-block; vertical-align: middle; margin-left: .25rem;
  padding: .05rem .45rem; font-size: .75rem; font-weight: 700; line-height: 1.5;
  color: #000; background: var(--orange); white-space: nowrap;
}


/* ==========================================================
   COMPÉTITIONS
   ========================================================== */
.comp-block + .comp-block { margin-top: 3.5rem; }
.comp-list  { list-style: none; margin: 0; padding: 0; }
.comp {
  display: grid; grid-template-columns: 6rem 1fr; gap: 1rem 1.5rem;
  padding: 1.25rem 0; border-top: 2px solid #000;
}
.comp:last-child  { border-bottom: 2px solid #000; }
.comp-year        { font-family: var(--race); font-weight: 800; font-size: 2rem; line-height: 1; }
.comp h3          { margin: 0 0 .2rem; font-size: 1.25rem; }
.comp p           { margin: 0; color: var(--ink-soft); }
.comp p + p       { margin-top: .5rem; }
.comp-results     { list-style: none; margin: .75rem 0 0; padding: 0; }
.comp-results li  { padding: .3rem 0; border-top: 1px solid var(--line); }
.comp-results li:first-child { border-top: 0; }
.comp .comp-result {
  margin-top: .6rem; padding-left: .7rem; border-left: 6px solid var(--orange);
  color: #000; font-weight: 700;
}
.empty { color: var(--ink-soft); }

@media (max-width: 520px) { .comp { grid-template-columns: 1fr; gap: .25rem; } }


/* ==========================================================
   PARTENAIRES
   ========================================================== */

/* --- Titre de chaque niveau (diamant, or, argent…) ---
   Grand, lisible, professionnel. La couleur vient de --tier-color. */
.tier { --tier-color: #ccc; }
.tier + .tier { margin-top: 3rem; }

.tier h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);  /* grand et imposant */
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tier-color);
  text-align: center;
  margin: 0 0 1.5rem;
  /* Trait décoratif sous le titre */
  padding-bottom: .6rem;
  border-bottom: 3px solid var(--tier-color);
}

/* Couleurs de chaque niveau */
.tier--official { --tier-color: #cf290f; }   /* rouge Soucy */
.tier--diamond { --tier-color: #55b9e1; }  /* bleu ciel glacé */
.tier--gold     { --tier-color: #d4a64a; }  /* or chaleureux */
.tier--silver   { --tier-color: #a8adb5; }  /* argent neutre */
.tier--bronze   { --tier-color: #c0845a; }  /* bronze terreux */
.tier--support  { --tier-color: #4a03bd; }  /* bleu-gris sobre */

/* --- Grille de logos --- */
.logo-grid {
  display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

/* --- Case partenaire ---
   Fond gris sombre pour que les logos blancs ressortent bien.
   Le fond précis est défini par la variable --tile-bg propre au niveau,
   ou par la variable individuelle --this-tile-bg sur la case elle-même. */
.logo-tile {
  display: flex; align-items: center; justify-content: center;
  min-height: 105px; padding: 1.25rem;
  text-align: center; font-weight: 700;
  text-decoration: none;

  /* Fond : d'abord la surcharge individuelle, ensuite le fond du niveau, enfin le défaut */
  background: var(--this-tile-bg, var(--tile-bg, var(--tile-bg-default)));

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;          /* coins arrondis */
  box-shadow: 0 3px 14px rgba(0,0,0,.25);
  color: #fff;                  /* texte blanc (cas sans logo) */
  transition: box-shadow .2s, border-color .2s;
}
a.logo-tile:hover {
  border-color: var(--orange);
  box-shadow: 0 8px 28px rgba(255,106,0,.25);
}
/* LOGOS DES PARTENAIRES
   - Conserve les couleurs d'origine
   - Respecte les proportions
   - S'adapte aux logos ronds, carrés ou rectangulaires
*/
.logo-tile img {
  display: block;
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: 70px;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}


/* --- Fond des cases : dépend du NIVEAU (id dans data/*.json) --- */
.tier--official .logo-tile { --tile-bg: var(--tile-bg-official); }
.tier--diamond  .logo-tile { --tile-bg: var(--tile-bg-diamond); }
.tier--gold     .logo-tile { --tile-bg: var(--tile-bg-gold); }
.tier--silver   .logo-tile { --tile-bg: var(--tile-bg-silver); }
.tier--bronze   .logo-tile { --tile-bg: var(--tile-bg-bronze); }
.tier--support  .logo-tile { --tile-bg: var(--tile-bg-support); }

/* --- Taille des cases : dépend de size dans data/*.json (indépendante du niveau) ---
   Un même niveau peut changer de taille d'une saison à l'autre.
   xl = diamant 2026 = officiel 2027 */
.tier--size-xl .logo-grid   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.tier--size-xl .logo-tile   { min-height: 180px; }
.tier--size-xl .logo-tile img { max-height: 130px; }

.tier--size-l .logo-grid    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.tier--size-l .logo-tile    { min-height: 165px; }
.tier--size-l .logo-tile img { max-height: 118px; }

.tier--size-m .logo-tile    { min-height: 155px; }
.tier--size-m .logo-tile img { max-height: 110px; }

/* ==========================================================
   HIÉRARCHIE DES PARTENAIRES
   Les trois derniers niveaux ne doivent pas paraître égaux.
   Ajustez les largeurs minimales pour changer le nombre de cases
   par rangée, et les hauteurs pour augmenter la distinction.
   Le contenu du logo reste intact (aucun filtre ni transparence).
   ========================================================== */

/* ARGENT : cases larges, présence encore importante */
.tier--size-s .logo-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1.1rem;
}
.tier--size-s .logo-tile { min-height: 135px; padding: 1.1rem; }
.tier--size-s .logo-tile img { max-height: 90px; }

/* BRONZE : cases plus compactes, plus nombreuses par ligne */
.tier--size-xs .logo-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr));
  gap: .85rem;
}
.tier--size-xs .logo-tile { min-height: 94px; padding: .85rem; }
.tier--size-xs .logo-tile img { max-height: 60px; }

/* SOUTIEN : très petites cases (xxs était absent de l'ancien CSS) */
.tier--size-xxs .logo-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
  gap: .7rem;
}
.tier--size-xxs .logo-tile {
  min-height: 68px;
  padding: .6rem;
  border-radius: 9px;
  box-shadow: 0 2px 7px rgba(0,0,0,.14);
}
.tier--size-xxs .logo-tile img { max-height: 43px; }

/* Titres : distinction secondaire, sans toucher aux logos */
.tier--silver h3  { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
.tier--bronze h3  { font-size: clamp(1.65rem, 3vw, 2.15rem); }
.tier--support h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }

/* Liseré de niveau sur les cases : discret mais reconnaissable */
.tier--silver .logo-tile  { border-bottom: 3px solid var(--tier-color); }
.tier--bronze .logo-tile  { border-bottom: 2px solid var(--tier-color); }
.tier--support .logo-tile { border-bottom: 1px solid var(--tier-color); }

/* Sur les téléphones très étroits, on évite les cases écrasées. */
@media (max-width: 380px) {
  .tier--size-s .logo-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier--size-xs .logo-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier--size-xxs .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Plusieurs saisons affichées en même temps */
.partner-season + .partner-season { margin-top: 4rem; }
.partner-season-title { text-align: center; margin: 0 0 2rem; }

/* Section d'introduction (appel à devenir partenaire) */
.partner-introduction { background: #f5f5f5; text-align: center; }
.partner-introduction h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.pdf-note { font-size: .8rem; color: #666; }

/* Zone "devenir partenaire" en bas */
.partner-cta { margin-top: 3.5rem; }


/* ==========================================================
   HISTOIRE
   Chaque entrée de data/history.js devient un « chapitre » :
     .chapter-year   la grande année
     .chapter-body   le titre et les paragraphes
     .mosaic         les photos (1 à 6), de tailles différentes
   ========================================================== */
.chapter {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-top: 2px solid #000;
}
.chapter:first-child { padding-top: 0; border-top: 0; }
.chapter:last-child  { padding-bottom: 0; }

/* L'année : sur sa propre rangée, très grande, suivie d'un trait orange.
   Pour la rendre plus petite ou plus grande, changez le clamp(min, souple, max). */
.chapter-year {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  font-family: var(--race); font-size: clamp(2.25rem, 9vw, 7.5rem);
  line-height: 1; letter-spacing: .01em; overflow-wrap: anywhere;
}
.chapter-year::after {            /* trait orange après l'année */
  content: ""; flex: 1 1 2rem; height: 6px; background: var(--orange);
}

/* Sous l'année : le titre à gauche, le texte à droite.
   Pour donner plus ou moins de place au texte, changez les 4fr / 8fr. */
.chapter-body {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.chapter-body h3 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; }
.chapter-paras p { max-width: 46rem; margin: 0 0 1rem; font-size: 1.05rem; color: var(--ink-soft); }
.chapter-paras p:last-child { margin-bottom: 0; }
@media (max-width: 800px) { .chapter-body { grid-template-columns: 1fr; gap: .75rem; } }

/* ---------- Mosaïque de photos ----------
   Grille de 4 colonnes. La hauteur d'une rangée est --row-photo.
   La disposition dépend du nombre de photos (mosaic--1 à mosaic--6) :
   chaque lettre du dessin ci-dessous est une photo (a = la première, la plus grande).
   Sans width/height dans data/history.js, cette disposition est utilisée.
   Dès qu'une photo a width ou height, la taille se règle dans les données
   et les photos se placent automatiquement (voir .mosaic--custom). */
.mosaic {
  --row-photo: clamp(110px, 16vw, 175px);   /* hauteur d'une rangée */
  display: grid; gap: .75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--row-photo);
  margin-top: clamp(1.75rem, 4vw, 3rem);
}
.mosaic + .mosaic { margin-top: .75rem; }

.photo {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 12px; background: var(--paper);
}
.photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s ease;
}
.photo:hover img { transform: scale(1.04); }
.photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 1rem .75rem; font-size: .9rem; line-height: 1.3; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
}

@media (min-width: 701px) {
  .mosaic--1 { grid-template-areas: "a a a a"  "a a a a"  "a a a a"; }   /* 1 grande photo */
  .mosaic--2 { grid-template-areas: "a a a b"  "a a a b"  "a a a b"; }   /* grande + haute */
  .mosaic--3 { grid-template-areas: "a a b b"  "a a b b"  "a a c c"; }
  .mosaic--4 { grid-template-areas: "a a a b"  "a a a b"  "c c d d"; }
  .mosaic--5 { grid-template-areas: "a a b c"  "a a d d"  "e e e e"; }
  .mosaic--6 { grid-template-areas: "a a b d"  "a a c d"  "e e f f"; }
  .slot-a { grid-area: a; }  .slot-b { grid-area: b; }  .slot-c { grid-area: c; }
  .slot-d { grid-area: d; }  .slot-e { grid-area: e; }  .slot-f { grid-area: f; }

  /* Si les photos ont width/height dans data/history.js, leurs tailles
     remplacent la disposition fixe. 4 colonnes et placement automatique. */
  .mosaic--custom {
    grid-template-areas: none;
    grid-auto-flow: row dense;
  }
  .mosaic--custom .photo {
    grid-area: auto;
    grid-column: span var(--photo-width, 1);
    grid-row: span var(--photo-height, 1);
  }
}

/* Mobile : 2 colonnes. La première photo prend toute la largeur ;
   si la dernière reste seule sur sa rangée, elle prend aussi toute la largeur. */
@media (max-width: 700px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; }
  .photo:first-child { grid-column: 1 / -1; grid-row: span 2; }
  .photo:last-child:nth-child(even) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .photo img, .member-photo img, .member-photo::after { transition: none; }
  .photo:hover img { transform: none; }
}