/*
Theme Name: Gustav
Theme URI: https://olliewp.com
Description: Le digne fils d'Ollie
Author: Addict2Work
Author URI: https://olliewp.com
Template: ollie
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
*/

/* ========================================
   IMAGES
   ======================================== */

.wp-block-image.has-custom-border img {
	border-radius: 20px;
}

/* ========================================
   NAVIGATION & MENU
   ======================================== */

/* Animation trait vert au hover */
.wp-block-navigation-item__content,
.wp-block-navigation-item a {
  text-decoration: none !important;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.wp-block-navigation-item__content::after,
.wp-block-navigation-item a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #a0fac5;
  transition: width 0.3s ease;
}

.wp-block-navigation-item__content:hover::after,
.wp-block-navigation-item a:hover::after {
  width: 100%;
}

.wp-block-navigation a:hover {
  text-decoration: none !important;
}





/* ========================================
   BOUTONS - Style Contour (Outline)
   ======================================== */

/* État normal */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--wp--preset--color--blanc) !important;
  border: 1px solid var(--wp--preset--color--blanc) !important;
  font-weight: 500 !important; /* Supprime le bold */
  outline: none !important;
  text-decoration: none !important;
}

/* État hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--wp--preset--color--blanc) !important;
  border: 1px solid var(--wp--preset--color--blanc) !important;
  outline: none !important;
  text-decoration: none !important;
}

/* ========================================
   BOUTONS - Style Plein (Fill)
   ======================================== */

/* État normal */
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--wp--preset--color--vert-clair) !important;
  color: var(--wp--preset--color--noir) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* État hover */
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: #63f2a5 !important;
  color: var(--wp--preset--color--noir) !important;
  text-decoration: none !important;
}

/* ========================================
   BOUTONS - Style Plein (Fill) NAV
   ======================================== */

/* État normal */
.bt-supp-bold .wp-block-button__link {
  background-color: var(--wp--preset--color--vert-clair) !important;
  color: var(--wp--preset--color--noir) !important;
  font-weight: 500 !important; /* Supprime le bold */
  text-decoration: none !important;
}

/* État hover */
.bt-supp-bold .wp-block-button__link:hover {
  background-color: #63f2a5 !important;
  color: var(--wp--preset--color--noir) !important;
  text-decoration: none !important;
}


/* ========================================
   BOUTON STYLE DARK
   ======================================== */

.wp-block-button.is-style-dark .wp-block-button__link {
  background-color: #07282c !important;
  color: #a0fac5 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.wp-block-button.is-style-dark .wp-block-button__link:hover {
  background-color: #63f2a5 !important;
  color: #101828 !important;
  text-decoration: none !important;
}



/* ========================================
   BOUTONS MOBILE
   ======================================== */

