/* Back-office. Feuille de style unique, sans dependance.
   Palette volontairement distincte des autres outils FastSolve (papier gris-bleu,
   accent bleu) : le violet est partage par le CRM, le calculateur de devis, le
   tableau de bord et la facturation, et back-office doit se distinguer au premier
   coup d'oeil, pas seulement dans son modele de donnees. */

:root {
  --papier: #eef1f6;
  --papier-carte: #ffffff;
  --papier-creux: #e3e9f1;
  --encre: #17212b;
  --encre-douce: #5a6570;
  --encre-tenue: #8b949c;
  --accent: #1d5fd6;
  --accent-clair: #dde8fb;
  --accent-sombre: #14459e;
  --trait: #d6dee9;
  --succes: #1d6b3f;
  --succes-fond: #e3f2e8;
  --alerte: #9a3412;
  --alerte-fond: #fbeae2;
  --ombre: 0 1px 2px rgba(23, 33, 43, 0.04), 0 8px 24px rgba(23, 33, 43, 0.06);
  --rayon: 12px;
  --police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--encre-douce);
  margin: 0 0 1rem;
  font-weight: 600;
}

.sr-seulement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Banniere de demonstration -------------------------------------------- */

.banniere-demo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  background: var(--accent-sombre);
  color: #eef7f6;
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
}

.pastille {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* --- Entete --------------------------------------------------------------- */

.entete {
  background: var(--papier-carte);
  border-bottom: 1px solid var(--trait);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete__interieur {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.marque {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--encre);
  line-height: 1.15;
}

.marque__nom {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.marque__signature {
  font-size: 0.72rem;
  color: var(--encre-tenue);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-right: auto;
}

.lien-nav {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--encre-douce);
  font-size: 0.9rem;
  white-space: nowrap;
}

.lien-nav:hover {
  background: var(--papier-creux);
  color: var(--encre);
}

.lien-nav--actif {
  background: var(--accent-clair);
  color: var(--accent-sombre);
  font-weight: 600;
}

.lien-nav--discret {
  color: var(--encre-tenue);
  font-size: 0.85rem;
}

/* --- Structure ------------------------------------------------------------ */

.contenu {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.corps--centre .contenu {
  max-width: 420px;
  padding-top: 4rem;
}

.sous-titre {
  color: var(--encre-douce);
  margin: 0.35rem 0 1.5rem;
  font-size: 0.92rem;
}

.pied {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  color: var(--encre-tenue);
  font-size: 0.8rem;
  display: flex;
  gap: 0.5rem;
}

/* --- Cartes --------------------------------------------------------------- */

.carte {
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.4rem;
  box-shadow: var(--ombre);
  margin-bottom: 1.25rem;
}

.carte--connexion {
  padding: 2rem;
}

/* --- Formulaires ---------------------------------------------------------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.champ__intitule {
  font-size: 0.82rem;
  color: var(--encre-douce);
  font-weight: 550;
}

.champ__aide {
  font-size: 0.78rem;
  color: var(--encre-tenue);
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  width: 100%;
  min-width: 0;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

textarea {
  resize: vertical;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

legend {
  font-size: 0.82rem;
  color: var(--encre-douce);
  font-weight: 550;
  padding: 0;
  margin-bottom: 0.3rem;
}

.aide {
  font-size: 0.85rem;
  color: var(--encre-tenue);
  margin: 0 0 0.9rem;
}

/* --- Boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.bouton--principal {
  background: var(--accent);
  color: #ffffff;
}

.bouton--principal:hover {
  background: var(--accent-sombre);
}

.bouton--discret {
  background: var(--papier-carte);
  border-color: var(--trait);
  color: var(--encre);
}

.bouton--discret:hover {
  border-color: var(--accent);
  color: var(--accent-sombre);
}

.bouton--danger {
  background: transparent;
  color: var(--alerte);
  border-color: transparent;
  padding-left: 0;
}

.bouton--danger:hover {
  text-decoration: underline;
}

.barre-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.barre-actions--fin {
  justify-content: flex-end;
}

.formulaire-suppression {
  margin-top: 2rem;
}

/* --- Tableaux ------------------------------------------------------------- */

.tableau-defilant {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: 10px;
  margin-bottom: 1.25rem;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--papier-carte);
}

.tableau td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: middle;
}

.tableau tbody tr:last-child td {
  border-bottom: none;
}

.tableau tbody tr:hover {
  background: var(--papier-creux);
}

/* --- Etiquettes de statut -------------------------------------------------- */

.etiquette {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--papier-creux);
  color: var(--encre-douce);
  white-space: nowrap;
}

