/* =========================================================================
   iClope — piste « Le Barbu » — socle et composants partagés
   Ordre : réglages, gabarit, typographie, logo, en-tête, navigation,
   bulles du Barbu, produits, formulaires, blocs, états, pied, surcouches.
   ========================================================================= */

/* ------------------------------------------------------------------ 1. Réglages */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font: var(--normal) var(--t-17)/var(--interligne-texte) var(--police);
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--canard-fonce); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--canard); }
:focus-visible {
  outline: 3px solid var(--canard-fonce);
  outline-offset: 2px;
  border-radius: var(--r-petit);
}
::selection { background: var(--canard-clair); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ 2. Gabarit */
.wrap { width: 100%; max-width: var(--conteneur); margin-inline: auto; padding-inline: var(--marge-mobile); }
.section { padding-block: var(--e6); }
.section--brume { background: var(--brume); }
.section--serre { padding-block: var(--e5); }
.lecture { max-width: var(--lecture); }
.pile > * + * { margin-top: var(--e3); }
.pile-l > * + * { margin-top: var(--e5); }
.rangee { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }

/* ------------------------------------------------------------------ 3. Typographie */
h1, .t1 { font-size: var(--t-30); font-weight: var(--gras); line-height: var(--interligne-titre); letter-spacing: -0.015em; }
h2, .t2 { font-size: var(--t-24); font-weight: var(--gras); line-height: 1.2; letter-spacing: -0.01em; }
h3, .t3 { font-size: var(--t-20); font-weight: var(--gras); line-height: 1.25; }
h4, .t4 { font-size: var(--t-17); font-weight: var(--moyen); line-height: 1.3; }
.chapeau { font-size: var(--t-17); color: var(--gris); max-width: var(--lecture); }
.meta { font-size: var(--t-13); color: var(--gris); }
.note { font-size: var(--t-15); color: var(--gris); }
.titre-bloc { font-size: var(--t-24); font-weight: var(--gras); color: var(--canard-fonce); letter-spacing: -0.01em; }
.texte p + p { margin-top: var(--e4); }
.texte h2 { margin-top: var(--e6); }
.texte h3 { margin-top: var(--e5); }
.texte h2 + p, .texte h3 + p { margin-top: var(--e3); }
.texte ul { margin-top: var(--e3); }
.texte li { position: relative; padding-left: var(--e5); margin-top: var(--e2); }
.texte li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--canard);
}
.texte ol { counter-reset: n; margin-top: var(--e3); }
.texte ol li { counter-increment: n; }
.texte ol li::before {
  content: counter(n); background: none; color: var(--canard-fonce);
  font-weight: var(--gras); font-size: var(--t-15); top: 0; left: 0; width: auto; height: auto;
}
.surligne { background: var(--framboise-clair); padding: 0 3px; border-radius: 3px; }

/* ------------------------------------------------------------------ 4. Logo */
.logo {
  display: inline-flex; align-items: baseline; gap: 0.03em;
  font-family: var(--police); font-weight: var(--gras); font-size: 22px; line-height: 1;
  letter-spacing: -0.02em; color: var(--encre); text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo__i {
  position: relative; display: inline-block; flex: none;
  width: 0.155em; height: 0.72em; background: currentColor; border-radius: 1px;
  margin-right: 0.10em; align-self: baseline;
}
.logo__i::before {
  content: ""; position: absolute; left: 50%; top: -0.33em; transform: translateX(-50%);
  width: 0.23em; height: 0.23em; border-radius: 50%; background: var(--canard);
}
.logo__o {
  position: relative; display: inline-block; flex: none;
  width: 1.34em; height: 1.34em; margin: 0 0.04em -0.10em;
  border-radius: 50%; background: var(--canard-clair); overflow: hidden;
  align-self: baseline; box-shadow: inset 0 0 0 1.5px rgba(42, 127, 122, 0.35);
}
.logo__o img { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.16); transform-origin: 50% 34%; }
.logo--clair { color: var(--blanc); }
.logo--grand { font-size: 38px; }
.logo__depuis { font-size: var(--t-13); font-weight: var(--normal); color: var(--gris); letter-spacing: 0; }
.logo-bloc { display: inline-flex; flex-direction: column; gap: 2px; }

/* ------------------------------------------------------------------ 5. En-tête */
.entete { position: sticky; top: 0; z-index: 40; background: var(--blanc); border-bottom: 1px solid var(--filet); }
.entete__barre { display: flex; align-items: center; gap: var(--e3); min-height: 60px; }
.entete__menu, .entete__acte {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 6px;
  background: none; border: 0; border-radius: var(--r); color: var(--encre);
  text-decoration: none; font-size: var(--t-13);
}
.entete__menu:hover, .entete__acte:hover { background: var(--brume); }
.entete__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.entete__acte-libelle { display: none; }
.entete__panier { position: relative; }
.entete__compteur {
  position: absolute; top: 4px; right: 0;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-rond);
  background: var(--roux-action); color: var(--blanc);
  font-size: 11px; font-weight: var(--gras); line-height: 18px; text-align: center;
}
.entete__recherche { padding-bottom: var(--e3); }
.entete__nav { display: none; }

/* bandeau nicotine — obligatoire, tenu comme une ligne de crédit, pas comme une alerte */
.bandeau-nicotine {
  background: var(--brume); border-bottom: 1px solid var(--filet);
  font-size: var(--t-13); color: var(--gris);
}
.bandeau-nicotine .wrap { display: flex; align-items: center; gap: var(--e2); padding-block: 7px; }
.bandeau-nicotine svg { flex: none; color: var(--roux-action); }
.bandeau-nicotine b { font-weight: var(--moyen); color: var(--encre); }

