/* ===========================================================================
   SOCLE — Easy Print Center
   ---------------------------------------------------------------------------
   Fondations du systeme : jetons, reset, typographie, et le style des ELEMENTS
   nus (input, select, button, table). C'est le point important : jusqu'ici le
   CSS ne visait que des classes nommees par ecran, donc tout element sans la
   bonne classe sortait au style du navigateur. Un select brut a cote d'un
   champ dessine, c'est ce qui faisait « administration Symfony ».

   Les jetons gardent les noms d'origine (--color-bg, --space-3, ...) : les
   3 000 lignes de app.css continuent de rendre, et heritent du theme sombre
   sans etre touchees.

   Theme : color-scheme + light-dark(). Une seule declaration par jeton au lieu
   de trois blocs a maintenir en parallele.

   Identite du 11/10/2026, « trame et encre » : le papier, l'encre, et les trois
   encres d'imprimerie. Cyan pour agir, magenta pour signer, jaune pour
   surligner. Polices libres (OFL) hebergees ici, decoupees en latin : aucune
   requete vers Google Fonts.
   =========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url("../fonts/Inter-variable-HkGpBZg.woff2") format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'M PLUS Rounded 1c';
    src: url("../fonts/MPLUSRounded1c-700-GVgAh5F.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'M PLUS Rounded 1c';
    src: url("../fonts/MPLUSRounded1c-800-eNl62TU.woff2") format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dela Gothic One';
    src: url("../fonts/DelaGothicOne-400-IwnSZWR.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    /* --- Fonds et encres ------------------------------------------------ */
    /* En sombre, l'ecart entre le fond et la surface doit rester lisible :
       trop rapproches, un panneau ne se detache plus de la page et l'ecran
       devient une masse. */
    /* Le papier en clair (chaud, pour que les cartes blanches s'en detachent),
       l'encre en sombre. ink-3 tient 5:1 sur le fond : c'est le gris le plus
       pale autorise pour du texte. */
    --color-bg: light-dark(#f8f3e9, #121218);
    --color-surface: light-dark(#fffdf9, #1c1c24);
    --color-surface-2: light-dark(#f3ede1, #25252f);
    --color-surface-3: light-dark(#ebe3d3, #2e2e39);
    --color-ink: light-dark(#16161d, #f5f1e8);
    --color-ink-2: light-dark(#45434e, #d3cec4);
    --color-ink-3: light-dark(#6a6774, #a7a29a);
    --color-line: light-dark(#e6ddcb, #34343f);
    --color-line-2: light-dark(#d2c6ae, #474754);

    /* --- Navigation : la couche d'encre ---------------------------------
       Encre profonde dans les deux themes. En clair elle ancre l'ecran, en
       sombre elle passe sous le fond de travail pour rester une couche. */
    --nav-bg: light-dark(#16161d, #0c0c11);
    --nav-surface: light-dark(#24242e, #191920);
    --nav-ink: light-dark(#fffaf0, #f5f1e8);
    --nav-ink-2: light-dark(#b9b3a8, #a9a39a);
    --nav-line: light-dark(#2c2c37, #22222b);

    /* --- Marque : le cyan qui agit -----------------------------------------
       Plus fonce que le cyan d'imprimerie du logo (#009fe3) : le texte blanc y
       tient 4,9:1. En sombre il s'eclaircit et porte un texte d'encre. */
    --color-brand: light-dark(#0077b6, #45b0eb);
    --color-brand-d: light-dark(#005f92, #79c6f2);
    --color-brand-l: light-dark(#1e8fcf, #2f9fde);
    --color-brand-tint: light-dark(#e2f1fa, #0f2d42);
    --color-brand-contraste: light-dark(#ffffff, #0c0c11);

    /* Magenta : la signature (le sceau) et l'attention, jamais une action
       primaire. Un seul par ecran. */
    --color-accent: light-dark(#e4007c, #ff4fa7);
    --color-accent-d: light-dark(#b8005f, #ff7dbd);
    --color-accent-tint: light-dark(#fde7f2, #3a1028);

    /* Jaune : le surligneur. Toujours sous un texte d'encre. */
    --color-jaune: light-dark(#ffd400, #e5be00);
    --color-jaune-tint: light-dark(#fff6c7, #3a3208);

    /* Le trait d'encre du manga : bordures appuyees et ombre portee franche
       des elements qui s'enfoncent (bouton principal). */
    --trait: light-dark(#16161d, #050508);
    --ombre-encre: 0 3px 0 var(--trait);

    /* --- Semantique ----------------------------------------------------- */
    --color-ok: light-dark(oklch(0.525 0.130 152), oklch(0.735 0.135 152));
    --color-ok-tint: light-dark(oklch(0.955 0.032 152), oklch(0.285 0.048 152));
    --color-danger: light-dark(oklch(0.535 0.175 26), oklch(0.705 0.160 26));
    --color-danger-d: light-dark(oklch(0.465 0.180 26), oklch(0.765 0.150 26));
    --color-danger-tint: light-dark(oklch(0.955 0.030 26), oklch(0.305 0.060 26));
    --color-warn: light-dark(oklch(0.605 0.130 72), oklch(0.775 0.130 78));
    --color-warn-tint: light-dark(oklch(0.960 0.038 80), oklch(0.315 0.052 72));
    --color-info: light-dark(oklch(0.510 0.120 252), oklch(0.715 0.115 252));
    --color-info-tint: light-dark(oklch(0.955 0.028 252), oklch(0.295 0.055 252));

    /* --- Espacements ----------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;

    /* --- Rayons ---------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-rond: 999px;

    /* --- Ombres ---------------------------------------------------------
       En sombre une ombre noire ne se voit pas : l'elevation passe par un
       filet clair au-dessus de la surface. */
    --shadow-1: light-dark(
        0 1px 2px oklch(0.22 0.016 168 / 0.06), 0 1px 3px oklch(0.22 0.016 168 / 0.05),
        0 1px 2px oklch(0 0 0 / 0.4)
    );
    --shadow-2: light-dark(
        0 4px 12px oklch(0.22 0.016 168 / 0.08), 0 2px 4px oklch(0.22 0.016 168 / 0.05),
        0 4px 12px oklch(0 0 0 / 0.5)
    );
    --shadow-3: light-dark(
        0 12px 32px oklch(0.22 0.016 168 / 0.14),
        0 16px 40px oklch(0 0 0 / 0.6)
    );

    /* --- Typographie ----------------------------------------------------
       Inter pour lire et compter (chiffres tabulaires), M PLUS Rounded 1c,
       gothique japonaise arrondie, pour les titres. Dela Gothic One est
       reservee aux grandes affiches. Echelle FIXE en rem : le register produit
       se lit a DPI constant, un titre fluide qui retrecit dans un panneau est
       pire. */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-titre: 'M PLUS Rounded 1c', 'Inter', system-ui, sans-serif;
    --font-affiche: 'Dela Gothic One', 'M PLUS Rounded 1c', system-ui, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
    --font-size-display: 2rem;
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.125rem;
    --font-size-h3: 1rem;
    --font-size-body: 0.9375rem;
    --font-size-label: 0.8125rem;
    --font-size-small: 0.75rem;

    /* --- Mouvement ------------------------------------------------------
       150 a 250 ms : l'utilisateur est dans sa tache, il n'attend pas une
       choregraphie. Sortie exponentielle, sans rebond. */
    --sortie: cubic-bezier(0.22, 1, 0.36, 1);
    --duree-1: 120ms;
    --duree-2: 180ms;
    --duree-3: 260ms;

    /* --- Plans ----------------------------------------------------------
       Echelle nommee : plus un seul 999 pose au jugé. */
    --z-colle: 20;
    --z-nav: 40;
    --z-menu: 60;
    --z-voile: 80;
    --z-modale: 90;
    --z-toast: 100;

    /* Largeurs de gabarit */
    --largeur-nav: 250px;
    --largeur-contenu: 1400px;
}

:root[data-theme='clair'] { color-scheme: light; }
:root[data-theme='sombre'] { color-scheme: dark; }

/* ===========================================================================
   RESET
   =========================================================================== */

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

/* hidden doit gagner, meme contre un display: flex. Un panneau invisible qui
   garde sa surface avale tous les clics : deja vu, deja paye. */
[hidden] {
    display: none !important;
}

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* ===========================================================================
   TYPOGRAPHIE
   =========================================================================== */

h1, h2, h3, h4 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-titre);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--color-ink);
    text-wrap: balance;
}

h3, h4 { font-weight: 700; }

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-label); }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

/* Prose : la longueur de ligne compte encore, meme dans un outil. */
.prose { max-width: 68ch; text-wrap: pretty; }

small,
.petit {
    font-size: var(--font-size-small);
    color: var(--color-ink-3);
}

/* Chiffres alignes : montants, quantites, dates, numeros de TVA. */
.num,
.chiffres {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: 2px 5px;
    border: 1px solid var(--color-line-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    box-shadow: 0 1px 0 var(--color-line-2);
    font-size: var(--font-size-small);
    line-height: 1.3;
    text-align: center;
    color: var(--color-ink-2);
}

a {
    color: var(--color-brand);
    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--color-brand-d);
    text-decoration-color: currentColor;
}

/* ===========================================================================
   FOCUS
   Un seul anneau, partout, visible sur toutes les surfaces y compris la nav.
   =========================================================================== */

:focus-visible {
    outline: 2px solid var(--color-brand-l);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.nav :focus-visible,
[data-surface='nav'] :focus-visible {
    outline-color: var(--nav-ink);
}

/* ===========================================================================
   CHAMPS — sur les ELEMENTS, pas sur des classes d'ecran
   =========================================================================== */

input,
select,
textarea,
button {
    font: inherit;
    color: inherit;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='submit']):not([type='button']),
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--color-line-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    transition: border-color var(--duree-1) var(--sortie),
                box-shadow var(--duree-1) var(--sortie),
                background-color var(--duree-1) var(--sortie);
}

textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}

/* Le placeholder doit rester lisible : 4.5:1 comme le corps de texte, pas le
   gris pale par defaut. */
::placeholder {
    color: var(--color-ink-3);
    opacity: 1;
}

input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: color-mix(in oklab, var(--color-brand) 35%, var(--color-line-2));
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-brand) 22%, transparent);
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly] {
    background: var(--color-surface-2);
    color: var(--color-ink-3);
    cursor: not-allowed;
}

/* Etats de validation. Jamais la couleur seule : le champ en erreur porte
   aussi son message, rendu par le theme de formulaire. */
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'],
.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea {
    border-color: var(--color-danger);
    background: var(--color-danger-tint);
}

input[aria-invalid='false']:not(:placeholder-shown) {
    border-color: color-mix(in oklab, var(--color-ok) 55%, var(--color-line-2));
}

/* Le chevron du select, dessine plutot que laisse au systeme : c'est lui qui
   trahissait le formulaire brut au milieu d'un ecran soigne. */
select {
    appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

select[multiple] {
    background-image: none;
    padding-right: 12px;
    min-height: 120px;
}

/* Cases et boutons radio : la cible tactile passe avant la coquetterie. */
input[type='checkbox'],
input[type='radio'] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

input[type='range'] {
    width: 100%;
    accent-color: var(--color-brand);
}

input[type='color'] {
    width: 44px;
    min-height: 42px;
    padding: 3px;
    cursor: pointer;
}

input[type='file'] {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--color-line-2);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    cursor: pointer;
}

input[type='file']::file-selector-button {
    margin-right: var(--space-3);
    padding: 7px 14px;
    border: 1px solid var(--color-line-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 550;
    cursor: pointer;
}

label {
    display: inline-block;
    font-size: var(--font-size-label);
    font-weight: 550;
    color: var(--color-ink-2);
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
    font-size: var(--font-size-h3);
    font-weight: 650;
    color: var(--color-ink);
}

/* ===========================================================================
   BOUTONS
   Les elements button et input[type=submit] nus prennent l'aspect secondaire :
   un bouton oublie dans un gabarit ressemble desormais au systeme.
   =========================================================================== */

button,
input[type='submit'],
input[type='button'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-line-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--font-size-body);
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duree-1) var(--sortie),
                border-color var(--duree-1) var(--sortie),
                color var(--duree-1) var(--sortie),
                transform var(--duree-1) var(--sortie);
}

button:hover:not(:disabled),
input[type='submit']:hover:not(:disabled) {
    background: var(--color-surface-2);
    border-color: var(--color-line-2);
}

button:active:not(:disabled) {
    transform: translateY(1px);
}

button:disabled,
input[type='submit']:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Un bouton sans habillage : les declencheurs de menu, les fermetures. */
button.nu {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    font-weight: inherit;
}

button.nu:hover:not(:disabled) {
    background: none;
    color: var(--color-brand);
}

/* ===========================================================================
   TABLEAUX
   =========================================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body);
}

th {
    padding: 10px var(--space-3);
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink-3);
    font-size: var(--font-size-label);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

td {
    padding: 12px var(--space-3);
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: 0;
}

/* ===========================================================================
   DIVERS
   =========================================================================== */

hr {
    height: 1px;
    margin: var(--space-4) 0;
    border: 0;
    background: var(--color-line);
}

::selection {
    background: color-mix(in oklab, var(--color-brand) 25%, transparent);
}

/* Les barres de defilement internes : discretes, mais pas reinventees. */
* {
    scrollbar-color: var(--color-line-2) transparent;
    scrollbar-width: thin;
}

/* ===========================================================================
   MOUVEMENT REDUIT
   Une preference systeme, pas une option : on coupe le deplacement, on garde
   le changement d'etat pour que l'interface reste lisible.
   =========================================================================== */

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