/* ---------------------------------------------------------------------------
   SuisTesJ — feuille de style unique.

   Direction : le papier réglé et la règle graduée, pas la landing page SaaS.
   Trois décisions portent tout :

   1. La marge. Le papier scolaire français porte un filet vertical à gauche ;
      c'est la colonne où l'on annote. Ici, les intertitres et les repères
      vivent dedans, à partir de 62rem.
   2. L'accent ne colore jamais du texte. Il surligne ou il trace.
   3. Les écarts s'allongent. La règle des J est une liste ordonnée positionnée
      en pourcentage ; c'est le seul endroit du site qui bouge.

   THÈME CLAIR UNIQUEMENT. Il n'y a pas de bloc prefers-color-scheme, et il ne
   doit pas y en avoir : un visiteur en mode sombre verra une page lumineuse.
   C'est un choix de marque assumé, pas un oubli — et la contrepartie est que
   les contrastes ci-dessous sont mesurés, pas estimés.

   L'AMBRE EST EN DEUX VALEURS, ET C'EST DÉLIBÉRÉ.
   Un surligneur et un trait n'ont pas les mêmes besoins : sur l'un on écrit,
   l'autre on le regarde. --mark est le corps du trait de feutre, clair, fait
   pour porter de l'encre (encre dessus : 8,01:1). --mark-line en est le bord,
   là où l'encre s'accumule, assez sombre pour se voir seul (3,67:1 sur le
   fond, seuil WCAG 1.4.11 de 3:1). Même teinte, même saturation, deux rôles.
   --mark-line ne sert JAMAIS de fond : l'encre dessus ne fait que 4,30:1.
--------------------------------------------------------------------------- */

:root {
  /* Mesurés au lot SITE-03. Chaque valeur porte son ratio contre le fond. */
  --paper: #f6f4ee;        /* fond, tiré vers l'ambre plutôt que gris pur */
  --paper-2: #e7e2d3;      /* surfaces posées, bandeaux — 1,18:1, décoratif */
  --ink: #1c1a16;          /* texte — 15,80:1 */
  --ink-2: #57524a;        /* texte secondaire — 7,04:1 */
  --rule: #d7d1c2;         /* filets décoratifs (marge, tableaux) — exemptés */
  --rule-strong: #7f7867;  /* traits porteurs d'information — 3,99:1 */
  --mark: #e8a317;         /* le corps du surligneur — jamais un trait seul */
  --mark-line: #a77511;    /* le trait : lien, focus, graduation — 3,67:1 */

  --serif: Newsreader, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --grot: 'Familjen Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --measure: 63ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --margin-col: 9.5rem;    /* largeur de la marge annotée */
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.62;
  /* Le poids est chargé, pas l'italique : Newsreader italique pèse 24 ko pour
     trois mots par page. L'oblique synthétique est autorisée, la graisse
     synthétique ne l'est pas. */
  font-synthesis: style;
}

/* --- squelette ---------------------------------------------------------- */

.shell {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper-2);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: var(--gutter); top: 0.5rem; }

/* --- en-tête ------------------------------------------------------------ */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.6rem 0 1.2rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--grot);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  background: none;
}
.wordmark .j { box-shadow: inset 0 -0.62em var(--mark); color: var(--ink); padding: 0 0.1em; }

.masthead nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; }

.masthead nav a {
  font-family: var(--grot);
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
}

/* La page courante porte le trait en permanence, à l'épaisseur du survol.
   C'est le même signe, pas un second vocabulaire. */
.masthead nav [aria-current='page'] {
  font-family: var(--grot);
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -0.42em var(--mark);
  padding: 0 0.12em;
}

/* --- liens : le surligneur ---------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--mark-line), var(--mark-line));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.1em;
  padding-bottom: 0.06em;
  transition: background-size 140ms ease, background-image 140ms ease;
}
/* Au survol le trait s'épaissit et redevient du surligneur : le geste passe
   du souligné au surligné. */
a:hover {
  background-image: linear-gradient(var(--mark), var(--mark));
  background-size: 100% 0.42em;
}
a:focus-visible {
  outline: 2px solid var(--mark-line);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- rythme vertical ---------------------------------------------------- */

main { padding: clamp(2.5rem, 6vw, 4.5rem) 0 1rem; }

section + section { margin-top: clamp(3rem, 7vw, 5.5rem); }

p, ul, ol, dl, table { max-width: var(--measure); }

h1, h2, h3 { font-family: var(--grot); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }

h1 {
  font-size: clamp(2.15rem, 1.3rem + 4vw, 3.9rem);
  max-width: 18ch;
  text-wrap: balance;
}
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); margin-bottom: 0.9rem; }
h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; margin-bottom: 0.35rem; }

.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  color: var(--ink-2);
  margin: 1.4rem 0 0;
  max-width: 52ch;
}

