/* ─────────────────────────────────────────────────────────────────────────
   La boutique — feuille commune aux trois pages
   ─────────────────────────────────────────────────────────────────────────
   ⚠️ LES JETONS SONT COPIÉS DE `index.html`, PAS RÉINVENTÉS. La page d'accueil
   les porte en ligne (elle n'a aucune feuille externe, c'est ce qui lui donne
   son premier rendu sans aller-retour). Les recopier ici est la seule façon de
   garder les deux accordées sans imposer un second fichier à la page
   d'accueil. Toute retouche de couleur se fait DES DEUX CÔTÉS.

   ⚠️ TROIS ÉTATS DE THÈME, PAS DEUX : le système par défaut, et un choix
   explicite qui le supplante DANS LES DEUX SENS. La garde
   `:not([data-theme="light"])` est ce qui permet au bouton de servir plus
   d'une fois quand le système est en sombre. */

:root {
  --ink:#16181D; --dim:#4E5361; --accent:#5750BE; --line:rgba(87,80,190,.16);
  --bg:#F6F5FD; --ok:#0F7B5A; --err:#C62828;
  --verre:rgba(255,255,255,.62);
  --verre-fort:rgba(255,255,255,.78);
  --bord-verre:rgba(255,255,255,.85);
  --ombre:0 18px 50px -18px rgba(50,38,120,.34);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#ECEAF6; --dim:#A5A5B8; --accent:#9A8FEA; --line:rgba(154,143,234,.22);
    --bg:#0E0E14; --ok:#5FD3A8; --err:#FF8A8A;
    --verre:rgba(30,30,42,.58);
    --verre-fort:rgba(34,34,48,.76);
    --bord-verre:rgba(255,255,255,.10);
    --ombre:0 18px 50px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --ink:#ECEAF6; --dim:#A5A5B8; --accent:#9A8FEA; --line:rgba(154,143,234,.22);
  --bg:#0E0E14; --ok:#5FD3A8; --err:#FF8A8A;
  --verre:rgba(30,30,42,.58);
  --verre-fort:rgba(34,34,48,.76);
  --bord-verre:rgba(255,255,255,.10);
  --ombre:0 18px 50px -18px rgba(0,0,0,.7);
}

