/*
Theme Name: Boutique
Description: Thème classique de la boutique de mascottes et d'émotes pour streamers (transposition de maquette/index.html). Clair et sombre, sans parent, sans build.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: boutique
*/

/* ===========================================================
   1. Jetons de style — thème clair et thème sombre
   -----------------------------------------------------------
   Aucune couleur n'est écrite ailleurs que dans ces trois blocs, à deux exceptions près, toutes
   deux volontairement identiques dans les deux thèmes : le faux chat Twitch (section 5) et les
   tuiles teintées des mascottes (section 6), qui restent claires.

   Le thème sombre s'applique tout seul selon le réglage du système. Un visiteur qui bascule avec
   le bouton de l'en-tête écrit `data-theme` sur <html> (mémorisé en localStorage, posé par le
   script du <head> avant le premier pixel), et ce choix a le dernier mot.
   =========================================================== */
:root{
  color-scheme:light;
  --bg:#F6F2FB; --surface:#FFFFFF; --surface-2:#EDE6F7;
  --ink:#231A33; --ink-2:#5B4F70; --line:#DCD2EC;
  /* --accent-ink assombri d'un cran par rapport à la maquette (#B5570A) : posé sur --surface-2,
     l'orange de la maquette tombait à 3,98:1, sous le seuil AA de 4,5:1. */
  --accent:#F59331; --on-accent:#231A33; --accent-ink:#9C4A06;
  --lav:#7A63C2; --salmon:#F2A08F;
  --ok:#17784C; --wait:#9A5B00; --info:#5A45B0;
  --erreur:#A3222B; --on-erreur:#FFFFFF;
  /* Les tuiles de mascottes gardent leur teinte claire : leur encre ne bascule pas. */
  --tuile-ink:#231A33; --tuile-voile:rgba(255,255,255,.85);
  --display:"Lilita One","Trebuchet MS","Arial Rounded MT Bold",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#16111F; --surface:#211A2E; --surface-2:#2B2340;
    --ink:#F1ECF8; --ink-2:#B5A9CC; --line:#3A3052;
    --accent:#F59331; --on-accent:#231A33; --accent-ink:#FFB05C;
    --lav:#A995E8; --salmon:#F2A08F;
    --ok:#62D6A0; --wait:#FFC061; --info:#B7A6F5;
    --erreur:#FFA3A9; --on-erreur:#231A33;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#16111F; --surface:#211A2E; --surface-2:#2B2340;
  --ink:#F1ECF8; --ink-2:#B5A9CC; --line:#3A3052;
  --accent:#F59331; --on-accent:#231A33; --accent-ink:#FFB05C;
  --lav:#A995E8; --salmon:#F2A08F;
  --ok:#62D6A0; --wait:#FFC061; --info:#B7A6F5;
  --erreur:#FFA3A9; --on-erreur:#231A33;
}

/* ===========================================================
   2. Base
   =========================================================== */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:20px;padding-block:20px 96px;display:flex;flex-direction:column;gap:88px}
.sections{display:flex;flex-direction:column;gap:88px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,2.8rem)}
h3{font-size:1.45rem}
p{margin:0}
a{color:inherit}
button{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lav);outline-offset:3px;border-radius:6px}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink)}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:56ch}
.head{display:flex;flex-direction:column;gap:12px;max-width:64ch}
.head p{color:var(--ink-2)}
section{display:flex;flex-direction:column;gap:32px}
.stack{display:flex;flex-direction:column;gap:14px}
.num{font-variant-numeric:tabular-nums}
.fine{font-size:.92rem;color:var(--ink-2);max-width:72ch}
.spec{font-family:var(--mono);font-size:.82rem}
.vide{color:var(--ink-2);font-size:.95rem}

/* Texte réservé aux lecteurs d'écran */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Ce qui n'a de sens qu'avec du JavaScript : le script du <head> pose `data-bq-js` sur <html>.
   Sans lui, le bouton de bascule n'aurait aucun effet et le rechargement passe par un bouton. */
.bascule-theme{display:none}
:root[data-bq-js] .bascule-theme{display:inline-flex}
:root[data-bq-js] .bq-voir-avec{display:none}

/* Lien d'évitement : premier élément focusable de la page */
.evite{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:10px 16px;font-weight:700}
.evite:focus{left:16px;top:16px}

/* ===========================================================
   3. Barre du haut
   =========================================================== */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.5rem;text-decoration:none}
