/* ==========================================================
   Fayngo : page Mondial 2030 et pages des stades proposés au Maroc (générées par scripts/build-pages.mjs)
   Chargé après city.css, dont il reprend la base (obsidienne, ivoire, safran) et les composants
   (ligne de vérification, repères, liste des routes, appel final). Le vert profond est la lumière du Mondial.
   ========================================================== */

body.wc { --city-field: var(--c-deep-green); --city-accent: var(--c-saffron); }
body.wc h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.2; margin: 0 0 .2em; }

/* ---------- Ouverture : le relief, puis le texte posé dessus ---------- */
/* Le relief en fond ; le texte et le pied (légende, crédit) dans le flux, en colonne : un texte agrandi pousse au lieu de se couper */
.wc-hero { position: relative; isolation: isolate; min-height: clamp(620px, 100svh, 1100px); overflow: hidden; background: var(--c-obsidian); display: flex; flex-direction: column; justify-content: flex-end; }
.wc-hero .wc-hero__stage { position: absolute; inset: 0; aspect-ratio: auto; }
.wc-hero__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Voile sous le texte, seule exception aux aplats : il ne couvre que la colonne du texte et le bas */
.wc-hero__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 11, 13, .82) 0%, rgba(11, 11, 13, .55) 34%, rgba(11, 11, 13, 0) 58%),
    linear-gradient(0deg, rgba(11, 11, 13, .9) 0%, rgba(11, 11, 13, 0) 38%);
}
.wc-hero .city-map__labels { z-index: 2; }
.city-map__labels a[data-tone="wc"] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.wc-hero__copy { position: relative; z-index: 3; padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(32px, 6vh, 72px); pointer-events: none; }
.wc-hero__copy > * { max-width: 600px; pointer-events: auto; }
.wc-hero h1 { font-size: clamp(3.25rem, 8.6vw, 7.5rem); line-height: .92; letter-spacing: -.035em; margin: 0; }
.wc--stadium .wc-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.5rem); line-height: .96; }
.wc-hero__lede { margin: 18px 0 0; font-size: 1.25rem; line-height: 1.5; }
.wc-hero__disclaimer { margin: 18px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--c-ivory-2); }
.wc-badge { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 0; font-weight: 600; color: var(--c-saffron); }
.wc-badge::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c-saffron); transform: translateY(-1px); }
.wc-hero__foot { position: relative; z-index: 3; padding-bottom: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 6px 24px; padding-inline: max(24px, calc((100vw - 1200px) / 2 + 24px)); }
.wc-hero__credit { margin: 0 0 0 auto; max-width: 62ch; font-size: .75rem; line-height: 1.4; color: var(--c-ivory-2); text-align: right; }
.wc-hero__credit a { text-decoration: underline; }
.wc-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.wc-legend span, .wc-legend li { display: inline-flex; align-items: center; gap: 8px; }
.wc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-ivory); }
.wc-dot--ma { background: var(--c-saffron); }

/* ---------- Confirmé / à confirmer ---------- */
.wc-status { padding-block: clamp(80px, 10vw, 140px); }
.wc-status__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.wc-status__col { padding: 28px 26px 22px; background: var(--c-surface-1); }
.wc-status__col h3 { display: flex; align-items: center; gap: 10px; }
.wc-status__dot { width: 10px; height: 10px; background: var(--c-emerald-text); }
.wc-status__col--tbc .wc-status__dot { background: var(--c-saffron); border-radius: 50%; }
.wc-status__col > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.wc-fact p { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.5; }
.wc-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .875rem; line-height: 1.45; }
.wc-src a { text-decoration: underline; text-underline-offset: 3px; }
.wc-src__meta { color: var(--c-ivory-2); font-size: .875rem; }
.wc-src__meta a { color: var(--c-ivory); text-decoration: underline; }

