/* ============================================================
   SITE PUBLIC — Mairie de Natitingou
   Design premium institutionnel — bordeaux & terracotta
   Inspiré du blason de la commune. AE Global Service
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root{
  --bordeaux:#7B1E2B; --bordeaux-fonce:#5E141E; --bordeaux-clair:#F3E4E2;
  --terracotta:#B45B3E; --terracotta-clair:#F6E7DD;
  --or:#C9A227; --or-clair:#EBD9A0;
  --encre:#2A1A17; --gris:#7A6A64; --gris-clair:#A89B95;
  --creme:#FBF7F2; --blanc:#fff; --bordure:#EBE0D7;
  --vert-bj:#0A8A43; --jaune-bj:#F4C20D; --rouge-bj:#C8102E;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
  --ombre:0 4px 20px rgba(94,20,30,.08);
  --ombre-fort:0 18px 50px rgba(94,20,30,.20);
  --ombre-or:0 6px 22px rgba(201,162,39,.28);
  --rayon:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
body{font-family:var(--sans);color:var(--encre);background:var(--creme);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--bordeaux);text-decoration:none}
img{max-width:100%;display:block}
.conteneur{max-width:1200px;margin:0 auto;padding:0 24px}

.tricolore{height:4px;display:flex}
.tricolore i{flex:1}
.tricolore i:nth-child(1){background:var(--vert-bj)}
.tricolore i:nth-child(2){background:var(--jaune-bj)}
.tricolore i:nth-child(3){background:var(--rouge-bj)}

/* ---- Barre d'utilité (au-dessus du menu) ---- */
.barre-util{background:var(--bordeaux-fonce);color:rgba(255,255,255,.92);font-size:.78rem}
.barre-util .conteneur{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 24px;min-height:34px}
.barre-util .gauche{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.barre-util .gauche span{display:inline-flex;align-items:center;gap:6px}
.barre-util a{color:#fff;opacity:.9;transition:opacity .2s}
.barre-util a:hover{opacity:1}
.barre-util .droite{display:flex;gap:14px;align-items:center}
@media(max-width:920px){.barre-util{display:none}}

/* ---- En-tête principal ---- */
.site-tete{position:sticky;top:0;z-index:50;background:rgba(251,247,242,.9);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--bordure);transition:box-shadow .3s,padding .3s}
.site-tete.defile{box-shadow:0 8px 30px rgba(94,20,30,.12)}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;transition:padding .3s}
.site-tete.defile .site-nav{padding:10px 0}
.marque-pub{display:flex;align-items:center;gap:14px}
.marque-pub .blason{width:56px;height:56px;border-radius:14px;overflow:hidden;box-shadow:var(--ombre);background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid var(--bordure);transition:transform .3s}
.marque-pub:hover .blason{transform:scale(1.04) rotate(-2deg)}
.marque-pub .blason img{width:100%;height:100%;object-fit:contain}
.marque-pub .txt b{font-family:var(--serif);font-size:1.24rem;font-weight:600;color:var(--bordeaux);display:block;line-height:1.12;letter-spacing:.2px}
.marque-pub .txt span{font-size:.72rem;color:var(--gris);letter-spacing:1.5px;text-transform:uppercase}
.menu-pub{display:flex;align-items:center;gap:4px;list-style:none}
.menu-pub > li{position:relative}
.menu-pub > li > a{position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 16px;border-radius:10px;color:var(--encre);font-size:.95rem;font-weight:500;transition:.22s}
.menu-pub > li > a::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .26s;border-radius:2px}
.menu-pub > li > a:hover{color:var(--bordeaux);background:var(--bordeaux-clair)}
.menu-pub > li > a:hover::after,.menu-pub > li > a.actif::after{transform:scaleX(1)}
.menu-pub > li > a.actif{color:var(--bordeaux);font-weight:600}
.menu-pub .a-fleche::before{content:"";display:inline-block;width:5px;height:5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:3px;opacity:.6;transition:transform .2s}
.menu-pub > li:hover .a-fleche::before{transform:rotate(-135deg)}
.cta-menu{margin-left:8px}
.cta-menu a{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:11px;background:linear-gradient(135deg,var(--or),#B8901E);color:#3a2c00;font-weight:600;font-size:.92rem;box-shadow:var(--ombre-or);transition:.24s}
.cta-menu a:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(201,162,39,.4)}

/* ---- Méga-menu (Services) ---- */
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);width:560px;max-width:92vw;background:#fff;border:1px solid var(--bordure);border-radius:16px;box-shadow:var(--ombre-fort);padding:20px;opacity:0;visibility:hidden;transition:.26s;z-index:60}
.menu-pub > li:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.mega-grille{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-grille a{display:flex;gap:12px;padding:12px;border-radius:11px;transition:.2s;color:var(--encre)}
.mega-grille a:hover{background:var(--bordeaux-clair)}
.mega-grille a .mi{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:var(--terracotta-clair);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:.2s}
.mega-grille a:hover .mi{background:var(--bordeaux);transform:scale(1.05)}
.mega-grille a b{display:block;font-size:.9rem;color:var(--bordeaux);font-weight:600}
.mega-grille a span{font-size:.78rem;color:var(--gris);line-height:1.35}
.mega-pied{margin-top:14px;padding-top:14px;border-top:1px solid var(--bordure);display:flex;justify-content:space-between;align-items:center}
.mega-pied span{font-size:.82rem;color:var(--gris)}
.mega-pied a{color:var(--bordeaux);font-weight:600;font-size:.86rem}
@media(max-width:920px){.mega{display:none!important}.cta-menu{display:none}}

.burger{display:none;background:none;border:none;font-size:1.7rem;color:var(--bordeaux);cursor:pointer}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:11px;font-weight:600;font-size:.95rem;cursor:pointer;border:none;transition:.24s;font-family:inherit;letter-spacing:.2px}
.btn-or{background:linear-gradient(135deg,var(--or),#B8901E);color:#3a2c00;box-shadow:var(--ombre-or)}
.btn-or:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,162,39,.42)}
.btn-bordeaux{background:var(--bordeaux);color:#fff;box-shadow:0 6px 20px rgba(123,30,43,.3)}
.btn-bordeaux:hover{background:var(--bordeaux-fonce);transform:translateY(-2px)}
.btn-ligne{background:transparent;border:1.5px solid var(--bordeaux);color:var(--bordeaux)}
.btn-ligne:hover{background:var(--bordeaux);color:#fff}
.btn-blanc{background:#fff;color:var(--bordeaux)}
.btn-blanc:hover{transform:translateY(-2px);box-shadow:var(--ombre-fort)}
.btn-ligne-clair{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(4px)}
.btn-ligne-clair:hover{background:rgba(255,255,255,.18)}

.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bordeaux-fonce) 0%,var(--bordeaux) 55%,var(--terracotta) 120%);color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 15%,rgba(201,162,39,.30),transparent 42%),radial-gradient(circle at 12% 88%,rgba(180,91,62,.40),transparent 46%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-motif{position:absolute;top:0;right:0;width:50%;height:100%;opacity:.08;pointer-events:none;background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 22px),repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 22px)}
.hero-inner{position:relative;z-index:2;padding:96px 0 104px;max-width:780px}
.hero .kicker{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;letter-spacing:2.5px;text-transform:uppercase;background:rgba(255,255,255,.12);padding:8px 18px;border-radius:99px;margin-bottom:26px;border:1px solid rgba(255,255,255,.22);font-weight:500}
.hero .kicker .pastille{width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 0 4px rgba(201,162,39,.3);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{font-family:var(--serif);font-size:3.4rem;line-height:1.08;font-weight:600;margin-bottom:22px;letter-spacing:-.5px}
.hero h1 em{font-style:italic;color:var(--or-clair)}
.hero p{font-size:1.2rem;opacity:.93;margin-bottom:34px;max-width:600px;font-weight:300}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-vague{position:absolute;bottom:-1px;left:0;width:100%;line-height:0;z-index:2}
.hero-vague svg{width:100%;height:54px;display:block}

.acces{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:-50px auto 0;position:relative;z-index:10}
.carte-acces{background:#fff;border-radius:var(--rayon);padding:26px 22px;box-shadow:var(--ombre);border:1px solid var(--bordure);transition:.28s;text-align:center;position:relative;overflow:hidden}
.carte-acces::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--bordeaux),var(--terracotta));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.carte-acces:hover{transform:translateY(-6px);box-shadow:var(--ombre-fort)}
.carte-acces:hover::before{transform:scaleX(1)}
.carte-acces .ic{font-size:2rem;display:inline-flex;width:60px;height:60px;align-items:center;justify-content:center;background:var(--bordeaux-clair);border-radius:14px;margin-bottom:14px;transition:.28s}
.carte-acces:hover .ic{background:var(--bordeaux);transform:rotate(-6deg) scale(1.05)}
.carte-acces b{display:block;color:var(--bordeaux);font-size:1.04rem;margin-bottom:3px;font-weight:600}
.carte-acces span{font-size:.82rem;color:var(--gris)}

