/* Mise en page : mobile d'abord, une colonne ; à partir de 760px, grilles à 3 colonnes. Charte Bobiclou Vincennes v1 (thème clair assumé, couleurs fixées explicitement). */
:root{
  --fond:#ffffff;
  --beton:#edeef0;
  --texte:#161616;
  --doux:#5a5d66;
  --azur:#3567ae;
  --azur-fonce:#2a538b;
  --soleil:#f39a1a;
  --orange:#eb5d1d;
  --ciel:#58c3ef;
  --ligne:#d9dbe0;
  --f:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --max:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--texte);font-family:var(--f);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media (min-width:760px){body{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.t-xl{font-weight:800;text-transform:uppercase;font-size:clamp(2.1rem,8.5vw,3.75rem);line-height:1;letter-spacing:-.01em}
.t-l{font-weight:800;text-transform:uppercase;font-size:clamp(1.55rem,5.5vw,2.5rem);line-height:1.05}
.t-m{font-weight:700;font-size:1.2rem;line-height:1.2}
.sig{font-weight:300;text-transform:uppercase;letter-spacing:.18em;font-size:.8rem}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:4px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--azur);transition:background .15s,color .15s}
.btn-p{background:var(--azur);color:#fff}
.btn-p:hover{background:var(--azur-fonce);border-color:var(--azur-fonce)}
.btn-s{background:transparent;color:var(--azur)}
.btn-s:hover{background:var(--azur);color:#fff}
.btn-blanc{border-color:#fff;color:#fff;background:transparent}
.btn-blanc:hover{background:#fff;color:var(--texte)}
:focus-visible{outline:3px solid var(--soleil);outline-offset:2px}
.photo{background:var(--beton) repeating-linear-gradient(135deg,transparent 0 14px,rgba(22,22,22,.035) 14px 28px);color:var(--doux);display:flex;align-items:flex-end;padding:12px;font-size:.78rem;font-weight:500;letter-spacing:.04em}
.photo span{background:rgba(255,255,255,.85);padding:4px 8px}

/* En-tête */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--fond)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--fond);border-bottom:1px solid var(--ligne)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.logo img{height:34px;width:auto}
.nav-d{display:none}
.top-cta{display:none}
.burger{width:48px;height:48px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;margin-right:-10px}
.burger i{display:block;width:24px;height:2px;background:var(--texte);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--texte)}
.burger i::before{top:-7px}.burger i::after{top:7px}
.menu{position:fixed;left:0;right:0;top:calc(65px + env(safe-area-inset-top,0px));bottom:0;z-index:45;background:var(--fond);border-top:1px solid var(--ligne);overflow-y:auto;overscroll-behavior:contain}
.menu .wrap{max-width:none;margin:0;padding-block:4px 120px}
body.menu-ouvert{overflow:hidden}
.menu details{border-bottom:1px solid var(--ligne)}
.menu summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:56px;font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.01em}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"+";font-weight:400;font-size:1.5rem;color:var(--azur)}
.menu details[open] summary::after{content:"–"}
.menu ul{list-style:none;margin:0;padding:0 0 14px 2px;border-left:3px solid var(--azur);padding-left:14px;margin-bottom:14px}
.menu li a{display:block;padding:11px 0;text-decoration:none;font-weight:600;color:var(--texte)}
.menu li a:hover{color:var(--azur)}
.menu .ext::after{content:" ↗"}
@media (min-width:1000px){
  .burger,.menu{display:none!important}
  .nav-d{display:flex;gap:28px;list-style:none;margin:0;padding:0}
  .nav-d>li{position:relative}
  .nav-d>li>a{font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.03em;text-decoration:none;padding:22px 0;display:block}
  .nav-d ul{display:none;position:absolute;top:100%;left:-16px;background:var(--fond);border:1px solid var(--ligne);list-style:none;margin:0;padding:8px 0;min-width:240px}
  .nav-d>li:hover ul,.nav-d>li:focus-within ul{display:block}
  .nav-d ul a{display:block;padding:9px 16px;text-decoration:none;font-weight:500;font-size:.92rem}
  .nav-d ul a:hover{background:var(--beton);color:var(--azur)}
  .top-cta{display:flex}
}

/* Barre d'action mobile (au pouce) */
.thumb{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--fond);border-top:1px solid var(--ligne);padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter-l);display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
@media (min-width:760px){.thumb{display:none}}

/* 1. Accroche */
.hero{position:relative}
.hero .photo{aspect-ratio:4/5;max-height:72vh;width:100%}
.hero-txt{padding-block:28px 32px;display:grid;gap:14px}
.hero-txt p.sub{font-size:1.1rem;color:var(--doux);max-width:34ch}
.cta-row{display:grid;gap:10px;margin-top:6px}
.stars{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;margin-top:4px}
.stars b{color:var(--soleil);letter-spacing:2px;font-size:1rem}
@media (min-width:760px){
  .hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;max-width:var(--max);margin:0 auto;gap:48px;padding:40px var(--gutter-r) 40px var(--gutter-l)}
  .hero .photo{aspect-ratio:4/5;max-height:none;order:2}
  .hero-txt{padding:0}
  .cta-row{grid-template-columns:auto auto;justify-content:start}
}

section{padding-block:48px}
.sec-head{display:grid;gap:8px;margin-bottom:24px}

