/* App salon Refruiting - refonte 2026-09-28.
   Pense pour un stand : debout, une main, dans le bruit, en pleine lumiere.
   - cibles tactiles >= 48 px, actions principales >= 64 px, dans la zone du pouce (bas d'ecran) ;
   - contraste AA au minimum ; texte de base 17 px ;
   - AUCUNE police telechargee : tout doit marcher hors ligne ;
   - jetons de SURFACE et jetons de TEXTE separes (un meme jeton servant de fond et de texte a deja
     rendu un ecran illisible en theme sombre ailleurs dans ce projet). */

:root {
  --fond: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F1F3EE;
  --bord: #DDE2D8;
  --texte: #1F2A24;
  --texte-2: #55615A;
  --marque: #1F6B3A;          /* surface de marque */
  --sur-marque: #FFFFFF;      /* texte pose sur la marque */
  --marque-texte: #1F6B3A;    /* marque utilisee comme couleur de texte */
  --chaud: #C2410C;  --tiede: #985C06;  --froid: #1D4ED8;
  --ok: #147A3A;  --attention: #A94E08;  --danger: #B91C1C;
  /* Jetons de FOND pour les etats (texte blanc dessus, >= 4.5:1 dans LES DEUX themes). En theme
     sombre, --ok, --danger, --chaud... deviennent des couleurs claires faites pour du TEXTE :
     poses en fond sous du blanc, ils tombaient a 1.7-2.8:1 (toast « enregistree », boutons
     Chaud/Tiede/Froid choisis, bandeau hors ligne). Mesure le 2026-09-29. */
  --ok-fond: #15803D; --danger-fond: #B91C1C; --attention-fond: #B45309;
  --chaud-fond: #C2410C; --tiede-fond: #A16207; --froid-fond: #1D4ED8;
  --ombre: 0 1px 2px rgba(20, 30, 25, .06), 0 4px 14px rgba(20, 30, 25, .06);
  --rayon: 14px;
  --bas-sur: env(safe-area-inset-bottom, 0px);
  --haut-sur: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #111713; --surface: #18201B; --surface-2: #202A23; --bord: #2E3A32;
    --texte: #E8EEE9; --texte-2: #A8B5AC;
    --marque: #237A45; --sur-marque: #FFFFFF; --marque-texte: #7ED49B;
    --chaud: #FB7B4A; --tiede: #F2B54A; --froid: #7FA7FF;
    --ok: #4ADE80; --attention: #F59E0B; --danger: #F87171;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* L'attribut `hidden` doit TOUJOURS gagner : sans cette regle, toute classe qui pose un
   `display` l'annule en silence. Mesure le 2026-09-29 : « ↻ 1 » restait affiche file vide, et la
   barre de navigation apparaissait sur l'ecran de connexion. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.45; background: var(--fond); color: var(--texte);
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--marque-texte); outline-offset: 2px; }

/* ---------- Structure ---------- */
.app { display: flex; flex-direction: column; min-height: 100%; }
.barre-haut {
  position: sticky; top: 0; z-index: 20; background: var(--fond);
  padding: calc(8px + var(--haut-sur)) 16px 8px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--bord);
}
.barre-haut .salon { flex: 1; min-width: 0; }
.barre-haut .salon-nom { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-haut .salon-sous { font-size: 13px; color: var(--texte-2); }
.contenu { flex: 1; padding: 14px 16px calc(96px + var(--bas-sur)); max-width: 640px; width: 100%; margin: 0 auto; }
.ecran { display: none; }
.ecran.actif { display: block; }

/* Navigation du bas : zone du pouce */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  background: var(--surface); border-top: 1px solid var(--bord); padding-bottom: var(--bas-sur);
}
.nav button {
  flex: 1; background: none; border: 0; padding: 8px 4px 10px; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 600; color: var(--texte-2); position: relative;
}
.nav button .ico { font-size: 22px; line-height: 1; }
.nav button.actif { color: var(--marque-texte); }
.nav .pastille-nav {
  position: absolute; top: 4px; left: 50%; margin-left: 8px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--danger-fond); color: #fff; font-size: 12px; line-height: 20px; text-align: center;
}

/* ---------- Composants ---------- */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; box-shadow: var(--ombre); margin-bottom: 12px; }
.titre { font-size: 22px; font-weight: 800; margin: 4px 0 12px; letter-spacing: -.01em; }
.sous-titre { font-size: 14px; color: var(--texte-2); margin: -6px 0 12px; }
.section { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); margin: 18px 0 8px; }
.aide { font-size: 13px; color: var(--texte-2); margin-top: 6px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; font-size: 17px; background: var(--marque); color: var(--sur-marque); width: 100%;
}
.bouton.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bord); }
.bouton.discret { background: transparent; color: var(--marque-texte); border-color: transparent; min-height: 44px; width: auto; }
.bouton.danger { background: var(--danger-fond); color: #fff; }
.bouton:disabled { opacity: .55; }
.rangee { display: flex; gap: 10px; }
.rangee > * { flex: 1; }

/* Les quatre gestes de capture : grands, dans la zone du pouce */
.gestes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.geste {
  min-height: 118px; border-radius: 18px; border: 0; padding: 14px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface); color: var(--texte); box-shadow: var(--ombre); border: 1px solid var(--bord);
}
.geste .ico { font-size: 34px; line-height: 1; }
.geste .nom { font-size: 18px; font-weight: 800; }
.geste .quoi { font-size: 13px; color: var(--texte-2); }
.geste.principal { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); }
.geste.principal .quoi { color: rgba(255, 255, 255, .85); }
.geste:active { transform: scale(.98); }

