/*
Theme Name:     Nikita
Description:   
Author:         By nōOpr
Template:       Divi
(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/

/* Force le chargement de la police Dashicons sur le front */
@font-face {
  font-family: "dashicons";
  src: url("/wp-includes/fonts/dashicons.woff2") format("woff2"),
       url("/wp-includes/fonts/dashicons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Et on s’assure que la toolbar l’utilise */
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before {
  font-family: dashicons !important;
}

@font-face {
  font-family: 'Space_Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-Light.woff2) format('woff2'), 
	  url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Space_Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-Regular.woff2) format('woff2'),  
	  url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Space_Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-Medium.woff2) format('woff2'), 
	  url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'Space_Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-SemiBold.woff2) format('woff2'),  
	  url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: 'Space_Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-Bold.woff2) format('woff2'), 
	  url(/wp-content/themes/Nikita/fonts/SpaceGrotesk-Bold.ttf) format('truetype');
}

	body #page-container h1, body #page-container h2, body #page-container h3, body #page-container h4, body #page-container h5, body #page-container h6{font-weight:bold;}

/* BURGER MENU HEADER */ 
/* Bouton */
.de-menu-ham-icon{
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* IMPORTANT : force une couleur visible (à adapter) */
  color: #111 !important;
}

/* Conteneur */
.de-menu-ham-icon .de-ham{
  position: relative !important;
  width: 26px !important;
  height: 18px !important;
  display: inline-block !important;
}

/* Barres */
.de-menu-ham-icon .de-ham span{
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  display: block !important;
  background: currentColor !important;
  border-radius: 0 !important;
  transform-origin: center !important;
  transition: transform .25s ease, top .25s ease, opacity .2s ease !important;
}

.de-menu-ham-icon .de-ham span:nth-child(1){ top: 0 !important; }
.de-menu-ham-icon .de-ham span:nth-child(2){ top: 9px !important; }
.de-menu-ham-icon .de-ham span:nth-child(3){ top: 18px !important; }

/* Etat ouvert => croix */
.de-menu-ham-icon.is-open .de-ham span:nth-child(1){
  top: 8px !important;
  transform: rotate(45deg) !important;
}
.de-menu-ham-icon.is-open .de-ham span:nth-child(2){
  opacity: 0 !important;
}
.de-menu-ham-icon.is-open .de-ham span:nth-child(3){
  top: 8px !important;
  transform: rotate(-45deg) !important;
}

/* gestion header fixe */

body *, body h1, body h2, body h3, body h4, body h5, body h6, body p, body a, body ul, body li, body ol, body strong{
	font-family:'Space_Grotesk', Raleway, Arial, sans-serif !important;
}


.flex{display:flex; flex-wrap:wrap;}
.blk{display:block !important;}
.upper{text-transform:uppercase;}
.center{text-align:center;}
.padBot1{padding-bottom:1em !important;}
.padBot2{padding-bottom:1.5em !important;}
.padBot3{padding-bottom:2em !important;}
.padBot4{padding-bottom:2.5em !important;}
.padBot5{padding-bottom:3em !important;}

:root {
	--linkhover: #7B61FF; /* Mauve */
	--lightcolor: #FFFFFF; /* Blanc */
	--darkcolor: #000000; /* Noir */
	--mauvetext: #7B61FF; /* Mauve */
/* ===== TYPO SCALE (fluid + progressive) ===== */
	/* base “p” : monte doucement de mobile -> desktop */
  --fs-p:   clamp(0.95rem, 0.90rem + 0.35vw, 1.05rem); /* ~15.2px -> ~16.8px */
  /* H2 : titre de section (type “Nous voulons…” / “Expérimentée…”) */
  --fs-h2:  clamp(1.3rem, 1rem + 0.90vw, 2.05rem); /* ~23px -> ~33px */
  /* H1 : hero (plus grand, mais reste lisible sur mobile) */
  --fs-h1:  clamp(1.6rem, 1.2rem + 2.20vw, 3.25rem); /* ~33px -> ~52px */
  /* Interlignages fluides (optionnel mais aide beaucoup à coller à la maquette) */
  --lh-p:   1.55;
  --lh-h2:  1.30;
  --lh-h1:  1.20;
  /* largeur de lecture (souvent indispensable pour ce style) */
  --measure: 62ch;
}



.mauve{background-color: var(--linkhover); border:2px solid var(--linkhover);}



