/* =====================================================================
   ADENS MONDIAL 2026 - FEUILLE DE STYLE PRINCIPALE
   Le site utilise uniquement HTML et CSS. Aucun JavaScript n'est nécessaire.
   ===================================================================== */

/* Variables : valeurs réutilisables pour les couleurs, ombres et dimensions. */
:root {
  --bleu: #082a63;
  --bleu-clair: #0e4aa8;
  --rouge: #d81e35;
  --jaune: #f7c948;
  --vert: #087f5b;
  --fond: #f4f7fb;
  --surface: #ffffff;
  --texte: #172033;
  --texte-doux: #5d687a;
  --bordure: #dce4ef;
  --ombre: 0 16px 45px rgba(8, 42, 99, 0.12);
  --rayon: 22px;
  --largeur: 1180px;
}

/* Normalisation : évite les différences de calcul de largeur entre navigateurs. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, Arial, Helvetica, sans-serif; background: var(--fond); color: var(--texte); line-height: 1.65; }
a { color: inherit; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; }

/* Les deux cases sont cachées, mais leurs labels restent cliquables. */
.controle-theme, .controle-menu { position: fixed; opacity: 0; pointer-events: none; }
.site { min-height: 100vh; background: var(--fond); transition: background .25s, color .25s; }
.conteneur { width: min(var(--largeur), calc(100% - 36px)); margin-inline: auto; }

