/*
Theme Name: Grandis
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: HARVEST
Author URI: https://wordpress.org
Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Template: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/





body{
  --halo-x: 0px;
  --halo-y: 0px;
  --halo-d: 220px;


  /* offsets */
  --halo-shift-x: 25px; /* centre le halo sur le logo (annule le -25 de app.js) */
  --halo-shift-y: 25px; /* centre le halo sur le logo (annule le -25 de app.js) */
}

body.logged-in:not(.wp-admin):before,
body:not(.wp-admin):before {
  content:"";
  position: fixed;
  left: calc(var(--halo-x) + var(--halo-shift-x));
  top:  calc(var(--halo-y) + var(--halo-shift-y));
  width:  var(--halo-d);
  height: var(--halo-d);
  transform: translate(-50%, -50%);
  background: no-repeat left center / contain url(img/forme_ronde.svg);
  pointer-events: none;
  z-index: 0;

  /* Léger effet « blob » : la forme est une image de fond, son tracé n'est donc pas
     déformable. Une rotation lente combinée à une échelle non uniforme suffit à
     donner l'impression qu'elle respire, la forme étant déjà irrégulière.
     Uniquement du transform : pas de recalcul de mise en page, animation compositée. */
  animation: gr-blob 14s ease-in-out infinite;
  will-change: transform;
}

/* Tant que le halo n'a pas été positionné (cf. le script en ligne de functions.php),
   il vaudrait ses valeurs par défaut — 220px en 0,0 — et s'afficherait en haut à
   gauche. On l'attend plutôt que de le montrer au mauvais endroit. */
html:not(.gr-halo-ready) body.logged-in:not(.wp-admin):before,
html:not(.gr-halo-ready) body:not(.wp-admin):before {
  opacity: 0;
}

@keyframes gr-blob {
  0%,
  100% { transform: translate(-50%, -50%) rotate(0deg)    scale(1, 1); }
  25%  { transform: translate(-50%, -50%) rotate(2.5deg)  scale(1.035, 0.975); }
  50%  { transform: translate(-50%, -50%) rotate(0.5deg)  scale(0.98, 1.04); }
  75%  { transform: translate(-50%, -50%) rotate(-2deg)   scale(1.025, 0.985); }
}

@media (prefers-reduced-motion: reduce) {
  body.logged-in:not(.wp-admin):before,
  body:not(.wp-admin):before {
    animation: none;
    will-change: auto;
  }
}


:where(.wp-site-blocks *:focus) {
    outline-width: inherit;
    outline-style: inherit;
}



.admin-bar .wp-site-blocks,
.admin-bar header {
	margin-top: 32px;
}

body.logged-in:not(.wp-admin),
body:not(.wp-admin) {
  overflow-x: hidden;
  width: 100%;
  overscroll-behavior: none;
  min-height: 100vh;
}


a,
a:focus,
a:active {
	outline: 0 !important;
}

a:hover {
	text-decoration: none !important;
}

.wp-block-navigation a:where(:not(.wp-element-button)):focus,
.wp-block-post-title a:where(:not(.wp-element-button)):focus,
.wp-block-site-title a:where(:not(.wp-element-button)):focus,
a:where(:not(.wp-element-button)):focus {
	text-decoration: none;
}

strong {
	font-weight: 700 !important;
}

.wp-block-post-title {
	word-break: inherit !important;
}

header {
	position: fixed;
	width: 100%;
	z-index: 99999;
	transition: 0.4s all ease-in-out;
	top: 0;
	z-index: 999;
}

header .heading,
.heading1,
.ariane,
.translate, 
.wp-block-site-logo
 {
	transition: 0.3s all ease-in-out;
}

.main{
	margin-top: 0 !important;
}


.ariane {
	z-index: 1 !important;
	/* Calé sur l'entête : la marge haute de 1rem (posée en style inline par le bloc)
	   fusionnait avec la marge basse de .main et laissait 21px de vide entre les deux. */
	margin-top: 0 !important;
}

header .main {
	background-color: transparent;
	transition: 0.4s all ease-in-out;
	margin-bottom: 0 !important;
}




.home .ariane {
	display: none;
}


