/** Shopify CDN: Minification failed

Line 1528:0 Unexpected "}"

**/
/* blp.css - feuille commune des 10 sections Blindier landing lieux.
   Copie conforme du CSS de maquette-landing.html : seuls les NOMS DE CLASSES
   sont prefixes blp__, et les selecteurs d'elements nus sont scopes sous .blp
   pour ne pas ecraser le theme Horizon. Aucune valeur n'a ete modifiee. */
.blp{
    --ink:#101114; --ink2:#12141A; --body:#3d4150; --dim:#8a8f9e; --line:#e7e8ec;
    --or:#FF6A1F; --or-soft:#FFF4EC; --or-light:#FF9E5C;
    --green:#12B76A; --red:#D62828; --bg:#ffffff; --grey-bg:#f7f7f9;
    --s:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }
.blp *{box-sizing:border-box}
.blp{font-family:var(--s);color:var(--body);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.blp img{max-width:100%;display:block}
  .blp h1,.blp h2,.blp h3{color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.1}
  .blp__w{max-width:1180px;margin:0 auto;padding:0 20px}
  .blp__narrow{max-width:840px;margin:0 auto}

  /* ---------- bandeau maquette ---------- */

  /* ---------- topbar ---------- */
  .blp__top{background:var(--ink);color:#fff;font-size:13px;font-weight:500;padding:9px 14px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 18px;letter-spacing:.01em}
  .blp__top span{white-space:nowrap}

  /* ---------- hero ---------- */
  .blp__hero{padding:34px 0 20px}
  .blp__hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
  @media(max-width:900px){.blp__hgrid{grid-template-columns:1fr;gap:26px}}

  .blp__gal{position:relative}
.blp__slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--r,14px);background:var(--grey-bg);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.blp__slides::-webkit-scrollbar{display:none}
.blp__slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1;position:relative}
  .blp__slide img{width:100%;height:100%;object-fit:cover;display:block}
  /* 03/09 — LE BANDEAU DE GARANTIE, choisi par Tim sur maquette (variante « bandeau d'offre »).
     Il ne sort que sur la 1re diapo (`forloop.first` dans blp-hero.liquid) et se pousse avec le
     carrousel : il ne flotte jamais au-dessus des diapos suivantes. Pleine largeur, colle au bord
     bas de l'image, pour qu'il se lise comme une bande d'offre et pas comme un autocollant. */
  /* 03/09, 2e passe — Tim : « il faut centrer l'ecriture dans le bandeau, il est trop bas ».
     La 1re diapo porte une bande orange GRAVEE de 200 px sur 2048, soit 9,77 % de sa hauteur.
     Avec un padding en px fixes, le bandeau CSS etait plus court que cette bande en desktop :
     le texte tombait dans le bas d'un bloc orange plus grand que lui. On donne donc au bandeau
     une hauteur en POURCENTAGE, exactement celle de la bande gravee : il la recouvre pile a
     n'importe quelle taille d'ecran, et le texte se centre dedans. */
  .blp__gbadge{position:absolute;left:0;right:0;bottom:0;height:9.77%;
    display:flex;align-items:center;justify-content:center;
    background:var(--or);color:#fff;font-size:12px;font-weight:900;letter-spacing:.02em;
    text-transform:uppercase;text-align:center;padding:0 12px;line-height:1.2;border-radius:0}
  @media (max-width:380px){ .blp__gbadge{font-size:11.5px;padding:0 10px} }
  .blp__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:9px}
  .blp__t{aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--grey-bg);border:2px solid transparent;padding:0;cursor:pointer;display:block}
  .blp__t[aria-current="true"]{border-color:var(--or)}
  .blp__t img{width:100%;height:100%;object-fit:cover}

  .blp__stars{color:var(--or);font-size:22px;letter-spacing:2px}
  .blp__rate{display:flex;align-items:center;gap:10px;font-size:16.5px;color:var(--dim);margin-bottom:16px}
  .blp__rate b{color:var(--ink);font-size:21px;font-weight:500;letter-spacing:-.01em}
