/* ==========================================================================
   ONPG — Charte graphique / Design tokens (version couleurs vives)
   Couleurs dérivées des 4 quadrants du logo (O-N-P-G)
   ========================================================================== */
:root{
  --onpg-vert:        #1DA34C;  /* P — primaire, vif : nav active, boutons, positif */
  --onpg-vert-fonce:  #16803B;
  --onpg-vert-clair:  #E4F5EA;
  --onpg-orange:      #E8630F;  /* O — vif : graphiques, carte, accents forts */
  --onpg-orange-fonce:#C24E08;
  --onpg-orange-clair:#FDE9DB;
  --onpg-violet:      #6B4E76;  /* G — secondaire, accents ponctuels */
  --onpg-violet-clair:#F0EAF2;
  --onpg-terracotta:  #E8630F;  /* alerte / signalement — même famille que l'orange */
  --onpg-terracotta-fonce:#C24E08;
  --onpg-bleu:        #10233F;  /* Bleu marine institutionnel — rigueur, veille statistique, confiance étatique */
  --onpg-gris:        #6E6E72;
  --onpg-gris-clair:  #EDEEEC;

  --fond:             #FFFFFF;
  --fond-doux:        #F5F6F4;
  --bordure:          #E2E3E0;
  --encre:            #17181C;
  --encre-douce:      #56585C;

  --police-titre: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --police-texte: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  --rayon: 8px;
  --rayon-petit: 6px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--police-texte);
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  border-top: 5px solid var(--onpg-vert);
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3{ font-family: var(--police-titre); margin:0; color: var(--encre); }
:focus-visible{ outline: 2px solid var(--onpg-vert); outline-offset: 2px; }