/* ------------------------------------------------------------------ 6. Recherche */
.recherche { position: relative; }
.recherche__champ { display: flex; align-items: center; gap: var(--e2);
  border: 1.5px solid var(--filet-fort); border-radius: var(--r); background: var(--blanc);
  padding-left: var(--e3); }
.recherche__champ:focus-within { border-color: var(--canard); box-shadow: 0 0 0 3px var(--canard-clair); }
.recherche__champ svg { flex: none; color: var(--gris); }
.recherche input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 11px 0; font-size: var(--t-17);
}
.recherche input:focus { outline: none; }
.recherche__envoi {
  border: 0; background: var(--canard); color: var(--blanc);
  min-height: 44px; padding: 0 var(--e4); border-radius: 0 6px 6px 0; font-size: var(--t-15); font-weight: var(--moyen);
}
.recherche__envoi:hover { background: var(--canard-fonce); }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r);
  box-shadow: var(--ombre-surgi); overflow: hidden; padding: var(--e2) 0;
}
.suggestions__titre { font-size: var(--t-13); color: var(--gris); padding: var(--e2) var(--e4) var(--e1); }
.suggestions a {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e4);
  text-decoration: none; color: var(--encre); min-height: 44px;
}
.suggestions a:hover, .suggestions a:focus-visible { background: var(--canard-brume); }
.suggestions img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.suggestions .meta { margin-left: auto; text-align: right; }
.suggestions mark { background: none; color: var(--canard-fonce); font-weight: var(--gras); }

/* ------------------------------------------------------------------ 7. Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: 10px var(--e5); border: 1.5px solid transparent; border-radius: var(--r);
  font-size: var(--t-17); font-weight: var(--moyen); line-height: 1.2; text-align: center;
  text-decoration: none; background: var(--brume); color: var(--encre);
  transition: background var(--duree-courte) var(--courbe);
}
.btn--achat { background: var(--roux-action); color: var(--blanc); font-weight: var(--gras); }
.btn--achat:hover { background: #9C4A1A; }
.btn--marque { background: var(--canard); color: var(--blanc); }
.btn--marque:hover { background: var(--canard-fonce); }
.btn--contour { background: var(--blanc); border-color: var(--canard); color: var(--canard-fonce); }
.btn--contour:hover { background: var(--canard-brume); }
.btn--discret { background: none; padding-inline: var(--e2); color: var(--canard-fonce); text-decoration: underline; }
.btn--discret:hover { background: var(--canard-brume); }
.btn--large { width: 100%; }
.btn--petit { min-height: 40px; font-size: var(--t-15); padding: 6px var(--e4); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--brume-fonce); color: var(--gris); cursor: not-allowed; }
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--r);
  background: var(--canard); color: var(--blanc);
  transition: background var(--duree-courte) var(--courbe);
}
.btn-icone:hover { background: var(--canard-fonce); }
.btn-icone--contour { background: var(--blanc); border: 1.5px solid var(--filet-fort); color: var(--encre); }
.btn-icone--contour:hover { background: var(--brume); }

/* ------------------------------------------------------------------ 8. Les bulles du Barbu */
.bulle { display: flex; align-items: flex-start; gap: var(--e3); margin-block: var(--e5); }
.bulle__medaillon {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: var(--canard-clair); object-fit: cover; object-position: 50% 30%;
}
.bulle__corps {
  position: relative; flex: 1; min-width: 0;
  background: var(--canard-clair); border-radius: var(--r-bulle);
  padding: var(--e3) var(--e4);
  font-size: var(--t-17); line-height: 1.5;
}
.bulle__corps::before {
  content: ""; position: absolute; left: -7px; top: 18px;
  width: 14px; height: 14px; background: var(--canard-clair);
  clip-path: polygon(100% 0, 100% 100%, 0 45%);
}
.bulle__corps p + p { margin-top: var(--e2); }
.bulle__signature {
  display: block; margin-top: var(--e2);
  font-size: var(--t-15); font-weight: var(--moyen); color: var(--canard-fonce);
}
.bulle--blanche .bulle__corps, .bulle--blanche .bulle__corps::before { background: var(--blanc); }
.bulle--blanche .bulle__corps { border: 1px solid var(--filet); }
.bulle--serree { margin-block: var(--e4); }
.bulle--serree .bulle__medaillon { width: 44px; height: 44px; }
.bulle--serree .bulle__corps { font-size: var(--t-15); }
.bulle--serree .bulle__corps::before { top: 14px; }
.bulle--anim { animation: bulle-apparait var(--duree) var(--courbe); }
@keyframes bulle-apparait { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bulle--anim { animation: none; } }

/* scène : le Barbu en pied, sur aplat */
.scene {
  display: flex; align-items: flex-end; gap: var(--e4);
  background: var(--canard-clair); border-radius: var(--r-bulle); padding: var(--e5) var(--e4) 0;
}
.scene__barbu { width: 120px; flex: none; align-self: flex-end; }
.scene__texte { flex: 1; min-width: 0; padding-bottom: var(--e5); }

