/* 00-base.css */
/* ==========================================================================
   My Color’s — système visuel
   Principe : tout est dessiné à l'encre (contours), la couleur arrive comme un
   coloriage, légèrement décalée. Le papier est blanc, l'action principale jaune.
   ========================================================================== */

@font-face {
  font-family: 'Shantell Sans';
  src: url('/fonts/shantell-sans.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shantell Sans';
  src: url('/fonts/shantell-sans-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/atkinson-next.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/atkinson-next-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Encre et papier */
  --paper: #ffffff;
  --ink: #24214d;
  --ink-2: #48457a;
  --ink-3: #6b6894;
  --hair: #dcdaea;
  --wash: #f6f5fb;

  /* La boîte de feutres */
  --soleil: #ffc93c;  --soleil-tint: #fff4d6;
  --tomate: #ff5e4d;  --tomate-tint: #ffe5e1;
  --pomme: #2fbf71;   --pomme-tint: #e2f6ea;
  --ciel: #3d9bff;    --ciel-tint: #e1efff;
  --raisin: #8b5cf6;  --raisin-tint: #eee6fe;
  --bonbon: #ff7ab8;  --bonbon-tint: #ffe6f1;
  --orange: #ff9a3d;  --orange-tint: #ffebd8;

  /* Cahier Seyès */
  --seyes-thin: #dce9f7;
  --seyes-strong: #b9d3ee;
  --seyes-margin: #f3a6b8;

  /* États */
  --ok: #1f9d57;
  --error: #d63a2b;

  --font-display: 'Shantell Sans', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius-sheet: 4px;
  --radius-field: 12px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --line: 2px solid var(--ink);
  --lift: 3px 3px 0 var(--ink);
  --lift-hover: 5px 5px 0 var(--ink);
  --lift-press: 1px 1px 0 var(--ink);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--soleil); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
hr { border: 0; border-top: 2px dashed var(--hair); margin: 2rem 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); }
h3 { font-size: 1.25rem; font-weight: 650; }
h4 { font-size: 1.05rem; font-weight: 650; }
.lead { font-size: 1.2rem; color: var(--ink-2); max-width: 56ch; }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.8em; font-size: 1.5rem; }
.prose h3 { margin-top: 1.4em; }
.prose li { margin-bottom: .35em; }

:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--soleil); border: var(--line); padding: .5em 1em; border-radius: var(--radius-pill); font-weight: 700; }
.skip-link:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-tight { padding-block: clamp(32px, 4vw, 48px); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: .4rem 0 0; color: var(--ink-2); }
.stack > * + * { margin-top: 1rem; }

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.35em;
  background: var(--btn-bg); color: var(--ink);
  border: var(--line); border-radius: var(--radius-pill);
  font: 650 1.02rem/1.1 var(--font-display);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--lift);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--lift-press); }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--lift-press); }
.btn-primary { --btn-bg: var(--soleil); }
.btn-pink { --btn-bg: var(--bonbon-tint); }
.btn-ink { --btn-bg: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--soleil); }
.btn-ink:hover { box-shadow: 4px 4px 0 var(--soleil); }
.btn-secondary { --btn-bg: var(--paper); }
.btn-sm { min-height: 38px; padding: .45em 1em; font-size: .92rem; box-shadow: 2px 2px 0 var(--ink); }
.btn-lg { min-height: 56px; padding: .8em 1.7em; font-size: 1.15rem; }
.btn-block { width: 100%; }
.btn-link {
  background: none; border: 0; padding: 0; min-height: 0; box-shadow: none;
  font: inherit; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer;
}
.btn-link:hover { transform: none; box-shadow: none; text-decoration-color: var(--soleil); }
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Champs de formulaire ---------- */
.field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.field label, .label { font-weight: 700; font-size: .95rem; }
.field .hint { font-size: .85rem; color: var(--ink-3); }
.input, .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=search],
.field input[type=number], .field input[type=url], .field input[type=tel], .field input[type=datetime-local], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .65em .9em;
  font: inherit; color: var(--ink); background: var(--paper);
  border: var(--line); border-radius: var(--radius-field);
  transition: box-shadow .12s;
}
.field textarea { min-height: 120px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--ciel-tint), 0 0 0 6px var(--ciel); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--ink); }
.field-error { color: var(--error); font-size: .9rem; font-weight: 700; }

/* ---------- Messages ---------- */
.flash-zone { display: grid; gap: .6rem; margin-top: 1rem; }
.flash {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 1rem; border: var(--line); border-radius: 14px; background: var(--paper);
  box-shadow: var(--lift); font-weight: 600;
}
.flash::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; border: 2px solid var(--ink); background: var(--ciel); }
.flash-success::before { background: var(--pomme); }
.flash-error::before { background: var(--tomate); }
.flash-info::before { background: var(--soleil); }

