/*
Theme Name: Ocube
Author: HARVEST
Description: Theme enfant de Twenty Twenty-Five : menu plein ecran mobile + transition de page GSAP. Base legere et neutre (sans WooCommerce / Gravity Forms / plugin projets-marques).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: ocube
Template: twentytwentyfive
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready
*/

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

/* Police « Host Grotesk » auto-hébergée : voir settings.typography.fontFamilies
   dans theme.json (fontFace → fonts/Host_Grotesk/*.woff2). Pas de dépendance externe. */

/* 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;
  /* Filet CSS ultime : si le JS ne s'exécute pas du tout (erreur, script bloqué),
     le contenu se révèle quand même après un court délai → jamais de page blanche
     permanente. Le JS (app.js) révèle bien plus tôt via gsap.set(autoAlpha:1). */
  animation: sc-safe-reveal 0.01s linear 2s forwards;
}
@keyframes sc-safe-reveal { to { visibility: visible; } }

.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 */
}

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);
}
@media (max-width: 599px) {
  header .wp-block-site-logo {
    RIGHT: 80%;
    position: relative;
  }
}
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 100 / 100 !important;
  width: 100px;
  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;
}
/* ⚠️ NE PAS REMETTRE DE `backdrop-filter` ICI (retiré le 22/07/2026).
   Cette barre portait `backdrop-filter: blur(10px)` + `isolation: isolate`
   + `translateZ(0)` + `will-change`. Un backdrop-filter crée une « racine de
   fond » : il casse par construction le mélange des éléments peints AU-DESSUS,
   et les trois autres propriétés ajoutent chacune une promotion de couche.
   Résultat : le curseur en mix-blend-mode laissait des traînées dans l'en-tête,
   et seulement après défilement — puisque la règle est conditionnée à
   `header.scrolled`. Le fond translucide est conservé, le flou est abandonné. */
header.scrolled .mainMenu{
  background-color: #5f5f5f82 !important;
}

header.main-tool-bar--scrolled .logo:before {
  background-color: #fff;
}

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 ::after retiré : il dupliquait le logo de base. Le custom-logo
   du site suffit. Ne pas remettre sauf si le custom-logo n'est PAS déjà blanc.) */

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);
}

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

/* Couleurs nav */

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

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



/* Items (WP nav) */
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;
}

/* Hauteur "cellule" */
.mainMenu .wp-block-navigation-item {
  flex: 1 1 0;
  display: flex;
  height: 111px;
}

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);
}

@media (max-width: 768px) {
  header .MobileOff{
    display: none !important;    
  }
}
@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;
}

/* -------------------------------------------------------------------------- */
/* 5) (libre)                                                                  */
/* -------------------------------------------------------------------------- */
/* Ici vivaient le curseur « flair » et la vignette « cursor-sidecar » hérités du
   thème source, supprimés le 22/07/2026. « flair » était déjà du code mort DANS
   archigroup (aucun élément .flair n'est jamais créé) et portait un
   mix-blend-mode ; le JS qui fabriquait .cursor-sidecar n'a pas été porté à
   l'extraction. Le curseur réellement en service est l'anneau : voir la section
   « 3) Curseur » plus bas (.site-cursor) et js/cursor.js.
   La règle « cursor: text » sur les champs de saisie qui vivait ici était un
   doublon moins spécifique de celle de la section 3, qui reste en place. */

/* -------------------------------------------------------------------------- */
/* 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;
}




/* 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: 80% !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(--site-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;
}

/* Empêcher le débordement horizontal hors du site.
   ⚠️ `overflow-x: hidden` est un piège : par la spécification CSS, dès qu'UN axe
   vaut autre chose que `visible`, l'autre axe passe de `visible` à `auto`. Ce
   <main> devenait donc un CONTENEUR DE DÉFILEMENT vertical imbriqué de plusieurs
   milliers de pixels (mesuré : 7072 px sur /projets/). Sur iOS, démarrer un geste
   dans un scroller imbriqué qui n'a rien à faire défiler retarde la transmission
   du geste à la page : le doigt bouge, la page non, puis elle repart d'un coup.
   `clip` coupe exactement pareil MAIS ne crée aucun conteneur de défilement.
   (Ne pas tenter la même substitution sur html/body : là, `clip` se propage au
   viewport et retombe en `hidden` — il faut viser un vrai wrapper, comme ici.) */
main#wp--skip-link--target {
    overflow-x: clip;
}

/* 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;
}

/* btns */

/*hover*/
.hover-flèche,
.hover-block-b{
  transition: all 0.3s ease-in-out;
}
.hover-flèche:hover,
.hover-block-b:hover{
  background-color: var(--wp--preset--color--contrast) !important;
}
.hover-block-b:hover p{
  color: var(--wp--preset--color--base) !important;
}
.hover-flèche:hover .wp-block-image img{
  content: url(/wp-content/uploads/2026/07/btn-fleche-blanc.svg);
  border-color: var(--wp--preset--color--base) !important;
}
.btn-fleche .wp-block-button__link:hover, 
.btn-plus .wp-block-button__link:hover{
  background-color: var(--wp--preset--color--contrast) !important;
  color: #ffffff !important;
}

.btn-fleche .wp-block-button__link:hover::after{
  border-color: #ffffff !important;
  background-image: url('/wp-content/uploads/2026/07/btn-fleche-blanc.svg');
}

.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 #5F5F5F; 
    background-image: url('/wp-content/uploads/2026/07/btn-fleche.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 52px;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}
/* État de départ : fond contrast, texte + flèche blancs */
.btn-fleche-gris .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;
    background-color: var(--wp--preset--color--contrast) !important;
    color: #ffffff !important;
    transition: all 0.3s ease-in-out;
}

.btn-fleche-gris .wp-block-button__link::after{
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    border-left: 1px solid #ffffff;
    background-image: url('/wp-content/uploads/2026/07/btn-fleche-blanc.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 52px;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

/* Survol : fond blanc, texte + flèche foncés */
.btn-fleche-gris .wp-block-button__link:hover{
    background-color: #ffffff !important;
    color: var(--wp--preset--color--contrast) !important;
}

.btn-fleche-gris .wp-block-button__link:hover::after{
    border-color: #5F5F5F !important;
    background-image: url('/wp-content/uploads/2026/07/btn-fleche.svg');
}
#gform_1 .gform_footer.top_label {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  height: 51px;
  padding: 0 !important;
  transition: all 0.3s ease-in-out;
  border: 1px solid #5F5F5F!important;
}

#gform_1 .gform_footer.top_label:hover {
  background-color: var(--wp--preset--color--contrast) !important;
}

#gform_1 .gform_footer.top_label:hover input#gform_submit_button_1 {
  color: #ffffff !important;
}

#gform_1 .gform_footer.top_label:hover::after {
  border-color: #ffffff !important;
  background-image: url('/wp-content/uploads/2026/07/btn-fleche-blanc.svg');
}

#gform_1 .gform_footer.top_label::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  margin-left: 20px;
  border-left: 1px solid #5F5F5F;
  background-image: url('/wp-content/uploads/2026/07/btn-fleche.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52px;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

#gform_1 input#gform_submit_button_1 {
  background: none !important;
  border: none !important;
  padding-left: 24px !important;
  padding-right: 0 !important;
  margin: 0 !important;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
}

.btn-plus .wp-block-button__link::after {
    content: "";
    display: block;
    width: 50px; 
    height: 50px;
    margin-left: 20px; 
    border-left: 1px solid #5F5F5F; 
    background-image: url('/wp-content/uploads/2026/06/btn-plus.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;
}

/* -------------------------------------------------------------------------- */
/* 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);
}

/* Vidéos */
.wp-block-video {
  overflow: hidden;
  border-radius: 50px;
}
/* Divers */
.head {
  overflow: hidden;
}
.chiffres {
  backdrop-filter: blur(10px);
}

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



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

/* -------------------------------------------------------------------------- */
/* 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                                                              */
/* -------------------------------------------------------------------------- */

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



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

.wp-block-button__link:before{
	content: "";
	position: absolute;
	display: block;
	font-size: 20px;
	right: 4px;
	top: 2px;
    font-family: "Host Grotesk", sans-serif !important;
    text-transform: lowercase;
}

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

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

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

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

}

@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;
  }

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

/* Header responsive */
@media (max-width: 1017px) {
  header main {
    padding-left: 0 !important;
  }
  header main .logo {
    padding: 0 0 0 5% !important;
  }
}

@media (max-width: 768px) {
  .banner-home {
    min-height: 100vh !important;
  }
.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;
    aspect-ratio: unset !important;
    min-height: 80vh !important;
  }
  .group-txt,
  .group-txt .wp-block-group,
  .group-txt h3,
  .group-txt p{
    min-width: 100%;
  }

}
@media (max-width: 600px) {
    .wp-block-navigation__responsive-container.is-menu-open{
      min-height: 100vh !important;
    }
    .expertises-sticky .col2{
      display: none !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;
	}
  .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;
}
}

/* ──────────────────────────────────────────────────────────────────────────
   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 Ocube / Figma "Ocube-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.            */
/* ========================================================================== */
.site-main-nav .wp-block-navigation__responsive-container-open,
.site-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 */
.site-main-nav .wp-block-navigation__responsive-container-open svg,
.site-overlay-close svg {
	display: none !important;
}
.site-main-nav .wp-block-navigation__responsive-container-open::before,
.site-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;
}

/* --- Burger mobile : le picto Ocube remplace la grille de 4 carrés (22/07/2026) ---
   Le SVG est utilisé comme MASQUE et non comme image de fond : seule sa forme
   compte, la couleur reste `currentColor`. Le bouton continue donc de s'adapter
   au fond exactement comme le faisait la grille (blanc sur photo, sombre sinon).
   Le picto est intégré en data-URI plutôt que pointé dans /uploads : le thème ne
   dépend ainsi ni du domaine (ce site changera d'URL) ni d'un média que le client
   pourrait remplacer, et il n'y a pas de requête supplémentaire.
   Ne concerne QUE le bouton d'ouverture : la croix de fermeture est redessinée
   plus bas dans ce fichier et reste inchangée. */
