/** Shopify CDN: Minification failed

Line 761:2 Unexpected "@media"

**/
/* ==========================================================================
   Home + design system — refonte maquette Tupperware
   Chargé après theme.css / custom-header.css : ce fichier a le dernier mot.

   Découpage :
     1.  Jetons de marque
     2.  Titres de section
     3.  Slideshow — variante « split »
     4.  Boutons
     5.  Badges produit
     6.  Carte produit
     7.  Sélection du moment (onglets + slider)
     8.  Bandeau catégories + Essentiels du quotidien
     9.  Blocs collection avec bannière (Cuisson, Service de table)
     10. Besoin d'inspiration (pilules à icône)
     11. Recettes (featured-blog, cartes recette)
     12. Barre de réassurance
     13. FAQ, colonnes d'aide, newsletter
     14. Carrousels — barre de progression et flèches (global)
     15. Tupper'CLUB — image-with-text en pavé
     16. Galerie Instagram — scrolling-gallery-image
     17. FAQ — collapsible-tabs avec image plein bord
   ========================================================================== */

/* ==========================================================================
   1. Jetons de marque
   Les 4 premiers existent déjà dans custom-header.css : on les redéclare pour
   que ce fichier reste lisible seul, la valeur est identique.
   ========================================================================== */

:root {
   --tup-teal-900: #00524f; /* titres, texte sur fond clair, CTA rond */
   --tup-teal-500: #4fa0a5;
   --tup-cyan-300: #7bd6dc; /* fond du bouton primaire */
   --tup-cyan-300-20: #7bd6dc33; /* meme cyan a 20% — fond d'onglet actif */
   --tup-cyan-100: #dcf3fa;
   --tup-mint-100: #d9f3f2; /* fond du bouton secondaire */
   --tup-red-600: #d8371f; /* prix soldé et taux de remise */
   --tup-orange-500: #ff7500; /* accent de l'univers Recettes */
   --tup-amber-100-20: #ffe4ab33; /* fond du contenu des cartes recette */
   --tup-grey-900: #292929; /* texte courant sur fond clair */
   --tup-grey-900-10: #2929291a; /* meme gris a 10% — piste de progression */
   --tup-grey-900-20: #29292933; /* meme gris a 20% — bordure de flèche */
   --tup-grey-600: #5b5b5b; /* sous-titre de carte produit */
   --tup-grey-200: #e8e8e8; /* bordure de carte */

   --tup-card-radius: 1.2rem;
   --tup-section-radius: 2.4rem;

   /* Carte produit — valeurs relevees dans la maquette. */
   --tup-card-border: #eeeeee;
   --tup-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);

   /* Gouttière du site, capturée depuis --page-padding AU NIVEAU RACINE.
      Une propriété personnalisée résout ses var() sur l'élément qui la
      déclare : la valeur est donc figée ici puis héritée telle quelle, même
      dans les sections pleine largeur qui remettent --page-padding à 0
      (slideshow). C'est ce qui permet d'aligner un contenu hors grille sur
      la colonne du site sans redupliquer les points de rupture du thème. */
   --tup-page-gutter: var(--page-padding);
}

/* ==========================================================================
   2. Titres de section

   La maquette met tous les titres de section en capitales teal. On cible le
   conteneur d'en-tête de section et non `h1..h6` globalement : les titres de
   fiche produit et d'article doivent rester en casse naturelle.
   ========================================================================== */

.section__header .rich-text__heading,
.section__heading {
   color: var(--tup-teal-900);
   text-transform: uppercase;
   letter-spacing: -0.01em;
}

/* Le `<strong>` du réglage de titre porte le contraste de graisse
   ("VOS ESSENTIELS **DU QUOTIDIEN**"), pas une couleur différente.

   Pour les titres de niveau H1/H2 ce contraste est désormais posé globalement
   dans custom-typography.css (corps en WdMd 600, <strong> en WdBl 900) : cette
   règle ne sert plus qu'aux en-têtes de section dimensionnés en H3-H6, dont le
   corps reste en condensé. */
.section__header .rich-text__heading strong,
.section__heading strong {
   font-weight: var(--fw-black);
}

/* Les champs de titre en richtext enveloppent leur contenu dans un <p>. Le
   thème n'a pas de règle pour un <p> hors `.rte` : il garde donc la marge par
   défaut du navigateur, `1em` — soit 32px à l'échelle d'un h2, qui s'ajoute au
   rythme des blocs par fusion de marges. Un <p> dans un titre ne doit rien
   apporter, ni au-dessus ni en dessous. */
.rich-text__heading p,
.section__heading p {
   margin-bottom: 0;
}

/* ==========================================================================
   3. Slideshow — variante « split » (hero de la home)

   Panneau de texte a gauche sur aplat, image a droite, moities a hauteur
   egale et pleine largeur. Le fond du panneau vient du schema de couleurs de
   la diapositive (scheme-11 = #dcf3fa), pas d'une couleur en dur ici.
   ========================================================================== */

/* Deux colonnes en GRILLE et non en flex. La largeur des pistes est imposee
   par le conteneur : ni la taille minimale automatique du panneau de texte
   (`min-width: auto` sur un element flex), ni le ratio intrinseque de l'image
   ne peuvent la renegocier. En flex, une base invalide faisait retomber la
   colonne image sur la largeur naturelle de la photo.

   La repartition vient du reglage de section, pose en `--slideshow-image-width`
   sur `slideshow-component` ; le texte prend le complement, les deux restent
   donc toujours solidaires. 50 % est la valeur de repli. */
.slideshow--split .slideshow__item-wrap {
   display: grid;
   grid-template-columns: calc(100% - var(--slideshow-image-width, 50%)) var(--slideshow-image-width, 50%);
   align-items: stretch;
}

/* L'image sort du flux absolu du thème pour occuper sa propre colonne. */
.slideshow--split .slideshow__bg {
   position: relative;
   inset: auto;
   z-index: 0;
   grid-column: 2;
   grid-row: 1;
   width: auto;
   min-width: 0;
   height: auto;
   pointer-events: auto;
   border-radius: 0;
}

.slideshow-wrapper.slideshow--split .slideshow__content {
   position: relative !important;
   inset: auto;
   grid-column: 1;
   grid-row: 1;
   width: auto !important;
   min-width: 0;
   max-width: none;
   margin: 0;
   justify-content: center;
   background-color: rgb(var(--color-background));
}

/* Le texte s'aligne sur la colonne du site à gauche ; à droite, la ligne de
   partage avec l'image sert de marge, un simple retrait suffit. */
.slideshow-wrapper.slideshow--split .slideshow__content.page-width {
   padding: 4rem clamp(2.4rem, 4vw, 6.4rem) 4rem var(--tup-page-gutter);
}

.slideshow--split .slideshow__text {
   --subheading-margin-bottom: 0.8rem;
   --child-margin-top: 1.6rem;
   --text-margin-top: 1.2rem;
   width: 100%;
   max-width: none;
   padding: 0;
}

/* --- Sur-titre : body-m regular ------------------------------------------ */

.slideshow--split .slideshow__subtitle {
   font-family: var(--font-martian);
   font-size: 1.4rem;
   font-weight: var(--fw-regular);
   line-height: 1.5;
   letter-spacing: 0;
   text-transform: none;
   color: var(--tup-grey-900);
}

/* --- Titre --------------------------------------------------------------- */

/* Pas de `font-weight` ici : c'est un `<h2>` porteur d'une classe de taille,
   les deux graisses (corps en WdMd, <strong> en WdBl) viennent de la regle
   globale de custom-typography.css. Une surcharge locale la masquerait, la
   specificite etant plus forte. */
.slideshow--split .slideshow__title {
   font-size: var(--font-h1-size);
   line-height: 1.15;
   text-transform: uppercase;
   color: var(--tup-teal-900);
   margin: 0;
}

