/* Aquaflux — composants de boutique.
 *
 * Panier, favoris, compte, carrousel de fiche. Les NOMS DE CLASSES et les
 * attributs `data-*` sont ceux de Valisio, parce que c'est son script qui les
 * pilote : le reprendre valait mieux que le réécrire, il tourne depuis des
 * semaines sur deux sites.
 *
 * Le STYLE, lui, est celui d'Aquaflux. La feuille de Valisio est un thème
 * sombre ambre ; la copier verbatim aurait importé ses hypothèses de couleur
 * dans un site clair. Ces règles sont donc écrites ici, avec les jetons
 * d'Aquaflux.
 */

/* ── le pont de jetons ────────────────────────────────────────────────────
 * Le script et les gabarits repris emploient les noms de Valisio. On les
 * définit une fois, en les faisant pointer sur la palette d'Aquaflux.
 * `--accent` n'est PAS redéfini : il vaut déjà le teal d'Aquaflux, et c'est
 * précisément ce qu'on veut voir dans ces composants. */
:root {
  --bg: var(--eau);
  --bg2: var(--voile);
  --surf: var(--blanc);
  --surf2: var(--voile);
  --surf3: var(--voile);
  --line: var(--filet);
  --line2: var(--filet-fort);
  --ink: var(--encre);
  --text: var(--gris);
  --muted: var(--pale);
  --accent2: var(--laiton);
  --accent-dim: var(--accent-voile);
  --ok: #1F7A4C;
  --ok-dim: #E1F0E8;
  --danger: var(--alerte);
  --display: var(--sans);
  --gutter: 24px;
  --maxw: var(--large);
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 18px 48px rgba(16, 32, 31, .14);
  --shadow-sm: 0 6px 20px rgba(16, 32, 31, .09);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .3s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ok: #5FBF8E; --ok-dim: #16302A;
    --shadow: 0 18px 48px rgba(0, 0, 0, .5);
    --shadow-sm: 0 6px 20px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --ok: #5FBF8E; --ok-dim: #16302A;
  --shadow: 0 18px 48px rgba(0, 0, 0, .5);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .4);
}

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

/* ── fil d'Ariane ─────────────────────────────────────────────────────── */
.breadcrumb {
  padding: 22px 0 0; font-size: var(--t-xs); color: var(--pale);
  display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline;
}
.breadcrumb a { color: var(--gris); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-hidden] { color: var(--filet-fort); }
.breadcrumb__actuel {
  color: var(--pale); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 46ch;
}

/* ── la fiche ─────────────────────────────────────────────────────────── */
.section.fiche { padding: 26px 0 8px; }
.fiche__grille {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 52px; align-items: start;
}

/* ── galerie : carrousel + vignettes ──────────────────────────────────── */
.galerie__cadre {
  position: relative; background: var(--blanc);
  aspect-ratio: 1; overflow: hidden;
}
/* Le script fait defiler la piste (`piste.scrollTo`) : sans `overflow-x`,
   l element n a pas de zone de defilement, `scrollLeft` reste a 0, et ni les
   fleches ni le balayage au doigt ne font quoi que ce soit. Le CSS precedent
   decrivait un carrousel en `transform` — une autre implementation, que le
   script n utilise pas. */
.galerie__piste {
  display: flex; height: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* PAS de `scroll-behavior: smooth` : mesure faite, il empeche l affectation
     de `scrollLeft` de prendre effet — la galerie ne changeait pas de photo.
     Le changement est instantane, ce qui est le comportement normal d une
     galerie produit. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.galerie__piste::-webkit-scrollbar { display: none; }
.galerie__piste:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.galerie__vue {
  flex: 0 0 100%; margin: 0; height: 100%;
  /* `start` et non `center` : une vue fait exactement la largeur du cadre, et
     les ancrages doivent tomber sur `offsetLeft`, que le script utilise. Avec
     `center`, scrollTo(614) atterrissait a 2454. */
  scroll-snap-align: start;
}
.galerie__vue img { width: 100%; height: 100%; object-fit: cover; }

.galerie__fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font-size: 21px; line-height: 1; color: var(--encre);
  background: color-mix(in srgb, var(--blanc) 88%, transparent);
  border: 1px solid var(--filet-fort);
  backdrop-filter: blur(4px);
}
.galerie__fleche:hover { color: var(--accent); border-color: var(--accent); }
.galerie__fleche--prec { left: 12px; }
.galerie__fleche--suiv { right: 12px; }
.galerie__fleche[disabled] { opacity: .3; cursor: default; }

.galerie__compteur {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--mono); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  padding: 4px 9px; color: var(--gris);
  background: color-mix(in srgb, var(--blanc) 88%, transparent);
  border: 1px solid var(--filet);
}

/* Le cœur des favoris, posé sur l'image. */
.btn-favori {
  position: absolute; right: 12px; top: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--blanc) 88%, transparent);
  border: 1px solid var(--filet-fort); color: var(--gris);
  backdrop-filter: blur(4px);
}
.btn-favori svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.btn-favori:hover { color: var(--accent); border-color: var(--accent); }
.btn-favori.est-favori { color: var(--alerte); border-color: var(--alerte); }
.btn-favori.est-favori svg { fill: currentColor; }

.galerie__vignettes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 9px; margin: 9px 0 0; padding: 0; list-style: none;
}
.galerie__vignette {
  padding: 0; border: 1px solid var(--filet); background: var(--blanc);
  cursor: pointer; aspect-ratio: 1; overflow: hidden; line-height: 0;
  display: block; width: 100%;
}
.galerie__vignette img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignette.est-active { border-color: var(--accent); }

/* ── colonne d'achat ──────────────────────────────────────────────────── */
.fiche__infos { position: sticky; top: 96px; }
.fiche__infos h1 {
  font-size: clamp(22px, 2.5vw, 31px); line-height: 1.14; margin: 12px 0 0;
}
.card__badge {
  display: inline-block; font-family: var(--mono);
  font-size: var(--t-xs); letter-spacing: .06em;
  padding: 3px 9px; border: 1px solid currentColor; border-radius: 2px;
}
.badge--ok { color: var(--ok); }
.badge--non { color: var(--pale); }

.fiche__prix {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 500; letter-spacing: -.02em;
  margin: 22px 0 0; display: flex; align-items: baseline; gap: 10px;
}
.fiche__prix small { font-family: var(--sans); font-size: var(--t-s); color: var(--pale); font-weight: 400; }

.fiche__achat { display: flex; gap: 10px; margin: 24px 0 0; align-items: stretch; }

/* Le sélecteur de quantité. */
.qty {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--filet-fort); border-radius: var(--radius-sm);
  background: var(--blanc); flex: 0 0 auto;
}
.qty button {
  width: 38px; border: 0; background: none; cursor: pointer;
  font-size: 17px; color: var(--gris); line-height: 1;
}
.qty button:hover { color: var(--accent); }
.qty input {
  width: 42px; border: 0; background: none; text-align: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-s); color: var(--encre);
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: var(--t-s); font-weight: 500;
  padding: 12px 20px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--encre); border-radius: var(--radius-sm);
  background: var(--encre); color: var(--eau);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--encre); border-color: var(--encre); color: var(--eau); }
.btn--ghost { background: none; color: var(--encre); border-color: var(--filet-fort); }
.btn--ghost:hover { background: none; color: var(--accent); border-color: var(--accent); }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 14px; font-size: var(--t-xs); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-favori-large { margin-top: 10px; }
.btn-favori-large.est-favori { color: var(--alerte); border-color: var(--alerte); }

/* ── réassurance de la fiche : QUATRE FAITS VÉRIFIÉS, pas des slogans ──── */
.fiche__reassurance {
  list-style: none; margin: 26px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--filet);
  display: grid; gap: 14px;
}
.fiche__reassurance li { display: grid; gap: 2px; }
.fiche__reassurance strong { font-size: var(--t-s); font-weight: 600; }
.fiche__reassurance span { font-size: var(--t-s); color: var(--gris); }

/* ── accordéons ───────────────────────────────────────────────────────── */
.fiche__accordeons { margin: 28px 0 0; }
.acc { border-top: 1px solid var(--filet); }
.acc:last-child { border-bottom: 1px solid var(--filet); }
.acc__titre {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0; cursor: pointer; font-size: var(--t-m);
  list-style: none;
}
.acc__titre::-webkit-details-marker { display: none; }
.acc__chevron {
  margin-left: auto; color: var(--accent); font-family: var(--mono);
  transition: transform var(--dur) var(--ease);
}
.acc__chevron::before { content: "+"; }
.acc[open] .acc__chevron::before { content: "–"; }
.acc__corps { padding: 0 0 18px; font-size: var(--t-s); line-height: 1.75; color: var(--gris); }
.acc__corps p { margin: 0 0 10px; }
.acc__corps ul { margin: 0 0 10px; padding-left: 18px; }
.acc__corps li { margin-bottom: 6px; }
.acc__corps strong { color: var(--encre); }
.acc__table { width: 100%; border-collapse: collapse; }
.acc__table th, .acc__table td {
  text-align: left; padding: 8px 0; border-bottom: 1px solid var(--filet);
  vertical-align: top; font-size: var(--t-s);
}
.acc__table th { font-weight: 400; color: var(--gris); width: 42%; }
.acc__table td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* La note qui dit d'où vient la valeur. Sans elle, une caractéristique
   fournisseur passerait pour une mesure de la boutique. */
.acc__note {
  margin: 12px 0 0; font-size: var(--t-xs); color: var(--pale);
  font-style: italic;
}

/* ── tiroirs : panier et favoris ──────────────────────────────────────── */
.voile {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 32, 31, .34);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
.voile.est-ouvert { opacity: 1; pointer-events: auto; }

.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(420px, 92vw);
  background: var(--eau); border-left: 1px solid var(--filet);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  box-shadow: var(--shadow);
}
.tiroir.est-ouvert { transform: none; }
.tiroir__tete {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--filet);
}
.tiroir__tete h2 { font-size: var(--t-l); }
.tiroir__fermer {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--gris); padding: 4px;
}
.tiroir__fermer:hover { color: var(--accent); }
.tiroir__corps { flex: 1; overflow-y: auto; padding: 18px 22px; }
.tiroir__pied { padding: 18px 22px; border-top: 1px solid var(--filet); }
.tiroir__note { font-size: var(--t-xs); color: var(--pale); margin-top: 10px; }
.tiroir .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-s); padding: 5px 0;
}
.tiroir .row strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tiroir__vide { color: var(--gris); font-size: var(--t-s); text-align: center; padding: 40px 0; }

