/* =========================================================
   Fulgurant : charte graphique

   Le système de couleurs est celui des logos de gamme :
     Sanitary #e30613 · Fire #f39f07 · Garden #97bf1e
     Camping  #cb0767 · Pro  #1d1d1b

   Le noir du logo PRO sert de couleur d'interface (texte, boutons,
   pied de page) ; le rouge Sanitary sert d'accent de marque (prix,
   états actifs). Chaque catégorie colore ensuite ses propres blocs
   via l'attribut data-cat, qui redéfinit --cat et --cat-tint.
   ========================================================= */

/* ---------------------------------------------------------------- fontes */

/* Poppins : la géométrie ronde qui donne son caractère à la maquette de
   référence. Cinq graisses suffisent, subset latin (accents FR/NL inclus). */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/assets/fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/poppins-700.woff2') format('woff2'); }
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}

/* ---------------------------------------------------------------- jetons */

:root {
  /* couleurs de gamme (logos) */
  --sanitaire: #e30613;
  --feu:       #f39f07;
  --jardin:    #97bf1e;
  --camping:   #cb0767;
  --pro:       #1d1d1b;

  /* teintes claires dérivées, pour les fonds de cartes */
  --sanitaire-tint: #fdeceb;
  --feu-tint:       #fef5e5;
  --jardin-tint:    #f4f9e6;
  --camping-tint:   #fdeaf2;
  --pro-tint:       #f1f1f0;

  /* Couleur courante d'une zone, redéfinie par [data-cat].
     Hors gamme identifiée, c'est le rouge Fulgurant qui prend le relais :
     boutons au survol, surtitres, puces de liste. */
  --cat: #e30613;
  --cat-tint: #fdeceb;

  /* Interface : gamme de gris froids et neutres, dans l'esprit de la
     maquette de référence : fond de page blanc, sections en gris très clair,
     filets fins. Aucune teinte chaude. */
  --ink:      #1d1d1b;   /* texte fort, boutons, pied de page */
  --ink-soft: #4d4d4d;   /* texte courant */
  --muted:    #999999;   /* légendes, méta, onglets inactifs */
  --line:     #ebebeb;   /* filets */
  --paper:    #ffffff;   /* fond de page */
  --paper-2:  #e7e9ee;   /* fond de page bento : assez soutenu pour que les cartes
                            blanches et la banniere coloree s'en detachent */
  --paper-3:  #f4f4f4;   /* fond de section et de vignette produit */
  --paper-4:  #eaf0f5;   /* bandeau froid, pour varier les sections */
  --accent:   #e30613;   /* accent de marque (prix, actif) */
  /* Note client : le vert dit la satisfaction mieux que le rouge de marque,
     qui sert ailleurs a l'alerte et a l'action. Assez fonce pour rester
     lisible sur blanc, contrairement au vert de la gamme jardin. */
  --note-verte: #17864a;
  --logo:     #070d09;   /* la couleur du logo Fulgurant, relevee dans le PNG */
  /* Fleche de la pastille des tuiles produits, en masque SVG. */
  /* Fleche oblique de la pastille des tuiles produits, pointe vers le haut a
     gauche, en masque SVG. */
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 11.5 4.5 4.5'/%3E%3Cpath d='M10.5 4.5h-6v6'/%3E%3C/svg%3E");
  /* La meme fleche en blanc, utilisable en image de fond la ou un masque ne
     conviendrait pas. */
  --fleche-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 11.5 4.5 4.5'/%3E%3Cpath d='M10.5 4.5h-6v6'/%3E%3C/svg%3E");
  /* Etoile de notation, utilisee en masque : une bande degradee passe dessous,
     ce qui permet d'afficher une note a la decimale sans decouper d'image. */
  --etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 16.4 6.4 19.7l1.4-6.3L3 9.1l6.4-.6z'/%3E%3C/svg%3E");
  --etoile-pleine: #f0a500;

  /* Formes arrondies. Les quatre jetons irriguent tout le site : les changer
     ici suffit à passer d'un bout à l'autre de la maquette, du plus doux au
     plus franc. Remettre 0 partout rend les angles droits d'origine. */
  --radius-sm: 8px;     /* petits contrôles : champs, liens de filtre */
  --radius:    14px;    /* blocs : tuiles, cartes, visuels */
  --radius-lg: 22px;    /* grands panneaux : formulaire, carte */
  --radius-pill: 999px; /* pastilles : boutons, liens de gamme */

  --shadow-sm: 0 1px 3px rgba(29, 29, 27, .05);
  --shadow:    0 10px 40px rgba(29, 29, 27, .07);
  --shadow-lg: 0 24px 70px rgba(29, 29, 27, .12);

  --wrap: 1320px;
  --gap: 26px;

  --display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Icône de chaque gamme, en masque SVG : la forme vient de --cat-icon, la
   couleur de --cat. Les pictogrammes sont ceux de la charte Fulgurant
   (assets/img/icones/<gamme>-menu-icone.svg), repris tels quels : seul le trait est porté
   à 1,6 pour rester lisible à 17 px. Un seul endroit à modifier. */
:root {
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E");
}
[data-cat="sanitaire"] {
  --cat: var(--sanitaire); --cat-tint: var(--sanitaire-tint);
  /* sanitaire-menu-icone.svg */
  --cat-icon: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.26 24'%3E%3Cpath d='M.63,16.97c0,2.65.55,4.8,3.2,4.8'/%3E%3Cpath d='M24.63,16.97c0,2.65-.55,4.8-3.2,4.8'/%3E%3Cline x1='3.83' y1='21.77' x2='21.43' y2='21.77'/%3E%3Cline x1='.63' y1='13.77' x2='24.63' y2='13.77'/%3E%3Cline x1='.63' y1='16.97' x2='.63' y2='13.77'/%3E%3Cline x1='24.63' y1='16.97' x2='24.63' y2='13.77'/%3E%3Cline x1='3.83' y1='21.77' x2='3.83' y2='23.37'/%3E%3Cline x1='21.43' y1='21.77' x2='21.43' y2='23.37'/%3E%3Cline x1='2.23' y1='13.77' x2='2.23' y2='1.51'/%3E%3Cline x1='6.61' y1='2.82' x2='11.86' y2='2.82'/%3E%3Cline x1='9.24' y1='1.51' x2='9.24' y2='2.82'/%3E%3Cline x1='9.24' y1='4.75' x2='9.24' y2='5.63'/%3E%3Cline x1='9.24' y1='7.74' x2='9.24' y2='8.61'/%3E%3Cline x1='9.24' y1='10.73' x2='9.24' y2='11.6'/%3E%3Cline x1='7.49' y1='4.75' x2='7.49' y2='5.63'/%3E%3Cline x1='7.49' y1='7.74' x2='7.49' y2='8.61'/%3E%3Cline x1='7.49' y1='10.73' x2='7.49' y2='11.6'/%3E%3Cline x1='10.99' y1='4.75' x2='10.99' y2='5.63'/%3E%3Cline x1='10.99' y1='7.74' x2='10.99' y2='8.61'/%3E%3Cline x1='10.99' y1='10.73' x2='10.99' y2='11.6'/%3E%3Cpath d='M2.23,1.51c0-.48.39-.88.88-.88'/%3E%3Cpath d='M9.24,1.51c0-.48-.39-.88-.88-.88'/%3E%3Cline x1='3.11' y1='.63' x2='8.36' y2='.63'/%3E%3C/svg%3E");
}
[data-cat="feu"] {
  --cat: var(--feu); --cat-tint: var(--feu-tint);
  /* feu-menu-icone.svg */
  --cat-icon: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.86 25.26'%3E%3Cpath d='M.63,16.63c0,4.42,3.58,8,8,8'/%3E%3Cpath d='M18.23,16.63c0,4.42-3.58,8-8,8'/%3E%3Cpath d='M5.43,19.83c0,2.65,1.6,4.8,4,4.8'/%3E%3Cpath d='M5.43,19.83c0-3.54,2.86-6.4,6.4-6.4'/%3E%3Cpath d='M13.43,21.43c0,1.77-1.6,3.2-4,3.2'/%3E%3Cpath d='M11.83,13.43c-1.6,4.8,1.6,4.8,1.6,8'/%3E%3Cline x1='8.63' y1='24.63' x2='10.23' y2='24.63'/%3E%3Cpath d='M.63,16.63C.63,10.23,8.63,8.63,5.43.63'/%3E%3Cpath d='M11.83,10.23C11.83,4.92,8.97.63,5.43.63'/%3E%3Cpath d='M18.23,16.63c0-4.8-3.2-4.8-3.2-9.6'/%3E%3Cpath d='M15.03,7.03c-1.6,0-1.6,3.2-3.2,3.2'/%3E%3Cline x1='8.63' y1='24.63' x2='10.23' y2='24.63'/%3E%3C/svg%3E");
}
[data-cat="jardin"] {
  --cat: var(--jardin); --cat-tint: var(--jardin-tint);
  /* jardin-menu-icone.svg */
  --cat-icon: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.26 25.26'%3E%3Cpath d='M.63,20.63c0-.88.72-1.6,1.6-1.6'/%3E%3Cpath d='M.63,20.63c0,.88.72,1.6,1.6,1.6'/%3E%3Cline x1='2.23' y1='19.03' x2='15.97' y2='19.03'/%3E%3Cline x1='2.23' y1='22.23' x2='17.29' y2='22.23'/%3E%3Cpath d='M24.16,14.7c.63.63.63,1.64,0,2.26'/%3E%3Cpath d='M24.16,14.7c-.63-.63-1.64-.63-2.26,0'/%3E%3Cline x1='24.16' y1='16.96' x2='20.49' y2='20.63'/%3E%3Cline x1='21.9' y1='14.7' x2='19.17' y2='17.43'/%3E%3Cpath d='M20.49,20.63c-.9.9-1.6,1.6-3.2,1.6'/%3E%3Cpath d='M19.17,17.43c-.9.9-1.6,1.6-3.2,1.6'/%3E%3Cline x1='5.43' y1='22.23' x2='4.63' y2='24.63'/%3E%3Cline x1='16.63' y1='22.23' x2='17.43' y2='24.63'/%3E%3Cline x1='24.44' y1='10.43' x2='8.98' y2='6.29'/%3E%3Cpath d='M24.44,10.43c.95-3.56-1.73-7.37-6-8.51-4.27-1.14-8.5.81-9.45,4.37'/%3E%3Cline x1='16.71' y1='8.36' x2='13.85' y2='19.03'/%3E%3Cpath d='M20.57,9.39c.95-3.56,0-6.9-2.14-7.47-2.13-.57-4.64,1.85-5.59,5.4'/%3E%3Cline x1='18.78' y1='.63' x2='18.44' y2='1.92'/%3E%3C/svg%3E");
}
[data-cat="camping"] {
  --cat: var(--camping); --cat-tint: var(--camping-tint);
  /* camping-menu-icone.svg */
  --cat-icon: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.26 15.7'%3E%3Cpolyline points='10.2 13.46 24.63 13.46 24.63 15.07'/%3E%3Cpath d='M21.46,13.46v-5.99c0-3.78-3.06-6.84-6.84-6.84H2.42c-.99,0-1.79.8-1.79,1.79v11.04h4.79'/%3E%3Crect x='3.8' y='3.86' width='6.4' height='3.22'/%3E%3Crect x='13.38' y='5.48' width='4.05' height='7.98'/%3E%3Ccircle cx='7.81' cy='12.68' r='2.39'/%3E%3C/svg%3E");
}
[data-cat="pro"] {
  --cat: var(--pro); --cat-tint: var(--pro-tint);
  /* pro-menu-icone.svg */
  --cat-icon: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.26 22.06'%3E%3Cpath d='M9.43,5.73c-.9-1.78-2.45-3.55-4-5.1C3.03,3.03.63,5.98.63,8.63s2.15,4.8,4.8,4.8'/%3E%3Cpath d='M19.78,13.43s.03,0,.05,0c2.65,0,4.8-2.15,4.8-4.8s-2.4-5.6-4.8-8c-1.55,1.55-3.09,3.32-4,5.1'/%3E%3Cpath d='M19.83,14.23c0-3.98-3.6-8.4-7.2-12-3.6,3.6-7.2,8.02-7.2,12s3.22,7.2,7.2,7.2,7.2-3.22,7.2-7.2Z'/%3E%3Cpath d='M8.63,15.03c0,1.77,1.43,3.2,3.2,3.2'/%3E%3C/svg%3E");
}

/* Pastille de gamme : l'élément .dot porte l'icône de sa catégorie, peinte
   dans la couleur de gamme. Le masque évite de dupliquer les SVG dans les
   pages ; la taille est ajustée au cas par cas plus bas. */
.dot {
  display: inline-block; flex: 0 0 auto;
  width: 17px; height: 17px;
  background: var(--cat);
  -webkit-mask: var(--cat-icon) center / contain no-repeat;
  mask: var(--cat-icon) center / contain no-repeat;
}

/* ---------------------------------------------------------------- base */

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

/* Un composant en display:flex ou grid l'emporterait sur le [hidden] du
   navigateur : les filtres de la boutique n'auraient alors aucun effet
   visible. Cette règle rétablit la priorité de [hidden] partout. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titres en Poppins, graisses moyennes et interlettrage neutre : la maquette
   de référence n'utilise jamais de gras appuyé. */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.005em;
}

/* text-wrap: balance évite les lignes orphelines d'un ou deux mots,
   fréquentes sur les titres néerlandais (mots longs). */
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 500; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); font-weight: 500; text-wrap: balance; }
h3 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 500; }
h4 { font-size: 1.02rem; font-weight: 600; }

p { margin: 0 0 1.15em; }

a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent); }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

::selection { background: var(--ink); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 22px;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------- layout */

.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 44px, 820px); margin-inline: auto; }

.section { padding: 84px 0; }
.section-sm { padding: 52px 0; }
.section-tint { background: var(--paper-3); }
.section-paper { background: var(--paper); }

