/* ============================================================
   VERSIONFRANCAISE.FR — Unified Design System V6
   Production-ready CSS · Header, Mega-Menu, Footer, Cookie
   FICHIER UNIQUE pour les composants partagés
   ============================================================ */

/* ------------------------------------------------------------
   0. DESIGN TOKENS (V6 palette)
   ------------------------------------------------------------ */
:root {
  /* V6 Palette */
  --navy:    #1d3557;
  --navy2:   #162337;
  --red:     #e63946;
  --red2:    #c5303c;
  --cream:   #FFFFFF;
  --cream2:  #EDECE9;
  --white:   #FFFFFF;
  --gray:    #6B7280;
  --gray2:   #E5E7EB;
  --gray3:   #F7F7F7;
  --gold:    #B8860B;
  --gold2:   #F5E6C8;

  /* Backward-compat aliases (old pages) */
  --red-dark: #c5303c;
  --blue:    #487FA2;
  --pastel:  #BDDBDD;
  --dark:    #111111;
  --gray-light: #9CA3AF;
  --light:   #F3F4F6;
  --border:  #E5E7EB;
  --footer-bg: #1d3557;
  --overlay: rgba(29,53,87,.45);

  /* Typography */
  --fd: 'Calibri', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --fb: 'Calibri', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --font-display: 'Calibri', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --font-body: 'Calibri', 'Gill Sans', 'Trebuchet MS', sans-serif;

  /* Shadows V6 */
  --sh:  0 4px 24px rgba(29,53,87,.09);
  --sh2: 0 12px 48px rgba(29,53,87,.16);

  /* Layout */
  --max-w: 1440px;
  --gutter: clamp(1rem, 3vw, 2.5rem);

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --speed: .3s;
  --speed-slow: .5s;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows (backward compat) */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,.16);

  /* Z-index layers */
  --z-header: 1000;
  --z-mega: 999;
  --z-overlay: 998;
  --z-mobile: 1100;
  --z-cookie: 1200;
}


/* ------------------------------------------------------------
   1. RESET & BASE (kept from old)
   ------------------------------------------------------------ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100% }
body { font-family:var(--fb); font-size:16px; line-height:1.6; color:var(--navy); background:var(--cream); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden }
img, video, svg { display:block; max-width:100%; height:auto }
a { text-decoration:none; color:inherit; transition:color var(--speed) var(--ease) }
button { font-family:inherit; cursor:pointer; border:none; background:none }
ul, ol { list-style:none }
::selection { background:var(--navy); color:var(--white) }


/* ------------------------------------------------------------
   2. CONTAINER & LAYOUT UTILITIES
   ------------------------------------------------------------ */
.container { width:100%; max-width:var(--max-w); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-block:clamp(3rem,8vw,6rem) }
.section--cream { background:var(--cream) }
.section--light { background:var(--light) }
.section--navy { background:var(--navy); color:var(--white) }
.section--dark { background:var(--dark); color:var(--white) }
.section-label { display:inline-block; font-family:var(--fb); font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-bottom:.75rem }
.section-title { font-family:var(--fd); font-weight:800; font-size:clamp(1.75rem,4vw,2.75rem); line-height:1.15; color:var(--navy); margin-bottom:1rem }
.section--navy .section-title, .section--dark .section-title { color:var(--white) }
.section-desc { font-size:clamp(.95rem,1.5vw,1.125rem); color:var(--gray); max-width:640px; line-height:1.7 }
.section--navy .section-desc, .section--dark .section-desc { color:var(--gray-light) }
.text-center { text-align:center }
.text-center .section-desc { margin-inline:auto }


/* ------------------------------------------------------------
   3. BUTTONS (old + V6 compat)
   ------------------------------------------------------------ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--fb); font-size:.9rem; font-weight:600; padding:.75rem 1.75rem; border-radius:var(--radius-pill); transition:all var(--speed) var(--ease); white-space:nowrap; position:relative; overflow:hidden }
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); opacity:0; transition:opacity var(--speed) var(--ease) }
.btn:hover::after { opacity:1 }
.btn-primary { background:var(--red); color:var(--white); box-shadow:0 2px 8px rgba(230,57,70,.3) }
.btn-primary:hover { background:var(--red2); box-shadow:0 6px 20px rgba(230,57,70,.35); transform:translateY(-1px) }
.btn-primary:active { transform:translateY(0); box-shadow:0 2px 8px rgba(230,57,70,.25) }
.btn-outline { background:transparent; color:var(--navy); border:1.5px solid var(--navy) }
.btn-outline:hover { background:var(--navy); color:var(--white); transform:translateY(-1px) }
.btn-outline--white { color:var(--white); border-color:var(--white) }
.btn-outline--white:hover { background:var(--white); color:var(--navy) }
.btn-sm { font-size:.8rem; padding:.5rem 1.25rem }
.btn-lg { font-size:1rem; padding:.9rem 2.25rem }


/* ============================================================
   4. V6 HEADER — TOPBAR + NAV + TRICOLOR
   ============================================================ */

