/* =====================================================
   STYLE PERSONNALISÉ
   Site Officiel - Arrondissement de Tori-Gare
   Couleurs du Bénin : Vert (#006B3F), Jaune (#FCD116), Rouge (#E8112D)
   ===================================================== */

/* ---------- Variables CSS ---------- */
:root {
    --couleur-primaire: #006B3F;
    --couleur-secondaire: #FCD116;
    --couleur-accent: #E8112D;
    /* Nuances dérivées de la couleur principale. Redéfinies en PHP dans
       l'en-tête du site : ces valeurs ne servent qu'aux pages servies sans
       lui (maintenance, aperçus), pour qu'elles restent aux couleurs du Bénin. */
    --primaire-clair: #00995a;
    --primaire-vif: #008a51;
    --primaire-sombre: #004f2e;
    --primaire-rgb: 0, 107, 63;
    --primaire-sombre-rgb: 0, 79, 46;
    --primaire-nuit-rgb: 0, 41, 24;
    --blanc: #ffffff;
    --noir: #1a1a2e;
    --gris-clair: #f5f6fa;
    --gris: #6c757d;
    --ombre: 0 2px 15px rgba(0,0,0,0.08);
    --ombre-forte: 0 5px 25px rgba(0,0,0,0.12);
    --radius: 10px;
    /* Habillage commun à toutes les cartes du site */
    --radius-carte: 16px;
    --ombre-carte: 0 14px 38px rgba(11, 42, 28, 0.10);
    --ombre-carte-survol: 0 22px 48px rgba(11, 42, 28, 0.16);
    --bordure-carte: 1px solid rgba(0,0,0,0.04);
    --transition: all 0.3s ease;
}

* { box-sizing: border-box; }

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.97rem;
    color: var(--noir);
    background-color: var(--gris-clair);
    line-height: 1.65;
    /* « clip » et non « hidden » : hidden fait du <body> un conteneur de
       défilement, ce qui neutralise position:sticky pour ses descendants —
       donc le bandeau fixe. clip bloque le débordement horizontal sans créer
       ce conteneur. hidden reste déclaré avant, comme repli. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Les ancres ne doivent pas atterrir sous le bandeau fixe : on réserve sa
   hauteur, mesurée au chargement par main.js. */
html { scroll-padding-top: var(--hauteur-bandeau, 110px); }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--noir);
}

a {
    color: var(--couleur-primaire);
    text-decoration: none;
    transition: var(--transition);
}

a:hover { color: var(--couleur-accent); }
img { max-width: 100%; height: auto; }

/* ---------- Bandeau supérieur ---------- */
.top-bar {
    background: var(--couleur-primaire);
    color: var(--blanc);
    padding: 6px 0;
    font-size: 0.8rem;
}

.top-bar a { color: var(--couleur-secondaire); }
.top-bar a:hover { color: var(--blanc); }

/* ---------- Bandeau fixe (en-tête + navigation) ---------- */
/* L'en-tête et la barre de navigation restent visibles au défilement. Ils
   sont collés ensemble par leur conteneur commun : deux « sticky » distincts
   à top:0 se superposeraient au lieu de s'empiler. */
.bandeau-fixe {
    position: sticky; top: 0; z-index: 1030;
    background: var(--blanc);
}

/* ---------- En-tête principal (bandeau officiel) ---------- */
.site-header { background: var(--blanc); box-shadow: var(--ombre); }
/* Grille 3 colonnes : identité et drapeau au plus juste de leur contenu, tout
   l'espace restant allant à la colonne du ministère. Le bloc identité vient
   donc se coller au drapeau, comme sur téléphone. */
.header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    /* « stretch » : les trois colonnes prennent la hauteur de la plus haute,
       chaque contenu restant centré par son propre align-items. Les blocs ont
       donc la même hauteur sans valeur codée en dur. */
    align-items: stretch;
    gap: clamp(8px, 1.6vw, 20px);
    padding: clamp(7px, 1vw, 12px) 0;
    /* Gabarit unique des trois pastilles (armoiries, logo, drapeau).
       Réglé pour suivre la hauteur du bloc de texte, pas la largeur de la
       fenêtre : les corps étant plafonnés par leurs clamp(), ce bloc ne passe
       que de ~60 px à ~67 px entre 992 px et 1440 px, alors qu'un 3.9vw pur
       faisait grandir les pastilles 26 fois plus vite. Le rapport
       pastille / texte restait donc à 0,64 sur petit écran d'ordinateur pour
       monter à 0,70 sur grand — d'où des images qui ne "collaient" pas aux
       écrits. La pente adoucie le maintient à ~0,77 sur toute la plage. */
    --pastille: clamp(38px, 25px + 2.15vw, 51px);
}
.header-official, .header-identity, .header-flag { display: flex; align-items: center; gap: clamp(6px, 1.1vw, 12px); }
.header-official { justify-self: start; min-width: 0; }
.header-identity { justify-self: end; min-width: 0; gap: clamp(6px, 1.2vw, 14px); }
.header-identity-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.site-title, .hero-title { overflow-wrap: break-word; }
.header-flag { justify-self: end; }

/* Emblèmes (armoiries / logo) : petits rectangles arrondis, rendu premium */
.header-emblem {
    width: var(--pastille); height: var(--pastille);
    border-radius: 11px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--primaire-vif), var(--primaire-sombre));
    color: #fff; font-size: clamp(0.95rem, 1.05vw, 1.25rem); overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 6px 14px rgba(var(--primaire-sombre-rgb), 0.26), inset 0 1px 0 rgba(255,255,255,0.30);
}
.header-emblem img { width: 100%; height: 100%; object-fit: contain; }
/* Logo & armoiries : image seule, sans cadre blanc arrondi ni ombre */
/* La classe est posée en PHP et double chaque sélecteur :has() : Safari ne le
   connaît qu'à partir d'iOS 15.4, et un iPhone plus ancien affichait alors le
   cadre vert arrondi derrière des images qui n'en veulent pas. */
.header-emblem:has(img), .header-emblem-img { background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; }
/* Le cadre ayant disparu, le carré n'a plus de rôle visuel : il ne fait plus
   que rapetisser les images plus larges que hautes. Les armoiries (400x316)
   s'y ajustaient par la largeur et n'occupaient que 78 % de la hauteur, là où
   le logo, en portrait, la remplissait entièrement : les deux emblèmes
   paraissaient de tailles différentes. La hauteur devient donc la référence et
   la largeur suit le dessin, avec un plafond pour qu'une image très allongée
   ne pousse pas le texte du ministère. */
.header-emblem:has(img), .header-emblem-img {
    width: auto; height: var(--pastille);
    max-width: calc(var(--pastille) * 1.7);
}
.header-emblem:has(img) img, .header-emblem-img img { width: auto; max-width: 100%; height: 100%; }
.header-logo:has(img):hover, .header-logo.header-emblem-img:hover { box-shadow: none; }
.header-logo { text-decoration: none; transition: var(--transition); }
.header-logo:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(var(--primaire-sombre-rgb), 0.32), inset 0 1px 0 rgba(255,255,255,0.30); }

/* Bloc texte officiel : ministère (2 lignes) puis République en dessous */
.header-official-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; line-height: 1.18; min-width: 0; }
/* Les deux blocs de texte se centrent dans la hauteur commune imposée par la
   grille (align-items: stretch), pour un bandeau visuellement équilibré. */
.header-official-text, .header-identity-text { justify-content: center; }
/* Coupure de la tutelle sur deux lignes, à toutes les tailles : les moitiés
   sont calculées en PHP et passées en blocs ici. */
.header-ministere .hm-line { display: block; }
.header-ministere {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: clamp(0.56rem, 0.32rem + 0.6vw, 0.72rem);
    color: var(--noir); text-transform: uppercase; letter-spacing: 0.1px;
    /* Largeur en em, donc proportionnelle à la police : la 1re ligne forcée
       (« Ministère de la Décentralisation », ~20 em) y tient à toute taille,
       ce qu'une largeur en px ne garantissait pas sous 1200 px. */
    max-width: 23em;
}
/* Filet tricolore (vert / jaune / rouge) séparant le ministère de la mention
   « République du Bénin ». Décoratif : masqué aux lecteurs d'écran côté HTML.
   Les deux forment un bloc à part, centré sur la largeur de la mention et non
   sur celle du ministère. */
