/* Noms de classes préfixés bd- (bd-cl, bd-cs, bd-vf, bd-vs) : .cl et .vs existent déjà dans style.css / v2.css (calculateur, comparatif). */
/* =============================================================
   ARGOS — brouillon V2 : section ARGOS BRAND DNA en plein écran (19/10/2026)
   Remplace l'ancien bloc .dna (dans #regles) et la section #boutiques : les trois boutiques démo en parallèle, leurs quatre
   règles écrites rangée par rangée, la photo fournisseur qui devient la photo principale, la boutique entière, puis les
   trois cartes de boutique (demos.css, fenêtre demos.js). Script : assets/bd-par.js. Images : assets/img/bd/.
   Construit d'après la démo (bd.css + bd-par.css, dédoublonnés : jetons, polices,
   boutons et barre viennent de style.css).
   ============================================================= */
/* la section : pas de marge de section ; elle remonte en rideau arrondi sur la section claire (.curtain de style.css),
   fond transparent pour que les coins arrondis laissent voir le blanc ; 60 px en bas pour le rideau de « Le gain » */
.bd { padding: 0 0 60px; }
.bd.curtain { background: transparent; }
.bd.curtain .bd-pin { border-radius: inherit; }
.bd-live .bd-pin.flat { border-radius: 0; }
.bd-eb { position: relative; }
/* la barre du site s'efface pendant la scène épinglée, puis revient (transition de padding de style.css conservée) */
.nav { transition: padding .7s var(--spring), opacity .45s ease, transform .6s var(--spring); }
.nav.bd-hide { opacity: 0; transform: translateY(-120%); pointer-events: none; }
html.menu-open .nav.bd-hide { opacity: 1; transform: none; pointer-events: auto; }

.bd { --bd-bg1: #0b0b0d; --bd-bg2: #1a1a1d; --bd-fg: #f3f2ef; --bd-mut: #8f8c88; --bd-acc: #d8d3ca; --bd-line: rgba(255,255,255,.14);
  --bd-btn: #f3f2ef; --bd-btnfg: #0b0b0d; --bd-card: rgba(255,255,255,.035); --bd-chrome: #17171a; --bd-chromefg: #8f8c88;
  position: relative; color: var(--bd-fg); }
.bd-head { text-align: center; }
.bd-eb { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--bd-acc);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.bd-eb::before, .bd-eb::after { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.bd-head h2 { font-size: clamp(30px, 4.4vw, 56px); max-width: 13.5em; margin: 0 auto; text-wrap: balance; }
.bd-head h2 span { display: block; color: var(--bd-acc); }
.bd-lede { margin: 22px auto 0; max-width: 38em; color: var(--bd-mut); font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.55; text-wrap: balance; }

.bd-frame { position: relative; overflow: hidden; border-radius: 18px; background: #f2f2f2; }
.bd-frame img, .bd-frame i { position: absolute; display: block; max-width: none; }
.bd-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bd-mut); text-align: center; }
.bd-more { list-style: none; margin: 0; padding: 0; }
.bd-more img { border-radius: 14px; }
.bd-same { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.03em; color: var(--bd-fg); text-align: center; }
.bd-same span { color: var(--bd-acc); }

/* statique (sans JS, mouvement réduit) */
.bd:not(.bd-live) .bd-head { padding: clamp(90px, 11vw, 140px) 24px clamp(40px, 6vw, 70px); background: var(--bd-bg1); }

/* épinglé */
.bd-live .bd-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.bd-live .bd-head, .bd-live .bd-hero, .bd-live .bd-cap, .bd-live .bd-more li, .bd-live .bd-same { position: absolute; left: 0; top: 0; }
.bd-live .bd-head { width: 100%; padding: 0 24px; z-index: 2; will-change: transform; pointer-events: none; }
.bd-live .bd-head .bd-eb, .bd-live .bd-head h2 { transform-origin: 50% 0; will-change: transform; }
.bd-live .bd-hero { transform-origin: 0 0; will-change: transform, opacity; }
.bd-live .bd-frame { width: 100%; height: 100%; border-radius: 18px; box-shadow: 0 40px 90px -44px rgba(0,0,0,.5); }
.bd-live .bd-frame img { left: 0; top: 0; }
.bd-live .l-grade, .bd-live .l-bg, .bd-live .l-cut, .bd-live .l-final, .bd-live .l-shadow, .bd-live .l-scan { opacity: 0; }
.bd-live .l-cut { transform-origin: 0 0; will-change: transform, opacity; }
.bd-live .l-shadow { border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,0)); transform-origin: 0 0; }
.bd-live .l-scan { left: 0; width: 100%; height: 90px; margin-top: -45px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.0) 38%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 62%, transparent);
  mix-blend-mode: overlay; }