/* Une ligne du panier, telle que le script la construit. */
.tiroir .ligne {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--filet); align-items: start;
}
.tiroir .ligne img { width: 62px; height: 62px; object-fit: cover; background: var(--blanc); }
.ligne__nom { font-size: var(--t-s); line-height: 1.35; text-decoration: none; }
.ligne__prix { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-s); }
.ligne__qte { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ligne__qte button {
  width: 24px; height: 24px; border: 1px solid var(--filet-fort);
  background: var(--blanc); cursor: pointer; color: var(--gris);
  border-radius: 2px; line-height: 1;
}
.ligne__qte button:hover { color: var(--accent); border-color: var(--accent); }
.ligne__sup { background: none; border: 0; color: var(--pale); cursor: pointer; font-size: var(--t-xs); }
.ligne__sup:hover { color: var(--alerte); }

/* La jauge de franco de port. Elle dit une information vérifiée : gratuite
   dès 80 €, 4,90 € en dessous. */
.ship-zone { margin: 0 0 16px; }
.ship-bar { height: 3px; background: var(--filet); overflow: hidden; }
.ship-bar__fill { display: block; height: 100%; background: var(--accent); transition: width var(--dur) var(--ease); }
.ship-bar__txt { font-size: var(--t-xs); color: var(--gris); margin-top: 7px; }

/* ── pastilles de compteur dans l'en-tête ─────────────────────────────── */
.entete__action {
  position: relative; background: none; border: 0; padding: 6px;
  cursor: pointer; color: var(--gris); line-height: 0;
}
.entete__action:hover { color: var(--accent); }
.entete__action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pastille {
  position: absolute; top: 0; right: 0;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 9.5px; line-height: 15px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.pastille[hidden] { display: none; }

/* ── toast ────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  z-index: 90; background: var(--encre); color: var(--eau);
  padding: 11px 20px; font-size: var(--t-s); border-radius: var(--radius-sm);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
}
.toast.est-visible { opacity: 1; transform: translateX(-50%); }

/* ── grilles de cartes (produits liés, favoris, panier) ───────────────── */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 34px 26px;
}
.card { display: flex; flex-direction: column; position: relative; }
.card__media { background: var(--blanc); aspect-ratio: 1; overflow: hidden; display: block; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: translateY(-2px) scale(1.035); }
.card__title {
  font-size: var(--t-s); line-height: 1.4; text-decoration: none; margin-top: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__buy { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--filet); }
.price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-s); }
.card__buy .btn--sm { margin-left: auto; }

/* ── comparateur ──────────────────────────────────────────────────────── */
.compare { margin: 56px 0 0; }
.compare__table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.compare__table th, .compare__table td {
  padding: 11px 12px; border-bottom: 1px solid var(--filet); text-align: left;
  vertical-align: top;
}
.compare__table thead th { font-weight: 600; font-size: var(--t-xs); color: var(--pale); text-transform: uppercase; letter-spacing: .06em; }
.compare__table td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.compare__table td.est-texte { font-family: var(--sans); }
.compare__actuel { background: var(--accent-voile); }
.compare__actuel th, .compare__actuel td { border-bottom-color: var(--filet-fort); }

/* Les regles `.reassurance-bar` ont ete retirees : c est leur
   `margin: 64px 0 0` qui ecrasait le `margin: 0 auto` de `.wrap` et
   decentrait le bandeau. Il est refait sous le nom `.bande-rassure`,
   plus bas dans cette feuille. */

/* ── pages panier, favoris, compte ────────────────────────────────────── */
.cart-empty { text-align: center; padding: 60px 0; color: var(--gris); }
.form-champ { display: grid; gap: 6px; margin-bottom: 14px; }
.form-champ label { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }
.form-champ input, .form-champ select {
  font: inherit; font-size: var(--t-s); padding: 10px 12px;
  border: 1px solid var(--filet-fort); border-radius: var(--radius-sm);
  background: var(--blanc); color: var(--encre);
}
.form-message { font-size: var(--t-s); margin-top: 10px; }
.form-message.est-erreur { color: var(--alerte); }
.form-message.est-ok { color: var(--ok); }
.onglets { display: flex; gap: 6px; border-bottom: 1px solid var(--filet); margin-bottom: 26px; }
.onglets button {
  font: inherit; font-size: var(--t-s); background: none; border: 0;
  padding: 11px 16px; cursor: pointer; color: var(--gris);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--accent); }

/* ── révélation au défilement ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .galerie__piste { scroll-snap-type: none; }
}

/* ── étroit ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .fiche__grille { grid-template-columns: 1fr; gap: 30px; }
  .fiche__infos { position: static; }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 16px; }
  .fiche__achat { flex-wrap: wrap; }
  .compare { overflow-x: auto; }
}

/* ── déclinaisons ─────────────────────────────────────────────────────────
 * Ces règles vivaient dans aquaflux.css, avec l ancienne fiche. Elles ont été
 * emportées quand ce bloc a été retiré : le générateur émet toujours ces
 * classes pour le choix des couleurs et des tailles. */
.axe { margin-top: 22px; }
.axe__titre {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pale); margin-bottom: 10px;
}
.axe__choisi { color: var(--encre); letter-spacing: 0; text-transform: none; font-size: var(--t-s); }
.axe__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  font: inherit; font-size: var(--t-s); cursor: pointer;
  padding: 8px 14px; background: var(--blanc);
  border: 1px solid var(--filet-fort); border-radius: var(--radius-sm);
  color: var(--encre);
}
.opt:hover { border-color: var(--accent); }
.opt.est-choisi { background: var(--encre); border-color: var(--encre); color: var(--eau); }
.opt[disabled] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.est-vide { color: var(--pale); }


/* ── la bannière d'accueil ────────────────────────────────────────────────
 * Pleine largeur, le H1 par-dessus. Le voile n'est pas un effet : sans lui,
 * un titre posé sur une photo de salle de bains claire devient illisible dès
 * que la photo change. Il se dégrade depuis la gauche, là où le texte se
 * pose, et laisse l'image nette à droite. */
.banniere {
  position: relative;
  min-height: clamp(380px, 52vw, 620px);
  display: grid; align-items: center;
  overflow: hidden; background: var(--voile);
}
.banniere__fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.banniere__voile {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(8, 18, 17, .80) 0%,
    rgba(8, 18, 17, .62) 34%,
    rgba(8, 18, 17, .20) 62%,
    rgba(8, 18, 17, .04) 100%);
}
/* `width: 100%` n est pas decoratif : `.large` porte `margin: 0 auto`, et
   DES MARGES AUTOMATIQUES SUR UN ELEMENT DE GRILLE ANNULENT L ETIREMENT. Le
   bloc se dimensionnait alors a son contenu (511 px) et se centrait, posant
   le titre au milieu de l image — hors de la zone sombre du voile. */
.banniere__contenu { position: relative; width: 100%; padding: 56px 24px; }
.banniere__eyebrow { color: #9FD8D2; }
.banniere__titre {
  color: #fff;
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: .98; letter-spacing: -.035em; font-weight: 600;
  margin: 14px 0 0; max-width: 15ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}
.banniere__signature {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 2.1vw, 25px); line-height: 1.35;
  color: rgba(255, 255, 255, .88);
  margin-top: 18px; max-width: 28ch;
}
.banniere__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.banniere .btn--ghost {
  color: #fff; border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .06);
}
.banniere .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.14); }

/* ── le méga-menu ─────────────────────────────────────────────────────────
 * Quatre familles dépliantes et trois collections directes : c'est la
 * structure que le marchand a rangée dans son menu WordPress. */
