/* ============================================================
   DIOUF ERRANDS & SERVICES SUARL — style.css  v3
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face { font-family:'Grift'; src:url('police grift/Web-TT/grift-regular.woff2') format('woff2'),url('police grift/Web-TT/grift-regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Grift'; src:url('police grift/Web-TT/grift-medium.woff2') format('woff2'),url('police grift/Web-TT/grift-medium.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'Grift'; src:url('police grift/Web-TT/grift-semibold.woff2') format('woff2'),url('police grift/Web-TT/grift-semibold.woff') format('woff'); font-weight:600; font-display:swap; }
@font-face { font-family:'Grift'; src:url('police grift/Web-TT/grift-bold.woff2') format('woff2'),url('police grift/Web-TT/grift-bold.woff') format('woff'); font-weight:700; font-display:swap; }
@font-face { font-family:'Grift'; src:url('police grift/Web-TT/grift-extrabold.woff2') format('woff2'),url('police grift/Web-TT/grift-extrabold.woff') format('woff'); font-weight:800; font-display:swap; }
@font-face { font-family:'Grift'; src:url('police grift/Web-TT/grift-black.woff2') format('woff2'),url('police grift/Web-TT/grift-black.woff') format('woff'); font-weight:900; font-display:swap; }

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --primary:    #3F263B;
  --secondary:  #832D61;
  --accent:     #47880F;
  --accent-lt:  #5aa315;
  --accent-glow:#6dc118;
  --bg1:        #F1E5EB;
  --bg2:        #FCF1DD;
  --white:      #FFFFFF;
  --text:       #2c1a28;
  --text-lt:    #6b4f65;
  --shadow-s:   0 4px 24px rgba(63,38,59,.10);
  --shadow-m:   0 8px 32px rgba(63,38,59,.13);
  --shadow-h:   0 16px 48px rgba(131,45,97,.22);
  --shadow-xl:  0 24px 64px rgba(63,38,59,.18);
  --radius:     18px;
  --radius-sm:  10px;
  --ease:       .35s cubic-bezier(.4,0,.2,1);
  --ease-spring:.5s cubic-bezier(.34,1.56,.64,1);
  --font:       'Grift','Segoe UI',sans-serif;
  --nav-h:      82px;
  --grad-p:     linear-gradient(135deg,var(--primary),var(--secondary));
  --grad-a:     linear-gradient(135deg,var(--accent),var(--accent-lt));
  --grad-bg:    linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 100%);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
/* P1 — Bloquer tout défilement horizontal parasite */
html {
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
}
body {
  font-family:var(--font); color:var(--text); background:var(--white);
  overflow-x:hidden; width:100%; line-height:1.65;
}
a { text-decoration:none; color:inherit; }
/* P1 — Toutes images et vidéos respectent la largeur */
img, video, iframe, svg { max-width:100%; height:auto; display:block; }
/* P6 — Images manquantes/brisées : masquage propre */
img:not([src]):not([alt]),
img[src=""],
img.img-broken {
  opacity:0; pointer-events:none; min-height:0; overflow:hidden;
}
ul { list-style:none; }
button { font-family:var(--font); cursor:pointer; border:none; outline:none; }
/* P5 — Touch targets minimum 44px */
a, button, [role="button"] { min-height:44px; }

/* ── Google Translate — masquer l'UI native ────────────────── */
.goog-te-banner-frame, .skiptranslate { display:none !important; }
body { top:0 !important; }
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display:none !important; }
.goog-text-highlight { background:transparent !important; box-shadow:none !important; }
#google_translate_element { display:none !important; }

/* ── Custom Emoji ──────────────────────────────────────────── */
.custom-emoji { display:inline-block; vertical-align:middle; object-fit:contain; }
.custom-emoji.sm  { width:18px;  height:18px; }
.custom-emoji.md  { width:26px;  height:26px; }
.custom-emoji.lg  { width:36px;  height:36px; }
.custom-emoji.xl  { width:44px;  height:44px; }
.star-ico         { width:16px;  height:16px; }
.foot-c-ico-img   { width:18px;  height:18px; opacity:.65; }

/* ── Utility ───────────────────────────────────────────────── */
.container       { max-width:1200px; margin:0 auto; }
.text-center     { text-align:center; }
.text-center .section-sub, .text-center .divider { margin-inline:auto; }

/* Section Label — with decorative lines */
.section-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--secondary); margin-bottom:12px;
}
.section-label::before,
.section-label::after {
  display:none;
}

.section-title {
  font-size:clamp(1.9rem,4vw,3rem); font-weight:900;
  color:var(--primary); line-height:1.15; margin-bottom:18px;
  letter-spacing:-.025em;
}
/* Gradient accent on key word via span.accent-word in titles */
.section-title .accent-word {
  background:var(--grad-p); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}

.section-sub { font-size:1rem; color:var(--text-lt); max-width:600px; line-height:1.78; }

/* Divider — supprimé */
.divider { display:none; }
@keyframes shimmer-divider { }

section { padding:100px 24px; }

/* Fade-up */
.fade-up { opacity:0; transform:translateY(44px); transition:opacity .72s cubic-bezier(.4,0,.2,1),transform .72s cubic-bezier(.4,0,.2,1); }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up.d1 { transition-delay:.1s; } .fade-up.d2 { transition-delay:.2s; }
.fade-up.d3 { transition-delay:.3s; } .fade-up.d4 { transition-delay:.4s; }
.fade-up.d5 { transition-delay:.5s; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 34px; border-radius:50px;
  font-size:.95rem; font-weight:700; letter-spacing:.03em;
  position:relative; overflow:hidden;
  transition:transform var(--ease),box-shadow var(--ease),background var(--ease);
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-100%); transition:transform .55s ease;
}
.btn:hover { transform:translateY(-3px); }
.btn:hover::after { transform:translateX(100%); }

.btn-green  { background:var(--grad-a); color:#fff; box-shadow:0 4px 22px rgba(71,136,15,.38); }
.btn-green:hover { box-shadow:0 10px 36px rgba(71,136,15,.55); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.btn-outline:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.9); }
.btn-primary { background:var(--grad-p); color:#fff; box-shadow:var(--shadow-m); }
.btn-primary:hover { box-shadow:var(--shadow-h); }
.btn-white { background:#fff; color:var(--accent); font-weight:700; box-shadow:0 4px 20px rgba(255,255,255,.35); }
.btn-white:hover { background:rgba(255,255,255,.93); box-shadow:0 8px 32px rgba(255,255,255,.5); }
.btn-wa { background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; box-shadow:0 4px 20px rgba(37,211,102,.35); }
.btn-wa:hover { box-shadow:0 10px 36px rgba(37,211,102,.55); }

/* Small pill badge next to btn */
.btn-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.22); border-radius:20px;
  font-size:.72rem; font-weight:700; padding:2px 8px; letter-spacing:.04em;
}

