/* ==========================================================================
   custom.css — chargee APRES site.css (CSS verbatim de la maquette, jamais
   modifiee). Toute modification de style du site se fait ICI.
   ========================================================================== */

/* ==========================================================================
   1. Corrections fonctionnelles (V5.4, reprises de bissoung et belibi ;
      V6 : propres a m5 en fin de section)
   ========================================================================== */

/* En-tete collant : la maquette declare .hdr{position:sticky}, mais pose aussi
   html{overflow-x:clip} ET body{overflow-x:hidden}. Le debordement du body ne
   se propage alors plus a la fenetre : le body devient un conteneur de
   defilement qui ne defile jamais, et l'en-tete « colle » a lui, donc jamais
   (constate sur m2.html, m3.html et m5.html eux-memes). html{overflow-x:clip} suffit a
   empecher le defilement horizontal ; le body redevient transparent. */
body { overflow-x: visible; }

/* Un element masque par le filtre (attribut hidden) doit l'etre vraiment :
   certaines regles de la maquette (ex. .prod{display:flex}) l'emporteraient
   sinon sur le style par defaut de [hidden]. */
[hidden] { display: none !important; }

/* Ancre atteinte au chargement d'une URL (#contact, ?gamme=…#produits) :
   le titre de la section n'est pas masque par l'en-tete collant. Les clics
   sont, eux, positionnes au pixel pres par site.js. */
main [id] { scroll-margin-top: 96px; }

/* Menu mobile ouvert : le fond ne defile plus (classe posee par site.js). */
body.menu-ouvert { overflow: hidden; }

/* Menu mobile ouvert : l'en-tete (et son burger) se place tout en haut. La
   maquette reserve 106 a 112 px en tete du menu pour un en-tete de 76 a 84 px ;
   mais en haut de page la barre d'information (deux lignes en mobile) le
   pousse plus bas, et il recouvrait alors le premier lien du menu. */
body.menu-ouvert #hdr { position: fixed; top: 0; left: 0; right: 0; }

/* FAQ : refermer une reponse ne fait plus sauter la page (ancrage de
   defilement du navigateur sur le contenu qui suit). */
[data-js="faq-item"], [data-js="faq-reponse"] { overflow-anchor: none; }

/* Cartes de gammes (entrees vers le catalogue filtre) : activables au
   clavier, curseur de lien. */
[data-js="voir-gamme"][role="link"] { cursor: pointer; }
[data-js="voir-gamme"][role="link"]:focus-visible { outline: 2px solid var(--yel); outline-offset: 4px; }

/* Notification (#toast) au repos : la maquette la cache par un decalage de
   140 % de SA PROPRE hauteur ; vide, elle ne fait que quelques pixels et
   depassait en bas de l'ecran (petit pave jaune). */
#toast:not(.on) { visibility: hidden; }

/* Carte produit : toute la carte mene a la fiche (site.js). */
[data-js="produit"][data-href] { cursor: pointer; }

/* --------------------------------------------------------------------------
   Fiche produit (produit.php) — page absente des maquettes, demandee par le
   client. Elle reutilise les composants du site (lbl, lead, btn, ph) ; seule
   sa mise en page est definie ici.
   -------------------------------------------------------------------------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.fiche-retour { margin: 0 0 22px; }
.fiche-retour a { text-decoration: underline; text-underline-offset: 3px; }
.fiche-principale { width: 100%; height: auto; }
.fiche-vignettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fiche-vignette { width: 76px; height: 76px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; }
.fiche-vignette.on { border-color: currentColor; }
.fiche-vignette img { width: 100%; height: 100%; object-fit: cover; }
.fiche-titre { margin: 8px 0 12px; }
.fiche-badge { display: inline-block; margin: 0 0 14px; padding: 4px 10px; border: 1px solid currentColor; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.fiche-description { margin: 18px 0; }
.fiche-infos { margin: 22px 0; display: grid; gap: 8px; }
.fiche-infos div { display: flex; gap: 12px; }
.fiche-infos dt { min-width: 120px; opacity: .7; }
.fiche-infos dd { margin: 0; font-weight: 600; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 820px) { .fiche { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Blog « Conseils » (V5.5) — section d'accueil, conseils.php, conseil.php.
   Aucune maquette de blog : les vues reutilisent les composants du site
   (lbl, h2, lead, cartes prod, puces chip, btn). Seuls l'espacement et la
   lecture du contenu editorial sont definis ici ; aucune couleur ni police
   nouvelle (currentColor et tailles du site).
   -------------------------------------------------------------------------- */
[data-js="article"][data-href] { cursor: pointer; }
.conseil-titre { margin: 8px 0 14px; font-size: clamp(31px, 4.3vw, 56px)  /* taille des titres h2 du site */; }
.conseil-image { width: 100%; height: auto; margin: 26px 0 8px; }
.conseil-contenu { margin-top: 22px; }
.conseil-contenu img { max-width: 100%; height: auto; }
.conseil-contenu h2, .conseil-contenu h3 { margin: 1.4em 0 .5em; }
.conseil-contenu ul, .conseil-contenu ol { padding-left: 1.3em; }
.conseil-contenu a { text-decoration: underline; text-underline-offset: 3px; }
.conseils-pages { margin: 34px 0 0; }
.conseils-tous { margin: 30px 0 0; }
.conseil-corps { max-width: 900px; margin: 0 auto; }

/* ==========================================================================
   2. Retouches graphiques demandees par la responsable
   --------------------------------------------------------------------------
   (vide)
   ========================================================================== */