/*
Theme Name: Archigroup
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: HARVEST
Author URI: https://wordpress.org
Description:
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Template: twentytwentyfive
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
*/

/* -------------------------------------------------------------------------- */
/* 0) Imports & resets                                                        */
/* -------------------------------------------------------------------------- */

@import url("https://use.typekit.net/tmo1dbq.css");

/* Le navigateur garde le scroll vertical natif, on gère l'horizontal */
.slider-viewport {
  touch-action: pan-y;
  overscroll-behavior: contain; /* évite le rebond iOS/Android dans la section pin */
  -webkit-overflow-scrolling: touch;
}

html,
body {
  min-height: 100vh;
  width: 100% !important;
  overflow-x: hidden !important;
  /* x: none (pas de swipe horizontal parasite) mais y: auto obligatoire —
     'none' vertical sur html/body tue le scroll tactile du document (Chrome/Android) */
  overscroll-behavior: none auto;
  /* cursor: none; */
}

a,
a:focus,
a:active {
  outline: 0 !important;
  /* cursor: none; */
}

/* Liens WP + liens généraux */
.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,
a {
  text-decoration: none !important;
}
/* Admin bar */
.admin-bar .wp-site-blocks,/*
.admin-bar .wp-block-template-part*/ {
  margin-top: 32px;
}

/* -------------------------------------------------------------------------- */
/* 1) États init / préchargement                                              */
/* -------------------------------------------------------------------------- */

/* La loading ne doit JAMAIS intercepter les clics une fois cachée */
.loading[hidden],
.loading.is-gone {
  display: none !important;
}

/* Quand l’overlay est à 0 d’opacité, on n’intercepte plus les clics */
.loading:not([data-active="1"]) {
  pointer-events: none !important;
}

.smooth-content {
  visibility: hidden;
}

.hw-product-cat-content{
	padding-bottom: 3vh;
}

.loading {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(26, 26, 26);
  overflow: hidden;
  z-index: 999999;
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease; /* sécurité si JS en panne */
}

/* Ajustements single product */
.product .smooth-content:before {
  content: "";
  background-color: #fff;
  width: 100%;
  height: 30vh;
  display: block;
  position: absolute;
  top: 0;
  z-index: 1;
}
main .wp-block-group {
  z-index: 2;
}

/* -------------------------------------------------------------------------- */
/* 2) Header / navigation                                                     */
/* -------------------------------------------------------------------------- */

/* Anti-flicker logo pendant l'init */
html.is-prep header .heading .wp-block-site-logo,
html.is-prep header .heading .wp-block-site-logo img {
  transition: none !important;
}

/* Coup de pouce rendu (WebKit) */
header .heading .wp-block-site-logo {
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
  background-color: transparent;
  transition: 0.3s all ease-in-out;
}
/*
header .heading .wp-block-site-logo {
  height: 237px;
  width: 101px;
  transform-origin: top left;
  background-color: var(--wp--preset--color--contrast);
  mask-size: contain;
  transition: 0.4s all cubic-bezier(0.5, 0, 0.58, 1);
}

header .heading .wp-block-site-logo img {
  opacity: 0;
  height: 237px;
  width: 101px;
  transition: 0.4s all cubic-bezier(0.5, 0, 0.58, 1);
}
*/
/* État scrolled */
header.main-tool-bar--scrolled .heading .wp-block-site-logo {
  height: 80px;
  transform-origin: top left;
}

header .mainMenu {
  background-color: transparent !important;
  transition: 0.4s all cubic-bezier(0.5, 0, 0.58, 1);
}
header .custom-logo-link img{
  aspect-ratio: auto 160 / 160 !important;
  width: 160px;
  transition: 0.4s all cubic-bezier(0.5, 0, 0.58, 1);
}
.scrolled .custom-logo-link img{
  aspect-ratio: auto 80 / 80 !important;
  width: 80px;
}
header.scrolled .mainMenu{
  background-color: rgba(26, 71, 107, 0.80) !important;
  backdrop-filter: blur(10px) !important;
}



header.main-tool-bar--scrolled .logo:before,
body.woocommerce-page:not(.tax-product_cat) .logo:before {
  background-color: #fff;
}


body:not(.woocommerce-page) header.main-tool-bar--scrolled .wp-block-site-logo img, body.tax-product_cat header.main-tool-bar--scrolled .wp-block-site-logo img {
  opacity: 1;
}

/* Overlay logo blanc (non scrolled) */
header.mainMenu .wp-block-site-logo a {
  display: block;
  position: relative;
}

/* (overlay logo blanc ::after retiré 13/07 : le custom-logo EST déjà le logo
   blanc ArchiGroup_Blanc_RVB-1.svg → l'overlay faisait un doublon fantôme). */

body header .mm-entry-btn{
	color: white;
	text-transform: lowercase;
	font-weight: 500;
}
body header .mm-burger{
	border-color: white;
}
body header .mm-burger span{
	background: white;
}

body header.main-tool-bar--scrolled .mm-entry-btn, body header.main-tool-bar--scrolled .search-icon{
	color: var(--wp--preset--color--contrast, #116483);
}
@media (min-width: 768px) {
		body header.main-tool-bar--scrolled .wc-block-customer-account__account-icon, body header.main-tool-bar--scrolled .wc-block-mini-cart__quantity-badge{
			color: var(--wp--preset--color--contrast, #116483);
		}
}	

body header.main-tool-bar--scrolled .mm-burger{
	border-color: var(--wp--preset--color--contrast, #116483);
}
body header.main-tool-bar--scrolled .mm-burger span{
	background: var(--wp--preset--color--contrast, #116483);
}
body header.main-tool-bar--scrolled .mm-burger:hover span{
	background: white;
}
span:where(.wc-block-mini-cart__badge){
	color: var(--wp--preset--color--contrast, #116483) !important;
	background: white !important;
}
body header.main-tool-bar--scrolled  .wc-block-mini-cart__button  .wc-block-mini-cart__icon:hover{
	fill: white;
}

.gw-mm-item.has-children .gw-mm-item__link a{
	padding: 0 !important;
}

/* Couleurs nav */

header.main-tool-bar--scrolled
  .mainMenu
  .wp-block-navigation
  .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: #fff;
}

body.woocommerce-page:not(.tax-product_cat) .mainMenu, header.main-tool-bar--scrolled .mainMenu{
  color: #fff;
}

/* Alignement nav */
header .wp-block-group.wp-block-group-is-layout-flex,
header .mainMenu .wp-block-group.wp-block-group-is-layout-flex {
  align-items: stretch;
}

header .wp-block-navigation,
header .wp-block-navigation__container {
  height: 100%;
  display: flex;
  align-items: stretch;
}

.wp-block-navigation {
  align-self: stretch;
  width: 100%;
}

/* Items (WP nav + Getwid) */
header .mainMenu .wp-block-navigation-item {
  align-self: stretch;
  display: flex;
}
header .mainMenu .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* Lien nav WP */
header
  .mainMenu
  .wp-block-navigation
  .wp-block-navigation-item__content.wp-block-navigation-item__content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* Getwid: pleine largeur + répartition */
.mainMenu .wp-block-getwid-megamenu {
  flex: 1 1 auto;
  min-width: 0;
}

.mainMenu .wp-block-getwid-megamenu .gw-mm__wrapper,
.mainMenu .wp-block-getwid-megamenu .gw-mm__content-wrapper,
.mainMenu .wp-block-getwid-megamenu .gw-mm__content {
  width: 100%;
}

/* --- 1. ÉTAT INITIAL --- */
.mega-content-panel {
    display: block !important; /* On utilise block pour permettre les transitions */
    position: absolute;        /* On les superpose pour éviter les sauts */
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
    pointer-events: none;      /* Empêche de cliquer à travers un panneau invisible */
}

/* On prépare la colonne de droite pour la superposition */
.mega-menu-container .wp-block-column:last-child {
    position: relative;
    min-height: 400px; /* À ajuster selon ton contenu */
}

/* --- 2. AFFICHAGE DU CONTENT-0 (Défaut) --- */
.mega-menu-container .content-0 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- 3. LOGIQUE DE SURVIE (C'est ici que ça se joue) --- */

/* Si on survole n'importe quel trigger OU n'importe quel panel spécifique, on cache le 0 */
.mega-menu-container:has(.trigger-group:hover) .content-0,
.mega-menu-container:has(.mega-content-panel:not(.content-0):hover) .content-0 {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s; /* Disparition immédiate du neutre */
}

/* AFFICHAGE DES CONTENUS SPÉCIFIQUES */
/* On ajoute un transition-delay de 0.2s au survol sortant pour laisser le temps à la souris de voyager */
.mega-menu-container:has(.trigger-1:hover) .content-1,
.mega-menu-container:has(.content-1:hover) .content-1 {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10;
    transition-delay: 0s; /* Apparition immédiate */
}

/* On ajoute un délai quand on QUITTE pour que le panneau reste affiché un court instant */
.mega-menu-container .content-1 {
    transition-delay: 0.3s; 
}

/* RÉPÉTER POUR LES AUTRES (Trigger 2, etc.) */
.mega-menu-container:has(.trigger-2:hover) .content-2,
.mega-menu-container:has(.content-2:hover) .content-2 {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10;
    transition-delay: 0s;
}
.mega-menu-container .content-2 { transition-delay: 0.3s; }

/* --- 4. MAINTIEN DU TRIGGER "ALLUMÉ" --- */
.mega-menu-container:has(.trigger-1:hover) .trigger-1 > div,
.mega-menu-container:has(.content-1:hover) .trigger-1 > div {
    background-color: #a6c8d6 !important;
    color: white !important;
}

/* Aligner les boutons sur la fiche produit */
.single-product .cart {
/*     display: flex; */
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.single-product .rent-btn-wrapper{
	margin-left: 131px;
}


.single-product button.open-quote-popin{
	float: left;
}

/* Forcer le bouton de location à ne pas envoyer le formulaire WooCommerce */
.open-rent-popin {
    cursor: pointer;
    border: none;
    padding: 0 20px;
    display: inline-block;
    font-family: "capitana";
}

/* Style de la modale pour qu'elle passe au dessus de tout en FSE */
#location-modal {
    backdrop-filter: blur(5px);
}

/* Container du bouton de location sur la fiche produit */
.custom-location-container {
    display: block;
    width: 100%;
}

/* Style du bouton de location pour se démarquer du bouton d'achat */
.open-rent-popin {
    color: #fff !important;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    width: 100%; /* Par défaut en pleine largeur sur mobile */
/*     background-color: var(--wp--preset--color--accent-1); */
        align-items: center;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}



.upsells{
	background-color: rgba(255, 255, 255, 0.79);
	padding: 60px;
}

@media (min-width: 768px) {
    .open-rent-popin {
        width: auto; /* Reprend sa taille normale sur desktop */
    }
}

.open-rent-popin:hover {
    opacity: 0.8;
}

.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap; /* Permet de revenir à la ligne sur petit mobile si besoin */
    align-items: center;
    gap: 10px; /* Espace entre les deux boutons */
}


.harvest-atc-buttons .open-rent-popin{
	 flex: 1; /* Optionnel : permet aux deux boutons de se partager l'espace */
}

/* Ajuster le bouton de location pour qu'il ne prenne pas toute la largeur */
.open-rent-popin {
    margin-top: 20px !important;
    width: auto !important;
   
    min-width: fit-content;
}

/* Correction pour mobile : empiler si l'écran est trop étroit */
@media (max-width: 480px) {
    .woocommerce-variation-add-to-cart {
        flex-direction: column;
        align-items: stretch;
    }
}








/* UL flex */
.gw-mm__content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  width: 100%;
}

/* Chaque item prend une part égale */
.mainMenu .wp-block-getwid-megamenu .gw-mm-item,
.gw-mm-item {
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
  height: 100%;
}

/* Zone cliquable + toggle */
.gw-mm-item__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.gw-mm-item__link > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  padding: 0 var(--wp--preset--spacing--30);
  text-align: center;
}

.gw-mm-item__toggle {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 0 0 auto;
}

/* Hauteur “cellule” + séparation */
.mainMenu .wp-block-navigation-item,
.wp-block-getwid-megamenu-item > .gw-mm-item__link a {
  flex: 1 1 0;
  display: flex;
  height: 111px;
}

/* CTA account/cart/search dans header */
.mainMenu .wp-block-woocommerce-customer-account,
.mainMenu .wc-block-mini-cart,
.mainMenu .wp-block-search {
  display: flex;
  align-items: center;
}

.wp-block-woocommerce-filled-mini-cart-contents-block{
	background-color: white;
}

header.open {
  height: 100%;
}

/* Hover & états actifs */
.wp-block-navigation
  .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}

.current-menu-item,
.post-type-archive-projets .projets,
.single-projets .projets {
  font-style: italic;
}

/* Forcer l'ouverture (JS) */
.gw-mm-item.has-children.keep-open > .gw-mm-item__dropdown-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  height: auto;

}
.gw-mm-item__dropdown{
	  padding: 2px !important;
}

#amm-root{
  align-items: center;
}
@media (max-width: 768px) {
  header .MobileOff{
    display: none !important;    
  }
  #amm-root{
    padding-right: 20px;
    flex: 0;
  }
}
@media (min-width: 768px) {
  header .MobileOn{
    display: none !important;    
  }
}
 
/* -------------------------------------------------------------------------- */
/* 3) Hero / Intro                                                            */
/* -------------------------------------------------------------------------- */

section.intro {
  position: relative;
}
section.intro .title {
  position: relative;
  z-index: 2;
}
section.intro .two {
  position: relative;
  z-index: 3;
}
section.intro .lines {
  position: relative;
  z-index: 1;
}
section.two {
  margin-top: -50vh;
}

/* -------------------------------------------------------------------------- */
/* 4) Éléments graphiques (cercles, logo, marks, gradients)                    */
/* -------------------------------------------------------------------------- */

.circles {
  position: fixed;
  min-height: 100vh;
  width: 100vw;
}

.circle {
  position: absolute;
}
.circle svg {
  width: 100% !important;
  height: 30vw;
}
.circle.one {
  right: 5vw;
  top: 0;
  visibility: hidden;
}
.circle.two {
  left: 5vw;
  top: 50vh;
  visibility: hidden;
}

.logo:before {
  content: "";
  display: block;
  height: 100%;
  width: 400%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: transparent;
}
.logo .wp-block-site-logo {
  z-index: 2;
  position: relative;
}
.logo svg {
  fill: red;
}

