/* Styles des pages publiques intégrées en iframe.
   Toutes les classes sont préfixées « public- » pour qu'aucune règle ne fuie
   sur les pages internes : ce fichier est chargé avec l'entrée « app ».

   Palette et typographie reprises d'energy-citoyennes.org, mesurées sur
   /le-solaire/la-production-en-direct/ : la page vit en iframe au milieu de ce
   site, et tout écart de police ou de couleur s'y verrait comme un encart
   rapporté. Voir « Palette et typographie » dans docs/page-publique.md. */

/* Polices du site, servies par AssetMapper depuis assets/fonts/ plutôt que
   depuis Google Fonts : aucune requête vers un tiers, donc aucune adresse IP de
   visiteur transmise. Ce sont les fichiers variables (un par famille, tous les
   poids), sous licence SIL Open Font License qui autorise l'auto-hébergement.
   Ces deux familles ne sont utilisées que sous .public-body ; les déclarer ici
   ne change donc rien au rendu des pages internes. */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/noto-sans-variable-CSuKL7b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans-variable-30nvAOJ.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.public-body {
    /* Variables portées par .public-body et non par :root : ce fichier est chargé
       sur toutes les pages de l'application, y compris les pages internes, dont la
       palette reste bleue. */
    --public-brand: #db088b;        /* rose de marque : chiffres clés, boutons du site */
    --public-heading: #ff188d;      /* rose des titres de section du site */
    --public-link: #ff00ff;         /* magenta des liens du site */
    --public-text: #333333;
    --public-text-muted: #666666;
    --public-brand-soft: #fdf2f8;        /* rose très clair : fond du bandeau des 12 mois */
    --public-brand-soft-border: #f7d4e8;
    --public-surface: #f7f7f7;
    --public-border: #e6e6e6;

    margin: 0;
    background: #ffffff;
    color: var(--public-text);
    /* Noto Sans pour le corps, Open Sans pour les titres : les deux familles du
       thème WordPress. La pile de repli tient tant que le .woff2 n'est pas arrivé. */
    font-family: 'Noto Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
}

.public-page {
    /* La colonne de contenu du site mesure environ 773 px : au-delà, la page se
       centrerait dans une largeur dont l'iframe ne dispose pas. */
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
}

.public-title,
.public-section-title,
.public-hero-value,
.public-tile-value {
    font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.public-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--public-heading);
    text-align: center;
    margin-bottom: 1.5rem;
}

.public-hero {
    text-align: center;
    margin-bottom: 1.75rem;
}

.public-hero-value {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--public-brand);
    margin: 0;
}

.public-hero-label {
    font-size: 1.05rem;
    color: var(--public-text-muted);
    margin: 0.25rem 0 0;
}

/* Le CO2 reste en gris foncé et gras, comme sur le site, où il apparaît en
   <strong> au fil du texte : trois roses empilés dans le même bloc noieraient
   le chiffre de production qui doit rester le premier lu. */
.public-hero-co2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--public-text);
    margin: 0.6rem 0 0;
}

/* Renvoi vers les sources, sous le bandeau des équivalences. Discret : il répond
   à une question que le lecteur se pose, sans concurrencer les chiffres qui le
   précèdent. Il se serre contre le bandeau et garde ses distances avec le titre
   qui suit — il se rapporte aux conversions du dessus, pas au graphique du
   dessous ; l'espace au-dessus de lui est repris sur la marge du bandeau. */
.public-sources-hint {
    font-size: 0.78rem;
    color: var(--public-text-muted);
    margin: 0 0 1.5rem;
}

.public-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.public-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.9rem 0.5rem;
    background: var(--public-surface);
    border: 1px solid var(--public-border);
    border-radius: 0.6rem;
    text-align: center;
}

.public-tile-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--public-brand);
}

.public-tile-label {
    font-size: 0.8rem;
    color: var(--public-text-muted);
    margin-top: 0.2rem;
}

.public-section {
    margin-bottom: 2rem;
}

.public-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--public-heading);
    margin-bottom: 0.5rem;
}

