/* ===== Thème ===== */
:root{
  /* Bleu du logo (ajuste si besoin) */
  --brand:#0A84FF;
  --brand-600:#086FDC;
  --brand-300:#48A3FF;

  --bg:#0b0c0f;
  --surface:#121319;
  --surface-2:#171924;

  --text:#E8EAED;
  --muted:#A7ADBA;
  --line:rgba(255,255,255,.08);

  --radius:18px;
  --shadow:0 8px 30px rgba(10,132,255,.15), inset 0 0 0 1px rgba(255,255,255,.04);
  --transition:220ms cubic-bezier(.2,.7,.2,1);

  --page-max: 1120px;
  --page-pad: max(4vw, (100vw - var(--page-max)) / 2);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{ width: min(var(--page-max), 92vw); margin: 0 auto; }

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-radius:calc(var(--radius) - 6px);background:var(--brand);color:#fff;font-weight:600;letter-spacing:.2px;border:1px solid rgba(255,255,255,.05);box-shadow:var(--shadow);transition:transform var(--transition),background var(--transition),box-shadow var(--transition)}
.btn:hover{background:var(--brand-600);transform:translateY(-2px);box-shadow:0 10px 40px rgba(10,132,255,.25)}
.btn.secondary{background:transparent;border:1px solid var(--line)}
.btn.secondary:hover{border-color:rgba(255,255,255,.18)}
.brand-accent{color:var(--brand)}
.lead{color:var(--muted)}

/* ===== Header ===== */
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;gap:.8rem;align-items:center;font-weight:700;letter-spacing:.2px}
.brand h1{font-size:1.05rem;margin:0}
.brand-logo{height:40px;width:auto}
/* Header context + nav desktop */
header{
  position: relative;     /* ou fixed si tu préfères */
  top: 0;
  z-index: 3000;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(11,12,15,.75), rgba(11,12,15,.45));
  border-bottom: 1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
nav ul{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0}
nav a{padding:.6rem .8rem;border-radius:10px;border:1px solid transparent}
nav a:hover{background:rgba(255,255,255,.04);border-color:var(--line)}

/* Bouton hamburger (masqué desktop) */
.burger{
  display:none; width:42px;height:42px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:#fff;
  position:relative; cursor:pointer; padding:0;
}
.burger .line{
  position:absolute; left:50%;
  width:22px; height:2px; background:#fff; border-radius:2px;
  transform:translateX(-50%); transition:
    transform 280ms cubic-bezier(.2,.7,.2,1),
    opacity 200ms ease, width 220ms ease;
}
.burger .line:nth-child(1){ top:13px; }
.burger .line:nth-child(2){ top:20px; }
.burger .line:nth-child(3){ top:27px; }

/* Morph hamburger -> croix */
.burger.open .line:nth-child(1){ transform:translate(-50%,7px) rotate(45deg); }
.burger.open .line:nth-child(2){ opacity:0; }
.burger.open .line:nth-child(3){ transform:translate(-50%,-7px) rotate(-45deg); }


/* Le halo reste derrière */
#glowCanvas{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

/* Le contenu standard a un z-index bas */
main, section, footer{ position:relative; z-index: 1; }
/* (ne pas remettre header ici, on l’a surchargé plus haut) */

/* fond de l'overlay : TRANSPARENT (ne masque pas le header ni le bas) */
/* ===== MENU MOBILE : bande noire pleine largeur mais hauteur limitée ===== */

/* variables de calcul de la hauteur de bande */
#mobileNav{
  --items: 3.5;          /* <- nombre de liens dans le menu */
  --item-h: 58px;      /* <- hauteur approx d'une tuile (padding inclus) */
  --gap: 16px;         /* <- l'espace vertical entre tuiles (margins) */
  --band-top: calc(var(--header-h,64px) + env(safe-area-inset-top) + .25rem);
  --band-h: calc(var(--items) * var(--item-h) + (var(--items) - 1) * var(--gap) + 12px); /* + marge de confort */

  position: fixed;
  inset: 0;
  z-index: 5000;
  background: transparent;         /* pas d'assombrissement global */
  pointer-events: none;            /* fermé = non interactif */
  visibility: hidden;
  padding-top: calc(var(--header-h,64px) + env(safe-area-inset-top) + .5rem);
  -webkit-user-select: none; user-select: none;
  touch-action: none;              /* on bloque les gestes quand fermé */
}

