:root{
  /* Luxe minimal */
  --bg: #f6f0e5;      /* fond beige clair — TOUTE l'app */
  --card:#ffffff;     /* cartes/champs */
  --text:#0f1720;
  --muted:#6b7280;
  --line:#ebe5d9;

  --gold-1:#f4cc68;
  --gold-2:#dba63c;

  --shadow:0 10px 28px rgba(0,0,0,.10);
  --soft-shadow:0 6px 18px rgba(0,0,0,.08);
}

html[data-theme="dark"]{
  --bg:#0f1419;
  --card:#151a21;
  --text:#eef2f7;
  --muted:#9aa4b2;
  --line:#222933;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --soft-shadow:0 8px 22px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--card); box-shadow:var(--soft-shadow);
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:30px;height:30px;border-radius:50%}
.brand-text{font-weight:800; letter-spacing:.5px}
.theme-toggle button{
  border:1px solid var(--line); background:transparent; color:var(--text);
  width:44px;height:38px;border-radius:12px;margin-left:8px;cursor:pointer
}

/* Layout */
.container{max-width:940px;margin:22px auto;padding:0 14px}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:22px; box-shadow:var(--shadow); padding:18px;
}
.card h1{margin:6px 0 14px; font-size:28px}
.card h2{margin:0}

.card-lite{
  margin-top:18px; padding:18px; border-radius:20px;
  background:var(--card); border:1px dashed var(--line);
}

.hidden{display:none !important}

/* Form */
.field{margin:14px 0}
.field label{display:block;font-weight:700;margin-bottom:8px}

input[type=text],input[type=password],select,textarea{
  width:100%; padding:14px 16px; border-radius:16px;
  border:1px solid transparent; background:var(--card); color:var(--text);
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.06);
}
textarea{resize:vertical}

/* Rôle */
/* ---- Couleurs de rôles (si pas déjà dans :root) ---- */
:root{
  --poseur:  #3b82f6;  /* bleu */
  --artisan: #7c3aed;  /* violet */
  --chef:    #f59e0b;  /* jaune */
  --patron:  #10b981;  /* vert */
}

/* ---- Badge intervenant (respire + look premium) ---- */
.role-badge{
  /* + air autour et dedans */
  margin: 18px 0 0;
  padding: 14px 18px;

  display: flex; align-items: center; gap: 12px;
  border-radius: 16px;

  /* fond très léger teinté par le rôle (fallback or si --role absent) */
  background: color-mix(in srgb, var(--role, var(--gold-1)) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--role, var(--gold-1)) 28%, var(--line));
  box-shadow: var(--soft-shadow);
}

/* Pastille couleur rôle + respiration */
.role-badge .dot{
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--role, var(--gold-2));
  /* halo contrôlé par la couleur du rôle */
  animation: dot-breathe 2.8s ease-in-out infinite;
}
@keyframes dot-breathe{
  0%,100%{
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--role, #000) 30%, transparent);
    transform: scale(1);
  }
  50%{
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--role, #000) 10%, transparent);
    transform: scale(1.02);
  }
}

/* ---- Attribution du rôle (2 façons possibles) ---- */
/* A) si tu ajoutes une classe sur le conteneur : */
.role-badge.is-poseur  { --role: var(--poseur); }
.role-badge.is-artisan { --role: var(--artisan); }
.role-badge.is-chef    { --role: var(--chef); }
.role-badge.is-patron  { --role: var(--patron); }

/* B) compat avec ton markup actuel où seule la pastille a la classe */
.role-badge .dot.poseur  { --role: var(--poseur); }
.role-badge .dot.artisan { --role: var(--artisan); }
.role-badge .dot.chef    { --role: var(--chef); }
.role-badge .dot.patron  { --role: var(--patron); }
}
/* Pills */
.pill{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px; border-radius:18px; border:1px solid var(--line);
  background:var(--card); cursor:pointer; box-shadow:var(--soft-shadow);
}
.pill .pill-text{font-weight:700}

.icon-round{
  width:46px;height:46px;border-radius:999px;border:1px solid var(--line);
  background:var(--card); display:flex;align-items:center;justify-content:center;
  box-shadow:var(--soft-shadow); color:var(--text)
}

/* Flèche de téléchargement (sobre, suit --text) */
.dl-icon{width:22px;height:22px;position:relative;display:inline-block}
.dl-icon::before,.dl-icon::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  background:currentColor; border-radius:2px
}
.dl-icon::before{width:3px;height:12px;top:2px}
.dl-icon::after{width:16px;height:3px;bottom:0}
.dl-icon::before{
  /* petite tête de flèche */
  clip-path:polygon(0 0,100% 0,100% 70%,70% 70%,70% 100%,30% 100%,30% 70%,0 70%);
}

/* Boutons */
.actions{display:flex;justify-content:center;margin:18px 0}
.btn{
  border:none;cursor:pointer;font-weight:900;letter-spacing:.6px;
  padding:18px 22px;border-radius:999px; width:100%;
  box-shadow:0 14px 38px rgba(219,166,60,.30); color:#111
}
.btn.gold{background:linear-gradient(135deg,var(--gold-1),var(--gold-2))}
.btn.gold:active{transform:translateY(1px)}