/* Largeur maximale du titre : pilotee par le reglage de bloc, qui pose
   `--slideshow-title-max-width` en style inline. Sans reglage, le titre suit
   la largeur du panneau. La regle vaut pour les deux dispositions. */
.slideshow__title {
   max-width: var(--slideshow-title-max-width, none);
}

@media (max-width: 767.98px) {
   /* Une largeur pensee pour le desktop etoufferait le titre sur mobile. */
   .slideshow__title {
      max-width: none;
   }
}

/* --- Univers Recettes : le hero du template `blog.recipes` ---------------- */

/* Cet écran ne suit pas le teal de marque pour son titre : « Nos recettes »
   est en orange, l'accent de l'univers Recettes (voir bloc 11), et le chapeau
   reprend le teal. Spécificité à 0-3-0 pour passer devant les règles
   génériques du slideshow scindé, qui sont à 0-2-0.
   `.blog-template.recipes` = classes posées par layout/theme.liquid depuis
   `request.page_type` et `template.suffix`. */
.blog-template.recipes .slideshow__title {
   color: var(--tup-orange-500);
}

.blog-template.recipes .slideshow__description {
   color: var(--tup-teal-900);
}

/* --- Points d'accent : capitales separees par un point de 4px ------------- */

.slideshow__accents {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.4rem 1.2rem;
   margin: 0;
   padding: 0;
   list-style: none;
}

.slideshow__accent {
   display: flex;
   align-items: center;
   gap: 1.2rem;
   font-family: var(--font-martian);
   font-size: 1.6rem;
   font-weight: var(--fw-regular);
   line-height: 1.4;
   text-transform: uppercase;
   color: var(--tup-teal-500);
}

/* Le point vit sur l'element suivant : pas de separateur orphelin en fin de
   ligne quand la liste passe sur deux lignes. Il garde le teal fonce, le
   libelle est en teal moyen. */
.slideshow__accent + .slideshow__accent::before {
   content: "";
   flex: 0 0 auto;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: var(--tup-teal-900);
}

/* --- Bouton -------------------------------------------------------------- */

/* Un cran d'air en plus avant le CTA que dans le reste de la rythmique. */
.slideshow--split .slideshow__text > * + .slideshow__buttons {
   margin-top: 2.4rem;
}

.slideshow--split .slideshow__buttons .btn {
   height: auto;
   padding: 18px 25px;
   line-height: 1.2;
   border-radius: 999px;
}

/* Couleurs du CTA de la home : cyan avec libellé teal, inversion au survol.
   Partagées avec `image-with-text` — la déclaration est commune pour qu'elles
   ne puissent pas diverger. La géométrie (pilule, padding) reste propre au
   slideshow : elle est posée au-dessus.

   Le `::before` est le voile de remplissage du survol chez theme.css ; il doit
   prendre la couleur du libellé, qui bascule en retour sur celle du fond. */
.slideshow--split .slideshow__buttons .btn,
.image-with-text .btn--primary {
   background-color: var(--tup-cyan-300);
   border-color: var(--tup-cyan-300);
   color: var(--tup-teal-900);
}

.slideshow--split .slideshow__buttons .btn::before,
.image-with-text .btn--primary::before {
   background-color: var(--tup-teal-900);
}

.slideshow--split .slideshow__buttons .btn:hover,
.image-with-text .btn--primary:hover {
   color: var(--tup-cyan-300);
}

/* --- Mobile : image au-dessus, texte en dessous -------------------------- */

@media (max-width: 767.98px) {
   .slideshow--split .slideshow__item-wrap {
      grid-template-columns: 100%;
      height: auto !important;
   }

   .slideshow--split .slideshow__bg,
   .slideshow-wrapper.slideshow--split .slideshow__content {
      grid-column: 1;
      width: auto !important;
   }

   /* L'image passe au-dessus du texte : deux rangees empilees. */
   .slideshow--split .slideshow__bg {
      grid-row: 1;
      height: var(--slide-height, 28rem);
   }

   .slideshow-wrapper.slideshow--split .slideshow__content {
      grid-row: 2;
   }

   /* Sur mobile l'image et le texte sont empiles : le titre se rapproche de la
      photo pour lire comme un seul bloc, et le pied respire davantage avant la
      section suivante. */
   .slideshow-wrapper.slideshow--split .slideshow__content.page-width {
      padding: 2.4rem var(--tup-page-gutter) 6.4rem;
   }

   .slideshow--split .slideshow__text {
      --child-margin-top: 1.2rem;
   }

   .slideshow--split .slideshow__subtitle {
      font-size: 1.3rem;
   }

   /* Le titre est en capitales : à 3.2rem, « DANS VOTRE CUISINE » déborde sur
      un écran de 375px. On le borne à la largeur d'écran plutôt qu'à une
      taille fixe, pour que la coupe tienne aussi sur les petits terminaux. */
   .slideshow--split .slideshow__title {
      font-size: min(var(--font-h1-size), 8vw);
      line-height: 1.1;
      overflow-wrap: break-word;
   }

   /* Les accents passent en colonne. En ligne, le point séparateur reste
      solidaire de son libellé et se retrouve orphelin en début de ligne dès
      que la liste se replie — une puce par ligne évite le problème. */
   .slideshow__accents {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.6rem;
   }

   .slideshow__accent {
      font-size: 1.3rem;
      gap: 0;
   }

   .slideshow__accent + .slideshow__accent::before {
      display: none;
   }

   .slideshow--split .slideshow__buttons .btn {
      padding: 14px 22px;
      font-size: 1.4rem;
   }
}

/* ==========================================================================
   4. Boutons

   Les couleurs viennent du schéma de couleurs (scheme-1 : fond cyan, libellé
   teal) — voir config/settings_data.json. Ici on ne règle que la géométrie et
   la typo, pour que les schémas sombres restent cohérents.
   ========================================================================== */

/* Tous les boutons du site sont en `button-m` : CnxBd 15px. C'est le defaut,
   pose une seule fois ici — les variantes (`--primary`, `--underline`, pilules
   d'onglets…) ne redefinissent plus taille ni graisse. */
.btn {
   --buttons-padding: 2.4rem;
   font-size: var(--font-button-size);
   font-weight: var(--font-button-weight);
   letter-spacing: 0;
}

.btn--with-icon {
   --buttons-gap: 0.8rem;
}

/* La flèche accompagne le libellé sans grossir avec lui. La flèche Tupperware
   est exclue : son viewBox 11x10 n'est pas carré, theme.css lui donne déjà
   sa largeur et une hauteur automatique. */
.btn .btn__icon:not(.svg-icon--arrow-right-tupp) svg {
   width: 1.2rem;
   height: 1.2rem;
}

/* La flèche Tupperware est une forme pleine, dessinée avec un contour de 0.3
   unité dans son viewBox. Le snippet `button` la place dans un wrapper
   `.icon--thick`, qui impose 0.2rem de contour NON scalable : 2px réels sur
   une flèche de 14px de large, d'où un trait très épais. On rétablit le
   contour d'origine, celui que rend déjà le méga-menu (SVG injecté brut). */
.btn .btn__icon.svg-icon--arrow-right-tupp path {
   stroke-width: 0.3;
   vector-effect: none;
}

/* Lien texte souligné ("Tout voir →") : souligné en permanence, teal. Taille
   et graisse viennent du défaut `button-m` ci-dessus. */
.btn--underline {
   color: var(--tup-teal-900);
}

/* ==========================================================================
   5. Badges produit

   Les couleurs sont pilotées par les réglages de thème
   (color_badge_sale / hot / new). Ici : forme et typo uniquement.
   ========================================================================== */

