/* ===== PEPG-CI - Public site ===== */
:root{
  color-scheme: light only;   /* design clair : empêche l'inversion auto (dark mode navigateur) */

  /* ===== Charte issue de la maquette Stitch ===== */
  /* Verts : forest-deep (principal) -> primary (le plus sombre) */
  --vert:#06402b; --vert-d:#002819; --vert-l:#0e5c3f;
  --vert-pale:#e7f0ea;
  /* Or mat */
  --or:#c5a028; --or-l:#d9b23c; --or-d:#8a6a00; --or-pale:#f7efd8;
  /* Bleu nuit (bandeaux sombres, pied de page) + bleu Gabon */
  --bleu:#0a192f; --bleu-l:#004a99;
  --orange:#e07b1e;
  /* Neutres */
  --ink:#191c1a; --muted:#404943; --line:#dfe4de; --line-fort:#c0c9c1;
  --bg:#f8faf6; --bg-soft:#f3f4f0; --bg-alt:#edeeea; --bg-dark:#0a192f;
  --surface:#ffffff;
  --shadow:0 4px 20px rgba(10,25,47,.05);
  --shadow-lg:0 24px 60px -24px rgba(10,25,47,.28);
  --r:12px; --r-sm:8px; --r-xs:4px; --maxw:1280px;
  /* Typographie : Playfair Display pour les titres, Plus Jakarta Sans pour l'interface, Manrope pour le texte */
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* garantit que les modales masquées le restent */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.15;letter-spacing:-.02em}
section{scroll-margin-top:78px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.85em 1.5em;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:.98rem;cursor:pointer;border:2px solid transparent;transition:.2s;white-space:nowrap}
.btn-primary{background:var(--vert);color:#fff;box-shadow:0 8px 22px rgba(6,64,43,.28)}
.btn-primary:hover{background:var(--vert-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--vert);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--vert);background:var(--bg-soft)}
.btn-sm{padding:.55em 1.1em;font-size:.9rem;background:var(--or);color:#3a2c00}
.btn-sm:hover{background:var(--or-l)}
.btn-block{width:100%}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:46px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-family:var(--sans);font-size:1.15rem;color:var(--vert);letter-spacing:.02em}
.brand-text small{font-size:.68rem;color:var(--muted);letter-spacing:.01em}
.menu{display:flex;align-items:center;gap:17px}
.menu a{font-family:var(--sans);font-weight:600;font-size:.96rem;color:var(--ink);opacity:.85;transition:.15s}
.menu a.btn{opacity:1}
/* Liens du menu : soulignement animé (dégradé drapeaux) + relèvement */
.menu a:not(.btn){position:relative;opacity:.85;transition:color .22s ease,transform .22s ease,opacity .22s ease}
.menu a:not(.btn)::after{content:"";position:absolute;left:2px;right:2px;bottom:-5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ga-vert),var(--ci-orange));transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.menu a:not(.btn):hover{opacity:1;color:var(--vert);transform:translateY(-2px)}
.menu a:not(.btn):hover::after{transform:scaleX(1)}
.menu a.active{opacity:1;color:var(--vert)}
.menu a.active:not(.btn)::after{transform:scaleX(1)}

/* ===== Menus déroulants du header ===== */
.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-trigger{font-family:var(--sans);font-weight:600;font-size:.96rem;color:var(--ink);opacity:.85;background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;transition:color .22s ease,transform .22s ease,opacity .22s ease}
.nav-trigger:hover{opacity:1;color:var(--vert);transform:translateY(-2px)}
.nav-group.active .nav-trigger{opacity:1;color:var(--vert)}
.nav-caret{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav-group:hover .nav-caret,.nav-group.open .nav-caret{transform:rotate(180deg)}
.nav-drop{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px);min-width:232px;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 54px -24px rgba(10,45,28,.45);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1);z-index:60}
.nav-drop::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-drop::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:inherit;border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:2px}
.nav-group:hover .nav-drop,.nav-group.open .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-drop a{position:relative;display:flex;align-items:center;padding:9px 14px;border-radius:9px;font-size:.92rem;font-weight:600;color:var(--ink);opacity:.9;white-space:nowrap;transition:background .16s ease,color .16s ease,padding .16s ease}
.nav-drop a::after{display:none}
.nav-drop a:hover{background:var(--bg-soft);color:var(--vert);opacity:1;padding-left:19px;transform:none}
.nav-drop a.active{background:var(--bg-soft);color:var(--vert);opacity:1}
[data-theme="dark"] .nav-trigger{color:var(--ink)}
[data-theme="dark"] .nav-drop{background:rgba(21,34,27,.98);border-color:var(--line)}
[data-theme="dark"] .nav-drop a{color:var(--ink)}
@media (max-width:1024px){
  .nav-group{display:block;width:100%}
  .nav-trigger{width:100%;justify-content:space-between;padding:8px 0;font-size:1rem}
  .nav-drop{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;min-width:0;box-shadow:none;border:0;background:none;backdrop-filter:none;padding:0 0 4px 14px;gap:0;max-height:0;overflow:hidden;transition:max-height .32s ease}
  .nav-drop::before,.nav-drop::after{display:none}
  .nav-group:hover .nav-drop,.nav-group.open .nav-drop{transform:none}
  .nav-group.open .nav-drop{max-height:440px}
  .nav-drop a{padding:8px 6px}
}

/* Marque / logo dans l'en-tête */
.brand{transition:transform .25s ease}
.brand-logo{transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .3s}
.brand:hover .brand-logo{transform:scale(1.07) rotate(-3deg);filter:drop-shadow(0 6px 12px rgba(6,64,43,.25))}
.brand-text strong{transition:color .2s ease}
.brand:hover .brand-text strong{color:var(--vert-d)}

/* Bouton « Devenir membre » */
.menu a.btn.btn-sm{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.menu a.btn.btn-sm:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 9px 20px rgba(197,160,40,.4)}
.menu a.btn.btn-sm:active{transform:translateY(0) scale(.98)}

/* Bouton menu mobile (burger) */
.burger span{transition:transform .25s ease,background .2s ease,opacity .2s ease}
.burger:hover span{background:var(--or)}