.site-main-nav .wp-block-navigation__responsive-container-open::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: currentColor;
	box-shadow: none; /* annule les 3 carrés de la grille */
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20id='MONO'%20width='85.417'%20height='85.418'%20viewBox='0%200%2085.417%2085.418'%3E%3Cpath%20id='Trac%C3%A9_22'%20data-name='Trac%C3%A9%2022'%20d='M83.817,54.9A22.311,22.311,0,0,1,75.241,63.2a24.868,24.868,0,0,1-12.185,2.98A24.879,24.879,0,0,1,50.869,63.2,22.292,22.292,0,0,1,42.293,54.9a23.4,23.4,0,0,1-3.158-12.188,23.506,23.506,0,0,1,3.158-12.231,22.3,22.3,0,0,1,8.618-8.259,24.937,24.937,0,0,1,12.142-2.98,25.018,25.018,0,0,1,12.185,2.98,22.381,22.381,0,0,1,8.575,8.259,21.424,21.424,0,0,1,1.6,3.405V0H0V85.418H85.418V51.478a21.784,21.784,0,0,1-1.6,3.417Z'%20fill='%23fff'%3E%3C/path%3E%3Cpath%20id='Trac%C3%A9_23'%20data-name='Trac%C3%A9%2023'%20d='M195.99,103.619a11.713,11.713,0,0,0-5.822-1.489,12.052,12.052,0,0,0-5.96,1.535,11.273,11.273,0,0,0-4.334,4.469,15.04,15.04,0,0,0-1.624,7.357,15.652,15.652,0,0,0,1.581,7.4,10.621,10.621,0,0,0,4.288,4.469,12.671,12.671,0,0,0,11.918,0,10.638,10.638,0,0,0,4.288-4.469,15.687,15.687,0,0,0,1.581-7.4,15.306,15.306,0,0,0-1.624-7.4,10.992,10.992,0,0,0-4.288-4.469Z'%20transform='translate(-127.025%20-72.78)'%20fill='%23fff'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20id='MONO'%20width='85.417'%20height='85.418'%20viewBox='0%200%2085.417%2085.418'%3E%3Cpath%20id='Trac%C3%A9_22'%20data-name='Trac%C3%A9%2022'%20d='M83.817,54.9A22.311,22.311,0,0,1,75.241,63.2a24.868,24.868,0,0,1-12.185,2.98A24.879,24.879,0,0,1,50.869,63.2,22.292,22.292,0,0,1,42.293,54.9a23.4,23.4,0,0,1-3.158-12.188,23.506,23.506,0,0,1,3.158-12.231,22.3,22.3,0,0,1,8.618-8.259,24.937,24.937,0,0,1,12.142-2.98,25.018,25.018,0,0,1,12.185,2.98,22.381,22.381,0,0,1,8.575,8.259,21.424,21.424,0,0,1,1.6,3.405V0H0V85.418H85.418V51.478a21.784,21.784,0,0,1-1.6,3.417Z'%20fill='%23fff'%3E%3C/path%3E%3Cpath%20id='Trac%C3%A9_23'%20data-name='Trac%C3%A9%2023'%20d='M195.99,103.619a11.713,11.713,0,0,0-5.822-1.489,12.052,12.052,0,0,0-5.96,1.535,11.273,11.273,0,0,0-4.334,4.469,15.04,15.04,0,0,0-1.624,7.357,15.652,15.652,0,0,0,1.581,7.4,10.621,10.621,0,0,0,4.288,4.469,12.671,12.671,0,0,0,11.918,0,10.638,10.638,0,0,0,4.288-4.469,15.687,15.687,0,0,0,1.581-7.4,15.306,15.306,0,0,0-1.624-7.4,10.992,10.992,0,0,0-4.288-4.469Z'%20transform='translate(-127.025%20-72.78)'%20fill='%23fff'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
/* 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. */
.site-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, qui est `position:fixed; z-index:9999999` -> le header
	   cree un contexte et TOUT son sous-arbre (dont l'overlay de menu OPAQUE) est
	   peint a SON niveau, 9999999, dans le contexte RACINE. Avec le 100003 herite
	   de la regle partagee avec le burger, la croix etait peinte DERRIERE
	   l'overlay : invisible, alors que opacity/visibility/position etaient tous
	   corrects — bug INDETECTABLE en getComputedStyle (il faut elementsFromPoint).
	   ⚠️ SPECIFIQUE OCUBE : sur TACTILE, ScrollSmoother laisse .wp-site-blocks en
	   position:relative -> le 9999999 du header remonte a la racine et le bug se
	   produit ; sur DESKTOP il est MASQUE. Ne PAS valider en retrecissant une
	   fenetre desktop : tester sur un vrai telephone.
	   Le burger d'ouverture, lui, RESTE dans le header : son 100003 y est valable,
	   ne pas y toucher. Le .site-cover est a 10000001 pour rester au-dessus. */
	z-index: 10000000 !important;
}
html.has-modal-open .site-overlay-close {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease, visibility 0s;
}
html.has-modal-open .site-main-nav .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: 599.98px) {
	.site-main-nav .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;
	}
	.site-main-nav .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) {
	.site-main-nav .wp-block-navigation__responsive-container,
	.site-overlay-close {
		transition: none !important;
	}
}

/* La transition de page (panneau .site-cover du plugin ocube-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). */
.site-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 : la croix de fermeture y est passee pour sortir de derriere
	   l'overlay (cf. .site-overlay-close). A egalite, l'ordre DOM ferait gagner la
	   croix. Ordre a tenir : 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.is-navigating .site-main-nav .wp-block-navigation__responsive-container,
html.is-navigating .site-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. */
.site-main-nav .wp-block-navigation-item__content {
	position: relative;
	gap: 12px;
}

/* sous-rubriques : puce carrée creuse */
.site-main-nav .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. */
.site-main-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before,
.site-main-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::before,
.site-main-nav .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). */
.site-main-nav .wp-block-navigation-item,
.site-main-nav .wp-block-navigation-item__content,
.site-main-nav .wp-block-navigation-item__label {
	font-style: normal !important;
}

/* --- Barre desktop (En-tête) : gras, sous-menus masqués --- */
@media (min-width: 900px) {
	.site-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
		display: none !important;
	}
	.site-main-nav > .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). */
	

}

/* ========================================================================== */
/* Overlay plein écran mobile (même bloc de navigation, état ouvert)          */
/* ========================================================================== */
.site-main-nav .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, white-space:nowrap) deborde d'environ 9px a 375 -> on faisait
	   glisser le menu au doigt. Le menu est vertical : aucun scroll horizontal
	   n'a de sens ici. (Amplitude plus faible que sur archigroup : Host Grotesk
	   est plus etroite que capitana.) */
	overflow-x: hidden;
}

/* Watermark « menu » en filigrane, derrière le haut de la liste */
.site-main-nav .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "menu";
	position: absolute;
	left: 50%;
	top: 125px;
	transform: translateX(-50%);
	font-family: "Host Grotesk", 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 */
.site-main-nav .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 en haut a gauche de l'overlay mobile — DESACTIVE par defaut (le fichier
   du logo est propre au site d'origine). Pour l'activer : decommenter et pointer
   background vers le logo BLANC de ton site.
.site-main-nav .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: url("/wp-content/uploads/VOTRE-LOGO-BLANC.svg") no-repeat left top;
	background-size: contain;
}
*/
.site-main-nav .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) */
.site-main-nav .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 */
.site-main-nav .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item {
	margin-bottom: 22px;
}
.site-main-nav .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;
}
.site-main-nav .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 */
.site-main-nav .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;
}
.site-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li.wp-block-navigation-item {
	margin-bottom: 12px;
}
.site-main-nav .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;
}
.site-main-nav .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). */
.site-main-nav .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) */

/* 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. */
.site-main-nav:focus,
.site-main-nav:focus-visible,
.site-main-nav .wp-block-navigation__responsive-container:focus,
.site-main-nav .wp-block-navigation__responsive-container:focus-visible,
.site-main-nav .wp-block-navigation__responsive-container-content:focus,
.site-main-nav .wp-block-navigation__responsive-container-content:focus-visible {
	outline: none !important;
}



.logo-projet{
  z-index: 2;
}
/* ------------------------------------------------------------------ */
/* menu-roll-hover (13/07/2026) — porté depuis archigroup             */
/* Survol léger à l'opacité : au survol du menu, les entrées NON       */
/* survolées s'estompent doucement, celle survolée reste pleine.       */
/* Restreint aux appareils à survol (pas de hover collant tactile).    */
/* Ici la classe du menu est .site-main-nav (thème light dé-brandé).   */
/* ------------------------------------------------------------------ */
@media (hover: hover) {
  .site-main-nav .wp-block-navigation-item__content {
    transition: opacity 0.35s ease;
  }
  .site-main-nav:hover .wp-block-navigation-item__content {
    opacity: 0.55;
  }
  .site-main-nav .wp-block-navigation-item__content:hover {
    opacity: 1;
  }
}

/* ================================================================== */
/* porte-depuis-archigroup (13/07/2026) — changements techniques      */
/* portés d'archigroup, adaptés à ocube (menu .site-main-nav, curseur   */
/* en couleur ocube #a595ba au lieu de l'orange).                       */
/* ================================================================== */