/* Navigation globale. */
.entete { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--bordure); backdrop-filter: blur(14px); }
.barre-navigation { min-height: 76px; display: flex; align-items: center; gap: 18px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; color: var(--bleu); white-space: nowrap; }
.logo strong { color: var(--rouge); }
.logo-ballon { font-size: 1.7rem; }
.navigation { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; }
.navigation a { padding: 10px 9px; border-radius: 10px; text-decoration: none; font-size: .89rem; font-weight: 700; color: #344258; }
.navigation a:hover, .navigation a.actif { background: #e9f1ff; color: var(--bleu-clair); }
.bouton-menu, .bouton-theme { cursor: pointer; border: 1px solid var(--bordure); background: var(--surface); padding: 9px 12px; border-radius: 12px; font-weight: 800; }
.bouton-menu { display: none; }

/* Hero de la page d'accueil. */
.hero { padding: 76px 0; }
.champion-hero { color: #fff; background: radial-gradient(circle at 80% 15%, rgba(247,201,72,.35), transparent 30%), linear-gradient(125deg, #6f0713, #c60f2e 48%, #f5bf24 140%); }
.hero-contenu { display: grid; grid-template-columns: 1.35fr .65fr; gap: 42px; align-items: center; }
.sur-titre { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; opacity: .86; }
h1 { margin: 12px 0 18px; font-size: clamp(2.35rem, 5.2vw, 5rem); line-height: 1.02; letter-spacing: -.04em; }
.intro { max-width: 780px; font-size: 1.18rem; }
.etiquette { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.34); font-size: .77rem; font-weight: 900; letter-spacing: .08em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bouton { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 11px 18px; border: 0; border-radius: 13px; text-decoration: none; font-weight: 900; cursor: pointer; }
.bouton-principal { background: var(--jaune); color: #251c00; }
.bouton-secondaire { border: 1px solid rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.1); }
.trophee { text-align: center; padding: 34px; border-radius: 34px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.grand-drapeau, .coupe { display: block; font-size: 5rem; line-height: 1.1; }
.trophee h2 { font-size: 2rem; margin: 16px 0 0; }

/* Titres et sections. */
.section { padding: 76px 0; }
.section-sombre { background: linear-gradient(135deg, #071a38, #0b356f); color: #fff; }
.titre-section { margin-bottom: 28px; }
.titre-section span { color: var(--rouge); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.titre-section h2 { margin: 5px 0 0; font-size: clamp(1.8rem, 3.3vw, 3rem); line-height: 1.12; }
.titre-section.clair span { color: var(--jaune); }
.banniere-page { padding: 66px 0; color: #fff; background: linear-gradient(135deg, #061e43, #0d56b7); }
.banniere-page h1 { font-size: clamp(2.2rem, 4.4vw, 4.3rem); }
.banniere-page p { max-width: 850px; font-size: 1.12rem; }
.banniere-espagne { background: linear-gradient(125deg, #75101e, #d41836 55%, #d6a50b); }
.texte-large { max-width: 920px; }

/* Grilles réutilisables. */
.grille { display: grid; gap: 22px; }
.cartes-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cartes-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cartes-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.carte { padding: 25px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre); }
.carte h2, .carte h3 { margin-top: 0; }
.carte p { color: var(--texte-doux); }
.carte.sombre { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.carte.sombre p { color: #dce7fb; }
.icone { font-size: 2.3rem; }

/* Podium et chiffres. */
.podium { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; align-items: end; }
.podium-carte { text-align: center; padding: 28px 16px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre); }
.podium-carte > span { font-size: 2.2rem; font-weight: 900; }
.podium-carte h3 { margin: 10px 0 2px; }
.podium-carte p { margin: 0; color: var(--texte-doux); }
.podium-carte.or { border-top: 7px solid #e1b000; transform: translateY(-22px); }
.podium-carte.argent { border-top: 7px solid #aeb8c5; }
.podium-carte.bronze { border-top: 7px solid #b46d34; }
.statistiques, .resume-104 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.statistiques article, .resume-104 article { padding: 22px; text-align: center; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.statistiques strong, .resume-104 strong { display: block; font-size: 2.7rem; line-height: 1; }
.statistiques span, .resume-104 span { display: block; margin-top: 8px; }
.resume-104 { grid-template-columns: repeat(3,1fr); margin-bottom: 28px; }
.resume-104 article { color: var(--texte); background: var(--surface); border-color: var(--bordure); box-shadow: var(--ombre); }

/* Styles spéciaux pour les équipes importantes. */
.accents-nationaux { background: linear-gradient(180deg, #f4f7fb, #e8f0ff); }
.equipe-haiti { border-top: 7px solid #1f4ba5 !important; box-shadow: inset 0 -6px 0 #d81e35, var(--ombre) !important; }
.equipe-bresil { border-top: 7px solid #149447 !important; box-shadow: inset 0 -6px 0 #f7c948, var(--ombre) !important; }
.drapeau-geant { font-size: 4rem; }

/* Finale et bilan. */
.finale-focus { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; padding: 34px; border-radius: 28px; background: var(--surface); box-shadow: var(--ombre); border: 1px solid var(--bordure); }
.coupe-geante { font-size: 4.8rem; }
.duel-final { display: flex; justify-content: center; align-items: center; gap: 26px; padding: 30px; border-radius: 24px; background: linear-gradient(135deg,#75101e,#d41836); color: white; }
.duel-final span { font-size: 5rem; }
.duel-final strong { font-size: 2.4rem; white-space: nowrap; }

/* Résultats des matchs. */
.bloc-resultats { margin: 18px 0; border: 1px solid var(--bordure); border-radius: 18px; background: var(--surface); overflow: hidden; box-shadow: var(--ombre); }
.bloc-resultats summary { cursor: pointer; padding: 19px 22px; font-weight: 900; color: var(--bleu); background: #edf4ff; }
.liste-matchs { display: grid; gap: 12px; padding: 17px; }
.carte-match { padding: 17px; border: 1px solid var(--bordure); border-radius: 15px; background: var(--surface); }
.carte-match.match-finale { border: 3px solid #d6a50b; background: #fff9dd; }
.meta-match { display: flex; justify-content: space-between; gap: 15px; color: var(--texte-doux); font-size: .83rem; font-weight: 800; }
.affiche-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; margin-top: 9px; }
.affiche-match span:last-child { text-align: right; }
.affiche-match strong { padding: 6px 12px; border-radius: 10px; background: #eaf1fb; color: var(--bleu); font-size: 1.18rem; }
.note-match { margin: 9px 0 0; color: var(--rouge); font-weight: 800; text-align: center; }

/* Tableaux des groupes. */
.grille-tableaux { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.tableau-groupe { border-radius: 20px; background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre); overflow: hidden; }
.tableau-groupe h2 { margin: 0; padding: 18px; color: #fff; background: var(--bleu); }
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 11px 9px; text-align: center; border-bottom: 1px solid var(--bordure); }
th:nth-child(2), td:nth-child(2) { text-align: left; }
thead { background: #edf4ff; }
tr.qualifie { background: #edf9f4; }
tr.equipe-speciale td:nth-child(2) { font-weight: 900; color: var(--bleu-clair); }

/* Cartes des équipes. */
.groupe-equipes { margin-bottom: 45px; }
.groupe-equipes > h2 { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--bleu); color: white; }
.carte-equipe { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre); }
.carte-equipe h3 { margin: 0; }
.carte-equipe p { margin: 3px 0; color: var(--texte-doux); }
.drapeau-equipe { font-size: 3rem; }
.carte-equipe.champion { outline: 4px solid #e1b000; background: #fff9db; }
.carte-equipe.haiti { border-left: 8px solid #1f4ba5; }
.carte-equipe.bresil { border-left: 8px solid #149447; }

/* Stades, publications et produits. */
.stade .drapeau-stade, .publication > span, .produit-icone { display: block; font-size: 3rem; }
.stade > span:last-child { display: inline-block; margin-top: 8px; padding: 6px 9px; border-radius: 9px; background: #edf4ff; color: var(--bleu); font-size: .85rem; font-weight: 800; }
.produit { display: flex; flex-direction: column; }
.produit strong { color: var(--rouge); font-size: 1.35rem; margin-top: auto; }
.produit button { margin-top: 14px; padding: 11px; border: 0; border-radius: 11px; color: white; background: var(--bleu); font-weight: 800; cursor: pointer; }

/* Formulaires. */
.formulaire { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.formulaire label { display: grid; gap: 7px; font-weight: 800; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire input, .formulaire textarea, .formulaire select { width: 100%; padding: 12px; border-radius: 11px; border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); }
.formulaire textarea { min-height: 140px; resize: vertical; }
.formulaire.visuel input, .formulaire.visuel textarea, .formulaire.visuel select { background: rgba(255,255,255,.95); color: #172033; }
.grille-contact { display: grid; grid-template-columns: .7fr 1.3fr; gap: 22px; }
.note { color: var(--texte-doux); font-size: .9rem; }
.section-sombre .note { color: #dce7fb; }
.liste-sources li { margin-bottom: 10px; }
.liste-sources a { color: var(--bleu-clair); }

/* Pied de page. */
.pied-page { color: #dce7fb; background: #06162f; }
.grille-pied { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; padding: 45px 0; }
.pied-page h2 { color: #fff; font-size: 1.1rem; }
.pied-page a { color: #fff; }
.copyright { margin: 0; padding: 20px; text-align: center; border-top: 1px solid rgba(255,255,255,.12); }

/* MODE SOMBRE : activé quand la case #controle-theme est cochée. */
.controle-theme:checked ~ .site {
  --fond: #07101f;
  --surface: #101d31;
  --texte: #edf3ff;
  --texte-doux: #b7c4d9;
  --bordure: #293a55;
  --ombre: 0 18px 45px rgba(0,0,0,.35);
  background: var(--fond);
}
.controle-theme:checked ~ .site .entete { background: rgba(7,16,31,.94); }
.controle-theme:checked ~ .site .logo { color: #fff; }
.controle-theme:checked ~ .site .navigation a { color: #d9e4f7; }
.controle-theme:checked ~ .site .navigation a:hover,
.controle-theme:checked ~ .site .navigation a.actif { color: #fff; background: #203451; }
.controle-theme:checked ~ .site .bouton-menu,
.controle-theme:checked ~ .site .bouton-theme { color: #fff; background: #101d31; }
.controle-theme:checked ~ .site .bloc-resultats summary,
.controle-theme:checked ~ .site thead,
.controle-theme:checked ~ .site .affiche-match strong,
.controle-theme:checked ~ .site .stade > span:last-child { background: #1b2e49; color: #eaf2ff; }
.controle-theme:checked ~ .site .carte-match.match-finale,
.controle-theme:checked ~ .site .carte-equipe.champion { color: #241d00; background: #fff2aa; }
.controle-theme:checked ~ .site tr.qualifie { background: #12372e; }

/* Responsive tablette. */
@media (max-width: 1050px) {
  .bouton-menu { display: inline-flex; }
  .navigation { position: absolute; left: 18px; right: 18px; top: 68px; display: none; flex-direction: column; align-items: stretch; padding: 14px; border: 1px solid var(--bordure); border-radius: 16px; background: var(--surface); box-shadow: var(--ombre); }
  .navigation a { padding: 11px; }
  .controle-menu:checked ~ .site .navigation { display: flex; }
  .hero-contenu, .finale-focus, .grille-contact { grid-template-columns: 1fr; }
  .cartes-4 { grid-template-columns: repeat(2,1fr); }
  .grille-tableaux { grid-template-columns: 1fr; }
}

/* Responsive téléphone. */
@media (max-width: 700px) {
  .conteneur { width: min(100% - 24px, var(--largeur)); }
  .barre-navigation { min-height: 66px; gap: 8px; }
  .logo { font-size: .78rem; }
  .logo-ballon { font-size: 1.3rem; }
  .bouton-theme, .bouton-menu { padding: 8px; font-size: .8rem; }
  .hero, .section, .banniere-page { padding: 50px 0; }
  h1 { font-size: clamp(2.1rem, 13vw, 3.4rem); }
  .hero-contenu { gap: 25px; }
  .grand-drapeau, .coupe { font-size: 3.8rem; }
  .cartes-2, .cartes-3, .cartes-4, .podium, .statistiques, .resume-104, .grille-pied { grid-template-columns: 1fr; }
  .podium-carte.or { transform: none; }
  .affiche-match { grid-template-columns: 1fr; text-align: center; }
  .affiche-match span:last-child { text-align: center; }
  .meta-match { flex-direction: column; gap: 2px; }
  .duel-final span { font-size: 3rem; }
  .duel-final strong { font-size: 1.65rem; }
  .formulaire { grid-template-columns: 1fr; }
  .formulaire .large { grid-column: auto; }
}

/* Impression : nettoie l'affichage si une page est imprimée. */
@media print {
  .entete, .pied-page, .bouton, .bouton-theme, .bouton-menu { display: none !important; }
  .site { background: white; color: black; }
  .carte, .tableau-groupe, .bloc-resultats { box-shadow: none; break-inside: avoid; }
  details { display: block; }
  details > * { display: block; }
}


/* =====================================================================
   AJOUT CIBLÉ : ENTRAÎNEURS ET LISTES DES JOUEURS
   Ces règles complètent uniquement la page equipes.html.
   ===================================================================== */
.effectif-equipe {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 14px;
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
}
.effectif-equipe summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #e9f1ff;
  color: var(--bleu-clair);
  font-weight: 850;
}
.effectif-equipe summary::-webkit-details-marker { display: none; }
.effectif-equipe summary::after { content: "+"; font-size: 1.35rem; line-height: 1; }
.effectif-equipe[open] summary::after { content: "−"; }
.entraineur-equipe {
  margin: 14px 0 12px;
  padding: 11px 13px;
  border-left: 4px solid var(--jaune);
  border-radius: 0 10px 10px 0;
  background: rgba(247, 201, 72, .13);
}
.effectif-equipe h4 { margin: 16px 0 8px; color: var(--bleu); font-size: 1rem; }
.liste-effectif {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}
.liste-effectif li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--bordure);
  border-radius: 11px;
  background: var(--surface);
}
.numero-joueur {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  font-weight: 900;
}
.identite-joueur { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.identite-joueur strong { overflow-wrap: anywhere; }
.identite-joueur small { color: var(--texte-doux); overflow-wrap: anywhere; }
.controle-theme:checked ~ .site .effectif-equipe summary { background: #142a49; color: #b9d3ff; }
.controle-theme:checked ~ .site .effectif-equipe h4 { color: #d9e7ff; }
.controle-theme:checked ~ .site .entraineur-equipe { background: rgba(247, 201, 72, .09); }

@media (max-width: 700px) {
  .liste-effectif { grid-template-columns: 1fr; }
  .effectif-equipe summary { align-items: flex-start; }
  .numero-joueur { flex-basis: 32px; width: 32px; height: 32px; }
}