/* titre de section : surtitre fin + titre display */
.eyebrow {
  font-family: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cat); margin: 0 0 12px;
}
.section-head { margin-bottom: 44px; max-width: 640px; }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head h2 { margin-bottom: 0; }
.section-head p:not(.eyebrow) { color: var(--muted); margin: 14px 0 0; }

.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
/* La page de contact repartit formulaire et coordonnees. La regle etait
   inscrite en ligne dans le HTML, ou elle l'emportait sur la requete media :
   les deux colonnes tenaient bon sur telephone et poussaient la page. */
.contact-grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
/* Grille de tuiles produit : même écart entre rangées que la boutique, pour
   laisser passer le débord de la photo. */
.grid-cards { row-gap: 44px; }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--text);
  font-size: 14.5px; font-weight: 500; line-height: 1; letter-spacing: .01em;
  cursor: pointer; text-align: center;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { background: var(--cat); border-color: var(--cat); color: #fff; transform: translateY(-2px); }
.btn svg { width: 16px; height: 11px; fill: currentColor; transition: transform .22s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn-cat { background: var(--cat); border-color: var(--cat); }
.btn-cat:hover { background: var(--ink); border-color: var(--ink); }

.btn-sm { padding: 11px 22px; font-size: 13.5px; }
.btn-lg { padding: 19px 38px; font-size: 15.5px; }
.btn-block { width: 100%; }

/* lien fléché, très présent dans la maquette */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link-arrow svg { width: 15px; height: 11px; fill: currentColor; transition: transform .22s var(--ease); }
.link-arrow:hover { color: var(--cat); border-color: var(--cat); }
.link-arrow:hover svg { transform: translateX(4px); }


/* ---------------------------------------------------------------- en-tête */

/* barre haute claire, comme la maquette de référence */
.topbar {
  background: #f5f5f5; color: var(--muted);
  font-size: 12.5px; line-height: 1; border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; min-height: 42px; flex-wrap: wrap; }
.topbar-msg { display: flex; align-items: center; gap: 9px; }
.topbar-msg b { color: var(--ink); font-weight: 500; }
.topbar-dot { width: 6px; height: 6px; background: var(--accent); flex: 0 0 auto; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.topbar a { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--ink); }
.topbar svg { width: 15px; height: 15px; fill: currentColor; }

.site-header {
  background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Depuis le retrait de la barre des gammes (10/09/2026), l'en-tête tient sur
   une seule rangée : elle est un peu plus haute et le menu plus espacé, pour
   que la place libérée serve à respirer. */
.header-main { display: flex; align-items: center; gap: 40px; min-height: 96px; }

.logo { flex: 0 0 auto; }
.logo img { height: 30px; width: auto; }

.nav-main { margin-left: 6px; }
.nav-main ul { display: flex; align-items: center; gap: 42px; list-style: none; margin: 0; padding: 0; }
.nav-main li { margin: 0; }
/* menu en capitales espacées, signature de la maquette de référence */
.nav-main a {
  font-family: var(--display);
  color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 8px 0;
  text-transform: uppercase; letter-spacing: .08em;
  position: relative; display: inline-block;
}
.nav-main a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .3s var(--ease);
}
.nav-main a:hover, .nav-main a[aria-current] { color: var(--ink); }
.nav-main a:hover::after, .nav-main a[aria-current]::after { right: 0; }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 42px; height: 42px; border: 0; background: none; cursor: pointer;
  color: var(--ink); display: grid; place-items: center;
  transition: background .2s var(--ease);
}
.icon-btn:hover { background: var(--paper-3); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.lang-switch { display: flex; align-items: center; gap: 7px; font-size: 13px; padding-left: 6px; }
.lang-switch a { color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.lang-switch a[aria-current] { color: var(--ink); }
.lang-switch span { color: var(--line); }

.header-phone {
  display: flex; align-items: center; gap: 11px; padding-left: 18px;
  border-left: 1px solid var(--line);
}
.header-phone svg { width: 19px; height: 19px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
.header-phone small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.header-phone a { font-size: 14px; color: var(--ink); font-weight: 600; font-family: var(--display); }

/* recherche en surcouche */
.search-panel {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(29,29,27,.55); backdrop-filter: blur(3px);
}
.search-panel.open { display: block; }
.search-panel-inner {
  background: var(--paper); padding: 46px 0 52px;
  box-shadow: var(--shadow-lg);
}
.search-panel form { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.search-panel input {
  flex: 1; border: 0; background: none; font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 400; color: var(--ink); padding: 0;
}
.search-panel input:focus { outline: none; }
.search-panel input::placeholder { color: #c9c7c2; }
.search-panel button[type="submit"] { border: 0; background: none; cursor: pointer; color: var(--ink); }
.search-panel svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.search-hint { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
/* le bouton de fermeture reste dans le flux, au-dessus du champ */
.search-panel .wrap { display: flex; flex-direction: column; }
.search-close { align-self: flex-end; margin-bottom: 14px; }

/* menu mobile */
.burger { display: none; }

.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: var(--paper); padding: 22px 22px 60px; overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.mobile-nav-head img { height: 27px; }
.mobile-nav ul { list-style: none; margin: 0 0 8px; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--line); }
.mobile-nav a {
  display: flex; align-items: center; gap: 12px; padding: 16px 0;
  font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--ink);
}
.mobile-nav .dot { width: 22px; height: 22px; }
.mobile-label {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 30px 0 4px; font-weight: 600;
}
.mobile-nav .header-search { display: block; margin-bottom: 26px; position: relative; }
.mobile-nav .header-search input {
  width: 100%; padding: 15px 46px 15px 20px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); font: inherit; font-size: 15px; background: var(--paper-3);
}
.mobile-nav .header-search input:focus { outline: none; border-color: var(--ink); }
.mobile-nav .header-search button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer; color: var(--ink);
}
.mobile-nav .header-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* le bouton téléphone héritait de la couleur des liens du panneau : noir sur noir */
.mobile-nav .btn {
  background: var(--accent); border-color: var(--accent); color: #fff;
  padding: 17px 26px; font-size: 15px; font-weight: 600;
}
.mobile-nav .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- hero */

/* Bannière pleine page : la photo occupe toute la largeur de l'écran,
   le texte est posé dessus. */
/* pas d'overflow:hidden : le flacon déborde volontairement sous la bannière.
   z-index isole la bannière au-dessus de la section suivante. */
.hero {
  position: relative; z-index: 1;
  background: var(--ink); color: #fff;
  min-height: clamp(520px, 68vh, 720px);
  display: flex; align-items: center;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* voile neutre : assombrit surtout la gauche, là où se pose le texte */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(29,29,27,.9) 0%, rgba(29,29,27,.72) 38%, rgba(29,29,27,.15) 72%, rgba(29,29,27,.05) 100%),
    linear-gradient(180deg, rgba(29,29,27,.35) 0%, rgba(29,29,27,0) 40%);
}
/* pas de width ici : .wrap gère déjà la largeur et les marges latérales */
.hero-inner { padding: 74px 0; position: relative; z-index: 2; }
.hero-copy { max-width: 620px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; margin-bottom: 24px;
}
.hero-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--cat); }
.hero h1 { margin-bottom: 24px; color: #fff; }
.hero h1 em { font-style: normal; color: var(--cat); }

/* le produit en découpe, calé à droite et débordant sous la bannière.
   max-width borne sa largeur pour qu'il n'empiète jamais sur le texte.
   Aucune ombre portée : le flacon est posé net sur la photo. */
.hero-product {
  position: absolute; right: 5%; bottom: -46px; z-index: 3;
  height: 88%; width: auto; max-width: 34%; object-fit: contain; object-position: bottom;
}

/* Mise en avant produit : pas de carte, un simple bloc de texte posé sur la
   photo, souligné d'un filet dans la couleur de la gamme. */
.hero-tag {
  margin-top: 44px; position: relative; z-index: 2;
  display: inline-block; padding-top: 18px; color: #fff;
  border-top: 2px solid var(--cat);
  max-width: min(100%, 380px);
}
.hero-tag small {
  display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cat); font-weight: 600; margin-bottom: 7px;
}
.hero-tag strong {
  font-family: var(--display); font-size: 21px; font-weight: 500; color: #fff;
  display: inline-flex; align-items: center; gap: 14px; line-height: 1.2;
}
.hero-tag strong svg { width: 18px; height: 13px; fill: currentColor; transition: transform .25s var(--ease); }
.hero-tag:hover { color: #fff; }
.hero-tag:hover strong svg { transform: translateX(6px); }
.hero-tag:hover strong { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }


/* bandeau de page intérieure */
.page-hero {
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 46px 0 54px; margin-bottom: 64px; position: relative; overflow: hidden;
}
/* Même respiration sous l'en-tête que sur l'accueil (home-top : 24 px) :
   le bandeau de titre est décollé de l'en-tête quand il ouvre la page. */
main > .page-hero:first-child { margin-top: 24px; }
.page-hero h1 { margin-bottom: 14px; }
.page-hero p { color: var(--muted); max-width: 62ch; margin: 0; font-size: 16.5px; }
.page-hero-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.page-hero-logo img { height: 62px; width: auto; }

/* variante colorée pour les pages de gamme */
.page-hero--cat { background: var(--cat-tint); border-bottom: 0; }
.page-hero--cat .breadcrumb, .page-hero--cat .breadcrumb a { color: color-mix(in srgb, var(--cat) 62%, var(--ink)); }
.page-hero--cat p { color: color-mix(in srgb, var(--cat) 38%, var(--ink-soft)); }

.breadcrumb { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--cat); }
.breadcrumb span { margin: 0 8px; opacity: .45; }

/* ---------------------------------------------------------------- mosaïque de gammes */

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 232px; gap: 20px; }

/* le contenu est calé en bas de tuile (il n'y a plus qu'un bloc de texte) */
.bento-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--cat-tint); display: flex; flex-direction: column;
  justify-content: flex-end; padding: 24px 24px 30px; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bento-card img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; border-radius: inherit;
}


/* le contenu reste au-dessus de la photo */
.bento-foot { position: relative; z-index: 1; }
.bento-foot { transition: transform .5s cubic-bezier(.16, .84, .32, 1); }
.bento-card:hover .bento-foot { transform: translateY(-6px); }

/* La photo reste telle quelle : aucun voile coloré. Le dégradé ci-dessous est
   neutre et sert uniquement à garder le texte blanc lisible.
   La couleur de gamme est portée par trois signes : le filet du bas, le liseré
   de la plaque, et le logo lui-même (affiché dans ses vraies couleurs). */
.bento-card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(29,29,27,.38) 0%, rgba(29,29,27,.06) 34%,
    rgba(29,29,27,.36) 62%, rgba(29,29,27,.8) 100%);
}
.bento-card--photo, .bento-card--photo h3, .bento-card--photo .bento-meta { color: #fff; }


/* Pas de logo sur la photo : la gamme est identifiée par son nom et par un
   court filet de sa couleur, posé juste au-dessus. Visuel allégé au maximum. */
.bento-foot::before {
  content: ""; display: block; width: 42px; height: 4px;
  background: var(--cat); margin-bottom: 14px;
}

.bento-card h3 { font-size: clamp(1.25rem, 1.8vw, 1.7rem); margin: 0 0 4px; }
.bento-meta { font-size: 13.5px; opacity: .82; margin: 0; }
.bento-foot { display: block; }

.bento-card--tall { grid-row: span 2; }
.bento-card--wide { grid-column: span 2; }

/* tuile sans photo (certificat de garantie) : fond teinté, texte foncé */
/* la tuile « certificat » a deux blocs : titre en haut, action en bas */
.bento-card--flat { background: var(--cat-tint); justify-content: space-between; }
.bento-card--flat .bento-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bento-card--flat .bento-foot::before { display: none; }
.bento-card--flat .bento-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cat); margin: 0 0 8px;
}

/* ---------------------------------------------------------------- cartes produit */

/* Cartes sans cadre ni ombre : la vignette repose sur un aplat gris clair et
   le texte est centré en dessous, comme dans la maquette de référence. */
/* Tuile produit : aplat dans la teinte de la gamme, texte à gauche, produit
   à droite qui déborde du bloc par le bas. Le débord impose un écart entre
   rangées supérieur au dépassement, sinon la photo mordrait sur la tuile
   du dessous : voir .shop-grid et .grid-cards. */
.product-card {
  position: relative;
  display: grid; grid-template-columns: 1fr 54%; column-gap: 2px;
  background: var(--cat-tint);
  padding: 24px 0 26px 22px;
  min-height: 248px;
}
/* Le lien du titre couvre la tuile entière : elle est cliquable partout sans
   qu'un second lien vers la même page n'encombre la navigation au clavier. */
.product-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }

.product-card-body { display: flex; flex-direction: column; align-items: flex-start; }
.product-card .tag {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cat);
  margin-bottom: 9px; padding-left: 21px;
}
.product-card h3 {
  font-family: var(--display);
  font-size: 1.04rem; line-height: 1.3; margin: 0; font-weight: 600;
  /* Quatre lignes réservées : les boutons « Voir plus » s'alignent d'une tuile
     à l'autre quelle que soit la longueur du nom du produit. */
  min-height: 5.2em;
}
.product-card h3 a { color: var(--ink); }
.product-card:hover h3 a { color: var(--cat); }