/* ── Header / Nav ──────────────────────────────────────────── */
.header {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000;
  background:rgba(63,38,59,.75);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 2px 28px rgba(63,38,59,.20);
  transition:background var(--ease),box-shadow var(--ease);
}
.header.scrolled {
  background:rgba(63,38,59,.97);
  box-shadow:0 4px 36px rgba(63,38,59,.32);
}
.nav-wrap {
  max-width:1280px; margin:0 auto; padding:0 28px;
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
}

/* Logo */
.nav-logo { display:flex; align-items:center; }
.nav-logo img {
  height:64px; width:auto; object-fit:contain;
  filter:brightness(1.18) drop-shadow(0 2px 10px rgba(0,0,0,.4));
  transition:transform var(--ease-spring),filter var(--ease);
}
.nav-logo:hover img { transform:scale(1.05); filter:brightness(1.3) drop-shadow(0 4px 14px rgba(0,0,0,.5)); }

.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a {
  color:rgba(255,255,255,.82); font-weight:600; font-size:.92rem;
  padding:8px 16px; border-radius:var(--radius-sm);
  position:relative; transition:color var(--ease),background var(--ease);
}
.nav-links a::after {
  content:''; position:absolute; bottom:4px; left:16px; right:16px;
  height:2px; background:var(--accent-glow); border-radius:2px;
  transform:scaleX(0); transition:transform var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:#fff; background:rgba(255,255,255,.09); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

/* Language selector */
.lang-sel { position:relative; display:flex; align-items:center; }
.lang-sel select {
  appearance:none; font-family:var(--font);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:.83rem; font-weight:600;
  padding:7px 30px 7px 13px; border-radius:20px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  transition:background var(--ease),border-color var(--ease);
}
.lang-sel select:hover { background-color:rgba(255,255,255,.2); border-color:rgba(255,255,255,.45); }
.lang-sel select option { background:var(--primary); color:#fff; }

/* Hamburger */
.nav-toggle {
  display:none; flex-direction:column; gap:5px; padding:8px;
  border-radius:var(--radius-sm); background:rgba(255,255,255,.09);
  transition:background var(--ease);
}
.nav-toggle:hover { background:rgba(255,255,255,.16); }
.nav-toggle span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .3s,opacity .3s; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0;
  background:rgba(53,30,48,.98); backdrop-filter:blur(24px);
  padding:20px; flex-direction:column; gap:6px;
  z-index:998; border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.nav-drawer.open { display:flex; }
.nav-drawer a {
  color:rgba(255,255,255,.82); font-size:1rem; font-weight:600;
  padding:13px 16px; border-radius:var(--radius-sm);
  transition:background var(--ease),color var(--ease);
  border:1px solid transparent;
}
.nav-drawer a:hover { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.1); }
.nav-drawer .lang-sel { margin-top:8px; }
.nav-drawer .lang-sel select { width:100%; border-radius:var(--radius-sm); }

/* ── Hero Slideshow ────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--primary);
}
.hero-slides { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-repeat:no-repeat; opacity:0;
  animation:heroFade 25s infinite;
}
.hero-slide:nth-child(1) { animation-delay:0s; }
.hero-slide:nth-child(2) { animation-delay:5s; }
.hero-slide:nth-child(3) { animation-delay:10s; }
.hero-slide:nth-child(4) { animation-delay:15s; }
.hero-slide:nth-child(5) { animation-delay:20s; }
@keyframes heroFade {
  0%   { opacity:0; }
  4%   { opacity:.36; }
  20%  { opacity:.36; }
  24%  { opacity:0; }
  100% { opacity:0; }
}
/* Multi-layer overlay for depth */
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom,rgba(63,38,59,.55) 0%,transparent 40%,rgba(63,38,59,.7) 100%),
    linear-gradient(135deg,rgba(63,38,59,.88) 0%,rgba(131,45,97,.52) 55%,rgba(63,38,59,.78) 100%);
}
/* Grain texture for premium feel */
.hero::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.4;
}
.hero-content {
  position:relative; z-index:2;
  text-align:center; max-width:920px;
  padding:140px 28px 100px; margin:0 auto;
}

/* Badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(71,136,15,.16);
  border:1px solid rgba(109,193,24,.4);
  color:#b3e077; font-size:.73rem; font-weight:700;
  padding:7px 18px; border-radius:24px;
  margin-bottom:32px; letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(8px);
  box-shadow:0 2px 16px rgba(71,136,15,.15);
}
.hero-badge-dot {
  width:7px; height:7px; background:var(--accent-glow);
  border-radius:50%; animation:dot-pulse 1.8s ease-in-out infinite;
  box-shadow:0 0 8px rgba(109,193,24,.7);
}
@keyframes dot-pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.7);opacity:.4;} }

.hero h1 {
  font-size:clamp(2.1rem,5.5vw,3.9rem); font-weight:900; color:#fff;
  line-height:1.1; margin-bottom:18px; letter-spacing:-.03em;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
/* Gradient highlight on hero title */
.hero h1 .hero-title-accent {
  background:linear-gradient(135deg,#e8a4c9,#f7c5db,#b3e077);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-typed-wrap {
  font-size:clamp(1.1rem,3vw,1.6rem); font-weight:600;
  color:rgba(255,255,255,.92); min-height:2.4em; margin-bottom:30px;
}
.typed-text { color:#b3e077; text-shadow:0 0 20px rgba(109,193,24,.4); }
.typed-cursor {
  display:inline-block; width:3px; height:1.1em;
  background:var(--accent-glow); margin-left:3px;
  vertical-align:text-bottom; border-radius:2px;
  animation:blink .85s step-end infinite;
  box-shadow:0 0 8px var(--accent-glow);
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

.hero-desc {
  font-size:1rem; color:rgba(255,255,255,.75);
  max-width:560px; margin:0 auto 48px; line-height:1.8;
}
.hero-cta { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* Scroll hint */
.hero-scroll {
  position:absolute; bottom:32px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.45); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; z-index:2;
  animation:scroll-bounce 2.4s ease-in-out infinite;
}
@keyframes scroll-bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(12px);} }

/* Hero decorative blobs */
.hero-deco-1,.hero-deco-2 {
  position:absolute; border-radius:50%; z-index:1; pointer-events:none;
}
.hero-deco-1 {
  width:500px; height:500px;
  top:-100px; right:-120px;
  background:radial-gradient(circle,rgba(131,45,97,.25) 0%,transparent 70%);
  animation:blob-drift 8s ease-in-out infinite alternate;
}
.hero-deco-2 {
  width:380px; height:380px;
  bottom:-80px; left:-60px;
  background:radial-gradient(circle,rgba(71,136,15,.2) 0%,transparent 70%);
  animation:blob-drift 10s ease-in-out infinite alternate-reverse;
}
@keyframes blob-drift { 0%{transform:scale(1) translate(0,0);} 100%{transform:scale(1.12) translate(20px,15px);} }

/* ── Diaspora + Marquee flags ──────────────────────────────── */
.diaspora {
  background:linear-gradient(145deg,var(--primary) 0%,#5a1f48 50%,var(--secondary) 100%);
  position:relative; overflow:hidden;
}
/* Decorative circles */
.diaspora::before,.diaspora::after {
  content:''; position:absolute; border-radius:50%;
  background:rgba(255,255,255,.04);
}
.diaspora::before { width:400px; height:400px; top:-100px; right:-80px; }
.diaspora::after  { width:300px; height:300px; bottom:-100px; left:-60px; }
/* Diagonal light strip */
.diaspora-light {
  position:absolute; top:-50%; left:20%; width:2px; height:200%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.06),transparent);
  transform:rotate(-20deg); pointer-events:none;
}
.diaspora .section-label { color:rgba(179,224,119,.92); }
.diaspora .section-title { color:#fff; }
.diaspora .divider { background:linear-gradient(90deg,rgba(255,255,255,.3),#b3e077,rgba(255,255,255,.3)); }
.diaspora-text {
  font-size:1.1rem; color:rgba(255,255,255,.82);
  line-height:1.85; max-width:700px; margin:0 auto 52px;
}

/* Marquee wrapper — hidden (replaced by single-row flex grid) */
.flags-marquee-outer { display:none; }
.flags-marquee-track {
  display:flex; gap:16px;
  animation:flagsScroll 26s linear infinite; width:max-content;
}
.flags-marquee-track:hover { animation-play-state:paused; }
@keyframes flagsScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* P7 — Ligne des pays : centrée et équilibrée desktop + scrollable mobile */
.flags-grid {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;   /* centrage horizontal */
  align-items:stretch;
  gap:20px;
  max-width:100%;
  margin:0 auto;
  padding:0 0 8px;
  /* Pas d'overflow-x ici — les 7 drapeaux tiennent sur desktop */
}
.flag-card {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  flex:0 0 auto; min-width:110px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius); padding:20px 14px;
  transition:background var(--ease),transform var(--ease-spring),box-shadow var(--ease);
  cursor:default;
}
.flag-card:hover {
  background:rgba(255,255,255,.16);
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.flag-card img {
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform var(--ease-spring);
}
.flag-card:hover img { transform:scale(1.1); }
.flag-card span {
  font-size:.77rem; font-weight:700; color:rgba(255,255,255,.85);
  text-align:center; letter-spacing:.05em;
}

/* ── Services preview ──────────────────────────────────────── */
.services-preview { background:var(--bg1); position:relative; overflow:hidden; }
/* Decorative large circle bg */
.services-preview::after {
  content:''; position:absolute;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(131,45,97,.06) 0%,transparent 70%);
  right:-150px; top:50%; transform:translateY(-50%);
  pointer-events:none;
}
.services-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:28px; margin-top:60px; position:relative; z-index:1;
}
.s-card {
  background:var(--white); border-radius:var(--radius);
  padding:38px 30px; box-shadow:var(--shadow-s);
  border:1px solid rgba(241,229,235,.7);
  position:relative; overflow:hidden;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
/* Top accent bar */
.s-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-p); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
/* Shimmer sweep */
.s-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(131,45,97,.04) 50%,transparent 60%);
  transform:translateX(-100%); transition:transform .6s ease;
}
.s-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-h); border-color:rgba(131,45,97,.2); }
.s-card:hover::before { transform:scaleX(1); }
.s-card:hover::after { transform:translateX(100%); }

/* Service number badge */
.s-card-num {
  position:absolute; top:20px; right:22px;
  font-size:3.2rem; font-weight:900; line-height:1;
  color:var(--bg1); letter-spacing:-.04em;
  transition:color var(--ease);
  user-select:none;
}
.s-card:hover .s-card-num { color:rgba(131,45,97,.1); }

.s-card-icon {
  width:70px; height:70px;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  border-radius:18px; display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  transition:transform var(--ease-spring),box-shadow var(--ease);
  box-shadow:0 4px 12px rgba(63,38,59,.08);
}
.s-card:hover .s-card-icon { transform:scale(1.08) rotate(-3deg); box-shadow:0 8px 24px rgba(63,38,59,.14); }
.s-card-icon img {
  width:36px; height:36px; object-fit:contain;
  /* Uniformise la couleur des icônes : teinte secondaire #832D61 */
  filter: brightness(0) invert(1) sepia(1) hue-rotate(289deg) saturate(2) brightness(0.65);
}

.s-card h3 { font-size:1.14rem; font-weight:800; color:var(--primary); margin-bottom:12px; }
.s-card p { font-size:.89rem; color:var(--text-lt); line-height:1.68; }
.s-card-link {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:22px; font-size:.86rem; font-weight:700; color:var(--secondary);
  transition:gap var(--ease),color var(--ease);
}
.s-card:hover .s-card-link { gap:12px; color:var(--accent); }

/* ── Stats ─────────────────────────────────────────────────── */
.stats {
  background:var(--bg2); padding:80px 24px; position:relative; overflow:hidden;
}
.stats::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(131,45,97,.07) 0%,transparent 70%);
  pointer-events:none;
}
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0; text-align:center; position:relative;
}
/* Vertical separators between stats */
.stat-item {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:32px 24px;
  border-right:1px solid rgba(63,38,59,.1);
  transition:transform var(--ease);
}
.stat-item:last-child { border-right:none; }
.stat-item:hover { transform:translateY(-4px); }

/* Ring around stat number */
.stat-ring {
  position:relative; display:inline-flex;
  align-items:center; justify-content:center;
  width:110px; height:110px; margin-bottom:8px;
  border-radius:50%;
  /* Anneau gradient via border + background clip */
  background:
    linear-gradient(var(--bg2), var(--bg2)) padding-box,
    linear-gradient(135deg, var(--secondary), var(--accent)) border-box;
  border: 4px solid transparent;
  box-shadow: 0 4px 20px rgba(131,45,97,.15);
}
.stat-ring::before { display:none; }
.stat-ring::after  { display:none; }

.stat-number {
  font-size:2.4rem; font-weight:900; line-height:1;
  background:var(--grad-p);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-size:.84rem; font-weight:600; color:var(--text-lt); letter-spacing:.05em; }

/* ── Why us ────────────────────────────────────────────────── */
.why-us { background:var(--white); }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.why-img {
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-xl); aspect-ratio:4/3;
  position:relative;
}
.why-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(131,45,97,.08) 0%,transparent 60%);
  pointer-events:none;
}
.why-img img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s ease; }
.why-img:hover img { transform:scale(1.03); }

