/* Styles propres a la page "A propos" (templates/cms/page.tpl) --
   .catalog-hero/.catalog-breadcrumb et le reste du skin partage (nav,
   boutons pill, glass panels, .about-teaser__title-dot) viennent de
   product.css/custom.css, pas dupliques ici. @keyframes bubble-float
   par contre EST redefini ici (pas importe de custom.css, qui n'est
   charge que sur la home) : utilise par .about-chapter__photo/__panel
   et .about-process__step plus bas. */

/* --bc-rot (0deg par defaut) : rotation statique des photos du collage
   (voir .about-chapter__photo--1a etc.) -- l'animation redefinissant
   "transform" a chaque keyframe, la rotation doit passer par cette
   variable (lue ci-dessous) plutot qu'un transform:rotate() statique,
   sinon elle serait ecrasee des le premier tick. Le "scroll interne"
   qui avait fait desactiver ce flottement etait en realite du a
   overflow-x:hidden sur .about-chapter (corrige depuis, voir plus bas
   -- overflow-x:clip), pas a l'animation elle-meme. */
/* Va-et-vient symetrique (moitie vers le haut, moitie vers le bas)
   plutot qu'un offset uniquement vers le haut -- meme raison que la
   copie de ce keyframe dans custom.css (bloc "A propos" de la home). */
@keyframes bubble-float {
  0%, 100% { transform: rotate(var(--bc-rot, 0deg)) translateY(0); }
  25% { transform: rotate(var(--bc-rot, 0deg)) translateY(-6px); }
  75% { transform: rotate(var(--bc-rot, 0deg)) translateY(6px); }
}

/* .about-page = LE <main> qui contient tout (bulle/nav/header/hero
   compris, tous full-bleed) -- aucune contrainte de largeur ici. La
   largeur max + l'empilement en colonne avec gap vivent sur
   .about-page__content (chapitres/process/CTA uniquement). */
.about-page {
  position: relative;
  z-index: 1;
}

.about-page__content {
  /* 1300px + calc() : aligne sur la meme largeur de contenu que le
     footer/#main/.wide-banner (voir chantier d'alignement general) --
     padding propre (pas sur un parent), donc calc() ajoute ses 2*5vw
     "en plus" du plafond pour que la zone de CONTENU (une fois le
     padding retire) tombe pile sur 1300px, meme technique deja utilisee
     pour aligner .bubble-carousel-intro sur .wide-banner__intro. */
  max-width: calc(1300px + 10vw);
  margin: 0 auto;
  padding: 0 5vw 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 5vw, 60px);
}

/* Page "Decouvrir" specifiquement : le CTA final (.about-cta) est le
   SEUL enfant de .about-page__content ici (pas une suite de chapitres
   comme sur "A propos") -- juste apres un .discover-block qui n'a que
   sa fine bordure du haut comme separation (retour utilisateur :
   pas assez d'air entre le dernier bloc et le CTA). Scope a
   .discover-page pour ne pas toucher "A propos". */
.discover-page .about-page__content {
  padding-top: clamp(40px, 6vw, 80px);
}

/* .catalog-hero est le premier enfant de .about-page (voir page.tpl) :
   un padding-top sur .about-page pousserait le hero LUI-MEME vers le
   bas (espace entre la nav et le hero), pas l'espace voulu entre le
   hero et le premier chapitre. On cible donc le hero directement. */
.about-page > .catalog-hero {
  margin-bottom: clamp(40px, 6vw, 80px);
}

/* -- Histoire : "collage flottant" ----------------------------------
   Meme recette que le bloc "A propos" de la home (.about-teaser) :
   un panel de texte au centre + des photos decoratives disposees de
   facon anarchique autour (offsets negatifs qui debordent + legere
   rotation), le tout en flottaison continue (@keyframes bubble-float,
   voir plus bas). overflow-x:hidden + largeur 100vw : les photos
   debordent volontairement jusqu'au bord de l'ecran sans re-creer de
   scrollbar horizontale (meme piege/solution que .about-teaser). */

.about-chapter {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* "clip" et non "hidden" : le spec CSS force *systematiquement*
     l'autre axe a devenir "auto" des qu'un axe est a "hidden" (ou
     "scroll"/"auto") et l'autre a "visible" -- meme ecrit explicitement,
     overflow-y:visible aurait quand meme ete recalcule en "auto" a cote
     d'un overflow-x:hidden. Resultat concret observe : le bloc devenait
     une zone scrollable qui clippait aussi les photos debordant
     verticalement (offsets negatifs importants), d'ou le "scroll interne
     bizarre". "clip" echappe a cette regle de pairage (il ne cree pas de
     conteneur de defilement), donc l'axe vertical reste vraiment visible. */
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 4vw, 60px) 8vw;
  box-sizing: border-box;
}

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

.about-chapter__photo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 28px;
  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);
  /* backwards : applique le 1er keyframe (donc la rotation --bc-rot)
     des le chargement, avant meme que le delai ne s'ecoule. */
  animation: bubble-float 6s ease-in-out infinite backwards;
}