/* Soulignement animé */
mark a {
  position: relative;
  text-decoration: none;
  background: linear-gradient(
      to right,
      var(--wp--preset--color--contrast),
      var(--wp--preset--color--contrast)
    ),
    linear-gradient(
      to right,
      var(--wp--preset--color--primary),
      var(--wp--preset--color--primary)
    );
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: all 400ms;
}

mark a:hover {
  color: var(--wp--preset--color--primary);
  background-size: 0 2px, 100% 2px;
}

.gradient {
  background: -webkit-linear-gradient(var(--wp--preset--color--base), #313131);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Boutons */

button:hover {
  background-color: var(--wp--preset--color--contrast) !important;
  color: #fff !important;
}
.wp-block-button__link:hover{
	background-color: white !important;
	color: var(--wp--preset--color--contrast) !important;
}
.download .wp-block-button__link{
	padding: 8px 17px !important;
	font-size: 0.8rem !important;
}


.add_to_cart_button:before{
	
}
.telechargement h4{
	margin-bottom: 5px !important;
}


/* -------------------------------------------------------------------------- */
/* 5) Curseur “flair” + sidecar                                                */
/* -------------------------------------------------------------------------- */

/* Desktop */
@media screen and (min-width: 600px) {
  :not(.wp-admin) .flair {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10000;
    mix-blend-mode: difference;
  }

  .flair svg {
    width: 100%;
    height: 100%;
  }

  .flair #currentShape {
    fill: #ffd07b;
  }

  /* Ne pas masquer le curseur dans les inputs */
  :where(
      input[type="text"],
      input[type="search"],
      input[type="email"],
      input[type="number"],
      input[type="password"],
      textarea,
      [contenteditable="true"]
    ) {
    cursor: text !important;
  }

  .flair {
    pointer-events: none;
    cursor: none !important;
  }
}

/* Mobile */
@media screen and (max-width: 600px) {
  .flair {
    display: none;
  }
}

/* Vignette qui suit la souris */
.cursor-sidecar {
  position: fixed;
  top: 0;
  left: 8%;
  width: clamp(150px, 15vw, 300px);
  aspect-ratio: 1 / 1;
  background: center / cover no-repeat;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

@media (pointer: coarse) {
  .cursor-sidecar {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 6) Texte scindé / animations de lignes                                     */
/* -------------------------------------------------------------------------- */

.lines {
  position: relative;
  will-change: transform;
}
.split-line,
.line-wrap,
.line {
  display: block;
  overflow: hidden;
}

.line-inner {
  display: inline-block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Hover “exp” */
.exp .line {
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  transform-origin: left;
}
.exp .line:hover {
  transform: scale(1.1);
}

/* -------------------------------------------------------------------------- */
/* 7) Blocs divers (citation, grilles, listes, etc.)                           */
/* -------------------------------------------------------------------------- */





/* ========================================
   EXPERTISES STICKY
   ======================================== */

/* Wrapper de scroll créé par JS */
.expertises-scroll-wrap {
  position: relative;
}

/* La section colle en haut pendant le scroll */
.expertises-sticky {
  z-index: 10;
}

/* --- Colonne gauche : textes en outline par défaut --- */
.expertises-sticky .wp-block-columns .wp-block-column:first-child h3 {
  color: transparent;
  -webkit-text-stroke: 1.5px #1a476b;
  transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease;
}

/* Item actif : texte plein */
.expertises-sticky .wp-block-columns .wp-block-column:first-child a.is-active h3 {
  color: #1a476b;
  -webkit-text-stroke-color: transparent;
}

/* --- Colonne droite : images empilées --- */
.expertises-sticky .wp-block-columns .wp-block-column:last-child {
  position: relative;
}

/* 1er lien reste dans le flux pour définir la hauteur de la colonne */
.expertises-sticky .wp-block-columns .wp-block-column:last-child > a:first-child {
  display: block;
  position: relative;
  visibility: hidden; /* prend l'espace mais invisible */
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Les autres liens empilés en position absolue */
.expertises-sticky .wp-block-columns .wp-block-column:last-child > a:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Image / texte actif */
.expertises-sticky .wp-block-columns .wp-block-column:last-child > a.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* --- Mobile : on désactive tout l'effet --- */
@media (max-width: 767px) {
  .expertises-sticky {
    position: static;
  }
  .expertises-sticky .wp-block-columns .wp-block-column:last-child > a {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .expertises-sticky .wp-block-columns .wp-block-column:first-child h3 {
    color: #1a476b !important;
    -webkit-text-stroke: none !important;
  }
}









.banner-col-left, .banner-col-right{
  position: relative; 
}

.banner-col-left::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 50vw; 
  background-color: inherit; 
  z-index: -1;
}

.banner-col-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 50vw; 
  background-color: inherit; 
  z-index: -1;
}

.z-indes-1{
  z-index: -1 !important;
}

.single-projet .wp-block-breadcrumbs{
	position: absolute;
}

/* Conteneur global et alignement -- cale sur la maquette Figma :
   boite fine 30px, icone maison dans son carre borde, chevron ">" entre les
   items texte, page courante en gras. */
/* Hauteur menee par le padding vertical des cellules (li), pas figee ici :
   'stretch' fait courir le trait separateur de la maison d une bordure a l autre. */
.wp-block-breadcrumbs {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #fff;
    color: #fff;
}

.wp-block-breadcrumbs ol {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

/* Espacement et alignement des elements */
.wp-block-breadcrumbs li {
    display: flex;
    align-items: center;
    padding: 8px 12px !important; /* 8px = l air haut/bas ; ajuster ici */
}

.wp-block-breadcrumbs a {
    color: #fff;
    text-decoration: none;
}

/* --- Icone maison dans son carre borde (30x30, comme Figma) --- */
.wp-block-breadcrumbs li:first-child {
    width: 30px;
    padding: 0 !important;
    justify-content: center;
    border-right: 1px solid #fff;
}

.wp-block-breadcrumbs li:first-child a {
    font-size: 0 !important; /* Cache le texte Accueil */
    width: 15px;
    height: 15px;
    background: url('/wp-content/uploads/2026/06/picto-home.svg') center/contain no-repeat;
}

/* --- Chevron ">" ENTRE les items texte (ni apres la maison, ni apres la page) --- */
.wp-block-breadcrumbs li:not(:first-child):not(:last-child)::after {
  content: ">";
  display: inline-block;
  margin-left: 12px;
  margin-right: -6px; /* compense la chasse large du glyphe > (blanc a droite) -> espace visuel egal */
  color: #fff;
  font-weight: 400;
}

/* Pas de separateur natif du bloc (--separator) apres la maison : la bordure de son carre suffit. */
.wp-block-breadcrumbs li:first-child::after {
  content: none;
}

/* Espace EGAL avant/apres le ">" : on annule le padding-droit de l item porteur
   du chevron -> l apres vient du padding-gauche de l item suivant (= margin-left). */
.wp-block-breadcrumbs li:not(:first-child):not(:last-child) {
  padding-right: 0 !important;
}

/* Met la page actuelle (le dernier élément) en gras */
.wp-block-breadcrumbs li:last-child {
    font-weight: bold;
}

/* bloc citation */ 
blockquote p{
  margin: 0 !important;
}
.citation div {
  margin: 0 !important;
}

.citation {
    display: flex;
    flex-direction: column-reverse;
}

.citation cite {
    display: flex !important;
    align-items: center; 
    gap: 20px;
    color: var(--wp--preset--color--contrast);
    font-weight: 600; 
    font-style: normal; 
    padding-bottom: 40px;
}

.citation cite::before {
  content: '';
    display: block;
    width: 45px;
    height: 45px;
    background-image: url(/wp-content/uploads/2026/06/picto-citation.svg);
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    background-size: contain;
}

.citation p {
    color: #243f56;
    margin: 0;
}
/* pilier */


.txt-pilier {
  margin-top:-200px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  font-size: 0rem;
  position: absolute;
  width: 200px;
}

.piliers .wp-block-cover{
  position: relative;
}


.piliers .wp-block-cover,
.piliers .wp-block-cover img,
.piliers .wp-block-cover h4,
.piliers .wp-block-cover h5 {
  transition: all 0.3s ease-in-out;
}

.piliers .wp-block-cover img {
  opacity: 0.3;
}

.piliers .wp-block-cover:hover {
  
  .txt-pilier {
    margin-top: 0;
    visibility: visible;
    opacity: 1;
    font-size: 1rem;
    /* transition-delay: 1s; */
  }
  
  img.wp-block-cover__image-background {
    filter: unset !important;
    opacity: 1;
  }
  
  
  
  h5 {
    color: white !important;
  }
}

.piliers .wp-block-cover:hover h4 {
    font-size: 15rem !important; 
    color: white !important;
  }
  



/*  titre page  */
/* 1. On force le bloc bleu parent à être le repère absolu et à couper ce qui dépasse */
.wp-container-core-group-is-layout-a4773660 {
    position: relative !important;
    overflow: hidden !important;
}

.titre-page { 
    z-index: 0 !important;
    pointer-events: none;
    position: absolute;
}
.titre-page.big{
  margin-bottom: -65% !important;
  scale: 0.9;
  transform-origin: left top;
}

.wp-container-core-group-is-layout-a4773660 > * {
    position: relative !important;
    z-index: 2 !important; /* Plus élevé que le 0 du titre-page */
}


/*  titre banner  */

.parent-titre-banner{
  position: relative; 
  overflow: hidden; /* Optionnel : pour éviter que le texte ne dépasse si le calcul varie d'un pixel */
}
.parent-titre-banner .wp-block-group {
  position: relative;
  z-index: 1;
}
.titre-banner {
    position: absolute;
    top: 0;
    margin: 0;
    line-height: 0.9;
    z-index: 0;
    scale: 1.2;
    transform-origin: bottom;
}
.titre-banner.left{
  left: 15%;
}
.titre-banner.right{
  right: 15%;
}
.titre-banner.petit {
  scale: 3.5 !important;
  left: 106% !important;
  margin-top: -2% !important;
  transform-origin: unset !important;
  width: 100%;
  height: 100%; 
  display: flex;
  align-items: center;
}
.titre-banner.page{
  scale: 1 !important;
  display: flex;
  align-items: center;
  height: 100%;
  left: 0;
}

/* 3. On remonte les chiffres au-dessus */
.wp-block-cover__inner-container {
    z-index: 2 !important;
    position: relative !important;
}


/* ligne */
.groupe-ligne {
    overflow: hidden;
    position: relative; /* Sécurité pour le positionnement */
}

.ligne{
  position: relative;
}

.ligne::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    /* Hauteur pilotée par app.js (dessin de la ligne à l'arrivée dans le
       viewport) : 0 avant dessin, animée en px, puis 100000% une fois la
       pointe sortie de l'écran. */
    height: var(--ag-ligne-h, 0px);
    z-index: 1;
    pointer-events: none;
}


.ligne.bleu::after{
    background-color: #19476b !important;
    opacity: 0.2 !important;
}
.ligne.blanche::after{
  background-color: #ffffff;
}



/* Optionnel : Empêcher le débordement horizontal ou vertical hors du site */
main#wp--skip-link--target {
    overflow-x: hidden;
}

/* TITRES BORDURE */

.titre-border{
  color: transparent; 
  -webkit-text-stroke: 1px #ffffff;
  transition: all 0.3s ease;
}
.texte-bordure:hover {
    color: #ffffff;
}
.ligne.blanche.projet{
  margin-top: 30px;
}
/* ajustement ligne + puce */
.wp-block-heading.titre-border {
    position: relative;
    padding-left: 30px;
}
.archi-rearchi a{
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.archi-rearchi {
  margin-left: -32px !important;
}

.wp-block-heading.titre-border::before {
    content: "";
    position: absolute;
    left: 0; 
    top: 50%;
    transform: translateY(-50%);
    width: 20px; 
    height: 20px;
    border: 1px solid rgb(255, 255, 255); 
    background-color: #19476b;
    z-index: 5; 
}

/* 1. Quand on survole le lien parent : le titre passe en blanc plein */
.wp-block-tiptip-hyperlink-group-block:hover .titre-border {
    color: #ffffff !important; /* Devient blanc plein */
    -webkit-text-stroke-color: transparent !important; /* Supprime le contour */
}
/* 2. Quand on survole le lien parent : le carré passe en blanc plein */
.wp-block-tiptip-hyperlink-group-block:hover .titre-border::before {
    background-color: #ffffff !important; /* Remplissage du carré */
    border-color: #ffffff !important;     /* Le contour du carré devient blanc pur */
}
/* 3. OPTIONNEL : Ajout de transitions fluides pour adoucir l'effet */
.titre-border {
    transition: color 0.25s ease, -webkit-text-stroke-color 0.25s ease !important;
}
.titre-border::before {
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

/* titres puce */

/* 1. On prépare le titre à recevoir et aligner la puce */
.titre-puce {
    align-items: flex-start; /* Aligne verticalement le carré et le texte */
    gap: 16px !important; /* Espace entre le carré bleu et le texte "Histoire" */
}

/* 2. On injecte le carré bleu en amont */
.titre-puce::before {
      margin-top: 6px;
    content: "";
    display: inline-block;
    width: 24px;  
    height: 24px;
    background-color: currentColor; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 10px;
}


/* projet */ 
.rearchi {
    position: relative;
    overflow: hidden;
}
/*
.rearchi::after {
    content: "rearchitecture";
    position: absolute;
    top: 25px;
    right: 20px;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: 0.95; 
    z-index: 10; 
}
*/

/* btns */

/*hover*/
.btn-fleche .wp-block-button__link:hover, 
.btn-plus .wp-block-button__lin:hover{
  background-color: var(--wp--preset--color--contrast) !important;
  color: #ffffff !important;
}


.btn-fleche .wp-block-button__link, .btn-plus .wp-block-button__link{
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    padding-left: 24px !important; 
    line-height: 50px; 
    height: 50px; 
}

.btn-fleche .wp-block-button__link::after {
    content: "";
    display: block;
    width: 50px; 
    height: 50px;
    margin-left: 20px; 
    border-left: 1px solid #d97724; 
    background-image: url('/wp-content/uploads/2026/06/btn-fleche.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 52px;
    box-sizing: border-box;
}

.btn-plus .wp-block-button__link::after {
    content: "";
    display: block;
    width: 50px; 
    height: 50px;
    margin-left: 20px; 
    border-left: 1px solid #d97724; 
    background-image: url('/wp-content/uploads/2026/06/btn-plus-nobox.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 52px;
    box-sizing: border-box;
}
.btn-plus.actu{
  margin-right: -1px !important;
  margin-bottom: -1px !important;
}

.citation p > div,
.manifeste p > div {
  opacity: 0.3;
  background: linear-gradient(
    to right,
    var(--wp--preset--color--contrast) 50%,
    rgb(37, 37, 37) 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.light .citation p > div {
  opacity: 0.3;
  background: linear-gradient(
    to right,
    var(--wp--preset--color--base) 50%,
    rgb(37, 37, 37) 50%
  );
}

.siteWeb figure::before {
  content: "";
  display: block;
  width: 100%;
  height: 43px;
  background-color: #262626;
  border-radius: 25px 25px 0 0;
}

.grid img {
  border-radius: 20px;
}

/* Grid logos */
.wp-block-group.is-layout-grid {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 6rem;
}
.wp-block-group.is-layout-grid figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.wp-block-group.is-layout-grid img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.selected {
  color: var(--wp--preset--color--custom-rose-cp) !important;
}

.pages_title {
  position: relative;
  z-index: 100;
}

.SiteVids video {
  border-radius: 0 !important;
}

/* Liste pages contenu */
.ListeInfos p {
  margin: 0;
}
.ListeInfos a {
  display: flex !important;
  text-decoration: none !important;
  margin: 0;
  padding-bottom: 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.ListeInfos a::after {
  content: "→";
  font-weight: 400;
  font-size: 40px;
  color: inherit;
}
.ListeInfos a:hover {
  color: var(--wp--preset--color--primary) !important;
  transform: translateX(5px);
}
.ListeInfos a:hover::after {
  transform: translateX(5px);
}
.ListeInfos .wp-block-navigation .wp-block-navigation-item{
	display: block !important;
}

.home-picto-prod{
  display: flex !important;
  align-items: center !important;
}

/* -------------------------------------------------------------------------- */
/* 8) Footer                                                                  */
/* -------------------------------------------------------------------------- */

@media (min-width: 1017px) {
  .bottom {
    margin-top: -100px;
    z-index: 300;
    position: relative;
  }
  .details .wp-block-group {
	  z-index: 2;
	  position: relative;
  }
  .details:before{
	   content: "";
	    background-color: var(--wp--preset--color--accent-4);
	    width: 100%;
	    height: 30vh;
	    display: block;
	    position: absolute;
	    top: 0;
	    z-index: 1;
  }
}

.bas-footer 

/* -------------------------------------------------------------------------- */
/* 9) Images “qui”                                                            */
/* -------------------------------------------------------------------------- */

.imgQui img {
  max-height: 90vh;
  vertical-align: top;
}

/* -------------------------------------------------------------------------- */
/* 10) Accordéon                                                              */
/* -------------------------------------------------------------------------- */

.accordion {
  width: 250px;
  margin: 15px;
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
}
.accordion-menu {
  padding: 10px;
  cursor: pointer !important;
  user-select: none;
  position: relative;
}
.accordion-content {
  height: 0;
  overflow: hidden;
  font-size: 14px;
}
.accordion-content.expanded {
  height: 0;
  overflow: hidden; /* semble volontaire */
}
.accordion-plus,
.accordion-minus {
  position: absolute;
  top: 7px;
  right: 8px;
}

/* -------------------------------------------------------------------------- */
/* 11) Formulaires (Gravity Forms)                                            */
/* -------------------------------------------------------------------------- */



/*MARQUE */
/* === Contact Form - Mise en page redesign === */


.gform-marques .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 12px !important;
}


.gform-marques .gfield--type-name:has(.name_last) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.gform-marques .gfield--type-textarea {
  grid-column: 2 !important;
  grid-row: 1 / 4 !important;
  width: 100% !important;
  max-width: 100% !important;
}


.gform-marques .gfield--type-name:has(.name_first) {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
}


.gform-marques .gfield--type-email {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
}


.gform-marques .gfield--type-submit {
  grid-column: 2 !important;
  grid-row: 4 !important;
  justify-self: end !important;
  width: auto !important;
}


.gform-theme--orbital {
  --gf-ctrl-size: var(--gf-ctrl-size-md) !important;
  --gf-ctrl-btn-size: var(--gf-ctrl-btn-size-md) !important;
  --gf-ctrl-btn-padding-x: var(--gf-ctrl-btn-padding-x-md) !important;
  --gf-ctrl-btn-font-size: var(--gf-ctrl-btn-font-size-md) !important;
  --gf-label-space-y-secondary: var(--gf-label-space-y-md-secondary) !important;
}


.gform-body input {
  padding: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.gform-body input, textarea {
  font-weight: 300 !important;
  font-size: 1.2rem !important;
}
.gform_footer .gform_button, input.gform-button{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  line-height: 50px !important;
  color: #d97724 !important;
  border: #d97724 1px solid !important;
  font-family: var(--wp--preset--font-family--capitana) !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  background: none !important;
  padding: 0px 15px !important;
}
.gform_footer .gform_button:hover, input.gform-button:hover{
  background-color:#d97724 !important; ;
  color: #ffffff !important;
}


.gform_validation_errors{
  border: #d97724 solid 1px !important;
}
.gform_validation_errors h2,
.gform_validation_errors ol, 
.gform_validation_errors a, 
.gform_validation_errors span,
.gform-theme--framework .gfield_validation_message{
  color: #d97724 !important;
}

#gform_wrapper_1 {
    --gf-ctrl-border-color-error: #d97724 !important;
}
.gform_wrapper.gform-theme {
    --gf-ctrl-border-color-error: #d97724 !important;
}


/* -------------------------------------------------------------------------- */
/* 13) Sections “for” (marquee + SVG latéraux)                                */
/* -------------------------------------------------------------------------- */

.panel .marquee-track {
  display: flex;
  gap: clamp(2rem, 6vw, 8rem);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.panel .wp-block-heading {
/*   white-space: nowrap; */
  display: inline-block;
}

section.for {
  position: relative;
  overflow: visible;
}
section.for .panel {
  position: relative;
  z-index: 2;
}

section.for .svg1,
section.for .svg2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  display: grid;
  place-items: center;
}

section.for .svg1 {
  left: 0;
}
section.for .svg2 {
  right: 0;
}

section.for .svg1 svg,
section.for .svg2 svg {
  width: min(35vw, 50vw);
  height: auto;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* -------------------------------------------------------------------------- */
/* 14) Éléments décoratifs positionnés                                        */
/* -------------------------------------------------------------------------- */

.get-on-front {
  position: relative;
  z-index: 999 !important;
}

.ligne-verte,
.beige-ligne,
.bleu-ligne {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.ligne-verte2 {
  position: absolute;
  right: 10rem;
}

.ligne-verte {
  bottom: 10rem;
  width: 1rem;
}
.beige-ligne {
  bottom: 18rem;
  width: 2rem;
}
.bleu-ligne {
  bottom: -7rem;
  width: 2rem;
  z-index: 2;
}

.savoir-faire {
  position: relative;
  left: 2rem;
}
.creativite {
  position: relative;
  left: -2rem;
}

.lignes {
  position: relative;
  left: 18rem;
  top: 15rem;
}
.arcs-cercles {
  position: relative;
  left: -5rem;
  top: 9rem;
}

.arcs-cercles .wp-image-706 {
  width: 8rem !important;
}
.lignes .wp-image-699 {
  width: 10rem !important;
}

/* Heart anim */
.heart img {
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 30%;
  width: 40vh;
  animation: heartFadeInOut 2s infinite;
}

@keyframes heartFadeInOut {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.97);
  }
  35% {
    transform: scale(0.9);
  }
  45% {
    transform: scale(1.1);
  }
  55% {
    transform: scale(0.9);
  }
  65% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

/* -------------------------------------------------------------------------- */
/* 15) Utilitaires perf                                                       */
/* -------------------------------------------------------------------------- */

[data-reveal],
[data-parallax],
[data-item] {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* -------------------------------------------------------------------------- */
/* 16) WooCommerce                                                             */
/* -------------------------------------------------------------------------- */

/* Onglets Woo (bloc product-details) */
.wp-block-woocommerce-product-details .tabs {
  display: none !important;
}
.wp-block-woocommerce-product-details .wc-tab {
  display: block !important;
}

.wc-flat-tabs {
  margin-top: 2rem;
}
.wc-flat-section {
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.wc-flat-section:first-child {
  border-top: 0;
}
.wc-flat-title {
  margin: 0 0 0.5rem;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent-1) !important;
}

.split-list-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem 2rem;
}
.split-list-columns ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.split-list-columns li {
  margin-bottom: 0.5rem;
}
.split-col li ul {
  margin-left: 1rem;
}

.woocommerce div.product div.images {
  margin-bottom: 0 !important;
}

.woocommerce div.product .woocommerce-tabs .panel{
	margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
  background-color: var(--wp--preset--color--accent-6) !important;
}

.woocommerce .wp-block-woocommerce-product-image-gallery {
  max-width: 100%;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
  overflow: visible !important;
}

/* Cart / checkout */
.wp-block-woocommerce-checkout-order-summary-block {
  background-color: var(--wp--preset--color--accent-6);
}
.wc-block-cart__main {
  background-color: #fff;
}

/* Cards produits (hover image + title) */
.wc-block-product .wp-block-tiptip-hyperlink-group-block {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.wc-block-product .wp-block-cover {
  border-radius: 50%;
  overflow: hidden;
}
.wc-block-product .wp-block-cover__image-background {
  transition: transform 0.6s ease;
  transform-origin: center;
  will-change: transform;
}
.wc-block-product .wp-block-post-title {
  transition: transform 0.35s ease, color 0.3s ease;
  will-change: transform;
  min-height: 40px;
}
.wc-block-components-product-summary strong {
  font-weight: 600;
  color: var(--wp--preset--color--accent-1) !important;
}
.page-numbers{
padding: 2px 5px;
}

.page-numbers.current{
	background-color: var(--wp--preset--color--contrast); 
	color: white;
	
}
.page-numbers:hover{
	background-color: var(--wp--preset--color--accent-2);
}

/* Hover/focus desktop seulement */
@media (hover: hover) and (pointer: fine) {
  .wc-block-product
    .wp-block-tiptip-hyperlink-group-block:hover
    .wp-block-cover__image-background,
  .wc-block-product
    .wp-block-tiptip-hyperlink-group-block:focus-visible
    .wp-block-cover__image-background {
    transform: scale(1.06);
  }

  .wc-block-product .wp-block-tiptip-hyperlink-group-block:hover .wp-block-post-title,
  .wc-block-product
    .wp-block-tiptip-hyperlink-group-block:focus-visible
    .wp-block-post-title {
    transform: translateY(-6px);
  }

  .wc-block-product .wp-block-tiptip-hyperlink-group-block:hover {
    transform: translateY(-3px);
  }
}

/* Focus clavier */
.wc-block-product .wp-block-tiptip-hyperlink-group-block:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 16px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .wc-block-product .wp-block-tiptip-hyperlink-group-block,
  .wc-block-product .wp-block-cover__image-background,
  .wc-block-product .wp-block-post-title {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 17) Getwid Mega Menu : états + styles                                      */
/* -------------------------------------------------------------------------- */

/*
.wp-block-getwid-megamenu-item:hover > .gw-mm-item__link a,
.keep-open .gw-mm-item__link a {
  background-color: var(--wp--preset--color--accent-1);
}
*/

.gw-mm-item__dropdown-content {
  padding: 0 !important;
}
.gw-mm-item__dropdown .gw-mm-item__dropdown-wrapper .gw-mm-item__dropdown-content {
  padding: 0 !important;
  background-color: #fff;
}
.gw-mm-item__dropdown > * {
  margin-block-start: 0 !important;
}

.gw-mm.is-mobile.is-opened .gw-mm__content-wrapper {
  left: 0 !important;
  background: linear-gradient(90deg, rgb(0, 104, 96) 0%, rgb(1, 163, 139) 100%);
}

.wp-block-getwid-megamenu.is-mobile {
  padding: 40px;
}

/* Sous-menus alignés à droite sur certains items */
.societe .gw-mm-item__dropdown-wrapper,
.patients .gw-mm-item__dropdown-wrapper,
.technologie .gw-mm-item__dropdown-wrapper {
  width: 200px !important;
  right: 0 !important;
  left: auto !important;
}

.societe .gw-mm-item__dropdown a,
.patients .gw-mm-item__dropdown a,
.technologie .gw-mm-item__dropdown a {
  padding: 15px;
}

/* Mobile layout spacing */
.wp-block-navigation__container {
  gap: 0 !important;
}

/* Item contact (icône only) */
.wp-block-getwid-megamenu-item.contact > .gw-mm-item__link a {
  font-size: 0;
}
.wp-block-getwid-megamenu-item.contact > .gw-mm-item__link a:hover {
  background-color: transparent;
}
.wp-block-getwid-megamenu-item .gw-mm-item__link a:before {
  background-size: contain !important;
  display: block;
}

/* Menu couleurs hover */
.wp-block-navigation-item__content:hover a span {
  color: #fff;
}
.gw-mm-item__link{
  transition: 0.4s all cubic-bezier(0.43, 0.195, 0.02, 1);
}
.gaz .gw-mm-item__link:hover, .gaz.is-opened .gw-mm-item__link{
  background-color: var(--wp--preset--color--accent-2);
}
.poussiere .gw-mm-item__link:hover, .poussiere.is-opened .gw-mm-item__link{
  background-color: var(--wp--preset--color--accent-3);
}
.services .gw-mm-item__link:hover, .services.is-opened .gw-mm-item__link{
  background-color: var(--wp--preset--color--accent-1);
}

.gw-mm-item__link:hover{
	color: white;
}

.menuVert {
  border-radius: 0 0 0 40px;
}

/* -------------------------------------------------------------------------- */
/* 18) Blocs produits/catégories custom                                       */
/* -------------------------------------------------------------------------- */

.hw-product-categories--grid .hw-product-categories__grid {
  gap: 2px;
  background-color: var(--wp--preset--color--accent-2);
  border: 2px solid var(--wp--preset--color--accent-2);
}

.hw-product-categories--grid .hw-product-categories__grid li {
  background-color: rgba(255, 255, 255);
  backdrop-filter: blur(10px);
}

.hw-product-categories--grid .hw-product-categories__grid li a span {
  padding: 20px;
}

.hw-product-categories__name {
  margin-top: 0;
  color: var(--wp--preset--color--accent-2);
  background-color: rgba(153, 187, 202, 0.21);
}

.hw-product-categories__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  transition: 0.4s all cubic-bezier(0.43, 0.195, 0.02, 1);
}

.hw-product-categories__link {
  gap: 0 !important;
  padding: 0 !important;
  align-items: inherit;
}

.hw-product-categories__link:hover .hw-product-categories__media {
  background-color: rgba(153, 187, 202, 0.21);
}

.hw-product-categories__image {
  max-height: 100%;
  width: auto;
  display: block;
}

/* Vidéos */
.wp-block-video {
  overflow: hidden;
  border-radius: 50px;
}

/* Thumbs Woo */
.flex-control-thumbs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}


.woocommerce div.product div.images .flex-control-thumbs li {
	width: inherit;
	float: inherit;
  background-color: #fff;
}

/* Divers */
.head {
  overflow: hidden;
}
.chiffres {
  backdrop-filter: blur(10px);
}



/* -------------------------------------------------------------------------- */
/* 19) Bannières / overlays                                                    */
/* -------------------------------------------------------------------------- */

.wp-block-cover.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 42.81%,
    rgba(255, 255, 255, 0.24) 60.57%,
    rgba(255, 255, 255, 0.47) 78.26%,
    rgba(255, 255, 255, 1) 95.29%
  );
}

.wp-block-cover.bg_chiffres::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(255 255 255) 42.81%,
    rgb(255 255 255 / 27%) 60.57%,
    rgb(255 255 255 / 0%) 78.26%,
    rgb(255 255 255 / 0%) 95.29%
  );
}
.wp-block-cover.bg_histoire::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(255 255 255) 15%,
    rgb(255 255 255 / 0%) 60.57%,
    rgb(255 255 255 / 0%) 78.26%,
    rgb(255 255 255 / 0%) 95.29%
  );
}

/* -------------------------------------------------------------------------- */
/* 20) Intro : backgrounds animés                                             */
/* -------------------------------------------------------------------------- */

.intro {
  transition-delay: 1s;
  transition: 0.8s all cubic-bezier(0.43, 0.195, 0.02, 1);
  background: url(img/trefle.svg) no-repeat;
  background-size: contain;
  background-position: calc(50% + var(--bg-x, 0px)) calc(50% + var(--bg-y, 0px));
  position: relative;
  will-change: transform;
}

.intro.active-trigger {
  background-position: 85% 50%;
}

.intro:after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  transition: 0.8s all cubic-bezier(0.43, 0.195, 0.02, 1);
  transition-delay: 0.4s;

  background: url(img/produits.png) no-repeat 70% center;
  background-size: contain;

  --after-mx: 0px;
  --after-my: 0px;
  margin-left: var(--after-mx);
  margin-top: var(--after-my);
  margin-right: calc(var(--after-mx) * -1);
  margin-bottom: calc(var(--after-my) * -1);

  top: 0;
  right: 0;
  opacity: 0;
}

.active-trigger.intro:after {
  opacity: 1;
  top: -20px;
}

.bloc_services, .bloc_choix {
  margin-top: -20vh !important;
}

/* -------------------------------------------------------------------------- */
/* 21) Listes custom (role=list)                                              */
/* -------------------------------------------------------------------------- */

ul[role="list"] {
  columns: 1;
  column-gap: 2rem;
  list-style: none; /* on supprime les puces natives */
  margin: 0;
  padding: 10px 3px 27px 40px;
  list-style-position: outside;
}

ul[role="list"] li {
  position: relative;
  break-inside: avoid;
  margin-bottom: 0.5em;
  padding-left: 1.8em;
}

/* Puces (niveau 1/2/3) : mêmes dimensions, mais gardé tel quel */
ul[role="list"] > li::before,
ul[role="list"] > li > ul > li::before,
ul[role="list"] > li > ul > li > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1em;
  height: 1em;
}

/* -------------------------------------------------------------------------- */
/* 22) Défil / marquee                                                        */
/* -------------------------------------------------------------------------- */

.defil {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.defil-inner {
  display: inline-flex;
  align-items: center;
  animation: scrollLoop var(--speed, 40s) linear infinite;
}

.defil h2 {
  display: inline-block;
  padding-right: 4rem;
  white-space: nowrap;
  margin: 0;
}

@keyframes scrollLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* -------------------------------------------------------------------------- */
/* 23) Dropdown interne (menu déroulant)                                      */
/* -------------------------------------------------------------------------- */

.gw-mm-item .gw-mm-item .gw-mm-item__dropdown-wrapper {
  opacity: 0;
  transition: 0.3s all ease-in-out;
  height: 0 !important;
}
.gw-mm-item .gw-mm-item:hover .gw-mm-item__dropdown-wrapper {
  opacity: 1;
  min-height: auto;
}

/* -------------------------------------------------------------------------- */
/* 24) Typo : sup                                                            */
/* -------------------------------------------------------------------------- */

h1 sup,
h2 sup,
h3 sup,
sup,
span.reg-mark {
  font-size: 0.6em;
  vertical-align: super;
}

sup {
  line-height: 0;
}

h1:has(span.reg-mark),
h2:has(span.reg-mark) {
  position: relative;
}

/* -------------------------------------------------------------------------- */
/* 25) Techno section overflow (desktop)                                      */
/* -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .techno-section {
    position: relative;
    border-radius: 0 !important;
    background: transparent !important;
    z-index: 0;
  }

  .techno-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 400px;
    background: var(--wp--preset--gradient--custom-jaune, inherit);
    max-height: 70%;
  }

  .techno-section .technos {
    position: relative;
  }
  .MobileOn{
    display: none ;
  }
  
  
}

/* Mobile : aucun débordement */
@media (max-width: 1023px) {
  .techno-section .technos {
    transform: none;
  }
  .techno-section {
    background: var(--wp--preset--gradient--custom-jaune, inherit) !important;
    border-radius: 400px;
  }
  .MobileBanner{
    display: flex;
    flex-direction: column;
    max-width:100% !important;
  }
 
  .MobileOff{
    display:none;
  }
  .BigMarge{
    padding-right: 0 !important;
    margin-top: -60px !important;
  }
  .BigMarge .wp-block-columns{
    padding: 0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 26) Divers UI                                                              */
/* -------------------------------------------------------------------------- */
.nos-marques{
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
}



.citation p > div {
  opacity: 0.3;
  background: linear-gradient(
    to right,
    var(--wp--preset--color--contrast) 50%,
    var(--wp--preset--color--base) 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Révélation cascade sur .manifeste (pas de gradient — opacité seule) */
.manifeste > div {
  opacity: 0.3;
}

/* Sur fond clair (.light) : texte bleu dès le départ */
.light .manifeste,
.light .manifeste > div {
  color: #1a476b;
}


/* fit-text sur éléments position:absolute : WP utilise el.clientWidth qui s'étire
   avec le texte → surévalue la taille (ou retourne 0 pour les <br>). width:100%
   contraint el.clientWidth au conteneur positionné → WP calcule la bonne taille par mot.
   max-width:none annule le max-width:1200px du layout contraint WP sur titre-banner. */
.titre-page.has-fit-text {
  width: 100%;
}
.titre-banner.has-fit-text {
  width: 100%;
  max-width: none;
}

/* Fondu au lieu de display-swap pour éviter le jump au rollover */
.equipe-photo {
  overflow: hidden;
}
.equipe-photo2 {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.43, 0.195, 0.02, 1);
}
.equipe-photo:hover .equipe-photo2 {
  opacity: 1;
}



body .wp-block-buttons .wp-block-button__link {
  width: auto !important;
}



.wc-block-product .wp-block-button__link{
	border: 4px solid var(--wp--preset--color--contrast) ;
}
.wp-block-button__link:before{
	content: "";
	position: absolute;
	display: block;
	font-size: 20px;
	right: 4px;
	top: 2px;
    font-family: "capitana" !important;
    text-transform: lowercase;
}

.mapster-wp-maps {
  border-radius: 50% !important;
  overflow: hidden !important;
}

.variations th {
  padding: 0 !important;
}

/* Panels Woo tabs */
.woocommerce-Tabs-panel--description {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--accent-2) !important;
}
.woocommerce-Tabs-panel--description a{
	color: rgba(255, 255, 255, 0.96);
}

.woocommerce-Tabs-panel--additional_information,
.woocommerce-Tabs-panel--description,
.wp-block-woocommerce-product-specifications {
  padding: 4rem !important;
}
.woocommerce-Tabs-panel--additional_information, .wp-block-woocommerce-product-specifications {
  background-color: #fff;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes td a,
.woocommerce table.shop_attributes td p {
  font-size: 14px;
}
.woocommerce table.shop_attributes th {
  text-align: left;
}
.woocommerce table.shop_attributes td {
  font-style: normal;
  text-align: right;
}

.BigImage{
  width: 700px;
}
.CadreImg{
    position: relative !important;
    display: inline-block; 
}

.CadreImg::after{
    content: "";
    position: absolute;
    display:block;
    top: 50px; 
    left: 50px;
    width: 20rem;
    height: 20rem;
    background-image: url('/wp-content/uploads/Rectangle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    pointer-events: none;
}
.TopGroup{
  z-index: 5 !important;
}

/* -------------------------------------------------------------------------- */
/* 27) Mega dropdown custom (plein écran)                                     */
/* -------------------------------------------------------------------------- */

.wp-block-navigation-item.has-mega {
  position: relative;
}

.mega-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 100vw;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 40;
}

.mega-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-dropdown-inner {
  max-width: var(--wp--style--global--content-size, 1200px);
  height: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
  overflow-y: auto;
}

.mega-grid {
  height: 100%;
}
.mega-right {
  position: relative;
}

/* Menu vertical gauche */
.mega-left-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mega-item {
  cursor: pointer;
}

.mega-item.is-active {
  font-weight: 600;
}
.mega-item.is-active > * {
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 0.6rem 0.9rem;
}

/* Panneaux droite */
.mega-panel {
  display: none;
}
.mega-panel.is-visible {
  display: block;
}
.mega-panel h2,
.mega-panel h3 {
  margin-top: 0;
}

.mega-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* =============================================
   BLOC NOS PRODUITS — Toggle gaz / poussières
   ============================================= */

.btn_gaz,
.btn_poussiere {
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Bouton gaz : bordure visible même à l'état inactif pour que la taille ne change pas */
.btn_gaz {
  border: 3px solid var(--wp--preset--color--accent-2, #99bbc9) !important;
}

.wp-block-group.btn_poussiere {
	color: #9c8e7d;
  border: 3px solid var(--wp--preset--color--accent-3, #9b8d7c) !important;
}



/* Contenu poussières masqué par défaut */
.content_poussiere {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.content_gaz {
  transition: opacity 0.3s ease;
}




@media (max-width: 800px) {
  .mega-dropdown-inner {
    padding: 1.5rem 1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 28) Media queries                                                          */
/* -------------------------------------------------------------------------- */

@media (min-width: 783px) {
  ul[role="list"] {
    columns: 2;
  }
  ul[role="list"] ul {
    columns: 1;
  }

  /* Masquer le toggle desktop */
  .gw-mm-item__link .gw-mm-item__toggle {
    display: none;
  }
}

@media (max-width: 1213px) {
  .basline {
    min-width: 445px !important;
  }
}

@media (max-width: 650px) {
  .circle.one {
    top: 15vh;
    right: -47vw;
  }
  .circle.two {
    left: -15vw;
  }
  .circle svg {
    height: 60vw;
  }

  .creativite,
  .savoir-faire {
    left: 0 !important;
  }

  .bleu-ligne,
  .beige-ligne {
    display: none;
  }

  .ginput_container_consent {
    padding-top: 0 !important;
  }

  .intro .wp-block-heading {
    margin-top: 80vw;
  }
  .intro.active-trigger {
    background-position: inherit;
  }
  .intro:after {
    background-position: left top;
    right: 10%;
  }
}

@media (max-width: 400px) {
  .title {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mega menu mobile (Getwid) */
@media (max-width: 783px) {
  .wp-block-getwid-megamenu-item > .gw-mm-item__link a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #fff;
    bottom: 0;
    left: 0;
  }

  .wp-block-getwid-megamenu-item > .gw-mm-item__link a {
    font-size: 22px !important;
    position: relative !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    padding-left: 30px !important;
  }

  .wp-block-getwid-megamenu-item > .gw-mm-item__link a:before {
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto !important;
    margin-bottom: -15px !important;
    display: inline-block !important;
    margin-right: 30px !important;
  }

  .gw-mm__toggle {
    background: none;
    border: none;
    font-size: 0;
  }

  .gw-mm__toggle .dashicons-menu {
    background-color: transparent !important;
    color: transparent !important;
    width: 30px;
    height: 30px;
    background-image: url(/wp-content/uploads/2025/11/menu-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .gw-mm.is-mobile.is-opened .gw-mm__content-wrapper {
    top: 100% !important;
  }

  :where(.wp-site-blocks *:focus) {
    outline-width: 0 !important;
  }

  .gw-mm__toggle.is-opened .dashicons-menu {
    background-image: url(/wp-content/uploads/2025/11/close_menu.svg) !important;
  }

  .gw-mm-item__link {
    position: relative;
  }

  .gw-mm-item__link .gw-mm-item__toggle {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  .gw-mm-item__dropdown-wrapper.is-opened .gw-mm-item__link .gw-mm-item__toggle {
    display: none !important;
  }

  .gw-mm-item__link .gw-mm-item__toggle .dashicons-arrow-down {
    right: 0;
    position: absolute;
  }

  .gw-mm-item__link .gw-mm-item__toggle .dashicons-arrow-down::before {
    background: url(/wp-content/uploads/2025/11/fleche_next.svg) no-repeat center
      center !important;
    content: "" !important;
    position: absolute !important;
    width: 10px !important;
    height: 35px !important;
    display: inline-block !important;
    scale: 1.4 !important;
    transition: transform 0.3s ease;
  }

  .gw-mm-item__link .gw-mm__toggle.is-opened .dashicons-arrow-down::before {
    transform: rotate(90deg) scale(1.4) !important;
    transition: transform 0.3s ease;
  }

  .gw-mm.is-mobile .gw-mm__content-wrapper {
    position: relative;
  }

  .wp-block-getwid-megamenu.is-mobile {
    padding-top: 40px;
    padding-left: 0;
  }

  /* Désactive les items suivants quand “produits” est ouvert */
  .wp-block-getwid-megamenu-item.produits.is-opened
    ~ .wp-block-getwid-megamenu-item
    .gw-mm-item__link
    a,
  .wp-block-getwid-megamenu-item.produits.is-opened
    ~ .wp-block-getwid-megamenu-item
    .gw-mm-item__link
    .gw-mm-item__toggle {
    pointer-events: none !important;
  }

  .wp-block-getwid-megamenu-item.produits .gw-mm-item__dropdown a {
    pointer-events: auto !important;
  }
}

.wc-block-product-gallery-thumbnails__thumbnail{
	background-color: rgba(255, 255, 255, 0.3);
}

.wc-block-product-gallery-thumbnails__thumbnail__image wc-block-product-gallery-thumbnails__thumbnail__image--is-active{
	background-color: white;
}

.price-from-label{
	display: block;
	font-size: 1rem;
}

 .harvest-btn {
            display: block;
            width: 100%;
            padding: 12px;
            cursor: pointer;
            font-weight: bold;
            text-align: center;
            box-sizing: border-box;
        }
        .harvest-btn--primary {
            background: var(--wp--preset--color--accent-6);
            color: var(--wp--preset--color--contrast);
            border: 3px solid var( --wp--preset--color--accent-1) !important;
            margin-top: 15px;
            max-width: 110px !important;
            text-align: left !important;
        }
        .harvest-btn--secondary, .harvest-btn--primary {
            background: var(--wp--preset--color--accent-6);
            color: var(--wp--preset--color--contrast) !important;
            border: 3px solid var(--wp--preset--color--contrast) !important;
            margin-top: 15px;
            max-width: 200px;
        }
        /* Quand les 2 sont dans le wrapper flex */
        .harvest-atc-buttons {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }
        .harvest-atc-buttons .harvest-btn {
            flex: 1;
            width: auto;
            margin-top: 0 !important;
        }


/* Header responsive */
@media (max-width: 1017px) {
  header main {
    padding-left: 0 !important;
  }
  header main .logo {
    padding: 0 0 0 5% !important;
  }
}
.ic-pdf-list{
 	gap: 10%;
	display: inline-flex;
}


/**
 * Fix de l'affichage de la page /mon-compte/edit-address/
 * Anatecs - thème Twenty Twenty-Five enfant
 */



.u-columns.woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Force le placement des deux blocs côte à côte sur la même ligne */
.woocommerce-Address.u-column1.col-1 {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.woocommerce-Address.u-column2.col-2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* Réorganise le bloc Adresse : titre, adresse, puis bouton Modifier en bas */
.woocommerce-Address {
    display: flex;
    flex-direction: column;
}

.woocommerce-Address-title.title {
    display: block; /* annule le flex row qu'on avait mis avant */
    background: transparent;
    padding: 0;
    margin-bottom: 0.75rem;
    order: 1;
}

.woocommerce-Address-title.title h2,
.woocommerce-Address-title.title h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    flex: none;
}

.woocommerce-Address address {
    order: 2;
    margin-bottom: 1rem;
    line-height: 1.6;
    font-style: normal;
}

/* Le bouton Modifier sort du header et passe en bas */
.woocommerce-Address > .edit {
    order: 3;
    align-self: flex-start;
    margin-top: 0.75rem;
    /* Garde le style bouton qu'on avait avant */
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #116483;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: background 0.2s ease;
}

.woocommerce-Address > .edit:hover {
    background: #0d4f68;
}
@media (max-width: 768px) {
  /* .banner-home : plus d'ecrasement a 100vh ici. Le bloc porte deja son
     min-height EN INLINE (regle dans l'editeur, 80vh) ; ce !important le
     bafouait sur mobile et rendait le hero non reglable par le client.
     Hero plus bas (demande 16/07) + main rendue a l'editeur. */
  .grille-projets, .photos-equipes, .actus{
  margin-top: -10px !important;
  }
  .nav-footer{
  display: none !important;
  }
  .bannieres-expertises >.wp-block-group, .bannieres-expertises{
  padding: 0 !important
  }
  .bannieres-expertises .wp-block-cover__inner-container {
    padding: 0 !important;
}
  .bannieres-expertises .wp-block-cover__inner-container p{
    font-size: 15px !important;
}
  .manifeste{
    font-size: 20px !important;
  }
  .parent-titre-banner, .parent-titre-banner p{
    padding-top: 2vh !important;
    padding-bottom: 2vh !important;
  }
  
  .piliers .wp-block-cover{
    min-width: 100% !important;
    width: 100% !important;
    /* L'editeur regle ces covers en aspect-ratio 9/16 + min-height:unset (inline).
       Sur mobile 9/16 donnerait 330x587px = trop haut -> on neutralise le ratio et
       on pilote par une hauteur en vh. */
    aspect-ratio: unset !important;
    /* 50vh (et non 80) : mesure a 390x844, le contenu d'un pilier (numero + titre
       + description) n'occupe que 202px pour 675px de cover = 473px de VIDE, et
       les 4 piliers totalisaient 2701px = 3,2 ecrans. A 50vh : 4x422 = 1688px
       = 2 ecrans, en gardant ~220px de visuel sous le texte. Ne pas descendre
       beaucoup plus bas : 202px de texte + l'image doivent respirer. */
    min-height: 50vh !important;
  }
  .group-txt,
  .group-txt .wp-block-group,
  .group-txt h3,
  .group-txt p{
    min-width: 100%;
  }
  .group-txt .gf_browser_chrome {
    margin-right: 0 !important;
}
  

}
@media (max-width: 600px) {
    .agpn-mosaic {
        grid-template-columns: 1fr;
        /* La hauteur est menee par la carte (aspect-ratio), plus par la rangee.
           Avant : `30rem !important` (480px) gagnait sur `170cqw`, pendant que la
           carte etait forcee a 70vh (591px) -> elle debordait de 86px et mordait
           sur la suivante, mangeant le gap de 24px = visuels colles. */
        grid-auto-rows: auto;
    }
      article.agpn-card {
        /* Carre parfait (demande client) : largeur de colonne = hauteur.
           Identique au principe desktop ou .is-span-1 est deja 1:1. */
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
    .wp-block-navigation__responsive-container.is-menu-open{
      min-height: 100vh !important;
    }
    .expertises-sticky .col2{
      display: none !important
    }
    .agpn-banniere{
      /* 60vh (et non 80) pour degager le titre du projet des l'arrivee.
         Mesure : le H1 demarre 49px sous la banniere. A 80vh il tombait a
         724px sur un ecran de 844 (86% = colle au bord) et SOUS la ligne de
         flottaison sur un iPhone SE (667). A 60vh : 555px / 449px = vu partout.
         NB l'inline du bloc (--agpn-bh:35vw, regle dans l'editeur) ne vaut que
         pour le desktop : 35vw sur mobile = 136px, d'ou cet ecrasement. */
      min-height: 60vh !important;
      margin-top: 0px !important;
    }
    .wp-block-breadcrumbs{
      margin-top: 5vh !important;
      margin-right: 20px !important;
    }
    .single-projet .wp-block-breadcrumbs{
      margin-top: 25vh !important;
      margin-right: 20px !important;
    }
    .citation p{
      font-size: 24px !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open.is-menu-open{
      background: var(--wp--preset--color--contrast) !important;
    }
}

/* ---- MOBILE : layout responsive ---- */
@media (max-width: 767px) {

  /* Section non-sticky */
  .expertises-sticky {
    position: static;
  }

  /* Images en haut, texte en bas */
  .expertises-sticky .wp-block-columns {
    flex-direction: column-reverse !important;
  }

  /* Colonne images pleine largeur */
  .expertises-sticky .wp-block-columns .wp-block-column:last-child {
    position: relative;
    width: 100%;
  }

  /* Première image visible par défaut (le JS ne tourne pas sur mobile) */
  .expertises-sticky .wp-block-columns .wp-block-column:last-child > a:first-child {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Autres images cachées */
  .expertises-sticky .wp-block-columns .wp-block-column:last-child > a:not(:first-child) {
    display: none !important;
  }

  /* Titres : texte plein, pas d'outline */
  .expertises-sticky .wp-block-columns .wp-block-column:first-child h3 {
    color: #1a476b !important;
    -webkit-text-stroke: none !important;
  }

  /* Colonne texte pleine largeur */
  .expertises-sticky .wp-block-columns .wp-block-column:first-child {
    width: 100%;
  }
  .parent-titre-banner > .wp-block-group {
    padding-top: 20vh !important;
  }
}
@media (max-width: 600px) {
  .wp-block-navigation-item__content{
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 24px !important;
    font-weight: 700;
  }

  

  .wp-block-navigation__responsive-container-open{
    display: flex !important;
    align-items: center !important;
  }
  .wp-block-navigation__responsive-container.is-oppened {
    min-height: 100vh !important;
  }
  .expertise-contenu{
    padding: 0 20px!important;
  }
  .expertise-contenu p{
    font-size: 14px !important;
  }
  
  .expertise-contenu figure {
    max-width: 100vw !important;
  }
  .expertise-contenu .wp-block-image img{
    min-width: 100% !important;
  } 
}

@media (max-width: 450px) {

	.logo{
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	#amm-root{
		height: 80px !important;
		min-height: 80px !important;
	}
  .actus .wp-block-group.is-content-justification-right {
    display: flex;
    justify-content: center;
}
  .actus .wp-block-buttons a,
  .actus .wp-block-buttons,
  .actus .wp-block-button {
    width: 100% !important;
}
}

/* =============================================================
   QTY STEPPER — Produits simples (fallback HTML classique WooCommerce)
   Aligne l'apparence sur le wc-block-components-quantity-selector
   des produits variables
   ============================================================= */

/* Wrapper : flex row, même bordure que le bloc Gutenberg */
/*
.single-product form.cart .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(17, 100, 131, 0.3);
  border-radius: 2px;
  height: 29px;
  overflow: hidden;
  background: transparent;
  position: relative;
}
*/

/* Input central */
/*
.single-product form.cart .quantity input.qty {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  border: none;
  outline: none;
  width: 47px;
  height: 100%;
  text-align: center;
  font-size: 14px;
  font-family: inherit;
  color: var(--wp--preset--color--contrast, #116483);
  background: transparent;
  padding: 0;
  margin: 0;
  order: 2;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
*/

/* Boutons −/+ injectés par JS */
/*
single-product form.cart .quantity .qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wp--preset--color--contrast, #116483);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s;
  flex-shrink: 0;
}
.single-product form.cart .quantity .qty-btn:hover {
  background: rgba(17, 100, 131, 0.08);
}
.single-product form.cart .quantity .qty-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.single-product form.cart .quantity .qty-btn--minus { order: 1; }
.single-product form.cart .quantity .qty-btn--plus  { order: 3; }
*/

/* Adresse de facturation verrouillée (numéro de TVA présent) */
.woocommerce-Address > .harvest-vat-notice {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    color: #555;
    border-radius: 4px;
    font-size: 0.85rem;
    font-style: italic;
}
.woocommerce-Address > .harvest-vat-notice a {
    color: #116483;
    text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────────
   Effet « révélation par scroll » sur les blockquotes .citation
   Reproduit le comportement du thème ha (harvest.agency).
   Le GSAP animates backgroundPositionX 100%→0% via citationLines() dans app.js.
   Les SplitText lines s'insèrent dans le <p> du blockquote → sélecteur p > div.
   ────────────────────────────────────────────────────────────────────────── */



/* -------------------------------------------------------------------------- */
/* Menu Archigroup / Figma "Archigroup-OK" (desktop + mobile)                 */
/* -------------------------------------------------------------------------- */

/* ========================================================================== */
/* Bouton du menu mobile (ouverture + fermeture) : icône « grille 2x2 ».       */
/* Les DEUX boutons sont fixés EXACTEMENT au même endroit (haut-droite) et à la */
/* même taille, pour que l'icône ne « saute » pas entre ouvert/fermé. Le bouton */
/* d'ouverture (dans le header) et celui de fermeture (dans l'overlay) sont     */
/* deux éléments distincts rendus par WordPress ; on les superpose.            */
/* ========================================================================== */
.archigroup-main-menu .wp-block-navigation__responsive-container-open,
.archigroup-overlay-close {
	position: fixed !important;
	top: 30px !important;
	right: var(--wp--preset--spacing--40, 24px) !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 100003;
	width: 34px !important;
	height: 34px !important;
	min-width: 0;
	min-height: 0;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--wp--preset--color--base, #fff);
	cursor: pointer;
}
/* on masque l'icône SVG native (hamburger / croix) et on dessine la grille */
.archigroup-main-menu .wp-block-navigation__responsive-container-open svg,
.archigroup-overlay-close svg {
	display: none !important;
}
.archigroup-main-menu .wp-block-navigation__responsive-container-open::before,
.archigroup-overlay-close::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 13px;
	height: 13px;
	background: currentColor;
	box-shadow: 17px 0 0 currentColor, 0 17px 0 currentColor, 17px 17px 0 currentColor;
}
/* bouton de fermeture (déplacé dans <body> par JS) : invisible tant que le menu
   n'est pas ouvert, affiché au même pixel que le bouton d'ouverture sinon.
   opacity/visibility (et pas display) pour qu'il suive le fondu de l'overlay. */
.archigroup-overlay-close {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	/* ⚠️ CONTEXTE D'EMPILEMENT — ne pas baisser cette valeur.
	   menu-scroll-lock.js deplace ce bouton dans <body> : il QUITTE donc le
	   contexte du header. Or le header est `position:fixed; z-index:9999999`
	   (l.135) -> il cree un contexte, et TOUT son sous-arbre (dont l'overlay
	   navy OPAQUE, z-index 100000) est peint a SON niveau, 9999999, dans le
	   contexte RACINE. Avec le 100003 herite de la regle partagee avec le
	   burger, la croix etait donc peinte DERRIERE l'overlay : invisible, alors
	   que opacity/visibility/position etaient tous corrects — d'ou un bug
	   INDETECTABLE en getComputedStyle (il faut elementsFromPoint).
	   Le burger d'ouverture, lui, RESTE dans le header : son 100003 y est
	   valable, ne pas y toucher. Le panneau .ag-cover est a 10000001 pour
	   rester au-dessus de cette croix pendant les transitions. */
	z-index: 10000000 !important;
}
html.has-modal-open .archigroup-overlay-close {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease, visibility 0s;
}
html.has-modal-open .archigroup-main-menu .wp-block-navigation__responsive-container-open {
	display: none !important;
}

/* --- Fondu apparition / disparition de l'overlay (mobile < 600px) ---
   WordPress bascule l'overlay en display:none/flex (non animable). On le garde
   donc toujours rendu (fixed, plein écran) mais invisible/non-cliquable, et on
   anime opacity+visibility à l'ouverture/fermeture (is-menu-open). */
@media (max-width: 899.98px) {
	/* Bascule mobile alignee sur le gate desktop (min-width:900) : sous 900px on
	   passe en burger + overlay plein ecran. Avant, ce bloc etait a 600px, d'ou
	   une zone morte 600-900 ou le menu desktop s'affichait avec ses sous-menus
	   grands ouverts. Le style de l'overlay ouvert et le masquage des sous-menus
	   sont geres par les regles .is-menu-open (independantes du viewport). */
	.archigroup-main-menu .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center !important;
	}
	.archigroup-main-menu .wp-block-navigation__responsive-container {
		display: flex !important;
		position: fixed !important;
		inset: 0 !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}
	.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		animation: none !important;
		transition: opacity 0.3s ease, visibility 0s;
	}
}
@media (prefers-reduced-motion: reduce) {
	.archigroup-main-menu .wp-block-navigation__responsive-container,
	.archigroup-overlay-close {
		transition: none !important;
	}
}

/* La transition de page (panneau .ag-cover du plugin archigroup-projets-network)
   doit passer PAR-DESSUS l'overlay du menu (z-index menu max = 100003) — sinon
   elle joue derrière le menu ouvert. Et comme la nav est en AJAX (pas de reload),
   le menu est fermé au moment du swap (menu-scroll-lock.js). */
.ag-cover {
	/* Le header (.wp-block-template-part) est fixed z-index:9999999 (logo+burger
	   dedans) → le cover doit passer AU-DESSUS de lui, donc > 9999999.
	   Et > 10000000 depuis le 16/07 : la croix de fermeture y est passee pour
	   sortir de derriere l'overlay (cf. .archigroup-overlay-close). L'ordre a
	   tenir est : cover (10000001) > croix (10000000) > header (9999999). */
	z-index: 10000001 !important;
}
/* Pendant la nav, la fermeture du menu est instantanée (masquée par le cover),
   pour qu'il n'y ait aucun résidu de menu quand le cover se retire. */
html.ag-navigating .archigroup-main-menu .wp-block-navigation__responsive-container,
html.ag-navigating .archigroup-overlay-close {
	transition: none !important;
}

/* --- Puce carrée accrochée au libellé (desktop + overlay) ---------------------
   Le contenu du lien est un flex (justify-content:center) étiré sur toute la
   largeur de son slot ; une puce en position:absolute se détacherait du mot
   (elle resterait collée au bord gauche du slot). On la rend donc « inline »
   (flex-item) juste avant le libellé : puce + mot forment un bloc solidaire,
   quel que soit l'alignement ou la largeur du slot. */
.archigroup-main-menu .wp-block-navigation-item__content {
	position: relative;
	gap: 12px;
}
.archigroup-main-menu .wp-block-navigation-item__content::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	background: currentColor;            /* puce pleine par défaut (niveau 1) */
}
/* sous-rubriques : puce carrée creuse */
.archigroup-main-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	background: transparent;
	border: 1px solid currentColor;
}

/* Page courante : la puce passe en orange (accent-1).
   current-menu-item = page exacte ; current-menu-ancestor = la rubrique parente
   quand on est sur une sous-page (ex. Expertises orange sur /expertises/conception/).
   Vaut pour la barre desktop ET l'overlay mobile. */
.archigroup-main-menu .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before,
.archigroup-main-menu .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::before,
.archigroup-main-menu .wp-block-navigation-item__content[aria-current="page"]::before {
	background: var(--wp--preset--color--accent-1) !important;
	border-color: var(--wp--preset--color--accent-1) !important;
}

/* Pas d'italique sur les libellés du menu (le thème met .current-menu-item et
   .projets en italic) — la page courante se repère à sa puce orange, pas à
   l'italique. On force `normal` dans le nav (desktop + overlay). */
.archigroup-main-menu .wp-block-navigation-item,
.archigroup-main-menu .wp-block-navigation-item__content,
.archigroup-main-menu .wp-block-navigation-item__label {
	font-style: normal !important;
}

/* --- Barre desktop (En-tête) : gras, sous-menus masqués --- */
@media (min-width: 900px) {
	.archigroup-main-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
		display: none !important;
	}
	.archigroup-main-menu > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-weight: 700;
	}
	/* Menu réparti à droite comme la maquette (448:1733) : les 4 items sont
	   distribués régulièrement (space-between) sur une bande ancrée à droite,
	   plafonnée à 820px pour ne pas s'étaler à l'infini sur très grand écran
	   (par défaut les <li> avaient flex:1 1 0 et remplissaient tout le 60vw, le
	   menu "bougeait" quand l'écran s'élargissait). */
	.wp-block-navigation__responsive-container:not(.is-menu-open) ul.wp-block-navigation__container.archigroup-main-menu {
		justify-content: space-between !important;
		column-gap: 40px;
		max-width: 820px;
		margin-left: auto;
	}
	.wp-block-navigation__responsive-container:not(.is-menu-open) ul.wp-block-navigation__container.archigroup-main-menu > .wp-block-navigation-item {
		flex: 0 1 auto !important;
	}
	/* marques + réseaux sociaux : uniquement dans l'overlay mobile ouvert */
	html:not(.has-modal-open) .archigroup-overlay-brands,
	html:not(.has-modal-open) .archigroup-overlay-socials {
		display: none !important;
	}
}

/* ========================================================================== */
/* Overlay plein écran mobile (même bloc de navigation, état ouvert)          */
/* ========================================================================== */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open {
	overflow-y: auto;
	/* INDISPENSABLE : par la spec, des qu'UN axe passe a une valeur non-visible,
	   l'autre reste-`visible` est FORCE a `auto`. `overflow-y:auto` seul rendait
	   donc l'overlay scrollable en X, et le filigrane « menu » (::before, 40vw,
	   decoratif) deborde de 25px a 390 -> on faisait glisser tout le menu au
	   doigt. Le menu est vertical : aucun scroll horizontal n'a de sens ici. */
	overflow-x: hidden;
}

/* Watermark « menu » en filigrane, derrière le haut de la liste */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "menu";
	position: absolute;
	left: 50%;
	top: 125px;
	transform: translateX(-50%);
	font-family: "capitana", sans-serif;
	font-weight: 900;
	font-size: 40vw;
	line-height: 1;
	color: rgba(255, 255, 255, 0.07);
	pointer-events: none;
	white-space: nowrap;
	z-index: 0;
}

/* Contenu de l'overlay : aligné en haut à gauche, sous le watermark */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding-top: 28px;
}
/* Logo du site « à la suite » : dans le flux, en haut à gauche, au-dessus du menu.
   --ag-overlay-logo est posée par js/menu-scroll-lock.js depuis le logo REEL du
   header (wp:site-logo), donc propre à CHAQUE site du réseau. Avant, l'URL était
   codée en dur sur ArchiGroup_Blanc_RVB-1.svg et le thème étant partagé, les 5
   sous-sites affichaient le logo du GROUPE dans leur menu mobile. Le logo
   archigroup reste en fallback : si un site n'a pas de logo, rien ne casse.
   background-size:contain -> s'adapte au ratio (badge archigroup 0.83 portrait,
   ingegroup carré 1.00...). */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 76px;
	height: 92px;
	margin-bottom: 40px;
	background: var(--ag-overlay-logo, url("/wp-content/uploads/2026/07/ArchiGroup_Blanc_RVB-1.svg")) no-repeat left top;
	background-size: contain;
}
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	position: relative;
	z-index: 1;
	align-items: flex-start;
}

/* Libellés alignés à gauche (puce + mot collés, au bord gauche) */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	justify-content: flex-start !important;
	text-align: left;
}

/* Rubriques de niveau 1 : puce pleine plus grande, texte gras */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item {
	margin-bottom: 22px;
}
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 700;
	font-size: 24px;
}
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--accent-1) !important;
}

/* Sous-rubriques : une seule colonne verticale, texte normal, puce creuse */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	/* Sous-menus masqués sur mobile pour l'instant : on ne garde que les 4
	   rubriques principales (les parents restent des liens vers leur page).
	   Repasser en `display: flex` (+ les lignes ci-dessous) pour les réafficher. */
	display: none !important;
	flex-direction: column !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	margin-top: 10px;
	margin-bottom: 4px;
	padding-left: 18px;
	background: transparent !important;
	border: 0 !important;
}
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li.wp-block-navigation-item {
	margin-bottom: 12px;
}
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li.wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 400;
	font-size: 19px;
}
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li.wp-block-navigation-item > .wp-block-navigation-item__content::before {
	width: 12px;
	height: 12px;
	border-color: var(--wp--preset--color--accent-1) !important;
}

