/* ============================================================
   Styles partagés par tous les datapanorama (panorama-commun).
   Chaque panorama charge ce fichier PUIS son CSS spécifique.
   ============================================================ */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap');

/* Police du nuage de mots (reprise de la prod : plus ronde/chaleureuse) */
@font-face {
    font-family: 'Renner Black';
    src: url('../fonts/renner-black.otf') format('opentype');
    font-weight: 900;
    font-display: swap;
}

/* Police de corps des datapanorama (maquette officielle : Roboto) */
@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    --accent: #C7514D;
    --texte: #262531;
    --fond: #f9f7f4;
    --fond-carte: #F0EBE3;
    --gris: #8F8E92;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--texte);
    background: var(--fond);
    line-height: 1.5;
}

h1 { font-size: 2.2rem; color: var(--accent); margin: 0.25rem 0; text-transform: uppercase; font-weight: 900; letter-spacing: 0.02em; }
h2 { color: var(--accent); text-transform: uppercase; }
h3 { color: var(--accent); text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.05em; margin-top: 1.5rem; }
p { margin: 0.5rem 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--accent); }

.container { max-width: 1200px; margin: 2rem auto; padding: 0 1.5rem; }
.title-info { color: var(--gris); font-size: 0.9rem; margin: 0; }
.link { font-size: 0.9rem; margin-top: 0.5rem; }

/* ---- Boutons d'action d'en-tête (voir le général / télécharger le PDF) ---- */
.header-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.1rem; }
.btn-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.15rem; border-radius: 8px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s; }
.btn-action:hover { text-decoration: none; }
.btn-action svg { flex: 0 0 auto; }
.btn-primaire { background: var(--accent); color: #fff; }
.btn-primaire:hover { background: #b5433f; color: #fff; }
.btn-secondaire { background: #fff; color: var(--accent); border: 2px solid var(--accent); padding: calc(0.55rem - 2px) calc(1.15rem - 2px); }
.btn-secondaire:hover { background: var(--accent); color: #fff; }
.bold { font-weight: 700; }
.italic { font-style: italic; }
.error { color: #c00; padding: 2rem; text-align: center; }

/* ---- Barres de progression ---- */
.progress-bar { background: #ddd; height: 8px; border-radius: 4px; overflow: hidden; }
.progress { height: 100%; background: var(--accent); transition: width 0.3s; }

/* ---- Tooltip ---- */
.tooltip {
    position: fixed; background: #fff; border: 2px solid var(--accent); border-radius: 6px;
    padding: 0.5rem 0.85rem; pointer-events: none; opacity: 0; transform: translate(-50%, -100%);
    transition: opacity 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.1); white-space: nowrap; z-index: 1000;
}
.tooltip.visible { opacity: 1; }
.tooltip-label { font-size: 0.75rem; color: var(--gris); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.2rem; }
.tooltip-score { font-size: 1.5rem; font-weight: 900; }

/* ---- Onglets (système partagé ; casse/bordure/marge surchargés par thème) ---- */
.tabs-container { margin-top: 2rem; }
.tabs { display: flex; gap: 0.25rem; }
.tab { flex: 1; padding: 1rem; cursor: pointer; background: var(--fond-carte); border-radius: 4px 4px 0 0; text-align: center; transition: background 0.2s; }
.tab:hover { background: #e5e0d8; }
.tab.active { background: #fff; font-weight: 700; }
.tab-content { display: none; background: #fff; padding: 2rem; border-radius: 0 0 4px 4px; }
.tab-content.show { display: block; }
.progress-bar[data-tt-label] { cursor: pointer; }

/* ---- Header / footer maison (habillage.js) — repro du header communemesure.fr ---- */
.site-header {
    background: var(--fond); border-bottom: 1px solid #e7e2da;
    position: sticky; top: 0; z-index: 100;
    font-family: 'Source Sans Pro', sans-serif;
}
.site-header-inner {
    padding: 0.5rem 2rem;
    display: flex; align-items: center; gap: 2rem; min-height: 80px;
}
.site-logo img { height: 54px; display: block; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem; }
.site-nav li { position: relative; }
.site-nav a { color: #413f4b; font-size: 1.05rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; }
.site-nav a:hover { color: #e85048; text-decoration: none; }
.site-nav .no-link { cursor: default; }
.site-nav .caret { font-size: 0.65rem; }
.site-nav .sub {
    position: absolute; top: 100%; right: 0; left: auto; min-width: 235px;
    background: #fff; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    padding: 0.35rem 0; display: none; flex-direction: column;
}
.site-nav .has-sub:hover .sub { display: flex; }
.site-nav .sub a { padding: 0.55rem 1.1rem; font-weight: 600; white-space: nowrap; }
.site-nav .sub a:hover { background: #f9f7f4; color: #e85048; }
.site-burger { display: none; margin-left: auto; background: none; border: none; font-size: 1.6rem; color: #e85048; cursor: pointer; }

.site-footer { margin-top: 4rem; background: #413f4b; color: rgba(255,255,255,0.82); font-family: 'Source Sans Pro', sans-serif; }
.site-footer-inner { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.site-footer-top { display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; justify-content: space-between; }
.site-footer-brand { flex: 1 1 380px; max-width: 540px; }
.site-footer-logo { height: 46px; margin-bottom: 0.85rem; display: block; }
.site-footer-desc { font-size: 0.92rem; color: rgba(255,255,255,0.68); line-height: 1.55; margin: 0; }
.site-footer-cols { display: flex; gap: 3rem; }
.site-footer-col { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer-title { font-weight: 700; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; color: #fff; margin-bottom: 0.35rem; }
.site-footer a { color: rgba(255,255,255,0.8); font-size: 0.9rem; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer-partenaires { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 2rem; padding: 1.25rem 1.5rem; background: #fff; border-radius: 8px; }
.site-footer-partenaires img { height: 40px; width: auto; }
@media (max-width: 700px) {
    .site-footer-cols { gap: 2rem; }
    .site-footer-partenaires { gap: 1.25rem; }
    .site-footer-partenaires img { height: 32px; }
}

@media (max-width: 980px) {
    .site-burger { display: block; }
    .site-nav { display: none; width: 100%; margin: 0.5rem 0 0; }
    .site-nav.open { display: block; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav li { border-top: 1px solid #f0ece6; }
    .site-nav a { padding: 0.6rem 0.2rem; }
    .site-nav .sub { position: static; display: flex; box-shadow: none; padding: 0 0 0.3rem 1rem; min-width: 0; }
    .site-header-inner { flex-wrap: wrap; min-height: 0; }
}