/* --- Alertes et vides ------------------------------------------------------ */

.alerte {
  padding: 0.7rem 1rem;
  border-radius: 8px;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.alerte--succes {
  background: var(--succes-fond);
  color: var(--succes);
}

.alerte--erreur {
  background: var(--alerte-fond);
  color: var(--alerte);
}

.vide {
  background: var(--papier-carte);
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--encre-douce);
}

.vide--discret {
  padding: 1rem;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--encre-tenue);
}

.vide--ligne {
  padding: 1.5rem !important;
  text-align: center;
  color: var(--encre-douce);
}

.discret {
  color: var(--encre-tenue);
  font-size: 0.9rem;
}

/* --- Blocs de contenu ------------------------------------------------------ */

.bloc {
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.25rem 1.35rem 1.4rem;
  margin-bottom: 1.5rem;
}

.bloc > h2 {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--encre);
  font-weight: 650;
  margin-bottom: 0.9rem;
}

/* --- Accueil sans donnees et jeux d'exemple -------------------------------- */

.accueil-vide {
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 2rem 1.75rem;
  text-align: center;
  margin-bottom: 1.75rem;
}

.accueil-vide h1 {
  margin-bottom: 0.5rem;
}

.accueil-vide p {
  color: var(--encre-douce);
  margin: 0 auto;
  max-width: 32rem;
}

.jeux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.jeux form {
  margin: 0;
  display: flex;
}