.notice { padding: 1rem 1.1rem; border-radius: 14px; background: var(--soleil-tint); border: 2px dashed var(--ink); }
.demo-banner { background: var(--ink); color: var(--paper); text-align: center; font-size: .88rem; padding: .45rem var(--gutter); }
.announcement { background: var(--soleil); border-bottom: var(--line); text-align: center; font-weight: 700; font-size: .95rem; padding: .5rem var(--gutter); }
.announcement a { text-decoration-color: var(--ink); }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: var(--line); }
.header-bar { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.brand { display: inline-flex; flex: none; border-radius: 10px; }
.brand img { height: 40px; width: auto; }
.main-nav { display: flex; align-items: center; gap: .25rem; margin-left: .75rem; }
.main-nav a {
  position: relative; padding: .55rem .75rem; border-radius: var(--radius-pill);
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.main-nav a:hover { background: var(--wash); }
.main-nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 4px; border-radius: 4px;
  background: var(--soleil); transform: rotate(-1deg);
}
.header-tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.header-search { position: relative; }
.header-search input {
  width: clamp(180px, 18vw, 260px); min-height: 42px; padding: .4em .9em .4em 2.3em;
  border: var(--line); border-radius: var(--radius-pill); font: inherit; font-size: .95rem; background: var(--paper); color: var(--ink);
}
.header-search input:focus { outline: none; box-shadow: 0 0 0 4px var(--ciel-tint), 0 0 0 6px var(--ciel); }
.header-search .icon { position: absolute; left: .8em; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.tool {
  position: relative; display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .55rem;
  border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; font-size: .9rem; background: none; border: 0; color: var(--ink); cursor: pointer;
}
.tool:hover { background: var(--wash); }
.tool .icon { width: 24px; height: 24px; }
.tool-lang { border: 2px solid var(--ink); height: 34px; min-width: 40px; font-size: .82rem; letter-spacing: .02em; }
.tool-cart { background: var(--soleil); border: var(--line); box-shadow: 2px 2px 0 var(--ink); height: 44px; padding: 0 .8rem 0 .7rem; display: inline-flex; gap: .35rem; }
.tool-cart:hover { background: var(--soleil); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.cart-count { min-width: 1.4em; font-family: var(--font-display); font-size: 1rem; }
.menu-toggle { display: none; }

/* Suggestions de recherche */
.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; width: min(420px, 90vw); z-index: 60;
  background: var(--paper); border: var(--line); border-radius: 16px; box-shadow: var(--lift-hover); padding: .4rem; display: none;
}
.search-suggest.is-open { display: block; }
.search-suggest a { display: flex; gap: .7rem; align-items: center; padding: .45rem .5rem; border-radius: 10px; text-decoration: none; }
.search-suggest a:hover, .search-suggest a.is-active { background: var(--wash); }
.search-suggest img { width: 40px; height: 52px; object-fit: cover; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; }
.search-suggest .s-title { font-weight: 700; line-height: 1.2; }
.search-suggest .s-meta { font-size: .82rem; color: var(--ink-3); }
.search-suggest .s-all { justify-content: center; font-weight: 700; border-top: 2px dashed var(--hair); border-radius: 0 0 10px 10px; margin-top: .3rem; }

/* Menu mobile */
.mobile-nav { display: none; }
@media (max-width: 1020px) {
  .main-nav, .header-search { display: none; }
  .menu-toggle { display: inline-grid; }
  .header-bar { min-height: 64px; gap: .5rem; }
  .brand img { height: 34px; }
  .mobile-nav {
    position: fixed; inset: 64px 0 0 0; z-index: 39; background: var(--paper);
    padding: 1.2rem var(--gutter) 2rem; overflow-y: auto; border-top: var(--line);
  }
  .mobile-nav.is-open { display: block; }
  .mobile-nav .header-search { display: block; margin-bottom: 1.2rem; }
  .mobile-nav .header-search input { width: 100%; min-height: 50px; font-size: 1rem; }
  .mobile-nav nav a {
    display: flex; align-items: center; justify-content: space-between; padding: .9rem .2rem;
    font: 650 1.3rem/1.2 var(--font-display); text-decoration: none; border-bottom: 2px dashed var(--hair);
  }
  .mobile-nav .mobile-extra { margin-top: 1.4rem; display: grid; gap: .7rem; }
  body.nav-open { overflow: hidden; }
}
/* Le logo « My Color’s » mesure 187 px de large à 40 px de haut, 159 px à 34 px : on garde la barre sur une ligne
   sans écraser le panier (menu complet serré jusqu'à 1220 px, outils mobiles serrés sous 440 px et 380 px). */
@media (max-width: 1220px) {
  .brand img { height: 34px; }
}
@media (max-width: 440px) {
  .tool-lang { display: none; }
  .mobile-nav .tool-lang { display: inline-grid; }
}
@media (max-width: 379px) {
  .brand img { height: 29px; }
}

/* ---------- Pied de page ---------- */
.site-footer { margin-top: clamp(48px, 7vw, 96px); background: var(--ink); color: #f2f1fa; padding: clamp(40px, 6vw, 72px) 0 1.5rem; }
.site-footer a { color: #fff; text-decoration-color: rgba(255,255,255,.35); }
.site-footer a:hover { text-decoration-color: var(--soleil); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.footer-grid h2 { font-size: 1.05rem; margin-bottom: .8rem; color: #fff; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: #d9d7ec; max-width: 34ch; }
.footer-trust { display: grid; gap: .5rem; margin-top: 1rem; font-size: .92rem; color: #d9d7ec; }
.footer-trust span { display: flex; gap: .5rem; align-items: flex-start; }
.footer-trust .icon { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--soleil); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .88rem; color: #cfcde6; }
.footer-bottom .btn-link { color: #fff; font-size: .88rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- Pastilles de prix (autocollants) ---------- */
.sticker {
  display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 .4rem;
  border: var(--line); border-radius: 50%; background: var(--soleil);
  font: 750 1.02rem/1 var(--font-display); color: var(--ink); transform: rotate(-8deg);
  box-shadow: 2px 2px 0 var(--ink); white-space: nowrap;
}
.sticker-free { background: var(--pomme); color: var(--paper); }
.sticker small { display: block; font-size: .62rem; font-weight: 600; margin-top: -.2rem; }

/* ---------- Puces (filtres, thèmes) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  --chip: var(--paper);
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem .9rem;
  border: var(--line); border-radius: var(--radius-pill); background: var(--paper);
  font-weight: 700; font-size: .93rem; text-decoration: none; white-space: nowrap;
}
.chip:hover { background: var(--wash); }
.chip[aria-current="true"], .chip.is-active { background: var(--chip); box-shadow: 2px 2px 0 var(--ink); }
.chip .count { font-weight: 600; color: var(--ink-3); font-size: .85rem; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 10px; margin-inline: -4px; scrollbar-width: thin; }

/* Couleurs de thème (une couleur de feutre par univers) */
[data-crayon="soleil"] { --crayon: var(--soleil); --crayon-tint: var(--soleil-tint); }
[data-crayon="tomate"] { --crayon: var(--tomate); --crayon-tint: var(--tomate-tint); }
[data-crayon="pomme"]  { --crayon: var(--pomme);  --crayon-tint: var(--pomme-tint); }
[data-crayon="ciel"]   { --crayon: var(--ciel);   --crayon-tint: var(--ciel-tint); }
[data-crayon="raisin"] { --crayon: var(--raisin); --crayon-tint: var(--raisin-tint); }
[data-crayon="bonbon"] { --crayon: var(--bonbon); --crayon-tint: var(--bonbon-tint); }
[data-crayon="orange"] { --crayon: var(--orange); --crayon-tint: var(--orange-tint); }
.chip[data-crayon] { --chip: var(--crayon-tint); }

/* ---------- Grilles de produits ---------- */
.grid-sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 44%), 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.grid-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 44%), 1fr)); gap: clamp(18px, 3vw, 32px); }
@media (max-width: 520px) { .grid-sheets, .grid-books { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* Feuille (coloriage à l'unité) : papier fin, coin scotché */
.sheet { position: relative; display: flex; flex-direction: column; }
.sheet-paper {
  position: relative; display: block; background: #fff; border: var(--line); border-radius: var(--radius-sheet);
  box-shadow: var(--lift); transition: transform .12s ease, box-shadow .12s ease; overflow: hidden;
}
.sheet-paper img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; background: #fff; }
.sheet:hover .sheet-paper, .sheet:focus-within .sheet-paper { transform: translate(-2px, -2px) rotate(-.6deg); box-shadow: var(--lift-hover); }
.sheet .tape {
  position: absolute; top: -9px; left: 50%; width: 72px; height: 22px; transform: translateX(-50%) rotate(-3deg); z-index: 2;
  background: rgba(255, 201, 60, .55); border-left: 2px dashed rgba(36, 33, 77, .18); border-right: 2px dashed rgba(36, 33, 77, .18);
}
.sheet .sticker { position: absolute; top: -12px; right: -10px; z-index: 3; min-width: 56px; height: 56px; font-size: .95rem; }
.card-body { padding: .8rem .1rem 0; display: grid; gap: .25rem; }
.card-title { font: 650 1.06rem/1.25 var(--font-display); margin: 0; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* toute la carte est cliquable */
.card-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; font-size: .86rem; color: var(--ink-3); }
.card-actions { position: relative; z-index: 2; margin-top: .55rem; }
.badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 700; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
}
.badge-owned { background: var(--pomme-tint); }
.badge-new { background: var(--bonbon-tint); }
.badge-story { background: var(--ciel-tint); }

/* Livret (livre-histoire) : couverture avec dos */
.booklet { position: relative; display: flex; flex-direction: column; }
.booklet-cover {
  position: relative; display: block; border: var(--line); border-radius: 4px 14px 14px 4px; overflow: hidden;
  box-shadow: var(--lift); transition: transform .12s ease, box-shadow .12s ease; background: var(--wash);
}
.booklet-cover img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; }
.booklet-cover::before { /* dos du livre */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 14px; z-index: 1;
  background: linear-gradient(90deg, rgba(36,33,77,.28), rgba(36,33,77,.06) 70%, rgba(255,255,255,.25));
  border-right: 2px solid rgba(36,33,77,.35);
}
.booklet:hover .booklet-cover, .booklet:focus-within .booklet-cover { transform: translate(-2px, -2px); box-shadow: var(--lift-hover); }
.booklet .sticker { position: absolute; top: -12px; right: -10px; z-index: 3; }

/* ---------- Héros (cahier Seyès + feuille à colorier) ---------- */
.seyes {
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin, 56px) - 1px), var(--seyes-margin) calc(var(--margin, 56px) - 1px), var(--seyes-margin) calc(var(--margin, 56px) + 1px), transparent calc(var(--margin, 56px) + 1px)),
    linear-gradient(var(--seyes-strong) 1px, transparent 1px),
    linear-gradient(var(--seyes-thin) 1px, transparent 1px),
    linear-gradient(90deg, var(--seyes-thin) 1px, transparent 1px);
  background-size: 100% 100%, 100% 32px, 100% 8px, 32px 100%;
}
.hero { border-bottom: var(--line); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(36px, 6vw, 80px); }
.hero h1 { max-width: 13ch; margin-bottom: 1.1rem; }
.hero .lead { color: var(--ink); background: rgba(255,255,255,.82); border-radius: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.4rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.hero-proof li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper); font-weight: 700; font-size: .9rem; }
.hero-proof .icon { width: 18px; height: 18px; color: var(--pomme); }

