/* styles.css de Blue – placeholder */

body {
}

/* ==== BASE ==== */

:where(.wp-site-blocks *:focus) {
  outline-width: 0px;
  outline-style: solid;
}
:where(figure) {
  margin: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 50px;
}

/* ==== UTILITAIRES ==== */
.gr_rad           { border-radius: 0px; }
.gr_shdow,
.gr_bloc_shdow    {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
              rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.gr_pos_rel       { position: relative; }
.gr_pos_abs       { position: absolute; }
.gr_ov_hid        { overflow: hidden; }




/* ------------slider hp--------------- */
/* ------------------------------- */
/* Banner rotative pour .gr_acc_ban */
.wp-block-cover.gr_acc_ban {
  position: relative;
  overflow: hidden;
}

/* Calques d'image gérés par le JS pour le crossfade */
.gr_acc_ban_layer {
  position: absolute;
  inset: 0;
  z-index: 0; /* sous le dégradé et le contenu */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

/* Dégradé au-dessus des images (top -> transparent à ~80%) */
.wp-block-cover.gr_acc_ban > .wp-block-cover__background {
  position: absolute; /* recouvre toute la bannière */
  inset: 0;
  z-index: 1; /* au-dessus des images, sous le contenu */
  background: linear-gradient(180deg, rgba(47,50,54,0.9) 0%, rgba(47,50,54,0) 80%);
  pointer-events: none;
}

/* Le contenu reste tout en haut */
.wp-block-cover.gr_acc_ban > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* Source masquée si jamais pas déjà masquée par l’éditeur */
.gr_acc_ban_sources { display: none !important; }




/* Banière plein écran stricte */
.wp-block-cover.gr_acc_ban{
  width: 100%;
  min-height: 100svh; /* viewport “small” fiable mobile */
  /* si tu veux FORCER exactement la hauteur écran, remplace min-height par: */
  /* height: 100svh; */
  padding: 0; /* évite que des paddings globaux ne décalent la hauteur visuelle */
}

/* Fallbacks/compatibilité */
@supports (height: 100dvh) {
  .wp-block-cover.gr_acc_ban{
    min-height: 100dvh; /* ou height:100dvh si tu forces */
  }
}

/* Centre le contenu sur toute la hauteur */
.wp-block-cover.gr_acc_ban > .wp-block-cover__inner-container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* (Optionnel) neutralise les spacers internes dans la bannière */
.wp-block-cover.gr_acc_ban .wp-block-spacer{
  height: 0 !important;

}
.wp-block-cover.gr_acc_ban { background-color: #2f3236; }
/* ------------slider hp off--------------- */
/* ------------------------------- */




/* ==== NAVIGATION ==== */

.gr_nav_abs {
  position: absolute;
  top: 0;
  z-index: 900;
  width: 100%!important;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
 .gr_menu {
  z-index: 900;
} 
/*===== f7f7f70a ======*/
.gr_sticky-nav {
  background-color: transparent;
    color: var(--wp--preset--color--accent-6);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.gr_sticky-nav a {
  color: var(--wp--preset--color--base);
  transition: color 0.4s ease;
}

/* Variant 2: sticky nav with white default (pre-scroll) */
.gr_sticky-nav-cust2 {
  color: var(--wp--preset--color--base);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.gr_sticky-nav-cust2 a {
  color: var(--wp--preset--color--base);
  transition: color 0.4s ease;
}
.gr_sticky-nav.fixed,
.gr_sticky-nav-cust2.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  color: var(--wp--preset--color--accent-2);
  background-color: var(--wp--preset--color--contrast); 
  transition: background-color 0.4s ease, color 0.4s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.gr_sticky-nav.fixed a,
.gr_sticky-nav-cust2.fixed a {
  color: var(--wp--preset--color--accent-2)
 
}
.gr_bt_c1,
.gr_bt_c1 a {
  color: var(--wp--preset--color--base)!important;
}
/* display:none; display: block; */
/* ==== nav soulignement luxe animation ==== */

.gr_nav_h a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
}

.gr_nav_h a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px; /* Épaisseur du soulignement */
  background-color: var(--wp--preset--color--base); /* Couleur du soulignement */
  transition: left 0.5s ease-in-out;
}

.gr_nav_h a:hover::before {
  left: 0;
  background-color: var(--wp--preset--color--accent-2);
}
/* fin animation soulignement luxe */

/* ==== BOUTONS ==== */
.wp-element-button,
.wp-block-button__link,
.gr_bt {
  transform: scale(1);
  transition: background-color 0.7s ease, color 0.7s ease, transform 0.7s ease;
  border: 1px solid var(--wp--preset--color--accent);
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.gr_bt:hover {
  color: var(--wp--preset--color--base) !important;
  background-color: var(--wp--preset--color--accent-2) !important;
  transform: scale(1);
  border: 1px solid var(--wp--preset--color--accent) !important;
  transition: transform 0.7s ease-in-out, background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}
/* Bouton luxe hover */
 .gr_bt_h a,
.wp-block-button__link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: color 0.3s ease-in-out;
}
.gr_bt_h a::before,
.wp-block-button__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--wp--preset--color--accent-2);
  transition: left 0.5s ease-in-out;
  z-index: -1;
}
.gr_bt_h a:hover::before,
.wp-block-button__link:hover::before {
  left: 0;
}
.gr_bt_h a:hover,
.wp-block-button__link:hover {
  color: var(--wp--preset--color--base)!important;
}
/* Hover luxe : fond glissant */
.gr_bt_h a:hover::before,
.gr_bt_h .wp-block-button__link:hover::before {
  left: 0;
}

/* Hover luxe : texte blanc */
.gr_bt_h a:hover,
.gr_bt_h .wp-block-button__link:hover {
  color: var(--wp--preset--color--base)!important;
}


.gr_bt_cards {
    transform: scale(1);
  transition: background-color 0.7s ease, color 0.7s ease, transform 0.7s ease;
  border: none!important;
}
.gr_bt_cards:hover {
  border: none!important;
  color: var(--wp--preset--color--base) !important;
  background-color: var(--wp--preset--color--accent-2) !important;
  transform: scale(1);
   transition: transform 0.7s ease-in-out, background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}
/* ==== CARDS & BLOCS ==== */
.gr_pos_bloc {
position:absolute;
width : 100%;
z-index : 900;
}
.gr_pos_bloc1 {
  width: 100%;
  z-index: 700;
  position: relative;
  margin-top: -150px !important;
}
.gr_pos_bloc2 {
width : 100%;
z-index : 700;
 position: relative;
margin-top:-250px!important;
}
.gr_pos_bloc3 {
width : 100%;
z-index : 700;
 position: relative;
margin-top:-125px!important;
}
.gr_pos_bloc4 {
width : 100%;
z-index : 700;
 position: relative;
margin-top:-125px!important;
}
.gr_pos_bloc5  {
width : 100%;
z-index : 700;
 position: relative;
margin-top:-200px!important;
}
/* ==== DIVERS ==== */
.grunion-field-label.consent.consent-explicit {
  font-size: 0.7rem !important;
}
.yoast-breadcrumbs a {
  color: var(--wp--preset--color--contrast-2) !important;
}
.breadcrumb_last {
  font-weight: bold;
}
:where(.wp-site-blocks) > * {
  margin-block-start: 0rem;
  margin-block-end: 0;
}

/*AAAVOIR*/
:where(.wp-site-blocks *:focus-visible){
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/*AAAVOIR*/
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .gr_slider_fse_inner { scroll-behavior: auto; }
}

/* ==== RECAPTCHA ==== */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ==== SLIDE CUSTOM ==== */
/* --- dot espace haut et bas -- */
.wp-block-cb-carousel-v2[data-cb-pagination="true"] .swiper-horizontal {
  margin-bottom: calc(var(--wp--custom--carousel-block--pagination-bullet-size, 0px) * 0) !important;
}
/* ----- */
/* --- allignement droite et centré -- */
.gr_slide_cus1 .cb-pagination.swiper-pagination-horizontal {
  display: flex;
  justify-content: flex-start;
  bottom: calc(var(--wp--custom--carousel-block--pagination-bullet-size, 8px) * -2.5);
  top: var(--wp--custom--carousel-block--pagination-top, auto);
}

/* Ciblage spécifique mobile */
@media (max-width: 768px) {
  .gr_slide_cus1 .cb-pagination.swiper-pagination-horizontal {
    justify-content: center;
  }
}
/* ==== image en ligne ==== */
.gr_img_dcal img {
  position: relative;
  top: 5px;
  width: 20px!important;
}

/* == formmulaire == */
/* ====== form1 ====== */
/* Conteneur spécifique du formulaire */
.gr_form1_contact-form.gr_form1_form-inline-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 auto;
  text-align: center;
}

/* Label */
.gr_form1_form-inline-wrap label {
  color: var(--wp--preset--color--contrast);
  white-space: nowrap;
  margin-bottom: 0;
}

/* Champs texte et téléphone */
.gr_form1_form-inline-wrap .gr_bt_form {
  padding: 12px 16px;
  margin-top: 5px;
  border: none;
  background-color: var(--wp--preset--color--contrast-3);
  color: var(--wp--preset--color--contrast);
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* Placeholder */
.gr_form1_form-inline-wrap .gr_bt_form::placeholder {
  color: var(--wp--preset--color--accent);
  opacity: 1;
  text-align: center;
}

/* Bouton */
.gr_form1_form-inline-wrap input[type="submit"].gr_bt_form {
  padding: 12px 24px;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover bouton */
.gr_form1_form-inline-wrap input[type="submit"].gr_bt_form:hover {
  background-color: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--contrast);
}
/* ====== fin-form1 ====== */
/* ====== form2 ====== */
/* Conteneur spécifique du formulaire 2 */
.gr_form2_contact-form.gr_form2_form-inline-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 auto;
  max-width: 700px;
  text-align: left;
}

/* Label */
.gr_form2_form-inline-wrap label {
  color: var(--wp--preset--color--contrast);
  margin-bottom: 0.25rem;
}

/* Champs texte, email, tel, date, number */
.gr_form2_form-inline-wrap .wpcf7-form-control {
  padding: 12px 16px;
  margin-top: 5px;
  border: 1px solid rgba(247, 247, 247, 0.05); /* bordure semi-transparente */
  background-color: var(--wp--preset--color--contrast-2);
  color: var(--wp--preset--color--contrast);
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* Placeholder */
.gr_form2_form-inline-wrap .wpcf7-form-control::placeholder {
  color: var(--wp--preset--color--accent);
  opacity: 1;
  text-align: left;
}

/* Checkbox */
.gr_form2_form-inline-wrap .wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

/* Bouton de soumission */
.gr_form2_form-inline-wrap input[type="submit"].gr_bt_form {
  padding: 12px 24px;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-top: 1rem;
}

/* Hover bouton */
.gr_form2_form-inline-wrap input[type="submit"].gr_bt_form:hover {
  background-color: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--contrast);
}

/* Responsive alignement checkbox */
@media (max-width: 480px) {
  .gr_form2_form-inline-wrap .wpcf7-checkbox {
    align-items: flex-start;
    text-align: left;
  }
}
/* ==== fin form2 ===== */
/* === color calendar === */
.gr_form2_form-inline-wrap input[type="date"] {
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--contrast-2);
  border: 1px solid rgba(247, 247, 247, 0.05);
}