.jeu {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--papier-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.1rem 1.15rem;
  font: inherit;
  color: var(--encre);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.jeu strong {
  font-size: 1rem;
  font-weight: 650;
}

.jeu span {
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

.jeu:hover {
  border-color: var(--accent);
  box-shadow: var(--ombre);
  transform: translateY(-1px);
}

.lien-discret {
  color: var(--encre-tenue);
  font-size: 0.9rem;
  text-decoration: none;
}

.lien-discret:hover {
  color: var(--encre);
}

/* Installation de l'application */

.lien-nav--installer {
  border: 1px solid var(--accent);
  background: var(--accent-clair);
  color: var(--accent-sombre);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}

.lien-nav--installer:hover { background: var(--accent); color: #ffffff; }
.lien-nav--installer[disabled] { opacity: 0.6; cursor: default; }

.aide-installation {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem 1rem;
  color: var(--encre-douce);
  font-size: 0.88rem;
}

.aide-installation summary { cursor: pointer; color: var(--accent-sombre); font-weight: 550; }
.aide-installation ul { margin: 0.6rem 0 0; padding-left: 1.1rem; line-height: 1.6; }
.aide-installation li { margin-bottom: 0.35rem; }
.aide-installation[hidden] { display: none; }

.banniere-installation {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.25rem;
  background: var(--accent-clair);
  border-bottom: 1px solid var(--trait);
}

.banniere-installation__texte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-right: auto;
  min-width: 240px;
}

.banniere-installation__texte strong { color: var(--accent-sombre); }
.banniere-installation__texte span { color: var(--encre-douce); font-size: 0.88rem; }

.banniere-installation__plus-tard {
  background: none;
  border: 0;
  color: var(--encre-douce);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: auto;
}

.note-installation {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--papier-creux);
  border-radius: 8px;
  color: var(--encre-douce);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ===========================================================================
   Back-office
   ===========================================================================
   Ces composants sont propres à cet outil. Ils réutilisent les jetons définis
   plus haut pour que les outils FastSolve restent visiblement de la même
   famille.
   ------------------------------------------------------------------------ */

/* --- Filtres ----------------------------------------------------------------- */

.barre-filtres {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.5rem;
}

.barre-filtres input[type="text"] {
  flex: 1;
  min-width: 10rem;
}

/* --- Tableau : en-têtes triables ---------------------------------------------- */

.tableau thead th {
  text-align: left;
  padding: 0.65rem 0.9rem;
  background: var(--papier-creux);
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}

.lien-tri {
  color: var(--encre-douce);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.lien-tri:hover {
  color: var(--accent-sombre);
}

.lien-tri--actif {
  color: var(--accent-sombre);
}

.tableau__actions {
  width: 1%;
  white-space: nowrap;
}

/* --- Tableau : cellules éditables ---------------------------------------------- */
/* Une saisie directe, façon feuille de calcul : le champ se fond dans la cellule
   tant qu'on n'y touche pas, et ne reprend l'apparence d'un champ de formulaire
   qu'au focus, pour que le tableau reste lisible avec beaucoup de lignes. */

.tableau td {
  padding: 0.4rem 0.5rem;
  vertical-align: top;
}

.tableau td input,
.tableau td select {
  border-color: transparent;
  background: transparent;
  padding: 0.35rem 0.45rem;
  min-width: 7rem;
}

.tableau td input[type="number"] {
  min-width: 5rem;
}

.tableau td input[type="date"] {
  min-width: 8.5rem;
}

.tableau td input:hover,
.tableau td select:hover {
  border-color: var(--trait);
}

.tableau td input:focus,
.tableau td select:focus {
  background: var(--papier-carte);
}

.tableau tbody tr:hover {
  background: transparent;
}

.bouton--compact {
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
}

.ligne-ajout {
  background: var(--papier-creux);
}

.ligne-ajout input::placeholder {
  color: var(--encre-tenue);
}

/* --- Réglages : colonnes ---------------------------------------------------- */

.colonne-reglage {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--trait);
}

.colonne-reglage:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.formulaire--colonne {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
  margin: 0;
}

.champ--nom-colonne {
  min-width: 10rem;
}

.formulaire--colonne .champ {
  margin-bottom: 0;
  min-width: 12rem;
}

.etiquette--type {
  margin-bottom: 0.6rem;
}

.colonne-reglage .formulaire-suppression {
  margin-top: 0;
}

/* --- Petits écrans ----------------------------------------------------------- */

@media (max-width: 720px) {
  .entete__interieur {
    gap: 0.75rem;
  }

  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }

  .barre-filtres {
    flex-direction: column;
    align-items: stretch;
  }

  .barre-filtres button {
    width: 100%;
  }

  .barre-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .barre-actions .bouton {
    width: 100%;
  }

  /* La liste devient des cartes empilées : le nombre de colonnes varie d'un
     client à l'autre, donc pas de grille fixe possible. Chaque cellule porte
     déjà son nom de colonne dans data-etiquette (posé par la vue) : c'est ce
     qui sert d'étiquette une fois les en-têtes du tableau masqués. */
  .tableau-defilant {
    overflow-x: visible;
    border: none;
  }

  .tableau thead {
    display: none;
  }

  .tableau,
  .tableau tbody,
  .tableau tr,
  .tableau td {
    display: block;
    width: 100%;
  }

  .tableau tr {
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
    background: var(--papier-carte);
  }

  .ligne-ajout {
    background: var(--papier-creux);
  }

  .tableau tr:last-child {
    margin-bottom: 0;
  }

  .tableau td {
    padding: 0.3rem 0;
  }

  .tableau td[data-etiquette]::before {
    content: attr(data-etiquette);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--encre-tenue);
    margin-bottom: 0.15rem;
  }

  .tableau__actions {
    display: flex;
    gap: 0.5rem;
    width: auto !important;
  }

  .tableau__actions .bouton {
    flex: 1;
  }
}

@media print {
  .banniere-demo,
  .entete,
  .pied,
  .barre-filtres,
  .banniere-installation,
  .aide-installation {
    display: none !important;
  }

  body {
    background: #ffffff;
  }
}