/* ==========================================================================
   GLAMWEL LABORATOIRES - Landing page produit
   (list_product.landing_page = 1, vue product/showlandingpage.blade.php)

   Les visuels s'enchainent sans interstice ; le module d'achat s'intercale
   a la position choisie en back-office (product_landing_img.form_apres).
   ========================================================================== */

/* Largeur de la colonne : les visuels sont deposes a 1600px maximum par
   l'admin, 700px a l'ecran en exploite encore la pleine finesse sur les
   ecrans a forte densite. Le module d'achat suit la meme largeur. */
.landing {
  --landing-width: 700px;

  background: var(--ivory);
}

/* Les memes visuels, empiles dans la fiche produit classique : ils y
   suivent le detail du produit et precedent la reassurance. */
.landing-stack {
  display: block;
  /* Un peu d'air sous le dernier visuel : sans lui, l'image touche le
     bandeau de reassurance et le changement de fond parait brutal. */
  padding-bottom: 40px;
  background: var(--ivory);
}

/* Les visuels occupent toute la largeur disponible.

   Le plafond de 780px en PC est mis de cote, pas supprime : pour le
   retablir, commenter la ligne active ci-dessous et decommenter l'autre.
   Sous 780px de fenetre, min() retenait le 100%, les visuels restant donc
   bord a bord en mobile dans les deux cas. */
.landing-stack .landing-img { width: 100%; }
/* .landing-stack .landing-img { width: min(100%, 780px); } */

/* 1200px sur les ecrans PC. Le palier est a 1200px, et non aux 1120px
   habituels du site : en dessous, une largeur fixe de 1200px deborderait la
   fenetre et ferait apparaitre une barre de defilement horizontale. La regle
   de base ci-dessus garde les visuels pleine largeur jusque-la. */
@media (min-width: 1200px) {
  .landing-stack .landing-img { width: 1200px !important; }
}

@media (min-width: 760px) {
  .landing-stack { padding-bottom: 64px; }
}

/* ==========================================================================
   LANDING PAGE LIVREE EN HTML
   Le fragment apporte sa propre mise en forme dans un <style>. On ne lui
   impose donc rien d'autre que le fond du bandeau et un garde-fou sur les
   images, pour qu'il s'inscrive dans la fiche comme la pile de visuels.
   ========================================================================== */

/* LARGEUR : le bandeau reprend mot pour mot la formule de .container, pour
   que la landing s'aligne sur le fil d'Ariane, la fiche produit et la
   reassurance a tous les paliers (gouttieres de 20, 35, 50 puis 64px,
   plafond de 1500px).

   C'est le site qui decide de la largeur, pas l'archive - voir aussi la
   regle suivante, qui annule le plafond que le fragment se donne. L'agent
   qui genere une landing n'a donc aucune gouttiere a calculer ; tout au plus
   un plafond fluide, utile seulement si le fragment est ouvert hors du site :

       .glamwel-landing { width: 100%; max-width: 1500px; margin-inline: auto }

   Si les gouttieres du site changent un jour, aucune archive deja livree
   n'est a reprendre. Un max-width: 1500px pose dans l'archive seule, lui, ne
   s'alignerait qu'au-dela de 1628px de fenetre et deborderait des gouttieres
   en dessous (50px de chaque cote vers 1234px, par exemple). */
.landing-html {
  display: block;
  width: min(calc(100% - (var(--page-padding) * 2)), var(--max-width));
  margin-inline: auto;
  padding-bottom: 40px;
  background: var(--white);
}

