/* ==========================================================================
   FitnessLac · version 4 « Produit » — étude de cas façon fiche produit :
   appareils (ordinateur, téléphones) aux écrans qui défilent, brief en cartes,
   « gardé / construit autour », bento de l'identité, comparateur photo → gabarit.
   ========================================================================== */
.cs-v4{--fl:#1D4FD1;--fl-t:#12A4B4;--fl-n:#0E1A2B;--fl-g:#EEF4FA}

/* ---------- Appareils ---------- */
.dv-laptop{position:relative}
.dv-lid{padding:2.2% 2.2% 2.6%;border-radius:18px 18px 6px 6px;background:#16213F;box-shadow:0 50px 90px -50px rgba(14,26,43,.75),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.dv-scr{position:relative;overflow:hidden;border-radius:6px;background:#fff}
.dv-laptop .dv-scr{aspect-ratio:16/10}
.dv-laptop .dv-scr>img{width:100%;height:100%;object-fit:cover;object-position:top}
.dv-base{height:14px;margin:0 -7%;border-radius:2px 2px 16px 16px;background:linear-gradient(180deg,#D7DCEA,#AEB6CC);position:relative}
.dv-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#9AA3BC}
.dv-phone{position:relative;padding:3.4%;border-radius:clamp(26px,3.4vw,46px);background:#111A2E;box-shadow:0 40px 70px -36px rgba(14,26,43,.75),inset 0 0 0 2px rgba(255,255,255,.1)}
.dv-phone::before{content:"";position:absolute;z-index:3;left:50%;top:5%;width:28%;height:3.4%;min-height:12px;transform:translateX(-50%);border-radius:999px;background:#111A2E}
.dv-phone .dv-scr{aspect-ratio:9/19.5;border-radius:clamp(20px,2.7vw,36px)}
.dv-phone .dv-scr>img{width:100%;height:100%;object-fit:cover;object-position:top}
.dv-scroll{overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(30,44,90,.3) transparent}
.dv-scroll>img{height:auto!important;object-fit:fill!important}
.dv-scroll:focus-visible{outline:3px solid var(--perv);outline-offset:3px}

/* ---------- Héros ---------- */
.v4-hero{position:relative;padding:calc(var(--nav-h) + 40px) 0 clamp(56px,7vw,110px);overflow:hidden}
.v4-hero-grid{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);gap:clamp(32px,4vw,72px);align-items:center}
.v4-back{display:inline-flex;align-items:center;gap:8px;min-height:var(--hit);color:var(--encre);text-decoration:none;font-weight:800;font-size:14px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.v4-back .ar{transition:transform var(--t-3) var(--ease-stick)}
.v4-back:hover,.v4-back:focus-visible{color:var(--perv-f)}
.v4-back:hover .ar,.v4-back:focus-visible .ar{transform:translateX(-5px)}
.v4-hero-logo{width:min(280px,64%);margin:clamp(20px,3vw,40px) 0 clamp(16px,2vw,24px)}
.v4-h1{font-size:clamp(48px,3.4vw + 30px,92px);line-height:.9;letter-spacing:var(--ls-h1);font-variation-settings:var(--opsz-display);margin:0}
.v4-h1 .l{display:block}
.v4-h1 em.s{color:var(--fl)}
.v4-lede{margin-top:clamp(18px,2vw,26px);font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--encre2);font-weight:500;max-width:30em}
.v4-chips{list-style:none;padding:0;margin:clamp(20px,2.4vw,30px) 0 0;display:flex;flex-wrap:wrap;gap:8px}
.v4-chips a{display:inline-flex;align-items:center;min-height:var(--hit);padding:8px 18px;border-radius:999px;background:#fff;color:var(--encre);text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 10px 24px -18px rgba(30,44,90,.6),inset 0 0 0 1px rgba(30,44,90,.08);transition:background-color var(--t-2),color var(--t-2)}
.v4-chips a:hover,.v4-chips a:focus-visible{background:var(--fl);color:#fff}
.v4-spec{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:clamp(22px,2.6vw,32px) 0 0;font-size:15px}
.v4-spec div{display:contents}
.v4-spec dt{font-size:12px;font-weight:800;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ardoise);padding-top:3px}
.v4-spec dd{margin:0;font-weight:600}
.v4-stage{position:relative;padding:8% 9% 12% 4%}
.v4-stage-bg{position:absolute;inset:0 0 4% 10%;border-radius:clamp(28px,3vw,44px);background:var(--fl);overflow:hidden;
  background-image:radial-gradient(60% 70% at 100% 0%,rgba(117,134,245,.6),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(18,164,180,.35),transparent 70%)}
.v4-stage-bg img{position:absolute;right:-6%;bottom:-10%;width:62%;opacity:.12}
.v4-stage-lap{position:relative;z-index:1}
.v4-stage-ph{position:absolute;z-index:2;right:2%;bottom:0;width:23%}
.v4-pin{left:2%;top:0;z-index:3}

/* ---------- Sections ---------- */
.v4-sec{padding:clamp(64px,8vw,128px) 0}
.v4-head{margin-bottom:clamp(30px,3.6vw,56px);max-width:900px}
.v4-head--row{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(32px,5vw,96px);align-items:end}
.v4-k{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 18px;font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--perv-f)}
.v4-badge{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--fl);color:#fff;letter-spacing:.08em}
.v4-h2{font-size:var(--fs-h2-sm);line-height:.94;letter-spacing:var(--ls-h2);font-variation-settings:var(--opsz-display);margin:0}
.v4-h2 em.s{color:var(--fl)}
.v4-p{font-size:clamp(17px,.3vw + 15px,20px);line-height:1.55;color:var(--encre2);max-width:34em}

/* Brief */
.v4-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.v4-card{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,34px);border-radius:24px;background:rgba(255,255,255,.78);box-shadow:0 24px 50px -38px rgba(30,44,90,.55),inset 0 0 0 1px rgba(255,255,255,.9)}
.v4-card-n{font-size:13px;font-weight:800;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--fl)}
.v4-card h3{font-size:clamp(22px,.9vw + 14px,30px);line-height:1.05;letter-spacing:var(--ls-h3)}
.v4-card p:not(.v4-card-n){font-size:16.5px;line-height:1.58;color:var(--encre2)}
.v4-card-hl{margin-top:auto;padding-top:6px;font-family:var(--serif);font-style:italic;font-size:22px!important;line-height:1.15!important;color:var(--encre)!important}
.v4-flag{margin-top:auto;padding:14px 16px;border-radius:14px;background:var(--peche-cl);color:var(--encre)!important;font-size:15.5px!important}
.v4-flag b{display:block;font-size:12px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--perv-f);margin-bottom:4px}

/* Gardé → construit */
.v4-ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);align-items:stretch;gap:clamp(14px,2vw,28px);margin-bottom:clamp(14px,1.6vw,24px)}
.v4-ba-col{padding:clamp(22px,2.4vw,34px);border-radius:24px;background:#fff;box-shadow:0 24px 50px -38px rgba(30,44,90,.55)}
.v4-ba-col--after{background:var(--encre);color:var(--nuage)}
.v4-ba-k{font-size:13px;font-weight:800;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--perv-f);margin-bottom:18px}
.v4-ba-col--after .v4-ba-k{color:var(--peche)}
.v4-ba-logo{display:grid;place-items:center;padding:clamp(16px,2vw,28px) 0}
.v4-ba-logo img{width:min(100%,380px)}
.v4-ba-t{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.15}
.v4-ba-arrow{align-self:center;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--fl);color:#fff;font-size:24px;font-weight:800}
.v4-ba-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.v4-ba-list li{display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.4;font-weight:600}
.v4-ba-list li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--fl-t);transform:translateY(-1px)}

