/* Majordome : jetons, thèmes et composants communs. Les classes commencent par « mj- ». */

:root {
	--fond: #FFF7E9;
	--surface: #FFFDF8;
	--surface-2: #F7ECD9;
	--encre: #2A1218;
	--encre-2: #6A565A;
	--filet: #E6D7BF;
	--primaire: #621127;
	--primaire-encre: #FFF7E9;
	--primaire-doux: #F3DDE0;
	--rose: #9B4153;
	--olive: #878962;
	--olive-doux: #ECECDD;
	--ok: #2F6B45;
	--ok-doux: #DDEBDD;
	--alerte: #9A5B00;
	--alerte-doux: #F8E7C4;
	--danger: #A8201A;
	--danger-doux: #F7DAD6;
	--nav-fond: #3B0A17;
	--nav-encre: #F4E3D3;
	--rayon: 6px;
	--police: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
	--police-titre: "Young Serif", Georgia, "Times New Roman", serif;
	--ombre: 0 8px 28px rgba(42, 18, 24, .16);
	color-scheme: light;
}
[data-theme="sable"] {
	--fond: #F3EBDD; --surface: #FBF6EC; --surface-2: #EADFCB; --filet: #D8C9AE; --nav-fond: #4A4B34; --primaire: #5A5C3A; --primaire-doux: #E4E5D0; --rose: #878962;
}
[data-theme="sombre"] {
	--fond: #1A1113; --surface: #251A1D; --surface-2: #312327; --encre: #F6EBDD; --encre-2: #BBA9A6; --filet: #43323A;
	--primaire: #E39AA8; --primaire-encre: #2A1218; --primaire-doux: #4A2530; --rose: #D98A9A; --olive: #B9BB8E; --olive-doux: #33341F;
	--ok: #8BCB9C; --ok-doux: #1F3526; --alerte: #F0BE62; --alerte-doux: #40300F; --danger: #FF9C92; --danger-doux: #4A1D19;
	--nav-fond: #120B0D; --nav-encre: #E9DACB; --ombre: 0 8px 28px rgba(0, 0, 0, .5);
	color-scheme: dark;
}
[data-theme="bordeaux"] {
	--fond: #2E0914; --surface: #3D0F1C; --surface-2: #4C1626; --encre: #FFF1E0; --encre-2: #DDBDB8; --filet: #6A2A3A;
	--primaire: #FFD9A8; --primaire-encre: #2E0914; --primaire-doux: #5C2030; --rose: #F0A9B5; --olive: #C9CB9C; --olive-doux: #46402A;
	--ok: #9BD9AC; --ok-doux: #24402F; --alerte: #FFCB6B; --alerte-doux: #55400F; --danger: #FFA9A0; --danger-doux: #5E1F1B;
	--nav-fond: #1F050D; --nav-encre: #F4E3D3; --ombre: 0 8px 28px rgba(0, 0, 0, .5);
	color-scheme: dark;
}
[data-theme="ardoise"] {
	--fond: #14191D; --surface: #1D252B; --surface-2: #28323A; --encre: #EAF0F2; --encre-2: #A7B4BB; --filet: #36434C;
	--primaire: #F2B5A0; --primaire-encre: #14191D; --primaire-doux: #3A2F2C; --rose: #E79CA9; --olive: #B6C29A; --olive-doux: #2B3326;
	--ok: #8AD0A5; --ok-doux: #1D382A; --alerte: #F2C36B; --alerte-doux: #413312; --danger: #FF9E94; --danger-doux: #4A211E;
	--nav-fond: #0D1114; --nav-encre: #DCE5E8; --ombre: 0 8px 28px rgba(0, 0, 0, .5);
	color-scheme: dark;
}
[data-theme="contraste"] {
	--fond: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0F0F0; --encre: #000000; --encre-2: #2B2B2B; --filet: #000000;
	--primaire: #4A0018; --primaire-doux: #FFE3EA; --nav-fond: #000000; --nav-encre: #FFFFFF; --ok: #0B5A2A; --alerte: #7A4300; --danger: #A30000;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 1rem/1.5 var(--police); }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--primaire); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.mj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mj-saut { position: absolute; left: -999px; top: 0; background: var(--primaire); color: var(--primaire-encre); padding: .6em 1em; z-index: 100; }
.mj-saut:focus { left: 0; }
.mj-icone { flex: none; vertical-align: -.2em; }
.mj-discret { color: var(--encre-2); }
.mj-petit { font-size: .875rem; }
.mj-droite { text-align: right; }
.mj-nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Boutons */
.mj-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: .5em 1.1em; border: 1.5px solid var(--primaire); border-radius: var(--rayon); background: var(--primaire); color: var(--primaire-encre); font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; }
.mj-btn:hover { filter: brightness(1.12); }
.mj-btn:disabled, .mj-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.mj-btn.secondaire { background: transparent; color: var(--primaire); }
.mj-btn.discret { background: var(--surface-2); border-color: var(--filet); color: var(--encre); }
.mj-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
[data-theme="sombre"] .mj-btn.danger, [data-theme="bordeaux"] .mj-btn.danger, [data-theme="ardoise"] .mj-btn.danger { color: #1a0d0d; }
.mj-btn.petit { min-height: 34px; padding: .25em .7em; font-size: .9rem; }
.mj-btn.gros { min-height: 60px; font-size: 1.15rem; padding: .6em 1.4em; }
.mj-btn.bloc { display: flex; width: 100%; }
.mj-btn-icone { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--rayon); background: transparent; color: inherit; cursor: pointer; position: relative; text-decoration: none; }
.mj-btn-icone:hover { background: var(--surface-2); }
.mj-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.mj-actions.fin { justify-content: flex-end; }