.nav__lien {
  font: inherit; font-size: var(--t-s); color: var(--gris);
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; white-space: nowrap;
}
.nav__lien:hover, .nav__lien.est-actif, .nav__lien[aria-expanded="true"] { color: var(--encre); }
.nav__chevron {
  width: 0; height: 0; margin-top: 2px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav__lien[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.mega {
  border-top: 1px solid var(--filet);
  background: var(--blanc);
  box-shadow: var(--shadow-sm);
}
.mega[hidden] { display: none; }
.mega__grille {
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
  padding-top: 24px; padding-bottom: 28px;
}
.mega__liens {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 26px;
}
.mega__liens a {
  display: block; padding: 6px 0; font-size: var(--t-s);
  color: var(--gris); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.mega__liens a:hover { color: var(--accent); border-bottom-color: var(--filet); }

@media (max-width: 900px) {
  .nav { display: none; }
  .mega { display: none; }
}


/* survol */
/* Le panneau est collé à la barre : le moindre interstice entre l'onglet et
   lui ferait passer la souris par un vide, et le menu se refermerait sous le
   curseur. */
.entete { position: sticky; }
.mega { margin-top: -1px; }
.nav__lien { padding-top: 14px; padding-bottom: 14px; margin: -14px 0; }

/* déclinaisons ─ le nom du fournisseur, sous le titre lisible.
   On ne le supprime pas : c est ce que le catalogue dit vraiment. On cesse
   seulement d en faire un H1 de 150 caracteres. */
.fiche__nom-source {
  margin: -4px 0 14px; color: var(--gris); font-size: var(--t-s);
  line-height: 1.5; max-width: 58ch;
}
/* Une option qui existe mais qui est en rupture : visible et cliquable, pour
   que l acheteur sache qu elle existe, mais clairement marquee. */
.opt.est-epuise {
  opacity: .55; text-decoration: line-through;
  border-style: dashed;
}
.axe__reste { align-self: center; color: var(--gris); font-size: var(--t-xs); }
/* Le bouton reste visible quand le choix est incomplet : il dit ce qui manque
   plutot que de disparaitre. */
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Une caracteristique que le fournisseur n a pas communiquee. On la laisse
   vide et on le dit, plutot que d avancer une valeur plausible. */
.inconnu { color: var(--gris); }
td .inconnu { cursor: help; }

/* ── action sur la vignette ───────────────────────────────────────────────
   Le bouton reste discret au repos et se revele au survol : sur 48 vignettes,
   48 boutons pleins feraient une grille de boutons, pas une grille de
   produits. Sur ecran tactile, il n y a pas de survol : il est toujours la. */
.piece { position: relative; display: flex; flex-direction: column; }
.piece__vue { position: relative; }
.piece__action {
  margin-top: 12px; width: 100%;
  background: none; border: 1px solid var(--filet); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: var(--t-s);
  color: var(--encre); cursor: pointer;
  transition: opacity .18s ease, border-color .18s ease, background .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .piece__action { opacity: 0; }
  .piece:hover .piece__action,
  .piece__action:focus-visible { opacity: 1; }
}
.piece__action:hover { border-color: var(--accent); color: var(--accent); }
.piece__action.est-ajoute {
  background: var(--encre); border-color: var(--encre); color: var(--eau);
  opacity: 1;
}
.piece__action.est-inerte {
  display: block; text-align: center; color: var(--pale);
  border-style: dashed; cursor: default;
}
.piece__favori {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(255,255,255,.86); border: 0; border-radius: 999px;
  color: var(--gris); cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}
.piece__favori svg { width: 17px; height: 17px; }
.piece__favori:hover { color: var(--accent); transform: scale(1.08); }
.piece__favori.est-actif { color: var(--accent); }
.piece__favori.est-actif svg { fill: currentColor; }

/* ── apercu rapide ────────────────────────────────────────────────────────
   Il ne recopie pas la fiche : il la charge et en reutilise le fragment. */
.apercu { position: fixed; inset: 0; z-index: 200; }
.apercu__voile {
  position: absolute; inset: 0;
  background: rgba(16, 30, 38, .52);
  backdrop-filter: blur(2px);
}
.apercu__boite {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(1020px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: auto;
  background: var(--eau); border-radius: 16px;
  padding: 30px clamp(18px, 3vw, 38px) 34px;
  box-shadow: 0 30px 80px rgba(16, 30, 38, .28);
}
.apercu__fermer {
  position: sticky; top: 0; float: right;
  width: 38px; height: 38px; border: 0; border-radius: 999px;
  background: var(--filet); color: var(--encre);
  font-size: 21px; line-height: 1; cursor: pointer;
}
.apercu__attente {
  text-align: center; color: var(--gris); padding: 70px 20px;
}
.apercu__lien {
  display: inline-block; margin-top: 22px;
  color: var(--accent); font-size: var(--t-s);
}
/* La galerie de la fiche tient dans la boite sans la faire deborder. */
.apercu .fiche__grille { padding: 0; }
.apercu .galerie__cadre { max-height: 46vh; }
@media (max-width: 780px) {
  .apercu__boite { inset: auto 0 0 0; transform: none;
    width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; }
}

.section__note { color: var(--gris); font-size: var(--t-s); margin-top: 6px; }



/* ── l en-tete sur deux lignes ────────────────────────────────────────────
   La recherche descend sur sa propre ligne, ouverte et centree. Deux raisons,
   dans cet ordre : elle passait AU-DESSUS du mega-menu — `.recherche` est en
   position: relative, le panneau en position: static, et un element positionne
   se peint toujours au-dessus — et elle prenait 132 px sur une premiere ligne
   qui n en avait pas. « Pommeaux de douche » s affichait « Pomme ». */
.entete__barre { gap: 22px; }
.entete__barre nav { min-width: 0; }
.nav { gap: 18px; flex-wrap: wrap; }
.entete__fin { gap: 8px; margin-left: auto; }

.entete__quete {
  display: flex; justify-content: center;
  padding: 0 0 13px;
}
.recherche {
  position: relative;
  width: min(560px, 100%);
}
.recherche input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  font-size: var(--t-s);
  border: 1px solid var(--filet-fort); border-radius: 999px;
  background: var(--blanc);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.recherche input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.recherche > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--pale);
  fill: none; stroke: currentColor; stroke-width: 1.7;
}
@media (min-width: 1100px) {
  .burger { display: none; }     /* il doublait un menu deja visible */
}

/* ── le mega-menu ─────────────────────────────────────────────────────────
   L ancien : un titre en majuscules et une liste a puces. Le nouveau tient sur
   trois zones — le rayon nomme, ses collections en colonnes, une vignette
   prise dans le rayon lui-meme. Le z-index est explicite : c est ce qui
   manquait pour qu il ne repasse jamais sous un element positionne. */
.mega {
  position: relative; z-index: 60;
  margin-top: -1px;
  background: var(--blanc);
  border-top: 1px solid var(--filet);
  box-shadow: 0 22px 44px -20px rgba(16, 32, 31, .26);
}
.mega__grille {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr) 232px;
  gap: 40px;
  align-items: start;
  padding-top: 30px; padding-bottom: 32px;
}
.mega__intro {
  border-right: 1px solid var(--filet);
  padding-right: 34px; min-height: 108px;
}
/* La meme italique que le logo : c est ce qui rattache le panneau a la marque
   plutot qu a un composant generique. */
.mega__famille {
  font-family: var(--serif); font-style: italic;
  font-size: 27px; line-height: 1.14; color: var(--encre);
  letter-spacing: -.01em;
}
.mega__compte {
  margin-top: 7px; color: var(--pale); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}
.mega__tout {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-bottom: 3px;
  color: var(--accent); font-size: var(--t-s); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.mega__tout svg { width: 15px; height: 9px; transition: transform .18s ease; }
.mega__tout:hover { border-bottom-color: var(--accent); }
.mega__tout:hover svg { transform: translateX(3px); }

.mega__liens {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr));
  gap: 2px 30px;
}
.mega__liens a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 0; border-radius: 7px;
  color: var(--gris); font-size: var(--t-s); text-decoration: none;
  transition: color .15s ease, padding .18s ease;
}
.mega__liens a span { min-width: 0; }
/* La fleche n apparait qu au survol : au repos la colonne reste une liste
   calme, sans une rangee de chevrons qui font du bruit. */
