/* ===== Ariane — coquille commune : jetons, bandeau et menu =====
   Source unique du bandeau et du menu principal, pour que Tableau de bord,
   Contacts et Devis presentent exactement la meme entete. Les pages gardent
   leur mise en forme interne ; seule la coquille est partagee.
   Chargee AVANT le <style> de la page, qui peut donc surcharger au besoin. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#152A47;
  --navy-light:#1E3A5F;
  --blue-accent:#2E5C8A;
  --red:#C0392B;
  --amber:#C6820A;
  --green:#2E7D5B;
  --bg:#F3F5F8;
  --card:#FFFFFF;
  --paper:#FCFBF8;
  --border:#E2E6EC;
  --border-soft:#EDEFF3;
  --text:#1C2733;
  --text-mute:#6B7685;
  --text-faint:#9AA3AF;
}

body.ariane{
  margin:0;
  font-family:'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  padding:28px 32px 64px;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:20px; margin-bottom:24px;
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:38px; height:38px; border-radius:8px;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
}
.brand-name{font-size:19px; font-weight:700; color:var(--navy);}
.topbar-right{display:flex; align-items:center; gap:18px;}
.year-pill{background:#EAF0F7; color:var(--navy-light); font-weight:600; font-size:13px; padding:6px 14px; border-radius:20px;}
.user-name{font-size:14px; font-weight:600; color:var(--text);}
.topbar-gear{background:none; border:none; cursor:pointer; color:var(--navy-light); display:flex; align-items:center; padding:0;}
.topbar-gear:hover{color:var(--navy);}
.logout{color:var(--red); font-size:13px; font-weight:600; cursor:pointer;}

.topnav{display:flex; gap:2px; margin-bottom:24px; border-bottom:1px solid var(--border); overflow-x:auto;}
.topnav a{display:flex; align-items:center; gap:6px; padding:11px 15px; font-size:13.5px; font-weight:600; color:var(--text-mute); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s, border-color .15s;}
.topnav a:hover{color:var(--navy);}
.topnav a.active{color:var(--navy); border-bottom-color:var(--navy-light);}

@media(max-width:900px){
  body.ariane{padding:16px 14px 48px;}
  .topbar{flex-wrap:wrap; gap:10px;}
  .brand-name{font-size:16px;}
  .topbar-right{gap:12px; flex-wrap:wrap;}
  .topnav{gap:0;}
  .topnav a{padding:10px 11px; font-size:12.5px;}
}

/* ===== Composants communs, sur le modele du tableau de bord =====
   Les pages Tailwind empilaient "bg-white rounded-2xl shadow" et des couleurs
   hors palette (bleu/vert/violet Tailwind, #1a3a5c). Ces classes donnent le
   meme rendu partout ; la mise en page reste celle de chaque page. */

.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px 20px;}
.card-plat{background:var(--card); border:1px solid var(--border); border-radius:12px;}
/* Panneau des fenetres modales. La classe etait posee dans les pages
   (a la place de "bg-white rounded-2xl shadow-xl") mais n'a jamais ete
   definie : les fenetres s'affichaient sans fond, texte sur la page. */
.card-plat-xl{background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 18px 40px rgba(21,42,71,.20);}

/* Boutons */
.a-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--border);
  border-radius:9px; background:var(--card); color:var(--navy); font-family:inherit; font-size:13px;
  font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, color .15s;}
.a-btn:hover{border-color:var(--navy-light); background:#F7F9FC;}
.a-btn-primaire{background:var(--navy); border-color:var(--navy); color:#fff;}
.a-btn-primaire:hover{background:var(--navy-light); border-color:var(--navy-light);}
.a-btn-danger{background:var(--card); border-color:#E8C4BE; color:var(--red);}
.a-btn-danger:hover{background:#FDF3F1; border-color:var(--red);}
.a-btn:disabled{opacity:.55; cursor:default;}

/* Titres de bloc */
.a-titre{font-size:15px; font-weight:700; color:var(--navy);}
.a-sous-titre{font-size:12px; color:var(--text-mute);}
.a-etiquette{font-size:10px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px;}

/* Valeurs chiffrees */
.a-nombre{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; font-weight:700; color:var(--navy);}
.a-vert{color:var(--green);} .a-rouge{color:var(--red);} .a-ambre{color:var(--amber);} .a-navy{color:var(--navy);}

/* ===== Champs de saisie et tableaux =====
   Les pages Tailwind repetaient la meme chaine d'utilitaires sur chaque champ
   (120 occurrences) : une classe unique, et le rendu suit la charte partout. */

.a-champ, .a-select, .a-zone{
  width:100%; box-sizing:border-box;
  border:1px solid var(--border); border-radius:9px;
  padding:9px 11px; font-size:13.5px; font-family:inherit; color:var(--text);
  background:var(--card); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.a-champ:hover, .a-select:hover, .a-zone:hover{border-color:#CBD5E1;}
.a-champ:focus, .a-select:focus, .a-zone:focus{
  border-color:var(--navy-light); box-shadow:0 0 0 3px rgba(46,92,138,.12);
}
.a-champ::placeholder, .a-zone::placeholder{color:var(--text-faint);}
.a-champ:disabled, .a-select:disabled, .a-zone:disabled{background:var(--paper); color:var(--text-mute);}
.a-zone{resize:vertical; min-height:64px; line-height:1.5;}
.a-champ[type=number]{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; text-align:right;}
.a-label{display:block; font-size:11px; font-weight:700; color:var(--text-mute);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px;}

/* Tableaux */
.a-table{width:100%; border-collapse:collapse; font-size:13px;}
.a-table thead th{
  text-align:left; padding:9px 10px; font-size:10px; font-weight:700;
  color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px;
  border-bottom:2px solid var(--border); white-space:nowrap; background:var(--card);
}
.a-table tbody td{padding:9px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
.a-table tbody tr:hover td{background:var(--paper);}
.a-table .num, .a-table th.num, .a-table td.num{
  text-align:right; font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
}

/* ===== Petits ecrans : un tableau large defile au lieu d'etre coupe =====
   Plusieurs pages enfermaient leurs tableaux dans un conteneur en
   overflow:hidden : sur telephone, les colonnes de droite devenaient
   inatteignables. */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
@media (max-width:820px){
  .table-scroll table{min-width:640px;}
}