/* Pages d'authentification — pas de barre latérale, pas d'onglets */
:root{
  --cream:#FFF2D8; --milk:#FFFCF6; --cocoa:#3E2418; --cocoa-soft:#7A5540;
  --caramel:#FF9A4D; --caramel-deep:#E8730F;
  --blush:#FF6FA5; --blush-deep:#FF2E77; --honey:#FFD23F;
  --bad:#FF3B57;
  --grad:linear-gradient(100deg,#FF2E77,#FF6FA5 38%,#FFD23F 62%,#FF9A4D);
  --glow-h:0 0 18px rgba(255,210,63,.6);
  --r-md:14px; --r-lg:22px;
  --font-display:'Baloo 2',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--cocoa);
  background:var(--cream);
  display:grid;
  place-items:center;
  padding:24px;
}

.bg{
  position:fixed; inset:0;
  background:var(--cream) url('/img/bubu.jpg') center/cover no-repeat;
  z-index:0;
}
.bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,46,119,.35), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(255,154,77,.35), transparent 45%),
    linear-gradient(180deg,rgba(255,242,216,.55),rgba(255,242,216,.92));
}

.card{
  position:relative; z-index:1; overflow:hidden;
  width:min(370px,100%);
  background:var(--milk);
  border:3px solid var(--cocoa);
  border-radius:var(--r-lg);
  box-shadow:7px 7px 0 rgba(74,43,30,.9);
  padding:34px 26px 26px;
}
.card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:7px;
  background:var(--grad);
}

h1{
  font-family:var(--font-display);
  font-size:36px; line-height:1.05;
  margin:0 0 2px; letter-spacing:-.01em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
h1 .amp{-webkit-text-fill-color:initial; color:var(--blush-deep);}
.sub{margin:0 0 22px; color:var(--cocoa-soft); font-size:14px;}

label{display:block; font-size:13px; font-weight:700; margin:0 0 6px;}
input{
  width:100%; font:inherit; font-size:15px;
  padding:11px 13px; margin-bottom:15px;
  color:var(--cocoa); background:#fff;
  border:2px solid var(--cocoa); border-radius:var(--r-md);
}
input:focus{outline:3px solid var(--honey); outline-offset:1px;}

.who{display:flex; gap:10px; margin-bottom:18px;}
.who button{
  flex:1; cursor:pointer; font:inherit; font-weight:700;
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; background:#fff; color:var(--cocoa);
  border:2px solid var(--cocoa); border-radius:var(--r-md);
}
.who button img{width:30px; height:30px; border-radius:50%; object-fit:cover;}
.who button[data-user="bubu"][aria-pressed="true"]{
  background:var(--blush); box-shadow:0 0 16px rgba(255,46,119,.5);
}
.who button[data-user="dudu"][aria-pressed="true"]{
  background:var(--caramel); box-shadow:0 0 16px rgba(232,115,15,.5);
}
.who button:focus-visible{outline:3px solid var(--honey); outline-offset:2px;}

button.go{
  width:100%; cursor:pointer; font:inherit;
  font-family:var(--font-display); font-size:20px; font-weight:700;
  padding:12px; color:var(--cocoa);
  background:var(--grad); background-size:180% 100%;
  border:3px solid var(--cocoa); border-radius:var(--r-md);
  box-shadow:0 4px 0 var(--cocoa), var(--glow-h);
  transition:background-position .3s ease;
}
button.go:hover{background-position:100% 0;}
button.go:active{transform:translateY(3px); box-shadow:0 1px 0 var(--cocoa);}

.msg{
  min-height:20px; margin-top:12px;
  font-size:13.5px; font-weight:700; color:var(--bad);
}
.foot{margin:16px 0 0; text-align:center; font-size:12.5px; color:var(--cocoa-soft);}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important;}}