/* IA Process Factory — V3 Ultime (Stable)
   NOTES:
   - Relative paths only (works in /preview/ and /)
   - No horizontal section bars
*/

:root{
  --bg0:#060812;
  --bg1:#0b1020;
  --bg2:#0a0e1a;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.10);
  --tile:rgba(255,255,255,.035);
  --tile2:rgba(255,255,255,.055);
  --glass:rgba(7,10,18,.56);
  --glass2:rgba(7,10,18,.42);

  --glow1: rgba(88, 101, 242, .26);
  --glow2: rgba(0, 212, 255, .18);
  --glow3: rgba(171, 71, 188, .14);

  --ok:#41ffb5;
  --amber:#ff9a3d;
  --danger:#ff5570;

  --r:18px;
  --r2:26px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: var(--bg0);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
.container{ max-width:1240px; margin:0 auto; padding:0 18px; position:relative; z-index:1; }

.bg-layer::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 16% 10%, var(--glow1), transparent 62%),
    radial-gradient(820px 520px at 82% 14%, var(--glow2), transparent 64%),
    radial-gradient(900px 700px at 50% 56%, var(--glow3), transparent 68%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 44%, var(--bg0));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
}

.bg-squares{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity:.18;
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 18%, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 58%, transparent 76%),
    linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse at 50% 18%, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 58%, transparent 76%),
    linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
}

.bg-noise{
  position:fixed;
  inset:-120px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1000px 700px at 50% 10%, rgba(255,255,255,.03), transparent 70%),
    radial-gradient(900px 700px at 20% 20%, rgba(255,255,255,.02), transparent 70%),
    radial-gradient(900px 700px at 80% 20%, rgba(255,255,255,.02), transparent 70%);
  opacity:.38;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 64%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 64%, rgba(0,0,0,0) 100%);
}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:80;
  backdrop-filter: blur(14px);
  background: var(--glass);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:0;
  min-width:auto;
  max-width:min(46vw, 420px);
  flex:0 1 auto;
  position:relative;
  z-index:2;
}

.brand > span:last-child{
  display:none;
}

.logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}

.logo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  flex:1 1 420px;
  min-width:0;
  position:relative;
  z-index:6;
}
.nav a, .nav button{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-size:12px;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nav a:hover, .nav button:hover{
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.075);
  color: var(--text);
  transform: translateY(-1px);
}

.right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:auto;
  justify-content:flex-end;
  flex:0 1 auto;
  position:relative;
  z-index:7;
}
.pill{
  border:1px solid rgba(255,255,255,.22);
  background: rgba(15,20,38,.55);
  color: rgba(255,255,255,.88);
  font-size:12.5px;
  padding:12px 22px;
  border-radius:999px;
  cursor:pointer;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.pill:hover{
  background: rgba(18,24,46,.65);
  border-color: rgba(255,255,255,.32);
  transform:none;
}
.pill .icon{ width:20px; height:20px; }
.pill .icon svg{ width:20px; height:20px; }

.icon{ width:16px; height:16px; display:inline-block; }
.icon svg{ width:16px; height:16px; display:block; }

.cta{
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,154,61,.35), rgba(88,101,242,.55), rgba(0,212,255,.18));
  color: rgba(255,255,255,.95);
  font-size:12.5px;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  transition:.18s ease;
}
.cta:hover{ transform: translateY(-1px); filter:saturate(1.03); }

.dropdown{
  position:relative;
  padding-bottom:10px;
}
.menu{
  position:absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 280px;
  background: rgba(10,14,26,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.50);
  padding: 8px;
  display:none;
  z-index:220;
}
.menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:14px;
}
.menu.open{ display:block; }
.menu a{ position:relative; z-index:1; }
.menu a{
  display:block;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  margin-bottom:8px;
}
.menu a:last-child{ margin-bottom:0; }
.menu a:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); transform: translateY(-1px); }

/* Sections */
main{ padding: 22px 0 28px; position:relative; z-index:1; }

.hero{
  padding: 22px 0 14px;
}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.82);
  font-size:12px;
}
.kicker .dot{ width:8px; height:8px; border-radius:50%; background: var(--ok); box-shadow: 0 0 14px rgba(65,255,181,.40); }
h1{ margin:14px 0 10px; font-size:34px; letter-spacing:-.6px; line-height:1.12; }
.lead{ margin:0 0 18px; color: var(--muted); font-size:15px; line-height:1.7; max-width: 92ch; }