.section{padding:78px 0}
.section-tete{text-align:center;max-width:660px;margin:0 auto 48px}
.section-tete .sur{display:inline-block;font-size:.76rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--terracotta);font-weight:700;margin-bottom:12px}
.section-tete .sur::before,.section-tete .sur::after{content:"—";margin:0 8px;color:var(--or)}
.section-tete h2{font-family:var(--serif);font-size:2.4rem;color:var(--encre);line-height:1.16;font-weight:600;letter-spacing:-.3px}
.section-tete p{color:var(--gris);margin-top:14px;font-size:1.05rem}
.section.alt{background:linear-gradient(180deg,var(--bordeaux-clair),var(--creme))}
.section.fonce{background:linear-gradient(135deg,var(--bordeaux-fonce),var(--bordeaux));color:#fff}
.section.fonce .section-tete h2{color:#fff}
.section.fonce .section-tete .sur{color:var(--or-clair)}

.grille-actu{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.carte-actu{background:#fff;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);border:1px solid var(--bordure);transition:.3s;display:flex;flex-direction:column}
.carte-actu:hover{transform:translateY(-6px);box-shadow:var(--ombre-fort)}
.carte-actu .vignette{height:188px;position:relative;overflow:hidden}
.carte-actu .vignette img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.carte-actu:hover .vignette img{transform:scale(1.06)}
.carte-actu .vignette .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.8rem;color:var(--terracotta);background:linear-gradient(135deg,var(--terracotta-clair),var(--bordeaux-clair))}
.carte-actu .corps{padding:22px;flex:1;display:flex;flex-direction:column}
.carte-actu .date{font-size:.74rem;color:var(--terracotta);text-transform:uppercase;letter-spacing:1px;margin-bottom:9px;font-weight:600}
.carte-actu h3{font-family:var(--serif);font-size:1.24rem;color:var(--encre);margin-bottom:11px;line-height:1.32;font-weight:600}
.carte-actu p{font-size:.9rem;color:var(--gris);flex:1}
.carte-actu .lire{margin-top:16px;font-weight:600;font-size:.86rem;color:var(--bordeaux);display:inline-flex;align-items:center;gap:6px;transition:gap .24s}
.carte-actu:hover .lire{gap:11px}

.maire{display:grid;grid-template-columns:.85fr 1.4fr;gap:48px;align-items:center}
.maire .photo{aspect-ratio:1;background:linear-gradient(135deg,var(--terracotta),var(--bordeaux));border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:5.5rem;color:rgba(255,255,255,.4);box-shadow:var(--ombre-fort);position:relative;overflow:hidden}
.maire .photo::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.2);border-radius:24px;margin:12px}
.maire blockquote{font-family:var(--serif);font-size:1.5rem;line-height:1.5;color:var(--encre);font-style:italic;position:relative;padding-left:28px;border-left:3px solid var(--or)}
.maire blockquote::before{content:"\201C";position:absolute;left:14px;top:-18px;font-size:3.4rem;color:var(--or);opacity:.4;font-family:var(--serif)}
.maire .sign{margin-top:22px;font-style:normal}
.maire .sign b{display:block;color:var(--bordeaux);font-size:1.1rem;font-family:var(--serif)}
.maire .sign span{font-size:.85rem;color:var(--gris)}

.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.chiffre{text-align:center;padding:30px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--rayon);backdrop-filter:blur(6px)}
.section.fonce .chiffre .v{font-family:var(--serif);font-size:2.9rem;color:var(--or-clair);font-weight:700;line-height:1}
.chiffre .v{font-family:var(--serif);font-size:2.9rem;color:var(--bordeaux);font-weight:700;line-height:1}
.chiffre .l{font-size:.82rem;margin-top:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85}

