/* Bleu Canin - homepage custom */

* { box-sizing: border-box; }

/* Le fond vit uniquement sur html (voir Bleucanin_Nav::getThemeColorsCss,
   injecte en <style> dans <head>, et product.css qui pose aussi html
   uniquement) -- pas sur body, pour ne pas dupliquer la meme couleur sur
   deux elements empiles. */
html {
  background: #f2ede9;
  /* Reserve la place de la scrollbar en permanence (au lieu de laisser le
     navigateur l'ajouter/l'enlever selon la hauteur de la page) : sans
     ca, 100vw (utilise par TOUTES les sections full-bleed du site --
     .bubble-carousel, .home-feature, .wide-banner, etc., voir
     margin-left:calc(50% - 50vw) ou left:50%/margin-left:-50vw) inclut la
     largeur de la scrollbar alors que le contenu reel de la page (100%)
     ne l'inclut pas -- decalage constant d'environ -scrollbar/2 (retour
     utilisateur : carrousels sans padding gauche visible, en fait
     legerement pousses hors ecran a gauche). scrollbar-gutter:stable
     supprime ce decalage sans forcer une scrollbar visible sur les pages
     assez courtes pour ne pas en avoir besoin. */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #000000;
}

/* Tache bleue de fond, floue et animee : simple element decoratif,
   fixe, sans masque -- entre la video (z-index -1) et tout le contenu. */
.ambient-blob {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(80, 80, 235, 0.55), rgba(35, 35, 224, 0.25) 55%, transparent 75%);
  filter: blur(80px);
  pointer-events: none;
  animation: ambient-blob-drift 26s ease-in-out infinite alternate;
}

/* product.css definit aussi .ambient-blob (pour les autres pages) et
   charge APRES custom.css sur la home -- meme specificite, ses regles
   gagnaient donc a la cascade. Specificite plus forte ici (body#index)
   pour gagner quel que soit l'ordre des fichiers : juste le z-index. */
body#index .ambient-blob {
  z-index: 0;
}

/* Point de depart centre (translate -50%/-50%), puis derive autour dans
   toutes les directions -- avant, tout partait du coin haut-gauche. */
@keyframes ambient-blob-drift {
  0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  25% { transform: translate(-50%, -50%) translate(28vw, -22vh) scale(1.15); }
  50% { transform: translate(-50%, -50%) translate(-20vw, 30vh) scale(0.9); }
  75% { transform: translate(-50%, -50%) translate(-30vw, -25vh) scale(1.1); }
  100% { transform: translate(-50%, -50%) translate(22vw, 26vh) scale(0.95); }
}

/* ---------- HERO (bloc classique, en flux normal) ---------- */

/* Hero plein cadre : video pleine page (plus de colonne 70%/decoupage
   SVG), texte centre par-dessus (voir .hero__left plus bas). Video DANS
   .page (pas fixed, pas hors de <main>) -- suit le flux normal comme le
   reste du contenu, pas de parallax. */
.hero {
  position: relative;
  height: 100vh;
}

.hero__right {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  /* Vague du bas (#hero-bottom-wave, index.tpl) : clip-path REEL sur ce
     wrapper -- clippe a la fois la video (via .crop-wrap) ET le filtre
     sombre (.hero__overlay, meme parent), les 2 restent donc synchronises
     sur le meme bord ondule. La zone sous la vague devient transparente,
     laissant voir le vrai fond de page derriere. */
  clip-path: url(#hero-bottom-wave);
}

@media (max-width: 900px) {
  /* Sur mobile, le trace #hero-bottom-wave (pense pour une largeur
     desktop) se retrouve compresse horizontalement (meme nombre de
     vaguelettes sur une largeur bien plus etroite) sans que son amplitude
     -- proportionnelle a la HAUTEUR, pas a la largeur -- ne s'adapte en
     retour : le resultat est une vague trop resserree/agitee pour son
     amplitude (retour utilisateur). #hero-bottom-wave-mobile (meme <svg>,
     voir index.tpl) : moitie moins de vaguelettes, amplitude doublee --
     un tracee pense pour une largeur etroite plutot qu'un simple decoupage
     du meme trace desktop. */
  .hero__right {
    clip-path: url(#hero-bottom-wave-mobile);
  }
}

/* Recadrage pan/zoom pilote par le back-office (.js-crop-photo, voir
   custom.js applyCropTransforms) -- pas d'object-fit:cover ici, meme
   technique que .catalog-hero__media (product.css) : .crop-wrap centre
   son enfant sur le cadre, le JS calcule l'echelle "couverture" +
   pan/zoom depuis la vraie taille naturelle de la video. */
.hero__right .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero__right video {
  display: block;
  max-width: none;
  transform-origin: center center;
  filter: saturate(0.9) brightness(0.95);
}

/* Filtre sombre par-dessus la video (pas un filter CSS sur la video
   elle-meme, qui en assombrirait aussi les couleurs/contrastes propres --
   un calque semi-transparent au-dessus reste neutre sur l'image, ne
   sert qu'a ameliorer la lisibilite du texte blanc par-dessus). */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* Zone texte, centree par-dessus la video (plus de colonne gauche/
   droite) -- pleine largeur/hauteur du hero, texte blanc pour rester
   lisible sur le filtre sombre. */
.hero__left {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 4vw;
  box-sizing: border-box;
  text-align: center;
  color: #ffffff;
}

.nav-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
  z-index: 900;
}

/* ---------- HERO CONTENT ---------- */

.hero__content {
  max-width: 100%;
}

.hero__eyebrow {
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 18px;
}

.hero__title {
  /* display:block necessaire depuis que ce n'est plus un <h1> mais un
     <span> (retour utilisateur, SEO -- le sous-titre est devenu le H1 de
     la page) : un span est inline par defaut, sans ca il resterait sur
     la meme ligne que .hero__subtitle au lieu de sa propre ligne. */
  display: block;
  /* Fluide (comme .gamme-grid) au lieu de 2 paliers fixes en @media :
     les deux anciens breakpoints (900px -> 52px, 700px -> 34px) avaient
     la meme specificite, donc celui ecrit APRES dans le fichier (900px)
     l'emportait meme sous 700px -- le titre restait a 52px sur telephone
     au lieu de 34px, prenait une hauteur enorme et poussait le CTA sous
     le viewport. Un clamp() grandit en continu avec la largeur, sans
     jamais dependre de l'ordre des regles ni laisser de trou entre deux
     paliers. */
  font-size: clamp(34px, 5vw + 15px, 80px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: #ffffff;
}

.hero__title-dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: #2323e0;
  vertical-align: baseline;
  transition: filter 0.05s linear;
}

.hero__subtitle {
  max-width: 480px;
  /* margin auto (pas juste 0) : .hero__content est centre en tant
     qu'enfant flex de .hero__left, mais un <p> block classique ne se
     centre pas tout seul dans un parent plus large que lui -- margin
     auto gauche/droite centre sa propre boite. */
  margin: 24px auto 0;
  /* normal, pas le gras par defaut du navigateur pour <h1> (avant, cet
     element etait un <p>, jamais gras nulle part -- devenu <h1> pour le
     SEO, voir index.tpl, sans reprendre le poids visuel d'un titre). */
  font-weight: normal;
  /* Meme logique fluide que .hero__title ci-dessus. */
  font-size: clamp(15px, 1vw + 13px, 20px);
  line-height: 1.5;
  color: #ffffff;
}

.hero__cta {
  /* Retour utilisateur : "le bouton est ancre par rapport a la page, pas
     par rapport au titre... sur certaines resolutions, le bouton passe
     devant le texte" -- avant, position:absolute avec un bottom FIXE
     (200px depuis le bas du hero) ignorait totalement la hauteur reelle
     du bloc titre/sous-titre juste au-dessus (variable : clamp() sur la
     taille de police, sous-titre qui peut faire 1 a 3 lignes selon la
     largeur) -- sur les resolutions ou ce bloc est plus haut que prevu,
     le bouton (toujours au meme endroit) se retrouvait dessus. Simple
     enfant flex de .hero__left (comme .hero__content juste au-dessus,
     meme "gap: 32px") au lieu d'un absolu detache : il suit desormais
     TOUJOURS la vraie hauteur du texte, plus jamais de chevauchement
     possible quelle que soit la resolution. align-self:flex-end (pas
     align-items:center herite de .hero__left) pour garder le meme
     alignement a droite qu'avant, .hero__content restant lui centre. */
  align-self: flex-end;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 34px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.hero__cta:hover {
  /* Fond bleu plein au survol -- texte deja blanc par defaut desormais,
     reste blanc ici aussi (redondant mais explicite). */
  color: #ffffff;
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
}

/* ---------- BLOC REVEAL (entre le hero et le carrousel) ----------
   Des "bulles" liquid glass apparaissent en fondu/montee au scroll. */

/* .page = LE <main> qui contient tout le contenu (voir index.tpl).
   Pas de fond ni de masque sur .page lui-meme : le fond plat opaque est
   porte par html/body (voir tout en haut du fichier), la video (fixe,
   hors de .page) porte seule le masque en vague. */
.page {
  position: relative;
  z-index: 1;
}

/* ---------- BANDEAU DE REASSURANCE (5 badges, liquid glass identique a la nav) ---------- */

.trust {
  position: relative;
  width: 100%;
  display: flex;
  /* Colonne : intro (titre + sous-titre, façon bloc "Inspiration" IKEA)
     au-dessus de la rangee de badges -- evite que la rangee de badges
     seule paraisse "jetee" en fin de page sans contexte. */
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5vw, 48px);
  /* Padding-bottom reduit (etait clamp(40px, 15vw, 200px) -- jusqu'a
     200px de vide entre les badges et le footer). */
  padding: clamp(12px, 3vw, 20px) 4vw clamp(24px, 6vw, 64px);
  box-sizing: border-box;
}

.trust__intro {
  text-align: center;
}

.trust__intro-title {
  margin: 0 0 12px;
  /* Meme taille que .bubble-carousel-intro__title ("Nos collections"). */
  font-size: clamp(24px, 3vw, 50px);
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

.trust__intro-dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: #2323e0;
}

.trust__intro-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
}

