:root {
    --primary: #2c7a4b;
    --primary-dark: #1f5c37;
    --bg: #f7faf8;
    --text: #1f2a24;
    --muted: #5c6b63;
    --border: #dde5e0;
    --card-bg: #ffffff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

a { color: var(--primary-dark); }

/* Bandeau "mer calme" : dégradé bleu + deux couches de vagues SVG qui
   défilent à vitesse différente (profondeur) + petits voiliers blancs qui
   traversent lentement l'écran — animation "zen", lente et continue, à la
   place de l'ancien fond vert uni (retour utilisateur du 08/08/2026). */
.site-header {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 36px 0 44px;
    background: linear-gradient(180deg, #0e4a5c 0%, #1c7293 55%, #4fb0c6 100%);
}

.mer-anim {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.mer-vague {
    position: absolute;
    left: 0;
    width: 200%;
    height: 55%;
    animation: mer-derive-vague linear infinite;
}

.mer-vague path { fill: rgba(255, 255, 255, 0.14); }

.mer-vague-arriere { bottom: 18%; animation-duration: 26s; }
.mer-vague-avant { bottom: 0; animation-duration: 18s; }
.mer-vague-avant path { fill: rgba(255, 255, 255, 0.22); }

.mer-bateau {
    position: absolute;
    width: 46px;
    animation: mer-derive-bateau linear infinite, mer-tangage ease-in-out infinite;
}

.mer-bateau-svg { display: block; width: 100%; height: auto; }
.mer-bateau-mat { stroke: #fff; stroke-width: 1.5; }
.mer-bateau-voile { fill: #fff; }
.mer-bateau-coque { fill: #fff; opacity: 0.9; }

/* Profondeur : le voilier le plus grand/opaque navigue près des vagues du
   bas (premier plan), le plus petit/pâle près de l'horizon en haut. */
.mer-bateau-1 { top: 64%; width: 40px; opacity: 0.85; animation-duration: 38s, 4s; animation-delay: 0s, 0s; }
.mer-bateau-2 { top: 44%; width: 28px; opacity: 0.55; animation-duration: 52s, 5s; animation-delay: -20s, -1s; }
.mer-bateau-3 { top: 12%; width: 20px; opacity: 0.4; animation-duration: 65s, 6s; animation-delay: -40s, -2s; }

@keyframes mer-derive-vague {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes mer-derive-bateau {
    from { left: -12%; }
    to { left: 108%; }
}

@keyframes mer-tangage {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .mer-vague, .mer-bateau { animation: none; }
}

.site-header-inner {
    position: relative;
    text-align: center;
}

.site-header .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.logo-img {
    display: block;
    height: 44px;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.site-header .tagline {
    margin: 6px 0 0;
    opacity: 0.9;
    font-size: 0.95rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.jeu-lien-header {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
}

.jeu-lien-header:hover { background: rgba(255, 255, 255, 0.24); }

.jeu-banniere {
    display: block;
    margin-top: 24px;
    padding: 14px 18px;
    border-radius: 10px;
    background: linear-gradient(120deg, #1c7293, #4fb0c6);
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    text-align: center;
}

.jeu-banniere:hover { background: linear-gradient(120deg, #17627e, #3d9cb3); }

main.container { padding-top: 32px; padding-bottom: 48px; }

.intro h1 { margin-bottom: 8px; }
.intro p { color: var(--muted); max-width: 720px; }

.alerte-info-box {
    background: #fdecea;
    border: 1px solid #f3c2bd;
    border-left: 4px solid #d32f2f;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 32px;
}

.alerte-info-label {
    margin: 0 0 4px;
    font-weight: 700;
    color: #d32f2f;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.alerte-info-titre {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.alerte-info-titre:hover { text-decoration: underline; }

.alerte-info-meta {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.alertes-info-liste {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.alerte-info-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid #d32f2f;
    border-radius: 10px;
    padding: 16px 20px;
}

.alerte-info-resume {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.alerte-form-wrapper {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    max-width: 560px;
}

.alerte-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alerte-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    margin-top: 12px;
}

.alerte-form input,
.alerte-form textarea {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
}

.btn-submit {
    margin-top: 20px;
    align-self: flex-start;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-submit:hover { background: var(--primary-dark); }

.champ-piege {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.alerte-form-message {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 0 0 12px;
}

.alerte-form-succes { background: #e3f3e8; color: var(--primary-dark); }
.alerte-form-erreur { background: #fdecea; color: #c0392b; }

.jour-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.carte-jour {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: 10px;
    padding: 20px 24px;
}

.carte-jour h2 { margin: 0 0 16px; font-size: 1.15rem; }

.carte-jour-soustitre {
    margin: 20px 0 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.carte-jour-soustitre:first-of-type { margin-top: 0; }

.condition-jour {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.condition-icone { font-size: 2rem; line-height: 1; }
.condition-texte { font-size: 1.05rem; font-weight: 600; }

.meteo-jour-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.meteo-jour-items-marees {
    margin-top: 16px;
}

.meteo-jour-items li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.95rem;
}

.meteo-jour-items li:last-child { border-bottom: none; }

.meteo-jour-label { color: var(--muted); }
.meteo-jour-valeur { font-weight: 600; text-align: right; }

.evenements-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.evenements-liste li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.95rem;
}

.evenements-liste li:last-child { border-bottom: none; }

.evenements-liste a { color: var(--text); font-weight: 600; text-decoration: none; }
.evenements-liste a:hover { text-decoration: underline; }

.evenement-categorie {
    flex-shrink: 0;
    background: #fff3e0;
    color: #e65100;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
}

.beaufort-badge,
.coefficient-badge,
.periode-badge,
.vent-type-badge {
    display: inline-block;
    margin-left: 4px;
    background: #eef1f4;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
}

.periode-bonne, .vent-type-offshore { background: #e3f2ec; color: var(--primary-dark); }

.radar-map {
    height: 420px;
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-top: 12px;
}

/* Icônes emoji des marqueurs Leaflet (carte Famille) : Leaflet donne un fond
   blanc + une bordure par défaut à un divIcon, retirés ici pour ne garder
   que l'emoji flottant — retour utilisateur du 11/08/2026 (les marqueurs
   restaient le pin bleu par défaut car l'emoji n'était utilisé que dans la
   popup, jamais comme icône). */
.famille-icone-marqueur,
.dechets-icone-marqueur {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.famille-position-moi {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}

/* Conditions du jour Famille : météo à gauche / marée à droite, chacune en
   bandeau horizontal défilant heure par heure — volontairement plus simple
   que le graphique Chart.js de la catégorie Météo (retour utilisateur du
   11/08/2026 : "simplifiée avec des infos utiles pour sortie famille"),
   pas de dépendance à un positionnement JS calé sur un graphique. */
.famille-conditions-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.famille-colonne h3 { margin: 0 0 4px; font-size: 1rem; }

.famille-heure-grille {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 0;
    margin: 8px 0;
}

.famille-heure-cellule {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 44px;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.famille-heure-heure { font-weight: 600; }
.famille-heure-icone { font-size: 1.2rem; }
.famille-heure-valeur { color: var(--text); font-weight: 600; }
.famille-heure-uv {
    background: #fff3e0;
    color: #e65100;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    white-space: nowrap;
}

.famille-heure-chart-wrapper {
    position: relative;
    height: 140px;
    margin-top: 8px;
}

.radar-map-controles {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.radar-map-controles .btn-submit { margin-top: 0; }
.radar-map-controles input[type="range"] { flex: 1; max-width: 260px; }

/* Badge "pluie détectée par radar" (assets/radar-badge.js) : injecté
   entièrement côté navigateur, pas de dépendance à une tâche planifiée —
   retour utilisateur du 15/08/2026. */
.radar-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 6px;
}
.radar-badge-aucune { background: #e3f2ec; color: var(--primary-dark); }
.radar-badge-legere { background: #fdf1dc; color: #8a5a00; }
.radar-badge-moderee { background: #ffe0cc; color: #c0562a; }
.radar-badge-forte { background: #fdecea; color: #a33025; }

/* Mini-outil "Où jeter ça ?" (catégorie Déchets, retour utilisateur du
   15/08/2026) : recherche en direct dans un guide de tri statique. */
.tri-recherche-input {
    width: 100%;
    max-width: 420px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 1rem;
    margin-top: 8px;
}
.tri-resultats { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tri-resultat-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.95rem; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tri-resultat-ligne:last-child { border-bottom: none; }
.tri-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.tri-badge-jaune { background: #fdf1dc; color: #8a5a00; }
.tri-badge-om { background: #e9e9ec; color: #44454a; }
.tri-badge-verre { background: #e3f2ec; color: var(--primary-dark); }
.tri-badge-papier { background: #dceefb; color: #1d6fa5; }
.tri-badge-biodechets { background: #ecdfd1; color: #6b4a24; }
.tri-badge-decheterie { background: #ffe0cc; color: #c0562a; }
.tri-badge-pharmacie { background: #fdecea; color: #a33025; }
.tri-badge-emballages { background: #fdf1dc; color: #8a5a00; }
.tri-badge-textile { background: #e9e4f5; color: #5b3fa3; }

/* Répartition en % (catégorie Déchets, retour UX externe du 15/08/2026) :
   résumé compact au-dessus du détail replié, remplace une carte par type de
   déchet affichée systématiquement en pleine hauteur. */
.dechets-repartition { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.dechets-repartition-label { font-size: 0.9rem; margin-bottom: 3px; display: block; }
.dechets-repartition-barre-fond { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; height: 10px; overflow: hidden; }
.dechets-repartition-barre { background: var(--primary-dark); height: 100%; border-radius: 6px 0 0 6px; }
.dechets-detail-repli { margin-top: 20px; }
.dechets-detail-repli summary { cursor: pointer; font-weight: 600; color: var(--primary-dark); margin-bottom: 12px; }
.tri-resultat-note { font-size: 0.85rem; color: var(--muted); flex-basis: 100%; }
.periode-puissante { background: #ffe0cc; color: #c0562a; }
.vent-type-onshore { background: #fbe3e1; color: #a33025; }
.vent-type-travers { background: #fdf1dc; color: #8a5a00; }

.alerte-securite-plage {
    background: #fdecea;
    color: #a33025;
    border: 1px solid #f3b7b0;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 600;
    margin: 12px 0;
}
.alerte-securite-plage a { color: inherit; text-decoration: underline; }

.verdict-surf {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1.05rem;
    margin: 12px 0 4px;
}
.verdict-surf-tres-bonnes { background: #d9f0e6; color: var(--primary-dark); }
.verdict-surf-bonnes { background: #e3f2ec; color: var(--primary-dark); }
.verdict-surf-moyennes { background: #fdf1dc; color: #8a5a00; }
.verdict-surf-difficiles { background: #fbe3e1; color: #a33025; }
.verdict-surf-inconnu { background: #eef1f4; color: var(--muted); }
.verdict-surf-creneau { background: #e7f0f7; color: #1d6fa5; font-size: 0.95rem; }

/* Comme .evenements-liste, mais pour des entrées avec un descriptif repliable
   sous le titre (créations/fermetures d'entreprises, marchés publics) :
   chaque entrée est un <details>, une seule ligne titre + date tant qu'elle
   n'est pas dépliée, pour rester lisible même sur de longues listes. */
.mouvements-liste {
    list-style: none;
    margin: 0;
    padding: 4px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.mouvements-liste li {
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.95rem;
}

.mouvements-liste li:last-child { border-bottom: none; }

.mouvements-liste summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.mouvements-liste summary::-webkit-details-marker { display: none; }

.mouvements-liste summary::before {
    content: '▸';
    flex-shrink: 0;
    color: var(--muted);
    margin-right: 4px;
    transition: transform 0.15s ease;
}

.mouvements-liste details[open] summary::before { transform: rotate(90deg); }

.mouvements-liste summary span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mouvements-liste .mouvement-detail {
    padding: 0 0 12px 20px;
    font-size: 0.9rem;
    color: var(--muted);
}

.mouvements-liste .mouvement-detail p { margin: 0 0 6px; }

.mouvements-liste a { color: var(--text); text-decoration: none; }
.mouvements-liste a:hover { text-decoration: underline; }
.mouvements-liste .mouvement-detail a { color: var(--primary-dark); font-weight: 600; }

.meteo-jour-marees { display: flex; gap: 8px; flex-wrap: wrap; }

.maree-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.maree-haute { background: #e5eff7; color: #1d6fa5; }
.maree-basse { background: #fbf1d9; color: #8a6d00; }

.marnage-jour {
    margin: 14px 0 0;
    font-size: 0.92rem;
    padding: 10px 14px;
    background: #f0f5f2;
    border-radius: 8px;
}

.meteo-jour-note {
    margin: 16px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.meteo-jour-note summary {
    cursor: pointer;
    color: var(--primary-dark);
    font-weight: 600;
    font-style: normal;
}

.meteo-jour-note p {
    margin: 8px 0 0;
    font-style: italic;
}

.meteo-heure-titre {
    margin: 20px 0 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.meteo-heure-chart-wrapper {
    position: relative;
    height: 130px;
}

.maree-marqueur {
    position: absolute;
    transform: translate(-50%, -4px);
    font-size: 0.85rem;
    line-height: 1;
    cursor: default;
}

/* Bleu (montée des eaux) / ambre (mer basse, sable découvert) plutôt que deux
   verts proches du vert de la courbe : les flèches se distinguaient mal
   l'une de l'autre et de la courbe elle-même. */
.maree-marqueur-haute { color: #1d6fa5; }
.maree-marqueur-basse { color: #e0a800; }

.meteo-heure-icones {
    position: relative;
    height: 28px;
    margin-bottom: 4px;
}

.meteo-heure-icone {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 1.3rem;
    cursor: default;
}

.meteo-heure-vent,
.meteo-heure-pluie,
.meteo-heure-etoiles {
    position: relative;
    height: 18px;
    margin-bottom: 4px;
}

.meteo-heure-etoile {
    font-size: 0.85rem;
    color: #c9970c;
    letter-spacing: -1px;
}

.meteo-heure-ligne-picto {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.75rem;
    cursor: default;
}

.meteo-heure-ligne-unite {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0.72rem;
    color: var(--muted);
    cursor: default;
}

.meteo-heure-valeur {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
    cursor: default;
}

.meteo-heure-vent-direction {
    position: relative;
    height: 16px;
    margin-bottom: 4px;
}

.fleche-direction {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--muted);
    cursor: default;
    /* rotate() posé en inline par PHP : dépend de la direction de chaque
       ligne, pas exprimable en CSS statique. */
}

.meteo-heure-fleche-vent {
    position: absolute;
    top: 0;
    display: inline-block;
    font-size: 0.8rem;
    color: var(--muted);
    cursor: default;
    /* transform (translateX + rotate) posé en inline par PHP : dépend de la
       direction du vent de chaque heure, pas exprimable en CSS statique. */
}

.faits-jour {
    margin: 0;
    padding: 0;
    list-style: none;
}

.faits-jour li {
    padding: 6px 0;
    font-size: 0.92rem;
    border-bottom: 1px dashed var(--border);
}

.faits-jour li:last-child { border-bottom: none; }

.badge-qualite {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 4px 0;
}

.qualite-bonne { background: #e3f2ec; color: var(--primary-dark); }
.qualite-moyenne { background: #fdf1dc; color: #8a5a00; }
.qualite-mauvaise { background: #fbe3e1; color: #a33025; }
.qualite-inconnue { background: #eef1f4; color: var(--muted); }

/* Liste compacte pour la section Qualité de l'accueil : seulement 4
   indicateurs simples, une grille de grandes cartes prenait trop de place
   (retour utilisateur du 08/08/2026). */
.qualite-liste {
    list-style: none;
    margin: 12px 0 0;
    padding: 4px 16px;
    max-width: 640px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.qualite-liste li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}

.qualite-liste li:last-child { border-bottom: none; }

.qualite-liste-label { color: var(--muted); font-weight: 600; }
.qualite-liste-valeur { font-weight: 600; text-align: right; }
.qualite-liste-valeur .meta { margin: 0 0 0 6px; font-weight: 400; }
.qualite-liste-valeur .badge-qualite { margin: 0; }

.tableau-qualite-wrapper {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 20px;
    overflow-x: auto;
}

.prix-plus-cher { background: #fbe3e1; color: #a33025; font-weight: 700; border-radius: 4px; }
.prix-moins-cher { background: #e3f2ec; color: var(--primary-dark); font-weight: 700; border-radius: 4px; }
.prix-tendance { font-size: 0.8rem; margin-left: 2px; }
.prix-tendance-hausse { color: #a33025; }
.prix-tendance-baisse { color: var(--primary-dark); }

.tableau-qualite {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.tableau-qualite th {
    text-align: left;
    padding: 10px 8px;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.tableau-qualite td {
    padding: 10px 8px;
    border-bottom: 1px dashed var(--border);
    vertical-align: middle;
}

.tableau-qualite tr:last-child td { border-bottom: none; }

.tableau-qualite .badge-qualite { margin: 0; }

.vague-cell {
    font-weight: 700;
    text-align: center;
    border-radius: 6px;
}

.vague-plat { background: #eef1f4; color: var(--muted); }
.vague-petite { background: #e3f2ec; color: var(--primary-dark); }
.vague-moyenne { background: #fff3e0; color: #e65100; }
.vague-bonne { background: #ffe0cc; color: #c0562a; }
.vague-grosse { background: #fdecea; color: #c0392b; }

.detail-conformite {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--muted);
}

.detail-conformite summary { cursor: pointer; color: var(--primary-dark); }

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.category-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: 10px;
    padding: 20px;
}

.category-card h2 {
    margin: 0 0 12px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.indicateur-preview-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.indicateur-preview-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.92rem;
}

.indicateur-preview-list .titre { color: var(--muted); }
.indicateur-preview-list .valeur { font-weight: 600; }

.btn-link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.empty { color: var(--muted); font-style: italic; }

.breadcrumb {
    color: var(--muted);
    font-size: 0.9rem;
}

.category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 24px;
}

.indicateur-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Variante 4 colonnes (au lieu de 3) pour les barres résumé de l'accueil
   (Ce mois-ci / Qualité / Record) : reste responsive, se réduit tout seul
   sur petit écran grâce à auto-fill, comme .indicateur-cards. */
.indicateur-cards-accueil { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Les 6 carburants suivis tiennent sur une seule ligne en desktop (retour
   utilisateur du 08/08/2026), tout en se réduisant sur petit écran comme les
   autres variantes de .indicateur-cards. */
.indicateur-cards-carburant { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.record-group { margin-bottom: 40px; }

.record-group-title {
    margin: 0 0 16px;
    color: var(--primary-dark);
    font-size: 1.3rem;
}

.record-chart {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.record-chart-title {
    margin: 0 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.record-chart-canvas-wrapper {
    position: relative;
    height: 38vh;
    min-height: 300px;
    max-height: 450px;
}

.record-chart-canvas-wrapper-barres {
    height: 50vh;
    min-height: 380px;
    max-height: 550px;
}

.classement-chart-wrapper {
    height: 480px;
    max-height: none;
}

.indicateur-card h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--muted); }

.indicateur-card-hero {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px;
    margin-bottom: 20px;
}

.indicateur-card-hero h3 { margin: 0 0 8px; font-size: 1.2rem; color: var(--muted); }
.indicateur-card-hero .valeur-principale { font-size: 2.6rem; }

.page-hero {
    border: 2px solid var(--primary);
    margin-bottom: 32px;
}

.page-hero h2 { margin: 0 0 8px; font-size: 1.4rem; color: var(--muted); }
.page-hero .valeur-principale { font-size: 3.2rem; }

.indicateur-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}

.indicateur-card h2 { margin: 0 0 8px; font-size: 1.05rem; }

.valeur-principale {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 4px 0;
}

.meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 12px; }

/* Nom de borne électrique parfois très long (adresse brute de la source
   IRVE) : tronqué sur une ligne pour garder une hauteur de carte cohérente
   avec les autres carburants, texte complet dans l'attribut title au survol
   (retour utilisateur du 08/08/2026). */
.meta-tronquee {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unité affichée en plus petit à côté du prix, pour que "0,59 €/kWh" tienne
   sur une seule ligne dans une carte étroite (retour utilisateur du
   08/08/2026) — "€/kWh" est plus long que le simple "€" des carburants. */
.unite-secondaire { font-size: 1rem; font-weight: 600; }

.indicateur-card details { margin: 12px 0; font-size: 0.9rem; }
.indicateur-card summary { cursor: pointer; color: var(--primary-dark); font-weight: 600; }

.indicateur-card-double .stat-ligne {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.indicateur-card-double .stat-ligne:first-of-type { border-top: none; padding-top: 4px; }

.stat-label { color: var(--muted); font-size: 0.85rem; }

.stat-valeur {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 1.15rem;
}

.stat-date { font-weight: 400; color: var(--muted); font-size: 0.85rem; }

.source-link {
    display: block;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--muted);
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 20px 0;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Mini-jeu "Surfeur" (jeu.php) — canvas + écrans de démarrage/fin superposés
   + classement (retour utilisateur du 07/08/2026). */
.jeu-zone { margin-top: 24px; }

.jeu-canvas-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

#jeu-canvas {
    display: block;
    width: 100%;
    height: auto;
    background: #bfe4ee;
    touch-action: none;
    cursor: pointer;
}

.jeu-ecran {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    text-align: center;
    background: rgba(14, 74, 92, 0.72);
    color: #fff;
    overflow-y: auto;
}

.jeu-ecran[hidden] { display: none; }

.jeu-ecran-titre { font-size: 1.4rem; font-weight: 700; margin: 0; }
.jeu-ecran-texte { margin: 0; opacity: 0.9; }

.jeu-choix-personnage { display: flex; gap: 10px; margin: 4px 0; }

.jeu-personnage-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
}

.jeu-personnage-btn span { font-size: 0.75rem; font-weight: 600; }

.jeu-personnage-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
}

/* Bascule desktop/mobile sur la largeur d'écran plutôt que sur
   hover/pointer : ce test n'est pas fiable partout sur iPhone (Safari y
   affichait le texte "desktop" au lieu du texte tactile) — retour
   utilisateur du 08/08/2026. Sous ce seuil, le cadre de jeu est aussi
   nettement resserré : le canevas 800×360 devient très bas une fois
   réduit à la largeur d'un téléphone, il n'y a plus la place pour un
   texte d'instructions en plus des boutons. */
.jeu-mobile-only { display: none; }
@media (max-width: 640px) {
    .jeu-desktop-only { display: none; }
    .jeu-mobile-only { display: block; }

    /* justify-content:flex-start plutôt que center : un flex centré avec
       overflow-y:auto coupe le HAUT du contenu (le scroll par défaut ne
       remonte pas jusque-là) — c'était le cas ici, "Chute !" disparaissait
       derrière le bord du cadre sur mobile (retour utilisateur du
       08/08/2026). */
    .jeu-ecran { gap: 2px; padding: 6px; justify-content: flex-start; padding-top: 8px; }
    .jeu-ecran-titre { font-size: 1.05rem; }
    .jeu-ecran-texte { font-size: 0.75rem; }
    .jeu-choix-personnage { gap: 6px; margin: 2px 0; }
    .jeu-personnage-btn { padding: 3px 9px; font-size: 1.1rem; }
    /* Libellés "Fille"/"Garçon" masqués : l'icône seule suffit et cette
       ligne de texte en plus ne rentrait pas (retour utilisateur du
       08/08/2026). */
    .jeu-personnage-btn span { display: none; }
    .jeu-ecran .btn-submit { padding: 5px 12px; font-size: 0.85rem; margin-top: 0; }
    #jeu-form-score { margin-top: 2px; gap: 4px; flex-wrap: nowrap; }
    #jeu-pseudo { padding: 4px 6px; font-size: 0.75rem; width: 96px; }
    .jeu-ecran #jeu-form-score .btn-submit { padding: 4px 8px; font-size: 0.7rem; }
    .jeu-message-envoi { min-height: 0; font-size: 0.7rem; margin: 1px 0; }
    /* Titre "Prêt à surfer ?" masqué sur mobile : redondant avec le <h1>
       de la page juste au-dessus, et chaque ligne compte à cette hauteur
       de cadre (le titre "Chute !" de l'écran de fin reste affiché, lui
       n'est pas redondant). */
    #jeu-ecran-depart .jeu-ecran-titre { display: none; }
}

#jeu-form-score {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

#jeu-pseudo {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
}

.jeu-message-envoi { min-height: 1.2em; }

.jeu-ecran .btn-submit { margin-top: 4px; align-self: center; }

.jeu-score-en-cours {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 12px 0 0;
}

.jeu-classement {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 480px;
}

.jeu-classement li {
    display: grid;
    grid-template-columns: 32px 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--border);
}

.jeu-classement li:last-child { border-bottom: none; }

.jeu-classement-rang { font-weight: 700; color: var(--muted); }
.jeu-classement-personnage { text-align: center; }
.jeu-classement-pseudo { font-weight: 600; }
.jeu-classement-score { font-weight: 700; color: var(--primary-dark); }