/* ==========================================================================
   Composants communs aux pages intérieures du site.
   Pile : traction.css, sombre.css, fiche-produit/assets/fp.css, puis celle-ci.
   ========================================================================== */

/* ---------- Liste numérotée (légende du tiroir, étapes) ---------- */
.lp .pn-blocs .d3{margin-top:8px}
.lp .pn-liste{list-style:none;counter-reset:b;margin:22px 0 20px;padding:0;display:grid;gap:0}
.lp .pn-liste li{
  counter-increment:b;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;
  padding:13px 0;border-top:1px solid rgba(255,255,255,.08);
}
.lp .pn-liste li::before{
  content:counter(b,decimal-leading-zero);grid-row:span 2;
  font-size:12px;font-weight:600;color:var(--vert);font-variant-numeric:tabular-nums;padding-top:2px;
}
.lp .pn-liste b{font-size:15px;font-weight:600;color:#fff}
.lp .pn-liste span{font-size:13.5px;color:var(--gris);margin-top:3px}

/* ---------- Le calcul ---------- */
.lp .calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);
  max-width:960px;margin-inline:auto;padding:clamp(20px,3vw,36px);border-radius:var(--r-l);
  border:1px solid rgba(255,255,255,.10);background:#181818;
}
@media (max-width:760px){.lp .calc{grid-template-columns:minmax(0,1fr)}}
.lp .calc__r{display:grid;gap:12px;align-content:center}
.lp .calc__l{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--gris)}
.lp .calc__l b{color:#fff;font-variant-numeric:tabular-nums}
.lp .calc__r input + .calc__l{margin-top:14px}
.lp .calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.1);outline:none}
.lp .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--vert);box-shadow:0 0 12px rgba(128,255,0,.6);cursor:pointer}
.lp .calc input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--vert);cursor:pointer}
.lp .calc input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.lp .calc__o{
  padding:clamp(18px,2.4vw,28px);border-radius:var(--r);
  background:radial-gradient(120% 120% at 10% 0%,rgba(128,255,0,.12),rgba(128,255,0,.02));
  border:1px solid rgba(128,255,0,.28);
}
.lp .calc__k{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--vert-clair)}
.lp .calc__n{margin:10px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lp .calc__n span{
  font-size:clamp(40px,5vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(0deg,#4FB000 10%,#80FF00 48%,#CBFF8C 92%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.lp .calc__n small{font-size:15px;color:var(--gris)}
.lp .calc__an{margin:8px 0 0;font-size:15px;color:var(--gris)}
.lp .calc__an b{color:#fff;font-variant-numeric:tabular-nums}
.lp .calc__rb{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:rgba(255,255,255,.75)}
.lp .calc__rb b{color:var(--vert)}

/* ---------- Les deux vraies captures ---------- */
.lp .pn-vrai{margin-top:clamp(32px,4vw,52px)}
.lp .pn-cap{margin:0}
.lp .pn-cap__i{aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;border:1px solid rgba(255,255,255,.10);background:#fff}
.lp .pn-cap__i img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.lp .pn-cap figcaption{margin-top:12px;font-size:13.5px;color:var(--gris)}
.lp .pn-cap figcaption b{color:#fff}

/* ---------- Le total identique ---------- */
.lp .egal{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(14px,3vw,36px);
  align-items:center;max-width:820px;margin-inline:auto;
}
@media (max-width:640px){.lp .egal{grid-template-columns:minmax(0,1fr)}.lp .egal__s{justify-self:center}}
.lp .egal__e{
  display:grid;gap:9px;padding:clamp(16px,2vw,24px);border-radius:var(--r-l);
  border:1px solid rgba(255,255,255,.10);background:#181818;
}
.lp .egal__k{margin:0 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.lp .egal__e i{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.08)}
.lp .egal__e i.court{width:60%}
.lp .egal__l,.lp .egal__t{margin:0;display:flex;justify-content:space-between;font-size:13.5px;color:var(--gris)}
.lp .egal__l span:last-child{color:var(--vert-clair)}
.lp .egal__t{padding-top:10px;border-top:1px solid rgba(255,255,255,.08);color:#fff;font-weight:600}
.lp .egal__t b{
  font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(0deg,#4FB000 10%,#80FF00 48%,#CBFF8C 92%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.lp .egal__s{font-size:clamp(36px,4vw,52px);font-weight:600;color:var(--vert);text-shadow:0 0 22px rgba(128,255,0,.5)}

/* ---------- Prix : le cumul sur trois ans ---------- */
.lp .cumul{max-width:900px;margin-inline:auto;display:grid;gap:26px}
.lp .cumul__g{display:grid;gap:8px}
.lp .cumul__an{margin:0 0 2px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.lp .cumul__l{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:14px;align-items:center}
.lp .cumul__l b{font-size:clamp(15px,1.6vw,18px);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.lp .cumul__b{display:block;height:clamp(14px,1.6vw,20px);border-radius:6px;width:0;transition:width 1.1s var(--tr)}
.lp .vu .cumul__b{width:var(--w)}
.lp .cumul__l--apps .cumul__b{background:linear-gradient(90deg,rgba(255,107,107,.35),rgba(255,107,107,.75))}
.lp .cumul__l--apps b{color:#FF8A8A}
.lp .cumul__l--tr .cumul__b{background:var(--bouton);box-shadow:0 0 14px rgba(128,255,0,.45);min-width:10px}
.lp .cumul__l--tr b{color:var(--vert)}
.lp .cumul__leg{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--gris)}
.lp .cumul__p{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:-10px}
.lp .cumul__p--apps{background:rgba(255,107,107,.7)}
.lp .cumul__p--tr{background:var(--vert)}
@media (prefers-reduced-motion:reduce){.lp .cumul__b{transition:none}}
@media (max-width:520px){.lp .cumul__l{grid-template-columns:minmax(0,1fr) 92px;gap:10px}}

/* ---------- Blocs : le catalogue filtrable ---------- */
.lp .cat{max-width:1180px;margin-inline:auto}
.lp .cat__barre{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lp .cat__q{
  flex:1;min-width:0;height:52px;padding:0 18px;border-radius:12px;font:inherit;font-size:16px;color:#fff;
  background:#1a1a1a;border:1px solid rgba(255,255,255,.14);outline:none;
}
.lp .cat__q::placeholder{color:rgba(255,255,255,.4)}
.lp .cat__q:focus{border-color:var(--vert);box-shadow:0 0 0 3px rgba(128,255,0,.18)}
.lp .cat__n{margin:0;font-size:14px;color:var(--gris);font-variant-numeric:tabular-nums;white-space:nowrap}
.lp .cat__fs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.lp .cat__f{
  padding:8px 14px;border-radius:99px;cursor:pointer;font:inherit;font-size:13px;color:rgba(255,255,255,.75);
  background:var(--verre);border:1px solid rgba(255,255,255,.10);
}
.lp .cat__f span{margin-left:4px;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.lp .cat__f:hover{color:#fff;border-color:rgba(128,255,0,.45)}
.lp .cat__f[aria-pressed="true"]{background:var(--bouton);color:var(--encre-vert);border-color:transparent;font-weight:600}
.lp .cat__f[aria-pressed="true"] span{color:var(--encre-vert)}
.lp .cat__g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lp .cat__c{
  padding:18px;border-radius:var(--r);background:#181818;border:1px solid rgba(255,255,255,.08);
  transition:border-color .2s,transform .2s;
}
.lp .cat__c:hover{border-color:rgba(128,255,0,.4);transform:translateY(-2px)}
.lp .cat__c[hidden]{display:none}
.lp .cat__k{margin:0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--vert)}
.lp .cat__t{margin:8px 0 0;font-size:16px;font-weight:600;letter-spacing:-.02em;color:#fff}
.lp .cat__d{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--gris)}
.lp .cat__vide{text-align:center;color:var(--gris);margin:30px 0 0}
@media (max-width:560px){.lp .cat__g{grid-template-columns:minmax(0,1fr)}}

/* ---------- Composition : les deux piles ---------- */
.lp .pile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);max-width:900px;margin-inline:auto}
@media (max-width:640px){.lp .pile{grid-template-columns:minmax(0,1fr)}}
.lp .pile__c{padding:clamp(18px,2.4vw,28px);border-radius:var(--r-l);background:#181818;border:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column}
.lp .pile__c--mal{border-color:rgba(255,107,107,.30)}
.lp .pile__c--bien{border-color:rgba(128,255,0,.34)}
.lp .pile__k{margin:0 0 16px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.lp .pile__c--mal .pile__k{color:#FF8A8A}
.lp .pile__c--bien .pile__k{color:var(--vert-clair)}
.lp .pile__s{display:grid;gap:8px;margin-top:auto}
.lp .pile__n{
  display:flex;flex-direction:column;justify-content:center;min-height:54px;padding:10px 16px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
}
.lp .pile__n small{font-size:12px;font-weight:400;color:rgba(255,255,255,.6);margin-top:2px}
.lp .pile__n--page{background:none;border-style:dashed;color:rgba(255,255,255,.75)}
.lp .pile__n--base{background:rgba(255,255,255,.02);color:rgba(255,255,255,.55)}
.lp .pile__n--rouge{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.45);color:#FFB3B3}
.lp .pile__n--vert{background:rgba(128,255,0,.10);border-color:rgba(128,255,0,.5);color:var(--vert-clair);box-shadow:0 0 24px rgba(128,255,0,.12)}

/* ---------- Composition : la bascule d'écran ---------- */
.lp .ecr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1100px;margin-inline:auto}
@media (max-width:860px){.lp .ecr{grid-template-columns:minmax(0,1fr)}}
.lp .ecr__bascule{grid-column:1/-1;justify-self:center;display:inline-flex;padding:4px;border-radius:99px;background:#1a1a1a;border:1px solid rgba(255,255,255,.12)}
.lp .ecr__bascule button{padding:9px 20px;border-radius:99px;border:0;background:none;color:rgba(255,255,255,.7);font:inherit;font-size:14px;cursor:pointer}
.lp .ecr__bascule button[aria-pressed="true"]{background:var(--bouton);color:var(--encre-vert);font-weight:600}
.lp .ecr__scene{display:grid;place-items:center;min-height:430px}
.lp .ecr__cadre{
  width:100%;max-width:560px;padding:14px;border-radius:18px;background:#101010;border:2px solid rgba(255,255,255,.16);
  transition:max-width .5s var(--tr),border-radius .5s var(--tr);
}
.lp .ecr__cadre[data-ecran="mobile"]{max-width:230px;border-radius:30px;border-color:var(--vert);box-shadow:0 0 40px rgba(128,255,0,.18)}
.lp .ecr__page{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lp .ecr__cadre[data-ecran="mobile"] .ecr__page{grid-template-columns:1fr;padding-bottom:40px}
.lp .ecr__col{display:flex;flex-direction:column;gap:8px}
.lp .ecr__b{
  display:flex;align-items:center;justify-content:center;min-height:34px;padding:6px 8px;border-radius:8px;text-align:center;
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
}
.lp .ecr__b--gal{min-height:240px;background:rgba(255,255,255,.04)}
.lp .ecr__cadre[data-ecran="mobile"] .ecr__b--gal{min-height:130px}
.lp .ecr__b--paliers{min-height:62px;border-color:rgba(128,255,0,.4);color:var(--vert-clair)}
.lp .ecr__b--atc{background:var(--bouton);color:var(--encre-vert);border:0}
.lp .ecr__b--onglets{min-height:44px}
.lp .ecr__b--fixe{display:none;position:absolute;left:0;right:0;bottom:0;background:var(--bouton);color:var(--encre-vert);border:0}
/* mobile : les paliers remontent, les onglets descendent, la barre fixe apparaît, les bulles vidéo se masquent */
.lp .ecr__cadre[data-ecran="mobile"] .ecr__b--paliers{order:1}
.lp .ecr__cadre[data-ecran="mobile"] .ecr__b--titre{order:0}
.lp .ecr__cadre[data-ecran="mobile"] .ecr__b--atc{order:2}
.lp .ecr__cadre[data-ecran="mobile"] .ecr__b--avis{order:3}
.lp .ecr__cadre[data-ecran="mobile"] .ecr__b--onglets{order:4}
.lp .ecr__cadre[data-ecran="mobile"] .ecr__b--video{display:none}
.lp .ecr__cadre[data-ecran="mobile"] .ecr__b--fixe{display:flex}
.lp .ecr__leg{margin:0}

/* ---------- Composition : l'arbre de blocs ---------- */
.lp .arbre{padding:clamp(18px,2.4vw,26px);border-radius:var(--r-l);background:#181818;border:1px solid rgba(255,255,255,.10);font-size:14px}
.lp .arbre__h{margin:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.lp .arbre ul{list-style:none;margin:0;padding:0}
.lp .arbre ul ul{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.12)}
.lp .arbre li{margin:4px 0}
.lp .arbre__n{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;color:rgba(255,255,255,.8);background:rgba(255,255,255,.04)}
.lp .arbre__n em{font-style:normal;font-size:11px;padding:2px 7px;border-radius:99px;background:var(--vert);color:var(--encre-vert);font-weight:600}
.lp .arbre__n--actif{background:rgba(128,255,0,.12);color:var(--vert-clair);box-shadow:inset 0 0 0 1px rgba(128,255,0,.5)}
.lp .pn-cap__i img[src*="advertorial"]{object-position:50% 0}

/* ---------- Quiz : la démonstration ---------- */
.lp .qz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,36px);max-width:1080px;margin-inline:auto}
@media (max-width:860px){.lp .qz{grid-template-columns:minmax(0,1fr)}}
.lp .qz__q{display:grid;gap:14px;align-content:start}
.lp .qz__bloc{padding:18px;border-radius:var(--r);background:#181818;border:1px solid rgba(255,255,255,.10)}
.lp .qz__t{margin:0 0 12px;font-size:16px;font-weight:600;letter-spacing:-.02em;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lp .qz__type{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
.lp .qz__type--c{background:rgba(255,107,107,.14);color:#FFB3B3;border:1px solid rgba(255,107,107,.4)}
.lp .qz__type--i{background:rgba(255,196,0,.12);color:#FFD966;border:1px solid rgba(255,196,0,.35)}
.lp .qz__type--p{background:rgba(128,255,0,.10);color:var(--vert-clair);border:1px solid rgba(128,255,0,.35)}
.lp .qz__r{display:flex;flex-wrap:wrap;gap:8px}
.lp .qz__r button{
  padding:10px 16px;border-radius:10px;cursor:pointer;font:inherit;font-size:14px;color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
}
.lp .qz__r button:hover{border-color:rgba(128,255,0,.5);color:#fff}
.lp .qz__r button[aria-pressed="true"]{background:var(--bouton);color:var(--encre-vert);border-color:transparent;font-weight:600}
.lp .qz__res{
  padding:clamp(18px,2.4vw,26px);border-radius:var(--r-l);
  background:radial-gradient(120% 120% at 10% 0%,rgba(128,255,0,.10),rgba(128,255,0,.015));border:1px solid rgba(128,255,0,.28);
}
.lp .qz__k{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--vert-clair)}
.lp .qz__ban{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}
.lp .qz__ban b{color:#fff}
.lp .qz__el{display:block;margin-top:6px;color:#FFD966}
.lp .qz__prod{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lp .qz__prod li{padding:10px;border-radius:12px;background:#161616;border:1px solid rgba(255,255,255,.10);display:grid;gap:4px;animation:pn-entre .4s var(--tr)}
.lp .qz__prod img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;margin-bottom:6px}
.lp .qz__prod b{font-size:14px;color:#fff}
.lp .qz__prod span{font-size:12.5px;color:var(--gris)}
.lp .qz__tags{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.lp .qz__tags p:last-child{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.lp .qz__tag{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
@keyframes pn-entre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Univers : la galerie ---------- */
.lp .univs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
@media (max-width:560px){.lp .univs{grid-template-columns:minmax(0,1fr)}}
.lp .univ{border-radius:var(--r-l);overflow:hidden;background:#181818;border:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.lp .univ:hover{border-color:rgba(128,255,0,.45);transform:translateY(-3px)}
.lp .univ__v{aspect-ratio:16/10;overflow:hidden;background:#fff}
.lp .univ__v img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.lp .univ__v--brut,.lp .univ__v--atelier{display:grid;place-items:center}
.lp .univ__v--brut{background:#F2EFE6;border-bottom:4px solid #111}
.lp .univ__v--brut span{font-size:clamp(44px,6vw,64px);font-weight:600;letter-spacing:-.04em;text-transform:uppercase;color:#111;padding:6px 18px;border:4px solid #111;box-shadow:8px 8px 0 #111;background:#FFD23F}
.lp .univ__v--atelier{background:radial-gradient(120% 120% at 20% 10%,#EFE4D2,#D8C3A5)}
.lp .univ__v--atelier span{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(40px,5vw,56px);color:#4A3A28;letter-spacing:-.01em}
.lp .univ__c{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.lp .univ__k{margin:0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--vert)}
.lp .univ__t{margin:6px 0 0;font-size:22px;font-weight:600;letter-spacing:-.03em;color:#fff}
.lp .univ__d{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--gris)}
.lp .univ__p{margin:auto 0 0;padding-top:14px;display:flex;gap:10px;align-items:baseline;font-size:14px}
.lp .univ__p s{color:rgba(255,255,255,.4)}
.lp .univ__p b{color:var(--vert)}

/* ---------- Univers : la même fiche, trois directions ---------- */
.lp .dir{max-width:820px;margin-inline:auto;display:grid;gap:22px;justify-items:center}
.lp .dir__choix{display:inline-flex;padding:4px;border-radius:99px;background:#1a1a1a;border:1px solid rgba(255,255,255,.12)}
.lp .dir__choix button{padding:9px 20px;border-radius:99px;border:0;background:none;color:rgba(255,255,255,.7);font:inherit;font-size:14px;cursor:pointer}
.lp .dir__choix button[aria-pressed="true"]{background:var(--bouton);color:var(--encre-vert);font-weight:600}
.lp .dir__fiche{
  --f:#fff; --t:#141414; --a:#E4572E; --r:14px; --b:1px solid rgba(0,0,0,.10); --police:Inter,system-ui,sans-serif; --gap:10px; --ombre:0 20px 50px rgba(0,0,0,.35);
  width:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:22px;padding:22px;
  background:var(--f);color:var(--t);border-radius:calc(var(--r) + 6px);border:var(--b);box-shadow:var(--ombre);font-family:var(--police);
  transition:background .4s,color .4s,border-radius .4s;
}
@media (max-width:620px){.lp .dir__fiche{grid-template-columns:minmax(0,1fr)}}
.lp .dir__img{border-radius:var(--r);overflow:hidden;border:var(--b);aspect-ratio:3/4}
.lp .dir__img img{width:100%;height:100%;object-fit:cover;display:block}
.lp .dir__c{display:flex;flex-direction:column;gap:var(--gap);justify-content:center}
.lp .dir__c p{margin:0}
.lp .dir__avis{font-size:13px;color:var(--a)}
.lp .dir__avis span{color:var(--t);opacity:.7}
.lp .dir__t{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.lp .dir__p{font-size:18px;font-weight:600}
.lp .dir__p s{font-weight:400;opacity:.5;font-size:14px;margin-left:6px}
.lp .dir__paliers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lp .dir__paliers span{padding:10px 6px;text-align:center;font-size:12.5px;border:var(--b);border-radius:var(--r)}
.lp .dir__paliers .on{border-color:var(--a);box-shadow:inset 0 0 0 1px var(--a);font-weight:600}
.lp .dir__btn{padding:14px;text-align:center;font-weight:600;background:var(--a);color:#fff;border-radius:var(--r)}
.lp .dir__re{font-size:12.5px;opacity:.7;text-align:center}
.lp .dir__fiche[data-dir="brutal"]{--f:#F2EFE6;--t:#111;--a:#111;--r:0px;--b:3px solid #111;--gap:12px;--ombre:10px 10px 0 #80FF00}
.lp .dir__fiche[data-dir="brutal"] .dir__t{text-transform:uppercase;font-size:26px;letter-spacing:-.03em}
.lp .dir__fiche[data-dir="brutal"] .dir__btn{background:#80FF00;color:#111;border:3px solid #111}
.lp .dir__fiche[data-dir="editorial"]{--f:#FBF8F3;--t:#2A2420;--a:#2A2420;--r:999px;--b:1px solid rgba(42,36,32,.16);--police:Georgia,'Times New Roman',serif;--gap:16px}
.lp .dir__fiche[data-dir="editorial"] .dir__img{border-radius:6px}
.lp .dir__fiche[data-dir="editorial"] .dir__t{font-weight:400;font-style:italic;font-size:28px}
.lp .dir__fiche[data-dir="editorial"] .dir__paliers span{font-family:Inter,system-ui,sans-serif}

/* ==========================================================================
   Mobile : chaque page intérieure raccourcie au maximum.
   Les grilles de cartes deviennent des pistes à glisser (data-defile), les
   rangées de pastilles et le catalogue défilent de côté (data-ligne), les
   schémas à deux colonnes restent côte à côte.
   ========================================================================== */
@media (max-width:760px){
  /* la bande de chiffres garde deux colonnes */
  body[class*="pg-"] .bande__in{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[class*="pg-"] .bande__c{padding:16px 10px;border-right:1px solid rgba(255,255,255,.10)!important;border-bottom:1px solid rgba(255,255,255,.10)}
  body[class*="pg-"] .bande__c:nth-child(2n){border-right:0!important}
  body[class*="pg-"] .bande__c:last-child{grid-column:1/-1;border-right:0!important;border-bottom:0}

  /* les pastilles : une seule rangée qui défile */
  .lp .meca[data-ligne]{flex-wrap:nowrap;justify-content:flex-start}
  .lp .meca[data-ligne] li{flex:none;white-space:nowrap}

  /* les licences et la réassurance : à glisser */
  .lp .plans[data-defile]{max-width:none!important}
  .lp .rassure[data-defile] > div{padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:var(--r);background:#181818}

  /* les listes d'étapes : leurs noms seuls, en petites cases */
  .lp .pn-liste--court{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:14px 0}
  .lp .pn-liste--court li{
    grid-template-columns:22px minmax(0,1fr);column-gap:6px;align-items:center;
    padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.03);
  }
  .lp .pn-liste--court li::before{grid-row:auto;padding-top:0;font-size:11px}
  .lp .pn-liste--court b{font-size:12.5px;line-height:1.25}
  .lp .pn-liste--court span{display:none}
  .masque-mobile{display:none}

  /* composition : les deux piles côte à côte */
  .lp .pile{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .lp .pile__c{padding:12px}
  .lp .pile__k{font-size:10px;margin-bottom:10px}
  .lp .pile__s{gap:6px}
  .lp .pile__n{min-height:40px;padding:7px 9px;font-size:12px}
  .lp .pile__n small{font-size:10.5px}
  /* composition : la bascule d'écran et l'arbre, plus serrés */
  .lp .ecr{gap:16px}
  .lp .ecr__scene{min-height:0}
  .lp .arbre{padding:14px;font-size:12.5px}
  .lp .arbre li{margin:3px 0}
  .lp .arbre__n{padding:5px 9px}
  .lp .arbre ul ul{margin-left:8px;padding-left:10px}

  /* blocs : le catalogue sur trois rangées qui défilent, les familles sur une rangée */
  .lp .cat__g[data-ligne]{
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-template-columns:none;
    grid-auto-columns:78%;gap:10px;scroll-snap-type:x mandatory;
  }
  .lp .cat__g[data-ligne] > li{scroll-snap-align:start}
  .lp .cat__fs[data-ligne]{flex-wrap:nowrap;margin-top:14px;margin-bottom:18px}
  .lp .cat__fs[data-ligne] .cat__f{flex:none;white-space:nowrap}
}

/* ==========================================================================
   Composition : le parcours du clic au panier, avec et sans page builder.
   Lu de haut en bas. La colonne Traction a une étape de moins : l'espace
   libéré le dit en vert.
   ========================================================================== */
.lp .flux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,40px);max-width:860px;margin-inline:auto;align-items:stretch}
.lp .flux__c{display:flex;flex-direction:column;padding:clamp(14px,2.4vw,26px);border-radius:var(--r-l);background:#181818;border:1px solid rgba(255,255,255,.10)}
.lp .flux__c--mal{border-color:rgba(255,107,107,.30)}
.lp .flux__c--bien{border-color:rgba(128,255,0,.34)}
.lp .flux__k{margin:0 0 18px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-align:center}
.lp .flux__c--mal .flux__k{color:#FF8A8A}
.lp .flux__c--bien .flux__k{color:var(--vert-clair)}
.lp .flux__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.lp .flux__e{
  position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  min-height:48px;padding:10px 14px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
}
.lp .flux__e b{font-weight:600}
.lp .flux__e small{font-size:12px;font-weight:400;line-height:1.4;color:rgba(255,255,255,.65);margin-top:3px}
/* la flèche entre deux étapes */
.lp .flux__e + .flux__e::before{
  content:"";position:absolute;left:50%;top:-17px;width:8px;height:8px;
  border-right:2px solid rgba(255,255,255,.35);border-bottom:2px solid rgba(255,255,255,.35);
  transform:translateX(-50%) rotate(45deg);
}
.lp .flux__e--rouge{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.5);color:#FFB3B3}
.lp .flux__e--rouge small{color:rgba(255,179,179,.85)}
.lp .flux__e--rouge::before,.lp .flux__e--rouge + .flux__e::before{border-color:#FF8A8A!important}
.lp .flux__e--vert{background:rgba(128,255,0,.10);border-color:rgba(128,255,0,.5);color:var(--vert-clair);box-shadow:0 0 24px rgba(128,255,0,.12)}
.lp .flux__e--vert small{color:rgba(198,255,128,.8)}
.lp .flux__e--fin{background:var(--verre);border-color:rgba(255,255,255,.22)}
.lp .flux__gain{
  flex:1;display:grid;place-items:center;margin:22px 0 0;padding:14px;border-radius:10px;
  border:1px dashed rgba(128,255,0,.45);background:rgba(128,255,0,.04);
  color:var(--vert-clair);font-size:13.5px;font-weight:600;text-align:center;line-height:1.45;
}
@media (max-width:760px){
  .lp .flux{gap:10px}
  .lp .flux__c{padding:12px 10px}
  .lp .flux__k{font-size:10px;margin-bottom:14px}
  .lp .flux__l{gap:17px}
  .lp .flux__e{min-height:38px;padding:7px 8px;font-size:12px}
  .lp .flux__e small{font-size:10.5px}
  .lp .flux__e + .flux__e::before{top:-13px;width:6px;height:6px}
  .lp .flux__gain{margin-top:17px;padding:10px 8px;font-size:11.5px}
}

/* ---------- Par qui : le récit ---------- */
.lp .recit{display:grid;gap:18px;font-size:clamp(17px,1.45vw,19px);line-height:1.62;color:var(--gris)}
.lp .recit p{margin:0}
.lp .recit b{color:#fff;font-weight:600}
.lp .recit__cit{font-size:clamp(24px,2.9vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1.18;color:#fff}
.lp .recit__fin{color:#fff;font-weight:600}
.lp #histoire .recit{text-align:center}

/* ---------- Par qui : les références ---------- */
.lp .preuves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
@media (max-width:860px){.lp .preuves{grid-template-columns:minmax(0,1fr)}}
.lp .preuve{
  display:flex;flex-direction:column;padding:clamp(12px,1.4vw,16px);border-radius:var(--r-l);
  background:#1A1A1A;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.lp .preuve__f{margin:0;border-radius:calc(var(--r-l) - 6px);overflow:hidden;border:1px solid rgba(255,255,255,.10);background:#fff}
.lp .preuve__barre{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#242424;border-bottom:1px solid rgba(255,255,255,.08)}
.lp .preuve__barre i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.lp .preuve__barre span{
  margin-left:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:3px 12px;border-radius:var(--r-pil);background:rgba(255,255,255,.07);font-size:11.5px;color:rgba(255,255,255,.6);
}
.lp .preuve__f img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
@media (max-width:640px){.lp .preuve__f img{aspect-ratio:4/5}}
.lp .preuve__c{padding:22px 8px 8px}
.lp .preuve__k{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--gris-clair)}
.lp .preuve__tag{
  padding:3px 10px;border-radius:var(--r-pil);font-size:11px;font-weight:600;letter-spacing:.07em;
  background:var(--bouton);color:var(--encre-vert);box-shadow:var(--reflet);
}
.lp .preuve h3{margin-top:12px}
.lp .preuve p:not(.preuve__k){margin-top:10px;color:var(--gris);font-size:15px;line-height:1.55}
.lp .preuve__l{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14.5px;font-weight:600;
  color:var(--vert);text-decoration:underline;text-underline-offset:4px;
}
.lp .preuve__l::after{content:"↗";text-decoration:none;font-size:.95em}
.lp .preuves__plus{margin:clamp(26px,3vw,36px) auto 0;max-width:60ch;text-align:center;color:var(--gris);font-size:15.5px;line-height:1.55}
.lp .preuves__plus b{color:#fff;font-weight:600}

/* ---------- Par qui : le script des leaders ---------- */
.lp .script{margin:0;align-self:center}
.lp .script li:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.lp .script b{font-size:16px}
.lp .declic{
  margin:clamp(36px,4vw,56px) auto 0;max-width:820px;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-l);text-align:center;
  background:radial-gradient(120% 140% at 50% 0%,rgba(128,255,0,.13),rgba(128,255,0,.02));border:1px solid rgba(128,255,0,.34);
}
.lp .declic p{margin:0;font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.025em;line-height:1.3;color:#fff}
.lp .declic small{display:block;margin-top:10px;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--gris)}
.lp.pg-parqui #decision .etape__k{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.04em;line-height:1.1;color:var(--vert)}
.lp.pg-parqui #decision .etape__k + h3{margin-top:12px}
.lp.pg-parqui #pour-qui .rassure b{display:flex;align-items:center;gap:10px}
.lp.pg-parqui #pour-qui .rassure b::before{
  content:"";flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%230F1E00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}