@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

body {
  background-image: url('/wp-content/uploads/2026/05/tapis-roses-accueil.jpg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

#page {
  background: transparent !important;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* ou une hauteur fixe selon le contexte */
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/* Ombre douce sur le header */
header,
.site-header {
  box-shadow: 0 0 35px rgba(0,0,0,0.10);
  position: relative;
  z-index: 10;
}

/* Ombre douce sur le contenu central */
#page,
.site,
.site-content,
.content-area {
  position: relative;
  z-index: 2;
}

.offre-card p, .prestation-card p {
	color:#777;
}

.contenu, .presta-contenu, .barre-section {
    margin : 0; padding : 0;
}

section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.proposition{
    font-size: 27px;
}

/* =========================================
   BLOCS "EN SAVOIR PLUS" — PAR DÉFAUT
   ========================================= */

.wp-block-details > summary {
    font-weight: normal !important;
    margin-bottom: 10px;
    cursor: pointer;
    color: #777 !important;
}

/* Texte "En savoir plus" */
.wp-block-details > summary kbd {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    padding: 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}


/* =========================================
   VARIANTE BLANCHE
   ========================================= */

.details-blanc > summary {
    color: #fff !important;
}

/* =========================================
   FORMATIONS
   ========================================= */

.formations-uniformes details > summary {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    line-height: inherit !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

.formations-uniformes details > summary kbd {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    padding: 0 !important;
}

.fond-transparent-50 {
    background-color: rgba(207, 112, 109, 0.6) !important;
}

/* Supprime l'espace OnePress au-dessus et sous le contenu */
#primary {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.masseur p{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Centrage horizontal du menu principal */
.site-header .container {
    display: flex;
    justify-content: center;
}

.site-header .site-branding {
    display: none;
}

.site-header .site-navigation,
.site-header .main-navigation {
    float: none;
    margin: 0 auto;
    width: auto;
}

/* Header compact sans logo */
.site-header {
    min-height: 54px;
}

.site-header .container {
    min-height: 54px;
}

.site-header .main-navigation ul li a {
    line-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}

.txt-intro h2{
    line-height: 1.25 !important;
}

.tit-methode, .tit-methode h2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

/**------------------------ Tarifs-------------------- **/

/* Les colonnes de prestations ont la même hauteur */
.prestations-row {
    align-items: stretch !important;
}

/* Chaque prestation est une colonne verticale */
.prestations-row > .wp-block-column.prestation-card {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}

/* Zone tarifaire : espace minimal de 20 px */
.prestation-card .tarifs-zone {
    padding-top: 20px;
}

/* Détail fermé : tarifs poussés en bas */
.prestation-card:not(:has(details[open])) .tarifs-zone {
    margin-top: auto !important;
}

/* Détail ouvert : tarifs à leur position naturelle */
.prestation-card:has(details[open]) .tarifs-zone {
    margin-top: 0 !important;
}




/**------------------------ Offres KILOS-------------------- **/

/* === 3 FORMULES : cartes de même hauteur === */

/* Les trois colonnes s'étirent sur la hauteur de la plus grande */
.offres-row {
    align-items: stretch !important;
}

/* Chaque colonne s'étire */
.offres-row > .wp-block-column.offre-card {
    display: flex !important;
    flex-direction: column !important;
}

/* L'Empilement remplit toute la colonne */
.offre-card > .offre-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
}

/* Le bloc bouton descend en bas de la carte */
.offre-inner > .wp-block-buttons {
    margin-top: auto !important;
}


/**------------------------ liens SCROLLTO-------------------- **/
html {
    scroll-behavior: smooth;
}

section,
.wp-block-group {
    scroll-margin-top: 60px;
}

/**------------------------ typo ALLURA-------------------- **/
.typo-allura {
    font-family: 'Allura', cursive;
    font-weight: normal;
}

.nom,
.nom p,
.nom span {
    font-family: 'Allura', cursive !important;
    font-size: 35px !important;
    line-height: 1.2 !important;
}

.mission,
.mission p,
.mission span {
    font-family: 'Allura', cursive !important;
    font-size: 35px !important;
    line-height: 1.2 !important;
}

/* Titres principaux des sections de prestations */
body .entry-content h2.titre-prestation {
    font-family: 'Allura', cursive !important;
    font-size: 80px !important;
    line-height: 1.05 !important;
}

body .entry-content h2.barre-section{
    font-size : 23px;
    text-align: center !important;
}



/* =========================================================
   ROSE & ÂME — HERO MOBILE
   VERSION COMPILÉE PROPRE
   ========================================================= */

@media (max-width: 767px) {

  /* =======================================================
     1. BARRE DE MENU MOBILE
     Hauteur rétablie pour retrouver un meilleur centrage
     ======================================================= */

  #masthead,
  .site-header,
  .site-header.header-fixed {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #masthead .container,
  #masthead .site-header-inner,
  #masthead .site-branding,
  #masthead .header-right-wrapper,
  #masthead .header-right-wrap {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* On laisse OnePress gérer naturellement l'icône */
  #masthead .menu-toggle,
  #masthead .onepress-menu-mobile,
  .site-header .menu-toggle {
    position: static !important;

    transform: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* =======================================================
     2. HERO GÉNÉRAL
     ======================================================= */

  .rose-hero {
    --hero-mobile-width: 84vw;
    --hero-mobile-max: 400px;

    min-height: 100svh !important;
    height: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 12px !important;
    padding-bottom: 12px !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     3. LARGEUR COMMUNE
     Logo + photo + texte
     ======================================================= */

  .rose-hero-logo-row,
  .rose-hero-photo,
  .rose-hero .txt-intro {
    width: var(--hero-mobile-width) !important;
    max-width: var(--hero-mobile-max) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     4. RANGÉE LOGO + TRAITS
     ======================================================= */

  .rose-hero-logo-row {
    display: flex !important;
    flex-wrap: nowrap !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 8px !important;

    margin-top: 0 !important;
    margin-bottom: 16px !important;

    padding: 0 !important;
  }

  /* Traits latéraux */
  .rose-hero-logo-row .wp-block-separator {
    display: block !important;

    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Bloc logo */
  .rose-hero-logo {
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Image du logo */
  .rose-hero-logo img,
  img.rose-hero-logo {
    display: block !important;

    width: 125px !important;
    max-width: 32vw !important;

    height: auto !important;

    margin: 0 auto !important;
  }


  /* =======================================================
     5. CONTENU PRINCIPAL
     ======================================================= */

  .rose-hero-content {
    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .rose-hero-columns {
    display: flex !important;
    flex-direction: column !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .rose-hero-columns > .wp-block-column {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
  }


  /* =======================================================
     6. PHOTO
     ======================================================= */

  .rose-hero-photo {
    flex-basis: auto !important;

    margin-top: 0 !important;
    margin-bottom: 12px !important;

    padding: 0 !important;
  }

  .rose-hero-photo .wp-block-image {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .rose-hero-photo img {
    display: block !important;

    width: 100% !important;
    height: 182px !important;

    max-height: none !important;

    object-fit: cover !important;
    object-position: center !important;
  }


  /* =======================================================
     7. COLONNE TEXTE
     ======================================================= */

  .rose-hero .txt-intro {
    flex-basis: auto !important;

    margin-top: 12px !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    text-align: left !important;
  }


  /* =======================================================
     8. TITRE
     ======================================================= */

  .rose-hero .txt-intro h1,
  .rose-hero .txt-intro h2 {
    text-align: center !important;

    font-size: clamp(24px, 6.5vw, 29px) !important;
    line-height: 1.08 !important;

    margin-top: 0 !important;
    margin-bottom: 10px !important;

    padding: 0 !important;
  }


  /* =======================================================
     9. PARAGRAPHES
     ======================================================= */

  .rose-hero .txt-intro p {
    text-align: left !important;

    font-size: 13px !important;
    line-height: 1.3 !important;

    max-width: none !important;

    margin-top: 0 !important;
    margin-bottom: 8px !important;

    padding: 0 !important;
  }


  /* =======================================================
     10. BOUTON
     Plus d'espace avant le bouton
     ======================================================= */

  .rose-hero .txt-intro .wp-block-buttons {
    display: flex !important;

    justify-content: center !important;

    margin-top: 18px !important;
    margin-bottom: 0 !important;

    padding: 0 !important;
  }

  .rose-hero .txt-intro .wp-block-button {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .rose-hero .txt-intro .wp-block-button__link {
    display: inline-block !important;

    width: auto !important;
    min-width: 0 !important;

    padding: 10px 18px !important;

    font-size: 11px !important;
    line-height: 1.2 !important;

    text-align: center !important;
    white-space: normal !important;
  }


  /* =======================================================
     11. ESPACEMENT FINAL
     ======================================================= */

  .rose-hero-spacer {
    display: none !important;
  }
}  
  
  /* =======================================================
    DIVERS
     ======================================================= */
     
     @media (max-width: 767px) {

  h2.titre-prestation {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 767px) {

  /* =======================================================
     INTRO DES SECTIONS PRESTATIONS
     ======================================================= */

  /* Barre de section */
  .barre-section {
    min-height: 0 !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .barre-section h2,
  .barre-section h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* =======================================================
     IMAGE RONDE
     ======================================================= */

  .img-section-presta {
    width: 58vw !important;
    max-width: 230px !important;

    margin: 18px auto 0 !important;
    padding: 0 !important;
  }

  .img-section-presta img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 auto !important;
  }

  /* =======================================================
     TITRE DE PRESTATION
     ======================================================= */

  h2.titre-prestation,
  .titre-prestation {
    font-size: 24px !important;
    line-height: 1.08 !important;

    text-align: center !important;

    margin-top: 0 !important;
    margin-bottom: 10px !important;

    padding: 0 15px !important;
  }

  /* =======================================================
     CONTENEUR DE L'INTRO
     ======================================================= */

  .barre-section + .wp-block-group,
  .barre-section + .wp-block-columns,
  .barre-section ~ .wp-block-group {
    margin-top: 0 !important;
  }

}

/* =========================================================
   TITRES PRESTATIONS — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  body .site-content h2.wp-block-heading.titre-prestation,
  body .site-content h2.titre-prestation,
  body h2.titre-prestation {
    font-size: 60px !important;
    line-height: 1.08 !important;

    text-align: center !important;

    margin-top: 0 !important;
    margin-bottom: 12px !important;

    padding-left: 15px !important;
    padding-right: 15px !important;
  }

}

@media (max-width: 767px) {

  /* =======================================================
     INTRO PRESTATIONS — RÉDUCTION DES ESPACES VERTICAUX
     ======================================================= */

  /* Colonnes de l'introduction */
  .soins .wp-block-columns,
  .soins .wp-block-column {
    min-height: 0 !important;
    height: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    gap: 0 !important;
  }

  /* Évite les répartitions verticales type space-between */
  .soins .wp-block-column {
    justify-content: flex-start !important;
  }

  /* Groupes Gutenberg à l'intérieur */
  .soins .wp-block-group {
    min-height: 0 !important;
    height: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Réduction du block-gap Gutenberg */
  .soins .wp-block-group,
  .soins .wp-block-column {
    --wp--style--block-gap: 12px !important;
  }


  /* =======================================================
     IMAGE
     ======================================================= */

  .soins .img-section-presta {
    margin-top: 16px !important;
    margin-bottom: 18px !important;
  }

  .soins .img-section-presta,
  .soins .img-section-presta figure {
    padding: 0 !important;
  }


  /* =======================================================
     TITRE
     ======================================================= */

  .soins .titre-prestation,
  .soins h2.titre-prestation {
    margin-top: 0 !important;
    margin-bottom: 12px !important;

    padding-top: 0 !important;
  }


  /* =======================================================
     SÉPARATEUR SOUS LE TITRE
     ======================================================= */

  .soins .titre-prestation + .wp-block-group,
  .soins .titre-prestation + .wp-block-separator {
    margin-top: 8px !important;
  }

}

/* =========================================================
   PRESTATIONS MOBILE — ESPACE IMAGE / TITRE
   ========================================================= */

@media (max-width: 767px) {

  /* Bloc colonnes : suppression du grand espace
     entre la colonne image et la colonne texte */
  #soins .wp-block-columns {
    gap: 12px !important;
    row-gap: 12px !important;
    column-gap: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Les deux colonnes doivent prendre uniquement
     la hauteur de leur contenu */
  #soins .wp-block-column {
    min-height: 0 !important;
    height: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Colonne contenant l'image */
  #soins .wp-block-column:first-child {
    margin-bottom: 0 !important;
  }

  /* Image */
  #soins .img-section-presta {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

  #soins .img-section-presta figure,
  #soins figure.img-section-presta {
    margin-bottom: 0 !important;
  }

  /* Colonne contenant titre + texte */
  #soins .wp-block-column:nth-child(2) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Titre */
  #soins .titre-prestation,
  #soins h2.titre-prestation {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

}

/* =========================================================
   ROSE & ÂME — WPFORMS
   ========================================================= */

/* Message de confirmation */
.formulaire-contact .wpforms-confirmation-container-full,
.formulaire-contact .wpforms-confirmation-container {
    min-height: 430px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 30px !important;

    box-sizing: border-box !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    text-align: center !important;
}

/* Texte du message */
.formulaire-contact .wpforms-confirmation-container-full p,
.formulaire-contact .wpforms-confirmation-container p {
    margin: 0 !important;

    color: #bb3036 !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
}

/* Bouton envoyer */
.formulaire-contact .wpforms-submit {
    border: none !important;
    color: #fff !important;

    padding: 12px 24px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    border-radius: 0 !important;
    box-shadow: none !important;
}

.formulaire-contact .wpforms-submit:hover {
    opacity: 0.85;
}

/* =========================================================
   ZONE FORMULAIRE — HAUTEUR FIXE
   ========================================================= */

.formulaire-contact {
    height: 480px !important;
    min-height: 480px !important;
    box-sizing: border-box !important;
}

/* Confirmation : occupe exactement la même zone */
.formulaire-contact .wpforms-confirmation-container-full,
.formulaire-contact .wpforms-confirmation-container {
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 30px !important;
    box-sizing: border-box !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    text-align: center !important;
}


/* =========================================================
   ROSE & ÂME — ÉTOILES DÉCORATIVES
   ========================================================= */


/* Couche globale contenant toutes les étoiles */
.rose-stars {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;

  /* Au-dessus des fonds */
  z-index: 5;
}


/* Une étoile */
.rose-star {
  position: absolute;

  color: #ffffff;
  opacity: 1;

  line-height: 1;
  font-family: Arial, sans-serif;
  font-weight: normal;

  user-select: none;

  /* Optimise le petit mouvement de parallaxe */
  will-change: transform;
}

/* =========================================================
   ÉTOILES LOCALES SUR LES PHOTOS
   ========================================================= */
.rose-stars {
  z-index: 5 !important;
}

.rose-star {
  z-index: 5 !important;
}

.barre-section {
  position: relative !important;
  z-index: 10 !important;
}

/* Masquer les étoiles sur tablette et mobile */
@media (max-width: 1024px) {

  .rose-stars {
    display: none !important;
  }

}

/* ==========================================
   CONTACT — TABLETTE / MOBILE
   ========================================== */

@media (max-width: 1024px) {

  .contact-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .contact-layout > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    position: relative !important;
  }

  .contact-layout .wp-block-group,
  .contact-layout .wp-block-columns,
  .contact-layout .wp-block-stack {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ==========================================
   Adaptation menu en 1024px
   ========================================== */

@media (max-width: 1024px) {

  .main-navigation.toggled {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .onepress-menu.onepress-menu-mobile {
    height: auto !important;
    max-height: calc(100vh - 63px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

}