/* ------------------------------------------------------------------ 9. Produits */
.grille { display: grid; gap: var(--e5) var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.carte { display: flex; flex-direction: column; min-width: 0; }
.carte__visuel {
  position: relative; display: block; background: var(--blanc);
  border: 1px solid var(--filet); border-radius: var(--r); padding: var(--e3); margin-bottom: var(--e3);
}
.carte__visuel img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.carte__marque { font-size: var(--t-13); color: var(--gris); }
.carte__nom { font-size: var(--t-15); font-weight: var(--moyen); line-height: 1.35; margin-top: 2px; }
.carte__nom a { color: var(--encre); text-decoration: none; }
.carte__nom a:hover { text-decoration: underline; }
.carte__variantes { font-size: var(--t-13); color: var(--gris); margin-top: 2px; }
.carte__dispo { font-size: var(--t-13); margin-top: var(--e2); color: var(--canard-fonce); }
.carte__dispo--rupture { color: var(--gris); }
.carte__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: auto; padding-top: var(--e3); }
.carte__prix { font-size: var(--t-17); font-weight: var(--gras); }
.carte__prix small { font-size: var(--t-13); font-weight: var(--normal); color: var(--gris); }
.carte__badges { position: absolute; top: var(--e2); left: var(--e2); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.carte--liste { flex-direction: row; gap: var(--e3); align-items: flex-start; }
.carte--liste .carte__visuel { width: 96px; flex: none; margin-bottom: 0; }
.carte--liste .carte__pied { padding-top: var(--e2); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-petit);
  font-size: var(--t-13); font-weight: var(--moyen); line-height: 1.5;
  background: var(--brume); color: var(--encre); border: 1px solid var(--filet);
}
.badge--nouveau { background: var(--framboise-texte); color: var(--blanc); border-color: transparent; }
.badge--dluo { background: var(--roux-clair); border-color: #F0CFB4; }
.badge--rupture { background: var(--brume-fonce); color: var(--gris); }
.badge--reassort { background: var(--canard-brume); border-color: #BEDDD9; }

/* prix */
.prix { font-size: var(--t-30); font-weight: var(--gras); letter-spacing: -0.02em; }
.prix__unite { font-size: var(--t-13); font-weight: var(--normal); color: var(--gris); }
.prix--barre { font-size: var(--t-17); font-weight: var(--normal); color: var(--gris); text-decoration: line-through; }

/* dispo */
.dispo { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-15); color: var(--canard-fonce); }
.dispo::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.52em; border-radius: 50%; background: var(--canard); }
.dispo--rupture { color: var(--gris); }
.dispo--rupture::before { background: var(--filet-fort); }

/* ------------------------------------------------------------------ 10. Choix de déclinaison */
.choix { display: flex; flex-wrap: wrap; gap: var(--e2); }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix__opt { display: inline-flex; }
.choix__pastille {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 60px; min-height: 48px; padding: 6px var(--e3);
  border: 1.5px solid var(--filet-fort); border-radius: var(--r); background: var(--blanc);
  font-size: var(--t-17); font-weight: var(--moyen); line-height: 1.2; text-align: center;
  transition: border-color var(--duree-courte) var(--courbe), background var(--duree-courte) var(--courbe);
}
.choix__pastille small { font-size: var(--t-13); font-weight: var(--normal); color: var(--gris); margin-top: 2px; }
.choix__opt:hover .choix__pastille { border-color: var(--canard); }
.choix input:checked + .choix__pastille {
  border-color: var(--canard); border-width: 2px; background: var(--canard-clair); color: var(--canard-fonce);
  padding: 5px calc(var(--e3) - 1px);
}
.choix input:checked + .choix__pastille small { color: var(--canard-fonce); }
.choix input:focus-visible + .choix__pastille { outline: 3px solid var(--canard-fonce); outline-offset: 2px; }
.choix input:disabled + .choix__pastille { color: var(--gris); background: var(--brume); border-style: dashed; }
.choix--couleur .choix__pastille { min-width: 44px; gap: 6px; }
.pastille-couleur { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(27,35,33,.18); }

/* quantité */
.qte { display: inline-flex; align-items: center; border: 1.5px solid var(--filet-fort); border-radius: var(--r); overflow: hidden; }
.qte button { width: 44px; height: 46px; border: 0; background: var(--blanc); font-size: var(--t-20); color: var(--encre); }
.qte button:hover { background: var(--brume); }
.qte input { width: 44px; height: 46px; border: 0; border-inline: 1px solid var(--filet); text-align: center; font-size: var(--t-17); font-weight: var(--moyen); }
.qte input:focus { outline: none; background: var(--canard-brume); }

/* lots */
.lots { display: grid; gap: var(--e2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lots .choix__pastille { width: 100%; min-height: 66px; }

/* ------------------------------------------------------------------ 11. Formulaires */
.champ { display: block; }
.champ__label { display: block; font-size: var(--t-15); font-weight: var(--moyen); margin-bottom: 6px; }
.champ__aide { font-size: var(--t-13); color: var(--gris); margin-top: 6px; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 10px var(--e3);
  border: 1.5px solid var(--filet-fort); border-radius: var(--r); background: var(--blanc);
  font-size: var(--t-17);
}
.champ textarea { min-height: 110px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--canard); box-shadow: 0 0 0 3px var(--canard-clair);
}
.champ--erreur input { border-color: var(--framboise-texte); }
.champ__erreur { font-size: var(--t-13); color: var(--framboise-texte); margin-top: 6px; font-weight: var(--moyen); }
.duo { display: grid; gap: var(--e4); }
.case { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e2) 0; font-size: var(--t-15); }
.case input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--canard); }

