/* ==========================================================================
   iClope — piste « La maison qui répond »
   base.css : reset léger + composants partagés.
   Ordre : 1 reset · 2 typographie · 3 utilitaires de mise en page
           4 en-tête & ligne de réception · 5 navigation · 6 pied & nicotine
           7 boutons & champs · 8 cartes produit · 9 voix & citations
           10 sélecteurs, quantité, badges · 11 filtres & recherche
           12 avis, compatibilités, conseil · 13 tunnel & compte
           14 flottants (toast, age gate, cookies, tiroir) · 15 états
   ========================================================================== */

/* ---------- 1. Reset léger ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--texte-police);
  font-size: var(--t17);
  line-height: var(--interligne);
  font-synthesis-weight: none;
  overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }
hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e7) 0; }

:focus-visible {
  outline: 3px solid var(--canard-fonce);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Le focus reste visible même sur fond canard */
.sur-canard :focus-visible,
.pied :focus-visible { outline-color: var(--blanc); }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--encre); color: var(--blanc);
  padding: var(--e3) var(--e4); border-radius: 0 0 var(--r-s) 0;
}
.saut-contenu:focus { left: 0; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 2. Typographie ------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: var(--interligne-titre);
  letter-spacing: -0.012em;
  margin: 0 0 var(--e3);
  color: var(--encre);
  text-wrap: balance;
}
h1 { font-size: var(--t30); }
h2 { font-size: var(--t24); }
h3 { font-size: var(--t20); }
h4 { font-size: var(--t17); font-weight: 500; }
p  { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--canard-fonce); }
a.nu { text-decoration: none; color: inherit; }
a.nu:hover { color: inherit; }

strong, b { font-weight: 600; }
small { font-size: var(--t13); }

.chapeau {
  font-size: var(--t20);
  color: var(--gris);
  line-height: 1.45;
  max-width: 62ch;
}
.legende { font-size: var(--t13); color: var(--gris); }
.sur-titre {           /* le « rang » d'une page : catégorie, marque, silo */
  font-family: var(--titre);
  font-size: var(--t15);
  font-weight: 500;
  color: var(--canard);
  margin: 0 0 var(--e2);
}
.texte-long { max-width: 68ch; }
.texte-long h2 { margin-top: var(--e8); }
.texte-long h3 { margin-top: var(--e6); }
.texte-long ul { margin: 0 0 var(--e4); }
.texte-long ul li {
  position: relative; padding-left: var(--e5); margin-bottom: var(--e2);
}
.texte-long ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 7px; border-radius: var(--r-rond);
  background: var(--sauge-filet);
}

@media (min-width: 900px) {
  body { font-size: 1.125rem; }
  h1 { font-size: var(--t38); }
  h2 { font-size: var(--t30); }
  h3 { font-size: var(--t24); }
}

/* ---------- 3. Mise en page ----------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}
.bloc { padding-block: var(--e8); }
.bloc--serre { padding-block: var(--e7); }
.bloc--lin { background: var(--lin); }
.bloc--sauge { background: var(--sauge); }
.bloc + .bloc--lin, .bloc--lin + .bloc { border-top: 1px solid var(--filet); }

.entete-bloc {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e5);
}
.entete-bloc h2 { margin: 0; }
.entete-bloc a { font-size: var(--t15); white-space: nowrap; }

.grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.grille--2 { grid-template-columns: 1fr; }
.grille--produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.pile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.pile--serre { gap: var(--e2); }
.rangee { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

.fil-ariane {
  font-size: var(--t13); color: var(--gris);
  padding-block: var(--e3);
  display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center;
}
.fil-ariane a { color: var(--gris); text-decoration: none; }
.fil-ariane a:hover { color: var(--canard); text-decoration: underline; }
.fil-ariane li::after { content: "·"; margin-left: var(--e2); color: var(--filet); }
.fil-ariane li:last-child::after { content: none; }
.fil-ariane li { display: inline-flex; align-items: center; }
.fil-ariane li[aria-current] { color: var(--encre); }

@media (min-width: 560px) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .grille--produits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
}
@media (min-width: 900px) {
  .bloc { padding-block: var(--e10); }
  .bloc--serre { padding-block: var(--e8); }
  .grille--produits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .colonnes {
    display: grid; gap: var(--e8);
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }
  .colonnes--fiche { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--e8); }
  .colonnes--guide { grid-template-columns: 260px minmax(0, 1fr); }
}

/* ---------- 4. En-tête + ligne de réception ------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
}
.entete__barre {
  display: flex; align-items: center; gap: var(--e2);
  min-height: 60px;
}
.entete__actions { display: flex; align-items: center; gap: var(--e1); margin-left: auto; }

.icone-bouton {
  width: var(--cible); height: var(--cible);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-s); color: var(--encre); position: relative;
  text-decoration: none;
}
.icone-bouton:hover { background: var(--lin); color: var(--encre); }
.icone-bouton__compteur {
  position: absolute; top: 4px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--r-rond);
  background: var(--corail-action); color: var(--blanc);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}

/* Logo typographique */
.logo { display: inline-flex; flex-direction: column; text-decoration: none; }
.logo:hover { color: inherit; }
.logo__mot {
  font-family: var(--titre); font-weight: 700; font-size: var(--t24);
  letter-spacing: -0.02em; color: var(--encre); line-height: 1;
}
.logo__mot .point { color: var(--canard); }
.logo__signature {
  font-size: 11px; color: var(--gris); letter-spacing: 0.01em; margin-top: 3px;
}

/* — La ligne de réception : l'élément mémorable de la piste — */
.reception {
  background: var(--lin);
  border-bottom: 1px solid var(--filet);
}
.reception__interieur {
  display: flex; align-items: center; gap: var(--e3);
  padding-block: var(--e2);
  min-height: 52px;
}
.reception__portrait { flex: 0 0 auto; }
.reception__texte {
  font-size: var(--t13); color: var(--gris); line-height: 1.35;
  min-width: 0;
}
.reception__texte b { color: var(--encre); font-weight: 600; }
.reception__tel {
  font-family: var(--titre); font-weight: 700; font-size: var(--t17);
  color: var(--canard); text-decoration: none; white-space: nowrap;
}
.reception__tel:hover { text-decoration: underline; }
.reception__direct {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t13); color: var(--gris); white-space: nowrap;
}
.reception__direct::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-rond);
  background: var(--corail); flex: 0 0 auto;
}
.reception__lien { margin-left: auto; font-size: var(--t13); white-space: nowrap; }