/* 2. Portes */
.portes{display:grid;gap:14px}
.porte{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center;text-decoration:none;border-bottom:1px solid var(--ligne);padding-bottom:14px}
.porte .photo{aspect-ratio:1;width:112px;padding:6px;font-size:.62rem}
.porte h3{font-weight:800;text-transform:uppercase;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.porte h3::after{content:"→";color:var(--azur);transition:transform .15s}
.porte:hover h3::after{transform:translateX(4px)}
.porte p{color:var(--doux);font-size:.95rem;margin-top:4px}
@media (min-width:760px){
  .portes{grid-template-columns:repeat(3,1fr);gap:24px}
  .porte{grid-template-columns:1fr;border:0;padding:0}
  .porte .photo{width:100%;aspect-ratio:4/3;font-size:.78rem;padding:12px}
}

/* 3. Aides */
.aides{background:var(--ciel)}
.aides .wrap{display:grid;gap:18px;padding-block:44px}
.pastille{justify-self:start;background:var(--orange);color:#fff;font-weight:800;font-size:clamp(1.9rem,8vw,2.6rem);line-height:1;padding:14px 18px 12px;text-transform:uppercase}
.pastille small{display:block;font-size:.8rem;letter-spacing:.12em;font-weight:600;margin-bottom:4px}
.aides p{max-width:52ch;font-size:1.02rem}
.aides .chiffres{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px}
.aides .chiffres div{background:#fff;padding:12px 14px}
.aides .chiffres strong{display:block;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.aides .chiffres span{font-size:.85rem;color:var(--doux)}
.aides .btn{border-color:var(--texte);color:var(--texte);justify-self:start}
.aides .btn:hover{background:var(--texte);color:#fff}
@media (min-width:760px){.aides .wrap{grid-template-columns:auto 1fr;column-gap:48px;align-items:start}.aides .wrap>*:not(.pastille){grid-column:2}.pastille{grid-row:1/span 4}}

/* 4. En ce moment */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:calc(-1 * var(--gutter-r))}
.rail::-webkit-scrollbar{height:4px}.rail::-webkit-scrollbar-thumb{background:var(--ligne)}
.carte{scroll-snap-align:start;display:grid;gap:8px;text-decoration:none}
.carte .photo{aspect-ratio:4/3}
.tag{justify-self:start;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;background:var(--texte);color:#fff}
.tag.bp{background:var(--soleil);color:var(--texte)}
.tag.essai{background:var(--azur)}
.carte h3{font-size:1.05rem;font-weight:700}
.carte .meta{font-size:.85rem;color:var(--doux)}
.prix{font-weight:800;color:var(--orange);font-size:1.25rem;font-variant-numeric:tabular-nums}
.prix s{color:var(--doux);font-weight:500;font-size:.9rem;margin-left:6px}
.note{font-size:.85rem;color:var(--doux);margin-top:14px}
.demo{display:inline-block;font-size:.7rem;font-weight:600;color:var(--doux);border:1px dashed var(--doux);padding:2px 6px;margin-left:6px;vertical-align:middle}
.sec-foot{margin-top:22px}
@media (min-width:760px){.rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin-right:0}.sec-foot .btn{display:inline-flex}}

/* 5. Avis */
.avis-sec{background:var(--beton)}
.avis{display:grid;gap:14px}
.avis figure{margin:0;background:var(--fond);padding:22px 20px;display:grid;gap:14px;align-content:start}
.avis blockquote{margin:0;font-size:1rem;line-height:1.55}
.avis blockquote::before{content:"★★★★★";display:block;color:var(--soleil);letter-spacing:2px;margin-bottom:10px}
.avis figcaption{font-weight:700;font-size:.9rem}
.avis figcaption span{display:block;font-weight:500;color:var(--doux);font-size:.8rem}
@media (min-width:760px){.avis{grid-template-columns:repeat(3,1fr)}.sec-foot.c{text-align:left}}

/* 6. Nous trouver */
.infos{display:grid;gap:24px}
.infos dl{margin:0;display:grid;gap:16px}
.infos dt{font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;color:var(--doux)}
.infos dd{margin:4px 0 0;font-size:1.05rem}
.horaires{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;font-variant-numeric:tabular-nums}
.horaires .ferme{color:var(--doux)}
.carte-plan{aspect-ratio:4/3;width:100%}
.infos .cta-row{grid-template-columns:1fr 1fr}
.seo{font-size:.82rem;color:var(--doux);max-width:70ch;margin-top:28px}
@media (min-width:760px){.infos{grid-template-columns:1fr 1.2fr;align-items:start;gap:48px}.infos .cta-row{justify-content:start;grid-template-columns:auto auto}}

/* Pied de page */
.bandeau{display:grid;grid-template-rows:repeat(4,8px)}
.bandeau i:nth-child(1){background:var(--soleil)}.bandeau i:nth-child(2){background:var(--orange)}.bandeau i:nth-child(3){background:var(--azur)}.bandeau i:nth-child(4){background:var(--ciel)}
footer{background:#161616;color:#f2f2ef}
footer .wrap{padding-block:40px;display:grid;gap:28px}
footer img{height:38px;width:auto}
footer .cols{display:grid;gap:24px}
footer h4{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:#a9acb4;font-weight:700}
footer a{text-decoration:none;color:#f2f2ef}
footer a:hover{color:var(--ciel)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer .legal{font-size:.78rem;color:#a9acb4;display:flex;flex-wrap:wrap;gap:8px 18px;border-top:1px solid #2c2d31;padding-top:18px}
@media (min-width:760px){footer .cols{grid-template-columns:repeat(3,1fr)}}

.maquette{background:var(--texte);color:#fff;font-size:.78rem;text-align:center;padding:8px var(--gutter-r) 8px var(--gutter-l)}

/* ===== Pages intérieures ===== */
.fil{font-size:.8rem;color:var(--doux);padding-top:18px}
.fil a{text-decoration:none}.fil a:hover{color:var(--azur)}
.p-hero{padding-block:20px 36px;display:grid;gap:14px}
.p-hero .chapo{font-size:1.08rem;color:var(--doux);max-width:58ch}
.p-hero .cta-row{grid-template-columns:1fr}
@media (min-width:760px){.p-hero .cta-row{grid-template-columns:auto auto;justify-content:start}}
.atouts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
.atouts div{background:var(--fond);padding:14px}
.atouts strong{display:block;font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.02em}
.atouts span{font-size:.85rem;color:var(--doux)}
@media (min-width:760px){.atouts{grid-template-columns:repeat(4,1fr)}}
.forfaits{display:grid;gap:12px}
.forfait{border:1px solid var(--ligne);padding:18px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.forfait h3{font-size:1.02rem;font-weight:700}
.forfait .px{font-weight:800;font-size:1.35rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.forfait p{grid-column:1/-1;font-size:.9rem;color:var(--doux)}
.forfait.cle{border:2px solid var(--azur)}
.forfait.cle .badge{grid-column:1/-1;justify-self:start;background:var(--azur);color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;margin-bottom:4px}
@media (min-width:760px){.forfaits{grid-template-columns:repeat(3,1fr)}}
.mention{font-size:.82rem;color:var(--doux);margin-top:12px}
.tarifs{width:100%;border-collapse:collapse;font-size:.95rem}
.tarifs td{padding:12px 0;border-bottom:1px solid var(--ligne);vertical-align:top}
.tarifs td:last-child{text-align:right;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:12px}
.tarifs-wrap{max-width:640px}
.bloc-beton{background:var(--beton)}
.duo{display:grid;gap:14px}
.duo>div{background:var(--fond);padding:22px 20px;display:grid;gap:10px;align-content:start}
.duo h3{font-weight:800;text-transform:uppercase;font-size:1.05rem}
.duo .gros{font-weight:800;font-size:1.5rem;color:var(--orange);font-variant-numeric:tabular-nums}
@media (min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.puces{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.puces li{padding-left:22px;position:relative}
.puces li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:3px;background:var(--azur)}
/* Formulaires */
.form{display:grid;gap:14px;max-width:640px}
.form .row2{display:grid;gap:14px}
@media (min-width:760px){.form .row2{grid-template-columns:1fr 1fr}}
.form label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
.form label small{font-weight:400;color:var(--doux)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;min-height:48px;padding:10px 12px;border:1px solid #b9bcc4;border-radius:4px;background:var(--fond);color:var(--texte);width:100%}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--azur);outline-offset:0;border-color:var(--azur)}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.form legend{font-weight:600;font-size:.9rem;margin-bottom:6px}
.choix{display:grid;gap:8px}
.choix label{display:flex;align-items:center;gap:10px;font-weight:500;border:1px solid var(--ligne);padding:12px;border-radius:4px;cursor:pointer}
.choix input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--azur)}
@media (min-width:760px){.choix{grid-template-columns:1fr 1fr}}
.form .rgpd{font-size:.78rem;color:var(--doux);font-weight:400}
.form-ok{background:var(--ciel);padding:16px;font-weight:600}
/* Offres entreprises */
.offres{display:grid;gap:0}
.offre{display:grid;gap:12px;padding-block:28px;border-top:1px solid var(--ligne);scroll-margin-top:80px}
.offre:first-child{border-top:0;padding-top:0}
.offre .eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--azur)}
.offre h2{font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,4.5vw,1.9rem);line-height:1.1}
.offre p{max-width:60ch}
.offre .photo{aspect-ratio:16/9}
@media (min-width:760px){.offre{grid-template-columns:1fr 1fr;column-gap:48px;align-items:start}.offre .photo{grid-row:1/span 6;grid-column:2}.offre>*:not(.photo){grid-column:1}}
.chiffre-cle{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.chiffre-cle strong{font-size:1.9rem;font-weight:800;color:var(--orange);font-variant-numeric:tabular-nums}
.chiffre-cle span{font-size:.9rem;color:var(--doux)}
.pourquoi{display:grid;gap:14px}
.pourquoi div{border-left:3px solid var(--azur);padding-left:14px}
.pourquoi strong{display:block;font-weight:700}
.pourquoi span{color:var(--doux);font-size:.92rem}
@media (min-width:760px){.pourquoi{grid-template-columns:repeat(3,1fr)}}
section[id]{scroll-margin-top:72px}
.inclus{margin-top:24px;background:var(--beton);padding:22px 20px;display:grid;gap:12px;max-width:720px}
.inclus h3{font-weight:800;text-transform:uppercase;font-size:1.05rem}
.rdv{display:grid;gap:16px;max-width:720px}
.rdv .btn{justify-self:stretch}
@media (min-width:760px){.rdv .btn{justify-self:start}}
.essais{display:grid;gap:14px}
.essai{border:1px solid var(--ligne);display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px;align-items:start}
.essai .photo{aspect-ratio:1;padding:4px;font-size:.6rem}
.essai .marque{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--doux)}
.essai h3{font-size:1.08rem;font-weight:700;margin:2px 0 6px}
.essai .tags{display:flex;flex-wrap:wrap;gap:6px}
.essai .tags span{font-size:.72rem;font-weight:600;padding:2px 8px;background:var(--beton)}
.essai .tags .nv{background:var(--azur);color:#fff}
.essai .tags .af{border:1px dashed var(--doux);background:transparent;color:var(--doux)}
.essai a.fiche{font-size:.85rem;font-weight:600;color:var(--azur);text-decoration:none;display:inline-block;margin-top:8px}
.essai.vedette{grid-column:1/-1;grid-template-columns:1fr;border:2px solid var(--azur);padding:0}
.essai.vedette .photo{aspect-ratio:16/9;font-size:.78rem;padding:12px}
.essai.vedette .corps{padding:4px 16px 18px}
.essai.vedette ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:.92rem}
.essai.vedette li{padding-left:18px;position:relative}
.essai.vedette li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:3px;background:var(--azur)}
.essai .px{font-weight:800;color:var(--texte);font-size:1.1rem;margin-top:10px;font-variant-numeric:tabular-nums}
.groupe-essai{display:grid;gap:12px;margin-top:28px}
.groupe-essai:first-child{margin-top:0}
.groupe-essai h3.g{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--doux)}
@media (min-width:760px){.essais{grid-template-columns:repeat(2,1fr)}.essai.vedette{grid-template-columns:1.2fr 1fr}.essai.vedette .photo{aspect-ratio:auto;height:100%;min-height:260px}.essai.vedette .corps{padding:20px 20px 20px 0}}
@media (min-width:1000px){.essais{grid-template-columns:repeat(3,1fr)}}
.occs{display:grid;gap:18px}
.occ{border:1px solid var(--ligne);display:grid;scroll-margin-top:80px}
.occ .photo{aspect-ratio:4/3}
.occ .corps{padding:16px 16px 18px;display:grid;gap:8px}
.occ .marque{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--doux)}
.occ h3{font-size:1.2rem;font-weight:800;line-height:1.15}
.occ .fiche{display:flex;flex-wrap:wrap;gap:6px}
.occ .fiche span{font-size:.75rem;font-weight:600;padding:3px 8px;background:var(--beton)}
.occ .resume{font-size:.92rem;color:var(--doux)}
.occ .note-v{font-size:.88rem;font-weight:600}
.occ .bas{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:6px}
.occ .prix{font-size:1.5rem}
.occ .gar{font-size:.8rem;font-weight:700;color:var(--azur);text-transform:uppercase;letter-spacing:.04em}
@media (min-width:760px){.occs{grid-template-columns:repeat(2,1fr)}}
.aide-idf{font-size:.85rem;font-weight:600;background:var(--ciel);padding:8px 10px}
.essai .tags .vente{background:var(--soleil);color:var(--texte)}

.photo.has-img{position:relative;padding:0;overflow:hidden;background:var(--beton)}
.photo.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.photo .credit{position:absolute;right:6px;bottom:4px;font-size:.6rem;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.6);letter-spacing:.02em}
.hero .photo.has-img img{object-position:50% 45%}
img[src$="equipe-comptoir.webp"]{object-position:50% 38%}
img[src$="cargos-devant.webp"]{object-position:50% 70%}
@media (min-width:760px){.p-hero + .photo.has-img,.wrap>.photo.has-img{max-height:520px}}
/* lot 4 */
.fiche-lien{font-size:.88rem;font-weight:700;color:var(--azur);text-decoration:none;justify-self:start}
.fiche-lien:hover{text-decoration:underline}
.usages{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.usage{background:var(--fond);padding:14px;text-decoration:none;display:grid;gap:2px;border:1px solid transparent}
.usage:hover{border-color:var(--azur)}
.usage strong{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--doux);font-weight:700}
.usage span{font-weight:700;font-size:1rem}
.usage span::after{content:" ↗";color:var(--azur)}
@media (min-width:760px){.usages{grid-template-columns:repeat(4,1fr)}}
.eyebrow-s{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--azur)}
.legal-credit{font-size:.78rem;color:var(--doux);max-width:70ch;margin-top:16px;border-left:3px solid var(--ligne);padding-left:12px}
.faq{display:grid;gap:0;max-width:760px}
.faq-g{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--doux);margin:28px 0 6px}
.faq-g:first-child{margin-top:0}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:56px;font-weight:700;padding-block:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--azur);font-size:1.4rem;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:16px;color:var(--doux);max-width:65ch}
.faq a,.texte-legal a,.mention a,.rgpd a{color:var(--azur)}
.article-carte{text-decoration:none}
.article-vide{border-style:dashed}
.article{max-width:760px}
.article-corps{display:grid;gap:14px;padding-block:28px 48px}
.article-corps h2{font-weight:800;text-transform:uppercase;font-size:1.2rem;margin-top:10px}
.texte-legal{max-width:760px;padding-bottom:48px;display:grid;gap:10px}
.texte-legal h2{font-weight:800;font-size:1.05rem;margin-top:14px}
.texte-legal p{color:var(--texte)}

.familles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.famille{background:var(--fond);padding:14px 14px 10px}
.famille h3{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--azur);margin-bottom:6px}
.famille ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.famille a{display:block;padding:6px 0;font-weight:600;text-decoration:none}
.famille a:hover{color:var(--azur)}
@media (min-width:760px){.familles{grid-template-columns:repeat(4,1fr)}}
.occs.uto .photo{aspect-ratio:4/5}
@media (min-width:1000px){.occs.uto{grid-template-columns:repeat(3,1fr)}}
.duo .puces li{font-size:.95rem}

