/* ==========================================================================
   GRIZZLIZ — Page Pro / BtoB (hub /pro). Aménagement de salles Fujimats.
   Charte Nike/Grizzliz : encre/blanc/soft-cloud, plat (0 ombre/gradient déco),
   ZÉRO rouge, ZÉRO crème. Bebas Neue titres, boutons pilules.

   IMPORTANT : tout est scopé sous #grz-pro pour ne PAS impacter le reste du
   site (le thème a ses propres reset/body/.btn/img). Ne jamais retirer le
   préfixe #grz-pro. Chargé uniquement sur la page CMS pro via assets.yml.
   Source maquette : scratchpad pro-mockup/index-v2.html.
   ========================================================================== */
#grz-pro{
  --ink:#111111; --canvas:#fff; --cloud:#f5f5f5;
  --charcoal:#39393b; --ash:#4b4b4d; --mute:#707072; --stone:#9e9ea0;
  --hairline:#cacacb; --hairline-soft:#e5e5e5;
  --gp-display:'Bebas Neue','bebas_neueregular','helvetica_neue_lt_std','Helvetica Neue',Arial,sans-serif;
  --gp-heading:'Inter','helvetica_neue_lt_std','Helvetica Neue',Arial,sans-serif;
  --gp-body:'Inter','helvetica_neue_lt_std','Helvetica Neue',Arial,sans-serif;
  /* --radius:0 → boutons/champs RECTANGULAIRES, conforme à la charte grizzliz.com (radius:0) */
  --section:96px; --radius:0; --hbtn:50px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  font-family:var(--gp-body); color:var(--ink); background:var(--canvas);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
