/* beboun.css – Design system partagé */

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'DM Sans',system-ui,sans-serif;background:#F0EDE8;color:#111;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6}

/* Variables */
:root{
  --vert:#4A7A40;
  --vert-dark:#2D5A28;
  --vert-light:#86EFAC;
  --fond:#F0EDE8;
  --noir:#111;
  --gris:#666;
  --border:rgba(0,0,0,.08);
}

/* Layout */
.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;text-align:center}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:48px;animation:fadeDown .6s ease both;text-decoration:none}
.logo-name{font-family:'DM Sans',system-ui,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em;color:#111}

/* Typographie */
.headline{font-family:'Playfair Display',Georgia,serif;font-size:clamp(28px,6vw,42px);font-weight:700;color:#111;line-height:1.15;margin-bottom:16px}
.headline em{font-style:italic}
.subline{font-size:15px;color:#555;line-height:1.6;max-width:400px;margin-bottom:32px}

/* Footer */
.footer{margin-top:48px;font-size:12px;color:#aaa}
.footer a{color:#4A7A40;text-decoration:none}

/* Hint */
.hint{margin-top:12px;font-size:12px;color:#AAA}

/* Confirmation */
.confirm-msg,.confirm{display:none;align-items:center;gap:8px;font-size:14px;color:#4A7A40;margin-top:12px}
.confirm-msg.show,.confirm.show{display:flex}

/* Fond animé */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.bg-blob-1{width:400px;height:400px;background:#D97706;top:-100px;right:-80px;animation:drift1 12s ease-in-out infinite alternate}
.bg-blob-2{width:500px;height:500px;background:#4A7A40;bottom:-150px;left:-100px;animation:drift2 15s ease-in-out infinite alternate}
.bg-blob-3{width:300px;height:300px;background:#2563EB;top:40%;right:10%;opacity:.25;animation:drift3 10s ease-in-out infinite alternate}

/* Animations */
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes drift1{to{transform:translate(-40px,30px) scale(1.1)}}
@keyframes drift2{to{transform:translate(30px,-40px) scale(1.05)}}
@keyframes drift3{to{transform:translate(-20px,20px) scale(1.08)}}

/* Mobile */
@media(max-width:480px){
  .bg-blob{display:none}
  .headline{font-size:28px}
}