/* Recadrage pan/zoom pilote par le back-office (.js-crop-photo, voir
   custom.js applyCropTransforms) : PAS d'object-fit:cover ici -- le JS
   calcule lui-meme l'echelle "couverture" depuis la taille naturelle de
   la photo et applique translate()+scale(), meme technique que
   .catalog-hero__media/.wide-banner__panel/.glass-bubble__img. */
.about-chapter__photo .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.about-chapter__panel {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 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 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

/* Chapitre 1 (deux passions) : photos regroupees a gauche/en haut.
   Duree ET delai varies (pas juste le delai) : avec une duree
   identique, un simple decalage de phase reste percu comme "synchro"
   (le rapport entre les photos ne change jamais) -- des durees
   differentes desynchronisent vraiment le mouvement au fil du temps. */
.about-chapter__photo--1a {
  width: clamp(300px, 30vw, 420px);
  height: clamp(360px, 36vw, 500px);
  left: -16%;
  top: -28%;
  --bc-rot: -6deg;
  animation-duration: 5.5s;
}

.about-chapter__photo--1b {
  width: clamp(220px, 22vw, 320px);
  height: clamp(220px, 22vw, 320px);
  left: -6%;
  bottom: -32%;
  z-index: 0;
  --bc-rot: 5deg;
  animation-duration: 7.2s;
  animation-delay: 0.4s;
}

.about-chapter__photo--1c {
  width: clamp(250px, 25vw, 340px);
  height: clamp(300px, 30vw, 400px);
  right: -20%;
  top: -18%;
  --bc-rot: 3deg;
  animation-duration: 6.4s;
  animation-delay: 1.1s;
}

/* Chapitre 2 (Zola) : positions grosso modo miroir du chapitre 1, pour
   alterner visuellement d'un bloc a l'autre. */
.about-chapter__photo--2a {
  width: clamp(300px, 30vw, 420px);
  height: clamp(360px, 36vw, 500px);
  right: -16%;
  top: -26%;
  --bc-rot: 6deg;
  animation-duration: 6.8s;
  animation-delay: 0.2s;
}

.about-chapter__photo--2b {
  width: clamp(220px, 22vw, 320px);
  height: clamp(220px, 22vw, 320px);
  right: -6%;
  bottom: -34%;
  z-index: 0;
  --bc-rot: -5deg;
  animation-duration: 5.8s;
  animation-delay: 0.7s;
}

.about-chapter__photo--2c {
  width: clamp(240px, 24vw, 330px);
  height: clamp(290px, 29vw, 390px);
  left: -20%;
  top: -16%;
  --bc-rot: -4deg;
  animation-duration: 7.6s;
  animation-delay: 1.3s;
}

/* Chapitre 3 (naissance) : photos plus discretes, en retrait derriere
   le panel (z-index:0), pour rester dans l'esprit "collage" sans
   concurrencer visuellement ce dernier chapitre (voulu plus sobre). */
.about-chapter--birth .about-chapter__photo--3a {
  width: clamp(240px, 24vw, 320px);
  height: clamp(240px, 24vw, 320px);
  left: -10%;
  top: -25%;
  z-index: 0;
  opacity: 0.9;
  --bc-rot: -8deg;
  animation-duration: 6.1s;
  animation-delay: 0.9s;
}

.about-chapter--birth .about-chapter__photo--3b {
  width: clamp(230px, 23vw, 310px);
  height: clamp(280px, 28vw, 370px);
  right: -10%;
  bottom: -24%;
  z-index: 0;
  opacity: 0.9;
  --bc-rot: 7deg;
  animation-duration: 7.9s;
  animation-delay: 0.3s;
}

@media (max-width: 900px) {
  /* Meme raisonnement que .about-teaser sur mobile (voir custom.css) :
     les offsets negatifs importants poussent les photos hors du
     viewport sur un ecran etroit -- on n'en garde qu'une, modeste et
     pleinement visible, par chapitre. */
  .about-chapter__photo--1b,
  .about-chapter__photo--1c,
  .about-chapter__photo--2b,
  .about-chapter__photo--2c,
  .about-chapter--birth .about-chapter__photo--3b {
    display: none;
  }

  .about-chapter__photo--1a {
    width: clamp(120px, 32vw, 170px);
    height: clamp(150px, 38vw, 210px);
    left: 0;
    top: -12%;
    --bc-rot: -4deg;
  }

  .about-chapter__photo--2a {
    width: clamp(120px, 32vw, 170px);
    height: clamp(150px, 38vw, 210px);
    right: 0;
    top: -12%;
    --bc-rot: 4deg;
  }

  .about-chapter--birth .about-chapter__photo--3a {
    width: clamp(100px, 28vw, 150px);
    height: clamp(100px, 28vw, 150px);
    left: 0;
    top: -14%;
  }
}

.catalog-hero__tagline {
  margin: 10px 0 0;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.75);
}

/* Texte a l'interieur de .about-chapter__panel (chapitres 1 et 2). */
.about-story__title {
  margin: 0 0 20px;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

.about-story__text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.82);
}

