/* ════════════════════════════════════════════════════════════════════
   PNVB · DMGV -- Thème « Élan »  (v3.0)
   Système de design unique, 100 % local (aucun CDN).
   Chargé EN DERNIER dans chaque page : il harmonise les styles propres
   à chaque module (Bootstrap, Tailwind, CSS inline) sur la charte du logo.

   Couleurs tirées du logo PNVB :
     vert  #0E7131  (silhouette du Burkina)
     or    #FFBC04  (bandeau « PNVB »)
     rouge #D4140B  (personnage en élan)
     terre #A50F08  (texte du bandeau)
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────────────── */
html:root {
  --pv-vert:      #0E7131;
  --pv-vert-600:  #0C6329;
  --pv-vert-700:  #0A5626;
  --pv-vert-900:  #06321A;
  --pv-vert-100:  #DCEEDF;
  --pv-vert-50:   #EEF6EF;

  --pv-or:        #FFBC04;
  --pv-or-600:    #D99A00;
  --pv-or-800:    #7A5600;
  --pv-or-50:     #FFF6D9;

  --pv-rouge:     #D4140B;
  --pv-rouge-700: #A50F08;
  --pv-rouge-50:  #FDECEA;

  --pv-terre:     #A50F08;
  --pv-terre-50:  #FDECEA;

  --pv-bleu:      #0A5626;
  --pv-bleu-50:   #EEF6EF;

  --pv-encre:     #15211A;
  --pv-encre-2:   #34443B;
  --pv-muet:      #5E6B63;
  --pv-muet-2:    #8C9890;
  --pv-ligne:     #E1E7E2;
  --pv-ligne-2:   #CFD8D1;
  --pv-fond:      #F4F6F3;
  --pv-surface:   #FFFFFF;

  --pv-r-sm: 6px;
  --pv-r:    8px;
  --pv-r-lg: 12px;
  --pv-ombre-1: 0 1px 2px rgba(16, 40, 24, .06);
  --pv-ombre-2: 0 6px 18px -6px rgba(16, 40, 24, .18);
  --pv-ombre-3: 0 22px 48px -16px rgba(6, 50, 26, .35);
  --pv-focus: 0 0 0 3px rgba(255, 188, 4, .45);
  --pv-police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ── Ré-alignement des variables historiques des modules ── */
  --g: var(--pv-vert);           --gd: var(--pv-vert-700);     --gdk: var(--pv-vert-900);
  --gold: var(--pv-or);          --red: var(--pv-rouge);
  --font: var(--pv-police);      --app-font: var(--pv-police); --titre-font: var(--pv-police);
  --pnvb-green: var(--pv-vert);  --pnvb-dark-green: var(--pv-vert-700);
  --pnvb-xdark-green: var(--pv-vert-900); --pnvb-xdark: var(--pv-vert-900);
  --pnvb-light-green: var(--pv-vert-50);  --pnvb-dark: var(--pv-vert-900);
  --pnvb-gold: var(--pv-or);     --pnvb-dark-gold: var(--pv-or-600);
  --pnvb-red: var(--pv-rouge);   --pnvb-dark-red: var(--pv-rouge-700);
  --pnvb-light-red: var(--pv-rouge-50);
  --pnvb-amber: var(--pv-or-600); --pnvb-blue: var(--pv-bleu); --pnvb-indigo: var(--pv-terre);
  --green: var(--pv-vert);       --green-dark: var(--pv-vert-700); --green-light: var(--pv-vert-50);
  --green-dk: var(--pv-vert-700);--green-xdk: var(--pv-vert-900);  --green-lt: var(--pv-vert-50);
  --gold-dk: var(--pv-or-600);   --red-dk: var(--pv-rouge-700);
  --vert: var(--pv-vert);        --vert-dark: var(--pv-vert-700);  --vert-light: var(--pv-vert-50);
  --jaune: var(--pv-or);         --jaune-dark: var(--pv-or-600);   --jaune-light: var(--pv-or-50);
  --rouge: var(--pv-rouge);      --rouge-dark: var(--pv-rouge-700);--rouge-light: var(--pv-rouge-50);
  --bg-page: var(--pv-fond);     --bg-card: var(--pv-surface);
  --border: var(--pv-ligne);     --border-light: var(--pv-ligne);  --gris-border: var(--pv-ligne);
  --text-dark: var(--pv-encre);  --text-mid: var(--pv-muet);       --text: var(--pv-encre);
  --text-primary: var(--pv-encre); --text-secondary: var(--pv-muet); --text-muted: var(--pv-muet-2);
  --text-light: var(--pv-muet);
  --primary: var(--pv-vert);     --primary-dark: var(--pv-vert-700);
  --success: var(--pv-vert);     --danger: var(--pv-rouge);        --warning: var(--pv-or-600);
  --radius: var(--pv-r-lg);      --radius-sm: var(--pv-r);
  --sh: var(--pv-ombre-1);       --shh: var(--pv-ombre-2);
  --shadow-sm: var(--pv-ombre-1); --shadow-md: var(--pv-ombre-2);
  --shadow-lg: var(--pv-ombre-3); --shadow-hover: var(--pv-ombre-2);

  /* Bootstrap 5 */
  --bs-primary: #0E7131;  --bs-primary-rgb: 14,113,49;
  --bs-success: #0E7131;  --bs-success-rgb: 14,113,49;
  --bs-danger:  #D4140B;  --bs-danger-rgb: 212,20,11;
  --bs-warning: #FFBC04;  --bs-warning-rgb: 255,188,4;
  --bs-info:    #0A5626;  --bs-info-rgb: 31,99,168;
  --bs-body-font-family: var(--pv-police);
  --bs-body-font-size: .93rem;
  --bs-body-color: var(--pv-encre);
  --bs-body-bg: var(--pv-fond);
  --bs-border-color: var(--pv-ligne);
  --bs-link-color: var(--pv-vert-600);   --bs-link-color-rgb: 12,99,41;
  --bs-link-hover-color: var(--pv-vert-900);
  --bs-border-radius: var(--pv-r);  --bs-border-radius-lg: var(--pv-r-lg);
  --bs-border-radius-sm: var(--pv-r-sm);
}

