/* =========================================================
   SOCLE DE DESIGN
   Chargé avant les autres feuilles. Définit les jetons de style
   (couleurs, espacements, rayons, ombres, typographie) et les
   composants communs : boutons, champs, panneaux, navigation.

   Les noms de variables historiques (--panel, --ink, --amber…)
   sont conservés : les feuilles existantes en héritent
   automatiquement.
   ========================================================= */

:root{
  /* -- Palette sombre (par défaut) -------------------------------------- */
  --bg-workbench:#0e1015;
  --bg-elevated:#141821;

  --panel:#171b24;
  --panel-2:#1e232e;
  --panel-3:#272d3a;
  --panel-border:#2a3040;
  --panel-border-fort:#3a4256;

  --ink:#e9ecf3;
  --ink-dim:#98a1b5;
  --ink-faint:#6a7285;

  /* Accent : orange chaud, lisible sur fond sombre comme sur fond clair */
  --amber:#f6a02c;
  --amber-fort:#ffb650;
  --amber-sourd:rgba(246,160,44,.14);
  --amber-ink:#1a1205;

  /* Couleurs sémantiques */
  --vert:#2ea86a;
  --vert-sourd:rgba(46,168,106,.15);
  --rouge:#e2544f;
  --rouge-sourd:rgba(226,84,79,.15);
  --bleu:#4b8ef7;
  --bleu-sourd:rgba(75,142,247,.15);

  /* -- Rayons ------------------------------------------------------------ */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-full:999px;

  /* -- Élévation --------------------------------------------------------- */
  --ombre-1:0 1px 2px rgba(0,0,0,.28);
  --ombre-2:0 2px 8px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --ombre-3:0 8px 24px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.24);
  --ombre-4:0 18px 48px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);

  /* -- Espacements (échelle 4px) ----------------------------------------- */
  --e1:4px;  --e2:8px;  --e3:12px; --e4:16px;
  --e5:20px; --e6:24px; --e8:32px; --e10:40px;

  /* -- Typographie -------------------------------------------------------- */
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-titre:'Space Grotesk', var(--font-body);
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs:11px;
  --t-sm:12.5px;
  --t-base:13.5px;
  --t-md:15px;
  --t-lg:18px;
  --t-xl:22px;

  /* -- Mouvement ---------------------------------------------------------- */
  --transition:.16s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------
   THÈME CLAIR
   --------------------------------------------------------------- */
body.theme-clair{
  --bg-workbench:#eef0f4;
  --bg-elevated:#ffffff;

  --panel:#ffffff;
  --panel-2:#f4f6f9;
  --panel-3:#e8ecf2;
  --panel-border:#dde2ea;
  --panel-border-fort:#c3cbd8;

  --ink:#131824;
  --ink-dim:#586074;
  --ink-faint:#8b93a5;

  --amber:#d9820a;
  --amber-fort:#c47108;
  --amber-sourd:rgba(217,130,10,.12);
  --amber-ink:#ffffff;

  --ombre-1:0 1px 2px rgba(20,28,45,.06);
  --ombre-2:0 2px 8px rgba(20,28,45,.08), 0 1px 2px rgba(20,28,45,.04);
  --ombre-3:0 8px 24px rgba(20,28,45,.1), 0 2px 6px rgba(20,28,45,.06);
  --ombre-4:0 18px 48px rgba(20,28,45,.16), 0 4px 12px rgba(20,28,45,.08);
}

/* ---------------------------------------------------------------
   RESET
   --------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg-workbench);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--transition), color var(--transition);
}

h1, h2, h3, h4{ font-family:var(--font-titre); font-weight:700; margin:0; line-height:1.25; }

button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; }

/* Anneau de focus visible uniquement au clavier : accessible sans gêner la souris */
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}
:focus:not(:focus-visible){ outline:none; }

::selection{ background:var(--amber); color:var(--amber-ink); }

/* Barres de défilement discrètes */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:var(--panel-3); border-radius:var(--radius-full);
  border:2px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--panel-border-fort); background-clip:content-box; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------------------------------------------------------------
   ICÔNES SVG
   --------------------------------------------------------------- */
.ico{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-.18em;
  pointer-events:none;
}
.ico-sm{ width:14px; height:14px; }
.ico-lg{ width:20px; height:20px; }
.ico-xl{ width:26px; height:26px; }

