/* Mise en page : le bureau de la maîtresse — formulaire à gauche, feuille de cahier Seyès à droite, préparations enregistrées dessous */
:root{
  --bg:#eef2f8; --surface:#ffffff; --paper:#fffffe; --fg:#1b2235; --muted:#5a6479; --line:#d5dceb;
  --ink:#1f3fa0; --pen:#c93a32; --rule:#e2e9f7; --rule-strong:#a9bfe6;
  --ok:#2b7a4b; --ok-bg:#e1f1e7; --warn:#93530a; --warn-bg:#fbefdc; --btn-fg:#ffffff;
  --shadow:rgba(20,30,60,.18);
  --f-hand:"Playwrite FR Trad","Segoe Script","Comic Sans MS",cursive;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1320; --surface:#161d2c; --paper:#192133; --fg:#e5e9f2; --muted:#9ba6bc; --line:#2b354b;
    --ink:#a9bdff; --pen:#ff8077; --rule:#1f2940; --rule-strong:#36486f;
    --ok:#74d3a0; --ok-bg:#163326; --warn:#f2b866; --warn-bg:#3a2a12; --btn-fg:#0e1320;
    --shadow:rgba(0,0,0,.5); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1320; --surface:#161d2c; --paper:#192133; --fg:#e5e9f2; --muted:#9ba6bc; --line:#2b354b;
  --ink:#a9bdff; --pen:#ff8077; --rule:#1f2940; --rule-strong:#36486f;
  --ok:#74d3a0; --ok-bg:#163326; --warn:#f2b866; --warn-bg:#3a2a12; --btn-fg:#0e1320;
  --shadow:rgba(0,0,0,.5); color-scheme:dark;
}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--f-body)}
*{box-sizing:border-box}
[hidden]{display:none!important}
.app{max-width:1360px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}

.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 32px;margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid var(--pen)}
.eyebrow{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
h1.hand{font-family:var(--f-hand);font-weight:300;font-size:clamp(28px,5vw,40px);line-height:1.35;color:var(--ink);margin:0;text-wrap:balance}
.who{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.who-name{font-weight:700;margin-right:4px}
.install-help,.offline{margin:0 0 16px;padding:10px 14px;border-radius:8px;font-size:14px}
.install-help{background:var(--rule);color:var(--fg)}
.offline{background:var(--warn-bg);color:var(--warn);font-weight:700}

.grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:"form work" "saved work";grid-template-rows:auto 1fr;gap:24px;align-items:start}
#f{grid-area:form}#saved{grid-area:saved}.work{grid-area:work;min-width:0}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "work" "saved";grid-template-rows:auto}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}
h2{font-size:17px;margin:0;text-wrap:balance}
form.card,.stack{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
label{font-weight:700;font-size:14px}
input,select,textarea{font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--fg);width:100%;min-width:0}
textarea{resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
small,.muted{color:var(--muted);font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{font:inherit;font-weight:700;font-size:15px;padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--btn-fg)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.small{font-size:13px;padding:6px 10px}
.status{min-height:1.5em;margin:0;font-size:14px;color:var(--muted)}
.status.err{color:var(--pen)}
.quota{margin:0}

/* Connexion */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left,0px))}
.auth-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.auth-card h1.hand{margin-bottom:4px}
.auth-tabs{align-self:flex-start}

.work-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px;overflow-x:auto;max-width:100%}
.tabs button{font:inherit;font-size:14px;font-weight:700;padding:7px 12px;border-radius:7px;border:0;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--btn-fg)}
.work-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--warn-bg);color:var(--warn);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.sample{background:var(--rule);color:var(--ink)}
.hint{font-size:13px;color:var(--muted);margin:0 0 10px}

.sheet-wrap{overflow-x:auto;padding-bottom:4px}
.sheet{background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 26px -18px var(--shadow);padding:32px 24px}
[contenteditable]{border-radius:3px;cursor:text}
[contenteditable]:hover{outline:1px dashed var(--rule-strong);outline-offset:1px}
[contenteditable]:focus{background:var(--rule)}

