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

/* =====================================================================
   irk.css — THÈME CENTRAL IR KELVIN  (source unique de vérité)
   ---------------------------------------------------------------------
   Une seule feuille de style pour TOUT le site ir-kelvin.com.
   Chaque page la charge avec UNE ligne dans <head> :
       <link rel="stylesheet" href="/css/irk.css">
   ...puis utilise les CLASSES ci-dessous (.btn-primary, .chip-admin, ...)
   au lieu de son propre bloc <style>.

   POUR RE-THÉMER LE SITE ENTIER : change les variables dans :root.
   Exemple — l'orange des boutons = la variable --btn-bg (un seul endroit).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) TOKENS — change ici, tout le site suit
   --------------------------------------------------------------------- */
:root{
  /* Surfaces & texte */
  --bg:#F3F2F0;            /* fond de page              */
  --surface:#FFFFFF;       /* cartes, panneaux          */
  --surface-2:#F8F7F5;     /* fonds secondaires, entêtes de tableau */
  --ink:#18191B;           /* texte principal (charbon) */
  --ink-2:#5C5E62;         /* texte secondaire          */
  --ink-3:#8E9095;         /* texte tertiaire / discret */
  --line:#E6E4E1;          /* filets, bordures          */
  --line-2:#D6D3CF;        /* bordures de champs        */

  /* Marque — signature thermique (le logo) */
  --grad:linear-gradient(90deg,#F00000 0%,#F26A00 52%,#F0A800 100%);
  --brand:#C2410C;         /* accent en AVANT-PLAN : liens, focus, états actifs (lisible sur blanc) */
  --brand-bg:#FBEAE0;      /* fond teinté chaud (sélection, surbrillance) */
  --brand-ink:#9A3008;     /* texte sur fond teinté chaud */

  /* Boutons d'action — orange FRANC (jamais le rouge brique) */
  --btn-bg:#ED6A1A;        /* <-- LE orange des boutons. Change ici = tous les boutons du site */
  --btn-bg-hover:#D2540C;
  --btn-text:#FFFFFF;

  /* Rôles — poids visuel = niveau de privilège */
  --admin-bg:#18191B;  --admin-ink:#FFFFFF;        /* Admin = charbon plein (autorité) */
  --editeur-bg:#FBE3D2; --editeur-ink:#9A3008;     /* Éditeur = ambre chaud (édition)  */
  --lecture-bg:#ECEAE7; --lecture-ink:#5C5E62;     /* Lecture = gris froid (passif)    */
  --none-line:#D6D3CF;  --none-ink:#9CA0A4;        /* Aucun = pointillé discret        */

  /* États sémantiques */
  --ok:#2E7D46;    --ok-bg:#E4F1E8;    --ok-line:#C6E2CF;   /* succès / actif / confirmé */
  --danger:#B3261E; --danger-bg:#F7E4E1;                    /* destructif / erreur (rouge réservé) */
  --pend:#9A3008;  --pend-bg:#FBEAE0;  --pend-line:#F0D6C4; /* invité / à confirmer */

  /* Polices, rayons, ombres */
  --font:'Inter',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:12px; --r-sm:8px; --r-pill:20px;
  --shadow:0 1px 2px rgba(24,25,27,.05), 0 8px 24px rgba(24,25,27,.06);
  --shadow-lg:0 1px 2px rgba(24,25,27,.05), 0 12px 34px rgba(24,25,27,.10);
}

/* ---------------------------------------------------------------------
   2) BASE
   --------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font); background:var(--bg); color:var(--ink);
     font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;}
.mono{font-family:var(--mono)}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ---------------------------------------------------------------------
   3) SIGNATURE — filet thermique (à mettre en tout haut du <body>)
   --------------------------------------------------------------------- */
.irk-thermal{height:3px; background:var(--grad)}

/* ---------------------------------------------------------------------
   4) BARRE DU HAUT
   --------------------------------------------------------------------- */
.irk-topbar{background:var(--surface); border-bottom:1px solid var(--line);
     display:flex; align-items:center; gap:14px; padding:0 22px; height:62px}
.irk-topbar .logo{height:30px; width:auto; display:block}
.irk-topbar .ctx{font-size:13px; color:var(--ink-2); font-weight:500;
     padding-left:14px; border-left:1px solid var(--line)}
.irk-topbar .spacer{flex:1}
.irk-topbar .me{display:flex; align-items:center; gap:9px; color:var(--ink-2); font-size:13px}
.irk-topbar .av{width:30px; height:30px; border-radius:50%; background:var(--grad);
     color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px}

/* En-tête applicatif : logo cliquable + liens de nav + compte + burger mobile */
.irk-topbar .brand{display:flex; align-items:center; text-decoration:none}
.irk-topbar .brand .logo{height:30px; width:auto; display:block}
.irk-topbar nav{display:flex; gap:4px; align-items:center}
.irk-topbar nav a{font-size:13.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
     padding:7px 11px; border-radius:var(--r-sm)}
.irk-topbar nav a:hover{background:var(--surface-2); color:var(--ink)}
.irk-topbar nav a.active{color:var(--btn-bg); background:var(--brand-bg)}
.irk-topbar .acct{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2)}
.irk-topbar .acct b{color:var(--ink)}
.irk-topbar .acct .pill{font-size:9px; font-weight:700; color:#fff; background:var(--grad);
     padding:2px 8px; border-radius:var(--r-pill); letter-spacing:.02em}
