/* Aquaflux — feuille de style unique.
 *
 * Direction : clair et net. Les couleurs viennent des matieres du sujet —
 * chrome, laiton, porcelaine, verre — pas d'un nuancier « eau ». Une seule
 * couleur saturee, un teal profond ; le laiton n'apparait qu'en detail
 * metallique, jamais comme seconde couleur de theme.
 *
 * Le dispositif structurant est LA LIGNE D'EAU : un filet horizontal qui separe
 * ce qui seduit de ce qui decide. Au-dessus la piece et son parti pris, en
 * dessous les chiffres. C'est la facon dont on achete un robinet.
 */

/* ═══════════════════════════════════════════════ jetons */

:root {
  /* ── le fond et les surfaces ── */
  --eau: #010814;          /* abysse : le fond de page */
  --blanc: #04182e;        /* ocean : une surface posee (carte, panneau) */
  --voile: #062a4a;        /* profond : une surface creusee */

  /* ── le texte ── */
  --encre: #eaf6ff;        /* ecume */
  --gris: #7fa8c9;         /* brume */
  --pale: #5b82a3;         /* brume assourdie */

  /* ── les filets ── */
  --filet: rgba(56, 189, 248, .16);
  --filet-fort: rgba(56, 189, 248, .34);

  /* ── les couleurs d action ── */
  --accent: #38bdf8;       /* aqua */
  --accent-voile: rgba(56, 189, 248, .1);
  --laiton: #5eead4;       /* cyan : le detail metallique du theme */
  --alerte: #f0806a;

  /* ── les jetons ajoutes par la page d accueil ── */
  --marine: #04182e;
  --lavis: rgba(56, 189, 248, .05);

  --pas: 8px;
  --large: 1280px;
  --lire: 66ch;

  --t-xs: 12px;
  --t-s: 13.5px;
  --t-m: 15.5px;
  --t-l: 19px;
  --t-xl: clamp(24px, 3vw, 34px);
  --t-xxl: clamp(34px, 6vw, 68px);

  /* Cormorant Garamond porte le display, Inter le texte : c est la paire de
     la maquette. Les deux sont servies par le site, comme les precedentes. */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* Reglage systeme sombre. Seuls les jetons changent, et un choix clair
   explicite reste prioritaire. */
/* Le reglage systeme sombre a ete retire : le site est desormais
   sombre par dessein. Le conserver aurait fait basculer un visiteur
   en mode sombre sur l ANCIENNE palette claire. */

:root[data-theme="dark"] {
  --eau: #0C1615;
  --blanc: #121D1C;
  --voile: #172423;
  --encre: #E6EEED;
  --gris: #9AAAA9;
  --pale: #6E7F7E;
  --filet: #22302F;
  --filet-fort: #31423F;
  --accent: #3FA9A2;
  --accent-voile: #14302E;
  --laiton: #C9995C;
  --alerte: #D98166;
}

/* ═══════════════════════════════════════════════ socle */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--eau);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--filet-fort); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

:is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: var(--t-xxl); line-height: 1.02; letter-spacing: -.03em; }
h2 { font-size: var(--t-xl); line-height: 1.1; }
h3 { font-size: var(--t-l); line-height: 1.25; }
p { margin: 0; }

.large { max-width: var(--large); margin: 0 auto; padding: 0 24px; }
.lire { max-width: var(--lire); }

/* Une etiquette : petite, espacee, jamais en gras lourd. */
.etiquette {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Ce qui n'est pas verifie se voit, plutot que de se deviner. */
.avalider {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--alerte);
  border: 1px dashed currentColor;
  border-radius: 3px;
  padding: 1px 6px;
}

/* ═══════════════════════════════════════════════ la ligne d'eau */

/* Le filet structurant. Il separe, il n'encadre pas : c'est pour cela qu'il n'y
   a pas une seule carte a ombre portee dans cette feuille. */
.ligne {
  height: 1px;
  background: var(--filet);
  border: 0;
  margin: 0;
}