/* Les LI avec sous-menu (has-child) : forcer une seule colonne verticale
   (sinon le flex wrap renvoie le sous-menu dans une 2e colonne à droite). */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	flex-wrap: nowrap !important;
	height: auto !important;
	align-items: flex-start !important;
}

/* (Logo désormais injecté dans le flux de l'overlay via ::before — voir plus haut) */

/* ------- Logos de marques + réseaux sociaux (bas de l'overlay) ------- */
.archigroup-overlay-brands,
.archigroup-overlay-socials {
	display: none;
}
/* Marques + réseaux : déplacés par JS (menu-scroll-lock.js) DANS le flux de
   l'overlay, APRÈS le menu (avant : position:fixed qui passait par-dessus les
   entrées sur un menu haut qui défile). */
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .archigroup-overlay-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 48px;
}
.archigroup-main-menu .wp-block-navigation__responsive-container.is-menu-open .archigroup-overlay-socials {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	margin-bottom: 24px;
}
/* tuile blanche avec le logo bleu de la marque (cf. maquette) */
.overlay-brand-logo {
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 6px;
	width: 88px;
	height: 44px;
}
.overlay-brand-logo img {
	max-width: 100%;
	max-height: 100%;
}
.overlay-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--contrast);
}
.overlay-social-link svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Pas de cadre (outline de focus) sur le conteneur non-interactif du menu.
   Un clic sur le fond du div focusait le conteneur (tabindex=-1) et le thème
   twentytwentyfive (:where(.wp-site-blocks :focus)) y dessinait un contour. */