/* Cartes, grilles, sections */
.mj-carte { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.1rem 1.2rem; }
.mj-carte > h2:first-child, .mj-carte > h3:first-child { margin-top: 0; }
.mj-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.mj-grille.deux { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.mj-grille.serree { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .7rem; }
.mj-large { grid-column: 1 / -1; }
.mj-section { margin: 0 0 2rem; }
.mj-section > h2 { border-bottom: 2px solid var(--encre); padding-bottom: .3em; margin-bottom: 1rem; }
.mj-pile > * + * { margin-top: 1rem; }
.mj-ligne { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.mj-ligne.entre { justify-content: space-between; }

/* Chiffre-clé */
.mj-chiffre { background: var(--surface); border: 1px solid var(--filet); border-left: 5px solid var(--primaire); border-radius: var(--rayon); padding: .8rem 1rem; }
.mj-chiffre .libelle { color: var(--encre-2); font-size: .9rem; margin: 0; }
.mj-chiffre .valeur { font: 400 1.7rem/1.15 var(--police-titre); margin: .15em 0 0; font-variant-numeric: tabular-nums; }
.mj-chiffre .ecart { font-size: .85rem; margin: .2em 0 0; color: var(--encre-2); }
.mj-chiffre .ecart.plus { color: var(--ok); } .mj-chiffre .ecart.moins { color: var(--danger); }

/* Pastilles */
.mj-pastille { display: inline-flex; align-items: center; gap: .3em; padding: .1em .6em; border-radius: 99px; background: var(--surface-2); color: var(--encre); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.mj-pastille.ok { background: var(--ok-doux); color: var(--ok); }
.mj-pastille.alerte { background: var(--alerte-doux); color: var(--alerte); }
.mj-pastille.danger { background: var(--danger-doux); color: var(--danger); }
.mj-pastille.primaire { background: var(--primaire-doux); color: var(--primaire); }

/* Formulaires */
.mj-champ { display: block; margin: 0 0 1rem; }
.mj-champ > span, .mj-champ > label, .mj-etiquette { display: flex; align-items: center; gap: .4em; font-weight: 600; margin: 0 0 .3em; }
.mj-champ small, .mj-description { display: block; color: var(--encre-2); font-size: .875rem; margin-top: .3em; font-weight: 400; }
.mj-champ input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), .mj-champ select, .mj-champ textarea, .mj-entree {
	width: 100%; min-height: 44px; padding: .5em .7em; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--surface); color: var(--encre);
}
.mj-champ textarea { min-height: 96px; resize: vertical; }
.mj-champ input:focus, .mj-champ select:focus, .mj-champ textarea:focus, .mj-entree:focus { border-color: var(--primaire); outline: 2px solid var(--primaire-doux); }
.mj-champs { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mj-case { display: flex; align-items: flex-start; gap: .6em; margin: 0 0 .6rem; cursor: pointer; }
.mj-case input { width: 22px; height: 22px; margin: .1em 0 0; accent-color: var(--primaire); flex: none; }
.mj-interrupteur { display: flex; align-items: flex-start; gap: .8em; margin: 0 0 1rem; cursor: pointer; }
.mj-interrupteur input { appearance: none; flex: none; width: 48px; height: 28px; border-radius: 99px; background: var(--filet); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.mj-interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.mj-interrupteur input:checked { background: var(--ok); }
.mj-interrupteur input:checked::after { transform: translateX(20px); }
.mj-interrupteur b { display: block; font-weight: 600; }
.mj-choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.mj-choix label { cursor: pointer; }
.mj-choix input { position: absolute; opacity: 0; }
.mj-choix span { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .4em 1em; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--surface); }
.mj-choix input:checked + span { border-color: var(--primaire); background: var(--primaire-doux); color: var(--primaire); font-weight: 600; }
.mj-choix input:focus-visible + span { outline: 3px solid var(--rose); outline-offset: 2px; }
.mj-aide { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--encre-2); background: transparent; color: var(--encre-2); font-size: .8rem; font-weight: 700; cursor: help; padding: 0; flex: none; }
.mj-bulle { position: absolute; z-index: 60; max-width: min(320px, 90vw); background: var(--encre); color: var(--fond); padding: .7em .9em; border-radius: var(--rayon); font-size: .9rem; box-shadow: var(--ombre); }

/* Tableaux */
.mj-table-cadre { overflow-x: auto; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--surface); }
.mj-table { width: 100%; border-collapse: collapse; }
.mj-table th { text-align: left; font-weight: 600; font-size: .875rem; color: var(--encre-2); padding: .6em .8em; border-bottom: 2px solid var(--filet); white-space: nowrap; }
.mj-table td { padding: .6em .8em; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.mj-table tr:last-child td { border-bottom: 0; }
.mj-table tbody tr:hover { background: var(--surface-2); }
.mj-table .num, .mj-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mj-table tfoot td { font-weight: 700; border-top: 2px solid var(--filet); }
@media (max-width: 640px) {
	.mj-table.empile thead { display: none; }
	.mj-table.empile tr { display: block; padding: .5em .8em; border-bottom: 1px solid var(--filet); }
	.mj-table.empile td { display: flex; justify-content: space-between; gap: 1em; padding: .2em 0; border: 0; text-align: right; }
	.mj-table.empile td::before { content: attr(data-libelle); color: var(--encre-2); text-align: left; }
}

/* Listes d'éléments */
.mj-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--surface); }
.mj-liste > li { display: flex; align-items: center; gap: .8rem; padding: .7em .9em; border-bottom: 1px solid var(--filet); }
.mj-liste > li:last-child { border-bottom: 0; }
.mj-liste .grand { flex: 1; min-width: 0; }
.mj-poignee { cursor: grab; color: var(--encre-2); touch-action: none; }
.mj-glisse { opacity: .5; }

