/* ================================================================
   AG NUTRITION PARTENAIRE LUBUMBASHI — v3 Light Theme
   Palette logo officiel AG Nutrition :
   ─ Bleu marine   : #283c78  (dominant "A")
   ─ Rouge         : #dc2828  (triangle "G")
   ─ Bleu ciel     : #2878b4  (dégradé "G")
   THÈME CLAIR : fond blanc, texte sombre, header/footer marine
   ================================================================ */

@import url('../fonts/fonts.css');

:root {
  /* ── Logo AG Nutrition ── */
  --navy:       #283c78;
  --navy-dk:    #1e2e5e;
  --navy-lt:    #3a54a0;
  --red:        #dc2828;
  --red-dk:     #a01428;
  --red-lt:     #f03c3c;
  --sky:        #2878b4;
  --sky-lt:     #3c90d0;

  /* ── Thème clair ── */
  --bg:         #f8f9fc;   /* fond principal — blanc bleuté très léger */
  --bg-2:       #ffffff;   /* fond cartes — blanc pur */
  --bg-3:       #eef0f7;   /* fond sections alternées */
  --bg-4:       #e4e8f4;   /* fond très légèrement bleui */

  --border:     #dde1ef;   /* bordure légère */
  --border-dk:  #c4cadf;   /* bordure plus visible */

  /* ── Texte — lisibilité maximale sur fond clair ── */
  --text:       #0f1829;   /* texte principal — quasi-noir bleuté */
  --text-2:     #2a3354;   /* texte secondaire — bleu foncé */
  --text-3:     #5a6490;   /* texte tertiaire — gris bleuté */
  --text-4:     #8892b0;   /* texte discret */

  /* ── Header/Footer conservent le fond bleu marine ── */
  --header-bg:  var(--navy);
  --footer-bg:  var(--navy);

  --ff-d: 'Bebas Neue','Arial Black',sans-serif;
  --ff-b: 'Outfit',sans-serif;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --nav-h: 72px;
  --max-w: 1280px;

  --shadow-sm: 0 1px 4px rgba(40,60,120,.08);
  --shadow:    0 4px 16px rgba(40,60,120,.10);
  --shadow-lg: 0 12px 40px rgba(40,60,120,.14);
  --shadow-xl: 0 24px 64px rgba(40,60,120,.18);
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--ff-b);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }
button { cursor:pointer; font-family:var(--ff-b); border:none; background:none; }
.container { max-width:var(--max-w); margin:0 auto; padding:0 32px; }
.section    { padding:104px 0; }
.section-sm { padding:64px 0; }

/* ═══════════════════════════════════════════════════════════
   HEADER — fond blanc (logo fond blanc)
   ═══════════════════════════════════════════════════════════ */
.site-header {
  position:fixed; top:0; left:0; right:0;
  z-index:900; height:var(--nav-h);
  display:flex; align-items:center;
  background:#ffffff;
  border-bottom:1px solid var(--border);
  transition:background .4s var(--ease), box-shadow .4s;
}
.site-header.scrolled {
  background:#ffffff;
  box-shadow:0 2px 20px rgba(40,60,120,.12);
}
.header-inner {
  display:flex; align-items:center;
  justify-content:space-between; width:100%; gap:20px;
}

/* Logo photo */
.logo-wrap { display:flex; align-items:center; flex-shrink:0; }
.logo-img {
  height:56px;
  width:auto;
  max-width:260px;
  object-fit:contain;
  object-position:left center;
  /* Fond blanc → pas de filtre, s'intègre naturellement au header blanc */
  filter:none;
  transition:transform .3s var(--ease);
}
.logo-wrap:hover .logo-img { transform:scale(1.04); }

/* Nav links — blanc sur bleu marine = bon contraste */
.nav-links {
  display:flex; align-items:center;
  gap:2px; flex:1; justify-content:center;
}
.nav-links a {
  font-size:.78rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-2);        /* sombre sur fond blanc */
  padding:8px 14px; border-radius:4px;
  transition:color .2s,background .2s;
}
.nav-links a:hover, .nav-links a.active {
  color:var(--navy);
  background:rgba(40,60,120,.07);
}

