:root{
    --bg:#050608;
    --bg-2:#0a0c11;
    --panel:#0e1118;
    --panel-2:#12151d;
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);
    --text:#f2f3f6;
    --muted:#9ba2af;
    --muted-2:#5f6672;
    /* ONE accent verrouillé : la lumière chaude d'un luminaire */
    --amber:#ffb038;
    --amber-2:#ffcd7a;
    --amber-3:#fff0d6;
    --glow:rgba(255,176,56,.4);
    --maxw:1280px;
    --e1:cubic-bezier(.16,1,.3,1);
    --e2:cubic-bezier(.7,0,.2,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--text);
    font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
    line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  body.locked{overflow:hidden;height:100vh}
  /* text-wrap:balance répartit les mots sur les lignes au lieu de laisser un mot
     seul en dernière ligne — surtout visible sur mobile, où les titres passent
     sur trois ou quatre lignes. Ignoré par les navigateurs qui ne le gèrent pas. */
  h1,h2,h3,.display{font-family:"Sora",system-ui,sans-serif;letter-spacing:-.025em;line-height:1;
    text-wrap:balance}
  a{color:inherit;text-decoration:none}
  /* height:auto est indispensable dès lors que les <img> portent des attributs
     width/height : sans lui, la hauteur écrite dans le HTML est appliquée telle
     quelle et l'image se déforme. Le couple des deux donne au navigateur le ratio
     pour réserver la place avant chargement, sans figer la taille. */
  img{max-width:100%;height:auto;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  section{position:relative}
  ::selection{background:var(--amber);color:#1a1200}

  /* grain + vignette cinématiques (global) */
  .fx{position:fixed;inset:0;pointer-events:none;z-index:40}
  .fx.grain{opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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")}
  .fx.vignette{z-index:39;box-shadow:inset 0 0 240px 10px rgba(0,0,0,.5)}

  /* ============ CURSEUR LUMINEUX CUSTOM ============ */
  .cursor{position:fixed;top:0;left:0;z-index:60;pointer-events:none;transform:translate(-50%,-50%);
    width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,176,56,.6);
    transition:width .3s var(--e1),height .3s var(--e1),background .3s,border-color .3s;mix-blend-mode:screen}
  .cursor.big{width:70px;height:70px;background:radial-gradient(circle,var(--glow),transparent 70%);border-color:transparent}
  .cursor-dot{position:fixed;top:0;left:0;z-index:61;pointer-events:none;transform:translate(-50%,-50%);
    width:5px;height:5px;border-radius:50%;background:var(--amber-3);box-shadow:0 0 10px 2px var(--glow)}
  @media(pointer:coarse){.cursor,.cursor-dot{display:none}}

  /* ============ LOADER « mise en lumière » ============ */
  .loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:26px}
  /* le logo s'allume : opacité .15 -> 1 au chargement (cf. script du loader) */
  .loader .lname{opacity:.15;position:relative;line-height:0}
  .loader .lname .llogo{width:min(400px,62vw);height:auto;display:block}
  .loader .track{width:min(280px,60vw);height:1px;background:var(--line-2);position:relative;overflow:hidden}
  .loader .track i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
    background:linear-gradient(90deg,transparent,var(--amber),var(--amber-3))}
  .loader .pct{font-size:12px;letter-spacing:.3em;color:var(--muted-2);font-variant-numeric:tabular-nums}
  .loader.up{transform:translateY(-100%);transition:transform .9s var(--e2)}

  /* ============ NAV ============ */
  header{position:fixed;top:0;left:0;right:0;z-index:50;height:74px;display:flex;align-items:center;
    transition:height .4s var(--e1),background .5s,border-color .5s;border-bottom:1px solid transparent}
  header.scrolled{height:62px;background:rgba(5,6,8,.7);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;width:100%}
  .brand{display:flex;align-items:center;gap:12px;font-family:"Sora";font-weight:600;font-size:20px;letter-spacing:.03em}
  .brand .lamp{width:12px;height:12px;border-radius:50%;background:var(--amber);
    box-shadow:0 0 0 0 var(--glow),0 0 16px 3px var(--glow);animation:beat 3.4s var(--e1) infinite}
  @keyframes beat{0%,100%{box-shadow:0 0 16px 3px var(--glow);opacity:1}50%{box-shadow:0 0 6px 1px var(--glow);opacity:.55}}
  /* Logo : lettrage blanc détouré. Les fines déliées et la ligne « ÉCLAIRAGE »
     décrochent en dessous de ~38px de haut, d'où cette taille plancher. */
  /* Le logo garde une taille constante. Animer sa hauteur au défilement le
     faisait recalculer image par image, et le navigateur emploie alors un
     rééchantillonnage rapide et grossier : le lettrage devenait flou pendant
     toute la transition. Seule la hauteur de l'entête bouge désormais. */
  .brand .logo{height:42px;width:auto;display:block}
  /* .foot a{display:block} l'emporte sur .brand{display:flex} : on le réaffirme,
     sinon .lamp repasse en inline (taille 0) et son halo flotte sur le logo. */
  .foot .brand{display:flex}
  .foot .brand .logo{height:46px}
  @media(max-width:520px){.brand .logo{height:34px}.foot .brand .logo{height:38px}}
  .nav-links{display:flex;align-items:center;gap:34px}
  .nav-links a{font-size:14.5px;color:var(--muted);position:relative;transition:color .25s}
  .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--amber);transition:width .3s var(--e1)}
  .nav-links a:not(.btn):hover{color:var(--text)}
  .nav-links a:not(.btn):hover::after{width:100%}
  .btn{display:inline-flex;align-items:center;gap:10px;font-family:"Instrument Sans";font-weight:600;font-size:14.5px;
    padding:12px 22px;border-radius:100px;white-space:nowrap;cursor:pointer;border:0;position:relative;overflow:hidden;
    transition:transform .25s var(--e1),box-shadow .4s var(--e1)}
  .btn.btn-primary{background:var(--amber);color:#1e1400}
  .btn.btn-primary:hover{box-shadow:0 12px 40px -10px var(--glow)}
  .btn.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:translateX(-120%);transition:transform .7s var(--e1)}
  .btn.btn-primary:hover::before{transform:translateX(120%)}
  .btn.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
  .btn.btn-ghost:hover{border-color:var(--amber);color:var(--amber-2)}
  .nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:26px;cursor:pointer}
  .nav-right{display:flex;align-items:center;gap:18px}

  /* ============ HERO ============ */
  .hero{min-height:100dvh;display:flex;align-items:center;overflow:hidden;background:#04050a}
  .hero-photo{position:absolute;inset:0;z-index:0}
  .hero-photo .ph{position:absolute;inset:0;background:url(eglise-lespinasse.webp) center 40%/cover no-repeat}
  .hero-photo .lit{filter:brightness(1.03) saturate(1.06)}
  /* la couche sombre est "trouée" par un projecteur radial qui suit le curseur */
  .hero-photo .dark{filter:brightness(.42) saturate(.66) contrast(1.04);
    -webkit-mask-image:radial-gradient(circle var(--r,36vw) at var(--x,60%) var(--y,44%),transparent 0%,transparent 46%,#000 80%);
    mask-image:radial-gradient(circle var(--r,36vw) at var(--x,60%) var(--y,44%),transparent 0%,transparent 46%,#000 80%)}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(3,4,8,.94) 0%,rgba(3,4,8,.52) 40%,transparent 72%),
               linear-gradient(0deg,rgba(3,4,8,.86) 0%,transparent 46%)}
  .hero-credit{position:absolute;right:24px;bottom:20px;z-index:2;font-size:11px;letter-spacing:.05em;
    color:rgba(255,255,255,.5)}
  .hero-inner{position:relative;z-index:2;padding-top:74px;width:100%}
  .hero .eyebrow,.hero h1,.hero .sub{text-shadow:0 2px 30px rgba(0,0,0,.5)}
  .hero .sub{color:#c9cdd6}
  .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--amber-2);margin-bottom:30px;font-weight:500}
  .eyebrow .ln{width:30px;height:1px;background:var(--amber-2);opacity:.55;transform-origin:left}
  .hero h1{font-size:clamp(2.7rem,8vw,6.2rem);font-weight:300;max-width:16ch}
  .hero h1 .row{display:block;overflow:hidden;padding-bottom:.08em}
  .hero h1 .row > span{display:block;will-change:transform}
  .hero h1 .em{font-weight:600;color:var(--amber-2);font-style:normal;text-shadow:0 0 60px var(--glow)}
  .hero .sub{margin-top:30px;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--muted);max-width:50ch}
  .hero-cta{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap}
  .scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);
    display:flex;flex-direction:column;align-items:center;gap:12px}
  .scroll-hint .bar{width:1px;height:46px;background:linear-gradient(var(--amber),transparent);
    animation:drop 2.6s var(--e1) infinite}
  @keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
    46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* reveal — FOUC-safe : visible sans JS */
  .reveal{opacity:1;transform:none}
  html.js .reveal{opacity:0;transform:translateY(34px);
    transition:opacity 1s var(--e1),transform 1s var(--e1)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .reveal[data-d]{transition-delay:calc(var(--d,0)*1ms)}

  /* ============ MARQUEE ============ */
  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:32px 0;background:var(--bg-2);overflow:hidden;position:relative}
  .strip .lbl{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);
    text-align:center;margin-bottom:24px}
  .marquee{display:flex;gap:76px;white-space:nowrap;width:max-content;animation:scrollx 30s linear infinite}
  .strip:hover .marquee{animation-play-state:paused}
  @keyframes scrollx{to{transform:translateX(-50%)}}
  .mrk{font-family:"Sora";font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);color:#333a46;
    transition:color .4s,text-shadow .4s;cursor:default}
  .mrk:hover{color:var(--amber-2);text-shadow:0 0 30px var(--glow)}

  /* ============ SECTIONS ============ */
  /* padding vertical uniquement : le raccourci "130px 0" écrasait les 28px
     latéraux de .wrap et collait les sections aux bords sous 1336px. */
  .sec{padding-top:130px;padding-bottom:130px}
  .kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--amber-2);font-weight:500;margin-bottom:22px}
  .kicker::before{content:"";width:22px;height:1px;background:var(--amber-2);opacity:.6}
  .sec-head{max-width:64ch;margin-bottom:64px}
  .sec-head h1,.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:300;line-height:1.22}
  .sec-head h1 b,.sec-head h2 b{font-weight:600;color:var(--text)}
  .sec-head p{color:var(--muted);font-size:1.12rem;margin-top:22px;max-width:56ch}
  .sec-head.center{max-width:none;margin-left:auto;margin-right:auto;text-align:center}
  .sec-head.center p{margin-left:auto;margin-right:auto}

  /* ============ EXPERTISE BENTO ============ */
  .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px;
    position:relative;overflow:hidden;transition:border-color .5s,transform .5s var(--e1),background .5s}
  .card:hover{border-color:rgba(255,176,56,.32);transform:translateY(-5px);background:var(--panel-2)}
  .card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
    background:radial-gradient(520px 320px at var(--mx,50%) var(--my,-20%),rgba(255,176,56,.13),transparent 62%)}
  .card:hover::before{opacity:1}
  .card .num{font-family:"Sora";font-size:12.5px;color:var(--amber-2);letter-spacing:.14em}
  .card h3{font-size:1.6rem;font-weight:500;margin:16px 0 12px}
  .card p{color:var(--muted);font-size:1rem}
  .card .glyph{width:52px;height:52px;border-radius:14px;border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;color:var(--amber);background:rgba(255,176,56,.06);margin-bottom:26px}
  .card .glyph svg{width:26px;height:26px}
  .card.big{grid-column:span 6;min-height:360px;display:flex;flex-direction:column;justify-content:space-between}
  .card.sm{grid-column:span 3}
  .card.wide{grid-column:span 6}

  /* ============ BEFORE / AFTER (mise en lumière) ============ */
  .ba-sec{padding:130px 0;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ba{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1729/608;user-select:none;
    border:1px solid var(--line-2);cursor:ew-resize;touch-action:none;
    box-shadow:0 46px 100px -55px rgba(0,0,0,.92),inset 0 0 0 1px rgba(255,255,255,.02)}
  .ba .layer{position:absolute;inset:0}
  .ba .layer img{width:100%;height:100%;object-fit:cover;display:block}

  /* Base (visible à gauche) = NUIT, éclairé par MIDI LUM — photo réelle */
  .ba .after img{filter:saturate(1.06) contrast(1.03)}
  .ba .after::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
    background:radial-gradient(78% 62% at 50% 100%,rgba(255,176,64,.14),transparent 62%)}

  /* Couche haute (révélée à droite) = JOUR — photo réelle */
  .ba .before{clip-path:inset(0 0 0 var(--pos,50%))}
  .ba .before img{filter:saturate(1.04) contrast(1.02)}

  .ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;z-index:4;
    background:linear-gradient(180deg,transparent,var(--amber) 12%,var(--amber) 88%,transparent);
    box-shadow:0 0 26px 3px var(--glow)}
  .ba .handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;
    border-radius:50%;background:var(--amber);color:#1e1400;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 36px var(--glow),0 8px 22px rgba(0,0,0,.55)}
  .ba .handle .grip::before{content:"";position:absolute;inset:-9px;border-radius:50%;
    border:1px solid rgba(255,176,56,.55);animation:baPulse 2.4s ease-out infinite}
  @keyframes baPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
  .ba .tag{position:absolute;bottom:18px;z-index:3;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
    display:flex;align-items:center;gap:8px;
    padding:7px 14px;border-radius:100px;background:rgba(5,6,8,.62);backdrop-filter:blur(6px);border:1px solid var(--line)}
  .ba .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
    box-shadow:0 0 8px currentColor}
  .ba .tag.l{left:18px;color:var(--amber-2)}
  .ba .tag.r{right:18px;color:var(--muted)}
  .ba .tag.r::before{box-shadow:none;opacity:.5}

  /* ============ CATALOGUE (filtrable marque × catégorie) ============ */
  .filters{display:flex;flex-direction:column;gap:12px;margin:-28px 0 44px}
  .f-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
  .f-lbl{font-family:"Sora";font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted-2);margin-right:6px;flex:none;min-width:74px}
  .chip{font-family:"Sora";font-size:.82rem;color:var(--muted);background:var(--panel);
    border:1px solid var(--line-2);border-radius:100px;padding:9px 16px;cursor:pointer;
    transition:.3s var(--e1);display:inline-flex;align-items:center;gap:7px}
  .chip:hover:not(:disabled){border-color:var(--amber);color:var(--text)}
  .chip.is-on{background:var(--amber);border-color:var(--amber);color:#1e1400;font-weight:600}
  .chip .n{font-size:.7rem;opacity:.6;font-variant-numeric:tabular-nums}
  .chip:disabled{opacity:.4;cursor:not-allowed}
  .chip.ext{text-decoration:none}
  .prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .prod{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
    background:#14161c;border:1px solid var(--line);transition:transform .5s var(--e1),border-color .4s,box-shadow .5s}
  .prod:hover{transform:translateY(-6px);border-color:rgba(255,176,56,.4);box-shadow:0 26px 50px -30px rgba(0,0,0,.85)}
  /* flex:none — la carte étant un conteneur flex en colonne, la zone photo
     s'étirait pour absorber la place laissée par un bloc de texte plus court :
     les photos d'une même rangée n'avaient plus la même hauteur (365 vs 425 px).
     Le surplus va désormais au bloc de texte, qui le prend en bas. */
  /* min-height:0 — sans lui, la règle min-height:auto des éléments flex laisse
     une image plus haute que la case (OXO fait 150×401 px) repousser le cadre :
     cette carte-là mesurait 425 px de photo au lieu de 365. */
  .prod .pph{flex:none;min-height:0;aspect-ratio:4/5;display:grid;place-items:center;
    padding:12px;overflow:hidden;position:relative}
  .prod .pph:not(.gal) img{position:absolute;inset:0;width:100%;height:100%;
    padding:12px;box-sizing:border-box;object-fit:contain;
    transition:transform .6s var(--e1)}
  .prod .pph.gal img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .6s var(--e1)}
  .prod:hover .pph img{transform:scale(1.06)}

  /* Galerie multi-photos : images empilées en fondu, photo cliquable vers la fiche
     du fabricant. Les puces .gdot permettent de switcher à la main. */
  /* fond noir = celui des photos fabricant, pour éviter le rectangle en letterbox */
  .prod .pph.gal{position:relative;padding:0;background:#000}
  /* variante « visuel détouré » (GVA) : on garde le fond de la carte et on
     contient l'image au lieu de l'étirer (ratios variables d'un produit à l'autre) */
  .prod .pph.gal.gal-t{background:transparent}

  /* Les visuels GVA sont livrés détourés : ils se posent sur blanc comme les
     produits MIDI LUM, au lieu du fond noir des galeries photo. Vérifié image
     par image : les 35 ont bien un fond transparent. */
  .prod[data-brand="gva"] .pph.gal{background:#fff}
  .gal.gal-t .gfr img{object-fit:contain;padding:14px}
  .gal .gfr{position:absolute;inset:0;display:block}
  .gal .gfr img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
    opacity:0;transition:opacity .8s var(--e1),transform .6s var(--e1)}
  .gal .gfr img.is-on{opacity:1}
  .gal .ext-b{position:absolute;top:10px;right:10px;z-index:2;width:26px;height:26px;border-radius:50%;
    display:grid;place-items:center;font-size:11px;color:var(--muted);
    background:rgba(10,11,15,.6);border:1px solid var(--line-2);
    opacity:0;transition:opacity .4s,color .3s,border-color .3s}
  .prod:hover .gal .ext-b{opacity:1}
  .gal .gfr:hover + .gdots + .ext-b,.gal .gfr:focus-visible ~ .ext-b{opacity:1;color:var(--amber);border-color:var(--amber)}
  .gal .gdots{position:absolute;left:0;right:0;bottom:9px;z-index:3;display:flex;justify-content:center;gap:6px}
  .gal .gdot{width:6px;height:6px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.26);transition:background .3s,transform .3s}
  .gal .gdot:hover{background:rgba(255,255,255,.5)}
  .gal .gdot.is-on{background:var(--amber);transform:scale(1.3)}
  @media(prefers-reduced-motion:reduce){.gal .gfr img{transition:opacity .01s}}

  .prod .pin{flex:1;padding:14px 16px 17px;border-top:1px solid var(--line)}
  /* min-height = deux lignes : sans elle, un nom court et un nom long ne réservent
     pas la même place et les lignes de caractéristiques ne s'alignent plus d'une
     carte à l'autre sur une même rangée. */
  .prod .pn{font-family:"Sora";font-weight:600;font-size:.98rem;color:var(--text);
    line-height:1.25;min-height:2.5em}
  .prod .pd{font-size:.75rem;color:var(--amber-2);margin-top:3px}
  .prod .pv{font-size:.7rem;color:var(--muted-2);margin-top:6px}
  .prod[hidden]{display:none}

  /* ---- catalogue : barre de recherche + compteur ---- */
  .cat-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 30px}
  .cat-search{position:relative;flex:1 1 320px;max-width:420px}
  .cat-search input{width:100%;background:var(--panel);border:1px solid var(--line-2);
    border-radius:999px;color:var(--text);font-family:"Instrument Sans",sans-serif;font-size:.92rem;
    padding:13px 44px;outline:none;transition:border-color .35s var(--e1),background .35s var(--e1)}
  .cat-search input::placeholder{color:var(--muted-2)}
  .cat-search input:focus{border-color:rgba(255,176,56,.55);background:var(--panel-2)}
  .cat-search > svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none}
  .cat-search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;
    color:var(--muted-2);cursor:pointer;padding:8px;line-height:0;border-radius:50%}
  .cat-search .clr:hover{color:var(--text)}
  .cat-count{font-family:"Sora";font-size:.8rem;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
  .cat-count b{color:var(--amber-2);font-weight:600}

  /* ---- catalogue : un bloc dépliant par marque ---- */
  /* dégagement pour l'en-tête fixe quand on saute sur un bloc de marque */
  .mk{border-top:1px solid var(--line);scroll-margin-top:96px}
  .mk:last-of-type{border-bottom:1px solid var(--line)}
  .mk[hidden]{display:none}
  .mk-h{width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
    display:flex;align-items:center;gap:20px;padding:26px 4px;transition:opacity .3s var(--e1)}
  .mk-h:hover{opacity:.82}
  .mk-h:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:6px}
  .mk-n{font-family:"Sora";font-weight:600;font-size:1.34rem;color:var(--text);letter-spacing:-.01em}
  .mk-d{font-size:.83rem;color:var(--muted);flex:1;min-width:0}
  .mk-c{font-family:"Sora";font-size:.76rem;letter-spacing:.1em;color:var(--muted-2);
    border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;white-space:nowrap}
  .mk-x{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);
    display:grid;place-items:center;color:var(--amber-2);
    transition:transform .45s var(--e1),background .35s var(--e1)}
  .mk.is-open .mk-x{transform:rotate(180deg);background:rgba(255,176,56,.1)}
  .mk-body{padding:0 0 30px}
  .mk-more{display:flex;justify-content:center;padding:22px 0 0}
  .mk-more[hidden]{display:none}
  .mk-more button{background:none;border:1px solid var(--line-2);border-radius:999px;color:var(--muted);
    font-family:"Sora";font-size:.8rem;letter-spacing:.04em;padding:11px 22px;cursor:pointer;
    transition:border-color .35s var(--e1),color .35s var(--e1)}
  .mk-more button:hover{border-color:rgba(255,176,56,.5);color:var(--amber-2)}

  /* Lien étiré sur toute la carte : la carte entière devient cliquable sans
     envelopper son contenu, ce qui aurait cassé les filtres et les galeries. */
  /* Renvois vers les produits de la même famille, en bas de fiche. */
  .pr-proches{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
  .pr-proches .pp{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
    background:#14161c;border:1px solid var(--line);text-decoration:none;
    transition:transform .5s var(--e1),border-color .4s,box-shadow .5s}
  .pr-proches .pp:hover{transform:translateY(-6px);border-color:rgba(255,176,56,.4);
    box-shadow:0 26px 50px -30px rgba(0,0,0,.85)}
  .pr-proches .pp:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  .pr-proches .pp-v{flex:none;min-height:0;aspect-ratio:4/5;display:grid;place-items:center;padding:12px;overflow:hidden}
  .pr-proches .pp-v img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
    transition:transform .6s var(--e1)}
  .pr-proches .pp:hover .pp-v img{transform:scale(1.06)}
  .pr-proches .pp-n{font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:.98rem;
    color:var(--text);line-height:1.25;padding:14px 16px 0;border-top:1px solid var(--line)}
  .pr-proches .pp:hover .pp-n{color:var(--amber-2)}
  /* Variante « réalisations » : ce sont des photos de chantier, en paysage.
     Elles remplissent le cadre au lieu d'y flotter avec des marges vides. */
  .pr-proches.photos .pp-v{aspect-ratio:3/2;padding:0}
  .pr-proches.photos .pp-v img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}

  .pr-proches .pp-d{font-size:.75rem;color:var(--muted-2);line-height:1.5;padding:5px 16px 16px}

  /* Paragraphe de mise en oeuvre, sous les caractéristiques. */
  .pr-usage{color:var(--muted);font-size:1.04rem;line-height:1.7;max-width:74ch;margin-top:14px}

  @media(max-width:820px){ .pr-proches{grid-template-columns:1fr 1fr;gap:12px} }
  @media(max-width:520px){ .pr-proches{grid-template-columns:1fr} }

  .prod-lien{position:absolute;inset:0;z-index:3;border-radius:inherit}
  .prod-lien:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  .prod:has(.prod-lien){cursor:pointer}
  .prod:has(.prod-lien):hover .pn{color:var(--amber-2)}

  /* ============ PAGE PRODUIT ============ */
  .pr-top{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:center}
  .pr-vue{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--panel);
    display:grid;place-items:center;padding:clamp(20px,4vw,46px);overflow:hidden;
    min-height:calc(min(62vh,560px) + 2*clamp(20px,4vw,46px))}
  /* la lueur du luminaire : seul endroit où l'ambre sert de source, pas d'aplat */
  .pr-vue::after{content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;
    width:70%;height:52%;border-radius:50%;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(255,176,56,.16),transparent 70%);filter:blur(34px)}
  /* ESSAI — fond blanc derrière le visuel produit. Le halo ambré du panneau
     sombre n'a plus de sens sur du blanc : on l'éteint, et le filet passe en
     gris clair pour rester visible. */
  /* Fond blanc derrière les visuels produits : c'est la convention des
     catalogues de luminaires, et les détourages ont été vérifiés propres
     sur blanc. Le halo ambré du panneau sombre n'a plus lieu d'être. */
  .pr-vue.blanc{background:#fff;border-color:rgba(0,0,0,.12)}
  .pr-vue.blanc::after{display:none}
  /* Le fond dépend de la nature de l'image, pas du contexte : « det » pour un
     visuel détouré, « plein » pour une photo opaque. Les classes sont posées
     par tools/fonds-produits.mjs d'après le canal alpha du fichier. */
  .prod .pph.det{background:#fff}
  .prod .pph.plein{padding:0;background:#000}
  .prod .pph.plein img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
  .pr-proches .pp-v.det{background:#fff;border-bottom:1px solid rgba(0,0,0,.10)}
  .pr-proches .pp-v.plein{padding:0}
  .pr-proches .pp-v.plein img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}

  .pr-vue img{position:relative;z-index:1;max-height:min(62vh,560px);width:auto;max-width:100%;object-fit:contain}
  /* ── Fiche produit à plusieurs photos ───────────────────────────────
     Le changement de vue se fait sans une ligne de JavaScript : des boutons
     radio masqués pilotent l'affichage par le sélecteur « :checked ~ ».
     La navigation au clavier fonctionne donc nativement, et la page reste
     utilisable si le script ne se charge pas. */
  .pr-vue .pr-radio{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
  .pr-vue .pr-img{display:none}
  .pr-vue .pr-radio:nth-of-type(1):checked ~ img:nth-of-type(1),
  .pr-vue .pr-radio:nth-of-type(2):checked ~ img:nth-of-type(2),
  .pr-vue .pr-radio:nth-of-type(3):checked ~ img:nth-of-type(3),
  .pr-vue .pr-radio:nth-of-type(4):checked ~ img:nth-of-type(4){display:block}

  .pr-thumbs{position:absolute;left:0;right:0;bottom:16px;z-index:2;
    display:flex;justify-content:center;gap:10px}
  .pr-thumbs label{width:58px;height:72px;display:grid;place-items:center;padding:5px;
    background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:9px;cursor:pointer;
    transition:border-color .3s,transform .3s var(--e1)}
  .pr-thumbs label:hover{transform:translateY(-2px);border-color:rgba(0,0,0,.34)}
  .pr-thumbs label img{width:100%;height:100%;object-fit:contain;max-height:100%}
  .pr-vue .pr-radio:nth-of-type(1):checked ~ .pr-thumbs label:nth-of-type(1),
  .pr-vue .pr-radio:nth-of-type(2):checked ~ .pr-thumbs label:nth-of-type(2),
  .pr-vue .pr-radio:nth-of-type(3):checked ~ .pr-thumbs label:nth-of-type(3),
  .pr-vue .pr-radio:nth-of-type(4):checked ~ .pr-thumbs label:nth-of-type(4){
    border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
  .pr-vue .pr-radio:nth-of-type(1):focus-visible ~ .pr-thumbs label:nth-of-type(1),
  .pr-vue .pr-radio:nth-of-type(2):focus-visible ~ .pr-thumbs label:nth-of-type(2),
  .pr-vue .pr-radio:nth-of-type(3):focus-visible ~ .pr-thumbs label:nth-of-type(3),
  .pr-vue .pr-radio:nth-of-type(4):focus-visible ~ .pr-thumbs label:nth-of-type(4){
    outline:2px solid var(--amber);outline-offset:3px}
  /* les vignettes prennent de la place en bas : on rehausse l'image */
  .pr-vue:has(.pr-thumbs){padding-bottom:104px}
  @media(max-width:760px){
    .pr-thumbs label{width:50px;height:62px}
    .pr-vue:has(.pr-thumbs){padding-bottom:88px}
  }

  .pr-vue:has(.pr-photo){padding:0}
  .pr-vue img.pr-photo{max-height:none;width:100%;height:100%;object-fit:cover}
  .pr-vide{color:var(--muted-2);font-family:"Sora";font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}

  .pr-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
  .pr-badges span{font-family:"Sora";font-size:.72rem;letter-spacing:.09em;color:var(--muted);
    border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}
  .pr-cle{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
  .pr-cle b{font-family:"Sora";font-weight:600;font-size:1.5rem;color:var(--amber-2);
    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .pr-cle span{font-size:.8rem;color:var(--muted)}
  .pr-dl{margin-top:26px}
  .pr-devis{margin-top:10px;margin-left:10px}

  .pr-h2{font-family:"Sora";font-weight:300;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--text);
    margin:clamp(46px,7vw,84px) 0 22px;letter-spacing:-.02em}

  .pr-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px);
    border-top:1px solid var(--line);margin:0}
  .pr-l{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
    padding:14px 2px;border-bottom:1px solid var(--line)}
  .pr-l dt{font-size:.83rem;color:var(--muted);flex:none}
  .pr-l dd{margin:0;font-size:.88rem;color:var(--text);text-align:right}

  .pr-vars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
  /* Quatre colonnes de tableau ne tiennent pas dans une carte de 230 px : les
     en-têtes se collaient les uns aux autres. On élargit dans ce cas seul. */
  .pr-vars-large{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
  .pr-var{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px;
    transition:border-color .4s var(--e1),transform .4s var(--e1)}
  .pr-var:hover{border-color:rgba(255,176,56,.34);transform:translateY(-4px)}
  .pr-var-n{font-family:"Sora";font-weight:600;font-size:1rem;color:var(--text);margin-bottom:10px}
  .pr-var-d{font-size:.76rem;color:var(--muted-2);margin-bottom:12px}
  /* tableau puissance / flux / efficacité, une ligne par configuration */
  .pr-tab{width:100%;border-collapse:collapse;margin-top:4px;font-variant-numeric:tabular-nums}
  .pr-tab th{font-family:"Sora";font-weight:500;font-size:.66rem;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted-2);text-align:right;padding:0 0 7px 10px;
    border-bottom:1px solid var(--line);white-space:nowrap}
  .pr-tab th:first-child{text-align:left}
  .pr-tab td{font-size:.83rem;color:var(--muted);text-align:right;padding:7px 0 7px 10px;
    border-bottom:1px solid var(--line)}
  .pr-tab td:last-child{white-space:nowrap;font-size:.78rem;color:var(--muted-2)}
  .pr-tab td:first-child{text-align:left;color:var(--amber-2);font-weight:500}
  .pr-tab tr:last-child td{border-bottom:0}
  .pr-nc{text-align:left !important;color:var(--muted-2) !important;font-style:italic}
  .pr-poids{display:inline-block;margin-left:12px;font-family:"Sora";font-size:.72rem;
    letter-spacing:.08em;color:var(--muted-2)}
  .exp-img{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);
    aspect-ratio:16/7;background:var(--panel)}
  .exp-img img{width:100%;height:100%;object-fit:cover;display:block}
  /* Variante pour une source de faible définition : on la cadre à sa taille
     réelle plutôt que de l'étirer sur toute la largeur, où elle serait floue. */
  .exp-img-petite{max-width:560px;aspect-ratio:5/4;margin-inline:auto}
  @media(max-width:640px){.exp-img{aspect-ratio:4/3}}

  /* ============ PAGE CONTACT ============ */
  .ct-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,64px);align-items:start}
  .ct-l{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
  .ct-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .ct-l label{font-family:"Sora";font-size:.78rem;letter-spacing:.05em;color:var(--muted)}
  .ct-l label span{color:var(--amber-2)}
  .ct-l input,.ct-l select,.ct-l textarea{
    background:var(--panel);border:1px solid var(--line-2);border-radius:12px;color:var(--text);
    font-family:"Instrument Sans",sans-serif;font-size:.95rem;padding:13px 15px;outline:none;
    transition:border-color .35s var(--e1),background .35s var(--e1)}
  .ct-l textarea{resize:vertical;min-height:150px;line-height:1.6}
  .ct-l input:focus,.ct-l select:focus,.ct-l textarea:focus{
    border-color:rgba(255,176,56,.55);background:var(--panel-2)}
  .ct-l input:user-invalid,.ct-l textarea:user-invalid{border-color:#b4472b}
  .ct-l select{appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ba2af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 15px center}
  /* champ appât : hors écran plutôt que display:none, que certains robots détectent */
  .ct-appat{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .ct-envoi{margin-top:6px}
  .ct-rgpd{font-size:.78rem;color:var(--muted-2);margin-top:16px;max-width:52ch}
  .ct-rgpd a{color:var(--muted);border-bottom:1px solid var(--line-2)}
  .ct-rgpd a:hover{color:var(--amber-2)}

  .ct-etat{border-radius:12px;padding:14px 18px;margin-bottom:24px;font-size:.92rem;
    border:1px solid var(--line-2);background:var(--panel)}
  .ct-etat.ok{border-color:rgba(255,176,56,.5);color:var(--amber-3)}
  .ct-etat.ko{border-color:rgba(180,71,43,.6);color:#e0a08e}
  .ct-etat[hidden]{display:none}

  .ct-info{background:var(--panel);border:1px solid var(--line);border-radius:18px;
    padding:clamp(24px,2.6vw,32px)}
  .ct-h2{font-family:"Sora";font-weight:600;font-size:.82rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted-2);margin:0 0 14px}
  .ct-h2:not(:first-child){margin-top:36px}
  .ct-dl{margin:0}
  .ct-dl dt{font-size:.76rem;color:var(--muted-2);margin-top:14px}
  .ct-dl dt:first-child{margin-top:0}
  .ct-dl dd{margin:3px 0 0;font-size:.94rem;color:var(--text);line-height:1.55}
  .ct-dl a{color:var(--amber-2)}
  .ct-p,.ct-ul{font-size:.9rem;color:var(--muted);line-height:1.7}
  .ct-ul{margin:0;padding-left:18px}
  .ct-ul li{margin-bottom:5px}
  /* Déroulé « ce qui se passe ensuite » : la numérotation encode une suite
     d'étapes réelles, elle n'est pas décorative. */
  .ct-ol{counter-reset:etape;list-style:none;margin:12px 0 20px;padding:0}
  .ct-ol li{position:relative;counter-increment:etape;padding-left:31px;margin-bottom:11px;
    font-size:.9rem;color:var(--muted);line-height:1.7}
  .ct-ol li::before{content:counter(etape);position:absolute;left:0;top:2px;
    width:21px;height:21px;display:grid;place-items:center;border-radius:50%;
    border:1px solid var(--line-2);font-family:"Sora",system-ui,sans-serif;
    font-size:.7rem;color:var(--amber-2)}
  .ct-p strong{color:var(--text);font-weight:600}

  @media(max-width:900px){
    .ct-grid{grid-template-columns:1fr}
    .ct-2{grid-template-columns:1fr;gap:0}
    .ct-info{border-left:0;border-top:1px solid var(--line);padding:30px 0 0}
  }

  /* Carte d'expertise entièrement cliquable, sans envelopper son contenu */
  .card-lien{position:absolute;inset:0;z-index:3;border-radius:inherit}
  .card-lien:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  .card:has(.card-lien){cursor:pointer}
  .card:has(.card-lien):hover h3{color:var(--amber-2)}

  /* Bas de page expertise : accès à la gamme concernée, puis aux autres expertises */
  .exp-liens,.exp-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding-top:30px;margin-top:30px;border-top:1px solid var(--line)}
  .exp-liens .chip,.exp-nav a{font-family:"Sora";font-size:.82rem;color:var(--muted);
    background:var(--panel);border:1px solid var(--line-2);border-radius:999px;
    padding:9px 17px;transition:border-color .35s var(--e1),color .35s var(--e1)}
  .exp-liens .chip:hover,.exp-nav a:hover{border-color:rgba(255,176,56,.5);color:var(--amber-2)}

  .pr-manque{color:var(--muted);font-size:.92rem;margin-top:24px}
  .pr-manque a{color:var(--amber-2);border-bottom:1px solid var(--line-2)}

  @media(max-width:900px){
    .pr-top{grid-template-columns:1fr}
    .pr-specs{grid-template-columns:1fr}
    .pr-devis{margin-left:0}
  }

  .cat-vide{padding:56px 0;text-align:center;color:var(--muted)}
  .cat-vide[hidden]{display:none}
  .cat-vide b{display:block;font-family:"Sora";font-size:1.1rem;color:var(--text);margin-bottom:8px}

  @media(max-width:720px){
    .mk-h{flex-wrap:wrap;gap:10px;padding:22px 2px}
    .mk-d{flex:1 1 100%;order:3}
    .mk-n{flex:1}
  }
  /* fiche atteinte depuis une ancienne URL produit : on la signale brièvement */
  .prod.is-cible{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 0 42px -8px var(--glow)}
  @media (prefers-reduced-motion:no-preference){
    .prod.is-cible{animation:cible 2.6s var(--e1)}
    @keyframes cible{0%,72%{border-color:var(--amber)}100%{border-color:var(--line)}}
  }
  /* le titre du catalogue ne doit pas passer sous l'en-tête fixe au moment du saut */
  .prod{scroll-margin-top:110px}
  .prod-empty{color:var(--muted);text-align:center;padding:60px 20px;font-size:1.05rem}
  .prod-empty a{color:var(--amber-2)}
  @media(max-width:980px){.prods{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:680px){.prods{grid-template-columns:repeat(2,1fr)}.f-lbl{min-width:100%;margin-bottom:2px}}

  /* ============ RÉALISATIONS ============ */
  .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
  .shot{position:relative;border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--line);
    text-decoration:none;color:inherit;display:block}
  .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e1),filter 1s var(--e1);
    filter:saturate(.85) brightness(.82)}
  .shot:hover img{transform:scale(1.07);filter:saturate(1.1) brightness(1.05)}
  .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,6,8,.9) 0%,transparent 58%)}
  .shot .meta{position:absolute;left:26px;bottom:24px;z-index:2;transition:transform .5s var(--e1)}
  .shot:hover .meta{transform:translateY(-4px)}
  .shot .meta .t{font-family:"Sora";font-weight:600;font-size:1.2rem}
  .shot .meta .s{font-size:.85rem;color:var(--amber-2);letter-spacing:.03em;margin-top:2px}
  .shot .arrow{position:absolute;top:22px;right:22px;z-index:2;width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--text);
    background:rgba(5,6,8,.4);backdrop-filter:blur(6px);opacity:0;transform:translateY(-6px);transition:.4s var(--e1)}
  .shot:hover .arrow{opacity:1;transform:none}
  .shot.tall{grid-column:span 4;height:560px}
  .shot.mid{grid-column:span 8;height:560px}
  .shot.half{grid-column:span 6;height:380px}

  /* ============ VIDÉO MAPPING ============ */
  .mapping{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);
    min-height:500px;display:flex;align-items:flex-end;padding:52px}
  .mapping img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.5)}
  .mapping::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,rgba(5,6,8,.92) 0%,rgba(5,6,8,.35) 62%,transparent 100%)}
  .mapping .m-in{position:relative;z-index:2;max-width:46ch}
  .mapping h3{font-size:clamp(1.9rem,3.8vw,2.8rem);font-weight:400}
  .mapping p{color:var(--muted);margin-top:16px;font-size:1.08rem}
  .play{width:70px;height:70px;border-radius:50%;background:var(--amber);color:#1e1400;display:flex;
    align-items:center;justify-content:center;margin-bottom:30px;box-shadow:0 0 40px var(--glow);position:relative}
  .play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--amber);
    animation:ring 2.4s ease-out infinite;opacity:0}
  @keyframes ring{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.5);opacity:0}}

  /* ============ SOCIÉTÉ / STATS ============ */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .stat{background:var(--bg-2);padding:44px 30px;transition:background .5s}
  .stat:hover{background:var(--panel-2)}
  .stat .big{font-family:"Sora";font-size:clamp(2.6rem,4.4vw,3.8rem);font-weight:300;color:var(--text);
    font-variant-numeric:tabular-nums}
  .stat .big span{color:var(--amber-2)}
  .stat .lbl{color:var(--muted);font-size:.95rem;margin-top:10px}
  .about{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center;margin-top:80px}
  .about .lead{color:var(--text);font-size:1.45rem;font-family:"Sora";font-weight:300;line-height:1.42;margin-bottom:24px}
  .about p{color:var(--muted);font-size:1.06rem;margin-bottom:16px}
  .partners{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  .partners span{font-size:.82rem;color:var(--muted);border:1px solid var(--line-2);padding:8px 15px;border-radius:100px;
    transition:.3s}
  .partners span:hover{border-color:var(--amber);color:var(--amber-2)}

  /* société : histoire + fondateur */
  .soc-story{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:start;margin-top:90px}
  .soc-story .lead{color:var(--text);font-size:1.5rem;font-family:"Sora";font-weight:300;line-height:1.4;margin-bottom:26px}
  .soc-story p{color:var(--muted);font-size:1.06rem;margin-bottom:16px}
  .founder{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px;position:relative;overflow:hidden}
  .founder::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,176,56,.12),transparent 68%)}
  .founder .mono{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    font-family:"Sora";font-weight:600;font-size:1.3rem;color:var(--amber);background:rgba(255,176,56,.08);
    border:1px solid var(--line-2);margin-bottom:22px}
  .founder .fname{font-family:"Sora";font-weight:600;font-size:1.15rem}
  .founder .frole{color:var(--amber-2);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
  .founder .fbio{color:var(--muted);font-size:1rem;line-height:1.5;margin-top:20px}

  /* société : sous-titres de blocs */
  .soc-h{font-family:"Sora";font-weight:500;font-size:clamp(1.35rem,2.6vw,1.7rem);margin:104px 0 8px}
  .soc-sub{color:var(--muted);font-size:1.06rem;max-width:62ch;margin-bottom:34px}

  /* société : valeurs */
  .values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .val{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px;position:relative;overflow:hidden;
    transition:border-color .5s,transform .5s var(--e1),background .5s}
  .val:hover{border-color:rgba(255,176,56,.32);transform:translateY(-5px);background:var(--panel-2)}
  .val .glyph{width:48px;height:48px;border-radius:13px;border:1px solid var(--line-2);display:flex;align-items:center;
    justify-content:center;color:var(--amber);background:rgba(255,176,56,.06);margin-bottom:20px}
  .val .glyph svg{width:24px;height:24px}
  .val h2,.val h3{font-family:"Sora";font-weight:500;font-size:1.2rem;
    line-height:1.6;letter-spacing:normal;margin-bottom:8px}
  .val p{color:var(--muted);font-size:.98rem}

  /* société : parcours distributeur -> fabricant */
  .journey{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .step{background:var(--bg-2);padding:34px 28px;transition:background .5s}
  .step:hover{background:var(--panel-2)}
  .step .sn{font-family:"Sora";font-size:12px;color:var(--amber-2);letter-spacing:.14em}
  .step h3{font-family:"Sora";font-weight:500;font-size:1.12rem;
    line-height:1.6;letter-spacing:normal;margin:12px 0 8px}
  .step p{color:var(--muted);font-size:.92rem}

  @media(max-width:900px){.soc-story{grid-template-columns:1fr;gap:40px}}
  @media(max-width:760px){.values{grid-template-columns:1fr}.journey{grid-template-columns:1fr 1fr}}

  /* ============ CTA ============ */
  .cta{position:relative;text-align:center;padding:150px 24px;overflow:hidden}
  .cta::before{content:"";position:absolute;left:50%;top:60%;width:1000px;height:1000px;transform:translate(-50%,-50%);
    border-radius:50%;background:radial-gradient(circle,rgba(255,176,56,.15),transparent 62%);z-index:0}
  .cta .c-in{position:relative;z-index:2;max-width:38ch;margin:0 auto}
  .cta h2{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:300;line-height:1.14}
  .cta h2 b{font-weight:600;color:var(--amber-2)}
  .cta p{color:var(--muted);margin:22px auto 38px;font-size:1.14rem}

  /* ============ FOOTER ============ */
  footer{border-top:1px solid var(--line);padding:72px 0 44px;background:var(--bg-2)}
  .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
  p.et-part{font-family:"Sora",system-ui,sans-serif;font-weight:700;font-size:.78rem;line-height:1.6;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}

  .foot h2{font-family:"Instrument Sans",system-ui,sans-serif;font-weight:700;font-size:.78rem;
    line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
  .foot a{display:block;color:var(--muted);font-size:.95rem;padding:6px 0;transition:color .25s}
  .foot a:hover{color:var(--amber-2)}
  .foot .co{max-width:32ch;color:var(--muted);font-size:.95rem;margin-top:18px}
  .foot-b{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:60px;padding-top:28px;
    border-top:1px solid var(--line);color:var(--muted-2);font-size:.85rem}

  /* ============ NOS LUMINAIRES — showroom catalogue (survol = mise en lumière) ============ */
  /* fond beige = teinte exacte du fond des rendus (#d2af8f) -> les produits se fondent sans découpe */
  .street{background:linear-gradient(180deg,#cbb388,#bfa579);position:relative;overflow:hidden;
    border-top:1px solid rgba(60,45,20,.16);border-bottom:1px solid rgba(60,45,20,.16)}
  .street .wrap{position:relative;z-index:2;padding-top:104px}
  .street .s-head{text-align:center;max-width:60ch;margin:0 auto}
  .street .s-head .kicker{color:#563307;justify-content:center}
  .street .s-head .kicker::before{background:#563307;opacity:.6}
  .street .s-head h2{font-size:clamp(1.9rem,4.4vw,3.3rem);font-weight:300;color:#241b0e;line-height:1.16}
  .street .s-head h2 b{font-weight:600;color:#241b0e}
  .street .s-head p{color:#544326;margin-top:16px}
  .fams{margin-top:56px;display:flex;flex-direction:column;gap:48px}
  .fam-h{display:flex;align-items:baseline;gap:14px;padding-bottom:13px;margin-bottom:20px;
    border-bottom:1px solid rgba(60,45,20,.22)}
  .fam-h .fn{font-family:"Sora";font-weight:700;font-size:.78rem;color:#8a5a12;letter-spacing:.04em}
  .fam-h h3{font-family:"Sora";font-weight:600;font-size:clamp(1.05rem,2vw,1.32rem);color:#241b0e}
  .fam-h p{font-size:.8rem;color:#6a5630;margin-left:auto;text-align:right;padding-left:12px}
  .lamps{display:flex;flex-wrap:wrap;gap:14px}
  .lamp3{flex:0 0 186px;position:relative;border-radius:16px;overflow:hidden;cursor:pointer;background:#d2af8f;
    box-shadow:0 14px 30px -18px rgba(50,32,10,.55);
    transition:transform .5s var(--e1),box-shadow .55s var(--e1)}
  .lamp3.on,.lamp3:hover{transform:translateY(-9px);box-shadow:0 32px 54px -22px rgba(150,90,15,.6)}
  .lamp3 .halo{position:absolute;left:50%;top:28%;width:155%;aspect-ratio:1;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(255,241,206,.95),rgba(255,235,190,0) 58%);opacity:0;
    transition:opacity .6s var(--e1);pointer-events:none;z-index:0}
  .lamp3.on .halo,.lamp3:hover .halo{opacity:1}
  .lamp3 .beam{display:none}
  .lamp3 .prod{position:relative;z-index:1;height:300px;display:grid;place-items:center;padding:6px 4px 0}
  .lamp3 .prod img{max-width:100%;max-height:100%;object-fit:contain;
    transition:transform .6s var(--e1),filter .5s var(--e1)}
  .lamp3.on .prod img,.lamp3:hover .prod img{transform:scale(1.05)}
  .lamp3 .cap{position:relative;z-index:2;text-align:center;padding:2px 8px 16px}
  .lamp3 .cap .t{font-family:"Sora";font-weight:600;font-size:.82rem;color:#241b0e;line-height:1.2}
  .lamp3 .cap .s{font-size:.68rem;color:#493a1e;margin-top:3px;transition:color .45s}
  .lamp3.on .cap .s,.lamp3:hover .cap .s{color:#563307}
  .street .hint{text-align:center;color:#493c20;font-size:11.5px;letter-spacing:.24em;
    text-transform:uppercase;padding:40px 0 54px;position:relative;z-index:2}

  /* ============ TUILES CATÉGORIES (cliquables -> pages dédiées) ============ */
  .cats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:16px}
  .cat{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
    background:#14161c;border:1px solid var(--line);text-decoration:none;
    transition:transform .5s var(--e1),border-color .5s,box-shadow .5s}
  .cat::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s;
    background:radial-gradient(120% 78% at 50% 0%,rgba(255,176,56,.13),transparent 62%)}
  .cat:hover{transform:translateY(-8px);border-color:rgba(255,176,56,.4);box-shadow:0 30px 60px -32px rgba(0,0,0,.85)}
  .cat:hover::before{opacity:1}
  .cat .ph{position:relative;z-index:1;aspect-ratio:4/5;display:grid;place-items:center;
    padding:14px;background:#fff;border-radius:17px 17px 0 0}
  .cat .ph img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .6s var(--e1)}
  .cat:hover .ph img{transform:scale(1.06)}
  /* align-items:center plaçait la flèche au milieu d'un bloc de hauteur variable :
     selon que le titre tenait sur une ou deux lignes, les cinq flèches se
     retrouvaient à cinq hauteurs différentes. Calées en haut, elles s'alignent
     toutes sur la première ligne du titre. */
  .cat .ci{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
    padding:15px 16px 18px;border-top:1px solid var(--line)}
  .cat .ct{font-family:"Sora";font-weight:600;font-size:.94rem;color:var(--text);line-height:1.2}
  .cat .cs{font-size:.71rem;color:var(--muted);margin-top:3px}
  .cat .arw{flex:none;margin-top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    border:1px solid var(--line-2);color:var(--amber-2);transition:background .4s,transform .4s,color .4s}
  .cat:hover .arw{background:var(--amber);color:#1e1400;transform:translateX(2px)}

  /* ============ TUILES FOURNISSEURS / MARQUES ============ */
  /* une colonne par marque : la rangée reste complète, sans tuile orpheline */
  .brands{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
  .brand-t{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:118px;
    padding:26px 28px;border-radius:16px;background:var(--panel);border:1px solid var(--line);
    text-decoration:none;overflow:hidden;transition:transform .5s var(--e1),border-color .5s,background .5s}
  .brand-t::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);
    transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--e1)}
  .brand-t:hover{transform:translateY(-6px);border-color:rgba(255,176,56,.32);background:var(--panel-2)}
  .brand-t:hover::after{transform:scaleY(1)}
  .brand-t .bn{font-family:"Sora";font-weight:600;font-size:1.32rem;color:var(--text)}
  .brand-t .bd{font-size:.8rem;color:var(--muted)}
  .brand-t .barw{position:absolute;top:22px;right:24px;color:var(--amber-2);opacity:0;transform:translateX(-4px);transition:.4s var(--e1)}
  .brand-t:hover .barw{opacity:1;transform:none}
  /* tuile / puce informative, sans destination : aucune promesse de clic */
  .brand-t.is-inert:hover{transform:none;border-color:var(--line);background:var(--panel)}
  .brand-t.is-inert:hover::after{transform:scaleY(0)}
  .chip.is-inert{cursor:default;opacity:.62}
  @media(max-width:860px){.cats{grid-template-columns:repeat(3,1fr)}.brands{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.cats{grid-template-columns:repeat(2,1fr)}.brands{grid-template-columns:1fr}}
  @media(max-width:900px){
    .lamps{gap:12px}.lamp3{flex-basis:calc(33.333% - 8px)}.fam-h p{display:none}
    .nav-toggle{display:block;position:relative;z-index:51;
      width:44px;height:44px;margin:-6px -10px;display:grid;place-items:center;
      line-height:1;-webkit-tap-highlight-color:transparent}
    /* menu mobile : panneau plein écran ouvert par le hamburger */
    .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:stretch;gap:4px;
      background:rgba(6,8,12,.98);backdrop-filter:blur(20px);padding:100px 26px 44px;z-index:50;
      opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--e1),transform .3s var(--e1),visibility .3s}
    header.nav-open .nav-links{opacity:1;visibility:visible;transform:none}
    .nav-links a{font-size:1.3rem;padding:17px 4px;color:var(--text);border-bottom:1px solid var(--line)}
    .nav-links a:not(.btn)::after{display:none}
    .nav-links a.btn{margin-top:20px;justify-content:center;font-size:1.02rem;padding:16px 22px;border-bottom:0}
    .about{grid-template-columns:1fr;gap:38px}.stats{grid-template-columns:repeat(2,1fr)}
    .card.big,.card.sm,.card.wide{grid-column:span 12}
    .shot.tall,.shot.mid,.shot.half{grid-column:span 12;height:360px}
    .soc-story{grid-template-columns:1fr;gap:34px}.values{grid-template-columns:1fr}
    .journey{grid-template-columns:1fr 1fr}
    .foot{grid-template-columns:1fr 1fr}.sec,.ba-sec{padding:90px 0}.ba{aspect-ratio:16/9}
  }
  body.nav-lock{overflow:hidden}

  /* ============ PAGES LÉGALES (texte long) ============ */
  /* ── Notes d'expertise ──────────────────────────────────────────────
     Ces pages alignaient quatre sujets indépendants dans une seule colonne
     de prose : on ne voyait plus où l'un finissait et où l'autre commençait.
     Chacun devient une note autonome. Les valeurs techniques passent en
     ambre, comme les chiffres clés des fiches produits : elles se retrouvent
     d'un coup d'œil sans avoir à relire le paragraphe. */
  .exp-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
  .exp-note{background:var(--panel);border:1px solid var(--line);border-radius:18px;
    padding:clamp(22px,2.4vw,32px)}
  .exp-note h2{font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:1.16rem;
    line-height:1.32;letter-spacing:-.01em;color:var(--text);margin:0 0 16px}
  .exp-note h2::after{content:"";display:block;width:34px;height:2px;margin-top:15px;
    background:var(--amber);border-radius:2px}
  .exp-note p{color:var(--muted);font-size:.98rem;line-height:1.74;margin:0 0 13px}
  .exp-note p:last-child{margin-bottom:0}
  .exp-note strong{color:var(--amber-2);font-weight:600}
  /* un nombre impair de notes : la dernière prend toute la largeur plutôt
     que de laisser une demi-ligne vide */
  .exp-note:last-child:nth-child(odd){grid-column:1 / -1}
  @media(max-width:900px){ .exp-notes{grid-template-columns:1fr;gap:14px} }

  .legal{max-width:76ch;color:var(--muted);font-size:1rem;line-height:1.72}
  .legal h2{font-family:"Sora";font-weight:600;font-size:1.22rem;color:var(--text);margin:40px 0 12px;letter-spacing:-.01em}
  .legal h2:first-child{margin-top:0}
  .legal p{margin-bottom:14px}
  .legal ul{margin:0 0 16px 20px}
  .legal li{margin-bottom:7px}
  .legal a{color:var(--amber-2);text-decoration:underline;text-underline-offset:2px}
  .legal a:hover{color:var(--amber)}
  .legal strong{color:var(--text);font-weight:600}
  .legal .todo{color:var(--amber-2);font-style:italic}
  .legal .updated{font-size:.9rem;color:var(--muted-2);margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}

  /* ============ PAGE RÉALISATION (fiche chantier) ============ */
  .rea-hero{border-radius:20px;overflow:hidden;border:1px solid var(--line-2);margin-bottom:46px;aspect-ratio:16/9;
    box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
  .rea-hero img{width:100%;height:100%;object-fit:cover;display:block}
  .rea-body{display:grid;grid-template-columns:1.6fr .9fr;gap:48px;align-items:start}
  .rea-txt p{color:var(--muted);font-size:1.06rem;line-height:1.72;margin-bottom:16px}
  .rea-txt p strong{color:var(--text)}
  .rea-txt h2{font-family:"Sora";font-weight:600;font-size:1.24rem;color:var(--text);margin:34px 0 12px}
  .rea-meta{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;position:sticky;top:96px}
  .rea-meta dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
  .rea-meta dd{color:var(--text);font-size:1rem;margin:0 0 18px}
  .rea-meta dd:last-of-type{margin-bottom:0}
  .rea-back{display:inline-flex;align-items:center;gap:9px;margin-top:46px;color:var(--amber-2);font-weight:600;font-size:.95rem}
  .rea-back:hover{color:var(--amber)}
  @media(max-width:760px){.rea-body{grid-template-columns:1fr;gap:28px}.rea-meta{position:static}}

  /* ============ OPTIMISATION TÉLÉPHONE (dimensionnement compact) ============ */
  @media(max-width:600px){
    .wrap{padding-left:18px;padding-right:18px}
    .sec{padding-top:54px;padding-bottom:54px}
    .ba-sec{padding:54px 0}
    .kicker{margin-bottom:15px}
    .sec-head{margin-bottom:30px}
    .sec-head h1,.sec-head h2{font-size:1.72rem;line-height:1.24}
    .sec-head p{font-size:1rem;margin-top:15px}
    /* hero un peu plus compact */
    .hero h1{font-size:2.5rem}
    .hero .sub{font-size:1rem}
    /* cartes expertise */
    .bento{gap:14px}
    .card{padding:24px}
    .card h3{font-size:1.28rem;margin:12px 0 8px}
    .card p{font-size:.96rem}
    .card .glyph{width:44px;height:44px;margin-bottom:16px}
    .card.big{min-height:auto}
    /* chiffres société */
    .stat{padding:26px 20px}
    .stat .big{font-size:2.15rem}
    .stat .lbl{font-size:.86rem;margin-top:8px}
    /* catalogue */
    .filters{margin:0 0 26px}
    .prods{gap:12px}
    .prod .pph{padding:8px}
    .prod .pin{padding:12px 13px 14px}
    .prod .pn{font-size:.9rem}
    .prod .pd{font-size:.72rem}
    .prod .pv{font-size:.68rem}
    /* fournisseurs / catégories */
    .brand-t{min-height:96px;padding:20px 20px}
    .brand-t .bn{font-size:1.15rem}
    /* réalisations */
    .shot.tall,.shot.mid,.shot.half{height:300px}
    /* CTA */
    .cta{padding:78px 20px}
    .cta h2{font-size:2rem}
    .cta p{font-size:1rem;margin:16px auto 26px}
    /* pied de page */
    footer{padding:48px 0 32px}
    .foot{gap:28px;margin-bottom:0}
    .foot-b{margin-top:36px;padding-top:22px}
    /* sous-pages société / mise en lumière */
    .page-intro{padding:116px 0 16px}
    .soc-h{margin-top:60px;font-size:1.32rem}
    .soc-sub{font-size:1rem;margin-bottom:24px}
    .soc-story{gap:28px}
    .soc-story .lead,.about .lead{font-size:1.2rem;margin-bottom:18px}
    .soc-story p,.about p{font-size:1rem}
    .founder{padding:26px}
    .val{padding:24px}
    .val h2,.val h3{font-size:1.12rem}
    .step{padding:26px 22px}
  }
  @media(max-width:560px){.stats{grid-template-columns:1fr}.foot{grid-template-columns:1fr}.lamp3{flex-basis:calc(50% - 6px)}
    .hero-cta .btn{width:100%;justify-content:center}
    .journey{grid-template-columns:1fr}}
  @media(max-width:380px){
    .sec-head h1,.sec-head h2{font-size:1.54rem}
    .hero h1{font-size:2.2rem}
    .stat .big{font-size:2rem}
  }
  /* écrans tactiles : cibles plus grandes, cartes déjà « survolées » */
  @media(pointer:coarse){
    .gal .gdot{width:11px;height:11px;padding:7px;box-sizing:content-box;
      background-clip:content-box}
    .gal .gdots{gap:2px;bottom:5px}
    .gal .ext-b{opacity:1}
    .prod .pph img,.prod:hover .pph img{transform:none}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1!important;transform:none!important}#scene{opacity:1!important}.loader{display:none!important}
  }

  /* ============ SOUS-PAGES (société, mise en lumière…) ============ */
  .page-intro{position:relative;padding:150px 0 30px;overflow:hidden}
  .page-intro::before{content:"";position:absolute;left:50%;top:-40%;width:900px;height:900px;transform:translateX(-50%);
    border-radius:50%;background:radial-gradient(circle,rgba(255,176,56,.10),transparent 62%);z-index:0;pointer-events:none}
  .page-intro .wrap{position:relative;z-index:1}
  .crumb{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;color:var(--muted-2);margin-bottom:26px}
  .crumb a{color:var(--muted-2);transition:color .25s}
  .crumb a:hover{color:var(--amber-2)}
  /* Confort tactile : on épaissit la zone cliquable sans déplacer le texte. */
  .crumb a{display:inline-block;padding:4px 2px;margin:-4px -2px}
  .foot-b a{display:inline-block;padding:5px 0;margin:-5px 0}

  /* ── Confort de lecture et de saisie sur téléphone ──────────────────
     Deux corrections mesurées sur écran de 390 px :

     1. plancher de lisibilité à 12 px. Le desktop garde ses petites
        capitales ; sur mobile elles descendaient jusqu'à 10,5 px, ce qui
        n'est plus lisible à bout de bras.

     2. champs de formulaire à 16 px. En dessous de ce seuil, iOS zoome de
        lui-même sur le champ au moment où l'on écrit : la page saute et il
        faut la repincer pour revenir. C'est le réglage, pas le goût, qui
        commande cette valeur. */
  @media(max-width:760px){
    .pr-specs th,.pr-specs td,.pr-vars-large th,.pr-vars-large td,
    .ct-dl dt,.pr-badges span,.pr-poids,.prod .pd,.prod .pv,
    .f-lbl,.ext-b,.cat .cs,.tag,.hero-credit,.crumb,.kicker{font-size:12px}
    .ct-form input,.ct-form select,.ct-form textarea{font-size:16px}
  }