/** Shopify CDN: Minification failed

Line 6:2 Unexpected "="

**/
* ===================================================================== */
/* CUSTOM STYLES — VIEWS MAGAZINE                                       */
/* Version : 2025-05-27 – ULTIME TENTATIVE BLOG + PAYWHIRL              */
/* Basé sur la version du 2025-05-24 – FULL & COMMENTÉE                 */
/* ===================================================================== */
/* Rappels Shopify Dawn :                                               */
/* --heading-font-stack : "Libre Caslon Text"                        */
/* --body-font-stack    : "Neue Haas Unica"                          */
/* ===================================================================== */

/* ********************************************************************* */
/* 1. Correctifs PayWhirl (Général)                                      */
/* ********************************************************************* */
.paywhirl-plan-selector .paywhirl-info-popup { display: none !important; }

@media (max-width: 767px){
  .paywhirl-plan-selector .paywhirl-plan-selector-group .paywhirl-plan-selector-plan  { overflow: hidden; }
  .paywhirl-plan-selector .paywhirl-plan-selector-group .paywhirl-plan-selector-plan select {
    width: 100%; max-width: 100%; box-sizing: border-box;
  }
}

/* ********************************************************************* */
/* 2. Navigation : pousser « ANNONCEURS » à droite (desktop)             */
/* ********************************************************************* */
@media (min-width: 1024px){
  nav[aria-label="Navigation principale"] ul            { flex-grow: 1; }
  nav[aria-label="Navigation principale"] ul li:last-child { margin-left: auto; }
}

/* ********************************************************************* */
/* 3. Section « Articles en vedette » (homepage)                          */
/* ********************************************************************* */

/* 3-A — Bouton « Lire » (styles de base du lien) */
.featured-blog-posts-section .read-more-link-container {
  margin-bottom: 1.5rem;
}
.featured-blog-posts-section .read-more-link-container .theme-link{
  display: inline-flex; align-items: center; justify-content: center;
  padding-bottom: 8px; font-size: 1.1rem; text-decoration: none !important;
}

/* 3-B — Titres des cartes (Homepage) */
.featured-blog-posts-section h2.text-heading-secondary,
.featured-blog-posts-section h3.text-heading-secondary{
  font-family: var(--heading-font-stack, serif) !important;
  font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.04em;
}
@media (min-width: 768px){
  .featured-blog-posts-section h2.text-heading-secondary,
  .featured-blog-posts-section h3.text-heading-secondary{ font-size: 1.75rem; }
}

/* 3-C — Extraits : police & taille (Homepage) */
.featured-blog-posts-section .rte,
.featured-blog-posts-section .rte.text-base,
.featured-blog-posts-section .rte *{
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.02em !important;
}
@media (min-width: 768px){
  .featured-blog-posts-section .rte,
  .featured-blog-posts-section .rte.text-base,
  .featured-blog-posts-section .rte *{
    font-size: 1.15rem !important;
  }
}

/* 3-D — Interlignage & marges pour extraits (Homepage) */
.featured-blog-posts-section li .rte {
  line-height: 1.15 !important; 
  margin-bottom: 1rem !important; 
}
.featured-blog-posts-section li .rte > * { margin: 0 0 .75em !important; }

/* 3-E — Verrou : titres restent en Libre Caslon Text (Homepage) */
.featured-blog-posts-section h2.font-heading,
.featured-blog-posts-section h3.font-heading{
  font-family: var(--heading-font-stack, serif) !important;
}