/* Sur le bandeau, elle ondule — un trace canvas, amplitude faible, lent. */
.ligne-vive { position: relative; height: 26px; overflow: hidden; }
.ligne-vive canvas { display: block; width: 100%; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .ligne-vive { height: 1px; }
  .ligne-vive canvas { display: none; }
  .ligne-vive::after {
    content: ""; position: absolute; inset: 0;
    background: var(--filet);
  }
}

/* ═══════════════════════════════════════════════ en-tete */

.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--eau) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}
.entete__barre {
  display: flex; align-items: center; gap: 28px;
  height: 66px;
}
.marque {
  font-family: var(--sans);
  font-size: 21px; font-weight: 600; letter-spacing: -.03em;
  text-decoration: none; flex-shrink: 0;
}
.marque em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--accent);
}
.nav { display: flex; gap: 22px; font-size: var(--t-s); }
.nav a { text-decoration: none; color: var(--gris); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--encre); }
.entete__fin { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.recherche { position: relative; }
.recherche input {
  font: inherit; font-size: var(--t-s);
  padding: 7px 12px 7px 32px; width: 190px;
  color: var(--encre); background: var(--blanc);
  border: 1px solid var(--filet-fort); border-radius: 4px;
}
.recherche input::placeholder { color: var(--pale); }
.recherche svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: var(--pale); fill: none; stroke-width: 2;
}
.recherche__liste {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--blanc); border: 1px solid var(--filet-fort);
  max-height: 320px; overflow-y: auto; z-index: 50;
}
.recherche__liste a {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; text-decoration: none; font-size: var(--t-s);
  border-bottom: 1px solid var(--filet);
}
.recherche__liste a:last-child { border-bottom: 0; }
.recherche__liste a:hover, .recherche__liste a.est-vise { background: var(--accent-voile); }
.recherche__liste img { width: 34px; height: 34px; object-fit: cover; flex-shrink: 0; }
.recherche__liste span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le bouton de menu est visible A TOUTES LES LARGEURS : c est lui qui
   ouvre le tiroir des pages d information, inatteignables autrement
   depuis l en-tete. Amalhana fait de meme. */
.burger { display: block; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--gris); }
.burger:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════ bandeau d'accueil */

.bandeau { padding: 72px 0 0; }
.bandeau__grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.bandeau__signature {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.35;
  color: var(--gris); margin-top: 20px; max-width: 26ch;
}
.bandeau__actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* Le catalogue est fait de MISES EN SITUATION, pas de détourés sur blanc : la
   pièce est photographiée dans sa salle de bains. Une image cadrée en
   `contain` flotterait au milieu d'un carré blanc — elle remplit donc son
   cadre. C'est la mesure du catalogue qui a tranché, pas une préférence. */
.bandeau__piece {
  background: var(--blanc);
  aspect-ratio: 4 / 5;
  position: relative; overflow: hidden;
}
.bandeau__piece img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════ boutons */

.bouton {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: var(--t-s); font-weight: 500;
  padding: 11px 20px; cursor: pointer;
  border: 1px solid var(--encre); border-radius: 3px;
  background: var(--encre); color: var(--eau);
  text-decoration: none;
}
.bouton:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton--creux { background: none; color: var(--encre); border-color: var(--filet-fort); }
.bouton--creux:hover { background: none; color: var(--accent); border-color: var(--accent); }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }

/* ═══════════════════════════════════════════════ grille de produits */

.section { padding: 64px 0; }
.section__tete {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.section__tete .lien-suite { margin-left: auto; font-size: var(--t-s); color: var(--gris); }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 40px 28px;
}

/* Pas de carte : une vignette, un filet, du texte.
 *
 * UN SEUL lien par produit, et il couvre toute la carte — image comprise.
 * Deux ancres (l'image et le nom) donnaient deux arrets de tabulation pour la
 * meme destination, et l'ancre de l'image, mise a `tabindex="-1"` pour eviter
 * le doublon, ne s'activait plus au clic. Le lien tendu regle les deux : la
 * photo est cliquable, et il n'y a qu'une entree au clavier. */