/* Tous les éléments "reveal-xxx" (mais pas les "reveal-trigger-xxx") */
[class^="reveal-"]:not([class^="reveal-trigger-"]),
[class*=" reveal-"]:not([class*=" reveal-trigger-"]) {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    height 0.35s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Quand on ajoute .is-visible via JS */
[class^="reveal-"].is-visible:not([class^="reveal-trigger-"]),
[class*=" reveal-"].is-visible:not([class*=" reveal-trigger-"]) {
  opacity: 1;
  transform: translateY(0);
}

/* Optionnel : curseur main sur les triggers */
[class^="reveal-trigger-"],
[class*=" reveal-trigger-"] {
  cursor: pointer;
}

/* STYLE GENERIQUES */
.blk{display:block;}
.fullframe{width:100%;}
/* centrer du contenue verticalement */
.center-v {
	display: flex;
	flex-direction: column;
	justify-content: center;
  	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	 -moz-box-orient: vertical;
	 -moz-box-direction: normal;
	  -ms-flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
}
.dc-align-right{
-webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;	
}
.dc-align-center{
-webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;		
}


/***************** SLIDER HOME PAGE *****************************************/

.sliderHome .nikita-fullscreen-slider{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Viewport / Track */
.sliderHome .nikita-fullscreen-slider .nfs-viewport{
  height: 100%;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y; /* vertical scroll ok, swipe horizontal géré en JS */
}

.sliderHome .nikita-fullscreen-slider .nfs-track{
  height: 100%;
  display: flex;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 650ms cubic-bezier(.22,.61,.36,1);
}

/* Slides */
.sliderHome .nikita-fullscreen-slider .nfs-slide{
  flex: 0 0 100%;
  height: 100%;
  position: relative; /* nécessaire pour hit + overlays */
}

/* Fond vidéo */
.sliderHome .nikita-fullscreen-slider .bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Fond image (via CSS var ACF) */
.sliderHome .nikita-fullscreen-slider .nfs-slide--image{
  background-image: var(--nfs-bg-desktop);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center; /* top + centré horizontal */
}

/* Overlay contenu */
.sliderHome .nikita-fullscreen-slider .fond-item{
  position: relative;
  z-index: 3;
  opacity: 1;
  filter: blur(0px);
  transform: translateZ(0); /* perf */
  will-change: opacity, filter;
  transition:
    opacity 600ms cubic-bezier(.22,.61,.36,1),
    filter 600ms cubic-bezier(.22,.61,.36,1);
}

/* Zone cliquable plein slide */
.sliderHome .nikita-fullscreen-slider .nfs-slide__hit{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
}

/* Dots */
.sliderHome .nikita-fullscreen-slider .nfs-dots{
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: transparent; /* tu avais rgba(0,0,0,0) */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sliderHome .nikita-fullscreen-slider .nfs-dot{
  width: 10px;
  height: 10px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,.40);
  opacity: .85;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

.sliderHome .nikita-fullscreen-slider .nfs-dot:hover{
  transform: scale(1.15);
  background: rgba(255,255,255,1);
}

.sliderHome .nikita-fullscreen-slider .nfs-dot[aria-current="true"]{
  transform: scale(1.15);
  background: rgba(255,255,255,1);
  opacity: 1;
}

/* Hide dots */
.sliderHome .nikita-fullscreen-slider[data-dots="false"] .nfs-dots{
  display: none !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .sliderHome .nikita-fullscreen-slider .nfs-track{ transition: none; }
}

/* Overlay : fade au changement */
.sliderHome .nikita-fullscreen-slider .fond-item{
  transition: opacity 300ms ease;
  opacity: 1;
}

.sliderHome .nikita-fullscreen-slider.is-switching .fond-item{
  opacity: 0;
  filter: blur(12px);
  transition-duration: 140ms; /* sortie plus rapide */
}
/* retour plus doux (quand la classe est retirée) */
.sliderHome .nikita-fullscreen-slider:not(.is-switching) .fond-item{
  transition-duration: 220ms;
}

/* Par défaut (desktop) : on affiche la vidéo desktop, on cache la mobile */
.sliderHome .bg-video--desktop { display: block; }
.sliderHome .bg-video--mobile  { display: none; }

/* En dessous de 980px : on affiche la mobile, on cache la desktop */
@media (max-width: 980px){
  .sliderHome .bg-video--desktop { display: none; }
  .sliderHome .bg-video--mobile  { display: block; }
}


/***************** END SLIDER HOME PAGE *****************************************/


/***************** BADGE Circulaire animé HOME page ***********************/
:root{
  --size: 225px;
  --inner: 160px;
  --duration: 18s;
  --textSize: 20px;
  --letterSpace: 4px;
  --ringPadding: 10px;
}

.badge{
  width:var(--size);
  height:var(--size);
  position:absolute;
  border-radius:50%;
  background:transparent;
  display:grid;
  place-items:center;
  overflow:hidden;
  bottom:4%;
  right:2%;
}

/* Cercle blanc central */
.centerBadge{
  width:var(--inner);
  height:var(--inner);
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  padding:15px;
  box-sizing:border-box;
  z-index:2;
  position:relative; /* IMPORTANT pour positionner le lien overlay */
}


/* lien cliquable sur toute la pastille blanche */
.centerBadge .badgeLink{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:3;              /* au-dessus du texte */
  display:block;
  text-decoration:none;
}

/* Le texte reste visible au-dessus du fond, mais en-dessous du lien */
.centerBadge .titleBadge{
  position:relative;
  z-index:2;              /* sous le lien, donc clic sur toute la zone */
  font-weight:700;
  letter-spacing:1px;
  color:#000000 !important;
  line-height:1.05;
  text-transform:uppercase;
  font-size:20px;
  pointer-events:none;    /* évite que le texte capte le hover/clic */
  transition:all .3s;
}
.badgeNoir .centerBadge{background:#000;}
.badgeNoir .centerBadge .titleBadge{ color:#FFFFFF !important;}

.centerBadge:hover .titleBadge, .badgeNoir .centerBadge:hover .titleBadge{
	color:var(--mauvetext) !important;
}

/* SVG du texte circulaire */
.ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

/* ✅ Rotation pilotée en JS : transform transitionné, pas d'animation keyframes */
.rotating{
  transform-origin: 50% 50%;
  transform: rotate(var(--angle, 0deg));
  will-change: transform;
}

.ring text{
  font-size: var(--textSize);
  letter-spacing: var(--letterSpace);
  text-transform: uppercase;
  fill:#fff;
  font-weight:800;
}

.badgeNoir .ring text{
  fill:#000;
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  .rotating{ animation:none; }
}
/***************** FIN BADGE Circulaire ***********************/



/***************** GESTION AFFICHAGE SHORTCODE EQUIPE **********/

/* =========================
   GRID
   ========================= */

.team-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 767px){
  .team-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
}

/* =========================
   CARD
   ========================= */

.team-card{
  margin: 0;
}

/* Le lien DOIT être block */
.team-card__media{
  position: relative;
  display: block;              /* CRUCIAL */
  width: 100%;
  aspect-ratio: 1 / 1;         /* vignette carrée */
  overflow: hidden;
  background: #000;
  text-decoration: none;
  color: inherit;
}

/* =========================
   IMAGES
   ========================= */

.team-card__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* recadre 16:9 dans carré */
  object-position: center;     /* centre le sujet */
  transition: opacity 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Image visible par défaut */
.team-card__img--default{
  opacity: 1;
}

/* Image hover invisible au départ */
.team-card__img--hover{
  opacity: 0;
}

/* Hover / focus = crossfade image (uniquement si hover existe) */
.team-card.has-hover .team-card__media:hover .team-card__img--hover,
.team-card.has-hover .team-card__media:focus-visible .team-card__img--hover{
  opacity: 1;
}

.team-card.has-hover .team-card__media:hover .team-card__img--default,
.team-card.has-hover .team-card__media:focus-visible .team-card__img--default{
  opacity: 0;
}

/* =========================
   OVERLAY TEXTE
   ========================= */

.team-card__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  color: #fff;
  pointer-events: none;
}

/* Prénom & Nom visibles au chargement */
.team-card__prenom,
.team-card__nom{
  opacity: 1;

  /* ✅ ajout : on prépare le petit écartement au hover */
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ✅ ajout : au hover/focus, prénom monte et nom descend légèrement */
.team-card.has-hover .team-card__media:hover .team-card__prenom,
.team-card.has-hover .team-card__media:focus-visible .team-card__prenom{
  transform: translateY(-6px);
}

.team-card.has-hover .team-card__media:hover .team-card__nom,
.team-card.has-hover .team-card__media:focus-visible .team-card__nom{
  transform: translateY(6px);
}

/* Fonction cachée au départ */
.team-card__fonction{
  opacity: 0;

  /* ✅ modif : ne réserve plus d’espace quand cachée */
  margin: 0;
  max-height: 0;
  overflow: hidden;

  transform: translateY(4px);

  /* ✅ modif : transitions plus complètes (ouverture + fondu) */
  transition:
    opacity .25s ease,
    transform .25s ease,
    max-height 0.45s cubic-bezier(0.4, 0.0, 0.2, 1),
    margin 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Fonction visible au hover / focus */
.team-card.has-hover .team-card__media:hover .team-card__fonction,
.team-card.has-hover .team-card__media:focus-visible .team-card__fonction{
  opacity: 1;
  transform: translateY(0);

  /* ✅ modif : réouvre l’espace doucement */
  margin: 6px 0;
  max-height: 3em; /* assez pour 1–2 lignes selon ta typo */
}

/* =========================
   TYPO (à ajuster à ta DA)
   ========================= */

.team-card__prenom{
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.1;
}

.team-card__fonction{
  font-weight: 500;
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.2;
}

.team-card__nom{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.1;
}

/* =========================
   VOILE (lisibilité)
   ========================= */

.team-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.22);
}

/* =========================
   ACCESSIBILITÉ
   ========================= */

.team-card__media:focus-visible{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: -2px;
}

/***************** END GESTION AFFICHAGE SHORTCODE EQUIPE **********/


/*****************  Case study blocks *****************************/

/* ==========================================================
   RESET LOGIQUE POUR LES BLOCS CASE STUDY (FLUSH)
========================================================== */

.nk-case,
.nk-block,
.nk-grid,
.nk-col,
.nk-media,
.nk-media img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.nk-case{
  width: 100%;
  overflow: hidden; /* évite scroll horizontal si 100vw */
}

/* ==========================================================
   MEDIA (IMAGES)
========================================================== */

.nk-media,
.nk-media img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
}

.nk-media--cover img{
  object-fit: cover;
}

.nk-media--contain img{
  object-fit: contain;
  background: #f3f3f3;
}

/* Option : si tu veux masquer toute légende (flush total) */
.nk-caption{ display:none; }

/* ==========================================================
   A) IMAGE PLEINE LARGEUR (edge-to-edge)
========================================================== */

.nk-block--full{
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

.nk-block--full img{
  width: 100%;
  height: auto;
}

/* ==========================================================
   GRIDS FLUSH (0 gap)
========================================================== */

.nk-grid{
  display: grid;
  gap: 0;
  width: 100%;
}

/* 2 colonnes */
.nk-grid--2{
  grid-template-columns: repeat(2, 1fr);
}

/* 3 colonnes */
.nk-grid--3{
  grid-template-columns: repeat(3, 1fr);
}

/* Mobile: stack */
@media (max-width: 820px){
  .nk-grid--2,
  .nk-grid--3{
    grid-template-columns: 1fr;
  }
}

/* Tablet: 3 colonnes -> 2 colonnes */
@media (max-width: 1024px){
  .nk-grid--3{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================
   FULL WIDTH VIDEO – AUTOPLAY (FLUSH)
========================================================== */

.nk-block--video{
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
}

.nk-video{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ==========================================================
   YOUTUBE FULL WIDTH (FLUSH)
========================================================== */

.nk-block--video-yt{
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
}

/* wrapper ratio (16:9 par défaut) */
.nk-video-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* iframe plein */
.nk-yt{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Poster optionnel (si tu l’utilises) */
.nk-yt-poster{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0; /* si tu veux qu’il soit visible au chargement, mets 1 */
}


/*****************  END Case study blocks *****************************/

/*****************  Page Case studies Grille de projets *****************************/

/* Desktop : 2 colonnes + léger gap */
.projets-grid{
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* Carte */
.projets-card{ margin: 0; }

.projets-card__media{
  position: relative;
  overflow: hidden; /* pour que le zoom reste dans la tuile */
  background: #000;

/* hauteur type "tuile" comme ton exemple : ajuste si besoin */
  aspect-ratio: 16 / 9;
}

/* Image */
.projets-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .45s ease;
}

/* Overlay : caché au départ */
.projets-card__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: #fff;
  z-index: 2;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

/* Voile (optionnel) pour lisibilité, caché au départ */
.projets-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease;
}

/* Typo */
.projets-card__client{
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.1;
}

.projets-card__title{
  margin-top: 6px;
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.05;
}

/* Hover : overlay fade + zoom */
.projets-card__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Important : on déclenche le hover même si on survole l'overlay (dans le lien) */
.projets-card__link:hover .projets-card__overlay{
  opacity: 1;
  transform: translateY(0);
}

.projets-card__link:hover .projets-card__media::after{
  opacity: 1;
}

.projets-card__link:hover .projets-card__img{
  transform: scale(1.06);
}

/* Hover souris OU focus clavier */
.projets-card__link:hover .projets-card__overlay,
.projets-card__link:focus-visible .projets-card__overlay{
  opacity: 1;
  transform: translateY(0);
}

.projets-card__link:hover .projets-card__media::after,
.projets-card__link:focus-visible .projets-card__media::after{
  opacity: 1;
}

.projets-card__link:hover .projets-card__img,
.projets-card__link:focus-visible .projets-card__img{
  transform: scale(1.06);
}

/* Focus visible (clavier uniquement) */
.projets-card__link:focus-visible{
  outline: 2px solid #fff;     /* adapte à ta DA */
  outline-offset: -2px;
}


/***************** END  Page Case studies Grille de projets *****************************/


/* ======================================================
   LISTE OFFRES (grille + filtres) — classes isolées
====================================================== */

.offres-list{
  width: 100%;
}

/* Filtres */
.offres-list__filters{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* gap horizontal + vertical */
  column-gap: 10px;
  row-gap: 8px; /* "quelques pixels" entre lignes */
}

.offres-list__filter{
  appearance: none;
  border: 2px solid #000;
  background: #fff;
  color: #000;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

.offres-list__filter:hover,
.offres-list__filter.is-active{
  background: #000;
  color: #FFF;
}

/* Séparateur pleine largeur écran entre filtres et grille */
.offres-list__divider{
  height: 2px;
  background: #000;

  /* espace autour */
  margin: 30px 0;

  /* full width viewport même dans un container centré */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Grille */
.offres-list__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);

  /* (optionnel, par défaut) */
  align-items: stretch;
}

/* Tuile (lien) */
.offres-list__tile{
  display: block;
  text-decoration: none;
  color: inherit;

  /* ✅ clé : la tuile s’étire sur la hauteur de la “row” grid */
  height: 100%;
}

/* hide via filtre */
.offres-list__tile.is-hidden{
  display: none;
}

/* Clip arrondi + couleur variable par catégorie */
.offres-list__tile-clip{
  border-radius: 10px;
  overflow: hidden;
  background: var(--offre-tile-bg, #e9e9e9);

  /* ✅ clé : le clip prend toute la hauteur de la tuile */
  height: 100%;
}

/* Contenu interne */
.offres-list__tile-inner{
  display: flex;
  align-items: stretch;
  justify-content: space-between;

  /* ✅ clé : inner prend toute la hauteur, donc colonne droite peut “stretch” */
  height: 100%;
}

/* Colonne gauche */
.offres-list__left{
  flex: 1 1 auto;
  padding: 26px 26px;
  min-width: 220px;
}

/* Pastille catégorie */
.offres-list__cat{
  display: inline-flex;
  align-items: center;
  border-radius: 15px;
  border: 2px solid #000;
  background: #fff;
  padding: 6px 14px;
  margin-bottom: 14px;
}

.offres-list__cat-text{
  color: #000;
  font-size: 13px;
  line-height: 1;
}

/* Titre */
.offres-list__title{
  color: #000;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.15;
  font-weight: 700;
}

/* Colonne droite */
.offres-list__right{
  flex: 0 0 44%;
  border-left: 2px solid #000;

  display: flex;
  flex-direction: column;

  padding: 10px 18px;

  /* ✅ clé : la colonne droite s’étire réellement */
  align-self: stretch;
}

/* Ligne */
.offres-list__chip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 2px solid #000;

  /* ✅ clé : 5 lignes = remplissent la hauteur dispo */
  flex: 1 1 0;
  min-height: 0;
}

.offres-list__chip:last-child{
  border-bottom: none;
}

/* Texte ligne */
.offres-list__txt{
  color: #000;
  font-size: 14px;
  line-height: 1.2;
}

/* Icônes (mêmes chemins que hero) */
.offres-list__ico{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
}

.offres-list__ico--effet{
  background-image: url("/wp-content/uploads/2026/01/Effet.svg");
}
.offres-list__ico--duree{
  background-image: url("/wp-content/uploads/2026/01/duree.svg");
}
.offres-list__ico--talent{
  background-image: url("/wp-content/uploads/2026/01/talent.svg");
}
.offres-list__ico--groupe{
  background-image: url("/wp-content/uploads/2026/01/groupe.svg");
}
.offres-list__ico--tarif{
  background-image: url("/wp-content/uploads/2026/01/tarif.svg");
}

/* Animation douce des tuiles */
.offres-list__tile{
  will-change: transform, opacity;
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              opacity   .35s ease;
}

/* État caché : transition avant display:none */
.offres-list__tile.is-hiding{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* Quand JS aura fini */
.offres-list__tile.is-hidden{
  display: none;
}



/* ======================================================
   OFFRE HERO — Bandeau (couleur variable par catégorie)
====================================================== */

.offre-hero{
  position: relative;
  width: 100%;
  padding: 0;
  overflow: visible;                 /* IMPORTANT */
  background: transparent;
}
/* Bloc réellement visible (arrondi + overflow hidden) */
.offre-hero__clip{
  position: relative;
  border-radius: 10px;
  overflow: hidden;                  /* conserve le clipping */
  background: var(--offre-hero-bg, #6d00ff);
}

/* La flèche mauve (hérite de --offre-hero-bg) */
.offre-hero::after{
  content:"";
  position: absolute;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: var(--offre-hero-bg, #6d00ff);
    pointer-events: none;
    rotate: 45deg;
}

/* Container interne */
.offre-hero__inner{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
  max-width: 1400px;
  margin: 0 auto;
}

/* =========================
   Colonne gauche
========================= */
.offre-hero__left{
  flex: 1 1 auto;
  min-width: 280px;
  padding: 5% 5%;
}

/* Cartouche catégorie */
.offre-hero__cat{
  display: inline-flex;
  align-items: center;
  border-radius:15px;
  border: 2px solid #000;
  background: #fff;
  padding: 8px 20px;
  text-transform:inherit;
  font-weight:normal;
  margin-bottom: clamp(14px, 2vw, 22px);
}

.offre-hero__cat-text{
  color: #000;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: inherit;
}

/* Titre */
.offre-hero__title{
  margin: 0;
  color: #000;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1;
}

/* =========================
   Colonne droite (infos)
========================= */
.offre-hero__right{
  border-left:2px solid #000;
  flex: 0 0 min(420px, 38%);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: auto;
  gap: 0;
  padding: 0 20px;
}

/* Chip info */
.offre-hero__chip{
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-height: 0;   
  gap: 12px;
  border-bottom: 2px solid #000000;
  padding: 12px 0px;
}
.offre-hero__chip:last-child{border-bottom: none;}

.offre-hero__txt{
  color: #000;
  font-size: 15px;
  line-height: 1.2;
}

/* =========================
   Icônes (SVG via mask)
========================= */
.offre-hero__ico{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background-color: transparent;
  background-size:cover;
  
}

.offre-hero__ico--effet{
  background-image: url("/wp-content/uploads/2026/01/Effet.svg");
}
.offre-hero__ico--duree{
 background-image: url("/wp-content/uploads/2026/01/duree.svg");
}
.offre-hero__ico--talent{
  background-image: url("/wp-content/uploads/2026/01/talent.svg");
}
.offre-hero__ico--groupe{
   background-image: url("/wp-content/uploads/2026/01/groupe.svg");
}
.offre-hero__ico--tarif{
  background-image: url("/wp-content/uploads/2026/01/tarif.svg");
}

/* ======================================================
   OFFRE - MILIEU (2 colonnes + profil bas gauche)
====================================================== */

.offre-mid{
  width: 100%;
  color:#000 !important;
}
.offre-mid ul, .offre-mid p, .offre-mid a{
	font-weight:400;
}

.offre-mid__grid{
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 100px) clamp(18px, 4vw, 56px) clamp(20px, 3vw, 25px) clamp(18px, 4vw, 56px);

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "lefttop right"
    "leftbottom right";
  column-gap:0;
  row-gap: clamp(26px, 4vw, 64px);
  align-items: start;
}

/* Zones */
.offre-mid__left-top{ grid-area: lefttop; padding: 0 30px 0 0;}
.offre-mid__right{ grid-area: right; }
.offre-mid__left-bottom{ grid-area: leftbottom; }

/* Trait vertical sur la colonne droite */
.offre-mid__right{
  border-left: 2px solid rgba(0,0,0,1);
  padding-left: clamp(18px, 3vw, 44px);
}

/* Titres */
.offre-mid__h2{
  margin: 0 0 18px 0;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.05;
  font-weight: 700;
}

.offre-mid__h3{
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

/* WYSIWYG */
.offre-mid__wys{
  font-size: 16px;
  line-height: 1.65;
}


.offre-mid__wys p{
  margin: 0 0 14px 0;
}
.offre-mid__wys p:last-child{
  margin-bottom: 0;
}
.offre-mid__wys a{
  text-decoration: underline;
}

/* Bloc moment clé : un peu plus "ample" */
.offre-mid__left-top .offre-mid__wys{
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.5em;
  color: #000;
  font-weight: 400;
}

/* Espacement entre rubriques de droite */
.offre-mid__bloc + .offre-mid__bloc{
  margin-top: 10px;
}
.offre-mid__bloc:last-child{
	margin-bottom: 50px;
}

/* Profil (bas gauche) : trait horizontal uniquement à gauche */
.offre-mid__left-bottom{
  border-top: 2px solid rgba(0,0,0,1);
  padding-top: clamp(18px, 3vw, 32px);
	padding-right:30px;
}
/* ======================================================
   Témoignage intégré dans OFFRE MID (colonne gauche bas)
   -> layout: texte au-dessus, puis (photo + meta) en ligne
   -> évite tout débordement sur la colonne droite
====================================================== */

.offre-mid__left-bottom .offre-testimonial__inner{
  display: block;          /* neutralise l'ancien flex 2-colonnes */
  padding: 0;              /* si ton témoignage standalone a du padding */
  border-top: 0;           /* idem si un border-top existe déjà */
}

/* Texte */
.offre-mid__left-bottom .offre-testimonial__text{
  max-width: none;
font-size: 16px;
}

/* Footer: photo + meta */
.offre-mid__left-bottom .offre-testimonial__footer{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

/* Photo */
.offre-mid__left-bottom .offre-testimonial__img{
  width: 110px;
  height: 110px;
	 min-width: 110px;
  min-height: 110px;
  max-width: 110px;
  max-height: 110px;
  aspect-ratio: 1 / 1;     /* ⬅️ force le carré */
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Meta */
.offre-mid__left-bottom .offre-testimonial__meta{
  margin-top: 0;           /* annule un margin top prévu pour une autre mise en page */
}

.offre-mid__left-bottom .offre-testimonial__name,
.offre-mid__left-bottom .offre-testimonial__role{
  max-width: 100%;
  overflow-wrap: anywhere; /* empêche les débordements */
}
.offre-mid__left-bottom .offre-testimonial__role{font-weight:400 !important;}
.offre-testimonial__footer{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

/* ======================================================
   OFFRE - RÉFÉRENCES
====================================================== */

.offre-refs{
  width: 100%;
}

.offre-refs__inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 0;
}

/* Titre centré avec liserets responsive */
.offre-refs__title-row{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(22px, 3vw, 44px);
}

.offre-refs__title{
  margin: 0;
  font-size: clamp(26px, 2.5vw, 35px);
  line-height: 1.05;
  font-weight: 800;
  white-space: nowrap;
}

.offre-refs__line{
  flex: 1 1 auto;
  height: 2px;
  background: rgba(0,0,0,1);
}

/* Logos : centrés quoi qu'il arrive */
.offre-refs__logos{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(15px, 3vw, 35px);
}

/* Conteneur d'un logo */
.offre-refs__logo{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image logo */
.offre-refs__img{
  display: block;
  max-height: 100px;              /* ajuste si besoin */
  max-width: min(260px, 70vw);   /* évite les logos trop larges en mobile */
  width: auto;
  height: auto;
}

/* Si logo cliquable */
.offre-refs__logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ======================================================
   OFFRE — PROFIL DETAIL (bloc final) — ajusté maquette
====================================================== */

.offre-profil-detail{
  width: 100%;
}
.offre-profil-detail a{
  color: #000000;
  text-decoration: none;
	font-weight:700;
}

.offre-profil-detail a:hover{
  opacity: 0.8;
}
.offre-profil-detail__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 60px) clamp(18px, 4vw, 56px);
}

/* Top : 2 colonnes (≈ 38/62) */
.offre-profil-detail__top{
  display: grid;
  grid-template-columns: 38% 62%;
  gap: clamp(18px, 4vw, 60px);
  align-items: stretch;
}

/* Colonne gauche : photo + infos en dessous */
.offre-profil-detail__left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
	height:100%;
}

/* Photo plus grande */
.offre-profil-detail__media{
  display: block;
}

.offre-profil-detail__img{
  width: 190px;          /* ajuste 180–200 si besoin */
  height: 190px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

/* Bloc identité sous la photo */
.offre-profil-detail__id{
  width: 100%;
}

.offre-profil-detail__name{
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 6px 0;
  color: #000;
}
.offre-profil-detail__role{
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: #000000;
  margin:0;
}

.offre-profil-detail__infos{
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: #000;
}
.offre-profil-detail__infos p{
  margin: 0;
}

/* Pitch (colonne droite) */
/* Colonne droite : centrage vertical du pitch */
.offre-profil-detail__right{
  display: flex;
  align-items: center;   /* centrage vertical */
  height: 100%;
}
.offre-profil-detail__pitch{
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: #000;
}
.offre-profil-detail__pitch p{
  margin: 0 0 14px 0;
}
.offre-profil-detail__pitch p:last-child{
  margin-bottom: 0;
}

/* Séparateur : noir, 2/3 de la colonne droite, aligné sous la colonne droite */
.offre-profil-detail__sep{
  height: 2px;
  background: #000;

  width: calc(62% * 0.66);                 /* 2/3 de la colonne droite */
  margin: 28px 0 28px calc(38% + clamp(18px, 4vw, 60px)); /* aligné sous colonne droite */
}

/* Sections */
.offre-profil-detail__section {
  margin-top: 35px;
}

.offre-profil-detail__h2{
  margin: 0 0 12px 0;
  font-size: 25px;
  font-weight: 700;
  color: #000;
}
/* WYSIWYG */
.offre-profil-detail__wys{
  font-size: 16px;          /* demandé : tout en 16px */
  line-height: 1.6;
  font-weight: 400;
  color: #000;
}

.offre-profil-detail__wys h3{
  font-size: 18px;
	color:#000000;
	padding-bottom:0;
}

.offre-profil-detail__wys p{
  margin: 0 0 12px 0;
}
.offre-profil-detail__wys p:last-child{
  margin-bottom: 0;
}




/*======================
TABLETTE 980 /PHONE/
======================*/
@media screen and (max-width: 980px){
	
	.dc_inverser_colonnes-section .dc_inverser_colonnes-ligne {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

	:root{
      --size: 170px;          /* taille globale du badge */
      --inner: 120px;         /* diamètre du cercle blanc */
    }
	.centerBadge{
      padding:10px;
    }

    /* Texte central (style proche de ton image) */
    .centerBadge .titleBadge, .centerBadge .titleBadge a{
      font-size: 16px;
    }
/* ======================================================
  SLIDER HOME
====================================================== */	
.sliderHome .nikita-fullscreen-slider .nfs-slide--image{
  background-image: var(--nfs-bg-mobile, var(--nfs-bg-desktop));
  background-position: top right; /* top + centré horizontal */
}
/* ======================================================
  MOBILE LISTE OFFRES (grille + filtres) — classes isolées
====================================================== */	
.offres-list__grid{
    grid-template-columns: 1fr;
  }
	
  .offres-list__tile-inner{
    flex-direction: column;
  }

  .offres-list__right{
    flex: 1 1 auto;
    width: 100%;
    border-left: none;
    border-top: 2px solid #000;
    padding: 10px 18px;
  }

  .offres-list__chip{
    min-height: 56px;
  }
	
/* =========================
    MOBILE Hero Offre
========================= */
  .offre-hero__inner{
    flex-direction: column;
    align-items: stretch;
	position:relative;
	  z-index:1;
	gap:0;
  }

  .offre-hero__right{
    flex: 1 1 auto;
    width: 100%;
    margin-top: 10px;
	  border-left:none;
	border-top:2px solid #000;
	padding-left:0;
  }
  /* Chaque ligne garde une hauteur mini */
  .offre-hero__chip{
    flex: 0 0 auto;       /* IMPORTANT: annule un éventuel flex:1 desktop */
    min-height: 56px;     /* ajuste: 52–64 selon ta maquette */
    padding: 14px 14px;   /* un peu plus de confort en mobile */
  }
/* La flèche mauve (hérite de --offre-hero-bg) */
.offre-hero::after{
    left: 50%;
}
/* ======================================================
 MOBILE Offre Milieu MOBILE 1 colonne + profil dernier
====================================================== */
  .offre-mid__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "lefttop"
      "right"
      "leftbottom";
    column-gap: 0;
  }

  .offre-mid__right{
    border-left: 0;
    padding-left: 0;
    margin-top: 6px;
  }

.offre-profil-detail__top{
    grid-template-columns: 1fr;
  }

  .offre-profil-detail__left{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
	align-items: center;
  }

  .offre-profil-detail__id{
    text-align: center;
  }	
/* ======================================================
 MOBILE OFFRE - TÉMOIGNAGE (maquette)
====================================================== */
 /* Témoignage intégré dans OFFRE MID : empilement centré */
  .offre-mid__left-bottom .offre-testimonial__footer{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }

  /* Centre l'image et garde la proportion définie */
  .offre-mid__left-bottom .offre-testimonial__media{
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* Meta sous la photo, centrée */
  .offre-mid__left-bottom .offre-testimonial__meta{
    text-align: center;
  }

  .offre-mid__left-bottom .offre-testimonial__name,
  .offre-mid__left-bottom .offre-testimonial__role{
    text-align: center;
  }
	
}



/*======================
MOBILE 780 /PHONE/
======================*/
@media screen and (max-width: 767px){
.noMobile{display:none;}
.team-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
.team-card__overlay, .team-card__media::after{
    opacity: 1;
    transform: none;
  }
/* Mobile : 1 colonne, sans gap, full width */
.projets-grid{
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Texte + voile visibles (pas de hover sur mobile) */
  .projets-card__overlay{
    opacity: 1;
    transform: none;
  }

  .projets-card__media::after{
    opacity: 1;
  }

  /* Optionnel : désactive le zoom au “tap” */
  .projets-card__img{
    transform: none !important;
  }
/*======================
Flèche couleur offres
======================*/
	.offre-hero::after{
    bottom: -30px;
}

}

/*======================
MOBILE 540 /PHONE/
======================*/

@media screen and (max-width: 540px){
	.fleche{width: 25px;}
	.sliderHome .nikita-fullscreen-slider {
		  height: 88vh; /* hauteur écran - header */
		}
	
	:root{
      --size: 130px;          /* taille globale du badge */
      --inner: 90px;         /* diamètre du cercle blanc */
    }

    /* Texte central (style proche de ton image) */
    .centerBadge .titleBadge{
      font-size: 10px;
    }
	
/*////////////////////////////////////////////////////////
//////////// FILTRE PAGE LISTE OFFRES ///////////////////
////////////////////////////////////////////////////////*/
/* Filtres */
.offres-list__filters{
  gap: 10px;
  max-width: 100%;
  /* gap horizontal + vertical */
  column-gap: 5px;
}

.offres-list__filter{
  padding: 8px 10px;
  font-size: 13px;
}
.offre-mid__wys p, .offre-mid__wys ul, .offre-mid__wys a{
  font-size: 15px;
  line-height: 1.8em;
}
.offre-mid__h2 {
    margin: 15px 0 10px 0;
}
.offre-mid__h3 {
    font-size: 18px;
}	

.offre-profil-detail__h2{
  font-size: 22px;
}
.offre-profil-detail__wys h3 {
    font-size: 16px;
}
	
}

/* Mobile : garder le titre lisible */
@media screen and (max-width: 480px){
  .offre-refs__title-row{
    gap: 12px;
  }
  .offre-refs__line{
    height: 1px;
  }
}