/* Coloriser l’icône calendrier sur WebKit */
.gr_form2_form-inline-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
}



/* Système d’étoiles – Blue (contour pour la partie non notée, plein pour la partie notée) */
.gr-note-etoile{
  --max: 5;          /* nombre d’étoiles */
  --value: 0;        /* note courante */
  --size: 24px;      /* taille */
  /* Couleur d'accent (doit correspondre à ta palette). Si tu changes l'accent, remplace ce hex. */
  --accent-hex: #00c5e6;

  position: relative;
  display: inline-block;
  width: calc(var(--max) * var(--size));  /* EXACTEMENT max*size */
  height: var(--size);
  vertical-align: middle;
}

/* Couche CONTOUR (étoiles non remplies) */
.gr-note-etoile::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="%2300c5e6" stroke-width="2" d="M12 2.4l2.8 6 6.6.6-5 4.4 1.5 6.5L12 16.9 6.1 19.9 7.6 13.4 2.6 9 9.2 8.4z"/></svg>')
    left / var(--size) var(--size) repeat-x;
}

/* Couche PLEINE (partie notée) */
.gr-note-etoile::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300c5e6" d="M12 2.4l2.8 6 6.6.6-5 4.4 1.5 6.5L12 16.9 6.1 19.9 7.6 13.4 2.6 9 9.2 8.4z"/></svg>')
    left / var(--size) var(--size) repeat-x;
  width: calc((var(--value) / var(--max)) * 100%);
  overflow: hidden;
}