.irk-topbar .acct a{color:var(--ink-3); font-weight:600; text-decoration:none}
.irk-topbar .acct a:hover{color:var(--btn-bg)}
.irk-topbar .burger{display:none; flex-direction:column; gap:4px; background:none; border:none;
     cursor:pointer; padding:6px}
.irk-topbar .burger span{width:20px; height:2px; background:var(--ink-2); border-radius:2px}
@media (max-width:720px){
  .irk-topbar{flex-wrap:wrap; gap:8px; height:auto; padding:10px 18px}
  .irk-topbar .burger{display:flex; margin-left:auto}
  .irk-topbar nav, .irk-topbar .acct{display:none; width:100%; flex-direction:column;
       align-items:flex-start; gap:2px; padding-top:6px}
  .irk-topbar nav a{width:100%}
  .irk-topbar.open nav, .irk-topbar.open .acct{display:flex}
  .irk-topbar .spacer{display:none}
}

/* ---------------------------------------------------------------------
   5) MISE EN PAGE
   --------------------------------------------------------------------- */
.irk-wrap{max-width:1100px; margin:0 auto; padding:26px 22px 70px}
.irk-eyebrow{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
     color:var(--ink-3); margin:0 0 12px}
/* étiquette discrète (ex. "lecture seule", "prototype") */
.irk-tag{font-size:11px; font-weight:600; color:var(--ink-3);
     border:1px dashed var(--line-2); padding:2px 9px; border-radius:var(--r-pill)}

/* ---------------------------------------------------------------------
   6) BOUTONS
   --------------------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
     border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
     font-family:var(--font); font-size:13px; font-weight:600; padding:8px 15px;
     border-radius:var(--r-sm); cursor:pointer; transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-text)}
.btn-primary:hover{background:var(--btn-bg-hover); border-color:var(--btn-bg-hover)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2)}
/* rouge RÉSERVÉ aux actions destructives (révoquer, supprimer) */
.btn-danger{background:transparent; border-color:transparent; color:var(--danger)}
.btn-danger:hover{background:var(--danger-bg)}
.btn-block{width:100%}
.btn-sm{padding:5px 11px; font-size:12px}

/* ---------------------------------------------------------------------
   7) FORMULAIRES
   --------------------------------------------------------------------- */