/* 3-F — Alignement du lien "Lire" en bas de carte (Homepage) */
.featured-blog-posts-section ol > li > .block.h-full {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.featured-blog-posts-section ol > li > .block.h-full > div[class*="px-section-horizontal-spacing"][class*="pb-section-vertical-spacing"] {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}
.featured-blog-posts-section ol > li .read-more-link-container {
  margin-top: auto !important;
  padding-top: 2rem !important;   
}

/* ********************************************************************* */
/* 4. HÉRO homepage (Jolagreen23)                                        */
/* ********************************************************************* */
.blog-feature-section .rte.text-base,
.blog-feature-section .rte.text-base *,
.blog-feature-section .rte.font-heading,
.blog-feature-section .rte.font-heading *{
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 1.05rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
@media (min-width: 768px){
  .blog-feature-section .rte.text-base,
  .blog-feature-section .rte.text-base *,
  .blog-feature-section .rte.font-heading,
  .blog-feature-section .rte.font-heading *{
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }
}

/* ********************************************************************* */
/* 5. Typographie générale articles (.rte)                               */
/* ********************************************************************* */
.rte h1{ font-size: 1.3rem;  font-weight: 600; line-height: 1;   margin: 2.2em 0 1em; }
.rte h2{ font-size: 1.2rem; font-weight: 600; line-height: 1.2; margin: 2.2em 0 1em; letter-spacing: .02px; }
.rte h3{ font-size: 1.5rem;  line-height: 1.2; margin: 1.5em 0 .5em; color:#222; }
.rte h6,
.rte figcaption{ font-size: .95rem; line-height: 1.4; font-style: italic; text-align: center; color:#4a4a4a; margin: .6em 0 1.8em; }

.rte p,
.rte p.interview-answer{
  font-family: var(--body-font-stack, sans-serif) !important;
  font-size: 1.20rem !important; /* Taille de base des paragraphes .rte */
  line-height: 1.15 !important;
  color: black !important;
  margin-bottom: 1.1em !important;
  letter-spacing: -0.02em !important;
}
.rte p.interview-answer strong { font-weight: 700 !important; color: #000 !important; }

.article-content.rte h2.text-heading-secondary.mt-3{
  font-size: 1.5rem; line-height: 1.3; margin: 1.5em 0 .75em;
}

/* ********************************************************************* */
/* 6. Crédits fin d’article                                              */
/* ********************************************************************* */
.rte .article-credits{
  margin: 1em 0; padding-top: 1em; border-top: 1px solid #e0e0e0;
  font-size: .95rem; color:#333; line-height: 1;
}
.rte .article-credits h5     { font-size: 1.2rem; font-weight: 700; margin-bottom: 1em; color:#111; }
.rte .article-credits ul     { list-style: none; padding: 0; margin: 0; }
.rte .article-credits ul li  { margin-bottom: .5em; }
.rte .article-credits ul li strong { font-weight: 600; }

/* ********************************************************************* */
/* 7. Correctifs divers                                                  */
/* ********************************************************************* */
.line-through[aria-hidden="true"] { text-decoration: none !important; }

/* ********************************************************************* */
/* 8. Styles pour les pages de Blog (body.template-blog)                 */
/* (Ex: Stories, Interviews - pour les cartes d'articles)                */
/* ********************************************************************* */

/* 8-A — Extraits dans les cartes de blog (basé sur votre CSS du 24/05, section 8-c) */
body.template-blog ol.grid > li .block.h-full .rte.mt-4,
body.template-blog ol.grid > li .block.h-full .rte.mt-4 * {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 1.15rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: rgb(var(--color-scheme-text)) !important;
}
@media (min-width: 768px){
  body.template-blog ol.grid > li .block.h-full .rte.mt-4,
  body.template-blog ol.grid > li .block.h-full .rte.mt-4 * {
    font-size: 1.15rem !important;
    line-height: 1.15 !important;
  }
}
body.template-blog ol.grid > li .block.h-full .rte.mt-4 {
   margin-bottom: 1.5rem !important;
}
body.template-blog ol.grid > li .block.h-full .rte.mt-4 > * {
  margin-bottom: 0.75em !important;
}

/* 8-B — Titres des cartes-articles sur les pages de blog (basé sur votre 8-ter/8-quater de la version du 24/05) */
/* SI LES TITRES SONT TOUJOURS TROP PETITS, AUGMENTEZ LES VALEURS font-size CI-DESSOUS */
body.template-blog h2.text-heading-secondary,
body.template-blog h3.text-heading-secondary,
body.template-blog .article-card__title,
.blog h2.text-heading-secondary,
.blog h3.text-heading-secondary {
  font-family: var(--heading-font-stack, serif) !important;
  font-size: 1.35rem !important; /* Taille mobile de votre CSS de base */
  line-height: 1.25 !important;
  letter-spacing: -0.04em !important;
  color: rgb(var(--color-scheme-text)) !important;
  margin-bottom: 0.5em !important;
}
@media (min-width: 768px){
  body.template-blog h2.text-heading-secondary,
  body.template-blog h3.text-heading-secondary,
  body.template-blog .article-card__title,
  .blog h2.text-heading-secondary,
  .blog h3.text-heading-secondary {
    font-size: 1.75rem !important; /* Taille desktop de votre CSS de base */
  }
}

/* 8-C — Styles pour le lien "Lire" sur les pages de blog (texte du lien) */
body.template-blog ol.grid > li .theme-link {
  font-size: 1.1rem !important;
}

/* 8-D — Alignement du lien "Lire" en bas des cartes sur les pages de blog (RÈGLES FLEXBOX NETTOYÉES ET CORRIGÉES) */
body.template-blog ol.grid > li {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
body.template-blog ol.grid > li > .block.h-full {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}
body.template-blog ol.grid > li > .block.h-full > .px-section-horizontal-spacing {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding-bottom: 1rem;
}
body.template-blog ol.grid > li > .block.h-full > .px-section-horizontal-spacing > div.mt-4:last-of-type {
  margin-top: auto !important;
  padding-top: 1rem !important;
  margin-bottom: 0.5rem !important;
}

/* 8-E — Forcer l'empilement & le push du lien “Lire” (Stories / Interviews) */
body.template-blog ol.grid > li .px-section-horizontal-spacing > .lg\:w-2\/3{
  /* 1. On transforme l'enveloppe .lg:w-2/3 en colonne flex */
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;   /* prend toute la hauteur restante */
}

/* 2. On pousse le conteneur du lien en bas,
   quel que soit son niveau d'imbrication */
body.template-blog ol.grid > li .read-more-link-container{
  margin-top: auto !important;
  padding-top: 1.5rem !important;       /* même espacement que la home */
}

/* ------------------------------------------------------------------ */
/* 9. Blockquotes : retirer le fond noir et remettre la typo normale  */
/* ------------------------------------------------------------------ */
.rte blockquote{
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.rte blockquote h1,
.rte blockquote p,
.rte blockquote em{
  color: #000 !important;
}

/* ------------------------------------------------------------------ */
/* 10. Blockquotes : augmenter la taille de police                    */
/* ------------------------------------------------------------------ */
.rte blockquote {
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  margin: 1.5em 0 !important;
}
@media (min-width: 768px) {
  .rte blockquote {
    font-size: 2rem !important;
  }
}
.rte blockquote h1 {
  font-size: 2rem !important;
  line-height: 1.2 !important;
  margin: 1em 0 !important;
}
@media (min-width: 1024px) {
  .rte blockquote h1 {
    font-size: 1.8rem !important;
  }
}
.rte blockquote h1,
.rte blockquote p {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  letter-spacing: -0.04em;
}
.rte h2 strong,
.rte blockquote h1 strong,
.rte blockquote p strong {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em;
}

/* —————————————————————————————————————————— */
/* 11. Prix produit : taille plus petite     */
/* —————————————————————————————————————————— */
.product-price-block > span[x-html] {
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
}

/* ————————————————————————————————————————————————  */
/* Forcer la typo body (Neue Haas Unica) sur les options d’achat  */
/* ————————————————————————————————————————————————  */
.paywhirl-plan-selector,
.paywhirl-plan-selector * {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
}

/* Réquilibrer le bloc avec la quote statement "Views est un média blablabla"  */
#shopify-section-template--24817114808652__rich_text_JiYQWV .px-section-horizontal-spacing {
  margin-top: 1.7rem;
}

/* ===================================================================== */
/* 13. PayWhirl - Harmonisation du style des options d'achat             */
/* avec la description du produit (UNIQUEMENT SUR PAGES PRODUIT)       */
/* ===================================================================== */
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-header,
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-group-name, /* Labels comme "Achat unique" */
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-plan label, /* Label comme "Type d'abonnement" */
body.template-product #paywhirl-plan-selector-0 .paywhirl-info-popup-trigger span,
body.template-product #paywhirl-plan-selector-0 .paywhirl-info-popup-content p,
body.template-product #paywhirl-plan-selector-0 select,
body.template-product #paywhirl-plan-selector-0 option {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 1.20rem !important;      /* Correspond à .rte p (section 5) */
  line-height: 1.15 !important;     /* Correspond à .rte p (section 5) */
  color: rgb(var(--color-scheme-text)) !important;
  font-weight: var(--body-font-weight, 400) !important; /* Poids normal */
  letter-spacing: -0.02em !important;/* Correspond à .rte p (section 5) */
  text-transform: none !important;    /* Assure pas de majuscules forcées */
  background: none !important;        /* Neutralise fonds potentiels */
  border: none !important;            /* Neutralise bordures potentielles */
  padding: 0 !important;              /* Neutralise paddings sur labels pour éviter conflits */
  margin: 0.3em 0 !important;         /* Marge verticale pour espacement des labels/options */
}

/* Spécificité pour le titre principal "Options d'achat" */
body.template-product #paywhirl-plan-selector-0 > .paywhirl-plan-selector-header {
  margin-bottom: 0.75em !important; /* Espace sous le titre principal */
  /* Si vous voulez le titre "Options d'achat" en gras : */
  /* font-weight: var(--body-font-bold-weight, 700) !important; */
}

/* Espacement pour les groupes d'options radio */
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-group {
    margin-bottom: 0.75em !important;
}
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-group > .paywhirl-label {
    display: flex;
    align-items: center;
    margin-bottom: 0.25em !important; /* Marge réduite car .paywhirl-plan-selector-group-name a déjà un margin-top/bottom implicite */
}
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-group-name {
    margin-left: 0.5em; /* Espace après l'icône radio/checkbox */
}

/* Styles pour les <select> de PayWhirl */
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-plan {
    margin-top: 0.5em !important; /* Espace au-dessus du bloc select */
}
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-plan label.paywhirl-label {
    margin-bottom: 0.25em !important; /* Espace sous le label "Type d'abonnement" */
}
body.template-product #paywhirl-plan-selector-0 select {
    padding: 0.5em !important;
    border: 1px solid rgba(var(--color-scheme-text), 0.5) !important; /* Bordure plus discrète */
    width: 100%;
    background-color: rgb(var(--color-scheme-background)) !important; /* Fond pour lisibilité */
    border-radius: 0 !important;
}

/* Styles pour les prix dans PayWhirl */
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-price,
body.template-product #paywhirl-plan-selector-0 .paywhirl-plan-selector-group-price {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 1rem !important;    /* Prix un peu plus petit ou 1.20rem pour être identique */
  line-height: 1.15 !important;
  color: rgb(var(--color-scheme-text)) !important;
  letter-spacing: -0.02em !important;
  margin-left: 0.5em; /* Espace par rapport au label de l'option */
  font-weight: var(--body-font-weight, 400) !important; /* Assure que les prix ne sont pas en gras par défaut */
}
body.template-product #paywhirl-plan-selector-0 .paywhirl-price-from,
body.template-product #paywhirl-plan-selector-0 .paywhirl-price,
body.template-product #paywhirl-plan-selector-0 .paywhirl-price-each,
body.template-product #paywhirl-plan-selector-0 .paywhirl-compare-at-price {
  font-weight: inherit !important; /* Hérite du poids du conteneur de prix */
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* Styles pour les <strong> dans PayWhirl */
body.template-product #paywhirl-plan-selector-0 strong {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-weight: var(--body-font-bold-weight, 700) !important;
  color: rgb(var(--color-scheme-text)) !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* ================================================================= */
/* PAYWHIRL – typo & layout alignés sur la description produit       */
/* ================================================================= */
#paywhirl-plan-selector-0,
#paywhirl-plan-selector-0 * {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 1rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.00em !important;
  text-transform: none !important;
  font-weight: var(--body-font-weight, 400) !important;
}

/* aligne bullet + texte sur la même ligne */
#paywhirl-plan-selector-0 input[type='radio'] + label,
#paywhirl-plan-selector-0 input[type='checkbox'] + label {
  display: flex;
  align-items: center;
  gap: .5em;
}

/* hérite la typo dans les éventuels boutons */
#paywhirl-plan-selector-0 button {
  font: inherit !important;   /* taille + famille en un coup */
  text-transform: none !important;
  letter-spacing: inherit !important;
}

