/* Kems Solution — composants de la charte « Marine » (identite/CHARTE.md), repris des maquettes validées.
   Aucune couleur n'est écrite ici : toutes viennent des jetons de identite/jetons.css.
   Téléphone : moins de 640 px de large. */

/* —— Base —— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: var(--taille-texte); line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* —— Logo et symbole : la version claire ou la version sombre, selon le mode —— */
.k-logo, .k-symbole { display: block; flex: none; }
.k-logo img, .k-symbole img { display: block; width: 100%; height: 100%; }
.k-logo .sombre, .k-symbole .sombre { display: none; }
:root[data-theme="dark"] .k-logo .clair, :root[data-theme="dark"] .k-symbole .clair { display: none; }
:root[data-theme="dark"] .k-logo .sombre, :root[data-theme="dark"] .k-symbole .sombre { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-logo .clair, :root:not([data-theme="light"]) .k-symbole .clair { display: none; }
  :root:not([data-theme="light"]) .k-logo .sombre, :root:not([data-theme="light"]) .k-symbole .sombre { display: block; }
}

/* —— Statuts : une couleur = un sens (charte, section 2) —— */
.s-ok { --sc: var(--ok); --sp: var(--ok-pale); }
.s-info { --sc: var(--info); --sp: var(--info-pale); }
.s-attente { --sc: var(--attente); --sp: var(--attente-pale); }
.s-danger { --sc: var(--danger); --sp: var(--danger-pale); }
.s-neutre { --sc: var(--neutre); --sp: var(--neutre-pale); }
.s-valide { --sc: var(--valide); --sp: var(--valide-pale); }
.voyant {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: var(--rayon-pastille); background: var(--sp); color: var(--sc);
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
}
.voyant i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* —— Champs (charte, section 6) —— */
.k-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.k-champ label { font-size: var(--taille-petit); font-weight: 600; color: var(--texte-2); }
.saisie {
  display: flex; align-items: center; gap: 8px; height: var(--hauteur-controle); padding: 0 4px 0 12px;
  border: 1px solid var(--champ); border-radius: var(--rayon-champ); background: var(--surface); color: var(--texte); min-width: 0;
}
.saisie:focus-within { border-color: var(--accent); box-shadow: var(--halo-focus); }
.saisie.erreur { border-color: var(--danger); }
.saisie input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: var(--taille-texte); }
.saisie input::placeholder { color: var(--texte-3); opacity: 1; }
.saisie input[type="password"] { letter-spacing: .18em; font-weight: 700; }
.saisie input::-ms-reveal, .saisie input::-ms-clear { display: none; }
.oeil { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--texte-2); cursor: pointer; }
.oeil:focus-visible { outline-offset: 1px; }

/* —— Boutons (charte, section 5) —— */
.k-bouton, .k-bouton-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--hauteur-controle); padding: 0 18px;
  border-radius: var(--rayon-bouton); font: 700 14px var(--police); white-space: nowrap; cursor: pointer;
}
.k-bouton { border: 0; background: var(--accent); color: var(--sur-accent); }
.k-bouton:hover { background: var(--accent-fort); }
.k-bouton:disabled { background: var(--surface-2); color: var(--texte-3); cursor: default; }
.k-bouton.large { width: 100%; font-size: 15px; }
.k-bouton-sec { border: 1px solid var(--champ); background: var(--surface); color: var(--texte); font-weight: 600; }
.k-lien { border: 0; background: none; padding: 4px 0; color: var(--accent-texte); font: 700 13px var(--police); cursor: pointer; }
.k-lien:hover { text-decoration: underline; }
.rond {
  position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--rayon-bouton); background: transparent; color: var(--texte-2); cursor: pointer;
}
.rond:hover { background: var(--surface-2); }
.rond b {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--rayon-pastille);
  background: var(--danger); color: var(--surface); font-size: 12px; line-height: 18px; font-weight: 800; text-align: center;
}
kbd {
  font: 700 12px/1 var(--police); padding: 5px 7px; border-radius: 6px; white-space: nowrap;
  background: var(--surface-2); color: var(--texte-2); border: 1px solid var(--bordure);
}

/* —— Message d'une seule phrase : ce qui ne va pas et quoi faire —— */
.message {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px;
  border-radius: var(--rayon-champ); background: var(--sp); color: var(--texte); font-size: 13.5px; font-weight: 600;
}
.message .ic { color: var(--sc); }