/* ── 2. Base & typographie (taille réduite) ────────────────────────── */
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--pv-police) !important;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--pv-encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body:not(.login-page) { background-color: var(--pv-fond); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .chiffre {
  font-family: var(--pv-police) !important;
  color: inherit;
  letter-spacing: -.015em;
}
h1, .h1 { font-size: 1.45rem; font-weight: 700; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; }
h3, .h3 { font-size: 1.1rem;  font-weight: 650; }
h4, .h4 { font-size: 1rem;    font-weight: 650; }
h5, .h5 { font-size: .95rem;  font-weight: 650; }
h6, .h6 { font-size: .88rem;  font-weight: 650; }
small, .small { font-size: .85em; }
b, strong { font-weight: 650; }

button, input, select, textarea, optgroup { font-family: inherit; }
a { color: var(--pv-vert-600); text-underline-offset: 2px; }
a:hover { color: var(--pv-vert-900); }
::selection { background: rgba(255, 188, 4, .45); color: var(--pv-encre); }

/* chiffres alignés dans les tableaux et indicateurs */
table, .stat-value, .stat-number, .kpi-value, .chiffre, .badge, [class*="count"] {
  font-variant-numeric: tabular-nums;
}

/* focus clavier visible, couleur or */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pv-or-600);
  outline-offset: 2px;
}

/* barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: #B9C6BC transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #C3CFC6; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #9DAEA2; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── 3. Couleur du MENU (en-tête + tiroir) -- couleurs unies, sans dégradé ──
   Trois thèmes prêts : VERT (actif), ROUGE, JAUNE.
   Pour changer : commentez le bloc actif et décommentez celui voulu.     */

/* ▶ THÈME VERT (actif) */
html:root {
  --pv-menu-bg:        #0E7131;   /* fond du menu            */
  --pv-menu-bg-hover:  #0A5626;   /* survol / élément ouvert */
  --pv-menu-fg:        #FFFFFF;   /* texte                   */
  --pv-menu-icon:      #FFBC04;   /* icônes                  */
  --pv-menu-mark:      #FFBC04;   /* trait sous l'onglet actif */
  --pv-menu-btn:       #0A5626;   /* boutons ronds (cloche…) */
  --pv-menu-btn-line:  #0A5626;
  --pv-menu-avatar:    #FFBC04;   --pv-menu-avatar-fg: #06321A;
  --pv-menu-badge:     #D4140B;   --pv-menu-badge-fg:  #FFFFFF;
}

/* ▶ THÈME ROUGE
html:root {
  --pv-menu-bg:        #D4140B;
  --pv-menu-bg-hover:  #A50F08;
  --pv-menu-fg:        #FFFFFF;
  --pv-menu-icon:      #FFBC04;
  --pv-menu-mark:      #FFBC04;
  --pv-menu-btn:       #A50F08;
  --pv-menu-btn-line:  #A50F08;
  --pv-menu-avatar:    #FFBC04;   --pv-menu-avatar-fg: #A50F08;
  --pv-menu-badge:     #FFBC04;   --pv-menu-badge-fg:  #15211A;
}
*/

/* ▶ THÈME JAUNE
html:root {
  --pv-menu-bg:        #FFBC04;
  --pv-menu-bg-hover:  #E8A600;
  --pv-menu-fg:        #06321A;
  --pv-menu-icon:      #0E7131;
  --pv-menu-mark:      #D4140B;
  --pv-menu-btn:       #E8A600;
  --pv-menu-btn-line:  #E8A600;
  --pv-menu-avatar:    #0E7131;   --pv-menu-avatar-fg: #FFFFFF;
  --pv-menu-badge:     #D4140B;   --pv-menu-badge-fg:  #FFFFFF;
}
*/

/* Écharpe tricolore en aplats (vert | jaune | rouge), sous le menu.
   Construite sans dégradé : bordure jaune + deux blocs unis. */