/* ---------------------------------------------------------------
   BOUTONS
   --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  background:var(--panel-2);
  border:1px solid var(--panel-border);
  color:var(--ink);
  border-radius:var(--radius-sm);
  padding:9px 14px;
  font-size:var(--t-sm);
  font-weight:600;
  white-space:nowrap;
  transition:background var(--transition), border-color var(--transition),
             color var(--transition), transform .08s ease, box-shadow var(--transition);
}
.btn:hover{ background:var(--panel-3); border-color:var(--panel-border-fort); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; }
.btn:disabled:hover{ background:var(--panel-2); border-color:var(--panel-border); }

.btn-primary{
  background:var(--amber); border-color:var(--amber); color:var(--amber-ink);
  box-shadow:var(--ombre-1);
}
.btn-primary:hover{ background:var(--amber-fort); border-color:var(--amber-fort); color:var(--amber-ink); }

.btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-dim); }
.btn-ghost:hover{ background:var(--panel-2); border-color:var(--panel-border); color:var(--ink); }

.btn-danger{ color:var(--rouge); }
.btn-danger:hover{ background:var(--rouge-sourd); border-color:var(--rouge); color:var(--rouge); }

.btn-sm{ padding:6px 10px; font-size:var(--t-xs); gap:var(--e1); }
.btn-lg{ padding:13px 20px; font-size:var(--t-md); }
.btn-icone-seul{ padding:9px; }
.btn-icone-seul.btn-sm{ padding:6px; }

/* Bouton icône circulaire (fermer, supprimer…) */
.btn-icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:none;
  background:transparent; border:1px solid transparent;
  color:var(--ink-faint); border-radius:var(--radius-sm);
  transition:var(--transition);
}
.btn-icone:hover{ background:var(--panel-3); color:var(--ink); }
.btn-icone.danger:hover{ background:var(--rouge-sourd); color:var(--rouge); border-color:var(--rouge); }

/* ---------------------------------------------------------------
   CHAMPS DE SAISIE
   --------------------------------------------------------------- */
input[type=text], input[type=number], input[type=url], input[type=search],
input[type=tel], input[type=email], select, textarea{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--panel-border);
  color:var(--ink);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-size:var(--t-sm);
  outline:none;
  transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
input::placeholder, textarea::placeholder{ color:var(--ink-faint); }
input:hover:not(:disabled), select:hover, textarea:hover{ border-color:var(--panel-border-fort); }
input:focus, select:focus, textarea:focus{
  border-color:var(--amber);
  box-shadow:0 0 0 3px var(--amber-sourd);
  background:var(--panel);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a1b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:15px;
  padding-right:32px;
}
input[type=search]::-webkit-search-cancel-button{ filter:invert(.5); }

label{ font-size:var(--t-xs); color:var(--ink-dim); font-weight:500; }

/* Champ fichier : le contrôle natif est illisible, on habille son bouton */
input[type=file]{
  width:100%;
  background:var(--panel-2);
  border:1px dashed var(--panel-border-fort);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-size:var(--t-sm);
  color:var(--ink-dim);
  cursor:pointer;
  transition:var(--transition);
}
input[type=file]:hover{ border-color:var(--amber); background:var(--amber-sourd); }
input[type=file]::file-selector-button{
  margin-right:12px;
  background:var(--panel-3);
  border:1px solid var(--panel-border);
  color:var(--ink);
  border-radius:var(--radius-xs);
  padding:6px 12px;
  font-family:inherit; font-size:var(--t-xs); font-weight:600;
  cursor:pointer;
  transition:var(--transition);
}
input[type=file]::file-selector-button:hover{ background:var(--amber); color:var(--amber-ink); border-color:var(--amber); }

input[type=color]{
  width:44px; height:34px; padding:2px;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); cursor:pointer;
}

input[type=checkbox], input[type=radio]{ accent-color:var(--amber); cursor:pointer; }

/* ---------------------------------------------------------------
   SURFACES
   --------------------------------------------------------------- */
.surface{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  box-shadow:var(--ombre-1);
}

/* Titre de section : petite capitale accentuée */
.section-titre{
  display:flex; align-items:center; gap:var(--e2);
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:700;
  color:var(--amber);
  margin-bottom:var(--e2);
}

/* ---------------------------------------------------------------
   BARRE DU HAUT + NAVIGATION PAR ONGLETS
   --------------------------------------------------------------- */
