/*
 * Préférences d'affichage pour les pages à l'ancien style (Tailwind) : Matériel, Cartes, Meeting Tour,
 * pages du hub pas encore refaites, PilotBook.
 * Lit les attributs posés sur <html> par prefs_attributs() (hub/includes/preferences.php).
 *
 * 1. Taille du texte : Tailwind travaille en rem, changer la taille de base agrandit toute la page.
 * 2. Contraste (01/10/2026) : en clair, les gris et le doré trop pâles sont foncés pour atteindre le niveau AA
 *    (texte 4,5:1) : nuit/30 à /60, slate-400, doré #B8752F -> #A0622A (liens, boutons à texte blanc).
 * 3. Mode sombre « de transition » : les couleurs Tailwind usuelles sont relues dans des variables
 *    --pf-*. Ces variables n'existent qu'en mode sombre ; en clair, chaque règle retombe sur la
 *    valeur Tailwind d'origine, donc l'affichage clair ne change pas. Couleurs = jetons de
 *    docs/DA-REFONTE.md. Remplacé outil par outil par le vrai design lors de sa refonte.
 *    Jamais à l'impression (devis, récapitulatifs) : réservé à l'écran.
 */
html[data-taille="petite"] { font-size: 87.5%; }
html[data-taille="grande"] { font-size: 112.5%; }

@media screen {
  html[data-mode="sombre"] {
    color-scheme: dark;
    --pf-fond: #0B1220; --pf-surface: #172337; --pf-surface2: #223149;
    --pf-ligne: #26354D; --pf-ligne2: #3A4B66;
    --pf-texte: #F5F5F2; --pf-texte2: #9AA9BC; --pf-texte3: #7F8EA3;
    --pf-or: #D9A15B; --pf-or-fonce: #E2B276;
    --pf-vert: #5BD67A; --pf-vert-fond: rgb(91 214 122 / .14); --pf-vert-ligne: rgb(91 214 122 / .45);
    --pf-rouge: #FF6B6B; --pf-rouge-fond: rgb(255 107 107 / .14); --pf-rouge-ligne: rgb(255 107 107 / .45);
    --pf-ambre: #FFC857; --pf-ambre-fond: rgb(255 200 87 / .15); --pf-ambre-ligne: rgb(255 200 87 / .45);
    --pf-bleu: #7CC4FF; --pf-bleu-fond: rgb(124 196 255 / .14);
    --pf-mix-accent: 60%; /* PilotBook : couleur d'accent éclaircie pour le texte */
  }
}
@media screen and (prefers-color-scheme: dark) {
  html[data-mode="auto"] {
    color-scheme: dark;
    --pf-fond: #0B1220; --pf-surface: #172337; --pf-surface2: #223149;
    --pf-ligne: #26354D; --pf-ligne2: #3A4B66;
    --pf-texte: #F5F5F2; --pf-texte2: #9AA9BC; --pf-texte3: #7F8EA3;
    --pf-or: #D9A15B; --pf-or-fonce: #E2B276;
    --pf-vert: #5BD67A; --pf-vert-fond: rgb(91 214 122 / .14); --pf-vert-ligne: rgb(91 214 122 / .45);
    --pf-rouge: #FF6B6B; --pf-rouge-fond: rgb(255 107 107 / .14); --pf-rouge-ligne: rgb(255 107 107 / .45);
    --pf-ambre: #FFC857; --pf-ambre-fond: rgb(255 200 87 / .15); --pf-ambre-ligne: rgb(255 200 87 / .45);
    --pf-bleu: #7CC4FF; --pf-bleu-fond: rgb(124 196 255 / .14);
    --pf-mix-accent: 60%; /* PilotBook : couleur d'accent éclaircie pour le texte */
  }
}

/* Préfixe « html » : passe devant les classes Tailwind (injectées après), sans !important.
   Les variantes :hover, group-hover… restent plus fortes et gardent leur effet. */

