/* ══════════════════════════════════════════════════════════════════
   LA BOUTIQUE DES THÈMES — l'atelier (2026-09-19)

   Même direction artistique que les thèmes eux-mêmes : une table en
   papier grainé, des objets posés dessus (fiches, bons, tirages), des
   ombres en couches, l'or pour le détail. Tout est enfermé sous
   section[data-vue="themes"] : aucun autre écran du tableau de bord ne
   change.

   ⚠️ Le tableau de bord a un mode sombre qui inverse --encre et --fond.
   Cette vue garde SA palette dans les deux modes : de l'encre sur du
   papier, toujours lisible.
   ══════════════════════════════════════════════════════════════════ */

section[data-vue="themes"]{
  --bt-grain: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 .2 0 0 0 0 .14 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bt-grain-fort: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bt-papier:var(--bt-grain),linear-gradient(180deg,#fffdf8,#f5ede0);
  --bt-kraft:var(--bt-grain),linear-gradient(170deg,#e9d9bd,#dcc6a2);
  --bt-encre:#1f1a15;--bt-gris:#6e6356;--bt-or:#c9a266;--bt-or-c:#e2c48f;
  --bt-accent:#bd4a2c;
  --bt-ombre:0 1px 1px rgba(40,26,14,.2),0 3px 6px -2px rgba(40,26,14,.22),
    0 18px 30px -14px rgba(40,26,14,.45),0 60px 90px -44px rgba(40,26,14,.55);
  --bt-ombre-h:0 2px 2px rgba(40,26,14,.18),0 10px 16px -4px rgba(40,26,14,.24),
    0 36px 54px -20px rgba(40,26,14,.5),0 90px 120px -50px rgba(40,26,14,.6);
  --bt-amorti:cubic-bezier(.16,.84,.3,1);
  /* la palette du tableau de bord, fixée ici pour les deux modes */
  --encre:#1f1a15;--encre-2:#4d4338;--encre-3:#7d7064;--filet:rgba(40,26,14,.13);--fond:#fbf8f2;

  position:relative;isolation:isolate;display:block;
  margin:0 calc(clamp(8px,1.4vw,18px) * -1);padding:clamp(14px,2vw,26px);border-radius:26px;
  background:var(--bt-grain),linear-gradient(180deg,#f3ece1,#ece3d4);background-size:220px,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(40,26,14,.06);
  color:var(--bt-encre)}
section[data-vue="themes"][hidden]{display:none}
section[data-vue="themes"]>*+*{margin-top:clamp(18px,2.4vw,28px)}

/* ══ L'UNE — une feuille d'obsidienne, un nuancier en éventail ══════ */
.bt-une{position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:clamp(18px,3vw,40px);
  padding:clamp(26px,3.6vw,48px);border-radius:22px;color:#f4ece2;
  background:var(--bt-grain-fort),
    radial-gradient(700px 360px at 95% 0%,rgba(189,74,44,.32),transparent 60%),
    radial-gradient(600px 400px at 0% 110%,rgba(201,162,102,.16),transparent 60%),
    linear-gradient(180deg,#1b1613,#110e0c);
  background-size:220px,auto,auto,auto;background-blend-mode:soft-light,normal,normal,normal;
  box-shadow:0 1px 0 rgba(255,236,210,.07) inset,0 2px 4px rgba(0,0,0,.25),
    0 30px 60px -30px rgba(20,12,6,.8),0 80px 120px -60px rgba(20,12,6,.7)}
.bt-sur{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bt-or-c)}
.bt-sur span{padding:5px 11px;border-radius:99px;border:1px solid rgba(226,196,143,.4);background:rgba(226,196,143,.07);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1rem;letter-spacing:0;text-transform:none}
.bt-titre{margin:0;font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:clamp(1.9rem,3.6vw,3.3rem);
  line-height:1;letter-spacing:-.05em;
  background:linear-gradient(180deg,#fffaf2 35%,#d9c7ae);-webkit-background-clip:text;background-clip:text;color:transparent}
.bt-titre i{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-.01em;
  background:linear-gradient(135deg,#f1d9ad,#c99a5c);-webkit-background-clip:text;background-clip:text}
.bt-chapo{margin:18px 0 0;max-width:46ch;font-size:1rem;line-height:1.65;color:rgba(244,236,226,.7)}

/* Les cinq nuanciers, ouverts en éventail */
.bt-nuancier{position:relative;height:clamp(170px,19vw,230px)}
.bt-nuancier span{position:absolute;left:50%;bottom:0;width:clamp(58px,6vw,76px);height:clamp(150px,17vw,210px);
  margin-left:calc(clamp(58px,6vw,76px) / -2);border-radius:6px;transform-origin:50% 92%;
  background:var(--bt-grain),linear-gradient(180deg,var(--c) 0 64%,#fbf6ee 64%);background-size:120px,auto;
  box-shadow:0 1px 1px rgba(0,0,0,.35),0 12px 22px -8px rgba(0,0,0,.6);
  transition:transform .8s var(--bt-amorti)}
.bt-nuancier span::after{content:'';position:absolute;left:10px;right:14px;bottom:18px;height:3px;border-radius:2px;
  background:rgba(40,26,14,.25);box-shadow:0 8px 0 rgba(40,26,14,.15);width:auto}
.bt-nuancier span:nth-child(1){--c:#2f5d4c;transform:rotate(-26deg)}
.bt-nuancier span:nth-child(2){--c:#c99a45;transform:rotate(-13deg)}
.bt-nuancier span:nth-child(3){--c:#b8452c;transform:rotate(0deg)}
.bt-nuancier span:nth-child(4){--c:#2c4a7a;transform:rotate(13deg)}
.bt-nuancier span:nth-child(5){--c:#7a3a55;transform:rotate(26deg)}
.bt-une:hover .bt-nuancier span:nth-child(1){transform:rotate(-38deg)}
.bt-une:hover .bt-nuancier span:nth-child(2){transform:rotate(-19deg)}
.bt-une:hover .bt-nuancier span:nth-child(4){transform:rotate(19deg)}
.bt-une:hover .bt-nuancier span:nth-child(5){transform:rotate(38deg)}
@media (max-width:760px){.bt-une{grid-template-columns:1fr}.bt-nuancier{height:150px;margin-top:6px}}

/* ══ LES CARTES DE L'ÉCRAN — du papier, posé ══════════════════════ */
section[data-vue="themes"] .carte{position:relative;border:0;border-radius:6px;
  background:var(--bt-papier);background-size:220px,auto;box-shadow:var(--bt-ombre);color:var(--bt-encre)}
section[data-vue="themes"] .carte h2{font-family:'Sora',system-ui,sans-serif;font-weight:600;letter-spacing:-.035em;
  font-size:clamp(1.25rem,2vw,1.6rem);color:var(--bt-encre)}
section[data-vue="themes"] .sous{color:var(--bt-gris)}

/* Les trois phrases : trois fiches bristol, punaisées */
section[data-vue="themes"] .carte-mode{background:none;box-shadow:none;padding-left:0;padding-right:0}
section[data-vue="themes"] .carte-mode h2{margin-bottom:22px}
section[data-vue="themes"] .mode-pas{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:bt}
section[data-vue="themes"] .mode-pas li{position:relative;counter-increment:bt;margin:0;padding:34px 22px 22px 26px;border-radius:3px;
  font-size:.92rem;line-height:1.6;color:var(--encre-2);
  background:var(--bt-grain),
    repeating-linear-gradient(180deg,transparent 0 27px,rgba(70,110,160,.13) 27px 28px),
    linear-gradient(180deg,#fffdf8,#f8f2e6);background-size:220px,auto,auto;background-position:0 0,0 14px,0 0;
  box-shadow:var(--bt-ombre);transition:transform .6s var(--bt-amorti),box-shadow .6s}
section[data-vue="themes"] .mode-pas li:nth-child(1){transform:rotate(-1.1deg)}
section[data-vue="themes"] .mode-pas li:nth-child(2){transform:rotate(.8deg) translateY(8px)}
section[data-vue="themes"] .mode-pas li:nth-child(3){transform:rotate(-.5deg)}
section[data-vue="themes"] .mode-pas li:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--bt-ombre-h)}
section[data-vue="themes"] .mode-pas li::before{content:counter(bt,decimal-leading-zero);position:absolute;right:14px;bottom:-12px;
  font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:4.6rem;line-height:1;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:1px rgba(70,110,160,.25);pointer-events:none}
section[data-vue="themes"] .mode-pas li::after{content:'';position:absolute;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 2px,#e27a5c 3px,var(--bt-accent) 55%,#6e2413);
  box-shadow:0 2px 3px rgba(0,0,0,.35),3px 8px 8px -3px rgba(0,0,0,.35)}
section[data-vue="themes"] .mode-pas b{display:block;margin-bottom:6px;font-family:'Sora',system-ui,sans-serif;
  font-size:1.02rem;letter-spacing:-.02em;color:var(--bt-encre)}
section[data-vue="themes"] .mode-att{margin-top:26px;padding:14px 18px;border-radius:3px;border:0;
  background:var(--bt-kraft);background-size:220px,auto;color:#4a3a28;box-shadow:0 1px 1px rgba(40,26,14,.2),0 8px 16px -8px rgba(40,26,14,.35);
  transform:rotate(-.3deg)}
@media (max-width:860px){section[data-vue="themes"] .mode-pas{grid-template-columns:1fr;gap:26px}}

/* « Essayer est gratuit » : un bon, avec son tampon */
section[data-vue="themes"] .carte-devis{border-left:0;padding-left:clamp(26px,3vw,40px);
  background:var(--bt-grain),
    radial-gradient(circle at 0 50%,transparent 0 9px,transparent 9px) ,
    linear-gradient(180deg,#fffdf8,#f5ede0);background-size:220px,auto,auto;
  transform:rotate(.25deg)}
section[data-vue="themes"] .carte-devis::before{content:'';position:absolute;left:12px;top:14px;bottom:14px;width:0;
  border-left:2px dashed rgba(40,26,14,.18)}
section[data-vue="themes"] .carte-devis::after{content:'ESSAI GRATUIT';position:absolute;right:clamp(14px,3vw,34px);top:18px;
  padding:6px 12px;border:2.5px solid var(--bt-accent);border-radius:6px;color:var(--bt-accent);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.78rem;font-weight:600;letter-spacing:.2em;
  transform:rotate(8deg);opacity:.8;mix-blend-mode:multiply}
section[data-vue="themes"] .carte-devis .carte-tete{padding-right:150px}
section[data-vue="themes"] .devis-fort{color:var(--bt-encre)}
@media (max-width:640px){section[data-vue="themes"] .carte-devis::after{position:static;display:inline-block;margin-bottom:10px}
  section[data-vue="themes"] .carte-devis .carte-tete{padding-right:0}}

/* ══ LES FILTRES — des onglets gravés ══════════════════════════════ */
section[data-vue="themes"] .filtres .b{border:0;border-radius:99px;background:rgba(40,26,14,.05);color:var(--encre-2);
  box-shadow:inset 0 1px 2px rgba(40,26,14,.18),0 1px 0 rgba(255,255,255,.7);transition:all .25s}
section[data-vue="themes"] .filtres .b:hover{background:rgba(40,26,14,.09)}
section[data-vue="themes"] .filtres .b.on{background:var(--bt-encre);color:#f4ece2;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 12px -6px rgba(0,0,0,.6)}

/* ══ LE CATALOGUE — chaque thème, un objet sur la table ════════════ */
section[data-vue="themes"] #th-catalogue{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  gap:34px 26px;padding-top:14px;margin-top:1.4rem}
section[data-vue="themes"] .th-c{position:relative;border:0;border-radius:4px;padding:14px 14px 16px;gap:.8rem;
  background:var(--bt-papier);background-size:220px,auto;box-shadow:var(--bt-ombre);
  transition:transform .6s var(--bt-amorti),box-shadow .6s var(--bt-amorti)}
section[data-vue="themes"] .th-c:nth-child(4n+1){transform:rotate(-.8deg)}
section[data-vue="themes"] .th-c:nth-child(4n+2){transform:rotate(.6deg)}
section[data-vue="themes"] .th-c:nth-child(4n+3){transform:rotate(-.4deg)}
section[data-vue="themes"] .th-c:nth-child(4n){transform:rotate(.9deg)}
section[data-vue="themes"] .th-c:hover{transform:rotate(0) translateY(-8px);box-shadow:var(--bt-ombre-h)}
/* un ruban de scotch en haut de chaque objet */
section[data-vue="themes"] .th-c::before{content:'';position:absolute;top:-13px;left:50%;width:104px;height:26px;margin-left:-52px;z-index:2;
  transform:rotate(-2.5deg);background:var(--bt-grain),linear-gradient(180deg,rgba(247,238,214,.85),rgba(232,219,190,.8));
  background-size:120px,auto;box-shadow:0 1px 2px rgba(0,0,0,.18);opacity:.92;
  clip-path:polygon(2% 8%,8% 0,16% 10%,24% 2%,32% 9%,40% 1%,48% 9%,56% 2%,64% 10%,72% 1%,80% 8%,88% 0,96% 9%,100% 4%,98% 94%,92% 100%,84% 91%,76% 99%,68% 92%,60% 100%,52% 91%,44% 99%,36% 92%,28% 100%,20% 91%,12% 99%,4% 92%,0 98%)}
section[data-vue="themes"] .th-c:nth-child(even)::before{transform:rotate(3deg)}
/* l'aperçu : un tirage, bord blanc, légèrement creusé */
section[data-vue="themes"] .th-c .mini{border:0;border-radius:2px;
  box-shadow:0 0 0 7px #fcfaf5,0 0 0 8px rgba(40,26,14,.08),0 10px 18px -8px rgba(40,26,14,.45)}
section[data-vue="themes"] .th-c .mini{margin:8px 8px 4px}
/* les pastilles : des étiquettes tamponnées */
section[data-vue="themes"] .th-haut{flex-wrap:wrap;gap:6px}
section[data-vue="themes"] .th-c .puce{border-radius:4px;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;
  border:1px dashed currentColor;background:transparent}
section[data-vue="themes"] .th-c .puce::before{display:none}
/* le texte */
section[data-vue="themes"] .th-t>b{font-family:'Sora',system-ui,sans-serif;font-size:1.3rem;letter-spacing:-.04em;color:var(--bt-encre)}
section[data-vue="themes"] .th-pour{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.08rem;letter-spacing:0;text-transform:none;color:#9a6f37}
section[data-vue="themes"] .th-qui{color:var(--encre-2)}
section[data-vue="themes"] .th-t .sous-ligne{color:var(--bt-gris)}
/* le prix : une étiquette en kraft, trouée, qui pend */
section[data-vue="themes"] .th-prix{align-self:flex-start;display:inline-block;margin-top:.55rem;
  padding:.4rem .85rem .4rem 1.45rem;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.76rem;font-weight:500;
  color:#3d2f20;background:radial-gradient(circle at 12px 50%,#f5ede0 0 3.5px,rgba(40,26,14,.35) 4px,transparent 5px),var(--bt-kraft);
  background-size:auto,220px,auto;
  clip-path:polygon(9px 0,100% 0,100% 100%,9px 100%,0 50%);transform:rotate(-2deg);
  filter:drop-shadow(0 3px 3px rgba(40,26,14,.25))}
/* l'avertissement « vitrine » : une note, pas un pavé */
section[data-vue="themes"] .th-vitrine{display:block;margin-top:.6rem;padding:.6rem .75rem;border:0;border-radius:3px;
  font-size:.76rem;line-height:1.5;color:#5c4526;background:rgba(201,154,69,.12);
  box-shadow:inset 3px 0 0 #c99a45}
/* le bouton */
section[data-vue="themes"] .th-pied .b{border-radius:99px;padding:.8rem 1rem;border:0;
  background:linear-gradient(180deg,#2a241f,#15110e);color:#f4ece2;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 8px 16px -8px rgba(0,0,0,.7);transition:all .3s var(--bt-amorti)}
section[data-vue="themes"] .th-pied .b::after{content:' →';transition:margin .3s}
section[data-vue="themes"] .th-c:hover .th-pied .b{background:linear-gradient(180deg,#cf5a3a,var(--bt-accent));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 20px -8px rgba(189,74,44,.8)}
/* le thème porté : un liseré d'or et un tampon */
section[data-vue="themes"] .th-c.on{box-shadow:0 0 0 2px var(--bt-or),var(--bt-ombre-h)}
section[data-vue="themes"] .th-c.on::after{content:'PORTÉ';position:absolute;right:16px;top:58px;z-index:3;
  padding:5px 10px;border:2.5px solid #2f6b4a;border-radius:6px;color:#2f6b4a;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.8rem;font-weight:600;letter-spacing:.2em;
  transform:rotate(-12deg);background:rgba(252,250,245,.8)}

/* ══ LA BIBLIOTHÈQUE — des tickets rangés ══════════════════════════ */
section[data-vue="themes"] .th-l{border:0;border-radius:4px;padding:.85rem 1rem .85rem 1.3rem;position:relative;
  background:var(--bt-papier);background-size:220px,auto;
  box-shadow:0 1px 1px rgba(40,26,14,.18),0 8px 16px -10px rgba(40,26,14,.4)}
section[data-vue="themes"] .th-l::before{content:'';position:absolute;left:8px;top:10px;bottom:10px;border-left:2px dashed rgba(40,26,14,.16)}
section[data-vue="themes"] .th-l.on{background:var(--bt-grain),linear-gradient(180deg,#fdf7ea,#f3e6cc);background-size:220px,auto;
  box-shadow:0 0 0 2px var(--bt-or),0 8px 16px -10px rgba(40,26,14,.4)}
section[data-vue="themes"] .th-l .mini{border:0;box-shadow:0 0 0 4px #fcfaf5,0 6px 12px -6px rgba(40,26,14,.4)}
section[data-vue="themes"] .th-l-t>b{font-family:'Sora',system-ui,sans-serif;letter-spacing:-.03em}

@media (prefers-reduced-motion:reduce){
  section[data-vue="themes"] *{transition:none!important}
  .bt-une:hover .bt-nuancier span{transform:none}
}
/* le catalogue n'est pas une feuille : ses thèmes sont posés à même la table */
section[data-vue="themes"] .carte:has(#th-catalogue){background:none;box-shadow:none;padding-left:0;padding-right:0}
/* le numéro : en filigrane, en bas à droite (l'ancienne pastille ronde en haut à gauche est remise à plat) */
section[data-vue="themes"] .carte-mode .mode-pas li::before{content:counter(bt,decimal-leading-zero);top:auto;left:auto;right:12px;bottom:-10px;
  width:auto;height:auto;border-radius:0;background:none;display:block;
  font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:4.2rem;line-height:1;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:1px rgba(70,110,160,.24)}
section[data-vue="themes"] .carte-mode .mode-pas li{padding-left:24px}


/* ══════════════════════════════════════════════════════════════════
   L'AMBIANCE « CAFÉ » (2026-09-19)
   Hugo : « une ambiance où l'on se sent bien, on a envie de rester,
   comme chez Starbucks ». Une table en bois chaud sous des lampes, la
   pénombre autour ; trois grains différents, cinq papiers différents ;
   toutes les ombres partent de la même lampe, en haut à gauche.
   ══════════════════════════════════════════════════════════════════ */
section[data-vue="themes"]{
  /* trois grains : fin (papier fin), moyen (bristol), fort (kraft, carton) */
  --g-fin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --g-moyen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .13 0 0 0 0 .07 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --g-fort:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .11 0 0 0 0 .05 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* les fibres du bois : des veines étirées */
  --g-bois:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .06 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  /* l'ombre de la lampe : portée vers le bas et la droite */
  --lp-ombre:1px 1px 1px rgba(40,22,8,.22),3px 5px 7px -2px rgba(40,22,8,.26),
    12px 22px 30px -12px rgba(40,22,8,.5),30px 60px 80px -40px rgba(30,16,6,.6);
  --lp-ombre-h:1px 2px 2px rgba(40,22,8,.2),6px 12px 16px -4px rgba(40,22,8,.26),
    22px 40px 54px -20px rgba(40,22,8,.52),44px 90px 110px -50px rgba(30,16,6,.62);

  background:
    radial-gradient(900px 520px at 22% 6%,rgba(255,196,120,.34),transparent 62%),
    radial-gradient(760px 480px at 88% 46%,rgba(255,180,105,.22),transparent 64%),
    radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(28,14,6,.42) 100%),
    var(--g-moyen),var(--g-bois),
    linear-gradient(180deg,#a8764a,#8a5c36 45%,#6f4829);
  background-size:auto,auto,auto,240px,900px 240px,auto;
  background-blend-mode:screen,screen,normal,multiply,multiply,normal;
  box-shadow:inset 0 2px 0 rgba(255,220,170,.18),inset 0 0 120px rgba(20,10,4,.35),0 30px 60px -30px rgba(20,10,4,.5);
  animation:lp-souffle 9s ease-in-out infinite alternate}
@keyframes lp-souffle{from{filter:brightness(1)}to{filter:brightness(1.035) saturate(1.03)}}

/* ── Le titre de l'écran et les titres posés sur le bois ──────────── */
section[data-vue="themes"] .carte-mode>h2,
section[data-vue="themes"] .carte:has(#th-catalogue) .carte-tete h2{color:#fff5e6;text-shadow:0 2px 12px rgba(20,10,4,.55),0 1px 0 rgba(0,0,0,.3)}
section[data-vue="themes"] .carte:has(#th-catalogue)>.sous{color:rgba(255,240,220,.85);text-shadow:0 1px 6px rgba(20,10,4,.5)}
section[data-vue="themes"] .carte:has(#th-catalogue) #th-compte{background:rgba(255,240,220,.15);color:#fff5e6;border:1px solid rgba(255,240,220,.3)}

/* ── L'une : une ardoise de café, bordée de bois ───────────────────── */
.bt-une{border:10px solid transparent;
  background:
    var(--g-fort) padding-box,
    radial-gradient(700px 360px at 95% 0%,rgba(189,74,44,.28),transparent 60%) padding-box,
    radial-gradient(500px 300px at 10% 0%,rgba(255,210,150,.14),transparent 60%) padding-box,
    linear-gradient(180deg,#1e1a16,#12100d) padding-box,
    var(--g-bois) border-box,linear-gradient(180deg,#6b4527,#4b2f19) border-box;
  background-size:260px,auto,auto,auto,900px 240px,auto;
  background-blend-mode:soft-light,normal,normal,normal,multiply,normal;
  box-shadow:var(--lp-ombre),inset 0 0 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04)}
.bt-chapo{color:rgba(244,236,226,.78)}
/* une tasse, vue de haut, qui fume doucement */
.bt-nuancier::before{content:'';position:absolute;left:4%;bottom:6%;width:74px;height:74px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,#3b2415 0 44%,#5a3a22 46%,#f4ece2 49% 60%,#e6dccb 62%,transparent 64%);
  box-shadow:6px 10px 16px -4px rgba(0,0,0,.6)}
.bt-nuancier::after{content:'';position:absolute;left:calc(4% + 22px);bottom:calc(6% + 60px);width:30px;height:70px;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);filter:blur(8px);
  animation:lp-vapeur 4.5s ease-in-out infinite;pointer-events:none}
@keyframes lp-vapeur{0%{opacity:0;transform:translateY(10px) scaleX(.8)}40%{opacity:.9}100%{opacity:0;transform:translateY(-30px) scaleX(1.3)}}
.bt-nuancier span{z-index:1}

/* ── Les fiches bristol : grain moyen, papier varié ────────────────── */
section[data-vue="themes"] .mode-pas li{box-shadow:var(--lp-ombre)}
section[data-vue="themes"] .mode-pas li:nth-child(1){background:var(--g-moyen),repeating-linear-gradient(180deg,transparent 0 27px,rgba(70,110,160,.13) 27px 28px),linear-gradient(180deg,#fffdf6,#f6eedd);background-size:240px,auto,auto;background-position:0 0,0 14px,0 0}
section[data-vue="themes"] .mode-pas li:nth-child(2){background:var(--g-fin),repeating-linear-gradient(180deg,transparent 0 27px,rgba(150,90,60,.12) 27px 28px),linear-gradient(180deg,#fdf1e8,#f3dfd0);background-size:180px,auto,auto;background-position:0 0,0 14px,0 0}
section[data-vue="themes"] .mode-pas li:nth-child(3){background:var(--g-moyen),repeating-linear-gradient(180deg,transparent 0 27px,rgba(70,110,90,.13) 27px 28px),linear-gradient(180deg,#f3f4e6,#e4e8d3);background-size:240px,auto,auto;background-position:0 0,0 14px,0 0}
section[data-vue="themes"] .mode-pas li:hover{box-shadow:var(--lp-ombre-h)}
section[data-vue="themes"] .mode-att{background:var(--g-fort),linear-gradient(170deg,#e4cfa9,#d2b88c);background-size:260px,auto;box-shadow:var(--lp-ombre)}

/* ── Le bon « essai gratuit » : papier épais, une trace de tasse ───── */
section[data-vue="themes"] .carte-devis{background:
    radial-gradient(circle at 88% 78%,transparent 0 46px,rgba(120,70,30,.14) 47px 50px,rgba(120,70,30,.05) 52px,transparent 58px),
    var(--g-moyen),linear-gradient(180deg,#fffaf0,#f2e6d2);background-size:auto,240px,auto;box-shadow:var(--lp-ombre)}

/* ── Les filtres : une ardoise, écrite à la craie ──────────────────── */
section[data-vue="themes"] #th-paiement,section[data-vue="themes"] #th-familles{position:relative;padding:14px 16px;margin:.4rem 0 .8rem;
  border-radius:6px;border:7px solid transparent;
  background:var(--g-fort) padding-box,radial-gradient(400px 120px at 20% 0%,rgba(255,255,255,.06),transparent) padding-box,
    linear-gradient(180deg,#27302a,#1b221d) padding-box,var(--g-bois) border-box,linear-gradient(180deg,#7a5230,#5a3a20) border-box;
  background-size:260px,auto,auto,900px 240px,auto;background-blend-mode:soft-light,normal,normal,multiply,normal;
  box-shadow:var(--lp-ombre),inset 0 0 30px rgba(0,0,0,.4)}
section[data-vue="themes"] #th-paiement{transform:rotate(-.4deg)}
section[data-vue="themes"] #th-familles{transform:rotate(.3deg)}
section[data-vue="themes"] .filtres .b{background:transparent;box-shadow:none;border:1px dashed rgba(240,236,226,.25);
  color:rgba(240,236,226,.85);font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.02rem;
  text-shadow:0 0 1px rgba(240,236,226,.6)}
section[data-vue="themes"] .filtres .b:hover{background:rgba(240,236,226,.07);color:#fff}
section[data-vue="themes"] .filtres .b.on{background:rgba(240,236,226,.9);color:#1f2620;border-color:transparent;text-shadow:none;
  box-shadow:0 0 0 3px rgba(240,236,226,.12)}

/* ── Le catalogue : cinq papiers, trois grains, une lampe ──────────── */
section[data-vue="themes"] .th-c{box-shadow:var(--lp-ombre)}
section[data-vue="themes"] .th-c:hover{box-shadow:var(--lp-ombre-h)}
section[data-vue="themes"] .th-c:nth-child(5n+1){background:var(--g-moyen),linear-gradient(180deg,#fffdf6,#f5ecdc);background-size:240px,auto}
section[data-vue="themes"] .th-c:nth-child(5n+2){background:var(--g-fort),linear-gradient(175deg,#efe2c8,#e2cfaa);background-size:260px,auto}
section[data-vue="themes"] .th-c:nth-child(5n+3){background:var(--g-fin),linear-gradient(180deg,#f3f3e7,#e3e6d3);background-size:180px,auto}
section[data-vue="themes"] .th-c:nth-child(5n+4){background:var(--g-moyen),linear-gradient(180deg,#fcf0ea,#f1ddd2);background-size:240px,auto}
section[data-vue="themes"] .th-c:nth-child(5n){background:var(--g-fin),linear-gradient(180deg,#fbf7ef,#efe6d6);background-size:180px,auto}
/* des traces de tasse, ici et là */
section[data-vue="themes"] .th-c:nth-child(7n+3)>.th-t{background:radial-gradient(circle at 92% 18%,transparent 0 34px,rgba(120,70,30,.13) 35px 37px,rgba(120,70,30,.04) 39px,transparent 44px)}
section[data-vue="themes"] .th-c:nth-child(9n+6)>.th-t{background:radial-gradient(circle at 6% 88%,transparent 0 30px,rgba(120,70,30,.11) 31px 33px,transparent 38px)}

/* la mise en avant : le premier thème, en grand, sous la lampe */
@media (min-width:900px){
  section[data-vue="themes"] #th-catalogue>.th-c:first-child{grid-column:1 / -1;display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:28px;
    padding:22px 24px 24px;transform:rotate(-.35deg)}
  section[data-vue="themes"] #th-catalogue>.th-c:first-child>.th-haut{grid-column:1 / -1}
  section[data-vue="themes"] #th-catalogue>.th-c:first-child>.mini{grid-column:1;grid-row:2 / span 3;align-self:start}
  section[data-vue="themes"] #th-catalogue>.th-c:first-child>.th-t{grid-column:2;grid-row:2 / span 2}
  section[data-vue="themes"] #th-catalogue>.th-c:first-child>.th-pied{grid-column:2;grid-row:4}
  section[data-vue="themes"] #th-catalogue>.th-c:first-child .th-t>b{font-size:2rem}
}
section[data-vue="themes"] #th-catalogue>.th-c:first-child{box-shadow:0 0 0 1px rgba(201,162,102,.5),var(--lp-ombre-h)}
section[data-vue="themes"] #th-catalogue>.th-c:first-child::after{content:'Coup de cœur';position:absolute;right:-10px;top:18px;z-index:3;
  padding:7px 14px 7px 18px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:1.05rem;
  color:#fff6ea;background:linear-gradient(180deg,#c9573a,#9c3b23);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%);box-shadow:0 6px 12px -4px rgba(0,0,0,.4);transform:none;border:0}
section[data-vue="themes"] #th-catalogue>.th-c.on:first-child::after{content:'Votre thème'}

/* ── La bibliothèque : des tickets sur le bois ─────────────────────── */
section[data-vue="themes"] .carte:has(#th-biblio){background:var(--g-moyen),linear-gradient(180deg,#fffaf0,#f1e5cf);background-size:240px,auto;box-shadow:var(--lp-ombre)}
section[data-vue="themes"] .th-l{box-shadow:var(--lp-ombre)}
section[data-vue="themes"] .th-l:nth-child(even){transform:rotate(.25deg)}
section[data-vue="themes"] .th-l:nth-child(odd){transform:rotate(-.2deg)}

@media (prefers-reduced-motion:reduce){section[data-vue="themes"],.bt-nuancier::after{animation:none}}


/* ══ LES FILTRES — retour au papier beige grainé (2026-09-19) ═══════
   L'ardoise était trop lourde, surtout sur téléphone (dix-sept boutons
   en italique). Une bande de papier grainé, des onglets creusés, et sur
   téléphone une seule ligne qui défile au doigt. */
section[data-vue="themes"] #th-paiement,section[data-vue="themes"] #th-familles{
  border:0;border-radius:6px;padding:12px 14px;margin:.3rem 0 .7rem;
  background:var(--g-moyen),linear-gradient(180deg,#f7efe1,#ecdfc8);background-size:240px,auto;background-blend-mode:normal;
  box-shadow:var(--lp-ombre),inset 0 1px 0 rgba(255,255,255,.7)}
section[data-vue="themes"] #th-familles{background:var(--g-fort),linear-gradient(180deg,#f1e6d1,#e5d5b9);background-size:260px,auto}
section[data-vue="themes"] .filtres .b{border:0;border-radius:99px;padding:.42rem .85rem;
  font-family:inherit;font-style:normal;font-size:.86rem;text-shadow:none;
  background:rgba(40,26,14,.06);color:#4d4338;
  box-shadow:inset 0 1px 2px rgba(40,26,14,.2),0 1px 0 rgba(255,255,255,.75)}
section[data-vue="themes"] .filtres .b:hover{background:rgba(40,26,14,.11);color:#1f1a15}
section[data-vue="themes"] .filtres .b.on{background:linear-gradient(180deg,#2a241f,#15110e);color:#f4ece2;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 12px -6px rgba(0,0,0,.6)}
@media (max-width:760px){
  section[data-vue="themes"] #th-paiement,section[data-vue="themes"] #th-familles{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;transform:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  section[data-vue="themes"] #th-paiement::-webkit-scrollbar,section[data-vue="themes"] #th-familles::-webkit-scrollbar{display:none}
  section[data-vue="themes"] .filtres .b{flex:0 0 auto;white-space:nowrap}
  /* le ruban « Votre thème / Coup de cœur » ne recouvre plus l'étiquette */
  section[data-vue="themes"] #th-catalogue>.th-c:first-child::after{top:-14px;right:10px;font-size:.9rem;padding:5px 12px 5px 16px}
  section[data-vue="themes"] #th-catalogue>.th-c:first-child>.th-haut{margin-top:12px}
}