/* ====================================================================
   Styles propres à chaque univers (html[data-skin="…"])
   ==================================================================== */

/* Éléments de décor : cachés par défaut */
.hquote{display:none}
.seal{display:none}
.tags i{font-style:normal}

/* ====================================================================
   LA TABLE — restaurant & hôtellerie
   Papier washi, encre sumi, sceau vermillon. Mise en page de carte :
   centrée, aérée, capitales espacées, filets fins.
   ==================================================================== */
html[data-skin="table"]{ --g:clamp(20px,6vw,96px); }
html[data-skin="table"] body{ letter-spacing:.01em; }
html[data-skin="table"] ::selection{ background:var(--bone); color:var(--ink); }
html[data-skin="table"] .sh{ text-shadow:0 0 24px rgba(var(--ink-rgb),.9),0 0 2px rgba(var(--ink-rgb),.6); }

/* Navigation */
html[data-skin="table"] .nav{ padding-block:calc(22px + env(safe-area-inset-top,0px)) 18px; }
html[data-skin="table"] .nav::before{ background:linear-gradient(rgba(var(--ink-rgb),.92),rgba(var(--ink-rgb),0)); }
html[data-skin="table"] .logo{ font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:.34em; text-transform:uppercase; }
html[data-skin="table"] .logo svg{ width:20px; height:20px; }
html[data-skin="table"] .nav ul{ font-family:var(--body); font-size:11px; letter-spacing:.28em; color:var(--soft); gap:34px; }
html[data-skin="table"] .nav ul a::after,html[data-skin="table"] .nav ul button::after{ background:var(--bone); }

