/*
 * Mises en page propres à chaque page. Une section par page ; chaque équipe
 * ajoute ses règles dans sa section (voir web/CONTRAT.md).
 */

/* --- Commun -------------------------------------------------------------------- */
.page-entete {
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-5);
  border-bottom: var(--trait) solid var(--filet);
}
.page-entete h1 {
  max-width: 22ch;
}
fieldset.groupe {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
fieldset.groupe legend {
  padding: 0;
  margin-bottom: var(--e-2);
}
select,
.champ {
  min-height: var(--cible-min);
  padding: var(--e-2) 2.25rem var(--e-2) var(--e-3);
  border: var(--trait) solid var(--filet-fort);
  border-radius: var(--rayon-2);
  background-color: var(--surface);
  max-width: 100%;
}
.code {
  margin: 0;
  padding: var(--e-4);
  overflow-x: auto;
  background: var(--fond-2);
  border: var(--trait) solid var(--filet);
  border-radius: var(--rayon-2);
  font-family: var(--police-chiffres);
  font-size: var(--t-0);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Accueil ------------------------------------------------------------------- */
.accueil__une {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  padding-block: var(--e-4) var(--e-7);
}
.accueil__titre {
  font-size: var(--t-6);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 14ch;
}
.accueil__titre em {
  font-style: italic;
  font-weight: 500;
}
.accueil__actions {
  padding-top: var(--e-3);
}
.accueil__actions .mention {
  flex-basis: 100%;
}
.accueil__illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 15rem;
}
.accueil__ou {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--t-4);
  color: var(--encre-2);
}
.vignette {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  width: min(42%, 12rem);
  aspect-ratio: 3 / 4;
  padding: var(--e-4);
  background: var(--surface);
  border: var(--trait) solid var(--filet-fort);
  border-radius: var(--rayon-2);
  box-shadow: var(--ombre-levee);
}
.vignette--gauche {
  transform: rotate(-4deg) translateY(6px);
}
.vignette--droite {
  transform: rotate(3deg) translateY(-6px);
}
.vignette__lettre {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--e-3);
  border: var(--trait-fort) solid var(--encre);
  border-radius: var(--rayon-1);
  font-family: var(--police-titre);
  font-weight: 700;
}
.vignette__ligne {
  height: 0.45rem;
  border-radius: 1px;
  background: var(--filet);
}
.vignette__ligne--courte {
  width: 60%;
}
@media (min-width: 56rem) {
  .accueil__une {
    grid-template-columns: 1.35fr 1fr;
    padding-block: var(--e-6) var(--e-8);
  }
}

.faits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-8);
  display: grid;
  gap: var(--e-4);
  border-top: var(--trait-fort) solid var(--encre);
  padding-top: var(--e-5);
}
.fait {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  max-width: none;
}
.fait > .icone {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
}
.fait strong {
  font-family: var(--police-titre);
  font-size: var(--t-3);
}
@media (min-width: 48rem) {
  .faits {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-6);
  }
}
.accueil__comment,
.accueil__pas {
  margin-bottom: var(--e-7);
}
.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  display: grid;
  gap: var(--e-4);
}
.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--e-3);
  max-width: var(--largeur-texte);
}
.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--trait) solid var(--encre);
  border-radius: 50%;
  font-family: var(--police-titre);
  font-weight: 700;
  grid-row: span 2;
}