.color-sheet { position: relative; justify-self: center; width: min(100%, 520px); }
.color-sheet-paper {
  position: relative; background: #fff; border: var(--line); border-radius: 6px; padding: clamp(10px, 2vw, 18px);
  box-shadow: 6px 6px 0 var(--ink); transform: rotate(1.5deg);
}
.color-sheet .tape { position: absolute; top: -12px; width: 96px; height: 26px; background: rgba(255, 122, 184, .5); z-index: 2; border-left: 2px dashed rgba(36,33,77,.15); border-right: 2px dashed rgba(36,33,77,.15); }
.color-sheet .tape-l { left: 12%; transform: rotate(-6deg); }
.color-sheet .tape-r { right: 12%; transform: rotate(5deg); background: rgba(61, 155, 255, .45); }
.colorable { width: 100%; height: auto; touch-action: manipulation; }
.colorable .r { cursor: pointer; transition: fill .35s ease; }
.colorable .r:hover { filter: brightness(.97); }
.colorable .d { pointer-events: none; }
.color-hint { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 1.1rem 0 .6rem; font: 650 1rem/1.2 var(--font-display); }
.markers { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.marker {
  --m: var(--soleil);
  width: 42px; height: 42px; border-radius: 12px 12px 18px 18px; border: var(--line); background: var(--m); cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink); transition: transform .1s; position: relative;
}
.marker::after { content: ''; position: absolute; left: 50%; top: -9px; width: 14px; height: 9px; transform: translateX(-50%); border: 2px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--m); }
.marker[aria-pressed="true"] { transform: translateY(-7px); box-shadow: 2px 6px 0 var(--ink); }
.marker-eraser { --m: #fff; }
.marker-eraser::after { background: #fff; }
.color-reset { font-size: .9rem; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 28px; }
  .hero h1 { max-width: 16ch; }
  .seyes { --margin: 28px; }
  .color-sheet-paper { transform: none; }
}

/* ---------- Bandeaux et blocs ---------- */
.panel { background: var(--paper); border: var(--line); border-radius: var(--radius-panel); padding: clamp(20px, 3vw, 32px); }
.panel-soft { background: var(--wash); border: 0; border-radius: var(--radius-panel); padding: clamp(20px, 3vw, 32px); }

/* Le Club : carte de membre */
.club {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 4vw, 56px); align-items: center;
  background: var(--raisin-tint); border: var(--line); border-radius: 28px; padding: clamp(24px, 5vw, 56px); position: relative; overflow: hidden;
}
.club-price { display: flex; align-items: baseline; gap: .4rem; font-family: var(--font-display); margin: .6rem 0 1rem; }
.club-price strong { font-size: clamp(2.6rem, 2rem + 3vw, 3.8rem); line-height: 1; }
.club-price span { font-size: 1.1rem; color: var(--ink-2); }
.club-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; }
.club-list li { display: flex; gap: .6rem; align-items: flex-start; }
.club-list .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--raisin); }
.club-books { position: relative; height: 100%; min-height: 260px; }
.club-books .booklet-cover { position: absolute; width: 46%; }
.club-books .booklet-cover:nth-child(1) { left: 4%; top: 12%; transform: rotate(-9deg); }
.club-books .booklet-cover:nth-child(2) { left: 28%; top: 2%; transform: rotate(2deg); z-index: 2; }
.club-books .booklet-cover:nth-child(3) { left: 52%; top: 14%; transform: rotate(10deg); }
@media (max-width: 860px) { .club { grid-template-columns: 1fr; } .club-books { min-height: 220px; order: -1; } .club-books .booklet-cover { width: 36%; } }

/* Thèmes (tuiles) */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.theme {
  display: grid; justify-items: center; gap: .6rem; padding: 1.2rem .8rem 1rem; text-align: center;
  border: var(--line); border-radius: 18px; background: var(--paper); text-decoration: none; font-weight: 700;
  transition: transform .12s, box-shadow .12s;
}
.theme:hover { transform: translate(-2px, -2px); box-shadow: var(--lift); }
.theme-icon { position: relative; width: 64px; height: 64px; }
.theme-icon::before { content: ''; position: absolute; inset: 6px 0 0 8px; border-radius: 50%; background: var(--crayon, var(--soleil)); }
.theme-icon img, .theme-icon svg { position: relative; width: 64px; height: 64px; }
.theme small { font-weight: 600; color: var(--ink-3); }

/* Étapes (vraie séquence) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { position: relative; padding: 1.4rem 1.3rem 1.3rem 4.4rem; border: var(--line); border-radius: 18px; background: var(--paper); counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 1.1rem; top: 1.2rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: var(--line); border-radius: 50%; font: 750 1.2rem/1 var(--font-display); background: var(--crayon, var(--soleil));
}
.steps h3 { margin-bottom: .35rem; }
.steps p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Mystère */
.mystery-card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 4vw, 40px); align-items: center;
  border: var(--line); border-radius: 24px; padding: clamp(20px, 4vw, 40px); background: var(--paper);
}
.mystery-sheet {
  position: relative; width: clamp(120px, 22vw, 190px); aspect-ratio: 210 / 297; border: var(--line); border-radius: 4px; box-shadow: var(--lift);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.0) 0 40%, transparent 41%),
    repeating-linear-gradient(-45deg, var(--raisin-tint) 0 14px, #fff 14px 28px);
  display: grid; place-items: center; transform: rotate(-4deg);
}
.mystery-sheet span {
  display: grid; place-items: center; width: 64%; aspect-ratio: 1; border: var(--line); border-radius: 50%; background: var(--soleil);
  font: 800 clamp(2.4rem, 5vw, 3.6rem)/1 var(--font-display); box-shadow: 2px 2px 0 var(--ink);
}
@media (max-width: 600px) { .mystery-card { grid-template-columns: 1fr; justify-items: start; } }

/* Fil d'Ariane */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: 1.2rem 0 0; font-size: .9rem; color: var(--ink-3); }
.breadcrumb li + li::before { content: '/'; margin-right: .3rem; color: var(--hair); }
.breadcrumb a { color: var(--ink-2); }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination .current { font-weight: 700; padding: 0 .6rem; }

/* Tableaux simples */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .7rem .6rem; border-bottom: 2px dashed var(--hair); vertical-align: middle; }
.table th { font-family: var(--font-display); font-weight: 650; }

/* Empty state */
.empty { text-align: center; padding: clamp(32px, 6vw, 64px) 1rem; border: 2px dashed var(--hair); border-radius: 20px; }
.empty h2 { font-size: 1.5rem; }

/* Utilitaires */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; }
.flex { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.icon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

/* 05-lang.css */
/* My Color’s — choix de la langue à la première visite (views/partials/lang-choice.njk, public/js/site/05-lang.js).
   Une feuille scotchée au centre de l'écran, sur un fond assombri. Mobile d'abord : boutons l'un sous l'autre. */
.lang-choice[hidden] { display: none; }
.lang-choice {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; overflow-y: auto; overscroll-behavior: contain;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(36, 33, 77, .62);
}
html[data-lang-choice-open], html[data-lang-choice-open] body { overflow: hidden; }

.lang-choice-card {
  position: relative; width: min(100%, 500px); margin: auto; /* centrée, et jamais coupée si l'écran est trop bas */
  padding: 32px 20px 20px; text-align: center;
  background: var(--paper); color: var(--ink);
  border: var(--line); border-radius: 24px; box-shadow: 6px 6px 0 var(--ink);
}
.lang-choice-tape {
  position: absolute; top: -14px; left: 50%; width: 112px; height: 28px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 201, 60, .72); border-left: 2px dashed rgba(36, 33, 77, .18); border-right: 2px dashed rgba(36, 33, 77, .18);
}
.lang-choice-logo { width: auto; height: 34px; margin: 0 auto 1.1rem; }
.lang-choice-title { margin: 0; font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.35rem); line-height: 1.08; }
.lang-choice-title span { display: block; }
.lang-choice-squiggle { display: block; width: 8.5rem; height: auto; margin: .45rem auto 0; overflow: visible; }
.lang-choice-squiggle path { fill: none; stroke: var(--bonbon); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.lang-choice-text { margin: .8rem auto 1.3rem; color: var(--ink-2); font-size: 1.05rem; line-height: 1.45; text-wrap: balance; }
.lang-choice-slash { color: var(--ink-3); }

.lang-choice-actions { display: grid; gap: 12px; }
.lang-choice-btn { min-height: 62px; gap: .6rem; padding-inline: 1.1em; font-size: 1.22rem; }
.lang-choice-code {
  display: inline-grid; place-items: center; flex: none; width: 2.45em; height: 2.45em;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--crayon-tint, var(--paper));
  font: 800 .64em/1 var(--font-display); letter-spacing: .04em;
}
.lang-choice-btn.btn-primary .lang-choice-code { background: var(--paper); }
.lang-choice-note { margin: 1.1rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--ink-3); text-wrap: balance; }
.lang-choice-note span { display: block; }