.etapes{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:e}
.etapes li{counter-increment:e;display:grid;gap:4px;padding:16px 16px 16px 56px;position:relative;background:var(--beton)}
.etapes li::before{content:counter(e);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--azur);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.9rem}
.etapes strong{font-weight:800}
.etapes span{color:var(--doux);font-size:.95rem}
@media (min-width:760px){.etapes{grid-template-columns:repeat(3,1fr)}.etapes.quatre{grid-template-columns:repeat(4,1fr)}}
.gain{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px}
.gain .chiffre{background:var(--fond);padding:16px}
.gain strong{display:block;font-size:2.2rem;font-weight:800;color:var(--orange);line-height:1}
.gain span{font-size:.85rem;color:var(--doux)}
.directions{display:grid;gap:12px}
.directions div{border-left:3px solid var(--azur);padding-left:14px;display:grid;gap:4px}
.directions strong{font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.04em}
.directions span{color:var(--doux);font-size:.95rem}
@media (min-width:760px){.directions{grid-template-columns:1fr 1fr;gap:20px 32px}}
h3.mini{font-weight:800;font-size:1rem;margin-bottom:6px}
.tarifs.cadre td:last-child{text-align:left;font-weight:400;white-space:normal}
.tarifs.cadre td:first-child{width:38%;padding-right:12px}