.product-card-cta {
  margin-top: 16px; padding: 9px 17px;
  border: 1px solid var(--cat); color: var(--cat);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.product-card:hover .product-card-cta { background: var(--cat); color: #fff; }

.product-card-media {
  align-self: end; margin: 0 -18px -44px 0;
  display: grid; place-items: end center;
}
.product-card-media img {
  width: 100%; height: auto; object-fit: contain;
  transition: transform .4s var(--ease);
}
.product-card:hover .product-card-media img { transform: translateY(-8px); }

/* icône de gamme en coin de vignette */
.product-card-flag {
  position: absolute; top: 25px; left: 22px; z-index: 2;
  width: 14px; height: 14px; background: var(--cat); opacity: .85;
  -webkit-mask: var(--cat-icon) center / contain no-repeat;
  mask: var(--cat-icon) center / contain no-repeat;
}

/* ---------------------------------------------------------------- onglets */

/* Onglets en texte simple : gris au repos, foncés et soulignés à l'actif :
   la mécanique de la maquette de référence. */
.tabs-nav {
  display: flex; gap: 34px; flex-wrap: wrap; justify-content: center;
  list-style: none; margin: 0 0 46px; padding: 0;
}
.tabs-nav button {
  font-family: var(--display); font-size: 16px; font-weight: 500;
  padding: 6px 2px 12px; border: 0; background: none; color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  position: relative;
  transition: color .22s var(--ease);
}
.tabs-nav button::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
  background: var(--cat); transition: left .28s var(--ease), right .28s var(--ease);
}
.tabs-nav button .dot { width: 16px; height: 16px; background: currentColor; }
.tabs-nav button:hover { color: var(--ink); }
.tabs-nav button[aria-selected="true"] { color: var(--ink); }
.tabs-nav button[aria-selected="true"] .dot { background: var(--cat); }
.tabs-nav button[aria-selected="true"]::after { left: 0; right: 0; }
.tab-pane[hidden] { display: none; }

/* ---------------------------------------------------------------- boutique */

.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; }
/* gamme sans filtre (une seule marque) : la grille prend toute la largeur */
.shop-layout--full { grid-template-columns: 1fr; }

.shop-filters { position: sticky; top: 110px; }
.filter-group { margin-bottom: 34px; }
.filter-group h4 {
  font-family: var(--text);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; font-weight: 700;
}
.filter-group ul { list-style: none; margin: 0; padding: 0; }
.filter-group li { margin: 0 0 3px; }
.filter-btn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 15px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink-soft); text-align: left;
  border-radius: var(--radius-sm);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.filter-btn .dot { width: 17px; height: 17px; }
.filter-btn .count { margin-left: auto; font-size: 12px; color: var(--muted); }
.filter-btn:hover { background: var(--paper-3); color: var(--ink); }
.filter-btn[aria-pressed="true"] { background: var(--cat); color: #fff; }
.filter-btn[aria-pressed="true"] .count { color: rgba(255,255,255,.75); }
.filter-btn[aria-pressed="true"] .dot { background: #fff; }

/* Ligne de gamme : le filtre occupe la largeur, le chevron reste à droite. */
.filter-row { display: flex; align-items: center; }
.filter-row .filter-btn, .filter-row .cat-nav-link { flex: 1; min-width: 0; }
.filter-toggle {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--muted);
  transition: color .2s var(--ease);
}
.filter-toggle svg { width: 11px; height: 8px; transition: transform .25s var(--ease); }
.filter-toggle:hover { color: var(--ink); }
.filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Menu déroulant des sous-catégories, relié à sa gamme par un filet.
   .filter-group ul remet padding et marge à zéro : on repasse par le même
   niveau de spécificité, sans quoi le décrochement ne se verrait pas. */
.filter-group .sub-list {
  margin: 2px 0 12px 8px; padding-left: 14px;
  border-left: 1px solid var(--line);
}
.filter-btn--sub { padding: 7px 14px; font-size: 13.5px; color: var(--muted); }
.filter-btn--sub::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--cat); opacity: .5;
  transition: opacity .2s var(--ease);
}
.filter-btn--sub:hover { color: var(--ink); }
.filter-btn--sub:hover::before { opacity: 1; }
.filter-btn--sub[aria-pressed="true"]::before { background: #fff; opacity: 1; }

/* navigation entre gammes, colonne de gauche des pages de gamme */
.cat-nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 15px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cat-nav-link .dot { width: 17px; height: 17px; }
.cat-nav-link .count { margin-left: auto; font-size: 12px; color: var(--muted); }
.cat-nav-link:hover { background: var(--cat-tint); color: var(--cat); }
.cat-nav-link[aria-current] { background: var(--cat); color: #fff; }
.cat-nav-link[aria-current] .dot { background: #fff; }
.cat-nav-link[aria-current] .count { color: rgba(255,255,255,.75); }

.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.shop-count { font-size: 14px; color: var(--muted); margin: 0; }
.shop-count b { color: var(--ink); font-weight: 600; }
.shop-search { position: relative; min-width: 250px; }
.shop-search input {
  width: 100%; padding: 12px 20px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); font: inherit; font-size: 14px; background: var(--paper);
}
.shop-search input:focus { outline: none; border-color: var(--ink); }

/* Trois colonnes, comme le reste des grilles du site.
   L'écart entre rangées absorbe le débord de la photo. */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); row-gap: 44px; }
.shop-empty { padding: 70px 0; text-align: center; color: var(--muted); }

.filters-toggle { display: none; }

/* ---------------------------------------------------------------- fiche produit */

/* Haut de fiche : la teinte de la gamme couvre toute la largeur de l'écran,
   fil d'Ariane compris. Le flacon repose directement sur cet aplat, sans
   cadre intermédiaire, dans la teinte claire de la gamme. */
.product-hero {
  background: var(--cat-tint);
  padding: 26px 0 58px;
  margin-bottom: 64px;
}
.product-hero .breadcrumb { margin-bottom: 34px; }

.product-top {
  display: grid; grid-template-columns: 1fr 1fr;
  /* Photo et bloc d'achat centrés l'un par rapport à l'autre sur la hauteur. */
  align-items: center; column-gap: 64px;
}
/* Sous le bandeau, sur fond blanc : les volets dépliants à gauche, la
   suggestion à droite. La colonne de droite est réglée sur la largeur exacte
   de la tuile, sinon l'espace inoccupé à sa droite ferait un trou ; les
   volets prennent tout le reste. */
.product-lower {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: 64px; margin-bottom: 78px;
}

.product-gallery-main {
  background: transparent; padding: 0;
  aspect-ratio: 1/1; display: grid; place-items: center;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.product-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.product-thumb {
  width: 78px; height: 78px; padding: 9px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--paper); cursor: pointer;
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-thumb[aria-pressed="true"] { border-color: var(--cat); }

.product-cat-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper); color: var(--cat);
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 20px;
}
.product-summary h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 22px; }
.product-highlights { list-style: none; margin: 0 0 32px; padding: 0; }
.product-highlights li {
  position: relative; padding-left: 30px; margin-bottom: 11px; color: var(--ink-soft);
}
.product-highlights li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 9px; height: 9px; background: var(--cat);
}


/* Achat en ligne : un seul bouton dans la fiche, les enseignes dans un tiroir
   qui glisse depuis la droite. Le tiroir est écrit dans la page mais replié :
   sans JavaScript il reste fermé, et les adresses restent dans le code. */
.buy-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(29, 29, 27, .42);
  opacity: 0; transition: opacity .25s var(--ease);
}
.buy-overlay[data-open] { opacity: 1; }

.buy-panel {
  position: fixed; top: 0; right: 0; z-index: 61;
  width: min(430px, 92vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--paper); padding: 26px 28px 30px;
  box-shadow: -18px 0 46px rgba(29, 29, 27, .16);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  overflow-y: auto;
}
.buy-panel[data-open] { transform: none; }

.buy-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.buy-panel-head h2 { font-size: 1.3rem; margin: 0; }
.buy-close {
  flex: none; width: 40px; height: 40px; margin-right: -10px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--muted);
  transition: color .2s var(--ease);
}
.buy-close:hover { color: var(--ink); }
.buy-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.buy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.buy-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--line); padding: 15px 17px;
  transition: border-color .2s var(--ease);
}
.buy-list li:hover { border-color: var(--ink); }
.buy-shop { display: flex; align-items: center; gap: 14px; min-width: 0; }
.buy-shop img { width: auto; height: 24px; object-fit: contain; }
.buy-shop strong { font-weight: 500; font-size: 15px; color: var(--ink); }
.buy-note { margin: auto 0 0; padding-top: 26px; font-size: 12.5px; color: var(--muted); }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }

/* Sur l'aplat de gamme, le contour gris clair du bouton secondaire se
   confond avec le fond : on le passe en noir, comme le bouton d'achat. */
.product-actions .btn-outline { border-color: var(--ink); color: var(--ink); }
.product-actions .btn-outline:hover { background: var(--ink); color: #fff; }

.product-meta {
  border-top: 1px solid var(--line); padding-top: 24px;
  font-size: 14px; color: var(--muted);
}
.product-meta div { margin-bottom: 7px; }
.product-meta strong { color: var(--ink); font-weight: 600; }

/* Fiches PDF : une ligne du bloc d'informations, en lien texte. Elles
   renseignent le produit, elles ne concurrencent pas les boutons d'action. */
.doc-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--cat); font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--cat) 32%, transparent);
  transition: border-color .2s var(--ease);
}
.doc-link:hover { border-bottom-color: var(--cat); }
.doc-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Volets dépliants de la fiche, sous la photo : description, mode d'emploi,
   informations produit. Le premier est ouvert, les autres se déplient au clic. */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-title { margin: 0; font-size: inherit; }
.acc-head {
  font-family: var(--display);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 22px 2px; border: 0; background: none; cursor: pointer;
  font-size: 17px; font-weight: 500; color: var(--ink); text-align: left;
  transition: color .2s var(--ease);
}
.acc-head:hover { color: var(--cat); }
.acc-head svg { flex: none; width: 12px; height: 8px; color: var(--cat); transition: transform .25s var(--ease); }
.acc-head[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc-body { padding: 2px 2px 30px; }
.acc-body > *:first-child { margin-top: 0; }

/* Questions fréquentes, en pied de fiche : même mécanique de volets que le
   corps de la fiche, sur un fond distinct pour marquer le changement de
   registre. Tous les volets sont repliés au chargement. */
.faq { background: var(--paper-3); padding: 68px 0 74px; }
.faq h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-bottom: 26px; }
.faq .accordion { border-top-color: var(--line); }
.faq .acc-title { margin: 0; font-size: inherit; }
.faq .acc-body { padding-bottom: 26px; }
.faq .acc-body p { margin: 0; }

/* contenu riche repris de l'ancien site */
.rich h2, .rich h3, .rich h4, .rich h5 { margin-top: 1.9em; }
.rich h2:first-child, .rich h3:first-child, .rich h4:first-child { margin-top: 0; }
.rich h4 { font-size: 1.2rem; }
.rich h5 { font-size: 1.06rem; }
.rich img { border-radius: var(--radius); margin: 1.7em 0; max-width: min(100%, 620px); }
.rich ul, .rich ol { padding-left: 1.35em; }
.rich li::marker { color: var(--cat); }
.rich table { width: 100%; border-collapse: collapse; margin: 1.7em 0; font-size: 15px; }
.rich th, .rich td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rich th { width: 220px; color: var(--ink); font-weight: 600; background: var(--paper-3); }
.rich td p, .rich th p { margin: 0; }
.rich .lead { font-size: 1.1rem; color: var(--ink); line-height: 1.6; }

.rich details {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 24px; margin: 1.5em 0; background: var(--paper);
}
.rich details[open] { padding-bottom: 10px; border-color: var(--cat); }
.rich summary {
  cursor: pointer; padding: 20px 0; font-weight: 600; color: var(--ink);
  font-family: var(--display); font-size: 1.05rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.rich summary::-webkit-details-marker { display: none; }
.rich summary::after {
  content: "+"; font-size: 24px; font-weight: 300; line-height: 1; color: var(--cat);
}
.rich details[open] summary::after { content: "-"; font-size: 30px; line-height: .6; }
.rich details > *:not(summary) { margin-top: 0; }

/* « Découvrez aussi » : la suggestion reprend la tuile de la boutique, dans
   une largeur de carte plutôt que sur toute la colonne. */
.also { padding-top: 28px; border-top: 1px solid var(--line); }
.also h2 {
  font-family: var(--text);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 18px; font-weight: 700; color: var(--muted);
}
.also .product-card { max-width: 360px; }

/* Bande « à découvrir » : bandeau pleine largeur, photo à fleur de bord à
   gauche, texte centré verticalement à droite. Pas de marges perdues. */
.star-band {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--paper-3); min-height: 540px;
}
.star-band-media { position: relative; overflow: hidden; background: var(--cat-tint); }
.star-band-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* le texte s'aligne sur la grille du site, pas sur le bord de l'écran */
.star-band-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px clamp(24px, 6vw, 90px) 56px clamp(28px, 5vw, 76px);
  max-width: 640px;
}
@media (max-width: 992px) {
  .star-band { grid-template-columns: 1fr; min-height: 0; }
  /* La photo de mise en scene est carree, comme les visuels produits : un
     cadre carre la montre en entier, la ou un 4/3 lui coupait le quart de sa
     hauteur et donc le pied du flacon. */
  .star-band-media { aspect-ratio: 1/1; }
  .star-band-media img { position: static; }
  .star-band-body { padding: 40px 24px 46px; max-width: none; }
}

/* ---------------------------------------------------------------- astuces */

.post-card {
  background: transparent; display: flex; flex-direction: column;
}
.post-card-media { aspect-ratio: 16/10; background: var(--paper-3); overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-card-body { padding: 22px 2px 4px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.16rem; margin-bottom: 10px; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--accent); }
.post-card p { font-size: 14.5px; color: var(--muted); }
.post-date {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px; font-weight: 600;
}
.post-card .more { margin-top: auto; padding-top: 6px; }

/* Gamme de l'article, sur la vignette : meme etiquette que sur la tuile
   produit, pour que les deux se lisent de la meme facon. */
.post-card .tag {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cat);
  margin-bottom: 8px;
}

