@font-face {
    font-family: "Satoshi";
    src: url("https://yochamida.com/cdn/shop/t/5/assets/Satoshi-Regular.otf") format("opentype");
    font-weight: 400; font-display: swap;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("https://yochamida.com/cdn/shop/t/5/assets/Satoshi-Medium.otf") format("opentype");
    font-weight: 500; font-display: swap;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("https://yochamida.com/cdn/shop/t/5/assets/Satoshi-Bold.otf") format("opentype");
    font-weight: 700; font-display: swap;
  }
  @font-face {
    font-family: "Redaction35";
    src: url("https://yochamida.com/cdn/shop/t/5/assets/Redaction35-Regular.otf") format("opentype");
    font-weight: 400; font-display: swap;
  }

  :root {
    --yc-blue: #5D2ED6;
    --yc-blue-dark: #4A22B0;
    --yc-font-body: "Satoshi", system-ui, -apple-system, sans-serif;
    --yc-font-heading: "Redaction35", Georgia, "Times New Roman", serif;
    --yc-gutter: clamp(16px, 4vw, 48px);
    --yc-max-width: 1400px;
    --yc-radius-sm: 2px;
    --yc-transition: 200ms ease;

    /* Thème par défaut : crème (même convention data-theme que l'accueil). */
    --bg: #F5F5F0;
    --text: #000000;
    --text-soft: rgba(0, 0, 0, .7);
    --text-softer: rgba(0, 0, 0, .55);
    --surface: #ffffff;
    --line: rgba(0, 0, 0, .14);
    --line-soft: rgba(0, 0, 0, .2);
    --media-bg: #ECECE4;
    --recap-bg: #000000;
    --recap-text: #F5F5F0;
    color-scheme: light;
  }
  [data-theme="light"] {
    /* Mode sombre du site (la convention de l'accueil inverse les noms). */
    --bg: #111111;
    --text: #F5F5F0;
    --text-soft: rgba(245, 245, 240, .75);
    --text-softer: rgba(245, 245, 240, .58);
    --surface: #1B1B1B;
    --line: rgba(245, 245, 240, .16);
    --line-soft: rgba(245, 245, 240, .24);
    --media-bg: #232323;
    --recap-bg: #000000;
    --recap-text: #F5F5F0;
    color-scheme: dark;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--yc-font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--yc-transition), color var(--yc-transition);
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }

  .wrap { max-width: var(--yc-max-width); margin: 0 auto; padding: 0 var(--yc-gutter); }

  /* ---------- Header ---------- */
  .site-header {
    background: var(--yc-blue);
    color: #ffffff;
    position: sticky; top: 0; z-index: 50;
  }
  .site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; height: 64px;
  }
  .site-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .site-header__brand img { height: 38px; width: 38px; object-fit: contain; flex-shrink: 0; filter: invert(1); mix-blend-mode: screen; }
  .site-header__nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 28px); }
  .site-header__nav a {
    color: #ffffff; text-decoration: none; font-weight: 700; font-size: 14px;
    padding: 6px 2px; border-bottom: 2px solid transparent; transition: border-color var(--yc-transition);
  }
  .site-header__nav a:hover { border-color: rgba(255,255,255,.7); }
  .site-header__nav a.is-active { border-color: #ffffff; }

  /* Bouton thème : le même que sur la page d'accueil. */
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px;
    background: transparent; border: 0; color: #ffffff; cursor: pointer;
    transition: background var(--yc-transition);
  }
  .theme-toggle:hover { background: rgba(255,255,255,.15); }
  .theme-toggle .icon-sun { display: none; }
  [data-theme="light"] .theme-toggle .icon-moon { display: none; }
  [data-theme="light"] .theme-toggle .icon-sun { display: block; }

  /* ---------- Boutons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 26px; border: 1.5px solid transparent; border-radius: 999px;
    font-family: var(--yc-font-body); font-weight: 700; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    cursor: pointer; transition: background-color var(--yc-transition), border-color var(--yc-transition), color var(--yc-transition), transform var(--yc-transition), box-shadow var(--yc-transition);
  }
  .btn--primary { background: var(--yc-blue); color: #ffffff; }
  .btn--primary:hover { background: var(--yc-blue-dark); }
  .btn[disabled] { opacity: .45; cursor: not-allowed; }

  /* ---------- Hero ---------- */
  .hero { padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 48px); text-align: center; }
  .eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: var(--yc-blue); margin-bottom: 18px;
  }
  [data-theme="light"] .eyebrow { color: #A78BFA; }
  .hero h1 {
    font-family: var(--yc-font-heading); font-weight: 400;
    font-size: clamp(42px, 7vw, 88px); line-height: 1.02; letter-spacing: -.01em;
  }
  .hero p.sub {
    max-width: 560px; margin: 22px auto 0; font-size: 17px; color: var(--text-soft);
  }
  .hero .offer {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
    background: var(--yc-blue); color: #ffffff;
    padding: 10px 18px; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  }

  /* ---------- Bandeau de confiance ---------- */
  .trust { border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); padding: 24px 0; margin-top: clamp(28px, 4vw, 44px); }
  .trust .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; text-align: center; }
  .trust b { font-family: var(--yc-font-heading); font-weight: 400; font-size: 30px; color: var(--yc-blue); display: block; }
  [data-theme="light"] .trust b { color: #A78BFA; }
  .trust span { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-softer); }

  /* ---------- Comment ça marche ---------- */
  .how { padding: clamp(10px, 2vw, 20px) 0 clamp(20px, 3vw, 34px); }
  .how__grid { list-style: none; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .how__grid li { background: var(--surface); border: 1.5px solid var(--line); padding: 18px; }
  .how__grid b { font-family: var(--yc-font-heading); font-weight: 400; font-size: 26px; color: var(--yc-blue); display: block; }
  [data-theme="light"] .how__grid b { color: #A78BFA; }
  .how__grid span { font-weight: 700; display: block; margin-top: 6px; }
  .how__grid p { font-size: 13.5px; color: var(--text-soft); margin-top: 4px; }
  .how__grid a { color: var(--yc-blue); font-weight: 700; }
  [data-theme="light"] .how__grid a { color: #A78BFA; }

  /* ---------- FAQ ---------- */
  .faq { padding: clamp(28px, 4vw, 52px) 0 0; max-width: 820px; }
  .faq h2 { font-family: var(--yc-font-heading); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); margin-bottom: 18px; }
  .faq details { background: var(--surface); border: 1.5px solid var(--line); margin-bottom: 10px; }
  .faq summary {
    cursor: pointer; font-weight: 700; padding: 15px 18px; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  .faq summary::after { content: "+"; font-size: 20px; color: var(--yc-blue); flex-shrink: 0; }
  .faq details[open] summary::after { content: "–"; }
  .faq details p { padding: 0 18px 16px; font-size: 14.5px; color: var(--text-soft); }

  /* Le bandeau défilant (.ticker) a été supprimé le 2026-08-08 : plus aucun
     markup ne l'utilisait depuis un moment — c'était du CSS mort, et une boucle
     horizontale infinie cache de toute façon la moitié de son contenu à chaque
     instant. Rien à réintroduire ici sans un besoin réel. */

  /* ---------- Étapes ---------- */
  .step { padding: clamp(28px, 4vw, 52px) 0; }
  .step__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
  .step__num {
    font-family: var(--yc-font-heading); font-size: clamp(26px, 3vw, 38px); color: var(--yc-blue);
  }
  [data-theme="light"] .step__num { color: #A78BFA; }
  .step__title { font-family: var(--yc-font-heading); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); }
  .step__hint { color: var(--text-soft); margin-bottom: 26px; max-width: 640px; }

  /* ---------- Cartes console ---------- */
  .grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  }
  .card {
    background: var(--surface); border: 1.5px solid var(--line);
    border-radius: var(--yc-radius-sm); display: flex; flex-direction: column;
    transition: border-color var(--yc-transition), transform var(--yc-transition), box-shadow var(--yc-transition), background var(--yc-transition);
    cursor: pointer; position: relative;
  }
  /* Ombre d'élévation NEUTRE, pas colorée : une ombre teintée sur fond sombre se
     lit comme un halo décoratif, pas comme de la profondeur. L'accent reste porté
     par border-color, qui lui est bien coloré. */
  /* ⚠️ @media (hover: hover) OBLIGATOIRE. Sur un écran tactile, :hover reste
     collé sur le dernier élément touché jusqu'à ce qu'on touche ailleurs : une
     carte gardait donc son liseré violet et son décollement après un simple
     appui, et paraissait sélectionnée alors que les autres non. Le contour
     violet doit rester réservé à .card.is-selected, qui, lui, veut dire quelque
     chose. Ne jamais écrire un :hover décoratif sans ce garde. */
  @media (hover: hover) {
    .card:hover { border-color: var(--yc-blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
  }
  .card.is-selected { border-color: var(--yc-blue); border-width: 2px; box-shadow: 0 0 0 3px rgba(93,46,214,.18); }
  .card.is-selected::after {
    content: "✓"; position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; background: var(--yc-blue); color: #ffffff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 999px;
  }
  .card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--media-bg); border-bottom: 1.5px solid var(--line); }
  .card__media img, .card__media svg { width: 100%; height: 100%; object-fit: cover; }
  /* justify-content:center et non flex-start : les cartes d'une même rangée sont
     etirees a la hauteur de la plus haute, et rien n'occupe le bas depuis que
     .card__go a disparu du balisage. Sans centrage, le contenu se colle en haut
     et laisse une zone vide inexpliquee sous le prix. */
  .card__body { padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 1; }
  .card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .card__name { font-weight: 700; font-size: 17px; }
  .card__price {
    font-family: var(--yc-font-heading); font-size: 22px; color: var(--yc-blue); white-space: nowrap;
  }
  [data-theme="light"] .card__price { color: #A78BFA; }
  .card__desc { font-size: 13.5px; color: var(--text-soft); }
  .card details { margin-top: auto; font-size: 13px; }
  .card details summary {
    cursor: pointer; font-weight: 700; color: var(--yc-blue); list-style: none;
    letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; padding-top: 6px;
  }
  [data-theme="light"] .card details summary { color: #A78BFA; }
  .card details summary::after { content: " +"; }
  .card details[open] summary::after { content: " –"; }
  .card details ul { margin: 8px 0 2px 16px; color: var(--text-soft); display: grid; gap: 4px; }

  /* ---------- Options ---------- */
  .opt-group { margin-bottom: 26px; }
  .opt-group__title {
    font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px;
    color: var(--text-softer); margin-bottom: 12px;
  }
  .opt-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .chip {
    border: 1.5px solid var(--line-soft); background: var(--surface); color: var(--text);
    padding: 10px 16px; border-radius: 999px; font-weight: 500; font-size: 14px;
    cursor: pointer; transition: background-color var(--yc-transition), border-color var(--yc-transition), color var(--yc-transition), transform var(--yc-transition), box-shadow var(--yc-transition); user-select: none;
    font-family: var(--yc-font-body);
  }
  .chip:hover { border-color: var(--yc-blue); }
  .chip.is-selected { background: var(--yc-blue); border-color: var(--yc-blue); color: #ffffff; }
  .chip b { font-weight: 700; }
  .stepper { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--line-soft); background: var(--surface); border-radius: 999px; overflow: hidden; }
  .stepper button {
    width: 40px; height: 40px; border: 0; background: transparent; font-size: 20px; cursor: pointer;
    font-family: inherit; color: var(--text); transition: background var(--yc-transition);
  }
  .stepper button:hover { background: rgba(93,46,214,.12); }
  .stepper output { min-width: 100px; text-align: center; font-weight: 700; font-size: 14px; }
  .included {
    display: flex; align-items: center; gap: 12px; background: var(--surface);
    border: 1.5px dashed var(--yc-blue); padding: 14px 18px; margin-bottom: 26px; font-size: 14.5px;
  }
  .included b { color: var(--yc-blue); }
  [data-theme="light"] .included b { color: #A78BFA; }
  .muted-note { font-size: 13px; color: var(--text-softer); margin-top: 8px; }

  /* ---------- Expédition ---------- */
  .ship-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 820px; }
  .ship {
    background: var(--surface); border: 1.5px solid var(--line); padding: 18px;
    cursor: pointer; transition: background-color var(--yc-transition), border-color var(--yc-transition), color var(--yc-transition), transform var(--yc-transition), box-shadow var(--yc-transition); position: relative;
  }
  .ship:hover { border-color: var(--yc-blue); }
  .ship.is-selected { border-color: var(--yc-blue); border-width: 2px; box-shadow: 0 0 0 3px rgba(93,46,214,.18); }
  .ship.is-disabled { opacity: .55; cursor: not-allowed; }
  .ship__name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .ship__desc { font-size: 13.5px; color: var(--text-soft); margin-top: 6px; }
  .badge-soon {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: var(--text); color: var(--bg); padding: 3px 8px;
  }

  /* ---------- Layout config + récap ---------- */
  .config-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
  @media (min-width: 1024px) {
    .config-layout { grid-template-columns: 1fr 330px; align-items: start; }
    .recap { position: sticky; top: 84px; }
  }
  .recap {
    background: var(--recap-bg); color: var(--recap-text); padding: 22px;
    border: 1.5px solid var(--line);
  }
  .recap h3 { font-family: var(--yc-font-heading); font-weight: 400; font-size: 26px; margin-bottom: 14px; }
  .recap ul { list-style: none; display: grid; gap: 8px; font-size: 14px; }
  .recap li { display: flex; justify-content: space-between; gap: 12px; }
  .recap li span:last-child { font-weight: 700; white-space: nowrap; }
  .recap .free { color: #8fd49a; }
  .recap__total {
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1.5px solid rgba(245,245,240,.25); margin-top: 14px; padding-top: 14px;
  }
  .recap__total .amount { font-family: var(--yc-font-heading); font-size: 34px; color: #ffffff; }
  .recap .btn { width: 100%; margin-top: 16px; }
  .recap__note { font-size: 12px; color: rgba(245,245,240,.65); margin-top: 10px; }
  .recap .empty { color: rgba(245,245,240,.6); font-size: 14px; }
  .recap__form { display: grid; gap: 10px; margin-top: 16px; }
  .recap__form label {
    display: grid; gap: 5px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: rgba(245,245,240,.6);
  }
  .recap__form input, .recap__form textarea {
    width: 100%; padding: 10px 14px; font-family: var(--yc-font-body); font-size: 14px;
    border: 1.5px solid rgba(245,245,240,.25); border-radius: 14px;
    background: rgba(245,245,240,.06); color: var(--recap-text); outline: none;
    transition: border-color var(--yc-transition);
  }
  .recap__form input:focus, .recap__form textarea:focus { border-color: var(--yc-blue); }
  .recap__form textarea { resize: vertical; min-height: 44px; }
  .recap__error {
    display: none; margin-top: 10px; font-size: 13px; color: #ff9d96;
  }
  .recap__success { text-align: center; padding: 10px 0 4px; }
  .recap__success .big { font-size: 40px; line-height: 1; }
  .recap__success h4 {
    font-family: var(--yc-font-heading); font-weight: 400; font-size: 24px; margin-top: 10px;
  }
  .recap__success p { font-size: 13.5px; color: rgba(245,245,240,.75); margin-top: 8px; }
  .recap__trust {
    list-style: none; margin-top: 14px; padding-top: 12px;
    border-top: 1.5px solid rgba(245,245,240,.18);
    display: grid; gap: 7px; font-size: 12.5px; color: rgba(245,245,240,.85);
  }
  .recap__trust li { display: flex; gap: 8px; align-items: baseline; justify-content: flex-start; text-align: left; }
  .recap__trust li::before { content: "✓"; color: #8fd49a; font-weight: 700; flex-shrink: 0; }

  /* ---------- Footer ---------- */
  .site-footer {
    background: var(--yc-blue); color: #ffffff; margin-top: clamp(40px, 6vw, 72px);
    padding: 28px 0; font-size: 13.5px;
  }
  .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
  .site-footer a { color: #ffffff; }

  /* ---------- Polish global (passe design) ---------- */
  * { -webkit-tap-highlight-color: transparent; }
  button, a, summary, input, textarea { touch-action: manipulation; }
  ::selection { background: rgba(93,46,214,.25); }
  [data-theme="light"] ::selection { background: rgba(167,139,250,.35); }

  /* Focus clavier visible partout (jamais d'outline supprimé sans remplacement) */
  :focus-visible { outline: 2.5px solid var(--yc-blue); outline-offset: 2px; border-radius: 4px; }
  [data-theme="light"] :focus-visible { outline-color: #A78BFA; }
  .btn:focus-visible, .chip:focus-visible { outline-offset: 3px; }

  /* Lien d'évitement (a11y) */
  .skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--yc-blue); color: #fff; font-weight: 700; font-size: 13px;
    padding: 10px 16px; transition: top 150ms ease; text-decoration: none;
  }
  .skip-link:focus { top: 12px; }

  /* Micro-interactions boutons */
  .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(93,46,214,.35); }
  .btn--primary:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(93,46,214,.3); }
  .chip:hover { transform: translateY(-1px); }
  .chip:active { transform: translateY(0); }

  /* Révélation au défilement (désactivée si mouvement réduit) */
  html.js-rv .rv { opacity: 0; transform: translateY(14px); }
  html.js-rv .rv.in { opacity: 1; transform: none; transition: opacity 550ms ease, transform 550ms cubic-bezier(.2,.7,.2,1); }
  .rv.in.d1 { transition-delay: 70ms; } .rv.in.d2 { transition-delay: 140ms; }
  .rv.in.d3 { transition-delay: 210ms; } .rv.in.d4 { transition-delay: 280ms; }
  @media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
  }

  /* Titres équilibrés */
  h1, h2 { text-wrap: balance; }

  /* Chiffres tabulaires pour tout ce qui est prix */
  .pdp-price .amount, .mini-recap, .card__price, .recap ul { font-variant-numeric: tabular-nums; }

  /* Impression : tout le contenu à révélation reste visible */
  @media print { .rv { opacity: 1 !important; transform: none !important; } }
  /* Mouvement réduit : pas de défilement lissé (skip-link, ancres) */
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  /* Le focus clavier reste visible sur les champs malgré outline:none local */
  .buy-box input:focus-visible, .recap__form input:focus-visible, .recap__form textarea:focus-visible { outline: 2.5px solid var(--yc-blue); outline-offset: 2px; }

  /* ---------- Page produit ---------- */
  /* Cible tactile de 44 px et fond discret : sur téléphone c'est le geste le
     plus fréquent de la fiche, il ne doit pas se chercher. */
  .back-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 12px;
    margin:14px 0 2px; border-radius:999px; background:var(--p2-pill); border:1.5px solid var(--p2-pill-line);
    font-weight:700; color:var(--yc-blue); text-decoration:none; font-size:14px;
    transition:border-color var(--yc-transition), transform var(--yc-transition); }
  [data-theme="light"] .back-link { color:#A78BFA; }
  @media (hover: hover) { .back-link:hover { border-color:var(--p2-sel); transform:translateX(-2px); } }
  .back-link span { font-size:16px; line-height:1; }
  [data-theme="light"] .back-link { color:#A78BFA; }
  .product-top { display:grid; gap:26px; grid-template-columns:1fr; margin-top:18px; }
  @media (min-width:900px){ .product-top{ grid-template-columns:1fr 1fr; align-items:start; } }
  .product-media { border:1.5px solid var(--line); background:var(--media-bg); aspect-ratio:4/3; overflow:hidden; }
  .product-media img { width:100%; height:100%; object-fit:cover; }
  .product-name { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(34px,5vw,58px); line-height:1.02; }
  .product-price { font-family:var(--yc-font-heading); color:var(--yc-blue); font-size:32px; margin-top:6px; }
  [data-theme="light"] .product-price { color:#A78BFA; }
  .product-pitch { font-size:17px; color:var(--text-soft); margin-top:12px; max-width:46ch; }
  .reassure { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .reassure span { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; background:var(--surface); border:1.5px solid var(--line); padding:7px 12px; }
  .reassure b { color:var(--yc-blue); }
  [data-theme="light"] .reassure b { color:#A78BFA; }
  .incl { list-style:none; margin-top:18px; display:grid; gap:9px; }
  .incl li { display:flex; gap:10px; align-items:baseline; font-size:14.5px; }
  .incl li::before { content:"✓"; color:var(--yc-blue); font-weight:700; flex-shrink:0; }
  [data-theme="light"] .incl li::before { color:#A78BFA; }
  .deselect-hint { font-size:12.5px; color:var(--text-softer); margin-top:2px; }
  .chip.is-selected::after { content:" ✕"; font-weight:700; opacity:.85; }
  /* ---------- Vidéos ---------- */
  .videos { padding:clamp(30px,5vw,60px) 0; }
  .videos__grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
  .video-tile { aspect-ratio:16/9; border:1.5px solid var(--line); background:var(--media-bg); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
  .video-tile iframe { width:100%; height:100%; border:0; }
  .video-ph { text-align:center; color:var(--text-softer); padding:16px; }
  .video-ph__play { width:54px; height:54px; border-radius:999px; background:var(--yc-blue); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
  .video-ph b { display:block; font-size:13.5px; color:var(--text-soft); }
  .video-ph span { font-size:12px; }
  /* ---------- Cartes de la grille (liens) ---------- */
  a.card { text-decoration:none; color:inherit; }
  /* .card__go a ete supprime le 2026-08-08 : la regle existait encore (avec un
     margin-top:auto cense remplir le bas de la carte) alors qu'aucun des deux
     gabarits de carte ne produisait cet element. CSS mort, comme le ticker. */
  .card__media { overflow:hidden; }
  .card__media img { transition: transform 550ms cubic-bezier(.2,.7,.2,1); }
  /* Meme garde que .card:hover dans styles-base.css : sur tactile, :hover reste
     colle sur la derniere carte touchee et son image restait zoomee. */
  @media (hover: hover) { a.card:hover .card__media img { transform: scale(1.05); } }
  @media (prefers-reduced-motion: reduce) { .card__media img { transition:none; } a.card:hover .card__media img { transform:none; } }

  /* ---------- Halo du héros ---------- */
  .hero--halo { position:relative; overflow:hidden; }
  .hero--halo::before {
    content:""; position:absolute; inset:auto; left:50%; top:-140px; width:720px; height:520px;
    transform:translateX(-50%); pointer-events:none;
    background: radial-gradient(closest-side, rgba(93,46,214,.16), transparent 70%);
  }
  [data-theme="light"] .hero--halo::before { background: radial-gradient(closest-side, rgba(167,139,250,.13), transparent 70%); }
  .hero--halo .wrap { position:relative; }

  /* ---------- Fiche produit (façon boutique Shopify) ---------- */
  /* align-items:center est indispensable, pas décoratif : les liens portent un
     padding vertical (zone de tap de 44 px) alors que les séparateurs « › » sont
     de simples nœuds de texte, qui deviennent des éléments flex anonymes sans ce
     padding. Sans axe commun, les chevrons remontent au-dessus des libellés. */
  .breadcrumb { font-size:12.5px; color:var(--text-softer); padding:16px 0 4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .breadcrumb a { color:var(--text-softer); text-decoration:none; }
  .breadcrumb a:hover { color:var(--yc-blue); }
  .pdp { display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,44px); padding:8px 0 clamp(28px,4vw,52px); }
  @media (min-width:920px){ .pdp{ grid-template-columns:1.05fr 1fr; align-items:start; } .pdp-info{ position:sticky; top:84px; } }
  .pdp-main { position:relative; border:1.5px solid var(--line); background:var(--media-bg); aspect-ratio:1/1; overflow:hidden; }
  .pdp-main img { width:100%; height:100%; object-fit:cover; }
  .pdp-badge { position:absolute; top:12px; left:12px; background:var(--yc-blue); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; }
  .pdp-cap { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--text-soft); }
  .pdp-cap b { color:var(--yc-blue); }
  [data-theme="light"] .pdp-cap b { color:#A78BFA; }

  .pdp-promo { display:inline-block; background:var(--yc-blue); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; }
  .pdp-service { display:flex; align-items:center; gap:9px; margin-top:14px; border:1.5px solid var(--line); background:var(--surface); padding:10px 14px; font-size:12.5px; font-weight:700; }
  .pdp-service .sv-chip { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:var(--yc-blue); color:#fff; font-weight:700; font-size:12px; flex-shrink:0; }
  .pdp-service .sv-rating { margin-left:auto; white-space:nowrap; color:var(--text-soft); font-weight:700; }
  .pdp-service .sv-rating .star { color:var(--yc-blue); }
  [data-theme="light"] .pdp-service .sv-rating .star { color:#A78BFA; }
  .pdp-title { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(34px,5vw,58px); line-height:1.02; margin-top:14px; }
  .pdp-desc { font-size:15.5px; color:var(--text-soft); margin-top:12px; max-width:52ch; }
  .pdp-stock { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px; color:var(--text-soft); }
  .pdp-stock .dot { width:9px; height:9px; border-radius:999px; background:#2f9e51; box-shadow:0 0 0 4px rgba(47,158,81,.18); }
  .pdp-stock b { color:var(--text); }
  .pdp-price { display:flex; align-items:baseline; gap:12px; margin:18px 0 4px; }
  .pdp-price .amount { font-family:var(--yc-font-body); font-weight:700; font-size:clamp(30px,4.5vw,40px); color:var(--text); letter-spacing:-.01em; }
  .pdp-price .from { font-size:13px; color:var(--text-softer); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

  .pdp .opt-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:560px){ .pdp .opt-row{ grid-template-columns:1fr; } }
  .pdp .chip { width:100%; text-align:center; justify-content:center; padding:13px 14px; font-size:13.5px; }
  .deselect-tip { font-size:12px; color:var(--text-softer); margin-top:10px; }
  .mini-recap { margin-top:18px; border-top:1.5px solid var(--line); padding-top:14px; display:grid; gap:6px; font-size:13.5px; }
  .mini-recap li { list-style:none; display:flex; justify-content:space-between; gap:12px; }
  .mini-recap .free { color:#2f9e51; font-weight:700; }
  [data-theme="light"] .mini-recap .free { color:#8fd49a; }
  .mini-recap .total { border-top:1.5px solid var(--line); margin-top:5px; padding-top:9px; font-weight:700; font-size:15px; }
  .mini-recap .total span:last-child { color:var(--text); }

  .buy-box { margin-top:20px; display:grid; gap:12px; }
  .buy-box label { display:grid; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-softer); }
  .buy-box input { width:100%; padding:13px 15px; font-family:var(--yc-font-body); font-size:15px; border:1.5px solid var(--line-soft); border-radius:999px; background:var(--surface); color:var(--text); outline:none; transition:border-color var(--yc-transition); }
  .buy-box input:focus { border-color:var(--yc-blue); }
  /* Sombre : champs plus contrastés (WCAG 1.4.11) */
  [data-theme="light"] .buy-box input { background:#242424; border-color:rgba(255,255,255,.34); }
  [data-theme="light"] .buy-box input::placeholder { color:rgba(245,245,240,.5); }
  .btn--buy { width:100%; padding:17px 24px; font-size:15px; }
  .btn--buy svg { width:18px; height:18px; }
  .buy-note { font-size:12.5px; color:var(--text-softer); text-align:center; }
  .buy-success { border:1.5px solid var(--yc-blue); background:var(--surface); padding:20px; text-align:center; }
  .buy-success .big { font-size:40px; line-height:1; color:var(--yc-blue); }
  [data-theme="light"] .buy-success .big { color:#A78BFA; }
  .buy-success h4 { font-family:var(--yc-font-heading); font-weight:400; font-size:22px; margin-top:8px; }
  .buy-success p { font-size:13.5px; color:var(--text-soft); margin-top:8px; }

  .pdp-badges { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5px; background:var(--line); border:1.5px solid var(--line); margin-top:20px; }
  @media (min-width:520px){ .pdp-badges{ grid-template-columns:repeat(4,1fr); } }
  .pdp-badges div { background:var(--surface); padding:14px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; }
  .pdp-badges svg { width:22px; height:22px; color:var(--yc-blue); }
  [data-theme="light"] .pdp-badges svg { color:#A78BFA; }
  .pdp-badges b { font-size:12px; }
  .pdp-badges span { font-size:11px; color:var(--text-softer); }

  .pdp-pay { margin-top:18px; }
  .pdp-pay__label { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--text-soft); margin-bottom:10px; }
  .pdp-pay__label svg { width:16px; height:16px; color:var(--yc-blue); }
  [data-theme="light"] .pdp-pay__label svg { color:#A78BFA; }
  .pdp-pay__icons { display:flex; flex-wrap:wrap; gap:6px; }
  .pay-ic { display:inline-flex; width:40px; height:26px; background:#fff; border:1.5px solid var(--line); border-radius:2px; overflow:hidden; align-items:center; justify-content:center; }
  .pay-ic svg { width:100%; height:100%; }

  .pdp-acc { margin-top:22px; }
  .pdp-acc details { border-top:1.5px solid var(--line); }
  .pdp-acc details:last-child { border-bottom:1.5px solid var(--line); }
  .pdp-acc summary { cursor:pointer; list-style:none; padding:16px 2px; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px; }
  .pdp-acc summary::-webkit-details-marker { display:none; }
  .pdp-acc summary::after { content:"+"; font-size:22px; color:var(--yc-blue); }
  [data-theme="light"] .pdp-acc summary::after { color:#A78BFA; }
  .pdp-acc details[open] summary::after { content:"–"; }
  .pdp-acc details > div { padding:0 2px 18px; font-size:14px; color:var(--text-soft); }
  .pdp-acc ul { margin:0 0 0 18px; display:grid; gap:6px; }
  .pdp-acc summary:hover { color:var(--yc-blue); }
  [data-theme="light"] .pdp-acc summary:hover { color:#A78BFA; }

  /* Galerie : zoom doux au survol */
  .pdp-main img { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
  .pdp-main:hover img { transform: scale(1.035); }
  @media (prefers-reduced-motion: reduce) { .pdp-main img { transition:none; } .pdp-main:hover img { transform:none; } }

  /* Point de stock : pulsation douce */
  @keyframes stock-pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(47,158,81,.18);} 50%{ box-shadow:0 0 0 7px rgba(47,158,81,.08);} }
  .pdp-stock .dot { animation: stock-pulse 2.2s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .pdp-stock .dot { animation:none; } }

  /* Barre d'achat collante (mobile) */
  .buybar {
    position: fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:center; gap:14px; justify-content:space-between;
    background: #3D1D96; color:#fff; border-top:1.5px solid rgba(255,255,255,.25);
    padding: 12px clamp(14px,4vw,20px);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform 300ms cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  }
  .buybar.show { transform: translateY(0); }
  .buybar__price { display:grid; line-height:1.15; }
  .buybar__price small { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
  .buybar__price b { font-size:19px; font-weight:700; font-variant-numeric: tabular-nums; }
  .buybar__cta {
    background:#fff; color:var(--yc-blue); border:0; border-radius:999px; cursor:pointer;
    font-family:var(--yc-font-body); font-weight:700; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
    padding: 13px 22px; white-space:nowrap;
    transition: transform var(--yc-transition), box-shadow var(--yc-transition);
  }
  .buybar__cta:active { transform: scale(.97); }
  @media (min-width: 920px) { .buybar { display:none; } }
  @media (prefers-reduced-motion: reduce) { .buybar { transition:none; } }

  /* Footer riche */
  .site-footer .wrap { display:block; }
  .site-footer__grid { display:grid; gap:26px; grid-template-columns:1fr; padding-bottom:22px; }
  @media (min-width:720px){ .site-footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
  .site-footer__brand img { height:44px; width:auto; filter:invert(1); mix-blend-mode:screen; }
  .site-footer__brand p { margin-top:10px; font-size:13px; color:rgba(255,255,255,.75); max-width:34ch; }
  .site-footer h3 { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:12px; }
  .site-footer ul { list-style:none; display:grid; gap:8px; }
  .site-footer ul a { color:#fff; text-decoration:none; font-size:14px; font-weight:500; border-bottom:1.5px solid transparent; transition: border-color var(--yc-transition); }
  .site-footer ul a:hover { border-color:rgba(255,255,255,.6); }
  .site-footer__bottom { border-top:1.5px solid rgba(255,255,255,.2); padding-top:16px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.75); }

  /* ============================================================
     Page produit « boutique » (d'après la référence fournie)
     ============================================================ */
  /* Couleurs = la charte Yochamida (violet), pas la palette crème de la réf. */
  :root {
    --p2-cream:var(--media-bg);
    --p2-pill:rgba(0,0,0,.04); --p2-pill-line:rgba(0,0,0,.10);
    --p2-sel:var(--yc-blue); --p2-sel-text:#ffffff;
    --p2-cta:var(--yc-blue); --p2-cta-text:#ffffff;
    --p2-th1:#EFE9FB; --p2-th2:#E4DBF9; --p2-th3:#EDE4FB;
    --p2-star:#E7B93C;
  }
  [data-theme="light"] {
    --p2-pill:rgba(255,255,255,.07); --p2-pill-line:rgba(255,255,255,.14);
    --p2-th1:#2b2740; --p2-th2:#322c4a; --p2-th3:#2e2a44;
  }

  /* minmax(0,1fr) et NON 1fr : une piste 1fr a pour minimum automatique le
     min-content de son contenu. La bande de 5 vignettes mesure 393 px de
     min-content, donc la colonne refusait de descendre sous 393 px dans une
     fenêtre de 390 — et TOUT le contenu de la fiche (titre, prix, images,
     boutons) débordait de l'écran par la droite. minmax(0,…) autorise la piste
     à rétrécir ; c'est aux enfants larges de se débrouiller (voir .p2-thumbs). */
  .p2 { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(22px,3vw,44px); padding:clamp(6px,2vw,18px) 0 clamp(30px,4vw,56px); }
  @media (min-width:900px){ .p2{ grid-template-columns:1fr 1fr; align-items:start; } .p2-info{ position:sticky; top:84px; } }

  /* --- Galerie --- */
  .p2-main { position:relative; border-radius:28px; background:var(--p2-cream); overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
  .p2-main img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
  .p2-main:hover img { transform: scale(1.04); }
  @media (prefers-reduced-motion: reduce){ .p2-main img{ transition:none; } .p2-main:hover img{ transform:none; } }
  .p2-badge { position:absolute; top:16px; left:16px; z-index:2; width:60px; height:60px; border-radius:999px; background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:.08em; box-shadow:0 6px 18px rgba(0,0,0,.18); }
  .p2-video { position:absolute; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:10px; background:var(--surface); color:var(--text); border:0; border-radius:999px; padding:9px 9px 9px 10px; font-family:var(--yc-font-body); font-weight:700; font-size:14px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.12); text-decoration:none; padding-right:18px; }
  .p2-video span.dot { width:34px; height:34px; border-radius:999px; background:var(--p2-cta); color:var(--p2-cta-text); display:flex; align-items:center; justify-content:center; }
  .p2-video:hover { transform:translateY(-1px); }
  /* minmax(0,1fr) sur chaque vignette : sinon chacune impose son min-content
     (une image de 200 px), la bande réclame ~393 px et fait déborder la fiche
     entière sur téléphone. */
  .p2-thumbs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:12px; }
  .p2-thumb { border:0; padding:0; cursor:pointer; border-radius:14px; overflow:hidden; aspect-ratio:1/1; background:var(--p2-cream); transition: transform var(--yc-transition), box-shadow var(--yc-transition); }
  .p2-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .p2-thumb:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.12); }
  .p2-thumb[aria-pressed="true"] { box-shadow:0 0 0 2.5px var(--p2-sel); }

  /* --- Colonne infos --- */
  .p2-eyebrow { font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--text-softer); }
  .p2-title { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(34px,5vw,56px); line-height:1.02; letter-spacing:-.01em; margin-top:8px; }
  .p2-rating { display:flex; align-items:center; gap:10px; margin-top:10px; font-size:14px; }
  .p2-rating .stars { color:var(--p2-star); letter-spacing:2px; font-size:15px; }
  .p2-rating b { font-weight:800; }
  .p2-rating span { color:var(--text-softer); }
  /* flex-wrap:wrap : la rangée porte prix + prix barré + pastille + astérisque.
     En nowrap (le défaut) elle dépassait de la colonne sur téléphone. */
  .p2-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin:16px 0 4px; }
  /* Les <wbr> de promoPrix() servent aux cartes de grille, où le prix est un
     bloc de texte. Ici la rangée est un conteneur flex : un <wbr> y deviendrait
     un élément flex vide, à qui le gap ajouterait 12 px de vide de chaque
     côté. display:none le retire de la mise en page — le retour à la ligne est
     déjà assuré par flex-wrap. */
  .p2-price wbr { display:none; }
  .p2-price .amount { font-family:var(--yc-font-body); font-weight:800; font-size:clamp(30px,4.2vw,42px); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--yc-blue); }
  [data-theme="light"] .p2-price .amount { color:#A78BFA; }
  .p2-price .amount .cur { font-size:.6em; vertical-align:.1em; margin-right:2px; }
  .p2-price .ship { font-size:13.5px; color:var(--text-softer); }
  .p2-ship { display:flex; align-items:center; gap:7px; margin-top:8px; font-size:13px; color:#2f9e51; font-weight:600; }
  .p2-ship b { color:#2f9e51; }
  .p2-desc { font-size:15.5px; color:var(--text-soft); margin-top:8px; max-width:48ch; }
  .p2-legalnote { font-size:12.5px; line-height:1.5; color:var(--text-softer); margin-top:12px; max-width:52ch; background:rgba(93,46,214,.06); border:1px solid rgba(93,46,214,.16); border-radius:12px; padding:10px 13px; }
  .p2-legalnote b { color:var(--text-soft); }

  .p2-group { margin-top:20px; }
  .p2-group__label { font-weight:800; font-size:14px; margin-bottom:11px; }
  /* Sélecteurs d'options : lignes pleine largeur (mobile-first, plus de débordement) */
  .p2 .opt-row { display:grid; gap:10px; }
  /* ⚠️ PAS space-between : la puce a TROIS enfants quand elle est cochée —
     libellé, prix, et la croix (::after). space-between répartit le vide entre
     les trois, donc le prix se retrouvait au MILIEU, loin de la croix.
     Le libellé pousse tout seul vers la gauche (margin-right:auto) et le prix
     reste collé à la croix, comme un montant et son bouton de retrait. */
  .p2 .chip { width:100%; display:flex; align-items:center; justify-content:flex-start; gap:9px; text-align:left; background:var(--p2-pill); border:1.5px solid var(--p2-pill-line); color:var(--text); border-radius:16px; padding:14px 16px; font-weight:600; font-size:14px; min-height:52px; }
  .p2 .chip:hover { border-color:var(--p2-sel); }
  .p2 .chip.is-selected { background:var(--p2-sel); border-color:var(--p2-sel); color:var(--p2-sel-text); font-weight:700; }
  .p2 .chip__label { display:flex; flex-direction:column; gap:2px; min-width:0; margin-right:auto; }
  .p2 .chip__sub { font-size:12px; font-weight:700; color:var(--yc-blue); }
  [data-theme="light"] .p2 .chip__sub { color:#A78BFA; }
  .p2 .chip__price { font-weight:800; white-space:nowrap; flex-shrink:0; }
  .p2 .chip.is-selected .chip__sub, .p2 .chip.is-selected .chip__price { color:var(--p2-sel-text); opacity:.95; }
  .p2 .opt-group__title { font-weight:800; font-size:14px; text-transform:none; letter-spacing:0; color:var(--text); margin-bottom:11px; }
  .p2 .muted-note { font-size:12.5px; color:var(--text-softer); margin-top:9px; }
  .p2 .opt-offert { color:#2f9e51; font-weight:800; }
  .p2 .opt-promo { margin-top:10px; font-size:12.8px; font-weight:600; color:#2f9e51; background:rgba(47,158,81,.10); border:1px solid rgba(47,158,81,.28); border-radius:11px; padding:9px 12px; line-height:1.4; }
  .p2 .gpack__add .pf { color:#2f9e51; }

  /* Packs de jeux dépliables (10 jeux, clic pour voir) */
  .gpacks { display:grid; gap:10px; }
  .gpack { border:1.5px solid var(--p2-pill-line); border-radius:16px; background:var(--p2-pill); overflow:hidden; transition:border-color var(--yc-transition); }
  .gpack.is-selected { border-color:var(--p2-sel); background:rgba(93,46,214,.06); }
  [data-theme="light"] .gpack.is-selected { background:rgba(167,139,250,.10); }
  .gpack__head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; background:transparent; border:0; cursor:pointer; text-align:left; font-family:var(--yc-font-body); color:var(--text); padding:14px; min-height:54px; transition:background var(--yc-transition); }
  .gpack__head:hover { background:rgba(93,46,214,.05); }
  .gpack__name { font-weight:800; font-size:15px; min-width:0; }
  .gpack__see { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--yc-blue); background:rgba(93,46,214,.10); border-radius:999px; padding:7px 13px; white-space:nowrap; flex-shrink:0; }
  [data-theme="light"] .gpack__see { color:#A78BFA; background:rgba(167,139,250,.16); }
  .gpack__head:hover .gpack__see { background:rgba(93,46,214,.20); }
  .gpack__chev { transition:transform var(--yc-transition); display:inline-block; font-size:11px; }
  .gpack.open .gpack__chev { transform:rotate(180deg); }
  .gpack__add { display:block; width:calc(100% - 28px); margin:0 14px 14px; border:1.5px solid var(--p2-sel); background:transparent; color:var(--yc-blue); border-radius:12px; padding:13px; font-weight:800; font-size:14px; cursor:pointer; transition:background var(--yc-transition), color var(--yc-transition); }
  [data-theme="light"] .gpack__add { color:#A78BFA; }
  .gpack__add:hover { background:rgba(93,46,214,.10); }
  .gpack__add.is-on { background:var(--p2-sel); border-color:var(--p2-sel); color:var(--p2-sel-text); }
  /* Accordeon anime par grid-template-rows plutot que par max-height.
     Animer max-height force le navigateur a recalculer la mise en page a chaque
     image, ce qui saccade sur telephone ; 0fr -> 1fr se compose sans reflow et
     n'a pas besoin d'une hauteur maximale devinee a l'avance — l'ancien
     max-height:1200px aurait tronque un pack particulierement long. */
  .gpack__wrap { display:grid; grid-template-rows:0fr; transition:grid-template-rows 340ms cubic-bezier(.2,.7,.2,1); }
  .gpack.open .gpack__wrap { grid-template-rows:1fr; }
  /* ⚠️ LE REMBOURRAGE VERTICAL NE PEUT PAS ETRE CONSTANT.
     grid-template-rows:0fr vaut minmax(auto,0fr) : le minimum automatique de
     la piste est la contribution min-content de l'element. overflow:hidden et
     min-height:0 ramenent bien le CONTENU a zero, mais PAS le rembourrage —
     il compte toujours. Avec 4px en haut et 16px en bas, l'accordeon ferme
     gardait donc 20 px de hauteur, et comme seuls 4 px passaient au-dessus des
     jaquettes, une bande de 16 px de couvertures restait visible sous l'en-tete,
     coincee contre le bouton « Ajouter ce pack » (constate le 2026-08-09, sur
     Chromium comme sur WebKit).
     D'ou le rembourrage vertical porte par .gpack.open : ferme, la boite fait
     zero et se replie vraiment. L'horizontal, lui, n'influe pas sur la hauteur
     et peut rester constant. */
  .gpack__games { overflow:hidden; margin:0; min-height:0; padding:0 14px;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:12px 10px; }
  .gpack.open .gpack__games { padding-top:4px; padding-bottom:16px; }
  @media (prefers-reduced-motion: reduce){ .gpack__wrap { transition:none; } }
  .gcover { display:flex; flex-direction:column; gap:6px; min-width:0; }
  .gcover__img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; background:var(--p2-th2); box-shadow:0 4px 12px rgba(0,0,0,.18); display:block; }
  .gcover--empty { }
  .gcover--empty::before { content:attr(data-i); display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:3/4; border-radius:8px; background:linear-gradient(150deg,var(--yc-blue),#8b6be0); color:#fff; font-family:var(--yc-font-heading); font-weight:400; font-size:22px; letter-spacing:.02em; box-shadow:0 4px 12px rgba(0,0,0,.18); }
  .gcover__name { font-size:10.5px; line-height:1.25; color:var(--text-soft); text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  /* Ce qui est inclus */
  .p2-incl { margin-top:24px; padding-top:22px; border-top:1.5px solid var(--line); }
  .p2-incl__title { font-weight:800; font-size:15px; margin-bottom:12px; }
  .p2-incl ul { display:grid; gap:9px; }
  .p2-incl li { list-style:none; position:relative; padding-left:26px; font-size:14px; color:var(--text-soft); line-height:1.5; }
  .p2-incl li::before { content:""; position:absolute; left:0; top:3px; width:17px; height:17px; border-radius:999px; background:rgba(93,46,214,.14); }
  .p2-incl li::after { content:"✓"; position:absolute; left:4px; top:2px; font-size:10px; font-weight:900; color:var(--yc-blue); }
  [data-theme="light"] .p2-incl li::after { color:#A78BFA; }

  .p2-qty { margin-top:20px; }
  .p2-qty__row { display:inline-flex; align-items:center; gap:16px; }
  .p2-qty__btn { width:44px; height:44px; border-radius:999px; border:0; background:var(--p2-sel); color:var(--p2-sel-text); font-size:22px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform var(--yc-transition), filter var(--yc-transition); }
  .p2-qty__btn:hover { filter:brightness(.96); }
  .p2-qty__btn:active { transform:scale(.94); }
  .p2-qty__val { min-width:28px; text-align:center; font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; }

  .p2-cta { width:100%; margin-top:22px; border:0; border-radius:999px; background:var(--p2-cta); color:var(--p2-cta-text); font-family:var(--yc-font-body); font-weight:800; font-size:16px; padding:19px 24px; cursor:pointer; letter-spacing:.01em; transition: transform var(--yc-transition), box-shadow var(--yc-transition), opacity var(--yc-transition); }
  .p2-cta:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.22); }
  .p2-cta:active { transform:translateY(0); }
  .p2-cta:disabled { opacity:.5; cursor:default; transform:none; box-shadow:none; }
  /* Sur ordinateur, un bouton étiré sur toute la colonne (571 px mesurés) ne se
     lit plus comme un bouton mais comme une barre, et son texte centré paraît
     flotter. On le borne et on le centre. Sur téléphone il reste pleine
     largeur : c'est là que la surface tactile compte. */
  @media (min-width:700px) {
    /* display:block est indispensable : un bouton est inline-block par défaut,
       et une marge automatique ne centre pas un élément inline. */
    .p2-cta { display:block; max-width:380px; margin-left:auto; margin-right:auto; }
  }
  /* Fin du configurateur : le vrai bouton d'achat de la page. Il est plus grand
     et plus contrasté que celui du haut — c'est ici que la décision se prend,
     après le total. Les trois garanties dessous répondent aux dernières
     hésitations sans faire défiler. */
  .p2-finish { margin-top:20px; padding-top:18px; border-top:1.5px solid var(--line); }
  .p2-cta--go { margin-top:0; font-size:17.5px; padding:22px 24px; box-shadow:0 12px 30px rgba(93,46,214,.28); }
  /* Une seule ligne, y compris sur un téléphone de 360 px : à trois éléments
     qui débordent, le dernier se retrouvait seul et centré sous les deux
     autres — ça se lit comme un oubli de mise en page. Le seuil des 50 € est
     déjà donné plus haut, dans le récapitulatif. */
  .p2-finish__note { display:flex; flex-wrap:nowrap; justify-content:center; gap:0 12px; margin-top:12px; font-size:12px; color:var(--text-softer); white-space:nowrap; }
  .p2-finish__note span { white-space:nowrap; }
  .p2-fields { display:grid; gap:10px; margin-top:16px; }
  .p2-fields label { display:grid; gap:6px; font-size:12px; font-weight:800; }
  .p2-fields input { border:1.5px solid var(--line-soft); border-radius:14px; background:var(--surface); color:var(--text); padding:13px 16px; font-family:var(--yc-font-body); font-size:15px; outline:none; transition:border-color var(--yc-transition); }
  .p2-fields input:focus { border-color:var(--p2-sel); }
  .p2-err { display:none; margin-top:10px; font-size:13.5px; color:#c0392b; font-weight:600; }
  [data-theme="light"] .p2-err { color:#ff9d96; }
  .p2-note { font-size:12.5px; color:var(--text-softer); margin-top:12px; text-align:center; }
  .p2-note b { color:var(--text); }
  .p2-pay { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; margin-top:12px; }
  .p2-pay .badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--text-softer); border:1.5px solid var(--line); border-radius:8px; padding:5px 9px; background:var(--surface); letter-spacing:.01em; }
  .p2-pay .badge.lock { color:#2f9e51; border-color:rgba(47,158,81,.35); }

  .p2-social { display:flex; align-items:center; gap:12px; margin-top:22px; }
  .p2-avatars { display:flex; }
  .p2-avatars span { width:34px; height:34px; border-radius:999px; margin-left:-10px; border:2.5px solid var(--surface); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; }
  .p2-avatars span:first-child { margin-left:0; }
  .p2-avatars .more { background:var(--p2-sel); color:var(--p2-sel-text); }
  .p2-social p { font-size:13.5px; color:var(--text-soft); }
  .p2-social b { color:var(--text); }

  .p2-features { display:grid; gap:14px; margin-top:24px; padding-top:22px; border-top:1.5px solid var(--line); }
  .p2-feature { display:flex; align-items:center; gap:12px; font-size:14.5px; }
  .p2-feature .ic { width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .p2-feature .ic svg { width:17px; height:17px; }
  .p2-feature .ic.i1 { background:rgba(93,46,214,.14); color:#5D2ED6; } [data-theme="light"] .p2-feature .ic.i1 { color:#A78BFA; }
  .p2-feature .ic.i2 { background:rgba(0,0,0,.06); color:var(--text); } [data-theme="light"] .p2-feature .ic.i2 { background:rgba(255,255,255,.1); }
  .p2-feature .ic.i3 { background:rgba(47,158,81,.16); color:#2f9e51; }

  /* --- Cartes flottantes --- */
  .float-card { position:fixed; z-index:70; background:var(--surface); border:1.5px solid var(--line); border-radius:22px; box-shadow:0 18px 46px rgba(0,0,0,.22); padding:18px; transform:translateY(20px); opacity:0; pointer-events:none; transition: opacity 340ms ease, transform 340ms cubic-bezier(.2,.7,.2,1); }
  .float-card.show { transform:translateY(0); opacity:1; pointer-events:auto; }
  @media (prefers-reduced-motion: reduce){ .float-card{ transition:opacity 200ms ease; transform:none; } }
  .float-card__x { position:absolute; top:10px; right:12px; width:26px; height:26px; border-radius:999px; border:0; background:transparent; color:var(--text-softer); cursor:pointer; font-size:16px; line-height:1; }
  .float-card__x:hover { color:var(--text); }

  #order-toast { right:24px; top:96px; width:300px; text-align:center; }
  #order-toast .clap { font-size:34px; }
  #order-toast h4 { font-weight:800; font-size:18px; margin-top:8px; }
  #order-toast p { font-size:13px; color:var(--text-soft); margin-top:4px; }
  #order-toast a { display:inline-block; margin-top:14px; background:var(--p2-cta); color:var(--p2-cta-text); text-decoration:none; font-weight:800; font-size:13.5px; border-radius:999px; padding:11px 20px; }

  /* Carte "populaire aussi" — compacte, en bas à droite, fermable définitivement */
  #upsell { right:24px; bottom:24px; width:288px; padding:12px; }
  #upsell.is-hidden { display:none !important; }
  #upsell .u-link { display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; }
  #upsell .u-thumb { width:66px; height:58px; border-radius:12px; background:var(--p2-th2); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  #upsell .u-thumb img { width:84%; height:84%; object-fit:contain; }
  #upsell .u-body { display:flex; flex-direction:column; gap:2px; min-width:0; padding-right:12px; }
  #upsell .u-kicker { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#2f9e51; }
  #upsell .u-name { font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #upsell .u-price { font-weight:800; color:var(--text-soft); }
  #upsell .u-see { font-size:12.5px; font-weight:800; color:var(--yc-blue); margin-top:1px; }
  [data-theme="light"] #upsell .u-see { color:#A78BFA; }

  /* Preuve sociale, compacte en bas à gauche (loin de la colonne d'achat à droite). */
  #social { left:24px; bottom:24px; width:320px; display:flex; align-items:center; gap:14px; }
  #social .s-av { width:46px; height:46px; border-radius:999px; background:var(--p2-th2); color:var(--yc-blue); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; }
  #social b { display:block; font-size:14px; }
  #social p { font-size:12.5px; color:var(--text-soft); margin-top:2px; }

  @media (max-width:920px){ #upsell, #social { display:none; } #order-toast{ right:12px; left:12px; width:auto; } }

  /* ============ Micro-interactions (propres & pro) ============ */
  /* Puces d'options : réponse tactile subtile + pop à la sélection */
  .p2 .chip { transition: background var(--yc-transition), border-color var(--yc-transition), color var(--yc-transition), transform 150ms cubic-bezier(.2,.7,.2,1), box-shadow var(--yc-transition); }
  .p2 .chip:hover { transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.07); }
  .p2 .chip:active { transform: translateY(0) scale(.985); }
  .p2 .chip.is-selected { animation: mi-pop 280ms cubic-bezier(.2,.7,.2,1); }
  @keyframes mi-pop { 0%{ transform:scale(.965);} 55%{ transform:scale(1.018);} 100%{ transform:scale(1);} }

  /* Boutons "Ajouter ce pack" + "Acheter maintenant" */
  .gpack__add { transition: background var(--yc-transition), color var(--yc-transition), border-color var(--yc-transition), transform 150ms cubic-bezier(.2,.7,.2,1); }
  .gpack__add:hover { transform: translateY(-1px); }
  .gpack__add:active { transform: scale(.985); }
  .gpack__add.is-on { animation: mi-pop 280ms cubic-bezier(.2,.7,.2,1); }
  .p2-buy { transition: background var(--yc-transition), transform 150ms cubic-bezier(.2,.7,.2,1), box-shadow var(--yc-transition); }
  .p2-buy:hover { transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.10); }
  .p2-buy:active { transform: scale(.985); }

  /* CTA principal : léger reflet qui balaie au survol */
  .p2-cta, .hero__cta { position:relative; overflow:hidden; }
  .p2-cta::after, .hero__cta::after { content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-18deg); opacity:0; pointer-events:none; }
  .p2-cta:hover::after, .hero__cta:hover::after { animation: mi-shine 720ms ease; }
  @keyframes mi-shine { 0%{ left:-70%; opacity:0;} 18%{ opacity:1;} 100%{ left:130%; opacity:0;} }

  /* Cartes de la grille : soulèvement + ombre au survol */
  a.card { transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms ease, border-color var(--yc-transition); }
  @media (hover: hover) { a.card:hover { transform: translateY(-5px); box-shadow:0 22px 46px rgba(0,0,0,.16); } }
  /* :active reste sans garde : c'est le retour tactile de l'appui, et il
     disparait des que le doigt se leve — contrairement a :hover. */
  a.card:active { transform: translateY(-2px); }

  /* La tuile de preuve sociale est un lien : elle mène au profil, où le chiffre
     se vérifie. Elle doit rester visuellement identique aux autres tuiles — un
     lien qui se distingue passerait pour une publicité. */
  /* Réassurance juste sous le bouton de paiement. Discrète à dessein : elle
     rassure celui qui hésite sans distraire celui qui a déjà décidé. */
  .cart-resa { display:grid; gap:7px; margin:14px 0 10px; padding:12px 14px;
    background:var(--p2-pill); border-radius:12px; }
  .cart-resa span { font-size:12.5px; line-height:1.45; color:var(--text-soft); }
  .cart-resa b { color:var(--text); font-weight:800; }

  /* ── Carte console ──────────────────────────────────────────────────────
     Le corps ne contenait qu'un nom et un prix, séparés par un grand vide, et
     les cartes sans badge laissaient un trou à la place. Trois rangées
     maintenant : le nom (avec son badge à côté, plus au-dessus), la ligne qui
     dit ce que le mod apporte, puis le prix et l'appel à l'action, collés en
     bas pour que toutes les cartes s'alignent quelle que soit la longueur du
     nom. */
  .card__top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .card__hook { font-size:13px; line-height:1.35; color:var(--text-softer); margin:0; }
  .card__foot { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; }
  .card__go { font-size:12.5px; font-weight:800; color:var(--yc-blue); white-space:nowrap; }
  [data-theme="light"] .card__go { color:#A78BFA; }
  .card__body { justify-content:flex-start; gap:7px; }
  @media (hover:hover) { .card:hover .card__go { text-decoration:underline; } }
  @media (max-width:430px) {
    .card__hook { font-size:12.5px; }
    .card__go { font-size:12px; }
  }

  .trust__soc { text-decoration:none; color:inherit; display:block; }

  /* ⚠️ CINQ TUILES DANS DEUX COLONNES LAISSENT UN ORPHELIN.
     Depuis l'ajout de la preuve sociale le bandeau en compte cinq : sur
     telephone la grille tombe a deux colonnes et la derniere tuile se retrouve
     seule, callee a gauche, comme un oubli. Elle occupe donc toute la largeur —
     et se retrouve centree, ce qui la met en valeur au lieu de la marginaliser.
     Le nombre de colonnes est fixe explicitement : laisser auto-fit decider ici
     rendait la regle du dernier enfant imprevisible. */
  /* Sur téléphone, ces cinq chiffres en gros caractères occupaient un écran
     entier avant même la première console — le visiteur défilait à travers des
     statistiques au lieu d'arriver sur l'offre. Même information, trois fois
     moins de hauteur : chiffres plus petits, gouttières resserrées, et la note
     mise sur UNE ligne au lieu de deux. */
  @media (max-width:560px){
    .trust { padding:16px 0; }
    .trust .wrap { grid-template-columns:repeat(2,1fr); gap:10px 12px; }
    .trust b { font-size:23px; line-height:1.1; }
    .trust span { font-size:10.5px; letter-spacing:.05em; }
    .trust .wrap > :last-child { grid-column:1 / -1; display:flex; align-items:baseline; justify-content:center; gap:8px; }
    .trust .wrap > :last-child b { display:inline; font-size:20px; }
  }
  @media (hover: hover) { .trust__soc:hover b { text-decoration:underline; } }

  /* « Avant de commander » : trois liens de contenu vers les pages clés.
     Volontairement sobre — meme surface et meme trait que .how__grid juste
     au-dessus, pas de troisieme langage visuel sur la page d'accueil. */
  .next { padding: clamp(6px,2vw,18px) 0 clamp(28px,4vw,48px); }
  .next__t { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(22px,2.6vw,30px); margin-bottom:14px; }
  .next__grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .next__it { display:block; background:var(--surface); border:1.5px solid var(--line);
    border-radius:var(--yc-radius-sm); padding:18px; text-decoration:none; color:inherit;
    transition:border-color var(--yc-transition), transform var(--yc-transition); }
  .next__it b { display:block; font-weight:800; font-size:15.5px; color:var(--yc-blue); }
  [data-theme="light"] .next__it b { color:#A78BFA; }
  .next__it span { display:block; font-size:13.5px; color:var(--text-soft); margin-top:5px; line-height:1.45; }
  /* Meme garde tactile que les cartes : sans lui, le dernier lien touche
     resterait surligne comme s'il etait selectionne. */
  @media (hover: hover) { .next__it:hover { border-color:var(--yc-blue); transform:translateY(-2px); } }

  /* Bouton panier (header) + pastille */
  .cart-btn { transition: transform 170ms cubic-bezier(.2,.7,.2,1); }
  .cart-btn:hover { transform: translateY(-1px) scale(1.05); }
  .cart-btn:active { transform: scale(.93); }
  .cart-badge:not([hidden]) { animation: mi-badge 320ms cubic-bezier(.2,.7,.2,1); }
  @keyframes mi-badge { 0%{ transform:scale(.3); opacity:0;} 60%{ transform:scale(1.18);} 100%{ transform:scale(1); opacity:1;} }

  /* Miniatures galerie */
  .p2-thumb { transition: transform 200ms cubic-bezier(.2,.7,.2,1), border-color var(--yc-transition); }
  .p2-thumb:hover { transform: translateY(-2px); }

  /* Carte upsell : vignette qui apparaît en douceur + flèche qui glisse au survol */
  #upsell.show .u-thumb img { animation: mi-uzoom 900ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes mi-uzoom { 0%{ transform:scale(1.16); opacity:0;} 100%{ transform:scale(1); opacity:1;} }
  #upsell .u-link { transition: transform 170ms cubic-bezier(.2,.7,.2,1); }
  #upsell .u-link:hover { transform: translateX(2px); }
  #upsell .u-see .arw { display:inline-block; transition: transform 230ms cubic-bezier(.2,.7,.2,1); }
  #upsell .u-link:hover .u-see .arw { transform: translateX(5px); }

  @media (prefers-reduced-motion: reduce){
    .p2 .chip, .gpack__add, .p2-buy, a.card, .cart-btn, .cart-badge, .p2-thumb, #upsell.show .u-thumb img, #upsell .u-link, #upsell .u-see .arw { animation:none !important; transition:border-color var(--yc-transition), background var(--yc-transition), color var(--yc-transition) !important; transform:none !important; }
    .p2-cta::after, .hero__cta::after { display:none; }
  }

  /* Avis à hauteur du bouton (voir avisCourts). Discret par construction : il
     doit se lire comme une preuve, pas comme un encart promotionnel. */
  .p2-av { margin:18px 0 0; display:grid; gap:11px; }
  .p2-av__h { margin:0; font-size:14px; color:#f0a500; letter-spacing:.06em; }
  .p2-av__h b { color:var(--text); letter-spacing:normal; }
  .p2-av__i { margin:0; padding:12px 14px; border-left:3px solid var(--line); }
  .p2-av__i blockquote { margin:0; font-size:14.5px; line-height:1.55; color:var(--text-soft); font-style:italic; }
  .p2-av__i figcaption { margin-top:6px; font-size:13px; font-weight:700; color:var(--text); }
  .p2-av__i figcaption span { font-weight:400; color:var(--text-softer); }

  /* Bloc d'inversion du risque, juste sous le prix. Volontairement sobre :
     un encadré criard à cet endroit se lit comme de la publicité, alors que le
     visiteur y cherche une garantie. Le vert est celui de la livraison offerte,
     déjà associé sur le site à « bonne nouvelle ». */
  .p2-risk { margin:18px 0 4px; padding:16px 18px; border:1.5px solid rgba(47,158,81,.35); border-radius:16px; background:rgba(47,158,81,.06); }
  .p2-risk__p { margin:0 0 12px; padding:10px 12px; border-radius:10px; background:rgba(47,158,81,.13); font-size:15px; font-weight:800; line-height:1.45; color:var(--text); }
  .p2-risk__t { margin:0 0 10px; font-weight:800; font-size:15.5px; color:#2f9e51; }
  .p2-risk__l { margin:0; padding-left:18px; display:grid; gap:7px; }
  .p2-risk__l li { font-size:14.5px; line-height:1.5; color:var(--text-soft); }
  .p2-risk__l b { color:var(--text); }
  .p2-risk__s { margin:11px 0 0; font-size:13.5px; color:var(--text-soft); }

  /* --- Bloc éditorial propre à chaque console (voir console-textes.mjs) ---
     Sa raison d'être est le référencement : c'est lui qui distingue les douze
     pages produit aux yeux de Google. Il est donc du VRAI texte lisible, jamais
     masqué ni replié par défaut — un contenu caché ne compte pas. */
  /* Bloc de fond de /mods (voir accueil-textes.mjs). Du texte lisible, jamais
     replie : cette page doit repondre aux questions AVANT le clic, sinon le
     visiteur repart sans jamais ouvrir une fiche produit. */
  .acc { padding:clamp(32px,5vw,64px) 0; border-top:1.5px solid var(--line); }
  .acc__t { font-size:clamp(22px,3.4vw,32px); margin:0 0 12px; }
  .acc__intro { font-size:clamp(16px,2vw,18px); font-weight:700; max-width:62ch; margin:0 0 26px; }
  .acc__h { font-size:clamp(18px,2.4vw,22px); margin:30px 0 10px; }
  .acc p { max-width:68ch; font-size:16px; line-height:1.68; color:var(--text-soft); margin:0 0 12px; }
  .acc b { color:var(--text); }
  .acc__note { font-size:14.5px; font-style:italic; }
  .acc__tw { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0 10px; }
  .acc__tbl { border-collapse:collapse; width:100%; min-width:460px; font-size:15px; }
  .acc__tbl th, .acc__tbl td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
  .acc__tbl thead th { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-softer); }
  .acc__tbl tbody th { font-weight:800; }
  .acc__tbl tbody th a { color:var(--yc-blue); text-decoration:none; }
  .acc__tbl tbody th a:hover { text-decoration:underline; }
  .acc__tbl td:nth-child(2) { font-weight:800; white-space:nowrap; }
  .acc__etapes { max-width:68ch; padding-left:20px; display:grid; gap:10px; margin:12px 0; }
  .acc__etapes li { font-size:16px; line-height:1.62; color:var(--text-soft); }

  .cbloc { padding:clamp(30px,5vw,60px) 0; border-top:1.5px solid var(--line); }
  .cbloc__t { font-size:clamp(21px,3.2vw,30px); line-height:1.2; margin:0 0 14px; max-width:24ch; }
  .cbloc__intro { font-size:clamp(16px,2vw,19px); font-weight:700; line-height:1.5; margin:0 0 18px; max-width:60ch; }
  .cbloc__txt { max-width:68ch; display:grid; gap:14px; }
  .cbloc__txt p { margin:0; font-size:16px; line-height:1.68; color:var(--text-soft); }
  .cbloc__lire { max-width:68ch; margin-top:16px; font-size:14.5px; color:var(--text-soft); }
  .cbloc__lire a { color:var(--yc-blue); }
  .cbloc__faq { max-width:68ch; margin-top:22px; border:1.5px solid var(--line); border-radius:18px; background:var(--surface); overflow:hidden; }
  @media (max-width:640px) { .cbloc__txt p { font-size:15.5px; } }

  /* --- FAQ (produit) : bon pour Google ET pour les réponses IA --- */
  .faq { padding:clamp(30px,5vw,64px) 0; }
  .faq__list { max-width:820px; margin:22px auto 0; display:grid; gap:12px; }
  .faq__item { border:1.5px solid var(--line); border-radius:18px; background:var(--surface); overflow:hidden; }
  .faq__item summary { list-style:none; cursor:pointer; padding:18px 22px; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .faq__item summary::-webkit-details-marker { display:none; }
  .faq__item summary::after { content:"+"; font-weight:700; font-size:22px; color:var(--yc-blue); flex-shrink:0; transition:transform var(--yc-transition); }
  [data-theme="light"] .faq__item summary::after { color:#A78BFA; }
  .faq__item[open] summary::after { transform:rotate(45deg); }
  .faq__a { padding:0 22px 20px; color:var(--text-soft); font-size:15px; line-height:1.6; max-width:70ch; }

  /* --- Page merci (retour après paiement) --- */
  .thanks { display:flex; justify-content:center; padding:clamp(30px,6vw,72px) 0; }
  .thanks__card { max-width:620px; width:100%; background:var(--surface); border:1.5px solid var(--line); border-radius:28px; padding:clamp(26px,4vw,44px); text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.10); }
  .thanks__clap { font-size:46px; }
  .thanks__card h1 { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(30px,4.5vw,46px); margin-top:8px; }
  .thanks__lead { font-size:16px; color:var(--text-soft); margin-top:10px; }
  .thanks__mail { display:flex; align-items:flex-start; gap:12px; text-align:left; max-width:520px; margin:22px auto 0; padding:16px 18px; background:rgba(93,46,214,.08); border:1px solid rgba(93,46,214,.22); border-radius:16px; font-size:15px; line-height:1.5; color:var(--text-soft); }
  .thanks__mail .mi { font-size:22px; line-height:1.1; flex-shrink:0; }
  .thanks__mail b { color:var(--text); }
  .thanks__mail small { display:block; margin-top:4px; font-size:12.5px; color:var(--text-softer); }
  .thanks__steps { text-align:left; margin:24px auto 0; max-width:520px; display:grid; gap:12px; }
  .thanks__steps li { list-style:none; font-size:14.5px; color:var(--text-soft); line-height:1.55; }
  .thanks__steps b { color:var(--text); }
  .thanks__actions { display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; margin-top:28px; }
  .thanks__ghost { color:var(--yc-blue); font-weight:800; font-size:14px; text-decoration:none; }
  [data-theme="light"] .thanks__ghost { color:#A78BFA; }
  .thanks__help { font-size:12.5px; color:var(--text-softer); margin-top:22px; }
  .thanks__help a { color:var(--yc-blue); font-weight:700; }
  [data-theme="light"] .thanks__help a { color:#A78BFA; }
  .label-zone { margin:22px 0 8px; min-height:26px; }
  .label-loading { display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; color:var(--text-soft); }
  .label-spin { width:16px; height:16px; border:2.5px solid var(--line); border-top-color:var(--yc-blue); border-radius:999px; animation:yc-spin .8s linear infinite; flex-shrink:0; }
  @keyframes yc-spin { to { transform:rotate(360deg); } }
  .label-btn { display:inline-flex; align-items:center; gap:10px; background:var(--yc-blue); color:#fff; text-decoration:none; font-weight:800; font-size:16px; padding:16px 28px; border-radius:999px; box-shadow:0 10px 26px rgba(93,46,214,.3); }
  .label-btn:hover { filter:brightness(1.06); }
  .label-soft { font-size:13px; color:var(--text-soft); margin-top:12px; max-width:44ch; margin-left:auto; margin-right:auto; }
  .label-soft a { color:var(--yc-blue); font-weight:700; }
  [data-theme="light"] .label-soft a { color:#A78BFA; }

  /* Choix du point relais APRÈS le paiement (voir /api/relais-choisi).
     Volontairement sans carte Leaflet : la page de confirmation doit rester
     légère, et une liste de 5 adresses avec la distance suffit à choisir. */
  .mrelais { text-align:left; max-width:520px; margin:26px auto 0; padding:18px; background:var(--p2-pill); border:1.5px solid var(--p2-pill-line); border-radius:18px; }
  .mrelais[hidden] { display:none; }
  .mrelais h2 { font-family:var(--yc-font-heading); font-weight:400; font-size:20px; margin:0 0 6px; }
  .mrelais__lead { font-size:13.5px; color:var(--text-soft); line-height:1.5; margin:0 0 12px; }
  /* display:flex l'emporte sur [hidden] : sans cette seconde règle, la barre de
     recherche restait visible après le choix. */
  .mrelais .cart-city-row { display:flex; gap:8px; flex-wrap:wrap; }
  .mrelais .cart-city-row[hidden] { display:none; }
  .mrelais input { flex:1; min-width:0; padding:13px 15px; font-family:var(--yc-font-body); font-size:16px; border:1.5px solid var(--line-soft); border-radius:999px; background:var(--surface); color:var(--text); outline:none; }
  .mrelais .cart-city-btn { flex:0 0 auto; min-height:44px; padding:0 20px; border:0; border-radius:999px; background:var(--yc-blue); color:#fff; font-family:var(--yc-font-body); font-weight:800; font-size:14px; cursor:pointer; }
  .mrelais .cart-city-btn:disabled { opacity:.55; cursor:default; }
  .mrelais.is-done { background:rgba(47,158,81,.10); border-color:rgba(47,158,81,.34); }
  @media (max-width:420px) {
    .mrelais input, .mrelais .cart-city-btn { flex:1 1 100%; }
  }

  /* ---------- Page Suivi (numéro de suivi + timeline) ---------- */
  .tracker { max-width:720px; margin:clamp(24px,4vw,40px) auto 0; background:var(--surface); border:1.5px solid var(--line); border-radius:20px; padding:clamp(20px,3vw,32px); }
  [data-theme="light"] .tracker { background:#1B1B1B; }
  .tracker label { display:block; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:12.5px; color:var(--text-softer); margin-bottom:10px; }
  .tracker__row { display:flex; flex-wrap:wrap; gap:10px; }
  .tracker input { flex:1; min-width:220px; padding:14px 16px; font-family:var(--yc-font-body); font-size:16px; border:1.5px solid var(--line-soft); border-radius:999px; background:transparent; color:var(--text); outline:none; transition:border-color var(--yc-transition); font-variant-numeric:tabular-nums; letter-spacing:.08em; text-transform:uppercase; }
  [data-theme="light"] .tracker input { background:#242424; border-color:rgba(255,255,255,.34); }
  .tracker input::placeholder { text-transform:none; letter-spacing:.04em; color:var(--text-softer); }
  .tracker input:focus { border-color:var(--yc-blue); }
  .tracker .hint { margin-top:12px; font-size:13px; color:var(--text-softer); }
  .tracker .error { margin-top:12px; font-size:13.5px; color:#D0342C; display:none; }
  .track-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border:0; border-radius:999px; font-family:var(--yc-font-body); font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; background:var(--yc-blue); color:#fff; transition:background var(--yc-transition), transform 150ms cubic-bezier(.2,.7,.2,1), box-shadow var(--yc-transition); }
  .track-btn:hover { background:#4A22B0; transform:translateY(-1px); box-shadow:0 8px 22px rgba(93,46,214,.35); }
  .track-btn:active { transform:translateY(0) scale(.985); }
  .steps { padding:clamp(36px,6vw,64px) 0; }
  .steps h2 { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(26px,3.4vw,42px); text-align:center; margin-bottom:8px; }
  .steps .lead { text-align:center; color:var(--text-soft); max-width:560px; margin:0 auto 34px; }
  .timeline { max-width:720px; margin:0 auto; display:grid; gap:0; }
  .tstep { display:grid; grid-template-columns:44px 1fr; gap:16px; position:relative; padding-bottom:26px; }
  .tstep::before { content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--line-soft); }
  .tstep:last-child::before { display:none; }
  .tstep__dot { width:44px; height:44px; border-radius:999px; background:var(--yc-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--yc-font-heading); font-size:19px; flex-shrink:0; position:relative; z-index:1; }
  .tstep__body b { display:block; font-size:16.5px; margin-top:9px; }
  .tstep__body p { font-size:14px; color:var(--text-soft); margin-top:3px; max-width:520px; }
  .tstep__badge { display:inline-block; margin-left:8px; vertical-align:1px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--yc-blue); color:#fff; padding:2px 8px; border-radius:6px; }

  /* ---------- Bandeau confidentialité + liens légaux ---------- */
  .site-footer__legal { display:flex; gap:16px; flex-wrap:wrap; }
  .site-footer__legal a { color:rgba(255,255,255,.85); text-decoration:none; font-size:12.5px; }
  .site-footer__legal a:hover { color:#fff; text-decoration:underline; }
  .site-footer__disclaimer { margin-top:14px; font-size:11px; line-height:1.5; color:rgba(255,255,255,.5); }
  /* Une seule ligne, jamais de retour à la ligne (pas de flex-wrap) : c'est ce
     qui le faisait passer de 56 px à 168 px sur un téléphone. */
  .cookie-banner { position:fixed; left:12px; right:12px; bottom:12px; z-index:55; max-width:560px; margin:0 auto; background:var(--surface); border:1.5px solid var(--line); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.22); padding:8px 8px 8px 16px; display:flex; gap:10px; align-items:center; flex-wrap:nowrap; animation:cookie-in 400ms cubic-bezier(.2,.7,.2,1) both; }
  .cookie-banner[hidden]{ display:none; }
  /* Sur les fiches produit, la barre d'achat occupe déjà le bas de l'écran : la
     pastille se pose AU-DESSUS, sinon elle passe dessous et devient invisible. */
  body:has(.buybar) .cookie-banner { bottom:88px; }

  @keyframes cookie-in { from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
  .cookie-banner p { font-size:12.5px; color:var(--text-soft); line-height:1.3; flex:1; min-width:0; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cookie-banner p b { color:var(--text); }
  .cookie-banner a { color:var(--yc-blue); font-weight:700; }
  [data-theme="light"] .cookie-banner a { color:#A78BFA; }
  .cookie-banner .cookie-ok { flex-shrink:0; background:var(--yc-blue); color:#fff; border:0; border-radius:999px; min-width:44px; min-height:40px; padding:0 18px; font-weight:800; font-size:13.5px; cursor:pointer; font-family:var(--yc-font-body); transition:filter var(--yc-transition), transform 150ms cubic-bezier(.2,.7,.2,1); }
  .cookie-banner .cookie-ok:hover { filter:brightness(1.08); transform:translateY(-1px); }
  @media (prefers-reduced-motion: reduce){ .cookie-banner{ animation:none; } }

  /* ---------- Pages légales (texte long) ---------- */
  .legal { max-width:820px; margin:0 auto; padding:clamp(28px,5vw,56px) 0; }
  .legal h1 { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(30px,5vw,48px); line-height:1.05; margin-bottom:6px; }
  .legal .legal__updated { color:var(--text-softer); font-size:13px; margin-bottom:26px; }
  .legal h2 { font-size:19px; font-weight:800; margin:30px 0 10px; color:var(--text); }
  .legal h3 { font-size:15.5px; font-weight:800; margin:18px 0 6px; color:var(--text); }
  .legal p, .legal li { font-size:15px; line-height:1.65; color:var(--text-soft); }
  .legal p { margin:0 0 12px; }
  .legal ul { margin:0 0 14px; padding-left:20px; display:grid; gap:7px; }
  .legal a { color:var(--yc-blue); font-weight:600; }
  [data-theme="light"] .legal a { color:#A78BFA; }
  .legal strong, .legal b { color:var(--text); }
  .legal code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:rgba(0,0,0,.06); padding:1px 6px; border-radius:5px; color:var(--text); }
  [data-theme="light"] .legal code { background:rgba(255,255,255,.08); }
  .legal__box { background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:16px 20px; margin:0 0 18px; }
  .legal__box p { margin:0; }
  .legal .todo { background:rgba(224,122,52,.14); border:1px solid rgba(224,122,52,.45); color:#b45309; border-radius:7px; padding:1px 7px; font-weight:700; font-size:.9em; }
  [data-theme="light"] .legal .todo { color:#f0a868; }

  /* --- Page guide (référencement IA / GEO) --- */
  .legal .guide-lead { font-size:17px; line-height:1.62; color:var(--text); margin:0 0 22px; }
  /* Pas de bordure latérale épaisse et colorée : c'est le tic visuel le plus
     reconnaissable des interfaces générées. L'encadré se distingue par sa
     surface et son filet complet, pas par un onglet sur le flanc. */
  .guide-key { background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:16px 20px; margin:0 0 28px; }
  .legal .guide-key p { margin:0; font-size:15px; line-height:1.6; }
  .guide-toc { background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:16px 20px 18px; margin:0 0 32px; }
  .guide-toc h2 { margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-softer); font-weight:800; }
  .guide-toc ul { margin:0; padding:0; list-style:none; display:grid; gap:9px; grid-template-columns:1fr; }
  @media (min-width:560px){ .guide-toc ul { grid-template-columns:1fr 1fr; } }
  .guide-toc li { font-size:14.5px; }
  .guide-toc a { color:var(--yc-blue); font-weight:600; text-decoration:none; }
  .guide-toc a:hover { text-decoration:underline; }
  .guide-tablewrap { overflow-x:auto; margin:2px 0 20px; -webkit-overflow-scrolling:touch; }
  .guide-table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:430px; }
  .guide-table th, .guide-table td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--text-soft); vertical-align:top; }
  .guide-table thead th { color:var(--text); font-weight:800; border-bottom:2px solid var(--line); white-space:nowrap; }
  .guide-table tbody tr:last-child td { border-bottom:none; }
  .guide-table td b { color:var(--text); }
  .guide-cta { text-align:center; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:26px 22px; margin:36px 0 4px; }
  .legal .guide-cta p { margin:0 0 16px; font-size:16px; color:var(--text); }
  .guide-cta .guide-btn { display:inline-block; background:var(--yc-blue); color:#fff; font-weight:800; padding:13px 28px; border-radius:999px; text-decoration:none; }
  .guide-cta .guide-btn:hover { filter:brightness(1.06); }
  h2[id], h3[id] { scroll-margin-top:90px; }
  /* Grille des consoles de la page anglaise */
  .en-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0 26px; }
  @media (min-width:760px){ .en-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .en-card { display:flex; flex-direction:column; gap:4px; padding:12px; border:1.5px solid var(--line);
             border-radius:16px; background:var(--surface); text-decoration:none; color:var(--text); }
  .en-card:hover { border-color:var(--yc-blue); }
  .en-card img { width:100%; height:110px; object-fit:cover; border-radius:10px; }
  .en-card__n { font-weight:800; font-size:14.5px; }
  .en-card__p { font-size:13px; color:var(--text-softer); }

  /* ============================================================
     Blog — les articles réutilisent la colonne de lecture .legal
     ============================================================ */
  .post__meta { color:var(--text-softer); font-size:13px; margin:0 0 22px; }
  .post__hero { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:16px; border:1.5px solid var(--line); margin:0 0 26px; background:var(--surface); }
  /* Le contenu vient d'un générateur externe : on borne ce qu'il peut faire à la
     mise en page, pour qu'un article mal balisé ne casse pas la colonne. */
  .legal img { max-width:100%; height:auto; border-radius:12px; }
  .legal table { width:100%; border-collapse:collapse; font-size:14.5px; margin:0 0 18px; }
  .legal th, .legal td { text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); color:var(--text-soft); }
  .legal blockquote { margin:0 0 16px; padding:2px 0 2px 16px; border-left:3px solid var(--yc-blue); color:var(--text-soft); }
  .legal pre { overflow-x:auto; background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; }
  .posts { list-style:none; padding:0; margin:0; display:grid; gap:18px; }
  @media (min-width:760px){ .posts { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .posts__item { background:var(--surface); border:1.5px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
  .posts__item img { width:100%; height:170px; object-fit:cover; display:block; }
  .posts__body { padding:16px 18px 20px; display:grid; gap:7px; }
  .posts__body h2 { font-family:var(--yc-font-heading); font-weight:400; font-size:21px; line-height:1.12; margin:0; }
  .posts__body h2 a { color:var(--text); text-decoration:none; }
  .posts__body h2 a:hover { color:var(--yc-blue); }
  .posts__body p { margin:0; font-size:14.5px; line-height:1.55; color:var(--text-soft); }
  .posts__date { font-size:12px; color:var(--text-softer); }

  /* ============================================================
     Style « boutique » (répliqué de la vraie fiche Shopify)
     ============================================================ */
  /* --- Grille de consoles façon collection boutique --- */
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px; }
  @media (min-width:720px){ .grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
  @media (min-width:1040px){ .grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
  .card__body { padding:14px; gap:7px; }
  .card__vendor { font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-softer); }
  .card__name { font-family:var(--yc-font-heading); font-weight:400; font-size:20px; line-height:1.08; letter-spacing:-.01em; }
  .card__badge { align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.04em; border-radius:8px; padding:5px 10px; border:1.5px solid; margin-top:2px; }
  .card__badge--blue { color:var(--yc-blue); border-color:var(--yc-blue); background:rgba(93,46,214,.06); }
  [data-theme="light"] .card__badge--blue { color:#A78BFA; border-color:#A78BFA; }
  .card__badge--yellow { color:#a9791a; border-color:#e2ba52; background:rgba(226,186,82,.12); }
  [data-theme="light"] .card__badge--yellow { color:#e2ba52; }
  /* white-space:normal est INDISPENSABLE : styles-base.css pose nowrap sur
     .card__price, écrit à l'époque où l'élément ne contenait qu'un prix court.
     Depuis la promo il porte aussi le prix barré, la pastille de remise et
     l'astérisque — soit ~165 px pour une carte qui en fait 141 sur téléphone.
     Avec nowrap, la ligne débordait de la carte ET de l'écran (constaté le
     2026-08-09 : scrollWidth 405 px pour une fenêtre de 390). Les <wbr> posés
     par promoPrix() donnent les points de coupure, les marges gardent l'écart. */
  .card__price { font-family:var(--yc-font-body); font-weight:800; font-size:19px; color:var(--text) !important; margin-top:2px; white-space:normal; }
  [data-theme="light"] .card__price { color:var(--text) !important; }
  .card__stock { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#2f9e51; }
  [data-theme="light"] .card__stock { color:#8fd49a; }
  .card__stock .dot { width:8px; height:8px; border-radius:999px; background:currentColor; flex-shrink:0; position:relative; animation:dot-breathe 2.4s ease-in-out infinite; }
  .card__stock .dot::after { content:""; position:absolute; inset:0; border-radius:999px; background:currentColor; animation:dot-ping 2.4s ease-out infinite; }
  @keyframes dot-breathe { 0%,100%{ opacity:.85; transform:scale(1); } 50%{ opacity:1; transform:scale(1.12); } }
  @keyframes dot-ping { 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(3.2); opacity:0; } 100%{ transform:scale(3.2); opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .card__stock .dot, .card__stock .dot::after { animation:none; } }

  /* --- Lignes info (bordure bleue à gauche) --- */
  .p2-inforows { display:grid; gap:10px; margin-top:22px; }
  .p2-inforow { display:flex; align-items:center; gap:12px; padding:13px 15px; background:var(--p2-pill); border-radius:12px; text-decoration:none; color:var(--text); font-size:14px; transition:background var(--yc-transition); }
  [data-theme="light"] .p2-inforow { border-left-color:#A78BFA; }
  .p2-inforow:hover { background:rgba(93,46,214,.08); }
  .p2-inforow svg { width:20px; height:20px; color:var(--yc-blue); flex-shrink:0; }
  [data-theme="light"] .p2-inforow svg { color:#A78BFA; }
  .p2-inforow b { font-weight:800; }

  /* --- Badges de confiance 2×2 (icônes rondes) --- */
  .p2-trust { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:24px; background:var(--p2-pill); border:1.5px solid var(--line); border-radius:18px; overflow:hidden; }
  .p2-trust > div { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; padding:22px 12px; background:var(--surface); }
  .p2-trust__ic { width:44px; height:44px; border-radius:999px; background:rgba(93,46,214,.10); display:flex; align-items:center; justify-content:center; margin-bottom:2px; }
  .p2-trust__ic svg { width:21px; height:21px; color:var(--yc-blue); }
  [data-theme="light"] .p2-trust__ic svg { color:#A78BFA; }
  .p2-trust b { font-weight:800; font-size:13.5px; }
  .p2-trust > div > span:last-child { font-size:12px; color:var(--text-softer); }

  /* --- Sections éditoriales (titres serif, comme la boutique) --- */
  .p2-story { margin-top:28px; }
  .p2-story h2 { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(20px,3vw,24px); letter-spacing:-.01em; margin:22px 0 8px; }
  .p2-story h2:first-child { margin-top:0; }
  .p2-story p { font-size:14.5px; color:var(--text-soft); line-height:1.6; }
  .p2-story p b { color:var(--text); }
  /* Avis clients en colonne gauche (PC uniquement) */
  .p2-reviews-side { display:none; }
  .p2rev__head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .p2rev__stars { color:#f5a623; letter-spacing:1px; font-size:16px; }
  .p2rev__meta { font-size:13.5px; color:var(--text-soft); }
  .p2rev__meta b { color:var(--text); font-size:15.5px; }
  .p2rev__list { display:flex; flex-direction:column; gap:12px; }
  .p2rev__more { display:inline-block; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--yc-blue); text-decoration:none; }
  [data-theme="light"] .p2rev__more { color:#A78BFA; }
  @media (min-width:900px){
    .p2-reviews-side { display:block; margin-top:28px; }
    .reviews--bottom { display:none; }
  }
  /* Zone "tes jeux précis" — recherche SteamGridDB avec jaquettes */
  .opt-sub2 { font-weight:600; font-size:12.5px; color:var(--text-softer); white-space:nowrap; }
  .gi-search { position:relative; margin-top:6px; }
  .gi-input { box-sizing:border-box; width:100%; padding:11px 13px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); font:inherit; font-size:14px; }
  .gi-input:focus { outline:2px solid var(--yc-blue); outline-offset:1px; }
  .gi-input:disabled { opacity:.55; }
  .gi-results { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; background:var(--surface); border:1.5px solid var(--line); border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.20); overflow:hidden auto; max-height:420px; }
  .gi-opt { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); padding:12px 14px; cursor:pointer; color:var(--text); font:inherit; font-size:16px; line-height:1.3; min-height:92px; }
  .gi-opt:last-child { border-bottom:0; }
  .gi-opt:hover { background:var(--p2-pill); }
  .gi-opt img, .gi-opt__ph { width:56px; height:75px; border-radius:6px; flex:0 0 auto; object-fit:cover; background:var(--p2-pill); display:flex; align-items:center; justify-content:center; }
  .gi-opt--manual { color:var(--text-soft); font-style:italic; }
  .gi-empty { padding:12px; font-size:13px; color:var(--text-softer); }
  .gi-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .gi-chip { display:inline-flex; align-items:center; gap:7px; background:var(--p2-pill); border:1.5px solid var(--p2-pill-line); border-radius:999px; padding:4px 8px 4px 5px; font-size:13px; color:var(--text); max-width:100%; }
  .gi-chip__img { width:26px; height:34px; object-fit:cover; border-radius:5px; flex:0 0 auto; }
  .gi-chip__t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
  .gi-x { border:0; background:transparent; color:var(--text-softer); cursor:pointer; font-size:12px; width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0; flex:0 0 auto; }
  .gi-x:hover { background:rgba(0,0,0,.10); color:var(--text); }

  /* --- Accordéons Livraison / Garantie --- */
  .p2-acc { margin-top:24px; display:grid; gap:0; border-top:1.5px solid var(--line); }
  .p2-acc .faq__item { border:0; border-bottom:1.5px solid var(--line); border-radius:0; background:transparent; }
  .p2-acc .faq__item summary { padding:18px 2px; }
  .p2-acc .faq__a { padding:0 2px 18px; }

  /* --- Barre sticky mobile (vignette + nom, façon boutique) --- */
  .buybar__thumb { width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; }
  .buybar__price { gap:1px; flex:1; min-width:0; }
  .buybar__price .buybar__name { font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .buybar__price #buybar-amount { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; opacity:.9; }

  /* --- « Le Feed » : reels Instagram (répliqué de la boutique) --- */
  .feed { padding:clamp(34px,5vw,64px) 0; }
  .feed__title { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(30px,4.5vw,44px); letter-spacing:-.01em; }
  .feed__sub { color:var(--text-soft); font-size:15px; margin-top:6px; }
  .feed__ig { display:flex; align-items:center; gap:14px; margin-top:22px; text-decoration:none; color:inherit; }
  .feed__avatar { flex-shrink:0; width:56px; height:56px; border-radius:999px; padding:2.5px; background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); display:block; }
  .feed__avatar img { width:100%; height:100%; border-radius:999px; object-fit:cover; background:var(--surface); border:2px solid var(--surface); }
  .feed__id { display:flex; flex-direction:column; gap:1px; }
  .feed__handle { font-weight:800; font-size:16px; }
  .feed__cta { font-size:12.5px; color:var(--text-softer); }
  .feed__follow { margin-left:auto; display:inline-flex; align-items:center; gap:7px; border:0; border-radius:12px; padding:11px 18px; font-weight:800; font-size:13.5px; color:#fff; background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); transition:filter var(--yc-transition); }
  .feed__ig:hover .feed__follow { filter:brightness(1.08); }
  /* Carrousel horizontal de grandes vidéos (2 visibles, on swipe) — comme la boutique */
  .feed__grid { display:flex; gap:16px; margin-top:22px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .feed__grid::-webkit-scrollbar { display:none; }
  .reel { flex:0 0 auto; width:clamp(168px,46vw,320px); scroll-snap-align:start; position:relative; aspect-ratio:9/16; border-radius:20px; overflow:hidden; background:#111; cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,.16); }
  .reel__vid { width:100%; height:100%; object-fit:cover; display:block; }
  .reel__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:999px; border:0; background:rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(3px); transition:opacity .2s ease; }
  .reel__play svg { margin-left:3px; }
  .reel.is-playing .reel__play { opacity:0; pointer-events:none; }
  .reel__mute { position:absolute; right:10px; bottom:10px; width:38px; height:38px; border-radius:999px; border:0; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:3; padding:0; transition:background .15s ease, transform .15s ease; }
  .reel__mute:hover { background:rgba(0,0,0,.72); transform:scale(1.06); }
  .reel__mute svg { width:18px; height:18px; }
  .reel__mute .reel__mi-on { display:none; }
  .reel__mute.is-on { background:var(--yc-blue); }
  .reel__mute.is-on .reel__mi-off { display:none; }
  .reel__mute.is-on .reel__mi-on { display:block; }

  /* --- Avis clients (importés de la boutique Judge.me) --- */
  .reviews { padding:clamp(30px,5vw,56px) 0; }
  .reviews__title { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(28px,4.5vw,42px); letter-spacing:-.01em; }
  .reviews__top { display:flex; flex-wrap:wrap; gap:22px 40px; align-items:center; justify-content:center; margin-top:22px; padding-bottom:22px; border-bottom:1.5px solid var(--line); text-align:center; }
  .reviews__score { text-align:center; }
  .reviews__stars { color:#E7B93C; font-size:22px; letter-spacing:2px; }
  .reviews__avg { font-weight:800; font-size:18px; margin-top:4px; }
  .reviews__count { font-size:13px; color:var(--text-softer); }
  .reviews__bars { flex:1; min-width:230px; display:grid; gap:6px; text-align:left; }
  @media (max-width:639px){ .reviews__score { flex:0 0 100%; } .reviews__bars { flex:0 0 100%; min-width:0; max-width:360px; margin:0 auto; } }
  @media (min-width:640px){ .reviews__top { justify-content:space-between; text-align:left; } }
  .rvw-bar { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-softer); }
  .rvw-bar__k { width:26px; font-weight:700; color:var(--text-soft); }
  .rvw-bar__track { flex:1; height:9px; border-radius:999px; background:var(--line); overflow:hidden; }
  .rvw-bar__fill { display:block; height:100%; background:#2f9e51; border-radius:999px; }
  .rvw-bar__n { width:20px; text-align:right; }
  .reviews__list { margin-top:24px; display:grid; gap:14px; }
  @media (min-width:760px){ .reviews__list { grid-template-columns:1fr 1fr; } }
  .rvw { margin:0; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:18px; }
  .rvw__head { display:flex; align-items:center; gap:12px; }
  .rvw__av { width:38px; height:38px; border-radius:999px; background:var(--p2-th2); color:var(--yc-blue); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
  [data-theme="light"] .rvw__av { color:#A78BFA; }
  .rvw__who { margin:0; flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .rvw__who b { font-weight:800; font-size:14.5px; }
  .rvw__ok { font-size:12px; font-weight:700; color:#2f9e51; }
  .rvw__date { font-size:12px; color:var(--text-softer); flex-shrink:0; align-self:flex-start; }
  .rvw__stars { color:#E7B93C; font-size:14px; letter-spacing:1.5px; margin:10px 0 6px; }
  .rvw__body { margin:0; font-size:14px; color:var(--text-soft); line-height:1.55; }
  .reviews__more { display:inline-block; margin-top:20px; color:var(--yc-blue); font-weight:800; font-size:14px; text-decoration:none; }
  [data-theme="light"] .reviews__more { color:#A78BFA; }

  /* --- Panier (icône header + tiroir) --- */
  /* Jamais de scroll horizontal (mobile-first) : on clippe les débordements décoratifs
     — clip (et non hidden) préserve le header sticky. */
  html, body { overflow-x: clip; max-width: 100%; }
  .cart-btn { position:relative; background:transparent; border:0; color:inherit; cursor:pointer; padding:6px; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
  .cart-badge { position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#fff; color:var(--yc-blue); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.2); }
  .cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; z-index:90; }
  .cart-overlay.show { opacity:1; visibility:visible; }
  .cart-drawer { position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--surface); z-index:91; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.7,.2,1); box-shadow:-10px 0 40px rgba(0,0,0,.22); }
  .cart-drawer.open { transform:translateX(0); }
  @media (prefers-reduced-motion: reduce){ .cart-drawer,.cart-overlay{ transition:none; } }
  .cart-drawer__head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1.5px solid var(--line); }
  .cart-drawer__head h2 { font-family:var(--yc-font-heading); font-weight:400; font-size:24px; }
  .cart-drawer__close { background:transparent; border:0; font-size:19px; cursor:pointer; color:var(--text-softer); width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
  .cart-drawer__close:hover { background:var(--p2-pill); color:var(--text); }
  .cart-drawer__scroll { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
  .cart-drawer__body { flex:0 0 auto; padding:14px 22px 4px; }
  .cart-empty { text-align:center; padding:44px 0; color:var(--text-softer); font-size:14.5px; }
  .cart-empty a { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; margin-top:12px; color:var(--yc-blue); font-weight:800; text-decoration:none; }
  [data-theme="light"] .cart-empty a { color:#A78BFA; }
  .cart-item { display:flex; gap:14px; padding:18px 0; border-bottom:1.5px solid var(--line); position:relative; }
  .cart-item__img { width:70px; height:70px; border-radius:12px; object-fit:cover; background:var(--p2-cream); flex-shrink:0; }
  .cart-item__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .cart-item__info b { font-weight:800; font-size:14.5px; }
  .cart-item__opt { font-size:12px; color:var(--text-softer); line-height:1.35; }
  .cart-item__row { display:flex; align-items:center; justify-content:space-between; margin-top:5px; }
  .cart-qty { display:inline-flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:999px; padding:3px 8px; }
  .cart-qty button { background:transparent; border:0; font-size:18px; font-weight:800; cursor:pointer; color:var(--yc-blue); width:40px; height:40px; line-height:1; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
  .cart-qty button:active { background:rgba(93,46,214,.12); }
  [data-theme="light"] .cart-qty button { color:#A78BFA; }
  .cart-qty span { font-weight:800; font-size:14px; min-width:14px; text-align:center; }
  .cart-item__price { font-weight:800; font-size:14.5px; font-variant-numeric:tabular-nums; }
  .cart-item__rm { position:absolute; top:6px; right:-6px; background:transparent; border:0; color:var(--text-softer); cursor:pointer; font-size:15px; width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
  .cart-item__rm:active { background:rgba(128,128,128,.15); }
  .cart-item__rm:hover { color:#d1453b; }
  .cart-drawer__foot { flex:0 0 auto; margin-top:auto; border-top:1.5px solid var(--line); padding:18px 22px calc(20px + env(safe-area-inset-bottom)); background:var(--surface); }
  .cart-flabel { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-softer); margin:0 0 10px; }
  .cart-fields { display:grid; gap:13px; margin-bottom:20px; }
  .cart-fields label { display:grid; gap:6px; font-size:12px; font-weight:800; }
  .cart-fields input { border:1.5px solid var(--line-soft); border-radius:12px; background:var(--surface); color:var(--text); padding:13px 15px; font-family:var(--yc-font-body); font-size:15px; outline:none; transition:border-color var(--yc-transition); }
  .cart-fields input:focus { border-color:var(--yc-blue); }
  [data-theme="light"] .cart-fields input { background:#242424; border-color:rgba(255,255,255,.3); }
  .cart-deliv { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
  .cart-deliv__opt { text-align:left; background:var(--p2-pill); border:1.5px solid var(--p2-pill-line); border-radius:14px; padding:13px 15px; cursor:pointer; display:flex; flex-direction:column; gap:3px; font-family:var(--yc-font-body); color:var(--text); transition:border-color var(--yc-transition), background var(--yc-transition), transform 150ms cubic-bezier(.2,.7,.2,1); }
  .cart-deliv__opt:active { transform:scale(.98); }
  .cart-deliv__opt b { font-size:14px; font-weight:800; }
  .cart-deliv__opt span { font-size:11.5px; color:var(--text-softer); line-height:1.35; }
  .cart-deliv__opt.is-on { border-color:var(--p2-sel); background:var(--p2-sel); color:var(--p2-sel-text); }
  .cart-deliv__opt.is-on span { color:var(--p2-sel-text); opacity:.92; }
  .cart-deliv__opt.is-off { opacity:.48; }
  .cart-city { margin:0 0 14px; }
  .cart-city > label { display:block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--text-softer); margin-bottom:7px; }
  .cart-city-hint { font-weight:600; text-transform:none; letter-spacing:0; }
  .cart-city-row { display:flex; gap:8px; }
  .cart-city-row input { flex:1; min-width:0; padding:11px 13px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); font:inherit; font-size:14px; }
  .cart-city-row input:focus { outline:2px solid var(--yc-blue); outline-offset:1px; }
  .cart-city-btn { flex:0 0 auto; padding:0 16px; border-radius:12px; border:0; background:var(--yc-blue); color:#fff; font-weight:800; font-size:14px; cursor:pointer; }
  .cart-city-msg { font-size:13px; line-height:1.45; margin:0 0 12px; }
  .cart-city-msg:empty { margin:0; }
  .cart-city-msg.is-ok { color:#2f9e51; font-weight:600; }
  .cart-city-msg.is-err { color:#d64545; }

  /* --- Maillage entre pages villes : pastilles tapables au doigt --- */
  .villes__intro { font-size:14px; color:var(--text-soft); line-height:1.55; margin:0 0 14px; }
  .villes { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; }
  .villes a { display:flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px;
    border:1.5px solid var(--line); background:var(--surface); color:var(--text);
    font-size:14.5px; font-weight:600; text-decoration:none; }
  .villes a:hover, .villes a:focus-visible { border-color:var(--yc-blue); color:var(--yc-blue); }

  /* --- Parrainage (page de confirmation) --- */
  .parrain { margin:22px 0 4px; padding:18px; border-radius:16px; text-align:left;
    background:rgba(0,66,255,.07); border:1.5px solid rgba(0,66,255,.2); }
  [data-theme="light"] .parrain { background:rgba(0,66,255,.05); }
  .parrain h2 { font-size:17px; font-weight:800; margin:0 0 4px; }
  .parrain p { font-size:14px; color:var(--text-soft); margin:0 0 12px; }
  .parrain__row { display:flex; gap:8px; }
  .parrain__row input { flex:1; min-width:0; font-size:16px; padding:12px; border-radius:11px;
    border:1.5px solid var(--line); background:var(--surface); color:var(--text);
    font-family:ui-monospace,Menlo,monospace; }
  .parrain__row button, .parrain__share { flex:none; min-height:46px; padding:0 18px; border:0; border-radius:11px;
    background:var(--yc-blue); color:#fff; font-weight:800; font-size:14px; cursor:pointer; }
  .parrain__share { width:100%; margin-top:10px; }
  @media (max-width:420px){ .parrain__row { flex-wrap:wrap; } .parrain__row button { width:100%; } }

  /* --- Bandeau « ton pote t'offre -10 % » (arrivée par lien de parrainage) --- */
  .parrain-bar { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:70; display:flex; align-items:center; gap:10px;
    background:var(--yc-blue); color:#fff; border-radius:14px; padding:13px 14px;
    font-size:14px; line-height:1.35; box-shadow:0 10px 30px rgba(0,0,0,.28);
    animation:parrainIn .35s ease both; }
  .parrain-bar b { font-size:16px; white-space:nowrap; }
  .parrain-bar button { margin-left:auto; flex:none; width:32px; height:32px; border:0; border-radius:9px;
    background:rgba(255,255,255,.16); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
  .parrain-bar.is-out { animation:parrainOut .35s ease both; }
  @keyframes parrainIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
  @keyframes parrainOut { to{opacity:0;transform:translateY(14px)} }
  @media (prefers-reduced-motion:reduce){ .parrain-bar,.parrain-bar.is-out{animation:none} }
  @media (min-width:760px){ .parrain-bar { left:auto; right:20px; bottom:20px; max-width:360px; } }

  /* --- Point relais (retour) + code promo --- */
  .cart-relais, .cart-promo { margin:0 0 16px; }
  .cart-relais[hidden], .cart-promo[hidden] { display:none; }
  .cart-relais > label, .cart-promo > label { display:block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--text-softer); margin-bottom:7px; }
  /* Le dépliant : discret, mais assez grand pour le pouce (44 px). */
  .cart-fold { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:0; border:0; background:none; font-family:var(--yc-font-body); font-size:13.5px; font-weight:800; color:var(--yc-blue); text-align:left; cursor:pointer; }
  [data-theme="light"] .cart-fold { color:#A78BFA; }
  .cart-fold i { font-style:normal; font-weight:600; font-size:12px; color:var(--text-softer); }
  .cart-fold::after { content:"+"; margin-left:auto; font-size:16px; font-weight:800; }
  .cart-fold[aria-expanded="true"]::after { content:"−"; }
  .cart-fold[hidden] { display:none; }
  .cart-relais-msg, .cart-promo-msg { font-size:13px; line-height:1.45; margin:8px 0 0; }
  .cart-relais-msg:empty, .cart-promo-msg:empty { margin:0; }
  .cart-relais-msg.is-err, .cart-promo-msg.is-err { color:#d64545; }
  .cart-relais-msg.is-ok, .cart-promo-msg.is-ok { color:#2f9e51; font-weight:600; }
  .cart-relais-map { height:230px; border-radius:14px; overflow:hidden; margin-top:10px; border:1.5px solid var(--line); background:var(--p2-pill); }
  .cart-relais-map[hidden] { display:none; }
  .cart-relais-map .leaflet-container { height:100%; width:100%; font-family:var(--yc-font-body); background:var(--p2-pill); }
  /* Pastille numérotée : reprend le numéro affiché dans la liste juste en dessous. */
  .relais-pin { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px; background:var(--yc-blue); color:#fff; font-weight:800; font-size:12.5px; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer; }
  .relais-pin.is-on { background:#2f9e51; transform:scale(1.18); }
  .leaflet-popup-content { margin:10px 12px; font-size:13px; line-height:1.4; }
  .leaflet-popup-content b { display:block; margin-bottom:2px; }
  .leaflet-popup-content button { margin-top:8px; width:100%; border:0; border-radius:8px; background:var(--yc-blue); color:#fff; font-weight:800; font-size:13px; padding:8px; cursor:pointer; }
  .cart-relais-list { display:grid; gap:8px; margin-top:10px; max-height:260px; overflow-y:auto; }
  .relais-opt__i { flex:0 0 auto; width:24px; height:24px; border-radius:999px; background:var(--yc-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
  .relais-opt.is-on .relais-opt__i { background:#2f9e51; }
  .cart-relais-list:empty { margin-top:0; }
  .relais-opt { display:flex; gap:10px; align-items:flex-start; text-align:left; width:100%; background:var(--p2-pill); border:1.5px solid var(--p2-pill-line); border-radius:12px; padding:11px 13px; cursor:pointer; font-family:var(--yc-font-body); color:var(--text); transition:border-color var(--yc-transition), background var(--yc-transition); }
  .relais-opt:hover { border-color:var(--yc-blue); }
  .relais-opt.is-on { border-color:var(--p2-sel); background:var(--p2-sel); color:var(--p2-sel-text); }
  .relais-opt__b { flex:1; min-width:0; display:grid; gap:2px; }
  .relais-opt__n { font-size:13.5px; font-weight:800; }
  .relais-opt__a { font-size:12px; color:var(--text-softer); line-height:1.35; }
  .relais-opt.is-on .relais-opt__a { color:var(--p2-sel-text); opacity:.9; }
  .relais-opt__d { flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--yc-blue); }
  .relais-opt.is-on .relais-opt__d { color:var(--p2-sel-text); }

  /* --- Roue de la fortune (popup première offre) --- */
  .wheel-ov { position:fixed; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); z-index:80; display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; pointer-events:none; transition:opacity .25s ease; }
  .wheel-ov.show { opacity:1; pointer-events:auto; }
  .wheel-modal { position:relative; width:100%; max-width:880px; max-height:94vh; overflow-y:auto; background:var(--surface); border:1.5px solid var(--line); border-radius:22px; padding:clamp(20px,3vw,34px); display:grid; gap:clamp(18px,3vw,30px); grid-template-columns:1fr; box-shadow:0 24px 70px rgba(0,0,0,.4); }
  @media (min-width:760px){ .wheel-modal { grid-template-columns:1fr 1fr; align-items:center; } }
  .wheel-x { position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:999px; border:0; background:rgba(128,128,128,.18); color:var(--text); font-size:17px; cursor:pointer; line-height:1; }
  .wheel-x:hover { background:rgba(128,128,128,.3); }
  .wheel-stage { position:relative; display:flex; align-items:center; justify-content:center; }
  /* ⚠️ LA ROUE SUIT SON CONTENEUR, elle ne se dimensionne plus toute seule.
     Elle portait sa propre largeur en vw, independante de .sw-stage : reduire
     le conteneur sur petit ecran ne changeait donc rien, la roue debordait et
     poussait le bouton hors de l'ecran. Le viewBox conserve les proportions,
     height:auto suffit. */
  .wheel-svg { display:block; width:100%; height:auto; transform:rotate(0deg); transition:transform 4.6s cubic-bezier(.16,.84,.28,1); }
  .wheel-pin { position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-top:22px solid var(--yc-blue); filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); z-index:2; }
  .wheel-hub { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:999px; background:var(--yc-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:.03em; box-shadow:0 4px 14px rgba(0,0,0,.3); }
  .wheel-side h2 { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(24px,4vw,34px); line-height:1.1; margin:0 0 10px; }
  .wheel-side p.wheel-sub { font-size:14.5px; color:var(--text-soft); line-height:1.55; margin:0 0 18px; }
  .wheel-form { display:grid; gap:10px; }
  .wheel-form input { width:100%; box-sizing:border-box; border:1.5px solid var(--line-soft); border-radius:12px; background:var(--surface); color:var(--text); padding:14px 16px; font-family:var(--yc-font-body); font-size:15px; outline:none; }
  .wheel-form input:focus { border-color:var(--yc-blue); }
  [data-theme="light"] .wheel-form input { background:#242424; border-color:rgba(255,255,255,.3); }
  .wheel-go { width:100%; border:0; border-radius:12px; background:var(--yc-blue); color:#fff; font-family:var(--yc-font-body); font-weight:800; font-size:16px; padding:15px; cursor:pointer; transition:filter var(--yc-transition); }
  .wheel-go:hover { filter:brightness(1.07); }
  .wheel-go:disabled { opacity:.55; cursor:default; }
  .wheel-msg { font-size:13px; line-height:1.45; margin:10px 0 0; min-height:18px; }
  .wheel-msg.is-err { color:#d64545; }
  .wheel-legal { font-size:11.5px; color:var(--text-softer); line-height:1.45; margin:12px 0 0; }
  .wheel-legal a { color:var(--yc-blue); }
  .wheel-win { text-align:center; }
  .wheel-win__k { font-size:40px; line-height:1; margin-bottom:8px; }
  .wheel-win__t { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(22px,3.4vw,30px); margin:0 0 6px; }
  .wheel-win__p { font-size:15px; color:var(--text-soft); margin:0 0 14px; }
  .wheel-code { display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:19px; font-weight:700; letter-spacing:.08em; background:var(--p2-sel); color:var(--p2-sel-text); border-radius:12px; padding:12px 22px; margin-bottom:14px; }
  @media (prefers-reduced-motion: reduce){ .wheel-svg { transition:none; } }

  /* ============================================================
     Ergonomie mobile & accessibilité
     Cibles tactiles ≥ 44 px (recommandation Apple/Google), focus
     toujours visible au clavier, scroll contenu dans les panneaux.
     ============================================================ */
  /* Zones tactiles de l'en-tête : l'icône reste petite, la zone cliquable non. */
  .site-header__nav .theme-toggle { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* ── Bouton « Mon cadeau » de la navigation ──
     ⚠️ POSITION:RELATIVE OBLIGATOIRE : la pastille est en position absolue et,
     sans ancrage sur le bouton, elle irait se coller au premier parent
     positionné, donc n'importe où dans l'en-tête. */
  /* ⚠️ COULEUR HERITEE, PAS LE VIOLET DE LA MARQUE. Avec var(--yc-blue), le
     dessin devenait un violet fonce sur fond presque noir en theme sombre :
     invisible, et il ne restait que la pastille — un point rouge tout seul dans
     la barre. Le panier et le theme heritent de la couleur du texte pour cette
     raison exacte ; ce bouton fait pareil. */
  .nav-roue { position:relative; background:transparent; border:0; color:inherit;
              cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
              min-width:44px; min-height:44px; border-radius:999px; padding:0; }
  /* ⚠️ SANS CETTE LIGNE, L'ATTRIBUT hidden NE CACHE RIEN. La règle
     display:inline-flex ci-dessus est une règle d'auteur : elle l'emporte sur
     le display:none que le navigateur applique à [hidden]. Le bouton restait
     donc affiché en permanence, y compris pour qui ne peut pas jouer. */
  .nav-roue[hidden] { display:none; }
  .nav-roue svg { width:21px; height:21px; }
  .nav-roue:hover { background:rgba(128,128,128,.16); }
  .nav-roue:focus-visible { outline:2px solid var(--yc-blue); outline-offset:2px; }
  /* Battement lent : assez pour attirer l'œil, pas assez pour agacer. Le liseré
     de la couleur du fond détache la pastille du dessin qu'elle recouvre. */
  /* ⚠️ LA PASTILLE SE LIT SUR LE VIOLET DE LA BARRE, PAS SUR LE FOND DE PAGE.
     L'orange n'y ressortait qu'a 1,9 de contraste ; l'ambre monte a 4,9 et se
     detache aussi du blanc de l'icone, donc elle reste une pastille et pas un
     morceau du dessin. */
  .nav-roue::after { content:""; position:absolute; top:7px; right:7px;
                     width:9px; height:9px; border-radius:999px; background:#FFC24A;
                     box-shadow:0 0 0 2px var(--bg); animation:roue-bat 2.4s ease-in-out infinite; }
  @keyframes roue-bat { 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
  @media (prefers-reduced-motion:reduce){ .nav-roue::after { animation:none; } }
  .site-header__brand { display:inline-flex; align-items:center; min-height:44px; }
  .site-header__nav > a { display:inline-flex; align-items:center; min-height:44px; }
  .reel__mute { width:44px; height:44px; }
  /* Liens de pied de page : on garde la taille du texte, on élargit la zone de tap. */
  .site-footer ul a, .site-footer__legal a { display:inline-block; padding:12px 0; }
  .reviews__more { display:inline-block; padding:8px 0; }
  .skip-link { min-height:44px; display:inline-flex; align-items:center; }

  /* Focus clavier visible partout (jamais d'outline supprimé sans remplacement). */
  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
  [role="button"]:focus-visible, .chip:focus-visible, .relais-opt:focus-visible,
  .cart-deliv__opt:focus-visible, .gpack__add:focus-visible {
    outline:3px solid var(--yc-blue); outline-offset:2px; border-radius:8px;
  }
  [data-theme="light"] a:focus-visible, [data-theme="light"] button:focus-visible,
  [data-theme="light"] input:focus-visible { outline-color:#A78BFA; }

  /* Le scroll d'un panneau ne doit pas entraîner la page derrière. */
  .cart-drawer, .wheel-modal, .cart-relais-list, .cart-relais-map { overscroll-behavior:contain; }
  /* Encoches / barre gestuelle iPhone. */
  .cart-drawer__scroll { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .wheel-modal { margin-bottom:env(safe-area-inset-bottom); }

  /* Lisibilité : plus rien sous 12 px. */
  .gcover__name { font-size:12px; }
  .site-footer__disclaimer, .cart-flabel, .cart-note, .wheel-legal { font-size:12px; }

  /* Confort de saisie : pas de zoom auto iOS (déclenché sous 16 px). */
  .cart-fields input, .cart-city-row input, .wheel-form input, .gi-input { font-size:16px; }

  /* Une seule colonne pour les modes de réception sur les très petits écrans. */
  @media (max-width:359px){ .cart-deliv { grid-template-columns:1fr; } }

  /* Classe utilitaire : visible pour les lecteurs d'écran uniquement. */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* ============================================================
     CONVERSION MOBILE — le premier écran doit vendre
     Mesuré : la galerie carrée mangeait 360 px, ce qui repoussait le prix
     hors écran sur les petits téléphones (iPhone SE). On compresse le haut
     pour que titre + prix + note + réassurance tiennent sans scroller.
     ============================================================ */
  /* Bandeau de réassurance sous le prix : 3 pictos qui lèvent l'objection
     « j'envoie ma console à un inconnu » au moment exact de la décision.
     ⚠️ Déclaré AVANT la media query, sinon le display:none l'écraserait. */
  /* Guide « ma console est-elle compatible ? » — ouvert par défaut : c'est
     l'information qui évite un aller-retour payé pour rien. */
  .p2-compat { margin:12px 0 0; padding:0; border-radius:14px; overflow:hidden;
    background:var(--p2-pill); border:1px solid var(--p2-pill-line); }
  .p2-compat > summary { list-style:none; cursor:pointer; padding:13px 15px;
    font-size:15px; font-weight:800; display:flex; align-items:center; gap:9px; min-height:46px; }
  .p2-compat > summary::-webkit-details-marker { display:none; }
  .p2-compat > summary::before { content:"🎮"; font-size:17px; }
  .p2-compat > summary::after { content:"▾"; margin-left:auto; transition:transform .2s ease; opacity:.6; }
  .p2-compat[open] > summary::after { transform:rotate(180deg); }
  .p2-compat ol { margin:0; padding:0 15px 0 34px; }
  .p2-compat li { font-size:14.5px; line-height:1.5; margin-bottom:7px; }
  .p2-compat__astuce { font-size:13.5px; line-height:1.5; color:var(--text-soft); margin:4px 15px 12px; }
  .p2-compat code { font-family:ui-monospace,Menlo,monospace; font-size:12.5px;
    background:rgba(127,127,127,.16); padding:2px 6px; border-radius:5px; }
  .p2-compat__r { font-size:14px; line-height:1.5; margin:0; padding:11px 15px; border-top:1px solid var(--p2-pill-line); }
  .p2-compat__ok { background:rgba(47,158,81,.13); }
  .p2-compat__ko { background:rgba(230,150,20,.11); }

  /* Compatibilité firmware — rassurance n°1 avant d'envoyer sa console. */
  .p2-firmware { display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.45;
    margin:10px 0 0; padding:10px 12px; border-radius:11px;
    background:rgba(47,158,81,.11); border:1px solid rgba(47,158,81,.3); font-weight:600; }
  .p2-firmware svg { flex:none; margin-top:1px; color:#2f9e51; }
  [data-theme="light"] .p2-firmware svg { color:#3fbf6a; }
  /* Console avec un plafond de firmware : on retire le vert et la coche, qui
     annonceraient une bonne nouvelle alors que le texte pose une limite. */
  .p2-firmware--limite { background:var(--p2-pill); border-color:var(--p2-pill-line); font-weight:600; }
  .p2-firmware--limite svg { color:var(--text-soft); }

  /* Avertissement produit (ex. PS5 : plus de jeu en ligne). Volontairement bien
     visible et placé AVANT le bouton d'achat — c'est une info qui doit être lue. */
  .p2-attention { font-size:14px; line-height:1.5; margin:12px 0 0; padding:12px 14px;
    border-radius:12px; background:rgba(230,150,20,.11); border:1px solid rgba(230,150,20,.34); }
  .p2-attention b { color:#e09b18; }
  [data-theme="light"] .p2-attention { background:rgba(230,150,20,.09); }

  .p2-reassure { display:none; }
  .p2-reassure > div { display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; background:var(--p2-pill); border:1px solid var(--p2-pill-line); border-radius:12px; padding:9px 4px; }
  .p2-reassure svg { width:17px; height:17px; color:var(--yc-blue); }
  [data-theme="light"] .p2-reassure svg { color:#A78BFA; }
  .p2-reassure b { font-size:11.5px; font-weight:800; line-height:1.15; }
  .p2-reassure span { font-size:10px; color:var(--text-softer); line-height:1.2; }

  /* Options repliées : le configurateur ne doit plus s'intercaler entre le prix
     et le bouton d'achat. Replié = 1 ligne au lieu de ~1600 px. */
  .p2-options { margin:18px 0 0; border:1.5px solid var(--line); border-radius:16px; overflow:hidden; background:var(--p2-pill); }
  .p2-options > summary { list-style:none; cursor:pointer; padding:15px 18px; display:flex; align-items:center; gap:10px; font-family:var(--yc-font-body); }
  .p2-options > summary::-webkit-details-marker { display:none; }
  .p2-options > summary b { font-size:15.5px; font-weight:800; }
  .p2-options > summary span { flex:1; min-width:0; font-size:12.5px; color:var(--text-softer); }
  .p2-options > summary::after { content:"▾"; font-size:15px; color:var(--yc-blue); transition:transform 200ms ease; }
  .p2-options[open] > summary::after { transform:rotate(180deg); }
  .p2-options[open] > summary { border-bottom:1.5px solid var(--line); }
  .p2-options > #options-zone, .p2-options > .mini-recap { padding:0 16px; }
  .p2-options > #options-zone { padding-top:14px; }
  .p2-options > .mini-recap { padding-bottom:16px; }
  @media (max-width:899px){
    .p2-options > summary { padding:14px 15px; }
    .p2-options > summary span { display:none; }
  }

  /* Avis client cité sous la note — preuve sociale au point de décision. */
  .p2-quote { margin:8px 0 10px; padding:10px 14px; background:var(--p2-pill); border-radius:12px; }
  [data-theme="light"] .p2-quote { border-left-color:#A78BFA; }
  .p2-quote blockquote { margin:0; font-size:14px; line-height:1.45; color:var(--text); font-style:italic; }
  .p2-quote figcaption { margin-top:5px; font-size:12px; color:var(--text-softer); font-weight:600; }
  .p2-quote__ok { color:#2f9e51; font-weight:700; }
  /* 44 px de haut minimum : c'est la taille d'un doigt. Mesuré à 21 px, ce lien
     vers les avis était pratiquement inatteignable sur un téléphone — juste au
     moment où le visiteur cherche à se rassurer. */
  .p2-rating__link { color:inherit; text-decoration:underline; text-underline-offset:2px; display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }

  @media (max-width:899px){
    /* Fil d'Ariane : utile au SEO, inutile à la décision d'achat sur mobile. */
    .breadcrumb { font-size:12px; padding:8px 0 4px; margin:0; opacity:.7; }
    /* Photo produit : format paysage compact au lieu du carré. */
    .p2-main { aspect-ratio:4/3; max-height:34vh; }
    .p2-thumbs { margin-top:8px; }
    .p2-thumb { width:52px; height:52px; }
    .p2 { gap:14px; padding-top:0; }
    .p2-eyebrow { font-size:10.5px; }
    .p2-title { font-size:clamp(30px,8.5vw,40px); margin:2px 0 4px; }
    .p2-rating { margin:2px 0 6px; }
    .p2-price { margin:2px 0 4px; }
    .p2-price .amount { font-size:clamp(30px,8vw,38px); }
    .p2-ship { margin:2px 0 8px; }
    /* Les pavés explicatifs passent après la décision d'achat. */
    .p2-desc { font-size:14.5px; line-height:1.5; margin:6px 0 8px; }
    .p2-legalnote { display:none; }
    /* Réassurance compacte : 3 pictos au lieu de 3 phrases. */
    /* Trois tuiles CARRÉES. En rectangles larges avec un sous-titre chacune,
       elles formaient une bande de texte en travers de la fiche, juste sous le
       prix — l'endroit où l'œil doit trouver une garantie d'un coup, pas trois
       lignes à lire. Le sous-titre (« à l'atelier », « ou remboursé »,
       « aller-retour ») n'ajoutait rien que le titre ne dise déjà. */
    .p2-reassure { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 14px; }
    .p2-reassure > div { aspect-ratio:1; justify-content:center; gap:6px; padding:6px 4px; }
    .p2-reassure svg { width:22px; height:22px; }
    .p2-reassure b { font-size:12px; }
    .p2-reassure span { display:none; }
    /* Les mêmes promesses étaient répétées 3 fois. On les dit UNE fois,
       au moment de la décision : le reste part sur mobile. */
    .p2-trust, .p2-inforows { display:none; }
    .p2-quote { margin:6px 0 8px; padding:9px 12px; }
    .p2-quote blockquote { font-size:13.5px; }
  }

  /* Derniers petits liens : on élargit la zone de tap sans changer le visuel. */
  .breadcrumb a, .cookie-banner a, .float-card a { display:inline-block; padding:11px 0; }
  .cookie-banner .cookie-ok { min-height:44px; }
  .p2-qty__btn { min-width:44px; min-height:44px; }
  .cart-totals { display:grid; gap:10px; margin-bottom:18px; font-size:14.5px; }
  .cart-totals > div { display:flex; justify-content:space-between; color:var(--text-soft); }
  .cart-totals__grand { font-weight:800; font-size:18px; color:var(--text); padding-top:13px; border-top:1.5px solid var(--line); }
  /* L'acompte est la seule somme reellement debitee maintenant : c'est elle qui
     porte l'accent, le reste est une information de contexte. */
  /* ⚠️ SANS CETTE GARDE, L'ATTRIBUT hidden NE CACHE RIEN. display:grid est une
     règle d'auteur : elle l'emporte sur le display:none applique par le
     navigateur a [hidden]. Constate le 17 aout 2026 — ces deux lignes
     s'affichaient EN MODE LIVRAISON, juste au-dessus du bouton de paiement :
     le client lisait « Total 79,99 € » puis « A payer maintenant 5,00 € ».
     Meme piege sur .cart-badge et .sw-timer, corriges dans la foulee. */
  #cart-mp-lignes[hidden], .cart-badge[hidden], .sw-timer[hidden] { display:none; }
  #cart-mp-lignes { display:grid; gap:8px; margin-top:10px; padding-top:11px; border-top:1px dashed var(--line); }
  #cart-mp-lignes > div { display:flex; justify-content:space-between; font-size:14px; }
  .cart-mp__now { font-weight:800; color:var(--yc-blue); }
  [data-theme="light"] .cart-mp__now { color:#A78BFA; }
  .cart-mp__rest { color:var(--text-softer); }
  .cart-free { color:#2f9e51; font-weight:700; }
  .cart-drawer__foot .p2-cta { margin-top:0; }
  .p2-buy { width:100%; margin-top:10px; background:transparent; color:var(--yc-blue); border:1.5px solid var(--yc-blue); border-radius:999px; font-family:var(--yc-font-body); font-weight:800; font-size:15px; padding:15px; cursor:pointer; transition:background var(--yc-transition); }
  [data-theme="light"] .p2-buy { color:#A78BFA; border-color:#A78BFA; }
  .p2-buy:hover { background:rgba(93,46,214,.08); }
  .cart-note { font-size:12px; color:var(--text-softer); text-align:center; margin-top:11px; line-height:1.45; }
  .cart-note a { color:var(--yc-blue); font-weight:700; text-decoration:underline; }
  [data-theme="light"] .cart-note a { color:#A78BFA; }

  /* Bloc « comment ça se passe » : compact 2×2 sur mobile (prenait trop de place) */
  .how { padding:clamp(16px,4vw,28px) 0 !important; }
  /* Sur téléphone, quatre cartes en 2×2 avec chacune un gros chiffre, un titre
     et trois lignes de texte occupaient plus d'un écran entier — pour expliquer
     une évidence : tu envoies, on modde, tu reçois. On passe donc à UNE LIGNE
     PAR ÉTAPE : le chiffre dans une pastille à gauche, le titre et la phrase à
     droite. Même contenu, quatre fois moins haut, et ça se lit en diagonale. */
  .how__grid { display:grid !important; grid-template-columns:1fr !important; gap:8px !important; }
  .how__grid li { display:grid !important; grid-template-columns:30px 1fr !important; align-items:baseline; column-gap:12px !important; padding:11px 13px !important; border-radius:12px; }
  .how__grid b { font-size:19px !important; grid-row:1 / span 2; align-self:center; }
  .how__grid span { font-size:14px !important; margin-top:0 !important; }
  .how__grid p { font-size:12.5px !important; line-height:1.4; margin-top:2px !important; grid-column:2; }
  /* Au-delà de 760 px la place ne manque plus : on revient aux quatre cartes. */
  @media (min-width:760px){
    .how__grid { grid-template-columns:repeat(4,1fr) !important; }
    .how__grid li { display:block !important; padding:18px !important; }
    .how__grid b { font-size:26px !important; }
    .how__grid span { margin-top:6px !important; }
    .how__grid p { font-size:13.5px !important; }
  }

  /* CTA hero -> saute à « Choisis ta console » */
  /* ⚠️ LE SUR-TITRE NE PEUT PLUS ÊTRE VIOLET SUR LA PHOTO.
     Mesuré au pixel après avoir révélé le hero : 1,68:1 contre 4,5 exigés — il
     est en haut, là où le dégradé est le plus léger, et le violet clair n'a
     plus rien pour s'appuyer. Il passait AVANT parce que le fond était un aplat
     crème quasi opaque ; c'est donc ma modification qui l'a cassé.
     Il prend la couleur du texte, qui tient sur la photo, et garde son rôle par
     la graisse et l'espacement — pas par la couleur. */
  .hero .eyebrow { color:var(--text); opacity:.9; }
  [data-theme="light"] .hero .eyebrow { color:var(--text); }

  /* Ligne de réassurance sous le bouton. Elle doit tenir sur une ligne sur un
     téléphone de 360 px, d'où les séparateurs qui disparaissent au besoin. */
  .hero__preuve { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px 8px; margin:14px auto 0; font-size:13px; font-weight:600; color:var(--text-soft); }
  .hero__preuve b { font-size:15px; font-weight:800; color:var(--text); }
  .hero__preuve span { opacity:.45; }
  .hero__cta { display:block; width:fit-content; margin:10px auto 0; background:var(--yc-blue); color:#fff; text-decoration:none; font-weight:800; font-size:16px; padding:15px 30px; border-radius:999px; box-shadow:0 10px 26px rgba(93,46,214,.28); transition:transform var(--yc-transition), box-shadow var(--yc-transition); }
  .hero__cta:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(93,46,214,.36); }
  #choisir { scroll-margin-top:84px; }

  /* Visuel d'atelier EN FOND du hero, derrière le titre.
     Le voile par-dessus n'est pas cosmétique : sans lui, du texte noir sur une
     photo aux zones sombres tomberait sous le seuil de lisibilité. À 78 % le
     pire cas reste au-dessus de 12:1 — la photo transparaît, le texte ne bouge
     pas d'un iota. Le voile suit le thème : clair en mode clair, sombre sinon.
     background-attachment reste par défaut : le parallaxe fixe saccade sur iOS. */
  /* ⚠️ LE VOILE ÉTAIT À 80-86 % : LA PHOTO N'EXISTAIT PLUS.
     C'est un atelier de personnalisation — montrer une console moddée EST
     l'argument, et on l'avait recouverte d'un aplat presque opaque.
     Le dégradé remplace l'aplat : léger en haut, où la console se voit, dense
     en bas, derrière le texte et le bouton. Les valeurs ne sont pas choisies à
     l'œil, elles sont mesurées — le contraste du titre et du sous-titre est
     vérifié au rendu, sur mobile d'abord. */
  .hero--shot { background-image:
      linear-gradient(180deg, rgba(245,245,240,.42) 0%, rgba(245,245,240,.74) 46%, rgba(245,245,240,.95) 100%),
      url("mods-assets/hero-atelier.jpg?v=c9a35bc6");
    background-size:cover; background-position:center; background-repeat:no-repeat; }
  [data-theme="light"] .hero--shot { background-image:
      /* .56 en haut, mesuré : le sur-titre tombait à 4,46:1 contre 4,5 exigés. */
      linear-gradient(180deg, rgba(17,17,17,.56) 0%, rgba(17,17,17,.80) 46%, rgba(17,17,17,.96) 100%),
      url("mods-assets/hero-atelier.jpg?v=c9a35bc6"); }
  /* Sur mobile, la version 900 px suffit : 70 Ko au lieu de 174. */
  @media (max-width:900px){
    .hero--shot { background-image:
        linear-gradient(180deg, rgba(245,245,240,.38) 0%, rgba(245,245,240,.72) 44%, rgba(245,245,240,.96) 100%),
        url("mods-assets/hero-atelier-mobile.jpg?v=78dde907"); }
    [data-theme="light"] .hero--shot { background-image:
        /* .56 en haut, mesuré : le sur-titre tombait à 4,46:1 contre 4,5 exigés. */
      linear-gradient(180deg, rgba(17,17,17,.56) 0%, rgba(17,17,17,.80) 46%, rgba(17,17,17,.96) 100%),
        url("mods-assets/hero-atelier-mobile.jpg?v=78dde907"); }
  }

  /* ---------- Opération « Fin d'été » ----------
     Un seul moment animé : le bandeau descend et la pastille apparaît, une fois.
     Rien ne clignote ni ne pulse — des effets dispersés se neutralisent et
     finissent par être ignorés comme une bannière publicitaire. */
  /* Terracotta, PAS le violet de la marque : collé sous un en-tête violet, un
     bandeau de la même teinte se lit comme une extension du header et disparaît.
     L'écart de teinte est ce qui le fait exister. 6,43:1 avec le blanc. */
  /* Jaune poussin à texte FONCÉ. Le blanc est exclu d'office : il tombe à 1,24:1
     sur ce jaune, donc illisible. Le #111111 donne 15,29:1, et l'écart de
     luminosité avec le violet de l'en-tête (6,01) empêche les deux bandes de se
     confondre — c'était le défaut de la version violette. */
  /* Bandeau permanent de livraison offerte. Vert pâle : une bonne nouvelle,
     pas une alerte. Contraste vérifié à 8,9:1 en clair et 9,4:1 en sombre —
     bien au-delà du minimum de 4,5:1, y compris pour les petits caractères. */
  .ship-bar { background:#E7F5EC; color:#14532D; text-align:center; font-size:13px; padding:9px 16px; border-bottom:1px solid #CBE6D6; }
  [data-theme="light"] .ship-bar { background:#15301F; color:#B9E6C9; border-bottom-color:#204630; }
  .ship-bar__in { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; line-height:1.3; }
  .ship-bar b { font-weight:800; }
  .ship-bar svg { flex-shrink:0; }
  @media (max-width:430px) {
    .ship-bar { font-size:12px; padding:8px 12px; }
    /* Le complément saute avant que la ligne ne se coupe en deux. */
    .ship-bar__sur { display:none; }
  }

  .promo-bar { background:#FCE96A; color:#111111; text-align:center; font-size:13.5px; padding:10px 16px;
    transform:translateY(-100%); transition:transform 520ms cubic-bezier(.16,1,.3,1); }
  .promo-bar.is-in { transform:translateY(0); }
  .promo-bar__in { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
  .promo-bar b { font-weight:800; }
  /* Les emoji sont rendus par la police système : Apple Color Emoji sur iPhone
     et Mac, Segoe UI Emoji sur Windows, Noto sur Android. On ne peut pas
     imposer le dessin d'Apple ailleurs — ses images sont sous copyright.
     La pile ci-dessous demande la police emoji native en premier, ce qui évite
     qu'un navigateur retombe sur un glyphe monochrome terne.
     Le line-height à 1 empêche l'emoji de faire grandir la hauteur du bandeau.
     ⚠️ Jamais d'accent grave dans ces commentaires : tout ce bloc CSS vit dans
     un gabarit JavaScript délimité par des accents graves, et le littéral se
     refermerait au milieu. */
  .promo-bar__emo { font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
    font-size:15px; line-height:1; flex-shrink:0; }
  .promo-bar__cd { font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:700;
    background:rgba(17,17,17,.09); border-radius:999px; padding:3px 11px; }

  /* ⚠️ LE BANDEAU DOIT TENIR SUR UNE SEULE LIGNE.
     Sur deux lignes il mange 75 px de hauteur avant même le premier pixel de la
     page, et le compte à rebours, rejeté seul en dessous, ne se lit plus comme
     la fin de la même phrase. Il faut 421 px pour tout afficher d'un trait,
     contre 288 à 358 px disponibles sur téléphone : c'est du contenu qu'on
     retire, pas de la place qu'on gagne.
     Ce qui saute : « sur les mods » (on est déjà sur la boutique de mods) puis,
     seulement sous 340 px, les deux emoji, qui sont purement décoratifs. Ce
     dernier palier est bas exprès : mesuré, le bandeau emoji compris tient dans
     341 px, donc tous les téléphones courants les gardent — seuls les très
     petits écrans (iPhone SE en zoom texte) les perdent.
     ⚠️ « jusqu'à » NE SAUTE JAMAIS. Sans lui l'annonce devient « −30 % sur les
     mods », or seules trois consoles atteignent 30 % : ce serait une remise
     annoncée fausse, donc une pratique commerciale trompeuse. */
  @media (max-width:560px) {
    .promo-bar { font-size:12.5px; padding:9px 12px; }
    .promo-bar__in { flex-wrap:nowrap; gap:7px; }
    .promo-bar__sur { display:none; }
  }
  @media (max-width:340px) {
    .promo-bar { font-size:12px; padding:9px 8px; }
    .promo-bar__in { gap:6px; }
    .promo-bar__emo { display:none; }
    .promo-bar__cd { padding:3px 9px; }
  }

  /* Le prix barré reste secondaire : c'est une référence, pas une offre. */
  .p-old { color:var(--text-softer); font-weight:600; text-decoration-thickness:1.5px; margin-left:10px; }
  .p2-price .p-old { font-size:20px; }
  /* Même jaune que le bandeau : l'œil relie la pastille à l'opération annoncée
     en haut de page, au lieu de découvrir deux signaux sans rapport. */
  .p-off { display:inline-flex; align-items:baseline; gap:7px; background:#FCE96A; color:#111111;
    font-weight:800; font-size:12.5px; padding:5px 11px; border-radius:999px; margin-left:8px;
    vertical-align:middle; white-space:nowrap;
    animation:promo-pop 460ms cubic-bezier(.16,1,.3,1) both; }
  /* L'économie en euros : plus concrète que le pourcentage sur un article à 35 €. */
  .p-off i { font-style:normal; font-weight:700; font-size:11px; opacity:.78; }
  @keyframes promo-pop { from { transform:scale(.82); opacity:0; } to { transform:scale(1); opacity:1; } }
  .card__price .p-old { font-size:.62em; }
  .card__price .p-off { font-size:11px; padding:4px 9px; margin-left:6px; }
  .card__price .p-off i { display:none; }   /* trop étroit sur une carte de grille */
  /* Mention légale reléguée en pied de contenu, en note de bas de page. Elle
     reste obligatoire, mais rien n'impose qu'elle jouxte le prix : l'astérisque
     assure le lien. scroll-margin-top évite que l'en-tête collant la recouvre
     quand on clique sur l'astérisque. */
  .promo-ref { font-size:11px; line-height:1.45; color:var(--text-softer); margin:26px 0 0;
    padding-top:12px; border-top:1px solid var(--line); max-width:62ch; scroll-margin-top:90px; }
  .p-star { color:var(--text-softer); font-size:.62em; vertical-align:super; margin-left:3px; }
  @media (prefers-reduced-motion: reduce) {
    .promo-bar { transform:none; transition:none; }
    .p-off { animation:none; }
  }

  /* ---------- Roue « Spin to win » ----------
     Trois colonnes sur grand écran : deux collages produit qui encadrent le
     tunnel. Les collages sont purement décoratifs (aria-hidden) et disparaissent
     sous 1000 px, où toute la largeur revient au contenu utile. */
  /* ⚠️ CETTE LIGNE EST VITALE, NE PAS LA SUPPRIMER.
     L'attribut hidden ne masque un élément que via un display:none de faible
     priorité dans la feuille du navigateur. Le display:grid ci-dessous le
     surclasse : sans ce garde, la fenêtre restait affichée EN PERMANENCE
     par-dessus tout le site, en position:fixed, sans le moindre bouton
     fonctionnel quand le script sortait tôt. Le site entier devenait
     inutilisable. C'est arrivé en production le 2026-08-08 — deux fois : d'abord
     sur la fenêtre, puis sur le compte à rebours, figé sur sa valeur de départ parce que
     son display:inline-block masquait le même garde. D'où la règle DESCENDANTE
     ci-dessous : elle immunise toute la fenêtre d'un coup, quel que soit le
     display de l'élément. Ne rien ajouter ici sans y penser. */
  .sw-ov[hidden], .sw-ov [hidden] { display:none !important; }
  .sw-ov { position:fixed; inset:0; z-index:1000; background:var(--bg); overflow-y:auto;
    display:grid; grid-template-columns:1fr; align-items:center; }
  @media (min-width:1000px){ .sw-ov { grid-template-columns:1fr minmax(420px,560px) 1fr; } }

  /* ---------- Panneau remontant, sur mobile uniquement ----------
     Un modal qui prend tout l'ecran sur telephone donne l'impression d'avoir
     change de site : plus aucun repere, et la croix se retrouve dans le coin
     haut, precisement la zone qu'un pouce n'atteint pas sur un grand ecran.
     D'ou le panneau : une bande de page reste visible au-dessus, ce qui
     rappelle qu'on est toujours chez Yochamida et qu'on peut revenir. Ce voile
     est TAPABLE pour fermer — c'est la surface la plus facile a viser, bien
     plus qu'une croix de 44 px. */
  @media (max-width:999px){
    .sw-ov { background:rgba(0,0,0,.55); align-items:end; }
    .sw-main { background:var(--bg); border-radius:22px 22px 0 0; width:100%;
      max-height:94vh; overflow-y:auto; padding:26px 20px 28px;
      box-shadow:0 -12px 40px rgba(0,0,0,.22);
      animation:sw-monte 340ms cubic-bezier(.16,1,.3,1) both; }
    /* Poignee : signale que le panneau se ferme, convention connue de tous. */
    .sw-main::before { content:""; display:block; width:42px; height:4px; border-radius:99px;
      background:var(--line); margin:-8px auto 16px; }
  }

  @keyframes sw-monte { from { transform:translateY(16%); } to { transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){ .sw-main { animation:none; } }
  /* En haut A GAUCHE, choix de Simon. Sur une pastille pour rester lisible quel
     que soit ce qu'il y a derriere — c'est ce qui manquait avant, pas la
     position. */
  .sw-x { position:absolute; top:12px; left:12px; right:auto; z-index:3; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center; background:var(--p2-pill);
    border:0; border-radius:999px; font-size:19px; color:var(--text); cursor:pointer; }
  /* Collage décalé : trois vignettes de tailles et de retraits différents.
     Alignées et de taille égale, elles se liraient comme une liste ; décalées,
     elles composent un décor et laissent le regard filer vers le centre. */
  .sw-col { display:none; padding:30px; gap:22px; flex-direction:column; justify-content:center; }
  @media (min-width:1000px){ .sw-col { display:flex; } }
  .sw-col__i { height:auto; border-radius:16px; object-fit:cover; background:var(--media-bg);
    box-shadow:0 14px 34px rgba(0,0,0,.10); }
  .sw-col__i--1 { width:78%; align-self:flex-end; }
  .sw-col__i--2 { width:92%; align-self:flex-start; }
  .sw-col__i--3 { width:70%; align-self:center; }
  .sw-col--d .sw-col__i--1 { align-self:flex-start; }
  .sw-col--d .sw-col__i--2 { align-self:flex-end; }

  .sw-main { position:relative; padding:44px 22px 52px; text-align:center; max-width:520px; margin:0 auto; }
  .sw-logo { display:block; width:64px; height:64px; margin:0 auto; object-fit:contain; }
  /* Le rebours est l'information la plus périssable de l'écran : chiffres à
     chasse fixe pour qu'il ne tressaute pas d'une seconde à l'autre. */
  .sw-timer { display:inline-block; margin-top:18px; padding:8px 18px; border-radius:999px;
    background:var(--p2-pill); font-variant-numeric:tabular-nums; font-weight:800; font-size:16px;
    letter-spacing:.02em; }
  .sw-step { display:none; }
  .sw-step.is-on { display:block; }
  .sw-h { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(30px,6vw,46px); margin:18px 0 8px; }
  .sw-h--sm { font-size:clamp(24px,4.4vw,34px); }
  .sw-won { margin-top:22px; font-size:17px; color:var(--text-soft); }
  .sw-prize { font-family:var(--yc-font-heading); font-weight:400; font-size:clamp(26px,5vw,40px); margin:2px 0 20px; }
  .sw-q { font-size:15px; font-weight:700; margin:0 0 14px; }
  .sw-cta { display:block; width:100%; box-sizing:border-box; min-height:52px;
    background:var(--text); color:var(--bg); border:0; border-radius:10px; cursor:pointer;
    font-family:var(--yc-font-body); font-weight:700; font-size:15px; padding:15px 18px;
    text-decoration:none; text-align:center; transition:opacity var(--yc-transition); }
  .sw-cta:hover { opacity:.86; }
  .sw-stage { position:relative; container-type:inline-size; width:min(78vw,330px); margin:22px auto 10px;
    filter:drop-shadow(0 18px 40px rgba(0,0,0,.16)); }
  /* Le moyeu est le seul point cliquable de l'écran : anneau blanc pour le
     détacher des quartiers, et une cible bien au-delà des 44 px recommandés. */
  .sw-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:36%; aspect-ratio:1; border-radius:999px; border:5px solid var(--surface); cursor:pointer;
    /* ⚠️ La taille du texte SUIT celle de la roue. Figee a 13 px, elle debordait
       du disque noir des que la roue retrecissait sur petit ecran — « TOURNER »
       se retrouvait coupe (constate le 2026-08-11). En cqw, le mot occupe
       toujours la meme part du moyeu, quelle que soit la taille de la roue.
       Le clamp evite les deux exces : illisible en dessous, enorme au-dessus. */
    background:var(--text); color:var(--bg); font-weight:800; letter-spacing:.04em;
    font-size:clamp(8.5px, 5.2cqw, 13px);
    transition:transform 180ms cubic-bezier(.2,.7,.2,1); }
  .sw-hub:hover { transform:translate(-50%,-50%) scale(1.05); }
  .sw-hub:active { transform:translate(-50%,-50%) scale(.97); }
  .sw-hub:disabled { opacity:.55; cursor:default; transform:translate(-50%,-50%); }
  @media (prefers-reduced-motion: reduce){ .sw-hub, .sw-hub:hover, .sw-hub:active { transition:none; transform:translate(-50%,-50%); } }
  #sw-form-mail, #sw-form-tel { display:grid; gap:10px; max-width:380px; margin:0 auto; }
  #sw-email, #sw-phone { width:100%; box-sizing:border-box; min-height:54px; padding:15px 17px;
    font-family:var(--yc-font-body); font-size:16px; border:1.5px solid var(--line);
    border-radius:10px; background:var(--surface); color:var(--text);
    transition:border-color var(--yc-transition); }
  /* 16px minimum sur les champs : en dessous, iOS zoome tout seul à la mise au
     point et sort l'utilisateur de la fenêtre. */
  #sw-email:focus, #sw-phone:focus { outline:none; border-color:var(--yc-blue); }
  [data-theme="light"] #sw-email:focus, [data-theme="light"] #sw-phone:focus { border-color:#A78BFA; }

  /* ⚠️ LA FENETRE DOIT TENIR SANS DEFILEMENT.
     Signale le 2026-08-11 : le bouton « TOURNER LA ROUE » tombait sous la ligne
     de flottaison, il fallait faire defiler pour jouer — sur une fenetre qui
     s'ouvre toute seule, c'est la sortie assuree.
     Deux leviers, dans cet ordre :
       1. le logo saute (decoratif, la marque est deja dans l'en-tete du site) ;
       2. la roue se mesure aussi en vh, donc elle retrecit sur un ecran court
          au lieu de pousser le bouton dehors.
     Le min() garde les trois contraintes a la fois : jamais plus large que
     l'ecran, jamais plus grande que 330 px, jamais plus haute qu'un tiers de la
     hauteur disponible. */
  @media (max-width:999px){
    .sw-logo { display:none; }
    .sw-main { padding-top:18px; }
    .sw-timer { margin-top:4px; }
    .sw-h { font-size:clamp(24px,5.4vw,34px); margin:10px 0 4px; }
    .sw-stage { width:min(80vw,340px,40vh); margin:10px auto 14px; }
    .sw-legal { margin-top:10px; }
  }
  /* Ecrans courts (iPhone SE, Android compact, navigateur avec ses barres) : on
     serre encore. Le titre passe en petit, la roue descend a 26vh, et la mention
     legale se resume — elle reste presente, elle prend juste une ligne. */
  @media (max-width:999px) and (max-height:800px){
    .sw-main { padding-top:14px; padding-bottom:20px; }
    .sw-stage { width:min(74vw,300px,34vh); margin:6px auto 10px; }
    .sw-h { font-size:20px; margin:4px 0 2px; letter-spacing:0; }
    .sw-timer { margin-top:2px; padding:5px 14px; font-size:14px; }
    #sw-email { min-height:48px; padding:12px 15px; }
    .sw-cta { min-height:48px; }
    .sw-legal { font-size:11px; margin-top:8px; }
    .sw-main::before { margin:-4px auto 10px; }
  }

  /* Tres petits ecrans (iPhone SE en 667 px de haut). Dernier palier : la roue
     ne peut plus retrecir sans devenir illisible, donc c'est le titre qui saute
     — le contexte est deja donne par la roue elle-meme, qui affiche les lots. */
  @media (max-width:999px) and (max-height:700px){
    .sw-h { display:none; }
    .sw-stage { width:min(66vw,260px,30vh); margin:4px auto 8px; }
    .sw-main { padding-bottom:16px; }
  }
  .sw-retour { margin:14px 0 0; font-size:13.5px; line-height:1.5; opacity:.85; }
  .sw-retour b { opacity:1; }
  .sw-code { font-family:var(--yc-font-heading); font-size:28px; letter-spacing:.14em;
    padding:14px; border:1.5px dashed var(--line); border-radius:12px; margin:0 auto 16px; max-width:380px; }
  .sw-consent { font-size:11.5px; line-height:1.5; color:var(--text-softer); max-width:400px; margin:0 auto 16px; }
  .sw-legal { font-size:12px; color:var(--text-softer); margin:14px auto 0; max-width:380px; }
  .sw-skip { display:block; margin:14px auto 0; background:none; border:0; cursor:pointer;
    font-family:var(--yc-font-body); font-size:13px; color:var(--text-softer); text-decoration:underline; }
  .sw-msg { min-height:20px; margin:14px 0 0; font-size:13.5px; font-weight:700; color:#C0392B; }
  [data-theme="light"] .sw-msg { color:#FF8A80; }

  /* ---------- Contrastes du mode sombre ----------
     --yc-blue (#5D2ED6) est illisible sur les fonds sombres : 2,54:1 sur --bg,
     2,32:1 sur --surface, 1,77:1 sur --p2-th2 — tous sous le minimum WCAG AA
     de 4,5:1. La réponse existe déjà ailleurs dans cette feuille (#A78BFA) mais
     11 sélecteurs l'avaient manquée. Mesuré après correction : 6,94 / 6,33 / 4,84:1.
     ⚠️ Rappel : ici [data-theme="light"] désigne le mode SOMBRE (noms inversés). */
  [data-theme="light"] .relais-opt__d,
  [data-theme="light"] .faq summary::after,
  [data-theme="light"] .p2-options > summary::after,
  [data-theme="light"] .guide-toc a,
  [data-theme="light"] .breadcrumb a:hover,
  [data-theme="light"] .wheel-legal a,
  [data-theme="light"] #social .s-av { color:#A78BFA; }
  [data-theme="light"] .villes a:hover,
  [data-theme="light"] .villes a:focus-visible { border-color:#A78BFA; color:#A78BFA; }