/* ============================================================
   Boutique Printig, le design (appelé V10 pendant les essais de style, choisi par Erlé le 20/10/2026 :
   « on garde la V10 ») : toile presque blanche, cartes tièdes très arrondies, pastels, surligneur jaune,
   boutons bleu ciel, titres en Plus Jakarta Sans, photo de l'atelier en fond d'accueil, cartes blanches
   au catalogue, peu d'icônes.
   Règle sur les icônes (Erlé : « moins d'icônes, car ça fait pas mal de doublons avec les photos » et
   « reprendre les icônes d'avant (en quadri) ») : celles qui restent sont les illustrations plates en
   couleurs de brand/v10/ (étapes, suivi, boutons de technique, états vides ; générées par
   scripts/illustrations-v8.py) ; il n'y en a plus sur les photos de vêtements, ni sur « un prix clair »,
   ni sur le bandeau d'aide.
   Feuille chargée APRÈS shop.css (la base) par toutes les pages. Aucune logique ; v10.js ajoute seulement
   l'apparition au défilement et un lien d'accès rapide au contenu.
   ============================================================ */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/brand/fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --v8-bg: #f9f9fb;
  --v8-card: #fbf6f1;       /* cartes tièdes */
  --v8-card-2: #f3ebe3;
  --v8-cream: #f4e8d3;      /* blob */
  --v8-cream-soft: #faf2e4;
  --v8-ink: #2a1747;        /* aubergine : texte */
  --v8-ink-2: #4b3b66;
  --v8-muted: #6f6486;
  --v8-line: #e6dde8;
  --v8-indigo: #6266a9;     --v8-indigo-d: #4a4e8d;  --v8-indigo-soft: #e4e6f5;
  --v8-coral: #e5482c;      --v8-coral-soft: #fde1d9;
  --v8-olive: #9faf85;      --v8-olive-soft: #e7edd9; --v8-olive-ink: #3d4a26;
  --v8-pink: #e87b9d;       --v8-pink-soft: #fde0ea;
  --v8-sky: #86cdfb;        --v8-sky-d: #62b9f2;     --v8-sky-soft: #dcf0fe;
  --v8-sun: #fbf47c;        --v8-sun-soft: #fefadc;
  --v8-night: #211d33;

  /* jetons de shop.css */
  --c-cyan: var(--v8-sky);       --c-cyan-soft: var(--v8-sky-soft);       --c-cyan-ink: var(--v8-ink);
  --c-magenta: var(--v8-pink);   --c-magenta-soft: var(--v8-pink-soft);   --c-magenta-ink: #5c1a35;
  --c-yellow: var(--v8-sun);     --c-yellow-soft: var(--v8-sun-soft);     --c-yellow-ink: #4b4200;
  --c-green: var(--v8-olive);    --c-green-soft: var(--v8-olive-soft);    --c-green-ink: var(--v8-olive-ink);
  --c-red: var(--v8-coral);      --c-red-soft: var(--v8-coral-soft);      --c-red-ink: #7a1f0e;

  --ink: var(--v8-ink); --ink-2: var(--v8-ink-2); --muted: var(--v8-muted);
  --line: var(--v8-line); --line-2: #eee6ea;
  --paper: var(--v8-bg); --surface: var(--v8-card); --surface-2: var(--v8-card-2);
  --brand: var(--v8-sky); --brand-ink: var(--v8-ink); --brand-soft: var(--v8-sky-soft);
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 12px; --r: 18px; --r-lg: 28px; --r-pill: 999px;
}