/* ---------- Les six stades du Maroc ---------- */
.wc-ma { background: var(--c-deep-green); padding-block: clamp(80px, 10vw, 150px); }
.wc-intro { max-width: 60ch; margin: 0 0 36px; font-size: 1.125rem; }
.wc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wc-row { position: relative; display: grid; grid-template-columns: minmax(180px, 300px) 1fr auto; gap: 28px; align-items: center; padding: 12px 28px 12px 12px; background: rgba(11, 11, 13, .38); transition: background .2s ease; }
.wc-row:hover { background: rgba(11, 11, 13, .62); }
.wc-row__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-obsidian); }
.wc-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out, ease); }
.wc-row:hover .wc-row__media img { transform: scale(1.04); }
.wc-row__media { position: relative; }
.wc-row__plan { position: absolute; inset: 12px; }
.wc-row__plan svg { width: 100%; height: 100%; }
.wc-row h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin: 0; }
.wc-row .stretched { color: inherit; }
.wc-row .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wc-row .stretched:focus-visible { outline: none; }
.wc-row:focus-within { outline: 3px solid var(--c-saffron); outline-offset: 2px; }
.wc-row__city { margin: 4px 0 10px; font-weight: 600; color: var(--c-ivory-2); }
.wc-row__facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.wc-row__facts span:first-child { font-variant-numeric: tabular-nums; }
.wc-row__credit { margin: 8px 0 0; font-size: .875rem; color: var(--c-ivory-2); }
.wc-row__go { font-size: 1.75rem; color: var(--c-saffron); transition: transform .2s ease; }
.wc-row:hover .wc-row__go { transform: translateX(4px); }

/* ---------- Portugal et Espagne ---------- */
.wc-ib { padding-block: clamp(80px, 10vw, 140px); }
.wc-countries { display: grid; gap: 0; }
/* Un pays par volet replié : le titre, le nombre de stades, l'icône « plus » ; la liste complète à l'ouverture */
.wc-country { border-top: 1px solid var(--c-surface-2); }
.wc-country:last-child { border-bottom: 1px solid var(--c-surface-2); }
.wc-country > summary { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-height: 72px; padding: 12px 0; cursor: pointer; list-style: none; }
.wc-country > summary::-webkit-details-marker { display: none; }
.wc-country > summary::after { margin-left: auto; color: var(--c-saffron); transition: transform .2s var(--ease-out); }
.wc-country[open] > summary::after { transform: rotate(45deg); }
.wc-country h3 { margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.wc-country__n { font-size: 1rem; color: var(--c-ivory-2); }
.wc-country[open] > .wc-lines { margin-bottom: 24px; }
.wc-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wc-line { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 12px; background: var(--c-surface-1); scroll-margin-top: calc(var(--header-h) + 16px); }
.wc-line:target { outline: 2px solid var(--c-cyan); outline-offset: -2px; }
.wc-line__img { width: 112px; height: 84px; object-fit: cover; background: var(--c-surface-2); }
.wc-line__city { margin: 0; font-weight: 600; color: var(--c-ivory-2); }
.wc-line__facts { margin: 6px 0 0; font-size: .9375rem; }
.wc-line__credit { margin: 6px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--c-ivory-2); }
.wc-line__credit a { color: var(--c-ivory); text-decoration: underline; }
.wc-note { max-width: 68ch; margin: 28px 0 0; font-size: .9375rem; color: var(--c-ivory-2); }
.wc-note + .wc-note { margin-top: 10px; }
.wc-note a { text-decoration: underline; }

/* ---------- Centenaire, billets ---------- */
.wc-cen { background: var(--c-surface-1); padding-block: clamp(72px, 9vw, 120px); }
.wc-cen__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wc-cen__inner p { max-width: 52ch; }
.wc-cen__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wc-cen__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 18px 20px; background: var(--c-surface-2); }
.wc-cen__list strong { font: 600 1.5rem/1.2 var(--font-display); grid-row: span 2; align-self: center; }
.wc-cen__tbc { color: var(--c-ivory-2); font-size: .9375rem; }
/* Terre cuite assombrie : l'ivoire y garde un contraste supérieur à 7:1 */
.wc-tickets { background: var(--c-tickets); color: var(--c-ivory); padding-block: clamp(64px, 8vw, 110px); }
.wc-tickets p { max-width: 64ch; font-size: 1.125rem; }
.wc-tickets .home-link span { color: var(--c-ivory); }