@media (max-width: 559px) {
  .reception__lien { display: none; }
}
@media (min-width: 900px) {
  .entete__barre { min-height: 76px; gap: var(--e6); }
  .logo__mot { font-size: var(--t30); }
  .logo__signature { font-size: var(--t13); }
  .reception__interieur { gap: var(--e4); }
  .reception__texte { font-size: var(--t15); }
}

/* ---------- 5. Navigation ------------------------------------------------- */
.nav-bureau { display: none; }
@media (min-width: 900px) {
  .nav-bureau {
    display: block; border-top: 1px solid var(--filet);
  }
  .nav-bureau__liste { display: flex; gap: var(--e2); }
  .nav-bureau__liste > li { position: relative; }
  .nav-bureau__lien {
    display: inline-flex; align-items: center; height: 48px;
    padding-inline: var(--e3);
    font-size: var(--t15); font-weight: 500; color: var(--encre);
    text-decoration: none; border-bottom: 3px solid transparent;
  }
  .nav-bureau__lien:hover,
  .nav-bureau__liste > li:hover .nav-bureau__lien { border-bottom-color: var(--canard); color: var(--encre); }
  .nav-bureau__lien[aria-current="page"] { border-bottom-color: var(--canard); }

  .mega {
    position: absolute; left: 0; top: 100%; z-index: 70;
    display: none;
    width: 720px; max-width: calc(100vw - 2 * var(--marge-page));
    background: var(--blanc);
    border: 1px solid var(--filet); border-radius: 0 0 var(--r-m) var(--r-m);
    box-shadow: var(--ombre-suggest);
    padding: var(--e6);
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6);
  }
  .nav-bureau__liste > li:hover .mega,
  .nav-bureau__liste > li:focus-within .mega { display: grid; }
  .mega h3 { font-size: var(--t15); color: var(--canard); margin-bottom: var(--e2); }
  .mega li { margin-bottom: var(--e2); }
  .mega a { font-size: var(--t15); color: var(--encre); text-decoration: none; }
  .mega a:hover { text-decoration: underline; color: var(--canard); }
  .mega__voix {
    grid-column: 1 / -1; border-top: 1px solid var(--filet);
    padding-top: var(--e4); display: flex; gap: var(--e3); align-items: center;
    font-size: var(--t15); color: var(--gris);
  }
  .bouton-menu { display: none; }
}

/* Tiroir (menu mobile ET filtres) */
.tiroir {
  position: fixed; inset: 0 auto 0 0; z-index: 120;
  width: min(86vw, 340px);
  background: var(--blanc);
  transform: translateX(-102%);
  transition: transform var(--duree) var(--courbe);
  display: flex; flex-direction: column;
  box-shadow: var(--ombre-tiroir);
}
.tiroir--droite { inset: 0 0 0 auto; transform: translateX(102%); }
.tiroir[data-ouvert="true"] { transform: translateX(0); }
.tiroir__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--filet); flex: 0 0 auto;
}
.tiroir__entete h2 { margin: 0; font-size: var(--t20); }
.tiroir__corps { overflow-y: auto; padding: var(--e4); flex: 1 1 auto; }
.tiroir__pied {
  flex: 0 0 auto; padding: var(--e3) var(--e4);
  border-top: 1px solid var(--filet); display: flex; gap: var(--e3);
}
.tiroir__liste a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--cible); padding: var(--e2) 0;
  color: var(--encre); text-decoration: none;
  border-bottom: 1px solid var(--filet); font-weight: 500;
}
.tiroir__liste a:hover { color: var(--canard); }
.voile {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(30, 36, 34, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duree) var(--courbe);
}
.voile[data-ouvert="true"] { opacity: 1; pointer-events: auto; }
body[data-fige="true"] { overflow: hidden; }

/* ---------- 6. Pied de page + mention nicotine ---------------------------- */
.bandeau-nicotine {
  background: var(--lin);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.bandeau-nicotine__interieur {
  display: flex; align-items: center; gap: var(--e3);
  padding-block: var(--e4);
  font-size: var(--t13); color: var(--gris); line-height: 1.4;
}
.bandeau-nicotine b { color: var(--encre); font-weight: 600; }
.pastille-18 {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: var(--r-s);
  border: 2px solid var(--encre); color: var(--encre);
  font-family: var(--titre); font-weight: 700; font-size: var(--t15);
  display: flex; align-items: center; justify-content: center;
}

.pied {
  background: var(--encre); color: #C9D1CE;
  padding-block: var(--e8) var(--e6);
  font-size: var(--t15);
}
.pied a { color: #C9D1CE; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied h3 {
  font-size: var(--t15); color: var(--blanc); margin-bottom: var(--e3);
  font-family: var(--texte-police); font-weight: 600; letter-spacing: 0;
}
.pied__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e7); }
.pied__liste li { margin-bottom: var(--e2); }
.pied__reception {
  border: 1px solid #3A4340; border-radius: var(--r-m);
  padding: var(--e4); display: flex; gap: var(--e3); align-items: flex-start;
}
.pied__reception .avatar { flex: 0 0 auto; }
.pied__tel {
  display: block; font-family: var(--titre); font-weight: 700;
  font-size: var(--t20); color: var(--blanc); text-decoration: none; margin-top: 2px;
}
.pied__bas {
  margin-top: var(--e7); padding-top: var(--e4);
  border-top: 1px solid #3A4340;
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5);
  font-size: var(--t13); color: #9AA5A2;
}
.pied__bas a { color: #9AA5A2; }
.pied__paiements { display: flex; gap: var(--e2); margin-left: auto; align-items: center; }
.pied__paiements span {
  border: 1px solid #3A4340; border-radius: 4px;
  padding: 2px 6px; font-size: 11px; color: #C9D1CE;
}
@media (min-width: 720px) {
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--e7); }
  .bandeau-nicotine__interieur { font-size: var(--t15); }
}

