/* ════════════════════════════════════════════════════════════════════════
   kairo.css — Système de design du produit (MISSION-KAIRO-1, K1)
   Règles et contrastes : docs/design/kairo/SYSTEME.md ; planche : docs/design/kairo/PLANCHE.html.

   SEULEMENT pour ce que voit le personnel (caisse, tablette, cuisine, comptoir,
   back-office, raccourci téléphone, Hygiène). Tout ce que voit le client
   (vitrine, portail, réservation, ticket, e-mails, écran client) garde la
   couche « thème du restaurant » (--r-* de systeme.css) et ne charge jamais
   cette feuille.

   Identité « Pêche & encre de nuit » (MISSION-IDENTITE-PECHE-1, I1 : palette 5
   de docs/design/themes/, choisie par Christian le 20/10/2026). UN seul thème
   du produit : sombre le soir (service), clair au bureau. Plus aucun pixel.

   Trois couches :
     --k-noir … --k-ambre  palette de référence (les seules couleurs écrites
                           en dur, ici et nulle part ailleurs) ;
     [data-kairo="…"]      les thèmes « service » (sombre) et « bureau » (clair,
                           avec un mode sombre) : des variables de SENS (texte,
                           action, succès, attention, erreur, neutre), séparées
                           de la marque ;
     .k-*                  les composants (bouton, étiquette d'état, cadre,
                           écran de veille, barre de chargement).

   Polices auto-hébergées, licence SIL OFL (OFL.txt à côté de chaque fichier) :
   Barlow Semi Condensed 600 et 700 (titres), Atkinson Hyperlegible Next (toute
   l'interface, chiffres tabulaires).
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
/* Barlow Semi Condensed : les titres (seules les graisses 600 et 700 sont dans le dépôt) */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-semi-condensed/barlow-semi-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-semi-condensed/barlow-semi-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-semi-condensed/barlow-semi-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-semi-condensed/barlow-semi-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

/* ── Palette de référence ───────────────────────────────────────────────
   MISSION-IDENTITE-PECHE-1, I1 : « Pêche & encre de nuit ». La pêche est la
   marque (pâle, rosée : sur le sombre) ; l'encre de nuit est sa moitié (la
   marque sur le clair, les boutons du bureau). L'ambre est réservé aux
   alertes, assombri pour ne jamais se confondre avec la pêche (SYSTEME.md).
   Les anciens noms (charbon, vert, crème, orange) n'existent plus (I2).     */
:root {
  --k-noir: #0E0E13;       /* IMPRESSION seulement (logo noir, ticket) */
  --k-nuit: #1D1F2C;       /* le fond du soir (couleur du navigateur, manifestes) */
  --k-peche: #FBC5BA;      /* « la pêche » : la marque */
  --k-encre: #353344;      /* « encre de nuit » : la marque sur le clair */
  --k-clair: #FBEBE3;      /* le fond clair (bureau) */
  --k-ambre: #CFA557;      /* ALERTES uniquement */

  --k-police-titre: 'Barlow Semi Condensed', 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
  --k-titre-reglage: normal;
  --k-police: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k-chiffres: tabular-nums lining-nums;
  /* N3 (MISSION-NUIT-KAIRO-2) : l'ÉCHELLE D'ESPACEMENT unique, la même que systeme.css (que le back-office ne charge pas) :
     toute page du personnel l'a, et un écart de 8 px (--e-2) sépare deux cibles */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
}

/* ── Thème « service » : le soir, « nuit » (caisse, tablette, cuisine, comptoir, veille)
   Fond bleu-violet profond, cartes un ton au-dessus, texte crème rosée
   (13,0:1 : confortable, sans halo) ; boutons et sélection en pêche à texte
   foncé. Les états se distinguent aussi par la CLARTÉ (prêt bleu d'eau, alerte
   ambre, erreur framboise foncée à texte clair) : lisibles en deutéranopie,
   protanopie et tritanopie (tests/kairo, SYSTEME.md).                       */