.app-header { position: relative; border-bottom: 3px solid #FFBC04 !important; }
.app-header::before, .app-header::after {
  content: ""; position: absolute; bottom: -3px; height: 3px;
  pointer-events: none; z-index: 2;
}
.app-header::before { left: 0;  width: 58%; background: #0E7131; }
.app-header::after  { right: 0; width: 18%; background: #D4140B; }

/* ── 4. Menu des tableaux de bord (dashboard*.php) ─────────────────── */
.app-header {
  background: var(--pv-menu-bg) !important;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.45) !important;
  height: 58px !important;
  color: var(--pv-menu-fg);
}
.app-header .logo-img {
  width: 38px !important; height: 38px !important;
  background: #fff !important;
  border-radius: 9px !important;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}
.app-header .logo-label-main { color: var(--pv-menu-fg) !important; font-size: .98rem !important; font-weight: 700 !important; }
.app-header .logo-label-sub  { color: var(--pv-menu-fg) !important; opacity: .7; }
.app-header .nav-link-custom {
  color: var(--pv-menu-fg) !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  padding: .45rem .85rem !important;
  position: relative;
}
.app-header .nav-link-custom .icon { color: var(--pv-menu-icon) !important; }
.app-header .nav-link-custom:hover,
.app-header .nav-link-custom.active {
  background: var(--pv-menu-bg-hover) !important;
  color: var(--pv-menu-fg) !important;
}
.app-header .nav-link-custom.active::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: -10px;
  height: 3px; background: var(--pv-menu-mark); border-radius: 2px;
}
.app-header .mobile-toggle,
.app-header .hamburger,
.app-header .header-icon-btn,
.app-header .notif-btn,
.app-header .bell-btn {
  background: var(--pv-menu-btn) !important;
  border: 1px solid var(--pv-menu-btn-line) !important;
  color: var(--pv-menu-fg) !important;
}
.app-header .mobile-toggle:hover,
.app-header .header-icon-btn:hover,
.app-header .header-icon-btn.enabled {
  background: var(--pv-menu-bg-hover) !important;
  border-color: var(--pv-menu-bg-hover) !important;
  color: var(--pv-menu-fg) !important;
}
.app-header .header-avatar, .app-header .avatar, .app-header .user-avatar {
  background: var(--pv-menu-avatar) !important;
  color: var(--pv-menu-avatar-fg) !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.app-header .notify-count {
  background: var(--pv-menu-badge) !important;
  color: var(--pv-menu-badge-fg) !important;
  border: 2px solid var(--pv-menu-bg) !important;
}

/* Menus déroulants de l'en-tête */
.dropdown-menu-custom, .submenu-panel, .dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--pv-ligne) !important;
  border-radius: 10px !important;
  box-shadow: var(--pv-ombre-3) !important;
  padding: .35rem !important;
  backdrop-filter: none !important;
}
.dropdown-item-custom, .dropdown-item {
  border-radius: 6px !important;
  font-size: .86rem !important;
  color: var(--pv-encre-2) !important;
  padding: .48rem .75rem !important;
}
.dropdown-item-custom:hover, .dropdown-item:hover, .dropdown-item:focus {
  background: var(--pv-vert-50) !important;
  color: var(--pv-vert-700) !important;
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--pv-vert) !important; color: #fff !important;
}

/* Tiroir latéral : correction de l'ombre visible quand il est fermé */
#mobileDrawer { height: 100vh; height: 100dvh; box-shadow: none !important; visibility: hidden;
  transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s !important; }
#mobileDrawer.open { visibility: visible; box-shadow: var(--pv-ombre-3) !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s !important; }
#mobileDrawer .drawer-header {
  background: var(--pv-menu-bg) !important;
  color: var(--pv-menu-fg) !important;
  position: relative;
  border-bottom: 3px solid #FFBC04 !important;
}
#mobileDrawer .drawer-header .drawer-logo-text .main,
#mobileDrawer .drawer-header .drawer-logo-text .sub { color: var(--pv-menu-fg) !important; }
#mobileDrawer .drawer-header::before, #mobileDrawer .drawer-header::after {
  content: ""; position: absolute; bottom: -3px; height: 3px; pointer-events: none;
}
#mobileDrawer .drawer-header::before { left: 0;  width: 58%; background: #0E7131; }
#mobileDrawer .drawer-header::after  { right: 0; width: 18%; background: #D4140B; }
#mobileDrawer .drawer-close { background: var(--pv-menu-bg-hover) !important; color: var(--pv-menu-fg) !important; border: 0 !important; }
#drawerBackdrop { background: rgba(21, 33, 26, .5) !important; }

/* Zone de contenu (iframe) */
.content-frame { background: var(--pv-fond) !important; }