/* bande noire PLEINE LARGEUR mais limitée en hauteur */
#mobileNav::before{
  content:"";
  position: fixed;
  left: 0; right: 0;               /* << pleine largeur */
  top: var(--band-top);
  height: var(--band-h);           /* << seulement la zone des liens */
  background: rgba(6,10,16,.96);   /* opacité de la bande */
  z-index: 0;
  pointer-events: none;            /* ne bloque pas les clics sur les liens */
  border-radius: 0;                /* bande rectangulaire */
}

/* ouvert : visible + interactif */
#mobileNav.open{
  pointer-events: auto;
  visibility: visible;
}

/* liens = tuiles opaques au-dessus de la bande */
#mobileNav > a{
  position: relative; z-index: 1;
  display:block;
  margin:.5rem .75rem;
  padding: 15px 16px;
  border-radius: 12px;
  background:#0f1626;
  border:1px solid #1b2335;
  color:#e6eaf2; text-decoration:none;
  pointer-events:auto;
  -webkit-tap-highlight-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Quand le menu est ouvert : on BLOQUE le scroll de la page */
body.nav-open{ overflow: hidden; }      /* << remets le blocage du scroll */

/* (facultatif) on gèle les clics derrière si tu veux vraiment "modal" */
.nav-open main, .nav-open section, .nav-open footer{ pointer-events:none; }

/* Le header (croix) reste cliquable au-dessus */
.burger{ position: relative; z-index: 6000; }
header{ position: sticky; top:0; z-index:3000; }


/* ===== Hero ===== */
.hero{position:relative;padding:clamp(72px,8vw,120px) 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,48px);align-items:center}
.kicker{color:var(--brand-300);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.8rem}
.hero-card{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow)}
.slogan-img{margin-bottom:.4rem}
.bullets{margin:0;padding-left:1.1rem;line-height:1.7;color:var(--muted)}
.mobile-nav {display: none; /* toujours caché sur desktop */}

/* ===== Sections ===== */
section{padding:clamp(64px,8vw,96px) 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.section-head h3{font-size:clamp(1.6rem,3.4vw,2rem);margin:0}
.section-head p{color:var(--muted);margin:0}

/* ===== Cards / Services ===== */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 4;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);box-shadow:var(--shadow)}
.card:hover{transform:translateY(-4px);border-color:rgba(10,132,255,.35);box-shadow:0 10px 40px rgba(10,132,255,.22), inset 0 0 0 1px rgba(255,255,255,.06)}
.card h4{margin:.2rem 0 .4rem;font-size:1.1rem}
.card p{color:var(--muted);margin:0}

/* ===== Contact ===== */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
form{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.field{margin-bottom:14px}
label{display:block;font-weight:600;margin-bottom:8px;font-size:.95rem}
input,textarea{width:100%;padding:14px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0e1016;color:var(--text);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}
input:focus,textarea:focus{border-color:rgba(10,132,255,.55);box-shadow:0 0 0 4px rgba(10,132,255,.18)}
textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{color:var(--muted);font-size:.9rem}
.form-actions{display:flex;gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line);background:#0b0c0f;padding:26px 0;color:var(--muted);font-size:.95rem}
.footer-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero-grid,.contact-wrap{grid-template-columns:1fr}
  .cards .card{grid-column:span 6}
  nav ul{display:none}
  .burger{display:grid}
  .mobile-nav{display:none;padding:12px 0 18px}
  .mobile-nav.open{display:block}
  .mobile-nav a{display:block;padding:.8rem;border-radius:12px;border:1px solid var(--line);margin-bottom:10px;background:var(--surface-2)}
}
@media (max-width:640px){
  .cards .card{grid-column:span 12}
  .form-row{grid-template-columns:1fr}
}


/* EFFET TYPING */
.typewrap{ position: relative; }
.typewrap .type-measure{
  visibility: hidden; pointer-events: none;
}
.typewrap .type-run{
  position: absolute; top: 0; left: 0; /* superpose le texte animé */
}