.brand img{width:40px;height:40px}
.nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-weight:600;font-size:.95rem}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav-liste{display:flex;gap:20px;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.nav-liste a[aria-current],.nav-liste .current-menu-item > a{color:var(--ink)}
/* Bascule clair / sombre : une seule icône à la fois, celle du thème affiché. */
.bascule-theme{
  align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  background:transparent;color:var(--ink-2);border:1.5px solid var(--line);border-radius:12px;cursor:pointer
}
.bascule-theme:hover{color:var(--ink);border-color:var(--ink-2)}
/* Une seule icône visible : la même spécificité partout, sinon les deux se superposent. */
.bascule-theme svg{display:none}
.bascule-theme .icone-soleil{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bascule-theme .icone-soleil{display:none}
  :root:not([data-theme="light"]) .bascule-theme .icone-lune{display:block}
}
:root[data-theme="dark"] .bascule-theme .icone-soleil{display:none}
:root[data-theme="dark"] .bascule-theme .icone-lune{display:block}
:root[data-theme="light"] .bascule-theme .icone-soleil{display:block}
:root[data-theme="light"] .bascule-theme .icone-lune{display:none}

.panier{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-weight:700}
.panier .compteur{font-family:var(--mono);font-size:.78rem;min-width:22px;height:22px;padding-inline:6px;border-radius:999px;background:var(--accent);color:var(--on-accent);border:1.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center}

/* ===========================================================
   4. Boutons
   =========================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:700;font-size:1rem;text-decoration:none;border-radius:14px;padding:14px 22px;border:2px solid var(--ink);cursor:pointer;transition:transform .12s ease;background:transparent;color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--accent);color:var(--on-accent);box-shadow:4px 4px 0 var(--ink)}
.btn-small{padding:9px 16px;font-size:.92rem;border-radius:12px}
.btn-main.btn-small{box-shadow:3px 3px 0 var(--ink)}
.nav .btn{color:var(--ink)}
.nav .btn-main{color:var(--on-accent)}
.mini{font-family:var(--body);font-weight:700;font-size:.8rem;border:1.5px solid var(--ink);background:transparent;border-radius:9px;padding:6px 10px;cursor:pointer;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.mini.go{background:var(--accent);color:var(--on-accent)}
@media (prefers-reduced-motion: reduce){.btn{transition:none}.btn:hover{transform:none}}

/* ===========================================================
   5. Hero
   =========================================================== */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero-text{display:flex;flex-direction:column;gap:22px}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.ticks{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;color:var(--ink-2);list-style:none;padding:0;margin:0}
.ticks li::before{content:"✓ ";color:var(--accent-ink);font-weight:700}

/* Faux chat Twitch : toujours sombre, quelle que soit la page */
.chat{background:#18181B;color:#EFEFF1;border-radius:18px;border:2px solid #2F2F35;padding:18px;display:flex;flex-direction:column;gap:14px;font-size:.92rem;box-shadow:8px 8px 0 var(--lav)}
.chat-title{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#ADADB8;display:flex;justify-content:space-between;gap:8px}
.chat-lines{display:flex;flex-direction:column;gap:9px}
.chat-line{line-height:1.9}
.chat-line img{vertical-align:middle}
.chat-line .emo{width:28px;height:28px;margin-inline:1px}
.u1{color:#FF9F45;font-weight:700}.u2{color:#B9A3FF;font-weight:700}.u3{color:#5EE0B5;font-weight:700}.u4{color:#FF8FA8;font-weight:700}
.ladder{display:flex;align-items:flex-end;gap:18px;border-top:1px solid #2F2F35;padding-top:14px}
.ladder figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ladder figcaption{font-family:var(--mono);font-size:.7rem;color:#ADADB8}
.ladder .txt{font-size:.82rem;color:#ADADB8;margin-left:auto;max-width:17ch;line-height:1.35}

/* ===========================================================
   6. Mascottes à adopter
   =========================================================== */
.adopt{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pet{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:10px;position:relative}

/* La tuile d'une mascotte porte sa teinte, toujours claire (elle vient de l'extension) : les
   jetons d'encre et de puces reprennent donc dedans leurs valeurs du thème clair, sinon le texte
   posé dessus deviendrait illisible en thème sombre. Vaut aussi pour la fiche et le sélecteur. */
.pet-tile,.fiche-tuile,.mcarte-tuile{
  --ink:#231A33; --ink-2:#5B4F70; --surface:#FFFFFF; --surface-2:#EDE6F7;
  --ok:#17784C; --wait:#9A5B00; --info:#5A45B0;
  color:var(--ink)
}
.pet-tile{border-radius:14px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--surface-2)}
.pet-tile img{width:112px;height:112px;object-fit:contain}
.pet-tile .shadow{filter:brightness(0);opacity:.26}
.pet-tile .q{position:absolute;font-family:var(--display);font-size:3rem;color:var(--tuile-ink);opacity:.55}
.pet-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pet-name{font-family:var(--display);font-size:1.3rem;line-height:1.1;text-decoration:none}
.pet-name:hover{color:var(--accent-ink)}
/* Toute la carte mène à la mascotte (retour du 28/09) : le lien du nom s'étend sur la carte, celui de l'adoptant reste au-dessus. */
.pet-name[href]::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pet:has(.pet-name[href]):hover{border-color:var(--ink)}
.pet:has(.pet-name[href]):hover .pet-name{color:var(--accent-ink)}
.pet:has(.pet-name:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.pet-name:focus-visible{outline:none}
.pet-kind{font-size:.88rem;color:var(--ink-2)}
.pet-price{font-family:var(--display);font-size:1.4rem;color:var(--accent-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap}
.chip.ok{color:var(--ok)}.chip.wait{color:var(--wait)}.chip.info{color:var(--info)}.chip.off{color:var(--ink-2)}
.pet.taken{opacity:.95}
.pet.custom{background:var(--surface-2);border-style:dashed;justify-content:center;gap:14px;padding:22px}
.pet.custom p{color:var(--ink-2);font-size:.95rem}

/* ===========================================================
   7. Filtres (formulaire GET, utilisable sans JavaScript)
   =========================================================== */
.filtres{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:16px}
.filtres .champ{min-width:150px}
.filtres .compte{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);margin-left:auto;align-self:center}
.champ{display:flex;flex-direction:column;gap:6px}
.champ > span,.champ > label{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.champ select,.champ input,.champ textarea{font-family:var(--body);font-size:1rem;line-height:1.3;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;max-width:100%}
.champ select:hover{border-color:var(--ink-2)}
.champ select:focus,.champ input:focus,.champ textarea:focus{border-color:var(--ink);outline:3px solid var(--lav);outline-offset:2px}

/* ===========================================================
   8. Catalogue : le composeur
   =========================================================== */
.composer{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.comp-left{display:flex;flex-direction:column;gap:22px;min-width:0}
.step-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.poses-groupe{display:block;border:0;margin:0;padding:0;min-width:0}
.poses-groupe > legend{padding:0;margin-bottom:10px}
.poses{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.pose{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;font-size:.8rem;text-align:center}
.pose img{width:64px;height:64px;object-fit:contain}
.pose .pname{font-weight:700}
.pose .pprice{font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.pose input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pose.anim{border-style:dashed;border-color:var(--lav)}
.pose:has(input:checked){border-style:solid;border-color:var(--ink);background:var(--surface-2)}
.pose:has(input:focus-visible){outline:3px solid var(--lav);outline-offset:3px}
.pose:has(input:checked)::after{content:"✓";position:absolute;top:-9px;right:-7px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
/* « exemple avec … » : la vignette montre une autre mascotte que celle qui est cochée. */
.pose .pexemple{font-family:var(--mono);font-size:.62rem;letter-spacing:.02em;color:var(--ink-2);line-height:1.25;text-wrap:balance}

/* 8.1 Sélecteur de mascotte : des cartes radio, pas une liste déroulante.
   Le radio reste dans le DOM (clavier, lecteurs d'écran, envoi sans JavaScript), simplement
   sorti du flux visuel : c'est la carte qui montre l'état. */
.choix-mascottes{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:16px}
.choix-mascottes > legend{padding:0;margin-bottom:10px}
.mcartes-groupe{display:flex;flex-direction:column;gap:8px;min-width:0}
/* Le titre d'un groupe n'est pas un second « eyebrow » : texte courant, pour ne pas doubler la légende. */
.mcartes-titre{font-size:.88rem;font-weight:700;color:var(--ink)}
.mcartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;min-width:0}
.mcarte{
  position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"tuile tuile" "nom prix" "genre prix";
  gap:2px 8px;align-items:baseline;min-width:0;
  background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:10px 12px 12px;cursor:pointer
}
.mcarte input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mcarte-tuile{
  grid-area:tuile;display:flex;align-items:center;justify-content:center;margin-bottom:6px;
  border-radius:12px;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)
}
/* La fiche du personnage fait 112 px : à sa taille réelle, réduite si la tuile est plus petite. */
.mcarte-tuile img{width:112px;height:112px;max-width:100%;max-height:100%;object-fit:contain}
.mcarte-plus{font-family:var(--display);font-size:2rem;line-height:1;color:var(--tuile-ink);opacity:.5}
.mcarte-nom{grid-area:nom;font-family:var(--display);font-size:1.15rem;line-height:1.1;overflow-wrap:anywhere}
.mcarte-genre{grid-area:genre;font-size:.82rem;color:var(--ink-2);line-height:1.3}
.mcarte-note{grid-area:prix;font-family:var(--display);font-size:1.1rem;color:var(--accent-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.mcarte:hover{border-color:var(--ink-2)}
.mcarte:has(input:checked){border-color:var(--ink);background:var(--surface-2);box-shadow:4px 4px 0 var(--accent)}
.mcarte:has(input:focus-visible){outline:3px solid var(--lav);outline-offset:3px}
/* La coche reste dans la carte : à l'étroit, les cartes défilent (section 24) et une pastille
   qui dépasse serait coupée par le conteneur de défilement. */
.mcarte:has(input:checked)::after{
  content:"✓";position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);
  font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center
}
/* « Créée pour toi » : pas d'image, le même langage que la tuile en pointillés de la galerie.
   La tuile garde le fond clair des autres cartes, sinon le « + » disparaîtrait en thème sombre. */
.mcarte-sur-mesure{border-style:dashed}
.mcarte-sur-mesure .mcarte-tuile{border:1.5px dashed var(--line)}
.mcarte-sur-mesure .mcarte-nom{font-size:1.05rem}
.bq-voir-avec{align-self:flex-start;min-height:44px}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.88rem;color:var(--ink-2)}
.legend span::before{content:"";display:inline-block;width:14px;height:14px;border-radius:5px;border:2px solid var(--line);vertical-align:-2px;margin-right:6px;background:var(--surface)}
.legend .l-anim::before{border-color:var(--lav);border-style:dashed}
.bill{background:var(--surface);border:2px solid var(--ink);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:14px;position:sticky;top:16px;box-shadow:7px 7px 0 var(--accent)}
.bill dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:.95rem}
.bill dt{color:var(--ink-2)}
.bill dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.bill .total{border-top:2px solid var(--ink);padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}
.bill .total b{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1}
.bill .split{font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.bill .btn{width:100%}
.bill .hint{font-size:.85rem;color:var(--ink-2)}
.tout-catalogue{align-self:flex-start}

/* ===========================================================
   9. Aperçu gratuit (filigrane)
   =========================================================== */
.previews{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;gap:14px;align-items:center}
.wm{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
/* Une émote fait 112 px : agrandie, elle devient floue. On la réduit si la place manque, jamais l'inverse. */
.wm img{width:112px;max-width:70%;height:auto}
/* Le filigrane n'est plus dessiné par la feuille de style : il est incrusté dans les fichiers
   (assets/img/*-apercu.png), comme celui que l'extension pose sur les vraies images. La page
   montre donc un aperçu pour de vrai, et non une imitation. */
.previews ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--ink-2)}
.previews ol b{color:var(--ink)}

/* ===========================================================
   10. Packs
   =========================================================== */
/* Le sélecteur de mascotte est partagé : un seul formulaire enveloppe les cartes des packs. */
.packs{display:flex;flex-direction:column;gap:26px;min-width:0}
/* Trois colonnes quand il y a trois packs (cas de la maquette), deux quand il n'y en a que deux. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:stretch}
.plan{background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:26px 22px;display:flex;flex-direction:column;gap:14px;position:relative;margin:0}
.plan.star{border-color:var(--ink);box-shadow:7px 7px 0 var(--accent)}
.flag{position:absolute;top:-13px;left:20px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
/* Pack pas encore ouvert : la vitrine, en retrait, sans bouton d'achat. */
.plan-bientot{border-style:dashed}
.plan-bientot .flag-bientot{background:var(--lav);color:var(--surface)}
.plan-bientot .prix b{color:var(--ink-2)}
.plan-attente{margin:0;color:var(--ink-2)}
.prix{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.prix b{font-family:var(--display);font-weight:400;font-size:3.2rem;line-height:1}
.prix s{color:var(--ink-2);font-size:.95rem}
.split{font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.95rem;flex:1}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.plan li.plus{font-weight:700}
.plan li.plus::before{background:var(--lav)}
.plan .btn,.plan button.btn{width:100%}

/* ===========================================================
   11. À la carte (présentée comme une carte de restaurant)
   =========================================================== */
.carte{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.carte li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-block:14px;border-bottom:1.5px dotted var(--line)}
.carte .what{font-weight:700;font-size:1.02rem}
.carte .cost{font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.carte .desc{grid-column:1/-1;font-size:.9rem;color:var(--ink-2)}

/* ===========================================================
   12. Règles de commande, engagements, questions, dernier appel
   =========================================================== */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rules > div{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}
.rules h3{font-size:1.15rem}
.rules h3::before{content:"✕ ";color:var(--accent-ink)}
.rules p{color:var(--ink-2);font-size:.95rem}

.proofs{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.proofs > div{display:flex;flex-direction:column;gap:6px;border-left:3px solid var(--accent);padding-left:16px}
.proofs h3{font-size:1.2rem}
.proofs p{color:var(--ink-2);font-size:.97rem}

.faq{display:flex;flex-direction:column;max-width:780px}
.faq details{border-bottom:1.5px solid var(--line);padding-block:16px}
.faq summary{font-weight:700;font-size:1.05rem;cursor:pointer}
.faq p{margin-top:10px;color:var(--ink-2);max-width:66ch}

.final{background:var(--ink);color:var(--bg);border-radius:28px;padding:40px 32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.final p{opacity:.8;margin-top:10px;max-width:48ch}
.final img{width:112px;height:112px}
.final .btn-main{border-color:var(--bg);box-shadow:4px 4px 0 var(--lav);margin-top:20px}

footer{display:flex;flex-direction:column;gap:14px;border-top:1.5px solid var(--line);padding-top:24px;font-size:.88rem;color:var(--ink-2)}
footer nav{display:flex;gap:8px 20px;flex-wrap:wrap}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:8px 20px;flex-wrap:wrap}

/* ===========================================================
   13. Pages de lecture (textes légaux, pages simples)
   =========================================================== */
.page-lecture{max-width:74ch;display:flex;flex-direction:column;gap:18px}
.contenu{font-size:.98rem;line-height:1.65;overflow-wrap:break-word}
.contenu h2{font-family:var(--display);font-size:1.6rem;margin:26px 0 8px}
.contenu h3{font-size:1.3rem;margin:24px 0 8px}
.contenu h4{font-family:var(--body);font-weight:700;font-size:1rem;margin:22px 0 6px}
.contenu p{margin:0 0 10px;color:var(--ink-2)}
.contenu pre{font-family:var(--body);white-space:pre-wrap;margin:0 0 10px;color:var(--ink-2);font-size:.95rem}
.contenu ul,.contenu ol{color:var(--ink-2);margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.contenu a{color:var(--accent-ink);text-decoration:underline}
.contenu table{min-width:0}

/* Pagination des listes de repli (index.php) */
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface);text-decoration:none}
.pagination .page-numbers.current{border-color:var(--ink);background:var(--surface-2);color:var(--ink);font-weight:700}

/* Tableaux : la largeur minimale ne s'applique qu'aux tableaux volontairement larges */
.tablebox{overflow-x:auto;border:1.5px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
.tablebox table{min-width:520px}
/* Un tableau de WooCommerce dans une boîte : c'est la boîte qui porte le cadre. */
.woocommerce .tablebox table.shop_table{border:0;border-radius:0;margin:0;background:transparent}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}

/* ===========================================================
   14. WooCommerce — habillage dans le même langage visuel
   =========================================================== */
.wc-page{display:flex;flex-direction:column;gap:28px}
.wc-page > h1,.page-boutique > h1{margin-bottom:0}

/* 14.0 WooCommerce pose des pseudo-éléments de « clearfix » (content:" ";display:table) sur des
   conteneurs que ce thème passe en grille ou en flex : ils y deviennent des enfants fantômes et
   décalent tout d'une case (le formulaire de commande se retrouvait en deuxième colonne). */
.woocommerce-message::before,.woocommerce-message::after,
.woocommerce-info::before,.woocommerce-info::after,
.woocommerce-error::before,.woocommerce-error::after,
.woocommerce .col2-set::before,.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,.woocommerce-page .col2-set::after,
.woocommerce form .form-row::before,.woocommerce form .form-row::after,
.woocommerce .cart-collaterals::before,.woocommerce .cart-collaterals::after,
.woocommerce-page .cart-collaterals::before,.woocommerce-page .cart-collaterals::after,
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce ul.order_details::before,.woocommerce ul.order_details::after,
.woocommerce div.product form.cart::before,.woocommerce div.product form.cart::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-checkout #payment ul.payment_methods::before,.woocommerce-checkout #payment ul.payment_methods::after,
.woocommerce-cart #payment ul.payment_methods::before,.woocommerce-cart #payment ul.payment_methods::after,
.woocommerce .woocommerce-pagination ul.page-numbers::before,.woocommerce .woocommerce-pagination ul.page-numbers::after,
.woocommerce-account .woocommerce::before,.woocommerce-account .woocommerce::after,
.woocommerce-cart .wc-proceed-to-checkout::before,.woocommerce-cart .wc-proceed-to-checkout::after,
.woocommerce-checkout .wc-proceed-to-checkout::before,.woocommerce-checkout .wc-proceed-to-checkout::after{
  content:none;display:none
}

/* 14.1 Notices */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  background:var(--surface);border:2px solid var(--ink);border-top:2px solid var(--ink);border-radius:16px;
  color:var(--ink);font-size:.95rem;list-style:none;margin:0 0 22px;padding:16px 18px;
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;box-shadow:4px 4px 0 var(--accent)
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before,.woocommerce .woocommerce-error::before{display:none}
.woocommerce-error,.woocommerce .woocommerce-error{box-shadow:4px 4px 0 var(--salmon);color:var(--erreur)}
.woocommerce-info,.woocommerce .woocommerce-info{box-shadow:4px 4px 0 var(--lav)}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{min-height:44px}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{width:100%;margin:0}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--erreur)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:var(--ok)}

/* 14.2 Boutons */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page input.button,
.wp-element-button,.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;text-transform:none;
  border-radius:14px;padding:14px 22px;border:2px solid var(--ink);cursor:pointer;
  background:transparent;color:var(--ink);box-shadow:none;transition:transform .12s ease
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #place_order,.woocommerce .checkout-button{background:var(--accent);color:var(--on-accent);box-shadow:4px 4px 0 var(--ink)}
.woocommerce button.button:disabled,.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled,.woocommerce input.button:disabled[disabled]{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);box-shadow:none}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,.woocommerce .checkout-button:hover{background:var(--accent);color:var(--on-accent)}
.woocommerce button.button:disabled,.woocommerce button.button:disabled[disabled],
.woocommerce a.button.disabled,.woocommerce a.button:disabled{opacity:.55;cursor:not-allowed;transform:none;padding:14px 22px}
.woocommerce .button.wc-backward{box-shadow:none}
.woocommerce a.remove{color:var(--erreur)!important;font-size:1.3rem;line-height:1;width:24px;height:24px;border-radius:50%}
.woocommerce a.remove:hover{background:var(--erreur)!important;color:var(--on-erreur)!important}
@media (prefers-reduced-motion: reduce){
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{transition:none}
  .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{transform:none}
}

/* 14.3 Formulaires */
.woocommerce form .form-row,.woocommerce-page form .form-row{padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.woocommerce form .form-row label,.woocommerce-page form .form-row label,
.woocommerce-form-row label,.woocommerce form .form-row label.inline{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0;line-height:1.4
}
.woocommerce form .form-row .required{color:var(--accent-ink);text-decoration:none}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection--single,
.woocommerce form .form-row .input-text,
.woocommerce-cart-form .coupon input.input-text,
.woocommerce #coupon_code,.woocommerce input[type="email"],.woocommerce input[type="password"],
.woocommerce input[type="tel"],.woocommerce input[type="text"],.woocommerce input[type="number"],.woocommerce textarea,.woocommerce select{
  font-family:var(--body);font-size:1rem;line-height:1.3;color:var(--ink);background:var(--surface);
  border:2px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;box-shadow:none;height:auto
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,.woocommerce input:focus,.woocommerce select:focus,.woocommerce textarea:focus{
  border-color:var(--ink);outline:3px solid var(--lav);outline-offset:2px
}
.woocommerce form.login,.woocommerce form.register,.woocommerce form.checkout_coupon,
.woocommerce-ResetPassword,.woocommerce-EditAccountForm,.woocommerce-address-fields,
.woocommerce form.woocommerce-form-login{
  background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:24px;margin:0 0 22px
}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}
.woocommerce .col2-set,.woocommerce-page .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:28px;width:100%}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:100%;float:none;padding:0}
.woocommerce form .form-row .woocommerce-input-wrapper{width:100%}
.woocommerce .woocommerce-form__label-for-checkbox,.woocommerce .form-row label.checkbox{
  display:flex;align-items:flex-start;gap:10px;font-family:var(--body);font-size:.95rem;
  letter-spacing:0;text-transform:none;color:var(--ink)
}
.woocommerce input[type="checkbox"],.woocommerce input[type="radio"]{accent-color:var(--accent);width:18px;height:18px;margin:2px 0 0}
/* select2 (pays, région) : sa liste est posée à la fin de <body>, hors de `.woocommerce`.
   Préfixer par `.woocommerce` ne l'atteindrait jamais — et en thème sombre elle resterait blanche. */
.select2-container--default .select2-selection--single{
  background:var(--surface);border:2px solid var(--line);border-radius:14px;height:auto;padding:12px 14px
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:1.3;padding:0}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--ink-2)}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:12px;right:10px}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-top-color:var(--ink-2)}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-bottom-color:var(--ink-2)}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--ink)}
.select2-dropdown{border:2px solid var(--ink);border-radius:14px;background:var(--surface);color:var(--ink);overflow:hidden}
.select2-container--default .select2-results__option{background:var(--surface);color:var(--ink)}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"]{background:var(--surface-2);color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--accent);color:var(--on-accent)}
.select2-search--dropdown{background:var(--surface)}
.select2-search--dropdown .select2-search__field{
  background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:8px
}

/* Jauge de mot de passe et champs refusés : WooCommerce les colore en dur. */
.woocommerce form .woocommerce-password-strength{
  background:var(--surface-2);color:var(--ink);border:0;border-radius:10px;font-size:.85rem;padding:8px 10px;text-align:left
}
.woocommerce form .woocommerce-password-strength.short,
.woocommerce form .woocommerce-password-strength.bad{color:var(--erreur)}
.woocommerce form .woocommerce-password-strength.good{color:var(--wait)}
.woocommerce form .woocommerce-password-strength.strong{color:var(--ok)}
.woocommerce form .woocommerce-password-hint{color:var(--ink-2);font-size:.85rem}
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce form .form-row.woocommerce-invalid label.checkbox{color:var(--erreur)}
/* Voile d'attente des appels AJAX : posé en style en ligne par blockUI, d'où le !important. */
.woocommerce .blockUI.blockOverlay,.woocommerce-page .blockUI.blockOverlay{background-color:var(--bg)!important}

/* 14.4 Tableaux (panier, commande, mon espace) */
.woocommerce table.shop_table,.woocommerce-page table.shop_table{
  border:1.5px solid var(--line);border-radius:18px;border-collapse:separate;border-spacing:0;
  background:var(--surface);margin:0 0 24px;width:100%
}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  border:0;border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:middle
}
.woocommerce table.shop_table thead th{
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)
}
.woocommerce table.shop_table tbody tr:last-child td,.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td{border-bottom:0}
.woocommerce table.shop_table tfoot th,.woocommerce table.shop_table tfoot td{font-weight:700;background:var(--surface-2)}
.woocommerce table.shop_table td.product-name a{text-decoration:none;font-weight:700}
.woocommerce table.shop_table img{width:56px;height:auto;border-radius:10px}
/* Les deux premières colonnes du panier (retirer, vignette) n'ont pas d'en-tête : sans largeur
   imposée, elles prennent le tiers du tableau et poussent les libellés vers la droite. */
