@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Inter:wght@400;500;600&display=swap');

:root {
    --primary: #0F2A47;
    --secondary: #2BB8A5;
    --accent: #CBA135;
    --light: #F5F7FA;
}

body {
    font-family: 'Inter', sans-serif;
    color: #333;
    line-height: 1.6;
}

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.bg-primary {
    background-color: var(--primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.text-accent {
    color: var(--accent);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

/* Portfolio item hover effect */
.portfolio-item {
    transition: all 0.3s ease;
    transform: translateY(0);
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-text {
        font-size: 2.5rem;
    }
}

/* --- HERO LAYOUT --- */
.hero{
  position: relative;
  min-height: 100svh;              /* meilleure unité sur iOS */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;               /* pour overlay propre */
}
.hero-media{ position:absolute; inset:0; }
.hero-media picture, .hero-media img{
  width:100%; height:100%; display:block;
}
.hero-media img{
  object-fit: cover;
  object-position: right center;    /* desktop: on favorise le logo à droite */
}
@media (max-width: 768px){
  .hero-media img{
    object-position: center;        /* mobile: on recentre le texte */
  }
}

/* voile foncé pour lisibilité */
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,42,71,.35), rgba(0,0,0,.45));
}

/* ===== HERO CONTAINER ===== */
.hero{
  position: relative;
  min-height: 88vh;                 /* moins haut que 100% pour remonter le contenu */
  padding-top: clamp(48px, 6vh, 84px); /* espace haut (navbar + respiration), adaptable */
  display: flex; align-items: start; justify-content: center;
  overflow: hidden; isolation: isolate;
}

/* ===== GRILLE AVEC ZONES (Desktop) ===== */
.hero-grid{
  width:min(1200px, 92%);
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-areas:
    "left right"
    "left cta";
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: clamp(12px, 2.5vh, 24px);
  /* on supprime l'ancien translateY qui laissait trop d'espace */
  transform: none;
}

.hero-left  { grid-area:left;  align-self:center; }
.hero-right { grid-area:right; align-self:center; }
.hero-cta-bottom{ grid-area:cta; }

/* Titres gauche : un peu plus serrés */
.eyp{
  font-family:"Poppins",system-ui,-apple-system,Arial,sans-serif;
  font-weight:800; line-height:1.03; letter-spacing:.01em;
  margin: 0 0 .35rem 0;
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
}
.hero-subtitle{
  margin: 0 0 1.1rem; opacity:.95;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
}

/* Bloc droit : tailles et espacement calibrés */
.nlp-top{ display:flex; gap: .9rem; }
.nlp-next,.nlp-level{
  font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size: clamp(1.6rem, 3.3vw, 2.4rem);
}
.nlp-bottom{ display:flex; align-items:center; gap: .9rem; margin-top: .25rem; }
.nlp-protocol{
  color:#2BB8A5; font-weight:700; text-transform:uppercase; letter-spacing:.35em;
  font-size: clamp(.9rem, 1.4vw, 1.1rem);
}
.nlp-mark{ width: clamp(44px, 3.8vw, 60px); height:auto; }

/* Boutons sous le bloc droit */
.hero-cta-bottom{
  display:flex; gap:1rem; justify-content:flex-start;
  margin-top: .6rem;          /* collé au bloc droit */
}
.btn{ padding:.9rem 1.5rem; border-radius:999px; font-weight:700; }

/* ===== MOBILE / TABLET ===== */
@media (max-width:1024px){
  .hero{ min-height: 100svh; padding-top: clamp(36px, 5vh, 64px); }
  .hero-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "cta";
    row-gap: 1rem;
    text-align:center;
  }
  .hero-left,.hero-right{ align-items:center; justify-self:center; }
  .hero-cta-bottom{ justify-content:center; flex-direction:column; }
  .nlp-mark{ width:56px; }
}