/* ---------- Page de stade : l'intérieur, le plan au sol ---------- */
.wc-inside { padding-block: clamp(80px, 10vw, 140px) 0; }
.wc-photo { margin: 0; }
.wc-photo img { width: 100%; height: auto; max-height: 82svh; object-fit: cover; }
.wc-photo figcaption { margin-top: 10px; font-size: .875rem; color: var(--c-ivory-2); }
.wc-photo figcaption a { color: var(--c-ivory); text-decoration: underline; }

.wc-plan { padding-block: clamp(80px, 10vw, 140px); }
.wc-plan__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.wc-plan__fig { margin: 0; padding: clamp(12px, 2vw, 24px); background: var(--c-surface-1); }
.wc-plan__fig figcaption { margin-top: 8px; font-size: .75rem; color: var(--c-ivory-2); }
.wc-plan__area { margin: 20px 0; font: 500 clamp(1.5rem, 2.6vw, 2.125rem)/1.15 var(--font-display); }
.wc-legend--plan { display: grid; gap: 10px; margin: 0 0 20px; font-size: 1rem; }
.lg { width: 22px; height: 14px; flex: none; }
.lg--outline { border: 2px solid var(--c-ivory); }
.lg--site { border-style: dashed; }
.lg--stands { background: var(--c-copper); }
.lg--pitch { background: var(--c-pitch); }
.lg--track { background: var(--c-terracotta); }

.plan-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pl-outline { fill: rgba(242, 231, 213, .05); stroke: var(--c-ivory); stroke-width: var(--pl-w); stroke-linejoin: round; }
.pl-stands { fill: var(--c-copper); }
.pl-track { fill: var(--c-terracotta); }
.pl-pitch { fill: var(--c-pitch); }
.pl-mark { fill: none; stroke: rgba(242, 231, 213, .75); stroke-width: calc(var(--pl-w) * .6); }
.pl-scale path { fill: none; stroke: var(--c-ivory-2); stroke-width: var(--pl-w); }
.pl-scale text, .pl-north text { fill: var(--c-ivory-2); font: 500 var(--pl-font) var(--font-text); dominant-baseline: middle; }
.pl-north path { fill: var(--c-ivory-2); }
.pl-north text { text-anchor: middle; }
/* Tracé à l'arrivée (js/pages/stadium.js) : le contour se dessine, puis les tribunes et le terrain apparaissent */
.plan-anim .pl-outline:not(.pl-outline--site) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.plan-anim .pl-stands, .plan-anim .pl-track, .plan-anim .pl-pitch, .plan-anim .pl-mark, .plan-anim .pl-outline--site { opacity: 0; }
.plan-anim.is-drawn .pl-outline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.22, 1, .36, 1); }
.plan-anim.is-drawn .pl-outline--site { opacity: 1; transition: opacity .8s ease; }
.plan-anim.is-drawn .pl-stands { opacity: 1; transition: opacity .7s ease .9s; }
.plan-anim.is-drawn .pl-track { opacity: 1; transition: opacity .7s ease 1.1s; }
.plan-anim.is-drawn .pl-pitch, .plan-anim.is-drawn .pl-mark { opacity: 1; transition: opacity .7s ease 1.3s; }