@media (min-width: 520px) {
  .lang-choice-card { padding: 38px 32px 26px; }
  .lang-choice-logo { height: 38px; }
  .lang-choice-actions { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* Écran bas (téléphone à l'horizontale) : la fenêtre tient sans défiler. */
@media (max-height: 540px) {
  .lang-choice { padding-top: 20px; }
  .lang-choice-card { padding-top: 24px; padding-bottom: 18px; }
  .lang-choice-logo { display: none; }
  .lang-choice-text { margin: .5rem auto .9rem; }
  .lang-choice-note { margin-top: .75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .lang-choice { animation: lc-fade .25s ease both; }
  .lang-choice-card { animation: lc-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
  .lang-choice-squiggle path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lc-draw .8s .35s cubic-bezier(.6, 0, .3, 1) forwards; }
}
@keyframes lc-fade { from { opacity: 0; } }
@keyframes lc-pop { from { opacity: 0; transform: translateY(18px) rotate(-2deg) scale(.94); } }
@keyframes lc-draw { to { stroke-dashoffset: 0; } }

/* 15-home.css */
/* ==========================================================================
   My Color’s : page d'accueil
   Le parti pris : l'accueil est un grand livre de coloriage. Le monde My Color’s
   est dessiné au trait et se colorie sous les yeux du visiteur ; on feuillette
   un vrai livre-histoire ; on colorie la baleine dans l'atelier ; le coloriage
   mystère est un cadeau qui s'ouvre ; les étapes sont une bande dessinée.
   Aucune animation si l'appareil demande moins de mouvement.
   ========================================================================== */

/* ---------- Titre arc-en-ciel ---------- */
.rainbow .rw { white-space: nowrap; }
.rl { display: inline-block; color: var(--c); -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .05em .055em 0 var(--ink); }
.rl > span { display: inline-block; }
.rl.c0 { --c: var(--tomate); }
.rl.c1 { --c: var(--orange); }
.rl.c2 { --c: var(--soleil); }
.rl.c3 { --c: var(--pomme); }
.rl.c4 { --c: var(--ciel); }
.rl.c5 { --c: var(--raisin); }
.rl.c6 { --c: var(--bonbon); }

/* ---------- 1. Héros : titre + monde à colorier ---------- */
.hero2 { position: relative; border-bottom: var(--line); overflow: hidden; }
.hero2-head {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 56px); align-items: end;
  padding-block: clamp(26px, 4.2vw, 56px) clamp(4px, 1.5vw, 16px);
}
.hero2 .hero-title { margin: 0; max-width: 15ch; font-size: clamp(2.3rem, 1.3rem + 3.9vw, 4.4rem); line-height: 1.03; letter-spacing: -.01em; text-wrap: balance; }
.hero2-side .lead { margin: 0 0 1.1rem; background: rgba(255, 255, 255, .86); border-radius: 8px; }
.hero2 .hero-actions { margin: 0 0 1rem; }
@media (max-width: 860px) {
  .hero2-head { grid-template-columns: 1fr; align-items: start; }
  .hero2 .hero-title { max-width: 14ch; }
}
@media (max-width: 480px) {
  .hero2 .hero-actions { gap: .6rem; }
  .hero2 .hero-actions .btn-lg { padding: .68rem 1rem; font-size: .98rem; }
}

.world { position: relative; --wave: 2.6s; }
.world-canvas { position: relative; width: min(100%, 1720px); margin-inline: auto; aspect-ratio: 2400 / 1000; }
.world-art { display: block; width: 100%; height: 100%; overflow: visible; }
.world-art .world { cursor: pointer; }
.world-art .r, [data-colorize] .r { transition: fill .55s ease; }
.world-labels { position: absolute; inset: 0; pointer-events: none; }
.world-label {
  --tilt: -3deg;
  position: absolute; left: var(--x); top: var(--y); z-index: 2; pointer-events: auto;
  display: inline-flex; align-items: center; gap: .38rem; white-space: nowrap;
  padding: .3rem .72rem .32rem; border: var(--line); border-radius: var(--radius-pill); background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink); color: var(--ink); text-decoration: none;
  font: 700 clamp(.76rem, .52rem + .42vw, .98rem)/1.1 var(--font-display);
  transform: translate(-50%, -50%) rotate(var(--tilt));
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .22s ease, background-color .2s ease;
}
.world-label:nth-child(even) { --tilt: 3deg; }
.world-label::before { content: ''; flex: none; width: .66em; height: .66em; border: 2px solid var(--ink); border-radius: 50%; background: var(--crayon, var(--soleil)); }
.world-label:hover, .world-label:focus-visible, .world-label.is-hot { transform: translate(-50%, -50%) rotate(0deg) scale(1.12); background: var(--crayon-tint, var(--soleil-tint)); }
.world-label:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; }
.world-hint { display: none; align-items: center; justify-content: center; gap: .45rem; margin: .5rem 0 1rem; font: 700 .9rem/1.2 var(--font-display); color: var(--ink-2); }
.world-hint .icon { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .world-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .world-scroll::-webkit-scrollbar { display: none; }
  .world-canvas { width: 960px; max-width: none; height: 400px; aspect-ratio: auto; }
  .world { --wave: 4.2s; }
  .world-label { font-size: .8rem; }
  .world-hint { display: flex; }
}

/* ---------- 2. Bandeau qui défile ---------- */
.band {
  position: relative; overflow: hidden; border-bottom: var(--line);
  padding-block: clamp(28px, 4vw, 44px) clamp(26px, 4vw, 40px);
  background-color: var(--soleil);
  background-image: radial-gradient(rgba(36, 33, 77, .13) 1.6px, transparent 1.7px);
  background-size: 18px 18px;
}
.band-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.band-title { margin: 0; max-width: 26ch; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem); text-wrap: balance; }
.band-track-wrap {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.band-track { display: flex; width: max-content; margin: 0; padding: 16px 0 6px; list-style: none; }
.band-item { flex: none; padding-right: clamp(14px, 2vw, 24px); }
.band-item:first-child { padding-left: clamp(14px, 2vw, 24px); }
.band-item a { display: block; width: clamp(116px, 14vw, 160px); color: var(--ink); text-decoration: none; }
.band-paper {
  position: relative; display: block; padding: 6px; background: #fff; border: var(--line); border-radius: 4px;
  box-shadow: var(--lift); transform: rotate(var(--tilt, -2deg)); transition: transform .2s ease, box-shadow .2s ease;
}
.band-paper::before {
  content: ''; position: absolute; left: 50%; top: -10px; width: 46px; height: 18px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 255, 255, .7); border-left: 2px dashed rgba(36, 33, 77, .18); border-right: 2px dashed rgba(36, 33, 77, .18);
}
.band-paper img { display: block; width: 100%; height: auto; aspect-ratio: 420 / 594; object-fit: cover; }
.band-label { display: block; margin-top: .6rem; font: 700 .9rem/1.25 var(--font-display); text-align: center; text-wrap: balance; }
.band-item:nth-child(4n+1) { --tilt: -3deg; }
.band-item:nth-child(4n+2) { --tilt: 2deg; }
.band-item:nth-child(4n+3) { --tilt: -1deg; }
.band-item:nth-child(4n)   { --tilt: 3deg; }
.band-item a:hover .band-paper, .band-item a:focus-visible .band-paper { transform: rotate(0deg) translateY(-4px) scale(1.04); box-shadow: var(--lift-hover); }
.band-item a:focus-visible { outline: none; }
.band-item a:focus-visible .band-label { text-decoration: underline; text-decoration-thickness: 3px; }