.why-points { display:flex; flex-direction:column; gap:28px; }
.why-pt { display:flex; gap:20px; align-items:flex-start; }
.why-pt-icon {
  width:54px; height:54px; min-width:54px;
  border-radius:15px; display:flex; align-items:center; justify-content:center;
  transition:transform var(--ease-spring),box-shadow var(--ease);
}
.why-pt:nth-child(1) .why-pt-icon { background:linear-gradient(135deg,#f1e5eb,#e8d0de); box-shadow:0 4px 12px rgba(131,45,97,.15); }
.why-pt:nth-child(2) .why-pt-icon { background:linear-gradient(135deg,#fef3d8,#fde8b0); box-shadow:0 4px 12px rgba(220,160,0,.15); }
.why-pt:nth-child(3) .why-pt-icon { background:linear-gradient(135deg,#e8f5e0,#d2edbc); box-shadow:0 4px 12px rgba(71,136,15,.15); }
.why-pt:nth-child(4) .why-pt-icon { background:linear-gradient(135deg,#e8eef8,#cdd9f0); box-shadow:0 4px 12px rgba(59,83,152,.12); }
.why-pt:hover .why-pt-icon { transform:scale(1.1) rotate(-4deg); }
.why-pt h4 { font-size:1.02rem; font-weight:800; color:var(--primary); margin-bottom:5px; }
.why-pt p  { font-size:.875rem; color:var(--text-lt); line-height:1.65; }

/* ── Trust / Testimonials ──────────────────────────────────── */
.trust {
  background:linear-gradient(145deg,var(--bg1) 0%,var(--bg2) 100%);
  position:relative; overflow:hidden;
}
.trust::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(131,45,97,.08) 0%,transparent 70%);
  pointer-events:none;
}
.trust-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:24px; margin-top:52px;
}
.trust-card {
  background:#fff; border-radius:var(--radius);
  padding:32px 28px; box-shadow:var(--shadow-s);
  position:relative; overflow:hidden;
  border:1px solid rgba(241,229,235,.6);
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.trust-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-h);
  border-color:rgba(131,45,97,.2);
}
/* Large decorative quote */
.trust-card::before {
  content:'\201C'; position:absolute; top:4px; left:16px;
  font-size:7rem; font-weight:900; line-height:1;
  color:rgba(131,45,97,.08); font-family:Georgia,serif; z-index:0;
}
/* Bottom gradient bar on hover */
.trust-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:var(--grad-p); transform:scaleX(0); transition:transform var(--ease);
}
.trust-card:hover::after { transform:scaleX(1); }

.stars { display:flex; gap:4px; margin-bottom:14px; position:relative; z-index:1; }
.trust-text {
  font-size:.9rem; color:var(--text-lt); line-height:1.75;
  margin-bottom:24px; position:relative; z-index:1; font-style:italic;
}
.trust-author { display:flex; align-items:center; gap:14px; }
.trust-avatar {
  width:46px; height:46px; border-radius:50%;
  background:var(--grad-p);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.92rem;
  box-shadow:0 4px 12px rgba(131,45,97,.3);
  flex-shrink:0;
}
.trust-author strong { display:block; font-size:.88rem; font-weight:800; color:var(--primary); }
.trust-author span   { font-size:.78rem; color:var(--text-lt); }

/* ── CTA band ──────────────────────────────────────────────── */
.cta-band {
  background:linear-gradient(135deg,#3a7410 0%,var(--accent) 40%,var(--accent-lt) 70%,#6dc118 100%);
  padding:96px 24px; text-align:center; position:relative; overflow:hidden;
}
/* Pattern overlay */
.cta-band::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 24px
  );
}
/* Decorative glow */
.cta-band::after {
  content:''; position:absolute;
  width:600px; height:600px; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 65%);
  pointer-events:none;
}
.cta-band h2 {
  font-size:clamp(1.7rem,3.8vw,2.6rem); font-weight:900; color:#fff;
  margin-bottom:14px; position:relative; z-index:1;
  text-shadow:0 2px 16px rgba(0,0,0,.15);
  letter-spacing:-.02em;
}
.cta-band p {
  font-size:1.05rem; color:rgba(255,255,255,.88);
  margin-bottom:40px; position:relative; z-index:1;
}
.cta-band .btn { position:relative; z-index:1; }

/* ── Page hero (inner pages) ───────────────────────────────── */
.page-hero {
  background:linear-gradient(145deg,var(--primary) 0%,#5a1f48 45%,var(--secondary) 100%);
  padding:170px 24px 110px; text-align:center; position:relative; overflow:hidden;
}
/* Diagonal decorative lines */
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(
      -60deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 48px
    );
}
/* Glow blob */
.page-hero::after {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(131,45,97,.35) 0%,transparent 65%);
  pointer-events:none;
}
.page-hero .section-label { color:rgba(179,224,119,.92); position:relative; z-index:1; }
.page-hero h1 {
  font-size:clamp(2rem,5.5vw,3.2rem); font-weight:900; color:#fff;
  margin-bottom:18px; letter-spacing:-.03em;
  position:relative; z-index:1;
  text-shadow:0 2px 20px rgba(0,0,0,.2);
}
.page-hero p {
  font-size:1.08rem; color:rgba(255,255,255,.8);
  max-width:580px; margin:0 auto;
  position:relative; z-index:1; line-height:1.75;
}

/* ── About ─────────────────────────────────────────────────── */
.about-intro { background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.about-photo {
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-xl), 0 0 0 3px rgba(131,45,97,.12);
  position:relative;
}
.about-photo img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center; display:block; }
/* Gradient inner tint on photo */
.about-photo::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom right, rgba(131,45,97,.1) 0%, transparent 50%);
  z-index:1; border-radius:var(--radius);
}
.about-badge {
  position:absolute; bottom:24px; right:24px;
  background:rgba(63,38,59,.92); backdrop-filter:blur(14px);
  border-radius:var(--radius-sm); padding:16px 20px; color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
.about-badge strong { display:block; font-size:1rem; font-weight:700; }
.about-badge span   { font-size:.78rem; color:rgba(255,255,255,.7); }
.about-content blockquote {
  border-left:4px solid var(--secondary); padding:16px 20px;
  background:var(--bg1); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:26px 0; font-style:italic; color:var(--text-lt); font-size:.95rem;
  box-shadow:inset 3px 0 0 var(--secondary);
}

/* Values */
.values { background:var(--bg1); }
.values-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px; margin-top:52px;
}
.val-card {
  background:#fff; border-radius:var(--radius);
  padding:36px 26px; box-shadow:var(--shadow-s); text-align:center;
  border:1px solid rgba(241,229,235,.6);
  position:relative; overflow:hidden;
  transition:transform var(--ease-spring),box-shadow var(--ease),border-color var(--ease);
}
.val-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-p); transform:scaleX(0); transform-origin:center;
  transition:transform .4s ease;
}
.val-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-h); border-color:rgba(131,45,97,.2); }
.val-card:hover::before { transform:scaleX(1); }
.val-icon {
  font-size:2.4rem; margin-bottom:16px;
  display:flex; justify-content:center; align-items:center;
  height:72px;
}
.val-icon-wrap {
  width:68px; height:68px; border-radius:18px;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; box-shadow:0 4px 12px rgba(63,38,59,.1);
  transition:transform var(--ease-spring),box-shadow var(--ease);
}
.val-card:hover .val-icon-wrap { transform:scale(1.1) rotate(-5deg); box-shadow:0 8px 24px rgba(63,38,59,.15); }
.val-card h3 { font-size:1rem; font-weight:800; color:var(--primary); margin-bottom:10px; }
.val-card p  { font-size:.86rem; color:var(--text-lt); line-height:1.68; }