/* Carrousel d'ambiance */
.carrousel{position:relative;width:100%}
.carrousel .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5;max-height:74vh}
.carrousel .slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;margin:0;position:relative;scroll-snap-align:start;background:var(--beton)}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide figcaption{position:absolute;left:16px;bottom:34px;background:#fff;color:var(--texte);font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;padding:6px 10px}
.slide .credit{position:absolute;right:6px;bottom:4px;font-size:.6rem;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.6)}
.points{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.points button{width:28px;height:28px;border:0;background:transparent;padding:0;display:grid;place-items:center;cursor:pointer}
.points button::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 3px rgba(0,0,0,.4)}
.points button[aria-current="true"]::after{background:#fff;width:20px;border-radius:4px}
@media (min-width:760px){.hero .carrousel{order:2}.carrousel .slides{max-height:none}}

.uto-bloc{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;border:1px solid var(--ligne);padding:12px}
.uto-bloc .photo{aspect-ratio:3/4}
.uto-texte{display:grid;gap:8px}
.t-m-up{font-weight:800;text-transform:uppercase;font-size:1.1rem;line-height:1.15}
.uto-texte>p{font-size:.92rem;color:var(--doux)}
.uto-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.uto-liste a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--ligne);text-decoration:none;font-size:.9rem}
.uto-liste span{color:var(--azur);font-weight:600;white-space:nowrap}
@media (min-width:760px){.uto-bloc{grid-template-columns:220px 1fr;max-width:760px;padding:16px;gap:24px}}

