/* ============================================================
   PORTAIL RPC N'DJAMÉNA — Maquette (cahier des charges v1)
   ============================================================ */
:root {
  --bleu: #123a6d;
  --bleu-fonce: #0c2a50;
  --bleu-clair: #e8f0fa;
  --or: #e8a820;
  --or-fonce: #c78d10;
  --rouge: #c0392b;
  --vert: #1e8449;
  --gris-fond: #f4f6f9;
  --gris-bord: #dde3ec;
  --texte: #22303f;
  --texte-doux: #5d6b7a;
  --blanc: #ffffff;
  --rayon: 10px;
  --ombre: 0 2px 10px rgba(18, 58, 109, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texte);
  background: var(--gris-fond);
  line-height: 1.55;
}
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ---------- Bandeau institutionnel ---------- */
.bandeau-etat {
  background: var(--bleu-fonce);
  color: #cdd9ea;
  font-size: .8rem;
  padding: .35rem 0;
}
.bandeau-etat .conteneur { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bandeau-etat .refs { font-style: italic; }

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

/* ---------- En-tête ---------- */
.entete {
  background: var(--blanc);
  border-bottom: 4px solid var(--or);
  box-shadow: var(--ombre);
}
.entete-haut {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 0;
}
.logo-rpc {
  display: flex; align-items: center; gap: .85rem;
}
.logo-rpc .blason {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce));
  color: var(--or); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; border: 3px solid var(--or);
  flex-shrink: 0;
}
.logo-rpc .titres h1 { font-size: 1.15rem; color: var(--bleu); line-height: 1.2; }
.logo-rpc .titres p { font-size: .8rem; color: var(--texte-doux); }
.entete-actions { margin-left: auto; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; padding: .55rem 1.15rem; border-radius: 6px;
  font-weight: 600; font-size: .9rem; cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primaire { background: var(--bleu); color: #fff; }
.btn-primaire:hover { background: var(--bleu-fonce); }
.btn-or { background: var(--or); color: var(--bleu-fonce); }
.btn-or:hover { background: var(--or-fonce); color: #fff; }
.btn-contour { background: transparent; border-color: var(--bleu); color: var(--bleu); }
.btn-contour:hover { background: var(--bleu-clair); }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-petit { padding: .3rem .7rem; font-size: .8rem; }

/* ---------- Navigation ---------- */
.nav-principale { background: var(--bleu); }
.nav-principale ul {
  list-style: none; display: flex; flex-wrap: wrap;
}
.nav-principale a {
  display: block; color: #dce6f3; padding: .75rem 1.1rem;
  font-size: .92rem; font-weight: 500;
}
.nav-principale a:hover, .nav-principale a.actif {
  background: var(--bleu-fonce); color: #fff; text-decoration: none;
}
.nav-principale a.actif { box-shadow: inset 0 -3px 0 var(--or); }

/* ---------- Héros ---------- */
.heros {
  background: linear-gradient(120deg, var(--bleu-fonce) 0%, var(--bleu) 60%, #2a5a9c 100%);
  color: #fff; padding: 3.5rem 0 3rem;
}
.heros .badge-arrete {
  display: inline-block; background: rgba(232,168,32,.18); color: var(--or);
  border: 1px solid var(--or); border-radius: 30px; padding: .25rem .9rem;
  font-size: .8rem; margin-bottom: 1rem;
}
.heros h2 { font-size: 2rem; max-width: 640px; line-height: 1.25; }
.heros p { margin: 1rem 0 1.6rem; max-width: 620px; color: #d5e0ef; }
.heros .cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.heros .btn-contour { border-color: #fff; color: #fff; }
.heros .btn-contour:hover { background: rgba(255,255,255,.12); }

/* ---------- Sections ---------- */
.section { padding: 2.8rem 0; }
.section-titre { text-align: center; margin-bottom: 2rem; }
.section-titre h3 { color: var(--bleu); font-size: 1.55rem; }
.section-titre p { color: var(--texte-doux); max-width: 620px; margin: .4rem auto 0; }

.grille { display: grid; gap: 1.25rem; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; } }

/* ---------- Cartes ---------- */
.carte {
  background: var(--blanc); border: 1px solid var(--gris-bord);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.5rem;
}
.carte h4 { color: var(--bleu); margin-bottom: .6rem; font-size: 1.05rem; }
.carte .icone {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--bleu-clair); color: var(--bleu);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: .8rem;
}
.carte-mode { border-top: 4px solid var(--bleu); position: relative; }
.carte-mode.or { border-top-color: var(--or); }
.carte-mode ul { margin: .8rem 0 1rem 1.1rem; color: var(--texte-doux); font-size: .9rem; }
.carte-mode .ref { font-size: .75rem; color: var(--texte-doux); background: var(--gris-fond); border-radius: 4px; padding: .15rem .5rem; display: inline-block; margin-bottom: .6rem; }

/* ---------- Étapes ---------- */
.etapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; counter-reset: etape; }
@media (max-width: 900px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
.etape {
  background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: var(--rayon);
  padding: 1.1rem; position: relative; font-size: .88rem;
}
.etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; top: -14px; left: 1rem;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--or); color: var(--bleu-fonce);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.etape strong { display: block; color: var(--bleu); margin: .4rem 0 .25rem; }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: .9rem; }
.tableau th, .tableau td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--gris-bord); }
.tableau th { background: var(--bleu-clair); color: var(--bleu); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.tableau tr:hover td { background: #fafcff; }
.conteneur-tableau { background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }

/* ---------- Badges de statut ---------- */
.badge {
  display: inline-block; padding: .18rem .6rem; border-radius: 20px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.b-brouillon { background: #eceff3; color: #5d6b7a; }
.b-soumis { background: #dbe9fb; color: #1a5cb8; }
.b-instruction { background: #fdeecb; color: #a07408; }
.b-completer { background: #ffe1d6; color: #c0492b; }
.b-valide { background: #d7f0e0; color: var(--vert); }
.b-refuse { background: #fbd9d3; color: var(--rouge); }
.b-suspendu { background: #efe2f7; color: #7d3bb3; }
.b-expire { background: #e5e7eb; color: #374151; }

/* ---------- Fil d'Ariane / titre de page ---------- */
.page-titre {
  background: var(--blanc); border-bottom: 1px solid var(--gris-bord);
  padding: 1.6rem 0;
}
.page-titre h2 { color: var(--bleu); font-size: 1.5rem; }
.page-titre p { color: var(--texte-doux); font-size: .9rem; margin-top: .25rem; }
.ariane { font-size: .8rem; color: var(--texte-doux); margin-bottom: .4rem; }
.ariane a { color: var(--texte-doux); }

/* ---------- Formulaires ---------- */
.form-carte {
  background: var(--blanc); border: 1px solid var(--gris-bord);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 2rem; max-width: 860px; margin: 0 auto;
}
.form-carte.etroit { max-width: 460px; }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; color: var(--texte); }
.champ label .requis { color: var(--rouge); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .6rem .75rem; border: 1px solid #c7d0dc;
  border-radius: 6px; font-size: .92rem; font-family: inherit; background: #fbfcfe;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid rgba(18,58,109,.25); border-color: var(--bleu);
}
.champ .aide { font-size: .78rem; color: var(--texte-doux); margin-top: .25rem; }
.form-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-ligne { grid-template-columns: 1fr; } }
.form-sep { border: none; border-top: 1px solid var(--gris-bord); margin: 1.6rem 0 1.2rem; }
.form-sep-titre { color: var(--bleu); font-size: 1rem; margin-bottom: 1rem; }

/* Wizard */
.wizard-etapes { display: flex; gap: 0; margin-bottom: 2rem; }
.wizard-etapes li {
  list-style: none; flex: 1; text-align: center; font-size: .8rem; color: var(--texte-doux);
  position: relative; padding-top: 1.6rem;
}
.wizard-etapes li::before {
  content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: #dfe5ec; color: var(--texte-doux);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.wizard-etapes li::after {
  content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px);
  height: 3px; background: #dfe5ec;
}
.wizard-etapes li:first-child::after { display: none; }
.wizard-etapes li.actif { color: var(--bleu); font-weight: 600; }
.wizard-etapes li.actif::before { background: var(--bleu); color: #fff; }
.wizard-etapes li.fait::before { background: var(--vert); color: #fff; content: "✓"; }
.wizard-etapes li.fait::after { background: var(--vert); }

/* Choix de profil */
.choix-profil { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .choix-profil { grid-template-columns: 1fr; } }
.choix-profil .option {
  border: 2px solid var(--gris-bord); border-radius: var(--rayon); padding: 1.3rem;
  cursor: pointer; background: #fbfcfe; transition: border-color .15s;
}
.choix-profil .option:hover, .choix-profil .option.selectionne { border-color: var(--bleu); background: var(--bleu-clair); }
.choix-profil .option h5 { color: var(--bleu); margin-bottom: .3rem; }
.choix-profil .option p { font-size: .83rem; color: var(--texte-doux); }

/* Upload */
.zone-upload {
  border: 2px dashed #b9c6d6; border-radius: 8px; padding: 1.2rem;
  text-align: center; color: var(--texte-doux); background: #fbfcfe; font-size: .88rem;
  cursor: pointer;
}
.zone-upload:hover { border-color: var(--bleu); background: var(--bleu-clair); }
.liste-pieces { list-style: none; }
.liste-pieces li {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  border: 1px solid var(--gris-bord); border-radius: 6px; margin-bottom: .45rem;
  font-size: .87rem; background: #fbfcfe;
}
.liste-pieces .etat { margin-left: auto; font-size: .78rem; font-weight: 700; }
.etat-ok { color: var(--vert); }
.etat-manquant { color: var(--rouge); }
.etat-attente { color: #a07408; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; position: relative; padding-left: 1.6rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--gris-bord); }
.timeline li { position: relative; padding: 0 0 1.3rem .6rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.6rem; top: 4px;
  width: 12px; height: 12px; border-radius: 50%; background: #c3ccd8; border: 2px solid #fff;
}
.timeline li.fait::before { background: var(--vert); }
.timeline li.encours::before { background: var(--or); box-shadow: 0 0 0 4px rgba(232,168,32,.25); }
.timeline .date { font-size: .78rem; color: var(--texte-doux); }
.timeline strong { display: block; color: var(--bleu); font-size: .92rem; }
.timeline p { font-size: .85rem; color: var(--texte-doux); }

/* ---------- Layout back-office ---------- */
.bo-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 60px); }
@media (max-width: 800px) { .bo-layout { grid-template-columns: 1fr; } }
.bo-sidebar { background: var(--bleu-fonce); padding: 1.2rem 0; }
.bo-sidebar .bo-user { color: #cdd9ea; padding: 0 1.2rem 1rem; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: .8rem; }
.bo-sidebar .bo-user strong { color: #fff; display: block; }
.bo-sidebar .bo-user span { font-size: .78rem; }
.bo-sidebar a {
  display: flex; gap: .6rem; align-items: center; color: #b9c9de;
  padding: .65rem 1.2rem; font-size: .9rem;
}
.bo-sidebar a:hover, .bo-sidebar a.actif { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.bo-sidebar a.actif { border-left: 3px solid var(--or); }
.bo-main { padding: 1.8rem 2rem; }
.bo-main h2 { color: var(--bleu); margin-bottom: 1.2rem; font-size: 1.35rem; }

/* KPI */
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
@media (max-width: 900px) { .kpi { grid-template-columns: repeat(2, 1fr); } }
.kpi .carte { padding: 1.1rem 1.2rem; }
.kpi .valeur { font-size: 1.7rem; font-weight: 800; color: var(--bleu); }
.kpi .libelle { font-size: .8rem; color: var(--texte-doux); }
.kpi .tendance { font-size: .75rem; margin-top: .3rem; }
.tendance.up { color: var(--vert); }
.tendance.down { color: var(--rouge); }

/* ---------- Messagerie ---------- */
.msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.2rem; }
@media (max-width: 800px) { .msg-layout { grid-template-columns: 1fr; } }
.msg-liste { background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: var(--rayon); overflow: hidden; }
.msg-liste .item { padding: .8rem 1rem; border-bottom: 1px solid var(--gris-bord); cursor: pointer; }
.msg-liste .item:hover, .msg-liste .item.actif { background: var(--bleu-clair); }
.msg-liste .item .objet { font-weight: 600; font-size: .88rem; color: var(--bleu); }
.msg-liste .item .extrait { font-size: .78rem; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-liste .item .meta { font-size: .72rem; color: var(--texte-doux); display: flex; justify-content: space-between; margin-top: .2rem; }
.msg-liste .nonlu { width: 8px; height: 8px; border-radius: 50%; background: var(--or); display: inline-block; }
.msg-thread { background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: var(--rayon); display: flex; flex-direction: column; }
.msg-thread .thread-tete { padding: 1rem 1.3rem; border-bottom: 1px solid var(--gris-bord); }
.msg-thread .thread-tete h4 { color: var(--bleu); }
.msg-thread .thread-tete .contexte { font-size: .78rem; color: var(--texte-doux); }
.msg-corps { padding: 1.3rem; flex: 1; overflow-y: auto; max-height: 420px; }
.bulle { max-width: 78%; padding: .7rem 1rem; border-radius: 12px; margin-bottom: .9rem; font-size: .9rem; position: relative; }
.bulle .auteur { font-size: .72rem; font-weight: 700; margin-bottom: .2rem; }
.bulle .heure { font-size: .7rem; color: var(--texte-doux); margin-top: .3rem; }
.bulle.recu { background: var(--gris-fond); border: 1px solid var(--gris-bord); }
.bulle.envoye { background: var(--bleu); color: #fff; margin-left: auto; }
.bulle.envoye .heure { color: #b9c9de; }
.bulle.envoye .vu { color: var(--or); }
.msg-saisie { border-top: 1px solid var(--gris-bord); padding: .9rem 1.3rem; display: flex; gap: .6rem; align-items: flex-end; }
.msg-saisie textarea { flex: 1; border: 1px solid #c7d0dc; border-radius: 8px; padding: .6rem; font-family: inherit; font-size: .9rem; resize: none; }
.msg-outils { display: flex; gap: .5rem; padding: 0 1.3rem .8rem; flex-wrap: wrap; }
.chip {
  font-size: .75rem; background: var(--bleu-clair); color: var(--bleu);
  border: 1px solid #c3d5ec; border-radius: 20px; padding: .2rem .7rem; cursor: pointer;
}
.chip:hover { background: #d5e4f6; }

/* ---------- Alertes ---------- */
.alerte { border-radius: 8px; padding: .9rem 1.1rem; font-size: .88rem; margin-bottom: 1rem; border: 1px solid transparent; }
.alerte-info { background: #e7f0fc; border-color: #bcd4f1; color: #1a4e8f; }
.alerte-warn { background: #fdf3dd; border-color: #f3ddaa; color: #8a6508; }
.alerte-succes { background: #e3f5ea; border-color: #bfe6cf; color: #176138; }

/* ---------- FAQ ---------- */
.faq details { background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: 8px; margin-bottom: .7rem; }
.faq summary { padding: .9rem 1.1rem; cursor: pointer; font-weight: 600; color: var(--bleu); font-size: .95rem; }
.faq details p { padding: 0 1.1rem 1rem; font-size: .9rem; color: var(--texte-doux); }

/* ---------- Tarifs ---------- */
.note-legale { font-size: .78rem; color: var(--texte-doux); margin-top: .8rem; }

/* ---------- Pied de page ---------- */
.pied { background: var(--bleu-fonce); color: #b9c9de; margin-top: 3rem; }
.pied .grille { padding: 2.5rem 0 1.5rem; }
.pied h5 { color: #fff; margin-bottom: .8rem; font-size: .95rem; }
.pied ul { list-style: none; }
.pied li { margin-bottom: .4rem; font-size: .86rem; }
.pied a { color: #b9c9de; }
.pied a:hover { color: var(--or); }
.pied-bas { border-top: 1px solid rgba(255,255,255,.12); padding: 1rem 0; font-size: .78rem; text-align: center; }

/* ---------- Divers ---------- */
.texte-doux { color: var(--texte-doux); }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.flex { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.droite { margin-left: auto; }
.cache { display: none !important; }
.pastille-compte { background: var(--rouge); color: #fff; border-radius: 10px; font-size: .7rem; padding: 0 .4rem; margin-left: auto; }
/* ============================================================
   V2 — REFONTE GRAPHIQUE « communication & image »
   ============================================================ */

/* ---------- Héros immersif ---------- */
.heros-v2 {
  position: relative; color: #fff; overflow: hidden;
  min-height: 560px; display: flex; align-items: center;
}
.heros-v2 .fond {
  position: absolute; inset: 0;
  background: url("img/hero-ndjamena.png") center 35% / cover no-repeat;
  transform: scale(1.03);
}
.heros-v2 .voile {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,24,48,.92) 0%, rgba(12,42,80,.78) 42%, rgba(12,42,80,.30) 75%, rgba(12,42,80,.15) 100%);
}
.heros-v2 .conteneur { position: relative; z-index: 2; padding-top: 4rem; padding-bottom: 4rem; }
.heros-v2 h2 { font-size: 2.6rem; max-width: 660px; line-height: 1.18; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.heros-v2 h2 .or { color: var(--or); }
.heros-v2 p { font-size: 1.08rem; color: #e4ecf7; max-width: 600px; }
.heros-v2 .badge-arrete { background: rgba(232,168,32,.16); backdrop-filter: blur(4px); }
.heros-v2 .stats {
  display: flex; gap: 2.5rem; margin-top: 2.4rem; flex-wrap: wrap;
}
.heros-v2 .stats .stat { border-left: 3px solid var(--or); padding-left: .9rem; }
.heros-v2 .stats .stat b { display: block; font-size: 1.6rem; color: #fff; }
.heros-v2 .stats .stat span { font-size: .8rem; color: #c8d6e8; }

/* ---------- Titre de section V2 ---------- */
.section-titre-v2 { text-align: center; margin-bottom: 2.4rem; }
.section-titre-v2 .sur-titre {
  display: block; color: var(--or-fonce); font-weight: 700; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: .5rem;
}
.section-titre-v2 h3 { color: var(--bleu); font-size: 1.8rem; position: relative; display: inline-block; }
.section-titre-v2 h3::after {
  content: ""; display: block; width: 64px; height: 4px; margin: .5rem auto 0;
  background: linear-gradient(90deg, var(--or), var(--bleu)); border-radius: 2px;
}
.section-titre-v2 p { color: var(--texte-doux); max-width: 640px; margin: .6rem auto 0; }

/* ---------- Mot du Maire ---------- */
.maire-section {
  background: linear-gradient(120deg, var(--bleu-fonce), #163f6e 60%, #1d4f8f);
  color: #eaf1f9; position: relative; overflow: hidden;
}
.maire-section::before {
  content: "«"; position: absolute; right: 4%; top: -2rem; font-size: 22rem;
  color: rgba(232,168,32,.07); font-family: Georgia, serif; line-height: 1;
}
.maire-grille { display: grid; grid-template-columns: 340px 1fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .maire-grille { grid-template-columns: 1fr; } }
.maire-portrait { position: relative; }
.maire-portrait img {
  border-radius: 14px; box-shadow: 0 18px 45px rgba(0,0,0,.45);
  border: 5px solid var(--or); display: block;
}
.maire-portrait .cadre-deco {
  position: absolute; inset: -14px auto auto -14px; width: 90px; height: 90px;
  border-top: 4px solid var(--or); border-left: 4px solid var(--or); border-radius: 14px 0 0 0;
}
.maire-texte .sur-titre { color: var(--or); font-weight: 700; letter-spacing: .18em; font-size: .78rem; text-transform: uppercase; }
.maire-texte h3 { font-size: 1.7rem; color: #fff; margin: .4rem 0 1.2rem; }
.maire-texte blockquote {
  font-size: 1.08rem; line-height: 1.75; font-style: italic; color: #dde8f5;
  border-left: 4px solid var(--or); padding-left: 1.3rem; margin-bottom: 1.4rem;
}
.maire-signature { display: flex; align-items: center; gap: 1rem; }
.maire-signature .nom { font-family: Georgia, serif; font-size: 1.25rem; color: var(--or); font-style: italic; }
.maire-signature .fonction { font-size: .82rem; color: #b9c9de; }

/* ---------- Espace publicitaire dynamique (carrousel) ---------- */
.pub-section { background: #0a1d36; padding: 3rem 0; }
.pub-tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
.pub-tete h3 { color: #fff; font-size: 1.4rem; }
.pub-tete .etiquette {
  background: var(--or); color: var(--bleu-fonce); font-weight: 800; font-size: .72rem;
  padding: .25rem .8rem; border-radius: 4px; letter-spacing: .12em; text-transform: uppercase;
}
.carrousel { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.carrousel .diapos { display: none; position: relative; animation: fondu .8s ease; }
.carrousel .diapos.visible { display: block; }
.carrousel img { width: 100%; height: 430px; object-fit: cover; display: block; }
@keyframes fondu { from { opacity: .3; } to { opacity: 1; } }
.carrousel .legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(8,24,48,.92), transparent);
  padding: 3.2rem 2rem 1.4rem; color: #fff;
}
.carrousel .legende .marque { color: var(--or); font-weight: 800; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; }
.carrousel .legende h4 { font-size: 1.35rem; margin: .2rem 0 .3rem; }
.carrousel .legende p { color: #c8d6e8; font-size: .9rem; max-width: 560px; }
.carrousel .fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(232,168,32,.92); color: var(--bleu-fonce); font-size: 1.2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; z-index: 3;
  transition: background .15s;
}
.carrousel .fleche:hover { background: #fff; }
.carrousel .prec { left: 1rem; } .carrousel .suiv { right: 1rem; }
.carrousel .points { position: absolute; bottom: 1.1rem; right: 2rem; display: flex; gap: .5rem; z-index: 3; }
.carrousel .points span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; }
.carrousel .points span.actif { background: var(--or); transform: scale(1.25); }
.pub-note { color: #8fa5c0; font-size: .78rem; text-align: center; margin-top: 1rem; }

/* ---------- Cartes avec image ---------- */
.carte-img { overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; }
.carte-img img { width: 100%; height: 190px; object-fit: cover; display: block; }
.carte-img .corps { padding: 1.4rem 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.carte-img .corps .btn { margin-top: auto; }
.carte-img { transition: transform .2s ease, box-shadow .2s ease; }
.carte-img:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(18,58,109,.18); }

/* ---------- Bandeau image pour pages internes ---------- */
.bandeau-img {
  position: relative; color: #fff; min-height: 200px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.bandeau-img .fond { position: absolute; inset: 0; background-size: cover; background-position: center 40%; }
.bandeau-img .voile { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,24,48,.9), rgba(12,42,80,.55)); }
.bandeau-img .conteneur { position: relative; z-index: 2; padding-top: 2.2rem; padding-bottom: 1.8rem; }
.bandeau-img h2 { color: #fff; }
.bandeau-img p { color: #cfdbec; }
.bandeau-img .ariane, .bandeau-img .ariane a { color: #a9bdd6; }

/* ---------- Rangées illustration + texte ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.duo .visuel { position: relative; }
.duo .visuel img { border-radius: 14px; box-shadow: 0 16px 40px rgba(18,58,109,.22); display: block; }
.duo .visuel::after {
  content: ""; position: absolute; inset: auto -12px -12px auto; width: 110px; height: 110px;
  border-bottom: 5px solid var(--or); border-right: 5px solid var(--or); border-radius: 0 0 14px 0;
}
.duo.inverse .visuel { order: 2; }
.duo h3 { color: var(--bleu); font-size: 1.5rem; margin-bottom: .9rem; }
.duo p { color: var(--texte-doux); }
.duo ul.avantages { list-style: none; margin: 1.1rem 0 1.4rem; }
.duo ul.avantages li { padding: .35rem 0 .35rem 1.8rem; position: relative; color: var(--texte); font-size: .94rem; }
.duo ul.avantages li::before {
  content: "✓"; position: absolute; left: 0; top: .35rem;
  width: 20px; height: 20px; background: var(--or); color: var(--bleu-fonce);
  border-radius: 50%; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Bandeau chiffres clés ---------- */
.bande-chiffres {
  background: linear-gradient(90deg, var(--bleu), #1d4f8f);
  color: #fff; padding: 2.2rem 0;
}
.bande-chiffres .grille { text-align: center; }
.bande-chiffres b { display: block; font-size: 2rem; color: var(--or); }
.bande-chiffres span { font-size: .85rem; color: #cfdbec; }

/* ---------- Connexion en deux panneaux ---------- */
.connexion-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
@media (max-width: 860px) { .connexion-split { grid-template-columns: 1fr; } .connexion-visuel { display: none; } }
.connexion-visuel {
  background: url("img/suivi-digital.png") center / cover no-repeat; position: relative;
}
.connexion-visuel .voile {
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(8,24,48,.35), rgba(8,24,48,.88));
  display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem; color: #fff;
}
.connexion-visuel h3 { font-size: 1.5rem; max-width: 420px; }
.connexion-visuel p { color: #cfdbec; font-size: .92rem; margin-top: .6rem; max-width: 420px; }
.connexion-form { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.connexion-form .form-carte { box-shadow: none; border: none; padding: 0 1rem; width: 100%; }

/* ---------- Bienvenue espace demandeur ---------- */
.bienvenue {
  border-radius: 14px; overflow: hidden; position: relative; color: #fff; margin-bottom: 1.6rem;
  min-height: 150px; display: flex; align-items: center;
}
.bienvenue .fond { position: absolute; inset: 0; background-size: cover; background-position: center 60%; }
.bienvenue .voile { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(8,24,48,.9) 30%, rgba(12,42,80,.45)); }
.bienvenue .txt { position: relative; z-index: 2; padding: 1.6rem 2rem; }
.bienvenue h3 { font-size: 1.3rem; }
.bienvenue p { color: #cfdbec; font-size: .9rem; }

/* ---------- Admin : bandeau haut ---------- */
.bo-banniere {
  border-radius: 14px; overflow: hidden; position: relative; color: #fff; margin-bottom: 1.6rem;
  min-height: 140px; display: flex; align-items: center;
}
.bo-banniere .fond { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.bo-banniere .voile { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(8,24,48,.92) 35%, rgba(12,42,80,.4)); }
.bo-banniere .txt { position: relative; z-index: 2; padding: 1.4rem 2rem; }
.bo-banniere h3 { font-size: 1.25rem; }
.bo-banniere p { color: #cfdbec; font-size: .86rem; }