/* Legal */
.legal { background:var(--bg2); }
.legal-card {
  background:#fff; border-radius:var(--radius);
  padding:44px; box-shadow:var(--shadow-m);
  border:1px solid rgba(241,229,235,.8); max-width:820px; margin:0 auto;
}
.legal-dl { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }
.legal-item { display:flex; flex-direction:column; gap:4px; }
.legal-item dt {
  font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-lt);
}
.legal-item dd { font-size:.95rem; font-weight:700; color:var(--primary); }

/* ── Services page ─────────────────────────────────────────── */
.services-page { background:var(--white); }
.pole { margin-bottom:80px; }
.pole:last-child { margin-bottom:0; }
.pole-hdr {
  display:flex; align-items:center; gap:20px;
  margin-bottom:36px; padding-bottom:22px;
  border-bottom:2px solid var(--bg1);
}
.pole-ico {
  width:64px; height:64px; min-width:64px;
  background:var(--grad-p); border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(131,45,97,.25);
}
.pole-ico img { width:30px; height:30px; filter:brightness(0) invert(1); }
.pole-hdr h2 { font-size:1.5rem; font-weight:900; color:var(--primary); letter-spacing:-.02em; }
.pole-hdr p  { font-size:.86rem; color:var(--text-lt); margin-top:3px; }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:18px; }
.d-card {
  background:var(--bg1); border-radius:var(--radius);
  padding:30px; border:1px solid rgba(241,229,235,.9);
  position:relative; overflow:hidden;
  transition:background var(--ease),box-shadow var(--ease),transform var(--ease);
}
.d-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:var(--grad-p); transform:scaleX(0); transition:transform var(--ease);
}
.d-card:hover { background:#fff; box-shadow:var(--shadow-h); transform:translateY(-5px); }
.d-card:hover::after { transform:scaleX(1); }
.d-num {
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--secondary); margin-bottom:12px; text-transform:uppercase;
}
.d-card h4 { font-size:1.03rem; font-weight:800; color:var(--primary); margin-bottom:12px; }
.d-card p  { font-size:.86rem; color:var(--text-lt); line-height:1.65; }
.d-card ul { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.d-card ul li {
  font-size:.83rem; color:var(--text-lt); line-height:1.5;
  padding-left:18px; position:relative;
}
.d-card ul li::before {
  content:'→'; position:absolute; left:0;
  color:var(--accent); font-size:.8rem; font-weight:700;
}

/* Process */
.process { background:var(--bg1); }
.process-steps {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0; margin-top:56px; position:relative;
}
.process-steps::before {
  content:''; position:absolute; top:36px; left:12%; right:12%; height:2px;
  background:linear-gradient(90deg,var(--secondary),var(--accent));
  z-index:0;
}
.proc-step {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 16px 36px;
  position:relative; z-index:1;
}
.step-num {
  width:58px; height:58px;
  background:var(--grad-p); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:900; color:#fff;
  margin-bottom:18px;
  box-shadow:0 6px 20px rgba(63,38,59,.28);
  border:4px solid #fff;
  transition:transform var(--ease-spring),box-shadow var(--ease);
}
.proc-step:hover .step-num { transform:scale(1.12); box-shadow:0 10px 28px rgba(63,38,59,.4); }
.proc-step h4 { font-size:.97rem; font-weight:800; color:var(--primary); margin-bottom:8px; }
.proc-step p  { font-size:.81rem; color:var(--text-lt); line-height:1.6; }

/* Gallery */
.service-gallery { background:var(--bg2); }
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; margin-top:52px;
}
.gallery-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; position:relative; }
.gallery-img img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.gallery-img:hover img { transform:scale(1.07); }
.gallery-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(63,38,59,.78) 0%,transparent 55%);
  opacity:0; transition:opacity var(--ease);
  display:flex; align-items:flex-end; padding:22px;
}
.gallery-img:hover .gallery-img-overlay { opacity:1; }
.gallery-img-overlay span { color:#fff; font-size:.86rem; font-weight:700; }

/* ── Contact page ──────────────────────────────────────────── */
.contact-sec { background:var(--white); }
.contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.c-info { display:flex; flex-direction:column; gap:18px; }
.c-info-card {
  background:var(--bg1); border-radius:var(--radius);
  padding:24px; display:flex; gap:18px; align-items:flex-start;
  border:1px solid rgba(241,229,235,.7);
  transition:box-shadow var(--ease),transform var(--ease),border-color var(--ease);
}
.c-info-card:hover { box-shadow:var(--shadow-m); transform:translateX(4px); border-color:rgba(131,45,97,.2); }
.c-ico {
  width:50px; height:50px; min-width:50px;
  background:var(--grad-p); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(131,45,97,.25);
}
.c-info-txt strong { display:block; font-size:.87rem; font-weight:800; color:var(--primary); margin-bottom:5px; }
.c-info-txt span, .c-info-txt a { font-size:.86rem; color:var(--text-lt); line-height:1.65; }
.c-info-txt a:hover { color:var(--secondary); }

/* WA buttons panel */
.wa-panel {
  background:var(--bg1); border-radius:var(--radius);
  padding:38px; box-shadow:var(--shadow-m);
  border:1px solid rgba(241,229,235,.8);
}
.wa-panel h3 { font-size:1.35rem; font-weight:800; color:var(--primary); margin-bottom:8px; }
.wa-panel p  { font-size:.89rem; color:var(--text-lt); margin-bottom:30px; }
.wa-btn-list { display:flex; flex-direction:column; gap:12px; }
.wa-btn-item {
  display:flex; align-items:center; gap:16px;
  background:#fff; border-radius:var(--radius-sm); padding:17px 20px;
  box-shadow:var(--shadow-s); text-decoration:none;
  border:1px solid transparent;
  transition:box-shadow var(--ease),transform var(--ease),border-color var(--ease);
}
.wa-btn-item:hover { box-shadow:var(--shadow-h); transform:translateY(-3px); border-color:rgba(37,211,102,.3); }
.wa-btn-item-ico {
  width:46px; height:46px; min-width:46px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  border-radius:13px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(37,211,102,.3);
}
.wa-btn-item-ico svg { width:22px; height:22px; fill:#fff; }
.wa-btn-item-txt strong { display:block; font-size:.92rem; font-weight:800; color:var(--primary); }
.wa-btn-item-txt span   { font-size:.79rem; color:var(--text-lt); }
.wa-btn-urgent { border:2px solid rgba(131,45,97,.3); }
.wa-btn-item .arrow { margin-left:auto; color:var(--accent); flex-shrink:0; }

/* QR */
.c-qr { background:var(--bg2); border-radius:var(--radius); padding:28px; text-align:center; }
.c-qr img { width:155px; margin:0 auto 12px; border-radius:var(--radius-sm); }
.c-qr p { font-size:.81rem; color:var(--text-lt); }

/* Map */
.map-sec { background:var(--bg1); padding:0; }
.map-sec iframe { width:100%; height:440px; display:block; border:0; }

/* FAQ */
.faq { background:var(--white); }
.faq-list { display:flex; flex-direction:column; gap:14px; max-width:800px; margin:0 auto; }
.faq-item {
  background:var(--bg1); border-radius:var(--radius-sm);
  overflow:hidden; border:1px solid rgba(241,229,235,.8);
  transition:box-shadow var(--ease);
}
.faq-item:hover { box-shadow:var(--shadow-s); }
.faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; cursor:pointer;
  font-weight:700; font-size:.95rem; color:var(--primary);
  gap:16px;
}
.faq-a { padding:0 24px 20px; font-size:.88rem; color:var(--text-lt); line-height:1.7; }

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  background:var(--primary); color:rgba(255,255,255,.72);
  padding:80px 24px 36px;
  position:relative; overflow:hidden;
}
/* Decorative accent line at top */
.footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--secondary),var(--accent),var(--secondary));
  background-size:200% 100%;
  animation:shimmer-divider 4s ease-in-out infinite;
}
/* Subtle pattern */
.footer::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:32px 32px;
}
.footer-inner { max-width:1240px; margin:0 auto; position:relative; z-index:1; }