[data-kairo="service"],
[data-kairo="bureau"][data-mode="sombre"] {
  --k-fond: #1D1F2C;
  --k-surface: #262735;
  --k-surface-2: #303140;
  --k-trait: #404150;          /* décor seulement */
  --k-trait-fort: #8A8A98;     /* contours utiles (≥ 3:1) */
  --k-texte: #F0E3DB;
  --k-texte-2: #CBBFB7;
  --k-accent: #F5CFC2;         /* texte d'accent, liens */
  --k-action: #FBC5BA;         /* bouton principal : aplat pêche, texte foncé */
  --k-sur-action: #1A1B23;
  --k-vif: #FBC5BA;            /* aplat de sélection */
  --k-sur-vif: #1A1B23;
  --k-succes: #7FD6C5;         /* prêt, fait (toujours avec une coche et un mot) */
  --k-succes-aplat: #62B9BB;
  --k-sur-succes: #1A1B23;
  --k-attention: #F6CB83;      /* retard, à voir (toujours avec une icône et un mot) */
  --k-attention-aplat: #CFA557;
  --k-sur-attention: #231A11;
  --k-erreur: #FAAFC1;         /* erreur, annulé : rose ; en aplat, une framboise FONCÉE à texte clair */
  --k-erreur-aplat: #8B294A;
  --k-sur-erreur: #F7EFE9;
  --k-neutre-aplat: #EEE0D0;   /* addition, en attente */
  --k-sur-neutre: #1D1F2C;
  --k-focus: #F5CFC2;
  --k-ombre-teinte: 13 13 23;
  --k-voile-teinte: 29 31 44;  /* voiles et hachures du plan */
  --k-texte-teinte: 240 227 219;
  color-scheme: dark;
}

/* ── Thème « bureau » : clair « pêche pâle » (back-office, raccourci téléphone) ─
   Boutons en encre de nuit à texte pêche ; sélection en pêche à texte foncé ;
   le texte d'état est foncé (vert d'eau, brun, framboise), les aplats clairs.
   C'est le thème PAR DÉFAUT de toute page qui charge cette feuille (:root) :
   une page du personnel sans attribut (connexion, diagnostics, refus d'accès)
   reste lisible ; le service le remplace sur son <body>.                    */
:root,
[data-kairo="bureau"] {
  --k-fond: #FBEBE3;
  --k-surface: #FFFAF7;
  --k-surface-2: #EFDCD3;
  --k-trait: #DDCBC3;
  --k-trait-fort: #80756F;
  --k-texte: #25252E;
  --k-texte-2: #585962;
  --k-accent: #3C394B;
  --k-action: #353344;
  --k-sur-action: #FFE2D4;
  --k-vif: #FBC5BA;
  --k-sur-vif: #25252E;
  --k-succes: #006B59;
  --k-succes-aplat: #60BCDA;
  --k-sur-succes: #25252E;
  --k-attention: #855314;
  --k-attention-aplat: #D7A645;
  --k-sur-attention: #2D241B;
  --k-erreur: #9A2851;
  --k-erreur-aplat: #9A2851;
  --k-sur-erreur: #FCF9F6;
  --k-neutre-aplat: #A09791;
  --k-sur-neutre: #1E1F27;
  --k-focus: #3C394B;
  --k-ombre-teinte: 99 62 45;
  --k-voile-teinte: 251 235 227;
  --k-texte-teinte: 37 37 46;
  color-scheme: light;
}

/* ── Formes (palette 5) : arrondis 10 / 16 / 24 px, ombres douces teintées.
   Cette feuille n'est jamais chargée chez le client (tests/kairo, partie 8) :
   les rayons de systeme.css restent ceux du restaurant (vitrine, portail).  */
:root,
[data-kairo] {
  --rayon-1: 10px;
  --rayon-2: 16px;
  --rayon-3: 24px;
  --rayon-rond: 999px;
  --ombre-teinte: var(--k-ombre-teinte);
  --ombre-1: 0 1px 2px rgb(var(--k-ombre-teinte) / .10), 0 2px 8px rgb(var(--k-ombre-teinte) / .06);
  --ombre-2: 0 4px 12px rgb(var(--k-ombre-teinte) / .10), 0 18px 40px rgb(var(--k-ombre-teinte) / .10);
}

