/* ============================================================ 1. Jetons */
:root {
    color-scheme: light;

    --fond-haut:      #F7F9FC;
    --fond-bas:       #EEF3F9;
    --carte:          #FFFFFF;
    --carte-bord:     rgba(15, 35, 70, .07);
    --encre:          #14243D;
    --encre-douce:    #5A6B84;
    --encre-tenue:    #64738C;

    --humidite:       #17A2C4;
    --hausse:         #E23C34;
    --baisse:         #2B7FD9;
    --hausse-humide:  #17A2C4;
    --baisse-humide:  #C08A3E;
    --accent-record:  #F2A63B;
    --succes:         #34C27A;
    --sur-accent:     #FFFFFF;

    --ombre-proche:   0 2px 4px rgba(15, 35, 70, .06);
    --ombre-lointaine:0 12px 32px rgba(15, 35, 70, .08);
    --rayon:          24px;
    --rayon-petit:    14px;

    --pas:            clamp(16px, 2vw, 28px);
    --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme="sombre"] {
    color-scheme: dark;

    --fond-haut:      #0B1220;
    --fond-bas:       #0E1729;
    --carte:          #131C2E;
    --carte-bord:     rgba(255, 255, 255, .07);
    --encre:          #E8EEF7;
    --encre-douce:    #A3B2C9;
    --encre-tenue:    #7A8AA3;

    --ombre-proche:   0 2px 4px rgba(0, 0, 0, .3);
    --ombre-lointaine:0 12px 32px rgba(0, 0, 0, .35);
}