.woocommerce table.shop_table .product-remove{width:44px;text-align:center;padding-inline:8px}
.woocommerce table.shop_table .product-thumbnail{width:76px;padding-inline:8px}
.woocommerce table.shop_table .product-name{width:auto}
.woocommerce table.shop_table .product-price,.woocommerce table.shop_table .product-quantity,
.woocommerce table.shop_table .product-subtotal{width:16%;white-space:nowrap}
.woocommerce table.shop_table .amount,.woocommerce .woocommerce-Price-amount{font-variant-numeric:tabular-nums;font-weight:600}
.woocommerce table.shop_table_responsive tr td::before,
.woocommerce-page table.shop_table_responsive tr td::before{
  font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)
}
.woocommerce .quantity .qty{width:5.5em;text-align:center;padding:10px 6px}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{width:100%;float:none}
.woocommerce .cart-collaterals{display:flex;flex-direction:column;gap:20px}
.woocommerce .cart_totals > h2,.woocommerce-checkout #order_review_heading,
.woocommerce-account .woocommerce-MyAccount-content h2,.woocommerce-checkout h3{
  font-family:var(--display);font-weight:400;font-size:1.45rem;margin:0 0 14px
}
.woocommerce .cart_totals table.shop_table{box-shadow:7px 7px 0 var(--accent);border:2px solid var(--ink)}
.woocommerce .cart_totals .order-total .amount{font-family:var(--display);font-weight:400;font-size:2rem;color:var(--ink)}
.woocommerce .wc-proceed-to-checkout{padding:0;margin-top:16px}
.woocommerce .wc-proceed-to-checkout a.checkout-button{display:flex;width:100%;font-size:1rem;margin:0}
/* Le panier n'est plus un tableau : ses lignes sont en section 18. */
.woocommerce .cart-empty,.woocommerce .return-to-shop{margin:0 0 16px}

/* 14.5 Page de paiement */
.woocommerce-checkout #customer_details{margin-bottom:8px}
.woocommerce-checkout-review-order{background:var(--surface);border:2px solid var(--ink);border-radius:22px;padding:24px;box-shadow:7px 7px 0 var(--accent)}
.woocommerce-checkout-review-order table.shop_table{border:0;background:transparent;margin-bottom:16px}
.woocommerce-checkout-review-order .order-total .amount{font-family:var(--display);font-weight:400;font-size:2rem}
.woocommerce-checkout #payment,.woocommerce-checkout #payment ul.payment_methods{background:transparent;border:0;padding:0;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0 0 16px;display:flex;flex-direction:column;gap:10px}
.woocommerce-checkout #payment ul.payment_methods li{
  background:var(--surface-2);border-radius:14px;padding:12px 14px;list-style:none;margin:0
}
.woocommerce-checkout #payment ul.payment_methods li label{font-family:var(--body);font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.woocommerce-checkout #payment div.payment_box{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;color:var(--ink-2);font-size:.9rem;margin:10px 0 0;padding:12px}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment .form-row.place-order{padding:0;margin:0}
.woocommerce-checkout #payment #place_order{width:100%}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-bottom:16px}
.woocommerce-checkout .woocommerce-privacy-policy-text p,.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p{font-size:.9rem;color:var(--ink-2)}
.woocommerce-checkout .woocommerce-terms-and-conditions{border:1.5px solid var(--line);border-radius:12px;padding:12px;background:var(--surface)}

/* 14.6 Mon espace : l'enveloppe et la navigation sont habillées en section 17 (bloc « app »). */
.woocommerce-account .woocommerce{display:block}
.woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none;min-width:0;display:flex;flex-direction:column;gap:18px}
.woocommerce-account .woocommerce-MyAccount-content > p{color:var(--ink-2)}
.woocommerce-account .woocommerce-MyAccount-content mark{background:var(--accent);color:var(--on-accent);border-radius:6px;padding:0 4px}
.woocommerce-account .addresses .title h2,.woocommerce-account .woocommerce-column__title{font-family:var(--display);font-weight:400;font-size:1.3rem}
.woocommerce-account .woocommerce-Address address{font-style:normal;color:var(--ink-2);font-size:.95rem;margin:0}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button{padding:8px 14px;font-size:.85rem;border-radius:10px}
.woocommerce ul.order_details{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.woocommerce ul.order_details li{
  border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin:0;float:none;border-right:1.5px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)
}
.woocommerce ul.order_details li strong{font-family:var(--body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);display:block;margin-top:4px}
.woocommerce-account .woocommerce-pagination,.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;flex-wrap:wrap;margin:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface);color:var(--ink)
}
/* WooCommerce colore la page courante en gris clair (« color:#8a7e88 ») avec une spécificité
   supérieure : sans la reprendre, le numéro passe sous le seuil AA dans les deux thèmes. */
.woocommerce nav.woocommerce-pagination ul li span.current{border-color:var(--ink);background:var(--surface-2);color:var(--ink);font-weight:700}
.woocommerce-form-login__rememberme{display:inline-flex;gap:8px;align-items:center}
.woocommerce-LostPassword{font-size:.9rem}

/* 14.7 Produits (fiche et listes) */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:100%;float:none;margin:0;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:14px;text-align:left}
/* Les visuels du catalogue sont des émotes de 112 px : WooCommerce les étirerait à la largeur
   de la carte (rendu flou). On les garde à leur taille, centrées sur une tuile. */
.woocommerce ul.products li.product a img{width:auto;max-width:100%;max-height:200px;display:block;margin:0 auto 10px;background:var(--surface-2);border-radius:14px;padding:10px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);font-weight:400;font-size:1.3rem;padding:0;margin:0 0 6px}
.woocommerce ul.products li.product .price{color:var(--accent-ink);font-family:var(--display);font-size:1.4rem;display:block;margin-bottom:10px}
.woocommerce ul.products li.product .button{margin:0}
.woocommerce span.onsale{background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);border-radius:999px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;min-height:0;min-width:0;padding:4px 10px;line-height:1.4;top:10px;left:10px;margin:0}
/* La fiche produit passe en deux colonnes. WooCommerce impose « float + width:48% » avec une
   spécificité élevée (.woocommerce div.product div.images) : on préfixe par .wc-page, l'enveloppe
   du thème, pour reprendre la main sans !important. */