.topbar{
  display:flex; align-items:center; gap:var(--e4);
  padding:var(--e3) var(--e5);
  background:var(--panel);
  border-bottom:1px solid var(--panel-border);
  position:sticky; top:0; z-index:120;
  box-shadow:var(--ombre-1);
}
.brand{ display:flex; align-items:center; gap:var(--e3); min-width:0; }
.brand-mark{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:var(--radius-sm);
  background:linear-gradient(140deg, var(--amber), #f2712b);
  color:#1a1205; font-family:var(--font-titre); font-weight:700; font-size:13px;
  box-shadow:var(--ombre-1);
}
.brand-text{ min-width:0; }
.brand-text h1{ font-size:var(--t-md); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text p{ margin:1px 0 0; font-size:var(--t-xs); color:var(--ink-faint); }

/* Onglets de navigation entre les trois modules */
.nav-onglets{
  display:flex; align-items:center; gap:2px;
  background:var(--panel-2);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-sm);
  padding:3px;
}
.nav-onglet{
  display:inline-flex; align-items:center; gap:var(--e2);
  padding:7px 13px;
  border-radius:var(--radius-xs);
  font-size:var(--t-sm); font-weight:600;
  color:var(--ink-dim); text-decoration:none;
  transition:var(--transition);
  white-space:nowrap;
}
.nav-onglet:hover{ color:var(--ink); background:var(--panel-3); }
.nav-onglet.actif{
  background:var(--panel); color:var(--ink);
  box-shadow:var(--ombre-1);
}
.nav-onglet.actif .ico{ color:var(--amber); }

.topbar-actions{ display:flex; align-items:center; gap:var(--e2); margin-left:auto; }

/* ---------------------------------------------------------------
   NOTIFICATION (toast)
   --------------------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:26px;
  transform:translate(-50%, 16px);
  display:flex; align-items:center; gap:var(--e2);
  background:var(--panel-3);
  border:1px solid var(--panel-border-fort);
  color:var(--ink);
  border-radius:var(--radius-full);
  padding:10px 18px;
  font-size:var(--t-sm); font-weight:500;
  box-shadow:var(--ombre-3);
  opacity:0; pointer-events:none;
  transition:opacity var(--transition), transform var(--transition);
  z-index:600;
  max-width:calc(100vw - 32px);
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast .dot{
  width:7px; height:7px; border-radius:50%; background:var(--vert); flex:none;
  box-shadow:0 0 0 3px var(--vert-sourd);
}

/* ---------------------------------------------------------------
   ÉTIQUETTES D'ÉTAT
   --------------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:var(--e1);
  padding:2px 9px;
  border-radius:var(--radius-full);
  font-size:var(--t-xs); font-weight:600;
  background:var(--panel-3); color:var(--ink-dim);
  border:1px solid var(--panel-border);
}
.chip-succes{ background:var(--vert-sourd); color:var(--vert); border-color:transparent; }
.chip-attention{ background:var(--amber-sourd); color:var(--amber); border-color:transparent; }
.chip-danger{ background:var(--rouge-sourd); color:var(--rouge); border-color:transparent; }

.empty-note{
  font-size:var(--t-sm); color:var(--ink-faint);
  text-align:center; padding:var(--e5) var(--e3); line-height:1.55;
}

/* ---------------------------------------------------------------
   RESPONSIVE — barre du haut
   --------------------------------------------------------------- */
@media (max-width:900px){
  .topbar{ padding:var(--e2) var(--e3); gap:var(--e2); flex-wrap:wrap; }
  .brand-text p{ display:none; }
  .brand-text h1{ font-size:var(--t-base); }
  .brand-mark{ width:30px; height:30px; font-size:12px; }

  /* Les onglets passent sur une ligne pleine, en icônes + texte court */
  .nav-onglets{ order:3; flex:1 1 100%; justify-content:space-between; }
  .nav-onglet{ flex:1; justify-content:center; padding:8px 6px; font-size:var(--t-xs); }

  .topbar-actions{ gap:var(--e1); }
}

/* Le libellé des onglets ne disparaît qu'en tout dernier recours : sans lui,
   on ne sait plus dans quel module on se trouve. */
@media (max-width:360px){
  .nav-onglet span{ display:none; }
  .nav-onglet{ padding:9px 4px; }
  .nav-onglet .ico{ width:18px; height:18px; }
}