.archigroup-main-menu:focus,
.archigroup-main-menu:focus-visible,
.archigroup-main-menu .wp-block-navigation__responsive-container:focus,
.archigroup-main-menu .wp-block-navigation__responsive-container:focus-visible,
.archigroup-main-menu .wp-block-navigation__responsive-container-content:focus,
.archigroup-main-menu .wp-block-navigation__responsive-container-content:focus-visible {
	outline: none !important;
}


/* ========================================================================== */
/* Cartes projets : marque a la place des missions                            */
/* On masque les chips « missions » et on affiche la marque (Architecture /   */
/* Rearchitecture) a leur emplacement (bas-gauche, horizontale) au lieu du    */
/* label vertical en haut a droite.                                           */
/* ========================================================================== */
.agpn-card__missions {
	display: none !important;
}
.agpn-card__brand {
	position: absolute;
	top: auto !important;
	right: auto !important;
	left: 1.5rem;
	bottom: 1.25rem;
	writing-mode: horizontal-tb !important;
	transform: none !important;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}


/* ====== Filtre projets : « Tous les projets » (reset) ====== */
/* Etat actif (tout affiche) : le titre passe en blanc plein, comme au survol. */
.wp-block-tiptip-hyperlink-group-block.tous.is-active .titre-border {
	color: #ffffff !important;
	-webkit-text-stroke-color: transparent !important;
}
.wp-block-tiptip-hyperlink-group-block.tous.is-active .titre-border::before {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
}