/* ---------- Gribouillis sous les titres ---------- */
.squiggle { display: block; width: min(10.5rem, 62%); height: auto; margin: .3rem 0 .1rem; overflow: visible; }
.squiggle path { fill: none; stroke: var(--crayon, var(--soleil)); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.section-head .squiggle + p { margin-top: .3rem; }

/* ---------- 3. La bibliothèque et le livre à feuilleter ---------- */
.library-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.library-copy p { color: var(--ink-2); max-width: 44ch; }
.shelf { position: relative; z-index: 0; display: flex; align-items: flex-end; gap: clamp(6px, 1vw, 12px); list-style: none; margin: 1.6rem 0 2.2rem; padding: 0 10px; }
.shelf::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; z-index: -1;
  background: #C98B5A; border: var(--line); border-radius: 4px; box-shadow: 0 4px 0 var(--ink);
}
.shelf-book { flex: 1 1 0; max-width: 96px; transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%; transition: transform .2s ease; }
.shelf-book:nth-child(2) { --r: -4deg; }
.shelf-book:nth-child(4) { --r: 3deg; }
.shelf-book:nth-child(6) { --r: -2deg; }
.shelf-book a { display: block; overflow: hidden; background: #fff; border: var(--line); border-radius: 3px 7px 7px 3px; box-shadow: 3px 0 0 var(--ink); }
.shelf-book img { display: block; width: 100%; height: auto; }
.shelf-book:hover, .shelf-book:focus-within { transform: translateY(-8px) rotate(0deg); }
.shelf-book.is-open a { outline: 3px solid var(--soleil); outline-offset: 3px; }

.flipbook { position: relative; }
.fb-stage { position: relative; width: 100%; max-width: 660px; margin-inline: auto; aspect-ratio: 1.56; }
.fb-book { position: absolute; inset: 0; perspective: 2600px; transition: transform .8s cubic-bezier(.6, .05, .3, 1); }
.fb-book.is-closed { transform: translateX(-25%); }
.fb-page, .fb-leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.fb-page, .fb-face {
  overflow: hidden; background: #fff; border: var(--line); padding: clamp(10px, 2.4%, 18px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.fb-left { left: 0; border-radius: 12px 3px 3px 12px; box-shadow: -4px 5px 0 var(--ink), inset -14px 0 16px -14px rgba(36, 33, 77, .35); transition: opacity .5s ease; }
.fb-right { left: 50%; border-radius: 3px 12px 12px 3px; box-shadow: 5px 5px 0 var(--ink), inset 14px 0 16px -14px rgba(36, 33, 77, .35); }
.fb-book.is-closed .fb-left { opacity: 0; }
.fb-leaf { z-index: calc(200 - var(--i, 0)); left: 50%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.6, .05, .3, 1); cursor: pointer; }
.fb-leaf.is-flipped { transform: rotateY(-180deg); }
.fb-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fb-front { border-radius: 3px 12px 12px 3px; box-shadow: inset 14px 0 16px -14px rgba(36, 33, 77, .35); }
.fb-back { transform: rotateY(180deg); border-radius: 12px 3px 3px 12px; box-shadow: inset -14px 0 16px -14px rgba(36, 33, 77, .35); background: #fffdf7; }
.fb-cover { width: 100%; height: 100%; object-fit: cover; }
.fb-front.is-cover { padding: 0; }
.fb-img { width: 100%; height: auto; max-height: 86%; object-fit: contain; }
.fb-num { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; font: 700 .8rem/1 var(--font-display); color: var(--ink-3); }
.fb-front .fb-num { display: none; }
.fb-back { justify-content: center; }
.fb-text { margin: 0 0 1.2rem; font: 600 clamp(.82rem, .6rem + .55vw, 1.08rem)/1.55 var(--font-display); color: var(--ink); text-align: left; }
.fb-text::after {
  content: ''; display: block; clear: both; width: 64px; height: 12px; margin: 1.1rem auto 0;
  background:
    radial-gradient(circle, var(--tomate) 0 4px, var(--ink) 4.5px 5.5px, transparent 6px) 0 50% / 12px 12px no-repeat,
    radial-gradient(circle, var(--soleil) 0 4px, var(--ink) 4.5px 5.5px, transparent 6px) 50% 50% / 12px 12px no-repeat,
    radial-gradient(circle, var(--ciel) 0 4px, var(--ink) 4.5px 5.5px, transparent 6px) 100% 50% / 12px 12px no-repeat;
}
.fb-drop { float: left; margin: .08em .12em 0 0; font-size: 2.6em; line-height: .82; color: var(--tomate); -webkit-text-stroke: .03em var(--ink); paint-order: stroke fill; }
.fb-intro { background: #fffdf7; }
.fb-kicker { margin: 0 0 .6rem; font: 700 .85rem/1.2 var(--font-display); color: var(--ink-3); }
.fb-intro-title, .fb-end-title, .fb-cta-title { margin: 0 0 .5rem; font: 800 clamp(1.05rem, .8rem + .9vw, 1.5rem)/1.15 var(--font-display); }
.fb-intro-text, .fb-end-text { margin: 0; color: var(--ink-2); font-size: .95rem; }
.fb-cta { background: var(--soleil-tint); gap: .6rem; }
.fb-cta p { margin: 0; font-size: .95rem; }
.fb-cta .fb-cta-price { font: 800 1.6rem/1 var(--font-display); }
.fb-mobile-text { display: none; }
.fb-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
.fb-btn {
  display: grid; place-items: center; width: 46px; height: 46px; border: var(--line); border-radius: 50%; background: var(--paper);
  box-shadow: var(--lift); cursor: pointer; color: var(--ink); transition: transform .12s ease, box-shadow .12s ease;
}
.fb-btn .icon { width: 22px; height: 22px; }
.fb-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: var(--lift-hover); background: var(--soleil); }
.fb-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: var(--lift-press); }
.fb-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.fb-btn:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; }
.fb-status { min-width: 9rem; margin: 0; text-align: center; font: 700 .95rem/1 var(--font-display); }
@media (max-width: 960px) { .library-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .fb-stage { max-width: 380px; aspect-ratio: .64; }
  .fb-book.is-closed { transform: none; }
  .fb-left, .fb-back { display: none; }
  .fb-right, .fb-leaf { left: 0; width: 100%; }
  .fb-right { border-radius: 12px; }
  .fb-front { border-radius: 12px; }
  .fb-img { max-height: 62%; }
  .fb-mobile-text { display: block; margin: .7rem 0 1.2rem; font: 600 .92rem/1.45 var(--font-display); text-align: left; }
  .fb-front .fb-num { display: block; }
}

/* ---------- 4. Le Club : la carte de membre ---------- */
.club2 { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.club-card-wrap { display: grid; place-items: center; perspective: 900px; padding: 12px; }
.club-card {
  position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; gap: .6rem;
  width: min(100%, 390px); aspect-ratio: 1.586; padding: 18px 20px; color: #fff;
  background: var(--raisin); border: var(--line); border-radius: 22px; box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-4deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease;
}
.club-card::before {
  content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 30px; transform: rotate(-5deg);
  background: var(--soleil); border-block: var(--line);
}
.cc-top, .cc-bottom, .cc-stamps { position: relative; z-index: 1; }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cc-top img { width: 108px; height: auto; }
.cc-name { padding: .2rem .65rem; border: 2px solid rgba(255, 255, 255, .7); border-radius: var(--radius-pill); font: 700 .88rem/1.2 var(--font-display); }
.cc-stamps { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 18px); }
.cc-stamp { display: grid; place-items: center; width: clamp(48px, 13vw, 60px); aspect-ratio: 1; border: var(--line); border-radius: 50%; background: #fff; color: var(--raisin); box-shadow: 2px 2px 0 var(--ink); }
.cc-stamp:nth-child(2) { rotate: 8deg; }
.cc-stamp:nth-child(3) { rotate: -6deg; }
.cc-stamp .icon { width: 46%; height: 46%; }
.cc-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; font: 700 .9rem/1.2 var(--font-display); }
.cc-bottom strong { font-size: 1.55rem; line-height: 1; }
@media (max-width: 860px) { .club2 { grid-template-columns: 1fr; } .club-card-wrap { order: -1; } }