.grid2{ display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; align-items:stretch; }
@media (max-width: 980px){ .grid2{ grid-template-columns: 1fr; } h1{ font-size:30px; } }

.card{
  border:1px solid rgba(255,255,255,.10);
  background: var(--tile);
  border-radius: var(--r2);
  box-shadow: 0 10px 34px rgba(0,0,0,.40);
  padding: 14px;
}
.card:hover{ background: var(--tile2); border-color: rgba(255,255,255,.14); }

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
@media (max-width: 980px){ .cards{ grid-template-columns: 1fr; } }

.card h3{ margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.35px; }
.card p{ margin:0; color: var(--muted2); font-size:12.5px; line-height:1.65; }

.levels{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:12px; }
@media (max-width: 980px){ .levels{ grid-template-columns: 1fr; } }

.level{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: var(--r2); padding: 14px; }
.level h4{ margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.35px; }
.level ul{ margin:0; padding-left: 18px; color: var(--muted2); font-size:12.5px; line-height:1.75; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); color: rgba(255,255,255,.82); font-size:11.5px; }

.footer{
  margin-top: 24px;
  padding: 18px 0 26px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.footer small{ color: var(--muted2); font-size:12px; line-height:1.6; }
.footer a{ color: rgba(255,255,255,.86); }

.form{
  display:grid;
  gap:10px;
}
.field label{ display:block; font-size:12px; color: rgba(255,255,255,.80); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  outline:none;
}
.field textarea{ min-height: 120px; resize: vertical; }

.btn{
  padding: 11px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition:.18s ease;
}
.btn:hover{ background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.20); transform: translateY(-1px); }
.btn.primary{ background: linear-gradient(135deg, rgba(171,71,188,.32), rgba(88,101,242,.34), rgba(0,212,255,.16)); border-color: rgba(255,255,255,.16); }

.notice{
  display:none;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  font-size:12.5px;
  line-height:1.6;
}
.notice.show{ display:block; }
.notice.ok{ border-color: rgba(65,255,181,.20); background: rgba(65,255,181,.08); }
.notice.warn{ border-color: rgba(255,154,61,.22); background: rgba(255,154,61,.10); }

.spinner{
  width:14px; height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.88);
  display:inline-block;
  animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Utility */
.mt12{ margin-top:12px; }
.mt16{ margin-top:16px; }
.mt22{ margin-top:22px; }
.flex{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }


/* Access / auth UX V3 */
.right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:auto;
  justify-content:flex-end;
  flex:0 1 auto;
  position:relative;
  z-index:7;
}
.lang-pill{
  min-width:64px;
  justify-content:center;
}
.access-secondary{
  white-space:nowrap;
  padding:12px 18px;
}
.access-secondary[hidden]{
  display:none !important;
}
.access-cta{
  min-width:196px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:left;
  padding:9px 16px;
}
.access-cta.is-current{
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 18px 44px rgba(0,0,0,.48);
}
.access-cta.is-authenticated{
  background: linear-gradient(135deg, rgba(65,255,181,.24), rgba(88,101,242,.52), rgba(0,212,255,.16));
}
.access-cta-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.08;
}
.access-cta-title{
  font-size:12.6px;
  font-weight:700;
  letter-spacing:.12px;
}
.access-cta-sub{
  font-size:11px;
  color:rgba(255,255,255,.76);
}