/* Cartes projets : chips « secteurs » masques par defaut sur la carte.
   (Le filtre lit quand meme leur textContent pour construire les boutons
   secteurs — display:none n'empeche pas la lecture du texte.) */
.agpn-card__sector {
	display: none !important;
}


/* ========================================================================== */
/* Remplissage graphique au survol des boutons (CTA a contour)                */
/* Le fond navy (contrast) balaie le bouton de gauche a droite (vers la        */
/* fleche/plus) ; le texte passe en blanc. Remplace le swap instantane.        */
/* ========================================================================== */
.btn-fleche .wp-block-button__link,
.btn-plus .wp-block-button__link {
	background-image: linear-gradient(var(--wp--preset--color--contrast), var(--wp--preset--color--contrast));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size 0.45s cubic-bezier(0.65, 0, 0.35, 1), color 0.25s ease;
}
.btn-fleche .wp-block-button__link:hover,
.btn-plus .wp-block-button__link:hover {
	background-color: transparent !important;
	background-size: 100% 100% !important;
	color: var(--wp--preset--color--base) !important;
}


/* Case icone (fleche/plus) au survol : la case se remplit en orange, l'icone
   passe en blanc et bouge legerement (fleche -> glisse a droite ; plus -> pivote). */
.btn-fleche .wp-block-button__link::after,
.btn-plus .wp-block-button__link::after {
	transition: background-color 0.35s ease,
	            background-position 0.4s cubic-bezier(0.65, 0, 0.35, 1),
	            transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-fleche .wp-block-button__link:hover::after {
	background-color: var(--wp--preset--color--accent-1);
	background-image: url('/wp-content/uploads/2026/06/btn-fleche-blanc.svg');
	background-position: calc(50% + 7px) center;
}
.btn-plus .wp-block-button__link:hover::after {
	background-color: var(--wp--preset--color--accent-1);
	background-image: url('/wp-content/uploads/2026/06/btn-plus-blanc.svg');
	transform: rotate(90deg);
}


/* Correctif btn-plus : ne faire tourner QUE le +, pas le carre orange.
   Le remplissage orange passe sur ::before (statique) ; ::after ne porte que
   l'icone (fond transparent) -> sa rotation ne fait tourner que le +. */
.btn-plus .wp-block-button__link {
	position: relative;
}
.btn-plus .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	width: 50px;
	height: 100%;
	background: transparent;
	transition: background-color 0.35s ease;
	z-index: 0;
	pointer-events: none;
	font-size: 0 !important;
}
.btn-plus .wp-block-button__link:hover::before {
	background-color: var(--wp--preset--color--accent-1);
}
.btn-plus .wp-block-button__link::after {
	position: relative;
	z-index: 1;
}
.btn-plus .wp-block-button__link:hover::after {
	background-color: transparent !important;
	background-image: url('/wp-content/uploads/2026/06/btn-plus-blanc.svg') !important;
	border-left-color: transparent !important;
	transform: rotate(90deg);
}