/* 1) Fix cadre de focus (revenait sur desktop/Safari — parent TT5) */
:where(.wp-site-blocks *:focus),
:where(.wp-site-blocks *:focus-visible) {
  outline: none !important;
}
.site-main-nav :focus,
.site-main-nav :focus-visible,
.site-main-nav button:focus,
.site-main-nav button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 2) Roll-hover du footer (fondu au survol des liens) */
@media (hover: hover) {
  footer.wp-block-template-part a {
    transition: opacity 0.3s ease;
  }
  footer.wp-block-template-part a:hover {
    opacity: 0.55;
  }
}

/* 3) Curseur : rond au repos, carré (même taille, plein) au survol des
      interactifs, en effet négatif. Champs texte = curseur texte natif.

      Deux niveaux :
      (a) FALLBACK NATIF (ci-dessous, gaté par html:not(.has-site-cursor)) —
          rond puis carré en SVG data-URI, bascule instantanée. C'est ce qui
          s'affiche si le JS ne tourne pas.
      (b) CURSEUR ANIMÉ — js/cursor.js pose .has-site-cursor sur <html> dès que
          le pointeur est fin : le curseur natif disparaît et .site-cursor prend
          le relais, avec un vrai morphing rond → carré. */

html:not(.has-site-cursor), html:not(.has-site-cursor) body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%23a595ba' stroke-width='3'/%3E%3C/svg%3E") 7 7, auto;
}
html:not(.has-site-cursor) :is(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' y='2' width='10' height='10' fill='%23a595ba'/%3E%3C/svg%3E") 7 7, auto !important;
}

/* Curseur natif masqué partout dès que .site-cursor est actif… */
html.has-site-cursor, html.has-site-cursor body, html.has-site-cursor * {
  cursor: none !important;
}

/* …sauf dans les champs de saisie, qui gardent le curseur texte (les deux
   sélecteurs suivants couvrent le fallback ET le curseur animé). */
html.has-site-cursor :is(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"]),
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;
}

/* Le curseur lui-même. L'élément extérieur ne porte QUE la position ; la forme
   vit sur l'enfant, pour que le morphing n'entre jamais en conflit avec le suivi.

   Effet négatif : blanc + mix-blend-mode:difference = inversion de ce qui passe
   dessous (noir sur fond clair, blanc sur fond sombre, complémentaire sur les
   photos). Le curseur reste donc lisible partout sans couleur fixe.

   ⚠️ DEUX PROPRIÉTÉS À NE JAMAIS REMETTRE AVEC CE BLEND :
   1. `will-change` / `transform: translateZ(0)` ICI — promouvoir sur sa propre
      couche un élément qui doit LIRE le fond fausse le calcul de la zone à
      repeindre ;
   2. un `backdrop-filter` sur un élément SOUS le curseur — c'était le vrai
      coupable des traînées dans l'en-tête (voir `header.scrolled .mainMenu`,
      flou retiré le 22/07/2026). Un backdrop-filter crée une racine de fond qui
      casse le mélange de tout ce qui est peint au-dessus. */
.site-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 10000002; /* au-dessus de .site-cover (10000001) et de la croix */
  mix-blend-mode: difference;
  transition: opacity 0.25s ease;
}
.site-cursor.is-visible {
  opacity: 1;
}
/* Sur les champs texte, le rond s'efface au profit du curseur texte natif. */
.site-cursor.is-text {
  opacity: 0;
}
/* Au repos : un ANNEAU épais, à l'image du « o » du logo Ocube — le trait fait
   près du quart du diamètre, et le centre laisse voir la page.
   Les deux seules valeurs à toucher pour régler l'allure : le diamètre sur
   .site-cursor ci-dessus (14 px) et l'épaisseur du trait ci-dessous (3 px). */
.site-cursor__shape {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 3px solid #fff; /* blanc : c'est le blend « difference » qui donne la couleur */
  background: transparent;
  border-radius: 50%;
  transition: border-radius 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.32s ease;
}

/* Survol d'un élément interactif : même taille, mais l'anneau se remplit et ses
   angles s'ouvrent — il devient le carré plein. */
.site-cursor.is-square .site-cursor__shape {
  border-radius: 0;
  background: #fff;
}

/* Repli si le navigateur ne sait pas mélanger : couleur ocube en dur, sinon le
   curseur blanc serait invisible sur les fonds clairs. */