/* —— Carte —— */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); min-width: 0; }

/* ================================================================
   Écran de connexion (maquette 1) — aussi l'écran verrouillé
   ================================================================ */
.cnx { display: grid; grid-template-columns: 540px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--fond); }
.cnx .panneau {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px 48px 36px;
  background: var(--degrade); border-right: 1px solid var(--degrade-bord);
}
.cnx .panneau .k-logo { width: 207px; height: 40px; position: relative; }
.cnx .milieu { margin-top: auto; display: flex; flex-direction: column; gap: 12px; position: relative; }
.cnx .entreprise { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cnx .lieu { display: flex; align-items: center; gap: 10px; color: var(--texte-2); font-size: 16px; font-weight: 500; }
.cnx .synchro {
  margin-top: 20px; max-width: 390px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px;
  border-radius: var(--rayon-carte); background: var(--degrade-carte); border: 1px solid var(--degrade-bord);
}
.cnx .synchro p { color: var(--texte-2); font-size: 13.5px; }
.cnx .synchro p b { color: var(--texte); font-weight: 600; }
.cnx .panneau .pied { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; color: var(--texte-2); font-size: 13px; position: relative; }
.cnx .panneau .pied a, .cnx .pied-tel a { color: var(--accent-texte); font-weight: 700; }
.cnx .filigrane { position: absolute; right: -96px; bottom: -84px; width: 470px; height: 470px; fill: var(--texte); opacity: .05; pointer-events: none; }
.cnx .cote { display: flex; flex-direction: column; padding: 40px 48px 32px; min-width: 0; }
.cnx .entete-tel, .cnx .pied-tel { display: none; }
.cnx .formulaire { margin: auto; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.cnx .formulaire form { display: flex; flex-direction: column; gap: 18px; }
.cnx .t1 { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.cnx .moi { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 4px; }
.cnx .avatar { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-pale); color: var(--accent-texte); font-weight: 800; font-size: 22px; }
.cnx .moi .nom { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.cnx .centre { display: flex; justify-content: center; }
.cnx .infos { display: flex; flex-direction: column; gap: 8px; color: var(--texte-2); }
.cnx .infos b { color: var(--texte); font-weight: 700; }

/* L'écran verrouillé couvre l'application sans la détruire : la saisie en cours reste derrière lui. */
.verrou-ecran { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--fond); }

@media (max-width: 639.98px) {
  .cnx { grid-template-columns: minmax(0, 1fr); }
  .cnx .panneau { display: none; }
  .cnx .cote { padding: 16px 18px 20px; min-height: 100vh; min-height: 100dvh; background: var(--degrade); }
  .cnx .entete-tel { display: flex; align-items: center; gap: 10px; }
  .cnx .entete-tel .k-symbole { width: 40px; height: 40px; }
  .cnx .entete-tel div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .cnx .entete-tel b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cnx .entete-tel span { color: var(--texte-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cnx .entete-tel .voyant { margin-left: auto; height: 30px; padding: 0 10px; }
  .cnx .formulaire { margin: 44px 0 0; max-width: none; }
  .cnx .t1 { font-size: 24px; }
  .saisie input { font-size: var(--taille-champ-telephone); }
  .cnx .pied-tel { display: flex; justify-content: center; gap: 6px; margin-top: auto; padding-top: 28px; color: var(--texte-2); font-size: 12.5px; }
}

/* ================================================================
   Coquille : barre latérale, barre du haut, téléphone (maquettes 2, 3 et 4)
   ================================================================ */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.barre {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; padding: 22px 14px 18px;
  background: var(--degrade); border-right: 1px solid var(--degrade-bord); color: var(--barre-texte);
  /* Sur un écran de portable (768 px de haut), le menu complet dépasse : l'ascenseur reste discret. */
  scrollbar-width: thin; scrollbar-color: var(--degrade-bord) transparent;
}
/* Quand le menu dépasse la hauteur de l'écran, la barre défile au lieu d'écraser ses éléments. */
.barre > * { flex-shrink: 0; }
.barre .lien-logo { display: block; align-self: flex-start; border-radius: var(--rayon-champ); }
.barre .k-logo { width: 176px; height: 34px; margin: 0 8px 16px; }
.entreprise-menu {
  margin: 0 4px 12px; padding: 10px 12px; border-radius: var(--rayon-champ);
  background: var(--degrade-carte); border: 1px solid var(--degrade-bord); color: var(--texte); font-weight: 800; font-size: 13.5px; line-height: 1.3;
}
.barre .k-bouton { margin: 0 4px 8px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .groupe {
  margin: 12px 8px 4px; padding-top: 10px; border-top: 1px solid var(--degrade-bord);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--barre-titre);
}
.nav a { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: var(--rayon-champ); color: var(--barre-texte); font-weight: 500; }
.nav a:hover { background: var(--barre-survol); }
.nav a.actif { background: var(--barre-actif); color: var(--barre-actif-texte); font-weight: 700; box-shadow: var(--barre-actif-ombre); }
.nav .ic { width: 19px; height: 19px; }
.pdv {
  margin: auto 4px 0; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--rayon-champ);
  background: var(--degrade-carte); border: 1px solid var(--degrade-bord);
}
.pdv div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pdv b { color: var(--texte); font-weight: 700; }
.pdv span { font-size: 12.5px; color: var(--barre-titre); }
.pied-menu { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--degrade-bord); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pdv + .pied-menu { margin-top: 12px; padding-top: 12px; }
.pied-menu span { font-size: 13px; color: var(--barre-titre); }
.pied-menu button { border: 0; background: none; padding: 0; color: var(--barre-texte); font-weight: 600; cursor: pointer; }
.pied-menu button:hover { text-decoration: underline; }
.pied-menu .theme-tel { display: none; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.haut { display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--bordure); }
.recherche {
  flex: 0 1 460px; min-width: 0; display: flex; align-items: center; gap: 10px; height: var(--hauteur-controle); padding: 0 8px 0 14px;
  border: 1px solid var(--champ); border-radius: var(--rayon-champ); background: var(--surface); color: var(--texte-3); cursor: text;
}
.recherche:focus-within { border-color: var(--accent); box-shadow: var(--halo-focus); }
.recherche input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--texte); }
.recherche input::placeholder { color: var(--texte-3); opacity: 1; }
.recherche input::-webkit-search-cancel-button { display: none; }
.droite { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.contenu { flex: 1; padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.t1 { font-size: var(--taille-titre-ecran); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.entete p { margin-top: 4px; color: var(--texte-2); }

/* Les alertes, sous la cloche */
.alertes { position: relative; }
.alertes .liste-alertes {
  position: absolute; z-index: 20; top: 50px; right: 0; width: 300px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte);
}
.alertes .liste-alertes b { display: block; font-size: var(--taille-titre-carte); font-weight: 800; margin-bottom: 6px; }
.alertes .liste-alertes p { color: var(--texte-2); }

/* Le téléphone : barres du haut et du bas, menu en tiroir */
.barre-tel, .nav-bas, .tiroir-fond { display: none; }

@media (max-width: 639.98px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .haut { display: none; }
  .barre { display: none; }
  .barre-tel {
    display: flex; position: sticky; top: 0; z-index: 10; align-items: center; gap: 10px; padding: 10px 10px 10px 14px;
    background: var(--degrade-horizontal); border-bottom: 1px solid var(--degrade-bord);
  }
  .barre-tel .k-symbole { width: 32px; height: 32px; }
  .barre-tel b { flex: 1; min-width: 0; font-weight: 800; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barre-tel.pdv-tel .k-symbole { width: 30px; height: 30px; }
  .barre-tel.pdv-tel b { font-size: 17px; }
  .barre-tel .voyant { height: 30px; padding: 0 10px; }
  .barre-tel .rond { color: var(--barre-texte); }
  .contenu { padding: 16px 14px 24px; gap: 14px; }
  .t1 { font-size: 20px; }

  .avec-nav-bas .contenu { padding-bottom: 94px; }
  .nav-bas {
    display: flex; position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; justify-content: space-around; align-items: center;
    height: 70px; padding: 0 6px env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--bordure);
  }
  .nav-bas a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
    font-size: 12px; font-weight: 600; color: var(--texte-2);
  }
  .nav-bas a.actif { color: var(--accent-texte); font-weight: 800; }
  .nav-bas .creer {
    flex: 0 0 auto; width: 56px; height: 56px; min-height: 0; margin: -26px 6px 0; border-radius: 18px;
    display: grid; place-items: center; background: var(--accent); color: var(--sur-accent);
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  .nav-bas .creer .ic { width: 26px; height: 26px; stroke-width: 2.4; }

  /* Le menu complet s'ouvre en tiroir, sur le même fond que la barre latérale. */
  .tiroir-ouvert .barre {
    display: flex; position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto;
    box-shadow: var(--ombre-carte);
  }
  .tiroir-ouvert .tiroir-fond {
    display: block; position: fixed; z-index: 25; inset: 0; border: 0; padding: 0; background: var(--voile);
  }
  .barre .nav a { height: var(--hauteur-controle); }
  .pied-menu .theme-tel { display: block; }
  .pied-menu button { min-height: var(--hauteur-controle); }
}

/* —— Attente du premier affichage : rien qu'un fond calme —— */
.chargement { min-height: 100vh; background: var(--fond); }

/* —— Erreur et reconnexion de Blazor, en français —— */
#blazor-error-ui {
  display: none; position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; padding: 12px 16px;
  border-radius: var(--rayon-champ); background: var(--danger-pale); color: var(--texte); font-weight: 600; box-shadow: var(--ombre-carte);
}
#blazor-error-ui a { color: var(--accent-texte); font-weight: 700; margin-left: 8px; }
#components-reconnect-modal {
  border: 1px solid var(--bordure); border-radius: var(--rayon-carte); padding: 20px 22px; max-width: 420px;
  background: var(--surface); color: var(--texte); box-shadow: var(--ombre-carte);
}
#components-reconnect-modal::backdrop { background: color-mix(in srgb, var(--fond) 70%, transparent); }
#components-reconnect-modal p { margin: 0 0 14px; font-weight: 600; }
#components-reconnect-modal .etat { display: none; }
#components-reconnect-modal.components-reconnect-show .etat-reconnexion,
#components-reconnect-modal.components-reconnect-retrying .etat-reconnexion,
#components-reconnect-modal.components-reconnect-failed .etat-echec,
#components-reconnect-modal.components-reconnect-paused .etat-pause,
#components-reconnect-modal.components-reconnect-resume-failed .etat-echec { display: block; }

/* ================================================================
   Lot 2 : administration, catalogue, grille de prix, tiers, plateforme
   ================================================================ */

/* Voile des fenêtres et ombres, dérivés des jetons : l'encre marine en clair, le fond de nuit en
   sombre (maquette 12). */
:root {
  --voile: color-mix(in srgb, var(--texte) 32%, transparent);
  --ombre-fenetre: 0 24px 60px -20px color-mix(in srgb, var(--texte) 45%, transparent);
  --ombre-colonne: 10px 0 10px -10px color-mix(in srgb, var(--texte) 30%, transparent);
}
:root[data-theme="dark"] {
  --voile: color-mix(in srgb, var(--fond) 78%, transparent);
  --ombre-fenetre: 0 24px 60px -20px color-mix(in srgb, var(--fond) 95%, transparent);
  --ombre-colonne: 10px 0 10px -10px color-mix(in srgb, var(--fond) 95%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --voile: color-mix(in srgb, var(--fond) 78%, transparent);
    --ombre-fenetre: 0 24px 60px -20px color-mix(in srgb, var(--fond) 95%, transparent);
    --ombre-colonne: 10px 0 10px -10px color-mix(in srgb, var(--fond) 95%, transparent);
  }
}

/* —— Pastilles —— */
.etiquette {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--rayon-pastille);
  background: var(--sp); color: var(--sc); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.etiquette.petite { height: 24px; padding: 0 9px; }
.statut {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--rayon-pastille);
  background: var(--sp); color: var(--sc); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* —— Boutons complémentaires —— */
.k-bouton.petit, .k-bouton-sec.petit { height: 40px; padding: 0 12px; }
.k-bouton-sec:hover { background: var(--surface-2); }
.k-bouton-sec:disabled { color: var(--texte-3); border-color: var(--bordure); cursor: default; background: var(--surface); }
.k-bouton-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--hauteur-controle); padding: 0 18px; border-radius: var(--rayon-bouton); border: 1px solid var(--danger); background: var(--surface); color: var(--danger); font: 600 14px var(--police); cursor: pointer; white-space: nowrap; }
.k-bouton kbd { background: color-mix(in srgb, var(--sur-accent) 18%, transparent); color: inherit; border-color: transparent; }
.rond:disabled { opacity: .35; cursor: default; }
.rond.petit { width: 36px; height: 36px; }
/* Dans une cellule de tableau, les boutons d'une ligne se rangent côte à côte. */
td > .rond { display: inline-grid; vertical-align: middle; }