/* ------------------------------------------------------------------ */
/* logo-adapt-breadcrumb (13/07/2026)                                 */
/* Petits écrans HORS mobile (>600px) : sur les pages projet, le       */
/* breadcrumb (.wp-block-breadcrumbs en position:absolute) remonte     */
/* quand l'écran rétrécit et passait SOUS le logo (160px). On rétrécit */
/* donc le logo de façon fluide pour qu'il reste au-dessus du          */
/* breadcrumb (~12px de marge de 601px à ~1180px, puis 160px pleins).  */
/* Mobile (≤600) déjà géré (breadcrumb repoussé par margin-top).       */
/* L'état "scrolled" (80px) garde priorité via :not(.scrolled).        */
/* ------------------------------------------------------------------ */
@media (min-width: 601px) {
  body.single-projet header:not(.scrolled) .custom-logo-link img {
    width: clamp(60px, calc(17vw - 40px), 160px);
  }
}

/* ------------------------------------------------------------------ */
/* menu-roll-hover (13/07/2026)                                       */
/* Survol léger à l'opacité : au survol du menu, les entrées NON       */
/* survolées s'estompent doucement, celle survolée reste pleine.       */
/* Opacité seule, transition douce. Restreint aux appareils qui savent */
/* survoler (pas de hover collant sur tactile). N'altère pas l'état    */
/* par défaut (menu plein au repos).                                   */
/* ------------------------------------------------------------------ */
@media (hover: hover) {
  .archigroup-main-menu .wp-block-navigation-item__content {
    transition: opacity 0.35s ease;
  }
  .archigroup-main-menu:hover .wp-block-navigation-item__content {
    opacity: 0.55;
  }
  .archigroup-main-menu .wp-block-navigation-item__content:hover {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ */
/* logos-marques-2col (13/07/2026)                                    */
/* Bloc infos projet : les logos de marques passent sur 2 colonnes    */
/* (donc à la ligne dès qu'il y en a plus de 2). Override du plugin    */
/* qui les met en flex nowrap sur une seule ligne.                    */
/* ------------------------------------------------------------------ */
.agpn-logos-marques.wp-block-archigroup-logos-marques-projet {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px;
  align-items: center;
  justify-content: start;
}

/* ------------------------------------------------------------------ */
/* projets-current-bullet (13/07/2026)                                */
/* Sur les pages projet (single-projet), WP ne marque PAS l'entrée     */
/* « Projets » du menu comme courante (c'est un CPT single). On force   */
/* donc sa puce carrée en orange (accent-1), comme un current-menu,    */
/* pour signaler la section active. Cible l'entrée dont le lien pointe */
/* vers /projet/ (barre desktop ET overlay mobile).                    */
/* ------------------------------------------------------------------ */
body.single-projet .archigroup-main-menu .wp-block-navigation-item__content[href$="/projet/"]::before,
body.single-projet .archigroup-main-menu .wp-block-navigation-item__content[href$="/projet"]::before {
  background: var(--wp--preset--color--accent-1) !important;
  border-color: var(--wp--preset--color--accent-1) !important;
}

/* ------------------------------------------------------------------ */
/* btn-plus-barre-fixe (13/07/2026)                                   */
/* La barre verticale séparatrice était le `border-left` du ::after,   */
/* or ::after pivote de 90° au survol → la barre tournait avec le +    */
/* (visible surtout au roll-OUT où elle redevient orange en pivotant). */
/* Fix : on retire la barre de la couche qui pivote (::after) et on la  */
/* porte par la couche FIXE (::before). Seul le + tourne désormais.     */
/* ------------------------------------------------------------------ */
.btn-plus .wp-block-button__link::after {
  border-left-color: transparent !important;   /* plus de barre sur la couche qui pivote (repos ET survol) */
}
.btn-plus .wp-block-button__link::before {
  border-left: 1px solid #d97724;              /* séparateur porté par la couche fixe */
  box-sizing: border-box;
}
.btn-plus .wp-block-button__link:hover::before {
  border-left-color: transparent;              /* case remplie orange au survol → séparateur fondu */
}

/* ------------------------------------------------------------------ */
/* footer-roll-hover (13/07/2026)                                     */
/* Roll-hover léger sur les liens du footer : au survol d'un lien il   */
/* s'estompe doucement (opacité). Partagé par tout le multisite        */
/* (site principal + sous-sites marques). Restreint aux appareils à    */
/* survol (pas de hover collant sur tactile).                          */
/* ------------------------------------------------------------------ */
@media (hover: hover) {
  footer.wp-block-template-part a {
    transition: opacity 0.3s ease;
  }
  footer.wp-block-template-part a:hover {
    opacity: 0.55;
  }
}

/* ------------------------------------------------------------------ */
/* header-pad-curseur-carre (13/07/2026) — thème partagé (tous sites)  */
/* 1) Un peu plus de padding-top sur le header (état non scrollé).     */
/*    Scopé HORS pages projet : là le header doit rester serré pour ne */
/*    pas remordre sur le breadcrumb (cf. logo-adapt-breadcrumb).      */
/* 2) Curseur custom .flair → petit carré (au lieu de la forme SVG).   */
/* ------------------------------------------------------------------ */
body:not(.single-projet) header:not(.scrolled) .mainMenu {
  padding-top: 16px !important;
}

:not(.wp-admin) .flair {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: #ffd07b;   /* même couleur qu'avant ; mix-blend-mode difference conservé */
}
:not(.wp-admin) .flair svg { display: none; }

/* curseur-carre-css (13/07/2026) : la « flair » custom du thème est inerte      */
/* (aucun élément .flair dans le DOM) → on remplace la flèche native par un       */
/* petit carré orange via cursor CSS. Base = carré ; les liens gardent le         */
/* pointeur (main), les champs texte le curseur texte (règles existantes).        */
html, body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect x='2' y='2' width='10' height='10' fill='%23e9630b'/%3E%3C/svg%3E") 7 7, auto;
}

/* breadcrumb-roll-hover (13/07/2026) : roll-hover fondu sur les liens du         */
/* breadcrumb (comme menu/footer). Restreint aux appareils à survol. Partagé.     */
@media (hover: hover) {
  .wp-block-breadcrumbs a { transition: opacity 0.3s ease; }
  .wp-block-breadcrumbs a:hover { opacity: 0.55; }
}

/* proj-cursor-voir-projet (13/07/2026) : curseur custom au survol des cartes    */
/* projet. Cercle transparent, filet blanc, texte. Suivi + affichage gérés par   */
/* js/proj-cursor.js. Partagé (tous les sites).                                   */
.proj-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 78px; height: 78px;
  border-radius: 0;
  border: 1px solid #fff;
  background: transparent;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 9999998;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.proj-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.proj-cursor__label { font-size: 13px; line-height: 1.15; padding: 0 2px; }
/* sur les cartes projet, on masque le curseur carré natif (le custom prend le relais) */
@media (hover: hover) {
  .agpn-card, .agpn-card *, .banner-home, .banner-home * { cursor: none !important; }
}

/* cursor-filet-interactifs (13/07/2026) : le filet orange (carré contour) doit   */
/* aussi remplacer la main (pointer) sur les liens/boutons — « le reste des        */
/* autres éléments ». Les cartes projet gardent « voir le projet » (plus           */
/* spécifiques : .agpn-card{cursor:none}), les champs texte gardent le curseur     */
/* texte. Même SVG que le curseur de base.                                          */
a, button, [role="button"], .wp-block-button__link, input[type="submit"],
input[type="button"], input[type="reset"], select, summary, label[for] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect x='2.5' y='2.5' width='9' height='9' fill='none' stroke='%23e9630b' stroke-width='1.5'/%3E%3C/svg%3E") 7 7, auto !important;
}