.auth-hero{
  padding-top: 26px;
}
.auth-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .auth-grid{
    grid-template-columns:1fr;
  }
}
.auth-panel,
.auth-side{
  padding:18px;
}
.auth-panel-large{
  padding:20px;
}
.auth-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.auth-panel-head h3,
.auth-side h3{
  margin:0 0 8px;
}
.auth-panel-head p{
  margin:0;
  color:var(--muted2);
}
.auth-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.84);
  font-size:11px;
  letter-spacing:.18px;
  text-transform:uppercase;
}
.auth-stack{
  display:grid;
  gap:10px;
}
.btn-wide{
  width:100%;
  justify-content:center;
}
.btn-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:13px 16px;
  border-radius:16px;
  font-size:13px;
  font-weight:600;
}
.btn-google{
  background: rgba(255,255,255,.07);
}
.btn-apple{
  background: rgba(255,255,255,.05);
}
.social-mark{
  width:26px;
  height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
}
.auth-or{
  position:relative;
  text-align:center;
  margin:16px 0;
}
.auth-or::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background: rgba(255,255,255,.10);
}
.auth-or span{
  position:relative;
  z-index:1;
  display:inline-block;
  padding:0 12px;
  background: rgba(6,8,18,.95);
  color: rgba(255,255,255,.54);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.28px;
}
.auth-form{
  gap:12px;
}
.auth-form-grid{
  grid-template-columns:1fr 1fr;
}
@media (max-width: 760px){
  .auth-form-grid{
    grid-template-columns:1fr;
  }
}
.input-help{
  display:block;
  margin-top:7px;
  color: rgba(255,255,255,.52);
  font-size:11.4px;
  line-height:1.55;
}
.auth-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: rgba(255,255,255,.74);
}
.auth-links a{
  color: rgba(255,255,255,.88);
}
.auth-links .sep{
  color: rgba(255,255,255,.34);
}
.auth-form-note{
  color: rgba(255,255,255,.58);
  font-size:12px;
  line-height:1.7;
}
.auth-note-card{
  background: rgba(255,255,255,.025);
}
textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.92);
  padding:12px 14px;
  resize:vertical;
  min-height:108px;
  font-family:var(--font);
}
textarea:focus{
  outline:none;
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
}
@media (max-width: 1180px){
  .header-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
  .brand{
  display:flex;
  align-items:center;
  gap:0;
  min-width:auto;
  max-width:min(46vw, 420px);
  flex:0 1 auto;
  position:relative;
  z-index:2;
}
  .right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:auto;
  justify-content:flex-end;
  flex:0 1 auto;
  position:relative;
  z-index:7;
}
}
@media (max-width: 820px){
  .right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:auto;
  justify-content:flex-end;
  flex:0 1 auto;
  position:relative;
  z-index:7;
}
  .access-secondary{
    order:2;
  }
  .access-cta{
    order:3;
    width:100%;
  }
}


@media (max-width: 1280px){
  .logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}
  .brand{
  display:flex;
  align-items:center;
  gap:0;
  min-width:auto;
  max-width:min(46vw, 420px);
  flex:0 1 auto;
  position:relative;
  z-index:2;
}
}

@media (max-width: 1100px){
  .logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}
  .brand{
  display:flex;
  align-items:center;
  gap:0;
  min-width:auto;
  max-width:min(46vw, 420px);
  flex:0 1 auto;
  position:relative;
  z-index:2;
}
}

@media (max-width: 980px){
  .logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}
  .brand{
  display:flex;
  align-items:center;
  gap:0;
  min-width:auto;
  max-width:min(46vw, 420px);
  flex:0 1 auto;
  position:relative;
  z-index:2;
}
}


/* Session pill — unification header */
.session-pill{
  min-width: 0;
  max-width: 360px;
  padding: 11px 16px;
  gap: 10px;
  white-space: nowrap;
}
.session-pill .session-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.session-pill.is-guest{
  border-color: rgba(255,85,112,.38);
  background: rgba(62,12,22,.44);
  color: rgba(255,235,239,.94);
}
.session-pill.is-guest .session-dot{
  background: var(--danger);
}
.session-pill.is-member{
  border-color: rgba(65,255,181,.30);
  background: rgba(12,44,36,.44);
  color: rgba(235,255,247,.95);
}
.session-pill.is-member .session-dot{
  background: var(--ok);
}
@media (max-width: 1180px){
  .session-pill{
    order: 3;
    width: 100%;
    justify-content: center;
  }
}


/* Lot finition — session dans le kicker, pas dans le header */
.session-pill{
  display:none !important;
}

.kicker.session-kicker{
  gap:10px;
  max-width:100%;
  flex-wrap:wrap;
  line-height:1.45;
  padding:10px 14px;
}

.kicker.session-kicker .kicker-text{
  display:inline;
}

.kicker.session-kicker.is-guest{
  border-color: rgba(255,85,112,.38);
  background: rgba(62,12,22,.34);
  color: rgba(255,235,239,.94);
}

.kicker.session-kicker.is-guest .dot{
  background: var(--danger);
  box-shadow: 0 0 14px rgba(255,85,112,.42);
}