/* Boutons : rectangles fins, capitales espacées */
html[data-skin="table"] .btn{ border-radius:0; font-family:var(--body); font-weight:500; letter-spacing:.24em; font-size:11px; padding:16px 26px; }
html[data-skin="table"] .btn.gold{ background:var(--bone); color:var(--ink); }
html[data-skin="table"] .btn.gold:hover{ background:#000; transform:none; }
html[data-skin="table"] .btn.ghost{ border-color:rgba(var(--bone-rgb),.35); }
html[data-skin="table"] .btn.sm{ padding:11px 18px; font-size:10.5px; }
html[data-skin="table"] .uni-btn{ border-radius:0; font-family:var(--body); letter-spacing:.24em; background:rgba(var(--ink-rgb),.6); }
html[data-skin="table"] .link{ font-family:var(--body); letter-spacing:.24em; font-size:11px; color:var(--bone); border-color:rgba(var(--bone-rgb),.35); }

/* Libellés en capitales espacées */
html[data-skin="table"] .k,
html[data-skin="table"] .tags,
html[data-skin="table"] .ch .num,
html[data-skin="table"] legend,
html[data-skin="table"] .fld label,
html[data-skin="table"] .hud{ font-family:var(--body); letter-spacing:.3em; }
html[data-skin="table"] .k{ color:var(--soft); font-size:10.5px; }

/* Accueil : l'ensō en haut, le texte centré dessous, la citation dans le cercle */
html[data-skin="table"] .hero{ align-items:center; text-align:center; justify-content:flex-end; gap:22px; padding-bottom:calc(9svh + env(safe-area-inset-bottom,0px)); position:relative; }
html[data-skin="table"] .hero h1{ font-size:clamp(34px,4.6vw,72px); line-height:1.12; letter-spacing:.01em; font-weight:400; }
html[data-skin="table"] .hero .line{ padding-bottom:.06em; }
html[data-skin="table"] .hsub{ max-width:44ch; font-size:15px; line-height:1.8; color:var(--soft); }
html[data-skin="table"] .hero .ctas{ justify-content:center; margin-top:6px; }
html[data-skin="table"] .hquote{ display:block; position:absolute; left:50%; top:28svh; transform:translate(-50%,-50%); width:min(210px,40vw); margin:0;
  font-family:var(--display); font-size:14.5px; line-height:1.75; color:var(--soft); text-align:center; }
html[data-skin="table"] .hquote[hidden]{ display:none; }
@media (max-width:1100px) and (orientation:portrait){ html[data-skin="table"] .hquote{ top:25svh; width:min(180px,44vw); font-size:13px; } }
@media (max-height:640px){ html[data-skin="table"] .hquote{ display:none; } }

/* Les services : deux colonnes, texte centré dans sa colonne (l'encre occupe l'autre) */
html[data-skin="table"] .ch{ padding-inline:clamp(20px,7vw,120px); }
html[data-skin="table"] .ch .box{ max-width:440px; align-items:center; text-align:center; gap:20px; }
html[data-skin="table"] .ch.r .box{ align-items:center; }
html[data-skin="table"] .ch .num{ font-size:10.5px; color:var(--soft); display:flex; flex-direction:column; align-items:center; gap:14px; }
html[data-skin="table"] .ch .num b{ margin:0; font-family:var(--display); font-weight:400; font-size:22px; letter-spacing:.1em; color:var(--gold); }
html[data-skin="table"] .ch .num::after{ content:""; width:1px; height:34px; background:rgba(var(--bone-rgb),.35); }
html[data-skin="table"] .ch h2{ font-size:clamp(28px,3vw,46px); line-height:1.22; letter-spacing:.01em; font-weight:400; }
html[data-skin="table"] .ch p{ font-size:15px; line-height:1.85; font-weight:300; margin-inline:auto; max-width:38ch; }
html[data-skin="table"] .tags{ display:flex; flex-direction:column; align-items:center; gap:0; font-size:10.5px; color:var(--bone); width:100%; max-width:320px; margin-top:4px; line-height:1.4; }
html[data-skin="table"] .tags span{ display:block; width:100%; padding:11px 0; border-top:1px solid rgba(var(--bone-rgb),.14); }
html[data-skin="table"] .tags span:last-of-type{ border-bottom:1px solid rgba(var(--bone-rgb),.14); }
html[data-skin="table"] .tags i{ display:none; }
html[data-skin="table"] .ch .link{ margin-top:4px; }
@media (max-width:760px){
  html[data-skin="table"] .ch,html[data-skin="table"] .ch.r{ justify-content:center; text-align:center; }
  html[data-skin="table"] .ch .box,html[data-skin="table"] .ch.r .box{ align-items:center; margin-inline:auto; background:rgba(var(--ink-rgb),.93); padding:30px 18px 26px; box-shadow:0 0 0 1px rgba(var(--bone-rgb),.08); }
  html[data-skin="table"] .tags{ letter-spacing:.18em; font-size:10px; }
  html[data-skin="table"] .team h2,html[data-skin="table"] .contact h2{ background:rgba(var(--ink-rgb),.85); }
}

/* La maison */
html[data-skin="table"] .team{ align-items:center; text-align:center; }
html[data-skin="table"] .team h2{ font-size:clamp(30px,3.4vw,52px); line-height:1.2; max-width:18ch; }
html[data-skin="table"] .cols{ gap:0; width:100%; max-width:1000px; }
html[data-skin="table"] .cols div{ border-top:0; border-left:1px solid rgba(var(--bone-rgb),.14); padding:8px 22px; align-items:center; }
html[data-skin="table"] .cols div:first-child{ border-left:0; }
html[data-skin="table"] .cols b{ font-family:var(--display); font-weight:400; color:var(--bone); font-size:clamp(30px,2.8vw,42px); letter-spacing:.02em; }
html[data-skin="table"] .cols h3{ font-family:var(--body); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; font-weight:500; }
html[data-skin="table"] .cols p{ font-size:14px; line-height:1.7; font-weight:300; }
@media (max-width:900px){ html[data-skin="table"] .cols div{ border-left:0; border-top:1px solid rgba(var(--bone-rgb),.14); padding:18px 10px; } }

/* Contact + sceau */
html[data-skin="table"] .contact h2{ font-size:clamp(34px,4.4vw,68px); line-height:1.15; letter-spacing:.01em; }
html[data-skin="table"] .contact p{ font-weight:300; line-height:1.8; }
html[data-skin="table"] .mail{ font-family:var(--display); letter-spacing:.02em; font-size:clamp(18px,2vw,26px); }
html[data-skin="table"] .seal{ display:grid; place-items:center; width:62px; height:62px; background:var(--gold); color:var(--ink);
  font-family:var(--display); font-size:11px; line-height:1.05; letter-spacing:.18em; padding:6px; box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 4px rgba(var(--ink-rgb),.6); transform:rotate(-2deg); }
html[data-skin="table"] .seal span{ display:block; }
html[data-skin="table"] footer{ font-family:var(--body); letter-spacing:.24em; text-transform:uppercase; font-size:10px; justify-content:center; gap:28px; }

/* Indicateur */
html[data-skin="table"] .hud{ font-size:10px; }
html[data-skin="table"] .hud b{ font-family:var(--display); letter-spacing:.1em; }

/* Devis : la carte, avec pointillés, et l'addition */
html[data-skin="table"] .dv .wrap{ max-width:640px; margin-inline:auto; }
html[data-skin="table"] .dv .intro{ align-items:center; text-align:center; }
html[data-skin="table"] .back{ align-self:center; font-family:var(--body); letter-spacing:.28em; }
html[data-skin="table"] .dv h1{ font-size:clamp(34px,4.4vw,62px); line-height:1.15; letter-spacing:.01em; }
html[data-skin="table"] .dv .intro p{ font-weight:300; line-height:1.8; }
html[data-skin="table"] .dv-sug{ border-radius:0; text-align:center; align-items:center; background:transparent; border-color:rgba(var(--bone-rgb),.2); }
html[data-skin="table"] .grp header{ flex-direction:column; align-items:center; gap:8px; border-bottom:0; padding-bottom:18px; }
html[data-skin="table"] .grp header span{ order:-1; font-family:var(--display); font-size:15px; color:var(--gold); letter-spacing:.1em; }
html[data-skin="table"] .grp h2{ font-family:var(--body); font-size:12px; letter-spacing:.34em; text-transform:uppercase; font-weight:500; }
html[data-skin="table"] .gnote{ text-align:center; font-weight:300; }
html[data-skin="table"] .opt{ border-bottom:0; padding:12px 0; grid-template-columns:18px minmax(0,1fr) auto; }
html[data-skin="table"] .opt::before{ background:linear-gradient(90deg,rgba(var(--bone-rgb),.05),transparent 80%); }
html[data-skin="table"] .opt .n{ font-family:var(--display); font-size:clamp(16px,1.3vw,18px); display:flex; align-items:baseline; gap:10px; min-width:0; }
html[data-skin="table"] .opt .n::after{ content:""; flex:1; min-width:20px; border-bottom:1px dotted rgba(var(--bone-rgb),.45); transform:translateY(-4px); order:3; }
html[data-skin="table"] .opt .n .sug{ order:2; margin-left:0; }
html[data-skin="table"] .opt:hover .n{ transform:none; }
html[data-skin="table"] .opt .p{ font-family:var(--display); font-size:14px; letter-spacing:.02em; color:var(--soft); }
html[data-skin="table"] .opt .dot{ width:10px; height:10px; }
html[data-skin="table"] .opt[aria-pressed="true"] .dot{ background:var(--bone); border-color:var(--bone); box-shadow:none; }
html[data-skin="table"] .opt[aria-pressed="true"] .p{ color:var(--bone); }
html[data-skin="table"] .opt .sug{ border-radius:0; font-family:var(--body); letter-spacing:.2em; font-size:9px; }
html[data-skin="table"] .total{ border-radius:0; background:#FBF9F5; border:1px solid rgba(var(--bone-rgb),.18); box-shadow:0 18px 40px -24px rgba(0,0,0,.35); padding:30px 22px 18px; }
html[data-skin="table"] .total::before{ content:"L’addition"; position:absolute; top:10px; left:22px; font-family:var(--body); font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--mute); }
html[data-skin="table"] .total strong{ font-family:var(--display); font-weight:400; }
html[data-skin="table"] .total .m strong{ color:var(--gold); }
html[data-skin="table"] .total small{ font-family:var(--body); letter-spacing:.24em; }
html[data-skin="table"] .frm .head{ align-items:center; text-align:center; }
html[data-skin="table"] .frm .head h2{ font-size:clamp(30px,3.6vw,50px); line-height:1.15; }
html[data-skin="table"] .seg span{ border-radius:0; font-size:13px; }
html[data-skin="table"] .seg input:checked+span{ background:var(--bone); border-color:var(--bone); color:var(--ink); }
html[data-skin="table"] .gar li::before{ border-radius:0; background:var(--gold); box-shadow:none; width:6px; height:6px; }
html[data-skin="table"] .done h3{ font-family:var(--display); font-weight:400; }
@media (max-width:760px){
  html[data-skin="table"] .total{ padding:26px 14px 12px; }
  html[data-skin="table"] .total::before{ left:14px; top:8px; }
}

/* ====================================================================
   L'ATELIER — artisan & BTP
   Noir mat, lumière rasante, matières (chêne, acier, laiton, pierre,
   cuivre). Mise en page de catalogue d'échantillons : fiches numérotées,
   pastilles de matière, texte au fer à gauche, filets fins.
   ==================================================================== */
html[data-skin="atelier"]{ --g:clamp(20px,5vw,80px); }
html[data-skin="atelier"] ::selection{ background:var(--gold); color:var(--ink); }
html[data-skin="atelier"] .sh{ text-shadow:0 2px 24px rgba(var(--ink-rgb),.9); }
html[data-skin="atelier"] .logo{ font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:0; }
html[data-skin="atelier"] .nav ul{ font-family:var(--mono); letter-spacing:.12em; font-size:11px; }
html[data-skin="atelier"] .btn{ border-radius:2px; font-family:var(--mono); letter-spacing:.1em; font-size:12px; }
html[data-skin="atelier"] .btn.gold{ background:linear-gradient(180deg,#DDA673,#B8773F); color:#1a120b; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -12px rgba(201,138,82,.7); }
html[data-skin="atelier"] .btn.gold:hover{ transform:translateY(-1px); filter:brightness(1.06); }
html[data-skin="atelier"] .btn.ghost{ border-color:rgba(var(--bone-rgb),.28); }
html[data-skin="atelier"] .uni-btn{ border-radius:2px; }
html[data-skin="atelier"] .k{ font-family:var(--mono); letter-spacing:.14em; color:var(--gold); }
html[data-skin="atelier"] .tags,html[data-skin="atelier"] legend,html[data-skin="atelier"] .fld label,html[data-skin="atelier"] .hud{ font-family:var(--mono); }

/* Accueil : grand titre éditorial, fer à gauche, filet et mention d'atelier */
html[data-skin="atelier"] .hero{ justify-content:flex-end; gap:26px; }
html[data-skin="atelier"] .hero h1{ font-size:clamp(46px,7.4vw,128px); line-height:.94; letter-spacing:-.02em; max-width:12ch; }
html[data-skin="atelier"] .hero .line{ padding-bottom:.08em; }
html[data-skin="atelier"] .hsub{ max-width:44ch; font-size:17px; line-height:1.6; padding-top:18px; border-top:1px solid rgba(var(--bone-rgb),.2); }

/* Fiches matière */
html[data-skin="atelier"] .ch .box{ max-width:500px; gap:18px; padding:26px 26px 24px; background:linear-gradient(180deg,rgba(var(--ink-rgb),.82),rgba(var(--ink-rgb),.62)); border:1px solid rgba(var(--bone-rgb),.12); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
html[data-skin="atelier"] .ch.r .box{ align-items:flex-start; text-align:left; }
html[data-skin="atelier"] .ch .num{ display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; font-family:var(--mono); letter-spacing:.14em; color:var(--soft); width:100%; padding-bottom:16px; border-bottom:1px solid rgba(var(--bone-rgb),.14); }
html[data-skin="atelier"] .ch .num::before{ content:""; grid-row:1 / 3; width:44px; height:44px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 18px -8px #000; background:var(--sw); }
html[data-skin="atelier"] .ch .num b{ display:block; margin:0; font-family:var(--display); font-weight:400; letter-spacing:0; font-size:22px; color:var(--bone); }
html[data-skin="atelier"] #home .ch:nth-of-type(2){ --sw:repeating-linear-gradient(8deg,#a8743f 0 3px,#93602f 3px 5px,#b98452 5px 9px); }
html[data-skin="atelier"] #home .ch:nth-of-type(3){ --sw:repeating-linear-gradient(90deg,#9aa1a6 0 1px,#b9bfc3 1px 2px,#8c9398 2px 4px); }
html[data-skin="atelier"] #home .ch:nth-of-type(4){ --sw:linear-gradient(135deg,#f0d49a,#c9a05a 45%,#8d6a2e); }
html[data-skin="atelier"] #home .ch:nth-of-type(5){ --sw:radial-gradient(circle at 30% 30%,#cfc8bc,#a79f92 70%),#b9b2a6; }
html[data-skin="atelier"] #home .ch:nth-of-type(6){ --sw:linear-gradient(135deg,#e9a57e,#b8693c 50%,#7d3f1f); }
html[data-skin="atelier"] .ch h2{ font-size:clamp(32px,3.6vw,56px); line-height:1.02; }
html[data-skin="atelier"] .ch p{ font-size:15.5px; line-height:1.7; }
html[data-skin="atelier"] .tags{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; width:100%; letter-spacing:.06em; text-transform:none; font-size:12.5px; color:var(--bone); line-height:1.3; }
html[data-skin="atelier"] .tags span{ padding:9px 0 9px 16px; border-top:1px solid rgba(var(--bone-rgb),.12); position:relative; }
html[data-skin="atelier"] .tags span::before{ content:"—"; position:absolute; left:0; color:var(--gold); }
html[data-skin="atelier"] .tags i{ display:none; }
html[data-skin="atelier"] .link{ color:var(--gold); font-family:var(--mono); }
@media (max-width:760px){ html[data-skin="atelier"] .ch .box{ padding:20px 18px; } html[data-skin="atelier"] .tags{ grid-template-columns:1fr; } }

/* L'atelier (engagements) : étiquettes de matière */
html[data-skin="atelier"] .team h2{ font-size:clamp(34px,4.4vw,70px); line-height:1; max-width:15ch; }
html[data-skin="atelier"] .cols{ gap:14px; }
html[data-skin="atelier"] .cols div{ border:1px solid rgba(var(--bone-rgb),.14); border-radius:2px; padding:18px; background:rgba(var(--ink-rgb),.7); }
html[data-skin="atelier"] .cols b{ font-family:var(--display); color:var(--gold); }
html[data-skin="atelier"] .cols h3{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; }

/* Contact : plaque de laiton gravée */
html[data-skin="atelier"] .contact h2{ font-size:clamp(38px,5vw,84px); line-height:1; }
html[data-skin="atelier"] .seal{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 22px; border-radius:3px; background:linear-gradient(180deg,#e9c585,#b8893f 55%,#9c7132); color:#3a2a12;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 14px 30px -14px #000; text-shadow:0 1px 0 rgba(255,255,255,.35); }
html[data-skin="atelier"] .seal span:first-child{ font-family:var(--display); font-size:18px; letter-spacing:.12em; }
html[data-skin="atelier"] .mail{ font-family:var(--display); letter-spacing:0; }
html[data-skin="atelier"] footer{ font-family:var(--mono); }

/* Devis : fiche de fabrication */
html[data-skin="atelier"] .dv h1{ font-size:clamp(40px,5.4vw,88px); line-height:.98; }
html[data-skin="atelier"] .dv-sug{ border-radius:2px; background:rgba(201,138,82,.08); border-color:rgba(201,138,82,.35); }
html[data-skin="atelier"] .grp header{ border-bottom:1px solid rgba(var(--bone-rgb),.3); }
html[data-skin="atelier"] .grp header span{ font-family:var(--mono); color:var(--gold); }
html[data-skin="atelier"] .opt .n{ font-size:17px; }
html[data-skin="atelier"] .opt .p{ font-family:var(--mono); }
html[data-skin="atelier"] .opt .dot{ border-radius:2px; }
html[data-skin="atelier"] .opt[aria-pressed="true"] .dot{ background:linear-gradient(135deg,#DDA673,#B8773F); border-color:#C98A52; box-shadow:0 0 12px rgba(201,138,82,.6); }
html[data-skin="atelier"] .opt .sug{ border-radius:2px; }
html[data-skin="atelier"] .total{ border-radius:3px; background:linear-gradient(180deg,rgba(28,24,20,.92),rgba(16,14,12,.92)); border-color:rgba(201,138,82,.35); }
html[data-skin="atelier"] .total strong{ font-family:var(--display); font-weight:400; }
html[data-skin="atelier"] .seg span{ border-radius:2px; }
html[data-skin="atelier"] .frm .head h2{ font-size:clamp(34px,4vw,62px); line-height:1; }

/* Atelier : étiquette de matière suivant la pièce + grain photo */
.fx-label{ position:fixed; left:0; top:0; z-index:2; pointer-events:none; display:none; }
html[data-skin="atelier"] .fx-label{ display:flex; flex-direction:column; gap:3px; padding:0 0 0 18px; opacity:0; transition:opacity .5s; font-family:var(--mono); }
html[data-skin="atelier"] .fx-label.on{ opacity:1; }
html[data-skin="atelier"] .fx-label i{ position:absolute; left:0; top:4px; width:9px; height:9px; border:1px solid var(--gold); border-radius:50%; box-shadow:0 0 0 4px rgba(var(--gold-rgb),.15); }
html[data-skin="atelier"] .fx-label i::after{ content:""; position:absolute; left:-24px; top:50%; width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
html[data-skin="atelier"] .fx-label b{ font-family:var(--display); font-weight:400; font-size:17px; color:var(--bone); letter-spacing:0; }
html[data-skin="atelier"] .fx-label span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
@media (max-width:760px){ html[data-skin="atelier"] .fx-label{ display:none; } }
html[data-skin="atelier"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-skin="atelier"] body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 90% at 60% 45%,transparent 55%,rgba(0,0,0,.55)); }

/* ====================================================================
   LES PLANCHES — santé & bien-être
   Planche anatomique : papier crème, trait bleu nuit, rouge artériel,
   Caslon, légendes en italique, cadre de planche et repères.
   ==================================================================== */
html[data-skin="planche"]{ --g:clamp(24px,6vw,96px); }
html[data-skin="planche"] ::selection{ background:var(--bone); color:var(--ink); }
html[data-skin="planche"] .sh{ text-shadow:0 0 18px rgba(var(--ink-rgb),.95); }
/* Cadre de planche fixe + repères d'angle */
html[data-skin="planche"] body::before{ content:""; position:fixed; inset:12px; z-index:1; pointer-events:none; border:1px solid rgba(var(--bone-rgb),.28);
  box-shadow:inset 0 0 0 5px var(--ink),inset 0 0 0 6px rgba(var(--bone-rgb),.14); }
html[data-skin="planche"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-skin="planche"] .nav{ padding-inline:calc(var(--g) + 4px); }
html[data-skin="planche"] .logo{ font-family:var(--display); font-weight:400; font-size:21px; letter-spacing:.01em; }
html[data-skin="planche"] .nav ul{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.02em; font-size:15px; }
html[data-skin="planche"] .btn{ border-radius:0; font-family:var(--mono); letter-spacing:.14em; font-size:11px; }
html[data-skin="planche"] .btn.gold{ background:var(--bone); color:var(--ink); }
html[data-skin="planche"] .btn.gold:hover{ background:var(--gold); transform:none; }
html[data-skin="planche"] .btn.ghost{ border-color:rgba(var(--bone-rgb),.4); }
html[data-skin="planche"] .uni-btn{ border-radius:0; background:rgba(var(--ink-rgb),.7); }
html[data-skin="planche"] .k{ font-family:var(--mono); letter-spacing:.2em; color:var(--gold); }
html[data-skin="planche"] em.s{ font-style:italic; }
/* Accueil */
html[data-skin="planche"] .hero h1{ font-size:clamp(46px,7vw,118px); line-height:.98; letter-spacing:-.01em; max-width:11ch; }
html[data-skin="planche"] .hsub{ font-size:16.5px; line-height:1.7; max-width:44ch; font-weight:300; }
/* Planches */
html[data-skin="planche"] .ch .box{ gap:16px; max-width:470px; }
html[data-skin="planche"] .ch .num{ display:flex; align-items:baseline; gap:14px; font-family:var(--serif); font-style:italic; font-size:15px; letter-spacing:0; text-transform:none; color:var(--soft);
  padding-bottom:12px; border-bottom:1px solid rgba(var(--bone-rgb),.25); width:100%; }
html[data-skin="planche"] .ch.r .num{ justify-content:flex-end; }
html[data-skin="planche"] .ch .num b{ font-family:var(--display); font-style:normal; font-weight:400; font-size:30px; color:var(--gold); margin:0; }
html[data-skin="planche"] .ch h2{ font-size:clamp(32px,3.6vw,56px); line-height:1.04; }
html[data-skin="planche"] .ch p{ font-size:15.5px; line-height:1.75; font-weight:300; }
html[data-skin="planche"] .tags{ counter-reset:lg; display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; text-transform:none; letter-spacing:0; font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--bone); width:100%; }
html[data-skin="planche"] .ch.r .tags{ text-align:left; }
html[data-skin="planche"] .tags span{ counter-increment:lg; }
html[data-skin="planche"] .tags span::before{ content:counter(lg) ". "; font-family:var(--mono); font-style:normal; font-size:11px; color:var(--gold); }
html[data-skin="planche"] .tags i{ display:none; }
html[data-skin="planche"] .link{ color:var(--gold); font-family:var(--mono); }
@media (max-width:760px){
  html[data-skin="planche"] .ch .box,html[data-skin="planche"] .ch.r .box{ background:rgba(var(--ink-rgb),.92); padding:22px 18px; border:1px solid rgba(var(--bone-rgb),.18); }
  html[data-skin="planche"] .ch.r .num{ justify-content:flex-start; }
  html[data-skin="planche"] .tags{ grid-template-columns:1fr; }
  html[data-skin="planche"] body::before{ inset:6px; }
}
/* Légende (engagements) */
html[data-skin="planche"] .team h2{ font-size:clamp(34px,4.4vw,70px); line-height:1.02; }
html[data-skin="planche"] .cols div{ border-top:1px solid rgba(var(--bone-rgb),.35); }
html[data-skin="planche"] .cols b{ font-family:var(--display); color:var(--gold); }
html[data-skin="planche"] .cols h3{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px; }
/* Contact : tampon */
html[data-skin="planche"] .contact h2{ font-size:clamp(38px,5vw,84px); line-height:1.02; }
html[data-skin="planche"] .seal{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; border:1.5px solid var(--gold); color:var(--gold);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px var(--gold); transform:rotate(-8deg); opacity:.85; }
html[data-skin="planche"] .seal span:last-child{ font-family:var(--serif); font-style:italic; letter-spacing:0; font-size:13px; }
html[data-skin="planche"] .mail{ font-family:var(--display); }
html[data-skin="planche"] footer{ font-family:var(--serif); font-style:italic; letter-spacing:0; font-size:13px; }
/* Devis */
html[data-skin="planche"] .dv h1{ font-size:clamp(40px,5.4vw,88px); line-height:1; }
html[data-skin="planche"] .grp h2{ font-family:var(--display); }
html[data-skin="planche"] .grp header span{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--gold); }
html[data-skin="planche"] .opt .n{ font-family:var(--serif); }
html[data-skin="planche"] .opt .p{ font-family:var(--mono); }
html[data-skin="planche"] .opt[aria-pressed="true"] .dot{ background:var(--gold); border-color:var(--gold); box-shadow:none; }
html[data-skin="planche"] .opt::before{ background:linear-gradient(90deg,rgba(var(--gold-rgb),.08),transparent 70%); }
html[data-skin="planche"] .total{ border-radius:0; background:rgba(var(--ink-rgb),.94); border-color:rgba(var(--bone-rgb),.3); }
html[data-skin="planche"] .total strong{ font-family:var(--display); }
html[data-skin="planche"] .dv-sug,html[data-skin="planche"] .seg span{ border-radius:0; }
/* Étiquettes des figures */
.fx-plab{ display:none; }
html[data-skin="planche"] .fx-plab{ display:block; position:fixed; left:0; top:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .6s;
  font-family:var(--serif); font-style:italic; font-size:14px; color:var(--bone); white-space:nowrap; text-shadow:0 0 8px var(--ink); }
html[data-skin="planche"] .fx-plab.on{ opacity:.9; }
@media (max-width:760px){ html[data-skin="planche"] .fx-plab{ font-size:12px; } }

/* ====================================================================
   LE PLAN — immobilier
   Plan d'architecte : nuit bleue, trait ivoire, laiton, cotes acier,
   cartouche, Bodoni + mono technique.
   ==================================================================== */
html[data-skin="plan"]{ --g:clamp(24px,6vw,96px); }
html[data-skin="plan"] ::selection{ background:var(--gold); color:var(--ink); }
html[data-skin="plan"] .sh{ text-shadow:0 0 22px rgba(var(--ink-rgb),.95),0 0 4px rgba(var(--ink-rgb),.9); }
/* Cadre de feuille + marges cotées */
html[data-skin="plan"] body::before{ content:""; position:fixed; inset:14px; z-index:1; pointer-events:none; border:1px solid rgba(var(--bone-rgb),.16);
  background:
    linear-gradient(rgba(var(--bone-rgb),.35),rgba(var(--bone-rgb),.35)) left 0 top 50%/8px 1px no-repeat,
    linear-gradient(rgba(var(--bone-rgb),.35),rgba(var(--bone-rgb),.35)) right 0 top 50%/8px 1px no-repeat,
    linear-gradient(rgba(var(--bone-rgb),.35),rgba(var(--bone-rgb),.35)) left 50% top 0/1px 8px no-repeat,
    linear-gradient(rgba(var(--bone-rgb),.35),rgba(var(--bone-rgb),.35)) left 50% bottom 0/1px 8px no-repeat; }
html[data-skin="plan"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 90% at 55% 45%,transparent 60%,rgba(0,0,0,.45)); }
html[data-skin="plan"] .nav{ padding-inline:calc(var(--g) + 6px); }
html[data-skin="plan"] .logo{ font-family:var(--display); font-weight:400; font-size:21px; letter-spacing:.02em; }
html[data-skin="plan"] .nav ul{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; }
html[data-skin="plan"] .btn{ border-radius:0; font-family:var(--mono); letter-spacing:.16em; font-size:11px; }
html[data-skin="plan"] .btn.gold{ background:var(--gold); color:var(--ink); }
html[data-skin="plan"] .btn.gold:hover{ background:var(--bone); transform:none; }
html[data-skin="plan"] .btn.ghost{ border-color:rgba(var(--bone-rgb),.35); }
html[data-skin="plan"] .uni-btn{ border-radius:0; background:rgba(var(--ink-rgb),.7); }
html[data-skin="plan"] .k{ font-family:var(--mono); letter-spacing:.22em; color:var(--gold); }
html[data-skin="plan"] em.s{ font-style:italic; color:var(--gold-2); }
/* Accueil */
html[data-skin="plan"] .hero h1{ font-size:clamp(48px,7.4vw,124px); line-height:.96; letter-spacing:-.02em; max-width:10ch; }
html[data-skin="plan"] .hsub{ font-size:16px; line-height:1.7; max-width:42ch; font-weight:300; }
/* Chapitres = plans numérotés */
html[data-skin="plan"] .ch .box{ gap:16px; max-width:470px; }
html[data-skin="plan"] .ch .num{ display:flex; align-items:baseline; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft);
  padding:0 0 12px; border-bottom:1px solid rgba(var(--bone-rgb),.22); width:100%; position:relative; }
html[data-skin="plan"] .ch .num::after{ content:""; position:absolute; left:0; bottom:-4px; width:1px; height:7px; background:rgba(var(--bone-rgb),.5); box-shadow:calc(100% * 0) 0 0 transparent; }
html[data-skin="plan"] .ch .num i{ font-style:normal; color:var(--mute); }
html[data-skin="plan"] .ch.r .num{ justify-content:flex-end; }
html[data-skin="plan"] .ch .num b{ font-family:var(--display); font-weight:400; font-size:34px; letter-spacing:0; color:var(--gold); margin:0; }
html[data-skin="plan"] .ch h2{ font-size:clamp(32px,3.7vw,58px); line-height:1.02; }
html[data-skin="plan"] .ch p{ font-size:15.5px; line-height:1.75; font-weight:300; }
html[data-skin="plan"] .tags{ display:grid; grid-template-columns:1fr 1fr; gap:0; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); width:100%;
  border-top:1px solid rgba(var(--bone-rgb),.18); border-left:1px solid rgba(var(--bone-rgb),.18); }
html[data-skin="plan"] .ch.r .tags{ text-align:left; }
html[data-skin="plan"] .tags span{ padding:9px 12px; border-right:1px solid rgba(var(--bone-rgb),.18); border-bottom:1px solid rgba(var(--bone-rgb),.18); }
html[data-skin="plan"] .tags i{ display:none; }
html[data-skin="plan"] .link{ color:var(--gold); font-family:var(--mono); }
@media (max-width:760px){
  html[data-skin="plan"] .ch .box,html[data-skin="plan"] .ch.r .box{ background:rgba(var(--ink-rgb),.9); padding:22px 18px; border:1px solid rgba(var(--bone-rgb),.16); }
  html[data-skin="plan"] .ch.r .num{ justify-content:flex-start; }
  html[data-skin="plan"] .ch .num i{ display:none; }
  html[data-skin="plan"] .tags{ grid-template-columns:1fr; }
  html[data-skin="plan"] body::before{ inset:6px; }
}
/* Cahier des charges */
html[data-skin="plan"] .team h2{ font-size:clamp(34px,4.4vw,72px); line-height:1; }
html[data-skin="plan"] .cols div{ border-top:1px solid rgba(var(--bone-rgb),.3); }
html[data-skin="plan"] .cols b{ font-family:var(--mono); color:var(--gold); }
html[data-skin="plan"] .cols h3{ font-family:var(--display); font-weight:400; font-size:21px; }
/* Contact : cartouche */
html[data-skin="plan"] .contact h2{ font-size:clamp(38px,5vw,86px); line-height:1; }
html[data-skin="plan"] .seal{ display:grid; grid-template-columns:auto auto; border:1px solid rgba(var(--bone-rgb),.45); font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--soft); }
html[data-skin="plan"] .seal span{ padding:8px 12px; border-right:1px solid rgba(var(--bone-rgb),.3); }
html[data-skin="plan"] .seal span:nth-child(2){ grid-row:span 2; grid-column:2; display:flex; align-items:center; font-family:var(--display); font-size:18px; letter-spacing:.08em; color:var(--gold); border-right:0; border-left:0; }
html[data-skin="plan"] .seal span:nth-child(1){ grid-column:1; grid-row:1; border-bottom:1px solid rgba(var(--bone-rgb),.3); }
html[data-skin="plan"] .seal span:nth-child(3){ grid-column:1; grid-row:2; }
html[data-skin="plan"] .mail{ font-family:var(--display); }
html[data-skin="plan"] footer{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; }
/* Devis */
html[data-skin="plan"] .dv h1{ font-size:clamp(40px,5.4vw,90px); line-height:1; }
html[data-skin="plan"] .grp h2{ font-family:var(--display); }
html[data-skin="plan"] .grp header span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--gold); }
html[data-skin="plan"] .opt .p{ font-family:var(--mono); }
html[data-skin="plan"] .opt[aria-pressed="true"] .dot{ background:var(--gold); border-color:var(--gold); box-shadow:none; }
html[data-skin="plan"] .total{ border-radius:0; background:rgba(var(--ink-rgb),.94); border-color:rgba(var(--bone-rgb),.28); }
html[data-skin="plan"] .total strong{ font-family:var(--display); }
html[data-skin="plan"] .dv-sug,html[data-skin="plan"] .seg span{ border-radius:0; }
/* Étiquettes des pièces */
.fx-room{ display:none; }
html[data-skin="plan"] .fx-room{ display:flex; flex-direction:column; align-items:center; gap:2px; position:fixed; left:0; top:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .5s;
  white-space:nowrap; text-shadow:0 0 6px var(--ink),0 0 12px var(--ink); }