.mega__liens svg {
  width: 15px; height: 9px; flex: none;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
.mega__liens a:hover, .mega__liens a:focus-visible {
  color: var(--encre); padding-left: 6px;
}
.mega__liens a:hover svg, .mega__liens a:focus-visible svg {
  opacity: 1; transform: translateX(0);
}

.mega__vitrine {
  display: block; overflow: hidden; border-radius: 11px;
  aspect-ratio: 4 / 3; background: var(--voile, rgba(16,32,31,.04));
}
.mega__vitrine img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.mega__vitrine:hover img { transform: scale(1.045); }

/* Une ouverture posee, pas un surgissement. */
@media (prefers-reduced-motion: no-preference) {
  .mega:not([hidden]) { animation: mega-entre .2s cubic-bezier(.2,.7,.3,1); }
  @keyframes mega-entre {
    from { opacity: 0; transform: translateY(-7px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 1080px) {
  .mega__grille { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
  .mega__vitrine { display: none; }
}
@media (max-width: 820px) {
  .entete__quete { padding-bottom: 11px; }
  .mega { display: none; }        /* le tiroir a plat prend le relais */
}


/* ═════════════════════════════════════════════════ la page d accueil
   Fil conducteur : l eau comme matiere. Trois gestes reviennent, et rien
   d autre — une surface qui ondule entre les sections, un lavis radial qui
   imite les caustiques au fond d un bassin, et des images qui se dilatent
   doucement au survol. Pas de gouttes en clipart : le sujet est deja mouille.

   Les teintes sont derivees des jetons existants (--accent, --eau, --encre) ;
   une seule est ajoutee, --marine, pour la bande sombre. */

:root {
  --marine: #0A3236;
  --lavis: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ── la vague, motif recurrent ─────────────────────────────────────────── */
.rsr-bande__vague, .vague {
  position: absolute; left: 0; right: 0; line-height: 0;
  pointer-events: none;
}
.rsr-bande__vague { top: -1px; }
.rsr-bande__vague.est-retournee { top: auto; bottom: -1px; transform: scaleY(-1); }
.rsr-bande__vague svg { display: block; width: 100%; height: 42px; }
.rsr-bande__vague path { fill: var(--eau); }

/* ── les tetes de section ──────────────────────────────────────────────── */
.tete-section { margin-bottom: 30px; max-width: 62ch; }
/* L italique du logo, reprise comme voix : c est ce qui rattache la page a la
   marque plutot qu a un gabarit generique. */
.tete-section__sur {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--accent); margin-bottom: 6px;
}
.tete-section__titre {
  font-size: clamp(25px, 3vw, 34px); letter-spacing: -.02em;
  line-height: 1.14; text-wrap: balance;
}
.tete-section__note {
  margin-top: 11px; color: var(--gris); font-size: var(--t-s);
  line-height: 1.6; max-width: 54ch;
}

/* ── la reassurance ────────────────────────────────────────────────────── */
.rsr-bande {
  position: relative; background: var(--marine); color: #EAF2F1;
  padding: 74px 0 78px; margin: 8px 0 0;
  /* Les caustiques : deux lavis larges, tres peu opaques. Ils ne se lisent pas
     comme des taches mais donnent a la surface une profondeur d eau. */
  background-image:
    radial-gradient(1100px 460px at 12% -10%, rgba(120, 220, 214, .16), transparent 62%),
    radial-gradient(900px 420px at 88% 110%, rgba(11, 122, 122, .34), transparent 60%);
}
.rsr-grille {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
}
.rsr {
  border-left: 1px solid rgba(234, 242, 241, .16);
  padding-left: 22px;
}
.rsr__icone {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(234, 242, 241, .1);
  color: #9FE3DC; margin-bottom: 15px;
}
.rsr__icone svg { width: 20px; height: 20px; }
.rsr__titre {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .11em;
  color: #9FE3DC; font-weight: 500; margin-bottom: 9px;
}
.rsr__texte {
  font-size: var(--t-s); line-height: 1.62; color: rgba(234, 242, 241, .9);
}
.rsr__texte a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rsr-bande__note {
  margin-top: 34px; font-size: var(--t-xs);
  color: rgba(234, 242, 241, .5); max-width: 60ch;
}

/* ── les rayons en images ──────────────────────────────────────────────── */
.section { padding: 76px 0; }
.section--selection { background: var(--lavis); }

.rayons { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); }
.rayon {
  position: relative; grid-column: span 2;
  text-decoration: none; color: inherit;
  border-radius: 14px; overflow: hidden;
  /* Clair, pas sombre : c est la couleur vue AVANT que l image arrive. Avec
     `--encre`, une tuile en cours de chargement etait un aplat noir. */
  background: color-mix(in srgb, var(--encre) 7%, var(--eau));
}
.rayon--large { grid-column: span 6; }
.rayon__cadre { display: block; aspect-ratio: 4 / 3; }
.rayon--large .rayon__cadre { aspect-ratio: 21 / 8; }
.rayon__cadre img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .62s cubic-bezier(.2,.7,.3,1);
}
.rayon:hover .rayon__cadre img { transform: scale(1.055); }
/* Le degrade monte du bas : le nom se pose sur l image sans la masquer, et
   reste lisible quelle que soit la photo. */
.rayon__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 26, 28, .82) 0%,
              rgba(8, 26, 28, .34) 34%, rgba(8, 26, 28, 0) 62%);
}
.rayon__pose {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px 20px; color: #fff;
}
.rayon__nom { font-size: 17px; letter-spacing: -.01em; }
.rayon--large .rayon__nom { font-size: 22px; }
.rayon__n {
  font-size: var(--t-xs); color: rgba(255, 255, 255, .68);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rayon__fleche {
  margin-left: auto; align-self: center;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(255, 255, 255, .15);
  opacity: 0; transform: translateX(-5px);
  transition: opacity .2s ease, transform .2s ease;
}
.rayon__fleche svg { width: 15px; height: 9px; }
.rayon:hover .rayon__fleche { opacity: 1; transform: none; }

/* ── les cartes de la sélection ────────────────────────────────────────── */
.cartes {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}
.carte {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--blanc); border-radius: 13px; overflow: hidden;
  border: 1px solid var(--filet);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px rgba(16, 32, 31, .3);
}
.carte__cadre { display: block; aspect-ratio: 1; background: var(--eau); }
.carte__cadre img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.carte__corps {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 16px 17px;
}
.carte__nom {
  font-size: var(--t-s); line-height: 1.4; color: var(--encre);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.carte__teintes { display: flex; align-items: center; gap: 5px; }
.carte__teinte {
  width: 13px; height: 13px; border-radius: 999px;
  border: 1px solid rgba(16, 32, 31, .16);
}
.carte__plus {
  font-size: 11px; color: var(--pale); margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.carte__prix {
  margin-top: auto; font-size: 16px; color: var(--encre);
  font-variant-numeric: tabular-nums;
}

/* ── les finitions ─────────────────────────────────────────────────────── */
.finitions { display: flex; flex-wrap: wrap; gap: 11px; }
.finition {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: 999px; padding: 9px 16px 9px 10px;
  color: var(--encre); font-size: var(--t-s); text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.finition:hover { border-color: var(--accent); transform: translateY(-1px); }
.finition__pastille {
  width: 19px; height: 19px; border-radius: 999px; flex: none;
  border: 1px solid rgba(16, 32, 31, .14);
}
.finition--noir   { background: #1B1B1B; }
.finition--chrome { background: linear-gradient(135deg, #E8EDEF, #A9B6BC 52%, #F2F6F7); }
.finition--brosse { background: linear-gradient(135deg, #CFD5D6, #9BA5A7); }
.finition--dore   { background: linear-gradient(135deg, #E8C87A, #B8912F); }
.finition--blanc  { background: #FBFBFA; }
.finition--bronze { background: linear-gradient(135deg, #A9754C, #6E4526); }
.finition--argent { background: linear-gradient(135deg, #EDEFF0, #B9C0C3); }
.finition--nickel { background: linear-gradient(135deg, #DDE2E1, #9AA6A5); }
.finition--autre  { background: var(--filet); }
.finition__n {
  font-size: var(--t-xs); color: var(--pale);
  font-variant-numeric: tabular-nums;
}

/* ── la bande editoriale ───────────────────────────────────────────────── */
.bande {
  position: relative; overflow: hidden;
  min-height: 380px; display: grid; align-items: center;
  color: #fff; padding: 74px 0;
}
.bande__fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.bande__voile {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(92deg, rgba(10, 50, 54, .88) 0%,
              rgba(10, 50, 54, .62) 44%, rgba(10, 50, 54, .12) 100%);
}
.bande__contenu { position: relative; z-index: 2; max-width: 46ch; }
.bande__titre {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1;
  letter-spacing: -.015em; text-wrap: balance;
}
.bande__texte {
  margin: 15px 0 25px; font-size: var(--t-s);
  line-height: 1.68; color: rgba(255, 255, 255, .88);
}
.btn--clair {
  /* Les deux cotes viennent de jetons : melanger `#fff` et `var(--encre)`
     s est retourne le jour ou la palette a bascule — blanc sur blanc. */
  background: var(--encre); color: var(--eau); border: 0;
}
.btn--clair:hover { background: var(--laiton); color: var(--eau); }

@media (max-width: 900px) {
  .rayons { grid-template-columns: repeat(2, 1fr); }
  .rayon, .rayon--large { grid-column: span 1; }
  .rayon--large .rayon__cadre { aspect-ratio: 4 / 3; }
  .section { padding: 54px 0; }
  .rsr-bande { padding: 58px 0 62px; }
  .rsr { border-left: 0; padding-left: 0; }
}

/* ── les moyens de paiement ───────────────────────────────────────────────
   Le bloc du full code de Valisio, repris tel quel : meme structure, memes
   fichiers, meme facture. Seuls les jetons changent — `--line` devient
   `--filet`, la duree et la courbe sont ecrites en clair. */
.payment-icons {
  padding: 24px 0 6px;
  border-top: 1px solid var(--filet);
  margin-top: 30px;
}
.payment-icons__scroller {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.payment-icons__scroller::-webkit-scrollbar { display: none; }
.pied .payment-icons__list,
.payment-icons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  min-width: min-content;
}
.payment-icons__item { flex-shrink: 0; }
.payment-icons__item img {
  height: 30px;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(16, 32, 31, .18);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.payment-icons__item img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 32, 31, .22);
}
.payment-icons__link {
  text-align: center; margin: 12px 0 0; font-size: 13px;
}
.payment-icons__link a { color: var(--accent); font-weight: 600; }

/* Les moyens de paiement dans la colonne d une fiche : elle fait environ
   400 px, la rangee complete en demande 500. On passe a la ligne plutot que de
   faire defiler. */
.payment-icons--fiche {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--filet);
}
.payment-icons__mot {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--pale); margin-bottom: 11px;
}
.payment-icons--fiche .payment-icons__list {
  flex-wrap: wrap; gap: 9px; justify-content: flex-start;
}
.payment-icons--fiche .payment-icons__item img { height: 26px; }


/* ═════════════════════════════════════════════════ PASSE MOBILE
   Tout ce qui suit vient d une mesure a 360 px, pas d une supposition. */

/* ── les tuiles de rayon ─────────────────────────────────────────────────── */
@media (max-width: 620px) {
  /* Une seule colonne : a deux colonnes, chaque tuile fait 170 px et
     « Accessoires pour robinet » y tient sur trois lignes. */
  .rayons { grid-template-columns: 1fr; gap: 13px; }
  .rayon, .rayon--large { grid-column: span 1; }
  .rayon__cadre, .rayon--large .rayon__cadre { aspect-ratio: 16 / 10; }
  .rayon__nom, .rayon--large .rayon__nom { font-size: 17px; }
}
@media (max-width: 900px) {
  /* Le nom et le compte s empilent : en ligne, le compte etait coupe
     (« 1 355 modè… ») faute de place. */
  .rayon__pose {
    flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 15px 16px;
  }
  .rayon__n { white-space: normal; }
  /* Le degrade doit couvrir deux lignes de texte, pas une. */
  .rayon__voile {
    background: linear-gradient(to top, rgba(8, 26, 28, .88) 0%,
                rgba(8, 26, 28, .5) 42%, rgba(8, 26, 28, 0) 72%);
  }
}
@media (hover: none) {
  /* La fleche est une marque de survol. Sans survol elle ne dit rien, et elle
     debordait de la tuile (380 px pour une vue de 360). */
  .rayon__fleche { display: none; }
}

/* ── la grille de produits ────────────────────────────────────────────────
   `minmax(216px, 1fr)` ne laisse passer qu une colonne dans 336 px utiles :
   la page d accueil faisait 16 375 px de haut. Deux colonnes, comme toute
   boutique sur telephone. */
@media (max-width: 640px) {
  .grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 12px;
  }
  .piece__nom { font-size: 13px; line-height: 1.35; }
  .piece__prix { font-size: 15px; }
  .piece__decl { display: none; }   /* pas la place, et c est redit sur la fiche */
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .carte__corps { padding: 11px 12px 13px; }
  .carte__nom { font-size: 12.5px; }
  .carte__prix { font-size: 14px; }
}

/* ── les moyens de paiement ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Elles passent a la ligne plutot que de defiler : un defilement lateral
     dont on ne voit pas le debut cache la moitie des moyens acceptes. */
  .payment-icons__scroller { overflow-x: visible; }
  .pied .payment-icons__list,
  .payment-icons__list { flex-wrap: wrap; gap: 8px; }
  .payment-icons__item img { height: 26px; }
}

/* ── respirations ────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .tete-section { margin-bottom: 22px; }
  .bande { min-height: 300px; padding: 54px 0; }
  .finitions { gap: 8px; }
  .finition { padding: 8px 13px 8px 9px; }
}


/* ═════════════════════════════════════════ le filtre, modele Valisio
   Ma version precedente — une rangee de menus deroulants — demandait 441 px
   pour 348 disponibles sur telephone : le dernier menu sortait de l ecran.
   Le modele de Valisio n a pas ce probleme, parce que rien n est en ligne :
   un panneau lateral sur grand ecran, un tiroir plein ecran sur telephone. */

/* ── la barre d outils ─────────────────────────────────────────────────── */
.barre-outils {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--filet);
}
.btn--sm {
  background: var(--blanc); color: var(--encre);
  border: 1px solid var(--filet); border-radius: 9px;
  padding: 9px 14px; font: inherit; font-size: var(--t-s);
  cursor: pointer; min-height: 40px;
}
.btn--sm:hover { border-color: var(--pale); }
.barre-outils__compte { color: var(--gris); font-size: var(--t-s); }
.barre-outils__compte strong {
  color: var(--encre); font-variant-numeric: tabular-nums;
}
.barre-outils__tri {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  color: var(--gris); font-size: var(--t-s);
}
.barre-outils__tri select {
  background: var(--blanc); color: var(--encre);
  border: 1px solid var(--filet); border-radius: 9px;
  padding: 9px 12px; font: inherit; font-size: var(--t-s); min-height: 40px;
}
.barre-outils__tri select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.barre-outils__filtre-mobile { display: none; }

/* ── deux colonnes ─────────────────────────────────────────────────────── */
.collection {
  display: grid; grid-template-columns: 268px minmax(0, 1fr);
  gap: 32px; align-items: start;
}
.collection--pleine { grid-template-columns: minmax(0, 1fr); }

/* ── le panneau ────────────────────────────────────────────────────────── */
.panneau-filtres {
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: 12px; padding: 20px;
  position: sticky; top: calc(var(--h-entete, 0px) + 16px);
  max-height: calc(100vh - var(--h-entete, 0px) - 32px);
  overflow-y: auto;
}
.panneau-filtres--masque { display: none; }
.panneau-filtres--chargement { opacity: .6; pointer-events: none; }
.panneau-filtres__tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.panneau-filtres__tete h2 { font-size: 17px; font-weight: 600; color: var(--encre); margin: 0; }
.panneau-filtres__fermer,
.panneau-filtres__voir { display: none; }
.lien-reinit {
  background: none; border: 0; color: var(--pale); font: inherit;
  font-size: var(--t-xs); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.lien-reinit:hover { color: var(--accent); }

/* ── une facette ───────────────────────────────────────────────────────── */
.facette { border-top: 1px solid var(--filet); padding-block: 6px; }
.facette__titre {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; padding-block: 12px;
  font-size: 14.5px; font-weight: 600; color: var(--encre);
}
.facette__titre::-webkit-details-marker { display: none; }
.facette__chevron {
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--pale); border-bottom: 1.5px solid var(--pale);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s cubic-bezier(.2,.7,.3,1); flex-shrink: 0;
}
.facette[open] .facette__chevron { transform: rotate(-135deg) translateY(-2px); }
.facette__corps { padding-bottom: 14px; display: grid; gap: 2px; }
.facette__ligne {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-radius: 8px; cursor: pointer;
  font-size: var(--t-s); color: var(--gris);
  transition: background .18s ease;
}
.facette__ligne:hover { background: color-mix(in srgb, var(--encre) 4%, transparent); }
.facette__ligne input {
  accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0;
}
.facette__nom { flex: 1; min-width: 0; }
.facette__compte {
  color: var(--pale); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.facette__teinte {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--filet); flex-shrink: 0;
}
.facette__prix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.facette__prix label { display: grid; gap: 5px; font-size: 12.5px; color: var(--pale); }
.facette__prix input {
  background: var(--eau); color: var(--encre);
  border: 1px solid var(--filet); border-radius: 8px;
  padding: 9px 10px; font: inherit; font-size: var(--t-s);
  min-height: 40px; width: 100%;
}
.facette__prix input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.facette__note { color: var(--pale); font-size: 12.5px; margin: 10px 0 0; }
.facette__note--js { border-top: 1px solid var(--filet); padding-top: 12px; }

.pagination { display: flex; gap: 12px; justify-content: center; margin-top: 44px; }
.pagination__etat { text-align: center; color: var(--pale); font-size: var(--t-xs); margin-top: 14px; }
.vide { text-align: center; color: var(--gris); padding: 60px 20px; }

@media (max-width: 900px) {
  /* Le panneau devient un tiroir plein ecran, ouvert par le bouton pastille.
     Rien ne peut plus deborder : plus rien n est pose en ligne. */
  .collection { grid-template-columns: minmax(0, 1fr); }
  [data-bascule-filtre] { display: none; }
  .barre-outils__filtre-mobile {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--blanc); border: 1px solid var(--filet-fort);
    border-radius: 999px; color: var(--encre);
    font: inherit; font-size: var(--t-s); font-weight: 600;
    padding: 11px 18px; min-height: 44px; cursor: pointer;
  }
  .barre-outils__filtre-mobile svg { width: 17px; height: 17px; }
  .barre-outils__filtre-mobile .pastille {
    background: var(--accent); color: #fff; border-radius: 999px;
    font-size: 11px; font-weight: 700; padding: 1px 7px;
  }
  .panneau-filtres {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    border: 0; border-radius: 0; max-height: none;
    padding: 20px 20px 92px; overflow-y: auto;
  }
  .panneau-filtres.est-ouvert { display: block; }
  .panneau-filtres__tete { margin-bottom: 14px; padding-right: 44px; }
  .panneau-filtres__tete h2 { font-size: 21px; }
  .panneau-filtres__fermer {
    display: grid; place-items: center;
    position: absolute; top: 14px; right: 14px;
    width: 38px; height: 38px; border: 0; border-radius: 999px;
    background: var(--eau); color: var(--encre); font-size: 22px;
    line-height: 1; cursor: pointer;
  }
  /* Le bouton de sortie reste sous le pouce : sur une liste de facettes longue,
     remonter chercher une croix en haut est le geste qu on ne fait pas. */
  .panneau-filtres__voir {
    display: block;
    position: fixed; left: 16px; right: 16px; bottom: 16px;
    box-shadow: 0 8px 24px -8px rgba(16, 32, 31, .4);
  }
  .barre-outils { gap: 12px; }
  .barre-outils__tri { margin-left: auto; }
}
@media (max-width: 640px) {
  .barre-outils__tri { margin-left: 0; width: 100%; }
  .barre-outils__tri select { flex: 1; }
}


/* ═════════════════════════════════════════ l accueil, deuxieme passe
   Le mouvement est lent a dessein : a cette echelle il se sent plus qu il ne
   se voit, ce qui est l effet d une surface d eau. Tout est neutralise par
   `prefers-reduced-motion` — le mouvement est un plus, pas une condition. */

/* ── la banniere ────────────────────────────────────────────────────────── */
.banniere { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  /* 4 % en 18 secondes : le cadre ne « bouge » pas, il respire. */
  .banniere__fond { animation: respire 18s ease-in-out infinite alternate; }
  @keyframes respire {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
  }
}
/* Deux voiles de lumiere qui derivent : les caustiques d un fond de bassin. */
.banniere__caustiques {
  position: absolute; inset: -14%; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light; opacity: .65;
  background:
    radial-gradient(38% 26% at 22% 30%, rgba(255,255,255,.85), transparent 68%),
    radial-gradient(30% 22% at 74% 62%, rgba(190,240,238,.72), transparent 66%),
    radial-gradient(26% 30% at 52% 84%, rgba(255,255,255,.5), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .banniere__caustiques { animation: derive 26s ease-in-out infinite alternate; }
  @keyframes derive {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
  }
}
.banniere__contenu { position: relative; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  /* Entree decalee : le regard suit l ordre de lecture au lieu de tout
     recevoir d un coup. */
  .banniere__eyebrow, .banniere__titre,
  .banniere__signature, .banniere__actions {
    animation: monte .72s cubic-bezier(.2,.7,.25,1) backwards;
  }
  .banniere__eyebrow   { animation-delay: .05s; }
  .banniere__titre     { animation-delay: .15s; }
  .banniere__signature { animation-delay: .28s; }
  .banniere__actions   { animation-delay: .4s; }
  @keyframes monte {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}
/* L invitation a descendre : discrete, et elle disparait des qu on a compris. */
.banniere__suite {
  position: absolute; left: 50%; bottom: 20px; z-index: 3;
  transform: translateX(-50%);
  display: grid; place-items: center; gap: 7px;
  color: rgba(255,255,255,.8); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .4s ease;
}
.banniere__suite svg { width: 15px; height: 22px; }
body.a-defile .banniere__suite { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .banniere__suite svg { animation: descend 2.2s ease-in-out infinite; }
  @keyframes descend {
    0%, 100% { transform: translateY(0); opacity: .75; }
    50%      { transform: translateY(5px); opacity: 1; }
  }
}

/* ── les chiffres ───────────────────────────────────────────────────────── */
.chiffres {
  padding: 58px 0;
  background: var(--blanc);
  border-block: 1px solid var(--filet);
}
.chiffres__grille {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.chiffre-case { text-align: center; }
.chiffre-case__n {
  display: block;
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1;
  letter-spacing: -.03em; color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.chiffre-case__mot {
  display: block; margin-top: 9px;
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--accent);
}
.chiffre-case__note {
  display: block; margin-top: 4px;
  font-size: var(--t-xs); color: var(--pale);
}

/* ── les revelations au defilement ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity .62s cubic-bezier(.2,.7,.25,1),
                transform .62s cubic-bezier(.2,.7,.25,1);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  /* La cascade : chaque element part un cran apres son voisin. */
  .reveal--1 { transition-delay: .06s; }
  .reveal--2 { transition-delay: .12s; }
  .reveal--3 { transition-delay: .18s; }
  .reveal--4 { transition-delay: .24s; }
  .reveal--5 { transition-delay: .3s; }
}

/* ── les finitions, plus tactiles ───────────────────────────────────────── */
.finition { padding: 10px 18px 10px 11px; }
.finition__pastille {
  width: 26px; height: 26px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.55),
              inset 0 -2px 4px rgba(16,32,31,.16);
}
.finition__nom { font-size: var(--t-s); }


/* ═════════════════════════════════════════ la banniere de reassurance
   Quatre paragraphes gris alignes a gauche se lisaient comme des mentions
   legales. Centres sous une icone, separes par des filets, ils se lisent comme
   quatre engagements. */
.rassure {
  list-style: none;
  margin: 30px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--filet);
  display: grid; gap: 24px 14px;
  /* Deux par deux : la colonne de la fiche fait ~570 px, ou trois colonnes
     tiennent — et le quatrieme engagement se retrouvait seul sur sa ligne. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rassure li:nth-child(odd) { border-left: 0; }
.rassure li {
  display: grid; justify-items: center; align-content: start; gap: 0;
  text-align: center; padding: 0 12px;
  border-left: 1px solid var(--filet);
}
.rassure li:first-child { border-left: 0; }
.rassure__icone {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); margin-bottom: 11px;
}
.rassure__icone svg { width: 19px; height: 19px; }
.rassure strong {
  font-size: var(--t-s); font-weight: 600; color: var(--encre);
  margin-bottom: 5px;
}
.rassure__texte {
  font-size: var(--t-xs); line-height: 1.55; color: var(--gris);
  text-wrap: pretty;
}
@media (max-width: 620px) {
  .rassure { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .rassure li { border-left: 0; padding: 0; }
}


  .comparatif tbody th { padding-right: 10px; }
}


/* ═════════════════════════════════════════ le comparatif, modele Valisio
   Bordures franches, photo de 90 px, « Modele affiche » sur la colonne
   courante. Sous 620 px on fait defiler le tableau plutot que de l ecraser :
   six colonnes serrees dans 360 px ne se lisent pas. */
.compare { overflow-x: auto; }
.compare__table {
  width: 100%; min-width: 620px;
  border-collapse: collapse; margin-top: 26px;
}
.compare__table th, .compare__table td {
  border: 1px solid var(--filet);
  padding: 13px 14px; font-size: 13.5px;
  text-align: left; vertical-align: top;
}
.compare__table thead th { background: var(--blanc); text-align: center; }
.compare__table thead a { display: block; color: var(--encre); text-decoration: none; }
.compare__table thead a:hover span { color: var(--accent); }
.compare__table thead img {
  width: 90px; height: 90px; object-fit: contain;
  background: var(--eau); border-radius: 8px;
  margin: 0 auto 9px; display: block;
}
.compare__table thead span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12.5px; line-height: 1.35;
}
.compare__actuel {
  display: block; margin-top: 7px;
  font-size: 11px; font-style: normal;
  text-transform: uppercase; letter-spacing: .05em; color: var(--accent);
}
.compare__table tbody th {
  color: var(--pale); font-weight: 500;
  background: color-mix(in srgb, var(--encre) 3%, transparent);
  white-space: nowrap;
}
.compare__table tbody td { color: var(--encre); }


/* ══════════════════════════════════════════════════════════════════════════
   LE DESIGN ABYSSAL
   Repris de `test design aquaflux.html`, branché sur le contrat de classes
   existant. Structure et contenu inchangés — seul le vêtement change.
   ══════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body { background: var(--eau); color: var(--encre); }
::selection { background: var(--accent); color: var(--eau); }

/* ── la typographie ─────────────────────────────────────────────────────
   Cormorant Garamond porte le display, Inter le texte. C est le contraste de
   la maquette : une serif ample et claire sur un fond profond. */
h1, h2, h3,
.banniere__titre, .tete-section__titre, .section__tete h2,
.mega__famille, .chiffre-case__n, .compare__table thead span {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.005em;
}
.banniere__titre {
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1.02;
}
.tete-section__titre, .section__tete h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.12;
}
/* Les micro-libelles : capitales espacees, en cyan. Ils rythment la page sans
   ajouter de couleur. */
.etiquette, .tete-section__sur, .rsr__titre,
.filtres__tri-mot, .paiements__mot, .payment-icons__mot {
  font-family: var(--sans);
  font-size: .68rem; letter-spacing: .45em; text-transform: uppercase;
  color: var(--laiton);
}
.tete-section__sur {
  display: flex; align-items: center; gap: 16px; font-style: normal;
}
.tete-section__sur::before {
  content: ''; width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--laiton), transparent);
}

/* ── le bandeau du haut : les faits verifies defilent ────────────────────
   La maquette fait defiler ses arguments. Les notres sont ceux du fichier de
   verite — livraison, retours — pas des promesses ajoutees pour l effet. */
.bandeau-haut {
  background: var(--blanc);
  color: var(--gris);
  border-bottom: 1px solid var(--filet);
  font-size: .72rem; letter-spacing: .18em;
}
.bandeau-haut span { color: var(--laiton); }

/* ── l en-tete ──────────────────────────────────────────────────────────
   Transparente au repos, vitree des qu on descend. */
.entete {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  /* `backdrop-filter` a ete RETIRE de la transition : flouter un fond en
     l animant sur 400 ms, sur une barre fixee en haut de l ecran, oblige le
     navigateur a recomposer toute la zone a chaque image du defilement. */
  transition: background .4s ease, border-color .4s ease;
}
.entete.header--scrolled, .entete.est-vitree {
  background: rgba(1, 8, 20, .86);
  /* 10 px et non 20 : le cout d un flou croit avec son rayon, et a cette
     opacite de fond la difference ne se voit pas. */
  backdrop-filter: blur(10px) saturate(1.35);
  border-bottom-color: var(--filet);
}
.marque { font-family: var(--serif); font-size: 1.7rem; letter-spacing: .12em; }
.marque em { color: var(--laiton); }
.nav__lien {
  /* .085em et non .22em : sept entrees en capitales, dont « Accessoires Salle
     De Bain », ne tiennent pas sur une ligne a l espacement de la maquette.
     .12em ne suffisait pas — il manquait encore 40 px, et « Pommeaux de
     douche » finissait sous l icone du compte. */
  font-size: .66rem; letter-spacing: .085em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--gris); position: relative; white-space: nowrap;
}
.nav__lien:hover, .nav__lien.est-actif { color: var(--encre); }
/* Le trait qui s ouvre depuis le centre. */
.nav__lien::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--laiton), var(--accent));
  border-radius: 2px;
  transition: width .4s cubic-bezier(.77,0,.18,1), left .4s cubic-bezier(.77,0,.18,1);
}
.nav__lien:hover::after { width: calc(100% - 4px); left: 2px; }

/* ── la banniere ────────────────────────────────────────────────────────── */
.banniere { min-height: 88vh; }
.banniere__voile {
  background: linear-gradient(92deg, rgba(1,8,20,.9) 0%, rgba(1,8,20,.6) 46%,
              rgba(1,8,20,.15) 100%);
}
/* La profondeur : ce qui donne l impression de regarder SOUS la surface. */
.banniere__profondeur {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(56,189,248,.2), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(6,42,74,.9), transparent);
}
/* Les rais de lumiere qui traversent l eau. */
.banniere__rais {
  position: absolute; top: -10%; left: 50%; z-index: 2;
  width: 1400px; height: 900px; opacity: .5;
  mix-blend-mode: screen; pointer-events: none;
  background:
    linear-gradient(105deg, transparent 46%, rgba(94,234,212,.08) 48%, transparent 51%),
    linear-gradient(95deg, transparent 40%, rgba(56,189,248,.06) 43%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(94,234,212,.07) 58%, transparent 62%);
}
#eauCanvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Les ondes concentriques, comme une goutte tombee au centre. */
.onde {
  /* Taille FIXE, agrandie par `transform`. L animation faisait auparavant
     passer `width` et `height` de 200 a 1400 px : une mise en page complete a
     chaque image, sur trois elements, sans fin. */
  position: absolute; top: 50%; left: 50%; width: 200px; height: 200px;
  border-radius: 50%; z-index: 2; will-change: transform, opacity;
  border: 1px solid rgba(56,189,248,.22); pointer-events: none;
}
.bulle {
  position: absolute; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.45),
              rgba(56,189,248,.07) 60%);
  border: 1px solid rgba(148,220,255,.22);
}
@media (prefers-reduced-motion: no-preference) {
  .banniere__rais { animation: rais 9s ease-in-out infinite alternate; }
  @keyframes rais {
    from { transform: translateX(-52%) skewX(-2deg); }
    to   { transform: translateX(-48%) skewX(2deg); }
  }
  .onde { animation: onde 5s ease-out infinite; }
  @keyframes onde {
    from { opacity: .65; transform: translate(-50%,-50%) scale(1); }
    to   { opacity: 0;   transform: translate(-50%,-50%) scale(7); }
  }
  .bulle { animation: monte-bulle linear infinite; }
  @keyframes monte-bulle {
    from { transform: translateY(110%) translateX(0) scale(1); }
    50%  { transform: translateY(40%) translateX(-14px) scale(.95); }
    to   { transform: translateY(-20%) translateX(10px) scale(1); }
  }
}
/* Les vagues qui ferment la banniere. */
.vagues { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 3; pointer-events: none; }
.vagues svg { display: block; width: calc(100% + 1.3px); height: 110px; }
.vague-1 { fill: rgba(56,189,248,.1); }
.vague-2 { fill: rgba(6,42,74,.5); }
.vague-3 { fill: var(--eau); }
@media (prefers-reduced-motion: no-preference) {
  .vague-1 { animation: vague 8s ease-in-out infinite alternate; }
  .vague-2 { animation: vague 11s ease-in-out infinite alternate-reverse; }
  .vague-3 { animation: vague 14s ease-in-out infinite alternate; }
  @keyframes vague { from { transform: translateX(-25px); } to { transform: translateX(25px); } }
}