/* ================================================================= */
/* BLOG (Stories / Interviews) – pousser “Lire” en bas               */
/* ================================================================= */
body.template-blog ol.grid > li{display:flex!important;flex-direction:column!important;height:100%}
body.template-blog ol.grid > li .block.h-full{display:flex!important;flex-direction:column!important;flex-grow:1}
body.template-blog ol.grid > li .px-section-horizontal-spacing{display:flex!important;flex-direction:column!important;flex-grow:1}
body.template-blog ol.grid > li .px-section-horizontal-spacing>.mt-4:last-child,
body.template-blog ol.grid > li .px-section-horizontal-spacing>.read-more-link-container{margin-top:auto!important;padding-top:1.5rem!important}
body.template-blog .theme-link{font-size:1.1rem!important}

/* 8-F — L’extrait occupe tout l’espace restant ---------------------- */
body.template-blog ol.grid > li .rte.mt-4{
  flex: 1 0 auto !important;   /* prend la hauteur disponible */
}

/* 8-F — occuper l’espace + neutraliser le <ul> vide    */
body.template-blog ol.grid > li .rte.mt-4                 { flex: 1 1 auto !important; }
body.template-blog ol.grid > li ul:empty                  { display:none !important; }

/* —————————————————————————————————————————— */
/* Stories page : bouton “Lire” collé en bas  */
/* —————————————————————————————————————————— */
.shopify-section.blog-template ol.grid > li {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.shopify-section.blog-template ol.grid > li .block.h-full {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.shopify-section.blog-template ol.grid > li .px-section-horizontal-spacing {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.shopify-section.blog-template ol.grid > li .read-more-link-container {
  margin-top: auto !important;
  padding-top: 1.5rem !important;  /* espace avant le bouton */
}

/* Cible la section rich text contenant votre phrase */
#shopify-section-template--24817114808652__rich_text_JiYQWV .flex.text-left.justify-start {
  justify-content: center !important;  /* centre horizontalement le conteneur flex */
  text-align: center !important;       /* centre le texte à l’intérieur */
}

/* Au cas où le h2 conserverait un alignement gauche */
#shopify-section-template--24817114808652__rich_text_JiYQWV h2 {
  text-align: center !important;
}

/* Cible votre section rich-text */
#shopify-section-template--24817114808652__rich_text_JiYQWV .px-section-horizontal-spacing {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* === FAQ : agrandir les titres des questions === */
@media (max-width: 767px) {
  /* mobile (si vous voulez cibler seulement smartphone) */
  #shopify-section-template--24817114939724__faq h2.text-heading-secondary {
    font-size: 1.5rem !important;   /* ajustez la valeur selon vos besoins */
    line-height: 1.3 !important;
  }
}