.trust__badges {
  width: 100%;
  display: flex;
  /* Toujours sur une seule ligne, quelle que soit la largeur d'ecran --
     les 5 badges se retrecissent ensemble (voir .trust__badge en
     flex:1, tailles en clamp()) plutot que de passer a la ligne. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.5vw, 56px);
}

/* Chaque badge est sa propre bulle liquid glass, meme recette que la
   nav/le footer. Decalage vertical en quinconce (badges pairs plus bas)
   + flottaison continue, decalee par badge pour ne pas etre synchrone. */
.trust__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1.5vw, 14px);
  /* Retrecit avec l'ecran plutot que de forcer le passage a la ligne
     (voir .trust en flex-wrap:nowrap juste au-dessus). */
  flex: 1 1 0;
  min-width: 0;
  max-width: 160px;
  padding: clamp(10px, 3vw, 30px) clamp(6px, 2vw, 20px);
  border-radius: clamp(14px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  /* animation-delay NEGATIF (voir juste en dessous) : demarre l'animation
     "deja en cours" plutot que de la faire attendre -- avec un delai
     POSITIF, certains navigateurs (bug WebKit/iOS connu) desynchronisent
     le tout premier badge (delai 0) au premier paint, qui repartait
     alors a l'envers (descend au lieu de monter) par rapport aux autres. */
  animation: bubble-float 4.5s ease-in-out infinite;
  animation-delay: 0s;
}

.trust__badge:nth-child(even) {
  margin-top: 44px;
}

.trust__badge:nth-child(2) { animation-delay: -0.2s; }
.trust__badge:nth-child(3) { animation-delay: -0.4s; }
.trust__badge:nth-child(4) { animation-delay: -0.6s; }
.trust__badge:nth-child(5) { animation-delay: -0.8s; }

.trust__label {
  font-size: clamp(8px, 1.8vw, 13px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #000000;
  text-align: center;
  line-height: 1.3;
}

.trust__badge svg {
  width: clamp(16px, 5vw, 34px);
  /* auto (pas le meme clamp force en hauteur) : le SVG "maison + drapeau"
     (badge "Fait a Lyon") a une viewBox plus haute que large (24x33, la
     hampe deborde au-dessus du toit) -- forcer une hauteur egale a la
     largeur l'aurait ecrase/deforme. auto laisse le ratio intrinseque de
     chaque viewBox scaler naturellement (carre pour les 4 autres icones,
     plus haut pour celle-ci) -- tout reste toujours proportionnel et
     aligne, y compris en mobile. */
  height: auto;
}

@media (max-width: 900px) {
  .trust__badge:nth-child(even) {
    margin-top: 0;
  }
}

/* ---------- TEASER "A PROPOS" (liquid glass, meme recette que le reste) ---------- */

.about-teaser {
  position: relative;
  width: 100%;
  /* Les photos decoratives (.about-teaser__photo--a/b/c/d) debordent
     volontairement du panneau via des offsets negatifs importants (effet
     "collage") -- source de la scrollbar horizontale sur toute la page.
     On clippe ici, localement, plutot que sur html/body (qui a des
     effets de bord sur le tracking du scroll pour la nav -- voir plus
     haut) : la section est en overflow-x:hidden, largeur 100vw pour
     laisser les photos deborder jusqu'au bord de l'ecran sans re-creer
     de scrollbar. */
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-top genereux : .about-teaser__photo--a remonte a top:-25% de
     .about-teaser__stack, donc sans marge au-dessus elle se fait rogner
     par la section precedente (bubble-carousel). */
  padding: 160px 8vw 260px;
  box-sizing: border-box;
}

.about-teaser__stack {
  position: relative;
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-teaser__photo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px) saturate(1.4);
  -webkit-backdrop-filter: blur(4px) saturate(1.4);
}

/* Recadrage (zoom + point de recadrage) configurable depuis Modules >
   Bleu Canin - Donnees Nav > Configurer (voir Bleucanin_Nav::getAboutPhotoCrops
   et custom.js applyCropTransforms). Pas de object-fit:cover : ca
   rognerait la photo au chargement AVANT le zoom, empechant tout zoom
   sous 100% (le zoom ne pourrait jamais reveler plus que ce que "cover"
   montre par defaut) -- meme piege que rencontre dans l'editeur en
   back-office, corrige ici de la meme facon : centrage statique sur le
   wrapper (transform fixe), photo a sa taille naturelle a l'interieur,
   zoom/deplacement calcules et appliques en JS (l'echelle de "couverture
   de base" depend du ratio reel de la photo, connu seulement une fois
   chargee -- pas disponible en CSS pur). */
.about-teaser__photo .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.about-teaser__photo img {
  display: block;
  max-width: none;
  transform-origin: center center;
}

.about-teaser__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
}

.about-teaser__photo--a {
  width: clamp(220px, 22vw, 320px);
  height: clamp(280px, 26vw, 380px);
  left: -14%;
  top: -25%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 40px -12px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15);
}

.about-teaser__photo--b {
  width: clamp(200px, 20vw, 300px);
  height: clamp(200px, 20vw, 300px);
  right: -1%;
  bottom: -26%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 22px 46px -12px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.18);
}

.about-teaser__photo--c {
  width: clamp(160px, 16vw, 240px);
  height: clamp(220px, 22vw, 300px);
  right: -15%;
  top: -20%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 26px 54px -14px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.2);
}

.about-teaser__photo--d {
  width: clamp(240px, 24vw, 340px);
  height: clamp(180px, 18vw, 260px);
  left: 6%;
  bottom: -37%;
  z-index: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 34px -12px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.12);
}

.about-teaser__panel {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 56px 48px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  text-align: center;
  animation: bubble-float 6s ease-in-out infinite;
}

.about-teaser__eyebrow {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 18px;
}

.about-teaser__title {
  margin: 0 0 20px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

.about-teaser__title-dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: #2323e0;
}

.about-teaser__text {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
}

.about-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  color: #000000;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.about-teaser__cta:hover {
  color: #2323e0;
  transform: scale(1.05);
}

/* ---------- BANDEAU LARGE (16:9, meme largeur que le footer) ---------- */

.wide-banner {
  /* position:relative (pas juste width/padding) : sans ca, cette section
     est un bloc "statique" qui se peint AVANT tout element positionne
     (voir .ambient-blob, position:fixed) dans l'ordre de peinture CSS,
     peu importe l'ordre reel dans le DOM -- d'ou le texte qui passait
     sous le blob. Les autres sections (.trust, .about-teaser,
     .bubble-carousel) l'ont deja, seule celle-ci ne l'avait pas. */
  position: relative;
  width: 100%;
  /* 5vw (pas 8vw) : aligne sur le meme systeme que le footer/#main des
     pages (max-width:1300px, padding laterale 5vw) -- voir le chantier
     d'alignement general, plus aucun bloc du site n'utilisait la meme
     largeur que les autres. */
  padding: 0 5vw 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}

