/* =====================================================================
   INFLU — Espace Talents · feuille de style
   Jaune Citron #F0E030 · Noir #0C0C0D · Arial Black / Arial
   ===================================================================== */

:root{
  --jaune:#F0E030;
  --jaune-doux:#FBF6C9;
  --noir:#0C0C0D;
  --gris-900:#1c1c1e;
  --gris-600:#6b6b70;
  --gris-300:#d9d9dd;
  --gris-100:#f2f2f4;
  --blanc:#ffffff;
  --vert:#1f9254;
  --vert-clair:#e4f5ea;
  --rouge:#c0392b;
  --rouge-clair:#fbe8e6;
  --rayon:12px;
  --ombre:0 2px 10px rgba(12,12,13,.07);
  --barre-h:60px;
  --late-l:212px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--gris-100);
  color:var(--noir);
  font-size:15px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:inherit}
h1,h2,h3{font-family:'Arial Black',Arial,sans-serif;letter-spacing:-.3px;margin:0 0 10px}
h1{font-size:24px}
h2{font-size:18px}
h3{font-size:15px}
p{margin:0 0 12px}

/* ---------- Barre du haut ------------------------------------------ */
.barre{
  position:fixed;top:0;left:0;right:0;height:var(--barre-h);z-index:40;
  background:var(--noir);color:var(--blanc);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;padding-top:env(safe-area-inset-top);
}
.barre .logo{
  font-family:'Arial Black',Arial,sans-serif;font-size:22px;letter-spacing:3px;
  color:var(--jaune);text-decoration:none;
}
.barre .logo span{color:var(--blanc)}
.barre-droite{display:flex;align-items:center;gap:14px;font-size:13px}
.barre .qui{opacity:.85;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre .deco{color:var(--jaune);text-decoration:none;border:1px solid rgba(240,224,48,.45);
  padding:5px 12px;border-radius:99px;font-size:12px}
.cloche{position:relative;display:block;width:22px;height:22px;color:var(--blanc)}
.cloche svg{width:22px;height:22px}
.cloche b{
  position:absolute;top:-6px;right:-8px;background:var(--jaune);color:var(--noir);
  font-size:10px;min-width:16px;height:16px;border-radius:99px;display:flex;
  align-items:center;justify-content:center;padding:0 4px;
}

/* ---------- Navigation latérale (ordinateur) ------------------------ */
.laterale{
  position:fixed;top:var(--barre-h);bottom:0;left:0;width:var(--late-l);
  background:var(--blanc);border-right:1px solid var(--gris-300);
  padding:18px 12px;display:flex;flex-direction:column;gap:4px;z-index:30;
}
.laterale a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:9px;
  text-decoration:none;color:var(--gris-600);font-size:14px;
}
.laterale a svg{width:19px;height:19px;flex:0 0 19px}
.laterale a:hover{background:var(--gris-100);color:var(--noir)}
.laterale a.on{background:var(--noir);color:var(--jaune);font-weight:bold}

/* ---------- Zone principale ----------------------------------------- */
main{
  margin:var(--barre-h) 0 0 var(--late-l);
  padding:26px 28px 60px;
  max-width:1180px;
}
main.nu{margin:0;padding:0;max-width:none}