@media(max-width:1023px){#grz-pro{--section:64px;}}
@media(max-width:599px){#grz-pro{--section:48px;}}

#grz-pro *{box-sizing:border-box;}
#grz-pro img{display:block;max-width:100%;}
#grz-pro a{color:inherit;text-decoration:none;}
#grz-pro .wrap{max-width:1360px;margin:0 auto;padding:0 clamp(24px,5vw,80px);}
@media(max-width:599px){#grz-pro .wrap{padding:0 22px;}}
#grz-pro .eyebrow{display:block;font-family:var(--gp-heading);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--mute);margin-bottom:14px;}
#grz-pro .disp{font-family:var(--gp-display);font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:.01em;}

/* boutons pilules */
#grz-pro .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--hbtn);padding:0 32px;
  border-radius:var(--radius);font-family:var(--gp-heading);font-weight:600;font-size:15px;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .16s var(--ease-out),background .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out);}
#grz-pro .btn:active{transform:scale(0.97);}
#grz-pro .btn-dark{background:var(--ink);color:#fff;} #grz-pro .btn-dark:hover{background:var(--charcoal);}
#grz-pro .btn-light{background:#fff;color:var(--ink);} #grz-pro .btn-light:hover{background:var(--cloud);}
#grz-pro .btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline);} #grz-pro .btn-ghost:hover{border-color:var(--ink);}
#grz-pro .btn-ghostw{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);} #grz-pro .btn-ghostw:hover{border-color:#fff;}

/* ============ HERO split éditorial ============ */
/* minmax(0,1fr) : force le 50/50 même si le titre géant est plus large que sa piste
   (sinon la colonne texte déborde et écrase l'image à ~1/3 au lieu de 1/2). */
#grz-pro .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ink);color:#fff;}
@media(max-width:900px){#grz-pro .hero{grid-template-columns:1fr;}}
#grz-pro .hero .left{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:var(--section) clamp(24px,5vw,80px);}
/* Le titre reste en mots entiers (pas de coupure en plein mot type "SEMAIN/E"). */
#grz-pro .hero .left h1{overflow-wrap:normal;word-break:normal;hyphens:none;}
@media(max-width:900px){#grz-pro .hero .left{padding:56px clamp(24px,5vw,80px);}}
@media(max-width:599px){#grz-pro .hero .left{padding:44px 22px;}}
@media(max-width:900px){#grz-pro .hero .right{min-height:56vw;}}
#grz-pro .hero .eyebrow{color:rgba(255,255,255,.7);margin-bottom:20px;}
/* font-size adapté à la demi-colonne (le hero est en 2 colonnes 50/50) : ~6vw, pas 9vw,
   sinon un titre long déborde et se coupe. Bebas condensé encaisse les titres longs. */
#grz-pro .hero h1{font-family:var(--gp-display);text-transform:uppercase;line-height:.9;font-size:clamp(48px,6vw,104px);margin-bottom:24px;color:#fff;font-weight:400;}
#grz-pro .hero h1 em{font-style:normal;display:block;color:var(--stone);}
#grz-pro .hero p.lede{font-size:18px;color:rgba(255,255,255,.85);max-width:44ch;margin-bottom:32px;}
#grz-pro .hero .ctas{display:flex;gap:12px;flex-wrap:wrap;}
/* Mobile : hero compact qui tient dans l'écran (titre réduit, marges serrées, 2 CTA sur 1 ligne). */
@media(max-width:599px){
  #grz-pro .hero .left{padding:34px 20px 30px;}
  #grz-pro .hero .eyebrow{margin-bottom:12px;font-size:11px;}
  #grz-pro .hero h1{font-size:clamp(34px,11vw,50px);margin-bottom:14px;word-break:break-word;}
  #grz-pro .hero p.lede{font-size:15px;margin-bottom:20px;max-width:none;}
  #grz-pro .hero .ctas{flex-wrap:nowrap;gap:8px;}
  #grz-pro .hero .ctas .btn{flex:1 1 0;min-width:0;padding:0 8px;font-size:12px;height:46px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
#grz-pro .hero .right{position:relative;overflow:hidden;background:#000;min-height:340px;}
#grz-pro .hero .right > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#grz-pro .hero .right::before{content:"";position:absolute;left:0;right:0;top:0;height:180px;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 100%);pointer-events:none;}
#grz-pro .hero .tag{position:absolute;left:0;right:0;top:30px;z-index:2;
  display:flex;flex-direction:column-reverse;align-items:center;gap:10px;text-align:center;padding:0 24px;}
#grz-pro .hero .tag span{font-family:var(--gp-heading);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.9);
  text-shadow:0 1px 8px rgba(0,0,0,.7);}
#grz-pro .hero .tag img{height:50px;width:auto;max-width:min(300px,78%);display:block;filter:drop-shadow(0 2px 16px rgba(0,0,0,.65));}
@media(max-width:900px){#grz-pro .hero .tag{top:22px;gap:9px;}#grz-pro .hero .tag img{height:42px;}}
@media(max-width:599px){#grz-pro .hero .tag img{height:36px;max-width:72%;}#grz-pro .hero .tag span{font-size:10px;letter-spacing:.16em;}}

/* ============ Bandeau chiffres ============ */
#grz-pro .stats{border-bottom:1px solid var(--hairline-soft);}
#grz-pro .stats .row{display:grid;grid-template-columns:repeat(4,1fr);}
#grz-pro .stat{padding:40px 32px;border-right:1px solid var(--hairline-soft);}
#grz-pro .stat:last-child{border-right:none;}
/* Mobile : chiffres en SWIPE horizontal (au lieu de la grille 2x2 qui débordait). */
@media(max-width:768px){
  #grz-pro .stats{position:relative;overflow:hidden;}
  #grz-pro .stats .row{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  #grz-pro .stats .row::-webkit-scrollbar{display:none;}
  /* Ombre-dégradé grise à droite = signal "swipable" VISIBLE sur fond blanc (le mask blanc
     précédent était invisible). Sur le parent .stats (non scrollable) donc ne défile pas. */
  #grz-pro .stats::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;z-index:1;
    background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 100%);}
  #grz-pro .stat{flex:0 0 auto;min-width:150px;padding:28px 22px;scroll-snap-align:start;border-bottom:none;}
  #grz-pro .stat .k{font-size:48px;}
}
#grz-pro .stat .k{font-family:var(--gp-display);font-size:64px;line-height:.9;}
#grz-pro .stat .l{font-size:13px;color:var(--mute);margin-top:8px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--gp-heading);font-weight:500;}

/* ============ Univers : index gauche + grille visuelle droite ============ */
/* Pattern repris de l'accueil grizzliz.com (« Tous les Sports ») : liste texte scannable
   à gauche (bon SEO), preuve visuelle à droite. Hover lié piloté par [data-active] (JS). */
#grz-pro .universes{padding-block:var(--section);}
#grz-pro .uni-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start;}
@media(max-width:900px){#grz-pro .uni-grid{grid-template-columns:1fr;gap:32px;}}

#grz-pro .uni-index .disp{font-size:clamp(40px,6vw,80px);}
#grz-pro .uni-index .uni-lede{color:var(--mute);max-width:44ch;margin:16px 0 28px;font-size:16px;}
#grz-pro .uni-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 0;border-top:1px solid var(--hairline-soft);transition:padding-left .18s var(--ease-out),opacity .18s var(--ease-out);}
#grz-pro .uni-row:last-of-type{border-bottom:1px solid var(--hairline-soft);}
#grz-pro .uni-name{font-family:var(--gp-heading);font-weight:700;font-size:clamp(17px,1.5vw,20px);}
#grz-pro .uni-sub{font-family:var(--gp-heading);font-weight:500;font-size:13px;color:var(--mute);text-align:right;}
@media(hover:hover) and (pointer:fine){
  #grz-pro .uni-row:hover{padding-left:10px;}
  #grz-pro .universes[data-active]:not([data-active=""]) .uni-row{opacity:.45;}
  #grz-pro .universes[data-active] .uni-row:hover{opacity:1;}
}
#grz-pro .uni-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;}
#grz-pro .uni-chips .btn{height:44px;padding:0 20px;font-size:13px;}
/* Mobile : le sous-texte passe SOUS le nom (sinon space-between déborde du viewport). */
@media(max-width:599px){
  #grz-pro .uni-row{flex-direction:column;align-items:flex-start;gap:4px;padding:16px 0;}
  #grz-pro .uni-sub{text-align:left;}
  #grz-pro .uni-chips{gap:8px;}
  #grz-pro .uni-chips .btn{flex:0 1 auto;padding:0 16px;}
}

#grz-pro .uni-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#grz-pro .uni-tile{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--cloud);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);}
#grz-pro .uni-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease-out);}
#grz-pro .uni-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%);}
#grz-pro .uni-tag{position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;
  font-family:var(--gp-heading);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.12em;text-shadow:0 1px 6px rgba(0,0,0,.5);}
@media(hover:hover) and (pointer:fine){
  #grz-pro .uni-tile:hover img{transform:scale(1.05);}
  /* Hover lié : quand une ligne/tuile est active, on met en avant sa tuile, on estompe les autres. */
  #grz-pro .universes[data-active]:not([data-active=""]) .uni-tile{opacity:.4;}
  #grz-pro .universes[data-active="tatamis"] .uni-tile[data-uni="tatamis"],
  #grz-pro .universes[data-active="wallpad"] .uni-tile[data-uni="wallpad"],
  #grz-pro .universes[data-active="frappe"] .uni-tile[data-uni="frappe"],
  #grz-pro .universes[data-active="cage"] .uni-tile[data-uni="cage"],
  #grz-pro .universes[data-active="ring"] .uni-tile[data-uni="ring"],
  #grz-pro .universes[data-active="textile"] .uni-tile[data-uni="textile"]{opacity:1;transform:scale(1.03);z-index:2;}
}
@media(max-width:479px){#grz-pro .uni-tiles{grid-template-columns:1fr;}#grz-pro .uni-tile{aspect-ratio:16/10;}}

/* ============ Carrousel univers (détail, swipe) ============ */
#grz-pro .uni-carousel{padding-bottom:var(--section);}
#grz-pro .uni-carousel .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;}
#grz-pro .uni-carousel .head .disp{font-size:clamp(32px,4.5vw,60px);}
#grz-pro .caro-nav{display:flex;gap:8px;}
#grz-pro .caro-btn{width:48px;height:48px;border:1px solid var(--hairline);background:#fff;color:var(--ink);
  font-size:18px;cursor:pointer;border-radius:var(--radius);transition:border-color .16s var(--ease-out),background .16s var(--ease-out);}
#grz-pro .caro-btn:hover{border-color:var(--ink);}
#grz-pro .caro-btn:active{transform:scale(0.96);}
@media(max-width:768px){#grz-pro .caro-nav{display:none;}}
#grz-pro .caro-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
#grz-pro .caro-track::-webkit-scrollbar{display:none;}
#grz-pro .caro-card{flex:0 0 clamp(300px,32%,420px);scroll-snap-align:start;border:1px solid var(--hairline-soft);background:#fff;display:flex;flex-direction:column;}
@media(max-width:768px){
  #grz-pro .caro-card{flex:0 0 82%;}
  /* Mobile : plus de flèches → ombre-dégradé grise droite pour signaler le swipe (visible sur fond blanc).
     Wrapper .caro-scroll autour du track porte l'ombre (le track lui-même scrolle, un ::after dessus défilerait). */
  #grz-pro .caro-scroll{position:relative;}
  #grz-pro .caro-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;z-index:1;
    background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 100%);}
}
#grz-pro .caro-pic{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--cloud);}
#grz-pro .caro-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#grz-pro .caro-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
#grz-pro .caro-body .num{font-family:var(--gp-display);font-size:20px;color:var(--stone);}
#grz-pro .caro-body h3{font-family:var(--gp-display);text-transform:uppercase;font-size:clamp(28px,3vw,38px);line-height:.92;margin:4px 0 12px;font-weight:400;}
#grz-pro .caro-body p{color:var(--ash);font-size:15px;margin-bottom:20px;flex:1;}
#grz-pro .caro-body .go{align-self:flex-start;}

/* ============ Process timeline ============ */
#grz-pro .process{background:var(--ink);color:#fff;}
#grz-pro .process .in{padding-block:var(--section);}
#grz-pro .process .eyebrow{color:var(--stone);}
#grz-pro .process h2{font-family:var(--gp-display);text-transform:uppercase;font-size:clamp(40px,6vw,88px);line-height:.9;margin:12px 0 56px;font-weight:400;color:#fff;}
#grz-pro .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
@media(max-width:768px){#grz-pro .timeline{grid-template-columns:1fr 1fr;gap:40px 24px;}}
@media(max-width:440px){#grz-pro .timeline{grid-template-columns:1fr;}}
#grz-pro .tl{position:relative;padding-right:24px;}
#grz-pro .tl .bar{height:2px;background:rgba(255,255,255,.25);margin-bottom:20px;position:relative;}
#grz-pro .tl .bar::before{content:"";position:absolute;left:0;top:-3px;width:8px;height:8px;background:#fff;border-radius:50%;}
#grz-pro .tl .n{font-family:var(--gp-display);font-size:20px;color:var(--stone);}
#grz-pro .tl h4{font-family:var(--gp-heading);text-transform:uppercase;font-weight:600;font-size:18px;margin:6px 0 8px;color:#fff;}
#grz-pro .tl p{color:var(--stone);font-size:14px;}

/* ============ Fujimats full-bleed ============ */
/* Bande de séparation claire pleine largeur : sépare franchement les sections sombres consécutives
   (.process → .fuji → .quote se touchaient bord à bord). Via border-top épais en couleur cloud. */
#grz-pro .fuji{position:relative;min-height:70vh;display:flex;align-items:center;color:#fff;background:#000;overflow:hidden;border-top:30px solid var(--cloud);}
#grz-pro .fuji img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;}
#grz-pro .fuji .in{position:relative;padding:var(--section) 0;max-width:760px;}
/* Voile sombre pour garantir le contraste du texte blanc sur l'image de fond. */
#grz-pro .fuji::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.35) 100%);}
/* .fuji est en display:flex → le .wrap enfant doit pouvoir rétrécir (min-width:0) et prendre
   toute la largeur, sinon il garde la largeur de son contenu et déborde à droite sur mobile. */
#grz-pro .fuji .wrap{position:relative;z-index:1;min-width:0;width:100%;}
/* Mobile : titre réduit, texte qui tient dans les marges (le débordement venait du titre/texte trop grands). */
@media(max-width:599px){
  /* .fuji en flex avec un seul enfant .wrap (max-width:1360px) → l'enfant garde sa largeur
     et déborde. En mobile on repasse en block : le wrap reprend son padding et tient dans l'écran. */
  #grz-pro .fuji{display:block;}
  #grz-pro .fuji .in{padding:44px 0;max-width:none;}
  #grz-pro .fuji h2{font-size:clamp(34px,10vw,48px);}
  #grz-pro .fuji p{font-size:15px;}
  #grz-pro .fuji::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.75) 100%);}
}
#grz-pro .fuji .eyebrow{color:rgba(255,255,255,.75);}
#grz-pro .fuji h2{font-family:var(--gp-display);text-transform:uppercase;font-size:clamp(40px,6vw,80px);line-height:.9;margin:16px 0 20px;font-weight:400;color:#fff;}
#grz-pro .fuji p{color:rgba(255,255,255,.9);font-size:16px;line-height:1.6;margin-bottom:14px;}
#grz-pro .fuji p strong{color:#fff;font-weight:700;}
#grz-pro .fuji p.src{color:rgba(255,255,255,.62);font-size:14px;margin-top:18px;}
#grz-pro .fuji sup{font-size:.62em;vertical-align:super;}
/* Rangée de preuves : chiffres/labels courts qui matérialisent l'héritage et la qualité. */
#grz-pro .fuji-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border-top:1px solid rgba(255,255,255,.18);}
#grz-pro .fp{padding:24px 22px 0 24px;border-right:1px solid rgba(255,255,255,.18);}
#grz-pro .fp:first-child{padding-left:0;}
#grz-pro .fp:last-child{border-right:none;padding-right:0;}
#grz-pro .fp-k{font-family:var(--gp-display);font-size:clamp(26px,2.4vw,34px);line-height:1;color:#fff;letter-spacing:.01em;}
#grz-pro .fp-l{font-family:var(--gp-heading);font-size:12px;line-height:1.35;color:rgba(255,255,255,.72);margin-top:8px;}
@media(max-width:768px){
  #grz-pro .fuji-proof{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%);}
  #grz-pro .fuji-proof::-webkit-scrollbar{display:none;}
  #grz-pro .fp{flex:0 0 auto;min-width:160px;scroll-snap-align:start;padding:22px 22px 0 24px;}
  #grz-pro .fp:first-child{padding-left:0;}
}

/* ============ Réalisations / Clubs équipés (carrousel) ============ */
/* Carrousel de cartes clubs (photos 4:5) : flèches desktop, swipe mobile — même pattern que .range. */
#grz-pro .reals-sec{padding:var(--section) 0;}
#grz-pro .reals-sec .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:32px;}
#grz-pro .reals-sec .head .disp{font-size:clamp(38px,5vw,72px);}
#grz-pro .reals-scroll{position:relative;}
#grz-pro .reals-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
#grz-pro .reals-track::-webkit-scrollbar{display:none;}
/* Cartes à ~28% : 3 pleines + la 4e coupée au bord droit → signal visuel "ça défile". */
#grz-pro .real{flex:0 0 28%;scroll-snap-align:start;aspect-ratio:4/5;overflow:hidden;background:var(--cloud);position:relative;}
#grz-pro .real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out);}
@media(hover:hover) and (pointer:fine){#grz-pro .real:hover img{transform:scale(1.05);}}
/* Fondu droit permanent (desktop + mobile) : renforce le fait qu'il reste des cartes à droite. */
#grz-pro .reals-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:64px;pointer-events:none;z-index:1;
  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 100%);}
#grz-pro .reals-hint{display:none;margin-top:12px;font-family:var(--gp-heading);font-weight:600;
  font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--stone);}
@media(max-width:768px){
  #grz-pro .reals-sec .caro-nav{display:none;}
  #grz-pro .real{flex:0 0 76%;}
  #grz-pro .reals-hint{display:block;}
}

/* ============ FAQ ============ */
#grz-pro .faq-sec{padding:var(--section) 0;}
#grz-pro .faq-sec .grid{display:grid;grid-template-columns:.5fr 1fr;gap:48px;}
@media(max-width:900px){#grz-pro .faq-sec .grid{grid-template-columns:1fr;gap:24px;}}
#grz-pro .faq-sec .disp{font-size:clamp(40px,6vw,80px);}
#grz-pro .faq details{border-top:1px solid var(--hairline-soft);}
#grz-pro .faq details:last-child{border-bottom:1px solid var(--hairline-soft);}
#grz-pro .faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:var(--gp-heading);font-weight:600;font-size:17px;}
#grz-pro .faq summary::-webkit-details-marker{display:none;}
#grz-pro .faq summary .pm{font-size:24px;color:var(--mute);transition:transform .2s;}
#grz-pro .faq details[open] summary .pm{transform:rotate(45deg);}
#grz-pro .faq details p{padding:0 0 22px;color:var(--ash);max-width:64ch;}

/* ============ Formulaire ============ */
/* Bande de séparation claire : .fuji (sombre) précède → respiration franche entre les 2 fonds sombres. */
#grz-pro .quote{position:relative;background:var(--ink);color:#fff;overflow:hidden;border-top:30px solid var(--cloud);}
#grz-pro .quote img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;}
#grz-pro .quote .in{position:relative;padding:var(--section) 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start;}
@media(max-width:900px){#grz-pro .quote .in{grid-template-columns:1fr;gap:32px;}}
#grz-pro .quote .intro .eyebrow{color:var(--stone);}
#grz-pro .quote .intro h2{font-family:var(--gp-display);text-transform:uppercase;font-size:clamp(48px,7vw,96px);line-height:.88;margin:12px 0 20px;font-weight:400;color:#fff;}
#grz-pro .quote .intro p{color:rgba(255,255,255,.85);max-width:38ch;}
#grz-pro .quote .intro .call{margin-top:28px;font-family:var(--gp-heading);font-weight:500;}
#grz-pro .quote .intro .call a{border-bottom:1px solid #fff;}
#grz-pro .form{background:#fff;color:var(--ink);padding:32px;}
#grz-pro .form .step-ind{display:flex;gap:8px;margin-bottom:24px;font-family:var(--gp-heading);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--stone);}
#grz-pro .form .step-ind b{color:var(--ink);}
#grz-pro .field{margin-bottom:18px;}
#grz-pro .field label{display:block;font-family:var(--gp-heading);font-weight:500;font-size:14px;margin-bottom:8px;}
#grz-pro .field label .req{color:var(--ink);font-weight:700;margin-left:1px;}
#grz-pro .field input,#grz-pro .field select{width:100%;height:48px;padding:0 14px;border:1px solid var(--hairline);border-radius:var(--radius);font-family:var(--gp-body);font-size:16px;background:#fff;color:var(--ink);}
#grz-pro .field input:focus,#grz-pro .field select:focus{outline:none;border-color:var(--ink);}
#grz-pro .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){#grz-pro .row2{grid-template-columns:1fr;}}
#grz-pro .form .note{font-size:12px;color:var(--mute);margin-top:12px;}

/* ============ Reveal au scroll ============ */
#grz-pro .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}
#grz-pro .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  #grz-pro .reveal{opacity:1;transform:none;transition:none;}
  #grz-pro .band .pic img{transition:none;}
  #grz-pro .btn{transition:background .16s,border-color .16s,color .16s;}
  #grz-pro .btn:active{transform:none;}
}

/* ============ Bloc pilier SEO (titre éditorial + 3 colonnes) ============ */
/* Titre + intro à gauche (sticky desktop), 3 sous-parties numérotées à droite.
   Casse le mur de texte, fait écho aux numéros 01/02/03 du process et des preuves Fujimats. */
#grz-pro .pillar{background:var(--cloud);}
#grz-pro .pillar .in{padding-block:var(--section);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,5vw,72px);align-items:start;max-width:1360px;}
#grz-pro .pillar .lede-col{position:sticky;top:40px;}
#grz-pro .pillar h2{font-family:var(--gp-display);text-transform:uppercase;font-size:clamp(32px,3.6vw,52px);line-height:.94;font-weight:400;margin:0 0 16px;}
#grz-pro .pillar .lede-col p{color:var(--ash);font-size:16px;line-height:1.6;}
#grz-pro .pillar .lede-col p strong{color:var(--ink);font-weight:700;}
#grz-pro .pillar .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
#grz-pro .pillar .col .cnum{font-family:var(--gp-display);font-size:22px;color:var(--stone);}
#grz-pro .pillar .col h3{font-family:var(--gp-heading);font-weight:700;font-size:17px;margin:8px 0 12px;padding-top:14px;border-top:2px solid var(--ink);}
#grz-pro .pillar .col p{color:var(--ash);font-size:14.5px;line-height:1.6;}
#grz-pro .pillar .col-link{display:inline-block;margin-top:14px;font-family:var(--gp-heading);font-weight:700;font-size:13px;
  color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:2px;transition:opacity .16s var(--ease-out);}
#grz-pro .pillar .col-link:hover{opacity:.6;}
@media(max-width:900px){
  #grz-pro .pillar .in{grid-template-columns:1fr;gap:28px;}
  #grz-pro .pillar .lede-col{position:static;}
  #grz-pro .pillar .cols{grid-template-columns:1fr;gap:24px;}
}

/* ============ Gammes produit (pages filles orientées produit) ============ */
/* Cartes de gamme : image + nom + specs listées + tag. Présente les vraies gammes Fujimats
   par univers (ex. tatami 25/40/50mm), SANS prix (tout en devis, §4.3). Charte : rectangulaire,
   noir/blanc, Bebas titres. Réutilisable sur les 5 pages filles. */
#grz-pro .range{padding-block:var(--section);}
#grz-pro .range .head{max-width:720px;margin-bottom:44px;}
#grz-pro .range .head .disp{font-size:clamp(36px,5vw,68px);}
#grz-pro .range .head p{color:var(--mute);font-size:16px;line-height:1.6;margin-top:14px;}
/* Bande gammes en CARROUSEL swipe (flèches desktop, swipe mobile) — même pattern que le carrousel
   univers du hub. Toutes les pages filles l'utilisent, quel que soit le nombre de cartes. */
#grz-pro .range .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px;}
#grz-pro .range .head-row .head{margin-bottom:0;}
#grz-pro .range-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
#grz-pro .range-track::-webkit-scrollbar{display:none;}
#grz-pro .range-scroll{position:relative;}
#grz-pro .range-card{flex:0 0 clamp(280px,30%,360px);scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline-soft);}
@media(max-width:768px){
  #grz-pro .range-card{flex:0 0 82%;}
  #grz-pro .range .caro-nav{display:none;}
  #grz-pro .range-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;z-index:1;
    background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 100%);}
}
#grz-pro .range-hint{display:none;margin-top:12px;font-family:var(--gp-heading);font-weight:600;
  font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--stone);}