.kicker.session-kicker.is-member{
  border-color: rgba(65,255,181,.30);
  background: rgba(12,44,36,.34);
  color: rgba(235,255,247,.95);
}

.kicker.session-kicker.is-member .dot{
  background: var(--ok);
  box-shadow: 0 0 14px rgba(65,255,181,.42);
}


/* --- Micro-lot final : menus survol stables + logo header resserré --- */
.header,
.header-inner,
.nav,
.right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:auto;
  justify-content:flex-end;
  flex:0 1 auto;
  position:relative;
  z-index:7;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  flex:1 1 420px;
  min-width:0;
  position:relative;
  z-index:6;
}

.dropdown{
  position:relative;
  padding-bottom:10px;
}
.menu{
  position:absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 280px;
  background: rgba(10,14,26,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.50);
  padding: 8px;
  display:none;
  z-index:220;
}
.menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:14px;
}

.menu.open{
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.brand{
  display:flex;
  align-items:center;
  gap:0;
  min-width:auto;
  max-width:min(46vw, 420px);
  flex:0 1 auto;
  position:relative;
  z-index:2;
}

.logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}

@media (max-width: 1280px){
  .logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}
}

@media (max-width: 1100px){
  .logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}
}

@media (max-width: 980px){
  .logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}
}

@media (max-width: 820px){
  .logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}
}

@media (max-width: 560px){
  .logo{
  width:320px;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  background:transparent;
  display:block;
  flex:0 0 auto;
}
}


/* Final UI patch — logo transparent + menus stables */
.brand > span:last-child{ display:none !important; }
.header .container{ overflow:visible; }
@media (max-width: 1280px){
  .logo{ width:280px !important; }
}
@media (max-width: 1080px){
  .header-inner{ gap:10px; }
  .logo{ width:240px !important; }
  .nav{ flex:1 1 100%; order:3; justify-content:flex-start; }
  .right{ margin-left:auto; }
}
@media (max-width: 760px){
  .logo{ width:210px !important; }
  .right{ width:100%; justify-content:flex-end; }
}
@media (max-width: 560px){
  .logo{ width:190px !important; }
  .nav a, .nav button{ padding:8px 10px; font-size:11.5px; }
  .cta, .pill{ padding:10px 14px; }
}



/* Header/menu realignment — 2026-03-31 */
.header{
  padding:10px 0 8px;
}
.header-inner{
  min-height:auto;
  row-gap:10px;
}
.nav{
  align-self:center;
}
.right{
  min-width:auto;
  flex-wrap:wrap;
}
.lang-pill{
  min-width:46px;
  padding:10px 14px;
  justify-content:center;
}
html.auth-pending .kicker,
html.auth-pending [data-first-connection],
html.auth-pending [data-access-cta]{
  visibility:hidden;
}



/* ORION — centrage header public + placeholder logo neutralisé */
.header{
  padding: 0;
}
.header .container{
  max-width: 1280px;
}
.header-inner{
  min-height: 88px;
  padding: 10px 0 12px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
.brand{
  flex: 0 0 240px;
  min-height: 56px;
  align-self: center;
  justify-content: flex-start;
}
.brand.brand--ghost{
  visibility: hidden;
  pointer-events: none;
}
.nav{
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  justify-content: center;
  margin: 0 auto;
}
.right{
  flex: 0 0 auto;
  min-width: auto;
  align-self: center;
}
.lang-pill{
  min-width: 42px;
  padding: 10px 12px;
  justify-content: center;
}
.dropdown{
  padding-bottom: 0;
}
@media (max-width: 1180px){
  .header-inner{
    min-height: auto;
    padding: 10px 0 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .brand{
    display: none;
  }
  .nav{
    width: 100%;
    justify-content: center;
  }
  .right{
    width: 100%;
    justify-content: center;
  }
}

/* ORION — correctif ciblé dropdowns sans casser le centrage header */
.header,
.header-inner,
.nav,
.dropdown,
.right{
  overflow: visible !important;
}

.header{
  position: relative;
  z-index: 40;
}

.header-inner{
  align-items: center;
}

.nav{
  position: relative;
  z-index: 60;
}

.dropdown{
  position: relative;
  z-index: 80;
  padding-bottom: 0 !important;
}

.dropdown > button{
  position: relative;
  z-index: 81;
}

.dropdown > .menu{
  top: calc(100% + 8px) !important;
  left: 0;
  z-index: 999 !important;
  pointer-events: auto !important;
}

.dropdown:hover > .menu,
.dropdown:focus-within > .menu,
.dropdown.is-open > .menu,
.dropdown > .menu.open{
  display: block !important;
}

.dropdown:hover > button,
.dropdown:focus-within > button,
.dropdown.is-open > button{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.085);
  color: var(--text);
}

.session-kicker[aria-busy="true"],
html.auth-pending .kicker,
html.auth-pending [data-first-connection],
html.auth-pending [data-access-cta]{
  visibility: hidden;
}

.session-kicker.is-ready{
  visibility: visible;
}



/* ORION — logo réel intégré sans toucher au comportement menu */
.brand.brand--ghost{
  visibility: visible !important;
  pointer-events: auto !important;
}
.brand{
  flex: 0 0 320px;
  max-width: min(34vw, 360px);
  min-height: 56px;
}
.logo{
  width: 100%;
  max-width: 340px;
}
.logo img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 1180px){
  .brand{
    display:flex;
    flex:0 0 280px;
    max-width:min(54vw, 300px);
    justify-content:flex-start;
  }
  .logo{
    max-width:280px;
  }
}
@media (max-width: 780px){
  .brand{
    flex:0 0 240px;
    max-width:min(62vw, 250px);
  }
  .logo{
    max-width:240px;
  }
}