/* Compteur d'equipe */
.compteur { display: flex; gap: 8px; margin-bottom: 14px; }
.compteur .case { flex: 1; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 10px 8px; text-align: center; }
.compteur .n { font-size: 24px; font-weight: 800; line-height: 1.1; }
.compteur .l { font-size: 12px; color: var(--texte-2); }

/* Onglets (Mes leads / Equipe / ...) */
.onglets { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglet {
  flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--bord);
  background: var(--surface); color: var(--texte); font-weight: 600; font-size: 15px;
}
.onglet.actif { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.onglet .n { font-weight: 800; margin-left: 4px; }

/* Ligne de lead */
.lead {
  display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--bord);
  border-radius: 14px; padding: 12px; margin-bottom: 8px; width: 100%; text-align: left;
}
.lead .avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
}
.lead .corps { flex: 1; min-width: 0; }
.lead .nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead .soc { font-size: 14px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead .meta { font-size: 12px; color: var(--texte-2); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lead.attente { border-style: dashed; }
.lead.echec { border-color: var(--danger); }

.etiquette { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--texte); }
.etiquette.chaud { background: var(--chaud-fond); color: #fff; }
.etiquette.tiede { background: var(--tiede-fond); color: #fff; }
.etiquette.froid { background: var(--froid-fond); color: #fff; }
.etiquette.ia { background: var(--surface-2); color: var(--texte-2); }
.etiquette.echec { background: var(--danger-fond); color: #fff; }
.auteur { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.auteur i { display: inline-block; width: 9px; height: 9px; border-radius: 5px; }

/* Formulaires */
.champ { margin-bottom: 12px; }
.champ label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.champ input, .champ textarea, .champ select {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bord);
  background: var(--surface); font-size: 17px;
}
.champ textarea { min-height: 88px; resize: vertical; }

/* Qualification en un geste */
.choix { display: flex; gap: 8px; flex-wrap: wrap; }
.choix button {
  flex: 1 1 auto; min-height: 50px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--bord);
  background: var(--surface); font-weight: 700; font-size: 16px;
}
.choix button.actif { border-color: var(--texte); background: var(--texte); color: var(--fond); }
.choix button.chaud.actif { background: var(--chaud-fond); border-color: var(--chaud-fond); color: #fff; }
.choix button.tiede.actif { background: var(--tiede-fond); border-color: var(--tiede-fond); color: #fff; }
.choix button.froid.actif { background: var(--froid-fond); border-color: var(--froid-fond); color: #fff; }

/* Enregistrement vocal */
.micro-zone { text-align: center; padding: 18px 0 8px; }
.micro-bouton {
  width: 148px; height: 148px; border-radius: 74px; border: 0; background: var(--marque); color: var(--sur-marque);
  font-size: 54px; box-shadow: 0 8px 24px rgba(31, 107, 58, .35);
}
.micro-bouton.enregistre { background: var(--danger-fond); animation: pouls 1.4s ease-in-out infinite; }
@keyframes pouls { 0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, .45); } 50% { box-shadow: 0 0 0 18px rgba(185, 28, 28, 0); } }
.chrono { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 12px; }

/* Camera / QR */
.visee { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; }
.visee video { width: 100%; height: 100%; object-fit: cover; display: block; }
.visee .cadre { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 16px; }
.apercu-photo { width: 100%; border-radius: 14px; display: block; }

/* Bandeaux */
.bandeau { border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.bandeau.info { background: var(--surface-2); }
.bandeau.alerte { background: #FEF3C7; color: #78350F; }
.bandeau.erreur { background: #FEE2E2; color: #7F1D1D; }
.bandeau.doublon { background: #EDE9FE; color: #3B0764; }
@media (prefers-color-scheme: dark) {
  .bandeau.alerte { background: #3A2A0C; color: #FCD89A; }
  .bandeau.erreur { background: #3B1414; color: #FECACA; }
  .bandeau.doublon { background: #2A1F45; color: #DDD6FE; }
}
.hors-ligne { background: var(--attention-fond); color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 4px; }

/* Capture en peril (stockage refuse) : impossible a manquer */
#peril {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--danger-fond); color: #fff;
  padding: 12px 16px calc(12px + var(--bas-sur)); box-shadow: 0 -4px 16px rgba(0, 0, 0, .3);
}
#peril .peril-titre { font-weight: 800; margin-bottom: 4px; }
#peril .peril-texte { font-size: 14px; margin-bottom: 10px; }
#peril .peril-actions { display: flex; gap: 8px; }
#peril button { flex: 1; min-height: 46px; border-radius: 10px; border: 0; font-weight: 800; background: #fff; color: #7F1D1D; }
#peril button.secondaire { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7); }

/* Messages */
#toasts { position: fixed; left: 12px; right: 12px; bottom: calc(76px + var(--bas-sur)); z-index: 80; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; background: var(--texte); color: var(--fond); padding: 12px 14px; border-radius: 12px;
  font-size: 15px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: opacity .3s, transform .3s;
}
.toast.success { background: var(--ok-fond); color: #fff; }
.toast.error { background: var(--danger-fond); color: #fff; }
.toast.sortie { opacity: 0; transform: translateY(8px); }

/* Feuille modale (bas d'ecran) */
.feuille-fond { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 60; display: flex; align-items: flex-end; }
.feuille {
  background: var(--fond); width: 100%; max-width: 640px; margin: 0 auto; max-height: 92vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 14px 16px calc(18px + var(--bas-sur));
}
.feuille .poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--bord); margin: 0 auto 12px; }

.vide { text-align: center; color: var(--texte-2); padding: 34px 12px; }
.vide .ico { font-size: 40px; margin-bottom: 6px; }
.chargement { text-align: center; color: var(--texte-2); padding: 24px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }