/* ============================================================
   Je Taffe à la TV — thème néon (identité du groupe Facebook)
   Fond sombre, néon rose + cyan, ambiance régie TV.
   ============================================================ */

:root {
  --bg: #1c1c22;
  --bg-alt: #232329;
  --card: #2c2c34;
  --border: #40404a;
  --text: #f5f5fa;
  --text-desc: #f0f0f5;
  --text-secondary: #c3c3ce;
  --neon-pink: #ff2fb0;
  --neon-pink-glow: rgba(255, 47, 176, 0.16);
  --neon-cyan: #31e9ff;
  --neon-cyan-glow: rgba(49, 233, 255, 0.16);
  --danger: #ff4d4d;
  --warning: #ffc24b;
  --success: #37e29a;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
  /* Espace réservé en bas d'écran pour la bannière publicitaire ancrée
     (AdSense Auto ads > Ancrée). Google ne publie pas de hauteur fixe
     garantie (ça peut varier selon l'appareil et le format servi) —
     valeur relevée trop juste en conditions réelles (07/09/2026,
     retour de Philippe : la bannière recouvrait la nav), donc marge
     de sécurité généreuse ici. Réservé en permanence (que la pub soit
     affichée ou non) pour garantir que la nav du bas et le contenu ne
     soient jamais recouverts. Si jamais ça déborde encore ou laisse
     trop de vide selon l'appareil, il suffit d'ajuster cette seule
     valeur — tout le reste du CSS en dépend. */
  --reserve-pub-ancree: 96px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

/* ---------- Splash ---------- */
#splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#splash h1 {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--neon-pink);
  text-shadow: 0 0 18px var(--neon-pink-glow), 0 0 32px var(--neon-pink);
  margin: 0;
}
#splash h1.cyan {
  color: var(--neon-cyan);
  text-shadow: 0 0 18px var(--neon-cyan-glow), 0 0 32px var(--neon-cyan);
  margin-top: -8px;
}
#splash .sub {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  margin-top: 10px;
}
#splash .spinner { margin-top: 28px; }