/* Boutons header */
.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-devenir-nav {
  background:transparent;
  border:1.5px solid var(--navy);
  color:var(--navy);
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:9px 17px; border-radius:4px;
  transition:all .25s; white-space:nowrap; display:inline-block;
}
.btn-devenir-nav:hover {
  background:var(--navy);
  color:#ffffff;
}
.btn-membre-nav {
  background:var(--red);
  color:#ffffff;
  font-size:.7rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:10px 18px; border-radius:4px;
  transition:background .25s,transform .2s,box-shadow .2s;
  white-space:nowrap; display:inline-block;
}
.btn-membre-nav:hover {
  background:var(--red-lt);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(220,40,40,.4);
}

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span {
  display:block; width:24px; height:2px;
  background:var(--navy); border-radius:2px; transition:.3s;
}
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
@media(max-width:1060px) {
  .hamburger { display:flex; }
  .nav-links {
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:#ffffff;
    border-bottom:1px solid var(--border);
    box-shadow:0 8px 24px rgba(40,60,120,.1);
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease), padding .3s;
    z-index:800;
  }
  .nav-links.open { max-height:500px; padding:8px 0; }
  .nav-links a {
    font-size:.9rem; padding:14px 28px;
    width:100%; border-radius:0;
    border-bottom:1px solid var(--border);
    color:var(--text-2);
  }
  .nav-links a:last-of-type { border-bottom:none; }
  .nav-mobile-btns {
    display:flex; gap:10px; flex-wrap:wrap;
    padding:16px 28px 20px;
    border-top:1px solid var(--border); width:100%;
  }
  .nav-right { display:none !important; }
}
.nav-mobile-btns { display:none; }
@media(max-width:1060px) { .nav-mobile-btns { display:flex; } }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-b); font-weight:700;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  padding:15px 34px; border-radius:4px;
  transition:all .3s var(--ease); cursor:pointer;
  border:2px solid transparent;
}
/* btn-red / btn-gold = même style rouge */
.btn-red, .btn-gold {
  background:var(--red); color:#ffffff; border-color:var(--red);
}
.btn-red:hover, .btn-gold:hover {
  background:var(--red-lt); border-color:var(--red-lt);
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(220,40,40,.35);
}
.btn-navy {
  background:var(--navy); color:#ffffff; border-color:var(--navy);
}
.btn-navy:hover {
  background:var(--navy-lt); border-color:var(--navy-lt);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
/* Outline sur fond clair */
.btn-outline-w {
  background:transparent; color:var(--navy);
  border-color:var(--navy);
}
.btn-outline-w:hover {
  background:var(--navy); color:#ffffff;
  transform:translateY(-2px);
}
/* Outline rouge sur fond clair */
.btn-outline-g {
  background:transparent; color:var(--red);
  border-color:var(--red);
}
.btn-outline-g:hover {
  background:var(--red); color:#ffffff;
  transform:translateY(-2px);
}
/* Outline blanc pour sections sombres (hero, cta, footer) */
.btn-outline-light {
  background:transparent; color:#ffffff;
  border-color:rgba(255,255,255,.45);
}
.btn-outline-light:hover {
  background:rgba(255,255,255,.12); color:#ffffff;
  border-color:#ffffff; transform:translateY(-2px);
}
.btn-sm  { padding:10px 22px; font-size:.74rem; }
.btn-full { width:100%; justify-content:center; }

/* ═══════════════════════════════════════════════════════════
   HERO — section sombre conservée pour impact visuel
   Texte blanc sur fond sombre = contraste optimal
   ═══════════════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  background:linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 60%, #1a3060 100%);
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 80% at 70% 50%, rgba(220,40,40,.12) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 5% 80%,  rgba(40,120,180,.12) 0%,transparent 55%);
}
.hero::before {
  content:''; position:absolute; inset:0; opacity:.35;
  pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.hero-grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
  min-height:100vh; padding:120px 0 80px;
}
/* TEXTE HERO — blanc sur fond sombre */
.hero-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#ff7070; margin-bottom:24px;
}
.hero-label::before { content:''; width:28px; height:1px; background:var(--red); }
.hero-title {
  font-family:var(--ff-d);
  font-size:clamp(3.8rem,8vw,7.5rem);
  line-height:.93; letter-spacing:.03em;
  color:#ffffff; margin-bottom:28px;
}
.hero-title .accent  { color:var(--red); }
.hero-title .gold    { color:var(--red); }
.hero-title .outline {
  -webkit-text-stroke:2px rgba(255,255,255,.35);
  color:transparent;
}
.hero-desc {
  font-size:1rem; font-weight:300;
  color:rgba(255,255,255,.72); line-height:1.85;
  max-width:460px; margin-bottom:44px;
}
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats {
  display:flex; gap:40px;
  margin-top:56px; padding-top:36px;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-stat-num {
  font-family:var(--ff-d); font-size:2.2rem;
  letter-spacing:.06em; color:var(--red); line-height:1;
}
.hero-stat-lbl {
  font-size:.67rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-top:4px;
}
.hero-product { position:relative; display:flex; align-items:center; justify-content:center; }
.hero-glow {
  position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(220,40,40,.2) 0%,transparent 70%);
  animation:pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow { 0%,100%{transform:scale(1);opacity:.65} 50%{transform:scale(1.1);opacity:1} }
.hero-img {
  position:relative; z-index:1; width:100%;
  max-width:540px; aspect-ratio:1;
  object-fit:contain; object-position:center;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(220,40,40,.15));
  animation:float 6s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
.hero-badge {
  position:absolute; z-index:3;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:12px; padding:14px 20px;
  box-shadow:var(--shadow);
}
.hero-badge-1 { top:12%; right:-4%; }
.hero-badge-2 { bottom:18%; left:-8%; }
.badge-num { font-family:var(--ff-d); font-size:1.6rem; color:var(--navy); line-height:1; }
.badge-txt { font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-top:2px; }
@media(max-width:860px) {
  .hero-grid { grid-template-columns:1fr; gap:40px; padding:120px 0 60px; }
  .hero-product { order:-1; }
  .hero-img { max-width:260px; }
  .hero-badge-1 { top:4%; right:2%; }
  .hero-badge-2 { bottom:4%; left:2%; }
  .hero-stats { gap:24px; flex-wrap:wrap; }
}

/* ═══════════════════════════════════════════════════════════
   MARQUEE STRIP — fond blanc avec bordures
   ═══════════════════════════════════════════════════════════ */
.marquee-strip {
  border-top:none;
  border-bottom:none;
  background:#0c0e1a;   /* fond sombre : logos bien visibles */
  overflow:hidden; padding:20px 0;
}
.marquee-track {
  display:flex; align-items:center; white-space:nowrap;
  animation:mq-scroll 22s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state:paused; }
.mq-item {
  display:inline-flex; align-items:center;
  gap:14px; padding:0 44px;
  border-right:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
.mq-logo {
  height:36px;
  width:auto;
  max-width:160px;  /* logo large : limiter la largeur */
  object-fit:contain;
  object-position:center;
  filter:opacity(.6); transition:filter .35s;
}
.mq-item:hover .mq-logo { filter:opacity(1); }
.mq-name {
  font-family:var(--ff-d); font-size:.95rem;
  letter-spacing:.18em; color:rgba(255,255,255,.25); transition:color .35s;
}
.mq-item:hover .mq-name { color:rgba(255,255,255,.85); }
@keyframes mq-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════════════════════════
   SECTION HEADERS — texte sombre sur fond clair
   ═══════════════════════════════════════════════════════════ */
.sec-h { margin-bottom:64px; }
.sec-h.c { text-align:center; }
.sec-over {
  display:inline-flex; align-items:center; gap:12px;
  font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); margin-bottom:16px;
}
.sec-over::before { content:''; width:22px; height:1px; background:var(--red); display:block; }
.sec-h.c .sec-over { justify-content:center; }
.sec-h.c .sec-over::before { display:none; }
.sec-title {
  font-family:var(--ff-d); line-height:.94;
  font-size:clamp(2.4rem,5vw,4.2rem);
  letter-spacing:.04em;
  color:var(--text);   /* sombre sur fond clair */
  margin-bottom:18px;
}
.sec-title .gold    { color:var(--red); }
.sec-title .accent  { color:var(--navy); }
.sec-title .outline {
  -webkit-text-stroke:2px var(--navy);
  color:transparent;
}
.sec-sub { font-size:.95rem; font-weight:400; color:var(--text-3); line-height:1.8; max-width:540px; }
.sec-h.c .sec-sub { margin:0 auto; }

/* ═══════════════════════════════════════════════════════════
   PRODUCTS — fond blanc, texte sombre
   ═══════════════════════════════════════════════════════════ */
.filter-strip { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:48px; }
.filt {
  padding:9px 20px; border-radius:100px;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid var(--border-dk); color:var(--text-3);
  background:var(--bg-2); transition:all .25s; cursor:pointer; font-family:var(--ff-b);
  box-shadow:var(--shadow-sm);
}
.filt:hover { border-color:var(--navy); color:var(--navy); }
.filt.active { background:var(--navy); border-color:var(--navy); color:#ffffff; }

.products-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
}
.prod-card {
  background:var(--bg-2); display:flex; flex-direction:column;
  border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
  box-shadow:var(--shadow-sm);
}
.prod-card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--navy);
}
.prod-img-wrap {
  position:relative; width:100%; height:280px;
  overflow:hidden; background:var(--bg-3); flex-shrink:0;
}
.prod-img {
  width:100%; height:100%;
  object-fit:contain; object-position:center; padding:20px;
  transition:transform .5s var(--ease);
}
.prod-card:hover .prod-img { transform:scale(1.06); }
.prod-ribbon {
  position:absolute; top:14px; left:14px;
  background:var(--red); color:#ffffff;
  font-size:.62rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 12px; border-radius:100px; z-index:2;
}
.prod-body { padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.prod-cat {
  font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sky); margin-bottom:8px;
}
.prod-name {
  font-family:var(--ff-d); font-size:1.5rem; letter-spacing:.04em;
  color:var(--text);   /* sombre = lisible sur fond blanc */
  margin-bottom:8px; line-height:1.05;
}
.prod-desc {
  font-size:.85rem; font-weight:400; color:var(--text-3); line-height:1.7;
  flex:1; margin-bottom:18px;
}
.prod-footer {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:14px; border-top:1px solid var(--border);
}
.prod-price {
  font-family:var(--ff-d); font-size:1.25rem; letter-spacing:.04em;
  color:var(--navy);   /* prix en bleu marine */
}