/* —— Filtres et onglets segmentés (maquettes 4 et 12) —— */
.filtre-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--rayon-champ); background: var(--surface-2); border: 1px solid var(--bordure); }
.filtre-seg > * {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texte-2); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.filtre-seg > .choisi { background: var(--surface); color: var(--accent-texte); font-weight: 700; box-shadow: var(--ombre-carte); }

/* —— En-tête d'écran, fil d'Ariane, cartes —— */
.fil { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-2); font-weight: 600; font-size: 13px; align-self: flex-start; }
.fil .ic { width: 15px; height: 15px; }
.fil:hover { color: var(--accent-texte); }
.entete .gauche { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.entete .boutons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entete .nom { display: flex; flex-direction: column; gap: 8px; }
.etiquettes { display: flex; gap: 8px; flex-wrap: wrap; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.t2 { font-size: var(--taille-titre-carte); font-weight: 800; letter-spacing: -.01em; }
.barre-filtres { display: flex; align-items: center; gap: 12px; padding: 14px 18px; flex-wrap: wrap; }
.barre-filtres .saisie { flex: 1 1 260px; max-width: 420px; }
.barre-filtres .a-droite { margin-left: auto; }
.message-ligne { padding: 0 18px 14px; }
.vide-liste { padding: 22px 18px; color: var(--texte-2); }

/* —— Listes : un tableau sur ordinateur, des cartes sur téléphone (charte, section 7) —— */
table.liste { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.liste th { text-align: left; font-size: 12px; font-weight: 700; color: var(--texte-2); background: var(--surface-2); padding: 10px 12px; white-space: nowrap; border-top: 1px solid var(--bordure); }
.liste th:first-child, .liste td:first-child { padding-left: 18px; }
.liste th:last-child, .liste td:last-child { padding-right: 18px; }
.liste th.num, .liste td.num { text-align: right; }
.liste td { padding: 12px; border-top: 1px solid var(--bordure); vertical-align: middle; white-space: nowrap; }
.liste tbody tr:hover td { background: var(--surface-2); }
.liste .secondaire { color: var(--texte-2); }
.liste .principal-col { font-weight: 600; white-space: normal; }
.liste td.montant { font-weight: 700; }
.liste a.ligne-lien { color: inherit; }
.liste a.ligne-lien:hover { color: var(--accent-texte); }
.liste-tel { display: none; list-style: none; margin: 0; padding: 0 14px; }
.liste-tel li { border-top: 1px solid var(--bordure); }
.liste-tel li:first-child { border-top: 0; }
.liste-tel a, .liste-tel .element { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; color: inherit; }
.liste-tel button.element { width: 100%; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.f-corps .champs { padding: 0; }
.groupe-champs { border: 0; margin: 0; padding: 0; min-width: 0; }
.liste .colonne-pieces { width: 130px; }
.liste .colonne-action { width: 56px; }
.renommage { flex: 1; }
.liste-tel .l { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.liste-tel .l b { font-weight: 700; min-width: 0; }
.liste-tel .l .num { font-weight: 800; }
.liste-tel small { color: var(--texte-2); font-size: 13px; font-variant-numeric: tabular-nums; }

/* —— Formulaires —— */
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 4px 18px 18px; }
.champs.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.champs .large { grid-column: 1 / -1; }
.erreur-champ { margin: 0; font-size: var(--taille-petit); font-weight: 600; color: var(--danger); }
.saisie select { flex: 1; min-width: 0; height: 100%; padding: 0 4px 0 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.saisie select option { background: var(--surface); color: var(--texte); }
.saisie .unite-saisie { color: var(--texte-3); font-weight: 600; padding-right: 8px; }
.saisie input.montant-saisie { text-align: right; font-variant-numeric: tabular-nums; }
/* Sans unité à sa droite, un nombre ne colle pas au contour. */
.saisie input.montant-saisie:last-child { padding-right: 8px; }
.saisie.grisee { background: var(--desactive); color: var(--desactive-texte); border-color: var(--bordure); }
.case { display: inline-flex; align-items: center; gap: 10px; min-height: var(--hauteur-controle); cursor: pointer; font-weight: 600; }
.case input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.pied-formulaire { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-titre { margin: 0; padding: 14px 18px 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }

/* —— Fenêtre (maquette 12) —— */
.voile { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; overflow-y: auto; background: var(--voile); }
.fenetre { width: 580px; max-width: 100%; background: var(--surface); color: var(--texte); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: var(--ombre-fenetre); }
.fenetre.etroite { width: 460px; }
.f-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 8px 22px; }
.f-tete h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.f-corps { padding: 6px 22px 4px; display: flex; flex-direction: column; gap: 14px; }
.f-pied { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 22px; border-top: 1px solid var(--bordure); }

/* —— Catégories tarifaires (maquette 12) —— */
.cat-ligne { display: grid; grid-template-columns: 20px minmax(0, 1fr) 92px 70px 42px; gap: 12px; align-items: center; padding: 5px 16px 5px 22px; }
.cat-ligne.glisse { opacity: .45; }
.cat-titres { padding-top: 8px; padding-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--texte-2); }
.cat-titres span:nth-child(3) { text-align: center; }
.cat-ligne .num { color: var(--texte-2); font-weight: 600; }
.poignee { color: var(--texte-3); display: grid; place-items: center; cursor: grab; }
.poignee .ic { width: 18px; height: 18px; }
.cat-ligne input[type="radio"] { justify-self: center; width: 20px; height: 20px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.f-ajout { padding: 10px 22px 4px; }

/* —— Grille de prix (maquette 12) —— */
.entete .gauche .saisie { height: 40px; min-width: 180px; }
.modifs { font-size: 13px; font-weight: 700; color: var(--accent-texte); }
.zone-grille { position: relative; }
.zone-grille.suite-a-droite::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; z-index: 3; pointer-events: none;
  border-radius: 0 0 var(--rayon-carte) 0; background: linear-gradient(to right, transparent, var(--surface));
}
.defile { overflow-x: auto; border-radius: 0 0 var(--rayon-carte) var(--rayon-carte); scrollbar-width: thin; }
table.grille { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.grille th { text-align: right; font-size: 12px; font-weight: 700; color: var(--texte-2); background: var(--surface-2); padding: 10px 12px; white-space: nowrap; border-top: 1px solid var(--bordure); }
.grille th.c-article, .grille th.c-unite { text-align: left; }
.grille th:last-child, .grille td:last-child { padding-right: 18px; }
.grille th small { display: block; font-size: 12px; font-weight: 600; color: var(--accent-texte); }
.grille td { padding: 7px 12px; border-top: 1px solid var(--bordure); white-space: nowrap; vertical-align: middle; }
.grille tr.suite td { border-top: 0; padding-top: 0; }
.grille .c-article { position: sticky; left: 0; z-index: 1; width: 200px; min-width: 200px; max-width: 200px; padding-left: 18px; white-space: normal; }
.grille .c-unite { position: sticky; left: 200px; z-index: 1; width: 124px; min-width: 124px; }
.grille td.c-article, .grille td.c-unite { background: var(--surface); }
.grille th.c-article, .grille th.c-unite { z-index: 2; }
.deborde .grille .c-unite { box-shadow: var(--ombre-colonne); }
.grille .c-article b { display: block; font-weight: 700; }
.grille .c-article small { color: var(--texte-3); font-size: 12px; font-weight: 600; }
.grille .c-article .etiquette { margin-top: 4px; }
.grille td.c-unite { color: var(--texte-2); font-weight: 600; }
.grille .revient { color: var(--texte-2); text-align: right; }
.grille td.prix { text-align: right; }
.cellule {
  width: 112px; height: 36px; padding: 0 10px; border: 1px solid var(--champ); border-radius: 8px; background: var(--surface);
  color: var(--texte); font: 700 14px var(--police); text-align: right; font-variant-numeric: tabular-nums; outline: 0;
}
.cellule::placeholder { color: var(--texte-3); font-weight: 600; opacity: 1; }
.cellule.vide, .cellule.propose { border-style: dashed; }
.cellule.vide::placeholder { font-weight: 500; }
.cellule.modifie { background: var(--accent-pale); border-color: var(--accent); }
.cellule:focus { border-color: var(--accent); border-style: solid; box-shadow: var(--halo-focus); }
.cellule.obligatoire-vide { border-color: var(--attente); border-style: dashed; }
.cellule.obligatoire-vide::placeholder { color: var(--attente); }
.cellule.erreur { border-color: var(--danger); border-style: solid; }
.grille-tel { display: none; }
.puces { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.puces::-webkit-scrollbar { display: none; }
.puces button {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px;
  border-radius: var(--rayon-pastille); border: 1px solid var(--bordure); background: var(--surface); color: var(--texte-2); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.puces button.choisi { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); font-weight: 700; }
.liste-tel .prix-tel { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.liste-tel .prix-tel strong { color: var(--texte); font-weight: 800; }

/* —— Fiche d'un tiers (maquette 5) —— */
.entete .t1.grand { font-size: 26px; }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.chiffre { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.chiffre .lib { color: var(--texte-2); font-weight: 600; font-size: 13px; }
.chiffre .val { font-size: 21px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffre .val small { font-size: 12px; font-weight: 700; color: var(--texte-2); margin-left: .35em; }
.chiffre .det { color: var(--texte-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.chiffre .det em { font-style: normal; font-weight: 700; color: var(--attente); }
.fiche { padding: 4px 0 14px; }
.fiche-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fiche-sections > div + div { border-left: 1px solid var(--bordure); }
.fiche h3 { margin: 12px 18px 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.fiche dl { margin: 0; padding: 0 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; }
.fiche dt { color: var(--texte-2); font-size: 13px; }
.fiche dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.fiche dd.vide { color: var(--texte-3); font-weight: 500; }

/* —— Points de vente —— */
.lieu-carte .carte-tete { align-items: flex-start; }
.lieu-carte .titre-lieu { display: flex; flex-direction: column; gap: 6px; }
.appareils { list-style: none; margin: 0; padding: 0 18px 8px; }
.appareils li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--bordure); }
.appareils li .nom-appareil { flex: 1; min-width: 0; font-weight: 600; }
.appareils li.retire .nom-appareil { color: var(--texte-3); text-decoration: line-through; }
.appareils .ic { color: var(--texte-2); }
.occupation { color: var(--texte-2); font-weight: 600; font-size: 13px; }
.ajout-ligne { display: flex; gap: 10px; align-items: flex-end; padding: 6px 18px 16px; flex-wrap: wrap; }
.ajout-ligne .k-champ { flex: 1 1 200px; }

/* —— Profils : les permissions par groupe —— */
.permissions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; padding: 0 18px 12px; }
.permissions h3 { grid-column: 1 / -1; margin: 10px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.permissions .case { min-height: 36px; font-weight: 500; }

@media (max-width: 1100px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche-sections { grid-template-columns: minmax(0, 1fr); }
  .fiche-sections > div + div { border-left: 0; border-top: 1px solid var(--bordure); }
  .fiche-sections > div:not(:last-child) { padding-bottom: 12px; }
}

@media (max-width: 639.98px) {
  table.liste { display: none; }
  .liste-tel { display: block; }
  .champs, .champs.trois { grid-template-columns: minmax(0, 1fr); padding: 4px 14px 16px; }
  .entete .boutons { width: 100%; }
  .entete .boutons > * { flex: 1 1 auto; }
  .barre-filtres { padding: 12px 14px; }
  .barre-filtres .saisie { max-width: none; }
  .filtre-seg { width: 100%; }
  .filtre-seg > * { flex: 1 1 auto; padding: 0 8px; }
  .pied-formulaire > * { flex: 1 1 auto; }
  /* « .entete .boutons » s'affiche en flex : la grille du téléphone, en lecture seule, n'a pas de boutons. */
  .grille-bureau, .entete .grille-bureau { display: none; }
  .grille-tel { display: flex; flex-direction: column; gap: 12px; }
  .chiffres { gap: 10px; }
  .chiffre { padding: 12px 14px; }
  .chiffre .val { font-size: 17px; white-space: normal; }
  .permissions { grid-template-columns: minmax(0, 1fr); }
  .cat-ligne { grid-template-columns: 20px minmax(0, 1fr) 54px 42px; padding: 5px 12px; }
  .cat-ligne .num { display: none; }
  .voile { padding: 16px 10px; }
  .f-tete { padding-left: 16px; }
  .f-corps { padding: 6px 16px 4px; }
  .f-pied { padding: 12px 16px; }
}

/* —— Synchronisation du point de vente (maquette 13, à droite) —— */
.synchro-poste { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.etat-carte { padding: 22px 16px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.etat-ic { width: 60px; height: 60px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--sp); color: var(--sc); }
.etat-ic .ic { width: 30px; height: 30px; }
.etat-carte b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.etat-carte span { color: var(--texte-2); font-variant-numeric: tabular-nums; }
.bandeau { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sp); color: var(--sc); font-weight: 700; line-height: 1.4; }
.t-section { margin: 4px 2px -4px; font-size: 13px; font-weight: 800; color: var(--texte-2); }
ul.attente { list-style: none; margin: 0; padding: 0 14px; }
ul.attente li { display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--bordure); }
ul.attente li:first-child { border-top: 0; }
ul.attente li .ic { color: var(--texte-2); }
ul.attente li span { flex: 1; font-weight: 600; }
ul.attente li strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.carte.rien { padding: 16px 14px; color: var(--texte-3); font-weight: 600; text-align: center; }
.synchroniser { height: 50px; font-size: 15px; }
a.lien-voyant { display: inline-flex; text-decoration: none; color: inherit; }

/* —— Points de vente et appareils (maquette 13, à gauche) —— */
.plafond { font-size: 13px; font-weight: 700; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.filtre-seg em { font-style: normal; margin-left: 4px; color: var(--texte-3); font-weight: 700; }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tuile { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.tuile .lib { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texte-2); }
.tuile .lib i { width: 9px; height: 9px; border-radius: 50%; background: var(--sc); flex: none; }
.tuile .val { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tuile .val small { margin-left: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--texte-3); }
table.liste-appareils { width: 100%; border-collapse: separate; border-spacing: 0; }
.liste-appareils th { text-align: left; font-size: 12px; font-weight: 700; color: var(--texte-2); background: var(--surface-2); padding: 10px 12px; border-top: 1px solid var(--bordure); white-space: nowrap; }
.liste-appareils td { padding: 8px 12px; border-top: 1px solid var(--bordure); vertical-align: middle; white-space: nowrap; }
.liste-appareils th:first-child, .liste-appareils td:first-child { padding-left: 18px; }
.liste-appareils th:last-child, .liste-appareils td:last-child { width: 60px; padding-right: 14px; text-align: right; }
.liste-appareils tr.ligne-pdv td { padding-top: 14px; padding-bottom: 6px; }
.liste-appareils tr.ligne-pdv + tr td { border-top: 0; }
.pdv-tete { display: flex; align-items: center; gap: 10px; }
.pdv-tete b { font-size: 15px; font-weight: 800; }
.app-nom { display: flex; align-items: center; gap: 12px; }
.app-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--texte-2); }
.app-nom b { display: block; font-weight: 700; }
.app-nom small, .liste-appareils .etat small { display: block; font-size: 12px; font-weight: 600; color: var(--texte-3); }
.liste-appareils .etat small { margin-top: 4px; }
.liste-appareils tr.retire .app-nom b, .liste-appareils tr.retire .serie, .liste-appareils tr.retire .synchro { color: var(--texte-3); }
.liste-appareils .serie { font-weight: 600; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.liste-appareils .synchro { font-variant-numeric: tabular-nums; }
.liste-appareils td.actions { position: relative; }
.menu-ouvert { position: absolute; right: 6px; bottom: calc(100% - 4px); z-index: 4; width: 210px; padding: 6px; display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: var(--ombre-fenetre); }
.menu-ouvert button { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; color: var(--texte); cursor: pointer; text-align: left; }
.menu-ouvert button:hover { background: var(--surface-2); }
.menu-ouvert button.danger, .menu-ouvert button.danger .ic { color: var(--danger); }
.menu-ouvert .ic { width: 18px; height: 18px; color: var(--texte-2); }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.appareils-tel { display: none; }
.appareils-tel .pdv-tete { padding: 12px 14px 4px; }
.actions-tel { display: flex; gap: 8px; padding: 0 0 12px; }
.actions-tel .danger { color: var(--danger); }
.code-jumelage { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 6px; }
.code-jumelage span { font-size: 13px; font-weight: 700; color: var(--texte-2); }
.code-jumelage strong { font-size: 32px; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
  table.liste-appareils { display: none; }
  .appareils-tel { display: block; }
  .tuiles { gap: 10px; }
  .tuile { padding: 12px 14px; }
  .tuile .val { font-size: 22px; }
}