/* Onglets */
.mj-onglets { display: flex; gap: .2rem; overflow-x: auto; border-bottom: 2px solid var(--filet); margin: 0 0 1.2rem; padding: 0 1rem; }
.mj-onglets a, .mj-onglets button { flex: none; padding: .7em 1em; border: 0; background: none; color: var(--encre-2); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.mj-onglets .actif { color: var(--primaire); border-bottom-color: var(--primaire); }
.mj-page .mj-onglets { padding: 0; }

/* État vide, bandeau, messages */
.mj-vide { text-align: center; padding: 2.5rem 1rem; color: var(--encre-2); }
.mj-vide h1, .mj-vide h2 { color: var(--encre); }
.mj-bandeau { margin: 0; padding: .5em 1rem; background: var(--olive-doux); color: var(--encre); font-size: .9rem; border-bottom: 1px solid var(--filet); }
.mj-message { padding: .8em 1em; border-radius: var(--rayon); border-left: 5px solid var(--olive); background: var(--olive-doux); margin: 0 0 1rem; }
.mj-message.alerte { border-color: var(--alerte); background: var(--alerte-doux); }
.mj-message.danger { border-color: var(--danger); background: var(--danger-doux); }
.mj-message.ok { border-color: var(--ok); background: var(--ok-doux); }

/* Modale, toast */
.mj-voile { position: fixed; inset: 0; background: rgba(20, 8, 12, .55); display: grid; place-items: center; z-index: 80; padding: 1rem; }
.mj-modale { background: var(--surface); color: var(--encre); border-radius: 10px; box-shadow: var(--ombre); width: min(560px, 100%); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; }
.mj-modale.large { width: min(900px, 100%); }
.mj-modale-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem .6rem; }
.mj-modale-tete h2 { margin: 0; }
.mj-modale-corps { padding: .4rem 1.2rem 1rem; overflow-y: auto; }
.mj-modale-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding: .8rem 1.2rem 1.1rem; border-top: 1px solid var(--filet); }
.mj-toasts { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 90; display: grid; gap: .5rem; width: min(480px, calc(100vw - 2rem)); pointer-events: none; }
.mj-toast { background: var(--encre); color: var(--fond); padding: .8em 1.1em; border-radius: var(--rayon); box-shadow: var(--ombre); border-left: 6px solid var(--ok); }
.mj-toast.erreur { border-left-color: var(--danger); }
.mj-toast.alerte { border-left-color: var(--alerte); }

