/* ============================================================
   MAIRIE DE NATITINGOU — Compléments de style
   ------------------------------------------------------------
   Comble les classes utilisées dans les vues mais définies
   nulle part. Recensement fait à la machine sur les 420 fichiers
   du projet, en tenant compte des blocs <style> internes à
   chaque vue et aux trois gabarits.

   Ne modifie aucune règle existante : n'ajoute que ce qui
   manquait. Chargée en dernier.
   ============================================================ */

/* ============================================================
   1. GABARIT DE L'ESPACE DE PUBLICATION
   .principal et .bas-sidebar structurent tout l'espace de
   l'agent. Sans elles, la colonne de contenu ne se plaçait pas
   à côté du menu et le bloc de compte flottait en haut.
   ============================================================ */
.principal{
  flex:1;min-width:0;
  padding:26px 30px 60px;
  background:var(--fond,#F6F8F7);
}
@media(max-width:880px){.principal{padding:18px 15px 46px}}

.bas-sidebar{
  margin-top:auto;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:.85rem;
}
.bas-sidebar a{display:block;color:inherit;text-decoration:none;padding:5px 0}
.bas-sidebar a:hover{opacity:.82}

/* ============================================================
   2. PAGE D'ACCUEIL — LE MOT DU MAIRE
   Le bloc s'affichait en colonne, photo étirée sur toute la
   largeur. Il retrouve sa mise en page en deux colonnes.
   ============================================================ */
.mot-maire-in{
  display:grid;grid-template-columns:212px minmax(0,1fr);
  gap:34px;align-items:center;
}
@media(max-width:760px){
  .mot-maire-in{grid-template-columns:1fr;gap:22px;text-align:center}
}

.mm-photo{
  width:212px;height:212px;border-radius:50%;
  overflow:hidden;flex-shrink:0;margin:0 auto;
  background:var(--vert-pale,#EDF3EF);
  border:4px solid #fff;
  box-shadow:0 10px 34px rgba(16,40,30,.16);
  display:flex;align-items:center;justify-content:center;
}
.mm-photo img{width:100%;height:100%;object-fit:cover;object-position:center 24%;display:block}
.mm-photo .ph-vide{font-size:3.4rem;opacity:.34}

.mm-txt blockquote{
  margin:8px 0 0;padding:0 0 0 20px;
  border-left:3px solid var(--or,#C9A227);
  font-size:1.09rem;line-height:1.72;color:#2A3831;font-style:italic;
}
@media(max-width:760px){
  .mm-txt blockquote{border-left:0;border-top:3px solid var(--or,#C9A227);padding:16px 0 0}
}
.mm-sign{margin:18px 0 0;line-height:1.4}
.mm-sign b{display:block;font-size:1.02rem;color:#12241C}
.mm-sign span{font-size:.87rem;color:#6B7873}

/* ============================================================
   3. AUTRES PAGES PUBLIQUES
   ============================================================ */

/* Bascule jour / nuit de l'en-tête */
.ic-lune,.ic-soleil{display:block}

/* Deux colonnes égales — contact, localisation */
.d2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
@media(max-width:820px){.d2{grid-template-columns:1fr;gap:20px}}

/* Rangée alternée d'une actualité longue */
.alt{background:#F4F7F5}

/* Jauge d'assiduité d'un conseiller */
.cons-jauge{
  height:6px;border-radius:4px;background:#E6ECE9;overflow:hidden;margin-top:8px;
}
.cons-jauge > span{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--vert,#006B3F),var(--or,#C9A227));
}

/* Filtres à puces — économie locale */
.puce-filtre{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:22px;
  border:1.5px solid #DCE5E0;background:#fff;color:#3A4A43;
  font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
.puce-filtre:hover{border-color:var(--vert,#006B3F);color:var(--vert,#006B3F)}
.puce-filtre.actif{background:var(--vert,#006B3F);border-color:var(--vert,#006B3F);color:#fff}

/* Carte de partenaire */
.carte-part{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px 18px;background:#fff;
  border:1px solid #E3EAE6;border-radius:12px;text-align:center;
  transition:box-shadow .24s ease,transform .24s ease;
}
.carte-part:hover{box-shadow:0 10px 30px rgba(16,40,30,.10);transform:translateY(-3px)}
.carte-part img{max-width:130px;max-height:74px;object-fit:contain}
.carte-part h3{margin:0;font-size:1rem;line-height:1.34}
.carte-part p{margin:0;font-size:.86rem;color:#6B7873}

/* Fiche d'un service : pièce principale vs pièce facultative */
.svc-principal{
  border-left:4px solid var(--vert,#006B3F);
  background:#EDF3EF;padding:15px 19px;border-radius:0 9px 9px 0;
  font-weight:600;color:#12241C;
}
.svc-doc-opt{
  color:#6B7873;font-style:italic;
}
.svc-doc-opt::after{content:" (facultatif)";font-size:.85em;opacity:.8}

/* Le logo WhatsApp garde sa teinte propre au survol */
.reseau-whatsapp:hover{background:#25D366;color:#fff}

/* ============================================================
   4. DOCUMENTS OFFICIELS — ARRÊTÉS, RÉCÉPISSÉS, REGISTRES
   Les gabarits de l'espace Permis avaient été repris de ceux du
   Conseil sans leur feuille de style : à l'écran comme à
   l'impression, l'acte sortait sans en-tête, sans cadre et sans
   bloc de signature. C'est le manque le plus lourd de
   conséquence — un arrêté mal présenté n'est pas opposable.
   ============================================================ */
.doc-wrap{
  max-width:820px;margin:0 auto 40px;padding:46px 52px;
  background:#fff;border:1px solid #E0E6E2;border-radius:4px;
  box-shadow:0 3px 18px rgba(16,40,30,.07);
  font-family:"Times New Roman",Georgia,serif;
  font-size:12.5pt;line-height:1.62;color:#111;
}
@media(max-width:700px){.doc-wrap{padding:26px 20px}}

.doc-wrap .entete{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:16px;align-items:start;margin-bottom:26px;
}
.doc-wrap .gauche{text-align:left}
.doc-wrap .droite{text-align:right}
.doc-wrap .mairie{
  font-weight:700;text-transform:uppercase;font-size:11pt;line-height:1.45;
}
.doc-wrap .rep{
  font-weight:700;text-transform:uppercase;font-size:10.5pt;line-height:1.45;
}
.doc-wrap .bande{
  height:3px;margin:0 0 22px;border-radius:2px;
  background:linear-gradient(90deg,
    #006B3F 0 33.3%, #FCD116 33.3% 66.6%, #E8112D 66.6%);
}
.doc-wrap .titre-doc{
  text-align:center;font-size:15pt;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;
  margin:26px 0 6px;line-height:1.32;
}
.doc-wrap .sous-titre{text-align:center;font-size:11.5pt;color:#333;margin:0 0 20px}
.doc-wrap .ref-doc{text-align:center;font-size:11pt;color:#444;margin:0 0 26px}
.doc-wrap .sec{margin:20px 0}
.doc-wrap .sec > h2,.doc-wrap .section-t{
  font-size:12pt;font-weight:700;text-transform:uppercase;
  margin:0 0 9px;padding-bottom:5px;border-bottom:1px solid #D5DDD8;
}
.doc-wrap .ligne{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:12px;padding:5px 0;border-bottom:1px dotted #DDE3E0;
}
.doc-wrap .ligne:last-child{border-bottom:0}
.doc-wrap .lbl{font-weight:700}
.doc-wrap .detail{color:#222}
.doc-wrap .objet{margin:18px 0;text-align:justify}
.doc-wrap .ref{font-size:11pt;color:#444}
.doc-wrap .signature{
  margin-top:46px;text-align:right;line-height:1.7;page-break-inside:avoid;
}
.doc-wrap .signature .lieu{margin-bottom:52px}
.doc-wrap .signature b{display:block}
.doc-wrap .registre,.doc-wrap .reg{width:100%;border-collapse:collapse;font-size:10.5pt}
.doc-wrap .registre th,.doc-wrap .registre td,
.doc-wrap .reg th,.doc-wrap .reg td{border:1px solid #C9D2CD;padding:6px 8px;text-align:left}
.doc-wrap .registre th,.doc-wrap .reg th{background:#EDF2EF;font-weight:700}
.doc-wrap .votes,.doc-wrap .vote-box{
  display:flex;gap:26px;flex-wrap:wrap;margin:14px 0;
  padding:13px 17px;background:#F5F8F6;border:1px solid #E0E6E2;border-radius:4px;
}
.doc-wrap .sous{font-size:10.5pt;color:#555}
.doc-col{display:flex;flex-direction:column;gap:2px}

/* Barre d'actions au-dessus du document — jamais imprimée */
.barre-actions{
  max-width:820px;margin:0 auto 16px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;
}

@media print{
  .barre-actions,.sans-impression{display:none !important}
  .doc-wrap{
    max-width:none;margin:0;padding:0;border:0;box-shadow:none;border-radius:0;
  }
  .doc-wrap .signature{page-break-inside:avoid}
}

/* ============================================================
   5. ESPACES MÉTIER — COMPLÉMENTS PONCTUELS
   ============================================================ */

/* Bloc d'informations d'une fiche (métier, arrondissements) */
.infos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:13px;margin:14px 0;
}
.infos > div{
  padding:12px 15px;background:#F6F9F7;
  border:1px solid #E6ECE9;border-radius:9px;
}
.infos b,.infos strong{display:block;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.045em;color:#6B7873;font-weight:700;margin-bottom:3px}

/* Fiche d'évaluation DADE — grille et lecture seule */
.fiche-grille{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px;
}
.fiche-lecture{background:#F8FAF9}
.fiche-lecture input,.fiche-lecture select,.fiche-lecture textarea{
  background:#F1F5F3;color:#3A4A43;
}
.fiche-bloc{
  border:1px solid #E3EAE6;border-radius:10px;
  padding:17px 19px;margin-bottom:15px;background:#fff;
}
.fiche-bloc > h3{margin:0 0 12px;font-size:1rem;color:var(--vert-fonce,#075030)}
.fiche-cases{display:flex;gap:17px;flex-wrap:wrap;align-items:center}
.fiche-cases label{display:inline-flex;gap:6px;align-items:center;font-size:.9rem}
.fiche-table{width:100%;border-collapse:collapse;font-size:.88rem}
.fiche-table th,.fiche-table td{border:1px solid #E3EAE6;padding:7px 9px;text-align:left}
.fiche-table th{background:#F1F5F3;font-weight:600}

/* Cases à cocher dans les formulaires */
.case{display:flex;gap:9px;align-items:center;font-size:.93rem;cursor:pointer}
.case input[type=checkbox]{width:17px;height:17px;accent-color:var(--vert,#006B3F);cursor:pointer}

/* Rapports : bouton de suppression discret, accent doré */
.btn-lien-suppr{
  background:transparent;border:0;padding:4px 8px;cursor:pointer;
  color:var(--rouge,#B3261E);font-size:.86rem;text-decoration:underline;
}
.btn-lien-suppr:hover{color:#8C1D18}
.or{color:var(--or,#C9A227)}
.orange{color:#C97A1E}

/* ============================================================
   6. PIÈCES JOINTES — COMPOSANT PARTAGÉ
   ============================================================ */
.pj-bloc{border:1px solid #E3EAE6;border-radius:11px;background:#fff;margin:16px 0}
.pj-tete{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 17px;border-bottom:1px solid #EEF3F0;background:#F8FAF9;
  border-radius:11px 11px 0 0;
}
.pj-tete h3{margin:0;font-size:.98rem}
.pj-compte{font-size:.8rem;color:#6B7873;font-weight:600}
.pj-liste{list-style:none;margin:0;padding:0}
.pj-liste li{
  display:flex;align-items:center;gap:12px;
  padding:11px 17px;border-bottom:1px solid #F1F5F3;
}
.pj-liste li:last-child{border-bottom:0}
.pj-ic{
  flex-shrink:0;width:36px;height:36px;border-radius:7px;
  background:#EDF3EF;color:var(--vert,#006B3F);
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;text-transform:uppercase;
}
.pj-lib{flex:1;min-width:0;font-weight:600;font-size:.93rem;color:#12241C;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-info{font-size:.79rem;color:#6B7873;font-weight:400}
.pj-suppr{background:transparent;border:0;color:var(--rouge,#B3261E);cursor:pointer;padding:5px 8px}
.pj-form{padding:14px 17px;border-top:1px solid #EEF3F0;background:#FAFCFB;border-radius:0 0 11px 11px}
.pj-aide{font-size:.79rem;color:#6B7873;margin:7px 0 0}
.pj-vide{padding:24px 17px;text-align:center;color:#7A8580;font-size:.9rem}

/* ============================================================
   7. AJOUT ET EN-TÊTES D'ÉCRAN
   ============================================================ */
.ajout{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-bottom:16px;
}
.entete-equipe,.permis-entete,.page-interne-tete,.entite-tete{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:18px;flex-wrap:wrap;margin-bottom:18px;
}
.page-interne-tete h1,.entite-tete h1{margin:0 0 5px;font-size:1.4rem;line-height:1.24}
.permis-filtres,.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:15px}
.fil-ariane{font-size:.84rem;color:#6B7873;margin-bottom:11px}
.fil-ariane a{color:var(--vert,#006B3F);text-decoration:none}
.fil-ariane a:hover{text-decoration:underline}

/* Indicateurs chiffrés */
.indics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin-bottom:18px}
.indic{
  padding:15px 17px;background:#fff;border:1px solid #E6ECE9;border-radius:11px;
  border-left:4px solid var(--vert,#006B3F);
}
.indic .val,.indic b{display:block;font-size:1.6rem;font-weight:700;color:#12241C;line-height:1.1}
.indic .lib,.indic span{font-size:.8rem;color:#6B7873}

/* Jauge de progression générique */
.jauge{height:8px;border-radius:5px;background:#E6ECE9;overflow:hidden}
.jauge > span{display:block;height:100%;border-radius:5px;background:var(--vert,#006B3F)}

/* Attributions d'une entité */
.liste-attr{list-style:none;margin:0;padding:0}
.liste-attr li{padding:9px 0;border-bottom:1px solid #F1F5F3}
.liste-attr li:last-child{border-bottom:0}
.attr-ref{font-size:.78rem;color:#6B7873;font-weight:600}
.attr-txt{display:block;margin-top:2px}
.gen-rapport{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* Barre horizontale de progression */
.barre{height:8px;border-radius:5px;background:#E6ECE9;overflow:hidden;margin:7px 0}
.barre > span{display:block;height:100%;background:var(--vert,#006B3F);border-radius:5px}

/* ============================================================
   8. POINTAGE
   Ces classes servent d'ancres au JavaScript ; on ne leur ajoute
   que l'alignement, sans toucher au comportement.
   ============================================================ */
.pointage-ligne{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.etat-pt{display:inline-block;text-align:center}

/* ============================================================
   9. ORGANIGRAMME
   ============================================================ */
.org-entete-page{margin-bottom:22px}
.org-groupe{margin-bottom:30px}
.org-groupe-titre{
  font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:#6B7873;margin:0 0 13px;padding-bottom:7px;border-bottom:2px solid #E6ECE9;
}
.org-racine{display:flex;flex-direction:column;gap:11px}
.org-item{position:relative}
.org-carte{
  display:block;padding:13px 17px;background:#fff;text-decoration:none;
  border:1px solid #E3EAE6;border-left:4px solid var(--vert,#006B3F);border-radius:9px;
  transition:box-shadow .22s ease,transform .22s ease;
}
.org-carte:hover{box-shadow:0 7px 22px rgba(16,40,30,.10);transform:translateY(-2px)}
.org-tete{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.org-code{
  font-size:.72rem;font-weight:700;letter-spacing:.05em;
  padding:2px 8px;border-radius:4px;background:#EDF3EF;color:var(--vert-fonce,#075030);
}
.org-intitule{font-weight:600;color:#12241C}
.org-type{font-size:.74rem;color:#8A948F;text-transform:uppercase;letter-spacing:.04em}
.org-resp{font-size:.86rem;color:#5B6661;margin:5px 0 0}
.org-enfants{margin:11px 0 0 26px;padding-left:17px;border-left:2px dashed #D6E0DA;
  display:flex;flex-direction:column;gap:9px}
.org-lien{color:var(--vert,#006B3F);text-decoration:none;font-size:.86rem}
.org-lien:hover{text-decoration:underline}
.org-stats{display:flex;gap:17px;flex-wrap:wrap;margin-top:9px}
.org-stat{font-size:.8rem;color:#6B7873}
.org-stat b{color:#12241C}

/* ============================================================
   10. COLLECTES PUBLIQUES (DADE)
   ============================================================ */
.collecte-avis{
  border-left:4px solid var(--or,#C9A227);background:#FFFBF0;
  padding:15px 19px;border-radius:0 9px 9px 0;margin-bottom:22px;
  font-size:.95rem;color:#5C4708;
}
.collecte-fin{
  max-width:560px;margin:60px auto;text-align:center;
  padding:44px 30px;background:#fff;
  border:1px solid #E3EAE6;border-radius:14px;
}
.collecte-fin h1{font-size:1.5rem;margin:0 0 11px;color:#12241C}
.collecte-fin p{color:#5B6661;margin:0 auto;max-width:44ch}

/* ============================================================
   11. GRILLE TARIFAIRE PUBLIQUE
   ============================================================ */
.rubrique{margin-bottom:34px}
.rubrique > h2{
  font-size:1.16rem;margin:0 0 12px;padding:11px 17px;
  background:linear-gradient(135deg,var(--vert-fonce,#075030),var(--vert,#006B3F));
  color:#fff;border-radius:9px 9px 0 0;
}
.tableau-tarifs{width:100%;border-collapse:collapse;font-size:.94rem;background:#fff}
.tableau-tarifs th,.tableau-tarifs td{
  padding:11px 15px;border-bottom:1px solid #EEF3F0;text-align:left;vertical-align:top;
}
.tableau-tarifs tr:last-child td{border-bottom:0}
.tableau-tarifs tbody tr:hover{background:#F7FAF8}
.tableau-tarifs .montant{
  text-align:right;white-space:nowrap;font-weight:700;color:var(--vert-fonce,#075030);
  font-variant-numeric:tabular-nums;
}
.tableau-tarifs .unite{font-weight:400;color:#6B7873;font-size:.86em}
.tableau-tarifs .obs{display:block;font-size:.82rem;color:#6B7873;margin-top:3px;font-style:italic}
@media(max-width:640px){
  .tableau-tarifs th,.tableau-tarifs td{padding:9px 11px;font-size:.88rem}
}

/* ============================================================
   12. NUMÉROS UTILES ET D'URGENCE
   ============================================================ */
.section-urgence{background:#FFF6F5;border-top:3px solid #C62828}
.urgence-grille{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:15px;margin-top:18px;
}
.urgence-carte{
  display:flex;flex-direction:column;gap:5px;
  padding:19px 21px;background:#fff;text-decoration:none;
  border:1px solid #F3C4BE;border-left:5px solid #C62828;border-radius:11px;
  transition:box-shadow .22s ease,transform .22s ease;
}
.urgence-carte:hover{box-shadow:0 9px 26px rgba(198,40,40,.14);transform:translateY(-3px)}
.urgence-lib{font-size:.78rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#8C1D18}
.urgence-num{font-size:1.62rem;font-weight:700;color:#B3261E;
  line-height:1.14;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.urgence-desc{font-size:.85rem;color:#6B7873}
.urgence-appel{font-size:.79rem;font-weight:600;color:#C62828;margin-top:3px}
.urgence-sous{color:#8C1D18;font-size:.94rem;margin:5px 0 0}

.numeros-bloc{margin-top:34px}
.numeros-bloc > h3{
  font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#6B7873;margin:0 0 11px;padding-bottom:7px;border-bottom:2px solid #E6ECE9;
}
.numeros-liste{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:11px;
}
.numeros-liste a,.numeros-liste > div{
  display:flex;justify-content:space-between;align-items:center;gap:13px;
  padding:12px 16px;background:#fff;border:1px solid #E6ECE9;border-radius:9px;
  text-decoration:none;color:inherit;
  transition:border-color .22s ease;
}
.numeros-liste a:hover{border-color:var(--vert,#006B3F)}
.numeros-liste strong{font-weight:700;color:var(--vert-fonce,#075030);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============================================================
   13. DIVERS
   ============================================================ */
.alerte-info{
  border-left:4px solid #12406B;background:#EDF2F8;
  padding:14px 18px;border-radius:0 9px 9px 0;margin-bottom:16px;
  font-size:.92rem;color:#173B5C;
}
.onglets-groupes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.sections-liste{display:flex;flex-direction:column;gap:11px}
.sec-info,.sec-etat,.sec-action,.sec-num{font-size:.88rem}
.sec-num{font-weight:700;color:var(--vert,#006B3F)}
.sec-vide{color:#9AA5A0;font-style:italic}
.barre-g{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-bottom:15px}
.actions-statut{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}
.frise{display:flex;flex-direction:column;gap:0;margin:18px 0;padding-left:22px;
  border-left:2px solid #E6ECE9}
.frise > li,.frise > div{position:relative;padding:0 0 18px 18px}
.frise > li::before,.frise > div::before{
  content:"";position:absolute;left:-27px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--vert,#006B3F);border:2px solid #fff;
}

/* ============================================================
   14. ASSISTANT INTERNE — DOCUMENTS JOINTS
   Les fichiers transitent en mémoire : ils sont transmis à
   l'IA puis oubliés, jamais écrits sur le serveur.
   ============================================================ */
.assistant-fichiers{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 14px;border-top:1px solid #EEF3F0;background:#FAFCFB;
}
.assistant-joindre{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border:1px solid #DCE5E0;border-radius:18px;
  background:#fff;color:#3A4A43;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.assistant-joindre:hover{border-color:var(--vert,#006B3F);color:var(--vert,#006B3F)}
.assistant-docs-liste{
  font-size:.76rem;color:#6B7873;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ============================================================
   15. SOCLE DES CHAMPS DE SAISIE
   ------------------------------------------------------------
   Jusqu'ici, un champ n'était habillé que s'il se trouvait dans
   un conteneur .champ, .tableau-saisie ou .dade-grille. Partout
   ailleurs — 83 champs répartis sur 12 espaces, dont l'Annuaire
   des relais communautaires et le Patrimoine communal — le
   navigateur affichait ses contrôles bruts : bordure grise fine,
   coins carrés, police système. À côté d'un formulaire habillé,
   l'écart se voyait immédiatement.

   Ce socle habille TOUS les contrôles de formulaire, où qu'ils
   soient.

   Il est écrit avec :where(), dont la spécificité est nulle :
   toute règle existante — .champ input, .tableau-saisie input,
   un style en ligne — l'emporte automatiquement. Aucune mise en
   page actuelle ne peut donc être modifiée par cet ajout. Sur un
   navigateur trop ancien pour :where(), la règle est simplement
   ignorée et l'on retrouve l'affichage d'aujourd'hui.
   ============================================================ */

:where(
  input[type="text"], input[type="search"], input[type="email"],
  input[type="url"],  input[type="tel"],    input[type="password"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input[type="week"],
  input:not([type]), select, textarea
){
  width:100%;
  padding:9px 12px;
  border:1.5px solid var(--gris-300,#D6DEDA);
  border-radius:8px;
  background:#fff;
  color:var(--texte,#12241C);
  font-family:inherit;
  font-size:.94rem;
  line-height:1.45;
  transition:border-color .18s ease, box-shadow .18s ease;
}

:where(
  input[type="text"], input[type="search"], input[type="email"],
  input[type="url"],  input[type="tel"],    input[type="password"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input:not([type]), select, textarea
):focus{
  outline:none;
  border-color:var(--vert,#006B3F);
  box-shadow:0 0 0 3px rgba(0,107,63,.13);
}

:where(input, select, textarea):disabled,
:where(input, select, textarea)[readonly]{
  background:#F2F5F3;
  color:#6B7873;
  cursor:not-allowed;
}

:where(input, textarea)::placeholder{color:#9AA5A0;opacity:1}

/* Le sélecteur reçoit sa propre flèche : celle du navigateur
   varie d'un système à l'autre et déséquilibre les formulaires. */
:where(select){
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B6661' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
:where(select[multiple]){background-image:none;padding-right:12px}

:where(textarea){resize:vertical;min-height:88px}

/* Champs de fichier : cadre en pointillés, zone de dépôt lisible */
:where(input[type="file"]){
  width:100%;
  padding:11px 13px;
  border:1.5px dashed var(--gris-300,#D6DEDA);
  border-radius:8px;
  background:#FAFCFB;
  font-family:inherit;
  font-size:.88rem;
  color:#5B6661;
  cursor:pointer;
}
:where(input[type="file"]):hover{border-color:var(--vert,#006B3F);background:#F4F9F6}
:where(input[type="file"])::file-selector-button{
  margin-right:12px;padding:6px 13px;
  border:0;border-radius:6px;
  background:var(--vert,#006B3F);color:#fff;
  font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
}

/* Cases et boutons radio : taille confortable au doigt */
:where(input[type="checkbox"], input[type="radio"]){
  width:17px;height:17px;
  accent-color:var(--vert,#006B3F);
  cursor:pointer;vertical-align:-3px;
}

/* Étiquette isolée, hors conteneur .champ */
:where(form label){font-size:.88rem;font-weight:600;color:var(--texte,#12241C)}

/* Champs compacts à l'intérieur d'un tableau : la largeur pleine
   ferait exploser la colonne. */
:where(td, th) :where(input, select){min-width:0}

/* ============================================================
   16. CADRES ET ENCARTS DE FORMULAIRE
   Les blocs de filtres et de recherche présents en tête de
   plusieurs écrans n'avaient aucun cadre : les champs
   flottaient au-dessus du contenu.
   ============================================================ */
.bloc-filtres,.zone-filtres,.encart-saisie{
  display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end;
  padding:15px 17px;margin-bottom:16px;
  background:#fff;border:1px solid #E6ECE9;border-radius:11px;
}
.bloc-filtres label,.zone-filtres label{
  display:block;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:#6B7873;margin-bottom:4px;
}

/* ------------------------------------------------------------
   Exception : le grand tableau de saisie DADE (24 colonnes).
   Ses sélecteurs déclarent « background:transparent », un
   raccourci qui efface l'image de fond — donc la flèche ajoutée
   plus haut. Combinée à appearance:none, la liste déroulante
   n'aurait plus aucun repère visuel. On y rétablit le rendu
   natif du navigateur.
   ------------------------------------------------------------ */
.tableau-saisie select{
  appearance:auto;-webkit-appearance:auto;-moz-appearance:auto;
  background-image:none;padding-right:6px;
}

/* ============================================================
   17. PAGE CONCEPTEUR
   ============================================================ */
.cpt-chef{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:center;
}
@media(max-width:760px){.cpt-chef{grid-template-columns:1fr;gap:26px;text-align:center}}

.cpt-portrait{
  width:230px;height:230px;border-radius:50%;overflow:hidden;margin:0 auto;
  background:linear-gradient(135deg,var(--vert-fonce,#075030),var(--vert,#006B3F));
  border:5px solid #fff;box-shadow:0 14px 44px rgba(16,40,30,.20);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cpt-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.cpt-initiales{color:#fff;font-size:3.6rem;font-weight:700;letter-spacing:.03em}

.cpt-role{
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--or,#C9A227);margin:0 0 5px;
}
.cpt-chef-txt h2{margin:0 0 8px;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.14}
@media(max-width:760px){.cpt-chef-txt .titre-filet.centre::after,
                        .cpt-chef-txt h2::after{left:50%;transform:translateX(-50%)}}
.cpt-fonction{margin:0 0 12px;font-size:1.05rem;color:#2A3831}
.cpt-bio{margin:0 0 22px;color:#5B6661;max-width:60ch;line-height:1.7}

.cpt-contacts{display:flex;gap:11px;flex-wrap:wrap}
@media(max-width:760px){.cpt-contacts{justify-content:center}}
.cpt-contact{
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 17px;background:#fff;border:1px solid #E3EAE6;border-radius:11px;
  text-decoration:none;color:inherit;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.cpt-contact:hover{
  border-color:var(--vert,#006B3F);
  box-shadow:0 8px 24px rgba(16,40,30,.10);transform:translateY(-2px);
}
.cpt-contact-ic{
  flex-shrink:0;width:38px;height:38px;border-radius:9px;
  background:#EDF3EF;color:var(--vert,#006B3F);
  display:flex;align-items:center;justify-content:center;
}
.cpt-contact-lib{display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:#8A948F;font-weight:700}
.cpt-contact-val{display:block;font-size:.94rem;font-weight:600;color:#12241C}

/* --- Structures partenaires --- */
.cpt-structures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;
}
.cpt-structure{
  background:#fff;border:1px solid #E3EAE6;border-radius:14px;padding:26px 28px;
  border-top:4px solid var(--vert,#006B3F);
  transition:box-shadow .24s ease,transform .24s ease;
}
.cpt-structure:hover{box-shadow:0 12px 34px rgba(16,40,30,.11);transform:translateY(-3px)}
.cpt-struct-tete{display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cpt-struct-tete h3{margin:0;font-size:1.28rem;color:#12241C;line-height:1.2}
.cpt-badge{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:5px 11px;border-radius:20px;background:#EDF3EF;color:var(--vert-fonce,#075030);
  white-space:nowrap;
}
.cpt-badge-or{background:#FDF5DF;color:#8A6508}
.cpt-struct-txt{margin:0 0 20px;color:#5B6661;font-size:.94rem;line-height:1.68}

.cpt-part-ligne{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:6px}
.cpt-part-lib{font-size:.8rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.045em;color:#6B7873}
.cpt-part-val{font-size:1.32rem;font-weight:700;color:#12241C;
  font-variant-numeric:tabular-nums}
.cpt-jauge{height:8px;border-radius:5px;background:#EDF2EF;overflow:hidden}
.cpt-jauge > span{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--vert-fonce,#075030),var(--vert,#006B3F));
}
.cpt-jauge > span.or{background:linear-gradient(90deg,#B8860B,var(--or,#C9A227))}

/* --- Suivi Mairie --- */
.cpt-suivi{
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
}
.cpt-sceau{
  flex-shrink:0;width:104px;height:104px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.34);color:rgba(255,255,255,.62);
  display:flex;align-items:center;justify-content:center;
}
@media(max-width:700px){.cpt-sceau{display:none}}

/* --- Appel à contact --- */
.cpt-appel{
  text-align:center;background:#fff;border:1px solid #E3EAE6;border-radius:16px;
  padding:40px 32px;max-width:820px;margin:0 auto;
}
@media(max-width:600px){.cpt-appel{padding:30px 20px}}

/* Lien discret dans le pied de page */
.pied-concepteur{display:inline-flex;align-items:center;gap:5px}
.pied-concepteur:hover{color:var(--or,#C9A227)}

/* ============================================================
   18. EN-TÊTE OFFICIEL PAR ENTITÉ
   ------------------------------------------------------------
   Reproduit les modèles Word transmis par la Mairie : bloc de
   coordonnées à gauche, République du Bénin à droite, liseré
   tricolore, rattachement et direction, puis la ligne
   « qualité + numéro » avec ses pointillés à compléter.
   ============================================================ */
.eo{
  font-family:"Times New Roman",Georgia,serif;
  color:#111;margin-bottom:22px;
}
/* Armoiries de la République à gauche, identité communale à droite :
   c'est l'ordre protocolaire, l'emblème national précède l'émetteur. */
.eo-haut{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
.eo-gauche{text-align:center;max-width:120px}
.eo-armoiries{
  display:block;width:74px;height:auto;max-height:72px;
  object-fit:contain;margin:0 auto 5px;
}
.eo-republique{
  margin:0;font-weight:700;font-size:10.5pt;line-height:1.3;
  text-transform:uppercase;letter-spacing:.02em;text-align:center;
}
.eo-droite{min-width:0}
.eo-droite-in{
  display:flex;gap:12px;align-items:flex-start;justify-content:flex-end;
}
.eo-logo-mairie{
  width:62px;height:auto;max-height:66px;object-fit:contain;flex-shrink:0;
}
.eo-droite-txt{text-align:right;min-width:0}
.eo-mairie{
  margin:0 0 4px;font-weight:700;font-size:13pt;
  text-transform:uppercase;letter-spacing:.02em;
}
.eo-coord{margin:0;font-size:10.5pt;line-height:1.5}
.eo-coord strong{font-weight:700}

.eo-bande{
  height:3px;margin:14px 0 12px;border-radius:2px;
  background:linear-gradient(90deg,
    #006B3F 0 33.3%, #FCD116 33.3% 66.6%, #E8112D 66.6%);
}

.eo-entite{margin-bottom:10px}
.eo-rattachement{margin:0;font-weight:700;font-size:11.5pt}
.eo-direction{margin:2px 0 0;font-weight:700;font-size:11.5pt}

.eo-ligne-num{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;flex-wrap:wrap;margin-top:10px;font-size:11pt;
}
.eo-qualite{font-weight:700}
.eo-numero{white-space:nowrap}
.eo-num-vide{letter-spacing:.12em;color:#333}
.eo-num-saisi{font-weight:600}

@media(max-width:600px){
  .eo-haut{grid-template-columns:auto 1fr;gap:12px}
  .eo-armoiries{width:56px}
  .eo-logo-mairie{width:48px}
  .eo-coord{font-size:9.5pt}
  .eo-ligne-num{flex-direction:column;gap:6px}
}

@media print{
  .eo{margin-bottom:18px}
  .eo-bande{
    /* Sans cela, certains navigateurs suppriment les aplats de
       couleur à l'impression et le liseré disparaît. */
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}

/* ============================================================
   19. FICHE ENTREPRISE
   Vitrine des entreprises locales. Une entreprise qui paie pour
   sa visibilité doit voir que la Mairie la met réellement en
   valeur — d'où le bandeau plein écran, les actions au pouce et
   la galerie.
   ============================================================ */
.ent-hero{
  position:relative;isolation:isolate;color:#fff;
  padding:72px 0 56px;overflow:hidden;
  background:linear-gradient(135deg,#04361F 0%,#0A6B3B 60%,#12874C 100%);
  border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,#006B3F 0 33.3%,#FCD116 33.3% 66.6%,#E8112D 66.6%) 1;
}
.ent-hero.a-image::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--ent-couv);background-size:cover;background-position:center;
}
.ent-hero.a-image::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(4,54,31,.93) 0%,rgba(4,54,31,.76) 52%,rgba(4,54,31,.42) 100%);
}
.ent-hero-in{position:relative;z-index:1}
.ent-hero h1{
  font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08;
  letter-spacing:-.015em;margin:0 0 10px;color:#fff;
}
.ent-hero .eyebrow{color:var(--or-clair,#E4C558)}
.ent-lieu{margin:0 0 14px;color:rgba(255,255,255,.9);font-size:1.02rem;
  display:inline-flex;align-items:center;gap:8px}
.ent-hero .fil,.ent-hero .fil a{color:rgba(255,255,255,.7)}
.ent-hero .fil a:hover{color:var(--or-clair,#E4C558)}
.ent-label{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  padding:6px 14px;border-radius:22px;
  background:rgba(228,197,88,.18);border:1px solid rgba(228,197,88,.5);
  color:#F0DCA8;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
}

/* Actions rapides — collantes sur mobile, atteignables au pouce */
.ent-actions-barre{background:#fff;border-bottom:1px solid #E3EAE6;position:sticky;top:0;z-index:20}
.ent-actions{display:flex;gap:10px;flex-wrap:wrap;padding:13px 0}
.ent-action{
  display:inline-flex;align-items:center;gap:11px;
  padding:10px 17px;border:1px solid #E3EAE6;border-radius:11px;
  text-decoration:none;color:inherit;background:#fff;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.ent-action:hover{border-color:var(--vert,#006B3F);
  box-shadow:0 8px 22px rgba(16,40,30,.10);transform:translateY(-2px)}
.ent-action-ic{
  flex-shrink:0;width:36px;height:36px;border-radius:9px;
  background:#EDF3EF;color:var(--vert,#006B3F);
  display:flex;align-items:center;justify-content:center;
}
.ent-action-lib{display:block;font-size:.71rem;text-transform:uppercase;
  letter-spacing:.06em;color:#8A948F;font-weight:700}
.ent-action-val{display:block;font-size:.92rem;font-weight:600;color:#12241C}
@media(max-width:560px){
  .ent-actions{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .ent-actions::-webkit-scrollbar{display:none}
  .ent-action{flex-shrink:0}
}

.ent-grille{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}
@media(max-width:940px){.ent-grille{grid-template-columns:1fr}}

.ent-bloc{
  background:#fff;border:1px solid #E3EAE6;border-radius:14px;
  padding:28px 30px;margin-bottom:20px;
}
@media(max-width:600px){.ent-bloc{padding:20px 18px}}
.ent-texte{font-size:1.02rem;line-height:1.76;color:#2A3831}

.ent-services{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px}
.ent-services li{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;background:#F6F9F7;border-radius:10px;
  font-size:.95rem;color:#12241C;
}
.ent-sv-ic{flex-shrink:0;color:var(--vert,#006B3F);margin-top:1px}

.ent-carte{height:340px;border-radius:12px;overflow:hidden;border:1px solid #E3EAE6}
@media(max-width:600px){.ent-carte{height:250px}}

.ent-fiche{position:sticky;top:86px;display:flex;flex-direction:column;gap:16px}
@media(max-width:940px){.ent-fiche{position:static}}
.ent-carte-info{background:#fff;border:1px solid #E3EAE6;border-radius:14px;padding:24px 26px}
.ent-carte-info h3{margin:0 0 16px;font-size:1.08rem;padding-bottom:10px;
  border-bottom:2px solid #EEF3F0}
.ent-carte-info dl{margin:0;display:grid;gap:3px}
.ent-carte-info dt{font-size:.73rem;text-transform:uppercase;letter-spacing:.055em;
  color:#8A948F;font-weight:700;margin-top:12px}
.ent-carte-info dt:first-child{margin-top:0}
.ent-carte-info dd{margin:0;font-size:.95rem;color:#12241C;line-height:1.55}
.ent-reseau{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:.9rem;font-weight:600;color:var(--vert,#006B3F);text-decoration:none}
.ent-reseau:hover{text-decoration:underline}

.ent-encart-mairie{
  background:linear-gradient(135deg,#04361F,#0A6B3B);color:#fff;
  border-radius:14px;padding:22px 24px;font-size:.9rem;line-height:1.62;
}
.ent-encart-titre{margin:0 0 8px;font-weight:700;display:flex;align-items:center;gap:8px}
.ent-encart-mairie p{margin:0 0 12px;color:rgba(255,255,255,.86)}
.ent-encart-mairie .lien-fleche{color:var(--or-clair,#E4C558);font-weight:600;text-decoration:none}

/* Carte d'entreprise dans la liste */
.ent-vignette{
  display:flex;flex-direction:column;background:#fff;overflow:hidden;
  border:1px solid #E3EAE6;border-radius:13px;height:100%;text-decoration:none;color:inherit;
  transition:box-shadow .24s ease,transform .24s ease,border-color .24s ease;
}
.ent-vignette:hover{box-shadow:0 14px 38px rgba(16,40,30,.13);
  transform:translateY(-4px);border-color:#CFDDD5}
.ent-vignette-img{aspect-ratio:16/10;background:#EDF3EF;overflow:hidden;position:relative}
.ent-vignette-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.ent-vignette:hover .ent-vignette-img img{transform:scale(1.06)}
.ent-vignette-corps{padding:17px 19px;display:flex;flex-direction:column;gap:6px;flex:1}
.ent-vignette-cat{font-size:.71rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--vert,#006B3F)}
.ent-vignette h3{margin:0;font-size:1.06rem;line-height:1.3;color:#12241C}
.ent-vignette p{margin:0;font-size:.88rem;color:#6B7873;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ent-vedette{
  position:absolute;top:11px;left:11px;z-index:2;
  padding:4px 11px;border-radius:20px;background:rgba(4,54,31,.9);
  color:#E4C558;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ============================================================
   20. ÉVÉNEMENTS
   ============================================================ */
.evt-liste{display:grid;gap:14px}
.evt-carte{
  display:grid;grid-template-columns:88px minmax(0,1fr) 150px;gap:18px;align-items:center;
  background:#fff;border:1px solid #E3EAE6;border-radius:13px;
  padding:16px 20px;text-decoration:none;color:inherit;
  transition:box-shadow .24s ease,transform .24s ease,border-color .24s ease;
}
.evt-carte:hover{box-shadow:0 12px 32px rgba(16,40,30,.11);transform:translateY(-3px);
  border-color:#CFDDD5}
@media(max-width:760px){
  .evt-carte{grid-template-columns:70px minmax(0,1fr);padding:14px}
  .evt-vignette{display:none}
}
.evt-date{
  flex-shrink:0;text-align:center;padding:10px 6px;border-radius:11px;
  background:linear-gradient(135deg,#04361F,#0A6B3B);color:#fff;line-height:1.1;
}
.evt-jour{display:block;font-size:1.7rem;font-weight:800}
.evt-mois{display:block;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--or-clair,#E4C558);font-weight:700;margin-top:2px}
.evt-an{display:block;font-size:.68rem;color:rgba(255,255,255,.65);margin-top:1px}
.evt-corps{min-width:0}
.evt-cat{
  display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--vert,#006B3F);background:#EDF3EF;
  padding:3px 9px;border-radius:12px;margin-bottom:6px;
}
.evt-corps h3{margin:0 0 5px;font-size:1.08rem;line-height:1.3;color:#12241C}
.evt-lieu{margin:0 0 4px;font-size:.85rem;color:#6B7873;
  display:flex;align-items:center;gap:6px}
.evt-extrait{margin:0;font-size:.87rem;color:#6B7873;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evt-vignette{border-radius:9px;overflow:hidden;aspect-ratio:16/10;background:#EDF3EF}
.evt-vignette img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.evt-carte:hover .evt-vignette img{transform:scale(1.06)}
.evt-passes .evt-carte{opacity:.72}
.evt-passes .evt-carte:hover{opacity:1}
.evt-passes .evt-date{background:linear-gradient(135deg,#5B6661,#7A8580)}

/* ============================================================
   21. BLOCAGE DE CONNEXION — compte à rebours
   ------------------------------------------------------------
   Dire « réessayez dans quelques minutes » sans préciser combien
   pousse l'agent à réessayer au hasard, ce qui rallonge le
   blocage au lieu de l'écouler. Le chrono règle cela.
   ============================================================ */
.cx-blocage{
  display:flex;gap:14px;align-items:flex-start;
  background:#FFF6E5;border:1px solid #F0DCA8;
  border-left:4px solid #C9A227;border-radius:0 11px 11px 0;
  padding:16px 18px;margin-bottom:18px;
  animation:cxApparait .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes cxApparait{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cx-bloc-ic{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:rgba(201,162,39,.16);color:#8A6508;
  display:flex;align-items:center;justify-content:center;
}
.cx-bloc-txt{min-width:0;flex:1}
.cx-bloc-titre{margin:0 0 3px;font-weight:700;font-size:.96rem;color:#5C4708}
.cx-bloc-sous{margin:0 0 8px;font-size:.86rem;color:#6B4E06;line-height:1.5}
.cx-chrono{
  margin:0;font-size:2rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#8A6508;
}
.cx-chrono-fini{font-size:1.05rem;color:#0A6B3B}
.cx-bloc-note{margin:8px 0 0;font-size:.79rem;color:#8A7331}
.cx-blocage-fini{background:#E4F1E9;border-color:#A8D5BC;border-left-color:#0A6B3B}
.cx-blocage-fini .cx-bloc-ic{background:rgba(10,107,59,.14);color:#0A6B3B}
.cx-blocage-fini .cx-bloc-titre,
.cx-blocage-fini .cx-bloc-sous,
.cx-blocage-fini .cx-bloc-note{color:#075030}

.btn-attente{opacity:.5;cursor:not-allowed}

.flash.avertissement{
  background:#FFF6E5;border-left:4px solid #C9A227;color:#5C4708;
  padding:12px 16px;border-radius:0 9px 9px 0;margin-bottom:12px;font-size:.92rem;
}

@media(prefers-reduced-motion:reduce){
  .cx-blocage{animation:none}
}

/* ============================================================
   22. ÉVÉNEMENTS SUR LA PAGE D'ACCUEIL — lignes compactes
   ------------------------------------------------------------
   Trois vignettes pleine largeur repoussaient le mot du Maire
   hors de l'écran. Une ligne par événement suffit : la date
   accroche l'œil, le détail est sur la fiche.
   ============================================================ */
.section-evt-accueil{
  padding:40px 0;background:#F6F9F7;
  border-top:1px solid #E8EEEB;border-bottom:1px solid #E8EEEB;
}
.sec-tete-ligne{display:flex;justify-content:space-between;align-items:flex-end;
  gap:18px;flex-wrap:wrap;margin-bottom:18px}

.evt-mini-liste{
  display:grid;gap:8px;
  background:#fff;border:1px solid #E3EAE6;border-radius:13px;
  padding:8px;
}
.evt-mini{
  display:flex;align-items:center;gap:14px;
  padding:10px 12px;border-radius:9px;
  text-decoration:none;color:inherit;
  transition:background .2s ease,transform .2s ease;
}
.evt-mini:hover{background:#F2F7F4;transform:translateX(3px)}
.evt-mini-date{
  flex-shrink:0;width:48px;text-align:center;line-height:1;
  background:#EDF3EF;border-radius:9px;padding:7px 0;
}
.evt-mini-date b{display:block;font-size:1.15rem;font-weight:800;color:#12241C}
.evt-mini-date i{display:block;font-style:normal;font-size:.62rem;font-weight:700;
  letter-spacing:.05em;color:var(--vert,#006B3F);margin-top:2px}
.evt-mini-txt{flex:1;min-width:0}
.evt-mini-txt strong{
  display:block;font-size:.96rem;font-weight:600;color:#12241C;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.evt-mini-txt small{
  display:block;font-size:.79rem;color:#6B7873;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.evt-mini-une{
  flex-shrink:0;padding:3px 10px;border-radius:20px;
  background:rgba(201,162,39,.16);color:#8A6508;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}
.evt-mini-fleche{flex-shrink:0;color:#B4C2BA;font-size:1.3rem;line-height:1}
.evt-mini:hover .evt-mini-fleche{color:var(--vert,#006B3F)}
@media(max-width:560px){
  .evt-mini{gap:11px;padding:9px 8px}
  .evt-mini-date{width:42px}
  .evt-mini-une{display:none}
}

/* Encart location de stands */
.evt-stands{
  margin:30px 0;padding:26px 28px;border-radius:14px;
  background:linear-gradient(135deg,#FFFBF0,#FDF5DF);
  border:1px solid #F0DCA8;border-left:4px solid var(--or,#C9A227);
}
.evt-stands h2{margin-bottom:10px;color:#5C4708}
.evt-stands p{color:#6B4E06;line-height:1.7}
.evt-stands-tarif{font-size:1rem}
.galerie-edition{
  margin:26px 0 12px;font-size:.86rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:#6B7873;
  padding-bottom:7px;border-bottom:1px solid #E8EEEB;
}

/* ============================================================
   23. PROJETS COMMUNAUX — page publique
   ============================================================ */
.proj-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.proj-chiffres > div{text-align:center}
.proj-chiffres .v{display:block;font-size:1.9rem;font-weight:800;color:#12241C;line-height:1.1}
.proj-chiffres .l{display:block;font-size:.79rem;color:#6B7873;margin-top:3px}

.proj-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.proj-carte{
  background:#fff;border:1px solid #E3EAE6;border-radius:15px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .26s ease,transform .26s ease,border-color .26s ease;
}
.proj-carte:hover{box-shadow:0 16px 40px rgba(16,40,30,.13);transform:translateY(-4px);
  border-color:#CFDDD5}
.proj-img{position:relative;aspect-ratio:16/10;background:#EDF3EF;overflow:hidden}
.proj-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.proj-carte:hover .proj-img img{transform:scale(1.05)}
.proj-img-vide{position:absolute;inset:0;
  background:linear-gradient(135deg,#0A6B3B,#04361F)}
.proj-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 12px;border-radius:20px;font-size:.71rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  background:rgba(255,255,255,.95);box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.proj-en_cours{color:#8A6508}
.proj-acheve{color:#0A6B3B}
.proj-a_venir{color:#12406B}
.proj-nb-photos{
  position:absolute;bottom:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;background:rgba(4,54,31,.82);
  color:#fff;font-size:.72rem;font-weight:600;
}
.proj-corps{padding:20px 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.proj-corps h3{margin:0;font-size:1.12rem;line-height:1.32;color:#12241C}
.proj-desc{margin:0;font-size:.9rem;color:#5B6661;line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.proj-avancement{margin-top:auto;padding-top:4px}
.proj-av-tete{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.82rem;color:#6B7873;margin-bottom:5px}
.proj-av-tete strong{font-size:1rem}
.proj-av-barre{height:9px;border-radius:5px;background:#EDF2EF;overflow:hidden}
.proj-av-barre > span{display:block;height:100%;border-radius:5px;
  transition:width .9s cubic-bezier(.22,.61,.36,1)}

.proj-infos{margin:0;padding-top:12px;border-top:1px solid #F1F5F3;
  display:grid;gap:8px}
.proj-infos > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.proj-infos dt{margin:0;font-size:.79rem;color:#6B7873;
  display:inline-flex;align-items:center;gap:6px}
.proj-infos dd{margin:0;font-size:.87rem;font-weight:600;color:#12241C;text-align:right}

.proj-galerie summary{
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--vert,#006B3F);
  padding:8px 0;list-style:none;
}
.proj-galerie summary::-webkit-details-marker{display:none}
.proj-galerie summary::after{content:" ↓";font-weight:400}
.proj-galerie[open] summary::after{content:" ↑"}

/* Matrice de prospective : cases de saisie serrées mais lisibles */
.pros-matrice td input{border-radius:6px;border:1px solid #E3EAE6}
.pros-matrice td input:focus{border-color:var(--vert,#006B3F);
  box-shadow:0 0 0 2px rgba(10,107,59,.13);outline:0}

/* ============================================================
   24. RETOUR EN HAUT DE PAGE
   ------------------------------------------------------------
   Le bouton se place AU-DESSUS de la bulle de l'assistant, jamais
   à la même position : deux ronds superposés au même endroit,
   l'un masquant l'autre, c'est un défaut visible dès le premier
   défilement.

   Repères d'empilement dans le coin bas-droit :
     bulle assistant  bottom 22px · 60px de haut · z-index 900
     retour en haut   au-dessus d'elle           · z-index 890
   Sur mobile, la barre de navigation fixe occupe le bas de
   l'écran : les deux remontent d'autant.
   ============================================================ */
:root{
  --coin-bas:22px;        /* marge basse de la bulle assistant */
  --bulle-taille:60px;    /* diamètre de la bulle assistant */
  --barre-mobile:0px;     /* hauteur de la barre fixe, mobile seulement */
}
.haut-page{
  position:fixed;right:26px;z-index:890;
  bottom:calc(var(--coin-bas) + var(--bulle-taille) + 12px + var(--barre-mobile));
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--vert,#006B3F);
  border:1px solid #DCE5E0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(16,40,30,.18);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .26s ease,transform .26s ease,visibility .26s,
             background .2s ease,color .2s ease;
}
.haut-page.visible{opacity:1;visibility:visible;transform:none}
.haut-page:hover{background:var(--vert,#006B3F);color:#fff;border-color:var(--vert,#006B3F)}
.haut-page:active{transform:scale(.94)}

@media(max-width:900px){
  /* La barre de navigation du bas occupe environ 58 px,
     plus la zone sûre des téléphones à encoche. */
  :root{--barre-mobile:calc(58px + env(safe-area-inset-bottom, 0px))}
  .haut-page{right:16px;width:42px;height:42px}
}
@media print{.haut-page{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .haut-page{transition:opacity .01s,visibility .01s}
}

/* La bulle de l'assistant remonte elle aussi au-dessus de la barre
   fixe : sinon elle se retrouve derrière et devient inatteignable,
   ce qui donne l'impression qu'elle a disparu. */
@media(max-width:900px){
  #assistant-bulle{
    bottom:calc(var(--coin-bas) + var(--barre-mobile))!important;
    z-index:900;
  }
  #assistant-fenetre{
    bottom:calc(var(--coin-bas) + var(--bulle-taille) + 12px + var(--barre-mobile))!important;
    max-height:calc(100dvh - var(--barre-mobile) - 140px);
  }
}

/* ------------------------------------------------------------
   Barre de navigation fixe — stabilité au défilement
   Sur plusieurs navigateurs mobiles, un élément fixe accompagné
   d'animations d'apparition se met à vibrer pendant le défilement.
   La promotion en couche de composition règle le problème.
   ------------------------------------------------------------ */
.bottom-nav{
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  will-change:transform;
}

/* ============================================================
   25. CALENDRIER DES ÉVÉNEMENTS
   ============================================================ */
.cal-bloc{
  background:#fff;border:1px solid #E3EAE6;border-radius:15px;
  padding:22px 24px;margin-bottom:38px;
}
.cal-tete{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:18px}
.cal-tete h2{margin:0;font-size:1.2rem;min-width:190px;text-align:center}
.cal-nav{
  width:34px;height:34px;border-radius:50%;background:#EDF3EF;color:var(--vert,#006B3F);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:1.3rem;line-height:1;transition:background .2s ease;
}
.cal-nav:hover{background:var(--vert,#006B3F);color:#fff}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-jour-nom{
  text-align:center;font-size:.72rem;font-weight:700;color:#8A948F;
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;
}
.cal-vide{aspect-ratio:1}
.cal-case{
  aspect-ratio:1;border-radius:9px;background:#F8FBF9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:#5B6661;font-size:.9rem;
  border:1px solid transparent;transition:all .2s ease;
}
.cal-avec{
  background:#EDF3EF;color:#12241C;font-weight:700;
  border-color:#CFE0D5;
}
.cal-avec:hover{background:var(--vert,#006B3F);color:#fff;transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(16,40,30,.16)}
.cal-avec:hover .cal-pt{background:#fff}
.cal-auj{border-color:var(--or,#C9A227);border-width:2px}
.cal-num{line-height:1}
.cal-pts{display:flex;gap:3px}
.cal-pt{width:5px;height:5px;border-radius:50%;background:var(--vert,#006B3F)}
.cal-legende{
  list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid #EEF3F0;
  display:grid;gap:7px;
}
.cal-legende li{display:flex;gap:11px;align-items:baseline;font-size:.89rem}
.cal-legende b{
  min-width:26px;text-align:center;background:#EDF3EF;border-radius:6px;
  padding:2px 0;font-size:.8rem;color:var(--vert-fonce,#075030);flex-shrink:0;
}
.cal-legende a{color:#12241C;text-decoration:none}
.cal-legende a:hover{color:var(--vert,#006B3F);text-decoration:underline}
.cal-rien{margin:16px 0 0;padding-top:14px;border-top:1px solid #EEF3F0;
  color:#6B7873;font-size:.89rem;text-align:center}
@media(max-width:600px){
  .cal-bloc{padding:16px 14px}
  .cal-tete h2{font-size:1rem;min-width:140px}
  .cal-case{font-size:.8rem;border-radius:7px}
}

/* ============================================================
   26. PARTENAIRES — description repliable
   ------------------------------------------------------------
   Une description longue étirait la carte et cassait l'alignement
   de la grille. Le texte est replié au-delà de ~180 caractères.
   Réalisé avec <details> : pas de JavaScript, et l'ouverture reste
   accessible au clavier.
   ============================================================ */
.part-desc{font-size:.86rem;color:var(--gris,#5B6661);line-height:1.62;margin:0 0 10px}
.part-plus{margin-bottom:10px}
.part-plus summary{
  cursor:pointer;list-style:none;display:block;
}
.part-plus summary::-webkit-details-marker{display:none}
.part-lien{
  display:inline-block;margin-top:2px;font-size:.8rem;font-weight:600;
  color:var(--vert,#006B3F);
}
.part-lien::after{content:" ↓"}
.part-plus[open] .part-court{display:none}
.part-plus[open] .part-lien{display:none}
.part-plus .part-long{display:none}
.part-plus[open] .part-long{display:block;animation:partOuvre .28s ease}
@keyframes partOuvre{from{opacity:0}to{opacity:1}}
.part-plus:hover .part-lien{text-decoration:underline}

/* ============================================================
   27. TARIFS SUR LA FICHE D'UN SERVICE
   ============================================================ */
.tarif-liste{
  border:1px solid #E3EAE6;border-radius:12px;overflow:hidden;background:#fff;
  margin-bottom:12px;
}
.tarif-ligne{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:12px 18px;border-bottom:1px solid #F1F5F3;
}
.tarif-ligne:last-child{border-bottom:0}
.tarif-ligne:nth-child(even){background:#FAFCFB}
.tarif-lib{flex:1;min-width:0;font-size:.92rem;color:#12241C;line-height:1.5}
.tarif-lib small{display:block;font-size:.78rem;color:#6B7873;margin-top:2px}
.tarif-mt{text-align:right;white-space:nowrap;flex-shrink:0}
.tarif-mt strong{font-size:1.05rem;font-weight:700;color:var(--vert-fonce,#04361F)}
.tarif-mt span{font-size:.78rem;color:#6B7873;margin-left:3px}
.tarif-mt em{display:block;font-style:normal;font-size:.76rem;color:#6B7873;margin-top:2px}
.tarif-txt{font-size:.92rem!important;font-weight:600!important}
.tarif-note{font-size:.82rem;color:#6B7873;line-height:1.6;margin:0}
@media(max-width:520px){
  .tarif-ligne{flex-direction:column;gap:4px}
  .tarif-mt{text-align:left}
}

/* ============================================================
   28. AFFICHE — jauge de longueur du texte
   ------------------------------------------------------------
   Prévenir vaut mieux que corriger : l'agent voit pendant qu'il
   écrit si son texte tiendra sur l'affiche, plutôt que de le
   découvrir à l'aperçu.
   ============================================================ */
.cq-jauge{
  float:right;font-weight:400;font-size:.8rem;
  padding:1px 9px;border-radius:20px;
  background:#EDF2EF;color:#5B6661;
  transition:background .25s ease,color .25s ease;
}
.cq-jauge.cq-ok{background:#E4F1E9;color:#0A6B3B}
.cq-jauge.cq-attention{background:#FFF6E5;color:#8A6508}
.cq-jauge.cq-trop{background:#FDECEA;color:#8C1D18}
.cq-jauge-barre{
  height:5px;border-radius:3px;background:#EDF2EF;
  overflow:hidden;margin-top:6px;
}
.cq-jauge-barre > span{
  display:block;height:100%;border-radius:3px;width:0;
  background:#0A6B3B;transition:width .25s ease,background .25s ease;
}
.cq-jauge-barre > span.cq-attention{background:#C9A227}
.cq-jauge-barre > span.cq-trop{background:#B3261E}
.cq-jauge-note{
  display:block;margin-top:6px;font-size:.79rem;color:#6B7873;line-height:1.55;
}

/* ============================================================
   29. PASTILLE DE COMPTAGE DANS LE MENU
   ------------------------------------------------------------
   La classe était animée dans animations.css mais n'avait aucun
   style de base : elle s'affichait comme du texte ordinaire.
   ============================================================ */
.pastille{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 6px;margin-left:6px;
  border-radius:11px;background:var(--or,#C9A227);color:#3D2F03;
  font-size:.7rem;font-weight:700;line-height:1;flex-shrink:0;
}

/* ============================================================
   30. QR CODE DE VÉRIFICATION SUR LES DOCUMENTS
   ============================================================ */
.doc-qr{
  display:flex;gap:14px;align-items:center;
  margin-top:26px;padding-top:14px;
  border-top:1px solid #D6DEDA;
  page-break-inside:avoid;
}
.doc-qr-img{width:78px;height:78px;flex-shrink:0}
.doc-qr-txt{font-size:9pt;line-height:1.5;color:#333}
.doc-qr-titre{margin:0 0 2px;font-weight:700;font-size:9.5pt}
.doc-qr-lien{margin:0;font-family:monospace;font-size:8pt;color:#555;word-break:break-all}
.doc-qr-code{margin:2px 0 0;font-size:8.5pt;color:#555}
.doc-qr-code strong{font-family:monospace;letter-spacing:.06em}

/* ============================================================
   31. PARTAGE SUR LES RÉSEAUX
   ------------------------------------------------------------
   Un citoyen qui partage un avis officiel lui donne plus de
   portée que n'importe quelle publication de la Mairie.
   ============================================================ */
.partage{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:26px 0;padding:14px 18px;
  background:#F6F9F7;border:1px solid #E3EAE6;border-radius:12px;
}
.partage-lbl{font-size:.88rem;font-weight:600;color:#2A3831;margin-right:2px}
.partage-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:9px;border:1px solid #DCE5E0;
  background:#fff;color:#2A3831;text-decoration:none;
  font-size:.85rem;font-weight:600;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .16s ease;
}
.partage-btn:hover{background:#EDF3EF;border-color:#0A6B3B;color:#0A6B3B;transform:translateY(-1px)}
.partage-btn:active{transform:none}
.partage-wa:hover{background:#E6F6EC;border-color:#25A366;color:#1B7A4B}
.partage-fb:hover{background:#EAF1FB;border-color:#1877F2;color:#12508F}
.partage-copie.copie{background:#E4F1E9;border-color:#0A6B3B;color:#0A6B3B}
@media print{.partage{display:none!important}}

/* ============================================================
   32. PTA — FIL HIÉRARCHIQUE, TÂCHES ET FORMULES
   ------------------------------------------------------------
   Les agents jugeaient la lecture « trop brute » : une activité
   apparaissait sans son rattachement, et les taux sans leur
   mode de calcul.
   ============================================================ */
.pta-fil{
  margin:14px 0 0;padding:12px 14px;
  background:#F6F9F7;border-left:3px solid #0A6B3B;border-radius:0 9px 9px 0;
  display:grid;gap:7px;
}
.pta-fil > div{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:baseline}
.pta-fil dt{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:#075030;font-weight:700;
}
.pta-fil dd{margin:0;font-size:.86rem;color:#2A3831;line-height:1.5}
@media(max-width:620px){
  .pta-fil > div{grid-template-columns:1fr;gap:1px}
}

.indic-aide{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;margin-left:4px;border-radius:50%;
  background:#DCE5E0;color:#5B6661;font-size:.62rem;font-weight:700;
  cursor:help;vertical-align:middle;
}

.pta-formules{
  margin:0 0 18px;border:1px solid #E3EAE6;border-radius:11px;background:#fff;
}
.pta-formules summary{
  padding:12px 16px;cursor:pointer;font-weight:600;font-size:.9rem;
  color:var(--vert,#006B3F);list-style:none;
}
.pta-formules summary::-webkit-details-marker{display:none}
.pta-formules summary::after{content:" ▾";font-size:.8rem}
.pta-formules[open] summary::after{content:" ▴"}
.pta-formules dl{margin:0;padding:0 16px 6px;display:grid;gap:10px}
.pta-formules dl > div{display:grid;grid-template-columns:150px 1fr;gap:12px}
.pta-formules dt{font-size:.84rem;font-weight:700;color:#12241C}
.pta-formules dd{margin:0;font-size:.85rem;color:#5B6661;line-height:1.6}
.pta-formules-src{
  margin:0;padding:10px 16px 14px;font-size:.79rem;color:#8A948F;font-style:italic;
}
@media(max-width:620px){
  .pta-formules dl > div{grid-template-columns:1fr;gap:2px}
}

/* ---- Les tâches : c'est ici que se fait le taux ---- */
.taches-bloc{
  margin:0 0 18px;padding:15px 17px;
  border:1px solid #DCE9E1;border-radius:12px;background:#FAFCFB;
}
.taches-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.taches-tete h3{margin:0;font-size:.97rem;color:#12241C}
.taches-tep{font-size:1.25rem;font-weight:700;color:#0A6B3B}
.taches-jauge{
  height:9px;border-radius:5px;background:#E7EDEA;overflow:hidden;margin:9px 0 10px;
}
.taches-jauge > span{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#0A6B3B 0%,#3E9E6B 62%,#2C7FA8 100%);
  transition:width .35s ease;
}
.taches-note{margin:0 0 12px;font-size:.83rem;color:#5B6661;line-height:1.6}
.taches-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tache{
  display:flex;align-items:flex-start;gap:11px;
  padding:9px 12px;border:1px solid #E3EAE6;border-radius:9px;background:#fff;
}
.tache-ok{background:#F1F8F4;border-color:#BFDECB}
.tache-form{display:inline;flex-shrink:0}
.tache-case{
  width:23px;height:23px;flex-shrink:0;cursor:pointer;
  border:1.8px solid #B9C7C0;border-radius:6px;background:#fff;
  color:#fff;font-size:.85rem;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease,border-color .18s ease,transform .14s ease;
}
.tache-case:hover{border-color:#0A6B3B;transform:scale(1.06)}
.tache-ok .tache-case{background:#0A6B3B;border-color:#0A6B3B}
.tache-case-fixe{cursor:default}
.tache-case-fixe:hover{transform:none;border-color:#B9C7C0}
.tache-lib{flex:1;min-width:0;font-size:.89rem;color:#2A3831;line-height:1.5}
.tache-ok .tache-lib{color:#0A5030}
.tache-lib small{display:block;margin-top:2px;font-size:.75rem;color:#6B7873}
.tache-poids{
  flex-shrink:0;min-width:34px;text-align:right;
  font-size:.84rem;font-weight:700;color:#5B6661;font-variant-numeric:tabular-nums;
}
.tache-ok .tache-poids{color:#0A6B3B}

/* ============================================================
   33. PALETTE ÉTENDUE — SORTIR DU VERT UNIFORME
   ------------------------------------------------------------
   La DDLP a demandé de varier les couleurs : du vert partout
   finit par aplatir la lecture, et rien ne ressort plus.
   L'idée retenue est de garder le vert comme couleur d'identité,
   mais de faire glisser les surfaces étendues — barres, jauges,
   bandeaux — vers des teintes voisines : vert profond, vert
   clair, puis bleu-vert.

   Le dégradé va du vert de la commune vers le bleu : les deux
   sont assez proches pour rester harmonieux, assez distincts
   pour qu'on lise la progression sans regarder les chiffres.
   ============================================================ */
:root{
  --vert-profond:  #075030;
  --vert-moyen:    #0A6B3B;
  --vert-tendre:   #3E9E6B;
  --sarcelle:      #2C8C8C;
  --bleu-doux:     #2C7FA8;
  --bleu-profond:  #12406B;
  --ambre:         #C9A227;
  --terre:         #A6642B;

  /* Dégradés prêts à l'emploi */
  --deg-progression: linear-gradient(90deg,
                     var(--vert-profond) 0%,
                     var(--vert-moyen) 34%,
                     var(--vert-tendre) 66%,
                     var(--bleu-doux) 100%);
  --deg-chaud:       linear-gradient(90deg, #8A6508 0%, var(--ambre) 55%, #E0C765 100%);
  --deg-alerte:      linear-gradient(90deg, #8C1D18 0%, #C0463E 60%, #E08A83 100%);
  --deg-bandeau:     linear-gradient(135deg,
                     var(--vert-profond) 0%,
                     var(--vert-moyen) 45%,
                     var(--sarcelle) 100%);
}

/* Les barres de progression suivent le dégradé : la partie
   gauche est le vert de la commune, la droite tire vers le bleu.
   On lit l'avancement sans avoir à comparer au chiffre. */
.barre-prog > span,
.jauge > span,
.taches-jauge > span,
.pta-barre > span{
  background: var(--deg-progression) !important;
  background-size: 100% 100% !important;
}

/* Une barre presque vide ne doit pas montrer un dégradé écrasé :
   en dessous de 25 %, on garde le vert plein. */
.barre-prog > span[style*="width:0"],
.barre-prog > span[style*="width:1"],
.barre-prog > span[style*="width:2"]{
  background: var(--vert-moyen) !important;
}

/* Les indicateurs alternent les teintes plutôt que d'aligner
   six blocs verts identiques. La couleur ne porte pas de sens
   ici : elle sert à distinguer, pas à qualifier. */
.indics .indic:nth-child(6n+1){ border-left-color: var(--vert-moyen); }
.indics .indic:nth-child(6n+2){ border-left-color: var(--vert-tendre); }
.indics .indic:nth-child(6n+3){ border-left-color: var(--sarcelle); }
.indics .indic:nth-child(6n+4){ border-left-color: var(--bleu-doux); }
.indics .indic:nth-child(6n+5){ border-left-color: var(--bleu-profond); }
.indics .indic:nth-child(6n+6){ border-left-color: var(--vert-profond); }
/* Une couleur posée explicitement sur un indicateur — alerte,
   retard — l'emporte toujours sur cette alternance. */
.indics .indic[style*="border-left-color"]{ border-left-color: inherit; }

/* Bandeaux de section : dégradé oblique plutôt qu'aplat */
.bandeau-vert,
.page-tete{
  background: var(--deg-bandeau);
}

/* Les entêtes de tableau gardent un fond sobre, mais leur filet
   inférieur reprend le dégradé : un rappel discret. */
.tableau thead tr{
  border-bottom: 2px solid transparent;
  border-image: var(--deg-progression) 1;
}

/* Titres à filet : le trait suit le dégradé */
.titre-filet::after{
  background: var(--deg-progression) !important;
}

/* Boutons principaux : léger dégradé, pour un rendu moins plat */
.btn-primary{
  background: linear-gradient(135deg, var(--vert-moyen) 0%, var(--vert-profond) 100%);
}
.btn-primary:hover{
  background: linear-gradient(135deg, var(--vert-tendre) 0%, var(--vert-moyen) 100%);
}

/* Anneaux de progression circulaires, s'il y en a */
.anneau-prog{ stroke: url(#degProgression); }

@media print{
  .barre-prog > span, .jauge > span, .taches-jauge > span{
    background: #444 !important;
  }
  .page-tete, .bandeau-vert{ background: none !important; color: #000 !important; }
}

/* ============================================================
   34. AUTO-DÉCLARATION DE PRÉSENCE
   ------------------------------------------------------------
   Boutons larges : l'agent se déclare souvent depuis un
   téléphone, parfois debout, en arrivant. Une case à cocher de
   14 pixels ne convient pas à ce geste.
   ============================================================ */
.stat-choix{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;border:1.6px solid #E3EAE6;border-radius:11px;
  background:#fff;cursor:pointer;margin:0;
  transition:border-color .18s ease,background .18s ease,transform .14s ease;
}
.stat-choix:hover{border-color:#9FC4AF;transform:translateY(-1px)}
.stat-choix input{margin:0;flex-shrink:0}
.stat-choix:has(input:checked){
  border-color:var(--vert,#0A6B3B);background:#F3F9F5;
}
.stat-actif{border-color:var(--vert,#0A6B3B);background:#F3F9F5}
.stat-pastille{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;
  box-shadow:inset 0 0 0 2px currentColor;
}
.stat-lib{font-size:.92rem;color:#12241C;font-weight:500}
@media(max-width:520px){
  .stat-choix{padding:15px}
  .stat-lib{font-size:.95rem}
}

/* ============================================================
   35. POINT DE PRÉSENCE ET GÉOLOCALISATION
   ============================================================ */
.pt-badge{
  display:inline-block;padding:3px 9px;border-radius:20px;
  font-size:.72rem;font-weight:700;white-space:nowrap;
}
.pt-vide{color:#C0CBC5;font-size:1.1rem;font-weight:700}

.geo-etat{
  display:flex;align-items:center;gap:9px;
  padding:10px 13px;border-radius:9px;margin-bottom:14px;
  font-size:.86rem;line-height:1.45;
}
.geo-point{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:currentColor;
}
.geo-attente{background:#EDF2F8;color:#12406B}
.geo-attente .geo-point{animation:geoPulse 1.3s ease-in-out infinite}
.geo-ok{background:#E4F1E9;color:#0A6B3B}
.geo-refus{background:#FFF6E5;color:#8A6508}
@keyframes geoPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ============================================================
   36. SUIVI DES COLLECTEURS
   ------------------------------------------------------------
   Une fiche mensuelle, c'est 31 colonnes : la lecture doit
   tenir sur un écran sans faire défiler à l'infini, d'où les
   cellules compactes et la colonne de nom figée.
   ============================================================ */
.jours-bande{
  display:flex;gap:3px;flex-wrap:wrap;
}
.jour-case{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  border:1px solid #E3EAE6;background:#fff;color:#3A4842;
  font-size:.83rem;text-decoration:none;
  transition:border-color .15s ease,background .15s ease;
}
.jour-case:hover{border-color:#0A6B3B;background:#F3F9F5}
.jour-actif{background:var(--vert,#0A6B3B);border-color:var(--vert,#0A6B3B);color:#fff;font-weight:700}
.jour-weekend{background:#F6F9F7;color:#8A948F}
.jour-actif.jour-weekend{background:var(--vert,#0A6B3B);color:#fff}
.jour-pt{
  position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:#0A6B3B;
}
.jour-actif .jour-pt{background:#fff}

.tab-mois{font-size:.78rem}
.tab-mois th,.tab-mois td{padding:4px 3px;text-align:center}
.tab-mois td span{font-weight:600}
.c-ok{background:#E4F1E9;color:#0A6B3B}
.c-attente{background:#FFF6E5;color:#8A6508}
.c-vide{background:#FDECEA;color:#8C1D18;font-weight:700}
.c-abs{background:#F0F2F1;color:#B4BEB8}
.lg{display:inline-block;width:11px;height:11px;border-radius:3px;
    vertical-align:middle;margin:0 2px 0 8px}
.lg-ok{background:#E4F1E9;border:1px solid #0A6B3B}
.lg-attente{background:#FFF6E5;border:1px solid #C9A227}
.lg-vide{background:#FDECEA;border:1px solid #B3261E}
.lg-abs{background:#F0F2F1;border:1px solid #C0CBC5}

/* ============================================================
   SUIVI DES COLLECTEURS
   ------------------------------------------------------------
   À ajouter à la fin de public/assets/css/complements.css,
   ou à charger comme feuille séparée.

   Une fiche mensuelle, c'est 31 colonnes : la lecture doit
   tenir sur un écran sans défiler à l'infini, d'où les cellules
   compactes et la colonne de nom figée.
   ============================================================ */
.jours-bande{ display:flex; gap:3px; flex-wrap:wrap; }
.jour-case{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  border:1px solid #E3EAE6; background:#fff; color:#3A4842;
  font-size:.83rem; text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.jour-case:hover{ border-color:#0A6B3B; background:#F3F9F5; }
.jour-actif{ background:#0A6B3B; border-color:#0A6B3B; color:#fff; font-weight:700; }
.jour-weekend{ background:#F6F9F7; color:#8A948F; }
.jour-actif.jour-weekend{ background:#0A6B3B; color:#fff; }
.jour-pt{
  position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#0A6B3B;
}
.jour-actif .jour-pt{ background:#fff; }

.tab-mois{ font-size:.78rem; }
.tab-mois th, .tab-mois td{ padding:4px 3px; text-align:center; }
.tab-mois td span{ font-weight:600; }
.c-ok{ background:#E4F1E9; color:#0A6B3B; }
.c-attente{ background:#FFF6E5; color:#8A6508; }
.c-vide{ background:#FDECEA; color:#8C1D18; font-weight:700; }
.c-abs{ background:#F0F2F1; color:#B4BEB8; }
.lg{ display:inline-block; width:11px; height:11px; border-radius:3px;
     vertical-align:middle; margin:0 2px 0 8px; }
.lg-ok{ background:#E4F1E9; border:1px solid #0A6B3B; }
.lg-attente{ background:#FFF6E5; border:1px solid #C9A227; }
.lg-vide{ background:#FDECEA; border:1px solid #B3261E; }
.lg-abs{ background:#F0F2F1; border:1px solid #C0CBC5; }