/* ============================================================
   PHARMACIE RHAZLAOUI — v8 « Surfaces Lin » (2026-09-20)

   Remplace le blanc pur des cartes et des sections par un lin
   chaud. Motif : le fond de page est déjà crème (#FAF6EF) ;
   des cartes en #FFFFFF y étaient plus lumineuses que tout ce
   qui les entoure, ce qui fatigue l'œil sur une page longue.
   Le lin inverse le rapport — les cartes reposent sur le fond
   au lieu de l'éblouir — et reste dans la famille chaude de
   l'or du site.

   Chargée en dernier : elle ne fait que repeindre des surfaces,
   aucune règle de mise en page ici.
   ============================================================ */

/* Double du <meta name="color-scheme" content="only light"> de l'index.
   "only light" interdit au navigateur de convertir automatiquement les
   surfaces crème et lin en brun sombre quand le système est en mode nuit. */
:root { color-scheme: only light; }

:root {
  --v8-lin:        #EDE6D9;  /* surface des cartes et sections */
  --v8-lin-fonce:  #E4DCCC;  /* fond des vignettes produits    */
  --v8-lin-bord:   #DCD2BF;  /* filets et séparateurs          */
}

/* ─── Surfaces principales ─────────────────────────────────
   Le héro est exclu : il porte sa propre nuit (v7-nuit-dor).  */
section:not(#hero),
.catalogue-card,
.product-card,
.modal-content,
.product-modal-content,
.marque-card,
.gamme-card {
  background: var(--v8-lin) !important;
}

/* ─── Vignettes produits ───────────────────────────────────
   Les photos sont détourées sur blanc : sans cette teinte, un
   rectangle clair réapparaît derrière chaque flacon. */
.catalogue-card-img,
.product-card-img,
.pm-image-wrap,
#pm-img {
  background: var(--v8-lin-fonce) !important;
}

/* ─── Filets ───────────────────────────────────────────────
   Les séparateurs calculés pour du blanc deviennent invisibles
   sur le lin : on les remonte d'un cran. */
.catalogue-card-img { border-bottom-color: var(--v8-lin-bord) !important; }

/* La bande de preuve sous le héro garde son raccord doré. */
.v7-hero + .v2-proof { background: var(--v8-lin) !important; }

/* ─── Fond blanc des photos produits ───────────────────────
   Les 83 photos sont détourées sur blanc. Sur une carte teintée,
   ce blanc réapparaît en rectangle net derrière chaque flacon.

   « multiply » le fait disparaître sans retoucher un seul
   fichier : le blanc (255) multiplié par la couleur du fond
   redonne exactement le fond, tandis que le produit, plus
   sombre, reste intact. Zéro octet ajouté, réversible en une
   ligne, et ça marche aussi si la teinte des cartes change.

   Contrepartie assumée : les gris très clairs du produit
   (reflets, ombres douces du packaging) prennent une nuance de
   la carte. À cette échelle, ce n'est pas perceptible.
   Un vrai détourage en transparence reste la solution idéale
   si les photos sont refaites un jour. */
.catalogue-card-img img,
.product-card-img img,
.produit-img img,
#pm-img,
.pm-image-wrap img {
  mix-blend-mode: multiply;
}

/* ─── Lisibilité du texte secondaire ───────────────────────
   « 3 gammes », « 11 produits » : mesuré à 4,27:1 sur le lin,
   sous le seuil de 4,5:1. Un cran plus foncé suffit. */
.catalogue-card span,
.catalogue-stat,
.product-card .meta {
  color: #5C5346 !important;
}

/* ─── Les surfaces blanches restantes ──────────────────────
   Relevé après coup sur la page entière : six zones gardaient
   un blanc pur, dont les 25 badges de marques, très visibles. */
.marque-badge,
.mobile-menu,
.image-cleaner-panel,
.product-modal-content,
.modal-content,
.search-overlay-inner,
.search-results {
  background: var(--v8-lin) !important;
}

/* Les logos de marques sont eux aussi sur fond blanc. */
.marque-badge img { mix-blend-mode: multiply; }

/* Champs de saisie : un cran plus clair que les cartes, pour
   qu'ils se lisent comme des zones où l'on écrit. */
.search-input,
#v2-search-input,
input[type="search"],
input[type="text"] {
  background: #F6F1E7 !important;
  border-color: var(--v8-lin-bord) !important;
}

/* Les superpositions plein écran gardent un voile sombre, pas
   une teinte : elles doivent détacher le contenu de la page. */
.product-modal-overlay,
.search-overlay {
  background: rgba(26, 22, 16, .55) !important;
}

/* La fiche produit reste claire au-dessus de ce voile. */
.product-modal {
  background: var(--v8-lin) !important;
  color: var(--v3-ink, #16241E) !important;
}

/* Le cadre du logo de marque portait encore le crème du fond de
   page, plus clair que le badge : un carré pâle se détachait
   derrière chaque produit. En le rendant transparent, la fusion
   multiply de l'image se fait directement sur le lin du badge. */
.marque-badge-logo,
.gamme-card-img,
.produit-vignette {
  background: transparent !important;
}

/* Le cadre du logo de marque — bordure claire de 1 px et ombre
   portée — dessinait encore un rectangle autour du produit, là
   où la fusion venait justement de faire disparaître le blanc.
   Sans lui, le produit se pose directement sur le lin. */
.marque-badge-logo {
  border: 0 !important;
  box-shadow: none !important;
}

/* ─── 1. Lignes d'horaires ─────────────────────────────────
   L'alternance une ligne sur deux utilisait --gris-clair,
   calibré pour du blanc : sur le lin, une ligne ressortait en
   clair sans raison. On alterne désormais vers le bas. */
.horaire-row:nth-child(odd) { background: rgba(92, 83, 70, .05) !important; }
.horaire-row { border-bottom: 1px solid rgba(92, 83, 70, .10); }

/* ─── 2. Carte Google ──────────────────────────────────────
   Contenu externe, impossible à teinter : on l'encadre pour
   qu'elle se pose sur la page au lieu d'y flotter. */
.map-container {
  border: 1px solid var(--v8-lin-bord) !important;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(92, 83, 70, .10);
}

/* La ligne « Garde » porte un fond vert en style inline pour se
   distinguer. Mon alternance l'avait écrasée : on lui rend sa
   mise en avant, dosée pour le lin. */
.horaire-row[style] {
  background: rgba(0, 166, 81, .12) !important;
  border-bottom-color: rgba(0, 166, 81, .20);
}