/* option de livraison / paiement */
.option { display: block; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__corps {
  display: flex; align-items: flex-start; gap: var(--e3);
  border: 1.5px solid var(--filet-fort); border-radius: var(--r); padding: var(--e3) var(--e4); background: var(--blanc);
}
.option:hover .option__corps { border-color: var(--canard); }
.option input:checked + .option__corps { border-color: var(--canard); border-width: 2px; background: var(--canard-brume); padding: 11px 15px; }
.option input:focus-visible + .option__corps { outline: 3px solid var(--canard-fonce); outline-offset: 2px; }
.option__marque { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--filet-fort); flex: none; margin-top: 3px; }
.option input:checked + .option__corps .option__marque { border-color: var(--canard); box-shadow: inset 0 0 0 4px var(--canard); }
.option__titre { font-weight: var(--moyen); }
.option__detail { font-size: var(--t-15); color: var(--gris); }
.option__prix { margin-left: auto; font-weight: var(--gras); white-space: nowrap; }

/* ------------------------------------------------------------------ 12. Blocs éditoriaux */
.encadre {
  border-left: 4px solid var(--canard); background: var(--canard-brume);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--e4);
}
.encadre h3 { font-size: var(--t-17); color: var(--canard-fonce); }
.encadre p + p { margin-top: var(--e2); }
.encadre--attention { border-left-color: var(--roux-action); background: var(--roux-clair); }
.encadre--attention h3 { color: #8F4116; }

.somm { background: var(--brume); border-radius: var(--r); padding: var(--e4); }
.somm h2 { font-size: var(--t-17); }
.somm ol { counter-reset: s; margin-top: var(--e3); }
.somm li { counter-increment: s; }
.somm a {
  display: flex; gap: var(--e3); align-items: baseline; padding: 9px 0;
  color: var(--encre); text-decoration: none; border-top: 1px solid var(--filet); font-size: var(--t-15);
}
.somm li:first-child a { border-top: 0; }
.somm a::before { content: counter(s); color: var(--canard-fonce); font-weight: var(--gras); font-size: var(--t-13); min-width: 14px; }
.somm a:hover { text-decoration: underline; }

.tableau-enveloppe { overflow-x: auto; margin-top: var(--e4); border: 1px solid var(--filet); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: var(--t-15); }
th, td { text-align: left; padding: var(--e3); border-bottom: 1px solid var(--filet); vertical-align: top; }
thead th { background: var(--brume); font-size: var(--t-13); font-weight: var(--gras); color: var(--encre); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--canard-brume); }

.faq details { border-top: 1px solid var(--filet); }
.faq details:last-child { border-bottom: 1px solid var(--filet); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--e4) 34px var(--e4) 0; position: relative;
  font-weight: var(--moyen); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--canard); border-bottom: 2px solid var(--canard);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--duree) var(--courbe);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > p { padding-bottom: var(--e4); color: var(--gris); }

/* avis */
.etoiles { display: inline-flex; gap: 2px; vertical-align: middle; }
.etoiles svg { width: 16px; height: 16px; color: var(--framboise); }
.etoiles svg.vide { color: var(--filet-fort); }
.avis { border-top: 1px solid var(--filet); padding-block: var(--e4); }
.avis__tete { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.avis__nom { font-weight: var(--moyen); font-size: var(--t-15); }
.note-globale { display: flex; align-items: center; gap: var(--e3); }
.note-globale strong { font-size: var(--t-30); font-weight: var(--gras); line-height: 1; }

/* stickers de réassurance */
.stickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.sticker { display: flex; align-items: center; gap: var(--e3); font-size: var(--t-15); }
.sticker__rond {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--canard-clair); color: var(--canard-fonce);
  display: flex; align-items: center; justify-content: center;
}
.sticker__rond--roux { background: var(--roux-clair); color: #8F4116; }
.sticker strong { display: block; font-weight: var(--moyen); }
.sticker span { display: block; font-size: var(--t-13); color: var(--gris); }

/* fil d'ariane */
.fil { font-size: var(--t-13); color: var(--gris); padding-block: var(--e3); }
.fil ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fil li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--filet-fort); }
.fil a { color: var(--gris); }
.fil [aria-current] { color: var(--encre); }

/* puces de filtre */
.puces { display: flex; flex-wrap: wrap; gap: var(--e2); }
.puce {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 4px var(--e3); border-radius: var(--r-rond); border: 1px solid var(--filet-fort);
  background: var(--blanc); font-size: var(--t-15); color: var(--encre); text-decoration: none;
}
.puce--active { background: var(--canard-clair); border-color: var(--canard); color: var(--canard-fonce); font-weight: var(--moyen); }
.puce--active button { border: 0; background: none; color: inherit; padding: 0; display: inline-flex; }
.puce:hover { border-color: var(--canard); }

/* ------------------------------------------------------------------ 13. Onglets */
.onglets { display: flex; gap: var(--e5); border-bottom: 1px solid var(--filet); overflow-x: auto; }
.onglets button {
  border: 0; background: none; padding: var(--e3) 0; min-height: 48px;
  font-size: var(--t-17); font-weight: var(--moyen); color: var(--gris);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--roux); }
.onglet-panneau { padding-top: var(--e4); }
.onglet-panneau[hidden] { display: none; }