.conteneur{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Bandeau marque (logo + contact + réseaux + signalement) ---------- */
.barre-marque{ background: var(--fond); border-bottom:1px solid var(--bordure); }
.barre-marque .conteneur{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-top:14px; padding-bottom:14px; flex-wrap:wrap;
}
.marque{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.marque img{ width:46px; height:46px; }
.marque .texte-marque{ line-height:1.2; }
.marque .texte-marque strong{
  display:block; font-family: var(--police-titre); font-weight:800;
  font-size:1.05rem; color: var(--encre); letter-spacing:.2px;
}
.marque .texte-marque span{
  display:block; font-size:0.7rem; color: var(--encre-douce); max-width:320px;
}
.bloc-droit-marque{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.contact-inline{ display:flex; gap:20px; }
.contact-inline a{ display:flex; align-items:center; gap:7px; font-size:0.84rem; font-weight:600; color:var(--encre-douce); }
.contact-inline a:hover{ color:var(--onpg-vert); }
.contact-inline svg{ width:16px; height:16px; color:var(--onpg-vert); flex-shrink:0; }
.reseaux{ display:flex; gap:10px; }
.reseaux a{
  width:30px; height:30px; border-radius:50%; background:var(--fond-doux);
  display:flex; align-items:center; justify-content:center; color:var(--encre-douce);
}
.reseaux a:hover{ background:var(--onpg-vert-clair); color:var(--onpg-vert-fonce); }
.reseaux svg{ width:14px; height:14px; }

.bouton-signalement{
  display:flex; align-items:center; gap:8px;
  background: var(--onpg-orange); color:#fff;
  padding: 11px 18px; border-radius: 30px;
  font-size:0.85rem; font-weight:700; white-space:nowrap; flex-shrink:0;
}
.bouton-signalement:hover{ background: var(--onpg-orange-fonce); }
.bouton-signalement svg{ width:15px; height:15px; }

.bouton-menu-mobile{ display:none; background:none; border:none; padding:8px; flex-shrink:0; }
.bouton-menu-mobile svg{ width:24px; height:24px; color:var(--encre); }

/* ---------- Navigation ---------- */
.entete{ position: sticky; top:0; background: var(--fond); z-index: 40; border-bottom:1px solid var(--bordure); }
.entete .conteneur{ display:flex; align-items:center; height:56px; }
nav.principale{ flex:1; }
nav.principale > ul{
  list-style:none; display:flex; align-items:center; gap: 4px;
  margin:0; padding:0; justify-content:center;
}
nav.principale > ul > li{ position:relative; }
nav.principale > ul > li > a,
nav.principale > ul > li > button.lien-nav{
  display:flex; align-items:center; gap:5px;
  padding: 9px 16px; font-size: 0.88rem; font-weight:600;
  color: var(--encre-douce); border:none; background:none; border-radius: 30px;
}
nav.principale > ul > li > a:hover,
nav.principale > ul > li > button.lien-nav:hover{ color: var(--onpg-vert); }
nav.principale > ul > li.actif > a{
  color: #fff; background: var(--onpg-vert); font-weight:700;
}
nav.principale .chevron{ width:9px; height:9px; }

.sous-menu{
  position:absolute; top: calc(100% + 6px); left:0; min-width: 240px;
  background: var(--fond); border:1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: 0 8px 20px rgba(23,24,28,.1); padding:8px; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
li.a-sous-menu:hover > .sous-menu,
li.a-sous-menu.ouvert > .sous-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.sous-menu li a{ display:block; padding:9px 12px; font-size:0.86rem; border-radius: var(--rayon-petit); color: var(--encre-douce); }
.sous-menu li a:hover{ background: var(--fond-doux); color:var(--onpg-vert); }

/* ---------- Bandeau titre page ---------- */
.bandeau-page{
  background: linear-gradient(120deg, var(--onpg-vert-fonce), var(--onpg-vert) 55%, var(--onpg-violet));
  padding: 26px 0 28px;
}
.bandeau-page h1{ font-size: 1.7rem; font-weight:800; color:#fff; }
.bandeau-page p{ margin: 6px 0 0; color: rgba(255,255,255,.88); font-size: 0.95rem; }
.bandeau-page p .maj{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.bandeau-page .fil-ariane{ color: rgba(255,255,255,.75); }
.bandeau-page .fil-ariane a{ color: rgba(255,255,255,.75); }
.bandeau-page .fil-ariane a:hover{ color:#fff; }
.bandeau-page .fil-ariane .actuel{ color:#fff; }

/* ---------- Filtres ---------- */
.barre-filtres{
  display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; flex-wrap:wrap;
  padding: 16px 18px; border:1px solid var(--bordure); border-radius: var(--rayon); background:var(--fond);
}
.groupe-filtres{ display:flex; gap:18px; flex-wrap:wrap; }
.champ-filtre{ display:flex; flex-direction:column; gap:5px; }
.champ-filtre label{
  font-size:0.68rem; font-weight:800; color: var(--onpg-orange); text-transform:uppercase; letter-spacing:.4px;
}
select.filtre{
  appearance:none; -webkit-appearance:none;
  border: 1px solid var(--bordure);
  background: var(--fond) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0' fill='%236E6E72'/></svg>") no-repeat right 12px center;
  background-size: 10px 6px;
  padding: 8px 30px 8px 12px; border-radius: var(--rayon-petit); font-size: 0.85rem; color: var(--encre); min-width: 148px;
}
.groupe-export{ display:flex; align-items:flex-end; gap:8px; }
.groupe-export span{ font-size:0.68rem; font-weight:800; color:var(--onpg-orange); text-transform:uppercase; letter-spacing:.4px; margin-right:2px; align-self:center; }
.bouton-export{
  display:flex; align-items:center; gap:6px;
  border: 1.5px solid var(--onpg-vert); background: var(--fond); color:var(--onpg-vert-fonce);
  padding: 7px 14px; border-radius: 30px; font-size: 0.8rem; font-weight:700;
}
.bouton-export:hover{ background: var(--onpg-vert); color:#fff; }
  font-size: 0.82rem;
  font-weight:600;
  color: var(--encre-douce);
}
.bouton-export:hover{ border-color: var(--onpg-vert); color: var(--onpg-vert); }
.bouton-export svg{ width:14px; height:14px; }

/* bouton filtres mobile */
.bouton-filtres-mobile{
  display:none;
  width:100%;
  align-items:center;
  justify-content:space-between;
  background: var(--fond);
  border:1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 11px 14px;
  font-weight:600;
  font-size:0.88rem;
  color: var(--encre);
}
.panneau-filtres-mobile{ display:none; }
.panneau-filtres-mobile.ouvert{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.panneau-filtres-mobile select.filtre{ width:100%; }

/* ---------- Section générique ---------- */
.section{ padding: 28px 0; }
.section-titre{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:16px;
}
.section-titre h2{ font-size:1.05rem; font-weight:700; }
.section-titre .source-maj{ font-size:0.76rem; color:var(--onpg-gris); }

/* ---------- Indicateurs clés (KPI) ---------- */
.grille-kpi{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.carte-kpi{
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--kpi-couleur, var(--onpg-vert));
  border-radius: var(--rayon);
  padding: 18px 18px 16px;
  background: var(--fond);
}
.carte-kpi .valeur{
  font-family: var(--police-titre);
  font-size: 2rem;
  font-weight:700;
  color: var(--encre);
  line-height:1;
}
.carte-kpi .libelle{
  margin-top:6px;
  font-size:0.85rem;
  color: var(--encre-douce);
  line-height:1.35;
}
.carte-kpi .rubrique{
  display:inline-block;
  margin-top:10px;
  font-size:0.72rem;
  font-weight:600;
  color: var(--kpi-couleur, var(--onpg-vert));
  background: var(--kpi-fond, var(--onpg-vert-clair));
  padding: 3px 9px;
  border-radius: 20px;
}

/* ---------- Graphiques ---------- */
.grille-graphiques{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:16px;
}
.panneau{
  border:1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 20px;
  background: var(--fond);
}
.panneau h3{ font-size:0.95rem; font-weight:700; margin-bottom:4px; }
.panneau .sous-titre{ font-size:0.8rem; color:var(--encre-douce); margin-bottom:18px; }

/* barres */
.barres{ display:flex; flex-direction:column; gap:14px; }
.barre-ligne{ display:grid; grid-template-columns: 150px 1fr 42px; align-items:center; gap:10px; }
.barre-ligne .nom{ font-size:0.83rem; color:var(--encre-douce); }
.barre-fond{ background: var(--fond-doux); border-radius:20px; height:10px; overflow:hidden; }
.barre-remplie{ height:100%; border-radius:20px; background: var(--onpg-vert); }
.barre-ligne .val{ font-size:0.83rem; font-weight:700; text-align:right; }

/* donut */
.bloc-donut{ display:flex; align-items:center; gap:22px; }
.donut{
  width:150px; height:150px; border-radius:50%; flex-shrink:0;
  background: conic-gradient(
    var(--onpg-terracotta) 0% 38%,
    var(--onpg-violet) 38% 67%,
    var(--onpg-vert) 67% 85%,
    var(--onpg-gris-clair) 85% 100%);
  position:relative;
}
.donut::after{
  content:"";
  position:absolute; inset:22px;
  background: var(--fond);
  border-radius:50%;
}
.legende-donut{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.legende-donut li{ display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--encre-douce); }
.legende-donut .puce{ width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ligne / courbe */
.courbe-conteneur{ width:100%; }
.courbe-conteneur svg{ width:100%; height:auto; display:block; }
.axe-mois{ display:flex; justify-content:space-between; margin-top:8px; font-size:0.76rem; color:var(--onpg-gris); }

/* carte régions (schématique) */
.grille-carte-tableau{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:16px;
}
.carte-regions{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.region{
  border-radius: var(--rayon-petit);
  padding: 12px 10px;
  color:#fff;
  font-size:0.72rem;
  font-weight:700;
  min-height:58px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.region .valeur-region{ font-size:1rem; font-family:var(--police-titre); }
.region.vide{ visibility:hidden; }
.legende-carte{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:0.74rem; color:var(--onpg-gris); }
.legende-carte .degrade-legende{
  width:90px; height:8px; border-radius:20px;
  background: linear-gradient(to right, #F6D9C2, #F0954C, #E8630F);
}

/* tableau */
.enveloppe-tableau{ overflow-x:auto; }
table.donnees{
  width:100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
table.donnees th{
  text-align:left;
  padding: 11px 12px;
  background: var(--onpg-bleu);
  color: #fff;
  font-weight:700;
  font-size:0.76rem;
  white-space:nowrap;
}
table.donnees td{
  padding: 10px 12px;
  border-bottom:1px solid var(--bordure);
  color: var(--encre);
  white-space:nowrap;
}
table.donnees tr:last-child td{ border-bottom:none; }

/* ---------- Pied de page ---------- */
footer.pied{
  background: var(--onpg-bleu);
  color:#C7CBD3;
  margin-top: 24px;
  border-top: 5px solid var(--onpg-vert);
}
footer.pied .conteneur{
  padding: 34px 24px 22px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
}
footer.pied h4{
  color:#fff;
  font-family: var(--police-titre);
  font-size:0.88rem;
  margin:0 0 12px;
}
footer.pied h4.titre-onpg{ color: var(--onpg-orange); font-size:1.1rem; font-weight:800; }
footer.pied p{ font-size:0.82rem; line-height:1.6; color:#A9AEB8; margin:0; }
footer.pied ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
footer.pied ul a{ font-size:0.83rem; color:#C7CBD3; }
footer.pied ul a:hover{ color:#fff; }
footer.pied .reseaux a{ background:rgba(255,255,255,.08); color:#fff; }
footer.pied .reseaux a:hover{ background: var(--onpg-vert); }
.lien-footer-signalement{
  display:inline-block; margin-top:10px; background:var(--onpg-orange); color:#fff;
  font-size:0.8rem; font-weight:700; padding:8px 14px; border-radius:30px;
}
.lien-footer-signalement:hover{ background:var(--onpg-orange-fonce); }
.pied-bas{
  border-top:1px solid #23324A;
  text-align:center;
  padding: 14px;
  font-size:0.76rem;
  color:#8C8D90;
}

/* ==========================================================================
   Composants partagés additionnels
   ========================================================================== */

/* Emblème (placeholder) à côté du logo */
.emblazon{
  width:34px; height:34px; border-radius:50%;
  background: var(--fond-doux);
  border:1px solid var(--bordure);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.emblazon svg{ width:20px; height:20px; color: var(--onpg-gris); }

/* Fil d'Ariane */
.fil-ariane{
  font-size:0.8rem;
  color: var(--onpg-gris);
  margin-bottom:10px;
}
.fil-ariane a{ color: var(--onpg-gris); }
.fil-ariane a:hover{ color: var(--onpg-vert); }
.fil-ariane .sep{ margin:0 6px; opacity:.6; }
.fil-ariane .actuel{ color: var(--encre); font-weight:600; }

/* Tendance sur les KPI */
.tendance{
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.76rem; font-weight:700; margin-top:8px;
}
.tendance.hausse{ color:#1F7A4D; }
.tendance.baisse{ color:#9C3609; }
.tendance svg{ width:11px; height:11px; }
.carte-kpi .ligne-bas{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* Chips de filtres actifs (mobile) */
.chips-filtres{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  display:flex; align-items:center; gap:6px;
  background: var(--onpg-vert-clair);
  color: var(--onpg-vert-fonce);
  font-size:0.78rem; font-weight:600;
  padding:6px 10px;
  border-radius: 20px;
}
.chip button{ background:none; border:none; color:inherit; font-size:0.9rem; line-height:1; padding:0; }

/* Bannière PWA (mobile) */
.banniere-pwa{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background: var(--fond-doux);
  border:1px solid var(--bordure);
  border-radius: var(--rayon);
  padding:16px;
  margin: 20px 0;
}
.banniere-pwa .texte-pwa strong{ display:block; font-size:0.9rem; margin-bottom:2px; }
.banniere-pwa .texte-pwa span{ font-size:0.78rem; color:var(--encre-douce); }
.bouton-primaire{
  background: var(--onpg-vert); color:#fff; border:none;
  padding:9px 16px; border-radius: var(--rayon-petit); font-size:0.82rem; font-weight:700;
  white-space:nowrap; flex-shrink:0;
}
.bouton-primaire:hover{ background: var(--onpg-vert-fonce); }
.bouton-secondaire{
  background:#fff; color:var(--onpg-vert); border:1px solid var(--onpg-vert);
  padding:9px 16px; border-radius: var(--rayon-petit); font-size:0.82rem; font-weight:700;
}
.bouton-secondaire:hover{ background: var(--onpg-vert-clair); }
.bouton-alerte{
  background: var(--onpg-terracotta); color:#fff; border:none;
  padding:12px 20px; border-radius: var(--rayon-petit); font-size:0.9rem; font-weight:700;
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
}
.bouton-alerte:hover{ background: var(--onpg-terracotta-fonce); }

/* Note / avertissement */
.note-avertissement{
  font-size:0.78rem; color: var(--onpg-gris); font-style:italic;
  border-top:1px solid var(--bordure); padding-top:14px; margin-top:22px;
}

/* Onglets (segmented control) */
.onglets{
  display:flex; gap:4px; border-bottom:1px solid var(--bordure);
  margin-bottom:22px; flex-wrap:wrap;
}
.onglets a, .onglets button{
  padding:11px 16px; font-size:0.88rem; font-weight:600; color:var(--encre-douce);
  border:none; background:none; white-space:nowrap; border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.onglets a.actif, .onglets button.actif{ color:var(--onpg-vert); border-bottom-color:var(--onpg-vert); }

/* Pastilles de catégorie (actualités) */
.pastilles-categories{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.pastille-cat{
  padding:7px 14px; border-radius:20px; font-size:0.8rem; font-weight:600;
  border:1px solid var(--bordure); color:var(--encre-douce); background:#fff;
}
.pastille-cat.actif{ background:var(--onpg-vert); border-color:var(--onpg-vert); color:#fff; }

/* Cartes génériques (actualités, ressources, médias) */
.grille-cartes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.carte{
  border:1px solid var(--bordure); border-radius:var(--rayon); overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
}
.carte .vignette{
  height:140px; background: linear-gradient(135deg, var(--onpg-vert-clair), var(--onpg-violet-clair));
  display:flex; align-items:center; justify-content:center; color:var(--onpg-gris);
}
.carte .vignette svg{ width:34px; height:34px; }
.carte .corps{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.etiquette-cat{
  align-self:flex-start; font-size:0.7rem; font-weight:700; text-transform:none;
  color:var(--onpg-violet); background:var(--onpg-violet-clair); padding:3px 9px; border-radius:20px;
}
.carte h3{ font-size:0.98rem; line-height:1.35; }
.carte .meta{ font-size:0.78rem; color:var(--onpg-gris); }
.carte p.extrait{ font-size:0.85rem; color:var(--encre-douce); line-height:1.5; margin:0; }
.carte .bas-carte{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:6px; }
.lien-discret{ font-size:0.85rem; font-weight:700; color:var(--onpg-vert); }
.lien-discret:hover{ text-decoration:underline; }

/* Pagination */
.pagination{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:28px; }
.pagination a, .pagination span{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius: var(--rayon-petit); font-size:0.85rem; color:var(--encre-douce); border:1px solid transparent;
}
.pagination a:hover{ border-color:var(--bordure); }
.pagination .actif{ background:var(--onpg-vert); color:#fff; font-weight:700; }

/* Barre de recherche + filtres (ressources) */
.barre-recherche{
  display:flex; gap:10px; align-items:center; flex:1;
  border:1px solid var(--bordure); border-radius:var(--rayon-petit); padding:9px 14px; background:#fff;
}
.barre-recherche svg{ width:16px; height:16px; color:var(--onpg-gris); flex-shrink:0; }
.barre-recherche input{ border:none; outline:none; font-size:0.86rem; width:100%; font-family:inherit; }

/* Liste de documents */
.liste-documents{ display:flex; flex-direction:column; gap:10px; }
.ligne-document{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--bordure); border-radius:var(--rayon); padding:14px 16px; background:#fff;
}
.ligne-document .icone-doc{
  width:40px; height:40px; border-radius:var(--rayon-petit); background:var(--onpg-vert-clair);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--onpg-vert-fonce);
}
.ligne-document .icone-doc svg{ width:20px; height:20px; }
.ligne-document .infos-doc{ flex:1; min-width:0; }
.ligne-document .infos-doc h4{ font-size:0.9rem; margin:0 0 3px; font-family:var(--police-titre); }
.ligne-document .infos-doc .meta-doc{ font-size:0.78rem; color:var(--onpg-gris); }
.ligne-document .action-doc{ flex-shrink:0; }

/* Organigramme simplifié */
.organigramme{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.orga-noeud{
  background:var(--onpg-vert); color:#fff; padding:12px 20px; border-radius:var(--rayon-petit);
  font-weight:700; font-size:0.88rem; text-align:center;
}
.orga-noeud.secondaire{ background:var(--onpg-violet); }
.orga-ligne{ width:1px; height:20px; background:var(--bordure); }
.orga-enfants{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; max-width:820px; }
.orga-enfant{
  border:1px solid var(--bordure); border-radius:var(--rayon-petit); padding:12px; text-align:center;
  font-size:0.82rem; color:var(--encre-douce); background:#fff;
}

/* Grille domaines d'intervention */
.grille-domaines{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.domaine-tuile{
  border:1px solid var(--bordure); border-radius:var(--rayon); padding:18px 14px; text-align:center; background:#fff;
}
.domaine-tuile .pastille-icone{
  width:44px; height:44px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;
}
.domaine-tuile .pastille-icone svg{ width:22px; height:22px; color:#fff; }
.domaine-tuile h4{ font-size:0.85rem; font-family:var(--police-titre); }

/* Grille médiathèque */
.grille-medias{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.media-tuile{ position:relative; border-radius:var(--rayon); overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--onpg-vert-clair), var(--onpg-violet-clair)); }
.media-tuile .legende-media{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  background:linear-gradient(to top, rgba(20,21,24,.75), transparent);
  color:#fff; font-size:0.78rem; font-weight:600;
}
.media-tuile .icone-lecture{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.media-tuile .icone-lecture svg{ width:36px; height:36px; color:#fff; opacity:.9; }

/* Lecteur audio (témoignages) */
.carte-audio{ border:1px solid var(--bordure); border-radius:var(--rayon); padding:16px; background:#fff; }
.carte-audio h4{ font-size:0.92rem; margin-bottom:4px; }
.carte-audio .meta-audio{ font-size:0.78rem; color:var(--onpg-gris); margin-bottom:12px; }
.barre-lecteur{ display:flex; align-items:center; gap:12px; }
.barre-lecteur button{
  width:34px; height:34px; border-radius:50%; background:var(--onpg-vert); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.barre-lecteur button svg{ width:14px; height:14px; }
.piste-audio{ flex:1; height:5px; background:var(--fond-doux); border-radius:20px; position:relative; }
.piste-audio::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:35%; background:var(--onpg-vert); border-radius:20px; }
.duree-audio{ font-size:0.76rem; color:var(--onpg-gris); flex-shrink:0; }
.lien-transcription{ font-size:0.8rem; font-weight:600; color:var(--onpg-violet); margin-top:12px; display:inline-block; }

/* Sondages / débats */
.carte-sondage{ border:1px solid var(--bordure); border-radius:var(--rayon); padding:18px; background:#fff; }
.carte-sondage h4{ font-size:0.95rem; margin-bottom:4px; }
.carte-sondage .meta-sondage{ font-size:0.78rem; color:var(--onpg-gris); margin-bottom:14px; }
.option-sondage{ margin-bottom:10px; }
.option-sondage .ligne-option{ display:flex; justify-content:space-between; font-size:0.83rem; margin-bottom:5px; }
.option-sondage .barre-fond{ height:8px; }
.option-sondage .barre-remplie{ background:var(--onpg-violet); }

/* Badges de statut (conventions) */
.badge-statut{ font-size:0.74rem; font-weight:700; padding:4px 10px; border-radius:20px; display:inline-block; }
.badge-statut.en-cours{ background:#E7F2EC; color:#1F7A4D; }
.badge-statut.attente{ background:#F3EAD9; color:#8A5A00; }
.badge-statut.echue{ background:#FBEAE2; color:#9C3609; }
.badge-statut.renouvelee{ background:#F0EAF2; color:#6B4E76; }

/* Formulaires */
.champ{ margin-bottom:16px; }
.champ label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; color:var(--encre); }
.champ input[type=text], .champ input[type=email], .champ input[type=tel], .champ select, .champ textarea{
  width:100%; border:1px solid var(--bordure); border-radius:var(--rayon-petit); padding:11px 13px;
  font-family:inherit; font-size:0.88rem; color:var(--encre); background:#fff;
}
.champ textarea{ resize:vertical; min-height:110px; }
.champ-case{ display:flex; align-items:flex-start; gap:9px; font-size:0.85rem; color:var(--encre-douce); }
.champ-fichier{
  border:1.5px dashed var(--bordure); border-radius:var(--rayon); padding:20px; text-align:center;
  font-size:0.83rem; color:var(--onpg-gris);
}
.encart-info{
  background: var(--onpg-vert-clair); border:1px solid #cfe6da; border-radius:var(--rayon);
  padding:16px; font-size:0.85rem; color:var(--onpg-vert-fonce); line-height:1.55;
}
.encart-urgence{
  background:#FBEAE2; border:1px solid #f0c9b6; border-radius:var(--rayon);
  padding:14px 16px; font-size:0.83rem; color:#7A2B07; line-height:1.5; margin-bottom:20px;
}
.etapes-suivi{ display:flex; flex-direction:column; gap:16px; }
.etape-suivi{ display:flex; gap:12px; }
.etape-suivi .puce-etape{
  width:26px; height:26px; border-radius:50%; background:var(--onpg-vert); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:0.76rem; font-weight:700; flex-shrink:0;
}
.etape-suivi h5{ font-size:0.86rem; margin:0 0 3px; }
.etape-suivi p{ font-size:0.8rem; color:var(--encre-douce); margin:0; }

/* Deux colonnes générique */
.deux-colonnes{ display:grid; grid-template-columns:1.4fr 1fr; gap:24px; }

/* Bandeau hero (accueil) */
.hero{
  background: linear-gradient(120deg, var(--onpg-vert-fonce), var(--onpg-vert) 55%, var(--onpg-violet));
  color:#fff; padding:52px 0;
}
.hero h1{ color:#fff; font-size:2rem; max-width:640px; }
.hero p{ color:rgba(255,255,255,.88); max-width:560px; margin-top:10px; font-size:1rem; }
.hero .actions-hero{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.hero .bouton-primaire{ background:#fff; color:var(--onpg-vert-fonce); }
.hero .bouton-primaire:hover{ background:#EAF3EE; }
.hero .bouton-ghost{
  border:1.5px solid rgba(255,255,255,.6); color:#fff; padding:9px 16px; border-radius:var(--rayon-petit);
  font-size:0.86rem; font-weight:700;
}
.hero .bouton-ghost:hover{ background:rgba(255,255,255,.12); }

.citation-directrice{
  border-left:4px solid var(--onpg-violet); background:var(--fond-doux); border-radius:0 var(--rayon) var(--rayon) 0;
  padding:20px 22px; font-style:italic; color:var(--encre-douce); font-size:0.95rem;
}
.citation-directrice footer{ margin-top:10px; font-style:normal; font-weight:700; color:var(--encre); font-size:0.85rem; background:none; }

.carte-portrait{
  border:1px solid var(--bordure); border-radius:var(--rayon); padding:20px; text-align:center; background:#fff;
  display:flex; flex-direction:column; align-items:center; height:fit-content;
}
.carte-portrait .photo-portrait{
  width:100%; aspect-ratio:4/3; border-radius:var(--rayon-petit); margin-bottom:14px;
  background:linear-gradient(135deg, var(--onpg-vert-clair), var(--onpg-orange-clair));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--onpg-gris);
}
.carte-portrait .photo-portrait svg{ width:44px; height:44px; }
.carte-portrait .photo-portrait span{ font-size:0.74rem; font-weight:600; }
.carte-portrait strong{ font-family:var(--police-titre); font-size:0.92rem; }
.carte-portrait .fonction-portrait{ font-size:0.78rem; color:var(--encre-douce); margin-top:3px; }

.grille-acces-rapides{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.acces-rapide{
  border:1px solid var(--bordure); border-radius:var(--rayon); padding:18px; text-align:center; background:#fff;
}
.acces-rapide .pastille-icone{ width:42px; height:42px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; background:var(--onpg-vert-clair); }
.acces-rapide .pastille-icone svg{ width:20px; height:20px; color:var(--onpg-vert-fonce); }
.acces-rapide h4{ font-size:0.85rem; }

/* ==========================================================================
   Responsive — mobile (< 900px)
   ========================================================================== */
@media (max-width: 900px){
  .conteneur{ padding: 0 16px; }
  .barre-utilitaire .conteneur{ height:auto; padding-top:6px; padding-bottom:6px; }
  .barre-utilitaire .texte-etat{ display:none; }

  nav.principale{
    position:fixed;
    top: 62px; right:0; bottom:0; left:0;
    background: var(--fond);
    transform: translateX(100%);
    transition: transform .22s ease;
    overflow-y:auto;
    padding: 10px 0 30px;
  }
  nav.principale.ouvert{ transform: translateX(0); }
  nav.principale > ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  nav.principale > ul > li > a,
  nav.principale > ul > li > button.lien-nav{
    width:100%;
    justify-content:space-between;
    padding: 15px 20px;
    font-size:1rem;
    border-radius:0;
    border-bottom: 1px solid var(--bordure);
  }
  .sous-menu{
    position:static;
    box-shadow:none;
    border:none;
    border-radius:0;
    background: var(--fond-doux);
    display:none;
    opacity:1; visibility:visible; transform:none;
  }
  li.a-sous-menu.ouvert .sous-menu{ display:block; }
  .marque .texte-marque span{ display:none; }
  .bloc-droit-marque{ width:100%; justify-content:space-between; }
  .bouton-menu-mobile{ display:block; }
  .bouton-signalement span{ display:none; }
  .bouton-signalement{ padding:10px; }

  .barre-filtres{ flex-direction:column; align-items:stretch; }
  .groupe-filtres{ display:none; }
  .bouton-filtres-mobile{ display:flex; }
  .groupe-export{ justify-content:space-between; width:100%; }
  .bouton-export span{ display:none; }

  .grille-kpi{ grid-template-columns: repeat(2, 1fr); }
  .carte-kpi .valeur{ font-size:1.5rem; }
  .grille-graphiques{ grid-template-columns: 1fr; }
  .bloc-donut{ flex-direction:column; align-items:flex-start; }
  .grille-carte-tableau{ grid-template-columns: 1fr; }
  .barre-ligne{ grid-template-columns: 96px 1fr 36px; }

  footer.pied .conteneur{ grid-template-columns: 1fr 1fr; }

  .banniere-pwa{ display:flex; flex-direction:column; align-items:stretch; text-align:left; }
  .banniere-pwa .bouton-primaire{ width:100%; }
  .grille-cartes{ grid-template-columns:1fr 1fr; }
  .grille-domaines{ grid-template-columns:repeat(2,1fr); }
  .grille-medias{ grid-template-columns:repeat(2,1fr); }
  .grille-acces-rapides{ grid-template-columns:1fr 1fr; }
  .orga-enfants{ grid-template-columns:repeat(2,1fr); }
  .deux-colonnes{ grid-template-columns:1fr; }
  .hero h1{ font-size:1.5rem; }
  .hero{ padding:34px 0; }
  .onglets{ flex-wrap:nowrap; overflow-x:auto; }
}

@media (max-width: 520px){
  .grille-kpi{ grid-template-columns: 1fr 1fr; }
  footer.pied .conteneur{ grid-template-columns: 1fr; }
  .grille-cartes{ grid-template-columns:1fr; }
  .grille-domaines{ grid-template-columns:1fr 1fr; }
  .grille-medias{ grid-template-columns:1fr 1fr; }
  .grille-acces-rapides{ grid-template-columns:1fr 1fr; }
}

/* ===== Onglets Elementor natifs (widget « Tabs ») — même rendu que la charte ===== */
.onpg-onglets .elementor-tabs-wrapper{ display:flex; flex-wrap:wrap; gap:4px; width:100%; border-bottom:2px solid var(--bordure,#DADBD8); margin-bottom:0; }
.onpg-onglets .elementor-tab-title{ padding:14px 22px; margin:0 0 -2px; font-family:var(--police-titre,'Manrope',sans-serif); font-weight:700; font-size:.95rem; color:var(--onpg-gris,#6E6E72); background:none; border:0; border-bottom:3px solid transparent; cursor:pointer; }
.onpg-onglets .elementor-tab-title a{ color:inherit; }
.onpg-onglets .elementor-tab-title:hover{ color:var(--onpg-vert,#1DA34C); }
.onpg-onglets .elementor-tab-title.elementor-active{ color:var(--onpg-vert,#1DA34C); border-bottom-color:var(--onpg-vert,#1DA34C); }
.onpg-onglets .elementor-tabs-content-wrapper{ border:0; }
.onpg-onglets .elementor-tab-content{ padding:28px 0 8px; border:0; }
.onpg-onglets .elementor-tab-mobile-title{ display:none; }
@media (max-width:767px){
  .onpg-onglets .elementor-tabs-wrapper{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; }
  .onpg-onglets .elementor-tab-title{ white-space:nowrap; padding:12px 16px; }
}

/* Menus du pied de page (modifiables dans Apparence > Menus) */
.onpg-nav-pied a{ color:#C7CBD3; }
.onpg-nav-pied a:hover,.onpg-nav-pied .current-menu-item>a{ color:#fff; }
.onpg-nav-pied .onpg-nav-secours__liste a{ font-weight:500; font-size:.92rem; border:0; }