/* ==========================================================================
   Panneau latéral Ecwid — Anatole Lebreton
   La fenêtre de choix de taille, glissée depuis la droite.

   RELEVÉ SUR LE STAGING (03/11/2026), pas deviné :
     fenêtre   div.ecwid-popup.ecwid-ProductBrowserPopup.ecwid
     fermeture button.ecwid-popup-closeButton
     parent    <body> (enfant direct)
     pas de voile de fond : Ecwid n'en crée pas pour cette fenêtre
     style en ligne posé par Ecwid :
       position:absolute; z-index:1000001; left:0; top:1130.5px;
       margin-top:20px; overflow:visible
     dimensions constatées : 513 × 1465 px, rendue à y = −236

   D'où l'abus de !important dans ce fichier : Ecwid écrit ces valeurs dans
   l'attribut style de l'élément, qui l'emporte sur toute feuille. Ce n'est
   pas de la paresse, c'est la seule prise disponible.

   Le `top` d'Ecwid est un décalage DANS LE DOCUMENT, pas dans la fenêtre :
   c'est pour ça que la fenêtre apparaît au-dessus de l'écran dès qu'on a
   fait défiler la page. Passer en `fixed` règle la cause, pas le symptôme.
   ========================================================================== */

:root {
  --alb-sand:  #E6E2D5;
  --alb-navy:  #090947;
  --alb-lime:  #DCFE54;
  --alb-teal:  #0B4650;
  --alb-beige: #F2F0EB;
  --alb-ardoise: #515161;   /* sélecteur de taille */
  --alb-corail: #FF6452;    /* survol destructif / fermeture */
  --alb-panneau: 480px;
  --alb-duree: 320ms;
  --alb-courbe: cubic-bezier(.4, 0, .2, 1);
}

/* --- Le panneau --------------------------------------------------------- */

body .ecwid-popup.ecwid-ProductBrowserPopup {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  margin: 0 !important;

  width: min(var(--alb-panneau), 100vw) !important;
  max-width: 100vw !important;
  height: 100% !important;
  max-height: 100% !important;

  /* la fiche fait 1465 px de haut : elle défile DANS le panneau */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;   /* le défilement ne déborde pas sur la page */
  -webkit-overflow-scrolling: touch;

  background: var(--alb-beige);
  border: 7px solid var(--alb-lime) !important;
  box-sizing: border-box !important;   /* le cadre se prend sur les 480px */
  box-shadow: -8px 0 40px rgba(9, 9, 71, .14);
  z-index: 1000001 !important;

  /* état fermé : hors écran à droite. La classe est posée par le JS une
     image après l'insertion, sinon la transition n'a pas d'état de départ
     et le panneau apparaît d'un coup.

     Les deux durées sont volontairement dissymétriques. À l'ouverture, une
     courbe longue et amortie (420 ms) : le panneau arrive et se pose.
     À la fermeture, courte et sèche (260 ms) : une fois la décision prise,
     attendre n'apporte rien — c'est la règle habituelle pour les panneaux,
     et le même temps dans les deux sens donne une sortie qui traîne. */
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(.4, 0, 1, 1);
}

body .ecwid-popup.ecwid-ProductBrowserPopup.alb-panneau-ouvert {
  transform: translateX(0);
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}

/* Fondu entre les écrans du panneau (fiche ↔ panier). Le panneau reste en
   place, seul son contenu change : sans ce fondu, tout saute à l'intérieur.
   Court volontairement — 160 ms : on relie deux états, on n'annonce pas une
   nouvelle page. */
body .ecwid-ProductBrowserPopup .ecwid-productBrowser {
  transition: opacity 160ms ease;
}
body .ecwid-ProductBrowserPopup.alb-contenu-sort .ecwid-productBrowser {
  opacity: 0;
}

/* Le contenu suit le panneau avec un léger retard plutôt que d'arriver
   collé au bord. Sans ce décalage, le panneau et son contenu bougent d'un
   seul bloc et le mouvement paraît plat. */
body .ecwid-ProductBrowserPopup .product-details {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1);
}
body .ecwid-ProductBrowserPopup.alb-panneau-ouvert .product-details {
  opacity: 1;
  transform: none;
  transition-delay: 150ms;
}

