/* ============================================================
   MARTY — piste esthetique 1 : ARDOISE
   ------------------------------------------------------------
   Le principe : le menu s'efface, la donnee occupe toute la
   lumiere. Le rail passe en ardoise sombre et sort du champ
   visuel ; tout le reste de l'ecran est tres clair. Une seule
   couleur circule dans l'interface, le bleu IBG, et elle ne dit
   que deux choses : ceci est selectionne, ceci est cliquable.
   L'orange est reserve a ce qui appelle une action - s'il decore,
   il cesse d'alerter.

   C'est le traitement qui supporte le mieux l'augmentation du
   nombre d'entrees a venir : sinistres, contentieux, AG, RH,
   comptabilite. Un rail sombre absorbe une longue liste ; un rail
   blanc la subit.

   Ce fichier est charge en dernier dans chaque page : a
   specificite egale il a le mot de la fin sur le CSS interne.
   Seul ce fichier differe entre les branches ui/ardoise et
   ui/lamelle. Tout le reste du depot est identique.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  /* ---------- Palette IBG ---------- */
  --ibg-blue:#007DAB;
  --ibg-orange:#F5A025;
  /* Dans cette piste, la palette se resserre sur un seul accent : le teal
     de la charte imprimee pointe donc vers le bleu. Deux briques - suivi des
     prospects et statistiques - s'en servaient pour colorer leur bandeau,
     leurs onglets et leurs series de graphiques ; les laisser en teal aurait
     fait cohabiter deux couleurs de marque a l'ecran. Le gris reste distinct,
     les graphiques gardent donc leurs deux series lisibles. */
  --ibg-teal:#007DAB;
  --ibg-grey:#85868A;
  --ibg-dark:#57595E;
  --ibg-sand:#EDC9AF;

  /* ---------- Couleur porteuse de sens ---------- */
  --brand:#007DAB;
  --brand-d:#00587A;
  --brand-soft:#E6F2F7;
  --brand-ink:#00587A;
  --alert:#F5A025;

  /* ---------- La marque ----------
     Le sarcelle du logo MARTY. Il n'est PAS --brand : --brand dit « ceci est
     selectionne, ceci est cliquable » et ne doit pas se confondre avec la
     voix de l'outil lui-meme. C'est --marque que porte la scintille de l'IA
     (marty-ia.js) : ce que la machine propose parle avec la voix de MARTY. */
  --marque:#3F808C;

  /* ---------- Fonds et encres ----------
     Le contenu est plus clair et plus contraste qu'aujourd'hui :
     c'est lui qu'on regarde huit heures par jour. */
  --bg:#EEEFF1;
  --panel:#FFFFFF;
  --soft:#F7F8F9;
  --ink:#1E2126;
  --muted:#6C7178;
  --line:#E3E5E8;

  /* ---------- Rail ardoise ----------
     Aplat unique, sans degrade : un degrade fait varier le contraste
     du libelle entre le haut et le bas du menu. */
  --side-w:262px;
  --side-w-s:220px;
  --side-1:#232830;
  --side-2:#232830;
  --side-bg:#232830;
  --side-line:rgba(167,174,184,.20);
  --side-ink:#A7AEB8;
  --side-ink-dim:rgba(167,174,184,.72);
  --side-ink-on:#FFFFFF;
  --side-hover:#2C323B;
  --side-active:#171B21;
  --side-marker:var(--brand);
  --side-marker-w:3px;
  --side-av-bg:var(--brand);
  --side-av-ink:#FFFFFF;

  /* ---------- Statuts ---------- */
  --green:#0F7B5A;  --greenbg:#E4F3EC;
  --amber:#8A5406;  --amberbg:#FDF1DE;
  --red:#B3261E;    --redbg:#FDECEB;
  --blue:#00587A;   --bluebg:#E6F2F7;
  --slate:#4B5158;  --slatebg:#EAECEF;
  --violet:#5B4B9E; --violetbg:#EDEAF7;

  /* ---------- Forme ---------- */
  --r:8px;
  --r-sm:5px;
  --r-lg:10px;
  --r-pill:999px;
  --stroke:1px;
  --ico-stroke:1.6;
  --h-bandeau:73px;

  /* ---------- Typographie ----------
     Inter pour l'interface. IBM Plex Mono pour tout ce qui se lit
     chiffre a chiffre : references de mandat, immatriculations,
     IBAN, tantiemes, dates, montants. Un chiffre aligne se controle
     du regard, un chiffre en texte courant, non. */
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --fs-base:14px;
  --lh-base:1.5;
  --fw-title:700;
  --fw-strong:600;
  --fw-nav:500;
  --fw-nav-on:600;
  --tracking-title:-.015em;

  /* ---------- Graphiques ----------
     Trois voix et deux neutres, dans l'ordre ou on les pose. --ch-a est la
     couleur de la piste. --ch-b reste l'orange d'alerte sur les deux pistes :
     un graphique aussi doit pouvoir signaler, et il n'y a qu'une couleur pour
     ca. --ch-c est une troisieme voix, choisie assez loin des deux autres pour
     qu'une barre ne se prenne pas pour sa voisine. Les variantes claires
     servent le haut des degrades de barres.

     Les deux neutres disent ce qui est clos sans succes : perdu, sans suite.
     Il n'y a plus rien a y faire, ils ne doivent pas attirer l'oeil. */
  --ch-a:#007DAB; --ch-a-clair:#3AA6CC;
  --ch-b:#F5A025; --ch-b-clair:#FBBF5B;
  --ch-c:#4E7C8B; --ch-c-clair:#7BA5B1;
  --ch-neutre:#8A9199; --ch-neutre-2:#C3C8CD;

  /* ---------- Pastilles de collaborateurs ----------
     Le nuancier vit maintenant dans marty-pastilles.js, tire de la palette IBG :
     huit familles de l'arc de la marque, deux intensites de fond. Les deux
     pistes le partagent — quelqu'un ne doit pas changer de couleur parce qu'on
     a change la peau de l'application.

     Une piste qui voudrait le sien redeclare ici les seize couples :
         --pa-0:#FOND #ENCRE;  ...  --pa-15:#FOND #ENCRE;
     Toute palette doit repasser le controle de contraste, seuil AA 4,5 pour 1.
     Meme mecanique pour la cartographie : --ct-foyer, --ct-membre,
     --ct-fournisseur, --ct-contact, --ct-relation, --ct-centre. */
}

