/* SolarPredict — feuille de style
   ---------------------------------------------------------------------------
   Rendu côté serveur, sans build ni dépendance. Contrastes vérifiés :
   douze des treize couples texte/fond atteignent le niveau AAA du RGAA (7:1),
   le treizième — texte secondaire sur surface douce — atteint 6,74:1, soit AA.
   Les indicateurs non textuels dépassent le seuil AA de 3:1 qui leur est requis.
   --------------------------------------------------------------------------- */

:root {
    --encre: #12181d;
    --encre-douce: #4a5560;
    --encre-inverse: #ffffff;

    --fond: #f4f6f5;
    --surface: #ffffff;
    --surface-douce: #eef2f0;
    --bordure: #d4dbd8;
    --bordure-forte: #b3bfba;

    --accent: #14563a;
    --accent-fonce: #0e3f2a;
    --accent-clair: #e6f1ec;
    --accent-vif: #1d7a51;

    --erreur: #97200f;
    --erreur-fond: #fdecea;
    --focus: #0b5cad;

    --rayon: 10px;
    --rayon-large: 16px;
    --ombre: 0 1px 2px rgba(18,24,29,.06), 0 4px 12px rgba(18,24,29,.05);
    --ombre-forte: 0 2px 4px rgba(18,24,29,.08), 0 12px 28px rgba(18,24,29,.08);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--encre);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

.conteneur { max-width: 58rem; margin: 0 auto; padding: 0 1.5rem; }

/* Accessibilité : évitement clavier et focus visible */
.lien-evitement {
    position: absolute; left: -9999px;
    padding: .85rem 1.4rem;
    background: var(--accent); color: var(--encre-inverse);
    font-weight: 600; border-radius: 0 0 var(--rayon) 0; z-index: 100;
}
.lien-evitement:focus { left: 0; top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}

/* En-tête */
.entete {
    background: linear-gradient(160deg, var(--accent) 0%, var(--accent-fonce) 100%);
    color: var(--encre-inverse);
    padding: 1.6rem 0;
}
.entete .conteneur {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 1rem;
}
.marque { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.marque a { color: var(--encre-inverse); text-decoration: none; }
.marque a:hover { text-decoration: underline; text-underline-offset: 3px; }
.identite { min-width: 0; }
.sous-titre { margin: .2rem 0 0; font-size: .95rem; opacity: .92; }

.session { display: flex; align-items: center; gap: .9rem; font-size: .9rem; }
.session form { margin: 0; }
.lien-deconnexion {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.55);
    color: var(--encre-inverse); font: inherit;
    padding: .35rem .9rem; border-radius: 999px; cursor: pointer;
}
.lien-deconnexion:hover { background: rgba(255,255,255,.24); }

/* Titres */
/* `.conteneur` a une spécificité supérieure à `main` : sans ce sélecteur combiné,
   sa règle `padding: 0 1.5rem` écrase l'espacement vertical et le titre vient
   coller au bandeau d'en-tête. */
main.conteneur { padding-top: 2.75rem; padding-bottom: 4rem; }
h1 {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
    line-height: 1.2; letter-spacing: -.02em; margin: 0 0 1.75rem;
}
h2 { font-size: 1.2rem; letter-spacing: -.01em; margin: 2.25rem 0 .9rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .6rem; }

/* Formulaires */
fieldset {
    border: 1px solid var(--bordure); border-radius: var(--rayon-large);
    padding: 1.5rem 1.75rem 1.75rem; margin: 0 0 1.5rem;
    background: var(--surface); box-shadow: var(--ombre);
}
legend { font-weight: 700; font-size: 1.05rem; padding: 0 .6rem; color: var(--accent); }

.champ { margin-bottom: 1.25rem; }
.champ label { display: block; font-weight: 600; margin-bottom: .4rem; }
.unite { font-weight: 400; color: var(--encre-douce); }

input[type="number"], input[type="text"], input[type="password"], select {
    width: 100%; max-width: 24rem;
    padding: .7rem .85rem; font-size: 1rem; font-family: inherit;
    color: var(--encre); background: var(--surface);
    border: 1.5px solid var(--bordure-forte); border-radius: var(--rayon);
    transition: border-color .15s ease;
}
input:hover, select:hover { border-color: var(--accent-vif); }
select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234a5560' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center;
    padding-right: 2.4rem;
}
.aide { margin: .4rem 0 0; font-size: .875rem; color: var(--encre-douce); }

