/* ===================================================================

   OxygenDW — style.css (version nettoyée)

   - Polices, tokens, reset

   - Header / Footer

   - Carte / Hero

   - Boutons & focus accessibles

   - Formulaire (1 colonne, labels au-dessus)

   =================================================================== */





/* === Design tokens === */

:root{

  --bg-1:#0b1620;           /* bleu nuit */

  --bg-2:#111827;           /* ardoise */

  --c-cyan:#22d3ee;         /* cyan néon */

  --c-purple:#8b5cf6;       /* violet néon */

  --c-pink:#ec4899;         /* rose néon */



  --text:#e5e7eb;           /* texte clair */

  --muted:#a1a1aa;



  --radius:18px;

  --shadow:0 10px 30px rgba(0,0,0,.35);

}



/* === Reset + accessibilité === */

*{ box-sizing:border-box }

html,body{ height:100% }

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;



  /* Fond dégradé animé */

  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;

}

a{ color:inherit; text-decoration:none }

img{ max-width:100%; display:block }



.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;

}



/* === Header / Nav === */

.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);

}

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

.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:72px }

.brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.3px }

.brand img{

  width:44px; height:44px; object-fit:contain;

  filter:drop-shadow(0 0 8px rgba(139,92,246,.6));

  animation:logoPulse 3.5s ease-in-out infinite; /* glow discret */

}

.wordmark{

  font-size:1.1rem;

  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 18px rgba(139,92,246,.45); white-space:nowrap;

}

.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;

}

.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);

}



/* Focus visible clavier */

.menu a:focus-visible, .cta:focus-visible, .skip:focus{

  outline:2px solid var(--c-cyan); outline-offset:2px;

  box-shadow:0 0 0 4px rgba(34,211,238,.25);

}



/* === Hero / Carte === */

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 === */

.cta{

  display:inline-block; margin:.25rem .25rem 0; padding:.7rem 1.05rem;

  border-radius:999px; font-weight:700; letter-spacing:.2px; color:#0b1220;

  background:linear-gradient(90deg, var(--c-cyan), var(--c-pink));

  border:1px solid rgba(255,255,255,.18);

  transition:transform .15s ease, filter .2s ease;

}

.cta:hover{ transform:translateY(-1px); filter:saturate(110%) }

.cta.ghost{ color:#e7e7ee; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) }



/* === 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;

}



/* === Formulaire — 1 colonne, labels au-dessus === */

.card .form-grid{

  display:grid;

  grid-template-columns:1fr;        /* toujours 1 colonne */

  gap:1rem;

  max-width:640px;                  /* largeur confortable */

  margin:1.25rem auto;

  text-align:left;                  /* annule le centrage de .card/main */

}

.card .form-grid .field{ width:100% }

.card .form-grid .full{ grid-column:1 / -1 }

.card .form-grid .form-help{ margin:0 0 .5rem; color:var(--muted) }



.card .form-grid .field label{

  display:block; margin:0 0 .45rem; font-weight:600; color:#e7e7ee;

}

.card .form-grid .field input,

.card .form-grid .field textarea,

.card .form-grid .field select{

  display:block; width:100%;

  padding:.95rem 1rem; font:inherit; color:var(--text);

  background:rgba(255,255,255,.08);

  border:1px solid rgba(255,255,255,.16);

  border-radius:var(--radius);

  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);

  transition:border-color .2s, box-shadow .2s, background .2s;

}

.card .form-grid .field textarea{ min-height:160px; resize:vertical }

.card .form-grid .field input::placeholder,

.card .form-grid .field textarea::placeholder{ color:#c7c7cf88 }



.card .form-grid .field input:focus,

.card .form-grid .field textarea:focus,

.card .form-grid .field select:focus{

  outline:none; border-color:var(--c-cyan); background:rgba(255,255,255,.12);

  box-shadow:0 0 0 3px rgba(34,211,238,.18), 0 10px 25px rgba(0,0,0,.25);

}

.card .form-grid .actions{ display:flex; justify-content:flex-end }

.card .form-grid .actions .cta{ min-width:200px; padding:1rem 1.25rem; border-radius:999px }



/* === Animations === */

@keyframes bgMove { 0%{background-position:0% 0%} 100%{background-position:100% 100%} }

@keyframes logoPulse { 0%,100%{filter:drop-shadow(0 0 8px rgba(139,92,246,.6))} 50%{filter:drop-shadow(0 0 20px rgba(236,72,153,.9))} }

@keyframes fadeInUp { to{ opacity:1; transform:translateY(0) } }

@keyframes pulseBadge { 0%,100%{ transform:scale(1); box-shadow:0 0 10px rgba(236,72,153,.6) } 50%{ transform:scale(1.07); box-shadow:0 0 20px rgba(236,72,153,.9) } }



/* === Responsive === */

@media (max-width:520px){

  .menu a{ padding:.5rem .75rem }

  .wordmark{ display:none } /* centrer sur le logo en mobile */

  .nav{ height:auto; padding:.6rem 0 }

  .menu{ flex-wrap:wrap; justify-content:flex-end }

}



/* === Confort utilisateur === */

@media (prefers-reduced-motion: reduce){

  *{ animation:none !important; transition:none !important }

}

/* === Nuke form — 1 colonne stricte, labels au-dessus === */

.card form{ text-align:left !important; max-width:640px !important; margin:1.25rem auto !important; }

.card form *{ box-sizing:border-box }



.card form label{

  display:block !important;

  margin:0 0 .45rem !important;

  font-weight:600 !important;

  color:#e7e7ee !important;

}



.card form input,

.card form textarea,

.card form select{

  display:block !important;

  width:100% !important;

  max-width:100% !important;

  padding:.95rem 1rem !important;

  font:inherit !important;

  color:var(--text) !important;

  background:rgba(255,255,255,.08) !important;

  border:1px solid rgba(255,255,255,.16) !important;

  border-radius:var(--radius) !important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;

  transition:border-color .2s, box-shadow .2s, background .2s !important;

}



.card form textarea{ min-height:160px !important; resize:vertical !important; }



.card form input:focus,

.card form textarea:focus,

.card form select:focus{

  outline:none !important;

  border-color:var(--c-cyan) !important;

  background:rgba(255,255,255,.12) !important;

  box-shadow:0 0 0 3px rgba(34,211,238,.18), 0 10px 25px rgba(0,0,0,.25) !important;

}



.card form .actions{ display:flex !important; justify-content:flex-end !important; }

.card form .actions .cta{ min-width:200px !important; padding:1rem 1.25rem !important; border-radius:999px !important; }

/* === Boutons principaux === */
.btn-primary {
  display:inline-block;
  padding:.6rem 1.4rem;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color:#e7e7ee;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--shadow);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-primary:hover {
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.25);
}