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

/* === Design tokens === */
:root{
  --bg-1:#0b1620;
  --bg-2:#111827;
  --c-cyan:#22d3ee;
  --c-purple:#8b5cf6;
  --c-pink:#ec4899;
  --text:#e5e7eb;
  --muted:#a1a1aa;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --touch:44px;              /* cible tactile */
}

/* === Reset + accessibilité === */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body { overflow-x:hidden; } /* anti-scroll horizontal global */

body{
  margin:0; color:var(--text);
  font:16px/1.6 "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(1000px 700px at 80% 120%, rgba(236,72,153,.2), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  background-size:200% 200%;
  animation:bgMove 25s ease-in-out infinite alternate;
  min-height:100%;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* Lien “skip to content” */
.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:#000; color:#fff; border-radius:.5rem; outline:2px solid #fff;
}

/* Conteneur */
.wrap{ max-width:1100px; margin:0 auto; padding:0 1rem; }

/* === Header / Nav (clean) === */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(130%) blur(10px);
  background:linear-gradient(90deg, rgba(139,92,246,.10), rgba(236,72,153,.10));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:72px;
}

/* Marque */
.brand-link{ display:flex; align-items:center; gap:.65rem; }
.logo{ width:44px; height:44px; object-fit:contain; }
.brand-title{ display:flex; flex-direction:column; line-height:1.05; }
.brand-line1{
  font-weight:800; font-size:1.05rem;
  background:linear-gradient(90deg, var(--c-cyan), var(--c-purple), var(--c-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-line2{ font-weight:700; font-size:.92rem; color:#e7e7ee; opacity:.95; }

/* Menu (desktop) */
.menu{ display:flex; gap:.5rem; align-items:center; }
.menu a{
  padding:.55rem .9rem; border-radius:999px; color:#e7e7ee; font-weight:600; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.menu a:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.20); }
.menu a[aria-current="page"]{
  border-color: rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 8px 24px rgba(139,92,246,.25),
    var(--shadow);
}

/* Burger : caché en desktop, visible en mobile */
.nav-toggle{
  -webkit-appearance:none; appearance:none;
  display:none;                     /* le secret : pas visible sur PC */
  align-items:center; justify-content:center;
  min-width:var(--touch); min-height:var(--touch);
  padding:.35rem .6rem; border-radius:12px; cursor:pointer;
  color:#e7e7ee;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
}

/* === Main / carte centrale (vos styles) === */
main{
  display:grid; place-items:center;
  min-height:calc(100dvh - 72px - 70px);
  text-align:center; padding:3rem 1rem;
}
.card{
  max-width:740px;
  border-radius:var(--radius);
  padding:2.25rem 1.75rem;
  background:
    radial-gradient(120% 120% at 10% -20%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(120% 120% at 110% 120%, rgba(236,72,153,.2), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  position:relative; isolation:isolate;
  opacity:0; transform:translateY(40px);
  animation:fadeInUp 1.2s ease-out forwards; animation-delay:.5s;
}
.card:before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:calc(var(--radius) + 2px);
  background:conic-gradient(from 120deg, var(--c-cyan), var(--c-purple), var(--c-pink), var(--c-cyan));
  filter:blur(18px); opacity:.35;
}
h1{
  margin:.1rem 0 1rem; font-size:clamp(1.6rem, 2.3vw + 1rem, 2.6rem); line-height:1.15;
  background:linear-gradient(90deg, var(--c-cyan), var(--c-purple), var(--c-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 20px rgba(139,92,246,.35);
}
p.lead{ font-size:clamp(1rem, .6vw + .9rem, 1.25rem); color:#ebeef7; margin:0 0 1.25rem; }
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem; border-radius:999px; font-size:.9rem; color:#e5e7eb;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  animation:pulseBadge 2.5s ease-in-out infinite;
}
.dot{ width:8px; height:8px; border-radius:999px; background:var(--c-pink); box-shadow:0 0 10px var(--c-pink), 0 0 18px var(--c-purple); }

/* === CTA (conserve vos boutons) === */
.menu-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.7rem 1.05rem; border-radius:999px; font-weight:700; letter-spacing:.2px; line-height:1;
  color:#0b1220; background:linear-gradient(90deg, var(--c-cyan), var(--c-pink));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow);
  transition:transform .15s ease, filter .2s ease;
}
.menu-btn:hover{ transform:translateY(-1px); filter:saturate(110%); }
.menu-btn.is-primary{
  color:#0b1220; background:linear-gradient(90deg, var(--c-cyan), var(--c-pink));
}
.menu-btn:focus-visible,
.menu a:focus-visible,
.skip:focus{
  outline:2px solid var(--c-cyan);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(34,211,238,.25);
}
/* ===== Formulaires — OxygenDW (Contact) ===== */

.form-card{
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 1.6rem 1.4rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  background:
    radial-gradient(120% 120% at 12% -15%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(120% 120% at 110% 120%, rgba(236,72,153,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
}
.form-card h1{ margin:.25rem 0 1rem; }
.form-lead{ color:#dbe7ff; margin:.25rem 0 1rem; }

/* Grilles */
.form-grid{ display:grid; gap:.9rem; }
.form-grid--2{ grid-template-columns: 1fr 1fr; gap:.9rem .9rem; }
@media (max-width: 720px){
  .form-card{ padding: 1.25rem 1rem; border-radius:16px; }
  .form-grid--2{ grid-template-columns: 1fr; }
}

/* Champs */
.form-field{ display:flex; flex-direction:column; gap:.45rem; }
.form-label{ font-weight:700; color:#eaf2ff; }
.form-hint{ color:#9DB3D9; font-size:.9rem; }

.input,
.textarea{
  width:100%;
  color:#e7e7ee;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  padding:.75rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.textarea{ min-height: 180px; resize: vertical; }

/* Focus & invalid */
.input:focus,
.textarea:focus{ outline:none; border-color:rgba(139,92,246,.45);
  box-shadow:0 0 0 3px rgba(139,92,246,.25);
}
.input.is-invalid,
.textarea.is-invalid{ border-color:#fb7185; box-shadow:0 0 0 3px rgba(251,113,133,.18); }

.error{ color:#fecdd3; font-size:.9rem; }

/* Case à cocher (consentement) */
.checkbox{ display:flex; align-items:flex-start; gap:.55rem; margin:.3rem 0; color:#dbeafe; }
.checkbox input{ margin-top:.2rem; }

/* Actions */
.form-actions{
  margin-top: .9rem;
  display:flex; gap:.6rem; flex-wrap:wrap;
  justify-content:flex-start;
}
.form-actions .menu-btn{ min-height: var(--touch); }

/* Alertes */
.alert{
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding: .9rem 1rem;
  margin: .75rem 0 1rem;
}
.alert--success{
  color:#eaffef;
  background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.10));
  border-color: rgba(16,185,129,.35);
}
.alert--error{
  color:#ffe5ea;
  background:linear-gradient(180deg, rgba(244,63,94,.18), rgba(244,63,94,.10));
  border-color: rgba(244,63,94,.35);
}

/* Accessibilité : focus visible partout */
.input:focus-visible,
.textarea:focus-visible,
.checkbox input:focus-visible{
  outline:2px solid var(--c-cyan);
  outline-offset:2px;
}

/* === Footer === */
footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(34,211,238,.08), rgba(139,92,246,.08), rgba(236,72,153,.08));
}
.foot{
  display:flex; align-items:center; justify-content:center;
  min-height:70px; text-align:center; padding:1rem; color:var(--muted);
  font-size:.95rem;
}

/* === Animations === */
@keyframes bgMove { 0%{background-position:0% 0%} 100%{background-position:100% 100%} }
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }
@keyframes pulseBadge { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

/* === Responsive === */
@media (max-width:1100px){
  .wrap{ padding:0 .9rem; }
  .menu a{ padding:.5rem .8rem; }
}

@media (max-width:900px){
  .nav{ min-height:64px; padding:.5rem 0; }
  .brand-line2{ display:none; }         /* raccourcir la marque en mobile */
  .nav-toggle{ display:inline-flex; }   /* burger visible uniquement en mobile */

  /* Menu mobile : fermé par défaut */
  .menu{
    position:absolute; left:0; right:0; top:72px;
    display:none; flex-wrap:wrap; gap:.5rem; justify-content:flex-start;
    padding:.6rem 1rem;
    background:linear-gradient(180deg, rgba(12,22,38,.96), rgba(18,32,56,.96));
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 36px rgba(0,0,0,.35);
  }
  .menu.is-open{ display:flex; }

  main{ padding:2.2rem 1rem; min-height:calc(100dvh - 56px - 64px); }
  .card{ max-width:680px; padding:2rem 1.4rem; }
}

@media (max-width:700px){
  h1{ font-size:clamp(1.5rem, 4vw + 1rem, 2.1rem); }
  p.lead{ font-size:clamp(1rem, 1.8vw + .85rem, 1.15rem); }
  .badge{ font-size:.88rem; }
  .foot{ padding:.75rem; font-size:.9rem; min-height:60px; }
}

@media (max-width:520px){
  .menu{ justify-content:flex-start; }
  .menu a{ padding:.5rem .7rem; }
  .card{ max-width:100%; padding:1.4rem 1rem; border-radius:16px; }
}

@media (max-width:380px){
  .menu a{ padding:.45rem .6rem; font-size:.95rem; }
  .badge{ padding:.3rem .55rem; }
}

/* Réduction motions */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}