/* L’Institut d’Axelle : thème « L'heure a sa lumière ». Remplace public/theme.css. */
@font-face { font-family: 'Casa Titre'; src: url('/fonts/casa-titre.woff2') format('woff2'); font-weight: 300 500; font-display: swap; }
@font-face { font-family: 'Casa H'; src: url('/fonts/casa-h.woff2') format('woff2'); unicode-range: U+68; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  color-scheme: light;
  /* Couleurs */
  --nuit: #15193B; --nuit-2: #272C59; --ardoise: #474B68;
  --papier: #F5F0E6; --carton: #FDFAF3; --brume: #E7E4E4;
  --filet: #DAD3C3; --bord: #807B6C; --cendre: #E3DED2;
  --lampe: #F4D27A; --grenat: #8A2C3A;
  --erreur: #A3201C; --erreur-fond: #F9E8E2; --sapin: #1C6346; --sapin-fond: #E2EEE6;
  /* Lettres */
  --titre: 'Casa Titre', Georgia, 'Times New Roman', serif;
  --texte: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 13px; --fs-s: 14.5px; --fs-m: 16px; --fs-l: 18px;
  /* Espaces */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --gutter: 16px;
  /* Formes */
  --r-carton: 4px; --r-btn: 12px; --r-champ: 10px; --r-feuille: 18px;
  /* Cibles */
  --t-primary: 56px; --t-second: 48px; --t-min: 44px;
  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-vite: 120ms; --d-pose: 280ms; --d-astre: 620ms;
  /* Grain d'impression : image data, autorisée par la CSP. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .1 0 0 0 0 .23 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --hachure: repeating-linear-gradient(135deg, var(--nuit) 0 1.5px, transparent 1.5px 7px);

  /* Anciens noms, le temps de reprendre admin.css */
  --ink: var(--nuit); --ink-soft: var(--ardoise); --ink-faint: var(--ardoise);
  --paper: var(--papier); --card: var(--carton); --line: var(--filet);
  --plum: var(--nuit); --plum-deep: var(--nuit); --plum-tint: var(--brume);
  --gold: var(--lampe); --gold-deep: var(--grenat); --gold-tint: var(--brume);
  --good: var(--sapin); --good-tint: var(--sapin-fond); --bad: var(--erreur); --bad-tint: var(--erreur-fond);
  --radius: var(--r-btn); --shadow: 0 1px 2px rgb(21 25 59 / 8%), 0 10px 26px rgb(21 25 59 / 10%);
  --display: var(--titre); --text: var(--texte);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--nuit); font-family: var(--texte); font-size: var(--fs-m); line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 380; line-height: 1.08; letter-spacing: -.012em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Focus en deux tons : visible sur le papier comme sur n'importe quelle heure. */
:focus-visible { outline: 2px solid var(--nuit); outline-offset: 2px; box-shadow: 0 0 0 2px var(--carton); }
[hidden] { display: none !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--t-second); padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-btn); background: var(--nuit); color: var(--carton); font-weight: 600; text-decoration: none; transition: transform var(--d-vite) var(--ease), background var(--d-vite) var(--ease); }
.btn:hover { background: var(--nuit-2); }
.btn:active { transform: scale(.985); }
.btn:disabled { background: var(--brume); color: var(--ardoise); cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--nuit); border-color: var(--bord); }
.btn.ghost:hover { background: var(--brume); }
.btn.danger { background: transparent; color: var(--erreur); border-color: var(--erreur); }
.btn.danger:hover { background: var(--erreur-fond); }
.btn.small { min-height: var(--t-min); padding: 0 14px; font-size: var(--fs-s); }
.btn.block { width: 100%; }

.field { display: grid; gap: 6px; }
.field > span { font-size: var(--fs-s); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--t-second); padding: 10px 14px; border: 1px solid var(--bord); border-radius: var(--r-champ); background: var(--carton); font-size: 16px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--nuit); outline-offset: 0; border-color: var(--nuit); box-shadow: none; }
.field small { color: var(--ardoise); font-size: var(--fs-xs); }
.field [aria-invalid="true"] { border-color: var(--erreur); border-width: 2px; }
.alert { padding: var(--e3) 14px; border-radius: var(--r-champ); background: var(--erreur-fond); color: var(--erreur); font-size: 15px; font-weight: 550; }
.notice { padding: var(--e3) 14px; border-radius: var(--r-champ); background: var(--brume); color: var(--nuit); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}