/* ---------- 7. Boutons et champs ------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  min-height: var(--cible); padding: 0 var(--e5);
  border-radius: var(--r-s);
  font-family: var(--texte-police);
  font-size: var(--t17); font-weight: 600;
  text-decoration: none; text-align: center;
  transition: background-color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe);
}
.bouton--achat { background: var(--corail-action); color: var(--blanc); }
.bouton--achat:hover { background: var(--corail-fonce); color: var(--blanc); }
.bouton--principal { background: var(--canard); color: var(--blanc); }
.bouton--principal:hover { background: var(--canard-fonce); color: var(--blanc); }
.bouton--second {
  background: var(--blanc); color: var(--canard);
  box-shadow: inset 0 0 0 1.5px var(--canard);
}
.bouton--second:hover { background: var(--canard-clair); color: var(--canard-fonce); }
.bouton--discret {
  background: var(--blanc); color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--filet);
}
.bouton--discret:hover { background: var(--lin); }
.bouton--plein { width: 100%; }
.bouton--petit { min-height: 38px; font-size: var(--t15); padding: 0 var(--e4); }
.bouton[aria-disabled="true"],
.bouton:disabled {
  background: var(--lin-fonce); color: var(--gris);
  box-shadow: none; cursor: not-allowed;
}
.lien-texte {
  font-size: var(--t15); font-weight: 500; color: var(--canard);
  background: none; text-decoration: underline; text-underline-offset: 3px;
}
.lien-texte:hover { color: var(--canard-fonce); }

/* Bouton carré d'ajout rapide, sur les cartes produit — canard */
.ajout-carre {
  width: var(--cible); height: var(--cible); flex: 0 0 auto;
  background: var(--canard); color: var(--blanc);
  border-radius: var(--r-s);
  display: inline-flex; align-items: center; justify-content: center;
}
.ajout-carre:hover { background: var(--canard-fonce); }

.champ { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.champ > label, .champ__label {
  font-size: var(--t15); font-weight: 500; color: var(--encre);
}
.champ__aide { font-size: var(--t13); color: var(--gris); }
.champ__erreur { font-size: var(--t13); color: var(--rouge); font-weight: 500; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--cible);
  padding: 10px var(--e3);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r-s);
  font-size: var(--t17);
}
textarea { min-height: 120px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--sauge-filet); }
input[aria-invalid="true"] { border-color: var(--rouge); border-width: 2px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23626B69' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
  padding-right: var(--e8);
}
.champ-groupe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
@media (min-width: 560px) { .champ-groupe--2 { grid-template-columns: 1fr 1fr; } }

.case {
  display: flex; gap: var(--e3); align-items: flex-start;
  font-size: var(--t15); cursor: pointer; min-height: var(--cible);
  padding-block: var(--e2);
}
.case input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--canard); }

/* ---------- 8. Cartes produit --------------------------------------------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.carte:hover { border-color: var(--sauge-filet); }
.carte__image {
  aspect-ratio: 1 / 1; background: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e3); border-bottom: 1px solid var(--filet);
}
.carte__image img { max-height: 100%; width: auto; object-fit: contain; }
.carte__corps { padding: var(--e3); display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }
.carte__marque { font-size: var(--t13); color: var(--gris); }
.carte__nom {
  font-size: var(--t15); font-weight: 500; color: var(--encre);
  text-decoration: none; line-height: 1.3;
}
.carte a.carte__nom::after { content: ""; position: absolute; inset: 0; }
.carte__nom:hover { color: var(--canard); }
.carte__declinaisons { font-size: var(--t13); color: var(--gris); }
.carte__avis {
  font-family: var(--titre); font-style: italic; font-size: var(--t15);
  color: var(--encre); line-height: 1.35; margin-top: 2px;
}
.carte__avis::before { content: "«\00a0"; color: var(--prune); font-style: normal; }
.carte__avis::after  { content: "\00a0»"; color: var(--prune); font-style: normal; }
.carte__avis-qui { display: block; font-size: var(--t13); color: var(--gris); margin-top: 2px; }
.carte__pied {
  margin-top: auto; padding-top: var(--e3);
  display: flex; align-items: center; gap: var(--e3);
}
.carte__prix { font-size: var(--t17); font-weight: 600; }
.carte__prix small { display: block; font-size: var(--t13); font-weight: 400; color: var(--gris); }
.carte__pied .ajout-carre { margin-left: auto; position: relative; z-index: 2; }

.carte--liste { flex-direction: row; }
.carte--liste .carte__image {
  width: 120px; flex: 0 0 120px; aspect-ratio: 1 / 1;
  border-bottom: 0; border-right: 1px solid var(--filet);
}
.carte--liste .carte__corps { padding: var(--e4); }

.dispo { font-size: var(--t13); display: inline-flex; align-items: center; gap: 6px; }
.dispo::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-rond); background: var(--canard);
}
.dispo--stock { color: var(--canard); }
.dispo--bientot { color: var(--ambre); }
.dispo--bientot::before { background: var(--ambre); }
.dispo--rupture { color: var(--rouge); }
.dispo--rupture::before { background: var(--rouge); }

/* ---------- 9. Voix, citations, portraits --------------------------------- */
.avatar {
  position: relative;
  border-radius: var(--r-rond);
  background: var(--canard);
  color: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto;
  font-family: var(--titre); font-weight: 700; letter-spacing: -0.01em;
}
.avatar--28 { width: 28px; height: 28px; font-size: 11px; }
.avatar--40 { width: 40px; height: 40px; font-size: var(--t13); }
.avatar--56 { width: 56px; height: 56px; font-size: var(--t17); }
.avatar--72 { width: 72px; height: 72px; font-size: var(--t20); }
.avatar--96 { width: 96px; height: 96px; font-size: var(--t24); }
.avatar--client { background: var(--sauge); color: var(--prune); }
.avatar__initiales { position: relative; z-index: 1; }
/* La planche gen/portraits-equipe.png est une grille 3 × 2.
   L'image est posée par-dessus les initiales ; si elle manque, ui.js la retire
   et le médaillon canard + initiales reste — c'est le repli prévu. */