.cases { border: none; padding: 0; margin: 0; background: none; box-shadow: none; }
.cases legend { padding: 0; font-size: 1rem; color: var(--encre); margin-bottom: .9rem; }
.case {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: .85rem 1rem; margin-bottom: .6rem;
    background: var(--surface-douce);
    border: 1px solid transparent; border-radius: var(--rayon);
}
.case:hover { border-color: var(--bordure-forte); }
.case input[type="checkbox"] {
    width: 1.2rem; height: 1.2rem; margin-top: .2rem;
    flex-shrink: 0; accent-color: var(--accent);
}
.case label { font-weight: 600; margin: 0; cursor: pointer; }
.case .aide { margin-top: .2rem; }

/* Boutons */
.bouton-principal, .bouton-secondaire {
    display: inline-block; padding: .85rem 1.75rem;
    font-size: 1rem; font-family: inherit; font-weight: 600;
    border-radius: var(--rayon); cursor: pointer; text-decoration: none;
    transition: background .15s ease, transform .05s ease;
}
.bouton-principal {
    background: var(--accent); color: var(--encre-inverse);
    border: 1.5px solid var(--accent); box-shadow: var(--ombre);
}
.bouton-principal:hover { background: var(--accent-fonce); }
.bouton-principal:active { transform: translateY(1px); }
.bouton-secondaire {
    background: var(--surface); color: var(--accent);
    border: 1.5px solid var(--accent);
}
.bouton-secondaire:hover { background: var(--accent-clair); }

/* Alertes */
.alerte-erreur {
    background: var(--erreur-fond); border: 1px solid #f0c4bd;
    border-left: 5px solid var(--erreur);
    padding: 1.1rem 1.4rem; margin-bottom: 1.75rem; border-radius: var(--rayon);
}
.alerte-erreur h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--erreur); }
.alerte-erreur ul { margin: .5rem 0 0; padding-left: 1.25rem; }

/* Page de résultat */
.resultat-principal {
    background: linear-gradient(160deg, var(--accent) 0%, var(--accent-fonce) 100%);
    color: var(--encre-inverse); border: none;
    border-radius: var(--rayon-large);
    padding: 2rem 2rem 1.75rem; margin-bottom: 1.5rem;
    box-shadow: var(--ombre-forte);
}
.resultat-principal h2 {
    margin: 0; font-size: .95rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; opacity: .92;
}
.chiffre-cle {
    font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
    font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
    margin: .4rem 0 .5rem; font-variant-numeric: tabular-nums;
}
.unite-cle { font-size: 1.05rem; font-weight: 500; opacity: .92; letter-spacing: 0; }
.resultat-principal .detail { color: rgba(255,255,255,.93); margin: 0; }

.recommandation, .statistiques, .details-technique {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--rayon-large); padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem; box-shadow: var(--ombre);
}
.recommandation { border-left: 5px solid var(--accent-vif); }
.recommandation h2, .statistiques h2 { margin-top: 0; }

.badge-recommandation {
    display: inline-block; background: var(--accent-clair);
    border: 1.5px solid var(--accent-vif); color: var(--accent-fonce);
    font-weight: 700; font-size: 1.1rem;
    padding: .6rem 1.2rem; border-radius: 999px; margin: 0 0 1rem;
}