@media(max-width:768px){#grz-pro .range-hint{display:block;}}
#grz-pro .range-card .pic{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--cloud);}
#grz-pro .range-card .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease-out);}
@media(hover:hover) and (pointer:fine){#grz-pro .range-card:hover .pic img{transform:scale(1.05);}}
#grz-pro .range-card .pic .badge{position:absolute;left:0;top:0;z-index:1;background:var(--ink);color:#fff;
  font-family:var(--gp-heading);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:6px 12px;}
#grz-pro .range-card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
#grz-pro .range-card h3{font-family:var(--gp-display);text-transform:uppercase;font-size:clamp(26px,2.6vw,34px);line-height:.94;font-weight:400;margin:0 0 8px;}
#grz-pro .range-card .desc{color:var(--ash);font-size:14px;line-height:1.55;margin-bottom:16px;}
#grz-pro .range-card .specs{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--hairline-soft);}
#grz-pro .range-card .specs li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--hairline-soft);
  font-family:var(--gp-heading);font-size:13px;}
#grz-pro .range-card .specs li .k{color:var(--mute);font-weight:500;}
#grz-pro .range-card .specs li .v{color:var(--ink);font-weight:700;text-align:right;}
#grz-pro .range-card .go{align-self:flex-start;margin-top:auto;font-family:var(--gp-heading);font-weight:700;font-size:13px;
  color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:2px;transition:opacity .16s var(--ease-out);}