.blp h1{font-size:44px;font-weight:900}
  @media(max-width:900px){.blp h1{font-size:33px}}
  .blp__punch{font-size:18px;color:var(--body);margin:14px 0 22px;line-height:1.5}
  .blp__punch b{color:var(--ink);font-weight:700}

  .blp__bul{list-style:none;padding:0;margin:0 0 24px}
  .blp__bul li{position:relative;padding:0 0 11px 30px;font-size:15.5px;color:var(--body)}
  .blp__bul li b{color:var(--ink)}
  .blp__bul li::before{content:"";position:absolute;left:0;top:6px;width:19px;height:19px;border-radius:50%;
    background:var(--or-soft);border:1.5px solid var(--or)}
  .blp__bul li::after{content:"";position:absolute;left:6px;top:11px;width:6px;height:3px;border-left:2px solid var(--or);
    border-bottom:2px solid var(--or);transform:rotate(-45deg)}

  /* ---------- paliers ---------- */
  .blp__tiers{display:grid;gap:14px;margin-bottom:24px}
  .blp__tier{border:2px solid var(--line);border-radius:13px;padding:17px 16px;display:flex;align-items:center;
    justify-content:space-between;gap:12px;cursor:pointer;position:relative;background:#fff;text-align:left;width:100%;font-family:inherit}
  .blp__tier[aria-checked="true"]{border-color:var(--or);background:var(--or-soft)}
  .blp__tier .l{font-weight:700;color:var(--ink);font-size:15px}
  .blp__tier .sub{font-size:12.5px;color:var(--dim);font-weight:500;margin-top:4px;line-height:1.35}
  .blp__tier .p{font-weight:800;color:var(--ink);font-size:17px;white-space:nowrap}
  .blp__tier .p s{color:var(--dim);font-weight:500;font-size:13px;margin-right:6px}
  .blp__flag{position:absolute;right:12px;top:-9px;background:var(--or);color:#fff;font-size:10px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px}

  .blp__cta{display:block;width:100%;background:var(--or);color:#fff;border:0;border-radius:11px;padding:17px;
    font-family:var(--s);font-size:17px;font-weight:800;letter-spacing:-.01em;cursor:pointer;text-align:center;
    box-shadow:0 6px 18px rgba(255,106,31,.28)}
  .blp__cta:hover{background:#f05f14}
  .blp__under{text-align:center;font-size:12.5px;color:var(--dim);margin-top:11px}

  .blp__trust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:18px;padding-top:18px;
    border-top:1px solid var(--line);font-size:12.5px;color:var(--dim);font-weight:500}

  /* ---------- bandeau lieux ---------- */

  /* ---------- sections ---------- */
.blp__sec{padding:64px 0}
  .blp__eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:12px}
.blp h2{font-size:34px;font-weight:900;margin-bottom:14px}
  @media(max-width:900px){.blp h2{font-size:26px}}
  .blp__lead{font-size:17px;color:var(--body);max-width:640px}
  .blp__center{text-align:center}
  .blp__center .blp__lead{margin:0 auto}

  /* ---------- bénéfices ---------- */
  .blp__bens{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
  @media(max-width:880px){.blp__bens{grid-template-columns:1fr}}
  .blp__ben{background:var(--grey-bg);border-radius:var(--r,14px);padding:26px 24px}
  .blp__ben .ic{font-size:26px;margin-bottom:12px}
  .blp__ben h3{font-size:19px;margin-bottom:8px}
  .blp__ben p{margin:0;font-size:14.5px}

  /* ---------- situations ---------- */
  .blp__sits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  @media(max-width:980px){.blp__sits{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.blp__sits{grid-template-columns:1fr}}
  .blp__sit{border-radius:var(--r,14px);overflow:hidden;background:var(--grey-bg);border:1px solid var(--line)}
  .blp__sit .ph{aspect-ratio:4/5;background:var(--grey-bg);position:relative}
  .blp__sit .ph img{width:100%;height:100%;object-fit:cover}
  .blp__sit .txt{padding:18px 20px 22px}
  .blp__sit h3{font-size:17px;margin-bottom:6px}
  .blp__sit p{margin:0;font-size:14px;color:var(--body)}

  /* cadre brief */

  /* ---------- ancrage ---------- */
  .blp__anchor{background:var(--ink);color:#fff;border-radius:18px;padding:52px 44px;text-align:center}
  @media(max-width:700px){.blp__anchor{padding:36px 22px}}
  .blp__anchor h2{color:#fff;font-size:36px;margin-bottom:18px}
  @media(max-width:700px){.blp__anchor h2{font-size:25px}}
  .blp__anchor h2 em{font-style:normal;color:var(--or-light)}
  .blp__anchor p{color:#c8ccd6;font-size:16.5px;max-width:640px;margin:0 auto 12px}
  .blp__kick{font-style:italic;color:#8a8f9e;font-size:15px;margin-top:20px}

  /* ---------- étapes ---------- */
  .blp__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;counter-reset:st}
  @media(max-width:880px){.blp__steps{grid-template-columns:1fr}}
  .blp__step{position:relative;padding-top:12px}
  .blp__step .n{width:36px;height:36px;border-radius:50%;background:var(--or);color:#fff;display:grid;place-items:center;
    font-weight:900;font-size:16px;margin-bottom:14px}
  .blp__step h3{font-size:18px;margin-bottom:7px}
  .blp__step p{margin:0;font-size:14.5px}

  /* ---------- comparatif ---------- */
  .blp__tbl{max-width:100%;overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:var(--r,14px)}
.blp table{border-collapse:collapse;width:100%;min-width:600px;font-size:14.5px}
.blp th,.blp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
  .blp th:first-child,.blp td:first-child{text-align:left;font-weight:600;color:var(--ink)}
  .blp thead th{background:var(--grey-bg);font-weight:700;color:var(--ink);font-size:13.5px}
  .blp thead th.us{background:var(--ink);color:#fff}
.blp td.us{background:var(--or-soft);font-weight:700;color:var(--ink)}
.blp .ok{color:var(--green);font-weight:800}
.blp .no{color:var(--red);font-weight:800}

  /* ---------- avis ---------- */
  .blp__revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
  @media(max-width:880px){.blp__revs{grid-template-columns:1fr}}
  .blp__rev{border:1px solid var(--line);border-radius:var(--r,14px);padding:22px 22px 20px;background:#fff}
  .blp__rev .s{color:var(--or);font-size:14px;letter-spacing:1px;margin-bottom:10px}
  .blp__rev p{margin:0 0 14px;font-size:15px;color:var(--ink);line-height:1.55}
  .blp__rev .who{font-size:13px;color:var(--dim);font-weight:600}
  .blp__rev .who b{color:var(--ink)}
  .blp__vf{display:inline-block;background:#eafaf1;color:var(--green);font-size:10.5px;font-weight:800;
    padding:2px 7px;border-radius:4px;margin-left:7px;letter-spacing:.03em}

  /* ---------- faq ---------- */
  .blp__faq{margin-top:34px}
  .blp__faq details{border-bottom:1px solid var(--line);padding:18px 0}
  .blp__faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:16.5px;list-style:none;
    display:flex;justify-content:space-between;gap:16px}
  .blp__faq summary::-webkit-details-marker{display:none}
  .blp__faq summary::after{content:"+";color:var(--or);font-weight:800;font-size:22px;line-height:1}
  .blp__faq details[open] summary::after{content:"–"}
  .blp__faq p{margin:12px 0 0;font-size:15px}

  /* ---------- offre finale ---------- */
  .blp__final{background:var(--or-soft);border-radius:18px;padding:52px 40px;text-align:center;border:2px solid var(--or)}
  @media(max-width:700px){.blp__final{padding:34px 20px}}
  .blp__final h2{font-size:32px;margin-bottom:12px}
  .blp__final .blp__cta{max-width:400px;margin:24px auto 0}

  /* ---------- barre collante ---------- */
  .blp__sticky{transform:translateY(110%);transition:transform .25s ease;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -4px 20px rgba(0,0,0,.08);padding:11px 16px;display:flex;align-items:center;gap:14px;z-index:60}
  .blp__sticky .info{flex:1;min-width:0}
  .blp__sticky .ttl{font-weight:800;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .blp__sticky .pr{font-size:13px;color:var(--dim)}
  .blp__sticky .pr b{color:var(--ink);font-size:15px}
  .blp__sticky button{background:var(--or);color:#fff;border:0;border-radius:9px;padding:13px 26px;font-family:var(--s);
    font-weight:800;font-size:15px;cursor:pointer;white-space:nowrap}

  /* notes de maquette */
.blp__sticky.is-on{transform:translateY(0)}

/* --- correctifs 26/08 : selecteurs alignes sur le markup Liquid --- */
.blp__accent{color:var(--or)}
.blp__cta[disabled]{background:var(--dim);box-shadow:none;cursor:not-allowed}
body:has(.blp__sticky){padding-bottom:78px}
.blp__sticky.is-on{transform:translateY(0)}

/* --- galerie swipeable : pastilles + reglages mobile (26/08) --- */
.blp__dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.blp__dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:all .2s ease}
.blp__dot.is-on{background:var(--or);width:20px;border-radius:3px}
.blp__tl{display:flex;flex-direction:column;gap:1px}
.blp__gar{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-size:14.5px;font-weight:600;color:var(--ink);color:var(--ink)}
.blp__gar svg{color:var(--green);flex:none}
/* 03/09 : les moyens de paiement sont passes SOUS le bouton d'achat (demande de Tim).
   Les 22 px servaient a les detacher de la garantie ; colles au bouton, 14 px. */
.blp__pay{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:14px}
.blp__pay svg,.blp__payico{height:24px;width:auto}

@media(max-width:900px){
  /* marges reduites : l'image du hero gagne de la largeur */
  .blp__hero{padding:14px 0 12px}
  .blp__hero .blp__w{padding:0 10px}
  .blp__gal{margin:0 -10px}
  .blp__slides{border-radius:0}
  .blp__thumbs{padding:0 10px;gap:6px}
  .blp__top{font-size:12px;padding:8px 12px;gap:2px 12px}
  .blp__dots{margin-top:8px}
}

/* --- bandeau medias (ethos) 26/08 --- */
.blp__ethos{padding:26px 0;border-block:1px solid var(--line)}
.blp__ethos-t{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.blp__ethos-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 44px}
.blp__logo{height:var(--blp-logo-h,30px);width:auto;max-width:150px;object-fit:contain;
  opacity:.72;transition:opacity .2s ease}
.blp__ethos-row.is-grey .blp__logo{filter:grayscale(1)}
.blp__logo:hover{opacity:1}
@media(max-width:640px){
  .blp__ethos{padding:20px 0}
  .blp__ethos-row{gap:16px 26px}
  .blp__logo{height:calc(var(--blp-logo-h,30px) * .8);max-width:110px}
}

/* --- tiroir panier : minuteur, livraison, paiement, garantie (26/08) --- */
.blp-cx{font-family:var(--s,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif)}
.blp-cx--top{padding:0 0 4px}
.blp-cx__timer{background:#FFF4EC;color:#101114;text-align:center;font-size:13px;font-weight:600;
  padding:9px 14px;letter-spacing:.01em}
.blp-cx__timer b{color:#FF6A1F;font-weight:800;font-variant-numeric:tabular-nums}
.blp-cx__ship{padding:12px 20px 4px}
.blp-cx__ship-t{margin:0 0 8px;text-align:center;font-size:13.5px;font-weight:600;color:#101114}
.blp-cx__bar{height:10px;border-radius:99px;background:#e7e8ec;overflow:hidden}
.blp-cx__bar span{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#12B76A,#0f9a59)}
.blp-cx--bottom{padding:14px 4px 4px;text-align:center}
.blp-cx__pay{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.blp-cx__pay svg{height:26px;width:auto}
.blp-cx__gar{margin-top:10px;font-size:13px;font-weight:600;color:#3d4150}

/* --- « En securite ou vous voulez » : hook + pastilles (26/08) --- */
.blp__lx{padding:44px 0;color:#fff}
.blp__lx-hook{color:#fff;text-align:center;font-size:29px;font-weight:900;letter-spacing:-.025em;
  margin:0 0 10px;line-height:1.15}
.blp__lx-sub{text-align:center;color:#9aa0ad;font-size:15px;margin:0 auto 26px;max-width:520px}
.blp__lx-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.blp__chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap;transition:border-color .2s ease}
.blp__chip svg{color:var(--or);flex:none}
.blp__chip:hover{border-color:var(--or)}
@media(max-width:640px){
  .blp__lx{padding:32px 0}
  .blp__lx-hook{font-size:23px}
  .blp__lx-sub{font-size:14px;margin-bottom:20px}
  .blp__lx-list{gap:8px}
  .blp__chip{padding:8px 13px;font-size:13.5px;gap:6px}
}

/* --- UGC : carrousel de situations, photo ou video (26/08) --- */
.blp__ugc{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:34px 2px 6px;margin:0 -20px;padding-inline:20px;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.blp__ugc::-webkit-scrollbar{display:none}
.blp__uc{position:relative;flex:0 0 232px;margin:0;scroll-snap-align:start;
  border-radius:var(--r,14px);overflow:hidden;background:#e7e8ec;aspect-ratio:4/5}
.blp__uc img,.blp__uc video{width:100%;height:100%;object-fit:cover;display:block}
.blp__uc video{cursor:pointer}
.blp__uc figcaption{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;color:#fff;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(to top,rgba(16,17,20,.82),rgba(16,17,20,0))}
.blp__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:#101114;box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:opacity .2s ease,transform .2s ease}
.blp__play:hover{transform:translate(-50%,-50%) scale(1.06)}
.blp__uc--video.is-playing .blp__play{opacity:0;pointer-events:none}
.blp__ugc-hint{text-align:center;color:var(--dim);font-size:13px;margin:14px 0 0}
@media(max-width:640px){
  .blp__ugc{gap:10px;padding-top:26px;margin:0 -12px;padding-inline:12px}
  .blp__uc{flex:0 0 168px}
  .blp__uc figcaption{font-size:13px;padding:22px 11px 10px}
  .blp__play{width:44px;height:44px}
}

/* --- schemas d'installation + visuel anime (26/08) --- */
.blp__step-img{width:132px;height:132px;margin:0 0 14px;display:grid;place-items:center}
.blp__step-img img{width:100%;height:100%;object-fit:contain}
.blp__anim{margin:0 auto 34px;text-align:center;max-width:280px}
.blp__anim img{width:100%;max-width:260px;border-radius:var(--r,14px);display:block;margin:0 auto}
.blp__anim figcaption{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--dim)}
@media(max-width:880px){
  .blp__step{display:grid;grid-template-columns:88px 1fr;grid-template-areas:"img n" "img h" "img p";
    column-gap:14px;align-items:start}
  .blp__step-img{grid-area:img;width:88px;height:88px;margin:0}
  .blp__step .n{grid-area:n;margin-bottom:6px}
  .blp__step h3{grid-area:h}
  .blp__step p{grid-area:p}
  .blp__anim{margin-bottom:26px;max-width:230px}
}


/* ================================================================
   26/08 (soir) — 4 sections refondues sur les references de Tim
   (smooche.com). Fragments ecrits par 4 agents en parallele puis
   fusionnes ici. Prefixes distincts : cmp / rw / fq / um — aucune
   regle existante n est ecrasee.
   ================================================================ */
/* ---------- comparatif 2 colonnes (26/08, refonte format smooche.com) ---------- */
/* Prefixe blp__cmp- : ne touche a aucune classe existante de blp__tbl (devenue inutilisee). */
.blp__cmp-wrap{margin-top:34px}
.blp__cmp-tbl{max-width:100%;overflow-x:auto}
.blp__cmp-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-radius:var(--r,14px) var(--r,14px) 0 0;overflow:hidden}
.blp__cmp-head,.blp__cmp-label,.blp__cmp-cell{min-width:0}

.blp__cmp-head{padding:16px 16px 14px;display:flex;flex-direction:column;gap:4px;justify-content:flex-end}
.blp__cmp-head--lbl{background:transparent}
.blp__cmp-head--us{background:#111;color:#fff;border-radius:var(--r,14px) var(--r,14px) 0 0;
  align-items:center;text-align:center;font-size:14px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.blp__cmp-head--them{color:var(--ink,#101114);font-weight:800;font-size:13.5px}
.blp__cmp-sub{font-size:11.5px;font-weight:500;color:var(--dim,#8a8f9e);letter-spacing:0;text-transform:none}

.blp__cmp-row{display:contents}
.blp__cmp-label{padding:15px 16px;font-weight:600;color:var(--ink,#101114);font-size:14.5px;
  border-top:1px solid var(--line,#e7e8ec);display:flex;align-items:center}
.blp__cmp-cell{padding:15px 14px;border-top:1px solid var(--line,#e7e8ec);
  display:flex;align-items:center;justify-content:center;gap:9px}
.blp__cmp-cell--us{background:var(--or-soft,#FFF4EC)}
.blp__cmp-val{font-size:13px;font-weight:700;color:var(--ink,#101114);white-space:nowrap}

.blp__cmp-dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  flex:none;font-size:12px;font-weight:900;line-height:1}
.blp__cmp-dot--ok{background:var(--or,#FF6A1F);color:#fff}
.blp__cmp-dot--no{background:#e9eaee;color:#9aa0ad}

.blp__cmp-last .blp__cmp-cell--us{border-radius:0 0 var(--r,14px) var(--r,14px)}

@media(max-width:480px){
  .blp__cmp-wrap{margin-top:24px}
  .blp__cmp-grid{grid-template-columns:1.35fr 1fr 1fr}
  .blp__cmp-head{padding:12px 8px 10px;gap:3px}
  .blp__cmp-head--us{font-size:11.5px}
  .blp__cmp-head--them{font-size:12px}
  .blp__cmp-sub{font-size:10px}
  .blp__cmp-label{padding:11px 8px;font-size:12.5px}
  .blp__cmp-cell{padding:11px 6px;gap:5px}
  .blp__cmp-dot{width:17px;height:17px;font-size:9.5px}
  .blp__cmp-val{font-size:10.5px;white-space:normal}
}


/* --- Mur d'avis complet (blp-avis) : les 164 avis de avis-boutique.json,
   habilles a la DA de la landing. Prefixe blp__rw pour ne jamais toucher
   .blp__revs / .blp__rev qui servent aux 3 avis ecrits a la main (26/08). --- */
.blp__rw-wall{margin-top:44px;padding-top:38px;border-top:1px solid var(--line)}
.blp__rw-entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:28px;margin-bottom:30px}
.blp__rw-entete[hidden]{display:none}
.blp__rw-note{display:flex;align-items:baseline;gap:9px}
.blp__rw-moyenne{font-size:32px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.blp__rw-etoiles{display:inline-flex;gap:2px;align-self:center}
.blp__rw-etoiles svg{width:15px;height:15px}
.blp__rw-compte{font-size:14px;color:var(--dim);font-weight:600}
.blp__rw-repartition{flex:1 1 240px;max-width:340px;margin:0;padding:0;list-style:none;
  display:grid;gap:5px}
.blp__rw-ligne{display:grid;grid-template-columns:2.4em 1fr 2.4em;align-items:center;
  gap:8px;font-size:12px;color:var(--dim);font-weight:600}
.blp__rw-bar{height:6px;border-radius:99px;background:var(--grey-bg);overflow:hidden;min-width:0}
.blp__rw-bar span{display:block;height:100%;background:var(--or)}
.blp__rw-grille{display:grid;gap:16px;align-items:start;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.blp__rw-card{display:flex;flex-direction:column;gap:9px;padding:20px;
  border:1px solid var(--line);border-radius:var(--r,14px);background:#fff;min-width:0}
.blp__rw-haut{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  column-gap:10px}
.blp__rw-identite{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-width:0}
.blp__rw-etoiles-card{display:inline-flex;gap:2px}
.blp__rw-etoiles-card svg{width:13px;height:13px}
.blp__rw-auteur{font-size:14px;font-weight:700;color:var(--ink)}
.blp__rw-verifie{display:inline-flex;align-items:center;background:#eafaf1;color:var(--green);
  font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;white-space:nowrap}
.blp__rw-date{font-size:12px;color:var(--dim);white-space:nowrap}
.blp__rw-texte{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}
.blp__rw-reponse{margin:2px 0 0;padding-inline-start:12px;border-inline-start:2px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--dim);white-space:pre-line}
.blp__rw-reponse-titre{display:block;margin-bottom:2px;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.blp__rw-pied{margin-top:26px;text-align:center}
.blp__rw-plus{padding:13px 30px;border:1.5px solid var(--or);border-radius:99px;background:#fff;
  font-family:var(--s);font-size:13.5px;font-weight:700;color:var(--or);cursor:pointer;
  transition:background .2s ease,color .2s ease}
.blp__rw-plus:hover{background:var(--or);color:#fff}
.blp__rw-plus[hidden],.blp__rw-erreur[hidden]{display:none}
.blp__rw-erreur{font-size:13px;color:var(--dim)}

@media(max-width:900px){
  .blp__rw-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .blp__rw-wall{margin-top:32px;padding-top:28px}
  .blp__rw-grille{grid-template-columns:1fr}
  .blp__rw-entete{gap:18px}
  .blp__rw-repartition{max-width:none;flex-basis:100%}
  .blp__rw-card{padding:16px}
}

/* ---------- blp-faq v2 (style smooche.com) — 26/08 ----------
   Classes toutes prefixees blp__fq pour ne jamais toucher .blp__faq existant.
   Liste verticale sobre : question en gras a gauche, signe +/- fin et gris
   dans un carre arrondi discret a droite, filet gris pleine largeur entre
   chaque ligne. Zero fond colore, zero carte, zero ombre. Zero JS : le
   <details>/<summary> natif porte l'etat, le CSS porte l'animation. */

.blp__fq-list{margin-top:8px;border-top:1px solid var(--line)}

.blp__fq-item{border-bottom:1px solid var(--line)}

.blp__fq-q{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px 2px;font-weight:700;
  font-size:18px;color:var(--ink);line-height:1.35}
.blp__fq-q::-webkit-details-marker{display:none}
.blp__fq-q::marker{content:""}
.blp__fq-q:hover{color:var(--or)}

.blp__fq-qtext{min-width:0}

.blp__fq-sign{flex:none;position:relative;width:26px;height:26px;
  border:1.5px solid var(--line);border-radius:calc(var(--r,10px) * 0.6);
  background:transparent;transition:border-color .2s ease,background .2s ease}
.blp__fq-sign::before,
.blp__fq-sign::after{content:"";position:absolute;top:50%;left:50%;
  width:11px;height:1.5px;background:var(--dim);border-radius:1px;
  transform:translate(-50%,-50%);transition:transform .25s ease,opacity .25s ease}
.blp__fq-sign::after{transform:translate(-50%,-50%) rotate(90deg)}

.blp__fq-item[open] .blp__fq-sign{border-color:var(--or);background:var(--or-soft)}
.blp__fq-item[open] .blp__fq-sign::before,
.blp__fq-item[open] .blp__fq-sign::after{background:var(--or)}
.blp__fq-item[open] .blp__fq-sign::after{transform:translate(-50%,-50%) rotate(0deg)}

.blp__fq-a{margin:0 0 20px;padding-right:42px;font-size:15px;line-height:1.65;
  color:var(--body);animation:blpFqIn .22s ease}

@keyframes blpFqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:480px){
  .blp__fq-q{font-size:16.5px;padding:16px 2px;gap:12px}
  .blp__fq-a{padding-right:0;font-size:14.5px}
  .blp__fq-sign{width:24px;height:24px}
}

/* --- UGC MINI : mini carrousel video sous le bouton Ajouter au panier ---
   Section blp-ugc-mini.liquid. Modele : smooche.com. TOUTES les classes sont
   prefixees blp__um pour ne jamais toucher .blp__ugc/.blp__uc/.blp__play
   (le grand carrousel UGC existant). A APPENDER en fin de blp.css. */

.blp__um-sec{padding:28px 0}

.blp__um-wrap{max-width:900px;margin:0 auto}

.blp__um-title{text-align:center;font-size:14px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;margin:0 0 14px}

.blp__um-viewport{position:relative}

.blp__um-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding:2px}
.blp__um-rail::-webkit-scrollbar{display:none}

.blp__um-card{position:relative;flex:0 0 190px;margin:0;scroll-snap-align:start;
  border-radius:var(--r,12px);overflow:hidden;background:var(--grey-bg,#f7f7f9);aspect-ratio:4/5}
.blp__um-card img,.blp__um-card video{width:100%;height:100%;object-fit:cover;display:block}
.blp__um-card--video video{cursor:pointer}

.blp__um-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:var(--ink,#101114);box-shadow:0 4px 16px rgba(0,0,0,.26);
  transition:opacity .2s ease,transform .2s ease}
.blp__um-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.blp__um-card.is-playing .blp__um-play{opacity:0;pointer-events:none}

.blp__um-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink,#101114);box-shadow:0 3px 12px rgba(16,17,20,.22);
  transition:transform .15s ease}
.blp__um-arrow:hover{transform:translateY(-50%) scale(1.08)}
.blp__um-arrow--prev{left:8px}
.blp__um-arrow--next{right:8px}

@media(max-width:640px){
  .blp__um-card{flex:0 0 128px}
  .blp__um-play{width:40px;height:40px}
  .blp__um-arrow{display:none}
}

/* --- compression du 1er ecran hero mobile (26/08 soir) : galerie, vignettes,
   avis, h1 et debut du punch doivent tenir sous 640px de haut sur 390x740
   (barre d'achat collante mange les 100 derniers px). Client accepte le
   rognage haut/bas de la galerie. h1 INTACT (deja au minimum : .blp__final h2
   fait 32px sans reduction mobile, le reduire ferait perdre a h1 son statut
   de plus gros texte de la page). --- */
@media(max-width:640px){
  /* 🚩 26/08 — ON NE ROGNE PLUS. Le 4/3 en `cover` coupait le produit en bas :
     les visuels sont carres, la boite est plus large que haute, donc `cover`
     mangeait ~48px en haut ET en bas — pile la ou se trouve le pied a visser.
     On garde une boite plus basse que le carre pour tenir le premier ecran,
     mais en `contain` : l'image entiere est visible, elle est juste posee sur
     le fond gris. 5/4 plutot que 4/3 pour reduire les bandes laterales.
     👉 Le vrai correctif serait de produire des visuels 5/4 cadres pour ce
     format ; tant qu'ils sont carres, `contain` est la seule facon de ne rien
     couper. */
  /* 03/09 — LA BOITE EPOUSE LE MEDIA. Le 5/4 datait de visuels carres poses en
     `contain` : l'image ne faisait plus que 312x312 dans une boite de 390, soit
     20 % de largeur perdus en bandes vides. Les 17 slides du carrousel sont
     CARREES et portent leur texte : la boite passe en 1/1, l'image remplit la
     largeur et le texte devient lisible. Mesure avant : image 390x312. */
  .blp__slide{aspect-ratio:1}
  .blp__slide img{object-fit:contain}
  .blp__dots{margin-top:6px}
  /* les 5 vignettes tiennent TOUTE la largeur : en bande defilante a 46px elles
     s'arretaient a 264px sur 390 et laissaient un trou a droite. On garde la
     grille 5 colonnes et on gagne la hauteur sur le format, pas sur la largeur. */
  .blp__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px;padding:0}
  .blp__t{aspect-ratio:5/4}
  .blp__hgrid{gap:16px}
  .blp__rate{margin-bottom:14px;font-size:15.5px}
  .blp__stars{font-size:21px}
  .blp__rate b{font-size:20px}
  .blp__punch{margin-top:8px}
}


/* ================================================================
   26/08 (soir) — deux sections issues de pmp/blindier-section-peur.html,
   choisies par Tim : le mur de presse (blp__pr) et « elle tient avec
   quoi ? » (blp__tt). Prefixes distincts, aucune regle existante touchee.
   ================================================================ */

/* --- blp-presse : le mur de coupures --- */
.blp__pr-rail{display:flex;gap:20px;overflow-x:auto;padding:14px 4px 20px;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.blp__pr-rail::-webkit-scrollbar{display:none}
.blp__pr-cut{flex:0 0 258px;background:#FBF9F4;border:1px solid #E4DFD3;border-radius:4px;
  padding:20px 20px 16px;box-shadow:0 6px 18px rgba(16,17,20,.11);
  transform:rotate(-1.4deg);transition:transform .18s;scroll-snap-align:start}
.blp__pr-cut:nth-child(even){transform:rotate(1.6deg)}
.blp__pr-cut:hover{transform:rotate(0) translateY(-4px)}
.blp__pr-cut--n{background:#fff;border-color:var(--line)}
.blp__pr-src{font:800 10px/1 var(--s);letter-spacing:.13em;text-transform:uppercase;color:#8B7B5E;
  padding-bottom:9px;border-bottom:1px solid #E4DFD3;margin-bottom:13px;
  display:flex;justify-content:space-between;gap:10px}
.blp__pr-cut--n .blp__pr-src{color:var(--or);border-color:var(--line)}
.blp__pr-t{font-family:Georgia,"Times New Roman",serif;font-size:19.5px;font-weight:700;
  color:#1b1a17;line-height:1.24;margin-bottom:11px}
.blp__pr-big{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  line-height:1;margin-bottom:11px}
.blp__pr-x{font-size:13px;color:#6d675c;line-height:1.55}
.blp__pr-cut--n .blp__pr-x{color:var(--body)}
.blp__pr-after{text-align:center;margin:26px auto 0;max-width:620px;font-size:19px;
  color:var(--ink);font-weight:600;line-height:1.4}
@media(max-width:640px){
  .blp__pr-rail{gap:14px;margin:0 -20px;padding-inline:20px}
  .blp__pr-cut{flex:0 0 224px;padding:17px 17px 14px}
  .blp__pr-t{font-size:17.5px}
  .blp__pr-big{font-size:30px}
  .blp__pr-after{font-size:17px}
}

/* --- blp-tient : « elle tient avec quoi ? » --- */
.blp__tt{max-width:760px;margin:0 auto}
.blp__tt-r{display:grid;grid-template-columns:190px 1fr auto;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)}
.blp__tt-r:last-child{border-bottom:0}
.blp__tt-n{font-weight:700;color:var(--ink);font-size:16px}
.blp__tt-r--us .blp__tt-n{color:var(--or)}
.blp__tt-bar{height:12px;border-radius:999px;background:#e9eaee;overflow:hidden;min-width:0}
.blp__tt-bar i{display:block;height:100%;border-radius:999px}
.blp__tt-v{font-size:13.5px;color:var(--dim);font-weight:600;text-align:right}
.blp__tt-note{text-align:center;margin:30px auto 0;max-width:620px;font-size:16px;
  color:var(--ink);font-weight:600;line-height:1.5}
@media(max-width:640px){
  .blp__tt-r{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .blp__tt-v{text-align:left}
  .blp__tt-note{font-size:15px}
}


/* --- 26/08 : le LIEU sur chaque vignette du mini-carrousel. Il remplace les
   pastilles de l'ancienne section « Lieux », supprimee : un lieu illustre vaut
   mieux qu'un lieu ecrit. Degrade du bas pour que le texte tienne sur
   n'importe quelle image, sans assombrir le sujet. --- */
.blp__um-card{position:relative}
.blp__um-lieu{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;
  color:#fff;font-size:12.5px;font-weight:700;line-height:1.25;text-align:center;
  letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.45);pointer-events:none;
  background:linear-gradient(to top,rgba(9,10,13,.78),rgba(9,10,13,.42) 55%,rgba(9,10,13,0))}
@media(max-width:640px){
  .blp__um-lieu{font-size:11.5px;padding:22px 7px 7px}
}


/* ================================================================
   26/08 (nuit) — retouches demandees par Tim a l'ecran
   ================================================================ */

/* --- COMPARATIF : le logo dans la case noire, et le mobile lisible --- */
.blp__cmp-logo{height:19px;width:auto;max-width:100%;margin:0 auto;display:block;object-fit:contain}
@media(max-width:640px){
  /* La colonne de gauche prenait 3 lignes et les valeurs se cassaient a cote
     de leur pastille : on retrecit les libelles et on EMPILE pastille + valeur,
     centrees. Toutes les lignes s'alignent enfin sur la meme grille. */
  .blp__cmp-grid{grid-template-columns:1.12fr .96fr .82fr}
  .blp__cmp-head{padding:12px 7px 11px;gap:3px}
  .blp__cmp-logo{height:15px}
  .blp__cmp-head--them{font-size:14px}
  .blp__cmp-sub{font-size:9.5px;line-height:1.32;letter-spacing:0}
  .blp__cmp-label{font-size:13px;line-height:1.28;padding-right:5px}
  .blp__cmp-cell{flex-direction:column;gap:5px;padding:13px 5px;justify-content:center}
  .blp__cmp-val{font-size:11.5px;line-height:1.25;text-align:center;font-weight:700}
  .blp__cmp-dot{width:19px;height:19px;font-size:10.5px}
}

/* --- NIVEAUX : la ligne Blindier est le gagnant, elle doit se voir --- */
.blp__tt-r--us{background:var(--or-soft);border-radius:var(--r,14px);
  padding-inline:16px;border-bottom:0;box-shadow:inset 3px 0 0 var(--or)}
.blp__tt-r--us .blp__tt-v{color:var(--ink)}
@media(max-width:640px){
  .blp__tt-r--us{padding:14px 14px 16px;margin-top:6px}
}

/* --- AVIS : la note remonte dans l'en-tete de section, centree --- */
.blp__rw-entete--haut{max-width:560px;margin:18px auto 0;text-align:left}
.blp__rw-entete--haut .blp__rw-note{justify-content:center;margin-bottom:16px}
.blp__rw-entete--haut .blp__rw-repartition{margin:0 auto}
@media(max-width:640px){
  .blp__rw-entete--haut{margin-top:14px}
  .blp__rw-entete--haut .blp__rw-note{margin-bottom:12px}
}

/* Le logo etait plaque en bas de la case noire (heritage du
   justify-content:flex-end des en-tetes). On le centre : la case est haute a
   cause du sous-titre de la colonne voisine, pas a cause de son contenu. */
.blp__cmp-head--us{justify-content:center}


/* --- 26/08 : la coche de selection des paliers (demande de Tim).
   Elle n'a AUCUN etat propre : tout est dessine depuis `aria-checked` du
   bouton, que le JS met deja a jour. Un etat duplique finit toujours par
   mentir. Le carre reste visible meme non coche : c'est ce qui dit au client
   « il y a un choix a faire ici », alors qu'une coche qui n'apparait qu'une
   fois selectionnee ne se remarque jamais. --- */
.blp__tier{gap:13px}
.blp__tick{flex:0 0 auto;width:23px;height:23px;border-radius:7px;
  border:2px solid var(--line);background:#fff;position:relative;
  transition:background .14s,border-color .14s}
.blp__tick::after{content:"";position:absolute;left:6.5px;top:4px;
  width:6px;height:11px;border:solid #fff;border-width:0 2.4px 2.4px 0;
  transform:rotate(45deg) scale(.5);opacity:0;
  transition:opacity .14s,transform .14s}
.blp__tier[aria-checked="true"] .blp__tick{background:var(--or);border-color:var(--or)}
.blp__tier[aria-checked="true"] .blp__tick::after{opacity:1;transform:rotate(45deg) scale(1)}
.blp__tier:hover .blp__tick{border-color:var(--or-light)}
.blp__tl{flex:1 1 auto;min-width:0}
@media(max-width:640px){
  .blp__tier{gap:13px;padding:16px 14px}
  .blp__tick{width:21px;height:21px;border-radius:6px}
  .blp__tick::after{left:5.8px;top:3.4px;width:5.4px;height:10px}
}

/* Le logo remplace le mot « Blindier » sur la ligne gagnante des Niveaux.
   Wordmark NOIR : la ligne est sur fond orange pale, un logo blanc y serait
   invisible. La hauteur est calee sur celle du texte qu'il remplace. */
.blp__tt-logo{height:17px;width:auto;display:block;object-fit:contain}
@media(max-width:640px){ .blp__tt-logo{height:15px} }
/* --- blp-ethos : bandeau de logos en defilement continu (marquee), 26/08 ---
   Rail duplique x2 (.blp__eth-set x2), anime de translateX(0) a translateX(-50%).
   Comme les deux moities sont identiques, l'arrivee a -50% est visuellement
   indiscernable du depart : boucle sans couture, sans JS, juste @keyframes.
   Reutilise .blp__ethos / .blp__ethos-t / .blp__logo de blp.css (fond, titre,
   gris 72%) — .blp__ethos-row n'est plus utilisee par ce balisage, aucune regle
   existante n'a du etre neutralisee. */

.blp__eth-piste{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--r,0);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.blp__eth-rail{
  display:flex;
  align-items:center;
  width:max-content;
  animation:blp-eth-scroll var(--eth-dur,28s) linear infinite;
  will-change:transform;
}

.blp__eth-piste:hover .blp__eth-rail{
  animation-play-state:paused;
}

.blp__eth-set{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:44px;
  padding-inline-end:44px;
}

.blp__eth-piste.is-grey .blp__logo{filter:grayscale(1)}

@keyframes blp-eth-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media(max-width:640px){
  .blp__eth-set{gap:26px;padding-inline-end:26px}
}

@media (prefers-reduced-motion: reduce){
  .blp__eth-piste{
    mask-image:none;
    -webkit-mask-image:none;
  }
  .blp__eth-rail{
    animation:none!important;
    transform:none!important;
    width:auto;
    flex-wrap:wrap;
    justify-content:center;
  }
  .blp__eth-set[aria-hidden="true"]{display:none}
  .blp__eth-set{padding-inline-end:0;flex-wrap:wrap;justify-content:center}
}

/* La coche etait CENTREE SUR LA LIGNE (mesure : ecart 0 avec le centre du
   bloc) mais 8 a 16 px sous le centre du TITRE, parce que le sous-titre du
   palier « 2 » passe a deux lignes et allonge la ligne vers le bas. L'oeil,
   lui, aligne la coche sur le titre, pas sur le bloc. On la cale donc en haut,
   sur la premiere ligne de texte — et le prix suit, sinon la ligne se lit de
   travers. */
.blp__tier{align-items:flex-start}
.blp__tick{align-self:flex-start;margin-top:0}
.blp__tier .p{align-self:flex-start;margin-top:1px}

/* --- blp-hero : marqueur "medaillon" des 4 bullets, 26/08 (Tim a tranche
   parmi 4 variantes comparees a l'ecran : cercle en degrade + anneau clair,
   plus stylee/feminine que la pastille pleine, sans sortir du registre
   securite). Comparatif garde dans le repo pour reference : coches.html.

   On neutralise l'ANCIEN marqueur explicitement (content:none) plutot que
   d'editer sa regle d'origine plus haut dans ce fichier (elle reste lisible
   telle quelle, en cas de retour arriere). Les regles ci-dessous, plus bas
   dans la cascade, gagnent a specificite egale. */
.blp__bul li::before{content:none}
.blp__bul li::after{content:none}

/* Nouveau marqueur : il lui faut un 3e element (l'anneau et le degrade
   occupent deja ::before et ::after) -> un <span class="blp__bul-tick">
   ajoute dans blp-hero.liquid, juste avant le texte de chaque bullet.
   Tout est en position:absolute : la hauteur du <li> ne bouge pas d'un
   pixel, et le padding-left reste 30px comme avant (mesure sur 390px,
   voir tasks/facts.md) — seuls les diametres sont un peu resserres
   (22px au lieu des 24px du comparatif) pour tenir dans ce budget. */
.blp__bul li{position:relative}
.blp__bul li::before{
  content:"";position:absolute;left:0;top:4px;width:22px;height:22px;
  border-radius:50%;background:#fff;border:1.5px solid var(--or-soft);
  box-shadow:0 0 0 2px var(--or-soft);
}
.blp__bul li::after{
  content:"";position:absolute;left:5px;top:9px;width:12px;height:12px;
  border-radius:50%;background:linear-gradient(135deg, var(--or-light), var(--or));
}
.blp__bul-tick{
  position:absolute;left:8px;top:11px;width:7px;height:4px;
  border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg);
}


/* ================================================================
   26/08 — UNE SEULE PASTILLE POUR TOUTE LA PAGE (demande de Tim).
   Le disque orange plein a coche blanche du comparatif devient le
   marqueur unique : bullets du hero, paliers de prix, comparatif.
   Un seul objet visuel repete partout vaut mieux que trois variantes
   proches — c'est ce qui fait qu'une page a l'air dessinee et non
   assemblee.
   ================================================================ */

/* --- 1 · COMPARATIF : les pastilles enfin sur le MEME axe ---
   Elles etaient centrees EN GROUPE avec leur valeur ("3 s", "380 g",
   "alarme integree") : plus le texte etait long, plus la pastille
   partait a gauche. On empile la valeur SOUS la pastille, comme deja
   fait en mobile — la pastille tombe alors toujours au centre exact
   de la colonne, quelle que soit la longueur du texte. */
.blp__cmp-cell{flex-direction:column;gap:6px;justify-content:center}
.blp__cmp-val{white-space:normal;text-align:center;line-height:1.25}

/* --- 2 · LES BULLETS DU HERO reprennent la meme pastille ---
   Le medaillon (anneau + degrade) est neutralise : Tim a tranche pour
   le disque plein, plus lisible et deja utilise ailleurs. */
.blp__bul li::before{
  content:"";position:absolute;left:0;top:3px;width:22px;height:22px;
  border-radius:50%;background:var(--or);border:0;box-shadow:none;
}
.blp__bul li::after{content:none}
.blp__bul-tick{
  position:absolute;left:6.5px;top:9px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;border-radius:1px;
  transform:rotate(-45deg);
}

/* --- 3 · LES PALIERS DE PRIX : le carre devient un disque ---
   C'est aussi plus juste semantiquement : ces boutons sont un
   role="radiogroup", et un rond dit "un seul choix" la ou un carre
   dit "plusieurs". Non selectionne, l'anneau reste bien visible :
   c'est lui qui annonce qu'il y a un choix a faire. */
.blp__tick{width:23px;height:23px;border-radius:50%;
  border:2px solid var(--line);background:#fff}
.blp__tier[aria-checked="true"] .blp__tick{background:var(--or);border-color:var(--or)}
.blp__tick::after{left:6.5px;top:5.5px;width:7px;height:11px;
  border-width:0 2.4px 2.4px 0;border-radius:1px}
@media(max-width:640px){
  .blp__tick{width:21px;height:21px}
  .blp__tick::after{left:5.8px;top:4.8px;width:6.2px;height:10px}
}
/* ==========================================================================
   ACCUEIL — sections A1/A2/A3 (blp-acc-hero, blp-acc-raisons, blp-acc-lieux)
   Prefixe reserve : .blp__ac-*
   A APPENDER a la fin de theme/assets/blp.css (ne remplace rien).
   Reutilise les variables --ink/--or/--or-soft/--grey-bg/--line/--dim/--bg
   deja definies sur .blp, et les classes maison .blp__sec/.blp__w/.blp__center/
   .blp__eyebrow/.blp__rate/.blp__stars/.blp__accent/.blp__cta/.blp h1/.blp h2.
   ========================================================================== */

/* ---------- A1 · HERO ---------- */
.blp__ac-hero{
  background:linear-gradient(180deg,var(--or-soft) 0%,var(--bg) 78%);
  padding:36px 0 32px;
}
.blp__ac-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
}
.blp__ac-hero-lede{
  font-size:16px;
  color:var(--body);
  margin:14px 0 22px;
  max-width:46ch;
}
.blp__ac-hero-img{
  border-radius:var(--r,14px);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--grey-bg);
  aspect-ratio:1;
}
.blp__ac-hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media(min-width:760px){
  .blp__ac-hero{padding:56px 0 48px;}
  .blp__ac-hero-grid{grid-template-columns:1.05fr .95fr; gap:40px;}
  .blp__ac-hero-lede{font-size:17px;}
  .blp__ac-hero-img{aspect-ratio:4/3;}
  .blp__ac-hero-cta{max-width:300px;}
}

/* ---------- A2 · RAISONS ---------- */
.blp__ac-raisons-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:28px;
}
.blp__ac-raison{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--grey-bg);
  border:1px solid var(--line);
  border-radius:var(--r,14px);
  padding:16px 18px;
}
.blp__ac-raison-ic{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--or-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  line-height:1;
}
.blp__ac-raison p{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  line-height:1.35;
}
.blp__ac-raison p b{
  color:var(--or);
  font-weight:800;
}

@media(min-width:760px){
  .blp__ac-raisons-list{grid-template-columns:repeat(3,1fr); gap:22px;}
  .blp__ac-raison{flex-direction:column; text-align:center; align-items:center; padding:24px 18px;}
}

/* ---------- A3 · LIEUX (tuiles ludiques) ---------- */
.blp__ac-tuiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:28px;
}
.blp__ac-tuile{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  border-radius:var(--r,14px);
  overflow:hidden;
  text-decoration:none;
  isolation:isolate;
  background:var(--grey-bg);
  border:1px solid var(--line);
}
.blp__ac-tuile-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.blp__ac-tuile-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(16,17,20,0) 40%,rgba(16,17,20,.78) 100%);
  z-index:1;
}
.blp__ac-tuile-label{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.blp__ac-tuile-nom{
  color:#fff;
  font-weight:800;
  font-size:15px;
  letter-spacing:-.01em;
  line-height:1.2;
}
.blp__ac-tuile-fleche{
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--or);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .3s ease, transform .3s ease;
}
.blp__ac-tuile-fleche svg{width:13px; height:13px; display:block;}

/* survol desktop : zoom image + fleche qui apparait */
.blp__ac-tuile:hover .blp__ac-tuile-img,
.blp__ac-tuile:focus-visible .blp__ac-tuile-img{
  transform:scale(1.08);
}
.blp__ac-tuile:hover .blp__ac-tuile-fleche,
.blp__ac-tuile:focus-visible .blp__ac-tuile-fleche{
  opacity:1;
  transform:translateX(0);
}
/* toucher mobile : petit retour tactile au tap */
.blp__ac-tuile:active .blp__ac-tuile-img{
  transform:scale(1.03);
}
.blp__ac-tuile:focus-visible{
  outline:2px solid var(--or);
  outline-offset:3px;
}

/* la 5e tuile rendue prend toute la largeur sur mobile pour eviter l'orpheline */
.blp__ac-tuiles .blp__ac-tuile:nth-child(5){
  grid-column:1 / -1;
  aspect-ratio:16/7;
}

.blp__ac-repli{
  max-width:560px;
  margin:28px auto 0;
  text-align:center;
}
.blp__ac-preuve{
  font-size:13.5px;
  color:var(--dim);
  margin:0 0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.blp__ac-preuve strong{color:var(--ink); font-weight:800;}
.blp__ac-separateur{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  color:var(--dim);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
.blp__ac-separateur::before,
.blp__ac-separateur::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.blp__ac-repli-btn{
  max-width:360px;
  margin:0 auto;
}

@media(min-width:640px){
  .blp__ac-tuiles{grid-template-columns:repeat(3,1fr); gap:14px;}
  .blp__ac-tuiles .blp__ac-tuile:nth-child(5){
    grid-column:auto;
    aspect-ratio:4/5;
  }
  .blp__ac-tuile-nom{font-size:16px;}
  .blp__ac-repli{margin-top:36px;}
}

@media(min-width:980px){
  .blp__ac-tuiles{grid-template-columns:repeat(5,1fr); gap:16px;}
}


/* ================================================================
   26/08 — LA COCHE EST DESSINEE UNE SEULE FOIS, EN POURCENTAGES.
   Elles ne se ressemblaient pas d'un endroit a l'autre parce que
   chacune avait sa geometrie en pixels : 8x4 pour les bullets,
   7x11 pour les paliers, et un caractere « ✓ » de police pour le
   comparatif — trois dessins differents pour un seul symbole.
   Ici la coche est posee en % de sa boite : elle est donc IDENTIQUE
   a 17, 22 ou 23 px, et le restera si on change une taille demain.
   Forme : DISQUE pour les bullets et le comparatif, CARRE pour les
   paliers (demande de Tim — un carre se lit mieux comme une case a
   cocher, et c'est plus simple).
   ================================================================ */

/* --- la geometrie commune --- */
.blp__bul-tick,
.blp__tick::after,
.blp__cmp-dot--ok::after{
  content:"";position:absolute;
  left:30%;top:36%;width:36%;height:19%;
  border-left:2px solid #fff;border-bottom:2px solid #fff;border-radius:1px;
  transform:rotate(-45deg);box-sizing:border-box;
}

/* --- 1 · bullets du hero : disque plein --- */
.blp__bul li::before{
  content:"";position:absolute;left:0;top:3px;width:22px;height:22px;
  border-radius:50%;background:var(--or);border:0;box-shadow:none;
}
.blp__bul li::after{content:none}
.blp__bul-tick{width:36%;height:19%}          /* % de la boite de 22px */
.blp__bul li{position:relative}
.blp__bul-tick{left:6.6px;top:7.9px;width:7.9px;height:4.2px}

/* --- 2 · paliers de prix : CARRE, meme coche --- */
.blp__tick{width:23px;height:23px;border-radius:7px;
  border:2px solid var(--line);background:#fff;position:relative}
.blp__tier[aria-checked="true"] .blp__tick{background:var(--or);border-color:var(--or)}
.blp__tick::after{opacity:0}
.blp__tier[aria-checked="true"] .blp__tick::after{opacity:1;transform:rotate(-45deg) scale(1)}
@media(max-width:640px){
  .blp__tick{width:21px;height:21px;border-radius:6px}
}

/* --- 3 · comparatif : disque plein, meme coche.
   Le « ✓ » vient du balisage : on l'efface avec font-size:0 plutot que
   de toucher au Liquid, et on redessine par-dessus. --- */
.blp__cmp-dot{position:relative}
.blp__cmp-dot--ok{font-size:0}


/* ================================================================
   26/08 (nuit) — LA SECTION PEUR PASSE AU NOIR, avec visuels et CTA.
   Le fond sombre n'est pas decoratif : tout le reste de la page est
   clair, donc c'est le seul endroit ou l'on baisse la lumiere. La
   rupture fait plus de travail que n'importe quel mot.
   ================================================================ */
.blp__pr-noir .blp__center h2{color:#fff;font-size:38px}
@media(max-width:900px){ .blp__pr-noir .blp__center h2{font-size:28px} }
.blp__pr-chapo{color:#9aa0ad;font-size:16px;max-width:620px;margin:14px auto 0;line-height:1.55}

.blp__pr-rail{align-items:stretch;padding-top:34px}
.blp__pr-cut{display:flex;flex-direction:column;padding:0;overflow:hidden;
  transform:rotate(-1.1deg);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.blp__pr-cut:nth-child(even){transform:rotate(1.3deg)}
.blp__pr-cut:hover{transform:rotate(0) translateY(-5px)}

/* le visuel en tete de coupure : desature et assombri, pour qu'il pese
   sans voler la lecture du titre */
.blp__pr-ph{aspect-ratio:16/11;background:#15171c;overflow:hidden;flex:none}
.blp__pr-ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.35) contrast(1.06) brightness(.9)}
.blp__pr-txt{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.blp__pr-cut--n{padding:20px 20px 18px;justify-content:center}

.blp__pr-after{color:#fff;margin-top:30px}
.blp__pr-noir .blp__pr-big{color:var(--ink)}

/* le bouton qui ferme la section : on ne laisse personne dans la peur */
.blp__pr-cta{text-align:center;margin-top:34px}
.blp__pr-cta .blp__cta{display:inline-block;width:auto;min-width:290px}
.blp__pr-sous{color:#8a8f9e;font-size:12.5px;margin-top:11px}

@media(max-width:640px){
  .blp__pr-chapo{font-size:14.5px}
  .blp__pr-ph{aspect-ratio:16/10}
  .blp__pr-txt{padding:13px 15px 15px}
  .blp__pr-cta .blp__cta{width:100%;min-width:0}
}

/* 🚩 26/08 — LE VISUEL DU HERO D'ACCUEIL NE SE ROGNE JAMAIS.
   Le cadre etait en aspect-ratio:4/3 au-dessus de 760px avec object-fit:cover,
   sur une image CARREE : il mangeait le haut et le bas du triptyque. En mobile
   le cadre etait carre, donc le defaut ne se voyait pas — d'ou l'impression
   que c'etait bon.
   Correctif general plutot que ponctuel : le cadre suit desormais l'image,
   quelle que soit sa forme. On ne recoupe plus jamais un visuel que Tim a
   compose lui-meme. */
.blp__ac-hero-img{aspect-ratio:auto}
.blp__ac-hero-img img{height:auto;object-fit:contain}
@media(min-width:760px){ .blp__ac-hero-img{aspect-ratio:auto} }

/* 🚩 26/08 — LES RAISONS PASSENT EN NUMEROTATION EDITORIALE.
   Les emoji faisaient cheap (mot du client) : un pictogramme system-font ne
   suit ni la charte ni le rendu d'un OS a l'autre. Remplaces par 01 02 03,
   en orange, dans la police du site — ca structure la lecture au lieu de la
   decorer, et ca ne peut pas mal s'afficher.
   Les cartes passent du gris plein au blanc avec un filet : plus d'air,
   moins de boite, le texte aligne a gauche se lit mieux qu'un texte centre. */
.blp__ac-raison{background:#fff;border:1px solid var(--line);text-align:left;
  padding:26px 24px 24px;border-radius:var(--r,14px);box-shadow:none}
.blp__ac-raison-ic{background:none;width:auto;height:auto;padding:0;margin:0 0 14px;
  font:800 13px/1 var(--s);letter-spacing:.16em;color:var(--or);
  font-variant-numeric:tabular-nums;display:block}
.blp__ac-raison-ic::after{content:"";display:block;width:26px;height:2px;
  background:var(--or);margin-top:10px;border-radius:2px}
.blp__ac-raison p{margin:0;font-size:15.5px;line-height:1.5}
@media(max-width:640px){
  .blp__ac-raison{padding:20px 18px 18px}
  .blp__ac-raison-ic{margin-bottom:11px}
}

/* 🚩 26/08 — LES BENEFICES DE LA FICHE ADOPTENT LE STYLE DE L'ACCUEIL.
   Meme traitement editorial que « 3 raisons » : numerotation 01 02 03 en
   orange sous un filet, carte blanche a filet plutot que pave gris, texte
   aligne a gauche. Deux sections qui font le meme travail doivent se
   ressembler d'une page a l'autre — sinon le site a l'air assemble. */
.blp__ben{background:#fff;border:1px solid var(--line);text-align:left;
  padding:26px 24px 24px;border-radius:var(--r,14px)}
.blp__ben .ic{font:800 13px/1 var(--s);letter-spacing:.16em;color:var(--or);
  font-variant-numeric:tabular-nums;margin:0 0 14px;display:block}
.blp__ben .ic::after{content:"";display:block;width:26px;height:2px;
  background:var(--or);margin-top:10px;border-radius:2px}
.blp__ben h3{font-size:18.5px;margin-bottom:9px}
.blp__ben p{font-size:15px;line-height:1.55}
@media(max-width:640px){
  .blp__ben{padding:20px 18px 18px}
  .blp__ben .ic{margin-bottom:11px}
}
/* ══════════════════════════════════════════════════════════════════════
   blp__qz — QUIZ INTERACTIF (section blp-acc-quiz.liquid)
   À FUSIONNER dans theme/assets/blp.css (namespace blp__qz-*, réutilise les
   variables déjà définies sur .blp : --or, --or-soft, --ink, --body, --dim,
   --line, --grey-bg, --r). Aucune valeur de charte inventée ici : rayon,
   couleurs et police héritent de .blp.
   ══════════════════════════════════════════════════════════════════════ */

.blp__qz{ position:relative }

.blp__qz-card{
  max-width:640px;margin:0 auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--r,14px);
  box-shadow:0 10px 34px rgba(16,17,20,.07);
  padding:clamp(26px,5.5vw,48px);text-align:center;overflow:hidden
}

.blp__qz-panel{ animation:blpQzFade .38s ease }
@keyframes blpQzFade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* ---------- intro ---------- */
.blp__qz-panel--intro .blp__eyebrow{ margin-bottom:14px }
.blp__qz-start{ margin-top:8px }
.blp__qz-meta{ margin-top:16px;font-size:12.5px;color:var(--dim);letter-spacing:.01em }

/* ---------- barre de progression + navigation ---------- */
.blp__qz-top{ display:flex;align-items:center;gap:14px;margin-bottom:26px;text-align:left }
.blp__qz-back{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s
}
.blp__qz-back:hover{ border-color:var(--or);color:var(--or) }
.blp__qz-back[hidden]{ visibility:hidden;display:flex } /* garde la place dans le flex, cf. quiz-signature.md */

.blp__qz-progress{ flex:1;height:7px;border-radius:100px;background:var(--line);overflow:hidden }
.blp__qz-progress-bar{ display:block;height:100%;width:0%;border-radius:100px;background:var(--or);transition:width .4s ease }
.blp__qz-step{ font-size:12px;font-weight:700;color:var(--dim);letter-spacing:.03em;white-space:nowrap }

/* ---------- question ---------- */
.blp__qz-question{ text-align:left }
.blp__qz-q{
  font-size:clamp(19px,3vw,25px);font-weight:800;letter-spacing:-.02em;
  line-height:1.22;margin:0 0 22px;color:var(--ink)
}
.blp__qz-answers{ display:grid;grid-template-columns:1fr 1fr;gap:12px }
@media (max-width:600px){ .blp__qz-answers{ grid-template-columns:1fr } }

.blp__qz-a{
  display:flex;align-items:center;justify-content:flex-start;gap:12px;
  text-align:left;background:var(--grey-bg);border:1.5px solid var(--line);
  border-radius:calc(var(--r,14px) - 3px);padding:14px 16px;min-height:44px;
  font-family:var(--s);font-size:15px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:border-color .2s,background .2s,transform .18s
}
.blp__qz-a:hover{ border-color:var(--or);transform:translateY(-2px) }
.blp__qz-a.is-sel{ border-color:var(--or);background:var(--or-soft) }

/* ---------- résultat ---------- */
.blp__qz-panel--result{ text-align:left }
.blp__qz-panel--result .blp__eyebrow{ display:inline-block }
.blp__qz-rtitle{
  font-size:clamp(21px,3.4vw,28px);font-weight:900;letter-spacing:-.02em;
  line-height:1.18;margin:14px 0 18px;color:var(--ink)
}
.blp__qz-rbody p{ font-size:15.5px;color:var(--body);line-height:1.68;margin:0 0 14px }
.blp__qz-rbody p.blp__qz-reassurance{ font-size:13px;color:var(--dim);font-weight:600 }

.blp__qz-cta{ margin-top:6px;text-decoration:none }
.blp__qz-cta-main{ display:block;font-size:17px;font-weight:800 }
.blp__qz-cta-sub{ display:block;margin-top:6px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.88) }

.blp__qz-again{
  display:block;margin:18px auto 0;background:none;border:0;color:var(--dim);
  font-size:13px;text-decoration:underline;cursor:pointer;padding:6px;font-family:var(--s)
}

@media (max-width:420px){
  .blp__qz-card{ padding:24px 18px }
}


/* ================================================================
   26/08 — SECTION « NIVEAUX » REFAITE POUR ETRE COMPRISE DU 1er COUP.
   Retour de Tim : « on ne comprend pas, il faut que ce soit
   comprehensible par une ado de 12 ans ». La ligne passe donc de
   3 colonnes muettes a une ligne qui se lit : un pictogramme, le nom
   de l'objet + ce que c'est en clair, la barre, et ce qui suffit a
   l'ouvrir. Le pictogramme est un SVG au trait, jamais un emoji.
   ================================================================ */
.blp__tt-chapo{max-width:620px;margin:14px auto 0;font-size:16px;line-height:1.55;color:var(--body)}
.blp__tt-legende{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);text-align:center;margin:26px 0 4px}

.blp__tt-r{grid-template-columns:44px 1fr 170px 200px;gap:18px;align-items:center}
.blp__tt-ic{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--dim);flex:none}
.blp__tt-ic svg{width:21px;height:21px;display:block}
.blp__tt-r--us .blp__tt-ic{background:#fff;border-color:var(--or);color:var(--or)}
.blp__tt-txt{min-width:0}
.blp__tt-d{font-size:13px;color:var(--dim);line-height:1.4;margin-top:3px}
.blp__tt-v{font-size:13.5px;line-height:1.35;white-space:normal}

@media(max-width:820px){
  /* En mobile on empile : picto + nom sur une ligne, la description dessous,
     puis la barre, puis ce qui suffit a l'ouvrir. Une idee par ligne. */
  .blp__tt-r{grid-template-columns:40px 1fr;grid-template-areas:"ic txt" "bar bar" "v v";
    gap:6px 14px;padding:18px 14px}
  .blp__tt-ic{grid-area:ic}
  .blp__tt-txt{grid-area:txt}
  .blp__tt-bar{grid-area:bar;margin-top:10px}
  .blp__tt-v{grid-area:v;text-align:left;margin-top:2px}
  .blp__tt-chapo{font-size:14.5px}
}

/* Une carte CHIFFRE peut desormais porter un visuel : elle n'est plus un pave
   de texte centre mais une colonne, image en haut, chiffre dessous — comme les
   coupures de presse. Le padding descend sur le bloc texte, sinon l'image ne
   toucherait pas les bords. */
.blp__pr-cut--n{padding:0;display:flex;flex-direction:column;justify-content:flex-start}
.blp__pr-cut--n .blp__pr-src,
.blp__pr-cut--n .blp__pr-big,
.blp__pr-cut--n .blp__pr-x{padding-inline:20px}
.blp__pr-cut--n .blp__pr-src{padding-top:18px}
.blp__pr-cut--n .blp__pr-x{padding-bottom:18px}
.blp__pr-cut--n .blp__pr-ph + .blp__pr-src{padding-top:15px}

/* Quiz — la REVELATION apres chaque reponse (26/08).
   C'est le seul moment ou l'objection tombe : on met donc le texte en avant,
   sur fond orange pale avec un liseret, et on attend un clic sur « Continuer »
   plutot qu'un delai — le temps de lecture n'est pas le meme pour tout le monde. */
.blp__qz-reveal{ text-align:left }
.blp__qz-reveal-txt{
  font-size:clamp(17px,2.6vw,20px);font-weight:700;letter-spacing:-.01em;
  line-height:1.45;color:var(--ink);margin:0 0 22px;
  padding:16px 18px;background:var(--or-soft);border-left:3px solid var(--or);
  border-radius:calc(var(--r,14px) - 6px)
}
.blp__qz-reveal-txt b{ color:var(--or) }
.blp__qz-continue{ width:100%;min-height:44px }

/* 🚩 26/08 — LES VIGNETTES TIENNENT SUR UNE SEULE LIGNE, QUEL QUE SOIT LEUR NOMBRE.
   La galerie est passee de 5 a 11 medias : la grille a 5 colonnes est donc
   tombee sur 3 LIGNES, et le premier ecran mobile est passe de 618 a 744 px
   (mesure), au-dessus du seuil de 640 qui garde le debut du copy visible.
   On repasse en bande defilante — mais chaque vignette fait exactement un
   cinquieme de la largeur, donc les cinq premieres remplissent l'ecran bord a
   bord et les suivantes se decouvrent au doigt. C'est le defaut que j'avais
   introduit ce matin en passant en flex 46px : la largeur etait perdue. Ici
   elle ne l'est pas. */
@media(max-width:640px){
  .blp__thumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:0;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .blp__thumbs::-webkit-scrollbar{display:none}
  .blp__t{flex:0 0 calc((100% - 24px) / 5);scroll-snap-align:start}
}

/* ================================================================
   26/08 — LA COCHE, DEFINITIVEMENT. Bloc de FIN DE FICHIER : il gagne
   sur toutes mes tentatives precedentes, qui se contredisaient.

   Ce que la mesure a montre (getComputedStyle sur la page live) :
   - le palier avait une QUATRIEME bordure, border-right 2.4px, heritee
     d'un ancien `border-width:0 2.4px 2.4px 0` — les deux autres
     pastilles etaient a 0. C'est elle qui transformait la coche en trait.
   - les proportions etaient fausses partout : 7,9 x 4,2 px, soit un bras
     court de 4 px. Une coche dont le bras court fait 4 px se lit comme un
     tiret, pas comme un ✓.

   Ici : on remet les QUATRE bordures a zero avant de n'en redessiner que
   deux, et le bras long fait ~2x le bras court, ce qui est la proportion
   d'une vraie coche. Tout est en % de la boite, donc identique a 19, 21
   ou 22 px.
   ================================================================ */
.blp__bul-tick,
.blp__tick::after,
.blp__cmp-dot--ok::after{
  content:"";position:absolute;box-sizing:border-box;
  left:33%;top:19%;width:33%;height:57%;
  border:0 solid #fff;border-right-width:2px;border-bottom-width:2px;
  border-radius:0;transform:rotate(45deg);transform-origin:center;
}
.blp__tick::after{opacity:0}
.blp__tier[aria-checked="true"] .blp__tick::after{opacity:1}
@media(max-width:640px){
  .blp__bul-tick,
  .blp__tick::after,
  .blp__cmp-dot--ok::after{left:33%;top:19%;width:33%;height:57%;
    border-right-width:2px;border-bottom-width:2px}
}

/* 🚩 LE BULLET EST UN CAS A PART, ET C'EST MESURE, PAS SUPPOSE.
   Sa coche est un vrai <span class="blp__bul-tick"> dans le <li>, alors que
   les deux autres sont des pseudo-elements DANS leur pastille. Un pourcentage
   se calcule sur le bloc conteneur : pour le span c'est le <li> (118 px), pas
   le cercle de 22 px. Resultat mesure : largeur 540 % de la pastille au lieu
   de 33 %, et un rapport de bras de 0,29 au lieu de 1,73.
   On lui donne donc les memes proportions, mais EN PIXELS, calculees sur la
   pastille : 33 % et 57 % de 22 px, decalees du top:3px du cercle. */
.blp__bul-tick{
  left:7.3px;top:7.2px;width:7.3px;height:12.5px;
  border:0 solid #fff;border-right-width:2px;border-bottom-width:2px;
  border-radius:0;transform:rotate(45deg);
}

/* 🚩 ET LE DERNIER ECART, MESURE LUI AUSSI. Un pourcentage sur un enfant
   absolu se calcule sur la boite INTERIEURE du parent : le palier ayant une
   bordure de 2 px, sa reference etait 21 - 4 = 17 px, d'ou une coche a 27,9 %
   la ou les deux autres etaient a 33 %. Coche, la bordure est de la meme
   couleur que le fond : elle ne sert plus a rien, on la retire. La boite
   interieure redevient pleine et les trois coches se superposent enfin. */
.blp__tier[aria-checked="true"] .blp__tick{border-width:0}

/* 🚩 LE VRAI COUPABLE, TROUVE A L'OEIL APRES UN ZOOM x3.
   Les mesures disaient 57 % / 33 % partout — et pourtant le palier affichait
   un chevron « › » et non un « ✓ ». Cause : une regle PLUS SPECIFIQUE ecrite
   plus tot, `.blp__tier[aria-checked="true"] .blp__tick::after`, imposait
   `rotate(-45deg)`. Avec des bordures droite + basse, -45° retourne la coche
   et la transforme en chevron. Les bullets n'avaient pas cette regle, d'ou
   deux dessins differents pour une geometrie identique.
   👉 Lecon : une geometrie identique ne garantit pas un rendu identique. Il
   faut aussi comparer les TRANSFORMS, et regarder l'ecran. */
.blp__tier[aria-checked="true"] .blp__tick::after{transform:rotate(45deg)}

/* 🚩 26/08 — SECTION PEUR : CENTRAGE ET LISIBILITE DE LA SOURCE.
   1. Sur grand ecran les 3 cartes tenaient a gauche avec un vide a droite :
      le rail est un flex defilant, donc il ne centrait rien. `safe center`
      centre quand ca rentre et retombe sur un alignement a gauche quand ca
      deborde — sans jamais couper la premiere carte, ce que ferait un
      `center` nu.
   2. La ligne de source etait sur UNE ligne avec `space-between` : sur une
      carte de 258 px, « INTERSTATS · MINISTERE DE L'INTERIEUR » et
      « JUILLET 2026 » se chevauchaient. Elle passe a la ligne proprement,
      avec moins d'interlettrage et une vraie hauteur de ligne. */
.blp__pr-src{flex-wrap:wrap;row-gap:3px;column-gap:10px;
  letter-spacing:.07em;line-height:1.35;align-items:baseline}
.blp__pr-src span:last-child{color:var(--dim);white-space:nowrap}
.blp__pr-cut--n .blp__pr-src span:last-child{color:var(--dim)}
@media(min-width:900px){
  .blp__pr-rail{justify-content:safe center}
}

/* En lecture automatique, le bouton play n'a plus de sens : la video tourne
   deja. On le masque, sinon il recouvre l'image en permanence. */
.blp__um-card--video video[autoplay] + .blp__um-play{display:none}

/* faq-etapes.css — les 3 etapes illustrees ("Le geste") rapatriees a l'interieur
   d'une reponse de la FAQ blp-faq.liquid, quand section.settings.etapes_sur pointe
   dessus. Classes toutes prefixees blp__fqe pour ne toucher ni .blp__fq-* (FAQ)
   ni .blp__step* (ancienne section blp-etapes, bientot retiree).

   A COLLER DANS theme/assets/blp.css (pas fait ici, cf. consigne : un seul
   fichier .liquid touche a la fois). Variables --or/--ink/--dim/--line/--grey-bg
   deja definies sur .blp (voir blp.css ligne 6) — aucune redefinie ici.

   Contrainte de mise en page : sur desktop cette FAQ vit dans la colonne de
   droite de la fiche produit, large d'environ 335px seulement (pas en pleine
   page comme l'ancienne section). Donc AUCUNE grille a 3 colonnes ici : les
   3 etapes sont toujours empilees une par ligne, schema a gauche + texte a
   droite, a la fois a 335px (desktop, colonne etroite) et a 380px (mobile). */

.blp__fqe{
  display:flex;flex-direction:column;gap:16px;
  margin-top:14px;padding-top:16px;border-top:1px solid var(--line);
}

.blp__fqe-step{
  display:flex;align-items:flex-start;gap:12px;min-width:0;max-width:100%;
}

.blp__fqe-img{
  flex:0 0 auto;width:64px;aspect-ratio:1/1;border-radius:8px;overflow:hidden;
  background:var(--grey-bg);
}
.blp__fqe-img img{width:100%;height:100%;object-fit:contain;display:block}

.blp__fqe-body{
  flex:1 1 auto;min-width:0;max-width:100%;
}

.blp__fqe-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--or);color:#fff;
  font-size:11px;font-weight:700;line-height:1;margin-bottom:4px;
}

.blp__fqe-titre{
  margin:0 0 2px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;
  overflow-wrap:break-word;
}

.blp__fqe-texte{
  margin:0;font-size:13px;line-height:1.5;color:var(--dim);overflow-wrap:break-word;
}

/* 🚩 26/08 — LA FAQ ETAIT PLAFONNEE A 840 px, D'OU LE VIDE A DROITE.
   `blp-faq.liquid` rend son contenu dans `.blp__w.blp__narrow`, et
   `.blp__narrow` limite a 840 px centres. La colonne d'achat, elle, vit dans
   le `.blp__w` pleine largeur (1180). Les deux ne finissaient donc pas au
   meme endroit des que l'ecran depassait ~1300 px : la FAQ s'arretait avant.
   On leve le plafond pour cette section uniquement, en grand ecran. */

}
/* La galerie du hero devient collante : tant qu'on est DANS le hero, elle
   suit le regard au lieu de disparaitre vers le haut. C'est le seul endroit
   ou une position collante a du sens sans refonte. */
@media(min-width:900px){
  .blp__gal{position:sticky;top:24px;align-self:start}
}

/* La galerie du hero suit le regard tant qu'on est dans le hero, au lieu de
   disparaitre vers le haut. Emportee par erreur lors du retrait du bloc
   Lamier, remise ici. */
@media(min-width:900px){
  .blp__gal{position:sticky;top:24px;align-self:start}
}


/* ================================================================
   26/08 (22h) — LES FLECHES DE LA GALERIE.
   Retour de Tim, capture a l'appui : « on ne comprend pas qu'on peut
   slider ». Les pastilles se lisent apres coup, pas avant.
   🚩 Pourquoi PAS l'autre solution (laisser depasser l'image suivante) :
   sous 640 px les visuels sont en `object-fit:contain` dans une boite 5/4.
   Ce qui depasserait serait donc la BANDE GRISE de la diapo voisine, pas
   son image — un affordance qui ne montre rien. Les fleches se posent au
   contraire SUR ces bandes grises, sans recouvrir le produit, et elles
   servent aussi la souris sur ordinateur, ou l'on ne glisse pas.
   Aucune hauteur ajoutee : elles sont en `position:absolute`, le premier
   ecran mobile ne bouge pas d'un pixel.
   ================================================================ */
.blp__grail{position:relative}
.blp__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;padding:0;border-radius:50%;
  border:1px solid rgba(17,17,17,.10);background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(0,0,0,.14);cursor:pointer;
  display:grid;place-items:center;transition:opacity .18s ease,transform .18s ease}
.blp__nav::after{content:"";width:9px;height:9px;box-sizing:border-box;
  border:0 solid #111;border-top-width:2px;border-right-width:2px}
.blp__nav--p{left:10px}
.blp__nav--p::after{transform:rotate(-135deg);margin-left:3px}
.blp__nav--n{right:10px}
.blp__nav--n::after{transform:rotate(45deg);margin-right:3px}
.blp__nav:hover{transform:translateY(-50%) scale(1.06)}
.blp__nav[disabled]{opacity:0;pointer-events:none}
@media(max-width:640px){
  /* un peu plus petites et plus pres du bord : la bande grise fait ~39px */
  .blp__nav{width:32px;height:32px;left:auto;right:auto}
  .blp__nav--p{left:6px}
  .blp__nav--n{right:6px}
}


/* ================================================================
   26/08 (22h20) — LA SECTION PEUR DEVIENT UN VRAI CARROUSEL.
   Demande de Tim : « le public sera des femmes de 50+, je veux qu'elles
   arrivent a lire simplement ». Deux cartes de 224 px par ecran, penchees,
   c'etait un mur de presse joli et illisible : le titre tombait sur cinq
   lignes et le texte courant faisait 13 px.
   Ce qu'on change, et uniquement en mobile :
   - UNE carte par ecran (88 %), calee au centre par scroll-snap ;
   - plus aucune inclinaison — un texte penche se lit plus lentement ;
   - le titre passe a 21 px et le texte courant a 15,5 px ;
   - deux fleches, exactement celles de la galerie du hero, parce que
     Tim vient de constater que le glissement ne se devine pas.
   Sur ordinateur, le mur de coupures reste tel quel : la lecture y est
   deja confortable et l'effet « table de journaux » sert la credibilite.
   ================================================================ */
.blp__prwrap{position:relative}
.blp__prwrap .blp__nav{top:calc(50% - 10px)}
@media(min-width:641px){ .blp__prwrap .blp__nav{display:none} }

@media(max-width:640px){
  .blp__pr-rail{scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:12px;
    margin:0 -20px;padding:14px 20px 22px}
  .blp__pr-cut{flex:0 0 88%;scroll-snap-align:center;transform:none}
  .blp__pr-cut:nth-child(even){transform:none}
  .blp__pr-t{font-size:21px;line-height:1.25}
  .blp__pr-x{font-size:15.5px;line-height:1.6}
  .blp__pr-src{font-size:11px}
  .blp__pr-big{font-size:44px}
  .blp__pr-txt{padding:15px 18px 18px}
  /* les fleches se posent sur le fond noir, pas sur la carte */
  .blp__prwrap .blp__nav--p{left:2px}
  .blp__prwrap .blp__nav--n{right:2px}
}


/* ================================================================
   26/08 (22h40) — LE MUR DE PRESSE DEVIENT UN CARROUSEL ELEGANT
   SUR ORDINATEUR AUSSI. Retour de Tim, capture a l'appui.
   Ce qui n'allait pas, et c'est visible sur la capture : les coupures
   etaient INCLINEES en alternance (-1,1° / +1,3°). L'effet « papiers
   poses sur une table » marche sur deux cartes, pas sur trois collees :
   les bords partent dans trois directions, les bas de cartes ne
   s'alignent plus, et le titre de la premiere coupure tombe sur quatre
   lignes dans une colonne de 258 px.
   Ce qu'on fait : on redresse tout, on elargit, on aligne, et on assume
   le carrousel — trois cartes cadrees, un ecart regulier, deux fleches.
   L'inclinaison ne survit que sur le SURVOL, en tres leger, pour garder
   la matiere « coupure de journal » sans sacrifier la lecture.
   ================================================================ */
@media(min-width:641px){
  .blp__pr-rail{
    /* le rail se centre tant que les cartes tiennent, et devient
       defilant des qu'il y en a trop — sans jamais rogner la premiere */
    width:fit-content;max-width:100%;margin-inline:auto;
    gap:24px;padding:34px 6px 26px;
    scroll-snap-type:x mandatory;scroll-behavior:smooth}
  .blp__pr-cut{
    flex:0 0 340px;border-radius:12px;
    transform:none;
    box-shadow:0 18px 40px rgba(0,0,0,.42);
    transition:transform .22s ease, box-shadow .22s ease}
  .blp__pr-cut:nth-child(even){transform:none}
  .blp__pr-cut:hover{transform:translateY(-6px) rotate(-.5deg);
    box-shadow:0 26px 54px rgba(0,0,0,.5)}
  .blp__pr-ph{aspect-ratio:16/10}
  .blp__pr-txt{padding:18px 22px 22px}
  .blp__pr-t{font-size:20px;line-height:1.3}
  .blp__pr-x{font-size:14px;line-height:1.6}
  .blp__pr-big{font-size:40px}
  .blp__pr-cut--n{padding:0}
  .blp__pr-cut--n .blp__pr-src,
  .blp__pr-cut--n .blp__pr-big,
  .blp__pr-cut--n .blp__pr-x{padding-inline:22px}

  /* les fleches reviennent sur ordinateur : elles se desactivent seules
     quand tout tient a l'ecran, donc elles n'apparaissent que si elles
     servent vraiment a quelque chose. */
  .blp__prwrap .blp__nav{display:grid;width:44px;height:44px}
  .blp__prwrap .blp__nav::after{width:11px;height:11px;border-width:0;
    border-top-width:2px;border-right-width:2px}
  .blp__prwrap .blp__nav--p{left:-6px}
  .blp__prwrap .blp__nav--n{right:-6px}
}
@media(min-width:641px){
  /* Les cartes CHIFFRE portent deux lignes de texte la ou la coupure en porte
     six : a hauteur egale, il restait un grand vide blanc en bas. Les marges
     automatiques sur le premier et le dernier element du groupe absorbent le
     vide a parts egales — le chiffre se centre dans l'espace restant sous
     l'image, sans toucher au balisage. */
  .blp__pr-cut--n .blp__pr-src{margin-top:auto}
  .blp__pr-cut--n .blp__pr-x{margin-bottom:auto}
}


/* ================================================================
   26/08 (minuit) — LA VIGNETTE DU LOT DANS CHAQUE PALIER.
   Modele donne par Tim : Cloudpillo. Leur ligne « 2 oreillers » montre
   DEUX oreillers — on ne lit pas la quantite, on la voit. Sa consigne
   exacte : « il faut qu'un enfant de 8 ans comprenne ».
   Les images sont detourees sur fond transparent, donc elles se posent
   aussi bien sur le blanc d'un palier inactif que sur l'orange pale du
   palier selectionne, sans rectangle disgracieux.
   `flex:none` + hauteur fixe : la vignette ne pousse jamais le prix
   hors de la ligne, meme sur un petit ecran.
   ================================================================ */
.blp__tvign{flex:none;height:54px;width:auto;max-width:96px;object-fit:contain;
  display:block;margin-right:-2px}
.blp__tier[aria-checked="true"] .blp__tvign{filter:drop-shadow(0 2px 5px rgba(17,17,17,.16))}
@media(max-width:640px){
  .blp__tvign{height:50px;max-width:88px}
  .blp__tier{gap:9px;padding:12px 13px}
}
@media(max-width:360px){
  /* tres petits telephones : la vignette cede la place au prix, jamais l'inverse */
  .blp__tvign{display:none}
}


/* ================================================================
   27/08 — SECTION « SITUATIONS » (blp-situations).
   Choisie par Tim parmi trois maquettes. DA imposee : BLANC ET ORANGE,
   pas de fond noir. Le noir ne sert qu'au texte.
   Lecture 50+ : 16 px minimum sur les cases, cibles tactiles de 56 px
   de haut, et un ecart franc entre chaque ligne — on doit pouvoir
   cocher au pouce sans viser.
   ================================================================ */
.blp__st-sec{padding-block:clamp(38px,6vw,64px)}
.blp__st-w{max-width:720px}
.blp__st-titre{font-size:clamp(24px,4.4vw,34px);line-height:1.15;letter-spacing:-.025em;
  margin:0 0 8px;text-align:center}
.blp__st-sous{font-size:15px;line-height:1.5;color:var(--dim);text-align:center;margin:0 auto 26px;max-width:520px}

.blp__st-liste{display:grid;gap:10px}
.blp__st-case{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  min-height:56px;padding:13px 16px;background:#fff;cursor:pointer;font:inherit;
  border:1.5px solid var(--line);border-radius:12px;transition:border-color .15s ease,background .15s ease}
.blp__st-case:hover{border-color:#c9ccd4}
.blp__st-case[aria-pressed="true"]{border-color:var(--or);border-width:2px;background:var(--or-soft);padding:12.5px 15.5px}
.blp__st-box{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid #d3d6dd;
  position:relative;background:#fff;transition:background .15s ease,border-color .15s ease}
.blp__st-case[aria-pressed="true"] .blp__st-box{background:var(--or);border-color:var(--or)}
.blp__st-case[aria-pressed="true"] .blp__st-box::after{content:"";position:absolute;box-sizing:border-box;
  left:33%;top:15%;width:33%;height:57%;border:0 solid #fff;
  border-right-width:2.2px;border-bottom-width:2.2px;transform:rotate(45deg)}
.blp__st-txt{font-size:16px;line-height:1.35;color:var(--ink)}

/* le verdict : fond orange pale, jamais un pave noir */
.blp__st-verdict{margin-top:18px;padding:16px 18px;border-radius:12px;
  background:var(--or-soft);border-left:3px solid var(--or);
  font-size:16px;line-height:1.5;color:var(--ink)}
.blp__st-verdict b{color:var(--or)}

.blp__st-cta{margin-top:22px;text-align:center}
.blp__st-cta .blp__cta{display:inline-block;width:auto;min-width:320px;text-decoration:none}
.blp__st-rass{font-size:12.5px;color:var(--dim);margin-top:10px}

@media(max-width:640px){
  .blp__st-txt{font-size:15.5px}
  .blp__st-case{padding:12px 14px}
  .blp__st-cta .blp__cta{width:100%;min-width:0}
}


/* ================================================================
   27/08 — LE BOUTON DE COMMANDE DU PANIER, A LA TAILLE DE SON ENJEU.
   Retour de Tim : « Continuer ma commande doit etre en gros et lisible
   comme le bouton Ajouter au panier, il est tres important ».
   C'est le dernier clic avant la caisse : il ne peut pas etre plus
   discret que celui qui l'a precede. On l'aligne sur `.blp__cta`
   (17 px, 800, 56 px de haut) sans toucher au fichier du theme —
   un `!important` cible ici vaut mieux qu'une modification de
   `cart-summary.liquid`, qu'une mise a jour du theme ecraserait.
   ================================================================ */
.cart__checkout-button,
.cart-drawer .cart__checkout-button{
  min-height:56px!important;
  font-size:17px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  border-radius:12px!important;
  padding:16px 20px!important;
}
@media(max-width:640px){
  .cart__checkout-button,
  .cart-drawer .cart__checkout-button{ font-size:16.5px!important; min-height:54px!important }
}

/* --- 29/08 : zone des BLOCS DE THEME sous le bouton d'ajout (carrousel d'avis).
   Le rail du slider FullStack a une largeur intrinseque superieure a la colonne.
   Dans une grille CSS, une colonne a min-width:auto s'ELARGIT pour contenir son
   plus large enfant : la colonne d'achat passait de 404 a 687 px et le bouton
   sortait de l'ecran. Les deux regles sont necessaires, pas une seule. */
.blp__hgrid > *{min-width:0}
.blp__blocs{min-width:0;max-width:100%;overflow:hidden}
/* Les etoiles du bloc « review » de FullStack utilisent --color-stars-icons (reglage
   GLOBAL du theme). On ne touche pas au reglage global : on repeint uniquement
   celles du carrousel pose sous le bouton, a l'orange de la marque. */
.blp__blocs .rating-star{color:#FF6A1F}
.blp__blocs .review__author-name{font-size:15px}
/* La carte d'avis AVEC PHOTO (mise en page 4 du theme) est en flex-direction:row et
   son image est en width:100% + aspect-ratio 1/1 : elle montait a 287 px alors que les
   cartes a vignette font 188-208. Le carrousel prend la hauteur de la plus grande, donc
   toutes les autres affichaient 80 a 100 px de vide. On borne l'image. */
.blp__blocs .review--4 .review__image{width:140px;flex:none}
@media(max-width:400px){.blp__blocs .review--4 .review__image{width:120px}}

/* --- 29/08 : LE VIDE A GAUCHE SUR ORDINATEUR ---------------------------------
   La galerie est deja en `position:sticky; top:24px`, mais elle ne s'accrochait
   PAS : mesure faite, elle suivait le scroll au pixel pres (top 139 -> -661 apres
   800 px de defilement). Cause : `body` ET la `section.shopify-section` ont
   `overflow-x:hidden`. Un ancetre dont l'overflow n'est pas `visible` devient le
   conteneur de defilement du sticky — et comme ce conteneur defile avec la page,
   le sticky ne sert plus a rien.
   On ne peut pas simplement remettre `visible` : c'est ce hidden qui empeche la
   barre de defilement horizontale. `overflow-x:clip` clippe SANS creer de
   conteneur de defilement — c'est exactement ce qu'il faut ici.
   Applique au-dessus de 900 px SEULEMENT : en mobile il n'y a qu'une colonne,
   donc pas de vide, et on ne touche pas au rendu des vieux Safari. */
@media(min-width:901px){
  body{overflow-x:clip}
  section[id$="__hero"]{overflow-x:clip;overflow-y:visible}
}


/* ============================================================
   blp-ask — rappel d'achat en fin de section (31/08/2026)
   Fond volontairement transparent : le bloc est pose apres le
   conteneur de chaque section, il doit prendre la couleur de la
   page quelle qu'elle soit (bandes claires ET bandes sombres).
   ============================================================ */
.blp-ask{padding:32px 20px 52px}
.blp-ask__w{max-width:460px;margin:0 auto;text-align:center}
.blp-ask__f{margin:0}
.blp-ask__btn{display:block;width:100%;border:0;border-radius:12px;
  background:#FF6A1F;color:#fff;font-family:inherit;font-size:1.0625rem;
  font-weight:700;letter-spacing:.01em;line-height:1.2;padding:1.05rem 1.25rem;
  cursor:pointer;transition:filter .12s ease,transform .12s ease}
.blp-ask__btn:hover{filter:brightness(1.07)}
.blp-ask__btn:active{transform:translateY(1px)}
.blp-ask__btn[disabled]{background:#9a9a9a;cursor:not-allowed}
.blp-ask__note{margin:10px 0 0;font-size:.8125rem;opacity:.65}
@media (max-width:700px){.blp-ask{padding-bottom:40px}}


/* ===== BLP-HERO-LISIBILITE — 02/09/2026 =====
   `.blp__punch` portait le margin-bottom:22px qui separait le titre des puces.
   Le paragraphe ayant ete vide, cet espace avait disparu et les puces
   collaient au h1. On le rend, et on aere les puces entre elles pour que
   chaque benefice se lise comme un bloc et non comme une ligne de liste. */
.blp__bul{margin-top:28px}
.blp__bul li{padding-bottom:22px;line-height:1.55}
.blp__bul li:last-child{padding-bottom:0}

.blp__gar u{font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}