.grille-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bloc{background:#fff;border-radius:var(--rayon);padding:30px;box-shadow:var(--ombre);border:1px solid var(--bordure);transition:.28s;position:relative;overflow:hidden}
.bloc:hover{transform:translateY(-5px);box-shadow:var(--ombre-fort)}
.bloc .ic{font-size:1.7rem;width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:var(--terracotta-clair);border-radius:14px;margin-bottom:17px;transition:.28s}
.bloc:hover .ic{background:var(--bordeaux);transform:scale(1.06)}
.bloc h3{font-family:var(--serif);font-size:1.22rem;color:var(--bordeaux);margin-bottom:9px;font-weight:600}
.bloc p{font-size:.92rem;color:var(--gris)}
.badge-statut{display:inline-block;font-size:.72rem;font-weight:700;padding:4px 13px;border-radius:99px;margin-bottom:11px;text-transform:uppercase;letter-spacing:.5px}
.badge-statut.en_cours{background:var(--or-clair);color:#7a5e00}
.badge-statut.acheve{background:#D9EBDD;color:#1d6b3a}
.badge-statut.a_venir{background:var(--terracotta-clair);color:var(--terracotta)}

.page-tete{position:relative;background:linear-gradient(135deg,var(--bordeaux-fonce),var(--bordeaux));color:#fff;padding:72px 0 64px;overflow:hidden}
.page-tete::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(201,162,39,.25),transparent 45%);pointer-events:none}
.page-tete::after{content:"";position:absolute;inset:0;opacity:.05;background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 24px)}
.page-tete h1{font-family:var(--serif);font-size:2.7rem;font-weight:600;position:relative;letter-spacing:-.4px}
.page-tete .fil{font-size:.84rem;opacity:.85;margin-top:10px;position:relative}
.page-tete .fil a{color:var(--or-clair)}
.contenu-page{padding:62px 0;max-width:880px}
.contenu-page h2{font-family:var(--serif);color:var(--bordeaux);font-size:1.7rem;margin:34px 0 16px;font-weight:600}
.prose{font-size:1.06rem;line-height:1.85;color:#3a2c28}
.prose p{margin-bottom:18px}

.form-contact{background:#fff;border-radius:var(--rayon);padding:34px;box-shadow:var(--ombre);border:1px solid var(--bordure)}
.champ-pub{margin-bottom:17px}
.champ-pub label{display:block;font-size:.85rem;font-weight:600;color:var(--encre);margin-bottom:7px}
.champ-pub input,.champ-pub textarea,.champ-pub select{width:100%;padding:13px 15px;border:1.5px solid var(--bordure);border-radius:10px;font-family:inherit;font-size:.95rem;background:var(--creme);transition:.2s}
.champ-pub input:focus,.champ-pub textarea:focus{outline:none;border-color:var(--bordeaux);background:#fff;box-shadow:0 0 0 4px var(--bordeaux-clair)}
.alerte{padding:14px 18px;border-radius:11px;margin-bottom:20px;font-size:.92rem}
.alerte.ok{background:#E4F0E6;color:#1d6b3a;border:1px solid #9ccaa8}
.alerte.ko{background:var(--bordeaux-clair);color:var(--bordeaux);border:1px solid #d9a8af}

.pied{position:relative;background:var(--encre);color:#d8c9c2;padding:60px 0 0;overflow:hidden}
.pied::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--bordeaux),var(--terracotta),var(--or))}
.pied-grille{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px;padding-bottom:40px}
.pied h4{color:#fff;font-family:var(--serif);font-size:1.2rem;margin-bottom:18px;font-weight:600}
.pied .marque-pied{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pied .marque-pied .bl{width:46px;height:46px;border-radius:11px;overflow:hidden;background:#fff;flex-shrink:0}
.pied .marque-pied .bl img{width:100%;height:100%;object-fit:contain}
.pied .marque-pied b{color:#fff;font-size:1.16rem;font-family:var(--serif)}
.pied p{font-size:.9rem;margin-bottom:9px;opacity:.82}
.pied ul{list-style:none}
.pied ul li{margin-bottom:10px}
.pied ul a{color:#d8c9c2;font-size:.9rem;transition:.2s}
.pied ul a:hover{color:var(--or-clair);padding-left:4px}
.pied-bas{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;text-align:center;font-size:.84rem;opacity:.72}
.pied-bas .devise{color:var(--or-clair);font-family:var(--serif);font-style:italic}

.js-anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js-anim .reveal.vu{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero .kicker .pastille{animation:none}}

@media(max-width:920px){
  .menu-pub{position:fixed;top:0;right:0;bottom:0;width:88vw;max-width:340px;background:var(--creme);flex-direction:column;align-items:stretch;justify-content:flex-start;padding:76px 18px calc(20px + env(safe-area-inset-bottom,0px));gap:2px;transform:translateX(105%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(94,20,30,.25);z-index:60;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .menu-pub.ouvert{transform:translateX(0)}
  .menu-pub > li{position:static;width:100%}
  .menu-pub > li > a{display:flex;align-items:center;width:100%;padding:14px 16px;border-radius:10px;font-size:1rem}
  .menu-pub > li > a::after{display:none}
  .menu-pub > li > a:hover,.menu-pub > li > a.actif{color:var(--bordeaux);background:var(--bordeaux-clair)}
  .menu-pub .a-fleche::before{display:none}
  .menu-pub .mega{display:none!important}
  .cta-menu{display:block!important;margin:10px 0 0}
  .cta-menu a{display:flex;width:100%;justify-content:center}
  /* voile sombre derrière le menu */
  .menu-pub.ouvert::before{content:"";position:fixed;inset:0;left:-100vw;width:100vw;background:rgba(42,26,23,.45);z-index:-1}
  .burger{display:block;z-index:61}
  .acces{grid-template-columns:repeat(2,1fr)}
  .grille-actu,.grille-cartes{grid-template-columns:1fr}
  .maire{grid-template-columns:1fr;gap:30px}
  .maire .photo{max-width:280px;margin:0 auto}
  .hero h1{font-size:2.3rem}
  .hero-inner{padding:62px 0 80px}
  .pied-grille{grid-template-columns:1fr;gap:30px}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .section{padding:54px 0}
  .section-tete h2{font-size:1.9rem}
}

/* ============================================================
   ENRICHISSEMENT VISUEL — images, illustrations, transitions
   ============================================================ */

/* ---- Héro avec image de fond (si fournie) ---- */
.hero.avec-image{background:var(--bordeaux-fonce)}
.hero .hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.34}
.hero.avec-image::before{background:linear-gradient(115deg,var(--bordeaux-fonce) 8%,rgba(123,30,43,.82) 48%,rgba(180,91,62,.5) 100%);opacity:1}
.hero.avec-image .hero-motif{opacity:.05}

/* ---- Illustration par défaut riche (sans photo) : silhouette Tata Somba ---- */
.hero-illus{position:absolute;right:0;bottom:0;width:46%;max-width:560px;height:88%;z-index:1;opacity:.5;pointer-events:none}
@media(max-width:920px){.hero-illus{display:none}}

/* ---- Vignettes d'actualités : dégradés variés quand pas d'image ---- */
.carte-actu .vignette .ph{position:relative}
.carte-actu .vignette .ph::after{content:"";position:absolute;inset:0;opacity:.14;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 16px)}
.carte-actu:nth-child(3n+1) .vignette .ph{background:linear-gradient(135deg,#7B1E2B,#B45B3E)}
.carte-actu:nth-child(3n+2) .vignette .ph{background:linear-gradient(135deg,#B45B3E,#C9A227)}
.carte-actu:nth-child(3n) .vignette .ph{background:linear-gradient(135deg,#5E141E,#7B1E2B)}
.carte-actu .vignette .ph .ic-actu{position:relative;z-index:1;color:rgba(255,255,255,.92);font-size:2.8rem}
.carte-actu .vignette .etiq{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.92);color:var(--bordeaux);font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:5px 11px;border-radius:99px}

/* ---- Bande d'images / galerie d'accueil ---- */
.bande-img{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:170px 170px;gap:14px}
.bande-img .tuile{border-radius:var(--rayon);overflow:hidden;position:relative;background-size:cover;background-position:center;box-shadow:var(--ombre)}
.bande-img .tuile:first-child{grid-row:span 2}
.bande-img .tuile.vide{background:linear-gradient(135deg,var(--terracotta-clair),var(--bordeaux-clair));display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--terracotta)}
.bande-img .tuile .leg{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(42,26,23,.82));color:#fff;font-size:.84rem;font-weight:500}
@media(max-width:920px){.bande-img{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,130px)}.bande-img .tuile:first-child{grid-row:span 1;grid-column:span 2}}

/* ---- Transition douce entre pages ---- */
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.js-anim main{animation:pageIn .5s ease both}

/* ---- Micro-animations boutons ---- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.25);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.btn:active::after{transform:scaleX(1);transition:none}

/* ---- Compteur animé chiffres ---- */
.chiffre .v{transition:opacity .4s}

/* ============================================================
   PORTAIL : bottom nav, tourisme, carte, service, sensibilisation
   ============================================================ */

/* ---- Bottom navigation mobile ---- */
.bottom-nav{display:none}
@media(max-width:920px){
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100vw;box-sizing:border-box;z-index:70;background:rgba(251,247,242,.97);backdrop-filter:blur(12px);border-top:1px solid var(--bordure);box-shadow:0 -4px 20px rgba(94,20,30,.1);padding:6px 4px env(safe-area-inset-bottom,6px);overflow:hidden}
  .bottom-nav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;color:var(--gris);font-size:.66rem;font-weight:600;position:relative;transition:color .2s;text-align:center}
  .bottom-nav a .bi{font-size:1.3rem;line-height:1;transition:transform .2s}
  .bottom-nav a.actif{color:var(--bordeaux)}
  .bottom-nav a.actif .bi{transform:translateY(-2px) scale(1.12)}
  .bottom-nav a.actif::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--bordeaux)}
  body{padding-bottom:64px}
  .pied{margin-bottom:0}
}

/* ---- Galerie tourisme (grille) ---- */
.grille-tourisme{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.carte-site{background:#fff;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);border:1px solid var(--bordure);transition:.3s;display:flex;flex-direction:column;text-decoration:none}
.carte-site:hover{transform:translateY(-6px);box-shadow:var(--ombre-fort)}
.carte-site .vign{height:200px;background-size:cover;background-position:center;position:relative;background-color:var(--terracotta-clair)}
.carte-site .vign.vide{display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--terracotta);background:linear-gradient(135deg,var(--terracotta-clair),var(--bordeaux-clair))}
.carte-site .vign .lieu{position:absolute;left:12px;bottom:12px;background:rgba(42,26,23,.78);color:#fff;font-size:.74rem;padding:5px 12px;border-radius:99px;backdrop-filter:blur(4px)}
.carte-site .corps{padding:22px;flex:1;display:flex;flex-direction:column}
.carte-site h3{font-family:var(--serif);font-size:1.3rem;color:var(--bordeaux);margin-bottom:9px;font-weight:600}
.carte-site p{font-size:.9rem;color:var(--gris);flex:1}
.carte-site .voir{margin-top:14px;font-weight:600;font-size:.86rem;color:var(--terracotta)}

/* ---- Galerie photos (détail site) ---- */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.galerie .ph-item{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--terracotta-clair);position:relative}
.galerie .ph-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s;cursor:pointer}
.galerie .ph-item:hover img{transform:scale(1.07)}
.galerie .ph-item .leg{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(transparent,rgba(42,26,23,.8));color:#fff;font-size:.76rem}
@media(max-width:920px){.grille-tourisme,.galerie{grid-template-columns:1fr 1fr}.galerie{gap:10px}}

/* ---- Carte (Leaflet) ---- */
.carte-osm{height:420px;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);border:1px solid var(--bordure);z-index:1}
.bloc-localisation{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:start}
@media(max-width:920px){.bloc-localisation{grid-template-columns:1fr}.carte-osm{height:320px}}
.info-contact{background:#fff;border-radius:var(--rayon);padding:28px;box-shadow:var(--ombre);border:1px solid var(--bordure)}
.info-contact .lig{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.info-contact .lig .ico{width:42px;height:42px;flex-shrink:0;background:var(--bordeaux-clair);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.info-contact .lig b{display:block;color:var(--encre);font-size:.92rem}
.info-contact .lig span{font-size:.88rem;color:var(--gris)}

/* ---- Fiche service détaillée ---- */
.service-detail{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start}
.service-detail .visuel{border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);aspect-ratio:16/10;background:linear-gradient(135deg,var(--bordeaux),var(--terracotta));display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:rgba(255,255,255,.5)}
.service-detail .visuel img{width:100%;height:100%;object-fit:cover}
.info-pastilles{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.info-pastilles .past{background:var(--bordeaux-clair);color:var(--bordeaux);font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:99px}
.encadre-doc{background:var(--terracotta-clair);border-radius:var(--rayon);padding:22px;margin-top:20px}
.encadre-doc h4{font-family:var(--serif);color:var(--bordeaux);margin-bottom:10px;font-size:1.1rem}
.encadre-doc ul{margin-left:20px}.encadre-doc li{margin-bottom:6px;font-size:.92rem}
@media(max-width:920px){.service-detail{grid-template-columns:1fr}}

/* ---- Réponse démarche (après envoi) ---- */
.reponse-demarche{background:#fff;border:2px solid var(--vert-bj);border-radius:var(--rayon);padding:24px;margin-bottom:24px;box-shadow:var(--ombre)}
.reponse-demarche .tete{display:flex;align-items:center;gap:10px;color:var(--vert-bj);font-weight:700;margin-bottom:12px;font-size:1.05rem}

/* ---- Section sensibilisation ---- */
.sensib{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre-fort)}
.sensib .img{background-size:cover;background-position:center;min-height:280px;background-color:var(--terracotta)}
.sensib .img.vide{display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:rgba(255,255,255,.6);background:linear-gradient(135deg,var(--terracotta),var(--bordeaux))}
.sensib .txt{background:linear-gradient(135deg,var(--bordeaux-fonce),var(--bordeaux));color:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.sensib .txt .sur{color:var(--or-clair);font-size:.76rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.sensib .txt h2{font-family:var(--serif);font-size:1.9rem;margin-bottom:14px;font-weight:600}
.sensib .txt p{opacity:.92;font-weight:300}
@media(max-width:920px){.sensib{grid-template-columns:1fr}.sensib .img{min-height:200px}}


/* ---- Sécurité anti-débordement horizontal (mobile) ---- */
.hero,.section,.page-tete,.pied,main{max-width:100%;overflow-x:clip}
.conteneur{width:100%}
img,svg,video{max-width:100%}

/* ---- Démarche à suivre (étapes numérotées) ---- */
.bloc-demarche{background:var(--bordeaux-clair);border-radius:var(--rayon);padding:26px;margin-top:24px}
.bloc-demarche h2{margin-top:0!important}
.etapes{display:flex;flex-direction:column;gap:18px}
.etape{display:flex;gap:16px;align-items:flex-start}
.etape .n{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--bordeaux);color:#fff;font-family:var(--serif);font-weight:700;font-size:1.1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(123,30,43,.3)}
.etape b{color:var(--encre);font-size:1.05rem}
.etape > div{padding-top:5px}

/* ---- Page contact (responsive) ---- */
.contact-grille{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}
.duo-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:920px){
  .contact-grille{grid-template-columns:1fr;gap:26px}
  .duo-champs{grid-template-columns:1fr;gap:0}
  .form-contact{padding:22px}
}