/* Filtre par gamme au-dessus de la liste des astuces. */
.astuces-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.astuces-chip {
  font-family: var(--text); font-size: 13px; font-weight: 600;
  padding: 9px 18px; cursor: pointer; background: transparent;
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.astuces-chip:hover { border-color: var(--cat); color: var(--cat); }
.astuces-chip.is-on { background: var(--cat); border-color: var(--cat); color: #fff; }

/* Bandeau de titre : le meme que sur les pages de gamme, pour qu'un article
   ne soit pas une page a part dans le site. La banniere le suit sans espace,
   sur toute la largeur de la fenetre. */
.page-hero--article { margin-bottom: 0; }
.page-hero--article .post-date { margin: 16px 0 0; }

.article-banner { margin: 0 0 56px; }
.article-banner img {
  display: block; width: 100%;
  height: clamp(200px, 26vw, 400px); object-fit: cover;
}

/* Le corps de l'article occupe la largeur du site. Le texte courant garde
   une longueur de ligne lisible : la place restante a droite accueille les
   tuiles produits, alignees sur le paragraphe qui en parle. */
.article-body {
  --media: 420px; --gouttiere: 60px;
  max-width: none; margin-inline: 0;
  font-size: 17px; line-height: 1.75;
}
.article-body > :not(.article-product) { max-width: calc(100% - var(--media) - var(--gouttiere)); }

.article-product {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--media);
  gap: var(--gouttiere); align-items: start;
  margin: 2.4em 0 2.8em;
}
.article-product-text > :first-child { margin-top: 0; }
.article-product-text > :last-child { margin-bottom: 0; }
.article-body .article-product .product-card { max-width: none; margin: 0; }

/* Sous 1080 px la colonne de droite n'a plus la place : tout repasse en une
   seule colonne et la tuile se remet sous le texte. */
@media (max-width: 1080px) {
  .article-body > :not(.article-product) { max-width: none; }
  .article-product { grid-template-columns: 1fr; gap: 0; }
  .article-body .article-product .product-card { max-width: 460px; margin: 1.6em 0 0; }
}

/* Les articles viennent de WordPress, où les niveaux de titre ont été
   employés sans hiérarchie : selon l'article, une même section est un h2 ou
   un h5. Chaque niveau doit donc rester lisible comme un titre. Les deux
   derniers ne rapetissent plus sous la taille du texte : ils se distinguent
   par la graisse, la couleur et l'espace, pas par le corps. */
.article-body h2 { font-size: 1.62rem; line-height: 1.25; font-weight: 600; }
.article-body h3 { font-size: 1.32rem; line-height: 1.3;  font-weight: 600; }
.article-body h4 { font-size: 1.22rem; line-height: 1.35; font-weight: 600; }
.article-body h5 { font-size: 1.1rem;  line-height: 1.4;  font-weight: 600; }
.article-body h6 {
  font-family: var(--text);
  font-size: 12px; line-height: 1.4; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cat);
}

/* Respiration : beaucoup d'air avant un titre, peu après, pour que chaque
   titre reste attaché au texte qu'il annonce. */
.article-body h2 { margin: 2.6em 0 .6em; }
.article-body h3 { margin: 2.2em 0 .5em; }
.article-body h4,
.article-body h5 { margin: 1.9em 0 .45em; }
.article-body h6 { margin: 2.1em 0 .7em; }
.article-body > :first-child { margin-top: 0; }

/* Filet dans la couleur de la marque au-dessus des sections principales :
   dans un article de 7 000 pixels de haut, il donne des points de repère. */
.article-body h2::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: var(--cat); margin-bottom: 20px;
}
.article-body h2:first-child::before { margin-top: 0; }

/* Chapeau : le premier paragraphe annonce l'article. */
.article-body > p:first-of-type {
  font-size: 1.13rem; line-height: 1.65; color: var(--ink);
}

.article-body p { margin-bottom: 1.15em; }
.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.article-body li { margin-bottom: .55em; padding-left: .2em; }
.article-body li:last-child { margin-bottom: 0; }
.article-body strong { color: var(--ink); font-weight: 600; }

/* Les visuels du corps sont des photos de produit détourées : posées sur du
   blanc elles flottent, posées sur un aplat elles deviennent une image. */
.article-body img {
  display: block; max-width: min(100%, 440px);
  margin: 2.4em auto; padding: 26px;
  background: var(--cat-tint);
}


/* Un lien seul entre deux paragraphes est un appel à l'action, pas du texte
   courant. Sans traitement il passe pour un mot en trop : il prend
   l'apparence d'un bouton. Les liens qui entourent une image en sont exclus,
   ils deviendraient un cadre noir autour du visuel. Si le navigateur ignore
   :has(), la règle entière est écartée et le lien reste du texte simple. */
.article-body > a:not(:has(img)),
.article-product-text > a:not(:has(img)) {
  display: inline-flex; align-items: center; gap: 10px;
  margin: .4em 0 2.2em; padding: 12px 24px;
  background: var(--ink); color: #fff;
  font-family: var(--text); font-size: 14px; font-weight: 600;
  transition: background .22s var(--ease);
}
.article-body > a:not(:has(img))::after,
.article-product-text > a:not(:has(img))::after { content: "\2192"; font-size: 15px; }
.article-body > a:not(:has(img)):hover,
.article-product-text > a:not(:has(img)):hover { background: var(--cat); color: #fff; }

/* Tuile produit insérée dans le fil de l'article : elle garde son propre
   habillage, les règles d'image de l'article ne doivent pas s'y appliquer.
   Largeur bridée, sinon la tuile s'étirerait sur les 760 px du texte et
   perdrait ses proportions. */
.article-body .product-card { max-width: 460px; margin: 2.4em 0 2.6em; }
.article-body .product-card img {
  margin: 0; padding: 0; background: none; max-width: 100%;
}
.article-body table { font-size: 16px; }
.article-body th { background: var(--paper-3); }

/* ---------------------------------------------------------------- formulaires */

.form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 44px;
}
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 9px; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 17px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink-soft);
  transition: border-color .2s var(--ease);
}
.field textarea { min-height: 165px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field-hp { position: absolute; left: -9999px; }
.field-check { display: flex; gap: 13px; align-items: flex-start; font-size: 14px; }
.field-check input { width: auto; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--muted); }

.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: 18px; margin-bottom: 28px; }
.info-list svg { width: 22px; height: 22px; flex: 0 0 22px; stroke: var(--accent); fill: none; stroke-width: 1.6; margin-top: 3px; }
.info-list strong { display: block; font-family: var(--display); color: var(--ink); margin-bottom: 4px; font-size: 15px; }
.info-list a { color: var(--ink-soft); }
.info-list a:hover { color: var(--accent); }

.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------------------------------------------------------------- où nous trouver */

/* Enseignes : pas de cartes, les logos sont simplement posés côte à côte,
   en niveaux de gris, et reprennent leurs couleurs au survol. */
.retailers {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 44px 58px;
}
.retailer { display: grid; place-items: center; }
.retailer img {
  max-height: 60px; max-width: 175px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .6;
  transition: filter .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
.retailer:hover img { filter: none; opacity: 1; transform: scale(1.06); }
/* logo fourni en blanc : on l'assombrit pour qu'il reste lisible sur fond clair */
.retailer--dark img { filter: invert(1) grayscale(1); opacity: .55; }
.retailer--dark:hover img { filter: invert(1); opacity: 1; }

/* mise en page en deux colonnes : discours à gauche, enseignes à droite */
.retail-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 70px; align-items: center; }
/* grille régulière : les logos s'alignent au lieu de se répartir au hasard */
.retail-split .retailers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 52px 34px; justify-items: center;
}
@media (max-width: 992px) {
  .retail-split { grid-template-columns: 1fr; gap: 40px; }
  .retail-split .retailers { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .retail-split .retailers { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
}

/* ---------------------------------------------------------------- pied de page */

.site-footer { background: var(--ink); color: rgba(255,255,255,.58); padding: 78px 0 0; }
.site-footer h4 {
  color: #fff; font-family: var(--text);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 22px; font-weight: 700;
}
.site-footer a { color: rgba(255,255,255,.58); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 60px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 11px; }
.footer-grid li a { font-size: 14.5px; display: inline-flex; align-items: center; gap: 10px; }
.footer-grid li .dot { width: 16px; height: 16px; }
/* Le logo officiel, passé en blanc. width:auto est indispensable : sans lui,
   l'attribut width du HTML écrase la largeur et déforme le logo. */
.footer-logo img { height: 32px; width: auto; margin-bottom: 22px; filter: brightness(0) invert(1); }

/* la gamme Pro est presque noire : sur fond sombre, sa pastille passe en gris
   clair pour rester visible */
.site-footer [data-cat="pro"] { --cat: #b9b9b6; }
.mobile-nav [data-cat="pro"] { --cat: var(--pro); }
.footer-contact { font-size: 14.5px; max-width: 34ch; }
.footer-phone {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); color: #fff; font-size: 21px; font-weight: 600;
  margin: 0 0 12px;
}
.footer-phone svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
/* numéro d'urgence : détaché du reste par un filet, en légèrement plus clair */
.footer-poison {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; margin-top: 4px;
  font-size: 13.5px; color: rgba(255,255,255,.72);
}
.footer-poison a { color: #fff; font-weight: 600; white-space: nowrap; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  flex-wrap: wrap; font-size: 13px;
}
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.footer-socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-socials svg { width: 17px; height: 17px; fill: currentColor; }

/* filet des cinq couleurs de gamme, signature de la marque */
.brand-rule { display: flex; height: 4px; }
.brand-rule span { flex: 1; }
.brand-rule .s { background: var(--sanitaire); }
.brand-rule .f { background: var(--feu); }
.brand-rule .j { background: var(--jardin); }
.brand-rule .c { background: var(--camping); }
.brand-rule .p { background: var(--pro); }

/* ---------------------------------------------------------------- divers */

.notice {
  background: var(--cat-tint); border-left: 3px solid var(--cat);
  padding: 22px 26px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 32px 0; font-size: 14.5px;
}

.back-to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 46px; height: 46px; border: 0;
  background: var(--ink); color: #fff; cursor: pointer;
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), background .2s var(--ease);
  box-shadow: var(--shadow);
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--accent); }
.back-to-top svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.consent {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 300;
  max-width: 560px; margin-inline: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 26px;
}
.consent p { font-size: 14px; margin-bottom: 18px; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1200px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card--wide { grid-column: span 2; }
  .bento-card--tall { grid-row: span 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .retailers { grid-template-columns: repeat(4, 1fr); }
  .header-phone { display: none; }
}

@media (max-width: 992px) {
  .nav-main, .lang-switch { display: none; }
  .burger { display: grid; }
  .hero { min-height: 0; }
  .hero-inner { padding: 56px 0 300px; }
  .hero-copy { max-width: none; }
  .hero-product { right: 50%; transform: translateX(50%); height: auto; width: 54%; max-width: none; max-height: 300px; }
  .hero::after { background: linear-gradient(180deg, rgba(29,29,27,.86) 0%, rgba(29,29,27,.74) 46%, rgba(29,29,27,.35) 100%); }
  .product-top, .product-lower { grid-template-columns: 1fr; gap: 38px; }
  .product-hero { padding: 20px 0 44px; margin-bottom: 44px; }
  .shop-layout { grid-template-columns: 1fr; gap: 26px; }
  .shop-filters { position: static; }
  .filters-toggle { display: inline-flex; }
  .shop-filters[data-collapsed="true"] { display: none; }
  /* Sous 992 px, deux tuiles par rangée ; une seule sous 768 px. */
  .g4, .g5 { grid-template-columns: repeat(2, 1fr); }
  .grid-cards, .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 58px 0; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 22px; }
  .page-hero { margin-bottom: 46px; }
}

