/* ============================================================
   Gabarit Team France — page /team-france/ et pages d'édition /team-france/<annee>/.
   Repris de maquettes/maquette-team-france-byu-france.html (parties propres à la page).
   ============================================================ */
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;font-stretch:112%;line-height:1.05;letter-spacing:-.015em}
h3{font-size:1.1rem;font-weight:700}
.chiffre{font-style:italic;font-weight:900;font-stretch:118%}

/* ---------- Bandeau de tête ---------- */
.tete-page{background:var(--nuit);color:var(--papier);position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,60px)}
.tete-page::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--photo-hero);
  background-size:cover;background-position:center 38%;
  filter:grayscale(1) contrast(1.08);
  opacity:var(--opacite-hero,.8);
}
/* Voile bleu nuit : plus dense à gauche, là où se trouve le titre */
.tete-page::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(11,27,57,.94) 0%,
    rgba(11,27,57,.80) 40%,
    rgba(11,27,57,.52) 68%,
    rgba(11,27,57,.78) 100%);
}
.tete-page .wrap{position:relative;z-index:1}
.fil{font-size:.85rem;color:#9FB4E8;margin-bottom:22px}
.fil a{text-decoration:none}
.fil a:hover{color:#fff}
.fil span{margin:0 8px;opacity:.5}
.tete-page h1{font-weight:900;font-stretch:118%;line-height:.94;letter-spacing:-.03em;
  font-size:clamp(2.2rem,5.6vw,4rem);max-width:14ch}
.tete-page .chapeau{margin-top:20px;color:#C6CEE0;font-size:1.06rem;max-width:76ch}

.compteurs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(159,180,232,.25);
  border:1px solid rgba(159,180,232,.25);margin-top:34px}
.compteurs div{background:rgba(11,27,57,.72);padding:18px 16px}
.compteurs b{display:block;font-size:clamp(1.5rem,3.2vw,2.3rem);font-style:italic;font-weight:900;
  font-stretch:118%;line-height:1}
.compteurs i{font-style:normal;font-size:.76rem;color:#9FB4E8;display:block;margin-top:5px;line-height:1.35}

/* ---------- Rappel du principe ---------- */
.principe{background:var(--rouge);color:#fff}
.principe .wrap{padding:22px var(--gouttiere);display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.principe p{font-weight:800;font-stretch:112%;font-size:clamp(1.02rem,2.2vw,1.4rem);max-width:none}
.principe span{font-size:.9rem;opacity:.88;font-weight:500}

/* ---------- Sections ---------- */
section{padding:clamp(52px,7vw,88px) 0}
.tete{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.intro{color:var(--gris);font-size:1.04rem;margin-top:12px;max-width:82ch}

/* ---------- Grille des quinze ---------- */
.equipe{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:20px}
.carte{background:#fff;border:1px solid var(--trait);text-decoration:none;display:block;
  transition:border-color .15s,transform .15s}
.carte:hover{border-color:var(--bleu);transform:translateY(-2px)}
.carte .visuel{aspect-ratio:3/4;background:var(--nuit) var(--photo,none) center top/cover;
  display:grid;place-items:center;position:relative}
.carte .visuel b{font-size:2.4rem;font-style:italic;font-weight:900;color:rgba(255,255,255,.32)}
.carte .record{position:absolute;left:0;bottom:0;background:var(--bleu);color:#fff;padding:8px 16px;
  font-style:italic;font-weight:900;font-stretch:118%;font-size:1.2rem;line-height:1.15}
.carte .record em{font-style:normal;font-weight:600;font-size:.52em;letter-spacing:.03em;margin-left:6px}
/* display:block : correction validée par Ronan. Dans la maquette, .nom est un <span> en ligne
   dont le <b> passe en bloc : le padding ne s'appliquait pas et le texte touchait le bord. */
.carte .nom{display:block;padding:16px 18px 18px}
.carte .nom b{display:block;font-weight:800;font-stretch:108%;font-size:1.02rem;line-height:1.2;
  margin-bottom:3px}
.carte .nom i{font-style:normal;font-size:.85rem;color:var(--gris)}
.carte:hover .record{background:var(--rouge)}

/* ---------- Photo d'équipe ---------- */
.photo-equipe{margin:0 0 34px}
/* Correction demandée par Ronan : la photo s'affiche en entier, à sa proportion d'origine.
   La maquette la posait en fond recadré (4:3, puis 16:9 au-delà de 700 px), ce qui coupait
   le haut et le bas. */
.photo-equipe .cadre{
  background:var(--nuit);
  border:1px solid var(--trait);
}
.photo-equipe .cadre img{width:100%;height:auto}
.photo-equipe figcaption{margin-top:10px;font-size:.86rem;color:var(--gris)}
.archives .photo-equipe .cadre{border-color:rgba(159,180,232,.3)}
.archives .photo-equipe figcaption{color:#9FB4E8}

/* max-width:none : demande de Ronan, l'encadré occupe toute la largeur de la grille
   (la limite de lecture des paragraphes, 82ch, l'arrêtait avant le bord). */
.forfait{margin-top:30px;background:#fff;border:1px solid var(--trait);border-left:4px solid var(--rouge);
  padding:20px 22px;font-size:.96rem;color:var(--gris);max-width:none}
.forfait b{color:var(--encre)}

/* ---------- Archives ---------- */
.archives{background:var(--nuit);color:var(--papier)}
.archives h2{color:var(--papier)}
.archives .intro{color:#9FB4E8}
.onglets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0;border-bottom:1px solid rgba(159,180,232,.3)}
.onglets button{font:inherit;font-weight:800;font-stretch:110%;font-size:1.05rem;cursor:pointer;
  background:none;border:none;color:#9FB4E8;padding:12px 18px;border-bottom:3px solid transparent;
  margin-bottom:-1px}
.onglets button[aria-selected="true"]{color:#fff;border-bottom-color:var(--rouge)}
.onglets button:hover{color:#fff}
.panneau{padding-top:34px}
.panneau[hidden]{display:none}
.resume{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(159,180,232,.25);
  border:1px solid rgba(159,180,232,.25);margin-bottom:30px}
.resume div{background:var(--nuit);padding:16px}
.resume b{display:block;font-size:1.7rem;font-style:italic;font-weight:900;font-stretch:118%;line-height:1}
.resume i{font-style:normal;font-size:.74rem;color:#9FB4E8;display:block;margin-top:4px}
.liste{border-top:1px solid rgba(159,180,232,.3)}
.rang{display:grid;grid-template-columns:36px 40px 1fr auto;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(159,180,232,.16);text-decoration:none}
.rang:hover{background:rgba(19,56,160,.28)}
.rang .place{font-style:italic;font-weight:900;color:#9FB4E8;font-size:.95rem}
.rang .vignette{width:40px;height:40px;border-radius:50%;background:var(--bleu);
  border:2px solid rgba(159,180,232,.4);display:grid;place-items:center;
  font-weight:900;font-style:italic;font-size:.78rem;color:#fff}
.rang .qui b{font-weight:800;font-stretch:108%}
.rang .qui i{font-style:normal;display:block;font-size:.8rem;color:#9FB4E8}
.rang .n{font-style:italic;font-weight:900;font-stretch:118%;font-size:1.35rem}
.rang .n em{font-style:normal;font-weight:600;font-size:.55em;color:#9FB4E8;margin-left:4px}
.recit{margin-top:26px;color:#C6CEE0;font-size:.98rem}
.recit p + p{margin-top:14px}

/* Ajout thème : moins de quatre compteurs renseignés → autant de colonnes que de compteurs. */
.compteurs.n3,.resume.n3{grid-template-columns:repeat(3,1fr)}
.compteurs.n2,.resume.n2{grid-template-columns:repeat(2,1fr)}
.compteurs.n1,.resume.n1{grid-template-columns:1fr}

/* ---------- Appel ---------- */
.appel{background:#fff;border-top:1px solid var(--trait)}
.appel .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  padding:clamp(36px,5vw,56px) var(--gouttiere)}
.appel h2{max-width:20ch}

@media (max-width:900px){
  .compteurs,.resume,.compteurs.n3,.resume.n3{grid-template-columns:repeat(2,1fr)}
  .appel .wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .equipe{grid-template-columns:repeat(2,1fr);gap:12px}
  .rang{grid-template-columns:28px 1fr auto;gap:12px}
  .rang .vignette{display:none}
}