/* --- Remettre la fiche dans 480 px -------------------------------------
   Le point dur. La fiche est enveloppée dans une table de mise en page
   héritée, en `width: 100%` mais `table-layout: auto` : une table en
   disposition automatique s'élargit au contenu et IGNORE `max-width`.
   Mesuré : la table sortait à 910 px, la fiche à 830, dans un panneau de
   480 — et la colonne d'achat (taille, prix, bouton) tombait hors champ,
   rognée. C'est pour ça que `max-width: 100%` seul ne suffisait pas.

   `table-layout: fixed` force la table à respecter la largeur reçue, et le
   contenu à passer à la ligne. Mesuré après : table 468, fiche 388, bloc
   d'achat entièrement visible sans défiler.

   `min-width: 0` sur toute la chaîne : sans lui, un descendant en grille
   ou en flex garde sa largeur minimale de contenu et reperce le panneau. */
body .ecwid-ProductBrowserPopup table {
  table-layout: fixed !important;
}

body .ecwid-ProductBrowserPopup .popupContent,
body .ecwid-ProductBrowserPopup .ecwid-popup-content,
body .ecwid-ProductBrowserPopup .ecwid-popup-touchLimiter,
body .ecwid-ProductBrowserPopup .ecwid-ProductBrowserPopup-content,
body .ecwid-ProductBrowserPopup table,
body .ecwid-ProductBrowserPopup td,
body .ecwid-ProductBrowserPopup .ecwid,
body .ecwid-ProductBrowserPopup .ec-storefront-v3,
body .ecwid-ProductBrowserPopup .ecwid-productBrowser,
body .ecwid-ProductBrowserPopup .ec-wrapper,
body .ecwid-ProductBrowserPopup .ec-store,
body .ecwid-ProductBrowserPopup .ec-store__content-wrapper,
body .ecwid-ProductBrowserPopup .product-details,
body .ecwid-ProductBrowserPopup .product-details__top {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Ce conteneur porte `overflow: auto` en ligne, ce qui crée une seconde
   zone de défilement imbriquée dans le panneau. Une seule suffit. */
body .ecwid-ProductBrowserPopup .ecwid-ProductBrowserPopup-content {
  overflow: visible !important;
}

body .ecwid-ProductBrowserPopup .popupMiddleCenter {
  padding: 28px 28px 40px !important;
}

/* --- La galerie ----------------------------------------------------------
   Mesurée à 662 px de haut dans un panneau de 820 : le visiteur devait
   défiler au-delà d'une grande image pour atteindre la taille et le bouton.
   Plafonnée à 34vh, tout le bloc d'achat tient sans défiler (vérifié :
   galerie 61→340, taille 533→605, bouton au-dessus de 820).

   LA PHOTO N'EST JAMAIS ROGNÉE. Ecwid n'utilise pas <img> ici mais des
   `background-image` en `background-size: contain` : la photo est donc
   toujours entière, simplement centrée dans sa boîte. On le redéclare par
   précaution, au cas où Ecwid passerait un jour à `cover`.
   (Corollaire : une règle `object-fit` sur `img` serait inerte — il n'y a
   pas d'image à habiller.)

   `overflow: visible` et non `hidden` : c'est le seul vrai rognage qu'il y
   avait — les pastilles de navigation de la galerie étaient coupées. */
body .ecwid-ProductBrowserPopup .product-details__gallery,
body .ecwid-ProductBrowserPopup .details-gallery__images,
body .ecwid-ProductBrowserPopup .details-gallery__images-container,
body .ecwid-ProductBrowserPopup .details-gallery__wrap-inner,
body .ecwid-ProductBrowserPopup .details-gallery__image-wrapper {
  max-height: 34vh !important;
  overflow: visible !important;
}
body .ecwid-ProductBrowserPopup .details-gallery__thumb-bg,
body .ecwid-ProductBrowserPopup .details-gallery__thumb-img {
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}
body .ecwid-ProductBrowserPopup .details-gallery img {
  max-height: 34vh !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* --- Le voile de fond --------------------------------------------------- */

/* Ecwid n'en pose pas pour cette fenêtre : c'est le JS qui l'insère.
   Sans voile, la page reste cliquable derrière le panneau et rien ne dit
   qu'on est dans une étape d'achat. */
.alb-ecwid-voile {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 71, .38);
  opacity: 0;
  transition: opacity var(--alb-duree) var(--alb-courbe);
  z-index: 1000000;              /* juste sous le panneau */
  cursor: pointer;
}
.alb-ecwid-voile.alb-panneau-ouvert { opacity: 1; }

/* Blocage du défilement de la page pendant que le panneau est ouvert.
   `position: fixed` sur le body perdrait la position de lecture, donc on
   se contente de couper le débordement — le JS compense la barre de
   défilement pour éviter le saut de mise en page. */
body.alb-panneau-actif { overflow: hidden; }

/* --- Le bouton de fermeture --------------------------------------------- */

/* La croix d'Ecwid est dessinée par un MASQUE sur `::after`, pas par un
   glyphe ni une image de fond. Un masque ne montre que la couleur de fond
   de l'élément qui le porte — et cette couleur était blanche, sur un bouton
   que j'avais peint en blanc : croix blanche sur rond blanc, invisible.
   D'où `background-color` sur le `::after`, et non sur le bouton. */
body .ecwid-ProductBrowserPopup .ecwid-popup-closeButton {
  position: sticky !important;
  top: 14px !important;
  right: 14px !important;
  float: right;
  width: 28px !important;
  height: 28px !important;
  /* La marge négative du bas retire le bouton du flux : sans elle, il
     pousserait tout le contenu de 28px vers le bas. Elle doit donc rester
     égale à la hauteur. */
  margin: 14px 14px -28px auto !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--alb-lime) !important;
  cursor: pointer;
  z-index: 2;
  transition: background 200ms;
}
body .ecwid-ProductBrowserPopup .ecwid-popup-closeButton::after {
  background-color: var(--alb-navy) !important;
  -webkit-mask-size: 10px auto !important;
          mask-size: 10px auto !important;
  width: 28px !important;
  height: 28px !important;
  transition: background-color 200ms;
}
body .ecwid-ProductBrowserPopup .ecwid-popup-closeButton:hover {
  background: var(--alb-corail) !important;
}
body .ecwid-ProductBrowserPopup .ecwid-popup-closeButton:hover::after {
  background-color: #fff !important;
}
body .ecwid-ProductBrowserPopup .ecwid-popup-closeButton:focus-visible {
  outline: 2px solid var(--alb-navy) !important;
  outline-offset: 2px;
}