/* Wrapper pour alignements verticaux harmonisés */
.gr-note-etoile__wrap{ display:inline-flex; align-items:center; gap:.4rem; }
.gr-note-etoile__label{ margin-right:.2rem; }

/*--gestion footer---*/

.gr_pos_bloc_footer {
  width: 100%;
  position: relative;
  margin-top: -150px !important;
}
.gr_aside1 {
  z-index: 500;
}
/*.gr_footer_hp {
    margin-top: -250px!important
}*/


ul.is-style-tw-arrow li::before {
    content: "\2192";
    position: absolute;
    inset-inline-start: 0;
    color: var(--wp--preset--color--accent);
}

/* === FSE Slider – Styles utiles uniquement (classes mises à jour) === */

/* Carte individuelle (item du slider) */
.gr_slider_fse_card {
  flex: 0 0 auto;
  width: calc((100% - ((var(--cols) - 1) * var(--slider-gap))) / var(--cols));
  scroll-snap-align: start;
  /* background: #ffffff; */
  /* border-radius: 10px; */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  overflow: hidden;
  transition: transform 0.3s;
}
.gr_slider_fse_card:hover { transform: translateY(-6px); }

/* Lien couvrant toute la card */
.gr_slider_fse_link { display:block; color:inherit; text-decoration:none; height:100%; }