/* ---------- Bloc "symetrique" du hero, entre le carrousel et la
   wide-banner : meme composition (photo pleine decoupee en vague SVG +
   bulle de texte glass + bouton pill), mais miroir -- le hero a sa
   video a DROITE (colonne 70%) et son texte en pleine colonne a
   GAUCHE ; ici la photo est a GAUCHE (colonne 70%, #home-feature-wave
   = #hero-right-wave retourne horizontalement) et le texte est une
   petite bulle flottante a DROITE (pas une pleine colonne, contrairement
   au hero). ---------- */
/* Plein cadre (touche les bords), meme technique full-bleed que
   .catalog-hero : width:100vw + marges negatives pour deborder du
   conteneur centre, quelle que soit sa largeur reelle. */
.home-feature {
  position: relative;
  /* z-index:1 (pas 0) : meme convention que .bubble-carousel-intro juste
     au-dessus (aussi z-index:1) -- avec 0, ce bloc passait DERRIERE le
     carrousel partout ou les 2 se frolent (ex: "gamelle" flottant pres du
     bord haut du bloc). overflow:hidden (voir plus bas) suffit deja a
     contenir les photos DANS les limites du bloc, donc plus besoin d'un
     z-index plus bas pour se proteger d'un eventuel debordement. */
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Bloc agrandi (80vh -> 95vh, min-height 680 -> 820) : retour
     utilisateur, "plus imposant" -- voir aussi la colonne photo/les
     images/la carte, toutes remises a l'echelle en meme temps plus bas. */
  height: 95vh;
  min-height: 820px;
  margin-bottom: 100px;
  overflow: hidden;
}

.home-feature__panel {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Zone photo (0-60%, laisse 60-100% libre pour la bulle) : fond
   transparent, AUCUN cadre (pas de radius/ombre/bordure -- photos
   "brutes"). "support" et "gamelle" flottent l'une au-dessus de l'autre,
   fixes (plus de parallax de scroll). */
.home-feature__parallax {
  position: absolute;
  top: 0;
  left: 0;
  /* 60% -> 85% (retour utilisateur : 90% etait trop gros) : agrandit
     mecaniquement toutes les photos (qui sont en % de cette colonne),
     voir le retour "plus imposant". Cadree sur la GAUCHE (left:0,
     inchange) -- la carte a droite (.home-feature__content) garde son
     propre alignement independant sur la colonne standard du site, voir
     plus bas. */
  width: 85%;
  height: 100%;
  /* overflow:hidden isole a cette colonne (pas juste celui, plus large,
     de .home-feature) + masque en degrade : sans ca, les couches qui
     descendent depuis le haut (data-parallax-start, voir index.tpl)
     etaient coupees NET par le bord du bloc, effet pas fini (retour
     utilisateur) -- le degrade transforme cette coupure dure en fondu
     progressif. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 80px);
  mask-image: linear-gradient(to bottom, transparent, #000 80px);
}

.home-feature__parallax-img {
  position: absolute;
  /* will-change : force le navigateur a composer le deplacement sur son
     propre calque des le depart (au lieu de recalculer a chaque frame de
     scroll) -- voir updateHomeParallax dans custom.js. */
  will-change: transform;
}

/* Pas de object-fit/hauteur forcee : la largeur pilote la taille, la
   hauteur suit le ratio naturel de la photo (height:auto) -- jamais
   croppee. */
.home-feature__parallax-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Les 7 couches partagent EXACTEMENT le meme cadre (bottom:0, meme
   left/width) -- "superposees, alignees en bas et centrees" = la
   position FINALE du parallax (scroll en butee), voir le commentaire
   dans index.tpl. Le JS (updateHomeParallax, custom.js) deplace chacune
   au scroll via translateY UNIQUEMENT, a partir de ce cadre commun :
   aucune ne doit avoir son propre top/left/width different, sinon elles
   ne convergeraient pas au meme point final. */
.home-feature__parallax-img--support,
.home-feature__parallax-img--support-overlay,
.home-feature__parallax-img--support-overlay-1,
.home-feature__parallax-img--gamelle,
.home-feature__parallax-img--gamelle-overlay,
.home-feature__parallax-img--gamelle-overlay-1,
.home-feature__parallax-img--croquettes {
  bottom: 0;
  /* Photos agrandies (54% -> 60%) ET recadrees sur la GAUCHE (left
     20% -> 5%, colonne elle-meme passee de 60% a 90%, voir
     .home-feature__parallax plus haut) : sans ce recadrage, la colonne
     plus large laissait un grand vide entre le bord gauche du bloc et
     les photos au lieu de les rapprocher du bord (retour utilisateur). */
  left: 5%;
  width: 60%;
}

/* Empilement (de dessous a dessus) : support < gamelle < croquettes <
   gamelle-overlay < support-overlay < support-overlay-1 < gamelle-overlay-1
   -- recalcule suite au deplacement manuel de support-overlay-1 (retour
   utilisateur, "j'ai bouge support-overlay-1 a z-index:6 pour que ca
   fonctionne"). Chaque couche "support-*" ne bouge jamais (deja a la
   position finale), chaque couche "gamelle-*" part de la mi-hauteur du
   bloc, "croquettes" part du tout-haut (voir data-parallax-start dans
   index.tpl et updateHomeParallax dans custom.js). */
.home-feature__parallax-img--support {
  z-index: 1;
}

.home-feature__parallax-img--gamelle {
  z-index: 2;
}

.home-feature__parallax-img--croquettes {
  z-index: 3;
}

.home-feature__parallax-img--gamelle-overlay {
  z-index: 4;
}

.home-feature__parallax-img--support-overlay {
  z-index: 5;
}

.home-feature__parallax-img--support-overlay-1 {
  z-index: 6;
}

.home-feature__parallax-img--gamelle-overlay-1 {
  z-index: 7;
}

/* Zone libre 60-100% : la carte y est centree via flexbox. right: au
   lieu d'une width en % (qui s'etire indefiniment sur un tres grand
   ecran, jusqu'a deborder de la colonne de contenu normale du site) --
   .home-feature__panel (parent, position de reference pour "right") est
   full-bleed (100vw, coordonnees 0 a 100vw comme le viewport), donc pour
   que le bord droit de la carte tombe au meme endroit que .wide-banner__panel
   (max-width:1300px -- aligne sur le footer, voir chantier d'alignement
   general -- centre, bord droit a 50vw + 650px), il faut
   right = 100vw - (50vw + 650px) = 50vw - 650px. max() avec 5vw garde
   une marge minimale sur les ecrans plus etroits que la colonne (sinon
   la formule devient negative et repousse la carte hors du viewport). */
.home-feature__content {
  position: absolute;
  top: 0;
  /* 70% reste la limite "nominale" de la zone photo (repartition 70-30),
     mais la carte peut desormais deborder LIBREMENT a gauche de cette
     limite (voir justify-content:flex-end + .home-feature__stack plus
     bas) -- la zone 70-100% seule etait trop etroite pour la carte
     (retour utilisateur). "Flottante par-dessus" le parallax : pas
     d'overflow:hidden ici, et z-index:2 (plus haut que les couches du
     parallax, voir plus haut) la garde toujours au premier plan. */
  left: 70%;
  /* 5vw (pas 4) en plancher : .wide-banner (section de reference) a
     lui-meme padding:0 5vw -- en dessous du seuil ou le plafond 1300px
     s'applique, c'est CE padding qui determine son bord droit. 56vw
     (ajuste manuellement, pas 50) : decale legerement le bord droit de
     la carte vers la droite par rapport a l'alignement strict sur
     .wide-banner. */
  right: max(5vw, calc(56vw - 650px));
  width: auto;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  /* center -> flex-end : centrer un enfant plus large que cette boite
     (70-100%) le ferait deborder des 2 cotes, y compris a DROITE --
     cassant l'alignement soigneusement cale sur la colonne standard du
     site (voir "right" ci-dessus). flex-end colle son bord droit pile
     sur cette limite, tout surplus de largeur ne deborde qu'a GAUCHE,
     par-dessus le parallax -- exactement l'effet voulu. */
  justify-content: flex-end;
  box-sizing: border-box;
}

/* ---------- Titre + carte liquid glass + bouton flottant (2e jet,
   retour a la recette glass habituelle du site apres l'essai opaque
   cream). Contenu EN DUR pour l'instant, voir index.tpl. */

/* Wrapper neutre, ancre le bouton flottant (.home-feature__cta,
   position:absolute dedans) -- se dimensionne sur son contenu reel.
   max-width reduit (colonne plus etroite) : proportion plus verticale,
   moins "large et court" -- retour utilisateur, laisser le bloc
   "respirer" comme la reference photo fournie. */
.home-feature__stack {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* Largeur decente garantie, meme si la zone 70-100% (voir
     .home-feature__content) est plus etroite que ca -- la carte deborde
     alors a gauche par-dessus le parallax plutot que de se comprimer
     (retour utilisateur, "bloc de droite trop fin"). */
  min-width: 420px;
}

/* Meme taille/style que .about-teaser__title (bloc "A propos" de la
   home) : coherence entre les 2 titres de blocs "presentation" de la
   page. Deplace DANS la carte (n'est plus au-dessus, hors du glass). */
.home-feature__card-title {
  margin: 0 0 24px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

/* Meme recette glass que .cart-summary/.wide-banner__spot-tooltip :
   border/gradient/box-shadow/backdrop-filter identiques, deja etablis
   partout ailleurs sur le site. Padding vertical augmente (respire plus,
   voir aussi .home-feature__card-item plus bas). */
.home-feature__card {
  width: 100%;
  box-sizing: border-box;
  padding: 48px 40px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  color: #1a1a1a;
  text-align: left;
}

.home-feature__card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Padding/gap augmentes (16px -> 28px, 16px -> 18px) : les 3 points
   forts etaient trop serres, doivent "respirer" davantage entre eux
   (retour utilisateur, reference photo fournie). */
.home-feature__card-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 26, 26, 0.85);
}