.f-badge {
   font-size: 1.1rem;
   font-weight: var(--fw-extrabold);
   line-height: 1.4rem;
   letter-spacing: 0.02em;
   padding: 0.5rem 1rem;
   text-transform: uppercase;
   border-radius: 999px;
   border: 0;
}

/* ==========================================================================
   6. Carte produit

   Les sélecteurs sont doublés (`.product-card.product-card-style-card`) pour
   passer devant `.product-card-style-card.color-inherit` de theme.css, qui
   efface le cadre quand la carte et la section partagent le même schéma de
   couleurs. La maquette veut le cadre blanc bordé dans tous les cas.
   ========================================================================== */

.product-card.product-card-style-card {
   background-color: #fff;
   border: 1.25px solid var(--tup-card-border);
   border-radius: var(--tup-card-radius);
   box-shadow: var(--tup-card-shadow);
   overflow: hidden;
}

/* Colonne : le pied de carte (prix + panier) s'aligne en bas quel que soit le
   nombre de lignes du titre. */
.product-card.product-card-style-card .product-card__wrapper {
   display: flex;
   flex-direction: column;
}

.product-card.product-card-style-card .product-card__image-wrapper {
   border-radius: 0;
}

.product-card.product-card-style-card .product-card__info {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   padding: 1.2rem 1.6rem 1.6rem;
}

/* --- Badges : une rangée, alignés en haut à gauche de la zone image ------- */

.product-card__badge {
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0.6rem;
   top: 1.2rem;
   inset-inline: 1.2rem 1.2rem;
}

/* --- Titre + sous-titre --------------------------------------------------- */

.product-card__title {
   font-size: 1.5rem;
   font-weight: var(--fw-bold);
   line-height: 1.35;
   color: #1a1a1a;
}

/* Sous-titre (metafield custom.subtitle) : body-s regular. */
.product-card__subtitle {
   font-family: var(--font-martian);
   font-size: 1.3rem;
   font-weight: var(--fw-regular);
   line-height: 1.5;
   color: var(--tup-grey-600);
}

/* Le type produit, s'il est active, suit le meme traitement : ni capitales,
   ni gras — c'est une ligne descriptive, pas une etiquette. */
.product-card__type {
   font-size: 1.3rem;
   font-weight: var(--fw-regular);
   line-height: 1.5;
   text-transform: none;
   color: var(--tup-grey-600);
}

/* --- Pied de carte : avis + prix à gauche, bouton panier rond à droite ----

   Le pied est calé en bas de carte (`margin-top: auto`). Les avis en font
   partie : placés sous le titre, ils se seraient retrouvés loin du prix dès
   qu'un titre passe sur deux lignes. */

.product-card__footer {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 1.2rem;
   margin-top: auto;
   padding-top: 1.2rem;
}

.product-card__footer-main {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   min-width: 0;
}

/* Le widget Trustpilot est un iframe : au survol il affiche sa propre infobulle
   « Notée X étoiles » par-dessus les étoiles, qui disparaissent donc au moment
   où on pointe dessus — et rien de tout cela n'est stylable depuis le thème.
   pointer-events: none neutralise ce survol et laisse en même temps le clic
   passer au lien de carte étiré ci-dessous, ce qui rend le bloc d'avis
   cohérent avec le reste de la carte. */
.product-card__footer-main .trustpilot-widget {
   margin: 0;
   pointer-events: none;
}

/* --- Carte entièrement cliquable ------------------------------------------

   Le lien du titre est étiré en ::after sur toute la carte plutôt que d'ajouter
   un second <a> par-dessus : la carte garde un seul lien focusable, donc un
   seul énoncé au lecteur d'écran et une seule tabulation.

   .product-card__wrapper est déjà en position: relative (theme.css), il sert
   donc de bloc conteneur. En revanche .product-card__title l'est aussi et
   aurait borné le ::after à la seule ligne de titre : on le repasse en static.
   Aucun enfant du titre n'est en position absolue, la bascule est sans effet
   de bord. */
.product-card-style-card .product-card__title {
   position: static;
}

.product-card-style-card .product-card__title > a::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
}

/* Tout ce qui reste actionnable doit repasser au-dessus de cette surface :
   ajout au panier, nuancier, et les liens vendeur et type qui pointent
   ailleurs que la fiche produit. L'aperçu rapide a déjà son z-index: 2 dans
   theme.css. */
.product-card-style-card .product-card__cta,
.product-card-style-card .product-card__swatches,
.product-card-style-card .product-card__vendor,
.product-card-style-card .product-card__type {
   position: relative;
   z-index: 2;
}

/* Le comparateur est déjà en position absolue (compare.css) : on ne touche
   qu'au z-index, le repasser en relative casserait son calage. */
.product-card-style-card .product-card__compare {
   z-index: 2;
}

/* --- Bascule vers la seconde image au survol de la carte entière ----------

   theme.css déclenche l'échange sur .product-card__image-wrapper:hover, donc
   uniquement au survol de la zone image. On rejoue les mêmes déclarations sur
   .product-card__wrapper:hover ; les règles du thème restent en place et ne
   font que se superposer, survoler l'image revenant à survoler la carte. */