.about-story__text:last-child {
  margin-bottom: 0;
}

/* -- Naissance de la marque (chapitre 3) : panel centre, sans photo,
   pour marquer une rupture visuelle apres les deux chapitres image+
   texte et mettre en avant le nom/la signature de la marque. -------- */

.about-birth {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px);
  border-radius: 32px;
  text-align: center;
  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);
}

.about-birth .about-story__eyebrow {
  text-align: center;
}

.about-birth__title {
  margin: 0 0 20px;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
}

.about-birth__text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.85);
}

.about-birth__signature {
  margin: 24px 0 0;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-size: 19px;
  color: #000000;
}

/* -- Process --------------------------------------------------------- */

.about-process__intro {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}

.about-process__title {
  margin: 0 0 12px;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: #000000;
}

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

.about-process__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* align-items:center (pas le stretch par defaut d'une grille) : les
     cartes gardent des hauteurs differentes (voir le padding vertical
     varie par carte plus bas) mais restent centrees dans la rangee,
     plutot que "collees" en haut ou en bas. */
  align-items: center;
  gap: 28px;
}

/* Meme flottaison que le bandeau de rassurance de la home
   (.trust__badge), decalee par carte pour ne pas etre synchrone.
   Padding fixe et identique pour toutes les cartes (pas de variation
   artificielle par nth-child) : leur hauteur varie naturellement selon
   la longueur du texte de chacune, et reste centree dans la rangee
   grace a align-items:center sur .about-process__steps. */
.about-process__step {
  position: relative;
  padding: 32px 26px;
  border-radius: 24px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: bubble-float 4.5s ease-in-out infinite;
}

.about-process__number {
  display: block;
  margin-bottom: 14px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(35, 35, 224, 0.85);
}

.about-process__step svg {
  display: block;
  margin: 0 auto 14px;
}

.about-process__step-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #000000;
}

.about-process__step-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.72);
}

/* -- CTA finale -------------------------------------------------------- */

/* Banniere CTA finale : photo pleine largeur + degrade + panel de texte
   centre par-dessus (comme un mini hero), plutot qu'un simple lien --
   voir about-cta__button plus bas pour le bouton lui-meme. */
.about-cta {
  position: relative;
  min-height: 380px;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.35);
}

.about-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Recadrage pan/zoom pilote par le back-office (.js-crop-photo, voir
   custom.js applyCropTransforms) -- meme technique que .about-chapter__photo
   plus haut (pas d'object-fit:cover, le JS gere l'echelle "couverture"). */
.about-cta__media .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

/* Meme filtre sombre que le hero de la home (.hero__overlay) : calque
   semi-transparent au-dessus de la photo pour lisibilite du texte blanc. */
.about-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.about-cta__content {
  position: relative;
  z-index: 1;
  max-width: 520px;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.about-cta__title {
  margin: 0;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  color: #ffffff;
}

/* Point bleu signature (meme recette que .hero-dot/.about-teaser__title-dot
   ailleurs sur le site) : la regle vivait dans custom.css, jamais chargee
   sur cette page CMS (voir cms/page.tpl, qui ne charge que product.css/
   about.css) -- le <span> existait deja dans le HTML mais restait sans
   style, donc invisible (retour utilisateur). Couleur fixe (pas
   currentColor) : le titre est blanc sur ce bandeau (photo sombre), le
   point doit rester bleu marque quel que soit le fond. */
.about-cta__title .about-teaser__title-dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: #2323e0;
}

.about-cta__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* .about-cta__text est parfois un <div> enveloppant du HTML riche deja
   pourvu de ses propres <p> (voir page "Decouvrir", cms/page.tpl) --
   neutralise leur marge par defaut du navigateur pour eviter un espace
   en trop par rapport a l'usage <p> simple d'origine (page "A propos"). */
.about-cta__text p {
  margin: 0;
}

/* Meme recette que .hero__cta ("Decouvrir") sur la home : glass blanc
   au repos, bascule au bleu de marque au survol -- pas bleu de base. */
.about-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 16px 34px;
  border-radius: 999px;
  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: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  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: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.about-cta__button span {
  transition: transform 0.2s ease;
}

.about-cta__button:hover {
  color: #ffffff;
  transform: scale(1.05);
  background: linear-gradient(180deg, rgba(35, 35, 224, 0.75), rgba(35, 35, 224, 0.55));
}

.about-cta__button:hover span {
  transform: translateX(3px);
}

/* -- Pages CMS generiques (mentions legales, livraison, CGV...) ------ */

/* .cms-page = LE <main> qui contient tout (hero, bulle, contenu) -- pas
   de contrainte de largeur ici (elle vivait avant sur ce meme element
   quand il ne contenait QUE le panel de contenu ; deplacee sur
   .cms-page__panel maintenant que .catalog-hero doit rester full-bleed
   a l'interieur de ce meme bloc). */
.cms-page {
  position: relative;
  z-index: 1;
}

.cms-page__panel {
  max-width: 900px;
  margin: 60px auto 120px;
  padding: clamp(28px, 4vw, 48px);
  box-sizing: border-box;
  border-radius: 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 20px 50px -15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

.cms-page__title {
  margin: 0 0 24px;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: #000000;
}

.cms-page__content {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.85);
}