@media (max-width: 700px) {
  :root { --gap: 16px; }
  .wrap, .wrap-narrow { width: calc(100% - 32px); }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .bento-card--wide { grid-column: span 1; }
  .g2, .g3, .g4, .g5, .grid-cards, .shop-grid { grid-template-columns: 1fr; }
  /* Une tuile par rangée : le débord latéral de la photo n'a plus de
     gouttière où aller et pousserait la page de quelques pixels. */
  .product-card-media { margin-right: 0; }
  .field-row { grid-template-columns: 1fr; }
  .retailers { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .form-card { padding: 26px 22px; }
  .product-gallery-main { padding: 28px; }
  .article-body { font-size: 16px; }
  .acc-head { padding: 18px 2px; font-size: 16px; }
  .hero-inner { padding: 44px 0 250px; }
  .hero-tag { margin-top: 30px; }
  .hero-product { width: 62%; max-width: none; max-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .topbar, .site-header, .site-footer, .back-to-top, .consent,
  .product-actions, .search-panel { display: none !important; }
  body { background: #fff; }
}


/* ================================================================ ESSAI
   GLASSMORPHISME, page d'accueil seulement.

   Le principe : un fond translucide, un flou de ce qui passe derriere, un
   filet clair sur le bord. L'effet n'existe que s'il y a quelque chose a
   flouter : il est donc pose sur les quatre endroits de l'accueil ou une
   photo passe sous un bloc de texte. Ailleurs, sur fond blanc, il ne se
   verrait pas.

   Le bloc entier est encadre par un test de prise en charge : un navigateur
   sans backdrop-filter garde exactement la mise en page precedente.

   POUR REVENIR EN ARRIERE : supprimer d'ici jusqu'au repere de fin.
   ====================================================================== */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

  /* 1. L'en-tete colle en haut de l'ecran. En defilant, la photo du hero puis
        les sections passent dessous et se devinent au travers. */
  body:has(.hero) .site-header {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border-bottom-color: rgba(29, 29, 27, .06);
  }

  /* 2. La plaque « Notre incontournable », posee sur la photo du hero. Le
        filet de gamme reste en haut : c'est lui qui porte la couleur. */
  .hero-tag {
    padding: 20px 24px 22px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-top: 2px solid var(--cat);
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
    transition: background .3s var(--ease), transform .3s var(--ease);
  }
  .hero-tag:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-3px);
  }

  /* Sur la plaque sombre, le rouge de la gamme ne se lit plus. Le surtitre
     est eclairci ; la couleur reste portee par le filet du haut. */
  .hero-tag small { color: color-mix(in srgb, var(--cat) 42%, #fff); }

  /* Le texte blanc a quitte la photo pour le bouton : le voile n'a plus a
     garantir sa lisibilite, il ne reste qu'un souffle en bas de tuile pour
     asseoir le bouton. */
  .bento-card--photo::after {
    background: linear-gradient(180deg,
      rgba(29, 29, 27, .12) 0%, rgba(29, 29, 27, 0) 30%,
      rgba(29, 29, 27, .04) 62%, rgba(29, 29, 27, .24) 100%);
  }
}

/* Reglage d'accessibilite : certains systemes demandent de limiter les effets
   de transparence. On leur rend des fonds pleins. */
@media (prefers-reduced-transparency: reduce) {
  body:has(.hero) .site-header { background: var(--paper); backdrop-filter: none; }
  .hero-tag { background: rgba(29, 29, 27, .55); backdrop-filter: none; }
}
/* ==================================================== fin essai glassmorphisme */


/* ================================================================ ESSAI
   MANROPE (titres) + INTER (texte courant)

   Manrope porte les titres et les noms de produits, en gras : ExtraBold pour
   les grands titres, Bold pour les titres de section et les noms de produits.
   Inter, deja present sur le site, reprend les descriptions, les listes et les
   tableaux de composition.

   Manrope est un caractere variable : un seul fichier de 25 ko porte toutes
   les graisses de 200 a 800, les valeurs 700 et 800 sont donc les vraies
   graisses dessinees, pas un gras simule. Les deux fichiers sont heberges sur
   le serveur : aucun appel a Google.

   POUR REVENIR EN ARRIERE : supprimer d'ici jusqu'au repere de fin. Les
   fichiers assets/fonts/manrope-*.woff2 peuvent alors etre effaces.
   ====================================================================== */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Les grands titres portent la voix de la marque : ExtraBold. */
h1 { font-weight: 800; letter-spacing: -.025em; }
.hero h1, .page-hero h1, .product-summary h1 { font-weight: 800; }

/* Titres de section et de bloc : Bold. */
h2, h3, h4, h5 { font-weight: 700; letter-spacing: -.015em; }
.article-body h2, .article-body h3, .article-body h4, .article-body h5,
.faq h2, .also h2, .buy-panel-head h2, .section-head h2 { font-weight: 700; }

/* Les noms de produits, ou qu'ils s'affichent : tuile de boutique, tuile
   posee dans un article, bloc « Decouvrez aussi ». Meme graisse partout, pour
   qu'un produit se reconnaisse au premier coup d'oeil. */
.product-card h3, .bento-card h3, .post-card h3 { font-weight: 700; }
.hero-tag strong { font-weight: 700; }

/* Le texte courant revient a Inter : descriptions, listes, tableaux de
   composition. Les capitales espacees retrouvent l'approche d'origine. */
.eyebrow, .tag, .post-date { letter-spacing: .16em; }
/* ==================================================== fin essai Manrope */


/* ---------------------------------------------------------------- arrondis
   Ces blocs et ces boutons avaient un angle droit inscrit en dur, sans passer
   par les jetons --radius. Ils les reprennent ici, pour que tout le site
   s'arrondisse ou se redresse d'un seul reglage. */

/* Tuile produit. Pas de overflow: hidden : la photo doit continuer a deborder
   du cadre, c'est le principe de la tuile. */
.product-card { border-radius: var(--radius); }
.product-card-cta { border-radius: var(--radius-pill); }

/* Vignette d'article, sur l'index des astuces comme en bas de page. */
.post-card-media { border-radius: var(--radius); }

/* Filtre de gamme au-dessus des astuces : des pastilles, comme les boutons. */
.astuces-chip { border-radius: var(--radius-pill); }

/* Visuels poses dans le corps d'un article. */
.article-body img { border-radius: var(--radius); }

/* Panneau d'achat et bandeau de fiche produit : arrondis seulement du cote
   ou ils ne touchent pas le bord de l'ecran. */
.buy-panel { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }


/* ------------------------------------------------------- titre d'accueil
   Une seule phrase, trois graisses. « Des solutions » arrive en fine, le mot
   de marque frappe en ExtraBold, la suite reprend en graisse moyenne. C'est
   le contraste qui porte l'impact, la taille ne fait que l'amplifier.
   Manrope etant un caractere variable, ces trois graisses sont dessinees et
   non simulees par le navigateur. */
.hero h1 {
  font-size: clamp(2.45rem, 5.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: 30px;
}
.hero h1 .h1-lead { font-weight: 300; }
.hero h1 em       { font-weight: 800; letter-spacing: -.045em; }
.hero h1 .h1-tail { font-weight: 500; }

/* Le titre grandit, la colonne de texte suit. La largeur reste bornee en
   pourcentage pour ne jamais venir sous le flacon, cale a droite. */
.hero-copy { max-width: min(720px, 54vw); }

/* Sous 700 px la mesure est trop courte pour un titre de cette taille : il
   passerait a six lignes et repousserait le reste sous la ligne de flottaison.
   Il grandit donc, mais avec retenue. */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(2.3rem, 9.6vw, 2.9rem); line-height: 1.08; }
}


/* ------------------------------------------- gammes a gauche de la banniere
   Les cinq gammes quittent la barre horizontale de l'en-tete pour une colonne
   posee a gauche de la banniere : l'entree de rayon est lisible des l'arrivee,
   et la banniere n'a plus a la porter. La barre de l'en-tete est masquee sur
   cette page pour ne pas faire doublon ; elle reste en place partout ailleurs.
   Sous 992 px la colonne disparait : les gammes sont alors dans le menu. */

.home-top {
  display: grid; grid-template-columns: 276px minmax(0, 1fr);
  gap: 24px; align-items: start;
  width: min(100% - 44px, var(--wrap)); margin: 24px auto 0;
}

.home-cats {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 14px 18px;
}
.home-cats-title {
  font-family: var(--display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px; padding-left: 14px;
}
.home-cats ul { list-style: none; margin: 0; padding: 0; }
.home-cats li { margin: 0; }
/* La ligne d'une gamme : le lien mene a la page, le chevron ouvre le menu.
   Deux cibles distinctes, pour qu'ouvrir le menu ne quitte pas la page. */
.home-cats-row { display: flex; align-items: center; }
.home-cats-row > a {
  position: relative;
  flex: 1; display: flex; align-items: center; gap: 16px;
  padding: 12px 6px 12px 14px; border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 600; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.home-cats-row > a:hover { background: var(--cat-tint); color: var(--cat); }

/* Le pictogramme de la gamme est pose sur une pastille teintee : a cette
   taille, l'icone seule se perdait sur le blanc. La pastille est un pseudo
   element du lien et non une ombre du picto : le masque qui decoupe l'icone
   effacerait aussi son ombre. Elle est calee sur le picto, qui commence au
   retrait du lien : 14px de retrait moins 8px de debord font 6px. Au survol
   la ligne prend la teinte, la pastille passe au blanc pour que le picto ne
   se fonde pas dans le fond. */
.home-cats-row > a::before {
  content: ""; position: absolute; left: 6px; top: 50%;
  width: 36px; height: 36px; margin-top: -18px;
  border-radius: var(--radius-pill); background: var(--cat-tint);
  transition: background .2s var(--ease);
}
.home-cats-row > a:hover::before { background: var(--paper); }
.home-cats .dot { position: relative; width: 20px; height: 20px; }

.home-cats-toggle {
  flex: 0 0 auto; width: 34px; height: 34px; margin-right: 2px;
  display: grid; place-items: center; cursor: pointer;
  border: 0; background: none; color: var(--muted);
  border-radius: var(--radius-sm);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.home-cats-toggle svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.home-cats-toggle:hover { background: var(--cat-tint); color: var(--cat); }
.home-cats-toggle[aria-expanded="true"] { color: var(--cat); }
.home-cats-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Le menu deroulant : retrait a gauche et filet dans la couleur de la gamme,
   pour qu'on voie d'un coup d'oeil a quelle gamme il appartient. */
.home-cats-sub {
  margin: 3px 0 8px 24px;
  border-left: 2px solid var(--cat-tint);
  padding-left: 10px;
}
.home-cats-sub a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.home-cats-sub a:hover { background: var(--cat-tint); color: var(--cat); }
.home-cats-sub .count { margin-left: auto; font-size: 12.5px; opacity: .7; }

/* La banniere devient un bloc a part entiere : arrondie, calee dans la grille
   du site, et non plus collee aux bords de l'ecran. */
.home-top .hero {
  border-radius: var(--radius-lg); overflow: hidden;
  min-height: clamp(480px, 62vh, 660px);
}
/* La banniere est une boite flexible : sans `flex: 1`, ce bloc se reduit a la
   largeur de son contenu et les pourcentages qu'il porte deviennent circulaires,
   ce qui coupait le titre au milieu d'un mot. */
.home-top .hero .hero-inner {
  flex: 1 1 auto; min-width: 0;
  width: auto; margin: 0;
  padding: clamp(40px, 4vw, 66px) clamp(28px, 3.2vw, 58px);
}
/* Le paragraphe a disparu de la banniere : le bloc de texte se resserre,
   ce qui laisse la place au flacon. */
.home-top .hero-copy { max-width: min(560px, 54%); }
/* La colonne est plus etroite que la pleine largeur : le titre se cale sur
   elle, sans quoi il pousserait la banniere a une hauteur demesuree. */
.home-top .hero h1 { font-size: clamp(2.3rem, 4.85vw, 4.5rem); }
/* Entre 993 et 1200 px la banniere se resserre plus vite que la fenetre : la
   taille doit ralentir, sinon la premiere ligne rejoint le flacon. En dessous
   de 993 px la banniere reprend la pleine largeur et la borne basse du clamp
   redevient la bonne : cette regle ne doit surtout pas s'y appliquer. */
@media (min-width: 993px) and (max-width: 1200px) {
  .home-top .hero h1 { font-size: 4.5vw; }
}
/* Le titre tient en deux mouvements : « Des solutions » puis « Fulgurantes ».
   Chaque morceau prend sa ligne, au lieu de dependre de la largeur disponible :
   la coupure ne bouge plus d'une taille d'ecran a l'autre. Le morceau vide de
   chaque langue disparait, sinon il ouvrirait une ligne blanche. */
.home-top .hero h1 :is(.h1-lead, em) { display: block; }
.home-top .hero h1 :is(.h1-lead, .h1-tail):empty { display: none; }
/* Le flacon prend toute la hauteur de la banniere et gagne en largeur. */
.home-top .hero-product { right: 3%; bottom: 0; height: 100%; max-width: 42%; }

@media (max-width: 992px) {
  .home-top { display: block; width: auto; margin: 0; }
  .home-cats { display: none; }
  /* La banniere redevient pleine largeur et le flacon reprend sa taille et son
     debordement d'origine : les valeurs du grand ecran doivent etre annulees
     une a une, une requete media n'ajoute pas de specificite. */
  .home-top .hero { border-radius: 0; min-height: 0; overflow: visible; }
  .home-top .hero .hero-inner {
    width: min(100% - 44px, var(--wrap)); margin-inline: auto; padding: 56px 0 300px;
  }
  .home-top .hero-copy { max-width: none; }
  .home-top .hero-product {
    right: 50%; bottom: -46px; height: auto; width: 54%; max-width: none; max-height: 300px;
  }
}


/* ------------------------------------------------------ banniere a diapositives
   Trois produits defilent dans la banniere. Le titre, lui, ne bouge pas : il
   n'y a qu'un h1 par page et c'est la phrase de la marque. Ce sont la plaque
   et le flacon qui tournent.

   Les diapositives sont empilees dans la meme cellule de grille plutot que
   positionnees en absolu : le bloc prend la hauteur de la plus haute et rien
   ne saute quand le nom du produit est plus long. */
.hero-slider { margin-top: 44px; position: relative; z-index: 2; }
.hero-slides { display: grid; justify-items: start; }
.hero-slides > .hero-tag {
  grid-area: 1 / 1;
  margin-top: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.hero-slides > .hero-tag[data-on] { opacity: 1; visibility: visible; }

/* Les flacons occupent la meme place que le flacon unique d'avant : le
   conteneur reprend la boite de la banniere, les images gardent leurs regles. */
.hero-products { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-product {
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
}
.hero-product[data-on] { opacity: 1; visibility: visible; }

/* Pastilles de navigation. La pastille active s'allonge dans la couleur de la
   gamme : la position dans la serie se lit sans compter. */
.hero-dots { display: flex; gap: 9px; margin-top: 26px; }
.hero-dots button {
  width: 9px; height: 9px; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .38);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.hero-dots button:hover { background: rgba(255, 255, 255, .7); }
.hero-dots button[aria-current="true"] { width: 26px; background: var(--cat); }
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 700px) {
  .hero-slider { margin-top: 30px; }
}


/* -------------------------------------------------- banniere sur fond uni
   La photo de salle de bain concurrencait les flacons. Elle est remplacee
   par un aplat dans la teinte du flacon affiche, tres sombre : le texte
   blanc et le rouge de la marque restent lisibles par-dessus. La couleur est
   portee par chaque diapositive et posee par le script sur --hero-fond.
   Le voile en degrade n'a plus lieu d'etre sur un aplat. */
.hero { background: var(--hero-fond, var(--ink)); transition: background-color .6s var(--ease); }
.hero::after { content: none; }

/* Le fond ne prend plus de place : le flacon peut occuper la sienne. */
/* Largeur explicite : l'image etant hors flux, la boite ne peut plus se caler
   sur elle et resterait vide. */
.home-top .hero-product { right: 1%; bottom: 0; height: 100%; width: 52%; max-width: 52%; }
/* Le bloc de texte doit rester plus large que la plus longue des deux lignes,
   sinon elle se recoupe en deux. Il s'arrete bien avant le flacon, qui commence
   a 47 % de la banniere. */
.home-top .hero-copy { max-width: min(450px, 46%); }

@media (max-width: 992px) {
  .home-top .hero-product {
    right: 50%; bottom: -46px; height: auto; width: 62%; max-width: none; max-height: 320px;
  }
  .home-top .hero-copy { max-width: none; }
}

/* Le flacon mobile est plus grand : la reserve sous le texte se resserre,
   sinon un vide s'installe entre la plaque et le produit. */
@media (max-width: 992px) {
  .home-top .hero .hero-inner { padding-bottom: 235px; }
}
@media (max-width: 700px) {
  .home-top .hero .hero-inner { padding-bottom: 210px; }
}


/* ------------------------------------------------- banniere claire
   Un aplat pale plutot qu'un fond sombre : on parle de proprete, la banniere
   doit respirer la lumiere. Le texte repasse donc en encre sombre et la
   plaque produit devient un verre clair. */
.hero { color: var(--ink); }
.hero h1 { color: var(--ink); }
.hero-eyebrow { color: var(--ink-soft); }

.hero-tag {
  color: var(--ink);
  border: 1px solid rgba(29, 29, 27, .1);
  border-top: 2px solid var(--cat);
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 14px 34px rgba(29, 29, 27, .08);
}
.hero-tag:hover { background: rgba(255, 255, 255, .82); }
.hero-tag small { color: var(--cat); }
.hero-tag strong { color: var(--ink); }
.hero-tag strong svg { fill: var(--cat); }

.hero-dots button { background: rgba(29, 29, 27, .16); }
.hero-dots button:hover { background: rgba(29, 29, 27, .34); }
.hero-dots button:focus-visible { outline-color: var(--ink); }


/* ============================================================== BENTO
   Le site est fait de cartes posees sur un fond gris. Les cartes blanches qui
   se suivent ne sont plus separees : elles forment une seule surface continue,
   arrondie seulement au debut et a la fin de chaque serie. Les coupures
   repetees d'une carte a l'autre hachaient la lecture.

   Les cartes sont les enfants directs de <main>. Les fiches produits
   enveloppent leur contenu dans un div[data-cat], d'ou le :is() en tete de
   chaque selecteur.
   ================================================================== */
body { background: var(--paper-2); }

:is(main, main > [data-cat]) > :is(.section, .wrap, .faq, .page-hero, .product-hero, .star-band, .article-banner, .home-top) {
  width: min(100% - 44px, var(--wrap));
  margin-inline: auto;
}

/* --- surfaces blanches, en serie continue ----------------------------- */
:is(main, main > [data-cat]) > :is(.section, .wrap, .faq, .page-hero:not(.page-hero--cat)) {
  background: var(--paper);
  border-radius: 0;
  margin-bottom: 0;
  padding: clamp(34px, 3.4vw, 58px) clamp(22px, 2.6vw, 48px);
}
/* Le conteneur interieur ne gere plus ni largeur ni marges : la carte s'en
   charge. */
:is(main, main > [data-cat]) > :is(.section, .faq, .page-hero:not(.page-hero--cat)) > .wrap {
  width: auto; margin-inline: 0; padding-inline: 0;
}

/* Premiere carte d'une serie : elle n'est pas precedee d'une autre carte. */
:is(main, main > [data-cat]) > :is(.section, .wrap, .faq, .page-hero:not(.page-hero--cat)):not(:is(.section, .wrap, .faq, .page-hero:not(.page-hero--cat)) + *) {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
/* Derniere carte d'une serie : elle n'est pas suivie d'une autre carte. */
:is(main, main > [data-cat]) > :is(.section, .wrap, .faq, .page-hero:not(.page-hero--cat)):not(:has(+ :is(.section, .wrap, .faq, .page-hero:not(.page-hero--cat)))) {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  margin-bottom: 14px;
}

/* Le bandeau de reperes fait exception a la serie : il parle de la marque, pas
   du catalogue qui suit. Il referme donc sa carte et celle d'apres rouvre la
   sienne, alors que la regle de serie les aurait soudees. Sa hauteur se resserre
   aussi : isole, il n'a plus a porter la respiration d'une section entiere.
   La regle doit rester APRES celles de la serie : elle a la meme specificite,
   c'est son rang qui la fait gagner. */
:is(main, main > [data-cat]) > .section.section-promesses {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  margin-bottom: 14px;
  padding-block: clamp(20px, 2vw, 30px);
}
:is(main, main > [data-cat]) > .section-promesses + :is(.section, .wrap, .faq, .page-hero:not(.page-hero--cat)) {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/* --- cartes qui gardent leur teinte ou leur image ---------------------- */
/* Le bandeau de gamme et le haut de fiche portent la couleur de la gamme,
   c'est un repere de navigation : ils ne passent pas au blanc. */
:is(main, main > [data-cat]) > :is(.page-hero--cat, .product-hero, .star-band, .article-banner) {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
:is(main, main > [data-cat]) > :is(.page-hero--cat, .product-hero, .star-band) > .wrap {
  width: auto; margin-inline: 0; padding-inline: clamp(22px, 2.6vw, 48px);
}
:is(main, main > [data-cat]) > .page-hero--cat { padding: clamp(34px, 3.2vw, 52px) 0; }
:is(main, main > [data-cat]) > .home-top { margin-bottom: 14px; }

/* Respiration avant le pied de page. Posee sur <main> plutot que sur sa
   derniere carte : sur les fiches produits, le dernier enfant est le tiroir
   d'achat, un bloc fixe sur lequel une marge ne ferait rien. */
main { padding-bottom: 30px; }


/* ------------------------------------- flacon centre et appel a l'action simple
   Le flacon etait pose sur le bord bas de la banniere ; il se centre desormais
   sur la hauteur. Sur mobile il continue de deborder sous la banniere, c'est
   la que le geste fonctionne. */
.home-top .hero-product { object-position: center; }
@media (max-width: 992px) {
  .home-top .hero-product { object-position: bottom; }
}

/* La plaque de verre a bord colore faisait beaucoup pour une seule ligne.
   Elle laisse la place a un simple bouton, celui du reste du site, precede
   d'une mention discrete. */
.hero-tag {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 13px;
  max-width: none; padding: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero-tag:hover { background: none; transform: none; }
.hero-tag small {
  font-family: var(--text);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.hero-tag strong {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  background: var(--cat); color: #fff;
  font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.2;
  transition: background .22s var(--ease);
}
.hero-tag:hover strong { background: var(--ink); }
.hero-tag strong svg { width: 18px; height: 13px; fill: #fff; flex: 0 0 auto; }


/* ------------------------------------------------ bandeau de promesses
   Quatre reperes en ligne juste sous la banniere : ce qui rassure avant
   meme d'entrer dans le catalogue. Trois des quatre sont cliquables. */
.promesses {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
/* Trois reperes sur quatre sont des liens ; le quatrieme n'en est pas un et
   porte donc ses deux blocs directement. Les deux cas doivent s'aligner. */
.promesses li { margin: 0; display: flex; }
.promesses li > a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 16px; border-radius: var(--radius);
  transition: background .2s var(--ease);
}
.promesses li:not(:has(a)) { align-items: center; justify-content: center; gap: 16px; padding: 14px 16px; }
/* Un filet entre les reperes plutot qu'un ecart : cales a gauche dans des
   colonnes de meme largeur, ils laissaient des vides inegaux et la rangee
   paraissait mal reglee. Centres et scandes, ils se lisent comme une barre. */
.promesses li + li { border-left: 1px solid var(--line); }
.promesses li > a:hover { background: var(--cat-tint); }
.promesse-ico {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--cat-tint); color: var(--cat);
}
.promesse-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.promesse-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.promesse-txt strong { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); }
.promesse-txt small { font-size: 13px; color: var(--muted); }

/* En deux colonnes, le filet vertical ne separe plus que les paires : il
   disparait en debut de ligne et un filet horizontal separe les deux rangees. */
@media (max-width: 1120px) {
  .promesses { grid-template-columns: repeat(2, 1fr); }
  .promesses li:nth-child(odd) { border-left: 0; }
  .promesses li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .promesses { grid-template-columns: 1fr; }
  /* Le filet gauche est annule sur le meme selecteur que celui qui le pose :
     un `.promesses li` seul perdait contre `.promesses li + li`, et un liseré
     d'un pixel decalait un repere sur deux. */
  .promesses li, .promesses li + li { border-left: 0; }
  .promesses li + li { border-top: 1px solid var(--line); }
}

/* ------------------------------------------- colonne des gammes et banniere
   Le menu principal est revenu dans l'en-tete, au niveau du logo : la rangee
   n'a plus que deux cases, la colonne des gammes a gauche et la banniere a
   droite. */
.home-cats { grid-column: 1; }
.home-top .hero { grid-column: 2; }

/* ------------------------------------------------ bandeau du haut
   Le bandeau prend la couleur du logo, relevee dans le fichier lui-meme :
   un vert tres sombre, presque noir. Le texte y passe donc en clair. */
.topbar {
  background: var(--logo);
  color: rgba(255, 255, 255, .72);
  border-bottom: 0;
}
.topbar-msg b { color: #fff; font-weight: 600; }
.topbar a { color: rgba(255, 255, 255, .72); }
.topbar a:hover { color: #fff; }


/* ------------------------------------------- mots longs sur petit ecran
   Le neerlandais soude ses mots : « onderhoudsbehoeften » depasse la largeur
   d'un telephone et faisait deborder la page. Les titres sont donc coupables
   en fin de ligne. La cesure suit la langue declaree sur <html> ; la coupure
   franche ne sert que de filet de securite si le navigateur n'a pas le
   dictionnaire. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* La cesure automatique demande un dictionnaire que tous les navigateurs
   n'embarquent pas. Le seul mot vraiment trop long, « onderhoudsbehoeften »,
   porte donc une cesure conditionnelle dans le texte lui-meme. */


/* ------------------------------------------- tuile produit, mots longs
   « 1fr » garde par defaut la largeur minimale de son contenu : un nom de
   produit neerlandais insecable elargissait la colonne de texte et poussait
   la photo hors de la tuile, jusqu'a deborder la page. « minmax(0, 1fr) »
   autorise la colonne a se resserrer, le nom se coupe alors en fin de ligne. */
.product-card { grid-template-columns: minmax(0, 1fr) 54%; }


/* ------------------------------------------- tuile produit : coin decoupe
   Le bouton de la tuile devient une pastille ronde posee dans un creux du
   coin bas gauche. Le creux n'est pas une vraie decoupe : l'anneau autour du
   bouton reprend la couleur de la carte qui porte la tuile, ce qui donne
   l'illusion d'un trou. Les tuiles etant toujours posees sur une carte
   blanche, l'anneau est blanc.

   Le libelle reste dans le HTML, il n'est plus affiche mais reste lu par les
   lecteurs d'ecran : la fleche seule ne dirait rien. */
.product-card { padding-bottom: 34px; }
.product-card-cta {
  position: absolute; left: 20px; bottom: -15px; z-index: 4;
  width: 48px; height: 48px; margin: 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-pill);
  background: var(--cat); color: #fff;
  box-shadow: 0 0 0 9px var(--paper);
  font-size: 0; white-space: nowrap;
  transition: transform .28s var(--ease), background .28s var(--ease);
}
.product-card-cta::after {
  content: ""; width: 19px; height: 14px; background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
  mask: var(--fleche) center / contain no-repeat;
}
.product-card:hover .product-card-cta {
  background: var(--ink); color: #fff;
  transform: translateX(4px);
}

/* La photo deborde a droite et en bas : elle passe sous la pastille. */
.product-card-media { z-index: 1; }


/* ============================================ tuile produit, disposition carree
   Le produit est centre dans un carre teinte, la gamme et le nom passent en
   dessous. La pastille se loge dans le coin bas droit du carre, dans un creux
   obtenu par un anneau de la couleur de la carte qui porte la tuile.
   ================================================================== */
.product-card {
  display: block;
  background: none;
  padding: 0;
  min-height: 0;
  border-radius: 0;
}

.product-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0;
  display: grid; place-items: center;
  background: var(--cat-tint);
  border-radius: var(--radius);
  transition: background .3s var(--ease);
}
.product-card-media img {
  width: 74%; height: 74%;
  object-fit: contain;
  transition: transform .4s var(--ease);
}
.product-card:hover .product-card-media img { transform: translateY(-6px) scale(1.03); }

/* Le pictogramme de gamme accompagne desormais le nom de la gamme, sous le
   visuel, au lieu de flotter dans le coin du carre. */
.product-card .tag { display: inline-flex; align-items: center; gap: 7px; }
.product-card .product-card-flag {
  position: static; width: 13px; height: 13px;
  opacity: 1;
}

.product-card-body { display: block; padding: 16px 2px 0; }
.product-card .tag { padding-left: 0; margin-bottom: 6px; }
.product-card h3 { min-height: 0; font-size: 1.02rem; margin: 0; }

/* La pastille se pose dans le coin bas droit du carre. L'anneau reprend la
   couleur de la carte qui porte la tuile, ce qui creuse le coin. */
.product-card-cta {
  position: absolute; right: -6px; bottom: -6px; left: auto; z-index: 4;
  width: 48px; height: 48px; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill);
  background: var(--cat); color: #fff;
  box-shadow: 0 0 0 9px var(--paper);
  font-size: 0; line-height: 0;
  transition: transform .28s var(--ease), background .28s var(--ease);
}
.product-card-cta::after {
  content: ""; flex: 0 0 auto; width: 17px; height: 17px;
  background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
  mask: var(--fleche) center / contain no-repeat;
}
.product-card:hover .product-card-cta {
  background: var(--ink);
  transform: translate(-3px, -3px);
}

/* Quatre colonnes pour les listes de produits. */
.shop-grid { grid-template-columns: repeat(4, 1fr); row-gap: 34px; }

@media (max-width: 1200px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px)  { .shop-grid, .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .shop-grid, .grid-cards { grid-template-columns: 1fr; } }


/* ------------------------------------- tuiles de gamme : bouton libelle
   La plaque de verre depoli laisse la place a un bouton : le pictogramme de la
   gamme, son nom et la fleche, dans la couleur de la gamme. Un seul objet a
   lire au lieu d'une plaque, d'un filet et d'un compteur.

   La geometrie est celle de la pastille des tuiles produit, au pixel pres : le
   bouton deborde de 6 px hors du coin et porte un anneau de 9 px de la couleur
   de la carte, qui y creuse l'entaille. Pour que l'anneau ne soit pas rogne, la
   tuile ne coupe plus a ses bords : c'est la photo qui porte l'arrondi. C'est
   la difference avec la tuile produit, dont le carre ne coupait rien, et c'est
   ce qui laissait un croissant de photo dans le coin. */
.bento-card--photo { overflow: visible; }
.bento-card--photo img.bg,
.bento-card--photo::after { border-radius: inherit; }

.bento-card--photo .bento-foot {
  position: absolute; right: -6px; bottom: -6px; z-index: 4;
  width: auto; margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--cat); color: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 9px var(--paper);
  transition: transform .28s var(--ease), background .28s var(--ease);
}
.bento-card--photo .bento-foot::before { content: none; }
.bento-card--photo .bento-foot::after {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px;
  background: var(--fleche-blanche) center / contain no-repeat;
}
/* Le pictogramme de la gamme ouvre le bouton. Il est peint en blanc : sur
   l'aplat de sa propre couleur, sa teinte d'origine ne se verrait pas. */
.bento-card--photo .bento-foot .dot { width: 17px; height: 17px; background: #fff; }
.bento-card--photo .bento-foot h3 {
  font-size: 1.02rem; font-weight: 700; margin: 0; color: #fff;
  letter-spacing: 0; white-space: nowrap;
}
.bento-card--photo .bento-meta { display: none; }
.bento-card--photo:hover .bento-foot {
  background: var(--ink);
  transform: translate(-3px, -3px);
}

/* Cinq etoiles decoupees dans une bande a deux couleurs : le taux de
   remplissage est la note ramenee en pourcentage, ce qui rend la decimale sans
   avoir a dessiner une demi-etoile. Servie a trois endroits : le menu des
   gammes, la fiche produit et la tuile, qui fixent chacun leur taille. */
.note-etoiles {
  /* `display` explicite : pose sur un span dans un contexte non flex,
     l element resterait en ligne et le masque n aurait aucune boite a peindre. */
  display: block;
  width: 118px; height: 20px; margin: 0;
  background: linear-gradient(90deg,
    var(--etoile-pleine) var(--taux, 100%), var(--line) var(--taux, 100%));
  -webkit-mask: var(--etoile) left center / 20% 100% repeat-x;
  mask: var(--etoile) left center / 20% 100% repeat-x;
}


/* ------------------------------------------ note client sur la fiche produit
   La note Amazon du produit, sous son titre. Elle vient de
   tools/notes-amazon.tsv et n'apparait qu'a partir de dix avis : en dessous,
   un chiffre ne veut rien dire. La source est nommee et le nombre d'avis
   affiche, c'est ce qui rend l'affichage loyal et verifiable. */
.product-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -2px 0 18px; font-size: 14px;
}
.product-note .note-etoiles { width: 94px; height: 16px; margin: 0; }
.product-note strong {
  font-family: var(--display); font-weight: 700; color: var(--note-verte);
}
.product-note a {
  color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.product-note a:hover { color: var(--accent); text-decoration-color: currentColor; }


/* ---------------------------------------- note client sous la tuile produit
   Les etoiles et le nombre d'avis, sans le chiffre : sur une tuile, la forme
   se lit d'un coup d'oeil et la valeur exacte attend la fiche. Pas de lien
   non plus, la tuile entiere mene deja au produit. Les tuiles sans avis n'ont
   pas cette ligne : reserver la place laisserait un vide sur les deux tiers
   du catalogue. */
.card-note {
  display: flex; align-items: center; gap: 8px;
  margin: 7px 0 0; font-size: 12.5px; color: var(--muted);
}
.card-note .note-etoiles { width: 76px; height: 13px; margin: 0; }

/* ------------------------------------- note client sous le menu des gammes
   La colonne est plus courte que la banniere qu'elle borde : au-dessus de
   992 px elle s'etire a sa hauteur et la note se cale en bas, ce qui comble le
   vide et met la preuve sociale dans le premier ecran. Le filet part a fleur
   des bords de la carte, d'ou les marges negatives.

   La mise en colonne est enfermee dans une requete media : posee au global,
   son `display: flex` ecraserait le `display: none` qui masque la colonne sous
   992 px, et le menu reapparaitrait en double du burger. */
@media (min-width: 993px) {
  .home-cats { align-self: stretch; display: flex; flex-direction: column; }
  .home-cats-note { margin-top: auto; }
}
.home-cats-note {
  margin-right: -14px; margin-left: -14px;
  padding: 18px 14px 0;
  border-top: 1px solid var(--line);
}
.home-cats-note .note-etoiles { width: 104px; height: 18px; margin: 0 0 12px; }
.home-cats-note-val { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.home-cats-note-val strong {
  font-family: var(--display); font-size: 2.1rem; font-weight: 800;
  line-height: 1; color: var(--note-verte);
}
.home-cats-note-val span { font-size: 14px; color: var(--muted); }
.home-cats-note-nb { margin: 9px 0 0; font-size: 13.5px; }
.home-cats-note-nb a {
  color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.home-cats-note-nb a:hover { color: var(--accent); text-decoration-color: currentColor; }


/* ------------------------------------------- entree animee de la banniere
   Le titre, le flacon et l'appel a l'action montent en se defloutant, l'un
   apres l'autre. C'est le « reveal » qu'on voit partout aujourd'hui : discret,
   il donne le depart de la lecture sans faire attendre.

   Trois precautions :
   - l'etat final est l'etat de repos, l'animation part de l'etat trouble. Un
     navigateur qui n'animerait pas afficherait le texte normalement, sans
     jamais le cacher ;
   - `both` fige l'etat de depart pendant le retard, sinon le texte apparait
     puis disparait pour revenir ;
   - tout est enferme dans `prefers-reduced-motion: no-preference`, l'animation
     ne se declenche pas pour qui demande a limiter les mouvements. */
@keyframes hero-monte {
  from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes hero-flacon {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-top .hero h1 :is(.h1-lead, em, .h1-tail),
  .home-top .hero .hero-slider {
    animation: hero-monte .85s var(--ease) both;
  }
  .home-top .hero h1 .h1-lead { animation-delay: .06s; }
  .home-top .hero h1 em       { animation-delay: .18s; }
  .home-top .hero h1 .h1-tail { animation-delay: .18s; }
  /* En neerlandais le premier morceau est vide : c'est le mot de marque qui
     ouvre le titre, il prend donc le premier temps et la suite le second. */
  .home-top .hero h1:has(.h1-lead:empty) em       { animation-delay: .06s; }
  .home-top .hero h1:has(.h1-lead:empty) .h1-tail { animation-delay: .18s; }
  .home-top .hero .hero-slider { animation-delay: .34s; }

  /* Le flacon monte sans flou : le detourage est net, un flou le ferait baver
     sur l'aplat. L'animation porte sur la pile et non sur chaque flacon, que
     le diaporama fait deja apparaitre et disparaitre. */
  .home-top .hero-products { animation: hero-flacon 1s var(--ease) .12s both; }
}


/* --------------------------------------------- fond de banniere qui respire
   L'aplat seul manquait de relief. Deux nappes de couleur, tirees de la teinte
   de la diapositive en cours, se deplacent tres lentement l'une sur l'autre :
   le fond bouge sans qu'on le regarde bouger.

   Les deux teintes sont calculees a partir de `--hero-fond` : elles suivent
   donc chaque produit du diaporama sans reglage supplementaire. L'une eclaircit
   vers le blanc, l'autre fonce en gardant la teinte, ce qui evite le gris.

   La nappe se pose sous le contenu : z-index 0, contre 2 pour le texte et 3
   pour le flacon. */
.home-top .hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(36% 44% at 24% 28%,
      color-mix(in srgb, var(--hero-fond, #fff) 20%, #fff) 0%, transparent 66%),
    radial-gradient(40% 48% at 74% 74%,
      color-mix(in srgb, var(--hero-fond, #fff) 82%, #000) 0%, transparent 64%);
}

/* Debordement et mouvement sont reserves au grand ecran. Sous 992 px la
   banniere passe en `overflow: visible` pour laisser le flacon deborder sous
   elle : une nappe plus grande que sa boite deborderait avec lui et baverait
   sur le gris de la page. Elle reste donc dans ses bords, et fixe. */
@media (min-width: 993px) and (prefers-reduced-motion: no-preference) {
  .home-top .hero::before {
    inset: -25%;
    animation: aurore 22s ease-in-out infinite alternate;
  }
}

/* Un aller simple, joue en alternance : la boucle ne se voit pas puisqu'elle
   revient par ou elle est venue. Les valeurs restent faibles, il s'agit de
   respirer et non de defiler. */
@keyframes aurore {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}
/* ------------------------------------- points forts a cote du flacon
   Un libelle par argument, ancre en pourcentage de l'image et sortant vers la
   gauche : le flacon est cale a droite de la banniere, un texte qui partirait
   a droite serait coupe par le bord, et un texte pose sur le flacon couvrirait
   son etiquette.

   Le flacon est enveloppe dans un `div.hero-product` : la boite est celle
   qu'occupait l'image, si bien que les regles de position existantes valent
   toujours, mais elle peut desormais porter des enfants. Les pourcentages des
   reperes se lisent donc sur l'image.

   Le point d'ancrage n'a plus de marque visible : le libelle se suffit, une
   puce en plus faisait un objet de trop sur le flacon. */
/* Boite en bloc et image posee en absolu dedans : en grille, la hauteur `100 %`
   de l'image se resolvait contre une rangee qui grandissait avec elle, si bien
   que l'image gardait sa taille intrinseque et debordait de la banniere. */
.hero-product { display: block; }
/* L'image remplit la boite du flacon et s'y contient : `object-fit` la garde
   entiere et a ses proportions quelle que soit la forme de la boite. Un
   `max-height: 100%` ne suffisait pas, un pourcentage de hauteur ne valant
   rien quand le parent est en hauteur automatique : l'image debordait alors
   de la banniere, qui la coupait. */
.hero-product > img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}

.hero-plus {
  position: absolute; left: var(--x); top: var(--y);
  width: 0; height: 0;
}
/* Sens de sortie : par defaut vers la gauche, `--d` vers la droite. */
.hero-plus > span {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 8px 15px; border-radius: var(--radius-pill);
  /* Fond de secours plein : un navigateur sans `backdrop-filter` doit garder
     un libelle lisible, pas un rectangle transparent. */
  background: var(--paper); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .6);
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(29, 29, 27, .14);
}

/* Le verre depoli, quand le navigateur sait le rendre : on devine le flacon
   sous le libelle, qui cesse de faire un aplat de plus sur la banniere. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-plus > span {
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    backdrop-filter: blur(16px) saturate(165%);
  }
}

/* Reglage systeme « limiter la transparence » : on rend un fond plein. */
@media (prefers-reduced-transparency: reduce) {
  .hero-plus > span { background: var(--paper); backdrop-filter: none; }
}
/* Le libelle qui sort a droite n'a devant lui que le bord de la banniere, et
   sa largeur ne bouge pas avec la fenetre : sous 1280 px il finissait coupe.
   Sa zone d'ancrage court donc jusqu'au bord de la boite du flacon, et il est
   autorise a passer sur deux lignes plutot qu'a sortir du cadre. Le libelle
   qui sort a gauche n'a pas ce souci : devant lui il y a toute la banniere. */
.hero-plus--d { width: auto; right: 6px; }
.hero-plus--d > span {
  right: auto; left: 0;
  max-width: 100%; white-space: normal; text-align: center;
}

/* Entre 993 et 1240 px la banniere s'est retrecie mais pas le libelle, qui
   passait alors sur deux lignes. Un point de moins et des marges plus courtes
   le ramenent sur une seule, sans le rendre illisible. */
@media (min-width: 993px) and (max-width: 1240px) {
  .hero-plus > span { font-size: 12px; padding: 7px 12px; }
}

/* L'entree rejoue a chaque diapositive : la regle est accrochee a `[data-on]`,
   que le script pose sur le flacon affiche. L'animation repart donc a zero
   chaque fois qu'un flacon prend la main, et pas seulement au chargement.

   L'etat de repos reste l'etat visible : sans animation, ou pour qui demande a
   limiter les mouvements, les libelles sont simplement la. */
@media (prefers-reduced-motion: no-preference) {
  .hero-product[data-on] .hero-plus > span { animation: bulle-entre .55s var(--ease) both; }
  .hero-product[data-on] .hero-plus--d > span { animation-name: bulle-entre-d; }
  .hero-product[data-on] .hero-plus:nth-of-type(1) > span { animation-delay: .45s; }
  .hero-product[data-on] .hero-plus:nth-of-type(2) > span { animation-delay: .70s; }
  .hero-product[data-on] .hero-plus:nth-of-type(3) > span { animation-delay: .95s; }
}
@keyframes bulle-entre {
  from { opacity: 0; transform: translate(14px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

/* La variante droite arrive par la gauche : le mouvement part toujours du
   point d'ancrage. */
@keyframes bulle-entre-d {
  from { opacity: 0; transform: translate(-14px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
/* Sous 992 px le flacon deborde de la banniere et se retrouve a cheval sur la
   carte suivante : les reperes n'y seraient plus sur un fond stable. */
@media (max-width: 992px) {
  .hero-plus { display: none; }
}

/* ------------------------------------------------ carrousel des astuces
   Les vignettes defilent horizontalement au lieu de tenir sur une rangee
   figee. La tuile qui mene a l'index reste fixe a droite, hors de la piste :
   elle ne doit pas s'en aller avec le defilement, c'est le point d'arrivee de
   la serie. La fleche de droite se pose donc juste apres la deuxieme vignette,
   au bord de la piste et non au bord du bloc.

   Le defilement est natif : la piste est une boite qui scrolle, avec des
   points d'accroche. Le doigt et la molette y suffisent, les fleches ne font
   que pousser cette meme boite. Sans JavaScript, la piste reste parcourable. */
.astuces-carrousel {
  display: grid; grid-template-columns: minmax(0, 1fr) calc((100% - 44px) / 3);
  gap: 22px; align-items: stretch;
}
.astuces-zone { position: relative; min-width: 0; }
.astuces-piste {
  display: grid; grid-auto-flow: column;
  /* Largeur fixe et non `minmax(0, …)` : la borne haute laisserait les
     colonnes retrecir pour tenir dans la boite, et les vignettes se
     tasseraient au lieu de deborder. */
  grid-auto-columns: calc((100% - 22px) / 2);
  gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* La barre de defilement ferait un trait gris sous les vignettes : le
     parcours passe par les fleches, le doigt et la molette. */
  scrollbar-width: none;
  /* De quoi laisser respirer l'ombre des vignettes au survol. */
  padding: 6px 2px 10px; margin: 0 -2px;
}
.astuces-piste::-webkit-scrollbar { display: none; }
.astuces-piste > * { scroll-snap-align: start; }

/* La tuile de fin, dans le rouge de la marque : c'est l'appel a l'action de la
   rangee, et l'encre pleine y faisait un pave trop sombre. */
.post-cta {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 34px 30px;
  border-radius: var(--radius);
  background: var(--accent); color: #fff;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.post-cta span {
  font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 800; line-height: 1.2;
}
.post-cta svg { width: 30px; height: 21px; fill: currentColor; }
.post-cta:hover { background: var(--ink); transform: translateY(-4px); }

/* Les fleches debordent sur les cotes de la piste, centrees sur la hauteur
   des photos plutot que sur le bloc entier : c'est la que le regard les
   cherche. */
.astuces-fleche {
  position: absolute; top: 27%; z-index: 3;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 6px 20px rgba(29, 29, 27, .12);
  transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.astuces-fleche svg { width: 11px; height: 18px; }
.astuces-fleche--g { left: -22px; }
.astuces-fleche--d { right: -22px; }
.astuces-fleche--d svg { transform: rotate(180deg); }
.astuces-fleche:hover { background: var(--ink); color: #fff; }
/* En bout de piste la fleche ne sert plus a rien : elle s'efface sans
   disparaitre, pour que la rangee ne saute pas. */
.astuces-fleche[disabled] { opacity: .3; cursor: default; box-shadow: none; }
.astuces-fleche[disabled]:hover { background: var(--paper); color: var(--ink); }

@media (max-width: 1100px) {
  /* La tuile passe sous la piste : a deux colonnes, la garder a droite ne
     laisserait plus qu'une vignette et demie a lire. */
  .astuces-carrousel { grid-template-columns: 1fr; }
  .post-cta { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 760px) {
  /* Une vignette par ecran, en pleine largeur. A 78 %, la suivante n'apparaissait
     qu'en tranche de soixante pixels : photo rognee et titre coupe, l'ensemble
     avait l'air casse plutot qu'annonce. Le glissement suffit a faire
     comprendre qu'il y en a d'autres. */
  .astuces-piste { grid-auto-columns: 100%; margin-inline: 0; padding-inline: 0; }
  /* Au doigt, les fleches ne servent pas et mangeraient de la largeur. */
  .astuces-fleche { display: none; }
}

/* --------------------------- bandeau de gamme : sa teinte, pas une carte
   Le bandeau de gamme porte un `data-cat` pour sa couleur. Il tombe donc dans
   `main > [data-cat]` de la regle de serie, qui traite son conteneur interieur
   comme une carte et lui pose un fond blanc : la teinte de la gamme etait
   entierement recouverte. Ce conteneur n'est pas une carte, c'est le contenu
   d'une carte.

   Le selecteur reprend `.page-hero` en plus de `.page-hero--cat` pour passer
   devant la regle de serie sans dependre de son rang dans le fichier. */
:is(main, main > [data-cat]) > .page-hero.page-hero--cat > .wrap {
  background: none;
  border-radius: 0;
  margin-bottom: 0;
  padding-block: 0;
}

/* ------------------------- banniere sur telephone : une carte comme les autres
   Les regles mobiles dataient du temps ou la banniere touchait les bords de
   l'ecran : coins droits, aucun retrait lateral, flacon debordant sous elle.
   La mise en page bento l'a depuis calee dans la grille du site, a 22 px des
   bords : le texte se retrouvait colle au bord de l'aplat, les coins arrondis
   avaient disparu et le flacon passait sur la carte suivante. Elle redevient
   une carte, comme sur grand ecran. */
@media (max-width: 992px) {
  /* La hauteur du flacon est un jeton : la reserve sous le texte s'y accorde
     toute seule. Deux valeurs qui se suivaient a la main finissaient toujours
     par diverger, et le flacon se faisait couper. */
  .home-top .hero { --flacon: clamp(230px, 62vw, 330px); border-radius: var(--radius-lg); overflow: hidden; }
  .home-top .hero .hero-inner {
    width: auto; margin-inline: 0;
    padding: 44px clamp(22px, 6vw, 34px) calc(var(--flacon) + 140px);
  }
  /* Boite de hauteur fixe, centree : l'image s'y contient et reste entiere. */
  .home-top .hero-product {
    right: 50%; bottom: 16px;
    width: 76%; max-width: none;
    height: var(--flacon); max-height: none;
  }

  /* Les reperes reviennent. A cette largeur ils ne tiennent pas a cote du
     flacon : ils se centrent et s'empilent dans l'aplat libre juste au-dessus
     de lui, ou ils ne couvrent pas son etiquette.
     La zone d'ancrage elargie du cote droit, qui borne le libelle sur grand
     ecran, n'a plus lieu d'etre ici et fausserait le centrage : on la ramene a
     un point, et le libelle reprend sa largeur naturelle. */
  .hero-plus { display: block; left: 50%; }
  .hero-plus--d { width: 0; right: auto; }
  /* L'empilement part du bas : c'est `nth-last-of-type` qui numerote, pas
     `nth-of-type`. Un flacon qui n'a qu'un repere le pose donc juste au-dessus
     de lui, comme celui qui en a trois pose le dernier des siens, et la pile
     ne flotte jamais en l'air. La reserve menagee sous le texte couvre le cas
     le plus haut, trois reperes : les trois flacons se partagent la meme
     boite, elle ne peut pas se regler diapositive par diapositive. */
  .hero-plus:nth-last-of-type(1) { top: -32px; }
  .hero-plus:nth-last-of-type(2) { top: -64px; }
  .hero-plus:nth-last-of-type(3) { top: -96px; }
  .hero-plus > span, .hero-plus--d > span {
    right: auto; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px; padding: 6px 12px;
    max-width: none; white-space: nowrap;
  }
  /* L'entree en differe garde le centrage dans ses deux images cles : une
     animation qui ne poserait que le decalage effacerait le `-50%` horizontal
     et le libelle sauterait a droite avant de se remettre en place. */
  .hero-product[data-on] .hero-plus > span { animation-name: bulle-entre-centree; }
}
@keyframes bulle-entre-centree {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}


/* ------------------------- bandeau de reperes : alignement en colonnes etroites
   Le centrage dans la cellule fonctionne sur quatre colonnes, ou chaque repere
   occupe la sienne. Des qu'il n'y en a plus que deux ou une, les reperes se
   suivent verticalement : les libelles n'ayant pas la meme longueur, chacun se
   cale a un endroit different et ni les pictogrammes ni les textes ne
   s'alignent. Ils repartent donc du bord de leur cellule. */
@media (max-width: 1120px) {
  .promesses li > a,
  .promesses li:not(:has(a)) { justify-content: flex-start; }
}

/* ------------------------------------------------ formulaires : refus et lettre d'information */
/* Message de refus d'un formulaire, posé par site-nav.js (?erreur=). */
.form-erreur { --cat: var(--accent); --cat-tint: #fdeced; margin: 0 0 22px; color: var(--ink); }

/* Inscription à la lettre d'information, en pied de page. */
.footer-lettre {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 14px 56px; align-items: center;
  border-top: 1px solid rgba(255,255,255,.12); padding: 34px 0;
}
.footer-lettre h4 { margin-bottom: 8px; }
.footer-lettre p { margin: 0; font-size: 14.5px; }
.footer-lettre-form { display: flex; gap: 10px; }
.footer-lettre-form input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: 12px 20px;
  border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 14.5px;
}
.footer-lettre-form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.footer-lettre-form input[type="email"]:focus { outline: none; border-color: #fff; }
.footer-lettre-form .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-lettre-form .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.footer-lettre .footer-lettre-note,
.footer-lettre .form-erreur { grid-column: 2; }
.footer-lettre .footer-lettre-note { font-size: 12.5px; color: rgba(255,255,255,.5); }
.footer-lettre .form-erreur { margin: 0; font-size: 13.5px; }
@media (max-width: 760px) {
  .footer-lettre { grid-template-columns: 1fr; }
  .footer-lettre .footer-lettre-note,
  .footer-lettre .form-erreur { grid-column: auto; }
}

/* ============================================================ OÙ ACHETER
   Bloc à deux onglets des fiches produits : les marchands qui livrent ce
   produit, puis les magasins qui le référencent, avec la carte.
   L'onglet actif prend la couleur de la gamme, comme le reste de la fiche ;
   la carte reprend l'arrondi des grands panneaux. */
.where { padding: 64px 0 72px; background: var(--paper-3); border-top: 1px solid var(--line); }
.where .section-head { margin-bottom: 24px; }

.where-tabs {
  display: flex; flex-wrap: wrap; gap: 0 28px;
  border-bottom: 2px solid var(--line); margin-bottom: 30px;
}
.where-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 13px 2px; margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  font: inherit; font-size: 15.5px; font-weight: 600; color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.where-tab:hover { color: var(--ink); }
.where-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--cat); }
.where-tab:focus-visible { outline: 2px solid var(--cat); outline-offset: 3px; border-radius: 4px; }

.where-intro { margin: 0 0 22px; color: var(--ink-soft); font-size: 15px; max-width: 640px; }
.where-note { margin: 24px 0 0; font-size: 12.5px; color: var(--muted); }
.where-vide {
  margin: 0; padding: 26px 22px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink-soft); font-size: 15px;
}

/* Une carte par marchand : logo, nom, pays, et l'invitation à sortir du site. */
.where-shops {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.where-shop {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.where-shop:hover { border-color: var(--cat); transform: translateY(-2px); }
.where-shop-logo {
  flex: 0 0 auto; width: 64px; height: 34px;
  display: grid; place-items: center;
}
.where-shop-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.where-shop--dark .where-shop-logo { background: var(--ink); border-radius: 6px; padding: 4px; }
.where-shop-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.where-shop-name { font-weight: 600; font-size: 15px; }
.where-shop-name small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 5px; }
.where-shop-cta { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.where-shop:hover .where-shop-cta { color: var(--cat); }
.where-shop-cta svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* -------------------------------------------- carte des points de vente
   Partagée par les fiches produits et la page « Où nous trouver ». */
.loc__form { margin: 0 0 18px; }
.loc__label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.loc__champ { display: flex; gap: 10px; flex-wrap: wrap; }
.loc__input {
  flex: 1 1 220px; min-width: 0; padding: 13px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: #fff; color: var(--ink); font: inherit; font-size: 15px;
}
.loc__input:focus { outline: none; border-color: var(--cat); }
.loc__geo { background: transparent; }
.loc__filtre { margin: 0 0 12px; font-weight: 600; color: var(--ink-soft); font-size: 14.5px; }
.loc__filtre a { color: var(--cat); margin-left: 8px; text-underline-offset: 3px; }
.loc__avis { margin: 0 0 20px; font-size: 13.5px; color: var(--muted); max-width: 640px; }
.loc__etat { margin: 0 0 12px; min-height: 1.4em; font-weight: 600; color: var(--ink-soft); font-size: 14.5px; }

.loc__grille {
  display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}
/* Avant toute recherche la liste est vide : la carte prend toute la largeur
   plutot que de laisser une colonne blanche a cote d'elle. */
.loc__grille:has(.loc__liste:empty) { grid-template-columns: minmax(0, 1fr); }
.loc__liste:empty { display: none; }
.loc__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 520px; overflow: auto;
}
.loc__it {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color .2s var(--ease);
}
.loc__it:hover, .loc__it.est-actif { border-color: var(--cat); }
.loc__it img {
  width: 56px; height: 38px; flex: 0 0 auto; object-fit: contain;
  background: #fff; border-radius: 6px; padding: 3px; border: 1px solid var(--line);
}
.loc__it div { min-width: 0; flex: 1 1 auto; }
.loc__it b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.loc__it span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.loc__it i { font-style: normal; font-weight: 700; font-size: 13px; color: var(--cat); white-space: nowrap; }
.loc__vide {
  padding: 26px 18px; text-align: center; color: var(--ink-soft); font-size: 15px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.loc__carte {
  min-height: 520px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--cat-tint); border: 1px solid var(--line);
  position: relative; z-index: 0;
}
.loc__pop { font-size: 14px; line-height: 1.45; }
.loc__pop b { display: block; font-size: 15px; margin-bottom: 2px; }
.loc__pop small { color: var(--muted); }
.loc__pop a { display: inline-block; margin-top: 6px; color: var(--cat); font-weight: 700; }
.loc__credit { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.loc__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 992px) {
  .loc__grille { grid-template-columns: 1fr; }
  .loc__carte { min-height: 360px; order: -1; }
  .loc__liste { max-height: none; }
}
@media (max-width: 560px) {
  .where { padding: 48px 0 56px; }
  .where-tabs { gap: 0 18px; }
  .where-tab { font-size: 14.5px; }
  .loc__champ .btn { flex: 1 1 auto; justify-content: center; }
}
@media print {
  .where-tabs, .loc__form, .loc__carte { display: none !important; }
  .where-panel[hidden] { display: block !important; }
}