.probabilites { list-style: none; padding: 0; margin: .75rem 0 0; }
.probabilites li {
    display: grid; grid-template-columns: 16rem 1fr 4rem;
    gap: .9rem; align-items: center; margin-bottom: .55rem;
}
.barre {
    background: var(--surface-douce); border: 1px solid var(--bordure);
    border-radius: 999px; height: 1rem; overflow: hidden;
}
.remplissage {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--accent-vif), var(--accent));
    border-radius: 999px;
}
.valeur { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.barre-mois {
    display: inline-block; width: 9rem; height: .8rem;
    margin-right: .7rem; vertical-align: middle;
    background: var(--surface-douce); border: 1px solid var(--bordure);
    border-radius: 999px; overflow: hidden;
}

/* Tableaux */
table {
    width: 100%; border-collapse: collapse; background: var(--surface);
    margin-bottom: 1rem; border: 1px solid var(--bordure);
    border-radius: var(--rayon); overflow: hidden;
}
caption { text-align: left; padding: .6rem .2rem .7rem; color: var(--encre-douce); font-size: .9rem; }
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--bordure); }
thead th {
    background: var(--surface-douce); font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--encre-douce);
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
tbody th { font-weight: 600; }
tbody tr:hover { background: #fafbfa; }

.ligne-retenue { background: var(--accent-clair); }
.ligne-retenue th, .ligne-retenue td { font-weight: 700; color: var(--accent-fonce); }
.ligne-retenue th::after {
    content: " ✓ retenu"; color: var(--accent); font-size: .82rem; letter-spacing: .02em;
}

/* Listes de définitions */
.statistiques dl, .details-technique dl {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.25rem; margin: 0;
}
.statistiques dt, .details-technique dt {
    font-size: .82rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--encre-douce);
}
.statistiques dd {
    margin: .3rem 0 0; font-size: 1.35rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--accent);
}
.details-technique dd { margin: .3rem 0 0; font-weight: 600; }
.details-technique summary {
    font-weight: 600; cursor: pointer; color: var(--accent); padding: .2rem 0;
}
.details-technique[open] summary { margin-bottom: .5rem; }
.details-technique dl { margin-top: 1rem; }

/* Connexion */
.page-connexion { max-width: 26rem; margin: 2rem auto 0; }
.page-connexion h1 { text-align: center; }
.page-connexion input { max-width: none; }
.page-connexion .bouton-principal { width: 100%; text-align: center; }

/* Pied de page */
.pied {
    border-top: 1px solid var(--bordure); padding: 1.5rem 0 2rem;
    color: var(--encre-douce); font-size: .875rem; background: var(--surface);
}
.pied a { color: var(--accent); }

/* Écrans étroits */
@media (max-width: 44rem) {
    .conteneur { padding: 0 1rem; }
    fieldset, .statistiques, .details-technique, .recommandation { padding: 1.25rem; }
    .resultat-principal { padding: 1.5rem 1.25rem; }
    .probabilites li { grid-template-columns: 1fr 3.5rem; }
    .probabilites .barre { grid-column: 1 / -1; }
    .entete .conteneur { flex-direction: column; align-items: flex-start; }
    th, td { padding: .65rem .7rem; }
    input[type="number"], input[type="text"], input[type="password"], select { max-width: none; }
}

/* Respect de la préférence système pour les animations réduites. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Graphiques — SVG rendus côté serveur, sans JavaScript
   Teintes validées : #1d7a51 / #b07d00 passent les contrôles de séparation
   pour les trois formes de daltonisme (ΔE 8,8 en protanopie, 22,3 en tritanopie).
   Chaque graphique est doublé d'un tableau, seul support fiable pour les
   lecteurs d'écran.
   -------------------------------------------------------------------------- */

:root {
    --serie-1: #1d7a51;   /* autoconsommée, production */
    --serie-2: #b07d00;   /* surplus */
    --serie-attenuee: #b3bfba;
    --grille: #e3e8e5;
}

.graphique { margin: .5rem 0 1.25rem; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }

.axe { fill: var(--encre-douce); font-size: 11px; }
.axe-ligne { stroke: var(--grille); stroke-width: 1; }
.etiquette-valeur { fill: var(--encre); font-size: 12px; font-weight: 700; }
.etiquette-serie { fill: var(--encre); font-size: 12px; font-weight: 600; }

/* Légende : obligatoire dès deux séries, jamais la couleur seule. */
.legende {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    margin: .25rem 0 .75rem; padding: 0; list-style: none;
    font-size: .9rem;
}
.legende li { display: flex; align-items: center; gap: .5rem; }
.pastille {
    width: .9rem; height: .9rem; border-radius: 3px;
    border: 1px solid rgba(18,24,29,.15); flex-shrink: 0;
}

/* Le tableau reste disponible sous chaque graphique. */
.tableau-repli summary {
    font-size: .9rem; font-weight: 600; color: var(--accent);
    cursor: pointer; padding: .3rem 0;
}
.tableau-repli[open] summary { margin-bottom: .5rem; }