/* ==========================================================================
   HABILLAGE — fond beige, fer à gauche, titre, sélecteur de taille
   Sélecteurs relevés sur /parfum/bois-lumiere/ le 04/11/2026.
   ========================================================================== */

/* Les conteneurs d'Ecwid repeignent du blanc par-dessus le beige : on les
   rend transparents plutôt que de repeindre chacun en beige, sinon une
   future couche blanche ressortirait en bande. */
body .ecwid-ProductBrowserPopup .popupContent,
body .ecwid-ProductBrowserPopup .ecwid-popup-content,
body .ecwid-ProductBrowserPopup .ecwid-ProductBrowserPopup-content,
body .ecwid-ProductBrowserPopup .ecwid,
body .ecwid-ProductBrowserPopup .ec-storefront-v3,
body .ecwid-ProductBrowserPopup .ecwid-productBrowser,
body .ecwid-ProductBrowserPopup .ec-store,
body .ecwid-ProductBrowserPopup .ec-wrapper,
body .ecwid-ProductBrowserPopup .ec-store__content-wrapper,
body .ecwid-ProductBrowserPopup .product-details,
body .ecwid-ProductBrowserPopup .product-details__top,
body .ecwid-ProductBrowserPopup .details-gallery__picture,
body .ecwid-ProductBrowserPopup .details-gallery__image-wrapper,
body .ecwid-ProductBrowserPopup table,
body .ecwid-ProductBrowserPopup td {
  background: transparent !important;
}
/* `.ecwid-productBrowser` est le coupable le moins évident : 487 × 692 de
   blanc par-dessus le beige, soit la quasi-totalité du panneau. Et le fond
   blanc de `.details-gallery__picture` posait le flacon sur un carré blanc
   au milieu du beige. */

/* Fer à gauche partout. On exclut les pastilles de taille : leur libellé
   est centré DANS la pastille, ce qui n'a rien à voir avec l'alignement
   du texte courant. */
body .ecwid-ProductBrowserPopup,
body .ecwid-ProductBrowserPopup *:not(.form-control__inline-label):not(.form-control__inline-label *) {
  text-align: left !important;
}

/* Le titre du parfum — la seule entorse à Montserrat, et c'est voulu. */
body .ecwid-ProductBrowserPopup .product-details__product-title {
  font-family: "EB Garamond", Georgia, serif !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: var(--alb-navy) !important;
  text-transform: none !important;
}