.field{margin-bottom:18px}
.field>label{display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:7px}
.field .opt{font-weight:400; color:var(--ink-3)}
.input{width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm);
     padding:10px 12px; font-family:var(--font); font-size:14px; color:var(--ink); background:var(--surface)}
.input.mono{font-family:var(--mono); font-size:13px}
.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg)}
.input.err{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg)}
.hint{font-size:11.5px; color:var(--ink-3); margin-top:6px}
.err-text{font-size:12px; color:var(--danger); margin-top:6px}
.row-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}

/* interrupteur (toggle) */
.switch{display:inline-flex; align-items:center; gap:11px}
.track{width:42px; height:24px; border-radius:var(--r-pill); background:var(--line-2);
     position:relative; transition:background .15s; border:0; padding:0; cursor:pointer}
.track.on{background:var(--ok)}
.track.sup.on{background:var(--grad)}            /* toggle "super admin" = signature */
.track .knob{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
     background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.track.on .knob{transform:translateX(18px)}

/* ---------------------------------------------------------------------
   8) CARTES, PANNEAUX, TABLEAUX
   --------------------------------------------------------------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
     box-shadow:var(--shadow-lg); overflow:hidden}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
     box-shadow:var(--shadow); overflow:hidden}
table.irk{width:100%; border-collapse:collapse}
table.irk thead th{text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em;
     text-transform:uppercase; color:var(--ink-3); padding:12px 18px;
     border-bottom:1px solid var(--line); background:var(--surface-2)}
table.irk thead th.c{text-align:center}
table.irk tbody td{padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:middle}
table.irk tbody tr:last-child td{border-bottom:0}
table.irk tbody td.c{text-align:center}
table.irk tbody tr.off{opacity:.55}
.irk-empty{padding:40px 18px; text-align:center; color:var(--ink-3); font-size:13.5px}

/* ---------------------------------------------------------------------
   9) PASTILLES DE RÔLE  (poids = privilège)
   --------------------------------------------------------------------- */
.chip{display:inline-block; font-size:12px; font-weight:600; padding:4px 11px;
     border-radius:var(--r-pill); min-width:60px; text-align:center}
.chip-admin{background:var(--admin-bg); color:var(--admin-ink)}
.chip-editeur{background:var(--editeur-bg); color:var(--editeur-ink)}
.chip-lecture{background:var(--lecture-bg); color:var(--lecture-ink)}
.chip-none{background:transparent; color:var(--none-ink); border:1px dashed var(--none-line)}

/* ---------------------------------------------------------------------
   10) STATUTS & VÉRIFICATIONS
   --------------------------------------------------------------------- */
.status{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500}
.status .led{width:7px; height:7px; border-radius:50%}
.status.on{color:var(--ok)}        .status.on .led{background:var(--ok)}
.status.off{color:var(--ink-3)}    .status.off .led{background:var(--ink-3)}
.status.invited{color:var(--pend)} .status.invited .led{background:var(--pend)}
/* indicateur courriel/cellulaire confirmé */
.v-ok{color:var(--ok); font-weight:600; font-size:12px}
.v-pend{color:var(--pend); font-weight:600; font-size:11px}
.v-none{color:var(--ink-3)}

/* ---------------------------------------------------------------------
   11) BADGES
   --------------------------------------------------------------------- */
.badge-super{font-size:10px; font-weight:700; color:#fff; background:var(--grad);
     padding:2px 8px; border-radius:var(--r-pill); letter-spacing:.03em}

/* ---------------------------------------------------------------------
   12) CONTRÔLE SEGMENTÉ (filtres, onglets)
   --------------------------------------------------------------------- */
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line);
     border-radius:var(--r-sm); padding:3px}
.seg button{border:0; background:transparent; color:var(--ink-2); font-family:var(--font);
     font-size:13px; font-weight:500; padding:5px 13px; border-radius:5px; cursor:pointer}
.seg button.on{background:var(--surface); color:var(--brand); font-weight:600;
     box-shadow:0 1px 2px rgba(24,25,27,.12)}
