/** Shopify CDN: Minification failed

Line 8:0 Unexpected "`"
Line 1214:0 Unexpected "`"
Line 1452:32 Expected identifier but found "scale("

**/
```css
/* =========================================================
   ATELIER FLOU — SYSTÈME DE RENDU DES FLACONS
   =========================================================

   ORGANISATION DU FICHIER :

   01. Conteneur général du flacon
   02. Glow / halo lumineux
   03. Ombre du flacon
   04. Image et mouvement du flacon
   05. Flacon HERO
   06. Flacon dans les cartes produit
   07. Hover des cartes produit
   08. Liens / conteneurs d'images
   09. Flacon page produit
   10. Miniatures et panier
   11. Animations de révélation
   12. Animations d'entrée du HERO
   13. Image secondaire des cartes
   14. Cart drawer
   15. Menu mobile
   16. Filter overlay
   17. Quick View
   18. Pagination / éléments cachés
   19. Responsive mobile
   20. Accessibilité / réduction des animations

   ---------------------------------------------------------

   VOCABULAIRE :

   .af-bottle-render
   → Conteneur général du système de flacon.

   .af-bottle-glow
   → Halo lumineux placé derrière le flacon.

   .af-bottle-shadow
   → Ombre portée / ombre au sol du flacon.

   .af-bottle-motion
   → Conteneur du flacon qui reçoit les transformations
     de mouvement et de zoom.

   .af-bottle-image
   → Image réelle du flacon.

   --------------------------------------------------------- */


/* =========================================================
   01 — BOTTLE RENDER
   CONTENEUR PRINCIPAL DU FLACON
   =========================================================

   Ce module constitue la "scène" dans laquelle sont placés :
   - le glow
   - l'ombre
   - le flacon

   Il sert également de référence de positionnement
   pour les éléments positionnés en absolute.
   ========================================================= */

.af-bottle-render {
  position: relative;
  /* Sert de repère de positionnement aux éléments enfants
     utilisant position: absolute. */

  display: flex;
  /* Active Flexbox pour organiser le contenu. */

  align-items: center;
  /* Centre verticalement les éléments dans le conteneur. */

  justify-content: center;
  /* Centre horizontalement les éléments dans le conteneur. */

  isolation: isolate;
  /* Isole le système de z-index de ce composant du reste
     de la page. */

  overflow: visible;
  /* Autorise le glow, l'ombre ou le flacon à dépasser
     visuellement du conteneur. */
}


/* =========================================================
   02 — GLOW + SHADOW
   POSITIONNEMENT COMMUN
   =========================================================

   Le glow et l'ombre sont des éléments décoratifs.
   Ils ne doivent jamais empêcher l'utilisateur de cliquer
   sur le flacon ou sur le lien.
   ========================================================= */

.af-bottle-glow,
.af-bottle-shadow {
  position: absolute;
  /* Permet de placer librement ces éléments dans
     .af-bottle-render. */

  pointer-events: none;
  /* Les éléments décoratifs ne capturent aucun clic. */
}


/* =========================================================
   02A — GLOW / HALO LUMINEUX
   =========================================================

   Crée une lumière diffuse derrière le parfum.
   ========================================================= */

.af-bottle-glow {
  z-index: 0;
  /* Place le glow derrière le flacon. */

  border-radius: 50%;
  /* Transforme la zone en forme circulaire/elliptique. */

  background: radial-gradient(
    ellipse,
    rgba(194,185,167,.22),
    /* Couleur/intensité au centre du halo. */

    rgba(184,167,137,.05) 45%,
    /* Transition intermédiaire à 45%. */

    transparent 75%
    /* Le halo disparaît progressivement jusqu'à 75%. */
  );

  filter: blur(18px);
  /* Rend le halo très diffus et doux. */
}


/* =========================================================
   03 — SHADOW / OMBRE
   =========================================================

   Crée une ombre elliptique sous / derrière le flacon.
   ========================================================= */

.af-bottle-shadow {
  z-index: 0;
  /* Reste derrière le flacon. */

  border-radius: 50%;
  /* Donne une forme elliptique à l'ombre. */

  background: radial-gradient(
    ellipse,
    rgba(0,0,0,.78),
    /* Centre de l'ombre : très sombre. */

    rgba(0,0,0,.24) 52%,
    /* Zone intermédiaire. */

    transparent 73%
    /* Disparition progressive de l'ombre. */
  );

  filter: blur(11px);
  /* Adoucit les contours de l'ombre. */
}


/* =========================================================
   04 — BOTTLE MOTION
   CONTENEUR DU FLACON
   =========================================================

   C'est ce conteneur qui reçoit les transformations :
   - scale()
   - translateY()
   - etc.

   IMPORTANT :
   C'est donc généralement ici qu'on déplace le flacon
   sans déplacer son glow ou son ombre.
   ========================================================= */

.af-bottle-motion {
  position: relative;
  /* Permet le positionnement relatif du flacon. */

  z-index: 1;
  /* Place le flacon devant le glow et l'ombre. */

  display: block;
  /* Transforme l'élément en bloc. */

  min-width: 0;
  /* Empêche une largeur minimale automatique
     de perturber le centrage. */

  min-height: 0;
  /* Même principe pour la hauteur. */
}


/* =========================================================
   04A — IMAGE DU FLACON
   ========================================================= */

.af-bottle-image {
  display: block;
  /* Évite les espaces parasites liés au comportement inline
     des images. */

  width: 100%;
  /* L'image prend toute la largeur disponible. */

  height: 100%;
  /* L'image prend toute la hauteur disponible. */

  object-fit: contain;
  /* Conserve les proportions du flacon sans le déformer. */

  filter: drop-shadow(
    14px 19px 16px rgba(0,0,0,.38)
  );
  /* Ombre directement appliquée au contour du flacon. */
}


/* =========================================================
   05 — BOTTLE HERO
   =========================================================

   Version du système utilisée dans le HERO principal.
   ========================================================= */

.af-bottle-hero {
  height: 100%;
  /* Le système occupe toute la hauteur disponible. */

  width: 100%;
  /* Le système occupe toute la largeur disponible. */
}


/* ---------------------------------------------------------
   HERO — GLOW
   --------------------------------------------------------- */

.af-bottle-hero .af-bottle-glow {
  width: 80%;
  /* Largeur du halo par rapport au conteneur. */

  height: 70%;
  /* Hauteur du halo. */

  top: 15%;
  /* Position verticale du halo. */

  opacity: .45;
  /* Intensité visuelle du halo. */
}


/* ---------------------------------------------------------
   HERO — OMBRE
   --------------------------------------------------------- */

.af-bottle-hero .af-bottle-shadow {
  width: 48%;
  /* Largeur de l'ombre. */

  height: 8%;
  /* Épaisseur verticale de l'ombre. */

  bottom: 11%;
  /* Distance entre l'ombre et le bas du conteneur. */

  left: 26%;
  /* Position horizontale de l'ombre. */

  opacity: .4;
  /* Intensité de l'ombre. */
}


/* ---------------------------------------------------------
   HERO — FLACON
   --------------------------------------------------------- */

.af-bottle-hero .af-bottle-motion {
  height: 72%;
  /* Hauteur du flacon dans le HERO. */

  max-width: 80%;
  /* Largeur maximale autorisée. */

  aspect-ratio: 442/720;
  /* Rapport largeur/hauteur du conteneur du flacon. */
}


/* ---------------------------------------------------------
   HERO — RENDU SPÉCIFIQUE DE L'IMAGE
   --------------------------------------------------------- */

.hero-object .af-bottle-hero .af-bottle-image {
  animation: none;
  /* Désactive toute animation directement appliquée
     à cette image. */

  filter: drop-shadow(
    18px 27px 20px rgba(0,0,0,.53)
  );
  /* Ombre plus forte pour le flacon principal du HERO. */
}


/* =========================================================
   06 — BOTTLE CARD
   FLACON DANS UNE CARTE PRODUIT
   ========================================================= */

.af-bottle-card {
  height: 100%;
  /* Utilise toute la hauteur disponible. */

  width: 100%;
  /* Utilise toute la largeur disponible. */
}


/* ---------------------------------------------------------
   CARD — GLOW
   --------------------------------------------------------- */

.af-bottle-card .af-bottle-glow {
  width: 80%;
  /* Largeur du halo. */

  height: 75%;
  /* Hauteur du halo. */

  opacity: .3;
  /* Halo plus discret que celui du HERO. */

  transition: opacity .8s ease-out;
  /* Animation progressive de l'intensité du halo. */
}


/* ---------------------------------------------------------
   CARD — SHADOW
   --------------------------------------------------------- */

.af-bottle-card .af-bottle-shadow {
  height: 11%;
  /* Hauteur de l'ombre. */

  width: 42%;
  /* Largeur de l'ombre. */

  bottom: 5%;
  /* Position verticale. */

  left: 29%;
  /* Position horizontale. */

  opacity: .55;
  /* Intensité de l'ombre. */
}


/* ---------------------------------------------------------
   CARD — FLACON
   --------------------------------------------------------- */

.af-bottle-card .af-bottle-motion {
  height: 77%;
  /* Hauteur du flacon dans la carte. */

  max-width: 76%;
  /* Largeur maximale du flacon. */

  aspect-ratio: 442/720;
  /* Proportions du flacon. */

  transition: transform .85s cubic-bezier(.18,.75,.2,1);
  /* Animation utilisée lors du hover. */
}


/* ---------------------------------------------------------
   CARD — TRAVEL SIZE
   ---------------------------------------------------------

   Utilise un ratio différent car le flacon Travel
   possède des proportions différentes.
   --------------------------------------------------------- */

.af-bottle-card.af-bottle-travel .af-bottle-motion {
  height: 82%;
  /* Flacon Travel légèrement plus haut. */

  max-width: 62%;
  /* Largeur maximale plus réduite. */

  aspect-ratio: 308/859;
  /* Ratio spécifique du flacon Travel. */
}


/* ---------------------------------------------------------
   CARD — IMAGE
   --------------------------------------------------------- */

.af-bottle-card .af-bottle-image {
  width: 140% !important;
  /* Force l'image à remplir la largeur. */

  height: 110% !important;
  /* Force l'image à remplir la hauteur. */

  filter: drop-shadow(
    9px 15px 13px rgba(36,28,20,.2)
  );
  /* Ombre plus légère adaptée aux cartes produit. */
}


/* =========================================================
   07 — PRODUCT CARD HOVER
   =========================================================

   Lorsque l'utilisateur survole une carte produit,
   le flacon :
   → grandit légèrement
   → remonte légèrement
   ========================================================= */

.product-card:hover .af-bottle-card .af-bottle-motion,
.product-card:focus-within .af-bottle-card .af-bottle-motion {
  transform: scale(1.045) translateY(-5px);
  /* Agrandissement de 4,5%.
     Déplacement de 5px vers le haut. */
}


.product-card:hover .af-bottle-card .af-bottle-glow {
  opacity: .8;
  /* Le halo devient plus visible au survol. */
}


/* =========================================================
   08 — CARD IMAGE LINK
   =========================================================

   Conteneur cliquable de l'image produit.
   ========================================================= */

.card-image-link {
  display: block;
  /* Rend le lien comme un bloc. */

  width: 100%;
  /* Pleine largeur. */

  height: 100%;
  /* Pleine hauteur. */

  text-decoration: none;
  /* Supprime le soulignement du lien. */

  position: relative;
  /* Sert de référence au positionnement absolu
     du système de flacon. */
}


/* ---------------------------------------------------------
   RENDER DANS LE LIEN
   --------------------------------------------------------- */

.card-image-link > .af-bottle-render {
  position: absolute;
  /* Place le système indépendamment du flux normal. */

  inset: 0;
  /* Équivaut à top:0 / right:0 / bottom:0 / left:0. */

  width: 100%;
  /* Pleine largeur. */

  height: 100%;
  /* Pleine hauteur. */
}


/* ---------------------------------------------------------
   TRAVEL — POSITIONNEMENT CENTRAL
   --------------------------------------------------------- */

.card-image-link > .af-bottle-render.af-bottle-travel .af-bottle-motion {
  position: absolute;
  /* Positionnement indépendant. */

  left: 50%;
  /* Centre horizontalement le point de référence. */

  top: 50%;
  /* Centre verticalement le point de référence. */

  height: 78%;
  /* Hauteur du flacon Travel. */

  width: auto;
  /* Largeur calculée automatiquement à partir du ratio. */

  aspect-ratio: 308/859;
  /* Proportions du flacon Travel. */

  transform: translate(-50%,-50%);
  /* Ramène le centre réel du flacon sur le centre du conteneur. */
}


/* ---------------------------------------------------------
   TRAVEL — HOVER
   --------------------------------------------------------- */

.product-card:hover .card-image-link > .af-bottle-travel .af-bottle-motion {
  transform: translate(-50%,-50%) scale(1.045);
  /* Conserve le centrage tout en agrandissant le flacon. */
}


/* =========================================================
   09 — BOTTLE DETAIL
   PAGE PRODUIT
   ========================================================= */

.af-bottle-detail {
  height: 110%;
  /* Utilise toute la hauteur disponible. */

  width: 90%;
  /* Utilise toute la largeur disponible. */
}


/* ---------------------------------------------------------
   DETAIL — GLOW
   --------------------------------------------------------- */

.af-bottle-detail .af-bottle-glow {
  width: 75%;
  /* Largeur du halo. */

  height: 82%;
  /* Hauteur du halo. */

  background: radial-gradient(
    ellipse,
    rgba(188,180,163,.29),
    transparent 70%
  );
  /* Halo spécifique à la page produit. */
}


/* ---------------------------------------------------------
   DETAIL — SHADOW
   --------------------------------------------------------- */

.af-bottle-detail .af-bottle-shadow {
  height: 9%;
  /* Épaisseur de l'ombre. */

  width: 44%;
  /* Largeur de l'ombre. */

  bottom: 7%;
  /* Position verticale. */

  left: 28%;
  /* Position horizontale. */

  opacity: .38;
  /* Intensité de l'ombre. */
}


/* ---------------------------------------------------------
   DETAIL — FLACON
   --------------------------------------------------------- */

.af-bottle-detail .af-bottle-motion {
  height: 100%;
  /* Hauteur du flacon sur la page produit. */

  aspect-ratio: 442/720;
  /* Ratio du flacon. */

  transition: transform 1s ease-out;
  /* Animation douce du hover. */
}


/* ---------------------------------------------------------
   DETAIL — HOVER
   --------------------------------------------------------- */

.product-main-image:hover .af-bottle-detail .af-bottle-motion {
  transform: scale(1.055) translateY(-5px);
  /* Zoom de 5,5% + déplacement de 5px vers le haut. */
}


/* ---------------------------------------------------------
   TRAVEL — DETAIL / THUMB / CART
   --------------------------------------------------------- */

.af-bottle-detail.af-bottle-travel .af-bottle-motion,
.af-bottle-thumb.af-bottle-travel .af-bottle-motion,
.af-bottle-cart.af-bottle-travel .af-bottle-motion {
  aspect-ratio: 308/859;
  /* Utilise le ratio spécifique au Travel. */
}


/* =========================================================
   10 — THUMBNAIL + CART
   MINIATURES ET PANIER
   ========================================================= */

.af-bottle-thumb,
.af-bottle-cart {
  width: 100%;
  /* Pleine largeur du conteneur. */

  height: 100%;
  /* Pleine hauteur du conteneur. */
}


/* ---------------------------------------------------------
   THUMB / CART — FLACON
   --------------------------------------------------------- */

.af-bottle-thumb .af-bottle-motion,
.af-bottle-cart .af-bottle-motion {
  height: 87%;
  /* Flacon relativement grand dans ces petits espaces. */

  aspect-ratio: 442/720;
  /* Ratio standard du flacon. */
}


/* ---------------------------------------------------------
   THUMB / CART — OMBRE
   --------------------------------------------------------- */

.af-bottle-thumb .af-bottle-shadow,
.af-bottle-cart .af-bottle-shadow {
  bottom: 5%;
  /* Place l'ombre près du bas. */

  width: 55%;
  /* Largeur importante par rapport au conteneur. */

  height: 8%;
  /* Épaisseur de l'ombre. */

  opacity: .35;
  /* Ombre discrète. */
}


/* ---------------------------------------------------------
   THUMB / CART — GLOW
   --------------------------------------------------------- */

.af-bottle-thumb .af-bottle-glow,
.af-bottle-cart .af-bottle-glow {
  width: 85%;
  /* Halo relativement large. */

  height: 75%;
  /* Hauteur du halo. */

  opacity: .3;
  /* Halo discret. */
}


/* =========================================================
   11 — REVEAL
   ANIMATION D'APPARITION AU SCROLL
   ========================================================= */

.reveal {
  opacity: 0;
  /* Élément invisible avant son apparition. */

  transform: translate3d(0,30px,0);
  /* Commence 30px plus bas. */

  filter: blur(2px);
  /* Légèrement flouté au départ. */

  transition:
    opacity 1.05s ease-out,
    transform 1.05s ease-out,
    filter 1.05s ease-out;
  /* Anime simultanément :
     - l'opacité
     - la position
     - le flou */
}


.reveal.is-visible {
  opacity: 1;
  /* Rend l'élément visible. */

  transform: none;
  /* Retourne à sa position normale. */

  filter: none;
  /* Supprime le flou. */
}


/* =========================================================
   12 — HERO ENTRY
   ANIMATION D'ENTRÉE DU HERO
   ========================================================= */

.hero-enter {
  animation: hero-enter 1s cubic-bezier(.2,.75,.2,1) both;
  /* Lance l'animation hero-enter pendant 1 seconde. */
}


/* ---------------------------------------------------------
   ORDRE D'APPARITION DES ÉLÉMENTS
   --------------------------------------------------------- */

.hero-enter-1 {
  animation-delay: 0s;
  /* Premier élément. */
}

.hero-enter-2 {
  animation-delay: .15s;
  /* Deuxième élément : 150ms après. */
}

.hero-enter-3 {
  animation-delay: .35s;
  /* Troisième élément : 350ms après. */
}

.hero-enter-4 {
  animation-delay: .5s;
  /* Quatrième élément : 500ms après. */
}


/* ---------------------------------------------------------
   KEYFRAMES HERO
   --------------------------------------------------------- */

@keyframes hero-enter {

  from {
    opacity: 0;
    /* Invisible au départ. */

    transform: translateY(19px);
    /* Commence 19px plus bas. */

    filter: blur(4px);
    /* Commence flouté. */
  }

  to {
    opacity: 1;
    /* Devient totalement visible. */

    transform: none;
    /* Retourne à sa position initiale. */

    filter: blur(0);
    /* Devient parfaitement net. */
  }

}


/* =========================================================
   13 — SECOND IMAGE DES PRODUCT CARDS
   ========================================================= */

.product-card-art .card-second {
  transition: opacity .85s ease-out;
  /* Rend le changement d'opacité progressif. */
}


/* =========================================================
   14 — CART DRAWER
   PANIER LATÉRAL
   ========================================================= */

.cart-drawer {
  animation: drawer-in .6s ease-out;
  /* Anime l'ouverture du panier. */
}


@keyframes drawer-in {

  from {
    transform: translateX(100%);
    /* Le panier commence entièrement hors écran à droite. */
  }

  to {
    transform: translateX(0);
    /* Le panier revient dans sa position normale. */
  }

}


/* =========================================================
   15 — MOBILE MENU
   ========================================================= */

.mobile-menu-panel {
  animation: menu-in .55s ease-out;
  /* Anime l'apparition du menu mobile. */
}


@keyframes menu-in {

  from {
    opacity: 0;
    /* Menu invisible au départ. */
  }

  to {
    opacity: 1;
    /* Menu totalement visible. */
  }

}


/* =========================================================
   16 — FILTER OVERLAY
   ========================================================= */

.filter-overlay:not([hidden]) {
  display: flex;
  /* Lorsque l'overlay n'est pas caché,
     il utilise Flexbox. */
}


/* =========================================================
   17 — QUICK VIEW
   APERÇU RAPIDE D'UN PRODUIT
   ========================================================= */


/* ---------------------------------------------------------
   QUICK VIEW — FOND
   --------------------------------------------------------- */

.quick-view-backdrop {
  position: fixed;
  /* Reste fixé à l'écran. */

  z-index: 110;
  /* Passe devant les autres éléments de la page. */

  inset: 0;
  /* Couvre toute la fenêtre. */

  background: rgba(9,9,9,.55);
  /* Fond sombre semi-transparent. */

  display: flex;
  /* Active Flexbox. */

  justify-content: flex-end;
  /* Place le panneau à droite. */

  align-items: stretch;
  /* Étire le panneau sur toute la hauteur. */
}


/* ---------------------------------------------------------
   QUICK VIEW — PANNEAU
   --------------------------------------------------------- */

.quick-view-panel {
  width: min(100%,520px);
  /* Largeur maximale de 520px,
     sans jamais dépasser 100% de l'écran. */

  background: var(--ivoire);
  /* Utilise la variable de couleur ivoire
     définie ailleurs dans le design system. */

  padding: 32px;
  /* Espace intérieur. */

  overflow-y: auto;
  /* Permet de faire défiler le contenu verticalement. */
}


/* ---------------------------------------------------------
   QUICK VIEW — HEADER
   --------------------------------------------------------- */

.quick-view-top {
  display: flex;
  /* Organisation horizontale. */

  align-items: center;
  /* Centre verticalement les éléments. */

  justify-content: space-between;
  /* Éloigne les éléments vers les deux extrémités. */

  border-bottom: 1px solid var(--gris-chaud);
  /* Ligne de séparation. */

  padding-bottom: 18px;
  /* Espace sous le header. */
}


.quick-view-top button {
  border: 0;
  /* Supprime la bordure par défaut. */

  background: none;
  /* Supprime le fond du bouton. */

  padding: 5px;
  /* Zone intérieure du bouton. */
}


/* ---------------------------------------------------------
   QUICK VIEW — FLACON
   --------------------------------------------------------- */

.af-bottle-quick {
  height: 330px;
  /* Hauteur de la zone réservée au flacon. */

  background: #ece9e3;
  /* Fond de la zone du flacon. */

  margin: 25px 0;
  /* Espace vertical autour du flacon. */
}


.af-bottle-quick .af-bottle-glow {
  height: 90%;
  /* Hauteur du halo. */

  width: 70%;
  /* Largeur du halo. */
}


.af-bottle-quick .af-bottle-shadow {
  bottom: 6%;
  /* Position de l'ombre. */

  width: 40%;
  /* Largeur de l'ombre. */

  height: 9%;
  /* Hauteur de l'ombre. */
}


.af-bottle-quick .af-bottle-motion {
  height: 85%;
  /* Hauteur du flacon. */

  aspect-ratio: 442/720;
  /* Ratio du flacon. */
}


/* ---------------------------------------------------------
   QUICK VIEW — TITRE
   --------------------------------------------------------- */

.quick-view-copy h2 {
  font-size: 58px;
  /* Taille importante du nom du parfum. */

  margin: 12px 0 25px;
  /* Marges autour du titre. */
}


/* ---------------------------------------------------------
   QUICK VIEW — DESCRIPTION
   --------------------------------------------------------- */

.quick-view-copy p {
  font: 300 21px/1.45 var(--serif);
  /* Police serif :
     300 = graisse légère
     21px = taille
     1.45 = interligne */
}


/* ---------------------------------------------------------
   QUICK VIEW — PRIX
   --------------------------------------------------------- */

.quick-view-price {
  display: flex;
  /* Organisation horizontale. */

  justify-content: space-between;
  /* Sépare les informations de prix. */

  align-items: center;
  /* Centre verticalement. */

  border-top: 1px solid var(--gris-chaud);
  /* Ligne supérieure. */

  border-bottom: 1px solid var(--gris-chaud);
  /* Ligne inférieure. */

  padding: 18px 0;
  /* Espacement vertical. */

  margin: 28px 0;
  /* Espacement extérieur. */

  font-size: 13px;
  /* Taille du texte. */

  gap: 10px;
  /* Espace minimal entre les éléments. */
}


/* ---------------------------------------------------------
   QUICK VIEW — BOUTON
   --------------------------------------------------------- */

.quick-view-copy .af-button {
  width: 100%;
  /* Bouton pleine largeur. */
}


.quick-view-copy > .underlined-link {
  margin-top: 18px;
  /* Espace au-dessus du lien. */
}


/* =========================================================
   18 — PAGINATION / HIDDEN
   ========================================================= */

.pagination {
  padding: 24px 0;
  /* Espacement vertical de la pagination. */

  text-align: center;
  /* Centre les éléments. */

  font-size: 12px;
  /* Taille du texte. */
}


/* ---------------------------------------------------------
   HIDDEN
   ---------------------------------------------------------

   Tous les éléments HTML possédant l'attribut hidden
   sont complètement masqués.
   --------------------------------------------------------- */

[hidden] {
  display: none !important;
}


/* =========================================================
   19 — RESPONSIVE MOBILE
   =========================================================

   Ces règles s'activent uniquement lorsque la largeur
   de l'écran est inférieure ou égale à 700px.
   ========================================================= */

@media (max-width:700px) {


  /* -------------------------------------------------------
     HERO — MOBILE
     ------------------------------------------------------- */

  .af-bottle-hero .af-bottle-motion {
    height: 86%;
    /* Le flacon HERO devient plus grand verticalement
       sur mobile. */
  }


  /* -------------------------------------------------------
     PRODUCT CARD — MOBILE
     ------------------------------------------------------- */

  .af-bottle-card .af-bottle-motion {
    height: 79%;
    /* Hauteur du flacon dans les cartes. */

    max-width: 85%;
    /* Largeur maximale augmentée sur mobile. */
  }


  /* -------------------------------------------------------
     PRODUCT DETAIL — MOBILE
     ------------------------------------------------------- */

  .af-bottle-detail .af-bottle-motion {
    height: 80%;
    /* Hauteur du flacon sur la page produit. */
  }

}


/* =========================================================
   20 — ACCESSIBILITÉ
   PREFERS-REDUCED-MOTION
   =========================================================

   Certains utilisateurs demandent à leur appareil de
   limiter les animations et mouvements.

   Cette media query permet de respecter cette préférence.
   ========================================================= */

@media (prefers-reduced-motion:reduce) {


  /* -------------------------------------------------------
     REVEAL
     ------------------------------------------------------- */

  .reveal {
    opacity: 1;
    /* Rend immédiatement l'élément visible. */

    transform: none;
    /* Supprime le déplacement initial. */

    filter: none;
    /* Supprime le flou. */
  }


  /* -------------------------------------------------------
     ANIMATIONS
     ------------------------------------------------------- */

  .hero-enter,
  .cart-drawer,
  .mobile-menu-panel {
    animation: none !important;
    /* Désactive les animations pour respecter
       la préférence utilisateur. */
  }

}
```