/* cursor-texte-champs (13/07/2026) : garder le curseur TEXTE dans les champs de   */
/* saisie (le filet orange / hérité ne doit pas s'y appliquer).                    */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
input[type="url"], input[type="number"], input[type="password"], input[type="date"],
input:not([type]), textarea, [contenteditable="true"] {
  cursor: text !important;
}

/* ------------------------------------------------------------------ */
/* focus-desktop-fix (13/07/2026)                                     */
/* Le retrait global du cadre de focus (:where(.wp-site-blocks *:focus)*/
/* {outline-width:0}) était par erreur DANS une media-query mobile →   */
/* sur desktop le cadre du thème parent (outline 2px, offset 4px)      */
/* réapparaissait, et Safari le dessine au clic souris (il déclenche    */
/* :focus-visible au clic, contrairement à Chrome) — visible surtout    */
/* sur les entrées à sous-menu (bouton). On le retire aussi desktop,    */
/* partout. + box-shadow retiré sur le menu par sécurité.               */
/* ------------------------------------------------------------------ */
:where(.wp-site-blocks *:focus),
:where(.wp-site-blocks *:focus-visible) {
  outline: none !important;
}
.archigroup-main-menu :focus,
.archigroup-main-menu :focus-visible,
.archigroup-main-menu button:focus,
.archigroup-main-menu button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* stickybar-logos-larges (13/07/2026) : les logos de marques aussi larges que    */
/* les boutons oranges (cellules 50px). Le plugin cape à max-width:44/max-h:40 →   */
/* on élargit (override thème). max-w/h à ~48px pour remplir la cellule comme les   */
/* boutons, en gardant l'aspect (les badges sont ~carrés).                          */
.agpn-stickybar .agpn-stickybar__logo img {
  max-width: 50px !important;
  max-height: 50px !important;
}

/* footer-hover-exclude-images (13/07/2026) : le roll-hover du footer (fondu       */
/* opacité) est pour les liens TEXTE. On l'exclut du bouton back-to-top (bloc      */
/* tiptip = case blanche) et des liens-image/figure, sinon la case devient         */
/* translucide au survol (rendu bizarre, surtout Safari).                          */
footer.wp-block-template-part a.wp-block-tiptip-hyperlink-group-block:hover {
  opacity: 1 !important;
}

/* backtotop-hover-anim (13/07/2026) : légère animation au survol du bouton        */
/* back-to-top — le picto (flèche) monte doucement (cohérent « haut de page »).    */
/* Remplace le fondu opacité du footer (retiré car bizarre sur ce bouton blanc).   */
footer.wp-block-template-part a.wp-block-tiptip-hyperlink-group-block img {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  footer.wp-block-template-part a.wp-block-tiptip-hyperlink-group-block:hover img {
    transform: translateY(-5px);
  }
}

/* postcard-btn-plus-fix (13/07/2026) : le bouton "En savoir plus" des cartes     */
/* article (post template, <span> dans un bloc tiptip) était stylé navy plein +   */
/* bordure 5px bleue + texte blanc. On le remet comme les autres btn-plus :        */
/* fond transparent, bordure 1px orange, texte orange (le survol .btn-plus reste). */
.wp-block-post .wp-block-button.btn-plus .wp-block-button__link {
  background-color: transparent !important;
  border: 1px solid var(--wp--preset--color--accent-1) !important;
  color: var(--wp--preset--color--accent-1) !important;
}

/* ------------------------------------------------------------------ */
/* bannieres-parallax-fix (15/07/2026)                                */
/* La parallaxe native (background-attachment:fixed) ne rend PAS de    */
/* façon fiable sous ScrollSmoother (ancêtre transformé) : certaines   */
/* bannières /expertises/ affichaient l'overlay bleu SANS l'image.     */
/* On repasse en scroll → l'image de fond est rendue normalement.      */
/* ------------------------------------------------------------------ */
.wp-block-cover.has-parallax .wp-block-cover__image-background,
.wp-block-cover.has-parallax {
  background-attachment: scroll !important;
}



/* ------------------------------------------------------------------ */
/* fermeture-menu-croix (16/07/2026)                                   */
/* Le bouton FERMER de l'overlay portait EXACTEMENT la meme grille 2x2 */
/* que le burger d'ouverture (regle partagee `...-open::before,        */
/* .archigroup-overlay-close::before`). Rien ne signalait donc qu'il   */
/* refermait : le client ne le trouvait pas (« il faut qu'on puisse    */
/* refermer le menu »). Ironie : WordPress rend nativement une CROIX,  */
/* que le theme masquait (`... svg { display:none }`) pour dessiner la */
/* grille. On la redessine ici, en CSS, sur le SEUL bouton de          */
/* fermeture -> le burger d'ouverture garde sa grille (identite).      */
/* Specificite (0,1,1) = celle de la regle partagee -> c'est l'ordre   */
/* source (ce bloc est en fin de fichier) qui la fait gagner.          */
/* ------------------------------------------------------------------ */
.archigroup-overlay-close::before,
.archigroup-overlay-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2.5px;
  background: currentColor;
  box-shadow: none; /* annule les 3 carres de la grille */
}
.archigroup-overlay-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.archigroup-overlay-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ------------------------------------------------------------------ */
/* rse-chiffre-mobile (16/07/2026)                                     */
/* Sur mobile un TAP declenche :hover -> le chiffre du pilier passait a */
/* 15rem (240px FIXES) alors qu'au repos il fait ~152px en taille       */
/* fluide. Mesure a 390x844 : sa hauteur atteint 270px, le contenu 300, */
/* et la description est COUPEE par le bas du cover (422px) : pilier 2  */
/* ampute de 50px, pilier 3 de 24px. On garde l'effet mais modere, et   */
/* en vw pour qu'il suive la largeur d'ecran comme la taille de repos.  */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .piliers .wp-block-cover:hover h4 {
    font-size: 44vw !important;
  }
}

