/* =============================================================================
   Mise en page et composants
   ============================================================================= */

.shell {
  width: min(100% - 2 * var(--space-6), var(--shell-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-16);
  border-top: 1px solid var(--color-divider);
}

.section--flush {
  border-top: 0;
}

.section__lead {
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  margin-top: var(--space-4);
  max-width: var(--measure);
}

.section__lead.cite {
  border-left: 3px solid var(--color-primary);
  font-style: italic;
  padding-left: var(--space-6);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin: 0 0 var(--space-4);
}


/* -----------------------------------------------------------------------------
   Logotype — un fichier par thème.
   Un fond CSS plutôt que deux `<img>` dont on masquerait l'un : `display: none`
   n'empêche pas le téléchargement, un fond non appliqué si.
   -------------------------------------------------------------------------- */

.nav-logo {
  display: block;
  width: 16rem;
  height: 6rem;
  background: no-repeat left center / contain url('../assets/images/logo-light.svg');
}

:root[data-theme='light'] .nav-logo {
  background-image: url('../assets/images/logo-dark.svg');
}

:root[data-theme='contrast'] .nav-logo {
  background-image: url('../assets/images/logo-light.svg');
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .nav-logo {
    background-image: url('../assets/images/logo-light.svg');
  }
}

/* Un mode de contraste forcé jette les images de fond : sans repli, le logo
   disparaît et le lien de retour à l'accueil n'a plus de nom visible. */
@media (forced-colors: active) {
  .nav-logo {
    background: none;
    width: auto;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-base);
  }

  .nav-logo::after {
    content: 'Memorengine';
  }
}

/* -----------------------------------------------------------------------------
   Barre supérieure
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--nav-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  padding-block: var(--space-2);
}

.nav__link:hover {
  color: var(--color-text-primary);
}

.controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Niveau AAA de WCAG 2.5.5 : c'est le seul chemin vers la navigation sur
   mobile, et il doit être atteint au pouce. */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--target-comfortable);
  min-height: var(--target-comfortable);
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.burger svg {
  width: 22px;
  height: 22px;
}

/* Une icône, deux tracés : celui qui ne sert pas est retiré du rendu.
   `aria-expanded` porte l'état, donc rien n'est à annoncer en plus. */
.burger__close {
  display: none;
}

.burger[aria-expanded='true'] .burger__open {
  display: none;
}

.burger[aria-expanded='true'] .burger__close {
  display: block;
}

@media (width < 56rem) {
  .burger {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--space-6) var(--space-8);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
    /* `dvh` et non `vh` : sur mobile, `100vh` inclut la barre d'adresse et
       déborde de l'écran visible. */
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    /* Fermé, le tiroir sort de l'écran ET de l'ordre de tabulation : un
       `transform` seul le laisserait tabulable, et le lecteur au clavier
       traverserait des liens invisibles. */
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
  }

  .nav[data-open='true'] {
    transform: translateY(0);
    visibility: visible;
  }

  .nav__link {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    font-size: var(--text-base);
  }

  .controls {
    justify-content: space-between;
    padding-top: var(--space-6);
  }
}

/* -----------------------------------------------------------------------------
   Bascule de thème — trois états, jamais un « auto » visible
   La préférence système fixe la valeur initiale ; ensuite, le lecteur choisit.
   -------------------------------------------------------------------------- */

.themes {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
}

.themes__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Plancher de WCAG 2.5.8 dépassé : 32 px contre 24 exigés. */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.themes__btn svg {
  width: 17px;
  height: 17px;
}

.themes__btn[aria-checked='true'] {
  /* Le fond ne peut pas porter la sélection : en thème clair, `surface-raised`
     ne diffère du canvas que de 1,03:1. C'est donc la couleur du pictogramme
     qui la porte — mesurée à 6,38:1 en clair, 6,88:1 en sombre, 9,48:1 en
     contraste renforcé. */
  background: var(--color-surface-raised);
  color: var(--color-primary-text);
  box-shadow: inset 0 0 0 1px var(--color-control-border);
}

.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: 32px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Hero — la typographie est l'identité visuelle, pas une illustration
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-12) var(--space-12);
}

.hero__title {
  max-width: 30ch;
}