/* =========================================================
   MODE JOUR / NUIT — PHASE 1 (pages publiques style.v2.css)
   ========================================================= */

:root{
  color-scheme: dark;
}

:root[data-theme="dark"]{
  color-scheme: dark;
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg0:#f4f7fb;
  --bg1:#edf2f8;
  --bg2:#ffffff;
  --text:rgba(12,23,43,.94);
  --muted:rgba(38,53,77,.76);
  --muted2:rgba(59,76,102,.72);
  --line:rgba(15,23,42,.12);
  --tile:rgba(255,255,255,.84);
  --tile2:rgba(255,255,255,.96);
  --glass:rgba(250,252,255,.82);
  --glass2:rgba(250,252,255,.72);

  --glow1: rgba(88, 101, 242, .10);
  --glow2: rgba(0, 140, 255, .08);
  --glow3: rgba(255, 154, 61, .08);

  --ok:#109a6f;
  --amber:#d97706;
  --danger:#dc355e;
}

html[data-theme-ready="0"] body{
  transition:none !important;
}

body,
.header,
.nav a, .nav button,
.pill,
.cta,
.menu,
.menu a,
.kicker,
.card,
.level,
.badge,
.footer,
.field input, .field select, .field textarea,
.btn,
.notice{
  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

:root[data-theme="light"] body{
  background: var(--bg0);
  color: var(--text);
}

:root[data-theme="light"] .bg-layer::before{
  background:
    radial-gradient(900px 520px at 16% 10%, rgba(88,101,242,.12), transparent 62%),
    radial-gradient(820px 520px at 82% 14%, rgba(0,140,255,.08), transparent 64%),
    radial-gradient(900px 700px at 50% 56%, rgba(255,154,61,.08), transparent 68%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 44%, var(--bg0));
}

:root[data-theme="light"] .bg-squares{
  background-image:
    linear-gradient(to right, rgba(15,23,42,.065) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.065) 1px, transparent 1px);
  opacity:.22;
}

:root[data-theme="light"] .bg-noise{
  background:
    radial-gradient(1000px 700px at 50% 10%, rgba(15,23,42,.03), transparent 70%),
    radial-gradient(900px 700px at 20% 20%, rgba(15,23,42,.02), transparent 70%),
    radial-gradient(900px 700px at 80% 20%, rgba(15,23,42,.02), transparent 70%);
  opacity:.20;
}

:root[data-theme="light"] .header{
  background: var(--glass);
  border-bottom-color: rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

:root[data-theme="light"] .nav a,
:root[data-theme="light"] .nav button{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.88);
  color: rgba(15,23,42,.82);
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
}

:root[data-theme="light"] .nav a:hover,
:root[data-theme="light"] .nav button:hover,
:root[data-theme="light"] .nav a.is-active,
:root[data-theme="light"] .nav button.is-active{
  border-color: rgba(88,101,242,.22);
  background: #ffffff;
  color: rgba(12,23,43,.96);
}

