/* ===================== HEADER / PORTAIL ===================== */
.ods-content, .ods-content li, .ods-content ul, button,
.ods-content h1, .ods-content h2, .ods-content h3, .ods-content h4,
.ods-content a, .ods-content p { font-family: Open Sans, Arial, sans-serif; }

/* Bandeau haut */
.header-banner {
  height: 30px;
  background-color:#398c96;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 15px;
  font-size:1.2vw;
  white-space:nowrap;
  position:fixed;
  top:0; left:0; width:100%;
  z-index:1000;
}
.header-left, .header-right { width:30%; }
.header-banner p { margin:0; display:flex; align-items:center; height:100%; }
.header-banner a { color:#fff; text-decoration:none; font-size:.8rem; line-height:40px; }
.header-banner span { color:#bdbdbd; }
.header-banner img { height:30px; width:auto; display:block; }

/* Portail */
.portal-header {
  background-color:#214a50;
  border-bottom:1px solid #DEE5EF;
  height:80px;
  border:1px solid #214a50;
  position:fixed;
  top:30px; left:0; width:100%;
  z-index:999;
  box-shadow:0px 6px 6px rgba(33,74,80,.35);
  display:flex; align-items:center; gap:16px; padding:0 16px;
}
/* Masque les menus du portail */
.portal-navigation, .ods-front-header__menu, .ods-front-header__management-menu,
.ods-responsive-menu-placeholder, .ods-responsive-menu-collapsible,
nav.portal-header .language, nav.portal-header .menu { display:none !important; }

.ods-front-header__logo, .portal-header .logo {
  display:block; max-height:48px; height:auto; width:auto;
}

/* ===================== BASE DASHBOARD ===================== */
*,
*::before,
*::after{ box-sizing: border-box; }     /* ← évite les débordements inattendus */

body{margin:0;font-family:system-ui, Segoe UI, Roboto, Arial;color:#111;background:#f7f8fb}
main{ padding:110px 16px 48px; } /* 30 (bandeau) + 80 (header) */
.wrap{max-width:1160px;margin:0 auto;padding:0 0 16px}

/* Cartes / sections */
.card{
  border:1px solid #e5e7eb;border-radius:14px;padding:14px 16px;background:#fff;
  overflow-x:hidden;                           /* ← pas de scroll horizontal */
}

/* Contrôles (corrige le débordement à droite) */
.controls{
  display:flex; flex-wrap:wrap; gap:12px 10px; align-items:flex-end;
}
label{font-size:12px;color:#6b7280}
.lbl-strong{font-size:12px;color:#111;font-weight:700}

.flex1{ flex:1 1 220px; min-width:200px; }     /* ← base raisonnable pour chaque bloc */
.controls .flex1:last-child{
  flex: 2 1 360px;                             /* ← “Établissement” plus large */
  min-width: 280px;
}

select{
  width:100%; max-width:100%;                  /* ← le <select> occupe la colonne */
  background:#fff;border:1px solid #d1d5db;border-radius:10px;
  padding:8px 10px;min-width:160px
}

.seg{display:inline-flex;border:1px solid #d1d5db;border-radius:10px;overflow:hidden}
.seg button{padding:6px 12px;border:0;background:transparent;cursor:pointer}
.seg button.active{background:#111827;color:#fff}

/* KPIs (3 cartes) en % + centré */
.kpis{
  display:grid;
  width:90%;
  margin:12px auto 0;
  grid-template-columns:30% 30% 30%;
  column-gap:5%;
  row-gap:12px;
}
.kpi{
  border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;background:#fff;
  text-align:center;
}
.kpi .lbl{font-size:12px;color:#6b7280}
.kpi .val{font-size:28px;font-weight:800;line-height:1.1;margin-top:4px}

/* Graphs */
.graph-title{font-size:20px;font-weight:800;margin:8px 0 6px}
.chart{width:100%;height:420px}
.chart.small{height:320px}
.hint{color:#6b7280;font-size:12px}

/* Layout */
.hide{display:none}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Messages */
.msg{
  background:#fff3cd;border:1px solid #ffe08a;color:#7a5d00;
  padding:8px;border-radius:8px;margin-top:10px
}

/* ===================== FOOTER ===================== */
.section-1 { width:100%; height:85px; background:#ea5045; display:flex; justify-content:center; align-items:center; }
.nav_footer { width:100%; }
.nav-list { display:flex; justify-content:space-between; align-items:center; width:90%; max-width:1200px; list-style:none; padding:0; margin:0; white-space:nowrap; overflow:hidden; }
.nav-list li { display:inline-block; margin:0 5px; }
.nav-list a { text-decoration:none; color:#fff; font-size:10px; text-transform:uppercase; padding:3px 4px; transition:.3s; }
.nav-list a:hover{ color:#fa9f98; }

.section-2 { width:100%; height:203px; background:#333333; border-bottom:1px solid #545454; display:flex; justify-content:center; align-items:center; padding:15px; }
.content-container { display:flex; align-items:center; justify-content:space-between; width:90%; max-width:900px; height:100%; padding-left:10%; }
.image-container { flex:0 0 120px; display:flex; justify-content:center; align-items:center; height:100%; padding-right:30px; }
.image-container img { max-width:220px; height:auto; display:block; }
.ad { flex:1; color:#fff; font-size:14px; text-align:left; padding-left:20px; display:flex; flex-direction:column; justify-content:center; height:100%; }
.ad a { color:#FFDD57; text-decoration:none; font-weight:bold; }
.ad a:hover{ color:#fff; }

.section-3 { width:100%; height:45px; background:#333333; display:flex; justify-content:center; align-items:center; padding:10px; }
.content-container-3 { display:flex; align-items:center; justify-content:space-between; width:90%; max-width:900px; }
.footer { display:flex; flex-direction:column; align-items:center; background:#333; width:max-content; margin:0 auto; text-align:center; }
.footer-text { color:#fff; font-size:14px; margin:5px 0; text-align:center; }
.footer-text a { color:#fff; text-decoration:underline; }
.datacorsica-footer__partners { display:flex; align-items:center; justify-content:flex-end; }
.datacorsica-footer__partner img { max-height:40px; width:auto; display:block; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1000px){
  .two-cols{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .kpis{ width:94%; grid-template-columns:48% 48%; column-gap:4%; }
}
@media (max-width: 768px){
  .header-banner{ display:none; }
  .portal-header{ top:0; }
  main{ padding-top: 90px; } /* compense la disparition du bandeau */
  .content-container{ flex-direction:column; align-items:center; text-align:center; padding-left:0; }
  .image-container{ margin-bottom:10px; }
  .ad{ text-align:center; padding-left:0; }
  .content-container-3{ gap:10px; }

  /* Sur mobile, “Établissement” passe seul si besoin */
  .controls .flex1{ flex:1 1 100%; min-width:0; }
  .controls .flex1:last-child{ flex:1 1 100%; min-width:0; }
}
@media (max-width: 560px){
  .kpis{ width:96%; grid-template-columns:100%; column-gap:0; }
}

/* ===== Bouton latéral gauche pour accéder à la MAP ===== */
.left-map-btn{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1200;
  background:#214a50;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  padding:10px 14px;
  border-radius:0 10px 10px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.left-map-btn:hover{ background:#327f8a; }

@media (max-width: 768px){
  .left-map-btn{
    top:auto; bottom:20px; transform:none; left:12px;
    border-radius:10px; padding:10px 12px;
  }
}