.bd-live .bd-cap { white-space: nowrap; }
.bd-live .bd-cap span { position: absolute; left: 0; right: 0; top: 0; transition: opacity .5s var(--ease); }
.bd-live .bd-cap .c1 { opacity: 0; }
.bd-live .bd-cap.fin .c0 { opacity: 0; }
.bd-live .bd-cap.fin .c1 { opacity: 1; }
.bd-live .bd-more li { opacity: 0; will-change: transform, opacity; }
.bd-live .bd-more img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 60px -34px rgba(0,0,0,.6); }
.bd-live .bd-same { width: 100%; opacity: 0; }
@media (max-width: 760px) {
  .bd-live .bd-head h2 { font-size: 29px; }
  .bd-live .bd-lede { font-size: 15.5px; }
}

/* ---------- trois boutiques en parallèle (bd-par.css de la démo) ---------- */
/* =============================================================
   ARGOS BRAND DNA — trois boutiques en parallèle (19/10/2026, 18h25)
   S'ajoute à bd.css (jetons, polices, barre, titre, calques de la photo) et à demos.css (copie conforme des cartes).
   Couleurs de chaque colonne : --c-fg / --c-mut / --c-acc, écrites par bd-par.js (du noir de la section vers sa boutique).
   ============================================================= */
.bd-par { --bd-fg: #f5f5f7; --bd-mut: #86868b; --bd-acc: #e6c068; color: var(--fg); }
.bd-par .bd-head h2 span { color: var(--accent); }
.bd-par .bd-eb { color: var(--accent); }
.bd-par .bd-same { font-size: clamp(18px, 1.8vw, 24px); }
.bd-par .bd-same span { color: var(--accent); }
.bd-col { --c-fg: #f3f2ef; --c-mut: #8f8c88; --c-acc: #d8d3ca; color: var(--c-fg); }
.bd-col .bd-name { font-size: 20px; letter-spacing: -.025em; text-align: center; color: var(--c-fg); }
.bd-col .bd-cap { color: var(--c-mut); }
.bd-vals { list-style: none; margin: 0; padding: 0; }
.bd-v { text-align: center; }
.bd-v .k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-acc); }
.bd-v .v { position: relative; display: block; margin-top: 6px; font-size: 15px; line-height: 1.35; color: var(--c-fg); letter-spacing: -.01em; }
.bd-v .sw { display: flex; justify-content: center; gap: 7px; }
.bd-v .sw i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(127,127,127,.3); }
.bd-v .bd-vs { display: none; }
.bd-cap .bd-cs { display: none; }
.bd-par .bd-cap .c2 { display: none; }
.bd-par.bd-live .bd-cap .c2 { display: inline; opacity: 0; }
.bd-par.bd-live .bd-cap.mid .c0 { opacity: 0; }
.bd-par.bd-live .bd-cap.mid .c2 { opacity: 1; }
.bd-rows { display: none; list-style: none; margin: 0; padding: 0; }
.bd-bands { display: none; }

