.nav-item.edu {
  color: var(--teal);
}

.nav-item.prod {
  color: var(--coral);
}

.nav-item.asso {
  color: var(--gold);
}

.nav-item.actu {
  color: var(--green);
}

/* HERO */
.hero {
  border-bottom: var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;
  overflow: hidden;
  position: relative;
}

.hero-left {
  padding: 36px 25px 36px;
  border-right: var(--border);
  position: relative;
  z-index: 1;
}

.hero-tag {
  display: inline-block;
  background: var(--teal);
  color: var(--navy);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 2px solid var(--black);
  margin-bottom: 20px;
}

.hero-h1 {
  font-size: xxx-large;
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero-h1 .accent {
  color: var(--gold);
  display: block;
}

.hero-h1 .accent2 {
  color: var(--teal);
}

.hero-sub {
  font-size: x-large;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  margin-bottom: 24px;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}



/* ===== HERO RIGHT — HONEYCOMB ===== */
.hero-right {
  position: relative;
  padding-left: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-right-bg {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.hero-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px;
  border-bottom: var(--border);
  position: relative;
  overflow: hidden;
}

.hero-stat:last-child {
  border-bottom: none;
}

.hero-stat-bg {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  height: 100%;
}

.stat-num {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 3px;
  position: relative;
  z-index: 1;
}

.stat-num.teal {
  color: var(--teal);
}

.stat-num.coral {
  color: var(--coral);
}

.stat-num.gold {
  color: var(--gold);
}

.stat-num.green {
  color: var(--green);
}

.stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  position: relative;
  z-index: 1;
}

/* TICKER */
.ticker {
  background: var(--gold);
  border-bottom: var(--border);
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-inner {
  display: inline-block;
  animation: ticker 22s linear infinite;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--navy);
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.ticker-sep {
  margin: 0 18px;
  color: var(--coral);
}

/* GATES */
.gates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--border);
}

.gate {
  display: flex;
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.gate-container {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-right: 5%;
}

.gate-edu {
  background: var(--white);
  border-right: var(--border);
}

.gate-prod {
  background: var(--white);
}

.gate-num {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

.gate-edu .gate-num {
  color: var(--teal);
}

.gate-prod .gate-num {
  color: var(--coral);
}

.gate-title {
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 8px;
  line-height: 1.15;
}

.gate-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 240px;
}

.gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 8px 16px;
  border: 2.5px solid var(--black);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  transition: box-shadow 0.1s, transform 0.1s;
  position: absolute;
  right: 5%;
  z-index: 1;
  top: 37%;
}

.gate-btn:hover {
  box-shadow: 1px 1px 0 var(--black);
  transform: translate(2px, 2px);
}

.gate-edu .gate-btn {
  background: var(--teal);
  color: var(--navy);
}

.gate-prod .gate-btn {
  background: var(--coral);
  color: var(--white);
}

.gate-deco {
  position: absolute;
  right: -10px;
  bottom: -10px;
  opacity: 0.08;
  pointer-events: none;
}

/* PROJECTS */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: var(--border);
  background: var(--black);
}

.projects-header-title {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
}

.projects-header-link {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 5px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--border);
}

.proj-card {
  border-right: var(--border);
  overflow: hidden;
  position: relative;
}

.proj-card:last-child {
  border-right: none;
}

.proj-card:nth-child(4) {
  border-right: var(--border);
}

.proj-card:nth-child(4),
.proj-card:nth-child(5),
.proj-card:nth-child(6) {
  border-top: var(--border);
}

.proj-thumb {
  min-height: 160px;
  height:30vh;
  position: relative;
  overflow: hidden;
  background: var(--navy);
}

.proj-body {
  padding: 14px 14px 16px;
}

.proj-tag {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 2px solid var(--black);
  display: inline-block;
  margin-bottom: 8px;
}

.proj-tag-edu {
  background: var(--teal);
  color: var(--navy);
}

.proj-tag-prod {
  background: var(--coral);
  color: var(--white);
}

.proj-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--black);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.proj-meta {
  font-size: 11px;
  color: #888;
}

/* SPLIT CTA */
.split-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--border);
}

.split-block {
  padding: 28px;
}

.split-edu {
  background: var(--teal);
  border-right: var(--border);
}

.split-prod {
  background: var(--coral);
}

.split-eyebrow {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.split-edu .split-eyebrow {
  color: var(--navy);
}

.split-prod .split-eyebrow {
  color: var(--white);
}

.split-q {
  font-size: large;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.split-edu .split-q {
  color: var(--navy);
}

.split-prod .split-q {
  color: var(--white);
}

.split-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 18px;
}

.split-list li {
  font-size: medium;
  display: flex;
  align-items: center;
  gap: 8px;
}

.split-edu .split-list li {
  color: rgba(25, 27, 53, 0.75);
}

.split-prod .split-list li {
  color: rgba(255, 255, 255, 0.8);
}

.split-list li::before {
  content: '⬡';
  /* vide */
  /* ou '⬢' pour plein */
  font-size: 10px;
  color: currentColor;
  flex-shrink: 0;
  line-height: 1;
}

.split-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.1s, transform 0.1s;
  border: 2.5px solid rgba(0, 0, 0, 0.3);
}

