/* ============================================================
   MAIRIE DE NATITINGOU — Couche d'animations
   ------------------------------------------------------------
   Se charge APRÈS site.css / app.css.

   IMPORTANT : ce fichier ne redéfinit PAS le système de
   révélation existant (.reveal → .vu, piloté par le script déjà
   présent dans views/public/partials/bas.php). Il s'y greffe et
   ajoute uniquement :
     · des variantes de révélation (côté, zoom, cascade)
     · le filet tricolore qui se trace sous les titres
     · les micro-interactions de survol
     · l'alignement des icônes de menu
     · quelques finitions du back-office

   Retirer ce fichier remet l'interface dans son état actuel.
   Registre : institutionnel. Pas de rebond, pas d'élastique.
   ============================================================ */

:root{
  --anim-court:.28s;
  --anim-moyen:.48s;
  --anim-long:.9s;
  --anim-courbe:cubic-bezier(.22,.61,.36,1);   /* décélération douce */
}

/* ============================================================
   0. ACCESSIBILITÉ — priorité absolue
   Tout est neutralisé si l'usager a demandé moins d'animations
   (réglage système Windows / Android / iOS).
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js-anim .reveal{opacity:1 !important;transform:none !important}
  .titre-filet::after{width:84px !important}
}

/* ============================================================
   1. VARIANTES DE RÉVÉLATION
   La classe .reveal et le passage à .vu restent gérés par le
   script existant. On n'ajoute que des directions.
   Spécificité volontairement supérieure à celle de site.css.
   ============================================================ */
.js-anim .reveal.depuis-gauche{transform:translateX(-24px)}
.js-anim .reveal.depuis-droite{transform:translateX(24px)}
.js-anim .reveal.zoom{transform:scale(.965)}
.js-anim .reveal.vu.depuis-gauche,
.js-anim .reveal.vu.depuis-droite,
.js-anim .reveal.vu.zoom{transform:none}

/* Cascade : le rang est posé par animations.js sur les enfants
   directs d'un conteneur .cascade. Les éléments arrivent l'un
   après l'autre plutôt que tous ensemble. */
.js-anim .cascade > .reveal{transition-delay:calc(var(--rang,0) * 70ms)}

/* ============================================================
   2. SIGNATURE — le filet tricolore qui se trace
   Reprend le liseré vert / jaune / rouge des documents officiels
   de la République. C'est le seul effet réellement remarquable
   de la page : tout le reste doit rester discret.

   Repli : sans JavaScript, le filet est affiché d'emblée.
   ============================================================ */
