@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap');
    :root {
      --navy: #03153D;
      --ocean: #2A5592;
      --ocean-light: #4d78b8;
      --mist: #ABC9FF;
      --mist-soft: #dbe7ff;
      --primary: #03153D;
      --primary-mid: #2A5592;
      --accent: #2A5592;
      --accent-light: #4d78b8;
      --gold: #2A5592;
      --gold-light: #4d78b8;
      --bg: #f5f9ff;
      --bg-2: #ecf3ff;
      --bg-3: #dfe9fc;
      --light: #f0f5ff;
      --white: #ffffff;
      --text: #03153D;
      --text-muted: #6d84ac;
      --text-soft: #2A5592;
      --gray: #7c93bd;
      --gray-light: #eef3fc;
      --border: #d9e4fb;
      --border-accent: #b9cdf3;
      --danger: #d64545;
      --success: #1f9d63;
      --warning: #c9861a;
      --shadow: 0 10px 36px rgba(3,21,61,0.08);
      --shadow-lg: 0 26px 70px rgba(3,21,61,0.14);
      --glow: 0 0 0 1px rgba(42,85,146,0.15), 0 20px 50px rgba(42,85,146,0.14);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', system-ui, sans-serif; color: var(--text); line-height: 1.6;
      background:
        radial-gradient(ellipse 800px 460px at 88% 0%, rgba(171,201,255,0.5) 0%, transparent 60%),
        radial-gradient(ellipse 700px 420px at 5% 25%, rgba(171,201,255,0.35) 0%, transparent 60%),
        radial-gradient(ellipse 900px 500px at 50% 110%, rgba(171,201,255,0.3) 0%, transparent 55%),
        var(--bg);
      background-attachment: fixed;
    }
    a { text-decoration: none; }
    ::selection { background: rgba(42,85,146,0.25); color: var(--navy); }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg-2); }
    ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--mist), var(--ocean-light)); border-radius: 8px; border: 2px solid var(--bg-2); }

    /* ── NAV ── */
    nav {
      background: rgba(255,255,255,0.75);
      backdrop-filter: blur(18px) saturate(1.3);
      -webkit-backdrop-filter: blur(18px) saturate(1.3);
      padding: 0 2.5rem;
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 1000;
      border-bottom: 1px solid var(--border);
      height: 74px;
    }
    #hero, #prochains-evenements, #catalogue, #evenements, #commande, #contact {
      scroll-margin-top: 90px;
    }
    .logo { display: flex; align-items: center; gap: 14px; }
    .logo-cup { display: flex; align-items: center; }
    .logo-text {
      font-family: 'Inter Tight', 'Inter', sans-serif;
      color: var(--navy); font-size: 1.08rem; font-weight: 700; letter-spacing: 0.1px; line-height: 1.15;
    }
    .logo-sub { color: var(--text-muted); font-size: 0.62rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
    .nav-links { display: flex; gap: 2.2rem; list-style: none; }
    .nav-links a {
      color: var(--text-soft); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px;
      position: relative; padding: 6px 0; transition: color .2s;
    }
    .nav-links a::after {
      content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0%;
      background: linear-gradient(90deg, var(--ocean), var(--mist)); border-radius: 2px;
      transition: width .28s cubic-bezier(0.22,1,0.36,1);
    }
    .nav-links a:hover { color: var(--navy); }
    .nav-links a:hover::after { width: 100%; }
    .lang-btn {
      background: #fff; border: 1px solid var(--border); color: var(--ocean);
      font-weight: 800; font-size: 0.75rem; letter-spacing: 0.5px;
      padding: 0.55rem 0.95rem; border-radius: 99px; cursor: pointer; transition: all .2s;
    }
    .lang-btn:hover { border-color: var(--ocean); color: var(--navy); }
    .cart-btn {
      background: var(--navy);
      color: #fff; border: none; padding: 0.6rem 1.35rem; border-radius: 99px;
      cursor: pointer; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.3px;
      display: flex; align-items: center; gap: 8px; transition: all .25s;
      box-shadow: 0 6px 20px rgba(3,21,61,0.22);
    }
    .cart-btn:hover { background: var(--ocean); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(3,21,61,0.3); }
    .cart-count {
      background: #fff; color: var(--navy); border-radius: 50%;
      width: 20px; height: 20px; display: flex; align-items: center;
      justify-content: center; font-size: 0.68rem; font-weight: 800;
    }

    /* ── HERO ── */
    .hero {
      color: var(--navy); padding: 7rem 2.5rem 5.5rem; text-align: center;
      position: relative; overflow: hidden;
      background:
        radial-gradient(ellipse 620px 420px at 22% 15%, rgba(171,201,255,0.55) 0%, transparent 60%),
        radial-gradient(ellipse 540px 380px at 82% 80%, rgba(171,201,255,0.4) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
      border-bottom: 1px solid var(--border);
    }
    .hero::before {
      content: 'GDM';
      position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%);
      font-family: 'Inter Tight', sans-serif; font-weight: 800;
      font-size: min(28vw, 380px); letter-spacing: -6px;
      color: var(--ocean); opacity: 0.05;
      pointer-events: none; white-space: nowrap; line-height: 1;
    }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.7);
      border: 1px solid var(--border-accent);
      color: var(--ocean);
      padding: 0.4rem 1.1rem; border-radius: 99px; font-size: 0.68rem;
      font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 1.8rem;
      position: relative; z-index: 1;
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.65rem, 3.75vw, 2.93rem); font-weight: 700; line-height: 1.12;
      margin-bottom: 1.3rem; letter-spacing: -0.5px; color: var(--navy);
      position: relative; z-index: 1;
    }
    .hero h1 em {
      font-style: italic;
      background: linear-gradient(100deg, var(--ocean) 0%, var(--mist) 90%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      /* l'italique déborde de sa boîte : sans ce padding, la dernière lettre est rognée par le clip du dégradé */
      padding-right: 0.15em; margin-right: -0.15em;
    }
    .hero p {
      font-size: 1rem; color: var(--text-muted); max-width: 580px;
      margin: 0 auto 2.6rem; font-weight: 300; line-height: 1.8; position: relative; z-index: 1;
    }
    .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
    .btn-primary {
      background: var(--navy);
      color: #fff; padding: 0.95rem 2.3rem;
      border-radius: 99px; font-weight: 700; font-size: 0.88rem; border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px; transition: all .25s; letter-spacing: 0.3px;
      box-shadow: 0 8px 26px rgba(3,21,61,0.22);
    }
    .btn-primary:hover { transform: translateY(-2px); background: var(--ocean); box-shadow: 0 14px 36px rgba(3,21,61,0.3); }
    .btn-gold {
      background: var(--navy);
      color: #fff; padding: 0.95rem 2.3rem;
      border-radius: 99px; font-weight: 700; font-size: 0.88rem;
      border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px; transition: all .25s;
      box-shadow: 0 8px 26px rgba(3,21,61,0.24);
    }
    .btn-gold:hover { transform: translateY(-2px); background: var(--ocean); box-shadow: 0 14px 36px rgba(3,21,61,0.32); }
    .btn-outline {
      background: rgba(255,255,255,0.6); color: var(--ocean); padding: 0.95rem 2.3rem;
      border-radius: 99px; font-weight: 600; font-size: 0.88rem;
      border: 1px solid var(--border-accent); cursor: pointer; transition: all .25s;
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .btn-outline:hover { border-color: var(--ocean); color: var(--navy); background: #fff; transform: translateY(-2px); }
    .hero-stats {
      display: flex; gap: 4rem; justify-content: center; margin-top: 4rem; flex-wrap: wrap;
      border-top: 1px solid var(--border); padding-top: 3rem; position: relative; z-index: 1;
    }
    .stat { text-align: center; }
    .stat-num {
      font-family: 'Inter Tight', 'Playfair Display', serif; font-size: 2.4rem; font-weight: 700;
      background: linear-gradient(120deg, var(--navy) 10%, var(--ocean-light) 90%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .stat-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.6px; margin-top: 4px; }

    /* ── LOGO STRIP ── */
    .logo-strip {
      background: rgba(255,255,255,0.5);
      padding: 2.2rem 2.5rem;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden; position: relative;
    }
    .logo-strip-label {
      text-align: center; font-size: 0.66rem; font-weight: 600; letter-spacing: 2.6px;
      text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.4rem;
    }
    .logo-strip-track-outer {
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
    .logo-strip-track { display: flex; gap: 3.5rem; align-items: center; width: max-content; animation: stripScroll 30s linear infinite; }
    .logo-strip-track:hover { animation-play-state: paused; }
    @keyframes stripScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .logo-strip-item {
      white-space: nowrap; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.5px;
      color: var(--text-soft); opacity: 0.55; transition: all .25s; user-select: none;
      display: flex; align-items: center; gap: 6px;
    }
    .logo-strip-item:hover { opacity: 1; color: var(--navy); }

    /* ── CLIENTS FIDÈLES (carrousel) ── */
    .clients-section {
      background: rgba(255,255,255,0.5); padding: 4.5rem 2.5rem 4rem;
      border-top: 1px solid var(--border); text-align: center; overflow: hidden;
    }
    .clients-section h2 {
      font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 2.6vw, 2.1rem);
      font-weight: 700; color: var(--navy); margin-bottom: 2.4rem; letter-spacing: -0.3px;
    }
    .clients-track-outer {
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
    .clients-track { display: flex; gap: 2.2rem; align-items: center; width: max-content; animation: stripScroll 18s linear infinite; }
    .clients-track:hover { animation-play-state: paused; }
    .client-card {
      display: flex; align-items: center; justify-content: center;
      background: #fff; border: 1px solid var(--border); border-radius: 50%;
      padding: 4px; box-shadow: var(--shadow); flex-shrink: 0;
    }
    .client-logo { width: 92px; height: 92px; border-radius: 50%; object-fit: contain; background: #fff; flex-shrink: 0; }
    .client-monogram {
      width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--navy), var(--ocean)); color: var(--mist);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.6rem; letter-spacing: 0.5px;
    }

    /* ── BENEFITS SECTION ── */
    .benefits-section { background: transparent; padding: 5.5rem 2.5rem; position: relative; }
    .benefits-section .section-center { margin-bottom: 3.5rem; }
    .benefit-row {
      display: flex;
      align-items: center;
      gap: clamp(3rem, 5vw, 5rem);
      width: min(1180px, calc(100% - 2rem));
      margin: 0 auto 5rem;
    }
    .benefit-row:last-child { margin-bottom: 0; }
    .benefit-row.reverse { flex-direction: row-reverse; }
    .benefit-img-wrap {
      flex: 0 1 560px;
      width: 100%;
      aspect-ratio: 8 / 5;
      border-radius: 24px;
      overflow: hidden;
      background: linear-gradient(155deg, #ffffff 0%, var(--bg-2) 100%);
      border: 1px solid rgba(42, 85, 146, 0.12);
      box-shadow:
        0 18px 45px rgba(3, 21, 61, 0.13),
        0 2px 8px rgba(3, 21, 61, 0.06);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .benefit-img-wrap img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      padding: 0;
      border: 0;
    }
    .benefit-text { flex: 1; min-width: 0; }
    .benefit-num {
      font-size: 0.66rem; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; margin-bottom: 0.7rem;
      color: var(--ocean);
      display: inline-block;
    }
    .benefit-h {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.35rem, 2.5vw, 1.8rem);
      font-weight: 600; color: var(--navy); line-height: 1.28; margin-bottom: 0.9rem;
    }
    .benefit-h em { font-style: italic; color: var(--ocean); }
    .benefit-p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.8; margin-bottom: 1.2rem; font-weight: 300; }
    .benefit-p strong { color: var(--navy); font-weight: 600; }
    .benefit-badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.74rem; font-weight: 600;
      background: var(--bg-2); color: var(--ocean);
      padding: 6px 16px; border-radius: 99px;
      border: 1px solid var(--border-accent);
      letter-spacing: 0.4px;
    }
    .benefit-divider { max-width: 1000px; margin: 0 auto 4rem; border: none; border-top: 1px solid var(--border); }
    @media (max-width: 800px) {
      .benefit-row,
      .benefit-row.reverse {
        flex-direction: column;
        gap: 2rem;
        width: min(100%, 680px);
        margin-bottom: 4rem;
      }
      .benefit-img-wrap {
        flex: none;
        width: 100%;
        max-width: 680px;
        aspect-ratio: 8 / 5;
      }
      .benefit-text { width: 100%; }
    }

    /* ── STEPS ── */
    .section { padding: 5.5rem 2.5rem; background: transparent; }
    .section-center { text-align: center; }
    .section-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.7);
      border: 1px solid var(--border-accent);
      color: var(--ocean);
      font-size: 0.66rem; font-weight: 700; letter-spacing: 2.4px;
      text-transform: uppercase; margin-bottom: 1.2rem;
      padding: 0.35rem 1rem; border-radius: 99px;
      box-shadow: var(--shadow);
    }
    h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 700;
      margin-bottom: 0.6rem; letter-spacing: -0.3px; color: var(--navy);
    }
    .section-sub { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 3rem; font-weight: 300; max-width: 620px; line-height: 1.75; }
    .section-center .section-sub { margin-left: auto; margin-right: auto; }
    .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem; max-width: 1000px; margin: 0 auto; }
    .step {
      text-align: center; padding: 2.4rem 1.5rem;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 20px;
      transition: all .3s cubic-bezier(0.22,1,0.36,1);
      position: relative; overflow: hidden;
      box-shadow: var(--shadow);
    }
    .step:hover { transform: translateY(-6px); border-color: var(--border-accent); box-shadow: var(--shadow-lg); }
    .step-num {
      width: 46px; height: 46px;
      background: var(--navy);
      border-radius: 14px; display: flex; align-items: center; justify-content: center;
      font-family: 'Inter Tight', sans-serif;
      font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 auto 1.2rem;
      box-shadow: 0 8px 22px rgba(3,21,61,0.28);
    }
    .step h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: 0.2px; color: var(--navy); }
    .step p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.65; font-weight: 300; }

    /* ── CARROUSEL ÉVÉNEMENTS (bande sombre pour rythmer) ── */
    .carousel-section {
      background: linear-gradient(155deg, var(--navy) 0%, #0c2657 55%, var(--ocean) 100%);
      padding: 4rem 2.5rem; overflow: hidden;
    }
    .carousel-section .section-tag { color: var(--mist); border-color: rgba(171,201,255,0.35); background: rgba(171,201,255,0.1); box-shadow: none; }
    .carousel-section h2 { color: var(--white); }
    .carousel-wrap { position: relative; max-width: 680px; margin: 1.8rem auto 0; }
    .carousel-track-outer { overflow: hidden; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid rgba(171,201,255,0.25); }
    .carousel-track { display: flex; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); }
    .carousel-slide {
      min-width: 100%; max-width: 100%; flex: 1 0 100%; position: relative; height: 240px;
      background: var(--primary-mid); overflow: hidden; cursor: pointer;
    }
    .carousel-slide img {
      position: absolute; inset: 0;
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.72;
      transition: opacity 0.45s ease, transform 0.45s ease;
    }
    .carousel-slide:hover img { opacity: 0.88; transform: scale(1.035); }
    .carousel-slide-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #0c2657 0%, var(--navy) 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 4rem; opacity: 0.35;
    }
    .carousel-overlay {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 2rem 2.5rem;
      background: linear-gradient(to top, rgba(3,21,61,0.95) 0%, rgba(3,21,61,0.4) 60%, transparent 100%);
    }
    .carousel-overlay-date { color: var(--mist); font-size: 0.74rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.4rem; }
    .carousel-overlay-name { color: var(--white); font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.2; }
    .carousel-overlay-place { color: rgba(255,255,255,0.55); font-size: 0.82rem; margin-top: 0.4rem; }
    .carousel-btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.12); border: 1px solid rgba(171,201,255,0.3);
      color: var(--white); width: 46px; height: 46px; border-radius: 50%;
      font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all .25s; z-index: 10;
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .carousel-btn:hover { background: rgba(255,255,255,0.25); }
    .carousel-btn-prev { left: -23px; }
    .carousel-btn-next { right: -23px; }
    .carousel-dots { display: flex; gap: 7px; justify-content: center; margin-top: 1.6rem; }
    .carousel-dot {
      width: 8px; height: 8px; border-radius: 99px;
      background: rgba(255,255,255,0.25); border: none; cursor: pointer; transition: all .3s; padding: 0;
    }
    .carousel-dot.active { background: var(--mist); width: 26px; }
    .carousel-empty { color: rgba(255,255,255,0.4); text-align: center; padding: 3rem; font-size: 0.9rem; }

    /* ── CATALOGUE ── */
    .catalog-section { background: transparent; padding: 5.5rem 2.5rem; }
    .catalog-container { max-width: 1280px; margin: 0 auto; }
    .filter-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; justify-content: center; }
    .filter-tab {
      padding: 0.5rem 1.15rem; border-radius: 99px; border: 1px solid var(--border);
      background: #fff; color: var(--text-soft); cursor: pointer; font-size: 0.78rem;
      font-weight: 500; letter-spacing: 0.3px; transition: all .22s;
    }
    .filter-tab:hover { border-color: var(--ocean); color: var(--navy); }
    .filter-tab.active {
      background: var(--navy);
      border-color: transparent; color: var(--white);
      box-shadow: 0 6px 18px rgba(3,21,61,0.28);
    }
    .filter-tab-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; border-radius: 4px; margin-right: 4px; }
    .filter-tab.active .filter-tab-icon { filter: brightness(0) invert(1); }

    .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 1.5rem; align-items: start; }
    .product-card {
      background: #fff;
      border: 1px solid var(--border); border-radius: 20px;
      overflow: hidden; transition: all .3s cubic-bezier(0.22,1,0.36,1); position: relative;
      box-shadow: var(--shadow);
    }
    .product-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-lg); transform: translateY(-6px); }
    .product-card.hidden { display: none; }
    .product-img {
      height: 230px;
      padding: 18px;
      display: flex; align-items: center; justify-content: center;
      font-size: 3.8rem;
      overflow: hidden;
      background: linear-gradient(150deg, #f8fbff 0%, #e8f1ff 100%);
      position: relative;
    }
    .product-img img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      border-radius: 0;
      cursor: zoom-in;
      transition: transform .35s ease;
    }
    .product-card:hover .product-img img { transform: scale(1.08); }
    @media (max-width: 700px) {
      .product-img { height: 210px; padding: 16px; }
    }
    .product-badge {
      position: absolute; top: 12px; left: 12px;
      padding: 0.22rem 0.65rem; border-radius: 99px; font-size: 0.62rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.9px;
      box-shadow: 0 3px 12px rgba(3,21,61,0.15);
    }
    .badge-free { background: #d3f5e4; color: #0f6b41; }
    .badge-popular { background: var(--navy); color: #fff; }
    .badge-pack { background: var(--ocean); color: var(--white); }
    .product-body { padding: 1.3rem 1.4rem; }
    .product-cat { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ocean); margin-bottom: 0.4rem; }
    .product-ref { font-size: 0.67rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.4rem; }
    .product-name { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--navy); line-height: 1.35; }
    .product-desc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1.1rem; line-height: 1.6; font-weight: 300; }
    .product-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
    .product-price { font-size: 1.1rem; font-weight: 700; color: var(--navy); }
    .product-price span { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }
    .price-free {
      font-size: 0.72rem; font-weight: 800; color: #0f6b41; background: #d3f5e4;
      padding: 0.22rem 0.6rem; border-radius: 99px; letter-spacing: 0.3px;
    }
    .price-block { display: flex; flex-direction: column; gap: 2px; }
    .price-row { display: flex; align-items: baseline; gap: 5px; transition: opacity .25s; }
    .price-zone-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); min-width: 60px; }
    .price-amount { font-size: 1rem; font-weight: 700; color: var(--navy); font-family: 'Inter Tight', sans-serif; }
    .price-amount.province { color: var(--ocean); }
    .price-ht { font-size: 0.65rem; color: var(--text-muted); font-weight: 400; }

    /* ── BOUTON INFO SUR CARTE ── */
    .info-btn {
      position: absolute; top: 10px; right: 10px;
      width: 30px; height: 30px; border-radius: 50%;
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--border-accent);
      color: var(--ocean); font-size: 0.8rem; font-weight: 800;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all .2s; z-index: 2;
      box-shadow: 0 2px 10px rgba(3,21,61,0.14);
      font-style: italic; font-family: Georgia, serif; line-height: 1;
    }
    .info-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: scale(1.12); }

    /* ── FICHE TECHNIQUE MODAL ── */
    .fiche-overlay {
      position: fixed; inset: 0; background: rgba(3,21,61,0.45);
      z-index: 5000; display: none; align-items: center; justify-content: center;
      padding: 1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .fiche-overlay.open { display: flex; }

    /* ── LIGHTBOX IMAGE PLEIN ÉCRAN ── */
    .img-lightbox {
      position: fixed; inset: 0; background: rgba(3,21,61,0.86);
      z-index: 6000; display: none; align-items: center; justify-content: center;
      padding: 2rem; cursor: zoom-out;
    }
    .img-lightbox.open { display: flex; }
    .img-lightbox img {
      max-width: min(92vw, 1100px); max-height: 90vh;
      width: auto; height: auto;
      object-fit: contain; border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      cursor: default;
    }
    .img-lightbox-close {
      position: absolute; top: 1.2rem; right: 1.5rem;
      width: 42px; height: 42px; border-radius: 50%;
      background: rgba(255,255,255,0.12); color: #fff;
      border: 1px solid rgba(255,255,255,0.25);
      font-size: 1.2rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .2s;
    }
    .img-lightbox-close:hover { background: rgba(255,255,255,0.22); }
    .fiche-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 24px;
      width: 100%; max-width: 580px;
      max-height: 90vh; overflow-y: auto;
      box-shadow: var(--shadow-lg);
      animation: ficheIn .32s cubic-bezier(0.22,1,0.36,1);
    }
    @keyframes ficheIn { from { transform: translateY(24px) scale(0.96); opacity:0; } to { transform: translateY(0) scale(1); opacity:1; } }
    .fiche-header {
      background: var(--navy);
      padding: 1.7rem 1.9rem 1.3rem;
      position: relative; border-radius: 24px 24px 0 0;
    }
    .fiche-close {
      position: absolute; top: 1rem; right: 1rem;
      background: rgba(255,255,255,0.12); border: none; color: #fff;
      width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
      font-size: 1rem; display: flex; align-items: center; justify-content: center;
      transition: all .2s;
    }
    .fiche-close:hover { background: rgba(255,255,255,0.24); }
    .fiche-cat   { font-size: 0.63rem; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--mist); margin-bottom: 0.35rem; }
    .fiche-name  { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 0.3rem; }
    .fiche-ref   { font-size: 0.72rem; color: rgba(255,255,255,0.55); font-weight: 500; }
    .fiche-img-wrap {
      min-height: 300px;
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem 2rem;
      background: var(--bg);
    }
    .fiche-img-wrap img {
      display: block;
      width: 100%;
      max-width: 440px;
      height: 270px;
      max-height: none;
      object-fit: contain;
      object-position: center;
      border-radius: 12px;
    }
    @media (max-width: 600px) {
      .fiche-img-wrap { min-height: 240px; padding: 1rem; }
      .fiche-img-wrap img { height: 220px; }
    }
    .fiche-img-placeholder { font-size: 5rem; opacity: 0.3; padding: 1rem 0; }
    .fiche-body  { padding: 1.5rem 1.9rem 1.8rem; }
    .fiche-section-title {
      font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 2px; color: var(--ocean);
      margin: 1.3rem 0 0.7rem; padding-bottom: 0.45rem;
      border-bottom: 1px solid var(--border);
    }
    .fiche-section-title:first-child { margin-top: 0; }
    .fiche-desc  { font-size: 0.88rem; color: var(--text-soft); line-height: 1.8; font-weight: 300; }
    .fiche-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.2rem; }
    .fiche-spec  {
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: 12px; padding: 0.65rem 0.95rem;
    }
    .fiche-spec-key   { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 2px; }
    .fiche-spec-value { font-size: 0.86rem; font-weight: 600; color: var(--navy); }
    .fiche-price-row  {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem;
    }
    .fiche-price-row:last-child { border-bottom: none; }
    .fiche-price-zone { font-weight: 600; color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
    .fiche-price-val  { font-size: 1.15rem; font-weight: 800; color: var(--navy); font-family: 'Inter Tight', sans-serif; }
    .fiche-price-ht   { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); margin-left: 2px; }
    .fiche-badge-free {
      display: inline-block; background: #d3f5e4; color: #0f6b41;
      font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.75rem; border-radius: 99px; margin-top: 0.4rem;
    }

    /* ── Prix actif selon zone ── */
    body[data-zone="paris"]    .price-row-province { opacity: 0.3; }
    body[data-zone="province"] .price-row-paris    { opacity: 0.3; }
    body[data-zone="province"] .price-row-province .price-amount { font-size: 1.15rem; color: var(--navy); }
    body[data-zone="paris"]    .price-row-paris    .price-amount { font-size: 1.15rem; }

    /* ── RECHARGES CONSOMMABLES ── */
    .recharges-section { margin-top: 0.8rem; border-top: 1px dashed var(--border-accent); padding-top: 0.7rem; }
    .recharges-toggle {
      display: flex; align-items: center; gap: 6px;
      background: none; border: none; cursor: pointer;
      font-size: 0.78rem; font-weight: 600; color: var(--ocean);
      padding: 0; width: 100%; text-align: left; transition: color .2s;
    }
    .recharges-toggle:hover { color: var(--navy); }
    .recharges-toggle .toggle-arrow { transition: transform .2s; display: inline-block; }
    .recharges-toggle.open .toggle-arrow { transform: rotate(90deg); }
    .recharges-list { display: none; margin-top: 0.6rem; }
    .recharges-list.open { display: block; }
    .recharge-item {
      display: flex; flex-direction: column; gap: 0.4rem;
      padding: 0.6rem 0.75rem; border-radius: 12px;
      background: var(--bg-2); margin-bottom: 0.4rem;
      border-left: 3px solid var(--ocean);
    }
    .recharge-top { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
    .recharge-name { font-size: 0.8rem; font-weight: 700; color: var(--navy); }
    .recharge-ref  { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
    .recharge-bottom { display: flex; flex-direction: column; gap: 0.5rem; }
    .recharge-price { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); display: flex; gap: 1rem; flex-wrap: wrap; }
    .recharge-price-paris { color: var(--text-soft); }
    .recharge-price-province { color: var(--ocean); }
    .recharge-controls { display: flex; align-items: center; gap: 4px; }
    .recharge-qty-btn {
      width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border);
      background: #fff; cursor: pointer; font-size: 0.85rem;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s; color: var(--navy); padding: 0;
    }
    .recharge-qty-btn:hover { border-color: var(--ocean); color: var(--ocean); }
    .recharge-qty-input {
      width: 38px; text-align: center; border: 1px solid var(--border);
      border-radius: 8px; font-size: 0.82rem; padding: 2px 0;
      background: #fff; color: var(--navy); height: 26px;
    }
    .recharge-add-btn {
      background: var(--ocean); color: var(--white); border: none; border-radius: 8px;
      padding: 4px 12px; cursor: pointer; font-size: 0.75rem; font-weight: 700;
      transition: all .15s; white-space: nowrap; height: 26px;
    }
    .recharge-add-btn:hover { background: var(--navy); }
    .recharge-add-btn.added { background: #1f9d63; }
    .qty-control { display: flex; align-items: center; gap: 5px; }
    .qty-btn {
      width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border);
      background: var(--bg-2); cursor: pointer; font-size: 1rem; font-weight: 600;
      display: flex; align-items: center; justify-content: center; transition: all .15s; color: var(--navy);
    }
    .qty-btn:hover { border-color: var(--ocean); color: var(--ocean); background: var(--bg-3); }
    .qty-input {
      width: 36px; text-align: center; border: 1px solid var(--border); border-radius: 9px;
      font-size: 0.85rem; font-weight: 600; padding: 3px;
      color: var(--navy); background: #fff;
    }
    .add-btn {
      background: var(--navy); color: var(--white); border: none; padding: 0.5rem 1rem;
      border-radius: 99px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.3px;
      cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 4px; white-space: nowrap;
      box-shadow: 0 4px 14px rgba(3,21,61,0.22);
    }
    .add-btn:hover { transform: translateY(-1px); background: var(--ocean); box-shadow: 0 8px 20px rgba(3,21,61,0.3); }
    .add-btn.added { background: #1f9d63; box-shadow: 0 4px 14px rgba(31,157,99,0.3); }

    /* ── PROVINCE BANNER ── */
    .province-banner {
      background: #fdf6e8; border: 1px solid rgba(201,134,26,0.3);
      border-left: 3px solid var(--warning);
      border-radius: 12px;
      padding: 1rem 1.5rem; display: none; gap: 12px; align-items: flex-start;
      margin-top: 1.5rem;
    }
    .province-banner.show { display: flex; }
    .province-banner-icon { font-size: 1.3rem; flex-shrink: 0; }
    .province-banner h4 { font-size: 0.85rem; font-weight: 700; color: #92400e; margin-bottom: 0.2rem; }
    .province-banner p { font-size: 0.8rem; color: #78350f; line-height: 1.6; }

    /* ── EVENTS ── */
    .event-section { padding: 5.5rem 2.5rem; background: transparent; border-top: 1px solid var(--border); }
    .event-container { max-width: 920px; margin: 0 auto; }
    .zone-selector {
      background: #fff; border: 1px solid var(--border); border-radius: 20px;
      padding: 1.5rem 1.7rem; margin-bottom: 1.8rem;
      box-shadow: var(--shadow);
    }
    .zone-selector h4 { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; margin-bottom: 1rem; color: var(--ocean); }
    .zone-options { display: flex; gap: 1rem; flex-wrap: wrap; }
    .zone-option {
      flex: 1; min-width: 180px; padding: 1rem 1.25rem; border: 1px solid var(--border);
      border-radius: 14px; cursor: pointer; transition: all .22s; background: var(--bg);
      display: flex; align-items: center; gap: 10px;
    }
    .zone-option:hover { border-color: var(--border-accent); background: #fff; }
    .zone-option.active {
      border-color: var(--ocean); background: var(--bg-2);
      box-shadow: 0 0 0 1px var(--ocean);
    }
    .zone-option input[type="radio"] { accent-color: var(--ocean); width: 15px; height: 15px; flex-shrink: 0; }
    .zone-option-label { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
    .zone-option-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

    .event-toggle { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
    .event-toggle-btn {
      padding: 0.75rem 1.5rem; border: none; background: none; cursor: pointer;
      font-weight: 500; font-size: 0.85rem; color: var(--text-muted); transition: all .2s;
      border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
    }
    .event-toggle-btn:hover { color: var(--text-soft); }
    .event-toggle-btn.active { color: var(--navy); font-weight: 700; border-bottom-color: var(--ocean); }
    .event-panel { display: none; }
    .event-panel.active { display: block; }
    /* ── BARRE DE RECHERCHE ÉVÉNEMENTS ── */
    .event-search-bar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .event-search-input-wrap { position: relative; flex: 1; min-width: 200px; }
    .event-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; pointer-events: none; opacity: 0.6; }
    .event-search-input-wrap .event-search-input, .event-search-input {
      width: 100%; padding: 0.6rem 2.2rem 0.6rem 2.4rem;
      border: 1px solid var(--border); border-radius: 99px;
      font-size: 0.88rem; background: #fff;
      color: var(--navy); outline: none; transition: all .2s;
    }
    .event-search-input-wrap .event-search-input::placeholder, .event-search-input::placeholder { color: var(--text-muted); }
    .event-search-input-wrap .event-search-input:focus, .event-search-input:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(42,85,146,0.12); }
    .event-search-clear {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; color: var(--text-muted);
      font-size: 0.8rem; padding: 2px 4px; line-height: 1; display: none;
    }
    .event-search-clear:hover { color: var(--navy); }
    .event-search-clear.visible { display: block; }
    .event-filter-month {
      padding: 0.55rem 0.7rem; border: 1px solid var(--border);
      border-radius: 10px; font-size: 0.82rem; color: var(--navy);
      background: #fff; outline: none; cursor: pointer;
      transition: border-color .2s; font-family: 'Inter', system-ui, sans-serif;
    }
    .event-filter-month:focus { border-color: var(--ocean); }
    .event-filter-reset {
      padding: 0.55rem 1rem; border: 1px solid var(--border);
      border-radius: 99px; font-size: 0.78rem; font-weight: 500;
      color: var(--text-soft); background: #fff; cursor: pointer;
      transition: all .2s; white-space: nowrap;
    }
    .event-filter-reset:hover { border-color: var(--ocean); color: var(--navy); }
    .event-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 1rem; margin-bottom: 0.75rem; }
    .event-card {
      border: 1px solid var(--border); border-radius: 16px; padding: 1.15rem 1.25rem;
      cursor: pointer; transition: all .25s cubic-bezier(0.22,1,0.36,1); background: #fff; position: relative;
      overflow: hidden; box-shadow: var(--shadow);
      text-align: left;
    }
    .event-card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
    .event-card.selected {
      border-color: var(--ocean); background: var(--bg-2);
      box-shadow: 0 0 0 1px var(--ocean);
    }
    .event-card.selected::after {
      content: '✓'; position: absolute; right: 10px; top: 10px;
      background: var(--navy); color: var(--white); width: 20px; height: 20px;
      border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem;
    }
    .event-name { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.4rem; line-height: 1.35; color: var(--navy); }
    .event-date { font-size: 0.72rem; color: var(--ocean); font-weight: 600; letter-spacing: 0.2px; margin-bottom: 0.2rem; }
    .event-place { font-size: 0.72rem; color: var(--text-muted); }

    .libre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group-plain { display: flex; flex-direction: column; gap: 0.35rem; }
    .form-group-plain.full { grid-column: 1/-1; }
    .label-plain { font-size: 0.8rem; font-weight: 600; color: var(--text-soft); }
    .libre-grid .input-plain, .input-plain {
      padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 12px;
      background: #fff; color: var(--navy); font-size: 0.88rem; font-family: inherit;
      outline: none; transition: all .2s;
    }
    .libre-grid .input-plain::placeholder, .input-plain::placeholder { color: var(--text-muted); }
    .libre-grid .input-plain:focus, .input-plain:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(42,85,146,0.12); }

    /* ── ORDER FORM (bande sombre) ── */
    .form-section {
      background: linear-gradient(155deg, var(--navy) 0%, #0c2657 55%, var(--ocean) 100%);
      padding: 5.5rem 2.5rem; color: var(--white);
    }
    .form-container { max-width: 700px; margin: 0 auto; }
    .form-section .section-tag { color: var(--mist); border-color: rgba(171,201,255,0.3); background: rgba(171,201,255,0.08); box-shadow: none; }
    .form-section h2 { color: var(--white); }
    .form-section .section-sub { color: rgba(255,255,255,0.55); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
    .form-group { display: flex; flex-direction: column; gap: 0.45rem; }
    .form-group.full { grid-column: 1/-1; }
    label { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 1.2px; text-transform: uppercase; }
    input[type=text], input[type=email], input[type=tel], select, textarea {
      padding: 0.8rem 1.05rem; border: 1px solid rgba(171,201,255,0.2);
      border-radius: 12px; background: rgba(255,255,255,0.06); color: var(--white);
      font-size: 0.88rem; font-family: 'Inter', inherit; outline: none; transition: all .22s;
    }
    input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.35); }
    input:focus, select:focus, textarea:focus {
      border-color: var(--mist); background: rgba(255,255,255,0.1);
      box-shadow: 0 0 0 3px rgba(171,201,255,0.15);
    }
    select option { background: var(--navy); color: var(--white); }
    textarea { resize: vertical; min-height: 90px; }
    .form-recap {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 18px; padding: 1.4rem; margin: 1.9rem 0;
    }
    .form-recap h4 { font-size: 0.64rem; font-weight: 700; color: var(--mist); margin-bottom: 0.9rem; text-transform: uppercase; letter-spacing: 2px; }
    .recap-item {
      display: flex; justify-content: space-between; font-size: 0.82rem;
      padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
    }
    .recap-item:last-child { border-bottom: none; }
    .recap-total {
      display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem;
      margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid rgba(171,201,255,0.25); color: var(--mist);
      font-family: 'Inter Tight', sans-serif;
    }
    .province-recap-note {
      border-left: 2px solid rgba(245,180,11,0.5);
      padding: 0.6rem 1rem; font-size: 0.78rem; color: #ffd88a;
      margin-top: 0.75rem; display: none;
      background: rgba(245,180,11,0.08); border-radius: 0 8px 8px 0;
    }
    .province-recap-note.show { display: block; }
    .submit-btn {
      width: 100%; padding: 1.05rem;
      background: #fff;
      color: var(--navy);
      border: none; border-radius: 99px; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.5px;
      cursor: pointer; transition: all .25s; display: flex; align-items: center; justify-content: center; gap: 10px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    }
    .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,0.28); }
    .submit-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
    .form-notice { font-size: 0.72rem; color: rgba(255,255,255,0.45); text-align: center; margin-top: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 5px; }

    /* ── CGV BOX ── */
    .cgv-box {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 1.05rem 1.3rem; margin-bottom: 1.5rem; font-size: 0.76rem;
      color: rgba(255,255,255,0.55); line-height: 1.75;
    }
    .cgv-box strong { color: rgba(255,255,255,0.85); }

    /* ── CART ── */
    .cart-overlay { position: fixed; inset: 0; background: rgba(3,21,61,0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1990; opacity: 0; pointer-events: none; transition: opacity .3s; }
    .cart-overlay.open { opacity: 1; pointer-events: all; }
    .cart-sidebar {
      position: fixed; top: 0; right: -480px; width: min(480px, 100vw); height: 100vh;
      background: #fff;
      z-index: 2000; display: flex; flex-direction: column;
      transition: right .35s cubic-bezier(0.22,1,0.36,1);
      box-shadow: -24px 0 70px rgba(3,21,61,0.2);
    }
    .cart-sidebar.open { right: 0; }
    .cart-header {
      padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      background: var(--navy); color: var(--white);
    }
    .cart-header h3 { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.5px; }
    .close-btn {
      background: rgba(255,255,255,0.12); border: none; color: var(--white);
      width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 1rem;
      display: flex; align-items: center; justify-content: center; transition: all .2s;
    }
    .close-btn:hover { background: rgba(255,255,255,0.24); }
    .cart-items { flex: 1; overflow-y: auto; padding: 1.2rem; }
    .cart-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
    .cart-empty .empty-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; opacity: 0.4; }
    .cart-item { display: flex; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); align-items: center; }
    .cart-item:last-child { border-bottom: none; }
    .cart-item-icon { font-size: 1.6rem; width: 40px; text-align: center; flex-shrink: 0; }
    .cart-item-info { flex: 1; min-width: 0; }
    .cart-item-name { font-weight: 600; font-size: 0.85rem; line-height: 1.3; color: var(--navy); }
    .cart-item-ref { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
    .cart-item-price { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
    .remove-item { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; padding: 4px; border-radius: 6px; transition: color .15s; flex-shrink: 0; }
    .remove-item:hover { color: var(--danger); }
    .cart-footer { padding: 1.3rem 1.6rem; border-top: 1px solid var(--border); background: var(--bg); }
    .cart-total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 700; margin-bottom: 0.6rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); color: var(--navy); font-family: 'Inter Tight', sans-serif; }
    .cart-note { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.6; }

    /* ── MODAL ── */
    .modal-overlay { position: fixed; inset: 0; background: rgba(3,21,61,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 1rem; }
    .modal-overlay.open { display: flex; }
    .modal {
      background: #fff;
      border-radius: 24px; padding: 3rem 2.5rem; max-width: 460px; width: 100%; text-align: center;
      animation: modalIn .3s cubic-bezier(0.22,1,0.36,1);
      box-shadow: var(--shadow-lg);
    }
    @keyframes modalIn { from { transform: translateY(24px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
    .modal-icon { font-size: 3rem; margin-bottom: 1rem; }
    .stand-modal-event {
      display: inline-block; background: var(--mist-soft); color: var(--navy);
      font-weight: 700; font-size: 0.85rem; padding: 0.45rem 1.2rem;
      border-radius: 99px; margin-bottom: 1.1rem; border: 1px solid var(--border-accent);
    }
    .modal h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--navy); }
    .modal p { color: var(--text-soft); line-height: 1.75; margin-bottom: 1.8rem; font-size: 0.88rem; font-weight: 300; }
    .modal p strong { color: var(--ocean); }

    /* ── FOOTER ── */
    footer {
      background: var(--navy);
      color: rgba(255,255,255,0.6); padding: 4.5rem 2.5rem 2rem;
    }
    .footer-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; margin-bottom: 3rem; }
    .footer-logo { font-family: 'Inter Tight', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 0.6rem; letter-spacing: 0.2px; }
    .footer-logo span { color: var(--mist); }
    .footer-tagline { font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.75; margin-bottom: 1.2rem; font-weight: 300; }
    .footer-contact a { color: rgba(255,255,255,0.65); display: block; font-size: 0.8rem; margin-bottom: 0.45rem; transition: all .2s; }
    .footer-contact a:hover { color: #fff; transform: translateX(3px); }
    .footer-col h4 { font-size: 0.64rem; font-weight: 700; color: var(--mist); margin-bottom: 0.9rem; text-transform: uppercase; letter-spacing: 2px; }
    .footer-col p { font-size: 0.78rem; line-height: 1.75; font-weight: 300; }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem; text-align: center; font-size: 0.7rem; color: rgba(255,255,255,0.35); }

    /* ── TOAST ── */
    .toast {
      position: fixed; bottom: 2rem; left: 50%;
      transform: translateX(-50%) translateY(90px);
      background: var(--navy);
      color: var(--white); padding: 0.75rem 1.5rem;
      border-radius: 99px; font-size: 0.82rem; font-weight: 500; z-index: 4000;
      transition: transform .3s cubic-bezier(0.22,1,0.36,1); white-space: nowrap; display: flex; align-items: center; gap: 8px;
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255,255,255,0.45);
    }
    .toast.show { transform: translateX(-50%) translateY(0); }
    .toast.clickable { cursor: pointer; }
    .toast.clickable u { font-weight: 700; text-underline-offset: 3px; }

    /* ── MOBILE NAV TOGGLE ── */
    .nav-toggle {
      display: none; background: none; border: none; cursor: pointer;
      width: 40px; height: 40px; flex-shrink: 0;
      align-items: center; justify-content: center; gap: 5px; flex-direction: column;
    }
    .nav-toggle span {
      display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px;
      transition: transform .25s, opacity .25s;
    }
    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 640px) {
      .nav-toggle { display: flex; }
      .nav-links {
        display: flex; flex-direction: column; gap: 0;
        position: fixed; top: 74px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        max-height: 0; overflow: hidden;
        transition: max-height .3s ease;
        z-index: 999;
      }
      .nav-links.open { max-height: 320px; }
      .nav-links li { width: 100%; }
      .nav-links a { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
      .nav-links a::after { display: none; }
      .filter-tabs {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
        padding-bottom: 0.6rem; margin-left: -1.5rem; margin-right: -1.5rem;
        padding-left: 1.5rem; padding-right: 1.5rem;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
      }
      .filter-tabs::-webkit-scrollbar { display: none; }
      .filter-tab { flex-shrink: 0; }
      .form-grid { grid-template-columns: 1fr; }
      .libre-grid { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr; }
      .hero { padding: 3.5rem 1.5rem; }
      .hero-stats { gap: 2rem; }
    }

    /* ── SCROLL PROGRESS BAR ── */
    #scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 0%;
      background: linear-gradient(90deg, var(--ocean), var(--mist));
      z-index: 9999; transition: width .1s linear;
    }

    /* ── SCROLL UP (SECTION BY SECTION) BUTTON ── */
    #scroll-up-btn {
      position: fixed; bottom: 2rem; right: 2rem;
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--navy); color: #fff; border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: var(--shadow-lg); z-index: 1500;
      opacity: 0; pointer-events: none; transform: translateY(12px);
      transition: opacity .25s, transform .25s, background .2s;
    }
    #scroll-up-btn.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
    #scroll-up-btn:hover { background: var(--ocean); }
    #scroll-up-btn svg { width: 22px; height: 22px; }
    @media (max-width: 700px) {
      #scroll-up-btn { bottom: 1.2rem; right: 1.2rem; width: 46px; height: 46px; }
    }

    /* ── NAV SCROLL STATE ── */
    nav { transition: box-shadow .3s, background .3s; }
    nav.scrolled {
      box-shadow: var(--shadow);
      background: rgba(255,255,255,0.92);
    }

    /* ── SCROLL REVEAL ── */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .7s cubic-bezier(0.22,1,0.36,1), transform .7s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }


    /* Texte non sélectionnable (les champs de saisie restent utilisables) */
    body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
    input, textarea, select { -webkit-user-select: text; -moz-user-select: text; user-select: text; }