:root{
    --bg:#f5f2ea;--paper:#f7eedd;--paper-2:#ece0c8;--ink:#241a12;--muted:#766452;
    --accent:#b8442e;--accent-ink:#9a3522;--ocre:#c2873a;
    --line:rgba(36,26,18,.16);--line-strong:rgba(36,26,18,.3);--shadow:0 26px 60px -34px rgba(36,26,18,.5);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* stop iOS Safari from auto-inflating text (blows up the ribbon/eyebrow on phones) */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{background:var(--bg);color:var(--ink);font-family:"Outfit",system-ui,sans-serif;font-size:17px;line-height:1.65;
    -webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .wrap{max-width:1240px;margin:0 auto;padding:0 28px}
  h1,h2,h3,h4,h5,h6{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.02}
  a{color:inherit;text-decoration:none}
  .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);
    display:inline-flex;align-items:center;gap:.7em}
  .eyebrow::before,.eyebrow::after{content:"";width:22px;height:2px;background:var(--accent)}

  /* ROUNDED CTAs */
  .btn{font-family:"Outfit";font-weight:600;font-size:.9rem;letter-spacing:.02em;background:var(--accent);color:#fff7ee;
    padding:.85em 1.6em;border:none;border-radius:40px;cursor:pointer;display:inline-flex;align-items:center;gap:.55em;
    white-space:nowrap;text-transform:uppercase}
  .btn:hover{background:var(--accent-ink)}
  .btn-out{background:transparent;color:inherit;border:2px solid currentColor;padding:.74em 1.5em}
  .btn-out:hover{background:var(--ink);color:var(--bg)}
  .btn-cream{background:#fbf3e6;color:var(--ink)}
  .btn-cream:hover{background:#fff}

  /* NAV — fixed overlay; faint scrim over the film, solid once past it */
  header{position:fixed;left:0;right:0;top:0;z-index:100;background:transparent;
    border-bottom:1px solid transparent;
    transition:background 1s ease,border-color 1s ease,backdrop-filter 1s ease}
  header.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);
    backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)}
  /* brand sits flush to the far left, nav actions to the far right */
  header .wrap{max-width:none;padding:0 clamp(18px,2.4vw,40px)}
  nav{display:flex;align-items:center;justify-content:space-between;height:92px}
  /* logo + name grouped so their spacing is controlled directly (was set by space-between) */
  .brand-group{display:flex;align-items:center;gap:14px}
  .logo{position:relative;display:inline-block;line-height:0}
  .logo img{width:150px;height:auto;display:block;transition:opacity 1s ease}
  .logo .logo-d{position:absolute;top:0;left:0;opacity:0}
  header.scrolled .logo .logo-w{opacity:0}
  header.scrolled .logo .logo-d{opacity:1}
  .brand b{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.16rem;letter-spacing:-.02em;display:block;line-height:1;transition:color 1s ease}
  .brand span{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);transition:color 1s ease}
  .nav-links{display:flex;gap:28px}
  .nav-links a{font-size:.86rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:color 1s ease}
  .nav-links a:hover{color:var(--accent)}
  .nav-right{display:flex;align-items:center;gap:14px}
  .nav-cta{display:none}                       /* in-menu CTA — mobile only */
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:6px;
    width:34px;height:34px;padding:0;border:none;background:transparent;cursor:pointer}
  .nav-burger span{display:block;width:24px;height:2px;background:var(--ink);margin:0 auto;
    transition:transform .3s ease,opacity .3s ease,background-color 1s ease}
  header:not(.scrolled) .nav-burger span{background:#fbf3e6}
  header.nav-open .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  header.nav-open .nav-burger span:nth-child(2){opacity:0}
  header.nav-open .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  /* light treatment while the menu floats over the video */
  header:not(.scrolled) .brand b,header:not(.scrolled) .brand span,
  header:not(.scrolled) .nav-links a{color:#fbf3e6}
  header:not(.scrolled) .nav-links a:hover{color:#fff}
  /* keep in-page anchors clear of the fixed bar */
  section[id]{scroll-margin-top:104px}

  /* CINEMA HERO — tall scroll track + sticky full-screen video */
  .cinema{position:relative;height:340vh}
  .cinema-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
    display:flex;align-items:flex-end;color:#fbf3e6}
  /* object-position:top keeps the top of the footage in frame when cover-cropped */
  .cinema video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0}
  /* lighter veil so the video reads through clearly, keeping legibility bottom-left */
  .cinema .veil{position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(28,18,11,.26) 0%,rgba(28,18,11,.04) 42%,rgba(28,18,11,.62) 100%),
               linear-gradient(90deg,rgba(28,18,11,.46) 0%,rgba(28,18,11,0) 54%)}
  .cinema .tint{position:absolute;inset:0;z-index:1;background:var(--accent);mix-blend-mode:soft-light;opacity:.16}
  .cinema .frameborder{position:absolute;top:90px;left:18px;right:18px;bottom:68px;z-index:3;
    border:2px solid rgba(251,243,230,.5);pointer-events:none}
  /* full-width so content hugs the far left, matching the header */
  .hero-content{position:relative;z-index:4;max-width:none;margin:0;
    padding:0 clamp(18px,2.4vw,40px) clamp(96px,14vh,150px)}
  .cinema .eyebrow{color:#fbf3e6}.cinema .eyebrow::before,.cinema .eyebrow::after{background:#fbf3e6}
  .cinema h1{font-size:clamp(2.2rem,5.6vw,4.8rem);text-transform:uppercase;margin:.16em 0 .32em;max-width:14ch;
    text-shadow:0 4px 30px rgba(0,0,0,.4)}
  .cinema h1 .red{color:var(--accent)}
  .cinema p.lead{font-size:1.08rem;max-width:48ch;color:rgba(251,243,230,.92);margin-bottom:1.8em}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .cinema .btn-out{border-color:rgba(251,243,230,.7);color:#fbf3e6}
  .cinema .btn-out:hover{background:#fbf3e6;color:var(--ink)}
  .seal{position:absolute;z-index:5;top:114px;right:42px;width:180px;height:auto;
    transform:rotate(-8deg);filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}

  /* RIBBON — semi-transparent band over the video, slid right→left by scroll */
  .strip{position:absolute;left:0;bottom:0;z-index:4;width:100%;overflow:hidden;
    background:color-mix(in srgb,var(--ink) 26%,transparent);backdrop-filter:blur(2px);
    color:#fbf3e6;border-top:1px solid rgba(251,243,230,.16);border-bottom:1px solid rgba(251,243,230,.16)}
  .strip .track{display:flex;white-space:nowrap;padding:13px 0;width:max-content;will-change:transform;
    font-family:"Bricolage Grotesque";font-weight:600;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;
    animation:ribbon 30s linear infinite}
  .strip .track span{display:inline-block}
  .strip .track b{color:var(--accent);font-weight:800;margin:0 1.4em}
  @keyframes ribbon{to{transform:translateX(-50%)}}

  section.block{padding:clamp(52px,5vw,84px) 0}
  /* When two plain (same-background) sections stack, their bottom+top paddings
     read as one oversized void. Sections with their own background/border break
     the space visually, so they keep full padding; between two plain blocks we
     drop the top padding so the gap matches a single, even section transition. */
  .block:not(.liberte):not(.devis):not(.gamme):not(.gammes):not(.facteur)
    + .block:not(.liberte):not(.devis):not(.gamme):not(.gammes):not(.facteur){
    padding-top:0}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,56px)}
  .sec-head h2{font-size:clamp(2.1rem,5vw,3.6rem);text-transform:uppercase;margin-top:.3em;max-width:18ch}
  .sec-head .idx{font-family:"Bricolage Grotesque";font-size:.9rem;color:var(--accent);letter-spacing:.1em}
  .sec-head p{color:var(--muted);max-width:40ch;font-size:1.1rem}

  /* EXPERIENCE intro */
  /* faint Solex-badge outline watermark behind the section — the actual "shape"
     glyph extracted from solex.world's icomoon font, rendered oversized at low
     opacity (the same motif the original site floats behind its content). */
  /* tighten the gap below the hero — half the default block top padding */
  .experience{position:relative;overflow:hidden;padding-top:clamp(33px,4vw,60px)}
  /* anchored to the top-right corner and pushed 30% out, so the top & right corners
     crop off outside the section (which clips via overflow:hidden) */
  .experience::before{content:"";position:absolute;z-index:0;pointer-events:none;
    right:0;top:0;transform:translate(30%,-10%);
    width:min(1140px,109%);aspect-ratio:2225/1024;opacity:.85;
    background:center/contain no-repeat url("../img/solex-badge-outline.svg")}
  .experience .wrap{position:relative;z-index:1}
  .exp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,72px);align-items:start}
  /* image keeps its natural height; JS drifts it for parallax depth vs. text */
  .exp-media img{max-width:100%;height:auto;display:block;will-change:transform}
  .exp-grid p{color:var(--muted);font-size:1.13rem}
  .exp-grid p+p{margin-top:1.1em}
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:clamp(44px,5vw,68px)}
  .pillar{border-top:2px solid var(--ink);padding-top:18px}
  .pillar .n{font-family:"Bricolage Grotesque";font-weight:800;color:var(--accent);font-size:.85rem;letter-spacing:.1em}
  .pillar h3{font-size:1.3rem;text-transform:uppercase;margin:.5em 0 .4em}
  .pillar p{color:var(--muted);font-size:1rem}

  /* ── EXPERIENCE per-element scroll reveal ───────────────────────────────
     JS sets --r (0→1) on each [data-reveal] as it enters the viewport.
     Default 1 → fully visible when JS is off or reduced-motion.            */
  .experience [data-reveal]{opacity:var(--r,1);
    transform:translateY(calc((1 - var(--r,1)) * var(--ry,26px)));
    transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}
  .experience .sec-head[data-reveal]{--ry:40px}
  .experience .exp-media[data-reveal]{--ry:44px}
  .experience .pillar[data-reveal]{--ry:54px}

  @media (prefers-reduced-motion:reduce){
    .experience [data-reveal]{opacity:1;transform:none}
  }

  /* BALADES */
  .balades{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .ticket{background:var(--bg);border:2px solid var(--ink);border-radius:18px;overflow:hidden;position:relative;
    display:flex;flex-direction:column}
  .ticket:nth-child(2){margin-top:42px}.ticket:nth-child(3){margin-top:84px}
  .ticket .top{height:170px;position:relative;border-bottom:2px dashed var(--ink)}
  .ticket .top .num{position:absolute;left:16px;top:12px;font-family:"Bricolage Grotesque";font-weight:800;
    font-size:3.4rem;color:rgba(251,243,230,.9);line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.25)}
  .ticket .top .place{position:absolute;left:18px;bottom:14px;color:#fbf3e6;font-size:.74rem;letter-spacing:.16em;
    text-transform:uppercase;font-weight:600}
  .ticket .body{padding:22px 22px 26px}
  .ticket h3{font-size:1.5rem;text-transform:uppercase;margin-bottom:.5em}
  .ticket p{color:var(--muted);font-size:1rem;min-height:5.4em}
  .ticket .meta{display:flex;justify-content:space-between;border-top:1px solid var(--line-strong);margin-top:18px;padding-top:14px}
  .ticket .meta div span{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .ticket .meta div b{font-family:"Bricolage Grotesque";font-size:1.05rem}
  .ticket .go{margin-top:18px;display:inline-flex;align-items:center;gap:.5em;color:var(--accent);font-weight:600;
    font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
  .balades-cta{display:flex;justify-content:center;margin-top:clamp(48px,6vw,76px)}

  /* BALADES entrance — heading drops in from top, cards 1 & 2 slide in from
     the left and card 3 from the right. Reverses when scrolled back out.     */
  .balades .sec-head{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
  .balades .ticket{transition:opacity 1.6s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
  .balades .ticket:nth-child(1){z-index:2}   /* card 1 sits above card 2 so 2 can hide behind it */
  .balades .ticket:nth-child(2){z-index:1}
  .balades.anim .sec-head{opacity:0;transform:translateY(-48px)}
  .balades.anim .ticket:nth-child(1){opacity:0;transform:translateX(-110px)}
  .balades.anim .ticket:nth-child(2){opacity:0;transform:translate(calc(-100% - 26px),-42px)}  /* stacked behind card 1 */
  .balades.anim .ticket:nth-child(3){opacity:0;transform:translateX(110px)}
  .balades.anim.in .sec-head,
  .balades.anim.in .ticket{opacity:1;transform:none}
  .balades.anim.in .ticket:nth-child(1){transition-delay:.15s}
  .balades.anim.in .ticket:nth-child(2){transition-delay:.40s}
  .balades.anim.in .ticket:nth-child(3){transition-delay:.65s}

  /* DEVIS form */
  .devis{background:var(--ink);color:var(--bg)}
  .devis .eyebrow{color:var(--ocre)}.devis .eyebrow::before,.devis .eyebrow::after{background:var(--ocre)}
  .devis-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,5vw,72px);align-items:start}
  .devis h2{font-size:clamp(2.1rem,4.6vw,3.4rem);text-transform:uppercase;color:var(--bg)}
  .devis .lead{color:color-mix(in srgb,var(--bg) 78%,transparent);margin-top:1.1em;max-width:40ch}
  .devis-feats{margin-top:2.2em;display:flex;flex-direction:column;gap:.9em}
  .devis-feats div{display:flex;gap:.7em;align-items:center;font-size:1.05rem}
  .devis-feats svg{color:var(--ocre);flex:0 0 auto}
  /* card chrome scoped to the devis form only — the newsletter form must stay plain */
  #devisForm{position:relative;background:var(--paper);color:var(--ink);padding:clamp(26px,3vw,40px);
    border:2px solid var(--ocre);border-radius:22px;
    animation:form-glow 5s ease-in-out infinite}
  @keyframes form-glow{
    0%,70%,100%{box-shadow:0 0 0 rgba(255,196,92,0),inset 0 0 0 rgba(255,210,110,0)}
    35%{box-shadow:0 0 40px 6px rgba(255,196,92,.5),inset 0 0 30px rgba(255,210,110,.2)}}
  @media (prefers-reduced-motion:reduce){#devisForm{animation:none}}
  .field{display:flex;flex-direction:column;gap:.45em;margin-bottom:1.05em}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  label{font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
  label .req{color:var(--accent)}
  input,select,textarea{font-family:"Outfit";font-size:1rem;line-height:1.4;color:var(--ink);background:var(--bg);
    border:2px solid var(--line-strong);border-radius:12px;padding:.74em .9em;width:100%;
    -webkit-appearance:none;appearance:none;margin:0}
  /* uniform control height across browsers (Safari sizes selects/date natively otherwise) */
  input,select{height:2.95em}
  /* custom chevron for selects — replaces Safari's native double-arrow */
  select{padding-right:2.4em;cursor:pointer;background-repeat:no-repeat;
    background-position:right .9em center;background-size:13px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%23241a12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  /* normalise Safari/WebKit date field so it matches text inputs */
  input[type=date]{-webkit-appearance:none;text-align:left;position:relative;padding-right:2.6em}
  input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
  input[type=date]::-webkit-datetime-edit{line-height:1.4;padding:0}
  /* custom calendar icon in place of Safari's default indicator */
  input[type=date]::-webkit-calendar-picker-indicator{
    position:absolute;right:.65em;top:50%;transform:translateY(-50%);width:18px;height:18px;
    padding:0;margin:0;cursor:pointer;opacity:.7;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23241a12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E")}
  input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
  textarea{resize:vertical;min-height:82px;height:auto}
  .help{font-size:.8rem;color:var(--muted)}
  .err{font-size:.8rem;color:var(--accent);display:none}
  .field.invalid input,.field.invalid select{border-color:var(--accent)}
  .field.invalid .err{display:block}
  #devisForm .btn{width:100%;justify-content:center;margin-top:.5em;padding:1em}
  .success{display:none;text-align:center;padding:1em 0}
  .success.show{display:block}
  .success .check{width:64px;height:64px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;margin:0 auto 1em}
  .success h3{font-size:1.7rem;text-transform:uppercase;margin-bottom:.3em}
  .success p{color:var(--muted)}

  /* EN LIBERTÉ */
  .liberte{position:relative;color:#fbf3e6;overflow:hidden;background:#1d3257;
    padding-top:clamp(120px,16vw,220px);padding-bottom:clamp(120px,16vw,220px)}
  /* oversized image layer — JS translates it on scroll for parallax depth */
  .liberte .lib-bg{position:absolute;left:0;right:0;top:-35%;height:170%;z-index:0;
    background:#1d3257 url("../img/location-bg.jpg") center/cover no-repeat;will-change:transform}
  .liberte .lib-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(20,28,45,.82) 0%,rgba(20,28,45,.55) 45%,rgba(20,28,45,.15) 100%)}
  .liberte .wrap{position:relative;z-index:2}
  .liberte .lib-grid{display:grid;grid-template-columns:minmax(0,640px);gap:clamp(34px,5vw,72px);align-items:center}
  .liberte .eyebrow{color:#fbf3e6}.liberte .eyebrow::before,.liberte .eyebrow::after{background:#fbf3e6}
  .liberte h2{font-size:clamp(2.2rem,5vw,3.8rem);text-transform:uppercase;color:#fbf3e6}
  .liberte p{color:rgba(251,243,230,.92);max-width:46ch;margin:1.1em 0 1.8em;font-size:1.14rem}

  /* GAMME */
  .gamme{background:var(--bg);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
    position:relative;overflow:hidden}
  .gamme .wrap{position:relative;z-index:1}
  /* decorative "2 men" artwork anchored to the top-right, sitting BEHIND the cards */
  .gamme::after{content:"";position:absolute;z-index:0;right:0;top:0;pointer-events:none;
    width:min(320px,26vw);aspect-ratio:579/504;
    background:right top/contain no-repeat url("../img/2man.png")}
  .specs{display:flex;gap:30px;flex-wrap:wrap;margin-top:1.4em}
  .specs div b{font-family:"Bricolage Grotesque";font-size:1.1rem;display:block}
  .specs div span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .models{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(38px,4vw,60px)}
  .model{border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--bg);
    transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
  .model:hover{transform:translateY(-8px) scale(1.035);box-shadow:0 28px 56px -28px rgba(36,26,18,.6);z-index:2}
  .model .plate .bike{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .model:hover .plate .bike{transform:translateX(-50%) scale(1.14)}
  .model .plate{aspect-ratio:4/3.2;position:relative;border-bottom:2px solid var(--ink);overflow:hidden}
  .model .plate .ph-tag{position:absolute;left:12px;bottom:12px;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(251,243,230,.7)}
  .model .plate .seal2{position:absolute;right:14px;top:14px;width:46px;height:46px;border-radius:50%;
    border:1.5px solid rgba(251,243,230,.7);display:grid;place-items:center;color:#fbf3e6;font-family:"Bricolage Grotesque";
    font-size:.6rem;text-align:center;line-height:1}
  .model .plate .bike{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);width:64%;opacity:.9}
  .model .info{padding:18px 20px 22px;display:flex;flex-direction:column;gap:.4em}
  .model .info .top{display:flex;justify-content:space-between;align-items:baseline}
  .model h3{font-size:1.35rem;text-transform:uppercase}
  .model .info small{color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
  .model p{color:var(--muted);font-size:1rem}

  /* BOUTIQUE */
  /* flush top (full-bleed band) + halved bottom gap before the journal section */
  #boutique{padding-top:0;padding-bottom:clamp(33px,4vw,60px)}
  #actus{padding-top:clamp(33px,4vw,60px)}
  /* fits within one viewport: capped height + content bottom-anchored */
  .map-banner{position:relative;width:100%;height:clamp(520px,78vh,680px);
    display:flex;align-items:flex-end;overflow:hidden;
    border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
    background:repeating-linear-gradient(45deg,var(--paper) 0 14px,var(--paper-2) 14px 28px)}
  .map-banner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;z-index:0}
  .map-banner .map-veil{position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(28,18,11,.32) 0%,rgba(28,18,11,.06) 38%,rgba(28,18,11,.58) 100%),
               linear-gradient(90deg,rgba(28,18,11,.68) 0%,rgba(28,18,11,.2) 46%,rgba(28,18,11,0) 68%)}
  /* extra darkening that fades in once the animation finishes, so the text stays legible
     over the (often bright) final frame */
  .map-banner .map-finish{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
    transition:opacity .9s ease;
    background:linear-gradient(90deg,rgba(28,18,11,.72) 0%,rgba(28,18,11,.34) 42%,rgba(28,18,11,0) 70%),
               linear-gradient(180deg,rgba(28,18,11,.22) 0%,rgba(28,18,11,0) 55%)}
  .map-banner.done .map-finish{opacity:1}
  /* all content stacks on the LEFT so the map stays visible on the right */
  .map-banner-content{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
    padding:0 28px clamp(32px,4vw,52px);
    display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.2vw,28px)}
  .map-banner-intro{color:#fbf3e6;max-width:46ch}
  .map-banner-intro .eyebrow{color:#fbf3e6}
  .map-banner-intro .eyebrow::before,.map-banner-intro .eyebrow::after{background:#fbf3e6}
  .map-banner-intro h2{font-size:clamp(1.5rem,2.8vw,2.5rem);text-transform:uppercase;margin:.14em 0 .3em;
    line-height:1.04;white-space:nowrap;text-shadow:0 4px 30px rgba(0,0,0,.45)}
  .map-banner-intro h2 .red{color:var(--accent)}
  .map-banner-intro p{font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.5;max-width:42ch;
    color:rgba(251,243,230,.92);text-shadow:0 2px 18px rgba(0,0,0,.4)}

  /* floating info card over the video — compact, on the left */
  .boutique-card{background:var(--paper);border:2px solid var(--ink);border-radius:16px;
    padding:clamp(20px,2vw,28px) clamp(22px,2.2vw,32px);align-self:flex-start;max-width:460px;
    box-shadow:0 24px 50px rgba(0,0,0,.4)}
  .addr{font-family:"Bricolage Grotesque";font-weight:600;font-size:1.2rem;line-height:1.3;margin:0 0 .8em}
  .hours{display:flex;gap:28px;flex-wrap:wrap;margin:0 0 1.1em}
  .hours div span{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.2em}
  .hours div b{font-family:"Bricolage Grotesque";font-size:1rem}
  .pin{position:absolute;z-index:3}
  /* anchored to the boutique on the video's FINAL frame. top is in vw so it follows the
     cover-crop (video is width-bound on desktop: visible height = 100vw / aspect) */
  #mapPin{left:calc(48% + 1cm);top:calc(27vw + 1.5cm)}
  /* hidden until the map animation finishes, then drops in */
  .map-banner .pin{opacity:0;transform:translateY(-8px) scale(.85);transform-origin:left center;
    transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
  .map-banner .pin.show{opacity:1;transform:none}
  .pin .dot{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}
  .pin .name{position:absolute;left:24px;top:-6px;white-space:nowrap;font-size:.74rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.06em;background:var(--ink);color:var(--bg);padding:.34em .7em;border-radius:20px}

  /* ACTUS + NEWSLETTER */
  .actus-list{border-top:2px solid var(--ink)}
  .actu{display:grid;grid-template-columns:150px 1fr auto;gap:26px;align-items:center;padding:24px 0;
    border-bottom:1px solid var(--line-strong)}
  .actu time{font-family:"Bricolage Grotesque";font-size:.85rem;color:var(--accent);letter-spacing:.04em}
  .actu .cat{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .actu h3{font-size:clamp(1.2rem,2.2vw,1.7rem);text-transform:uppercase;margin-top:.2em}
  .actu .arr{font-size:1.2rem;color:var(--muted)}
  .actu:hover .arr{color:var(--accent)}
  .news{margin-top:clamp(44px,5vw,68px);background:var(--paper);border:2px solid var(--ink);border-radius:22px;
    padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
  .news h3{font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase}
  .news p{color:var(--muted);margin-top:.6em;max-width:34ch;font-size:1.02rem}
  .news-form{display:flex;gap:12px;flex-wrap:wrap}
  .news-form input{border-radius:40px;flex:1 1 220px;min-width:0}
  .news-form .btn{flex:0 0 auto}
  .news-note{font-size:.8rem;color:var(--muted);margin-top:.7em}
  .news-ok{display:none;font-weight:600;color:var(--accent);margin-top:.4em}
  .news-ok.show{display:block}

  /* FOOTER */
  footer{background:var(--ink);color:var(--bg);padding:64px 0 40px}
  .foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
  .foot-grid .brand b{color:var(--bg)}
  .foot-links{display:flex;gap:56px;flex-wrap:wrap}
  .foot-col span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ocre);display:block;margin-bottom:1em}
  .foot-col a{display:block;font-size:.94rem;color:color-mix(in srgb,var(--bg) 72%,transparent);margin-bottom:.6em}
  .foot-col a:hover{color:var(--bg)}
  .foot-bottom{margin-top:46px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--bg) 30%,transparent);
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.78rem;color:color-mix(in srgb,var(--bg) 60%,transparent)}

  /* ── BALADE DU FACTEUR FRANÇOIS ─────────────────────────────── */
  .facteur{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .facteur-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,64px);align-items:center}
  .facteur-media{position:relative}
  .facteur-media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
    border:2px solid var(--ink);border-radius:22px;box-shadow:var(--shadow)}
  .facteur-media .tag{position:absolute;left:18px;bottom:18px;background:var(--accent);color:#fff7ee;
    font-family:"Bricolage Grotesque";font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
    padding:.5em 1.05em;border-radius:30px;box-shadow:0 10px 24px -12px rgba(36,26,18,.6)}
  .facteur-lead{font-size:1.14rem;color:var(--ink);max-width:48ch}
  .facteur-stops{list-style:none;margin:1.5em 0 1.8em;border-top:1px solid var(--line)}
  .facteur-stops li{display:flex;gap:1.1em;align-items:baseline;padding:.72em .2em;border-bottom:1px solid var(--line)}
  .facteur-stops time{flex:0 0 3.3em;font-family:"Bricolage Grotesque";font-weight:800;font-size:.98rem;color:var(--accent)}
  .facteur-stops span{color:var(--ink);font-size:1rem}
  .facteur-cta{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap}
  .facteur-note{font-size:.86rem;color:var(--muted)}
  .facteur-map{margin-top:clamp(34px,4.5vw,60px)}
  .facteur-map img{width:100%;display:block;border:2px solid var(--ink);border-radius:22px 22px 22px 22px;background:var(--bg)}
  .facteur-map figcaption{border:2px solid var(--ink);border-top:none;border-radius:0 0 22px 22px;
    background:var(--bg);color:var(--muted);font-size:.9rem;padding:.9em 1.2em;text-align:center}

  /* ── FAQ (accordéon natif <details>) ────────────────────────── */
  .faq-list{max-width:860px}
  .faq-item{border-top:1px solid var(--line-strong)}
  .faq-item:last-child{border-bottom:1px solid var(--line-strong)}
  .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.4em;
    padding:1.15em .2em;font-family:"Bricolage Grotesque";font-weight:600;
    font-size:clamp(1.06rem,2.1vw,1.34rem);color:var(--ink);transition:color .25s ease}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary:hover{color:var(--accent)}
  .faq-ic{flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
    border:1.8px solid var(--line-strong);color:var(--ink);
    transition:transform .3s ease,color .3s ease,border-color .3s ease}
  .faq-item[open] summary{color:var(--accent)}
  .faq-item[open] .faq-ic{transform:rotate(45deg);color:var(--accent);border-color:var(--accent)}
  .faq-item p{color:var(--muted);font-size:1.04rem;max-width:66ch;padding:0 .2em 1.35em}
  .faq-item[open] p{animation:faq-in .35s ease}
  @keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* ── SOCIAL PICTOS (nav + footer) ───────────────────────────── */
  .social{display:inline-flex;align-items:center;gap:10px}
  .social a{display:inline-grid;place-items:center;border-radius:50%;color:inherit;
    transition:color .3s ease,background .3s ease,border-color .3s ease}
  .social svg{width:16px;height:16px;display:block}
  .social-nav a{width:34px;height:34px;border:1.6px solid currentColor}
  .social-nav a:hover{background:var(--accent);border-color:var(--accent);color:#fff7ee}
  header:not(.scrolled) .social-nav a{color:#fbf3e6}
  header.nav-open .social-nav a{color:var(--ink)}
  .foot-social{margin-top:1.4em}
  .foot-social a{width:40px;height:40px;border:1.6px solid color-mix(in srgb,var(--bg) 38%,transparent);color:var(--bg)}
  .foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff7ee}
  .foot-social svg{width:18px;height:18px}

  /* ── VIDEO FACADE (section Bike Store) ──────────────────────── */
  .video-facade{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;cursor:pointer;
    border:2px solid var(--ink);box-shadow:var(--shadow);background:var(--ink)}
  .video-facade .video-poster{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .video-facade::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
    background:radial-gradient(62% 62% at 50% 46%,transparent,rgba(28,18,11,.32))}
  .video-facade:hover .video-poster{transform:scale(1.05)}
  .video-facade:hover::after{opacity:1}
  .video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
    width:74px;height:74px;border-radius:50%;border:none;cursor:pointer;padding-left:4px;
    display:grid;place-items:center;color:#fff7ee;background:var(--accent);
    box-shadow:0 16px 40px -12px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s ease}
  .video-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;
    border:2px solid rgba(255,247,238,.5);animation:vf-pulse 2.6s ease-out infinite}
  .video-facade:hover .video-play{transform:translate(-50%,-50%) scale(1.1);background:var(--accent-ink)}
  @keyframes vf-pulse{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
  .video-facade.playing .video-poster,.video-facade.playing .video-play{display:none}
  .video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

  /* ── GALERIE (masonry via CSS columns) ──────────────────────── */
  .galerie-grid{column-count:3;column-gap:16px}
  .galerie-item{display:block;width:100%;padding:0;margin:0 0 16px;border:none;background:none;cursor:zoom-in;
    border-radius:14px;overflow:hidden;position:relative;line-height:0;
    break-inside:avoid;-webkit-column-break-inside:avoid;box-shadow:0 18px 40px -28px rgba(36,26,18,.5);
    /* isolate each item on its own compositing layer + contain paint so a hover
       transform never forces a repaint (white flash) of neighbouring images in
       the CSS-columns layout */
    transform:translateZ(0);isolation:isolate;contain:paint}
  .galerie-item img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);
    backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
  .galerie-item::after{content:"";position:absolute;inset:0;background:rgba(28,18,11,.14);opacity:0;transition:opacity .45s ease}
  .galerie-item:hover img{transform:scale(1.07)}
  .galerie-item:hover::after{opacity:1}
  .galerie-item:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

  /* ── AVIS (widget Google/Trustindex) ────────────────────────────
     the third-party widget ships its own trailing whitespace; strip it and
     any stray margins so the section's own padding is the only bottom spacing,
     keeping the gap even with every other .block section */
  .avis-widget{line-height:0}
  .avis-widget>*{line-height:normal}
  /* Trustindex ships its own top/bottom whitespace (classes are ti-*); strip it
     so the section's padding is the only vertical spacing */
  .avis-widget [class^="ti-"],
  .avis-widget [class*=" ti-"],
  .avis-widget iframe{margin-bottom:0 !important}
  .avis-widget>div{margin:0 !important;padding:0 !important}

  /* ── LIGHTBOX ────────────────────────────────────────────────── */
  .lightbox{position:fixed;inset:0;z-index:300;display:none;place-items:center;
    background:rgba(18,12,7,.92);backdrop-filter:blur(6px);padding:clamp(16px,4vw,56px)}
  .lightbox.show{display:grid}
  .lb-img{max-width:min(1100px,92vw);max-height:86vh;width:auto;height:auto;display:block;
    border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);animation:lb-in .35s ease}
  @keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
  .lb-close,.lb-nav{position:absolute;border:none;cursor:pointer;color:#fff7ee;background:rgba(255,247,238,.12);
    backdrop-filter:blur(4px);border-radius:50%;display:grid;place-items:center;z-index:2;
    transition:background .3s ease,transform .3s ease}
  .lb-close{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);width:48px;height:48px;font-size:1.9rem;line-height:1}
  .lb-nav{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:2.2rem;line-height:1}
  .lb-prev{left:clamp(10px,2vw,26px)}.lb-next{right:clamp(10px,2vw,26px)}
  .lb-close:hover,.lb-nav:hover{background:var(--accent)}
  .lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.08)}

  /* ── VIDEO LIGHTBOX (YouTube) — works on desktop + mobile ────── */
  .video-lightbox{position:fixed;inset:0;z-index:320;display:none;place-items:center;
    background:rgba(18,12,7,.94);backdrop-filter:blur(6px);padding:clamp(16px,4vw,56px)}
  .video-lightbox.show{display:grid}
  .vlb-frame{position:relative;width:min(1100px,92vw);aspect-ratio:16/9;
    max-height:86vh;border-radius:10px;overflow:hidden;background:#000;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.8);animation:lb-in .35s ease}
  .vlb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .vlb-close{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
    width:48px;height:48px;font-size:1.9rem;line-height:1;border:none;cursor:pointer;
    color:#fff7ee;background:rgba(255,247,238,.12);backdrop-filter:blur(4px);
    border-radius:50%;display:grid;place-items:center;z-index:2;
    transition:background .3s ease,transform .3s ease}
  .vlb-close:hover{background:var(--accent)}

  @media (prefers-reduced-motion:reduce){
    .video-play::before{animation:none}
    .galerie-item img,.video-facade .video-poster{transition:none}
    .galerie-item:hover img,.video-facade:hover .video-poster{transform:none}
  }

  /* collapse the nav to a burger sooner — the full horizontal nav + brand name
     stops fitting around ~1024px and was wrapping/overlapping the links */
  @media(max-width:1024px){
    /* condensed header + dropdown menu */
    .nav-burger{display:flex}
    .brand{display:none}
    .devis-btn{display:none}
    .logo img{width:118px}
    .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
      padding:6px 28px 20px;background:color-mix(in srgb,var(--bg) 97%,transparent);
      backdrop-filter:blur(12px);border-bottom:2px solid var(--ink);
      opacity:0;visibility:hidden;transform:translateY(-10px);
      transition:opacity .3s ease,transform .3s ease,visibility .3s ease}
    header.nav-open .nav-links{opacity:1;visibility:visible;transform:none}
    /* solid bar when the menu is open so logo + burger don't sit on the video */
    header.nav-open{background:color-mix(in srgb,var(--bg) 97%,transparent);
      backdrop-filter:blur(12px);border-bottom-color:var(--ink)}
    /* dark logo + burger on the now-light open bar (they default to white over video) */
    header.nav-open .logo .logo-w{opacity:0}
    header.nav-open .logo .logo-d{opacity:1}
    header.nav-open .nav-burger span{background:var(--ink)}
    .nav-links a{color:var(--ink) !important;font-size:1rem;padding:15px 2px;
      border-bottom:1px solid var(--line);letter-spacing:.04em}
    .nav-links a.nav-cta{display:inline-flex;justify-content:center;margin-top:16px;
      color:#fff7ee !important;border-bottom:none;padding:.85em 1.6em}
  }

  /* ── MOBILE HERO — must match the JS `mobile` check in script.js.
     Scroll-scrubbing is disabled on touch devices, so the tall scroll track
     would just be dead scrolling over a frozen frame. Instead: one full-screen
     cinematic hero with the film autoplaying in a loop (muted, playsinline). */
  @media(max-width:880px),(pointer:coarse){
    .cinema{height:auto}
    .cinema-sticky{position:relative;height:100vh;height:100svh}
    /* the portrait crop puts the headline over bright sky/bike — back the copy
       with a frosted translucent panel so it reads on any frame while the film
       stays visible through it; the veil only adds a light overall grade */
    .cinema .veil{background:
      linear-gradient(180deg,rgba(28,18,11,.30) 0%,rgba(28,18,11,.06) 30%,
        rgba(28,18,11,.22) 60%,rgba(28,18,11,.5) 100%)}
    /* .cinema prefix so the ≤560px `.wrap{padding:0 18px}` rule can't cancel the
       panel's inner padding (same specificity, later in file) */
    .cinema .hero-content{margin:0 14px clamp(120px,17vh,180px);padding:30px 18px 34px;
      background:rgba(24,15,9,.16);
      -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
      border:1px solid rgba(251,243,230,.16);border-radius:20px}
    .cinema h1{text-shadow:0 2px 10px rgba(0,0,0,.65),0 6px 34px rgba(0,0,0,.55)}
    .cinema h1 .red{color:#d4553c;text-shadow:0 2px 10px rgba(0,0,0,.75),0 6px 34px rgba(0,0,0,.6)}
    .cinema p.lead{color:#fbf3e6;text-shadow:0 1px 8px rgba(0,0,0,.6)}
    /* tighter eyebrow so it fits the panel on one line */
    .cinema .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.6);font-size:.62rem;letter-spacing:.24em}
    .cinema .eyebrow::before,.cinema .eyebrow::after{width:14px}
  }

  @media(max-width:880px){
    .seal{width:100px;height:auto;top:84px;right:16px}
    .exp-grid,.devis-grid,.lib-grid,.map-banner-content,.news,.facteur-grid{grid-template-columns:1fr}
    .facteur-media img{aspect-ratio:16/10}
    .map-banner{height:auto;min-height:78vh}
    .map-banner-content{padding-top:clamp(80px,12vh,120px);gap:20px}
    .map-banner-intro h2{white-space:normal;font-size:clamp(1.7rem,7vw,2.4rem)}
    .boutique-card{align-self:stretch}
    /* video is height-bound (centred) on portrait screens; keep the pin in the open
       upper map area so it stays visible and clear of the stacked text + card */
    #mapPin{top:22vh;left:56%}
    .pillars,.tickets,.models{grid-template-columns:1fr}
    .ticket:nth-child(2),.ticket:nth-child(3){margin-top:0}
    .actu{grid-template-columns:1fr;gap:6px}.actu .arr{display:none}
    .galerie-grid{column-count:2}
    .row2{grid-template-columns:1fr}
    .cinema .frameborder{top:82px;left:10px;right:10px;bottom:60px}
  }

  @media(max-width:560px){
    .wrap{padding:0 18px}
    nav{height:76px}
    .logo img{width:100px}
    .cinema h1{font-size:clamp(2.4rem,11vw,3.4rem)}
    .cinema p.lead{font-size:1rem}
    .hero-cta{gap:10px}.hero-cta .btn{flex:1 1 auto;justify-content:center}
    .seal{display:none}
    .cinema .frameborder{display:none}
    section.block{padding:clamp(54px,12vw,80px) 0}
    .sec-head h2{font-size:clamp(1.9rem,8vw,2.6rem)}
    .liberte{padding-top:clamp(90px,22vw,140px);padding-bottom:clamp(90px,22vw,140px)}
    .foot-links{gap:32px}
    .news-form{flex-direction:column;align-items:stretch}
    /* in a column flexbox the 220px flex-basis becomes HEIGHT — reset it so the
       input keeps its normal control height */
    .news-form input{flex:0 0 auto}
    .news-form .btn{justify-content:center}
    /* stack the double CTA (En vidéo / Acheter mon Solex) — side by side they
       overflow the viewport and cause horizontal scroll */
    .gammes-cta{flex-direction:column;align-items:stretch}
    .gammes-cta .btn{justify-content:center}
    /* tighten the top-bar pictos so they sit comfortably beside the burger */
    .social-nav{gap:8px}.social-nav a{width:32px;height:32px}
    .galerie-grid{column-count:1}
    .lb-nav{width:44px;height:44px;font-size:1.8rem}
  }

  /* ── VISUEL BOUTIQUE (bandeau pleine image) ─────────────────── */
  .boutique-visual{position:relative;overflow:hidden;display:flex;align-items:flex-end;
    height:clamp(360px,62vh,640px);
    border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .boutique-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center;display:block}
  .boutique-visual .bv-veil{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(0deg,rgba(28,18,11,.66) 0%,rgba(28,18,11,.08) 46%,transparent 100%),
               linear-gradient(90deg,rgba(28,18,11,.4) 0%,rgba(28,18,11,0) 58%)}
  .boutique-visual .bv-copy{position:relative;z-index:1;width:100%;color:#fbf3e6;
    padding-bottom:clamp(32px,5vw,60px)}
  .boutique-visual .eyebrow{color:#fbf3e6}
  .boutique-visual .eyebrow::before,.boutique-visual .eyebrow::after{background:#fbf3e6}
  .boutique-visual h2{font-size:clamp(2rem,5vw,3.6rem);text-transform:uppercase;margin-top:.24em;
    max-width:16ch;text-shadow:0 4px 30px rgba(0,0,0,.45)}
  .boutique-visual h2 .red{color:var(--accent)}
  .boutique-visual p{max-width:44ch;margin-top:.7em;font-size:1.06rem;
    color:rgba(251,243,230,.92);text-shadow:0 2px 18px rgba(0,0,0,.4)}

  /* ── NOS GAMMES (4 colonnes) ────────────────────────────────── */
  .gammes{background:var(--paper);border-bottom:2px solid var(--ink)}
  .gammes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .gcard{display:flex;flex-direction:column;background:var(--bg);border:2px solid var(--ink);
    border-radius:18px;overflow:hidden;
    transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
  .gcard:hover{transform:translateY(-8px);box-shadow:0 28px 56px -28px rgba(36,26,18,.6);z-index:2}
  .gcard-media{position:relative;aspect-ratio:4/3.4;overflow:hidden;border-bottom:2px solid var(--ink);
    background:repeating-linear-gradient(45deg,var(--paper) 0 14px,var(--paper-2) 14px 28px)}
  .gcard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
    transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .gcard:hover .gcard-media img{transform:scale(1.06)}
  .gcard-badge{position:absolute;left:12px;top:12px;z-index:1;background:var(--accent);color:#fff7ee;
    font-family:"Bricolage Grotesque";font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
    padding:.42em .85em;border-radius:30px;box-shadow:0 10px 24px -12px rgba(36,26,18,.6)}
  .gcard-priceline{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    margin:.35em 0 .1em;padding:.65em 0 0;border-top:1px solid var(--line)}
  .gcard-priceline .lbl{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
  .gcard-priceline b{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.5rem;color:var(--ink);
    line-height:1;white-space:nowrap}
  .gcard-priceline b small{font-family:"Outfit";font-weight:600;font-size:.5em;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);margin-left:.35em}
  .gcard-body{display:flex;flex-direction:column;gap:.5em;padding:20px 20px 22px;flex:1}
  .gcard-range{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
  .gcard h3{font-size:1.16rem;text-transform:uppercase;line-height:1.06}
  .gcard-specs{margin:.5em 0 .2em;border-top:1px solid var(--line);display:flex;flex-direction:column}
  .gcard-specs div{display:flex;justify-content:space-between;gap:1em;align-items:baseline;
    padding:.5em 0;border-bottom:1px solid var(--line)}
  .gcard-specs dt{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
  .gcard-specs dd{font-family:"Bricolage Grotesque";font-weight:600;font-size:.82rem;text-align:right}
  .gcard-colors{margin-top:.7em}
  .gcard-colors-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    display:block;margin-bottom:.65em}
  .swatches{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
  .swatches .sw{width:22px;height:22px;border-radius:50%;background:var(--c);
    border:1.5px solid rgba(36,26,18,.4);cursor:default;transition:transform .25s ease}
  .swatches .sw:hover{transform:scale(1.18)}
  .gcard-link{margin-top:auto;padding-top:1.1em;display:inline-flex;align-items:center;gap:.5em;
    color:var(--accent);font-weight:600;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
  .gcard-link:hover{color:var(--accent-ink)}
  .gcard-note{margin-top:auto;padding-top:1.1em;color:var(--muted);font-size:.76rem;
    letter-spacing:.06em;text-transform:uppercase}
  .gammes-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px)}
  .gammes-cta .btn{font-size:1rem;padding:1.05em 2.4em}

  @media(max-width:920px){.gammes-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){
    .gammes-grid{grid-template-columns:1fr}
    .boutique-visual{height:clamp(300px,52vh,460px)}
  }