html[data-skin="plan"] .fx-room span{ font-family:var(--display); font-style:italic; font-size:14px; color:var(--bone); }
html[data-skin="plan"] .fx-room b{ font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.14em; color:var(--gold); }
html[data-skin="plan"] .fx-room.on{ opacity:.92; }
html[data-skin="plan"] .fx-total{ flex-direction:row; gap:14px; padding:6px 12px; border:1px solid rgba(var(--bone-rgb),.35); background:rgba(var(--ink-rgb),.6); }
html[data-skin="plan"] .fx-total span{ font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }
html[data-skin="plan"] .fx-total b{ font-size:12px; }
@media (max-width:760px){ html[data-skin="plan"] .fx-room span{ font-size:11px; } html[data-skin="plan"] .fx-room b{ font-size:9px; } }

/* ====================================================================
   LA COURBE — finance & assurance
   Rapport financier : vert sapin, papier millimétré, trait ivoire,
   cuivre pour les résultats, Newsreader + IBM Plex.
   ==================================================================== */
html[data-skin="courbe"]{ --g:clamp(24px,6vw,96px); }
html[data-skin="courbe"] ::selection{ background:var(--gold); color:var(--ink); }
html[data-skin="courbe"] .sh{ text-shadow:0 0 20px rgba(var(--ink-rgb),.95); }
html[data-skin="courbe"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 90% at 60% 45%,transparent 55%,rgba(0,0,0,.35)); }
html[data-skin="courbe"] .logo{ font-family:var(--display); font-weight:400; font-size:21px; }
html[data-skin="courbe"] .nav ul{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; }
html[data-skin="courbe"] .btn{ border-radius:2px; font-family:var(--mono); letter-spacing:.12em; font-size:11px; }
html[data-skin="courbe"] .btn.gold:hover{ transform:none; background:var(--bone); }
html[data-skin="courbe"] .uni-btn{ border-radius:2px; }
html[data-skin="courbe"] .k{ font-family:var(--mono); letter-spacing:.2em; color:var(--gold); }
html[data-skin="courbe"] em.s{ font-style:italic; color:var(--gold-2); }
html[data-skin="courbe"] .hero h1{ font-size:clamp(46px,7vw,118px); line-height:.98; letter-spacing:-.025em; max-width:11ch; font-weight:300; }
html[data-skin="courbe"] .hsub{ font-size:16px; line-height:1.7; max-width:42ch; }
/* Chapitres : figures d'un rapport */
html[data-skin="courbe"] .ch .box{ gap:16px; max-width:470px; }
html[data-skin="courbe"] .ch .num{ display:flex; align-items:baseline; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
  padding-bottom:12px; border-bottom:1px solid rgba(var(--bone-rgb),.22); width:100%; }