/* Tout le reste en Montserrat. Vérifié sur la fiche : 31 éléments de texte,
   tous déjà en Montserrat — cette règle est une ceinture, au cas où Ecwid
   injecterait sa police par défaut sur un bloc qu'on n'a pas vu. */
body .ecwid-ProductBrowserPopup,
body .ecwid-ProductBrowserPopup *:not(.product-details__product-title):not(.product-details__product-title *) {
  font-family: Montserrat, system-ui, sans-serif !important;
}

/* --- Le sélecteur de taille ---------------------------------------------
   Structure relevée :
     .form-control--checkbox-button
       input.form-control__radio[type=radio]
       .form-control__inline-label
         label                        ← la pastille visible
   Par défaut Ecwid la peint en bleu (#2EA4F2) à l'état choisi. On passe à
   l'ardoise. On cible l'état choisi par le frère `:checked ~` plutôt que
   par `:has()` : même résultat, sans dépendre du support de `:has`. */
body .ecwid-ProductBrowserPopup .form-control--checkbox-button {
  background: transparent !important;
  border: 0 !important;
}

body .ecwid-ProductBrowserPopup .form-control__inline-label label {
  display: inline-block;
  border: 1px solid var(--alb-ardoise) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--alb-ardoise) !important;
  font: 500 14px/1 Montserrat, system-ui, sans-serif !important;
  padding: 11px 16px !important;
  min-height: 44px;                    /* cible tactile */
  box-sizing: border-box;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
}

body .ecwid-ProductBrowserPopup .form-control__inline-label label:hover {
  background: rgba(81, 81, 97, .08) !important;
}

body .ecwid-ProductBrowserPopup .form-control__radio:checked ~ .form-control__inline-label label {
  background: var(--alb-ardoise) !important;
  border-color: var(--alb-ardoise) !important;
  color: #fff !important;
}

/* Le contour de focus doit rester visible : la pastille est pilotée par un
   input masqué, donc sans cette règle la navigation au clavier est aveugle. */
body .ecwid-ProductBrowserPopup .form-control__radio:focus-visible ~ .form-control__inline-label label {
  outline: 2px solid var(--alb-navy) !important;
  outline-offset: 2px;
}

/* --- Habillage du contenu ----------------------------------------------- */

/* Le bouton d'ajout, dans le panneau comme ailleurs. */
body .ecwid-ProductBrowserPopup .ecwid-btn--primary,
body .ecwid-ProductBrowserPopup .form-control__button {
  min-height: 48px !important;
  border-radius: 4px !important;
  background: var(--alb-lime) !important;
  color: var(--alb-teal) !important;
  font: 700 14px/1.2 Montserrat, system-ui, sans-serif !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}
body .ecwid-ProductBrowserPopup .ecwid-btn--primary:hover,
body .ecwid-ProductBrowserPopup .form-control__button:hover {
  background: var(--alb-teal) !important;
  color: var(--alb-lime) !important;
}

/* Les pastilles de taille (30 ml / 10 ml). Celle qui est indisponible garde
   un contraste lisible : « 10 ml — disponible fin 2026 » est une information
   commerciale, pas un déchet visuel. */
body .ecwid-ProductBrowserPopup .details-product-option__value,
body .ecwid-ProductBrowserPopup .ec-size__item {
  border-radius: 4px !important;
  font: 500 14px/1 Montserrat, system-ui, sans-serif !important;
}

body .ecwid-ProductBrowserPopup .details-product-option__title,
body .ecwid-ProductBrowserPopup .details-product-option__title-inner {
  font: 600 12px/1.4 Montserrat, system-ui, sans-serif !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--alb-navy) !important;
}

/* ==========================================================================
   LE PANIER — même panneau, autre contenu
   Relevé le 06/11/2026. Fait structurant : `Ecwid.openPage('cart')` rend le
   panier DANS `.ecwid-ProductBrowserPopup`. Le fond beige, le cadre citron,
   la croix et l'animation s'y appliquent donc déjà. Il ne reste que le
   contenu à mettre à la DA.
   ========================================================================== */

/* Une seule colonne. Ecwid pose `.ec-cart__sidebar` et `.ec-cart__body` côte
   à côte : mesuré à 234 px chacun dans un panneau de 480, inexploitable. */