/* ── Footer top : grille équilibrée 4 colonnes ───────────────── */
.footer-top {
  display:grid;
  /* Col 1 brand + logo plus large, Col 4 contact plus large car + de contenu */
  grid-template-columns: 2fr 1fr 1fr 1.6fr;
  gap:52px;
  padding-bottom:56px;
  align-items:start;
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* ── Logo pied de page : agrandi et bien lisible ──────────────── */
.footer-brand img {
  height:88px;           /* augmenté depuis 52px */
  width:auto;
  max-width:200px;
  object-fit:contain;
  margin-bottom:22px;
  filter:brightness(1.15) drop-shadow(0 2px 12px rgba(0,0,0,.4));
}
.footer-brand p {
  font-size:.92rem; line-height:1.82;
  color:rgba(255,255,255,.72);
  margin-bottom:28px;
  max-width:280px;        /* limite la largeur du texte tagline */
}

/* Contacts dans la colonne brand → masqués sur desktop (doublons avec col 4) */
.footer-brand .foot-contact { display:none; }

.socials { display:flex; gap:10px; flex-wrap:wrap; }
.soc {
  width:42px; height:42px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.65);
  transition:background var(--ease),color var(--ease),transform var(--ease-spring),box-shadow var(--ease);
}
.soc:hover {
  background:rgba(255,255,255,.17); color:#fff;
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}