/* ── les boutons ────────────────────────────────────────────────────────
   Le balayage de la maquette : un fond qui se deplie de la gauche, et le coin
   qui s arrondit. */
.btn--accent, .btn--ghost, .bouton {
  position: relative; overflow: hidden; z-index: 0;
  border-radius: 2px; letter-spacing: .22em; text-transform: uppercase;
  font-size: .72rem; padding: 16px 38px;
  transition: color .4s ease, border-radius .4s ease, border-color .3s ease;
}
.btn--accent {
  background: transparent; color: var(--laiton);
  border: 1px solid var(--laiton);
}
.btn--accent::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--laiton), var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.77,0,.18,1);
}
.btn--accent:hover { color: var(--eau); border-radius: 40px; }
.btn--accent:hover::before { transform: scaleX(1); }
.btn--ghost { border: 1px solid var(--filet-fort); color: var(--encre); background: transparent; }
.btn--ghost:hover { border-color: var(--laiton); color: var(--laiton); border-radius: 40px; }

/* ── les cartes ─────────────────────────────────────────────────────────
   Verre profond, filet cyan, halo qui suit la souris, et le coin bas arrondi
   en goutte. */
.piece, .carte, .rayon {
  position: relative;
  background: linear-gradient(160deg, rgba(56,189,248,.06), rgba(4,24,46,.6));
  border: 1px solid var(--filet);
  border-radius: 0 0 46px 46px / 0 0 26px 26px;
  transition: border-color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.piece:hover, .carte:hover, .rayon:hover {
  border-color: rgba(94,234,212,.45);
  box-shadow: 0 40px 80px -30px rgba(56,189,248,.28),
              inset 0 0 60px rgba(56,189,248,.04);
}
.piece__vue, .carte__cadre { background: rgba(1,8,20,.4); }
.piece__nom, .carte__nom { color: var(--encre); }
.piece__prix, .carte__prix { color: var(--laiton); letter-spacing: .06em; }
/* Le halo qui suit le curseur : pose par le script sur --gx/--gy. */
.halo {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
  background: radial-gradient(circle 260px at var(--gx,50%) var(--gy,50%),
              rgba(94,234,212,.1), transparent 70%);
}
.piece:hover .halo, .carte:hover .halo, .rayon:hover .halo { opacity: 1; }
.piece__action {
  border-color: var(--filet-fort); color: var(--gris);
  letter-spacing: .2em; text-transform: uppercase; font-size: .64rem;
}
.piece__action:hover { border-color: var(--laiton); color: var(--laiton); }
.piece__favori, .btn-favori { background: rgba(1,8,20,.55); color: var(--gris); }
.piece__favori:hover, .btn-favori:hover { color: var(--laiton); }

/* ── les bandes de section ─────────────────────────────────────────────── */
.rsr-bande {
  background: linear-gradient(180deg, var(--blanc), var(--voile), var(--blanc));
}
.rsr-bande__vague path { fill: var(--eau); }
.chiffres { background: transparent; border-block-color: var(--filet); }
.chiffre-case__n {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  background: linear-gradient(180deg, var(--encre), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.chiffre-case__mot { color: var(--laiton); }
.section--selection { background: var(--lavis); }

/* ── le pied ────────────────────────────────────────────────────────────── */
.pied {
  background: var(--blanc); border-top: 1px solid var(--filet);
  position: relative; overflow: hidden;
}
.pied__vagues {
  position: absolute; top: 0; left: 0; width: 100%;
  transform: rotate(180deg); opacity: .35; pointer-events: none; line-height: 0;
}
.pied__vagues svg { display: block; width: calc(100% + 1.3px); height: 56px; }
.pied__vagues path { fill: rgba(56,189,248,.1); }

/* ── la barre de progression ───────────────────────────────────────────── */
#progression {
  /* Largeur pleine, reduite par `scaleX` : le script n ecrit plus une largeur
     a chaque defilement. */
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 10001;
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
  background: linear-gradient(90deg, var(--laiton), var(--accent), var(--laiton));
  box-shadow: 0 0 12px var(--accent);
}

/* ── le curseur goutte ──────────────────────────────────────────────────
   Uniquement quand il y a un vrai pointeur : sur tactile il n a pas de sens,
   et masquer le curseur systeme serait une faute. */
.curseur, .curseur-anneau, .curseur-trace { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.curseur-goutte { cursor: none; }
  body.curseur-goutte a, body.curseur-goutte button,
  body.curseur-goutte input, body.curseur-goutte select,
  body.curseur-goutte label, body.curseur-goutte summary { cursor: none; }
  /* Le calque qui accueille la trainee. `contain: strict` l isole : ajouter
     puis retirer une particule n invalide plus le style de la page entiere. */
  .curseur-calque {
    position: fixed; inset: 0; pointer-events: none; z-index: 9997;
    contain: strict;
  }
  .curseur {
    display: block; position: fixed; top: 0; left: 0; width: 13px; height: 13px;
    border-radius: 50% 50% 50% 0; background: var(--laiton);
    pointer-events: none; z-index: 9999; will-change: transform;
    transform: translate(-50%,-50%) rotate(45deg);
    box-shadow: 0 0 18px rgba(94,234,212,.65);
  }
  .curseur-anneau {
    display: block; position: fixed; top: 0; left: 0; width: 42px; height: 42px;
    border-radius: 50%; border: 1px solid rgba(56,189,248,.55);
    pointer-events: none; z-index: 9998; will-change: transform;
    transform: translate(-50%,-50%);
    transition: width .15s ease-out, height .15s ease-out,
                border-color .15s ease-out, background .15s ease-out;
  }
  .curseur-anneau.est-actif {
    width: 78px; height: 78px; border-color: rgba(94,234,212,.85);
    background: radial-gradient(circle, rgba(56,189,248,.12), transparent 70%);
  }
  .curseur-trace {
    display: block; position: fixed; width: 5px; height: 5px; border-radius: 50%;
    background: radial-gradient(circle, var(--laiton), transparent);
    pointer-events: none; z-index: 9997;
    animation: trace .8s ease-out forwards;
  }
  @keyframes trace { to { opacity: 0; transform: scale(.2) translateY(20px); } }
}
@media (prefers-reduced-motion: reduce) {
  body.curseur-goutte { cursor: auto; }
  .curseur, .curseur-anneau, .curseur-trace { display: none !important; }
}

/* ── le prechargeur ─────────────────────────────────────────────────────
   Une seule fois par visite : sur une boutique, faire attendre a chaque page
   couterait plus qu il ne donne. */
#prechargeur {
  position: fixed; inset: 0; background: var(--eau); z-index: 10000;
  display: grid; place-items: center; align-content: center; gap: 26px;
  transition: opacity .8s ease, visibility .8s;
}
#prechargeur.est-parti { opacity: 0; visibility: hidden; pointer-events: none; }
/* Filet de securite : il s efface meme si le script ne tourne pas. */
@keyframes prechargeur-secours {
  0%, 60% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}
#prechargeur { animation: prechargeur-secours 3.2s ease forwards; }
#prechargeur.est-parti { animation: none; }
/* Le logo, puis le nom. Le SVG est ECRIT DANS LA PAGE et non appele : le
   voile s affiche avant que la moindre image ne soit chargee, un `<img>`
   aurait laisse un trou pendant tout le temps ou il sert a quelque chose. */
.prechargeur__logo {
  width: 62px; height: 62px; overflow: visible;
  filter: drop-shadow(0 0 26px rgba(94,234,212,.45));
  animation: respire-goutte 2.2s ease-in-out infinite;
}
.prechargeur__logo .goutte { fill: var(--laiton); }
.prechargeur__logo .reflet {
  fill: none; stroke: var(--eau); stroke-width: 2.6;
  stroke-linecap: round; opacity: .5;
}
@keyframes respire-goutte {
  0%, 100% { transform: scale(.92); opacity: .75; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.prechargeur__marque {
  font-family: var(--serif); font-size: clamp(2.1rem, 6vw, 3.1rem);
  letter-spacing: .16em; color: var(--encre); line-height: 1;
}
.prechargeur__marque em { font-style: normal; color: var(--laiton); }
.prechargeur__barre { width: 150px; height: 1px; background: rgba(56,189,248,.2); overflow: hidden; }
.prechargeur__barre i {
  display: block; height: 100%; width: 40%; background: var(--laiton);
  animation: glisse 1.2s ease-in-out infinite;
}
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ── ajustements de contraste sur fond profond ─────────────────────────── */
.recherche input { background: rgba(56,189,248,.06); color: var(--encre); }
.recherche input::placeholder { color: var(--pale); }
.mega { background: rgba(4,24,46,.96); backdrop-filter: blur(16px); }
.fgroupe__tete, .filtres__tri select, .btn--sm,
.facette__prix input, .panneau-filtres {
  background: rgba(56,189,248,.05); color: var(--encre);
}
.compare__table thead th { background: rgba(56,189,248,.05); }
.compare__table tbody th { background: rgba(56,189,248,.03); }
.paiement, .payment-icons__item img { background: var(--encre); }
.apercu__boite { background: var(--blanc); }
.apercu__voile { background: rgba(1,8,20,.7); }
.tiroir-plat { background: var(--blanc); }

/* Le menu ne passe jamais a la ligne : il defile si besoin. */
.entete__barre nav.nav {
  flex-wrap: nowrap; min-width: 0;
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none;
}
.entete__barre nav.nav::-webkit-scrollbar { display: none; }
.nav { gap: 14px; }
@media (min-width: 1500px) { .nav { gap: 20px; } }


/* ══════════════════════════════════════════════════════════════════════════
   LE BANDEAU DE CONSENTEMENT

   Il etait bien construit par le script et ajoute au document, mais AUCUNE
   regle `.cookie-bar` n existait : un `<div>` sans style se range dans le
   flux, apres le pied de page. Il fallait descendre tout en bas du site pour
   tomber sur deux boutons nus. D ou l impression qu il n y en avait pas.
   ══════════════════════════════════════════════════════════════════════════ */

.cookie-bar {
  /* 55 : au-dessus du contenu ordinaire, EN DESSOUS de tout ce qui prend
     l ecran — les tiroirs (60, 70), l apercu rapide et le panneau de filtres
     mobile (200), dont le bouton « Voir les resultats » est lui aussi fixe en
     bas de l ecran. */
  position: fixed; left: 50%; bottom: 18px; z-index: 55;
  width: min(1000px, calc(100% - 32px));
  transform: translate(-50%, 130%);
  opacity: 0; visibility: hidden;
  transition: transform .55s cubic-bezier(.22,.9,.3,1), opacity .45s ease, visibility .45s;
}
.cookie-bar.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.cookie-bar__in {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 18px 24px;
  background: rgba(4, 24, 46, .94);
  border: 1px solid var(--filet-fort);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(1, 8, 20, .6), 0 0 0 1px rgba(56,189,248,.05);
}
/* Le liseré aqua du haut, comme sur les autres panneaux du site. */
.cookie-bar__in {
  position: relative; overflow: hidden;
}
.cookie-bar__in::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .7;
}
.cookie-bar p {
  flex: 1 1 340px; margin: 0;
  font-size: var(--t-s); line-height: 1.6; color: var(--gris);
}
.cookie-bar p a { color: var(--laiton); text-underline-offset: 3px; }
.cookie-bar__btns { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-bar__btns .btn { white-space: nowrap; }

@media (max-width: 640px) {
  .cookie-bar { bottom: 10px; width: calc(100% - 20px); }
  .cookie-bar__in { padding: 16px 18px; gap: 14px; }
  .cookie-bar__btns { width: 100%; }
  .cookie-bar__btns .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: opacity .2s ease, visibility .2s; transform: translate(-50%, 0); }
}

/* Le message de confirmation passe au-dessus du bandeau — un message passager
   doit gagner — mais il remonte tant que celui-ci occupe le bas de l ecran. */
body.avec-bandeau .toast { bottom: 132px; }
@media (max-width: 640px) { body.avec-bandeau .toast { bottom: 168px; } }

/* ── le menu ne se comprime plus ─────────────────────────────────────────
   Les entrees etaient compressibles : quand la place manquait, leur boite
   retrecissait mais le texte, lui, debordait — et passait sous les icones du
   compte, du coeur et du panier. Un libelle coupe en silence est pire qu un
   menu qui deborde : au moins on voit le second. */
.nav { gap: 10px; }
.nav > * { flex: 0 0 auto; }


/* ══════════════════════════════════════════════════════════════════════════
   LE TIROIR DE FILTRES MOBILE — deux reparations

   Ecrit APRES la couche abyssale, a dessein : c est elle qui a casse les deux
   points ci-dessous, et a specificite egale c est la derniere regle qui gagne.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* 1. le tiroir de filtres est opaque.
     Son fond venait d un lavis a 5 % : correct sur une colonne de bureau,
     illisible des que le panneau prend tout l ecran. */
  .panneau-filtres {
    background: var(--eau);
    box-shadow: none;
  }

  /* 2. le bouton de sortie retrouve son ancrage sous le pouce.
     Deux classes plutot qu une pour passer devant `.btn--accent`, qui declare
     `position: relative` plus loin dans la feuille. */
  .panneau-filtres .panneau-filtres__voir {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 2;
    /* Rempli en permanence : un bouton transparent au-dessus d une liste qui
       defile ne se lit pas. C est l etat de survol de `.btn--accent`, rendu
       permanent ici. */
    background: linear-gradient(90deg, var(--laiton), var(--accent));
    border-color: transparent;
    color: var(--eau);
    box-shadow: 0 10px 30px -10px rgba(1, 8, 20, .8);
  }
  .panneau-filtres .panneau-filtres__voir::before { display: none; }
}

/* Le voile des tiroirs etait reste sur une couleur de l ANCIENNE palette :
   `rgba(16, 32, 31, .34)`, un vert sombre a 34 %. Sur un fond clair il
   assombrissait la page ; sur l abysse il ne se voit pas, et le tiroir semble
   flotter sur une page toujours active. Meme classe d oubli que `.btn--clair`
   apres la bascule : une couleur ecrite en dur ne suit pas les jetons. */
.voile { background: rgba(1, 8, 20, .68); }


/* ══════════════════════════════════════════════════════════════════════════
   LA BANDE DE REASSURANCE — pied de fiche produit

   Elle remplace `.reassurance-bar`, qui n etait ni centree ni habillee : sa
   regle de composant declarait `margin: 64px 0 0`, ce qui remettait les marges
   laterales a zero et annulait le `margin: 0 auto` de `.wrap`. Une propriete
   raccourcie remplace, elle n ajoute pas.

   Le centrage vient maintenant de `.large`, le conteneur du site, et la bande
   ne touche plus aux marges laterales.
   ══════════════════════════════════════════════════════════════════════════ */

.bande-rassure {
  position: relative;
  margin-top: 76px;
  padding: 56px 0 62px;
  border-top: 1px solid var(--filet);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(56, 189, 248, .085), transparent 64%),
    var(--blanc);
}
/* Le filet aqua, centre sur la bande — le meme geste que les autres panneaux. */
.bande-rassure::before {
  content: ""; position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%);
  width: min(600px, 72%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.bande-rassure__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 26px;
}