/* ---------- 5. Tuiles des univers : des autocollants ---------- */
.page-home .theme { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.page-home .theme:nth-child(odd) { transform: rotate(-1.2deg); }
.page-home .theme:nth-child(even) { transform: rotate(1deg); }
.page-home .theme:hover, .page-home .theme:focus-visible { transform: rotate(0deg) translate(-2px, -3px); box-shadow: var(--lift-hover); background: var(--crayon-tint, var(--soleil-tint)); }
.page-home .theme-icon::before { transition: transform .25s ease; }
.page-home .theme:hover .theme-icon::before { transform: scale(1.18); }

/* ---------- 7. L'atelier : la baleine à colorier ---------- */
.atelier { border-block: var(--line); }
.atelier-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.atelier .lead { background: rgba(255, 255, 255, .86); border-radius: 8px; }
@media (max-width: 860px) { .atelier-grid { grid-template-columns: 1fr; } }
.color-sheet { isolation: isolate; }
.crayon-cursor {
  position: absolute; left: 0; top: 0; z-index: 5; width: 64px; height: 64px; margin: -53px 0 0 -11px;
  pointer-events: none; opacity: 0; transition: transform .42s cubic-bezier(.45, 0, .25, 1), opacity .3s ease;
  filter: drop-shadow(2px 3px 0 rgba(36, 33, 77, .25));
}
.crayon-cursor.is-on { opacity: 1; }
.crayon-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 17% 83%; }
.crayon-cursor .cc-tip, .crayon-cursor .cc-cap { fill: var(--m, var(--ciel)); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.crayon-cursor .cc-body { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.crayon-cursor .cc-line { stroke: var(--m, var(--ciel)); stroke-width: 3; stroke-linecap: round; }
.crayon-cursor.is-drawing svg { animation: scribble .26s linear infinite; }
.hint-text { display: inline-flex; }
.hint-turn { display: none; }
.your-turn .hint-default { display: none; }
.your-turn .hint-turn { display: inline-block; padding: .2rem .65rem; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--soleil-tint); }
@media (max-width: 420px) {
  .markers { gap: .38rem; }
  .marker { width: 37px; height: 40px; }
}

/* ---------- 8. Le cadeau mystère ---------- */
.mystery2 { grid-template-columns: auto minmax(0, 1fr); }
.gift { position: relative; display: block; width: clamp(150px, 22vw, 220px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; }
.gift > svg:first-child { display: block; width: 100%; height: 100%; overflow: visible; }
.gift .gift-lid, .gift .gift-pop { transform-box: fill-box; transition: transform .55s cubic-bezier(.3, 1.45, .5, 1); }
.gift .gift-lid { transform-origin: 50% 100%; }
.gift.is-open .gift-lid { transform: translate(14px, -78px) rotate(16deg); }
.gift.is-open .gift-pop { transform: translateY(-92px); }
@media (hover: hover) {
  .gift:hover .gift-lid { transform: translate(14px, -78px) rotate(16deg); }
  .gift:hover .gift-pop { transform: translateY(-92px); }
}
.gift:focus-visible { outline: 3px solid var(--ciel); outline-offset: 6px; border-radius: 12px; }
.twinkle { position: absolute; width: 24px; height: auto; fill: var(--soleil); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; pointer-events: none; }
.tw-1 { top: 2%; right: -6%; width: 28px; }
.tw-2 { bottom: 18%; left: -10%; fill: var(--bonbon); }
.tw-3 { top: 30%; right: -14%; width: 18px; fill: var(--ciel); }
@media (max-width: 600px) { .mystery2 { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- 9. Comment ça marche : la bande dessinée ---------- */
.comic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 30px); list-style: none; margin: 1.5rem 0 0; padding: 0; }
.comic-panel { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink); }
.comic-panel:nth-child(1) { transform: rotate(-1deg); }
.comic-panel:nth-child(2) { transform: rotate(.8deg); }
.comic-panel:nth-child(3) { transform: rotate(-.6deg); }
.comic-art {
  padding: 12px 12px 0; border-bottom: 3px solid var(--ink);
  background-color: var(--crayon-tint, var(--soleil-tint));
  background-image: radial-gradient(rgba(36, 33, 77, .14) 1.4px, transparent 1.5px);
  background-size: 14px 14px;
}
.comic-art svg { display: block; width: 100%; height: auto; }
.comic-caption { position: relative; padding: 1.1rem 1.1rem 1.25rem 3.7rem; }
.comic-num { position: absolute; left: .95rem; top: 1rem; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: var(--line); border-radius: 50%; background: var(--crayon, var(--soleil)); font: 800 1.1rem/1 var(--font-display); }
.comic-caption h3 { margin: 0 0 .3rem; }
.comic-caption p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .comic { grid-template-columns: 1fr; max-width: 480px; } }

/* ---------- Confettis, panier ---------- */
.confetti-layer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 2000; pointer-events: none; }
.confetti { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 2px; }
.confetti.k1 { border-radius: 50%; }
.confetti.k2 { width: 6px; height: 14px; }
.cart-bump { display: inline-block; animation: cart-bump .45s ease; }

/* ==========================================================================
   Animations (seulement si l'appareil accepte le mouvement)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .rl { animation: rl-fill .55s calc(var(--i) * 85ms + 250ms) both; }
  .rl > span { animation: rl-hop .6s calc(var(--i) * 85ms + 250ms) both; }
  .hero-title:hover .rl > span { animation: rl-hop-again .55s calc(var(--i) * 40ms) both; }

  /* Les étiquettes apparaissent au moment où la couleur arrive sur leur coin du dessin. */
  .world-label { animation: label-in .45s calc(var(--d, 0) * var(--wave) + .55s) cubic-bezier(.3, 1.5, .5, 1) both; }
  .world-hint .icon { animation: nudge 1.4s ease-in-out infinite; }

  .band-track { animation: band-move 90s linear infinite; }
  .band-track-wrap:hover .band-track, .band-track-wrap:focus-within .band-track { animation-play-state: paused; }

  .squiggle.sq-wait path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .squiggle.sq-go path { stroke-dasharray: 1; animation: sq-draw .9s cubic-bezier(.6, 0, .3, 1) both; }

  .stamp-wait .cc-stamp { opacity: 0; }
  .is-stamped .cc-stamp { animation: stamp .5s calc(var(--k, 0) * 260ms + 150ms) cubic-bezier(.3, 1.4, .5, 1) both; }

  .page-home .theme:hover .theme-icon img { animation: wiggle .5s ease; }
  .gift:not(.is-open) > svg:first-child { animation: gift-wobble 4.5s ease-in-out 2s infinite; transform-origin: 50% 90%; }
  .gift:hover > svg:first-child { animation: none; }
  .twinkle { animation: twinkle 2.4s ease-in-out infinite; }
  .tw-2 { animation-delay: .8s; }
  .tw-3 { animation-delay: 1.5s; }
  .your-turn .hint-turn { animation: pop .45s ease both; }
  .your-turn .marker { animation: marker-hop .5s calc(var(--k, 0) * 70ms) ease both; }
  .comic-panel { transition: transform .25s ease; }
  .comic-panel:hover { transform: rotate(0deg) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .band-track-wrap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .band-item[aria-hidden="true"] { display: none; }
  .crayon-cursor { display: none; }
  .fb-book, .fb-leaf, .fb-left { transition: none; }
}

@keyframes rl-fill { from { color: #fff; } to { color: var(--c); } }
@keyframes rl-hop {
  0% { transform: none; }
  35% { transform: translateY(-.17em) rotate(-6deg); }
  70% { transform: translateY(.03em) rotate(2deg); }
  100% { transform: none; }
}
@keyframes rl-hop-again {
  0% { transform: none; }
  35% { transform: translateY(-.17em) rotate(6deg); }
  70% { transform: translateY(.03em) rotate(-2deg); }
  100% { transform: none; }
}
@keyframes label-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } }
@keyframes band-move { to { transform: translateX(-50%); } }
@keyframes sq-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes stamp { 0% { opacity: 0; scale: 1.9; } 60% { opacity: 1; scale: .9; } 100% { opacity: 1; scale: 1; } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 50% { rotate: 9deg; } 75% { rotate: -5deg; } }
@keyframes gift-wobble { 0%, 78%, 100% { rotate: 0deg; } 82% { rotate: -7deg; } 86% { rotate: 6deg; } 90% { rotate: -4deg; } 94% { rotate: 2deg; } }
@keyframes twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .55; opacity: .55; } }
@keyframes pop { 0% { scale: .6; opacity: 0; } 70% { scale: 1.08; opacity: 1; } 100% { scale: 1; } }
@keyframes marker-hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -12px; } }
@keyframes scribble {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(3px, -2px) rotate(-4deg); }
  50%  { transform: translate(-2px, 2px) rotate(3deg); }
  75%  { transform: translate(2px, 1px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }

/* 20-shop.css */
/* My Color’s — boutique : catalogue, fiches, thèmes, blog. Mobile d'abord. */

.page-head { padding-block: 8px 28px; border-bottom: 2px dashed var(--hair); }
.page-head h1 { margin-bottom: .4rem; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); }
.page-head .lead { margin-bottom: 0; }
.page-head .breadcrumb { margin-bottom: 1rem; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; }

/* Filtres et tri */
.filters { display: grid; gap: .8rem; }
.sortbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1rem; }
.sortbar-count { margin: 0; font-weight: 700; color: var(--ink-2); }
.sortbar-field { display: grid; gap: .2rem; font-size: .88rem; font-weight: 700; }
.sortbar-field select { min-height: 44px; padding: .4em 2em .4em .8em; font: inherit; font-weight: 600; border: var(--line); border-radius: var(--radius-field); background: var(--paper); }
.chips-scroll .chip { flex: none; }