/* ---------- base ---------- */
body { background: var(--v8-bg); color: var(--v8-ink); font: 400 16px/1.6 var(--font); }
b, strong, th, summary, label, button, .btn, .nav { font-weight: 700; }
h1, h2, h3 { font-family: var(--font); font-weight: 800; letter-spacing: -.02em; word-spacing: .03em; line-height: 1.1; color: var(--v8-ink); text-wrap: balance; }
a { color: var(--v8-ink); text-decoration-thickness: 2px; text-decoration-color: rgba(98, 102, 169, .45); text-underline-offset: 3px; }
a:hover { color: var(--v8-indigo-d); }
::selection { background: var(--v8-sun); color: var(--v8-ink); }
:focus-visible { outline: 3px solid var(--v8-indigo); outline-offset: 3px; box-shadow: none; border-radius: 10px; }
.mono { font-family: var(--font); color: var(--v8-ink-2); }
.v8-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--v8-ink); color: #fff; padding: 10px 18px; border-radius: 14px; font-weight: 700; text-decoration: none; transition: top .15s; }
.v8-skip:focus { top: 12px; color: #fff; }

/* ---------- en-tête : toile claire, panier en pastille bleu ciel ---------- */
.bar { background: rgba(249, 249, 251, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 0; }
.bar-in { padding: 14px 28px; }
.logo img:not(.logo-creme) { display: block; mix-blend-mode: normal; }
.logo .logo-creme { display: none; }
.logo:hover img { transform: scale(1.03); transform-origin: left center; }
.logo img { transition: transform .2s; }
.tagline { color: var(--v8-ink); }
.nav { color: var(--v8-ink); font-weight: 600; padding: 9px 16px; transition: background .15s, transform .15s; }
.nav:hover { background: var(--v8-cream); color: var(--v8-ink); }
.nav.on { background: var(--v8-sun); color: var(--v8-ink); font-weight: 700; }
.nav.cart { background: var(--v8-sky); font-weight: 800; padding: 9px 20px; }
.nav.cart:hover { background: var(--v8-sky-d); transform: translateY(-1px); }
.nav b { background: #d63f22; color: #fff; padding: 1px 8px; }
.menu-liste { background: #fff; border: 0; border-radius: 22px; padding: 10px; box-shadow: 0 14px 40px rgba(42, 23, 71, .14); }
.menu-liste a { border-radius: 14px; padding: 10px 14px; }
.menu-liste a:hover { background: var(--v8-sky-soft); color: var(--v8-ink); }
.menu-liste a.tout { color: var(--v8-indigo-d); border-top: 1px solid var(--v8-line); border-radius: 0 0 14px 14px; }
.burger { color: var(--v8-ink); }
@media (max-width: 900px) {
  .bar.ouvert .menu-mobile { background: #fff; border-top: 0; border-radius: 0 0 28px 28px; }
  .menu-mobile a:hover, .menu-mobile a:focus-visible { background: var(--v8-sky-soft); color: var(--v8-ink); }
  .menu-mobile a.tout { color: var(--v8-indigo-d); }
}

/* ---------- boutons ---------- */
.btn { border: 0; border-radius: 18px; background: #efe6dd; color: var(--v8-ink); min-height: 48px; padding: 11px 22px; transition: transform .15s, background .15s; }
.btn:hover { background: #e6dacd; border: 0; transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.dark, .btn.blue { background: var(--v8-sky); color: var(--v8-ink); }
.btn.dark:hover, .btn.blue:hover { background: var(--v8-sky-d); color: var(--v8-ink); }
.btn.block { min-height: 58px; font-size: 1.05rem; }
.btn:disabled { opacity: .5; transform: none; }
.link { color: var(--v8-ink); text-decoration-color: var(--v8-indigo); }
.link.danger { color: var(--v8-coral); }

/* ---------- champs ---------- */
input, select, textarea { background: #fff; border: 1.5px solid var(--v8-line); border-radius: 14px; padding: 12px 14px; color: var(--v8-ink); }
input:focus, select:focus, textarea:focus { border-color: var(--v8-indigo); box-shadow: 0 0 0 4px rgba(98, 102, 169, .18); }
input[type=checkbox], input[type=radio] { accent-color: var(--v8-indigo-d); }
label { color: var(--v8-ink-2); }
.search { border-radius: 999px; padding: 14px 22px 14px 48px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='6' fill='none' stroke='%232a1747' stroke-width='2'/%3E%3Cpath d='M13 13l4.5 4.5' stroke='%232a1747' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 18px center; }

/* ---------- cartes : tièdes, très arrondies, sans filet ---------- */
.card-p, .tuile, .etape, .box, .stage-card, .filtres, .label-carte, .raisons article, .faq details, .ref, .opt-ligne, .chiffres > div, .atelier-photo, .includes, .prix-section {
  border: 0; border-radius: 28px; background: var(--v8-card); }
.box .visuel-bloc, .box .encres { background: #fff; border: 0; border-radius: 22px; }
.box.sand, .box.tint-cyan, .box.tint-yellow, .box.tint-magenta { background: var(--v8-card); border: 0; }
.box.tint-yellow { background: var(--v8-sun-soft); }
.visuel-bloc { background: #fff; border: 0; border-radius: 22px; }
.msg { border: 0; border-radius: 16px; }
.msg.warn { background: var(--v8-sun-soft); color: #4b4200; }
.msg.err { background: var(--v8-coral-soft); color: #7a1f0e; }
.msg.ok { background: var(--v8-olive-soft); color: var(--v8-olive-ink); }
.sect { font-size: .74rem; letter-spacing: .08em; color: var(--v8-ink); }
.sect::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--v8-coral); flex: none; }
.tiers tr.on td { background: var(--v8-sun); color: var(--v8-ink); }
.tiers tr.on td:first-child { border-radius: 12px 0 0 12px; } .tiers tr.on td:last-child { border-radius: 0 12px 12px 0; }
.recap .tot, .from b, .price b, .card-p .price b { color: var(--v8-ink); font-weight: 800; }
.banner > div { border: 0; border-radius: 18px; background: var(--v8-sky-soft); }
.banner > div.m { background: var(--v8-sun-soft); }
.eco { background: var(--v8-sun); color: var(--v8-ink); border-radius: 18px; }
.badge-sim { background: #fff; border: 0; }
details.reglage summary, details.plus summary { color: var(--v8-ink); }

/* ---------- pastilles et bascules ---------- */
.pills button, .techs button { background: #fff; border: 2px solid var(--v8-line); color: var(--v8-ink); font-weight: 700; padding: 8px 20px; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.pills button:hover, .techs button:hover { background: var(--v8-cream-soft); border-color: var(--v8-ink); transform: translateY(-1px); }
.pills button[aria-pressed=true], .techs button[aria-pressed=true] { background: var(--v8-ink); border-color: var(--v8-ink); color: #fff; }
.seg { background: #fff; padding: 5px; }
.seg button { color: var(--v8-ink); }
.seg button[aria-pressed=true] { background: var(--v8-ink); color: #fff; box-shadow: none; }
.slot { background: #fff; border: 2px dashed var(--v8-line); border-radius: 18px; }
.slot.add { border-style: solid; border-color: var(--v8-line); color: var(--v8-ink); }
.slot.add:hover { background: var(--v8-sky); color: var(--v8-ink); border-color: var(--v8-sky); }
.slot.on { border: 2px solid var(--v8-ink); }
.sw button { border-radius: 12px; }
.sw button:hover { border-color: var(--v8-ink); }
.sw button[aria-pressed=true] { border-color: var(--v8-ink); box-shadow: inset 0 0 0 3px #fff; }
.dots { background: #fff; }

/* ---------- aperçu du vêtement et placement ---------- */
/* pas de cadre crème autour de la photo du vêtement : le blanc de la photo repose directement sur le fond de la page */
.stage-card { background: none; padding: 0; }
.stage-top { margin-bottom: 14px; }
.stage { border-radius: 22px; box-shadow: 0 1px 2px rgba(42, 23, 71, .04), 0 12px 32px rgba(42, 23, 71, .06); }
.fiche-photo, .garment-fiche { border-radius: 22px; }
.fiche-photo { box-shadow: 0 1px 2px rgba(42, 23, 71, .04), 0 12px 32px rgba(42, 23, 71, .06); }
.drop { background: rgba(255, 255, 255, .94); border: 2.5px dashed var(--v8-indigo); border-radius: 26px; padding: 18px 12px; }
.drop:hover, .drop.over { background: var(--v8-sky-soft); box-shadow: none; border-color: var(--v8-indigo-d); }
.drop > div[aria-hidden] { display: none; }
.drop b { color: var(--v8-indigo-d); }
.design { outline: 2px dashed var(--v8-indigo); }
.design .x { background: var(--v8-coral); color: #fff; }
.design .rz { background: #fff; border: 3px solid var(--v8-coral); border-radius: 6px; }
.design .cote { background: var(--v8-ink); color: #fff; }
.avert-bouton { background: var(--v8-sun-soft); border-color: #e9b949; color: #c9982d; }
.avert-carte { border-radius: 22px; }
.encres, .reutiliser { border-radius: 22px; }
.puce { border-radius: 14px; }
.fil-ref, .reuse-btn, .opt-ligne { border-radius: 16px; background: #fff; }
.opt-ligne:hover, .fil-ref:hover:not(:disabled), .reuse-btn:hover { border-color: var(--v8-indigo); }
.techs button[data-technique]::before { content: ""; display: inline-block; width: 30px; height: 30px; margin: -6px 8px -6px -8px; vertical-align: middle; background: center / contain no-repeat; }
.techs button[data-technique=serigraphie]::before { background-image: url("/brand/v10/ico-screen.svg"); }
.techs button[data-technique=broderie]::before { background-image: url("/brand/v10/ico-hoop.svg"); }
.techs button:disabled::before { filter: grayscale(1); opacity: .45; }
.techs button:disabled, .techs button:disabled:hover { background: #efe9e4; border: 2px dashed #c9bfcb; color: #8a7f96; }

/* ---------- accueil : la photo de l'atelier en fond (celle de shop.css, voile sombre à gauche), texte clair par-dessus,
   plus d'illustration à droite. Demande d'Erlé le 20/10/2026 : « je garderais la photo de fond à l'accueil ». ---------- */
.hero-acc { overflow: hidden; }
/* Photo en effet riso une couleur (trame violet foncé sur papier crème, brand/atelier-riso.jpg, demande d'Erlé le 21/10/2026),
   avec un voile violet à gauche pour garder le titre lisible. */
.hero-acc {
  background: linear-gradient(90deg, rgba(42, 23, 71, .9) 0%, rgba(42, 23, 71, .7) 38%, rgba(42, 23, 71, 0) 100%), url("/brand/atelier-riso.jpg") center / cover no-repeat;
}
@media (max-width: 900px) {
  .hero-acc { background-image: linear-gradient(180deg, rgba(42, 23, 71, .82) 0%, rgba(42, 23, 71, .5) 60%, rgba(42, 23, 71, .2) 100%), url("/brand/atelier-riso.jpg"); background-position: 62% center; }
}
.hero-acc .hero-in { max-width: 1320px; padding: 64px 28px; grid-template-columns: minmax(0, 1000px); }
.hero-acc .hero-txt h1 { font-size: clamp(2.5rem, 5.1vw, 4.7rem); line-height: 1.04; letter-spacing: -.028em; word-spacing: .06em; }
.hero-acc .hero-txt h1 span { position: relative; display: inline-block; z-index: 0; color: var(--v8-ink); padding: 0 .1em; }
.hero-acc .hero-txt h1 span::before { content: ""; position: absolute; z-index: -1; inset: .1em -.12em -.06em -.12em; background: url("/brand/v10/surligneur.svg") center / 100% 100% no-repeat; }
.hero-acc .hero-txt h1 { margin-bottom: 32px; }
.hero-acc .btn:not(.dark) { background: #efe6dd; }
@media (max-width: 900px) {
  .hero-acc .hero-in { padding: 40px 18px 64px; }
}

/* bandeau « revendeur officiel » : ruban indigo cousu */
.bandeau-ss { position: relative; background: var(--v8-indigo); border: 0; margin: 20px 0 0; }
.bandeau-ss::before, .bandeau-ss::after { content: ""; position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(255, 255, 255, .55); }
.bandeau-ss::before { top: 7px; } .bandeau-ss::after { bottom: 7px; }
.bandeau-ss p { color: #fff; padding: 22px 0; }
.bandeau-ss strong { color: var(--v8-sun); }

/* ---------- blocs de page ---------- */
.bloc { padding: 76px 0; }
.bloc h2 { font-size: clamp(1.9rem, 3.7vw, 3.1rem); margin-bottom: 34px; }
.bloc h2::after, .cat-titre::after { content: ""; display: block; width: min(210px, 56%); height: 14px; margin-top: 8px; background: url("/brand/v10/soulignement.svg") left center / 100% 100% no-repeat; }
.aide h2::after, .merci-hero h1::after { margin-inline: auto; }
.bloc.teinte { background: var(--v8-indigo-soft); border: 0; border-radius: 44px; margin: 28px 24px; }
body:has(#accueil) #process { background: var(--v8-cream); border: 0; border-radius: 44px; margin: 28px 24px; }
@media (max-width: 700px) { .bloc.teinte, body:has(#accueil) #process { margin: 20px 10px; border-radius: 30px; } .bloc { padding: 48px 0; } }

/* rubriques : une couleur par carte, photo fondue dans la couleur */
.tuile { transition: transform .2s; }
.tuiles .tuile:nth-child(3n+1) { background: var(--v8-indigo-soft); }
.tuiles .tuile:nth-child(3n+2) { background: var(--v8-coral-soft); }
.tuiles .tuile:nth-child(3n+3) { background: var(--v8-olive-soft); }
.tuile img { background: transparent; mix-blend-mode: multiply; }
.tuile:hover { transform: translateY(-6px) rotate(-.6deg); }
.tuile .mono b { background: #fff; color: var(--v8-ink); border-radius: 10px; padding: 1px 9px; }
.tuile .voir { background: var(--v8-ink); color: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 700; transition: background .15s; }
.tuile:hover .voir { background: var(--v8-indigo-d); }

/* comment ça marche : une illustration par étape, fil cousu entre les cartes */
.etape { position: relative; padding: 18px 22px 26px; }
.etape .num { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; margin: 0; background: var(--v8-ink); color: #fff; font-size: .95rem; font-weight: 800; }
body:has(#accueil) .etapes .etape:nth-child(n) .num { background: var(--v8-ink); color: #fff; border-radius: 50%; }
#process .etape::before, #etapes .etape::before, #merci .etape::before { content: ""; display: block; width: 120px; height: 120px; margin: 0 0 8px -8px; background: var(--ico) center / contain no-repeat; }
#process .etapes, #etapes .etapes { position: relative; }
#process .etapes::before { content: ""; position: absolute; left: 6%; right: 6%; top: 84px; border-top: 3px dashed rgba(42, 23, 71, .22); }
#process .etape, #etapes .etape, #merci .etape { z-index: 1; }
#process .etape:nth-child(1), #etapes .etape:nth-child(1) { --ico: url("/brand/v10/ico-tshirt.svg"); background: var(--v8-sky-soft); }
#process .etape:nth-child(2), #etapes .etape:nth-child(2) { --ico: url("/brand/v10/ico-screen.svg"); background: var(--v8-pink-soft); }
#process .etape:nth-child(3) { --ico: url("/brand/v10/ico-tag.svg"); background: var(--v8-sun-soft); }
#process .etape:nth-child(4) { --ico: url("/brand/v10/ico-inkpot.svg"); background: var(--v8-olive-soft); }
#etapes .etape:nth-child(3) { --ico: url("/brand/v10/ico-inkpot.svg"); background: var(--v8-coral-soft); }
#etapes .etape:nth-child(4) { --ico: url("/brand/v10/ico-pile.svg"); background: var(--v8-olive-soft); }
#etapes .etape:nth-child(5) { --ico: url("/brand/v10/ico-card.svg"); background: var(--v8-sun-soft); }
#etapes .etape:nth-child(6) { --ico: url("/brand/v10/ico-squeegee.svg"); background: var(--v8-indigo-soft); }
.etape h3 { margin-bottom: 6px; }

/* un prix clair : photo dans un blob crème */
.coches li::before { color: var(--v8-olive-ink); background: var(--v8-olive-soft); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .72rem; }
.photo-gde { position: relative; background: var(--v8-cream); border: 0; border-radius: 38% 44% 40% 46% / 42% 38% 46% 40%; padding: 12% 11%; max-width: 480px; }
.photo-gde img { mix-blend-mode: multiply; }

/* besoin d'aide : panneau indigo */
.aide { position: relative; overflow: hidden; background: var(--v8-indigo); border-radius: 44px; padding: 72px 28px; color: #fff; max-width: 1120px; }
.aide h2, .aide p { color: #fff; }
.aide h2::after { background-image: url("/brand/v10/soulignement.svg"); }
.aide .btn.dark { background: var(--v8-sun); color: var(--v8-ink); }
.aide .btn.dark:hover { background: #fff; }
.aide .btn:not(.dark) { background: rgba(255, 255, 255, .16); color: #fff; }
.aide .btn:not(.dark):hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 700px) { .aide { border-radius: 30px; padding: 56px 20px; } }

/* références, ambiance */
.ref { background: #fff; }
.ambiance img { border: 0; border-radius: 28px; }
.atelier-photo img { border-radius: 28px; }

/* ---------- pied de page : nuit, bord cranté comme un tissu coupé aux cisailles ---------- */
.pied { position: relative; margin-top: 96px; background: var(--v8-night); border: 0; color: var(--v8-cream); }
.pied::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 14 14 0 28 14Z' fill='%23211d33'/%3E%3C/svg%3E") repeat-x bottom left / 28px 14px; }
.pied h3 { color: var(--v8-sun); }
.pied p, .pied .petit, .pied a { color: var(--v8-cream); }
.pied a { text-decoration-color: rgba(244, 232, 211, .35); }
.pied a:hover { color: var(--v8-sun); text-decoration-color: var(--v8-sun); }
.pied-logo img:not(.logo-beige) { display: none; }
.pied-logo .logo-beige { display: block; height: 48px; width: auto; mix-blend-mode: normal; background: none; padding: 0; }
.pied-marque .badge-ss-pied { filter: brightness(0) invert(1); opacity: .92; }

/* ---------- catalogue ---------- */
.cat-titre { font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -.028em; word-spacing: .05em; }
.cat-titre::after { height: 16px; width: min(260px, 60%); margin-bottom: 8px; }
.outils { margin-bottom: 4px; }
.filtres { background: var(--v8-card); }
.filtre { border-top: 1px solid var(--v8-line); }
.vide { text-align: center; color: var(--v8-ink-2); }
.grid > .vide { grid-column: 1 / -1; }
.vide::before { content: ""; display: block; width: 170px; height: 170px; margin: 0 auto 10px; background: url("/brand/v10/ico-spill.svg") center / contain no-repeat; }
/* cartes blanches : plus de pastel ni de crème derrière les vêtements, le blanc des photos se fond dans la carte
   (le pastel teintait aussi les vêtements : un t-shirt blanc devenait rose ou vert) */
.card-p { padding: 14px 14px 18px; background: #fff; box-shadow: 0 1px 2px rgba(42, 23, 71, .04), 0 10px 28px rgba(42, 23, 71, .05); transition: transform .2s, box-shadow .2s; }
.card-p img { background: transparent; border-radius: 22px; mix-blend-mode: normal; }
.card-p:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 2px 4px rgba(42, 23, 71, .05), 0 18px 40px rgba(42, 23, 71, .1); }
.card-p h3 { font-size: 1.08rem; }
.card-p .sub, .card-p .avail { color: var(--v8-ink-2); }
.card-p .dots { background: var(--v8-bg); }
.foot-prix { background: var(--v8-bg); color: var(--v8-ink); margin: 12px -14px -18px; }
.foot-prix b { background: var(--v8-sun); color: var(--v8-ink); border-radius: 8px; padding: 1px 8px; font-weight: 800; }

/* ---------- fiche produit et panier ---------- */
.title h1 { font-size: clamp(1.45rem, 1.9vw, 1.8rem); letter-spacing: -.025em; }
.from b { font-size: 1.5rem; background: var(--v8-sun); border-radius: 10px; padding: 0 10px; display: inline-block; }
.recap .tot { font-size: 2rem; }
.item img { background: #fff; border-radius: 18px; }
.center { background: var(--v8-card); border-radius: 36px; padding: 40px 28px 44px; }
.center h1 { margin-bottom: 10px; }
.center .btn { margin-top: 18px; }
.center::before { content: ""; display: block; width: 190px; height: 190px; margin: 0 auto 6px; background: url("/brand/v10/ico-spill.svg") center / contain no-repeat; }
.check.retrait { background: #fff; border: 0; border-radius: 18px; }

/* ---------- fenêtres ---------- */
.dlg { background: var(--v8-cream-soft); border: 0; border-radius: 32px; box-shadow: 0 30px 80px rgba(42, 23, 71, .3); }
.dlg::backdrop { background: rgba(33, 29, 51, .5); }
.dlg-x { color: var(--v8-ink); }
.prix-section { background: #fff; }
.prix-section h3 { color: var(--v8-ink); }

/* ---------- pages de contenu ---------- */
.marque-hero { background: var(--v8-cream); border: 0; border-radius: 0 0 48px 48px; padding: 64px 0 56px; position: relative; overflow: hidden; }
.marque-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); letter-spacing: -.028em; word-spacing: .05em; }
.marque-hero .sur { display: inline-block; background: #fff; color: var(--v8-ink); padding: 6px 16px; border-radius: 999px; }
.marque-hero .lead { color: var(--v8-ink-2); }
/* grappe d'objets d'atelier à droite du bandeau (pages atelier, Stanley/Stella, guide) */
.marque-hero:not(.merci-hero)::after { content: ""; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); width: min(40%, 540px); aspect-ratio: 780 / 480; background: url("/brand/v10/grappe.svg") center / contain no-repeat; pointer-events: none; }
@media (min-width: 1001px) { .marque-hero:not(.merci-hero) .bloc-in { padding-right: 40%; } }
@media (max-width: 1000px) { .marque-hero:not(.merci-hero)::after { display: none; } }
.ancres a { background: #fff; border: 0; border-radius: 999px; color: var(--v8-ink); text-decoration: none; padding: 9px 18px; transition: background .15s, transform .15s; }
.ancres a:hover { background: var(--v8-sun); color: var(--v8-ink); transform: translateY(-1px); }
.faq details[open] summary { color: var(--v8-ink); }
.faq summary { padding: 14px 0; }
.chiffres b { color: var(--v8-indigo-d); }
.raisons .num { background: var(--v8-ink); color: #fff; }
.frise li::before { background: var(--v8-coral); border-color: var(--v8-bg); }
.frise { border-left: 2px dashed var(--v8-line); }
.points-liste strong { color: var(--v8-ink); }
.bloc[id] .teinte { background: var(--v8-indigo-soft); }
.label-carte { background: #fff; }
.appel { background: #fff; border: 0; border-radius: 28px; }

/* ---------- remerciement : même composition que l'image de référence ---------- */
.merci-hero { background: none; border-radius: 0; padding: 32px 0 8px; overflow: visible; }
.merci-hero .bloc-in { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: center; text-align: left; }
.merci-hero .bloc-in::before { content: ""; width: 100%; max-width: 620px; aspect-ratio: 1 / 1; justify-self: center; background: url("/brand/v10/scene-merci.svg") center / contain no-repeat; animation: v8-float 7s ease-in-out infinite; }
.merci-texte { display: grid; justify-items: center; text-align: center; gap: 6px; }
.merci-icone { width: 108px; height: 100px; border-radius: 0; background: url("/brand/v10/marque.svg") center / contain no-repeat; font-size: 0; margin-bottom: 4px; }
.merci-hero .sur { background: #fff; padding: 6px 16px; border-radius: 999px; color: var(--v8-ink); text-transform: none; letter-spacing: 0; display: inline-block; }
.merci-hero h1 { position: relative; display: inline-block; z-index: 0; font-size: clamp(2.2rem, 4.6vw, 4rem); letter-spacing: -.028em; word-spacing: .05em; margin: 6px 0 4px; padding: .1em .2em .2em; }
.merci-hero h1::before { content: ""; position: absolute; z-index: -1; inset: 56% -.1em -.02em -.1em; background: url("/brand/v10/surligneur.svg") center / 100% 100% no-repeat; }
.merci-hero h1::after { display: none; }
.merci-carte { width: 100%; max-width: 560px; background: var(--v8-card); border-radius: 32px; padding: 30px 30px 26px; margin-top: 14px; display: grid; gap: 16px; }
.merci-hero .lead { margin: 0; font-size: 1.12rem; color: var(--v8-ink-2); }
.merci-hero .actions { justify-content: center; margin: 0; }
.merci-hero .actions .btn.dark { flex: 1 1 100%; min-height: 60px; font-size: 1.05rem; }
@media (max-width: 900px) {
  .merci-hero .bloc-in { grid-template-columns: 1fr; }
  .merci-hero .bloc-in::before { max-width: 420px; }
}
#merci .bloc h2 { text-align: center; }
#merci .bloc h2::after { margin-inline: auto; }
#merci .etape:nth-child(1) { --ico: url("/brand/v10/ico-mail.svg"); background: var(--v8-sky-soft); }
#merci .etape:nth-child(2) { --ico: url("/brand/v10/ico-loupe.svg"); background: var(--v8-sun-soft); }
#merci .etape:nth-child(3) { --ico: url("/brand/v10/ico-box.svg"); background: var(--v8-olive-soft); }
.merci-aide { color: var(--v8-ink-2); }

/* ---------- suivi de commande : frise illustrée ---------- */
#suivi.box { padding: 32px; }
#suivi h1 { margin-bottom: 4px; }
.suivi-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0; position: relative; }
.suivi-etapes::before { content: ""; position: absolute; left: 12%; right: 12%; top: 54px; border-top: 3px dashed rgba(42, 23, 71, .2); }
.suivi-etapes li { position: relative; z-index: 1; padding: 110px 10px 16px; border-radius: 24px; background: #fff; color: var(--v8-muted); text-align: center; display: grid; gap: 2px; align-content: start; }
.suivi-etapes li::before { content: ""; position: absolute; top: 12px; left: 50%; width: 92px; height: 92px; margin-left: -46px; background: var(--ico) center / contain no-repeat; filter: grayscale(1); opacity: .45; }
.suivi-etapes li:nth-child(1) { --ico: url("/brand/v10/ico-mail.svg"); }
.suivi-etapes li:nth-child(2) { --ico: url("/brand/v10/ico-card.svg"); }
.suivi-etapes li:nth-child(3) { --ico: url("/brand/v10/ico-squeegee.svg"); }
.suivi-etapes li:nth-child(4) { --ico: url("/brand/v10/ico-box.svg"); }
.suivi-etapes li.fait { color: var(--v8-ink-2); }
.suivi-etapes li.fait::before, .suivi-etapes li.en-cours::before { filter: none; opacity: 1; }
.suivi-etapes li.en-cours { background: var(--v8-sun); color: var(--v8-ink); }
.suivi-etapes li.fait b::before { content: "✓ "; color: var(--v8-olive-ink); }
@media (max-width: 700px) {
  .suivi-etapes { grid-template-columns: 1fr; }
  .suivi-etapes::before { display: none; }
  .suivi-etapes li { padding: 14px 14px 14px 100px; text-align: left; min-height: 84px; }
  .suivi-etapes li::before { top: 50%; left: 8px; margin: -34px 0 0; width: 68px; height: 68px; }
}

/* ---------- mouvements : discrets, coupés si l'utilisateur le demande ---------- */
@keyframes v8-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(.8deg); } }
.v8-rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.v8-rv.v8-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .v8-rv { opacity: 1; transform: none; }
}

/* Pages Stanley/Stella et L'atelier : photo dans le bandeau du haut (variables --photo et --photo-pos sur la section), à droite, qui s'estompe vers la gauche (demande d'Erlé le 22/10/2026). */
.marque-hero.hero-bandeau-photo:not(.merci-hero)::after {
  right: 0; top: 0; bottom: 0; transform: none; width: 56%; aspect-ratio: auto;
  background: var(--photo, url("/brand/stanley-stella/ambiance-mur-clair.jpg")) var(--photo-pos, 66% 30%) / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0, 0, 0, .6) 38%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0, 0, 0, .6) 38%, #000 70%);
}
.marque-hero.hero-bandeau-photo .bloc-in { position: relative; z-index: 1; }
@media (min-width: 1001px) { .marque-hero.hero-bandeau-photo .bloc-in { padding-right: 52%; } }
@media (max-width: 1000px) {
  .marque-hero.hero-bandeau-photo:not(.merci-hero)::after { display: block; width: 100%; opacity: .22; -webkit-mask-image: none; mask-image: none; }
}