@supports not (mix-blend-mode: difference) {
  .site-cursor__shape {
    border-color: #a595ba;
  }
  .site-cursor.is-square .site-cursor__shape {
    background: #a595ba;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-cursor,
  .site-cursor__shape {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 1500px) {
    .banner-top img, .banner-top span.wp-block-cover__background {
        width: 95% !important;
        left: 5% !important;
    }
}
@media (min-width: 1500px) {
  .banner-top img, .banner-top span.wp-block-cover__background {
    width: 90% !important;
    left: 10% !important;
  }
}

@media (min-width: 950px) {

.banner-left .wp-block-cover{
  left: -15% !important;
}

.banner-left.width120 .wp-block-cover{
  width:120% !important;
}
.banner-left.width80 .wp-block-cover{
  width: 80% !important;
}
.banner-left{
      padding-left: 0 !important;
}
.banner-top .wp-block-cover__inner-container{
  left: 8.5%;
  padding: 0px;
}
.col-marges{
  margin-top: -100px !important;
}
  .cartel-home{
    flex-basis: 50%;
  }
}
@media (max-width: 600px) {
  .home .banner-top .wp-block-heading {
    font-size: 3.9rem !important;
  }
  .home .banner-top .wp-block-cover__inner-container{
    padding: 0 !important;
  }
  .p-faq{
    padding: 0 !important;
  }

}
/* ------------------------------------------------------------------ */
/* fermeture-menu-croix (16/07/2026) — porte depuis archigroup          */
/* Le bouton FERMER portait EXACTEMENT la meme grille 2x2 que le burger */
/* d'ouverture (regle partagee `...-container-open::before,             */
/* .site-overlay-close::before`) : rien ne signalait qu'il refermait.   */
/* WordPress rend nativement une CROIX, que le theme masque             */
/* (`.site-overlay-close 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 visuelle du site).       */
/* 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.            */
/* ------------------------------------------------------------------ */
.site-overlay-close::before,
.site-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 */
}
.site-overlay-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.site-overlay-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


.questions .wp-block-image {
    border-left: 1px solid;
    border-color: #5f5f5f;
}

.gform_button{
    border: 1px solid #5f5f5f !important;
    box-shadow: none !important;
    font-variant: all-small-caps;
    font-size: x-large !important;
    font-weight: 100 !important;
    padding: 20px 20px 25px 20px !important;
    line-height: 0 !important;
}

.gform_fields input {
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid !important;
    padding-left: 0 !important;
    font-family: 'Host Grotesk' !important;
    font-size: medium !important;
    font-weight: 300 !important;
}
.gform_fields textarea{
  font-family: 'Host Grotesk' !important;
    font-size: medium !important;
    font-weight: 300 !important;
}

.page-template-default:not(.home),
.archive{
  .wp-block-navigation__container .wp-block-navigation-item__label{
    color:var(--wp--preset--color--contrast) !important;
  }
  .custom-logo-link img{
    content:url(/wp-content/uploads/2026/07/picto-ocube-noir.svg);
  }
}
@media (max-width: 599px) {
  .page-template-default:not(.home),
  .archive{
    .site-main-nav .wp-block-navigation__responsive-container-open {
        color: var(--wp--preset--color--contrast) !important;
    }
    .main-tool-bar--scrolled .site-main-nav .wp-block-navigation__responsive-container-open {
        color: var(--wp--preset--color--base) !important;
    }
    .site-main-nav .wp-block-navigation__responsive-close,
    .site-main-nav .wp-block-navigation__responsive-close .wp-block-navigation-item__content span{
      color:var(--wp--preset--color--base) !important;
    }
  }
}

.page-template-default:not(.home) header.main-tool-bar--scrolled,
.archive header.main-tool-bar--scrolled{

  .custom-logo-link img{
    content:url(/wp-content/uploads/2026/07/picto-ocube.svg) !important;
  }
   .wp-block-navigation__container .wp-block-navigation-item__label{
    color:var(--wp--preset--color--base) !important;
  }
  
}

/* Scroll indépendant pour les colonnes .colonnes-projet (inspiré de vergelyarchitectes.com/fr/antiquaille) */
.colonnes-projet {
  align-items: flex-start;
}

.colonne-pin-inner {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.colonne-pin-inner::-webkit-scrollbar {
  display: none;
}

.resume-projet.has-transition {
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}
/* État replié : plafond de hauteur + coupe, SANS -webkit-line-clamp.
   Le line-clamp aplatissait tout le contenu en lignes de texte (un <h3> ou une
   liste placés dans la zone masquée perdaient leur mise en forme). Ici, n'importe
   quel bloc est simplement clippé par la hauteur, en gardant son rendu.
   --resume-collapsed = hauteur repliée (teaser), ajustable par fiche si besoin. */
.resume-projet.is-collapsed {
  max-height: var(--resume-collapsed, 12em); /* ~8-9 lignes repliées, ajustable */
  overflow: hidden;
}
.resume-projet-toggle {
  display: inline-block;
  margin-top: 0.5em;
  text-decoration: underline;
  cursor: pointer;
  border-radius: 2px;
  background: var(--wp--preset--color--accent-1, #f2eae2);
  transition: 0.5s ease;
  padding: 5px 10px 5px 10px;
    font-weight: 500;
}

.resume-projet-toggle:hover {
background: var(--wp--preset--color--contrast, #f2eae2);
color: var(--wp--preset--color--accent-1);
}

.single-projet h1 {
    margin-bottom: 50px;
    font-size: xx-large !important;
}

/*  animation block projet  */

.type-projet a.wp-block-tiptip-hyperlink-group-block {
  position: relative;
  overflow: hidden;
  display: block;
}

.type-projet a.wp-block-tiptip-hyperlink-group-block .wp-block-post-title {
  opacity: 0;
  position: relative;
  z-index: 2;
  transform: translateX(-30px);
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.type-projet a.wp-block-tiptip-hyperlink-group-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.5);

  -webkit-mask-image: linear-gradient(#000, #000), url('/wp-content/uploads/2026/07/O-big.svg');
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, right 0 center;
  -webkit-mask-size: 100% 100%, auto 150%; /* au repos : hors champ, calculé sur la hauteur */
  -webkit-mask-composite: xor;

  mask-image: linear-gradient(#000, #000), url('/wp-content/uploads/2026/07/O-big.svg');
  mask-repeat: no-repeat, no-repeat;
  mask-position: 0 0, right 0 center;
  mask-size: 100% 100%, auto 150%;
  mask-composite: exclude;

  opacity: 0;
  transition: opacity 0.4s ease, -webkit-mask-size 0.6s ease, mask-size 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.type-projet a.wp-block-tiptip-hyperlink-group-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.3);

  -webkit-mask-image: url('/wp-content/uploads/2026/07/O-small.svg');
  -webkit-mask-repeat: no-repeat;
 -webkit-mask-position: calc(100.5% - var(--o-offset, 10%)) 50%;
  mask-position: calc(100.5% - var(--o-offset, 10%)) 50%;
  -webkit-mask-size: auto 0%;

  mask-image: url('/wp-content/uploads/2026/07/O-small.svg');
  mask-repeat: no-repeat;
  mask-size: auto 0%;

  opacity: 0;
  transition: opacity 0.4s ease, -webkit-mask-size 0.6s ease, mask-size 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.type-projet a.wp-block-tiptip-hyperlink-group-block:hover .wp-block-post-title,
.type-projet a.wp-block-tiptip-hyperlink-group-block.is-active .wp-block-post-title {
  opacity: 1;
  transform: translateX(0);
}

.type-projet a.wp-block-tiptip-hyperlink-group-block:hover::before,
.type-projet a.wp-block-tiptip-hyperlink-group-block.is-active::before {
  opacity: 1;
  -webkit-mask-size: 100% 100%, auto 40%;
  mask-size: 100% 100%, auto 40%;
}

.type-projet a.wp-block-tiptip-hyperlink-group-block:hover::after,
.type-projet a.wp-block-tiptip-hyperlink-group-block.is-active::after {
  opacity: 1;
  -webkit-mask-size: auto 20%;
  mask-size: auto 20%;
}




/*  animation block article  */


.type-post a.wp-block-tiptip-hyperlink-group-block {
  position: relative;
  overflow: hidden;
  display: block;
}

/* Titre : visible et en place par défaut, disparaît vers la gauche au survol */
.type-post a.wp-block-tiptip-hyperlink-group-block .wp-block-post-title,
.type-post a.wp-block-tiptip-hyperlink-group-block .taxonomy-category{
  opacity: 1;
  position: relative;
  z-index: 2;
  transform: translateX(0);
  transition: opacity 0.4s ease, transform 0.5s ease;
}

/* Voile principal, visible par défaut (trou compact, collé au bord droit) */
.type-post a.wp-block-tiptip-hyperlink-group-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.5);

  -webkit-mask-image: linear-gradient(#000, #000), url('/wp-content/uploads/2026/07/O-big.svg');
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, right 0 center;
  -webkit-mask-size: 100% 100%, 40%;
  -webkit-mask-composite: xor;

  mask-image: linear-gradient(#000, #000), url('/wp-content/uploads/2026/07/O-big.svg');
  mask-repeat: no-repeat, no-repeat;
  mask-position: 0 0, right 0 center;
  mask-size: 100% 100%, 40%;
  mask-composite: exclude;

  opacity: 1;
  transition: opacity 0.4s ease, -webkit-mask-size 0.6s ease, mask-size 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

/* Recouche intérieure, visible par défaut */
.type-post a.wp-block-tiptip-hyperlink-group-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.3);

  -webkit-mask-image: url('/wp-content/uploads/2026/07/O-small.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right 11% center;
  -webkit-mask-size: 20%;

  mask-image: url('/wp-content/uploads/2026/07/O-small.svg');
  mask-repeat: no-repeat;
  mask-position: right 11% center;
  mask-size: 20%;

  opacity: 1;
  transition: opacity 0.4s ease, -webkit-mask-size 0.6s ease, mask-size 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

/* Au survol / actif (tactile) : tout disparaît, la photo redevient nette */
.type-post a.wp-block-tiptip-hyperlink-group-block:hover .wp-block-post-title,
.type-post a.wp-block-tiptip-hyperlink-group-block.is-active .wp-block-post-title,
.type-post a.wp-block-tiptip-hyperlink-group-block:hover .taxonomy-category,
.type-post a.wp-block-tiptip-hyperlink-group-block.is-active .taxonomy-category  {
  opacity: 0;
  transform: translateX(-30px);
}

.type-post a.wp-block-tiptip-hyperlink-group-block:hover::before,
.type-post a.wp-block-tiptip-hyperlink-group-block.is-active::before {
  opacity: 0;
  -webkit-mask-size: 100% 100%, 150%;
  mask-size: 100% 100%, 150%;
}

.type-post a.wp-block-tiptip-hyperlink-group-block:hover::after,
.type-post a.wp-block-tiptip-hyperlink-group-block.is-active::after {
  opacity: 0;
  -webkit-mask-size: 0%;
  mask-size: 0%;
}




/* Cibler le conteneur interne du bloc cover spécifique */
.type-post .wp-block-cover.is-position-center-left .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Écarte le premier élément en haut et le dernier en bas */
    height: 100%; /* S'assure que le conteneur prend toute la hauteur de l'image */
    width: 100%;
    box-sizing: border-box;
}


.type-post .wp-block-cover__inner-container .taxonomy-category {
    margin: 0 !important;
}




/*  mise en pages catégories  */

.wp-block-categories-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 !important;
}
@media (max-width: 674px) {
  .wp-block-categories-list {
    gap: 20px;
    justify-content: flex-start;
    flex-direction: column;
  }
}

.wp-block-categories-list .cat-item::marker {
    content: "";
    display: none !important;
}
ul.wp-block-categories-list {
    list-style-type: none;
}
/* -------------------------------------------------------------------------- */
/* Filtres projets : MÊME TRAME que la grille de projets en dessous           */
/* (02/09/2026)                                                               */
/* -------------------------------------------------------------------------- */
/* Avant : `display:flex` + `justify-content:space-between`, et des pastilles
   dimensionnées par leur propre padding horizontal (7px 65px). Leurs largeurs
   suivaient donc la longueur du libellé — mesuré sur /projets/logements-individuels/
   à 1440 px : 272 / 262 / 297 / 182 px, pour des colonnes de grille de 285 px.
   Seules la première et la dernière tombaient juste (effet du space-between) ;
   au milieu, rien n'était aligné. Et dès 900 px les pastilles passaient sur deux
   lignes en escalier.

   Ici : la même grille que le bloc « Modèle de publication » de la page
   d'archive (`columns-4`, gouttière = block-gap de WordPress). Chaque pastille
   occupe une colonne, donc tombe exactement sur la tuile qu'elle surplombe.
   Une 5e catégorie passerait à la ligne EN RESTANT alignée sur la trame. */
.wp-block-categories-taxonomy-categorie-de-projet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--style--block-gap, 1.2rem);
}

/* Le bloc Modèle de publication du cœur repasse à UNE colonne sous 600 px : on
   suit le même point de rupture, sinon les filtres resteraient sur 4 colonnes
   au moment où la grille n'en a plus qu'une. */
@media (max-width: 600px) {
  .wp-block-categories-taxonomy-categorie-de-projet {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La pastille remplit sa colonne : c'est la trame, et non son texte, qui fixe
   désormais sa largeur — d'où le padding horizontal réduit à une simple marge
   de confort et le centrage du libellé. */
.wp-block-categories-taxonomy-categorie-de-projet li.cat-item {
    display: flex;
}
.wp-block-categories-taxonomy-categorie-de-projet li.cat-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 7px 12px !important;
    text-align: center;
    line-height: 1.25;
}

.wp-block-categories-taxonomy-categorie-de-projet .cat-item-10 { order: 1; }
.wp-block-categories-taxonomy-categorie-de-projet .cat-item-11 { order: 2; }
.wp-block-categories-taxonomy-categorie-de-projet .cat-item-12 { order: 3; }
.wp-block-categories-taxonomy-categorie-de-projet .cat-item-13 { order: 4; }



li.cat-item a{
    border: 1px solid #5f5f5f;
    padding: 7px 65px;
    /* ⚠️ PAS `all` : voir le bloc « filtres qui vibrent » plus bas. Seules ces
       deux propriétés changent au survol. */
    transition: background-color 0.5s cubic-bezier(0.43, 0.195, 0.02, 1),
                color 0.5s cubic-bezier(0.43, 0.195, 0.02, 1);
}

li.cat-item a:hover{
    background-color:#5f5f5f;
    color: #ffffff !important;
}

/* Catégorie active : même aspect « rempli » que le survol, en permanent.
   WordPress pose déjà .current-cat sur le <li> de la catégorie affichée
   (+ aria-current="page" sur son lien) — on n'a qu'à le styler.
   `!important` pour l'emporter sur la règle de base du lien (color:base). */
li.cat-item.current-cat a,
li.cat-item a[aria-current="page"] {
    background-color: #5f5f5f;
    color: #ffffff !important;
}



/*  équipe  */

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

/* old

.photo-equipe {
  position: relative;
  overflow: hidden;
}

 Filtre couleur : caché par défaut, révélé par un cercle net qui grandit jusqu'à dépasser le cadre 
.photo-equipe .wp-block-cover__background {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 99%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 0% 0%;

  mask-image: radial-gradient(circle closest-side, #000 99%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 0% 0%;

  transition: -webkit-mask-size 0.6s ease, mask-size 0.6s ease;
}

.photo-equipe:hover .wp-block-cover__background {
  -webkit-mask-size: 250% 250%;
  mask-size: 250% 250%;
}

Texte : fade + léger mouvement depuis le bas 
.photo-equipe .wp-block-cover__inner-container p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.photo-equipe:hover .wp-block-cover__inner-container p {
  opacity: 1;
  transform: translateY(0);
}
*/


/* map  */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 9;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* fil d'ariane   */ 
/* 1. Ajustement du conteneur principal pour coller le bloc au bord gauche */
.wp-block-group.has-border-color {
    padding-left: 0 !important; 
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.yoast-breadcrumbs span {
    gap: 5px;
}

/* 2. Alignement vertical du fil d'Ariane et style du texte (chevron et page courante) */
.yoast-breadcrumbs > span {
    display: flex;
    align-items: center;
    font-family: sans-serif;
}

.yoast-breadcrumbs .breadcrumb_last {
    font-weight: 700; /* Met le texte en gras comme sur la photo 1 */
    margin-left: 5px;
}

/* 3. Transformation du lien "Accueil" en bloc gris */
.yoast-breadcrumbs > span > span:first-child a {
    display: flex;
    align-items: center;
    justify-content: center;; /* Gris foncé (à ajuster selon votre charte exacte) */
    color: transparent; /* Masque visuellement le mot "Accueil" */
    font-size: 0; /* Supprime l'encombrement du texte masqué */
    padding: 0 !important; /* Ajuste la largeur du bloc gris */
    min-height: 45px; /* Assure que le bloc touche les bordures haut et bas */
    height: 100%;
    text-decoration: none !important;
    margin-right: 12px; /* Crée l'espace entre le bloc gris et le ">" */
}

/* 4. Insertion du picto SVG noir à l'intérieur du bloc */
.yoast-breadcrumbs > span > span:first-child a::before {
    content: "";
    display: block;
    width: 50px; /* Ajustez la largeur du picto selon vos besoins */
    height: 50px; /* Ajustez la hauteur du picto */
    background-image: url('/wp-content/uploads/2026/07/picto-ocube.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.f-ariane-noir .yoast-breadcrumbs > span > span:first-child a::before{
  background-image: url('/wp-content/uploads/2026/07/picto-ocube-noir.svg') !important;
}

.wp-block-breadcrumbs{
  display: flex;
}
/* -------------------------------------------------------------------------- */
/* Surlignage glissant du menu principal (desktop) — 22/07/2026                */
/* -------------------------------------------------------------------------- */
/* Un seul bandeau, déplacé par js/menu-highlight.js d'une entrée à l'autre :
   c'est la TRANSITION sur transform/width qui produit le glissement. Aucun GSAP
   (cf. règle du thème : rien d'animé par GSAP hors du cycle boot()/teardown()). */
@media (hover: hover) and (pointer: fine) {
  .site-main-nav .wp-block-navigation__container.has-nav-highlight {
    position: relative;
  }

  .site-nav-highlight {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 2px;
    background: var(--wp--preset--color--accent-1, #f2eae2);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.22s ease;
  }
  /* Premier survol : on saute en place au lieu de glisser depuis l'origine. */
  .site-nav-highlight.no-anim {
    transition: opacity 0.22s ease;
  }
  .has-nav-highlight.is-highlighting .site-nav-highlight {
    opacity: 1;
  }

  /* Les entrées passent au-dessus du bandeau… */
  .site-main-nav .wp-block-navigation__container.has-nav-highlight
    > .wp-block-navigation-item {
    position: relative;
    z-index: 1;
  }
  /* …et l'entrée surlignée prend la couleur foncée du thème pour rester lisible
     sur le beige, y compris quand le menu est en blanc sur photo. */
  .site-main-nav .wp-block-navigation__container.has-nav-highlight
    > .wp-block-navigation-item.is-highlighted a{
    color: var(--wp--preset--color--contrast, #5f5f5f) !important;
    opacity: 1 !important;
    transition: color 0.25s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-highlight {
    transition: opacity 0.01ms;
  }
}



/* -------------------------------------------------------------------------- */
/* Mobile : plus de logo dans l'en-tête — 22/07/2026                           */
/* -------------------------------------------------------------------------- */
/* Depuis que le burger affiche le picto Ocube (cf. règle du masque plus haut),
   le logo de gauche faisait doublon : deux fois la même marque en haut d'écran.
   On masque donc le logo d'en-tête sur la plage où le burger est affiché.
   `display:none` et non `visibility`/`opacity` : app.js contient un filet
   (fixSiteLogoVisibility) qui remet le logo en opacity/visibility visibles au
   refresh — il ne peut pas rétablir un display:none.
   L'élément reste dans le DOM : la transition de page CLONE `.wp-block-site-logo
   img` pour l'afficher au centre du rideau, et ce clone n'est pas concerné. */
@media (max-width: 600px) {
  header .wp-block-site-logo {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Page projet — grille photos en vraie mosaïque, écarts constants (22/07/2026)*/
/* -------------------------------------------------------------------------- */
/* Avant : deux colonnes flex dont la répartition était figée à la main (2 photos
   à gauche, 3 à droite) — donc pas une mosaïque, et surtout deux écarts
   différents : 20 px à l'horizontale (gap du bloc) contre 19,2 px à la verticale
   (une marge en `em`, qui changeait donc avec la taille du texte et l'écran).

   Ici : une seule valeur `--ocube-grille-gap` sert aux DEUX axes, donc les écarts
   sont identiques et stables quelle que soit la largeur d'écran. Le conteneur
   passe en multi-colonnes CSS : le navigateur équilibre lui-même les hauteurs
   (vraie mosaïque) au lieu de suivre une répartition écrite en dur.

   `display: contents` sur les colonnes intermédiaires les efface visuellement
   pour que les photos deviennent les éléments coulants du multi-colonnes — sans
   toucher au markup, donc l'éditeur du client reste inchangé. */
.colonnes-projet > .wp-block-column:last-child > .wp-block-columns {
  --ocube-grille-gap: 20px;
  display: block;
  columns: 2;
  column-gap: var(--ocube-grille-gap);
  /* compense la marge basse du dernier élément de chaque colonne */
  margin-bottom: calc(-1 * var(--ocube-grille-gap));
}

.colonnes-projet > .wp-block-column:last-child > .wp-block-columns > .wp-block-column {
  display: contents;
}

.colonnes-projet > .wp-block-column:last-child > .wp-block-columns .wp-block-cover {
  /* une photo ne doit jamais être coupée entre deux colonnes */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  width: 100%;
  margin: 0 0 var(--ocube-grille-gap) !important;
}

/* Sous le point de rupture des colonnes WordPress : une seule colonne. */
@media (max-width: 781px) {
  .colonnes-projet > .wp-block-column:last-child > .wp-block-columns {
    columns: 1;
  }
}


/* -------------------------------------------------------------------------- */
/* Page /projets/ (page-id-29) — écarts de la mosaïque homogènes (22/07/2026) */
/* -------------------------------------------------------------------------- */
/* La mosaïque est bâtie à la main avec des blocs Query/Cover empilés dans des
   colonnes. Tous les écarts valaient 20 px FIXES… sauf l'écart VERTICAL entre
   deux tuiles d'une même colonne, qui héritait du block-gap WordPress `1.2rem`
   (~19,2 px). Deux problèmes : il ne collait pas au 20 px horizontal, et surtout
   étant en `rem` il grandissait avec le zoom/la taille de police → gouttières
   visiblement inégales selon l'écran.
   On le fige à 20 px, uniquement entre deux éléments VISUELS (tuile/cover) d'une
   colonne de contenu — les blocs de texte (intro, appels à l'action) ne sont pas
   touchés. Résultat : 20 px partout, identiques quelle que soit la taille d'écran. */
.page-id-29 .entry-content .wp-block-column.is-layout-flow
  > :is(.wp-block-query, .wp-block-cover)
  + :is(.wp-block-query, .wp-block-cover) {
  margin-block-start: 20px !important;
}

/* -------------------------------------------------------------------------- */
/* Intro home : machine à écrire + révélation étagée (22/07/2026)             */
/* -------------------------------------------------------------------------- */
/* Le JS (js/home-intro.js) tient .pages_title et .cartel-home cachés puis les
   révèle en séquence. Ici : le fondu de chaque caractère frappé.
   Le curseur clignotant (.pages-title-caret, animation pages-title-blink) vivait
   ici ; retiré le 02/09/2026, en même temps que l'élément côté JS. */

/* Fondu par caractère (typewriter en douceur). La durée du fondu (0.7s) est plus
   longue que l'intervalle de frappe (100ms) → les lettres se chevauchent en un
   dégradé continu plutôt que d'apparaître d'un coup. */
.pages_title .pt-char {
  opacity: 0;
  animation: pt-char-in 0.7s ease forwards;
}
@keyframes pt-char-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pages_title .pt-char { animation: none; opacity: 1; }
}


/* -------------------------------------------------------------------------- */
/* Césures automatiques, tout le site (02/09/2026)                            */
/* -------------------------------------------------------------------------- */
/* `hyphens` est une propriété HÉRITÉE : la déclarer sur <body> suffit à couvrir
   tout le contenu, sans avoir à énumérer les sélecteurs. La coupure s'appuie sur
   le dictionnaire de la langue du document — ici `lang="fr-FR"` posé par
   WordPress (et resynchronisé à chaque navigation AJAX par page-transition.js,
   donc valable aussi après un swap).

   `hyphenate-limit-chars: 6 3 3` = ne coupe que les mots de 6 lettres ou plus,
   en laissant au moins 3 lettres avant et 3 après. Sans cette limite, les
   navigateurs produisent des coupures d'une ou deux lettres (« é-tage »,
   « pro-jet » réduit à « pro-jet »), typographiquement fautives en français.
   Les préfixes -webkit- servent aux Safari antérieurs à 17, qui ne connaissent
   pas encore la propriété standard. */
body {
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	hyphenate-limit-chars: 6 3 3;
}

/* Exceptions : le CHROME du site (libellés d'interface) et les contenus non
   linguistiques ne doivent jamais être coupés — un mot coupé dans un bouton, un
   fil d'Ariane ou une étiquette de catégorie se lit comme une faute, et une
   coupure dans du code ou une adresse en change le sens.
   `.pages_title` est exclu à part : js/home-intro.js le découpe caractère par
   caractère (spans `.pt-char`), toute césure y serait à la fois inutile et
   susceptible de fausser la mesure du découpage. */
:is(
	.wp-block-navigation,
	.site-main-nav,
	.wp-block-site-title,
	.wp-block-button__link,
	.wp-element-button,
	.wp-block-post-terms,
	.taxonomy-category,
	.yoast-breadcrumbs,
	.site-cover,
	.site-lightbox,
	.pages_title,
	button,
	input,
	select,
	textarea,
	label,
	code,
	pre,
	kbd,
	samp,
	abbr,
	time
) {
	/* Pas besoin de viser les descendants : `hyphens` étant héritée, poser
	   `manual` sur le conteneur suffit à couvrir tout son sous-arbre. */
	-webkit-hyphens: manual;
	hyphens: manual;
}


/* -------------------------------------------------------------------------- */
/* Fonctions de l'équipe : corps réduit (02/09/2026)                          */
/* -------------------------------------------------------------------------- */
/* Dans chaque tuile d'équipe (le calque .equipe-photo2, révélé au survol), le
   NOM est le premier paragraphe (graisse 700) et la ou les FONCTIONS suivent
   (graisse 300). Tous portaient la même taille `x-large` (30,8 px à 1440), si
   bien qu'une fonction sur deux lignes pesait autant que le nom.
   `p + p` ne vise que les paragraphes PRÉCÉDÉS d'un autre : le nom garde sa
   taille, les fonctions passent à `large`. `!important` est obligatoire, les
   classes de préréglage de WordPress (.has-x-large-font-size) en portant un. */
.equipe-photo2 .wp-block-cover__inner-container p + p {
	font-size: var(--wp--preset--font-size--large) !important;
}


/* -------------------------------------------------------------------------- */
/* Texte des tuiles pleines : taille liée à la LARGEUR DE LA TUILE            */
/* (02/09/2026)                                                               */
/* -------------------------------------------------------------------------- */
/* Une « tuile pleine » = un bloc Couverture dont le voile de couleur masque
   l'image à 100 % (`.has-background-dim-100`) : le carré coloré qui porte un
   libellé court (« Nos réalisations », « En voir plus », « Manifeste »…).

   Le problème : la taille du titre était fluide selon la LARGEUR DE FENÊTRE
   (clamp inline de WordPress), alors que la tuile, elle, ne fait qu'un quart de
   la largeur de contenu. En rétrécissant la fenêtre, la tuile maigrissait donc
   quatre fois plus vite que son texte — mesuré à 900 px : un titre de 46,8 px
   dans une tuile de 188 px, d'où les césures à répétition.

   `min(22cqi, 4vw)` prend la plus petite des deux contraintes : `cqi` est un
   pourcentage de la largeur de la TUILE (grâce au `container-type` ci-dessous),
   `vw` garde la main quand la tuile passe pleine largeur en mobile — sans ce
   second terme, une tuile de 540 px sur un téléphone donnerait un titre de
   plus de 100 px. Le résultat ne peut donc que RÉDUIRE par rapport à avant :
   55 px à 1440 (contre 57), 34 px à 900 (contre 47), 21 px à 600 (contre 41).
   Les trois valeurs à régler sont le plancher, les deux coefficients et le
   plafond. */
.wp-block-cover:has(> .wp-block-cover__background.has-background-dim-100) {
	/* Référentiel des unités cqi. Vérifié : n'altère NI la largeur NI la hauteur
	   de la tuile (285 × 285 avant comme après). */
	container-type: inline-size;
}

.wp-block-cover:has(> .wp-block-cover__background.has-background-dim-100)
	:is(h1, h2, h3, h4, h5, h6) {
	font-size: clamp(1.3rem, min(22cqi, 4vw), 4.1rem) !important;
}


/* -------------------------------------------------------------------------- */
/* Bannières de haut de page : hauteur adaptée au mobile (03/09/2026)         */
/* -------------------------------------------------------------------------- */
/* `.banner-top` est la bannière d'ouverture de la home, des fiches projet, des
   articles et des pages « classiques ». Sa hauteur est posée en dur dans les
   modèles : 70vh partout, 80vh sur la home. Sur un téléphone (mesuré sur
   390 × 844) cela donnait 591 px et 675 px, soit 70 % et 80 % de l'écran : on ne
   voyait quasiment rien du contenu sans défiler.

   `max(260px, …)` évite l'excès inverse en paysage, où 50 % d'un écran de 390 px
   de haut ne ferait qu'une bande de 195 px.

   Deux déclarations par règle, dans cet ordre : les navigateurs qui ignorent
   `svh` gardent la ligne en `vh`. On utilise `svh` (« small viewport height »,
   barre d'adresse VISIBLE) et non `dvh` : `dvh` change de valeur quand la barre
   se masque au défilement, ce qui ferait respirer la hauteur de la bannière
   pendant le scroll.

   La home reste un peu plus haute que les autres, comme dans la maquette, et
   parce que son titre animé occupe le bas de l'image. */
@media (max-width: 781px) {
	.banner-top {
		min-height: max(260px, 50vh) !important;
		min-height: max(260px, 50svh) !important;
	}

	.home .banner-top {
		min-height: max(300px, 58vh) !important;
		min-height: max(300px, 58svh) !important;
	}
}

/* ⚠️ ÉCRANS BAS (téléphone en PAYSAGE, fenêtre desktop écrasée) : ici ce n'est
   pas la largeur qui manque mais la HAUTEUR, la règle ci-dessus ne s'applique
   donc pas. Mesuré sur 844 × 390 : la bannière tenait toujours 80 % de l'écran
   (312 px sur 390), il ne restait que 78 px de contenu visible.
   Cette règle vient APRÈS, donc l'emporte à spécificité égale quand les deux
   correspondent (petit écran étroit ET bas). */
@media (max-height: 560px) {
	.banner-top,
	.home .banner-top {
		min-height: max(200px, 55vh) !important;
		min-height: max(200px, 55svh) !important;
	}
}


/* -------------------------------------------------------------------------- */
/* Survol des tuiles pleines cliquables (14/09/2026)                          */
/* -------------------------------------------------------------------------- */
/* Depuis que les tuiles Instagram / LinkedIn / Actualités de /projets/ sont de
   vrais liens, elles doivent répondre au survol : sans retour visuel, rien
   n'indique qu'un carré de couleur est cliquable.

   Le geste n'est pas inventé : c'est EXACTEMENT celui des pastilles de filtre
   juste au-dessus sur la même page (`li.cat-item a:hover`) et du bouton
   « Lire plus » des fiches projet — le pavé se remplit de gris foncé et le
   texte passe en blanc, avec la courbe d'accélération du thème.

   `[href]` est la condition qui compte : le bloc « lien de groupe » enveloppe
   aussi des tuiles SANS URL (les quatre de /agence/, et « En voir plus » qui
   n'est qu'une amorce de lecture). Sans URL, pas de zone cliquable, donc pas
   d'effet — c'est le rendu qui doit suivre le comportement réel.
   `has-background-dim-100` restreint aux tuiles de couleur pleine : les cartes
   projets et actualités, voilées à 20-30 %, gardent leur propre effet (le
   motif « O » qui se dévoile) et ne doivent pas en cumuler deux.
   `@media (hover: hover)` : sur tactile un `:hover` resterait collé après le tap. */
@media (hover: hover) {
	/* ⚠️ Le `:has()` n'est pas décoratif : sans lui, la règle de COULEUR portait
	   aussi sur les 14 cartes projets et actualités de la page (leur titre vit
	   lui aussi dans un `.wp-block-cover__inner-container`), et son `!important`
	   serait venu se superposer à leur propre effet de survol. Mesuré : 17
	   éléments visés au lieu de 3. Le `:has()` réduit la portée aux seuls liens
	   qui enveloppent une tuile de couleur pleine. */
	a.wp-block-tiptip-hyperlink-group-block[href]:has(> .wp-block-cover > .wp-block-cover__background.has-background-dim-100)
		> .wp-block-cover
		> .wp-block-cover__background,
	a.wp-block-tiptip-hyperlink-group-block[href]:has(> .wp-block-cover > .wp-block-cover__background.has-background-dim-100)
		.wp-block-cover__inner-container :is(p, h1, h2, h3, h4, h5, h6) {
		transition: background-color 0.5s cubic-bezier(0.43, 0.195, 0.02, 1),
			color 0.5s cubic-bezier(0.43, 0.195, 0.02, 1);
	}

	/* ⚠️ `!important` INDISPENSABLE ICI AUSSI, et pas seulement sur la couleur du
	   texte : le voile porte `.has-accent-1-background-color`, que WordPress
	   émet dans ses styles globaux AVEC un `!important`. Sans lui, la règle est
	   appliquée mais perdue à la cascade — symptôme trompeur constaté au survol
	   réel le 14/09 : le texte passait bien en blanc pendant que le fond restait
	   beige, donc le libellé devenait illisible. */
	a.wp-block-tiptip-hyperlink-group-block[href]:hover
		> .wp-block-cover
		> .wp-block-cover__background.has-background-dim-100 {
		background-color: #5f5f5f !important;
	}

	/* Même raison : les classes de couleur de texte (.has-contrast-color) en
	   portent un aussi. */
	a.wp-block-tiptip-hyperlink-group-block[href]:has(> .wp-block-cover > .wp-block-cover__background.has-background-dim-100):hover
		.wp-block-cover__inner-container :is(p, h1, h2, h3, h4, h5, h6) {
		color: var(--wp--preset--color--base, #fff) !important;
	}
}


/* -------------------------------------------------------------------------- */
/* Filtres de catégories : fin des tremblements au chargement (14/09/2026)    */
/* -------------------------------------------------------------------------- */
/* Symptôme signalé : au chargement, les pastilles « bougent bizarrement et
   vibrent ».

   Cause : TROIS `transition: all` imbriqués sur la même pile d'éléments — la
   liste hérite de `.gs_reveal` (0,5 s), chaque `<li>` de `.animateChilds > *`
   (0,4 s) et chaque lien de `li.cat-item a` (0,5 s, corrigé ci-dessus).
   `all` anime TOUT ce qui change, y compris la GÉOMÉTRIE. Or pendant le
   chargement la largeur se stabilise plusieurs fois (arrivée de la police
   Host Grotesk, apparition de la barre de défilement, mesure de ScrollSmoother,
   résolution des pistes de la grille). Chaque variation était donc animée, à
   trois niveaux et sur trois durées différentes : d'où le tremblement.

   On garde exactement les propriétés utiles à l'effet de révélation (opacité et
   déplacement) et on laisse la géométrie s'installer instantanément. Portée
   limitée aux listes de catégories : `.gs_reveal` et `.animateChilds` servent
   partout ailleurs sur le site et ne sont pas touchés. */
.wp-block-categories-list.gs_reveal {
	transition: opacity 0.5s cubic-bezier(0.43, 0.195, 0.02, 1);
}

.wp-block-categories-list.animateChilds > .cat-item {
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ========================================================================== */
/* Recette 18-30 — 16/09/2026                                                 */
/* ========================================================================== */

/* --- Point 20 : retour à l'accueil sur mobile ------------------------------ */
/* Le logo d'en-tête est masqué sous 600 px depuis le 22/07 (doublon avec le
   picto du burger). Conséquence non vue à l'époque : le logo était le SEUL
   lien vers l'accueil, donc plus aucun retour possible sur mobile.
   On ajoute un item « Accueil » au menu, et on le masque là où le logo, lui,
   est visible — sinon il ferait doublon sur desktop. */
@media (min-width: 601px) {
  /* `!important` : la regle de WordPress pour les items de navigation
     (`.wp-block-navigation__container .wp-block-navigation-item`) est plus
     specifique et remettrait l'entree en `display:flex`. */
  .wp-block-navigation .menu-item-accueil-mobile {
    display: none !important;
  }
}

/* --- Points 21 et 22 : photos écrasées en portrait sur mobile -------------- */
/* Ces blocs portent un `min-height` en pixels figé dans l'éditeur (597 px sur
   la home, 590 px sur Contact). Sur une colonne de 315 px, une photo paysage
   se retrouve enfermée dans une boîte portrait : `object-fit:cover` rogne alors
   l'essentiel de l'image (sur la home, les visages de l'équipe étaient coupés).
   On rend la hauteur proportionnelle à la largeur au lieu de la figer.
   `!important` est nécessaire : la valeur d'origine est en style en ligne. */
@media (max-width: 600px) {
  .wp-block-cover.banner-left,
  .banner-left > .wp-block-cover {
    min-height: 0 !important;
    /* `!important` indispensable ici aussi : le bloc porte `aspect-ratio:unset`
       en style en ligne, qui l'emporterait sinon — et la hauteur tomberait a
       zero, faisant disparaitre la photo. */
    aspect-ratio: 3 / 2 !important;
  }
}

/* --- Point 23 : tuiles beiges vides dans la grille Actualités -------------- */
/* Trois blocs purement décoratifs rythment la mosaïque sur desktop. Empilés sur
   mobile, ils deviennent trois carrés beiges vides que le visiteur doit
   franchir. On ne masque que ceux qui ne portent NI texte NI lien : les tuiles
   de catégorie (« Chroniques d'agence », « Chantier »…) restent affichées. */
@media (max-width: 600px) {
  .entry-content .wp-block-cover.has-aspect-ratio:not(:has(p, a, h1, h2, h3, h4, h5, h6)) {
    display: none;
  }
}

/* --- Point 24 : bloc « Dans le même esprit » ------------------------------- */
/* 1. Le titre était en accent-1 (#F2EAE2, le beige) sur fond blanc : un rapport
      de contraste de 1,1:1, donc illisible. Il passe en gris de texte. */
.sliderProjet-titre,
.logo-projet > .wp-block-heading.has-accent-1-color {
  color: var(--wp--preset--color--contrast) !important;
}

/* 2. Les flèches débordaient du viewport (la précédente commençait à x = -2,
      la suivante finissait à 377 px pour un écran de 375) : la moitié de la
      zone tactile était hors écran. On les ramène dans la page et on les rend
      visibles sur un pastille claire. */
@media (max-width: 600px) {
  .sliderProjet .wp-block-query-pagination {
    padding-inline: 0;
  }
  .sliderProjet .wp-block-query-pagination-previous,
  .sliderProjet .wp-block-query-pagination-next {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--accent-1, #f2eae2);
    color: var(--wp--preset--color--contrast, #5f5f5f);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .sliderProjet .wp-block-query-pagination-previous { left: 0; }
  .sliderProjet .wp-block-query-pagination-next { right: 0; }
}
@media (hover: hover) {
  .sliderProjet .wp-block-query-pagination-previous:hover,
  .sliderProjet .wp-block-query-pagination-next:hover {
    background-color: var(--wp--preset--color--contrast, #5f5f5f);
    color: #fff;
  }
}

/* --- Point 25 : tuiles beiges qui ne recouvrent pas les portraits ---------- */
/* `.equipe-photo2` est en `position:absolute; inset:0`, mais `.equipe-photos`
   n'était pas positionné : la couche se calait donc sur le premier ancêtre
   positionné rencontré. Or GSAP applique des transformations à ces ancêtres,
   et une transformation crée un bloc conteneur — lequel diffère selon le
   moteur. D'où un recouvrement correct sous Chrome et partiel sur iPhone.
   `position:relative` fixe le référent une fois pour toutes. */
.equipe-photos {
  position: relative;
}

/* --- Point 29 : liens de contenu invisibles -------------------------------- */
/* Les liens dans le texte avaient la couleur du texte, le même poids et aucun
   soulignement : rien ne les distinguait avant le survol. Ce n'est pas un choix
   de design, c'est le défaut de WordPress, dont la feuille par défaut RETIRE le
   soulignement au survol au lieu d'en ajouter un.
   On souligne donc au repos, discrètement (trait fin, décalé), et le survol
   épaissit le trait. Les liens déjà stylés (boutons, tuiles, menus, fil
   d'Ariane, pagination) sont exclus pour ne pas cumuler deux effets. */
/* Uniquement `p > a` : les listes contiennent les tuiles de projets et
   d'actualites, qui sont deja des zones cliquables identifiables. Les souligner
   ajouterait un trait au milieu d'une carte. */
.entry-content p > a:not(.wp-element-button) {
  /* `!important` : WordPress pose `text-decoration:none !important` sur les
     liens via une regle de navigation dont la liste de selecteurs est large
     et attrape aussi les liens de contenu. Sans priorite, le soulignement
     n'apparait pas. */
  /* ⚠️ PROPRIETES DETAILLEES, PAS LE RACCOURCI. `text-decoration: underline`
     reinitialise AUSSI la couleur et l'epaisseur du trait ; porte en
     `!important`, ce raccourci ecrasait la couleur attenuee posee juste en
     dessous, et le trait sortait a pleine densite. Constate le 17/09 : le
     decalage s'appliquait bien (il n'appartient pas au raccourci), la couleur
     non. D'ou le decoupage ci-dessous, chaque propriete portant sa priorite. */
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  /* Trait discret : il descend un peu plus bas et s'eclaircit. Il reste percu
     comme un lien sans alourdir le paragraphe ; le survol le ramene a pleine
     densite. */
  text-underline-offset: 0.24em;
  text-decoration-color: color-mix(in srgb, currentColor 26%, transparent) !important;
  transition: text-decoration-color 0.3s ease;
}
@media (hover: hover) {
  .entry-content p > a:not(.wp-element-button):hover {
    text-decoration-color: currentColor !important;
  }
}

/* Accueil : pas de trait au repos (demande du 17/09). Le cartel est un bloc de
   composition, le soulignement y pesait trop.
   On garde le trait AU SURVOL : sans lui, le lien redeviendrait indistinguable
   du texte, ce qui etait precisement le point 29 de la recette. */
body.home .entry-content p > a:not(.wp-element-button) {
  text-decoration-color: transparent !important;
}
@media (hover: hover) {
  body.home .entry-content p > a:not(.wp-element-button):hover {
    text-decoration-color: currentColor !important;
  }
}


/* --- Page Agence : carres vides entre les portraits (mobile) -------------- */
/* Demande du 17/09/2026. Meme famille que le point 23, mais ces tuiles-la
   echappaient a la regle precedente : elles ne sont pas vides au sens du DOM,
   elles contiennent un PARAGRAPHE VIDE (`<p class="..."></p>`), heritage de
   l'editeur. Le `:not(:has(p))` du point 23 les excluait donc.
   On vise ici l'inverse : une couverture dont le seul contenu est un paragraphe
   vide. Les portraits sont exclus nommement car ils contiennent eux aussi un
   paragraphe vide (leur texte est porte par la couche `.equipe-photo2`), et la
   tuile de titre « L'equipe » est preservee par le `:not(:has(h1...h6))`. */
@media (max-width: 600px) {
  .entry-content .wp-block-cover.has-aspect-ratio:not(.equipe-photo1):not(.equipe-photo2):not(:has(a, h1, h2, h3, h4, h5, h6)):has(p:empty) {
    display: none;
  }
}


/* ========================================================================== */
/* Menu mobile : ouverture en cercle + entrées en cascade (17/09/2026)         */
/* ========================================================================== */
/* Avant : un simple fondu d'opacité de 0,3 s, sans rapport avec le geste du
   doigt. Ici le panneau se DÉPLOIE depuis le bouton qu'on vient de toucher, puis
   les rubriques montent une à une. Même principe que sur archicool, accordé à
   l'identité d'ocube : plus lent, plus posé, et le filigrane « menu » entre dans
   la danse.

   Le centre du cercle vient de --ocube-menu-x / --ocube-menu-y, posées par
   menu-scroll-lock.js au clic sur le burger. Les valeurs de repli correspondent
   à la position habituelle du bouton (haut droit), pour que l'effet reste juste
   même si le script ne tourne pas. */

@media (max-width: 600px) {

  /* --- Le panneau : un cercle qui s'ouvre depuis le burger ---------------- */
  .site-main-nav .wp-block-navigation__responsive-container {
    /* L'opacité ne sert plus à révéler : c'est le clip-path qui s'en charge.
       On la laisse à 1, sinon les deux effets se superposeraient et le panneau
       paraîtrait laiteux pendant toute l'ouverture. */
    opacity: 1;
    /* Un CARRE, pas un cercle : c'est la forme du site (les tuiles, le picto,
       le nom meme de l'agence). `inset()` decrit un rectangle par ses quatre
       retraits ; au depart les quatre se rejoignent sur le centre du burger,
       donc surface nulle. */
    clip-path: inset(
      var(--ocube-menu-y, 47px)
      calc(100% - var(--ocube-menu-x, calc(100% - 47px)))
      calc(100% - var(--ocube-menu-y, 47px))
      var(--ocube-menu-x, calc(100% - 47px))
    );
    transition:
      clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1),
      visibility 0s linear 0.7s;
  }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    opacity: 1;
    /* 150% et non 100% : le centre est dans un coin, il faut ce rayon pour que
       le cercle couvre la diagonale opposée. */
    /* On retranche la MEME distance aux quatre retraits : le carre grandit
       donc a la meme vitesse dans les quatre directions, au lieu de se
       deformer en rectangle. --ocube-menu-etendue est la distance du burger
       au bord le plus eloigne, calculee au clic : l'ecran est couvert pile a
       la fin de l'animation, ni avant ni apres. */
    clip-path: inset(
      calc(var(--ocube-menu-y, 47px) - var(--ocube-menu-etendue, 1200px))
      calc(100% - var(--ocube-menu-x, calc(100% - 47px)) - var(--ocube-menu-etendue, 1200px))
      calc(100% - var(--ocube-menu-y, 47px) - var(--ocube-menu-etendue, 1200px))
      calc(var(--ocube-menu-x, calc(100% - 47px)) - var(--ocube-menu-etendue, 1200px))
    );
    transition:
      clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1),
      visibility 0s;
  }

  /* --- Le filigrane « menu » : il arrive après, en se posant --------------- */
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open::before {
    animation: ocube-menu-filigrane 1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }

  /* --- Les rubriques : elles montent une à une ---------------------------- */
  /* État de départ posé sur le conteneur FERMÉ aussi : à la fermeture, tout
     revient instantanément à zéro, prêt pour la prochaine ouverture. */
  .site-main-nav .wp-block-navigation__responsive-container .wp-block-navigation-item,
  .site-main-nav .wp-block-navigation__responsive-container .site-overlay-brands,
  .site-main-nav .wp-block-navigation__responsive-container .site-overlay-socials {
    opacity: 0;
    transform: translateY(22px);
  }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .site-overlay-brands,
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .site-overlay-socials {
    animation: ocube-menu-entree 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* Cascade : le cercle met 0,7 s à s'ouvrir, les rubriques démarrent à 0,26 s
     pour que le mouvement se chevauche au lieu de s'enchaîner sèchement. */
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.26s; }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.33s; }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.40s; }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.47s; }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.54s; }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+6) { animation-delay: 0.60s; }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .site-overlay-brands  { animation-delay: 0.66s; }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open .site-overlay-socials { animation-delay: 0.72s; }
}

@keyframes ocube-menu-entree {
  to { opacity: 1; transform: none; }
}
@keyframes ocube-menu-filigrane {
  from { opacity: 0; transform: translateX(-50%) scale(1.06); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* --- Mouvement réduit : on garde un fondu sobre, sans déplacement ---------- */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .site-main-nav .wp-block-navigation__responsive-container {
    clip-path: none;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    clip-path: none;
    opacity: 1;
    transition: opacity 0.25s ease, visibility 0s;
  }
  .site-main-nav .wp-block-navigation__responsive-container .wp-block-navigation-item,
  .site-main-nav .wp-block-navigation__responsive-container .site-overlay-brands,
  .site-main-nav .wp-block-navigation__responsive-container .site-overlay-socials {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .site-main-nav .wp-block-navigation__responsive-container.is-menu-open::before {
    animation: none !important;
  }
}

/* Pendant une transition de page AJAX, le panneau est masqué par le rideau :
   la fermeture doit être sèche, sinon on aperçoit le cercle se refermer quand
   le rideau se retire. */
html.is-navigating .site-main-nav .wp-block-navigation__responsive-container {
  transition: none !important;
}
html.is-navigating .site-main-nav .wp-block-navigation__responsive-container .wp-block-navigation-item {
  animation: none !important;
}


/* --- Fil d'Ariane sur mobile : coupures propres (17/09/2026) --------------- */
/* Signale sur la fiche « Complexe padel indoor » : le fil s'etalait sur trois
   lignes AVEC des coupures au milieu des libelles (« Lieux / accueillant > /
   du public »), ce qui le rendait illisible dans son cadre.
   Deux corrections :
   1. chaque maillon devient insecable : on ne coupe plus qu'ENTRE deux maillons ;
   2. la typo est resserree pour gagner une ligne sur les titres longs.
   On ne retire aucun maillon : la hierarchie reste entiere, c'est la mise en
   page qui s'adapte. */
@media (max-width: 600px) {
  .yoast-breadcrumbs {
    font-size: 12px;
    line-height: 1.45;
  }
  .yoast-breadcrumbs > span > span,
  .yoast-breadcrumbs > span > a {
    display: inline-block;
    white-space: nowrap;
  }
  /* Indispensable avec le `nowrap` ci-dessus : le cadre borde se dimensionne
     sur son contenu (il est place dans un conteneur flex vertical aligne au
     depart, donc en largeur « fit-content »). Des lors qu'un maillon devient
     insecable, la largeur minimale du contenu augmente et le cadre DEBORDE de
     l'ecran au lieu de passer a la ligne : mesure a 427 px pour 375 px d'ecran.
     En le bornant, le retour a la ligne se fait la ou on le veut, entre deux
     maillons. */
  .wp-block-group:has(> .yoast-breadcrumbs) {
    max-width: 100%;
  }
  .yoast-breadcrumbs {
    max-width: 100%;
  }
  /* Le conteneur des maillons est en `display:flex` (regle du theme), donc en
     `flex-wrap:nowrap` par defaut : les maillons ne pouvaient PAS passer a la
     ligne, ils sortaient du cadre et se faisaient couper par son
     `overflow:hidden`. On autorise le retour a la ligne, et l'interligne evite
     que les deux rangees se touchent. */
  .yoast-breadcrumbs > span {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 3px;
    /* Le premier maillon (« Accueil ») est rendu comme le picto carre de
       l'agence, 62 x 50 px. Tant qu'il restait dans le flux, les lignes
       suivantes du fil repassaient DESSOUS des qu'il y avait un retour a la
       ligne. On lui reserve donc sa colonne : il sort du flux, et le reste du
       fil est decale d'autant. Le texte garde ainsi son propre bloc, quel que
       soit le nombre de lignes. (17/09/2026.) */
    position: relative;
    padding-left: 67px;
    min-height: 50px;
    align-content: center;
  }
  .yoast-breadcrumbs > span > span:first-child {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}


/* --- Equipe : le calque beige doit couvrir la photo, sans exception --------- */
/* Recette point 25. Corrige une premiere fois le 16/09 en donnant un
   `position: relative` au groupe (le calque se calait sinon sur un ancetre
   transforme par GSAP). Toujours signale sur iPhone le 17/09, capture a l'appui :
   le beige est colle en haut, en retrait EGAL a gauche et a droite, et trop
   court en bas.
   Cette geometrie est signante : c'est celle d'un carre impose, recentre par des
   marges automatiques, dans une boite qui n'est pas carree. Les DEUX couches
   portent `aspect-ratio: 1` ; il suffit que la photo ne fasse pas exactement un
   carre sur ce moteur pour que le calque, lui, reste carre et se recentre a
   l'interieur.
   On retire donc toute contrainte de forme et de largeur au calque : puisqu'il
   est en `position: absolute`, `inset: 0` doit suffire a le faire epouser la
   boite, quelle que soit sa forme. Les marges automatiques posees par la mise en
   page « contrainte » de WordPress sont neutralisees pour la meme raison.
   Non reproduit sous Chrome : ce correctif retire la cause probable plutot qu'il
   ne corrige un symptome observe. A confirmer sur iPhone. */
.equipe-photos > .equipe-photo2 {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}