html[data-skin="courbe"] .ch .num i{ font-style:normal; color:var(--mute); }
html[data-skin="courbe"] .ch.r .num{ justify-content:flex-end; }
html[data-skin="courbe"] .ch .num b{ font-family:var(--display); font-weight:300; font-size:34px; letter-spacing:-.02em; color:var(--gold); margin:0; }
html[data-skin="courbe"] .ch h2{ font-size:clamp(32px,3.6vw,56px); line-height:1.03; font-weight:300; }
html[data-skin="courbe"] .ch p{ font-size:15.5px; line-height:1.75; }
html[data-skin="courbe"] .tags{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:none; color:var(--bone); width:100%; }
html[data-skin="courbe"] .ch.r .tags{ text-align:left; }
html[data-skin="courbe"] .tags span{ padding:8px 0; border-bottom:1px dashed rgba(var(--bone-rgb),.22); }
html[data-skin="courbe"] .tags span::before{ content:""; display:inline-block; width:0; height:0; margin:0 9px 1px 0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:7px solid var(--gold); }
html[data-skin="courbe"] .tags i{ display:none; }
html[data-skin="courbe"] .link{ color:var(--gold); font-family:var(--mono); }
@media (max-width:760px){
  html[data-skin="courbe"] .ch .box,html[data-skin="courbe"] .ch.r .box{ background:rgba(var(--ink-rgb),.9); padding:22px 18px; border:1px solid rgba(var(--bone-rgb),.14); }
  html[data-skin="courbe"] .ch.r .num{ justify-content:flex-start; }
  html[data-skin="courbe"] .ch .num i{ display:none; }
  html[data-skin="courbe"] .tags{ grid-template-columns:1fr; }
}
html[data-skin="courbe"] .team h2{ font-size:clamp(34px,4.4vw,72px); line-height:1; font-weight:300; }
html[data-skin="courbe"] .cols div{ border-top:1px solid rgba(var(--bone-rgb),.3); }
html[data-skin="courbe"] .cols b{ font-family:var(--mono); color:var(--gold); }
html[data-skin="courbe"] .cols h3{ font-family:var(--display); font-weight:400; font-size:21px; }
/* Contact : cotation */
html[data-skin="courbe"] .contact h2{ font-size:clamp(38px,5vw,84px); line-height:1; font-weight:300; }
html[data-skin="courbe"] .seal{ display:grid; grid-template-columns:auto auto; align-items:baseline; gap:2px 14px; padding:10px 14px; border:1px solid rgba(var(--bone-rgb),.35); font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--soft); }
html[data-skin="courbe"] .seal span:nth-child(1){ font-weight:500; color:var(--bone); }
html[data-skin="courbe"] .seal span:nth-child(2){ color:#6FCF97; }
html[data-skin="courbe"] .seal span:nth-child(3){ grid-column:1 / -1; font-size:9.5px; color:var(--mute); }
html[data-skin="courbe"] .mail{ font-family:var(--display); }
html[data-skin="courbe"] footer{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
/* Devis */
html[data-skin="courbe"] .dv h1{ font-size:clamp(40px,5.4vw,88px); line-height:1; font-weight:300; }
html[data-skin="courbe"] .grp h2{ font-family:var(--display); font-weight:400; }
html[data-skin="courbe"] .grp header span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--gold); }
html[data-skin="courbe"] .opt .p{ font-family:var(--mono); }
html[data-skin="courbe"] .total{ border-radius:2px; }
html[data-skin="courbe"] .total strong{ font-family:var(--display); font-weight:400; }
/* Étiquettes des graphiques */
.fx-cl{ display:none; }
html[data-skin="courbe"] .fx-cl{ display:block; position:fixed; left:0; top:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .5s;
  white-space:nowrap; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--soft); text-shadow:0 0 8px var(--ink),0 0 3px var(--ink); }
html[data-skin="courbe"] .fx-cl.on{ opacity:1; }
html[data-skin="courbe"] .fx-cl em{ font-style:normal; color:var(--bone); }
html[data-skin="courbe"] .fx-cl.big{ font-family:var(--display); font-weight:300; font-size:40px; letter-spacing:-.02em; color:var(--gold); }
html[data-skin="courbe"] .fx-cl.mid{ font-family:var(--display); font-size:24px; letter-spacing:-.01em; color:var(--bone); }
html[data-skin="courbe"] .fx-cl.it{ font-family:var(--serif); font-style:italic; font-size:17px; letter-spacing:0; color:var(--bone); }
html[data-skin="courbe"] .fx-cl.st{ color:var(--steel); }
html[data-skin="courbe"] .fx-cl.cu{ color:var(--gold); }
html[data-skin="courbe"] .fx-ctitle{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
@media (max-width:760px){
  html[data-skin="courbe"] .fx-cl{ font-size:9px; }
  html[data-skin="courbe"] .fx-cl.big{ font-size:24px; } html[data-skin="courbe"] .fx-cl.mid{ font-size:16px; } html[data-skin="courbe"] .fx-cl.it{ font-size:13px; }
  html[data-skin="courbe"] .fx-ctitle{ font-size:8.5px; }
}

/* ====================================================================
   LA SOIE — beauté & coiffure
   Chevelure brillante sur nuit prune, cuivre rosé,
   Italiana + Cormorant italique + Jost.
   ==================================================================== */
html[data-skin="soie"]{ --g:clamp(24px,6vw,96px); }
html[data-skin="soie"] ::selection{ background:var(--bone); color:var(--ink); }
html[data-skin="soie"] .sh{ text-shadow:0 0 22px rgba(var(--ink-rgb),.95),0 0 6px rgba(var(--ink-rgb),.9); }
html[data-skin="soie"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.06; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .45 0 0 0 0 .45 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-skin="soie"] .logo{ font-family:var(--display); font-size:23px; letter-spacing:.06em; }
html[data-skin="soie"] .nav ul{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.02em; font-size:16px; }
html[data-skin="soie"] .btn{ border-radius:40px; font-family:var(--body); letter-spacing:.16em; font-size:11px; }
html[data-skin="soie"] .btn.gold{ background:var(--bone); color:var(--ink); }
html[data-skin="soie"] .btn.gold:hover{ background:var(--gold); transform:none; }
html[data-skin="soie"] .btn.ghost{ border-color:rgba(var(--bone-rgb),.35); }
html[data-skin="soie"] .uni-btn{ border-radius:40px; }
html[data-skin="soie"] .k{ font-family:var(--body); letter-spacing:.26em; color:var(--gold); }
html[data-skin="soie"] em.s{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold); }
html[data-skin="soie"] .hero h1{ font-size:clamp(56px,8.6vw,146px); line-height:.92; letter-spacing:-.01em; max-width:9ch; }
html[data-skin="soie"] .hsub{ font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.45; max-width:30ch; }
/* Chapitres */
html[data-skin="soie"] .ch .box{ gap:16px; max-width:460px; }
html[data-skin="soie"] .ch .num{ display:flex; align-items:baseline; gap:14px; font-family:var(--serif); font-style:italic; font-size:17px; letter-spacing:0; text-transform:none; color:var(--soft); }
html[data-skin="soie"] .ch .num i{ font-style:italic; color:var(--gold); }
html[data-skin="soie"] .ch.r .num{ justify-content:flex-end; }
html[data-skin="soie"] .ch .num b{ font-family:var(--display); font-weight:400; font-size:40px; color:var(--bone); margin:0; }
html[data-skin="soie"] .ch h2{ font-size:clamp(36px,4vw,64px); line-height:1; }
html[data-skin="soie"] .ch p{ font-size:15.5px; line-height:1.75; }
html[data-skin="soie"] .tags{ display:flex; flex-wrap:wrap; gap:8px; text-transform:none; letter-spacing:.02em; font-family:var(--body); font-size:13px; }
html[data-skin="soie"] .ch.r .tags{ justify-content:flex-end; }
html[data-skin="soie"] .tags span{ padding:7px 14px; border:1px solid rgba(var(--bone-rgb),.28); border-radius:40px; }
html[data-skin="soie"] .tags i{ display:none; }
html[data-skin="soie"] .link{ color:var(--gold); font-family:var(--serif); font-style:italic; font-size:17px; letter-spacing:0; text-transform:none; }
@media (max-width:760px){
  html[data-skin="soie"] .ch .box,html[data-skin="soie"] .ch.r .box{ background:rgba(var(--ink-rgb),.92); padding:22px 18px; border-radius:18px; }
  html[data-skin="soie"] .ch.r .num,html[data-skin="soie"] .ch.r .tags{ justify-content:flex-start; }
}
html[data-skin="soie"] .team h2{ font-size:clamp(36px,4.6vw,76px); line-height:1; }
html[data-skin="soie"] .cols div{ border-top:1px solid rgba(var(--bone-rgb),.3); }
html[data-skin="soie"] .cols b{ font-family:var(--display); color:var(--gold); }
html[data-skin="soie"] .cols h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:21px; }
/* Contact : étiquette de salon */
html[data-skin="soie"] .contact h2{ font-size:clamp(40px,5.4vw,92px); line-height:.98; }
html[data-skin="soie"] .seal{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:120px; height:120px; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold); box-shadow:inset 0 0 0 5px var(--ink),inset 0 0 0 6px rgba(var(--gold-rgb),.5); transform:rotate(-6deg); }
html[data-skin="soie"] .seal span:first-child{ font-family:var(--display); font-size:20px; letter-spacing:.06em; }
html[data-skin="soie"] .seal span:last-child{ font-family:var(--serif); font-style:italic; font-size:12.5px; }
html[data-skin="soie"] .mail{ font-family:var(--display); }
html[data-skin="soie"] footer{ font-family:var(--serif); font-style:italic; font-size:14px; letter-spacing:0; }
/* Devis */
html[data-skin="soie"] .dv h1{ font-size:clamp(42px,5.6vw,94px); line-height:.98; }
html[data-skin="soie"] .grp h2{ font-family:var(--display); }
html[data-skin="soie"] .grp header span{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--gold); }
html[data-skin="soie"] .opt .n{ font-family:var(--body); }
html[data-skin="soie"] .total{ border-radius:22px; }
html[data-skin="soie"] .total strong{ font-family:var(--display); }
html[data-skin="soie"] .dv-sug,html[data-skin="soie"] .seg span{ border-radius:40px; }
/* Annotations du croquis */
.fx-fl{ display:none; }
html[data-skin="soie"] .fx-fl{ display:block; position:fixed; left:0; top:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .6s;
  white-space:nowrap; font-family:var(--serif); font-style:italic; font-weight:500; font-size:19px; color:var(--bone); text-shadow:0 0 10px var(--ink),0 0 4px var(--ink); }
html[data-skin="soie"] .fx-fl.on{ opacity:.9; }
@media (max-width:760px){ html[data-skin="soie"] .fx-fl{ font-size:13px; } }

/* Nuancier (teinte de la section) */
.fx-shade{ display:none; }
html[data-skin="soie"] .fx-shade{ display:flex; align-items:center; gap:12px; position:fixed; left:0; top:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .6s;
  padding:8px 16px 8px 8px; border:1px solid rgba(var(--bone-rgb),.22); border-radius:40px; background:rgba(var(--ink-rgb),.55); backdrop-filter:blur(6px); white-space:nowrap; }
html[data-skin="soie"] .fx-shade.on{ opacity:1; }
html[data-skin="soie"] .fx-shade i{ width:26px; height:26px; border-radius:50%; box-shadow:inset 0 -6px 10px rgba(0,0,0,.35),inset 0 4px 8px rgba(255,255,255,.25); }
html[data-skin="soie"] .fx-shade b{ font-family:var(--display); font-weight:400; font-size:20px; color:var(--gold); }
html[data-skin="soie"] .fx-shade span{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:17px; color:var(--bone); }
@media (max-width:760px){ html[data-skin="soie"] .fx-shade{ display:none; } }

/* ====================================================================
   LE MAGAZINE — beauté & coiffure
   Numéro spécial de magazine : papier ivoire, noir d'encre, rouge
   à lèvres, Bodoni Moda + Jost + Cormorant italique. Pas d'effet 3D.
   ==================================================================== */
