/* Styles spécifiques à météofraise, construits sur les tokens et classes du
   design system Modernist (ds-styles.css). Ne pas réinventer de valeurs ici :
   tout passe par --color-*, --space-*, --font-*. Voir README du handoff. */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Habillage sponsor — masqué par défaut. Voir public/css/theme.css pour l'activer. */
:root {
  --bandeau-sponsor-affichage: none;
  --emplacement-pub-affichage: none;
}

.page-shell { background: var(--color-bg); color: var(--color-text); min-height: 100vh; }
.page-container { max-width: 960px; margin: 0 auto; padding: 0 var(--space-4); }

/* Bandeau sponsor */
.bandeau-sponsor {
  display: var(--bandeau-sponsor-affichage);
  background: var(--color-accent);
  color: var(--color-bg);
  text-align: center;
  padding: var(--space-2);
  font-size: 13px;
}

/* En-tête */
.entete {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  padding-left: 0;
  padding-right: 0;
}
.entete__identite { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.entete__logo { height: 70px; width: auto; }
.entete__tagline { font-size: 13px; opacity: 0.65; }

/* Sélecteur de ville */
.ville-selecteur { position: relative; }
.ville-menu {
  position: absolute; right: 0; top: 44px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  z-index: 10; min-width: 240px; box-shadow: var(--shadow-md);
  padding: var(--space-2);
}
.ville-menu[hidden] { display: none; }
.ville-menu .input { margin-bottom: var(--space-2); }
.ville-menu__liste { max-height: 240px; overflow-y: auto; }
.ville-menu__vide { font-size: 13px; opacity: 0.6; padding: var(--space-2); margin: 0; }

/* Emplacement publicitaire réservé */
.pub-slot {
  display: var(--emplacement-pub-affichage);
  border: 2px dashed var(--color-divider);
  padding: var(--space-3); text-align: center;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5;
  margin: var(--space-4) 0;
}

/* Conditions actuelles */
.conditions-actuelles {
  flex-direction: row; align-items: center; gap: var(--space-4);
  padding: var(--space-4); margin: var(--space-4) 0; flex-wrap: wrap;
}
.conditions-actuelles__temp { display: flex; align-items: center; gap: var(--space-2); }
.conditions-actuelles__valeur { font-family: var(--font-heading); font-weight: 800; font-size: 52px; line-height: 1; }
.conditions-actuelles__details {
  display: flex; flex-direction: column; gap: 2px;
  padding-right: var(--space-4); border-right: 1px solid var(--color-divider);
}
.conditions-actuelles__ligne { font-size: 12px; }
.conditions-actuelles__condition { flex: 1; min-width: 200px; font-size: 14px; }

/* Onglets prévisions : réutilise .seg / .seg-opt de ds-styles.css */
.onglets-seg { margin-bottom: var(--space-4); }

/* Vue semaine */
.semaine-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2); margin-bottom: var(--space-4);
}
.jour-carte { text-align: center; align-items: center; padding: var(--space-2); }
.jour-carte__jour { font-size: 11px; text-transform: uppercase; opacity: 0.7; }
.jour-carte__minmax { font-size: 14px; }
.jour-carte__tag { margin-top: 6px; }

/* Heure par heure */
.heure-scroll { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-3); margin-bottom: var(--space-4); }
.heure-carte { min-width: 86px; align-items: center; text-align: center; flex: none; border: 1px solid transparent; }
.heure-carte--incertaine { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.heure-carte__label { font-size: 12px; opacity: 0.7; }
.heure-carte__temp { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.heure-carte__ecart { font-size: 11px; }

/* Bloc indice fraise */
.fraise-bloc {
  flex-direction: row; align-items: center; gap: var(--space-6);
  padding: var(--space-6); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.fraise-bloc__score { text-align: center; }
.fraise-bloc__kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin-bottom: 2px; }
.fraise-bloc__chiffre { font-family: var(--font-heading); font-weight: 800; font-size: 88px; line-height: 1; color: var(--color-accent); }
.fraise-bloc__sur5 { font-size: 28px; opacity: 0.4; }
.fraise-bloc__texte { flex: 1; min-width: 220px; }
.fraise-bloc__titre { margin-bottom: var(--space-2); }
.fraise-bloc__contexte { margin: 0 0 var(--space-3); }
.fraise-bloc__echelle { display: flex; gap: 8px; }

/* Cartes de synthèse */
.resume-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-6);
}
.resume-carte { flex-direction: row; align-items: center; gap: var(--space-3); }
.resume-carte__meta { margin-left: auto; text-align: right; }

/* Activités */
.activites-liste { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.activite-btn { display: inline-flex; align-items: center; gap: 8px; }
/* Picto seul en rouge accent au repos (le svg résout currentColor sur son
   propre color, sans affecter le texte du bouton, qui garde sa couleur par
   défaut). Une fois sélectionné, l'icône passe blanche sur fond rouge. */
.activite-btn svg { color: var(--color-accent); }
.activite-btn.btn-primary svg { color: var(--color-bg); }
.activite-conseil { flex-direction: row; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-6); }
.activite-conseil[hidden] { display: none; }

/* Tableaux */
.tableau-scroll { overflow-x: auto; background: var(--color-surface); padding: var(--space-3); }
.tableau-institution-nom {
  font-family: var(--font-heading); font-weight: 800; text-align: left;
  vertical-align: middle; border-right: 2px solid var(--color-divider);
}
.tableau-modele-acronyme { color: color-mix(in srgb, var(--color-text) 55%, transparent); font-size: 13px; }
.tableau-valeur { color: var(--color-accent); }
.tableau-ecart { font-size: 12px; }
.tableau-modele-note { color: color-mix(in srgb, var(--color-text) 55%, transparent); font-size: 13px; }
.tableau-nuance { font-size: 12px; margin-bottom: var(--space-6); }

/* On était aux fraises */
.honte-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.honte-carte { text-align: center; align-items: center; }
.honte-carte__taux { font-family: var(--font-heading); font-weight: 800; font-size: 34px; color: var(--color-accent-700); }
.honte-carte__legende { text-align: center; flex: none; }
.honte-bourde { flex-direction: row; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-6); }
.honte-modele-nom-propre { font-family: var(--font-heading); font-weight: 800; }

/* Podium "Qui était le moins aux fraises ?" */
.podium { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); }
.podium__colonne { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.podium__nom { font-family: var(--font-heading); font-weight: 800; font-size: 14px; text-align: center; }
.podium__marche {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 2px; padding-top: 10px;
}
.podium__rang { font-family: var(--font-heading); font-weight: 800; font-size: 30px; }
.podium-reste { margin-bottom: var(--space-6); }
.podium-reste__rang { font-size: 13px; width: 2em; }

/* Pied de page */
.footer-site { font-size: 12px; opacity: 0.7; padding: var(--space-4) 0 var(--space-8); }
.footer-site p { margin: 0 0 var(--space-2); }
.footer-site a { color: inherit; }

/* Page d'erreur / mentions légales : rester dans le système même sans layout complet */
.page--erreur, .page--legal { max-width: 640px; margin: 0 auto; padding: var(--space-8) var(--space-4); }

/* L'attribut [hidden] doit gagner sur les display:grid/flex déclarés plus haut
   (même spécificité, donc c'est l'ordre dans la feuille qui tranche). */
[hidden] { display: none !important; }