/* Thème « cahier d'école » : chargé après les autres feuilles, il ne change que l'apparence. */
:root{
  --ink:#23252F;--ink-2:#565A66;--paper:#FFFEF9;--kraft:#C9A57B;
  --blue:#1F3FBF;--blue-d:#132A85;--red:#D7263D;--green:#1F8A4C;--hl:#FFE14D;
  --accent:var(--blue);--accent-light:#E6EBFF;--line:rgba(35,37,47,.14);--muted:var(--ink-2);
  --pi:#FFE14D;
  --font-ui:'Atkinson Hyperlegible',system-ui,'Segoe UI',sans-serif;
  --font-cursive:'Playwrite FR Moderne','Segoe Script',cursive;
  --font-hand:'Caveat','Segoe Print',cursive;
  --paper-shadow:0 1px 1px rgba(0,0,0,.12),0 14px 18px -12px rgba(60,40,10,.55);
  --seyes:linear-gradient(90deg,transparent 71px,rgba(215,38,61,.7) 71px,rgba(215,38,61,.7) 73px,transparent 73px),repeating-linear-gradient(180deg,rgba(31,63,191,.32) 0 1px,transparent 1px 32px),repeating-linear-gradient(180deg,rgba(31,63,191,.12) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,rgba(31,63,191,.12) 0 1px,transparent 1px 32px);
  --carreaux:repeating-linear-gradient(180deg,rgba(31,63,191,.17) 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,rgba(31,63,191,.17) 0 1px,transparent 1px 20px);
  font-family:var(--font-ui);color:var(--ink);background:var(--kraft)
}
body{background-color:var(--kraft);background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px),repeating-linear-gradient(25deg,rgba(90,60,20,.05) 0 1px,transparent 1px 5px);color:var(--ink)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* Le cahier : grimoire à gauche (petits carreaux), spirale, feuille Seyès à droite */
.sidebar{background-color:var(--paper);background-image:var(--carreaux);border-right:0;color:var(--ink)}
.main{position:relative;background-color:var(--paper);background-image:var(--seyes)}
.topbar{background:transparent;border-bottom:0}
.board{background:transparent}
@media(min-width:701px){
  .app-shell{padding:18px;min-height:100dvh}
  .sidebar{height:calc(100dvh - 36px);border-radius:14px 0 0 14px;box-shadow:0 20px 30px -18px rgba(60,40,10,.6)}
  .main{padding-left:30px;border-radius:0 14px 14px 0;overflow:hidden;box-shadow:0 20px 30px -18px rgba(60,40,10,.6);background-position:30px 0}
  .main::before{content:"";position:absolute;left:0;top:0;bottom:0;width:30px;z-index:4;pointer-events:none;background-color:#3B3328;background-image:radial-gradient(ellipse 15px 5px at 50% 50%,#D9DADD 0,#9EA1A8 55%,transparent 62%);background-size:30px 24px}
  .board{height:calc(100dvh - 118px)}
}
@media(max-width:700px){
  .main{--seyes:linear-gradient(90deg,transparent 39px,rgba(215,38,61,.7) 39px,rgba(215,38,61,.7) 41px,transparent 41px),repeating-linear-gradient(180deg,rgba(31,63,191,.32) 0 1px,transparent 1px 32px),repeating-linear-gradient(180deg,rgba(31,63,191,.12) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,rgba(31,63,191,.12) 0 1px,transparent 1px 32px)}
  .sidebar{box-shadow:12px 0 30px -12px rgba(60,40,10,.6)}
  .operations::before,.operations::after{display:none}
}

/* Étiquette de cahier */
.brand{align-self:flex-start;padding:8px 18px 10px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5.5px var(--blue),0 6px 14px -8px rgba(60,40,10,.6);font-family:var(--font-cursive);font-weight:400;font-size:19px;letter-spacing:0;color:var(--blue)}
.brand-light{font-weight:400}
.brand-mark{color:var(--red);width:26px}

/* Grimoire */
.collection-title h1{font-family:var(--font-cursive);font-weight:400;font-size:21px;color:var(--blue)}
.count{background:none;color:var(--ink-2);font-family:var(--font-hand);font-size:22px;padding:0}
.sidebar-intro{font-family:var(--font-hand);font-size:20px;line-height:1.1;color:var(--ink-2)}
#catalog-search{border:0;border-bottom:2px solid var(--ink);border-radius:0;background:transparent;font-size:15px;color:var(--ink);padding-left:2px}
#catalog-search::placeholder{color:#7A7D88}
.grimoire-filters button{color:var(--ink);font-weight:700;border-radius:0}
.grimoire-filters button[aria-pressed=true]{color:var(--ink);background:linear-gradient(transparent 20%,var(--hl) 20%,var(--hl) 82%,transparent 82%)}
.category{--pi:#FFE14D}
.category:has(>[data-category=geometry]){--pi:#8CCBFF}
.category:has(>[data-category=measure]){--pi:#9BE07A}
.category:has(>[data-category=probability]){--pi:#FF9DBA}
.category:has(>[data-category=statistics]){--pi:#FFB65C}
.category:has(>[data-category=logic]){--pi:#FF8A70}
.category:has(>[data-category=vectors]){--pi:#A9BBD4}
.category:has(>[data-category=advanced]){--pi:#E6C48E}
.category:has(>[data-category=functions]){--pi:#D3D6DB}
.category:has(>[data-category=operations]){--pi:#6FDCCB}
.category-head{color:var(--ink);font-weight:700;font-size:14px}
.category-head>span:not([class]){padding:0 4px;background:linear-gradient(transparent 45%,var(--pi) 45%,var(--pi) 92%,transparent 92%)}
.category-head .category-count{color:var(--ink-2);font-family:var(--font-hand);font-size:19px}
.catalog-item{border:0;border-radius:2px 2px 12px 2px;background:var(--pi);color:var(--ink);font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.12),0 6px 8px -6px rgba(60,40,10,.55)}
.catalog-item:hover{background:var(--pi);border-color:transparent;box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 12px -8px rgba(60,40,10,.6);translate:0 -1px}
.catalog-item .mini-symbol{color:var(--ink)}
.mini-dot{background:var(--ink)!important}
.favorite-toggle{color:rgba(35,37,47,.45)}
.favorite-toggle[aria-pressed=true]{color:var(--red)}
.favorite-toggle[aria-pressed=true] svg{fill:rgba(215,38,61,.35)}

/* Progression : une règle graduée */
.progress-meta{font-size:13px;font-weight:700;color:var(--ink)}
.progress-track{height:30px;border-radius:3px;overflow:hidden;background-color:rgba(255,255,255,.75);background-image:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 6px),repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 30px);background-size:100% 8px,100% 14px;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(35,37,47,.3)}
.progress-track span{background:linear-gradient(transparent 55%,var(--red) 55%,var(--red) 85%,transparent 85%)}
.sidebar-bottom p{font-family:var(--font-hand);font-size:19px;color:var(--ink-2)}

/* En-tête de la feuille */
.workspace-title{font-family:var(--font-cursive);font-weight:400;font-size:21px;color:var(--ink);padding-bottom:2px;border-bottom:2px solid var(--red)}
.workspace-subtitle{font-family:var(--font-hand);font-size:22px;color:var(--blue)}
.topbar-left .divider{display:none}
.save-state{font-family:var(--font-hand);font-size:19px;color:var(--ink-2)}

/* Boutons : étiquettes découpées */
.text-button,.secondary-button,.hint-button,.topbar .icon-button,.board-top-actions button,.view-controls{border:1.5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--ink);font-weight:700}
.text-button:hover,.secondary-button:hover,.hint-button:hover,.topbar .icon-button:hover,.board-top-actions button:hover{background:#FFF8D6;color:var(--ink);border-color:var(--ink);border-radius:10px}
.text-button:active,.secondary-button:active,.hint-button:active,.topbar .icon-button:active,.board-top-actions button:active{translate:0 2px;box-shadow:0 1px 0 var(--ink)}
.view-controls button{color:var(--ink);box-shadow:none;border:0;background:transparent}
.view-controls button:hover{background:#FFF8D6}
.view-controls #zoom-level{width:auto;min-width:48px;padding:0 6px;white-space:nowrap;font-size:13px;font-weight:700}
.primary-button{background:var(--blue);border:1.5px solid var(--blue-d);border-radius:10px;box-shadow:0 3px 0 var(--blue-d);font-weight:700;color:#fff}
.primary-button:hover{background:#2347D6}
.primary-button:active{translate:0 2px;box-shadow:0 1px 0 var(--blue-d)}

/* Notions : des post-its */
.node{border:0;border-radius:2px 2px 18px 2px;background:linear-gradient(180deg,color-mix(in srgb,var(--pi) 62%,#fff) 0,var(--pi) 24%);color:var(--ink);box-shadow:var(--paper-shadow)}
.node.number{--pi:#FFE14D;color:var(--ink)}
.node.geometry{--pi:#8CCBFF;color:var(--ink)}
.node.measure{--pi:#9BE07A;color:var(--ink)}
.node.advanced{--pi:#FF9DBA;color:var(--ink)}
.node:nth-child(3n+1){rotate:-1.6deg}
.node:nth-child(3n+2){rotate:1.2deg}
.node:hover{border:0;box-shadow:0 1px 1px rgba(0,0,0,.12),0 18px 22px -12px rgba(60,40,10,.6)}
.node.selected{border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--pi) 62%,#fff) 0,var(--pi) 24%)}
.node.selected::after{content:"";position:absolute;inset:-24px -28px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136 134' preserveAspectRatio='none'%3E%3Cpath d='M70 5C30 3 5 30 7 67c2 38 33 61 67 59 36-2 57-31 55-63C127 27 100 5 60 10' fill='none' stroke='%23D7263D' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.node .selection-order{background:var(--red);border-color:var(--paper);z-index:1}
.node.drop-target{border:0;box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--blue),var(--paper-shadow)}
.node.invalid-target{border:0;box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--red)}
.node-point{background:var(--ink);box-shadow:none}
.node-name{color:var(--ink);font-weight:700}
.node-subtitle{font-family:var(--font-hand);font-size:17px;letter-spacing:0;text-transform:lowercase;color:#40434F}

/* Feuille : annotations au stylo */
.board-heading h2{font-family:var(--font-cursive);font-weight:400;letter-spacing:0;color:var(--ink)}
.board-heading h2 em{color:var(--blue)}
.board-heading p{font-family:var(--font-hand);font-size:21px;color:var(--ink-2)}
.empty-board span,.starter-tip{font-family:var(--font-hand);font-size:22px;color:var(--blue)}
.starter-tip strong{color:var(--red);font-weight:700}
.board-instruction{font-family:var(--font-hand);font-size:19px;color:var(--ink-2)}

/* Barre d'actions : bande de papier scotchée */
.operations{position:relative;border:0;border-radius:3px;background:var(--paper);box-shadow:var(--paper-shadow)}
.operations::before,.operations::after{content:"";position:absolute;top:8px;width:44px;height:18px;background:rgba(255,182,92,.75);pointer-events:none}
.operations::before{left:-20px;rotate:-24deg}
.operations::after{right:-20px;rotate:24deg}
.operation{color:var(--ink);font-weight:700;border-radius:8px}
.operation.active{background:var(--blue);color:#fff;box-shadow:0 3px 0 var(--blue-d)}
.operation:hover:not(.active){background:#FFF8D6}

/* Fiches : leçon, sélection, message */
.lesson,.selection-panel,.toast{border:0;border-radius:4px;background-color:var(--paper);box-shadow:var(--paper-shadow);color:var(--ink)}
.lesson{background-image:repeating-linear-gradient(180deg,transparent 0 23px,rgba(31,63,191,.16) 23px 24px);rotate:-.4deg;backdrop-filter:none}
.lesson-icon{background:none;color:var(--red);font-size:26px}
.lesson strong{font-weight:700;font-size:14px}
.lesson p{color:var(--ink-2)}
.lesson.discovered{box-shadow:0 0 0 2px var(--green),var(--paper-shadow)}
.selection-panel{border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.selection-panel span{color:var(--ink-2)}
.toast{border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-weight:700}
.toast.error{border-color:var(--red);color:var(--red);background:var(--paper);box-shadow:0 3px 0 var(--red)}

/* Fenêtres : fiches bristol */
.dialog{border:0;border-radius:4px;color:var(--ink);background-color:var(--paper);background-image:linear-gradient(180deg,var(--paper) 0 74px,rgba(215,38,61,.62) 74px 76px,transparent 76px),repeating-linear-gradient(180deg,transparent 0 27px,rgba(31,63,191,.14) 27px 28px);box-shadow:0 40px 80px -30px rgba(40,25,5,.7)}
.dialog::backdrop{background:rgba(45,30,10,.45);backdrop-filter:blur(3px)}
.dialog-eyebrow{display:inline-block;font-family:var(--font-hand);font-size:24px;font-weight:700;letter-spacing:0;text-transform:lowercase;color:var(--red)}
.dialog-eyebrow::first-letter{text-transform:uppercase}
.dialog h2{font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.dialog>p,.help-steps p,.help-note p{color:var(--ink-2)}
.dialog .icon-button{color:var(--ink)}
.help-steps strong{font-weight:700}
.operation-choice,.level-tabs button{border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.operation-choice:hover,.level-tabs button:hover{background:#FFF8D6;border-color:var(--ink)}
.operation-choice strong{font-weight:700}
.operation-choice strong span{color:var(--blue)}
.operation-choice small{color:var(--ink-2)}
.operation-choice .fusion-preview{color:var(--blue);font-weight:700}
.level-tabs button[aria-pressed=true]{color:var(--ink);border-color:var(--ink);background:var(--hl)}
.operation-search{border:0;border-bottom:2px solid var(--ink);border-radius:0;background:transparent;color:var(--ink)}
.journal-tabs button{color:var(--ink-2);font-weight:700}
.journal-tabs button[aria-selected=true]{color:var(--ink);border-color:var(--red)}
.journal-entry{border-top:1px dashed rgba(35,37,47,.25)}
.journal-entry .formula{color:var(--blue)}
.journal-entry p,.profile-card p{color:var(--ink-2)}
.help-steps>div>span{display:grid;place-items:center;flex:0 0 40px;height:40px;padding:0;border:2.5px solid var(--red);border-radius:52% 48% 55% 45%;font-family:var(--font-hand);font-size:22px;font-weight:700;letter-spacing:0;color:var(--red)}