/* Identité visuelle Mondial 2030 — inspirée de la zellige marocaine :
   terracotta de Marrakech, bleu de Fès, blanc de Casablanca, bleu mer de Tanger, or. */

:root {
  --terracotta: #b5502e;
  --terracotta-dark: #8c3b22;
  --terracotta-light: #d97a52;
  --fes-blue: #1f5c82;
  --fes-blue-dark: #123c56;
  --fes-green: #2f6b4f;
  --tanger-blue: #0e7c9a;
  --casa-white: #faf6ee;
  --sand: #f1e4cf;
  --gold: #c9a227;
  --gold-light: #e8cd6f;
  --ink: #2b241e;
  --ink-soft: #6b5d4f;
  --fes-cobalt: #1e5b9c;
  --fes-mustard: #d9a520;
  --fes-cream: #f4ead9;
  --fes-black: #1a1a1a;
  --tanger-blue-dark: #0a4f66;
  --tanger-blue-light: #bfe4f0;
}

* { box-sizing: border-box; }

.text-ink { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }

body {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  background-color: var(--casa-white);
  color: var(--ink);
}
/* Corrige le bug classique de Safari iOS où min-h-screen (100vh) laisse un grand vide en bas
   sur les pages courtes : 100vh se calcule sur la barre d'adresse rétractée, pas la hauteur
   réellement visible. dvh (hauteur de viewport dynamique) s'ajuste correctement. Sélecteur
   plus spécifique que .min-h-screen de Tailwind pour le surcharger sans !important. */
body.min-h-screen { min-height: 100vh; min-height: 100dvh; }

h1, h2, h3, .font-display {
  font-family: 'Cairo', system-ui, sans-serif;
  font-weight: 800;
}

/* Police du darija — Cairo en gras (pas de calligraphie type Aref Ruqaa, trop fine/peu lisible
   en petite taille, notamment sur mobile) — utilisée pour tous les titres/annonces en darija. */
.font-arabic {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
}
.text-darija {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.5;
}

/* --- Motif zellige (étoile najma à 8 branches, construite à partir de 2 carrés superposés,
     centrée sur les coins de la tuile pour un raccord parfait à la répétition) --- */
.zellige-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg opacity='0.5'%3E%3Crect x='-18' y='-18' width='36' height='36' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='-18' y='-18' width='36' height='36' fill='none' stroke='%23e8cd6f' stroke-width='1.4' transform='rotate(45 0 0)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23e8cd6f'/%3E%3Crect x='22' y='22' width='36' height='36' fill='none' stroke='%23ffffff' stroke-width='1.2' transform='rotate(45 40 40)' opacity='0.6'/%3E%3Ccircle cx='40' cy='40' r='2.2' fill='%23ffffff' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
}

.zellige-bg-soft {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg opacity='0.6'%3E%3Crect x='-18' y='-18' width='36' height='36' fill='none' stroke='%23b5502e' stroke-width='1.6' opacity='0.14'/%3E%3Crect x='-18' y='-18' width='36' height='36' fill='none' stroke='%232f6b4f' stroke-width='1.1' transform='rotate(45 0 0)' opacity='0.12'/%3E%3Ccircle cx='0' cy='0' r='2.4' fill='%23c9a227' opacity='0.2'/%3E%3Crect x='22' y='22' width='36' height='36' fill='none' stroke='%230e7c9a' stroke-width='1' transform='rotate(45 40 40)' opacity='0.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Bandeau mosaïque zellige de Fès : étoiles à 8 branches (bleu cobalt au centre,
     moutarde/vert aux intersections, grout noir), construites par superposition de 2 carrés
     (méthode classique najma) sur fond crème --- */
.zellige-banner {
  height: 72px;
  background-color: var(--fes-cream);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect width='72' height='72' fill='%23f4ead9'/%3E%3Cpath d='M36 3 L69 36 L36 69 L3 36 Z' fill='none' stroke='%231a1a1a' stroke-width='1' opacity='0.3'/%3E%3Cg%3E%3Crect x='-10' y='-10' width='20' height='20' fill='%23d9a520'/%3E%3Crect x='-10' y='-10' width='20' height='20' fill='%23d9a520' transform='rotate(45 0 0)'/%3E%3Crect x='62' y='-10' width='20' height='20' fill='%232f6b4f'/%3E%3Crect x='62' y='-10' width='20' height='20' fill='%232f6b4f' transform='rotate(45 72 0)'/%3E%3Crect x='-10' y='62' width='20' height='20' fill='%232f6b4f'/%3E%3Crect x='-10' y='62' width='20' height='20' fill='%232f6b4f' transform='rotate(45 0 72)'/%3E%3Crect x='62' y='62' width='20' height='20' fill='%23d9a520'/%3E%3Crect x='62' y='62' width='20' height='20' fill='%23d9a520' transform='rotate(45 72 72)'/%3E%3C/g%3E%3Cg%3E%3Crect x='20' y='20' width='32' height='32' fill='%231e5b9c'/%3E%3Crect x='20' y='20' width='32' height='32' fill='%231e5b9c' transform='rotate(45 36 36)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f4ead9' stroke-width='2'%3E%3Crect x='20' y='20' width='32' height='32'/%3E%3Crect x='20' y='20' width='32' height='32' transform='rotate(45 36 36)'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4' fill='%231a1a1a'/%3E%3C/svg%3E");
  background-size: 72px 72px;
  border-top: 3px solid var(--fes-cobalt);
  border-bottom: 3px solid var(--fes-cobalt);
}

