/*
 * Styles du site : traduction à la main des classes Tailwind de l'ancien site (F-04, F-07, F-08).
 * Couleurs, tailles et ombres reprises à l'identique de Tailwind 4 (node_modules/tailwindcss/theme.css).
 */

/* Police Geist hébergée sur le site (D-6) : mêmes fichiers et mêmes plages que l'ancien site. */
@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(geist-latin-ext.woff2) format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(geist-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist Fallback";
    src: local(Arial);
    ascent-override: 95.94%;
    descent-override: 28.16%;
    line-gap-override: 0%;
    size-adjust: 104.76%;
}

:root {
    --stone-50: oklch(98.5% 0.001 106.423);
    --stone-100: oklch(97% 0.001 106.424);
    --stone-200: oklch(92.3% 0.003 48.717);
    --stone-300: oklch(86.9% 0.005 56.366);
    --stone-400: oklch(70.9% 0.01 56.259);
    --stone-500: oklch(55.3% 0.013 58.071);
    --stone-600: oklch(44.4% 0.011 73.639);
    --stone-700: oklch(37.4% 0.01 67.558);
    --stone-800: oklch(26.8% 0.007 34.298);
    --stone-900: oklch(21.6% 0.006 56.043);
    --rose-700: oklch(51.4% 0.222 16.935);
    --rose-800: oklch(45.5% 0.188 13.697);
    --amber-100: oklch(96.2% 0.059 95.617);
    --amber-600: oklch(66.6% 0.179 58.318);
    --amber-800: oklch(47.3% 0.137 46.201);
    --sky-100: oklch(95.1% 0.026 236.824);
    --sky-800: oklch(44.3% 0.11 240.79);
    --violet-100: oklch(94.3% 0.029 294.588);
    --violet-800: oklch(43.2% 0.232 292.759);
    --emerald-100: oklch(95% 0.052 163.051);
    --emerald-800: oklch(43.2% 0.095 166.913);
    --red-50: oklch(97.1% 0.013 17.38);
    --red-200: oklch(88.5% 0.062 18.334);
    --red-300: oklch(80.8% 0.114 19.571);
    --red-700: oklch(50.5% 0.213 27.518);
    --red-800: oklch(44.4% 0.177 26.899);
    --ombre-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base (équivalent du « preflight » de Tailwind, limité à ce qui sert). */
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}
html {
    height: 100%;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: Geist, "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #faf8f6;
    color: #1c1917;
}
a {
    color: inherit;
    text-decoration: inherit;
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: transparent;
    border-radius: 0;
}
button {
    cursor: pointer;
}
button:disabled {
    cursor: default;
}
h1, h2, h3 {
    font-size: inherit;
    font-weight: inherit;
}
table {
    border-collapse: collapse;
}
[hidden] {
    display: none !important;
}

/* Mise en page (F-04) : contenu centré, max-w-6xl, px-4 py-8. */
.contenu {
    flex: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* En-tête (F-02, F-03). */
.en-tete {
    border-bottom: 1px solid var(--stone-200);
    background: white;
}
.en-tete-haut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
}
.logo {
    font-size: 1.125rem;
    line-height: calc(1.75 / 1.125);
    font-weight: 600;
    color: var(--stone-900);
}
.en-tete-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.espaces {
    display: flex;
    border-radius: 0.5rem;
    background: var(--stone-100);
    padding: 0.25rem;
}
.espace {
    border-radius: 0.375rem;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    font-weight: 500;
    color: var(--stone-600);
    transition: color var(--transition), background-color var(--transition);
}
.espace:hover {
    color: var(--stone-900);
}
.espace.actif {
    color: white;
}
.espace.actif.patisserie { background: var(--rose-700); }
.espace.actif.labo { background: var(--amber-600); }
.espace.actif.admin { background: var(--stone-800); }
.deconnexion {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--stone-500);
}
.deconnexion:hover {
    color: var(--stone-900);
}
.onglets {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.onglet {
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--stone-500);
}
.onglet:hover {
    color: var(--stone-800);
}
.onglet.actif {
    border-color: var(--stone-900);
    font-weight: 500;
    color: var(--stone-900);
}

/* Composants communs (F-07). */
.titre-page {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.titre-page h1 {
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
    font-weight: 600;
    color: var(--stone-900);
}
.titre-page .sous-titre {
    margin-top: 0.25rem;
    color: var(--stone-500);
}
.titre-page .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.carte {
    border: 1px solid var(--stone-200);
    border-radius: 0.75rem;
    background: white;
    padding: 1.25rem;
    box-shadow: var(--ombre-sm);
}
.bouton {
    display: inline-block;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    font-weight: 500;
    text-align: center;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.bouton:disabled {
    cursor: not-allowed;
}
.bouton.primaire {
    background: var(--rose-700);
    color: white;
}
.bouton.primaire:hover:not(:disabled) {
    background: var(--rose-800);
}
.bouton.primaire:disabled {
    background: var(--stone-300);
}
.bouton.secondaire {
    border: 1px solid var(--stone-300);
    background: white;
    color: var(--stone-700);
}
.bouton.secondaire:hover:not(:disabled) {
    background: var(--stone-50);
}
.bouton.secondaire:disabled {
    color: var(--stone-400);
}
.bouton.danger {
    border: 1px solid var(--red-300);
    background: white;
    color: var(--red-700);
}
.bouton.danger:hover:not(:disabled) {
    background: var(--red-50);
}
.bouton.discret {
    color: var(--stone-600);
}
.bouton.discret:hover:not(:disabled) {
    background: var(--stone-100);
}
.bouton.large {
    width: 100%;
}
.badge {
    display: inline-block;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 500;
}
.badge.brouillon { background: var(--amber-100); color: var(--amber-800); }
.badge.envoyee { background: var(--sky-100); color: var(--sky-800); }
.badge.prise_en_compte { background: var(--violet-100); color: var(--violet-800); }
.badge.livree { background: var(--emerald-100); color: var(--emerald-800); }
.vide {
    border: 1px dashed var(--stone-300);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    color: var(--stone-500);
}
.chargement {
    padding: 4rem 0;
    text-align: center;
    color: var(--stone-500);
}
.erreur {
    margin-bottom: 1rem;
    border: 1px solid var(--red-200);
    border-radius: 0.5rem;
    background: var(--red-50);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--red-800);
}

/* Champs « en ligne » (F-08). */
.champ {
    border: 1px solid var(--stone-300);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}
.champ.nombre {
    width: 5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.champ:disabled {
    border-color: transparent;
    background: transparent;
}

/* Page de connexion (F-11). */
.connexion {
    max-width: 24rem;
    margin: 3rem auto 0;
}
.connexion h1 {
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
    font-weight: 600;
}
.connexion form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.connexion label {
    display: block;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
}
.connexion label span {
    color: var(--stone-600);
}
.connexion input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    border: 1px solid var(--stone-300);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}
.connexion .erreur {
    margin-bottom: 0;
    border: 0;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

/* Impression (F-04) : fond blanc, sans en-tête ni zones d'actions. */
@media print {
    body {
        background: white;
    }
    .en-tete, .titre-page .actions, .sans-impression {
        display: none !important;
    }
}