/* ============================================================================
   ROCKET-AVIONS — BRAINSTORM
   style.css : thème « hangar nocturne + néon ». Verre dépoli, halos, animations.
   Tout est responsive jusqu'à 375 px (mobile).
   ========================================================================== */

/* ---------------------------------------------------------------- Variables */
:root{
  --bg:            #060a16;
  --bg-2:          #0a1124;
  --cyan:          #38d6ff;
  --cyan-soft:     rgba(56,214,255,.14);
  --orange:        #ff8a3d;
  --orange-soft:   rgba(255,138,61,.14);
  --violet:        #8b5cf6;
  --ok:            #34d399;
  --warn:          #fbbf24;
  --txt:           #eaf2ff;
  --txt-dim:       #93a4c4;
  --txt-faint:     #64748b;
  --line:          rgba(255,255,255,.09);
  --line-strong:   rgba(255,255,255,.18);
  --glass:         rgba(16,25,48,.62);
  --glass-2:       rgba(20,31,58,.78);
  --radius:        16px;
  --radius-sm:     11px;
  --shadow:        0 18px 50px rgba(0,0,0,.45);
  --glow-c:        0 0 0 1px rgba(56,214,255,.35), 0 0 28px rgba(56,214,255,.18);
}

/* --------------------------------------------------------------------- Base */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:"Segoe UI", Inter, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--txt);
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Ciel animé : trois nappes de lumière qui dérivent lentement. */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 12%, rgba(56,214,255,.16), transparent 70%),
    radial-gradient(34% 38% at 82% 22%, rgba(255,138,61,.12), transparent 70%),
    radial-gradient(46% 50% at 50% 108%, rgba(139,92,246,.16), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%  { transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(0,-22px,0) scale(1.06); }
}

/* Grille technique en fond, très discrète. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
}

a{ color:var(--cyan); }

/* -------------------------------------------------------- Barre du haut fixe */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(6,10,22,.72);
  border-bottom:1px solid var(--line);
  padding:10px 16px;
}
.topbar-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; }
.brand .mark{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--cyan), var(--violet));
  box-shadow:0 0 22px rgba(56,214,255,.35);
  font-size:18px;
}
.brand .name{ font-size:15px; }
.brand .name small{ display:block; font-size:10.5px; color:var(--txt-faint); font-weight:600; letter-spacing:1.6px; }

.topbar-spacer{ flex:1 1 auto; }