.split-btn:hover {
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  transform: translate(2px, 2px);
}

.split-edu .split-btn {
  background: var(--navy);
  color: var(--white);
}

.split-prod .split-btn {
  background: var(--white);
  color: var(--coral);
}

/* PARTNERS */
.partners {
  padding: 20px 28px;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--white);
}

.partners-label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #aaa;
  margin-right: 4px;
  white-space: nowrap;
}

.partner-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--black);
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* FOOTER */
.footer {
  background: var(--black);
  padding: 20px 28px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
}

.footer-logo {
  font-size: 14px;
  font-weight: 900;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-logo span {
  color: var(--teal);
}

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-link {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.footer-socials {
  display: flex;
  gap: 8px;
}

.social-btn {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  cursor: pointer;
}

.social-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* ===== HONEYCOMB (adapté de ton code) ===== */
.hex-hive {
  display: flex;
  --s: 200px;
  --m: 10px;
  --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
  width: max-content;
  height: 100%;
  margin: 0px -9% 0 -4%;
  ;
  padding-left: calc(var(--m)*2);
  position: relative;
  z-index: 1;
}

.hex-hive-inner {
  font-size: 0;
  margin-bottom: -15%;
}

.hex-hive-inner::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 120%;
  shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),
      #000 0 var(--f));
}

/* Chaque cellule hexagonale */
.hex-wrap {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s) * 1.1547);
  display: inline-block;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  margin-bottom: calc(var(--m) - var(--s) * 0.2885);
  background: #111111;
  /* couleur de la bordure */
  font-size: initial;
  position: relative;
}

.hex-wrap:hover {
  animation: scaling 0.3s ease-in-out forwards;
}

.hex-cell {
  /* remplace les anciens positionnements */
  position: absolute;
  inset: 3px;
  /* épaisseur de la bordure */
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  overflow: hidden;
  background: var(--sand);
  cursor: pointer;
  transition: filter 0.3s ease;
  display: flex;
  justify-content: center;
}

.hex-cell:hover {
  filter: brightness(1.15) grayscale(0) !important;
  z-index: 10;
}

/* couleurs des cellules visibles */
.hex-cell.c-teal {
  background: var(--teal);
}

.hex-cell.c-coral {
  background: var(--coral);
}

.hex-cell.c-gold {
  background: var(--gold);
}

.hex-cell.c-green {
  background: var(--green);
}

.hex-cell.c-navy {
  background: #252848;
}

/* cellule vidéo */
.hex-cell.c-video {
  background: #000;
  pointer-events: none;
  overflow: hidden;
}

.hex-cell.c-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* contenu texte dans les cellules */
.hex-cell-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 2;
}

.hex-cell-label span {
  font-size: large;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
  padding: 0 8px;
}

.hex-cell-label .ti {
  font-size: 20px;
  color: var(--navy);
}

.hex-cell.c-navy .hex-cell-label span,
.hex-cell.c-navy .hex-cell-label .ti,
.hex-cell.c-coral .hex-cell-label span,
.hex-cell.c-coral .hex-cell-label .ti {
  color: #fff;
}

/* onde audio animée */
.wave {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 40px;
}

.wave span {
  width: .5px;
  background: var(--white);
  border-radius: 16px;
  animation: wave 1s ease-in-out infinite;
}

.wave span:nth-child(1) {
  height: 15px;
  animation-delay: 0s;
  background: var(--teal)
}

.wave span:nth-child(2) {
  height: 22px;
  animation-delay: .15s;
  background: var(--coral)
}

.wave span:nth-child(3) {
  height: 17px;
  animation-delay: .3s;
  background: var(--gold)
}

.wave span:nth-child(4) {
  height: 24px;
  animation-delay: .1s;
  background: var(--green)
}

.wave span:nth-child(5) {
  height: 14px;
  animation-delay: .25s;
  background: var(--navy)
}

@keyframes wave {

  0%,
  100% {
    transform: scaleY(.5)
  }

  50% {
    transform: scaleY(1)
  }
}

@keyframes scaling {
  0% {
    transform: scale(1)
  }

  100% {
    transform: scale(1.15)
  }
}

.mz-demo {
  width: min(440px, 90vw);
  aspect-ratio: 1 / 1;
}

