/*
Theme Name: AtelierLayaV1.0
Author: Romain Guillot
Author URI: https://www.romainglt.fr
Theme URI: 
Tags: full-site-editing, block-patterns
Text Domain: atelierlayav1-0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.4
Version: 100.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
	text-decoration: none !important;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.linksdecoration{
	text-decoration: none;
	text-decoration-line: none;
}

/* ========================================
   BREAKPOINT PERSONNALISÉ MENU - 1200px
   ======================================== */

/* MOBILE : En dessous de 1024px */
@media (max-width: 1024px) {
  
  /* Force l'affichage du bouton burger */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  
  /* Cache le menu desktop et force le comportement responsive */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  
  /* Style du menu ouvert sur mobile */
  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
  }
}

/* DESKTOP : Au-dessus de 1024 px */
@media (min-width: 1025px) {
  
  /* Cache le bouton burger */
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  
  /* Force l'affichage du menu desktop */
  .wp-block-navigation__responsive-container {
    display: flex !important;
    position: static !important;
  }
  
  /* Assure que les items sont visibles en ligne */
  .wp-block-navigation__responsive-container .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--wp--preset--spacing--50, 1rem);
  }
}

/* ========================================
   UNDERLINE ANIMÉ GAUCHE À DROITE
   ======================================== */

/* Supprime l'underline par défaut */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
  text-decoration: none !important;
  position: relative; /* Nécessaire pour le pseudo-élément */
  display: inline-block;
}

/* Création de la ligne avec pseudo-élément */
.wp-block-navigation a::after,
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Largeur 0 par défaut */
  height: 1px;
  background-color: currentColor; /* Prend la couleur du texte */
  transition: width 0.3s ease; /* Animation de la largeur */
}

/* Au hover, la ligne s'étend de gauche à droite */
.wp-block-navigation a:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:hover::after {
  width: 100%; /* S'étend à 100% */
}

/* Si d'autres liens du site ont besoin du même effet */
a {
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}

/* ========================================
   DERNIER ÉLÉMENT MENU - STYLE BOUTON CTA
   ======================================== */

/* Cible le dernier item du menu */
.wp-block-navigation__container > .wp-block-navigation-item:last-child a {
  background-color: var(--wp--preset--color--contrast, #000) !important;
  color: var(--wp--preset--color--base, #fff) !important;
  padding: 0px 20px !important;
  border-radius: 30px;
  transition: opacity 0.3s ease; /* Seulement opacité */
}

/* Hover personnalisé pour le dernier élément */
.wp-block-navigation__container > .wp-block-navigation-item:last-child a:hover {
  opacity: 0.85 !important;
}

/* Supprime complètement l'underline animé sur cet élément */
.wp-block-navigation__container > .wp-block-navigation-item:last-child a::after {
  display: none !important;
}

/* Empêche le position: relative qui sert pour l'underline */
.wp-block-navigation__container > .wp-block-navigation-item:last-child a {
  position: static !important;
}

/* ========================================
   CLASSE TITRE AVEC SOULIGNEMENT SVG
   ======================================== */

.titre-souligne {
  position: relative;
  padding-bottom: 8px;
  /* Supprime display: inline-block pour garder le centrage */
}

.titre-souligne::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* Centre le trait */
  transform: translateX(-50%); /* Ajuste parfaitement au centre */
  width: 100px; /* Largeur fixe du trait (ajuste selon besoin) */
  height: 10px;
  background-image: url('http://atelierlaya.fr/wp-content/uploads/2025/11/Titrage-souligne.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


.petit-titre-souligne {
  position: relative;
  padding-bottom: 8px;
  /* Supprime display: inline-block pour garder le centrage */
}

.petit-titre-souligne::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* Centre le trait */
  transform: translateX(-50%); /* Ajuste parfaitement au centre */
  width: 100px; /* Largeur fixe du trait (ajuste selon besoin) */
  height: 10px;
  background-image: url('http://atelierlaya.fr/wp-content/uploads/2025/11/petit-titre-souligne.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


/* ========================================
   HAUTEUR MINIMUM IMAGES FORMATIONS MOBILE
   ======================================== */

@media (max-width: 1000px) {
  
  .height-formations {
    min-height: 150px !important;
    object-fit: cover; /* Garde le ratio de l'image */
  }
  
}