/* ------------------------------------------------------------------ 14. États */
.etat {
  text-align: left; padding: var(--e6) var(--e4);
  background: var(--brume); border-radius: var(--r-bulle);
}
.etat--motif {
  background-color: var(--brume);
  /* url() est résolue depuis base.css, donc sans « ../ » */
  background-image: url("gen/bulles-motif.png"), url("illus/bulles-motif.svg");
  background-repeat: no-repeat, repeat;
  background-size: cover, 320px auto;
  background-position: center, 0 0;
}
.etat h2 { margin-bottom: var(--e2); }
.squelette { background: var(--brume-fonce); border-radius: var(--r-petit); }
.squelette--ligne { height: 12px; margin-top: var(--e2); }
.squelette--image { aspect-ratio: 1 / 1; border-radius: var(--r); }
.chargement { display: inline-flex; align-items: center; gap: var(--e2); color: var(--gris); font-size: var(--t-15); }
.chargement::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--filet-fort); border-top-color: var(--canard); animation: tourne 800ms linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chargement::before { animation: none; } }
.alerte {
  display: flex; gap: var(--e3); align-items: flex-start;
  border: 1.5px solid #F0CFB4; background: var(--roux-clair); border-radius: var(--r); padding: var(--e3) var(--e4);
  font-size: var(--t-15);
}
.alerte svg { flex: none; color: #8F4116; margin-top: 2px; }

/* ------------------------------------------------------------------ 15. Tiroir */
.voile {
  position: fixed; inset: 0; z-index: 60; background: rgba(27, 35, 33, 0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--duree) var(--courbe);
}
.voile[data-ouvert] { opacity: 1; pointer-events: auto; }
.tiroir {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(340px, 88vw);
  background: var(--blanc); display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform var(--duree) var(--courbe);
  box-shadow: var(--ombre-surgi);
}
.tiroir--droite { left: auto; right: 0; transform: translateX(100%); width: min(380px, 92vw); }
.tiroir[data-ouvert] { transform: none; }
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--filet); min-height: 60px; }
.tiroir__corps { flex: 1; overflow-y: auto; padding: var(--e4); }
.tiroir__pied { border-top: 1px solid var(--filet); padding: var(--e3) var(--e4); display: flex; gap: var(--e3); }
.tiroir__pied .btn { flex: 1; }
.tiroir__lien { display: block; padding: var(--e3) 0; border-bottom: 1px solid var(--filet);
  color: var(--encre); text-decoration: none; font-size: var(--t-17); min-height: 48px; }
.tiroir__lien:hover { color: var(--canard-fonce); }

/* ------------------------------------------------------------------ 16. Barre d'achat fixe (mobile) */
.barre-achat {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--blanc); border-top: 1px solid var(--filet);
  padding: var(--e2) var(--marge-mobile) calc(var(--e2) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--e3);
  box-shadow: 0 -2px 10px rgba(27, 35, 33, 0.06);
}
.barre-achat__prix { line-height: 1.15; }
.barre-achat__prix strong { display: block; font-size: var(--t-20); font-weight: var(--gras); }
.barre-achat__prix span { font-size: var(--t-13); color: var(--gris); }
.barre-achat .btn { flex: 1; }
.avec-barre { padding-bottom: calc(var(--barre-achat) + var(--e5)); }

/* ------------------------------------------------------------------ 17. Toast */
.toast {
  position: fixed; left: var(--marge-mobile); right: var(--marge-mobile);
  bottom: calc(var(--barre-achat) + var(--e3)); z-index: 70;
  background: var(--blanc); border: 1px solid var(--filet); border-left: 4px solid var(--canard);
  border-radius: var(--r); box-shadow: var(--ombre-surgi); padding: var(--e3) var(--e4);
  display: flex; align-items: center; gap: var(--e3);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.toast[data-ouvert] { opacity: 1; transform: none; pointer-events: auto; }
.toast__texte { flex: 1; min-width: 0; font-size: var(--t-15); }
.toast__texte strong { display: block; font-weight: var(--moyen); }

/* ------------------------------------------------------------------ 18. Age gate */
.age-gate {
  position: fixed; inset: 0; z-index: 90; background: rgba(27, 35, 33, 0.55);
  display: flex; align-items: flex-end; justify-content: center; padding: var(--e4);
  opacity: 0; pointer-events: none; transition: opacity var(--duree) var(--courbe);
}
.age-gate[data-ouvert] { opacity: 1; pointer-events: auto; }
.age-gate__carte {
  background: var(--blanc); border-radius: var(--r-bulle); width: 100%; max-width: 460px;
  padding: 0 var(--e5) var(--e5); box-shadow: var(--ombre-surgi);
}
.age-gate__scene { display: flex; align-items: flex-end; gap: var(--e3); margin-top: calc(var(--e6) * -1); }
.age-gate__barbu { width: 108px; flex: none; }
.age-gate__bulle {
  position: relative; background: var(--canard-clair); border-radius: var(--r-bulle);
  padding: var(--e3) var(--e4); margin-bottom: var(--e5); font-size: var(--t-17);
}
.age-gate__bulle::before {
  content: ""; position: absolute; left: -7px; bottom: 16px;
  width: 14px; height: 14px; background: var(--canard-clair);
  clip-path: polygon(100% 0, 100% 100%, 0 55%);
}
.age-gate__actions { display: grid; gap: var(--e3); grid-template-columns: 1fr; margin-top: var(--e4); }

/* ------------------------------------------------------------------ 19. Cookies */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--blanc); border-top: 1px solid var(--filet);
  box-shadow: 0 -2px 10px rgba(27, 35, 33, 0.08);
  padding: var(--e3) var(--marge-mobile) calc(var(--e3) + env(safe-area-inset-bottom));
}
.cookies[hidden] { display: none; }
.cookies__corps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); max-width: var(--conteneur); margin-inline: auto; }
.cookies p { font-size: var(--t-15); flex: 1 1 260px; min-width: 0; }
.cookies__actions { display: flex; gap: var(--e2); flex: 0 0 auto; }
.cookies__actions .btn { flex: 1; min-height: 44px; font-size: var(--t-15); padding-inline: var(--e4); }

