/* =========================================================
   FLORES DE OYA – CSS PROPRE (Helix Ultimate, header prédéfini)
   Sections :
   [SECTION: TOKENS & UTILS]
   [SECTION: POLICES SERVIES PAR LE SITE]
   [SECTION: TOP BAR (HEADER PRÉDÉFINI)]
   [SECTION: HEADER (PRÉDÉFINI)]
   [SECTION: BREADCRUMB / TITRE]
   [SECTION: HERO]
   [SECTION: DIVERS]
   [PAGES LÉGALES : COOKIES, DONNÉES, MENTIONS, MENTION DU FORMULAIRE]
   [ARTICLE ACCUEIL : SEX-THERAPY]  (simplifié, rem/em uniquement)
   ========================================================= */


/* ==========================
   [SECTION: TOKENS & UTILS]
   ========================== */
:root{
  --bordeaux: #3e0a17;
  --or: #ebbf8d;
  --header-bg: #612C00;
  --radius: 1.25rem;                    /* 20px */
  --shadow: 0 0.625rem 1.5625rem rgba(0,0,0,.08); /* 0 10px 25px */
}

/* Petites bricoles globales */
.article-details .featured-article-badge{ display:none; }


/* ==========================================
   [SECTION: POLICES SERVIES PAR LE SITE]
   Poppins et Roboto Slab, jusqu'ici demandées à Google Fonts à chaque visite.
   Fichiers dans templates/shaper_helixultimate/fonts/ (Fontsource, sous-ensemble latin, woff2).
   Graisses relevées sur les 26 pages du site le 30/09/2026 : Poppins 300, 400, 500, 600, 700 et
   italiques 400, 700 ; Roboto Slab 400, 700, 900 (Roboto Slab n'a pas d'italique).
   ========================================== */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/poppins-latin-300-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/poppins-latin-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:italic; font-weight:700; font-display:swap; src:url('../fonts/poppins-latin-700-italic.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Slab'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/roboto-slab-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Slab'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/roboto-slab-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Slab'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/roboto-slab-latin-900-normal.woff2') format('woff2'); }

body{ font-family:'Poppins', sans-serif; font-size:15px; font-weight:400; }
h1{ font-family:'Roboto Slab', sans-serif; font-size:45px; font-weight:700; }
h2{ font-family:'Roboto Slab', sans-serif; font-size:40px; font-weight:700; }
h3{ font-family:'Roboto Slab', sans-serif; font-size:35px; font-weight:700; }
h4{ font-family:'Roboto Slab', sans-serif; font-size:30px; font-weight:700; }
h5{ font-family:'Roboto Slab', sans-serif; font-size:25px; font-weight:700; }
h6{ font-family:'Roboto Slab', sans-serif; font-size:20px; font-weight:700; }
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.menu.nav-pills > li > a,
.menu.nav-pills > li > span,
.menu.nav-pills .sp-dropdown li.sp-menu-item > a{
  font-family:'Poppins', sans-serif; font-size:14px; font-weight:500;
}


/* ==========================================
   [SECTION: TOP BAR (HEADER PRÉDÉFINI)]
   ========================================== */
#sp-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
}
#sp-top1, #sp-top2{ width:auto; }
#sp-top2 .social-icons{
  margin-left:auto;
  display:flex; gap:.5rem;
}
#sp-top2 .social-icons a{ display:inline-flex; align-items:center; }


/* ================================
   [SECTION: HEADER (PRÉDÉFINI)]
   ================================ */
#sp-header, .sp-page-title {background: var(--bordeaux);}
#sp-header .container-inner > .row{ align-items:center; }
#sp-logo .logo img {
    height: 3.525rem;
    margin-top: 20px;
    object-fit: contain;
    vertical-align: middle;
}


/* Espace vertical du corps */
#sp-main-body{
  padding: clamp(1.5rem, 4vw, 4.5rem) 0;
}
/* ================================
   [SECTION: FOOTER]
   ================================ */
 #sp-footer {background: var(--bordeaux); text-align: center;}

/* ==================================================================
   Harmonisation des SÉPARATEURS de Menu (Helix Ultimate)
   ================================================================== */

.sp-megamenu-parent > li > span {
    display: block;
    color: #fff;
    line-height: inherit;
}

/* Cas spécifique pour le menu mobile (Offcanvas) */
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > span.menu-separator {
    display: block;
    padding: 10px 0; /* Espacement standard mobile */
    font-weight: 500;
    cursor: default;
}