.avatar__img {
  position: absolute; inset: 0; z-index: 2;
  width: 300%; height: 200%; max-width: none;
  object-fit: cover;
}
.avatar[data-p="1"] .avatar__img { translate: 0     0; }
.avatar[data-p="2"] .avatar__img { translate: -33.333% 0; }
.avatar[data-p="3"] .avatar__img { translate: -66.666% 0; }
.avatar[data-p="4"] .avatar__img { translate: 0     -50%; }
.avatar[data-p="5"] .avatar__img { translate: -33.333% -50%; }
.avatar[data-p="6"] .avatar__img { translate: -66.666% -50%; }

.voix {
  background: var(--lin);
  border: 1px solid var(--filet);
  border-radius: var(--r-l);
  padding: var(--e5);
  display: grid; gap: var(--e3);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.voix--client { background: var(--sauge); border-color: var(--sauge-filet); }
.voix__qui { font-size: var(--t13); color: var(--gris); }
.voix__qui b { display: block; font-size: var(--t15); color: var(--encre); font-weight: 600; }
.voix__dit {
  grid-column: 1 / -1;
  font-family: var(--titre); font-style: italic; font-weight: 500;
  font-size: var(--t20); line-height: 1.35; color: var(--encre);
  margin: 0;
}
.voix__dit::before { content: "«\00a0"; color: var(--prune); font-style: normal; }
.voix__dit::after  { content: "\00a0»"; color: var(--prune); font-style: normal; }
.voix__action { grid-column: 1 / -1; font-size: var(--t15); }

@media (min-width: 900px) {
  .voix { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e4); padding: var(--e6); }
  .voix__dit { grid-column: 2; font-size: var(--t24); }
  .voix__action { grid-column: 2; }
}

/* Citation d'une question de client, dans un guide */
.question-client {
  border-left: 3px solid var(--prune);
  padding: var(--e1) 0 var(--e1) var(--e4);
  margin: var(--e6) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2);
}
.question-client p {
  font-family: var(--titre); font-style: italic; font-size: var(--t20);
  line-height: 1.35; margin: 0;
}
.question-client p::before { content: "«\00a0"; color: var(--prune); font-style: normal; }
.question-client p::after  { content: "\00a0»"; color: var(--prune); font-style: normal; }
.question-client footer { font-size: var(--t13); color: var(--gris); }

/* ---------- 10. Sélecteurs, quantité, badges ------------------------------ */
.selecteur { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
.selecteur__titre {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  font-size: var(--t15); font-weight: 600;
}
.selecteur__titre span { font-weight: 400; color: var(--gris); font-size: var(--t13); }
.options { display: flex; flex-wrap: wrap; gap: var(--e2); }
.option {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--cible); min-width: var(--cible);
  padding: var(--e2) var(--e4);
  border: 1.5px solid var(--filet); border-radius: var(--r-s);
  background: var(--blanc); color: var(--encre);
  font-size: var(--t15); font-weight: 500; text-decoration: none;
  cursor: pointer; text-align: center; line-height: 1.2;
}
.option:hover { border-color: var(--canard); color: var(--encre); }
.option[aria-pressed="true"], .option[aria-checked="true"] {
  border-color: var(--canard); background: var(--canard-clair);
  box-shadow: inset 0 0 0 1px var(--canard);
}
.option small { display: block; font-size: var(--t13); font-weight: 400; color: var(--gris); }
.option[aria-pressed="true"] small { color: var(--canard-fonce); }
.option--epuise { color: var(--gris); border-style: dashed; cursor: not-allowed; }
.option--epuise:hover { border-color: var(--filet); }
.option--couleur { flex-direction: row; padding: var(--e2) var(--e3) var(--e2) var(--e2); gap: var(--e2); }
.pastille-couleur {
  width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(30, 36, 34, 0.18);
}

.quantite {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--filet); border-radius: var(--r-s); overflow: hidden;
  background: var(--blanc);
}
.quantite button {
  width: var(--cible); height: var(--cible);
  display: inline-flex; align-items: center; justify-content: center; color: var(--encre);
}
.quantite button:hover { background: var(--lin); }
.quantite input {
  width: 52px; min-height: 42px; text-align: center; border: 0;
  border-inline: 1px solid var(--filet); border-radius: 0;
  font-weight: 600; padding: 0;
  -moz-appearance: textfield;
}
.quantite input::-webkit-outer-spin-button,
.quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--e2);
  border-radius: 5px;
  font-size: var(--t13); font-weight: 600; line-height: 1.4;
  background: var(--lin); color: var(--encre);
}
.badge--nouveau { background: var(--canard-clair); color: var(--canard-fonce); }
.badge--dluo    { background: var(--ambre-voile); color: var(--ambre); }
.badge--rupture { background: #F7E6E4; color: var(--rouge); }
.badge--reassort{ background: var(--sauge); color: #24564F; }
.badge--lot     { background: var(--corail-voile); color: var(--corail-fonce); }
.carte__badges {
  position: absolute; top: var(--e2); left: var(--e2); z-index: 3;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}

.lots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.lot {
  display: flex; align-items: center; gap: var(--e3);
  border: 1.5px solid var(--filet); border-radius: var(--r-s);
  padding: var(--e3); background: var(--blanc); cursor: pointer; text-align: left;
  min-height: var(--cible); width: 100%;
}
.lot[aria-pressed="true"] { border-color: var(--canard); background: var(--canard-clair); }
.lot__titre { display: block; font-weight: 600; font-size: var(--t15); }
.lot__detail { display: block; font-size: var(--t13); color: var(--gris); }
.lot__prix { flex: 0 0 auto; margin-left: auto; text-align: right; font-weight: 600; font-size: var(--t15); }
.lot__prix small { display: block; white-space: nowrap; font-weight: 400; color: var(--gris); font-size: var(--t13); }

/* ---------- 11. Filtres et recherche -------------------------------------- */
.recherche { position: relative; flex: 1 1 auto; min-width: 0; }
.recherche__champ { display: flex; align-items: center; position: relative; }
.recherche__champ svg {
  position: absolute; left: var(--e3); color: var(--gris); pointer-events: none;
}
.recherche input {
  padding-left: var(--e8);
  border-radius: var(--r-rond);
  background: var(--lin); border-color: var(--lin);
}
.recherche input:focus { background: var(--blanc); }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 90;
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--r-m); box-shadow: var(--ombre-suggest);
  overflow: hidden;
}
.suggestions__groupe { padding: var(--e2) 0; border-top: 1px solid var(--filet); }
.suggestions__groupe:first-child { border-top: 0; }
.suggestions__titre {
  font-size: var(--t13); 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); min-height: var(--cible);
  color: var(--encre); text-decoration: none; font-size: var(--t15);
}
.suggestions a:hover, .suggestions a:focus-visible { background: var(--lin); }
.suggestions img { width: 34px; height: 34px; object-fit: contain; }
.suggestions .marqueur { font-weight: 600; }
.suggestions em { font-style: normal; color: var(--gris); margin-left: auto; font-size: var(--t13); white-space: nowrap; flex: 0 0 auto; }