/* ====== Base commune ====== */
.blob{
  --w: 220px;             /* largeur */
  --bg: #fff;             /* fond */
  --stroke: 0px;          /* épaisseur du contour (0 = pas de contour) */
  --stroke-color: #0ea5e9;
  width: var(--w);
  aspect-ratio: 1 / 1;    /* carré responsive */
  background: var(--bg);
  border: var(--stroke) solid var(--stroke-color);
  /* ombre douce optionnelle */
/*   box-shadow: 0 8px 24px rgba(0,0,0,.08); */

}
.blobs a{
	transition: 0.3s all ease-in-out;
}
.blobs a:hover{
	transform: scale(1.1);
}

/* ====== 6 variantes de contour ====== */
/* 1. Ovoïde doux (proche de ton exemple) */
.blob--1{
  border-radius: 60% 45% 55% 50% / 55% 60% 45% 50%;
}

/* 2. Goutte étirée */
.blob--2{
  border-radius: 70% 40% 55% 45% / 50% 65% 45% 55%;
}

/* 3. “Squircle” décalé */
.blob--3{
  border-radius: 35% 55% 45% 65% / 55% 35% 65% 45%;
}

/* 4. Haricot (bean) */
.blob--4{
  border-radius: 65% 40% 60% 35% / 45% 70% 35% 60%;
}

/* 5. Pilule organique */
.blob--5{
  border-radius: 50% 60% 40% 70% / 65% 45% 70% 35%;
}

/* 6. Galet irrégulier */
.blob--6{
  border-radius: 58% 42% 63% 37% / 47% 66% 34% 63%;
}

.blob h2{
  position: relative;
  top: -20px;            /* décale le texte vers le haut */
  text-align: center;    /* reste centré */
  width: 100%;           /* pour s'aligner à la largeur du blob */
  z-index: 2;            /* au-dessus du blob */
}

.blob img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 60%;   /* ajuste selon la taille souhaitée */
  height: auto;
  z-index: 0;       /* reste derrière */
  display: block !important;
}

.col-services{
	position:relative !important;
}

/* Le conteneur du bloc “Services” */
.section-services {
  position: relative;            /* crée le conteneur de référence */
}

/* Le mot vertical */
.section-services .vertical-label {
  writing-mode: sideways-lr;     /* texte vertical */
  text-orientation: mixed;
  white-space: nowrap;
  position: sticky;              /* reste collé à l’intérieur du parent */
  top: 2rem;                     /* marge depuis le haut du viewport */
  align-self: flex-start;        /* si parent en flex */
  height: max-content;
}

.Bbanner, .Bcarte, .actus,  .vertical-label{
	z-index: 3;
}
.Bservices {
  position: relative;
  margin-top: -50px;
  z-index: 2;
}



body #grandis-interactive-map-root h6{
	color: black !important;
	line-height: 25px !important;
}

nav.principale li > a{
	padding-top: 50px;
}
nav.principale li:hover > a span, .single-service_category nav.principale li.offres > a span{
	color:  var(--wp--preset--color--contrast);
}

nav.principale li.current-menu-item > a span{
	color:  var(--wp--preset--color--contrast); 
}
nav.principale li.current-menu-item ul a span{
	color: white;
}

.scrolled nav.principale li.current-menu-item > a span{
/* 	color: white !important; */
}



.wp-block-navigation__submenu-container{
	border-radius: 30px;
	li:hover span{
		color: white !important;
		
	}
}

.wp-block-navigation.principale .wp-block-navigation__submenu-icon svg{
	margin-top: 1em !important;
}


header.scrolled.down .main {
	
	.translate{
		margin-top: -50px !important;
	}
	
}

header.scrolled.down,
header.scrolled.up {
	.ariane {
		opacity: 0;
		visibility: hidden;
	}
	.wp-block-site-logo{
		max-width: 70%;
	}
	.main{
		background-color: var(--wp--preset--color--contrast);
	}
	nav.principale li:hover > a span, nav.principale li.current-menu-item > a span{
		color:  white;
	}
	
}

.wp-block-search__inside-wrapper{
	background-color: white !important;
}

header.scrolled.up .main {
	
}

.fake_form{
	border-radius: 50px;
	border: 2px solid black;
	padding: 13px;
	min-width: 50%;
	position: relative;
}
.fake_form:before{
	 background: no-repeat right center / contain url(img/loupe.svg);
	 content: "";
	 width: 30px;
	 height: 30px;
	 display: block;
	 position: absolute;
	 right: 0;
}
#trait-draw{
	position: absolute;
	top:42%;
}
#trait-2{
	position: absolute;
	left: 15%;
	bottom:-0.2%;
	z-index: 1;
}
#trait-draw-2{
	position: absolute;
	bottom: 23.69%;
	left: 15.47%;
}