.home-feature__card-item:first-child {
  padding-top: 0;
}

.home-feature__card-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.home-feature__card-item svg {
  flex: 0 0 auto;
  color: #1a1a1a;
}

/* Icone "France" en image (voir index.tpl) plutot qu'un SVG inline --
   meme boite que les icones SVG voisines (28px, meme flex) pour rester
   alignee avec elles dans la liste. */
.home-feature__card-icon-img {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Mots-cles en gras + bleu de marque, dans le texte des points forts
   (voir index.tpl) -- meme bleu que le reste du site (#2323e0). */
.home-feature__accent {
  font-weight: 700;
  color: #2323e0;
}

/* Meme recette que .hero__cta/.about-cta__button (pill glass, fond bleu
   plein au survol), flottant a son coin bas-droit plutot qu'un enfant en
   flux normal -- positionne par rapport a .home-feature__stack. */
/* Meme recette que .hero__cta ("Decouvrir" sur le hero) : padding, fond,
   ombre, blur identiques -- SAUF la couleur du texte, gardee noire (pas
   blanche comme le hero) : ce bloc n'a pas de photo sombre derriere pour
   faire ressortir du blanc, contrairement au hero (retour utilisateur --
   le blanc devenait illisible sur ce fond clair). Positionnement (badge
   flottant sur le coin de la carte, pas cale dans un coin de hero) reste
   propre a ce bouton aussi. */
.home-feature__cta {
  position: absolute;
  right: 20px;
  bottom: -20px;
  transform: translateY(50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 34px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.6);
  color: #000000;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.home-feature__cta:hover {
  color: #ffffff;
  transform: translateY(50%) scale(1.04);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
}

/* Mobile : plus de composition absolue cote a cote (le panel n'a plus de
   hauteur fixe en aspect-ratio) -- photo pleine largeur SANS decoupage
   (meme logique que .hero__right-crop { clip-path:none } sur mobile),
   carte empilee dessous en flux normal. */
@media (max-width: 900px) {
  .home-feature {
    height: auto;
    /* min-height:820px (regle desktop) jamais reinitialisee ici : le bloc
       restait force a 820px de haut alors que son contenu (photo + carte,
       toutes deux en position:absolute sur le meme cadre, voir plus bas)
       ne fait qu'environ 250px -- gros vide en dessous (retour
       utilisateur). auto = le bloc suit sa vraie hauteur mesuree en JS. */
    min-height: auto;
  }

  .home-feature__panel {
    display: block;
    position: relative;
  }

  /* Toute la largeur (retour utilisateur : "quitte a ce que ce soit tres
     haut verticalement"), mais hauteur fixee a 70% de l'ecran (pas la
     hauteur naturelle de la photo, ~250px sur un ecran de 812px -- "pas le
     temps de voir mon parallax", retour utilisateur) pour laisser assez de
     scroll pour voir l'animation se jouer -- SANS forcer les photos a
     remplir cette hauteur (essai precedent avec object-fit:cover : les
     photos larges/paysage se faisaient enormement zoomer/recadrer sur les
     cotes pour remplir une boite haute et etroite, "trop larges,
     depassent" -- seule croquettes.png, deja plus verticale nature,
     semblait normale). Meme logique que desktop : les photos gardent leur
     ratio naturel (voir width/height plus bas), juste posees en bas
     (bottom:0, regle partagee plus haut) d'une boite plus haute que leur
     propre hauteur -- overflow:hidden + masque en degrade evitent
     seulement une coupure nette du haut si une couche remonte au-dessus. */
  .home-feature__parallax {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 70vh;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 80px);
    mask-image: linear-gradient(to bottom, transparent, #000 80px);
  }

  /* Photos recentrees (desktop : left:5%/width:60%, cale a gauche pour la
     composition asymetrique a 2 colonnes) -- sur mobile, pleine largeur,
     bord a bord (retour utilisateur), toujours ancrees en bas (bottom:0,
     regle partagee plus haut) et a leur ratio naturel (pas de
     top/height/object-fit ici : voir .home-feature__parallax-img img,
     regle generale, height:auto). */
  .home-feature__parallax-img--support,
  .home-feature__parallax-img--support-overlay,
  .home-feature__parallax-img--support-overlay-1,
  .home-feature__parallax-img--gamelle,
  .home-feature__parallax-img--gamelle-overlay,
  .home-feature__parallax-img--gamelle-overlay-1,
  .home-feature__parallax-img--croquettes {
    left: 0;
    width: 100%;
  }

  /* Carte en flux normal, SOUS le parallax (retour utilisateur : "en dur,
     naturel avec le scroll") -- plus de position:absolute/transform JS,
     juste un bloc empile comme n'importe quel contenu de page. */
  .home-feature__content {
    position: relative;
    /* left:70% (regle desktop) reste actif tel un decalage sur un element
       en position:relative -- resette ici, sinon la carte se retrouvait
       poussee vers la droite (retour utilisateur, "l'alignement
       horizontal est pas bon"). */
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    /* 5vw (pas 6) : meme padding lateral que le reste du site sur mobile
       (footer, wide-banner, about-page -- voir chantier d'alignement
       general) -- retour utilisateur, "l'alignement horizontal est pas
       bon" (6vw decalait legerement la carte par rapport aux autres
       blocs de la page). Padding bas 40px -> 76px : .home-feature__cta
       (bouton "Voir") flotte en dehors de .home-feature__stack (bottom:
       -20px + translateY(50%), voir plus haut) -- 40px ne laissait pas
       assez de place, le bouton se faisait couper (retour utilisateur). */
    padding: 32px 5vw 76px;
    box-sizing: border-box;
  }

  /* min-width:420px (regle desktop, .home-feature__stack) faisait deborder
     la carte en largeur sur mobile (ecrans < 420px de large, ex 375px) --
     retour utilisateur, "la bulle depasse en largeur". max-width aussi
     desactive : sur mobile la carte doit juste suivre la largeur
     disponible (100%, deja fixee par .home-feature__content, voir
     padding 5vw plus haut), pas une fourchette pensee pour le desktop. */
  .home-feature__stack {
    min-width: 0;
    max-width: none;
  }

  .home-feature__card {
    width: 100%;
  }
}

/* Meme largeur/centrage que .wide-banner__panel (max-width 1300px --
   aligne sur le footer/#main, voir chantier d'alignement general) pour
   que le bord gauche du bloc -- donc du titre, aligne en texte a gauche
   a l'interieur -- tombe exactement sur le bord gauche de l'image, que
   celle-ci soit centree ou non dans une section plus large. */
.wide-banner__intro {
  width: 100%;
  max-width: 1300px;
  text-align: left;
}

.wide-banner__intro-title {
  margin: 0 0 12px;
  /* Meme taille que .bubble-carousel-intro__title ("Nos collections"). */
  font-size: clamp(24px, 3vw, 50px);
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

.wide-banner__intro-dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: #2323e0;
}

.wide-banner__intro-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
}

.wide-banner__panel {
  position: relative;
  width: 100%;
  max-width: 1300px;
  aspect-ratio: 16 / 9;
  /* Mobile (voir @media plus bas) : repasse en 4:3 -- en 16:9 sur un
     panel qui n'a plus que la largeur de l'ecran (donc bien plus etroit
     qu'en desktop), la bande devient tres fine et le rendu est mauvais.
     4:3 (plus de hauteur) donne un cadre plus confortable, quitte a
     rogner un peu plus la photo sur les bords (voir la technique de
     recadrage pan/zoom JS, .wide-banner__panel-media .crop-wrap,
     recalculee automatiquement au resize). */
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  /* PAS d'overflow:hidden ici (contrairement a avant) : ce cadre porte
     aussi les pastilles/pop-up (.wide-banner__spot-tooltip), qui doivent
     pouvoir deborder librement du panel sans etre coupees -- notamment
     sur mobile, ou le panel est etroit. Le rognage de la photo (qui, lui,
     en a besoin) est isole dans .wide-banner__panel-media juste
     en-dessous. */
  overflow: visible;
}

/* Mobile uniquement (pas tablette/desktop) : voir commentaire sur
   aspect-ratio ci-dessus. */
@media (max-width: 700px) {
  .wide-banner__panel {
    aspect-ratio: 4 / 3;
  }
}

/* Rognage de la photo, separe du cadre .wide-banner__panel (voir
   commentaire ci-dessus) -- memes dimensions/coins arrondis exacts,
   juste en position:absolute plutot que la taille "reelle" du panel. */
.wide-banner__panel-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Photo de fond du panel : meme technique de recadrage (pan/zoom en
   pixels, configurable en back-office) que les photos "A propos" et le
   carrousel de bulles -- <img> a taille naturelle + transform, pas de
   background-image/object-fit:cover (voir custom.js applyCropTransforms
   pour le detail du pourquoi). */
.wide-banner__panel-media .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wide-banner__panel img,
.wide-banner__panel video {
  display: block;
  max-width: none;
  transform-origin: center center;
}

.wide-banner__spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 1;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.wide-banner__spot:focus,
.wide-banner__spot:focus-visible {
  outline: none;
  box-shadow: none;
}

.wide-banner__spot-dot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12));
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-top-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px) saturate(1.5);
  -webkit-backdrop-filter: blur(6px) saturate(1.5);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.wide-banner__spot:hover .wide-banner__spot-dot {
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  border-color: rgba(35, 35, 224, 0.85);
}