.barre-outils {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding-block: var(--e3);
  border-bottom: 1px solid var(--filet);
}
.barre-outils__compte { font-size: var(--t15); color: var(--gris); }
.barre-outils select { width: auto; min-width: 170px; }

.puces { display: flex; flex-wrap: wrap; gap: var(--e2); }
.puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--e3); min-height: 36px;
  border-radius: var(--r-rond);
  background: var(--canard-clair); color: var(--canard-fonce);
  font-size: var(--t13); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--sauge-filet);
}
.puce button { display: inline-flex; color: inherit; }
.puce--effacer { background: none; box-shadow: none; color: var(--gris); text-decoration: underline; }

.filtre-groupe { border-bottom: 1px solid var(--filet); padding-block: var(--e4); }
.filtre-groupe:last-child { border-bottom: 0; }
.filtre-groupe > h3 { font-size: var(--t15); margin-bottom: var(--e2); font-family: var(--texte-police); font-weight: 600; }
.filtre-groupe .case { min-height: 40px; }
.filtre-groupe .case span small { color: var(--gris); }

/* ---------- 12. Avis, compatibilités, conseil ----------------------------- */
.etoiles { display: inline-flex; gap: 2px; color: var(--prune); vertical-align: -2px; }
.etoiles svg { width: 16px; height: 16px; }
.note-globale { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.note-globale strong { font-family: var(--titre); font-size: var(--t24); }

.avis {
  border-top: 1px solid var(--filet);
  padding-block: var(--e5);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2);
}
.avis:first-of-type { border-top: 0; }
.avis__entete { display: flex; align-items: center; gap: var(--e3); }
.avis__qui { font-size: var(--t13); color: var(--gris); }
.avis__qui b { display: block; color: var(--encre); font-size: var(--t15); font-weight: 600; }
.avis__texte { margin: 0; }
.avis__contexte {
  font-size: var(--t13); color: var(--gris);
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
}
.avis__contexte span { display: inline-flex; align-items: center; gap: 5px; }

/* « Ce qu'en disent nos clients » : le bloc qui ouvre chaque fiche */
.paroles {
  background: var(--sauge);
  border-radius: var(--r-l);
  padding: var(--e5);
}
.paroles > h2 {
  font-size: var(--t20); margin-bottom: var(--e4);
  display: flex; align-items: center; gap: var(--e2);
}
.paroles__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.parole { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start; }
.parole__dit {
  font-family: var(--titre); font-style: italic; font-weight: 500;
  font-size: var(--t17); line-height: 1.4; margin: 0 0 4px;
}
.parole__dit::before { content: "«\00a0"; color: var(--prune); font-style: normal; }
.parole__dit::after  { content: "\00a0»"; color: var(--prune); font-style: normal; }
.parole__qui { font-size: var(--t13); color: #4C5754; }
.paroles__pied {
  margin-top: var(--e4); padding-top: var(--e3);
  border-top: 1px solid var(--sauge-filet);
  font-size: var(--t13); color: #4C5754;
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
}
@media (min-width: 900px) {
  .paroles { padding: var(--e6); }
  .paroles__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }
  .parole__dit { font-size: var(--t20); }
}

.compat {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  padding: var(--e4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3);
}
.compat h3 { font-size: var(--t17); margin: 0; }
.compat__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.compat__liste li {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) 0; border-top: 1px solid var(--filet);
}
.compat__liste li:first-child { border-top: 0; }
.compat__liste img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.compat__liste .prix { margin-left: auto; font-weight: 600; font-size: var(--t15); }

.conseil {
  background: var(--sauge); border-radius: var(--r-m);
  padding: var(--e4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2);
}
.conseil h3 {
  font-size: var(--t17); margin: 0;
  display: flex; align-items: center; gap: var(--e2);
}
.conseil p { font-size: var(--t15); margin: 0; }

