/* =====================================================================
   IA Aïcha — les 10 principes du bon design (Dieter Rams, repris par Apple)
   Couche de finition chargée en DERNIER : elle n'efface rien, elle affine.
   Elle ne touche ni aux documents ni à l'aperçu PDF (classes .pr-*, .mock-*, .doc-*).

   1  Innovant ......... (le produit : leçons, devoirs, exposés illustrés)
   2  Utile ............ une action principale évidente ; cibles tactiles ≥ 44 px
   3  Esthétique ....... une seule échelle d'espacement (8 px), des rayons cohérents
   4  Compréhensible ... hiérarchie claire ; texte de saisie ≥ 16 px (pas de zoom iOS) ; focus visible
   5  Discret .......... l'accent rouge réservé à l'action principale ; plus d'ombres dures
   6  Honnête .......... états désactivés / en cours sans équivoque
   7  Durable .......... pas d'effet de mode ; contrastes élevés et couleurs forcées respectés
   8  Minutieux ........ zones sûres (encoche), pas de délai tactile, chiffres tabulaires
   9  Écologique ....... rendu différé des longues sections, aucune animation superflue
   10 Le moins possible  moins de chrome : poignée neutre, segments sobres, boutons secondaires calmes
   ===================================================================== */
:root{
  --tap:44px;
  --r-s:10px; --r-m:14px; --r-l:20px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --accent:#E2483D; --accent-press:#CC3A30;
  --focus:#FFFFFF;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
button,[role=button],select,input,textarea,a{touch-action:manipulation}

/* 4 · focus toujours visible, sur fond sombre comme sur fond clair */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-s)}
.canvas :focus-visible,.hist-card :focus-visible{outline-color:var(--pine)}

/* 2 · cibles tactiles ≥ 44 px */
.btn-ghost,.btn-save,.btn-pdf,.btn-generate,.mode-switch button,.field select,.field input:not([type=checkbox]):not([type=radio]),.upload-zone{min-height:var(--tap)}

/* 2 + 5 · l'action principale : une seule, pleine largeur, sans ombre dure */
.btn-generate{
  width:100%;min-height:52px;border-radius:var(--r-m);font-size:1.0625rem;font-weight:700;letter-spacing:.005em;
  background:var(--accent);box-shadow:none;transition:background .15s,transform .12s var(--ease,ease);
}
.btn-generate:hover{background:#EA5A4F}
.btn-generate:active{background:var(--accent-press);transform:scale(.985);box-shadow:none}

/* 3 + 4 · champs : 16 px, rayons doux, libellés lisibles */
.field{margin-top:var(--sp-4)}
.field label{font-size:.8125rem;letter-spacing:.01em}
.field textarea,.field input,.field select{font-size:1rem;border-radius:var(--r-s);padding:var(--sp-3) var(--sp-3)}
.field textarea{min-height:120px}
.field textarea::placeholder,.field input::placeholder{color:#8D9BC4;opacity:1}

/* 10 · segments sobres (Leçon / Devoir / Exposé) : l'actif est clair, pas rouge */
.mode-switch{border-radius:var(--r-m);padding:var(--sp-1);gap:var(--sp-1)}
.mode-switch button{border-radius:calc(var(--r-m) - 3px);font-size:.9375rem;transition:background .15s,color .15s}
.mode-switch button.active{background:transparent;color:var(--ink)}
/* la pastille glissante (motion.css) devient claire, sans ombre dure, sans rebond exagéré */
.mv-pill{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);border-radius:calc(var(--r-m) - 3px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1)}
.mv-pill.nt{transition:none}

/* 5 · boutons secondaires calmes ; l'accent reste à l'action principale */
.btn-ghost{border-radius:var(--r-m);font-weight:600}
.btn-save{border-radius:var(--r-s)}
.btn-pdf{border-radius:var(--r-m)}
.upload-zone{border-radius:var(--r-m)}

/* 10 · poignée du panneau : neutre */
.sheet-handle i{background:rgba(255,255,255,.4)}
@media(max-width:900px){
  .atelier{border-radius:var(--r-l) var(--r-l) 0 0;padding-bottom:max(34px,env(safe-area-inset-bottom))}
  .canvas{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  .canvas-topline{gap:var(--sp-2)}
}

/* 6 · états honnêtes */
button:disabled,.btn-generate:disabled{opacity:.5;cursor:not-allowed}
.btn-generate:disabled{cursor:progress}

/* 8 · minutie typographique */
.status-chip,#netText,.how .num{font-variant-numeric:tabular-nums}
.canvas-topline h1{letter-spacing:-.01em;text-wrap:balance}
.lede,.how p{text-wrap:pretty}

/* 9 · écologique : ne dessiner que ce qui est à l'écran */
.how-section{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* 7 · durable : accessibilité système */
@media(prefers-contrast:more){
  .field textarea,.field input,.field select{border-color:#fff}
  .btn-ghost{border-width:2px}
}
@media(forced-colors:active){
  .btn-generate,.btn-save,.btn-pdf,.mode-switch button.active{border:2px solid ButtonText}
}