#grz-pro .range-card .go:hover{opacity:.6;}

/* Aide au choix : 2 options en regard (ex. Smooth vs picots) */
#grz-pro .compare{background:var(--cloud);padding-block:var(--section);}
#grz-pro .compare .head{max-width:720px;margin-bottom:40px;}
#grz-pro .compare .head .disp{font-size:clamp(34px,4.5vw,60px);}
#grz-pro .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media(max-width:768px){#grz-pro .compare-grid{grid-template-columns:1fr;}}
#grz-pro .compare-card{background:#fff;border:1px solid var(--hairline-soft);padding:32px 30px;}
#grz-pro .compare-card .tag{font-family:var(--gp-heading);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);}
#grz-pro .compare-card h3{font-family:var(--gp-display);text-transform:uppercase;font-size:clamp(30px,3.4vw,44px);line-height:.94;font-weight:400;margin:8px 0 14px;}
#grz-pro .compare-card p{color:var(--ash);font-size:15px;line-height:1.6;margin-bottom:16px;}
#grz-pro .compare-card .for{font-family:var(--gp-heading);font-size:13px;color:var(--ink);}
#grz-pro .compare-card .for b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-bottom:4px;font-weight:600;}

/* ============ Sticky CTA mobile ============ */
#grz-pro .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:100;display:none;padding:12px 20px;background:#fff;border-top:1px solid var(--hairline-soft);}
#grz-pro .sticky-cta .btn{width:100%;}
@media(max-width:768px){#grz-pro .sticky-cta{display:block;}}