.encadre {
  border: 1px solid var(--sauge-filet); background: var(--sauge);
  border-radius: var(--r-m); padding: var(--e5);
  margin: var(--e6) 0;
}
.encadre h3 { font-size: var(--t17); margin-bottom: var(--e2); }
.encadre p:last-child { margin-bottom: 0; }
.encadre--attention { background: var(--ambre-voile); border-color: #E8D6A9; }

.tableau-cadre { overflow-x: auto; margin: var(--e5) 0; }
table.donnees { font-size: var(--t15); min-width: 460px; }
table.donnees th, table.donnees td {
  text-align: left; padding: var(--e3); border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
table.donnees thead th {
  font-family: var(--texte-police); font-weight: 600;
  background: var(--lin); border-bottom: 2px solid var(--filet);
  position: sticky; top: 0;
}
table.donnees tbody tr:hover { background: var(--lin); }

.sommaire {
  background: var(--lin); border: 1px solid var(--filet);
  border-radius: var(--r-m); padding: var(--e5);
}
.sommaire h2 { font-size: var(--t17); margin-bottom: var(--e3); }
.sommaire ol { counter-reset: s; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.sommaire li { counter-increment: s; display: flex; gap: var(--e3); font-size: var(--t15); }
.sommaire li::before {
  content: counter(s); flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: var(--r-rond);
  background: var(--blanc); box-shadow: inset 0 0 0 1px var(--sauge-filet);
  color: var(--canard); font-size: var(--t13); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 900px) {
  .sommaire--colle { position: sticky; top: 200px; }
}

.selection-guide {
  border: 1px solid var(--filet); border-left: 3px solid var(--canard);
  border-radius: var(--r-s);
  padding: var(--e4); margin: var(--e6) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3);
}
.selection-guide__titre { font-size: var(--t15); font-weight: 600; margin: 0; }
.selection-guide__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
.selection-guide__liste li { display: flex; align-items: center; gap: var(--e3); }
.selection-guide__liste img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.selection-guide__nom { display: block; min-width: 0; font-size: var(--t15); font-weight: 500; }
.selection-guide__nom small { display: block; color: var(--gris); font-weight: 400; font-size: var(--t13); }
.selection-guide__liste .prix { margin-left: auto; font-weight: 600; white-space: nowrap; }

.faq { display: grid; grid-template-columns: minmax(0, 1fr); }
.faq__item { border-bottom: 1px solid var(--filet); }
.faq__q {
  width: 100%; display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) 0; text-align: left;
  font-size: var(--t17); font-weight: 500; font-family: var(--titre);
  min-height: var(--cible);
}
.faq__q svg { margin-left: auto; flex: 0 0 auto; transition: transform var(--duree) var(--courbe); }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq__r { padding: 0 0 var(--e4); font-size: var(--t15); color: var(--gris); max-width: 66ch; }
.faq__r[hidden] { display: none; }
.faq__r.apparait { animation: apparait var(--duree) var(--courbe); }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

.auteur {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) 0; border-block: 1px solid var(--filet);
  font-size: var(--t13); color: var(--gris);
}
.auteur b { display: block; font-size: var(--t15); color: var(--encre); font-weight: 600; }

/* ---------- 13. Tunnel, panier, compte ------------------------------------ */
.etapes { display: flex; gap: var(--e2); margin-bottom: var(--e5); }
.etape-jalon {
  flex: 1 1 0; min-width: 0;
  border-top: 3px solid var(--filet);
  padding-top: var(--e2);
  font-size: var(--t13); color: var(--gris);
  text-decoration: none;
}
.etape-jalon b { display: block; color: var(--encre); font-size: var(--t13); font-weight: 600; }
.etape-jalon[data-etat="fait"] { border-top-color: var(--canard); }
.etape-jalon[data-etat="fait"] b { color: var(--canard); }
.etape-jalon[aria-current] { border-top-color: var(--corail-action); }
.etape-jalon[aria-current] b { color: var(--corail-fonce); }

.etape {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  margin-bottom: var(--e4); background: var(--blanc);
}
.etape__entete {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4); border-bottom: 1px solid var(--filet);
}
.etape__numero {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--r-rond);
  background: var(--canard); color: var(--blanc);
  font-family: var(--titre); font-weight: 700; font-size: var(--t15);
  display: flex; align-items: center; justify-content: center;
}
.etape__entete h2 { margin: 0; font-size: var(--t20); }
.etape__corps { padding: var(--e5) var(--e4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
.etape__mot {
  display: flex; gap: var(--e3); align-items: flex-start;
  background: var(--lin); border-top: 1px solid var(--filet);
  padding: var(--e4); font-size: var(--t15); color: var(--gris);
  border-radius: 0 0 var(--r-m) var(--r-m);
}
.etape__mot b { color: var(--encre); font-weight: 600; }

.choix {
  display: flex; gap: var(--e3); align-items: flex-start;
  border: 1.5px solid var(--filet); border-radius: var(--r-s);
  padding: var(--e4); cursor: pointer; min-height: var(--cible);
}
.choix:hover { border-color: var(--sauge-filet); }
.choix input { width: 22px; height: 22px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--canard); }
.choix:has(input:checked) { border-color: var(--canard); background: var(--canard-clair); }
.choix__titre { font-weight: 600; font-size: var(--t15); display: flex; gap: var(--e2); align-items: baseline; }
.choix__detail { display: block; font-size: var(--t13); color: var(--gris); }
.choix__prix { margin-left: auto; font-weight: 600; white-space: nowrap; }

.recap {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  padding: var(--e5); background: var(--blanc);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3);
}
.recap h2 { font-size: var(--t20); margin: 0 0 var(--e2); }
.recap__ligne { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t15); }
.recap__ligne span:last-child { font-weight: 500; white-space: nowrap; }
.recap__total {
  border-top: 1px solid var(--filet); padding-top: var(--e3); margin-top: var(--e2);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3);
}
.recap__total strong { font-family: var(--titre); font-size: var(--t24); }

.ligne-panier {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--e3);
  padding-block: var(--e4); border-bottom: 1px solid var(--filet);
}
.ligne-panier__image {
  width: 80px; height: 80px; border: 1px solid var(--filet); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--blanc);
}
.ligne-panier__image img { max-height: 100%; width: auto; }
.ligne-panier__nom { font-weight: 500; font-size: var(--t15); text-decoration: none; color: var(--encre); }
.ligne-panier__declinaison { font-size: var(--t13); color: var(--gris); }
.ligne-panier__pied { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e2); flex-wrap: wrap; }
.ligne-panier__prix { margin-left: auto; font-weight: 600; }

.barre-fixe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--blanc);
  box-shadow: var(--ombre-flottant);
  padding: var(--e3) var(--marge-page)
           calc(var(--e3) + env(safe-area-inset-bottom, 0px));
}
.barre-fixe__contenu { display: flex; align-items: center; gap: var(--e3); }
.barre-fixe__prix { font-family: var(--titre); font-weight: 700; font-size: var(--t20); }
.barre-fixe__prix small { display: block; font-family: var(--texte-police); font-size: var(--t13); font-weight: 400; color: var(--gris); }
.barre-fixe__mention {
  font-size: 11px; color: var(--gris); text-align: center; margin-top: 6px; line-height: 1.3;
}
.compense-barre { height: 108px; }
@media (min-width: 900px) {
  .barre-fixe { display: none; }
  .compense-barre { display: none; }
}