/* ---------- fond des bandes : la palette de chaque boutique (bas fondu sur téléphone) ---------- */
.bd-bands i { --fb: 0px; --base: 11,11,13; }
.bd-bands i[data-shop="nocturne"] { background: linear-gradient(0deg, rgb(var(--base)) 0, rgba(var(--base),0) var(--fb)), radial-gradient(90% 60% at 50% 34%, #26262a, #111113 78%); }
.bd-bands i[data-shop="atelier-lueur"] { background: linear-gradient(0deg, rgb(var(--base)) 0, rgba(var(--base),0) var(--fb)), radial-gradient(90% 60% at 50% 34%, #fdfbf6, #efe9dd 80%); }
.bd-bands i[data-shop="mochi-room"] { background: linear-gradient(0deg, rgb(var(--base)) 0, rgba(var(--base),0) var(--fb)), linear-gradient(180deg, #e7d8fb 0%, #f3dcf0 55%, #fbe3ee 100%); }

/* ---------- statique (sans JS, mouvement réduit) : trois colonnes lisibles, puis les cartes ---------- */
.bd-par:not(.bd-live) .bd-head { background: var(--bg); }
.bd-par:not(.bd-live) .bd-same { display: none; }
.bd-par:not(.bd-live) .bd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0 24px 40px; background: var(--bg); }
.bd-par:not(.bd-live) .bd-col { display: grid; gap: 16px; align-content: start; padding: 22px 18px 24px; border-radius: 22px; }
.bd-par:not(.bd-live) .bd-col[data-shop="nocturne"] { background: radial-gradient(90% 60% at 50% 30%, #26262a, #0e0e10 78%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.bd-par:not(.bd-live) .bd-col[data-shop="atelier-lueur"] { --c-fg: #1c1c1a; --c-mut: #786f61; --c-acc: #946b2a; background: radial-gradient(90% 60% at 50% 30%, #fdfbf6, #efe9dd 80%); }
.bd-par:not(.bd-live) .bd-col[data-shop="mochi-room"] { --c-fg: #3b2850; --c-mut: #7f6a96; --c-acc: #9150bd; background: linear-gradient(180deg, #e7d8fb, #fbe3ee); }
.bd-par:not(.bd-live) .bd-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; background: none; border-radius: 0; }
.bd-par:not(.bd-live) .bd-frame img { position: static; width: 100%; height: auto; border-radius: 12px; }
.bd-par:not(.bd-live) .bd-frame .l-raw { align-self: center; }
.bd-par:not(.bd-live) .bd-frame .l-grade, .bd-par:not(.bd-live) .bd-frame .l-bg, .bd-par:not(.bd-live) .bd-frame .l-cut,
.bd-par:not(.bd-live) .bd-frame .l-shadow, .bd-par:not(.bd-live) .bd-frame .l-scan { display: none; }
.bd-par:not(.bd-live) .bd-cap { display: flex; justify-content: space-around; font-size: 10px; order: 2; }
.bd-par:not(.bd-live) .bd-hero { order: 1; }
.bd-par:not(.bd-live) .bd-name { order: 0; }
.bd-par:not(.bd-live) .bd-vals { order: 3; display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(127,127,127,.22); }
.bd-par:not(.bd-live) .bd-more { order: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bd-par:not(.bd-live) .bd-more img { border-radius: 10px; }
@media (max-width: 760px) {
  .bd-par:not(.bd-live) .bd-cols { grid-template-columns: 1fr; padding-inline: 16px; }
}

/* ---------- épinglé ---------- */
.bd-par.bd-live .bd-pin { background: #0b0b0d; }
.bd-par.bd-live .bd-bands { display: block; position: absolute; inset: 0; pointer-events: none; }
/* plein écran : trois bandes bord à bord. La couleur coule du haut pendant la règle 01 (bord adouci de --fh) ;
   à la fin (.out), le noir redescend par le haut et les efface : aucune bande ne passe par le gris */
.bd-par.bd-live .bd-bands { --m: -200px; --fh: 140px; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--m), transparent calc(var(--m) + var(--fh)));
  mask-image: linear-gradient(180deg, #000 0, #000 var(--m), transparent calc(var(--m) + var(--fh))); }
.bd-par.bd-live .bd-bands.out {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--m), #000 calc(var(--m) + var(--fh)));
  mask-image: linear-gradient(180deg, transparent 0, transparent var(--m), #000 calc(var(--m) + var(--fh))); }
.bd-par.bd-live .bd-bands i { position: absolute; }
/* avant la couleur : trois bandes noires séparées d'un filet très fin */
.bd-par.bd-live .bd-pin::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--fil, 0);
  background: linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255,255,255,.07) calc(33.333% - .5px), rgba(255,255,255,.07) calc(33.333% + .5px), transparent calc(33.333% + .5px),
    transparent calc(66.666% - .5px), rgba(255,255,255,.07) calc(66.666% - .5px), rgba(255,255,255,.07) calc(66.666% + .5px), transparent calc(66.666% + .5px)); }
/* « Toute la boutique, même ADN. » : surimpression en verre fumé, au centre */
.bd-par.bd-live .bd-same { left: 0; right: 0; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; z-index: 4; padding: 12px 24px; border-radius: 999px;
  background: rgba(11,11,13,.74); color: #f5f5f7; border: 1px solid rgba(255,255,255,.12); font-size: 20px;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 20px 50px -24px rgba(0,0,0,.7); }
.bd-par.bd-live .bd-same { pointer-events: none; }   /* invisible hors de son passage : il ne doit jamais capter le clic d'une carte */
.bd-par.bd-live .bd-cols { position: absolute; inset: 0; pointer-events: none; }
.bd-par.bd-live .bd-col { position: absolute; inset: 0; }
.bd-par.bd-live .bd-name, .bd-par.bd-live .bd-v { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.bd-par.bd-live .bd-name { clip: auto; width: auto; height: auto; overflow: visible; white-space: nowrap; }
.bd-par.bd-live .bd-more li { transform-origin: 0 0; }
.bd-par.bd-live .bd-more img { border-radius: 12px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.bd-par.bd-live .bd-v .v-txt { color: transparent; }
.bd-par.bd-live .bd-v .v-live { position: absolute; inset: 0; color: var(--c-fg); pointer-events: none; }
.bd-par.bd-live .bd-v .v-live b { font-weight: inherit; color: var(--c-acc); opacity: .6; }
.bd-par.bd-live .bd-v .sw i { transform: scale(0); }
.bd-par.bd-live .bd-cap { left: 0; top: 0; text-align: center; }
.bd-par.bd-live .bd-rows { display: block; position: absolute; inset: 0; pointer-events: none; }
.bd-par.bd-live .bd-rows li { position: absolute; opacity: 0; transform-origin: 0 50%; background: linear-gradient(90deg, transparent, rgba(128,128,128,.28) 10%, rgba(128,128,128,.28) 90%, transparent); }
.bd-par.bd-live .bd-rows li span { display: none; }

/* ---------- les cartes de la fin (identiques à #boutiques de la V2) ---------- */
.bd-final { --wrap-px: 24px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.bd-final .dm-open { margin-left: auto; }          /* sans « 15 fiches », « Voir la boutique » reste à droite, comme en ligne */
.bd-par:not(.bd-live) .bd-final { padding: clamp(50px, 7vw, 90px) 24px clamp(90px, 11vw, 140px); background: var(--bg); max-width: none; }
.bd-par:not(.bd-live) .bd-final .dm-grid { max-width: 1152px; margin: 0 auto; }
.bd-par.bd-live .bd-final { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
.bd-par.bd-live .bd-final .dm-grid > li { opacity: 0; will-change: opacity; pointer-events: none; }
.bd-par.bd-live .bd-final.act .dm-grid > li { pointer-events: auto; }
.bd-par.bd-live .bd-final:not(.vis) { visibility: hidden; }

/* ---------- téléphone : trois colonnes étroites, une règle à la fois ---------- */
@media (max-width: 760px) {
  .bd-par.bd-live .bd-same { font-size: 14px; padding: 9px 16px; }
  .bd-final { --wrap-px: 16px; padding: 0 16px; }
  .bd-par:not(.bd-live) .bd-final { padding-inline: 16px; }
  .bd-par.bd-live .bd-final .dm-shot { aspect-ratio: auto; height: var(--fshot-h, 420px); }
  .bd-par .bd-final .dm-grid > li { scroll-snap-align: center; }
  /* téléphone : trois bandes horizontales ; dans chacune, la photo à gauche, le texte à droite */
  .bd-par.bd-live .bd-pin::before { background: linear-gradient(180deg, transparent calc(33.333% - .5px), rgba(255,255,255,.08) calc(33.333% - .5px), rgba(255,255,255,.08) calc(33.333% + .5px), transparent calc(33.333% + .5px),
    transparent calc(66.666% - .5px), rgba(255,255,255,.08) calc(66.666% - .5px), rgba(255,255,255,.08) calc(66.666% + .5px), transparent calc(66.666% + .5px)); }
  .bd-par.bd-live .bd-col .bd-name { font-size: 18px; letter-spacing: -.02em; text-align: left; }
  .bd-par.bd-live .bd-cap { font-size: 9px; letter-spacing: .12em; text-align: left; white-space: normal; line-height: 1.45; }
  .bd-par.bd-live .bd-cap span { white-space: normal; }
  .bd-par.bd-live .bd-cap .c1 .bd-cl { display: none; }
  .bd-par.bd-live .bd-cap .c1 .bd-cs { display: inline; }
  .bd-par.bd-live .bd-v { text-align: left; }
  .bd-par.bd-live .bd-v .k { font-size: 9.5px; letter-spacing: .12em; }
  .bd-par.bd-live .bd-v .v { font-size: 14.5px; line-height: 1.32; margin-top: 6px; }
  .bd-par.bd-live .bd-v .sw { justify-content: flex-start; gap: 6px; }
  .bd-par.bd-live .bd-v .sw i { width: 18px; height: 18px; }
  .bd-par.bd-live .bd-hero { z-index: 2; }
  .bd-par.bd-live .bd-more li { z-index: 1; }
  .bd-par.bd-live .bd-more img { border-radius: 8px; }
  .bd-par.bd-live .bd-rows li { background: none; height: auto; text-align: center; transform-origin: 50% 50%; }
  .bd-par.bd-live .bd-rows li span { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent); padding: 7px 14px; border-radius: 999px; background: rgba(11,11,13,.74);
    border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

/* raccord avec « Le gain » (.curtain) : son rideau ne remonte plus sur du blanc mais sur le noir de cette section ;
   son haut se fond dans le noir au lieu de dessiner un bord droit */
.bd + .gain.curtain { box-shadow: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px); mask-image: linear-gradient(180deg, transparent 0, #000 160px); }

/* 20/10 : titre plus long, toujours sur deux lignes à l'ordinateur */
.bd-par .bd-head h2 { font-size: clamp(30px, 3.2vw, 46px); max-width: 28em; }
@media (max-width: 760px) { .bd-par.bd-live .bd-head h2 { font-size: 26px; } }