/* ============================================================
   NOS CORPS VIVANTS — A.I.M.E.
   css/global.css — Version 3
   Header fixe en haut, footer fixe en bas, taille adaptative
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=DM+Mono:wght@300;400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Roboto+Condensed:wght@300;400;500;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #ffffff;
  --white:     #ffffff;
  --black:     #111111;
  --mid:       #444444;
  --light:     #777777;
  --rule:      #cccccc;
  --rule-light:#e5e5e5;
  --faint:     #f5f3f0;
  --font-title: 'DM Sans', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --font-body:  'EB Garamond', Georgia, serif;
  --font-timeline: 'DM Sans', sans-serif;
  --font-condensed: 'Roboto Condensed', sans-serif;
  --header-h:  60px;
  --footer-h:  36px;
}

/* Taille de base adaptative : 13px min, 1vw proportionnel, 18px max */
html { font-size: clamp(13px, 1vw, 18px); scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--black);
  background: var(--bg);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .65; }

/* ── HEADER — fixé en haut ─────────────────────────────────── */
.site-header {
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2.5rem;
}
.site-title { font-family: var(--font-title); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--black); margin-bottom: .2rem; display: flex; align-items: center; gap: .8rem; }
.site-title .lock-btn { margin-left: auto; font-family: var(--font-mono); font-size: .52rem; letter-spacing: .06em; padding: .15rem .5rem; border: 1px solid var(--rule); background: transparent; cursor: pointer; color: var(--light); transition: all .15s; }
.site-title .lock-btn:hover { border-color: var(--black); color: var(--black); }
.site-title .lock-btn.connected { color: var(--black); border-color: var(--black); }
.site-title .lock-btn.connected-lecture { color: var(--mid); border-color: var(--rule); }
.site-nav { display: flex; gap: 0; }
.site-nav a { font-family: var(--font-title); font-size: .64rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--light); padding: .1rem .7rem .1rem 0; transition: color .15s; position: relative; }
.site-nav a:hover { color: var(--black); opacity: 1; }
.site-nav a.active { color: var(--black); }
.site-nav a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: calc(100% - .7rem); height: 1.5px; background: var(--black); }

/* ── FOOTER — fixé en bas ──────────────────────────────────── */
.site-footer {
  height: var(--footer-h);
  border-top: 1px solid var(--rule);
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  background: var(--bg);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
}
.site-footer p { font-family: var(--font-mono); font-size: .50rem; letter-spacing: .06em; color: var(--light); text-transform: uppercase; white-space: nowrap; }
.site-footer .footer-links { display: flex; gap: .8rem; align-items: center; margin-left: auto; }
.site-footer .footer-links a { font-family: var(--font-mono); font-size: .50rem; letter-spacing: .06em; color: var(--light); text-transform: uppercase; transition: color .15s; }
.site-footer .footer-links a:hover { color: var(--black); opacity: 1; }
.footer-icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.footer-icon svg { width: 12px; height: 12px; fill: var(--light); transition: fill .15s; }
.footer-icon:hover svg { fill: var(--black); }

/* ── CONTENU — entre header et footer fixes ────────────────── */
main {
  margin-top: var(--header-h);
  margin-bottom: var(--footer-h);
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
}

/* LOGIN */
.login-overlay { display: none; position: fixed; inset: 0; background: rgba(17,17,17,.35); z-index: 500; align-items: center; justify-content: center; }
.login-overlay.open { display: flex; }
.login-box { background: var(--bg); border: 1px solid var(--black); padding: 2rem 2.5rem; width: 340px; max-width: 95vw; }
.login-box h2 { font-family: var(--font-mono); font-size: .60rem; letter-spacing: .12em; text-transform: uppercase; color: var(--light); margin-bottom: 1rem; }
.login-box input[type=password] { width: 100%; font-family: var(--font-body); font-size: .9rem; padding: .45rem .6rem; border: 1px solid var(--rule); background: var(--white); color: var(--black); outline: none; margin-bottom: .7rem; transition: border-color .15s; }
.login-box input[type=password]:focus { border-color: var(--black); }
.login-box .login-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.login-error { font-family: var(--font-mono); font-size: .56rem; color: #a00; margin-bottom: .5rem; display: none; }
.login-error.show { display: block; }

/* BUTTONS */
.btn { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .06em; padding: .3rem .7rem; border: 1px solid var(--black); background: transparent; cursor: pointer; color: var(--black); transition: background .15s, color .15s; white-space: nowrap; }
.btn:hover { background: var(--black); color: var(--bg); }
.btn.primary { background: var(--black); color: var(--bg); }
.btn.primary:hover { background: var(--mid); }
.btn.ghost { border-color: var(--rule); color: var(--light); }
.btn.ghost:hover { border-color: var(--black); color: var(--black); background: transparent; }

/* TOOLTIP */
.tooltip-wrap { position: relative; display: inline; cursor: pointer; }
.tooltip-wrap .tooltip { display: none; position: absolute; top: -4px; left: calc(100% + 8px); background: var(--faint); border: 1px solid var(--rule); color: var(--black); font-family: var(--font-title); font-size: .72rem; font-style: normal; font-weight: 400; line-height: 1.4; padding: .45rem .7rem; width: 240px; z-index: 50; pointer-events: none; white-space: normal; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.tooltip-wrap .tooltip .tooltip-title { display: block; font-weight: 600; font-size: .60rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .25rem; color: var(--black); }
.tooltip-wrap:hover .tooltip { display: block; }

/* NOTICE */
.notice { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .05em; color: var(--light); padding: .2rem 2.5rem; border-bottom: 1px solid var(--rule-light); background: var(--faint); }
.notice.connected { color: var(--black); background: var(--bg); }

/* EMPTY */
.empty { color: var(--rule); font-style: italic; font-size: .78rem; }

/* SCROLLBAR */
::-webkit-scrollbar { height: 3px; width: 3px; }
::-webkit-scrollbar-thumb { background: var(--rule); }

/* REDIRECT MSG */
.redirect-msg { font-family: var(--font-mono); font-size: .56rem; color: #a00; padding: .4rem 2.5rem; border-bottom: 1px solid var(--rule-light); background: #fff5f5; }

/* JALON MODAL (pour pratiques.php) */
.jalon-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(17,17,17,.4); z-index: 400; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; }
.jalon-modal-overlay.open { display: flex; }
.jalon-modal { background: var(--bg); border: 1px solid var(--black); width: 700px; max-width: 98vw; padding: 2rem 2.5rem; position: relative; margin: auto; }
.jalon-modal h2 { font-family: var(--font-title); font-size: .90rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.2rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.jalon-modal .modal-close { position: absolute; top: .8rem; right: 1rem; background: none; border: none; font-family: var(--font-mono); font-size: .9rem; cursor: pointer; color: var(--light); }
.jalon-modal .modal-close:hover { color: var(--black); }