.piece { display: flex; flex-direction: column; position: relative; }
.piece__vue {
  position: relative; display: block;
  background: var(--blanc); aspect-ratio: 1;
  overflow: hidden; margin-bottom: 14px;
}
.piece__nom::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* Le focus se voit sur la CARTE, pas sur les deux lignes de texte seules. */
.piece:focus-within {
  outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 2px;
}
.piece__nom:focus-visible { outline: none; }
.piece__vue img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
/* La refraction : deux pixels de decalage et un souffle d'echelle. L'effet d'un
   objet vu a travers de l'eau qui bouge. Rien de plus. */
.piece:hover .piece__vue img { transform: translateY(-2px) scale(1.035); }

.piece__nom {
  font-size: var(--t-s); line-height: 1.4; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.piece__ligne { height: 1px; background: var(--filet); margin: 10px 0 8px; }
.piece__bas { display: flex; align-items: baseline; gap: 10px; }
.piece__prix { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-s); }
.piece__depuis { font-size: var(--t-xs); color: var(--pale); }
.piece__decl { margin-left: auto; font-size: var(--t-xs); color: var(--pale); }

/* ═══════════════════════════════════════════════ fiche produit
 *
 * Les règles de la fiche vivent désormais dans `composants.css`, avec les
 * noms de classes du script repris de Valisio. Celles qui étaient ici ont été
 * retirées le 21/08/2026 : `.fiche` y était une grille à deux colonnes, et
 * comme la nouvelle fiche est une `<section class="section fiche">`, c'est la
 * SECTION qui devenait la grille — le contenu se retrouvait comprimé dans sa
 * première colonne.
 *
 * Quand on adopte le contrat de classes d'un autre site, il faut RETIRER les
 * siennes, pas seulement ajouter les nouvelles.
 */

/* ═══════════════════════════════════════════════ rassurance verifiee */

.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--filet); }
.faits > div { background: var(--eau); padding: 22px 24px; }
.faits dt { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }
.faits dd { margin: 8px 0 0; font-size: var(--t-s); color: var(--gris); }

/* ═══════════════════════════════════════════════ pied */

.pied { margin-top: 88px; border-top: 1px solid var(--filet); padding: 48px 0 64px; }
.pied__grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
.pied h3 { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--pale); font-weight: 400; }
.pied ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.pied a { font-size: var(--t-s); color: var(--gris); text-decoration: none; }
.pied a:hover { color: var(--accent); }
.pied__bas {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--filet);
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--pale);
}

/* ═══════════════════════════════════════════════ prose des pages legales */

.prose { max-width: var(--lire); }
.prose h2 { margin: 40px 0 14px; font-size: var(--t-l); }
.prose h3 { margin: 28px 0 10px; font-size: var(--t-m); }
.prose p, .prose li { color: var(--gris); font-size: var(--t-m); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--encre); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.prose :is(th, td) { border-bottom: 1px solid var(--filet); padding: 9px 10px 9px 0; text-align: left; font-size: var(--t-s); }

/* Un contenu large ne fait jamais deborder la page. */
.debordant { overflow-x: auto; }

/* ═══════════════════════════════════════════════ etroit */

@media (max-width: 960px) {
  .bandeau__grille { grid-template-columns: 1fr; gap: 34px; }
  .fiche { grid-template-columns: 1fr; gap: 34px; }
  .fiche__achat { position: static; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .burger { display: block; }
  .entete.est-ouverte .nav {
    display: flex; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--eau); border-bottom: 1px solid var(--filet);
  }
  .entete.est-ouverte .nav a { padding: 13px 24px; border-top: 1px solid var(--filet); }
  .recherche input { width: 130px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 18px; }
  .section { padding: 44px 0; }
  .bandeau { padding: 40px 0 0; }
  .pied__grille { grid-template-columns: 1fr; gap: 26px; }
}


/* ═══════════════════════════════════════════════ bandeau, tiroir, Ariane
 *
 * Aligne sur Valisio et Amalhana, qui portent tous deux un bandeau
 * d'engagements au-dessus de l'en-tete et un tiroir donnant acces aux pages
 * d'information. Le bandeau ne dit QUE des faits verifies : livraison et
 * retours tels que la base et les CGV les reglent.
 */