/* Bento identité */
.v4-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:clamp(14px,1.6vw,24px)}
.v4-tile{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -38px rgba(30,44,90,.55)}
.v4-tile-k{position:absolute;left:18px;bottom:14px;font-size:12px;font-weight:800;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ardoise)}
.v4-tile--hero{grid-column:1/span 8;grid-row:span 2;display:grid;place-items:center;min-height:clamp(300px,34vw,480px);background:var(--fl);
  background-image:radial-gradient(60% 70% at 100% 0%,rgba(117,134,245,.5),transparent 70%)}
.v4-tile--hero img{width:min(62%,520px)}
.v4-tile--hero .v4-tile-k,.v4-tile--night .v4-tile-k{color:rgba(238,242,255,.7)}
.v4-tile--white,.v4-tile--night{grid-column:9/span 4;display:grid;place-items:center;padding:28px 28px 40px}
.v4-tile--night{background:var(--fl-n)}
.v4-tile--white img,.v4-tile--night img{width:88%}
.v4-pal{grid-column:6/span 7;list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:220px}
.v4-pal li{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:18px;background:var(--c);color:var(--t)}
.v4-pal b{font-size:18px}
.v4-pal span{font-size:13.5px;font-variant-numeric:tabular-nums;opacity:.85}
.v4-ab{grid-column:1/span 5;grid-row:3/span 2;padding:14px;display:flex;flex-direction:column;gap:12px}
.v4-ab-img{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;--pos:50%}
.v4-ab-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v4-ab-img img:first-child{object-position:28% 50%}
.v4-ab-after{clip-path:inset(0 0 0 var(--pos))}
.v4-ab-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(14,26,43,.15)}
.v4-ab-line::after{content:"⟷";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:var(--encre);display:grid;place-items:center;font-size:18px;font-weight:800;box-shadow:0 6px 18px -6px rgba(14,26,43,.5)}
.v4-ab-l{position:absolute;top:12px;padding:4px 10px;border-radius:999px;background:rgba(14,26,43,.72);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.v4-ab-l--a{left:12px}.v4-ab-l--b{right:12px}
.v4-ab-ctl input{width:100%;min-height:var(--hit);accent-color:var(--fl);cursor:ew-resize}
.v4-ab figcaption{font-size:14px;color:var(--ardoise);padding:0 4px 4px}
html:not(.js) .v4-ab-ctl{display:none}
.v4-gab{grid-column:6/span 7;padding:20px;background:var(--fl-g);display:flex;flex-direction:column}
.v4-gab-k{font-size:12px;font-weight:800;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ardoise);margin-bottom:14px}
.v4-gab-row{flex:1;align-content:center;display:grid;grid-template-columns:1.25fr 1.25fr 1fr 1fr;gap:12px;align-items:end}
.v4-gab-row img{width:100%;border-radius:8px;box-shadow:0 14px 26px -18px rgba(14,26,43,.6)}