.header-rep-block { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.header-rule {
    display: block; width: clamp(40px, 6vw, 74px); height: clamp(2px, 0.25vw, 3px);
    border-radius: 2px; flex: none;
    background: linear-gradient(to right,
        #008751 0 33.333%,
        #fcd116 33.333% 66.666%,
        #e8112d 66.666% 100%);
}
.header-republique {
    font-family: 'Montserrat', sans-serif; font-weight: 800;
    font-size: clamp(0.64rem, 0.36rem + 0.72vw, 0.88rem);
    color: var(--couleur-primaire); text-transform: uppercase; letter-spacing: 0.4px;
}

/* Drapeau uploadé — pastille ronde (même taille visuelle que le logo) */
.benin-flag-img {
    width: calc(var(--pastille) - 2px); height: calc(var(--pastille) - 2px);
    object-fit: cover; border-radius: 50%; background: #fff;
    box-shadow: var(--ombre); border: 2px solid #fff; outline: 1px solid rgba(0,0,0,0.06);
}

/* Surtitre de rattachement administratif, au-dessus du nom du site : lisible
   sans concurrencer le titre. C'était un <h5> Bootstrap, qui pesait autant que
   le titre et ajoutait une marge basse de 8 px cassant le rythme du bloc. */
.header-commune {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: clamp(0.64rem, 0.36rem + 0.72vw, 0.88rem);
    text-transform: uppercase; letter-spacing: 0.6px; color: var(--noir);
    line-height: 1.2; margin: 0 0 3px;
}
.site-title {
    font-size: clamp(0.86rem, 0.5rem + 1.15vw, 1.32rem);
    margin: 0; font-weight: 800; color: var(--couleur-primaire); line-height: 1.15;
}
.site-title a { color: var(--couleur-primaire); text-decoration: none; }
.site-slogan {
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-style: italic;
    font-size: clamp(0.56rem, 0.32rem + 0.6vw, 0.72rem);
    /* Le slogan héritait du line-height 1.5 du body, soit ~6 px de plus que
       les autres lignes du bandeau : c'est ce qui creusait l'écart de hauteur
       avec le bloc officiel. */
    line-height: 1.25;
    color: var(--couleur-accent); margin: 3px 0 0; letter-spacing: 0.2px;
}

/* Drapeau du Bénin (vert vertical + jaune/rouge horizontaux) — pastille ronde (taille du logo) */
.benin-flag { display: flex; width: calc(var(--pastille) - 2px); height: calc(var(--pastille) - 2px); border-radius: 50%; overflow: hidden; box-shadow: var(--ombre); border: 2px solid #fff; outline: 1px solid rgba(0,0,0,0.08); }
.benin-flag .bf-green { width: 40%; background: #008751; }
.benin-flag .bf-yr { flex: 1; display: flex; flex-direction: column; }
.benin-flag .bf-yellow { flex: 1; background: #fcd116; }
.benin-flag .bf-red { flex: 1; background: #e8112d; }

/* ---------- Navigation principale ---------- */
.navbar-main {
    background: var(--couleur-primaire);
    box-shadow: var(--ombre);
    padding: 0;
}
.navbar-main .navbar-brand { color: var(--blanc); font-weight: 700; }
.navbar-main { transition: box-shadow 0.3s ease, background 0.3s ease; }
.navbar-main.navbar-scrolled { background: var(--primaire-sombre); box-shadow: 0 6px 18px rgba(0,0,0,0.22); }
.navbar-main .navbar-nav { gap: clamp(3px, 0.4vw, 8px); padding: 9px 0; flex-wrap: wrap; justify-content: center; }
.navbar-main .navbar-nav .nav-link {
    color: rgba(255,255,255,0.95);
    font-weight: 600;
    /* Taille et marges qui suivent la largeur de l'écran : le menu se
       resserre au lieu de passer à la ligne. */
    font-size: clamp(0.64rem, 0.30rem + 0.55vw, 0.9rem);
    padding: 8px clamp(5px, 0.6vw, 15px);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Largeur plancher commune : les intitulés courts ne paraissent plus
       riquiqui à côté des longs, sans forcer une largeur unique qui aurait
       fait déborder « Documents et Textes officiels ». */

    background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 5px rgba(0,0,0,0.10);
    white-space: nowrap;
    transition: var(--transition);
}
.navbar-main .navbar-nav .nav-link:hover {
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 14px rgba(0,0,0,0.18);
}
.navbar-main .navbar-nav .nav-link.active {
    color: #4a3a00;
    background: linear-gradient(145deg, #ffe36b, var(--couleur-secondaire));
    border-color: rgba(255,255,255,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(252,209,22,0.45);
    font-weight: 700;
}
.navbar-main .navbar-nav .nav-link.active:hover {
    color: #4a3a00;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 7px 16px rgba(252,209,22,0.5);
}
.navbar-main .navbar-nav .nav-link i { font-size: 0.9rem; }
.navbar-main .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
    margin: 8px 0;
}
.navbar-main .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-main .dropdown-menu {
    border: none;
    box-shadow: var(--ombre-forte);
    border-radius: 8px;
    border-top: 3px solid var(--couleur-secondaire);
    padding: 8px 0;
}
.navbar-main .dropdown-item { font-size: 0.9rem; padding: 8px 18px; }
.navbar-main .dropdown-item:hover { background: var(--gris-clair); color: var(--couleur-primaire); }
.navbar-main .dropdown-item.active { background: var(--couleur-primaire); color: #fff; }

/* ---------- Bandeau Flash Info ---------- */
.bandeau-actu { background: var(--noir); color: #fff; padding: 9px 0; overflow: hidden; }
.bandeau-actu .d-flex { align-items: center; }
.bandeau-label {
    background: var(--couleur-accent); color: #fff; font-weight: 700;
    font-size: 0.75rem; padding: 4px 12px; border-radius: 4px;
    white-space: nowrap; margin-right: 16px; text-transform: uppercase; letter-spacing: 0.5px;
}
.bandeau-actu .d-flex { min-width: 0; }
.bandeau-scroll { overflow: hidden; flex: 1 1 0; min-width: 0; }
.bandeau-track { display: inline-flex; align-items: center; white-space: nowrap; animation: bandeau-defile 28s linear infinite; }
.bandeau-item { color: #fff; font-size: 0.86rem; font-weight: 500; }
.bandeau-item:hover { color: var(--couleur-secondaire); }
.bandeau-sep { margin: 0 14px; color: var(--couleur-secondaire); }
@keyframes bandeau-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- HERO (Écran d'accueil) ---------- */
.hero-section {
    position: relative;
    background-color: var(--primaire-sombre);
    background-image: var(--hero-img-defaut, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
    --voile-intensite: 1;
}
/* Intensité réglable en admin : 0 = photos à nu, 1 = voile plein tel que
   conçu à l'origine. calc() dans l'alpha de rgba() applique le curseur
   sans dupliquer le dégradé. */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg,
            rgba(var(--primaire-nuit-rgb), calc(0.82 * var(--voile-intensite))) 0%,
            rgba(var(--primaire-nuit-rgb), calc(0.55 * var(--voile-intensite))) 42%,
            rgba(var(--primaire-nuit-rgb), calc(0.22 * var(--voile-intensite))) 100%),
        linear-gradient(to top, rgba(var(--primaire-nuit-rgb), calc(0.45 * var(--voile-intensite))), rgba(0,0,0,0) 55%);
}
/* Diaporama de fond : plusieurs photos superposées, une seule visible à la
   fois (opacité), le voile ci-dessus et le texte restant par-dessus. */
.hero-bg-diaporama { position: absolute; inset: 0; z-index: 0; }
.hero-bg-layer {
    position: absolute; inset: 0;
    background-image: var(--hero-img-defaut, none);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0; transition: opacity 1.6s ease;
}
.hero-bg-layer.actif { opacity: 1; }
/* Glissement : l'image entrante glisse légèrement en plus du fondu. */
.hero-bg-diaporama[data-effet="glissement"] .hero-bg-layer {
    transform: translateX(3%); transition: opacity 1.1s ease, transform 1.5s ease;
}
.hero-bg-diaporama[data-effet="glissement"] .hero-bg-layer.actif { transform: translateX(0); }
/* Zoom lent (façon Ken Burns) tant que la photo reste affichée. */
.hero-bg-diaporama[data-effet="zoom"] .hero-bg-layer { transform: scale(1.08); }
.hero-bg-diaporama[data-effet="zoom"] .hero-bg-layer.actif { animation: hero-zoom-lent 9s ease-out forwards; }
@keyframes hero-zoom-lent { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .hero-bg-layer { transition: none; animation: none !important; }
}
/* Le titre et le message remontent vers le bandeau d'infos, les boutons
   descendent : le bloc occupe la hauteur du hero au lieu de se tasser en haut. */
.hero-inner { position: relative; z-index: 2; padding: 26px 0 82px; }
/* Arrière-plan uni, choisi dans l'administration à la place de la photo.
   Le voile sombre du dessus est remplacé par un simple fond de page : sur un
   aplat, il ne servait plus qu'à assombrir la couleur retenue. */
.hero-fond-uni { background-color: var(--hero-fond); background-image: none; }
.hero-fond-uni::before {
    background: linear-gradient(to top, rgba(0,0,0,0.16), rgba(0,0,0,0) 55%);
}
/* Couleur claire : le blanc du texte deviendrait illisible. La classe est
   posée en PHP d'après la luminosité perçue de la couleur choisie. */
.hero-fond-clair { color: var(--noir); }
.hero-fond-clair .hero-title { color: var(--noir); text-shadow: none; }
.hero-fond-clair .hero-subtitle { color: rgba(26,26,46,0.86); text-shadow: none; }
.hero-fond-clair .hero-btn-outline { border-color: rgba(26,26,46,0.55); color: var(--noir); }
.hero-fond-clair .hero-btn-outline:hover { background: var(--noir); color: #fff; border-color: var(--noir); }
.hero-fond-clair::before {
    background: linear-gradient(to top, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%);
}

.hero-title {
    color: #fff;
    font-family: 'Anton', 'Oswald', 'Montserrat', sans-serif;
    font-size: clamp(1.7rem, 4.5vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.05;
    margin: 0 0 14px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 3px 22px rgba(0,0,0,0.45);
}
.hero-accent {
    width: 84px; height: 4px; border-radius: 4px;
    background: var(--couleur-secondaire);
    margin: 0 0 20px;
    box-shadow: 0 2px 12px rgba(252,209,22,0.55);
}
.hero-subtitle {
    font-size: 1.1rem;
    max-width: 560px;
    color: rgba(255,255,255,0.95);
    /* Respiration avant les boutons, proportionnelle à la largeur : 30 px fixes
       serraient le bloc sur grand écran et l'étiraient sur petit. */
    margin-bottom: clamp(24px, 5.5vw, 72px);
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 8px;
    font-weight: 600; border: 2px solid transparent;
    transition: var(--transition);
}
.hero-btn-primary { background: var(--couleur-secondaire); color: #1a1a2e; }
.hero-btn-primary:hover { background: #fff; color: var(--couleur-primaire); transform: translateY(-2px); }
.hero-btn-outline { border-color: rgba(255,255,255,0.7); color: #fff; }
.hero-btn-outline:hover { background: #fff; color: var(--couleur-primaire); transform: translateY(-2px); }

/* Carte Chef d'Arrondissement dans le hero */
.hero-chef-card {
    background: rgba(255,255,255,0.97);
    border-radius: var(--radius-carte);
    padding: 28px 26px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    border-top: 5px solid var(--couleur-secondaire);
    max-width: 340px;
    margin: 0 0 0 auto;
}
.chef-photo-wrap {
    width: 100%; max-width: 210px; height: 220px;
    margin: 0 auto 18px;
    border-radius: 18px;
    overflow: hidden;
    border: 3px solid var(--couleur-primaire);
    box-shadow: 0 10px 26px rgba(0,0,0,0.24);
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-clair));
    display: flex; align-items: center; justify-content: center;
}
.chef-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.chef-photo-wrap i { color: #fff; font-size: 4rem; }

/* ---------- Carrousel villages ---------- */
.village-carousel { max-width: 820px; margin: 0 auto; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre-forte); }
.village-slide { display: flex; flex-direction: column; }
.village-slide-photo { height: 360px; background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-clair)); }
.village-slide-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.village-slide-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 4rem; }
.village-slide-body { padding: 26px 30px 30px; text-align: center; }
.village-slide-body h3 { margin: 0 0 12px; color: var(--couleur-primaire); }
.village-slide-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; color: var(--gris); font-size: 0.92rem; margin-bottom: 14px; }
.village-slide-meta i { color: var(--couleur-primaire); }
.village-slide-body p { color: var(--gris); max-width: 620px; margin: 0 auto 20px; line-height: 1.7; }
.village-carousel .carousel-control-prev, .village-carousel .carousel-control-next { top: 0; height: 360px; width: 9%; opacity: 1; }
.village-carousel .carousel-control-prev-icon, .village-carousel .carousel-control-next-icon {
    background-color: rgba(var(--primaire-sombre-rgb), 0.85); border-radius: 50%; width: 46px; height: 46px; background-size: 44% 44%; box-shadow: var(--ombre);
}
.village-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.village-carousel .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--couleur-primaire); }
.chef-label {
    display: inline-block; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 1px; color: var(--couleur-accent); font-weight: 700; margin-bottom: 8px;
}
.chef-name { color: var(--noir); font-size: 1.3rem; margin: 0 0 3px; }
.chef-title { color: var(--gris); font-size: 0.88rem; margin: 0 0 16px; }
.chef-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; color: var(--couleur-primaire);
}
.chef-link:hover { color: var(--couleur-accent); gap: 10px; }

/* ---------- Sections génériques ---------- */
.section { padding: 58px 0; }
.section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700;
    letter-spacing: -0.3px; line-height: 1.25; margin: 0;
}
/* Couleurs du drapeau fixes, comme les autres traits tricolores du site :
   ce repère ne doit pas changer si la couleur du thème change. */
.section-divider {
    width: 70px; height: 4px;
    background: linear-gradient(to right, #008751 0 34%, #fcd116 34% 67%, #e8112d 67% 100%);
    border-radius: 2px; margin: 14px auto 18px;
}
.section-subtitle { color: var(--gris); max-width: 640px; margin: 0 auto; }

/* ---------- Chiffres clés (bandeau flottant) ---------- */
.stats-band-wrap { position: relative; z-index: 5; }
.stats-band {
    margin-top: -52px;
    background: #fff;
    border-radius: var(--radius-carte);
    box-shadow: var(--ombre-carte-survol);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}
/* Chaque chiffre est un lien vers sa rubrique. Le nombre est posé dans la
   pastille colorée et son libellé dessous : en colonne, la tuile tient dans la
   moitié d'un écran de téléphone, là où la disposition en ligne (pastille à
   gauche, texte à droite) obligeait à repasser sur une seule colonne. */
.stat-item {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 18px;
    border-right: 1px solid #eef0f2;
    text-align: center; text-decoration: none;
    transition: var(--transition);
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(var(--primaire-rgb), 0.06); }
.stat-item:hover .stat-icon { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--primaire-rgb), 0.30); }
.stat-item .stat-icon {
    min-width: 64px; height: 56px; padding: 0 14px; border-radius: 14px; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: var(--transition);
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-clair));
}
.stat-number { font-family: 'Montserrat', sans-serif; font-size: 1.85rem; font-weight: 800; color: #fff; line-height: 1; }
.stat-label { color: var(--gris); font-size: 0.85rem; font-weight: 600; }

/* Ancienne carte statistique (compat.) */
.stat-card { background: #fff; border-radius: var(--radius-carte); padding: 26px 18px; text-align: center; box-shadow: var(--ombre-carte); border: var(--bordure-carte); height: 100%; }

/* ---------- Cartes Articles ---------- */
.card-article {
    background: #fff; border-radius: var(--radius-carte); overflow: hidden;
    box-shadow: var(--ombre-carte); border: var(--bordure-carte); transition: var(--transition);
    height: 100%; display: flex; flex-direction: column;
}
.card-article:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); }
.card-media { display: block; overflow: hidden; position: relative; }
.card-media img { transition: transform 0.35s ease; position: relative; z-index: 1; }
.card-media:hover img { transform: scale(1.04); }
/* Photo entière, jamais rognée ni déformée : object-fit:cover coupait le
   sujet d'une photo prise au téléphone (portrait, personnes debout...) ;
   object-fit:fill étirait toute photo dont le format ne correspondait pas
   exactement au cadre. Avec contain, l'espace qui resterait vide de part et
   d'autre est comblé par une copie floutée et agrandie de la même photo
   (déjà posée en background-image inline sur .card-media) plutôt que laissé
   transparent : le flou ne touche que ce fond, jamais la photo nette. */
.card-media-photo::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background-image: inherit;
    background-size: cover; background-position: center;
    filter: blur(16px) brightness(0.85);
    transform: scale(1.15);
}
.card-article .card-img-top { height: 190px; width: 100%; object-fit: contain; display: block; }
.card-img-vide { background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-clair)); display: block; }
.card-article .card-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; }
.card-article .card-date { font-size: 0.82rem; color: var(--gris); margin: 10px 0 4px; }
.card-article .card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 16px; line-height: 1.35; flex-grow: 1; }
.card-article .card-title a { color: var(--noir); font-weight: 700; }
.card-article .card-title a:hover { color: var(--couleur-primaire); }
.card-article .card-text { color: var(--gris); font-size: 0.92rem; flex-grow: 1; }
.card-meta { font-size: 0.82rem; color: var(--gris); border-top: 1px solid #eee; padding-top: 10px; margin-top: 12px; }
.badge-type {
    display: inline-block; font-size: 0.7rem; font-weight: 700;
    padding: 5px 12px; border-radius: 50px; background: var(--couleur-primaire);
    color: #fff !important; text-transform: uppercase; letter-spacing: 0.4px;
}

/* ---------- Carrousel défilant de la page d'accueil ---------- */
.home-carousel { position: relative; }
.hc-track {
    display: flex; gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    -ms-overflow-style: none;      /* IE/Edge */
    scrollbar-width: none;          /* Firefox */
}
.hc-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.hc-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc(33.333% - 16px);
    display: flex;                  /* pour que la carte prenne toute la hauteur */
}
.hc-item > * { width: 100%; }
.hc-btn {
    position: absolute; top: calc(50% - 9px); transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: var(--couleur-primaire); color: #fff; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; box-shadow: var(--ombre-forte); cursor: pointer;
    opacity: 0.92; transition: var(--transition);
}
/* Le chevron est tracé en CSS : les boutons étaient vides dans le HTML et
   n'apparaissaient que comme deux pastilles vertes sans signification. */
