/* HEADER */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  mix-blend-mode: difference;
}

.separateur-bandeau {
  color: grey;
  font-size: 1.3em;
}

.menu {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 80px;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.menu-left { justify-self: start; }
.menu-center { justify-self: center; }
.menu-right { justify-self: end; }

.menu-link {
  color: black;
  font-weight: 200;
  font-size: 1.4em;
  text-decoration: none;
  transition: color 0.3s ease;
}

#pauldecathelineau {
  font-size: 1.8em;
  font-weight: 900;
}

#processus, #projets {
  font-weight: 900;
}

/* NAME LOGO ZONE */
.menu-center {
  position: relative;
  text-align: center;
}

.name-logo-wrapper {
  position: relative;
  display: inline-block;
}

.name-text {
  display: inline-block;
}

.name-logos {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;

  /* ✅ espace avec paul de cathelineau */
  margin-left: clamp(0.1em, 2vw, 2em);

  /* ✅ espace ENTRE logos */
  gap: clamp(0.1em, 1vw, 1em);
}

.inline-logo {
  color: black;
  mix-blend-mode: difference;
  opacity: 0.9;
  vertical-align: middle;
  transition: color 0.3s ease;

  /* ✅ progressif AVANT le menu mobile, min 1.8em */
  height: clamp(1.8em, 3vw, 2.5em);
}

/* ✅ min 1.8em */
@media (max-width: 420px) {
  .inline-logo { height: 1.8em; }
}

/* ===================================== */
/* ===== VARIANTE PAGE LISTE PROJETS === */
/* ===================================== */

body.liste-projets #header { mix-blend-mode: normal; }

body.liste-projets header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  color: black;
  transition: none;
  opacity: 1;
  box-shadow: none;
  z-index: 1000;
}

body.liste-projets header.transparent {
  background: white !important;
  color: black !important;
}

body.liste-projets .inline-logo,
body.liste-projets #header img {
  mix-blend-mode: normal;
}

body.liste-projets header::after { content: none; }

/* ========================= */
/*  RESPONSIVE HEADER (iPhone) */
/* ========================= */
@media (max-width: 768px) {

  .menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "center center"
      "left   right";
    align-items: center;
    justify-items: stretch;
    height: auto;
    mix-blend-mode: normal;
    padding: 0.5em var(--gutter);
    box-sizing: border-box;
    margin-top: 10px;
  }

  .menu-center {
    grid-area: center;
    width: 100%;
    border-bottom: 1px dashed grey;
    padding-bottom: 0.5em;
    margin-bottom: 0.4em;
    box-sizing: border-box;

    position: static !important;
    text-align: left !important;
    justify-self: stretch !important;
    display: block !important;
  }

  /* ✅ rapprochement contrôlé en mobile */
  .name-logo-wrapper{
    position: static !important;
    display: flex !important;
    align-items: center;
    width: 100% !important;

    justify-content: flex-start !important;
    gap: clamp(0.6em, 2vw, 1.2em) !important; /* espace NOM -> LOGOS */
  }

  #pauldecathelineau,
  #pauldecathelineau .name-text {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    display: inline-block;
  }

  .name-logos{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    display: flex !important;
    align-items: center;
    justify-content: flex-end;

    margin-left: auto !important; /* logos à droite */
    gap: clamp(0.45em, 1.2vw, 0.6em) !important; /* espace ENTRE logos */
    flex: 0 0 auto;
  }

  .inline-logo {
    height: 1.8em; /* ✅ inchangé */
    opacity: 1;
    vertical-align: middle;
  }

  .menu-left  { grid-area: left;  justify-self: start; }
  .menu-right { grid-area: right; justify-self: end;   }

  .menu-link {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    color: black;
    text-decoration: none;
  }

  #projets,
  #processus {
    font-size: 1.1rem !important;
  }

  #header { mix-blend-mode: normal; }
  .inline-logo { mix-blend-mode: normal; }
}