/* =========================
   Libric.ca — style.css (v6, refonte visuelle accessible)
   ========================= */

/* Variables */
:root{ --fond:#0b0d12; --texte:#eef2f7; --accent:#5ea19e; --muted:#aab4c0; --outline:#2a3242; }

/* Base */
html,body{ margin:0; padding:0; background:var(--fond); color:var(--texte); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif; height:100%; }

/* Conteneur principal (conserve la classe calibre) */
.calibre{ position:relative; width:100%; height:100vh; overflow:hidden; }

/* --- Calques --- */
/* Fond évolutif (derrière tout) */
#fond{ position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(120% 120% at 50% 40%,#0f141c 0%,#0b0d12 35%,#06070a 100%); transition:background 300ms ease; z-index:0; }
/* Trame subtile inspirée des lignes du logo + légère vignette */
#fond::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:
  linear-gradient(180deg,rgba(0,0,0,.35),transparent 38%,transparent 62%,rgba(0,0,0,.35)),
  repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 120px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 120px);
}
@media (max-width:600px){ #fond::before{ background:
  linear-gradient(180deg,rgba(0,0,0,.35),transparent 38%,transparent 62%,rgba(0,0,0,.35)),
  repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 90px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 90px);
} }

/* Couche IA (bulle injectée par JS) */
#ia-layer{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Texte statique en avant-plan */
.top-text{ position:relative; z-index:2; }

/* --- Contenu central --- */
.contenu-centre{ position:relative; top:50%; transform:translateY(-50%); text-align:center; padding:0 20px; max-width:1080px; margin:0 auto; }
.titre{ font-size:clamp(24px,3.5vw,44px); letter-spacing:.4px; line-height:1.25; margin:0 0 18px 0; font-weight:700; }
.intro{ color:var(--muted); margin:0 0 36px 0; font-size:clamp(16px,1.4vw,18px); }
.actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* Boutons */
.btn{ position:relative; display:inline-block; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)); color:var(--texte); border:1px solid var(--outline); padding:12px 20px; border-radius:14px; text-decoration:none; transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease,background 160ms ease; box-shadow:0 0 0 rgba(94,161,158,0); will-change:transform; }
.btn:hover,.btn:focus{ background:rgba(94,161,158,.08); border-color:#3a5756; box-shadow:0 8px 20px rgba(0,0,0,.35), 0 0 0 2px rgba(94,161,158,.15) inset; outline:none; transform:translateY(-1px); }
[data-variant="enter"]:hover{ background:rgba(94,161,158,.12) }
[data-variant="connect"]:hover{ background:rgba(181,211,210,.14) }
.btn:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.35), 0 0 0 2px rgba(94,161,158,.12) inset; }
/* Focus clavier visible */
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
/* Empêche tout étirement si parent flex */
.actions .btn{ flex:0 0 auto; width:auto; }
.btn{ cursor:pointer; }

/* --- Bulle IA --- */
.ia-bubble{ position:absolute; min-width:420px; max-width:760px; padding:22px 26px; border-radius:22px; border:1px solid var(--outline); background:rgba(13,17,24,.92); color:var(--texte); font-size:20px; line-height:1.55; letter-spacing:.2px; box-shadow:0 10px 35px rgba(0,0,0,.5); opacity:0; transition:opacity 400ms ease; pointer-events:none; }
.ia-bubble.show{ opacity:1 }
.ia-bubble::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-12px; border-width:12px; border-style:solid; border-color:rgba(13,17,24,.92) transparent transparent transparent; }
.ia-bubble .titre-ia{ display:block; font-size:.8em; text-transform:uppercase; letter-spacing:.3px; opacity:.8; margin-bottom:6px; }

/* Respect des préférences (animations réduites) */
@media (prefers-reduced-motion: reduce){ #fond{transition:none} .btn{transition:none} .ia-bubble{transition:none} }

/* Utilitaires a11y */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
::selection{ background:rgba(94,161,158,.35); color:#fff; }

/* --- Logo / Lockup + icône animée --- */
.logo-bar{ position:absolute; top:16px; left:16px; z-index:3; --H:clamp(48px,7vw,64px); }
.logo-bar a{ position:relative; display:inline-block; height:var(--H); border-radius:12px; outline:none; transform-origin:left center; will-change:transform; transition: transform 220ms ease-in-out; }
.logo-bar a:focus{ outline:2px solid var(--accent); outline-offset:4px; }
@media (max-width:380px){ .logo-bar{ top:12px; left:12px } }
.logo-bar img.wordmark{ display:block; height:var(--H); width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.logo-bar img.icon-anim{ position:absolute; left:0; top:0; height:var(--H); width:var(--H); pointer-events:none; opacity:0; transition:opacity .25s ease-in; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.logo-bar a:hover .icon-anim,.logo-bar a:focus .icon-anim{ opacity:1 }
/* Micro-respiration sur modern browsers, fallback = simple scale */
@media (prefers-reduced-motion: no-preference){
  .logo-bar a:hover,.logo-bar a:focus{ animation:logo-breathe 3.2s ease-in-out infinite; transform:none; }
  @keyframes logo-breathe{ 0%,100%{ transform:scale(1.000) } 50%{ transform:scale(1.012) } }
}

/* --- Pages internes (ex.: register.php) --- */
.page{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:64px 16px; z-index:2; }
.page .wrap{ width:100%; max-width:760px; background:rgba(20,24,32,.72); border:1px solid var(--outline); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.45); padding:28px; backdrop-filter:none; }
.page h1{ margin:0 0 18px 0; font-size:clamp(22px,2.6vw,32px); line-height:1.25; }
.page p{ margin:0 0 14px 0; }

/* Formulaires */
.page form{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:6px; }
.page label{ font-size:14px; color:var(--muted); }
.page input{ display:block; width:100%; background:rgba(255,255,255,.03); color:var(--texte); border:1px solid var(--outline); border-radius:12px; padding:12px 14px; font-size:16px; transition:border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.page input:focus{ outline:none; border-color:#3a5756; box-shadow:0 0 0 3px rgba(94,161,158,.25); background:rgba(255,255,255,.045); }
.page button.btn{ margin-top:6px; }

/* Messages (erreur / info) */
.msg{ margin:10px 0 16px 0; padding:12px 14px; border-radius:12px; border:1px solid #58424b; background:#2a1c22; color:#ffd9e2; }
.ok{ margin:10px 0 16px 0; padding:12px 14px; border-radius:12px; border:1px solid #3f5e5c; background:#142524; color:#d3fff8; }

/* États utilisateur (exploitable si besoin) */
body.etat-visiteur .actions [data-variant="enter"]{ }
body.etat-membre .actions [data-variant="connect"]{ opacity:.5; pointer-events:none; }

/* Compatibilité renforcée */
@media (forced-colors: active){ .btn{ border:1px solid ButtonText; } .page input{ border:1px solid ButtonText; } }

.form-narrow{max-width:420px;margin:0 auto;text-align:left}
.input-block{display:block;width:100%;margin:6px 0 16px;padding:10px;border:1px solid var(--outline);border-radius:10px}
.btn-inline-fix{margin-left:8px}