.bande-rassure__item {
  display: grid; justify-items: center; align-content: start;
  text-align: center; gap: 13px; padding: 4px 10px;
}
/* Un filet entre les colonnes, jamais avant la premiere — et seulement quand
   la grille tient sur une seule rangee, sinon il tomberait au milieu. */
@media (min-width: 981px) {
  .bande-rassure__item + .bande-rassure__item { border-left: 1px solid var(--filet); }
}

.bande-rassure__icone {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--laiton);
  background: rgba(56, 189, 248, .07);
  border: 1px solid var(--filet-fort);
  box-shadow: 0 0 0 7px rgba(56, 189, 248, .035);
  transition: color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.bande-rassure__icone svg { width: 23px; height: 23px; }
.bande-rassure__item:hover .bande-rassure__icone {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 9px rgba(56, 189, 248, .06);
}

.bande-rassure__item strong {
  font-family: var(--serif);
  font-size: 1.16rem; font-weight: 500; letter-spacing: .015em;
  color: var(--encre); line-height: 1.25;
}
.bande-rassure__texte {
  font-size: var(--t-s); line-height: 1.65; color: var(--gris);
  max-width: 31ch;
}

@media (max-width: 980px) {
  .bande-rassure { margin-top: 60px; padding: 46px 0 50px; }
  .bande-rassure__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 22px; }
}
@media (max-width: 560px) {
  .bande-rassure__grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bande-rassure__texte { max-width: 34ch; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CORRECTIONS DU 19/10/2026 (Inès A, verdicts Jade / Gaspard, chantier 26b459)
   Ecrites en fin de feuille, a dessein : a specificite egale la derniere
   regle gagne, et la couche abyssale au-dessus a deja redefini ces elements.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. le menu mobile : un accordeon par rayon ─────────────────────────
   Construit par le script depuis le tiroir a plat. Un rayon = <details>,
   ferme par defaut, 44 px de haut (la cible tactile). */
.menu-mobile__rayon { border-bottom: 1px solid var(--filet); }
.menu-mobile__rayon-titre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 11px 0; cursor: pointer;
  font-size: var(--t-m); color: var(--encre); list-style: none;
}
.menu-mobile__rayon-titre::-webkit-details-marker { display: none; }
.menu-mobile__rayon-titre::marker { content: ""; }
.menu-mobile__chevron {
  flex: none; width: 8px; height: 8px; margin: 0 6px 3px 0;
  border-right: 1.5px solid var(--gris); border-bottom: 1.5px solid var(--gris);
  transform: rotate(45deg); transition: transform .22s ease, border-color .22s ease;
}
.menu-mobile__rayon[open] .menu-mobile__rayon-titre { color: var(--accent); }
.menu-mobile__rayon[open] .menu-mobile__chevron { transform: rotate(-135deg); margin-bottom: -3px; border-color: var(--accent); }
.menu-mobile__sous {
  margin: 0 0 12px 3px; padding: 2px 0 2px 14px;
  border-left: 1px solid var(--filet-fort);
}
.menu-mobile__lien { min-height: 44px; display: flex; align-items: center; font-size: var(--t-m); color: var(--encre); }
.menu-mobile__lien--sous { min-height: 40px; font-size: var(--t-s); color: var(--gris); border-bottom: 0; }
.menu-mobile__lien--sous:hover { color: var(--accent); }
#tiroir-menu .tiroir__corps { padding-top: 6px; }
#tiroir-menu .menu-mobile__titre:first-child { margin-top: 10px; }

/* ── 2. l en-tete a 1280-1536 : les huit entrees tiennent sur la ligne ──
   Mesure a 1366 : 958 px disponibles, 980 demandes avec gap 10 / .085em —
   « Blog » sortait du cadre et se lisait « BI ». Avec gap 8 et .06em :
   936 px, a 1280 comme a 1536 (la barre est bornee a 1280 par `.large`). */
.nav { gap: 8px; }
.nav__lien { letter-spacing: .06em; }
.nav__lien--mega { gap: 4px; }

/* ── 3. CHOISIR / AJOUTER sur les vignettes : visibles au doigt ─────────
   Au repos ils etaient un filet a 34 % et un texte brume en .64rem : sur
   telephone, ou il n y a pas de survol pour les reveler, on ne les voyait
   pas. Plein, 44 px de haut, le meme degrade que le bouton « Voir les
   resultats » du filtre — texte encre sombre, car le blanc sur l aqua ne
   contraste pas assez (1,9:1). */
@media (hover: none), (max-width: 900px) {
  .piece__action, .piece__action:hover {
    opacity: 1; min-height: 44px; padding: 11px 14px;
    background: linear-gradient(90deg, var(--laiton), var(--accent));
    border: 0; color: var(--eau); font-weight: 600;
    letter-spacing: .14em; font-size: .74rem;
    box-shadow: 0 10px 24px -12px rgba(56, 189, 248, .7);
  }
  .piece__action.est-ajoute { background: var(--encre); color: var(--eau); }
  .piece__action.est-inerte {
    background: transparent; border: 1px dashed var(--filet-fort);
    color: var(--pale); box-shadow: none; font-weight: 400;
  }
}
/* A la souris, quand il apparait : bordure 2 px accent, texte accent. */
@media (hover: hover) and (pointer: fine) {
  .piece__action { border: 2px solid var(--accent); color: var(--accent); min-height: 42px; }
  .piece__action:hover { background: var(--accent); color: var(--eau); border-color: var(--accent); }
  .piece__action.est-inerte { border: 1px dashed var(--filet-fort); color: var(--pale); }
}

/* ── 6. le bandeau cookies sur telephone : fin, en bas, ≤ 25 % de l ecran
   Il faisait 165 px (texte sur trois lignes + deux boutons empiles). Texte
   plus petit, boutons cote a cote : ~110 px, soit 13 % d un ecran de 844. */
@media (max-width: 640px) {
  .cookie-bar { bottom: 8px; width: calc(100% - 16px); max-height: 25vh; }
  .cookie-bar__in {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: 9px; padding: 11px 13px 12px; border-radius: 12px;
  }
  .cookie-bar p { flex: none; font-size: 12px; line-height: 1.45; }
  .cookie-bar__btns { width: 100%; gap: 8px; }
  .cookie-bar__btns .btn {
    flex: 1; min-height: 38px; padding: 7px 10px;
    font-size: 11.5px; letter-spacing: .06em; justify-content: center;
  }
  body.avec-bandeau .toast { bottom: 124px; }
}

/* ── 7. la fiche : la galerie suit le defilement, pas la colonne d infos ─
   C est la colonne de droite (prix, declinaisons, description, accordeons)
   qui est longue ; la galerie, elle, s arretait et laissait la gauche vide
   pendant un ecran. On colle la galerie, et on libere les infos. */
@media (min-width: 1025px) {
  .fiche__grille > .galerie { position: sticky; top: calc(var(--h-entete, 126px) + 14px); }
  .fiche__infos { position: static; }
}