/* ---------- Bannière permanente (identité de marque) ---------- */
.banniere {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1e1e24;
  border-bottom: 1px solid #2d2d38;
  padding: 14px 16px;
}
.banniere .marque {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-align: center;
  /* Couleurs vives et claires directement dans le remplissage du texte
     (pas un halo/ombre derrière) : c'est ça qui rend le texte lumineux
     et lisible, pas un effet de flou. */
  background: linear-gradient(135deg, #ff2a85, #00f0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.banniere .badge-officiel {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #e2e8f0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Interrupteur notifications (cloche) dans le bandeau du haut */
.banniere .toggle-notifs {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #2d2d38;
  background: rgba(255, 255, 255, 0.03);
  color: #8a8a9c;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.banniere .toggle-notifs svg {
  width: 17px;
  height: 17px;
}
.banniere .toggle-notifs.actif {
  color: #ff2a85;
  border-color: #ff2a85;
  background: rgba(255, 42, 133, 0.14);
}
.banniere .toggle-notifs:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Header ---------- */
header.top {
  padding: 16px 16px 8px;
}
header.top h1 { font-size: 22px; font-weight: 800; margin: 0; }
header.top .sub { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }

/* ---------- Vues ---------- */
.vue { display: none; flex: 1; padding-bottom: calc(104px + var(--reserve-pub-ancree)); }
.vue.active { display: block; }

/* ---------- Carte annonce ---------- */
.carte-wrap {
  margin: 0 16px 20px;
  padding: 1.5px;
  border-radius: calc(var(--radius-md) + 1.5px);
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan));
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.carte {
  background: var(--card);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.carte .carte-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--bg-alt), var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.carte .carte-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carte .carte-image .icone-metier-placeholder {
  font-size: 68px;
  opacity: 0.7;
}
.carte .carte-image .overlay-haut {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.badge-metier {
  background: rgba(28, 28, 34, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--neon-pink);
  color: var(--neon-pink);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  max-width: 75%;
}
.carte .date {
  background: rgba(28, 28, 34, 0.75);
  backdrop-filter: blur(6px);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
}
.carte .corps { padding: 14px 16px 16px; }
.carte h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.carte .meta-ligne {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.carte .production { color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.carte .lieu { color: var(--neon-cyan); font-weight: 700; }
.carte p.desc {
  color: var(--text-desc);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.btn-postuler {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.5px;
  color: #1c1c22;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
  cursor: pointer;
  box-shadow: 0 4px 16px var(--neon-pink-glow);
}
.btn-postuler:hover { filter: brightness(1.08); }
.signaler {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 11.5px;
  background: none;
  border: none;
  cursor: pointer;
}
.signaler:hover { color: var(--warning); }

.vide {
  color: var(--text-secondary);
  text-align: center;
  padding: 48px 24px;
}

/* ---------- Flux principal : carte simple d'origine (empilées, lisibles) ---------- */
.carte-simple {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 0 16px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.carte-simple:hover, .carte-simple:active { border-color: var(--neon-pink); }
.carte-simple .ligne-haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.carte-simple .badge-metier {
  background: var(--neon-pink-glow);
  border: 1px solid var(--neon-pink);
  color: var(--neon-pink);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.carte-simple .date {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  background: none;
  padding: 0;
  border-radius: 0;
}
.carte-simple h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.carte-simple p.desc { color: var(--text-desc); font-size: 14.5px; line-height: 1.45; margin: 0 0 10px; }
.carte-simple .ligne-bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.carte-simple .lieu { color: var(--neon-cyan); font-weight: 700; font-size: 13px; }
.carte-simple .production { color: var(--text-secondary); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: normal; }
.carte-simple .signaler {
  display: block;
  margin-top: 10px;
  text-align: right;
  color: var(--text-secondary);
  font-size: 12px;
  background: none;
  border: none;
  cursor: pointer;
}
.carte-simple .signaler:hover { color: var(--warning); }

/* ---------- Fiche détail d'une annonce (plein écran, ouverte depuis le flux) ---------- */
#modal-annonce {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  justify-content: center;
}
#modal-annonce.visible { display: flex; }
#modal-annonce .modal-fond {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}
#modal-annonce .modal-contenu {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
  padding-top: 54px;
  padding-bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--reserve-pub-ancree));
  animation: apparaitre 0.18s ease;
}
@keyframes apparaitre {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
#modal-annonce .modal-fermer {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(44, 44, 52, 0.9);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#modal-annonce .carte-wrap { margin: 0 16px; }
/* Dans la fiche détail plein écran, le texte doit être lisible en entier
   (pas tronqué comme dans l'aperçu de l'onglet Métiers) : c'est là que la
   personne décide de postuler ou non. */
#modal-annonce .desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ---------- Familles / métiers ---------- */
.famille-titre {
  color: var(--neon-cyan);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 16px 6px;
}
.metier-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0 16px 8px;
  padding: 12px 14px;
  cursor: pointer;
}
.metier-ligne:hover { border-color: var(--neon-pink); }
.metier-ligne .chevron { color: var(--neon-pink); font-weight: 800; font-size: 18px; }

/* ---------- Formulaire ---------- */
.formulaire { padding: 16px; }
.champ { margin-bottom: 16px; }
.champ label {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.champ input, .champ textarea, .champ select {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.champ textarea { min-height: 100px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-color: var(--neon-cyan);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.chip.actif-pink { border-color: var(--neon-pink); background: var(--neon-pink-glow); color: var(--neon-pink); font-weight: 700; }
.chip.actif-cyan { border-color: var(--neon-cyan); background: var(--neon-cyan-glow); color: var(--neon-cyan); font-weight: 700; }

/* ---------- Boutons néon ---------- */
.btn-neon {
  display: block;
  width: 100%;
  border: 1.5px solid var(--neon-pink);
  color: var(--neon-pink);
  background: var(--card);
  border-radius: var(--radius-pill);
  padding: 14px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 12px var(--neon-pink-glow);
}
.btn-neon:hover { box-shadow: 0 0 20px var(--neon-pink-glow); }
.btn-neon.cyan { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 12px var(--neon-cyan-glow); }
.btn-neon:disabled { opacity: 0.5; cursor: default; }

.lien-legal {
  text-align: center;
  margin-top: 18px;
}
.lien-legal a {
  color: var(--text-secondary);
  font-size: 12.5px;
  text-decoration: underline;
}

/* ---------- Admin ---------- */
.admin-connexion { padding: 24px 16px; }
.admin-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
}
.admin-entete .deconnexion { color: var(--neon-cyan); font-size: 13px; font-weight: 700; background: none; border: none; cursor: pointer; }
.admin-ligne {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 0 16px 10px;
}
.admin-ligne .infos { flex: 1; }
.admin-ligne .titre { font-weight: 700; font-size: 15px; }
.admin-ligne .meta { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.admin-ligne .signalements { color: var(--warning); font-size: 12px; margin-top: 4px; font-weight: 700; }
.btn-supprimer {
  border: 1px solid var(--danger);
  color: var(--danger);
  background: none;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 10px;
}

/* ---------- Nav du bas : pilule flottante façon verre dépoli ---------- */
nav.tabbar {
  position: fixed;
  /* Flotte au-dessus de la zone réservée à la bannière pub ancrée,
     jamais recouverte par elle. */
  bottom: calc(var(--reserve-pub-ancree) + max(14px, env(safe-area-inset-bottom)));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 420px;
  display: flex;
  gap: 2px;
  background: rgba(44, 44, 52, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 6px;
  z-index: 10;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
nav.tabbar button {
  flex: 1;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 9px 4px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background 0.15s ease, color 0.15s ease;
}
nav.tabbar button .icone {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav.tabbar button .icone svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
nav.tabbar button.actif {
  color: var(--neon-pink);
  background: var(--neon-pink-glow);
}
nav.tabbar button.actif .icone svg {
  filter: drop-shadow(0 0 6px var(--neon-pink-glow));
}

/* ---------- Utilitaires ---------- */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: tourner 0.8s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }
.centre { display: flex; align-items: center; justify-content: center; padding: 48px; }