/* ---- Bandeau de page (pages internes) ---- */
.page-hero{background:linear-gradient(160deg,#f6faf7,#eef5f0);border-bottom:1px solid var(--line);padding:56px 0 48px;text-align:center;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,#d9efe1,transparent 70%);top:-160px;right:-100px;opacity:.6;pointer-events:none}
.page-hero .inner{position:relative}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;color:var(--ink)}
.page-hero p{color:var(--muted);max-width:660px;margin:14px auto 0;font-size:1.08rem}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.breadcrumb a{color:var(--vert);font-weight:600}
.page-hero .page-tagline{justify-content:center;margin:16px 0 2px;font-size:1rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:3px;background:var(--vert);border-radius:3px;transition:.25s}

/* ---- Couleurs des drapeaux (Gabon + Côte d'Ivoire) ---- */
:root{--ga-vert:#009e60;--ga-jaune:#fcd116;--ga-bleu:#3a75c4;--ci-orange:#f77f00;--ci-blanc:#f4f6f4}
.flag-stripe{position:absolute;top:0;left:0;right:0;height:5px;z-index:3;background:linear-gradient(90deg,
  var(--ga-vert) 0 16.66%, var(--ga-jaune) 16.66% 33.33%, var(--ga-bleu) 33.33% 50%,
  var(--ci-orange) 50% 66.66%, var(--ci-blanc) 66.66% 83.33%, var(--ga-vert) 83.33% 100%)}
.flag-mini{display:block;width:120px;height:4px;border-radius:4px;margin:16px auto 0;background:linear-gradient(90deg,
  var(--ga-vert) 0 33%, var(--ga-jaune) 33% 50%, var(--ga-bleu) 50% 66%, var(--ci-orange) 66% 100%)}

/* ---- Animations d'apparition ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0)*70ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-logo,.logo-glow{animation:none!important}}

/* ---- Hero (centré, logo en tête) ---- */
.hero{position:relative;padding:48px 0 0;background:linear-gradient(180deg,#f6faf7 0%,#fff 72%);overflow:hidden}
.hero-center{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 0 58px}
.hero-logo-wrap{position:relative;margin-bottom:6px}
.logo-glow{position:absolute;inset:-16% -8%;z-index:0;border-radius:50%;filter:blur(48px);opacity:.5;
  background:conic-gradient(from 0deg,var(--ga-vert),var(--ga-jaune),var(--ga-bleu),var(--ci-orange),var(--ga-vert));
  animation:spin 20s linear infinite}
.hero-logo{position:relative;z-index:1;width:min(88%,440px);filter:drop-shadow(0 22px 40px rgba(10,25,47,.18));animation:floaty 6s ease-in-out infinite}
.hero-center .lead{margin-left:auto;margin-right:auto}
.hero-center .hero-cta{justify-content:center}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-old{position:relative;padding:70px 0 0;background:linear-gradient(180deg,#f6faf7 0%,#fff 70%)}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.hero-bg::before{width:520px;height:520px;background:radial-gradient(circle,#bfe6cf,transparent 70%);top:-160px;right:-120px}
.hero-bg::after{width:420px;height:420px;background:radial-gradient(circle,#f3dfa5,transparent 70%);bottom:-140px;left:-120px}
.hero-inner{position:relative;display:block;padding:6px 0 56px}
.hero-top{display:grid;grid-template-columns:0.82fr 1.18fr;gap:42px;align-items:center}
.hero-visual{margin-top:-14px}   /* logo un peu plus haut */
.hero-head{text-align:left}
.hero-head .eyebrow{margin-bottom:16px}
.hero-below{max-width:900px;margin-top:14px;text-align:left}
.hero-below .lead{margin-top:0}
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or);background:#fff6e0;border:1px solid #f0e2b8;padding:.4em .9em;border-radius:999px;margin-bottom:20px}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800;color:var(--ink)}
.hero h1 .hl{color:var(--vert);position:relative;white-space:nowrap}
.hero .lead{font-size:1.14rem;color:#3a4a41;margin:22px 0 18px;max-width:36em}
.hero-tagline{font-family:var(--sans);font-weight:800;letter-spacing:.04em;color:var(--bleu);font-size:1.05rem;margin-bottom:26px}
.hero-tagline em{color:var(--or);font-style:normal;margin:0 .3em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{display:flex;justify-content:center}
.hero-logo{width:min(100%,420px);filter:drop-shadow(0 24px 40px rgba(10,25,47,.16))}
.hero-strip{border-top:1px solid var(--line);background:#fff}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 24px}
.strip-grid div{display:flex;flex-direction:column;align-items:center;text-align:center}
.strip-grid b{font-family:var(--sans);font-size:2.1rem;font-weight:800;color:var(--vert);line-height:1}
.strip-grid span{font-size:.9rem;color:var(--muted);margin-top:4px}

/* ---- Sections ---- */
.section{padding:84px 0}
.section-alt{background:var(--bg-soft)}
.section-head{text-align:center;max-width:720px;margin:0 auto 48px}
.kicker{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:12px}
.kicker.light{color:var(--or-l)}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;color:var(--ink)}
.section-head h2.oneline{white-space:nowrap}
@media (max-width:820px){.section-head h2.oneline{white-space:normal;font-size:clamp(1.5rem,5.5vw,2rem)}}
.section-dark .section-head h2{color:#fff}
.section-sub{color:var(--muted);margin-top:14px;font-size:1.06rem}
.section-dark .section-sub{color:#c7d8cd}

/* ---- Présentation ---- */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.prose p{margin-bottom:18px;font-size:1.08rem;color:#374a40}
.prose strong{color:var(--ink)}
.vision-card{background:linear-gradient(160deg,var(--vert),var(--vert-d));color:#fff;padding:34px;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.vision-card h3{font-size:1.3rem;margin-bottom:14px;color:#fff}
.vision-card p{color:#e7f3ec;font-style:italic;margin-bottom:20px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:30px;color:#eaf4ee}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;background:var(--or);color:#3a2c00;border-radius:50%;font-size:.75rem;font-weight:900;display:flex;align-items:center;justify-content:center}

/* ---- Cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d3e4d9}
.card h3{font-size:1.2rem;margin-bottom:10px;color:var(--ink)}
.card p{color:var(--muted);font-size:1rem}
.card.num{position:relative;padding-top:34px}
.card.num .n{font-family:var(--sans);font-weight:800;font-size:1rem;color:#fff;background:var(--vert);width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cards .wide{grid-column:span 1}
.card .ic{font-size:2rem;margin-bottom:14px}
.act .card{text-align:left}

/* ---- Cartes de navigation : icônes SVG pro + accents drapeaux ---- */
.nav-card{position:relative;overflow:hidden;--accent:#06402b;--accent-soft:#e3f3ea}
.nav-card.acc-vert{--accent:#06402b;--accent-soft:#e3f3ea}
.nav-card.acc-bleu{--accent:#0a192f;--accent-soft:#e6edf8}
.nav-card.acc-or{--accent:#a97e00;--accent-soft:#fbf1d5}
.nav-card.acc-orange{--accent:#d5620d;--accent-soft:#fdead9}
.nav-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.nav-card:hover::before{transform:scaleX(1)}
.card-ic{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--accent-soft);color:var(--accent);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.card-ic svg{width:28px;height:28px}
.nav-card:hover .card-ic{transform:translateY(-2px) scale(1.06) rotate(-4deg);box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 30%,transparent)}
.nav-card .event-more{color:var(--accent)}

/* ---- Engagements ---- */
.engagements{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.eng{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow)}
.eng-ic{flex:none;width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,#fff6e0,#f5e3ac);color:var(--or);display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.eng-ic svg{width:24px;height:24px}
.eng:hover .eng-ic{transform:scale(1.08) rotate(-4deg)}
.eng h3{font-size:1.12rem;margin-bottom:6px}
.eng p{color:var(--muted);font-size:.98rem}

/* ---- Gouvernance (dark) ---- */
.section-dark{background:linear-gradient(160deg,var(--bg-dark),#0a2016);color:#fff}
.org{max-width:960px;margin:0 auto}
.org-top{display:flex;justify-content:center;margin-bottom:14px}
.org-node{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px 22px;text-align:center;backdrop-filter:blur(4px)}
.org-node .role{display:block;font-family:var(--sans);font-weight:700;font-size:1.05rem;color:#fff}
.org-node .desc{display:block;font-size:.9rem;color:#bcd2c5;margin-top:6px}
.org-node.president{background:linear-gradient(150deg,var(--or),var(--or-l));border:0;min-width:260px;width:auto;max-width:340px}
.org-node.president .role{color:#3a2c00;font-size:1.25rem}
.org-node.president .desc{color:#5a4410}
.org-poles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px;position:relative}
.org-poles::before{content:"";position:absolute;top:-14px;left:12.5%;right:12.5%;height:1px;background:rgba(255,255,255,.18)}
.org-foot{text-align:center;margin-top:34px;color:#cfe0d5}
.org-foot strong{color:var(--or-l)}
.org-loading{text-align:center;color:#bcd2c5;padding:20px}

/* Nœuds cliquables (boutons) */
.org-node{-webkit-appearance:none;appearance:none;font-family:var(--sans);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;transition:.2s}
.org-node:hover{transform:translateY(-3px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.org-node .resp{display:block;font-weight:700;color:var(--or-l);font-size:.98rem}
.org-node.president .resp{color:#3a2c00}
.org-node.president:hover{filter:brightness(1.04)}

/* Avatars */
.gov-avatar{width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center;background-color:#0e3524;border:2px solid rgba(255,255,255,.3);margin-bottom:4px}
.gov-avatar-lg{width:96px;height:96px}
.gov-avatar-ph{display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;color:#fff;font-size:1.4rem;background:linear-gradient(150deg,var(--vert-l),var(--vert-d))}
.gov-avatar-lg.gov-avatar-ph{font-size:2rem}
.org-node.president .gov-avatar{border-color:rgba(58,44,0,.35)}

/* Modale responsable */
.gov-modal{position:fixed;inset:0;z-index:120;background:rgba(9,25,17,.62);display:flex;align-items:flex-start;justify-content:center;padding:44px 20px;overflow-y:auto}
.gov-modal-box{background:#fff;border-radius:20px;max-width:560px;width:100%;position:relative;box-shadow:var(--shadow-lg);padding:34px}
.gov-modal-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;border-radius:50%;background:#eef2ef;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer}
.gov-modal-x:hover{background:#e2e9e4}
.gov-head{display:flex;gap:20px;align-items:center;margin-bottom:20px}
.gov-head .gov-avatar-lg{flex:none;border-color:var(--line)}
.gov-role{display:block;font-family:var(--sans);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--or)}
.gov-head h2{font-size:1.5rem;color:var(--ink);margin:4px 0 2px}
.gov-fonction{color:var(--muted);font-size:.98rem}
.gov-bio{color:#374a40;line-height:1.7;border-top:1px solid var(--line);padding-top:18px}
/* Rendu de la présentation saisie au format WYSIWYG */
.gov-bio p{margin:0 0 .8em}
.gov-bio p:last-child{margin-bottom:0}
.gov-bio h3,.gov-bio h4{font-size:1.05rem;font-weight:800;color:var(--ink);margin:1em 0 .35em}
.gov-bio ul,.gov-bio ol{margin:0 0 .8em 1.4em}
.gov-bio li{margin:.2em 0}
.gov-bio blockquote{border-left:3px solid var(--vert);margin:.6em 0;padding:.2em 0 .2em 14px;color:var(--muted);font-style:italic}
.gov-bio a{color:var(--vert);text-decoration:underline}
.gov-bio-empty{color:var(--muted);font-style:italic}

/* Cartes de navigation (accueil) */
.nav-card{display:flex;flex-direction:column;gap:8px}
.nav-card .event-more{margin-top:6px}

/* ---- Adhésion ---- */
.join{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:linear-gradient(160deg,#f6faf7,#fff);border:1px solid var(--line);border-radius:24px;padding:44px;box-shadow:var(--shadow-lg)}
.join-copy h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px}
.join-copy p{color:#3a4a41;margin-bottom:18px}
.join-copy .ticks li{color:#374a40}
.join-copy .ticks li::before{background:var(--vert);color:#fff}
.join-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.field{margin-bottom:14px;display:flex;flex-direction:column}
.field label{font-family:var(--sans);font-weight:600;font-size:.86rem;margin-bottom:6px;color:var(--ink)}
.field input,.field textarea,.field select{font-family:var(--body);font-size:1rem;padding:.75em .9em;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfb;transition:.15s;resize:vertical;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--vert);background:#fff;box-shadow:0 0 0 3px rgba(6,64,43,.1)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2306402b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;padding-right:2.4em}
.field select:invalid{color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.join-code-info{color:#374a40;margin-bottom:12px;font-size:.98rem}
#joinCode{text-align:center;letter-spacing:6px;font-weight:700;font-size:1.2rem}
.form-note{margin-top:12px;font-size:.92rem;text-align:center;min-height:1.2em}
.form-note.ok{color:var(--vert);font-weight:600}
.form-note.err{color:#c0392b;font-weight:600}

/* ---- Actualités / Événements : grandes cartes + carrousel ---- */
.events-grid{display:flex;flex-direction:column;gap:32px;max-width:1080px;margin:0 auto}
.event-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,48%) 1fr;transition:transform .3s ease,box-shadow .3s ease}
.event-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#d3e4d9}

/* Carrousel */
.event-slider{position:relative;overflow:hidden;background:#0e2a1c;min-height:300px}
.event-slider .slides{display:flex;height:100%;min-height:inherit;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.event-slide{position:relative;min-width:100%;background-size:cover;background-position:center;background-color:#e9efeb;animation:kenburns 11s ease-in-out infinite alternate}
.event-slide.empty{display:flex;align-items:center;justify-content:center;font-size:3.2rem;color:#a7c1b2;background:linear-gradient(150deg,#eef5f0,#e2efe7);animation:none}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.slider-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:3}
.slider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.25s}
.slider-dots button.on{background:#fff;width:24px;border-radius:5px}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.4);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .25s,background .2s;z-index:3;display:flex;align-items:center;justify-content:center}
.event-slider:hover .slider-nav{opacity:1}
.slider-nav:hover{background:rgba(0,0,0,.68)}
.slider-nav.prev{left:12px}
.slider-nav.next{right:12px}
.event-badge{position:absolute;top:16px;left:16px;z-index:3;background:rgba(6,64,43,.92);color:#fff;font-family:var(--sans);font-weight:700;font-size:.78rem;padding:.34em .9em;border-radius:999px;backdrop-filter:blur(2px)}
.event-play{position:absolute;right:16px;top:16px;z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center}

/* Corps de la carte */
.event-body{padding:30px 34px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.event-date{font-family:var(--sans);font-weight:700;font-size:.82rem;color:var(--or);text-transform:uppercase;letter-spacing:.04em}
.event-body h3{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ink);line-height:1.25}
.event-body p{color:var(--muted);font-size:1.04rem;line-height:1.6}
.event-loc{font-size:.92rem;color:var(--muted)}
.event-more{align-self:flex-start;margin-top:8px;font-family:var(--sans);font-weight:700;font-size:.95rem;color:#fff;background:var(--vert);border:0;padding:.65em 1.3em;border-radius:999px;cursor:pointer;transition:background .2s,transform .2s}
.event-more:hover{background:var(--vert-d);transform:translateX(3px)}
.events-empty{text-align:center;color:var(--muted);padding:30px}
@media (max-width:760px){
  .event-card{grid-template-columns:1fr}
  .event-slider{min-height:230px}
  .event-body{padding:24px}
}
@media (prefers-reduced-motion:reduce){.event-slide{animation:none}.event-slider .slides{transition:none}}

/* Modal événement */
.ev-modal{position:fixed;inset:0;z-index:120;background:rgba(9,25,17,.62);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.ev-modal-box{background:#fff;border-radius:20px;max-width:760px;width:100%;position:relative;box-shadow:var(--shadow-lg);overflow:hidden}
.ev-modal-x{position:absolute;top:14px;right:16px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.evd-cover{width:100%;max-height:360px;object-fit:cover;display:block;background:#e9efeb}
.evd-inner{padding:30px 34px 36px}
.evd-date{font-family:var(--sans);font-weight:700;color:var(--or);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}
.evd-inner h2{font-size:clamp(1.5rem,3vw,2rem);margin:8px 0 6px;color:var(--ink)}
.evd-loc{color:var(--muted);margin-bottom:18px}
.evd-content{color:#374a40;font-size:1.05rem;line-height:1.7;white-space:pre-wrap;margin-bottom:22px}
.evd-video{margin:22px 0}
.evd-video video{width:100%;border-radius:14px;background:#000}
.ev-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:14px;overflow:hidden}
.ev-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.evd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:20px}
.evd-gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer}

/* ---- Liste de diffusion ---- */
.nl-box{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px;box-shadow:var(--shadow);text-align:center}
.nl-head h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--ink)}
.nl-head .section-sub,.nl-head p{color:var(--muted);margin-top:8px}
.nl-form{margin-top:22px}
.nl-step{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.nl-step input{flex:1;min-width:200px;font-family:var(--body);font-size:1rem;padding:.8em 1em;border:1.5px solid var(--line);border-radius:12px;background:#fbfdfb}
.nl-step input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.1)}
#nlCode{text-align:center;letter-spacing:6px;font-weight:700;font-size:1.2rem}
.nl-info{width:100%;color:#374a40;margin-bottom:6px}
.nl-note{margin-top:14px;min-height:1.2em;font-size:.96rem;font-weight:600}
.nl-note.ok{color:var(--vert)}
.nl-note.err{color:#c0392b}

/* ---- Footer ---- */
.site-footer{background:#0b1f15;color:#cfe0d5;padding:56px 0 0}
.footer-grid{display:grid;grid-template-columns:1.35fr 1.95fr 1.05fr;gap:36px;padding-bottom:40px}
.f-nav-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));column-gap:20px}
.f-nav-links a{margin-bottom:8px}
.f-logo{height:64px;background:#fff;padding:8px 12px;border-radius:12px;margin-bottom:14px}
.f-brand p{font-size:.96rem;margin-bottom:6px}
.f-devise{color:var(--or-l);font-family:var(--sans);font-weight:700;letter-spacing:.03em}
.f-social{display:flex;gap:12px;margin-top:16px}
.soc{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:transform .18s,filter .18s;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.soc:hover{transform:translateY(-2px);filter:brightness(1.1)}
.soc-fb{background:#1877F2}
.soc-li{background:#0A66C2}
.f-col h4{font-family:var(--sans);color:#fff;font-size:1rem;margin-bottom:14px}
.f-col a,.f-col p{display:block;color:#b5cabd;font-size:.95rem;margin-bottom:8px;transition:.15s}
.f-col a:hover{color:var(--or-l)}
.f-admin{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--or-l);font-family:var(--sans);font-weight:600;font-size:.9rem;border:1px solid rgba(224,168,31,.35);padding:.4em .9em;border-radius:999px;transition:.15s}
.f-admin:hover{background:rgba(224,168,31,.12);border-color:var(--or-l)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.85rem;color:#8fa89a}
.admin-link{color:#8fa89a;text-decoration:underline;text-underline-offset:3px}
.admin-link:hover{color:var(--or-l)}

/* ---- Responsive ---- */
@media (max-width:900px){
  .hero-top{grid-template-columns:1fr;text-align:center;gap:18px}
  .hero-visual{margin-top:0}
  .hero-head,.hero-below{text-align:center}
  .hero-below{margin-left:auto;margin-right:auto}
  .hero-logo{width:min(76%,320px)}
  .hero-cta{justify-content:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .events-grid{grid-template-columns:1fr 1fr}
  .engagements{grid-template-columns:1fr}
  .org-poles{grid-template-columns:1fr 1fr}
  .org-poles::before{display:none}
  .join{grid-template-columns:1fr;padding:30px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .menu{position:fixed;inset:72px 0 auto 0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:20px 24px;gap:16px;transform:translateY(-140%);transition:.3s;box-shadow:var(--shadow)}
  .menu.open{transform:translateY(0)}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .strip-grid{grid-template-columns:1fr 1fr;gap:22px}
  .cards{grid-template-columns:1fr}
  .events-grid{grid-template-columns:1fr}
  .evd-inner{padding:24px 20px 28px}
  .row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom .container{flex-direction:column;text-align:center}
  body{font-size:16px}
  .section{padding:60px 0}
}

/* ===================== PHASE 1 : UX ===================== */
/* Bouton thème */
.theme-toggle{background:none;border:0;font-size:1.15rem;cursor:pointer;padding:6px 9px;border-radius:9px;line-height:1;transition:background .2s}
.theme-toggle:hover{background:var(--bg-soft)}

/* Retour en haut */

/* WhatsApp */
.wa-btn{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.45);z-index:60;transition:transform .2s}
.wa-btn:hover{transform:scale(1.08)}

/* Bandeau cookies */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#0b1f15;color:#e8f0ea;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;box-shadow:0 -6px 24px rgba(0,0,0,.25);font-size:.92rem}
.cookie-banner .btn{white-space:nowrap}

/* FAQ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 24px;font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q::after{content:"+";font-size:1.5rem;color:var(--vert);flex:none}
.faq-item.open .faq-q::after{content:"−"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 24px}
.faq-item.open .faq-a{max-height:600px;padding-bottom:20px}
.faq-a p{color:var(--muted);margin:0}

/* Page 404 */
.err-wrap{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px}
.err-code{font-family:var(--sans);font-weight:800;font-size:clamp(4rem,14vw,8rem);line-height:1;background:linear-gradient(90deg,var(--vert),var(--or),var(--bleu));-webkit-background-clip:text;background-clip:text;color:transparent}
.err-wrap h1{font-size:1.6rem;margin:10px 0 8px}
.err-wrap p{color:var(--muted);max-width:480px;margin-bottom:24px}

/* ===================== THÈME SOMBRE ===================== */
:root[data-theme="dark"]{--ink:#e8f0ea;--muted:#9db3a7;--line:#28352d;--bg:#0c1c33;--bg-soft:#0c1410}
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
[data-theme="dark"] .site-header{background:rgba(15,26,20,.92);border-bottom-color:var(--line)}
[data-theme="dark"] .brand-text strong{color:var(--vert-l)}
[data-theme="dark"] .menu a:not(.btn){color:var(--ink)}
[data-theme="dark"] .menu{background:var(--bg)}
[data-theme="dark"] .hero{background:linear-gradient(180deg,#0d1b31,#0c1c33 72%)}
[data-theme="dark"] .hero h1,[data-theme="dark"] .section-head h2,[data-theme="dark"] .card h3,[data-theme="dark"] .eng h3,[data-theme="dark"] .event-body h3,[data-theme="dark"] .faq-q{color:var(--ink)}
[data-theme="dark"] .card,[data-theme="dark"] .eng,[data-theme="dark"] .event-card,[data-theme="dark"] .join-form,[data-theme="dark"] .nl-box,[data-theme="dark"] .faq-item,[data-theme="dark"] .gov-modal-box,[data-theme="dark"] .ev-modal-box{background:#112240;border-color:var(--line)}
[data-theme="dark"] .join{background:linear-gradient(160deg,#0d1b31,#112240);border-color:var(--line)}
[data-theme="dark"] .page-hero{background:linear-gradient(160deg,#0d1b31,#0c1c33);border-bottom-color:var(--line)}
[data-theme="dark"] .field input,[data-theme="dark"] .field textarea,[data-theme="dark"] .field select,[data-theme="dark"] .nl-step input,[data-theme="dark"] #joinCode{background:#0a192f;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .prose p,[data-theme="dark"] .lead{color:#cdd8d1}
[data-theme="dark"] .card p,[data-theme="dark"] .event-body p,[data-theme="dark"] .eng p,[data-theme="dark"] .faq-a p,[data-theme="dark"] .section-sub,[data-theme="dark"] .event-loc,[data-theme="dark"] .join-copy p{color:var(--muted)}
[data-theme="dark"] .card-ic{filter:brightness(.9)}
[data-theme="dark"] .theme-toggle:hover{background:#1b2a22}

/* ===================== ESPACE MEMBRE ===================== */
.mauth-card{max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:32px 30px}
.mauth-card h2{font-size:1.4rem;margin-bottom:18px;text-align:center}
.mauth-card .field label{display:block;font-family:var(--sans);font-weight:600;font-size:.86rem;margin:12px 0 6px}
.mauth-card .field input{width:100%;padding:.75em .9em;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfb}
.mauth-card .field input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.1)}
.mauth-card .btn{margin-top:18px}
.mauth-links{text-align:center;margin-top:14px}
.mauth-links a{color:var(--vert);font-weight:600;font-size:.92rem}
.mauth-hint{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;text-align:center}
.mauth-hint a{color:var(--vert);font-weight:600}
.a-link{background:none;border:0;color:var(--or);font-weight:700;cursor:pointer;font-family:var(--sans);font-size:.9rem;padding:0 0 0 8px}

/* Barre / onglets membre */
.member-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.member-tabs{display:flex;gap:10px;flex-wrap:wrap}
.mtab{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.55em 1.1em;font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--muted);cursor:pointer;transition:.15s}
.mtab:hover{border-color:#cdd9d1}
.mtab.active{background:var(--vert);border-color:var(--vert);color:#fff}
.member-who{color:var(--muted);font-size:.9rem}
.member-who b{color:var(--vert)}

/* Annuaire */
.ann-toolbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.ann-toolbar input,.ann-toolbar select{padding:.7em 1em;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfb;font-family:var(--body);font-size:1rem}
.ann-toolbar input{flex:1;min-width:220px}
.ann-toolbar input:focus,.ann-toolbar select:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.1)}
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.member-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px;display:flex;gap:16px;transition:.25s;min-width:0}
.member-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d3e4d9}
.mcard-av{flex:none;width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center;background-color:#e9efeb}
.mcard-av.ph{display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;color:#fff;background:linear-gradient(150deg,var(--vert-l),var(--vert-d))}
.mcard-body{min-width:0;display:flex;flex-direction:column;gap:5px}
/* Les libellés saisis par les membres peuvent être très longs et sans espace
   (ex. "…/Media/Journalisme/Personal Branding/…") : on force la coupure. */
.mcard-body h3,.mcard-role,.mcard-tag,.mcard-city,.evd-inner h2,.evd-loc,.evd-content{overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.mcard-body h3{font-size:1.12rem;color:var(--ink)}
.mcard-role{color:var(--muted);font-size:.92rem}
.mcard-tag{display:inline-block;background:#eef4f0;color:var(--vert);font-weight:600;font-size:.78rem;padding:.25em .7em;border-radius:999px;width:fit-content;max-width:100%}
.mcard-city{font-size:.85rem;color:var(--muted)}
.mcard-btn{align-self:flex-start;margin-top:6px}
.mcard-contacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* Profil */
.profil-form{display:grid;grid-template-columns:220px 1fr;gap:30px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:30px}
.profil-photo{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.profil-avatar{width:150px;height:150px;border-radius:50%;background-size:cover;background-position:center;background-color:#e9efeb;border:3px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;font-size:2.4rem;color:#fff}
.profil-avatar.ph{background:linear-gradient(150deg,var(--vert-l),var(--vert-d))}
.profil-fields .field label{display:block;font-family:var(--sans);font-weight:600;font-size:.86rem;margin:0 0 6px}
.profil-fields .field input,.profil-fields .field select,.profil-fields .field textarea{width:100%;padding:.7em .9em;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfb;font-family:var(--body);font-size:1rem}
.profil-fields .field input:focus,.profil-fields .field select:focus,.profil-fields .field textarea:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.1)}
.profil-fields .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.profil-fields .field{margin-bottom:12px}
.mini-check{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);margin:6px 0 14px;cursor:pointer}
.mini-check input{width:auto!important}
@media (max-width:720px){.profil-form{grid-template-columns:1fr}.profil-fields .row{grid-template-columns:1fr}}

/* Thème sombre - espace membre */
[data-theme="dark"] .mauth-card,[data-theme="dark"] .member-card,[data-theme="dark"] .profil-form,[data-theme="dark"] .mtab{background:#112240;border-color:var(--line)}
[data-theme="dark"] .mauth-card .field input,[data-theme="dark"] .ann-toolbar input,[data-theme="dark"] .ann-toolbar select,[data-theme="dark"] .profil-fields input,[data-theme="dark"] .profil-fields select,[data-theme="dark"] .profil-fields textarea{background:#0a192f;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .mcard-tag{background:#0e3524}
[data-theme="dark"] .mtab{color:var(--muted)}

/* Changement de mot de passe (espace membre) */
.mustchange-notice{background:#fff6e0;border:1px solid #f0e2b8;color:#7a5c00;border-radius:12px;padding:14px 18px;margin-bottom:20px;font-weight:600}
.mustchange-notice .a-link{color:#a9791b}
.pass-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px 30px;margin-top:24px;max-width:520px}
.pass-card h3{margin-bottom:16px}
.pass-card .field{margin-bottom:12px}
.pass-card .field label{display:block;font-family:var(--sans);font-weight:600;font-size:.86rem;margin:0 0 6px}
.pass-card .field input{width:100%;padding:.7em .9em;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfb}
.pass-card .field input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.1)}
[data-theme="dark"] .pass-card{background:#112240;border-color:var(--line)}
[data-theme="dark"] .pass-card .field input{background:#0a192f;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .mustchange-notice{background:#2a2410;border-color:#4a4020;color:#e0c56a}

/* ===================== HEADER COMPACT (tout tenir sur une ligne) ===================== */
.site-header .nav{gap:14px;padding-left:6px;padding-right:14px}   /* logo décalé vers la gauche */
.brand-logo{height:42px}
.brand-text strong{font-size:1.02rem}
.brand-text small{font-size:.58rem;white-space:nowrap}
.menu{gap:13px}
.menu a{font-size:.85rem}
.menu a.btn.btn-sm{padding:.5em .95em;font-size:.82rem}
.theme-toggle{padding:6px 7px;font-size:1.05rem}
/* Menu déroulant (hamburger) dès 1024px pour éviter tout débordement sur écrans moyens */
@media (max-width:1024px){
  .menu{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:18px 24px;gap:14px;transform:translateY(-150%);transition:transform .3s;box-shadow:var(--shadow);z-index:49}
  .menu.open{transform:translateY(0)}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  [data-theme="dark"] .menu{background:#112240}
}

/* ===================== COTISATION / PAIEMENT ===================== */
.coti-notice{background:#fff6e0;border:1px solid #f0e2b8;color:#7a5c00;border-radius:12px;padding:13px 18px;margin-bottom:22px;font-size:.92rem}
.coti-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.coti-form,.coti-history{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px 28px}
.coti-form h3,.coti-history h3{margin-bottom:16px}
.coti-form label{display:block;font-family:var(--sans);font-weight:600;font-size:.86rem;margin:14px 0 8px}
.coti-form input{width:100%;padding:.7em .9em;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfb;font-size:1rem}
.coti-form input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.1)}
.montant-choices{display:flex;flex-wrap:wrap;gap:8px}
.montant-chip{padding:.55em 1em;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-family:var(--sans);font-weight:700;font-size:.9rem;cursor:pointer;transition:.15s}
.montant-chip:hover{border-color:#cdd9d1}
.montant-chip.active{background:var(--vert);border-color:var(--vert);color:#fff}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pay-method{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-family:var(--sans);font-weight:700;transition:.18s}
.pay-method:hover{border-color:#cdd9d1;transform:translateY(-2px)}
.pay-method.active{border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.12)}
.pay-method svg{flex:none;border-radius:9px}
.pay-method .pay-logo{flex:none;width:40px;height:40px;border-radius:9px;object-fit:cover}
.coti-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #f0f4f1}
.coti-item:last-child{border-bottom:0}
.coti-amt b{font-family:var(--sans)}
.coti-amt small,.coti-meta small{display:block;color:var(--muted);font-size:.8rem}
.coti-meta{font-size:.88rem;text-align:right}
.coti-badge{font-size:.76rem;font-weight:700;padding:.25em .7em;border-radius:999px}
.coti-badge.ok{background:#d9f2e4;color:#06402b}
.coti-badge.ko{background:#fbe0dd;color:#b23b30}
.coti-badge.wait{background:#fdf3d7;color:#8a6a00}
@media (max-width:820px){.coti-grid{grid-template-columns:1fr}.pay-methods{grid-template-columns:1fr}}

/* Modal de paiement (simulation) */
.pay-modal-box{max-width:420px!important;text-align:center}
.pay-sim{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 6px}
.pay-sim svg{border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.pay-sim h3{font-size:1.3rem;margin-top:4px}
.pay-amt{font-family:var(--sans);font-weight:800;font-size:1.8rem;color:var(--vert)}
.pay-step{color:var(--muted);font-size:.92rem}
.pay-sim-tag{font-size:.75rem;color:#b26a00;background:#fff6e0;padding:.35em .8em;border-radius:999px;margin-top:6px}
.pay-spin{width:42px;height:42px;border:4px solid #e6ece8;border-top-color:var(--vert);border-radius:50%;animation:spin 1s linear infinite;margin:6px 0}
.pay-check{width:64px;height:64px;border-radius:50%;background:var(--vert);color:#fff;font-size:2.2rem;display:flex;align-items:center;justify-content:center;animation:pop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.pay-receipt{width:100%;background:#f7faf8;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:6px 0}
.pay-receipt div{display:flex;justify-content:space-between;padding:5px 0;font-size:.92rem}
.pay-receipt span{color:var(--muted)}
.pay-modal-box .btn{margin-top:8px}
[data-theme="dark"] .coti-form,[data-theme="dark"] .coti-history,[data-theme="dark"] .pay-method,[data-theme="dark"] .montant-chip{background:#112240;border-color:var(--line)}
[data-theme="dark"] .coti-form input{background:#0a192f;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .pay-receipt{background:#0a192f}

/* Décalage fin de l'en-tête (bureau uniquement) : marque vers la gauche, actions vers la droite */
@media (min-width:1025px){
  .site-header .brand{transform:translateX(-1.5cm)}
  .site-header .menu{transform:translateX(1cm)}
  .site-header .theme-toggle{transform:translateX(1cm)}
}

/* ===================== PAGES LÉGALES ===================== */
.legal{max-width:820px}
.legal h2{font-size:1.25rem;margin:30px 0 10px;color:var(--vert)}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:12px;color:#37433d}
.legal ul{margin:0 0 14px 20px}
.legal li{margin-bottom:7px}
.legal a{color:var(--vert);font-weight:600}
.legal .tofill{background:#fff6e0;color:#8a6a00;padding:.1em .5em;border-radius:6px;font-weight:600;font-size:.92em}
.legal-updated{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;font-style:italic}
/* Pied de page : liens légaux */
.footer-legal{border-top:1px solid rgba(255,255,255,.08)}
.footer-legal .container{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;padding-top:16px;padding-bottom:4px}
.footer-legal a{color:#9fb3a6;font-size:.86rem;transition:.15s}
.footer-legal a:hover{color:#fff}
[data-theme="dark"] .legal p{color:#c3cec7}
[data-theme="dark"] .legal .tofill{background:#2a2410;color:#e0c56a}

/* Reçu + RGPD (espace membre) */
.coti-item{grid-template-columns:1fr auto auto}
.coti-end{display:flex;align-items:center;gap:10px}
.coti-recu{color:var(--vert);font-weight:700;font-size:.82rem;white-space:nowrap}
.coti-recu:hover{text-decoration:underline}
.rgpd-card{border:1px solid #f0d9d5!important}
.rgpd-txt{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.rgpd-txt a{color:var(--vert);font-weight:600}
.rgpd-actions{display:flex;gap:10px;flex-wrap:wrap}
.rgpd-del{background:#fbeceb!important;color:#b23b30!important;border:1.5px solid #f3cfcb!important;box-shadow:none!important}
.rgpd-del:hover{background:#f7ddda!important}
[data-theme="dark"] .rgpd-card{border-color:#4a2a26!important}

/* ===================== ESPACE MEMBRE : ACCUEIL ===================== */
.acc-hello{background:linear-gradient(135deg,#06402b,#002819);color:#fff;border-radius:18px;padding:26px 30px;margin-bottom:22px}
.acc-hello h2{font-size:1.5rem;margin-bottom:4px}
.acc-hello p{opacity:.9}
.acc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.acc-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:4px}
.acc-ic{font-size:1.5rem}
.acc-lbl{font-size:.85rem;color:var(--muted);font-weight:600}
.acc-val{font-size:1.5rem;font-weight:800;color:var(--ink)}
.acc-ok{color:var(--vert);font-size:1.05rem}
.acc-ko{color:#c0392b;font-size:1.05rem}
.acc-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.acc-q{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--ink);cursor:pointer;text-align:left;transition:.15s}
.acc-q:hover{border-color:var(--vert);color:var(--vert);background:#f7faf8}

/* ===================== ESPACE MEMBRE : AGENDA ===================== */
.agenda-intro{color:var(--muted);margin-bottom:20px}
.agenda-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.agenda-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.agenda-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.ag-cover{height:150px;background-size:cover;background-position:center;background-color:#e9efeb}
.ag-cover.ph{display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:linear-gradient(150deg,#eef4f0,#dcede2)}
.ag-body{padding:18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ag-body h3{font-size:1.15rem}
.ag-meta{font-size:.85rem;color:var(--muted)}
.ag-resume{font-size:.92rem;color:#37433d}
.ag-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ag-jauge{font-size:.82rem;font-weight:700;color:var(--vert);background:#eef4f0;padding:.25em .7em;border-radius:999px}
.ag-btn{white-space:nowrap}
[data-theme="dark"] .acc-card,[data-theme="dark"] .acc-q,[data-theme="dark"] .agenda-card{background:#112240;border-color:var(--line)}
[data-theme="dark"] .ag-jauge{background:#0e3524}

/* ===================== MÉDIATHÈQUE (membre) ===================== */
.res-cat{font-size:1.05rem;color:var(--vert);margin:22px 0 10px}
.res-cat:first-child{margin-top:0}
.res-list{max-width:760px}
.res-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px;transition:.15s}
.res-item:hover{border-color:var(--vert);box-shadow:var(--shadow);transform:translateX(3px)}
.res-ic{font-size:1.7rem;flex:none}
.res-info{flex:1;min-width:0;display:flex;flex-direction:column}
.res-info b{color:var(--ink)}
.res-info small{color:var(--muted);font-size:.85rem}
.res-dl{font-weight:700;color:var(--vert);white-space:nowrap;font-size:.9rem}
[data-theme="dark"] .res-item{background:#112240;border-color:var(--line)}

/* ===================== GALERIE + LIGHTBOX ===================== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gitem{aspect-ratio:1;border:0;border-radius:12px;background-size:cover;background-position:center;background-color:#e9efeb;cursor:pointer;transition:.25s;box-shadow:var(--shadow)}
.gitem:hover{transform:scale(1.03);box-shadow:var(--shadow-lg)}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,20,13,.94);display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:90vw;max-height:82vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-x{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;font-size:2.4rem;width:56px;height:56px;border-radius:50%;cursor:pointer;transition:.15s}
.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:20px}.lb-next{right:20px}
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#fff;font-family:var(--sans);font-size:.95rem;opacity:.9}
@media (max-width:600px){.lb-nav{width:44px;height:44px;font-size:1.8rem}}

/* ===================== TÉMOIGNAGES (accueil) ===================== */
.temo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.temo-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;gap:16px}
.temo-card blockquote{font-size:1.02rem;color:#37433d;line-height:1.6;font-style:italic}
.temo-card figcaption{display:flex;align-items:center;gap:12px}
.temo-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.temo-av.ph{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--vert-l),var(--vert-d));color:#fff;font-weight:800;font-size:1.2rem}
.temo-card figcaption b{display:block;font-family:var(--sans)}
.temo-card figcaption small{color:var(--muted);font-size:.85rem}

/* ===================== PARTENAIRES (accueil) ===================== */
.partners-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center}
.partner{display:flex;align-items:center;justify-content:center;height:80px;min-width:150px;padding:14px 22px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);transition:.2s;filter:grayscale(.3)}
.partner:hover{filter:grayscale(0);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.partner img{max-height:52px;max-width:170px;object-fit:contain}
.partner span{font-family:var(--sans);font-weight:700;color:var(--muted)}
[data-theme="dark"] .temo-card,[data-theme="dark"] .partner{background:#112240;border-color:var(--line)}
[data-theme="dark"] .temo-card blockquote{color:#c3cec7}

/* Hero : bouton « Découvrir » en blanc (fond vert foncé pour rester lisible) */
.hero-cta .btn-ghost{color:#fff;background:var(--vert-d);border-color:var(--vert-d)}
.hero-cta .btn-ghost:hover{color:#fff;background:#053a22;border-color:#053a22}

/* « Découvrir → » des cartes de l'accueil : texte blanc sur pastille de la couleur d'accent */
.nav-card .event-more{color:#fff;background:var(--accent)}
.nav-card:hover .event-more{color:#fff;filter:brightness(.92)}

/* ===================== BANNIÈRE D'INSTALLATION (PWA) ===================== */
.pwa-banner{position:fixed;left:12px;right:12px;top:80px;z-index:120;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(10,25,47,.22);
  padding:12px 14px;transform:translateY(-180%);transition:transform .35s cubic-bezier(.22,.61,.36,1);max-width:520px;margin:0 auto}
.pwa-banner.show{transform:translateY(0)}
.pwa-ico{width:46px;height:46px;border-radius:11px;flex:none;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.pwa-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pwa-txt b{font-family:var(--sans);font-size:.98rem;color:var(--ink)}
.pwa-txt small{color:var(--muted);font-size:.8rem}
.pwa-install{flex:none;background:var(--vert);color:#fff;border:0;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:.9rem;padding:.6em 1.2em;cursor:pointer;box-shadow:0 6px 16px rgba(6,64,43,.3)}
.pwa-install:hover{background:var(--vert-d)}
.pwa-ios-share{flex:none;font-size:1.4rem}
.pwa-close{flex:none;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
@media (min-width:640px){.pwa-banner{left:auto;right:20px;top:88px;width:420px}}
[data-theme="dark"] .pwa-banner{background:#112240;border-color:var(--line)}

/* Fenêtre d'instructions d'installation iOS */
.ios-guide{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,26,18,.55);opacity:0;transition:opacity .25s ease}
.ios-guide.show{opacity:1}
.ios-card{background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35);max-width:400px;width:100%;padding:26px 24px 24px;text-align:center;transform:translateY(14px) scale(.98);transition:transform .25s ease}
.ios-guide.show .ios-card{transform:translateY(0) scale(1)}
.ios-logo{width:60px;height:60px;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.15);margin-bottom:10px}
.ios-card h3{font-family:var(--sans);color:var(--vert);font-size:1.15rem;margin-bottom:14px}
.ios-steps{text-align:left;margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.ios-steps li{color:var(--ink);font-size:.95rem;line-height:1.5}
.ios-steps li small{color:var(--muted)}
.ios-ic{display:inline-block;background:#eaf5ee;color:#06402b;font-weight:700;padding:1px 8px;border-radius:7px;white-space:nowrap}
.ios-warn{background:#fdf3d7;color:#8a6a00;border-radius:12px;padding:10px 14px;font-size:.92rem;margin:0 0 14px;text-align:left;line-height:1.45}
.ios-ok{width:100%}
[data-theme="dark"] .ios-card{background:#112240}
[data-theme="dark"] .ios-ic{background:#0f2a1c}

/* Titre d'accueil : « gabonaise » centré sur sa propre ligne */
.hero h1 .hl-mid{display:block;text-align:center}

/* ===================== ACTIVITÉS (cartes images cliquables) ===================== */
.act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.act-card{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.25s;font-family:inherit;padding:0;width:100%}
.act-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#d3e4d9}
.act-img{height:190px;background-size:cover;background-position:center;background-color:#e9efeb}
.act-img.ph{display:flex;align-items:center;justify-content:center;font-size:2.6rem}
.act-body{padding:22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.act-body h3{font-size:1.25rem;color:var(--ink)}
.act-body p{color:var(--muted);font-size:.96rem;flex:1}
.act-more{font-family:var(--sans);font-weight:700;color:var(--vert);font-size:.92rem;margin-top:4px}
.act-card:hover .act-more{color:var(--vert-d)}
[data-theme="dark"] .act-card{background:#112240;border-color:var(--line)}
[data-theme="dark"] .act-body h3{color:var(--ink)}

/* ===================== VIDÉOS (accueil) ===================== */
.videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px}
.video-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:.25s}
.video-card:hover{box-shadow:var(--shadow-lg)}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame video,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.video-card figcaption{padding:16px 20px}
.video-card figcaption b{font-family:var(--sans);display:block;color:var(--ink)}
.video-card figcaption small{color:var(--muted);display:block;margin-top:2px}
[data-theme="dark"] .video-card{background:#112240;border-color:var(--line)}
[data-theme="dark"] .video-card figcaption b{color:var(--ink)}

/* ===================== ÉLECTION (espace membre) ===================== */
.cand-edit{display:flex;gap:16px;align-items:flex-start}
.cand-av{flex:none;width:80px;height:80px;border-radius:14px;background-size:cover;background-position:center;background-color:#e9efeb;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.cand-av.ph{color:var(--muted)}
.cand-edit-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.vote-poste{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px}
.vote-poste h3{font-size:1.15rem;color:var(--vert);margin-bottom:14px}
.vc-voted{font-size:.78rem;background:#d9f2e4;color:var(--vert);padding:.2em .6em;border-radius:999px;font-weight:700;vertical-align:middle}
.vote-cands{display:flex;flex-direction:column;gap:12px}
.vote-cand{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:12px}
.vc-av{flex:none;width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center;background-color:#e9efeb}
.vc-av.ph{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(150deg,var(--vert-l),var(--vert-d))}
.vc-body{flex:1;min-width:0}
.vc-body b{font-family:var(--sans)}
.vc-body p{color:var(--muted);font-size:.9rem;margin-top:2px}
[data-theme="dark"] .vote-poste,[data-theme="dark"] .vote-cand{background:#112240;border-color:var(--line)}

/* ===================== RÉSULTATS ÉLECTION (public) ===================== */
.el-poste{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px 24px;margin-bottom:18px}
.el-poste h3{font-size:1.2rem;color:var(--vert);margin-bottom:14px}
.el-winner{display:flex;align-items:center;gap:14px}
.el-av{flex:none;width:60px;height:60px;border-radius:50%;background-size:cover;background-position:center;background-color:#e9efeb}
.el-av.ph{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(150deg,var(--vert-l),var(--vert-d))}
.el-winner b{font-family:var(--sans);font-size:1.1rem;display:block}
.el-winner small{color:var(--muted)}
.el-badge{margin-left:auto;background:#fdf3d7;color:#8a6a00;font-weight:700;padding:.3em .8em;border-radius:999px;font-size:.85rem}
.el-others{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.el-other{font-size:.85rem;color:var(--muted);background:var(--bg-soft);padding:.3em .8em;border-radius:999px}
.el-pv{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:10px}
.el-pv h3{color:var(--vert);margin-bottom:12px}
.el-pv-body{color:#37433d;line-height:1.7}
.el-pce{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:18px}
.el-pce-k{display:block;color:var(--vert);font-weight:700;font-size:.9rem;margin-bottom:10px}
.el-pce-p{display:flex;align-items:center;gap:14px}
.el-pce-p b{font-family:var(--sans);display:block;font-size:1.05rem}
.el-pce-p small{color:var(--muted)}
[data-theme="dark"] .el-pce{background:#112240;border-color:var(--line)}
[data-theme="dark"] .el-poste{background:#112240;border-color:var(--line)}

/* Élection en cours - cartes candidats sur la page d'accueil */
.election-home .el-poste h3{background:linear-gradient(120deg,var(--vert-d),var(--vert-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ecand{padding:14px 0}
.ecand + .ecand{margin-top:14px;padding-top:18px;border-top:1px solid var(--line)}
.ecand-head{display:flex;align-items:center;gap:14px}
.ecand-head b{font-family:var(--sans);font-size:1.1rem;display:block;color:var(--ink)}
.ecand-head small{color:var(--muted)}
.ecand-msg{margin-top:12px;padding-left:74px}
.ecand-q{display:block;font-weight:600;color:var(--vert);margin-bottom:6px;font-size:.95rem}
.ecand-msg .vc-msg{font-size:.95rem;color:var(--ink);margin-top:0}
@media(max-width:600px){.ecand-msg{padding-left:0}}

/* Petite fenêtre modale centrée (pepgAlert / pepgConfirm) */
.pg-modal-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,20,14,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s ease}
.pg-modal-ov.show{opacity:1}
.pg-modal{background:#fff;border-radius:18px;box-shadow:0 24px 70px -20px rgba(8,30,18,.55);width:100%;max-width:380px;padding:26px 24px 22px;text-align:center;transform:translateY(12px) scale(.96);transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.pg-modal-ov.show .pg-modal{transform:translateY(0) scale(1)}
.pg-modal-ic{font-size:38px;line-height:1;margin-bottom:10px}
.pg-modal-t{font-family:var(--sans);font-size:1.15rem;color:var(--vert-d);margin:0 0 8px}
.pg-modal-msg{color:var(--ink);font-size:.98rem;line-height:1.55;white-space:pre-line}
.pg-modal-act{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pg-modal-act .btn{min-width:110px}
[data-theme="dark"] .pg-modal{background:#182620;box-shadow:0 24px 70px -20px rgba(0,0,0,.7)}
[data-theme="dark"] .pg-modal-t{color:var(--vert-l)}
@media (prefers-reduced-motion:reduce){.pg-modal-ov,.pg-modal{transition:none}}

/* ===== Squelettes de chargement (perception de rapidité) ===== */
@keyframes pg-shimmer{100%{background-position:-200% 0}}
.skel{position:relative;overflow:hidden;background:#e9efeb;border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);background-size:200% 100%;animation:pg-shimmer 1.3s infinite}
.skel-line{height:12px;margin:8px 0;border-radius:6px}
.skel-line.w60{width:60%}.skel-line.w40{width:40%}.skel-line.w80{width:80%}
.skel-av{width:56px;height:56px;border-radius:50%;flex:none}
.skel-card{height:170px;border-radius:16px}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
[data-theme="dark"] .skel{background:#22302a}
[data-theme="dark"] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}
/* Aides images : cadrage cohérent + fond neutre pendant le lazy-load */
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
img[loading="lazy"]{background:#eef2ef}

/* Opportunités & annonces */
.opp-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.opp-chip{border:1px solid var(--line);background:#fff;color:var(--ink);padding:.45em 1em;border-radius:999px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s}
.opp-chip:hover{border-color:var(--vert-l)}
.opp-chip.active{background:var(--vert);color:#fff;border-color:var(--vert)}
.opp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.opp-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:8px;transition:transform .22s ease,box-shadow .22s ease}
.opp-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(6,64,43,.4)}
.opp-card h3{font-size:1.1rem;color:var(--ink);margin:2px 0}
.opp-card .btn{align-self:flex-start;margin-top:auto}
.opp-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.85rem}
.opp-snip{color:var(--muted);font-size:.92rem;line-height:1.5}
.opp-badge{display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:700;padding:.28em .75em;border-radius:999px;background:var(--bg-soft);color:var(--vert-d);text-transform:uppercase;letter-spacing:.02em}
.opp-badge.opp-emploi{background:#e6f0ff;color:#1652a8}
.opp-badge.opp-partenariat{background:#eaf5ee;color:#06402b}
.opp-badge.opp-service{background:#fdf3d7;color:#8a6a00}
.opp-badge.opp-bien{background:#f3e8fb;color:#6b2a9e}
.opp-badge.opp-appel_offre{background:#ffe9e3;color:#b23a1a}
.opp-desc p{margin:0 0 8px}.opp-desc ul{margin:2px 0 8px 18px}.opp-desc a{color:var(--vert);text-decoration:underline}
.opp-contact-nom{margin-top:12px;color:var(--ink)}
[data-theme="dark"] .opp-card,[data-theme="dark"] .opp-chip{background:#112240;border-color:var(--line)}
[data-theme="dark"] .opp-chip{color:var(--ink)}
[data-theme="dark"] .opp-chip.active{background:var(--vert);color:#fff}

/* Annuaire public des entreprises */
.ann-count{color:var(--muted);font-size:.92rem;margin:0 0 16px}
.ann-cta{margin-top:40px;text-align:center;background:linear-gradient(150deg,#eaf5ee,#f6faf7);border:1px solid var(--line);border-radius:18px;padding:34px 26px}
.ann-cta h3{color:var(--vert-d);font-size:1.3rem;margin-bottom:8px}
.ann-cta p{color:var(--muted);max-width:560px;margin:0 auto 18px}
[data-theme="dark"] .ann-cta{background:linear-gradient(150deg,#112240,#111b15);border-color:var(--line)}
[data-theme="dark"] .ann-cta h3{color:var(--vert-l)}

/* Bulletin blanc */
.vote-blanc{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:10px}
.vote-blanc span{color:var(--muted);font-size:.9rem}
.vote-blanc-res,.el-blanc{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);color:var(--muted);font-size:.9rem}
.el-blanc b,.vote-blanc-res b{color:var(--ink)}

/* ===== Candidature : éditeur WYSIWYG ===== */
#electionContent .pass-card{max-width:700px}
.cand-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.rte-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border:1.5px solid var(--line);border-bottom:none;border-radius:12px 12px 0 0;background:#f4f8f5}
.rte-toolbar button{min-width:34px;height:32px;padding:0 9px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;font-size:.95rem;color:var(--ink);transition:background .15s,border-color .15s,transform .1s}
.rte-toolbar button:hover{background:#fff;border-color:var(--line)}
.rte-toolbar button:active{transform:scale(.88)}
.rte{border:1.5px solid var(--line);border-radius:0 0 12px 12px;background:#fff;padding:14px 16px;min-height:190px;max-height:380px;overflow-y:auto;font-family:var(--sans);font-size:.98rem;line-height:1.6;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.rte:focus{border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.12)}
.rte:empty:before{content:attr(data-ph);color:var(--muted)}
.rte p{margin:0 0 8px}.rte ul{margin:0 0 8px 20px}.rte h3{font-size:1.05rem;margin:8px 0}.rte a{color:var(--vert);text-decoration:underline}
.rte-readonly{min-height:auto;background:#fbfdfb;border-radius:12px}
[data-theme="dark"] .rte-toolbar{background:#0c1c33}
[data-theme="dark"] .rte-toolbar button{color:var(--ink)}
[data-theme="dark"] .rte-toolbar button:hover{background:#112240}
[data-theme="dark"] .rte,[data-theme="dark"] .rte-readonly{background:#0a192f;color:var(--ink)}
.vc-msg{color:var(--muted);font-size:.9rem;margin-top:4px;line-height:1.55}
.vc-msg p{margin:0 0 4px}.vc-msg ul{margin:2px 0 4px 18px}.vc-msg a{color:var(--vert);text-decoration:underline}

/* ===== Écran de vote : effets miroir + transitions ===== */
.vote-poste{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;position:relative;overflow:hidden}
.vote-poste:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(6,64,43,.42)}
.vote-poste h3{background:linear-gradient(120deg,var(--vert-d),var(--vert-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vote-cand{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff,#fbfdfb);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease}
.vote-cand:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 18px 32px -20px rgba(6,64,43,.45);border-color:var(--vert-l)}
.vote-cand:before{content:"";position:absolute;top:0;left:-130%;width:70%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);transition:left .65s ease;pointer-events:none;z-index:1}
.vote-cand:hover:before{left:140%}
.vc-av{-webkit-box-reflect:below 1px linear-gradient(transparent 60%,rgba(0,0,0,.16));transition:transform .25s ease}
.vote-cand:hover .vc-av{transform:scale(1.06)}
.vote-cand .btn{position:relative;z-index:2;transition:transform .15s ease,box-shadow .15s ease}
.vote-cand .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(6,64,43,.6)}
[data-theme="dark"] .vote-cand{background:linear-gradient(180deg,#182620,#141f19)}
[data-theme="dark"] .vote-cand:before{background:linear-gradient(115deg,transparent,rgba(255,255,255,.12),transparent)}
@media (prefers-reduced-motion:reduce){.vote-poste,.vote-cand,.vote-cand:before,.vc-av{transition:none}.vote-cand:hover:before{left:-130%}}

/* Formulaire « Proposer une annonce » (modale des Opportunités) */
.opp-form{text-align:left;margin-top:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opp-contact-set{border:1px solid var(--line);border-radius:12px;padding:16px 16px 4px;margin:6px 0 18px;background:var(--bg-soft)}
.opp-contact-set legend{font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--ink);padding:0 8px}
.opp-req-hint{font-family:var(--body);font-weight:500;font-size:.82rem;color:var(--muted)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

/* ===== Carte de membre numérique (espace membre + vérification) ===== */
.pepgcard-wrap{max-width:440px;margin:0 auto}
.pepgcard{position:relative;border-radius:18px;overflow:hidden;color:#eaf5ee;
  background:linear-gradient(135deg,#002819,#06402b 60%,#0e5c3f);box-shadow:0 24px 60px -24px rgba(10,45,28,.6)}
.pc-flag{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,
  #009e60 0 16.6%,#fcd116 16.6% 33.3%,#3a75c4 33.3% 50%,#f77f00 50% 66.6%,#f4f6f4 66.6% 83.3%,#009e60 83.3% 100%)}
.pepgcard .pc-head{display:flex;justify-content:space-between;align-items:baseline;padding:24px 24px 0}
.pc-org{font-family:var(--sans);font-weight:800;font-size:1.3rem;letter-spacing:.02em}
.pc-type{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.pc-main{display:flex;gap:16px;align-items:center;padding:18px 24px}
.pc-photo{width:78px;height:78px;border-radius:12px;object-fit:cover;border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);flex:none}
.pc-photo.pc-ph{display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;font-size:1.7rem;color:#fff}
.pc-id b{display:block;font-family:var(--sans);font-weight:800;font-size:1.3rem;line-height:1.15}
.pc-id small{display:block;font-size:.85rem;opacity:.85}
.pc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding:0 24px 24px}
.pc-mat{font-family:var(--sans);font-weight:700;letter-spacing:.08em;font-size:.95rem}
.pc-mat small{display:block;font-weight:400;font-size:.68rem;letter-spacing:.02em;opacity:.75;margin-top:3px}
.pc-qr{width:86px;height:86px;border-radius:8px;background:#fff;padding:5px;flex:none}
.mcard-loading{padding:60px 20px;text-align:center;color:#eaf5ee;opacity:.8}
.pepgcard-actions{display:flex;gap:10px;justify-content:center;margin:20px 0 8px;flex-wrap:wrap}
.verify-box{max-width:460px;margin:0 auto;text-align:center}
.verify-badge{display:inline-block;padding:.35em .9em;border-radius:999px;font-weight:700;font-size:.85rem;margin:10px 0 18px}
.verify-ok{background:#e7f6ee;color:#06402b} .verify-no{background:#fdecea;color:#c0392b}
.verify-photo{width:96px;height:96px;border-radius:14px;object-fit:cover;margin:0 auto 14px}
.pc-poste{color:#fce8b8!important;font-weight:700!important}
.pc-check{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;flex:none}

/* ===================== ESPACE MEMBRE : MA COTISATION (lecture seule) ===================== */
.coti-state{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.coti-year{color:var(--muted);font-size:.88rem;font-weight:600}
.coti-lines>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f0f4f1;font-size:.95rem}
.coti-lines>div:last-child{border-bottom:0}
.coti-lines span{color:var(--muted)}
.coti-lines b{font-family:var(--sans)}
.coti-due{color:#b23b30}
.coti-ok{color:var(--vert)}
.coti-contact{margin-top:18px;background:#f5f9f6;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.coti-contact h4{font-size:.95rem;color:var(--vert);margin-bottom:8px}
.coti-contact p{font-size:.9rem;color:#37433d;line-height:1.6}
.coti-contact-line{margin-top:8px}
.coti-badge.exo{background:#e7e2fb;color:#4b3b9e}
.coti-recu{margin-left:10px;font-size:.82rem;font-weight:700;color:var(--vert);white-space:nowrap}

/* ===================== ESPACE MEMBRE : TRESORERIE (Responsable Finance) ===================== */
.mtab-fin{border-color:#e2c98a;color:#8a6a00}
.mtab-fin.active{background:linear-gradient(135deg,#b8860b,#8a6a00);border-color:#8a6a00;color:#fff}
.fin-hello{background:linear-gradient(135deg,#06402b,#0d5c48)}
.fin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fin-tab{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.5em .95em;font-family:var(--sans);font-weight:700;font-size:.86rem;color:var(--muted);cursor:pointer;transition:.15s}
.fin-tab:hover{border-color:#cdd9d1;color:var(--ink)}
.fin-tab.active{background:#eef4f0;border-color:var(--vert);color:var(--vert)}
.fin-yearbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.fin-yearbar label{font-family:var(--sans);font-weight:700;font-size:.86rem;color:var(--muted)}
.fin-yearbar select{padding:.5em .9em;border:1.5px solid var(--line);border-radius:9px;background:#fbfdfb;font-family:var(--sans);font-weight:700}
.fin-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px 24px;margin-bottom:20px}
.fin-card h3{font-size:1.05rem;margin-bottom:14px;color:var(--vert)}
.fin-help{color:var(--muted);font-size:.88rem;line-height:1.6;margin-bottom:14px}
.fin-help code{background:#eef4f0;padding:.1em .4em;border-radius:5px;font-size:.85em}

/* KPI */
.fin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.fin-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px}
.fin-kpi.big{background:linear-gradient(135deg,#06402b,#002819);border-color:#002819;color:#fff}
.fin-kpi.big .fin-kpi-lbl,.fin-kpi.big .fin-kpi-sub{color:rgba(255,255,255,.85)}
.fin-kpi.big .fin-kpi-val{color:#fff}
.fin-kpi-ic{font-size:1.25rem;margin-bottom:4px}
.fin-kpi-lbl{font-size:.8rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.fin-kpi-val{font-family:var(--sans);font-size:1.55rem;font-weight:800;color:var(--ink);line-height:1.25;margin-top:2px}
.fin-kpi-val small{font-size:.8rem;font-weight:700;opacity:.7}
.fin-kpi-sub{font-size:.78rem;color:var(--muted);margin-top:4px}

/* Graphiques */
.fin-charts{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fin-bars{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:8px}
.fin-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.fin-bar-v{flex:1;width:100%;display:flex;align-items:flex-end;background:#f4f8f5;border-radius:6px;overflow:hidden}
.fin-bar-v span{display:block;width:100%;background:linear-gradient(180deg,#12a05a,#06402b);border-radius:6px 6px 0 0;transition:height .4s ease}
.fin-bar-l{font-size:.7rem;color:var(--muted);font-weight:700}
.fin-prog{margin-bottom:14px}
.fin-prog-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.88rem;margin-bottom:5px}
.fin-prog-h b{font-family:var(--sans);white-space:nowrap}
.fin-prog-h small{color:var(--muted)}
.fin-prog-b{background:#eef2ef;border-radius:999px;height:10px;overflow:hidden}
.fin-prog-b i{display:block;height:100%;background:linear-gradient(90deg,#12a05a,#06402b);border-radius:999px}
.fin-gauge{margin-bottom:16px}
.fin-gauge-b{background:#eef2ef;border-radius:999px;height:20px;overflow:hidden}
.fin-gauge-b i{display:block;height:100%;background:linear-gradient(90deg,#f0b429,#12a05a);border-radius:999px;transition:width .5s ease}
.fin-gauge-t{margin-top:8px;font-size:.9rem;color:var(--muted)}
.fin-gauge-t b{font-family:var(--sans);font-size:1.15rem;color:var(--vert)}
.fin-lines>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f0f4f1;font-size:.9rem}
.fin-lines>div:last-child{border-bottom:0}
.fin-lines span{color:var(--muted)}
.fin-lines b{font-family:var(--sans)}

/* Formulaires tresorerie */
.fin-form .field{margin-bottom:14px}
.fin-form label{display:block;font-family:var(--sans);font-weight:600;font-size:.84rem;margin-bottom:6px}
.fin-form input,.fin-form select{width:100%;padding:.65em .9em;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfb;font-size:.98rem;font-family:var(--body)}
.fin-form input:focus,.fin-form select:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.1)}
.fin-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fin-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}

/* Tableaux */
.fin-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.fin-toolbar input,.fin-toolbar select{padding:.6em .9em;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfb;font-size:.94rem;font-family:var(--body)}
.fin-toolbar input[type=search]{flex:1;min-width:200px}
.fin-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fin-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.fin-table th{text-align:left;font-family:var(--sans);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 8px;border-bottom:2px solid var(--line);white-space:nowrap}
.fin-table td{padding:11px 8px;border-bottom:1px solid #f0f4f1;vertical-align:middle}
.fin-table tr:last-child td{border-bottom:0}
.fin-table code{background:#f4f8f5;padding:.12em .45em;border-radius:5px;font-size:.82em}
.fin-who{display:block;font-weight:600}
.fin-who small,.fin-sub{display:block;color:var(--muted);font-size:.78rem;font-weight:400}
.fin-due{color:#b23b30;font-weight:700}
.fin-sim{color:#b26a00}
.fin-perso{cursor:help}
.fin-actions{white-space:nowrap;text-align:right}
.fin-ico{background:#f4f8f5;border:1px solid var(--line);border-radius:8px;padding:.3em .55em;font-size:.95rem;cursor:pointer;margin-left:4px;line-height:1;display:inline-block;text-decoration:none}
.fin-ico:hover{border-color:var(--vert);background:#eef4f0}
.fin-ico.danger:hover{border-color:#d8544a;background:#fbeceb}
.fin-ico[disabled]{opacity:.5;cursor:wait}
.fin-total{margin-top:12px;color:var(--muted);font-size:.86rem}
.fin-resume{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.fin-pill{background:#f4f8f5;border:1px solid var(--line);border-radius:999px;padding:.35em .9em;font-size:.82rem;font-weight:700;font-family:var(--sans)}
.fin-pill.ok{background:#d9f2e4;border-color:#b6e3c9;color:#06402b}
.fin-pill.wait{background:#fdf3d7;border-color:#f0e2b8;color:#8a6a00}
.fin-pill.ko{background:#fbe0dd;border-color:#f3cfcb;color:#b23b30}
.fin-pill.exo{background:#e7e2fb;border-color:#d4ccf5;color:#4b3b9e}
.fin-relance-box{background:#f5f9f6;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:16px;font-size:.94rem}
@media (max-width:900px){.fin-charts{grid-template-columns:1fr}.fin-row{grid-template-columns:1fr}}
[data-theme="dark"] .fin-card,[data-theme="dark"] .fin-kpi,[data-theme="dark"] .fin-tab{background:#112240;border-color:var(--line)}
[data-theme="dark"] .fin-kpi.big{background:linear-gradient(135deg,#06402b,#002819)}
[data-theme="dark"] .fin-tab.active{background:#0e3524}
[data-theme="dark"] .fin-form input,[data-theme="dark"] .fin-form select,[data-theme="dark"] .fin-toolbar input,[data-theme="dark"] .fin-toolbar select{background:#0a192f;color:var(--ink)}
[data-theme="dark"] .fin-bar-v,[data-theme="dark"] .fin-prog-b,[data-theme="dark"] .fin-gauge-b{background:#0a192f}
[data-theme="dark"] .fin-ico,[data-theme="dark"] .fin-pill,[data-theme="dark"] .fin-relance-box,[data-theme="dark"] .coti-contact{background:#0e1a14;border-color:var(--line)}
[data-theme="dark"] .fin-table code{background:#0a192f}

/* ===== Trésorerie › Dépenses (espace membre) - même langage visuel que le back-office ===== */
.mdep{--mdep-sh:0 10px 30px rgba(10,25,47,.08);--mdep-card:#fff}
.mdep .mdep-kpi-v,.mdep .mdep-amount,.mdep .mdep-leg-v,.mdep .mdep-donut-c b,.mdep .mdep-hero-txt h3,
.mdep .mdep-table{font-variant-numeric:tabular-nums}
.mdep-eyebrow{display:inline-block;font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:6px}
.mdep-eyebrow.dark{color:#8fa79a}

/* Bandeau */
.mdep-hero{position:relative;overflow:hidden;border-radius:18px;padding:26px 28px 28px;margin-bottom:18px;color:#fff;
  background:linear-gradient(135deg,#0b7a43 0%,#002819 55%,#052e1d 100%);box-shadow:var(--mdep-sh)}
.mdep-hero-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(520px 220px at 88% -20%,rgba(197,160,40,.5),transparent 62%),
             radial-gradient(400px 200px at 6% 120%,rgba(255,255,255,.16),transparent 60%)}
.mdep-hero-in{position:relative;display:flex;gap:26px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.mdep-hero-txt h3{font-family:var(--sans);font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.05;letter-spacing:-.03em;
  font-weight:800;color:#fff;margin:0}
.mdep-hero-txt h3 i{font-style:normal;font-size:.42em;font-weight:700;color:rgba(255,255,255,.68);margin-left:8px}
.mdep-hero-txt p{color:rgba(255,255,255,.76);font-size:.89rem;margin-top:8px;max-width:46ch}
.mdep-hero-side{display:flex;flex-direction:column;gap:12px;align-items:flex-end;min-width:240px}
.mdep-jauge{width:240px}
.mdep-jauge-b{height:8px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.mdep-jauge-b i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffd76a,#d9b23c);
  transition:width .8s cubic-bezier(.22,.61,.36,1)}
.mdep-jauge.alerte .mdep-jauge-b i{background:linear-gradient(90deg,#ff9a7a,#d8544a)}
.mdep-jauge-l{display:flex;justify-content:space-between;margin-top:7px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.72)}
.mdep-jauge-l b{color:#fff}
.mdep-btn-ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff}
.mdep-btn-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);color:#fff}

/* Indicateurs */
.mdep-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.mdep-kpi{position:relative;overflow:hidden;background:var(--mdep-card);border:1px solid var(--line);border-radius:14px;
  padding:15px 17px;box-shadow:var(--mdep-sh);min-width:0}
.mdep-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--k,#06402b)}
.mdep-kpi header{display:flex;align-items:center;gap:9px;margin-bottom:9px;min-width:0}
.mdep-kpi-ic{width:29px;height:29px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:.92rem;background:color-mix(in srgb,var(--k,#06402b) 12%,transparent);flex:none}
.mdep-kpi-l{font-family:var(--sans);font-size:.69rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdep-kpi-v{font-family:var(--sans);font-size:1.4rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;
  white-space:nowrap;color:var(--ink)}
.mdep-kpi-v small{font-size:.58em;font-weight:700;color:var(--muted);margin-left:3px}
.mdep-meter{height:5px;border-radius:99px;background:#eef2ef;overflow:hidden;margin:9px 0 8px}
.mdep-meter i{display:block;height:100%;border-radius:99px;background:var(--k,#06402b);
  transition:width .8s cubic-bezier(.22,.61,.36,1)}
.mdep-kpi-s{font-size:.76rem;color:var(--muted);line-height:1.35}
.mdep-kpi.k-in{--k:#06402b}
.mdep-kpi.k-out{--k:#c0392b}
.mdep-kpi.k-out .mdep-kpi-v{color:#c0392b}
.mdep-kpi.k-solde{--k:#c5a028}
.mdep-kpi.k-solde .mdep-kpi-v{color:#a07b14}
.mdep-kpi.k-solde.neg{--k:#c0392b}
.mdep-kpi.k-solde.neg .mdep-kpi-v{color:#c0392b}
.mdep-kpi.k-just{--k:#1d7fb8}

/* Structure */
.mdep-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start}
.mdep-main{display:flex;flex-direction:column;min-width:0}
.mdep-side{position:sticky;top:88px;min-width:0}
.mdep-card{margin-bottom:18px}
.mdep-card-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.mdep-card-h h3{margin:0;font-size:1.08rem;color:var(--ink)}
.mdep-count{color:var(--muted);font-size:.83rem;font-weight:700;white-space:nowrap}

/* Filtres */
.mdep-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:6px}
.mdep-search{flex:1;min-width:210px;display:flex;align-items:center;gap:8px;padding:.5em .9em;border:1.5px solid var(--line);
  border-radius:12px;background:var(--bg-soft);transition:border-color .16s,box-shadow .16s}
.mdep-search:focus-within{border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.12)}
.mdep-search input{flex:1;border:0;background:transparent;font-family:var(--body);font-size:.92rem;color:var(--ink)}
.mdep-search input:focus{outline:none}
.mdep-toolbar select{padding:.55em .85em;border:1.5px solid var(--line);border-radius:12px;background:var(--bg-soft);
  font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--ink)}
.mdep-toolbar select:focus{outline:none;border-color:var(--vert)}

/* Journal */
.mdep-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 4px}
.mdep-table{width:100%;border-collapse:collapse;min-width:700px;table-layout:fixed}
.mdep-table th{text-align:left;font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:12px 12px 10px;border-bottom:1px solid var(--line)}
.mdep-table td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.mdep-table th:first-child,.mdep-table td:first-child{padding-left:24px}
.mdep-table th:last-child,.mdep-table td:last-child{padding-right:24px}
.mdep-table tbody tr:last-child td{border-bottom:0}
.mdep-table th:nth-child(1),.mdep-table td:nth-child(1){width:96px}
.mdep-table th:nth-child(2){width:42%}
.mdep-table th:nth-child(3){width:20%}
.mdep-table th:nth-child(4){width:142px}
.mdep-table th:nth-child(5),.mdep-table td:nth-child(5){width:60px}
.mdep-table th:nth-child(6),.mdep-table td:nth-child(6){width:90px}
.mdep .ta-r{text-align:right}
.mdep .ta-c{text-align:center}
.mdep-d{white-space:nowrap}
.mdep-d-j{display:block;font-family:var(--sans);font-weight:700;font-size:.87rem}
.mdep-d-a{display:block;font-size:.74rem;color:var(--muted)}
.mdep-lib{display:block;font-family:var(--sans);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.mdep-benef{display:block;margin-top:4px;font-size:.8rem;color:var(--muted);font-weight:600}
.mdep-ref{display:inline-block;margin-top:4px;font-size:.72rem;font-weight:700;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:.1em .5em}
.mdep-note{display:block;margin-top:3px;font-size:.77rem;color:var(--muted);line-height:1.35}
.mdep-tag{display:inline-flex;align-items:center;gap:7px;padding:.3em .72em;border-radius:9px;font-family:var(--sans);
  font-weight:700;font-size:.76rem;line-height:1.3;color:color-mix(in srgb,var(--c) 72%,var(--ink));
  background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.mdep-tag i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.mdep-amount{text-align:right;font-family:var(--sans);font-weight:800;color:#c0392b;white-space:nowrap;font-size:.97rem}
.mdep-amount small{display:block;font-size:.7rem;font-weight:700;color:var(--muted);white-space:normal;margin-top:2px}
.mdep-clip{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line);text-decoration:none;font-size:.95rem}
.mdep-clip:hover{border-color:var(--vert)}
.mdep-clip.none{opacity:.35;background:transparent;border-style:dashed;cursor:default}
.mdep-act{display:inline-flex;gap:6px;justify-content:flex-end;opacity:.45;transition:opacity .16s ease}
.mdep-row:hover .mdep-act,.mdep-act:focus-within{opacity:1}
.mdep-ico{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--mdep-card);cursor:pointer;
  font-size:.9rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.mdep-ico:hover{border-color:var(--vert);background:var(--bg-soft)}
.mdep-ico.danger:hover{border-color:#d8544a}
.mdep-table tfoot td{padding:14px 12px;border-top:2px solid var(--line);font-family:var(--sans);font-weight:800;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.mdep-table tfoot .ta-r{color:#c0392b;font-size:.95rem;letter-spacing:0;text-transform:none}
.mdep-empty{text-align:center;padding:40px 20px 30px;color:var(--muted)}
.mdep-empty span{font-size:2.1rem;display:block;margin-bottom:9px}
.mdep-empty p{font-family:var(--sans);font-weight:800;color:var(--ink)}
.mdep-empty small{font-size:.85rem}

/* Donut + légende */
.mdep-repart{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;align-items:center}
.mdep-donut-wrap{display:flex;justify-content:center}
.mdep-donut{width:172px;height:172px;border-radius:50%;position:relative;background:var(--grad,conic-gradient(#eef2ef 0 100%))}
.mdep-donut::after{content:"";position:absolute;inset:25px;border-radius:50%;background:var(--mdep-card);
  box-shadow:0 2px 14px rgba(10,25,47,.1)}
.mdep-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}
.mdep-donut-c b{font-family:var(--sans);font-size:1.1rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.mdep-donut-c small{font-size:.68rem;color:var(--muted);font-weight:700;letter-spacing:.08em}
.mdep-legend{display:flex;flex-direction:column;gap:3px}
.mdep-leg{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 11px;border-radius:11px;
  border:1px solid transparent;background:transparent;cursor:pointer;font-family:var(--body);color:var(--ink);
  transition:background .15s,border-color .15s,transform .15s}
.mdep-leg:hover{background:var(--bg-soft);border-color:var(--line);transform:translateX(2px)}
.mdep-leg i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.mdep-leg-l{flex:1;min-width:0;font-family:var(--sans);font-weight:700;font-size:.88rem;line-height:1.25}
.mdep-leg-l small{display:block;font-family:var(--body);font-weight:600;font-size:.74rem;color:var(--muted)}
.mdep-leg-v{text-align:right;font-family:var(--sans);font-weight:800;font-size:.9rem;white-space:nowrap}
.mdep-leg-v small{display:block;font-weight:700;font-size:.72rem;color:var(--muted)}

/* Formulaire */
.mdep-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
.mdep-form .fld{min-width:0}
.mdep-form .fld-w{grid-column:1/-1}
.mdep-form label{display:block;font-family:var(--sans);font-weight:700;font-size:.78rem;margin:0 0 6px;color:var(--ink)}
.mdep-form label i{color:#c0392b;font-style:normal}
.mdep-form label small{font-weight:600;color:var(--muted);font-size:.72rem;margin-left:5px}
.mdep-form input[type=text],.mdep-form input[type=number],.mdep-form input[type=date],.mdep-form select{
  width:100%;padding:.62em .8em;border:1.5px solid var(--line);border-radius:11px;background:var(--bg-soft);
  font-family:var(--body);font-size:.93rem;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.mdep-form input:focus,.mdep-form select:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.12)}
.mdep-money{position:relative}
.mdep-money input{padding-right:54px!important}
.mdep-money span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:.72rem;
  font-weight:800;color:var(--muted);letter-spacing:.05em;pointer-events:none}
.mdep-chips{display:flex;flex-wrap:wrap;gap:7px}
.mdep-chip{display:inline-flex;align-items:center;gap:6px;padding:.4em .75em;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--mdep-card);font-family:var(--sans);font-size:.78rem;font-weight:700;
  color:var(--muted);transition:border-color .15s,background .15s,color .15s,transform .12s}
.mdep-chip i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.mdep-chip:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.mdep-chip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);
  color:color-mix(in srgb,var(--c) 72%,var(--ink))}
.mdep-chip:active{transform:scale(.97)}
.mdep-file{display:flex;flex-direction:column;align-items:center;gap:7px;border:1.6px dashed var(--line);border-radius:13px;
  padding:18px 14px;text-align:center;cursor:pointer;background:var(--bg-soft);color:var(--muted);font-family:var(--sans);
  font-size:.85rem;font-weight:700;transition:border-color .18s,color .18s,transform .18s}
.mdep-file input[type=file]{display:none}
.mdep-file-ic{font-size:1.25rem;line-height:1}
.mdep-file-t small{display:block;font-family:var(--body);font-weight:600;font-size:.75rem;color:var(--muted);margin-top:3px}
.mdep-file:hover,.mdep-file.drag,.mdep-file.has{border-color:var(--vert);color:var(--vert)}
.mdep-file.drag{border-style:solid;transform:scale(1.01)}
.mdep-file.has{border-style:solid}
.mdep-file-cur{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:.83rem;font-weight:700}
.mdep-file-cur a{font-weight:800;color:var(--vert);text-decoration:underline}
.mdep-file-cur .mini-check{margin:0;font-size:.8rem;color:#c0392b}
.mdep-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:6px}
.mdep-actions .btn{flex:1;justify-content:center}
.mdep-err{grid-column:1/-1;margin:0}

/* Thème sombre */
[data-theme="dark"] .mdep{--mdep-card:#112240}
[data-theme="dark"] .mdep-kpi,[data-theme="dark"] .mdep-ico,[data-theme="dark"] .mdep-chip{background:#112240}
[data-theme="dark"] .mdep-meter,[data-theme="dark"] .mdep-donut{background-color:#0a192f}
[data-theme="dark"] .mdep-search,[data-theme="dark"] .mdep-toolbar select,[data-theme="dark"] .mdep-form input,
[data-theme="dark"] .mdep-form select,[data-theme="dark"] .mdep-file,[data-theme="dark"] .mdep-file-cur,
[data-theme="dark"] .mdep-clip,[data-theme="dark"] .mdep-ref{background:#0a192f;color:var(--ink)}
[data-theme="dark"] .mdep-donut::after{background:#112240}
[data-theme="dark"] .mdep-amount,[data-theme="dark"] .mdep-table tfoot .ta-r,
[data-theme="dark"] .mdep-kpi.k-out .mdep-kpi-v{color:#ff8f80}
[data-theme="dark"] .mdep-kpi.k-solde .mdep-kpi-v{color:#f0c14b}
[data-theme="dark"] .mdep-leg:hover{background:#0e1a14}

/* Adaptations */
@media (max-width:1240px){
  .mdep-layout{grid-template-columns:1fr}
  .mdep-side{position:static;order:-1}
  .mdep-form{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mdep-form .fld-w{grid-column:span 2}
  .mdep-actions{justify-content:flex-end}
  .mdep-actions .btn{flex:0 0 auto;min-width:180px}
}
@media (max-width:980px){
  .mdep-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mdep-repart{grid-template-columns:1fr;gap:16px}
  .mdep-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mdep-form .fld-w{grid-column:1/-1}
}
@media (max-width:640px){
  .mdep-hero{padding:20px 18px 22px}
  .mdep-hero-side{align-items:stretch;min-width:0;width:100%}
  .mdep-jauge{width:100%}
  .mdep-kpis{grid-template-columns:1fr;gap:12px}
  .mdep-tablewrap{margin:0 -18px}
  .mdep-table th:first-child,.mdep-table td:first-child{padding-left:18px}
  .mdep-table th:last-child,.mdep-table td:last-child{padding-right:18px}
  .mdep-act{opacity:1}
  .mdep-form{grid-template-columns:1fr}
  .mdep-actions .btn{flex:1;min-width:0}
}

/* Animations (neutralisées si l'utilisateur a demandé moins de mouvement) */
@keyframes mdep-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mdep-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mdep-flash{0%{background:rgba(224,168,31,.18)}100%{background:transparent}}
@keyframes mdep-bump{0%{transform:none}35%{transform:scale(1.05)}100%{transform:none}}
@keyframes mdep-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes mdep-pulse{0%{box-shadow:0 0 0 0 rgba(6,64,43,.28)}100%{box-shadow:0 0 0 14px rgba(6,64,43,0)}}
@keyframes mdep-spin{to{transform:rotate(360deg)}}
.mdep-hero{animation:mdep-in .55s cubic-bezier(.22,.61,.36,1) both}
.mdep-kpi{animation:mdep-in .5s cubic-bezier(.22,.61,.36,1) both;transition:transform .18s ease,box-shadow .18s ease}
.mdep-kpi:nth-child(2){animation-delay:.06s}
.mdep-kpi:nth-child(3){animation-delay:.12s}
.mdep-kpi:nth-child(4){animation-delay:.18s}
.mdep-kpi:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(10,25,47,.14)}
.mdep-kpi-ic{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.mdep-kpi:hover .mdep-kpi-ic{transform:scale(1.1) rotate(-5deg)}
.mdep-kpi-v.bump,.mdep-hero-txt h3.bump{animation:mdep-bump .45s ease}
.mdep .fin-card{animation:mdep-in .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:.1s}
.mdep .fin-card.pulse{animation:mdep-pulse .9s ease-out}
.mdep .fin-card.shake{animation:mdep-shake .45s ease}
.mdep-row{animation:mdep-row-in .38s ease both}
.mdep-row.flash{animation:mdep-row-in .38s ease both,mdep-flash 1.6s ease-out .2s both}
.mdep-row.out{opacity:0;transform:translateX(18px);transition:opacity .24s ease,transform .24s ease}
.mdep-table tbody tr{transition:background .14s ease}
.mdep-table tbody tr:hover{background:var(--bg-soft)}
.mdep-clip,.mdep-ico{transition:transform .16s ease,border-color .16s ease,background .16s ease}
.mdep-clip:hover{transform:translateY(-1px) rotate(-8deg)}
.mdep-ico:hover{transform:translateY(-1px) scale(1.06)}
.mdep-leg{animation:mdep-row-in .4s ease both}
.mdep-file-cur{animation:mdep-in .3s ease both}
.mdep-file.has{animation:mdep-bump .4s ease}
.mdep-empty{animation:mdep-in .4s ease both}
.mdep-empty span{display:inline-block;animation:mdep-bump 2.4s ease-in-out 1s infinite}
.mdep-actions .btn.busy{position:relative;color:transparent!important}
.mdep-actions .btn.busy::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:mdep-spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){
  .mdep-hero,.mdep-kpi,.mdep .fin-card,.mdep-row,.mdep-leg,.mdep-empty,.mdep-empty span,.mdep-file-cur,
  .mdep-kpi-v.bump,.mdep-hero-txt h3.bump,.mdep-file.has,.mdep .fin-card.pulse,.mdep .fin-card.shake{animation:none!important}
  .mdep-kpi:hover,.mdep-kpi:hover .mdep-kpi-ic,.mdep-file.drag,.mdep-clip:hover,.mdep-ico:hover,
  .mdep-leg:hover,.mdep-chip:active{transform:none!important}
  .mdep-meter i,.mdep-jauge-b i,.mdep-row.out{transition:none!important}
}

/* =======================================================================
   REFONTE STITCH — couche de composants
   Charte : vert forêt #06402b · or mat #c5a028 · bleu nuit #0a192f
   Titres Playfair Display · interface Plus Jakarta Sans · texte Manrope
   Cette couche est placée en fin de fichier : elle redéfinit
   volontairement les composants historiques du site.
   ======================================================================= */

/* ---- Réglages typographiques de base ---- */
body{background:var(--bg);font-size:16px;line-height:1.6}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
/* L'accent doré en italique : signature de la maquette */
.hl,.hl-mid,.accent-or{font-style:italic;color:var(--or);white-space:normal}
strong,b{font-weight:700}

/* ---- Libellé doré à filet (remplace l'ancien « kicker » / « eyebrow ») ---- */
.kicker,.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--or);
  background:none;border:0;padding:0;border-radius:0;margin-bottom:16px;font-style:normal}
.kicker::before,.eyebrow::before{content:"";width:28px;height:2px;background:var(--or);border-radius:2px;flex:none}
.section-head{text-align:center;max-width:760px;margin:0 auto 56px}
.section-head .kicker,.section-head .eyebrow{justify-content:center}
.kicker.light{color:var(--or-l)}
/* Variante « pastille » utilisée dans le hero */
.eyebrow.pill{background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:.55em 1.15em;gap:9px}
.eyebrow.pill::before{width:7px;height:7px;border-radius:50%}

/* ---- Titres de section ---- */
.section{padding:96px 0}
.section-alt{background:var(--bg-soft)}
.section-head h2{font-family:var(--display);font-size:clamp(1.85rem,3.4vw,2.6rem);font-weight:700;color:var(--vert);letter-spacing:-.02em;line-height:1.18}
.section-head p,.section-sub{color:var(--muted);margin-top:14px;font-size:1.02rem;line-height:1.62}
.flag-mini{margin-top:22px}

/* ---- Boutons : angles doux (0.5rem) plutôt que pilule ---- */
.btn{font-family:var(--sans);font-weight:600;font-size:.9rem;letter-spacing:.03em;
  border-radius:var(--r-sm);padding:.85em 1.6em;border-width:1px;transition:.22s ease}
.btn-primary{background:var(--vert);color:#fff;border-color:var(--vert);box-shadow:0 10px 24px -10px rgba(6,64,43,.55)}
.btn-primary:hover{background:var(--vert-d);border-color:var(--vert-d);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(6,64,43,.6)}
.btn-ghost{background:transparent;color:var(--vert);border-color:var(--line-fort)}
.btn-ghost:hover{border-color:var(--vert);background:var(--surface);transform:translateY(-2px)}
/* Une règle héritée `.hero-cta .btn-ghost` remplissait aussi le bouton secondaire
   en vert foncé : deux boutons pleins côte à côte, sans hiérarchie. */
.hero-cta .btn-ghost{background:var(--surface);color:var(--vert);border-color:var(--line-fort)}
.hero-cta .btn-ghost:hover{background:var(--surface);color:var(--vert-d);border-color:var(--vert)}
.btn-sm{background:var(--vert);color:#fff;border-color:var(--vert);padding:.68em 1.35em;font-size:.85rem;
  box-shadow:0 8px 18px -8px rgba(6,64,43,.5)}
.btn-sm:hover{background:var(--vert-d);border-color:var(--vert-d)}
.btn-or{background:var(--or);color:#231a00;border-color:var(--or)}
.btn-or:hover{background:var(--or-l);border-color:var(--or-l)}
/* `.menu a` impose var(--ink) avec une spécificité supérieure : on la reprend
   explicitement, sinon le libellé du bouton reste sombre sur fond vert. */
.menu a.btn.btn-sm,.menu a.btn.btn-primary{color:#fff;opacity:1}
.menu a.btn.btn-or{color:#231a00;opacity:1}

/* ---- En-tête ---- */
.site-header{background:rgba(248,250,246,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);box-shadow:0 4px 20px rgba(10,25,47,.05)}
/* Annule le décalage en centimètres hérité de l'ancienne mise en page :
   la nouvelle navigation tient d'elle-même sur une ligne. */
@media (min-width:1025px){
  .site-header .brand,.site-header .menu,.site-header .theme-toggle{transform:none}
}
.site-header .nav{gap:18px;padding-left:24px;padding-right:24px}
.nav{height:80px}
.brand{gap:11px;flex:none}
.brand-logo{height:46px}
.brand-text strong{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--vert);letter-spacing:-.01em}
.brand-text strong{white-space:nowrap}
.brand-text small{font-family:var(--sans);font-size:.62rem;font-weight:600;color:var(--or);
  letter-spacing:.13em;text-transform:uppercase;margin-top:3px;white-space:nowrap}
@media (max-width:1330px){.brand-text small{display:none}}
.menu{gap:15px}
.menu a:not(.btn),.nav-trigger{font-family:var(--sans);font-weight:600;font-size:.845rem;letter-spacing:.01em;color:var(--muted);opacity:1;white-space:nowrap}
.menu a:not(.btn):hover,.nav-trigger:hover,.nav-group.active .nav-trigger{color:var(--vert)}
.menu a.active{color:var(--vert);font-weight:700}
.menu a:not(.btn)::after{background:var(--or);height:2px}
.nav-drop{background:rgba(255,255,255,.99);border-color:var(--line);border-radius:var(--r);
  box-shadow:0 24px 54px -24px rgba(10,25,47,.4)}
.nav-drop a{font-family:var(--sans);font-size:.875rem;font-weight:600;color:var(--muted);border-radius:var(--r-sm)}
.nav-drop a:hover,.nav-drop a.active{background:var(--vert-pale);color:var(--vert)}
.burger span{background:var(--vert)}

/* ---- Bandeau de page (pages internes) ---- */
.page-hero{background:var(--bg);border-bottom:1px solid var(--line);padding:80px 0 68px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%)}
.page-hero::after{display:none}
.page-hero .inner{position:relative;z-index:1}
.page-hero h1{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;color:var(--vert);letter-spacing:-.025em;line-height:1.1}
.page-hero p{color:var(--muted);max-width:680px;margin:18px auto 0;font-size:1.06rem;line-height:1.62}
.page-hero .kicker,.page-hero .eyebrow{justify-content:center}
.breadcrumb{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--or)}

/* ---- Hero d'accueil ---- */
.hero{padding:0;background:var(--bg);position:relative;overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 38%,#000,transparent 72%);
          mask-image:radial-gradient(ellipse 65% 55% at 50% 38%,#000,transparent 72%)}
.hero .hero-bg::before,.hero .hero-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.hero .hero-bg::before{width:560px;height:560px;background:rgba(6,64,43,.07);top:-200px;right:-140px}
.hero .hero-bg::after{width:460px;height:460px;background:rgba(197,160,40,.09);bottom:-180px;left:-140px}
/* Haut resserré : compense la hauteur du logo agrandi pour garder les boutons
   au-dessus de la ligne de flottaison sur un portable. */
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 0 84px}
.hero h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.4rem);font-weight:700;color:var(--vert);
  letter-spacing:-.025em;line-height:1.08;max-width:16em}
.hero h1 .hl,.hero h1 .hl-mid{display:inline;font-style:italic;color:var(--or)}
.hero .lead{font-size:1.1rem;color:var(--muted);margin:26px auto 0;max-width:62ch;line-height:1.65}
.hero-tagline{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:34px 0 0;display:flex;gap:.9em;align-items:center;justify-content:center}
.hero-tagline em{color:var(--or);font-style:normal}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.hero-logo-wrap{position:relative;margin-bottom:26px;width:100%;display:flex;justify-content:center}
.hero-logo{width:min(78%,330px);filter:drop-shadow(0 22px 44px rgba(10,25,47,.2));animation:floaty 7s ease-in-out infinite}
@media (max-width:760px){.hero-logo{width:min(72%,240px)}}
.logo-glow{display:none}

/* ---- Bandeau de chiffres ---- */
.hero-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
/* auto-fit : le bandeau s'adapte au nombre de chiffres (4 sur l'accueil, 3 sur gouvernance) */
.strip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;padding:0}
.strip-grid>div{background:var(--surface);border-right:1px solid var(--line);padding:34px 22px;text-align:center}
.strip-grid>div:last-child{border-right:0}
.strip-grid b{display:block;font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--or);line-height:1;margin-bottom:8px}
.strip-grid span{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ---- Cartes ---- */
.cards{gap:24px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:none;transition:.25s ease}
.card:hover{transform:translateY(-4px);border-color:var(--line-fort);box-shadow:var(--shadow-lg)}
.card h3{font-family:var(--display);font-size:1.22rem;font-weight:700;color:var(--vert);margin-bottom:10px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:.97rem;line-height:1.6}
.card-ic{width:52px;height:52px;border-radius:var(--r-sm);margin-bottom:20px;
  background:var(--vert-pale);color:var(--vert);box-shadow:none}
.card-ic svg{width:24px;height:24px}
.card:hover .card-ic{transform:none;box-shadow:none}
.acc-or .card-ic{background:var(--or-pale);color:var(--or-d)}
.acc-bleu .card-ic{background:#e6edf6;color:var(--bleu-l)}
.acc-orange .card-ic{background:#fbeee0;color:#a8560c}
/* Micro-lien « Découvrir → » : lien doré et non plus pastille pleine
   (l'ancienne pastille colorée donnait du blanc sur or, illisible). */
.event-more,.card .event-more,.nav-card .event-more,.nav-card:hover .event-more{
  background:none;border:0;padding:0;border-radius:0;box-shadow:none;filter:none;
  font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.05em;
  color:var(--or);margin-top:18px;display:inline-block;align-self:flex-start}
.event-more:hover,.nav-card:hover .event-more{color:var(--or-d);transform:translateX(3px);background:none}
.card.num .n{font-family:var(--display);font-weight:700;font-size:1.05rem;border-radius:var(--r-sm);background:var(--vert);width:46px;height:46px}

/* ---- Bandeau sombre pleine largeur (bleu nuit) ---- */
.section-dark,.band-dark{background:var(--bleu);color:#e8edf4}
.section-dark .section-head h2,.band-dark h2,.band-dark h3{color:#fff}
.section-dark .section-head p,.section-dark .section-sub,.band-dark p{color:#a9b8cc}
.section-dark .kicker,.band-dark .kicker{color:var(--or-l)}
.band-dark{border-radius:var(--r);padding:44px 48px}
.band-vert{background:var(--vert);color:#e6f0ea;border-radius:var(--r);padding:44px 48px}
.band-vert h2,.band-vert h3{color:#fff}
.band-vert p{color:#b8d0c2}

/* ---- Grille « bento » (cartes de tailles contrastées) ---- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bento .b-card{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:var(--surface);transition:.25s ease;position:relative;overflow:hidden}
.bento .b-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bento .b-wide{grid-column:span 2}
.bento .b-tall{grid-row:span 2}
.b-card h3{font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--vert);margin-bottom:10px}
.b-card p{color:var(--muted);font-size:.96rem;line-height:1.6}
.b-card .b-num{position:absolute;top:24px;right:26px;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--line-fort)}
.b-card .b-ic{width:48px;height:48px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  background:var(--vert-pale);color:var(--vert);margin-bottom:20px}
.b-card .b-ic svg{width:22px;height:22px}
/* déclinaisons colorées */
.b-card.v-navy{background:linear-gradient(150deg,#0a192f,#12294a);border-color:transparent;color:#dbe4f0}
.b-card.v-navy h3{color:#fff}.b-card.v-navy p{color:#a9b8cc}
.b-card.v-navy .b-ic{background:rgba(197,160,40,.16);color:var(--or-l)}
.b-card.v-navy .b-num{color:rgba(255,255,255,.28)}
.b-card.v-vert{background:var(--vert);border-color:transparent;color:#c9ded2}
.b-card.v-vert h3{color:#fff}.b-card.v-vert p{color:#b8d0c2}
.b-card.v-vert .b-ic{background:rgba(255,255,255,.12);color:var(--or-l)}
.b-card.v-vert .b-num{color:rgba(255,255,255,.3)}
.b-card.v-or{background:var(--or);border-color:transparent;color:#3d2f00}
.b-card.v-or h3{color:#231a00}.b-card.v-or p{color:#4a3a00}
.b-card.v-or .b-ic{background:rgba(0,0,0,.12);color:#231a00}
.b-card.v-or .b-num{color:rgba(0,0,0,.28)}

/* Liste à puces cochées dans une carte bento */
.b-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.b-list li{position:relative;padding-left:26px;font-size:.92rem;font-family:var(--sans);font-weight:600}
.b-list li::before{content:"";position:absolute;left:0;top:.32em;width:15px;height:15px;border-radius:50%;
  background:var(--or);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/13px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/13px no-repeat}
.v-or .b-list li::before{background:#231a00}

/* ---- Bandeau d'appel à l'action pleine largeur ---- */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:48px}
.cta-band h3{font-family:var(--display);font-size:1.5rem;margin-bottom:8px}
.cta-band p{max-width:62ch;font-size:.98rem}
.cta-band .btn{flex:none}
@media (max-width:760px){.cta-band{flex-direction:column;align-items:flex-start;gap:20px}}

/* ---- Engagements numérotés (charte) ---- */
.eng-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.eng-num{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:30px 28px;transition:.25s ease}
.eng-num:hover{background:rgba(255,255,255,.07);border-color:rgba(197,160,40,.45);transform:translateY(-4px)}
.eng-num .n{display:block;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--or);margin-bottom:18px}
.eng-num .eng-ic{position:absolute;top:26px;right:26px;width:34px;height:34px;color:rgba(197,160,40,.75)}
.eng-num .eng-ic svg{width:26px;height:26px}
.eng-num h3{font-family:var(--display);font-size:1.14rem;color:#fff;margin-bottom:10px;padding-right:44px}
.eng-num p{color:#a9b8cc;font-size:.94rem;line-height:1.6}
@media (max-width:1024px){.eng-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.eng-grid{grid-template-columns:1fr}}

/* ---- Bloc préambule (texte + citation) ---- */
.preambule{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.preambule .quote{border-left:3px solid var(--or);padding:6px 0 6px 24px;margin-top:24px;
  font-family:var(--display);font-style:italic;font-size:1.18rem;color:var(--vert);line-height:1.45}
@media (max-width:900px){.preambule{grid-template-columns:1fr;gap:28px}}

/* ---- Pied de page (bleu nuit) ---- */
.site-footer{background:var(--bleu);color:#a9b8cc;padding:72px 0 0}
/* La colonne Contact manquait de place : ses adresses étaient coupées. */
.footer-grid{grid-template-columns:1.2fr 1.85fr 1.25fr;gap:40px;padding-bottom:48px}
/* Le logo est sombre : il garde une plaque claire pour rester lisible sur le bleu nuit. */
.f-logo{height:58px;border-radius:var(--r-sm);padding:7px 11px;background:#fff}
.f-brand p{font-size:.94rem;line-height:1.6;color:#a9b8cc}
.f-devise{font-family:var(--sans);font-size:.74rem!important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--or-l)!important;margin-top:12px!important}
.f-col h4{font-family:var(--sans);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or);margin-bottom:18px}
.f-col a,.f-col p{color:#a9b8cc;font-size:.92rem;margin-bottom:10px}
.f-col a:hover{color:#fff}
.f-admin{color:#7f90a8!important;font-size:.85rem!important}
.site-footer .soc{color:#a9b8cc;transition:.2s}
.site-footer .soc:hover{color:var(--or-l)}
.footer-legal{border-top:1px solid rgba(255,255,255,.09)}
.footer-legal a{font-family:var(--sans);font-size:.82rem;font-weight:500;color:#8494ab}
.footer-legal a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09)}
.footer-bottom .container{font-family:var(--sans);font-size:.8rem;color:#7f90a8}

/* ---- Formulaires ---- */
.field input,.field textarea,.field select,.nl-step input{
  border-radius:var(--r-sm);border:1px solid var(--line-fort);background:var(--surface);font-family:var(--body)}
.field input:focus,.field textarea:focus,.field select:focus,.nl-step input:focus{
  outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(6,64,43,.1)}
.nl-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.nl-box h2{color:var(--vert)}

/* ---- Bandeau drapeaux : conservé, un peu plus discret ---- */
.flag-stripe{height:4px}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .nav{height:72px}
  .hero-inner{padding:76px 0 64px}
  .section{padding:76px 0}
  .band-dark,.band-vert{padding:34px 28px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .b-wide{grid-column:span 2}
}
@media (max-width:760px){
  .strip-grid{grid-template-columns:1fr 1fr}
  .strip-grid>div:nth-child(2n){border-right:0}
  .strip-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .strip-grid b{font-size:2.1rem}
  .hero-inner{padding:56px 0 52px}
  .section{padding:60px 0}
  .page-hero{padding:56px 0 48px}
  .bento,.bento .b-wide{grid-template-columns:1fr;grid-column:auto}
  .hero-tagline{flex-wrap:wrap;letter-spacing:.16em}
}

/* ---- Thème sombre : réaccordé sur le bleu nuit ---- */
[data-theme="dark"]{--bg:#0a192f;--bg-soft:#0d1f3a;--bg-alt:#112240;--surface:#112240;
  --ink:#e8edf4;--muted:#a9b8cc;--line:#1d3557;--line-fort:#2a4372}
[data-theme="dark"] .site-header{background:rgba(10,25,47,.9);border-bottom-color:var(--line)}
/* Les cartes bento colorées gardent leur fond : sans cette exclusion, la carte
   dorée repassait en surface sombre et son texte foncé devenait illisible. */
[data-theme="dark"] .card,
[data-theme="dark"] .b-card:not(.v-navy):not(.v-vert):not(.v-or){background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .b-card.v-navy{border:1px solid var(--line-fort)}
/* Sur la carte dorée le texte reste sombre, y compris en thème sombre. */
[data-theme="dark"] .b-card.v-or h3{color:#231a00}
[data-theme="dark"] .b-card.v-or p,[data-theme="dark"] .b-card.v-or{color:#4a3a00}
/* Élément de menu actif : le vert foncé disparaissait sur fond sombre. */
[data-theme="dark"] .menu a.active,
[data-theme="dark"] .nav-group.active .nav-trigger,
[data-theme="dark"] .menu a:not(.btn):hover,
[data-theme="dark"] .nav-trigger:hover{color:var(--or-l)}
[data-theme="dark"] .hero h1,[data-theme="dark"] .section-head h2,[data-theme="dark"] .card h3,
[data-theme="dark"] .b-card h3,[data-theme="dark"] .page-hero h1,[data-theme="dark"] .brand-text strong{color:#fff}
[data-theme="dark"] .hero h1 .hl,[data-theme="dark"] .hero h1 .hl-mid{color:var(--or-l)}
[data-theme="dark"] .hero,[data-theme="dark"] .page-hero{background:var(--bg)}
[data-theme="dark"] .strip-grid>div{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .nav-drop{background:rgba(17,34,64,.99)}
[data-theme="dark"] .nav-drop a:hover,[data-theme="dark"] .nav-drop a.active{background:#1d3557;color:#fff}
[data-theme="dark"] .card-ic,[data-theme="dark"] .b-ic{background:rgba(197,160,40,.14);color:var(--or-l)}

/* ================================================================
   GABARIT STANDARD DES PAGES — couche d'harmonisation (2026-08-29)
   N'écrase aucune règle métier : affine le bandeau de page, le rythme
   de lecture, l'accessibilité au clavier et l'alignement des cartes.
   ================================================================ */

/* ---- Lien d'évitement (clavier / lecteurs d'écran) ---- */
.skip-link{position:absolute;left:16px;top:-120px;z-index:120;
  background:var(--vert);color:#fff;font-family:var(--sans);font-weight:600;font-size:.88rem;
  padding:.72em 1.25em;border-radius:0 0 var(--r-sm) var(--r-sm);
  box-shadow:0 12px 26px -12px rgba(6,64,43,.6);transition:top .18s ease}
.skip-link:focus{top:0}
main:focus{outline:none}

/* ---- Anneau de focus visible et homogène ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--or);outline-offset:3px}
.btn:focus-visible{outline-offset:4px}

/* ---- Retour d'appui physique sur les boutons ---- */
.btn:active{transform:translateY(1px) scale(.99)}

/* ---- Ancres : compense la hauteur de l'en-tête collant ---- */
:target,main [id]{scroll-margin-top:104px}

/* ---- Bandeau de page : respiration et texture ---- */
.page-hero{padding:88px 0 76px}          /* bas plus ample : équilibre optique */
.page-hero::after{display:block;content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* remise à plat des dimensions du disque décoratif hérité : la texture couvre tout le bandeau */
  width:auto;height:auto;border-radius:0;
  opacity:.3;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.3'/></svg>")}
.page-hero .inner{position:relative;z-index:1}
.page-hero h1{text-wrap:balance;max-width:24ch;margin-inline:auto}
.page-hero p{text-wrap:pretty;max-width:64ch}
.page-hero .kicker{margin-bottom:14px}
.page-hero .flag-mini{margin-top:26px}

/* ---- Fil d'Ariane : séparateurs propres, cible de clic lisible ---- */
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:.55em;flex-wrap:wrap;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--or);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.breadcrumb a:hover{color:var(--or-d);border-bottom-color:currentColor}
.breadcrumb .bc-sep{color:var(--line-fort)}
.breadcrumb [aria-current="page"]{color:var(--muted)}

/* ---- Rythme de lecture des sections communes ---- */
.section-head h2{text-wrap:balance}
.section-head p{text-wrap:pretty;max-width:62ch;margin-inline:auto}
.prose{max-width:68ch}
.prose p{text-wrap:pretty;line-height:1.72;margin-bottom:20px}
.prose a:not(.btn){color:var(--vert);text-decoration:underline;text-decoration-color:var(--or);
  text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--or-d)}
.card h3,.b-card h3{text-wrap:balance}

/* ---- Chiffres alignés (colonnes de même largeur) ---- */
.strip-grid b,.b-card .b-num,.card.num .n,.eng-num .n{font-variant-numeric:tabular-nums}

/* ---- Cartes d'une même grille : le lien reste sur une ligne commune ---- */
.cards>.card{display:flex;flex-direction:column}
.cards>.card>.event-more{margin-top:auto;padding-top:18px}

/* ---- Thème sombre : accords de la couche ---- */
[data-theme="dark"] .page-hero::after{mix-blend-mode:screen;opacity:.13}
[data-theme="dark"] .skip-link{background:var(--or);color:#231a00}
[data-theme="dark"] .breadcrumb a{color:var(--or-l)}
[data-theme="dark"] .prose a:not(.btn){color:var(--or-l)}

/* ---- Responsive ---- */
@media (max-width:760px){
  .page-hero{padding:60px 0 54px}
  .breadcrumb{font-size:.7rem;letter-spacing:.08em}
  :target,main [id]{scroll-margin-top:88px}
}
@media (prefers-reduced-motion:reduce){
  .skip-link{transition:none}
  .btn:active{transform:none}
}

/* ---- En-tête : bloc de marque calé à gauche ----
   Le logo et le nom s'alignent sur le bord du conteneur et poussent la
   navigation vers la droite : le bandeau est occupé sur toute sa largeur. */
.site-header .nav{padding-left:24px}   /* aligné sur la colonne de contenu, pas collé au bord */
.brand{flex:0 1 auto;justify-content:flex-start;margin-right:auto;text-align:left;min-width:0}
.brand-text{align-items:flex-start;text-align:left;min-width:0}
/* Garde-fou : la signature ne pousse jamais la navigation hors du bandeau. */
.brand-text small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Le seuil de 1330px laissait la signature déborder sur la navigation
   (bloc de marque 401px + menu 842px > 1232px de colonne utile). */
@media (max-width:1399px){.brand-text small{display:none}}

/* ================================================================
   PEPG-CI — REFONTE DU GABARIT (2026-08-29)
   Redesign « preserve » : marque, contenu et arborescence inchangés.
   Overhaul de la composition : sortie du tout-centré, discipline des
   sur-titres, cartes éditoriales, grilles à compte exact.
   Dials : VARIANCE 7 · MOTION 5 · DENSITY 4
   ================================================================ */

/* ----------------------------------------------------------------
   1. BANDEAU DE PAGE — éditorial asymétrique
   Le bandeau centré était la signature « page générée ». Le titre
   passe à gauche, en grand, avec la trame décalée à droite.
   ---------------------------------------------------------------- */
.page-hero{text-align:left;padding:104px 0 92px}
.page-hero::before{
  -webkit-mask-image:radial-gradient(ellipse 50% 74% at 86% 42%,#000,transparent 70%);
          mask-image:radial-gradient(ellipse 50% 74% at 86% 42%,#000,transparent 70%)}
/* le filet part de la gouttière du conteneur (24px), pas du bord de fenêtre */
.page-hero .inner{position:relative;padding-left:54px}
.page-hero .inner::before{content:"";position:absolute;left:24px;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--or) 0%,var(--or) 38%,transparent 100%)}
.page-hero .breadcrumb{justify-content:flex-start;margin-bottom:28px}
.page-hero .kicker,.page-hero .eyebrow{justify-content:flex-start}
/* interligne 1.08 + réserve basse : les italiques a descendantes (g, j, p)
   étaient rognées par un interligne trop serré */
.page-hero h1{margin-inline:0;max-width:17ch;font-size:clamp(2.4rem,5.6vw,4.3rem);
  line-height:1.08;padding-bottom:.06em;letter-spacing:-.032em}
.page-hero p{margin:26px 0 0;max-width:52ch;font-size:1.1rem}
.page-hero .page-tagline{justify-content:flex-start;margin:30px 0 0}
.page-hero .flag-mini{margin:32px 0 0;width:180px;height:5px}

/* ----------------------------------------------------------------
   2. DISCIPLINE DES SUR-TITRES
   Un sur-titre au-dessus de chaque section produit un rythme
   templaté. Règle : un pour trois sections, le bandeau compte pour un.
   Le titre se suffit à lui-même.
   ---------------------------------------------------------------- */
main>section .section-head .kicker,
main>section .section-head .eyebrow{display:none}
main>section:nth-of-type(3n+1) .section-head .kicker,
main>section:nth-of-type(3n+1) .section-head .eyebrow{display:inline-flex}

/* ----------------------------------------------------------------
   3. EN-TÊTES DE SECTION — alignés à gauche
   ---------------------------------------------------------------- */
.section-head{text-align:left;max-width:none;margin:0 0 52px}
.section-head h2{max-width:18ch}
.section-head p{margin:16px 0 0;max-width:58ch}
.section-head .kicker,.section-head .eyebrow{justify-content:flex-start}

/* ----------------------------------------------------------------
   4. CARTES — colonnes éditoriales, plus de boîte grise
   Bordure + ombre + fond blanc sur chaque carte : le réflexe
   générique. Un filet haut suffit à séparer, l'or marque le survol.
   ---------------------------------------------------------------- */
.cards>.card{background:none;border:0;border-top:2px solid var(--line-fort);border-radius:0;
  padding:26px 0 0;box-shadow:none;transition:border-color .25s ease,transform .25s ease}
.cards>.card:hover{transform:translateY(-3px);box-shadow:none;border-top-color:var(--or)}
/* display:block sinon le chip flex centre l'icône sur toute la largeur */
.cards>.card .card-ic{display:block;background:none;width:auto;height:auto;margin-bottom:18px;color:var(--vert)}
.cards>.card .card-ic svg{width:26px;height:26px}
.cards>.card.acc-or .card-ic{color:var(--or-d)}
.cards>.card.acc-bleu .card-ic{color:var(--bleu-l)}
.cards>.card.acc-orange .card-ic{color:#a8560c}
.cards>.card h3{font-size:1.3rem;margin-bottom:8px}
.cards>.card:hover .card-ic{transform:none}
/* le liseré coloré du haut faisait doublon avec le filet */
.cards>.nav-card::before{display:none}

/* ----------------------------------------------------------------
   5. GRILLES À COMPTE EXACT — jamais de cellule vide
   ---------------------------------------------------------------- */
.cards{gap:32px 36px}
/* 4 éléments : deux rangées de deux, première colonne plus large */
.cards:has(>:nth-child(4)):not(:has(>:nth-child(5))){grid-template-columns:1.15fr 1fr}
/* 7 éléments : 3 + 3 + une carte pleine largeur qui ferme la grille */
.cards:has(>:nth-child(7)):not(:has(>:nth-child(8)))>:nth-child(7){grid-column:1/-1}
.cards:has(>:nth-child(7)):not(:has(>:nth-child(8)))>:nth-child(7) h3{font-size:1.5rem}

/* ----------------------------------------------------------------
   6. HERO D'ACCUEIL — split asymétrique
   L'emblème tenait toute la largeur au-dessus d'un bloc centré :
   il passe en colonne de gauche, le discours à droite.
   ---------------------------------------------------------------- */
.hero-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:60px;row-gap:0;align-items:center;justify-items:start;text-align:left;
  /* gouttière conservée : sans elle le bloc de gauche colle au bord de fenêtre */
  padding:64px 24px 76px}
.hero-logo-wrap{grid-column:1;grid-row:1/-1;margin:0;justify-self:center}
.hero-inner>:not(.hero-logo-wrap){grid-column:2}
.hero-logo{width:min(100%,300px)}
/* le titre est calibré sur la largeur de colonne : deux lignes, pas quatre */
.hero h1{max-width:none;margin:0;font-size:clamp(2rem,3.4vw,3.3rem)}
.hero .eyebrow{margin:0 0 22px}
.hero .lead{margin:22px 0 0;max-width:52ch}
.hero-cta{justify-content:flex-start;margin-top:28px}
.hero-tagline{justify-content:flex-start;margin-top:26px}
.hero .hero-bg{-webkit-mask-image:radial-gradient(ellipse 55% 62% at 28% 46%,#000,transparent 72%);
                       mask-image:radial-gradient(ellipse 55% 62% at 28% 46%,#000,transparent 72%)}

/* ----------------------------------------------------------------
   7. RYTHME VERTICAL — plus d'air entre les sections
   ---------------------------------------------------------------- */
.section{padding:104px 0 112px}
.bento{gap:24px}

/* ----------------------------------------------------------------
   8. THÈME SOMBRE — accords
   ---------------------------------------------------------------- */
[data-theme="dark"] .cards>.card{background:none;border:0;border-top:2px solid var(--line-fort)}
[data-theme="dark"] .cards>.card:hover{border-top-color:var(--or-l)}
[data-theme="dark"] .cards>.card .card-ic{background:none;color:var(--or-l)}

/* ----------------------------------------------------------------
   9. RESPONSIVE — repli mono-colonne explicite
   ---------------------------------------------------------------- */
@media (max-width:1024px){
  .section{padding:80px 0 88px}
  .hero-inner{column-gap:44px;padding:60px 24px 72px}
  .page-hero{padding:84px 0 74px}
}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;row-gap:0;padding:52px 24px 64px}
  .hero-logo-wrap{grid-column:1;grid-row:auto;margin-bottom:26px}
  .hero-inner>:not(.hero-logo-wrap){grid-column:1}
  .hero .lead,.hero h1{max-width:none}
  .cards:has(>:nth-child(4)):not(:has(>:nth-child(5))){grid-template-columns:1fr}
}
@media (max-width:760px){
  .page-hero{padding:60px 0 56px}
  .page-hero .inner{padding-left:44px}
  .page-hero h1{max-width:none}
  .section{padding:64px 0 70px}
  .section-head{margin-bottom:36px}
  .section-head h2{max-width:none}
}

/* ----------------------------------------------------------------
   10. DÉTAILS ÉLIMINÉS
   ---------------------------------------------------------------- */
/* La pastille ronde devant le sur-titre était une décoration sans rôle :
   elle reprend le filet doré des autres sur-titres. */
.eyebrow.pill::before{width:22px;height:2px;border-radius:2px}
/* Sur l'accueil, la devise figure déjà dans l'emblème affiché juste à côté :
   la répéter sous les boutons alourdit le bandeau sans rien apporter.
   Elle reste visible sur les pages internes et dans le pied de page. */
.hero .hero-tagline{display:none}

/* En thème sombre, l'emblème (texte vert foncé) devenait illisible sur le bleu
   nuit. Même traitement que dans le pied de page : une plaque claire. */
[data-theme="dark"] .hero-logo{box-sizing:content-box;background:#fff;border-radius:var(--r);
  padding:22px 26px;width:min(100%,264px);box-shadow:0 18px 44px -20px rgba(0,0,0,.6)}


/* ================================================================================
   PEPG-CI — SYSTÈME DE DESIGN v3 (2026-08-29)
   Portage des maquettes Stitch (jeu de jetons Material 3) dans la feuille native.
   Aucune dépendance externe : ni Tailwind, ni CDN de mise en forme.
   Les noms de classes existants sont conservés, donc l'espace membre et le
   back-office héritent du nouveau système sans réécriture de balisage.

   Deux écarts assumés par rapport aux maquettes, documentés à leur emplacement :
   - le bouton doré du bandeau passe de #795900 à #fcc340 (contraste 1.9:1, illisible)
   - les polices reçoivent une pile de repli (sans elle, tout retombait en serif)
   ================================================================================ */

/* ---- 1. Jetons -------------------------------------------------------------- */
:root{
  /* Verts : inchangés, les maquettes reprennent la charte existante */
  --vert:#06402b;            /* primary-container */
  --vert-d:#002819;          /* primary */
  --vert-l:#356850;          /* surface-tint */
  --vert-pale:#b8efd0;       /* primary-fixed */
  /* Or : deux rôles distincts là où il n'y en avait qu'un.
     #795900 pour le texte (7.4:1 sur fond clair), #fcc340 pour les aplats. */
  --or:#795900;              /* secondary : texte et filets sur clair */
  --or-l:#fcc340;            /* secondary-container : aplats, icônes sur sombre */
  --or-d:#5c4300;            /* on-secondary-fixed-variant */
  --or-pale:#ffdea0;         /* secondary-fixed : accents de titre sur sombre */
  --bleu:#001f54;            /* tertiary */
  --bleu-l:#00419e;          /* on-tertiary-fixed-variant */
  --orange:#8a5100;
  /* Neutres */
  --ink:#1c1b1b;             /* on-surface */
  --muted:#404943;           /* on-surface-variant */
  --line:#e5e2e1;            /* surface-variant */
  --line-fort:#c0c9c1;       /* outline-variant */
  --outline:#717973;
  --bg:#fcf9f8;              /* surface : blanc chaud, remplace le blanc froid */
  --bg-soft:#f6f3f2;         /* surface-container-low */
  --bg-alt:#f0eded;          /* surface-container */
  --bg-fort:#e5e2e1;         /* surface-container-highest */
  --bg-dark:#002819;
  --surface:#ffffff;         /* surface-container-lowest */
  /* Ombres teintées vert, jamais de noir pur */
  --shadow:0 4px 30px rgba(0,40,25,.04);
  --shadow-md:0 8px 40px rgba(0,40,25,.08);
  --shadow-lg:0 18px 50px -12px rgba(0,40,25,.18);
  /* Rayons : échelle serrée des maquettes (2 / 4 / 8 / 12) */
  --r-xs:2px; --r-sm:4px; --r:8px; --r-lg:12px;
  --maxw:1280px;
  --gutter:24px; --comp-gap:32px; --section-gap:120px;
  --marge:64px;
  /* Typographie : Manrope pour les titres, Plus Jakarta Sans pour le texte.
     Playfair Display est retiré. Les piles de repli sont obligatoires. */
  --display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- 2. Base --------------------------------------------------------------- */
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
.container{max-width:var(--maxw);padding:0 var(--marge)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:normal}
h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;line-height:1.2;letter-spacing:normal}
h3{font-size:1.375rem;font-weight:600;line-height:1.4;letter-spacing:normal}
h4{font-size:1.125rem;font-weight:600;line-height:1.4}

/* ---- 3. Étiquettes (label-md : 14 / 600 / .05em) ---------------------------- */
.kicker,.eyebrow,.breadcrumb,.strip-grid span,.footer-legal a{
  font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:.05em}
.kicker,.eyebrow{display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;color:var(--or)}
.kicker::before,.eyebrow::before{content:"";width:48px;height:2px;background:var(--or);border-radius:0;flex:none}
.eyebrow.pill{background:none;border:0;padding:0;border-radius:0}
.eyebrow.pill::before{width:48px;height:2px;border-radius:0}

/* ---- 4. En-tête : 80px, fond translucide, marque sur deux lignes ------------ */
.site-header{background:rgba(252,249,248,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:0;box-shadow:0 1px 15px rgba(0,0,0,.05)}
.nav{height:80px}
.site-header .nav{padding-left:var(--marge);padding-right:var(--marge)}
.brand{gap:16px;flex:none;min-width:auto}
.brand-text{min-width:auto;flex:none}
.brand-logo{height:40px}
.brand-text strong{font-family:var(--display);font-size:1.125rem;font-weight:600;line-height:1.2;
  text-transform:uppercase;letter-spacing:.05em;color:var(--vert-d)}
.brand-text small{font-family:var(--sans);font-size:.625rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--or);margin-top:2px}
.menu{gap:32px}
.menu a:not(.btn),.nav-trigger{font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:.05em;
  color:var(--muted);padding:8px 0;border-bottom:2px solid transparent;border-radius:0}
.menu a:not(.btn):hover,.nav-trigger:hover,.nav-group.active .nav-trigger{color:var(--vert-d)}
.menu a.active{color:var(--vert-d);font-weight:700;border-bottom-color:var(--or-l)}
.menu a:not(.btn)::after{display:none}
.nav-drop{border-radius:var(--r);box-shadow:var(--shadow-lg);border-color:var(--line)}
.nav-drop a{font-family:var(--sans);font-size:.875rem;font-weight:600;border-radius:var(--r-sm)}
.nav-drop a:hover,.nav-drop a.active{background:var(--bg-alt);color:var(--vert-d)}

/* ---- 5. Boutons : rayon 2px, plus de pastilles ----------------------------- */
.btn{font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:.05em;
  border-radius:var(--r-xs);border-width:1px;padding:.9em 1.6em;transition:.25s ease}
.btn-primary{background:var(--vert-d);color:#fff;border-color:var(--vert-d);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--vert);border-color:var(--vert);transform:translateY(-1px);box-shadow:var(--shadow-md)}
/* Écart assumé : la maquette pose #795900 sur #002819, soit 1.9:1, illisible.
   L'aplat passe au doré clair du même jeu de jetons, le texte reste vert profond. */
.btn-or{background:var(--or-l);color:var(--vert-d);border-color:var(--or-l)}
.btn-or:hover{background:var(--or-pale);border-color:var(--or-pale)}
.btn-ghost{background:transparent;color:var(--vert-d);border-color:var(--line-fort)}
.btn-ghost:hover{border-color:var(--vert-d);background:var(--bg-alt)}
.btn-sm{background:var(--vert-d);color:#fff;border-color:var(--vert-d);padding:.6em 1.5em;font-size:.875rem}
.btn-sm:hover{background:var(--vert);border-color:var(--vert)}
.btn:active{transform:translateY(1px)}

/* ---- 6. Bandeau d'accueil : photographie + dégradé vert -------------------- */
.hero{background:var(--bg-alt);position:relative;overflow:hidden;padding:0;display:block}
.hero .hero-bg{position:absolute;inset:0;background-image:var(--hero-img,url('/assets/design/hero-accueil.jpg'));
  background-size:cover;background-position:center;mix-blend-mode:multiply;opacity:.8;
  -webkit-mask-image:none;mask-image:none}
.hero .hero-bg::before,.hero .hero-bg::after{display:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,40,25,.92) 0%,rgba(0,40,25,.72) 45%,rgba(0,40,25,.15) 100%)}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;min-height:620px;text-align:left;gap:0;padding:96px var(--marge)}
/* L'emblème est déjà dans l'en-tête : la maquette ne le répète pas dans le bandeau. */
.hero .hero-logo-wrap{display:none}
.hero .eyebrow{color:var(--or-l);margin:0 0 32px}
.hero .eyebrow::before{background:var(--or-l)}
.hero h1{color:#fff;max-width:min(100%,26ch);font-size:clamp(2rem,4.4vw,3rem);margin:0}
.hero h1 .hl,.hero h1 .hl-mid{color:var(--or-pale);font-style:normal}
.hero .lead{color:#dfe4e0;font-size:1.125rem;line-height:1.6;max-width:46ch;margin:24px 0 0}
.hero .lead strong{color:#fff}
.hero-cta{margin-top:32px;gap:16px;justify-content:flex-start}
.hero .hero-tagline{display:none}

/* ---- 7. Bandeau des pages internes ---------------------------------------- */
.page-hero{background:var(--vert-d);border-bottom:0;padding:0;text-align:left;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--hero-img,url('/assets/design/hero-institutionnel.jpg'));
  background-size:cover;background-position:center;mix-blend-mode:multiply;opacity:.8;
  -webkit-mask-image:none;mask-image:none}
.page-hero::after{content:"";position:absolute;inset:0;display:block;pointer-events:none;opacity:1;
  mix-blend-mode:normal;background-image:none;
  background:linear-gradient(90deg,rgba(0,40,25,.9) 0%,rgba(0,40,25,.62) 50%,rgba(0,40,25,.18) 100%)}
.page-hero .inner{position:relative;z-index:2;padding:120px var(--marge) 104px;max-width:var(--maxw)}
.page-hero .inner::before{display:none}
.page-hero .breadcrumb{justify-content:flex-start;color:rgba(255,255,255,.72);margin-bottom:24px;
  text-transform:uppercase}
.page-hero .breadcrumb a{color:var(--or-l);border-bottom:0}
.page-hero .breadcrumb a:hover{color:var(--or-pale)}
.page-hero .breadcrumb .bc-sep{color:rgba(255,255,255,.4)}
.page-hero .breadcrumb [aria-current="page"]{color:rgba(255,255,255,.72)}
.page-hero .kicker,.page-hero .eyebrow{color:var(--or-l);margin-bottom:24px}
.page-hero .kicker::before,.page-hero .eyebrow::before{background:var(--or-l)}
.page-hero h1{color:#fff;max-width:min(100%,26ch);margin:0;padding:0;font-size:clamp(2rem,4.4vw,3rem)}
.page-hero h1 .hl{color:var(--or-pale);font-style:normal}
.page-hero p{color:#dfe4e0;max-width:52ch;margin:24px 0 0;font-size:1.125rem}
.page-hero .page-tagline,.page-hero .flag-mini{display:none}
/* Le bandeau tricolore est absent des maquettes mais reste un marqueur de marque :
   conservé, affiné à 4px et remonté au-dessus du dégradé. */
.flag-stripe{height:4px;z-index:3}

/* ---- 8. Sections ---------------------------------------------------------- */
.section{padding:var(--section-gap) 0}
.section-alt{background:var(--bg-alt)}
.section-head{text-align:left;max-width:none;margin:0 0 48px}
.section-head h2{color:var(--vert-d);max-width:22ch}
.section-head p{color:var(--muted);font-size:1rem;max-width:62ch;margin-top:16px}
.section-head .kicker,.section-head .eyebrow{margin-bottom:16px}

/* ---- 9. Cartes ------------------------------------------------------------ */
.cards{gap:var(--comp-gap)}
.cards>.card{background:var(--surface);border:0;border-radius:var(--r);padding:32px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;transition:box-shadow .3s ease,transform .3s ease}
.cards>.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* Filet doré qui se déploie au survol, repris des cartes de métriques */
.cards>.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--or-l);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cards>.card:hover::after{transform:scaleX(1)}
.cards>.card .card-ic{display:flex;align-items:center;justify-content:flex-start;width:auto;height:auto;
  background:none;color:var(--vert-d);margin-bottom:20px}
.cards>.card .card-ic svg{width:32px;height:32px}
.cards>.card h3{color:var(--vert-d);font-size:1.375rem;font-weight:600;margin-bottom:10px}
.cards>.card p{color:var(--muted);font-size:1rem;line-height:1.6}
.card{border-radius:var(--r)}

/* ---- 10. Grille bento : carte vedette vert profond + tuiles claires -------- */
.bento{gap:var(--gutter)}
.bento .b-card{border:0;border-radius:var(--r);padding:32px;background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden}
.bento .b-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.b-card h3{color:var(--vert-d);font-size:1.375rem;font-weight:600}
.b-card .b-num{font-family:var(--display);font-weight:800;font-size:4rem;line-height:1;
  color:rgba(0,40,25,.07);top:auto;bottom:20px;right:28px}
.b-card.v-vert,.b-card.v-navy{background:var(--vert-d);color:#dfe4e0;padding:40px;box-shadow:var(--shadow-lg)}
.b-card.v-vert h3,.b-card.v-navy h3{color:#fff}
.b-card.v-vert p,.b-card.v-navy p{color:#dfe4e0}
.b-card.v-vert .b-num,.b-card.v-navy .b-num{color:rgba(255,255,255,.1)}
.b-card.v-vert .b-ic,.b-card.v-navy .b-ic{background:none;color:var(--or-l)}
.b-card.v-or{background:var(--or-l);color:var(--vert-d)}
.b-card.v-or h3{color:var(--vert-d)}
.b-card.v-or p{color:#4a3a00}
.b-card .b-ic{background:none;width:auto;height:auto;color:var(--vert-d);margin-bottom:18px}
.b-card .b-ic svg{width:32px;height:32px}

/* ---- 11. Bandeau de chiffres (stat-number : 40px / 800) -------------------- */
.hero-strip{position:relative;z-index:3;border-top:0;border-bottom:1px solid var(--line);background:var(--bg)}
.strip-grid>div{background:transparent;border-right:1px solid var(--line);padding:40px 24px;text-align:left;
  align-items:flex-start}
.strip-grid b{font-family:var(--display);font-weight:800;font-size:2.5rem;line-height:1;color:var(--vert-d);
  margin-bottom:10px;font-variant-numeric:tabular-nums}
.strip-grid span{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem}

/* ---- 12. Bandeaux pleine largeur ------------------------------------------ */
.section-dark,.band-dark{background:var(--vert-d);color:#dfe4e0}
.section-dark .kicker,.band-dark .kicker{color:var(--or-l)}
.section-dark .kicker::before,.band-dark .kicker::before{background:var(--or-l)}
.band-dark,.band-vert{border-radius:var(--r);padding:48px}
.band-vert{background:var(--vert)}
.eng-num{border-radius:var(--r);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.eng-num:hover{border-color:rgba(252,195,64,.5)}
.eng-num .n{color:var(--or-l);font-family:var(--display);font-weight:800}
.eng-num .eng-ic{color:var(--or-l)}
.preambule .quote{border-left-color:var(--or-l);font-family:var(--display);font-style:normal;font-weight:600;
  color:var(--vert-d)}

/* ---- 13. Pied de page : clair, conformément aux maquettes ------------------ */
.site-footer{background:var(--bg-fort);color:var(--muted);padding:96px 0 0}
.f-logo{height:48px;background:none;padding:0;border-radius:0}
.f-brand p{color:var(--muted)}
.f-devise{color:var(--or)!important}
.f-col h4{font-family:var(--display);font-size:1.125rem;font-weight:600;letter-spacing:normal;
  text-transform:none;color:var(--vert-d);margin-bottom:24px}
.f-col a,.f-col p{color:var(--muted);font-family:var(--body);font-size:1rem;font-weight:400}
.f-col a:hover{color:var(--vert-d)}
.f-admin{color:var(--outline)!important}
.site-footer .soc{color:var(--muted)}
.site-footer .soc:hover{color:var(--vert-d)}
.footer-legal{border-top:1px solid var(--line-fort)}
.footer-legal a{color:var(--muted)}
.footer-legal a:hover{color:var(--vert-d)}
.footer-bottom{border-top:1px solid var(--line-fort)}
.footer-bottom .container{color:var(--outline);font-weight:400;letter-spacing:normal}

/* ---- 14. Formulaires ------------------------------------------------------ */
.field input,.field textarea,.field select,.nl-step input{
  border-radius:var(--r);border:1px solid var(--line-fort);background:var(--surface);font-family:var(--body)}
.field input:focus,.field textarea:focus,.field select:focus,.nl-step input:focus{
  border-color:var(--vert-d);box-shadow:0 0 0 3px rgba(0,40,25,.12)}
.nl-box{background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--shadow)}
.nl-box h2{color:var(--vert-d)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--or)}

/* ---- 15. Divers ----------------------------------------------------------- */
.prose a:not(.btn){color:var(--vert-d);text-decoration-color:var(--or-l)}
.prose a:not(.btn):hover{color:var(--or-d)}
.event-more,.card .event-more,.nav-card .event-more{color:var(--vert-d);font-family:var(--sans);
  font-size:.875rem;font-weight:600;letter-spacing:.05em}
.event-more:hover{color:var(--or-d)}
.vision-card{background:var(--vert-d);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.vision-card p{font-style:normal}
.ticks li::before{background:var(--or-l);color:var(--vert-d)}

/* ---- 16. Thème sombre ----------------------------------------------------- */
/* :root[data-theme] et non [data-theme] : une ancienne déclaration plus haut dans
   le fichier utilise :root[data-theme="dark"] et l'emportait sur la spécificité,
   d'où un fond bleu nuit resté sous des cartes déjà passées au nouveau vert. */
:root[data-theme="dark"]{--bg:#111413;--bg-soft:#1a1d1c;--bg-alt:#20241f;--bg-fort:#2a2f2c;--surface:#1a1d1c;
  --ink:#e5e2e1;--muted:#c0c9c1;--line:#2f3532;--line-fort:#414940;--or:#fcc340}
[data-theme="dark"] .site-header{background:rgba(17,20,19,.9)}
[data-theme="dark"] .site-footer{background:#0d100f}
[data-theme="dark"] .f-col h4,[data-theme="dark"] .section-head h2,[data-theme="dark"] .cards>.card h3,
[data-theme="dark"] .b-card:not(.v-or) h3,[data-theme="dark"] .brand-text strong{color:#fff}
[data-theme="dark"] .cards>.card,[data-theme="dark"] .bento .b-card:not(.v-vert):not(.v-navy):not(.v-or){
  background:var(--surface);box-shadow:none;border:1px solid var(--line)}
[data-theme="dark"] .hero-logo{background:none;padding:0;box-shadow:none}
[data-theme="dark"] .strip-grid>div{background:transparent;border-color:var(--line)}
[data-theme="dark"] .menu a.active{color:var(--or-l);border-bottom-color:var(--or-l)}
[data-theme="dark"] .btn-ghost{color:var(--or-l);border-color:var(--line-fort)}

/* ---- 17. Responsive ------------------------------------------------------- */
/* La maquette compte 7 entrées de menu, le site en compte 9 plus un bouton :
   la gouttière et l'espacement se resserrent avant que la barre ne déborde. */
@media (max-width:1500px){
  .site-header .nav{padding-left:32px;padding-right:32px}
  .menu{gap:18px}
}
@media (max-width:1200px){
  .menu{gap:13px}
  .menu a:not(.btn),.nav-trigger{font-size:.8rem;letter-spacing:.03em}
  .btn-sm{padding:.6em 1.1em}
}
@media (max-width:1024px){
  :root{--marge:32px;--section-gap:88px}
  .hero{min-height:520px}
  .hero-inner{padding:72px var(--marge)}
  .page-hero .inner{padding:88px var(--marge) 76px}
}
@media (max-width:760px){
  :root{--marge:20px;--section-gap:64px;--comp-gap:20px}
  .container{padding:0 var(--marge)}
  h1,.hero h1,.page-hero h1{font-size:2rem;line-height:1.2;letter-spacing:-.01em}
  .hero{min-height:0}
  .hero-inner{padding:56px var(--marge)}
  .page-hero .inner{padding:64px var(--marge) 56px}
  .hero .lead,.page-hero p{font-size:1rem;max-width:none}
  .strip-grid>div{border-right:0;border-bottom:1px solid var(--line);padding:28px 20px}
  .site-footer{padding:64px 0 0}
}

/* ---- 18. Correctifs de barre de navigation et d'accent --------------------- */
/* Le menu déroulant prenait le relais à 1024px, mais avec neuf entrées la barre
   débordait déjà vers 1100px. Le basculement remonte à 1180px, et le panneau
   s'ouvre sous une barre qui mesure désormais 80px et non 72px. */
@media (max-width:1180px){
  .menu{position:fixed;inset:80px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--bg);border-bottom:1px solid var(--line);padding:20px var(--marge);gap:14px;
    transform:translateY(-150%);transition:transform .3s;box-shadow:var(--shadow-md);z-index:49}
  .menu.open{transform:translateY(0)}
  .menu a:not(.btn),.nav-trigger{font-size:.95rem;border-bottom:0;padding:6px 0}
  .menu a.active{border-bottom:0;color:var(--or-d)}
  .burger{display:flex}
  .burger span{background:var(--vert-d)}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  [data-theme="dark"] .menu{background:var(--bg)}
}
/* Un seul accent : les maquettes ne connaissent que le vert et l'or.
   Le bleu et l'orange des pastilles d'icônes sont retirés. */
.cards>.card.acc-vert .card-ic,.cards>.card.acc-bleu .card-ic{color:var(--vert-d)}
.cards>.card.acc-or .card-ic,.cards>.card.acc-orange .card-ic{color:var(--or-d)}

/* ---- 20. Cartes d'activités (refonte d'après la maquette) ------------------
   Le titre passe sur l'image, sur un dégradé montant ; la description et le
   lien occupent le corps de la carte. Repris du système v3 : rayon 8 px,
   ombre teintée vert, filet d'outline discret. */
.act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--comp-gap)}
.act-card{display:flex;flex-direction:column;text-align:left;width:100%;padding:0;
  background:var(--surface);border:1px solid var(--line-fort);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;font-family:inherit;
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease}
.act-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-fort)}

/* Visuel : 256 px, titre en surimpression sur un dégradé montant */
.act-img{position:relative;height:256px;background-size:cover;background-position:center;
  background-color:var(--bg-alt);overflow:hidden;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.act-card:hover .act-img{transform:scale(1.05)}
.act-visuel{position:relative;height:256px;overflow:hidden}
.act-visuel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 45%,transparent 100%)}
.act-visuel h3{position:absolute;left:24px;right:24px;bottom:18px;z-index:2;margin:0;
  font-family:var(--display);font-size:1.375rem;font-weight:600;line-height:1.3;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.35)}
.act-img.ph{display:flex;align-items:center;justify-content:center;font-size:2.6rem}

.act-body{padding:28px 24px;display:flex;flex-direction:column;gap:0;flex:1}
.act-body p{color:var(--muted);font-size:1rem;line-height:1.6;flex:1;margin:0 0 24px}
.act-more{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.875rem;
  font-weight:600;letter-spacing:.05em;color:var(--vert-d);margin-top:auto}
.act-card:hover .act-more{color:var(--or-d)}

@media (max-width:760px){
  .act-grid{grid-template-columns:1fr}
  .act-visuel,.act-img{height:210px}
  .act-visuel h3{font-size:1.2rem;left:20px;right:20px}
  .act-body{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  .act-card:hover .act-img{transform:none}
}

/* Thème sombre */
[data-theme="dark"] .act-card{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .act-more{color:var(--or-l)}

/* ---- 21. Bannières : photographies éclaircies de 50 % ----------------------
   Le visuel est posé en fusion « multiply » sous un dégradé vert : il ressortait
   très sombre. Un brightness(1.5) sur la seule couche image l'éclaircit de moitié
   sans toucher au dégradé, donc sans affaiblir le contraste du texte, qui reste
   blanc pur sur la moitié gauche la plus couverte.
   S'applique à l'accueil comme aux bandeaux de pages internes. */
.hero .hero-bg{filter:brightness(1.5)}
.page-hero::before{filter:brightness(1.5)}
/* Les bandeaux internes posaient l'image en « multiply » sur un fond vert foncé :
   le produit plafonnait dans le sombre et l'éclaircissement restait sans effet.
   La base passe en clair, exactement comme l'accueil ; le vert vient désormais du
   seul dégradé, qui porte aussi le contraste du texte. */
.page-hero{background:var(--bg-alt)}
/* Les photographies étant désormais visibles, le texte peut tomber sur une zone
   claire (une fenêtre, un ciel). Plutôt que de réassombrir le dégradé, une ombre
   portée protège la seule typographie : la bannière reste lumineuse et le texte
   lisible quelle que soit la photo de la page. */
.hero h1,.page-hero h1{text-shadow:0 2px 20px rgba(0,20,12,.55)}
.hero .lead,.page-hero p{text-shadow:0 1px 14px rgba(0,20,12,.6)}
.hero .eyebrow,.page-hero .kicker,.page-hero .eyebrow,.page-hero .breadcrumb{
  text-shadow:0 1px 10px rgba(0,20,12,.65)}