/** Shopify CDN: Minification failed

Line 54:0 All "@import" rules must come first

**/
/* == Font Arsenica (titres) == */
@font-face {
  font-family: "Arsenica";
  src: url("Arsenica-Alt-Light.woff2") format("woff2"), url("Arsenica-Alt-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arsenica";
  src: url("Arsenica-Alt-Medium.woff2") format("woff2"), url("Arsenica-Alt-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arsenica";
  src: url("Arsenica-Alt-Demibold.woff2") format("woff2"), url("Arsenica-Alt-Demibold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arsenica";
  src: url("Arsenica-Alt-Bold.woff2") format("woff2"), url("Arsenica-Alt-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arsenica";
  src: url("Arsenica-Alt-Extrabold.woff2") format("woff2"), url("Arsenica-Alt-Extrabold.woff") format("woff");
  font-weight: 800; font-style: normal; font-display: swap;
}
/* [TICKETS #22/#24] Face Regular 400 manquante : la famille "Arsenica" n'avait que 300/500/600/700/800,
   donc tout titre en font-weight:400 remontait sur le Medium 500 -> effet "gras".
   On fournit le 400 avec la MEME police que le titre heros (Fontify "Arsenica - typo titre"),
   pour que tous les titres 400 reprennent le rendu attendu, sans toucher aux dizaines de regles existantes. */
@font-face {
  font-family: "Arsenica";
  src: url("arsenica-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* == Arsenica sur tous les titres == */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font-heading {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
}

/* ============================================
   ELLE TENS — Styles globaux (Theme Wellina)
   ============================================ */

/* -- Import Montserrat (sous-titres) -- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* -- Titres : droit par defaut, italic uniquement dans <em> -- */
[class*="etfc-"] h1,
[class*="etfc-"] h2,
[class*="etap-"] h1,
[class*="etap-"] h2,
[class*="elletens__"] h1,
[class*="elletens__"] h2,
.etfc-title h1,
.etap-title h1,
.etap-form-title,
.etfc-form-title,
.etfc-articles-title,
.etap-partners-title {
  font-style: normal !important;
}

/* Garder italic dans <em> uniquement */
[class*="etfc-"] h1 em,
[class*="etfc-"] h2 em,
[class*="etap-"] h1 em,
[class*="etap-"] h2 em {
  font-style: italic !important;
}

/* -- Sous-titres en Montserrat, droit -- */
[class*="etfc-"] .etfc-intro,
[class*="etap-"] .etap-intro,
[class*="etfc-"] .etfc-form-intro,
[class*="etap-"] .etap-form-intro,
.etfc-newsletter p,
.etap-newsletter p:not(h2),
.etap-cta-sub,
.subtitle {
  font-family: "Montserrat", sans-serif !important;
  font-style: normal !important;
}

/* -- Formulaires — Espace label/input + arrondi harmonise -- */
[class*="etfc-"] label,
[class*="etap-"] label {
  margin-bottom: 8px !important;
}

[class*="etfc-"] input[type="text"],
[class*="etfc-"] input[type="email"],
[class*="etfc-"] input[type="tel"],
[class*="etfc-"] input[type="date"],
[class*="etfc-"] input[type="number"],
[class*="etfc-"] select,
[class*="etfc-"] textarea,
[class*="etap-"] input[type="text"],
[class*="etap-"] input[type="email"],
[class*="etap-"] input[type="tel"],
[class*="etap-"] input[type="date"],
[class*="etap-"] input[type="number"],
[class*="etap-"] select,
[class*="etap-"] textarea {
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

[class*="etfc-"] input:focus,
[class*="etfc-"] select:focus,
[class*="etfc-"] textarea:focus,
[class*="etap-"] input:focus,
[class*="etap-"] select:focus,
[class*="etap-"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(55, 55, 55, 0.08) !important;
}

/* -- Ligne verticale separateur entre colonnes formulaire -- */
.etfc-grid--separator,
.etap-grid--separator {
  position: relative;
}

/* -- Sidebar sticky -- */
.etfc-info-sticky,
.etap-info-sticky {
  position: sticky !important;
  top: 120px !important;
  align-self: start !important;
}

/* -- Newsletter — sous-titre en Montserrat -- */
.etfc-newsletter .etfc-nl-desc,
.etap-newsletter .etap-nl-desc,
[class*="newsletter"] .rte {
  font-family: "Montserrat", sans-serif !important;
  font-style: normal !important;
}

/* -- Bandeau pistache — Montserrat avec espacement -- */
.announcement-bar .announcement-bar__text,
.announcement-bar__slide {
  font-family: "Montserrat", sans-serif !important;
  letter-spacing: 0.08em;
}

/* -- Boutons submit formulaires — aucun override, laisser le theme natif gerer -- */

/* -- Footer — titre plus gros -- */
.footer .footer__block-heading,
.footer [class*="footer"] h2,
.footer [class*="footer"] h3 {
  font-size: clamp(22px, 2.5vw, 28px) !important;
}

/* -- Announcement bar - texte plus gros -- */
.announcement-bar .announcement-bar__slide,
.announcement-bar .announcement-bar__text {
  font-size: 13px !important;
}

/* -- Instagram feed spacing -- */
.footer .media-gallery,
.footer [class*="instagram"],
.footer [class*="gallery"] {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

/* -- Marges responsive pages custom -- */
[class*="etfc-container"],
[class*="etap-container"],
.etfc-articles,
.etap-partners {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
}

/* -- Fix pastilles carousel: ::before doit couvrir tout le cercle -- */
.carousel__controls .btn--icon-only.btn--outline::before {
  inset: calc(var(--button-border-thickness, 0.1rem) * -1) !important;
  border-radius: 50% !important;
}


/* -- Newsletter input arrondis -- */
.newsletter-form__input {
  border-radius: 60px !important;
}


/* -- Chronologie progression : ratio colonnes texte/image configurable -- */
@media (min-width: 1000px) {
  .section--progress-timeline .progress-timeline.layout-panel-grid {
    grid-template-columns: var(--timeline-columns, 1.4fr 1fr) !important;
  }
}



/* -- Diapositive image : force l'agrandissement si le contenu est plus haut -- */
.slide {
  min-height: var(--slide-height, 52rem) !important;
  height: auto !important;
  max-height: none !important;
}


/* -- Chronologie : badge icone tournante responsive mobile -- */
@media (max-width: 767px) {
  /* Reduit le debordement du badge hors de la zone image */
  .timeline-media .spinning-icon-badge-block {
    transform: translate(15%, -25%);
  }

  /* Badge image statique : taille proportionnelle a l'ecran */
  .timeline-media .spinning-icon-badge-block--static {
    max-width: min(90px, 22vw) !important;
    max-height: min(90px, 22vw) !important;
  }

  /* Badge texte tournant : meme approche */
  .timeline-media .spinning-icon-badge {
    max-width: min(90px, 22vw);
    max-height: min(90px, 22vw);
    font-size: clamp(5px, 1.8vw, 8px);
  }

  /* Bouton de la section Chronologie : ne pas depasser la largeur disponible */
  .section--progress-timeline .section__footer .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}


/* -- Chronologie : espace vide trop grand entre blocs sur mobile -- */
@media (max-width: 767px) {
  .section--progress-timeline .timeline-block__content {
    padding-block-end: 1.6rem;
  }
  /* Reduit aussi le gap entre image et blocs texte */
  .section--progress-timeline .progress-timeline.layout-panel-grid {
    row-gap: 16px !important;
  }
}


/* ============================================================
   PIXEL PERFECT HOMEPAGE — maquette Figma (desktop >= 1200px)
   ============================================================ */
@media (min-width: 1200px) {

  /* -- Hero : hauteur maquette 605px, image en cover -- */
  [id$="__slideshow_DqmGRC"] .slide {
    height: 605px !important;
    min-height: 605px !important;
  }
  [id$="__slideshow_DqmGRC"] .slide__media {
    height: 100% !important;
  }
  [id$="__slideshow_DqmGRC"] .slide__media img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  [id$="__slideshow_DqmGRC"] .slide__content {
    height: auto !important;
    min-height: 0 !important;
  }

  /* -- Hero : titres 64px interligne serre comme maquette -- */
  [id$="__slideshow_DqmGRC"] [class*="text-block--AOTIyS2I2"] p,
  [id$="__slideshow_DqmGRC"] [class*="text-block--AUG1EU1oz"] p,
  [id$="__slideshow_DqmGRC"] [class*="text-block--Aczl5MDl0"] p {
    font-size: 64px !important;
    line-height: 1.08 !important;
  }

  /* -- Notre gamme : titre 56px comme maquette -- */
  .gamme__title {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }

  /* -- Notre gamme : cartes ~274px, gaps 31px comme maquette -- */
  .gamme__track {
    gap: 31px !important;
  }
  .gamme__card {
    flex: 0 0 22% !important;
    min-width: 0 !important;
  }

  /* -- Notre gamme : CTA carte texte en pill pleine, sans cercle fleche -- */
  .gamme__cta-btn {
    letter-spacing: 0.08em !important;
  }
  .gamme__cta-btn .gamme__cta-circle {
    display: none !important;
  }

  /* -- Chronologie science : geometrie exacte maquette
     (texte 186->630, photo 756->1230 sur design 1366) -- */
  [id$="__progress_timeline_xkkpwF"] .progress-timeline.layout-panel-grid {
    grid-template-columns: 640fr 606fr !important;
  }
  [id$="__progress_timeline_xkkpwF"] .progress-timeline_items {
    padding-inline-start: 70px !important;
    padding-inline-end: 52px !important;
  }
  [id$="__progress_timeline_xkkpwF"] .progress-timeline__media {
    padding-inline-start: 56px !important;
    padding-inline-end: 76px !important;
  }

  /* -- Bandeaux defilants : hauteur maquette ~70px -- */
  .etap-banner {
    padding: 14px 0 !important;
  }

  /* -- Section technologie avancee : colonne gauche demarre sous le haut
     des images comme maquette, gaps verticaux 42px, images portrait -- */
  [id$="__custom_section_XGcKwh"] .group-block.sticky-element {
    padding-block-start: 104px !important;
  }
  [id$="__custom_section_XGcKwh"] .grid-block-content > .group-block > .group-block-content > .group-block {
    padding-block-start: 30px !important;
  }
  [id$="__custom_section_XGcKwh"] .grid-block-content {
    row-gap: 42px !important;
  }
  [id$="__custom_section_XGcKwh"] .grid-block .image-block .media {
    aspect-ratio: 348 / 392 !important;
  }
  [id$="__custom_section_XGcKwh"] .grid-block img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  [id$="__custom_section_XGcKwh"] .grid-block-content > .group-block > .group-block-content > .group-block {
    padding-inline-start: 23px !important;
    padding-block-end: 0 !important;
  }

  /* -- Section technologie : typographie exacte maquette -- */
  /* Colonne gauche sticky : label / titre / paragraphes */
  [id$="__custom_section_XGcKwh"] .sticky-element .group-block-content > :nth-child(1) p {
    font-size: 18px !important;
  }
  [id$="__custom_section_XGcKwh"] .sticky-element .group-block-content > :nth-child(2) p {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
  [id$="__custom_section_XGcKwh"] .sticky-element .group-block-content > :nth-child(3) p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  /* -- Section 360 (product anime) : fond clair comme maquette,
     etoile flash masquee, textes sombres.
     L'image de fond (reglage "Image de fond") reste fonctionnelle :
     le blanc n'est qu'un fond de repli derriere elle. -- */
  [id$="__abcdev_product_anime_9iFb7C"] .flash__illust,
  [id$="__abcdev_product_anime_9iFb7C"] .background_shape {
    display: none !important;
  }
  [id$="__abcdev_product_anime_9iFb7C"] section.bg-scheme-background {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
  }
  [id$="__abcdev_product_anime_9iFb7C"] .abcdev__heading--2 {
    color: #1a1a1a !important;
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
  [id$="__abcdev_product_anime_9iFb7C"] .abcdev-3dview-info-text p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  [id$="__abcdev_product_anime_9iFb7C"] .et-eyebrow {
    font-size: 18px !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
  }
  [id$="__abcdev_product_anime_9iFb7C"] .abcdev-3dview-heading {
    max-width: 780px !important;
    margin-inline: auto !important;
  }
  [id$="__abcdev_product_anime_9iFb7C"] .abcdev-3dview-info-text {
    max-width: 700px !important;
    margin-inline: auto !important;
  }

  /* Items numerotes : numero / titre / paragraphe (groupe texte imbrique) */
  [id$="__custom_section_XGcKwh"] .grid-block-content > .group-block > .group-block-content > .group-block .group-block-content > :nth-child(1) p {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  [id$="__custom_section_XGcKwh"] .grid-block-content > .group-block > .group-block-content > .group-block .group-block-content > :nth-child(2) p {
    font-size: 40px !important;
    line-height: 1.32 !important;
  }
  [id$="__custom_section_XGcKwh"] .grid-block-content > .group-block > .group-block-content > .group-block .group-block-content > :nth-child(3) p {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
}

/* -- Logos partenaires : taille maquette -- */
@media (min-width: 1200px) {
  .logo-scroll__item img {
    height: 64px !important;
    width: auto !important;
  }
  .logo-scroll__item {
    padding: 0 32px !important;
  }

  /* -- Bloc Efficacite (temoignage vert) : citation 21px comme maquette,
     en serif Arsenica comme le titre (le reglage du bloc est en police
     body et Fontify ne couvre pas ce bloc) -- */
  [id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__text,
  [id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__text p {
    font-family: 'Arsenica', 'Cormorant Garamond', Georgia, serif !important;
    font-size: 21px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
  }
  [id$="__testimonials_split_slider_qFJkz7"] .section__header h1 {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
  [id$="__custom_section_7fmRjy"] [class*="text_kX3phx"],
  [id$="__custom_section_7fmRjy"] [class*="text_kX3phx"] p {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
  [id$="__newsletter_WQB6tH"] [class*="text_YnLqpn"] p {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
  [id$="__elletens_pro2_partners_6THeYp"] .etap-partners h2 {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }

  /* -- Slideshow "Quand commencer" : hauteur maquette 564px -- */
  [id$="__slideshow_KtYPyf"] .slide {
    height: 564px !important;
    min-height: 564px !important;
  }
  [id$="__slideshow_KtYPyf"] .slide__media {
    height: 100% !important;
  }
  [id$="__slideshow_KtYPyf"] .slide__media img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  [id$="__slideshow_KtYPyf"] .slide__content {
    height: auto !important;
    min-height: 0 !important;
  }

  /* -- Temoignages video : titre une ligne 44px, cartes 295px gap 35 -- */
  .vid-testi__header {
    max-width: 960px !important;
  }
  .vid-testi__heading {
    font-size: 58px !important;
    line-height: 1.2 !important;
  }
  .vid-testi__label {
    font-size: 18px !important;
  }
  .vid-testi__text {
    font-size: 15px !important;
  }
  .vid-testi__card {
    width: 295px !important;
  }
  .vid-testi__track {
    gap: 35px !important;
  }
}

/* -- Marges de page 60px comme maquette (design 1366px) -- */
@media (min-width: 1200px) and (max-width: 1535px) {
  :root {
    --page-padding: 6rem;
  }
}

/* -- Supprime le lisere de sous-pixel entre Notre gamme et la chronologie :
   les cartes gamme (22%) donnent une hauteur fractionnaire, et sur ecran
   avec mise a l'echelle un trait d'un demi-pixel apparait a la jonction.
   Les deux fonds etant blancs, on fait chevaucher d'1px. -- */
[id$="__progress_timeline_xkkpwF"] {
  margin-block-start: -1px;
}



/* -- Chronologie : close-up (image 2) decale vers la droite.
   Le decalage s'applique au cadre entier, pas a l'image interne :
   .media a un overflow hidden qui la rognerait, et l'animation
   image-zoom-reveal ecrase le transform de l'image. -- */
.timeline-media__image--secondary {
  /* 50 % dans la limite de la place disponible a droite (padding colonne
     media + marge de page). On utilise la propriete `translate` et non
     `transform` : le parallaxe natif du theme pilote `transform` en JS,
     les deux se composent au lieu de s'ecraser. */
  translate: min(50%, calc(var(--page-padding, 1.6rem) + 70px)) 0;
  z-index: 2;
}

/* Mobile : la colonne media touche presque le bord, pas de decalage */
@media (max-width: 767px) {
  .timeline-media__image--secondary {
    translate: 0 0;
  }
}


/* ============================================================
   AUDIT 07/07 — chantiers d'harmonisation
   ============================================================ */

/* -- Section technologie : texte centre verticalement face a l'image
   (le theme posait align-items: flex-end en inline + paddings clamp) -- */
@media (min-width: 1000px) {
  [id$="__custom_section_XGcKwh"] .grid-block-content .group-block-content.layout-panel-flex--row {
    align-items: center !important;
  }
  [id$="__custom_section_XGcKwh"] .grid-block-content > .group-block > .group-block-content > .group-block {
    padding-block-end: 0 !important;
    padding-inline-start: 23px !important;
  }
}

/* -- Temoignages "Divise plein cadre" : carte plus compacte -- */
[id$="__testimonials_split_slider_qFJkz7"] .testimonials-split-slider__content {
  --padding-block-start: 3.2rem !important;
  --padding-block-end: 3.2rem !important;
  --padding-inline: 4rem !important;
}
[id$="__testimonials_split_slider_qFJkz7"] testimonial-split-content {
  justify-content: flex-start !important;
  row-gap: 2rem;
}
[id$="__testimonials_split_slider_qFJkz7"] .author-info {
  --padding-block-start: 2rem !important;
}
[id$="__testimonials_split_slider_qFJkz7"] .carousel__controls {
  --carousel-controls-margin-top: 2rem !important;
}
@media (min-width: 768px) {
  [id$="__testimonials_split_slider_qFJkz7"] .testimonials-split-slider--media-wide .testimonials-split-slider__medias {
    width: 42% !important;
  }
  [id$="__testimonials_split_slider_qFJkz7"] .testimonials-split-slider--media-wide .testimonials-split-slider__content {
    width: 58% !important;
  }
}
/* L'image suit toujours la hauteur du panneau de droite (mecanisme natif :
   height 100% + flex stretch). Ne JAMAIS plafonner sa hauteur : un max-height
   desalignait les deux colonnes des que le contenu depassait. */
[id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__media,
[id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__media-image {
  height: 100% !important;
  max-height: none !important;
}

/* -- Diaporama FAQ (Quand commencer) : tous les textes en blanc,
   bouton lime inchangé (il n'est pas un .text-block) -- */
[id$="__slideshow_KtYPyf"] .slide__inner .text-block,
[id$="__slideshow_KtYPyf"] .slide__inner .text-block * {
  color: #fff !important;
}
[id$="__slideshow_KtYPyf"] .slideshow__controls {
  --pagination-text-color: #fff;
  --pagination-progress-bg: rgb(255 255 255 / 30%);
  --pagination-progress-fill: #fff;
  color: #fff;
}

/* -- Alignement horizontal : carrousel videos et partenaires cales
   sur la marge de page comme les autres sections -- */
.vid-testi__carousel-wrap {
  padding-inline: var(--page-padding, 1.6rem) !important;
}
[id$="__elletens_pro2_partners_6THeYp"] .etap-wrap {
  max-width: none !important;
}

/* -- Boutons : texte legerement plus petit, boite inchangee
   (hauteur fixe en rem, le padding ne depend pas de la police) -- */
.btn {
  font-size: 1.4rem !important;
}

/* -- Boutons pleins : au hover le texte reste le meme (plus de 2e copie
   decalee qui donnait l'impression d'un changement de police) ;
   seule sa couleur s'inverse au passage du fond -- */
.btn--icon-solid .btn__icon-text {
  opacity: 0 !important;
}
.btn--icon-solid .btn__text {
  position: relative;
  z-index: 3;
  transition: color 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn--icon-solid:hover .btn__text {
    color: rgb(var(--color-primary-button-background));
  }
}


/* ============================================================
   DESIGN SYSTEM SITE-WIDE — espacements en-tetes de section
   Tout l'ecart sous-titre/titre/paragraphe vient des MARGES DU
   TITRE (10px au-dessus, 35px en dessous — cf. blocs MARGES
   VERTICALES TITRES et TITRES DE SECTION plus bas). Ici on
   neutralise les autres sources d'espace (row-gap des groupes,
   paddings regles dans l'editeur) pour que la regle titres
   soit la seule a jouer.
   description -> contenu suivant : 24px (le reste vient du wrapper)
   S'applique a TOUS les templates (blocs texte Horizon).
   ============================================================ */

/* Les groupes d'en-tete passent du row-gap aux marges du titre */
.group-block-content:has(> .text-block.text-subheading) {
  row-gap: 0 !important;
}

/* Chronologie : le row-gap du bloc timeline (reglage editeur) n'ajoute
   rien non plus, les marges du titre gerent l'ecart badge/titre/texte */
.timeline-block__content {
  row-gap: 0 !important;
}

/* En-tetes de section du theme (.section__header, marge native 40px) :
   quand ils se terminent par un titre, l'ecart avec le contenu vient
   de la marge basse du titre (35px), pas de l'en-tete */
.main-content .section__header:has(> .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6, .custom):last-child) {
  margin-block-end: 0 !important;
}

/* Sous-titre : aucun espace propre, l'ecart avec le titre
   vient de la marge haute du titre (10px) */
.text-block.text-subheading {
  padding-block-end: 0 !important;
}

/* Titre apres sous-titre : pas de padding parasite */
.text-block.text-subheading ~ .text-block:is(.h1, .h2, .h3, .h4, .custom) {
  padding-block-start: 0 !important;
}
/* ... et s'il est suivi d'une description, elle porte seule l'ecart */
.text-block.text-subheading ~ .text-block:is(.h1, .h2, .h3, .h4, .custom):has(+ .text-block.rte:not(.h1):not(.h2):not(.h3):not(.h4):not(.custom):not(.text-subheading)) {
  padding-block-end: 0 !important;
}

/* Description : l'ecart avec le titre vient de la marge basse
   du titre (35px) ; description -> suite : 24px */
.text-block.text-subheading ~ .text-block.rte:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not(.custom):not(.text-subheading) {
  padding-block-start: 0 !important;
  padding-block-end: 24px !important;
}
/* Si la description clot le groupe, l'espace d'apres vient du wrapper */
.text-block.text-subheading ~ .text-block.rte:not(.h1):not(.h2):not(.h3):not(.h4):not(.custom):not(.text-subheading):last-child {
  padding-block-end: 0 !important;
}

/* ============================================================
   MARGES VERTICALES TITRES — site-wide
   Chaque titre : 10px au-dessus, 35px en dessous.
   Scope .main-content OBLIGATOIRE : sans lui la regle attrape le
   logo du header (un h1 sur la homepage, et son lien a la classe
   .h3), les titres des drawers/popups et le footer.
   ============================================================ */
.main-content h1, .main-content h2, .main-content h3,
.main-content h4, .main-content h5, .main-content h6,
.main-content .h1, .main-content .h2, .main-content .h3,
.main-content .h4, .main-content .h5, .main-content .h6 {
  margin-top: 10px !important;
  margin-bottom: 35px !important;
}

/* ============================================================
   CARTES ARTICLE (blog & sections articles) - meme regle que
   partout : l'ecart sous-titre / titre / paragraphe (date,
   excerpt) vient UNIQUEMENT du padding interne du titre
   (10px au-dessus, 35px en dessous). On annule le gap-2 du
   groupe et on convertit les marges 10/35 heritees en padding,
   pour zero espace parasite entre les elements.
   ============================================================ */
.article-card__content-inner {
  gap: 0 !important;
}
.main-content .article-card__title,
.article-card__title {
  margin: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 35px !important;
}

/* Pastilles / etiquettes site-wide : TOUJOURS le jaune-vert fluo de la marque
   (#E3F6A4), jamais transparent ni blanc. Couvre : labels des image-cards
   (mega-menus + sections), badges de la timeline (section "science"),
   pastilles des cartes article (blog). Selecteurs cibles = uniquement les
   badges d'etiquette (pas les badges produit type "Solde"). */
.image-card__label.badge {
  background-color: #E3F6A4 !important;
  color: #1f1d1a !important;
  border: 0 !important;
}
/* [APPEL #21] Les pastilles de balise d'article NE sont plus fluo : leur couleur
   depend de la categorie (voir elletens-tag-colors.js, applique partout). */
/* [APPEL 29/07 #9] Pastilles de la section "science" (timeline) = vert sage
   #E9EED8 (couleur deja configuree par bloc), PAS le fluo. La regle generale
   ci-dessus les forcait au fluo -> on les remet a leur fond configure. */
.timeline-block__badge.badge {
  background-color: var(--badge-background-color, #E9EED8) !important;
  color: var(--badge-color, #1f1d1a) !important;
  border: 0 !important;
  /* casse authored (maquette : "Recuperation post-partum", pas "Post-Partum") */
  text-transform: none !important;
}

/* Filtres de categorie du blog : la categorie ACTIVE (selectionnee) en
   pastille jaune-vert fluo de la marque (au lieu du gris secondaire). */
.blog-post__tag.active {
  background-color: #E3F6A4 !important;
  color: #1f1d1a !important;
}

/* Styles de base des pills de categorie disponibles PARTOUT (le CSS
   template-blog.css n'est charge que sur la liste blog ; on veut le menu
   aussi sur la page article). */
.blog-post__tags ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.blog-post__tag {
  padding: 0.6rem 1.2rem;
  border-radius: 6rem;
  white-space: nowrap;
}
/* Menu de categories sur la page article : centre, marge au-dessus des
   articles similaires. */
.article__tags-nav {
  margin-block: 1.2rem 0.8rem;
}

/* Cartes article (blog) : images TOUTES au meme ratio 4/3, peu importe le
   ratio natif de l'image (le theme derive la taille de --ratio inline).
   -> cartes de hauteur uniforme. Recadrage via object-fit: cover deja natif. */
.article-card__media .media {
  --ratio: 1.3333 !important;
  --ratio-mobile: 1.3333 !important;
}

/* ============================================================
   SOUS-TITRES ��������� style unique site-wide
   Montserrat 18px / 500 / uppercase / letter-spacing 0.05em
   10px d'ecart entre le sous-titre et le titre.
   ============================================================ */
.text-subheading,
.text-subheading p,
.text-subheading strong,
.et-eyebrow,
.etab-slider__label,
.vid-testi__label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}

.et-eyebrow,
.etab-slider__label,
.vid-testi__label {
  display: block !important;
  margin: 0 0 10px !important;
  opacity: 1 !important;
}

/* Etablissements/revendeurs : l'ecart label->titre vient de la marge
   haute du titre h2 (10px), le label n'ajoute rien */
.etab-slider__label {
  margin-bottom: 0 !important;
}

.text-subheading p {
  margin: 0 !important;
}

/* ============================================================
   TITRES DE SECTION — style unique site-wide
   Arsenica (regle globale) / 58px desktop / weight 400 / lh 1.2
   Marges : 10px au-dessus, 35px en dessous.
   Scope .main-content : ne touche ni header, ni footer,
   ni popups (cookies, drawers).
   ============================================================ */
.main-content h1,
.main-content h2 {
  font-size: clamp(34px, 4.25vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  margin-top: 10px !important;
  margin-bottom: 35px !important;
}

/* Blocs texte Horizon utilises comme titres (classes h1-h6 et custom) :
   memes marges 10/35 partout, paddings parasites neutralises
   (l'espacement vient des marges, pas des reglages editeur). */
.main-content .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6, .custom) {
  margin-top: 10px !important;
  margin-bottom: 35px !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}
.main-content .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6, .custom) p {
  margin: 0 !important;
}

/* Titres semantiques (h1-h6) A L'INTERIEUR d'un bloc texte : ils heritent
   du style du bloc (taille/graisse editeur inchangees) et l'espacement
   vient des marges du bloc — pas de double marge ni de taille forcee. */
.main-content .text-block :is(h1, h2, h3, h4, h5, h6) {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  margin: 0 !important;
}
/* Idem pour le titre richtext du slider etablissements/revendeurs */
.etab-slider__heading p {
  margin: 0 !important;
}

/* ============================================================
   TEMOIGNAGES "Divise plein cadre" (Efficacite) — section
   compactee : hauteur plafonnee, plus d'etirement vertical,
   marges internes reduites.
   ============================================================ */
@media (min-width: 990px) {
  [id$="__testimonials_split_slider_qFJkz7"] .section__container > .block {
    height: 560px !important;
  }
  [id$="__testimonials_split_slider_qFJkz7"] .testimonials-split-slider__medias,
  [id$="__testimonials_split_slider_qFJkz7"] .testimonials-split-slider__media,
  [id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__media,
  [id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__media .media,
  [id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__media img {
    height: 100% !important;
  }
  [id$="__testimonials_split_slider_qFJkz7"] .testimonials-split-slider__medias {
    grid-template-rows: 100% !important;
    overflow: hidden !important;
  }
  [id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__media img {
    object-fit: cover !important;
  }
}
[id$="__testimonials_split_slider_qFJkz7"] .swiper-equal-height,
[id$="__testimonials_split_slider_qFJkz7"] .swiper-wrapper,
[id$="__testimonials_split_slider_qFJkz7"] .swiper-slide,
[id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__content {
  height: auto !important;
  min-height: 0 !important;
}
[id$="__testimonials_split_slider_qFJkz7"] .testimonial-split-content,
[id$="__testimonials_split_slider_qFJkz7"] .swiper-equal-height,
[id$="__testimonials_split_slider_qFJkz7"] .testimonial-split__text {
  flex: 0 0 auto !important;
}
[id$="__testimonials_split_slider_qFJkz7"] .testimonials-split-slider__content {
  justify-content: center !important;
}
[id$="__testimonials_split_slider_qFJkz7"] .author-info {
  padding-block-start: 24px !important;
}
/* La citation porte une classe de preset titre (h1/h3) mais n'est pas
   un titre : on annule les marges 10/35 de la regle titres (.text-block
   dans le selecteur pour gagner en specificite sur elle) */
[id$="__testimonials_split_slider_qFJkz7"] .text-block.testimonial-split__text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Noms d'auteurs des temoignages : la classe .h6 est un preset de
   taille, pas un titre — pas de marges 10/35, l'ecart avec la bio
   vient du gap du conteneur */
.main-content .author-info__name {
  margin: 0 !important;
}

/* ============================================================
   ELLE TENS - VERROU FINAL ESPACEMENTS EN-TETES (10 / 35)
   Genere par audit multi-agents 16/07. Vient APRES le design
   system existant pour le renforcer. Objectif site-wide :
   10px sous-titre->titre, 35px titre->paragraphe, ZERO empilement.
   ============================================================ */

/* ---- 1. RENFORT GENERIQUE (pattern Horizon .text-block) -------- */
.main-content .group-block-content > .text-block.text-subheading ~ .text-block.rte:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not(.custom):not(.text-subheading) {
  margin-top: 0 !important;
  padding-block-start: 0 !important;
}
.main-content .group-block-content > .text-block.rte:has(> p:only-child:empty) {
  display: none !important;
}

/* ---- 2. GARDE-FOU TITRE VIDE (en-tetes custom) --------------- */
.main-content .abcdev-3dview-heading :is(h1, h2, h3, h4, h5, h6):empty,
.main-content .icon-cards__header :is(h1, h2, h3, h4, h5, h6):empty,
.main-content .vid-testi__header :is(h1, h2, h3, h4, h5, h6):empty,
.main-content .etab-slider__content :is(h1, h2, h3, h4, h5, h6):empty,
.main-content .elc__inner :is(h1, h2, h3, h4, h5, h6):empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- 3. SECTIONS CUSTOM (markup propre, hors .text-block) ----- */

/* 3a. Animation 360 (abcdev__product_anime) : .abcdev-3dview-heading */
.main-content .abcdev-3dview-heading {
  gap: 0 !important;
  row-gap: 0 !important;
}
.main-content .abcdev-3dview-heading > .et-eyebrow {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.main-content .abcdev-3dview-heading > .abcdev__heading--2 {
  margin: 0 0 35px !important;
  padding: 0 !important;
}
.main-content .abcdev-3dview-heading > .abcdev-3dview-info-text,
.main-content .abcdev-3dview-heading > .abcdev-3dview-info-text > p {
  margin: 0 !important;
  padding: 0 !important;
}

/* 3b. Cartes icones (elletens__icon-cards) : .icon-cards__header */
.main-content .icon-cards__header {
  gap: 0 !important;
}
.main-content .icon-cards__header > .icon-cards__eyebrow {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.main-content .icon-cards__header > .icon-cards__heading {
  margin: 0 0 35px !important;
  padding: 0 !important;
}
.main-content .icon-cards__header > .icon-cards__desc {
  margin: 0 !important;
  padding: 0 !important;
}

/* 3c. Videos temoignages (elletens__video-testimonials) : .vid-testi__header */
.main-content .vid-testi__header {
  gap: 0 !important;
}
.main-content .vid-testi__header > .vid-testi__label {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.main-content .vid-testi__header > .vid-testi__heading {
  margin: 0 0 35px !important;
  padding: 0 !important;
}
.main-content .vid-testi__header > .vid-testi__text {
  margin: 0 !important;
  padding: 0 !important;
}
/* Securite : le vrai titre de vid-testi est un <h1> NON classe (apres le
   h2 vide masque) -> il ne doit pas rajouter son margin-top:10 global.
   label(mb 10) + h1(mt 0) = 10px garanti, quel que soit flex/flow. */
.main-content .vid-testi__header > h1 {
  margin-top: 0 !important;
  margin-bottom: 35px !important;
  padding: 0 !important;
}

/* 3d. Slider etablissements/revendeurs : .etab-slider__content */
.main-content .etab-slider__content {
  gap: 0 !important;
  row-gap: 0 !important;
}
.main-content .etab-slider__content > .etab-slider__label {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.main-content .etab-slider__content > .etab-slider__heading {
  margin: 0 0 35px !important;
  padding: 0 !important;
}
.main-content .etab-slider__content > .etab-slider__text {
  margin: 0 !important;
  padding: 0 !important;
}

/* 3e. Calculateur de location (elletens__calc-location) : .elc__inner */
.main-content .elc__inner > .elc__label {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.main-content .elc__inner > .elc__heading {
  margin: 0 0 35px !important;
  padding: 0 !important;
}
.main-content .elc__inner > .elc__intro {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---- 4. TITRES RICHTEXT IMBRIQUES (custom) : pas de marge ----- */
.main-content .abcdev-3dview-heading .abcdev__heading--2 :is(p, h1, h2, h3, h4, h5, h6),
.main-content .icon-cards__header .icon-cards__heading :is(p, h1, h2, h3, h4, h5, h6),
.main-content .vid-testi__header .vid-testi__heading :is(p, h1, h2, h3, h4, h5, h6),
.main-content .etab-slider__content .etab-slider__heading :is(p, h1, h2, h3, h4, h5, h6),
.main-content .elc__inner .elc__heading :is(p, h1, h2, h3, h4, h5, h6) {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   ELLE TENS - MARGE BASSE APRES DERNIER PARAGRAPHE (en-tetes)
   Le dernier paragraphe des en-tetes custom garde 35px de marge
   basse pour que le bouton/CTA en dessous ne soit pas colle au
   texte. Override la regle margin:0 du VERROU (meme specificite,
   vient apres) : ne touche QUE margin-bottom, le reste reste a 0.
   ============================================================ */
.main-content .abcdev-3dview-heading > .abcdev-3dview-info-text,
.main-content .icon-cards__header > .icon-cards__desc,
.main-content .vid-testi__header > .vid-testi__text,
.main-content .etab-slider__content > .etab-slider__text,
.main-content .elc__inner > .elc__intro {
  margin-bottom: 35px !important;
}

/* ============================================================
   ELLE TENS - UNIFORMISATION SECTIONS CUSTOM SUR LA REF HOME
   Bloc unique a AJOUTER en FIN de elletens-global.css.
   Reference : sous-titre Montserrat 18/500/upper/ls .05em,
   titre Arsenica clamp(34-58)/400/lh1.2 (em italique),
   description 15/400/lh1.6, bouton Montserrat 14/upper/ls1.4
   pill 60px #E3F6A4 + animation fond radial (markup-independant).
   Specificite = classe custom + !important (bat les {% style %}
   inline sans !important et les CSS de section).
   ============================================================ */

/* ---- 1) SOUS-TITRES CUSTOM (eyebrows) : meme regle que .text-subheading
   (etend la liste d'alias). La couleur n'est PAS forcee : les eyebrows
   sur carte sombre (.exp-eyebrow) restent blancs. ---- */
.exp-eyebrow,
.icon-cards__eyebrow,
.elc__label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  margin: 0 0 10px !important;
}

/* ---- 2) TITRES DE SECTION CUSTOM -> Arsenica clamp(34-58)/400/lh1.2
   casse normale, italique uniquement dans <em>. Couvre aussi les
   sections qui ECHAPPENT au DS (prefixe etrv-) et les titres <div>
   non semantiques (exp/etl/etf/eaf/elc) hors portee du verrou global. ---- */
.philo__heading,
.etfc-articles-header h2,
.etfc-title,
.etap-title,
.etrv-title,
.eaf-title,
.eaf-heading,
.eaf-audience__title,
.eaf-form-title,
.eaf-partners h2,
.etap-form-title,
.etrv-form-title,
.exp-heading,
.etl-heading,
.etf-heading,
.gamme-section .gamme__title,
.img-marquee__heading,
.bsf__title,
.icon-cards__heading,
.elc__heading {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(34px, 4.25vw, 58px) !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  margin: 10px 0 35px !important;
}
.philo__heading p,
.etfc-articles-header h2 p,
.exp-heading p,
.etl-heading p,
.etf-heading p,
.gamme-section .gamme__title p,
.img-marquee__heading p,
.elc__heading p { margin: 0 !important; }

/* Italique conserve uniquement dans <em>/<i> */
.philo__heading em, .philo__heading i,
.etfc-articles-header h2 em,
.etfc-title em, .etap-title em, .etrv-title em,
.eaf-title em, .eaf-heading em, .eaf-audience__title em,
.eaf-form-title em, .eaf-partners h2 em,
.etap-form-title em, .etrv-form-title em,
.exp-heading em, .etl-heading em, .etf-heading em,
.gamme-section .gamme__title em,
.img-marquee__heading em, .img-marquee__heading i,
.bsf__title em, .icon-cards__heading em, .icon-cards__heading i,
.elc__heading em {
  font-style: italic !important;
}

/* ---- 2b) TITRES SECONDAIRES / DE CARTE : NE PAS exploser a 58px.
   Ce sont des faux-titres attrapes par .main-content h2 (sidebar,
   carte CTA, sous-blocs FAQ). On les re-plafonne + casse normale. ---- */
.etfc-info h2,
.etap-info h2,
.etrv-info h2,
.eaf-info h2 {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  margin: 0 0 14px !important;
}
.etap-cta-title,
.etrv-cta-title,
.eaf-cta-title,
.ehc-cta-title {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  margin: 0 !important;
}
/* .ehc-help-title / .ehc-faq h2 : mesure audit -> ce sont des TITRES 2 (~40px),
   pas titre 1. Serif conservee ici, la taille est cappee plus bas
   (scope .main-content pour battre .main-content h2 = 58px). */
.ehc-help-title,
.ehc-faq h2 {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.etap-cta-title em, .etrv-cta-title em, .eaf-cta-title em,
.ehc-cta-title em, .ehc-help-title em, .ehc-faq h2 em,
.etfc-info h2 em, .etap-info h2 em, .etrv-info h2 em, .eaf-info h2 em {
  font-style: italic !important;
}

/* Titres de CARTE (h3 non caught par la taille globale) : casse normale
   + marge interne compacte (ne pas leur imposer le 35px global) */
.philo__card-title,
.etfc-card h3,
.etrv-partner-card h3,
.eaf-partner-card h3,
.icon-cards__title,
.etf-card-heading {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.philo__card-title em, .etfc-card h3 em, .etrv-partner-card h3 em,
.eaf-partner-card h3 em, .icon-cards__title em, .etf-card-heading em {
  font-style: italic !important;
}
/* Neutralise la marge 10/35 heritee du global sur les titres de carte */
.icon-cards__title { margin: 0 0 8px !important; }
.philo__card-title { margin: 0 0 8px !important; }

/* ---- 3) DESCRIPTIONS -> 15px / 400 / lh 1.6.
   Les etrv-/eaf-/philo- serif-italiques repassent en Montserrat droit. ---- */
.philo__text, .philo__text p, .philo__card-desc,
.etfc-intro,
.etfc-info .lead, .etfc-form-intro,
.etap-intro, .etap-form-intro,
.etap-callout, .etap-callout p,
.etap-paragraph, .etap-paragraph p,
.etap-info .lead,
.etrv-intro, .etrv-form-intro,
.etrv-callout, .etrv-callout p,
.etrv-paragraph, .etrv-paragraph p,
.etrv-info .lead,
.exp-sub, .exp-sub p,
.etl-paragraph, .etl-paragraph p,
.etf-answer, .etf-answer p, .etf-card-text, .etf-card-text p,
.eaf-intro, .eaf-cta-sub,
.eaf-paragraph, .eaf-callout,
.eaf-audience__description,
.eaf-numbered, .eaf-numbered li, .eaf-numbered .eaf-sublist li,
.eaf-form-intro, .eaf-info .lead,
.ehc-intro,
.img-marquee__text,
.bsf__intro,
.icon-cards__desc,
.elc__intro {
  font-family: "Montserrat", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
/* Les intros qui font office de description sous le titre portent l'ecart 35px */
.etfc-intro, .etap-intro, .etrv-intro,
.eaf-intro, .ehc-intro, .bsf__intro { margin: 0 0 35px !important; }

/* ---- 4) BOUTONS CTA / SUBMIT custom -> typo Home + pill lime + animation.
   ANIMATION MARKUP-INDEPENDANTE : un fond radial sombre qui s'etend
   (background-size 0 -> 250%). Il vit derriere le texte (le background
   est toujours sous le contenu) => aucun besoin de <span> ni de ::before,
   fonctionne meme si le libelle est en texte brut (.gamme__link--outline).
   Cible UNIQUEMENT les boutons (jamais input/label/select). ---- */
.submit-btn,
.philo__cta-btn,
.exp-btn,
.etl-cta-btn,
.etf-btn,
.eaf-cta-btn,
.etap-cta-btn,
.etrv-cta-btn,
.ehc-cta-btn,
.elc__cta {
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px !important;
  text-transform: none !important;
  border-radius: 60px !important;
  color: #1f1d1a !important;
  --b-bg: #E3F6A4 !important;
  background-color: #E3F6A4 !important;
  background-image: radial-gradient(circle, #1f1d1a 0%, #1f1d1a 100%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 0% 0% !important;
  transition: background-size .5s cubic-bezier(.4,0,.2,1), color .35s ease !important;
}
.submit-btn:hover,
.philo__cta-btn:hover,
.exp-btn:hover,
.etl-cta-btn:hover,
.etf-btn:hover,
.eaf-cta-btn:hover,
.etap-cta-btn:hover,
.etrv-cta-btn:hover,
.ehc-cta-btn:hover,
.elc__cta:hover {
  color: #fff !important;
  background-size: 250% 250% !important;
  filter: none !important;
}
/* Le libelle doit rester au-dessus si un span existe deja */
.philo__cta-btn > span,
.exp-btn > span:not(.circle),
.eaf-cta-btn > span,
.ehc-cta-btn > span { position: relative; z-index: 1; }

/* Pastille cercle interne : s'inverse en lime au hover (homogene) */
.submit-btn:hover .circle,
.philo__cta-btn:hover .philo__cta-circle,
.exp-btn:hover .circle,
.etl-cta-btn:hover .circle,
.etf-btn:hover .circle,
.eaf-cta-btn:hover .circle,
.etap-cta-btn:hover .circle,
.etrv-cta-btn:hover .circle,
.ehc-cta-btn:hover .circle,
.elc__cta:hover .elc__cta-icon {
  background: #E3F6A4 !important;
  color: #1f1d1a !important;
}
/* Neutralise l'accent serif <em> interne du CTA calculateur */
.elc__cta em {
  font-family: "Montserrat", sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  letter-spacing: 1.4px !important;
}

/* ---- 5) ESPACEMENTS 10/35 sur les sections qui EMPILENT
   (meme mecanique que le verrou global). Le 10px eyebrow->titre et le
   35px titre->description sont deja poses ci-dessus (marges eyebrow +
   titres). Ici on cale le 35px description->bouton sur les hero empiles. ---- */
.eaf-form-intro { margin: 0 0 35px !important; }
.eaf-form .submit-btn,
.philo__cta-btn { margin-top: 35px !important; }

/* ============================================================
   ELLE TENS - HARMONISATION LARGEUR SECTIONS (sur la page-width)
   Les sections de l'ancien dev cappent leur conteneur (*-wrap) a
   1240/1320px (+ padding 24px), donc plus etroit et plus insere que
   les sections natives / la Home. On les recale EXACTEMENT sur la
   page-width native du theme : le .page-width natif est max-width:NONE
   + padding-inline var(--page-padding) (60px) => il remplit toute la
   largeur dispo (logo -> panier) a toute resolution. On applique donc
   AUSSI max-width:none (et pas un cap 1440, qui retrecissait les sections
   custom sur les ecrans > 1440px vs la Home). Marges identiques partout.
   On ne touche PAS les largeurs internes (leads/formulaires/CTA).
   ============================================================ */
.eaf-wrap,
.etap-wrap,
.etrv-wrap,
.etfc-wrap,
.exp-wrap,
.ehc-wrap,
.etf-wrap,
.bsf__wrap,
.icon-cards__container {
  max-width: none !important;
  padding-inline: var(--page-padding) !important;
  margin-inline: auto !important;
}

/* ============================================================
   ELLE TENS - COMPLEMENT UNIFORMISATION (16/07 pass 2)
   - descriptions cartes icones -> 15px corps (etaient 13px)
   - wraps manques (.etl livraison, .ett temoignage) -> page-width
   ============================================================ */
.icon-cards__text,
.icon-cards__text p {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Encadres/callouts (-highlight) : paragraphe de corps 15px comme le reste */
.ehc-highlight p, .etfc-highlight p, .eaf-highlight p, .etap-highlight p,
.etrv-highlight p, .exp-highlight p, .etl-highlight p, [class$="-highlight"] p {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.etl-wrap,
.ett-wrap {
  max-width: none !important;
  padding-inline: var(--page-padding) !important;
  margin-inline: auto !important;
}

/* ============================================================
   ELLE TENS - TITRES DE FORMULAIRE (taille intermediaire)
   "Formulaire d'acces pro / de contact / de partenariat..." ne sont
   pas des titres de section (58px) mais des sous-titres -> ~40px max
   (conforme maquettes, retablit la hierarchie).
   ============================================================ */
.main-content .etap-form-title,
.main-content .etfc-form-title,
.main-content .etrv-form-title,
.main-content .eaf-form-title {
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.2 !important;
}

/* ============================================================
   ELLE TENS - TITRES DE BANNIERE CTA (specificite corrigee)
   Les titres des bannieres "Besoin d'un echange rapide" /
   "Rejoignez notre reseau..." sont des h2 -> .main-content h2 (58px)
   ecrasait le cap. On les remet a ~42px (titre de banniere, conforme
   maquettes), specificite .main-content .classe pour gagner.
   ============================================================ */
.main-content .etap-cta-title,
.main-content .etrv-cta-title,
.main-content .eaf-cta-title,
.main-content .ehc-cta-title {
  font-size: clamp(30px, 3.2vw, 42px) !important;
  line-height: 1.15 !important;
}

/* ============================================================
   ELLE TENS - UNIFORMISATION ARRONDIS CARTES/CALLOUTS (standard 20px)
   Les sections de l'ancien dev utilisaient 8/14/18/22px sur leurs
   conteneurs carte/callout/box -> tout au standard du site (20px,
   comme les cartes produit/article/theme). Pills-badges (999px) et
   images imbriquees inchangees.
   ============================================================ */
.eaf-callout, .etap-callout, .etrv-callout, .etfc-callout,
.eaf-audience__card, .eaf-partner-card, .etrv-partner-card, .etap-partner-card,
.etf-card, .etfc-card, .elc__card, .et-info-box, .exp-box, .ehc-highlight, .ehc-cta, .ehc-cta-img, .etf-card,
.etap-cta, .etap-cta-img, .etrv-cta, .etrv-cta-img, .eaf-cta, .eaf-cta-img {
  border-radius: 20px !important;
}

/* ============================================================
   [APPEL 30/07 - ARBITRAGE ADRIEN] CASSE BOUTONS CTA = CELLE DE LA MAQUETTE.
   Decision : les MAQUETTES priment (la cliente a toujours dit de s'y referer).
   -> on affiche la casse AUTHORED (celle tapee, calee sur chaque maquette) et
   on N'IMPOSE PAS de capitales. Les CTA de la maquette en casse normale
   (ex. "Envoyer mon message", "Demander mon acces professionnel") restent en
   casse normale ; ceux en capitales sur la maquette le restent via leur label.
   Cible : boutons reconstruits en .btn (marques [data-btn-uniform]). Le nav +
   eyebrows restent en CAPITALES ; les liens "en savoir plus" (non .btn) restent
   en casse normale soulignes.
   ============================================================ */
.main-content .btn[data-btn-uniform],
.main-content .btn[data-btn-uniform] .btn__text,
.main-content .btn[data-btn-uniform] .btn__icon-text {
  text-transform: none !important;
}

/* ================= PAGE LOCATION - UNIFORMISATION (round 1, 17/07) =================
   Scope via le prefixe de section = propre a la page Location, 0 impact ailleurs.
   Objectif : memes largeurs + couleurs texte = #1f1d1a (marque). */

/* 1) Calculateur : contenu a la page-width (titre + intro alignes comme les autres sections) */
[id^="shopify-section-template--27494358876546__"] .elc__inner {
  max-width: none !important;
  padding-inline: var(--page-padding) !important;
  margin-inline: auto !important;
  width: 100% !important;
}

/* 2) Couleurs texte -> #1f1d1a sur les sections a fond clair (custom-section, calc, icon-cards).
      Exclut boutons/CTA. */
[id^="shopify-section-template--27494358876546__"] .custom-section :is(h1,h2,h3,h4,h5,h6,p,li,strong,em),
[id^="shopify-section-template--27494358876546__"] .elc__inner :is(h2,h3,h4,h5,h6,p,li,strong,em,label),
[id^="shopify-section-template--27494358876546__"] .elc__card :is(p,li,span,strong,label),
[id^="shopify-section-template--27494358876546__"] .icon-cards__container :is(h2,h3,h4,h5,p,li,.icon-cards__eyebrow),
[id^="shopify-section-template--27494358876546__"] .etl-wrap :is(h2,h3,h4,h5,p,li,strong,em),
[id^="shopify-section-template--27494358876546__"] .comparison-table :is(h2,h3,h4,h5,td,th,li),
[id^="shopify-section-template--27494358876546__"] .comparison-table p:not([class*="btn"]),
[id^="shopify-section-template--27494358876546__"] .newsletter :is(h2,h3,h4,p) {
  color: #1f1d1a !important;
}

/* ===== LOCATION HERO - agencement textes = maquette (17/07) ===== */
[id$="__hero_banner_MWKxLk"] .hero-banner__inner { row-gap: 0 !important; }
[id$="__hero_banner_MWKxLk"] .hero-banner__inner .spacer { display: none !important; height: 0 !important; }
[id$="__hero_banner_MWKxLk"] .hero-banner__inner > * { margin: 0 !important; }
[id$="__hero_banner_MWKxLk"] .hero-banner__inner > *:nth-child(1) { margin: 0 0 10px !important; }   /* sur-titre -> titre */
[id$="__hero_banner_MWKxLk"] .hero-banner__inner > *:nth-child(3) { margin: 0 0 24px !important; }   /* titre -> sous-titre */

/* ===== Calc location : wrapper sans padding en trop (20/07)
   Le wrapper shopify-section du calc avait padding-inline:24px -> contenu a 84.
   On le remet a 0 : le contenu s'aligne a 60 (marge du theme) comme icon-cards/etl. ===== */
[id*="elletens_calc_location"] { padding-inline: 0 !important; }

/* ===== Philo : conteneur a la marge native du theme (comme les autres sections) — 20/07 ===== */
.philo__container {
  max-width: none !important;
  padding-inline: var(--page-padding) !important;
  margin-inline: auto !important;
}

/* ===== etfc-articles : au natif dans son wrap (retire le cap 1320 herite) — 20/07 ===== */
.etfc-articles, .etap-partners { max-width: none !important; }

/* ===== ehc-highlight : aligner icone + titre (20/07)
   Le <h3> heritait margin 10px 0 35px (convention titres de section) -> avec
   align-items:center la marge asymetrique decalait le titre au-dessus de l'icone.
   Ici c'est un titre de CARD dans une ligne flex : marge a 0, centrage parfait,
   et petit espace propre avant le paragraphe. Responsive OK (align-items:center). ===== */
.ehc-highlight .row { align-items: center !important; margin: 0 0 8px !important; }
.ehc-highlight .row h3 { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; }

/* ESPACEMENT BOUTON SOUMISSION FORMULAIRES (20/07) - le bouton etait colle (0-8px) au bloc consentement */
.contact-form .submit-btn,
.contact-form [data-uniform-from="submit-btn"]{
  margin-top: 32px !important;
}

/* [APPEL 29/07 #2/#5/#10/#73] LIENS "EN SAVOIR PLUS" / "LE JOURNAL" — reference =
   "Decouvrir le Elle TENS 2" (.gamme__link--plain) de la Home telle qu'elle
   apparait sur la MAQUETTE : petit texte, police normale (casse authored, PAS
   de capitales forcees), SOULIGNE, #373737. La cliente veut le souligne partout
   et la meme casse que la maquette Canva. */
.gamme__link--plain,
.etap-head__link,
.etf-more,
.etfc-articles-more,
.et-more-link{
  font-family: "Montserrat", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: #373737 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.gamme__link--plain:hover,
.etap-head__link:hover,
.etf-more:hover,
.etfc-articles-more:hover,
.et-more-link:hover{ color:#000 !important; }
/* retire la fleche pour matcher le modele (lien texte simple souligne) */
.etap-head__link svg{ display:none !important; }

/* =====================================================================
   CORRECTIONS PIXEL-PERFECT - audit 22/07/2026 (duplicata de travail)
   Ajouts uniquement : aucune regle existante n'est modifiee.
   ===================================================================== */

/* [GLOBAL] Titres en preset "H1"/"H2" (dont la NEWSLETTER en bas de page) :
   le debut du titre tombait en Montserrat sans-serif (Fontify ne couvrait
   que le mot en emphase). On force la police de titre Arsenica, deja chargee. */
.main-content .text-block.h1,
.main-content .text-block.h2 {
  font-family: "Arsenica - typo titre", "Instrument Serif", "Cormorant Garamond", Georgia, serif !important;
}

/* [ACCUEIL] Hero slideshow : les slides 2 et 3 restaient en Poppins sans-serif
   (seul le slide 1 avait ete traite). On force la police titre sur les titres
   de slide (preset "custom"), sans toucher au sur-titre "ELLE TENS 2". */
[id*="slideshow_DqmGRC"] .text-block.custom {
  font-family: "Arsenica - typo titre", "Instrument Serif", "Cormorant Garamond", Georgia, serif !important;
}

/* [BIRTH STORY] Hero : texte en gris fonce illisible sur la photo -> blanc + ombre. */
[id*="hero_banner_MWKxLk"] .text-block,
[id*="hero_banner_MWKxLk"] .text-block * {
  color: #ffffff !important;
}
[id*="hero_banner_MWKxLk"] .text-block {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* [BIRTH STORY] Titre du formulaire : 58px (gonfle par une regle globale) ->
   ~40px (tier "titre de formulaire"). */
.main-content .bsf__title {
  font-size: clamp(28px, 3.4vw, 40px) !important;
  line-height: 1.14 !important;
}

/* [BIRTH STORY] Titres des cartes "Pourquoi partager ?" : 15px -> 22px (tier carte). */
.main-content .icon-cards__title {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

/* [BIRTH STORY] Bouton d'envoi "icon-solid" en pleine largeur : il repetait le
   libelle (effet marquee). On revient a une pilule a largeur de contenu. */
.main-content .bsf__form .submit-btn .btn {
  width: auto !important;
  max-width: max-content !important;
}

/* [ACCES PRO / REVENDEUR] Paragraphe d'introduction (lead) en italique, comme la maquette. */
.main-content .etap-intro,
.main-content .etrv-intro {
  font-style: italic !important;
}

/* [SLIDER ETABLISSEMENTS] Seul changement voulu : la pastille jaune doit toujours
   rester au-dessus de tout (texte du popup, flou du popup, image). Avant elle etait
   en z-index 3, donc le popup de description (z-index 5, avec son flou) la recouvrait
   a l'ouverture. On la remonte au-dessus. AUCUN flou ajoute, rien d'autre modifie. */
.etab-slider .etab-slider__badge {
  z-index: 10 !important;
}

/* =====================================================================
   CORRECTIONS APPEL 29/07/2026 (recette cliente) — thème de travail 189013098882
   Ajouts additifs, verifies vs maquettes Canva (maquettes/svg_source).
   ===================================================================== */

/* [#6] Bouton "VOIR LA COLLECTION" (carte intro de la section gamme) : etait
   en poids 600 (gras) alors que tous les CTA sont en 500. Cliente : "c'est le
   seul bouton qui apparait en gras, les CTA ne sont pas en gras". -> poids 500. */
.main-content .gamme__cta-btn { font-weight: 500 !important; }

/* [#14/#15/#72] En-tete "Nos derniers articles" : titre a gauche + lien
   "Le journal" souligne aligne a droite (baseline), comme la maquette. */
.etfc-articles-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.etfc-articles-header h2{ margin: 0 !important; }
.etfc-articles-header .etfc-articles-more{ flex: 0 0 auto; white-space: nowrap; }

/* [#60] Birth story : "Et si votre histoire..." (marquee) et "Pourquoi partager ?"
   (icon-cards) etaient en titre de section 58px -> TITRE 2 (plus petits), d'apres
   le Canva. (Idem Location icon-cards, cf #34.) */
.main-content .img-marquee__heading,
.main-content .icon-cards__heading {
  font-size: clamp(30px, 3.6vw, 44px) !important;
  line-height: 1.15 !important;
}
/* [#64] Cartes icones (Rassurer/Guider/Faire decouvrir/Inspirer) : rapprocher le
   titre de la carte et son paragraphe (marge divisee par 2 : 8 -> 4px). */
.main-content .icon-cards__title { margin: 0 0 4px !important; }

/* =====================================================================
   CORRECTIONS RECETTE (audit) — additifs, verifies vs maquettes Canva.
   ===================================================================== */

/* [#38] Tableau de comparaison (Achat ou Location) : la colonne Location
   (cellules td.td-checkbox) prenait le fond gris du bandeau, comme la colonne
   des intitules. La maquette la veut BLANCHE comme la colonne Achat ; seule la
   colonne des intitules (.td-label) reste grise. Table native (base.css non
   editable) -> override scope sur la section comparison. */
[id$="__comparison_table_WygXKJ"] .quick-comparison-table td.td-checkbox {
  background: #fff !important;
}

/* [BIRTH STORY] Titre du carrousel "Et si votre histoire pouvait inspirer
   d'autres femmes ?" : rendait en Montserrat (police posee en inline par l'app
   typo sur le <p>/<span> interne) alors que la maquette et les autres titres de
   la page sont en serif de marque. On force la serif sur le titre ET son contenu
   interne (le <em> garde son italique via la regle .img-marquee__heading em). */
.main-content .img-marquee__heading,
.main-content .img-marquee__heading p,
.main-content .img-marquee__heading em,
.main-content .img-marquee__heading span {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
}

/* [HELP CENTER] "Comment pouvons-nous vous aider ?" et "Questions frequentes" :
   mesure audit = titre 2 (~40px), pas 58px. Le verrou global .main-content h2
   (58px) les gonflait. Scope .main-content pour gagner en specificite ; le H1
   .ehc-title reste a 58px (non cible). */
.main-content .ehc-help-title,
.main-content .ehc-faq h2 {
  font-size: clamp(28px, 3vw, 40px) !important;
}

/* [AFFILIATION] Titres de section (Un reseau / Pourquoi ce programme est unique /
   A qui s'adresse / Comment fonctionne) : le verrou "TITRES DE SECTION CUSTOM"
   (.eaf-heading / .eaf-audience__title) les forcait a 58px -> ils passaient sur
   2 lignes. Mesure maquette = titre 2 (~40px). On recale et on retablit l'ecart
   titre->paragraphe de la maquette sur .eaf-heading. */
.main-content .eaf-heading,
.main-content .eaf-audience__title {
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.2 !important;
}
.main-content .eaf-heading {
  margin: 28px 0 10px !important;
}

/* =====================================================================
   [VERIF 30/07] CAPS TITRE-2 (battre le verrou .main-content h1,h2 = 58px)
   La cliente : "c'est titre 2, pas titre 1". Les fixes poses en section
   (font-size sans !important, ou reset :is(...){inherit}) etaient ecrases
   par le verrou global h2. On force ici, en ciblant AUSSI la balise interne
   (richtext h2) qui recevait la taille globale.
   ===================================================================== */
.main-content .etl-heading,
.main-content .etl-heading :is(h1, h2, h3, h4, p) {
  font-size: 30px !important;
  line-height: 1.2 !important;
}
.main-content .elc__heading,
.main-content .elc__heading :is(h1, h2, h3, h4, p) {
  font-size: clamp(34px, 4vw, 46px) !important;
  line-height: 1.15 !important;
}
.main-content .philo__heading,
.main-content .philo__heading :is(h1, h2, h3, h4, p) {
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.2 !important;
}
/* [VERIF 30/07 - regression #50] .philo__heading est passe en <p> (fix layout) :
   le <p> interne retombait en Montserrat -> re-forcer la serif de marque. */
.main-content .philo__heading p {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
}
/* [VERIF 30/07 #26] Titre FAQ help-center : s'aligner a 40px comme son titre soeur. */
.main-content .ehc-faq h2,
.main-content .ehc-faq h2 :is(p) {
  font-size: clamp(34px, 3vw, 40px) !important;
}
/* [VERIF 30/07 #38] Tableau comparaison Location : l'en-tete de la colonne
   "Location" (th 2e colonne) restait grise -> blanche comme la colonne Achat
   (seule la colonne des intitules reste grise). */
[id$="__comparison_table_WygXKJ"] .quick-comparison-table thead th:nth-child(2) {
  background: #fff !important;
}
/* [VERIF 30/07 #47] Cartes gamme : le nom heritait margin 10/35 (verrou global)
   -> le prix decollait de ~35px. Groupe serre meta/nom/prix comme la maquette. */
.gamme__card-name,
.main-content .gamme__card-name {
  margin: 4px 0 2px !important;
}
/* [VERIF 30/07 #52] Cartes philo (Accouchement/Post-partum/Douleurs) : ecart
   titre->description trop grand (verrou 10/35 sur le titre de carte) -> resserre. */
.main-content .philo__card-title {
  margin: 0 0 12px !important;
}

/* =====================================================================
   [VERIF3 30/07] Corrections finales (post round 2)
   ===================================================================== */
/* Newsletter NATIVE : la maquette montre une pilule sans bouton d'envoi.
   On masque le bouton submit des newsletters de page/footer, MAIS on le garde
   dans les pop-ups/dialogs (le pop-up "Get 10% OFF" partage la meme classe). */
.newsletter-form__button { display: none !important; }
dialog .newsletter-form__button,
.popup .newsletter-form__button,
[class*="popup"] .newsletter-form__button,
[class*="modal"] .newsletter-form__button,
.section-popup .newsletter-form__button { display: inline-flex !important; }
/* champ email : occupe toute la pilule une fois le bouton masque */
.newsletter-form__field .newsletter-form__input { padding-inline-end: 22px !important; }

/* [#38] En-tete colonne Location : ce sont des td.h6 (pas des th) -> blanc comme Achat. */
[id$="__comparison_table_WygXKJ"] .quick-comparison-table td.h6 { background: #fff !important; }

/* Birth story : le titre du carrousel "Et si votre histoire..." est un GROS titre
   (~58px, mesure maquette), pas un titre-2 44px -> on le sort du cap 44 (l.#60). */
.main-content .img-marquee__heading,
.main-content .img-marquee__heading :is(p) {
  font-size: clamp(40px, 4.25vw, 58px) !important;
  line-height: 1.15 !important;
}
/* Birth story : texte overlay de la photo formulaire = serif de marque (droit)
   (l'app de typographie le ramenait en Montserrat, pas de regle !important avant). */
.main-content .bsf__sidebar-text,
.main-content .bsf__sidebar-text :is(p, span) {
  font-family: "Arsenica", "Cormorant Garamond", "Instrument Serif", Georgia, serif !important;
  font-style: normal !important;
}
/* Ou trouver : titre CTA "Vous ne trouvez pas de lieux..." (h2 custom-section) = serif. */
.main-content .section .text-block.h2,
.main-content .section .text-block.h2 p {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
}



/* ===================================================================
   [HEROS 30/07] Derogations pixel-perfect par heros (mesurees vs maquette).
   Chaque bloc est scope a UN seul heros. Le bloc partage [id$=__hero_banner_MWKxLk]
   plus haut reste (masque les spacers) ; ces regles surchargent les marges/hauteur.
   =================================================================== */

/* ################## location (page.location-2 / hero_banner_MWKxLk) ################## */
/* ===== LOCATION HERO (hero_banner_MWKxLk) — dérogation maquette Canva =====
   Remplace le bloc "LOCATION HERO" existant d'elletens-global.css (~l.1455-1460).
   Scope strict = cette seule section (sélecteur #ID = plus spécifique que les
   [id$=...] existants -> gagne quel que soit l'ordre). Aucun impact ailleurs. */
#shopify-section-template--27515766899074__hero_banner_MWKxLk .hero-banner__inner {
  row-gap: 0 !important;
  padding-inline-start: 36px !important;         /* inset gauche du texte : 33px -> 69px */
}
#shopify-section-template--27515766899074__hero_banner_MWKxLk .hero-banner__inner .spacer {
  display: none !important;
  height: 0 !important;
}
#shopify-section-template--27515766899074__hero_banner_MWKxLk .hero-banner__inner > * {
  margin: 0 !important;
}
#shopify-section-template--27515766899074__hero_banner_MWKxLk .hero-banner__inner > *:nth-child(1) {
  margin: 0 0 50px !important;                    /* sur-titre -> titre : 19px -> 59px */
}
#shopify-section-template--27515766899074__hero_banner_MWKxLk .hero-banner__inner > *:nth-child(3) {
  margin: 0 0 30px !important;                    /* titre -> sous-titre : 32px -> 38px */
}
@media (min-width: 750px) {
  #shopify-section-template--27515766899074__hero_banner_MWKxLk .section__wrapper {
    min-height: 541px !important;                 /* hauteur de la carte : 520px -> 541px */
  }
  /* Bloc texte ancré en bas ~42px trop bas -> le padding-block-end le remonte
     (bas du sous-titre : 46px -> 88px du bas de carte = maquette). */
  #shopify-section-template--27515766899074__hero_banner_MWKxLk .hero-banner__inner {
    padding-block-end: 42px !important;
  }
  /* Interligne du titre (2 lignes) : 1.0 -> 1.5 (ligne-à-ligne 58px -> 87px = maquette). nth-child(3) = le titre. */
  #shopify-section-template--27515766899074__hero_banner_MWKxLk .hero-banner__inner > *:nth-child(3),
  #shopify-section-template--27515766899074__hero_banner_MWKxLk .hero-banner__inner > *:nth-child(3) * {
    line-height: 1.5 !important;
  }
}

/* ################## birth-story (Partagez votre histoire) — heros hero-banner natif #shopify-section-template--27515767095682__hero_banner_MWKxLk ################## */
/* =====================================================================
   [BIRTH STORY] Hero « Partagez votre histoire » — derogation pixel-perfect
   vs maquette Canva (hauteur + gaps aeres + inset gauche).
   Scope STRICT a CE heros via le prefixe de template 27515767095682 :
   le suffixe __hero_banner_MWKxLk est PARTAGE avec le hero de la page
   Location (regles 10/24 lignes 1456-1460), qui ne doit PAS bouger.
   Le selecteur ID surclasse ces regles [id$=...] a egalite de !important.
   Desktop uniquement (mobile = height_mobile "auto", inchange).
   ===================================================================== */
@media screen and (min-width: 750px) {
  /* Hauteur de la carte : 450px -> 540px (le +90px s'ajoute en haut,
     le contenu reste ancre en bas comme sur la maquette). */
  #shopify-section-template--27515767095682__hero_banner_MWKxLk .section__wrapper {
    height: 540px !important;
    min-height: 540px !important;
  }
  /* Inset gauche du bloc texte : 33px -> 75px depuis le bord de la carte. */
  #shopify-section-template--27515767095682__hero_banner_MWKxLk .hero-banner__inner {
    padding-inline-start: 40px !important;
  }
  /* Sur-titre (TEMOIGNAGES) -> titre : ecart 10px -> 54px (plus aere). */
  #shopify-section-template--27515767095682__hero_banner_MWKxLk .hero-banner__inner > *:nth-child(1) {
    margin: 0 0 54px !important;
  }
  /* Titre -> sous-titre : ecart 24px -> 9px (plus serre). */
  #shopify-section-template--27515767095682__hero_banner_MWKxLk .hero-banner__inner > *:nth-child(3) {
    margin: 0 0 9px !important;
  }
}

/* ################## eshop (page collection) — hero natif hero-banner, clé bs_hero_banner_MWKxLk ################## */
/* ===== ESHOP (page collection) — HERO : dérogation maquette Canva (desktop) =====
   Héros natif hero-banner, clé bs_hero_banner_MWKxLk (le hero_banner_UMGgcV du
   même template est "disabled":true -> non rendu, donc volontairement NON ciblé).
   Sélecteur [id$="__bs_hero_banner_MWKxLk"] = unique à CE héros : ne matche NI le
   hero Location ([id$="__hero_banner_MWKxLk"]) NI le hero Birth story. Zéro impact ailleurs.
   Déroge aux règles globales 10/35 + au clamp fluide de taille du titre.
   Scope desktop uniquement : le mobile garde le rendu natif (hauteur auto, titre 32px). */
@media (min-width: 768px) {

  /* 1) HAUTEUR de la carte : 450px -> 541px (maquette). Le thème pose
     height/min-height: var(--height) ; on surcharge la variable + min-height. */
  [id$="__bs_hero_banner_MWKxLk"] .section__wrapper {
    --height: 541px !important;
    min-height: 541px !important;
  }

  /* 2) TAILLE du titre : restaure la valeur desktop 64px (= JSON = maquette) que le
     clamp fluide bride à ~58px à 1366px. La line-height relative "normal" suit
     automatiquement -> interligne 87px identique à la maquette. */
  [id$="__bs_hero_banner_MWKxLk"] .hero-banner__inner .text-block.custom,
  [id$="__bs_hero_banner_MWKxLk"] .hero-banner__inner .text-block.custom p {
    font-size: 64px !important;
    line-height: 87px !important;   /* interligne des 2 lignes du titre : 71px -> 87px (maquette) */
  }

  /* 3) GAP sur-titre -> titre : ~45px -> ~67px de blanc (maquette).
     La règle globale 10/35 impose margin-top:10px au titre ; on passe à 24px.
     L'interligne 87px ajoute ~8px de demi-interligne au-dessus de la 1re ligne :
     on resserre le margin-top (32 -> 24) pour garder le blanc eyebrow->titre à ~67px. */
  [id$="__bs_hero_banner_MWKxLk"] .hero-banner__inner .text-block.custom {
    margin-top: 24px !important;
  }

  /* 4) INSET gauche du bloc texte : 35px -> 72px depuis le bord de la carte
     (texte à ~131px du bord viewport, comme la maquette). On ne touche que la
     gauche : le padding bas (edge-gap) reste, l'espace bas titre->carte est conservé. */
  [id$="__bs_hero_banner_MWKxLk"] .hero-banner__content {
    padding-inline-start: 72px !important;
  }
}

/* ################## Où trouver nos produits (/pages/ou-trouver-nos-produits) — héros = section main-page (id …__main) ################## */
/* ============================================================
   DÉROGATION HÉROS — page « Où trouver nos produits » (section main-page)
   Maquette : le sous-titre est collé au titre (~20px). La règle
   globale 10/35 laisse ~65px sur ce héros. On resserre UNIQUEMENT
   ce héros : le main-page suivi de la section filtres du store-locator
   (`…__filters`) n'existe que sur cette page -> zéro impact ailleurs.
   Inset gauche (62px) déjà conforme : on n'y touche pas.
   À coller en fin de elletens-global.css.
   ============================================================ */
[id$="__main"]:has(~ [id$="__filters"]) .text-block.h1 {
  margin-top: 24px !important;        /* sur-titre (fil d'Ariane) -> titre : 105px -> 119px (maquette) */
  margin-bottom: 6px !important;      /* titre -> sous-titre : ~20px (au lieu de ~65px) */
}
[id$="__main"]:has(~ [id$="__filters"]) .text-block.rte:not(.h1) {
  padding-block-start: 0 !important;  /* supprime le +16px posé sous le titre par l'éditeur */
  max-width: 760px !important;        /* intro contrainte comme la maquette (~762px) -> passe sur 2 lignes (+28px hauteur héros) */
  margin-bottom: 8px !important;      /* bas intro -> barre de filtres : 42px -> 50px (maquette) */
}

/* ################## acces-pro (Demander un accès professionnel) — section elletens__pro2-title ################## */
/* ============================================================
   DEROGATION HEROS — page "Demander un acces professionnel"
   (section elletens__pro2-title). Retablit les espacements aeres
   de la maquette et neutralise la normalisation globale 10/35 qui
   ecrase le titre <h1>.
   SCOPE : .etap-title / .etap-intro — classes propres a ce heros
   (le seul .etap-title/.etap-intro rendu du site ; pro2-main declare
   ces regles mais ne rend aucun element de ce nom). Specificite
   (0,2,0) > regle globale ".main-content h1" (0,1,1) -> l'emporte.
   N'impacte aucun autre heros/section.
   ============================================================ */
.main-content .etap-title {
  margin-top: 54px !important;    /* breadcrumb -> titre : 86px -> 82px (maquette) */
  margin-bottom: 8px !important;  /* titre -> sous-titre resserre : maquette 33px (live actuel 60px) */
}
.main-content .etap-intro {
  margin-bottom: 48px !important; /* sous-titre -> encadré gris : 52px -> 56px (maquette) */
}
/* inset gauche (62 vs 63px) et taille de police : deja conformes -> rien a changer. */

/* ################## Devenir revendeur (elletens__revendeur — hero "Devenir revendeur") ################## */
/* ============================================================
   [REVENDEUR — hero « Devenir revendeur »] Derogation ciblee.
   Le verrou typo global impose .etrv-title { margin:10px 0 35px }
   et .etrv-intro { margin:0 0 35px } -> il ecrase les gaps aeres
   de la maquette Canva. On restaure les valeurs de la maquette.
   Portee : le prefixe .etrv-* n'existe QUE sur cette page
   (section elletens__revendeur) -> aucun autre hero impacte.
   Le fil d'Ariane .etrv-bread garde sa marge (padding 24/8, non
   verrouille) : tout l'ecart sur-titre->titre vient du titre.
   ============================================================ */
.main-content .etrv-title {
  margin-top: 58px !important;    /* fil d'Ariane -> titre : ~79px d'air (maquette) — verrou global : 10px */
  margin-bottom: 8px !important;  /* titre -> sous-titre : ~30px (maquette) — verrou global : 35px */
}
.main-content .etrv-intro {
  margin-bottom: 57px !important; /* sous-titre -> encadre gris : ~62px (maquette) — verrou global : 35px */
}

/* ################## Programme d'affiliation (elletens__aff-hero) ################## */
/* ============================================================
   ELLE TENS - DEROGATION HEROS : PROGRAMME D'AFFILIATION
   Scope STRICT au hero elletens__aff-hero : .eaf-title = son H1,
   classe unique a ce hero (le reste du site n'utilise jamais
   .eaf-title). .eaf-wrap .eaf-title (0,2,0) + !important bat les
   deux regles globales qui imposent margin:10px 0 35px :
     - .main-content h1      (0,1,1)
     - .eaf-title            (0,1,0)
   Retablit les gaps aeres de la maquette Canva, sans toucher
   la typo ni aucune autre section.
     eyebrow -> titre     : 79px maquette (au lieu de 32px live)
     titre  -> sous-titre : 17px maquette (au lieu de 45px live)
   A coller en FIN de elletens-global.css.
   ============================================================ */
.eaf-wrap .eaf-title {
  margin-top: 57px !important;   /* 10px -> 57px : +47px d'air au-dessus du titre */
  margin-bottom: 7px !important; /* 35px -> 7px  : rapproche le sous-titre du titre */
}

/* ################## Elle TENS — Contact (Formulaire de contact) ################## */
/* ============================================================
   DÉROGATION HERO — page Contact (Elle TENS "Formulaire de contact")
   Recale l'aération du hero sur la maquette Canva (desktop 1366).
   Surcharge les règles globales 10/35 UNIQUEMENT pour le titre + l'intro
   de CE hero. Les classes .etfc-title / .etfc-intro (et le wrap .etfc-wrap)
   sont exclusives au hero contact -> zéro impact sur les autres hero
   (.etap-/.etrv-/.eaf-/.ehc-/.bsf__...). Le double .etfc-wrap monte la
   spécificité (0,2,0) pour battre le global .etfc-title/.etfc-intro (0,1,0)
   !important ET le style inline #shopify-section-... (sans !important).
   Gated desktop pour ne pas régresser le mobile (maquette = 1366 desktop). */
@media (min-width: 750px) {
  .etfc-wrap .etfc-title {
    margin-top: 55px !important;    /* fil d'Ariane -> titre : vise 79px (maq) au lieu de 34px live (10 -> 55) */
    margin-bottom: 3px !important;  /* titre -> sous-titre : vise 69px (maq) au lieu de 101px live (35 -> 3) */
  }
  .etfc-wrap .etfc-intro {
    margin-bottom: 22px !important; /* sous-titre -> formulaire : vise 54px (maq) au lieu de 67px live (35 -> 22) */
  }
}

/* ################## help-center (Elle TENS) — héros haut, section elletens__help-center ################## */
/* [HELP CENTER] Dérogation héros — coller la maquette Canva.
   Les verrous globaux 10/35 (.main-content h1, lignes ~686 et ~814) inversent
   le rythme voulu par la maquette : elle met l'air AU-DESSUS du titre
   (fil d'Ariane -> titre = 82px) et resserre le titre -> sous-titre (32px).
   On rétablit ces écarts UNIQUEMENT sur le titre de ce héros.
   .ehc-title n'existe que dans elletens__help-center.liquid (page.help-center)
   => zéro impact ailleurs. Spécificité (0,2,0)+!important bat le verrou (0,1,1). */
.main-content .ehc-title {
  margin-top: 60px !important;    /* eyebrow(fil d'Ariane) -> titre : 82px (vs 32px) */
  margin-bottom: 5px !important;  /* titre -> sous-titre resserré : 32px (vs 62px) */
}

/* ################## Location — calage bloc Livraison/Reservation (30/07) ################## */
/* Classes .etl-* uniques a la section elletens__livraison -> scope par classe.
   Mesure au pixel vs maquette Canva ; scope desktop (>=900px, la ou mesure ;
   sous 900px la section passe en 1 colonne -> rendu natif conserve, zero regression). */
@media (min-width: 900px) {
  /* #35 : ecart encadre eco (fin de "Tout est prevu") -> titre "Une livraison de
     derniere minute ?" : ~15px -> ~47px (maquette ~48px). padding (pas margin) car
     le top_gap:34 du theme est avale par le margin-collapse. */
  .etl-callout + .etl-heading { padding-top: 32px !important; }
  /* #37 : image de gauche du bloc Livraison plus allongee (maquette ~400x622,
     ratio 0.641) au lieu du 2/3 (0.667) pose en style inline sur .etl-media-inner. */
  .etl-media-inner { aspect-ratio: 400 / 622 !important; }
}

/* ################## [D] Calculateur Location : marge interne du texte resultat ################## */
/* Le texte "Votre periode ideale..." + les dates remplissaient toute la largeur
   interne de la carte (le padding-inline:16px de la section etait ecrase -> rendu 0).
   On garde une vraie marge laterale pour que le texte ne touche pas les bords. */
.elc__result { padding-inline: 30px !important; }

/* ################## [E] Tableau comparatif Location : colonne libelles en BLANC ################## */
/* La colonne des libelles (.td-label : en-tete vide + lignes "Je prevois...") avait un
   fond gris #eeeeee alors que la maquette la montre BLANCHE comme les 2 autres colonnes.
   Le fix #38 ciblait .quick-comparison-table (mauvaise classe) -> sans effet ici.
   Scope = la table Location (id se termine par __comparison_table_WygXKJ). */
[id$="__comparison_table_WygXKJ"] .td-label { background: #ffffff !important; }

/* ################## [MOBILE] Tableau comparatif Location : tenir dans 390px (colonne Achat coupee sinon) ################## */
/* table-layout:fixed + largeurs px ABSOLUES (les % se resolvent sur une base 420 = grille parente plus large ;
   des px fixes forcent la table a 176+92+92 = 360px, dans les 390). */
@media (max-width: 749px) {
  /* le theme pose .quick-comparison-table td{width:11rem} + .td-label{width:20rem} => 420px (deborde 390).
     On force des largeurs rem absolues (memes formes de selecteur + section-id + !important) : 17+9+9 = 35rem = 350px. */
  [id$="__comparison_table_WygXKJ"] .quick-comparison-table { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; }
  [id$="__comparison_table_WygXKJ"] .quick-comparison-table td { width: 9rem !important; min-width: 0 !important; padding-inline: 4px !important; }
  [id$="__comparison_table_WygXKJ"] .quick-comparison-table .td-label { width: 17rem !important; font-size: 13px !important; padding-inline: 6px !important; }
  [id$="__comparison_table_WygXKJ"] .quick-comparison-table .td-checkbox svg { width: 22px; height: 22px; }
  /* Filet de securite : si la table reste plus large que 390 (largeurs rem rigides du composant natif),
     le conteneur devient scrollable horizontalement -> la colonne Achat reste atteignable (swipe), rien n'est coupe. */
  [id$="__comparison_table_WygXKJ"] .comparison-table__content { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ################## [MOBILE] Filtres "Ou trouver" : label au-dessus, 2 selects pleine largeur alignes ################## */
/* (dans global.css = asset, propagation immediate ; le <style> de section peut etre page-cache) */
@media (max-width: 749px) {
  .sf-group--dept { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
  .sf-label { margin-bottom: 2px; }
}

/* ################## [MOBILE] CTA "Decouvrir son fonctionnement" (timeline) : wrap au lieu de tronquer ################## */
/* .btn__text natif = white-space:nowrap + ellipsis -> le long libelle est coupe a 390px (scrollW 305 > 284).
   Scope a l'ID de la section progress_timeline (le wrapper .shopify-section n'a pas de classe dediee). */
@media (max-width: 600px) {
  [id*="progress_timeline"] .btn__text {
    white-space: normal !important; text-overflow: clip !important; overflow: visible !important; line-height: 1.25;
  }
  [id*="progress_timeline"] .section__footer .btn { height: auto !important; min-height: 48px; padding-block: 12px; }
}

/* ################## [LOCATION] Tableau comparatif : image de fond AFFICHEE EN ENTIER (ratio natif, sans rognage) ################## */
/* Demande cliente : ne pas rogner l'image de fond ; l'afficher intégralement a son ratio (ici 5000x3010 = ratio 1.66).
   Avant : .comparison-table__media en absolute inset-0 + img object-fit:cover, hauteur calee sur la carte (674px)
   -> l'image de 858px reels etait rognee haut/bas (~184px perdus).
   Apres : l'image reprend son ratio natif (pleine largeur, hauteur auto) ;
     - desktop : grille "stack", la carte se superpose au centre par-dessus l'image entiere ;
     - mobile  : empilement naturel (image entiere puis carte). */
.comparison-table--full-bg > .comparison-table__media .media {
  height: auto;
  aspect-ratio: var(--ratio);
}
.comparison-table--full-bg > .comparison-table__media .media > img,
.comparison-table--full-bg > .comparison-table__media .media__image {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (min-width: 750px) {
  .comparison-table--full-bg {
    display: grid;
    grid-template-areas: "stack";
  }
  .comparison-table--full-bg > .comparison-table__media,
  .comparison-table--full-bg > .section__container {
    grid-area: stack;
    min-width: 0;
  }
  .comparison-table--full-bg > .comparison-table__media { align-self: start; }
  .comparison-table--full-bg > .section__container { align-self: center; z-index: 1; }
}
@media (max-width: 749px) {
  .comparison-table--full-bg > .comparison-table__media .media {
    aspect-ratio: var(--ratio-mobile, var(--ratio));
  }
}

/* ################## [SEO/FOOTER] Tagline "Repenser la prise en charge de la douleur" : <h1> -> <p> ################## */
/* Le <h1> tagline apparaissait sur TOUTES les pages (h1 parasite). Passe en <p> dans footer-group.json.
   La regle footer `.footer__top-blocks p { line-height:1.2; margin-bottom:15px }` (!important) modifierait le rendu :
   on la neutralise sur ce seul bloc (preset .h2) pour rester PIXEL-IDENTIQUE (lh 1.3125 = 50.4/38.4, marge 0). */
.footer .text-block.h2 p {
  line-height: 1.3125 !important;
  margin: 0 !important;
}


/* =====================================================================
   CORRECTION TICKET #39 (page Location) — 10/08/2026
   Titre du tableau comparatif "Deux facons d'en profiter".
   Il est genere en <p> (bloc text-block preset custom-typography) et
   heritait donc de la regle Fontify injectee en inline
   `p, summary span, .accordion__summary-text { font-family: Poppins !important }`
   (feuille sans href = <style> de l'app, non editable dans le theme).
   On force la police de titre du theme UNIQUEMENT sur le titre du header
   de tableau comparatif : selecteur plus specifique (0,4,1) + !important,
   donc il bat la regle Fontify (0,0,1) quel que soit l'ordre de source.
   Meme famille que les vrais titres de section (.text-block.h2 = Arsenica).
   N'impacte aucun autre .text-block.custom-typography (annonce, etc.). */
.comparison-table .comparison-table__header .text-block.custom-typography p,
.comparison-table .comparison-table__header .text-block.custom-typography p * {
  font-family: Arsenica, "Cormorant Garamond", Georgia, serif !important;
}


/* =====================================================================
   TICKET #22 (reouverture 11/08/2026) - Titres des cartes "highlight"
   du Help Center (Formulaire de contact / Garantie Serenite /
   Professionnels de sante). La section les rend en font-weight:500
   (Arsenica Medium) via un selecteur ID
   (#shopify-section-... .ehc-highlight h3), donc plus gras que les autres
   titres de la page, tous normalises a 400 (.ehc-help-title, .ehc-faq h2,
   .ehc-cta-title, .etfc-card h3...). On aligne ces titres de carte sur la
   meme graisse : Arsenica 400 romain. !important necessaire pour battre le
   selecteur ID non-important de la section. Additif : ne touche pas aux
   descriptions (.ehc-highlight p reste en Montserrat 400). */
.ehc-highlight h3 {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}


/* ################## [#33] STORE-LOCATOR (Ou trouver nos produits) : PHOTOS DE CARTES A TAILLE UNIFORME ################## */
/* Probleme : la carte etablissement est un flex ROW (photo | texte) en align-items:stretch.
   La photo (.location__media .media, inline --ratio:0.8) etait ETIREE verticalement sur la
   hauteur de la colonne texte -> hauteurs de photos inegales (~284 / 322 / 360px) selon la
   longueur du nom/adresse. Reference cliente = carte "Manala" (201.6 x 322.5px, ratio 5/8).
   Fix (desktop >=750px, la ou la carte est en ligne) : on empeche la photo de s'etirer
   (align-self:flex-start) et on lui impose l'aspect-ratio 5/8 -> TOUTES les photos font
   exactement la meme taille que Manala ; object-fit:cover (aucune deformation). La colonne
   texte garde son etirement -> le bouton "Itineraire" reste colle en bas.
   Mobile (<750px) NON touche : la carte y passe en colonne, photo pleine largeur, deja uniforme. */
@media (min-width: 750px) {
  .custom-store-locator .location__media { align-self: flex-start !important; }
  .custom-store-locator .location__media .image-card__media-wrapper { height: auto !important; }
  .custom-store-locator .location__media .media { aspect-ratio: 5 / 8 !important; height: auto !important; }
  .custom-store-locator .location__media img { object-fit: cover !important; }
}


/* =====================================================================
   TICKET #36 (partie B) - page Location, sous-titre du hero
   "Louez votre Elle TENS 2" (bloc text_mLYQDQ, preset "custom").
   Il est rendu en <p> et heritait de la regle Fontify injectee en inline
   (feuille sans href, non editable dans le theme / non corrigeable via Fontify) :
     p, summary span, .accordion__summary-text { font-family: Poppins !important }
   -> il s'affichait en Poppins au lieu de Montserrat, alors que les vrais
   sous-titres (.text-subheading, ex. "Pourquoi louer un Elle TENS 2")
   restent en Montserrat. On aligne CE SEUL bloc sur la police des autres
   sous-titres. Selecteur = classe unique du bloc (specificite 0,1,1) +
   !important : bat la regle Fontify (0,0,1) quel que soit l'ordre de source.
   On ne touche QUE la police (taille 15 / graisse 700 / couleur inchangees).
   N'impacte aucun autre element de la page. */
.text-block--AY0hZWXNkMlN5eUV5b__text_mLYQDQ,
.text-block--AY0hZWXNkMlN5eUV5b__text_mLYQDQ p {
  font-family: "Montserrat", sans-serif !important;
}


/* =====================================================================
   TICKET #47 - Pop-up native "cadeau de bienvenue", titre en Arsenica.
   Le titre est un bloc texte (preset h2) rendu en <p> ; il heritait de la
   regle Fontify injectee en inline (p { font-family: Poppins !important })
   -> il s'affichait en Poppins et n'etait pas ciblable via Fontify.
   On force Arsenica sur CE SEUL bloc (classe unique du bloc, specificite
   qui bat Fontify) ; le <em>bienvenue</em> reste en italique. On ne touche
   ni la taille ni les sous-textes de la pop-up. */
.text-block--AeGpvRHlVMFRwQWg1T__text_aLEBHW,
.text-block--AeGpvRHlVMFRwQWg1T__text_aLEBHW p {
  font-family: "Arsenica", "Cormorant Garamond", Georgia, serif !important;
}


/* [#57] Menu "Decouvrir le Elle TENS 2" : les 3 titres de sous-categorie (Accouchement,
   Douleurs menstruelles / pelviennes, Recuperation post-partum) sont des .mega-menu__link--top
   portant la classe text-decoration-none SANS regle de survol -> ils ne se soulignaient pas au
   survol, contrairement aux autres liens de menu. On restaure le soulignement au survol + focus,
   scope a ces seuls liens. Rien d autre modifie. (verifie au rendu) */
.mega-menu__link--top:hover,
.mega-menu__link--top:focus-visible {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}


/* [#36 Louez - suite] Sous-titre du hero Location "Louez votre Elle TENS 2" : il restait en
   graisse 700 (gras) alors que les autres sous-titres Montserrat (ex. "Pourquoi louer un Elle
   TENS 2", .text-subheading) sont en 500. On aligne CE SEUL bloc sur la meme graisse. Scope au
   bloc unique (specificite 0,1,1) + !important pour battre la graisse du preset. (verifie au rendu) */
.text-block--AY0hZWXNkMlN5eUV5b__text_mLYQDQ,
.text-block--AY0hZWXNkMlN5eUV5b__text_mLYQDQ p {
  font-weight: 500 !important;
}


/* ===== #45 Journal (articles de blog) — titres plus larges + sous-titres non gras (demande 11/08) =====
   1) Le titre d'article etait bride a 880px (.article--width) -> il debordait sur 3-4 lignes en desktop.
      On elargit le bloc a 1040px pour que le TITRE occupe plus de largeur (moins de lignes),
      en RE-limitant le corps (image, contenu, pied) a 880px : la lecture du corps reste identique.
   2) Les sous-titres de section sont enveloppes dans des <b> dans le contenu (rendus en 700 = gras).
      On force la graisse normale (400) a l'affichage, SANS toucher au contenu du blog.
   Elargissement desktop only (sans effet < 1041px). Verifie au rendu (avant/apres). */
@media (min-width: 1041px) {
  .article__main-info.article--width { max-width: 1040px; }
  .article__main-info.article--width .article__image,
  .article__main-info.article--width .article__content,
  .article__main-info.article--width .article__footer { max-width: 880px; margin-left: auto; margin-right: auto; }
}
.article__content h1 b, .article__content h1 strong,
.article__content h2 b, .article__content h2 strong,
.article__content h3 b, .article__content h3 strong,
.article__content h4 b, .article__content h4 strong,
.article__content h5 b, .article__content h5 strong { font-weight: 400; }


/* ===== FAQ (accordeons) — largeur du texte de reponse (demande 24/08, pages FAQ + Location) =====
   Le texte de reponse etait bride (~666px) alors que la question occupe toute la largeur (~954px).
   On aligne le texte de reponse sur la largeur de la question, SANS toucher aux images/boutons. */
.accordion__content .text-block { align-items: stretch; }
.accordion__content .text-block > p,
.accordion__content .text-block > ul,
.accordion__content .text-block > ol,
.accordion__content .text-block > h2,
.accordion__content .text-block > h3,
.accordion__content .text-block > h4 { max-width: 100%; width: 100%; }


/* ===== #34 En-tetes de page : espacer le sous-titre du titre (demande 09/08 + Help Center/formulaires) =====
   Le sous-titre (.text-block.color-subtext) etait colle au titre (~18px). On aere a 30px.
   Selecteur = motif d'en-tete (titre color-text suivi du sous-titre color-subtext) -> vaut aussi
   sur Help Center et les formulaires (meme structure). */
.text-block.color-text + .text-block.color-subtext { margin-top: 30px; }


/* ===== #49 Bloc "Nos derniers articles" (etfc-articles) : aerer titre -> cartes (demande cliente) =====
   Le titre etait trop pres des cartes (~40px). On aere a 64px pour un rendu plus respirant. */
.etfc-articles .etfc-cards { margin-top: 64px; }


/* #56 FAQ - bloc Document a telecharger */
.faq-download{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-block:.5rem}
.faq-download__meta{font-size:.85em;opacity:.7}
.faq-download--empty{font-size:.9em;opacity:.65;padding:.5rem .75rem;border:1px dashed currentColor;border-radius:8px}


/* #47 pop-up de bienvenue : titre en Arsenica (typo titre de la marque, non attrapee par Fontify) */
#SubscribePopup .h2,
#SubscribePopup .h2 * {
  font-family: 'Arsenica - typo titre', 'Arsenica', var(--font-heading--family), serif !important;
}


/* ============ Ticket #36 A+B - EN-TETES hero-banner ============ */
/* A - Eyebrow cale sur le standard (Montserrat 18px / 500 / 0.05em / uppercase) */
.hero-banner__inner > .text-block:first-child,
.hero-banner__inner > .text-block:first-child :is(p, strong) {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}
/* B - Marge titre -> sous-titre des en-tetes = reference Location (35px) */
.main-content .hero-banner__inner > .text-block.custom:not(:first-child) {
  margin-bottom: 35px !important;
}