/* Image de tête en background */
.gr_slider_fse_image {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 10px;
}

/* Contenu de la card */
.gr_slider_fse_content {  }

/* Titre */
.gr_slider_fse_title { }



/* ======================================= */
/* ==========Slider_gr_on================= */
/* ======================================= */

/* === Slider horizontal === */

.gr_slider_fse { position: relative; overflow-x: visible; overflow-y: visible; margin: 30px auto; width: 100%; max-width: 1280px; }

.gr_slider_fse_inner {
  --cols: 4;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  gap: 0px;
  scrollbar-width: none; /* Firefox */
  width: 100%;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; /* évite le scroll global pendant le swipe */
}
.gr_slider_fse_inner::-webkit-scrollbar { display: none; }

/* Les cards dans le slider n'ont pas de marge propre */
.gr_slider_fse_inner .gr_slider_fse_card { margin: 0; }

/* Boutons de navigation */
.gr_slider_fse_nav { display:flex; justify-content:center; gap:1rem; margin: .5rem 0; padding: 0 20px; }

.gr_slider_fse_prev,
.gr_slider_fse_next {
  background-color: var(--wp--preset--color--accent-2);
  color: #fff;
  width: 40px; height: 40px; border-radius:0%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  opacity: 1;
  transition: opacity .3s ease, transform .2s ease;
  cursor: pointer; touch-action: pan-y; user-select: none; border: none;
  position: relative; z-index: 10;
}
.gr_slider_fse_prev:hover,
.gr_slider_fse_next:hover { opacity:.85; transform: scale(1.08); }

/* États d’interaction (drag/swipe) */
.gr_slider_fse_inner.gr_dragging,
.gr_slider_fse_inner.gr_touching { user-select: none; }

.is-swiping .gr_slider_fse_prev,
.is-swiping .gr_slider_fse_next { pointer-events: none; }

/* Renforce l’intention horizontale */
.gr_slider_fse_card,
.gr_slider_fse_card * { touch-action: pan-x; }

/* Empêche le drag natif des images */
.gr_slider_fse_inner img { -webkit-user-drag: none; }

/* === Responsive === */
@media (max-width: 1024px) {
  .gr_slider_fse_inner{ --cols: 2; --slider-gap: 16px; --slider-pad: 16px; }
}
@media (max-width: 600px) {
  .gr_slider_fse_inner{ --cols: 1; --slider-gap: 15px; --slider-pad: 16px; }
}

/* Paragraphes & titres dans le slider : pas de marges */
.gr_slider_fse_inner p { margin-block-start: 0; margin-block-end: 0; }
.gr_slider_fse_inner h3 { margin-block-start: 0; margin-block-end: 0; }
/* Règle horizontale pleine largeur */
.gr_slider_fse_inner hr { width: 100%; }


.gr_slider_fse_inner .wp-block-post::marker {
  content: none;
  display: none;
}
/* Variables d’espacement du slider */
.gr_slider_fse_inner {
  /* espace entre les slides */
  --slider-gap: 16px;
  gap: var(--slider-gap);

  /* bordure interne gauche/droite */
  --slider-pad: 0px;
  padding-inline: var(--slider-pad);

  /* important pour que le scroll-snap aligne bien la 1re slide */
  scroll-padding-inline-start: var(--slider-pad);
  scroll-padding-inline-end: var(--slider-pad);
}

/* Chaque carte continue à “snapper” au début de la piste */
.gr_slider_fse_card {
  scroll-snap-align: start;
  /* tu peux forcer l’arrêt sur chaque carte si tu veux */
  /* scroll-snap-stop: always; */
}
  
/*special slider prestation*/


/* ===== Spécifique : slider prestations – ombres visibles ===== */
.gr_boucle_slider_prestation .gr_slider_fse_inner { --slider-gap: 10px; }
.gr_boucle_slider_prestation .gr_slider_fse_card {
                   /* fond pour bien percevoir l’ombre */
     box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.2);
}
.gr_boucle_slider_prestation .gr_slider_fse_card:hover{
  box-shadow:  6px 6px 9px rgba(0, 0, 0, 0.2);
}



/* === FSE Slider – Styles utiles uniquement (classes mises à jour) fin === */
/* ======================================= */
/* =============Slider_gr_off============= */
/* ======================================= */


/* ==== Bouton article "Lire la suite" ==== */
.gr_btls_art,
.gr_btls_art a {
  box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.2);
}

/* Bloc carte Blue Nouveau – Effet d’ombre amélioré */
.gr_btls_art,
.gr_btls_art a {
  box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.gr_btls_art:hover,
.gr_btls_art a:hover {
  transform: translateY(-3px);
  box-shadow: 8px 8px 12px rgba(0,0,0,0.25);
}
/* ==== Bouton article fin "Lire la suite" ==== */


/* ==== Formulaire de contact ==== */

/*---formulaire---*/
.contact-form label {
font-weight : 400;
font-size :14px;
}
:where(.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form input[type=url],.contact-form textarea), .contact-form select {
    border: 1px solid #f2eee9;
    border-radius: 5px;
    box-sizing: border-box;
    font: inherit;
    padding: 14px;
    width: 100%;
    color: #274889;
}
.gr_bt_form {    border-radius: 0px;}

/* Cible les placeholders dans les champs de texte, téléphone, email, etc. */
.wpcf7-form-control-wrap input::placeholder,
.wpcf7-form-control-wrap textarea::placeholder {
    color: var(--wp--preset--color--accent) ; /* Couleur du texte du placeholder */
    opacity: 1; /* Opacité du texte du placeholder */
}

/* Cible les placeholders dans les champs de sélection */
.wpcf7-form-control-wrap select::placeholder {
    color: var(--wp--preset--color--accent) !important; /* Couleur du texte du placeholder */
    opacity: 1; /* Opacité du texte du placeholder */
}
/*---formulaire-fin---*/



/* ===== Slider presets (desktop only) – 6 cols & 3 cols ===== */
@media (min-width: 1025px){
  /* Applique l'une de ces classes sur la Query Loop */
  .gr_cols6 .gr_slider_fse_inner{ --cols: 6; }
  .gr_cols3 .gr_slider_fse_inner{ --cols: 3; }
}

/* Cacher les flèches du slider uniquement sur desktop */
@media (min-width: 1025px){
  .gr_no_arrows_desktop .gr_slider_fse_prev,
  .gr_no_arrows_desktop .gr_slider_fse_next{
    display: none !important;
  }
}
/* consigne slider
 * Slider FSE – auto-init par classes utilitaires
 * Règles attendues sur la boucle (Query Loop) :
 * - gr_boucle_slider_<nom> : active le slider
 * - gr_colsN                : N colonnes visibles (desktop)
 * - gr_no_arrows_desktop    : pas de flèches sur desktop
 * - gr_slider_dyn           : autoplay ON
 * - gr_intN                 : intervalle autoplay en secondes (N)
 *
 * HTML final généré (structure) :
 * .gr_slider_fse[data-cols]
 *   .gr_slider_fse_inner
 *     .gr_slider_fse_card * n
 *   .gr_slider_fse_nav
 *     button.gr_slider_fse_prev
 *     button.gr_slider_fse_next
 *Contrôle des flèches par breakpoint :
	*•	gr_no_arrows_desktop
	*•	gr_no_arrows_tablet
	*•	gr_no_arrows_mobile

gr_boucle_slider_services gr_slider_dyn gr_int2 → 4 / 2 / 1 (defaults)
	•	gr_boucle_slider_prestation gr_cols6 gr_tab_cols4 gr_mob_cols2 gr_slider_dyn gr_int1 → 6 / 4 / 2 selon la largeur

 */

/* ==========================================================
   Slider – Responsive overrides via classes on the Query Loop
   Usage examples on the Query Loop wrapper:
   - Desktop: gr_cols6
   - Tablet:  gr_tab_cols3   (<=1024px)
   - Mobile:  gr_mob_cols1   (<=600px)
   - Arrows:  gr_no_arrows_desktop / gr_no_arrows_tablet / gr_no_arrows_mobile
   Notes:
   - Desktop remains controlled by gr_colsN.
   - If no tablet/mobile class is set, defaults are 2 (tablet) and 1 (mobile).
   - These classes only affect breakpoints; they do not change desktop.
========================================================== */

/* Tablet overrides (<=1024px) */
@media (max-width: 1024px) {
  .gr_tab_cols1 .gr_slider_fse_inner { --cols: 1; }
  .gr_tab_cols2 .gr_slider_fse_inner { --cols: 2; }
  .gr_tab_cols3 .gr_slider_fse_inner { --cols: 3; }
  .gr_tab_cols4 .gr_slider_fse_inner { --cols: 4; }
  .gr_tab_cols5 .gr_slider_fse_inner { --cols: 5; }
  .gr_tab_cols6 .gr_slider_fse_inner { --cols: 6; }

  /* Hide arrows only on tablet */
  .gr_no_arrows_tablet .gr_slider_fse_prev,
  .gr_no_arrows_tablet .gr_slider_fse_next { display: none !important; }
}

/* Mobile overrides (<=600px) */
@media (max-width: 600px) {
  .gr_mob_cols1 .gr_slider_fse_inner { --cols: 1; }
  .gr_mob_cols2 .gr_slider_fse_inner { --cols: 2; }
  .gr_mob_cols3 .gr_slider_fse_inner { --cols: 3; }
  .gr_mob_cols4 .gr_slider_fse_inner { --cols: 4; }

  /* Hide arrows only on mobile */
  .gr_no_arrows_mobile .gr_slider_fse_prev,
  .gr_no_arrows_mobile .gr_slider_fse_next { display: none !important; }
}


/* ============================================= */
/* ================ slider_vertical ============= */
/* ============================================= */

.gr_slider_vertical {
  position: relative;
  /* variables pratiques */
  --gr-sv-dot-size: 10px;
  --gr-sv-dot-gap: 10px;
  --gr-sticky-offset: 0px; /* ajuste si tu as une nav sticky: ex 72px */
}

.gr_slider_vertical .gr_sv_inner {
  height: auto;
  overflow: visible;
  position: relative;
}

.gr_slider_vertical .gr_sv_slide {
  min-height: 50vh;

  padding: 2rem;

  /* si tu as une barre sticky, évite que scrollIntoView ne passe sous la barre */
  scroll-margin-top: var(--gr-sticky-offset);
}

/* Dots navigation (affichés seulement quand la zone est active) */
.gr_slider_vertical .gr_sv_dots {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: var(--gr-sv-dot-gap);
  z-index: 1000;
}
.gr_slider_vertical.is-active .gr_sv_dots { display: flex; }

.gr_slider_vertical .gr_sv_dots button {
  width: var(--gr-sv-dot-size);
  height: var(--gr-sv-dot-size);
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.25);
  cursor: pointer;
  outline: none;
}
.gr_slider_vertical .gr_sv_dots button.is-active {
  background: rgba(0,0,0,.85);
}