/* ------------------------------------------------------------------ 20. Tunnel */
.progression { display: flex; gap: var(--e2); counter-reset: p; margin-block: var(--e4); }
.progression li {
  counter-increment: p; flex: 1; min-width: 0; padding-top: var(--e2);
  border-top: 3px solid var(--filet); font-size: var(--t-13); color: var(--gris);
}
.progression li::before { content: counter(p) ". "; font-weight: var(--gras); }
.progression li[aria-current] { border-top-color: var(--roux); color: var(--encre); font-weight: var(--moyen); }
.progression li[data-fait] { border-top-color: var(--canard); color: var(--canard-fonce); }
.etape { border-top: 1px solid var(--filet); padding-top: var(--e5); margin-top: var(--e5); }
.etape:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.etape__titre { display: flex; align-items: baseline; gap: var(--e3); }
.etape__num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--canard-clair);
  color: var(--canard-fonce); font-size: var(--t-15); font-weight: var(--gras);
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
}

/* récap panier */
.ligne-panier { display: flex; gap: var(--e3); padding-block: var(--e4); border-bottom: 1px solid var(--filet); }
.ligne-panier__visuel { width: 76px; flex: none; border: 1px solid var(--filet); border-radius: var(--r); padding: 6px; background: var(--blanc); }
.ligne-panier__corps { flex: 1; min-width: 0; }
.ligne-panier__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e3); flex-wrap: wrap; }
.total { border-top: 2px solid var(--encre); margin-top: var(--e4); padding-top: var(--e3); }
.total dl { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e4); font-size: var(--t-15); }
.total dt { color: var(--gris); }
.total dd { text-align: right; font-weight: var(--moyen); }
.total .total__final { font-size: var(--t-20); font-weight: var(--gras); }

/* ------------------------------------------------------------------ 21. Pied de page */
.pied { background: var(--encre); color: #C9D2D0; margin-top: var(--e7); }
.pied a { color: #C9D2D0; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied__haut { padding-block: var(--e6); border-bottom: 1px solid #33403D; }
.pied__colonnes { display: grid; gap: var(--e5); grid-template-columns: 1fr; padding-block: var(--e6); }
.pied h3 { font-size: var(--t-15); color: var(--blanc); font-weight: var(--gras); margin-bottom: var(--e3); }
.pied li { padding-block: 5px; font-size: var(--t-15); }
.pied__bas { border-top: 1px solid #33403D; padding-block: var(--e4); font-size: var(--t-13); }
.pied__mention {
  display: flex; gap: var(--e3); align-items: flex-start;
  background: #26302E; border-radius: var(--r); padding: var(--e3) var(--e4); margin-bottom: var(--e4);
  font-size: var(--t-13); color: var(--blanc);
}
.pied__mention svg { flex: none; color: #F0A472; margin-top: 2px; }
.pied .sticker__rond { background: #26302E; color: #8FD3CD; }
.pied .sticker span { color: #9AA7A4; }
.pied__barbu { display: flex; align-items: flex-end; gap: var(--e3); }
.pied__barbu img { width: 72px; flex: none; }
.pied__barbu p { font-size: var(--t-15); }
.infolettre input {
  width: 100%; min-height: 48px; padding: 10px var(--e3); border-radius: var(--r);
  border: 1.5px solid #4A5754; background: #26302E; color: var(--blanc); font-size: var(--t-17);
}
.infolettre input::placeholder { color: #8E9B98; }
.infolettre input:focus { outline: none; border-color: #8FD3CD; }

/* ------------------------------------------------------------------ 22. Desktop */
@media (min-width: 900px) {
  .wrap { padding-inline: var(--e5); }
  h1, .t1 { font-size: var(--t-38); }
  h2, .t2 { font-size: var(--t-30); }
  .titre-bloc { font-size: var(--t-30); }
  .section { padding-block: var(--e7); }
  .chapeau { font-size: var(--t-20); }

  .logo { font-size: 28px; }
  .entete__barre { min-height: 76px; gap: var(--e5); }
  .entete__menu { display: none; }
  .entete__acte-libelle { display: inline; }
  .entete__acte { flex-direction: column; gap: 2px; padding: 0 var(--e3); }
  .entete__barre .recherche { flex: 1; max-width: 520px; }
  .entete__recherche--mobile { display: none; }
  .entete__nav { display: block; border-top: 1px solid var(--filet); }
  .entete__nav ul { display: flex; gap: var(--e5); }
  .entete__nav > .wrap > ul > li > a {
    display: inline-flex; align-items: center; min-height: 48px;
    color: var(--encre); text-decoration: none; font-weight: var(--moyen); font-size: var(--t-15);
    border-bottom: 3px solid transparent;
  }
  .entete__nav > .wrap > ul > li:hover > a,
  .entete__nav > .wrap > ul > li:focus-within > a { border-bottom-color: var(--roux); color: var(--canard-fonce); }
  .mega {
    display: none; position: absolute; left: 0; right: 0; z-index: 39;
    background: var(--blanc); border-bottom: 1px solid var(--filet); box-shadow: var(--ombre-flottant);
    padding-block: var(--e5);
  }
  .entete__nav li:hover > .mega, .entete__nav li:focus-within > .mega { display: block; }
  .mega__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); }
  .mega h3 { font-size: var(--t-13); color: var(--gris); font-weight: var(--moyen); margin-bottom: var(--e2); }
  .mega li a { display: block; padding: 5px 0; color: var(--encre); text-decoration: none; font-size: var(--t-15); }
  .mega li a:hover { color: var(--canard-fonce); text-decoration: underline; }

  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e6) var(--e5); }
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duo { grid-template-columns: 1fr 1fr; }
  .stickers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied__colonnes { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
  .barre-achat, .entete__recherche--mobile { display: none; }
  .avec-barre { padding-bottom: 0; }
  .toast { left: auto; right: var(--e5); bottom: var(--e5); width: 380px; }
  .age-gate { align-items: center; }
  .colonnes-fiche { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e7); align-items: start; }
  .colonnes-cat { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--e6); align-items: start; }
  .colonnes-guide { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--e7); align-items: start; }
  .colonnes-panier { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e6); align-items: start; }
  .colle { position: sticky; top: 120px; }
  .cache-desktop { display: none; }
  .lots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scene__barbu { width: 170px; }
}
@media (max-width: 899px) {
  .cache-mobile { display: none; }
  .mega { display: none; }
}

/* ------------------------------------------------------------------ 23. Compléments */
/* colonne de filtres (desktop) */
.filtres h3 { font-size: var(--t-15); margin-bottom: var(--e2); }
.filtres fieldset { border: 0; padding: 0; margin: 0 0 var(--e5); }
.filtres legend { font-size: var(--t-15); font-weight: var(--gras); padding: 0 0 var(--e2); }
.filtres .case { font-size: var(--t-15); padding: 6px 0; min-height: 40px; align-items: center; }
.filtres .case span { flex: 1; }
.filtres .case .meta { flex: none; }

/* liste de liens sobres (sous-catégories, gammes, guides voisins) */
.liens-plats { display: flex; flex-wrap: wrap; gap: var(--e2); }
.liens-plats a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px var(--e3);
  border: 1px solid var(--filet); border-radius: var(--r-rond);
  background: var(--blanc); color: var(--encre); text-decoration: none; font-size: var(--t-15);
}
.liens-plats a:hover { border-color: var(--canard); color: var(--canard-fonce); }

