/* CRM Sweet Nabbody. Mobile d'abord : tout est pensé pour un écran de 390 px,
   l'ordinateur n'est qu'un téléphone plus large, centré.

   Les couleurs reprennent celles du site : bleu Nila, poudre, encre. La hausse
   et la baisse ont chacune leur couleur, mais ne reposent jamais sur elle
   seule : l'écart est toujours écrit en toutes lettres, avec son signe. */

:root {
  --nila: #0B2A6F;
  --poudre: #D9E4F5;
  --encre: #14213D;
  --encre-60: #566074;
  --page: #F7F6F2;
  --blanc: #FFFFFF;
  --filet: #E2E0D9;
  --hausse: #17663F;
  --hausse-fond: #E1F1E8;
  --baisse: #A61B12;
  --baisse-fond: #FBE7E4;
  --stable: #4A5468;
  --stable-fond: #ECEEF2;
  --rayon: 18px;
  --e1: .5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--encre);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
body.avec-onglets { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

:focus-visible { outline: 3px solid var(--nila); outline-offset: 2px; border-radius: 6px; }

.entete {
  text-align: center;
  background: var(--nila);
  color: var(--blanc);
  padding: calc(var(--e3) + env(safe-area-inset-top)) var(--e2) var(--e3);
}
.entete__marque { margin: 0; line-height: 0; }
.entete__logo { display: block; width: auto; height: 34px; margin: 0 auto; }
.entete__titre { margin: .75rem 0 0; font-size: 1.65rem; line-height: 1.2; }
.entete__lecture { margin: .45rem 0 0; font-size: .88rem; opacity: .85; }

.contenu { max-width: 560px; margin: 0 auto; padding: var(--e2); }

.bloc { margin: var(--e3) 0 calc(var(--e3) + .5rem); }
.bloc__titre { margin: 0 0 .3rem; font-size: 1.3rem; line-height: 1.25; }
.bloc__sous-titre { margin: 0 0 var(--e2); color: var(--encre-60); font-size: .95rem; }

.pile { display: grid; gap: var(--e2); }

/* LA CARTE : le chiffre en gros, la phrase dessous, rien d'autre. */
.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: var(--e2) var(--e2) 1.15rem;
  box-shadow: 0 1px 2px rgba(20, 33, 61, .07);
}
.carte__titre { margin: 0; font-size: .95rem; font-weight: 600; color: var(--encre-60); }
.carte__valeur {
  margin: .15rem 0 .4rem;
  font-size: 2.5rem; line-height: 1.08; font-weight: 700;
  color: var(--nila);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.carte__phrase { margin: 0; font-size: 1.04rem; line-height: 1.45; }

/* EN ATTENTE : visiblement autre chose qu'un chiffre. Pas de zéro, pas de
   bleu, un cadre en pointillés. */
.carte--attente { background: #FBFAF6; border: 1.5px dashed var(--filet); box-shadow: none; }
.carte--attente .carte__valeur { font-size: 1.45rem; color: var(--encre-60); }

.periode, .filtres { display: flex; gap: var(--e1); margin: var(--e2) 0; }
.filtres { flex-wrap: wrap; }
.periode__choix, .filtres__choix {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .5rem .75rem;
  border-radius: 999px;
  background: var(--blanc); color: var(--encre);
  font-weight: 600; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--filet);
}
/* Jusqu'à quatre boutons de période sur un écran de 390 px (« Tout » en plus
   sur la page Clientes) : le libellé tient sur une ligne. */
.periode__choix { padding-inline: .35rem; font-size: 1rem; white-space: nowrap; }
.periode__choix.est-actif, .filtres__choix.est-actif {
  background: var(--nila); color: var(--blanc); box-shadow: none;
}

/* LES DATES AU CHOIX : un volet sous les boutons, fermé par défaut, ouvert
   quand une période personnalisée est affichée. */
.dates { margin: calc(-1 * var(--e1)) 0 var(--e2); }
.dates__ouvrir {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 46px; padding: .5rem 1rem;
  border-radius: 999px; list-style: none; cursor: pointer;
  background: var(--blanc); color: var(--encre); font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--filet);
}
.dates__ouvrir::-webkit-details-marker { display: none; }
.dates__ouvrir::after { content: "\25BE"; font-size: .85em; }
.dates[open] > .dates__ouvrir::after { content: "\25B4"; }
.dates__ouvrir.est-actif { background: var(--nila); color: var(--blanc); box-shadow: none; }
.dates__formulaire {
  display: grid; gap: .8rem; margin-top: var(--e1); padding: var(--e2);
  border-radius: var(--rayon); background: var(--blanc);
}
.dates__champs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dates__champ { display: grid; gap: .3rem; min-width: 0; font-size: .95rem; font-weight: 600; }
.dates__champ input, .recherche__ligne input {
  display: block; width: 100%; min-width: 0; min-height: 50px; padding: 0 .75rem;
  font: inherit; font-size: 17px; font-weight: 400;
  border: 1.5px solid var(--filet); border-radius: 12px; background: var(--blanc); color: var(--encre);
}
.dates__champ input:focus, .recherche__ligne input:focus { border-color: var(--nila); outline: none; }
.dates__formulaire button, .recherche__ligne button {
  min-height: 50px; padding: 0 1.1rem;
  border: 0; border-radius: 12px;
  background: var(--nila); color: var(--blanc);
  font: inherit; font-weight: 700;
}
.dates__erreur {
  margin: 0 0 var(--e2); padding: .75rem var(--e2);
  border-radius: 12px; background: var(--baisse-fond); color: var(--baisse);
  font-size: .95rem; font-weight: 600;
}

