/* Brodzo · premium minimal. Pierre claire, encre, beaucoup d'air ; le vêtement et la photo portent la page.
   Un seul accent : le fil rouge, réservé aux petits détails (point de la marque, survol des boutons).
   Typo : Geist (titres fins en minuscules, texte), Geist Mono pour les prix. */
:root{
  --fond:#F6F6F4; --surface:#FFFFFF; --tuile:#EEEEEB; --encre:#121212; --gris:#6B6B66; --trait:#E2E1DC;
  --fil:#B8321F; --fil-fonce:#93271A; --nuit:#141414;
  --f-titre:"Geist","Helvetica Neue",Arial,sans-serif;
  --f-texte:"Geist","Helvetica Neue",Arial,sans-serif;
  --f-chiffre:"Geist Mono",ui-monospace,Menlo,monospace;
  --rayon:4px; --douce:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.6 var(--f-texte);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
::selection{background:var(--encre);color:#fff}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:2px}
.gout{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.lim{max-width:1240px;margin:0 auto}
.num{font-family:var(--f-chiffre);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* en-tête */
.tete{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(246,246,244,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.tete.colle{border-bottom-color:var(--trait)}
.tete .lim{display:flex;align-items:center;gap:28px;min-height:72px}
.marque{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;flex:0 0 auto}
.marque b{font:600 25px/1 var(--f-titre);letter-spacing:-.04em}
.marque i{width:7px;height:7px;border-radius:50%;background:var(--fil);display:inline-block}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:15px;padding:8px 12px;border-radius:var(--rayon);white-space:nowrap;color:#3A3A37;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--encre)}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:8px}
.nav .btn{margin-left:12px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px 0;font:500 15px var(--f-texte);cursor:pointer;color:var(--encre)}
@media (max-width:1100px){
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--fond);border-bottom:1px solid var(--trait);padding:8px max(20px,env(safe-area-inset-right,0px)) 20px max(20px,env(safe-area-inset-left,0px))}
  .nav.ouverte{display:flex}
  .nav a{padding:14px 0;font-size:18px;border-bottom:1px solid var(--trait)}
  .nav .btn{margin:16px 0 0;border-bottom:0}
}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:var(--rayon);border:1px solid var(--encre);background:var(--encre);color:#fff;font:500 15px/1 var(--f-texte);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .25s var(--douce),color .25s,border-color .25s}
.btn:hover{background:#2B2B2B}
.btn.creux{background:transparent;color:var(--encre);border-color:#BDBCB6}
.btn.creux:hover{border-color:var(--encre)}
.btn.rouge{background:var(--encre);border-color:var(--encre)}
.btn.rouge:hover{background:var(--fil);border-color:var(--fil)}
.btn.petit{min-height:42px;padding:0 18px;font-size:14px}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* titres */
h1,h2,h3{text-wrap:balance;margin:0;font-family:var(--f-titre)}
h1{font-weight:500;font-size:clamp(42px,6.2vw,84px);line-height:1;letter-spacing:-.045em}
h1 em{font-style:normal;color:var(--gris)}
h2{font-weight:500;font-size:clamp(30px,3.8vw,48px);line-height:1.05;letter-spacing:-.035em}
h2 em{font-style:normal;color:inherit}
h3{font-weight:500;font-size:20px;line-height:1.25;letter-spacing:-.015em}
.chap{font-size:19px;line-height:1.55;color:#3A3A37;max-width:46ch;margin:0}
.sous{color:var(--gris);max-width:58ch;margin:14px 0 0}
section{padding-block:112px}
section.blanc{background:var(--surface)}
.titre-section{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}

/* ouverture vidéo (accueil) */
.scene{position:relative;height:min(86vh,820px);min-height:560px;overflow:hidden;background:var(--nuit);color:#fff}
.scene video,.scene img.affiche{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%)}
.scene .lim{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px}
.scene h1{max-width:13ch;color:#fff}
.scene h1 em{color:rgba(255,255,255,.72)}
.scene .chap{color:rgba(255,255,255,.88);margin-top:22px}
.scene .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.scene .btn.creux{color:#fff;border-color:rgba(255,255,255,.55)}
.scene .btn.creux:hover{border-color:#fff}
.scene .btn.rouge{background:#fff;color:var(--encre);border-color:#fff}
.scene .btn.rouge:hover{background:var(--fil);border-color:var(--fil);color:#fff}

/* ouverture classique (pages intérieures) */
.ouv{padding-block:72px 88px}
.ouv .lim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;align-items:center}
.ouv .chap{margin-top:26px}
.ouv figure{margin:0;border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/5}
.ouv figure img{width:100%;height:100%;object-fit:cover}

/* essai du logo */
.essai-bande{background:var(--surface)}
.essai-bande .lim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:72px}
.depot{border:1px dashed #A9A8A2;border-radius:var(--rayon);background:var(--fond);padding:30px;display:flex;gap:20px;align-items:center;cursor:pointer;transition:border-color .25s,background .25s;position:relative}
.depot:hover,.depot.survol{border-color:var(--encre);background:#F1F1EE}
.depot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.depot .ico{flex:0 0 52px;height:52px;border-radius:50%;background:var(--encre);display:grid;place-items:center}
.depot .ico svg{width:22px;height:22px}
.depot b{display:block;font:500 20px/1.2 var(--f-titre);letter-spacing:-.02em}
.depot span{color:var(--gris);font-size:15px}
.ou{margin-top:16px;font-size:15px;color:var(--gris)}

/* faits */
.faits{border-block:1px solid var(--trait);background:var(--fond)}
.faits ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.faits li{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--gris);padding:26px 22px;border-left:1px solid var(--trait)}
.faits li:first-child{border-left:0;padding-left:0}
.faits b{font:500 19px/1.2 var(--f-titre);letter-spacing:-.02em;color:var(--encre)}

/* produits */
.grille-produits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
.carte-produit{display:flex;flex-direction:column;text-decoration:none;gap:14px}
.carte-produit .visu{aspect-ratio:400/440;background:var(--tuile);border-radius:var(--rayon);overflow:hidden}
.carte-produit .visu svg{width:100%;height:100%;display:block;transition:transform .6s var(--douce)}
.carte-produit:hover .visu svg{transform:scale(1.03)}
.carte-produit .txt{display:flex;flex-direction:column;gap:6px}
.carte-produit h3{font-size:18px}
.prix-des{font-size:14px;color:var(--gris)}
.prix-des b{font:500 15px var(--f-chiffre);color:var(--encre)}
.carte-sombre{background:var(--nuit);color:#fff;border-radius:var(--rayon);padding:28px;justify-content:space-between;min-height:100%}
.carte-sombre h3{font-size:26px;letter-spacing:-.03em}
.carte-sombre span{color:#BDBDB8}
.pastilles{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pastilles button{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.18);padding:0;cursor:pointer;transition:transform .2s}
.pastilles button:hover{transform:scale(1.15)}
.pastilles button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--fond),0 0 0 3px var(--encre)}
.pastilles.grandes{gap:10px}
.pastilles.grandes button{width:30px;height:30px}
.coul-nom{font-size:14px;color:var(--gris);margin-top:8px}

/* fiche produit */
.fiche{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:start}
.fiche .visu-grand{aspect-ratio:400/440;background:var(--tuile);border-radius:var(--rayon);overflow:hidden;position:sticky;top:96px}
.fiche .visu-grand svg{width:100%;height:100%;display:block}
.fiche .chap{margin-top:22px}
.ariane{font-size:14px;color:var(--gris);margin-bottom:22px}
.ariane a{color:var(--gris);text-decoration:none}
.ariane a:hover{color:var(--encre)}
.prix-gros{margin:26px 0 0;font-size:15px;color:var(--gris)}
.prix-gros b{font:500 26px var(--f-chiffre);color:var(--encre);letter-spacing:-.02em}
.liste-liens{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.liste-liens a{text-decoration:none;border-bottom:1px solid var(--trait);padding-bottom:10px;display:block}
.liste-liens a:hover{border-color:var(--encre)}

/* tableau des prix */
.tableau{overflow-x:auto;border-top:1px solid var(--encre)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:15px 14px;text-align:right;border-bottom:1px solid var(--trait);white-space:nowrap}
th:first-child,td:first-child{text-align:left;padding-left:0}
thead th{font:500 12px var(--f-texte);text-transform:uppercase;letter-spacing:.1em;color:var(--gris)}
tbody tr:hover td{background:rgba(0,0,0,.015)}
.note{font-size:14px;color:var(--gris);margin:18px 0 0;max-width:72ch}

/* cibles */
.grille-cibles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.carte-cible{position:relative;border-radius:var(--rayon);overflow:hidden;aspect-ratio:3/4;color:#fff;text-decoration:none;display:block;background:var(--nuit)}
.carte-cible img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--douce)}
.carte-cible:hover img{transform:scale(1.04)}
.carte-cible .txt{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.6) 60%)}
.carte-cible h3{font-size:22px}
.carte-cible span{font-size:14px;opacity:.85}

/* étapes */
.etapes{list-style:none;padding:28px 0 0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;border-top:1px solid var(--encre)}
.etapes li{display:flex;flex-direction:column;gap:10px}
.etapes .n{font:500 13px var(--f-chiffre);color:var(--gris)}
.etapes .n::before{content:"0"}
.etapes p{margin:0;color:var(--gris);font-size:15px}

/* savoir-faire */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.duo figure{margin:0;border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/5}
.duo img{width:100%;height:100%;object-fit:cover}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:center}
.liste-coche{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column}
.liste-coche li{padding:16px 0;border-top:1px solid var(--trait)}
.liste-coche li:last-child{border-bottom:1px solid var(--trait)}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--encre)}
.faq details{border-bottom:1px solid var(--trait);padding:22px 0}
.faq summary{cursor:pointer;font:500 19px/1.35 var(--f-titre);letter-spacing:-.015em;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 24px/1 var(--f-texte);color:var(--gris);transition:transform .3s var(--douce)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:12px 0 0;color:var(--gris);max-width:68ch}

/* page cible */
.ouv-cible{position:relative;min-height:min(80vh,760px);display:flex;align-items:flex-end;color:#fff;background:var(--nuit)}
.ouv-cible img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ouv-cible::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.6) 100%)}
.ouv-cible .lim{position:relative;z-index:1;width:100%;padding-block:72px}
.ouv-cible h1 em{color:rgba(255,255,255,.72)}
.ouv-cible .chap{color:rgba(255,255,255,.88);margin-top:22px}
.ouv-cible .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ouv-cible .btn.rouge{background:#fff;color:var(--encre);border-color:#fff}
.ouv-cible .btn.rouge:hover{background:var(--fil);border-color:var(--fil);color:#fff}
.ouv-cible .btn.creux{color:#fff;border-color:rgba(255,255,255,.55)}
.ouv-cible .btn.creux:hover{border-color:#fff}
.besoins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;border-top:1px solid var(--encre);padding-top:28px}
.besoin h3{margin-bottom:10px}
.besoin p{margin:0;color:var(--gris);font-size:15px}
.encart{background:var(--surface);border-radius:var(--rayon);padding:32px;display:flex;flex-direction:column;gap:16px}

/* appel final */
.appel{background:var(--nuit);color:#fff}
.appel .lim{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-block:88px}
.appel h2{max-width:16ch}
.appel .btn{background:#fff;color:var(--encre);border-color:#fff}
.appel .btn:hover{background:var(--fil);border-color:var(--fil);color:#fff}

/* pied */
.pied{background:var(--fond);color:var(--gris);font-size:14px;border-top:1px solid var(--trait)}
.pied .lim{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:40px;padding-block:72px 32px}
.pied h4{font:500 13px var(--f-texte);color:var(--encre);margin:0 0 16px}
.pied ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.pied a{text-decoration:none}
.pied a:hover{color:var(--encre)}
.pied .legal{grid-column:1/-1;border-top:1px solid var(--trait);padding-top:24px;font-size:13px}

/* apparition douce : visible par défaut, la classe ne fait qu'animer l'arrivée */
@keyframes monte{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:none}}
.monte{animation:monte .9s var(--douce) both}

.saut{position:absolute;left:-9999px;top:0;z-index:50;background:var(--encre);color:#fff;padding:10px 16px}
.saut:focus{left:0}

@media (max-width:980px){
  section{padding-block:80px}
  .ouv .lim,.split,.fiche,.essai-bande .lim{grid-template-columns:minmax(0,1fr);gap:40px}
  .fiche .visu-grand{position:static}
  .grille-produits,.grille-cibles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faits ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faits li,.faits li:first-child{border-left:0;padding:18px 0;border-top:1px solid var(--trait)}
  .etapes,.besoins{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied .lim{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  section{padding-block:64px}
  .scene{min-height:600px;height:88vh}
  .scene .lim{padding-bottom:40px}
  .ouv{padding-block:40px 56px}
  .grille-produits{gap:24px 12px}
  .carte-produit h3{font-size:16px}
  .faits ul{grid-template-columns:minmax(0,1fr)}
  .etapes,.besoins{grid-template-columns:minmax(0,1fr);gap:28px}
  .duo{gap:10px}
  .grille-cibles{gap:10px}
  .carte-cible .txt{padding:14px}
  .carte-cible h3{font-size:18px}
  .pied .lim{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%}
  .titre-section .btn{width:auto}
  .pastilles button{width:18px;height:18px}
}

/* boutique de groupe */
.bq-tete{background:var(--surface);border-bottom:1px solid var(--trait)}
.bq-tete .lim{display:flex;align-items:center;gap:18px;min-height:80px;flex-wrap:wrap;padding-block:12px}
.bq-tete img{height:48px;width:auto}
.bq-tete .par{margin-left:auto;font-size:13px;color:var(--gris);text-decoration:none}
.bq-tete .par b{font:600 17px var(--f-titre);color:var(--encre);letter-spacing:-.03em}
.bq-coul{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bq-pastille{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0}
.bq-pastille[aria-checked="true"]{box-shadow:0 0 0 2px var(--fond),0 0 0 3px var(--encre)}
.bq-ligne{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bq-champ{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--gris)}
.bq-champ select,.bq-champ input{font:400 16px var(--f-texte);padding:11px 12px;border:1px solid var(--trait);border-radius:var(--rayon);background:#fff;color:var(--encre);width:100%}
.bq-panier{list-style:none;padding:0;margin:0 0 28px;border-top:1px solid var(--encre)}
.bq-panier li{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--trait)}
.bq-panier li.vide{color:var(--gris)}
.bq-panier button{border:0;background:none;color:var(--gris);text-decoration:underline;cursor:pointer;font-size:14px}
.bq-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end}
.bq-form .err{grid-column:1/-1;color:var(--fil-fonce);margin:0}
.demo-bandeau{background:var(--nuit);color:#DADAD5;font-size:13px;text-align:center;padding-block:9px}
@media (max-width:760px){.bq-form{grid-template-columns:minmax(0,1fr)}}