/* cartes de renvoi éditorial (guides voisins, niches) */
.renvoi {
  display: flex; gap: var(--e3); align-items: flex-start;
  border-top: 1px solid var(--filet); padding-block: var(--e4);
  color: var(--encre); text-decoration: none;
}
.renvoi:hover .renvoi__titre { text-decoration: underline; }
.renvoi__titre { font-weight: var(--moyen); }
.renvoi__num { font-size: var(--t-13); color: var(--canard-fonce); font-weight: var(--gras); min-width: 22px; }

/* tri */
.tri { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-15); }
.tri select { min-height: 44px; padding: 6px var(--e3); border: 1.5px solid var(--filet-fort); border-radius: var(--r); background: var(--blanc); }

/* sommaire de compte */
.menu-compte { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2); }
.menu-compte a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px var(--e4);
  border-radius: var(--r-rond); background: var(--brume); color: var(--encre);
  text-decoration: none; font-size: var(--t-15); white-space: nowrap;
}
.menu-compte a[aria-current] { background: var(--canard-clair); color: var(--canard-fonce); font-weight: var(--moyen); }

/* bloc commande (compte) */
.commande { border: 1px solid var(--filet); border-radius: var(--r); overflow: hidden; }
.commande__tete { background: var(--brume); padding: var(--e3) var(--e4); display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: space-between; }
.commande__corps { padding: var(--e4); }
.commande__articles { display: flex; gap: var(--e2); flex-wrap: wrap; }
.commande__vignette { width: 56px; height: 56px; border: 1px solid var(--filet); border-radius: var(--r-petit); padding: 4px; background: var(--blanc); }
.commande__vignette img { width: 100%; height: 100%; object-fit: contain; }

/* calculateur */
.resultat { background: var(--canard-clair); border-radius: var(--r-bulle); padding: var(--e5) var(--e4); }
.resultat dl { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e4); margin-top: var(--e3); }
.resultat dt { color: var(--canard-fonce); }
.resultat dd { text-align: right; font-weight: var(--gras); font-size: var(--t-20); }
.resultat dd small { font-size: var(--t-13); font-weight: var(--normal); color: var(--canard-fonce); }