.wide-banner__spot-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(-50%, 8px);
  /* La pop-up n'est plus coupee par .wide-banner__panel (overflow:visible
     desormais, voir plus haut -- le rognage de la photo est isole dans
     .wide-banner__panel-media). clamp() reste utile en secours sur les
     tres petits ecrans, ou 220px pourrait depasser la largeur du
     viewport lui-meme. */
  width: clamp(160px, 90vw, 220px);
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.7);
  /* Noir sur blanc (pas l'inverse) : meme recette glass claire que le
     reste du site (voir .product-description-panel etc.), pas le glass
     fonce d'avant. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 40px -12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  text-align: left;
}

.wide-banner__spot-tooltip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
}

.wide-banner__spot-tooltip p,
.wide-banner__spot-recap {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
}

/* .wide-banner__spot-recap est un <div> (voir index.tpl), pas un <p> --
   ses propres <p> internes (TinyMCE) n'ont plus besoin de marge, le
   wrapper controle deja l'espacement. */
.wide-banner__spot-recap p {
  margin: 0;
}

/* Declinaison (ex. "Bleu - S") d'une pastille liee a un produit --
   retour utilisateur : infobulle complete "Nom / Description courte /
   Couleur - Taille / Prix", meme contenu que l'ancien mode "Produit" du
   bandeau large. Distincte de la description (poids/couleur intermediaires
   entre le nom en gras et la description grise) pour bien la separer
   visuellement des 2. */
/* Selecteur "p.wide-banner__spot-variant" (pas juste la classe seule) :
   meme specificite que ".wide-banner__spot-tooltip p" juste au-dessus
   (classe + element), doit gagner sur sa couleur par l'ordre de
   declaration, pas par une specificite plus faible qui perdrait sinon. */
p.wide-banner__spot-variant {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}

.wide-banner__spot-recap + .wide-banner__spot-price,
.wide-banner__spot-tooltip p + .wide-banner__spot-price {
  margin-top: 8px;
}

.wide-banner__spot-price {
  font-weight: 700;
  color: #000000;
}

.wide-banner__spot-link {
  /* width:fit-content + margin-left:auto (pas justify-content:flex-end
     seul) : en display:flex "normal", la boite s'etirait sur toute la
     largeur du parent (bloc), donc le border-bottom (le soulignement)
     courait sur toute cette largeur au lieu de coller juste au texte.
     fit-content retrecit la boite a son contenu, margin-left:auto la
     pousse ensuite a droite -- le trait ne souligne plus que "Voir →". */
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 10px;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wide-banner__spot-link:hover {
  color: #2323e0;
  border-color: #2323e0;
}

.wide-banner__spot-link span {
  transition: transform 0.2s ease;
}

.wide-banner__spot-link:hover span {
  transform: translateX(3px);
}

.wide-banner__spot.is-open .wide-banner__spot-tooltip,
.wide-banner__spot-tooltip.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Carabistouille deja vue pour le sous-menu categories (header.tpl) :
   un backdrop-filter imbrique dans un ancetre qui a lui-meme un
   backdrop-filter (.wide-banner__panel) ne se rend pas de facon fiable
   sur mobile (le flou disparait, seule la teinte reste visible). La
   pop-up est donc deplacee en enfant direct de <body> en JS
   (custom.js), et repositionnee "a la main" via getBoundingClientRect
   au lieu de compter sur son ancrage CSS relatif au parent. */
.wide-banner__spot-tooltip--portal {
  /* left/top sont poses en JS (getBoundingClientRect de la pastille +
     scrollX/scrollY, coordonnees PAGE pas viewport) : top = haut de la
     pastille, left = son centre horizontal. Le translate() ancre le
     COIN BAS-CENTRE de la pop-up 14px au-dessus (comme l'ancien
     "bottom: calc(100% + 14px)"), +8px de plus quand fermee (meme
     micro-decalage qu'avant pour l'animation d'ouverture).
     position:absolute (pas fixed) : avec fixed (coordonnees viewport),
     un decalage entre la pastille et sa pop-up apparaissait pendant le
     scroll -- fixed ignore le scroll nativement, donc un JS devait
     recalculer sa position a CHAQUE evenement "scroll", toujours en
     retard d'un tick sur le scroll reel (surtout fluide/inertiel). En
     absolute (coordonnees PAGE), le navigateur fait suivre la pop-up
     nativement avec le reste du contenu au scroll -- plus aucun JS
     necessaire pour rester alignee, donc plus de decalage possible.
     z-index < .bc-nav (999) : portee dans <body>, la pop-up est en
     concurrence directe avec la nav fixe dans l'empilement -- elle ne
     doit jamais passer par-dessus. */
  position: absolute;
  bottom: auto;
  right: auto;
  transform: translate(-50%, calc(-100% - 6px));
  z-index: 998;
}

.wide-banner__spot-tooltip--portal.is-open {
  transform: translate(-50%, calc(-100% - 14px));
}

.wide-banner__spot.is-open .wide-banner__spot-dot {
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
  border-color: rgba(35, 35, 224, 0.85);
}

/* Va-et-vient symetrique (moitie vers le haut, moitie vers le bas)
   plutot qu'un offset uniquement vers le haut -- avec le placement
   resserre des photos (voir .about-teaser__photo--b/--c, marges
   negatives), un mouvement a sens unique faisait cogner les photos
   contre la bulle de texte de façon disgracieuse a chaque cycle. */
@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-6px); }
  75% { transform: translateY(6px); }
}

/* ---------- CARROUSEL DE BULLES LIQUID GLASS (sous les vignettes) ---------- */