@media (min-width: 768px) {
  /* tablette & desktop */
  #shopify-section-template--24817114939724__faq h2.text-heading-secondary {
    font-size: 1.55rem !important;  /* ou la taille desktop désirée */
    line-height: 1.3 !important;
  }
}

/* Centre et contraint le bloc de texte “À propos” */
#shopify-section-template--24817114972492__main .rte {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}
@media (min-width: 768px) {
  #shopify-section-template--24817114972492__main .rte {
    padding: 0 2rem !important;
  }
}

#shopify-section-template--24817114972492__main h1 {
  display: none !important;
}

/* —— TITRES DES CARTES : max 2 lignes + “…” —— */
.featured-blog-posts-section h2,
.featured-blog-posts-section h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;   /* 2 lignes maxi */
  overflow: hidden;
  min-height: 0;           /* on laisse le clamp décider */
}

/* **********************/
/*  Masquer l’extrait    */
/*  UNIQUEMENT pour le   */
/*  bloc “Interviews”    */
/*  sur la homepage      */
/* **********************/

/* Ciblage précis du conteneur “Interviews” */
#shopify-section-template--24817114808652__blog-posts .rte.mt-4 {
  display: none !important;
}

/* 1) Réduire la marge verticale */
.fancy-cover-outer-container[data-section-id="{{ section.id }}"] {
  margin-top: 10px;    /* ajustez à la valeur souhaitée */
  margin-bottom: 10px; /* ajustez à la valeur souhaitée */
}