p { margin: 1.05em 0; }

/* --- la marge annotée --------------------------------------------------- */

.ruled { position: relative; }

.ruled > .eyebrow {
  font-family: var(--grot);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: 0.7rem;
}

@media (min-width: 62rem) {
  .ruled {
    padding-left: var(--margin-col);
    border-left: 1px solid var(--rule);
  }
  .ruled > .eyebrow {
    position: absolute;
    left: 0;
    width: calc(var(--margin-col) - 1.5rem);
    margin-left: 1.25rem;
    margin-bottom: 0;
    padding-top: 0.4rem;
  }
}

/* --- la règle des J ----------------------------------------------------- */

.ruler {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  position: relative;
  max-width: none;
}

.ruler li {
  font-family: var(--grot);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  white-space: nowrap;
}

/* L'écart avec le J précédent : c'est lui qui s'allonge, donc c'est lui qu'on
   écrit. Pas de capitales — « +1 j » veut dire jour, pas Joule. */
.ruler .day { display: block; font-size: 0.6875rem; font-weight: 500; opacity: 0.72; }

/* Sous 46rem : verticale, et la même échelle compressée que l'horizontale.
   L'échelle linéaire (--v) a été essayée : sur 20rem elle tasse J0, J1, J3 et
   J7 dans les vingt-cinq premiers pixels, et quatre libellés se recouvrent.
   Les écarts exacts ne servent à rien s'ils sont illisibles. */
@media (max-width: 45.999rem) {
  .ruler {
    height: 26rem;
    border-left: 2px solid var(--rule-strong);
    padding-left: 1.1rem;
  }
  .ruler li {
    position: absolute;
    top: calc(var(--h) * 1%);
    transform: translateY(-50%);
  }
  .ruler li:first-child { transform: translateY(0); }
  .ruler li:last-child { transform: translateY(-100%); }
  /* Une seule ligne par repère : empilé sur deux lignes, chaque élément fait
     trente pixels de haut et les premiers écarts, qui sont les plus serrés,
     ne peuvent plus les séparer. */
  .ruler .day { display: inline; margin-left: 0.45rem; }
  .ruler .day::before { content: '· '; }
  .ruler li::before {
    content: '';
    position: absolute;
    left: -1.1rem;
    top: 50%;
    width: 0.7rem;
    height: 2px;
    background: var(--rule-strong);
  }
  .ruler li.now::before { background: var(--mark-line); width: 1.1rem; }
}

/* Au-dessus : horizontale. L'échelle est compressée pour rester lisible,
   mais l'ordre des écarts est celui de la méthode. */
@media (min-width: 46rem) {
  .ruler {
    height: 4.6rem;
    border-top: 2px solid var(--rule-strong);
    padding-top: 1rem;
  }
  .ruler li {
    position: absolute;
    left: calc(var(--h) * 1%);
    transform: translateX(-50%);
    text-align: center;
  }
  .ruler li:first-child { transform: translateX(0); text-align: left; }
  .ruler li:last-child { transform: translateX(-100%); text-align: right; }
  .ruler li::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 50%;
    width: 2px;
    height: 0.6rem;
    background: var(--rule-strong);
  }
  .ruler li:first-child::before { left: 0; }
  .ruler li:last-child::before { left: auto; right: 0; }
  .ruler li.now::before { background: var(--mark-line); height: 1rem; top: -1rem; }
}

.ruler li.now { color: var(--ink); }
.ruler li.now .lab { box-shadow: inset 0 -0.62em var(--mark); color: var(--ink); padding: 0 0.15em; }
.ruler li.now .day { opacity: 1; color: var(--ink); }

.ruler-note {
  font-family: var(--grot);
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-top: 1.4rem;
}

/* La seule animation du site : la règle se trace, une fois. */
@media (prefers-reduced-motion: no-preference) {
  .ruler { animation: rule-in 520ms ease-out both; }
  .ruler li { animation: tick-in 380ms ease-out both; animation-delay: calc(220ms + var(--i) * 55ms); }
  @keyframes rule-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes tick-in { from { opacity: 0; transform-origin: left; } }
}

/* --- la règle dépliée : un rang par repère ------------------------------
   L'accueil montre la forme de l'échelle ; cette page-ci montre le
   raisonnement. C'est la même règle, déroulée à plat, avec l'annotation à
   côté de chaque graduation — pas une seconde signature graphique. */

.method { list-style: none; padding: 0; margin: 2.2rem 0 0; max-width: var(--measure); }

