:root { --emairie-primary: #2f7fe8; --emairie-gold: #f3a64a; --bonoua-green: #4C8D28; --bonoua-green-bright: #60B030; --bonoua-green-ink: #27501A; --bonoua-gold: #C9A227; --bonoua-orange: #F06000; }
.nav-header .brand-logo.gatl-brand { gap: 10px; }
.nav-header .gatl-menu-logo { width:54px;height:54px;border-radius:50%;background:#fff; }
.nav-header .gatl-menu-logo.admin-brand-logo { display:block;width:185px;height:64px;max-width:calc(100% - 38px);object-fit:contain;object-position:left center;border-radius:0;background:transparent; }
.admin-login-logo { display:block;width:min(300px,90%);height:auto;object-fit:contain; }
.admin-login-logo-mobile { padding:8px 12px;background:rgba(255,255,255,.94);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12); }
.emairie-seal { display:grid;place-items:center;color:#fff!important;background:#0074ff!important;border:3px solid #fff;font-weight:900;font-size:16px;box-shadow:0 5px 14px rgba(0,116,255,.24); }
.nav-header .gatl-logo-name { color:var(--text-dark);font-size:15px;font-weight:800;line-height:1.05;max-width:125px; }.nav-header .gatl-logo-name small{color:#435466;display:block;font-size:10px;font-weight:700;letter-spacing:.04em;margin-top:3px;text-transform:uppercase}
.admin-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e9f2ff;color:#2f7fe8;border:1px solid #cfe0f7;font-weight:800}.admin-avatar-lg{width:48px;height:48px}.header-user-role{color:#fff;display:block;font-size:12px;font-weight:700;margin-top:2px}.topbar-context{display:inline-flex;align-items:center;gap:9px;padding:7px 17px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.01em;background:linear-gradient(135deg,#0074FF 0%,#3392ff 100%);border-radius:999px;box-shadow:0 5px 14px rgba(0,116,255,.3)}.topbar-context i{font-size:14px;opacity:.9}
.dashboard-kpi { height: 100%; border: 0; border-left: 4px solid var(--emairie-primary); box-shadow: 0 8px 26px rgba(47,127,232,.08); }.dashboard-kpi .kpi-label { color: #687a74; font-size: 12px; font-weight: 700; text-transform: uppercase; }.dashboard-kpi h3 { margin: 8px 0 0; font-size: 28px; }
.workflow-column { min-height: 230px; background: #f7faf9; border: 1px solid #e0ebe7; border-radius: 12px; }.workflow-column h3 { padding: 14px; border-bottom: 1px solid #e0ebe7; font-size: 14px; }.workflow-column .count { color: var(--emairie-primary); font-size: 26px; font-weight: 800; }
.dashboard-chart{min-height:320px}.dashboard-chart-small{min-height:290px}.admin-tabs .nav-link{border-radius:8px;font-weight:700}.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.permission-item{display:block;padding:12px;border:1px solid #e4e9f0;border-radius:10px;background:#fafcff}.permission-item small{display:block;margin-left:22px;color:#7b8794}.role-card{height:calc(100% - 1.875rem)}.menu-title{background:#fff!important;color:#273240!important;padding:10px!important;border-radius:5px;font-size:12px!important;font-weight:800}.gatl-footer{margin-top:20px}
@media (max-width: 767px) { .nav-header .gatl-logo-name,.topbar-context { display: none; } }
.glass-blur{background:rgba(255,255,255,.15);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.2);border-radius:15px;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.authincation-content .auth-form .alert-danger{color:#842029!important;background-color:rgba(248,215,218,.96);border-color:#f1aeb5}
.authincation-content .auth-form .form-control{min-height:3.25rem;font-size:1.08rem;padding:.75rem 1rem}
.authincation-content .auth-form .password-field{position:relative}
.authincation-content .auth-form .password-field .form-control{padding-right:3.4rem}
.authincation-content .auth-form .password-toggle{position:absolute;top:50%;right:.75rem;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;transform:translateY(-50%);color:#334155;background:transparent;border:0;border-radius:50%;cursor:pointer}
.authincation-content .auth-form .password-toggle:hover{color:#4C8D28;background:rgba(76,141,40,.1)}
.authincation-content .auth-form .password-toggle:focus-visible{outline:3px solid rgba(76,141,40,.3);outline-offset:1px}
.authincation-content .auth-form .password-toggle svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.authincation-content .auth-form .restricted-access-notice{display:block;padding:.7rem 1rem;color:#000!important;background:rgba(255,255,255,.96);border-radius:.5rem;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.authincation-content .auth-form .btn-primary{background-color:#4C8D28!important;border-color:#4C8D28!important;color:#fff!important}
.authincation-content .auth-form .btn-primary:hover,.authincation-content .auth-form .btn-primary:focus,.authincation-content .auth-form .btn-primary:active{background-color:#3b6f1f!important;border-color:#3b6f1f!important;color:#fff!important}
.authincation-content .auth-form .human-slider{position:relative;height:4rem;padding:4px;overflow:hidden;touch-action:none;user-select:none;background:rgba(255,255,255,.94);border:1px solid rgba(35,61,42,.2);border-radius:2rem;box-shadow:inset 0 2px 5px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.1);outline:none}
.authincation-content .auth-form .human-slider:focus-visible{box-shadow:0 0 0 4px rgba(76,141,40,.28),inset 0 2px 5px rgba(0,0,0,.08)}
.authincation-content .auth-form .human-slider-fill{position:absolute;inset:4px auto 4px 4px;width:1.75rem;background:linear-gradient(90deg,rgba(76,141,40,.28),rgba(76,141,40,.72));border-radius:2rem;transition:width .12s ease}
.authincation-content .auth-form .human-slider-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:3.5rem;color:#17211a;font-size:1rem;font-weight:600;pointer-events:none;transition:color .2s ease}
.authincation-content .auth-form .human-slider-thumb{position:absolute;top:4px;left:4px;z-index:2;display:flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;padding:0;color:#fff;background:#4C8D28;border:0;border-radius:50%;box-shadow:0 5px 14px rgba(42,83,25,.35);cursor:grab;transition:box-shadow .15s ease,background .2s ease}
.authincation-content .auth-form .human-slider-thumb:active,.authincation-content .auth-form .human-slider.is-dragging .human-slider-thumb{cursor:grabbing;box-shadow:0 7px 18px rgba(42,83,25,.5)}
.authincation-content .auth-form .human-slider-thumb svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.authincation-content .auth-form .human-slider.is-complete{border-color:#4C8D28;background:rgba(241,250,236,.98)}
.authincation-content .auth-form .human-slider.is-complete .human-slider-fill{background:#4C8D28}
.authincation-content .auth-form .human-slider.is-complete .human-slider-label{padding-left:0;color:#245512}
.authincation-content .auth-form .human-slider.is-complete .human-slider-thumb{background:#2f6e13}

/* Pagination commune des tableaux administratifs : boutons courts et stables. */
.dataTables_wrapper .dataTables_paginate{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px}
.dataTables_wrapper .dataTables_paginate > span{display:flex;align-items:center;gap:4px}
.dataTables_wrapper .dataTables_paginate .paginate_button{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box!important;width:36px;min-width:36px!important;height:36px;margin:0!important;padding:0!important;white-space:nowrap;line-height:1!important;border-radius:6px!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.first,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.last{font-size:20px;font-weight:700}
.dataTables_wrapper .dataTables_paginate .ellipsis{display:inline-flex;align-items:center;justify-content:center;width:28px;height:36px;padding:0!important}
@media(max-width:767px){.dataTables_wrapper .dataTables_paginate{justify-content:center;width:100%;gap:3px}.dataTables_wrapper .dataTables_paginate > span{gap:3px}.dataTables_wrapper .dataTables_paginate .paginate_button{width:34px;min-width:34px!important;height:34px}}

/* ==================================================================
   Portail des services (Services.php)
   Cartes en relief : couleur d'accent par service, profondeur en
   couches, tilt 3D, spotlight au curseur et revelation en cascade.
   CSS + js/portal-cards.js, aucune bibliotheque ajoutee.
   ================================================================== */
#main-wrapper.emairie-portal .content-body{margin-left:0}

.portal-intro{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:30px;padding:22px 26px;overflow:hidden;background:linear-gradient(118deg,var(--bonoua-green-ink) 0%,var(--bonoua-green) 48%,var(--bonoua-green-bright) 100%);border-radius:20px;box-shadow:0 18px 44px rgba(39,80,26,.3)}
.portal-intro::before{content:"";position:absolute;top:-70%;right:-8%;width:320px;height:320px;background:radial-gradient(circle,rgba(243,166,74,.5),transparent 62%);animation:portalGlow 9s ease-in-out infinite alternate}
.portal-intro::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px);pointer-events:none}
@keyframes portalGlow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-26px,22px,0) scale(1.18)}}
.portal-intro>*{position:relative;z-index:1}
.portal-intro h2,.portal-intro p{color:#fff}
.portal-intro p{opacity:.82}
.portal-count{padding:9px 17px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);border-radius:999px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}

.portal-section{margin-bottom:38px}
.portal-section-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.portal-section-bar{flex:0 0 auto;width:5px;height:42px;background:linear-gradient(180deg,var(--emairie-primary),#7fb4f5);border-radius:999px}
.portal-section-guichet .portal-section-bar{background:linear-gradient(180deg,var(--emairie-primary),#7fb4f5)}.portal-section-interne .portal-section-bar{background:linear-gradient(180deg,var(--emairie-gold),#f7cf9b)}

/* ---------- la carte ---------- */
/* Carte en verre depoli : le fond de page et le blason restent visibles
   a travers, floutes. --glass-alpha pilote l'equilibre entre lisibilite
   du texte et transparence ; en descendant trop bas, les titres
   deviennent difficiles a lire sur le filigrane. */
.portal-card{--accent:#2f7fe8;--accent-2:#7fb4f5;--glass-alpha:.58;position:relative;display:flex;flex-direction:column;height:100%;padding:24px;overflow:hidden;color:inherit;text-decoration:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.5),transparent 46%),linear-gradient(150deg,rgba(255,255,255,calc(var(--glass-alpha) + .1)) 0%,rgba(255,255,255,var(--glass-alpha)) 100%);backdrop-filter:blur(17px) saturate(145%);-webkit-backdrop-filter:blur(17px) saturate(145%);border:1px solid rgba(255,255,255,.72);border-radius:20px;box-shadow:0 2px 6px rgba(27,42,64,.05),0 14px 34px rgba(27,42,64,.1),inset 0 1px 0 rgba(255,255,255,.8);transform-style:preserve-3d;will-change:transform;opacity:0;transition:box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,background .35s ease}
/* Navigateurs sans backdrop-filter : fond opaque, lisibilite preservee. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .portal-card{background:linear-gradient(160deg,#fff 0%,#fbfdff 100%);border-color:#e3e9f1}
}
.portal-card.is-revealed{animation:portalCardIn .72s cubic-bezier(.19,1.1,.28,1) forwards;animation-delay:calc(var(--card-index,0)*68ms)}
@keyframes portalCardIn{0%{opacity:0;transform:perspective(900px) translate3d(0,34px,0) rotateX(-9deg) scale(.95)}60%{opacity:1}100%{opacity:1;transform:perspective(900px) translate3d(0,0,0) rotateX(0) scale(1)}}

/* Couche 1 : halo d'accent en haut a droite, qui respire au survol. */
.portal-blob{position:absolute;top:-96px;right:-76px;width:230px;height:230px;background:radial-gradient(circle,var(--accent) 0%,transparent 68%);opacity:.17;border-radius:50%;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .45s ease}
/* Couche 2 : filigrane de l'icone, en bas a droite. */
.portal-ghost{position:absolute;right:-14px;bottom:-30px;color:var(--accent);font-size:118px;line-height:1;opacity:.055;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .45s ease;pointer-events:none}
/* Couche 3 : lisere d'accent qui se deploie. */
.portal-rail{position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1)}
/* Couche 4 : reflet diagonal. */
.portal-sheen{position:absolute;top:-70%;left:-130%;width:62%;height:240%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);transform:rotate(15deg);transition:left .85s ease;pointer-events:none}

.portal-card-body{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;transform:translateZ(38px)}
.portal-card-icon{position:relative;display:grid;place-items:center;width:62px;height:62px;margin-bottom:18px;color:#fff;font-size:25px;background:linear-gradient(140deg,var(--accent),var(--accent-2));border-radius:19px;box-shadow:0 8px 20px -6px var(--accent),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .5s cubic-bezier(.34,1.5,.5,1),box-shadow .45s ease}
.portal-card-icon::after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--accent);border-radius:23px;opacity:0;transform:scale(.86);transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.5,.5,1)}
.portal-card-photo{--photo-x:0%;--photo-y:0%;position:relative;display:block;width:76px;height:76px;margin-bottom:18px;background-image:url("../images/services/municipal-services-photo-atlas-v1.webp");background-repeat:no-repeat;background-size:400% 400%;background-position:var(--photo-x) var(--photo-y);border:3px solid rgba(255,255,255,.92);border-radius:20px;box-shadow:0 9px 22px -7px var(--accent),0 2px 7px rgba(27,42,64,.2);transition:transform .5s cubic-bezier(.34,1.5,.5,1),box-shadow .45s ease}
.portal-card-photo::after{content:"";position:absolute;inset:-7px;border:1.5px solid var(--accent);border-radius:25px;opacity:0;transform:scale(.86);transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.5,.5,1)}
.portal-card-title{margin:0 0 9px;color:#1b2a40;font-size:16.5px;font-weight:800;line-height:1.3;letter-spacing:-.2px}
.portal-card-text{margin:0 0 20px;color:#3f4f63;font-weight:500;font-size:14px;line-height:1.56}
.portal-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.portal-badge{display:inline-flex;align-items:center;padding:5px 12px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px}
.portal-badge-open{color:#0f6b36;background:linear-gradient(135deg,#e4f7ec,#f2fbf6);border:1px solid #b6e3ca;box-shadow:0 2px 7px rgba(15,107,54,.1)}
.portal-badge-locked{color:#8a5c00;background:linear-gradient(135deg,#fff4dd,#fffaf0);border:1px solid #f0d8a6}
.portal-badge-soon{color:#5a6775;background:linear-gradient(135deg,#eef1f6,#f7f9fc);border:1px solid #dde4ed}
.portal-tag{padding:5px 12px;color:var(--accent);font-size:10.5px;font-weight:700;background:#fff;border:1px dashed var(--accent);border-radius:999px;opacity:.85}
.portal-card-cta{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--accent);font-size:13px;font-weight:800;opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.portal-card-cta i{transition:transform .4s cubic-bezier(.34,1.5,.5,1)}

/* ---------- survol d'une carte accessible ---------- */
.portal-card-open{cursor:pointer}
.portal-card-open:hover,.portal-card-open:focus-visible{border-color:var(--accent);box-shadow:0 4px 8px rgba(27,42,64,.05),0 28px 54px -14px var(--accent);outline:none}
.portal-card-open:hover .portal-rail,.portal-card-open:focus-visible .portal-rail{transform:scaleX(1)}
.portal-card-open:hover .portal-blob{opacity:.3;transform:scale(1.42) translate(-16px,18px)}
.portal-card-open:hover .portal-ghost{opacity:.1;transform:rotate(-11deg) scale(1.14)}
.portal-card-open:hover .portal-sheen{left:150%}
.portal-card-open:hover .portal-card-icon,.portal-card-open:focus-visible .portal-card-icon,.portal-card-open:hover .portal-card-photo,.portal-card-open:focus-visible .portal-card-photo{transform:translateY(-5px) scale(1.07) rotate(-3deg);box-shadow:0 16px 30px -8px var(--accent),0 3px 9px rgba(27,42,64,.2)}
.portal-card-open:hover .portal-card-icon::after,.portal-card-open:hover .portal-card-photo::after{opacity:.4;transform:scale(1)}
.portal-card-open:hover .portal-card-cta,.portal-card-open:focus-visible .portal-card-cta{opacity:1;transform:translateX(0)}
.portal-card-open:hover .portal-card-cta i{transform:translateX(6px)}

/* ---------- cartes inertes ----------
   Elles conservent la couleur d'accent de leur service, seulement
   desaturee : sans cela, 12 cartes sur 13 paraissent blanches et les
   teintes par service deviennent invisibles. Le caractere non
   cliquable reste porte par la bordure pointillee, le badge, l'absence
   d'ombre portee, le curseur par defaut et l'absence de tilt. */
.portal-card-locked,.portal-card-soon{--glass-alpha:.46;background:linear-gradient(150deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.4) 100%);backdrop-filter:blur(13px) saturate(115%);-webkit-backdrop-filter:blur(13px) saturate(115%);border-style:dashed;border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);cursor:default}
.portal-card-locked .portal-card-icon,.portal-card-soon .portal-card-icon,.portal-card-locked .portal-card-photo,.portal-card-soon .portal-card-photo{box-shadow:0 5px 14px -7px var(--accent),0 2px 6px rgba(27,42,64,.14);filter:saturate(.62) brightness(1.04)}
.portal-card-locked .portal-card-title,.portal-card-soon .portal-card-title{color:#46556a}
.portal-card-locked .portal-sheen,.portal-card-soon .portal-sheen{display:none}
.portal-card-locked .portal-blob,.portal-card-soon .portal-blob{opacity:.13}
.portal-card-locked .portal-ghost,.portal-card-soon .portal-ghost{opacity:.07}
.portal-card-locked .portal-rail,.portal-card-soon .portal-rail{height:3px;transform:scaleX(1);opacity:.3}
/* Reaction discrete au survol : la carte reste inerte mais pas morte. */
.portal-card-locked:hover,.portal-card-soon:hover{border-color:var(--accent);background:linear-gradient(160deg,#fff 0%,#f4f8fd 100%)}
.portal-card-locked:hover .portal-blob,.portal-card-soon:hover .portal-blob{opacity:.22;transform:scale(1.2) translate(-8px,10px)}
.portal-card-locked:hover .portal-ghost,.portal-card-soon:hover .portal-ghost{opacity:.1;transform:rotate(-7deg) scale(1.07)}
.portal-card-locked:hover .portal-rail,.portal-card-soon:hover .portal-rail{opacity:.75}
.portal-card-soon:hover .portal-card-icon,.portal-card-soon:hover .portal-card-photo{transform:translateY(-3px);filter:saturate(1) brightness(1)}
.portal-card-locked:hover .portal-card-icon,.portal-card-locked:hover .portal-card-photo{animation:portalLockShake .42s ease}
@keyframes portalLockShake{0%,100%{transform:translateX(0)}22%{transform:translateX(-5px) rotate(-4deg)}66%{transform:translateX(5px) rotate(4deg)}}

/* ---------- accent propre a chaque service ---------- */
.portal-card[data-service="ETAT_CIVIL"]{--accent:#2f7fe8;--accent-2:#79b0f3}
.portal-card[data-service="URBANISME"]{--accent:#e07b1f;--accent-2:#f5b569}
.portal-card[data-service="DOMAINE_FONCIER"]{--accent:#0f9b8e;--accent-2:#67d2c8}
.portal-card[data-service="REGIE_RECETTES"]{--accent:#1f9d4f;--accent-2:#74d394}
.portal-card[data-service="HYGIENE_SALUBRITE"]{--accent:#6aa81c;--accent-2:#aed76e}
.portal-card[data-service="ACTION_SOCIALE"]{--accent:#d64372;--accent-2:#f093b2}
.portal-card[data-service="SOCIO_CULTUREL"]{--accent:#7b55d9;--accent-2:#b79df0}
.portal-card[data-service="POLICE_MUNICIPALE"]{--accent:#2a4c8f;--accent-2:#7b9ad6}
.portal-card[data-service="SECRETARIAT_COURRIER"]{--accent:#c2971b;--accent-2:#e8ca74}
.portal-card[data-service="FINANCES_BUDGET"]{--accent:#0e7a9c;--accent-2:#6cc1da}
.portal-card[data-service="RESSOURCES_HUMAINES"]{--accent:#b4476b;--accent-2:#e498b1}
.portal-card[data-service="MARCHES_PUBLICS"]{--accent:#5f6caf;--accent-2:#a6afe0}
.portal-card[data-service="COMMUNICATION"]{--accent:#cf5a2e;--accent-2:#f0a582}

@media (max-width:575px){.portal-intro{padding:18px}.portal-card{padding:19px}.portal-card-icon{width:54px;height:54px;font-size:22px}.portal-card-photo{width:66px;height:66px}.portal-ghost{font-size:96px}}
@media (prefers-reduced-motion:reduce){
    .portal-card{opacity:1 !important;animation:none !important;transform:none !important}
    .portal-card *,.portal-blob,.portal-ghost,.portal-rail,.portal-sheen{transition:none !important;animation:none !important}
    .portal-intro::before{animation:none}
    .portal-card-cta{opacity:1;transform:none}
}

/* ---------- fond de page du portail ----------
   Degrade institutionnel et filigrane du blason de la Commune, fixe au
   defilement. Les cinq variables ci-dessous pilotent tout le rendu :
   les ajuster suffit, sans toucher aux regles.
   Portee limitee a #main-wrapper.emairie-portal : le reste de
   l'administration conserve le fond du template (--body-bg). */
#main-wrapper.emairie-portal{
    --portal-bg-top:#e7eef8;
    --portal-bg-mid:#dae5f2;
    --portal-bg-bottom:#cfdcee;
    --portal-seal-height:min(74vh,640px);
    --portal-seal-opacity:.33;
    min-height:100vh;
    background:linear-gradient(180deg,var(--portal-bg-top) 0%,var(--portal-bg-mid) 52%,var(--portal-bg-bottom) 100%);
}
/* Le blason porte REGION DU SUD-COMOE / COMMUNE DE / BONOUA : il est
   donc dimensionne par sa HAUTEUR et entierement contenu dans la
   fenetre. Le faire deborder couperait la ligne BONOUA, en bas. */
#main-wrapper.emairie-portal::after{content:"";position:fixed;right:26px;bottom:20px;height:var(--portal-seal-height);width:calc(var(--portal-seal-height)*0.7792);background:url("../images/logo300_bonoua.png") no-repeat center bottom/contain;opacity:var(--portal-seal-opacity);pointer-events:none;z-index:0}
/* Seuls le contenu et le pied passent au-dessus du filigrane. Ne pas
   toucher au z-index de .heets (3) ni de .nav-header (7) : les abaisser
   fait passer le menu deroulant du profil SOUS le contenu de la page. */
#main-wrapper.emairie-portal .content-body,#main-wrapper.emairie-portal .footer{position:relative;z-index:1}
#main-wrapper.emairie-portal .footer{background:transparent}
@media (max-width:991px){#main-wrapper.emairie-portal{--portal-seal-height:min(38vh,310px);--portal-seal-opacity:.26}#main-wrapper.emairie-portal::after{right:14px;bottom:14px}}

/* ---------- logo de l'en-tete en responsive ----------
   Sous 47.9375rem le template reduit .nav-header a 5rem : un logo
   bandeau de 185px y devient illisible. On bascule donc sur le blason
   seul, comme le fait le template avec sa variante compacte. */
.admin-brand-seal{display:none}
@media only screen and (max-width:47.9375rem){
    /* .nav-header reste a 5rem : le template decale .heets de 5rem,
       l elargir chevaucherait la barre du haut. */
    .nav-header .admin-brand-logo{display:none}
    .nav-header .admin-brand-seal{display:block;width:auto;height:52px;max-width:64px;object-fit:contain;background:transparent;border-radius:0}
}
@media only screen and (max-width:35.9375rem){
    .nav-header .admin-brand-seal{height:46px;max-width:58px}
}

/* ---------- recherche et epinglage du portail ---------- */
.portal-intro-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.portal-search{position:relative;display:flex;align-items:center;min-width:290px}
.portal-search>i{position:absolute;left:15px;color:rgba(255,255,255,.65);font-size:13px;pointer-events:none}
.portal-search-input{width:100%;padding:10px 38px 10px 38px;color:#fff;font-size:13.5px;font-weight:500;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;outline:none;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.portal-search-input::placeholder{color:rgba(255,255,255,.62)}
.portal-search-input:focus{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.portal-search-input::-webkit-search-cancel-button{display:none}
.portal-search-clear{position:absolute;right:11px;display:grid;place-items:center;width:22px;height:22px;padding:0;color:#fff;font-size:17px;line-height:1;background:rgba(255,255,255,.2);border:0;border-radius:50%;cursor:pointer;transition:background .2s ease}
.portal-search-clear:hover{background:rgba(255,255,255,.38)}

.portal-no-result{display:flex;align-items:center;gap:14px;margin-bottom:26px;padding:22px 24px;color:#46556a;background:rgba(255,255,255,.62);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);border:1px dashed rgba(255,255,255,.75);border-radius:16px}
.portal-no-result i{color:#8a99ab;font-size:20px}

/* Le bouton d'epinglage vit HORS de la carte : une carte ouverte est un
   lien <a>, et imbriquer un bouton dans un lien est invalide. */
.portal-card-wrap{position:relative}
.portal-pin-form{position:absolute;top:12px;right:24px;z-index:3;margin:0;line-height:0}
.portal-pin{display:grid;place-items:center;width:34px;height:34px;padding:0;color:#9aa7b6;font-size:13px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);border-radius:50%;cursor:pointer;opacity:0;transform:translateY(-4px) rotate(-28deg);transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.5,.5,1),color .25s ease,background .25s ease,box-shadow .25s ease}
.portal-card-wrap:hover .portal-pin,.portal-pin:focus-visible{opacity:1;transform:translateY(0) rotate(-28deg)}
.portal-pin:hover{color:var(--emairie-primary);background:#fff;box-shadow:0 6px 16px rgba(27,42,64,.16);transform:translateY(-2px) rotate(0)}
.portal-pin.is-pinned{opacity:1;color:#fff;background:linear-gradient(135deg,#f3a64a,#f7c278);border-color:rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(243,166,74,.4);transform:translateY(0) rotate(0)}
.portal-pin.is-pinned:hover{color:#fff;background:linear-gradient(135deg,#e2912f,#f3a64a)}

/* La section des epingles se distingue par un accent dore. */
.portal-section-pinned .portal-section-bar{background:linear-gradient(180deg,var(--emairie-gold),#f7cf9b)}
.portal-section-pinned .portal-section-head h3 i{color:var(--emairie-gold)}

@media (max-width:575px){.portal-search{min-width:100%}.portal-intro-tools{width:100%}.portal-pin{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.portal-pin{opacity:1;transform:none;transition:none}}

/* ---------- portrait du Maire, en tete du portail ----------
   Remplace le badge « Base partagee » sur la seule page Services.
   Le ratio source (299x452) differe legerement du cadre demande
   (140x226) : object-fit:cover recadre sur les cotes plutot que de
   deformer le portrait. */
.portal-mayor{display:flex;align-items:center;gap:14px;margin:0}
.portal-mayor img{width:140px;height:226px;object-fit:cover;object-position:center top;background:#eef2f7;border:3px solid #fff;border-radius:14px;box-shadow:0 14px 34px rgba(18,50,92,.22)}
.portal-mayor figcaption{color:#1b2a40;font-size:13px;font-weight:800;line-height:1.35;text-align:right}
.portal-mayor figcaption span{display:block;color:#6b7b8d;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
@media (max-width:767px){
    .portal-mayor{gap:10px}
    .portal-mayor img{width:96px;height:155px;border-width:2px;border-radius:11px}
    .portal-mayor figcaption{font-size:12px}
}

/* ---------- titre du portail : revelation en cascade ----------
   Chaque mot monte depuis un masque, une seule fois au chargement.
   L'effet s'arrete ensuite : pas d'animation permanente qui
   concurrencerait le bandeau d'accueil juste en dessous. */
.portal-title{min-width:0}
.portal-eyebrow{display:inline-block;margin:0 0 10px;padding:5px 14px;color:var(--bonoua-green-ink);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(135deg,#e6f4dd,#f6fbf2);border:1px solid #bfe0ab;border-radius:999px;opacity:0;animation:portalEyebrowIn .55s cubic-bezier(.22,1,.36,1) .05s forwards}
@keyframes portalEyebrowIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.portal-heading{position:relative;margin:0;padding-bottom:12px;color:var(--bonoua-green-ink);font-size:clamp(26px,3.2vw,36px);font-weight:800;line-height:1.1;letter-spacing:-.9px}
/* Ondulation continue, facon drapeau au ralenti : chaque lettre suit la
   meme vague, decalee par un retard NEGATIF afin que le mouvement soit
   deja etabli des le premier affichage, sans demarrage en bloc. */
.portal-heading .pw{display:inline-block;white-space:nowrap}
.portal-heading .pl{display:inline-block;transform-origin:50% 100%;animation:portalFlag 4.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -0.14s);will-change:transform}
@keyframes portalFlag{
    0%{transform:translateY(0) rotate(0deg) scaleY(1)}
    20%{transform:translateY(-6px) rotate(-2deg) scaleY(1.03)}
    45%{transform:translateY(1px) rotate(.6deg) scaleY(.995)}
    65%{transform:translateY(6px) rotate(2deg) scaleY(1.03)}
    88%{transform:translateY(-1px) rotate(-.6deg) scaleY(.995)}
    100%{transform:translateY(0) rotate(0deg) scaleY(1)}
}
/* Filet dore qui se deploie sous le titre, apres les mots. */
.portal-heading::after{content:"";position:absolute;bottom:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--bonoua-green) 0%,var(--bonoua-green-bright) 42%,var(--bonoua-gold) 100%);border-radius:999px;animation:portalRuleIn .6s cubic-bezier(.22,1,.36,1) .5s forwards}
@keyframes portalRuleIn{to{width:84px}}

@media (prefers-reduced-motion:reduce){
    .portal-eyebrow{opacity:1;animation:none}
    .portal-heading .pl{transform:none;animation:none}
    .portal-heading::after{width:84px;animation:none}
}
.dashboard-title .module-service-photo{flex-shrink:0;margin-bottom:0;--accent:var(--bonoua-green)}