/* Liseré tricolore fixe */
.hero-tricolor { position:fixed; left:0; top:0; bottom:0; width:5px; background:linear-gradient(to bottom, #0055A4 33.33%, #fff 33.33%, #fff 66.66%, #EF4135 66.66%); z-index:9998; pointer-events:none }

/* Scroll progress */
.scroll-progress { position:fixed; top:0; left:0; height:3px; background:var(--red); width:0; z-index:9999; transition:width .1s }

/* Topbar */
.topbar { background:var(--navy); color:rgba(255,255,255,.82); font-size:12px; font-weight:500; padding:8px 0 }
.topbar-inner { max-width:1440px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap }
.topbar span { display:flex; align-items:center; gap:6px }
.topbar a { color:rgba(255,255,255,.9) }
.topbar a:hover { color:#fff }

/* Header */
.header { background:var(--white); border-bottom:1px solid var(--gray2); position:sticky; top:0; z-index:1000; box-shadow:0 2px 12px rgba(29,53,87,.06); transition:box-shadow .3s }
.header.scrolled { box-shadow:0 4px 24px rgba(29,53,87,.14) }
.header-inner { max-width:1440px; margin:0 auto; padding:12px 40px; display:flex; align-items:center; gap:14px }
.logo { flex-shrink:0 }
.nav-main { flex:1; display:flex; align-items:center; gap:10px }

/* Catalogue button */
.nav-catalogue { flex-shrink:0; display:flex; align-items:center; gap:7px; background:transparent; border:1.5px solid var(--gray2); border-radius:8px; padding:9px 15px; font-family:var(--fb); font-size:13px; font-weight:600; color:var(--navy); cursor:pointer; transition:all .2s; white-space:nowrap }
.nav-catalogue:hover, .nav-catalogue.active { border-color:var(--red); color:var(--red); background:rgba(230,57,70,.04) }
.nav-catalogue .chev { transition:transform .2s }
.nav-catalogue.active .chev { transform:rotate(180deg) }

/* Search */
.nav-search { flex:1; display:flex; align-items:center; background:#ffffff; border:1.5px solid var(--gray2); border-radius:8px; padding:0 6px 0 12px; height:42px; gap:8px; transition:border-color .2s; min-width:0 }
.nav-search:focus-within { border-color:var(--navy) }
.nav-search input { flex:1; border:none; background:transparent; font-family:var(--fb); font-size:13px; color:var(--navy); outline:none; min-width:0 }
.nav-search input::placeholder { color:#9CA3AF }
.sbtn { flex-shrink:0; width:32px; height:32px; border:none; border-radius:50%; background:var(--red); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; animation:sPulse 2.5s ease-out infinite }
.sbtn:hover { background:var(--red2); animation:none }
@keyframes sPulse { 0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,.4)} 50%{box-shadow:0 0 0 6px rgba(230,57,70,0)} }

/* Phone + CTA */
.header-contact { flex-shrink:0; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; white-space:nowrap }
.header-contact a { color:var(--navy) }
.header-contact a:hover { color:var(--red) }
.ph-pulse { animation:phP 3s ease-in-out infinite }
@keyframes phP { 0%,100%{opacity:1} 50%{opacity:.6} }
.nav-cta { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:var(--red); color:#fff; border-radius:8px; padding:10px 16px; font-family:var(--fb); font-size:13px; font-weight:700; transition:background .2s,transform .15s; white-space:nowrap }
.nav-cta:hover { background:var(--red2); transform:translateY(-1px) }
.nav-panier { position:relative; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; color:var(--navy); transition:all .2s; text-decoration:none }
.nav-panier:hover { background:var(--gray-100); color:var(--red) }
.panier-badge { position:absolute; top:-2px; right:-4px; min-width:18px; height:18px; background:var(--red); color:white; border-radius:50%; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:var(--fb) }

/* Mobile toggle */
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; border:none; background:transparent }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; transition:all .3s }


/* ============================================================
   5. V6 MEGA MENU
   ============================================================ */
.mega-overlay { position:fixed; inset:0; background:rgba(29,53,87,.45); backdrop-filter:blur(4px); z-index:998; opacity:0; pointer-events:none; transition:opacity .3s }
.mega-overlay.active { opacity:1; pointer-events:all }
.mega-menu { position:fixed; top:0; left:0; right:0; background:var(--white); z-index:999; border-bottom:3px solid var(--red); box-shadow:var(--sh2); transform:translateY(-100%); opacity:0; transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .3s; max-height:82vh; overflow-y:auto }
.mega-menu.active { transform:translateY(0); opacity:1 }
.mega-inner { max-width:1440px; margin:0 auto; padding:28px 40px 28px; position:relative }
.mega-close { position:absolute; top:20px; right:40px; background:none; border:none; cursor:pointer; font-size:18px; color:var(--gray); transition:color .2s }
.mega-close:hover { color:var(--navy) }
.mega-hdr { display:flex; align-items:center; gap:12px; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--gray2) }
.mega-hdr h3 { font-family:var(--fd); font-size:17px; font-weight:700 }
.mega-badge { background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.5px }

/* 4-column SEO grid (BRIEF-MEGAMENU-SEO-VF) */
.mega-grid-4col { display:grid; grid-template-columns:2fr 1fr 260px; gap:28px }
.mega-col--wide .mega-cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px }
.mega-view-all { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--red); text-decoration:none; transition:color .15s }
.mega-view-all:hover { color:var(--red2) }
.mega-col-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--gray2) }
.mega-col-title a { color:var(--gray); text-decoration:none; transition:color .15s }
.mega-col-title a:hover { color:var(--navy) }
.mega-col-title--sub { margin-top:16px }
.mega-links { list-style:none; display:flex; flex-direction:column; gap:2px }
.mega-links li a { display:block; font-size:13px; font-weight:500; color:var(--navy); padding:5px 8px; border-radius:6px; transition:background .15s, color .15s; text-decoration:none }
.mega-links li a:hover { background:var(--light); color:var(--red) }
.mega-links li a strong { font-weight:700; color:var(--red) }
.mega-separator { height:1px; background:var(--gray2); margin:12px 0 }