/* Focus visible pour accessibilité clavier */
.gr_slider_vertical .gr_sv_dots button:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.7);
}

/* Admin bar WordPress (décale légèrement la position fixe) */
body.admin-bar .gr_slider_vertical .gr_sv_dots {
  top: calc(50% + 16px);
}

/* Petits écrans : mets les dots en bas-centre pour éviter le recouvrement */
@media (max-width: 768px) {
  .gr_slider_vertical .gr_sv_dots {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 16px;
    transform: translateX(-50%);
    flex-direction: row;
  }
}

/* RTL : bascule à gauche si besoin */
html[dir="rtl"] .gr_slider_vertical .gr_sv_dots {
  right: auto;
  left: 16px;
  transform: translateY(-50%);
}

/* Verrou du scroll page quand la zone est active (piloté en JS) */
body.gr-sv-lock { overflow: hidden; }



.gr_slider_fse_inner { touch-action: pan-x; }
.gr_sv_slide { min-height: 60vh; }

/* ============================================= */
/* ============================================= */

/* ============================================= */
/* ============================================= */

/* === slider Lightbox Graphineo – Base === */
.gr_lightbox_overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center; justify-content: center;
  z-index: 99999;
}
.gr_lightbox_overlay.gr_open { display: flex; }

.gr_lightbox_stage{ 
  position: relative; width:100%; height:100%;
  display: grid; place-items: center;
}

