/* Sillon identity · foundation for the website (owner-approved 11 October 2026).
   Values from design/identity/2026-10-11/tokens.css and the reference fragments (IDENTITY.md wins).
   Load this file before every other stylesheet. Fonts are self-hosted OFL files (licences in assets/ofl-*.txt). */
@font-face{font-family:"Bricolage Grotesque";src:url("assets/bricolage-grotesque.ttf") format("truetype");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("assets/bodoni-moda.ttf") format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("assets/bodoni-moda-italic.ttf") format("truetype");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("assets/atkinson-hyperlegible-next.ttf") format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("assets/atkinson-hyperlegible-next-italic.ttf") format("truetype");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url("assets/atkinson-hyperlegible-mono.ttf") format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/instrument-sans.ttf") format("truetype");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("assets/instrument-sans-italic.ttf") format("truetype");font-weight:400 700;font-stretch:75% 100%;font-style:italic;font-display:swap}

:root{
  /* Surfaces & text */
  --sillon-encre:#0E1A3B;        /* text, sourced lines (à l'encre), plaques */
  --sillon-encre-2:#1C2A52;      /* raised ink surfaces */
  --sillon-papier:#F1F4F8;       /* page ground, cold, never cream */
  --sillon-quadrillage:#CFD9EA;  /* faint grid on the paper */
  --sillon-feuille:#FCFDFE;      /* cards */
  --sillon-graphite:#5C6680;     /* au crayon: hypotheses, captions, secondary text */
  /* Roles: never decoration */
  --sillon-rouge:#E3242F;        /* toi, tu es ici, J'aime, and important warnings (owner, 11 October 2026) */
  --sillon-rouge-texte:#B3121C;  /* red text on light grounds (important warnings), 6:1 contrast */
  --sillon-bleu:#2447E5;         /* only: sources, dates, links */
  /* Family lines: one colour per line, never a large flat fill */
  --ligne-sante:#12A68C; --ligne-batiment:#F2A516; --ligne-numerique:#7A5CFA; --ligne-arts:#FF6B8B; --ligne-education:#2447E5;
  --ligne-correspondance:#7A5CFA; /* violet dotted curve: reorientation, without shame */
  /* Derived neutrals (alphas of encre and feuille only) */
  --sillon-filet:rgba(14,26,59,.12);     /* hairline borders */
  --sillon-filet-fort:rgba(14,26,59,.22);
  --sillon-voile:rgba(14,26,59,.05);     /* hover wash */
  --sillon-ombre:0 14px 28px -16px rgba(14,26,59,.45);
  --sillon-ombre-douce:0 8px 22px -14px rgba(14,26,59,.35);
  /* Type: students (A′) */
  --eleve-titre:"Bricolage Grotesque","Avenir Next Condensed","Helvetica Neue",Arial,sans-serif;
  --eleve-accent:"Bodoni Moda","Bodoni 72",Didot,"Times New Roman",serif;
  --eleve-texte:"Atkinson Hyperlegible Next",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --eleve-data:"Atkinson Hyperlegible Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Type: parents (C′) */
  --parent-titre:"Bodoni Moda","Bodoni 72",Didot,"Times New Roman",serif;
  --parent-texte:"Instrument Sans",-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --parent-label:"Instrument Sans",sans-serif;
  /* Active register, switched by body.parent-mode */
  --f-titre:var(--eleve-titre); --f-texte:var(--eleve-texte); --f-data:var(--eleve-data); --f-accent:var(--eleve-accent);
  --titre-weight:800; --titre-stretch:86%; --titre-tracking:-.01em;
  --data-size:11px; --data-tracking:.14em; --data-stretch:100%; --data-weight:700;
  /* Motion (C′) */
  --trace-segment:360ms; --station-pop:140ms; --ease-trace:cubic-bezier(.42,0,.22,1);
  /* Shape */
  --radius-card:18px; --radius-tile:14px; --radius-chip:999px; --radius-small:9px;
}
body.parent-mode{
  --f-titre:var(--parent-titre); --f-texte:var(--parent-texte); --f-data:var(--parent-label); --f-accent:var(--parent-titre);
  --titre-weight:500; --titre-stretch:100%; --titre-tracking:0;
  --data-size:12px; --data-tracking:.06em; --data-stretch:75%; --data-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ---------- Base ---------- */
html{color:var(--sillon-encre);background:var(--sillon-papier)}
body{
  font-family:var(--f-texte);font-size:15px;line-height:1.5;color:var(--sillon-encre);
  background-color:var(--sillon-papier);
  background-image:linear-gradient(rgba(36,71,229,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(36,71,229,.055) 1px,transparent 1px);
  background-size:16px 16px;background-position:-1px -1px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,.titre{font-family:var(--f-titre);font-weight:var(--titre-weight);font-stretch:var(--titre-stretch);letter-spacing:var(--titre-tracking);color:var(--sillon-encre)}
/* One accent word per title at most: <em class="it">voie</em>. Parents: italic only for feminine forms and field notes. */
em.it,.it{font-family:var(--f-accent);font-style:italic;font-weight:500;font-stretch:normal;letter-spacing:0}
.data,.eyebrow,.mono{font-family:var(--f-data);font-size:var(--data-size);font-weight:var(--data-weight);font-stretch:var(--data-stretch);letter-spacing:var(--data-tracking);text-transform:uppercase;color:var(--sillon-graphite);line-height:1.4}
.fig{font-family:var(--f-texte);font-size:13px;line-height:1.45;color:var(--sillon-graphite)}
.fig b,.fig .fig-n{font-family:var(--eleve-accent);font-style:italic;font-weight:500;color:var(--sillon-encre)}
/* Links, sources and dates are the only blue things */
a,.lien{color:var(--sillon-bleu);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover,.lien:hover{text-decoration-thickness:2px}
.source,.date-source{color:var(--sillon-bleu)}
time,.date{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--sillon-encre);outline-offset:3px;box-shadow:0 0 0 6px var(--sillon-feuille)}
::selection{background:rgba(14,26,59,.16)}

/* ---------- Surfaces ---------- */
.feuille{background:var(--sillon-feuille);border:1px solid var(--sillon-filet);border-radius:var(--radius-card);box-shadow:var(--sillon-ombre-douce)}
/* Navy enamel plaque for emphasis (logo, Hira speech, key notes) */
.plaque{position:relative;background:var(--sillon-encre);color:var(--sillon-feuille);border-radius:var(--radius-tile);box-shadow:var(--sillon-ombre)}
.plaque::after{content:"";position:absolute;inset:5px;border:1.5px solid rgba(252,253,254,.78);border-radius:10px;pointer-events:none}
.plaque h1,.plaque h2,.plaque h3,.plaque .titre{color:var(--sillon-feuille)}
.plaque .data,.plaque .eyebrow{color:rgba(252,253,254,.72)}
/* Important warnings (owner, 11 October 2026): a red plaque with white text, or a light notice with a red bar and red title. */
.plaque.important{background:var(--sillon-rouge)}
.plaque.important,.plaque.important p,.plaque.important strong,.plaque.important .session-year,.plaque.important .session-year strong,.plaque.important .data,.plaque.important .eyebrow{color:#fff}
.plaque.important::after{border-color:rgba(255,255,255,.85)}
.notice.important{border-color:var(--sillon-rouge);border-left:4px solid var(--sillon-rouge)}
.notice.important strong{color:var(--sillon-rouge-texte)}

/* ---------- Brand ---------- */
.sillon-logo{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 10px 11px;border-radius:12px;background:var(--sillon-encre);color:var(--sillon-feuille);position:relative;text-decoration:none;box-shadow:var(--sillon-ombre)}
.sillon-logo::after{content:"";position:absolute;inset:4px;border:1.3px solid rgba(252,253,254,.78);border-radius:9px;pointer-events:none}
.sillon-logo b{font-family:var(--eleve-titre);font-weight:800;font-stretch:84%;font-size:26px;line-height:1;letter-spacing:-.01em}
.sillon-logo .ring-toi{width:17px;height:17px;border-width:4.5px}

/* ---------- Stations & rings (the trait grammar) ---------- */
/* Tu es ici: red ring on a white station */
.ring-toi{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--sillon-feuille);border:4px solid var(--sillon-rouge);flex:none;vertical-align:middle}
/* A station on a sourced line */
.station{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--sillon-feuille);border:2.4px solid var(--sillon-encre);flex:none;vertical-align:middle}
/* Double ring = exit to employment */
.station-sortie{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--sillon-feuille);border:1.3px solid var(--sillon-encre);box-shadow:inset 0 0 0 2.5px var(--sillon-feuille),inset 0 0 0 4.6px var(--sillon-encre);flex:none;vertical-align:middle}
/* Possible station (au crayon): dashed graphite, never animated */
.station-possible{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--sillon-papier);border:1.6px dashed var(--sillon-graphite);flex:none;vertical-align:middle}
/* Correspondance capsule */
.correspondance{display:inline-block;width:10px;height:18px;border-radius:5px;background:var(--sillon-feuille);border:2.2px solid var(--sillon-encre);vertical-align:middle}
/* Line segments: à l'encre (solid, sourced and dated) / au crayon (dotted, possible) */
.trait{display:inline-block;height:5px;min-width:18px;border-radius:3px;background:var(--trait-couleur,var(--sillon-encre));vertical-align:middle}
.trait-crayon{display:inline-block;height:3px;min-width:18px;vertical-align:middle;
  background-image:radial-gradient(circle,var(--trait-couleur,var(--sillon-graphite)) 1.3px,transparent 1.5px);background-size:8px 3px;background-repeat:repeat-x;background-position:0 50%}
/* Line pastille: S·B·N·A·E badge in the family colour */
.pastille{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--trait-couleur,var(--sillon-graphite));color:#fff;font-family:var(--eleve-data);font-size:10px;font-weight:700;line-height:1;flex:none;letter-spacing:0;text-transform:uppercase}
.ligne-S{--trait-couleur:var(--ligne-sante)} .ligne-B{--trait-couleur:var(--ligne-batiment)} .ligne-N{--trait-couleur:var(--ligne-numerique)}
.ligne-A{--trait-couleur:var(--ligne-arts)} .ligne-E{--trait-couleur:var(--ligne-education)}
/* Mini parcours line: « Parcours ○ Bac ── ○ IFSI ── ◎ Diplôme d'État » (only from published steps) */
.mini-ligne{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--f-texte);font-size:12px;color:var(--sillon-encre)}
.mini-ligne .trait{width:22px;height:3px;min-width:0}
.mini-ligne .trait-crayon{width:22px;min-width:0}
.mini-ligne .station,.mini-ligne .station-possible{width:11px;height:11px;border-width:2px}
.mini-ligne .station-sortie{width:13px;height:13px}