.titre-filet{position:relative;padding-bottom:14px}
.titre-filet::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:84px;border-radius:2px;
  background:linear-gradient(90deg,
    var(--vert,#006B3F) 0 34%,
    var(--jaune-bj,#FCD116) 34% 67%,
    var(--rouge-bj,#E8112D) 67%);
  transition:width var(--anim-long) var(--anim-courbe);
}
.js-filet .titre-filet::after{width:0}
.js-filet .titre-filet.vu::after{width:84px}
.titre-filet.centre{text-align:center}
.titre-filet.centre::after{left:50%;transform:translateX(-50%)}

/* ============================================================
   3. ENTRÉE DE PAGE
   Une séquence courte, au chargement, sur l'en-tête de page.
   ============================================================ */
@keyframes entree-douce{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.js-anim .entree-page  {animation:entree-douce var(--anim-moyen) var(--anim-courbe) both}
.js-anim .entree-page-2{animation:entree-douce var(--anim-moyen) var(--anim-courbe) both;animation-delay:.09s}
.js-anim .entree-page-3{animation:entree-douce var(--anim-moyen) var(--anim-courbe) both;animation-delay:.18s}

/* ============================================================
   4. MICRO-INTERACTIONS
   ============================================================ */

/* Cartes génériques : levée courte, jamais d'agrandissement */
.carte-anim{transition:transform var(--anim-court) var(--anim-courbe),
                       box-shadow var(--anim-court) var(--anim-courbe),
                       border-color var(--anim-court) ease}
.carte-anim:hover{transform:translateY(-4px);box-shadow:var(--ombre-md,0 10px 34px rgba(16,40,30,.12))}

/* Cartes déjà présentes dans les pages publiques */
.actu-carte,.proj-carte,.opp-carte,.evt-carte,.acces-carte{
  transition:transform var(--anim-court) var(--anim-courbe),
             box-shadow var(--anim-court) var(--anim-courbe),
             border-color var(--anim-court) ease;
}
.actu-carte:hover,.proj-carte:hover,.opp-carte:hover,
.evt-carte:hover,.acces-carte:hover{
  transform:translateY(-4px);
  box-shadow:var(--ombre-md,0 10px 34px rgba(16,40,30,.12));
}

/* Boutons : appui perceptible, sans rebond */
.btn,.btn-or,.btn-vert,.btn-bordeaux,.btn-primary{
  transition:transform var(--anim-court) var(--anim-courbe),
             box-shadow var(--anim-court) var(--anim-courbe),
             background-color var(--anim-court) ease;
}
.btn:active,.btn-or:active,.btn-vert:active,.btn-bordeaux:active{transform:translateY(1px)}

/* Liens « en savoir plus » : la flèche avance au survol */
.lien-fleche,.lien-plus{transition:color var(--anim-court) ease}
.lien-fleche::after,.lien-plus::after{
  display:inline-block;transition:transform var(--anim-court) var(--anim-courbe)}
.lien-fleche:hover::after,.lien-plus:hover::after{transform:translateX(4px)}

/* Images d'illustration : rapprochement lent au survol */
.media-zoom{overflow:hidden}
.media-zoom img{transition:transform var(--anim-long) var(--anim-courbe)}
.media-zoom:hover img{transform:scale(1.045)}

/* Icônes du menu public */
.menu-pub a .ic,.menu-bouton .ic{
  transition:transform var(--anim-court) var(--anim-courbe),opacity var(--anim-court) ease;
  opacity:.68;
}
.menu-pub a:hover .ic,.menu-pub a.actif .ic,
.menu-bouton:hover .ic,.menu-bouton.actif .ic{opacity:1;transform:translateY(-1px)}

/* Réseaux sociaux : simple levée (la teinte or est déjà en CSS) */
.reseau-lien{transition:background-color var(--anim-court) ease,
                        color var(--anim-court) ease,
                        transform var(--anim-court) var(--anim-courbe)}
.reseau-lien:hover{transform:translateY(-3px)}
.reseau-lien svg{display:block}

/* ============================================================
   5. ALIGNEMENT DES ICÔNES DE MENU
   Les liens du menu public étaient de simples éléments en ligne :
   il faut passer en flex pour que l'icône et le libellé partagent
   la même ligne de base.
   ============================================================ */
.menu-pub > a{display:inline-flex;align-items:center;gap:7px}
.menu-pub > a .ic,.menu-bouton .ic{flex-shrink:0}
.menu-bouton{gap:7px}

@media(max-width:980px){
  .menu-pub > a{justify-content:flex-start}
  .menu-bouton{width:100%;justify-content:flex-start}
}

/* Back-office : l'icône SVG remplace un emoji de 18 px */
.nav a .ic{width:18px;height:18px;opacity:.85;flex-shrink:0}
.cloche .ic{display:block}
.sidebar .compte a{display:inline-flex;align-items:center;gap:7px}

/* ============================================================
   6. COMPTEURS DE CHIFFRES CLÉS
   Le décompte est fait en JS ; ici on stabilise la typographie
   pour que la ligne ne « saute » pas pendant l'animation.
   ============================================================ */
.compteur{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ============================================================
   7. EN-TÊTE AU DÉFILEMENT
   .defile est déjà géré par le script existant ; on ajoute
   seulement la réduction de hauteur et la jauge de lecture.
   ============================================================ */
.site-nav{transition:min-height var(--anim-court) var(--anim-courbe)}
.site-tete.compact .site-nav{min-height:64px}

.jauge-lecture{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--vert,#006B3F),var(--or,#C9A227));
  transition:width .1s linear;pointer-events:none;
}

/* ============================================================
   8. BACK-OFFICE
   Plus sobre encore : c'est un outil de travail quotidien.
   ============================================================ */
.nav a{transition:background-color var(--anim-court) ease,
                  color var(--anim-court) ease,
                  padding-left var(--anim-court) var(--anim-courbe)}
.nav a:hover{padding-left:17px}

.carte,.tuile,.stat{transition:box-shadow var(--anim-court) ease,
                               transform var(--anim-court) var(--anim-courbe)}
.carte:hover,.tuile:hover{box-shadow:0 8px 26px rgba(16,40,30,.10)}

/* Messages flash : arrivée par le haut */
@keyframes flash-entree{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}
.flash{animation:flash-entree var(--anim-court) var(--anim-courbe) both}

/* Pastilles de notification : trois respirations puis repos */
@keyframes pastille-respire{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.14)}
}
.pastille,.cloche-pastille{animation:pastille-respire 2s var(--anim-courbe) 3}

/* Lignes de tableau : surlignage au survol */
.tableau tbody tr,table tbody tr{transition:background-color var(--anim-court) ease}

/* Squelette de chargement */
@keyframes squelette{
  0%{background-position:-320px 0}
  100%{background-position:320px 0}
}
.squelette{
  background:linear-gradient(90deg,#eef2f0 25%,#f7faf9 50%,#eef2f0 75%);
  background-size:640px 100%;
  animation:squelette 1.3s linear infinite;
  border-radius:6px;color:transparent;
}

/* ============================================================
   9. IMPRESSION — aucune animation sur les documents officiels
   ============================================================ */
@media print{
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  .titre-filet::after{width:84px !important}
  .jauge-lecture{display:none}
}

/* ============================================================
   10. PORTRAITS DES CONSEILLERS
   La photo téléversée par l'agent de publication remplace
   l'initiale ; le cadrage reste circulaire et centré sur le
   visage quelle que soit la proportion du fichier d'origine.
   ============================================================ */
.cons-avatar-photo{background:var(--vert-pale,#eef5f0);padding:0;overflow:hidden}
.cons-avatar-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.cons-arr .ic,.cons-detail .ic{vertical-align:-2px;opacity:.7}