/* Fiche produit */
.product { display: grid; gap: 28px; align-items: start; }
.product-media { width: min(100%, 460px); margin-inline: auto; }
.preview-sheet { position: relative; margin: 0; background: #fff; border: var(--line); border-radius: var(--radius-sheet); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-.8deg); }
.preview-sheet img { width: 100%; aspect-ratio: 210 / 297; object-fit: contain; background: #fff; user-select: none; -webkit-user-drag: none; }
.preview-sheet .tape { position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 201, 60, .6); z-index: 2; }
.preview-empty { display: grid; place-items: center; aspect-ratio: 210 / 297; padding: 1rem; text-align: center; color: var(--ink-3); background: var(--wash); }
.book-cover .booklet-cover { max-width: 420px; margin-inline: auto; }
.product-info h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem); }
.product-price { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-display); margin: 0 0 1.1rem; }
.product-price strong { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); line-height: 1; }
.product-price span { color: var(--ink-3); font-size: .95rem; font-family: var(--font-body); }
.buy-box { padding: 1.1rem; border: var(--line); border-radius: var(--radius-panel); background: var(--soleil-tint); margin-bottom: 1.5rem; }
.buy-box .btn-block { box-shadow: var(--lift); }
.trust-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; font-size: .95rem; }
.trust-list li { display: flex; gap: .55rem; align-items: center; }
.trust-list .icon { flex: none; width: 20px; height: 20px; color: var(--pomme); }
.product-desc { margin-bottom: 1rem; }
.eyebrow { margin: 0 0 .5rem; }
.h3 { font-size: 1.3rem; }
.facts { display: grid; gap: 0; margin: 1.2rem 0 0; }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 2px dashed var(--hair); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; text-align: right; color: var(--ink-2); }

/* Galerie des pages d'un livre */
.page-gallery { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.page-gallery li { position: relative; }
.page-thumb { display: block; background: #fff; border: var(--line); border-radius: var(--radius-sheet); box-shadow: 2px 2px 0 var(--ink); overflow: hidden; }
.page-thumb img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; }
.page-num { position: absolute; left: -6px; top: -8px; display: grid; place-items: center; width: 28px; height: 28px; border: var(--line); border-radius: 50%; background: var(--soleil); font: 700 .85rem/1 var(--font-display); }

/* Recherche */
.search-page { display: flex; gap: .6rem; margin-top: 1rem; max-width: 640px; }
.search-page .input { flex: 1; min-width: 0; }

/* Thèmes */
.theme-groups { display: grid; gap: 16px; }
.theme-group { display: grid; gap: .8rem; padding: 1rem; border: var(--line); border-radius: 22px; background: var(--crayon-tint, var(--wash)); }
.theme-group .theme-main { grid-template-columns: auto 1fr; justify-items: start; text-align: left; border: 0; background: transparent; padding: 0; gap: .4rem 1rem; align-items: center; }
.theme-group .theme-main small { grid-column: 2; margin-top: -.5rem; }
.theme-group .theme-main:hover { transform: none; box-shadow: none; }
.theme-group .theme-main > span:nth-child(2) { font: 700 1.25rem/1.2 var(--font-display); }
.theme-subs { list-style: none; padding: 0; margin: 0; }
.theme-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.theme-head h1 { margin: 0; }

/* Blog */
.post-grid { display: grid; gap: 22px; }
.post-card { position: relative; display: flex; flex-direction: column; border: var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--lift); overflow: hidden; transition: transform .12s, box-shadow .12s; }
.post-card:hover, .post-card:focus-within { transform: translate(-2px, -2px); box-shadow: var(--lift-hover); }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--line); }
.post-body { display: grid; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; }
.post-title { font-size: 1.25rem; margin: 0; }
.post-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-more { font-weight: 700; text-decoration: underline; text-decoration-color: var(--soleil); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.post-hero { margin: 1.5rem 0; }
.post-hero img { width: 100%; border: var(--line); border-radius: 20px; box-shadow: var(--lift); }
.post-content { max-width: none; margin-bottom: 2rem; font-size: 1.1rem; }
.post-content img { border-radius: 12px; margin-block: 1rem; }
.post-content blockquote { margin: 1.2rem 0; padding: .6rem 1rem; border-left: 5px solid var(--soleil); background: var(--soleil-tint); border-radius: 0 12px 12px 0; }

@media (min-width: 640px) {
  .page-gallery { grid-template-columns: repeat(5, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 64px); }
  .product-media { position: sticky; top: 96px; margin-inline: 0; }
  .page-gallery { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .post-grid { grid-template-columns: repeat(3, 1fr); }
  .filters { grid-template-columns: 1fr; }
}

/* 30-commerce.css */
/* ==========================================================================
   Commerce : panier, paiement, connexion, espace client, Club
   ========================================================================== */

.h-sm { font-size: 1.25rem; }
.btn-danger { --btn-bg: var(--tomate-tint); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink);
  border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--wash); }
.icon-btn .icon { width: 20px; height: 20px; }

/* ---------- Cartes de formulaire (connexion, succès…) ---------- */
.auth-card { max-width: 480px; margin: 1rem auto 0; box-shadow: var(--lift); }
.auth-card-wide { max-width: 720px; }
.auth-card h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.4rem); }
.success-mark {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: .8rem; border: var(--line); border-radius: 50%;
  background: var(--pomme); color: var(--paper); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-6deg);
}
.success-mark .icon { width: 32px; height: 32px; stroke-width: 3; }

/* ---------- Panier ---------- */
.cart-layout { display: grid; gap: 1.5rem; margin-top: 1rem; align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; } .cart-summary { position: sticky; top: 90px; } }

.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.cart-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .5rem .8rem; align-items: center;
  padding: .7rem; border: var(--line); border-radius: 16px; background: var(--paper);
}
.cart-lines-compact .cart-line { grid-template-columns: minmax(0, 1fr) auto; border-width: 0 0 2px; border-style: dashed; border-color: var(--hair); border-radius: 0; }
.cart-thumb {
  display: block; width: 56px; aspect-ratio: 210 / 297; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 2px 2px 0 var(--ink);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb-book { border-radius: 3px 8px 8px 3px; }
.cart-thumb-mystery, .cart-addon-art {
  display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, var(--raisin-tint) 0 8px, #fff 8px 16px);
}
.cart-thumb-mystery span, .cart-addon-art span {
  display: grid; place-items: center; width: 60%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--soleil);
  font: 800 1.2rem/1 var(--font-display);
}
.cart-line-body { display: grid; gap: .1rem; min-width: 0; }
.cart-line-title { font: 650 1.02rem/1.25 var(--font-display); text-decoration: none; overflow-wrap: anywhere; }
a.cart-line-title:hover { text-decoration: underline; text-decoration-color: var(--soleil); }
.cart-line-meta { font-size: .85rem; color: var(--ink-3); }
.cart-line-price { font: 700 1.05rem/1 var(--font-display); white-space: nowrap; }
@media (max-width: 480px) {
  .cart-line { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cart-line-price { grid-column: 2; grid-row: 2; }
  .cart-line-remove { grid-column: 3; grid-row: 1 / span 2; }
  .cart-line .btn { grid-column: 1 / -1; }
}

.cart-addon {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .6rem 1rem; align-items: center; margin-top: 1rem; padding: 1rem;
  border: 2px dashed var(--ink); border-radius: 16px; background: var(--raisin-tint);
}
.cart-addon-art { width: 56px; aspect-ratio: 210 / 297; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 2px 2px 0 var(--ink); }
.cart-addon-body h2 { font-size: 1.15rem; margin-bottom: .2rem; }
.cart-addon-body p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.cart-addon-actions { grid-column: 1 / -1; }
@media (min-width: 640px) { .cart-addon { grid-template-columns: 56px minmax(0, 1fr) auto; } .cart-addon-actions { grid-column: auto; } }
.qty { display: inline-flex; align-items: center; gap: .4rem; }
.qty form { margin: 0; }
.qty-value { min-width: 2ch; text-align: center; font: 750 1.2rem/1 var(--font-display); }

.cart-summary h2 { font-size: 1.4rem; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .3rem; font-family: var(--font-display); }
.cart-total dt { font-weight: 650; font-size: 1.1rem; }
.cart-total dd { margin: 0; font-weight: 800; font-size: 1.8rem; }
.cart-consent { margin: 1rem 0 0; padding: .8rem; border-radius: 12px; background: var(--wash); }
.cart-trust { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: .88rem; color: var(--ink-2); }
.cart-trust li { display: flex; gap: .5rem; align-items: flex-start; }
.cart-trust .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--pomme); }

