/*
 * CHARTE BEESQUAD — feuille commune à toutes les pages de app.beesquad.ca.
 * Mêmes couleurs, polices et courbes que beesquad.ca (~/beesquad-site-dev/style.css, :root).
 * Chargée en DERNIER dans chaque page : elle redirige les anciennes variables vers la charte,
 * met les coins au carré comme sur le site (pastilles et points restent ronds) et unifie les boutons.
 * Pour changer une couleur de la marque : la changer ici ET dans le style.css du site.
 */
:root{
  /* ── Charte du site (identique à beesquad.ca) ── */
  --bee-primary:#ffd34d; --bee-primary-hover:#ffe58a; --bee-secondary:#14cfe0;
  --bee-background:#08131f; --bee-surface:#102838; --bee-paper:#f5f1e7; --bee-ink:#08131f;
  --bee-muted:#a7bbc4; --bee-line:rgba(245,241,231,.16); --bee-error:#bd5545;
  --font-display:"Aptos Display","Segoe UI",Arial,sans-serif;
  --font-body:"Aptos","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);

  /* ── Anciennes variables de l'application, redirigées vers la charte ── */
  --bg:var(--bee-background); --bg2:#0c1b29; --bg3:var(--bee-surface); --bg4:#15313f; --bg5:#1b3a4a;
  --text:var(--bee-paper); --text2:#c9d5da; --muted:var(--bee-muted); --muted2:#6e8793;
  --border:rgba(245,241,231,.08); --border2:rgba(245,241,231,.12); --border3:var(--bee-line);
  --cyan:var(--bee-secondary); --cyan-h:#0fb8c8; --cyan-dim:rgba(20,207,224,.08); --cyan-brd:rgba(20,207,224,.2);
  --accent:var(--bee-secondary);        /* accent secondaire : cyan du site */
  --accent2:var(--bee-primary);         /* accent principal : jaune du site (était un vert) */
  --purple:var(--bee-primary);          /* l'ancien violet n'existe pas dans la charte : jaune de la marque */
  --bee-yellow:var(--bee-primary); --bee-yellow-h:var(--bee-primary-hover);
  --font-h:var(--font-display); --font-b:var(--font-body);
  /* Couleurs de sens (statut), gardées mais accordées à la palette */
  --ok:#3cc68a; --amber:#f5b83d; --danger:#e0604f; --red:var(--danger); --green:var(--ok);
  --r:0; --r-lg:0; --r-xl:0;
  --shadow:0 0 0 1px var(--bee-line),0 12px 32px rgba(0,0,0,.35);
}

html,body{background:var(--bee-background)}
body{font-family:var(--font-body);color:var(--bee-paper)}
h1,h2,h3,h4,.page-title,.card-title,.ov-titre,.logo,.brand{font-family:var(--font-display)}
.page-title{font-weight:750;letter-spacing:-.04em}

/* ── Coins carrés, comme sur le site ── */
body *{border-radius:0!important}
/* … sauf ce qui doit rester rond : pastilles, badges, points, avatars, épingles de carte */
.badge,.badge-live,.pulse,.avatar,.nav-badge,.step-badge,.status-dot,
[class*="lead-pin"],
[style*="border-radius:50%"],[style*="border-radius: 50%"],
[style*="border-radius:999px"],[style*="border-radius: 999px"],
[style*="border-radius:9999px"],[style*="border-radius:99px"]{border-radius:999px!important}

/* ── Boutons : jaune pour l'action principale, contour pour le reste (comme .button / .button-outline du site) ── */
.btn{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--bee-primary)!important;color:var(--bee-ink)!important;border:1px solid var(--bee-primary)!important}
.btn-primary:hover{background:var(--bee-primary-hover)!important;border-color:var(--bee-primary-hover)!important;transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,211,77,.18)!important}
.btn-outline{background:transparent;color:var(--bee-paper);border:1px solid var(--bee-line)}
.btn-outline:hover{border-color:var(--bee-primary);color:var(--bee-primary);background:rgba(255,211,77,.06)}

/* ── Focus visible au clavier, jaune comme le site ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--bee-primary);outline-offset:2px}

/* ── Champs de formulaire ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{font-family:var(--font-body)}
input:focus,select:focus,textarea:focus{border-color:var(--bee-primary)!important;box-shadow:0 0 0 3px rgba(255,211,77,.14)!important}

/* ── Statut « actif » de la barre du haut : vert de sens, pas l'accent ── */
.badge-live{color:var(--ok)}
.pulse{background:var(--ok)}

/* ── Sélection de texte ── */
::selection{background:rgba(255,211,77,.35);color:var(--bee-paper)}

/* ── PAGES D'ENTRÉE (connexion, inscription, mot de passe) : carte crème du formulaire de beesquad.ca ── */
body.bs-auth{background:
  radial-gradient(ellipse 70% 45% at 50% 0%,rgba(255,211,77,.07),transparent 70%),
  repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(245,241,231,.045) 10% 10.1%),
  var(--bee-background);color:var(--bee-paper);font-family:var(--font-body)}