.hc-btn::before {
    content: ""; width: 10px; height: 10px;
    border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
}
.hc-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.hc-next::before { transform: rotate(45deg); margin-right: 4px; }
.hc-btn:hover { background: var(--couleur-accent); opacity: 1; transform: translateY(-50%) scale(1.06); }
.hc-btn:disabled { opacity: 0.35; cursor: default; }

/* Pastilles de position, construites en JavaScript. */
.hc-points { display: none; justify-content: center; gap: 7px; margin-top: 4px; }
.hc-points button {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
    background: rgba(var(--primaire-rgb), 0.28); cursor: pointer;
    transition: var(--transition);
}
.hc-points button.actif { width: 22px; border-radius: 5px; background: var(--couleur-primaire); }
.hc-prev { left: -10px; }
.hc-next { right: -10px; }
@media (max-width: 991px) {
    .hc-item { width: calc(50% - 12px); }
}
@media (max-width: 575px) {
    .hc-item { width: 85%; }         /* 1 carte visible + aperçu de la suivante */
    /* Sur téléphone on fait défiler au doigt : les flèches n'apportent rien
       et masquent une partie de la carte. Les pastilles disent où l'on en est. */
    .hc-btn { display: none; }
    .hc-points { display: flex; }
}

/* ---------- Cartes Services ---------- */
.card-service {
    background: #fff; border-radius: var(--radius-carte); overflow: hidden;
    box-shadow: var(--ombre-carte); border: var(--bordure-carte);
    transition: var(--transition); height: 100%;
    display: flex; flex-direction: column;
}
.card-service:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); }
/* Photo à fleur de carte, comme les vignettes d'actualité. */
.service-photo { width: 100%; height: 172px; overflow: hidden; flex: none; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.card-service:hover .service-photo img { transform: scale(1.05); }
/* Sans photo : emblème par défaut, dessiné en SVG dans la page. */
.service-embleme {
    height: 172px; flex: none; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.92);
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-clair));
}
.service-embleme svg { display: block; opacity: 0.95; }
.service-corps {
    padding: 24px 26px 26px; display: flex; flex-direction: column; flex-grow: 1;
    min-height: 168px;
}
.card-service h5 {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 1.15rem; color: var(--noir); margin: 0 0 10px; line-height: 1.3;
    padding-bottom: 12px; border-bottom: 2px solid var(--couleur-secondaire);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    align-self: center; text-align: center;
}
/* Texte borné à quatre lignes : toutes les cartes gardent la même hauteur. */
.card-service .prose {
    font-size: 0.92rem; color: var(--gris);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.card-service .prose p { margin-bottom: 0.7em; }

.bandeau-horaires {
    margin-top: 46px; padding: 30px 34px; border-radius: var(--radius-carte);
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-sombre)); color: #fff;
    box-shadow: var(--ombre-carte);
}
.bandeau-horaires h4 {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    color: #fff; font-size: 1.35rem; margin: 0 0 10px;
}
.bandeau-horaires p { margin: 0; font-size: 1.02rem; color: rgba(255,255,255,0.92); line-height: 1.7; }

/* ---------- Cartes Projets ---------- */
.card-projet {
    background: #fff; border-radius: var(--radius-carte); overflow: hidden;
    box-shadow: var(--ombre-carte); border: var(--bordure-carte); transition: var(--transition); height: 100%;
}
.card-projet:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); }
.projet-img { width: 100%; height: 190px; object-fit: cover; display: block; }
.card-projet h5 a { color: var(--noir); }
.card-projet h5 a:hover { color: var(--couleur-primaire); }
.projet-body { padding: 20px; }
.statut-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.4px; }
.statut-en_cours { background: #fff3cd; color: #8a6d0b; }
.statut-planifie { background: #e2e3e5; color: #41464b; }
.statut-termine { background: #d1e7dd; color: #0f5132; }

/* ---------- Cartes Villages ---------- */
.card-village {
    background: #fff; border-radius: var(--radius-carte); overflow: hidden;
    box-shadow: var(--ombre-carte); border: var(--bordure-carte); transition: var(--transition); height: 100%;
    display: flex; flex-direction: column;
}
.card-village:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); }
/* .village-img sert à la fois de vignette <img> et de placeholder <div> */
.village-img {
    height: 190px; width: 100%; object-fit: cover; display: block; flex: none;
}
span.village-img, div.village-img {
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-clair));
}
.card-village h5 a { color: var(--noir); }
.card-village h5 a:hover { color: var(--couleur-primaire); }
.village-body { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; }
.village-meta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
    font-size: 0.82rem; color: var(--gris); margin-bottom: 10px;
}
.village-meta i { color: var(--couleur-primaire); }
.village-desc {
    font-size: 0.88rem; color: var(--gris); line-height: 1.6; text-align: center;
    margin-bottom: 16px;
}

/* ---------- Cartes Documents ---------- */
/* ---------- Grande barre de titre ---------- */
.page-hero {
    position: relative;
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-sombre));
    color: #fff; overflow: hidden;
    /* Hauteur identique d'une page à l'autre, que le titre soit suivi ou non
       d'un sous-titre, et sur une ou deux lignes. */
    min-height: 200px; padding: 30px 0;
    display: flex; align-items: center;
}
.page-hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 85% -20%, rgba(252,209,22,0.22), transparent 42%),
        radial-gradient(circle at 0% 120%, rgba(232,17,45,0.18), transparent 40%);
    pointer-events: none;
}
.page-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--couleur-secondaire), var(--couleur-accent));
}
.page-hero .container { position: relative; z-index: 1; width: 100%; }
/* Le filet est porté par le conteneur, et non par le titre seul : il couvre
   ainsi le titre et son sous-titre. */
.page-hero .container::before {
    content: ""; position: absolute;
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    top: 0.3rem; bottom: 0.3rem;
    width: 4px; border-radius: 2px; background: var(--couleur-secondaire);
}
.page-hero h1 {
    position: relative; color: #fff; margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700; letter-spacing: -0.3px; line-height: 1.2;
    font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
    text-shadow: 0 2px 18px rgba(0,0,0,0.25);
    padding-left: 20px;
}
.page-hero .breadcrumb { margin: 0; }
.page-hero .hero-meta {
    margin: 14px 0 0; padding-left: 20px;
    color: rgba(255,255,255,0.82); font-size: 0.9rem; letter-spacing: 0.2px;
}
.hero-meta-sep { margin: 0 7px; color: var(--couleur-secondaire); }

.page-hero .hero-titre-article {
    font-size: clamp(1.5rem, 1.1rem + 2.1vw, 2.55rem);
    line-height: 1.22; margin: 0; max-width: 100%;
    text-align: justify; text-align-last: left;
    overflow-wrap: break-word; hyphens: auto;
}
.article-titre { margin-bottom: 8px !important; }
.article-sous-titre {
    font-size: clamp(1rem, 0.94rem + 0.35vw, 1.18rem);
    color: var(--gris); font-weight: 500; line-height: 1.5; margin: 0 0 6px;
}

/* Emblème d'un service sans photo, sur l'accueil */
.service-icon {
    width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-clair));
}

/* Actions d'un document : en toutes lettres, sans cadre de bouton. */
.lien-doc {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.88rem; font-style: italic; white-space: nowrap;
    color: var(--gris); padding-bottom: 2px;
    border-bottom: 1px solid rgba(108,117,125,0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.lien-doc:hover { color: var(--couleur-primaire); border-bottom-color: var(--couleur-primaire); }
.lien-doc-fort { color: var(--couleur-primaire); font-weight: 700; }
.lien-doc-fort:hover { color: var(--primaire-sombre); }
/* ---------- Fiche de document ---------- */
.doc-liste { display: grid; gap: 22px; grid-auto-rows: 1fr; }
.doc-fiche {
    display: grid;
    grid-template-columns: 210px 220px minmax(0, 1fr) 170px;
    align-items: stretch;
    background: var(--blanc); border-radius: var(--radius-carte);
    border: var(--bordure-carte); box-shadow: var(--ombre-carte);
    overflow: hidden; transition: var(--transition);
}
.doc-fiche:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); }

/* Bloc de date : aplat de couleur, comme sur la maquette. */
.doc-fiche-date {
    display: flex; align-items: center; justify-content: center; padding: 34px 24px;
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-sombre));
    color: #fff; text-align: center; font-weight: 700; font-size: 1.05rem; line-height: 1.5;
}
.doc-fiche-reperes {
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    padding: 26px 24px; font-size: 0.92rem; color: var(--noir);
}
.doc-fiche-reperes p { margin: 0; }
.doc-fiche-reperes strong { font-weight: 700; }

.doc-fiche-corps { padding: 26px 30px; border-left: 1px solid #eef0f2; min-width: 0; }
.doc-fiche-corps h2 {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 1.12rem; line-height: 1.35; color: var(--couleur-primaire);
    margin: 0 0 12px; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.doc-fiche-corps .prose {
    font-size: 0.92rem; color: #33383d;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.doc-fiche-corps .prose p { margin-bottom: 0.7em; }
.doc-fiche-corps .prose > :last-child { margin-bottom: 0; }

.doc-fiche-actions {
    display: flex; flex-direction: column; justify-content: center; gap: 16px;
    padding: 26px 24px; border-left: 1px solid #eef0f2;
}
.doc-fiche-actions .lien-doc { display: inline-flex; align-items: center; gap: 8px; border-bottom: 0; }
.doc-fiche-actions .lien-doc svg { flex: none; }

@media (max-width: 1199px) {
    .doc-fiche { grid-template-columns: 190px minmax(0, 1fr) 160px; }
    .doc-fiche-reperes { grid-column: 1; grid-row: 2; padding-top: 0; }
    .doc-fiche-date { grid-row: 1; }
    .doc-fiche-corps { grid-column: 2; grid-row: 1 / span 2; }
    .doc-fiche-actions { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 767px) {
    .doc-fiche { grid-template-columns: 1fr; }
    .doc-fiche-date { padding: 18px; font-size: 0.98rem; }
    .doc-fiche-reperes { grid-column: 1; grid-row: auto; padding: 20px 22px 0; }
    .doc-fiche-corps, .doc-fiche-actions {
        grid-column: 1; grid-row: auto; border-left: 0; padding: 20px 22px;
    }
    .doc-fiche-actions {
        flex-direction: row; gap: 26px; border-top: 1px solid #eef0f2; padding-top: 16px;
    }
}
/* ---------- Galerie ---------- */
.galerie-item { position: relative; border-radius: var(--radius-carte); overflow: hidden; box-shadow: var(--ombre-carte); cursor: pointer; }
.galerie-item img { width: 100%; height: 220px; object-fit: cover; transition: var(--transition); }
.galerie-item:hover img { transform: scale(1.05); }
.galerie-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 34px 16px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.85));
    pointer-events: none; /* laisse le clic atteindre la photo pour ouvrir la lightbox */
}
/* Le titre est un span : la règle globale des h1-h6 le repeignait en noir
   sur fond sombre, et il devenait illisible. */
.galerie-titre {
    display: block; color: #fff; font-weight: 600; font-size: 0.94rem;
    line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Bouton retour en haut ---------- */
.btn-retour-haut {
    position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px;
    border-radius: 50%; background: var(--couleur-primaire); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--ombre-forte); opacity: 0; visibility: hidden;
    transition: var(--transition); z-index: 999;
}
.btn-retour-haut.visible { opacity: 1; visibility: visible; }
.btn-retour-haut:hover { background: var(--couleur-accent); color: #fff; transform: translateY(-3px); }

/* ---------- Détail article ---------- */
.article-detail .article-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); margin: 20px 0; }
.article-meta { color: var(--gris); font-size: 0.9rem; margin-bottom: 12px; }

