/* ============================================================
   Styles spécifiques au datapanorama environnement.
   (Le commun — variables, tooltip, barres, radar, jauge, header/footer —
    est dans panorama-commun/css/commun.css, chargé avant ce fichier.)
   ============================================================ */

:root {
    /* Accent rouge de la maquette officielle (remplace le #C7514D du commun, env seulement) */
    --accent: #E85048;
    /* Couleurs par dimension (radar multicolore) */
    --col-circularite: #FBDA6E;
    --col-ges: #457989;
    --col-biodiversite: #6E9E75;
    --col-physique: #4FBBD1;
    --col-sensibilisation: #F78248;
}

/* Corps en Roboto (maquette officielle env) ; le header/footer commun gardent Source Sans Pro */
body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }

h2 { font-size: 1.3rem; margin-top: 1.5rem; }

/* ---- Page plus large (moins de marge) ---- */
.container { max-width: none; padding: 0 2.5rem; }

/* ---- Entête (nom + radar principal) ---- */
.header { display: flex; gap: 2.5rem; align-items: flex-start; }
.header-text { flex: 1; }
.diagram-container { flex: 1; min-width: 500px; background: #fff; padding: 1.25rem 1.5rem; border-radius: 4px; }
#radar-principal { position: relative; height: 320px; max-width: 500px; margin: 0 auto; }

/* ---- Nuage de mots (HTML : mots dimensionnés par le poids, centrés) ---- */
.nuage-mots { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: center; align-items: baseline; text-transform: uppercase; font-family: 'Renner Black', sans-serif; line-height: 1.1; }
.mot { line-height: 1; }

/* ---- Onglets : largeur fixe + fond bleu clair + pilule de score (comme la prod) ---- */
.tabs-container { margin-top: 3rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: none; }
.tab { flex: 0 0 185px; background: #E1EBF2; border-radius: 6px 6px 0 0; padding: 0.85rem 0.75rem; }
.tab:hover, .tab.active { background: #fff; }
.tab-label { font-family: 'Renner Black', sans-serif; text-transform: uppercase; font-size: 0.78rem; line-height: 1.15; margin-bottom: 0.6rem; color: #707070; }
.tab .progress-bar { width: 105px; height: 15px; padding: 1px; border-radius: 10px; background: #c4d2db; margin: 0 auto; }
.tab .progress { height: 100%; border-radius: 10px; }

/* ---- Contenu des onglets (repris du design prod) ---- */
.tab-content-main { display: flex; gap: 3.5rem; align-items: flex-start; }
.img-container { flex: 0 0 375px; text-align: center; }
.dim-img { max-width: 375px; max-height: 310px; width: auto; height: auto; display: inline-block; }
.tab-text { flex: 1; }
/* Titres d'onglet en Renner Black (comme la prod) */
.tab-text h2 { font-family: 'Renner Black', sans-serif; font-size: 1.45rem; margin-top: 0; }
.tab-text h3 { font-family: 'Renner Black', sans-serif; }
/* Jauges : pilules arrondies, libellé À CÔTÉ (flex, centré verticalement) */
.sous-barres { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.25rem; }
.sous-barre { display: flex; align-items: center; gap: 1.1rem; }
.sous-barre .progress-bar { flex: 0 0 115px; height: 15px; padding: 1px; border-radius: 10px; background: #e2ddd4; }
.sous-barre .progress { height: 100%; border-radius: 10px; }
.sous-barre span { font-size: 0.95rem; }
/* Bloc du bas : message + chiffre mis en avant (gros nombre Renner Black rouge) */
.tab-content-footer { margin-top: 2rem; padding: 1.5rem 1.75rem; background: var(--fond); border-radius: 4px; display: flex; gap: 2.5rem; align-items: center; }
.tab-content-footer .italic { flex: 1.6; color: var(--gris); font-size: 1.05rem; }
.chiffre-cle { flex: 1; }
.chiffre-cle .number { font-family: 'Renner Black', sans-serif; color: var(--accent); font-size: 2.8rem; line-height: 1; }
.chiffre-cle .chiffre-texte { display: block; font-weight: 700; color: var(--accent); font-size: 1rem; margin-top: 0.35rem; }
/* Lien vers le document ressource (bouton à icône, sous le bloc du bas) */
.tab-doc { margin-top: 1.1rem; }
.show-document { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent); color: #fff; border-radius: 8px; padding: 0.55rem 1.1rem; font-weight: 600; font-size: 0.95rem; }
.show-document svg { flex: 0 0 auto; }
.show-document:hover { text-decoration: none; background: #b5433f; color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .header { flex-direction: column; }
    .diagram-container { min-width: 0; width: 100%; }
    h1 { font-size: 1.6rem; }
    .tabs { flex-direction: column; border-bottom: none; }
    .tab { border-radius: 4px; }
    .tab-content-main { flex-direction: column; gap: 1rem; }
    .img-container { align-self: center; flex: 0 0 auto; max-width: 100%; }
    .dim-img { max-width: 100%; }
    .tab-content-footer { flex-direction: column; gap: 1rem; align-items: flex-start; }
}