.mg-x{ display:none; }
html[data-skin="mag"]{ --g:clamp(20px,5.5vw,88px); }
html[data-skin="mag"] ::selection{ background:var(--gold); color:#fff; }
html[data-skin="mag"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .42 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-skin="mag"] .sh{ text-shadow:none; }
html[data-skin="mag"] .logo{ font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:.14em; text-transform:uppercase; }
html[data-skin="mag"] .nav ul{ font-family:var(--body); font-weight:500; font-size:11px; letter-spacing:.22em; text-transform:uppercase; }
html[data-skin="mag"] .btn{ border-radius:0; font-family:var(--body); font-weight:500; letter-spacing:.2em; font-size:11px; }
html[data-skin="mag"] .btn.gold{ background:var(--bone); color:var(--ink); }
html[data-skin="mag"] .btn.gold:hover{ background:var(--gold); color:#fff; transform:none; }
html[data-skin="mag"] .btn.ghost{ border-color:var(--bone); }
html[data-skin="mag"] .uni-btn{ border-radius:0; }
html[data-skin="mag"] .k{ font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
html[data-skin="mag"] em.s{ font-style:italic; color:var(--gold); }
html[data-skin="mag"] .hud{ font-family:var(--body); }

/* ---- Couverture ---- */
html[data-skin="mag"] .hero{ position:relative; justify-content:flex-end; gap:22px; padding-top:calc(90px + 18vw); }
html[data-skin="mag"] .mg-mast{ display:block; position:absolute; left:var(--g); right:var(--g); top:calc(78px + env(safe-area-inset-top,0px)); }
html[data-skin="mag"] .mg-mast b{ display:block; font-family:var(--display); font-weight:500; font-size:clamp(72px,17.5vw,300px); line-height:.78; letter-spacing:-.035em; text-transform:uppercase; color:var(--bone); text-align:center; }
html[data-skin="mag"] .mg-mast span{ display:inline-block; font-family:var(--body); font-weight:500; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--soft); margin-top:14px; }
html[data-skin="mag"] .mg-mast span:last-child{ float:right; }
html[data-skin="mag"] .mg-mast::after{ content:""; display:block; clear:both; border-bottom:1px solid var(--bone); padding-top:10px; }
html[data-skin="mag"] .hero .k{ order:-1; }
html[data-skin="mag"] .hero h1{ font-size:clamp(52px,9vw,150px); line-height:.9; letter-spacing:-.03em; font-weight:400; max-width:9ch; }
html[data-skin="mag"] .hsub{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.6vw,24px); line-height:1.4; max-width:30ch; color:var(--soft); }
html[data-skin="mag"] .mg-lines{ display:flex; flex-direction:column; position:absolute; right:var(--g); bottom:calc(150px + env(safe-area-inset-bottom,0px)); width:min(300px,26vw); }
html[data-skin="mag"] .mg-lines p{ margin:0; padding:12px 0; border-top:1px solid rgba(var(--bone-rgb),.25); font-family:var(--display); font-style:italic; font-size:clamp(17px,1.5vw,22px); line-height:1.15; color:var(--bone); }
html[data-skin="mag"] .mg-lines p b{ display:block; font-family:var(--body); font-style:normal; font-weight:600; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
html[data-skin="mag"] .mg-bar{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; position:absolute; right:var(--g); bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
html[data-skin="mag"] .mg-bar i{ display:block; width:118px; height:38px; background:repeating-linear-gradient(90deg,var(--bone) 0 2px,transparent 2px 4px,var(--bone) 4px 5px,transparent 5px 8px,var(--bone) 8px 11px,transparent 11px 12px,var(--bone) 12px 13px,transparent 13px 16px); }
html[data-skin="mag"] .mg-bar span{ font-family:var(--body); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }

/* ---- Chapitres = doubles pages ---- */
html[data-skin="mag"] .ch,html[data-skin="mag"] .ch.r{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:6vw; align-items:center; justify-content:stretch; text-align:left; padding:60px var(--g) 70px; }
html[data-skin="mag"] .ch.r .box{ order:2; align-items:flex-start; }
html[data-skin="mag"] .ch.r .mg-side{ order:1; }
html[data-skin="mag"] .mg-page{ display:flex; justify-content:space-between; position:absolute; left:var(--g); right:var(--g); bottom:40px; padding-top:10px; border-top:1px solid var(--bone);
  font-family:var(--body); font-weight:500; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--soft); }
html[data-skin="mag"] .mg-page span:first-child{ color:var(--gold); }
html[data-skin="mag"] .ch .box{ max-width:600px; gap:20px; }
html[data-skin="mag"] .ch .num{ display:flex; flex-direction:column; gap:6px; font-family:var(--serif); font-style:italic; font-size:19px; letter-spacing:0; text-transform:none; color:var(--soft); }
html[data-skin="mag"] .ch .num b{ font-family:var(--body); font-style:normal; font-weight:600; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin:0; }
html[data-skin="mag"] .ch h2{ font-size:clamp(40px,5.2vw,86px); line-height:.94; letter-spacing:-.03em; font-weight:400; }
html[data-skin="mag"] .ch p.sh{ max-width:none; columns:2 220px; column-gap:30px; font-size:15px; line-height:1.7; color:var(--soft); text-align:left; }
html[data-skin="mag"] .ch p.sh::first-letter{ float:left; font-family:var(--display); font-size:4.4em; line-height:.78; padding:.08em .1em 0 0; color:var(--gold); }
html[data-skin="mag"] .tags{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; width:100%; font-family:var(--body); font-weight:500; font-size:11px; letter-spacing:.16em; color:var(--bone); line-height:1.5; }
html[data-skin="mag"] .ch.r .tags{ text-align:left; }
html[data-skin="mag"] .tags span{ padding:9px 0; border-top:1px solid rgba(var(--bone-rgb),.2); }
html[data-skin="mag"] .tags i{ display:none; }
html[data-skin="mag"] .link{ font-family:var(--body); font-weight:600; letter-spacing:.22em; color:var(--bone); border-bottom:2px solid var(--gold); }
/* Nuanciers + citation */
html[data-skin="mag"] .mg-side{ display:block; position:relative; height:min(72vh,640px); }
html[data-skin="mag"] .mg-card{ position:absolute; margin:0; width:48%; aspect-ratio:3/4.2; background:#FBF8F4; padding:12px 12px 0; box-shadow:0 30px 60px -30px rgba(40,20,20,.45),0 2px 6px rgba(40,20,20,.08);
  display:flex; flex-direction:column; transition:transform 1.4s var(--ease); }
html[data-skin="mag"] .mg-card i{ display:block; flex:1; }
html[data-skin="mag"] .mg-card figcaption{ display:flex; flex-direction:column; gap:2px; padding:12px 2px 14px; }
html[data-skin="mag"] .mg-card figcaption b{ font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.2em; color:#161113; }
html[data-skin="mag"] .mg-card figcaption span{ font-family:var(--display); font-style:italic; font-size:18px; color:#161113; }
html[data-skin="mag"] .mg-card{ left:6%; top:0; transform:rotate(-5deg) translateY(30px); z-index:2; }
html[data-skin="mag"] .mg-card2{ left:auto; right:4%; top:10%; transform:rotate(4deg) translateY(50px); z-index:1; }
html[data-skin="mag"] .ch.in .mg-card{ transform:rotate(-3deg); } html[data-skin="mag"] .ch.in .mg-card2{ transform:rotate(5deg); }
html[data-skin="mag"] .mg-pull{ position:absolute; left:4%; right:0; bottom:0; margin:0; padding-left:22px; border-left:3px solid var(--gold);
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(22px,2.1vw,32px); line-height:1.2; color:var(--bone); z-index:3; }
/* L'édito, contact, devis */
html[data-skin="mag"] .team h2{ font-size:clamp(40px,5.4vw,90px); line-height:.95; letter-spacing:-.03em; font-weight:400; }
html[data-skin="mag"] .cols div{ border-top:1px solid var(--bone); }
html[data-skin="mag"] .cols b{ font-family:var(--display); font-weight:400; color:var(--gold); }
html[data-skin="mag"] .cols h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:21px; }
html[data-skin="mag"] .contact h2{ font-size:clamp(44px,6vw,104px); line-height:.94; letter-spacing:-.03em; font-weight:400; }
html[data-skin="mag"] .seal{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 20px; background:var(--gold); color:#fff; transform:rotate(-4deg);
  font-family:var(--body); font-weight:600; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; }
html[data-skin="mag"] .seal span:last-child{ font-family:var(--display); font-style:italic; font-weight:400; letter-spacing:0; text-transform:none; font-size:19px; }
html[data-skin="mag"] .mail{ font-family:var(--display); }
html[data-skin="mag"] footer{ font-family:var(--body); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
html[data-skin="mag"] .dv h1{ font-size:clamp(42px,5.6vw,96px); line-height:.95; letter-spacing:-.03em; font-weight:400; }
html[data-skin="mag"] .grp h2{ font-family:var(--display); font-weight:400; }
html[data-skin="mag"] .grp header span{ font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
html[data-skin="mag"] .total,html[data-skin="mag"] .dv-sug,html[data-skin="mag"] .seg span{ border-radius:0; }
html[data-skin="mag"] .total strong{ font-family:var(--display); font-weight:400; }
/* Mobile */
@media (max-width:900px){
  html[data-skin="mag"] .hero{ padding-top:calc(110px + 22vw); }
  html[data-skin="mag"] .mg-lines{ display:none; }
  html[data-skin="mag"] .mg-bar{ bottom:calc(30px + env(safe-area-inset-bottom,0px)); }
  html[data-skin="mag"] .mg-bar i{ width:80px; height:28px; }
  html[data-skin="mag"] .ch,html[data-skin="mag"] .ch.r{ grid-template-columns:1fr; gap:24px; min-height:auto; padding:70px var(--g) 70px; align-items:start; }
  html[data-skin="mag"] .ch.r .box{ order:1; } html[data-skin="mag"] .ch.r .mg-side{ order:2; }
  html[data-skin="mag"] .mg-side{ height:88vw; max-height:420px; }
  html[data-skin="mag"] .mg-card{ width:42%; }
  html[data-skin="mag"] .mg-page{ bottom:28px; font-size:9.5px; letter-spacing:.2em; }
  html[data-skin="mag"] .tags{ grid-template-columns:1fr; }
  html[data-skin="mag"] .ch p.sh{ columns:1; text-align:left; }
}

/* ====================================================================
   LE PAPIER KRAFT — commerce & boutique
   Emballage de concept-store : kraft, papier de soie, étiquettes
   suspendues à une ficelle, tampons rouges. Pas d'effet 3D.
   ==================================================================== */
html[data-skin="kraft"]{ --g:clamp(20px,5.5vw,88px); --tagp:#F4EDE1; }
html[data-skin="kraft"] body{ background-color:var(--ink);
  background-image:radial-gradient(120% 80% at 70% 20%,rgba(255,236,205,.35),transparent 60%),radial-gradient(90% 70% at 10% 90%,rgba(120,80,40,.18),transparent 70%); background-attachment:fixed; }
html[data-skin="kraft"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.55; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-skin="kraft"] ::selection{ background:var(--gold); color:#fff; }
html[data-skin="kraft"] .sh{ text-shadow:none; }
html[data-skin="kraft"] .logo{ font-family:var(--display); font-style:italic; font-weight:500; font-size:22px; }
html[data-skin="kraft"] .nav ul{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
html[data-skin="kraft"] .btn{ border-radius:3px; font-family:var(--mono); letter-spacing:.14em; font-size:11px; }
html[data-skin="kraft"] .btn.gold{ background:var(--bone); color:var(--tagp); }
html[data-skin="kraft"] .btn.gold:hover{ background:var(--gold); transform:none; }
html[data-skin="kraft"] .btn.ghost{ border-color:rgba(var(--bone-rgb),.55); }
html[data-skin="kraft"] .uni-btn{ border-radius:3px; background:rgba(var(--ink-rgb),.8); }
html[data-skin="kraft"] .k{ font-family:var(--mono); letter-spacing:.2em; color:var(--gold); }
html[data-skin="kraft"] em.s{ font-style:italic; font-weight:400; color:var(--gold); }
html[data-skin="kraft"] .hud{ color:var(--soft); }
/* Accueil */
html[data-skin="kraft"] .hero{ position:relative; }
html[data-skin="kraft"] .hero h1{ font-size:clamp(54px,8.4vw,140px); line-height:.94; letter-spacing:-.03em; font-weight:400; max-width:9.5ch; font-variation-settings:"opsz" 144,"SOFT" 100; }
html[data-skin="kraft"] .hsub{ font-size:17px; line-height:1.6; max-width:38ch; color:var(--soft); }
/* Chapitres : texte + étiquette */
html[data-skin="kraft"] .ch,html[data-skin="kraft"] .ch.r{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5vw; align-items:center; justify-content:stretch; text-align:left; overflow:hidden; }
html[data-skin="kraft"] .ch.r .box{ order:2; align-items:flex-start; }
html[data-skin="kraft"] .ch.r .kr-side{ order:1; }
html[data-skin="kraft"] .ch .box{ max-width:540px; gap:18px; }
html[data-skin="kraft"] .ch .num{ display:flex; align-items:baseline; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }
html[data-skin="kraft"] .ch .num b{ font-family:var(--display); font-style:italic; font-weight:400; font-size:28px; letter-spacing:0; text-transform:none; color:var(--gold); margin:0; }
html[data-skin="kraft"] .ch h2{ font-size:clamp(38px,4.6vw,76px); line-height:.98; letter-spacing:-.025em; font-weight:400; font-variation-settings:"opsz" 144,"SOFT" 100; }
html[data-skin="kraft"] .ch p.sh{ font-size:16px; line-height:1.7; color:var(--soft); }
html[data-skin="kraft"] .ch .tags{ display:none; }
html[data-skin="kraft"] .link{ font-family:var(--mono); color:var(--bone); border-bottom:2px solid var(--gold); }
/* Étiquette suspendue */
.kr-side{ display:none; }
html[data-skin="kraft"] .kr-side{ display:block; position:relative; height:min(78vh,700px); }
html[data-skin="kraft"] .kr-hero{ position:absolute; right:calc(var(--g) + 2vw); top:0; width:min(32vw,440px); height:min(88vh,760px); }
html[data-skin="kraft"] .kr-hang{ position:absolute; left:50%; top:0; width:min(340px,72%); margin-left:calc(min(340px,72%) / -2); transform-origin:50% 0; filter:drop-shadow(0 22px 22px rgba(60,35,15,.28)) drop-shadow(0 2px 3px rgba(60,35,15,.18)); z-index:2;
  transform:rotate(-18deg) translateY(-40px); opacity:0; transition:opacity .8s; }
html[data-skin="kraft"] .ch.in .kr-hang,html[data-skin="kraft"] .kr-hero .kr-hang{ opacity:1; animation:kr-drop 2.2s cubic-bezier(.3,.7,.3,1) both, kr-sway 6s ease-in-out 2.2s infinite; }
html[data-skin="kraft"] .ch.r .kr-hang{ animation-name:kr-drop-r, kr-sway; }
@keyframes kr-drop{ 0%{ transform:rotate(-18deg) translateY(-40px); } 35%{ transform:rotate(9deg) translateY(0); } 60%{ transform:rotate(-5deg); } 80%{ transform:rotate(2.5deg); } 100%{ transform:rotate(-1deg); } }
@keyframes kr-drop-r{ 0%{ transform:rotate(18deg) translateY(-40px); } 35%{ transform:rotate(-9deg) translateY(0); } 60%{ transform:rotate(5deg); } 80%{ transform:rotate(-2.5deg); } 100%{ transform:rotate(1deg); } }
@keyframes kr-sway{ 0%,100%{ transform:rotate(-1deg); } 50%{ transform:rotate(1.6deg); } }
html[data-skin="kraft"] .kr-string{ display:block; width:2px; height:clamp(90px,18vh,190px); margin:0 auto; background:repeating-linear-gradient(170deg,#F2E9D8 0 3px,#CDBB9C 3px 5px); box-shadow:0 0 1px rgba(60,35,15,.4); }
html[data-skin="kraft"] .kr-tag{ position:relative; margin-top:-6px; background:var(--tagp); color:#2A1E16; padding:58px 28px 24px; display:flex; flex-direction:column; gap:12px;
  clip-path:polygon(22% 0,78% 0,100% 13%,100% 100%,0 100%,0 13%);
  background-image:linear-gradient(180deg,rgba(255,255,255,.5),transparent 40%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-skin="kraft"] .kr-hole{ position:absolute; left:50%; top:16px; width:20px; height:20px; margin-left:-10px; border-radius:50%; background:radial-gradient(circle,#6b5238 0 5px,#C9A45C 5.5px 8px,#8A6A34 8.5px 9.5px,transparent 10px); }
html[data-skin="kraft"] .kr-no{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
html[data-skin="kraft"] .kr-word{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(30px,2.8vw,42px); line-height:1; letter-spacing:-.02em; padding-bottom:12px; border-bottom:1px dashed rgba(42,30,22,.35); }
html[data-skin="kraft"] .kr-tag ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.02em; }
html[data-skin="kraft"] .kr-tag li{ display:flex; align-items:baseline; gap:8px; }
html[data-skin="kraft"] .kr-tag li::after{ content:"✓"; order:3; color:var(--gold); font-weight:500; }
html[data-skin="kraft"] .kr-tag li::before{ content:""; order:2; flex:1; border-bottom:1px dotted rgba(42,30,22,.4); transform:translateY(-3px); }
html[data-skin="kraft"] .kr-note{ font-family:"Caveat",cursive; font-weight:600; font-size:27px; line-height:1; color:#1F3A5F; transform:rotate(-3deg); margin-top:4px; }
html[data-skin="kraft"] .kr-code{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#7C6450; padding-top:10px; border-top:1px solid rgba(42,30,22,.18); }
/* Tampon */
html[data-skin="kraft"] .kr-stamp{ position:absolute; z-index:3; left:calc(50% + 90px); top:calc(clamp(90px,18vh,190px) + 330px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:150px; height:150px; border-radius:50%; border:3px solid var(--gold); box-shadow:inset 0 0 0 5px transparent,inset 0 0 0 7px var(--gold); color:var(--gold); mix-blend-mode:multiply;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform:rotate(-14deg) scale(1.6); opacity:0; }
html[data-skin="kraft"] .ch.in .kr-stamp,html[data-skin="kraft"] .kr-hero .kr-stamp{ animation:kr-stamp .45s cubic-bezier(.2,1.5,.4,1) 1.1s both; }
@keyframes kr-stamp{ 0%{ transform:rotate(-14deg) scale(1.7); opacity:0; } 60%{ opacity:.95; } 100%{ transform:rotate(-14deg) scale(1); opacity:.9; } }
html[data-skin="kraft"] .kr-stamp span{ font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:.06em; text-transform:uppercase; }
html[data-skin="kraft"] .kr-stamp small{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
/* Papier de soie */
html[data-skin="kraft"] .kr-tissue{ position:absolute; left:50%; top:calc(clamp(90px,18vh,190px) + 30px); width:340px; height:360px; margin-left:-190px; z-index:1;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,248,238,.25) 45%,rgba(255,255,255,.5) 60%,rgba(255,250,242,.2));
  clip-path:polygon(4% 10%,30% 0,62% 6%,96% 2%,100% 40%,94% 72%,100% 100%,58% 94%,26% 100%,0 84%,6% 50%); transform:rotate(8deg); filter:blur(.3px); }
/* Engagements, contact, devis */
html[data-skin="kraft"] .team h2{ font-size:clamp(38px,4.8vw,80px); line-height:.98; letter-spacing:-.025em; font-weight:400; }
html[data-skin="kraft"] .cols div{ border-top:1px dashed rgba(var(--bone-rgb),.45); }
html[data-skin="kraft"] .cols b{ font-family:var(--display); font-style:italic; font-weight:400; color:var(--gold); }
html[data-skin="kraft"] .cols h3{ font-family:var(--display); font-weight:500; font-size:21px; }
html[data-skin="kraft"] .contact h2{ font-size:clamp(42px,5.6vw,96px); line-height:.96; letter-spacing:-.03em; font-weight:400; }
html[data-skin="kraft"] .seal{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:118px; height:118px; border-radius:50%; border:3px solid var(--gold); color:var(--gold); transform:rotate(-10deg); mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 6px transparent,inset 0 0 0 8px var(--gold); }
html[data-skin="kraft"] .seal span:first-child{ font-family:var(--display); font-weight:600; font-size:17px; text-transform:uppercase; letter-spacing:.06em; }
html[data-skin="kraft"] .seal span:last-child{ font-family:"Caveat",cursive; font-size:21px; }
html[data-skin="kraft"] .mail{ font-family:var(--display); font-style:italic; }
html[data-skin="kraft"] footer{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; }
html[data-skin="kraft"] .dv h1{ font-size:clamp(40px,5.4vw,90px); line-height:.98; letter-spacing:-.025em; font-weight:400; }
html[data-skin="kraft"] .grp h2{ font-family:var(--display); font-weight:400; }
html[data-skin="kraft"] .grp header span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--gold); }
html[data-skin="kraft"] .total,html[data-skin="kraft"] .dv-sug,html[data-skin="kraft"] .seg span{ border-radius:3px; }
html[data-skin="kraft"] .total{ background:rgba(var(--ink-rgb),.95); }
html[data-skin="kraft"] .total strong{ font-family:var(--display); font-weight:400; }
/* Mobile */
@media (max-width:900px){
  html[data-skin="kraft"] .kr-hero{ right:50%; margin-right:-150px; top:50px; width:300px; height:420px; transform:scale(.78); transform-origin:50% 0; }
  html[data-skin="kraft"] .hero{ padding-top:380px; }
  html[data-skin="kraft"] .kr-hero .kr-tissue{ display:none; }
  html[data-skin="kraft"] .kr-hero .kr-stamp{ top:120px; left:calc(50% + 70px); }
  html[data-skin="kraft"] .ch,html[data-skin="kraft"] .ch.r{ grid-template-columns:1fr; gap:20px; min-height:auto; padding:110px var(--g) 90px; align-items:start; }
  html[data-skin="kraft"] .ch.r .box{ order:1; } html[data-skin="kraft"] .ch.r .kr-side{ order:2; }
  html[data-skin="kraft"] .kr-side{ height:560px; }
  html[data-skin="kraft"] .kr-stamp{ width:118px; height:118px; left:calc(50% + 40px); top:calc(clamp(90px,18vh,190px) + 260px); }
  html[data-skin="kraft"] .kr-stamp span{ font-size:20px; }
}

/* ====================================================================
   LA BOUTIQUE — commerce & boutique
   Le site présenté comme une boutique en ligne : bandeau promo,
   sélection, fiches produit (galerie, prix, options, « Ajouter au
   devis »), maquettes d'écrans en HTML/CSS. Pas d'effet 3D.
   ==================================================================== */
html[data-skin="shop"]{ --g:clamp(18px,5vw,80px); --card:#FFFFFF; --line:rgba(28,27,24,.1); }
html[data-skin="shop"] ::selection{ background:var(--gold); color:#fff; }
html[data-skin="shop"] .sh{ text-shadow:none; }
html[data-skin="shop"] .logo{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.01em; }
html[data-skin="shop"] .nav ul{ font-family:var(--body); font-weight:500; font-size:13.5px; letter-spacing:0; text-transform:none; }
html[data-skin="shop"] .btn{ border-radius:999px; font-family:var(--body); font-weight:600; letter-spacing:.01em; text-transform:none; font-size:14px; padding-inline:22px; }
html[data-skin="shop"] .btn.gold{ background:var(--gold); color:#fff; }
html[data-skin="shop"] .btn.gold:hover{ background:var(--gold-2); transform:none; }
html[data-skin="shop"] .btn.ghost{ border-color:rgba(28,27,24,.25); background:#fff; }
html[data-skin="shop"] .uni-btn{ border-radius:999px; background:#fff; }
html[data-skin="shop"] .k{ font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.14em; color:var(--steel); }
html[data-skin="shop"] em.s{ font-style:italic; font-weight:400; color:var(--gold); }
html[data-skin="shop"] .hud{ color:var(--mute); }
/* Bandeau promo */
.sp-promo,.sp-feat,.sp-gal,.sp-name,.sp-price,.sp-trust{ display:none; }
html[data-skin="shop"] .sp-promo{ display:block; position:absolute; left:0; right:0; top:calc(70px + env(safe-area-inset-top,0px)); overflow:hidden; background:var(--bone); color:#F6F3EE; font-size:12.5px; font-weight:500; padding:9px 0; }
html[data-skin="shop"] .sp-promo div{ display:flex; gap:56px; width:max-content; animation:sp-marq 38s linear infinite; }
html[data-skin="shop"] .sp-promo span::before{ content:"●"; color:var(--steel); font-size:8px; margin-right:14px; vertical-align:2px; }
@keyframes sp-marq{ to{ transform:translateX(-50%); } }
/* Accueil */
html[data-skin="shop"] .hero{ position:relative; padding-top:170px; padding-right:calc(var(--g) + 50vw); }
html[data-skin="shop"] .hero h1{ font-size:clamp(50px,6.8vw,112px); line-height:.96; letter-spacing:-.035em; font-weight:400; font-variation-settings:"opsz" 144; }
html[data-skin="shop"] .hsub{ font-size:17px; line-height:1.6; max-width:40ch; color:var(--soft); }
html[data-skin="shop"] .sp-feat{ display:block; position:absolute; right:var(--g); bottom:calc(110px + env(safe-area-inset-bottom,0px)); width:min(46vw,760px); }
html[data-skin="shop"] .sp-feath{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-weight:600; font-size:15px; }
html[data-skin="shop"] .sp-feath u{ font-weight:500; font-size:13px; color:var(--soft); }
html[data-skin="shop"] .sp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
html[data-skin="shop"] .sp-pc{ display:flex; flex-direction:column; gap:6px; }
html[data-skin="shop"] .sp-pc b{ font-weight:600; font-size:14px; margin-top:6px; }
html[data-skin="shop"] .sp-pc em{ font-style:normal; font-size:13.5px; color:var(--soft); }
html[data-skin="shop"] .sp-pimg{ position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:8px; }
html[data-skin="shop"] .sp-pimg .sp-m,html[data-skin="shop"] .sp-main .sp-m{ position:absolute; left:50%; top:50%; flex:none; transform:translate(-50%,-50%) scale(var(--pk,.55)); }
html[data-skin="shop"] .sp-main{ --pk:1; }
@media (max-width:1300px){ html[data-skin="shop"] .sp-pimg{ --pk:.45; } }
html[data-skin="shop"] .sp-bg0{ background:#E9E1D5; } html[data-skin="shop"] .sp-bg1{ background:#DCE4DA; } html[data-skin="shop"] .sp-bg2{ background:#EADBD2; } html[data-skin="shop"] .sp-bg3{ background:#DDE2E8; } html[data-skin="shop"] .sp-bg4{ background:#EFE3CF; }
/* Fiches produit */
html[data-skin="shop"] .ch,html[data-skin="shop"] .ch.r{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(28px,5vw,80px); align-items:center; justify-content:stretch; text-align:left; padding:56px var(--g) 50px; }
html[data-skin="shop"] .ch .box,html[data-skin="shop"] .ch.r .box{ order:2; align-items:flex-start; max-width:520px; gap:16px; }
html[data-skin="shop"] .sp-gal{ display:block; order:1; }
html[data-skin="shop"] .sp-main{ position:relative; aspect-ratio:1/1; border-radius:22px; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:clamp(7px,.8vw,12.5px); }
html[data-skin="shop"] .sp-flag{ position:absolute; left:18px; top:18px; background:#fff; color:var(--bone); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
html[data-skin="shop"] .sp-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
html[data-skin="shop"] .sp-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(28,27,24,.2); }
html[data-skin="shop"] .sp-dots i.on{ background:var(--bone); width:22px; border-radius:6px; }
html[data-skin="shop"] .ch .num{ font-family:var(--body); font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--mute); }
html[data-skin="shop"] .ch .num i{ font-style:normal; padding:0 6px; opacity:.6; }
html[data-skin="shop"] .ch .num b{ color:var(--soft); font-weight:500; margin:0; }
html[data-skin="shop"] .sp-name{ display:block; font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }
html[data-skin="shop"] .ch h2{ font-size:clamp(34px,3.6vw,56px); line-height:1.02; letter-spacing:-.03em; font-weight:400; font-variation-settings:"opsz" 144; }
html[data-skin="shop"] .sp-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:4px 0 14px; border-bottom:1px solid var(--line); width:100%; }
html[data-skin="shop"] .sp-price b{ font-family:var(--display); font-weight:500; font-size:30px; letter-spacing:-.02em; }
html[data-skin="shop"] .sp-price b small{ font-family:var(--body); font-size:15px; font-weight:500; }
html[data-skin="shop"] .sp-price > small{ font-size:15px; color:var(--soft); }
html[data-skin="shop"] .sp-stock{ flex-basis:100%; font-size:13px; color:var(--gold); font-weight:500; }
html[data-skin="shop"] .sp-stock::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#3DAA6D; margin-right:8px; vertical-align:1px; }
html[data-skin="shop"] .ch p.sh{ font-size:15.5px; line-height:1.65; color:var(--soft); }
html[data-skin="shop"] .tags{ display:flex; flex-wrap:wrap; gap:8px; font-family:var(--body); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--bone); line-height:1.3; }
html[data-skin="shop"] .ch.r .tags{ justify-content:flex-start; }
html[data-skin="shop"] .tags::before{ content:"Inclus"; flex-basis:100%; font-size:12.5px; color:var(--mute); font-weight:500; }
html[data-skin="shop"] .tags span{ padding:8px 14px; border:1px solid rgba(28,27,24,.2); border-radius:10px; background:#fff; }
html[data-skin="shop"] .tags span:first-of-type{ border-color:var(--bone); box-shadow:inset 0 0 0 1px var(--bone); }
html[data-skin="shop"] .tags i{ display:none; }
html[data-skin="shop"] .link{ align-self:stretch; justify-content:center; gap:10px; padding:16px 22px; border:0; border-radius:999px; background:var(--gold); color:#fff; font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:0; text-transform:none; }
html[data-skin="shop"] .link:hover{ background:var(--gold-2); gap:14px; }
html[data-skin="shop"] .link::before{ content:""; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1.2 12.1a1 1 0 0 1-1 .9H8.2a1 1 0 0 1-1-.9z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1.2 12.1a1 1 0 0 1-1 .9H8.2a1 1 0 0 1-1-.9z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center/contain no-repeat; }
html[data-skin="shop"] .sp-trust{ display:flex; flex-direction:column; gap:8px; width:100%; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--soft); }
html[data-skin="shop"] .sp-trust span::before{ content:"✓"; color:var(--gold); font-weight:700; margin-right:10px; }
/* Engagements, contact, devis */
html[data-skin="shop"] .team h2,html[data-skin="shop"] .contact h2{ font-weight:400; letter-spacing:-.03em; line-height:1; }
html[data-skin="shop"] .cols{ gap:14px; }
html[data-skin="shop"] .cols div{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
html[data-skin="shop"] .cols b{ font-family:var(--display); font-weight:500; color:var(--gold); }
html[data-skin="shop"] .cols h3{ font-weight:600; font-size:16px; }
html[data-skin="shop"] .contact{ background:#EDE7DE; border-radius:28px; margin:0 var(--g) 60px; }
html[data-skin="shop"] .seal{ display:flex; gap:10px; align-items:center; padding:7px 14px 7px 7px; border-radius:999px; background:#fff; font-size:13px; font-weight:500; }
html[data-skin="shop"] .seal span:first-child{ background:var(--steel); color:#fff; border-radius:999px; padding:3px 10px; font-weight:600; font-size:12px; }
html[data-skin="shop"] .mail{ font-family:var(--display); }
html[data-skin="shop"] .dv h1{ font-weight:400; letter-spacing:-.03em; }
html[data-skin="shop"] .grp h2{ font-family:var(--display); font-weight:500; }
html[data-skin="shop"] .opt{ border-radius:14px; }
html[data-skin="shop"] .total{ border-radius:20px; background:#fff; }
html[data-skin="shop"] .total strong{ font-family:var(--display); font-weight:500; }
html[data-skin="shop"] .dv-sug,html[data-skin="shop"] .seg span{ border-radius:999px; }

/* ---- Maquettes d'écrans (tailles en em) ---- */
html[data-skin="shop"] .sp-m{ position:relative; background:#fff; color:#1C1B18; font-family:var(--body); line-height:1.25; box-shadow:0 2.4em 5em -2em rgba(40,30,20,.35),0 .2em .6em rgba(40,30,20,.08); }
html[data-skin="shop"] .sp-m b{ font-weight:600; } html[data-skin="shop"] .sp-m small{ font-size:.85em; color:#7d786f; } html[data-skin="shop"] .sp-m em{ font-style:normal; }
/* produits factices */
html[data-skin="shop"] .sp-p1,html[data-skin="shop"] .sp-p2,html[data-skin="shop"] .sp-p3{ display:block; position:relative; border-radius:.6em; aspect-ratio:1; overflow:hidden; }
html[data-skin="shop"] .sp-p1{ background:#E6D3BF; } html[data-skin="shop"] .sp-p1::before{ content:""; position:absolute; left:34%; right:34%; bottom:16%; top:26%; background:#B86F4E; border-radius:40% 40% 30% 30% / 30% 30% 20% 20%; box-shadow:inset -.6em 0 0 rgba(0,0,0,.08); }
html[data-skin="shop"] .sp-p1::after{ content:""; position:absolute; left:44%; right:44%; top:18%; height:12%; background:#B86F4E; border-radius:.2em; }
html[data-skin="shop"] .sp-p2{ background:#DCE3D6; } html[data-skin="shop"] .sp-p2::before{ content:""; position:absolute; left:30%; right:30%; bottom:18%; top:38%; background:#F4EFE6; border-radius:.5em; box-shadow:inset 0 -2.2em 0 #58705C; }
html[data-skin="shop"] .sp-p2::after{ content:""; position:absolute; left:48.5%; top:26%; width:3%; height:12%; background:#2c2b27; border-radius:1em; box-shadow:0 -.6em .5em .1em rgba(255,190,90,.8); }
html[data-skin="shop"] .sp-p3{ background:#E2DDD2; } html[data-skin="shop"] .sp-p3::before{ content:""; position:absolute; left:18%; right:18%; top:30%; bottom:22%; border-radius:.5em; background:repeating-linear-gradient(180deg,#7E957F 0 18%,#6C826D 18% 20%); box-shadow:0 .5em 0 -.1em #6C826D; }
/* navigateur */
html[data-skin="shop"] .sp-browser{ width:44em; border-radius:1em; overflow:hidden; }
html[data-skin="shop"] .sp-bar{ display:flex; align-items:center; gap:.5em; padding:.8em 1em; background:#F1EEE9; }
html[data-skin="shop"] .sp-bar i{ width:.8em; height:.8em; border-radius:50%; background:#D9D4CC; }
html[data-skin="shop"] .sp-bar span{ margin-left:1em; flex:1; background:#fff; border-radius:1em; padding:.35em 1em; font-size:.9em; color:#8a857b; }
html[data-skin="shop"] .sp-scr{ padding:1.4em; display:flex; flex-direction:column; gap:1.2em; }
html[data-skin="shop"] .sp-nav{ display:flex; gap:1.6em; align-items:center; font-size:.95em; color:#6d685f; }
html[data-skin="shop"] .sp-nav b{ font-family:var(--display); font-size:1.3em; color:#1C1B18; margin-right:auto; }
html[data-skin="shop"] .sp-nav em{ background:#1C1B18; color:#fff; border-radius:1em; padding:.3em .9em; }
html[data-skin="shop"] .sp-hb{ display:flex; justify-content:space-between; align-items:center; background:#EFE6DA; border-radius:.9em; padding:1.8em 2em; }
html[data-skin="shop"] .sp-hb strong{ display:block; font-family:var(--display); font-weight:400; font-size:2.2em; line-height:1.02; letter-spacing:-.02em; margin:.3em 0 .6em; }
html[data-skin="shop"] .sp-hb u{ text-decoration:none; background:#2E5A45; color:#fff; border-radius:1em; padding:.45em 1.1em; font-size:.9em; }
html[data-skin="shop"] .sp-vase{ width:7em; height:9em; background:#B86F4E; border-radius:45% 45% 30% 30% / 35% 35% 22% 22%; box-shadow:inset -1.4em 0 0 rgba(0,0,0,.08); }
html[data-skin="shop"] .sp-grid,html[data-skin="shop"] .sp-shop{ display:grid; grid-template-columns:repeat(3,1fr); gap:1em; }
html[data-skin="shop"] .sp-grid div,html[data-skin="shop"] .sp-shop div{ display:flex; flex-direction:column; gap:.3em; font-size:.95em; }
html[data-skin="shop"] .sp-grid em,html[data-skin="shop"] .sp-shop em{ color:#6d685f; }
/* téléphone */
html[data-skin="shop"] .sp-phone{ width:24em; height:46em; border-radius:3.2em; padding:1em; background:#1C1B18; }
html[data-skin="shop"] .sp-phone .sp-notch{ position:absolute; left:50%; top:1.5em; width:7em; height:1.6em; margin-left:-3.5em; background:#1C1B18; border-radius:1em; z-index:2; }
html[data-skin="shop"] .sp-phone .sp-scr{ height:100%; background:#F7F4EF; border-radius:2.4em; padding:4em 1.6em 1.4em; gap:1em; }
html[data-skin="shop"] .sp-phone strong{ font-family:var(--display); font-weight:500; font-size:2em; letter-spacing:-.02em; margin-top:-.4em; }
html[data-skin="shop"] .sp-card{ background:#2E5A45; color:#fff; border-radius:1.2em; padding:1.3em; display:flex; flex-direction:column; gap:.5em; }
html[data-skin="shop"] .sp-card b{ font-family:var(--display); font-size:2.2em; font-weight:500; }
html[data-skin="shop"] .sp-card small{ color:rgba(255,255,255,.75); }
html[data-skin="shop"] .sp-card i,html[data-skin="shop"] .sp-order i{ display:block; height:.45em; border-radius:1em; background:rgba(255,255,255,.25); overflow:hidden; }
html[data-skin="shop"] .sp-card i u,html[data-skin="shop"] .sp-order i u{ display:block; height:100%; background:#F1D9A8; }
html[data-skin="shop"] .sp-order{ background:#fff; border-radius:1.2em; padding:1.1em 1.3em; display:flex; flex-direction:column; gap:.45em; }
html[data-skin="shop"] .sp-order span{ color:#7d786f; font-size:.9em; } html[data-skin="shop"] .sp-order i{ background:#ECE7DF; } html[data-skin="shop"] .sp-order i u{ background:#C9533A; }
html[data-skin="shop"] .sp-new{ display:flex; gap:1em; align-items:center; background:#fff; border-radius:1.2em; padding:.8em; }
html[data-skin="shop"] .sp-new span{ width:5em; flex:none; }
html[data-skin="shop"] .sp-new div{ display:flex; flex-direction:column; }
html[data-skin="shop"] .sp-tab{ margin-top:auto; display:flex; justify-content:space-around; padding-top:1em; border-top:1px solid #E6E1D8; }
html[data-skin="shop"] .sp-tab i{ width:1.4em; height:1.4em; border-radius:.4em; background:#D7D1C7; } html[data-skin="shop"] .sp-tab i:first-child{ background:#1C1B18; }
/* discussion */
html[data-skin="shop"] .sp-chatw{ width:34em; border-radius:1.6em; overflow:hidden; }
html[data-skin="shop"] .sp-chead{ display:flex; gap:.9em; align-items:center; padding:1.2em 1.4em; background:#2E5A45; color:#fff; }
html[data-skin="shop"] .sp-chead i{ width:2.6em; height:2.6em; border-radius:50%; background:#F1D9A8; }
html[data-skin="shop"] .sp-chead div{ display:flex; flex-direction:column; } html[data-skin="shop"] .sp-chead small{ color:rgba(255,255,255,.75); }
html[data-skin="shop"] .sp-chatw .sp-scr{ background:#F7F4EF; gap:.8em; }
html[data-skin="shop"] .sp-chatw p{ margin:0; max-width:82%; padding:.8em 1.1em; border-radius:1.2em 1.2em 1.2em .3em; background:#fff; font-size:1.05em; line-height:1.35; }
html[data-skin="shop"] .sp-chatw p.me{ align-self:flex-end; background:#1C1B18; color:#fff; border-radius:1.2em 1.2em .3em 1.2em; }
html[data-skin="shop"] .sp-chips{ display:flex; gap:.6em; } html[data-skin="shop"] .sp-chips span{ border:1px solid #2E5A45; color:#2E5A45; border-radius:1em; padding:.4em 1em; font-size:.95em; }
/* Google */
html[data-skin="shop"] .sp-google{ width:40em; border-radius:1.4em; padding:1.4em; }
html[data-skin="shop"] .sp-search{ display:flex; align-items:center; gap:.8em; border:1px solid #E1DCD3; border-radius:2em; padding:.8em 1.2em; font-size:1.05em; }
html[data-skin="shop"] .sp-search i{ width:1em; height:1em; border:2px solid #7d786f; border-radius:50%; }
html[data-skin="shop"] .sp-google .sp-scr{ padding:1.2em 0 0; }
html[data-skin="shop"] .sp-local{ display:flex; gap:1.2em; border:1px solid #E6E1D8; border-radius:1em; padding:1em; }
html[data-skin="shop"] .sp-local > div:last-child{ display:flex; flex-direction:column; gap:.3em; }
html[data-skin="shop"] .sp-local b{ font-size:1.25em; } html[data-skin="shop"] .sp-local .ok{ color:#2E8A57; }
html[data-skin="shop"] .sp-map{ position:relative; width:8em; flex:none; border-radius:.7em; background:linear-gradient(90deg,transparent 45%,#fff 45% 52%,transparent 52%),linear-gradient(0deg,transparent 60%,#fff 60% 66%,transparent 66%),#DCE6DA; }
html[data-skin="shop"] .sp-map i{ position:absolute; left:42%; top:30%; width:1.4em; height:1.4em; background:#C9533A; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
html[data-skin="shop"] .sp-btns{ display:flex; gap:.5em; margin-top:.4em; } html[data-skin="shop"] .sp-btns span{ border:1px solid #D9D4CC; border-radius:1em; padding:.3em .8em; font-size:.9em; color:#2E5A45; }
html[data-skin="shop"] .sp-lbl{ font-weight:600; color:#1C1B18 !important; }
/* Instagram */
html[data-skin="shop"] .sp-insta{ width:30em; border-radius:1.4em; overflow:hidden; }
html[data-skin="shop"] .sp-ihead{ display:flex; gap:.8em; align-items:center; padding:1em 1.2em; }
html[data-skin="shop"] .sp-ihead i{ width:2.4em; height:2.4em; border-radius:50%; background:conic-gradient(#C9533A,#E9B454,#2E5A45,#C9533A); padding:.2em; }
html[data-skin="shop"] .sp-ihead div{ display:flex; flex-direction:column; }
html[data-skin="shop"] .sp-ipic{ position:relative; background:#E2DDD2; aspect-ratio:1; }
html[data-skin="shop"] .sp-ipic .sp-p3{ position:absolute; inset:0; border-radius:0; }
html[data-skin="shop"] .sp-ipic .sm{ position:absolute; right:8%; bottom:8%; width:28%; border-radius:.8em; box-shadow:0 .6em 1.4em rgba(0,0,0,.15); }
html[data-skin="shop"] .sp-icta{ display:flex; justify-content:space-between; align-items:center; padding:.9em 1.2em; background:#2E5A45; color:#fff; font-weight:600; }
html[data-skin="shop"] .sp-icap{ padding:1em 1.2em 1.3em; font-size:1em; line-height:1.4; }
/* Mobile */
@media (max-width:900px){
  html[data-skin="shop"] .hero{ padding-right:var(--g); padding-top:150px; justify-content:flex-start; gap:18px; }
  html[data-skin="shop"] .sp-promo{ top:calc(62px + env(safe-area-inset-top,0px)); font-size:11.5px; }
  html[data-skin="shop"] .sp-feat{ position:static; width:auto; margin-top:10px; }
  html[data-skin="shop"] .sp-cards{ grid-template-columns:repeat(3,62%); overflow-x:auto; scroll-snap-type:x mandatory; margin-right:calc(var(--g) * -1); padding-right:var(--g); }
  html[data-skin="shop"] .sp-pc{ scroll-snap-align:start; } html[data-skin="shop"] .sp-pimg{ --pk:.55; }
  html[data-skin="shop"] .ch,html[data-skin="shop"] .ch.r{ grid-template-columns:1fr; min-height:auto; padding:56px var(--g) 40px; gap:20px; align-items:start; }
  html[data-skin="shop"] .sp-main{ aspect-ratio:4/3; }
  html[data-skin="shop"] .sp-main{ font-size:10px; --pk:.7; }
  html[data-skin="shop"] .contact{ margin:0 12px 40px; }
}

/* ====================================================================
   PALETTE DE COULEURS (tous les univers sauf Orivance)
   ==================================================================== */
.pal-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:99px; border:1px solid rgba(var(--bone-rgb),.25); background:rgba(var(--ink-rgb),.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--bone); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:border-color .3s; }
.pal-btn:hover,.pal-btn[aria-expanded="true"]{ border-color:var(--bone); }
.pal-btn[hidden]{ display:none; }
.pal-btn i{ width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 1px rgba(var(--bone-rgb),.3); }
@media (max-width:760px){ .pal-btn span{ display:none; } .pal-btn{ padding:9px; } }
.pal-pop{ position:fixed; z-index:60; top:calc(72px + env(safe-area-inset-top,0px)); right:clamp(12px,3vw,40px); width:min(340px,calc(100vw - 24px));
  background:var(--ink); color:var(--bone); border:1px solid rgba(var(--bone-rgb),.18); border-radius:18px; padding:16px; box-shadow:0 30px 70px -20px rgba(0,0,0,.45);
  font-family:var(--body); animation:pal-in .25s ease; }
.pal-pop[hidden]{ display:none; }
@keyframes pal-in{ from{ opacity:0; transform:translateY(-6px); } }
.pal-pop header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.pal-pop header b{ font-family:var(--display); font-weight:500; font-size:20px; }
.pal-pop header span{ font-size:12px; color:var(--mute); }
.pal-list{ display:flex; flex-direction:column; gap:4px; }
.pal-list button{ display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; border-radius:12px; border:1px solid transparent; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.pal-list button:hover{ background:rgba(var(--bone-rgb),.06); }
.pal-list button.on{ border-color:rgba(var(--bone-rgb),.5); }
.pal-list button.on::after{ content:"✓"; margin-left:auto; color:var(--gold); font-weight:700; }
.pal-list em{ font-style:normal; }
.pal-list .sw{ display:flex; }
.pal-list .sw i{ width:22px; height:22px; border-radius:50%; margin-right:-6px; box-shadow:0 0 0 2px var(--ink),0 0 0 3px rgba(var(--bone-rgb),.15); }
.pal-c{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(var(--bone-rgb),.14); font-size:13px; color:var(--soft); cursor:pointer; }
.pal-c input{ width:40px; height:30px; padding:0; border:1px solid rgba(var(--bone-rgb),.3); border-radius:8px; background:none; cursor:pointer; }

/* ====================================================================
   SUGGESTION D'UNIVERS À L'ARRIVÉE
   ==================================================================== */
.sg{ position:fixed; z-index:55; right:clamp(12px,3vw,40px); bottom:calc(64px + env(safe-area-inset-bottom,0px)); width:min(360px,calc(100vw - 24px));
  background:rgba(var(--ink-rgb),.9); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); color:var(--bone);
  border:1px solid rgba(var(--bone-rgb),.16); border-radius:22px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); font-family:var(--body);
  opacity:0; transform:translateY(24px) scale(.98); transition:opacity .45s var(--ease,ease),transform .6s var(--ease,ease); }
.sg.on{ opacity:1; transform:none; }
.sg-h{ display:flex; align-items:center; gap:12px; padding:14px 14px 10px 16px; }
.sg-h b{ display:block; font-weight:600; font-size:14px; } .sg-h small{ font-size:12px; color:var(--mute); }
.sg-av{ position:relative; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--gold-2,#F3D9A8),var(--gold) 60%,rgba(0,0,0,.2)); flex:none; }
.sg-av i{ position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:#3DCB7F; box-shadow:0 0 0 2px var(--ink); }
.sg-x{ margin-left:auto; width:32px; height:32px; border-radius:50%; font-size:20px; line-height:1; color:var(--mute); }
.sg-x:hover{ background:rgba(var(--bone-rgb),.08); color:var(--bone); }
.sg-b{ padding:4px 16px 18px; transition:opacity .18s; }
.sg-b.out{ opacity:0; }
.sg-b.in > *{ animation:sg-in .5s var(--ease,ease) both; } .sg-b.in > *:nth-child(2){ animation-delay:.08s; } .sg-b.in > *:nth-child(3){ animation-delay:.16s; }
@keyframes sg-in{ from{ opacity:0; transform:translateY(8px); } }
.sg-typing{ display:inline-flex; gap:5px; padding:12px 14px; border-radius:16px 16px 16px 4px; background:rgba(var(--bone-rgb),.08); }
.sg-typing i{ width:6px; height:6px; border-radius:50%; background:var(--bone); opacity:.4; animation:sg-dot 1s infinite; }
.sg-typing i:nth-child(2){ animation-delay:.15s; } .sg-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes sg-dot{ 50%{ opacity:1; transform:translateY(-3px); } }
.sg-q{ margin:0 0 14px; padding:12px 14px; border-radius:16px 16px 16px 4px; background:rgba(var(--bone-rgb),.08); font-size:15px; line-height:1.45; }
.sg-q em{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:1.08em; }
.sg-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.sg-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:99px; border:1px solid rgba(var(--bone-rgb),.22); font-size:13.5px; transition:border-color .25s,background .25s,transform .25s; }
.sg-chip:hover{ border-color:var(--gold); background:rgba(var(--gold-rgb),.1); transform:translateY(-1px); }
.sg-chip i{ width:9px; height:9px; border-radius:50%; }
.sg-chip.ghost{ border-style:dashed; color:var(--mute); }
.sg-link{ font-size:13px; color:var(--mute); padding:6px 2px; } .sg-link:hover{ color:var(--bone); }
.sg-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:16px; margin-bottom:14px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sg-card::after{ content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:var(--c); opacity:.18; }
.sg-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
.sg-card b{ font-size:26px; line-height:1.05; letter-spacing:-.01em; }
.sg-card small{ font-size:12.5px; line-height:1.45; opacity:.85; } .sg-card small em{ font-style:normal; font-weight:600; }
.sg-pal{ display:flex; } .sg-pal i{ width:16px; height:16px; border-radius:50%; margin-right:-4px; box-shadow:0 0 0 1.5px rgba(255,255,255,.35); }
.sg-act{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
@media (max-width:760px){
  .sg{ right:8px; left:8px; width:auto; bottom:calc(8px + env(safe-area-inset-bottom,0px)); border-radius:20px; max-height:72vh; overflow:auto; }
  .sg-chip{ font-size:13px; padding:7px 11px; }
}

/* ---- Ajustements mobile communs ---- */
@media (max-width:760px){
  footer a,footer .fpays{ padding:10px 0; }
  footer .fpays select{ padding:8px 12px; }
}
@media (max-width:430px){
  html .nav{ gap:8px; }
  html .nav .logo{ font-size:17px !important; letter-spacing:.02em !important; }
  html .nav .btn.sm{ padding:10px 12px !important; font-size:10px !important; letter-spacing:.06em !important; white-space:nowrap; }
  html .nav .uni-btn,html .nav .pal-btn{ padding:8px !important; }
  html .nav .uni-btn span{ display:none; }
  html .nav .nav-r{ gap:6px; }
}

/* ====================================================================
   DEVIS EN ÉTAPES (besoins → formule → options → récap)
   ==================================================================== */
.dv .wrap{ max-width:700px; }
.dv-step{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 12px; margin:0 0 16px; font-size:clamp(20px,2vw,26px); letter-spacing:-.02em; line-height:1.1; }
.dv-step b{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--gold); color:var(--ink); font-family:var(--mono); font-size:13px; font-weight:600; flex:none; transform:translateY(4px); }
.dv-step small{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.dv-step.s2{ margin:8px 0 -20px; }
.cat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cat{ position:relative; display:grid; grid-template-columns:40px 1fr; grid-template-areas:"ic ct" "ic cp"; gap:2px 14px; align-items:center; text-align:left; padding:16px 44px 16px 16px; border:1px solid var(--line-2); border-radius:16px; transition:border-color .3s,background .3s,transform .3s; }
.cat:hover{ border-color:rgba(var(--gold-rgb),.7); transform:translateY(-2px); }
.cat[aria-pressed="true"]{ border-color:var(--gold); background:rgba(var(--gold-rgb),.09); }
.cat .ic{ grid-area:ic; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(var(--bone-rgb),.07); color:var(--gold); }
.cat .ic svg,.grp .gi svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cat .ct{ grid-area:ct; display:flex; flex-direction:column; gap:2px; }
.cat .ct b{ font-weight:500; font-size:16.5px; letter-spacing:-.01em; }
.cat .ct small{ font-size:13px; color:var(--mute); }
.cat .cp{ grid-area:cp; font-family:var(--mono); font-size:11.5px; color:var(--gold); margin-top:4px; }
.cat .ck{ position:absolute; right:14px; top:14px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); transition:all .3s; }
.cat[aria-pressed="true"] .ck{ background:var(--gold); border-color:var(--gold); }
.cat[aria-pressed="true"] .ck::after{ content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
/* Bloc de configuration */
.grp{ padding:22px; border:1px solid var(--line-2); border-radius:20px; background:rgba(var(--bone-rgb),.025); animation:grp-in .5s var(--ease,ease); }
@keyframes grp-in{ from{ opacity:0; transform:translateY(12px); } }
.grp header{ align-items:center; gap:12px; border-bottom:0; padding-bottom:4px; }
.grp header .gi{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(var(--gold-rgb),.12); color:var(--gold); flex:none; }
.grp header h2{ margin-right:auto; }
.grp .gx{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--mute); padding:6px 10px; border-radius:99px; border:1px solid var(--line); }
.grp .gx:hover{ color:var(--bone); border-color:var(--bone); }
.grp .sub{ margin:18px 0 10px; font-size:15px; font-weight:500; }
.grp .sub small{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-left:8px; font-weight:400; }
.grp .sub .for{ color:var(--gold); font-weight:400; }
.grp .forms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
.opt{ grid-template-columns:22px 1fr auto; grid-template-areas:"dot n p" ". d d"; row-gap:3px; }
.opt .dot{ grid-area:dot; } .opt .n{ grid-area:n; } .opt .p{ grid-area:p; } .opt .d{ grid-area:d; font-size:13px; line-height:1.4; color:var(--mute); position:relative; }
.opt.form{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px; border:1px solid var(--line-2); border-radius:14px; }
.opt.form::before{ border-radius:14px; }
.opt.form .dot{ position:absolute; right:14px; top:16px; }
.opt.form .n{ padding-right:26px; font-size:17px; }
.opt.form .p{ margin-top:auto; padding-top:8px; }
.opt.form[aria-pressed="true"]{ border-color:var(--gold); }
.opt.form:hover .n{ transform:none; }
.grp .more{ animation:grp-in .45s var(--ease,ease); }
.grp .opts .opt:last-child{ border-bottom:0; }
/* Récap */
.dv-recap{ padding:22px; border-radius:20px; border:1px solid var(--line-2); }
.dv-recap ul{ list-style:none; margin:0; padding:0; }
.dv-recap li{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px dashed var(--line-2); font-size:15px; }
.dv-recap li span small{ display:block; font-size:11.5px; color:var(--mute); }
.dv-recap li em{ font-style:normal; font-family:var(--mono); font-size:12.5px; color:var(--gold); white-space:nowrap; text-align:right; }
.dv-recap .rt{ display:flex; justify-content:flex-end; gap:24px; padding-top:14px; font-family:var(--mono); font-size:12px; color:var(--mute); }
.dv-recap .rt b{ display:block; font-family:var(--body); font-size:22px; font-weight:400; color:var(--bone); letter-spacing:-.02em; }
@media (max-width:760px){
  .cat-grid{ grid-template-columns:1fr; }
  .grp{ padding:16px; }
  .grp .forms{ grid-template-columns:1fr; }
  .opt.form{ padding:14px; }
}