/* =====================================================
   CONTENU ÉDITORIAL PREMIUM (prose) — mise en forme
   unifiée et justifiée pour toutes les pages de texte
   ===================================================== */
.content-card {
    position: relative; overflow: hidden;
    background: #fff;
    border-radius: var(--radius-carte);
    box-shadow: var(--ombre-carte);
    padding: clamp(1.5rem, 1rem + 2.6vw, 3.2rem);
    border: 1px solid rgba(0,0,0,0.04);
}
.content-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--couleur-primaire) 0 34%, var(--couleur-secondaire) 34% 67%, var(--couleur-accent) 67% 100%);
}
.content-card + .content-card { margin-top: 28px; }

/* Titre de section à l'intérieur d'une carte de contenu */
.content-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.15rem);
    font-weight: 700; line-height: 1.25; color: var(--noir); margin: 0;
    letter-spacing: -0.3px;
}

/* Puces d'information (chef, population, dates…) */
.info-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 50px;
    background: rgba(var(--primaire-rgb), 0.08); color: var(--couleur-primaire);
    font-size: 0.88rem; font-weight: 500; line-height: 1;
}
.info-chip i { font-size: 1rem; }
.info-chip strong { color: var(--noir); font-weight: 700; }

.prose,
.article-content {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.96rem, 0.9rem + 0.3vw, 1.06rem);
    line-height: 1.8;
    color: #2b2b3a;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
.prose > :first-child,
.article-content > :first-child { margin-top: 0; }
.prose > :last-child,
.article-content > :last-child { margin-bottom: 0; }
.prose p,
.article-content p { margin: 0 0 1.15em; }