.method li {
  display: grid;
  grid-template-columns: 3.4rem 4rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding: 0.85rem 0 0.85rem 1.1rem;
  border-left: 2px solid var(--rule-strong);
  position: relative;
  margin: 0;
}
.method li::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 1.35rem;
  width: 0.7rem;
  height: 2px;
  background: var(--rule-strong);
}
.method .lab { font-family: var(--grot); font-weight: 700; font-size: 1rem; }
.method .gap {
  font-family: var(--grot);
  font-size: 0.8125rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.method .what { font-size: 0.9375rem; }

@media (max-width: 33rem) {
  .method li { grid-template-columns: 3.2rem 1fr; }
  .method .gap { grid-column: 2; }
  .method .what { grid-column: 1 / -1; margin-top: 0.3rem; }
}

/* --- listes et blocs ---------------------------------------------------- */

ul, ol { padding-left: 1.15rem; }
li { margin: 0.4em 0; }

.plain { list-style: none; padding: 0; }

.pair { margin: 0; }
.pair dt { font-family: var(--grot); font-weight: 500; margin-top: 1.4rem; }
.pair dd { margin: 0.25rem 0 0; color: var(--ink-2); }

.slab {
  background: var(--paper-2);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  margin: 1.8rem 0 0;
  max-width: var(--measure);
}
.slab > :first-child { margin-top: 0; }
.slab > :last-child { margin-bottom: 0; }

.steps { counter-reset: step; list-style: none; padding: 0; max-width: var(--measure); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0 0.9rem;
  margin: 1.5rem 0;
}
.steps li::before {
  content: counter(step);
  font-family: var(--grot);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ink-2);
  border-top: 2px solid var(--mark-line);
  padding-top: 0.45rem;
}

/* --- appel à l'action --------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: center; margin-top: 2rem; }

.btn {
  font-family: var(--grot);
  font-weight: 500;
  font-size: 0.9375rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.72rem 1.25rem;
  background-image: none;
  border: 1px solid var(--ink);
}
.btn:hover { background: transparent; color: var(--ink); background-image: none; }

/* --- le bloc de téléchargement -----------------------------------------
   Deux emplacements au gabarit officiel des badges : 3:1, hauteur 3.125rem
   (50 px), soit au-dessus du minimum de 40 px imposé par Apple et Google.
   Remplacer un emplacement par le vrai badge ne doit toucher qu'UNE ligne :
   voir le commentaire dans le HTML de l'accueil.

   Ce ne sont ni des liens ni des boutons : rien ne se passe si on clique,
   donc rien ne doit ressembler à un contrôle. Ce sont deux fiches. */

.stores {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  max-width: none;
}
.stores li { margin: 0; }

.store {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 9.375rem;      /* 150 px */
  height: 3.125rem;     /*  50 px — rapport 3:1, celui des badges officiels */
  padding: 0 0.85rem;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  font-family: var(--grot);
  line-height: 1.2;
}
.store .name { font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.store .when {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.15rem;
}
.store .when b { font-weight: 500; color: var(--ink); box-shadow: inset 0 -0.5em var(--mark); padding: 0 0.2em; }

.stores-note { font-family: var(--grot); font-size: 0.8125rem; color: var(--ink-2); margin-top: 1.1rem; }

/* --- marqueurs à compléter ---------------------------------------------- */

.todo {
  font-family: var(--grot);
  font-size: 0.875rem;
  background: var(--mark);
  color: var(--ink);
  padding: 0.05em 0.4em;
  white-space: nowrap;
}

/* --- pied de page ------------------------------------------------------
   Bloc unique, identique sur les dix-sept pages. Il est régénéré par script
   (tools/build.py) : ne pas l'éditer page par page, ou les variantes
   divergeront dès la deuxième modification. */

.sitefoot {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding: 1.8rem 0 3rem;
  font-family: var(--grot);
  font-size: 0.875rem;
  color: var(--ink-2);
  display: grid;
  gap: 1.6rem 3rem;
}

@media (min-width: 52rem) {
  .sitefoot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.sitefoot h2 {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.6rem;
  font-family: var(--grot);
  letter-spacing: 0.12em;
}

.sitefoot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; }
.sitefoot .contact { display: grid; gap: 0.45rem; justify-items: start; }
@media (min-width: 52rem) { .sitefoot .contact { justify-items: end; text-align: right; } }

.sitefoot .lang { display: flex; gap: 0.6rem; align-items: baseline; }
.sitefoot .lang [aria-current] { color: var(--ink); text-decoration: none; background: none; }

.sitefoot .copy { margin: 0; max-width: none; }

/* --- prose juridique ---------------------------------------------------- */

.legal h2 { margin-top: 2.8rem; }
.legal h2:first-of-type { margin-top: 1.6rem; }
.legal .updated { font-family: var(--grot); font-size: 0.875rem; color: var(--ink-2); }
.legal table { border-collapse: collapse; margin: 1.2rem 0; font-size: 0.9375rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.5rem 1.1rem 0.5rem 0; border-bottom: 1px solid var(--rule); }
.legal th { font-family: var(--grot); font-weight: 500; }