.hero__body {
  display: grid;
  gap: var(--space-8) var(--space-12);
  margin-top: var(--space-8);
  align-items: start;
}

.hero__lead {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.hero__claim {
  margin: 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-primary);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  max-width: 50ch;
  font-style: italic;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

/* -----------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-comfortable);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border: 1px solid var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-ink);
}

/* Fond transparent : la bordure est la seule chose qui dit que c'est un
   contrôle, donc elle relève de WCAG 1.4.11 et tient 3:1. */
.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-control-border);
}

/* -----------------------------------------------------------------------------
   Grilles et cartes
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.card {
  padding: var(--space-6);
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
}

.card__title {
  margin-bottom: var(--space-3);
}

.card__body {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary-text);
  margin-bottom: var(--space-3);
}

/* -----------------------------------------------------------------------------
   Étapes et propriétés
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Fonctionnement — quatre cartes à arête colorée.

   L'arête magenta remplace un numéro décoratif : elle donne du relief sans rien
   ajouter à lire, et l'accent reste parcimonieux — jamais un aplat.
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.steps__item {
  position: relative;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Un pseudo-élément plutôt qu'un `border-left` : le rayon de la carte s'y
   applique proprement, et l'arête ne se courbe pas dans les angles. */
.steps__item::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-primary);
}

.steps__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-primary-text);
  margin-bottom: var(--space-3);
}

.steps__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.steps__body {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* -----------------------------------------------------------------------------
   Propriétés — le libellé ouvre la phrase au lieu de la précéder.
   Une colonne de libellés séparée oblige l'œil à franchir un vide ; ici la
   lecture est continue, et le trait vertical porte le rythme.
   -------------------------------------------------------------------------- */

.props {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.props p {
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-primary);
  color: var(--color-text-secondary);
}

.props strong {
  font-family: var(--font-serif);
  color: var(--color-text-primary);
}

/* -----------------------------------------------------------------------------
   Ce que ce n'est pas — la section qui écarte plutôt qu'elle n'affirme
   -------------------------------------------------------------------------- */

.contrast-list {
  display: grid;
  gap: var(--space-8) var(--space-12);
  margin-top: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.contrast-list__col h3 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.contrast-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.contrast-list li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.contrast-list li::before {
  content: '❌';
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.contrast-list--is li::before {
  content: '✓';
  color: var(--color-ok);
}

/* -----------------------------------------------------------------------------
   Diagramme
   -------------------------------------------------------------------------- */

.diagram {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.diagram svg {
  width: 100%;
  height: auto;
  min-width: 34rem;
}

/* -----------------------------------------------------------------------------
   Feuille de route
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Feuille de route — un rail vertical.
   La progression se lit sans lire les mots. La couleur ne porte jamais seule
   l'information : le mot d'état la double, et reste lisible en monochrome.
   -------------------------------------------------------------------------- */

.timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
}

.timeline__item {
  position: relative;
  padding-left: var(--space-8);
  padding-bottom: var(--space-8);
  border-left: 1px solid var(--color-divider);
  max-width: var(--measure);
}

.timeline__item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.timeline__state {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.timeline__item--done {
  color: var(--color-ok);
}

.timeline__item--doing {
  color: var(--color-warn);
}

.timeline__item--todo {
  color: var(--color-unchecked);
}

.timeline__item p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* -----------------------------------------------------------------------------
   FAQ — de vrais details/summary, accessibles sans une ligne de JavaScript
   -------------------------------------------------------------------------- */

.faq {
  margin-top: var(--space-8);
  display: grid;
  gap: 0;
}

.faq details {
  border-bottom: 1px solid var(--color-divider);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-comfortable);
  padding-block: var(--space-4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: '+';
  font-family: var(--font-mono);
  color: var(--color-primary-text);
  flex-shrink: 0;
}

.faq details[open] summary::before {
  content: '\2013';
}

.faq p {
  padding-bottom: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* -----------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: center;
}

.footer a {
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------------------
   Révélation au défilement — discrète, et jamais nécessaire à la lecture
   Sans JavaScript, tout est visible : l'état initial est appliqué par le script.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal[data-revealed='false'] {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  .js-reveal {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
}