/* Thème de Gestiob : les jetons du style « bulle » de Market Raccoon
   (## MR/frontend-service/src/static/css/theme.css et docs/ux/style.md),
   repris à l'identique pour que les deux outils se ressemblent.
   Clair par défaut ; sombre via data-theme="dark" sur <html>, posé avant le
   premier rendu par le script de base.html. */

:root {
    color-scheme: light;

    --g-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --g-titre: 'Bricolage Grotesque', 'Figtree', -apple-system, sans-serif;
    --g-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;

    /* Plus un bloc est grand, plus il est rond. */
    --g-r-xs: 0.5rem;
    --g-r-s: 0.875rem;
    --g-r-m: 1.25rem;
    --g-r-l: 1.5rem;
    --g-r-xl: 1.75rem;
    --g-r-rond: 999px;
    --g-filet: 1.5px;

    --g-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --g-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
    --g-duree: 0.22s;

    /* Le souci : l'unique accent, en aplat sous de l'encre. Pour ce qui est
       choisi, en cours, ou l'action principale de l'écran. Jamais en texte. */
    --g-souci: #f2b53c;
    --g-souci-fort: #e3a21f;
    --g-souci-encre: #1a1712;
    --g-souci-voile: rgba(242, 181, 60, 0.2);

    --g-conteneur: 107.5rem;
    --g-lecture: 74ch;

    --g-fond: #f7f2e9;
    --g-carte: #fffdf8;
    --g-carte-survol: #ffffff;
    --g-creux: #ebe5d9;

    --g-texte: #1a1712;
    --g-texte-fort: #0f0d0a;
    --g-texte-doux: #57503f;

    --g-bord: rgba(26, 23, 18, 0.14);
    --g-bord-fort: rgba(26, 23, 18, 0.34);
    --g-bord-champ: rgba(26, 23, 18, 0.5);

    --g-bouton: #1a1712;
    --g-bouton-texte: #f7f2e9;

    --g-barre: #fffdf8;
    --g-barre-survol: rgba(26, 23, 18, 0.06);
    --g-barre-actif: rgba(26, 23, 18, 0.1);

    --g-ombre-1: 0 0.0625rem 0.125rem rgba(74, 52, 20, 0.06), 0 0.25rem 0.75rem -0.25rem rgba(74, 52, 20, 0.1);
    --g-ombre-2: 0 0.0625rem 0.125rem rgba(74, 52, 20, 0.06), 0 0.5rem 1rem -0.375rem rgba(74, 52, 20, 0.14), 0 1.25rem 2.5rem -1.25rem rgba(74, 52, 20, 0.16);
    --g-ombre-3: 0 0.125rem 0.25rem rgba(74, 52, 20, 0.06), 0 1rem 2rem -0.75rem rgba(74, 52, 20, 0.2), 0 2.5rem 4rem -2rem rgba(74, 52, 20, 0.22);
    --g-arete: inset 0 -0.1875rem 0 rgba(0, 0, 0, 0.22), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.14);
    --g-creux-ombre: inset 0 0.125rem 0.25rem rgba(74, 52, 20, 0.07);

    /* Couleurs d'état et de projet. Toujours doublées d'un mot : jamais seules. */
    --g-gris: #6b6456;      --g-gris-voile: rgba(26, 23, 18, 0.07);
    --g-petit-texte: #57503f;
    --g-bleu: #3d6a8f;      --g-bleu-voile: rgba(61, 106, 143, 0.12);
    --g-violet: #715e93;    --g-violet-voile: rgba(113, 94, 147, 0.12);
    --g-orange: #8a5222;    --g-orange-voile: rgba(164, 99, 42, 0.12);
    --g-rouge: #a13c3c;     --g-rouge-voile: rgba(161, 60, 60, 0.12);
    --g-vert: #266741;      --g-vert-voile: rgba(47, 125, 79, 0.12);

    --g-focus: #1a1712;
    --g-voile-dialogue: rgba(18, 15, 11, 0.62);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --g-fond: #1a1712;
    --g-carte: #241f19;
    --g-carte-survol: #2a241d;
    --g-creux: #151310;

    --g-texte: #f7f2e9;
    --g-texte-fort: #fffaf2;
    --g-texte-doux: #9a9284;

    --g-bord: rgba(247, 242, 233, 0.1);
    --g-bord-fort: rgba(247, 242, 233, 0.28);
    --g-bord-champ: rgba(247, 242, 233, 0.42);

    --g-bouton: #f7f2e9;
    --g-bouton-texte: #1a1712;

    --g-barre: #1f1b16;
    --g-barre-survol: rgba(247, 242, 233, 0.07);
    --g-barre-actif: rgba(247, 242, 233, 0.12);

    --g-gris: #9a9284;      --g-gris-voile: rgba(247, 242, 233, 0.08);
    --g-petit-texte: #b3ab9c;
    --g-bleu: #8fb8d9;      --g-bleu-voile: rgba(143, 184, 217, 0.14);
    --g-violet: #b3a3d4;    --g-violet-voile: rgba(179, 163, 212, 0.14);
    --g-orange: #d9a06a;    --g-orange-voile: rgba(217, 160, 106, 0.14);
    --g-rouge: #d98a8a;     --g-rouge-voile: rgba(217, 138, 138, 0.15);
    --g-vert: #9ac8a4;      --g-vert-voile: rgba(154, 200, 164, 0.14);

    /* En sombre, la profondeur se dit aussi par un liseré de lumière en haut. */
    --g-ombre-1: inset 0 0.0625rem 0 rgba(255, 250, 240, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3), 0 0.25rem 0.75rem -0.25rem rgba(0, 0, 0, 0.4);
    --g-ombre-2: inset 0 0.0625rem 0 rgba(255, 250, 240, 0.06), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3), 0 0.5rem 1rem -0.375rem rgba(0, 0, 0, 0.5), 0 1.25rem 2.5rem -1.25rem rgba(0, 0, 0, 0.55);
    --g-ombre-3: inset 0 0.0625rem 0 rgba(255, 250, 240, 0.06), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3), 0 1rem 2rem -0.75rem rgba(0, 0, 0, 0.6), 0 2.5rem 4rem -2rem rgba(0, 0, 0, 0.65);
    --g-arete: inset 0 -0.1875rem 0 rgba(26, 23, 18, 0.28), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.5);
    --g-creux-ombre: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
    --g-souci: #efb246;
    --g-souci-fort: #f5c160;
    --g-souci-voile: rgba(239, 178, 70, 0.16);

    --g-focus: #f7f2e9;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--g-fond);
    color: var(--g-texte);
    font: 400 1rem/1.5 var(--g-sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--g-titre);
    font-weight: 700;
    color: var(--g-texte-fort);
    text-wrap: balance;
}
h1 { font-size: 1.875rem; letter-spacing: -0.04em; line-height: 1.15; }
h2 { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.25; }
h3 { font-size: 1rem; letter-spacing: -0.015em; }

p { margin: 0; }
a { color: inherit; }

:where(button, input, select, textarea) { font-family: inherit; font-size: inherit; }
:where(code, kbd) { font-family: var(--g-mono); font-size: 0.9em; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 0.125rem solid var(--g-focus);
    outline-offset: 0.125rem;
}

::selection { background: var(--g-souci); color: var(--g-souci-encre); }

.ic { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.14em; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: g-sortie 0.14s ease both; }
::view-transition-new(root) { animation: g-entree 0.26s var(--g-ease) both; }
@keyframes g-sortie { to { opacity: 0; } }
@keyframes g-entree { from { opacity: 0; transform: translateY(0.375rem); } }

:root.theme-bascule, :root.theme-bascule body { transition: background-color 0.28s ease, color 0.28s ease; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}