.woocommerce .wc-page div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.woocommerce .wc-page div.product div.images,
.woocommerce .wc-page div.product div.summary{width:100%;float:none;margin:0}
.woocommerce .wc-page div.product .woocommerce-tabs,
.woocommerce .wc-page div.product .related,
.woocommerce .wc-page div.product .up-sells{grid-column:1/-1}
.woocommerce div.product .woocommerce-product-gallery{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:22px}
.woocommerce div.product .woocommerce-product-gallery__image img{width:auto;max-width:100%;max-height:320px;display:block;margin-inline:auto}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li{width:auto;float:none;margin:0}
.woocommerce div.product .summary{margin:0;float:none;width:100%;display:flex;flex-direction:column;gap:14px}
.woocommerce div.product .product_title{font-family:var(--display);font-weight:400}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--accent-ink);font-family:var(--display);font-size:2.4rem;line-height:1;margin:0}
.woocommerce div.product p.price del{font-family:var(--body);font-size:.95rem;color:var(--ink-2)}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-2)}
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0}
.woocommerce div.product .stock{color:var(--ok);font-family:var(--mono);font-size:.8rem}
.woocommerce div.product .out-of-stock{color:var(--erreur)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 18px;display:flex;gap:10px;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--surface-2);border:0;border-radius:999px;margin:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:8px 16px;font-weight:600;color:var(--ink-2)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
.woocommerce .product_meta{font-size:.85rem;color:var(--ink-2)}
.woocommerce .related > h2,.woocommerce .up-sells > h2{font-family:var(--display);font-weight:400;font-size:1.6rem}

/* ===========================================================
   16. Fiche d'une mascotte (gabarit woocommerce/content-single-mascotte.php)
   =========================================================== */
/* WooCommerce impose « float + width:48% » aux fiches produit et la section 14.7 les passe en deux
   colonnes : la fiche d'une mascotte reprend la main, elle a sa propre grille. */
.woocommerce .wc-page div.product.fiche-mascotte{display:flex;flex-direction:column;gap:44px}
.fiche-haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tuile infos" "chat infos";gap:28px 36px;align-items:start;min-width:0}

/* La tuile : grande, teintée (teinte de la mascotte), image à sa taille réelle, jamais agrandie. */
.fiche-tuile{
  grid-area:tuile;position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:22px;
  padding:28px;min-height:320px;overflow:hidden
}
.fiche-tuile .fiche-image{width:auto;max-width:100%;height:auto}
.fiche-tuile .shadow{filter:brightness(0);opacity:.26}
.fiche-tuile .q{position:absolute;font-family:var(--display);font-size:3rem;color:var(--tuile-ink);opacity:.55}
.fiche-tuile > .chip{position:absolute;top:14px;left:14px;background:var(--tuile-voile)}