/* ---------- Controls ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--sillon-filet-fort);background:var(--sillon-feuille);color:var(--sillon-encre);border-radius:var(--radius-chip);padding:6px 11px;font-family:var(--f-texte);font-size:12px;font-weight:700;white-space:nowrap}
.chip.active,.chip[aria-pressed=true]{background:var(--sillon-encre);border-color:var(--sillon-encre);color:var(--sillon-feuille)}
.chip-ligne{border-color:transparent;background:var(--trait-couleur);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border-radius:var(--radius-chip);font-family:var(--f-texte);font-size:14px;font-weight:700;text-decoration:none;border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--sillon-encre);color:var(--sillon-feuille)}
.btn-primary:hover{background:var(--sillon-encre-2)}
.btn-secondary{background:var(--sillon-feuille);color:var(--sillon-encre);border-color:var(--sillon-filet-fort)}
.btn-secondary:hover{border-color:var(--sillon-encre)}
/* J'aime / toi: the only red controls */
.btn-toi{background:var(--sillon-rouge);color:#fff}
.jaime[aria-pressed=true],.save-button[aria-pressed=true]{color:var(--sillon-rouge)}
.jaime[aria-pressed=true] svg,.save-button[aria-pressed=true] svg{fill:var(--sillon-rouge);stroke:var(--sillon-rouge)}
.stamp{display:inline-flex;align-items:center;gap:6px;border:1.5px solid currentColor;border-radius:6px;padding:3px 7px;font-family:var(--f-data);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Motion: the line inks itself (C′) ---------- */
@keyframes sillon-trace{from{stroke-dashoffset:var(--trace-len,1000)}to{stroke-dashoffset:0}}
@keyframes sillon-station{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes sillon-arrivee{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.trace-ink{stroke-dasharray:var(--trace-len,1000);stroke-dashoffset:var(--trace-len,1000);animation:sillon-trace var(--trace-segment) var(--ease-trace) forwards;animation-delay:var(--trace-delay,0ms)}
.station-pop{transform-box:fill-box;transform-origin:center;animation:sillon-station var(--station-pop) ease-out both;animation-delay:var(--trace-delay,0ms)}
@media (prefers-reduced-motion:reduce){
  .trace-ink{animation:none;stroke-dashoffset:0}
  .station-pop{animation:none}
  .hira-vol{display:none}
  *{scroll-behavior:auto!important}
}