.recherche { margin: var(--e2) 0 var(--e3); }
.recherche__libelle { display: block; margin-bottom: .4rem; font-weight: 700; }
.recherche__ligne { display: flex; gap: var(--e1); }
.recherche__ligne input { flex: 1 1 auto; }
.recherche__effacer { display: inline-block; margin-top: .6rem; color: var(--nila); font-weight: 600; }

.synthese {
  margin: 0 0 var(--e2);
  padding: var(--e2);
  border-radius: var(--rayon);
  background: var(--poudre);
  font-size: 1.07rem; line-height: 1.5;
}

.comparaison__ligne {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: .2rem .75rem; margin-top: .75rem;
}
.comparaison__quand { margin: 0; font-size: .9rem; color: var(--encre-60); }
.comparaison__valeur {
  margin: 0; font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right;
}
.barre { grid-column: 1 / -1; display: block; width: 100%; height: 12px; }
.barre__fond { fill: #EFEDE7; }
.barre--avant .barre__part { fill: #9DB0D2; }
.barre--apres .barre__part { fill: var(--nila); }

.ecart {
  display: inline-block; margin: .9rem 0 .55rem; padding: .3rem .8rem;
  border-radius: 999px; font-weight: 700; font-size: .95rem;
}
.ecart--hausse { background: var(--hausse-fond); color: var(--hausse); }
.ecart--baisse { background: var(--baisse-fond); color: var(--baisse); }
.ecart--stable { background: var(--stable-fond); color: var(--stable); }

.legende {
  margin-top: var(--e2); padding: var(--e2);
  border-radius: var(--rayon); background: var(--blanc);
  font-size: .95rem; color: var(--encre-60);
}
.legende p { margin: .35rem 0; }

.cliente__nom { margin: 0 0 .25rem; font-size: 1.12rem; }
.cliente__ligne { margin: .15rem 0 0; }

.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex;
  background: var(--blanc);
  border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom);
}
.onglets__lien, .onglets__sortie button {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 0 .25rem;
  background: none; border: 0;
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--encre-60); text-decoration: none;
}
.onglets__sortie { display: flex; flex: .75 1 0; margin: 0; }
.onglets__lien.est-actif { color: var(--nila); box-shadow: inset 0 3px 0 var(--nila); }

.connexion { max-width: 420px; margin: var(--e3) auto; }
.connexion__intro { margin: 0 0 var(--e2); font-size: 1.05rem; }
.connexion__erreur {
  margin: 0 0 var(--e2); padding: .75rem var(--e2);
  border-radius: 12px; background: var(--baisse-fond); color: var(--baisse); font-weight: 600;
}
.connexion__formulaire { display: grid; gap: .45rem; }
.connexion__formulaire label { font-weight: 600; margin-top: .6rem; }
.connexion__formulaire input {
  font: inherit; font-size: 17px;
  min-height: 52px; padding: 0 var(--e2);
  border: 1.5px solid var(--filet); border-radius: 14px; background: var(--blanc); color: var(--encre);
}
.connexion__formulaire input:focus { border-color: var(--nila); outline: none; }
.connexion__formulaire button {
  margin-top: var(--e2); min-height: 54px;
  border: 0; border-radius: 14px;
  background: var(--nila); color: var(--blanc);
  font: inherit; font-size: 1.05rem; font-weight: 700;
}