/* ============================================================ 2. Base */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap;
             src: url('inter/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap;
             src: url('inter/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap;
             src: url('inter/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap;
             src: url('inter/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap;
             src: url('inter/inter-800.woff2') format('woff2'); }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    font-family: var(--police);
    font-feature-settings: 'tnum' 1, 'cv05' 1;
    color: var(--encre);
    background: linear-gradient(170deg, var(--fond-haut) 0%, var(--fond-bas) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

body.repos { cursor: none; }

main { padding: 0 var(--pas) calc(var(--pas) * 2); max-width: 1800px; margin: 0 auto; }

a { color: inherit; }

/* ============================================================ 3. Barre supérieure */
.barre {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 24px;
    padding: var(--pas);
    max-width: 1800px; margin: 0 auto;
}
.barre h1 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.barre .moment { color: var(--encre-douce); font-size: clamp(14px, 1.3vw, 18px); font-weight: 500; }
/* flex-wrap : sans lui, les quatre pastilles de navigation débordent sous 430 px
   et font défiler toute la page horizontalement. */
.barre nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.lien {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 999px;
    background: var(--carte); border: 1px solid var(--carte-bord);
    box-shadow: var(--ombre-proche);
    font-size: 15px; font-weight: 600; text-decoration: none;
    color: var(--encre-douce);
    cursor: pointer;
}
.lien:hover { color: var(--encre); }
.lien[aria-current="page"] { color: var(--encre); box-shadow: var(--ombre-lointaine); }

.bandeau {
    display: flex; align-items: center; gap: 12px;
    margin: 0 var(--pas) var(--pas);
    padding: 14px 20px; border-radius: var(--rayon-petit);
    background: color-mix(in srgb, var(--accent-record) 14%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--accent-record) 40%, transparent);
    font-weight: 600; font-size: 16px;
}

/* ============================================================ 4. Cartes */
.grille {
    display: grid; gap: var(--pas);
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* ---- Tableau de bord : les cinq cartes tiennent dans l'écran ----------------
   L'écran mural n'a personne pour le faire défiler. La page occupe donc
   exactement la hauteur disponible et les cartes se partagent ce qui reste
   sous la barre du haut.

   Le seuil de 1000 × 700 n'est pas décoratif : en dessous, cinq cartes se
   partagent des rangées d'environ 200 px, où ni la mini-courbe ni le bouton
   « Voir les années passées » n'entrent — mesuré à 800 × 760. Le défilement
   ordinaire y est préférable, et sur un téléphone il est de toute façon le
   geste naturel. */
@media (min-width: 1000px) and (min-height: 700px) {
    body.tableau-de-bord { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
    /* width: 100% est indispensable : main porte « margin: 0 auto », et dans un
       conteneur flexible en colonne des marges automatiques font que l'élément
       se dimensionne sur son contenu. Les cartes étant confinées, ce contenu ne
       mesure plus rien et toute la grille s'effondrait à quelques pixels. */
    body.tableau-de-bord main {
        flex: 1 1 auto; min-height: 0; width: 100%;
        display: flex; padding-bottom: var(--pas);
    }
    /* La barre du haut est de l'habillage : sur un écran bas, c'est elle qui
       maigrit la première, pour que les chiffres gardent leur taille. */
    body.tableau-de-bord .barre { padding-block: clamp(8px, 1.4vh, 24px); }
    body.tableau-de-bord .grille { flex: 1 1 auto; min-height: 0; grid-auto-rows: 1fr; }
    body.tableau-de-bord .carte { display: flex; flex-direction: column; min-height: 0; }
    /* La mini-courbe absorbe la place restante, quelle que soit la hauteur d'écran.
       min-height: 0 la laisse aussi céder du terrain sur un écran très bas : une
       carte portant un badge « record » y gagne la place de son bouton, et c'est
       la décoration qui s'efface, jamais une commande. */
    body.tableau-de-bord .sparkline { flex: 1 1 0; height: auto; min-height: 0; }
    /* align-self : sans lui, le bouton s'étire sur toute la largeur de la carte
       et son libellé se retrouve centré, alors qu'il était aligné à gauche. */
    body.tableau-de-bord .bascule { margin-top: auto; padding-bottom: 0; align-self: flex-start; }

    /* Chaque carte est son propre conteneur de référence : sa typographie suit
       SA largeur et SA hauteur, pas celles de l'écran. Une carte étroite écrit
       plus petit, et les phrases — qui nomment désormais une date complète —
       tiennent sur une seule ligne au lieu de faire déborder la carte.
       Le terme en cqw commande la largeur (le passage à la ligne), celui en cqh
       la hauteur (le débordement vers le bas) ; on garde le plus contraignant. */
    body.tableau-de-bord .carte { container-type: inline-size; padding: clamp(14px, 2.2vh, 30px); }
    body.tableau-de-bord .carte-entete { margin-bottom: clamp(2px, .8vh, 8px); }
    body.tableau-de-bord .carte-entete .nom { font-size: clamp(12px, min(4cqw, 2.4vh), 18px); }
    body.tableau-de-bord .temperature { font-size: clamp(34px, min(20cqw, 10vh), 116px); }
    body.tableau-de-bord .carte .moment {
        margin-top: clamp(2px, .9vh, 10px); font-size: clamp(11px, min(4cqw, 1.9vh), 18px);
    }
    body.tableau-de-bord .ecart {
        margin-top: clamp(4px, 1.3vh, 14px); font-size: clamp(12px, min(4cqw, 2vh), 21px);
    }
    body.tableau-de-bord .humidite { margin-top: clamp(4px, 1.5vh, 16px); }
    body.tableau-de-bord .humidite .valeur { font-size: clamp(18px, min(8cqw, 3.4vh), 38px); }
    body.tableau-de-bord .humidite .phrase { font-size: clamp(10px, min(3.3cqw, 1.7vh), 17px); }
    body.tableau-de-bord .record {
        margin-top: clamp(4px, 1.5vh, 16px); padding: clamp(3px, .8vh, 7px) 14px;
        font-size: clamp(10px, min(3.2cqw, 1.7vh), 14px);
    }
    body.tableau-de-bord .sparkline { margin-top: clamp(6px, 1.5vh, 18px); }
    body.tableau-de-bord .bascule {
        margin-top: auto; font-size: clamp(11px, min(3.2cqw, 1.7vh), 14px);
        padding-top: clamp(4px, .8vh, 8px);
    }
    /* Volet déplié : la carte défile en elle-même plutôt que de pousser la page. */
    body.tableau-de-bord .carte.deplie { overflow-y: auto; }
}

/* Trois cartes en haut, deux en bas occupant toute la largeur : pas de trou
   dans la grille, et cinq cartes de surface comparable. */
@media (min-width: 1000px) {
    body.tableau-de-bord .grille { grid-template-columns: repeat(6, 1fr); }
    body.tableau-de-bord .carte { grid-column: span 2; }
    body.tableau-de-bord .carte:nth-last-child(-n+2) { grid-column: span 3; }
}

.carte {
    position: relative; overflow: hidden;
    padding: clamp(20px, 2vw, 30px);
    border-radius: var(--rayon);
    background: var(--carte);
    border: 1px solid var(--carte-bord);
    box-shadow: var(--ombre-proche), var(--ombre-lointaine);
}
.carte::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
    background: var(--couleur-piece, var(--encre-tenue));
}

.carte-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.carte-entete .icone { font-size: 22px; line-height: 1; }
.carte-entete .nom {
    font-size: clamp(15px, 1.2vw, 18px); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce);
}

.temperature {
    display: block; line-height: .95;
    font-size: clamp(60px, 7.5vw, 116px); font-weight: 800; letter-spacing: -.045em;
    color: var(--couleur-piece, var(--encre));
}

/* Date du relevé mis en vedette : discrète, mais toujours présente — le grand
   chiffre est celui de l'an dernier, il ne doit jamais être pris pour celui du jour. */
.carte .moment {
    margin-top: 10px; font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 600; color: var(--encre-douce);
}

/* Les phrases nomment maintenant une date complète et tiennent souvent sur deux
   lignes : la flèche reste alignée sur la première, elle ne se centre pas. */
.ecart { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: clamp(16px, 1.4vw, 21px); font-weight: 700; line-height: 1.3; }
.ecart .fleche { font-size: .85em; line-height: 1.5; }
.ecart.hausse    { color: var(--hausse); }
.ecart.baisse    { color: var(--baisse); }
.ecart.identique { color: var(--encre-douce); }
.ecart.inconnu   { color: var(--encre-tenue); font-weight: 600; }

.humidite { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; }
.humidite .valeur { flex: none; white-space: nowrap; font-size: clamp(24px, 2.4vw, 38px); font-weight: 700; color: var(--humidite); }
.humidite .phrase { flex: 1 1 12ch; font-size: clamp(14px, 1.1vw, 17px); font-weight: 600; color: var(--encre-douce); line-height: 1.35; }
.humidite .phrase.hausse { color: var(--hausse-humide); }
.humidite .phrase.baisse { color: var(--baisse-humide); }

.record {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
    padding: 7px 14px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent-record) 16%, transparent);
    color: color-mix(in srgb, var(--accent-record) 75%, var(--encre));
    font-size: 14px; font-weight: 700;
}

.sparkline { display: block; width: 100%; height: 56px; margin-top: 18px; overflow: visible; }
.sparkline path { fill: none; stroke: var(--couleur-piece, var(--encre-tenue));
                  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

.details { margin-top: 18px; border-top: 1px solid var(--carte-bord); padding-top: 16px; }
.details[hidden] { display: none; }
.details table { width: 100%; border-collapse: collapse; font-size: 15px; }
.details th, .details td { padding: 6px 0; text-align: right; font-weight: 600; }
.details th:first-child, .details td:first-child { text-align: left; color: var(--encre-douce); font-weight: 600; }
.details .approx { color: var(--encre-tenue); font-size: 13px; font-weight: 500; }
.details .normale td { border-top: 1px solid var(--carte-bord); color: var(--encre-douce); }

.bascule {
    margin-top: 14px; padding: 8px 0; background: none; border: 0;
    color: var(--encre-douce); font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
}

.indisponible { color: var(--encre-tenue); font-size: 17px; font-weight: 600; margin-top: 12px; }

.visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================ 5. Graphiques et formulaires */
.panneau {
    padding: clamp(20px, 2vw, 30px); border-radius: var(--rayon);
    background: var(--carte); border: 1px solid var(--carte-bord);
    box-shadow: var(--ombre-proche), var(--ombre-lointaine);
}
.panneau + .panneau { margin-top: var(--pas); }
.panneau h2 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }

.filtres { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-bottom: 22px; }
.groupe { display: flex; flex-direction: column; gap: 9px; }
.groupe .titre { font-size: 12px; font-weight: 700; letter-spacing: .08em;
                 text-transform: uppercase; color: var(--encre-tenue); }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }

.pastille {
    padding: 9px 17px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--carte-bord); background: transparent;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--encre-douce);
}
.pastille[aria-pressed="true"] {
    background: var(--encre); border-color: var(--encre); color: var(--carte);
}
.pastille[data-couleur][aria-pressed="true"] {
    background: var(--couleur-piece); border-color: var(--couleur-piece); color: var(--sur-accent);
}

input[type="date"], select, input[type="password"], input[type="text"], textarea {
    padding: 10px 14px; border-radius: var(--rayon-petit);
    border: 1.5px solid var(--carte-bord); background: var(--carte);
    color: var(--encre); font: inherit; font-size: 15px;
}
textarea { width: 100%; min-height: 130px; resize: vertical; font-family: ui-monospace, monospace; }

.bouton {
    padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--encre); color: var(--carte);
    font: inherit; font-size: 16px; font-weight: 700;
}
.bouton:disabled { opacity: .45; cursor: default; }

.graphique { position: relative; height: clamp(320px, 46vh, 560px); }

.chiffres { display: flex; flex-wrap: wrap; gap: var(--pas); margin-top: 22px; }
.chiffre { flex: 1 1 160px; }
.chiffre .etiquette { font-size: 13px; font-weight: 700; letter-spacing: .06em;
                      text-transform: uppercase; color: var(--encre-tenue); }
.chiffre .valeur { font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; letter-spacing: -.03em; }
.chiffre .quand { font-size: 14px; font-weight: 500; color: var(--encre-douce); }

.message { padding: 14px 18px; border-radius: var(--rayon-petit); font-weight: 600; margin-bottom: 18px; }
.message.succes { background: color-mix(in srgb, var(--succes) 16%, var(--carte)); }
.message.erreur { background: color-mix(in srgb, var(--hausse) 14%, var(--carte)); }

.progression { height: 10px; border-radius: 999px; background: var(--carte-bord); overflow: hidden; }
.progression > div { height: 100%; width: 0; background: var(--encre); transition: width .3s; }

table.journal { width: 100%; border-collapse: collapse; font-size: 15px; }
table.journal th { text-align: left; font-size: 12px; letter-spacing: .07em;
                   text-transform: uppercase; color: var(--encre-tenue); padding: 8px 12px 8px 0; }
table.journal td { padding: 9px 12px 9px 0; border-top: 1px solid var(--carte-bord); }

@media (max-width: 640px) {
    .barre { flex-direction: column; align-items: flex-start; }
    .barre nav { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}