/* Le plafond et les retraits lateraux que l'archive se donne sont annules :
   c'est le bandeau ci-dessus, et lui seul, qui fixe la largeur. Sans cela la
   landing s'affiche centree et plus etroite que le reste de la fiche - la
   premiere archive livree se plafonnait a 1040px avec 42px de retrait, soit
   pres de 270px de decalage a gauche par rapport au fil d'Ariane.

   Le selecteur porte le nom de balise (section) a dessein : le <style> du
   fragment est insere APRES cette feuille, donc a specificite egale il
   l'emporterait. L'element ajoute ce qu'il faut de poids pour passer devant,
   sans recourir a !important.

   Seuls les retraits HORIZONTAUX tombent : les retraits haut et bas de
   l'archive rythment la page et sont conserves. Les plafonds internes du
   fragment (largeur de colonne de texte, par exemple) le sont aussi - ils
   relevent de sa mise en page, pas de son alignement. */
section.landing-html > * {
  max-width: none;
  padding-inline: 0;
}

/*
 * La typographie du site l'emporte sur celle de l'archive.
 *
 * Les archives arrivent avec leur propre pile ("Helvetica Neue", Helvetica,
 * Arial...), ce qui faisait de la landing un ilot au milieu de la fiche.
 * !important est ici necessaire et non un raccourci : le <style> du fragment
 * est insere APRES cette feuille, et porte la declaration sur la meme classe
 * - a specificite egale, c'est lui qui gagnerait.
 *
 * La regle n'est pas limitee a .landing-html : la classe n'existe que dans
 * les archives, elle ne peut rien atteindre d'autre. Les enfants heritent,
 * les archives ne redeclarant la famille que sur leur racine.
 */
.glamwel-landing { font-family: var(--serif) !important; }

.landing-html img { max-width: 100%; height: auto; }

@media (min-width: 760px) {
  .landing-html { padding-bottom: 64px; }
}

/* EN-TETE : memes retraits que .product-detail de la fiche classique, aux
   trois paliers, pour que le fil d'Ariane tombe exactement au meme endroit.
   Le bas est laisse a la marge du fil d'Ariane (28px). */
.landing-head { padding: calc(var(--header-height) + 34px) 0 0; }

/* Le fil d'Ariane reprend .product-breadcrumb de product.css, marge basse
   comprise : rien a redefinir, l'entete doit etre identique a la fiche. */

/* Titre retire de l'affichage mais conserve dans le document : le premier
   visuel porte deja le nom du produit. */
.landing-title-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* VISUELS : pleine largeur, empiles sans espace. Plafonnes pour qu'un
   fichier concu vers 1600px ne soit pas etire sur un tres grand ecran. */
.landing-img {
  display: block;
  width: min(100%, var(--landing-width));
  height: auto;
  margin-inline: auto;
  border: 0;
}

/* MODULE D'ACHAT intercale entre deux visuels. */
.landing-form {
  padding: 40px 0 46px;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 12px);
}

.landing-form-inner { max-width: var(--landing-width); }

/* BARRE D'ACHAT MOBILE : masquee par defaut, affichee par landing.js
   uniquement quand le module d'achat est hors champ. */
.landing-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(16, 16, 15, .08);
  transform: translateY(100%);
  transition: transform 320ms var(--ease);
}

.landing-bar.is-visible { transform: translateY(0); }

.landing-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}

.landing-bar-price {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.landing-bar-name {
  overflow: hidden;
  color: var(--taupe);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-bar-amount {
  color: var(--black);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}

.landing-bar-button {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 46px;
  padding: 0 20px;
  background: var(--black);
  border: 0;
  color: var(--white);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.landing-bar-button .buy-arrow {
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 250ms var(--ease);
}

.landing-bar-button:hover .buy-arrow { width: 30px; }

/* La barre ne sert que sur petit ecran : sur desktop le module d'achat
   reste atteignable sans aide. */
@media (min-width: 760px) {
  .landing-bar { display: none; }
}

@media (max-width: 759px) {
  .landing-form { padding: 32px 0 36px; }
}

/* Memes paliers que .product-detail. */
@media (min-width: 760px) {
  .landing-head { padding-top: calc(var(--header-height) + 48px); }
}

@media (min-width: 1120px) {
  .landing-head { padding-top: calc(var(--header-height) + 64px); }
}