/* ==========================================================================
   NAÏA — Styles spécifiques aux pages produit (chat / chien / fontaine…)
   Nécessite naia-tokens.css chargé avant (variables :root, .btn, .wrap…).
   ========================================================================== */

/* ---- Hero produit (bloc titre + avis + CTA) ---- */
.hero{padding-top:44px}
.hero-banner{display:none}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:100px;font-size:13px;font-weight:600;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(36px,5vw,56px);margin:16px 0 16px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero p.lead{font-size:19px;color:var(--muted);max-width:34ch;margin-bottom:24px}
.hero .cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.hero .price-hint{font-size:14px;color:var(--muted)}
.hero .price-hint b{color:var(--ink);font-size:16px}
.mini-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}
.mini-trust div{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.mini-trust svg{width:17px;height:17px;color:var(--teal)}
.revmini{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:8px}

/* ---- Galerie / carrousel ---- */
.carousel{position:relative;border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}
.ctrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;list-style:none}
.ctrack::-webkit-scrollbar{display:none}
.cslide{flex:0 0 100%;scroll-snap-align:start;position:relative}
.cslide img,.cslide video{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;display:block}
.cslide .tag{position:absolute;top:14px;left:14px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:6px 11px;border-radius:100px;letter-spacing:.03em;display:flex;align-items:center;gap:6px}
.cslide .tag svg{width:13px;height:13px}
.cdots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:6px 11px;background:rgba(46,71,86,.3);border-radius:999px;backdrop-filter:blur(4px);z-index:2}
.cdot{width:7px;height:7px;border:0;border-radius:50%;background:rgba(255,255,255,.55);padding:0;cursor:pointer;transition:.25s;position:relative}
.cdot::before{content:'';position:absolute;inset:-16px}
.cdot.on{background:#fff;transform:scale(1.5)}
.carr{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center;z-index:2}
.carr.prev{left:10px}.carr.next{right:10px}
.carr[disabled]{opacity:.3;pointer-events:none}
@media(max-width:860px){.carr{display:none}}
@media(prefers-reduced-motion:reduce){.ctrack{scroll-behavior:auto}}
/* thumbs galerie (desktop) */
.thumbs{display:flex;gap:10px;margin-top:12px}
.thumbs button{position:relative;flex:1;aspect-ratio:1/1;border:2px solid transparent;border-radius:12px;overflow:hidden;padding:0;cursor:pointer;background:#fff;opacity:.65;transition:.15s}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button.on{border-color:var(--teal);opacity:1}
.thumbs .tply{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.55)}
@media(max-width:860px){.thumbs{display:none}}

/* ---- Estimation livraison ---- */
.delivery{display:flex;gap:9px;align-items:center;font-size:13px;margin-top:12px;background:rgba(14,156,147,.07);border:1px solid rgba(14,156,147,.22);border-radius:12px;padding:10px 13px}

/* ---- Répartition des notes ---- */
.rbars{max-width:340px;margin:0 auto 34px;display:flex;flex-direction:column;gap:7px}
.rbar{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600}
.rbar .bt{width:26px;color:var(--muted)}
.rbar .tr{flex:1;height:8px;background:#eee5d6;border-radius:99px;overflow:hidden}
.rbar .fl{display:block;height:100%;background:var(--sand);border-radius:99px}
.rbar .pc{width:36px;text-align:right;color:var(--muted)}
.rcard.morecard{display:none}
.rcard.morecard.showm{display:block}

/* ---- Bandeau réassurance produit (icônes) ---- */
.strip{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:20px 22px}
.strip .it{display:flex;align-items:center;gap:11px;justify-content:center;font-size:13.5px;font-weight:600}
.strip svg{width:22px;height:22px;color:var(--teal);flex-shrink:0}
.reassure-strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.strip{display:none}}

/* ---- Bandeau bénéfices (4 cartes) ---- */
.benefits{background:var(--cream)}
.benerow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:960px;margin:0 auto}
.bene{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 18px;text-align:center;box-shadow:var(--shadow)}
.bene .ic{width:46px;height:46px;border-radius:13px;background:rgba(14,156,147,.1);color:var(--teal);display:grid;place-items:center;margin:0 auto 12px}
.bene .ic svg{width:24px;height:24px}
.bene b{font-size:15px;display:block}
.bene small{font-size:12.5px;color:var(--muted)}
@media(max-width:860px){.benerow{grid-template-columns:1fr 1fr}}