.text-brand{
  background: linear-gradient(90deg,#1f8cff,#4cc2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Caret qui suit la frappe (à la fin du texte) */
.typewrap .type-run::after{
  content:"";
  display:inline-block;
  width:2px; height:1em;
  margin-left:3px;
  background: linear-gradient(180deg,#1f8cff,#4cc2ff);
  animation: caret-blink 1s steps(1,end) infinite;
  vertical-align: -0.15em; /* ajuste si besoin selon ta font */
}

@keyframes caret-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  .typewrap .type-run::after{ animation:none; opacity:.7; }
}


/* --- Mobile layout pour le hero et les boutons --- */
@media (max-width: 640px){

  /* Une seule colonne dans le hero */
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Le titre animé ne doit pas “pousser” les boutons */
  .typewrap{
    margin-bottom: 12px;        /* espace fixe sous le H1 */
  }
  .typewrap .type-run,
  .typewrap .type-run::after{
    line-height: 1.15;          /* cohérent avec le H1 pour éviter tout décalage visuel */
  }

  /* Les CTA en pile, largeur fluide mais propre */
  .cta-row{
    display: grid;              /* plus stable que flex pour 1 colonne */
    grid-template-columns: 1fr; /* 1 bouton par ligne */
    gap: 12px;
    width: min(420px, 100%);    /* évite les boutons trop larges */
  }

  .btn{
    width: 100%;
    text-align: center;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
  }

  /* petite respiration sous la phrase d’accroche */
  .lead{
    margin-bottom: 12px;
  }
}

/* === Reveal visible & rejouable === */
:root{
  --rv-dur: .9s;
  --rv-ease: cubic-bezier(.21,.98,.35,1.02); /* un peu de peps (overshoot léger) */
  --rv-distance: 28px;  /* amplitude par défaut */
  --rv-scale: .98;      /* léger zoom-in au départ */
}

/* état initial */
.reveal{
  opacity: 0;
  transform: translateY(var(--rv-distance)) scale(var(--rv-scale));
  transition:
    opacity var(--rv-dur) var(--rv-ease),
    transform var(--rv-dur) var(--rv-ease);
  will-change: opacity, transform;
}

/* état visible */
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* variantes directionnelles (option) */
.reveal[data-reveal="fade-up"]    { transform: translateY(var(--rv-distance)) scale(var(--rv-scale)); }
.reveal[data-reveal="fade-down"]  { transform: translateY(calc(var(--rv-distance) * -1)) scale(var(--rv-scale)); }
.reveal[data-reveal="fade-left"]  { transform: translateX(var(--rv-distance)) scale(var(--rv-scale)); }
.reveal[data-reveal="fade-right"] { transform: translateX(calc(var(--rv-distance) * -1)) scale(var(--rv-scale)); }
.reveal[data-reveal="zoom-in"]    { transform: scale(.94); }

/* intensifier facilement : ajoute data-intense */
.reveal[data-intense]{
  --rv-distance: 38px;
  --rv-scale: .94;
  --rv-dur: 1s;
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none !important; transition:none !important; }
}

/* halo tout en bas */
#glowCanvas{ z-index:0; pointer-events:none; }

/* contenu normal au-dessus */
main, header, footer, section{ position:relative; z-index:1; }

/* ===== À propos ===== */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }
@media (max-width:980px){
  .aboutme{ grid-template-columns: 1fr; }
  .me-left{ order:-1; } /* photo au-dessus sur mobile */
  .me-pic{ width: 160px; height:160px; border-radius:16px; }
}

/* ===== Modales ===== */
.modal{ position:fixed; inset:0; z-index:7000; display:none; }
.modal.is-open{ display:block; }
.modal__overlay{
  position:absolute; inset:0; background:rgba(6,10,16,.65); backdrop-filter:blur(4px);
}
.modal__dialog{
  position:relative;
  width:min(840px,92vw);
  margin:clamp(32px,6vh,64px) auto;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.modal.is-open .modal__dialog{ transform:none; opacity:1; }
.modal__header, .modal__footer{ padding:16px 18px; border-bottom:1px solid var(--line); }
.modal__footer{ border-top:1px solid var(--line); border-bottom:none; display:flex; justify-content:flex-end; gap:8px; }
.modal__content{ padding:16px 18px; max-height:min(65vh,70svh); overflow:auto; }
.modal__close{
  all:unset; cursor:pointer; display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
}

/* Lien de footer sous forme de bouton texte */
.link{
  background:none; border:none; color:var(--muted); cursor:pointer; padding:0; font:inherit;
}
.link:hover{ color:var(--text); text-decoration:underline; }

/* Empêche l’overlay de passer sous le menu mobile */
#mobileNav{ z-index:5000; } /* modal est à 7000 */

/* Quand une modal est ouverte : on bloque le scroll global */
body.modal-open{ overflow:hidden; }

/* Centrer les liens légaux dans le footer */
.footer-grid{
  display: flex;
  flex-direction: column;     /* met le texte © puis les liens dessous */
  align-items: center;        /* centre horizontalement */
  gap: 6px;
  text-align: center;
}

.legal{
  display: inline-flex;
  align-items: center;
  gap: 8px;                   /* espace entre les deux liens et le point */
}