/* --- Nav --- */
.nav-marocaine {
  background: linear-gradient(120deg, var(--tanger-blue-dark), var(--tanger-blue));
  border-bottom: 3px solid var(--gold);
}
.nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background 0.15s;
}
.nav-link:hover { background: rgba(255,255,255,0.16); }
.nav-link.active { background: var(--gold); color: var(--fes-black); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.nav-link-ar {
  font-family: 'Cairo', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}
.nav-link.active .nav-link-ar { color: var(--fes-black); opacity: 0.7; }

.nav-links-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}
.nav-links-scroll::-webkit-scrollbar { display: none; }

@media (max-width: 480px) {
  .nav-brand .brand-text { display: none; }
  .nav-link-ar { display: none; }
  .nav-link { padding: 7px 12px; font-size: 0.9rem; white-space: nowrap; }
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  flex-shrink: 0;
}

/* --- Hero --- */
.hero-marocaine {
  background: radial-gradient(circle at 20% 20%, var(--tanger-blue-light), var(--tanger-blue) 45%, var(--tanger-blue-dark) 100%);
  position: relative;
  overflow: hidden;
}
.hero-marocaine::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(43,36,30,0) 60%, var(--casa-white) 100%);
  pointer-events: none;
}

.countdown-tile {
  background: rgba(255,255,255,0.14);
  border: 1px solid var(--gold-light);
  border-radius: 10px;
  backdrop-filter: blur(2px);
}

/* --- Bandeau compte à rebours "tableau de stade" (tuiles 3D façon écran géant),
     fond sobre bleu nuit + drapeaux des 3 pays hôtes en accent --- */
.countdown-bar {
  background: linear-gradient(180deg, #123a52, #0a2436);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 10px 16px 12px;
}
.countdown-bar-flags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.flag-chip {
  display: block;
  width: 30px;
  height: 21px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.25);
}
.flag-chip-sm {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.3);
  margin: 0 2px -2px 0;
}
.countdown-bar-label {
  text-align: center;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.countdown-bar-label .ar {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,0.75);
  margin-left: 8px;
}
.countdown-tile-3d {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #262422, #0a0908);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.18),
    inset 0 -4px 6px rgba(0,0,0,0.55),
    0 5px 12px rgba(0,0,0,0.4);
  padding: 12px 6px;
  min-width: 78px;
  text-align: center;
}
.countdown-tile-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% auto;
  opacity: 0.65;
  z-index: 0;
}
.countdown-tile-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55) 70%);
  z-index: 0;
}
.countdown-tile-3d .num,
.countdown-tile-3d .lbl {
  position: relative;
  z-index: 1;
}
.countdown-tile-3d .num {
  font-family: 'Cairo', sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.9);
  line-height: 1.1;
}
.tile-bg-morocco::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Crect width='32' height='22' fill='%23c1272d'/%3E%3Cpolygon points='16,5 17.8,10 23,10 18.8,13 20.4,18 16,15 11.6,18 13.2,13 9,10 14.2,10' fill='none' stroke='%23006233' stroke-width='1.6'/%3E%3C/svg%3E");
}
.tile-bg-spain::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Crect width='32' height='22' fill='%23AA151B'/%3E%3Crect y='5.5' width='32' height='11' fill='%23F1BF00'/%3E%3C/svg%3E");
}
.tile-bg-portugal::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Crect width='32' height='22' fill='%23FF0000'/%3E%3Crect width='12.8' height='22' fill='%23046A38'/%3E%3Ccircle cx='12.8' cy='11' r='4' fill='%23FFCC00' stroke='%23fff' stroke-width='0.5'/%3E%3C/svg%3E");
}
.tile-bg-trophy::before {
  background-size: 60% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 4h16v6a8 8 0 0 1-16 0V4z' fill='%23e8cd6f'/%3E%3Crect x='14' y='18' width='4' height='6' fill='%23e8cd6f'/%3E%3Crect x='9' y='24' width='14' height='3' rx='1.2' fill='%23e8cd6f'/%3E%3Cpath d='M8 6H3v2a5 5 0 0 0 5 5' fill='none' stroke='%23e8cd6f' stroke-width='1.6'/%3E%3Cpath d='M24 6h5v2a5 5 0 0 1-5 5' fill='none' stroke='%23e8cd6f' stroke-width='1.6'/%3E%3C/svg%3E");
}
.countdown-tile-3d .lbl {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Cards --- */
.card-maroc {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(43,36,30,0.06), 0 1px 2px rgba(43,36,30,0.05);
  border: 1px solid var(--sand);
}
.card-maroc.accent-fes { border-top: 4px solid var(--fes-blue); }
.card-maroc.accent-terracotta { border-top: 4px solid var(--terracotta); }
.card-maroc.accent-tanger { border-top: 4px solid var(--tanger-blue); }

.section-title {
  color: var(--terracotta-dark);
  position: relative;
  padding-left: 14px;
}
.section-title::before {
  content: '';
  position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 5px; border-radius: 3px;
  background: linear-gradient(var(--gold), var(--terracotta));
}

.city-card {
  border: 1px solid var(--sand);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, var(--casa-white));
  position: relative;
}
.city-card.pays-maroc { border-left: 3px solid var(--terracotta); }
.city-card.pays-espagne { border-left: 3px solid var(--gold); }
.city-card.pays-portugal { border-left: 3px solid var(--fes-green); }

