/* ============================================================
   UFHB — Reproduction locale
   Couleurs de marque : vert #3CA25D / vert foncé #28422E
============================================================ */

/* Police Inter — AUTO-HÉBERGÉE (compatible CSP font-src 'self', aucun appel externe).
   Fichier variable unique par sous-ensemble : couvre tous les poids 100–900.
   Sous-ensembles latin + latin-ext (suffisants pour le français). */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --green:#3CA25D;
  --green-dark:#28422E;
  --green-mid:#356e4a;
  --green-text:#2e7a48;      /* vert « texte » accessible (≈5,3:1 sur blanc) : petits textes/liens verts */
  --green-deep:#004800;     /* vert profond partagé : bandeau haut, chiffres, pied de page */
  --green-light:#E7EEEA;
  --green-tint:#F3F7F4;
  --text:#2b3038;
  --muted:#69727D;
  --white:#fff;
  --line:#e8ede9;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 4px 16px rgba(20,40,28,.06),0 1px 3px rgba(20,40,28,.05);
  --shadow-lg:0 18px 40px rgba(20,40,28,.14);
  --container:1200px;
  --font-display:Georgia,"Times New Roman",serif;
  /* En-tête : dimensions partagées (la barre d'ancres s'y synchronise) */
  --logo-h:78px;            /* hauteur du logo en haut de page */
  --logo-h-scrolled:62px;   /* hauteur du logo une fois défilé */
  --nav-py:8px;             /* marge verticale de la navbar */
  /* Hauteur de l'en-tête une fois défilé = logo + marges + bordure 1px */
  --header-h-scrolled:calc(var(--logo-h-scrolled) + var(--nav-py) * 2 + 1px);
}

*{box-sizing:border-box;margin:0;padding:0}

/* Lien d'évitement (accessibilité clavier) : masqué jusqu'au focus */
.skip-link{position:fixed;top:-60px;left:12px;z-index:2000;background:var(--green-dark);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 10px;font-weight:600;transition:top .2s}
.skip-link:focus{top:0;outline:3px solid var(--green);outline-offset:2px}

/* Défilement doux (ancres) — désactivé si l'utilisateur préfère les animations réduites */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Focus clavier visible et cohérent sur tous les liens/contrôles interactifs */
a:focus-visible,button:focus-visible,input:focus-visible,
.nav-link:focus-visible,.dropdown-item:focus-visible{
  outline:3px solid rgba(60,162,93,.55);outline-offset:2px;border-radius:6px}

/* Les calques décoratifs (motifs, dégradés d'ombrage) ne doivent jamais
   intercepter les clics — sinon fils d'Ariane et boutons deviennent inertes. */
.hero-overlay,.hero::after,.stats::after,.page-hero::after,.page-hero.has-image::before,
.page-hero.has-image::after,.article-hero-overlay,.cta-band::after,
.article-hero.has-hero-photo::before,.article-hero.has-hero-photo::after{pointer-events:none}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  line-height:1.65;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* Garde-fou responsive : médias fluides, pas de débordement horizontal */
img,video,iframe{max-width:100%}
img{height:auto}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.center{text-align:center;margin-top:36px}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:13px 30px;border-radius:50px;font-weight:600;font-size:.98rem;letter-spacing:.2px;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;cursor:pointer}
.btn-primary{background:var(--green-deep);color:var(--white);box-shadow:0 6px 16px rgba(0,72,0,.28)}
.btn-primary:hover{background:var(--green-mid);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,72,0,.3)}
.btn-outline{border:2px solid var(--green);color:var(--green)}
.btn-outline:hover{background:var(--green);color:var(--white);transform:translateY(-2px)}

/* Titres de section */
.section-title{
  /* Titres de section : police Inter (rendu proche de « MESSINA »), centrés, sur toutes les pages */
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:2.2rem;font-weight:700;color:var(--green-dark);
  margin-bottom:38px;position:relative;padding-bottom:16px;letter-spacing:-.3px;
  text-align:center;justify-content:center;-webkit-font-smoothing:antialiased;
}
.section-title::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:56px;height:4px;
  background:linear-gradient(90deg,var(--green),var(--green-mid));border-radius:2px}
/* Décalage d'ancrage pour les titres ciblés par une ancre (#ufr, #programmes…) sous l'en-tête fixe */
.section-title[id]{scroll-margin-top:110px}
.section-title.light{color:var(--white)}
.section-title.light::after{background:rgba(255,255,255,.9)}

/* ---------- Topbar — accès rapides ---------- */
/* z-index > celui de .site-header (50) : sans cela, le menu « Demandes en
   ligne » se déroule SOUS le bandeau blanc collant et reste invisible. */
.topbar{position:relative;z-index:55;font-size:.855rem;color:#d6e6db;letter-spacing:.1px;
  background:linear-gradient(90deg,#16291d 0%,var(--green-deep) 40%,#2d5537 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
/* Filet lumineux en bas de barre : marque la transition vers l'en-tête blanc
   sans ajouter de bordure franche. Décoratif -> jamais cliquable. */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--green),var(--green-mid) 28%,rgba(60,162,93,0) 70%)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;min-height:46px;flex-wrap:wrap;gap:6px}
.topbar a{opacity:.82;transition:background .18s,color .18s,opacity .18s,box-shadow .18s;margin-left:12px}
.topbar a:hover{opacity:1;color:#fff}
.topbar a:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:1px;opacity:1}

/* Réseaux sociaux : pastilles rondes discrètes (dimensions plus bas, § Icônes) */
.social{display:flex;align-items:center;gap:6px}
.social a{margin-left:0}