/* CTA block in mega-menu */
.mega-col--cta { display:flex; align-items:stretch }
.mega-cta-block { background:linear-gradient(135deg, #1d3557 0%, #1a2d47 100%); border-radius:12px; padding:22px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; width:100% }
.mega-cta-flag { font-size:28px }
.mega-cta-title { font-size:14px; font-weight:700; color:#fff; line-height:1.4 }
.mega-cta-points { list-style:none; display:flex; flex-direction:column; gap:5px; text-align:left }
.mega-cta-points li { font-size:12px; color:rgba(255,255,255,.75); line-height:1.4 }
.mega-cta-btn { display:block; width:100%; background:var(--red); color:#fff; font-size:13px; font-weight:700; padding:11px 16px; border-radius:8px; text-align:center; transition:background .2s; text-decoration:none; margin-top:4px }
.mega-cta-btn:hover { background:var(--red2) }
.mega-cta-btn2 { display:block; width:100%; background:rgba(255,255,255,.1); color:rgba(255,255,255,.85); font-size:12px; font-weight:600; padding:8px 14px; border-radius:6px; text-align:center; transition:all .2s; text-decoration:none; border:1px solid rgba(255,255,255,.15) }
.mega-cta-btn2:hover { background:rgba(255,255,255,.18); color:#fff }

/* Tendances 2026 */
.mega-tendances { margin-top:18px; padding-top:16px; border-top:1px solid var(--gray2); display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.mega-tendances-label { font-size:12px; font-weight:700; color:var(--navy); white-space:nowrap }
.mega-tendances-list { display:flex; flex-wrap:wrap; gap:8px }
.mega-trend-tag { font-size:11px; font-weight:600; color:var(--navy); background:var(--gold2); border:1.5px solid rgba(184,134,11,.2); padding:5px 12px; border-radius:100px; transition:all .15s; display:inline-flex; align-items:center; white-space:nowrap; text-decoration:none }
.mega-trend-tag:hover { background:var(--gold); color:#fff; border-color:var(--gold) }

/* Legacy compat: old mega-menu classes kept for any old-page JS references */
.mega-block-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--gray); margin-bottom:10px; display:block }
.mega-sectors { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px }
.mega-sector-tag { font-size:12px; font-weight:600; color:var(--navy); background:var(--light); border:1.5px solid var(--gray2); padding:6px 14px; border-radius:100px; transition:all .15s; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; text-decoration:none }
.mega-sector-tag:hover { background:var(--red); color:#fff; border-color:var(--red) }
.mega-occasions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px }
.mega-occ-tag { font-size:12px; font-weight:600; color:var(--navy); background:var(--gold2); border:1.5px solid rgba(184,134,11,.2); padding:6px 14px; border-radius:100px; transition:all .15s; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; text-decoration:none }
.mega-occ-tag:hover { background:var(--gold); color:#fff; border-color:var(--gold) }
.mega-cats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)); gap:4px }
.mega-cat { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; transition:background .15s; cursor:pointer; text-decoration:none }
.mega-cat:hover { background:var(--light) }
.mc-ico { font-size:18px; flex-shrink:0 }
.mc-lbl { font-size:13px; font-weight:500; color:var(--navy) }


/* ============================================================
   6. V6 FOOTER 1 (Navigation — fond navy #1d3557)
   ============================================================ */
.footer { background:#1d3557; padding:28px 0 0; color:rgba(255,255,255,.75); border-top:3px solid var(--red) }
.footer-inner { max-width:1440px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1.6fr repeat(4, 1fr); gap:20px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.07) }
.footer-logo-wrap { display:flex; flex-direction:column; gap:8px }
.footer-baseline { font-size:13px; color:rgba(255,255,255,.6); line-height:1.3 }
.footer-contact { display:flex; flex-direction:column; gap:3px; font-size:13px }
.footer-contact a { color:rgba(255,255,255,.85); text-decoration:none }
.footer-contact a:hover { color:#fff }
.footer-hours { color:rgba(255,255,255,.45); font-size:12px }
.footer-reassurance { display:flex; flex-direction:column; gap:6px; margin-top:8px }
.footer-reassurance span { font-size:12px; color:rgba(255,255,255,.5) }
.footer-grid { display:contents }
.footer-col-title { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:8px }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:3px }
.footer-col ul li a { font-size:13px; color:rgba(255,255,255,.72); text-decoration:none; transition:color .15s }
.footer-col ul li a:hover { color:#fff }
.footer-devis-cta { margin-top:20px }
.btn-footer-devis { display:inline-block; background:#e63946; color:#fff; font-size:13px; font-weight:700; padding:10px 18px; border-radius:6px; text-decoration:none; transition:background .2s }
.btn-footer-devis:hover { background:#c5303c }
.footer-labels { margin-top:20px; display:flex; flex-direction:column; gap:8px }
.label-mif, .label-bat { font-size:11px; color:rgba(255,255,255,.4) }

/* ============================================================
   6b. V6 FOOTER 2 (Bandeau bas — fond #070E1A)
   ============================================================ */
.footer-bottom { background:#070E1A; padding:18px 0 }
.footer-bottom-inner { max-width:1440px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px }
.footer-copyright { font-size:11px; color:rgba(255,255,255,.35) }
.footer-legal-links { display:flex; gap:18px }
.footer-legal-links a { font-size:11px; color:rgba(255,255,255,.4); text-decoration:none; transition:color .15s }
.footer-legal-links a:hover { color:rgba(255,255,255,.7) }
.footer-seo { font-size:10px; color:rgba(255,255,255,.2); width:100%; text-align:center }

/* Legacy footer classes (backward compat for old pages) */
.f-inner { max-width:1440px; margin:0 auto; padding:0 40px }
.f-logo-wrap { text-align:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:18px }
.f-grid { display:grid; grid-template-columns:1.4fr 1.1fr 1fr 1fr 1.3fr; gap:20px; margin-bottom:20px }
.fc-h { font-family:var(--fd); font-size:12px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.07) }
.fc-h2 { font-family:var(--fd); font-size:12px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; margin-top:18px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.07) }
.f-col a { display:block; font-size:13px; color:rgba(255,255,255,.62); padding:3.5px 0; transition:color .15s, padding-left .15s }
.f-col a:hover { color:#fff; padding-left:4px }
.f-col p { font-size:13px; color:rgba(255,255,255,.52); line-height:1.7; margin-bottom:12px }
.f-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px }
.f-badge { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:6px; padding:4px 9px; font-size:11px; font-weight:600; color:rgba(255,255,255,.65) }
.f-bottom { border-top:1px solid rgba(255,255,255,.07); padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.f-copy { font-size:12px; color:rgba(255,255,255,.3) }
.f-copy a { color:rgba(255,255,255,.3) }
.f-tri { display:flex; gap:3px; align-items:center }
.f-tri span { width:15px; height:9px; border-radius:2px }
.ft-b { background:#0055A4 }
.ft-w { background:#fff; opacity:.85 }
.ft-r { background:#EF4135 }

/* Backward-compat footer classes for old pages */
.footer__grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2rem 1.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08) }
.footer__brand-logo { font-family:var(--fd); font-weight:800; font-size:1.1rem; text-transform:uppercase; color:#fff; margin-bottom:1rem }
.footer__brand-logo .fr { color:var(--red) }
.footer__brand-desc { font-size:.85rem; line-height:1.65; margin-bottom:1.5rem; max-width:280px; color:rgba(255,255,255,.7) }
.footer__contact-info { display:flex; flex-direction:column; gap:.25rem; margin-bottom:1rem }
.footer__social { display:flex; gap:.5rem }
.footer__social-link { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); transition:all var(--speed) var(--ease) }
.footer__social-link:hover { background:var(--red); color:#fff; transform:translateY(-2px) }
.footer__col-title { font-family:var(--fb); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:1.25rem }
.footer__link { display:flex; align-items:center; gap:0; padding:.35rem 0; font-size:.85rem; color:rgba(255,255,255,.62); transition:all var(--speed) var(--ease) }
.footer__link:hover { color:#fff; transform:translateX(4px) }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; gap:1rem; flex-wrap:wrap }
.footer__copy { font-size:.8rem; color:rgba(255,255,255,.4) }
.footer__legal { display:flex; align-items:center; gap:1.5rem }
.footer__legal a { font-size:.8rem; color:rgba(255,255,255,.4) }
.footer__legal a:hover { color:#fff }


/* ============================================================
   7. V6 FLOATING ELEMENTS
   ============================================================ */
.floating-cta { position:fixed; bottom:26px; right:26px; z-index:500; background:var(--red); color:#fff; border-radius:50px; padding:13px 22px; display:flex; align-items:center; gap:9px; box-shadow:0 8px 32px rgba(230,57,70,.45); font-family:var(--fb); font-size:14px; font-weight:700; cursor:pointer; transition:transform .2s, box-shadow .2s, opacity .3s; animation:fp 3s ease-in-out infinite }
.floating-cta:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(230,57,70,.55); animation:none }
@keyframes fp { 0%,100%{box-shadow:0 8px 32px rgba(230,57,70,.45)} 50%{box-shadow:0 8px 40px rgba(230,57,70,.65)} }
.fc-dot { width:8px; height:8px; border-radius:50%; background:#4ade80; flex-shrink:0; animation:pdot 2s ease-in-out infinite }
@keyframes pdot { 0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)} 50%{box-shadow:0 0 0 6px rgba(74,222,128,0)} }

.back-top { position:fixed; bottom:26px; right:10px; z-index:500; width:42px; height:42px; border-radius:50%; background:#e63946; border:none; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s, transform .2s; text-decoration:none; box-shadow:0 4px 16px rgba(230,57,70,.4) }
.back-top.vis { opacity:1; pointer-events:all }
.back-top:hover { transform:translateY(-2px) }


/* ============================================================
   8. V6 COOKIE BANNER
   ============================================================ */
#ck { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(10,10,10,.97); backdrop-filter:blur(12px); padding:18px 48px; z-index:9999; border-top:1px solid rgba(255,255,255,.08) }
#ck-in { max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap }
#ck p { color:rgba(255,255,255,.62); font-size:13px; line-height:1.6; flex:1; min-width:260px }
#ck a { color:var(--red) }
.ck-btns { display:flex; gap:10px; white-space:nowrap }
.ck-acc { background:var(--red); color:#fff; border:none; padding:9px 26px; border-radius:100px; font-family:var(--fb); font-size:13px; font-weight:600; cursor:pointer }
.ck-ref { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28); padding:9px 26px; border-radius:100px; font-family:var(--fb); font-size:13px; font-weight:600; cursor:pointer }

/* Old cookie banner compat */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:var(--z-cookie); background:var(--white); border-top:1px solid var(--border); box-shadow:0 -4px 24px rgba(0,0,0,.08); padding:1.25rem 0; transform:translateY(100%); transition:transform var(--speed-slow) var(--ease) }
.cookie-banner.visible { transform:translateY(0) }


/* ============================================================
   9. BACKWARD-COMPAT — Old page components
   ============================================================ */

/* Nav old style compat (for pages not yet migrated) */
.nav__topbar { background:var(--navy); padding:.35rem 0; font-size:.72rem; color:rgba(255,255,255,.7); position:fixed; top:0; left:0; right:0; z-index:10001; transition:transform .3s ease }
.nav__topbar-inner { display:flex; align-items:center; justify-content:center; gap:1.5rem }
.nav__topbar-phone { display:inline-flex; align-items:center; gap:.35rem; color:rgba(255,255,255,.9); text-decoration:none; font-weight:600 }
.nav__topbar-hours { color:rgba(255,255,255,.5) }
.nav__topbar-email { color:rgba(255,255,255,.7); text-decoration:none }
.nav__topbar-email:hover { color:#fff }
.nav { position:fixed; top:28px; left:0; right:0; z-index:var(--z-header); padding:1.125rem 0; transition:all var(--speed-slow) var(--ease); background:transparent }
.nav::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); transition:all var(--speed-slow) var(--ease); pointer-events:none }
.nav.scrolled { padding:.625rem 0 }
.nav.scrolled::before { background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 0 rgba(0,0,0,.06), var(--shadow-sm) }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; position:relative; z-index:1 }
.nav__logo { font-family:var(--fd); font-weight:800; font-size:clamp(1rem,1.8vw,1.2rem); text-transform:uppercase; color:var(--navy); letter-spacing:-.01em; white-space:nowrap; flex-shrink:0 }
.nav__logo .fr { color:var(--red) }
.nav__links { display:flex; align-items:center; gap:.125rem }
.nav__link { display:flex; align-items:center; gap:.3rem; padding:.5rem .875rem; font-size:.875rem; font-weight:500; color:var(--navy); border-radius:var(--radius-sm); transition:all var(--speed) var(--ease); white-space:nowrap }
.nav__link:hover { color:var(--dark); background:rgba(30,55,89,.04) }
.nav__hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; width:40px; height:40px; gap:5px; cursor:pointer; z-index:calc(var(--z-mobile) + 1); position:relative }
.nav__hamburger span { display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:all var(--speed) var(--ease); transform-origin:center }

/* Trust bar */
.trust-bar { background:var(--light); border-bottom:1px solid var(--border); padding:1rem 0; overflow:hidden }
.trust-bar__inner { display:flex; align-items:center; justify-content:center; gap:clamp(1.5rem,4vw,3rem); flex-wrap:wrap }
.trust-bar__item { display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:500; color:var(--navy); white-space:nowrap }

/* Category cards (old pages) */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem }
.category-card { position:relative; aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; isolation:isolate }
.category-card__img { position:absolute; inset:0; z-index:0 }
.category-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.category-card:hover .category-card__img img { transform:scale(1.08) }
.category-card__overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(17,17,17,.75) 0%, rgba(17,17,17,.2) 40%, rgba(17,17,17,.05) 100%) }
.category-card__content { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:1.5rem }
.category-card__tag { display:inline-block; font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--red); background:rgba(255,255,255,.15); backdrop-filter:blur(4px); padding:.25rem .6rem; border-radius:var(--radius-pill); margin-bottom:.5rem }
.category-card__name { font-family:var(--fd); font-weight:700; font-size:clamp(1.1rem,2vw,1.35rem); color:#fff; margin-bottom:.25rem }
.category-card__count { font-size:.8rem; color:rgba(255,255,255,.65) }
.category-card__arrow { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--red); color:#fff; border-radius:50%; font-size:.9rem; position:absolute; bottom:1.5rem; right:1.5rem; z-index:2; opacity:0; transform:translateY(8px); transition:all var(--speed) var(--ease) }
.category-card:hover .category-card__arrow { opacity:1; transform:translateY(0) }

/* Product cards (old pages) */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.25rem }
.product-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:all var(--speed) var(--ease); position:relative }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent }
.product-card__badge { position:absolute; top:.75rem; left:.75rem; z-index:2; display:inline-flex; align-items:center; gap:.3rem; background:var(--navy); color:#fff; font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:.3rem .65rem; border-radius:var(--radius-pill) }
.product-card__badge--france { background:var(--red) }
.product-card__img { aspect-ratio:1/1; overflow:hidden; background:var(--light) }
.product-card__img img { width:100%; height:100%; object-fit:cover; transition:transform var(--speed-slow) var(--ease) }
.product-card:hover .product-card__img img { transform:scale(1.05) }
.product-card__body { padding:1rem 1.125rem }
.product-card__category { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--blue); margin-bottom:.375rem }
.product-card__title { font-family:var(--fd); font-weight:700; font-size:.95rem; color:var(--dark); line-height:1.35; margin-bottom:.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.product-card__meta { display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.product-card__price { font-weight:700; font-size:.95rem; color:var(--navy) }
.product-card__price-from { font-weight:400; font-size:.75rem; color:var(--gray) }
.product-card__action { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600; color:var(--red); transition:gap var(--speed) var(--ease) }
.product-card:hover .product-card__action { gap:.5rem }

/* Old mega-menu compat classes */
.mega-overlay.visible { opacity:1; pointer-events:all }
.mega-menu.open { transform:translateY(0); opacity:1 }


/* ============================================================
   10. CATALOGUE / CATEGORY PAGES
   ============================================================ */

/* Breadcrumb */
.breadcrumb { font-size:13px; color:var(--gray); padding:20px 0 8px; line-height:1.5 }
.breadcrumb a { color:var(--blue); text-decoration:none; transition:color .15s; text-transform:uppercase }
.breadcrumb a:hover { color:var(--navy) }
.breadcrumb strong { color:var(--navy); font-weight:600; text-transform:uppercase }

/* Category header */
.page-title { font-family:var(--fb); font-size:clamp(28px,3.5vw,42px); font-weight:400; color:var(--navy); margin:12px 0 8px; line-height:1.15 }
/* Pages categorie (h1.cat-title, c100_gen_catalogue_v2.py) : le H1 tombait sur le
   defaut .page-title (28-42px), trop grand pour un titre de categorie en capitales. */
.page-title.cat-title { font-size:22px; line-height:1.15; margin-bottom:2px }
@media (max-width:640px) { .page-title.cat-title { font-size:18px } }
.page-subtitle { display:none }

/* Stats bar */
.stats-bar { display:none }
.stats-bar .stat { display:flex; align-items:center; gap:10px }
.stats-bar .num { font-size:22px; font-weight:700; color:var(--navy); line-height:1 }
.stats-bar .label { font-size:13px; color:var(--gray); font-weight:500; text-transform:uppercase; letter-spacing:.5px }

/* Product grid */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:40px }

/* Product card (catalogue class names) */
.product-card { display:block; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:inherit; transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease) }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--sh2); border-color:transparent }
.product-card .img-wrap { aspect-ratio:1/1; overflow:hidden; background:var(--light); position:relative }
.product-card .img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform var(--speed-slow) var(--ease) }
.product-card:hover .img-wrap img { transform:scale(1.05) }
.product-card .info { padding:14px 16px 18px }
.product-card .ref { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:var(--gray); margin-bottom:6px }
.product-card .name { font-family:var(--fd); font-weight:700; font-size:14px; color:var(--dark); line-height:1.35; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px }
.product-card .price { font-weight:700; font-size:14px; color:var(--red); letter-spacing:-.01em }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0 48px; font-size:14px; font-weight:500 }
.pagination a, .pagination .current { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border-radius:var(--radius-sm); text-decoration:none; transition:all .15s }
.pagination a { color:var(--navy); background:var(--white); border:1px solid var(--border) }
.pagination a:hover { background:var(--light); border-color:var(--navy); color:var(--navy) }
.pagination .current { background:var(--navy); color:#fff; font-weight:700; border:1px solid var(--navy) }
.pagination .dots { color:var(--gray); padding:0 4px; font-size:16px }


/* ============================================================
   11. UTILITIES
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.fade-up.visible { opacity:1; transform:translateY(0) }


/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media(max-width:1200px) {
  .f-grid { grid-template-columns:repeat(3,1fr) }
  .product-grid { grid-template-columns:repeat(3,1fr) }
  .footer-inner { grid-template-columns:1fr 1fr; gap:28px }
  .footer-logo-wrap { grid-column:1 / -1 }
  .mega-grid-4col { grid-template-columns:1fr 1fr; gap:20px }
  .mega-col--wide { grid-column:1 / -1 }
  .mega-col--cta { grid-column:1 / -1 }
}

@media(max-width:768px) {
  .topbar-inner { gap:14px }
  .header-inner { padding:12px 18px }
  .nav-search, .header-contact, .nav-cta { display:none }
  .nav-toggle { display:flex }
  .f-grid { grid-template-columns:1fr 1fr }
  .product-grid { grid-template-columns:repeat(2,1fr); gap:16px }
  .stats-bar { flex-wrap:wrap; gap:16px; padding:14px 20px }
  .f-bottom { flex-direction:column; text-align:center }
  .footer-inner { grid-template-columns:1fr; gap:24px }
  .footer-logo-wrap { grid-column:auto }
  .footer-bottom-inner { flex-direction:column; text-align:center }
  .mega-grid-4col { grid-template-columns:1fr; gap:16px }
  .mega-col--wide { grid-column:auto }
  .mega-col--wide .mega-cat-grid { grid-template-columns:1fr }
  .mega-col--cta { grid-column:auto }
  #ck { padding:14px 18px }

  /* Old nav compat */
  .nav__topbar-email { display:none }
  .nav__topbar-hours { display:none }
}