/* Titre du carrousel, en dehors de .bubble-carousel (pas dedans) : les
   fleches prev/next y sont positionnees en absolute/top:50% par rapport
   a .bubble-carousel -- un titre a l'interieur agrandirait cette boite
   et decalerait leur centrage vertical par rapport aux bulles. Meme
   gabarit que .wide-banner__intro/.trust__intro (8vw, aligne a gauche). */
.bubble-carousel-intro {
  /* position:relative (pas juste un div statique) : sans ca, le blob
     decoratif (.ambient-blob, position:fixed) se peint TOUJOURS
     au-dessus des elements non-positionnes, quel que soit son z-index
     ou l'ordre du DOM -- meme bug deja rencontre sur .wide-banner,
     .trust, .about-teaser, .bubble-carousel (qui l'ont deja). */
  position: relative;
  z-index: 1;
  width: 100%;
  /* Plus d'air au-dessus (hero juste avant, 0px avant), moins en dessous
     (le padding-top de .bubble-carousel, reduit juste apres, s'ajoute
     deja a cet espace). */
  margin-top: clamp(40px, 6vw, 72px);
  padding: 0 5vw;
  box-sizing: border-box;
  /* Plafonne a la MEME largeur de contenu que .wide-banner__intro
     (max-width:1300px -- aligne sur le footer/#main, voir chantier
     d'alignement general -- sans padding propre, son 5vw vient de son
     parent .wide-banner) : ici le padding est directement sur cet
     element, donc calc() ajoute ces 2*5vw "en plus" du plafond de
     1300px pour que la zone de CONTENU (une fois le padding retire)
     tombe pile sur 1300px, comme le titre du bandeau large -- sinon,
     sur un tres grand ecran, les 2 titres n'etaient plus a la meme
     distance du bord (l'un cale a 5vw fixe, l'autre centre autour
     d'une largeur de 1300px). */
  max-width: calc(1300px + 10vw);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  /* Titre puis lien "Voir tout" EN DESSOUS (pas cote a cote). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.bubble-carousel-intro__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 50px);
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

/* Meme recette que .wide-banner__spot-link ("Voir ->" des pastilles). */
.bubble-carousel-intro__see-all {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bubble-carousel-intro__see-all:hover {
  color: #2323e0;
  border-color: #2323e0;
}

.bubble-carousel-intro__see-all span {
  transition: transform 0.2s ease;
}

.bubble-carousel-intro__see-all:hover span {
  transform: translateX(3px);
}

.bubble-carousel {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  /* Padding-top reduit (etait 40px comme le bas) : le titre juste
     au-dessus a deja son propre espacement (margin-top), 40px de plus
     ici faisait trop de vide entre le titre et les bulles. Padding-bottom
     aussi reduit (40 -> 16, symetrique au top) : avec 2 carrousels
     consecutifs sur la home (voir index.tpl), l'ancien 40px + le padding
     du track (voir plus bas) laissaient trop de vide entre les 2 --
     l'essai precedent (marge negative sur le 2e carrousel) etait fragile
     et causait un chevauchement reel a certaines largeurs d'ecran, corrige
     en reduisant directement ce padding au lieu d'une astuce de marge. */
  padding: 16px 0 16px;
  /* Le track contient 3 jeux de bulles (avant/originales/apres, voir JS) --
     largement plus large que l'ecran ; on le clippe ici. */
  overflow-x: hidden;
}

.bubble-carousel__track {
  display: flex;
  align-items: flex-end;
  /* flex-start (pas "safe center") : un bug connu des navigateurs a base
     de Chromium fait qu'avec un conteneur flex scrollable en
     justify-content centre/safe-centre, la zone de scroll reelle
     n'englobe pas correctement le debut/la fin du contenu -- seul effet
     de bord : une liste tres courte (1-2 bulles, cas rare) s'aligne a
     gauche plutot que centree, au lieu de rester bloquee/coupee au bord
     comme avant. */
  justify-content: flex-start;
  gap: 48px;
  /* Scroll natif + scroll-snap (pas de transform pilote a la main) :
     momentum/trackpad/molette/swipe gratuits, geres par le navigateur.
     Plus de boucle infinie a base de clones : a partir de 3 items, le JS
     avance d'un cran (largeur bloc + gap) toutes les 5s, et revient
     simplement au tout debut (scrollLeft:0) une fois arrive tout a
     droite -- pas de "teleportation" invisible entre jeux clones. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  --bc-edge: 48px;
  /* Largeur reelle d'une bulle (hauteur clamp() x ratio 4/3, voir
     .glass-bubble) -- sert au padding-left qui centre la 1ere bulle au
     repos (voir plus bas). Surchargee en 1/1 sur le 2e carrousel, voir
     .bubble-carousel--slots .bubble-carousel__track. */
  --bc-bubble-width: calc(clamp(280px, 34vw, 500px) * 4 / 3);
  /* Padding lateral = l'espace avant la 1ere / apres la derniere bulle.
     scroll-padding-left/right (PAS juste padding) : c'est la propriete
     dediee pour ce cas precis (voir spec CSS Scroll Snap) -- elle decale
     la zone de reference du snap ("snapport") du meme montant que le
     padding, donc scrollLeft:0 correspond DEJA a "1ere bulle alignee
     juste apres le padding" nativement, sans qu'un scroll-snap:mandatory
     ne "corrige" la position en scrollant le padding hors champ. Essai
     precedent (padding seul + un <div> "spacer" factice comme point
     d'arret) : fonctionnait pour l'affichage mais faussait le calcul du
     PREMIER clic sur les fleches (qui visait alors le point d'arret du
     spacer PUIS celui de la bulle suivante -- 2 crans au lieu d'un,
     retour utilisateur "2 padding + une vignette"). scroll-padding
     regle les 2 problemes a la fois : plus besoin du spacer factice (voir
     JS, la liste des points d'arret ne contient plus que les bulles).
  */
  padding: 24px var(--bc-edge);
  /* Bord gauche au repos : la 1ere bulle demarre CENTREE a l'ecran
     (retour utilisateur -- "quitte a avoir du bord vide sur la
     gauche"), pas collee au bord comme les suivantes. --bc-bubble-width
     (largeur reelle d'une bulle, differente entre ce carrousel en 4/3 et
     celui en 1/1 -- voir .bubble-carousel--slots plus bas) sert a
     calculer l'espace necessaire pour que son centre tombe pile au
     centre du viewport. */
  padding-left: calc((100vw - var(--bc-bubble-width, 0px)) / 2);
  scroll-padding-left: calc((100vw - var(--bc-bubble-width, 0px)) / 2);
  /* Bord droit : meme probleme que le bord gauche, en pire -- avec
     scroll-snap-type:mandatory, la DERNIERE bulle doit pouvoir etre
     alignee sur le bord "start" du snapport pour etre une position de
     repos valide. Avec seulement --bc-edge (48px) de marge apres elle,
     cette position depasse la largeur scrollable reelle du track : le
     navigateur ne peut pas s'y arreter (aucun point de snap valide la),
     et le scroll "rebondit" en arriere apres l'animation -- constate
     (retour utilisateur : "le carrousel refuse de scroller plus loin").
     padding-right genereux (meme calcul que le centrage a gauche) :
     garantit assez de largeur scrollable pour que la derniere bulle
     puisse toujours atteindre une position de repos valide, quitte a
     laisser du vide visible apres elle une fois qu'on y est (accepte
     par l'utilisateur pour le bord gauche, meme logique ici). */
  padding-right: max(0px, calc(100vw - var(--bc-bubble-width, 0px) - var(--bc-edge)));
  scroll-padding-right: var(--bc-edge);
  width: 100%;
  /* Scrollbar native masquee (le scroll reste utilisable au clavier/
     trackpad/molette/tactile, juste sans la barre visible -- coherent
     avec le reste du site, qui n'a pas de scrollbar visible non plus). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bubble-carousel__track::-webkit-scrollbar {
  display: none;
}

.glass-bubble {
  position: relative;
  /* Peut etre un <a> (si une bulle a un lien configure) ou un <div> --
     retire le soulignement/couleur de lien par defaut du navigateur. */
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  /* Hauteur (pas largeur) pilotee par le clamp -- meme hauteur qu'avant
     (carre), la largeur suit desormais le ratio 4/3 (donc plus large,
     pas plus bas). */
  height: clamp(280px, 34vw, 500px);
  width: auto;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  /* voir .bubble-carousel--slots .glass-bubble plus bas : ce 2e
     carrousel garde la meme hauteur (clamp inchange) mais passe en
     format carre (1/1) -- juste la largeur change, pas la hauteur. */
  /* start (pas center) : plus de bulle "active" mise en avant/zoomee au
     centre -- chaque pas de scroll avance d'un bloc entier, aligner sur
     le debut de chaque bloc colle mieux a ce modele qu'un centrage. */
  scroll-snap-align: start;
  /* Bordure blanche + liseret interne retires (rendaient un contour
     blanc visible autour des vignettes) -- ne garde que l'ombre portee
     exterieure. */
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  z-index: 1;
  /* Meme mise en avant au survol que .gamme-tile (vue grille categorie) :
     la carte se souleve legerement. */
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.glass-bubble:hover {
  transform: translateY(-6px);
}

/* 2e carrousel "bulles" (voir index.tpl) : format carre au lieu de 4/3 --
   height inchangee (heritee de .glass-bubble ci-dessus), seule la
   largeur change (retour utilisateur). */
.bubble-carousel--slots .glass-bubble {
  aspect-ratio: 1 / 1;
}

.bubble-carousel--slots .bubble-carousel__track {
  --bc-bubble-width: clamp(280px, 34vw, 500px);
}

/* Padding-bottom sous ce 2e carrousel -- entre-deux (208 puis 70, retour
   utilisateur) entre l'espace mesure entre les 2 carrousels (trop) et la
   reduction suivante (pas assez). */
.bubble-carousel--slots {
  padding-bottom: 139px;
}

.glass-bubble__img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #c9c2b8;
}

/* Recadrage (zoom + point de recadrage), voir .about-teaser__photo/
   .crop-wrap plus haut pour le detail -- meme principe. Transition +
   regle :hover ici (pas sur l'<img>/<video> lui-meme) : leur transform
   est pilote en JS (custom.js applyCropTransforms, pour le cover
   pan/zoom) et un style inline JS gagne toujours sur une regle CSS
   externe, meme :hover -- combiner le zoom au survol avec le centrage
   translate(-50%,-50%) statique ici evite ce conflit. */
.glass-bubble__img .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.glass-bubble:hover .glass-bubble__img .crop-wrap {
  transform: translate(-50%, -50%) scale(1.08);
}

.glass-bubble__img img,
.glass-bubble__img video {
  display: block;
  max-width: none;
  transform-origin: center center;
  /* Meme filtre que le hero (.hero__right video) -- retour utilisateur :
     applique aux 2 carrousels de bulles de la home (categorie ET slots
     manuels), pas juste l'un des deux. */
  filter: saturate(0.9) brightness(0.95);
}

.glass-bubble__text {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 5%;
  box-sizing: border-box;
}

/* Position verticale/horizontale du texte, configurable par bulle depuis
   Modules > Bleu Canin - Donnees Nav > Configurer. */
.glass-bubble__text--v-top { align-items: flex-start; }
.glass-bubble__text--v-center { align-items: center; }
.glass-bubble__text--v-bottom { align-items: flex-end; }
.glass-bubble__text--h-left { justify-content: flex-start; }
.glass-bubble__text--h-center { justify-content: center; }
.glass-bubble__text--h-right { justify-content: flex-end; }

/* Bandeau ombre pour la lisibilite -- oriente selon la position VERTICALE
   du texte (le "meme genre que le scrim sous la navbar") : un degrade
   sombre du cote ou le texte se trouve (haut/bas), et une bande centrale
   (degrade haut + degrade bas) si le texte est centre. Positionne sur le
   container (.glass-bubble__text), pas sur le <p> : un enfant absolu
   avec left/right:0 se cale sur la boite de PADDING du container, donc
   ignore ses 5% de padding et prend bien toute la largeur de la
   vignette (contrairement a inset:0 sur le <p>, limite a la largeur du
   texte). */
.glass-bubble__text--v-top::before,
.glass-bubble__text--v-bottom::before,
.glass-bubble__text--v-center::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

/* Scrim sombre (pas clair) + texte blanc -- retour utilisateur : "les
   textes devraient etre en blanc, tout comme le carrousel des gammes"
   -- meme traitement que le hero (.hero__overlay/.catalog-hero__overlay,
   rgba(0,0,0,0.32)), uniforme sur les 2 carrousels de bulles de la home
   (categorie ET slots manuels). Anciennement blanc/noir uniquement pour
   les vignettes de sous-categorie (.glass-bubble--category) -- generalise
   ici a toutes les bulles. */
.glass-bubble__text--v-top::before {
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 32%);
}

.glass-bubble__text--v-bottom::before {
  top: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 32%);
}