/* iOS fix */
html{-webkit-text-size-adjust:100%;}
/* Boutons */
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:flex-start; }
@media (max-width:1024px){ .hero-cta{ justify-content:center; } }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.5rem; border-radius:999px; font-weight:700; transition:transform .15s, background .2s, color .2s, border-color .2s; }
.btn-primary{ background:#CBA135; color:#fff; }
.btn-primary:hover{ background:#b48c2c; transform:translateY(-1px); }
.btn-ghost{ color:#fff; border:2px solid #fff; }
.btn-ghost:hover{ background:#fff; color:#0F2A47; transform:translateY(-1px); }

/* ---- Colonne droite : bloc typographique + picto ---- */
.hero-right{ display:flex; justify-content:flex-start; }
@media (max-width:1024px){ .hero-right{ justify-content:center; } }

.nlp-wordmark{ display:flex; flex-direction:column; gap:.5rem; }
.nlp-top{ display:flex; gap:1rem; align-items:baseline; }
.nlp-next, .nlp-level{
  font-family:"Poppins", system-ui, -apple-system, Arial, sans-serif;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size: clamp(2rem, 5vw, 3rem);
}
.nlp-bottom{ display:flex; align-items:center; gap:1rem; }
.nlp-protocol{
  font-family:"Poppins", system-ui, -apple-system, Arial, sans-serif;
  font-weight:700; letter-spacing:.35em; text-transform:uppercase;
  color:#2BB8A5;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
}
.nlp-mark{ width: clamp(48px, 6vw, 72px); height:auto; }

/* Option : descendre encore tout le bloc sur desktop */
@media (min-width:1280px){
  .hero-grid{ transform: translateY(7rem); }
}

/* Boutons sous le bloc NEXT LEVEL PROTOCOL */
.hero-cta-bottom {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  transform: translateY(1rem);
}

@media (max-width: 768px){
  .hero-cta-bottom {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }
}

/* Ajustements fins pour le hero section */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  padding-top: 70px; /* descend ou monte tout le bloc */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  column-gap: 3rem; /* espace entre les deux colonnes */
  width: min(1200px, 90%);
  margin: 0 auto;
  transform: translateY(-1rem); /* remonte légèrement le contenu */
}

/* Colonne gauche : texte */
.hero-left h1 {
  margin-bottom: 0.5rem;
  line-height: 1.05;
  font-size: clamp(3rem, 6vw, 5rem);
}

.hero-left p {
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  opacity: 0.95;
}

/* Colonne droite : NEXT LEVEL PROTOCOL */
.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem; /* rapproche NEXT, LEVEL, PROTOCOL */
}

.nlp-top {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nlp-bottom {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.2rem;
}

/* Ajustement du logo triangle */
.nlp-mark {
  width: 50px;
  height: auto;
  transform: translateY(2px);
}

/* Boutons : les rapprocher du texte */
.hero-cta-bottom {
  margin-top: 1.4rem;
}

/* Responsive : centrer tout en mobile */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    row-gap: 1.2rem;
    transform: none;
    text-align: center;
  }
  .hero-right {
    align-items: center;
  }
  .hero-cta-bottom {
    flex-direction: column;
    align-items: center;
  }
}

/* Alignement fin des deux colonnes sur desktop */
@media (min-width: 992px) {
  .hero-grid {
    align-items: flex-start;       /* les deux colonnes démarrent au même niveau */
  }

  .hero-left {
    transform: translateY(0);      /* on annule d'éventuels décalages */
    margin-top: 0;
  }

  .hero-right {
    position: relative;
    top: 18px;                    /* remonte légèrement NEXT / LEVEL / PROTOCOL */
    transform: none;               /* annule les anciens translateY si tu en avais */
    margin-top: 0;
  }
}

/* --- Ajustement horizontal des blocs texte dans le hero --- */
.hero-grid {
  justify-content: center; /* recentre tout le contenu du hero */
  column-gap: 5rem; /* augmente l’espace entre les deux colonnes */
}

.hero-left {
  margin-left: 3rem; /* pousse un peu le texte vers la droite */
}
.hero-right {
  margin-right: 2rem; /* équilibre la colonne droite */
}

/* Version responsive : on enlève les décalages sur mobile */
@media (max-width: 768px) {
  .hero-left, .hero-right {
    margin-left: 0;
    margin-right: 0;
  }
  .hero-grid {
    justify-content: center;
    column-gap: 2rem;
  }
}

/* --- Ajustement espacement entre NEXT LEVEL et PROTOCOL --- */
.nlp-bottom {
  margin-top: -0.3rem; /* remonte "PROTOCOL" plus près de LEVEL */
}

@media (min-width: 1200px) {
  .nlp-bottom {
    margin-top: -0.9rem; /* un peu plus serré sur les grands écrans */
  }
}

/* Agrandir le logo dans la barre, sans toucher au HTML */
custom-navbar img[alt*="Next Level"],
.navbar img[alt*="Next Level"],
header img[alt*="Next Level"]{
  height: 44px !important;   /* augmente ici */
  width: auto !important;
  display: block !important;
}

/* S'assure que la barre ne s'étire pas */
custom-navbar .navbar-brand,
.navbar .navbar-brand{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}


/* ====== HERO : grille et alignements ====== */
#hero .hero-grid{
  display:grid;
  grid-template-columns: 1.18fr 0.82fr;     /* rapproche les 2 colonnes */
  column-gap: clamp(24px, 5vw, 56px);       /* espace contrôlé */
  align-items:center;                        /* aligne verticalement */
}