/* ═══════════════════════════════════════════════════════════
   CATEGORIES — images sombres conservées
   ═══════════════════════════════════════════════════════════ */
.cat-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.cat-card { position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer; display:block; border-radius:12px; }
.cat-card img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 20%;
  transition:transform .6s var(--ease),filter .6s;
  filter:brightness(.55) saturate(.7);
}
.cat-card:hover img { transform:scale(1.08); filter:brightness(.72) saturate(1); }
.cat-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.2) 45%,transparent 70%);
  border-radius:12px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px 20px;
}
.cat-name {
  font-family:var(--ff-d); font-size:1.55rem; letter-spacing:.08em;
  color:#ffffff; margin-bottom:6px;
  transform:translateY(8px); transition:transform .4s var(--ease);
}
.cat-card:hover .cat-name { transform:translateY(0); }
.cat-lnk {
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#ff8080; opacity:0; transform:translateY(10px);
  transition:all .4s var(--ease) .05s;
}
.cat-card:hover .cat-lnk { opacity:1; transform:translateY(0); }
@media(max-width:860px) { .cat-grid{grid-template-columns:1fr 1fr} }
@media(max-width:480px) { .cat-grid{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════
   SPLIT SECTIONS — alternées clair/sombre
   ═══════════════════════════════════════════════════════════ */
.split-row {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:52vh; border-top:1px solid var(--border);
}
.split-row:last-child { border-bottom:1px solid var(--border); }
.split-row.rev .split-img { order:2; } .split-row.rev .split-body { order:1; }
.split-img { position:relative; overflow:hidden; background:var(--bg-3); min-height:360px; }
.split-img img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  position:absolute; inset:0; transition:transform .6s var(--ease);
}
.split-row:hover .split-img img { transform:scale(1.04); }
.split-body { padding:80px 64px; display:flex; flex-direction:column; justify-content:center; background:var(--bg-2); }
.split-over {
  font-size:.67rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.split-over::before { content:''; width:18px; height:1px; background:var(--red); }
.split-title {
  font-family:var(--ff-d); font-size:clamp(2rem,4vw,3rem);
  letter-spacing:.04em; color:var(--text); margin-bottom:16px; line-height:1.05;
}
.split-txt { font-size:.92rem; font-weight:400; color:var(--text-3); line-height:1.8; margin-bottom:32px; }
.split-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.split-tag {
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sky); border:1.5px solid rgba(40,120,180,.3);
  padding:4px 12px; border-radius:100px; background:rgba(40,120,180,.06);
}
@media(max-width:860px) {
  .split-row,.split-row.rev { grid-template-columns:1fr; }
  .split-row.rev .split-img,.split-row.rev .split-body { order:0; }
  .split-body { padding:44px 28px; }
  .split-img { min-height:260px; position:relative; height:260px; }
}

/* ═══════════════════════════════════════════════════════════
   TECH GRID — fond gris très léger, texte sombre
   ═══════════════════════════════════════════════════════════ */
.tech-grid-2 {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.tech-item {
  background:var(--bg-2); padding:40px 36px;
  display:flex; gap:22px;
  border:1px solid var(--border); border-radius:12px;
  transition:box-shadow .3s var(--ease), transform .3s, border-color .3s;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.tech-item::before {
  content:''; position:absolute; top:0; left:0;
  width:4px; height:0; background:var(--red);
  border-radius:0 0 4px 4px;
  transition:height .45s var(--ease);
}
.tech-item:hover::before { height:100%; }
.tech-item:hover { box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--navy); }
.tech-letter {
  font-family:var(--ff-d); font-size:3rem;
  color:var(--bg-4); line-height:1; flex-shrink:0;
  transition:color .3s;
}
.tech-item:hover .tech-letter { color:rgba(220,40,40,.15); }
.tech-item h4 {
  font-family:var(--ff-d); font-size:1.2rem; letter-spacing:.06em;
  color:var(--navy); margin-bottom:10px;
}
.tech-item p { font-size:.87rem; font-weight:400; color:var(--text-3); line-height:1.75; }
@media(max-width:700px) { .tech-grid-2{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════
   CTA BAND — fond bleu marine, texte blanc
   ═══════════════════════════════════════════════════════════ */
.cta-band { background:var(--navy); position:relative; overflow:hidden; padding:96px 0; }
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 80% at 85% 50%,rgba(220,40,40,.18) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 8% 50%,rgba(0,0,0,.25) 0%,transparent 55%);
}
.cta-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; }
.cta-title {
  font-family:var(--ff-d); font-size:clamp(2.4rem,5vw,3.8rem);
  letter-spacing:.04em; line-height:.95; color:#ffffff; margin-bottom:14px;
}
.cta-sub { font-size:.97rem; font-weight:300; color:rgba(255,255,255,.72); line-height:1.75; }
.cta-btns { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
@media(max-width:720px) { .cta-inner{grid-template-columns:1fr} .cta-btns{align-items:flex-start;flex-direction:row;flex-wrap:wrap} }

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — fond bleu marine, texte blanc
   ═══════════════════════════════════════════════════════════ */
.page-hero {
  padding:160px 0 80px;
  background:linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 100%);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 80% at 25% 50%,rgba(220,40,40,.1) 0%,transparent 60%);
}
.page-hero .container { position:relative; z-index:1; }
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:18px;
}
.breadcrumb a { color:rgba(255,255,255,.55); transition:color .2s; }
.breadcrumb a:hover { color:#ff8080; }
.breadcrumb .sep { color:rgba(255,255,255,.25); }
.page-title {
  font-family:var(--ff-d); font-size:clamp(3rem,6vw,5rem);
  letter-spacing:.04em; color:#ffffff; line-height:.95; margin-bottom:14px;
}
.page-sub { font-size:.95rem; font-weight:300; color:rgba(255,255,255,.65); }

/* ═══════════════════════════════════════════════════════════
   FORMS — fond blanc, labels sombres
   ═══════════════════════════════════════════════════════════ */
.form-card {
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:12px; padding:44px;
  box-shadow:var(--shadow);
}
.form-title {
  font-family:var(--ff-d); font-size:1.7rem; letter-spacing:.06em;
  color:var(--text); margin-bottom:28px; padding-bottom:22px;
  border-bottom:1px solid var(--border);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-group label {
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-2);   /* labels bien visibles */
}
.req { color:var(--red); }
.form-group input,.form-group select,.form-group textarea {
  font-family:var(--ff-b); font-size:.95rem;
  color:var(--text);   /* texte saisi sombre = très lisible */
  background:var(--bg);
  border:1.5px solid var(--border-dk); border-radius:6px;
  padding:13px 16px; outline:none;
  transition:border-color .25s,box-shadow .25s; width:100%;
}
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--text-4); }
.form-group select option { background:var(--bg-2); color:var(--text); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(40,60,120,.1);
  background:var(--bg-2);
}
.form-group textarea { resize:vertical; }
.form-success {
  background:#eff6ff; border:1px solid #93c5fd; border-radius:8px;
  padding:18px 22px; color:#1d4ed8; font-weight:600; font-size:.9rem;
  display:none; margin-bottom:22px;
}
@media(max-width:640px) { .form-row{grid-template-columns:1fr} .form-card{padding:26px} }