body .ecwid-ProductBrowserPopup .ec-cart { display: block !important; }
body .ecwid-ProductBrowserPopup .ec-cart__sidebar,
body .ecwid-ProductBrowserPopup .ec-cart__body {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body .ecwid-ProductBrowserPopup .ec-cart__body {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(9, 9, 71, .14) !important;
}

/* Les titres « Panier d'achat » et « Commander » sortaient en CITRON sur le
   beige — illisibles. Ils prennent la serif du titre produit.
   La double classe `.ecwid-popup.ecwid-ProductBrowserPopup` n'est pas une
   coquetterie : la règle Montserrat générale plus haut a une spécificité
   supérieure, et l'emportait. On remonte la spécificité plutôt que
   d'empiler les !important. */
body .ecwid-popup.ecwid-ProductBrowserPopup .page-title__name,
body .ecwid-popup.ecwid-ProductBrowserPopup .product-details__product-title {
  font-family: "EB Garamond", Georgia, serif !important;
}
body .ecwid-ProductBrowserPopup .page-title__name {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--alb-navy) !important;
  letter-spacing: 0 !important;
}

/* Liens : le bleu d'Ecwid (#2EA4F2) n'est nulle part dans la charte. */
body .ecwid-ProductBrowserPopup a,
body .ecwid-ProductBrowserPopup a.ec-link { color: var(--alb-navy) !important; }
body .ecwid-ProductBrowserPopup a.ec-link,
body .ecwid-ProductBrowserPopup .ec-cart-item__title {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
body .ecwid-ProductBrowserPopup a:hover { color: var(--alb-corail) !important; }

/* Le même bleu ressort sur les sélecteurs (« Quantité : 1 ») et sur le
   chevron, qui n'est pas un lien mais un SVG. */
body .ecwid-ProductBrowserPopup .form-control__select-text,
body .ecwid-ProductBrowserPopup .form-control__placeholder-inner {
  color: var(--alb-ardoise) !important;
}
body .ecwid-ProductBrowserPopup .form-control__select-arrow svg path,
body .ecwid-ProductBrowserPopup .form-control__arrow svg path {
  fill: var(--alb-ardoise) !important;
}

/* Cases à cocher des CGV. L'input s'étirait à toute la largeur du bloc
   (mesuré 216 px de large, 147 de haut) et chevauchait le texte. */
body .ecwid-ProductBrowserPopup input.form-control__checkbox {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 2px 10px 0 0 !important;
  appearance: auto !important;
  accent-color: var(--alb-navy);
}
body .ecwid-ProductBrowserPopup .form-control--checkbox {
  align-items: flex-start !important;
  gap: 0 !important;
}
body .ecwid-ProductBrowserPopup .form-control--checkbox .form-control__inline-label {
  flex: 1 1 auto !important;
}
/* Ces libellés-là ne sont PAS des pastilles de taille : on annule l'habillage
   en pastille hérité du sélecteur de format. */
body .ecwid-ProductBrowserPopup .form-control--checkbox .form-control__inline-label label {
  border: 0 !important;
  background: transparent !important;
  color: var(--alb-ardoise) !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* La ligne qui compte */
body .ecwid-ProductBrowserPopup .ec-cart-summary__total,
body .ecwid-ProductBrowserPopup .ec-cart-summary__total-value {
  color: var(--alb-navy) !important;
  font-weight: 700 !important;
}

/* Séparateurs : le gris d'Ecwid vire au marine très dilué */
body .ecwid-ProductBrowserPopup .ec-cart__block,
body .ecwid-ProductBrowserPopup .ec-cart-item {
  border-color: rgba(9, 9, 71, .14) !important;
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 560px) {
  :root { --alb-panneau: 100vw; }
  /* plein écran : un panneau de 480 px sur un téléphone de 390 px déborde */
  body .ecwid-popup.ecwid-ProductBrowserPopup { box-shadow: none; }
  body .ecwid-ProductBrowserPopup .popupMiddleCenter { padding: 20px 18px 32px !important; }
}

/* --- Mouvement réduit ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body .ecwid-popup.ecwid-ProductBrowserPopup,
  body .ecwid-popup.ecwid-ProductBrowserPopup.alb-panneau-ouvert {
    transition: none !important;
    transform: translateX(0);     /* apparaît en place, sans glissement */
  }
  /* Sans cette règle, le contenu resterait à opacité 0 : la transition qui
     devait le révéler est coupée, mais pas l'état de départ. */
  body .ecwid-ProductBrowserPopup .product-details {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .alb-ecwid-voile { transition: none; opacity: 1; }
}