/* =============================================================================
   Claude Usage — feuille de style commune aux quatre pages.

   Un seul jeu de variables, une seule echelle de tailles, une seule echelle
   d'espacements : c'est ce qui fait que les pages se ressemblent sans qu'on ait
   a y penser. Aucune valeur « au jugé » dans le reste du fichier.
   ============================================================================= */

:root {
  /* Couleurs — l'orange est celui de Claude, le reste est neutre et froid pour
     le laisser ressortir. Contrastes verifies AA sur le fond principal. */
  --bg:        #0e1013;
  --bg-soft:   #14171d;
  --panel:     #171b22;
  --line:      #242a34;
  --line-soft: #1d222a;
  --text:      #eef1f6;
  --text-dim:  #c3cad6;
  --muted:     #8f98a8;
  --accent:    #d97757;
  --accent-dim:#b45f42;
  --accent-wash: rgba(217, 119, 87, .10);

  /* Tailles — six paliers, pas un de plus. */
  --t-xs:   0.8125rem;
  --t-sm:   0.9063rem;
  --t-base: 1rem;
  --t-lg:   1.1875rem;
  --t-xl:   1.5rem;
  --t-hero: clamp(2rem, 5vw, 3.25rem);

  /* Espacements — multiples de 4. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  --radius:    14px;
  --radius-sm: 10px;
  --measure:   68ch;              /* longueur de ligne confortable */
  --ease:      cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-dim);
  font: var(--t-base)/1.7 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- structure ------------------------------------------------------------ */

.wrap { max-width: 880px; margin: 0 auto; padding: 0 var(--s-6); }
.wrap--text { max-width: 780px; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(14, 16, 19, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .wrap {
  display: flex; align-items: center; gap: var(--s-4);
  padding-block: var(--s-3);
}
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text); text-decoration: none; font-weight: 600;
  margin-right: auto;
}
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent); color: #21120a;
  display: grid; place-items: center; font-size: var(--t-sm); font-weight: 700;
}
.topbar nav { display: flex; gap: var(--s-4); font-size: var(--t-sm); }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--text); }

section { padding-block: var(--s-12); }
section + section { border-top: 1px solid var(--line-soft); }

/* --- texte ---------------------------------------------------------------- */

h1, h2, h3 { color: var(--text); line-height: 1.2; margin: 0; }
h1 { font-size: var(--t-hero); letter-spacing: -.02em; margin-bottom: var(--s-4); }
h2 { font-size: var(--t-xl); letter-spacing: -.01em; margin-bottom: var(--s-4); }
h3 { font-size: var(--t-base); margin-bottom: var(--s-2); }

p  { margin: 0 0 var(--s-4); max-width: var(--measure); }
ul { margin: 0 0 var(--s-4); padding-left: var(--s-6); max-width: var(--measure); }
li { margin-bottom: var(--s-2); }

.lede { font-size: var(--t-lg); color: var(--muted); }
.eyebrow {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent); margin-bottom: var(--s-3);
}
.small { font-size: var(--t-sm); color: var(--muted); }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--text); }

code {
  background: #05070a; border: 1px solid var(--line-soft);
  padding: 1px 6px; border-radius: 6px;
  font-size: var(--t-xs); color: #e8c3b1;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  overflow-wrap: anywhere;
}

/* --- composants ----------------------------------------------------------- */

.grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.card h3 { display: flex; align-items: center; gap: var(--s-2); }
.card p:last-child { margin-bottom: 0; }
.card .small { max-width: none; }

.icon { width: 17px; height: 17px; stroke: var(--accent); flex: none; }

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--accent); color: #21120a;
  font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; padding: var(--s-3) var(--s-6);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: transform .16s var(--ease), background-color .16s var(--ease);
}
.btn:hover { background: #e5875f; color: #21120a; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent; color: var(--text); border-color: var(--line);
}
.btn--ghost:hover { background: var(--bg-soft); color: var(--text); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.note {
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--s-4) var(--s-6);
  margin-bottom: var(--s-4);
}
.note p:last-child { margin-bottom: 0; }

.shot {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: var(--s-6);
  margin-top: var(--s-8);
  overflow-x: auto;
}
.shot img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.shot figcaption { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--muted); }

/* tableaux : ils portent l'essentiel de la politique, ils doivent rester lisibles */
.table-scroll { overflow-x: auto; margin-bottom: var(--s-4); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 520px; }
th, td { border: 1px solid var(--line); padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; }
th { background: var(--panel); color: var(--text); font-weight: 600; }
td { color: var(--muted); }

/* pages legales : titres separes par un filet, respiration reguliere */
.legal h2 {
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
}
.legal h3 { color: var(--accent); margin-top: var(--s-6); font-size: var(--t-sm); }
.legal > p:first-of-type { margin-bottom: var(--s-8); }

footer {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s-8) var(--s-16);
  color: var(--muted); font-size: var(--t-sm);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

/* Mise en scene de la capture : la barre est fine et sombre ; posee sur un fond
   nu elle ressemble a un bout d'image. On la remet dans son contexte — un bas
   d'ecran, avec l'ombre qu'elle projette reellement. */
.stage {
  margin-top: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 30% 0%, #1b2130 0%, #0b0d11 60%, #07090c 100%);
  padding: var(--s-16) var(--s-6) var(--s-6);
  overflow-x: auto;
}
.stage__bar {
  display: block; margin: 0 auto;
  background: transparent;
  max-width: 100%; height: auto;
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .6);
}
.stage__floor {
  height: 34px; margin: var(--s-6) calc(var(--s-6) * -1) calc(var(--s-6) * -1);
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
  border-radius: 0 0 var(--radius) var(--radius);
}
.legend {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: var(--s-4); padding: 0; list-style: none; max-width: none;
}
.legend li { margin: 0; font-size: var(--t-xs); color: var(--muted); }
.legend b { display: block; color: var(--text); font-weight: 600; font-size: var(--t-sm); }

/* --- accessibilite -------------------------------------------------------- */

:where(a, button, .btn):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #21120a;
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm);
}
.skip:focus { left: var(--s-4); top: var(--s-4); z-index: 20; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .btn:hover { transform: none; }
}