.info-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:8px; padding:20px 24px; margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}
.info-lbl {
  font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy); margin-bottom:8px;
}
.info-val { font-size:.9rem; font-weight:400; color:var(--text-2); line-height:1.65; }
.info-val a { color:var(--navy); transition:color .2s; }
.info-val a:hover { color:var(--red); }
.hours-table { width:100%; border-collapse:collapse; }
.hours-table td { padding:9px 0; font-size:.87rem; color:var(--text-3); border-bottom:1px solid var(--border); }
.hours-table td:last-child { text-align:right; font-weight:700; color:var(--text); }
.hours-table tr:last-child td { border-bottom:none; }
.two-col { display:grid; grid-template-columns:1fr 1.5fr; gap:44px; align-items:start; }
@media(max-width:860px) { .two-col{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════
   PREORDER
   ═══════════════════════════════════════════════════════════ */
.preorder-layout { display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:start; }
.sticky-top { position:sticky; top:88px; }
@media(max-width:900px) { .preorder-layout{grid-template-columns:1fr} .sticky-top{position:static} }
.sum-box { background:var(--bg-2); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.sum-head { background:var(--navy); padding:16px 22px; font-family:var(--ff-d); font-size:1.1rem; letter-spacing:.08em; color:#ffffff; }
.sum-body { padding:0 22px; }
.sum-row { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--border); font-size:.88rem; }
.sum-row:last-child { border-bottom:none; }
.sum-name { color:var(--text-2); flex:1; }
.sum-qty  { color:var(--text-4); margin:0 10px; }
.sum-amt  { color:var(--navy); font-weight:700; }
.sum-empty { text-align:center; padding:36px; color:var(--text-4); font-size:.87rem; }
.sum-total { background:var(--bg-3); border-top:2px solid var(--border-dk); padding:14px 22px; display:flex; justify-content:space-between; align-items:center; }
.sum-total-lbl { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.sum-total-amt { font-family:var(--ff-d); font-size:1.4rem; letter-spacing:.04em; color:var(--navy); }

/* ═══════════════════════════════════════════════════════════
   CART
   ═══════════════════════════════════════════════════════════ */
.cart-fab { position:fixed; bottom:28px; right:28px; z-index:1400; width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 32px rgba(40,60,120,.35); transition:all .3s var(--ease); }
.cart-fab:hover { background:var(--red); transform:scale(1.08); box-shadow:0 8px 32px rgba(220,40,40,.4); }
.cart-fab svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cart-count { position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff; font-size:.62rem; font-weight:900; width:20px; height:20px; border-radius:50%; display:none; align-items:center; justify-content:center; font-family:var(--ff-b); }
.overlay { position:fixed; inset:0; z-index:1390; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .3s; }
.overlay.visible { opacity:1; pointer-events:all; }
.cart-drawer { position:fixed; top:0; right:-420px; bottom:0; width:400px; z-index:1500; background:var(--bg-2); border-left:1px solid var(--border); display:flex; flex-direction:column; transition:right .4s var(--ease); box-shadow:var(--shadow-xl); }
.cart-drawer.open { right:0; }
.cart-dhead { padding:22px 26px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.cart-dhead h3 { font-family:var(--ff-d); font-size:1.4rem; letter-spacing:.08em; color:var(--text); }
.cart-close { width:34px; height:34px; border-radius:6px; background:var(--bg-3); color:var(--text-3); font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all .2s; cursor:pointer; }
.cart-close:hover { background:var(--border-dk); color:var(--text); }
.cart-dbody { flex:1; overflow-y:auto; padding:18px 26px; }
.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; color:var(--text-4); padding:40px; }
.cart-empty svg { width:52px; height:52px; stroke:var(--border-dk); margin-bottom:16px; fill:none; stroke-width:1.5; }
.cart-item { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.cart-item-img { width:68px; height:68px; background:var(--bg-3); border-radius:8px; overflow:hidden; flex-shrink:0; border:1px solid var(--border); }
.cart-item-img img { width:100%; height:100%; object-fit:contain; padding:6px; }
.cart-item-name { font-weight:700; font-size:.9rem; color:var(--text); margin-bottom:4px; }
.cart-item-price { font-size:.8rem; color:var(--text-3); margin-bottom:8px; }
.cart-qty { display:flex; align-items:center; gap:10px; }
.qty-btn { width:28px; height:28px; border-radius:6px; background:var(--bg-3); color:var(--text); font-size:.9rem; font-weight:700; display:flex; align-items:center; justify-content:center; transition:background .2s; cursor:pointer; border:1px solid var(--border); }
.qty-btn:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.qty-val { font-size:.9rem; font-weight:700; min-width:18px; text-align:center; color:var(--text); }
.cart-item-total { font-family:var(--ff-d); font-size:1.1rem; letter-spacing:.04em; color:var(--navy); margin-left:auto; align-self:center; font-weight:700; }
.cart-dfooter { padding:18px 26px; border-top:2px solid var(--border-dk); background:var(--bg-3); }
.cart-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.cart-total-lbl { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.cart-total-amt { font-family:var(--ff-d); font-size:1.5rem; letter-spacing:.04em; color:var(--navy); }

/* ═══════════════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════════════ */
.gal-wrap { position:relative; border:1px solid var(--border); border-radius:12px; aspect-ratio:21/9; overflow:hidden; background:var(--bg-3); box-shadow:var(--shadow); }
.gslide { position:absolute; inset:0; opacity:0; transition:opacity .65s; }
.gslide.active { opacity:1; }
.gslide img { width:100%; height:100%; object-fit:cover; object-position:center; }
.garrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:50px; height:50px; background:rgba(255,255,255,.9); color:var(--navy); border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:all .25s; cursor:pointer; box-shadow:var(--shadow); }
.garrow:hover { background:var(--red); color:#fff; border-color:var(--red); }
.garrow-prev { left:18px; } .garrow-next { right:18px; }
.gdots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:5; }
.gdot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:all .3s; }
.gdot.active { width:22px; border-radius:4px; background:var(--red); }

/* ═══════════════════════════════════════════════════════════
   FOOTER — bleu marine, texte blanc lisible
   ═══════════════════════════════════════════════════════════ */
/* ── FOOTER — même fond blanc que le header ─────────────── */
.site-footer {
  background:#ffffff;
  border-top:3px solid var(--red);       /* trait rouge signature en haut */
  padding-top:72px;
}
.footer-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:52px; padding-bottom:56px;
  border-bottom:1px solid var(--border);
}

/* Logo fond blanc sur footer blanc — aucun filtre */
.footer-logo-block {
  margin-bottom:22px;
  display:flex;
  align-items:center;
}
.footer-logo-img {
  height:56px;
  width:auto;
  max-width:240px;
  object-fit:contain;
  object-position:left center;
  filter:none;
}

/* Texte description — gris sombre lisible */
.footer-about {
  font-family:var(--ff-b);
  font-size:.9rem;
  font-weight:400;
  color:var(--text-3);
  line-height:1.75;
  margin-bottom:24px;
}

/* Icônes réseaux sociaux */
.footer-socials { display:flex; gap:8px; }
.fsoc {
  width:38px; height:38px;
  border:1.5px solid var(--border-dk);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); transition:all .25s;
}
.fsoc:hover { border-color:var(--red); color:#ffffff; background:var(--red); }
.fsoc svg { width:16px; height:16px; fill:currentColor; }

/* Titres colonnes footer */
.footer-col h5 {
  font-family:var(--ff-b);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);            /* bleu marine bien lisible */
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:2px solid var(--red);
}

/* Liens navigation footer */
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col ul a {
  font-family:var(--ff-b);
  font-size:.9rem;
  font-weight:400;
  color:var(--text-3);           /* gris sombre lisible */
  transition:color .2s;
  display:flex; align-items:center; gap:8px;
}
.footer-col ul a:hover { color:var(--navy); }
.footer-col ul a::before {
  content:''; width:8px; height:1.5px;
  background:var(--border-dk); flex-shrink:0;
  transition:background .2s, width .2s;
}
.footer-col ul a:hover::before { background:var(--red); width:14px; }

/* Bloc contact */
.fc-item { margin-bottom:16px; }
.fc-lbl {
  font-family:var(--ff-b);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);             /* label bleu marine */
  margin-bottom:5px;
  display:block;
}
.fc-val {
  font-family:var(--ff-b);
  font-size:.9rem;
  font-weight:400;
  color:var(--text-2);           /* texte de contact sombre */
  line-height:1.7;
}
.fc-val a {
  color:var(--text-2);
  transition:color .2s;
}
.fc-val a:hover { color:var(--red); }

/* Barre du bas */
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; padding:20px 0;
  font-family:var(--ff-b);
  font-size:.78rem;
  font-weight:400;
  color:var(--text-4);           /* gris discret */
}
.footer-bottom a {
  color:var(--text-3);
  transition:color .2s;
}
.footer-bottom a:hover { color:var(--red); }
.footer-bottom-r { display:flex; gap:20px; }