/* Le theme parent (classic) pose un "p { color: #7a7a7a; }" global --
   plus specifique qu'un simple heritage depuis .cms-page__content (une
   regle posee directement sur l'element, meme peu specifique, gagne
   toujours sur une valeur heritee du parent). Cible ici directement
   p/ul/li avec une specificite plus forte pour gagner proprement, sans
   avoir besoin de !important. */
.cms-page__content p,
.cms-page__content ul,
.cms-page__content li {
  color: inherit;
}

.cms-page__content a {
  color: #6f7fff;
}

/* ---------- Page "Decouvrir" (hero style home + chapitres plein
   ecran : image centrale liquid glass + bulle de texte superposee,
   meme recette que .about-teaser__panel -- retour utilisateur)
   ---------- */

/* Scroll NATUREL : aucun verrou/conteneur de scroll dedie -- suit le
   flux normal de la page, comme .about-page/.cms-page. Le hero
   (.hero/.hero__right/...) et la bulle (.about-teaser__panel/__title/
   __text) reutilisent tel quel le CSS de la home, voir custom.css
   charge en plus sur cette page precise (cms/page.tpl). */
.discover-page {
  position: relative;
}

.discover-page__blocks {
  position: relative;
}

/* Lisibilite du texte pose sur les photos/videos de cette page (hero,
   boutons du bloc 1, carrousel du bloc 2, slider du bloc 3, bandeau
   final) -- retour utilisateur : un calque sombre semi-transparent
   au-dessus du media (comme .hero__overlay/.about-cta__overlay, deja en
   place sur le hero et le bandeau final) fait la vraie difference,
   contrairement a un filter CSS sur le media lui-meme (assombrit/
   desature aussi les couleurs propres de la photo, sans vraiment
   ameliorer le contraste du texte). Le hero et le bandeau final ont deja
   leur propre calque (.hero__overlay/.about-cta__overlay, meme
   rgba(0,0,0,0.32)) -- .discover-photo-overlay couvre les 3 blocs qui
   n'en avaient pas encore (voir cms/page.tpl, un par .discover-block__media
   / .wide-banner__panel-media). */
.discover-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* Chaque bloc occupe une pleine page (min-height, pas height, pour
   rester en scroll naturel -- un bloc grandit si son texte est long,
   au lieu d'un decoupage force en tranches de 100vh pile/scroll-snap),
   image centrale + bulle. */
.discover-block {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* Titre SORTI de la bulle glass (retour utilisateur), affiche
   au-dessus du cadre image -- meme taille/police que dans la bulle
   (.about-teaser__title, reprise telle quelle), juste recentre et
   espace du cadre en tant que titre autonome. Double classe : gagne
   face a .about-teaser__title (custom.css, charge apres -- meme
   raison/technique que .discover-block__body plus bas). */
.discover-block__title.about-teaser__title {
  /* Pas de max-width (retour utilisateur) : le titre a deja ses propres
     retours a la ligne manuels (nl2br, voir getDiscoverPageContent) --
     une largeur contrainte en plus forcait un 3e retour a la ligne non
     voulu. Laisse-le prendre la largeur dont il a besoin (jusqu'a la
     largeur du cadre image en dessous). */
  max-width: min(1260px, 92vw);
  margin: 0 0 28px;
  text-align: center;
  /* Retour utilisateur : aussi gros que les titres de section de la
     home ("Nos gammes", "Nouveautes" -- .bubble-carousel-intro__title/
     .wide-banner__intro), pas la taille plus modeste de la bulle
     "A propos" reprise par defaut via .about-teaser__title. */
  font-size: clamp(24px, 3vw, 50px);
  line-height: 1.3;
}

/* Cadre de l'image : 1260x680 sur desktop (retour utilisateur), point
   d'ancrage relatif pour la bulle superposee (.discover-block__body,
   position:absolute). width:min(...) + aspect-ratio : ne depasse
   jamais 1260px ni 92vw, garde toujours ce ratio en se reduisant. */
.discover-block__frame {
  position: relative;
  width: min(1260px, 92vw);
  aspect-ratio: 1260 / 680;
}

/* Photo/video reelle, recadrable pan/zoom depuis l'admin (retour
   utilisateur : "notre bloc d'insertion + recadrage", meme mecanisme
   que le hero/la page "A propos") -- cadre liquid glass (coins
   arrondis, bordure claire, ombre), meme esprit que .about-teaser__photo.
   Meme recette que .catalog-hero__media/.hero__right (product.css/
   custom.css) pour le recadrage : .crop-wrap n'est qu'un point
   d'ancrage centre, PAS un cadre dimensionne -- c'est
   .discover-block__media qui porte la taille reelle + le
   overflow:hidden. Le JS (applyCropTransforms, voir custom.js) calcule
   lui-meme l'echelle de couverture depuis la taille NATURELLE de
   l'image/video. */
.discover-block__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 32px;
  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);
}