/* ---------- Espace client ---------- */
.acct-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.2rem; }
.acct-nav .chip { min-height: 44px; }
.acct-nav .chip.is-active { background: var(--soleil-tint); box-shadow: 2px 2px 0 var(--ink); }
.acct-logout { margin: 0 0 0 auto; }
.acct-h { font-size: 1.5rem; }
.acct-credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.acct-credits-n, .sub-credits strong { font: 800 2.4rem/1 var(--font-display); margin-right: .4rem; }
.lib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 640px) { .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.lib-card { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.lib-thumb {
  display: block; border: var(--line); border-radius: 4px; overflow: hidden; background: #fff; box-shadow: var(--lift);
  aspect-ratio: 210 / 297;
}
.lib-card-book .lib-thumb { border-radius: 4px 14px 14px 4px; }
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lib-title { font: 650 1rem/1.25 var(--font-display); margin: .4rem 0 0; }
.lib-title a { text-decoration: none; }
.lib-meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin: 0; font-size: .85rem; color: var(--ink-3); }
.lib-left { margin: 0; font-size: .85rem; color: var(--ink-3); }
.lib-left-limit { color: var(--error); font-weight: 700; }
.acct-orders { list-style: none; margin: 0 0 .8rem; padding: 0; }
.acct-orders li, .acct-order-items li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 2px dashed var(--hair); }
.acct-order-items { list-style: none; margin: .6rem 0 0; padding: 0; }
.acct-order-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.05rem; }
.acct-cols { display: grid; gap: 1.2rem; }
@media (min-width: 800px) { .acct-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.acct-delete { margin-top: 1rem; }
.acct-delete summary { cursor: pointer; font-weight: 700; padding: .5rem 0; }
.sub-status { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 640px) { .sub-status { grid-template-columns: auto 1fr; gap: 2rem; } }
.sub-credits { display: flex; align-items: baseline; gap: .4rem; }

/* 40-consent.css */
/* My Color’s — bandeau de consentement aux cookies. Mobile d'abord : feuille en bas de l'écran. */
.consent[hidden] { display: none; }
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 120;
  padding: 0 max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  pointer-events: none;
}
.consent-inner {
  pointer-events: auto;
  max-width: 760px; margin-inline: auto;
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto;
  background: var(--paper); border: var(--line); border-radius: var(--radius-panel);
  box-shadow: var(--lift);
  padding: 16px;
}
.consent-title { font-size: 1.15rem; margin: 0 0 .35em; }
.consent-text { font-size: .92rem; line-height: 1.5; margin: 0 0 .9rem; color: var(--ink-2); }
.consent-text a { font-weight: 700; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions .btn { min-height: 48px; padding-inline: .8em; font-size: .98rem; box-shadow: 2px 2px 0 var(--ink); }
.consent-actions [data-consent-customise] { grid-column: 1 / -1; min-height: 44px; }
.consent-details { display: grid; gap: .6rem; margin-bottom: .9rem; padding: .8rem; background: var(--wash); border-radius: 14px; }
.consent-details[hidden] { display: none; }
.consent-details p { margin: 0; }
.consent-switch { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; line-height: 1.4; font-size: .95rem; }
.consent-switch[hidden] { display: none; }
.consent-switch input { flex: none; width: 24px; height: 24px; margin-top: 1px; accent-color: var(--ink); }
.consent-save { width: 100%; }
.consent-close { margin-top: .6rem; font-size: .9rem; }
@media (min-width: 640px) {
  .consent { padding-bottom: 16px; }
  .consent-inner { padding: 20px 24px; }
  .consent-actions { grid-template-columns: repeat(3, auto); justify-content: start; }
  .consent-actions [data-consent-customise] { grid-column: auto; }
}

/* 50-chat.css */
/* My Color’s — widget de chat. Mobile d'abord : bulle en bas à droite, panneau presque plein écran. */
.chat { position: fixed; right: 12px; bottom: calc(12px + var(--consent-h, 0px) + env(safe-area-inset-bottom)); z-index: 90; font-family: var(--font-body); }
.chat-fab {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 1rem;
  background: var(--soleil); color: var(--ink); border: var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--lift); cursor: pointer; font: 650 .98rem/1 var(--font-display);
}
.chat-fab:hover { box-shadow: var(--lift-hover); }
.chat-fab:active { box-shadow: var(--lift-press); transform: translate(2px, 2px); }
.chat-fab .icon { width: 24px; height: 24px; flex: none; }
.chat.is-open .chat-fab { display: none; }
/* Sur petit écran la bulle se réduit à son icône. */
@media (max-width: 479px) {
  .chat-fab { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .chat-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.chat-panel[hidden] { display: none; }
.chat-panel {
  position: fixed; right: 8px; left: 8px; bottom: calc(8px + var(--consent-h, 0px) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  height: min(560px, calc(100vh - 16px - var(--consent-h, 0px))); height: min(560px, calc(100dvh - 16px - var(--consent-h, 0px)));
  background: var(--paper); border: var(--line); border-radius: var(--radius-panel); box-shadow: var(--lift); overflow: hidden;
}
.chat-head { display: flex; justify-content: space-between; gap: .5rem; padding: 12px 14px; background: var(--soleil-tint); border-bottom: var(--line); }
.chat-title { font-size: 1.05rem; margin: 0; }
.chat-ai { margin: .15rem 0 0; font-size: .8rem; line-height: 1.35; color: var(--ink-2); }
.chat-ai-tag { display: inline-block; padding: 0 .45em; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper); font: 700 .72rem/1.5 var(--font-display); }
.chat-close { flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; }
.chat-close:hover { background: var(--paper); }
.chat-close .icon { width: 22px; height: 22px; }
.chat-log { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--wash); overscroll-behavior: contain; }
.chat-msg { max-width: 88%; padding: .6rem .8rem; border-radius: 16px; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.chat-msg p { margin: 0; white-space: pre-wrap; }
.chat-msg-bot { align-self: flex-start; background: var(--paper); border: 2px solid var(--hair); border-bottom-left-radius: 4px; }
.chat-msg-user { align-self: flex-end; background: var(--ciel-tint); border: 2px solid var(--ciel); border-bottom-right-radius: 4px; }
.chat-msg.is-wait { color: var(--ink-3); }
.chat-contact { margin-top: .6rem; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; background: var(--wash); }
.chat-suggest[hidden] { display: none; }
.chat-suggest .chip { font-size: .85rem; cursor: pointer; }
.chat-form { display: flex; gap: 8px; padding: 10px 14px; background: var(--wash); }
.chat-input {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: .5em .9em; font: inherit; font-size: 1rem; /* 16px : pas de zoom iOS */
  border: var(--line); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink);
}
.chat-input:focus { outline: none; box-shadow: 0 0 0 4px var(--ciel-tint), 0 0 0 6px var(--ciel); }
.chat-send { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: var(--line); border-radius: 50%; background: var(--soleil); color: var(--ink); cursor: pointer; }
.chat-send .icon { width: 22px; height: 22px; }
.chat-form.is-busy .chat-send { opacity: .5; }
.chat-foot { margin: 0; padding: 8px 14px 10px; font-size: .8rem; text-align: center; color: var(--ink-3); border-top: 2px dashed var(--hair); background: var(--paper); }
@media (min-width: 480px) {
  .chat { right: 20px; bottom: calc(20px + var(--consent-h, 0px)); }
  .chat-panel { left: auto; right: 20px; bottom: calc(20px + var(--consent-h, 0px)); width: 380px; }
}

/* 60-pages.css */
/* My Color’s — FAQ, contact, pages légales. */
.faq-list { display: grid; gap: .7rem; }
.faq-item { border: var(--line); border-radius: 16px; background: var(--paper); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: .9rem 3rem .9rem 1.1rem; position: relative;
  font: 650 1.02rem/1.35 var(--font-display); min-height: 48px; display: flex; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 1rem; top: 50%; translate: 0 -50%;
  width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%;
  background: var(--soleil); font: 700 1.1rem/1 var(--font-display);
}
.faq-item[open] summary::after { content: '–'; }
.faq-item[open] summary { border-bottom: 2px dashed var(--hair); }
.faq-answer { padding: .9rem 1.1rem 1.1rem; color: var(--ink-2); }
.faq-answer a { font-weight: 700; }
.contact-form .btn { margin-top: .4rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.legal-text h2 { scroll-margin-top: 1rem; }
.legal-text h3 { font-size: 1.1rem; }
.legal-text table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal-text { overflow-wrap: anywhere; }