/* ===== Base & variables ===== */
:root{
  --header-h:64px;
  --cp-bg:#ffffff;
  --cp-card:#ffffff;
  --cp-text:#0b1220;
  --cp-muted:#4a5b73;
  --cp-link:#1743c8;
  --cp-link-hover:#0f32a4;
  --cp-border:#d7dfeb;
  --cp-chip-bg:#eef3ff;
  --cp-chip-border:#c9d6fb;
}

*{
  box-sizing:border-box;
  padding:0;
  font-family:Arial, sans-serif;
}

body{
  margin:0;
  padding-top:var(--header-h);           /* réserve l’espace → anti-CLS */
  background:var(--cp-bg);
  color:var(--cp-text);
}

/* ===== Header fixe (unique) ===== */
header{
  position:fixed; inset:0 0 auto 0;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:center;
  background:#0b1220; color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.12);
  z-index:999;
}
header .container{
  max-width:960px; width:100%;
  display:flex; justify-content:center; align-items:center; gap:12px;
  padding:0 16px;
}
header .logo{display:inline-flex; align-items:center; gap:8px; min-height:44px}
header .logo img{width:32px; height:32px; display:block}
header h1{margin:0; font-size:1.25rem; line-height:1}
header h1 a{color:#fff; text-decoration:none}

/* Liséré FR discret sous le header (option) */
header::after{
  content:""; display:block; height:4px;
  position:absolute; inset:auto 0 0 0;
  background:linear-gradient(90deg,#0055A4 33%,#ffffff 33% 66%,#EF4135 66%);
}


/* ====== HEADER commun (ok pour tout le site) ====== */
:root{ --header-h:64px; }
body{ margin:0; padding-top:var(--header-h); background:#fff; color:#0b1220; }
header{ position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center; justify-content:center;
  background:#0b1220; color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.12); z-index:999;
}
header .container{ max-width:960px; width:100%; padding:0 16px; display:flex; justify-content:center; align-items:center; gap:12px; }
header .logo img{ width:32px; height:32px; display:block; }
header h1{ margin:0; font-size:1.25rem; line-height:1 }
header h1 a{ color:#fff; text-decoration:none }

/* ====== Styles SPÉCIFIQUES aux pages département/commune ====== */
.page-dep .container{ width:90%; max-width:960px; margin:16px auto; background:#fff; padding:20px; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,.06); }

.page-dep h1{ font-size:2rem; margin:10px 0 8px }
.page-dep h2{ font-size:1.25rem; margin:18px 0 10px }

.page-dep a{ color:#1743c8; text-decoration:underline; text-underline-offset:2px }
.page-dep a:hover{ color:#0f32a4 }

.page-dep .snippet{ min-height:40px }
.page-dep .pagination{ margin:18px 0; text-align:center; min-height:48px }
.page-dep .pagination a,
.page-dep .pagination .current-page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; line-height:44px; padding:0 12px; border-radius:8px;
}
.page-dep .pagination a{ color:#1743c8; background:#fff; border:1px solid #1743c8; text-decoration:none }
.page-dep .pagination a:hover{ background:#1743c8; color:#fff }
.page-dep .pagination .current-page{ background:#1743c8; color:#fff }

.page-dep ul.comm-list,
.page-dep ul.top-cities{ list-style:none; margin:16px 0; padding:0; }
.page-dep ul.comm-list{ display:grid; grid-template-columns:repeat(2, minmax(240px,1fr)); gap:10px; }
@media (max-width:720px){ .page-dep ul.comm-list{ grid-template-columns:1fr } }

.page-dep ul.comm-list li{
  background:#fff; border:1px solid #d7dfeb; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.page-dep ul.comm-list a,
.page-dep ul.top-cities a{
  display:flex; align-items:center; min-height:44px; padding:10px 12px; border-radius:8px; text-decoration:none; color:#1743c8;
}
.page-dep ul.comm-list a:hover{ text-decoration:underline }
.page-dep ul.comm-list a small{ color:#4a5b73; font-size:.95rem }
.page-dep ul.top-cities li{ margin-block:6px }

.page-dep .search-wrap{ display:flex; justify-content:center; position:relative; margin:8px 0 16px; }
.page-dep .search-wrap input{ width:100%; max-width:520px; padding:10px 12px; border:1px solid #dfe3ee; border-radius:8px; }
.page-dep #ac{ position:absolute; top:48px; width:100%; max-width:520px; background:#fff; border:1px solid #d7dfeb; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:20; max-height:320px; overflow:auto; }
.page-dep .suggestion, .page-dep .ac-item{ min-height:44px; padding:12px 14px; cursor:pointer; border-bottom:1px solid #f2f5fb }
.page-dep .suggestion:last-child, .page-dep .ac-item:last-child{ border-bottom:none }
.page-dep .suggestion:hover, .page-dep .ac-item:hover{ background:#eaf1ff; color:#0b1220 }

.page-dep .cp-badge{
  display:inline-block; padding:6px 12px; background:#eef3ff; border:1px solid #c9d6fb;
  border-radius:20px; font-weight:700; font-size:.95rem; color:#1743c8; white-space:nowrap;
}

/* ===== Container principal ===== */
.container{
  width:90%; max-width:960px;
  margin:16px auto;
  background:#fff;
  padding:20px;
  border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,0.06);
}

/* Titres (évite les reflows à l’arrivée des fonts) */
h1{font-size:2rem; margin:10px 0 8px}
h2{font-size:1.25rem; margin:18px 0 10px}

/* ===== Liens & focus ===== */
a{color:var(--cp-link); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--cp-link-hover)}
a:focus-visible, button:focus-visible, input:focus-visible, [role="button"]:focus-visible{
  outline:3px solid #99b3ff; outline-offset:2px;
}

/* ===== Snippet & pagination ===== */
.snippet{color:var(--cp-text); min-height:40px}
.pagination{margin:18px 0; text-align:center; min-height:48px}
.pagination a,
.pagination .current-page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; line-height:44px;
  padding:0 12px; border-radius:8px;
}
.pagination a{
  color:var(--cp-link); background:#fff; border:1px solid var(--cp-link);
  text-decoration:none;
}
.pagination a:hover{background:var(--cp-link); color:#fff}
.pagination .current-page{background:var(--cp-link); color:#fff}

/* ===== Listes communes / top villes ===== */
ul.comm-list, ul.top-cities{
  list-style:none; margin:16px 0; padding:0;
}
ul.comm-list{
  display:grid; grid-template-columns:repeat(2, minmax(240px,1fr)); gap:10px;
}
@media (max-width:720px){ ul.comm-list{ grid-template-columns:1fr } }

ul.comm-list li{
  background:var(--cp-card);
  border:1px solid var(--cp-border);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
ul.comm-list a,
ul.top-cities a{
  display:flex; align-items:center; min-height:44px;
  padding:10px 12px; border-radius:8px; text-decoration:none;
  color:var(--cp-link);
}
ul.comm-list a:hover{text-decoration:underline}
ul.comm-list a small{color:var(--cp-muted); font-size:.95rem}
ul.top-cities li{margin-block:6px}

/* Badges */
.cp-badge{
  color:var(--cp-link);
  background:var(--cp-chip-bg);
  border:1px solid var(--cp-chip-border);
  font-weight:700; border-radius:999px; padding:4px 8px; display:inline-flex; align-items:center;
}

/* ===== Recherche (frontend) ===== */
/* Ta page utilise .search-wrap et #ac */
.search-wrap{
  display:flex; justify-content:center; position:relative; margin:8px 0 16px;
}
.search-wrap input{
  width:100%; max-width:520px;
  padding:10px 12px; border:1px solid #dfe3ee; border-radius:8px;
}
#ac{
  position:absolute; top:48px; width:100%; max-width:520px;
  background:#fff; border:1px solid var(--cp-border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:20;
  max-height:320px; overflow:auto;
}
.suggestion, .ac-item{ min-height:44px; padding:12px 14px; cursor:pointer; border-bottom:1px solid #f2f5fb }
.suggestion:last-child, .ac-item:last-child{ border-bottom:none }
.suggestion:hover, .ac-item:hover{ background:#eaf1ff; color:var(--cp-text) }

/* (Compat) si tu as encore #suggestions dans d’autres pages */
#suggestions{ /* même style que #ac */
  position:absolute; top:48px; width:100%; max-width:520px;
  background:#fff; border:1px solid var(--cp-border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:20;
  max-height:320px; overflow:auto; display:none;
}

/* ===== Cartes régions (si utilisées) ===== */
.regions{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:15px; margin-top:20px;
}
.region-card{
  background:#ffffff; border:1px solid var(--cp-border);
  border-radius:10px; padding:15px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .2s ease-in-out, background .2s;
}
.region-card:hover{ transform:translateY(-3px); background:#eaf1ff }
.region-card h3{ color:var(--cp-text); font-size:18px; margin:0 0 10px }
.region-card a{ text-decoration:none; color:var(--cp-link); font-weight:600 }
.region-card a:hover{ text-decoration:underline }

/* ===== Blocs “musees/etablissements” (si présents) ===== */
.musees-list{display:flex; flex-wrap:wrap; gap:20px}
.musee-item{background:#fff; padding:20px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,.1); width:48%}
@media (max-width:768px){ .musee-item{ width:100% } }
.musee-nom{font-size:1.25rem; color:#2980b9; margin:0}
.musee-adresse,.musee-atout{color:#7f8c8d}
.etablissements-list{display:flex; flex-direction:column; gap:20px}
.etablissement-item{background:#f4f4f4; padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.1)}
.etablissement-nom{font-size:1.5em; color:#2c3e50; margin:0 0 10px}
.etablissement-adresse{font-size:1.1em; color:#7f8c8d; margin:10px 0}

/* ===== Mode sombre ===== */
@media (prefers-color-scheme: dark){
  :root{
    --cp-bg:#0b0f18; --cp-card:#0f1420; --cp-text:#e6ebf3; --cp-muted:#c9d4e6;
    --cp-link:#9bb6ff; --cp-link-hover:#c3d2ff; --cp-border:#26334a;
    --cp-chip-bg:#151e30; --cp-chip-border:#2a3a56;
  }
  header{ background:#0b0f18; }
  .region-card{ background:#0f1420; border-color:#26334a }
  .region-card:hover{ background:#151e30 }
  a{ text-decoration:underline }
}

/* ====== HOME : blocs régions ====== */
.page-home .container{ width:90%; max-width:1000px; margin:16px auto; }

.page-home .regions{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:20px; margin-top:20px;
}
.page-home .region-card{
  background:#fff; border:1px solid #d7dfeb; border-radius:10px; padding:15px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .2s ease-in-out, background .2s;
}
.page-home .region-card:hover{ transform:translateY(-3px); background:#eaf1ff; }

.page-home .region-card h3{ color:#0b1220; font-size:18px; margin:0 0 10px; text-align:center }
.region-card ul { list-style:none; margin:0; padding-left:0; }
.page-home .region-card ul li{ margin:6px 0; }
.page-home .region-card a{ text-decoration:none; color:#1743c8; font-weight:600; display:block; }
.page-home .region-card a:hover{ text-decoration:underline; }

/* ===== CONTRASTE AA – patch ciblé ===== */

/* 1) Remonter les gris faibles -> texte lisible (~≥6:1) */
.note-ortho,
.musee-adresse,
.musee-atout,
.region-card ul li,
small {
  color: #3d4b63;         /* remplace #6b7a90 / #7f8c8d */
}

/* 2) Snippet : pas d'effet "surligneur" limité en contraste */
.snippet em,
.snippet strong {
  color: var(--cp-text);  /* #0b1220 */
  background: transparent;
}
.snippet strong { font-weight: 700; }

/* 3) Liste mairie : texte de label un peu plus sombre */
section[aria-labelledby="mairie"] li > strong {
  color: #3d4b63;
}

/* 4) Liens : garder un hover bien contrasté */
a { color: var(--cp-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--cp-link-hover); }

/* 5) Badges / pastilles – OK mais on verrouille le contraste */
.cp-badge {
  color: var(--cp-link);                    /* texte foncé */
  background: #eef3ff;                      /* fond clair */
  border: 1px solid #c9d6fb;
}

/* 6) Mode sombre : équivalents plus clairs */
@media (prefers-color-scheme: dark){
  .note-ortho,
  .musee-adresse,
  .musee-atout,
  .region-card ul li,
  small { color: #c9d4e6; }                 /* lisible sur #0b0f18 */
}
/* ===== CONTRASTE AA — PATCH v9 ===== */

/* Couleurs de base suffisamment sombres */
:root{
  --cp-text:#0b1220;
  --cp-muted:#3d4b63;      /* remplace #6b7a90 / #7f8c8d */
  --cp-card:#ffffff;
  --cp-link:#1743c8;
  --cp-link-hover:#0f32a4;
}

/* Forcer la couleur de texte dans les conteneurs clairs */
.container,
.card,
.region-card,
.musee-item,
.etablissement-item{
  color:var(--cp-text) !important;
  background:var(--cp-card);
}

/* Textes “secondaires” trop clairs -> plus sombres */
.note-ortho,
.musee-adresse,
.musee-atout,
.etablissement-adresse,
.region-card ul li,
small{
  color:var(--cp-muted) !important;
}

/* Petits textes à l'intérieur des titres d'établissements */
.etablissement-nom small{
  color:var(--cp-muted) !important;
  font-weight:600;
}

/* Le snippet : pas de surlignage pâle + contraste fort */
.snippet em,
.snippet strong,
.snippet mark{
  color:var(--cp-text) !important;
  background:transparent !important;
  box-shadow:none !important;
}
/* (optionnel) éviter l'italique sur mobile */
.snippet em{ font-style:normal; }

/* Liens/boutons “carte” : état normal/hover contrasté */
.mdel-map,
.etablissement-map-link,
.musee-map-link{  
  background:#fff;
  color:var(--cp-link);
}
.mdel-map:hover,
.etablissement-map-link:hover,
.musee-map-link:hover{
  background:var(--cp-link);
  color:#fff;
}

/* Dark mode équivalents contrastés */
@media (prefers-color-scheme: dark){
  :root{ --cp-muted:#c9d4e6; }
  .container,
  .card,
  .region-card,
  .musee-item,
  .etablissement-item{ color:#e6ebf3 !important; background:#0f1420; }
  .note-ortho,
  .musee-adresse,
  .musee-atout,
  .etablissement-adresse,
  .region-card ul li,
  small{ color:#c9d4e6 !important; }
}

/* ===== Footer ===== */
.site-footer{ margin-top:24px; border-top:1px solid var(--cp-border); background:var(--cp-card); color:var(--cp-text); }
.site-footer .container{ max-width:960px; margin:0 auto; padding:20px 16px 24px; }

.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:18px; }
@media (max-width: 800px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-title{ margin:0 0 10px; font-size:1rem; color:var(--cp-text); }
.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer-list a{ color:var(--cp-link); text-decoration:none; }
.footer-list a:hover{ text-decoration:underline; color:var(--cp-link-hover); }

.brand{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--cp-text); }
.brand img{ width:28px; height:28px; display:block; }
.muted{ color:var(--cp-muted); }

.footer-bottom{ border-top:1px solid var(--cp-border); margin-top:16px; padding-top:12px;
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }

.back-to-top{
  position:sticky; bottom:12px; left:calc(100% - 56px);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--cp-link); background:#fff; color:var(--cp-link);
  text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.08); margin:8px;
}
.back-to-top:hover{ background:var(--cp-link); color:#fff; }
@media (prefers-color-scheme: dark){
  .site-footer{ background:#0f1420; }
  .back-to-top{ background:transparent; }
}
.encadre-info {
  border: 1px solid #ddd;
  background: #f9f9f9;
  padding: 15px 20px;
  margin-top: 30px;
  border-radius: 8px;
}

.encadre-info h2 {
  margin-top: 0;
  font-size: 1.2em;
  color: #333;
}
.table-cp {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.95rem;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.table-cp thead {
  background-color: #0055a5;
  color: #fff;
  text-align: left;
}

.table-cp th, 
.table-cp td {
  padding: 12px 15px;
  border-bottom: 1px solid #e6e6e6;
}

.table-cp tbody tr:hover {
  background-color: #f5f9ff;
}

.table-cp tbody tr:last-child td {
  border-bottom: none;
}

.table-cp th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-cp td:first-child {
  font-weight: bold;
  color: #0055a5;
}




/* ====== TABLEAU GLOBAL CRIMINALITE====== */
.pop-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  margin: 1rem 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* ====== EN-TÊTES ====== */
.pop-table thead th {
  background: linear-gradient(180deg, #f5f8ff 0%, #e9efff 100%);
  color: #0b1220;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid var(--cp-border, #d7dfeb);
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ====== CELLULES ====== */
.pop-table td {
  background-color: #fff;
  border-bottom: 1px solid var(--cp-border, #d7dfeb);
  padding: 8px 12px;
  text-align: center;
  transition: background-color 0.15s ease-in-out;
}

/* Lignes alternées (zébrées) */
.pop-table tbody tr:nth-child(odd) td {
  background-color: #f9fbff;
}

/* Effet de survol */
.pop-table tbody tr:hover td {
  background-color: #eef3ff;
}

/* Pied de tableau */
.pop-table tfoot th {
  background: #e4ecff;
  font-weight: 700;
  color: #1743c8;
}

/* Responsive mobile */
@media (max-width: 600px) {
  .pop-table, .pop-table thead, .pop-table tbody, .pop-table th, .pop-table td, .pop-table tr {
    display: block;
  }
  .pop-table thead { display: none; }
  .pop-table tr {
    margin-bottom: 1rem;
    border: 1px solid #d7dfeb;
    border-radius: 8px;
    padding: 0.5rem;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  }
  .pop-table td {
    text-align: left;
    padding: 6px 8px;
    border: none;
    border-bottom: 1px dashed #e1e5f2;
    position: relative;
  }
  .pop-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: #4a5b73;
    font-size: 0.9rem;
    margin-bottom: 2px;
  }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  .pop-table thead th {
    background: linear-gradient(180deg, #202a3d 0%, #192132 100%);
    color: #e6ebf3;
  }
  .pop-table td {
    background-color: #121a2a;
    border-color: #1e2a40;
    color: #e6ebf3;
  }
  .pop-table tbody tr:nth-child(odd) td {
    background-color: #0f1422;
  }
  .pop-table tbody tr:hover td {
    background-color: #1b2540;
  }
  .pop-table tfoot th {
    background: #233059;
    color: #9ab3ff;
  }
}
.diff-pos { color:#c1272d; font-weight:600; }  /* au-dessus de la moyenne */
.diff-neg { color:#008f39; font-weight:600; }  /* en dessous de la moyenne */