/* ============================================================
   1. Socle
   ============================================================ */
body{
  font-family:var(--font-ui);
  font-size:var(--fs-base);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,.hello,.tdb-t{letter-spacing:var(--tracking-title)}

/* ============================================================
   2. Rail ardoise
   ============================================================ */
.side{
  background:var(--side-bg);
  color:var(--side-ink);
  width:var(--side-w);
  flex-basis:var(--side-w);
}
@media(max-width:760px){
  .side{width:var(--side-w-s);flex-basis:var(--side-w-s)}
}
.brand,.side-foot{border-color:var(--side-line)}
.sec-h{color:var(--side-ink-dim);letter-spacing:.1em}
.sec-h:hover{color:var(--side-ink-on)}
.item{
  color:var(--side-ink);
  border-radius:var(--r-sm);
  font-weight:var(--fw-nav);
}
.item:hover{background:var(--side-hover);color:var(--side-ink-on)}
.item.active{
  background:var(--side-active);
  color:var(--side-ink-on);
  font-weight:var(--fw-nav-on);
  box-shadow:inset var(--side-marker-w) 0 0 var(--side-marker);
}
.item.soon{opacity:.45}
.item .tag{border-radius:var(--r-pill);background:rgba(167,174,184,.16);color:var(--side-ink)}
.who{border-radius:var(--r-sm)}
.who:hover{background:var(--side-hover)}
.who .av{background:var(--side-av-bg);color:var(--side-av-ink)}
/* L'ecran de connexion ne prend PAS l'ardoise du rail. Un aplat presque noir
   derriere une carte blanche donne un ton de console d'administration, alors
   que c'est la premiere image de l'outil et la seule que voient des gens qui
   ne le connaissent pas. Le sarcelle de la marque tient ce role sur les deux
   pistes : l'ardoise commence au rail, une fois la porte passee. */
#authGate{background:linear-gradient(180deg,#3F808C,#27505A)}
#authForm{border-radius:var(--r-lg)}

/* ============================================================
   3. Bandeau haut
   ============================================================ */
.topbar{
  background:var(--panel);
  border-bottom:var(--stroke) solid var(--line);
  height:var(--h-bandeau);
  flex-basis:var(--h-bandeau);
}
.rg-champ{border-radius:var(--r);border-color:var(--line);background:var(--soft)}
.rg-champ:focus-within{border-color:var(--brand);background:var(--panel)}
.rg-kbd{font-family:var(--font-mono);border-radius:4px}
.cloche{border-radius:var(--r-sm);border-color:var(--line)}
.cloche:hover{border-color:var(--brand);color:var(--brand)}
.rg-res,.cloche-pan,.reg-pan{border-radius:var(--r-lg);border-color:var(--line)}
.reg-i{border-radius:var(--r-sm)}

/* ============================================================
   4. Blocs et champs — un seul rayon partout
   ============================================================ */
.card,.tile,.tdb-c,.ag-card,.logo-card,.modal,.ccpop,.banner{
  border-radius:var(--r-lg);
}
.btn,.btn-primary,.btn-soft,.btn-danger,.btn-ghost,
input,select,textarea,.jfilter,.field input,.field select,.field textarea{
  border-radius:var(--r-sm);
}
.pill,.tag,.count{border-radius:var(--r-pill)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-d)}
/* La tuile de l'accueil portait un liseré teal. Une seule couleur
   circule desormais : ce qui n'est pas cliquable n'est pas colore. */
.tile{border-top-color:var(--line)}
.tile:hover{border-top-color:var(--brand)}

/* ============================================================
   5. Chiffres
   ============================================================ */
/* LA CHASSE FIXE NE S'APPLIQUE PLUS AUX MONTANTS (17/09/2026).
   `.num` et `.ref` la portaient, et donnaient à la balance, aux factures, aux
   KPI et aux chèques un air de listing d'imprimante. Ce qui aligne une colonne,
   ce sont les chiffres tabulaires, pas la fonte : on garde ceux-là et on rend
   aux nombres la fonte de l'interface.
   Trois briques s'en étaient déjà affranchies chacune de son côté ; la règle
   revient ici, là où elle doit vivre.
   `.mono` et `.rg-kbd` la gardent : un IBAN, une référence de bout en bout, une
   touche de clavier se lisent caractère par caractère — la chasse fixe y est
   voulue, et c'est pour cela que la classe existe. */
.num,.ref,.tdb-ch .v{font-variant-numeric:tabular-nums}
.mono,.rg-kbd{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tdb-ch .v{font-weight:600;letter-spacing:-.03em}
table,.rt{font-variant-numeric:tabular-nums}

/* ============================================================
   6. Focus
   ============================================================ */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}