/* --- Duel ---------------------------------------------------------------------- */
.page-duel {
  display: grid;
  gap: var(--e-6);
}
.page-duel__scene {
  scroll-margin-top: var(--e-4);
}
.page-duel__suivi {
  padding-top: var(--e-5);
  border-top: var(--trait) solid var(--filet);
  max-width: 40rem;
}
/* .bouton impose son display : l'attribut hidden doit rester le plus fort. */
.page-duel [hidden] {
  display: none !important;
}
.page-duel__suivi .pastille {
  flex-wrap: wrap;
}
.page-duel__suivi .pastille .bouton--discret {
  min-height: var(--cible-min);
  font-size: var(--t-0);
}
.serie__paire {
  display: grid;
  gap: var(--e-3);
}
@media (min-width: 48rem) {
  .serie__paire {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Résultat ----------------------------------------------------------------- */
.bascule {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-2);
}
@media (min-width: 40rem) {
  .bascule {
    grid-template-columns: 1fr 1fr;
  }
  .bascule legend {
    grid-column: 1 / -1;
  }
}
.resultat__une {
  padding: var(--e-5);
  background: var(--surface);
  border: var(--trait-fort) solid var(--encre);
  border-radius: var(--rayon-2);
}
.resultat__vedette {
  font-family: var(--police-titre);
  font-size: var(--t-5);
  font-weight: 650;
  line-height: 1.1;
}
/* Résultat pas encore fiable (R23) : groupe de tête de trois, sans ordre. */
.resultat__groupe-liste {
  display: grid;
  gap: var(--e-3);
}
.resultat__groupe-nom {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  font-weight: 650;
  line-height: 1.15;
}
.resultat__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}
.resultat__nom {
  font-size: var(--t-3);
}
.resultat__score {
  font-size: var(--t-3);
  white-space: nowrap;
}
.resultat__couverture {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
}
.resultat__couverture .icone {
  flex: none;
  margin-top: 0.15em;
}
.resultat__ligne h4,
.programme dt,
.decisifs strong {
  font-size: var(--t-1);
}
.decisifs {
  padding-left: var(--e-4);
}
.parts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-3);
  max-width: 40rem;
}
.parts__ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-1) var(--e-3);
  font-size: var(--t-1);
}
.parts__barre {
  grid-column: 1 / -1;
  height: 0.5rem;
  border: var(--trait) solid var(--filet-fort);
  border-radius: var(--rayon-1);
  overflow: hidden;
}
.parts__plein {
  display: block;
  height: 100%;
  background: var(--encre);
}
.programme {
  margin: 0;
  display: grid;
  gap: var(--e-2) var(--e-5);
}
.programme dd {
  margin: 0 0 var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: var(--trait) solid var(--filet);
}
@media (min-width: 48rem) {
  .programme {
    grid-template-columns: 12rem 1fr;
  }
  .programme dt {
    padding-top: 0.2em;
  }
}
.partage {
  padding-top: var(--e-5);
  border-top: var(--trait) solid var(--filet);
}
.partage__apercu {
  width: min(100%, 18rem);
  height: auto;
  border: var(--trait) solid var(--filet-fort);
  box-shadow: var(--ombre-carte);
}
.consentement .case + .case {
  margin-top: calc(-1 * var(--e-2));
}

/* --- Classement ---------------------------------------------------------------- */
.classement__ligne {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--e-3);
}
.classement__position {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  font-weight: 650;
  color: var(--encre-2);
}
.classement__texte {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  line-height: 1.4;
}
.classement__ecart {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-style: italic;
}
/* Classement des candidats par groupes : texte seul, ni barre, ni chiffre, ni couleur. */
.groupe-candidats {
  padding: var(--e-4);
  border: var(--trait) solid var(--filet);
}
.groupe-candidats__noms {
  display: grid;
  gap: var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
}
.groupe-candidats__entre {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 650;
}

/* --- Pages de contenu (méthode, sources, corrections, mentions…) ---------------- */
.texte-long h3 {
  font-size: var(--t-2);
  margin-top: var(--e-5);
}
.liste-puces {
  padding-left: 1.25rem;
}
.liste-puces > li + li {
  margin-top: var(--e-2);
}
.sommaire {
  padding: var(--e-4);
  border: var(--trait) solid var(--filet);
  border-radius: var(--rayon-2);
  background: var(--surface);
}
.sommaire ol {
  margin: 0;
  padding-left: 1.5rem;
  columns: 2 14rem;
  column-gap: var(--e-6);
}
.sommaire li {
  padding-block: var(--e-1);
  break-inside: avoid;
}
.formule {
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--encre);
  background: var(--fond-2);
  font-family: var(--police-chiffres);
  font-size: var(--t-1);
  overflow-wrap: anywhere;
}
.formule > p + p {
  margin-top: var(--e-2);
}
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: flex-start;
}
.filtres__champ {
  display: grid;
  gap: var(--e-2);
  flex: 1 1 14rem;
  min-width: 0;
}
.filtres__champ .champ {
  width: 100%;
}
input[type='search'].champ {
  padding-right: var(--e-3);
  font: inherit;
}
.source > summary {
  font-weight: 500;
}
.journal__avant-apres {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-1) var(--e-3);
  margin: 0;
}
.journal__avant-apres dt {
  font-weight: 650;
}
.journal__avant-apres dd {
  margin: 0;
}

/* --- Intégration --------------------------------------------------------------- */
.apercu-integre {
  width: 100%;
  height: 46rem;
  border: var(--trait) solid var(--filet-fort);
  border-radius: var(--rayon-2);
  background: var(--fond);
}

/* Vue intégrée (integre.html) : compacte, sans navigation */
.vue-integree body {
  min-height: 0;
}
.integre__entete,
.integre__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
}
.integre__entete {
  border-bottom: var(--trait) solid var(--filet);
}
.integre__pied {
  border-top: var(--trait) solid var(--filet);
}
.integre__principal {
  flex: 1;
  padding: var(--e-4);
}
.vue-integree .duel__question {
  font-size: var(--t-3);
}

/* --- Gel ------------------------------------------------------------------------ */
.gel {
  display: grid;
  place-items: center;
}
.gel .conteneur {
  max-width: 44rem;
}