/* 2) Transformer toute la zone en “click area” vers le produit */
.fancy-cover-outer-container[data-section-id="{{ section.id }}"] {
  position: relative;  /* nécessaire pour positionner l’overlay */
  cursor: pointer;     /* affiche le curseur “pointer” */
}

/* On crée une “couche” invisible qui recouvre complètement la section */
.fancy-cover-outer-container[data-section-id="{{ section.id }}"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;        /* au-dessus des autres éléments */
}

/* 3) Désactiver tout style de lien par défaut, puisque l’overlay est un lien transparent */
.fancy-cover-outer-container a.section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

/* 1) Rendre l’overlay cliquable sur toute la section */
.section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: block;
}

/* 2) Faire en sorte que le conteneur parent soit en position relative */
.fancy-cover-outer-container {
  position: relative;
  /* 3) Réduire les marges haut et bas (ajuste les valeurs selon ton besoin) */
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* 4) Si tu veux enlever complètement la marge horizontale sur desktop */
.fancy-cover-outer-container.is-full-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Réduit la taille de l'h2 "De la même collaboration" */
.complementary-products-block-title {
  font-size: 1.5rem; /* vous pouvez ajuster cette valeur */
  line-height: 1.2; /* facultatif, pour contrôler l’interlignage */
}

/* ------------------------------------------
   Centrage vertical “sans flex” pour le H2,
   en gardant le bloc tel quel (display: block)
   ------------------------------------------ */