/* Carte centrée (connexion) */
.mj-simple { display: grid; place-items: center; min-height: 100dvh; padding: 1.2rem; }
.mj-simple-carte { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--filet); border-radius: 10px; padding: 1.8rem 1.6rem; }
.mj-simple-logo { display: block; margin: 0 0 1.4rem; }
.mj-pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 300px; margin: 1rem auto; }
.mj-pave button { min-height: 64px; font-size: 1.5rem; border: 1.5px solid var(--filet); border-radius: var(--rayon); background: var(--surface); cursor: pointer; }
.mj-pave button:active { background: var(--primaire-doux); }
.mj-nip { display: flex; justify-content: center; gap: .7rem; margin: 1rem 0; }
.mj-nip i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--primaire); }
.mj-nip i.plein { background: var(--primaire); }

/* Tableau de bord */
.mj-gestion { display: grid; grid-template-columns: 250px 1fr; min-height: 100dvh; }
.mj-nav { background: var(--nav-fond); color: var(--nav-encre); padding: 1.1rem .8rem 2rem; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.mj-nav-logo { display: block; padding: 0 .5rem; }
.mj-nav-commerce { margin: .4rem .5rem 1.2rem; font-size: .9rem; opacity: .8; }
.mj-nav-titre { margin: 1.1rem .5rem .3rem; font-size: .8rem; opacity: .65; font-weight: 600; }
.mj-nav nav a { display: flex; align-items: center; gap: .7em; padding: .5em .6em; border-radius: var(--rayon); color: inherit; text-decoration: none; }
.mj-nav nav a:hover { background: rgba(255, 255, 255, .09); }
.mj-nav nav a.actif { background: var(--nav-encre); color: var(--nav-fond); font-weight: 600; }
.mj-corps { min-width: 0; display: flex; flex-direction: column; }
.mj-entete { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border-bottom: 1px solid var(--filet); background: var(--fond); position: sticky; top: 0; z-index: 30; }
.mj-entete-titre { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mj-entete-titre h1 { margin: 0; font-size: 1.45rem; }
.mj-entete-titre p { margin: 0; color: var(--encre-2); width: 100%; font-size: .9rem; }
.mj-entete-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.mj-retour { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--filet); }
.mj-nav-bouton { display: none; }
.mj-cloche b { position: absolute; top: 4px; right: 2px; min-width: 18px; padding: 0 4px; border-radius: 99px; background: var(--danger); color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }
.mj-moi { position: relative; }
.mj-moi summary { list-style: none; display: flex; align-items: center; gap: .3em; min-height: 44px; padding: 0 .6em; border-radius: var(--rayon); cursor: pointer; font-weight: 600; }
.mj-moi summary::-webkit-details-marker { display: none; }
.mj-moi-menu { position: absolute; right: 0; top: 100%; min-width: 220px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: var(--ombre); padding: .4rem; z-index: 40; }
.mj-moi-menu a, .mj-moi-menu button { display: flex; align-items: center; gap: .6em; width: 100%; padding: .6em .7em; border: 0; background: none; color: var(--encre); text-decoration: none; text-align: left; cursor: pointer; border-radius: 4px; }
.mj-moi-menu a:hover, .mj-moi-menu button:hover { background: var(--surface-2); }
.mj-moi-menu form { margin: 0; }
.mj-page { padding: 1.4rem; max-width: 1500px; width: 100%; }
@media (max-width: 900px) {
	.mj-gestion { grid-template-columns: 1fr; }
	.mj-nav { position: fixed; z-index: 70; width: min(290px, 86vw); transform: translateX(-100%); transition: transform .2s; }
	.mj-nav.ouvert { transform: none; box-shadow: var(--ombre); }
	.mj-nav-bouton { display: inline-grid; }
	.mj-entete { padding: .5rem .7rem; }
	.mj-entete-titre h1 { font-size: 1.15rem; }
	.mj-page { padding: 1rem .8rem 4rem; }
	.mj-moi summary { font-size: 0; gap: 0; } .mj-moi summary .mj-icone { width: 22px; height: 22px; }
}

/* Espace employé */
.mj-employe { padding-bottom: 76px; }
.mj-emp-entete { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; border-bottom: 1px solid var(--filet); }
.mj-emp-entete span { flex: 1; text-align: right; font-weight: 600; }
.mj-emp-entete form { margin: 0; }
.mj-emp-page { padding: 1rem; max-width: 820px; margin: 0 auto; }
.mj-emp-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--nav-fond); padding-bottom: env(safe-area-inset-bottom); z-index: 30; overflow-x: auto; }
.mj-emp-nav a { flex: 1; min-width: 72px; display: grid; justify-items: center; gap: .15rem; padding: .55rem .3rem; color: var(--nav-encre); text-decoration: none; font-size: .75rem; opacity: .75; }
.mj-emp-nav a.actif { opacity: 1; font-weight: 700; box-shadow: inset 0 3px 0 var(--nav-encre); }

/* Écran entier */
.mj-plein { min-height: 100dvh; }

/* Recadrage */
.mj-recadre { position: relative; touch-action: none; user-select: none; background: #111; overflow: hidden; max-height: 60dvh; }
.mj-recadre img { display: block; max-width: 100%; max-height: 60dvh; margin: 0 auto; }
.mj-recadre-cadre { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; }
.mj-recadre-cadre i { position: absolute; right: -9px; bottom: -9px; width: 22px; height: 22px; background: #fff; border-radius: 50%; cursor: nwse-resize; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
	.mj-nav, .mj-entete, .mj-onglets, .mj-bandeau, .mj-emp-nav, .mj-toasts, .mj-actions { display: none !important; }
	.mj-gestion { display: block; } body { background: #fff; }
}