/* Bandeau des douze derniers mois : le total et ses deux équivalences.

   Sa forme — une bande d'un seul tenant, dont la première cellule est un aplat
   plein — le distingue volontairement des tuiles du parc plus haut, qui alignent
   des chiffres du même ordre. Deux blocs de même allure feraient lire « depuis
   2017 » là où il faut lire « ces 12 derniers mois ».

   La durée est écrite dans le bandeau et non dans un titre de section : le
   graphique qui suit couvre vingt-quatre mois, ces chiffres douze. */
.public-highlight {
    /* Grille et non flex : les trois cellules partagent les mêmes rangées
       (« équivalent à », le chiffre, le libellé) via subgrid. Sans ce partage, la
       première cellule, qui n'a pas de « équivalent à », ferait remonter son chiffre
       d'une ligne et les trois nombres ne s'aligneraient plus entre eux. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    background: var(--public-brand-soft);
    border: 1px solid var(--public-brand-soft-border);
    border-radius: 0.6rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.public-highlight-cell {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    padding: 1rem 0.9rem;
    text-align: center;
}

/* Rangées assignées explicitement : la cellule principale n'ayant que deux enfants,
   son chiffre doit occuper la deuxième rangée et non la première. */
.public-highlight-lead {
    grid-row: 1;
}

.public-highlight-value {
    grid-row: 2;
}

.public-highlight-label {
    grid-row: 3;
}

.public-highlight-cell + .public-highlight-cell {
    border-left: 1px solid var(--public-brand-soft-border);
}

.public-highlight-cell-main {
    background: var(--public-brand);
}

.public-highlight-value {
    display: block;
    font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--public-brand);
}

/* « équivalent à », au-dessus du chiffre : même petite graisse grise que le
   libellé qui le suit, pour que la cellule se lise d'un trait — « équivalent à
   382 foyers alimentés pendant un an » — et non comme une affirmation. */
.public-highlight-lead,
.public-highlight-label {
    font-size: 0.78rem;
    color: var(--public-text-muted);
}

.public-highlight-lead {
    display: block;
    margin-bottom: 0.1rem;
}

.public-highlight-cell-main .public-highlight-value {
    color: #ffffff;
}

.public-highlight-cell-main .public-highlight-label {
    color: rgba(255, 255, 255, 0.9);
}

.public-chart-shell {
    position: relative;
    width: 100%;
    height: 260px;
}

/* Comparaison annuelle : sa légende porte une entrée par année et se replie sur
   plusieurs lignes, qu'il faut loger sans écraser les barres. */
.public-chart-shell-tall {
    height: 360px;
}

.public-note,
.public-latest,
.public-footer {
    font-size: 0.8rem;
    color: var(--public-text-muted);
    margin: 0.5rem 0 0;
}

.public-latest {
    font-size: 1rem;
    color: var(--public-text);
    text-align: center;
    margin-top: 1.5rem;
}

.public-footer {
    text-align: center;
    margin-top: 0.75rem;
}

/* Références des facteurs de conversion : présentes pour qui les cherche,
   assez discrètes pour ne pas concurrencer les chiffres de la page. */
.public-sources {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--public-border);
}

.public-sources-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--public-text-muted);
    margin: 0 0 0.25rem;
}

.public-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--public-text-muted);
}

.public-sources-list a {
    color: var(--public-link);
}

.public-empty {
    text-align: center;
    color: var(--public-text-muted);
    padding: 3rem 0;
}

@media (max-width: 575px) {
    .public-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .public-hero-value {
        font-size: 2rem;
    }

    .public-chart-shell {
        height: 220px;
    }

    /* Trois cellules côte à côte deviennent illisibles sous 575 px : elles
       s'empilent, et le filet de séparation bascule de vertical en horizontal.
       Les rangées partagées n'ont alors plus d'objet — une fois empilées, les
       cellules ne s'alignent plus les unes sur les autres. */
    .public-highlight {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .public-highlight-cell {
        display: block;
        grid-row: auto;
        grid-template-rows: none;
    }

    .public-highlight-cell + .public-highlight-cell {
        border-left: 0;
        border-top: 1px solid var(--public-brand-soft-border);
    }

    /* La légende annuelle occupe davantage de lignes une fois la largeur réduite. */
    .public-chart-shell-tall {
        height: 340px;
    }
}