/* Cible uniquement ce titre “De la même collaboration” */
.complementary-products-block-title {
  /* On remplace la grosse marge/padding d’origine (pt-theme-double, pb-theme) 
     par des paddings égaux en haut et en bas. Ajustez 0.75rem ↔ 24px selon vos besoins. */
  padding-top:    0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.fancy-covers-wrapper {
  display: flex;
  gap: 20px;
}
.fancy-covers-wrapper > .fancy-threejs-container-class {
  flex: 1;
}

.map-wrapper {
  position: relative;
  width: 100%; /* pleine largeur du conteneur */
  padding-top: 62%; /* ratio ≈4:3 – adaptez au besoin */
  overflow: hidden; /* coupe ce qui dépasse */
  border-radius: 12px; /* mêmes arrondis que le site */
}

.map-wrapper iframe {
  position: absolute;
  top: -55px; /* décale l’iframe vers le haut ➜ titre masqué */
  left: 0;
  width: 100%;
  height: calc(100% + 55px); /* compense la hauteur rognée */
  border: 0;
  /* Effet optionnel pour « dégriser » la carte et se fondre au design : */
  filter: grayscale(100%) contrast(1.2);
}

@media (max-width: 767px) {
  .product-single__view-in-space {
    display: none !important;
  }
}

/* ===================================================================== */
/* PANIER - Stylisation des propriétés d'abonnement                      */
/* ===================================================================== */

/* Conteneur des propriétés (Shopify utilise une liste <dl>) */
.cart-item__details,
.cart-item__property {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  margin-top: 0.75rem !important;
}

/* Si les propriétés sont dans un paragraphe ou div */
.cart-item__details p,
.cart-item__details div {
  margin: 0.25rem 0 !important;
  padding: 0 !important;
}

/* Style pour chaque ligne de propriété (Type:, Durée:, etc.) */
.cart-item__details .cart-item__property,
.cart-item__property {
  display: block;
  padding: 0.4rem 0.75rem;
  background-color: #f9fafb;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #374151;
}

/* Mise en forme du label (Type, Durée, etc.) */
.cart-item__property strong,
.cart-item__details strong {
  font-weight: 600 !important;
  color: #111827 !important;
  margin-right: 0.5rem;
}

/* Mise en évidence des valeurs contenant un prix */
.cart-item__property:has(*:contains("€")),
.cart-item__details:has(*:contains("€")) {
  background-color: #ecfdf5;
  border-left-color: #059669;
}

/* Alternative si :has() ne fonctionne pas : cibler les textes avec € directement */
.cart-item__property,
.cart-item__details p {
  /* Si la ligne contient "€", on la met en vert */
}

/* Style spécifique pour les paragraphes dans cart-item__details */
.cart-item__details > p {
  padding: 0.3rem 0.75rem !important;
  background-color: #f9fafb !important;
  border-left: 3px solid #3b82f6 !important;
  border-radius: 4px !important;
  margin: 0.3rem 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}

/* Espacement global pour le bloc de propriétés */
.cart-item__details {
  margin-top: 1rem !important;
  padding-top: 0.5rem !important;
}

/* Mobile : ajuster la taille */
@media (max-width: 767px) {
  .cart-item__property,
  .cart-item__details > p {
    font-size: 0.875rem !important;
    padding: 0.35rem 0.6rem !important;
  }
}

/* ===================================================================== */
/* PANIER - Stylisation ULTRA-CIBLÉE des propriétés d'abonnement         */
/* ===================================================================== */

/* Cible le texte des propriétés dans le panier */
#MainContent form[action="/cart"] li[data-line-item-key] div {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

/* Si le texte contient "Type:" ou "Durée:", on le met en boîte */
#MainContent form[action="/cart"] li[data-line-item-key] > div > div:nth-child(2) {
  margin-top: 0.75rem !important;
}