.reassurances { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.reassurance { display: flex; gap: var(--e3); align-items: flex-start; font-size: var(--t15); }
.reassurance svg { color: var(--canard); flex: 0 0 auto; margin-top: 2px; }
.reassurance b { display: block; font-weight: 600; }
.reassurance span { color: var(--gris); font-size: var(--t13); }
@media (min-width: 720px) { .reassurances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .reassurances--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.onglets { display: flex; gap: var(--e1); border-bottom: 1px solid var(--filet); overflow-x: auto; }
.onglet {
  padding: var(--e3) var(--e4); min-height: var(--cible);
  font-size: var(--t15); font-weight: 500; color: var(--gris);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.onglet[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--canard); }
.onglet-panneau { padding-top: var(--e5); }
.onglet-panneau[hidden] { display: none; }

.commande {
  border: 1px solid var(--filet); border-radius: var(--r-m); overflow: hidden;
}
.commande__entete {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center;
  padding: var(--e4); background: var(--lin); border-bottom: 1px solid var(--filet);
  font-size: var(--t13); color: var(--gris);
}
.commande__entete b { color: var(--encre); font-size: var(--t15); font-weight: 600; }
.commande__corps { padding: var(--e4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.commande__articles { display: flex; gap: var(--e3); flex-wrap: wrap; }
.commande__vignette {
  width: 56px; height: 56px; border: 1px solid var(--filet); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; padding: 4px; background: var(--blanc);
}
.commande__reassort {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
  background: var(--corail-voile); border-radius: var(--r-s); padding: var(--e4);
}
.commande__reassort p { margin: 0; font-size: var(--t15); }

/* ---------- 14. Flottants : toast, age gate, cookies ---------------------- */
.toast {
  position: fixed; left: var(--marge-page); right: var(--marge-page); bottom: 96px;
  z-index: 150; max-width: 460px; margin-inline: auto;
  background: var(--encre); color: var(--blanc);
  border-radius: var(--r-m); padding: 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="true"] { opacity: 1; transform: none; pointer-events: auto; }
.toast__texte { font-size: var(--t15); }
.toast__texte b { display: block; font-weight: 600; }
.toast a { color: var(--blanc); margin-left: auto; font-weight: 600; font-size: var(--t15); white-space: nowrap; }
@media (min-width: 900px) { .toast { bottom: var(--e6); left: auto; right: var(--e6); margin: 0; } }

.age-gate {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(30, 36, 34, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: var(--marge-page);
}
.age-gate[hidden] { display: none; }
.age-gate__carte {
  background: var(--blanc); border-radius: var(--r-l);
  max-width: 460px; width: 100%; padding: var(--e6);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4);
}
.age-gate__salut { display: flex; align-items: center; gap: var(--e3); }
.age-gate__salut b { font-family: var(--titre); font-size: var(--t20); }
.age-gate__salut span { display: block; font-size: var(--t13); color: var(--gris); }
.age-gate h2 { font-size: var(--t24); margin: 0; }
.age-gate p { font-size: var(--t15); color: var(--gris); margin: 0; }
.age-gate__boutons { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
.age-gate__refus { font-size: var(--t13); color: var(--gris); }

.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  background: var(--blanc); border-top: 1px solid var(--filet);
  box-shadow: var(--ombre-flottant);
  padding: var(--e4) var(--marge-page)
           calc(var(--e4) + env(safe-area-inset-bottom, 0px));
}
.cookies[hidden] { display: none; }
.cookies__interieur {
  max-width: var(--conteneur); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3);
}
.cookies p { font-size: var(--t13); color: var(--gris); margin: 0; }
.cookies__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (min-width: 720px) {
  .cookies__interieur { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .cookies__boutons { grid-template-columns: auto auto; }
}

/* ---------- 15. États ----------------------------------------------------- */
.etat {
  border: 1px dashed var(--sauge-filet); border-radius: var(--r-l);
  background: var(--lin);
  padding: var(--e7) var(--e5);
  text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); justify-items: center;
}
.etat img { border-radius: var(--r-m); margin-bottom: var(--e2); }
.etat h2 { margin: 0; font-size: var(--t20); }
.etat p { margin: 0; color: var(--gris); font-size: var(--t15); max-width: 46ch; }
.etat__actions { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; margin-top: var(--e2); }
.etat--erreur { border-color: #E4C4C0; background: #FCF3F1; }

.squelette {
  background: linear-gradient(90deg, var(--lin) 0%, var(--lin-fonce) 50%, var(--lin) 100%);
  background-size: 200% 100%;
  animation: glisse 1.2s linear infinite;
  border-radius: var(--r-s);
}
@keyframes glisse { to { background-position: -200% 0; } }
.squelette--image { aspect-ratio: 1 / 1; border-radius: var(--r-m); }
.squelette--ligne { height: 12px; }
.squelette--ligne.court { width: 55%; }

.bandeau-info {
  display: flex; gap: var(--e3); align-items: flex-start;
  border-radius: var(--r-s); padding: var(--e4);
  font-size: var(--t15);
}
.bandeau-info--rupture { background: #F7E6E4; color: #6E241D; }
.bandeau-info--depublie { background: var(--lin); color: var(--gris); border: 1px solid var(--filet); }
.bandeau-info--reassort { background: var(--sauge); color: #24564F; }
.bandeau-info svg { flex: 0 0 auto; margin-top: 2px; }
.bandeau-info b { font-weight: 600; }

/* Visuel généré (gen/) : couleur de repli si l'image n'est pas encore livrée */
.visuel-gen {
  background: var(--sauge);
  border-radius: var(--r-l);
  overflow: hidden;
  position: relative;
}
.visuel-gen img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Le libellé de repli vit SOUS l'image : il n'apparaît que si le visuel manque. */
.visuel-gen__repli {
  position: absolute; inset: 0; z-index: 0; display: flex;
  align-items: flex-end; padding: var(--e4);
  font-size: var(--t13); color: #4C5754;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 16. Ajustements d'en-tête ------------------------------------- */
.entete__recherche { display: none; }
@media (min-width: 900px) {
  .entete__recherche { display: block; flex: 1 1 auto; max-width: 480px; }
  .entete .icone-bouton[data-role="recherche"] { display: none; }
}

/* Bloc « hauteur de page » : le titre d'un écran et son chapeau */
.tete-page { padding-block: var(--e6) var(--e5); }
.tete-page h1 { margin-bottom: var(--e3); }
.tete-page .chapeau { margin: 0; }

/* Deux colonnes d'égale importance (fiche produit sur desktop) */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
@media (min-width: 900px) {
  .fiche { grid-template-columns: minmax(0, 1fr) 440px; gap: var(--e9); align-items: start; }
  .fiche__achat { position: sticky; top: 210px; }
}

/* Galerie d'images produit */
.galerie { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
.galerie__principale {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: var(--e5); background: var(--blanc);
}
.galerie__principale img { max-height: 100%; width: auto; object-fit: contain; }
.galerie__vignettes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.galerie__vignettes button {
  width: 68px; height: 68px; border: 1.5px solid var(--filet); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; padding: 5px; background: var(--blanc);
}
.galerie__vignettes button[aria-pressed="true"] { border-color: var(--canard); }
.galerie__vignettes img { max-height: 100%; width: auto; }

/* Prix d'une fiche */
.prix-fiche { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.prix-fiche strong { font-family: var(--titre); font-size: var(--t38); line-height: 1; }
.prix-fiche span { font-size: var(--t13); color: var(--gris); }

/* Points clés d'un matériel */
.points-cles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
.points-cles li { display: flex; gap: var(--e3); align-items: flex-start; font-size: var(--t15); }
.points-cles svg { color: var(--canard); flex: 0 0 auto; margin-top: 2px; }
.points-cles b { font-weight: 600; }

/* Bandeau de sous-catégories / gammes */
.rayons { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e2); }
.rayons a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--e4); border-radius: var(--r-rond);
  background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet);
  color: var(--encre); text-decoration: none; font-size: var(--t15); font-weight: 500;
}
.rayons a:hover { box-shadow: inset 0 0 0 1.5px var(--canard); color: var(--canard); }

/* Une accroche de page d'accueil, sans image décorative */
.accroche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
.accroche h1 { font-size: var(--t38); margin: 0; }
.accroche__chiffres { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6); }
.accroche__chiffre { font-size: var(--t13); color: var(--gris); }
.accroche__chiffre b {
  display: block; font-family: var(--titre); font-size: var(--t24);
  color: var(--encre); font-weight: 700; line-height: 1.1;
}
@media (min-width: 900px) {
  .accroche h1 { font-size: var(--t52); max-width: 16ch; }
  .accroche { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e9); align-items: center; }
}

/* Grille d'équipe (page contact / composants) */
.equipe { display: grid; gap: var(--e5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.equipe li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); justify-items: start; }
.equipe b { font-size: var(--t15); font-weight: 600; }
.equipe span { font-size: var(--t13); color: var(--gris); }
@media (min-width: 720px) { .equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .equipe { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Planche de composants */
.specimen { border-top: 1px solid var(--filet); padding-block: var(--e7); }
.specimen > h2 { font-size: var(--t20); margin-bottom: var(--e2); }
.specimen__note { font-size: var(--t13); color: var(--gris); margin-bottom: var(--e5); max-width: 62ch; }
.specimen__bac {
  background: var(--lin); border-radius: var(--r-m); padding: var(--e5);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5);
}
.specimen__bac--blanc { background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); }
.specimen__etiquette { font-size: var(--t13); color: var(--gris); }

/* Planche d'identité */
.nuancier { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .nuancier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nuance { border: 1px solid var(--filet); border-radius: var(--r-m); overflow: hidden; }
.nuance__aplat { height: 84px; }
.nuance__texte { padding: var(--e3); font-size: var(--t13); }
.nuance__texte b { display: block; font-size: var(--t15); font-weight: 600; }
.nuance__texte code { font-size: var(--t13); color: var(--gris); }
.echelle li { display: flex; align-items: baseline; gap: var(--e4); border-bottom: 1px solid var(--filet); padding-block: var(--e3); }
.echelle li span { flex: 0 0 96px; font-size: var(--t13); color: var(--gris); }
.liens-ecrans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
@media (min-width: 720px) { .liens-ecrans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .liens-ecrans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.liens-ecrans a {
  display: flex; gap: var(--e3); align-items: baseline;
  border: 1px solid var(--filet); border-radius: var(--r-s);
  padding: var(--e3) var(--e4); text-decoration: none; color: var(--encre);
  min-height: var(--cible); font-size: var(--t15);
}
.liens-ecrans a:hover { border-color: var(--canard); background: var(--lin); }
.liens-ecrans a b { color: var(--canard); font-family: var(--titre); flex: 0 0 auto; }

/* Colonne de filtres : tiroir sur mobile, colonne sur desktop */
.filtres-bureau { display: none; }
@media (min-width: 900px) {
  .filtres-bureau { display: block; position: sticky; top: 210px; }
  .bouton-filtres { display: none; }
}

@media (min-width: 900px) {
  .colonnes--outil { grid-template-columns: 420px minmax(0, 1fr); }
  .colonnes--voix  { grid-template-columns: 340px minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .colonnes--panier { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* ---------- 17. Détails repliables (historique de commande) ---------------- */
summary { cursor: pointer; }
summary.replier {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--cible);
  font-size: var(--t15); font-weight: 500; color: var(--canard);
}
summary.replier::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232B7A76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duree) var(--courbe);
}
details[open] > summary.replier::after { transform: rotate(180deg); }

/* Un bouton dont le libellé porte un prix ne laisse pas le « € » seul */
.bouton { text-wrap: balance; }