:root[data-theme="light"] .pill{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.90);
  color: rgba(15,23,42,.90);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

:root[data-theme="light"] .pill:hover{
  background:#ffffff;
  border-color: rgba(15,23,42,.18);
}


.theme-toggle{
  width:42px;
  min-width:42px;
  height:42px;
  padding:0;
  justify-content:center;
  gap:0;
  white-space:nowrap;
  border-radius:999px;
  position:relative;
}

.theme-toggle .icon{
  width:auto;
  height:auto;
  flex:0 0 auto;
  font-size:16px;
  line-height:1;
}

.theme-toggle .icon svg{
  display:none;
}

.theme-toggle-label{
  display:none;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

:root[data-theme="light"] .cta{
  border-color: rgba(15,23,42,.10);
  background: linear-gradient(135deg, rgba(255,154,61,.28), rgba(88,101,242,.22), rgba(0,212,255,.12));
  color: rgba(12,23,43,.94);
  box-shadow: 0 18px 36px rgba(88,101,242,.08);
}

:root[data-theme="light"] .cta:hover{
  filter:saturate(1.02);
}

:root[data-theme="light"] .menu{
  background: rgba(255,255,255,.98);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 24px 60px rgba(15,23,42,.10);
}

:root[data-theme="light"] .menu a{
  border-color: rgba(15,23,42,.08);
  background: rgba(247,249,252,.94);
  color: rgba(12,23,43,.90);
}

:root[data-theme="light"] .menu a:hover{
  background: #ffffff;
  border-color: rgba(88,101,242,.18);
}

:root[data-theme="light"] .kicker,
:root[data-theme="light"] .badge{
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  color: rgba(15,23,42,.82);
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .level{
  border-color: rgba(15,23,42,.10);
  background: var(--tile);
  box-shadow: 0 14px 32px rgba(15,23,42,.06);
}

:root[data-theme="light"] .card:hover{
  background: var(--tile2);
  border-color: rgba(88,101,242,.16);
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] strong{
  color: rgba(8,15,30,.96);
}

:root[data-theme="light"] .card p,
:root[data-theme="light"] .level ul,
:root[data-theme="light"] .footer small,
:root[data-theme="light"] .lead{
  color: var(--muted2);
}

:root[data-theme="light"] .muted{
  color: var(--muted) !important;
}

:root[data-theme="light"] .footer{
  border-top-color: rgba(15,23,42,.08);
}

:root[data-theme="light"] .footer a{
  color: rgba(12,23,43,.88);
}

:root[data-theme="light"] .btn{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.88);
  color: rgba(12,23,43,.92);
}

:root[data-theme="light"] .btn:hover{
  background:#ffffff;
  border-color: rgba(15,23,42,.18);
}

:root[data-theme="light"] .btn.primary{
  border-color: rgba(88,101,242,.18);
  background: linear-gradient(135deg, rgba(171,71,188,.18), rgba(88,101,242,.18), rgba(0,212,255,.12));
}

:root[data-theme="light"] .field label{
  color: rgba(15,23,42,.78);
}

:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  color: rgba(12,23,43,.94);
}

:root[data-theme="light"] .notice{
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.84);
  color: rgba(15,23,42,.84);
}

:root[data-theme="light"] .notice.ok{
  border-color: rgba(16,154,111,.22);
  background: rgba(16,154,111,.09);
}

:root[data-theme="light"] .notice.warn{
  border-color: rgba(217,119,6,.22);
  background: rgba(217,119,6,.10);
}

:root[data-theme="light"] .spinner{
  border-color: rgba(15,23,42,.16);
  border-top-color: rgba(15,23,42,.82);
}

:root[data-theme="light"] .access-cta.is-current{
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 14px 28px rgba(15,23,42,.08);
}

:root[data-theme="light"] .access-cta.is-authenticated{
  background: linear-gradient(135deg, rgba(16,154,111,.16), rgba(88,101,242,.22), rgba(0,212,255,.08));
}

:root[data-theme="light"] .access-cta-sub{
  color: rgba(38,53,77,.72);
}

@media (max-width: 1100px){
  .theme-toggle{
    min-width:116px;
    padding:12px 16px;
  }
}

@media (max-width: 980px){
  .theme-toggle{
    order:0;
  }
  .theme-toggle-label{
    font-size:12px;
  }
}