/* Style pour chaque ligne contenant ":" (propriété Shopify) */
#MainContent form[action="/cart"] li[data-line-item-key] p,
#MainContent form[action="/cart"] li[data-line-item-key] div[class*="details"] {
  padding: 0.4rem 0.75rem;
  background-color: #f9fafb;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  margin: 0.3rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #374151;
}

/* Ciblage du texte contenant les propriétés */
body.template-cart [data-line-item-key] > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.75rem;
}

/* Chaque ligne de propriété */
body.template-cart [data-line-item-key] > div:nth-child(2) > div:not([class]) {
  padding: 0.4rem 0.75rem !important;
  background-color: #f9fafb !important;
  border-left: 3px solid #3b82f6 !important;
  border-radius: 4px !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: #374151 !important;
}

/* ================================================================= */
/* NEWSLETTER KLAVIYO — DA VIEWS (Minimal & Grid)                   */
/* ================================================================= */

/* 1. Reset du conteneur Klaviyo pour qu'il remplisse la cellule */
.newsletter-section .klaviyo-form-VgvP8u,
.newsletter-section .klaviyo-form-VgvP8u form,
.newsletter-section .klaviyo-form-VgvP8u * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.newsletter-section .klaviyo-form-VgvP8u form {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important; /* Aligne le texte du bouton sur la ligne de l'input */
  gap: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* 2. Masquer les titres Klaviyo (on utilise ceux du Liquid) */
.newsletter-section .klaviyo-form-VgvP8u div[data-testid="form-row"]:has(div[id^="rich-text"]) {
  display: none !important;
}

/* 3. L'Input : Style "Views" (Transparent + Border Bottom uniquement) */
.newsletter-section .klaviyo-form-VgvP8u input[type="email"],
.newsletter-section .klaviyo-form-VgvP8u input[type="text"] {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgb(var(--color-scheme-text)) !important; /* Ligne fine noire */
  border-radius: 0 !important;
  padding: 0.5rem 0 !important; /* Pas de padding gauche/droite pour alignement strict */
  height: auto !important;
  
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  color: rgb(var(--color-scheme-text)) !important;
  letter-spacing: -0.02em !important;
  outline: none !important;
  width: 100% !important;
  transition: border-color 0.2s ease;
}

/* Placeholder discret */
.newsletter-section .klaviyo-form-VgvP8u input::placeholder {
  color: rgba(var(--color-scheme-text), 0.5) !important;
  text-transform: uppercase !important; /* Optionnel : style édito */
  font-size: 0.85rem !important;
}

/* Focus state */
.newsletter-section .klaviyo-form-VgvP8u input:focus {
  border-bottom-color: rgb(var(--color-scheme-accent)) !important;
}

/* 4. Le Bouton : Style "Text Link" avec flèche (DA Views) */
.newsletter-section .klaviyo-form-VgvP8u button {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important; /* Même padding vertical que l'input */
  margin: 0 !important;
  height: auto !important;
  
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgb(var(--color-scheme-text)) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-bottom: 1px solid transparent !important; /* Pour éviter le saut au hover */
}

/* Ajout de la flèche après le texte */
.newsletter-section .klaviyo-form-VgvP8u button::after {
  content: '\00a0\2192' !important; /* Espace insécable + flèche droite */
  display: inline-block;
}

/* Hover effect */
.newsletter-section .klaviyo-form-VgvP8u button:hover {
  color: rgb(var(--color-scheme-accent)) !important;
}

/* 5. Messages de succès/erreur discrets */
.newsletter-section .klaviyo-form-VgvP8u .klaviyo_messages .success_message {
  font-size: 0.9rem !important;
  margin-top: 0.5rem !important;
  color: rgb(var(--color-scheme-text)) !important;
}

/* 6. Mobile : Stack vertical */
@media (max-width: 767px) {
  .newsletter-section .klaviyo-form-VgvP8u form {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  
  .newsletter-section .klaviyo-form-VgvP8u button {
    width: 100% !important;
    text-align: left !important;
    border-bottom: 1px solid rgb(var(--color-scheme-text)) !important; /* Ligne sous le bouton en mobile */
  }
}

/* ================================================================= */
/* 14. FOOTER - Harmonisation des titres                             */
/* ================================================================= */

/* Cible les titres H2 dans le footer (Nos Services / Notre Équipe) */
footer[data-theme-footer] h2,
.shopify-section-group-footer-group h2 {
  font-family: var(--body-font-stack, "Neue Haas Unica", sans-serif) !important; /* Même police que le texte */
  font-weight: 700 !important; /* Gras */
  font-size: 0.9rem !important; /* Taille légèrement réduite pour l'élégance */
  letter-spacing: 0.02em !important; /* Léger espacement pour la lisibilité */
  text-transform: uppercase !important; /* Force la majuscule */
  margin-bottom: 1.2rem !important; /* Espace sous le titre */
  color: rgb(var(--color-scheme-text)) !important;
}