#sp-menu{
  display:flex; align-items:center; justify-content:flex-end;
}

#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .offcanvas-toggler{ color:#fff; }
#sp-menu .offcanvas-toggler{
  margin-left:auto; display:flex; align-items:center;
}
.offcanvas-menu a{ color:#fff; }

/* =================================
   [SECTION: BREADCRUMB / TITRE]
   ================================= */
#sp-titre, .breadcrumb{
  background: var(--header-bg) !important;
  color:#000;
  font-size:.75rem;
  padding:.125rem 0; /* 2px */
  margin-bottom:0;
}
.navigation_flores .breadcrumb-item.active{ color:#FFD1D1; }

/* Pages de liste des rubriques de « Bonus » : le titre de la rubrique y est le h1 de la page (réglage
   « Titre de la catégorie » de l'entrée de menu). Le bandeau, en h2 pour que les articles de la rubrique
   n'aient qu'un h1, l'affiche déjà : le h1 reste lu par les robots et les lecteurs d'écran, sans s'afficher. */
.view-category .content-category > h1{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* ==============
   [SECTION: HERO]
   ============== */
#sp-slide{ padding-right:0; padding-left:0; background:#000; }

.hero-banner{
  position:relative;
  width:100%;
  overflow:hidden;
  z-index:0;
}
.hero-banner::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.25));
  pointer-events:none;
}
.hero-image{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9;
  object-fit:cover;                     /* jamais d'étirement, quelle que soit l'image */
}
@media (max-width:768px){ /* même seuil que la source mobile de la balise <picture> */
  .hero-image{
    aspect-ratio:3/2;                   /* banniere-mobile.webp : 1080 x 720 */
  }
}
@media (min-width:62em){ /* ~992px */
  .hero-image{
    aspect-ratio:auto;
    height:60vh;
    object-fit:cover;
  }
}

/* Centrage du texte sur la bannière */
.hero-banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* C'est cette ligne qui centre parfaitement */
  z-index: 2; /* Pour passer au-dessus de l'image et du filtre sombre */
  text-align: center;
  width: 100%;
  padding: 0 15px; /* Marge de sécurité sur mobile */
}

/* Style du Titre : un paragraphe depuis le 06/10/2026, le h1 de l'accueil est dans l'article */
.hero-banner-text h1,
.hero-banner-text .hero-banner-titre {
  font-family: "Roboto Slab", sans-serif;
  line-height: 1.2;
  letter-spacing: normal;
  margin-top: 0;
  color: var(--or); /* Utilise votre variable or définie plus haut */
  font-size: clamp(2rem, 5vw, 4rem); /* Taille responsive : grossit avec l'écran */
  margin-bottom: 0.5rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Légère ombre pour lisibilité */
}