.mz-card {
  --ink: #ffffff;
  /* couleur du texte du logo */
  position: relative;
  width: 100%;
  height: 100%;
  /* épouse le conteneur, quelle que soit sa forme */
  container-type: inline-size;
  /* active les unités cqi (basées largeur) */
  overflow: hidden;
  font-weight: 800;
}

/* ---- PHOTO ----
     Remplace .mz-card__placeholder par :
     <img class="mz-card__media" src="ta-photo.jpg" alt=""> */
.mz-card__media {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: 0;
}

.mz-card__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqi;
  background: #ea5e5c4a;
  color: rgba(255, 255, 255, .85);
  font-size: 3cqi;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mz-card__placeholder svg {
  width: 11cqi;
  height: 11cqi;
  opacity: .85;
}

.mz-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(25, 27, 53, 0) 62%, rgba(25, 27, 53, .22) 100%);
}

/* ---- CADRE + VAGUE ----
     preserveAspectRatio="none" -> le tracé s'étire pour remplir
     n'importe quelle forme. Bords à ~10% (108/1080) de chaque côté. */
.mz-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ---- LOGO « MOLENZINE » plié au coin ----
     top en %  -> suit la HAUTEUR (reste sur le bord haut du cadre)
     left/taille en cqi -> suivent la LARGEUR
     MOLENZ et INE partagent le même top : le Z reste aligné à gauche du I. */
.mz-card__logo span {
  position: absolute;
  z-index: 4;
  color: var(--ink);
  font-size: 6cqi;
  letter-spacing: .04em;
  line-height: 1;
}

.mz-card__logo .is-top {
  top: 9.5%;
  left: 14.5cqi;
  font-size: large;
}

/* INE    */
.mz-card__logo .is-side {
  top: 11.5%;
  left: 5.55cqi;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: large;
}

/* ===========================================================
     .blr-tile — tile responsive, bordures motif en haut et en bas
     =========================================================== */
.blr-tile {
  --bel-cell: 3px;
  /* échelle du motif (1 carreau) */
  --bel-motif-h: calc(var(--bel-cell) * 5);
  /* hauteur du motif = 5 carreaux */
  --bel-rep: calc(var(--bel-cell) * 24);
  /* largeur d'une répétition = 24 carreaux */
  --bel-band-h: calc(var(--bel-cell) * 7.5);
  /* hauteur totale de la bande (motif + barre pleine) */

  position: relative;
  width: 100%;
  background: var(--bel-white);
  display: flex;
  flex-direction: column;
  height: -webkit-fill-available;
}

/* --- une bande de bordure --- */
.blr-tile__bel {
  position: relative;
  height: var(--bel-band-h);
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--bel-field);
}

.blr-tile__bel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--bel-motif-h);
  background: var(--bel-ink);
  /* le motif sert de masque : seul le dessin laisse passer la couleur --bel-ink */
  -webkit-mask: var(--bel-mask) repeat-x;
  mask: var(--bel-mask) repeat-x;
  -webkit-mask-size: var(--bel-rep) 100%;
  mask-size: var(--bel-rep) 100%;
}

/* masque commun (motif pointe vers le haut dans le fichier SVG) */
.blr-tile__bel {
  --bel-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2050%22%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%220%22%20width%3D%2230%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22110%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22170%22%20y%3D%220%22%20width%3D%2230%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2250%22%20y%3D%2210%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%2210%22%20width%3D%2240%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22170%22%20y%3D%2210%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22220%22%20y%3D%2210%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%2230%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2290%22%20y%3D%2220%22%20width%3D%2260%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22210%22%20y%3D%2220%22%20width%3D%2230%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%2230%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2280%22%20y%3D%2230%22%20width%3D%2230%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%2230%22%20width%3D%2230%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%2230%22%20width%3D%2230%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2240%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%2280%22%20y%3D%2240%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22140%22%20y%3D%2240%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%2240%22%20width%3D%2220%22%20height%3D%2210%22%2F%3E%3C%2Fsvg%3E");
}

/* HAUT : rouge sur blanc, motif vers le bas (vers l'intérieur) */
.blr-tile__bel--top {
  --bel-field: var(--bel-white);
  --bel-ink: var(--bel-red);
}

.blr-tile__bel--top::before {
  bottom: 0;
  transform: scaleY(-1);
}

/* BAS : blanc sur rouge, motif vers le haut (vers l'intérieur) */
.blr-tile__bel--bottom {
  --bel-field: var(--bel-red);
  --bel-ink: var(--bel-white);
}

.blr-tile__bel--bottom::before {
  top: 0;
}

/* --- zone de contenu --- */
.blr-tile__content {
  flex: 1 1 auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #bbb;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background:var(--bel-red)
}
.blr-tile__title{
  font-size: xx-large;
  color: var(--bel-red);
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.blr-tile__subtitle{
  font-size: large;
  color: var(--bel-red);
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}