/* ---------- Autour du stade, infos officielles ---------- */
.wc-around { background: var(--c-deep-green); padding-block: clamp(80px, 10vw, 140px); }
.wc-around__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
.wc-around__note { max-width: 52ch; color: var(--c-ivory); opacity: .85; font-size: .9375rem; }
.wc-near { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.wc-near li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 8px 8px 8px 16px; background: rgba(11, 11, 13, .32); }
.wc-near a { display: block; font: 500 1.1875rem/1.25 var(--font-display); }
.wc-near a:hover { color: var(--c-saffron); }
/* Toute la ligne mène au lieu ; le favori reste au-dessus */
.wc-near a::after { content: ""; position: absolute; inset: 0; }
.wc-near li:focus-within { outline: 3px solid var(--focus, var(--c-saffron)); outline-offset: 2px; }
.wc-near a:focus-visible { outline: none; }
.wc-near .fav-btn { position: relative; z-index: 1; }
.wc-near span { display: block; margin-top: 2px; font-size: .875rem; color: var(--c-ivory); opacity: .8; }
.wc-near .fav-btn { background: rgba(11, 11, 13, .5); }
.wc-official { padding-block: clamp(80px, 10vw, 140px); }
.wc-official__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
.wc-official__inner p { max-width: 56ch; }

/* ---------- Adaptation ---------- */
@media (max-width: 1023px) {
  .wc-status__cols, .wc-cen__inner, .wc-plan__inner, .wc-around__cols, .wc-official__inner { grid-template-columns: minmax(0, 1fr); }
  .wc-lines { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  /* Sur téléphone aussi, l'ouverture occupe tout l'écran (comme les images fixes, rendues à cette taille) */
  .wc-hero { min-height: max(620px, 100svh); }
  .wc-hero__stage::after { background: linear-gradient(0deg, rgba(11, 11, 13, .95) 0%, rgba(11, 11, 13, .82) 40%, rgba(11, 11, 13, 0) 62%); }
  .wc-hero__copy { padding-bottom: 20px; }
  .wc-hero__lede { font-size: 1.0625rem; }
  .wc-hero .city-hero__actions .atlas-btn { width: 100%; }
  .wc-hero__foot { flex-direction: column; align-items: stretch; padding-inline: 16px; padding-bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px)); }
  .wc-hero__credit { margin: 0; text-align: left; }
  .wc-hero .wc-legend, body:not(.wc--stadium) .wc-hero__disclaimer { display: none; }
  /* Téléphone : une ligne compacte par stade (vignette carrée à gauche, nom, ville et faits à droite) ; toute l'information reste */
  .wc-row { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 12px 12px 10px; }
  .wc-row__media { aspect-ratio: 1; }
  .wc-row__plan { inset: 6px; }
  .wc-row__go { display: none; }
  .wc-row h3 { font-size: 1.375rem; line-height: 1.15; }
  .wc-row__city { margin: 2px 0 6px; }
  .wc-row__facts { flex-direction: column; gap: 2px; font-size: .9375rem; }
  .wc-row__credit { margin-top: 6px; }
  .wc-line { grid-template-columns: 84px 1fr; gap: 14px; }
  .wc-line__img { width: 84px; height: 64px; }
  .wc-cen__list strong { font-size: 1.25rem; }
  .plan-svg text { font-size: calc(var(--pl-font) * 1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-row__media img, .wc-row__go { transition: none; }
}

/* Sources d'un fait : repliées sous la phrase, pour que les stades passent devant les citations */
.wc-src-more { margin-top: 6px; }
.wc-src-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: .9375rem; font-weight: 600; color: var(--c-ivory-2); }
.wc-src-more summary::-webkit-details-marker { display: none; }
.wc-src-more summary:hover { color: var(--c-ivory); }
.wc-src-more[open] summary::after { transform: rotate(45deg); }
.wc-src-more .wc-src { margin: 4px 0 8px; }

/* Liens de source seuls sur leur ligne : 44 px de haut */
.wc-src a, .wc-src__meta > a { display: inline-flex; align-items: center; min-height: 44px; }
/* Très grand texte sur petit écran : les lignes « autour du stade » et les noms longs passent à la ligne */
.wc-near li > :first-child, .wc-line__body { min-width: 0; overflow-wrap: anywhere; }