#grandis-interactive-map-root{
	a svg{
		  transition: 0.3s all ease-in-out;
		  
	}
	a:hover svg{
		  transform: scale(1.1);
		  
	}
}

/* Centrer tout le contenu horizontalement */
/* Corrige les espacements verticaux */
.age-search {
  display: flex;
  flex-direction: column;
  align-items: center;  /* garde les contrôles centrés */
}

/* Supprime les marges par défaut entre éléments */
.age-search > * {
  margin: 0;
  padding: 0;
}

/* Réduit l’écart entre le label et les champs */
.age-search__label {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  /* positionner le label au-dessus du champ blanc */             /* même largeur que le champ input */
  transform: translateX(-107px);/* décale vers la gauche pour s’aligner au champ */
}

/* Réduit la marge entre le champ/bouton et l’aide (si tu la remets) */
.age-search__help {
  margin-top: 0.5rem;
}

/* Si des <br> traînent encore, les neutraliser visuellement */
.age-search br {
  display: none;
}

/* On garde les contrôles alignés horizontalement */
.age-search__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Bloc blanc = le champ lui-même, 70px de haut, coins 20px */
.age-search__input {
  height: 60px;
  font-size: 1.6rem;      /* augmente la taille du texte */
  font-weight: 700;
  text-align: center;     /* centré pour un rendu équilibré */
  line-height: 60px;             /* pour un alignement vertical agréable */
  border: 0;
  background: #ffffff;
  color: #111827;
  border-radius: 20px;
  padding: 0 24px;
  outline: none;
  /* largeur visuelle du rectangle blanc dans le SVG */
  width: 290px;
  /* responsive : permettre de respirer sur petits écrans */
  max-width: min(100%, 420px);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}

/* Nettoyage du type=number */
.age-search__input::-webkit-outer-spin-button,
.age-search__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.age-search__input[type="number"] { -moz-appearance: textfield; }

/* Focus (anneau doux) */
.age-search__input:focus {
  box-shadow:
    0 0 0 3px rgba(59,130,246,.15),
    0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}

/* Bouton sombre 75 × 70, coins 20px, icône loupe centrée */
.age-search__button {
  width: 75px;
  height: 60px;
  border: 0;
  border-radius: 20px;
  background: #1E1E1E;
  color: #fff;
  cursor: pointer;
  position: relative;
   transition: transform .08s ease, filter .15s ease, opacity .15s ease;
  /* si tu gardes du texte dans le bouton, masque-le visuellement */
  font-size: 0;
}

/* Icône loupe (SVG inline en data URI) */
.age-search__button::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;   /* ajuste pour matcher ton œil */
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* loupe blanche (poignée noire dans ton SVG, mais sur fond noir on la met blanche) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
<circle cx='11' cy='11' r='6' stroke='white' stroke-width='2'/>\
<path d='M20 20L16.5 16.5' stroke='white' stroke-width='2' stroke-linecap='round'/>\
</svg>");
}

.age-search__button:hover { filter: brightness(1.08); }
.age-search__button:active { transform: translateY(1px); }
.age-search__button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Label + help (facultatif) */
.age-search__label {
  display: block;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
}
.age-search__help {
  display: block;
  margin-top: .5rem;
  font-size: .85rem;
  color: #6b7280;
}

/* Responsive : si l’écran est étroit, on réduit le gap et on laisse l’input prendre la largeur */
/* Option responsive : on recentre le label sur petits écrans */
@media (max-width: 520px) {
  .age-search__label {
    transform: none;
    text-align: center;
    width: auto;
  }
}



@media (min-width: 650px) {

	.offres > a:before{
		content: "";
		position: absolute;
		background: no-repeat left center / contain url(img/offres.svg);
		width: 49px;
		height: 48px;
		top: 3%;
		left: 25%;
	}
	
	.profil > a:before{
		content: "";
		position: absolute;
		background: no-repeat left center / contain url(img/profil.svg);
		width: 49px;
		height: 48px;
		top: 3%;
		left: 25%;
	}
	.actuEvent > a:before{
		content: "";
		position: absolute;
		background: no-repeat left center / contain url(img/actus.svg);
		width: 49px;
		height: 48px;
		top: 3%;
		left: 30%;
	}


}

/* ============================================================
   Burger mobile — visibilité sur tout fond
   Les barres blanches d'origine disparaissent sur le fond clair
   du header en haut de page. Un contour foncé (drop-shadow) les
   rend visibles sur fond clair, sans gêner sur fond foncé/vert.
   ============================================================ */