* { box-sizing:border-box; }
body {
  margin:0; padding:16px 20px 64px;
  background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.page { max-width:1000px; margin:0 auto; }
p { margin:0; color:var(--dim); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── L'entête, reprise de l'accueil ─────────────────────────────────────── */
/* ⚠️ LA BARRE SE REPLIE SOUS 480 PX. Le mot de la marque est en anglaise, large
   et incompressible ; à côté de deux pastilles il passait DESSOUS, tronqué, sans
   qu'aucun débordement horizontal ne le signale — les enfants d'un flex se
   compriment en silence. Les commandes descendent donc sur leur propre ligne. */
.barre { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media (max-width:479px) { .reglages { width:100%; justify-content:flex-end; } }
.marque-bloc { display:flex; align-items:center; gap:8px; min-width:0; }
svg.marque { height:.912em; width:1.141em; font-size:34px; flex:none; }
.mot {
  margin:0; font-size:34px; line-height:.86; padding-bottom:.1em;
  font-family:'Snell Roundhand','Pinyon Script','Apple Chancery',cursive;
  font-weight:700; letter-spacing:.01em; color:#8B7CFF;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .mot {
    background-image:linear-gradient(100deg,#8B7CFF 0%,#8B7CFF 42%,#B076EC 68%,#C673DA 86%,#DE71C6 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.reglages { display:flex; align-items:center; gap:8px; flex:none; }
/* ⚠️ MÊME PASTILLE QUE LE BOUTON DE THÈME, comme sur l'accueil : un lien nu à
   côté d'une pastille de verre se lit comme un oubli de mise en page. Il garde
   la couleur du texte et non celle de l'accent — c'est une porte, pas l'action
   de la page.
   ⚠️ ET `font:` EN PROPRIÉTÉS SÉPARÉES. Le raccourci avec `inherit` est
   invalide et le navigateur jette toute la déclaration sans rien dire : c'est
   ce qui rendait les commandes de l'accueil en Arial 13,33 px pendant des
   semaines. */
.lien-boutique {
  display:inline-flex; align-items:center; padding:0 14px; height:38px;
  border-radius:999px; border:1px solid var(--bord-verre); background:var(--verre);
  color:var(--ink); letter-spacing:.04em; flex:none;
  font-family:inherit; font-weight:600; font-size:12.5px; line-height:1;
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
}
.lien-boutique:hover { text-decoration:none; opacity:.85; }
/* La page où l'on est déjà : le lien reste, mais il cesse d'inviter. */
.lien-boutique[aria-current="page"] {
  background:var(--accent); border-color:transparent; color:#fff;
}
.theme {
  width:38px; height:38px; border-radius:999px; cursor:pointer; line-height:1;
  border:1px solid var(--bord-verre); background:var(--verre); color:var(--ink);
  font-size:15px; flex:none;
}

/* ── Le verre ───────────────────────────────────────────────────────────── */
.verre {
  background:var(--verre); border:1px solid var(--bord-verre);
  box-shadow:var(--ombre); border-radius:20px;
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
  .verre, .theme { background:var(--verre-fort); }
  :root { --verre-fort:#FFFFFF; }
  :root[data-theme="dark"], :root:not([data-theme="light"]) { --verre-fort:#1B1B22; }
}

h1 { margin:0 0 6px; font-size:clamp(24px,3.4vw,32px); line-height:1.2; letter-spacing:-.015em; }
h2 { margin:0 0 10px; font-size:19px; letter-spacing:-.01em; }
.entete { margin:26px 0 22px; }
.entete .sous { font-size:15px; }

/* ── La grille de produits ──────────────────────────────────────────────── */
.produits { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.produit { padding:0; overflow:hidden; display:flex; flex-direction:column; text-align:left; }
/* ⚠️ `aspect-ratio` FIGE LA PLACE AVANT LE CHARGEMENT. Sans lui, la grille
   s'effondre puis se déplie image par image, et la page saute sous le doigt de
   quelqu'un qui a déjà commencé à faire défiler. */
.produit .vignette {
  aspect-ratio:1/1; width:100%; object-fit:cover; display:block;
  background:var(--line); border-bottom:1px solid var(--bord-verre);
}
.produit .corps { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.produit h3 { margin:0; font-size:15.5px; line-height:1.35; }
.produit .prix { font-weight:700; font-size:16px; color:var(--ink); }
.produit .marque-type {
  align-self:flex-start; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:2px 9px;
}
.produit .epuise { color:var(--err); font-size:13px; }
/* Discret : on ne signale pas souvent, et une action de modération qui pèse
   autant que « Commander » déséquilibre la fiche. Visible quand on la cherche. */
.produit .signaler {
  align-self:flex-start; margin-bottom:8px; padding:0; border:0; background:none;
  color:var(--dim); font-family:inherit; font-size:12px; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.produit .signaler:hover { color:var(--err); }
.produit .signaler[disabled] { cursor:default; text-decoration:none; opacity:.7; }

/* ── Boutons et champs ──────────────────────────────────────────────────── */
.bouton {
  display:inline-block; width:100%; padding:13px 18px; border:0; border-radius:999px;
  cursor:pointer; color:#fff; text-align:center;
  /* ⚠️ En propriétés SÉPARÉES : `font: … inherit` en raccourci est invalide
     et le navigateur jette toute la déclaration, sans rien dire. */
  font-family:inherit; font-weight:600; font-size:15px; line-height:1.2;
  background:linear-gradient(100deg,#6F63D8,#B07BE8);
  box-shadow:0 10px 26px -10px rgba(87,80,190,.8);
}
.bouton[disabled] { opacity:.55; cursor:default; box-shadow:none; }
.bouton.discret {
  background:transparent; color:var(--accent);
  border:1px solid var(--line); box-shadow:none;
}
label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px; }
input, textarea, select {
  width:100%; padding:12px 14px; font-size:16px; font-family:inherit;
  color:var(--ink); background:var(--verre-fort);
  border:1px solid var(--line); border-radius:12px;
}
input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(87,80,190,.18);
}
.champ { margin-bottom:14px; }
.aide { font-size:12.5px; color:var(--dim); margin-top:5px; }
.err { color:var(--err); font-size:14px; }
.ok  { color:var(--ok);  font-size:14px; }

/* ── Panneaux ───────────────────────────────────────────────────────────── */
.panneau { padding:22px 24px; margin-bottom:18px; }
.rang { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.rang:last-child { border-bottom:0; }
.mini { font-size:13px; color:var(--dim); }

/* ⚠️ UN TABLEAU DÉBORDE DANS SON PROPRE CADRE, JAMAIS DANS LA PAGE. Sans ce
   conteneur, une commande à long libellé fait glisser tout le corps de la page
   latéralement — et sur un téléphone on ne comprend pas pourquoi. */
.deborde { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.deux { display:grid; gap:18px; }
@media (min-width:820px) { .deux { grid-template-columns:1.4fr 1fr; align-items:start; } }

nav.bas { margin-top:38px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center; font-size:14px; }
footer { margin-top:16px; font-size:13px; color:var(--dim); text-align:center; }

/* ── Les guides ──────────────────────────────────────────────────────────── */
/* ⚠️ LA LARGEUR DE LECTURE N'EST PAS CELLE DU CATALOGUE. La grille des produits
   vit bien sur mille pixels ; un paragraphe non. Au-delà d'environ soixante-dix
   signes par ligne, l'œil rate le retour à la ligne suivante et relit la même —
   c'est la seule raison de cette classe, et elle ne sert qu'aux pages de texte. */
.page.lecture { max-width:760px; }

.guide { padding:24px 26px 26px; }
.guide > :first-child { margin-top:0; }
.guide h2 { margin:26px 0 8px; font-size:18px; }
.guide h3 { margin:18px 0 6px; font-size:15.5px; }
.guide p { margin:0 0 11px; }
.guide ul, .guide ol { margin:0 0 14px; padding-left:22px; color:var(--dim); }
.guide li { margin:5px 0; }
/* Les repères qui portent la phrase : ils reprennent la couleur du texte fort,
   sinon un « strong » gris dans un paragraphe gris ne souligne plus rien. */
.guide strong { color:var(--ink); font-weight:650; }
.guide em { font-style:italic; }
.guide .cadre {
  margin:0 0 14px; padding:12px 16px;
  border-left:2px solid var(--accent); border-radius:0 10px 10px 0;
  background:var(--verre-fort);
}
.guide .cadre p:last-child { margin-bottom:0; }

.apres { margin-top:20px; text-align:center; }
.apres .bouton { width:auto; display:inline-block; padding-left:26px; padding-right:26px; }
.apres .mini { margin-top:10px; }

.liste-guides { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.liste-guides article { padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.liste-guides h2 { margin:0; font-size:17.5px; }
.liste-guides h2 a { color:var(--ink); }
.liste-guides h2 a:hover { color:var(--accent); text-decoration:none; }