.glass-bubble__text--v-center::before {
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 35%, rgba(0, 0, 0, 0.32) 65%, rgba(0, 0, 0, 0) 100%);
}

.glass-bubble__text p {
  position: relative;
  margin: 0;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.5;
}

.glass-bubble__text--h-left p { text-align: left; }
.glass-bubble__text--h-center p { text-align: center; }
.glass-bubble__text--h-right p { text-align: right; }

/* Mode "Produit" du carrousel (voir index.tpl, $slide.productAuto) : mise
   en page fixe, nom en bas a gauche / prix en bas a droite -- pas de
   vpos/hpos ici (pas configurable dans ce mode). Meme scrim bas que
   .glass-bubble__text--v-bottom pour la lisibilite. */
.glass-bubble__product {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 5%;
  box-sizing: border-box;
}

.glass-bubble__product::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Scrim SOMBRE (pas clair) -- retour utilisateur : texte en blanc sur
     la photo, il faut donc assombrir le bas de la photo pour le
     contraste, meme logique que .glass-bubble__text--v-bottom::before. */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 32%);
}

.glass-bubble__product-name,
.glass-bubble__product-price {
  position: relative;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.3;
}

.glass-bubble__product-price {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}

/* Ligne de pagination : fleches precedent/suivant COLLEES aux points
   (retour utilisateur -- "hyper loin sur les cotes, pas juste a cote
   des boutons" : le 1er essai etirait les points sur toute la largeur
   du carrousel via flex:1, ce qui envoyait les fleches aux 2 extremites
   au lieu de les coller au groupe de points, etroit). width:fit-content
   + margin:auto -- toute la ligne (fleches+points) ne prend que la
   largeur de son contenu, centree dans le carrousel. */
.bubble-carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto;
  padding: 0 0 8px;
}

/* Points de pagination sous le carrousel (retour utilisateur -- meme
   principe que le carrousel "Gammes pensees" de la page "Decouvrir") :
   generes en JS (initBubbleCarousel), un par bulle. Barres (pas des
   points ronds) : plus faciles a viser/cliquer, et la largeur de la
   barre active donne un repere visuel net. */
.bubble-carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bubble-carousel__dot {
  width: 24px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.2s ease, width 0.3s ease;
}

.bubble-carousel__dot.is-active {
  width: 40px;
  background: #2323e0;
}

/* Fleches -- fond clair (page/section blanche ici, pas une photo comme
   le bloc 1 de "Decouvrir") : contour/icone gris assorti aux points
   inactifs, passe au bleu de la marque au survol -- pas de glass/blur,
   inutile sans photo derriere. */
.bubble-carousel__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: rgba(0, 0, 0, 0.55);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.bubble-carousel__arrow:hover {
  border-color: #2323e0;
  color: #2323e0;
}

@media (max-width: 700px) {
  /* Tailles de .hero__title/.hero__subtitle desormais fluides (clamp),
     voir plus haut -- seul ce qui n'est pas couvert par le clamp reste
     ici. */
  .hero__subtitle {
    margin-top: 16px;
  }

  /* Les paddings desktop (90px/100px sur le track, 40px sur la section)
     menagent de la place pour les fleches + l'agrandissement au survol
     des bulles voisines -- inutile sur mobile (fleches masquees
     ci-dessus, pas de survol tactile). Beaucoup trop d'espace vide
     autour du carrousel sinon. */
  .bubble-carousel {
    padding: 16px 0;
  }

  .bubble-carousel__track {
    /* --bc-edge aligne sur le gap mobile (20px, voir regle desktop pour
       le detail padding/scroll-padding). */
    padding: 24px var(--bc-edge) 32px;
    gap: 20px;
    --bc-edge: 20px;
  }
}

/* blockwishlist injecte des modales Vue (add-to-wishlist, create, delete...) dans
   le hook displayFooter. Sans le JS/Vue de PrestaShop, leurs directives ":class"
   restent inertes et le fond "modal-backdrop" reste affiche en plein ecran,
   bloquant les clics. On masque ces elements, inutilises sur cette page custom. */