@media (max-width: 600px) {
  .ghm-hamburger {
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
  }
}


/* ============================================================
   Menu mobile — intégration de la nav secondaire + recherche
   Le plugin clone la nav principale dans le menu ; frontend.js y
   ajoute la nav secondaire (A propos / contact) et la recherche.
   On masque donc ces éléments du header sur mobile.
   ============================================================ */
@media (max-width: 600px) {

  /* Masquer le pill (nav secondaire + sélecteur de langue inactif) et la recherche du header */
  .translate { display: none !important; }
  header .heading .wp-block-search { display: none !important; }

  /* La recherche masquée libère de l'espace : empêcher le logo de s'étirer
     et de passer sous le burger */
  header .heading .wp-block-site-logo,
  header .heading .wp-block-site-logo img {
    width: 140px !important;
    max-width: 140px !important;
  }

  /* Éléments ajoutés dans le menu mobile */
  .ghm-menu-mobile .ghm-extra-nav {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin-top: 0.5rem;
  }
  .ghm-menu-mobile .wp-block-search {
    padding: 1.5rem 2rem;
    width: 100%;
    box-sizing: border-box;
  }
  .ghm-menu-mobile .wp-block-search__inside-wrapper,
  .ghm-menu-mobile .wp-block-search__input {
    width: 100%;
  }
}


/* ============================================================
   Sous-menus mobiles — visibilité quand l'accordéon est ouvert
   WordPress core met visibility:hidden/opacity:0 sur les sous-menus
   de navigation ; le plugin ajoute la hauteur (.is-open) mais pas la
   visibilité, et les items héritent du texte blanc. On force donc
   l'affichage + une couleur foncée lisible sur le fond du sous-menu.
   ============================================================ */
@media (max-width: 600px) {
  .ghm-menu-mobile .wp-block-navigation__submenu-container.is-open {
    visibility: visible !important;
    opacity: 1 !important;
  }
  .ghm-menu-mobile .wp-block-navigation__submenu-container.is-open .wp-block-navigation-item__content,
  .ghm-menu-mobile .wp-block-navigation__submenu-container.is-open .wp-block-navigation-item__label {
    visibility: visible !important;
    opacity: 1 !important;
    color: #1a1a1a !important;
  }
}


/* ============================================================
   Header mobile uniformément vert (pas de bulle)
   La « bulle verte » est le halo décoratif (body::before, image
   forme_ronde.svg, positionné derrière le logo par app.js).
   Sur mobile on le masque et on donne un fond vert plein au header.
   ============================================================ */
@media (max-width: 600px) {
  body:not(.wp-admin)::before {
    display: none !important;
  }
  header.wp-block-template-part {
    background-color: var(--wp--preset--color--contrast) !important;
  }
}


/* ============================================================
   Masquer le fil dAriane sur mobile — pages "carte"
   (Jeune 612, Parent 568, Professionnels 644, Nos offres 48)
   ============================================================ */
@media (max-width: 600px) {
  body.page-id-612 .ariane,
  body.page-id-568 .ariane,
  body.page-id-644 .ariane,
  body.page-id-48 .ariane {
    display: none !important;
  }
}


/* ============================================================
   Header mobile plus compact (hauteur réduite ~108px → ~63px)
   + recentrage du burger (fixed) dans le header raccourci.
   Le burger est sur body (hors wrapper ScrollSmoother), donc non
   poussé par ladmin bar : on ajoute son offset pour les connectés.
   ============================================================ */
@media (max-width: 600px) {
  header .heading {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  header .heading .wp-block-site-logo {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  header .main {
    margin-bottom: 8px !important;
  }
  .ghm-hamburger {
    top: 16px !important;
  }
  body.admin-bar .ghm-hamburger {
    top: calc(16px + var(--wp-admin--admin-bar--height, 46px)) !important;
  }
}


/* ============================================================
   Sous-menu « TU ES » (.profil) en blanc au lieu du vert
   (le bloc a has-contrast-background-color/has-base-color =
   fond vert + texte blanc ; on force fond blanc + texte foncé)
   ============================================================ */
.wp-block-navigation__submenu-container.profil {
  background-color: #fff !important;
}
.wp-block-navigation__submenu-container.profil .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container.profil .wp-block-navigation-item__label {
  color: #1a1a1a !important;
}