/* Fonds */
html body.bg-creme, html .bg-creme { background-color: var(--pf-fond, #FAF8F5); }
html .bg-white { background-color: var(--pf-surface, #fff); }
html .bg-slate-50 { background-color: var(--pf-surface2, #f8fafc); }
html .bg-slate-100 { background-color: var(--pf-surface2, #f1f5f9); }
html .bg-slate-200 { background-color: var(--pf-ligne, #e2e8f0); }
html .bg-slate-300 { background-color: var(--pf-ligne2, #cbd5e1); }
html .hover\:bg-creme:hover { background-color: var(--pf-surface2, #FAF8F5); }
html .hover\:bg-nuit\/5:hover { background-color: var(--pf-surface2, rgb(30 42 71 / .05)); }

/* Textes */
html .text-nuit { color: var(--pf-texte, #1E2A47); }
html .text-slate-900 { color: var(--pf-texte, #0f172a); }
html .text-slate-700 { color: var(--pf-texte, #334155); }
html .text-nuit\/80 { color: var(--pf-texte, rgb(30 42 71 / .8)); }
html .text-nuit\/75 { color: var(--pf-texte, rgb(30 42 71 / .75)); }
html .text-nuit\/70 { color: var(--pf-texte2, rgb(30 42 71 / .7)); }
html .text-nuit\/60 { color: var(--pf-texte2, rgb(30 42 71 / .7)); }
html .text-nuit\/50 { color: var(--pf-texte2, rgb(30 42 71 / .68)); }
html .text-nuit\/40 { color: var(--pf-texte3, rgb(30 42 71 / .66)); }
html .text-nuit\/30 { color: var(--pf-texte3, rgb(30 42 71 / .66)); }
html .text-slate-600 { color: var(--pf-texte2, #475569); }
html .text-slate-500 { color: var(--pf-texte2, #64748b); }
html .text-gray-500 { color: var(--pf-texte2, #6b7280); }
html .text-slate-400 { color: var(--pf-texte3, #64748b); }
html .text-slate-300 { color: var(--pf-texte3, #cbd5e1); }
html .text-or { color: var(--pf-or, #A0622A); }
html .bg-or { background-color: #A0622A; }
html .legal a { color: var(--pf-or, #A0622A); }
html .text-or-fonce { color: var(--pf-or-fonce, #9A6126); }
/* Couleur d'accent du compte (Paramètres > Apparence) : remplace le doré des boutons et liens Tailwind */
html[data-accent] .bg-or { background-color: var(--accent); color: var(--sur-accent); }
html[data-accent] .hover\:bg-or-fonce:hover { background-color: color-mix(in srgb, var(--accent) 85%, black); }
html[data-accent] .text-or, html[data-accent] .legal a { color: color-mix(in srgb, var(--accent) var(--pf-mix-accent, 100%), white); }
html[data-accent] .border-or { border-color: var(--accent); }
html[data-accent] :is(button, a).bg-nuit { background-color: var(--accent); color: var(--sur-accent); } /* boutons et onglets actifs bleu nuit */

/* Lignes, bordures, anneaux */
html *, html ::before, html ::after { border-color: var(--pf-ligne, #e5e7eb); }
html .border-black\/5 { border-color: var(--pf-ligne, rgb(0 0 0 / .05)); }
html .border-black\/10 { border-color: var(--pf-ligne, rgb(0 0 0 / .1)); }
html .divide-black\/5 > :not([hidden]) ~ :not([hidden]) { border-color: var(--pf-ligne, rgb(0 0 0 / .05)); }
html .ring-black\/5 { --tw-ring-color: var(--pf-ligne, rgb(0 0 0 / .05)); }
html .ring-black\/10 { --tw-ring-color: var(--pf-ligne2, rgb(0 0 0 / .1)); }
html .ring-nuit\/10 { --tw-ring-color: var(--pf-ligne, rgb(30 42 71 / .1)); }
html .ring-nuit\/15 { --tw-ring-color: var(--pf-ligne, rgb(30 42 71 / .15)); }
html .ring-nuit\/20 { --tw-ring-color: var(--pf-ligne2, rgb(30 42 71 / .2)); }

/* États : vert = à jour, ambre = bientôt, rouge = erreur / dépassé */
html .bg-emerald-50 { background-color: var(--pf-vert-fond, #ecfdf5); }
html .bg-emerald-100 { background-color: var(--pf-vert-fond, #d1fae5); }
html .text-emerald-600 { color: var(--pf-vert, #059669); }
html .text-emerald-700 { color: var(--pf-vert, #047857); }
html .text-emerald-800 { color: var(--pf-vert, #065f46); }
html .text-emerald-900 { color: var(--pf-vert, #064e3b); }
html .border-emerald-200 { border-color: var(--pf-vert-ligne, #a7f3d0); }
html .bg-red-50 { background-color: var(--pf-rouge-fond, #fef2f2); }
html .bg-rose-50 { background-color: var(--pf-rouge-fond, #fff1f2); }
html .bg-red-100 { background-color: var(--pf-rouge-fond, #fee2e2); }
html .bg-rose-100 { background-color: var(--pf-rouge-fond, #ffe4e6); }
html .hover\:bg-red-50:hover { background-color: var(--pf-rouge-fond, #fef2f2); }
html .text-red-600 { color: var(--pf-rouge, #dc2626); }
html .text-red-700 { color: var(--pf-rouge, #b91c1c); }
html .text-red-800 { color: var(--pf-rouge, #991b1b); }
html .text-red-900 { color: var(--pf-rouge, #7f1d1d); }
html .text-rose-400 { color: var(--pf-rouge, #fb7185); }
html .text-rose-600 { color: var(--pf-rouge, #e11d48); }
html .text-rose-700 { color: var(--pf-rouge, #be123c); }
html .border-red-200 { border-color: var(--pf-rouge-ligne, #fecaca); }
html .border-red-300 { border-color: var(--pf-rouge-ligne, #fca5a5); }
html .bg-amber-50 { background-color: var(--pf-ambre-fond, #fffbeb); }
html .bg-amber-100 { background-color: var(--pf-ambre-fond, #fef3c7); }
html .text-amber-700 { color: var(--pf-ambre, #b45309); }
html .text-amber-800 { color: var(--pf-ambre, #92400e); }
html .text-amber-900 { color: var(--pf-ambre, #78350f); }
html .border-amber-300 { border-color: var(--pf-ambre-ligne, #fcd34d); }
html .bg-sky-50 { background-color: var(--pf-bleu-fond, #f0f9ff); }
html .bg-sky-100 { background-color: var(--pf-bleu-fond, #e0f2fe); }
html .ring-sky-200 { --tw-ring-color: var(--pf-bleu-fond, #bae6fd); }
html .ring-amber-200 { --tw-ring-color: var(--pf-ambre-ligne, #fde68a); }
html .text-sky-700 { color: var(--pf-bleu, #0369a1); }

/* Champs et pages juridiques de l'ancien gabarit du hub */
html .champ { background: var(--pf-surface2, #fff); border-color: var(--pf-ligne2, #D6D1C8); color: var(--pf-texte, inherit); }
html .legal th, html .legal .attention { background: var(--pf-surface2, #FAF8F5); }
html .legal th, html .legal td { border-color: var(--pf-ligne, #E5E0D8); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}