/* Signature institutionnelle en pied de publication (actualités, activités, projets) */
.publication-signature {
    margin: 26px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e6eaef;
    text-align: right;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--couleur-primaire);
}
.prose .lead, .prose p.lead,
.article-content .lead {
    font-size: 1.16em;
    line-height: 1.7;
    color: #1f1f2e;
    font-weight: 500;
    text-align: left;
    margin-bottom: 1.1em;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6 {
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.3;
    color: var(--noir);
    margin: 1.7em 0 0.65em;
    text-align: left;
    scroll-margin-top: 90px;
}
.prose h2, .article-content h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); }
.prose h3, .article-content h3 {
    font-size: clamp(1.22rem, 1.08rem + 0.7vw, 1.5rem);
    position: relative; padding-left: 16px;
}
.prose h3::before, .article-content h3::before {
    content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em;
    width: 5px; border-radius: 3px; background: var(--couleur-secondaire);
}
.prose h4, .article-content h4 { font-size: 1.2rem; color: var(--couleur-primaire); }
.prose a, .article-content a {
    color: var(--couleur-primaire); font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(var(--primaire-rgb), 0.35);
}
.prose a:hover, .article-content a:hover { color: var(--couleur-accent); text-decoration-color: currentColor; }
.prose ul, .prose ol,
.article-content ul, .article-content ol { margin: 0 0 1.15em; padding-left: 1.4em; text-align: left; }
.prose li, .article-content li { margin-bottom: 0.5em; }
.prose ul li::marker, .article-content ul li::marker { color: var(--couleur-primaire); }
.prose img, .article-content img { border-radius: var(--radius); box-shadow: var(--ombre); margin: 1.5em auto; display: block; }
.prose figure, .article-content figure { margin: 1.8em 0; }
.prose figure img, .article-content figure img { margin: 0 auto; width: 100%; }
.prose figcaption, .article-content figcaption {
    margin-top: 10px; font-size: 0.88rem; color: var(--gris);
    text-align: center; font-style: italic;
}
.prose blockquote, .article-content blockquote {
    margin: 1.6em 0; padding: 0.7em 1.4em;
    border-left: 4px solid var(--couleur-secondaire);
    background: var(--gris-clair); border-radius: 0 10px 10px 0;
    color: #444; font-style: italic; text-align: left;
}
.prose blockquote p:last-child, .article-content blockquote p:last-child { margin-bottom: 0; }
.prose hr, .article-content hr { border: 0; border-top: 1px solid #e6e8ec; margin: 2em 0; }
.prose strong, .article-content strong { color: var(--noir); font-weight: 700; }
.prose table, .article-content table {
    width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95em;
    display: block; overflow-x: auto;
}
.prose th, .prose td,
.article-content th, .article-content td { border: 1px solid #e6e8ec; padding: 10px 14px; text-align: left; }
.prose thead th, .article-content thead th { background: var(--gris-clair); color: var(--couleur-primaire); }
.prose figcaption, .article-content figcaption { text-align: center; font-size: 0.85em; color: var(--gris); margin-top: 8px; }

/* En dessous de 576px : le justifié crée des « rivières » de blanc,
   on repasse en alignement à gauche sans césure. */
@media (max-width: 575px) {
    /* Contenu justifié aussi sur téléphone ; la césure auto évite les grands espaces */
    .prose, .article-content { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
    .content-card { border-radius: 12px; }
}

/* ---------- Formulaire de contact ---------- */
.contact-info-card { background: var(--couleur-primaire); color: #fff; border-radius: var(--radius); padding: 30px; height: 100%; }
.contact-info-card h4 { color: #fff; margin-bottom: 20px; }
.contact-info-item { display: flex; gap: 12px; margin-bottom: 18px; }
.contact-info-item i { font-size: 1.2rem; color: var(--couleur-secondaire); }
.contact-form {
    background: #fff; border-radius: var(--radius-carte); position: relative; overflow: hidden;
    padding: clamp(1.5rem, 1rem + 2.6vw, 3.2rem);
    box-shadow: var(--ombre-carte);
    border: 1px solid rgba(0,0,0,0.04);
}
.contact-form::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--couleur-primaire) 0 34%, var(--couleur-secondaire) 34% 67%, var(--couleur-accent) 67% 100%);
}

/* ---------- Pied de page ---------- */
.site-footer { background: var(--primaire-sombre); color: rgba(255,255,255,0.86); margin-top: 48px; }
.footer-top { padding: 54px 0 46px; }
.footer-title {
    color: #fff; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 800; margin: 0 0 22px; letter-spacing: -0.2px;
}
.footer-text { font-size: 0.92rem; line-height: 1.75; color: rgba(255,255,255,0.78); margin: 0 0 16px; }

.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { font-size: 0.94rem; line-height: 1.6; margin-bottom: 14px; color: rgba(255,255,255,0.86); overflow-wrap: anywhere; }
.footer-contact a { color: rgba(255,255,255,0.86); }
.footer-contact a:hover { color: var(--couleur-secondaire); }

.footer-links li { margin-bottom: 13px; }
.footer-links a {
    color: rgba(255,255,255,0.86); font-size: 0.94rem; line-height: 1.5;
    display: inline-block; padding-left: 18px; position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
}
.footer-links a::before {
    content: "\203A"; position: absolute; left: 0; top: -1px;
    color: var(--couleur-secondaire); font-size: 1.15rem; line-height: 1.35;
}
.footer-links a:hover { color: #fff; transform: translateX(3px); }

.footer-suivez {
    margin-top: 22px; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px;
}
.footer-suivez > span {
    font-weight: 600; font-size: 0.85rem;
    color: rgba(255,255,255,0.7); margin: 0; white-space: nowrap;
}
.footer-suivez ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 7px;
}
.footer-suivez a {
    color: #fff; font-size: 0.92rem; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 1px;
}
.footer-suivez a:hover { color: var(--couleur-secondaire); border-bottom-color: var(--couleur-secondaire); }
.footer-suivez a.lien-reseau {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%; border-bottom-width: 1px; padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-suivez a.lien-reseau:hover {
    background: var(--couleur-secondaire); border-color: var(--couleur-secondaire);
    color: #1c1c1c; transform: translateY(-2px);
}

.footer-newsletter-form { display: flex; flex-direction: column; gap: 12px; }
.footer-newsletter-form .form-control {
    border: 1px solid rgba(255,255,255,0.3); border-radius: 4px;
    background: rgba(255,255,255,0.06); color: #fff;
    padding: 13px 15px; font-size: 0.94rem;
}
.footer-newsletter-form .form-control::placeholder { color: rgba(255,255,255,0.55); }
.footer-newsletter-form .form-control:focus {
    background: rgba(255,255,255,0.1); color: #fff;
    border-color: var(--couleur-secondaire); box-shadow: none;
}
.btn-newsletter {
    align-self: flex-start; background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,0.55); border-radius: 4px;
    padding: 11px 26px; font-weight: 600; font-size: 0.94rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-newsletter:hover { background: var(--couleur-secondaire); color: #1c1c1c; border-color: var(--couleur-secondaire); }
.footer-mention { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin: 12px 0 0; line-height: 1.5; }

.footer-localisation {
    margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
}
.footer-localisation .footer-title { margin: 0; font-size: 1.05rem; }
.footer-map { border-radius: 6px; overflow: hidden; flex: 1 1 320px; max-width: 520px; }
.footer-map iframe { display: block; width: 100%; }
.footer-map-open {
    color: var(--couleur-secondaire); font-size: 0.9rem; font-weight: 600; white-space: nowrap;
}
.footer-map-open:hover { color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding: 20px 0; text-align: center; }
.footer-bottom p { margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.footer-bottom a { color: rgba(255,255,255,0.8); text-decoration: underline; }
.footer-bottom a:hover { color: var(--couleur-secondaire); }
.footer-tutelle { font-size: 0.8rem !important; color: rgba(255,255,255,0.55) !important; margin-top: 6px !important; }

.footer-drapeau {
    height: 6px;
    background: linear-gradient(to right, #008751 0 34%, #fcd116 34% 67%, #e8112d 67% 100%);
}

.btn-retour-haut { font-size: 1.15rem; font-weight: 700; line-height: 1; }

@media (max-width: 575px) {
    .footer-top { padding: 38px 0 30px; }
    .footer-localisation { margin-top: 22px; padding-top: 18px; }
}

/* ---------- Animations d'apparition ---------- */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .fade-in { opacity: 1; transform: none; transition: none; }
    .bandeau-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .hero-inner { padding: 40px 0 56px; }
    /* Sous 991px, la dérivée 1000px suffit largement en plein écran et pèse
       ~39% de la surface de l'original 1600px : économie de données mobiles
       sans perte visible sous le voile. */
    .hero-section { background-image: var(--hero-img-vignette, none); }
    .hero-bg-layer { background-image: var(--hero-img-vignette, none); }
    .hero-title { white-space: normal; font-size: clamp(1.55rem, 6.6vw, 2.3rem); letter-spacing: 0.5px; }
    /* Sur une colonne unique, le bloc de texte est centré : aligné à gauche
       sous un filet d'accent déjà centré, le hero paraissait de travers. */
    .hero-texte { text-align: center; }
    .hero-accent { margin-left: auto; margin-right: auto; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-btns { justify-content: center; }
    .hero-chef-card { margin: 30px auto 0; }
    /* Trois lignes uniques dans le bloc identité : la colonne « auto » de la
       grille de base lui donne exactement la largeur de son contenu. */
    .header-commune, .site-title, .site-slogan { white-space: nowrap; }
    /* Garde-fou : un slogan très long saisi depuis l'administration ne peut
       pas faire déborder le bandeau, il est coupé par des points de suite. */
    .header-identity { max-width: 66vw; }
    .site-slogan { overflow: hidden; text-overflow: ellipsis; }
    .navbar-main .navbar-nav { padding: 8px 0; }
    .navbar-main .navbar-nav .nav-link { margin: 2px 0; }
    .navbar-main .navbar-collapse { padding-bottom: 10px; }
    .stats-band { grid-template-columns: repeat(2, 1fr); margin-top: -40px; }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid #eef0f2; }
}
@media (max-width: 575px) {
    .hero-inner { padding: 44px 0; }
    .section { padding: 44px 0; }
    .hero-btn { flex: 1 1 auto; justify-content: center; }
    .stats-band { grid-template-columns: 1fr 1fr; }
    .stat-item { padding: 18px 10px; gap: 8px; }
    .stat-item .stat-icon { min-width: 54px; height: 46px; padding: 0 10px; border-radius: 12px; }
    .stat-number { font-size: 1.5rem; }
    .stat-label { font-size: 0.76rem; }
    .village-slide-photo { height: 220px; }
    .village-carousel .carousel-control-prev, .village-carousel .carousel-control-next { height: 220px; }
    .village-slide-body { padding: 20px 18px 24px; }
}
/* Très petits écrans : les chiffres clés restent sur deux colonnes. Ils
   basculaient sur une seule sous 400 px, ce qui visait l'iPhone SE mais
   attrapait aussi les iPhone 13, 14 et 15 Pro (390 à 393 px) : le bandeau
   déroulait alors quatre lignes pleine largeur. Seules les tailles cèdent. */
@media (max-width: 399px) {
    .stat-item { padding: 15px 6px; gap: 7px; }
    .stat-item .stat-icon { min-width: 48px; height: 42px; padding: 0 8px; }
    .stat-number { font-size: 1.3rem; }
    .stat-label { font-size: 0.7rem; line-height: 1.25; }
}

/* ---------- Responsive fin : en-tête & navigation ---------- */
/* Version ordinateur : les deux blocs de texte sont étirés sur la hauteur de
   la rangée (déjà égalisée par align-items: stretch sur la grille) et leur
   contenu réparti par space-between. La première ligne du ministère s'aligne
   donc exactement sur « Commune de Tori-Bossito », et « République du Bénin »
   sur le slogan : les deux blocs occupent la même étendue verticale, au lieu
   d'être deux blocs centrés de hauteurs différentes (~59 px contre ~68 px).
   Les pastilles gardent leur centrage vertical propre. */
@media (min-width: 992px) {
    .header-official, .header-identity { align-items: stretch; }
    .header-emblem { align-self: center; }
    .header-official-text, .header-identity-text { justify-content: space-between; }
}
@media (min-width: 992px) and (max-width: 1439px) {
    .navbar-main .navbar-nav { gap: 5px; }
    .navbar-main .navbar-nav .nav-link { padding: 7px 10px; font-size: 0.82rem; gap: 5px; }
    .navbar-main .navbar-nav .nav-link i { font-size: 0.82rem; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-main .navbar-nav { gap: 4px; }
    .navbar-main .navbar-nav .nav-link { padding: 6px 8px; font-size: 0.76rem; gap: 4px; }
    /* Palier le plus contraint : c'est ici que la colonne du ministère est la
       plus étroite (~226 px à 992 px) alors que les pastilles, désormais plus
       grandes, lui prennent quelques pixels. Corps réduit pour garder de la
       marge sous la première ligne forcée (~194 px au lieu de ~217 px). */
    .header-ministere { font-size: clamp(0.5rem, 0.24rem + 0.6vw, 0.62rem); }
}
/* Grand écran. Au-delà de 1400 px le conteneur Bootstrap est figé à 1320 px :
   la fenêtre continue de grandir, plus le bandeau. Tous les clamp() ayant déjà
   atteint leur plafond vers 1235 px, l'en-tête restait dessiné pour un écran
   d'ordinateur portable et paraissait perdu au milieu d'un grand moniteur.
   Les corps et les pastilles montent donc d'un cran. Valeurs fixes et non plus
   en vw : au-dessus de ce palier la largeur utile ne bouge plus. */
@media (min-width: 1400px) {
    .header-grid { --pastille: 62px; column-gap: 24px; padding: 14px 0; }
    .header-ministere { font-size: 0.86rem; }
    .header-rule { width: 92px; height: 3px; }
    .header-commune, .header-republique { font-size: 1rem; }
    .site-title { font-size: 1.6rem; }
    .site-slogan { font-size: 0.84rem; }
}
@media (max-width: 991px) {
    .header-ministere { overflow-wrap: break-word; }
}
@media (max-width: 575px) {
    /* Même disposition qu'en version ordinateur — armoiries + tutelle à
       gauche, identité puis drapeau à droite — obtenue en réduisant toutes
       les tailles du bandeau plutôt qu'en le réempilant. Les valeurs sont en
       vw pour rester proportionnelles de 320 px à 575 px. */
    .header-grid {
        /* Espacement entre les trois blocs. */
        column-gap: clamp(7px, 2.1vw, 12px);
        padding: 5px 0;
        /* Pastilles à ~0,75 de la hauteur des blocs. Resserrées par rapport
           aux 28 px précédents : chaque pixel repris ici est un pixel rendu
           au nom du ministère, la contrainte la plus serrée du bandeau. */
        --pastille: clamp(26px, 7.2vw, 34px);
    }
    /* Écart pastille ↔ texte, à l'intérieur de chaque bloc. */
    .header-official, .header-identity { gap: clamp(4px, 1.3vw, 6px); }
    .header-emblem { border-radius: 7px; font-size: 0.85rem; }
    .benin-flag, .benin-flag-img { border-width: 1px; }
    /* Le bloc identité étant sur trois lignes uniques, sa largeur est dictée
       par le titre : les corps du bloc officiel sont calés pour que la 1re
       ligne de la tutelle tienne dans la place restante (~130 px à 360 px). */
    .header-official-text { gap: 3px; }
    .header-rep-block { gap: 3px; }
    .header-ministere {
        font-size: clamp(0.34rem, 1.25vw, 0.5rem);
        letter-spacing: 0; line-height: 1.16;
        overflow-wrap: break-word; hyphens: auto;
    }
    .header-republique {
        font-size: clamp(0.4rem, 1.45vw, 0.56rem); letter-spacing: 0.15px;
        line-height: 1.16; white-space: nowrap;
    }
    .header-rule { width: clamp(20px, 5.6vw, 32px); height: 2px; }
    .header-commune {
        font-size: clamp(0.4rem, 1.5vw, 0.58rem);
        letter-spacing: 0.2px; margin-bottom: 1px;
    }
    .site-title { font-size: clamp(0.46rem, 2.05vw, 0.82rem); line-height: 1.1; }
    .site-slogan { font-size: clamp(0.34rem, 1.25vw, 0.5rem); margin-top: 1px; }
    .site-header > .container { padding-left: 8px; padding-right: 8px; }
    .navbar-main .navbar-nav .nav-link { font-size: 0.82rem; padding: 8px 12px; }
}


/* ---------- Chef de village / de quartier ---------- */
.chef-village {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px; border-radius: 14px;
    background: var(--gris-clair); border-left: 4px solid var(--couleur-primaire);
}
.chef-village-photo {
    width: 74px; height: 74px; border-radius: 50%; object-fit: cover;
    border: 3px solid #fff; box-shadow: var(--ombre); flex: 0 0 auto;
}
.chef-village-vide {
    display: flex; align-items: center; justify-content: center;
    background: var(--couleur-primaire); color: #fff; font-size: 1.9rem;
}
.chef-village-role {
    font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris);
}
.chef-village-nom {
    font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 700;
    color: var(--couleur-primaire); margin: 2px 0 0;
}

/* Vignette du chef dans les cartes de village (listes et accueil) */
.village-chef-mini {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-right: 4px; vertical-align: middle;
}

@media (max-width: 575px) {
    .chef-village { gap: 12px; padding: 14px; }
    .chef-village-photo { width: 60px; height: 60px; }
    .chef-village-nom { font-size: 1rem; }
}

/* =====================================================
   Rubrique « Administration »
   Fiches de personnes, succession des anciens C.A,
   organigramme et agenda.
   ===================================================== */

/* ---------- Fiche détaillée (Chef d'Arrondissement) ---------- */
/* ---------- Chef d'Arrondissement et élus ---------- */
.portrait-chef { text-align: center; max-width: 420px; margin: 0 auto 54px; }
.portrait-chef-photo {
    width: 100%; max-width: 260px; aspect-ratio: 4 / 5; margin: 0 auto 18px;
    overflow: hidden; border-radius: 4px; background: var(--gris-clair);
}
.portrait-chef-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Portrait du Secrétaire Administratif : deux coins opposés arrondis. */
.portrait-chef-photo-diagonale {
    border-radius: clamp(30px, 7vw, 58px) 6px clamp(30px, 7vw, 58px) 6px;
}
.portrait-chef-nom {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
    color: var(--couleur-primaire); margin: 0 0 4px;
}
.portrait-chef-fonction {
    font-weight: 700; font-size: 1rem; color: var(--couleur-primaire); margin: 0 0 10px;
}

.titre-groupe {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
    letter-spacing: -0.3px; color: var(--noir); margin: 0 0 30px;
}

.card-personne {
    background: transparent; box-shadow: none; padding: 0; height: 100%;
    display: flex; flex-direction: column; text-align: center;
}
.card-personne:hover { transform: none; box-shadow: none; }
/* La photo, plus étroite que le bandeau, chevauche le haut de celui-ci. */
.card-personne-photo {
    width: 82%; margin: 0 auto; aspect-ratio: 4 / 3;
    position: relative; z-index: 2;
    overflow: hidden; border-radius: 10px; background: var(--gris-clair);
    border: 0; box-shadow: 0 8px 22px rgba(11, 42, 28, 0.16);
    display: block;
}
.card-personne-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-personne-bandeau {
    position: relative; z-index: 1; margin-top: -52px; margin-bottom: 0;
    background: var(--couleur-primaire); color: #fff; border-radius: 10px;
    padding: 76px 20px 30px; min-height: 170px;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.card-personne-nom { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.card-personne-fonction {
    font-size: 0.92rem; font-weight: 400; line-height: 1.4;
    color: rgba(255,255,255,0.9); text-transform: none; letter-spacing: 0;
    font-family: inherit; margin: 0;
}
.card-personne-mandat {
    align-self: center; margin-top: 8px; padding: 3px 12px;
    background: var(--couleur-secondaire); color: #1c1c1c;
    border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3px;
}
.fiche-contact { list-style: none; padding: 0; margin: 10px 0 0; }
.fiche-contact li { font-size: 0.92rem; color: var(--noir); margin-bottom: 5px; overflow-wrap: anywhere; }
.fiche-contact-compact li { font-size: 0.85rem; margin-bottom: 3px; }
.fiche-contact-centre {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px;
}
.fiche-contact-centre li { margin-bottom: 0; }
/* ---------- Organigramme ---------- */
.organigramme-cadre { overflow-x: auto; padding: 10px 4px 24px; --trait-organigramme: 2px solid #000; }
/* L'arbre est au moins aussi large que le cadre — il se centre alors — et
   s'étend au-delà quand il le faut. Sans « min-width », « justify-content:
   center » débordait des deux côtés et la partie gauche devenait
   inatteignable : le défilement ne va jamais avant le bord gauche. */
.organigramme-racine { width: max-content; min-width: 100%; margin-inline: auto; }
.organigramme-niveau {
    display: flex; justify-content: center;
    list-style: none; margin: 0; padding: 0; position: relative;
}
.organigramme-noeud {
    position: relative; display: flex; flex-direction: column; align-items: center;
    padding: 26px 11px 0;
}
.organigramme-racine > .organigramme-noeud { padding-top: 0; }
.organigramme-noeud > .organigramme-niveau { padding-top: 26px; }
.organigramme-noeud > .organigramme-niveau::before {
    content: ''; position: absolute; top: 0; left: 50%;
    height: 26px; border-left: var(--trait-organigramme);
}
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud::before,
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud::after {
    content: ''; position: absolute; top: 0; right: 50%;
    width: 50%; height: 26px; border-top: var(--trait-organigramme);
}
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud::after {
    right: auto; left: 50%; border-left: var(--trait-organigramme);
}
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud:first-child::before,
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud:last-child::after { border: 0 none; }
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud:last-child::before {
    border-right: var(--trait-organigramme); border-radius: 0 6px 0 0;
}
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud:first-child::after { border-radius: 6px 0 0 0; }
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud:only-child::before,
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud:only-child::after { display: none; }
.organigramme-niveau:not(.organigramme-racine) > .organigramme-noeud:only-child { padding-top: 0; }

.organigramme-carte {
    display: flex; flex-direction: column; gap: 3px; text-align: center;
    min-width: 158px; max-width: 230px; padding: 13px 15px;
    background: var(--blanc); border: 1px solid #e4e9ec; border-radius: 12px;
    box-shadow: var(--ombre);
}
.organigramme-carte-racine {
    background: linear-gradient(145deg, var(--couleur-primaire), var(--primaire-sombre));
    border-color: transparent; color: #fff;
}
.organigramme-poste {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.86rem;
    line-height: 1.25; color: var(--noir);
}
.organigramme-carte-racine .organigramme-poste { color: #fff; }
.organigramme-titulaire { font-size: 0.82rem; color: var(--couleur-primaire); font-weight: 600; }
.organigramme-carte-racine .organigramme-titulaire { color: var(--couleur-secondaire); }
.organigramme-description { font-size: 0.76rem; color: var(--gris); line-height: 1.35; }
.organigramme-carte-racine .organigramme-description { color: rgba(255,255,255,0.82); }

/* ---------- Agenda : calendrier ---------- */
.cal-barre {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 22px; border-radius: var(--radius-carte);
    background: linear-gradient(135deg, var(--couleur-primaire), var(--primaire-sombre));
    box-shadow: var(--ombre-carte); margin-bottom: 22px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-fleche, .cal-aujourdhui {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.95); color: var(--couleur-primaire);
    border-radius: 8px; font-weight: 700; transition: var(--transition);
}
.cal-fleche { width: 40px; height: 40px; font-size: 1.5rem; line-height: 1; padding-bottom: 3px; }
.cal-aujourdhui { height: 40px; padding: 0 18px; font-size: 0.9rem; background: rgba(255,255,255,0.22); color: #fff; }
.cal-fleche:hover { background: var(--couleur-secondaire); color: #1c1c1c; }
.cal-aujourdhui:hover { background: rgba(255,255,255,0.35); color: #fff; }
.cal-titre {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: clamp(1.3rem, 1.1rem + 1.2vw, 2rem); color: #fff; margin: 0;
    flex: 1 1 auto; text-align: center;
}
.cal-vues { display: flex; background: #fff; border-radius: 8px; overflow: hidden; }
.cal-vues a {
    padding: 11px 18px; font-size: 0.9rem; font-weight: 600; color: var(--noir);
    border-right: 1px solid #e6eaec; transition: var(--transition);
}
.cal-vues a:last-child { border-right: 0; }
.cal-vues a:hover { background: var(--gris-clair); color: var(--couleur-primaire); }
.cal-vues a.actif { background: var(--couleur-primaire); color: #fff; }

/* Le calendrier peut dépasser en largeur : il défile dans son cadre. */
.cal-cadre {
    overflow-x: auto; background: var(--blanc); border-radius: var(--radius-carte);
    border: var(--bordure-carte); box-shadow: var(--ombre-carte);
}
.cal-entete {
    background: var(--gris-clair); text-align: center; padding: 11px 6px;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.6px; color: var(--noir);
    border-bottom: 1px solid #e6eaec;
}
.cal-entete.cal-today { background: var(--couleur-secondaire); }

/* --- Vue mois --- */
.cal-mois { display: grid; grid-template-columns: repeat(7, minmax(122px, 1fr)); }
.cal-case {
    min-height: 116px; padding: 6px; border-right: 1px solid #eef0f2;
    border-bottom: 1px solid #eef0f2; display: flex; flex-direction: column; gap: 4px;
}
.cal-case:nth-child(7n + 7) { border-right: 0; }
.cal-case.hors-mois { background: #fafbfc; }
.cal-case.hors-mois .cal-num { color: #b8c0c6; }
.cal-case.cal-today { background: rgba(252,209,22,0.10); }
.cal-num {
    align-self: flex-end; min-width: 27px; height: 27px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.86rem; font-weight: 700; color: var(--noir);
    background: var(--gris-clair); transition: var(--transition);
}
.cal-num:hover { background: var(--couleur-primaire); color: #fff; }
.cal-case.cal-today .cal-num { background: var(--couleur-primaire); color: #fff; }
.cal-case-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* --- Vues semaine et jour --- */
.cal-grille {
    display: grid; grid-template-columns: 82px repeat(var(--colonnes), minmax(118px, 1fr));
    max-height: 640px; overflow-y: auto;
}
.cal-coin { background: var(--gris-clair); border-bottom: 1px solid #e6eaec; }
.cal-libelle {
    padding: 6px 10px; text-align: right; font-size: 0.78rem; color: var(--gris);
    border-right: 1px solid #e6eaec; border-bottom: 1px solid #f2f4f5; background: #fcfdfd;
}
.cal-libelle.cal-heure { font-variant-numeric: tabular-nums; }
.cal-cellule {
    min-height: 42px; padding: 4px; border-right: 1px solid #f2f4f5;
    border-bottom: 1px solid #f2f4f5; display: flex; flex-direction: column; gap: 3px;
}
.cal-cellule.cal-journee { min-height: 56px; background: #fafbfc; }

/* --- Pastille d'événement --- */
.cal-ev {
    display: block; font-size: 0.76rem; line-height: 1.3; padding: 4px 7px;
    border-radius: 5px; border-left: 3px solid; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev b { font-weight: 700; }
.ev-prevu   { background: rgba(var(--primaire-rgb), 0.10);   border-color: var(--couleur-primaire); color: var(--primaire-sombre); }
.ev-encours { background: rgba(252,209,22,0.22); border-color: #d9a900; color: #7a5f00; }
.ev-termine { background: #eceff1;               border-color: #9aa5ab; color: var(--gris); }
.ev-annule  { background: rgba(232,17,45,0.10);  border-color: var(--couleur-accent); color: #9a0f20; text-decoration: line-through; }

/* --- Vue planning --- */
.cal-planning {
    background: var(--blanc); border-radius: var(--radius-carte);
    border: var(--bordure-carte); box-shadow: var(--ombre-carte); overflow: hidden;
}
.planning-jour {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 14px 22px; background: var(--gris-clair);
    border-top: 1px solid #e6eaec; font-weight: 700; color: var(--noir);
}
.planning-jour:first-child { border-top: 0; }
.planning-jour.cal-today { background: rgba(252,209,22,0.22); }
.planning-nom-jour { font-weight: 500; color: var(--gris); }
.planning-ligne {
    display: flex; align-items: baseline; gap: 14px; padding: 13px 22px;
    border-top: 1px solid #f2f4f5;
}
.planning-heure { flex: none; width: 108px; font-size: 0.86rem; color: var(--gris); }
.planning-point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--couleur-primaire); }
.planning-point.ev-encours { background: #d9a900; }
.planning-point.ev-termine { background: #9aa5ab; }
.planning-point.ev-annule  { background: var(--couleur-accent); }
.planning-titre { min-width: 0; }
.planning-titre em { display: block; font-size: 0.84rem; color: var(--gris); font-style: normal; margin-top: 2px; }

.cal-vide { text-align: center; color: var(--gris); margin: 26px 0 0; }
.cal-legende {
    list-style: none; padding: 0; margin: 20px 0 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
    font-size: 0.84rem; color: var(--gris);
}
.cal-legende li { display: flex; align-items: center; gap: 7px; }

@media (max-width: 767px) {
    .cal-barre { padding: 14px; gap: 12px; }
    .cal-titre { order: -1; flex-basis: 100%; text-align: left; }
    .cal-vues { flex: 1 1 100%; }
    .cal-vues a { flex: 1; text-align: center; padding: 10px 6px; font-size: 0.82rem; }
    .cal-case { min-height: 92px; }
    .planning-ligne { flex-wrap: wrap; gap: 6px 12px; }
    .planning-heure { width: auto; }
}
@media (max-width: 575px) {
    .fiche-responsable { padding: 24px 18px 20px; }
    .fiche-responsable-photo { width: 140px; height: 172px; margin-bottom: 14px; }
    .hierarchie-lien { height: 32px; }
    .succession { padding-left: 26px; }
    .succession-item::before { left: -21px; }
    .succession-photo { width: 60px; height: 74px; font-size: 1.4rem; }
}

/* =====================================================
   Participation citoyenne
   Vignette : photo en haut, panneau plein de couleur en bas.
   ===================================================== */
.carte-participation {
    display: flex; flex-direction: column; height: 100%;
    border-radius: var(--radius-carte); overflow: hidden;
    box-shadow: var(--ombre-carte); background: var(--couleur-primaire);
    text-decoration: none; transition: var(--transition);
}
.carte-participation:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); }

/* Bandeau photo. Hauteur fixe pour que toutes les vignettes d'une rangée
   présentent la même image, quelles que soient les proportions déposées. */
.carte-participation-media {
    height: 158px; flex: none; overflow: hidden; position: relative;
    background: linear-gradient(135deg, var(--primaire-vif) 0%, var(--primaire-sombre) 100%);
}
.carte-participation-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.45s ease;
}
.carte-participation:hover .carte-participation-media img { transform: scale(1.06); }

/* Sans photo : motif tricolore discret plutôt qu'un aplat vide. */
.carte-participation-motif {
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06) 25%, transparent 25%) -20px 0/40px 40px,
        linear-gradient(225deg, rgba(255,255,255,0.06) 25%, transparent 25%) -20px 0/40px 40px,
        linear-gradient(160deg, var(--primaire-vif) 0%, var(--couleur-primaire) 55%, var(--primaire-sombre) 100%);
}

.carte-participation-corps {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 26px 22px 24px;
    background: linear-gradient(165deg, var(--primaire-vif) 0%, var(--primaire-sombre) 100%);
    color: #fff;
}
.carte-participation h3 {
    font-size: 1.02rem; font-weight: 700; line-height: 1.3;
    margin: 0 0 12px; color: #fff;
}
.carte-participation p {
    font-size: 0.88rem; line-height: 1.55; margin: 0 0 18px;
    color: rgba(255,255,255,0.82); flex-grow: 1;
}
/* Filet séparant l'intitulé de l'appel à l'action, comme sur la maquette. */
.carte-participation-lien {
    display: inline-flex; align-items: center; gap: 9px;
    width: 100%; padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.28);
    justify-content: center;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem;
    color: var(--couleur-secondaire);
}
.carte-participation-lien i { transition: transform 0.25s ease; }
.carte-participation:hover .carte-participation-lien i { transform: translateX(5px); }

/* Rappel des autres canaux, en pied de page de la rubrique. */
.participation-rappel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
    justify-content: space-between;
    background: var(--blanc); border-radius: var(--radius);
    box-shadow: var(--ombre); padding: 28px 30px;
    border-left: 4px solid var(--couleur-secondaire);
}
.participation-rappel-texte { flex: 1 1 340px; min-width: 0; }
.participation-rappel-texte h4 { font-size: 1.12rem; font-weight: 700; margin: 0 0 6px; }
.participation-rappel-texte p { color: var(--gris); font-size: 0.94rem; margin: 0; }
.participation-rappel-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 575px) {
    .carte-participation-media { height: 130px; }
    .carte-participation-corps { padding: 22px 18px 20px; }
    .participation-rappel { padding: 22px 20px; }
    .participation-rappel-actions { width: 100%; }
    .participation-rappel-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================
   Formulaire officiel (contact / signalements)
   Champs hauts et aérés, intitulé au-dessus, astérisque
   d'obligation en jaune — lisible sur un écran de téléphone
   comme au guichet.
   ===================================================== */
.formulaire-officiel .form-label {
    font-weight: 500;
    font-size: 0.98rem; color: var(--noir);
    margin-bottom: 7px;
}
.formulaire-officiel .obligatoire {
    color: #d98200; font-weight: 600; margin-left: 3px;
}
.formulaire-officiel .form-control {
    border: 1px solid #d5dbe0; border-radius: 6px;
    padding: 13px 15px; font-size: 0.97rem;
    background: var(--blanc); color: var(--noir);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.formulaire-officiel .form-control::placeholder { color: #9aa5ad; }
.formulaire-officiel .form-control:focus {
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 3px rgba(var(--primaire-rgb), 0.14);
    outline: none;
}
.formulaire-officiel textarea.form-control { min-height: 150px; resize: vertical; }

/* Précision sous un champ : elle guide la saisie sans alourdir l'intitulé. */
.formulaire-officiel .aide-champ {
    display: block; margin-top: 5px;
    font-size: 0.78rem; color: var(--gris); line-height: 1.4;
}

/* Dépôt de fichier : encadré grisé, comme sur les formulaires administratifs. */
.formulaire-officiel .champ-fichier {
    display: flex; align-items: center; gap: 12px;
    background: var(--gris-clair); border: 1px dashed #c6ced4;
    border-radius: 8px; padding: 10px 14px;
}
.formulaire-officiel .champ-fichier > i {
    font-size: 1.15rem; color: var(--couleur-primaire); flex: none;
}
.formulaire-officiel .champ-fichier .form-control {
    border: none; background: transparent; padding: 0; box-shadow: none;
}
.formulaire-officiel .champ-fichier .form-control:focus { box-shadow: none; }

.formulaire-officiel .mention-donnees {
    margin: 14px 0 0; font-size: 0.78rem; color: var(--gris); line-height: 1.5;
}
.formulaire-officiel .btn-lg { padding: 11px 26px; font-size: 0.98rem; }

/* =====================================================
   Suivi des demandes citoyennes
   ===================================================== */

/* Référence affichée après l'envoi : lisible, sélectionnable d'un geste. */
.reference-demande {
    font-family: 'Courier New', monospace; font-weight: 700;
    font-size: 1.35rem; letter-spacing: 2px; margin: 0 0 8px;
    color: var(--couleur-primaire); user-select: all;
}

.fiche-demande {
    background: var(--blanc); border-radius: var(--radius-carte);
    box-shadow: var(--ombre-carte); border: var(--bordure-carte); padding: 28px 30px;
    border-top: 4px solid var(--couleur-primaire);
}
.fiche-demande-entete {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: flex-start; justify-content: space-between;
    padding-bottom: 18px; border-bottom: 1px solid #eef0f2;
}
.fiche-demande-ref {
    display: inline-block; font-family: 'Courier New', monospace;
    font-weight: 700; font-size: 0.86rem; letter-spacing: 1.5px;
    color: var(--couleur-primaire); background: rgba(var(--primaire-rgb), 0.08);
    border-radius: 20px; padding: 3px 12px; margin-bottom: 8px;
}
.fiche-demande-entete h3 { font-size: 1.22rem; font-weight: 700; margin: 0 0 4px; }
.fiche-demande-date { font-size: 0.85rem; color: var(--gris); margin: 0; }

.badge-statut {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.8rem;
    border-radius: 22px; padding: 7px 15px;
}
.statut-recue    { background: #eceff1;               color: #4a5760; }
.statut-encours  { background: rgba(252,209,22,0.24); color: #856100; }
.statut-traitee  { background: rgba(var(--primaire-rgb), 0.12);   color: var(--couleur-primaire); }
.statut-cloturee { background: rgba(26,26,46,0.08);   color: var(--noir); }

/* Frise des quatre états. Les étapes franchies passent en vert ; le trait de
   liaison est porté par ::before pour rester derrière les pastilles. */
.frise-suivi {
    display: flex; list-style: none; margin: 24px 0 18px; padding: 0;
    position: relative; gap: 4px;
}
.frise-suivi::before {
    content: ''; position: absolute; left: 8%; right: 8%; top: 17px;
    height: 3px; background: #e6eaed; z-index: 0;
}
.frise-suivi li {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 7px; position: relative; z-index: 1; text-align: center;
}
.frise-puce {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #eef1f3; color: #9aa5ad; font-size: 0.88rem; font-weight: 700;
    border: 3px solid var(--blanc); box-shadow: 0 0 0 1px #e0e5e9;
}
.frise-suivi li.franchi .frise-puce {
    background: var(--couleur-primaire); color: #fff;
    box-shadow: 0 0 0 1px var(--couleur-primaire);
}
.frise-libelle {
    font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: 0.76rem; color: var(--gris); line-height: 1.25;
}
.frise-suivi li.franchi .frise-libelle { color: var(--couleur-primaire); }

.fiche-demande-aide { font-size: 0.92rem; color: var(--gris); margin: 0; }

.fiche-demande-reponse {
    margin-top: 22px; padding: 18px 20px;
    background: var(--gris-clair); border-radius: 10px;
    border-left: 4px solid var(--couleur-secondaire);
}
.fiche-demande-reponse h5 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.fiche-demande-reponse p { font-size: 0.94rem; margin: 0 0 6px; }

.fiche-demande-rappel { margin-top: 20px; font-size: 0.92rem; }
.fiche-demande-rappel summary {
    cursor: pointer; font-weight: 600; color: var(--couleur-primaire);
    font-size: 0.9rem; margin-bottom: 10px;
}
.fiche-demande-rappel p { color: var(--gris); }

@media (max-width: 575px) {
    .fiche-demande { padding: 22px 18px; }
    .frise-suivi { gap: 2px; }
    .frise-puce { width: 30px; height: 30px; font-size: 0.82rem; }
    .frise-suivi::before { top: 14px; }
    .frise-libelle { font-size: 0.66rem; }
}


/* ---------- Filtres des actualités ---------- */
/* ---------- Barre de filtres des actualités ---------- */
.barre-filtres {
    position: relative; z-index: 2; margin: -74px 0 34px;
    background: var(--blanc); border-radius: var(--radius-carte);
    box-shadow: var(--ombre-carte-survol);
    padding: 26px 26px 24px; overflow: hidden;
}
.barre-filtres::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    background: linear-gradient(to bottom, var(--couleur-primaire) 0 45%, var(--couleur-secondaire) 45% 78%, var(--couleur-accent) 78% 100%);
}
.barre-filtres-champs {
    display: grid; gap: 16px; align-items: end;
    grid-template-columns: 1fr; padding-left: 12px;
}
@media (min-width: 768px) {
    .barre-filtres-champs { grid-template-columns: 1fr 1fr auto; }
    .champ-filtre-large { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
    .barre-filtres-champs { grid-template-columns: 2fr 1.2fr 1fr auto; }
    .champ-filtre-large { grid-column: auto; }
}
.champ-filtre { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.champ-filtre label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.1px; color: var(--couleur-primaire); padding-left: 2px;
}
.champ-filtre input,
.champ-filtre select {
    width: 100%; font-family: inherit; font-size: 0.94rem; color: var(--noir);
    background: #f6f8f7; border: 1px solid #e3e9e6; border-radius: 10px;
    padding: 12px 15px; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}
.champ-filtre select {
    background-image: linear-gradient(45deg, transparent 50%, var(--couleur-primaire) 50%),
                      linear-gradient(135deg, var(--couleur-primaire) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}
.champ-filtre input::placeholder { color: #9aa5a0; }
.champ-filtre input:focus,
.champ-filtre select:focus {
    outline: none; background: var(--blanc);
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 4px rgba(var(--primaire-rgb), 0.12);
}
.btn-filtrer {
    border: 0; border-radius: 10px; cursor: pointer;
    background: var(--couleur-primaire); color: #fff;
    font-family: inherit; font-weight: 700; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.8px;
    padding: 13px 30px; white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-filtrer:hover {
    background: var(--primaire-sombre); transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--primaire-rgb), 0.28);
}
.btn-filtrer:active { transform: none; }
.onglets-type {
    display: flex; flex-wrap: wrap; gap: 4px 26px;
    border-bottom: 1px solid #e2e7ea; margin-bottom: 26px;
}
.onglets-type a {
    padding: 10px 2px; font-weight: 600; font-size: 0.94rem;
    color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.onglets-type a:hover { color: var(--couleur-primaire); }
.onglets-type a.actif { color: var(--couleur-primaire); border-bottom-color: var(--couleur-primaire); }

.resultat-filtre {
    display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
    font-size: 0.92rem; color: var(--gris); margin-bottom: 24px;
}
.resultat-compte {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 9px; border-radius: 50px;
    background: var(--couleur-secondaire); color: #1c1c1c; font-weight: 800; font-size: 0.88rem;
}
.resultat-filtre a {
    color: var(--couleur-primaire); font-weight: 700; margin-left: auto;
    border-bottom: 1px solid rgba(var(--primaire-rgb), 0.35); padding-bottom: 1px;
}
.resultat-filtre a:hover { border-bottom-color: var(--couleur-primaire); }

/* ---------- Zone de lecture des pages de détail ---------- */
.zone-lecture { max-width: 1240px; margin-inline: auto; }
.zone-lecture .content-card { padding: clamp(1.4rem, 0.9rem + 2.8vw, 3.4rem); }
@media (min-width: 1400px) {
    .zone-lecture .prose,
    .zone-lecture .article-content { font-size: 1.02rem; }
}

/* ---------- Pagination des listes ---------- */
.pagination-cartes { margin-top: 42px; }
.pagination-cartes .pagination { flex-wrap: wrap; gap: 6px; margin: 0; }
.pagination-cartes .page-link {
    border: 1px solid #e2e6ea; border-radius: 6px; color: var(--noir);
    font-size: 0.9rem; font-weight: 600; padding: 9px 15px; min-width: 42px;
    text-align: center; transition: var(--transition);
}
.pagination-cartes .page-link:hover {
    background: var(--couleur-primaire); border-color: var(--couleur-primaire); color: #fff;
}
.pagination-cartes .active .page-link {
    background: var(--couleur-primaire); border-color: var(--couleur-primaire); color: #fff;
}
.pagination-cartes .disabled .page-link {
    color: #adb5bd; background: #f8f9fa; border-color: #edf0f2;
}
@media (max-width: 575px) {
    .pagination-cartes .page-link { padding: 8px 12px; min-width: 38px; font-size: 0.85rem; }
}

@media (max-width: 767px) {
    .barre-filtres { margin-top: -40px; padding: 22px 18px 20px; border-radius: 12px; }
    .btn-filtrer { width: 100%; }
}

/* ---------- Finitions des pages de contenu ---------- */
.zone-lecture .article-content > p:first-of-type,
.zone-lecture .prose > p:first-of-type {
    font-size: 1.1em; line-height: 1.72; color: #23262b;
}
.article-detail .article-img {
    box-shadow: 0 14px 34px rgba(11, 42, 28, 0.14);
    max-height: 480px; margin: 24px 0 30px;
}
.publication-signature {
    margin-top: 34px; padding-top: 18px; border-top: 1px solid #edf0f2;
    font-size: 0.82rem; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--gris);
}
.publication-signature strong { color: var(--couleur-primaire); font-weight: 700; }
.titre-groupe { text-align: center; margin-bottom: 34px; }
.titre-groupe::after {
    content: ""; display: block; width: 68px; height: 3px; margin: 14px auto 0;
    background: linear-gradient(90deg, var(--couleur-primaire), var(--couleur-secondaire));
}

@media (max-width: 991.98px) {
    .footer-suivez { flex-wrap: wrap; }
}

@media (max-width: 767.98px) {
    .footer-title { font-size: 1.05rem; margin-bottom: 14px; }
    .footer-contact li { font-size: 0.86rem; margin-bottom: 10px; word-break: break-word; }
    .footer-links a { font-size: 0.86rem; }
    .footer-text { font-size: 0.85rem; }
    .footer-newsletter-form .form-control { padding: 10px 12px; font-size: 0.86rem; }
    .btn-newsletter { padding: 9px 18px; font-size: 0.86rem; }
    .footer-suivez { margin-top: 16px; gap: 8px; }
    .footer-suivez > span { font-size: 0.8rem; }
}



/* ---------- Allocution du C.A ---------- */
/* Guillemet ouvrant en filigrane : marque de citation, pas un caractère du texte. */
.carte-allocution { position: relative; }
/* Portrait au fil du texte : les paragraphes viennent l'entourer. */
.allocution-portrait {
    float: left; width: 210px; margin: 4px 30px 18px 0; text-align: center;
}
.allocution-portrait img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
    border-radius: 14px; box-shadow: 0 12px 30px rgba(11, 42, 28, 0.18);
    margin: 0;
}
.allocution-portrait figcaption { margin-top: 12px; }
.allocution-nom {
    display: block; font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700; font-size: 1.05rem; color: var(--couleur-primaire); line-height: 1.3;
}
.allocution-fonction {
    display: block; margin-top: 3px; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.9px; color: var(--gris);
}
.carte-allocution::before { content: ""; display: table; }
.carte-allocution @media (max-width: 575px) {
    .allocution-portrait { float: none; width: 190px; margin: 0 auto 24px; }
}
.carte-allocution::after {
    content: "�C"; position: absolute; top: 6px; right: 30px;
    font-family: 'Playfair Display', Georgia, serif; font-size: 8rem; line-height: 1;
    color: rgba(var(--primaire-rgb), 0.07); pointer-events: none;
}
.carte-allocution .prose { position: relative; }
.carte-allocution .prose > p:first-of-type {
    font-size: 1.14em; color: #23262b; font-weight: 500;
}

@media (max-width: 575px) {
    .page-hero { min-height: 150px; padding: 24px 0; }
}


/* ---------- Fiche e-service ---------- */
.fiche-eservice {
    position: relative; display: flex; gap: 26px; height: 100%; overflow: hidden;
    background: var(--blanc); border-radius: var(--radius-carte);
    border: var(--bordure-carte); box-shadow: var(--ombre-carte);
    padding: 30px 32px; transition: var(--transition);
}
/* Liseré tricolore révélé au survol, comme sur les cartes de contenu. */
.fiche-eservice::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--couleur-primaire) 0 34%, var(--couleur-secondaire) 34% 67%, var(--couleur-accent) 67% 100%);
    transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.fiche-eservice:hover::before { transform: scaleX(1); }
.fiche-eservice:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); }

/* Emblème centré sur la hauteur de la fiche, détaché du texte par un filet. */
.fiche-eservice-embleme {
    flex: none; align-self: center; position: relative;
    padding-right: 26px;
}
.fiche-eservice-embleme::after {
    content: ""; position: absolute; right: 0; top: -6px; bottom: -6px; width: 1px;
    background: linear-gradient(to bottom, transparent, #e2e7ea 22%, #e2e7ea 78%, transparent);
}
.fiche-eservice-embleme span {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 16px; color: #fff;
    background: linear-gradient(145deg, var(--couleur-primaire), var(--primaire-clair));
    box-shadow: 0 8px 20px rgba(var(--primaire-rgb), 0.24);
    transition: transform 0.3s ease;
}
.fiche-eservice:hover .fiche-eservice-embleme span { transform: scale(1.06) rotate(-3deg); }

.fiche-eservice-corps {
    display: flex; flex-direction: column; min-width: 0; flex-grow: 1;
    min-height: 186px;
}
.fiche-eservice h3 {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 1.2rem; line-height: 1.35; color: var(--noir); margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fiche-eservice .prose {
    font-size: 0.92rem; color: var(--gris); line-height: 1.65; text-align: justify;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fiche-eservice .prose p { margin-bottom: 0.6em; }
.fiche-eservice .prose > :last-child { margin-bottom: 0; }
.fiche-eservice-cout {
    align-self: flex-start; margin: 14px 0 0; padding: 7px 15px 7px 13px;
    border-radius: 8px; border-left: 3px solid var(--couleur-secondaire);
    background: rgba(var(--primaire-rgb), 0.07);
    font-weight: 700; font-size: 0.92rem; color: var(--couleur-primaire);
}
/* Les deux boutons tiennent sur une seule ligne, à toutes les largeurs. */
.fiche-eservice-actions {
    display: flex; flex-wrap: nowrap; gap: 18px; margin-top: auto; padding-top: 24px;
}
.btn-savoir, .btn-demande {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 9px; padding: 12px 18px; font-size: 0.86rem; font-weight: 700;
    letter-spacing: 0.2px; cursor: pointer; white-space: nowrap; flex: 1 1 0; min-width: 0;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
                transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-savoir {
    background: transparent; color: var(--couleur-primaire);
    border: 1.5px solid rgba(var(--primaire-rgb), 0.35);
}
.btn-savoir span { transition: transform 0.25s ease; font-size: 1.15rem; line-height: 1; }
.btn-savoir:hover {
    background: rgba(var(--primaire-rgb), 0.07); border-color: var(--couleur-primaire);
    color: var(--couleur-primaire);
}
.btn-savoir:hover span { transform: translateX(4px); }
.btn-demande {
    background: var(--couleur-primaire); color: #fff;
    border: 1.5px solid var(--couleur-primaire);
    box-shadow: 0 6px 16px rgba(var(--primaire-rgb), 0.22);
}
.btn-demande:hover {
    background: var(--primaire-sombre); border-color: var(--primaire-sombre); color: #fff;
    transform: translateY(-2px); box-shadow: 0 12px 24px rgba(var(--primaire-rgb), 0.30);
}

/* Fenêtre « Détails du service » */
.fenetre-eservice { border: 0; border-radius: var(--radius-carte); box-shadow: var(--ombre-carte-survol); }
.fenetre-eservice .modal-header { border-bottom: 1px solid #eef0f2; padding: 22px 28px; }
.fenetre-eservice .modal-title {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 1.3rem; color: var(--noir); margin: 0;
}
.fenetre-eservice .modal-body { padding: 26px 28px 30px; }
.fenetre-eservice .modal-body h5 {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 1.08rem; color: var(--couleur-primaire); margin: 0 0 16px; line-height: 1.4;
}
.fenetre-eservice .prose { font-size: 0.95rem; }
.fenetre-eservice .prose strong { color: var(--noir); }

@media (max-width: 575px) {
    /* Même disposition qu'en grand écran — médaillon à gauche, filet vertical,
       texte à droite — simplement à taille réduite. */
    .fiche-eservice { gap: 16px; padding: 20px 18px; }
    .fiche-eservice-corps { min-height: 0; }
    .service-corps { min-height: 0; }
    .fiche-eservice-embleme { padding-right: 16px; }
    .fiche-eservice-embleme span { width: 46px; height: 46px; border-radius: 12px; }
    .fiche-eservice-embleme svg { width: 22px; height: 22px; }
    .fiche-eservice h3 { font-size: 1.02rem; margin-bottom: 10px; }
    .fiche-eservice .prose { font-size: 0.86rem; }
    .fiche-eservice-cout { font-size: 0.84rem; padding: 5px 12px 5px 10px; margin-top: 11px; }
    /* Les deux boutons restent côte à côte : ils se partagent la largeur
       et leur intitulé ne se coupe pas. */
    .fiche-eservice-actions { gap: 10px; padding-top: 18px; flex-wrap: nowrap; }
    .btn-savoir, .btn-demande {
        flex: 1 1 0; min-width: 0; padding: 10px 8px;
        font-size: 0.76rem; letter-spacing: 0; white-space: nowrap;
    }
    .btn-savoir { gap: 5px; }
    .btn-savoir span { font-size: 1rem; }
}

@media (max-width: 399px) {
    .fiche-eservice { gap: 12px; padding: 18px 14px; }
    .fiche-eservice-embleme { padding-right: 12px; }
    .fiche-eservice-embleme span { width: 40px; height: 40px; }
    .fiche-eservice-embleme svg { width: 19px; height: 19px; }
    .btn-savoir, .btn-demande { padding: 9px 5px; font-size: 0.7rem; }
}

/* ---------- Résultats de recherche ---------- */
.liste-resultats { display: grid; gap: 14px; }
.resultat {
    display: block; background: var(--blanc); border-radius: var(--radius-carte);
    border: var(--bordure-carte); box-shadow: var(--ombre-carte);
    padding: 20px 24px; transition: var(--transition);
}
.resultat:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte-survol); }
.resultat-rubrique {
    display: inline-block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--couleur-primaire);
    background: rgba(var(--primaire-rgb), 0.09); border-radius: 50px; padding: 4px 11px; margin-bottom: 9px;
}
.resultat-titre {
    display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 1.08rem; line-height: 1.35; color: var(--noir); margin-bottom: 5px;
}
.resultat:hover .resultat-titre { color: var(--couleur-primaire); }
.resultat-extrait { display: block; font-size: 0.9rem; color: var(--gris); line-height: 1.55; }
.resultat mark { background: rgba(252,209,22,0.45); color: inherit; padding: 0 2px; border-radius: 3px; }

/* Loupe de la barre de navigation */
.lien-recherche { display: inline-flex; align-items: center; gap: 7px; }
.lien-recherche svg { flex: none; }

/* La loupe du menu : pictogramme seul, l'intitulé reste lu par les lecteurs d'écran.
   Elle est la seule entrée dispensée de la largeur plancher. */
.navbar-main .navbar-nav .lien-recherche { min-width: 0; padding-left: 14px; padding-right: 14px; }
@media (max-width: 991px) {
    .navbar-main .lien-recherche .visually-hidden {
        position: static !important; width: auto !important; height: auto !important;
        margin: 0 !important; overflow: visible !important; clip: auto !important;
        white-space: normal !important;
    }
}

@media (max-width: 991px) {
    /* Menu déroulé en colonne : chaque entrée prend toute la largeur. */
    .navbar-main .navbar-nav .nav-link { min-width: 0; justify-content: flex-start; }
}

@media (min-width: 992px) {
    /* Une seule ligne, quoi qu'il arrive. */
    .navbar-main .navbar-nav { flex-wrap: nowrap; }
}
@media (min-width: 1400px) {
    /* Sur grand écran il reste de la place : largeur plancher commune,
       pour que « Accueil » ne paraisse pas riquiqui à côté des longs. */
    .navbar-main .navbar-nav .nav-link { min-width: 108px; }
    .navbar-main .navbar-nav .lien-recherche { min-width: 0; }
}

.mention-donnees { font-size: 0.84rem; color: var(--gris); margin: 0 0 16px; }
.mention-donnees a { color: var(--couleur-primaire); font-weight: 600; }

/* ---------- Bandeau d'images des fiches (article, projet, village) ---------- */
/* Une hauteur commune quel que soit le format des photos déposées : sans elle,
   le carrousel sautait à chaque changement de diapositive. object-fit:contain
   (et non cover, ni fill) : la photo est montrée en entier, sans rognage ni
   déformation. L'espace qui resterait vide de part et d'autre est comblé par
   une copie floutée et agrandie de la même photo, posée en fond du cadre
   (::before) plutôt que sur la photo elle-même : le flou ne doit jamais
   toucher la photo nette au premier plan. */
.fiche-visuel-cadre, .fiche-carrousel .carousel-item {
    position: relative; overflow: hidden;
    height: clamp(220px, 34vw, 420px);
    border-radius: 16px; box-shadow: var(--ombre-forte);
}
.fiche-visuel-cadre::before, .fiche-carrousel .carousel-item::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background-image: inherit;
    background-size: cover; background-position: center;
    filter: blur(18px) brightness(0.85);
    transform: scale(1.15);
}
.fiche-visuel, .fiche-carrousel .carousel-item img {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}
.fiche-visuel-cadre { margin-bottom: 24px; }
.fiche-carrousel { margin-bottom: 24px; border-radius: 16px; overflow: hidden; }
.fiche-carrousel-legende {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 34px 18px 16px; color: #fff; font-size: 0.9rem;
    background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
}
/* Les flèches par défaut de Bootstrap se perdent sur une photo claire. */
.fiche-carrousel .carousel-control-prev, .fiche-carrousel .carousel-control-next {
    width: 12%; opacity: 0; transition: var(--transition);
}
.fiche-carrousel:hover .carousel-control-prev, .fiche-carrousel:hover .carousel-control-next { opacity: 1; }
.fiche-carrousel .carousel-control-prev-icon, .fiche-carrousel .carousel-control-next-icon {
    width: 42px; height: 42px; border-radius: 50%; background-size: 45%;
    background-color: rgba(0,0,0,0.45);
}
.fiche-carrousel .carousel-indicators { margin-bottom: 10px; }
.fiche-carrousel .carousel-indicators [data-bs-target] {
    width: 9px; height: 9px; border-radius: 50%; border: none;
    background-color: rgba(255,255,255,0.65); margin: 0 4px;
}
.fiche-carrousel .carousel-indicators .active { background-color: #fff; }
/* Sur écran tactile il n'y a pas de survol : les flèches restent visibles. */
@media (hover: none) {
    .fiche-carrousel .carousel-control-prev, .fiche-carrousel .carousel-control-next { opacity: 1; }
}

/* ---------- Étiquettes transversales (articles, projets) ---------- */
.fiche-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.etiquette-pill {
    display: inline-block; padding: 5px 14px; border-radius: 50px;
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    background: rgba(var(--primaire-rgb), 0.09); color: var(--couleur-primaire);
    border: 1px solid rgba(var(--primaire-rgb), 0.22);
    transition: var(--transition);
}
.etiquette-pill:hover { background: var(--couleur-primaire); color: #fff; }

/* Étiquettes sur une carte (actualités, activités...) : à droite du bouton
   « En savoir plus », sur la même ligne. N'apparaît que si l'article en
   porte au moins une. */
.card-footer-ligne {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; width: 100%;
}
.etiquette-mini-groupe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.etiquette-pill-mini { padding: 3px 10px; font-size: 0.72rem; }

/* ---------- Partage social (icônes) ---------- */
.partage-social {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
}
.partage-label { margin-right: 2px; }
.partage-boutons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.partage-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    color: #fff; text-decoration: none; border: none; cursor: pointer;
    transition: var(--transition);
}
.partage-icone:hover { transform: translateY(-2px); filter: brightness(1.08); }
.partage-facebook { background: #1877F2; }
.partage-whatsapp { background: #25D366; }
.partage-copier   { background: var(--gris); }
.partage-natif    { background: var(--couleur-primaire); }
.partage-message  { font-size: 0.82rem; color: var(--couleur-primaire); font-weight: 600; }
@media (max-width: 480px) {
    .partage-icone { width: 34px; height: 34px; }
}

/* ---------- Bannière d'installation (PWA) ---------- */
.pwa-banniere {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1050;
    max-width: 460px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    background: #fff; border-radius: 14px; padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    animation: pwaApparition 0.3s ease;
}
.pwa-banniere img { border-radius: 8px; flex: none; }
.pwa-banniere p { margin: 0; font-size: 0.88rem; line-height: 1.35; flex: 1; color: var(--noir); }
.pwa-banniere-fermer {
    background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--gris);
    padding: 0 4px; cursor: pointer; flex: none;
}
@keyframes pwaApparition {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
    .pwa-banniere { flex-wrap: wrap; }
    .pwa-banniere p { flex-basis: 100%; order: -1; margin-bottom: 4px; }
}

/* ---------- Bouton d'abonnement aux notifications (badge nouvel article) ---------- */
.push-bouton {
    position: fixed; left: 24px; bottom: 24px; z-index: 999;
    display: flex; align-items: center; gap: 8px;
    background: var(--couleur-primaire); color: #fff; border: none;
    border-radius: 50px; padding: 12px 18px; font-size: 0.85rem; font-weight: 600;
    box-shadow: var(--ombre-forte); cursor: pointer; transition: var(--transition);
}
.push-bouton:hover { background: var(--couleur-accent); transform: translateY(-3px); }
.push-bouton:disabled { opacity: 0.6; cursor: default; transform: none; }
.push-bouton i { font-size: 1.05rem; }
@media (max-width: 575px) {
    .push-bouton span { display: none; }
    .push-bouton { padding: 12px; border-radius: 50%; }
}