.fiche-infos{grid-area:infos;display:flex;flex-direction:column;gap:14px;min-width:0}
.woocommerce div.product.fiche-mascotte .product_title{font-size:clamp(2.2rem,5vw,3.4rem);margin:0}
.fiche-genre{color:var(--ink-2)}
.fiche-mascotte .prix b{color:var(--accent-ink)}
.fiche-actions{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.woocommerce div.product.fiche-mascotte form.cart{margin:0;display:flex;flex-wrap:wrap;gap:12px}
.woocommerce div.product.fiche-mascotte form.cart .single_add_to_cart_button{flex:1 1 260px;min-height:52px}
.fiche-secondaire{display:flex;flex-wrap:wrap;gap:10px}
.fiche-inclus{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.fiche-inclus .ticks{flex-direction:column;gap:6px;font-size:.95rem}
.fiche-chat{grid-area:chat;display:flex;flex-direction:column;gap:10px;min-width:0}
.fiche-chat .fine{font-size:.85rem}
.fiche-autres{display:flex;flex-direction:column;gap:20px}
.fiche-autres h2{font-size:1.9rem}

/* Bloc « état + réservation » de l'extension, posé dans la colonne des actions. */
.bq-mascotte-reservation{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:16px
}
.bq-mascotte-reservation .bq-etat{font-size:.95rem;color:var(--ink-2)}
.bq-mascotte-reservation .bq-etat-a-moi{color:var(--info);font-weight:600}
.bq-mascotte-reservation .bq-fine{font-size:.85rem;color:var(--ink-2)}
.bq-form-reservation{margin:0;width:100%}
.bq-form-reservation .btn{width:100%}

/* ===========================================================
   17. Espace client : connexion, inscription, bloc « app »
   =========================================================== */
/* 17.1 Les deux portes d'entrée (déconnecté) */
.compte-portes{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;max-width:920px}
.compte-portes--seule{grid-template-columns:minmax(0,480px)}
.carte-compte{
  background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:24px;
  display:flex;flex-direction:column;gap:12px;min-width:0
}
.carte-compte h2{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.1}
.carte-compte .fine{margin:0}
/* Le formulaire n'est pas une carte dans une carte. */
.woocommerce .carte-compte form.login,.woocommerce .carte-compte form.register{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.woocommerce .carte-compte form .form-row{margin:0 0 14px}
.woocommerce .carte-compte form .form-row:last-of-type{margin-bottom:0}
/* Dans l'espace client, le formulaire n'est pas une carte dans le panneau. */
.woocommerce .panel form.woocommerce-address-fields,
.woocommerce .panel form.woocommerce-EditAccountForm,
.woocommerce .panel .woocommerce-address-fields,
.woocommerce .panel .woocommerce-EditAccountForm{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.woocommerce .panel fieldset{border:1.5px solid var(--line);border-radius:18px;padding:18px;margin:8px 0 18px}
.woocommerce .panel fieldset legend{font-family:var(--display);font-weight:400;font-size:1.2rem;padding:0 6px}

/* Libellés lisibles : les petites capitales mono restent aux filtres du catalogue. */
.woocommerce .carte-compte form .form-row > label,
.woocommerce .panel form .form-row > label,
.woocommerce .paiement .form-row > label{
  font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)
}
.carte-compte .woocommerce-form-login__submit,.carte-compte .woocommerce-form-register__submit{width:100%}
.carte-compte .woocommerce-LostPassword{font-size:.9rem;margin:0}
.carte-compte .woocommerce-LostPassword a{color:var(--accent-ink);text-decoration:underline}
.carte-compte .woocommerce-privacy-policy-text p{font-size:.88rem;color:var(--ink-2);margin:0 0 14px}

/* 17.2 Le bloc « app » : barre sombre, onglets, panneau */
.app{border:2px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:8px 8px 0 var(--lav)}
.app-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 18px;background:var(--ink);color:var(--bg);font-size:.9rem}
.app-bar .who{display:flex;align-items:center;gap:10px;font-weight:700}
.app-bar img{width:30px;height:30px;background:var(--bg);border-radius:50%}
.app-bar .ex{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;opacity:.75;overflow-wrap:anywhere}
.app-body{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:420px}
.app-body .woocommerce-MyAccount-navigation{width:100%;float:none;min-width:0;background:var(--surface-2);border-right:1.5px solid var(--line);padding:14px 10px}
.app-body .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.app-body .woocommerce-MyAccount-navigation li{margin:0}
.app-body .woocommerce-MyAccount-navigation li a{
  display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;
  font-weight:600;font-size:.93rem;color:var(--ink-2);text-decoration:none;white-space:nowrap
}
.app-body .woocommerce-MyAccount-navigation li a:hover{color:var(--ink);background:var(--surface)}
.app-body .woocommerce-MyAccount-navigation li.is-active a{background:var(--surface);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.panel{padding:22px;min-width:0}
.panel > h2{font-family:var(--display);font-weight:400;font-size:1.6rem}
.panel > h3{font-size:1.3rem}
.panel .woocommerce-notices-wrapper:not(:empty){margin-bottom:4px}

/* 17.3 Tuiles, bandeau et fiches clé-valeur de la maquette */
.tiles{display:flex;flex-wrap:wrap;gap:10px}
.tile{flex:0 1 190px;border:1.5px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px}
.tile span{font-size:.78rem;color:var(--ink-2)}
.tile b{font-family:var(--display);font-weight:400;font-size:1.5rem}
/* Un montant de WooCommerce dans une tuile garde la taille de la tuile (il arrive en <span>). */
.tile b .woocommerce-Price-amount,.tile b bdi{font-family:var(--display);font-weight:400;font-size:1.5rem}
/* Une date ou une phrase est trop longue pour la police d'affichage : texte courant. */
.tile b.tile-texte{font-family:var(--body);font-weight:700;font-size:1.05rem;line-height:1.3}
.tile.hl{border-color:var(--ink);background:var(--surface-2)}
.payout{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface-2);border-radius:14px;padding:14px 16px;font-size:.93rem}
.payout small{display:block;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv > div{border:1.5px solid var(--line);border-radius:12px;padding:14px;font-size:.92rem;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.kv small{display:block;color:var(--ink-2);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
small.ligne-detail{display:block;color:var(--ink-2);font-size:.78rem;font-family:var(--body)}

/* 17.4 États vides */
.vide-soigne{
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  background:var(--surface);border:1.5px dashed var(--line);border-radius:22px;padding:24px
}
.vide-soigne p{color:var(--ink-2);max-width:62ch}
.vide-panier{border-style:solid}
.vide-panier .lead{color:var(--ink)}

/* ===========================================================
   18. Panier et paiement
   =========================================================== */
/* La carte du récapitulatif ne prend pas toute la largeur de l'écran. */
.woocommerce .cart-collaterals{max-width:460px;margin-top:28px}
.bill h2{font-family:var(--display);font-weight:400;font-size:1.45rem;margin:0}
.bill .total b{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.bill .total .woocommerce-Price-amount,.bill .total strong{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1}
.bill .total small{font-family:var(--body);font-size:.74rem;font-weight:400;color:var(--ink-2);text-align:right;line-height:1.3}
.bill .wc-proceed-to-checkout{margin:0;padding:0}
.bill dd .woocommerce-Price-amount{font-weight:600}
/* « (dont X € de TVA) » : une mention, pas un second total (panier et paiement). */
.woocommerce small.includes_tax{
  display:block;font-family:var(--body);font-size:.74rem;font-weight:400;color:var(--ink-2);line-height:1.35;white-space:nowrap
}
.woocommerce small.includes_tax .woocommerce-Price-amount{
  display:inline;font-family:var(--body);font-size:.74rem;font-weight:400;color:var(--ink-2)
}

/* 18.1 Lignes du panier (gabarit woocommerce/cart/cart.php) */
.panier-lignes{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;overflow:hidden}
.panier-ligne{
  display:grid;grid-template-columns:72px minmax(0,1fr) 110px 110px 44px;
  grid-template-areas:"vignette desc qte total retrait";
  gap:14px;align-items:center;padding:16px;border-bottom:1px solid var(--line)
}
.panier-ligne:last-child{border-bottom:0}
.panier-vignette{grid-area:vignette}
.panier-vignette img{width:64px;height:auto;border-radius:12px;background:var(--surface-2);display:block}
.panier-desc{grid-area:desc;display:flex;flex-direction:column;gap:2px;min-width:0}
.panier-nom{font-weight:700;text-decoration:none;font-size:1.02rem}
.panier-unite{font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.panier-qte{grid-area:qte}
.woocommerce .panier-qte .quantity .qty{width:5em;text-align:center}
.panier-total{grid-area:total;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.panier-retrait{grid-area:retrait;text-align:right}
.woocommerce .panier-retrait a.remove{width:44px;height:44px;font-size:1.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:12px}
.panier-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:16px}
.panier-actions .coupon{display:flex;flex-wrap:nowrap;gap:10px;align-items:center}
.woocommerce .panier-actions .coupon input.input-text{width:200px;min-width:0}
.woocommerce .panier-actions .button{margin:0}

/* Nom de la mascotte sous chaque ligne du panier et du paiement. */
.panier-desc dl.variation,
.woocommerce table.shop_table .product-name dl.variation,
.woocommerce-checkout-review-order dl.variation{
  margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:2px 6px;font-size:.85rem;color:var(--ink-2)
}
.panier-desc dl.variation dt,
.woocommerce table.shop_table .product-name dl.variation dt,
.woocommerce-checkout-review-order dl.variation dt{font-weight:600;margin:0;clear:none}
.panier-desc dl.variation dd,
.woocommerce table.shop_table .product-name dl.variation dd,
.woocommerce-checkout-review-order dl.variation dd{margin:0}
.panier-desc dl.variation dd p,
.woocommerce table.shop_table .product-name dl.variation dd p,
.woocommerce-checkout-review-order dl.variation dd p{margin:0}

/* Paiement : les champs en une colonne, le récapitulatif collant à droite. */
.paiement-colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:36px;align-items:start}
.paiement-champs{min-width:0}
.paiement-champs #customer_details{display:block}
.paiement-recap{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.woocommerce .paiement .form-row{margin:0 0 18px}
.woocommerce-checkout-review-order .bq-split th,.woocommerce-checkout-review-order .bq-split td{border-bottom:0;padding-top:0}
.woocommerce-checkout-review-order .bq-split .split{font-weight:400}

/* Cibles tactiles d'au moins 44 px sur les pages composées ici (fiche, espace, panier, paiement). */
.fiche-mascotte .btn,.fiche-mascotte .mini,.app .btn,.app .mini,.bill .btn,
.vide-soigne .btn,.compte-portes .button,.paiement .button,
.demande .button,.demande .btn,.carte-info .btn,.aide-ticket .btn,.merci .btn{min-height:44px}

/* ===========================================================
   20. Aperçu gratuit sur mesure (page-apercu-gratuit.php)
   =========================================================== */
/* La carte de connexion et les cartes de mot de passe n'ont pas de voisine : on les borne. */
.compte-portes--seule .carte-compte,.carte-compte--seule{max-width:560px}

/* Rappel de la sélection laissée en session par le composeur ou par un pack. */
.carte-info{
  background:var(--surface);border:2px solid var(--ink);border-radius:22px;padding:24px;
  display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 var(--lav);max-width:640px
}
.carte-info h2{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.1}
.carte-info-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.carte-info-liste li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-block:8px;border-bottom:1.5px dotted var(--line);font-size:.97rem
}
.carte-info-liste li:last-child{border-bottom:0}
.carte-info-liste .spec{color:var(--ink-2);white-space:nowrap}
.carte-info .fine{margin:0}

/* Le formulaire de demande. */
.demande{display:flex;flex-direction:column;gap:26px;max-width:760px}
.demande-champs{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;align-items:start}
.demande .champ > label{font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.demande .champ input::placeholder,.demande .champ textarea::placeholder{color:var(--ink-2);opacity:.75}
.oblig{color:var(--accent-ink)}

.demande-images{border:1.5px solid var(--line);border-radius:18px;padding:18px;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.demande-images > legend{padding:0 6px}
.demande-images .fine{margin:0}
.inspis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.inspi{display:flex;flex-direction:column;gap:6px;min-width:0}
.inspi > label{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.inspi input[type="file"]{
  font-family:var(--body);font-size:.85rem;color:var(--ink);background:var(--surface);
  border:2px dashed var(--line);border-radius:14px;padding:10px;width:100%;min-width:0;min-height:44px
}
.inspi input[type="file"]:focus{border-color:var(--ink);outline:3px solid var(--lav);outline-offset:2px}
.inspi-vue{
  margin:0;display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2);
  background:var(--surface-2);border-radius:12px;padding:8px;min-width:0
}
.inspi-vue img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.inspi-nom{overflow-wrap:anywhere;min-width:0}

.demande-regles{
  background:var(--surface-2);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px
}
.regles-compactes{display:flex;flex-direction:column;gap:8px}
.regles-compactes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.95rem}
.regles-compactes li{padding-left:20px;position:relative}
.regles-compactes li::before{content:"✕";position:absolute;left:0;top:0;color:var(--accent-ink);font-weight:700}
.regles-compactes .fine{margin:0}
.regles-compactes .fine a{color:var(--accent-ink);text-decoration:underline}
.case-obligatoire{
  display:flex;align-items:flex-start;gap:12px;font-size:1rem;font-weight:600;
  background:var(--surface);border:2px solid var(--ink);border-radius:14px;padding:14px;cursor:pointer;min-height:44px
}
.case-obligatoire input{accent-color:var(--accent);width:22px;height:22px;margin:0;flex:0 0 auto}
.case-obligatoire:has(input:focus-visible){outline:3px solid var(--lav);outline-offset:3px}

.demande-envoi{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.demande-envoi .ticks{flex:1 1 280px}

/* Mot de passe oublié et choix d'un nouveau mot de passe : le formulaire n'est pas
   une carte dans la carte (section 14.3 habille .woocommerce-ResetPassword). */
.woocommerce .carte-compte form.woocommerce-ResetPassword{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.woocommerce .carte-compte form.woocommerce-ResetPassword .button{width:100%}

/* ===========================================================
   21. Assistance (page-assistance.php)
   =========================================================== */
.aide-ticket{background:var(--surface);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--accent);padding:18px 20px;max-width:720px}
.aide-ticket b{font-size:1.05rem}

/* ===========================================================
   22. Confirmation de commande (woocommerce/checkout/thankyou.php)
   =========================================================== */
/* page.php enferme le contenu des pages de WooCommerce dans un bloc simple : sans cette
   enveloppe, le mot de merci, les étapes et le détail de la commande se toucheraient. */
.merci-page{display:flex;flex-direction:column;gap:48px}
.merci{
  display:grid;grid-template-columns:minmax(0,1fr) 190px;grid-template-areas:"mot cotty" "recap recap";
  gap:24px 28px;align-items:center
}
.merci-mot{grid-area:mot;display:flex;flex-direction:column;gap:12px;max-width:60ch}
.merci-mot h2{font-size:clamp(1.9rem,4.4vw,2.8rem)}
.merci-cotty{grid-area:cotty;width:190px}
.merci-recap{grid-area:recap;position:static;max-width:460px;width:100%}
.merci-recap .total b{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1;color:var(--ink)}
.merci-recap dd.merci-email{overflow-wrap:anywhere;text-align:right}
.merci-recap .hint a{color:var(--accent-ink);text-decoration:underline}
.merci-echec{border-color:var(--erreur)}
.merci-echec .lead{color:var(--erreur)}

/* « Ce qui se passe maintenant » : les étapes numérotées comme les trois étapes de l'aperçu. */
.etapes{list-style:none;counter-reset:etape;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.etapes li{
  counter-increment:etape;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;
  padding:20px;display:flex;flex-direction:column;gap:8px
}
.etapes li::before{
  content:counter(etape);font-family:var(--display);font-size:1rem;width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center
}
.etapes h3{font-size:1.1rem}
.etapes p{color:var(--ink-2);font-size:.95rem}
/* Un pack ajoute une quatrième étape : deux rangs de deux plutôt qu'une colonne écrasée. */
.etapes:has(li:nth-child(4)){grid-template-columns:repeat(2,1fr)}

/* ===========================================================
   23. Détail d'une commande (woocommerce/order/order-details*.php)
   =========================================================== */
.commande-detail{display:flex;flex-direction:column;gap:14px}
.commande-detail > h3{font-size:1.3rem}
.ligne-cmd{display:flex;align-items:center;gap:12px;min-width:0}
.ligne-cmd-vignette{flex:0 0 auto;background:var(--surface-2);border-radius:10px;padding:4px;line-height:0}
.ligne-cmd-vignette img{width:44px;height:44px;object-fit:contain;border-radius:0;display:block}
.ligne-cmd-texte{min-width:0}
.ligne-cmd-texte a{text-decoration:none;font-weight:700}
.woocommerce .commande-detail table.shop_table{margin:0}
.woocommerce .commande-detail table.shop_table tfoot .order-total td,
.woocommerce .commande-detail table.shop_table tfoot .order-total th{font-size:1.05rem}
/* Les métas de ligne (« Mascotte : Basilic ») tiennent sur une ligne, pas en liste espacée. */
.ligne-cmd-texte ul.wc-item-meta{list-style:none;margin:3px 0 0;padding:0;font-size:.85rem;color:var(--ink-2)}
.ligne-cmd-texte ul.wc-item-meta li{margin:0}
.ligne-cmd-texte ul.wc-item-meta li p{display:inline;margin:0}
.ligne-cmd-texte ul.wc-item-meta strong.wc-item-meta-label{font-weight:600;margin-right:.35em;float:none;display:inline}
/* WooCommerce encadre l'adresse de la commande : ici c'est la fiche `.kv` qui porte le cadre. */
.woocommerce .woocommerce-customer-details address,
.woocommerce-customer-details address{
  border:0;border-radius:0;padding:0;margin:0;width:auto;font-style:normal;color:var(--ink-2);font-size:.95rem
}
.woocommerce-customer-details address span{display:block}

/* Les nouvelles d'une commande, dans l'espace client. */
.suivi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.suivi li{border-left:3px solid var(--accent);padding:2px 0 2px 14px}
.suivi .spec{color:var(--ink-2);margin:0}
.suivi p{color:var(--ink-2)}

/* Mon profil : prénom et nom sur une rangée. */
.champs-deux{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.woocommerce .champs-deux .form-row{margin:0 0 16px}

/* ===========================================================
   24. Écrans étroits — téléphone d'abord (dernière section : elle surcharge tout ce qui précède)
   =========================================================== */
@media (max-width:900px){
  .wrap,.sections{gap:64px}
  .hero{grid-template-columns:1fr;gap:32px}
  .adopt{grid-template-columns:1fr 1fr}
  .composer{grid-template-columns:1fr}

  /* Le sélecteur de mascotte : une rangée qui défile, plutôt qu'une colonne sans fin.
     Le padding laisse la place au liseré de focus sans déborder de la page. */
  .mcartes{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:thin;padding:6px;gap:10px
  }
  .mcarte{flex:0 0 168px;scroll-snap-align:start}
  .bill{position:static}
  .previews{grid-template-columns:repeat(3,1fr)}
  .previews ol{grid-column:1/-1}
  .plans{grid-template-columns:1fr}
  .carte{grid-template-columns:1fr}
  .rules,.proofs{grid-template-columns:1fr}
  .final{grid-template-columns:1fr}
  .woocommerce .col2-set,.woocommerce-page .col2-set{grid-template-columns:1fr;gap:0}
  .woocommerce .wc-page div.product{grid-template-columns:1fr;gap:20px}

  /* Fiche d'une mascotte : tuile, puis les informations, puis le chat. */
  .fiche-haut{grid-template-columns:1fr;grid-template-areas:"tuile" "infos" "chat";gap:22px}
  .fiche-tuile{min-height:240px;padding:22px}
  .woocommerce div.product.fiche-mascotte form.cart .single_add_to_cart_button{flex:1 1 100%}
  .fiche-autres h2{font-size:1.6rem}

  /* Espace client : une colonne, onglets en ligne défilante. */
  .compte-portes,.compte-portes--seule{grid-template-columns:1fr}
  .app{box-shadow:6px 6px 0 var(--lav)}
  .app-body{grid-template-columns:1fr;min-height:0}
  .app-body .woocommerce-MyAccount-navigation{border-right:0;border-bottom:1.5px solid var(--line);padding:10px}
  .app-body .woocommerce-MyAccount-navigation ul{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:thin}
  .app-body .woocommerce-MyAccount-navigation li.is-active a{box-shadow:inset 0 -3px 0 var(--accent)}
  .panel{padding:18px}
  .kv{grid-template-columns:1fr}

  /* Paiement : une colonne, le récapitulatif dessous. */
  .paiement-colonnes{grid-template-columns:1fr;gap:24px}
  .paiement-recap{position:static}
  .woocommerce .cart-collaterals{max-width:none}

  /* Panier : la vignette à gauche sur deux rangs, quantité et sous-total dessous. */
  .panier-ligne{
    grid-template-columns:56px minmax(0,1fr) 40px;
    grid-template-areas:"vignette desc retrait" "vignette qte total";
    align-items:start;row-gap:10px;column-gap:12px;padding:14px
  }
  .panier-vignette img{width:56px}
  .panier-total{align-self:center}

  /* Aperçu gratuit : les trois champs en colonne, les images sur deux rangs. */
  .demande-champs{grid-template-columns:1fr}
  .demande-envoi .btn{width:100%}

  /* Confirmation : Cotty passe au-dessus du mot, les étapes s'empilent en deux colonnes. */
  .merci{grid-template-columns:1fr;grid-template-areas:"cotty" "mot" "recap";gap:16px;justify-items:start}
  .merci-cotty{width:130px}
  .merci-recap{max-width:none}
  .etapes,.etapes:has(li:nth-child(4)){grid-template-columns:1fr 1fr}

  /* Mon profil : un champ par ligne. */
  .champs-deux{grid-template-columns:1fr;gap:0}
}
@media (max-width:520px){
  .wrap{padding-inline:16px}
  .adopt{grid-template-columns:1fr}
  .chat{box-shadow:5px 5px 0 var(--lav)}
  .ladder .txt{display:none}
  .final{padding:28px 22px}
  .bill{box-shadow:5px 5px 0 var(--accent)}
  .plan.star,.woocommerce .cart_totals table.shop_table,.woocommerce-checkout-review-order{box-shadow:5px 5px 0 var(--accent)}
  .filtres{flex-direction:column;align-items:stretch}
  .filtres .compte{margin-left:0}
  .panier-actions{flex-direction:column;align-items:stretch}
  .panier-actions .coupon{flex-direction:column;align-items:stretch}
  .woocommerce .panier-actions .coupon input.input-text{min-width:0;width:100%}
  .woocommerce .panier-actions .button{width:100%}
  .woocommerce table.shop_table_responsive tbody td,.woocommerce-page table.shop_table_responsive tbody td{padding:10px 12px}
  .woocommerce table.shop_table img{width:44px}
  .woocommerce ul.order_details li{width:100%}
  .app{box-shadow:5px 5px 0 var(--lav)}
  .fiche-tuile{min-height:200px}

  /* Aperçu gratuit et confirmation : plus de place pour le texte, une seule colonne partout. */
  .carte-info{box-shadow:5px 5px 0 var(--lav);padding:20px}
  .carte-info-liste li{flex-direction:column;gap:2px}
  .carte-info-liste .spec{white-space:normal}
  .inspis{grid-template-columns:1fr}
  .demande-images{padding:14px}
  .aide-ticket{box-shadow:5px 5px 0 var(--accent)}
  .etapes,.etapes:has(li:nth-child(4)){grid-template-columns:1fr}
  .ligne-cmd{align-items:flex-start}
}

/* Les tableaux « responsive » de WooCommerce passent en blocs sous 768 px : la largeur minimale
   de la boîte à défilement (section 13) les rendrait illisibles. */
@media (max-width:768px){
  .tablebox table.shop_table_responsive{min-width:0}
  .tablebox{overflow-x:visible}
}

/* ===========================================================
   Guides (page-taille-emote-twitch.php, page-mettre-une-emote-sur-twitch.php)
   =========================================================== */
/* Tableau des formats : sur téléphone, c'est la boîte qui défile, pas la page. Classe à part :
   la boîte `.tablebox` perd son défilement sous 768 px (tableaux de WooCommerce). */
.guide-tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1.5px solid var(--line);border-radius:14px;background:var(--surface)}
.guide-tableau table{min-width:680px}
.guide-tableau caption{caption-side:top;text-align:left;padding:14px 12px 6px;font-weight:700;font-size:1rem}
.guide-tableau td{vertical-align:top;color:var(--ink-2)}
.guide-tableau tbody th{vertical-align:top;font-family:var(--body);font-weight:700;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink)}

.guide .lead a,.guide .fine a,.guide .etapes a,.guide-texte a{color:var(--accent-ink);text-decoration:underline}
.guide b{color:var(--ink)}
.guide code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.guide-texte{display:flex;flex-direction:column;gap:14px;max-width:70ch}
.guide-texte p{color:var(--ink-2)}
.guide-liste{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;max-width:70ch;color:var(--ink-2)}
.guide-liste li::marker{color:var(--accent-ink);font-weight:700}

/* Les étapes du tutoriel sont longues : une seule colonne, quelle que soit la largeur. */
.etapes.guide-etapes,.etapes.guide-etapes:has(li:nth-child(4)){grid-template-columns:1fr;max-width:780px}

/* Encart final à deux boutons : sur le fond sombre, le bouton secondaire passe en clair. */
.guide-final .cta-row{margin-top:20px}
.guide-final .btn-main{margin-top:0}
.guide-final .btn:not(.btn-main){color:var(--bg);border-color:var(--bg)}

/* ===========================================================
   Refonte du 22/09/2026 : menu téléphone, fiche mascotte = aperçu, composeur, accueil court
   =========================================================== */

/* Marque en toutes lettres (plus de tête de Koko) */
.brand{font-size:1.7rem;letter-spacing:.01em}

/* Menu replié sur téléphone. Sans JavaScript (pas de data-bq-js), le bouton reste masqué et le
   menu s'affiche en entier, en plusieurs lignes. */
.menu-bouton{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 14px;background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:12px;font:700 .95rem var(--body);cursor:pointer}
.menu-icone,.menu-icone::before,.menu-icone::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative}
.menu-icone::before,.menu-icone::after{content:"";position:absolute;left:0}
.menu-icone::before{top:-6px}.menu-icone::after{top:6px}
.top.menu-ouvert .menu-icone{background:transparent}
.top.menu-ouvert .menu-icone::before{top:0;transform:rotate(45deg)}
.top.menu-ouvert .menu-icone::after{top:0;transform:rotate(-45deg)}
@media (max-width:900px){
  .top{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px}
  .top .brand{grid-column:1}
  .top .panier{grid-column:2;grid-row:1}
  :root[data-bq-js] .menu-bouton{display:inline-flex;grid-column:3;grid-row:1}
  .top .nav{grid-column:1/-1;grid-row:2;flex-direction:column;align-items:stretch;gap:6px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:10px}
  :root[data-bq-js] .top:not(.menu-ouvert) .nav{display:none}
  .top .nav-liste{flex-direction:column;align-items:stretch;gap:0}
  .top .nav-liste a{display:block;padding:12px 10px;font-size:1.05rem;color:var(--ink);border-radius:10px}
  .top .nav-liste a:hover{background:var(--surface-2)}
  .top .nav .btn{justify-content:center}
  .top .bascule-theme{align-self:flex-start}
}

/* « Tu vois avant de payer » : les deux cas côte à côte */
.deux-cas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cas{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cas p{color:var(--ink-2)}
.cas .btn{margin-top:auto}

/* Comment ça marche : trois étapes numérotées */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:etape}
.etapes > li{counter-increment:etape;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:8px;position:relative}
.etapes > li::before{content:counter(etape);font-family:var(--display);font-size:1.4rem;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center}
.etapes h3{font-size:1.2rem}
.etapes p{color:var(--ink-2);font-size:.97rem}

/* Packs : la comparaison « à l'unité » dit ce qu'elle est */
.prix .a-unite{font-size:.9rem;color:var(--ink-2)}
.prix .a-unite s{font-size:1rem}
.economie{margin:-6px 0 0;font-weight:700;color:var(--ok);font-size:.95rem}

/* Koko en vrai, sur l'accueil */
.vitrine{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center}
.vitrine .head .btn{align-self:flex-start}
.vitrine > :last-child{max-width:420px;justify-self:center;width:100%}

/* Galerie : « Adoptée par… » */
.pet-adoptant{font-size:.88rem;color:var(--ink-2);margin:0}
.pet-adoptant a{color:var(--accent-ink);font-weight:700;position:relative;z-index:1}

/* Fiche mascotte : caractère, offres, galerie complète */
.fiche-caractere{font-size:1.05rem;max-width:52ch}
.fiche-adoptee{display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:18px}
.fiche-adoptee p a{color:var(--accent-ink);font-weight:700}
.fiche-offres{display:flex;flex-direction:column;gap:10px}
.fiche-packs{display:flex;flex-direction:column;gap:10px;margin:0}
.offre{display:grid;grid-template-columns:1fr auto;grid-template-areas:"titre prix" "detail prix";gap:4px 14px;align-items:center;width:100%;text-align:left;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:18px;padding:14px 16px;font:inherit;cursor:pointer;transition:transform .12s ease}
button.offre:hover{transform:translateY(-2px);border-color:var(--ink)}
.offre-conseil{border-color:var(--ink);box-shadow:5px 5px 0 var(--accent)}
.offre-titre{grid-area:titre;font-weight:700;font-size:1.02rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.offre-titre .flag{position:static}
.offre-detail{grid-area:detail;color:var(--ink-2);font-size:.88rem}
.offre-prix{grid-area:prix;font-family:var(--display);font-size:1.7rem;line-height:1;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.offre-prix small{font-family:var(--body);font-size:.75rem;color:var(--ink-2);white-space:nowrap}
.offre-seule{cursor:default;grid-template-areas:"titre prix" "form form"}
.offre-seule form.cart{grid-area:form}
.woocommerce div.product.fiche-mascotte .offre-seule form.cart .single_add_to_cart_button{flex:1 1 100%;min-height:46px}
.fiche-liens{margin:2px 0 0}
.fiche-liens a{font-weight:700;color:var(--ink)}
@media (prefers-reduced-motion: reduce){button.offre{transition:none}button.offre:hover{transform:none}}

.fiche-galerie{display:flex;flex-direction:column;gap:18px}
.fiche-galerie h3.step-label{margin-top:8px}
.planche{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.planche li{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:10px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.planche img{width:112px;height:112px;object-fit:contain}
.planche li > span{font-size:.85rem;font-weight:600;text-align:center}
.planche-badges{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.planche-badges img{width:72px;height:72px}
.planche-badges img.badge-18{width:18px;height:18px}

/* Composeur : barre de total collée en bas de l'écran, sur téléphone seulement */
.barre-total{display:none}
@media (max-width:900px){
  .composer .barre-total:not([hidden]){
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;bottom:10px;z-index:5;grid-column:1/-1;
    background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:10px 12px;box-shadow:4px 4px 0 var(--accent)
  }
  .barre-total b.num{font-family:var(--display);font-weight:400;font-size:1.4rem}
}
.bill .hint a{color:var(--accent-ink);font-weight:700}
.bill .hint.conseil-actif{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:.9rem}

/* Aide : deux canaux */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Profil : champs de vitrine */
.bq-vitrine{border:1.5px solid var(--line);border-radius:18px;padding:16px;margin:8px 0}
.bq-vitrine legend{font-weight:700;padding:0 6px}

@media (max-width:900px){
  .deux-cas,.etapes,.vitrine,.contacts{grid-template-columns:1fr}
  .vitrine > :last-child{justify-self:start}
}
@media (max-width:520px){
  .offre{grid-template-columns:1fr;grid-template-areas:"titre" "detail" "prix"}
  .offre-seule{grid-template-areas:"titre" "prix" "form"}
  .offre-prix{flex-direction:row;align-items:baseline;justify-content:flex-start;text-align:left}
  .planche{grid-template-columns:repeat(3,1fr)}
  .planche img{width:88px;height:88px}
  .planche-badges img{width:64px;height:64px}
}

/* Galerie sur téléphone : deux mascottes par ligne (une par écran rendait l'accueil interminable) ;
   la carte « Tu ne trouves pas la tienne ? » prend toute la largeur. */
@media (max-width:520px){
  .adopt{grid-template-columns:1fr 1fr;gap:10px}
  .adopt .pet{padding:10px;gap:6px;border-radius:18px}
  .adopt .pet-tile{aspect-ratio:1/1}
  .adopt .pet-tile img{width:96px;height:96px}
  .adopt .pet-row{flex-wrap:wrap;gap:4px 8px}
  .adopt .pet-kind{font-size:.82rem}
  .adopt .pet .chip{font-size:.62rem;padding:3px 7px}
  .adopt .pet.custom{grid-column:1/-1}
}

/* « Ils ont déjà adopté la leur » : une rangée de bouilles qui défile au doigt, chacune vers la chaîne de son adoptant */
.adoptees{list-style:none;margin:0;padding:4px 2px 12px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
.adoptees li{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 8px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);transition:transform .12s ease}
.adoptees li:hover{transform:translateY(-3px);border-color:var(--ink)}
/* Deux liens par carte (26/10/2026) : la page de la mascotte (bouille, nom), puis sa chaîne en live. */
.adoptees .adoptee-fiche{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.adoptees .adoptee-fiche:hover b{text-decoration:underline}
.adoptee-bouille{width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);overflow:hidden;border:2px solid var(--ink)}
.adoptee-bouille img{width:96px;height:96px;object-fit:contain}
.adoptees b{font-family:var(--display);font-weight:400;font-size:1.2rem}
.adoptees span:not(.adoptee-bouille){font-size:.85rem;color:var(--ink-2)}
.adoptees .adoptee-live{margin-top:auto;font-weight:700;color:var(--accent-ink);font-size:.85rem;text-decoration:none;padding:4px 10px;border-radius:999px;border:1.5px solid currentColor}
.adoptees .adoptee-live:hover{text-decoration:underline}
.adoptees .adoptee-live::after{content:" →"}
@media (prefers-reduced-motion: reduce){.adoptees li{transition:none}.adoptees li:hover{transform:none}}

/* ===========================================================
   24. Mon espace : À faire, mes mascottes, créations, choix (ouverture complète, 25/09/2026)
   =========================================================== */
.panel section{margin-top:26px}
.panel section > h3{font-size:1.2rem;margin:0 0 12px}
.a-faire-liste,.en-cours-liste,.mes-mascottes,.creations{list-style:none;margin:0;padding:0}
.a-faire-liste{display:flex;flex-direction:column;gap:10px}
.a-faire-item{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border:2px solid var(--ink);border-radius:16px;padding:14px 16px;background:var(--surface);box-shadow:4px 4px 0 var(--accent)}
.a-faire-item > div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 260px}
.a-faire-item small{color:var(--ink-2);font-size:.9rem}
.rien-a-faire{color:var(--ink-2)}
.en-cours-liste{display:flex;flex-direction:column;gap:8px}
.en-cours-liste li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border-bottom:1.5px dotted var(--line);padding-bottom:8px}
.en-cours-liste a{font-weight:700}
.en-cours-liste small{color:var(--ink-2)}

.mes-mascottes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.ma-mascotte a{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-decoration:none;color:var(--ink);border:1.5px solid var(--line);border-radius:16px;padding:12px;height:100%;background:var(--surface)}
.ma-mascotte a:hover{border-color:var(--ink)}
.ma-mascotte-tuile{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:12px;background:var(--surface-2);overflow:hidden}
.ma-mascotte-tuile img{width:112px;height:112px;max-width:90%;object-fit:contain}
.ma-mascotte-nom{font-family:var(--display);font-size:1.2rem;line-height:1.1}
.ma-mascotte-info{display:flex;flex-wrap:wrap;gap:6px}

.retour{margin:0 0 8px}
.retour a{color:var(--ink-2);font-size:.92rem}
.mascotte-tete{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;align-items:center}
.mascotte-tete .ma-mascotte-tuile{width:140px}
.mascotte-tete h2{font-family:var(--display);font-weight:400;font-size:2rem;margin:0}
.mascotte-tete .fine{margin:4px 0 10px}
.tout-valider{margin-top:18px}

.creations{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.creation{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;border:1.5px solid var(--line);border-radius:16px;padding:12px;background:var(--surface);align-items:start}
.creation-a_valider{border-color:var(--ink);box-shadow:4px 4px 0 var(--accent)}
.creation-image{width:88px;height:88px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.creation-image img{width:84px;height:84px;object-fit:contain}
.creation-vide{font-family:var(--display);font-size:1.6rem;color:var(--ink-2)}
.creation-corps{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.creation-nom{overflow-wrap:anywhere}
.creation-corps small{color:var(--ink-2);font-size:.84rem}
.creation-gestes{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}
.creation-gestes form{margin:0}
.vraie-taille{display:flex;gap:6px;flex-wrap:wrap}
.vraie-taille-fond{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px}
.vraie-taille-sombre{background:#18181B}
.vraie-taille-clair{background:#FFFFFF;border:1px solid var(--line)}
.retouche{width:100%}
.retouche summary{list-style:none;cursor:pointer}
.retouche summary::-webkit-details-marker{display:none}
.retouche form{display:flex;flex-direction:column;gap:8px;margin-top:10px;border-top:1.5px dotted var(--line);padding-top:10px}
.retouche label{font-weight:600;font-size:.9rem}
.retouche textarea{width:100%;font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:8px;background:var(--surface);color:var(--ink)}
.retouche-boutons{display:flex;flex-wrap:wrap;gap:6px}
.retouche .fine{font-size:.8rem;margin:0}

.choix{display:flex;flex-direction:column;gap:22px}
.choix-groupe{border:1.5px solid var(--line);border-radius:18px;padding:16px;margin:0;min-width:0}
.choix-groupe > legend{font-weight:700;font-size:1.05rem;padding:0 6px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.choix-compteur{font-family:var(--mono);font-size:.8rem;border:1.5px solid var(--ink-2);border-radius:999px;padding:2px 8px;color:var(--ink-2)}
.choix-compteur.complet{border-color:var(--ok);color:var(--ok)}
.choix-poses{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:10px}
.choix-pose{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1.5px solid var(--line);border-radius:12px;padding:8px 6px;cursor:pointer;background:var(--surface)}
.choix-pose input{position:absolute;top:8px;left:8px;width:18px;height:18px;margin:0}
.choix-pose img{width:72px;height:72px;object-fit:contain}
.choix-pose-nom{font-size:.86rem;font-weight:600;line-height:1.2}
.choix-pose small{font-size:.72rem;color:var(--ink-2)}
.choix-pose:has(input:checked){border-color:var(--ink);background:var(--surface-2);box-shadow:3px 3px 0 var(--accent)}
.choix-pose:has(input:disabled:not(:checked)){opacity:.45;cursor:not-allowed}
.choix-pose:has(input:focus-visible){outline:3px solid var(--lav);outline-offset:2px}
.choix-deja{opacity:.4}
.choix-styles{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.choix-style{display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;min-width:180px}
.choix-style:has(input:checked){border-color:var(--ink);background:var(--surface-2);box-shadow:3px 3px 0 var(--accent)}
.choix-style-images{display:flex;gap:4px;flex-wrap:wrap}
.choix-envoi{position:sticky;bottom:12px;display:flex;justify-content:flex-end}

@media (max-width:640px){
  .mascotte-tete{grid-template-columns:96px minmax(0,1fr)}
  .mascotte-tete .ma-mascotte-tuile{width:96px}
  .mascotte-tete h2{font-size:1.6rem}
  .creations{grid-template-columns:1fr}
  .choix-poses{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}
.bq-profil{border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;margin:18px 0}
.bq-profil > legend{font-weight:700;padding:0 6px}
.bq-profil select{width:100%}
.mes-donnees{margin-top:30px;border-top:1.5px solid var(--line);padding-top:18px}
.mes-donnees form{margin:0}
.btn.bq-danger{border-color:#B3261E;color:#B3261E}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demande-compte{border:2px solid var(--ink);border-radius:18px;padding:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.demande-champs--compte{grid-template-columns:1fr 1fr}
.case-simple{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.case-simple input{margin-top:5px;width:18px;height:18px;flex:none}
@media (max-width:640px){.demande-champs--compte{grid-template-columns:1fr}}
.ma-demande-tuile{border:1.5px dashed var(--line)}
.demande-tete h2{font-family:var(--display);font-weight:400;font-size:2rem;margin:0}
.demande-tete .eyebrow{margin:0}
.apercu-images{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin:16px 0}
.apercu-images figure{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.apercu-fiche img{max-width:min(420px,100%);height:auto;border-radius:14px;border:1.5px solid var(--line)}
.apercu-fiche figcaption{font-size:.85rem;color:var(--ink-2)}
.apercu-emote > img{width:112px;height:112px;border-radius:12px;background:var(--surface-2)}
.demande-decision{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin:10px 0}
.demande-decision form{margin:0}
.laisser summary{list-style:none;cursor:pointer}
.laisser summary::-webkit-details-marker{display:none}
.laisser form{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface)}
.assistance-portes{display:flex;flex-direction:column;gap:10px}
.tickets-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tickets-liste li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border-bottom:1.5px dotted var(--line);padding-bottom:8px}
.tickets-liste a{font-weight:700}
.tickets-liste small{color:var(--ink-2)}
.fil-messages{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.message{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface);max-width:620px}
.message-equipe{border-color:var(--accent);background:var(--surface-2);margin-left:auto}
.message-tete{margin:0 0 4px;font-size:.9rem}
.message-tete small{color:var(--ink-2)}
.message-texte{margin:0}
.ticket-form{display:flex;flex-direction:column;gap:8px;max-width:620px}
.ticket-form label{font-weight:600}
.ticket-form textarea,.ticket-form select{font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:8px;background:var(--surface);color:var(--ink)}
.carte-commande{grid-column:1 / -1}
.carte-commande summary{list-style:none;cursor:pointer;display:inline-flex}
.carte-commande summary::-webkit-details-marker{display:none}
.carte-commande form{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);max-width:560px}
.carte-commande label{font-weight:600;font-size:.92rem}
.carte-commande select,.carte-commande textarea{font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:8px;background:var(--surface);color:var(--ink)}
.carte-type{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.carte-type legend{font-weight:600;font-size:.92rem;margin-bottom:4px}
.carte-action{grid-column:1 / -1;justify-self:start}
.carte-bientot .what{color:var(--ink-2)}
.sur-demande{display:flex;flex-direction:column;gap:16px;max-width:760px}
.sur-demande-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.sur-demande-liste li{border:1.5px solid var(--line);border-radius:14px;padding:12px;background:var(--surface)}
.sur-demande-liste .case-simple span{display:flex;flex-direction:column;gap:2px}
.sur-demande-liste small{color:var(--ink-2);font-size:.85rem}
.sur-demande-envoi{display:flex;flex-direction:column;gap:10px}
.sur-demande-envoi label{font-weight:600;display:block;margin-bottom:4px}
.sur-demande-envoi select,.sur-demande-envoi textarea{font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:8px;background:var(--surface);color:var(--ink);width:100%;max-width:520px}
.renoncer{display:flex;flex-direction:column;gap:12px;max-width:620px}
.renoncer fieldset{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.renoncer legend{font-weight:700;padding:0 6px}
.renoncer label{font-weight:600;display:block;margin-bottom:4px}
.renoncer .case-simple{font-weight:400;display:flex}
.renoncer input[type=text],.renoncer input[type=email],.renoncer textarea{font:inherit;width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px;background:var(--surface);color:var(--ink)}
.renoncer-lien{margin-top:16px}
.affil-code{margin:16px 0}
.affil-lien{font-family:var(--mono);font-size:.82rem;overflow-wrap:anywhere}
.affil-textes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.affil-textes li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.affil-textes p{margin:0;font-size:.92rem;overflow-wrap:anywhere}
.affil-virement{margin-top:14px}
.bq-ref{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin:0 auto;background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:16px;box-shadow:6px 6px 0 var(--accent);display:flex;flex-direction:column;gap:8px}
.bq-ref p{margin:0}
.bq-ref[hidden]{display:none}
.bq-paiement-plus{border-top:1.5px dotted var(--line);margin-top:10px;padding-top:10px}
.bq-credit{margin-bottom:18px}
.ticket-form input.input-text,.ticket-form input[type=text],.ticket-form input[type=email]{font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:10px;background:var(--surface);color:var(--ink);width:100%}
.ticket-form .btn{align-self:flex-start}
.club-avantages,.etapes-affil{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.club-avantages li,.etapes-affil li{border:2px solid var(--ink);border-radius:18px;padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:6px;box-shadow:4px 4px 0 var(--lav)}
.club-avantages b,.etapes-affil b{font-family:var(--display);font-weight:400;font-size:1.25rem}
.club-avantages span,.etapes-affil span{color:var(--ink-2);font-size:.95rem}
.etapes-affil{counter-reset:etape}
.etapes-affil li::before{counter-increment:etape;content:counter(etape);font-family:var(--display);font-size:1.6rem;color:var(--accent-ink)}
.club-abonner{margin-top:24px}
.club-gestes{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.club-gestes form{margin:0}
.club-pause{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.club-pause select{font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:8px;background:var(--surface);color:var(--ink)}
.club-gestes form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.woocommerce .panel .club-pause label{margin:0;font-weight:600}
.woocommerce .panel .club-pause select{width:auto;min-width:0}
.deux-blocs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bloc-court{border:2px solid var(--ink);border-radius:22px;padding:22px;background:var(--surface);display:flex;flex-direction:column;gap:10px;align-items:flex-start;box-shadow:6px 6px 0 var(--lav)}
.bloc-court h2{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0}
.bloc-court p{margin:0;color:var(--ink-2)}
.bloc-court .eyebrow{color:var(--accent-ink)}
@media (max-width:760px){.deux-blocs{grid-template-columns:1fr}}

/* Accueil : le Club en appel à l'action (27/09), l'affiliation en bandeau */
.club-une{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--surface-2);border:2px solid var(--ink);border-radius:26px;padding:30px;box-shadow:8px 8px 0 var(--accent)}
.club-une-texte{display:flex;flex-direction:column;gap:12px}
.club-une h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.08;margin:0}
.club-une-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.club-une-liste li{position:relative;padding-left:30px;color:var(--ink-2)}
.club-une-liste li b{color:var(--ink)}
.club-une-liste li::before{content:"✓";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:1.5px solid var(--ink);font-weight:700;font-size:.75rem;display:flex;align-items:center;justify-content:center}
.club-une-saison{margin:0;border-left:4px solid var(--lav);padding:4px 0 4px 12px;font-size:.95rem}
.club-une-action{background:var(--surface);border:2px solid var(--ink);border-radius:20px;padding:22px;display:flex;flex-direction:column;align-items:stretch;gap:14px;text-align:center}
.club-une-prix{margin:0;display:flex;flex-direction:column;align-items:center;line-height:1}
.club-une-prix b{font-family:var(--display);font-weight:400;font-size:3.4rem;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.club-une-prix span{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.club-une-action .fine{margin:0;font-size:.85rem;color:var(--ink-2)}
.bandeau-affil{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border:2px dashed var(--line);border-radius:22px;padding:20px 24px}
.bandeau-affil > div{display:flex;flex-direction:column;gap:4px;flex:1 1 320px}
.bandeau-affil h2{font-family:var(--display);font-weight:400;font-size:1.45rem;margin:0}
.bandeau-affil p{margin:0;color:var(--ink-2)}
@media (max-width:760px){.club-une{grid-template-columns:1fr;padding:20px;gap:20px}.bandeau-affil .btn{width:100%}}

/* Composeur : l'émote sur ton idée (hors catalogue) */
.idee-composeur{margin-top:18px;border:2px dashed var(--lav);border-radius:18px;background:var(--surface)}
.idee-composeur[open]{border-style:solid;border-color:var(--ink)}
.idee-composeur > summary{cursor:pointer;list-style:none;padding:14px 16px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.idee-composeur > summary::-webkit-details-marker{display:none}
.idee-composeur > summary::before{content:"+";font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--accent-ink)}
.idee-composeur[open] > summary::before{content:"–"}
.idee-composeur > summary span{color:var(--ink-2);font-size:.95rem}
.idee-corps{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.idee-corps textarea{width:100%}

/* Galerie rangée par thème (27/09) */
.groupe-theme{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.groupe-theme:first-of-type{margin-top:8px}
.theme-titre{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.theme-titre .mini{font-family:var(--body);font-size:.85rem}

.idee-corps textarea{font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:8px;background:var(--surface);color:var(--ink)}
.carte-commande input[type="email"]{font:inherit;border:1.5px solid var(--line);border-radius:10px;padding:10px;background:var(--surface);color:var(--ink);width:100%}
.par-animal{margin-top:28px}
.par-animal summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.par-animal p{margin-top:8px}

/* ===========================================================
   Cotty, l'hôtesse de Mascottery (30/09/2026)
   La loutre de la marque, PAS à adopter : jamais à côté d'un prix ni d'un bouton d'achat. Petite, sur le côté.
   Fichiers sans fond : ni cadre, ni ombre. Le conteneur porte la largeur, l'image le remplit
   (ses attributs width et height ne donnent que les proportions, pour que la page ne saute pas).
   =========================================================== */
.cotty{display:block;width:100%;height:auto}
.cotty-cote{width:200px;margin:0}

/* Un bloc de texte, et Cotty à sa droite. */
.avec-cotty{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}

/* En-tête de page avec Cotty (aperçu gratuit, aide) : une colonne à droite du titre et de l'introduction.
   Les lignes « auto auto 1fr » : si Cotty est plus haute que le texte, c'est sous l'introduction que la place
   s'ajoute, pas entre le titre et l'introduction. */
.head--cotty{
  display:grid;grid-template-columns:minmax(0,64ch) auto;grid-template-rows:auto auto 1fr;
  column-gap:40px;max-width:none;justify-content:start;align-items:start
}
.head--cotty > .cotty-cote{grid-column:2;grid-row:1 / span 3;align-self:center}

/* Accueil : Cotty dépasse de derrière le faux chat et fait coucou (le bas de l'image passe sous le chat). */
.hero-scene{display:flex;flex-direction:column;min-width:0}
.hero-cotty{width:150px;align-self:flex-end;margin:0 26px -30px 0;position:relative;z-index:0}
.hero-scene .chat{position:relative;z-index:1}

/* Page introuvable : Cotty perdue, avec sa bulle. */
.introuvable-texte{display:flex;flex-direction:column;gap:24px}
/* Le dessin a de la marge au-dessus de la tête : l'image remonte sous la bulle, dont la pointe vise la casquette. */
.cotty-perdue{width:250px;display:flex;flex-direction:column;align-items:flex-start}
.cotty-perdue .cotty{margin-top:-26px}
.bulle{
  position:relative;z-index:1;margin:0;max-width:22ch;padding:10px 14px;text-align:center;text-wrap:balance;
  background:var(--surface);color:var(--ink);border:2px solid var(--ink);border-radius:18px;font-weight:600;font-size:.95rem
}
.bulle::after{
  content:"";position:absolute;left:52px;bottom:-9px;width:14px;height:14px;background:var(--surface);
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)
}

/* Panier vide : le message à gauche, Cotty et son panier retourné à droite. Le bas du dessin est coupé net :
   il se pose sur le bord bas de la carte (la marge négative annule le rembourrage). */
.vide-texte{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.vide-panier .cotty-cote{width:170px;align-self:end;margin-bottom:-24px}

/* Comment c'est fait : trois temps, une image de Cotty chacun. */
.trois-temps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.trois-temps li{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:12px}
.trois-temps-cotty{width:150px;align-self:center}
.trois-temps-texte{display:flex;flex-direction:column;gap:8px}
.trois-temps h3{font-size:1.2rem}
.trois-temps-texte p:not(.eyebrow){color:var(--ink-2);font-size:.97rem}

/* Aperçu gratuit : Cotty jongle pendant l'envoi du formulaire (assets/js/apercu.js). */
.envoi-attente{flex:1 1 100%;display:flex;align-items:center;gap:16px}
.envoi-attente-cotty{width:96px;flex:0 0 auto}
.envoi-attente p{margin:0;font-weight:600;max-width:42ch}
.demande button[type="submit"]:disabled{opacity:.6;cursor:progress;transform:none}

@media (max-width:900px){
  .hero-cotty{width:124px;margin:0 22px -24px 0}
  .trois-temps{grid-template-columns:1fr}
  .trois-temps li{flex-direction:row;align-items:center;gap:16px}
  .trois-temps-cotty{width:110px;flex:0 0 auto;align-self:center}
}
@media (max-width:640px){
  /* Sur téléphone, Cotty passe sous le texte et rapetisse : le titre et les boutons restent dans le premier écran. */
  .avec-cotty{grid-template-columns:1fr;gap:16px}
  .cotty-cote{width:150px}
  .cotty-perdue{width:210px}
  /* Panier vide : la page n'a que ce message, Cotty peut passer au-dessus, en petit. */
  .vide-panier .cotty-cote{order:-1;width:112px;align-self:start;margin-bottom:0}
  /* En-tête : Cotty reste à côté du surtitre et du titre ; l'introduction reprend toute la largeur dessous. */
  .head--cotty{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:12px}
  .head--cotty > .cotty-cote{grid-row:1 / span 2;align-self:end;width:104px}
  .head--cotty > p:not(.eyebrow){grid-column:1 / -1}
  .trois-temps-cotty{width:84px;align-self:flex-start}
  .envoi-attente-cotty{width:80px}
}

/* =========================================================================
   Deux langues et fiches d'aide (07/10/2026)
   ========================================================================= */
.bascule-langue{display:inline-flex;align-items:center;gap:2px;font-size:.82rem;font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:2px}
.bascule-langue a,.bascule-langue b{display:inline-block;min-width:30px;padding:4px 7px;border-radius:999px;text-align:center;text-decoration:none;color:inherit;line-height:1.2}
.bascule-langue b{background:var(--ink);color:var(--bg)}
.bascule-langue a:hover,.bascule-langue a:focus-visible{background:var(--line)}
.aide-fiches{margin-bottom:28px}
.aide-rubrique{margin:22px 0 6px;font-size:1.05rem}
.aide-fiche[open]{padding-bottom:6px}
.aide-fiche[open] summary{border-bottom:1.5px solid var(--line);margin-bottom:12px}
.aide-fiche{border:1.5px solid var(--line);border-radius:14px;background:var(--surface);margin:10px 0;padding:0 14px}
.aide-fiche summary{cursor:pointer;padding:12px 0;display:flex;flex-direction:column;gap:2px}
.aide-fiche summary small{color:var(--ink-2);font-weight:400}
.aide-fiche video,.aide-fiche img{display:block;max-width:100%;height:auto;border-radius:10px;margin:10px 0}
.aide-etapes{padding-left:22px;margin:8px 0 16px}
.aide-etapes li{margin:8px 0}
.note-traduction{border:1.5px solid var(--line);border-left:5px solid var(--accent);border-radius:10px;background:var(--surface-2);padding:10px 14px;font-size:.95rem}