.gr_lightbox_img {
  max-width: 94vw; max-height: 92vh;
  object-fit: contain;
  margin: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  transition: transform .25s ease;
}

.gr_lightbox_close,
.gr_lightbox_prev,
.gr_lightbox_next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: .75rem 1rem;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.gr_lightbox_close { top: 24px; right: 24px; transform: none; }
.gr_lightbox_prev { left: 20px; }
.gr_lightbox_next { right: 20px; }

.gr_lightbox_counter {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: .4rem .6rem;
  font-size: 13px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
}

.gr_lightbox_btn:hover { background: rgba(255,255,255,.15); }

@media (max-width: 640px) {
  .gr_lightbox_prev, .gr_lightbox_next { top: auto; bottom: 24px; transform: none; }
  .gr_lightbox_prev { left: 16px; }
  .gr_lightbox_next { right: 16px; }
}
/* ============================================= */
/* ============================================= */

/* ============================================= */
/* ============================================= */

/* ============================================= */
/* ============================================= */

/**
 * tab fonctions
 */
 /* =========================================================
   NAV TABS – STYLE GRAPHIQUE & RESPONSIVE
   Deux colonnes sur mobile / une colonne sur tablette & desktop
   ========================================================= */

/* Liste d’onglets */
.gr_tabs_list { 
  display: flex; 
  flex-direction: column; 
  gap: 8px;
  padding: 0;
}

/* Boutons d’onglet */
.gr_tabs_bt {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;

  padding: .65rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  color: inherit;
  font-size: 1rem;
  line-height: 1.35;
  text-wrap: balance;

  transition: transform .18s ease,
              background-color .25s ease,
              border-color .25s ease,
              box-shadow .25s ease;
}

/* Hover */
.gr_tabs_bt:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-1px);
}

/* Focus clavier */
.gr_tabs_bt:focus,
.gr_tabs_bt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18),
              0 0 0 5px rgba(0,0,0,.15) inset;
}

/* État actif : bordure + fond renforcé */
.gr_tabs_bt.active {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border-color: #fff;
  font-weight: 600;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),
              0 6px 18px rgba(0,0,0,.12);
}

/* Barre d’indication active (bord gauche) */
.gr_tabs_bt.active::after {
  content:"";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: -2px;
  width: 3px;
  border-radius: 3px;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}

/* Panneaux (affichés via JS) */
.gr_tabs_el { display: none; }
.gr_tabs_el.active { display: block; }

/* Colonne gauche sticky (optionnel) */
@media (min-width: 992px) {
  .gr_tabs_sidebar_sticky { position: sticky; top: 1.2rem; }
}

/* =========================================================
   RESPONSIVE : deux colonnes sur mobile (<768px)
   ========================================================= */
@media (max-width: 767px) {
  .gr_tabs_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .gr_tabs_bt {
    justify-content: center;
    text-align: center;
    font-size: .9rem;
    padding: .6rem .8rem;
    border-radius: 12px;
  }
  /* Indicateur actif adapté en haut (plus lisible en grille) */
  .gr_tabs_bt.active::after {
    content:"";
    position: absolute;
    top: -3px;
    left: 15%;
    right: 15%;
    height: 3px;
    border-radius: 3px;
    background: currentColor;
    box-shadow: none;
  }
}
/**
 * tab fonctions
 */

 /*lightbox_legend*/

/* s’assure que l’absolu se positionne par rapport à la scène */
.gr_lightbox_stage { position: relative; }

/* l’image ne doit pas créer d’empilement au-dessus */
.gr_lightbox_img { display: block; }
.gr_lightbox_legend{
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 1rem 1.25rem;
  color: #fff;
background-color: rgba(0, 0, 0, 0.75);
  /* centrage horizontal via flex */
  display: flex;
  justify-content: center;
  /* optionnel : aligner verticalement le texte si multi-ligne */
  align-items: center;
  text-align: center; /* pour les retours à la ligne propres */
}

.gr_lightbox_legend[hidden]{ display:none !important; }