.quick-links{display:flex;align-items:center;gap:1px;flex-wrap:wrap}
.quick-links a{padding:6px 11px;border-radius:8px;white-space:nowrap;font-weight:500}
.quick-links a .icon{opacity:.72;transition:opacity .18s,color .18s}
.quick-links a:hover{background:rgba(255,255,255,.12)}
.quick-links a:hover .icon{opacity:1;color:#8fe0a8}
/* Action la plus demandée : pastille pleine, détachée du reste de la barre. */
.quick-links a.qc-cta{opacity:1;color:#eafaef;font-weight:600;margin-right:6px;
  padding:5px 15px;border-radius:999px;background:rgba(255,255,255,.1);
  border:1px solid rgba(143,224,168,.38)}
.quick-links a.qc-cta .icon{opacity:1;color:#8fe0a8}
.quick-links a.qc-cta:hover{background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 4px 14px rgba(60,162,93,.42)}
.quick-links a.qc-cta:hover .icon{color:#fff}
/* Dernier lien (Admin) : séparé visuellement comme accès « compte ». */
.quick-links > a:last-child{border-left:1px solid rgba(255,255,255,.16);margin-left:8px;padding-left:14px}
/* Sélecteur de langue : dernier élément de la barre, présenté comme un
   interrupteur segmenté. La langue active est un <span> (non cliquable) pour
   éviter un lien vers la page courante ; le contraste la distingue sans
   dépendre de la couleur seule. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-left:12px;padding:3px;
  border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12)}
.lang-opt{display:inline-block;padding:3px 11px;border-radius:999px;font-weight:700;
  font-size:.78rem;letter-spacing:.4px;line-height:1.25;margin-left:0}
a.lang-opt{opacity:.72;transition:background .2s,opacity .2s,color .2s}
a.lang-opt:hover{opacity:1;background:rgba(255,255,255,.14)}
.lang-opt.is-active{background:#fff;color:var(--green-deep);opacity:1;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* Menu déroulant dans la barre supérieure (ex. « Demandes en ligne ») */
.quick-links .quick-drop .dropdown-toggle{margin-left:0;cursor:pointer}
.quick-links .quick-drop .dropdown-toggle.show{background:rgba(255,255,255,.16);opacity:1;color:#fff}
.quick-links .dropdown-toggle::after{margin-left:5px;vertical-align:middle;transition:transform .2s;opacity:.7}
.quick-links .quick-drop.show .dropdown-toggle::after{transform:rotate(180deg)}
.quick-links .dropdown-menu{font-size:.85rem;padding:6px;border:0;border-radius:12px;
  box-shadow:var(--shadow-lg);min-width:238px;margin-top:6px}
.quick-links .dropdown-menu .dropdown-item{display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:8px;color:var(--text);opacity:1;transition:.15s}
.quick-links .dropdown-menu .dropdown-item:hover,
.quick-links .dropdown-menu .dropdown-item:focus{background:var(--green-tint);color:var(--green-dark)}
.quick-links .dropdown-menu .dropdown-item .icon{color:var(--green);flex-shrink:0}

/* Pastille « en direct » du compteur de visiteurs (pied de page). */
.live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:visits-blink 1.4s ease-in-out infinite}
@keyframes visits-blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.7)}
  50%{opacity:.25;box-shadow:0 0 0 5px rgba(74,222,128,0)}
}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* ---------- Header / Navbar Bootstrap ---------- */
.site-header{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:var(--shadow);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.site-header .navbar{padding:var(--nav-py) 0;transition:padding .3s}

.navbar-brand{display:flex;align-items:center;gap:12px;padding:0;margin:0}
.logo-img{height:var(--logo-h);width:auto;display:block;transition:transform .3s,height .3s}
.site-header.scrolled .logo-img{height:var(--logo-h-scrolled)}
.navbar-brand:hover .logo-img{transform:scale(1.05) rotate(-2deg)}
.logo-mark{background:var(--green);color:#fff;font-weight:800;letter-spacing:1px;padding:10px 14px;border-radius:8px;font-size:1.2rem}
.logo-mark.white{background:#fff;color:var(--green-dark)}
.logo-text{font-size:.9rem;font-weight:600;color:var(--green-dark);line-height:1.2}
.logo-img-footer{height:96px;width:auto;display:block;margin:0 auto 12px}

/* Liens de navigation */
.navbar-nav{gap:4px}
.navbar-nav .nav-link{font-weight:600;font-size:1.05rem;color:var(--text);padding:10px 16px;border-radius:8px;transition:.2s;position:relative}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{color:var(--green)}
.navbar-nav .nav-link.active{color:var(--green)}
/* Soulignement animé sous les onglets (::before ; le ::after porte le chevron Bootstrap) */
.navbar-nav .nav-link::before{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2.5px;
  border-radius:2px;background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.4,.6,.2,1)}
.navbar-nav .nav-link:hover::before,.navbar-nav .nav-link:focus::before,
.navbar-nav .nav-link.active::before{transform:scaleX(1)}
.navbar-nav .dropdown-toggle::after{margin-left:6px;vertical-align:middle;border-top-color:currentColor;transition:transform .2s}
.navbar-nav .dropdown.show>.dropdown-toggle::after{transform:rotate(180deg)}

/* Menu déroulant */
.dropdown-menu{border:0;box-shadow:var(--shadow-lg);border-radius:14px;padding:8px;margin-top:8px;min-width:215px}
.dropdown-item{border-radius:8px;padding:10px 14px;font-weight:500;font-size:.94rem;color:var(--text)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--green-light);color:var(--green)}
.dropdown-item.active,.dropdown-item:active{background:var(--green);color:#fff}
/* Éléments de menu avec icône (Médias, Actualités) */
.navbar-nav .dropdown-menu .dropdown-item{display:flex;align-items:center;gap:10px}
.navbar-nav .dropdown-menu .dropdown-item .icon{color:var(--green);flex-shrink:0;transition:color .15s}
.navbar-nav .dropdown-menu .dropdown-item.active .icon,
.navbar-nav .dropdown-menu .dropdown-item:active .icon{color:#fff}

/* ---------- Méga-menus (Formation, Médias, Demandes en ligne) ----------
   Panneau large en grille : intitulé + description sous chaque entrée.
   Réservé au grand écran ; sous 992px le menu redevient une liste simple
   dans le tiroir mobile (voir plus bas).

   Les sélecteurs ci-dessous sont volontairement à deux classes
   (`.dropdown-menu.mega-menu`) : ils doivent l'emporter sur les réglages
   existants de `.dropdown-menu` ET de `.quick-links .dropdown-menu`, écrits
   plus haut dans ce fichier. */
@media(min-width:992px){
  /* Le panneau s'ancre sur le CONTENEUR, pas sur l'onglet : il reste ainsi
     dans la largeur du site quel que soit l'onglet ouvert, y compris ceux
     proches du bord droit (« Médias », « Demandes en ligne »). */
  .site-header .navbar>.container,
  .topbar .topbar-inner{position:relative}
  .navbar-nav .dropdown.has-mega,
  .quick-links .quick-drop.has-mega{position:static}

  .dropdown-menu.mega-menu{
    position:absolute;top:100%;left:0;right:0;width:auto;min-width:0;
    margin-top:10px;padding:26px 22px 22px;border-radius:18px;
    box-shadow:0 24px 60px rgba(20,40,28,.16),0 2px 8px rgba(20,40,28,.06);
    column-gap:26px;row-gap:2px}
  /* Passerelle invisible comblant la marge entre l'onglet et le panneau :
     sans elle, traverser cet espace coupe le :hover et referme le menu.
     C'est un pseudo-élément du panneau, donc le survoler maintient
     `.dropdown:hover` — le menu reste ouvert le temps de la descente.
     Réservée à la navbar : la barre supérieure s'ouvre au clic, et une
     passerelle y masquerait les liens voisins tant que le menu est ouvert. */
  .navbar-nav .dropdown-menu.mega-menu::after{
    content:"";position:absolute;left:0;right:0;top:-26px;height:26px}
  /* Panneau resserré et calé à droite pour les menus courts. */
  .dropdown-menu.mega-menu.mega-end{left:auto;width:min(680px,100%)}
  .dropdown-menu.mega-menu.mega-end-lg{left:auto;width:min(760px,100%)}
  /* Bootstrap bascule display:none/block ; la grille doit donc être posée
     sur les mêmes états, sinon le panneau reste visible en permanence. */
  .dropdown-menu.mega-menu.show,
  .navbar-nav .dropdown:hover>.dropdown-menu.mega-menu{display:grid}
  .dropdown-menu.mega-2{grid-template-columns:repeat(2,1fr)}
  .dropdown-menu.mega-3{grid-template-columns:repeat(3,1fr)}

  /* Filet d'accent en haut du panneau (vert -> or, les deux couleurs du site) */
  .dropdown-menu.mega-menu::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    border-radius:18px 18px 0 0;
    background:linear-gradient(90deg,var(--green),var(--green-mid) 45%,#B8862B)}

  .mega-intro{grid-column:1/-1;color:var(--muted);font-size:.92rem;line-height:1.5;
    padding:0 14px 14px;margin-bottom:8px;border-bottom:1px solid var(--line)}

  .dropdown-menu.mega-menu .dropdown-item{
    align-items:flex-start;gap:14px;padding:13px 14px;border-radius:12px;
    white-space:normal;transition:background .18s,transform .18s}
  .dropdown-menu.mega-menu .dropdown-item .icon{margin-top:2px;color:var(--green)}
  .dropdown-menu.mega-menu .dropdown-item:hover,
  .dropdown-menu.mega-menu .dropdown-item:focus{background:var(--green-tint)}
  .mi-text{display:block;min-width:0}
  .mi-title{display:block;font-weight:700;font-size:.97rem;line-height:1.3;color:var(--green-dark)}
  .mi-desc{display:block;font-size:.83rem;line-height:1.45;color:var(--muted);margin-top:3px;font-weight:400}
  .mega-item:hover .mi-title,.mega-item:focus .mi-title{color:var(--green-text)}
  /* Entrée active : pastille verte pleine -> textes et icône en blanc. */
  .dropdown-menu.mega-menu .dropdown-item.active .mi-title,
  .dropdown-menu.mega-menu .dropdown-item.active .mi-desc{color:#fff}
  .dropdown-menu.mega-menu .dropdown-item.active{background:var(--green)}
}
/* Tiroir mobile : ni panneau, ni descriptions — on garde une liste courte. */
@media(max-width:991.98px){
  .mega-intro{display:none}
  .mi-desc{display:none}
  .mi-title{font-weight:500}
}
@media(prefers-reduced-motion:reduce){
  .dropdown-menu.mega-menu .dropdown-item{transition:none}
}

/* Bouton hamburger */
.navbar-toggler{border:0;padding:4px 6px;color:var(--green-dark);line-height:0}
.navbar-toggler:focus{box-shadow:none;outline:none}
.navbar-toggler .icon{display:block}

/* Ouverture du dropdown au survol sur grand écran */
@media(min-width:992px){
  .navbar-nav .dropdown:hover>.dropdown-menu{display:block}
  .navbar-nav .dropdown:hover>.dropdown-toggle::after{transform:rotate(180deg)}
}
/* Menu déroulant intégré dans le menu mobile */
@media(max-width:991.98px){
  .navbar-collapse{background:#fff;border-radius:14px;padding:12px;margin-top:10px;box-shadow:var(--shadow)}
  .dropdown-menu{box-shadow:none;padding-left:14px;margin-top:0}
  /* Sur mobile : on garde le fond « pilule » (meilleure zone tactile), pas de soulignement. */
  .navbar-nav .nav-link::before{display:none}
  .navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus,.navbar-nav .nav-link.active{background:var(--green-light)}
}
@media(prefers-reduced-motion:reduce){
  .navbar-nav .nav-link::before{transition:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:580px;display:flex;align-items:center;
  background:linear-gradient(125deg,#2c4d37 0%,#356e4a 42%,#3CA25D 100%);color:#fff;overflow:hidden}
.hero-overlay{position:absolute;inset:0;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.16),transparent 55%),
    radial-gradient(circle at 12% 90%,rgba(255,255,255,.08),transparent 45%)}
.hero::after{content:"";position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);background-size:22px 22px}
.hero-content{position:relative;max-width:760px;padding:60px 24px}
.hero-akwaba{display:inline-block;font-size:.8rem;letter-spacing:5px;font-weight:700;
  padding:8px 18px;border:1px solid rgba(255,255,255,.35);border-radius:50px;margin-bottom:22px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(2px)}
.hero h1,.hero h2{font-family:var(--font-display);font-size:3.7rem;line-height:1.08;margin-bottom:22px;
  font-weight:700;letter-spacing:-.5px;text-shadow:0 2px 20px rgba(0,0,0,.15)}
.hero .btn{background:#fff;color:var(--green-dark);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.hero .btn:hover{background:var(--green-light);transform:translateY(-2px)}

/* ---------- Hero carousel Bootstrap ---------- */
.hero-carousel .hero{min-height:580px}
/* Dégradés distincts par diapositive */
.hero-slide-1{background:linear-gradient(125deg,#2c4d37 0%,#356e4a 42%,#3CA25D 100%)}
.hero-slide-2{background:linear-gradient(125deg,#2f5540 0%,#3a7d54 55%,#4bb56c 100%)}
.hero-slide-3{background:linear-gradient(125deg,#2c4d37 0%,#2f5d6b 55%,#3CA25D 100%)}
/* Image de fond réelle (repli sur le dégradé si absente) */
/* L'image est posée par --hero-bg (variable écrite en ligne par hero_style()).
   La variante `.home .hero.has-bg` n'est pas redondante : elle doit l'emporter
   sur `.home .hero-slide-N` (refonte de l'accueil, plus bas dans ce fichier),
   dont le `background` RACCOURCI remettrait background-image à none. Une image
   posée en ligne gagnait d'office ; une variable, non — c'est la cascade qui
   tranche. */
.hero.has-bg,
.home .hero.has-bg{background-image:var(--hero-bg);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* Sous 600 px la bande devient verticale (≈ 390 × 460) : on bascule sur la
   variante portrait quand elle existe, sinon on garde l'image paysage. */
@media(max-width:600px){
  .hero.has-bg,
  .home .hero.has-bg{background-image:var(--hero-bg-m,var(--hero-bg))}
}
.hero.has-bg .hero-overlay{background:
  linear-gradient(100deg,rgba(16,30,21,.9) 0%,rgba(28,50,36,.62) 48%,rgba(40,66,46,.32) 100%),
  linear-gradient(to top,rgba(14,26,19,.5),transparent 42%)}
/* Indicateurs */
.hero-carousel .carousel-indicators{margin-bottom:26px;z-index:6}
.hero-carousel .carousel-indicators [data-bs-target]{width:34px;height:5px;border-radius:5px;
  border:0;background:rgba(255,255,255,.5);transition:.3s;opacity:1}
.hero-carousel .carousel-indicators .active{background:#fff;width:46px}
/* Contrôles précédent / suivant */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{width:6%;opacity:.7;transition:opacity .2s;z-index:6}
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover{opacity:1}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon{width:2.4rem;height:2.4rem;padding:12px;border-radius:50%;
  background-color:rgba(255,255,255,.15);background-size:1.1rem}
/* Transition de fondu douce entre les slides */
.hero-carousel .carousel-item{transition:transform .8s ease,opacity .8s ease}
/* Indicateur de défilement (chevron animé) */
.hero-scroll{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);z-index:6;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);backdrop-filter:blur(2px);
  transition:background .2s,border-color .2s;animation:heroScrollBob 2s ease-in-out infinite}
.hero-scroll:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hero-scroll-chevron{width:12px;height:12px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:translateY(-2px) rotate(45deg)}
@keyframes heroScrollBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
@media(max-width:600px){.hero-scroll{bottom:52px;width:38px;height:38px}
  /* Sur mobile : flèches précédent/suivant masquées (indicateurs + balayage suffisent, évite le chevauchement du texte) */
  .hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next{display:none}}
@media(prefers-reduced-motion:reduce){.hero-scroll{animation:none}}

/* ---------- Agenda ---------- */
.agenda{padding:96px 0;background:var(--white)}
.agenda-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.agenda-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.agenda-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--green),var(--green-mid));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.agenda-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.agenda-card:hover::before{transform:scaleX(1)}
.agenda-date{color:var(--green-text);font-weight:700;margin-bottom:14px;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}
.agenda-date span{display:block;font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--green-dark);letter-spacing:-1px}
.badge-cat{display:inline-flex;align-items:center;gap:5px;background:var(--green-light);color:var(--green-dark);border:1px solid rgba(60,162,93,.18);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:5px 12px;border-radius:50px;margin-bottom:12px}
.badge-cat .icon{color:var(--green)}
.agenda-card h3{font-size:1.02rem;color:var(--text);line-height:1.4}
/* Heure : pastille « outline » sur sa propre ligne, contraste avec le badge catégorie (plein) */
.agenda-time{display:flex;width:fit-content;align-items:center;gap:6px;margin:2px 0 12px;padding:3px 11px;background:#fff;border:1px solid var(--line);border-radius:50px;color:var(--text);font-size:.76rem;font-weight:700;letter-spacing:.2px}
.agenda-time .icon{color:var(--green)}
.agenda-card.is-past .agenda-time{color:#8a8f8c}
.agenda-card.is-past .agenda-time .icon{color:#a7aca8}
/* Statut d'un évènement (à venir / terminé) */
.agenda-status{position:absolute;top:14px;right:14px;z-index:1;font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.5px;line-height:1;padding:4px 10px;border-radius:50px}
.agenda-status.is-upcoming{background:var(--green);color:#fff;box-shadow:0 3px 9px rgba(60,162,93,.32)}
.agenda-status.is-past{background:#eef0ef;color:#8a8f8c}
/* Évènement en cours (multi-jours) : ambre + pastille « live » pulsée */
.agenda-status.is-live{background:#f59e0b;color:#fff;box-shadow:0 3px 9px rgba(245,158,11,.35);
  display:inline-flex;align-items:center;gap:5px}
.agenda-status.is-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.85);animation:newDot 1.5s ease-out infinite}
@media(prefers-reduced-motion:reduce){.agenda-status.is-live::before{animation:none}}
/* Évènement déjà passé : carte estompée + bandeau supérieur gris */
.agenda-card.is-past{opacity:.72}
.agenda-card.is-past:hover{opacity:1}
.agenda-card.is-past .agenda-date span{color:#6f746f}
.agenda-card.is-past::before{background:linear-gradient(90deg,#c7ccc8,#e2e6e3)}

/* ---------- Stats ---------- */
.stats{padding:90px 0 48px;color:#fff;position:relative;overflow:hidden;background:var(--green-deep)}
/* Décor de fond : halos lumineux, éclat vert et anneaux ornementaux (derrière le contenu) */
.stats::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.16),transparent 42%),
    radial-gradient(circle at 88% 84%,rgba(140,244,176,.28),rgba(120,224,158,.12) 30%,transparent 52%),
    radial-gradient(circle at 80% 10%,transparent 96px,rgba(255,255,255,.08) 97px 100px,transparent 101px),
    radial-gradient(circle at 6% 90%,transparent 74px,rgba(255,255,255,.06) 75px 78px,transparent 79px)}
.stats .container{position:relative;z-index:1}
.stats::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1px);background-size:22px 22px}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;text-align:center}
.stat-num{display:block;font-family:var(--font-display);font-size:2.9rem;font-weight:700;line-height:1;letter-spacing:-1px}
.stat-label{opacity:.82;font-size:.92rem;margin-top:2px}

/* ---------- Community ---------- */
.community{padding:96px 0;background:var(--green-tint)}
.community-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.person-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-align:center;padding-bottom:26px;transition:transform .25s,box-shadow .25s}
.person-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.person-photo{height:280px;background-size:cover;background-position:top center;position:relative}
.person-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(40,66,46,.35),transparent 45%)}
/* Cartes de directeurs : cadre soigné + cadrage haut cohérent */
.person-photo.person-photo-portrait{height:320px;background-position:center top;background-color:#ece7db}
.person-photo.person-photo-portrait::after{content:none}
.dir-card{border-color:#e4dfd2;box-shadow:0 6px 18px rgba(40,66,46,.08)}
.dir-card .person-photo{border-bottom:3px solid var(--green)}
.dir-card h3{font-size:1.02rem;margin-top:16px}
.dir-card p{font-size:.86rem}
.ph-1{background-image:linear-gradient(135deg,#3CA25D,#28422E)}
.ph-2{background-image:linear-gradient(135deg,#4a7a8c,#28422E)}
.ph-3{background-image:linear-gradient(135deg,#8c6a4a,#28422E)}
.person-card h3{margin:20px 22px 8px;color:var(--green-dark);font-size:1.1rem}
.person-card p{color:var(--muted);font-size:.9rem;padding:0 22px;line-height:1.5}

/* ---------- News ---------- */
.news{padding:48px 0 96px}
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.news-img{height:180px;background-size:cover;background-position:center;transition:transform .4s}
/* Images de type « affiche » : montrées en entier, sans rognage */
.news-img.fit-contain{background-size:contain;background-repeat:no-repeat;background-color:#eef1ef}
.news-card:hover .news-img{transform:scale(1.05)}
.news-card:hover .news-img.fit-contain{transform:none}
.news-img-link{display:block;overflow:hidden}
/* Zone média + bouton d'aperçu rapide */
.news-media{position:relative;overflow:hidden}
.quick-view{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;
  border:0;cursor:pointer;background:rgba(255,255,255,.92);color:var(--green-dark);
  font-size:.78rem;font-weight:600;padding:7px 12px;border-radius:50px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s,background .2s}
.news-card:hover .quick-view{opacity:1;transform:translateY(0)}
.quick-view:hover{background:var(--green);color:#fff}
.quick-view:focus-visible{opacity:1;transform:none;outline:none;box-shadow:0 0 0 3px rgba(60,162,93,.35)}
@media(hover:none){.quick-view{opacity:1;transform:none}}
/* Badge « New » sur les actualités de moins d'une semaine (pastille « live » pulsée + apparition) */
.news-badge-new{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#ff5a5a,#e01b1b);color:#fff;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.7px;padding:5px 11px 5px 10px;border-radius:50px;
  box-shadow:0 3px 10px rgba(214,31,31,.4),0 0 0 2px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.25);
  pointer-events:none;transform-origin:left center;animation:newPop .55s cubic-bezier(.2,.9,.3,1.5) both}
.news-badge-new::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.9);animation:newDot 1.5s ease-out infinite}
@keyframes newDot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@keyframes newPop{0%{opacity:0;transform:scale(.55) translateY(-4px)}60%{opacity:1}100%{opacity:1;transform:none}}
.news-featured-media .news-badge-new{top:16px;left:16px;font-size:.72rem;padding:6px 14px 6px 11px}
@media(prefers-reduced-motion:reduce){.news-badge-new,.news-badge-new::before{animation:none}}
.ni-1{background-image:linear-gradient(135deg,#3CA25D,#28422E)}
.ni-2{background-image:linear-gradient(135deg,#356e4a,#8fbf9f)}
.ni-3{background-image:linear-gradient(135deg,#28422E,#4a7a8c)}
.ni-4{background-image:linear-gradient(135deg,#3CA25D,#356e4a)}
/* Article « À la une » (mise en avant magazine) */
.news-featured{display:grid;grid-template-columns:1.15fr 1fr;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:34px;
  transition:transform .25s,box-shadow .25s}
.news-featured:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news-featured-media{position:relative;display:block;overflow:hidden;min-height:300px}
.news-featured-media .news-img{height:100%;min-height:300px}
.news-featured:hover .news-featured-media .news-img{transform:scale(1.04)}
.news-featured:hover .news-featured-media .news-img.fit-contain{transform:none}
.news-featured-media .news-img.fit-contain{background-color:#f4f6f5}
.news-featured-body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.news-featured-body h3{font-family:var(--font-display);font-size:1.85rem;line-height:1.25;color:var(--green-dark);margin:14px 0 14px}
.news-featured-body h3 a{transition:.2s}
.news-featured-body h3 a:hover{color:var(--green)}
.news-featured-body p{color:var(--muted);line-height:1.7;margin-bottom:22px}
.news-featured-body .btn{align-self:flex-start}
.badge-featured{background:var(--green);color:#fff;align-self:flex-start}
.badge-featured .icon{color:#fff}
@media(max-width:768px){
  .news-featured{grid-template-columns:1fr}
  .news-featured-media,.news-featured-media .news-img{min-height:220px}
  .news-featured-body{padding:28px 24px}
  .news-featured-body h3{font-size:1.45rem}
}

/* Compteur d'actualités */
.news-count{color:var(--muted);font-size:.92rem;margin:-6px 0 26px}
.news-count strong{color:var(--green-dark)}

.news-body{padding:22px;display:flex;flex-direction:column;flex:1}
/* Date de publication : petite ligne méta au-dessus du titre (cartes + à la une) */
.news-date{display:flex;width:fit-content;align-items:center;gap:5px;color:var(--muted);font-size:.76rem;font-weight:600;margin-bottom:9px}
.news-date .icon{color:var(--green)}
.news-featured-body .news-date{margin:2px 0 12px}
.news-body h3{font-size:1.08rem;color:var(--green-dark);margin-bottom:10px;line-height:1.35}
.news-body p{color:var(--muted);font-size:.9rem;flex:1;line-height:1.6}
.read-more{color:var(--green-text);font-weight:600;margin-top:16px;font-size:.9rem}

/* ---------- Footer enrichi ---------- */
.site-footer{background:var(--green-deep);color:#e6f2e8;
  border-top:3px solid #023200}

/* Bandeau supérieur : contact + newsletter */
.footer-top{border-bottom:1px solid rgba(255,255,255,.1)}
.footer-top-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;padding:30px 24px}
.footer-top h4{color:#fff;font-size:1.1rem;margin-bottom:16px}
/* Même retrait fantôme de Bootstrap que sur .footer-col ul (voir plus bas) :
   sans remise à zéro, la liste de contacts est décalée de 32 px et ne
   s'aligne plus sur son titre « Nous contacter ». */
.footer-contact-list{list-style:none;display:grid;gap:14px;padding-left:0}
.footer-contact-list li{display:flex;align-items:center;gap:12px;font-size:.92rem;opacity:.9}
.footer-contact-list a{color:inherit;transition:.2s}
.footer-contact-list a:hover{color:#fff}
.fc-ic{flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border-radius:50%;color:#8fbf9f}
.footer-news p{opacity:.85;font-size:.92rem;margin-bottom:14px}
.footer-news-msg{display:inline-block;font-size:.88rem;padding:9px 14px;border-radius:8px;margin-bottom:14px;opacity:1}
.footer-news-msg.success{background:rgba(75,181,108,.2);color:#bfe9cd;border:1px solid rgba(75,181,108,.4)}
.footer-news-msg.info{background:rgba(255,255,255,.12);color:#e6efe9;border:1px solid rgba(255,255,255,.2)}
.footer-news-msg.error{background:rgba(224,61,61,.18);color:#f3c0c0;border:1px solid rgba(224,61,61,.4)}
.footer-news-field{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);border-radius:50px;padding:5px 6px 5px 16px;max-width:400px}
.footer-news-field .icon{color:#8fbf9f;flex-shrink:0}
.footer-news-field input{flex:1;background:none;border:0;color:#fff;font-size:.92rem;padding:8px 0;font-family:inherit}
.footer-news-field input::placeholder{color:rgba(255,255,255,.55)}
.footer-news-field input:focus{outline:none}
.footer-news-field button{flex-shrink:0;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s}
.footer-news-field button:hover{background:#4bb56c;transform:translateX(2px)}

/* Colonnes de liens */
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px;padding:34px 24px}
.footer-brand{text-align:center}
.footer-brand p{margin:18px 0;font-size:.9rem;opacity:.82;line-height:1.6}
.footer-brand p.footer-brand-name{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;letter-spacing:.5px;line-height:1.3;color:#fff;opacity:1;text-transform:uppercase;
  margin:0 0 10px}
.footer-brand p.footer-slogan{display:block;font-family:var(--font-display);font-style:italic;
  font-size:1.1rem;line-height:1.45;color:#7fce9a;opacity:1;margin:0 auto;max-width:360px}
.footer-social{margin-top:16px;display:flex;gap:10px}
.footer-social a{opacity:.95}
.footer-col h4{color:#fff;margin-bottom:18px;font-size:.85rem;text-transform:uppercase;letter-spacing:1px}
/* Bootstrap applique `ol, ul { padding-left: 2rem }`. Ce sélecteur d'élément
   (0,0,1) l'emporte sur le `*{padding:0}` du haut de ce fichier (0,0,0), quel
   que soit l'ordre de chargement. Sans cette remise à zéro, les listes du pied
   de page héritent d'un retrait de 32 px : les liens ne s'alignent plus sur
   leur titre, et il ne reste que 148 px utiles dans une colonne de 180 px,
   ce qui coupe « Stratégie / Grands projets » et « Insertion Professionnelle »
   sur deux lignes. */
.footer-col ul{list-style:none;padding-left:0}
.footer-col li{margin-bottom:11px}
.footer-col a{font-size:.9rem;opacity:.82;transition:.2s;display:inline-block}
.footer-col a:hover{opacity:1;color:#fff;transform:translateX(4px)}

/* Filets verticaux entre les colonnes du pied de page.
   `column-rule` ne s'applique qu'au multi-colonnes, pas à la grille : on passe
   donc par un pseudo-élément, décalé d'une demi-gouttière (gap:36px -> -18px)
   pour tomber pile au milieu de l'espace entre deux colonnes.
   Réservé au palier à 5 colonnes : en dessous, la grille repasse à 2 puis 1
   colonne et un filet « à gauche de chaque colonne sauf la première » se
   retrouverait plaqué au bord gauche des éléments de première colonne. */
@media(min-width:993px){
  .footer-col{position:relative}
  .footer-col::before{
    content:"";position:absolute;left:-18px;top:0;bottom:0;width:1px;
    background:rgba(255,255,255,.18)}
}

/* Barre inférieure */
.footer-bottom{background:rgba(0,0,0,.2);padding:16px 0;font-size:.85rem}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.footer-copy{flex:1 1 320px}
.footer-bottom-links{display:flex;align-items:center;gap:20px}

/* Compteur de visiteurs (barre inférieure du pied de page).
   Le total est calculé une fois par visiteur et par jour (voir track_visit()). */
/* Gabarit contraint : la pastille doit tenir DANS la hauteur de ligne de la
   barre (celle du bloc copyright, ~26 px), sinon l'ajout du compteur rallonge
   le pied de page. D'où le line-height resserré et le padding vertical de 1 px. */
.footer-visits{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:default;
  padding:1px 12px;line-height:1.35;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(143,191,159,.28);transition:background .2s,border-color .2s}
.footer-visits:hover{background:rgba(255,255,255,.12);border-color:rgba(143,191,159,.5)}
.footer-visits .icon{color:#8fbf9f;opacity:.9}
.footer-visits strong{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.footer-bottom a{color:#8fbf9f;transition:.2s}
.footer-bottom a:hover{color:#fff}
.srit-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:20px;font-weight:700;
  color:#dff0e6 !important;background:rgba(255,255,255,.1);border:1px solid rgba(143,191,159,.5);
  vertical-align:baseline;transition:.2s}
.srit-badge:hover{color:#fff !important;background:var(--green);border-color:var(--green)}
.srit-badge .icon{opacity:.9}
/* Cellules du SRIT (accordéons) */
.srit-cell{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.srit-cell>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 20px;
  font-size:1.02rem;color:var(--green-dark);transition:.15s}
.srit-cell>summary::-webkit-details-marker{display:none}
.srit-cell>summary:hover{background:var(--green-tint)}
.srit-cell-ic{flex-shrink:0;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:var(--green);border-radius:9px}
.srit-cell-caret{margin-left:auto;color:var(--green);font-size:.85rem;transition:transform .2s}
.srit-cell[open]>summary .srit-cell-caret{transform:rotate(180deg)}
.srit-cell-body{padding:6px 22px 20px;border-top:1px solid var(--line)}
.srit-cell-body>p{color:var(--muted);margin:14px 0 0;line-height:1.6}
.srit-attr{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:11px}
.srit-attr li{line-height:1.6;color:var(--muted)}
.srit-attr li::marker{color:var(--green);font-weight:700}
.srit-attr strong{color:var(--green-dark)}
.srit-cell-note{margin-top:14px !important;padding:12px 14px;background:var(--green-tint);border-left:3px solid var(--green);
  border-radius:6px;font-size:.92rem;color:var(--text)}

@media(max-width:900px){
  .footer-top-grid{grid-template-columns:1fr;gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom-inner{justify-content:center;text-align:center}
  .footer-copy{flex:1 1 100%}
}

/* ---------- Pages secondaires ---------- */
.page-hero{background:var(--green-deep);color:#fff;padding:92px 0 84px;position:relative;overflow:hidden;
  border-bottom:4px solid transparent;border-image:linear-gradient(90deg,var(--green),var(--green-mid),var(--green)) 1}
.page-hero::after{content:"";position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(#fff 1px,transparent 1px);background-size:22px 22px}
.page-hero .container{position:relative}
/* Tous les bandeaux de page : titre au même cadrage responsive que l'article */
.page-hero h1{font-family:var(--font-display);font-size:clamp(1.9rem,5.5vw,2.6rem);margin-bottom:14px;letter-spacing:-.5px;
  animation:pageHeroIn .7s cubic-bezier(.2,.7,.2,1) both}
.page-hero p{opacity:.92;font-size:1.15rem;max-width:640px;
  animation:pageHeroIn .7s cubic-bezier(.2,.7,.2,1) .12s both}
@keyframes pageHeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .page-hero h1,.page-hero p,.page-hero.has-image{animation:none}
}
.page-body{padding:76px 0}
.page-body p{margin-bottom:20px}
.page-body .section-title{margin-top:40px}
.page-body .section-title:first-child{margin-top:0}

.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.content-aside{background:var(--green-light);border-radius:var(--radius);padding:26px;height:fit-content}
.content-aside h3{color:var(--green-dark);margin-bottom:14px}
/* padding-left:0 — neutralise le `ol, ul { padding-left: 2rem }` de Bootstrap,
   qui bat le `*{padding:0}` du haut de ce fichier (sélecteur d'élément 0,0,1
   contre universel 0,0,0). Sans ça, les items sont décalés de 32 px vers la
   droite alors que la liste, elle, s'aligne sur son titre. Voir aussi
   .footer-col ul, .footer-contact-list et les autres listes sans puces. */
.content-aside ul{list-style:none;padding-left:0}
.content-aside li{padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.bullets{margin:0 0 20px 20px}
.bullets li{margin-bottom:8px}

/* Bandeau avec image de fond réelle */
.page-hero.has-image{background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:heroPan 26s ease-in-out infinite alternate}
/* Voile dégressif : sombre à gauche (lisibilité du texte), clair à droite (image visible) */
.page-hero.has-image::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(22,38,27,.86) 0%,rgba(28,60,42,.5) 46%,rgba(45,100,66,.24) 100%)}
/* Léger renfort en bas pour ancrer l'image et adoucir la bordure */
.page-hero.has-image::after{opacity:1;background:none;
  box-shadow:inset 0 -60px 70px -30px rgba(18,32,23,.55)}
.page-hero.has-image .container{position:relative;z-index:1}
/* Harmonisation en vert d'un hero à image froide (ex. Recherche, image bleue) */
.page-hero.has-image.hero-tint-green::before{
  background:linear-gradient(100deg,rgba(16,46,28,.90) 0%,rgba(26,80,48,.70) 45%,rgba(44,118,70,.54) 100%)}
.page-hero.has-image.hero-tint-green{background-color:#163a22}
.page-hero.has-image h1,.page-hero.has-image .breadcrumb-hero{text-shadow:0 2px 14px rgba(0,0,0,.4)}
.page-hero.has-image p{text-shadow:0 1px 10px rgba(0,0,0,.38)}

/* Figure illustrative */
.uni-figure{margin:0 0 26px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.uni-figure img{width:100%;height:auto;display:block;max-height:340px;object-fit:cover}
.uni-figure figcaption{padding:11px 16px;font-size:.85rem;color:var(--muted);background:var(--green-tint)}

/* Portrait dans l'encadré du président */
.gov-avatar.has-photo{padding:0;overflow:hidden}
.gov-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:50%}

/* Page Université — navigation par ancres + sections */
.page-nav{background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  position:sticky;top:var(--header-h-scrolled);z-index:20;box-shadow:0 4px 14px rgba(20,40,28,.04)}
.page-nav-inner{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin}
.page-nav a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:15px 11px;
  font-weight:600;font-size:.9rem;color:var(--muted);border-bottom:3px solid transparent;transition:.2s}
.page-nav a .icon{opacity:.7;transition:.2s}
.page-nav a:hover{color:var(--green)}
.page-nav a:hover .icon{opacity:1}
.page-nav a.active{color:var(--green);border-bottom-color:var(--green)}
.page-nav a.active .icon{opacity:1}

.uni-section{padding-top:40px;margin-bottom:52px;scroll-margin-top:150px}
.uni-section:first-child{padding-top:0}

/* Présentation générale : UFR & instituts rattachés */
.pres-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:12px}
.pres-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--green-tint);
  border:1px solid var(--line);border-radius:var(--radius-sm);transition:.2s}
.pres-item:hover{border-color:var(--green);box-shadow:var(--shadow)}
.pres-tag{flex-shrink:0;min-width:66px;text-align:center;font-weight:700;font-size:.76rem;letter-spacing:.4px;
  color:#fff;background:var(--green);padding:6px 8px;border-radius:6px}
.pres-name{line-height:1.3;font-size:.95rem}
a.pres-item{text-decoration:none;color:inherit}
a.pres-item:hover{border-color:var(--green);box-shadow:var(--shadow)}
a.pres-item:hover .pres-tag{background:var(--green-dark)}
.pres-site{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:600;color:var(--green-dark);background:var(--green-tint);
  border:1px solid var(--green);padding:4px 9px;border-radius:20px;transition:.2s}
a.pres-item:hover .pres-site{background:var(--green);color:#fff}
.pres-site .icon:last-child{transition:transform .2s}
a.pres-item:hover .pres-site .icon:last-child{transform:translateX(3px)}

/* Instituts & centres rattachés — panneaux regroupés par UFR de tutelle */
.rattaches-ufr{display:flex;flex-direction:column;gap:20px;margin-bottom:16px}
.ufr-groupe{background:#e9f4ee;border:1px solid #c3ddcc;border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .25s,transform .25s}
.ufr-groupe:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
/* En-tête bannière du panneau : pastille sigle + intitulé + compteur */
.ufr-groupe-titre{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0;
  padding:15px 20px;background:#a9d7b7;border-bottom:1px solid #8ec5a1}
.ufr-groupe-sigle{flex-shrink:0;font-weight:800;font-size:.92rem;letter-spacing:.6px;color:#fff;
  background:var(--green-dark);padding:7px 13px;border-radius:8px;box-shadow:0 2px 6px rgba(40,66,46,.22)}
.ufr-groupe-nom{font-size:1.18rem;font-weight:700;color:var(--green-dark);line-height:1.25}
.ufr-groupe-compte{flex-shrink:0;margin-left:auto;font-size:.72rem;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--green-dark);background:#fff;border:1px solid var(--green);
  padding:5px 12px;border-radius:50px;white-space:nowrap}
/* Grille de cartes à l'intérieur du panneau (police agrandie, disposition verticale) */
.ufr-groupe .pres-grid-lg{padding:16px 18px 18px;margin:0;gap:12px}
.pres-grid-lg .pres-item{flex-direction:column;align-items:stretch;padding:15px 18px;gap:12px;background:#cfe6d7;border-color:#b3d6c1}
.pres-grid-lg .pres-item:hover{background:#fff}
.pres-grid-lg .pres-main{display:flex;align-items:center;gap:15px}
.pres-grid-lg .pres-tag{min-width:78px;font-size:.9rem;padding:7px 11px}
.pres-grid-lg .pres-name{font-size:1.08rem;line-height:1.35}
/* Badge « Site web » ancré en bas de la carte */
.pres-grid-lg .pres-site{align-self:flex-start;margin-left:0;margin-top:auto;font-size:.8rem;padding:5px 11px}
@media(max-width:600px){
  .ufr-groupe-titre{gap:9px;padding:13px 15px}
  .ufr-groupe-nom{font-size:1.04rem}
  .ufr-groupe-compte{margin-left:0}
  .pres-grid-lg .pres-name{font-size:1rem}
}

/* Programmes de formation (accordéons + tableaux) */
.prog-domaine{display:flex;align-items:center;gap:9px;color:var(--green-dark);font-size:1.15rem;
  margin:30px 0 14px;padding-left:12px;border-left:3px solid var(--green)}
.prog-domaine .icon{color:var(--green);flex-shrink:0}
.prog-details{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;background:#fff;overflow:hidden}
.prog-details>summary{cursor:pointer;list-style:none;padding:14px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;background:var(--green-tint);color:var(--green-dark);font-weight:600}
.prog-details>summary::-webkit-details-marker{display:none}
.prog-details>summary::after{content:"";width:9px;height:9px;flex-shrink:0;border-right:2px solid var(--green);
  border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .25s;margin-left:auto}
.prog-details[open]>summary::after{transform:rotate(-135deg)}
.prog-details[open]>summary{border-bottom:1px solid var(--line)}
.prog-grade{flex:1}
.prog-count{flex-shrink:0;font-weight:600;font-size:.76rem;color:#fff;background:var(--green);
  padding:3px 11px;border-radius:50px}
.prog-table td{font-size:.92rem;vertical-align:middle}
/* --- Tableaux de programmes : rendu structuré par groupes fusionnés --- */
.prog-table th,.prog-table td{padding:12px 16px}
.prog-table th[scope="row"],.prog-table td[rowspan]{vertical-align:middle}
/* Zébrage par ligne désactivé : le remplissage se fait par bande d'UFR (ci-dessous) */
.data-table.prog-table tbody tr:nth-child(even){background:transparent}
/* Remplissage par UFR : alternance vert / blanc, une bande par UFR consécutive
   (classes ufr-band-a / ufr-band-b posées par main.js). Toute la ligne est
   colorée, colonne « Mention » comprise. */
.prog-table tbody tr.ufr-band-a > *{background:var(--green-light)} /* bande verte */
.prog-table tbody tr.ufr-band-b > *{background:#fff}               /* bande blanche */
/* Colonne « Mention » = rail teinté à gauche */
.prog-table th[scope="row"]{background:var(--green-tint);color:var(--green-dark);font-weight:600;
  border-left:3px solid var(--green)}
/* --- Tableau des conditions d'accès (Licence 1) --- */
/* Grille complète : toutes les lignes/colonnes visibles */
.acces-table th,.acces-table td{border:1px solid #9db0a2}
.acces-table thead th{border-color:rgba(255,255,255,.35)}
.data-table.acces-table tbody tr:nth-child(even) td{background:#f6faf7}
.acces-table .acces-ufr{vertical-align:middle;text-align:left;background:var(--green-tint);
  color:var(--green-dark);font-weight:700;border:1px solid #9db0a2;border-left:4px solid var(--green-dark);min-width:150px}
/* Séparateur pleine largeur au début de chaque groupe UFR */
.acces-table tr.acces-group-start > th,
.acces-table tr.acces-group-start > td{border-top:2px solid var(--green-dark)}
.acces-table td{vertical-align:middle}
.acces-table td.acces-moy{font-size:.86rem;color:var(--muted);line-height:1.5;min-width:220px}
.acces-moy .moy-sep{color:var(--green);font-weight:800;font-size:1.15em;padding:0 4px}
/* Colonne « Bac autorisé » : une pastille par série (C, D, E…) */
.acces-table td.acces-bac{white-space:normal;line-height:2;min-width:120px}
.serie-tag{display:inline-block;margin:2px 3px;min-width:26px;text-align:center;font-weight:700;
  font-size:.76rem;letter-spacing:.4px;color:#fff;background:var(--green);padding:5px 9px;border-radius:6px;white-space:nowrap}
/* Séparateur en tête de chaque nouveau groupe de mention */
.prog-table tbody tr.prog-group-start > th,
.prog-table tbody tr.prog-group-start > td{border-top:2px solid var(--green)}
/* Survol : n'éclaire que les colonnes variables (pas les cellules fusionnées).
   Teinte distincte des bandes vert/blanc pour rester visible sur les deux. */
.prog-table tbody tr:hover > td:not([rowspan]){background:#cfe7d6}
/* Pastilles Type / UFR : centrées dans les cellules fusionnées */
.prog-table td[rowspan] .prog-type,.prog-table td[rowspan] .pres-tag{margin:2px 0}
/* Grille visible : délimite clairement les cellules (et les fusions),
   y compris les lignes secondaires entre parcours d'une même mention */
.prog-table th,.prog-table td{border:1px solid #9cbaa6}
/* Lignes horizontales entre parcours d'une même mention : bien visibles */
.prog-table tbody th,.prog-table tbody td{border-top-color:#4f8f69;border-bottom-color:#4f8f69}
.prog-table thead th{border-color:rgba(255,255,255,.18)}
/* Infobulle stylée sur les pastilles UFR (nom complet de l'UFR).
   La bulle est rendue sur <body> en position:fixed (voir main.js) pour ne
   jamais être rognée par le conteneur défilant du tableau. */
.ufr-tip{display:inline-block;cursor:help;outline:none}
.ufr-tip:focus-visible{box-shadow:0 0 0 3px rgba(60,162,93,.35);border-radius:50px}
.ufr-tip-bubble{position:fixed;z-index:1000;max-width:260px;white-space:normal;line-height:1.35;
  background:var(--green-dark);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.2px;
  padding:8px 11px;border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
.ufr-tip-bubble.is-visible{opacity:1;visibility:visible;transform:none}
.ufr-tip-bubble::after{content:"";position:absolute;top:100%;left:var(--arrow,50%);
  transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--green-dark)}
.ufr-tip-bubble.below::after{top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:var(--green-dark)}
.prog-type{display:inline-block;font-size:.8rem;color:var(--green-dark);background:var(--green-light);
  padding:3px 10px;border-radius:50px;white-space:nowrap}
.prog-domaine-count{margin-left:auto;font-size:.75rem;font-weight:600;color:#fff;background:var(--green);
  padding:3px 11px;border-radius:50px;white-space:nowrap}

/* Recherche des programmes */
.prog-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:50px;padding:5px 8px 5px 16px;box-shadow:var(--shadow);max-width:640px;margin:6px 0 18px}
.prog-search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(60,162,93,.15)}
.prog-search-ic{color:var(--green);flex-shrink:0;display:inline-flex}
.prog-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:.98rem;color:var(--text);padding:9px 0}
.prog-search-count{flex-shrink:0;font-size:.8rem;color:var(--green-dark);font-weight:600;padding-right:10px;white-space:nowrap}
.prog-noresult{display:flex;align-items:center;gap:8px;color:var(--muted);background:var(--green-tint);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:18px}
.prog-noresult .icon{color:var(--green);flex-shrink:0}

/* Badge sigle sur les cartes UFR */
.ufr-top{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.ufr-tag{background:var(--green);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.5px;
  padding:4px 10px;border-radius:6px}
.ufr-card-link:hover .ufr-tag{background:var(--green-dark)}
/* Numéro d'étape (« Section 01 ») affiché au-dessus du titre */
.uni-section .section-title{flex-wrap:wrap;align-items:center}
/* Titres de section « à la MESSINA » : reprise de la mise en forme du
   titre « Historique » du site officiel (sans-serif, grand, 600, centré,
   vert foncé, interligne serré). MESSINA étant propriétaire, on utilise
   la pile sans-serif du site en repli. */
.deco-titles .section-title:not(.light){
  flex-direction:column;justify-content:center;text-align:center;
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(2rem,4.6vw,3.125rem);font-weight:600;line-height:1.05;
  -webkit-font-smoothing:antialiased;
  letter-spacing:normal;gap:18px;margin-bottom:36px;padding-bottom:28px;
}
/* Icône en médaillon circulaire au-dessus du titre */
.deco-titles .section-title:not(.light) .icon{
  width:28px;height:28px;box-sizing:content-box;padding:14px;border-radius:50%;
  color:var(--green);background:radial-gradient(circle at 30% 30%,#fff,var(--green-tint));
  box-shadow:0 10px 22px rgba(60,162,93,.24),inset 0 0 0 1px rgba(60,162,93,.18);
}
/* Eyebrow (intitulé) au-dessus du titre */
.deco-titles .section-title:not(.light) .section-eyebrow{
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-text);line-height:1;margin-bottom:-8px;
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.deco-titles .section-title:not(.light) .section-eyebrow::before,
.deco-titles .section-title:not(.light) .section-eyebrow::after{content:"";width:22px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--green))}
.deco-titles .section-title:not(.light) .section-eyebrow::after{background:linear-gradient(90deg,var(--green),transparent)}
/* Filet décoratif : dégradé en fondu aux extrémités */
.deco-titles .section-title:not(.light)::after{left:50%;transform:translateX(-50%);bottom:0;width:180px;height:3px;
  border-radius:2px;background:linear-gradient(90deg,transparent,var(--green) 28%,var(--green-mid) 72%,transparent)}
/* Pastille centrale posée sur le filet */
.deco-titles .section-title:not(.light)::before{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #fff,0 0 0 8px var(--green-tint)}

/* Admission : « Conditions d'accès en première année de Licence » est le seul
   titre de section du site assez long pour déborder sur deux lignes au corps
   commun (50 px à 1280 px). Tous les autres tiennent sur une ligne — y compris
   « Instituts et centres rattachés aux UFR » — donc on réduit ici plutôt que
   d'abaisser le clamp global, qui rapetisserait une vingtaine de titres sains.
   La classe page-admission est posée sur <body> par includes/header.php.
   Sélecteur calqué sur celui d'origine : `.deco-titles .section-title:not(.light)`
   pèse (0,3,0) — le :not() compte la spécificité de son argument — donc un
   simple `.page-admission .section-title` (0,2,0) serait ignoré. */
.page-admission.deco-titles .section-title:not(.light){font-size:clamp(1.7rem,3.3vw,2.5rem)}

/* Séparateur discret entre les sections */
.uni-section+.uni-section{border-top:1px solid var(--line)}

.uni-subtitle{color:var(--green-dark);font-size:1.15rem;margin:30px 0 14px;padding-left:12px;border-left:3px solid var(--green)}

/* Encadré de mise en avant (ex. présidence) */
.uni-callout{display:flex;align-items:center;gap:18px;background:var(--green-tint);
  border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius);
  padding:20px 24px;margin-top:8px}
.uni-callout .uni-callout-ic{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;
  justify-content:center;background:var(--green);color:#fff;border-radius:50%}
.uni-callout p{margin:0;line-height:1.55}
.uni-callout strong{color:var(--green-dark)}

/* Frise des recteurs et présidents */
.rectors-scroll{overflow-x:auto;padding:6px 0 16px;-webkit-overflow-scrolling:touch}
.rectors-track{position:relative;display:flex;width:max-content;padding:0 12px}
.rectors-line{position:absolute;left:28px;right:28px;top:138px;height:3px;background:var(--green);opacity:.3;border-radius:2px}
.rector{flex:0 0 210px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.rector-info{height:76px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;overflow:hidden}
.rector-name{font-weight:700;color:var(--green-dark);font-size:.95rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rector-dates{font-size:.79rem;color:var(--muted);line-height:1.2}
.rector-node{position:relative;z-index:1;width:96px;height:96px;margin:14px 0;border-radius:50%;
  border:3px solid var(--green);background:#fff;color:var(--green);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 6px 16px rgba(40,66,46,.18);transition:transform .25s,box-shadow .25s}
.rector-node img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.rector:hover .rector-node{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 24px rgba(40,66,46,.26)}
/* Badges (pilule dégradée, couleur distincte Recteur / Président) */
.rector-badge{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;
  padding:7px 15px;font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.2px;
  box-shadow:0 3px 8px rgba(40,66,46,.22)}
.rector-badge.badge-rect{background:linear-gradient(135deg,#356e4a,#28422E)}
.rector-badge.badge-pres{background:linear-gradient(135deg,#3CA25D,#356e4a)}
.rector-current .rector-node{border-color:var(--green);box-shadow:0 0 0 5px rgba(60,162,93,.25),0 8px 20px rgba(40,66,46,.22)}
.rector-current .rector-badge{box-shadow:0 0 0 3px rgba(60,162,93,.25),0 3px 8px rgba(40,66,46,.22)}

/* Gouvernance */
.gov-lead{display:flex;align-items:center;gap:18px;background:var(--green-tint);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;margin-bottom:10px}
.gov-avatar{flex-shrink:0;width:210px;height:210px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:50%}
.gov-lead h3{color:var(--green-dark);font-size:1.3rem;margin-bottom:2px}
@media(max-width:768px){.gov-avatar{width:160px;height:160px}}
.gov-role{color:var(--muted);margin:0}
/* Grand portrait du Président (page Université) */
.pres-portrait{display:flex;align-items:center;gap:30px;background:var(--green-tint);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;margin-bottom:14px}
.pres-portrait-photo{flex-shrink:0;width:260px;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 10px 30px rgba(20,40,28,.16);line-height:0}
.pres-portrait-photo img{width:100%;height:auto;display:block}
.pres-portrait-ph{flex-shrink:0;width:260px;height:320px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:16px}
.pres-portrait-text{min-width:0}
.pres-portrait-label{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  color:var(--green-dark);background:#fff;border:1px solid var(--green);padding:5px 13px;border-radius:20px;margin-bottom:12px}
.pres-portrait-text h3{font-size:1.65rem;color:var(--green-dark);margin:0 0 6px}
.pres-portrait-text .gov-role{font-size:1.02rem}
@media(max-width:768px){
  .pres-portrait{flex-direction:column;text-align:center;gap:22px;padding:22px}
  .pres-portrait-photo,.pres-portrait-ph{width:100%;max-width:230px;margin:0 auto}
}
/* Portrait du Président + Mot côte à côte, sur un léger fond vert */
.pres-lead{display:grid;grid-template-columns:minmax(250px,300px) 1fr;gap:28px;align-items:start;margin-bottom:16px;
  background:#dcede2;border:1px solid #c3ddcb;border-radius:18px;padding:24px 26px}
.pres-lead .pres-portrait{flex-direction:column;text-align:center;gap:18px;margin:0;position:sticky;top:96px;
  background:transparent;border:0;padding:0}
.pres-lead .pres-portrait-photo,.pres-lead .pres-portrait-ph{width:100%;max-width:230px;margin:0 auto}
.pres-lead .mot-president{margin:0;background:transparent;border:0;border-left:4px solid var(--green);
  border-radius:0;padding:6px 10px 6px 26px}
.mot-label{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--green-dark);margin:0 0 14px 58px;position:relative;z-index:1}
@media(max-width:900px){
  .pres-lead{grid-template-columns:1fr;gap:20px}
  .pres-lead .pres-portrait{position:static}
}
/* Mot du Président */
.mot-president{position:relative;background:var(--green-tint);border:1px solid var(--line);
  border-left:4px solid var(--green);border-radius:var(--radius);
  padding:34px 40px 30px;margin:6px 0 10px;overflow:hidden}
.mot-president::before{content:"\201C";position:absolute;top:2px;left:20px;
  font-family:var(--font-display);font-size:6rem;line-height:1;color:var(--green);opacity:.22;pointer-events:none}
.mot-quote{margin:0;position:relative;z-index:1}
.mot-quote::after{content:"\201D";position:absolute;right:6px;bottom:6px;
  font-family:var(--font-display);font-size:6rem;line-height:0;color:var(--green);opacity:.22;pointer-events:none}
.mot-quote p{margin:0 0 16px;line-height:1.7;text-align:justify}
.mot-quote p:last-child{margin-bottom:0}
.mot-highlight{font-family:var(--font-display);font-size:1.15rem;font-weight:700;
  color:var(--green-dark);text-align:center!important;margin-top:26px!important}
.mot-signature{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  text-align:right;line-height:1.5}
.mot-signature strong{display:block;color:var(--green-dark);font-size:1.05rem}
.mot-signature span{display:block;color:var(--muted);font-size:.9rem}
@media(max-width:600px){
  .mot-president{padding:26px 20px 24px}
  .mot-quote p{text-align:left}
}

/* Tableaux de données (UFHB en chiffre par UFR) */
.uni-table-title{display:flex;align-items:center;gap:8px;color:var(--green-dark);
  font-size:.98rem;margin:0 0 10px}
.uni-table-title .icon{color:var(--green);flex-shrink:0}
.uni-table-note{font-weight:400;font-size:.82rem;color:var(--muted)}
/* Tableaux « chiffres par UFR » côte à côte */
.uni-tables-grid{display:grid;gap:22px 20px;margin-top:28px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.uni-tables-grid .uni-table-title{margin-top:0}
.data-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;min-width:460px;font-size:.95rem}
/* Variante compacte utilisée dans la grille côte à côte */
.uni-tables-grid .data-table{min-width:280px;font-size:.82rem}
.uni-tables-grid .data-table th,
.uni-tables-grid .data-table td{padding:6px 10px}
.data-table th,.data-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line)}
.data-table thead th{background:var(--green-dark);color:#fff;font-weight:600;
  position:sticky;top:0;white-space:nowrap}
.data-table thead th.num,.data-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.data-table tbody th{font-weight:600;color:var(--green-dark);white-space:nowrap}
.data-table tbody tr:nth-child(even){background:var(--green-tint)}
.data-table tbody tr:hover{background:var(--green-light)}
.data-table .td-total{font-weight:700;color:var(--green-dark)}
.data-table tfoot th,.data-table tfoot td{background:var(--green-light);color:var(--green-dark);
  font-weight:700;border-top:2px solid var(--green);border-bottom:0}
.uni-source{color:var(--muted);font-size:.85rem;font-style:italic;margin-top:16px}

/* Aperçu Mot du Président (page d'accueil) */
.president-band{padding:80px 0;position:relative;overflow:hidden;background:var(--green-tint);
  background-image:linear-gradient(120deg,var(--green-tint),var(--green-light))}
/* Décor de fond discret (anneaux + lueur) */
.president-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 92% 12%,rgba(60,162,93,.14),transparent 34%),
    radial-gradient(circle at 96% 6%,transparent 120px,rgba(60,162,93,.10) 121px 124px,transparent 125px)}
.president-band-inner{display:flex;align-items:center;gap:48px;position:relative;z-index:1}
.president-band-photo{flex-shrink:0}
.president-avatar{width:200px;height:200px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:50%;
  overflow:hidden;transition:transform .3s,box-shadow .3s;
  box-shadow:0 0 0 6px #fff,0 0 0 10px rgba(60,162,93,.28),0 22px 48px rgba(40,66,46,.30)}
.president-band-photo:hover .president-avatar{transform:translateY(-4px);
  box-shadow:0 0 0 6px #fff,0 0 0 11px rgba(60,162,93,.42),0 28px 56px rgba(40,66,46,.36)}
.president-avatar.has-photo{padding:0}
.president-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:50%}
.president-band-text{max-width:720px;position:relative;background:#fff;border-radius:22px;
  border:1px solid var(--line);border-left:5px solid var(--green);padding:34px 40px 32px;
  box-shadow:0 24px 60px rgba(40,66,46,.14)}
/* Grand guillemet ornemental derrière la citation */
.president-band-text::before{content:"\201C";position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:0;
  font-family:Georgia,"Times New Roman",serif;font-size:7rem;line-height:1;color:var(--green);
  opacity:.12;pointer-events:none}
.president-band-label{display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--green),var(--green-mid));color:#fff;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:7px 15px;border-radius:50px;margin-bottom:20px;
  box-shadow:0 6px 16px rgba(60,162,93,.28)}
.president-band-label .icon{color:#fff}
.president-band-text blockquote{position:relative;z-index:1;margin:0 0 18px;font-family:var(--font-display);
  font-size:1.42rem;line-height:1.6;color:var(--green-dark)}
.president-band-sign{position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  color:var(--muted);margin:0 0 24px;font-size:.98rem}
.president-band-sign::before{content:"";width:34px;height:2px;border-radius:1px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--green),var(--green-mid))}
.president-band-sign strong{color:var(--green-dark)}
@media(max-width:820px){
  .president-band{padding:56px 0}
  .president-band-inner{flex-direction:column;text-align:center;gap:28px}
  .president-avatar{width:150px;height:150px}
  .president-band-text{padding:26px 22px 24px}
  .president-band-text blockquote{font-size:1.15rem}
  .president-band-label{margin-left:auto;margin-right:auto}
}

/* Missions */
/* padding-left:0 : sans lui, le retrait Bootstrap rétrécit la grille à deux
   colonnes de 32 px et la désaligne du titre « Missions » (cf. .content-aside ul). */
.mission-list{list-style:none;padding-left:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:28px}
.mission-list li{display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.mission-list li .icon{color:var(--green);flex-shrink:0;margin-top:3px}
@media(max-width:600px){.mission-list{grid-template-columns:1fr}}

/* Axes stratégiques */
.axes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:10px}
.axe-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 18px;box-shadow:var(--shadow);font-weight:600;color:var(--green-dark)}
.axe-num{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;border-radius:50%;font-family:var(--font-display);font-size:1.1rem}
.projet-card{display:flex;flex-direction:column}
.projet-budget{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:14px;
  background:var(--green-light);color:var(--green-dark);font-weight:700;font-size:.8rem;padding:6px 12px;border-radius:50px}

/* Chiffres clés */
.chiffre-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 16px;box-shadow:var(--shadow);height:100%;
  transition:transform .2s,box-shadow .2s}
.chiffre-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.chiffre-ic{width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:var(--green-light);color:var(--green);border-radius:50%;margin-bottom:8px}
.chiffre-num{font-family:var(--font-display);font-size:2.1rem;font-weight:700;color:var(--green-dark);line-height:1}
.chiffre-label{color:var(--muted);font-size:.9rem}

/* Listes à puces des cartes Organisation */
.org-card p{margin-bottom:4px}
.org-list{margin:8px 0 0;padding:0;list-style:none}
.org-list li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--muted);font-size:.92rem;line-height:1.55}
.org-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--green)}
.org-list li:last-child{margin-bottom:0}
.org-list strong{color:var(--green-dark);font-weight:700}
.dir-acr{color:var(--muted);font-weight:600;font-size:.82em}
.dir-person{display:flex;align-items:center;gap:12px;margin:6px 0 14px}
.dir-photo{flex-shrink:0;width:80px;height:80px;border-radius:50%;overflow:hidden;
  border:3px solid var(--green-light);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;background:var(--green-tint);color:var(--green)}
.dir-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.dir-person-info{display:flex;flex-direction:column;gap:2px}
.dir-person-name{color:var(--green-dark);font-size:.95rem;font-weight:700;line-height:1.25}
.dir-person-role{font-size:.82rem;color:var(--muted);font-weight:500;line-height:1.3}

/* Vice-présidences : portrait agrandi + badge de rôle en pilule */
.vp-card .dir-person,.dir-card .dir-person{gap:16px;margin:8px 0 16px}
.vp-card .dir-photo,.dir-card .dir-photo{width:112px;height:112px;border-width:3px}
.vp-card .dir-person-info,.dir-card .dir-person-info{align-items:flex-start;gap:6px}
.vp-card .dir-person-name,.dir-card .dir-person-name{font-size:1.02rem}
.vp-card .dir-person-role,.dir-card .dir-person-role{display:inline-block;background:linear-gradient(135deg,#3CA25D,#356e4a);
  color:#fff;font-weight:700;font-size:.68rem;letter-spacing:.5px;text-transform:uppercase;line-height:1.35;
  padding:4px 12px;border-radius:999px;box-shadow:0 2px 6px rgba(40,66,46,.2)}
/* Titre avec accent (vice-présidences + directions) */
.vp-card h3,.dir-card h3{font-size:1.18rem;color:var(--green-dark);position:relative;padding-bottom:10px;margin-bottom:12px}
.dir-card h3{font-size:1.1rem}
.vp-card h3::after,.dir-card h3::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--green),var(--green-mid))}
/* Sous-titre (description) */
.vp-card > p{font-size:.9rem;color:var(--muted);font-style:italic;line-height:1.55;margin-bottom:6px}
/* Intitulé et liste des services */
.vp-services-label{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--green-text);margin:8px 0 12px}
.vp-services-label::before{content:"";width:18px;height:3px;background:var(--green);border-radius:3px}
/* Services rattachés — pastilles décorées */
.vp-card .org-list,.dir-card .org-list{margin-top:2px}
.vp-card .org-list li,.dir-card .org-list li{
  position:relative;padding:9px 14px 9px 36px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:10px;background:#f6faf7;color:var(--muted);font-size:.9rem;line-height:1.45;transition:.18s}
.vp-card .org-list li:last-child,.dir-card .org-list li:last-child{margin-bottom:0}
.vp-card .org-list li:hover,.dir-card .org-list li:hover{
  border-color:var(--green);background:var(--green-tint);color:var(--green-dark);transform:translateX(3px);
  box-shadow:0 3px 10px rgba(40,66,46,.08)}
.vp-card .org-list li::before,.dir-card .org-list li::before{
  content:"";left:8px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233CA25D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain}
/* Service rattaché cliquable (lien vers une page dédiée) */
.vp-card .org-list li a.org-link,.dir-card .org-list li a.org-link{
  display:block;margin:-9px -14px -9px -36px;padding:9px 14px 9px 36px;
  color:var(--green-dark);text-decoration:none;font-weight:600}
.vp-card .org-list li a.org-link:hover,.dir-card .org-list li a.org-link:hover{text-decoration:underline}
/* Services enrichis : nom en titre + description en dessous */
.vp-card .org-list-detail li,.dir-card .org-list-detail li{
  padding:12px 14px 12px 16px;border-left:3px solid var(--green)}
.vp-card .org-list-detail li::before,.dir-card .org-list-detail li::before{display:none}
.org-list-detail .svc-name{display:block;color:var(--green-dark);font-weight:700;
  font-size:.95rem;line-height:1.35;margin-bottom:4px}
.org-list-detail .svc-desc{display:block;color:var(--muted);font-size:.86rem;line-height:1.5}
.org-list-detail .svc-desc a{color:var(--green-dark);font-weight:600;text-decoration:none;white-space:nowrap}
.org-list-detail .svc-desc a:hover{text-decoration:underline}
.vp-card .org-list-detail li:hover .svc-name,.dir-card .org-list-detail li:hover .svc-name{color:var(--green-dark)}
.org-site{margin-top:14px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:600;text-decoration:none;color:var(--green-dark);
  background:var(--green-tint);border:1px solid var(--green);padding:6px 12px;border-radius:20px;transition:.2s}
.org-site:hover{background:var(--green);color:#fff}
.org-site .icon:last-child{transition:transform .2s}
.org-site:hover .icon:last-child{transform:translateX(3px)}

/* Camemberts (donuts SVG) */
.chart-card{padding:22px;text-align:center}
.chart-card h3{color:var(--green-dark);font-size:1.05rem;margin-bottom:12px}
.donut{width:100%;max-width:168px;height:auto;margin:0 auto 14px;display:block}
.donut circle{transition:stroke-width .2s}
.donut-total{fill:var(--green-dark);font-family:var(--font-display);font-size:30px;font-weight:700}
.donut-sub{fill:var(--muted);font-size:12px}
.chart-legend{list-style:none;margin:0;padding:0;text-align:left}
.chart-legend li{display:flex;align-items:center;gap:8px;font-size:.82rem;margin-bottom:7px}
.chart-legend li:last-child{margin-bottom:0}
.legend-swatch{flex-shrink:0;width:12px;height:12px;border-radius:3px}
.legend-label{flex:1;color:var(--muted);line-height:1.25}
.legend-val{font-weight:700;color:var(--green-dark);white-space:nowrap;font-size:.78rem}

/* Frise chronologique (historique) — nœuds à icône sur une ligne verticale */
/* ---- Frise chronologique alternée (zigzag) ---- */
.timeline{list-style:none;position:relative;margin:34px 0 26px;padding:0}
/* Ligne : connecteurs par étape ; la dernière s'arrête à sa pastille (pas de queue) */
.timeline-item::before{content:"";position:absolute;top:0;bottom:0;width:5px;border-radius:3px;z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.4),transparent 55%),var(--green);
  box-shadow:0 0 0 1px rgba(60,162,93,.15),0 0 12px rgba(60,162,93,.4)}
.timeline-item:nth-child(odd)::before{right:-2.5px}
.timeline-item:nth-child(even)::before{left:-2.5px}
.timeline-item:first-child::before{border-radius:3px 3px 0 0}
.timeline-item:last-child::before{bottom:auto;height:36px;border-radius:0 0 3px 3px}
/* Gemme décorative sous la dernière pastille */
.timeline-item:last-child::after{content:"";position:absolute;width:22px;height:22px;top:62px;z-index:1;
  pointer-events:none;filter:drop-shadow(0 2px 4px rgba(60,162,93,.45));
  background:radial-gradient(circle at 50% 40%,#6cc789 0,var(--green) 5px,var(--green-mid) 6px,var(--green-tint) 6px 9px,transparent 10px)}
.timeline-item:last-child:nth-child(odd)::after{right:-11px}
.timeline-item:last-child:nth-child(even)::after{left:-11px}
.timeline-item{position:relative;width:50%;box-sizing:border-box;padding-bottom:26px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item:nth-child(odd){left:0;padding-right:48px}
.timeline-item:nth-child(even){left:50%;padding-left:48px}
/* Pastille centrée sur la ligne */
.timeline-node{position:absolute;top:2px;z-index:2;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#6cc789,var(--green) 52%,var(--green-mid));border:none;color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.5px;
  text-shadow:0 1px 2px rgba(40,66,46,.35);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(60,162,93,.45),0 0 0 5px var(--green-tint),0 0 0 6px rgba(60,162,93,.3),
    inset 0 3px 6px rgba(255,255,255,.5),inset 0 -5px 9px rgba(40,66,46,.35);
  transition:transform .25s,box-shadow .25s}
.timeline-item:nth-child(odd) .timeline-node{right:-32px}
.timeline-item:nth-child(even) .timeline-node{left:-32px}
.timeline-item:hover .timeline-node{transform:scale(1.06);box-shadow:0 9px 22px rgba(60,162,93,.55),0 0 0 5px var(--green-tint),0 0 0 6px rgba(60,162,93,.4),
  inset 0 3px 7px rgba(255,255,255,.6),inset 0 -5px 10px rgba(40,66,46,.4)}
/* Carte */
.timeline-content{position:relative;background:linear-gradient(180deg,#fff,#f7faf8);
  border:1px solid var(--line);border-radius:14px;padding:15px 20px;box-shadow:var(--shadow);
  transition:transform .25s,box-shadow .25s}
.timeline-item:hover .timeline-content{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.timeline-content h3{color:var(--green-dark);font-size:1.08rem;margin-bottom:6px}
.timeline-content p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.6}
/* Accent + flèche orientés vers la ligne centrale */
.timeline-item:nth-child(odd) .timeline-content{border-right:4px solid var(--green)}
.timeline-item:nth-child(even) .timeline-content{border-left:4px solid var(--green)}
.timeline-content::before{content:"";position:absolute;top:20px;border:12px solid transparent;
  filter:drop-shadow(0 2px 2px rgba(40,66,46,.15))}
.timeline-content::after{display:none}
.timeline-item:nth-child(odd) .timeline-content::before{right:-16px;border-left-color:var(--green)}
.timeline-item:nth-child(even) .timeline-content::before{left:-16px;border-right-color:var(--green)}
/* Repli en colonne unique sur petit écran */
@media(max-width:760px){
  .timeline-item:nth-child(odd)::before,
  .timeline-item:nth-child(even)::before{left:26px;right:auto}
  .timeline-item:last-child::before{height:32px}
  .timeline-item:last-child::after{top:54px}
  .timeline-item:last-child:nth-child(odd)::after,
  .timeline-item:last-child:nth-child(even)::after{left:17px;right:auto}
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even){width:100%;left:0;padding-left:86px;padding-right:0}
  .timeline-item:nth-child(odd) .timeline-node,
  .timeline-item:nth-child(even) .timeline-node{left:0;right:auto;width:56px;height:56px;font-size:.92rem}
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content{border-right:1px solid var(--line);border-left:4px solid var(--green)}
  .timeline-item:nth-child(odd) .timeline-content::before,
  .timeline-item:nth-child(even) .timeline-content::before{left:-16px;right:auto;border:12px solid transparent;border-right-color:var(--green)}
}

.ufr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}
.ufr-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--radius-sm);padding:20px;font-weight:600;color:var(--green-dark);box-shadow:var(--shadow)}
/* Carte UFR cliquable (site autonome) */
.ufr-card-link{display:flex;flex-direction:column;justify-content:space-between;gap:14px;text-decoration:none;position:relative}
.ufr-card-link:hover{border-left-color:var(--green-dark);color:var(--green-dark)}
.ufr-card-link .ufr-name{display:block}
.ufr-site{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  background:var(--green-light);color:var(--green-dark);font-size:.75rem;font-weight:700;
  padding:5px 12px;border-radius:50px;transition:.2s}
.ufr-card-link:hover .ufr-site{background:var(--green);color:#fff}
.ufr-site .icon:last-child{transition:transform .2s}
.ufr-card-link:hover .ufr-site .icon:last-child{transform:translateX(3px)}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:10px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.info-card h3{color:var(--green-dark);margin-bottom:12px;font-size:1.15rem}
.info-card p{color:var(--muted);margin:0;line-height:1.6}
/* Pastille d'icône en tête de carte */
.info-ic{width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:var(--green-light);color:var(--green);border-radius:14px;margin-bottom:16px}
.info-card:hover .info-ic{background:var(--green);color:#fff;transition:.25s}

/* Intro de page (chapô) */
.page-lead{font-size:1.18rem;color:var(--green-dark);font-weight:500;line-height:1.7;
  max-width:820px;margin-bottom:8px}
/* Variante pleine largeur (intro qui s'étend sur toute la ligne) */
.page-lead-wide{max-width:none}

/* Plan du site — listes de liens */
/* padding-left:0 : les filets sous chaque entrée partaient 32 px à droite du
   titre de rubrique (cf. .content-aside ul). */
.sitemap-list{list-style:none;padding-left:0;margin-top:6px}
.sitemap-list li{padding:8px 0;border-bottom:1px solid var(--line)}
.sitemap-list li:last-child{border-bottom:0}
.sitemap-list a{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-size:.95rem;transition:color .2s,transform .2s}
.sitemap-list a:hover{color:var(--green);transform:translateX(3px)}
.sitemap-list a .icon{color:var(--green);opacity:.85;flex-shrink:0}
.sitemap-list .muted{color:var(--muted);font-size:.88rem}

/* Liste à puces avec icône (axes, engagements) */
/* padding-left:0 (cf. .content-aside ul) : les puces « coche » servent déjà de
   repère, le retrait de 32 px ne faisait que décaler la liste de son texte. */
.check-list{list-style:none;padding-left:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:6px 0 8px}
.check-list li{display:flex;align-items:flex-start;gap:11px;line-height:1.55;min-width:0}
.check-list li .icon{color:var(--green);flex-shrink:0;margin-top:3px}

/* Bandeau d'appel à l'action */
.cta-band{background:var(--green-deep);color:#fff;
  border-radius:var(--radius);padding:40px 44px;display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;box-shadow:var(--shadow-lg);margin-top:12px;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(#fff 1px,transparent 1px);background-size:22px 22px}
.cta-band>*{position:relative}
.cta-band h3{font-family:var(--font-display);font-size:1.6rem;margin-bottom:6px}
.cta-band p{opacity:.9;margin:0;max-width:560px}
.cta-band .btn{background:#fff;color:var(--green-dark);flex-shrink:0}
.cta-band .btn:hover{background:var(--green-light)}

/* ---------- Contact ---------- */
.contact-layout{display:grid;grid-template-columns:2fr 1fr;gap:44px}
/* Champs Bootstrap adaptés à la charte UFHB */
.contact-form .form-label{font-weight:600;color:#444;font-size:.9rem;margin-bottom:6px}
.contact-form .req{color:#d9534f}
.contact-form .field-opt{color:var(--muted);font-weight:400;font-size:.85em}
.contact-form .form-control{padding:12px 14px;border:1px solid #d0d5d2;border-radius:var(--radius-sm);font-size:1rem}
.contact-form .form-control:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(60,162,93,.18)}
.contact-form .btn{cursor:pointer;border:none;margin-top:6px}
/* Alertes Bootstrap adaptées à la charte UFHB */
.contact-form-col .alert{border:0;border-left:4px solid;border-radius:var(--radius-sm);
  padding:16px 18px;margin-bottom:24px;gap:12px;box-shadow:var(--shadow)}
.contact-form-col .alert-success{background:#e7f5ec;color:#1d6b3a;border-left-color:var(--green)}
.contact-form-col .alert-danger{background:#fdecec;color:#a5241f;border-left-color:#d9534f}
.alert-ic{flex-shrink:0;display:flex;align-items:flex-start;padding-top:1px}
.contact-form-col .alert ul{padding-left:18px}
.contact-info{background:var(--green-light);border-radius:var(--radius);padding:28px;height:fit-content}
.contact-info h3{color:var(--green-dark);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.contact-info h3 .icon{color:var(--green)}
.contact-info ul{list-style:none;padding-left:0} /* cf. .content-aside ul */
.contact-info li{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:.92rem;line-height:1.5}
.contact-info li:last-child{border-bottom:none}
.contact-info-list a{color:var(--green-dark);font-weight:600;transition:.2s}
.contact-info-list a:hover{color:var(--green)}
/* Sous-blocs de l'aside (carte, réseaux) */
.contact-sub{margin-top:22px;padding-top:20px;border-top:1px solid rgba(0,0,0,.1)}
.contact-sub h4{color:var(--green-dark);font-size:.82rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:.6px}
.contact-map-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--green-text)}
.contact-map-btn .icon:last-child{transition:transform .2s}
.contact-map-btn:hover{color:var(--green-dark)}
.contact-map-btn:hover .icon:last-child{transform:translateX(3px)}
.contact-social{display:flex;gap:10px}
.contact-social a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--green);border-radius:50%;box-shadow:var(--shadow);transition:.25s}
.contact-social a:hover{background:var(--green);color:#fff;transform:translateY(-3px)}
/* Aide de saisie sous un champ */
.field-hint{color:var(--muted);font-size:.82rem;margin-top:5px}

/* ---------- Page membre ---------- */
.person-card-link{display:block;color:inherit;text-decoration:none}
.person-card-link:hover h3{color:var(--green)}
.membre-layout{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:start}
.membre-photo{height:360px;border-radius:var(--radius);background-size:cover;background-position:top center;box-shadow:var(--shadow)}
.membre-content .article-back{margin-top:26px}
.membre-prix{margin:30px 0 4px;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface,#fff);box-shadow:var(--shadow)}
.membre-prix img{display:block;width:100%;height:auto}
.membre-prix figcaption{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:.9rem;color:var(--green-dark);background:var(--green-soft,#f2f8f4);font-weight:500}
.membre-prix figcaption svg{flex:0 0 auto;color:var(--green)}
.membre-distinctions{margin:30px 0 4px;padding:20px 22px;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius);background:var(--green-soft,#f2f8f4)}
.membre-distinctions .distinctions-title{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:1.05rem;color:var(--green-dark)}
.membre-distinctions .distinctions-title svg{flex:0 0 auto;color:var(--green)}
.membre-distinctions ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.membre-distinctions li{position:relative;padding-left:20px;font-size:.96rem;line-height:1.45}
.membre-distinctions li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ---------- Page événement ---------- */
.agenda-card-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.agenda-card-link:hover h3{color:var(--green)}
.badge-hero{margin-bottom:14px;font-size:.75rem;padding:7px 16px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35)}
.event-infocard{background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.event-infocard h3{color:var(--green-dark);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.event-infocard h3 .icon,.event-infocard .ico .icon{color:var(--green)}
.event-infocard .infocard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.infocard-count{font-size:.82rem;font-weight:700;color:var(--green-dark);white-space:nowrap}
.infocard-rows{display:flex;flex-direction:column}
.infocard-row{display:flex;gap:13px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.infocard-row:last-child{border-bottom:0;padding-bottom:2px}
.infocard-row .ico{width:34px;height:34px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--green-light);border-radius:50%;margin:0}
.infocard-row .lbl{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:1px}
.infocard-row .val{display:block;font-size:.96rem;color:var(--text);font-weight:600;line-height:1.4}
.btn-cal{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:20px}
/* Pastille de statut « en flux » (bandeau + carte info), variante non absolue de .agenda-status */
.event-status{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;line-height:1;padding:6px 12px;border-radius:50px}
.event-status.is-upcoming{background:var(--green);color:#fff}
.event-status.is-past{background:#eef0ef;color:#8a8f8c}
.event-status.is-live{background:#f59e0b;color:#fff}
.event-status.is-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.85);animation:newDot 1.5s ease-out infinite}
@media(prefers-reduced-motion:reduce){.event-status.is-live::before{animation:none}}
/* Rangée de badges du bandeau (catégorie + statut) ; statut lisible sur fond vert => translucide */
.hero-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.hero-badges .badge-hero{margin:0}
.hero-badges .event-status{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4)}
.hero-badges .event-status.is-live{background:#f59e0b;border-color:#f59e0b}
.related-date{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:52px;height:52px;background:var(--green);color:#fff;border-radius:8px;flex-shrink:0;
  font-size:.72rem;line-height:1.1;text-align:center;padding:4px}
.related-date strong{font-size:1.2rem}

/* ---------- Pagination ---------- */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 14px;border-radius:8px;border:1px solid #e0e5e2;font-weight:600;color:var(--green-dark);
  background:#fff;transition:.2s}
.page-link:hover{border-color:var(--green);color:var(--green)}
.page-link.current{background:var(--green);border-color:var(--green);color:#fff}
.page-link.disabled{color:#bbb;background:#f5f7f6;cursor:default;border-color:#eee}

/* ---------- Page article ---------- */
.article-hero{position:relative;min-height:380px;display:flex;align-items:flex-end;
  color:#fff;background-size:cover;background-position:center 20%;background-color:#163a22;
  background-image:linear-gradient(120deg,rgba(16,38,26,.12),rgba(28,66,46,.02)),url('../images/article-hero-bg.jpg')}
.article-hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(16,30,20,.92) 0%,rgba(16,30,20,.42) 40%,rgba(16,30,20,0) 100%)}
.article-hero h1,.article-hero .breadcrumb-hero,.article-hero .article-meta{text-shadow:0 2px 14px rgba(0,0,0,.55)}
/* Bandeau agrandi : image principale affichée EN ENTIER (contain), marges
   comblées par le vert profond commun. L'image (fond inline) se voit en entier. */
.article-hero.has-hero-photo{min-height:520px;background-color:var(--green-deep);
  background-size:cover;background-repeat:no-repeat;background-position:center 20%}
/* Point d'ancrage du recadrage, réglable par article depuis l'admin */
.article-hero.has-hero-photo.pos-top{background-position:center 20%}
.article-hero.has-hero-photo.pos-center{background-position:center center}
.article-hero.has-hero-photo.pos-bottom{background-position:center 80%}
@media(max-width:768px){.article-hero.has-hero-photo{min-height:340px}}
/* Bandeau d'article « affiche » : garde le fond géométrique commun (+ voile de lisibilité) */
.article-hero .container{position:relative;z-index:2;padding-top:44px;padding-bottom:40px}
.article-hero h1{font-family:var(--font-display);font-size:clamp(1.9rem,5.5vw,2.6rem);line-height:1.18;max-width:900px;letter-spacing:-.5px}
.article-date{opacity:.9;margin-top:12px;font-size:.92rem}
/* Affiche/communiqué affiché en entier dans le corps de l'article */
.article-poster{margin:0 0 30px;text-align:center}
.article-poster img{display:inline-block;width:100%;max-width:560px;height:auto;
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
/* Galerie d'illustrations dans le corps de l'article */
.article-gallery{margin:36px 0 8px}
.article-gallery-title{display:flex;align-items:center;gap:9px;font-size:1.3rem;color:var(--green-dark);
  margin-bottom:18px;padding-bottom:8px;border-bottom:2px solid var(--green-light)}
.article-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.article-gallery-tile{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);
  background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;text-align:left;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.article-gallery-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--green)}
.article-gallery-thumb{display:block;width:100%;aspect-ratio:4/3;background-size:cover;background-position:center}
.article-gallery-cap{display:block;padding:9px 12px;font-size:.82rem;color:var(--green-dark);line-height:1.4}
/* Fil d'Ariane Bootstrap — variante claire pour les bandeaux foncés */
.breadcrumb-hero{margin-bottom:14px;font-size:.88rem;letter-spacing:.3px}
.breadcrumb-hero .breadcrumb-item a{color:#fff;opacity:.85;text-decoration:none;transition:.2s}
.breadcrumb-hero .breadcrumb-item a:hover{opacity:1;text-decoration:underline}
.breadcrumb-hero .breadcrumb-item.active{color:rgba(255,255,255,.75)}
.breadcrumb-hero .breadcrumb-item+.breadcrumb-item::before{content:"›";color:rgba(255,255,255,.55)}

.article-layout{display:grid;grid-template-columns:2fr 1fr;gap:52px}
.article-content .article-lead{font-size:1.22rem;font-weight:600;color:var(--green-dark);margin-bottom:24px;line-height:1.55}
.article-content .section-title:not(.light){font-size:clamp(1.5rem,3vw,1.85rem);margin-bottom:28px}
/* Titres de section réduits (pages Recherche, Partenariats, Contact) */
.page-recherche .section-title:not(.light),
.page-partenariats .section-title:not(.light),
.page-contact .section-title:not(.light){font-size:clamp(1.6rem,3.4vw,2rem)}
.article-content p{margin-bottom:18px;line-height:1.75}
/* Mise en forme issue de l'éditeur enrichi */
.article-content h2{font-size:clamp(1.4rem,2.6vw,1.75rem);color:var(--green-dark);margin:32px 0 14px;line-height:1.3}
.article-content h3{font-size:1.25rem;color:var(--green-dark);margin:26px 0 12px;line-height:1.35}
.article-content ul,.article-content ol{margin:0 0 18px;padding-left:26px;line-height:1.75}
.article-content li{margin-bottom:6px}
.article-content blockquote{margin:0 0 22px;padding:14px 22px;border-left:4px solid var(--green);
  background:var(--green-light);border-radius:0 8px 8px 0;color:var(--green-dark);font-style:italic}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content a{color:var(--green-text);text-decoration:underline;font-weight:600}
.article-content a:hover{color:var(--green-dark)}
.article-back{margin-top:34px}

/* Barre de méta dans le bandeau (date, temps de lecture, tag) */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px}
.article-meta .badge-hero{margin:0}
.article-meta .meta-item{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;opacity:.92}
.article-meta .meta-item .icon{opacity:.85}

/* Barre de partage */
.article-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:34px 0 4px;padding-top:26px;border-top:1px solid var(--line)}
.article-share .share-label{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--green-dark);font-size:.92rem;margin-right:2px}
.article-share a,.article-share button{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--green-dark);border-radius:50%;cursor:pointer;
  transition:transform .2s,background .2s,color .2s,border-color .2s}
.article-share a:hover,.article-share button:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px)}
.article-share button.copied{background:var(--green);color:#fff;border-color:var(--green)}

.article-aside h3{color:var(--green-dark);margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--green-light)}
.related-list{list-style:none;padding-left:0} /* cf. .content-aside ul */
.related-list li{margin-bottom:14px}
.related-list a{display:flex;gap:12px;align-items:center;transition:.2s}
.related-list a:hover{color:var(--green)}
.related-thumb{width:64px;height:48px;border-radius:6px;flex-shrink:0;background-size:cover;background-position:center}
.related-thumb.ni-1{background-image:linear-gradient(135deg,#3CA25D,#28422E)}
.related-thumb.ni-2{background-image:linear-gradient(135deg,#356e4a,#8fbf9f)}
.related-thumb.ni-3{background-image:linear-gradient(135deg,#28422E,#4a7a8c)}
.related-thumb.ni-4{background-image:linear-gradient(135deg,#3CA25D,#356e4a)}
.related-list span:last-child{font-size:.9rem;font-weight:600}

.news-img-link{display:block}
.news-body h3 a{transition:.2s}
.news-body h3 a:hover{color:var(--green)}

/* ---------- Responsive ---------- */
@media(max-width:992px){
  .agenda-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:32px}
  .community-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .content-grid{grid-template-columns:1fr}
  .ufr-grid,.cards-3{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:1fr}
  .membre-layout{grid-template-columns:1fr}
  .membre-photo{height:300px;max-width:360px}
}
@media(max-width:768px){
  .hero h1,.hero h2{font-size:2.2rem}
  .hero-slogan{font-size:1.15rem}
  .agenda-grid,.news-grid,.stats-grid{grid-template-columns:1fr}
  .ufr-grid,.cards-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .topbar-inner{justify-content:center;gap:8px}
}
/* Barre supérieure masquée là où le hamburger prend le relais ;
   ses liens sont repris dans le menu mobile (« Accès rapide »). */
@media(max-width:991.98px){
  .topbar{display:none}
}
.quick-mobile-head{border-top:1px solid var(--line);margin-top:6px;padding-top:2px}
.quick-mobile-title{display:block;padding:8px 4px 2px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* ============================================================
   Compatibilité Bootstrap (chargé avant ce fichier)
============================================================ */
/* Le conteneur du site garde sa largeur fixe, quelle que soit la
   largeur d'écran, plutôt que les paliers responsives de Bootstrap. */
.container{max-width:var(--container)}
/* Cartes en colonnes Bootstrap : hauteur homogène */
.col>.agenda-card,.col>.person-card,.col>.news-card{width:100%}
.btn{border:0}
.btn-outline{border:2px solid var(--green)}
/* Neutralise le contour bleu de focus Bootstrap, remplacé par un vert discret */
.btn:focus-visible,.page-link:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(60,162,93,.25)}
/* Le survol des cartes reste net dans la grille Bootstrap */
.col .reveal{will-change:transform,opacity}

/* ============================================================
   Modale d'aperçu rapide Bootstrap (charte UFHB)
============================================================ */
.preview-modal .modal-content{border:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.preview-modal .modal-header{background:var(--green-tint);border-bottom:1px solid var(--line);padding:18px 24px}
.preview-modal .modal-title{color:var(--green-dark);font-family:var(--font-display);font-weight:700}
.preview-modal .modal-body{padding:24px}
.preview-modal .preview-img{height:220px;border-radius:var(--radius-sm);background-size:cover;background-position:center;margin-bottom:18px}
.preview-modal .preview-img.fit-contain{height:340px;background-size:contain;background-repeat:no-repeat;background-color:#eef1ef}
.preview-modal .modal-body h3{color:var(--green-dark);font-size:1.35rem;margin:12px 0 10px;line-height:1.3}
.preview-modal .modal-footer{border-top:1px solid var(--line);padding:16px 24px}

/* ============================================================
   Icônes
============================================================ */
.icon{display:inline-block;vertical-align:middle;flex-shrink:0}
.topbar .social a,.topbar .quick-links a{display:inline-flex;align-items:center;gap:6px}
.topbar .social a{width:30px;height:30px;justify-content:center;border-radius:50%;transition:.2s;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.topbar .social a:hover{background:var(--green);border-color:var(--green);color:#fff;
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(60,162,93,.35)}
.section-title{display:flex;align-items:center;gap:10px}
.section-title .icon{color:var(--green)}
.section-title.light .icon{color:#fff}
.read-more{display:inline-flex;align-items:center;gap:5px}
.read-more .icon{transition:transform .2s}
.news-card:hover .read-more .icon{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:rgba(255,255,255,.1);transition:.25s}
.footer-social a:hover{background:var(--green);transform:translateY(-3px)}
.footer-brand p{display:inline-flex;align-items:center;gap:6px}
.nav-toggle .icon{display:block}

/* ============================================================
   En-tête animé
============================================================ */
.site-header{transition:box-shadow .3s,padding .3s}
.site-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.12)}
.site-header.scrolled .header-inner{height:72px}
.header-inner{transition:height .3s}
.logo-img{transition:transform .3s}
.logo:hover .logo-img{transform:scale(1.05) rotate(-2deg)}

/* ============================================================
   Hero — animations d'entrée
============================================================ */
.hero-content>*{opacity:0;transform:translateY(24px);animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-akwaba{animation-delay:.1s}
.hero h1,.hero h2{animation-delay:.25s}
.hero-slogan{animation-delay:.35s;font-family:var(--font-display);font-style:italic;
  font-size:1.4rem;line-height:1.4;color:#fff;opacity:.96;max-width:620px;margin-bottom:20px;
  padding-left:16px;border-left:3px solid rgba(255,255,255,.55)}
.hero-sub{animation-delay:.5s;font-size:1.1rem;max-width:600px;margin-bottom:28px;opacity:.92}
.hero .btn{animation-delay:.65s}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
.hero-sub{opacity:0}
.hero-content .hero-sub{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .4s forwards}

/* ============================================================
   Révélation au défilement
============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0ms)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Animations ambiantes (mouvement continu) ---------- */
@keyframes auroraDrift{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes heroPan{from{background-position:50% 38%}to{background-position:50% 62%}}
@keyframes btnPulse{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.22)}
  50%{box-shadow:0 10px 26px rgba(0,0,0,.22),0 0 0 7px rgba(255,255,255,.16)}}
.hero-overlay{animation:auroraDrift 9s ease-in-out infinite}
.president-avatar{animation:floatY 5.5s ease-in-out infinite}
.president-band::after{animation:glowPulse 6s ease-in-out infinite}
.stats::before{animation:glowPulse 7.5s ease-in-out infinite}
/* Ken Burns (panoramique lent) sur la diapositive active du hero */
.carousel-item.active .hero.has-bg{animation:heroPan 22s ease-in-out infinite alternate}
/* Pulsation du bouton principal du hero (précédée de l'apparition heroIn, sinon le bouton reste à opacity:0) */
.hero .btn{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .65s forwards, btnPulse 2.8s ease-in-out infinite}
/* Cascade d'apparition (stagger) des cartes des grilles de l'accueil */
.home .row>.col:nth-child(2)>.reveal{--d:90ms}
.home .row>.col:nth-child(3)>.reveal{--d:180ms}
.home .row>.col:nth-child(4)>.reveal{--d:270ms}
.home .row>.col:nth-child(5)>.reveal{--d:120ms}
.home .row>.col:nth-child(6)>.reveal{--d:210ms}
.home .row>.col:nth-child(7)>.reveal{--d:300ms}
.home .row>.col:nth-child(8)>.reveal{--d:390ms}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-content>*{opacity:1;transform:none;animation:none}
  .hero-overlay,.president-avatar,.president-band::after,.stats::before,
  .carousel-item.active .hero.has-bg,.hero .btn{animation:none}
}

/* ============================================================
   Chiffres — icônes + compteur
============================================================ */
.stat{display:flex;flex-direction:column;align-items:center;gap:6px}
.stat-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border-radius:50%;margin-bottom:6px;color:#fff;transition:.3s}
.stat:hover .stat-icon{background:rgba(255,255,255,.22);transform:translateY(-4px)}
.stat-num{font-variant-numeric:tabular-nums}

/* Micro-interactions supplémentaires */
.quick-links a:hover{color:#fff}
.btn-primary:hover{box-shadow:0 8px 20px rgba(60,162,93,.35)}
.agenda-card,.news-card,.person-card,.info-card,.ufr-card{transition:transform .25s,box-shadow .25s}
.info-card:hover,.ufr-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12)}

/* ============================================================
   Bouton flottant « retour en haut »
============================================================ */
.back-to-top{position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(40,66,46,.32);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .3s,transform .3s,visibility .3s,background .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.back-to-top:hover{background:var(--green-dark);transform:translateY(-3px) scale(1.05)}
.back-to-top:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(60,162,93,.4)}
@media(max-width:560px){.back-to-top{right:14px;bottom:14px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:opacity .2s,visibility .2s}}

/* Coordonnées avec icônes */
.contact-info-list li{display:flex;align-items:flex-start;gap:12px}
.ci-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:50%;color:var(--green);box-shadow:var(--shadow)}

/* ============================================================
   Photothèque & Vidéothèque (médias) + visionneuse (lightbox)
============================================================ */
.media-intro{color:var(--muted);max-width:720px;margin-bottom:34px}

.media-tile{display:block;width:100%;padding:0;border:0;background:#fff;cursor:pointer;text-align:left;
  border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s,box-shadow .25s}
.media-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.media-tile:focus-visible{outline:3px solid rgba(60,162,93,.55);outline-offset:2px}

.media-thumb-wrap{position:relative;overflow:hidden}
.media-thumb{height:190px;background-size:cover;background-position:center;transition:transform .45s}
.media-tile:hover .media-thumb{transform:scale(1.06)}
.media-thumb-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(20,40,28,.28))}

.media-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(40,66,46,.72);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.25s;z-index:1}
.media-tile:hover .media-play{background:var(--green);transform:translate(-50%,-50%) scale(1.08)}

.media-body{padding:14px 16px}
.media-body h3{font-size:1.02rem;color:var(--green-dark);margin:0 0 6px;line-height:1.3}
.media-body p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.55}
.media-date{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.media-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.media-ext{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;
  color:var(--green-dark);background:var(--green-tint);border:1px solid var(--green);
  padding:3px 9px;border-radius:20px;transition:.2s}
.media-tile:hover .media-ext{background:var(--green);color:#fff}
.yt-channel{display:flex;align-items:center;gap:16px;margin:0 0 26px;padding:16px 20px;
  text-decoration:none;background:var(--green-tint);border:1px solid var(--line);
  border-left:4px solid var(--green);border-radius:var(--radius-sm);transition:.2s}
.yt-channel:hover{border-color:var(--green);box-shadow:var(--shadow)}
.yt-channel-ic{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--green);border-radius:12px}
.yt-channel-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.yt-channel-txt strong{color:var(--green-dark);font-size:1.05rem}
.yt-channel-txt span{color:var(--muted);font-size:.9rem}
.yt-channel-cta{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-weight:600;font-size:.9rem;color:var(--green-dark);white-space:nowrap}
.yt-channel:hover .yt-channel-cta .icon{transform:translateX(3px);transition:transform .2s}
@media (max-width:560px){.yt-channel{flex-wrap:wrap}.yt-channel-cta{margin-left:0}}

.media-empty{background:var(--green-tint);border:1px dashed var(--line);border-radius:var(--radius);
  padding:40px;text-align:center;color:var(--muted)}

/* Visionneuse plein écran */
.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(15,25,18,.93);
  display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox-content{max-width:1000px;width:100%;display:flex;flex-direction:column;align-items:center}
.lightbox-body{width:100%;display:flex;align-items:center;justify-content:center}
.lightbox-media{max-width:100%;max-height:78vh;display:block;border-radius:8px;box-shadow:var(--shadow-lg)}
.lightbox-frame{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:#000;
  border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg)}
.lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox-cap{color:#eef3ef;text-align:center;margin-top:16px;font-size:.95rem;max-width:820px}
.lightbox-cap:empty{display:none}
.lightbox-btn{position:absolute;z-index:1;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.lightbox-btn:hover{background:var(--green)}
.lightbox-btn:focus-visible{outline:3px solid rgba(255,255,255,.6);outline-offset:2px}
.lightbox-close{top:18px;right:18px}
.lightbox-prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:18px;top:50%;transform:translateY(-50%)}
.lightbox-prev svg{transform:rotate(180deg)}
@media(max-width:600px){.lightbox-prev,.lightbox-next{display:none}}

/* ============================================================
   Recherche globale (icône d'en-tête + page de résultats)
============================================================ */
/* Icône de recherche dans la barre de navigation */
.nav-link-search{display:inline-flex;align-items:center;gap:9px}
.nav-link-search .icon{flex-shrink:0}
/* Grand écran : on ne montre que la loupe (le libellé reste pour les lecteurs d'écran) */
@media(min-width:992px){
  .nav-link-search .nav-search-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .nav-item-search .nav-link-search::before{display:none}
}

/* Formulaire de recherche (bandeau de la page) */
.site-search-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;border-radius:50px;padding:6px 6px 6px 18px;max-width:680px;
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.site-search-form .site-search-ic{color:var(--green);flex-shrink:0;display:inline-flex}
.site-search-form input{flex:1;min-width:180px;border:0;outline:0;background:transparent;
  font-size:1rem;color:var(--text);padding:10px 0;font-family:inherit}
.site-search-form input::placeholder{color:var(--muted)}
.site-search-form .btn{flex-shrink:0}
.page-hero-search .site-search-form{margin-top:6px}

/* Compteur de résultats */
.search-count{color:var(--muted);font-size:1rem;margin:0 0 26px}
.search-count strong{color:var(--green-dark);font-family:var(--font-display);font-size:1.15rem}

/* Liste de résultats */
.search-results{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:12px}
.search-result-link{display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);color:var(--text);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.search-result-link:hover{transform:translateX(4px);box-shadow:var(--shadow-lg);border-left-color:var(--green-dark)}
.search-result-ic{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--green-light);color:var(--green);border-radius:12px}
.search-result-link:hover .search-result-ic{background:var(--green);color:#fff}
.search-result-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.search-result-title{color:var(--green-dark);font-weight:700;font-size:1.05rem;line-height:1.3;
  display:inline-flex;align-items:center;gap:6px}
.search-result-title .icon{color:var(--muted)}
.search-result-excerpt{color:var(--muted);font-size:.9rem;line-height:1.5}
.search-result-meta{color:var(--green-text);font-size:.78rem;font-weight:600}
.search-result-link>.icon{flex-shrink:0;color:var(--green);opacity:0;transform:translateX(-4px);
  transition:opacity .2s,transform .2s}
.search-result-link:hover>.icon{opacity:1;transform:none}
/* Terme surligné */
.search-results mark,.search-count mark{background:rgba(60,162,93,.22);color:inherit;
  padding:0 2px;border-radius:3px}
@media(max-width:600px){
  .search-result-link>.icon{display:none}
  .search-result-link:hover{transform:none}
}

/* ============================================================
   Accueil — Bandeau CTA, Portail par profil, Onglets Actu/Agenda
============================================================ */

/* ---- Bandeau d'appel à l'action ---- */
.cta-ribbon{background:linear-gradient(90deg,var(--green-deep),var(--green-mid));color:#fff}
.cta-ribbon-inner{display:flex;align-items:center;gap:18px;padding:16px 24px;flex-wrap:wrap}
.cta-ribbon-ic{flex:none;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border-radius:50%}
.cta-ribbon-ic .icon{color:#fff}
.cta-ribbon-text{flex:1 1 320px;margin:0;font-weight:600;font-size:1.02rem;line-height:1.45}
.cta-ribbon-btn{flex:none;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--green-deep);
  font-weight:800;padding:11px 22px;border-radius:50px;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.cta-ribbon-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.cta-ribbon-btn .icon{color:var(--green-deep)}

/* ---- Portail : accès par profil + Mot du Président ---- */
.portail{background:var(--green-dark);color:#fff;padding:70px 0;position:relative;overflow:hidden}
.portail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:stretch;position:relative;z-index:1}
.portail-access{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:26px 26px 28px}
.portail-tabs{display:flex;flex-wrap:wrap;gap:10px;border:0;margin:0 0 20px;padding:0;list-style:none}
.portail-tabs .nav-item{margin:0}
.portail-tab{display:inline-flex;align-items:center;gap:8px;background:transparent;color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:9px 18px;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.portail-tab .icon{color:currentColor}
.portail-tab:hover{background:rgba(255,255,255,.1);color:#fff}
.portail-tab.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 6px 16px rgba(60,162,93,.35)}
.portail-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.portail-links li{margin:0}
.portail-links a{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:10px;color:#eaf3ee;
  font-weight:600;transition:background .2s}
.portail-links a .icon{color:var(--green);flex:none;transition:transform .2s}
.portail-links a:hover{background:rgba(255,255,255,.08)}
.portail-links a:hover .icon{transform:translateX(3px)}

.portail-pres{background:#fff;color:var(--text);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
/* Pastille de libellé, commune aux deux cartes du portail : « Accès rapide »
   à gauche, « Mot du Président » à droite. Un seul jeu de déclarations pour
   que les deux restent alignées si l'une évolue. */
.portail-pres-label,.portail-label{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:var(--green-deep);color:#fff;
  padding:5px 14px;border-radius:50px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-bottom:16px}
.portail-pres-label .icon,.portail-label .icon{color:#fff}
.portail-pres-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.portail-pres-avatar{width:64px;height:64px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--green-light);overflow:hidden}
.portail-pres-avatar .icon{color:var(--green-dark)}
.portail-pres-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.portail-pres-id strong{display:block;color:var(--green-dark);font-size:1.02rem}
.portail-pres-id span{color:var(--muted);font-size:.88rem}
.portail-pres blockquote{margin:0 0 16px;font-family:var(--font-display);font-size:1.04rem;line-height:1.5;color:var(--text)}
.portail-pres-link{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--green-text);font-weight:700}
.portail-pres-link .icon{transition:transform .2s}
.portail-pres-link:hover .icon{transform:translateX(3px)}

@media(max-width:900px){.portail{padding:52px 0}.portail-grid{grid-template-columns:1fr;gap:22px}}

/* ---- Onglets Actualités / Agenda ---- */
.home-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;border:0;list-style:none;margin:0 0 40px;padding:0}
.home-tabs .nav-item{margin:0}
.home-tab{display:inline-flex;align-items:center;gap:9px;background:var(--green-tint);color:var(--green-dark);
  border:1px solid var(--line);border-radius:50px;padding:11px 26px;font-weight:800;font-size:1rem;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.home-tab .icon{color:var(--green)}
.home-tab:hover{background:var(--green-light)}
.home-tab.active{background:var(--green-deep);color:#fff;border-color:var(--green-deep);box-shadow:0 8px 20px rgba(0,72,0,.22)}
.home-tab.active .icon{color:#fff}

/* Portail : ligne d'aide en bas du panneau d'accès (équilibre la hauteur) */
.portail-help{margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);font-size:.88rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.portail-help .icon{color:var(--green);flex:none}
.portail-help a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.portail-help a:hover{color:var(--green-light)}

/* ============================================================
   Peaufinage — Hero & cartes actualités
============================================================ */
/* Hero : un peu plus de présence (desktop) + micro-interactions */
@media(min-width:768px){ .hero, .hero-carousel .hero{min-height:620px} }
.hero-akwaba{box-shadow:0 6px 20px rgba(0,0,0,.14)}
.hero .btn .icon{transition:transform .2s}
.hero .btn:hover .icon{transform:translateX(3px)}

/* Cartes actualités : liseré d'accent au survol + titre et lien animés */
.news-card{position:relative}
.news-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--green),var(--green-mid));
  transform:scaleX(0);transform-origin:left;transition:transform .35s}
.news-card:hover{border-color:var(--green)}
.news-card:hover::after{transform:scaleX(1)}
.news-body h3 a{transition:color .2s}
.news-body h3 a:hover{color:var(--green)}
.news-date{background:var(--green-tint);padding:4px 10px;border-radius:50px}
.read-more{display:inline-flex;align-items:center;gap:6px;width:fit-content}
.read-more .icon{transition:transform .2s}
.read-more:hover{color:var(--green-dark)}
.read-more:hover .icon{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .news-card::after{transition:none}
  .read-more .icon,.hero .btn .icon{transition:none}
}

/* ============================================================
   REFONTE DE LA PAGE D'ACCUEIL
   ------------------------------------------------------------
   Deux partis pris :
   1) RYTHME  — plus aucun aplat vert foncé dans le corps de page.
                Le hero s'éclaircit ; le bandeau CTA, le portail et les
                chiffres passent en clair. Il ne reste de sombre que la
                photo du hero, en haut, et le pied de page, en bas —
                tous deux hors du flux des sections.
   2) PALETTE — le vert redevient un ACCENT et cesse d'être un FOND.
                Les titres passent en encre neutre, un or sourd apporte
                la couleur secondaire qui manquait totalement.

   PORTÉE — tout est préfixé par `.home` (classe posée sur <body> par
   includes/header.php pour index.php seul). C'est nécessaire : sans ce
   préfixe, .section-title (15 autres pages), .news-card, .agenda-card,
   .badge-cat, .read-more et .quick-view (actualites, article, evenement,
   membre) seraient repris eux aussi. Pour étendre la refonte au reste du
   site, retirer les préfixes `.home ` / `.home.deco-titles`.

   HORS PÉRIMÈTRE — barre supérieure, en-tête/menu et pied de page : aucune
   règle ci-dessous ne cible .topbar, .site-header, .navbar* ni
   .site-footer*, et le bloc :root n'ajoute que des variables nouvelles
   sans redéfinir celles du haut de ce fichier.
============================================================ */

:root{
  /* --- Neutres chauds : remplacent le vert pâle omniprésent --- */
  --sand:#FAF7F1;          /* fond de section clair (ivoire) */
  --sand-2:#F1ECE1;        /* ivoire soutenu : pastilles, puces */
  --ink:#1E2429;           /* encre des titres — NEUTRE, plus vert foncé */
  --ink-soft:#4A545C;      /* texte secondaire */
  --line-warm:#E7E1D5;     /* filets chauds */

  /* --- Or sourd : couleur secondaire (accents, dates, 2e registre) --- */
  --gold:#B8862B;
  --gold-text:#8A6318;     /* variante accessible sur fond clair (≈5,1:1) */
  --gold-soft:#FBF2DE;
  --gold-line:#EBD9AE;
}

/* ---------- 1. Hero : la photo doit se lire comme une photo ----------
   Le voile passait à 90 % d'opacité : le campus devenait un aplat vert.
   Voile dégressif, ancré en bas à gauche du texte. */
/* Hauteur calée sur le format réel des photos. Les trois panoramas du
   carrousel font ~1350x350 (ratio 3,4 à 3,9). Un hero de 520 px les
   agrandissait d'environ 1,5x au-delà de leur résolution native — d'où le
   flou — et en rognait près de 40 % de la largeur. 26vw reproduit le ratio
   du plus plat (347/1350 = 0,257) : à 1280 px de large la photo s'affiche
   à sa taille native, sans agrandissement ni rognage notable.
   Bornes : 360 px pour que le texte tienne, 500 px pour ne pas envahir
   l'écran sur très grand moniteur. */
.home .hero,.home .hero-carousel .hero{min-height:clamp(360px,26vw,500px)}
/* Panoramique lent réorienté. L'animation heroPan d'origine (ligne ~1491)
   balaie le fond VERTICALEMENT, ce qui avait du sens avec un hero de 520 px :
   la photo débordait en hauteur. Avec la bande calée sur le ratio des
   panoramas, le débordement vertical tombe à zéro et ce mouvement ne
   parcourt plus rien. Le débordement est maintenant horizontal (12 % en
   desktop, 79 % en mobile) : on balaie donc la largeur.
   Une animation l'emporte sur une déclaration simple, d'où la nécessité de
   remplacer l'animation plutôt que de poser un background-position fixe. */
@keyframes heroPanWide{from{background-position:18% 50%}to{background-position:82% 50%}}
.home .carousel-item.active .hero.has-bg{
  animation:heroPanWide 26s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){
  .home .carousel-item.active .hero.has-bg{animation:none}
}
.home .hero.has-bg .hero-overlay{
  background:
    linear-gradient(96deg,rgba(9,18,13,.80) 0%,rgba(9,18,13,.54) 40%,rgba(9,18,13,.16) 74%,transparent 100%),
    linear-gradient(to top,rgba(9,18,13,.50),transparent 42%);
}
/* Voile local sous le bloc de texte : garantit la lisibilité sans
   assombrir l'ensemble de la photo (c'était le défaut d'origine). */
.home .hero-content{isolation:isolate}
.home .hero-content::before{
  content:"";position:absolute;z-index:-1;inset:-10px -60px -20px -40px;
  background:radial-gradient(120% 90% at 22% 55%,rgba(9,18,13,.42),transparent 72%)}
/* Trame de points supprimée : elle grisait encore l'image. */
.home .hero::after{display:none}
/* Diapositives sans photo : dégradés nettement moins chargés. */
.home .hero-slide-1{background:linear-gradient(120deg,#2f5540 0%,#3f8659 55%,#57b478 100%)}
.home .hero-slide-2{background:linear-gradient(120deg,#33604a 0%,#46925f 55%,#63bd83 100%)}
.home .hero-slide-3{background:linear-gradient(120deg,#2f5540 0%,#3a6d74 55%,#4fa76d 100%)}

.home .hero-akwaba{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);
  color:#fff;letter-spacing:4px}
/* Registre « bandeau » : le texte se resserre pour tenir dans la bande.
   Titre fluide, marges réduites, moins de respiration verticale. */
/* Pas de max-width ici : `.container` est redéclaré plus haut dans ce
   fichier APRÈS `.hero-content{max-width:760px}`, donc c'est la largeur de
   conteneur qui s'applique et le bloc reste calé à gauche. Y toucher
   recentrerait le texte au milieu de la bande. */
.home .hero-content{padding:34px 24px}
/* On borne plutôt les lignes de texte, pour garder une longueur lisible
   sur toute la largeur du bandeau. */
.home .hero-slogan,.home .hero-sub{max-width:56ch}
.home .hero-akwaba{margin-bottom:14px;padding:6px 16px}
.home .hero h1,.home .hero h2{
  font-size:clamp(1.95rem,3.2vw,2.8rem);margin-bottom:14px;
  text-shadow:0 2px 26px rgba(0,0,0,.35)}
.home .hero-slogan{margin-bottom:10px}
.home .hero .btn{margin-top:4px;padding:11px 26px}
.home .hero-slogan,.home .hero-sub{text-shadow:0 1px 14px rgba(0,0,0,.4)}
.home .hero .btn{background:#fff;color:var(--ink)}
.home .hero .btn:hover{background:var(--gold-soft);color:var(--ink)}
.home .hero .btn .icon{color:var(--gold-text)}

/* ---------- 2. Bandeau CTA ----------
   Il passait du sombre au sombre, juste sous le hero. Devient une bande
   claire : c'est la première respiration de la page. */
.home .cta-ribbon{
  background:var(--gold-soft);color:var(--ink);
  border-top:3px solid var(--gold);border-bottom:1px solid var(--gold-line)}
.home .cta-ribbon-inner{padding:18px 24px}
.home .cta-ribbon-ic{background:var(--gold);box-shadow:0 4px 12px rgba(184,134,43,.3)}
.home .cta-ribbon-ic .icon{color:#fff}
.home .cta-ribbon-text{color:var(--ink)}
.home .cta-ribbon-btn{
  background:var(--green-deep);color:#fff;
  box-shadow:0 6px 16px rgba(0,72,0,.22)}
.home .cta-ribbon-btn:hover{background:var(--green-mid);box-shadow:0 10px 22px rgba(0,72,0,.26)}
.home .cta-ribbon-btn .icon{color:#fff}

/* Clignotement du bandeau : il signale une échéance (inscription), donc il
   doit accrocher l'œil. Cycle de 1,8 s, soit ~0,55 flash/seconde — très en
   dessous du seuil de 3 flashs/seconde du critère WCAG 2.3.1, et le texte
   garde un contraste élevé sur les deux teintes traversées (#FBF2DE et
   #F2D28A contre l'encre #1E2429 : environ 13:1 et 10,5:1). */
@keyframes ctaRibbonBlink{
  0%,100%{background-color:var(--gold-soft);border-top-color:var(--gold)}
  50%    {background-color:#F2D28A;border-top-color:var(--gold-text)}
}
.home .cta-ribbon{animation:ctaRibbonBlink 1.8s ease-in-out infinite}
/* Pastille : halo pulsé, même principe que le badge « live » de l'agenda. */
@keyframes ctaRibbonPulse{
  0%  {box-shadow:0 4px 12px rgba(184,134,43,.3),0 0 0 0 rgba(184,134,43,.5)}
  70% {box-shadow:0 4px 12px rgba(184,134,43,.3),0 0 0 13px rgba(184,134,43,0)}
  100%{box-shadow:0 4px 12px rgba(184,134,43,.3),0 0 0 0 rgba(184,134,43,0)}
}
.home .cta-ribbon-ic{animation:ctaRibbonPulse 1.8s ease-out infinite}
@media(prefers-reduced-motion:reduce){
  .home .cta-ribbon,.home .cta-ribbon-ic{animation:none}
}

/* ---------- 3. Portail (accès par profil) ----------
   C'était le bloc le plus sombre de la page, alors que c'est la section
   la plus utile. Fond ivoire, panneaux blancs, hiérarchie typographique. */
.home .portail{background:var(--sand);color:var(--ink);padding:62px 0}
.home .portail-grid{align-items:start}

.home .portail-access{
  background:#fff;border:1px solid var(--line-warm);
  box-shadow:0 10px 30px rgba(40,50,45,.06);padding:30px 30px 32px}
/* En-tête du panneau d'accès, en miroir de la carte du Président : la pastille
   « Accès rapide » ouvre le bloc. Marge basse portée à 18 px pour reprendre
   l'espacement qu'assurait le titre supprimé — sinon les onglets remontent
   contre la pastille. */
.home .portail-label{background:var(--gold);color:#fff;margin-bottom:18px}

.home .portail-tab{
  background:var(--sand-2);color:var(--ink-soft);
  border:1px solid var(--line-warm)}
.home .portail-tab:hover{background:var(--gold-soft);color:var(--ink);border-color:var(--gold-line)}
.home .portail-tab.active{
  background:var(--green-deep);color:#fff;border-color:var(--green-deep);
  box-shadow:0 6px 16px rgba(0,72,0,.22)}

.home .portail-links a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-warm)}
.home .portail-links li:last-child a{border-bottom:0}
.home .portail-links a .icon{color:var(--gold)}
.home .portail-links a:hover{background:var(--gold-soft);color:var(--green-deep)}

.home .portail-help{border-top-color:var(--line-warm);color:var(--ink-soft)}
.home .portail-help .icon{color:var(--gold)}
.home .portail-help a{color:var(--green-text)}
.home .portail-help a:hover{color:var(--green-deep)}

/* Mot du Président : carte blanche posée sur l'ivoire, filet or. */
.home .portail-pres{
  border:1px solid var(--line-warm);border-top:4px solid var(--gold);
  box-shadow:0 14px 34px rgba(40,50,45,.09)}
.home .portail-pres-label{background:var(--gold);color:#fff}
.home .portail-pres-id strong{color:var(--ink)}
.home .portail-pres blockquote{color:var(--ink);font-size:1.06rem}
.home .portail-pres-avatar{border:2px solid var(--gold-line)}

/* ---------- 4. Chiffres ----------
   Dernier aplat vert foncé du corps de page, il passe en clair lui aussi.
   La structure ne vient plus du fond sombre mais des tuiles : chaque
   chiffre devient une vignette ivoire posée sur blanc, ce qui tranche avec
   le portail ivoire qui précède — l'alternance clair/clair contrastée
   remplace l'ancien enchaînement de blocs vert foncé. */
.home .stats{
  background:#fff;color:var(--ink);padding:64px 0 56px;
  border-top:1px solid var(--line-warm);border-bottom:1px solid var(--line-warm)}
/* Halos blancs devenus invisibles sur fond clair : remplacés par deux
   voiles très faibles, un or et un vert, qui évitent l'aplat mort. */
.home .stats::before{
  background:
    radial-gradient(circle at 12% 12%,rgba(184,134,43,.07),transparent 42%),
    radial-gradient(circle at 88% 86%,rgba(60,162,93,.07),transparent 44%)}
.home .stats::after{display:none}

/* Le titre de la section était en blanc (.light) : il repasse en encre,
   avec le même filet bicolore que les autres titres de la page. */
.home .stats .section-title.light{color:var(--ink)}
.home .stats .section-title.light .icon{color:var(--gold-text)}
.home .stats .section-title.light::after{
  background:linear-gradient(90deg,transparent,var(--green) 26%,var(--gold) 74%,transparent)}

/* Tuiles : ce sont elles qui portent la lecture en grille, désormais.
   Format compact — 12 tuiles sur 3 rangées, il faut que le bloc reste court.
   Chaque dimension est réduite : rembourrage, médaillon, corps du chiffre
   et libellé, pour que la tuile rétrécisse d'un bloc et pas seulement en
   hauteur. */
.home .stat{
  height:100%;justify-content:flex-start;gap:3px;
  background:var(--sand);border:1px solid var(--line-warm);border-radius:var(--radius-sm);
  padding:16px 12px 15px;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.home .stat:hover{
  transform:translateY(-3px);border-color:var(--gold-line);
  box-shadow:0 10px 20px rgba(40,50,45,.08)}
/* Médaillon 64 -> 44 px. Le SVG est écrit avec width/height en attributs
   (voir includes/icons.php) : le CSS les surcharge sans toucher au PHP. */
.home .stat-icon{
  width:44px;height:44px;margin-bottom:2px;
  background:#fff;border:1px solid var(--gold-line)}
.home .stat-icon .icon{width:22px;height:22px;color:var(--gold-text)}
.home .stat:hover .stat-icon{background:var(--gold-soft);transform:translateY(-2px)}
/* Le vert soutenu est réservé aux chiffres eux-mêmes : c'est le seul
   endroit de la page où il porte une information plutôt qu'un décor. */
.home .stat-num{color:var(--green-deep);font-size:1.95rem}
.home .stat-label{color:var(--ink-soft);opacity:1;font-size:.78rem;line-height:1.35}

/* ---------- 5. Titres de section ----------
   Ils étaient TOUS en vert foncé. Encre neutre + filet bicolore vert/or :
   le vert reprend sa valeur d'accent parce qu'il devient rare. */
.home .section-title,
.home.deco-titles .section-title:not(.light){color:var(--ink)}
.home .section-title::after,
.home.deco-titles .section-title:not(.light)::after{
  background:linear-gradient(90deg,transparent,var(--green) 26%,var(--gold) 74%,transparent)}
.home.deco-titles .section-title:not(.light)::before{
  background:var(--gold);box-shadow:0 0 0 5px #fff,0 0 0 8px var(--gold-soft)}
.home.deco-titles .section-title:not(.light) .icon{
  color:var(--gold-text);
  background:radial-gradient(circle at 30% 30%,#fff,var(--gold-soft));
  box-shadow:0 10px 22px rgba(184,134,43,.18),inset 0 0 0 1px rgba(184,134,43,.22)}
.home.deco-titles .section-title:not(.light) .section-eyebrow{color:var(--gold-text)}
.home.deco-titles .section-title:not(.light) .section-eyebrow::before{
  background:linear-gradient(90deg,transparent,var(--gold))}
.home.deco-titles .section-title:not(.light) .section-eyebrow::after{
  background:linear-gradient(90deg,var(--gold),transparent)}
/* ---------- 6. Actualités & Agenda : titres en encre, dates en or ---------- */
.home .news{padding:58px 0 84px}
.home .home-tab{background:var(--sand-2);color:var(--ink-soft);border-color:var(--line-warm)}
.home .home-tab .icon{color:var(--gold)}
.home .home-tab:hover{background:var(--gold-soft);color:var(--ink);border-color:var(--gold-line)}
.home .home-tab.active{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.home .home-tab.active .icon{color:#fff}

/* Article « à la une », repris de actualites.php : il faut l'aligner sur la
   refonte, sinon son titre resterait en vert foncé à côté de cartes en encre. */
.home .news-featured{border-color:var(--line-warm)}
.home .news-featured-body h3{color:var(--ink)}
.home .news-featured-body h3 a:hover{color:var(--green-text)}
.home .news-featured-body .news-date .icon{color:var(--gold)}
/* L'élément porte `badge-cat` ET `badge-featured` : il faut cumuler les deux
   classes pour passer devant `.home .badge-cat`, déclaré plus bas. */
.home .badge-cat.badge-featured{background:var(--gold);color:#fff;border-color:var(--gold)}
.home .badge-cat.badge-featured .icon{color:#fff}

.home .news-card{border-color:var(--line-warm)}
.home .news-body h3{color:var(--ink)}
.home .news-body h3 a:hover{color:var(--green-text)}
.home .news-date .icon{color:var(--gold)}
.home .read-more{color:var(--green-text)}
.home .quick-view{color:var(--ink)}
.home .quick-view:hover{background:var(--green-deep);color:#fff}

/* Onglet « Fiers de notre communauté ». Les cartes person-card viennent de
   membre.php, où la photo fait 280 px : dans les onglets de l'accueil, ça
   donnait une carte de 437 px contre ~350 px pour une actualité. On rabaisse
   la photo pour que les trois onglets aient des cartes de gabarit comparable.
   240 px sur une carte de 368 px de large (grille à 3 colonnes) = ratio 1,53:1,
   qui cadre correctement un portrait ; à 210 px on tombait à 1,75:1 et les
   visages étaient coupés. */
.home #pane-communaute .person-photo{height:240px}
.home .person-card{border-color:var(--line-warm)}
.home .person-card h3{color:var(--ink)}
.home .person-card-link:hover h3{color:var(--green-text)}

.home .agenda-card{border-color:var(--line-warm)}
.home .agenda-card::before{background:linear-gradient(90deg,var(--gold),#D9B466)}
.home .agenda-date{color:var(--gold-text)}
.home .agenda-date span{color:var(--ink)}
.home .badge-cat{background:var(--gold-soft);color:var(--gold-text);border-color:var(--gold-line)}
.home .badge-cat .icon{color:var(--gold)}
.home .agenda-time{border-color:var(--line-warm)}
.home .agenda-time .icon{color:var(--gold)}
.home .agenda-status.is-upcoming{background:var(--green-deep);box-shadow:0 3px 9px rgba(0,72,0,.26)}

/* ---------- Refonte : adaptations responsives ---------- */
@media(max-width:900px){
  .home .portail{padding:46px 0}
  .home .portail-access{padding:24px 22px 26px}
}
/* Sur mobile, le texte occupe toute la largeur : un voile latéral ne suffit
   plus. On repasse à un voile vertical, uniforme et légèrement plus dense. */
@media(max-width:768px){
  .home .hero.has-bg .hero-overlay{
    background:linear-gradient(to top,rgba(9,18,13,.82) 0%,rgba(9,18,13,.66) 45%,rgba(9,18,13,.60) 100%)}
  .home .hero-content::before{
    inset:-12px -20px;
    background:radial-gradient(130% 80% at 40% 45%,rgba(9,18,13,.38),transparent 78%)}
}
@media(max-width:600px){
  .home .hero,.home .hero-carousel .hero{min-height:460px}
  .home .hero h1,.home .hero h2{font-size:2.3rem}
  /* Le chevron de défilement chevauche le bouton du hero sur mobile
     (défaut déjà présent avant la refonte). On le masque, comme le font
     déjà les flèches précédent/suivant à cette largeur. */
  .home .hero-scroll{display:none}
}