.wishlist-add-to,
.wishlist-modal,
.modal-backdrop {
  display: none !important;
}

/* Bandeau newsletter (ps_emailsubscription, hook displayFooterBefore) masque. */
.block_newsletter {
  display: none !important;
}

/* ---------- FOOTER (hooks du theme parent, redresse en dark) ---------- */

.site-footer {
  position: relative;
  z-index: 2;
  background: transparent;
  color: #000000;
  padding: 60px 5vw 100px;
  pointer-events: auto;
  box-sizing: border-box;
}

/* Tout le footer dans une seule "bulle" liquid glass, meme recette que
   la nav/le bandeau de reassurance. */
.site-footer__bubble {
  max-width: 1300px;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  overflow: hidden;
}

.site-footer a,
.site-footer button,
.site-footer input {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.site-footer .footer-container {
  background: transparent;
  padding-bottom: 24px;
}

/* Le correctif du fond blanc de l'accordeon mobile (<ul class="collapse">)
   vit dans product.css, qui charge sur TOUTES les pages (y compris la
   home) -- contrairement a custom.css, charge uniquement sur index. */

.site-footer a,
.site-footer .myaccount-title a,
.site-footer .block-contact-title {
  color: rgba(0, 0, 0, 0.75);
}

.site-footer a:hover {
  color: #2323e0;
}

.site-footer h4,
.site-footer .h4,
.site-footer h3,
.site-footer .h3,
.site-footer .col-title,
.site-footer strong,
.site-footer p,
.site-footer .title,
.site-footer .title span,
.site-footer a,
.site-footer span,
.site-footer .block-contact,
.site-footer #contact-infos {
  color: #000000 !important;
}

.site-footer hr {
  border-color: rgba(255, 255, 255, 0.15);
}

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  padding-left: 5vw;
  padding-right: 5vw;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-copyright {
  margin: 0;
  font-size: 12px;
  text-align: left;
  color: rgba(0, 0, 0, 0.5);
}

/* Meme logo que la navbar (recette compacte "cote a cote"), reduit pour
   garder les proportions dans le coin bas-droit du pied de page. */
.footer-logo {
  flex-shrink: 0;
  transform: scale(0.85);
  transform-origin: bottom right;
}

@media (max-width: 700px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-copyright {
    text-align: center;
  }

  .footer-logo {
    transform-origin: center bottom;
  }
}

@media (max-width: 900px) {
  .hero__content {
    max-width: 90%;
  }

  /* .hero__title/.hero__subtitle : voir font-size: clamp(...) plus haut,
     fluide sur toute la plage, plus besoin de palier ici. */
  .hero__subtitle {
    max-width: 100%;
  }

  .nav__links {
    gap: 16px;
  }

  /* En desktop, les 4 photos debordent volontairement du panneau
     (offsets negatifs importants, -14% a -37%) pour un effet "collage"
     -- sur un ecran etroit, ces memes offsets les poussaient hors du
     viewport (c/d carrement masquees, b quasi invisible). Plutot que de
     n'en garder que 2, on garde les 4 mais reorganisees en 2 photos /
     texte / 2 photos (ordre visuel pilote par `order`, le DOM reste
     a/b/c/d/panel -- pas de changement de template) via une grille
     fluide (meme logique -- minmax(0, 1fr) -- que .gamme-grid) : jamais
     de debordement quelle que soit la resolution. Un leger decalage
     vertical alterne (quinconce) sur 2 des 4 photos evite l'effet
     "grille" trop sage. */
  .about-teaser {
    flex-direction: column;
    gap: 32px;
    padding: 60px 6vw;
  }

  .about-teaser__stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 8px (pas 16) : les photos etaient trop loin de la bulle de texte
       (retour utilisateur) -- combine avec la marge negative sur
       .about-teaser__panel plus bas pour les rapprocher encore plus. */
    gap: 8px;
    max-width: 480px;
  }

  .about-teaser__photo {
    position: static;
    z-index: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    opacity: 1;
  }

  .about-teaser__photo--a {
    order: 1;
  }

  .about-teaser__photo--b {
    order: 2;
    /* Quinconce : b descend d'un cran par rapport a a. 6% (pas 15) :
       l'offset original creait un trop grand ecart avec la bulle de
       texte juste en-dessous (retour utilisateur, "photo trop basse"). */
    margin-top: 6%;
  }

  .about-teaser__panel {
    order: 3;
    grid-column: 1 / -1;
    /* Marge negative : rapproche encore la bulle des photos au-dessus/
       en-dessous, quitte a ce qu'elles passent legerement sous elle --
       z-index:2 (deja sur .about-teaser__panel, voir plus haut) la garde
       bien au-dessus dans ce cas. */
    margin: -18px 0;
  }

  .about-teaser__photo--c {
    order: 4;
    /* Alterne le sens du decalage par rapport a la 1ere paire (c descend
       au lieu de d), pour ne pas juste repeter le meme motif 2 fois. 6%
       (pas 15) : meme raison que .about-teaser__photo--b -- restait trop
       loin de la bulle au-dessus (retour utilisateur). */
    margin-top: 6%;
  }

  .about-teaser__photo--d {
    order: 5;
  }
}

/* ---------- Tunnel de commande : nettoyage de residus du theme parent ---------- */
/* Retour utilisateur (etape "Mode de livraison") : un petit trait moche
   sous chaque titre d'etape, et une bordure noire/grise a droite des
   options de transporteur -- 2 residus du theme parent (theme.css),
   pensees pour son ancienne mise en page (colonnes cote a cote), plus
   pertinents avec le style "liquid glass" du site. Voir
   .checkout-step .step-title et .delivery-options>.row dans
   themes/classic/assets/css/theme.css. */
/* Specificite exacte de la regle parent (body#checkout section.checkout-step
   .step-title, voir theme.css) : necessaire pour gagner, un simple
   ".checkout-step .step-title" perd face a l'ID #checkout du parent. */
body#checkout section.checkout-step .step-title,
.checkout-step .step-title {
  border-bottom: none;
}

body#checkout section.checkout-step.-current + section.checkout-step .step-title,
.checkout-step.-current + .checkout-step .step-title {
  border-top: none;
}

body#checkout section.checkout-step .delivery-options > .row,
.delivery-options > .row {
  border-right: none;
}

/* Retour utilisateur : en etat replie/complete, la coche + le titre
   d'un cote et "modifier" de l'autre ne sont pas centres verticalement
   -- le theme parent alterne entre float:right et un simple flux bloc
   selon l'etat (-current/-complete/-reachable), jamais aligne au
   centre. Flexbox uniformise les 3 etats d'un coup (float est de toute
   facon ignore sur un enfant flex, inutile de le neutraliser ailleurs). */
body#checkout section.checkout-step .step-title,
.checkout-step .step-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Le theme parent pose padding-bottom:1.25rem SANS padding-top
     equivalent (et un padding-top:1.25rem seulement quand cette etape
     suit une etape -current) -- meme avec align-items:center, une boite
     avec du padding asymetrique haut/bas centre son contenu plus haut
     que prevu visuellement. Normalise a un padding vertical egal, quel
     que soit l'etat/la position de l'etape. */
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

body#checkout section.checkout-step.-reachable.-complete h1 .step-edit,
body#checkout section.checkout-step .step-title .step-edit,
.checkout-step .step-title .step-edit {
  margin-left: auto !important;
}

/* Bouton(s) injecte(s) par un module transporteur dans le contenu
   "extra" d'une option de livraison (ex. "Select Service Point" de
   Mondial Relay/Sendcloud) -- non stylable au cas par cas (HTML fourni
   par le module, pas par notre theme), donc reskin generique de TOUT
   bouton qui atterrit ici pour rester dans la DA du site (meme recette
   pleine que #product .btn.add-to-cart) plutot que le style Bootstrap
   par defaut du theme parent. */
.carrier-extra-content button,
.carrier-extra-content .btn,
.carrier-extra-content a.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.9), rgba(35, 35, 224, 0.75));
  color: #f2ede2;
  font-weight: 600;
  padding: 12px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carrier-extra-content button:hover,
.carrier-extra-content .btn:hover,
.carrier-extra-content a.btn:hover {
  transform: scale(1.03);
  box-shadow: 0 14px 30px -10px rgba(35, 35, 224, 0.5);
  color: #f2ede2;
}