@keyframes breathe{
  0%,100%{ transform:scale(1); box-shadow:0 16px 44px rgba(219,166,60,.28) }
  50%{ transform:scale(1.02); box-shadow:0 24px 56px rgba(219,166,60,.42) }
}
.pulse{animation:breathe 3.6s ease-in-out infinite}
.pulse-strong{animation:breathe 2.8s ease-in-out infinite}

/* Timer */
.run-head{text-align:center;margin-top:8px}
.run-brand .brand-text{font-size:22px}
.kicker{margin-top:6px;letter-spacing:2px;color:var(--muted)}
.timer{
  margin-top:10px; font-size:clamp(36px,10vw,58px); font-weight:900; letter-spacing:2px;
  display:inline-block; padding:10px 18px; border-radius:16px; border:1px solid var(--line);
  background:var(--card)
}
.run-info{margin:10px auto 0; max-width:560px}
.info-line{margin:6px 0}
.pin-drop{filter:grayscale(.1)}

/* Correctifs d’alignement premium : icônes rondes à droite */
.pill,
.recap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* On garantit que l'icône reste bien collée à droite */
.pill .icon-round,
.recap-head .icon-round {
  margin-left: auto;
}

/* Texte plus petit pour les labels "Télécharger une facture" */
.pill-text {
  font-size: 15px;          /* plus fin, plus premium */
  font-weight: 600;
}

/* Icônes plus petites + centrage vertical parfait */
.icon-round {
  width: 38px;              /* avant 46px */
  height: 38px;
  min-width: 38px;
  min-height: 38px;
}

.icon-round .dl-icon {
  transform: scale(0.78);   /* rétrécit l’icône proprement */
}

/* Pour être certain que tout est centré verticalement */
.pill,
.recap-head {
  align-items: center;
}

/* Alignement vertical parfait texte + icône */
.pill,
.recap-head {
  display: flex;
  align-items: center;       /* aligne verticalement */
  justify-content: space-between;
}

/* Taille premium de l’icône ronde */
.icon-round {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;       /* centre l’icône dans le cercle */
  justify-content: center;
}

/* Réduction de l’icône interne */
.icon-round .dl-icon {
  transform: scale(0.78);
  margin-top: 0;             /* enlève le petit décalage parasite */
}

/* Remonter le titre + l’icône du bloc Récap */
.card-lite {
  padding-top: 26px;   /* avant ~18px → le bloc respire mieux */
  padding-bottom: 26px;
}

/* Ajuster l’alignement vertical du header du récap */
.recap-head {
  margin-top: -6px;    /* remonte le texte + l'icône */
}

/* Remonter légèrement l’icône pour qu’elle soit parfaitement centrée */
.recap-head .icon-round {
  margin-top: -2px;
}
/* ===========================
   ADD-ON LÉGER (append only)
   =========================== */

/* Variables couleurs (fallback si déjà définies plus haut) */
:root{
  --bg:#f6f0e5;
  --card:#ffffff;
  --text:#0f1720;
  --line:#e6e6e6;
  --muted:#6b7280;
  --shadow: 0 10px 28px rgba(0,0,0,.10);
  --soft-shadow: 0 8px 22px rgba(0,0,0,.08);

  --gold-1:#facf68;
  --gold-2:#dba63c;
}

/* Conteneur et cartes */
.container{ max-width:940px; margin:22px auto; padding:0 14px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:18px; }
.card-lite{ background:var(--card); border:1px dashed var(--line); border-radius:20px; padding:18px; }

/* Typo de base ; tu as déjà quelque chose de proche, ici c’est juste du renfort */
body{ background:var(--bg); color:var(--text); }

/* Champs formulaires – renfort */
input[type=text],input[type=password],select,textarea{
  width:100%; padding:14px 16px; border-radius:16px;
  border:1px solid transparent; background:var(--card); color:var(--text);
  box-shadow:0 0 0 rgba(0,0,0,0), 0px 4px 12px rgba(0,0,0,.06);
}
input:focus,textarea:focus{ outline:none; border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.15); }

/* Boutons start/stop (tu as déjà .btn-start/.btn-stop : ici on renforce) */
.btn-start{
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  color:#111; font-weight:800; border:0; border-radius:12px;
  padding:14px 16px; width:100%;
  box-shadow:0 18px 22px rgba(239,166,60,.28);
  transition:.15s transform ease, filter .15s ease;
}
.btn-start:hover{ filter:brightness(.98) }
.btn-start:active{ transform:translateY(1px) }

.btn-stop{
  background:#0b981; color:#fff; font-weight:800; border:0; border-radius:12px;
  padding:14px 16px; width:100%;
  box-shadow:0 18px 22px rgba(16,185,129,.25);
  transition:.15s transform ease, filter .15s ease;
}
.btn-stop:hover{ filter:brightness(.96) }
.btn-stop:active{ transform:translateY(1px) }

/* Pile des boutons (alignement propre desktop/mobile) */
.actions-stack{ margin-top:1.4rem; display:grid; gap:12px; }
@media (min-width:680px){
  .actions-stack{ grid-template-columns:1fr 1fr; }
}

/* “Badge rôle” minimal si tu l’utilises */
.role-badge{ display:flex; align-items:center; gap:8px; margin:.8rem 0; }
.role-badge .dot{ width:12px; height:12px; border-radius:999px; background:#38bdf8; }