/* Site */
.v4-site{background:linear-gradient(180deg,transparent,rgba(29,79,209,.06) 30%,rgba(29,79,209,.06) 70%,transparent)}
.v4-site-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,96px);align-items:center}
.v4-feat{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:8px}
.v4-feat li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;font-weight:700;font-size:16px;box-shadow:0 10px 24px -20px rgba(30,44,90,.6)}
.v4-feat li::before{content:"✓";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--fl);color:#fff;font-size:13px}
.v4-try{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--perv-f)}
.v4-site-dv{position:relative;padding:0 10% 6% 5%}
.v4-site-ph{position:absolute;right:0;bottom:0;width:24%;z-index:2}

/* Réseaux */
.v4-tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.v4-tags li{padding:8px 14px;border-radius:999px;background:#fff;font-weight:700;font-size:14.5px;box-shadow:inset 0 0 0 1.5px rgba(29,79,209,.25);color:var(--fl)}
.v4-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,72px);align-items:end;max-width:1080px;margin:0 auto;padding:clamp(36px,4vw,64px) clamp(16px,4vw,64px);
  border-radius:var(--radius-panel);background:var(--fl);background-image:radial-gradient(60% 70% at 100% 0%,rgba(117,134,245,.55),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(18,164,180,.35),transparent 70%)}
.v4-ph-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.v4-ph-fig .dv-phone{width:100%;max-width:300px}
.v4-ph-fig--mid{transform:translateY(clamp(-40px,-3vw,-16px))}
.v4-ph-fig figcaption{font-family:var(--serif);font-style:italic;font-size:21px;color:#fff}
.ig{background:#fff}
.ig-head{display:flex;align-items:center;gap:10px;padding:16% 12px 10px;font-size:14px;border-bottom:1px solid #EEF0F5}
.ig-av{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--fl-n);overflow:hidden}
.ig-av img{width:92%}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-grid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.car{overflow-x:auto!important;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;background:#fff}
.car::-webkit-scrollbar{display:none}
.car-track{display:flex;height:100%;align-items:center;padding-top:14%}
.car-track img{flex:0 0 100%;width:100%;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:center}
.v4-note{margin-top:clamp(48px,6vw,88px);text-align:center;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ardoise)}

/* ---------- Tablette ---------- */
@media (max-width:1080px){
  .v4-hero-grid{grid-template-columns:1fr}
  .v4-stage{max-width:760px}
  .v4-cards{grid-template-columns:1fr}
  .v4-head--row{grid-template-columns:1fr}
  .v4-ba{grid-template-columns:1fr}
  .v4-ba-arrow{transform:rotate(90deg);justify-self:center}
  .v4-tile--hero{grid-column:1/-1;grid-row:auto}
  .v4-tile--white{grid-column:1/span 6}
  .v4-tile--night{grid-column:7/span 6}
  .v4-pal{grid-column:1/-1}
  .v4-gab{grid-column:1/-1}
  .v4-ab{grid-column:1/-1;grid-row:auto;max-width:520px;justify-self:center;width:100%}
  .v4-site-grid{grid-template-columns:1fr}
}
/* ---------- Mobile ---------- */
@media (max-width:700px){
  .v4-hero{padding-top:calc(var(--nav-h) + 24px)}
  .v4-stage{padding:10% 10% 14% 2%}
  .v4-stage-ph{width:28%}
  .v4-pin{--w:70px!important}
  .v4-tile--white,.v4-tile--night{grid-column:1/-1}
  .v4-pal{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
  .v4-pal li{min-height:110px}
  .v4-phones{grid-template-columns:1fr;max-width:340px;gap:40px}
  .v4-ph-fig--mid{transform:none}
  .v4-ph-fig .dv-phone{max-width:250px}
  .v4-site-dv{padding:0 14% 10% 5%}
  .v4-gab-row{grid-template-columns:1fr 1fr;}
  .v4-site-ph{width:30%}
  .dv-base{height:10px}
}
@media (prefers-reduced-motion:reduce){.v4-back .ar,.v4-chips a{transition:none}}