/* ── Branchement sur les surfaces existantes (K2) ─────────────────────────
   Les feuilles des écrans ne lisent que les variables de systeme.css (--c-*,
   --etat-*, polices) : sous [data-kairo], elles prennent les valeurs du thème.
   Correspondances des états de service :
     prêt → succès (aplat vert) ; retard, alerte, allergie → attention (orange) ;
     erreur, annulé, danger → erreur (rouge) ; addition, en attente → neutre (crème) ;
     installée, en cuisine → calme (surface, sans couleur franche).              */
[data-kairo] {
  --police: var(--k-police);
  --police-titre: var(--k-police-titre);
  --c-fond: var(--k-fond);
  --c-surface: var(--k-surface);
  --c-surface-2: var(--k-surface-2);
  --c-texte: var(--k-texte);
  --c-texte-2: var(--k-texte-2);
  --c-trait: var(--k-trait);
  --c-trait-fort: var(--k-trait-fort);
  --c-action: var(--k-action);
  --c-sur-action: var(--k-sur-action);
  --c-marque: var(--k-accent);
  --c-marque-vive: var(--k-vif);
  --c-marque-gris: var(--k-texte-2);
  --c-focus: var(--k-focus);
  --c-barre: var(--k-surface);
  --c-sur-barre: var(--k-texte);
  --c-barre-actif: var(--k-vif);
  --c-sur-barre-actif: var(--k-sur-vif);
  --etat-libre-fond: var(--k-surface);
  --etat-libre-trait: var(--k-trait-fort);
  --etat-calme-fond: var(--k-surface-2);
  --etat-calme-trait: var(--k-trait-fort);
  --etat-calme-texte: var(--k-texte);
  --etat-installee: var(--k-texte-2);
  --etat-commandee: var(--k-texte-2);
  --etat-pret: var(--k-succes-aplat);
  --etat-pret-trait: var(--k-succes);
  --etat-retard: var(--k-attention-aplat);
  --etat-retard-halo: var(--k-attention);
  --etat-appel-cuisine: var(--k-attention-aplat); /* RK4 : la cuisine appelle (avec l'icône de la cuisine, en pointillés) */
  --etat-appel-cuisine-trait: var(--k-texte);
  --etat-erreur: var(--k-erreur-aplat);
  /* N3 : la couleur d'un état quand il est ÉCRIT (texte, icône, contour fin) : jamais l'aplat */
  --etat-erreur-texte: var(--k-erreur);
  --etat-retard-texte: var(--k-attention);
  --etat-pret-texte: var(--k-succes);
  --etat-addition: var(--k-neutre-aplat);
  /* K6 : la table RÉSERVÉE, une couleur à elle : le vert sombre de la palette, en aplat (aucun autre état ne l'a) */
  --etat-reservee-fond: var(--k-trait);
  --etat-reservee-trait: var(--k-texte);
  --etat-sur: var(--k-sur-attention);
  --etat-sur-erreur: var(--k-sur-erreur);
  --etat-sur-addition: var(--k-sur-neutre);
}
/* Le service est sombre : les murs du plan, les pastilles choisies, les points du code sont clairs */
[data-kairo="service"] {
  --c-mur: var(--k-texte);
  --c-decor-vegetal: var(--k-trait);   /* RK7 : plante du plan (le vert sombre du thème, jamais une couleur d'état) */
  --c-decor-pot: var(--k-texte-2);
  --c-sol: var(--k-surface);
  --c-joint: var(--k-trait);
  --c-dalle: var(--k-surface-2);
  --c-joint-dalle: var(--k-trait);
  --c-sur-mur: var(--k-fond);
  --hachure: rgb(var(--k-voile-teinte) / .28);
  --voile: rgb(var(--k-voile-teinte) / .7);
  --c-survol: rgb(var(--k-texte-teinte) / .08);
}