.titre-page{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.titre-page p{color:var(--gris-600);font-size:14px;margin:0}

/* ---------- Cartes --------------------------------------------------- */
.carte{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:20px;margin-bottom:18px}
.carte.serre{padding:14px 16px}
.grille{display:grid;gap:16px}
.grille.g2{grid-template-columns:repeat(2,1fr)}
.grille.g3{grid-template-columns:repeat(3,1fr)}
.grille.g4{grid-template-columns:repeat(4,1fr)}

.kpi{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:16px 18px;border-left:4px solid var(--jaune)}
.kpi .n{font-family:'Arial Black',Arial,sans-serif;font-size:27px;line-height:1.1}
.kpi .l{color:var(--gris-600);font-size:12.5px;margin-top:3px}

/* ---------- Tableaux -------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--gris-600);padding:10px 10px;border-bottom:2px solid var(--gris-300);white-space:nowrap;
}
tbody td{padding:12px 10px;border-bottom:1px solid var(--gris-300);vertical-align:middle}
tbody tr:hover{background:#fbfbfc}
.table-fluide{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Pastilles ------------------------------------------------- */
.pastille{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:bold;white-space:nowrap}
.pastille.jaune{background:var(--jaune-doux);color:#7a6a00}
.pastille.vert{background:var(--vert-clair);color:var(--vert)}
.pastille.rouge{background:var(--rouge-clair);color:var(--rouge)}
.pastille.gris{background:var(--gris-100);color:var(--gris-600)}
.pastille.noir{background:var(--noir);color:var(--jaune)}

/* ---------- Formulaires ----------------------------------------------- */
label{display:block;font-size:12.5px;font-weight:bold;margin:0 0 5px;color:var(--gris-900)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=tel],input[type=url],input[type=file],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--gris-300);border-radius:9px;
  font:inherit;font-size:15px;background:var(--blanc);color:var(--noir);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--noir);box-shadow:0 0 0 3px rgba(240,224,48,.45)}
textarea{min-height:110px;resize:vertical}
.champ{margin-bottom:15px}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ligne3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.aide{font-size:12px;color:var(--gris-600);margin-top:4px}
.coche{display:flex;align-items:flex-start;gap:9px;font-size:14px;margin-bottom:10px}
.coche input{width:18px;height:18px;margin-top:2px;flex:0 0 18px;accent-color:var(--noir)}
.coche label{font-weight:normal;margin:0}

/* ---------- Boutons --------------------------------------------------- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:9px;border:0;cursor:pointer;
  font:inherit;font-weight:bold;font-size:14.5px;text-decoration:none;
  background:var(--noir);color:var(--jaune);
}
.bt:hover{background:var(--gris-900)}
.bt.jaune{background:var(--jaune);color:var(--noir)}
.bt.jaune:hover{filter:brightness(.95)}
.bt.vide{background:transparent;color:var(--noir);border:1.5px solid var(--gris-300)}
.bt.vide:hover{border-color:var(--noir);background:var(--blanc)}
.bt.rouge{background:var(--rouge-clair);color:var(--rouge)}
.bt.petit{padding:7px 13px;font-size:13px;border-radius:7px}
.bt[disabled]{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Messages flash -------------------------------------------- */
.flash{padding:13px 16px;border-radius:9px;margin-bottom:16px;font-size:14px}
.flash.ok{background:var(--vert-clair);color:var(--vert);border-left:4px solid var(--vert)}
.flash.erreur{background:var(--rouge-clair);color:var(--rouge);border-left:4px solid var(--rouge)}
.flash.info{background:var(--jaune-doux);color:#7a6a00;border-left:4px solid var(--jaune)}

/* ---------- Connexion -------------------------------------------------- */
.page-connexion{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--noir);padding:24px}
.boite{background:var(--blanc);border-radius:16px;padding:34px 30px;width:100%;max-width:410px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.boite .marque{font-family:'Arial Black',Arial,sans-serif;font-size:34px;letter-spacing:5px;text-align:center;margin-bottom:2px}
.boite .bl{text-align:center;font-size:11px;letter-spacing:1.4px;color:var(--gris-600);margin-bottom:26px}
.boite .bt{width:100%}
.boite .liens{text-align:center;margin-top:18px;font-size:13px}
.boite .liens a{color:var(--gris-600)}

/* ---------- Campagnes --------------------------------------------------- */
.camp{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);padding:18px;margin-bottom:14px;
  border-left:4px solid var(--jaune);display:block;text-decoration:none}