/* ---- Titre de section générique ---- */
.sh{text-align:center;max-width:640px;margin:0 auto 46px}
.sh h2{font-size:clamp(28px,3.6vw,40px);margin:12px 0 12px}
.sh p{color:var(--muted);font-size:17px}
@media(max-width:860px){.sh{margin-bottom:32px}}

/* ---- Feature rows (texte + image alternés) ---- */
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px;align-items:center;max-width:1040px;margin:0 auto 68px}
.frow:last-child{margin-bottom:0}
.frow .fimg{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:24px;box-shadow:var(--shadow-lg)}
.frow.rev .ftext{order:-1}
.frow h3{font-size:clamp(24px,3vw,34px);margin:12px 0 14px}
.frow p{color:var(--muted);font-size:16.5px;margin-bottom:22px}
.flist{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.flist li{display:flex;gap:10px;font-size:15.5px;align-items:flex-start}
.flist svg{width:20px;height:20px;color:var(--teal);flex-shrink:0;margin-top:2px}
@media(max-width:860px){
  .frow{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
  .frow.rev .ftext{order:0}
  .frow .fimg{aspect-ratio:1/1}
  .frow p{max-width:46ch}
  .frow .btn{width:100%}
}

/* ---- Vidéo démo mobile / preuve vidéo ---- */
.vdemo{max-width:360px;margin:0 auto;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:9/16;background:var(--ink);position:relative}
.vdemo video{width:100%;height:100%;object-fit:cover;display:block}
.vdemo .vtag{position:absolute;top:12px;left:12px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;padding:6px 11px;border-radius:100px;box-shadow:var(--shadow)}
.trustvid{max-width:380px;margin:0 auto;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:9/16;background:var(--ink);position:relative}
.trustvid video{width:100%;height:100%;object-fit:cover;display:block}
.trustvid .vtag{position:absolute;top:12px;left:12px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;padding:6px 11px;border-radius:100px;box-shadow:var(--shadow)}

/* ---- Bande plein-écran (image + texte) ---- */
.band{position:relative;min-height:430px;display:flex;align-items:center;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.band .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,71,86,.72),rgba(46,71,86,.3))}
.band .wrap{position:relative;z-index:2}
.band .in{max-width:500px;color:#fff}
.band h2{color:#fff;font-size:clamp(28px,4vw,44px);margin-bottom:16px}
.band p{color:rgba(255,255,255,.9);font-size:18px;margin-bottom:26px}
.band .btn{background:#fff;color:var(--teal)}
@media(max-width:860px){
  .band{min-height:auto;padding:56px 0}
  .band .ov{background:linear-gradient(180deg,rgba(46,71,86,.55),rgba(46,71,86,.7))}
  .band .btn{width:100%}
}

/* ---- En 3 étapes ---- */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;max-width:1000px;margin:0 auto}
.step{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.step .simg{position:relative;aspect-ratio:1/1}
.step .simg img{width:100%;height:100%;object-fit:cover}
.step .n{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:800;font-size:18px;box-shadow:0 6px 16px rgba(14,156,147,.4)}
.step .sb{padding:20px 22px}
.step h4{font-size:18px;margin-bottom:6px}
.step p{font-size:14px;color:var(--muted)}
.sdots{display:none}
@media(max-width:860px){
  .steps3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;max-width:none;margin:0 -18px;padding:2px 18px 6px}
  .steps3::-webkit-scrollbar{display:none}
  .steps3 .step{flex:0 0 80%;max-width:320px;scroll-snap-align:center}
  .sdots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .sdots .cdot{background:#d8cfc0}
  .sdots .cdot.on{background:var(--teal);transform:scale(1.4)}
}

/* ---- Paires vidéo "en vrai" ---- */
.vpair{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:38px auto 0}
.vpair figure{margin:0}
.vpair .vwrap{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--ink)}
.vpair video{width:100%;aspect-ratio:9/16;height:auto;object-fit:cover;display:block}
.vpair .vtag{position:absolute;top:12px;left:12px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;padding:6px 11px;border-radius:100px;box-shadow:var(--shadow)}
.vpair figcaption{text-align:center;font-size:13.5px;color:var(--muted);margin-top:10px;font-weight:600}
.processcap{max-width:440px;margin:22px auto 0;text-align:center}
.processcap p{color:var(--muted);font-size:15px;margin-bottom:18px}

/* ---- Comparatif ---- */
.cmp{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:16px 18px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cmp thead th.n,.cmp td.n{text-align:center}
.cmp td.n{font-weight:700}
.cmp td.y{color:var(--teal);font-size:19px}
.cmp td.x{color:#c9d0d6;font-size:19px}
.cmp .colhi{background:rgba(14,156,147,.06)}
.cmp thead th.colhi{color:var(--teal)}

/* ---- Avis clients ---- */
.rev-head{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:34px;flex-wrap:wrap}
.rev-head .big{font-family:'Bricolage Grotesque';font-weight:800;font-size:44px;color:var(--teal);line-height:1}
.rev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.rcard .q{font-size:15px;font-style:italic;margin:12px 0 18px}
.rcard .who{display:flex;align-items:center;gap:11px}
.rcard .av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0}
.rcard .who b{font-size:14px;display:block}
.rcard .who small{font-size:11px;color:var(--muted)}
@media(max-width:860px){.rev{grid-template-columns:1fr}}
.center-cta{text-align:center;margin-top:36px}
/* photos jointes aux avis importés + lightbox */
.rphotos{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.rphotos img{width:56px;height:56px;object-fit:cover;border-radius:9px;cursor:zoom-in;border:1px solid var(--line)}
.rlb{position:fixed;inset:0;background:rgba(20,30,35,.86);display:flex;align-items:center;justify-content:center;z-index:999;cursor:zoom-out;padding:20px}
.rlb img{max-width:min(92vw,720px);max-height:86vh;border-radius:14px;box-shadow:var(--shadow)}

/* ---- Carrousel UGC ---- */
.ugc{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
.ugc::-webkit-scrollbar{display:none}
.ugcitem{flex:0 0 clamp(200px,42vw,240px);scroll-snap-align:start;aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative;box-shadow:var(--shadow)}
.ugcitem img,.ugcitem video{width:100%;height:100%;object-fit:cover}
.ugcitem .vtag{position:absolute;top:10px;left:10px;background:#fff;color:var(--ink);font-size:10px;font-weight:800;padding:5px 9px;border-radius:100px;display:flex;align-items:center;gap:5px;box-shadow:var(--shadow)}
.ugcitem .vtag svg{width:12px;height:12px}

/* ---- Bande CTA pleine largeur ---- */
.ctaband{background:var(--teal);color:#fff;text-align:center}
.ctaband h2{color:#fff;font-size:clamp(26px,3.4vw,38px);margin-bottom:22px}
.ctaband .btn{background:#fff;color:var(--teal);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.ctaband small{display:block;margin-top:15px;opacity:.9;font-size:13px}

/* ---- Bloc d'achat (offer box) ---- */
.offer{background:linear-gradient(180deg,#fff,#faf5ec)}
.obox{max-width:980px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.obox .media{padding:24px;background:var(--cream);display:flex;align-items:center}
.obox .info{padding:38px 34px}
.obox h3{font-size:26px;margin-bottom:6px}
@media(max-width:860px){
  .obox{grid-template-columns:1fr}
  .obox .info{padding:26px 20px}
  .obox .media{padding:14px;order:-1}
}
.obox2{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-lg);padding:36px 34px}
.obox2 h3{font-size:27px;margin-bottom:6px;text-align:center}
.obox2 .revmini{justify-content:center}
.obox2 .flist{margin:20px 0}
.obox2 .pay{justify-content:center}
@media(max-width:860px){.obox2{padding:26px 22px;border-radius:22px}}

/* ---- Bundles (choix de formule) ---- */
.bundles{display:flex;flex-direction:column;gap:11px;margin:20px 0}
.bundle{display:flex;align-items:center;gap:13px;border:1.5px solid var(--line);border-radius:16px;padding:15px 16px;cursor:pointer;transition:.15s;position:relative}
.bundle.sel{border-color:var(--teal);background:rgba(14,156,147,.04);box-shadow:0 6px 18px rgba(14,156,147,.1)}
.bundle .radio{width:19px;height:19px;border-radius:50%;border:2px solid #cfd8dd;flex-shrink:0}
.bundle.sel .radio{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px #fff}
.bundle .b-main{flex:1}
.bundle .b-main b{font-size:15px;font-weight:700}
.bundle .b-main small{display:block;font-size:12.5px;color:var(--muted)}
.bundle .b-pr{text-align:right}
.bundle .b-pr .n{font-weight:800;font-family:'Bricolage Grotesque';font-size:18px}
.bundle .b-pr .w{font-size:12px;color:#b9c2c9;text-decoration:line-through}
.bundle .flag{position:absolute;top:-10px;left:16px;background:var(--sand);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.bundle .save{font-size:11px;font-weight:700;color:var(--teal)}

/* ---- Réassurance / garantie / paiement ---- */
.reassure{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:20px}
.reassure li{display:flex;gap:10px;font-size:13.5px;align-items:center}
.reassure svg{width:18px;height:18px;color:var(--teal);flex-shrink:0}
.stockline{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-top:14px}
.dot{width:9px;height:9px;border-radius:50%;background:#e0574b;box-shadow:0 0 0 4px rgba(224,87,75,.15);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,87,75,.35)}70%{box-shadow:0 0 0 7px rgba(224,87,75,0)}100%{box-shadow:0 0 0 0 rgba(224,87,75,0)}}
.guarantee{max-width:680px;margin:34px auto 0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 28px;display:flex;gap:20px;align-items:center;box-shadow:var(--shadow)}
.guarantee .seal{width:64px;height:64px;border-radius:50%;background:rgba(14,156,147,.1);color:var(--teal);display:grid;place-items:center;flex-shrink:0}
.guarantee .seal svg{width:34px;height:34px}
.guarantee h4{font-size:18px;margin-bottom:5px}
.guarantee p{font-size:14px;color:var(--muted)}
@media(max-width:860px){.guarantee{flex-direction:column;text-align:center}}
.pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.pay span{font-size:10.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:#fff}
.pay svg{display:block;border-radius:4px}

/* ---- FAQ ---- */
.faq{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
details summary{list-style:none;cursor:pointer;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary .pl{color:var(--teal);font-size:22px;transition:.2s;line-height:1}
details[open] summary .pl{transform:rotate(45deg)}
details p{margin-top:14px;color:var(--muted);font-size:14.5px}

/* ---- Blocs visuels divers (mshot / installshot / pairgrid / socialproof) ---- */
.hero-media{padding-top:34px;padding-bottom:0;text-align:center}
.hero-media .eyebrow{display:block;margin-bottom:10px}
.hero-media h1{font-size:clamp(32px,5vw,50px);margin:0 auto 12px;max-width:20ch}
.hero-media h1 em{font-style:normal;color:var(--teal)}
.hero-media .lead{color:var(--muted);font-size:17px;max-width:46ch;margin:0 auto 26px}
.mshot{max-width:520px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg)}
.mshot img{width:100%;display:block}
.mseq{padding:26px 0}
.installshot{max-width:520px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.installshot img{width:100%;display:block}
.installshot .cap{position:absolute;left:18px;bottom:16px;color:#fff;font-family:'Bricolage Grotesque';font-weight:800;font-size:17px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.installshot .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,71,86,0) 55%,rgba(46,71,86,.6))}
.pairgrid{max-width:520px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pairgrid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
@media(max-width:860px){.pairgrid{max-width:340px}}
.socialproof{background:rgba(14,156,147,.08);border-top:1px solid rgba(14,156,147,.16);border-bottom:1px solid rgba(14,156,147,.16);text-align:center;font-size:14px;font-weight:600}
.socialproof b{color:var(--teal-d)}
.trustcompact{text-align:center;font-size:15px;font-weight:600;color:var(--ink)}

/* ---- Sticky ATC mobile ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:12px;pointer-events:none;transition:.25s;transform:translateY(120%)}
.sticky.show{transform:none}
.sticky .in{max-width:560px;margin:0 auto;background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px 11px 14px;pointer-events:auto}
.sticky .p{display:flex;align-items:center;gap:11px}
.sticky .thumb{width:42px;height:42px;border-radius:11px;object-fit:cover;background:var(--cream)}
.sticky small{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.sticky b{color:var(--teal);font-family:'Bricolage Grotesque'}
body.has-sticky-atc{padding-bottom:78px}
@media(max-width:860px){
  .hero{padding:0 0 40px}
  .hero-banner{display:block;position:relative;aspect-ratio:4/3;max-height:300px;overflow:hidden;margin-bottom:18px}
  .hero-banner img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
  .hero-banner .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,71,86,0) 45%,rgba(46,71,86,.62))}
  .hero-banner .cap{position:absolute;left:18px;bottom:14px;color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16.5px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
  .hero-grid{display:flex;flex-direction:column;gap:20px}
  .hero .gal{order:1}
  .hero-text{order:2}
  .hero-text .badge{margin-bottom:2px}
  .hero h1{margin:12px 0 12px}
  .hero p.lead{font-size:16.5px;margin-bottom:18px;max-width:none}
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:0}
  .hero .cta-row .btn{width:100%;padding:17px;font-size:17px}
  .hero .price-hint{text-align:center}
  .mini-trust{margin-top:18px;justify-content:center}
  .hero .eyebrow{font-size:11px;letter-spacing:.08em}
  .hero h1{font-size:clamp(30px,8vw,40px)}
  .cslide img,.cslide video{aspect-ratio:1/1}
}

/* ==========================================================================
   NOUVEAU LAYOUT DESKTOP — split-scroll (galerie épinglée + blocs qui défilent)
   >=861px : .pp-split en 2 colonnes ; .pp-pin (gauche, galerie) reste épinglée
   pendant que .pp-scroll (droite, blocs .pp-block empilés) défile.
   <861px : tout s'empile dans l'ordre naturel du HTML (mobile-first).
   ========================================================================== */
.pp-split{display:block}
.pp-pin{margin-bottom:28px}
.pp-gallery{width:100%}
.pp-scroll{display:flex;flex-direction:column;gap:28px}
.pp-block{width:100%}

@media(min-width:861px){
  .pp-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .pp-pin{margin-bottom:0;align-self:start}
  .pp-scroll{gap:56px}
  .pp-block{padding:0}
}

/* ---- Sélecteur de couleur (4 teintes) ---- */
.color-picker{margin:18px 0}
.color-picker .cp-label{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;gap:6px;align-items:baseline}
.color-picker .cp-label span{font-weight:400;color:var(--muted)}
.color-swatches{display:flex;gap:12px}
.color-swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0;position:relative;transition:.15s}
.color-swatch:hover{transform:translateY(-1px)}
.color-swatch.is-active{box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--teal)}
.color-swatch.is-active::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ---- Alignements mobile : boutons pleine largeur, cohérents entre sections ---- */
@media(max-width:860px){
  .center-cta .btn{width:100%;max-width:420px}
  .cmp .btn{width:100%}
  .processcap{padding:0 4px}
}

/* Mention de transparence sur les avis (art. L.111-7-2 Code conso) */
.rev-legal{max-width:70ch;margin:22px auto 0;font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center}