/* Le lien d'evitement : premier element focalisable de la page, invisible
   jusqu'a ce qu'on l'atteigne au clavier. */
.saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: var(--eau);
  padding: 10px 16px; font-size: var(--t-s); text-decoration: none;
}
.saut:focus { left: 0; }

.bandeau-haut {
  margin: 0; padding: 8px 24px; text-align: center;
  background: var(--encre); color: var(--eau);
  font-size: var(--t-xs); letter-spacing: .02em;
}
.bandeau-haut span { opacity: .45; margin: 0 6px; }

.tiroir-plat { border-top: 1px solid var(--filet); background: var(--blanc); }
.tiroir-plat[hidden] { display: none; }
.tiroir-plat__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px; padding-top: 26px; padding-bottom: 30px;
}
.tiroir-plat h2 {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--pale); font-weight: 400; margin-bottom: 12px;
}
.tiroir-plat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tiroir-plat a { font-size: var(--t-s); color: var(--gris); text-decoration: none; }
.tiroir-plat a:hover { color: var(--accent); }

.ariane {
  padding-top: 26px; font-size: var(--t-xs); color: var(--pale);
}
.ariane a { text-decoration: none; color: var(--gris); }
.ariane a:hover { color: var(--accent); }
.ariane span { margin: 0 4px; }

/* Le tiroir remplace le menu deroulant etroit : une seule mecanique, sur
   toutes les largeurs. */
@media (max-width: 720px) {
  .entete.est-ouverte .nav { display: none; }
}


/* ── suggestions de recherche ─────────────────────────────────────────────
 * Construites par le script, avec ses classes. La boite est celle de
 * l'en-tete ; seul son contenu change. */
.recherche__liste { padding: 0; }
.suggestion {
  display: grid; grid-template-columns: 38px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px; text-decoration: none; font-size: var(--t-s);
  border-bottom: 1px solid var(--filet); color: inherit;
}
.suggestion:last-of-type { border-bottom: 0; }
.suggestion:hover, .suggestion.est-vise { background: var(--accent-voile); }
.suggestion img { width: 38px; height: 38px; object-fit: cover; background: var(--blanc); }
.suggestion__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion__prix {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-xs); color: var(--gris);
}
.suggestions__pied {
  display: block; padding: 10px; text-align: center; font-size: var(--t-xs);
  color: var(--accent); text-decoration: none; border-top: 1px solid var(--filet);
}
.suggestions__pied:hover { background: var(--accent-voile); }
.suggestions__vide { padding: 14px; font-size: var(--t-s); color: var(--gris); margin: 0; }

/* Le menu mobile et les commandes, construits eux aussi par le script. */
.menu-mobile__titre {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--pale); margin: 18px 0 8px;
}
.menu-mobile__lien {
  display: block; padding: 9px 0; font-size: var(--t-s);
  color: var(--gris); text-decoration: none;
  border-bottom: 1px solid var(--filet);
}
.menu-mobile__lien:hover { color: var(--accent); }
.ligne-commande {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: var(--t-s);
}
.price--absent { color: var(--pale); }

/* La page panier, construite par le script. */
.cart-grid { display: grid; grid-template-columns: 1fr minmax(260px, 320px); gap: 40px; align-items: start; }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.cart-line__media { width: 88px; height: 88px; object-fit: cover; background: var(--blanc); }
.cart-sum { border: 1px solid var(--filet); padding: 22px; background: var(--blanc); }
.cart-sum .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--t-s); }
.cart-sum .row--total { border-top: 1px solid var(--filet); margin-top: 8px; padding-top: 12px; font-size: var(--t-m); }
.cart-sum .row--total b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cart-trust { margin-top: 14px; font-size: var(--t-xs); color: var(--pale); }
.cart-empty__icon { display: none; }
@media (max-width: 860px) { .cart-grid { grid-template-columns: 1fr; gap: 26px; } }