/* ------------------------------------------------------------------ */
/* hero-minisites-mobile (16/07/2026)                                  */
/* Le hero des 5 sous-sites n'est PAS le meme bloc que celui du site    */
/* principal : ici un Cover core `.wp-block-cover.alignfull` avec un    */
/* min-height:942px INLINE (px FIXES, regles dans l'editeur), la ou le  */
/* principal utilise le bloc plugin `.banner-home` en 80vh.            */
/* 942px sur un ecran de 844 = 112% de la hauteur -> pire encore que    */
/* les 100vh qu'on a retires du principal ce matin. On l'aligne donc    */
/* sur le principal (80vh) mais UNIQUEMENT sur mobile : en desktop les  */
/* 942px de l'editeur restent la reference.                            */
/* Portee verifiee : `.wp-block-cover.alignfull` n'existe qu'UNE fois   */
/* par home de sous-site (= le hero) et ZERO fois sur le principal      */
/* (home et pages internes) -> aucun effet de bord. `body.home` borne   */
/* en plus aux pages d'accueil.                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  body.home .wp-block-cover.alignfull {
    min-height: 80vh !important;
  }
}

/* ------------------------------------------------------------------ */
/* photo-notre-histoire-mobile (16/07/2026)                            */
/* « qui-sommes-nous > notre histoire » : la photo d'equipe etait       */
/* coupee a 61% sur mobile.                                            */
/*                                                                     */
/* CAUSE : ce cover n'a AUCUN min-height dans l'editeur -> il herite du */
/* DEFAUT de WordPress core (`.wp-block-cover{min-height:430px}`), une  */
/* valeur FIXE. Le bloc est en `is-not-stacked-on-mobile` (volontaire : */
/* la colonne de gauche `.ligne.bleu` porte le trait vertical de la     */
/* frise, un filet de 1px cale sur son bord droit — 3 blocs `.ligne`    */
/* s'alignent dessus, donc INTERDIT d'elargir/retrecir les colonnes).   */
/* Resultat : desktop 800x430 = ratio 1,86 > ratio image 1,39 -> l'image*/
/* remplit la LARGEUR, rognee en bandeau haut/bas = le parti pris. Mais */
/* mobile 233x430 = ratio 0,54 -> fente verticale -> l'image remplit la */
/* HAUTEUR et 61% de sa largeur saute : les personnes des bords sont    */
/* coupees en deux.                                                     */
/*                                                                     */
/* FIX : la hauteur suit la LARGEUR au lieu d'etre figee. aspect-ratio  */
/* = celui de l'image (1505x1080) -> recadrage NUL, toute l'equipe est  */
/* visible (233x167 a 390px). Le trait et la frise ne bougent pas.      */
/* Borne a 899.98 et non 600 : le recadrage commence des que la colonne */
/* passe sous ~598px, soit un viewport de ~900px (a 800px on perdait    */
/* deja 17%). La transition est continue : a 899px la boite fait 402px, */
/* soit quasi les 430 du desktop.                                       */
/* NB aspect-ratio calque sur CETTE photo : si le client la remplace    */
/* par un autre format, ajuster la valeur ici.                          */
/* Portee verifiee : ce selecteur ne matche QU'UN element sur la page.  */
/* L'autre cover en `.ligne.bleu + .wp-block-column` s'empile (pas de   */
/* `is-not-stacked-on-mobile`), prend 390px de large et va tres bien.   */
/* ------------------------------------------------------------------ */
@media (max-width: 899.98px) {
  .wp-block-columns.is-not-stacked-on-mobile .ligne.bleu + .wp-block-column > .wp-block-cover {
    min-height: 0;
    aspect-ratio: 1505 / 1080;
  }
}


/* -------------------------------------------------------------------------- */
/* Recettage 21/07/2026 (recettage-20260721)                                        */
/* -------------------------------------------------------------------------- */

/* Fleches des « tableaux » des mini-sites (lignes missions/prestations).
   La colonne porte deja is-vertically-aligned-center, qui centre la COLONNE ;
   mais l'<img> est un element inline, donc pose sur la ligne de base : il
   restait ~5px sous le centre de la ligne (l'espace des jambages). Le passer en
   block supprime cette ligne de base ; margin auto conserve le centrage
   horizontal apporte par .aligncenter. Mesure : ecart 5,3px -> 0px.
   Portee verifiee : 30 fleches touchees, 0 autre image. */
.wp-block-column.is-vertically-aligned-center > .wp-block-image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Paragraphes de contenu justifies (demande client).
   Exclusions en :where() -> specificite ZERO ajoutee : la cascade reste
   identique partout ailleurs (cf. gotcha specificite du 16/07, ou un
   :not(.a):not(.b) avait fait deraper des arbitrages a distance).
   Sont exclus : header/footer, stickybar, cartes projet, menus, et tout
   paragraphe dont l'alignement est deja choisi dans l'editeur (sans quoi
   cette regle, plus specifique, ecraserait le centre/droite voulu). */
p.wp-block-paragraph:not(:where(
  .wp-block-template-part p,
  .agpn-stickybar p,
  .agpn-card p,
  .wp-block-navigation p,
  .has-text-align-center,
  .has-text-align-right,
  .has-text-align-left
)) {
  text-align: justify;
}


/* Blocs « texte justifié à droite » : réserver la barre latérale de logos
   (padding-bloc-justifie-droite-20260721).
   Ces blocs poussent leur texte contre le bord droit, où la barre de logos est
   fixée (70px + 10px de marge, visible seulement à partir de 1024px) : le texte
   passait dessous. On ne réserve QUE sur ce motif, pas sur tout le site.
   Le padding est posé sur le .wp-block-columns interne et non sur le groupe :
   le groupe a bien un padding-right, mais cet enfant est .alignfull et le
   neutralise par une marge négative — un padding sur le groupe serait sans
   effet. Le fond du bloc n'est pas concerné (padding intérieur). */
@media (min-width: 1024px) {
  .wp-block-group.alignfull.is-content-justification-right > .wp-block-columns {
    padding-right: 90px;
    box-sizing: border-box;
  }
}


/* -------------------------------------------------------------------------- */
/* Correctifs mobile (correctifs-mobile-20260721)                             */
/* -------------------------------------------------------------------------- */

/* 1. Titres géants d'arrière-plan tronqués en haut.
   .titre-banner est en position:absolute top:0 avec scale:1.2 et
   transform-origin:bottom : l'agrandissement déborde donc vers le HAUT, hors du
   parent .parent-titre-banner qui est en overflow:hidden. S'y ajoute le
   line-height:0.9, sous lequel la première ligne dépasse sa propre boîte.
   Mesuré sur l'accueil à 375px : « manifeste » n'affichait que « nife » en
   entier (première ligne coupée à moitié), « archigroup » à peine plus.
   Un décalage de 1em suit automatiquement la taille de police, qui est en
   clamp()/vw — une valeur en px ne tiendrait qu'à une seule largeur d'écran.
   Exclusions en :where() pour ne pas alourdir la spécificité (.petit et .page
   ont un positionnement propre, à ne pas toucher). */
@media (max-width: 768px) {
  .titre-banner:not(:where(.petit, .page)) {
    top: 1em;
  }
}

/* 2. Blocs « missions » : la flèche passait AU-DESSUS du texte.
   Sous 782px, WordPress empile les colonnes en forçant flex-basis:100% avec un
   !important : la colonne de la flèche se retrouvait donc au-dessus de celle du
   texte au lieu d'être devant. On ne vise que les rangées « flèche + texte »
   via :has(), et on garde le !important pour battre la règle de WordPress.
   Portée vérifiée site par site : exactement autant de rangées que de flèches
   (15 sur dedale, 30 sur inspire), toutes à 2 colonnes. */
@media (max-width: 781px) {
  /* une seule ligne : le gap de 20px suffisait a faire repasser la 2e colonne
     a la ligne meme avec des flex-basis qui tiennent (15% + 85% + gap > 100%) */
  .wp-block-columns:has(> .wp-block-column > .wp-block-image img[src*="fleche"]) {
    flex-wrap: nowrap !important;
  }

  .wp-block-columns:has(> .wp-block-column > .wp-block-image img[src*="fleche"])
    > .wp-block-column:first-child {
    flex-basis: 15% !important;
  }
  .wp-block-columns:has(> .wp-block-column > .wp-block-image img[src*="fleche"])
    > .wp-block-column:last-child {
    flex-basis: 85% !important;
  }
}


/* -------------------------------------------------------------------------- */
/* Ouverture du site — anti-flash blanc (ouverture-site-20260721)             */
/* -------------------------------------------------------------------------- */

/* 1. Le document est bleu, pas blanc.
   La couleur de fond du thème (--base) est #FFFFFF sur les 6 sites : à
   l'arrivée, le navigateur peint donc du blanc avant que le contenu s'affiche.
   On colore le document lui-même pour que ce premier aplat soit déjà bleu.
   Effet de bord assumé et plutôt souhaitable : le rebond de scroll (iOS) et les
   zones hors contenu passent au bleu de la marque au lieu du blanc. */
html {
  background-color: var(--wp--preset--color--contrast, #1a466b);
}

/* 2. Rideau d'ouverture plein écran.
   Couvre toute la fenêtre au chargement puis remonte, dévoilant la page du bas
   vers le haut. Il masque donc la fin du chargement, flash blanc compris.

   Posé sur body::before (les deux pseudo-éléments étaient libres) : ni <html>
   ni <body> ne portent de transform/filter, donc le position:fixed s'ancre bien
   à la fenêtre.

   z-index au-dessus du panneau de transition inter-pages (10000001), lui-même
   au-dessus de l'en-tête (9999999) : à l'arrivée, le rideau doit tout couvrir.

   ⚠️ Même règle que pour le rideau de la bannière : l'état de repos est
   « déjà remonté », et l'animation ne fait que le redescendre le temps de jouer
   (`backwards`). Écrit dans l'autre sens, une animation qui ne démarrerait
   jamais laisserait un aplat bleu opaque sur tout le site.

   Ne rejoue pas lors des navigations AJAX : le <body> n'est pas remplacé, et
   ces transitions ont déjà leur propre panneau (.ag-cover). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000002;
  background: var(--wp--preset--color--contrast, #1a466b);
  transform: translateY(-100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: agpn-ouverture-site 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s backwards;
  }
}

/* Navigation interne : pas de rideau.
   Les pages hors AJAX rechargent réellement ; sans cela le rideau rejouait
   juste après le panneau de transition. L'état de repos étant « remonté », il
   suffit de couper l'animation pour qu'il ne se voie jamais. */
html.ag-nav-interne body::before {
  animation: none;
}

@keyframes agpn-ouverture-site {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}


/* -------------------------------------------------------------------------- */
/* Accordéons — chevron animé (accordeons-chevron-20260721)                   */
/* -------------------------------------------------------------------------- */
/* Le marqueur natif du <summary> bascule instantanément entre ▶ et ▼ et ne
   peut pas être animé : ::marker n'accepte ni transform ni transition. On le
   masque au profit d'un chevron dessiné en pseudo-élément, qui lui pivote.
   La rotation est un transform : composée, sans recalcul de mise en page. */
details.wp-block-details > summary {
  list-style: none; /* retire le triangle natif (Firefox, Chrome récents) */
  display: flex;
  align-items: center;
  gap: 0.75em;
  /* Pivoté à 45°, le chevron occupe sa diagonale et déborde de sa boîte : sans
     ce retrait il mordait la bordure du cadre, que le bloc colle à 0.
     Un cran d'espacement du thème (10px) l'aligne au passage sur les flèches
     du contenu, et le titre sur le texte de ces mêmes lignes. */
  padding-left: var(--wp--preset--spacing--20, 10px);
}

/* Safari et anciens Chrome passent par ce pseudo-élément spécifique. */
details.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

details.wp-block-details > summary::before {
  content: "";
  flex: 0 0 auto; /* le chevron ne se comprime pas si le titre est long */
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); /* fermé : la pointe regarde à droite */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details.wp-block-details[open] > summary::before {
  transform: rotate(45deg); /* ouvert : la pointe bascule vers le bas */
}

@media (prefers-reduced-motion: reduce) {
  details.wp-block-details > summary::before {
    transition: none;
  }
}


/* ========================================================================== */
/* Recettage 23/07/2026 — surtitre « RÉARCHITECTURE » sur la page projet.     */
/* Le <span> est injecté devant le bloc core/post-title par le plugin          */
/* (inc/projet-data-engine.php) UNIQUEMENT pour un projet tagué               */
/* « rearchitecture » — même clé que le label des vignettes.                  */
/* ========================================================================== */
.single-projet .agpn-projet-surtitre {
	display: block;
	font-family: var( --wp--preset--font-family--capitana, "capitana", sans-serif );
	font-weight: 900;
	font-size: 0.85rem;          /* « pas trop gros » : même corps que le label vignette */
	letter-spacing: 0.03em;      /* idem vignette */
	text-transform: uppercase;   /* « en majuscule » */
	line-height: 1;
	color: var( --wp--preset--color--accent-1, #e9630b );
	margin: 0 0 0.4rem;
}

/* Coller le surtitre au titre : sans cela le h1, devenu :not(:first-child),
   récupère le block-gap de flux du groupe et décroche du surtitre. */
.single-projet .agpn-projet-titre-wrap .wp-block-post-title {
	margin-block-start: 0;
}

/* marques-noorphan (26/07/2026) : jamais une marque seule en 2e ligne.
   La rangée « 5 marques intégrées » = 6 éléments de 170px (tuile + 5 logos),
   gap 1.2rem. Les 6 tiennent sur une ligne dès ~1116px de large ; entre ~927 et
   1115px la rangée passe à 5/ligne → 1 logo orphelin en 2e ligne. On plafonne
   alors la largeur pour forcer 4 par ligne (4+2), sans changer la taille des logos.
   Au-delà (desktop large) : 6 sur une ligne, inchangé. */
@media (max-width: 1240px) {
  .marques-integrees-row { max-width: 900px; }
}

/* back-to-top (26/07/2026) : même taille que les cellules de la stickybar (50px)
   et aligné sur sa colonne. La stickybar = cellules 50×50 à right:10px + padding
   10px → axe vertical à right:45px, donc bord droit du bouton à 20px du viewport.
   La stickybar n_apparaît qu_à partir de 1024px → on n_aligne qu_au-dessus. */
footer.wp-block-template-part .wp-block-tiptip-hyperlink-group-block:has(img[src*="picto-bact-top"]) {
  width: 50px;
  height: 50px;
  min-width: 0;
  box-sizing: border-box;
}
footer.wp-block-template-part .wp-block-tiptip-hyperlink-group-block:has(img[src*="picto-bact-top"]) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 1024px) {
  footer.wp-block-template-part .wp-block-tiptip-hyperlink-group-block:has(img[src*="picto-bact-top"]) {
    position: relative;
    right: calc(20px - max(var(--wp--style--root--padding-right, 50px), 50vw - 600px));
  }
}

/* rollover logos « nos marques » (26/07/2026) : léger zoom au survol, easing du
   site. Ciblé sur l_<img> (les <figure> portent gs_reveal → transform inline GSAP,
   qu_on ne veut pas écraser) et seulement les logos-<figure> (pas la tuile
   « 5 marques » qui a déjà son hover de fond). */
.marques-integrees-row figure a img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.marques-integrees-row figure a:hover img {
  transform: scale(1.08);
}

/* back-to-top hover amélioré (26/07/2026) : lift avec léger rebond (easing spring)
   + zoom, cohérent avec l_idée « remonter ». Remplace l_ancien translateY(-5px). */
footer.wp-block-template-part .wp-block-tiptip-hyperlink-group-block:has(img[src*="picto-bact-top"]) img {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
footer.wp-block-template-part .wp-block-tiptip-hyperlink-group-block:has(img[src*="picto-bact-top"]):hover img {
  transform: translateY(-6px) scale(1.1);
}