/*
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
*/
@import url("https://use.typekit.net/bpa6qww.css");





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


  /* offsets */
  --halo-shift-x: -25px;
  --halo-shift-y: -15px;
}

body::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;
}


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



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

html,
body {
	overflow-x: hidden !important;
	width: 100% !important;
	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;
}

header .main {
	background-color: transparent;
	transition: 0.4s all ease-in-out;
}




.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, nav.principale li.current-menu-item > a span, .current-menu-ancestor > a span, .single-service_category nav.principale li.offres > a span{
	color:  var(--wp--preset--color--contrast);
}

.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%;
	}


}