@media (min-width: 768px) {
   .product-card-style-card .product-card__wrapper:hover .product-card__image-wrapper:not(.product-card__image-wrapper--main-only) .product-card__image--main {
      opacity: 0;
   }
   .product-card-style-card .product-card__wrapper:hover .product-card__image--second {
      opacity: 1;
      visibility: visible;
      transform: scale3d(1, 1, 1);
   }
   .product-card-style-card .product-card__wrapper:hover .product-card__quickview {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

/* Produits à une seule image : c'est le zoom qui suit le survol de la carte. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
   .product-card-style-card .product-card__wrapper:hover .product-card__image-wrapper--main-only .product-card__image {
      transform: scale(1.08, 1.08);
   }
}

.product-card__price-group {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 0 0.8rem;
   min-width: 0;
}

.product-card__price-group .f-price {
   font-size: 1.7rem;
   font-weight: var(--fw-extrabold);
}

.product-card__discount {
   color: var(--tup-red-600);
   font-size: 1.4rem;
   font-weight: var(--fw-extrabold);
   white-space: nowrap;
}

/* Le bouton d'ajout quitte le survol de l'image : il vit dans le pied de carte
   et reste visible en permanence, y compris au clavier. */
.product-card__cta {
   flex: 0 0 auto;
}

.product-card__cta .product-card__main-actions {
   position: static;
   inset: auto;
   width: auto;
}

.product-card:not(.product-card--simple) .product-card__cta .product-card__actions .btn,
.product-card__cta .product-card__actions .btn {
   opacity: 1;
   transform: none;
}

.product-card__cta .product-card__atc {
   width: 4.4rem;
   height: 4.4rem;
   min-height: 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background-color: var(--tup-teal-900);
   color: #fff;
}

.product-card__cta .product-card__atc::before {
   background-color: var(--tup-cyan-300);
}

.product-card__cta .product-card__atc:hover {
   color: var(--tup-teal-900);
}

.product-card__cta .product-card__atc svg {
   width: 1.8rem;
   height: 1.8rem;
}

@media (max-width: 767.98px) {
   .product-card.product-card-style-card .product-card__info {
      padding: 0.8rem 1.2rem 1.2rem;
   }

   .product-card__cta .product-card__atc {
      width: 3.8rem !important;
      height: 3.8rem !important;
   }

   /* Vue liste mobile (pages collection) : la carte redevient une rangée et le
      bouton panier retrouve sa place à droite, comme le prévoit theme.css. */
   .product-card.product-card-list-on-mobile.product-card-style-card .product-card__wrapper {
      flex-direction: row;
   }

   /* C'est le conteneur .product-card__cta qui est calé à droite, et non le
      .product-card__main-actions qu'il contient : le conteneur est passé en
      position: relative pour rester au-dessus du lien de carte, il serait donc
      devenu le bloc conteneur du bouton et l'aurait décalé. Positionner
      directement le conteneur donne le même rendu sans cette dépendance. */
   .product-card-list-on-mobile .product-card__cta {
      position: absolute;
      inset-inline-end: 1rem;
      top: 50%;
      transform: translate(0, -50%);
   }
}

/* ==========================================================================
   7. Sélection du moment — en-tête centré, onglets en pilules

   La section est un `featured-collection` à plusieurs blocs : le thème rend
   déjà la navigation par onglets, on la repasse en pilules.
   ========================================================================== */

.featured-collection .tabs-nav__inner {
   column-gap: 0.8rem;
   row-gap: 0.8rem;
   justify-content: center;
}

/* Les trois etats lisent des variables posees en style inline sur chaque
   bouton d'onglet, depuis les reglages de son bloc (voir la boucle
   `tabs-nav__inner` de sections/featured-collection.liquid) : chaque pilule a
   donc ses propres couleurs. Le repli de chaque var() est la valeur de
   charte, un reglage laisse vide garde le rendu par defaut. Survol et actif
   retombent sur l'etat au repos pour les proprietes non renseignees, pour
   eviter les combinaisons illisibles. */
.featured-collection .tabs-btn.btn--underline {
   /* La hauteur vient du padding : theme.css force `height: auto !important`
      sur .btn--underline, et `padding: 0 0 .2rem !important` — d'où le
      !important ici aussi, c'est le seul moyen de le battre. */
   padding: 15px 18px !important;
   border-radius: 999px;
   font-family: var(--font-martian);
   line-height: 1.2;
   background-color: var(--tab-bg, #fff);
   border: 1px solid var(--tab-border, var(--tup-grey-200));
   color: var(--tab-text, var(--tup-teal-900));
   transition:
      background-color 0.2s,
      border-color 0.2s,
      color 0.2s;
}

/* Le soulignement du thème n'a plus de sens sur une pilule. */
.featured-collection .tabs-btn.btn--underline:after {
   display: none;
}

.featured-collection .tabs-btn.btn--underline:not(.active):not(:hover) {
   opacity: 1;
}

.featured-collection .tabs-btn.btn--underline:hover {
   background-color: var(--tab-bg-hover, var(--tab-bg, #fff));
   border-color: var(--tab-border-hover, var(--tup-cyan-300));
   color: var(--tab-text-hover, var(--tab-text, var(--tup-teal-900)));
}

/* L'etat actif a ses trois valeurs par defaut definies : contrairement au
   survol, il ne retombe pas sur l'etat au repos. */
.featured-collection .tabs-btn.btn--underline.active {
   background-color: var(--tab-bg-active, var(--tup-cyan-300-20));
   border-color: var(--tab-border-active, var(--tup-cyan-300));
   color: var(--tab-text-active, var(--tup-teal-900));
}
+ @media (max-width: 767.98px) {
   /* Le defilement horizontal du theme force `overflow-y: hidden` : sans marge
      interne, l'ombre portee des cartes est rognee en haut et en bas. La marge
      negative annule le decalage vertical que cela introduirait. */
   .featured-collection .swipe-mobile {
      padding-block: 0.6rem 1.8rem;
      margin-block: -0.6rem -1.8rem;
   }
}

/* En-tête centré : titre au-dessus, onglets en dessous, sur toute la largeur. */
.featured-collection .section__header.text-center,
.featured-collection .section__header.md\:text-center {
   flex-direction: column;
   align-items: center;
}

.featured-collection .section__header .section__header--buttons {
   width: 100%;
}

/* ==========================================================================
   8. Bandeau catégories + Essentiels du quotidien
   ========================================================================== */

/* Vignettes de catégorie : pastille de couleur, coins arrondis, libellé sous
   l'image. La couleur de fond vient du réglage de chaque bloc. */
.collection-list-slider .collection-card__image,
.collection-list .collection-card__image {
   border-radius: var(--tup-card-radius);
   overflow: hidden;
}

.collection-card__title {
   color: var(--tup-teal-900);
   font-weight: var(--fw-bold);
   font-size: 1.3rem;
   line-height: 1.3;
}

/* Bandeau catégories : libellés en gris texte, pas en teal. */
.collection-list-slider .collection-card__title {
   color: var(--tup-grey-900);
}

@media (max-width: 767.98px) {
   /* Le sélecteur reste à deux classes pour battre
      `.collection-card--style-standard .collection-card__title` de theme.css,
      qui redimensionne les libellés sous 768px. */
   .collection-list-slider .collection-card__title {
      font-size: 1.1rem;
   }
}

/* Libellé éclairci au survol de la carte. Le déclencheur est
   .collection-card__wrapper:hover et non le titre lui-même : le <a> est la
   carte entière, et .collection-card__inner est en pointer-events: none. */
.collection-list-slider .collection-card__title {
   transition: color var(--animation-default);
}
@media (hover: hover) and (pointer: fine) {
   .collection-list-slider .collection-card__wrapper:hover .collection-card__title {
      color: var(--tup-grey-600);
   }
}

/* --- Essentiels du quotidien : cartes blanches ----------------------------

   Maquette : carte de 191 de large avec 10px de gouttiere sur un ecran de
   1500px. On ne fige pas la largeur — elle vient du nombre de colonnes du
   carrousel (7 colonnes dans 1400px utiles, moins 6 gouttieres = 191,4px) —
   seulement le rapport et la gouttiere.

   La carte est legerement plus haute que large : 191 x 205, soit 12 de marge
   + 125 d'image + 56 pour le libelle + 12 de marge. Ces 56 laissent respirer
   deux lignes de h6 (43) la ou un carre strict n'en laissait que 42.

   Le contraste carte / section vient des schemas de couleurs (carte en
   scheme-1 sur une section teintee), ce qui pose `--collection-card-bg` via
   `.collection-card--has-bg`. On n'ajoute ici que le relief et l'arrondi,
   alignes sur la carte produit pour que les deux se repondent. */

/* 1rem : la valeur est aussi lue par collection-list.js pour le
   `spaceBetween` de Swiper, les deux gouttieres restent donc synchronisees. */
.collection-list .collection-list__items {
   --f-column-gap: 1rem;
}

/* `h-full` du snippet pose height:100% ; on le neutralise, la hauteur de la
   carte suit celle de son contenu. */
.collection-list .collection-card {
   height: auto;
}

.collection-list .collection-card--has-bg {
   border-radius: var(--tup-card-radius);
   border: 1.25px solid var(--tup-card-border);
   box-shadow: var(--tup-card-shadow);
   overflow: hidden;
}

/* Le rapport 191/205 est porte par le wrapper, pas par la carte : une hauteur
   issue d'`aspect-ratio` n'est pas une hauteur declaree, donc un `height: 100%`
   pose sur un enfant ne s'y resout pas de facon fiable et retombe sur `auto`
   — l'enfant reprend alors la hauteur de son contenu et depasse la carte.
   En placant le rapport ici, aucune hauteur en pourcentage n'est necessaire
   et la carte se contente de suivre.

   Marge interne 12px sur une carte de 191, exprimee en pourcentage pour tenir
   le rapport quand la carte retrecit (le nombre de colonnes ne change pas
   avant 1280px, mais la largeur utile, si). Un pourcentage de padding se
   resout toujours sur la LARGEUR, y compris en vertical : les quatre cotes
   valent donc la meme chose. */
.collection-list .collection-card__wrapper {
   --pd-x: 6.28%;
   --pd-y: 6.28%;
   height: auto;
   aspect-ratio: 191 / 205;
   /* La hauteur vient du rapport, jamais du contenu : sans ces deux lignes,
     un libelle sur deux lignes fait grandir la boite et les tuiles n'ont plus
     la meme hauteur. Le clamp du titre garantit qu'on ne perd rien. */
   min-height: 0;
   overflow: hidden;
}

/* Image 167 x 125. Le rapport est porte par le conteneur plutot qu'une
   hauteur en pourcentage : celle-ci ne se resout pas de facon fiable a
   travers la chaine flex, alors qu'`aspect-ratio` ne depend que de la largeur,
   elle-meme donnee par la marge interne. Sur une carte de 191 : 167 de large
   -> 125 de haut, il reste 42 pour le libelle. */
.collection-list .collection-card__image {
   flex: 0 0 auto;
   width: 100%;
   height: auto;
   aspect-ratio: 167 / 125;
}

/* Le theme cale l'image avec un ::before en `padding-top`. Ce mecanisme fait
   double emploi ici et rendait l'image carree : on le neutralise et l'element
   interne remplit simplement le conteneur, qui porte deja le bon rapport. */
.collection-list .collection-card__image > motion-element {
   position: absolute;
   inset: 0;
   height: auto;
}

.collection-list .collection-card__image > motion-element::before {
   display: none;
}

/* Le libelle occupe la hauteur restante et s'y centre. */
.collection-list .collection-card__inner {
   flex: 1 1 auto;
   min-height: 0;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-block: 0;
}

/* Libelle en h6 bold. La taille et la graisse viennent de la classe `h6`
   posee par le reglage « taille de titre » de la section : avec `text-base`,
   le snippet ajoute aussi `.font-body`, qui force `font-weight` en !important
   et rendrait le gras impossible a obtenir en CSS.

   L'interlignage reste celui des h6 : la hauteur de carte est calee pour que
   deux lignes tiennent. Clamp a deux lignes en garde-fou contre un nom trop
   long. */
.collection-list .collection-card__title {
   --pd-inline: 0;
   /* Le snippet pose `flex-1` sur le titre : il occuperait toute la hauteur
     restante et le centrage du parent n'aurait plus de prise, le texte se
     calant en haut de la zone. On le remet a sa hauteur naturelle. */
   flex: 0 0 auto;
   width: 100%;
   color: var(--tup-grey-900);
   font-size: var(--font-h6-size);
   font-weight: var(--fw-bold);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-align: center;
}

/* La fleche du survol n'existe pas dans la maquette. */
.collection-list .collection-card__title svg {
   display: none;
}

/* Libellé éclairci au survol de la carte, comme sur le bandeau catégories
   (.collection-list-slider). Le déclencheur est .collection-card__wrapper:hover
   et non le libellé lui-même : celui-ci est en pointer-events: none et le <a>
   est la carte entière. */
.collection-list .collection-card__title {
   transition: color var(--animation-default);
}
@media (hover: hover) and (pointer: fine) {
   .collection-list .collection-card__wrapper:hover .collection-card__title {
      color: var(--tup-grey-600);
   }
}

/* Le carrousel clippe a droite pour que la derniere carte s'arrete net sur la
   colonne du site. Comme `overflow: hidden` clippe aussi en vertical, on
   reserve la place de l'ombre par un padding compense en marge negative.
   Meme traitement pour le defilement mobile. */
.collection-list .collection-list__inner.swiper,
.collection-list .swipe-mobile {
   padding-block: 0.6rem 1.8rem;
   margin-block: -0.6rem -1.8rem;
}

/* ==========================================================================
   9. Blocs collection avec bannière (Cuisson et réchauffage, Service de table)

   `featured-collection` + bloc `show_banner`. Les schémas 13 (lavande) et 14
   (sable) ne servent qu'à ces blocs : la couleur habille un pavé calé sur la
   colonne du site, pas toute la largeur de la fenêtre.

   Structure, côté section : la bannière est un frère du carrousel, pas une
   slide. Une grille `f-grid` lui alloue une colonne, le carrousel occupe les
   autres (`grid-column: span N-1`, posé en inline par la section). Elle reste
   donc fixe pendant que seuls les produits défilent.

   Desktop : la bannière recouvre le bord gauche du pavé et dépasse en haut
   comme en bas — sur cette première colonne c'est elle qu'on voit, pas le pavé.

   Mobile : le pavé reprend toute la largeur, la bannière passe au-dessus du
   défilement produits. `.swipe-mobile` déborde déjà de `--page-padding` des
   deux côtés et clippe en vertical (`overflow-y: hidden`), le débordement
   vertical de la bannière n'y a pas sa place.
   ========================================================================== */

.featured-collection.color-scheme-13,
.featured-collection.color-scheme-14 {
   --tup-fc-panel-pad: 2rem;
   background-color: transparent;
}

/* La carte bannière remplit la hauteur de sa rangée, donc celle du carrousel. */
.featured-collection .card-media {
   overflow: hidden;
   height: 100%;
}

/* Arrondi de base, valable sur mobile où la bannière est empilée. Le palier
   desktop plus bas coupe l'arrondi du côté droit. */
.featured-collection__banner .card-media {
   border-radius: var(--tup-card-radius);
}

/* Bouton « Tout voir » : libellé teal de marque, 15px extrabold.

   On passe par `--color-button-text` (le jeton du schéma de couleurs) plutôt
   que par `color` : theme.css inverse le bouton au survol — le `::before` se
   remplit de `--color-button-text` et le libellé prend `--color-button`. Poser
   `color` en dur donnerait du teal sur fond teal au survol ; en déplaçant le
   jeton, l'inversion reste juste (teal sur blanc, puis blanc sur teal). */
.featured-collection__banner .btn--primary {
   --color-button-text: 0, 82, 79; /* var(--tup-teal-900) en triplet rgb */
}

/* Dégradé sombre en bas de la bannière : le titre et le bouton blancs doivent
   rester lisibles sur une photo claire (popcorn, table dressée). Posé sur le
   conteneur média plutôt que sur `.card-media` : dans la grille
   `card-media--auto-height` le contenu est en `z-index: 2`, il passe donc
   devant le dégradé. */
.featured-collection__banner .card-media__media-wrapper {
   position: relative;
}

.featured-collection__banner .card-media__media-wrapper::after {
   content: "";
   position: absolute;
   inset-inline: 0;
   bottom: 0;
   height: 55%;
   background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
   pointer-events: none;
}

@media (max-width: 767.98px) {
   .featured-collection.color-scheme-13 .section__container,
   .featured-collection.color-scheme-14 .section__container {
      background-color: rgb(var(--color-background));
      border-radius: var(--tup-card-radius);
      padding-block: 2.4rem;
   }

   /* Empilement : la bannière au-dessus, le rail de produits en dessous. La
     grille du thème donnerait ici `--f-columns-mobile` colonnes. */
   .featured-collection__layout--with-banner {
      --f-grid-columns: 1;
      row-gap: 1.6rem;
   }

   .featured-collection__layout--with-banner > * {
      grid-column: 1 / -1;
      grid-row: auto;
   }

   /* Empilée, la bannière n'a plus de hauteur imposée par la rangée : c'est son
     ratio qui décide. Le réglage `card-image` envoie 1/1 en inline, soit un
     carré pleine largeur qui mangerait tout l'écran. `--aspect-ratio-mobile`
     n'est, lui, pas posé en inline : c'est le levier prévu par le thème
     (theme.css, `[style*="--aspect-ratio"]:before`). */
   .featured-collection__banner .card-media__media {
      --aspect-ratio-mobile: 3 / 2;
   }
}

@media (min-width: 768px) {
   /* `.swiper` (vendor.css) pose `margin-left/right: auto`. Sur un bloc normal
     c'est inoffensif ; sur un item de grille — ce que le carrousel est devenu
     depuis que la bannière est son frère — les marges auto le font se
     dimensionner sur son contenu au lieu de remplir sa piste. `min-width`
     couvre le `min-width: auto` implicite des items de grille, qui empêcherait
     les pistes `minmax(0, 1fr)` de le contraindre.

     À garder dans le palier desktop : sous 768px c'est `.swipe-mobile` qui
     porte les marges du carrousel (un débordement négatif de `--page-padding`
     de chaque côté, compensé par un padding), et les remettre à zéro décalait
     le rail d'une gouttière vers la droite — il ne s'alignait plus sur la
     bannière. */
   .featured-collection__layout--with-banner > featured-collection {
      margin-inline: 0;
      min-width: 0;
   }

   /* Placement de la grille. Deux rangées : les produits, puis la barre de
     progression et les flèches. La bannière couvre les deux — c'est ce qui la
     fait descendre jusqu'en bas du pavé — et les contrôles s'alignent sur la
     colonne des produits, pas sur toute la largeur.

     `2 / -1` (de la 2e ligne à la dernière) évite de recalculer un `span` à
     chaque palier : la répartition suit le nombre de colonnes de `.f-grid`,
     quel qu'il soit. */
   .featured-collection__layout--with-banner > .featured-collection__banner {
      grid-column: 1;
      grid-row: 1 / span 2;
   }

   .featured-collection__layout--with-banner > featured-collection {
      grid-column: 2 / -1;
      grid-row: 1;
   }

   .featured-collection__layout--with-banner > .swiper-controls {
      grid-column: 2 / -1;
      grid-row: 2;
   }

   /* Le fond est porté par `.section__wrapper`, dont la boîte épouse exactement
     la colonne du site : le pavé est calé sur la gouttière des deux côtés. Pas
     de padding à gauche, la bannière y est flush et masque l'arrondi. */
   .featured-collection.color-scheme-13 .section__wrapper,
   .featured-collection.color-scheme-14 .section__wrapper {
      background-color: rgb(var(--color-background));
      border-radius: var(--tup-section-radius);
      padding: var(--tup-fc-panel-pad) var(--tup-fc-panel-pad) var(--tup-fc-panel-pad) 0;
   }

   /* La bannière annule le padding vertical du pavé : elle est calée sur ses
     bords haut et bas. Le carrousel, lui, clippe. */
   .featured-collection.color-scheme-13 .featured-collection__banner,
   .featured-collection.color-scheme-14 .featured-collection__banner {
      margin-block: calc(var(--tup-fc-panel-pad) * -1);
   }

   /* Côté droit franc : la bannière fait face au rail de produits, l'arrondi n'a
     pas de sens de ce côté. Sur mobile elle est empilée, les quatre coins
     restent arrondis. */
   .featured-collection__banner .card-media {
      border-radius: var(--tup-card-radius) 0 0 var(--tup-card-radius);
   }

   /* Le carrousel s'arrête net sur le padding droit du pavé : rien ne doit en
     sortir, ni pendant le défilement ni au repos. Ça n'est vrai que dans un
     pavé fermé — ailleurs le thème garde son `.overflow-visible`, qui laisse la
     carte suivante s'entrevoir hors colonne.

     `overflow-x: clip` clippe le seul axe horizontal : contrairement à
     `hidden`, il laisse l'axe vertical en `visible` et l'ombre des cartes
     intacte. Sur un navigateur sans `clip` la déclaration tombe et on retombe
     sur le `overflow: hidden` de Swiper — dégradation acceptable. */
   .featured-collection.color-scheme-13 featured-collection.swiper,
   .featured-collection.color-scheme-14 featured-collection.swiper {
      overflow-x: clip;
      overflow-y: visible;
   }
}

/* ==========================================================================
   10. Besoin d'inspiration — pilules à icône
   ========================================================================== */

.button-list__items {
   gap: 1.2rem;
}

.button-item__inner {
   height: auto;
   padding: 0.6rem 1.6rem 0.6rem 0.6rem !important;
   border-radius: 999px;
   background-color: #fff;
   border: 1px solid var(--tup-grey-200);
   color: var(--tup-grey-900);
}

/* Pastille ronde. `section-buttons-with-icon.css` est chargé dans le body,
   donc APRÈS ce fichier : à spécificité égale c'est lui qui gagne, et il ne
   pose que `width: var(--icon-size)`. Une hauteur fixée ici se retrouvait donc
   seule face à une largeur venue du thème — d'où les pastilles ovales. On
   aligne les deux axes sur le jeton du thème (4.8rem desktop, 3.8rem mobile)
   avec la spécificité qu'il faut pour passer devant, et `aspect-ratio` tient
   le cercle même si le jeton n'est pas défini. */
.button-item .button-item__icon {
   width: var(--icon-size);
   height: var(--icon-size);
   aspect-ratio: 1;
   border-radius: 50%;
   overflow: hidden;
}

.button-item__text {
   font-size: 1.3rem;
   font-weight: var(--fw-extrabold);
   white-space: nowrap;
}

/* ==========================================================================
   11. Recettes — section `featured-blog` en `card_style: recipe`

   L'univers Recettes a son accent propre (orange), le reste du site est teal.
   Les règles génériques `.article-card` valent pour toutes les cartes article ;
   celles préfixées `.recipe-card` ne concernent que la carte recette (classe
   posée par snippets/recipe-article.liquid).

   Les couleurs de texte sont posées en dur : cette section ne suit pas le teal
   de marque, elle a son propre couple orange / #292929.
   ========================================================================== */

/* Titre de section en orange. Spécificité à 0-3-0 pour passer devant le teal
   générique des titres de section (bloc 2), qui est à 0-2-0. */
.featured-blog .section__header .rich-text__heading {
   color: var(--tup-orange-500);
}

/* Bouton « Tout voir » : devant le teal que le bloc 4 pose sur toutes les
   `.btn--underline`. */
.featured-blog .section__header--buttons .btn {
   color: var(--tup-grey-900);
}

/* Gouttière de 10px entre les cartes. Aucun palier de `column_gap` ne vaut
   10px (2xs = 8, extra-small = 12), donc on court-circuite la chaîne
   `--f-column-gap-{mobile,md,lg,xl}` héritée du wrapper en posant la variable
   résolue directement sur la grille. Corollaire : les réglages « gouttière »
   de la section n'ont plus d'effet ici. */
.featured-blog .featured-blog__items {
   --f-column-gap: 1rem;
   --f-row-gap: 1rem;
}

/* Cartes de hauteur égale : la colonne de grille est déjà étirée, il reste à
   faire remplir la carte et à laisser le pavé de contenu absorber le
   surplus. */
.recipe-card {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
}

/* L'image occupe le haut de la carte sans arrondi propre : c'est l'`overflow`
   de la carte qui dessine les quatre coins — image en haut, pavé de contenu en
   bas. */
.article-card {
   border-radius: var(--tup-card-radius);
   overflow: hidden;
}

.article-card__title {
   color: var(--tup-teal-900);
   font-size: var(--font-h7-size);
   font-weight: var(--fw-bold);
   line-height: 1.3;
}

/* `blocks-radius` arrondit les quatre coins du média et le thème lui ajoute
   2.4rem de marge basse : les deux sont annulés pour que l'image colle au pavé
   de contenu. */
.recipe-card .article-card__media {
   border-radius: 0;
   margin-bottom: 0;
}

.recipe-card .article-card__content {
   flex: 1 1 auto;
   background-color: var(--tup-amber-100-20);
   padding: 1.6rem 1.6rem 2rem;
}

/* Tag : pastille blanche bordée à petit rayon, pas la pilule des badges
   produit. Le markup du thème lui pose `block` (donc pleine largeur),
   `text-subtext` et une taille de 1.2rem — les trois sont repris ici.

   En surimpression, en haut à gauche de l'image. Le sortir du flux règle
   du même coup la hauteur : une carte sans tag ne se raccourcit plus.
   `pointer-events` laisse le clic filer vers le lien de l'image en dessous.
   Le positionnement se fait sur `.recipe-card` (l'image est toujours en haut
   de la carte), ce qui évite de dupliquer le markup dans les deux branches
   média du snippet. */
.recipe-card .article-card__tags {
   position: absolute;
   top: 1.2rem;
   left: 1.2rem;
   z-index: 1;
   margin: 0;
   pointer-events: none;
   display: inline-block;
   padding: 0.6rem 1rem;
   border: 1px solid var(--tup-card-border);
   border-radius: 0.6rem;
   background-color: #ffffff;
   color: var(--tup-grey-900);
   font-size: 1rem;
   font-weight: var(--fw-bold);
   line-height: 1.2;
}

.recipe-card .article-card__title {
   color: var(--tup-grey-900);
}

/* Sous-titre (budget - difficulté) : body-s regular. */
.recipe-card .article-card__excerpt {
   color: #171717;
   font-size: 1.3rem;
   font-weight: var(--fw-regular);
   line-height: 1.5;
}

/* « Voir la recette » : orange, devant le teal que le bloc 4 pose sur toutes
   les `.btn--underline`. */
.recipe-card .article-card__button {
   color: var(--tup-orange-500);
}

/* ==========================================================================
   12. Barre de réassurance
   Section maison : voir sections/reassurance-bar.liquid.
   ========================================================================== */

/* Le padding vertical est pris tel quel dans les reglages de section, sans
   le facteur d'echelle de `.section--padding` du theme (x0.6 / x0.75) : sur
   une barre fine, la valeur saisie doit etre la valeur rendue. */
.reassurance-bar {
   padding-block: var(--section-padding-top, 20px) var(--section-padding-bottom, 20px);
   border-block: 1px solid var(--tup-grey-200);
}

.reassurance-bar__list {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2.4rem;
   margin: 0;
   padding: 0;
   list-style: none;
}

.reassurance-bar__item {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   min-width: 0;
   color: var(--tup-teal-900);
   font-family: var(--font-martian);
   font-size: 1.4rem;
   font-weight: var(--fw-regular);
   line-height: 1.5;
}

.reassurance-bar__item > a {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   color: inherit;
   text-decoration: none;
}

/* Taille pilotee par le reglage de section, surchargeable par bloc.
   `object-fit: contain` garde le ratio des icones non carrees. */
.reassurance-bar__icon {
   flex: 0 0 auto;
   width: var(--reassurance-icon-size, 20px);
   height: var(--reassurance-icon-size, 20px);
   object-fit: contain;
}

.reassurance-bar__item--trustpilot {
   flex: 0 1 22rem;
}

.reassurance-bar__item--trustpilot .trustpilot-widget {
   width: 100%;
}

/* Sous 1024px la barre défile horizontalement plutôt que de se compresser. */
@media (max-width: 1023.98px) {
   .reassurance-bar__list {
      justify-content: flex-start;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
   }

   .reassurance-bar__list::-webkit-scrollbar {
      display: none;
   }

   .reassurance-bar__item {
      flex: 0 0 auto;
      white-space: nowrap;
   }
}

/* ==========================================================================
   13. FAQ, colonnes d'aide, newsletter
   ========================================================================== */

/* FAQ : lignes séparées par un filet, chevron à droite, pas de fond de carte.

   Pas de `color` ici : le titre de la question est un `h2`, qui pose son propre
   `rgb(var(--color-foreground))`. Forcer le teal sur le `summary` ne touchait
   donc que les icônes (`currentColor`), d'où un + / − vert sous un titre navy.
   En laissant hériter, icône et titre partagent la couleur du color scheme.
   La graisse vient de la classe typo du titre (`body-l-bolder`). */

/* Colonnes d'aide : icône ronde centrée au-dessus du libellé. */
.multicolumn-icon .multicolumn-card__image {
   color: var(--tup-teal-900);
}

/* Newsletter : champ et bouton sur une même ligne en pilule. */
.newsletter__form .field__input {
   border-radius: 999px;
}

/* ==========================================================================
   14. Carrousels — barre de progression et flèches

   Composant GLOBAL, pas seulement la home : les contrôles doivent être
   identiques partout. Le thème les branche sur `--color-foreground`, qui suit
   le `color_scheme` de la section — d'où des flèches et une barre teal dans le
   pavé lavande, sable ailleurs. On les fixe sur le gris de marque.
   ========================================================================== */

/* --- Barre de progression du Swiper (pagination `progressbar`) ------------ */

.swiper-controls--pagination-progressbar {
   --swiper-pagination-color: var(--tup-grey-900);
}

.swiper-controls--pagination-progressbar .swiper-pagination-progressbar {
   --swiper-pagination-progressbar-bg-color: var(--tup-grey-900-10);
}

/* --- Barre de progression du défilement mobile (`scroll-progress-bar`) ---- */

scroll-progress-bar .progress-container,
.scroll-progress-bar .progress-container {
   background-color: var(--tup-grey-900-10);
}

scroll-progress-bar .progress-bar,
.scroll-progress-bar .progress-bar {
   background-color: var(--tup-grey-900);
}

/* --- Flèches -------------------------------------------------------------- */

/* `--blank` est la variante sans cadre (flèche nue posée sur une image) : elle
   passe tout en `!important` dans theme.css et garde son traitement. */
.swiper-button:not(.swiper-button--blank) {
   background-color: #ffffff;
   border-color: var(--tup-grey-900-20);
   color: var(--tup-grey-900);
}

/* Remplissage au survol : même gris que la flèche, pour que le survol soit lui
   aussi identique d'une section à l'autre. */
.swiper-button:not(.swiper-button--blank)::before {
   background-color: var(--tup-grey-900);
}

@media (hover: hover) {
   .swiper-button:not(.swiper-button--blank):hover {
      color: #ffffff;
   }
}

/* État non cliquable : la bordure reste pleine, le reste tombe à 50 %. On
   remonte donc l'opacité du bouton (0.35 chez Swiper) et on la reporte sur le
   seul contenu. theme.css remet `pointer-events: auto` sur les flèches
   désactivées, donc le survol doit être neutralisé explicitement. */
.swiper-button.swiper-button-disabled:not(.swiper-button--blank) {
   opacity: 1;
   cursor: default;
}

.swiper-button.swiper-button-disabled:not(.swiper-button--blank) .btn__text {
   opacity: 0.5;
}

@media (hover: hover) {
   .swiper-button.swiper-button-disabled:not(.swiper-button--blank):hover {
      color: var(--tup-grey-900);
   }

   .swiper-button.swiper-button-disabled:not(.swiper-button--blank):hover::before {
      width: 0;
   }
}

/* ==========================================================================
   15. Tupper'CLUB — `image-with-text` en pavé

   Le schéma 11 (cyan pâle) habillait toute la largeur de la fenêtre. La
   maquette veut deux blocs arrondis côte à côte — la moitié texte et l'image —
   posés sur le blanc de la page : c'est ce blanc qui fait le contour.

   L'image porte déjà `blocks-radius`, il n'y a que la moitié texte à traiter.

   La couture entre les deux : un seul arrondi, celui de l'image, qui découvre
   du cyan et non du blanc. Le pavé n'est donc PAS arrondi de ce côté, et il
   court sur un rayon sous l'image pour remplir la découpe du coin. Deux
   arrondis face à face laisseraient l'encoche blanche.

   Desktop seulement. Sous 768px les deux moitiés s'empilent et `--padding-x`
   retombe à 0 : le bandeau pleine largeur du thème reste plus juste.
   ========================================================================== */

/* --- Rythme vertical du contenu ------------------------------------------

   Le thème découpe l'interligne des blocs en quatre variables de valeurs
   différentes : `--child-margin-top` entre deux blocs quelconques (donc avant
   le bouton), `--text-margin-top` avant un bloc texte, `--icon-margin-top`
   avant le premier « icône + texte » et `--icon-siblings-margin-top` entre deux
   consécutifs. D'où quatre écarts inégaux dans la colonne.

   On les aligne tous sur `--child-margin-top`, le rythme standard du thème :
   une seule valeur, et elle suit toujours le palier mobile (2.4rem) puisque la
   référence est résolue sur le même élément. Vaut pour toutes les sections
   image-with-text, quel que soit leur schéma de couleurs. */
.image-with-text__content {
   --text-margin-top: var(--child-margin-top);
   --icon-margin-top: var(--child-margin-top);
   --subheading-margin-bottom: var(--child-margin-top);

   /* Exception au rythme uniforme : deux « icône + texte » qui se suivent
      forment une liste, ils se resserrent. */
   --icon-siblings-margin-top: 0.8rem;
}

/* Autre exception : le CTA prend un cran d'air de plus. Exprimé en calc sur le
   rythme, pour continuer à suivre le palier mobile. */
.image-with-text__content > * + .rich-text__button {
   margin-top: calc(var(--child-margin-top) + 0.8rem);
}

@media (min-width: 768px) {
   .image-with-text.color-scheme-11 {
      background-color: transparent;
   }

   /* `--padding-x` (section-image-with-text.css) pose déjà le retrait côté
      image — 5rem en tablette, 10rem au-delà. On le reprend pour le côté
      opposé plutôt que d'inventer une valeur : le rythme horizontal reste
      piloté d'un seul endroit. */
   .image-with-text.color-scheme-11 .image-with-text__inner {
      position: relative;
      background-color: rgb(var(--color-background));
      padding-block: 4rem;
   }

   /* L'image doit passer AU-DESSUS du pavé. Sans ça elle perd : les deux
      moitiés sont en `position: relative`, et le pavé — plus bas dans le DOM —
      peindrait son prolongement par-dessus l'image au lieu de dessous. */
   .image-with-text.color-scheme-11 .image-with-text__media {
      z-index: 1;
   }

   /* Le prolongement sous l'image : large d'exactement un rayon d'image, donc
      invisible partout sauf dans les deux découpes de coin. Un pseudo-élément
      plutôt qu'une marge négative sur le pavé — celle-ci aurait décalé l'image
      vers la gauche et laissé une gouttière au bord droit, les deux moitiés
      étant dimensionnées en `flex-basis` fixe. */
   .image-with-text.color-scheme-11 .image-with-text__inner::after {
      content: "";
      position: absolute;
      inset-block: 0;
      width: var(--blocks-radius);
      background-color: rgb(var(--color-background));
   }

   .image-with-text--image-right.color-scheme-11 .image-with-text__inner {
      border-radius: var(--tup-section-radius) 0 0 var(--tup-section-radius);
      padding-inline-start: var(--padding-x);
   }

   .image-with-text--image-right.color-scheme-11 .image-with-text__inner::after {
      inset-inline-start: 100%;
   }

   .image-with-text--image-left.color-scheme-11 .image-with-text__inner {
      border-radius: 0 var(--tup-section-radius) var(--tup-section-radius) 0;
      padding-inline-end: var(--padding-x);
   }

   .image-with-text--image-left.color-scheme-11 .image-with-text__inner::after {
      inset-inline-end: 100%;
   }
}

/* ==========================================================================
   16. Galerie Instagram — `scrolling-gallery-image`

   Le fond ne vient pas du schéma de couleurs : le schéma 7 (#dbe1ff, texte
   violet) est aussi utilisé par les pages Contact et « On parle de nous », le
   modifier aurait débordé. On surcharge donc localement.
   ========================================================================== */

.section.scrolling-gallery-image {
   background-color: #f4f5f2;
}

/* Filet teal autour de la carte — image ET bandeau pseudo/icône. Qualifié par
   `blocks-radius` : cette classe n'est sur l'enveloppe que lorsque le block a
   un schéma de couleurs distinct de la section, c'est-à-dire quand l'item est
   réellement une carte. Dans le cas contraire le thème sort le bandeau de la
   carte et un contour n'aurait pas de sens. */
.scrolling-gallery-image .gallery-list__item-wrapper.blocks-radius {
   border: 1.5px solid var(--tup-teal-900);
}

/* Un peu moins de 4 cartes visibles. La largeur de carte est en vw et la
   gouttière en rem : à 25vw la colonne fait 25vw + 3rem, soit ~3,7 colonnes
   par écran entre 1280 et 1920px. Le CSS de section pose 20vw (~4,5 colonnes),
   et il est chargé dans le body — d'où la spécificité à 0-2-0 ici. */
.scrolling-gallery-image .gallery-list {
   --image-width: 25vw;
}

/* 40px entre le rail et le lien du dessous. Le thème lit deux variables
   distinctes selon le palier, les deux sont posées. */
.scrolling-gallery-image .section__footer {
   --footer-padding-top: 4rem;
   --footer-padding-top-mobile: 4rem;
}

/* ==========================================================================
   17. FAQ — `collapsible-tabs` avec image pleine largeur

   Même modèle que le hero « split » du slideshow (bloc 3) : la rangée sort de
   la colonne du site, les deux moitiés se partagent la largeur de la FENÊTRE,
   à hauteur égale. L'image touche donc son bord d'écran, et c'est le panneau
   de texte qui reprend la gouttière du site en padding.

   Le titre, lui, est calé sur les accordéons — traité côté section : l'en-tête
   est rendu dans la colonne de contenu dès qu'un block image est présent.

   Desktop seulement. Sous 768px les deux colonnes s'empilent en pleine largeur
   et la mise en page du thème reste juste.
   ========================================================================== */

@media (min-width: 768px) {
   /* Le conteneur rend sa gouttière : les colonnes se calculent désormais sur
      la largeur de la fenêtre. */
   .collapsible-tabs__has-image .section__container {
      padding-inline: 0;
   }

   /* `.f-flex` déporte sa gouttière en demi-padding sur chaque colonne, avec
      une marge négative compensatoire sur le rang. Les deux sautent : le
      partage se fait au ras, comme sur le hero. */
   .collapsible-tabs__has-image .collapsible-tabs__wrapper {
      margin-inline: 0;
      flex-wrap: nowrap;
      align-items: stretch;
   }

   .collapsible-tabs__has-image .collapsible-tabs__image-col {
      padding-inline: 0;
   }

   /* Le panneau de texte reprend la gouttière du site côté extérieur, et un
      retrait fluide côté image — `--tup-page-gutter` est le jeton qui fige
      `--page-padding` au niveau racine, prévu pour aligner un contenu hors
      grille sur la colonne du site. */
   .collapsible-tabs__image-position-left .collapsible-tabs__content-col {
      padding-inline: clamp(2.4rem, 4vw, 6.4rem) var(--tup-page-gutter);
   }

   .collapsible-tabs__image-position-right .collapsible-tabs__content-col {
      padding-inline: var(--tup-page-gutter) clamp(2.4rem, 4vw, 6.4rem);
   }

   /* L'image remplit sa moitié en hauteur comme en largeur. `height: 100%`
      neutralise le ratio que `card-image` pose en `--aspect-ratio` : l'image
      recadre en `cover` sur la hauteur de la rangée, donnée par les
      accordéons. Et une image qui touche le bord de l'écran ne s'arrondit
      pas. */
   .collapsible-tabs__has-image .collapsible-tabs__image-col .card-media {
      height: 100%;
      border-radius: 0;
   }
}