.discover-block__media .crop-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

/* .about-teaser__text (custom.css) est en gris (rgba(0,0,0,0.8)) --
   voulu sur la home (texte a cote de photos claires), mais retour
   utilisateur ici : "on veut du noir". Double classe (voir plus bas
   pour la meme raison) : gagne face a custom.css, charge apres. */
.discover-block__text.about-teaser__text {
  color: #000000;
}

/* Le texte vient de TinyMCE, deja enveloppe dans son propre <p> (voir
   $block.text) -- ce <p> a une couleur EXPLICITE posee par le theme
   parent (regle globale "p { color: #7a7a7a; }", mal ecrite avec une
   virgule qui la rend non scopee) qui gagne sur l'heritage du noir
   pose juste au-dessus. Meme technique deja utilisee pour
   .cms-page__content plus haut dans ce fichier. */
.discover-block__text.about-teaser__text p {
  color: inherit;
}

/* La bulle EST .about-teaser__panel (meme classe posee directement
   dans le template, voir cms/page.tpl) -- .discover-block__body ne
   sert plus qu'a la positionner en overlay sur l'image (au lieu
   de sa position normale dans le flux, a cote des photos, sur le bloc
   "A propos" de la home). Flotte a droite, au niveau du premier tiers
   de l'image (retour utilisateur -- "top" calcule et pose en JS, voir
   cms/page.tpl, car le parent DOM est .discover-block, la section
   entiere avec son titre au-dessus, pas le cadre de l'image :
   impossible de viser "1/3 de l'image" en CSS pur sans connaitre la
   hauteur du titre, variable selon le texte). */
.discover-block__body {
  z-index: 2;
  /* Reduite (retour utilisateur : 560px paraissait enorme) -- une bulle
     qui ne flotte plus que sur le premier tiers de l'image, a droite,
     n'a plus besoin d'autant de largeur qu'une bulle centree. */
  width: min(360px, 80%);
}

/* .about-teaser__panel (custom.css) a un padding genereux (56px 48px),
   pense pour un panel qui contient aussi un titre + un bouton CTA. Ici
   le titre est sorti de la bulle (voir plus haut) et il n'y a pas de
   bouton -- ne reste que le texte, le meme padding parait excessif
   (retour utilisateur). Double classe : gagne face a custom.css,
   charge apres. */
