/* ===========================
   BODY (Helvetica Neue)
   =========================== */
html body,
p, li, a,
.mkdf-section-subtitle,
.mkdf-title-description,
.mkdf-st-text,
.mkdf-st-title + .mkdf-st-text,
.wpb_text_column, .wpb_text_column p {
  font-family: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ===========================
   TITRES (Bebas Kai)
   =========================== */
h1, h2, h3, h4, h5, h6,
.mkdf-title-holder .mkdf-title-text,
.mkdf-page-title h1,
.mkdf-section-title-holder .mkdf-st-title {
  font-family: "bebas-kai", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ===== TITRE ANIMÉ (Type Out / Custom Font) ===== */
.mkdf-cf-typed,
.mkdf-cf-typed-wrap,
.mkdf-cf-typed *,
.mkdf-cf-typed-wrap * {
  font-family: "bebas-kai", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.02em;
}

/* ===========================
   MENUS (Bebas Kai)
   =========================== */
/* Label "Menu" (burger) */
a.mkdf-expanding-menu-opener .mkdf-header-icon-label,
.mkdf-header-icon-label,
.mkdf-header-icon-label * {
  font-family: "bebas-kai", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Menu principal */
.mkdf-main-menu > ul > li > a,
.mkdf-main-menu > ul > li > a * {
  font-family: "bebas-kai", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.03em;
}

/* Menu mobile / plein écran */
.mkdf-mobile-nav ul li a,
.mkdf-mobile-nav ul li a *,
.mkdf-fullscreen-menu ul li a,
.mkdf-fullscreen-menu ul li a * {
  font-family: "bebas-kai", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* --- Logo mobile : taille contrôlée, pas d'étirement --- */
@media (max-width: 767.98px) {
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper {
    max-width: 70vw;
    overflow: hidden;
  }
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper a {
    display: block;
    height: 40px !important;        /* hauteur cible d'affichage */
    line-height: 40px !important;
  }
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper a img,
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper img,
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper svg {
    height: 36px !important;         /* ajuste à 32–40px selon ton goût */
    max-height: 36px !important;
    width: auto !important;          /* conserve les proportions */
  }
  /* Évite qu'une règle du thème force 100% de hauteur */
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper img {
    max-width: 100%;
    object-fit: contain;
  }
}
/* ===== Logo : tablette (entre 768px et ~1280px) ===== */
@media (min-width: 768px) and (max-width: 1280px) {
  /* wrapper desktop */
  .mkdf-page-header .mkdf-logo-wrapper { max-width: 55vw; overflow: hidden; }

  .mkdf-page-header .mkdf-logo-wrapper a {
    display: block;
    height: 48px !important;        /* hauteur d'affichage souhaitée */
    line-height: 48px !important;
  }

  /* images & svg du logo desktop */
  .mkdf-page-header .mkdf-logo-wrapper img,
  .mkdf-page-header .mkdf-logo-wrapper a img,
  .mkdf-page-header .mkdf-logo-wrapper svg {
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;          /* conserve les proportions */
    object-fit: contain;
  }

  /* variantes normal/dark/light utilisées par Holmes */
  .mkdf-logo-wrapper img.mkdf-normal-logo,
  .mkdf-logo-wrapper img.mkdf-dark-logo,
  .mkdf-logo-wrapper img.mkdf-light-logo {
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
  }
}

/* ===== Sécurité : ne jamais étirer le logo en hauteur sur mobile aussi ===== */
@media (max-width: 767.98px) {
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper a { height: 40px !important; line-height: 40px !important; }
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper img,
  .mkdf-mobile-header-holder .mkdf-mobile-logo-wrapper svg { height: 36px !important; max-height: 36px !important; width: auto !important; }
}
/* ---------- Décalage du contenu sous le header : Portfolio single ---------- */
/* Hauteur de header (à ajuster si besoin) */
:root {
  --header-h-desktop: 96px;  /* 70–100px selon ton header */
  --header-h-tablet: 84px;
  --header-h-mobile: 64px;
}

/* Mise à l'écart du contenu principal */
body.single-portfolio-item .mkdf-content > .mkdf-content-inner {
  padding-top: var(--header-h-desktop);
}

/* Variantes de conteneur utilisées par Holmes */
body.single-portfolio-item .mkdf-content .mkdf-container > .mkdf-container-inner,
body.single-portfolio-item .mkdf-content .mkdf-full-width > .mkdf-full-width-inner {
  padding-top: var(--header-h-desktop);
}

/* Si une Title Area est affichée sur Portfolio, on décale la title area elle-même */
body.single-portfolio-item .mkdf-title-holder {
  margin-top: var(--header-h-desktop);
}

/* Breakpoints */
@media (max-width: 1280px) {
  body.single-portfolio-item .mkdf-content > .mkdf-content-inner,
  body.single-portfolio-item .mkdf-content .mkdf-container > .mkdf-container-inner,
  body.single-portfolio-item .mkdf-content .mkdf-full-width > .mkdf-full-width-inner,
  body.single-portfolio-item .mkdf-title-holder {
    padding-top: var(--header-h-tablet);
    margin-top: var(--header-h-tablet);
  }
}
@media (max-width: 767.98px) {
  body.single-portfolio-item .mkdf-content > .mkdf-content-inner,
  body.single-portfolio-item .mkdf-content .mkdf-container > .mkdf-container-inner,
  body.single-portfolio-item .mkdf-content .mkdf-full-width > .mkdf-full-width-inner,
  body.single-portfolio-item .mkdf-title-holder {
    padding-top: var(--header-h-mobile);
    margin-top: var(--header-h-mobile);
  }
}

/* === HERO en bord-à-bord, indépendant de la ROW === */
.hero-video{
  position: relative;
  /* plein écran en largeur, centré par rapport au viewport */
  width: 100dvw;                 /* d(vw) évite les décalages de scrollbar */
  max-width: 100dvw;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);

  /* hauteur maîtrisée (pas 100vh pour montrer qu'on peut scroller) */
  height: clamp(420px, 70vh, 820px);
  overflow: hidden;
}

/* — Le widget mkdf doit occuper 100% de la zone — */
.hero-video .mkdf-video-button-holder,
.hero-video .mkdf-video-button{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* — L’image remplit tout (cover), visible (au cas où une ancienne règle la cachait) — */
.hero-video .mkdf-video-button-image{
  position: absolute !important;
  inset: 0 !important;     /* top/right/bottom/left: 0 */
  z-index: 1;
}
.hero-video .mkdf-video-button-image img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* — Bouton Play par-dessus, bien centré — */
.hero-video .mkdf-video-button-play{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
}

/* — Mobile : plus court pour éviter l’effet “trop haut” — */
@media (max-width: 767px){
  .hero-video{ height: clamp(300px, 52vh, 560px); }
}

/* Évite toute barre de scroll horizontale résiduelle */
html, body { overflow-x: hidden; }

/* HERO plus haut (desktop ~82vh) */
.hero-video{ height: clamp(560px, 82vh, 1000px); }

@media (max-width: 1200px){
  .hero-video{ height: clamp(480px, 76vh, 920px); }
}
@media (max-width: 767px){
  .hero-video{ height: clamp(360px, 60vh, 700px); }
}

.mkdf-btn-description {
  display: none !important;
}
/* PORTFOLIO SINGLE – bouton Back seulement */
.mkdf-portfolio-single-holder .mkdf-ps-back-btn a.mkdf-btn{
  position: relative;            /* permet de poser notre libellé par-dessus */
}

/* cache la sous-ligne */
.mkdf-portfolio-single-holder .mkdf-ps-back-btn .mkdf-btn-description{
  display: none !important;
}

/* cache le texte d'origine "Back to everything" */
.mkdf-portfolio-single-holder .mkdf-ps-back-btn .mkdf-btn-text{
  visibility: hidden !important;
}

/* injecte le nouveau libellé par-dessus le bouton */
.mkdf-portfolio-single-holder .mkdf-ps-back-btn a.mkdf-btn::after{
  content: "Back to Our Work";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font: inherit;
  color: inherit;
  line-height: 1;
}
/* Cadre (padding) de 10px tout autour, UNIQUEMENT sur la home */
body.home,
body.front-page{
  padding: 30px;
  box-sizing: border-box;
}

/* Pour que tout l’intérieur respecte le box-sizing de body, uniquement sur la home */
body.home *, body.home *::before, body.home *::after,
body.front-page *, body.front-page *::before, body.front-page *::after{
  box-sizing: inherit;
}

/* WPBakery Text Block : garder la typo des titres même si c'est un lien */
.wpb_text_column h1 a,
.wpb_text_column h2 a,
.wpb_text_column h3 a,
.wpb_text_column h4 a,
.wpb_text_column h5 a,
.wpb_text_column h6 a {
  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  text-decoration: none; /* optionnel, supprime le soulignement bleu */
}

/* ===== CLAMP GLOBAL DU HEADER & DU LOGO (Holmes/Mikado) ===== */

/* Variables par breakpoint */
@media (min-width:1366px){
  :root{ --hdr:72px; --logo:56px; }
}
@media (min-width:1025px) and (max-width:1365px){
  :root{ --hdr:64px; --logo:50px; }   /* <- zone qui posait souci */
}
@media (max-width:1024px){
  :root{ --hdr:56px; --logo:44px; }
}

/* Conteneurs de header : ne jamais dépasser --hdr */
.mkdf-page-header,
.mkdf-page-header .mkdf-sticky-holder,
.mkdf-logo-area,
.mkdf-menu-area,
.mkdf-logo,
.mkdf-logo-wrapper{
  height: var(--hdr) !important;
  min-height: var(--hdr) !important;
  line-height: var(--hdr) !important;
}

/* Empêche l’agrandissement et l’empilement vertical */
.mkdf-logo-wrapper{ 
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}
.mkdf-logo a{
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Image du logo : garde le ratio, jamais de height:100% */
.mkdf-logo img,
.mkdf-logo a img,
.mkdf-sticky-header .mkdf-logo-wrapper img,
.mkdf-mobile-header .mkdf-logo-wrapper img{
  height: auto !important;
  width: auto !important;
  max-height: var(--logo) !important;
  object-fit: contain !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Neutralise le “shrink/scale” du sticky */
.mkdf-sticky-header,
.mkdf-page-header .mkdf-sticky-holder{
  transform: none !important;
  -webkit-transform: none !important;
}