@media (max-width: 782px) {
  .wp-block-button__link,
  .wp-element-button {
    padding-top: 0.8em !important;
    padding-bottom: 0.8em !important;
    padding-left: 0.8em !important;
    padding-right: 0.8em !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .wp-block-buttons {
    gap: 0.5rem !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .wp-block-button {
    display: flex !important;
  }
}
/* ========================================
   BLOC RESPONSIVE ROUNDED
   ======================================== */

/* Mobile : Full width, bords carrés */
@media (max-width: 1024px) {
  .small-responsive-rounded {
      border-radius: 0 !important;
      width: 100vw !important;
      position: relative !important;
      left: 50% !important;
      right: 50% !important;
      margin-left: -50vw !important;
      margin-right: -50vw !important;
      padding-left: 1.55rem !important;
      padding-right: 1.55rem !important;
      box-sizing: border-box !important;
  }
  
 
}


/* ========================================
   OMBRES
   ======================================== */

.shadow {
  box-shadow: 0 4px 33px rgba(0, 0, 0, 0.05) !important;
  
}

/* ========================================
   LIGNE BÉNÉFICE avec icône check
   ======================================== */

/* Groupe flex pour aligner icône + texte */
.benefice-ligne {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.625rem !important; /* 10px entre icône et texte */
  line-height: 1 !important;
}

/* Container de l'icône */
.check-benefice {
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Icône check 20x20 */
.check-benefice img,
.check-benefice figure,
.check-benefice .wp-block-image {
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  object-fit: contain;
  margin: 0 !important;
  margin-top: 0.35rem !important; /* Décalage desktop */
  padding: 0 !important;
  display: block !important;
  vertical-align: top !important;
}

/* Texte à côté */
.benefice-ligne p {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
  line-height: 1.5 !important;
}

/* Mobile - légère descente de l'icône */
@media (max-width: 782px) {
  .check-benefice img,
  .check-benefice figure,
  .check-benefice .wp-block-image {
    margin-top: 0.3rem !important; /* Ajustez entre 0.1rem et 0.2rem */
  }
}

/* ========================================
   LIGNE TARIF - Écart réduit sur mobile
   ======================================== */

/* Desktop */
.tarif-ligne {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0.5rem !important; /* 8px desktop */
  flex-wrap: wrap !important;
}

/* Mobile - écart très réduit */
@media (max-width: 782px) {
  .tarif-ligne {
    margin-top: -2rem !important; /* Ajustez la valeur */
    margin-bottom: 1rem !important; /* Ajustez la valeur */
  }
}

/* ========================================
   FLEX HORIZONTAL DESKTOP / VERTICAL MOBILE
   ======================================== */



/* Mobile - vertical avec gap 0, reset complet */
@media (max-width: 782px) {
  .flex-horizontal-desktop {
      flex-direction: column !important;
      gap: 0 !important;
      align-items: stretch !important; /* Étire les enfants sur toute la largeur */
  }
  
  /* Les enfants prennent 100% de la largeur */
  .flex-horizontal-desktop > * {
      width: 100% !important;
      flex: none !important;
  }
}

/* ========================================
   BOLD SUR PARAGRAPHE TAILLE H2
   ======================================== */

/* Paragraphe avec style ph2 en bold */
.has-ph-2-font-size {
  font-weight: 700 !important;
}

.has-ph-3-font-size {
  font-weight: 700 !important;
}

/* ========================================
   LINE HEIGHT POUR VARIATIONS DE PARAGRAPHE
   ======================================== */

/* Paragraphe Small - 18px */
.has-p-small-font-size {
  line-height: calc(1.75 / 1.125) !important;
}

/* Paragraphe normal - 20px */
.has-p-font-size {
  line-height: calc(1.75 / 1.25) !important;
}

/* Paragraphe Medium (ph5) - 24px */
.has-ph-5-font-size {
  line-height: calc(2 / 1.5) !important;
}

/* Paragraphe Large (ph4) - 26px */
.has-ph-4-font-size {
  line-height: 1.3 !important;
}

/* Paragraphe XLarge (ph3) - 36px */
.has-ph-3-font-size {
  line-height: calc(2.5 / 2.25) !important;
}

/* Paragraphe XXLarge (ph2) - 45px */
.has-ph-2-font-size {
  line-height: 1.2 !important;
}

/* Paragraphe XXXLarge (ph1) - 55px */
.has-ph-1-font-size {
  line-height: 1.1 !important;
}

/* ========================================
   BACKGROUND IMAGE FIXE EN HAUT - DESKTOP UNIQUEMENT
   ======================================== */

/* Desktop - image fixe en haut */
.bg-desktop-only {
  background-image: url("https://tranquilou-pilou.fr/wp-content/uploads/2025/12/Background-mask.png") !important;
  background-size: 100% auto !important; /* Largeur 100%, hauteur auto */
  background-position: top center !important;
  background-repeat: no-repeat !important;
}

/* Mobile - pas de background */
@media (max-width: 1139px) {
  .bg-desktop-only {
    background-image: none !important;
    background-color: var(
      --wp--preset--color--vert-sapin-fonce
    ) !important; /* #07282C */
  }
}

/* ========================================
Changer le bold par defaut
   ======================================== */

strong {
  font-weight: var(--wp--custom--font-weight--bold);
}

/* ========================================
   LISTES - MÊME STYLE QUE PARAGRAPHES
   ======================================== */

/* Desktop */
.wp-block-list,
.wp-block-list li {
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
}

/* Mobile - même fluid que paragraphe */
@media (max-width: 782px) {
  .wp-block-list,
  .wp-block-list li {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
}

/* ========================================
   SUPPRIMER MARGIN BOTTOM DES LISTES (FIX MENU)
   ======================================== */

.entry-content ul li,
.entry-content ol li,
.wp-block-post-content ul li,
.wp-block-post-content ol li {
  margin-bottom: 0 !important;
}

/* ========================================
   BORDS ARRONDIS + ALIGNEMENT TEXTE RESPONSIVE
   ======================================== */

/* Desktop - Arrondis gauche + texte à droite */
.rounded-left {
  border-top-left-radius: 1.25rem !important; /* 20px */
  border-bottom-left-radius: 1.25rem !important; /* 20px */
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  text-align: right !important;
}

/* Mobile - Arrondis haut + texte centré */
@media (max-width: 782px) {
  .rounded-left {
    border-top-left-radius: 1.25rem !important; /* 20px */
    border-top-right-radius: 1.25rem !important; /* 20px */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    text-align: center !important;
  }
}

/* ========================================
  TABLEAU COMPARATIF SUR MOBILE
   ======================================== */

/* Mobile - taille réduite à 1.15rem */
@media (max-width: 782px) {
  .text-reduce-mobile {
    font-size: 1rem !important; /* 15px */
  }
}

/* Mobile : Full width, bords carrés */
.titre-comparatif-responsive {
  border-radius: 0 !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
}

/* Desktop : Largeur limitée, bords arrondis */
@media (min-width: 783px) {
  .titre-comparatif-responsive {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile : Full width, bords carrés */
.sous-titre-comparatif-responsive {
  border-radius: 0 !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

/* Desktop : Largeur limitée, bords arrondis */
@media (min-width: 783px) {
  .sous-titre-comparatif-responsive {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 0 !important;
  }
}

.ligne-comparatif-responsive {
  border-radius: 0 !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Desktop : Largeur limitée, bords arrondis */
@media (min-width: 783px) {
  .ligne-comparatif-responsive {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ========================================
   BANDEAU PROMO - Texte ET bouton centrés sur mobile
   ======================================== */

   @media (max-width: 1023px) {
    .promo-bandeau {
        justify-content: center !important;
        display: flex !important;
        text-align: center;
    }
}

/* ========================================
   ICÔNE BURGER 48PX
   ======================================== */

/* Icône SVG 48px */
.wp-block-navigation__responsive-container-open svg {
  width: 36px !important;
  height: 36px !important;
}

/* ========================================
   MENU RESPONSIVE UNIQUEMENT - PADDING/MARGIN TOP 0
   ======================================== */

/* Mobile uniquement - supprimer padding/margin top */
@media (max-width: 782px) {
  /* Container responsive */
  .wp-block-navigation__responsive-container {
      padding-top: 42px !important;
      margin-top: 0 !important;
  }

  /* Contenu du menu */
  .wp-block-navigation__responsive-container-content {
      padding-top: 0 !important;
      margin-top: 0 !important;
  }

  /* Container principal du menu */
  .wp-block-navigation__responsive-container .wp-block-navigation__container {
      padding-top: 0 !important;
      margin-top: 0 !important;
  }
}

/* ========================================
   FIX IPAD - AVEC PADDING
   ======================================== */

/* iPad - full width mais avec padding intérieur */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Hero section full width */
  .hero-section,
  .wp-block-cover,
  .wp-block-group.alignfull {
      width: 100vw !important;
    
      max-width: 100vw !important;
     
      box-sizing: border-box !important;
  }
  

  
  /* Body sans overflow */
  body, html, .wp-site-blocks {
      width: 100% !important;
      overflow-x: hidden !important;
  }
}


/* ========================================
   MASQUER BOUTONS SOUS 1024PX
   ======================================== */
/* Caché sur mobile et tablette */
@media (max-width: 1139px) {
  .hide-buttons-mobile {
      display: none !important;
  }
}

/* ========================================
  DEMANDE PAR JONATHAN
   ======================================== */
@media (max-width: 768px) {
	/* Tablet styles */
	h2 br {
	display: none
	}
}


/* ========================================
   MASQUER CE QUI PETE LE SHADOW SUR LA HOME
   ======================================== */
.wp-block-group[style*="radius"]:has(img) {
    overflow: visible !important;
}