.client-photo{aspect-ratio:1/1;margin-bottom:16px}
.client-photo img{object-position:50% 50%}
@media (min-width:760px){.client-photo{max-width:560px}}

/* ===== Contraste renforcé (31/10) ===== */
:root{--beton:#e3e5e9;--ligne:#cdd0d6}
.bloc-beton{background:var(--beton)}
/* Cartes blanches posées sur fond gris : contour net + légère ombre */
.bloc-beton .duo>div,.bloc-beton .famille,.bloc-beton .gain .chiffre,.bloc-beton .inclus,.bloc-beton .usage{border:1px solid var(--ligne);box-shadow:0 2px 6px rgba(22,22,22,.06)}
.bloc-beton .duo>div[style*="background:var(--fond)"],.duo>div{border:1px solid var(--ligne)}
.duo>div[style*="var(--ciel)"]{border-color:transparent}
.occ,.essai,.forfait,.uto-bloc{background:var(--fond);box-shadow:0 2px 8px rgba(22,22,22,.07)}
.forfait.cle{box-shadow:0 4px 14px rgba(53,103,174,.18)}
.atouts{background:var(--azur);border-color:var(--azur)}
.atouts div{background:var(--fond)}
.atouts strong{color:var(--azur)}
/* Avis : bandeau sombre, cartes blanches */
.avis-sec{background:#161616}
.avis-sec .t-l{color:#fff}
.avis figure{border-top:4px solid var(--soleil)}
.avis-sec .sec-foot .btn{border-color:#fff;color:#fff;background:transparent!important}
.avis-sec .sec-foot .btn:hover{background:#fff!important;color:#161616}
/* Blocs d'appel à l'action : fond azur, texte blanc */
.bloc-cta{background:var(--azur);color:#fff}
.bloc-cta .t-l,.bloc-cta p{color:#fff}
.bloc-cta .btn-p{background:#fff;color:var(--azur);border-color:#fff}
.bloc-cta .btn-p:hover{background:#161616;color:#fff;border-color:#161616}
.bloc-cta .btn-s{border-color:#fff;color:#fff}
.bloc-cta .mention,.bloc-cta .mention a{color:#e8eef8}
/* Portes d'entrée : titre sur fond, mieux détachées */
@media (min-width:760px){.porte{background:var(--fond);box-shadow:0 2px 8px rgba(22,22,22,.07);padding-bottom:16px}.porte>div:not(.photo){padding:0 16px}}

.photo.has-img.produit{background:#fff}
.photo.has-img.produit img{object-fit:contain;padding:6%}
.photo.has-img.produit .credit{color:var(--doux);text-shadow:none}

/* Simulateur financement (31/10) */
.simu{display:grid;gap:20px;border:1px solid var(--ligne);border-radius:8px;padding:20px;background:var(--fond);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.simu+.simu{margin-top:16px}
.simu-in{display:grid;gap:14px;align-content:start}
.simu input[type=range]{width:100%;accent-color:var(--azur);min-height:0;padding:0;border:0}
.simu-type{border:0;padding:0;margin:0;display:grid;gap:8px}
.simu-type legend{font-weight:600;font-size:.9rem;margin-bottom:6px}
.simu-out{display:grid;gap:12px;align-content:start}
.simu-aide{display:grid;gap:8px;background:var(--beton);border-radius:6px;padding:16px}
.simu-aide>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.simu-aide span{font-size:.92rem}
.simu-aide span small{display:block;color:var(--doux);font-size:.78rem}
.simu-aide b{white-space:nowrap;font-size:1.05rem}
.simu-aide .total{border-top:1px solid var(--ligne);padding-top:10px;margin-top:2px}
.simu-aide .total b{color:var(--orange);font-size:1.4rem;font-weight:800}
.simu-aide .mention{margin:4px 0 0}
.simu-h{font-size:1rem;text-transform:uppercase;letter-spacing:.02em;margin:8px 0 0}
.simu-fois{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.simu-fois li{border:1px solid var(--ligne);border-radius:6px;padding:10px 12px;display:grid;gap:2px}
.simu-fois li b{font-size:1.15rem;color:var(--orange);font-weight:800}
.simu-fois li span{font-size:.8rem;color:var(--doux)}
.simu-fois li.off{opacity:.45}
.simu-fois li.off b{color:var(--doux);font-size:.9rem;font-weight:600}
.legal-credit p{margin:0 0 8px}
@media(min-width:800px){.simu{grid-template-columns:1fr 1.2fr;padding:28px;gap:32px}.simu-fois{grid-template-columns:repeat(3,1fr)}}
.simu-aide .total{flex-direction:column;align-items:flex-start;gap:2px}
.simu-aide .total b{white-space:normal}

/* Accueil : formats photo et centrage bureau (31/10) */
.carrousel .slides{aspect-ratio:3/2;max-height:none}
.hero .photo{aspect-ratio:3/2}
.porte:nth-child(2) .photo img{object-position:35% 45%}
.facade-photo{aspect-ratio:3/4}
.avis-grille{display:grid;gap:16px}
.avis-grille .client-photo{margin:0}
@media (min-width:760px){
  .hero{grid-template-columns:1fr 1.3fr;gap:40px}
  .avis-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;align-items:start}
  .avis-grille .client-photo{max-width:none;position:sticky;top:90px}
  .avis-grille .avis{grid-template-columns:1fr}
  .avis-grille .avis figure{padding:18px 20px}
  .infos{grid-template-columns:1fr 1fr}
  .facade-photo{max-height:560px;justify-self:end;width:100%}
}
@media (min-width:1000px){.avis-grille .avis{grid-template-columns:1fr 1fr}.avis-grille .avis figure:first-child{grid-column:1/-1}}
@media (min-width:760px){
  .hero .cta-row{grid-template-columns:max-content;justify-content:start}
  .hero .cta-row .btn{white-space:nowrap}
  .facade-photo{aspect-ratio:4/3;max-height:none}
  .facade-photo img{object-position:50% 22%}
}

/* Bandeau photo en tête des pages (31/10) */
.bandeau-photo{position:relative;height:210px;overflow:hidden;background:#161616}
.bandeau-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bandeau-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.72) 100%)}
.bandeau-photo .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:20px;gap:6px;color:#fff}
.bandeau-photo .fil{position:absolute;top:0;padding-top:14px;color:rgba(255,255,255,.85)}
.bandeau-photo .fil a{color:#fff}
.bandeau-photo .sig{color:rgba(255,255,255,.9)}
.bandeau-photo h1{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.bandeau-photo + .wrap .p-hero{padding-top:22px}
@media (min-width:760px){.bandeau-photo{height:320px}.bandeau-photo .wrap{padding-bottom:32px}}
.menu-direct{display:flex;align-items:center;min-height:56px;font-weight:800;text-transform:uppercase;font-size:1rem;text-decoration:none;color:var(--orange);border-bottom:1px solid var(--ligne)}
.nav-d>li>a[href*="bons-plans"]{color:var(--orange)}
.vide-offre{border:1px dashed var(--ligne);border-radius:6px;padding:20px;display:grid;gap:8px;max-width:640px;background:var(--fond)}
.fin-offre{font-size:.85rem;font-weight:700;color:var(--orange)}
.bandeau-photo{height:auto;min-height:210px}
.bandeau-photo .wrap{min-height:210px;padding-top:48px}
.bandeau-photo h1{font-size:clamp(1.55rem,6.6vw,3.3rem);line-height:1.05}
@media (max-width:759px){.bandeau-photo .sig{display:none}}
@media (min-width:760px){.bandeau-photo,.bandeau-photo .wrap{min-height:320px}}
@media (min-width:760px){.bandeau-photo,.bandeau-photo .wrap{min-height:400px}}
.bandeau-photo.uni-azur{background:var(--azur)}
.bandeau-photo.uni-noir{background:#161616}
.bandeau-photo[class*="uni-"]::after{background:none}
.bandeau-photo[class*="uni-"],.bandeau-photo[class*="uni-"] .wrap{min-height:180px}
@media (min-width:760px){.bandeau-photo[class*="uni-"],.bandeau-photo[class*="uni-"] .wrap{min-height:240px}}
.variantes{font-size:.88rem;font-weight:600;background:var(--beton);padding:8px 10px;border-radius:4px}
.fiche-tech{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;font-size:.84rem;color:var(--doux)}
.fiche-tech li::before{content:"· ";color:var(--azur);font-weight:800}
h3.g{font-size:1rem;text-transform:uppercase;letter-spacing:.03em;margin:24px 0 12px;color:var(--azur)}
.cofidis-l{font-size:.85rem;font-weight:600;color:var(--azur)}
.cofidis-l a{color:inherit}

.form-err{color:#b3261e;font-weight:600}
.form-ok{font-weight:600;color:var(--azur)}

/* Comparatif entreprises (31/10) */
.compare{display:grid;gap:12px}
.cmp{background:var(--fond);border:1px solid var(--ligne);border-radius:8px;padding:18px;display:grid;gap:6px;align-content:start}
.cmp-t{font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.02em}
.cmp-total{font-size:2.1rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cmp-mois{font-size:.9rem;color:var(--doux)}
.cmp ul{margin:8px 0 0;padding-left:18px;font-size:.9rem;display:grid;gap:4px}
.cmp.mieux{border-color:var(--azur)}
.cmp.mieux .cmp-total{color:var(--azur)}
.cmp.top{border:2px solid var(--orange)}
.cmp.top .cmp-total{color:var(--orange)}
.barres{display:grid;gap:8px;margin-top:20px;max-width:640px}
.barres div{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center;font-size:.85rem}
.barres i{display:block;height:14px;background:var(--azur);border-radius:3px}
.barres div:first-child i{background:#9aa0aa}
.barres div:last-child i{background:var(--orange)}
.barres b{font-variant-numeric:tabular-nums}
@media (min-width:760px){.compare{grid-template-columns:repeat(3,1fr)}}

/* Cartes illustrées (sécurité, accessoires) */
.cartes-i{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.carte-i{background:var(--fond);border:1px solid var(--ligne);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(22,22,22,.06)}
.carte-i figure{margin:0;background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:14px;border-bottom:1px solid var(--ligne)}
.carte-i figure img{max-width:100%;max-height:100%;object-fit:contain}
.carte-i.ci-photo figure{padding:0}
.carte-i.ci-photo figure img{width:100%;height:100%;object-fit:cover}
.ci-corps{padding:14px 14px 16px;display:grid;gap:6px;align-content:start}
.ci-corps h3{font-weight:800;text-transform:uppercase;font-size:.95rem;letter-spacing:.02em;line-height:1.25}
.ci-corps p{font-size:.92rem;color:var(--doux);margin:0}
.ci-corps .ci-ex{font-size:.78rem;color:var(--azur);font-weight:600}
.ci-cat{display:block;font-size:.7rem;letter-spacing:.1em;color:var(--orange);margin-bottom:2px}
.tag-ci{display:inline-block;font-size:.68rem;letter-spacing:.06em;padding:2px 7px;border-radius:20px;background:var(--beton);color:var(--doux);vertical-align:middle;margin-left:4px}
.tag-ci.ok{background:#e3f1e6;color:#25713a}
.duo-i{grid-template-columns:1fr}
@media (max-width:520px){.cartes-i{gap:10px}.carte-i figure{padding:8px}.ci-corps{padding:10px 10px 12px;gap:4px}.ci-corps h3{font-size:.82rem}.ci-corps p{font-size:.82rem}.ci-corps .ci-ex{font-size:.72rem}}
@media (min-width:760px){.cartes-i{grid-template-columns:repeat(4,1fr);gap:18px}.duo-i{grid-template-columns:1fr 1fr}.acc{grid-template-columns:repeat(4,1fr)}}
/* Cartes encadrées partout (remplace les filets bleus latéraux) */
.directions div,.pourquoi div{border-left:0;background:var(--fond);border:1px solid var(--ligne);border-top:3px solid var(--azur);border-radius:6px;padding:16px 16px 18px;box-shadow:0 2px 6px rgba(22,22,22,.05)}
.directions{gap:14px}
@media (min-width:760px){.directions{gap:18px}}
.duo-i .carte-i figure{aspect-ratio:16/9}

.carte-i.ci-icone figure,.duo-i .carte-i figure{background:#eef3fa;color:var(--azur)}
.carte-i figure svg{width:auto;height:62%;max-width:60%}

/* Gamme Moustache : cartes par usage */
.gammes{display:grid;grid-template-columns:1fr;gap:14px}
.gfam{background:var(--fond);border:1px solid var(--ligne);border-radius:6px;overflow:hidden;display:grid;grid-template-columns:42% 1fr;box-shadow:0 2px 6px rgba(22,22,22,.06)}
.gfam-img{background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;border-right:1px solid var(--ligne)}
.gfam-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.gfam-corps{padding:14px 14px 16px;display:grid;gap:6px;align-content:start}
.gfam h3{font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.03em}
.gfam p{margin:0;font-size:.88rem;color:var(--doux);line-height:1.4}
.modeles{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.modele{display:inline-block;font-size:.8rem;font-weight:700;padding:5px 10px;border-radius:20px;background:#eef3fa;color:var(--azur);text-decoration:none;border:1px solid transparent}
.modele:hover{border-color:var(--azur)}
@media (min-width:760px){.gammes{grid-template-columns:repeat(3,1fr);gap:18px}.gfam{grid-template-columns:1fr}.gfam-img{border-right:0;border-bottom:1px solid var(--ligne);padding:14px}}

/* Revue PC 31/10 soir : bandeau pleine largeur, 3 colonnes, blocs moins calés à gauche */
@media (min-width:760px){
  .hero{display:block;max-width:none;padding:0;margin:0}
  .hero .carrousel{order:0}
  .hero .carrousel .slides{aspect-ratio:auto;height:min(68vh,640px)}
  .hero-txt{max-width:var(--max);margin:0 auto;padding:36px var(--gutter-r) 8px var(--gutter-l);text-align:center;justify-items:center}
  .hero-txt p.sub{max-width:52ch;margin:0 auto}
  .hero-txt .cta-row{justify-content:center}
  .hero-txt .stars{justify-content:center}
  .bosch-duo{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:stretch}
  .bosch-duo .photo{margin-bottom:0!important;aspect-ratio:auto!important;height:100%;min-height:320px}
  .bosch-duo .directions{grid-template-columns:1fr 1fr;align-content:start}
  .tarifs-wrap{max-width:none}
  .tarifs.cadre td:first-child{width:32%}
  .inclus{max-width:none}
  .bloc-cta .rdv{margin-inline:auto;text-align:center;justify-items:center}
  .bloc-cta .rdv .btn{justify-self:center}
  .faq,.article,.texte-legal{margin-inline:auto}
  .uto-bloc{max-width:none}
  .vide-offre{max-width:none}
}
@media (min-width:1000px){.occs{grid-template-columns:repeat(3,1fr)}}
@media (min-width:760px){.hero .slide img{object-position:50% 30%!important}.hero-txt .cta-row{grid-template-columns:auto auto!important;display:grid}}
/* 31/10 soir (2) : bandeau accueil plus haut et recadré, page équipe */
@media (min-width:760px){
  .hero .carrousel .slides{height:min(80vh,780px)}
  .hero .slide img{object-position:50% 50%!important}
  .hero .slide:nth-child(1) img{object-position:50% 6%!important}
  .hero .slide:nth-child(2) img{object-position:50% 35%!important}
  .hero .slide:nth-child(3) img{object-position:50% 40%!important}
  .hero .slide:nth-child(4) img{object-position:50% 60%!important}
  .hero .slide:nth-child(5) img{object-position:50% 45%!important}
  .equipe-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
  .equipe-intro .photo{max-width:none!important}
}
@media (min-width:760px){.equipe-intro .chapo{font-size:1.15rem;line-height:1.6;color:var(--texte)}}
/* Méthode de conseil (accueil) */
.methode-bloc{background:var(--fond)}
.methode{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
.methode li{position:relative;background:var(--fond);border:1px solid var(--ligne);border-radius:6px;padding:16px 16px 16px 64px;box-shadow:0 2px 6px rgba(22,22,22,.05)}
.methode .num{position:absolute;left:16px;top:16px;width:34px;height:34px;border-radius:50%;background:var(--azur);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1rem}
.methode h3{font-weight:800;text-transform:uppercase;font-size:.95rem;letter-spacing:.03em;margin-bottom:4px}
.methode p{margin:0;font-size:.92rem;color:var(--doux);line-height:1.45}
.methode-cta{margin-top:20px}
@media (min-width:900px){
  .methode-tete{text-align:center;justify-items:center}
  .methode-tete .chapo{max-width:60ch;margin-inline:auto}
  .methode{grid-template-columns:repeat(5,1fr);gap:14px}
  .methode li{padding:58px 16px 18px 16px}
  .methode .num{left:16px;top:16px}
  .methode-cta{text-align:center}
}
.methode-cta .btn{display:inline-flex}
/* Black Friday 2026 : étiquette, ombres sous les roues, fenêtre d'accueil */
.tag.bf{background:var(--texte);color:#fff}
.photo.has-img.produit::after{content:"";position:absolute;left:8%;right:8%;bottom:19%;height:5%;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(closest-side,rgba(22,22,22,.28),rgba(22,22,22,0)) 14% 50%/34% 100% no-repeat,radial-gradient(closest-side,rgba(22,22,22,.28),rgba(22,22,22,0)) 86% 50%/34% 100% no-repeat}
.bfp-voile{position:fixed;inset:0;z-index:80;background:rgba(22,22,22,.6);display:grid;place-items:center;padding:16px var(--gutter-r) 16px var(--gutter-l)}
.bfp{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#161616;color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.45);animation:bfp-in .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes bfp-in{from{transform:translateY(16px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.bfp .bandes{display:grid;grid-template-rows:repeat(4,4px)}
.bfp .bandes i:nth-child(1){background:var(--soleil)}.bfp .bandes i:nth-child(2){background:var(--orange)}.bfp .bandes i:nth-child(3){background:var(--azur)}.bfp .bandes i:nth-child(4){background:var(--ciel)}
.bfp .in{padding:22px 28px 22px;display:grid;gap:14px}
.bfp .x{position:absolute;top:24px;right:12px;width:36px;height:36px;border:1px solid #3a3a3a;background:transparent;color:#fff;font:600 20px/1 var(--f);cursor:pointer}
.bfp .ey{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#cfd2d8}
.bfp .ti{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bfp h2{margin:0;font:400 clamp(3.2rem,12vw,5.4rem)/.9 "Anton",Impact,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.01em}
.bfp .pas{flex:none;width:112px;height:112px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-content:center;text-align:center;transform:rotate(-8deg)}
.bfp .pas small{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.bfp .pas b{font:400 2.2rem/1 "Anton",Impact,sans-serif}
.bfp .ph{display:grid;place-items:center}.bfp .ph img{display:block;width:auto;max-width:100%;height:auto;max-height:200px}
.bfp p{margin:0;color:#e8e9ec;font-size:.98rem}
.bfp .cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bfp .cats a{background:#fff;color:#161616;padding:8px 10px;display:grid;text-decoration:none;min-width:0}
.bfp .cats span{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.bfp .cats em{font-style:normal;font-size:.78rem;color:var(--doux)}
.bfp .cats em b{color:#161616}
.bfp .act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bfp .go{background:var(--azur);color:#fff;border-radius:4px;padding:11px 18px;font-weight:700;text-decoration:none}
.bfp .tard{background:none;border:0;color:#cfd2d8;font:600 .85rem var(--f);text-decoration:underline;cursor:pointer;padding:0}
.bfp .mn{font-size:.72rem;color:#a9acb4}
.bfp .x:focus-visible,.bfp .go:focus-visible,.bfp .tard:focus-visible,.bfp .cats a:focus-visible{outline:2px solid var(--ciel);outline-offset:2px}
@media (max-width:759px){
  .bfp-voile{background:transparent;place-items:end stretch;padding:0;pointer-events:none}
  .bfp{width:100%;max-height:none;pointer-events:auto;animation-name:bfp-up}
  .bfp .in{padding:12px var(--gutter-r) calc(16px + env(safe-area-inset-bottom,0px)) var(--gutter-l);gap:8px}
  .bfp .x{top:14px;right:10px;width:32px;height:32px;font-size:17px}
  .bfp .ey,.bfp .cats,.bfp .tard,.bfp .mn{display:none}
  .bfp h2{font-size:2.4rem}
  .bfp .pas{width:62px;height:62px}.bfp .pas b{font-size:1.2rem}.bfp .pas small{font-size:.5rem}
  .bfp .ph{max-height:120px;display:grid;place-items:center}.bfp .ph img{max-height:120px;width:auto;max-width:100%}
  .bfp p{font-size:.82rem}
  .bfp .go{text-align:center}
  .bfp .act{display:grid}
}
@keyframes bfp-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.bfp{animation:none}}