.discover-block__body.about-teaser__panel {
  /* .about-teaser__panel (custom.css) pose son propre "position: relative"
     et charge APRES ce fichier sur cette page -- a specificite egale (1
     classe), il ecraserait le "position: absolute" ci-dessus pose en
     single-classe. Repose ici, en double-classe, pour etre sur de gagner. */
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  left: auto;
  /* "top" reel pose en JS (style.top, px), voir script en bas de
     cms/page.tpl -- valeur de secours ici au cas ou le JS n'a pas
     encore tourne (flash initial) ou est desactive. */
  top: 12%;
  bottom: auto;
  padding: 28px 32px;
  /* .about-teaser__panel (custom.css) porte une animation de flottement
     (bubble-float) qui anime "transform: translateY(...)" -- ecraserait
     la position ci-dessus (une animation remplace entierement le
     transform, ne le compose pas). Desactivee ici. */
  animation: none;
  /* Meme apparition que le titre/cadre (.discover-block__title,
     .discover-block__frame juste en dessous : opacity + translateY(24px),
     0.7s ease), juste DECALEE dans le temps (retour utilisateur -- 0.3s
     de delai supplementaire, pour arriver un peu apres l'image). */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

.discover-block.is-visible .discover-block__body {
  opacity: 1;
  transform: translateY(0);
}

/* Apparition en fondu/glissement au scroll (classe posee en JS via
   IntersectionObserver, voir cms/page.tpl) -- titre ET cadre (photo).
   La bulle (.discover-block__body) a SA PROPRE apparition retardee,
   definie juste au-dessus avec le reste de ses styles. */
/* Scope a .discover-block (pas une regle globale sur .discover-block__title
   etc.) : ce carrousel (.discover-block__carousel/__dots) est reutilise
   TEL QUEL sur la home (bandeau "Nos creations dans leur element", retour
   utilisateur), qui n'a pas de .discover-block ni de reveal au scroll --
   sans ce scope, la regle "opacity:0" s'appliquait quand meme (elle ne
   demandait pas cet ancetre), mais la regle "opacity:1" qui la revele,
   elle, ne matchait jamais hors de .discover-block : le carrousel restait
   invisible en permanence sur la home ("j'ai plus rien"). */
.discover-block .discover-block__title,
.discover-block .discover-block__frame,
.discover-block .discover-block__carousel,
.discover-block .discover-block__pagination {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.discover-block.is-visible .discover-block__title,
.discover-block.is-visible .discover-block__frame,
.discover-block.is-visible .discover-block__carousel,
.discover-block.is-visible .discover-block__pagination {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Bloc 1 "Impression a la demande" : boutons DANS l'image ---------- */
/* Retour utilisateur : "plus simple" qu'une bulle/un accordeon externe --
   3 boutons directement dans le cadre image, qui ne deplient rien mais
   changent la photo de fond (voir .discover-block__switch-photo). */

/* Empilees en position absolute (comme .crop-wrap normalement, juste
   plusieurs a la fois ici) : chacune deja recadree par
   applyCropTransforms au chargement (voir commentaire JS, cms/page.tpl),
   seule .is-active est visible -- changer de bouton bascule juste
   l'opacite, pas le "src", pour ne jamais perdre ce recadrage. */
.discover-block__switch-photo {
  /* position/top/left/transform (centrage) deja poses par la regle
     generique ".discover-block__media .crop-wrap" (about.css, plus haut) --
     cette classe n'ajoute que le crossfade. */
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.discover-block__switch-photo.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Grand titre par photo (retour utilisateur), en haut a gauche du
   cadre -- meme logique de crossfade que les photos (une seule
   .is-active a la fois, meme JS/toggle). */
/* Titre "grand format" en haut a gauche d'une photo (retour utilisateur
   -- "toutes les images qu'on a mis aient un texte ecrit dessus, en
   haut a gauche, en gros, format titre") : classe PARTAGEE par toutes
   les photos des widgets de la page "Decouvrir" (boutons du bloc 1,
   slides du carrousel bloc 2, slider comparateur bloc 3) -- une seule
   definition de style, chaque contexte n'ajoute que son propre
   positionnement/animation par-dessus si besoin. */
.discover-photo-title {
  position: absolute;
  top: clamp(20px, 4vw, 40px);
  left: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  margin: 0;
  z-index: 2;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* Texte sous le grand titre (retour utilisateur, admin BO -- "titre sur
   le media" + "texte sous le titre") : bien plus petit/leger que le
   titre, sur sa propre ligne. */
.discover-photo-title__sub {
  display: block;
  margin-top: 8px;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 400;
  line-height: 1.4;
}

/* $slide.text (carrousel bloc 2) est du HTML brut (TinyMCE), deja
   enveloppe dans son propre <p> qui porte une couleur EXPLICITE posee
   par le theme parent (meme piege deja rencontre plusieurs fois sur
   cette page, voir .discover-block__text.about-teaser__text p plus
   haut) -- l'ecraserait sinon malgre le blanc pose au-dessus. */
.discover-photo-title p {
  margin: 0;
  color: inherit;
}

/* Variante "a droite" (retour utilisateur, slider comparateur bloc 3
   uniquement -- 2 photos partagent le meme cadre en meme temps, un
   titre en haut a gauche sur les 2 se chevaucherait). */
.discover-photo-title--right {
  left: auto;
  right: clamp(16px, 3vw, 32px);
  text-align: right;
}

/* Bloc 1 (boutons dans l'image) : liste "accordeon" verticale, CENTREE
   (retour utilisateur -- avant ancree en bas), toujours a gauche. Un
   des libelles est long ("Choix du materiau : PETG biosource"), d'ou
   la colonne plutot qu'une rangee -- deja le cas avant, conserve. */
.discover-block__switch {
  position: absolute;
  left: clamp(16px, 3vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Alignes a gauche uniquement (retour utilisateur) : pas de "right",
     pas de stretch -- chaque bouton garde sa largeur au contenu au lieu
     de s'etirer jusqu'au bord droit du cadre. */
  align-items: flex-start;
  max-width: min(380px, calc(100% - clamp(32px, 6vw, 64px)));
  gap: 12px;
}

.discover-block__switch-item {
  /* width:fit-content (pas 100%) : chaque bulle garde la largeur de
     son PROPRE contenu (retour utilisateur -- "aligne a gauche", pas
     etale sur toute la largeur), max-width:100% en filet de securite
     pour ne jamais deborder du cadre sur un tres long libelle. */
  width: fit-content;
  max-width: 100%;
}

/* Un SEUL element visuel (retour utilisateur : "je veux que le texte
   soit integre au bouton", pas un bloc separe en dessous) -- le texte
   de contenu est un <span> DANS le <button> (voir cms/page.tpl), affiche
   ou non via display:none/block. Animation (retour utilisateur) :
   UNIQUEMENT hauteur + couleur de fond -- PAS le border-radius, qui
   reste constant dans les 2 etats (voir cms/page.tpl : max-height
   pose/anime en JS, calcule via scrollHeight juste apres avoir bascule
   la classe -- le contenu est deja affiche/masque a cet instant, donc
   pas de course avec une transition CSS comme pour un ancien essai ou
   le padding s'animait EN MEME TEMPS que la hauteur mesuree). */
.discover-block__switch-toggle {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 14px 20px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 25px -12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, max-height 0.3s ease;
}

.discover-block__switch-item.is-active .discover-block__switch-toggle {
  background: #2323e0;
  border-color: #2323e0;
}

.discover-block__switch-content {
  display: none;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.discover-block__switch-item.is-active .discover-block__switch-content {
  display: block;
}

/* Fleches precedent/suivant (voir cms/page.tpl, data-switch-prev/next) :
   masquees par defaut -- UNIQUEMENT utiles en mobile, ou un seul bouton
   est affiche a la fois (voir @media plus bas). En desktop les 3
   boutons restent tous visibles, empiles, rien a "avancer/reculer". */
.discover-block__switch-arrow {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 700px) {
  .discover-block__switch {
    left: 12px;
    max-width: calc(100% - 24px);
    /* Retour utilisateur : "on garde le truc aligne en bas" -- plus de
       centrage vertical (top:50%/translateY(-50%) herites du desktop),
       ancre au bas du cadre a la place, meme esprit que l'ancienne
       version ancree en bas avant le passage en colonne centree. */
    top: auto;
    bottom: 16px;
    transform: none;
    /* Retour utilisateur : "les boutons alignes horizontalement, avec
       des petites fleches laterales pour avancer/reculer" -- la colonne
       empilee devient une rangee ‹ bouton actif › ; les 2 boutons
       inactifs sont masques (voir juste en dessous), pas juste
       retrecis, pour ne jamais faire deborder la rangee. */
    flex-direction: row;
    align-items: center;
    width: calc(100% - 24px);
  }

  .discover-block__switch-arrow {
    display: flex;
  }

  .discover-block__switch-item {
    /* Prend toute la place restante entre les 2 fleches (au lieu de
       fit-content, pense pour la colonne desktop). */
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }

  .discover-block__switch-item:not(.is-active) {
    display: none;
  }

  .discover-block__switch-toggle {
    padding: 12px 16px;
    font-size: 13px;
    /* Retour utilisateur : "le texte s'affiche au dessus du titre" --
       le <span> de contenu (source APRES le libelle, voir cms/page.tpl)
       passe visuellement AVANT via l'ordre flex, uniquement en mobile
       (desktop reste en display:block normal, ordre source = libelle
       puis contenu en dessous). */
    display: flex;
    flex-direction: column;
  }

  .discover-block__switch-label {
    order: 2;
  }

  .discover-block__switch-content {
    order: 1;
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 13px;
  }
}

/* ---------- Bloc 2 "Gammes pensees" : carrousel de panels wide-banner ---------- */

/* Breakout pleine largeur (retour utilisateur : la vignette active
   garde sa taille normale min(1260px, 92vw), mais les vignettes
   voisines doivent etre visibles sur TOUTE LA LARGEUR DE LA PAGE, pas
   juste dans la colonne de 1260px) -- meme recette que .bubble-carousel
   (custom.css) : left:50% + width:100vw + margin-left:-50vw. overflow-x
   hidden ICI (localement sur ce breakout, pas sur html/body) : 100vw
   peut deborder de quelques px sur certains navigateurs quand une
   scrollbar verticale est presente, ce qui creait un scroll horizontal
   sur toute la PAGE (retour utilisateur -- "ca va plus du tout") --
   meme piege/meme solution que .about-teaser un peu plus haut dans ce
   fichier, qui documente pourquoi on ne touche jamais a html/body
   directement (effets de bord sur le tracking du scroll de la nav). Le
   defilement horizontal reste possible mais UNIQUEMENT a l'interieur du
   track (overflow-x:auto plus bas), jamais sur la page. */
.discover-block__carousel {
  position: relative;
  width: 100vw;
  /* PAS "left:50% + margin-left:-50vw" (la recette classique, utilisee
     par .bubble-carousel) : ce carrousel est un ENFANT FLEX de
     .discover-block (display:flex; align-items:center) -- "left:50%"
     se combine avec le centrage automatique du flex-item et decale la
     boite bien au-dela du viewport (constate : bord droit a 1557px sur
     un ecran de 1280px). Marges symetriques calc(50% - 50vw) a la place :
     poser des marges EXPLICITES (pas "auto") desactive le centrage
     automatique de align-items pour CET item precis (priorite aux
     marges explicites sur l'alignement flex, cf. spec), et le calcul
     reste correct quel que soit le parent. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
}

.discover-block__carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 24px;
  scrollbar-width: none;
  /* Espace de part et d'autre = ce qu'il faut pour centrer une slide a
     taille normale (min(1260px, 92vw)) dans la largeur de la fenetre --
     c'est cet espace qui laisse les slides voisines apparaitre sur les
     cotes. scroll-padding (pas juste scroll-snap-align:center) pour que
     la PREMIERE et la DERNIERE slide se centrent aussi, comme celles du
     milieu, malgre ce padding. */
  padding: 0 calc((100vw - min(1260px, 92vw)) / 2);
  scroll-padding: 0 calc((100vw - min(1260px, 92vw)) / 2);
}

.discover-block__carousel-track::-webkit-scrollbar {
  display: none;
}

.discover-block__slide {
  flex: 0 0 min(1260px, 92vw);
  scroll-snap-align: center;
}

/* 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 cadre 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 sous le carrousel. */
.discover-block__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 20px auto 0;
}

/* Pagination sous le carrousel (retour utilisateur -- remplace les
   fleches laterales, puis reintroduites juste au-dessus) : un bouton
   par slide, celui de la slide au centre du viewport s'allume tout seul
   au scroll (IntersectionObserver, voir JS). Barres (pas des points
   ronds) : plus facile a viser/cliquer, et la largeur de la barre active
   donne un repere visuel net (comme une barre de progression), pas
   juste une couleur qui change. */
.discover-block__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.discover-block__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;
}

.discover-block__dot.is-active {
  width: 40px;
  background: #2323e0;
}

/* Fleches -- fond clair (page/section blanche, pas une photo comme le
   bloc 1) : contour/icone gris assorti aux points inactifs, passe au
   bleu de la marque au survol. */
.discover-block__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;
}

.discover-block__arrow:hover {
  border-color: #2323e0;
  color: #2323e0;
}

/* ---------- Bloc 3 "Sur-mesure selon le gabarit" : slider comparateur ---------- */
/* Retour utilisateur : curseur horizontal entre 2 photos superposees --
   tout a gauche = photo de droite a 100%, tout a droite = photo de
   gauche a 100%, au centre = 50/50. */
.discover-compare {
  /* .discover-block__frame + .discover-block__media (deja poses sur les
     elements, voir template) donnent deja le cadre/coins arrondis/bordure
     -- cette classe n'ajoute que ce qui est specifique au slider. */
  cursor: ew-resize;
  /* Le drag est pilote en JS (Pointer Events, voir cms/page.tpl) --
     sans ca, un doigt qui glisse horizontalement sur mobile scrollerait
     aussi la PAGE verticalement en meme temps (retour utilisateur : le
     slider etait inutilisable sur iPad/iPhone). */
  touch-action: none;
}

.discover-compare__layer {
  z-index: 0;
}

/* La photo de GAUCHE est CLIPPEE (inset() sur son bord droit, pose en
   JS a chaque mouvement du curseur) -- la photo de DROITE reste
   entiere, en-dessous, visible uniquement la ou la gauche est coupee.
   Valeur de secours 50% ici (avant que le JS ne tourne). */
.discover-compare__layer--left {
  z-index: 1;
  clip-path: inset(0 50% 0 0);
}

.discover-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

.discover-compare__handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 16px;
  color: #1a1a1a;
}

.discover-compare__handle-grip::before {
  content: '↔';
}

/* Input natif etire sur tout le cadre -- garde UNIQUEMENT pour
   l'accessibilite clavier (Tab puis fleches gauche/droite, voir le
   listener "input" en JS) : le drag souris/tactile reel est pilote a
   part par Pointer Events sur le cadre (voir cms/page.tpl), pas par le
   hit-testing natif du range (impossible a fiabiliser sur iOS avec un
   thumb de 2px, voir plus bas -- retour utilisateur, le slider ne
   repondait pas au toucher sur iPad/iPhone). pointer-events:none ici :
   n'intercepte plus jamais la souris/le tactile (Pointer Events est
   pose sur le cadre lui-meme), reste focusable au clavier (le focus au
   Tab ne depend pas de pointer-events). */
.discover-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.discover-compare__range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 100%;
}

/* Largeur NORMALE (pas 100%) : un <input type="range"> calcule la
   valeur d'un clic/drag a partir de la position ALONG LA PISTE, en
   reservant la moitie de la largeur du POUCE de chaque cote (formule
   native : value = (clicX - thumbWidth/2) / (trackWidth - thumbWidth)).
   Avec un pouce a 100% de la largeur du track, ce denominateur devient
   nul/negatif -- la valeur calculee devient n'importe quoi, quasi
   toujours ecrasee au minimum (constate : "des que je clique il part
   tout a gauche"). Largeur fine ici (la hauteur, elle, n'entre PAS dans
   ce calcul -- 100% de hauteur reste donc sans risque, garde une grande
   zone de prise verticale). */
.discover-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2px;
  height: 100%;
}

.discover-compare__range::-moz-range-track {
  height: 100%;
  border: none;
  background: transparent;
}

.discover-compare__range::-moz-range-thumb {
  width: 2px;
  height: 100%;
  border: none;
  background: transparent;
}

@media (max-width: 700px) {
  .discover-block {
    /* Plus de min-height:100vh sur telephone (retour utilisateur --
       "l'espace entre les blocs est ENORME... sur telephone c'est
       absolument pas naturel") : sur desktop, un bloc pleine hauteur a
       du sens (composition large, image posee au centre) ; sur un petit
       ecran, ca force un vide immense au-dessus/en dessous du contenu
       reel a chaque bloc. Le bloc garde sa hauteur naturelle (image +
       titre + texte), juste espace par le padding vertical ci-dessous. */
    min-height: 0;
    padding: 56px 20px;
  }

  .discover-block__frame {
    aspect-ratio: 3 / 4;
  }

  .discover-block__body {
    width: 90%;
  }

  /* Double classe (pas juste .discover-block__body) : gagne face a
     .about-teaser__panel dans custom.css, charge APRES ce fichier sur
     cette page -- meme specificite (1 classe), donc l'ordre de
     chargement deciderait sinon, et cette regle mobile perdrait. */
  .discover-block__body.about-teaser__panel {
    padding: 32px 24px;
  }
}