[data-kairo] {
  background: var(--k-fond);
  color: var(--k-texte);
  font-family: var(--k-police);
  font-variant-numeric: var(--k-chiffres);
}

/* ── Titres : Barlow Semi Condensed, seulement pour les grands titres ─────── */
.k-titre {
  font-family: var(--k-police-titre);
  font-variation-settings: var(--k-titre-reglage);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.05;
}
.k-chiffres { font-variant-numeric: var(--k-chiffres); }

/* « by C.O.D.E » : la police normale, en petit */
.k-signature { font-family: var(--k-police); color: var(--k-accent); font-size: var(--t-1, 13px); letter-spacing: 0.02em; white-space: nowrap; }

/* ── Boutons : icône Lucide + mot ──────────────────────────────────────── */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--cible, 48px); padding: 0 20px;
  border: 1.5px solid transparent; border-radius: var(--rayon-1);
  background: var(--k-action); color: var(--k-sur-action);
  font: 700 var(--t-3, 17px)/1 var(--k-police);
  cursor: pointer;
}
.k-btn svg { width: 22px; height: 22px; flex: none; }
.k-btn--contour { background: transparent; color: var(--k-texte); border-color: var(--k-trait-fort); }
.k-btn:focus-visible { outline: 3px solid var(--k-focus); outline-offset: 2px; }
.k-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Étiquettes d'état : couleur + icône + mot, jamais la couleur seule ──── */
.k-etiquette {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: var(--rayon-rond);
  font: 700 var(--t-2, 15px)/1 var(--k-police);
}
.k-etiquette svg { width: 18px; height: 18px; flex: none; }
.k-etiquette--succes { background: var(--k-succes-aplat); color: var(--k-sur-succes); }
.k-etiquette--neutre { background: var(--k-neutre-aplat); color: var(--k-sur-neutre); }
.k-etiquette--attention { background: var(--k-attention-aplat); color: var(--k-sur-attention); }
.k-etiquette--erreur { background: var(--k-erreur-aplat); color: var(--k-sur-erreur); }

/* ── Cadre : fin et arrondi, pour la veille et les en-têtes ; JAMAIS autour
   d'une zone de travail dense (cuisine, saisie, plan) ───────────────────── */
.k-cadre {
  position: relative;
  padding: 28px 32px;
  border: 1px solid var(--k-trait-fort);
  border-radius: var(--rayon-3);
}
.k-cadre::before {           /* le filet intérieur, à la couleur d'accent */
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid var(--k-accent); border-radius: calc(var(--rayon-3) - 6px);
}

/* ── Séparateur fin ─────────────────────────────────────────────────────── */
.k-filet { display: flex; align-items: center; gap: 10px; color: var(--k-accent); }
.k-filet::before, .k-filet::after { content: ''; flex: 1; height: 1px; background: var(--k-trait-fort); }
.k-filet > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Écran de veille et de chargement (planche 03) ──────────────────────── */
.k-veille {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 24px;
  background: var(--k-fond); color: var(--k-texte);
}
.k-veille .k-cadre { width: min(1100px, 100%); min-height: min(520px, 80vh); display: grid; place-items: center; align-content: center; gap: 28px; }
.k-veille .k-logo { width: min(520px, 70vw); height: auto; }

/* Barre de chargement : arrondie, remplissage à la couleur d'accent, mouvement continu */
.k-chargement {
  width: min(560px, 80vw); height: 12px; padding: 3px;
  border: 1px solid var(--k-trait-fort); border-radius: 999px; overflow: hidden;
}
.k-chargement > span { display: block; height: 100%; width: var(--k-avance, 0%); border-radius: 999px; background: var(--k-accent); transition: width var(--duree-etat, 160ms) ease-out; }
.k-chargement--indefini > span { width: 30%; animation: k-charge 1.6s ease-in-out infinite; }
@keyframes k-charge { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
  .k-chargement--indefini > span { animation: none; width: 100%; opacity: .6; }
}