body.bs-auth .logo{font-family:var(--font-display);letter-spacing:-.04em}
body.bs-auth .lang-toggle{background:transparent;border:0;border-bottom:1px solid rgba(245,241,231,.3);padding:0}
body.bs-auth .lang-btn{background:transparent!important;color:var(--bee-muted);padding:7px 10px;font:700 10px/1 var(--font-display);letter-spacing:.12em}
body.bs-auth .lang-btn.active{color:var(--bee-primary)!important;background:transparent!important}
body.bs-auth .card{background:var(--bee-paper);color:var(--bee-ink);border:0;backdrop-filter:none;max-width:430px;padding:27px;
  box-shadow:16px 18px 0 rgba(255,211,77,.18),0 30px 70px rgba(0,0,0,.34)}
body.bs-auth .card-title{font:750 30px/1 var(--font-display);letter-spacing:-.06em;color:var(--bee-ink);margin-bottom:.6rem}
body.bs-auth .card-sub{color:#5b6e72;font-size:13px;margin-bottom:1.4rem}
body.bs-auth label{color:#4b626a;font:700 9px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
body.bs-auth input:not([type="checkbox"]):not([type="radio"]),body.bs-auth select{height:46px;padding:0 11px;background:#fffefa;color:var(--bee-ink);border:1px solid #bdc7bf;font-size:13px}
body.bs-auth input::placeholder{color:#8a9896}
body.bs-auth input:focus,body.bs-auth select:focus{border-color:#d69008!important;box-shadow:0 0 0 3px rgba(214,144,8,.16)!important;background:#fffefa}
body.bs-auth .btn{min-height:52px;background:var(--bee-primary);color:var(--bee-ink);border:1px solid var(--bee-primary);font:750 13px/1 var(--font-display);letter-spacing:.01em}
body.bs-auth .btn:hover{background:var(--bee-primary-hover);border-color:var(--bee-primary-hover);transform:translateY(-2px);box-shadow:none}
body.bs-auth .err{background:#fbeae6;border:1px solid var(--bee-error);color:#8f3527}
body.bs-auth .success,body.bs-auth #ok{background:#e4f2ea!important;border:1px solid #2f8f5f!important;color:#1d6a44!important}
body.bs-auth .bottom-link{color:#5b6e72}
body.bs-auth .bottom-link a{color:var(--bee-ink);font-weight:700;text-decoration:underline;text-decoration-color:#d69008;text-underline-offset:3px}
body.bs-auth .bottom-link a:hover{color:#8a5d00}
body.bs-auth .benefit{color:#53666b}
body.bs-auth .back-link a{color:var(--bee-muted)}
body.bs-auth .back-link a:hover{color:var(--bee-primary)}
@media (max-width:620px){body.bs-auth .card{padding:20px;box-shadow:10px 12px 0 rgba(255,211,77,.18),0 20px 50px rgba(0,0,0,.3)}body.bs-auth .card-title{font-size:27px}}

/* Inscription : coche des avantages en jaune foncé, lisible sur la carte crème */
body.bs-auth .benefit::before{background-color:#d69008}

/* ── Tableau de bord ── */
#user-pill .avatar{background:var(--bee-primary)!important;color:var(--bee-ink)!important}
.nav-step.active::before{background:var(--bee-primary)!important}
.nav-step.active .step-num{background:var(--bee-primary)!important;border-color:var(--bee-primary)!important;color:var(--bee-ink)!important}

/* ── ICONES : SVG monochromes de views/icones.svg (remplacent les émojis). Même taille relative et même trait partout ── */
.ico,.ico-ok,.ico-danger,.ico-warn,.ico-info,.ico-mute{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;flex-shrink:0;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}
.ico *,.ico-ok *,.ico-danger *,.ico-warn *,.ico-info *,.ico-mute *{vector-effect:non-scaling-stroke}  /* trait identique quelle que soit la taille */
.ico-ok{color:var(--ok)}.ico-danger{color:var(--danger)}.ico-warn{color:var(--amber)}.ico-info{color:var(--bee-secondary)}.ico-mute{color:var(--muted)}
/* États : gris au repos, crème au survol, jaune quand actif */
.nav-icon{color:var(--muted);transition:color .15s var(--ease)}
.nav-step:hover .nav-icon,.nav-item:hover .nav-icon{color:var(--bee-paper)}
.nav-step.active .nav-icon,.nav-item.active .nav-icon{color:var(--bee-primary)}
.nav-icon .ico,.stat-icon .ico{width:18px;height:18px;vertical-align:middle}
.stat-icon{color:var(--bee-primary)}
.empty-icon{color:var(--muted)}
.empty-icon .ico{width:44px;height:44px}
.nav-acc-arrow .ico{width:10px;height:10px;vertical-align:middle}
.btn .ico{margin-right:1px}
.tab .ico{margin-right:2px}

/* ── ELEMENTS : Sauvegarder / Écarter, même place sur tous les fils (à droite de la rangée d'actions) ── */
.elem-actions{display:inline-flex;gap:6px;margin-left:auto;align-items:center}
.elem-actions .btn{font-size:.7rem;padding:3px 9px}
.elem-sauver.elem-on{color:var(--bee-primary);border-color:rgba(255,211,77,.5);background:rgba(255,211,77,.08)}
.elem-sauver.elem-on .ico path{fill:currentColor}
.elem-ecarter:hover{color:var(--danger);border-color:rgba(224,96,79,.5);background:rgba(224,96,79,.06)}
.elem-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10000;display:flex;align-items:center;gap:14px;background:var(--bg3);border:1px solid var(--bee-line);padding:10px 14px;font-size:.84rem;box-shadow:0 12px 32px rgba(0,0,0,.45);max-width:calc(100vw - 32px)}
.elem-toast button{background:none;border:0;color:var(--bee-primary);font:700 .84rem var(--font-display);cursor:pointer;padding:2px 4px}
@media(max-width:600px){.elem-actions{margin-left:0;width:100%}}
.elem-vues{display:inline-flex;border:1px solid var(--bee-line);flex-shrink:0}
.elem-vue{background:transparent;border:0;color:var(--muted);padding:5px 10px;font:600 .74rem/1.2 var(--font-display);cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.elem-vue+.elem-vue{border-left:1px solid var(--bee-line)}
.elem-vue:hover{color:var(--bee-paper)}
.elem-vue.actif{color:var(--bee-ink);background:var(--bee-primary)}
.elem-retablir:hover{color:var(--bee-primary);border-color:rgba(255,211,77,.5)}
/* ELEMENTS_RAISON : raison facultative après « Écarter » (toast) et dans la vue Écartés */
.elem-toast{flex-wrap:wrap}
.elem-toast-raisons{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;font-size:.74rem;color:var(--muted)}
.elem-toast .elem-raison-btn{border:1px solid var(--bee-line);color:var(--bee-paper);font:600 .72rem var(--font-body,inherit);padding:3px 8px}
.elem-toast .elem-raison-btn:hover{border-color:var(--bee-primary);color:var(--bee-primary)}
select.elem-raison{width:auto;font-size:.7rem;padding:3px 6px;height:auto}
/* POURQUOI_VOUS_VOYEZ_CECI : critères du client retrouvés dans l'élément, et lien vers la source */
.pq-ligne{font-size:.72rem;color:var(--muted);line-height:1.45;margin-top:6px}
.pq-ligne b{color:var(--bee-paper);font-weight:600}
.pq-ligne .pq-raison{font-style:italic}
.pq-ligne .pq-source{margin-left:8px;white-space:nowrap}
/* INSCRIPTION : options de liste lisibles (le champ est clair sur les pages de connexion / inscription) */
body.bs-auth select option{background:#fffefa;color:var(--bee-ink)}
/* APPRENDRE_DES_ECARTES : bloc discret et replié sous « Vos critères » */
.cr-appr-bloc{margin-top:12px;border-top:1px solid var(--border);padding-top:8px}
.cr-appr-bloc>summary{cursor:pointer;font-size:.74rem;color:var(--muted);list-style-position:inside}
.cr-appr-bloc>summary:hover{color:var(--bee-paper)}
.cr-appr-bloc[open]>summary{margin-bottom:8px}
/* PROGRAMME_GENERAL : étiquette des programmes ouverts à toutes les entreprises */
.pg-chip{display:inline-block;font:600 .62rem var(--font-body);letter-spacing:.02em;text-transform:none;color:var(--muted);border:1px solid var(--border2,var(--border));padding:0 6px;margin-left:6px;vertical-align:middle}
/* VEILLE_DE_MARCHE : « Pourquoi ça vous concerne » (phrase du jugement), mise en avant sous chaque nouvelle */
.pq-ligne.pq-concerne{color:var(--text);font-size:.78rem}
/* VEILLE_DE_MARCHE : axe de chaque nouvelle */
.axe-chip{display:inline-block;font:600 .62rem var(--font-body);padding:0 6px;margin-left:6px;vertical-align:middle;border:1px solid var(--border2,var(--border))}
.axe-chip.axe-secteur{color:var(--bee-secondary,#14cfe0);border-color:rgba(20,207,224,.45)}
.axe-chip.axe-clients{color:var(--bee-primary,#ffd34d);border-color:rgba(255,211,77,.45)}
.ev-chip{display:inline-block;font:600 .62rem var(--font-body);padding:0 6px;margin-left:6px;vertical-align:middle;border:1px solid var(--border2,var(--border));color:var(--muted)}
.proche-chip{display:inline-block;font:600 .62rem var(--font-body);padding:0 6px;margin-left:6px;vertical-align:middle;border:1px solid rgba(34,197,94,.45);color:#16a34a}
.ev-filtres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ev-filtre{font:600 .7rem var(--font-body);padding:3px 10px;border-radius:999px;border:1px solid var(--border2,var(--border));background:transparent;color:var(--text);cursor:pointer}
.ev-filtre:hover{border-color:var(--accent2)}
.ev-filtre.ev-on{background:var(--accent2);color:#08131f;border-color:var(--accent2)}