/* Jauge de progression (dans la barre). */
.gauge{ display:flex; align-items:center; gap:9px; min-width:190px; }
.gauge-track{
  position:relative; flex:1 1 auto; height:8px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.08);
}
.gauge-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow:0 0 14px rgba(56,214,255,.6);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.gauge-txt{ font-size:12px; font-weight:700; color:var(--txt-dim); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------ Boutons */
.btn{
  font:inherit; font-weight:700; font-size:13.5px; cursor:pointer;
  padding:9px 15px; border-radius:11px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05); color:var(--txt);
  transition:transform .16s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.btn:hover{ background:rgba(255,255,255,.1); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn-primary{
  background:linear-gradient(135deg, var(--cyan), #1b9fd6);
  border-color:transparent; color:#031a24;
  box-shadow:0 8px 26px rgba(56,214,255,.28);
}
.btn-primary:hover{ box-shadow:0 12px 34px rgba(56,214,255,.42); background:linear-gradient(135deg, #55ddff, var(--cyan)); }
.btn-orange{
  background:linear-gradient(135deg, var(--orange), #e2621d);
  border-color:transparent; color:#26100a;
  box-shadow:0 8px 26px rgba(255,138,61,.26);
}
.btn-orange:hover{ box-shadow:0 12px 34px rgba(255,138,61,.4); }
.btn-ghost{ background:transparent; }
.btn-danger{ color:#ff8095; border-color:rgba(255,128,149,.35); }
.btn-danger:hover{ background:rgba(255,128,149,.12); }
.btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:9px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* ------------------------------------------------------------------ En-tête */
.hero{
  max-width:1180px; margin:0 auto; padding:46px 16px 18px;
  display:grid; grid-template-columns:1.35fr .85fr; gap:26px; align-items:center;
}
.hero h1{
  font-size:clamp(28px, 5vw, 46px); line-height:1.08; font-weight:900; letter-spacing:-.6px;
  background:linear-gradient(105deg, #fff 20%, var(--cyan) 60%, var(--violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:12px;
}
.hero p.lead{ color:var(--txt-dim); font-size:15.5px; max-width:60ch; }
.hero .pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pill{
  font-size:11.5px; font-weight:700; letter-spacing:.5px;
  padding:5px 11px; border-radius:99px;
  border:1px solid var(--line-strong); color:var(--txt-dim);
  background:rgba(255,255,255,.04);
}
.pill i{ font-style:normal; color:var(--cyan); }

/* Carte « équipage » : qui répond. */
.crew{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.crew h3{ font-size:12px; letter-spacing:1.4px; color:var(--txt-faint); margin-bottom:12px; text-transform:uppercase; }
.crew .row{ display:flex; flex-direction:column; gap:5px; margin-bottom:11px; }
.crew label{ font-size:12px; font-weight:700; color:var(--txt-dim); }
.crew .mini{ font-size:11px; color:var(--txt-faint); margin-top:12px; line-height:1.5; }

/* ------------------------------------------------------------- Cartes/inputs */
input[type=text], input[type=number], textarea, select{
  font:inherit; width:100%; color:var(--txt);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:10px 12px; outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
  resize:vertical;
}
input::placeholder, textarea::placeholder{ color:var(--txt-faint); }
input[type=text]:focus, input[type=number]:focus, textarea:focus{
  border-color:var(--cyan); background:rgba(56,214,255,.06);
  box-shadow:0 0 0 3px rgba(56,214,255,.16);
}
textarea{ line-height:1.55; }

/* ------------------------------------------------------------- Sections */
main{ max-width:1180px; margin:0 auto; padding:8px 16px 60px; }

.section{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:16px; overflow:hidden;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(0,0,0,.28);
  animation:rise .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.sec-head{
  display:flex; align-items:center; gap:14px; cursor:pointer; user-select:none;
  padding:16px 18px; border-bottom:1px solid transparent; transition:background .2s, border-color .2s;
}
.sec-head:hover{ background:rgba(255,255,255,.03); }
.section.open .sec-head{ border-bottom-color:var(--line); }
.sec-num{
  font-size:12px; font-weight:900; letter-spacing:1px; color:var(--cyan);
  border:1px solid rgba(56,214,255,.35); border-radius:8px; padding:3px 8px; flex:0 0 auto;
  background:var(--cyan-soft);
}
.sec-icon{ font-size:21px; flex:0 0 auto; }
.sec-titles{ flex:1 1 auto; min-width:0; }
.sec-titles h2{ font-size:16.5px; font-weight:800; letter-spacing:-.2px; }
.sec-titles .sub{ font-size:12.5px; color:var(--txt-faint); margin-top:2px; }
.sec-right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.sec-count{ font-size:12px; font-weight:700; color:var(--txt-dim); font-variant-numeric:tabular-nums; }
.sec-chev{ color:var(--txt-faint); transition:transform .28s ease; font-size:13px; }
.section.open .sec-chev{ transform:rotate(180deg); }

.sec-body{ display:none; padding:18px; }
.section.open .sec-body{ display:block; animation:fadein .3s ease both; }
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }

.sec-note{
  font-size:12.5px; color:var(--warn); background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.22); border-radius:10px;
  padding:9px 12px; margin-bottom:16px;
}

/* ---------------------------------------------------------------- Un champ */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{
  grid-column:span 1; padding:13px 14px; border-radius:var(--radius-sm);
  border:1px solid transparent; transition:background .2s, border-color .2s;
}
.field.span{ grid-column:1 / -1; }
.field:hover{ background:rgba(255,255,255,.028); }
.field.done{ border-color:rgba(52,211,153,.22); background:rgba(52,211,153,.045); }
.field.todo{ }
.field label.q{
  display:block; font-size:13.5px; font-weight:700; margin-bottom:3px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.field label.q .qdot{
  width:7px; height:7px; border-radius:50%; background:var(--txt-faint); flex:0 0 auto;
  transition:background .25s, box-shadow .25s;
}
.field.done label.q .qdot{ background:var(--ok); box-shadow:0 0 10px rgba(52,211,153,.8); }
.field .hint{ font-size:11.5px; color:var(--txt-faint); margin-bottom:9px; line-height:1.45; }
.field .ctrl{ margin-top:8px; }

/* Choix (radio / cases) : rangées cliquables */
.opts{ display:flex; flex-direction:column; gap:6px; }
.opt{
  display:flex; align-items:flex-start; gap:9px;
  padding:8px 11px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.022);
  transition:background .16s, border-color .16s, transform .12s;
  font-size:13px;
}
.opt:hover{ background:rgba(56,214,255,.07); border-color:rgba(56,214,255,.3); transform:translateX(2px); }
.opt .box{
  width:15px; height:15px; flex:0 0 15px; margin-top:2px;
  border:1.6px solid var(--line-strong); border-radius:5px;
  display:grid; place-items:center; font-size:10px; color:transparent;
  transition:background .16s, border-color .16s, color .16s;
}
.opt.radio .box{ border-radius:50%; }
.opt.on{ background:var(--cyan-soft); border-color:rgba(56,214,255,.55); }
.opt.on .box{ background:var(--cyan); border-color:var(--cyan); color:#04141c; }
.opt.on .txt{ color:#fff; font-weight:600; }
.opt .txt{ flex:1 1 auto; }

/* Champ « commentaire » sous une question */
.subnote{ display:flex; gap:8px; align-items:flex-start; margin-top:9px; }
.subnote input{ font-size:12.5px; padding:7px 10px; }
.subnote .tag{ font-size:10.5px; color:var(--txt-faint); white-space:nowrap; padding-top:9px; font-weight:700; letter-spacing:.5px; }

/* Bouton « à décider plus tard » */
.later{
  margin-top:9px; font-size:11.5px; font-weight:700;
  background:none; border:none; color:var(--txt-faint); cursor:pointer; padding:2px 0;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px dashed transparent; transition:color .2s, border-color .2s;
}
.later:hover{ color:var(--warn); border-bottom-color:rgba(251,191,36,.5); }
.later.on{ color:var(--warn); }

/* Curseur (échelle) */
.scale{ display:flex; align-items:center; gap:12px; }
.scale input[type=range]{ flex:1 1 auto; accent-color:var(--cyan); height:22px; }
.scale .val{
  font-weight:800; font-size:14px; color:var(--cyan); min-width:52px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.scale .lbl{ font-size:11px; color:var(--txt-faint); }

/* ------------------------------------------------------------- Bas de page */
.actions{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:22px 0 6px;
}

/* --------------------------------------------------------------- Modale/panneau */
.overlay{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(3,6,14,.78); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  padding:24px; overflow-y:auto;
}
.overlay.on{ display:block; animation:fadein .22s ease both; }
.panel{
  max-width:900px; margin:24px auto; background:var(--glass-2);
  border:1px solid var(--line-strong); border-radius:20px; box-shadow:var(--shadow);
  overflow:hidden; animation:pop .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(22px) scale(.97); } to{ opacity:1; transform:none; } }
.panel-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--line); position:sticky; top:0;
  background:rgba(12,19,38,.92); backdrop-filter:blur(12px); z-index:2;
}
.panel-head h2{ font-size:16px; font-weight:800; flex:1 1 auto; }
.panel-body{ padding:18px; max-height:none; }
.panel-foot{
  padding:14px 18px; border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap;
  position:sticky; bottom:0; background:rgba(12,19,38,.92); backdrop-filter:blur(12px);
}

/* Rendu du résumé */
.sum-sec{ margin-bottom:22px; }
.sum-sec h3{
  font-size:13px; letter-spacing:1.2px; text-transform:uppercase; color:var(--cyan);
  margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.sum-row{
  display:grid; grid-template-columns:minmax(150px,34%) 1fr; gap:14px;
  padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.06); font-size:13.5px;
}
.sum-row .k{ color:var(--txt-dim); font-weight:600; }
.sum-row .v{ color:#fff; white-space:pre-wrap; word-break:break-word; }
.sum-row .v.empty{ color:var(--txt-faint); font-style:italic; }
.sum-row .v .cmt{ display:block; font-size:12px; color:var(--warn); margin-top:3px; }
.sum-ok{ color:var(--ok); }

pre.export{
  white-space:pre-wrap; word-break:break-word; font-size:12px; line-height:1.6;
  background:rgba(0,0,0,.42); border:1px solid var(--line); border-radius:12px;
  padding:14px; max-height:52vh; overflow:auto; color:#c9d8f0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.empty-state{ text-align:center; color:var(--txt-dim); padding:34px 12px; font-size:14px; }

/* ------------------------------------------------------------------ Toast */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 130%);
  z-index:200; padding:12px 20px; border-radius:13px;
  background:linear-gradient(135deg, var(--cyan), #1b9fd6); color:#031a24;
  font-weight:800; font-size:13.5px; box-shadow:0 14px 40px rgba(56,214,255,.4);
  transition:transform .38s cubic-bezier(.22,1,.36,1); pointer-events:none;
  max-width:90vw; text-align:center;
}
#toast.on{ transform:translate(-50%, 0); }
#toast.warn{ background:linear-gradient(135deg, var(--warn), #e08c00); color:#20160a; box-shadow:0 14px 40px rgba(251,191,36,.35); }

/* ------------------------------------------------------------------ Footer */
footer{
  border-top:1px solid var(--line); padding:20px 16px 34px; text-align:center;
  color:var(--txt-faint); font-size:12px;
}
footer b{ color:var(--txt-dim); }

/* -------------------------------------------------------------- Responsive */
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; padding-top:30px; gap:20px; }
  .grid{ grid-template-columns:1fr; }
  .field{ grid-column:1 / -1 !important; }
  .topbar-inner{ gap:10px; }
  .gauge{ min-width:0; flex:1 1 100%; order:3; }
  .brand .name small{ display:none; }
  .sum-row{ grid-template-columns:1fr; gap:3px; }
  .panel-body{ padding:14px; }
  .overlay{ padding:10px; }
  .panel{ margin:6px auto; border-radius:16px; }
}
@media (max-width:560px){
  .sec-head{ padding:13px 13px; gap:10px; }
  .sec-titles h2{ font-size:15px; }
  .sec-titles .sub{ display:none; }
  .sec-count{ display:none; }
  .sec-body{ padding:13px; }
  .field{ padding:11px 10px; }
  .hero h1{ font-size:27px; }
  .hero{ padding:22px 12px 10px; }
  main{ padding:6px 10px 44px; }
  .btn{ padding:9px 12px; font-size:13px; }
  .topbar{ padding:9px 11px; }
  /* Barre du haut compacte : la barre de progression vit sur sa propre ligne. */
  .gauge-track{ height:6px; }
  .gauge-txt{ font-size:11px; }
}
@media (max-width:400px){
  /* Trop etroit : les boutons perdent leur libelle, l'icone reste (tooltip conserve). */
  .btxt{ display:none; }
  .btn{ padding:9px 10px; }
  .topbar-inner{ gap:7px; }
  .brand .name{ font-size:13.5px; }
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}