/** Shopify CDN: Minification failed

Line 57:0 Unexpected "}"

**/
/* fb-pdp — couche corrective responsive.   [v26 · 2026-08-05]

   Le marqueur de version ci-dessus sert à deux choses : savoir d'un coup d'oeil
   quelle version est réellement servie, et disposer d'un levier pour purger le
   cache de rendu de Shopify. Ce cache est le piège de cette chaîne : après une
   écriture de métachamps, la page publique continue de servir l'ancien rendu
   pendant des dizaines de minutes, sur une requête sur deux, sans le moindre
   en-tête qui le dise. Une écriture sur le thème, elle, invalide tout.


   Roman 2026-08-05. Les gabarits EcomWize sont portés tels quels, et ils ne
   connaissent QU'UN point de rupture : 1024px. Tout ce qui se trouve entre le
   téléphone et le bureau reçoit donc la mise en page mobile, puis bascule d'un
   coup. Ce fichier ne redessine rien — il corrige les défauts mesurés sur appareil.

   Ce qui n'était PAS un défaut, vérifié avant de toucher : les `1440px` des
   conteneurs sont des `max-width`, pas des largeurs fixes. Rien à y faire.

   Scopé sous .fbpdp pour ne jamais déborder sur Shrine PRO. */

/* 1. Garde anti-débordement horizontal. Une grille CSS refuse par défaut de
      descendre sous la taille de son contenu : un mot long ou un badge suffit
      à pousser la page hors écran. `min-width:0` lève ce plancher. */
.fbpdp,
.fbpdp *:not(svg):not(svg *) { min-width: 0; }
.fbpdp img { max-width: 100%; height: auto; }
.fbpdp { overflow-x: clip; }

/* 2. `white-space: nowrap` protège un badge d'être coupé en deux sur grand
      écran. En dessous, il fait exactement l'inverse : la ligne ne peut plus
      se replier et sort du cadre. Six éléments concernés, relâchés sous 768px. */
@media (max-width: 767px) {
  .fbpdp #fbpdp-banner02 .banner02-text,
  .fbpdp #fbpdp-instruction04 .instruction04-step-badge,
  .fbpdp #fbpdp-product01 .product01-sticky-title,
  .fbpdp #fbpdp-product01 .product01-save-badge,
  .fbpdp #fbpdp-product01 .product01-variant-card-badge,
  .fbpdp #fbpdp-product01 .product01-icon-text-label { white-space: normal; }
}

/* 3. Sélecteur d'offres. Le gabarit le rend maintenant en LIGNES (une par
      palier, vignette + libellé + économie + prix), donc les correctifs qui
      forçaient 3 colonnes et replafonnaient la vignette n'ont plus d'objet.
      Il reste à empêcher le prix de se replier sous 360px. */
@media (max-width: 360px) {
  .fbpdp #fbpdp-product01 .product01-variant-card { gap: 10px; padding: 10px 12px; }
  .fbpdp #fbpdp-product01 .product01-variant-card-img { width: 52px; height: 52px; }
  .fbpdp #fbpdp-product01 .product01-variant-card-title { font-size: 14.5px; }
  .fbpdp #fbpdp-product01 .product01-variant-card-save { font-size: 12.5px; }
  .fbpdp #fbpdp-product01 .product01-variant-card-price { font-size: 16px; }
}
}

/* 4. Etapes de la chronologie : le gabarit met la pastille et le titre sur la
      MEME ligne flex. Sur mobile la pastille mange la moitié de la largeur et
      le titre se replie dans ce qui reste, en colonne de 2 mots — « Hydration
      and / glow, / immediately ». On empile. */
@media (max-width: 767px) {
  .fbpdp #fbpdp-instruction04 .instruction04-step-badge-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .fbpdp #fbpdp-instruction04 .instruction04-step-title { font-size: 17px; }
}

/* 5. Bouton du bloc d'offre. Le gabarit le met en `width: 100%`, ce qui est
      juste dans la mise en page EcomWize d'origine où il vit dans une colonne
      à côté du visuel. Sur toute la largeur d'un écran de bureau, il devient
      une barre de 1600px qui ne ressemble plus à un bouton. On le plafonne au
      dessus de 1024px seulement, pour garder la pleine largeur sur mobile où
      c'est la bonne cible tactile. */
@media (min-width: 1024px) {
  .fbpdp #fbpdp-listiclecta04 .listiclecta04-button { max-width: 380px; }
}

/* 6. Palier intermédiaire absent des gabarits : entre 640 et 1023px on a la
      place de passer les badges de réassurance sur 4 colonnes plutôt que 2. */
@media (min-width: 640px) and (max-width: 1023px) {
  .fbpdp #fbpdp-banner05 .banner05-badges { grid-template-columns: repeat(4, 1fr); }
}

/* 7. Le héros n'existe QUE sur ordinateur, l'en-tête QUE sur mobile.

      Le gabarit pose son image en fond absolu et le texte par-dessus. Sur
      téléphone le titre tombait sur le visage. Trois parades successives —
      image composée 60/40, recadrage ancré en bas, voile derrière le texte —
      ont amélioré sans régler : ça restait un texte posé sur une photo dans un
      espace qui n'en a pas la place.

      Roman a tranché le 2026-08-05 : sur mobile on retire le héros et on met
      un vrai en-tête de marque à la place. La page y gagne deux fois — plus de
      texte illisible, et une identité en haut d'écran, qui manquait.

      Sur ordinateur, l'inverse : le héros a la largeur pour réserver sa moitié
      gauche au texte, et l'en-tête ferait doublon. */
@media (max-width: 1023px) {
  .fbpdp #fbpdp-hero04 { display: none; }
}
@media (max-width: 767px) {
  .fbpdp #fbpdp-hero04 .hero04-container { padding-inline: 16px; }
}

/* 8. Deux corps de texte relevés, demandés par Roman le 2026-08-05.

      Les gabarits fixent 14px sur mobile pour les puces du bloc d'achat et
      16px pour les questions de la FAQ. C'est trop bas pour du texte qu'on lit
      vraiment : les puces sont le dernier argument avant le bouton, et les
      questions sont ce qu'on parcourt pour décider d'ouvrir.

      À ne pas confondre avec la coupe des pavés : réduire la LONGUEUR d'un
      bloc et réduire la TAILLE de sa police sont deux choses opposées. La
      consigne de budget porte sur le nombre de caractères, jamais sur le corps. */
.fbpdp #fbpdp-product01 .product01-bullet-text { font-size: 15.5px; }
.fbpdp #fbpdp-faq04 .faq04-accordion-question { font-size: 17.5px; font-weight: 500; }
@media (min-width: 1024px) {
  .fbpdp #fbpdp-product01 .product01-bullet-text { font-size: 17px; }
  .fbpdp #fbpdp-faq04 .faq04-accordion-question { font-size: 20px; }
}