/* Jetons de design du logiciel : le seul endroit où figurent couleurs, rayons, espacements et tailles de texte.
   Langage visuel d'iPadOS : matière « verre » pour les barres et les surcouches, listes groupées en encart,
   formes concentriques, police du système. Les NOMS sont un contrat pour tous les modules : ne pas les changer.
   Les couleurs de texte tiennent le contraste AA (4,5:1) sur les fonds prévus. */

:root {
  color-scheme: light dark;

  /* Fonds, du plus lointain au plus proche */
  --tz-fond: #f2f2f7;
  --tz-surface: #ffffff;
  --tz-surface-2: #f2f2f7;
  --tz-surface-3: #e5e5ea;
  --tz-voile: rgba(0, 0, 0, 0.32);

  /* Verre : barres flottantes, barre latérale, feuilles, menus */
  --tz-verre: rgba(255, 255, 255, 0.66);
  --tz-verre-fort: rgba(255, 255, 255, 0.86);
  --tz-verre-bord: rgba(255, 255, 255, 0.72);
  --tz-verre-flou: saturate(180%) blur(28px);
  --tz-verre-ombre: 0 10px 36px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);

  /* Textes et filets */
  --tz-texte: #000000;
  --tz-texte-2: rgba(60, 60, 67, 0.78);
  --tz-texte-3: rgba(60, 60, 67, 0.5);
  --tz-sur-accent: #ffffff;
  --tz-separateur: rgba(60, 60, 67, 0.18);
  --tz-separateur-fort: rgba(60, 60, 67, 0.36);

  /* Accent (bleu du système). -texte : pour du texte sur une surface ; -fond : aplat léger */
  --tz-accent: #0071e3;
  --tz-accent-texte: #0066cc;
  --tz-accent-fond: rgba(0, 122, 255, 0.12);
  --tz-focus: #0071e3;

  /* Tons : aplat plein, texte, fond léger */
  --tz-bleu: #0071e3;
  --tz-bleu-texte: #0066cc;
  --tz-bleu-fond: rgba(0, 122, 255, 0.12);
  --tz-vert: #208037;
  --tz-vert-texte: #1d7a34;
  --tz-vert-fond: rgba(52, 199, 89, 0.16);
  --tz-orange: #c25100;
  --tz-orange-texte: #ad4800;
  --tz-orange-fond: rgba(255, 149, 0, 0.16);
  --tz-rouge: #d70015;
  --tz-rouge-texte: #c40014;
  --tz-rouge-fond: rgba(255, 59, 48, 0.13);
  --tz-violet: #8944ab;
  --tz-violet-texte: #7d38a0;
  --tz-violet-fond: rgba(175, 82, 222, 0.14);
  --tz-neutre: #6c6c70;
  --tz-neutre-texte: rgba(60, 60, 67, 0.78);
  --tz-neutre-fond: rgba(120, 120, 128, 0.14);

  /* Rayons : un élément posé dans un autre prend le rayon de son parent moins la marge (formes concentriques) */
  --tz-rayon-s: 8px;
  --tz-rayon-m: 12px;
  --tz-rayon-l: 18px;
  --tz-rayon-xl: 26px;
  --tz-rayon-capsule: 999px;

  /* Espacements */
  --tz-espace-1: 4px;
  --tz-espace-2: 8px;
  --tz-espace-3: 12px;
  --tz-espace-4: 16px;
  --tz-espace-5: 20px;
  --tz-espace-6: 24px;
  --tz-espace-7: 32px;
  --tz-espace-8: 48px;

  /* Textes : police du système, tailles des styles de texte d'iPadOS */
  --tz-police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tz-police-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tz-taille-grand-titre: 2.125rem; /* 34 */
  --tz-taille-titre-1: 1.75rem;      /* 28 */
  --tz-taille-titre-2: 1.375rem;     /* 22 */
  --tz-taille-titre-3: 1.25rem;      /* 20 */
  --tz-taille-corps: 1.0625rem;      /* 17 */
  --tz-taille-annexe: 0.9375rem;     /* 15 */
  --tz-taille-note: 0.8125rem;       /* 13 */
  --tz-taille-legende: 0.75rem;      /* 12 */

  /* Ombres */
  --tz-ombre-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --tz-ombre-2: 0 6px 24px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Mouvement */
  --tz-duree: 0.24s;
  --tz-duree-lente: 0.42s;
  --tz-courbe: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Mesures */
  --tz-cible: 44px;               /* plus petite zone tactile */
  --tz-largeur-barre: 288px;      /* barre latérale */
  --tz-largeur-contenu: 1120px;   /* largeur de lecture maximale */
  --tz-zone-haut: env(safe-area-inset-top, 0px);
  --tz-zone-bas: env(safe-area-inset-bottom, 0px);
  --tz-zone-gauche: env(safe-area-inset-left, 0px);
  --tz-zone-droite: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tz-fond: #000000;
    --tz-surface: #1c1c1e;
    --tz-surface-2: #2c2c2e;
    --tz-surface-3: #3a3a3c;
    --tz-voile: rgba(0, 0, 0, 0.55);

    --tz-verre: rgba(40, 40, 44, 0.72);
    --tz-verre-fort: rgba(44, 44, 48, 0.88);
    --tz-verre-bord: rgba(255, 255, 255, 0.14);
    --tz-verre-ombre: 0 10px 36px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);

    --tz-texte: #ffffff;
    --tz-texte-2: rgba(235, 235, 245, 0.72);
    --tz-texte-3: rgba(235, 235, 245, 0.42);
    --tz-separateur: rgba(84, 84, 88, 0.6);
    --tz-separateur-fort: rgba(120, 120, 128, 0.7);

    --tz-accent: #0071e3;
    --tz-accent-texte: #4da3ff;
    --tz-accent-fond: rgba(10, 132, 255, 0.22);
    --tz-focus: #4da3ff;

    --tz-bleu: #0071e3;
    --tz-bleu-texte: #4da3ff;
    --tz-bleu-fond: rgba(10, 132, 255, 0.22);
    --tz-vert: #208037;
    --tz-vert-texte: #3ddc64;
    --tz-vert-fond: rgba(48, 209, 88, 0.2);
    --tz-orange: #c25100;
    --tz-orange-texte: #ffb340;
    --tz-orange-fond: rgba(255, 159, 10, 0.22);
    --tz-rouge: #d70015;
    --tz-rouge-texte: #ff6961;
    --tz-rouge-fond: rgba(255, 69, 58, 0.22);
    --tz-violet: #8944ab;
    --tz-violet-texte: #da8fff;
    --tz-violet-fond: rgba(191, 90, 242, 0.22);
    --tz-neutre: #8e8e93;
    --tz-neutre-texte: rgba(235, 235, 245, 0.72);
    --tz-neutre-fond: rgba(120, 120, 128, 0.28);

    --tz-ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --tz-ombre-2: 0 6px 24px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* Transparence réduite ou flou non pris en charge : le verre devient une surface pleine. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --tz-verre: var(--tz-surface);
    --tz-verre-fort: var(--tz-surface);
    --tz-verre-flou: none;
    --tz-verre-bord: var(--tz-separateur-fort);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --tz-verre: var(--tz-surface);
    --tz-verre-fort: var(--tz-surface);
  }
}

@media (prefers-contrast: more) {
  :root {
    --tz-texte-2: var(--tz-texte);
    --tz-separateur: var(--tz-separateur-fort);
    --tz-verre: var(--tz-surface);
    --tz-verre-fort: var(--tz-surface);
    --tz-verre-flou: none;
    --tz-verre-bord: var(--tz-separateur-fort);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tz-duree: 0.01s;
    --tz-duree-lente: 0.01s;
  }
}