/* ── 5. Cartes & surfaces ──────────────────────────────────────────── */
.card, .stat-card, .kpi-card, .info-card, .panel, .box, .section-card, .content-card,
.chart-card, .table-card, .filter-card, .form-card, .summary-card {
  border-radius: var(--pv-r-lg) !important;
  border-color: var(--pv-ligne) !important;
}
.card {
  border: 1px solid var(--pv-ligne) !important;
  box-shadow: var(--pv-ombre-1) !important;
  background: var(--pv-surface);
}
.card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--pv-ligne) !important;
  font-weight: 650;
  font-size: .92rem;
  color: var(--pv-encre);
}
.card-header.bg-success, .card-header.bg-primary, .card-header.bg-dark {
  background: var(--pv-vert-900) !important; color: #fff !important;
}
.card-footer { background: #FAFBF9 !important; border-top: 1px solid var(--pv-ligne) !important; }

/* ── 6. Boutons ─────────────────────────────────────────────────────── */
.btn {
  --bs-btn-font-size: .86rem;
  --bs-btn-padding-y: .42rem;
  --bs-btn-padding-x: .85rem;
  --bs-btn-border-radius: 7px;
  --bs-btn-font-weight: 600;
  font-size: .86rem;
  font-weight: 600;
  border-radius: 7px;
  letter-spacing: 0;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-sm { --bs-btn-font-size: .78rem; --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .6rem; font-size: .78rem; border-radius: 6px; }
.btn-lg { --bs-btn-font-size: .95rem; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.2rem; font-size: .95rem; }
.btn:focus-visible, .btn:focus { box-shadow: var(--pv-focus) !important; }

.btn-primary, .btn-success {
  --bs-btn-bg: var(--pv-vert); --bs-btn-border-color: var(--pv-vert);
  --bs-btn-hover-bg: var(--pv-vert-700); --bs-btn-hover-border-color: var(--pv-vert-700);
  --bs-btn-active-bg: var(--pv-vert-900); --bs-btn-active-border-color: var(--pv-vert-900);
  --bs-btn-disabled-bg: var(--pv-vert); --bs-btn-disabled-border-color: var(--pv-vert);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--pv-rouge); --bs-btn-border-color: var(--pv-rouge);
  --bs-btn-hover-bg: var(--pv-rouge-700); --bs-btn-hover-border-color: var(--pv-rouge-700);
  --bs-btn-active-bg: var(--pv-rouge-700);
}
.btn-warning {
  --bs-btn-bg: var(--pv-or); --bs-btn-border-color: var(--pv-or); --bs-btn-color: var(--pv-encre);
  --bs-btn-hover-bg: var(--pv-or-600); --bs-btn-hover-border-color: var(--pv-or-600); --bs-btn-hover-color: var(--pv-encre);
}
.btn-info {
  --bs-btn-bg: var(--pv-bleu); --bs-btn-border-color: var(--pv-bleu); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #06321A; --bs-btn-hover-border-color: #06321A; --bs-btn-hover-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: #fff; --bs-btn-border-color: var(--pv-ligne-2); --bs-btn-color: var(--pv-encre-2);
  --bs-btn-hover-bg: var(--pv-fond); --bs-btn-hover-border-color: var(--pv-muet-2); --bs-btn-hover-color: var(--pv-encre);
  --bs-btn-active-bg: var(--pv-vert-50); --bs-btn-active-color: var(--pv-encre);
}
.btn-light {
  --bs-btn-bg: #fff; --bs-btn-border-color: var(--pv-ligne); --bs-btn-color: var(--pv-encre-2);
  --bs-btn-hover-bg: var(--pv-fond); --bs-btn-hover-border-color: var(--pv-ligne-2);
}
.btn-dark {
  --bs-btn-bg: var(--pv-vert-900); --bs-btn-border-color: var(--pv-vert-900);
  --bs-btn-hover-bg: #041F10; --bs-btn-hover-border-color: #041F10;
}
.btn-outline-primary, .btn-outline-success {
  --bs-btn-color: var(--pv-vert-600); --bs-btn-border-color: #9CCAA7;
  --bs-btn-hover-bg: var(--pv-vert); --bs-btn-hover-border-color: var(--pv-vert); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--pv-vert-700); --bs-btn-active-border-color: var(--pv-vert-700);
}
.btn-outline-danger {
  --bs-btn-color: var(--pv-rouge); --bs-btn-border-color: #F0B1AD;
  --bs-btn-hover-bg: var(--pv-rouge); --bs-btn-hover-border-color: var(--pv-rouge);
}
.btn-outline-warning {
  --bs-btn-color: var(--pv-or-800); --bs-btn-border-color: #F3D27A;
  --bs-btn-hover-bg: var(--pv-or); --bs-btn-hover-border-color: var(--pv-or); --bs-btn-hover-color: var(--pv-encre);
}
.btn-outline-secondary, .btn-outline-dark {
  --bs-btn-color: var(--pv-encre-2); --bs-btn-border-color: var(--pv-ligne-2);
  --bs-btn-hover-bg: var(--pv-fond); --bs-btn-hover-color: var(--pv-encre); --bs-btn-hover-border-color: var(--pv-muet-2);
}
.btn-outline-info {
  --bs-btn-color: var(--pv-bleu); --bs-btn-border-color: #A9C6E4;
  --bs-btn-hover-bg: var(--pv-bleu); --bs-btn-hover-border-color: var(--pv-bleu);
}
.btn-link { --bs-btn-color: var(--pv-vert-600); --bs-btn-hover-color: var(--pv-vert-900); }

/* Le Bootstrap local est le thème Bootswatch « Cerulean » : on neutralise
   ses dégradés (boutons verts citron, barres de navigation bleues). */
.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning,
.btn-danger, .btn-light, .btn-dark,
.navbar.bg-primary, .navbar.bg-secondary, .navbar.bg-success, .navbar.bg-info,
.navbar.bg-warning, .navbar.bg-danger, .navbar.bg-light, .navbar.bg-dark {
  background-image: none !important;
}
.btn-close { opacity: .55; }
.modal-header[class*="bg-"] .btn-close, .modal-header.text-white .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ── 7. Formulaires ─────────────────────────────────────────────────── */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="search"], input[type="url"],
input[type="datetime-local"], input[type="month"], input[type="time"], select, textarea {
  font-size: .9rem;
}
.form-control, .form-select {
  border: 1px solid var(--pv-ligne-2);
  border-radius: 7px;
  padding: .45rem .7rem;
  color: var(--pv-encre);
  background-color: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 2.1rem; }
.form-control-sm, .form-select-sm { font-size: .8rem; padding: .28rem .55rem; border-radius: 6px; }
.form-select-sm { padding-right: 1.8rem; }
.form-control:hover, .form-select:hover { border-color: #B4C2B8; }
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--pv-vert) !important;
  box-shadow: 0 0 0 3px rgba(14, 113, 49, .14) !important;
  outline: none;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #9AA59E; opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: #F5F7F5; }