.match-row {
  border: 1px solid var(--sand);
  border-radius: 10px;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.match-row:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(181,80,46,0.14); }
.match-row:active { transform: scale(0.99); }

.badge-a-venir { background: var(--fes-green); color: #fff; }
.badge-en-cours { background: var(--gold); color: var(--ink); animation: pulse-live 1.6s ease-in-out infinite; }
.badge-termine { background: var(--ink-soft); color: #fff; }

.btn-maroc {
  background: linear-gradient(120deg, var(--terracotta), var(--terracotta-dark));
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.btn-maroc:hover { filter: brightness(1.08); }
.btn-maroc:active { transform: scale(0.96); }

.filter-chip {
  border-radius: 999px;
  border: 1px solid var(--sand);
  background: #fff;
  color: var(--ink-soft);
  transition: all 0.15s ease, transform 0.12s ease;
}
.filter-chip:hover { transform: translateY(-1px); }
.filter-chip:active { transform: scale(0.95); }
.filter-chip.active {
  background: linear-gradient(120deg, var(--terracotta), var(--terracotta-dark));
  color: #fff;
  border-color: transparent;
}

/* --- Mouvement : micro-interactions, éléments vivants, célébrations --- */
.card-maroc, .city-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-maroc:hover, .city-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(43,36,30,0.14);
}
.card-maroc:active, .city-card:active { transform: scale(0.995); }

/* Bandeau zellige : défilement continu (une tuile = 72px, boucle parfaite) — 7s pour rester
   perceptible sur petit écran (20s était quasi invisible sur mobile). */
.zellige-banner { animation: zellige-scroll 7s linear infinite; }
@keyframes zellige-scroll {
  from { background-position: 0 0; }
  to { background-position: 72px 0; }
}

/* Petit "tick" vivant sur le compte à rebours à chaque rafraîchissement */
.countdown-tile-3d .num { animation: tile-tick 0.3s ease; }
@keyframes tile-tick {
  0% { transform: scale(1); }
  45% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Pulsation "en direct" (matchs en cours, badges live) */
@keyframes pulse-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201,162,39,0.5); }
  50% { opacity: 0.85; box-shadow: 0 0 0 6px rgba(201,162,39,0); }
}

/* Le trophée du champion "respire" doucement en continu */
.champion-pulse { display: inline-block; animation: crown-bounce 1.8s ease-in-out infinite; }
@keyframes crown-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.08); }
}

/* Apparition douce du contenu principal au chargement de chaque page */
main { animation: fade-in-up 0.4s ease; }
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Confettis de célébration (générés en JS) — style stade, pas de dépendance externe */
.confetti-piece {
  position: fixed;
  top: -12px;
  width: 9px;
  height: 9px;
  z-index: 9999;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0.25; }
}

footer.footer-maroc {
  background: var(--fes-blue-dark);
  color: rgba(255,255,255,0.7);
}

/* --- Console Admin : layout barre latérale --- */
.admin-layout {
  display: flex;
  min-height: calc(100vh - 91px);
}
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--ink);
  padding: 16px 0;
}
.admin-sidebar-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 20px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  background: none;
  border-top: none; border-right: none; border-bottom: none;
}
.admin-sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-sidebar-link.active { background: rgba(255,255,255,0.1); color: var(--gold-light); border-left-color: var(--gold); }
.admin-content { flex: 1; padding: 24px; max-width: 900px; }
.admin-section { display: none; }
.admin-section.active { display: block; }

@media (max-width: 768px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; display: flex; overflow-x: auto; padding: 0; }
  .admin-sidebar-link { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .admin-sidebar-link.active { border-left: none; border-bottom-color: var(--gold); }
  .admin-content { padding: 16px; }
}