/* =====================================================================
   40-header/h-center-logo.css  (WS) — CENTER LOGO (TT4/FSE) — STABLE
   =====================================================================

   Base :
   - version d’origine conservée
   - corrections ciblées pour mieux cohabiter avec la navigation split
   - logo centré sans casser la ligne
   - décor optionnel derrière le logo

   ===================================================================== */


/* =====================================================================
   1) MANUEL D’UTILISATION (GUTENBERG / ÉDITEUR DE SITE)
   =====================================================================

   ✅ Sur le Template Part Header :
      ws-header

   ✅ Sur le Group principal du header (si besoin) :
      laisser la structure TT4 native

   ✅ Sur le bloc Navigation :
      ws-nav-split

   IMPORTANT
   ---------------------------------------------------------------------
   Ce fichier garde volontairement la logique TT4 native.
   Il ne cherche pas à remplacer toute la structure du header.

   ===================================================================== */


/* =====================================================================
   2) TOKENS & VARIABLES (config)
   ===================================================================== */

:root{
  /* Logo sizing */
  --ws-header-logo-w-mobile: 220px;
  --ws-header-logo-w-desktop: 320px;

  /* Header compact */
  --ws-header-pad-y: 6px;

  /* Ligne principale */
  --ws-header-min-h: 50px;

  /* Ajustements desktop (wrappers TT4) */
  --ws-header-desktop-top-pad: 0px;

  /* Ajustement vertical du logo */
  --ws-header-logo-nudge-y-mobile: 80px;
  --ws-header-logo-nudge-y-desktop: 80px;

  /* Décor logo */
  --ws-header-logo-decor-size: 800px;
  --ws-header-logo-decor-opacity: 0.18;
  --ws-header-logo-decor-top: -400px;

  /* Centrage optique du décor */
  --ws-header-logo-decor-x: -52%;

  /* Décor actif */
  --ws-header-logo-decor-image: image-set(
    url("/wp-content/uploads/2026/03/Amandine-Background-Sun-150x150.webp") 1x,
    url("/wp-content/uploads/2026/03/Amandine-Background-Sun-300x300.webp") 2x,
    url("/wp-content/uploads/2026/03/Amandine-Background-Sun-768x768.webp") 3x
  );
}


/* =====================================================================
   3) SCOPE ROBUSTE (TT4/FSE)
   ===================================================================== */

.ws-header{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  position: relative;
  z-index: 40;
}

.ws-header,
.ws-header *{
  box-sizing: border-box;
}


/* =====================================================================
   4) HEADER COMPACT
   ===================================================================== */

.ws-header .has-global-padding{
  padding-top: var(--ws-header-pad-y) !important;
  padding-bottom: var(--ws-header-pad-y) !important;
}


/* =====================================================================
   5) LOGO RESPONSIVE + NUDGE
   ===================================================================== */

.ws-header .wp-block-site-logo img{
  width: var(--ws-header-logo-w-mobile);
  max-width: 100%;
  height: auto;
}

.ws-header .wp-block-site-logo{
  margin-top: var(--ws-header-logo-nudge-y-mobile);
  margin-bottom: 0 !important;
}

@media (min-width: 768px){
  .ws-header .wp-block-site-logo img{
    width: var(--ws-header-logo-w-desktop);
  }

  .ws-header .wp-block-site-logo{
    margin-top: var(--ws-header-logo-nudge-y-desktop);
  }
}


/* =====================================================================
   6) LIGNE PRINCIPALE DU HEADER
   ---------------------------------------------------------------------
   On reste proche de ta version d’origine, mais on évite que la ligne
   casse si le menu prend un peu de place.
   ===================================================================== */

.ws-header
.wp-block-group.is-content-justification-space-between.is-layout-flex{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative;
  min-height: var(--ws-header-min-h);
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow: visible !important;
  max-width: 100%;
}

/* Le premier groupe ne doit pas rajouter du bruit */
.ws-header
.wp-block-group.is-content-justification-space-between.is-layout-flex
> .wp-block-group:first-child{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Centre réellement le groupe logo dans la ligne */
.ws-header
.wp-block-group.is-content-justification-space-between.is-layout-flex
> .wp-block-group:first-child{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  flex: 0 0 auto;
}

/* Le brand ne doit pas écraser le reste */
.ws-header .wp-block-site-title{
  margin: 0 !important;
  line-height: 1.2;
  text-align: center;
  display: none;
}


/* =====================================================================
   7) Ajustements desktop
   ===================================================================== */

@media (min-width: 768px){

  .ws-header
  .wp-block-group.alignwide.has-background.has-global-padding.is-layout-constrained{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ws-header
  .wp-block-group.alignwide.is-content-justification-space-between.is-layout-flex{
    align-items: center !important;
    padding-top: var(--ws-header-desktop-top-pad) !important;
  }
}


/* =====================================================================
   8) DÉCOR DERRIÈRE LE LOGO
   ===================================================================== */

.ws-header .wp-block-site-logo{
  position: relative;
  z-index: 2;
  overflow: visible;
}

.ws-header .wp-block-site-logo::before{
  content: "";
  position: absolute;

  width: var(--ws-header-logo-decor-size);
  height: var(--ws-header-logo-decor-size);

  left: 50%;
  top: var(--ws-header-logo-decor-top);
  transform: translateX(var(--ws-header-logo-decor-x));

  background-image: var(--ws-header-logo-decor-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  opacity: var(--ws-header-logo-decor-opacity);
  pointer-events: none;
  z-index: -1;
}


/* =====================================================================
   9) SÉCURITÉS DE COHABITATION AVEC LA NAV
   ===================================================================== */

/* Le groupe nav doit pouvoir rétrécir */
.ws-header nav.ws-nav-split{
  min-width: 0;
}

/* Le wrapper de droite TT4 ne doit pas imposer de largeur absurde */
.ws-header
.wp-block-group.is-content-justification-space-between.is-layout-flex
> .wp-block-group:last-child{
  min-width: 0;
  flex: 1 1 auto;
}

/* Le wrapper du logo reste compact */
.ws-header
.wp-block-group.is-content-justification-space-between.is-layout-flex
> .wp-block-group:first-child{
  flex: 0 0 auto;
}


/* =====================================================================
   10) MAINTENANCE RAPIDE
   =====================================================================

   Taille logo :
   :root{
     --ws-header-logo-w-mobile: 200px;
     --ws-header-logo-w-desktop: 320px;
   }

   Position logo :
   :root{
     --ws-header-logo-nudge-y-mobile: -12px;
     --ws-header-logo-nudge-y-desktop: -16px;
   }

   Taille décor :
   :root{
     --ws-header-logo-decor-size: 500px;
   }

   Décor OFF :
   :root{
     --ws-header-logo-decor-image: none;
   }

   ===================================================================== */


/* DEBUG */
/*
.ws-header{ outline: 3px solid red !important; }
*/