/* Direction « Carnet d'étude » (choisie le 2026-10-26). Référence : Notion (rayons 8/12, géométrie sobre).
   Palette n° 2 « idea » de references/palettes-3-couleurs.md : oat 60 % / bleu 30 % / rose 10 %. */
@font-face { font-family: 'DM Sans'; src: url(fonts/dm-sans-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/dm-sans-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/dm-sans-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --oat: #EBECDC; --blue: #264D92; --rose: #CC287F;
  --bg: var(--oat);
  --ink: var(--blue);
  --soft: color-mix(in srgb, var(--blue) 88%, var(--oat));
  --line: color-mix(in srgb, var(--blue) 18%, var(--oat));
  --card: color-mix(in srgb, var(--oat) 55%, #fff);
  --tint: color-mix(in srgb, var(--blue) 9%, var(--oat));
  --accent: var(--rose);
  --accent-text: #A32066; /* rose assombri : 5,9:1 sur oat, pour le texte ; le rose pur reste pour les aplats */
  --on-accent: #fff;
  /* L'échiquier garde les mêmes couleurs dans les deux thèmes : flèches et cases se lisent pareil. */
  --sq-l: color-mix(in srgb, var(--blue) 6%, var(--oat));
  --sq-d: color-mix(in srgb, var(--blue) 34%, var(--oat));
  --last: color-mix(in srgb, var(--rose) 24%, transparent);
  --plan: var(--blue); --menace: var(--rose); --arrow-edge: var(--oat);
  --radius: 8px; --radius-lg: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'DM Sans', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1B33;
    --ink: var(--oat);
    --soft: color-mix(in srgb, var(--oat) 74%, #0F1B33);
    --line: color-mix(in srgb, var(--oat) 16%, #0F1B33);
    --card: #16264A;
    --tint: color-mix(in srgb, var(--oat) 9%, #0F1B33);
    --accent: #EE6AAE;
    --accent-text: #EE6AAE;
    --on-accent: #0F1B33;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* Pas de zoom quand on tape vite plusieurs fois (iOS) ; le pinch-zoom reste possible. */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--font); overflow-x: hidden; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
ol, ul { list-style: none; padding: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 50; border-radius: var(--radius); }
.skip:focus { left: 16px; }
.scroll-x { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { flex: none; white-space: nowrap; }

/* En-tête */
.top { display: flex; align-items: center; gap: 24px; padding: 12px 32px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 1.0625rem; white-space: nowrap; text-decoration: none; }
.brand span { color: var(--accent-text); }
.tabs { min-width: 0; flex: 1; }
.tabs-inner { mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent); }
.tabs-inner { position: relative; padding: 2px; }
.tab { position: relative; z-index: 1; padding: 8px 12px; border-radius: var(--radius); color: var(--soft); font-weight: 500; font-size: .9375rem; min-height: 40px; transition: color .3s var(--ease); }
.tab[aria-selected="true"] { color: var(--bg); }
.tab-ink { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--radius); background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease); }

/* Panneau */
.panel, .foot { width: min(1180px, 100% - 64px); margin-inline: auto; }
.panel { padding: 28px 0 64px; outline: none; }
.panel-head { max-width: 760px; }
h1 { font-size: 2.125rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.side { color: var(--soft); font-size: .9375rem; margin-top: 4px; }
.lede { color: var(--soft); margin-top: 28px; max-width: 62ch; }
h2 { font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }

.r { opacity: 0; transform: translateY(14px); filter: blur(5px); }
/* Après l'apparition, plus aucun transform ni filtre : sinon la barre fixe et l'échiquier collant se calent sur le parent. */
.in .r { opacity: 1; transform: none; filter: none; animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* Lignes */
.lines { margin: 22px 0 20px; }
.line { padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .9375rem; font-weight: 500; min-height: 44px; transition: border-color .2s, background .2s, transform .1s; }
.line[aria-pressed="true"] { border-color: var(--ink); background: var(--tint); }
.line > span, .line > small { display: block; text-align: left; }
.line > small { font-size: .75rem; font-weight: 500; color: var(--soft); margin-top: 1px; }
.line.main { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); }

/* Étude */
.study { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 32px; align-items: start; }
.board-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 24px 40px -28px color-mix(in srgb, var(--blue) 60%, transparent); }
.board { position: relative; aspect-ratio: 1; width: 100%; background: repeating-conic-gradient(var(--sq-d) 0 25%, var(--sq-l) 0 50%) 0 0 / 25% 25%; touch-action: pan-y; cursor: grab; }
.hl, .pc { position: absolute; width: 12.5%; height: 12.5%; left: 0; top: 0; }
.hl { background: var(--last); transition: transform .35s var(--ease), opacity .3s; }
.pc { background: center / 100% no-repeat; transition: transform .38s var(--ease), opacity .25s; will-change: transform; }
.pc.gone { opacity: 0; }
.no-anim .pc, .no-anim .hl { transition: none; }
.coord { position: absolute; font: 700 clamp(.55rem, 1.6vw, .75rem)/1 var(--font); pointer-events: none; user-select: none; }
.coord.rank { left: 3px; padding-top: 3px; }
.coord.file { bottom: 3px; width: 12.5%; text-align: right; padding-right: 4px; }
.coord.on-light { color: var(--blue); }
.coord.on-dark { color: color-mix(in srgb, var(--blue) 75%, #000); }
.draw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mark { fill: none; stroke-width: .07; }
.mark.plan { stroke: var(--plan); }
.mark.menace { stroke: var(--menace); }
.arrow-bg { stroke: var(--arrow-edge); stroke-width: .27; stroke-linecap: round; opacity: .85; }
.arrow { stroke-width: .15; stroke-linecap: round; }
.arrow.plan { stroke: var(--plan); }
.arrow.menace { stroke: var(--menace); }
.head.plan { fill: var(--plan); }
.head.menace { fill: var(--menace); }
.progress { height: 3px; margin-top: 10px; border-radius: 3px; overflow: hidden; background: var(--line); }
.progress i { display: block; height: 100%; background: var(--rose); transform-origin: left; transform: scaleX(0); transition: transform .38s var(--ease); }
.legend { display: flex; gap: 18px; font-size: .875rem; color: var(--soft); margin-top: 12px; }
.legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
/* Même liseré oat que sous les flèches de l'échiquier, pour que la légende reste lisible sur fond sombre. */
.legend i { box-shadow: 0 0 0 1.5px var(--arrow-edge); }
.legend i.plan { background: var(--plan); }
.legend i.menace { background: var(--menace); }

.panel-col { display: grid; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.now { min-height: 11.5rem; }
.ply { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.who { font-size: .875rem; font-weight: 500; color: var(--soft); }
.who.us { color: var(--ink); font-weight: 700; }
.note { font-size: 1.3125rem; line-height: 1.5; margin-top: 10px; text-wrap: pretty; }

.ctrls { display: flex; gap: 8px; align-items: center; }
.ctrl { min-width: 48px; height: 48px; border-radius: var(--radius); border: 1px solid var(--line); font-size: 1.125rem; transition: transform .08s, background .2s, opacity .2s; }
.ctrl:active { transform: scale(.95); }
.ctrl.next { flex: 1; background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; font-size: 1rem; }
.ctrl[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.count { font-size: .875rem; color: var(--soft); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }

.sheet .head { margin-bottom: 12px; }
.sheet .title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.source { font-size: .8125rem; color: var(--soft); }
.modes { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; }
.modes button { padding: 6px 12px; border-radius: 6px; font-size: .875rem; font-weight: 500; color: var(--soft); min-height: 36px; }
.modes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
[data-view="read"] .step-only, [data-view="step"] .read-only { display: none; }

.moves { display: flex; flex-wrap: wrap; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.pair { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.n { color: var(--soft); font-size: .875rem; margin-right: 2px; }
.mv { padding: 4px 7px; border-radius: 6px; font-size: 1rem; transition: background .15s; }
.mv.us { font-weight: 700; }
.mv.them { color: var(--soft); }
.mv.shared { font-weight: 400; color: var(--soft); }
/* Le premier coup propre à la variante est souligné : c'est là qu'elle quitte la ligne principale. */
.mv.branch { box-shadow: inset 0 -2px var(--accent); }
.mv[aria-current] { background: var(--accent); color: var(--on-accent); box-shadow: none; }

.read { position: relative; display: grid; gap: 2px; max-height: 480px; overflow: auto; overscroll-behavior: contain; margin: 0 -8px; }
.entry { display: grid; grid-template-columns: 84px 1fr; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius); user-select: text; -webkit-user-select: text; transition: background .15s; }
.entry b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry.them { color: var(--soft); }
.entry.trunk { grid-template-columns: 1fr; gap: 2px; color: var(--soft); }
.entry[aria-current] { background: var(--tint); color: var(--ink); box-shadow: inset 3px 0 var(--accent); }
.watch { display: inline-block; margin-top: 14px; font-size: .875rem; color: var(--soft); padding: 6px 0; }
.watch[hidden] { display: none; }

/* À retenir, principes */
.section-title { margin: 64px 0 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; counter-reset: c; }
.rule { counter-increment: c; padding: 20px; }
.rule h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; display: flex; gap: 10px; }
.rule h3::before { content: counter(c, decimal-leading-zero); font-size: .8125rem; line-height: 1.7; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.rule p { margin-top: 8px; color: var(--soft); font-size: .9688rem; }

.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--soft); font-size: .875rem; display: grid; gap: 8px; max-width: 1180px; }

/* Survols seulement avec une vraie souris : sur téléphone ils resteraient collés après un tap. */
@media (hover: hover) {
  a:hover { color: var(--accent-text); }
  .tab:hover { color: var(--ink); }
  .line:hover { border-color: var(--soft); }
  .ctrl:hover { background: var(--tint); }
  .ctrl.next:hover { background: color-mix(in srgb, var(--ink) 88%, var(--bg)); }
  .mv:not([aria-current]):hover { background: var(--tint); }
  .entry:not([aria-current]):hover { background: var(--tint); }
}

/* Effet de montage entre onglets */
.wipe { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* Téléphone : en-tête réduit, échiquier collé en haut, note dessous, boutons sous le pouce. */
@media (max-width: 760px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .top { padding: 8px 16px; gap: 12px; }
  .brand { font-size: .9375rem; }
  .tab { padding: 7px 10px; font-size: .875rem; min-height: 36px; }
  .panel, .foot { width: calc(100% - 32px); }
  .panel { padding: 14px 0 40px; display: flex; flex-direction: column; }
  .panel-head { display: contents; }
  h1 { font-size: 1.5rem; }
  .side { font-size: .875rem; }
  .lede { order: 1; margin-top: 24px; }
  .progress { display: none; }
  .section-title, .cards { order: 2; }
  .section-title { margin-top: 40px; }
  .lines { margin: 10px -16px 12px; padding: 0 16px; scroll-padding-inline: 16px; }
  .study { grid-template-columns: 1fr; gap: 12px; }
  .board-col { display: contents; }
  .board-wrap { position: sticky; top: 0; z-index: 5; border-radius: var(--radius); box-shadow: 0 -8px 0 var(--bg), 0 6px 0 var(--bg); }
  .legend { margin-top: 0; font-size: .8125rem; }
  .panel-col { gap: 12px; }
  .card { padding: 14px 16px; }
  .now { min-height: 0; }
  .ply { font-size: 1.25rem; }
  .note { font-size: 1.125rem; margin-top: 4px; }
  .ctrls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .read { max-height: none; overflow: visible; }
  .entry { grid-template-columns: 72px 1fr; scroll-margin-top: calc(100vw - 16px); scroll-margin-bottom: 96px; }
}

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