/* Style du Slogan */
.hero-banner-text p {
  color: #ffffff;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ===============
   [SECTION: DIVERS]
   =============== */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner{ padding:.625rem; } /* 10px */
.osmap_ .osmap-items a{ color:#fff; }

/* ===============
   [PROTECTION DES DONNEES]
   =============== */

.protect_donnees button {
    width: 100%;
    background-color: #3e0a17;
    color: #ebbf8d;
    padding-bottom: 5px;
    padding-left: 15px;
    border-color: #ebbf8d;
    border-width: 3px;
    border-style: double;
    border-radius: .5rem;
    text-align: left;
}

/* =========================================================
   [PAGES LÉGALES : COOKIES, DONNÉES, MENTIONS, MENTION DU FORMULAIRE]
   Le code de ces pages ne porte que sa structure et ses classes.
   ========================================================= */

.page-cookies p,
.page-cookies ul,
.page-cookies table,
.page-legale p,
.page-legale ul,
.mention-formulaire p{
    padding: 0 20px;
}
.page-cookies ul,
.page-legale ul{ padding-left: 50px; }
.page-cookies table{
    width: calc(100% - 40px);
    margin: 0 20px 1.5rem;
    padding: 0;
    border-collapse: collapse;
}
.page-cookies th,
.page-cookies td{
    border: 1px solid var(--or);
    padding: .5rem .75rem;
    vertical-align: top;
    text-align: left;
}
.page-cookies th{ background: var(--bordeaux); color: var(--or); }
.page-cookies .gerer-cookies{
    display: inline-block;
    background-color: var(--bordeaux);
    color: var(--or);
    padding: .6rem 1.2rem;
    border: 2px solid var(--or);
    border-radius: .5rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.page-cookies .gerer-cookies:hover,
.page-cookies .gerer-cookies:focus{
    background-color: var(--or);
    color: var(--bordeaux);
}
.mention-formulaire{
    max-width: 600px;
    margin: 1rem auto 0;
    font-size: .8125rem;
    line-height: 1.5;
}

/* =========================================================
   [PAGE ACCUEIL] – STYLE MAGAZINE & SECTIONS
   ========================================================= */

/* --- cible uniquement page accueil */
.accueil_ .magazine-top {
    margin-bottom:2rem;
}
.accueil_ .magazine-wrap {
    display:flex;
    align-items:center;
    gap:2rem;
    margin-bottom:1.5rem;
}
.accueil_ .magazine-wrap .magazine_image img {
    width:220px;
    height:auto;
    object-fit:cover;
    border-radius:1rem;
}
.accueil_ .magazine-wrap .magazine_panel {
    flex:1;
    text-align:center;
}
.accueil_ .magazine_panel .title {
    margin:0;
    font-size:2rem;
}
.accueil_ .magazine_panel .subtitle {
    margin:0.5rem 0 1rem;
    font-size:1.2rem;
    font-weight:400;
}
/* tagline en dessous */
.accueil_ .magazine-top .tagline {
    text-align:center;
    font-style:italic;
    margin-top:1rem;
    font-size:1rem;
}

/* Intro */
.accueil_ .intro {
    max-width:800px;
    margin:0 auto 2rem;
    text-align:center;
}

/* Sections image + texte */
.accueil_ #therapie-individuelle,
.accueil_ #accompagnement-de-couple,
.accueil_ #massages-rituels-tantriques,
.accueil_ #temoignages {
    text-align:center;
    margin-bottom:2.5rem;
}
.accueil_ #therapie-individuelle img,
.accueil_ #accompagnement-de-couple img,
.accueil_ #massages-rituels-tantriques img,
.accueil_ #temoignages img {
    width:100%;
    height:auto;
    max-width:900px;
    margin:0 auto 1rem;
    border-radius:1rem;
    display:block;
}

/* CTA boutons – base */
.accueil_ .btn--primary,
.accueil_ .btn--solid,
.accueil_ .btn--outline {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0.6rem 1rem;
    font-size:0.7rem;
    border-radius:1rem;
    text-align:center;
    text-decoration:none;
    width:100%;
    box-sizing:border-box;
    font-weight:600;
}
.accueil_ .btn--primary {
    background:#3e0a17;
    color:#fff;
}
.accueil_ .btn--solid {
    background:#ebbf8d;
    color:#3e0a17;
}
.accueil_ .btn--outline {
    background:transparent;
    border:2px solid #3e0a17;
    color:#3e0a17;
}

/* CTA TRIPLE */
.accueil_ .cta-group {
    display:flex;
    gap:1rem;
    justify-content:center;
    margin:2rem 0;
}
.accueil_ .cta-group a {
    flex:1;
}

/* CTA SIMPLE */
.accueil_ .cta-simple {
    text-align:center;
    margin:2rem 0;
}
.accueil_ .cta-simple a {
    width:80%;
    margin:0 auto;
    display:block;
}

/* Titres section h3 */
.accueil_ #therapie-individuelle h3,
.accueil_ #accompagnement-de-couple h3,
.accueil_ #massages-rituels-tantriques h3,
.accueil_ #temoignages h3 {
    font-size:1.6rem;
    white-space:nowrap;
    margin-bottom:1rem;
}

/* --- MOBILE STYLES */
@media(max-width:700px) {
    /* On conserve flex-row, photo à gauche, texte à droite */
    .accueil_ .magazine-wrap {
        flex-direction:row;
        gap:1rem;
    }
    .accueil_ .magazine-wrap .magazine_image img {
        width:160px;
    }
    .accueil_ .magazine-panel .title {
        font-size:1.4rem;
    }
    .accueil_ .magazine-panel .subtitle {
        font-size:0.9rem;
    }
    .accueil_ #therapie-individuelle h3,
    .accueil_ #accompagnement-de-couple h3,
    .accueil_ #massages-rituels-tantriques h3,
    .accueil_ #temoignages h3 {
        font-size:1.2rem;
    }
}