@media(max-width:960px) { .footer-grid{grid-template-columns:1fr 1fr;gap:32px} }
@media(max-width:540px) { .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;text-align:center} }

/* ═══════════════════════════════════════════════════════════
   LEGAL
   ═══════════════════════════════════════════════════════════ */
.legal-wrap { max-width:800px; margin:0 auto; padding:80px 24px; }
.legal-wrap h2 { font-family:var(--ff-d); font-size:1.7rem; letter-spacing:.06em; color:var(--navy); margin:48px 0 16px; padding-bottom:12px; border-bottom:2px solid var(--border-dk); }
.legal-wrap h3 { font-size:.97rem; font-weight:700; color:var(--text); margin:26px 0 10px; }
.legal-wrap p { font-size:.92rem; color:var(--text-2); line-height:1.82; margin-bottom:14px; }
.legal-wrap ul { padding-left:20px; margin-bottom:14px; }
.legal-wrap ul li { font-size:.92rem; color:var(--text-2); line-height:1.82; margin-bottom:8px; list-style:disc; }
.legal-notice { background:#eff6ff; border:1px solid #93c5fd; border-radius:8px; padding:20px 24px; margin-top:48px; font-size:.9rem; color:#1d4ed8; line-height:1.7; }

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.modal-backdrop { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:24px; }
.modal-backdrop.open { display:flex; }
.modal-box { background:var(--bg-2); border:1px solid var(--border); border-radius:16px; overflow:hidden; width:100%; max-width:760px; max-height:92vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; box-shadow:var(--shadow-xl); }
.modal-img-side { background:var(--bg-3); position:relative; min-height:360px; }
.modal-img-side img { width:100%; height:100%; object-fit:contain; padding:32px; position:absolute; inset:0; }
.modal-body-side { padding:38px 34px; }
.modal-close { float:right; width:34px; height:34px; background:var(--bg-3); color:var(--text-3); font-size:.9rem; display:flex; align-items:center; justify-content:center; border-radius:6px; margin-bottom:14px; transition:all .2s; cursor:pointer; border:1px solid var(--border); }
.modal-close:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
@media(max-width:640px) { .modal-box{grid-template-columns:1fr} .modal-img-side{min-height:200px;position:relative;height:200px} }
/* Texte dans le modal */
.modal-body-side .prod-cat { color:var(--sky); }
.modal-body-side .prod-name { color:var(--text); }
.modal-body-side p { color:var(--text-2); }
.modal-body-side .prod-price { color:var(--navy); }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════ */
/* Reveal: only hidden when JS is active (body.js-ok) */
body.js-ok .reveal   { opacity:0; transform:translateY(28px);  transition:opacity .7s var(--ease),transform .7s var(--ease); }
body.js-ok .reveal-l { opacity:0; transform:translateX(-28px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
body.js-ok .reveal-r { opacity:0; transform:translateX(28px);  transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.in,.reveal-l.in,.reveal-r.in { opacity:1 !important; transform:translate(0) !important; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ═══════════════════════════════════════════════════════════
   SHIMMER — rouge
   ═══════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%  { background-position:-200% center }
  100%{ background-position:200% center }
}
.shimmer-gold {
  background:linear-gradient(90deg,var(--red) 25%,var(--red-lt) 50%,var(--red) 75%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE TABS
   ═══════════════════════════════════════════════════════════ */
.contact-tabs {
  display:flex; gap:0;
  border:1.5px solid var(--border-dk);
  border-radius:8px; overflow:hidden;
  margin-bottom:32px;
}
.ctab {
  flex:1; padding:14px 20px;
  font-family:var(--ff-b); font-size:.74rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-align:center;
  background:var(--bg-3); color:var(--text-3);
  border:none; cursor:pointer; transition:all .25s;
  border-right:1px solid var(--border-dk);
}
.ctab:last-child { border-right:none; }
.ctab.active { background:var(--navy); color:#ffffff; }
.ctab:hover:not(.active) { background:var(--bg-4); color:var(--text); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.membre-benefits {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px;
}
.benefit-item {
  background:var(--bg-3); border:1px solid var(--border);
  border-left:3px solid var(--sky);
  padding:14px 18px; border-radius:6px;
}
.benefit-item strong { display:block; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin-bottom:4px; }
.benefit-item span { font-size:.84rem; color:var(--text-3); }
@media(max-width:640px) { .membre-benefits{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════
   SECTIONS ALTERNÉES — helper classes
   ═══════════════════════════════════════════════════════════ */
.bg-white   { background:var(--bg-2) !important; }
.bg-light   { background:var(--bg-3) !important; }
.bg-navy    { background:var(--navy) !important; }

@media(max-width:480px) { .section{padding:72px 0} .container{padding:0 20px} }

/* ── Prix Membre / Non-membre ──────────────────────────── */
.price-block { display:flex; flex-direction:column; gap:2px; }
.price-membre {
  font-family:var(--ff-d); font-size:1.25rem; letter-spacing:.04em;
  color:var(--navy);
  display:block;
}
.price-membre::before { content:'Membre : '; font-family:var(--ff-b); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); display:block; margin-bottom:1px; }
.price-non-membre {
  font-family:var(--ff-d); font-size:1rem; letter-spacing:.04em;
  color:var(--text-3);
  text-decoration:line-through;
  display:block;
}
.price-non-membre::before { content:'Non-membre : '; font-family:var(--ff-b); font-size:.6rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-4); display:block; text-decoration:none; }

/* ── Plans Distributeur ────────────────────────────────── */
.plans-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:40px;
}
@media(max-width:860px){ .plans-grid{ grid-template-columns:1fr; } }

.plan-card {
  background:#ffffff;
  border:1.5px solid var(--border-dk);
  border-radius:16px;
  padding:32px 28px;
  display:flex; flex-direction:column;
  position:relative;
  transition:box-shadow .3s, transform .3s;
  box-shadow:0 2px 12px rgba(40,60,120,.07);
}
.plan-card:hover { box-shadow:0 12px 40px rgba(40,60,120,.14); transform:translateY(-4px); }

/* Plan populaire — fond sombre */
.plan-card.popular {
  background:#1a1a2e;
  border-color:#1a1a2e;
  color:#ffffff;
  transform:scale(1.03);
  box-shadow:0 16px 48px rgba(26,26,46,.35);
  z-index:2;
}
.plan-card.popular:hover { transform:scale(1.03) translateY(-4px); }

.plan-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,#f59e0b,#ef4444);
  color:#ffffff;
  font-family:var(--ff-b); font-size:.7rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 18px; border-radius:100px;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(239,68,68,.4);
}

.plan-name {
  font-family:var(--ff-b); font-size:1.3rem; font-weight:800;
  color:var(--text); margin-bottom:4px;
}
.plan-card.popular .plan-name { color:#ffffff; }
.plan-tagline {
  font-size:.85rem; color:var(--text-3); margin-bottom:24px;
}
.plan-card.popular .plan-tagline { color:rgba(255,255,255,.6); }

.plan-price {
  font-family:var(--ff-b); font-size:3rem; font-weight:900;
  line-height:1; margin-bottom:4px;
  color:var(--navy);
}
.plan-card.popular .plan-price { color:#ffffff; }
.plan-price-sub {
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:var(--red); margin-bottom:24px; display:block;
}
.plan-card.popular .plan-price-sub { color:#f59e0b; }

.plan-divider {
  height:1px; background:var(--border);
  margin:0 0 22px; border:none;
}
.plan-card.popular .plan-divider { background:rgba(255,255,255,.12); }

.plan-features { list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; margin-bottom:28px; }
.plan-features li {
  display:flex; align-items:flex-start; gap:10px;
  font-size:.9rem; color:var(--text-2);
}
.plan-card.popular .plan-features li { color:rgba(255,255,255,.85); }
.plan-features li .check {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--border-dk);
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.plan-features li .check svg { width:11px; height:11px; stroke:var(--navy); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.plan-card.popular .plan-features li .check { border-color:#f59e0b; }
.plan-card.popular .plan-features li .check svg { stroke:#f59e0b; }

.plan-pv {
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-4); margin-bottom:20px;
  padding:8px 14px; background:var(--bg-3); border-radius:6px; text-align:center;
}
.plan-card.popular .plan-pv { background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); }

.plan-btn {
  display:block; width:100%;
  padding:14px 20px; border-radius:8px;
  font-family:var(--ff-b); font-size:.88rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
  cursor:pointer; border:2px solid var(--navy); background:transparent;
  color:var(--navy); transition:all .25s;
}
.plan-btn:hover { background:var(--navy); color:#ffffff; }
.plan-card.popular .plan-btn {
  background:linear-gradient(90deg,#f59e0b,#ef4444);
  border-color:transparent; color:#ffffff;
}
.plan-card.popular .plan-btn:hover {
  background:linear-gradient(90deg,#ef4444,#f59e0b);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(239,68,68,.4);
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIAL — Patrick Kabamba
   ═══════════════════════════════════════════════════════════ */
.testimonial-card {
  position: relative;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 60px 56px 56px;
  box-shadow: 0 16px 60px rgba(40,60,120,.1);
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}

/* Trait décoratif gauche */
.testimonial-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(to bottom, var(--navy), var(--red));
  border-radius: 24px 0 0 24px;
}

/* Guillemet en arrière-plan */
.testimonial-quote-icon {
  position: absolute;
  top: 32px; right: 48px;
  width: 72px; height: 52px;
  color: var(--red);
  opacity: .08;
  pointer-events: none;
}
.testimonial-quote-icon svg { width: 100%; height: 100%; }

/* Layout : photo gauche + contenu droite */
.testimonial-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

/* Photo */
.testimonial-photo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.testimonial-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid var(--white);
  box-shadow: 0 8px 32px rgba(40,60,120,.2),
              0 0 0 8px rgba(220,40,40,.08);
  display: block;
}
.testimonial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--navy), #3a54a0);
  color: #ffffff;
  font-family: var(--ff-b);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(40,60,120,.3);
}
.testimonial-badge svg { fill: #f59e0b; }

/* Contenu texte */
.testimonial-content { display: flex; flex-direction: column; }

.testimonial-text {
  margin-bottom: 32px;
}
.testimonial-text p {
  font-family: var(--ff-b);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 14px;
}
.testimonial-text p:last-child { margin-bottom: 0; }

/* Phrase mise en valeur */
.testimonial-highlight {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  font-style: italic;
  padding: 14px 20px;
  background: linear-gradient(135deg, #eff6ff, #f0f4ff);
  border-left: 4px solid var(--red);
  border-radius: 0 8px 8px 0;
  margin: 8px 0 !important;
}

/* Auteur */
.testimonial-author {
  padding-top: 24px;
  border-top: 1.5px solid var(--border);
}
.testimonial-author-name {
  font-family: var(--ff-b);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.testimonial-author-role {
  font-family: var(--ff-b);
  font-size: .85rem;
  font-weight: 400;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.role-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #ffffff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 100px;
}

/* Responsive */
@media(max-width:760px) {
  .testimonial-card { padding: 44px 28px 44px; }
  .testimonial-body {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .testimonial-photo-wrap { align-items: center; }
  .testimonial-photo { width: 140px; height: 140px; }
  .testimonial-author-role { justify-content: center; }
  .testimonial-highlight { text-align: left; }
}