@media (max-width:1024px){
  #hero .hero-grid{
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}

/* Colonne gauche : "Elevate your potential" */
.eyp{
  margin:0;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.93;               /* compacité comme la maquette */
  letter-spacing: -0.015em;
}

/* Colonne droite : NEXT / LEVEL + PROTOCOL + picto */
.hero-right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: clamp(6px, 1.2vw, 12px);     /* espace régulier entre lignes */
  padding-left: clamp(8px, 1vw, 16px);
}

/* Bloc NEXT / LEVEL (haut) */
.nlp-top{
  margin:0 0 clamp(6px, 0.6vw, 10px) 0;  /* petit espace en dessous de LEVEL */
  line-height: 0.88;
  letter-spacing: -0.01em;
}

/* Bloc PROTOCOL (bas) — le remonter légèrement */
.nlp-bottom {
  margin-top: 0;
  transform: translateY(-16px); /* remonte PROTOCOL encore plus près de LEVEL */
}
@media (min-width:1200px){
  .nlp-bottom{ transform: translateY(-10px); }
}

/* Picto à droite : l’aligner sur la ligne de base de PROTOCOL */
.nlp-mark{
  display:inline-flex;
  align-items:flex-end;     /* picto calé visuellement avec PROTOCOL */
  padding-left: clamp(10px, 1.2vw, 16px);
}

/* ====== NAVBAR : garder un logo plus grand sans écarter la barre ====== */
/* Garde la barre à 64px de haut et centre le contenu */
nav .max-w-7xl{ height:4rem; display:flex; align-items:center; }

/* Si tu as mis h-20 dans navbar.js et que ça pousse trop, force une taille safe : */
nav img[alt="Next Level Protocol"]{
  height: 5rem !important;   /* ≈ 52px, ajustable: 3rem(48px), 3.5rem(56px) */
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 767px) {
  #menu {
    position: absolute;
    top: 64px;      /* hauteur de la barre */
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 1rem 1.25rem 1.5rem;
    box-shadow: 0 10px 25px rgba(15, 42, 71, 0.12);
  }
}


.hero-chevron {
  position: absolute;
  bottom: 40px;        /* ← descend la flèche */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.8;
  cursor: pointer;
  z-index: 20;
}

.hero-chevron svg {
  width: 24px;         /* ← plus petit */
  height: 24px;
}

/* Animation douce (optionnel mais pro) */
.hero-chevron {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(8px);
  }
  60% {
    transform: translateX(-50%) translateY(4px);
  }
}