/* ── Colonnes navigation / services ──────────────────────────── */
.footer-col h4 {
  font-size:.72rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.38);
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-col ul li { margin-bottom:14px; }
.footer-col ul li a {
  font-size:.88rem; color:rgba(255,255,255,.65);
  transition:color var(--ease),padding-left var(--ease);
  display:inline-block;
}
.footer-col ul li a:hover { color:#fff; padding-left:5px; }

/* ── Colonne contact ──────────────────────────────────────────── */
.foot-contact { display:flex; flex-direction:column; gap:15px; }
.foot-c {
  display:flex; align-items:flex-start;
  gap:11px; font-size:.855rem;
  color:rgba(255,255,255,.65);
  line-height:1.55;
}
.foot-c a { color:rgba(255,255,255,.72); transition:color var(--ease); }
.foot-c a:hover { color:#fff; }

/* ── Bas de footer ────────────────────────────────────────────── */
.footer-bottom {
  padding-top:28px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px;
  font-size:.78rem; color:rgba(255,255,255,.34);
}
.footer-bottom a { color:rgba(255,255,255,.50); transition:color var(--ease); }
.footer-bottom a:hover { color:#fff; }

/* ── WhatsApp float ────────────────────────────────────────── */
/* P5 — Bouton WA sticky — desktop : bulle flottante */
.wa-float {
  position:fixed; bottom:30px; right:30px; z-index:9999;
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,.45);
  animation:wa-pulse 2.6s ease-in-out infinite;
  transition:transform var(--ease-spring),box-shadow var(--ease);
  min-height:44px; min-width:44px; /* P5 */
}
.wa-float:hover { transform:scale(1.12); animation-play-state:paused; box-shadow:0 10px 36px rgba(37,211,102,.65); }
.wa-float svg { width:32px; height:32px; fill:#fff; }
.wa-float img { width:32px; height:32px; }
@keyframes wa-pulse {
  0%   { box-shadow:0 0 0 0 rgba(37,211,102,.6); }
  70%  { box-shadow:0 0 0 20px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
.wa-tip {
  position:absolute; right:76px;
  background:rgba(63,38,59,.94); color:#fff; font-size:.78rem; font-weight:700;
  padding:7px 14px; border-radius:8px; white-space:nowrap;
  pointer-events:none; opacity:0; transform:translateX(10px);
  transition:opacity .3s,transform .3s;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.wa-tip::after {
  content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-right:none;
  border-left-color:rgba(63,38,59,.94);
}
.wa-float:hover .wa-tip { opacity:1; transform:translateX(0); }

/* ── Carousel hint (mobile only) ──────────────────────────── */
.carousel-hint {
  display:none; align-items:center; justify-content:center; gap:8px;
  font-size:.78rem; font-weight:600; color:var(--text-lt);
  margin:24px 0 8px; opacity:.75;
}
.carousel-hint svg { width:16px; height:16px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   ══════════════════════════════════════════════════════════════ */

/* ── TABLETTE 1024px ─────────────────────────────────────────── */
@media (max-width:1024px) {
  .why-grid, .about-grid { grid-template-columns:1fr; }
  .why-img { max-width:560px; margin:0 auto; }
  .about-photo { max-width:440px; margin:0 auto; }
  /* Footer tablette : 2 colonnes (brand+nav / services+contact) */
  .footer-top {
    grid-template-columns:1.4fr 1fr 1fr 1.4fr;
    gap:36px;
  }
  .footer-brand img { height:76px; }
  .contact-wrap { grid-template-columns:1fr; }
  .legal-dl { grid-template-columns:1fr; }
}

/* P7 — Drapeaux : basculer en scroll horizontal sous 900px
   (les 7 drapeaux ne tiennent plus sur une seule ligne centrée) */
@media (max-width:900px) {
  .flags-grid {
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:16px;
    /* P3 — scroll-snap fluide au doigt */
    scroll-snap-type:x mandatory;
    scroll-padding-left:20px;
    padding-left:20px;
    padding-right:20px;
  }
  .flags-grid::-webkit-scrollbar { display:none; }
  .flags-grid .flag-card { scroll-snap-align:start; flex-shrink:0; }
}

/* ── MOBILE 768px ────────────────────────────────────────────── */
@media (max-width:768px) {
  :root { --nav-h:62px; }

  /* P1 — Sections : réduire les espacements */
  section { padding:60px 20px; }

  /* P2 — Navigation hamburger */
  .nav-links, .lang-sel { display:none; }
  .nav-toggle { display:flex; }
  .nav-logo img { height:48px; }

  /* P4 — Hero : titres + espacements */
  .hero-content { padding:96px 20px 72px; }
  .hero-content h1 { font-size:clamp(1.6rem,7vw,2.4rem); line-height:1.2; }
  .hero-cta {
    flex-direction:column; align-items:center;
    gap:12px; width:100%;
  }
  .hero-cta .btn { width:100%; max-width:320px; justify-content:center; }
  .hero-deco-1, .hero-deco-2 { display:none; }

  /* P4 — Titres globaux */
  .section-title { font-size:clamp(1.5rem,6vw,2.2rem); margin-bottom:14px; }
  .section-sub   { font-size:.93rem; }

  /* P7 — Drapeaux en mobile : le scroll horizontal est déjà actif via @900px */
  .flags-grid { gap:14px; }
  .flag-card  { min-width:100px; padding:16px 10px; }
  .flag-card img { width:42px; height:42px; }
  .flags-marquee-outer { display:none; }

  /* P3 — Services carousel : scroll-snap fluide */
  .carousel-hint { display:flex; }
  .services-grid {
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px; padding:8px 20px 24px;
    scrollbar-width:none; margin-top:32px;
  }
  .services-grid::-webkit-scrollbar { display:none; }
  .services-grid .s-card {
    min-width:min(78vw,300px); scroll-snap-align:start; flex-shrink:0;
  }

  /* P3 — Témoignages carousel */
  .trust-grid {
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px; padding:8px 20px 24px;
    scrollbar-width:none; margin-top:32px;
  }
  .trust-grid::-webkit-scrollbar { display:none; }
  .trust-grid .trust-card {
    min-width:min(80vw,320px); scroll-snap-align:start; flex-shrink:0;
  }

  /* P3 — Valeurs carousel */
  .values-grid {
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px; padding:8px 20px 24px;
    scrollbar-width:none; margin-top:32px;
  }
  .values-grid::-webkit-scrollbar { display:none; }
  .values-grid .val-card {
    min-width:min(72vw,280px); scroll-snap-align:start; flex-shrink:0;
  }

  /* P3 — Galerie carousel */
  .gallery-grid {
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px; padding:4px 20px 24px;
    scrollbar-width:none; margin-top:32px;
  }
  .gallery-grid::-webkit-scrollbar { display:none; }
  .gallery-grid .gallery-img {
    min-width:min(72vw,280px); scroll-snap-align:start; flex-shrink:0; aspect-ratio:4/3;
  }

  /* Grids about */
  .about-grid { grid-template-columns:1fr !important; gap:32px; }
  .about-photo { max-width:100%; }
  .why-grid   { grid-template-columns:1fr !important; gap:32px; }

  /* Stats */
  .stats-grid { grid-template-columns:1fr 1fr; gap:0; }
  .stat-item  { border-right:none; border-bottom:1px solid rgba(63,38,59,.1); padding:22px 14px; }
  .stat-item:nth-child(odd) { border-right:1px solid rgba(63,38,59,.1); }
  .stat-item:nth-last-child(-n+2) { border-bottom:none; }
  .stat-ring   { width:88px; height:88px; }
  .stat-number { font-size:1.9rem; }

  /* Process */
  .process-steps { grid-template-columns:1fr 1fr; gap:16px; }
  .process-steps::before { display:none; }

  /* Legal */
  .legal-card { padding:24px 18px; }
  .legal-dl   { grid-template-columns:1fr; }

  /* Contact */
  .contact-wrap { grid-template-columns:1fr; gap:28px; }
  .wa-panel { padding:24px 18px; }

  /* Page hero (pages secondaires) */
  .page-hero { padding:118px 20px 64px; }
  .page-hero h1 { font-size:clamp(1.7rem,7vw,2.4rem); }

  /* Footer compact mobile */
  .footer { padding:40px 16px 24px; }
  .footer-top { grid-template-columns:1fr !important; gap:0 !important; }
  .footer-col { display:none; }
  .footer-brand { padding-bottom:24px; }
  /* Logo mobile : taille raisonnable */
  .footer-brand img { height:64px; margin-bottom:16px; filter:none; }
  .footer-brand p { font-size:.83rem; margin-bottom:18px; max-width:100%; }
  /* Sur mobile, réafficher les contacts cachés sur desktop */
  .footer-brand .foot-contact {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px; margin-top:4px;
  }
  .foot-c    { font-size:.78rem; gap:7px; }
  .socials   { margin-bottom:18px; }
  .footer-bottom {
    flex-direction:column; align-items:flex-start;
    gap:6px; padding-top:18px; margin-top:18px; font-size:.73rem;
  }

  /* P5 — WA sticky : bouton plus petit sur mobile, toujours 44px min */
  .wa-float {
    width:56px; height:56px;
    bottom:20px; right:20px;
    /* P5 — barre sticky CTA au-dessus du float, visible sur mobile */
  }
  .wa-float svg  { width:28px; height:28px; }
  .wa-float img  { width:28px; height:28px; }
  .wa-tip { display:none; } /* masquer tooltip sur mobile */

  /* P5 — Boutons pleine largeur sur mobile */
  .btn { min-height:48px; }

  /* P4 — Réduction paddings sections spécifiques */
  .diaspora { padding:60px 20px; }
  .services-preview { padding:60px 0 60px; }
  .services-preview .container { padding:0; }
  .services-preview .text-center { padding:0 20px; }
  .detail-grid { grid-template-columns:1fr; }
  .pole-hdr { flex-direction:row; gap:14px; align-items:flex-start; }
}

/* ── PETIT MOBILE 480px ──────────────────────────────────────── */
@media (max-width:480px) {
  /* P4 — H1 encore plus petit */
  .hero-content h1 { font-size:clamp(1.45rem,8vw,2rem); }
  .section-title   { font-size:clamp(1.35rem,7vw,1.8rem); }
  .page-hero h1    { font-size:clamp(1.5rem,7.5vw,2rem); }

  /* P7 — Drapeaux très petits écrans */
  .flags-grid  { gap:10px; padding-left:14px; padding-right:14px; }
  .flag-card   { min-width:88px; padding:14px 8px; }
  .flag-card img { width:36px; height:36px; }

  /* Carrousels : cartes un peu plus larges sur petit écran */
  .services-grid .s-card  { min-width:min(85vw,280px); }
  .trust-grid .trust-card { min-width:min(86vw,280px); }
  .values-grid .val-card  { min-width:min(80vw,260px); }

  /* Stats 2 colonnes */
  .stat-number { font-size:1.9rem; }

  /* Process 1 colonne */
  .process-steps { grid-template-columns:1fr; gap:14px; }

  /* Contact pied */
  .foot-contact { grid-template-columns:1fr; }

  /* Boutons : padding réduit pour petits écrans */
  .btn { padding:13px 22px; font-size:.88rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE APP — bottom tab bar · flag lang selector · text fixes
   ═══════════════════════════════════════════════════════════════════ */

/* ── Text overflow fix (carousel cards) ─────────────────────────── */
.s-card h3, .s-card p,
.trust-card h4, .trust-card blockquote, .trust-card p,
.val-card h3, .val-card p {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ── Bottom Nav (hidden on desktop) ─────────────────────────────── */
.mobile-bottom-nav { display:none; }

/* ── Flag Lang Selector (hidden on desktop) ─────────────────────── */
.flag-lang-sel { display:none; }

/* ═══════════════════════════════════════════════════════════════════
   @media mobile ≤ 900px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {

  /* ── 1. Card text: fixed width so text wraps inside carousel ── */
  .services-grid .s-card {
    width: min(78vw,300px);
    max-width: min(78vw,300px);
    overflow: hidden;
  }
  .trust-grid .trust-card {
    width: min(80vw,320px);
    max-width: min(80vw,320px);
    overflow: hidden;
  }
  .values-grid .val-card {
    width: min(72vw,280px);
    max-width: min(72vw,280px);
    overflow: hidden;
  }
  .gallery-grid .gallery-img {
    width: min(72vw,280px);
    max-width: min(72vw,280px);
    overflow: hidden;
  }

  /* ── 2. Hide hamburger + drawer ──────────────────────────────── */
  .nav-toggle { display:none !important; }
  .nav-drawer { display:none !important; }
  /* Hide text select in header on mobile */
  .nav-wrap .lang-sel { display:none !important; }

  /* ── 3. Flag Lang Selector ───────────────────────────────────── */
  .flag-lang-sel {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: auto;
  }

  .flag-lang-btn {
    background: none;
    border: 2px solid rgba(63,38,59,.15);
    border-radius: 50%;
    width: 42px; height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s;
  }
  .flag-lang-btn:hover { border-color: var(--accent); }

  .flag-lang-btn img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
  }

  .flag-lang-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(63,38,59,.2);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10000;
    min-width: 160px;
    animation: popupIn .18s ease;
  }
  .flag-lang-popup[hidden] { display:none; }

  @keyframes popupIn {
    from { opacity:0; transform:translateY(-8px) scale(.96); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }

  .flag-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    border-radius: 12px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--primary);
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    text-align: left;
  }
  .flag-opt:active,
  .flag-opt.fl-active { background:rgba(131,45,97,.1); color:var(--accent); }

  .flag-opt img {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* ── 4. Body padding (content above bottom nav) ──────────────── */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── 5. WA float above bottom nav ───────────────────────────── */
  .wa-float {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }

  /* ── 6. Bottom Navigation Bar ────────────────────────────────── */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    box-shadow: 0 -1px 0 rgba(63,38,59,.08), 0 -4px 20px rgba(63,38,59,.1);
    z-index: 9999;
    border-top: 1px solid rgba(63,38,59,.07);
  }

  .bn-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: #9e8a99;
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 6px 4px 4px;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s;
    position: relative;
  }

  .bn-tab svg {
    width: 22px; height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s, transform .2s;
    flex-shrink: 0;
  }

  .bn-tab span {
    white-space: nowrap;
    overflow: hidden;
    font-size: .58rem;
    max-width: 100%;
  }

  .bn-tab.active {
    color: var(--accent);
  }

  .bn-tab.active svg {
    transform: translateY(-2px);
  }

  /* Active indicator dot */
  .bn-tab.active::after {
    content: '';
    position: absolute;
    top: 6px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CAROUSELS ULTRA-FLUIDES — version mobile
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:900px) {

  /* Conteneurs carousels : scroll natif GPU + containment */
  .services-grid,
  .trust-grid,
  .values-grid,
  .gallery-grid {
    /* Momentum scroll iOS */
    -webkit-overflow-scrolling: touch;
    /* Snap doux */
    scroll-snap-type: x mandatory;
    /* Empêche le scroll de « déborder » sur la page */
    overscroll-behavior-x: contain;
    /* Indique au navigateur que c'est un défilement horizontal */
    touch-action: pan-x pinch-zoom;
    /* Accélération GPU */
    will-change: scroll-position;
    /* Supprime tout délai de transition sur le container */
    transition: none;
  }

  /* Cartes : snap propre + transition GPU */
  .services-grid .s-card,
  .trust-grid .trust-card,
  .values-grid .val-card,
  .gallery-grid .gallery-img {
    scroll-snap-align: start;
    /* Forcer l'arrêt à chaque carte (pas de saut) */
    scroll-snap-stop: always;
    /* Accélération GPU sur chaque carte */
    transform: translateZ(0);
    will-change: transform;
    /* Transitions uniquement sur hover, jamais sur scroll */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DRAPEAUX — auto-scroll ping-pong mobile + fluidité navigation
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:900px) {

  /* Cacher la grille statique, montrer le marquee */
  .flags-grid          { display:none !important; }
  .flags-marquee-outer {
    display:block !important;
    overflow: hidden;
    width: 100%;
    padding: 4px 0;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }

  /* Le défilement est géré par JS (requestAnimationFrame), pas par CSS animation */
  .flags-marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
    will-change: transform;
  }

  .flags-marquee-track .flag-card {
    min-width: 90px;
    padding: 14px 10px;
    gap: 8px;
    cursor: default;
    flex-shrink: 0;
  }
  .flags-marquee-track .flag-card img {
    width: 38px;
    height: 38px;
  }
  .flags-marquee-track .flag-card span {
    font-size: .7rem;
  }

  /* ── Fluidité navigation mobile ─────────────────────────────── */

  /* Supprimer will-change sur chaque carte (trop de couches GPU) */
  .s-card,
  .trust-card,
  .val-card,
  .gallery-img {
    will-change: auto !important;
    transform: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  /* Garder seulement le will-change sur le conteneur scroll */
  .services-grid,
  .trust-grid,
  .values-grid,
  .gallery-grid {
    will-change: scroll-position;
    /* Isolation : le scroll horizontal ne bloque pas le scroll vertical de la page */
    overscroll-behavior-x: contain;
    touch-action: pan-x pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  /* Page principale : scroll vertical toujours prioritaire */
  body {
    touch-action: pan-y;
    overscroll-behavior-y: none;
  }

  /* Bottom nav : transitions légères seulement sur couleur */
  .bn-tab {
    transition: color .15s ease;
    will-change: auto;
  }
  .bn-tab svg {
    transition: none;
  }
  .bn-tab.active svg {
    transform: none;
  }
  .bn-tab.active::after {
    transition: none;
  }

  /* Supprimer les hover transforms sur mobile (inutiles + coûteux) */
  .s-card:hover,
  .trust-card:hover,
  .val-card:hover,
  .flag-card:hover {
    transform: none;
    box-shadow: none;
  }
}