.camp.gifting{border-left-color:var(--gris-300)}
.camp.affiliation{border-left-color:#9b7cf0}
.camp h3{margin-bottom:5px}
.camp .meta{color:var(--gris-600);font-size:13px;display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.camp .cash{font-family:'Arial Black',Arial,sans-serif;font-size:19px}

/* ---------- Messagerie --------------------------------------------------- */
.fil{background:var(--blanc);border-radius:var(--rayon);box-shadow:var(--ombre);
  height:calc(100vh - var(--barre-h) - 190px);min-height:320px;overflow-y:auto;padding:18px;
  display:flex;flex-direction:column;gap:9px}
.bulle{max-width:74%;padding:10px 14px;border-radius:15px;font-size:14.5px;white-space:pre-wrap;word-wrap:break-word}
.bulle.moi{align-self:flex-end;background:var(--noir);color:var(--blanc);border-bottom-right-radius:4px}
.bulle.lui{align-self:flex-start;background:var(--gris-100);border-bottom-left-radius:4px}
.bulle .h{display:block;font-size:10.5px;opacity:.6;margin-top:4px}
.envoi{display:flex;gap:10px;margin-top:12px}
.envoi textarea{min-height:48px;height:48px}

/* ---------- Listes de discussions ----------------------------------------- */
.disc{display:flex;align-items:center;gap:13px;padding:13px;border-bottom:1px solid var(--gris-300);text-decoration:none}
.disc:hover{background:var(--gris-100)}
.rond{width:42px;height:42px;border-radius:99px;background:var(--noir);color:var(--jaune);
  display:flex;align-items:center;justify-content:center;font-family:'Arial Black',Arial,sans-serif;
  font-size:14px;flex:0 0 42px}
.disc .txt{flex:1;min-width:0}
.disc .txt b{display:block;font-size:14.5px}
.disc .txt span{display:block;color:var(--gris-600);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Divers ---------------------------------------------------------- */
/* Bloc « aucun résultat ». Le :not(.bt) est indispensable : « vide » sert aussi
   de variante de bouton (.bt.vide), et sans lui ces boutons héritaient d'un
   remplissage de 46px — d'où les gros rectangles à la place de « Réinitialiser ». */
.vide:not(.bt){text-align:center;color:var(--gris-600);padding:46px 20px}
.vide:not(.bt) b{display:block;font-family:'Arial Black',Arial,sans-serif;font-size:16px;color:var(--noir);margin-bottom:6px}
.sep{height:1px;background:var(--gris-300);margin:20px 0}
.mini{font-size:12.5px;color:var(--gris-600)}
.contrat{background:var(--blanc);padding:30px;border-radius:var(--rayon);font-size:14px;line-height:1.7}
.contrat h2{font-size:15px;margin:22px 0 8px;text-transform:uppercase;letter-spacing:.5px}
.contrat h1{font-size:19px;text-align:center;margin-bottom:6px}
.progression{height:7px;background:var(--gris-300);border-radius:99px;overflow:hidden;margin-top:8px}
.progression i{display:block;height:100%;background:var(--jaune)}
.filtres{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;align-items:end}
.nav-bas-espace{display:none}

/* ---------- Téléphone --------------------------------------------------------- */
.bas{display:none}

@media (max-width:860px){
  .laterale{display:none}
  main{margin-left:0;padding:18px 14px 92px}
  .grille.g2,.grille.g3,.grille.g4{grid-template-columns:1fr}
  .ligne,.ligne3{grid-template-columns:1fr}
  h1{font-size:21px}
  .barre .qui{display:none}
  .bas{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;
    background:var(--blanc);border-top:1px solid var(--gris-300);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bas a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    text-decoration:none;color:var(--gris-600);font-size:10.5px;padding:5px 2px;border-radius:8px;
  }
  .bas a svg{width:21px;height:21px}
  .bas a.on{color:var(--noir);font-weight:bold}
  .bas a.on svg{color:var(--noir)}
  .fil{height:calc(100vh - var(--barre-h) - 230px)}
  .bulle{max-width:88%}
  .carte{padding:16px}
  .contrat{padding:18px}
}

@media print{
  .barre,.laterale,.bas,.actions,.flash{display:none !important}
  main{margin:0;padding:0;max-width:none}
  body{background:#fff}
  .carte,.contrat{box-shadow:none;padding:0}
}