/*
Theme Name: Harvest
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: HARVEST
Author URI: https://wordpress.org
Description: 
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Template: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/
@import url("https://use.typekit.net/coa5avj.css");
html, body {
	background-color:rgb(26,26,26);
    overflow-x: hidden !important;
    width: 100% !important;
    overscroll-behavior: none;
	min-height: 100vh;
	cursor: none;
}	
a, a:focus, a:active {
    outline: 0 !important;
    cursor: none;
}
/* Cacher juste les éléments animés tant que le JS n'a pas fini */
html.is-prep .flair,
html.is-prep section.intro .title,
html.is-prep .circle.one,
html.is-prep .circle.two,
html.is-prep .line-inner,
html.is-prep .pages_title,
html.is-prep .cultive { visibility: hidden; }
section.intro { position: relative; }
section.intro .title { position: relative; z-index: 2; }
section.intro .lines { position: relative; z-index: 1; }
.lines .line-inner { display: inline-block; will-change: transform; }
.wp-block-navigation a:where(:not(.wp-element-button)):focus,
.wp-block-post-title a:where(:not(.wp-element-button)):focus,
.wp-block-site-title a:where(:not(.wp-element-button)):focus,
a:where(:not(.wp-element-button)):focus {
  text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover, .current-menu-item{
	color: white;
}
body:not(.light) .post-type-archive-projets .projets{
	color: white;
}
body.light{
	background-color:#F2EBD7;
	background: #F2EBD7;
}
.light .circles{	opacity: 0.1;}
.light {
	& .title,
	& --wp--preset--color--contrast,
	& h1, 
	& h2, 
	& h3, 
	& h4, 
	& h5, 
	& h6,
	& .has-contrast-color
	
	{color: var(--wp--preset--color--base) !important; 
		
	}
}
.light{
		& .wp-block-site-logo
		{ background-color: var(--wp--preset--color--base) !important;
			
		}
}
/*
body:not(.wp-admin){
	cursor: none;	
}
*/
/* section{ min-height: 100vh; } */
header{position: fixed; width: 100%; z-index: 9999999; transition: 0.3s all ease-in-out; background-color:transparent; top:0;}
header .heading .wp-block-site-logo{ transition: 0.4s all cubic-bezier(0.50, 0, 0.58, 1);}
header .heading .wp-block-site-logo { height: 237px; width: 101px; transform-origin: top left;   mask: url(/wp-content/uploads/logo_harvest.svg) no-repeat  top left; background-color: var(--wp--preset--color--contrast); -webkit-mask: url(/wp-content/uploads/logo_harvest.svg) no-repeat  top left; mask-size: contain; }
header .heading .wp-block-site-logo img{ transition: 0.4s all cubic-bezier(0.50, 0, 0.58, 1); opacity: 0; height: 237px; width: 101px;}
header.main-tool-bar--scrolled{ background: rgba(0, 0, 0, 0.14); backdrop-filter: blur(10px); } 
header.main-tool-bar--scrolled .heading .wp-block-site-logo { transform-origin: top left;  height: 80px;  }
header.main-tool-bar--scrolled .heading .wp-block-site-logo { mask: url(/wp-content/themes/ha/img/logo_harvest_mini.svg) no-repeat top left;  -webkit-mask: url(/wp-content/themes/ha/img/logo_harvest_mini.svg) no-repeat  top left;  mask-size: contain;  }
header.main-tool-bar--scrolled .heading nav li{ font-size: 1rem !important; padding: 11px 0px;}
header.main-tool-bar--scrolled .wp-block-site-logo img{ width: 45px; height: 118px;  }
header.open{height: 100%;}
.logo svg {
    fill: red;
}
.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; }
.content--scrolled #linear-gradient{ }
h1{ opacity: 0;}
.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgb(26,26,26);
  overflow: hidden;
  z-index: 1;
  top:0;
  z-index: 999999;
  opacity: 0;
}
.smooth-content{ visibility: hidden;}
section.two{ margin-top: -50vh;}
@media screen and (min-width: 600px) {
	:not(.wp-admin) .flair {
	  width: 70px;
	  height: 70px;
	  position: fixed;
	  pointer-events: none;
	   top: 0;
	  left: 0;
	    transition: opacity 0.3s ease;
	    z-index: 10000;
	}
	.flair{
		cursor: none;
	}
	
	.flair svg {
	  width: 100%;
	  height: 100%;
	}
	
	.flair #currentShape {
	  fill: #FFD07B; /* Couleur de la forme */
	}
}
@media screen and (max-width: 600px) {
	.flair{ display: none;}
}	
mark a{ position: relative;}
mark a{
	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;
} 
/* .switch{ display: block; width: 30px; height: 30px; position: absolute; background-color: fuchsia; top: 200px; right: 200px;} */
.siteWeb figure:before{content:''; background-color: #262626; border-radius: 25px 25px 0px 0px; height: 43px; width: 100%; display: block;}
.grid img{ border-radius: 20px;}
.citation > div {
  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;
  /*   margin-bottom: -250px; */
/*
  margin-left: 50px;
  line-height: 1.2;
*/
  /*   outline: 6px dotted teal; */
/*   font-size: 10vw; */
}
.wp-block-spacer{
	background-color:  var(--wp--preset--color--contrast);
}
.projets a{
	transition: all 0.3s ease;
	background-size: 0;
}
.projets a:hover{
	
/*
	background-size: 100%;
		background-color: var(--wp--preset--color--contrast);
*/
}
.projets a h2{
	padding: 0;
	transition: all 0.3s ease;
}	
.projets a:hover h2{
	padding-left: 10px;
	color: var(--wp--preset--color--primary);
}
.imgQui img{
	max-height: 90vh;
/* 	overflow: auto; */
	vertical-align: top;
}
.gradient{
	background: -webkit-linear-gradient(var(--wp--preset--color--base), #313131);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.accordion {
  width: 250px;
  margin: 15px;
  box-shadow: 0 8px 17px rgba(0,0,0,.2);
}
.accordion-menu {
  color: white;
  padding: 10px;
  cursor:pointer!important;
  user-select: none;
  position:relative;
}
.accordion-content {
  height: 0;
  overflow: hidden;
  font-size: 14px;
  width: 60%;
}
.accordion-content.expanded {
  height: 0;
  overflow: hidden;
}
.accordion-plus,
.accordion-minus{
  position:absolute;
  top:7px;
  right:8px;
}
p {
  margin: 10px;
}
.selected{ color: var(--wp--preset--color--custom-rose-cp) !important; }
.exp .line{transition: all ease-in-out .5s; cursor: pointer; transform-origin: left;}
.exp .line:hover{transform: scale(1.1); }
.exp .line{transition: all ease-in-out .5s;}
/* évite les reflows au scroll des lignes */
.lines { will-change: transform; }
/* évite les superpositions de ligne pendant/juste après SplitText */
.lines { position: relative; }
.line-inner{
  display: inline-block;      /* empêche le "collage" vertical */
  will-change: transform;
}
/* boîte qui clippe chaque ligne */
.split-line, .line-wrap, .line { /* selon le nom que tu utilises, ici on cible large */
  display:block;
  overflow:hidden;
}
/* notre “inner” animé */
.line-inner{
  display:inline-block;
  transform: translate3d(0,0,0);
  backface-visibility:hidden;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 1213px) {
.basline{min-width:445px!important;}
}
@media (max-width: 650px) {
	.circle.one{ top: 15vh; right: -47vw;}
	.circle.two{ left: -15vw;}
	.circle svg{ height: 60vw;}
	.creativite, .savoir-faire{
		left: 0 !important;
	}
	.bleu-ligne, .beige-ligne{
		display:none;
	}
	.ginput_container_consent {
		padding-top: 0rem !important;
	}
}	
.get-on-front{
	position: relative;
	z-index: 3;
}
.ligne-verte {
  position: relative;
  bottom: 10rem;          /* fait dépasser la ligne en dessous de l’image */
  left: 50%;              /* centrée horizontalement */
  transform: translateX(-50%);
  width: 1rem;             /* épaisseur de la ligne */
}
.beige-ligne{
  position: relative;
  bottom: 18rem;          /* fait dépasser la ligne en dessous de l’image */
  left: 50%;              /* centrée horizontalement */
  transform: translateX(-50%);
  width: 2rem; 
}
.bleu-ligne{
  position: relative;
  bottom: -7rem;          /* fait dépasser la ligne en dessous de l’image */
  left: 50%;              /* centrée horizontalement */
  transform: translateX(-50%);
  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;
}
.gform_wrapper .ginput_container input{
	background: none;
	border-right: none;
	border-left: none;
	border-top: none;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}
.contact .message .gform-field-label, .email .gform-field-label, .nom .gform-field-label, .telephone .gform-field-label {
	font-size: 2rem !important;
    font-weight: 400 !important;
}
.gform_wrapper .ginput_container textarea{
	background: none;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}
.ginput_container_consent {
	padding-top: 3rem;
}
.gform_button{
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 20px;
	border: none;
	padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;
    font-size: medium;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
	font-weight: 600;
}
.gfield_consent_label::after{
	content: "*";
	position: relative;
	color: #FFD07B;
	font-weight: bold;
	font-size: 1rem;
    top: -0.5rem;
}
.gfield_required::before{
	content: "*";
	position: relative;
	color: #FFD07B;
	font-weight: bold;
	font-size: 1rem;
    top: -1rem;
}
.gfield_required_text {
	display: none !important;
}
/* La transition de ce survol etait declaree ICI, sur :hover : elle remplacait
   donc celle du bloc « ROLLOVER DES BOUTONS » au moment precis ou --ha-r doit
   s'animer, et le remplissage sautait. Ce survol ne pose plus que le transform,
   la transition (--ha-r, color, transform) vient du bloc rollover. */
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover {
  transform: scale(1.05);
}
.contact-page .circle.one, .contact-page .circle.two{
	display: flex;
	position: relative !important;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
    transform: rotate(90deg) !important;
}
.contact-page .circle.one{
	right: -13.7vw !important;
}
.contact-page .circle.two{
	left: -13.7vw;
    top: -7vh;
}
.panel .marquee-track{
  display: flex;
  gap: clamp(2rem, 6vw, 8rem); /* espace entre mots */
  will-change: transform;
  transform: translate3d(0,0,0);
}
.panel .wp-block-heading{
  white-space: nowrap;
  display: inline-block;
}
section.for {
  position: relative;
  overflow: visible; /* pour éviter un scroll horizontal pendant l’entrée */
}
/* Les mots restent au-dessus */
section.for .panel {
  position: relative;
  z-index: 2;
}
/* Conteneurs des SVG */
section.for .svg1,
section.for .svg2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  display: grid;
  place-items: center;
}
/* SVG1 à gauche */
section.for .svg1 {
  left: 0;
}
/* SVG2 à droite */
section.for .svg2 {
  right: 0;
}
/* Taille des SVG : plus petite */
section.for .svg1 svg,
section.for .svg2 svg {
  width: min(35vw, 50vw); /* chacun prend ~35% de largeur max */
  height: auto;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
/* Zone projets + on cache les featured en liste */
.page-projets-scope .wp-block-post-featured-image{ display:none !important; }
/* Vignette qui suit la souris (app.js, projetsSurvol) : un cadre rond dans
   lequel les images des projets se succèdent en couches */
.cursor-sidecar{
  position: fixed; top:0; left:0;
  width: clamp(170px, 18vw, 320px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  pointer-events: none;
  z-index:100;              /* sous .flair */
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
body.light .cursor-sidecar{ box-shadow: 0 18px 50px rgba(26,26,26,.22); }
/* clip-path en plus de overflow:hidden : Safari ne rogne pas toujours au rayon
   des enfants animés */
.cursor-sidecar__cadre{
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}
.cursor-sidecar__img{
  position: absolute; inset: 0;
  background: center/cover no-repeat;
}
/* --- Projects slider : 2 pages de 3 projets, flèches + points --- */
/* Les seuils 1024 / 650 sont repris tels quels dans app.js (fonction perView) :
   toute modification ici doit y être reportée, sinon le nombre de points ne
   correspond plus au nombre de pages réellement affichées. */
.projects-as-slider {
  position: relative;
}
/* viewport créé par le JS pour isoler le track */
.projects-as-slider .slider-viewport {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  outline: none;
}
/* la UL d’origine devient le track horizontal */
.projects-as-slider .slider-track {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
  will-change: transform;
  touch-action: pan-y;
}
/* chaque LI occupe 1/3 du viewport : 6 projets = 2 pages */
.projects-as-slider .slider-track > li.wp-block-post {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  margin: 0;
  padding-inline: clamp(6px, 0.9vw, 14px);
  box-sizing: border-box;
  transform-origin: center center;
}
.projects-as-slider .wp-block-post-template > li + li {
  margin-block-start: 0;
}
.projects-as-slider .wp-block-tiptip-hyperlink-group-block {
  display: block;
  height: 100%;
}
/* Harmonise l’intérieur (cover plein cadre) */
.projects-as-slider .wp-block-cover {
  min-height: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
}
.projects-as-slider .wp-block-cover__image-background {
  object-fit: cover;
}
/* Voile + titre du projet au survol */
.projects-as-slider .wp-block-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(26, 26, 26, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.projects-as-slider li.wp-block-post:hover .wp-block-cover::after {
  opacity: 1;
}
/* core pose z-index:1 via un selecteur en (0,5,1)
   (body:not(.editor-styles-wrapper) .wp-block-cover:not(:has(...)) .wp-block-cover__inner-container) :
   sans !important le voile ::after, peint en dernier a z-index egal, recouvre le titre */
.projects-as-slider .wp-block-cover .wp-block-cover__inner-container {
  z-index: 2 !important;
}
.projects-as-slider .wp-block-post-title {
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.45rem);
  line-height: 1.2;
  color: var(--wp--preset--color--contrast);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.projects-as-slider li.wp-block-post:hover .wp-block-post-title {
  opacity: 1;
  transform: none;
}
/* le mode jour force h1-h6 en sombre (règle .light plus haut) : le titre est posé
   sur un voile sombre au-dessus de la photo, il doit rester crème dans les 2 modes */
body.light .projects-as-slider .wp-block-post-title {
  color: var(--wp--preset--color--contrast) !important;
}
/* pas de survol au doigt : titre et voile restent visibles */
@media (hover: none) {
  .projects-as-slider .wp-block-cover::after { opacity: 1; }
  .projects-as-slider .wp-block-post-title { opacity: 1; transform: none; }
}
/* Flèches + points */
.projects-as-slider .slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: clamp(0.5rem, 1.2vw, 1rem);
  color: var(--wp--preset--color--contrast);
}
body.light .projects-as-slider .slider-nav {
  color: rgb(26, 26, 26);
}
.projects-as-slider .slider-nav button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
}
.projects-as-slider .slider-nav .slider-prev,
.projects-as-slider .slider-nav .slider-next {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.projects-as-slider .slider-nav .slider-prev svg,
.projects-as-slider .slider-nav .slider-next svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.projects-as-slider .slider-nav .slider-prev:hover:not(:disabled):not(.ha-roll),
.projects-as-slider .slider-nav .slider-next:hover:not(:disabled):not(.ha-roll) {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
body.light .projects-as-slider .slider-nav .slider-prev:hover:not(:disabled):not(.ha-roll),
body.light .projects-as-slider .slider-nav .slider-next:hover:not(:disabled):not(.ha-roll) {
  background: rgb(26, 26, 26);
  color: var(--wp--preset--color--contrast);
}
.projects-as-slider .slider-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}
.projects-as-slider .slider-dots {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.projects-as-slider .slider-dots .slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.projects-as-slider .slider-dots .slider-dot:hover {
  opacity: 0.6;
}
.projects-as-slider .slider-dots .slider-dot.is-active {
  opacity: 1;
  transform: scale(1.25);
}
/* 2 par page sous 1024, 1 par page sous 650 (cf. perView dans app.js) */
@media (max-width: 1023px) {
  .projects-as-slider .slider-track > li.wp-block-post {
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media (max-width: 649px) {
  .projects-as-slider .slider-track > li.wp-block-post {
    flex-basis: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }
  /* la home empile 3 groupes has-global-padding : 72 px de chaque cote, soit
     247 px utiles sur un ecran de 375. On ressort le viewport en pleine largeur
     (l'ancien slider utilisait deja 100vw) ; la nav, elle, reste dans la colonne. */
  .projects-as-slider .slider-viewport {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .projects-as-slider .wp-block-cover { aspect-ratio: 4 / 3; }
  .projects-as-slider .slider-nav { gap: 1rem; }
}
/* Désactive l’ancienne marge/flow de la Query Loop */
.projects-as-slider .wp-block-post-template {
  margin: 0; padding: 0; list-style: none;
}
@media (pointer: coarse){ .cursor-sidecar{ display:none !important; } }
/* aide le GPU */
[data-reveal],[data-parallax],[data-item]{ will-change: transform, opacity; transform: translateZ(0); }
/* évite saut lors d’apparition */
/* img[loading="lazy"]{ aspect-ratio: attr(width) / attr(height); } */
/* ==============================================
   TRANSITION MODE JOUR / NUIT
   ============================================== */
body,
body *,
body ::before,
body ::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease;
}
/* Freeze all transitions during mode switch (set via JS for one frame) */
.ha-no-transition,
.ha-no-transition * {
  transition: none !important;
}
/* Pas de transition sur les éléments animés GSAP ni sur les SVG */
.flair, .flair *, .circles, .circles *,
.loading, .ha-mode-toggle svg,
[data-reveal], [data-parallax], [data-item] {
  transition: none !important;
}
/* ==============================================
   ANTI-FOUC : fond beige via data-theme avant body.light
   ============================================== */
[data-theme="light"],
[data-theme="light"] body {
  background-color: #F2EBD7 !important;
}
/* ==============================================
   MODE JOUR : compléments
   ============================================== */
body.light {
  color: rgb(26, 26, 26);
}
/* Header scrolled */
.light header.main-tool-bar--scrolled {
  background: rgba(242, 235, 215, 0.85) !important;
}
/* Navigation */
.light .wp-block-navigation a,
.light .wp-block-navigation a:where(:not(.wp-element-button)) {
  color: rgb(26, 26, 26) !important;
}
.light .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.light .current-menu-item {
  color: rgb(26, 26, 26) !important;
}
/* Titres et textes projets */
.light .projets a h2,
.light p {
  color: rgb(26, 26, 26);
}
/* Citation gradient inversé */
.light .citation > div {
  background: linear-gradient(
    to right,
    rgb(26, 26, 26) 50%,
    #F2EBD7 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
/* Mark/liens soulignés */
.light mark a {
  background:
    linear-gradient(to right, rgb(26,26,26), rgb(26,26,26)),
    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;
}
/* Séparateurs */
.light .wp-block-spacer {
  background-color: rgb(26, 26, 26);
}
/* Formulaire contact */
.light .gform_wrapper .ginput_container input,
.light .gform_wrapper .ginput_container textarea {
  border-color: rgb(26, 26, 26);
  color: rgb(26, 26, 26);
}
.light .gform_button {
  background-color: rgb(26, 26, 26);
  color: #F2EBD7;
}
/* Gradient de texte */
.light .gradient {
  background: -webkit-linear-gradient(rgb(26,26,26), #a09070);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Écran de chargement */
.light .loading {
  background-color: #F2EBD7;
}
/* ==============================================
   BOUTON TOGGLE MODE JOUR / NUIT
   ============================================== */
.ha-mode-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999990;
  background: none;
  border: none;
  padding: 0.4rem;
  cursor: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--wp--preset--color--contrast);
  opacity: 0.65;
  transition: opacity 0.3s ease !important;
}
.ha-mode-toggle:hover {
  opacity: 1;
}
.ha-mode-toggle__label {
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: currentColor;
  font-family: inherit;
  transition: none !important;
}
/* Icônes jour / nuit */
.ha-toggle-icon--night { display: block; }
.ha-toggle-icon--day   { display: none; }
body.light .ha-toggle-icon--night { display: none; }
body.light .ha-toggle-icon--day   { display: block; }
/* Couleur en mode jour */
body.light .ha-mode-toggle {
  color: rgb(26, 26, 26);
}
@media (max-width: 600px) {
  .ha-mode-toggle {
    bottom: 1rem;
    right: 1rem;
  }
}
/* Navigation mode jour : forcer texte sombre */
.light .wp-block-navigation a,
.light .wp-block-navigation a:where(:not(.wp-element-button)),
.light .wp-block-navigation .wp-block-navigation-item__content {
  color: rgb(26, 26, 26) !important;
  opacity: 1 !important;
}
/* Fix has-primary-color links in day mode */
.light .has-primary-color,
.light .has-primary-color a,
.light mark.has-primary-color a,
.light .has-inline-color.has-primary-color {
  color: rgb(26, 26, 26) !important;
}


/* Projets archive : espace au-dessus du titre */
.post-type-archive-projets .smooth-content .wp-block-group:has(> .pages_title) {
  margin-top: 20vh;
}

/* Logos _beige en mode jour */
body.light img[src*=_beige] {
  filter: brightness(0) opacity(0.75);
}


/* Titre « Cultiver » (accueil) : SplitText découpe le mot en <div> lettre par lettre,
   et le navigateur peut donc passer à la ligne entre deux lettres. On rend chaque mot
   insécable et on borne la taille pour qu'il tienne dans la colonne (3 groupes imbriqués
   à 24px de padding = 72px de chaque côté) sur les petits écrans (< 392px).
   Au-delà, la taille fluide du thème reprend la main via min(). */
.cultive > div { white-space: nowrap; }
.cultive.has-xx-large-font-size {
  font-size: min(var(--wp--preset--font-size--xx-large), calc((100vw - 9rem) / 3.45)) !important;
}

/* Menu mobile (burger + panneau) selon le mode.
   Le plugin gsap-hamburger-menu peint les barres en var(--wp--preset--color--contrast)
   (crème) et le panneau en var(--wp--preset--color--base) (sombre) ; ces deux variables
   ne changent pas en mode jour, seul body.light est ajouté. L'animation GSAP écrit en
   plus un background-color inline sur bar1/bar3 qui survit au changement de mode, d'où
   les !important.
   Mode nuit : barres crème, panneau sombre, croix blanche gérée par GSAP (.is-open).
   Mode jour : panneau crème, barres et croix sombres dans tous les états. */
@media (max-width: 600px) {
  .ghm-hamburger:not(.is-open) .bar {
    background-color: var(--wp--preset--color--contrast) !important;
  }
  body.light .ghm-hamburger .bar {
    background-color: rgb(26, 26, 26) !important;
  }
  body.light .ghm-menu-mobile {
    background: var(--wp--preset--color--contrast);
    box-shadow: -4px 0 12px rgba(26, 26, 26, 0.18);
  }
}

/* Pied de page, coordonnées (mail / adresse / téléphone) : les trois lignes sont posées à
   6rem dans le template part, ce qui donne ~51,5px sur mobile. "welcome@harvest.agency"
   est insécable et mesure 11,1 fois la taille de police, soit 576px pour 327px de colonne :
   il débordait donc hors du cadre, et le téléphone passait sur deux lignes.
   On borne la taille sur la largeur réellement disponible (100vw moins le padding du
   groupe, clamp(1.5rem, 5vw, 2rem) de chaque côté, majoré à 2rem) divisée par le ratio
   du mail. La borne rejoint la taille naturelle vers 1024px, donc pas de rupture visible
   au point de bascule, et le desktop n'est pas touché. */
@media (max-width: 1024px) {
  footer .box-c > div[style*="font-size"],
  footer .box-c > p[style*="font-size"] {
    font-size: calc((100vw - 4rem) / 11.6) !important;
  }
}

/* Titres de page (.pages_title) sur mobile : le header est fixe et son logo mesure
   237px de haut (règle plus haut) tant qu'on n'a pas scrollé, alors que les cinq pages
   concernées posent le titre à margin-top:13vh, ce qui le fait démarrer vers 200px.
   Le titre passait donc sous le logo. On force la marge de son groupe à 176px : le
   titre commence à 264px, soit 27px sous le logo. Au-delà de 600px, la marge naturelle
   (13vh, ou spacing|80 selon le plus grand) dégage déjà le logo. */
@media (max-width: 600px) {
  .entry-content .wp-block-group:has(> .pages_title) {
    margin-top: 176px !important;
  }
}

/* ==============================================
   MENUS VERTICAUX DE CONTENU (pages agence)
   Filets de séparation + roll hover maison : au survol de la liste les items
   non survolés s'estompent, celui sous le curseur reste plein. Les deux règles
   ont la même spécificité, c'est l'ordre qui tranche (la seconde gagne).
   Portée à `main` : le menu d'en-tête et le panneau mobile (posé sur <body>)
   ne sont pas concernés.
   ============================================== */
main .wp-block-navigation__container.is-vertical {
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(242, 235, 215, 0.22);
  border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
main .wp-block-navigation__container.is-vertical > li.wp-block-navigation-item {
  display: block;
  width: 100%;
  border-bottom: 1px solid rgba(242, 235, 215, 0.22);
  border-bottom-color: color-mix(in srgb, currentColor 22%, transparent);
}
main .wp-block-navigation__container.is-vertical > li .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7em 0;
  transition: opacity 0.3s ease, padding-left 0.3s ease;
}
main .wp-block-navigation__container.is-vertical > li .wp-block-navigation-item__content::after {
  content: "→";
  flex: 0 0 auto;
  font-size: 0.8em;
  line-height: 1;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* sur tactile un :hover reste collé après le tap : on n'anime qu'au vrai survol */
@media (hover: hover) {
  main .wp-block-navigation__container.is-vertical:hover > li .wp-block-navigation-item__content {
    opacity: 0.45;
  }
  main .wp-block-navigation__container.is-vertical > li .wp-block-navigation-item__content:hover {
    opacity: 1;
    padding-left: 0.5rem;
  }
  main .wp-block-navigation__container.is-vertical > li .wp-block-navigation-item__content:hover::after {
    opacity: 1;
    transform: none;
  }
}

/* ==============================================
   PAGES DE TEXTE LONG (mentions légales, confidentialité)
   Le thème pose --wp--style--block-gap: 0rem : sans ces règles, titres,
   paragraphes et listes sont collés et les puces ne sont pas décalées.
   ============================================== */
.ha-texte-legal {
  max-width: 74ch;
}
.ha-texte-legal > * + * {
  margin-top: 1.15em;
}
.ha-texte-legal h2 {
  margin-top: 2.6em;
  margin-bottom: 0;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.25;
  font-weight: 700;
}
.ha-texte-legal > h2:first-child {
  margin-top: 0;
}
.ha-texte-legal h2 + * {
  margin-top: 0.7em;
}
.ha-texte-legal p {
  line-height: 1.75;
}
.ha-texte-legal ul {
  margin-top: 1.15em;
  padding-left: 1.5em;
  list-style: disc outside;
}
.ha-texte-legal li {
  margin-top: 0.75em;
  padding-left: 0.3em;
  line-height: 1.7;
}
.ha-texte-legal li:first-child {
  margin-top: 0;
}
.ha-texte-legal li::marker {
  color: var(--wp--preset--color--primary, #ffd07b);
}
.ha-texte-legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) {
  .ha-texte-legal a { transition: opacity 0.3s ease; }
  .ha-texte-legal a:hover { opacity: 0.6; }
}

/* Liens légaux du pied de page : même discrétion que la ligne de crédit voisine,
   qui est posée en #f2ebd836 (crème à 21 %) en style en ligne. */
footer .ha-liens-legaux,
footer .ha-liens-legaux a {
  color: #f2ebd836;
}
footer .ha-liens-legaux a {
  text-decoration: none;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  footer .ha-liens-legaux a:hover { color: #f2ebd7bf; }
}
/* Pas de variante mode jour : la bande basse du pied de page porte
   has-black-background-color, elle reste NOIRE dans les deux modes. Des liens
   sombres y étaient invisibles. */

/* ScrollSmoother mesure le contenu par offsetHeight, qui n'inclut pas la marge
   basse de .smooth-content : environ 72 px du bas du pied de page restent donc
   hors d'atteinte même au défilement maximum. Invisible tant que la dernière
   colonne était vide, mais elle porte maintenant les liens légaux. */
footer.wp-block-template-part {
  padding-bottom: clamp(6rem, 9vh, 8rem);
}

/* ==============================================
   ROLLOVER DES BOUTONS : le remplissage part du curseur
   Le cercle est un radial-gradient centré sur le point d'entrée du pointeur
   (--ha-x / --ha-y, posées par app.js) dont le rayon --ha-r est animé.
   @property est indispensable : sans déclaration typée, une variable CSS n'est
   pas interpolable et le remplissage serait instantané.
   `circle at X Y` sans taille = farthest-corner, donc 100 % atteint exactement
   le coin le plus éloigné du curseur : aucun rayon à calculer en JS.
   Sans JS, l'effet part du centre du bouton, ce qui reste correct.
   ⚠ La liste de sélecteurs ci-dessous est reprise telle quelle dans app.js
   (fonction boutonsRollover) : les deux doivent rester en phase.
   ============================================== */
@property --ha-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.wp-block-button__link,
.gform_button,
.hv-ck__b,
.projects-as-slider .slider-nav .slider-prev,
.projects-as-slider .slider-nav .slider-next {
  --ha-x: 50%;
  --ha-y: 50%;
  --ha-r: 0%;
  /* Gris très sombre, et surtout PAS le #1a1a1a du fond de page (le bouton
     disparaîtrait) ni le doré #ffd07b (le curseur maison est doré : on aurait
     doré sur doré et plus de curseur visible). Le crème est exclu pour la même
     raison. Ce gris chaud garde la silhouette du bouton et fait ressortir le
     curseur comme le texte. */
  --ha-fill: #33322d;
  --ha-fill-text: #ffffff;
  background-image: radial-gradient(circle at var(--ha-x) var(--ha-y),
    var(--ha-fill) var(--ha-r), rgba(0, 0, 0, 0) calc(var(--ha-r) + 0.8%));
  background-repeat: no-repeat;
  transition: --ha-r 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.28s ease 0.08s,
              border-color 0.4s ease,
              transform 0.3s ease;
}
@media (hover: hover) {
  .wp-block-button__link:hover,
  .wp-block-button__link:focus-visible,
  .gform_button:hover,
  .gform_button:focus-visible,
  .hv-ck__b:hover,
  .hv-ck__b:focus-visible,
  .projects-as-slider .slider-nav .slider-prev:hover:not(:disabled),
  .projects-as-slider .slider-nav .slider-prev:focus-visible,
  .projects-as-slider .slider-nav .slider-next:hover:not(:disabled),
  .projects-as-slider .slider-nav .slider-next:focus-visible {
    --ha-r: 102%;
    /* !important obligatoire : WordPress genere ses classes de couleur de preset
       avec !important (.has-base-color { color: … !important }), ce qui gagnait
       sur cette regle. En mode nuit le texte restait donc sombre sur le
       remplissage sombre au lieu de passer en blanc. */
    color: var(--ha-fill-text) !important;
  }
}
/* Même remplissage pour tous les boutons, pleins comme détourés : c'est la seule
   teinte sur laquelle le curseur doré reste visible dans les deux modes. */
/* le bouton désactivé du slider ne réagit pas */
.projects-as-slider .slider-nav button:disabled {
  --ha-r: 0%;
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .gform_button,
  .hv-ck__b,
  .projects-as-slider .slider-nav .slider-prev,
  .projects-as-slider .slider-nav .slider-next {
    transition: color 0.2s ease;
  }
}


/* ==============================================
   BOUTONS EN MODE JOUR
   Les boutons WP sont en crème (classe de couleur WP, posée en !important) et
   le fond de page passe lui aussi en crème en mode jour : le bouton disparaît.
   Il passe donc en gris chaud au repos, et le rollover le remplit d'un beige
   un peu plus sombre que la page, texte noir.
   ============================================== */
/* Boutons pleins (boutons WP, envoi du formulaire) : gris foncé, texte blanc.
   Les classes de couleur WP sont générées en !important, d'où le !important ici.
   Le rollover les remplit d'un beige un peu plus sombre que le fond de page
   (#F2EBD7), avec un texte noir. */
body.light .wp-block-button__link,
body.light .gform_button {
  background-color: #33322d !important;
  color: #ffffff !important;
  --ha-fill: #e3dbc3;
  --ha-fill-text: #1a1a1a;
}
/* Flèches du slider : détourées, donc transparentes au repos. Un remplissage
   beige sur le fond crème de la page serait invisible : elles gardent le
   remplissage sombre à texte blanc. */
body.light .projects-as-slider .slider-nav .slider-prev,
body.light .projects-as-slider .slider-nav .slider-next {
  --ha-fill: #33322d;
  --ha-fill-text: #ffffff;
}
/* La carte du bandeau cookies reste sombre dans les deux modes : ses boutons ne
   suivent pas le mode jour, ils gardent le traitement de nuit. */
/* La règle de repos ci-dessus est en (0,2,1) et en !important : elle battait la
   règle de survol du bloc rollover, qui n'est qu'en (0,2,0). Le texte restait
   donc blanc au survol en mode jour au lieu de passer au noir. On repasse
   devant en (0,3,1). */
@media (hover: hover) {
  body.light .wp-block-button__link:hover,
  body.light .wp-block-button__link:focus-visible,
  body.light .gform_button:hover,
  body.light .gform_button:focus-visible {
    color: var(--ha-fill-text) !important;
  }
}

/* Le thème masque tous les H1 (h1{opacity:0}) parce que .pages_title est révélé
   par GSAP. Le titre de l'accueil est désormais un H1 lui aussi (il n'y en avait
   aucun sur la page) : il est révélé par la timeline « cultive », qui anime les
   lettres et non le bloc, donc le bloc doit rester visible. */
h1.cultive { opacity: 1; }


.VidsProjet video {
    border-radius: 20px;
}

/* ==============================================
   ROULEMENT DES LETTRES (titres de projets, menu principal)
   app.js (haDecouperLettres) découpe le texte en .ha-mot > .ha-c > span[data-c].
   Au survol, chaque lettre monte hors de sa fenêtre et laisse monter son double
   (::after), en vague (--d, posée lettre par lettre). Le double est doré la nuit
   et sombre le jour : le doré n'est pas lisible en texte sur le crème (le thème
   repasse déjà .has-primary-color en sombre en mode jour).
   La course suit la hauteur de ligne (100 % + 0,4em) : elle reste juste avec
   l'interligne de 0,8 des titres de projets comme avec celui du menu.
   ============================================== */
:root { --ha-roll: var(--wp--preset--color--primary); }
body.light { --ha-roll: rgb(26, 26, 26); }
@media (hover: hover) and (pointer: fine) {
  /* app.js pose déjà display et white-space en style en ligne (RUCSS : ces
     classes n'existent pas dans le HTML servi, leurs règles n'arrivent qu'au
     premier geste). Le mot est insécable, sinon le navigateur couperait entre
     deux lettres (même piège que .cultive). */
  .ha-mot {
    display: inline-block;
    white-space: nowrap;
    /* Une fenêtre par mot et non par lettre : même rendu, mais 3 à 5 fois
       moins de calques à découper pour la carte graphique pendant le
       roulement (22 fenêtres pour le menu avant, 3 maintenant). Elle déborde
       un peu du mot : avec un interligne serré, l'encre (accents, jambages
       de g, j, p, y) sort de sa boîte. */
    clip-path: inset(-0.2em -0.1em -0.22em -0.1em);
  }
  .ha-c { display: inline-block; }
  .ha-c > span {
    display: inline-block;
    position: relative;
    /* transform seul : la couleur vient du parent par héritage, inutile que
       chaque lettre fasse tourner sa propre transition de couleur */
    transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1) var(--d, 0ms);
  }
  /* le double attend sous la lettre, hors de la fenêtre */
  .ha-c > span::after {
    content: attr(data-c);
    position: absolute;
    left: 0;
    top: calc(100% + 0.4em);
    color: var(--ha-roll);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .ha-c > span { transition: color 0.25s ease; }
}

/* ==============================================
   SURVOL DES PROJETS (archive /projets/)
   Trois gestes, réservés au vrai survol à la souris :
   1. la liste désigne : les projets non survolés s'effacent ;
   2. les lettres du titre roulent (bloc ci-dessus) ;
   3. la barre se remplit de doré depuis le point d'entrée du curseur, le même
      geste que les boutons (--ha-x posée par app.js, --ha-r déclarée dans le
      bloc « ROLLOVER DES BOUTONS »).
   La vignette ronde qui suit le curseur est pilotée par app.js (projetsSurvol).
   ============================================== */
.page-projets-scope {
  --ha-barre: var(--wp--preset--color--primary);
}
@media (hover: hover) and (pointer: fine) {
  .page-projets-scope .wp-block-post-template > li > a {
    transition: opacity 0.45s ease, color 0.4s ease;
  }
  /* Les styles globaux passent tout lien survolé en blanc
     (:root :where(a:hover) { color: white }) : en mode jour le projet survolé
     devenait blanc sur crème, donc invisible. Il garde sa couleur. */
  .page-projets-scope .wp-block-post-template > li > a:hover {
    color: inherit;
  }
  .page-projets-scope .wp-block-post-template:has(> li > a:hover, > li > a:focus-visible) > li > a:not(:hover, :focus-visible) {
    opacity: 0.28;
  }
  .page-projets-scope li > a:hover .ha-c > span,
  .page-projets-scope li > a:focus-visible .ha-c > span {
    transform: translateY(calc(-100% - 0.4em));
  }

  /* Barre de séparation : remplissage depuis le curseur (cf. boutons).
     Repos à -1 % et non 0 % : le bord adouci (+0,8 % du rayon) vaut ici une
     dizaine de pixels sur 1200, et laissait un point doré au point de sortie. */
  .page-projets-scope .wp-block-spacer {
    --ha-r: -1%;
    background-image: radial-gradient(circle at var(--ha-x, 50%) 50%,
      var(--ha-barre) var(--ha-r), rgba(0, 0, 0, 0) calc(var(--ha-r) + 0.8%));
    background-repeat: no-repeat;
    transition: --ha-r 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.4s ease;
  }
  .page-projets-scope li > a:hover .wp-block-spacer,
  .page-projets-scope li > a:focus-visible .wp-block-spacer {
    --ha-r: 102%;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .page-projets-scope li > a:hover .ha-c > span,
  .page-projets-scope li > a:focus-visible .ha-c > span {
    transform: none;
    color: var(--ha-roll);
  }
  .page-projets-scope .wp-block-spacer { transition: background-color 0.4s ease; }
}

/* ==============================================
   MENU PRINCIPAL : rubrique courante et survol
   La rubrique affichée porte .is-courant (au rendu par le mu-plugin
   harvest-menu-courant, puis par app.js après chaque navigation AJAX, puisque
   l'en-tête n'est pas rechargé) : libellé doré la nuit, « graine » sous le mot
   (dorée la nuit, sombre le jour). Avant, la rubrique n'était marquée que sur
   Contact et L'agence, en blanc sur crème : invisible.
   Au survol, les lettres roulent (bloc ROULEMENT) et la graine passe sous
   l'entrée survolée ; la rubrique courante s'efface le temps du survol.
   ============================================== */
:root { --ha-graine: var(--wp--preset--color--primary); }
body.light { --ha-graine: rgb(26, 26, 26); }
header .wp-block-navigation-item__content {
  position: relative;
}
header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 50%;
  /* juste sous les jambages (le j de Projets tombe au milieu du mot) */
  top: calc(100% - 0.1em);
  width: max(5px, 0.2em);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--ha-graine);
  translate: -50% 0;
  scale: 0;
  transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.4s ease;
}
header .wp-block-navigation-item.is-courant > .wp-block-navigation-item__content::after {
  scale: 1;
}
body:not(.light) header .wp-block-navigation-item.is-courant > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary);
}
@media (hover: hover) and (pointer: fine) {
  /* le blanc de survol des styles du thème ne se distinguait pas du crème :
     c'est le roulement qui signale le survol */
  header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
    color: inherit;
  }
  header .wp-block-navigation-item__content:hover .ha-c > span,
  header .wp-block-navigation-item__content:focus-visible .ha-c > span {
    transform: translateY(calc(-100% - 0.4em));
  }
  /* la graine suit le survol, la rubrique courante s'efface le temps du survol
     (classes répétées dans le sélecteur : il doit battre la règle .is-courant,
     en (0,3,2)) */
  header .wp-block-navigation__container:has(> li > a:hover, > li > a:focus-visible) > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    scale: 0;
  }
  header .wp-block-navigation__container:has(> li > a:hover, > li > a:focus-visible) > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible)::after {
    scale: 1;
  }
  body:not(.light) header .wp-block-navigation__container:has(> li > a:hover, > li > a:focus-visible) > li.is-courant > a:not(:hover, :focus-visible) {
    color: var(--wp--preset--color--contrast);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  header .wp-block-navigation-item__content:hover .ha-c > span,
  header .wp-block-navigation-item__content:focus-visible .ha-c > span {
    transform: none;
    color: var(--ha-roll);
  }
  header .wp-block-navigation-item__content::after { transition: background-color 0.4s ease; }
}
/* Panneau mobile (copie du menu posée sur <body> par gsap-hamburger-menu) :
   liste verticale, la graine se place donc devant le libellé */
@media (max-width: 600px) {
  .ghm-menu-mobile .wp-block-navigation-item.is-courant > .wp-block-navigation-item__content::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 50%;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--ha-graine);
    translate: 0 -50%;
  }
  body:not(.light) .ghm-menu-mobile .wp-block-navigation-item.is-courant > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary);
  }
}

/* ==============================================
   ARRIVÉE SUR LE SITE : entrée du logo et du menu
   Au premier affichage, le logo se dévoile de haut en bas (les tiges
   descendent, puis les arches et le nom), puis les entrées du menu tombent
   à leur place l'une après l'autre (le burger sur mobile).
   Animations CSS, sans JavaScript : elles partent dès la première peinture
   sans attendre l'événement load (auquel la page révèle son contenu), et ne
   rejouent pas pendant la navigation AJAX, qui ne recharge pas l'en-tête.
   Le logo n'anime que clip-path : app.js (fixSiteLogoVisibility) réécrit son
   opacité, sa visibilité et son transform au load puis à chaque refresh.
   ⚠ Étapes en 0 % / 100 %, jamais from / to : le RUCSS de FlyingPress les
   prend pour des sélecteurs d'éléments (<from>, <to>) introuvables dans la
   page et sert des @keyframes vides ; l'entrée ne jouait alors qu'au premier
   geste du visiteur, quand la feuille complète arrive.
   ============================================== */
@keyframes ha-logo-arrivee {
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes ha-menu-arrivee {
  0%   { opacity: 0; transform: translateY(-0.6em); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  header .heading .wp-block-site-logo {
    animation: ha-logo-arrivee 1.3s cubic-bezier(0.7, 0, 0.2, 1) 0.1s backwards;
  }
  header .wp-block-navigation__container > li,
  .ghm-hamburger {
    animation: ha-menu-arrivee 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s backwards;
  }
  header .wp-block-navigation__container > li:nth-child(2) { animation-delay: 0.65s; }
  header .wp-block-navigation__container > li:nth-child(3) { animation-delay: 0.75s; }
  header .wp-block-navigation__container > li:nth-child(4) { animation-delay: 0.85s; }
}
/* Le voile d'arrivée de l'accueil (.loading, animé par la timeline cultive au
   load) passait au-dessus du logo et du menu : l'en-tête clignotait au noir
   au moment où la page se révèle. Sous le contenu de l'en-tête, il ne voile
   plus que la page. */
header .loading {
  z-index: -1;
}

/* ==============================================
   PHRASE D'ENTITÉ DE L'ACCUEIL (10/10/2026)
   Dit en clair qui est Harvest, pour les moteurs et les IA, sans toucher au
   hero. Atténuée par l'opacité du span (et non par une couleur fixe) pour
   rester lisible en mode nuit comme en mode jour ; l'opacité du paragraphe,
   elle, appartient à la révélation gs_reveal.
   ============================================== */
.ha-entite {
  /* Même boîte que les colonnes qui suivent (layout constrained, centré),
     même retrait que leur texte, ligne bornée à ~48rem par la marge droite. */
  box-sizing: border-box;
  max-width: var(--wp--style--global--content-size, 1200px);
  margin: 0 auto var(--wp--preset--spacing--60) !important;
  padding-inline: var(--wp--preset--spacing--30);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
}
.ha-entite > span {
  /* La longueur de ligne se borne sur le texte lui-même : un padding en %
     se calcule sur le parent, pas sur le paragraphe, et écrasait la colonne
     sur les grands écrans. */
  display: block;
  max-width: 48rem;
  opacity: 0.72;
}

/* ==============================================
   NOM DU CLIENT DANS LA LISTE /projets/ (10/10/2026)
   Les titres de la liste sont ludiques (« UFO », « Call Me ») : le nom réel du
   projet, au-dessus, dit aux moteurs et aux visiteurs de qui il s'agit.
   Discret, il ne prend pas part au roulement des lettres (qui cible .titre).
   ============================================== */
.page-projets-scope .ha-projet-client {
  margin: 0 0 0.7em;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ==============================================
   CONTENU DES PAGES MÉTIER (11/10/2026)
   Bloc de texte long ajouté sous l'introduction de chaque page métier
   (classe ha-contenu-metier, avec ha-texte-legal pour le rythme vertical),
   et FAQ en blocs Détails (ha-faq), d'où le mu-plugin tire le FAQPage.
   ============================================== */
.ha-contenu-metier {
  box-sizing: border-box;
  margin: var(--wp--preset--spacing--60) auto var(--wp--preset--spacing--80) !important;
  padding-inline: var(--wp--preset--spacing--30);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
}
.ha-contenu-metier p {
  /* le thème décale les paragraphes de 10 px : on les aligne sur les titres */
  margin-left: 0;
  margin-right: 0;
}
.ha-contenu-metier h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}
.ha-contenu-metier .ha-faq {
  border-top: 1px solid rgba(242, 235, 215, 0.18);
  padding: 0.2em 0;
}
.ha-contenu-metier .ha-faq + .ha-faq {
  margin-top: 0;
}
.ha-contenu-metier .ha-faq:last-child {
  border-bottom: 1px solid rgba(242, 235, 215, 0.18);
}
.ha-contenu-metier .ha-faq summary {
  position: relative;
  padding: 0.9em 2.2em 0.9em 0;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}
.ha-contenu-metier .ha-faq summary::-webkit-details-marker {
  display: none;
}
.ha-contenu-metier .ha-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2em;
  top: 0.55em;
  font-size: 1.5em;
  line-height: 1;
  color: var(--wp--preset--color--primary, #ffd07b);
  transition: transform 0.3s ease;
}
.ha-contenu-metier .ha-faq[open] summary::after {
  transform: rotate(45deg);
}
.ha-contenu-metier .ha-faq > p {
  margin: 0 0 1em;
}
body.light .ha-contenu-metier .ha-faq,
body.light .ha-contenu-metier .ha-faq:last-child {
  border-color: rgba(26, 26, 26, 0.18);
}
body.light .ha-contenu-metier .ha-faq summary::after {
  color: #8f6410;
}

/* Accordéons FAQ : pas de cadre ni de surbrillance au clic ou au toucher ;
   le contour reste au clavier (:focus-visible) pour l accessibilité. */
.ha-faq summary {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.ha-faq summary:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.ha-faq summary:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.ha-contenu-metier .ha-faq summary::after {
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.ha-contenu-metier .ha-faq.is-closing summary::after {
  transform: none;
}

/* Renvoi vers la page santé en fin de fiche projet santé : bouton du site
   (12/10/2026, passé en bouton le 14/10/2026). */
.ha-lien-sante {
  display: flex;
  justify-content: center;
  margin: var(--wp--preset--spacing--60) auto var(--wp--preset--spacing--70);
  padding-inline: var(--wp--preset--spacing--30);
}
/* WordPress n'injecte le style du bloc Bouton (arrondi de 70 px, marges,
   lettrage) que sur les pages qui contiennent un vrai bloc Bouton : les fiches
   projet n'en ont pas, on reprend donc les valeurs relevées sur « NOS PROJETS ». */
.ha-lien-sante .wp-block-button__link {
  border-radius: 70px;
  padding-inline: 2.723rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ==============================================
   GRILLE « NOS PROJETS SANTÉ » (page /communication-sante/, 12/10/2026)
   Remplace le slider aléatoire : seulement les projets étiquetés « Santé »,
   images au format des bannières (2:1, presque sans recadrage) au lieu d'un
   4:3 centré qui ne montrait qu'un fond, nom et accroche toujours visibles.
   ============================================== */
.ha-projets-sante,
.ha-projets-grille {
  margin: var(--wp--preset--spacing--70) 0 26vh;
  padding-inline: var(--wp--preset--spacing--30);
}
.ha-projets-sante h2,
.ha-projets-grille h2 {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
}
.ha-grille-projets .wp-block-post-template {
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.ha-grille-projets .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
}
.ha-grille-projets .wp-block-post-featured-image img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ha-grille-projets .wp-block-post-title {
  margin: 0.9em 0 0.25em;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.2;
}
.ha-grille-projets .wp-block-post-title a {
  text-decoration: none;
}
.ha-grille-projets .wp-block-mfb-meta-field-block {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.72;
}
@media (hover: hover) and (pointer: fine) {
  .ha-grille-projets li:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
  }
  .ha-grille-projets li:hover .wp-block-post-title a {
    color: var(--wp--preset--color--primary, #ffd07b);
  }
  body.light .ha-grille-projets li:hover .wp-block-post-title a {
    color: #8f6410;
  }
}
.ha-projets-sante .btn_qui,
.ha-projets-grille .btn_qui {
  margin-top: var(--wp--preset--spacing--60);
}
@media (max-width: 1024px) {
  .ha-grille-projets .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .ha-grille-projets .wp-block-post-template.is-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==============================================
   ARTICLES DE LA RUBRIQUE RESSOURCES (12/10/2026)
   Modèle « single » (wp_template 1609) au style des pages : en-tête à
   h1.pages_title, image 2:1, texte en colonne lisible (le contenu porte
   ha-texte-legal ha-contenu-metier), encart contact en fin d'article.
   ============================================== */
.ha-article-rubrique {
  margin: 0 0 0.8em;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ha-article-rubrique a {
  color: var(--wp--preset--color--primary, #ffd07b);
  text-decoration: none;
}
.ha-article-date {
  margin-top: 1em;
  font-size: 0.95rem;
  opacity: 0.72;
}
.ha-article .ha-article-image {
  max-width: 1200px;
  margin: var(--wp--preset--spacing--60) auto 0;
  overflow: hidden;
  border-radius: 26px;
}
.ha-article-cta {
  box-sizing: border-box;
  max-width: 74ch;
  margin: var(--wp--preset--spacing--70) auto 0 !important;
  padding: var(--wp--preset--spacing--50);
  border: 1px solid rgba(242, 235, 215, 0.18);
  border-radius: 26px;
}
.ha-article-cta p {
  margin: 0 0 1.2em;
  line-height: 1.6;
}
body.light .ha-article-cta {
  border-color: rgba(26, 26, 26, 0.18);
}
body.light .ha-article-rubrique a {
  color: #8f6410;
}
.ha-grille-articles .wp-block-post-excerpt {
  margin: 0.4em 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.72;
}
.ha-grille-articles .ha-article-date {
  margin: 1em 0 0;
  font-size: 0.85rem;
}
.ha-grille-articles .wp-block-post-title {
  margin-top: 0.3em;
}
@media (max-width: 600px) {
  /* même dégagement sous le logo fixe que les autres pages à h1.pages_title */
  .ha-article-entete {
    margin-top: 176px !important;
  }
}

/* ==============================================
   SLIDER PROJETS DE L'ACCUEIL : NOUVELLE CARTE (14/10/2026)
   La carte n'est plus un Cover 4:3 recadré au centre (on ne voyait que des
   fonds) avec le titre au survol : image au format des bannières (2:1), nom et
   accroche toujours visibles, comme la grille des pages métier. Ces règles
   viennent après celles d'origine et les remplacent pour le titre.
   ============================================== */
.projects-as-slider .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
}
.projects-as-slider .wp-block-post-featured-image img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.projects-as-slider .wp-block-post-title {
  margin: 0.9em 0 0.25em;
  text-align: left;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  opacity: 1;
  transform: none;
  transition: color 0.3s ease;
}
body.light .projects-as-slider .wp-block-post-title {
  color: rgb(26, 26, 26) !important;
}
.projects-as-slider .wp-block-mfb-meta-field-block {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.72;
}
@media (hover: hover) and (pointer: fine) {
  .projects-as-slider li.wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
  }
  .projects-as-slider li.wp-block-post:hover .wp-block-post-title {
    color: var(--wp--preset--color--primary, #ffd07b);
  }
  body.light .projects-as-slider li.wp-block-post:hover .wp-block-post-title {
    color: #8f6410 !important;
  }
}

/* ==============================================
   ARTICLES RESSOURCES : MISE EN PAGE ENRICHIE (19/10/2026)
   Texte plus grand, chapô « La réponse en bref », listes mises en forme
   par classe posée sur le bloc Liste (ha-liste-etapes, ha-liste-trio,
   ha-liste-cartes, ha-liste-erreurs). Tout est limité à .ha-article pour
   ne pas toucher aux pages métier qui partagent ha-contenu-metier.
   ============================================== */
.ha-article .ha-contenu-metier {
  /* les marges du contenu et de l encart ne fusionnent pas : une seule suffit */
  margin-bottom: 0 !important;
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
}
.ha-article .ha-contenu-metier h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Chapô : le titre devient un surtitre, le paragraphe une accroche */
.ha-article .ha-contenu-metier h2:has(+ .ha-chapo) {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary, #ffd07b);
}
.ha-article .ha-contenu-metier .ha-chapo {
  margin-top: 0.9em;
  padding-left: 1.1em;
  border-left: 3px solid var(--wp--preset--color--primary, #ffd07b);
  font-size: 1.25em;
  line-height: 1.55;
}

/* Liste numérotée en grille, compteur 01, 02… */
.ha-article .ha-liste-etapes {
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 1.6em;
  padding: 0;
  list-style: none;
}
.ha-article .ha-liste-etapes li {
  counter-increment: etape;
  margin: 0;
  padding: 1.2em 0 1.5em;
  border-top: 1px solid rgba(242, 235, 215, 0.18);
  font-size: 0.95em;
  line-height: 1.6;
}
.ha-article .ha-liste-etapes li::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  margin-bottom: 0.45em;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--primary, #ffd07b);
}
.ha-article .ha-liste-etapes li strong {
  display: block;
  margin-bottom: 0.3em;
  font-size: 1.1em;
  line-height: 1.3;
}

/* Trois notions qui se suivent : trois cartes numérotées */
.ha-article .ha-liste-trio {
  counter-reset: trio;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6em;
  padding: 0;
  list-style: none;
}
.ha-article .ha-liste-trio li {
  counter-increment: trio;
  margin: 0;
  padding: 1.4em 1.3em 1.5em;
  border: 1px solid rgba(242, 235, 215, 0.14);
  border-radius: 26px;
  background: rgba(242, 235, 215, 0.04);
  font-size: 0.92em;
  line-height: 1.55;
}
.ha-article .ha-liste-trio li::before {
  content: counter(trio);
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  margin-bottom: 1em;
  border-radius: 50%;
  background: var(--wp--preset--color--primary, #ffd07b);
  color: #1a1a1a;
  font-size: 0.85em;
  font-weight: 700;
}
.ha-article .ha-liste-trio li:nth-child(2)::before {
  background: var(--wp--preset--color--secondary, #f0c4c4);
}
.ha-article .ha-liste-trio li:nth-child(3)::before {
  background: var(--wp--preset--color--tertiary, #adb885);
}

/* Formats de livraison : cartes 2 x 2 */
.ha-article .ha-liste-cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4em;
  padding: 0;
  list-style: none;
}
.ha-article .ha-liste-cartes li {
  margin: 0;
  padding: 1.3em 1.4em;
  border: 1px solid rgba(242, 235, 215, 0.18);
  border-radius: 26px;
  font-size: 0.92em;
  line-height: 1.55;
}
.ha-article .ha-liste-cartes li strong {
  color: var(--wp--preset--color--primary, #ffd07b);
}

/* Erreurs : croix rose à la place de la puce */
.ha-article .ha-liste-erreurs {
  padding-left: 0;
  list-style: none;
}
.ha-article .ha-liste-erreurs li {
  position: relative;
  padding-left: 1.9em;
}
.ha-article .ha-liste-erreurs li::before {
  content: "\00D7";
  position: absolute;
  left: 0.1em;
  top: -0.12em;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--secondary, #f0c4c4);
}

/* Encart contact : plus près de la FAQ, légèrement teinté */
.ha-article .ha-article-cta {
  margin-top: var(--wp--preset--spacing--60) !important;
  border-color: rgba(255, 208, 123, 0.35);
  background: rgba(255, 208, 123, 0.06);
}

/* Mode jour */
body.light .ha-article .ha-contenu-metier h2:has(+ .ha-chapo),
body.light .ha-article .ha-liste-etapes li::before,
body.light .ha-article .ha-liste-cartes li strong {
  color: #8f6410;
}
body.light .ha-article .ha-contenu-metier .ha-chapo {
  border-left-color: #8f6410;
}
/* le mode jour force la couleur des titres en !important */
body.light .ha-article .ha-contenu-metier h2:has(+ .ha-chapo) {
  color: #8f6410 !important;
}
body.light .ha-article .ha-liste-etapes li,
body.light .ha-article .ha-liste-cartes li {
  border-color: rgba(26, 26, 26, 0.18);
}
body.light .ha-article .ha-liste-trio li {
  border-color: rgba(26, 26, 26, 0.14);
  background: rgba(26, 26, 26, 0.03);
}
body.light .ha-article .ha-liste-erreurs li::before {
  color: #b0605e;
}
body.light .ha-article .ha-article-cta {
  border-color: rgba(143, 100, 16, 0.35);
  background: rgba(143, 100, 16, 0.06);
}

@media (max-width: 700px) {
  .ha-article .ha-liste-etapes,
  .ha-article .ha-liste-trio,
  .ha-article .ha-liste-cartes {
    grid-template-columns: minmax(0, 1fr);
  }
  .ha-article .ha-contenu-metier .ha-chapo {
    font-size: 1.12em;
  }
}

/* CONTACT : le téléphone et le consentement s’empilent à droite du message */
@media (min-width: 641px) {
	#gform_fields_1 > .gfield.message { grid-row: span 2; }
}