.form-label, label.form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--pv-encre-2);
  margin-bottom: .3rem;
}
.form-text, .form-hint { font-size: .76rem; color: var(--pv-muet); }
.form-check-input:checked { background-color: var(--pv-vert); border-color: var(--pv-vert); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(14,113,49,.16); border-color: var(--pv-vert); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230E7131'/%3e%3c/svg%3e"); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pv-vert); }
.input-group-text {
  background: var(--pv-fond); border-color: var(--pv-ligne-2);
  color: var(--pv-muet); font-size: .86rem;
}
.invalid-feedback { font-size: .76rem; color: var(--pv-rouge); }
.is-invalid { border-color: var(--pv-rouge) !important; }

/* ── 8. Tableaux ────────────────────────────────────────────────────── */
.table {
  --bs-table-color: var(--pv-encre);
  --bs-table-border-color: var(--pv-ligne);
  --bs-table-striped-bg: #F8FAF8;
  --bs-table-hover-bg: #F1F7F2;
  font-size: .85rem;
  margin-bottom: 0;
}
table th, .table > thead > tr > th, .table thead th {
  font-size: .74rem !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  color: var(--pv-muet) !important;
  white-space: nowrap;
}
.table > thead > tr > th, .table thead th {
  background: #F6F8F6 !important;
  border-bottom: 1px solid var(--pv-ligne-2) !important;
  padding-top: .6rem !important; padding-bottom: .6rem !important;
}
.table > tbody > tr > td, .table td { padding-top: .52rem; padding-bottom: .52rem; vertical-align: middle; border-color: var(--pv-ligne); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F1F7F2; }
.table-dark, .table > thead.table-dark th, thead.table-success th {
  --bs-table-bg: var(--pv-vert-900) !important;
  background: var(--pv-vert-900) !important;
  color: #fff !important;
}
.table-responsive { border-radius: var(--pv-r-lg); }

/* ── 9. Badges, alertes, navigation ─────────────────────────────────── */
.badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .3em .6em;
  border-radius: 5px;
  letter-spacing: 0;
}
.badge.bg-success, .bg-success.badge { background: var(--pv-vert-100) !important; color: var(--pv-vert-700) !important; }
.badge.bg-danger  { background: var(--pv-rouge-50) !important; color: var(--pv-rouge-700) !important; }
.badge.bg-warning { background: var(--pv-or-50) !important; color: var(--pv-or-800) !important; }
.badge.bg-info    { background: var(--pv-bleu-50) !important; color: var(--pv-bleu) !important; }
.badge.bg-primary { background: var(--pv-vert) !important; color: #fff !important; }
.badge.bg-secondary { background: #EDF0EE !important; color: var(--pv-encre-2) !important; }

.alert {
  font-size: .86rem;
  border-radius: var(--pv-r);
  border: 1px solid transparent;
  border-left-width: 3px;
}
.alert-success { background: var(--pv-vert-50); border-color: #C3E1C9; border-left-color: var(--pv-vert); color: var(--pv-vert-700); }
.alert-danger  { background: var(--pv-rouge-50); border-color: #F6C5C1; border-left-color: var(--pv-rouge); color: var(--pv-rouge-700); }
.alert-warning { background: var(--pv-or-50); border-color: #F5DD95; border-left-color: var(--pv-or-600); color: var(--pv-or-800); }
.alert-info    { background: var(--pv-bleu-50); border-color: #C4D8EE; border-left-color: var(--pv-bleu); color: #06321A; }

.nav-tabs { border-bottom: 1px solid var(--pv-ligne); gap: .15rem; }
.nav-tabs .nav-link {
  font-size: .86rem; font-weight: 600; color: var(--pv-muet);
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: .55rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--pv-encre); border-bottom-color: var(--pv-ligne-2); }
.nav-tabs .nav-link.active { color: var(--pv-vert-700); background: transparent; border-bottom-color: var(--pv-or); }
.nav-pills .nav-link { font-size: .86rem; font-weight: 600; color: var(--pv-muet); border-radius: 7px; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--pv-vert); color: #fff; }

.pagination { --bs-pagination-font-size: .82rem; --bs-pagination-color: var(--pv-encre-2);
  --bs-pagination-border-color: var(--pv-ligne); --bs-pagination-hover-bg: var(--pv-vert-50);
  --bs-pagination-hover-color: var(--pv-vert-700); --bs-pagination-active-bg: var(--pv-vert);
  --bs-pagination-active-border-color: var(--pv-vert); --bs-pagination-focus-box-shadow: var(--pv-focus); }

.progress { background: #E7ECE8; border-radius: 99px; height: .5rem; }
.progress-bar { background-color: var(--pv-vert); }
.progress-bar.bg-warning { background-color: var(--pv-or) !important; }
.progress-bar.bg-danger { background-color: var(--pv-rouge) !important; }

/* ── 10. Modales ─────────────────────────────────────────────────────── */
.modal-content {
  border: 0 !important;
  border-radius: var(--pv-r-lg) !important;
  box-shadow: var(--pv-ombre-3) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--pv-ligne);
  padding: 1rem 1.2rem .85rem;
}
.modal-header .modal-title { font-size: 1rem; font-weight: 700; }
.modal-header.bg-success, .modal-header.bg-primary, .modal-header.bg-dark {
  background: var(--pv-vert-900) !important;
}
.modal-body { font-size: .9rem; }
.modal-footer { background: #FAFBF9; border-top: 1px solid var(--pv-ligne); padding: .7rem 1.2rem; }
.modal-backdrop.show { opacity: .5; background: var(--pv-vert-900); }

/* ── 11. Utilitaires Bootstrap recolorés ─────────────────────────────── */
.bg-success, .bg-primary { background-color: var(--pv-vert) !important; }
.bg-danger  { background-color: var(--pv-rouge) !important; }
.bg-warning { background-color: var(--pv-or) !important; }
.bg-dark    { background-color: var(--pv-vert-900) !important; }
.bg-light   { background-color: #F7F9F7 !important; }
.text-success, .text-primary { color: var(--pv-vert-600) !important; }
.text-danger  { color: var(--pv-rouge) !important; }
.text-warning { color: var(--pv-or-600) !important; }
.text-muted, .text-secondary { color: var(--pv-muet) !important; }
.border-success, .border-primary { border-color: var(--pv-vert) !important; }
.border-warning { border-color: var(--pv-or) !important; }
.border-danger  { border-color: var(--pv-rouge) !important; }

/* ── 12. Utilitaires Tailwind recolorés (modules Tailwind) ───────────── */
.bg-slate-50  { background-color: var(--pv-fond) !important; }
.bg-slate-100 { background-color: #EDF1EE !important; }
.text-slate-800, .text-slate-900 { color: var(--pv-encre) !important; }
.text-slate-700 { color: var(--pv-encre-2) !important; }
.text-slate-600 { color: #4A5A51 !important; }
.text-slate-500 { color: var(--pv-muet) !important; }
.text-slate-400 { color: var(--pv-muet-2) !important; }
.border-slate-100 { border-color: #EDF1EE !important; }
.border-slate-200 { border-color: var(--pv-ligne) !important; }
.border-slate-300 { border-color: var(--pv-ligne-2) !important; }

.bg-emerald-50,  .bg-green-50  { background-color: var(--pv-vert-50) !important; }
.bg-emerald-100, .bg-green-100 { background-color: var(--pv-vert-100) !important; }
.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600 { background-color: var(--pv-vert) !important; }
.bg-emerald-700, .bg-green-700, .hover\:bg-emerald-700:hover, .hover\:bg-green-700:hover { background-color: var(--pv-vert-700) !important; }
.text-emerald-500, .text-emerald-600, .text-green-600, .text-green-500 { color: var(--pv-vert) !important; }
.text-emerald-700, .text-emerald-800, .text-green-700, .text-green-800 { color: var(--pv-vert-700) !important; }
.border-emerald-200, .border-green-200 { border-color: #BFDDC6 !important; }

.bg-indigo-50, .bg-indigo-100, .bg-violet-100, .bg-purple-100 { background-color: var(--pv-terre-50) !important; }
.bg-indigo-500, .bg-indigo-600, .bg-violet-600, .bg-purple-600 { background-color: var(--pv-terre) !important; }
.text-indigo-500, .text-indigo-600, .text-indigo-700, .text-purple-500, .text-violet-600 { color: var(--pv-terre) !important; }

.bg-amber-50, .bg-yellow-50 { background-color: var(--pv-or-50) !important; }
.bg-amber-100, .bg-yellow-100 { background-color: #FFEDB3 !important; }
.bg-amber-500, .bg-yellow-400, .bg-yellow-500 { background-color: var(--pv-or) !important; }
.text-amber-500, .text-amber-600 { color: var(--pv-or-600) !important; }
.text-amber-700, .text-amber-800 { color: var(--pv-or-800) !important; }

.bg-red-50, .bg-rose-50 { background-color: var(--pv-rouge-50) !important; }
.bg-red-100, .bg-rose-100 { background-color: #FAD5D2 !important; }
.bg-red-600, .bg-rose-600, .bg-red-500 { background-color: var(--pv-rouge) !important; }
.text-red-500, .text-red-600, .text-rose-500, .text-rose-600 { color: var(--pv-rouge) !important; }
.text-red-700, .text-red-800 { color: var(--pv-rouge-700) !important; }
.border-red-200 { border-color: #F3C3BF !important; }

.bg-blue-50 { background-color: var(--pv-bleu-50) !important; }
.text-blue-500, .text-blue-600, .text-blue-700 { color: var(--pv-bleu) !important; }

.rounded-2xl { border-radius: var(--pv-r-lg) !important; }
.rounded-xl  { border-radius: 10px !important; }
.shadow-sm   { box-shadow: var(--pv-ombre-1) !important; }
.shadow, .shadow-md { box-shadow: var(--pv-ombre-2) !important; }

/* Palette limitée à vert / jaune / rouge : les bleus deviennent verts,
   les violets et indigos deviennent rouges. */
.bg-blue-50, .hover\:bg-blue-50:hover { background-color: var(--pv-vert-50) !important; }
.bg-blue-100, .hover\:bg-blue-100:hover { background-color: var(--pv-vert-100) !important; }
.bg-blue-500, .bg-blue-600 { background-color: var(--pv-vert) !important; }
.hover\:bg-blue-700:hover, .bg-blue-700 { background-color: var(--pv-vert-700) !important; }
.text-blue-100 { color: var(--pv-vert-100) !important; }
.text-blue-400 { color: #5BAE6F !important; }
.hover\:text-blue-600:hover { color: var(--pv-vert-600) !important; }
.border-blue-100, .border-blue-200 { border-color: #BFDDC6 !important; }
.border-blue-500 { border-color: var(--pv-vert) !important; }
.hover\:bg-indigo-50:hover { background-color: var(--pv-rouge-50) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--pv-rouge-700) !important; }
.text-violet-200 { color: #F8CDC9 !important; }
.text-violet-500 { color: var(--pv-rouge) !important; }
.text-violet-800 { color: var(--pv-rouge-700) !important; }
.text-info { color: var(--pv-vert-600) !important; }
.bg-info { background-color: var(--pv-vert) !important; }
.border-info { border-color: var(--pv-vert) !important; }

/* ── 13. Composants maison récurrents ────────────────────────────────── */
/* cartes d'indicateurs */
.stat-card, .kpi-card {
  background: #fff;
  border: 1px solid var(--pv-ligne) !important;
  box-shadow: var(--pv-ombre-1) !important;
}
.stat-card, .kpi-card { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s !important; }
.stat-card:hover, .kpi-card:hover { box-shadow: var(--pv-ombre-2) !important; transform: translateY(-3px) !important; }

/* Toasts / notifications flottantes */
.notif-toast, .toast {
  font-size: .86rem !important;
  border-radius: 10px !important;
  box-shadow: var(--pv-ombre-3) !important;
}

/* Boutons d'action iconiques dans les tableaux */
.btn-action, .action-btn, .btn-icon {
  border-radius: 6px !important;
}

/* Etats vides */
.empty-state, .no-data { color: var(--pv-muet); font-size: .88rem; }

/* ── 14. Accessibilité : mouvement réduit ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 15. Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  html { font-size: 13.5px; }
  .modal-dialog { margin: .6rem; }
}

/* ── 16. Impression ──────────────────────────────────────────────────── */
@media print {
  html { font-size: 12px; }
  .app-header::before, .app-header::after { display: none; }
  body { background: #fff !important; }
}

/* code inline (identifiants, références) */
code, kbd { color: var(--pv-terre); background: var(--pv-terre-50); padding: .1em .35em; border-radius: 4px; font-size: .85em; }

/* ── 17. Pages intégrées au tableau de bord (voir assets/js/pnvb-cadre.js) ──
   Pas d'option de déconnexion ni de retour à la connexion dans l'iframe :
   la déconnexion se fait depuis le menu du tableau de bord. */
html.pv-embedded a[href$="logout.php"],
html.pv-embedded a[href$="index.php"],
html.pv-embedded .logoutbox,
html.pv-embedded .user-chip-lock,
html.pv-embedded .pv-hors-cadre { display: none !important; }

/* ── 18. Bouton « Déconnexion » du menu principal ─────────────────────── */
.app-header .header-logout {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 38px; padding: 0 .85rem; margin-left: .15rem;
  border-radius: 8px;
  background: var(--pv-menu-btn); border: 1px solid var(--pv-menu-btn-line);
  color: var(--pv-menu-fg) !important;
  font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.app-header .header-logout .icon { width: 1em; height: 1em; }
.app-header .header-logout:hover,
.app-header .header-logout:focus-visible {
  background: #D4140B; border-color: #D4140B; color: #FFFFFF !important;
}
@media (max-width: 1200px) {
  .app-header .header-logout { width: 38px; padding: 0; justify-content: center; }
  .app-header .header-logout span { display: none; }
}

/* ── 19. Pleine largeur ───────────────────────────────────────────────
   Toutes les pages occupent toute la largeur de l'écran : les conteneurs
   centrés à largeur maximale (Tailwind max-w-*, Bootstrap .container,
   conteneurs maison et styles inline) sont libérés.
   Restent volontairement étroits : les cartes de code d'accès, les
   fenêtres modales, les menus et les infobulles. */
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl,
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl,
.wrap, .page-body, .main-card,
.app-header-inner, .top-header-inner, .header-inner,
[style*="max-width:1400px"], [style*="max-width: 1400px"],
.container[style*="max-width"] {
  max-width: none !important;
}
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
  width: 100% !important;
  box-sizing: border-box;
  padding-left: clamp(12px, 1.6vw, 28px) !important;
  padding-right: clamp(12px, 1.6vw, 28px) !important;
}
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .wrap, .page-body {
  width: 100%;
  box-sizing: border-box;
  padding-left: clamp(12px, 1.6vw, 28px) !important;
  padding-right: clamp(12px, 1.6vw, 28px) !important;
}
.main-card { width: auto; margin-left: clamp(12px, 1.6vw, 28px) !important; margin-right: clamp(12px, 1.6vw, 28px) !important; }

/* Carte de mobilisation : sur très grand écran, la carte garde une hauteur lisible */
.carte-svg { max-height: 78vh; margin: 0 auto; }

/* ════════════════════════════════════════════════════════════════════
   20. ANIMATIONS « ÉLAN »  (pilotées par assets/js/pnvb-anim.js)
   Activées seulement si le script a ajouté html.pv-anim : sans script,
   tout le contenu reste visible. Couleurs unies, aucun dégradé.
   ════════════════════════════════════════════════════════════════════ */
:root { --pv-ressort: cubic-bezier(.2, .85, .25, 1.15); --pv-doux: cubic-bezier(.2, .7, .2, 1); }

/* Apparition en cascade */
html.pv-anim .pv-reveal { opacity: 0; transform: translateY(16px) scale(.985); }
html.pv-anim .fade-up.pv-reveal { animation: none !important; }
html.pv-anim .pv-reveal.pv-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--pv-doux) var(--pv-d, 0ms), transform .65s var(--pv-ressort) var(--pv-d, 0ms);
}
html.pv-anim .pv-reveal.pv-in.kpi-card:hover,
html.pv-anim .pv-reveal.pv-in.stat-card:hover { transform: translateY(-3px) !important; transition-delay: 0ms; }

/* Lignes de tableau */
@keyframes pvLigne { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
html.pv-anim .pv-row:not(.pv-row-sans) { animation: pvLigne .45s var(--pv-doux) both; animation-delay: var(--pv-d, 0ms); }
html.pv-anim tbody tr { transition: background-color .15s; }

/* Compteurs : chiffres alignés pendant le comptage */
.pv-compteur { font-variant-numeric: tabular-nums; }

/* Onde au clic (aplat) */
.pv-onde-hote { position: relative; overflow: hidden; }
.pv-onde {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .22; transform: scale(0);
  animation: pvOnde .6s var(--pv-doux) forwards;
}
@keyframes pvOnde { to { transform: scale(1); opacity: 0; } }

/* Boutons : enfoncement */
html.pv-anim .btn, html.pv-anim .mode-btn, html.pv-anim .header-logout, html.pv-anim .carte-metric {
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s;
}
html.pv-anim .btn:active, html.pv-anim .mode-btn:active, html.pv-anim .header-logout:active { transform: scale(.96); }

/* En-tête : l'écharpe tricolore se déploie */
@keyframes pvEcharpeG { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.pv-anim .app-header::before { transform-origin: left center;  animation: pvEcharpeG .9s var(--pv-doux) .15s both; }
html.pv-anim .app-header::after  { transform-origin: right center; animation: pvEcharpeG .9s var(--pv-doux) .35s both; }

/* Onglet actif du menu : trait qui glisse */
@keyframes pvTrait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.pv-anim .app-header .nav-link-custom.active::after { animation: pvTrait .35s var(--pv-ressort) both; }
html.pv-anim .app-header .nav-link-custom .icon { transition: transform .25s var(--pv-ressort); }
html.pv-anim .app-header .nav-link-custom:hover .icon { transform: translateY(-2px) rotate(-6deg); }

/* Menus déroulants */
@keyframes pvMenu { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
html.pv-anim .dropdown-menu-custom, html.pv-anim .dropdown-menu.show, html.pv-anim .user-menu-panel:not([hidden]) {
  animation: pvMenu .22s var(--pv-doux) both; transform-origin: top center;
}

/* Fenêtres modales */
html.pv-anim .modal.fade .modal-dialog { transform: translateY(18px) scale(.96); transition: transform .35s var(--pv-ressort), opacity .25s; }
html.pv-anim .modal.show .modal-dialog { transform: none; }

/* Cloche des notifications */
@keyframes pvCloche {
  0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}
html.pv-anim .pv-sonne .icon { animation: pvCloche .9s ease-in-out; transform-origin: 50% 10%; }
@keyframes pvPop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
html.pv-anim .notify-count { animation: pvPop .45s var(--pv-ressort) both; }
html.pv-anim .notify-count.pv-pop { animation: pvPop .45s var(--pv-ressort) both; }

/* Barre de chargement des tableaux de bord (aplat jaune) */
#pvBarre {
  position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 3000;
  background: #FFBC04; box-shadow: 0 0 0 1px rgba(255,188,4,.25);
  opacity: 0; pointer-events: none;
}
#pvBarre.pv-actif { opacity: 1; animation: pvBarre 2.8s cubic-bezier(.1,.6,.2,1) forwards; }
#pvBarre.pv-fin   { opacity: 0; width: 100%; transition: width .2s ease-out, opacity .35s ease .15s; }
@keyframes pvBarre { from { width: 0; } to { width: 88%; } }
html.pv-anim .content-frame, html.pv-anim #mainFrame { transition: opacity .25s ease; }
html.pv-anim .pv-frame-charge { opacity: .55; }

/* Barres de progression et de répartition qui se remplissent */
@keyframes pvRemplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.pv-anim .progress-bar,
html.pv-anim .fiche-barre > div,
html.pv-anim #sectionCapitalisation [style*="height:14px"] > div {
  transform-origin: left center; animation: pvRemplir 1s var(--pv-doux) .2s both;
}

/* Carte de mobilisation : les points éclosent un à un */
html.pv-anim .carte-pt.pv-pt .bulle,
html.pv-anim .carte-pt.pv-pt .val,
html.pv-anim .carte-pt.pv-pt .nom { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.2); }
html.pv-anim .carte-pt.pv-pt-in .bulle,
html.pv-anim .carte-pt.pv-pt-in .val,
html.pv-anim .carte-pt.pv-pt-in .nom {
  opacity: 1; transform: none;
  transition: opacity .35s ease var(--pv-d), transform .6s var(--pv-ressort) var(--pv-d), r .35s ease;
}
@keyframes pvHalo { 0% { stroke-opacity: 1; stroke-width: 3.5; } 70% { stroke-opacity: 0; stroke-width: 12; } 100% { stroke-opacity: 0; stroke-width: 12; } }
html.pv-anim .carte-pt.actif .halo { animation: pvHalo 1.8s ease-out infinite; }
html.pv-anim .carte-pt:hover .bulle { transform: scale(1.08); transition: transform .2s var(--pv-ressort); }
@keyframes pvFiche { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
html.pv-anim #carteFiche > * { animation: pvFiche .4s var(--pv-doux) both; }
html.pv-anim #carteFiche > *:nth-child(2) { animation-delay: .04s; }
html.pv-anim #carteFiche > *:nth-child(3) { animation-delay: .08s; }
html.pv-anim #carteFiche > *:nth-child(n+4) { animation-delay: .12s; }

/* Page de connexion */
@keyframes pvLogo { 0% { opacity: 0; transform: translateY(-18px) scale(.8) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes pvMonte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pvBandeV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
html.pv-anim body.login-page .auth-header .logo { animation: pvLogo .8s var(--pv-ressort) .15s both; }
html.pv-anim body.login-page .auth-header .logo img { animation: pvFlotte 5s ease-in-out 1.2s infinite; }
@keyframes pvFlotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
html.pv-anim body.login-page .auth-title    { animation: pvMonte .6s var(--pv-doux) .3s both; }
html.pv-anim body.login-page .auth-subtitle { animation: pvMonte .6s var(--pv-doux) .4s both; }
html.pv-anim body.login-page .brand-foot    { animation: pvMonte .6s var(--pv-doux) .5s both; }
html.pv-anim body.login-page .auth-header::before { transform-origin: top;    animation: pvBandeV .8s var(--pv-doux) .5s both; }
html.pv-anim body.login-page .auth-header::after  { transform-origin: bottom; animation: pvBandeV .8s var(--pv-doux) .7s both; }
html.pv-anim body.login-page .auth-body .form-group,
html.pv-anim body.login-page .auth-body .form-row,
html.pv-anim body.login-page .auth-body .btn,
html.pv-anim body.login-page .mode-switch { animation: pvMonte .5s var(--pv-doux) both; }
html.pv-anim body.login-page .mode-switch { animation-delay: .35s; }
html.pv-anim body.login-page .auth-body form > :nth-child(3) { animation-delay: .45s; }
html.pv-anim body.login-page .auth-body form > :nth-child(4) { animation-delay: .52s; }
html.pv-anim body.login-page .auth-body form > :nth-child(5) { animation-delay: .59s; }
html.pv-anim body.login-page .auth-body form > :nth-child(6) { animation-delay: .66s; }
html.pv-anim body.login-page .auth-body form > :nth-child(n+7) { animation-delay: .73s; }
html.pv-anim body.login-page .field-icon { transition: color .15s, transform .2s var(--pv-ressort); }
html.pv-anim body.login-page .input-icon-wrap:focus-within .field-icon { transform: translateY(-50%) scale(1.15); }

/* Champs de formulaire : focus vivant */
html.pv-anim .form-control, html.pv-anim .form-select { transition: border-color .15s, box-shadow .25s var(--pv-doux); }

/* Rappel : aucune animation si l'utilisateur réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
  html.pv-anim .pv-reveal, html.pv-anim .carte-pt .bulle, html.pv-anim .carte-pt .val, html.pv-anim .carte-pt .nom { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}