@media(max-width:480px) {
  .f-grid { grid-template-columns:1fr }
  .topbar-inner { font-size:11px; gap:8px }
}

/* ===== CATALOGUE v2 : categories = tuiles de navigation, produits = cartes (2026-10-13) ===== */
body .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:14px 0 26px}
body .cat-grid .cat-card{display:flex;flex-direction:row;align-items:center;gap:14px;aspect-ratio:auto;padding:10px 18px 10px 10px;background:#F7F3EE;border:1px solid #E7E1D8;border-radius:14px;box-shadow:none;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
body .cat-grid .cat-card::after{content:'\203A';position:static;inset:auto;background:none;margin-left:auto;font-size:30px;line-height:1;color:#E7414D;transition:transform .2s}
body .cat-grid .cat-card .img-wrap{position:static;inset:auto;flex:none;width:68px;height:68px;aspect-ratio:auto;border-radius:10px;background:#fff;overflow:hidden;display:block}
body .cat-grid .cat-card img{width:100%;height:100%;object-fit:contain;padding:4px}
body .cat-grid .cat-card .cat-info{position:static;padding:0;display:block;flex:1}
body .cat-grid .cat-card .cat-info::after{content:none}
body .cat-grid .cat-card .cat-name{color:#14243A;font-size:16px;font-weight:700;text-transform:none;line-height:1.25}
body .cat-grid .cat-card .cat-name::first-letter{text-transform:uppercase}
body .cat-grid .cat-card:hover,body .cat-grid .cat-card:focus-visible{background:#fff;border-color:#E7414D;box-shadow:0 0 0 2px #E7414D;transform:translateY(-3px)}
body .cat-grid .cat-card:hover::after{transform:translateX(4px)}
body .product-grid:has(>.product-card){grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
body .product-grid .product-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E7E1D8;border-radius:16px;box-shadow:none;transition:transform .25s,box-shadow .25s,border-color .25s}
body .product-grid .product-card .img-wrap{aspect-ratio:4/3;background:#fff}
body .product-grid .product-card .img-wrap img{object-fit:contain;padding:5%;color:transparent;font-size:0}
body .product-grid .product-card .info{display:flex;flex-direction:column;flex:1;padding:4px 14px 14px}
body .product-grid .product-card .name{font-size:15px;font-weight:700;color:#14243A;margin-bottom:10px}
body .product-grid .product-card .info::after{content:'Voir la fiche \2192';margin-top:auto;align-self:flex-start;padding:6px 13px;margin-left:-13px;border-radius:40px;font-size:14px;font-weight:600;color:#14243A;transition:background .25s,color .25s,padding .25s}
body .product-grid .product-card:hover,body .product-grid .product-card:focus-visible{border-color:#E7414D;box-shadow:0 0 0 2px #E7414D,0 16px 32px -14px rgba(231,65,77,.45);transform:translateY(-5px)}
body .product-grid .product-card:hover .img-wrap img{transform:scale(1.04)}
body .product-grid .product-card:hover .info::after,body .product-grid .product-card:focus-visible .info::after{background:#E7414D;color:#fff;padding-right:19px}

/* images produit manquantes : encart neutre au lieu du texte alternatif */
body .product-grid .product-card .img-wrap{position:relative}
body .product-grid .product-card .img-wrap img{position:relative;color:transparent;font-size:0}
body .product-grid .product-card .img-wrap img::after{content:'';position:absolute;inset:0;background:#F7F3EE url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><rect width='200' height='150' fill='%23F7F3EE'/><g fill='none' stroke='%23B9B2A6' stroke-width='5' stroke-linejoin='round'><rect x='62' y='42' width='76' height='54' rx='8'/><circle cx='100' cy='69' r='13'/></g><text x='100' y='122' font-family='Calibri,Arial,sans-serif' font-size='13' text-anchor='middle' fill='%23A39B8C'>Photo &#224; venir</text></svg>") center/cover no-repeat}

/* tuiles categories : fond blanc, contour bleu, rouge au survol ; prix sur cartes produit */
body .cat-grid .cat-card{background:#fff;border:1.5px solid #1D3557}
body .cat-grid .cat-card:hover,body .cat-grid .cat-card:focus-visible{background:#fff;border-color:#E7414D;box-shadow:0 0 0 1px #E7414D}
body .product-grid .product-card .vf-pxl{margin:auto 0 6px;font-size:14px;color:#657085}
body .product-grid .product-card .vf-pxl b{font-size:17px;color:#14243A;font-weight:700}
body .product-grid .product-card .info:has(.vf-pxl)::after{margin-top:0}

/* megamenu : la 1re categorie est ouverte par defaut (plus de grand vide blanc) */
@media(min-width:901px){.mm2-cats:not(:hover)>.mm2-cat:first-child .mm2-panel{display:block}.mm2-cats:not(:hover)>.mm2-cat:first-child>a.mm2-catlink{background:#f1faee;border-left-color:#e63946;color:#e63946}}

/* cartes home : un seul cadre (la carte), lien sans contour, prix/lien alignes en bas (priorite sur la surcharge footer) */
body .h8-show .h8-prod .h8-body{padding:10px 14px 12px}
body .h8-show .h8-prod .h8-price{margin:auto 0 4px;padding-top:6px}
body .h8-show .h8-prod .h8-lk{align-self:flex-start;border:0;background:transparent;color:#14243A;border-radius:40px;padding:6px 14px;margin:0 0 0 -14px;font-weight:600}
body .h8-show .h8-prod:hover .h8-lk,body .h8-show .h8-prod:focus-visible .h8-lk{background:#E7414D;color:#fff;border:0;padding:6px 19px 6px 14px}

/* images integrees aux pages de contenu (blog, guides) : texte a cote de l'image */
.page-content .vf-fig{float:left;width:40%;max-width:300px;margin:6px 30px 18px 0}
.page-content .vf-fig img{width:100%;height:auto;display:block;border-radius:14px}
.page-content::after{content:'';display:table;clear:both}
@media(max-width:720px){.page-content .vf-fig{float:none;width:100%;max-width:420px;margin:0 auto 20px}}

/* image integree : texte a cote, jamais de bloc image seul (pages piliers + contenu) */
.vf-fig{float:left;width:38%;max-width:300px;margin:6px 30px 18px 0}
.vf-fig img{width:100%;height:auto;display:block;border-radius:14px}
.content-page::after,.page-content::after{content:'';display:table;clear:both}
@media(max-width:720px){.vf-fig{float:none;width:100%;max-width:420px;margin:0 auto 20px}}