/* Ajustement des images 2 et 3 des pages produits */

/* Ajustement des images 1 des pages produits */

/* =========================================================
   AJUSTEMENTS — PAGES PRODUITS UNIQUEMENT
   ========================================================= */

/* Image principale — centrage */
.product-page .product-main-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flacon principal — centrage horizontal */
.product-page .product-main-image .af-bottle-detail .af-bottle-motion {
  margin-left: auto;
  margin-right: auto;
}

/* Miniatures — centrage du contenu */
.product-page .product-thumbs [data-gallery-thumb] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------
   MINIATURE DU FLACON
   --------------------------------------------------------- */

.product-page .product-thumbs [data-gallery-thumb] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-page .product-thumbs [data-gallery-thumb] .af-bottle-render {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-page .product-thumbs [data-gallery-thumb] .af-bottle-motion {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------
   03. PRODUITS À DÉCOUVRIR
   --------------------------------------------------------- */


/* Centre le conteneur du flacon dans chaque carte. */
.product-page .related-section .af-bottle-render {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centre le flacon lui-même dans son conteneur. */
.product-page .related-section .af-bottle-motion {
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   GRILLE DES PARFUMS — PAGE COLLECTION
   ========================================================= */

.catalog-grid [data-catalog-item] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-grid [data-catalog-item] .af-bottle-render {
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-grid [data-catalog-item] .af-bottle-motion {
  margin-top: 0;
  margin-bottom: 0;
}
.catalog-grid .product-card h3 {
  min-height: 2.6em;
}

/* =========================================================
   FLÈCHES — EMPÊCHER LE RENDU EMOJI SUR MOBILE
   ========================================================= */

/*
   Safari / iOS peut transformer certains caractères Unicode
   comme ↗, ↘, ↓ ou ✕ en glyphes emoji.

   On cible uniquement les éléments susceptibles de contenir
   ces caractères afin de ne pas modifier la typographie
   générale du site.
*/

@media (max-width: 700px) {

  .card-discover,
  .card-preview-trigger,
  .hero-scroll,
  .hero-actions span,
  .quick-view-panel [data-preview-close] {

    font-family:
      "Helvetica Neue",
      Arial,
      sans-serif !important;

    font-variant-emoji: text !important;
    -webkit-font-feature-settings: "liga" 0;

  }

}

/* =========================================================
   ATELIER FLOU — ALIGNEMENT GRILLE COLLECTION
   =========================================================

   Objectifs :
   - Une cellule = une hauteur cohérente
   - Les bordures restent parfaitement alignées
   - Les cartes remplissent leur cellule
   - Les titres sur 1 ou 2 lignes n'affectent plus la grille
   - Les flacons restent centrés
   ========================================================= */


/* ---------------------------------------------------------
   01. CELLULE DE GRILLE
   --------------------------------------------------------- */

.catalog-grid > [data-catalog-item] {
  min-width: 0;
  height: 100%;
  display: flex;
}


/* ---------------------------------------------------------
   02. CARTE PRODUIT
   --------------------------------------------------------- */

.catalog-grid > [data-catalog-item] .product-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}


/* ---------------------------------------------------------
   03. ZONE DU PRODUIT
   --------------------------------------------------------- */

.catalog-grid > [data-catalog-item] .product-card > * {
  min-width: 0;
}


/* ---------------------------------------------------------
   04. TITRE PRODUIT
   ---------------------------------------------------------

   Deux lignes maximum avec une hauteur réservée.
   Ainsi, un nom court et un nom long ne déplacent
   plus les éléments suivants.
   --------------------------------------------------------- */

.catalog-grid > [data-catalog-item] .product-card h3 {
  min-height: 2.6em;
}


/* ---------------------------------------------------------
   05. RENDU DU FLACON
   --------------------------------------------------------- */

.catalog-grid > [data-catalog-item] .af-bottle-render {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ---------------------------------------------------------
   06. POSITIONNEMENT DU FLACON
   --------------------------------------------------------- */

.catalog-grid > [data-catalog-item] .af-bottle-motion {
  margin-top: 0;
  margin-bottom: 60px;
}

/* =========================================================
   ATELIER FLOU — COMPTEUR DU PANIER
   =========================================================

   Le compteur était précédemment dans une balise <sup>,
   ce qui le plaçait automatiquement en exposant.

   Il est maintenant traité comme un élément normal :
   - position normale
   - taille de police normale
   - graisse forte
   - alignement avec le titre
   ========================================================= */

.cart-count {
  font-size: 700;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: baseline;
  margin-left: 0.15em;
}


/* =========================================================
   LE VOYAGE — PAGE PRODUIT
   Positionnement + ombre de l'étui
   ========================================================= */

.product-page .af-bottle-detail.af-bottle-travel {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-80px); scale(2.5)
}

.product-page .af-bottle-detail.af-bottle-travel .af-bottle-motion {
  height: 82%;
  width: auto;
  max-width: 62%;
  aspect-ratio: 308 / 859;
  margin: 0 auto;
  transform: none;
}


.product-page .product-main-image:hover
.af-bottle-detail.af-bottle-travel .af-bottle-motion {
  transform: scale(1.045);
}

@media (max-width: 700px) {
  .product-page .af-bottle-detail.af-bottle-travel {
    transform: translateY(-30px);
  }

  .product-page .af-bottle-detail.af-bottle-travel .af-bottle-motion {
    height: 79%;
    max-width: 62%;
  }
}

/* =========================================================
   LE VOYAGE — PAGE PRODUIT
   Suppression du drop-shadow du flacon
   ========================================================= */

.product-page .product-thumbs [data-gallery-thumb]:first-child .af-bottle-render {
  position: relative !important;
  overflow: hidden !important;
}

.product-page .product-thumbs [data-gallery-thumb]:first-child .af-bottle-render .af-bottle-shadow,
.product-page .product-thumbs [data-gallery-thumb]:first-child .af-bottle-render .af-bottle-glow {
  display: none !important;
}

.product-page .af-bottle-detail.af-bottle-travel .af-bottle-shadow {
  display: block !important;
  width: 44%;
  height: 8%;
  bottom: 7%;
  left: 28%;
  opacity: .32;
}

/* Apercu des parfums à régler */

.quick-view-panel .af-bottle-glow {
  display: none !important;
}

.quick-view-panel .af-bottle-shadow {
  display: block !important;
  width: 42%;
  height: 7%;
  left: 29%;
  bottom: 8%;
  opacity: .28;
  filter: blur(9px);
}

.quick-view-panel .af-bottle-quick {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-view-panel .af-bottle-quick .af-bottle-motion {
  width: 150%;
  height: 150%;
  margin: auto;
}

.quick-view-panel .af-bottle-quick .af-bottle-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quick-view-panel .af-bottle-quick .af-bottle-motion {
  transform: translateY(-90px);
}

/* =========================================================
   HERO — MOBILE
   POSITIONNEMENT DU FLACON LIVA
   ========================================================= */

@media (max-width: 700px) {
  .hero-object .af-bottle-hero .af-bottle-motion {
    transform: translateX(100px) translateY(100px) scale(2.5)
  }
}

/* Croix pour fermer l'aperçu */

.quick-view-panel [data-preview-close] {
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
  cursor: pointer;
}