/* Page du cahier : une seule double page continue — C.I | Thème | Contenu | OPO | Pré-évaluation ‖ Stratégie (Document, Matériels, Discussion) | Évaluation */
[contenteditable]:empty{display:inline-block;min-width:4em}
[contenteditable]:empty::before{content:"…";color:var(--muted)}
.seyes{background-color:var(--paper);background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule-strong) 31px 32px),repeating-linear-gradient(180deg,transparent 0 7px,var(--rule) 7px 8px);background-position:0 0}
.cahier{display:grid;font-family:var(--f-hand);font-weight:300;font-size:14px;line-height:32px;color:var(--ink)}
.cahier.dbl{grid-template-columns:44px 44px minmax(0,1fr) minmax(0,1fr) 44px 18px minmax(0,1.5fr) minmax(0,7.5em) 44px;min-width:820px}
.cahier .bl{border-left:1.5px solid var(--pen)}
.cahier .hd{color:var(--pen);font-size:16px;height:128px;display:flex;align-items:flex-end;justify-content:center;text-align:center;box-shadow:inset 0 -2px 0 var(--pen);min-width:0;overflow:hidden}
.cahier .hd.v{align-items:center;font-size:12px;line-height:1.2}
.cahier .hd.v span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.cahier .hd.st{grid-column:7 / 9}
.cahier .spine{grid-column:6;grid-row:1 / 3;background:linear-gradient(90deg,transparent,var(--line) 50%,transparent)}
.cahier .vcell{display:flex;justify-content:center;align-items:flex-end;padding:16px 0 32px;min-width:0}
.vert{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:16px}
.cahier .main{display:flex;flex-direction:column;padding-top:32px;padding-bottom:32px;min-width:0}
.cahier .main.lp{grid-column:3 / 5}
.cahier .main.rp{grid-column:7 / 9}
.chead{padding:0 10px 32px}
.chead p,.cahier .main>p{margin:0}
.cahier .main.rp>p{padding:0 10px}
.rdate{color:var(--pen);text-align:center;font-size:16px}
.dlabel{color:var(--pen);text-align:center;margin-top:32px!important}
.lab{color:var(--pen);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.pairs{display:flex;flex-direction:column;gap:32px}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pair>div{padding:0 12px;min-width:0}
.pair>div+div{border-left:1.5px solid var(--pen)}
.disc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,7.5em)}
.disc>div{padding:0 10px;min-width:0}
.disc>.dh{text-align:center}

/* Fiche détaillée */
.plain{font-size:15px;line-height:1.55}
.fiche-title{font-family:var(--f-hand);font-weight:300;font-size:24px;line-height:1.4;color:var(--ink);margin:0 0 18px;text-align:center}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin:0 0 20px;padding:12px 14px;border:1px solid var(--line);border-radius:6px}
.meta div{min-width:0}
.meta dt{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.meta dd{margin:0;font-weight:700}
.plain h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pen);margin:22px 0 8px}
.plain p{margin:0}
.plain ol,.plain ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.lead-in{color:var(--muted);margin-bottom:6px!important}
.table-wrap{overflow-x:auto}
table.der{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
table.der th,table.der td{border:1px solid var(--line);padding:8px 10px;vertical-align:top;text-align:left}
table.der th{background:var(--rule);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
table.der td.num,table.der th.num{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
table.der td:first-child{font-weight:700}
table.der tfoot td{font-weight:700}
.board{font-family:var(--f-hand);font-weight:300;font-size:19px;line-height:1.8;color:var(--ink)}

/* Feuille d'exercices */
.worksheet{font-size:16px}
.ws-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-weight:700;margin-bottom:18px}
.ws-title{font-family:var(--f-hand);font-weight:300;font-size:22px;line-height:1.5;color:var(--ink);margin:0 0 20px;text-align:center}
.ex{margin-bottom:22px}
.consigne{font-weight:700;margin:0 0 6px}
.ws-line{font-family:var(--f-hand);font-weight:300;font-size:22px;line-height:48px;min-height:48px;padding-left:10px;color:var(--fg);border-bottom:1.5px solid var(--rule-strong);background-image:repeating-linear-gradient(180deg,transparent 0 11px,var(--rule) 11px 12px)}

.conseil{margin-top:14px;padding:12px 14px;border:1px dashed var(--line);border-radius:8px;background:var(--surface);font-size:15px}
.conseil b{color:var(--pen);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}

.saved-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.saved-list li{display:flex;gap:6px;align-items:stretch}
.saved-open{flex:1;min-width:0;text-align:left;font:inherit;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--fg);cursor:pointer;display:flex;flex-direction:column}
.saved-open:hover{border-color:var(--ink)}
.saved-open.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.saved-open .t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-open .d{font-size:13px;color:var(--muted)}
.del{font:inherit;font-size:13px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;padding:0 10px;cursor:pointer}
.del.confirm{color:var(--pen);border-color:var(--pen)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:700;font-size:14px;max-width:calc(100% - 32px);z-index:20}
@media (prefers-reduced-motion:no-preference){.toast{transition:opacity .2s}}

/* Impression : seules les trois pages préparées sortent, le cahier en A4 paysage */
#print-root{display:none}
@media print{
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
    --bg:#fff; --surface:#fff; --paper:#fff; --fg:#1b2235; --muted:#5a6479; --line:#d5dceb;
    --ink:#1f3fa0; --pen:#c93a32; --rule:#e2e9f7; --rule-strong:#a9bfe6; color-scheme:light;
  }
  body{background:#fff}
  .app,.auth,.toast{display:none!important}
  #print-root{display:block}
  #print-root .page{break-after:page}
  #print-root .page:last-child{break-after:auto}
  #print-root .sheet{box-shadow:none;border:0;padding:0}
  #print-root .cahier,#print-root .cahier.dbl{min-width:0}
  #print-root table.der{min-width:0}
  #print-root .page-cahier{page:cahier}
  .seyes{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page cahier{size:A4 landscape;margin:10mm}
  @page{size:A4;margin:12mm}
}