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


#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;
    transition: 0.5s all 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;
	}
}