/* planche d'identité (index.html) */
.nuancier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.nuance__aplat { height: 76px; border-radius: var(--r); border: 1px solid rgba(27,35,33,.10); }
.nuance code { font-size: var(--t-13); color: var(--gris); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.nuance strong { display: block; font-size: var(--t-15); margin-top: var(--e2); }
.nuance span { display: block; font-size: var(--t-13); color: var(--gris); }
.echelle li { display: flex; align-items: baseline; gap: var(--e4); border-top: 1px solid var(--filet); padding-block: var(--e3); }
.echelle code { font-size: var(--t-13); color: var(--gris); min-width: 92px; flex: none; }
.planche-liens { display: grid; grid-template-columns: 1fr; gap: 0; }
.planche-liens a {
  display: flex; align-items: baseline; gap: var(--e4); padding: var(--e3) 0;
  border-top: 1px solid var(--filet); color: var(--encre); text-decoration: none;
}
.planche-liens a:hover { color: var(--canard-fonce); }
.planche-liens a:hover strong { text-decoration: underline; }
.planche-liens code { font-size: var(--t-13); color: var(--gris); min-width: 30px; }
.planche-liens span { font-size: var(--t-15); color: var(--gris); }
.poses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.poses figure { text-align: center; }
.poses img { margin-inline: auto; max-height: 170px; width: auto; }
.poses figcaption { font-size: var(--t-13); color: var(--gris); margin-top: var(--e2); }
@media (min-width: 900px) {
  .nuancier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .poses { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .planche-liens { grid-template-columns: 1fr 1fr; column-gap: var(--e6); }
}

/* lien d'évitement */
.saut {
  position: absolute; left: var(--e4); top: -60px; z-index: 100;
  background: var(--blanc); color: var(--encre); border: 2px solid var(--canard-fonce);
  border-radius: var(--r); padding: 10px var(--e4); font-weight: var(--moyen);
  transition: top var(--duree) var(--courbe);
}
.saut:focus { top: var(--e2); }

/* ------------------------------------------------------------------ 24. Utilitaires d'espacement */
.mt-1 { margin-top: var(--e1); } .mt-2 { margin-top: var(--e2); } .mt-3 { margin-top: var(--e3); }
.mt-4 { margin-top: var(--e4); } .mt-5 { margin-top: var(--e5); } .mt-6 { margin-top: var(--e6); }
.mt-7 { margin-top: var(--e7); }
.mb-3 { margin-bottom: var(--e3); } .mb-4 { margin-bottom: var(--e4); } .mb-5 { margin-bottom: var(--e5); }

/* tuiles de renvoi (niches, familles) */
.tuile {
  display: flex; gap: var(--e3); align-items: flex-start;
  border-top: 3px solid var(--canard); padding-top: var(--e4);
  color: var(--encre); text-decoration: none;
}
.tuile:hover .tuile__titre { text-decoration: underline; }
.tuile__titre { font-weight: var(--moyen); display: block; }
.tuile .note { display: block; margin-top: 2px; }
.grille--empile { grid-template-columns: 1fr; }

/* scène : empilée sur mobile, côte à côte sur grand écran */
.scene { flex-direction: column; align-items: stretch; padding: var(--e5) var(--e4) 0; }
.scene__barbu { width: 120px; align-self: flex-end; margin-top: calc(var(--e5) * -1); }
.scene__texte { padding-bottom: 0; order: -1; }
@media (min-width: 900px) {
  .scene { flex-direction: row; align-items: flex-end; padding: var(--e6) var(--e6) 0; }
  .scene__barbu { align-self: flex-end; margin-top: 0; }
  .scene__texte { order: 0; padding-bottom: var(--e6); }
  .grille--empile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* déclinaisons en grille régulière (taux, lots) */
.choix--taux { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e2); }
.choix--taux .choix__pastille { min-width: 0; width: 100%; }
.lots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lots .choix__pastille { min-height: 60px; padding-inline: 4px; }
.choix__pastille small { white-space: nowrap; }
.choix--taux .choix__pastille { padding-inline: 4px; }
.choix--taux input:checked + .choix__pastille, .lots input:checked + .choix__pastille { padding-inline: 3px; }

/* ------------------------------------------------------------------ 25. Guides */
/* sélection produit contextuelle : le filet roux dit « ici on parle d'acheter » */
.selection {
  border-top: 3px solid var(--roux); background: var(--brume);
  border-radius: 0 0 var(--r) var(--r); padding: var(--e4); margin-block: var(--e6);
}
.selection h3 { font-size: var(--t-17); }
.selection > .grille { margin-top: var(--e4); }
.selection .carte__visuel { background: var(--blanc); }
.guide-meta {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  padding-block: var(--e3); font-size: var(--t-13); color: var(--gris);
}
.guide-meta img { width: 40px; height: 40px; border-radius: 50%; background: var(--canard-clair); flex: none; object-fit: cover; }
.guide-meta strong { color: var(--encre); font-weight: var(--moyen); }
.texte h2 { scroll-margin-top: 140px; }

/* ------------------------------------------------------------------ 26. Planche de composants */
.specimen { border-top: 1px solid var(--filet); padding-top: var(--e4); margin-top: var(--e6); }
.specimen__nom {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--t-13); color: var(--gris);
}
.specimen__note { font-size: var(--t-15); color: var(--gris); max-width: var(--lecture); margin-top: var(--e2); }
.specimen__corps { margin-top: var(--e4); }
.cadre-mobile {
  width: 390px; max-width: 100%; border: 1px solid var(--filet-fort);
  border-radius: var(--r); overflow: hidden; background: var(--blanc);
}
.cadre-mobile .entete { position: static; }
.cadre-mobile .wrap { padding-inline: var(--e4); }

/* ------------------------------------------------------------------ 27. Cibles tactiles
   Tout ce qui se tape au pouce fait au moins 44 px de haut. Les liens inclus
   dans une phrase font exception (WCAG 2.5.8, cible en ligne). */
.logo { padding-block: 6px; }
.btn--petit { min-height: 44px; }
.puce { min-height: 44px; padding-block: 6px; }
.puce--active button { width: 34px; height: 34px; margin-right: -8px; border-radius: 50%; align-items: center; justify-content: center; }
.puce--active button:hover { background: rgba(31, 101, 96, .12); }
.liens-plats a { min-height: 44px; }
.case { min-height: 44px; padding-block: 10px; align-items: center; }
.case input { width: 24px; height: 24px; margin-top: 0; }
.filtres .case { min-height: 44px; padding-block: 10px; }
.somm a { padding-block: 11px; }
.tri select, .qte input { min-height: 44px; }
@media (min-width: 900px) {
  /* le guide garde une colonne de lecture de 66 caractères, sélections comprises */
  .colonnes-guide > .texte { max-width: var(--lecture); }
}

/* stickers illustrés (planche gen/stickers-reperes.png, découpée dans illus/) */
.sticker__illus { width: 44px; height: 44px; flex: none; }
.comptoir img { border-radius: var(--r-bulle); width: 100%; }