/* Le socle commun : thèmes, base, boutons, champs, cartes — calqué sur wiki-md (css/engine/base.css), sobre ; seule feuille ouverte sans connexion. */

*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,p,ul,ol,li,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}

@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/mono.woff2") format("woff2");
  font-weight:700; font-display:swap;
}

/* Les thèmes : quatre surfaces distinctes — page, carte, --sunken (sous-niveau, repli ouvert), --card-2 (bandeau) — clair : page presque blanche, niveaux par la teinte de l'accent ; --border-strong ≥ 3:1 et textes AA sur chacune (« vraiment le contraste ça va pas », 15 octobre 2026). */
:root{
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px rgb(20 30 45 / .08), 0 4px 14px rgb(20 30 45 / .08);
  --glow:transparent;
  --gap:clamp(20px,5.5vw,34px);
  --border-l:max(var(--gap), env(safe-area-inset-left));
  --border-r:max(var(--gap), env(safe-area-inset-right));
  --topbar:calc(3.5rem + env(safe-area-inset-top));
  --rail:18.5rem;
  --column:44rem;
  --column-doc:38rem;
  --round:12px;
  --round-l:12px;
}
/* Jour — clair, bleu (wiki-md) */
:root,[data-theme=jour]{
  color-scheme:light;
  --bg:#f1f6fe; --bg-2:#ffffff; --card:#ffffff; --card-2:#d4e4fe; --sunken:#e9f1ff; --control:#dce9fe; --control-in:#ffffff;
  --border:#abb6c9; --border-strong:#5f718e;
  --text:#14202e; --muted:#3c4d5f; --accent:#1160e0; --accent-txt:#0c4fbc; --water:#0b7f92; --water-txt:#0c4fbc; --red:#c02626;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Brume — clair, gris froid */
[data-theme=brume]{
  --bg:#f0f6fe; --bg-2:#ffffff; --card:#ffffff; --card-2:#d2e6ff; --sunken:#e8f2ff; --control:#d9eaff; --control-in:#ffffff;
  --border:#b0b4bb; --border-strong:#6d7176;
  --text:#16191d; --muted:#454b53; --accent:#3f5a7a; --accent-txt:#344b66; --water:#0b6f7c; --water-txt:#344b66; --red:#b42318;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Sépia — papier */
[data-theme=sepia]{
  --bg:#f4eae1; --bg-2:#f9f5ec; --card:#f9f5ec; --card-2:#f2d5b8; --sunken:#f6e5d3; --control:#faddc0; --control-in:#f9f5ec;
  --border:#aea490; --border-strong:#736b5c;
  --text:#26211a; --muted:#4f463a; --accent:#8a5a1f; --accent-txt:#6d4614; --water:#2d6a6a; --water-txt:#6d4614; --red:#a3382c;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Menthe — clair, vert */
[data-theme=menthe]{
  --bg:#e8f3eb; --bg-2:#fbf9f3; --card:#fbf9f3; --card-2:#c8eacf; --sunken:#dff3e3; --control:#cff0d6; --control-in:#fbf9f3;
  --border:#b3ad98; --border-strong:#6f6e5f;
  --text:#20261c; --muted:#4a5340; --accent:#2e6a41; --accent-txt:#1f4d2e; --water:#0e6f6a; --water-txt:#1f4d2e; --red:#a63a24;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Lavande — clair, violet */
[data-theme=lavande]{
  --bg:#f6f4ff; --bg-2:#ffffff; --card:#ffffff; --card-2:#e4dffe; --sunken:#f1efff; --control:#e8e4fe; --control-in:#ffffff;
  --border:#b6afc5; --border-strong:#746d81;
  --text:#1d1828; --muted:#4b4360; --accent:#6a3fc0; --accent-txt:#55309c; --water:#0b6f7c; --water-txt:#55309c; --red:#b42318;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Sable — clair, terre cuite */
[data-theme=sable]{
  --bg:#fbf0e8; --bg-2:#fffbf4; --card:#fffbf4; --card-2:#fcd9c2; --sunken:#ffeadc; --control:#ffe0cb; --control-in:#fffbf4;
  --border:#bbac95; --border-strong:#7a6d5c;
  --text:#2b2318; --muted:#584a38; --accent:#a2591b; --accent-txt:#82440f; --water:#1f6f6a; --water-txt:#82440f; --red:#b23a26;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Pêche — clair, framboise */
[data-theme=peche]{
  --bg:#fceef1; --bg-2:#fffafb; --card:#fffafb; --card-2:#ffd4de; --sunken:#fee7ed; --control:#ffdae3; --control-in:#fffafb;
  --border:#c3aab3; --border-strong:#7e6972;
  --text:#2a1a21; --muted:#57404a; --accent:#b3245f; --accent-txt:#8f1a4b; --water:#1d6b76; --water-txt:#8f1a4b; --red:#b3262f;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Ciel — clair, bleu ciel */
[data-theme=ciel]{
  --bg:#f0f6fe; --bg-2:#ffffff; --card:#ffffff; --card-2:#d1e6fe; --sunken:#e8f2ff; --control:#d8eaff; --control-in:#ffffff;
  --border:#a6b7ca; --border-strong:#637383;
  --text:#0f1b29; --muted:#3a4c60; --accent:#0b66b8; --accent-txt:#08539a; --water:#0b7f92; --water-txt:#08539a; --red:#b42318;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Contraste — noir sur blanc */
[data-theme=contraste]{
  --bg:#f1f6fe; --bg-2:#ffffff; --card:#ffffff; --card-2:#d6e4fe; --sunken:#eaf1ff; --control:#dde9ff; --control-in:#ffffff;
  --border:#767676; --border-strong:#616161;
  --text:#000000; --muted:#2e2e2e; --accent:#0040c0; --accent-txt:#0036a3; --water:#005145; --water-txt:#0036a3; --red:#9e1008;
  --shadow-high:0 8px 24px rgb(20 30 45 / .14);
}
/* Encre — sombre, bleu */
[data-theme=encre]{
  --bg:#0c0e12; --bg-2:#1f2937; --card:#1f2937; --card-2:#2e4774; --sunken:#27374f; --control:#27374f; --control-in:#1f2937;
  --border:#485663; --border-strong:#8b959f;
  --text:#eef4fa; --muted:#b8c8d8; --accent:#4c8dff; --accent-txt:#89b7ff; --water:#35dcf0; --water-txt:#89b7ff; --red:#ff6b6b;
  --shadow-high:0 8px 24px rgb(0 0 0 / .45); --shadow:0 1px 3px rgb(0 0 0 / .4);
}
/* Nuit — sombre, violet */
[data-theme=nuit]{
  --bg:#06070d; --bg-2:#1d212e; --card:#1d212e; --card-2:#3f3c6b; --sunken:#302d49; --control:#302d49; --control-in:#1d212e;
  --border:#3f4557; --border-strong:#8a8d9a;
  --text:#e6e8f2; --muted:#a8adc4; --accent:#8b7dff; --accent-txt:#aea2ff; --water:#48d5c8; --water-txt:#aea2ff; --red:#fb7185;
  --shadow-high:0 8px 24px rgb(0 0 0 / .45); --shadow:0 1px 3px rgb(0 0 0 / .4);
}
/* Braise — sombre, cuivre */
[data-theme=braise]{
  --bg:#110c09; --bg-2:#2e211a; --card:#2e211a; --card-2:#5f3b25; --sunken:#482c1b; --control:#482c1b; --control-in:#2e211a;
  --border:#5f4b3e; --border-strong:#9b8c82;
  --text:#f7ece4; --muted:#d6bfae; --accent:#ff9a4d; --accent-txt:#ffb97f; --water:#5fd0c0; --water-txt:#ffb97f; --red:#ff6b5a;
  --shadow-high:0 8px 24px rgb(0 0 0 / .45); --shadow:0 1px 3px rgb(0 0 0 / .4);
}
/* Forêt — sombre, vert */
[data-theme=foret]{
  --bg:#090e0b; --bg-2:#1d2921; --card:#1d2921; --card-2:#274d32; --sunken:#1f3a25; --control:#1f3a25; --control-in:#1d2921;
  --border:#45594c; --border-strong:#86958b;
  --text:#e9f2ea; --muted:#b3c8b8; --accent:#5fbf7a; --accent-txt:#8ede9c; --water:#48d5b8; --water-txt:#8ede9c; --red:#f08585;
  --shadow-high:0 8px 24px rgb(0 0 0 / .45); --shadow:0 1px 3px rgb(0 0 0 / .4);
}
/* Prune — sombre, lilas */
[data-theme=prune]{
  --bg:#110d14; --bg-2:#2a2136; --card:#2a2136; --card-2:#513b69; --sunken:#3b2e4a; --control:#3b2e4a; --control-in:#2a2136;
  --border:#554966; --border-strong:#958ca1;
  --text:#f1eaf8; --muted:#c7b8d8; --accent:#c38bff; --accent-txt:#dab6ff; --water:#7ee0e0; --water-txt:#dab6ff; --red:#ff7a9a;
  --shadow-high:0 8px 24px rgb(0 0 0 / .45); --shadow:0 1px 3px rgb(0 0 0 / .4);
}
/* Océan — sombre, cyan */
[data-theme=ocean]{
  --bg:#091213; --bg-2:#143341; --card:#143341; --card-2:#31535d; --sunken:#1e424c; --control:#1e424c; --control-in:#143341;
  --border:#3c6473; --border-strong:#85a0aa;
  --text:#e8f5f8; --muted:#a8c9d4; --accent:#2fb5d9; --accent-txt:#6fd6f0; --water:#4ae0c8; --water-txt:#6fd6f0; --red:#ff8a8a;
  --shadow-high:0 8px 24px rgb(0 0 0 / .45); --shadow:0 1px 3px rgb(0 0 0 / .4);
}
/* Ardoise — sombre, gris */
[data-theme=ardoise]{
  --bg:#0d0f14; --bg-2:#24282d; --card:#24282d; --card-2:#2f4673; --sunken:#27364f; --control:#27364f; --control-in:#24282d;
  --border:#4e5259; --border-strong:#909398;
  --text:#eceef0; --muted:#b4bac2; --accent:#8fa8d8; --accent-txt:#b0c3e8; --water:#4fd0bf; --water-txt:#b0c3e8; --red:#ff7b6b;
  --shadow-high:0 8px 24px rgb(0 0 0 / .45); --shadow:0 1px 3px rgb(0 0 0 / .4);
}
/* Cacao — sombre, caramel */
[data-theme=cacao]{
  --bg:#120d0a; --bg-2:#2f241e; --card:#2f241e; --card-2:#5c3f26; --sunken:#472f19; --control:#472f19; --control-in:#2f241e;
  --border:#5e4f46; --border-strong:#9b9088;
  --text:#f5ece4; --muted:#cdb9aa; --accent:#e0a46c; --accent-txt:#f0c49a; --water:#58d6be; --water-txt:#f0c49a; --red:#ff8272;
  --shadow-high:0 8px 24px rgb(0 0 0 / .45); --shadow:0 1px 3px rgb(0 0 0 / .4);
}

/* Les thèmes sombres déclarent leur schéma (liste ouverte d'un select, cases, barres natives) et gardent leurs mélanges d'accent ; le clair les prend plus pâles (« tout est trop foncé », 15 octobre 2026). */
[data-theme=encre],[data-theme=nuit],[data-theme=braise],[data-theme=foret],[data-theme=prune],[data-theme=ocean],[data-theme=ardoise],[data-theme=cacao]{color-scheme:dark; --well-mix:10%; --tile-mix:24%; --head-mix:36%; --pick-mix:22%}

/* Base */

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

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.emoji{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:1.15em; line-height:1; font-style:normal;
}

.column{width:100%; max-width:calc(var(--column) + var(--border-l) + var(--border-r)); margin-inline:auto}

/* 1.15 au moins : É monte à +0,877 em et Ç descend à −0,198, deux lignes de capitales se touchent en dessous. */
.display{font-weight:700; letter-spacing:-.01em; line-height:1.2}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:700; font-variant-numeric:tabular-nums}

.invisible{
  position:absolute!important; width:1px!important; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

a{color:var(--accent-txt); text-underline-offset:3px}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
[tabindex="-1"]:focus{outline:none}

[hidden]{display:none!important}

/* L'icône de partage (les trois points en « < ») : SVG en ligne, couleur du texte. */
.share-icon{width:1.1em; height:1.1em; flex:none; vertical-align:-.15em; fill:currentColor; stroke:currentColor; stroke-width:2; stroke-linecap:round}

/* Boutons et champs — le .btn de wiki-md : fond --bg3, filet --line, aucune ombre. */

button{
  font-family:inherit; cursor:pointer;
  background:var(--control); color:var(--text);
  border:1px solid var(--border-strong); border-radius:9px;
  padding:.8rem 1rem;
  transition:border-color .15s;
}
@media (hover:hover){
  button:hover{border-color:var(--accent)}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; min-height:3rem;
  font-size:.9375rem; font-weight:600; line-height:1.3; text-align:center; text-decoration:none;
  background:var(--control); color:var(--text);
  border:1px solid var(--border-strong); border-radius:9px;
  padding:.6rem 1rem;
}
@media (hover:hover){ .btn:hover{border-color:var(--accent)} }
/* Le texte du bouton principal est le papier des cartes : sombre sur un accent clair, clair sur un accent sombre. */
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--bg-2); font-weight:700}
@media (hover:hover){ .btn-primary:hover{filter:brightness(1.08)} }
.btn-ghost{background:transparent; color:var(--muted)}
.btn-danger{border-color:var(--red); color:var(--red)}
.btn-danger:disabled{opacity:.5; cursor:not-allowed}
.btn-row{display:flex; gap:.6rem; flex-wrap:wrap}
.btn-row .btn{white-space:nowrap}
/* Une rangée remplit sa carte à parts égales (« sinon c'est pas trop aligné », 9 octobre 2026). */
:is(.btn-row, .rec-tabs, .tones, .bag-tools) > :is(button, .btn, a){flex:1 1 0; width:auto; white-space:nowrap}
.btn-row + .btn-row, .btn-row + #recOthers, .rec-home + .rec-home{margin-top:.6rem}

/* LE RETOUR, un seul composant partout, collé sous la barre de tête : chevron dessiné et libellé de la destination. */
.back{
  position:sticky; top:calc(var(--topbar) + .5rem); z-index:30;
  display:inline-flex; align-items:center; gap:.6rem; width:auto; min-height:3rem; margin:0 0 .75rem; padding:.5rem 1rem .5rem .95rem;
  font-size:.9375rem; font-weight:600; line-height:1.2; color:var(--text); text-decoration:none;
  background:var(--control); border:1px solid var(--border-strong); border-radius:9px;
}
.back::before{content:''; flex:none; width:.65rem; height:.65rem; margin-left:.15rem; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg)}
@media (hover:hover){ .back:hover{border-color:var(--accent)} }
html.back-up .back{display:none}

.field,input[type=text],input[type=date],input[type=time],input[type=number],input[type=month],input[type=url],textarea,select{
  width:100%; padding:.7rem .8rem;
  background-color:var(--control); color:var(--text);
  border:1px solid var(--border-strong); border-radius:8px;
  font-size:1rem;
}
/* Le select se reconnaît d'un coup d'œil (« on ne voit pas facilement quand c'est des select », 15 octobre 2026) : chevron en couleur du texte (≥ 4,5:1) et filet, couches calées sur UNE position (menu.css la réécrit). Un fond posé ailleurs passe par background-color. */
select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.2rem;
  background-image:
    linear-gradient(45deg, transparent calc(33.33% - 1.1px), currentColor 0 calc(33.33% + 1.1px), transparent 0),
    linear-gradient(135deg, transparent calc(66.67% - 1.1px), currentColor 0 calc(66.67% + 1.1px), transparent 0),
    linear-gradient(to right, var(--border-strong) 1px, transparent 0);
  background-repeat:no-repeat; background-position:calc(100% - .7rem) 50%;
  background-size:.75rem .375rem, .75rem .375rem, 1.05rem 55%;
}
@media (hover:hover){ select:hover{border-color:var(--accent)} }
select :is(option, optgroup){background-color:var(--card); color:var(--text)}
::placeholder{color:var(--muted); opacity:1}
:is(.field,input,textarea,select):focus-visible{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
textarea{resize:vertical; min-height:6rem; line-height:1.7}
/* Un champ à remplir garde le papier de la carte ; le fond teinté --control reste aux cliquables (UI.md 66). */
:is(input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit],[type=color],[type=file]),textarea){background-color:var(--card)}
input[type=number]{appearance:textfield; -moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}

/* Cartes — fond --card, bord --border-strong (3:1), rayon 12 px, ombre douce : c'est le bord et l'ombre qui les détachent de la page presque blanche. */

.card{
  background:var(--card);
  border:1px solid var(--border-strong);
  border-radius:var(--round);
  box-shadow:var(--shadow);
  padding:1.1rem 1.15rem;
}
/* La recharge d'une carte, dans son titre : 48 px de cible par une marge négative, sans pousser le texte. */
.resume{
  margin-left:auto; margin-block:-.7rem;
  flex:0 0 3rem; height:3rem; padding:0;
  display:grid; place-items:center;
  background:var(--control); border:1px solid var(--border-strong);
  border-radius:9px;
  color:var(--muted); cursor:pointer;
}
.resume svg{width:1.125rem; height:1.125rem; display:block}
@media (hover:hover){ .resume:hover{color:var(--text); border-color:var(--accent)} }
.resume:active{border-color:var(--accent)}
.resume:active svg{transform:rotate(-90deg); transition:transform .2s ease}

.card-title{
  display:flex; align-items:center; gap:.5rem;
  font-size:1rem; font-weight:700;
  color:var(--text); line-height:1.25; margin-bottom:.6rem;
}

.note{
  background:var(--card);
  border:1px solid var(--border-strong); border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;
  padding:.8rem .95rem; margin:0 0 1rem;
  font-size:.875rem; line-height:1.55;
  max-width:var(--column-doc);
}
.note.water{border-left-color:var(--water)}
.note.red{border-left-color:var(--red)}
.note strong{color:var(--text)}
.hint{font-size:.8125rem; color:var(--muted); line-height:1.55; margin-top:.5rem}

/* Plus compact sur téléphone — voir docs/pages.md § style.css */

@media (max-width:879px), (max-width:959px) and (pointer:coarse){
  /* Les bords latéraux à la SOURCE : --gap les porte tous les deux. */
  :root{--gap:clamp(16px,4.4vw,26px)}
  .card{padding:.9rem .95rem}
  .card-title{margin-bottom:.45rem}
  .note{padding:.7rem .85rem; margin-bottom:.8rem}
  .hint{margin-top:.4rem}
}

/* Le lien vidéo (js/core/video.js), au catalogue et sur la fiche de séance : un bouton discret, pas un appel à sortir du site (UI.md 22). */
.exo-video{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1.4rem; padding:.55rem .9rem; min-height:3rem;
  background:var(--control); border:1px solid var(--border-strong);
  border-radius:9px; color:var(--text); text-decoration:none;
  font-size:.875rem; font-weight:600;
}
.exo-video::after{content:"↗"; color:var(--muted); font-weight:400}
.exo-video:hover{border-color:var(--accent)}
.exo-video:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* La photo en grand (js/core/zoom.js) : tout l'écran, sans rogner. */
.fiche-img,.rec-photo{cursor:zoom-in}
.zoom{padding:0; border:0; border-radius:12px; background:transparent; width:calc(100vw - 1rem); height:calc(100dvh - 1rem); max-width:none; max-height:none; cursor:zoom-out; overflow:hidden}
.zoom::backdrop{background:rgb(0 0 0 / .75)}
.zoom img{display:block; width:100%; height:100%; object-fit:contain}
.zoom img.pic-line{background:var(--card); border-radius:12px}
.zoom-close{position:absolute; top:.4rem; right:.4rem; min-width:3rem; min-height:3rem; border:1px solid var(--border-strong); border-radius:9px; background:var(--card); color:var(--text); font-size:1.1rem}

/* Les boîtes de dialogue (js/app/account/erase.js) : une carte au centre, titre et ✕ sur une ligne. */
.sheet{width:min(30rem, calc(100vw - 1rem)); max-height:calc(100dvh - 1rem); padding:1rem 1.1rem 1.1rem; border:1px solid var(--border); border-radius:var(--round); background:var(--card); color:var(--text); box-shadow:var(--shadow-high)}
.sheet::backdrop{background:rgb(0 0 0 / .55)}
.sheet-head{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem; margin-bottom:.4rem}
.sheet-head h2{grid-column:1; margin:0; font-size:1.125rem}
.sheet-close{grid-column:2; width:3rem; min-height:3rem; padding:0}
.sheet-body{display:grid; gap:.5rem}
.sheet-body .hint{margin:0}
.sheet-body .note{margin:0}
.sheet-check{display:flex; align-items:center; gap:.7rem; min-height:3rem; padding:0 .8rem; border:1px solid var(--border-strong); border-radius:9px; background:var(--control); cursor:pointer}
.sheet-check input{width:1.25rem; height:1.25rem; flex:none; margin:0}
.sheet-body input[type=text], .sheet-body select{min-height:3rem}
/* Le bouton qui agit reste en vue quand la liste défile, à 390 px. */
.sheet-body > .btn-danger:last-child{position:sticky; bottom:0; background:var(--card); box-shadow:0 0 0 .5rem var(--card), 0 1.2rem 0 .5rem var(--card)}
.erase-row{margin-top:.8rem}
.mod-me{display:grid; gap:.6rem; flex-basis:100%}