/* ============================================================
   app.css — identité visuelle « Terrain brut »
   Couleurs, polices et réglages maison du projet ftlab.
   Ne pas modifier les fichiers des librairies : tout est ici.
   ============================================================ */

/* ---- Police Oswald (locale, aucun appel Google Fonts) ---- */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/oswald-latin-700-normal.woff2") format("woff2");
}

/* ---- Palette « Terrain brut » ---- */
:root {
  --tb-bg:        #1C1A17; /* fond */
  --tb-surface:   #26231E; /* cartes / surfaces */
  --tb-border:    #3A352D; /* bordures */
  --tb-text:      #EDE8DF; /* texte principal */
  --tb-muted:     #A39B8C; /* texte discret */
  --tb-brand:     #E8732B; /* couleur signature */
  --tb-good:      #9BB04A; /* score bon */
  --tb-mid:       #E8A33D; /* score moyen */
  --tb-bad:       #C7563B; /* score mauvais */

  --tb-radius:    14px;    /* coins légèrement arrondis */
  --tb-radius-sm: 10px;

  /* police sans-serif système lisible pour le texte courant */
  --tb-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
  --tb-head: "Oswald", var(--tb-sans);
}

/* ---- Base ---- */
html, body {
  height: 100%;
}
body {
  background: var(--tb-bg);
  color: var(--tb-text);
  font-family: var(--tb-sans);
  text-transform: lowercase; /* jamais de MAJUSCULES */
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* titres et chiffres en Oswald */
h1, h2, h3, h4, h5, h6,
.tb-head, .tb-num {
  font-family: var(--tb-head);
  font-weight: 600;
  letter-spacing: .2px;
}

/* ---- Liens : neutralisation GLOBALE du style par défaut (anti bleu souligné) ----
   Tout <a> hérite de la couleur du thème et n'est jamais souligné par défaut,
   même une carte/ligne cliquable ou un titre servant de lien. Les liens
   visibles reçoivent ensuite des classes explicites (.tb-why, .btn-*-ftlab…). */
a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
}

/* effet « téléphone » : colonne ~430px centrée sur grand écran */
.tb-phone {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--tb-bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.tb-content {
  flex: 1 1 auto;
  padding: 14px 16px 90px; /* espace bas réservé à la nav fixe */
}

/* ---- Barre du haut ---- */
.tb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 14px;
}
.tb-topbar .tb-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--tb-radius-sm);
  background: var(--tb-brand);
  color: #1C1A17;
  font-size: 16px;
}
.tb-topbar .tb-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tb-head);
  font-size: 22px;
  font-weight: 600;
}
.tb-bell {
  color: var(--tb-muted);
  font-size: 19px;
  background: none;
  border: none;
  padding: 6px;
}

/* ---- Cartes ---- */
.tb-card {
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  padding: 16px;
}

/* ---- Carte de score ---- */
.tb-score-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.tb-score-spot {
  font-family: var(--tb-head);
  font-size: 17px;
  font-weight: 600;
}
.tb-score-date {
  font-family: var(--tb-head);
  font-weight: 600;
  color: var(--tb-text);
  font-size: 19px;
  text-align: right;
}
.tb-score-today {
  font-family: var(--tb-sans);
  font-weight: 400;
  color: var(--tb-muted);
  font-size: 12px;
}
.tb-score-big {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
}
.tb-score-big .tb-num {
  font-family: var(--tb-head);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
}
.tb-score-big .tb-num-unit {
  font-family: var(--tb-head);
  font-size: 22px;
  color: var(--tb-muted);
}
.tb-score-verdict {
  font-family: var(--tb-head);
  font-size: 16px;
  font-weight: 500;
  margin-top: 2px;
}

/* pastilles de conditions */
.tb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.tb-pill {
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: 999px;
  color: var(--tb-text);
  font-size: 13px;
  padding: 5px 11px;
}

/* pied de carte */
.tb-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--tb-border);
}
.tb-card-foot .tb-hint {
  color: var(--tb-muted);
  font-size: 13px;
}
.tb-why {
  color: var(--tb-brand);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
}

/* ---- Couleurs de score utilitaires ---- */
.tb-good { color: var(--tb-good); }
.tb-mid  { color: var(--tb-mid);  }
.tb-bad  { color: var(--tb-bad);  }

/* ---- Bloc « cette semaine » ---- */
.tb-section-title {
  font-family: var(--tb-head);
  font-size: 15px;
  font-weight: 500;
  color: var(--tb-muted);
  margin: 22px 2px 10px;
}
.tb-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.tb-day {
  display: block;
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-sm);
  text-align: center;
  padding: 10px 2px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
a.tb-day:hover {
  border-color: var(--tb-brand);
}
.tb-day .tb-day-name {
  color: var(--tb-muted);
  font-size: 11px;
}
.tb-day .tb-day-score {
  font-family: var(--tb-head);
  font-weight: 700;
  font-size: 19px;
  margin-top: 4px;
}
/* meilleur jour : bordure couleur signature */
.tb-day.tb-day-on {
  border-color: var(--tb-brand);
}
/* jour actuellement consulté : fond plus clair (reste lisible avec la bordure best) */
.tb-day.tb-day-sel {
  background: #322d25;
  border-color: var(--tb-text);
}
.tb-day.tb-day-sel.tb-day-on {
  border-color: var(--tb-brand);
  box-shadow: inset 0 0 0 1px var(--tb-text);
}

/* ---- Barre de navigation basse ---- */
.tb-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--tb-surface);
  border-top: 1px solid var(--tb-border);
  /* zone home-indicator (iPhone) : on étend le fond sous celle-ci */
  padding-bottom: env(safe-area-inset-bottom);
}
.tb-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0 12px;
  color: var(--tb-muted);
  text-decoration: none;
  font-size: 11px;
}
.tb-nav a i {
  font-size: 18px;
}
.tb-nav a.active {
  color: var(--tb-brand);
}

/* ---- Liens de session dans la barre du haut ---- */
.tb-session {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tb-session .tb-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tb-muted);
  font-size: 13px;
  max-width: 38vw;
}
.tb-session .tb-user i {
  color: var(--tb-brand);
  flex: 0 0 auto;
}
.tb-session .tb-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* lien « se connecter » : couleur signature, sans soulignement */
.tb-login {
  color: var(--tb-brand);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}
.tb-login:hover {
  filter: brightness(1.1);
}

/* « se déconnecter » : petite pastille discrète, pas un lien brut */
.tb-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--tb-muted);
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  padding: 6px 8px;
}
.tb-logout:hover {
  color: var(--tb-text);
  border-color: var(--tb-brand);
}
/* sur téléphone : icône seule (le texte n'apparaît qu'en grand écran) */
.tb-logout-text {
  display: none;
}

/* ============================================================
   BOUTONS RÉUTILISABLES — source unique de vérité.
   À utiliser PARTOUT (jamais re-styler un bouton page par page) :
     .btn-primary-ftlab    action principale (orange, texte foncé)
     .btn-secondary-ftlab  action secondaire (sobre, bordure)
     .btn-danger-ftlab     action destructrice (rouge)
   Pleine largeur : ajouter la classe Bootstrap `w-100`.
   Aucun soulignement, icône Font Awesome alignée au texte.
   ============================================================ */
.btn-primary-ftlab,
.btn-secondary-ftlab,
.btn-danger-ftlab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--tb-radius-sm);
  text-decoration: none;
  text-transform: lowercase;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary-ftlab:hover,
.btn-primary-ftlab:focus,
.btn-secondary-ftlab:hover,
.btn-secondary-ftlab:focus,
.btn-danger-ftlab:hover,
.btn-danger-ftlab:focus {
  text-decoration: none;
  box-shadow: none;
}

/* action principale */
.btn-primary-ftlab {
  background-color: var(--tb-brand);
  border: none;
  color: #1C1A17;
  font-family: var(--tb-head);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 16px;
}
.btn-primary-ftlab:hover,
.btn-primary-ftlab:focus {
  background-color: var(--tb-brand);
  color: #1C1A17;
  filter: brightness(1.05);
}

/* action secondaire */
.btn-secondary-ftlab {
  background-color: var(--tb-surface);
  border: 1px solid var(--tb-border);
  color: var(--tb-text);
  font-family: var(--tb-sans);
  font-size: 14px;
  padding: 9px 14px;
}
.btn-secondary-ftlab:hover,
.btn-secondary-ftlab:focus {
  color: var(--tb-text);
  border-color: var(--tb-brand);
}
/* variante destructrice du bouton secondaire (survol rouge) */
.btn-secondary-ftlab.is-danger:hover,
.btn-secondary-ftlab.is-danger:focus {
  color: var(--tb-bad);
  border-color: var(--tb-bad);
}

/* action destructrice principale */
.btn-danger-ftlab {
  background-color: var(--tb-bad);
  border: none;
  color: #1C1A17;
  font-family: var(--tb-head);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 16px;
}
.btn-danger-ftlab:hover,
.btn-danger-ftlab:focus {
  background-color: var(--tb-bad);
  color: #1C1A17;
  filter: brightness(1.05);
}

/* bouton pleine largeur de formulaire : léger espacement au-dessus */
.btn-primary-ftlab.w-100,
.btn-danger-ftlab.w-100 {
  margin-top: 8px;
}

/* ---- Formulaires d'authentification ---- */
/* Carte centrée, cohérente avec l'effet téléphone (max ~430px). */
.tb-auth {
  margin-top: 8px;
  padding: 20px;
}

/* Un groupe = libellé au-dessus + champ en dessous, empilés.
   Espacement vertical régulier entre chaque groupe. */
.tb-field {
  margin-bottom: 16px;
}

/* Libellé toujours au-dessus de son champ (jamais à côté). */
.tb-auth .form-label {
  display: block;
  color: var(--tb-muted);
  font-size: 13px;
  margin-bottom: 6px;
}

/* Champs Bootstrap habillés en sombre « Terrain brut ».
   Tous identiques, pleine largeur, hauteur confortable. */
.tb-auth .form-control {
  width: 100%;
  height: 44px;
  background-color: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-sm);
  color: var(--tb-text);
  font-family: var(--tb-sans);
  font-size: 15px;
  padding: 10px 12px;
}
.tb-auth .form-control:focus {
  background-color: var(--tb-bg);
  border-color: var(--tb-brand);
  color: var(--tb-text);
  box-shadow: none;
}
.tb-auth .form-control::placeholder {
  color: var(--tb-muted);
}
/* Évite le fond blanc de l'autocomplétion navigateur. */
.tb-auth .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--tb-text);
  -webkit-box-shadow: 0 0 0 1000px var(--tb-bg) inset;
  caret-color: var(--tb-text);
}

/* Bouton principal pleine largeur, couleur signature. */
/* (boutons centralisés plus haut : .btn-primary-ftlab / .btn-secondary-ftlab / .btn-danger-ftlab) */
.tb-alert {
  background: rgba(199, 86, 59, .12);
  border: 1px solid var(--tb-bad);
  border-radius: var(--tb-radius-sm);
  color: var(--tb-text);
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.tb-alert div + div {
  margin-top: 4px;
}
.tb-auth-foot {
  color: var(--tb-muted);
  font-size: 13px;
  text-align: center;
  margin: 16px 0 0;
}

/* ============================================================
   COQUILLE D'APPLICATION RESPONSIVE (gabarit app/layout.php)
   Mobile-first : téléphone par défaut, dashboard en >= 900px.
   ============================================================ */

/* ---- Téléphone (par défaut) ----
   Colonne étroite centrée + barre de navigation FIXE en bas. */
.tb-app {
  display: block;
}
.tb-sidebar {
  display: none; /* la barre latérale n'existe que sur ordinateur */
}
.tb-shell {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
}
/* logo Karpa (image) : marque carrée dans la barre du haut et la barre latérale */
.tb-mark-img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.tb-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* En mode PWA plein écran (standalone), env(safe-area-inset-top) réserve la
     zone système (barre d'état / encoche) : la barre du haut descend dessous et
     reste entièrement visible/cliquable. En navigateur/desktop l'inset = 0 →
     aucun changement. Le fond sombre du body remplit la zone (rendu propre). */
  padding: calc(10px + env(safe-area-inset-top)) 16px 14px;
}
.tb-appbar .tb-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tb-head);
  font-size: 22px;
  font-weight: 600;
  min-width: 0;
}
.tb-main {
  /* espace bas réservé à la nav fixe + bouton feedback flottant + home-indicator */
  padding: 2px 16px calc(146px + env(safe-area-inset-bottom));
}

/* ---- Ordinateur (>= 900px) : dashboard pleine largeur ---- */
@media (min-width: 900px) {
  .tb-app {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
  }

  /* barre latérale gauche */
  .tb-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 220px;
    width: 220px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    background: var(--tb-surface);
    border-right: 1px solid var(--tb-border);
    padding: 18px 14px;
  }
  .tb-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 18px;
  }
  .tb-logo-text {
    font-family: var(--tb-head);
    font-size: 22px;
    font-weight: 700;
  }
  .tb-sidebar-logo .tb-mark-img {
    width: 34px;
    height: 34px;
  }
  .tb-sidenav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tb-sidenav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--tb-radius-sm);
    color: var(--tb-muted);
    text-decoration: none;
    font-size: 15px;
  }
  .tb-sidenav a i {
    width: 20px;
    text-align: center;
    font-size: 17px;
  }
  .tb-sidenav a:hover {
    background: var(--tb-bg);
    color: var(--tb-text);
  }
  .tb-sidenav a.active {
    color: var(--tb-brand);
    background: var(--tb-bg);
  }

  /* zone de contenu : remplit le reste, max ~1100px, padding généreux */
  .tb-shell {
    flex: 1 1 auto;
    min-width: 0; /* empêche tout débordement horizontal */
    max-width: none;
    margin: 0;
    min-height: 100vh;
  }
  .tb-appbar {
    max-width: 1100px;
    margin: 0 auto;
    padding: calc(22px + env(safe-area-inset-top)) 32px 22px;
    border-bottom: 1px solid var(--tb-border);
  }
  .tb-appbar .tb-title {
    font-size: 26px;
  }
  .tb-appbar-mark {
    display: none; /* le logo est déjà dans la barre latérale */
  }
  .tb-main {
    max-width: 1100px;
    margin: 0 auto;
    /* place réservée en bas à droite pour le bouton feedback flottant */
    padding: 28px 32px 80px;
  }

  /* la barre de navigation basse disparaît sur ordinateur */
  .tb-nav {
    display: none;
  }

  /* texte de déconnexion visible (plus seulement l'icône) */
  .tb-logout-text {
    display: inline;
  }
  .tb-session .tb-user {
    max-width: none;
    font-size: 14px;
  }

  /* on profite de la largeur : carte de score plus grande, semaine aérée */
  .tb-score-card {
    padding: 24px;
  }
  .tb-score-card .tb-score-big .tb-num {
    font-size: 84px;
  }
  .tb-score-card .tb-score-spot {
    font-size: 20px;
  }
  .tb-week {
    gap: 12px;
  }
  .tb-day {
    padding: 18px 4px;
  }
  .tb-day .tb-day-name {
    font-size: 13px;
  }
  .tb-day .tb-day-score {
    font-size: 26px;
    margin-top: 8px;
  }
  .tb-section-title {
    font-size: 17px;
  }
}

/* ============================================================
   PLANS D'EAU (mes spots) — style « Terrain brut »
   ============================================================ */

/* en-tête de page : titre + bouton d'action */
.tb-spots-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 2px 14px;
}
.tb-spots-title {
  margin: 0;
}

/* liste des spots */
.tb-spot-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tb-spot-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tb-spot-name {
  font-family: var(--tb-head);
  font-size: 18px;
  font-weight: 600;
}
.tb-spot-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tb-spot-coords {
  color: var(--tb-muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tb-spot-actions {
  display: flex;
  gap: 8px;
}

/* ---- Microclimat du spot (abri + relief) ---- */
.tb-micro {
  flex-basis: 100%;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--tb-border);
}
.tb-micro-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tb-muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.tb-micro-title i {
  color: var(--tb-brand);
}
.tb-micro-body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tb-micro-shelter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tb-micro-relief {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tb-text);
}
.tb-micro-relief i {
  color: var(--tb-muted);
}
.tb-micro-none {
  color: var(--tb-muted);
  font-style: italic;
}
.tb-micro-adjust {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tb-muted);
}
.tb-hydro-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tb-text);
}
.tb-pill-hydro i {
  color: var(--tb-brand);
  margin-right: 4px;
}
.tb-hydro-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tb-mid);
}
.tb-hydro-warn i {
  color: var(--tb-mid);
}
.tb-micro-adjust i {
  color: var(--tb-brand);
}
.tb-micro-form {
  margin: 0;
  margin-left: auto;
}
.tb-micro-btn {
  font-size: 13px;
  padding: 6px 12px;
}

/* mention d'ajustement microclimat dans le détail « pourquoi » */
.tb-why-adjust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--tb-border);
  color: var(--tb-muted);
  font-size: 13px;
}
.tb-why-adjust i {
  color: var(--tb-brand);
}

/* ---- Page de test passerelle hydro (hydrotest) ---- */
.tb-hydrotest-fictif {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tb-hydrotest-fictif .tb-field {
  flex: 1 1 140px;
}
.tb-hydro-measure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tb-hydro-measure-body {
  margin-top: 8px;
}
.tb-hydro-value {
  font-size: 15px;
}
.tb-num-inline {
  font-family: var(--tb-head);
  font-size: 22px;
  color: var(--tb-text);
}
.tb-hydro-meta {
  color: var(--tb-muted);
  font-size: 12px;
  margin-top: 4px;
}
.tb-hydro-station {
  margin-top: 8px;
  font-size: 13px;
  color: var(--tb-text);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.tb-hydro-station i {
  color: var(--tb-brand);
}

/* ---- Aide sous un champ de formulaire (microclimat, etc.) ---- */
.tb-form-help {
  color: var(--tb-muted);
  font-size: 12px;
  margin-top: 6px;
}
.tb-help-list {
  margin: 6px 0 0;
  padding-left: 18px;
}
.tb-help-list li {
  margin: 2px 0;
}
.tb-help-list strong {
  color: var(--tb-text);
}

/* état vide */
.tb-empty {
  text-align: center;
  padding: 36px 20px;
}
.tb-empty-icon {
  color: var(--tb-brand);
  font-size: 34px;
  margin-bottom: 12px;
}
.tb-empty-title {
  font-family: var(--tb-head);
  font-size: 19px;
  font-weight: 600;
}
.tb-empty-text {
  color: var(--tb-muted);
  font-size: 14px;
  margin: 8px 0 18px;
}
.tb-empty .btn-primary-ftlab {
  margin: 0 auto;
}

/* ---- Formulaire de spot (champs sombres, comme l'auth) ---- */
.tb-form .form-control,
.tb-form .form-select {
  width: 100%;
  background-color: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-sm);
  color: var(--tb-text);
  font-family: var(--tb-sans);
  font-size: 15px;
  padding: 10px 12px;
  height: 44px;
}
.tb-form .form-control:focus,
.tb-form .form-select:focus {
  background-color: var(--tb-bg);
  border-color: var(--tb-brand);
  color: var(--tb-text);
  box-shadow: none;
}
.tb-form .form-control::placeholder {
  color: var(--tb-muted);
}
.tb-form .form-label {
  display: block;
  color: var(--tb-muted);
  font-size: 13px;
  margin-bottom: 6px;
}
/* flèche du select adaptée au thème sombre */
.tb-form .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A39B8C' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* carte Leaflet */
.tb-map {
  height: 320px;
  width: 100%;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-sm);
}
.tb-map-status {
  color: var(--tb-muted);
  font-size: 12px;
  margin-top: 8px;
}

/* confirmation de suppression */
.tb-confirm {
  text-align: center;
  padding: 32px 20px;
}
.tb-confirm-icon {
  color: var(--tb-bad);
  font-size: 32px;
  margin-bottom: 10px;
}
.tb-confirm-title {
  font-family: var(--tb-head);
  font-size: 20px;
  font-weight: 600;
}
.tb-confirm-text {
  color: var(--tb-muted);
  font-size: 14px;
  margin: 8px 0 20px;
}
.tb-cancel {
  display: inline-block;
  margin-top: 14px;
  color: var(--tb-muted);
  font-size: 13px;
  text-decoration: none;
}
.tb-cancel:hover {
  color: var(--tb-text);
}

/* sur grand écran, on borne la largeur des cartes de formulaire/confirmation */
@media (min-width: 900px) {
  .tb-form-card,
  .tb-confirm {
    max-width: 640px;
  }
}

/* ============================================================
   CARNET — sessions & carpes (style « Terrain brut »)
   ============================================================ */

/* carte de session cliquable dans la liste */
.tb-session-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--tb-text);
}
.tb-session-card:hover {
  border-color: var(--tb-brand);
}
.tb-session-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--tb-radius-sm);
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--tb-border);
}
.tb-session-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tb-bg);
  color: var(--tb-muted);
  font-size: 20px;
}
.tb-session-info {
  flex: 1 1 auto;
  min-width: 0;
}
.tb-session-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tb-session-date {
  color: var(--tb-muted);
  font-size: 13px;
}
.tb-session-chevron {
  color: var(--tb-muted);
  flex: 0 0 auto;
}

/* pastilles bredouille / nb de carpes */
.tb-pill-blank {
  border-color: var(--tb-border);
  color: var(--tb-muted);
}
.tb-pill-catch {
  border-color: var(--tb-good);
  color: var(--tb-good);
}

/* détail de session */
.tb-session-detail .tb-session-meta {
  margin-bottom: 4px;
}
.tb-session-note {
  color: var(--tb-text);
  font-size: 14px;
  margin: 12px 0 0;
}
.tb-session-actions,
.tb-carpe-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* carte d'une carpe */
.tb-carpe-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.tb-carpe-thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--tb-radius-sm);
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--tb-border);
}
.tb-carpe-info {
  flex: 1 1 auto;
  min-width: 0;
}
.tb-carpe-weight {
  font-family: var(--tb-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--tb-good);
}
.tb-carpe-meta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tb-carpe-note {
  color: var(--tb-muted);
  font-size: 13px;
  margin: 10px 0 0;
}

/* zone de texte sombre */
.tb-form .tb-textarea {
  height: auto;
  resize: vertical;
  min-height: 80px;
}

/* champ fichier + photo actuelle */
.tb-form input[type="file"].form-control {
  height: auto;
  padding: 9px 12px;
}
.tb-current-photo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tb-current-photo img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--tb-radius-sm);
  border: 1px solid var(--tb-border);
}
.tb-checkbox {
  color: var(--tb-muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   GALERIE PHOTOS (façon app Photos) + VISIONNEUSE plein écran
   ============================================================ */

/* grille de vignettes carrées, responsive (3/ligne sur tél., plus en grand) */
.tb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.tb-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.tb-tile-photo {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--tb-radius-sm);
  overflow: hidden;
  border: 1px solid var(--tb-border);
  background: var(--tb-bg);
}
.tb-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tb-tile-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--tb-muted);
  font-size: 22px;
}
.tb-tile-weight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 8px 5px;
  font-family: var(--tb-head);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}
.tb-tile-meta {
  color: var(--tb-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-tile:hover .tb-tile-photo,
.tb-tile:focus-visible .tb-tile-photo {
  border-color: var(--tb-brand);
}

/* visionneuse plein écran */
body.tb-noscroll {
  overflow: hidden;
}
.tb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 9, 8, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tb-lightbox[hidden] {
  display: none;
}
.tb-lb-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
}
.tb-lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}
.tb-lb-img {
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: var(--tb-radius-sm);
}
.tb-lb-empty {
  color: var(--tb-muted);
  font-size: 60px;
}
.tb-lb-panel {
  text-align: center;
  color: var(--tb-text);
}
.tb-lb-weight {
  font-family: var(--tb-head);
  font-weight: 700;
  font-size: 22px;
  color: var(--tb-good);
}
.tb-lb-meta {
  color: var(--tb-muted);
  font-size: 14px;
  margin-top: 4px;
}
.tb-lb-note {
  color: var(--tb-text);
  font-size: 14px;
  margin: 8px 0 0;
}
.tb-lb-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.tb-lb-close {
  position: fixed;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  padding: 6px;
}
.tb-lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(38, 35, 30, .75);
  border: 1px solid var(--tb-border);
  color: var(--tb-text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-lb-prev { left: 14px; }
.tb-lb-next { right: 14px; }
.tb-lb-nav:hover,
.tb-lb-close:hover {
  color: var(--tb-brand);
}

/* ============================================================
   PAGE TEST MÉTÉO (meteotest.php)
   ============================================================ */
.tb-meteo-pick {
  margin: 0;
}
.tb-meteo-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 2px;
}
/* le tableau peut défiler à l'intérieur de sa carte (jamais la page entière) */
.tb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tb-meteo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.tb-meteo-table th,
.tb-meteo-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--tb-border);
  vertical-align: top;
}
.tb-meteo-table th {
  color: var(--tb-muted);
  font-family: var(--tb-head);
  font-weight: 500;
  font-size: 12px;
}
.tb-meteo-table tbody tr:last-child td {
  border-bottom: none;
}
.tb-muted-cell {
  color: var(--tb-muted);
  font-size: 11px;
}

/* ---- Badge de score + détail des facteurs (page test) ---- */
.tb-score-badge {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  font-family: var(--tb-head);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid currentColor;
  border-radius: var(--tb-radius-sm);
  padding: 2px 8px;
}
.tb-factors {
  margin-bottom: 10px;
}
.tb-factors > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.tb-factors > summary::-webkit-details-marker { display: none; }
.tb-factors-day {
  font-family: var(--tb-head);
  font-weight: 600;
  font-size: 15px;
}
.tb-factors-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}
.tb-factors-table td {
  padding: 6px 6px;
  font-size: 13px;
  vertical-align: middle;
  border-top: 1px solid var(--tb-border);
}
.tb-factor-name { width: 38%; }
.tb-factor-note { white-space: nowrap; font-family: var(--tb-head); }
.tb-factor-weight { white-space: nowrap; text-align: right; }
.tb-bar {
  display: block;
  height: 8px;
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.tb-bar-fill {
  display: block;
  height: 100%;
  background: var(--tb-brand);
}

/* ---- Explication du score (phrase courte + « pourquoi ? ») ---- */
.tb-day-score {
  margin-bottom: 10px;
}
.tb-day-score-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tb-day-score-text {
  min-width: 0;
}
.tb-day-why-short {
  color: var(--tb-text);
  font-size: 14px;
  margin-top: 4px;
}
.tb-why-details {
  margin-top: 12px;
}
.tb-why-toggle {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  color: var(--tb-brand);
  font-family: var(--tb-head);
  font-weight: 600;
  font-size: 13px;
}
.tb-why-toggle::-webkit-details-marker { display: none; }
.tb-why-toggle::after { content: ' ›'; }
.tb-why-details[open] .tb-why-toggle::after { content: ' ⌄'; }
.tb-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 8px;
  background: currentColor;
  vertical-align: middle;
}

/* ============================================================
   ACCUEIL branché + favori (tranche 6)
   ============================================================ */

/* étoile favori sur messpots */
.tb-spot-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tb-fav-form { display: inline; margin: 0; }
.tb-fav-star {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--tb-muted);
}
.tb-fav-star:hover { color: var(--tb-brand); }
.tb-fav-on { color: var(--tb-brand); cursor: default; }
.tb-spot-fav { border-color: var(--tb-brand); }

/* phrase courte « pourquoi » sous le verdict de la carte de score */
.tb-score-why {
  color: var(--tb-text);
  font-size: 14px;
  margin-top: 6px;
}

/* rappel honnête « pote carpiste » sous le score (texte discret) */
.tb-score-reminder {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: var(--tb-muted);
  font-size: 13px;
  line-height: 1.45;
}
.tb-score-reminder i {
  color: var(--tb-brand);
  margin-top: 2px;
  flex-shrink: 0;
}

/* sélecteur de spot sur l'accueil */
.tb-home-pick {
  margin-bottom: 12px;
}

/* détail dépliable intégré à la carte de score */
.tb-why-card {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tb-border);
}

/* ---- Invitation à installer la PWA (bandeau discret, Terrain brut) ---- */
.tb-pwa-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(76px + env(safe-area-inset-bottom)); /* au-dessus de la nav basse mobile */
  width: calc(100% - 24px);
  max-width: 430px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.tb-pwa-msg {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--tb-text);
  flex: 1 1 200px;
}
.tb-pwa-ic { color: var(--tb-brand); }
.tb-pwa-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.tb-pwa-btn {
  font-size: 13px;
  padding: 7px 12px;
  width: auto;
}
@media (min-width: 900px) {
  .tb-pwa-banner {
    bottom: 18px;
    right: 18px;
    left: auto;
    transform: none;
    max-width: 380px;
  }
}

/* ---- Réglages d'alertes / notifications ---- */
.tb-alert-ok {
  background: rgba(155, 176, 74, .14);
  border-color: var(--tb-good);
}
.tb-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.tb-switch-text { display: flex; flex-direction: column; }
.tb-switch-text strong { font-size: 15px; }
.tb-switch-sub { color: var(--tb-muted); font-size: 12px; }
/* interrupteur (checkbox stylé) */
.tb-switch {
  appearance: none; -webkit-appearance: none;
  width: 48px; height: 28px; border-radius: 999px;
  background: var(--tb-bg); border: 1px solid var(--tb-border);
  position: relative; cursor: pointer; flex-shrink: 0; transition: background-color .15s ease;
}
.tb-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tb-muted); transition: transform .15s ease, background-color .15s ease;
}
.tb-switch:checked { background: var(--tb-brand); border-color: var(--tb-brand); }
.tb-switch:checked::after { transform: translateX(20px); background: #1C1A17; }
.tb-notif-test { margin-top: 12px; width: auto; }
.tb-notif-status { font-size: 13px; margin-top: 10px; color: var(--tb-muted); min-height: 1px; }
.tb-notif-ok  { color: var(--tb-good); }
.tb-notif-bad { color: var(--tb-bad); }
.tb-notif-section { margin-top: 12px; }
.tb-notif-field { margin-top: 14px; }
.tb-check-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; font-size: 14px; cursor: pointer;
}
.tb-check-row + .tb-check-row { border-top: 1px solid var(--tb-border); }
.tb-check-row input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0;
  accent-color: var(--tb-brand);
}
.tb-form input[type="range"] { width: 100%; accent-color: var(--tb-brand); }

/* ============================================================
   GROUPES DE BOUTONS D'ACTION — responsive (anti-débordement).
   Réutilisable via .tb-btn-group ; appliqué aussi aux groupes
   existants. Desktop (≥900px, dashboard large) : boutons côte à côte
   (wrap si besoin). Mobile (<900px, colonne ~430px) : empilés en
   PLEINE LARGEUR, zone tactile ~44px.
   Aucun débordement horizontal, aucun texte tronqué.
   ============================================================ */
.tb-btn-group,
.tb-spot-actions,
.tb-session-actions,
.tb-carpe-actions,
.tb-lb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tb-btn-group > .btn-primary-ftlab,
.tb-btn-group > .btn-secondary-ftlab,
.tb-btn-group > .btn-danger-ftlab,
.tb-spot-actions > a,
.tb-session-actions > a,
.tb-carpe-actions > a {
  min-height: 44px; /* zone tactile confortable */
}

/* Sous 900px, le contenu est une colonne étroite (~430px) : on EMPILE pour
   ne jamais déborder. À 900px+ (dashboard large), les boutons restent en ligne. */
@media (max-width: 899px) {
  .tb-btn-group,
  .tb-spot-actions,
  .tb-session-actions,
  .tb-carpe-actions,
  .tb-lb-actions {
    flex-direction: column;
    align-items: stretch;
  }
  /* chaque bouton (et bouton dans un éventuel <form>) occupe toute la largeur */
  .tb-btn-group > a,
  .tb-btn-group > button,
  .tb-btn-group > form,
  .tb-btn-group > form > a,
  .tb-btn-group > form > button,
  .tb-spot-actions > a,
  .tb-spot-actions > button,
  .tb-session-actions > a,
  .tb-session-actions > button,
  .tb-carpe-actions > a,
  .tb-carpe-actions > button,
  .tb-lb-actions > a,
  .tb-lb-actions > button {
    width: 100%;
    min-height: 44px;
  }
}

/* En-têtes « titre + bouton » : autoriser le retour à la ligne sur très
   petit écran (jamais de débordement du bouton hors de l'écran). */
.tb-spots-head { flex-wrap: wrap; }

/* ---- Indicateur pays/région + source au placement du marqueur ---- */
.tb-geo-info {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 11px;
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-sm);
  color: var(--tb-text);
  font-size: 13px;
}
.tb-geo-info i { color: var(--tb-brand); flex-shrink: 0; }

/* ---- Conformité : pages légales, consentement, footer légal ---- */

/* lien textuel explicite (couleur signature, soulignement au survol seulement) */
.tb-link {
  color: var(--tb-brand);
  text-decoration: none;
  font-weight: 500;
}
.tb-link:hover { text-decoration: underline; }

/* pages de texte légal (confidentialité, mentions légales) */
.tb-legal {
  line-height: 1.6;
  color: var(--tb-text);
  font-size: 14.5px;
}
.tb-legal p { margin: 0 0 12px; }
.tb-legal-h {
  font-family: var(--tb-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--tb-text);
  margin: 22px 0 8px;
}
.tb-legal-list {
  margin: 0 0 12px;
  padding-left: 20px;
}
.tb-legal-list li { margin-bottom: 6px; }

/* variante « danger » de l'encart d'alerte (suppression de compte) */
.tb-alert-danger {
  background: rgba(199, 86, 59, .18);
  border-color: var(--tb-bad);
}

/* case à cocher en ligne (consentement, confirmation de suppression) */
.tb-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  color: var(--tb-text);
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
}
.tb-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--tb-brand);
  cursor: pointer;
}
.tb-check a { color: var(--tb-brand); text-decoration: none; }
.tb-check a:hover { text-decoration: underline; }

/* footer légal en bas de la barre latérale (ordinateur) */
.tb-side-foot {
  margin-top: auto;
  padding: 14px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--tb-border);
}
.tb-side-foot a {
  color: var(--tb-muted);
  text-decoration: none;
  font-size: 13px;
}
.tb-side-foot a:hover { color: var(--tb-text); }
.tb-side-foot a.tb-foot-danger { color: var(--tb-bad); }

/* footer légal discret en bas du contenu (téléphone) */
.tb-legal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  margin: 26px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--tb-border);
}
.tb-legal-foot a {
  color: var(--tb-muted);
  text-decoration: none;
  font-size: 12.5px;
}
.tb-legal-foot a:hover { color: var(--tb-text); }
.tb-legal-foot a.tb-foot-danger { color: var(--tb-bad); }
/* le footer mobile disparaît sur ordinateur (remplacé par la barre latérale) */
@media (min-width: 900px) {
  .tb-legal-foot { display: none; }
}
.tb-side-foot a i { width: 16px; text-align: center; margin-right: 4px; }

/* ---- Bouton feedback flottant (présent sur toutes les pages connectées) ----
   Petit bouton-étiquette (icône + « feedback »), en bas à droite.
   Mobile : AU-DESSUS de la nav basse, avec marge de sécurité + safe-area.
   Desktop : en bas à droite de la zone de contenu (pas de nav basse).
   La place est réservée par le padding-bas de .tb-main (pas de chevauchement). */
.tb-fab-feedback {
  position: fixed;
  right: 16px;
  /* au-dessus de la nav basse (~70px) + marge + zone home-indicator */
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;            /* zone tactile confortable */
  padding: 0 15px;
  background: var(--tb-brand);
  color: #1C1A17;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.tb-fab-feedback:hover,
.tb-fab-feedback:focus { color: #1C1A17; filter: brightness(1.06); }
.tb-fab-feedback i { font-size: 15px; }
@media (min-width: 900px) {
  /* ordinateur : pas de nav basse → bouton calé en bas à droite du contenu */
  .tb-fab-feedback { bottom: 22px; right: 22px; }
}
/* visionneuse photo / overlay ouvert : on efface le bouton (ne pas gêner) */
body.tb-noscroll .tb-fab-feedback { display: none; }

/* ---- Cockpit superadmin ---- */
.tb-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
}
.tb-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--tb-brand);
  color: #1C1A17;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.tb-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 600px)  { .tb-stat-grid { grid-template-columns: repeat(4, 1fr); } }
.tb-stat {
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-sm);
  padding: 14px 12px;
  text-align: center;
}
.tb-stat-num {
  font-family: var(--tb-head);
  font-size: 26px;
  font-weight: 600;
  color: var(--tb-text);
  line-height: 1;
}
.tb-stat-lbl { color: var(--tb-muted); font-size: 12px; margin-top: 4px; }

.tb-admin-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.tb-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--tb-border);
  background: var(--tb-surface);
  color: var(--tb-muted);
  font-size: 13px;
  text-decoration: none;
}
.tb-chip:hover { color: var(--tb-text); }
.tb-chip.active { color: #1C1A17; background: var(--tb-brand); border-color: var(--tb-brand); }

/* tableau des comptes (lisible mobile via scroll horizontal interne) */
.tb-admin-table { padding: 0; overflow-x: auto; }
.tb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tb-table th, .tb-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--tb-border);
  white-space: nowrap;
}
.tb-table th {
  color: var(--tb-muted);
  font-weight: 600;
  font-size: 12px;
}
.tb-table td.tb-num, .tb-table th.tb-num { text-align: right; }
.tb-table tr:last-child td { border-bottom: none; }
.tb-cell-main { color: var(--tb-text); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.tb-cell-sub { color: var(--tb-muted); font-size: 12px; margin-top: 2px; white-space: normal; }
.tb-row-churn td { background: rgba(199, 86, 59, .07); }
.tb-tag-admin, .tb-tag-churn {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.tb-tag-admin { background: rgba(155, 176, 74, .2); color: var(--tb-good); }
.tb-tag-churn { background: rgba(199, 86, 59, .2); color: var(--tb-bad); }

/* ---- Feedbacks (cockpit) ---- */
.tb-feedback { margin-bottom: 10px; }
.tb-feedback-new { border-color: var(--tb-brand); }
.tb-feedback-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tb-feedback-meta { color: var(--tb-muted); font-size: 12px; }
.tb-feedback-msg { color: var(--tb-text); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.tb-feedback-action { margin-top: 10px; }
.tb-feedback-action .btn-secondary-ftlab { width: auto; padding: 6px 14px; font-size: 13px; }
.tb-tag-cat {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .3px;
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  color: var(--tb-text);
}
.tb-tag-bug   { color: var(--tb-bad);   border-color: var(--tb-bad); }
.tb-tag-idee  { color: var(--tb-good);  border-color: var(--tb-good); }
.tb-tag-autre { color: var(--tb-muted); }

/* ---- Retour visuel d'upload photo (compression + envoi) ---- */
.tb-upload-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;            /* au-dessus du contenu et du bouton feedback */
  background: rgba(10, 9, 8, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tb-upload-overlay[hidden] { display: none; }
.tb-upload-box {
  width: 100%;
  max-width: 280px;
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  padding: 22px 20px;
  text-align: center;
}
.tb-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border: 3px solid var(--tb-border);
  border-top-color: var(--tb-brand);
  border-radius: 50%;
  animation: tb-spin .8s linear infinite;
}
@keyframes tb-spin { to { transform: rotate(360deg); } }
.tb-upload-text {
  color: var(--tb-text);
  font-size: 14px;
  margin-bottom: 12px;
}
.tb-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--tb-bg);
  border: 1px solid var(--tb-border);
  overflow: hidden;
}
.tb-progress-bar {
  height: 100%;
  width: 2%;
  background: var(--tb-brand);
  border-radius: 999px;
  transition: width .2s ease;
}
.tb-progress-bar.tb-progress-indef { animation: tb-indef 1.1s ease-in-out infinite; }
@keyframes tb-indef {
  0%   { width: 15%; margin-left: 0; }
  50%  { width: 45%; margin-left: 55%; }
  100% { width: 15%; margin-left: 0; }
}

/* ====================================================================
   Vitrine publique (accueilpublic.php) — non connecté
   ==================================================================== */
.tb-public { background: var(--tb-bg); }
.tb-public .tb-content { padding-bottom: 28px; }

/* accroche */
.tb-hero {
  text-align: center;
  padding: calc(18px + env(safe-area-inset-top)) 4px 8px;
}
.tb-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.tb-hero-logo {
  font-family: var(--tb-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--tb-text);
}
.tb-hero-logo-img {
  display: block;
  width: 260px;
  max-width: 78vw;
  height: auto;
}
.tb-hero-title {
  font-family: var(--tb-head);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--tb-text);
  margin: 0 0 12px;
}
.tb-hero-sub {
  color: var(--tb-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 auto 18px;
  max-width: 460px;
}
.tb-hero-sub em { color: var(--tb-text); font-style: normal; font-weight: 600; }
.tb-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.tb-hero-cta .btn-primary-ftlab { width: 100%; max-width: 320px; }
.tb-hero-login { font-size: 14px; }

/* démo : étiquette + jours cliquables (boutons) */
.tb-demo-flag { color: var(--tb-brand); }
.tb-demo-note { text-align: center; margin: 8px 0 4px; }
.tb-day-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: var(--tb-surface);
  font-family: inherit;
  cursor: pointer;
}
.tb-day-btn .tb-day-name,
.tb-day-btn .tb-day-score { display: block; }

/* points forts */
.tb-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}
.tb-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  padding: 14px 16px;
}
.tb-point > i {
  color: var(--tb-brand);
  font-size: 20px;
  width: 26px;
  text-align: center;
  margin-top: 2px;
  flex-shrink: 0;
}
.tb-point > div { display: flex; flex-direction: column; gap: 2px; }
.tb-point strong { color: var(--tb-text); font-size: 15px; }
.tb-point span { color: var(--tb-muted); font-size: 13.5px; line-height: 1.45; }

/* encart early adopters */
.tb-early { text-align: center; border-color: var(--tb-brand); }
.tb-early-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232, 115, 43, .15);
  color: var(--tb-brand);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.tb-early-title {
  font-family: var(--tb-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--tb-text);
  margin: 0 0 10px;
}
.tb-early p { color: var(--tb-muted); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.tb-early p strong { color: var(--tb-text); }

/* pied de page public */
.tb-public-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--tb-border);
}
.tb-public-foot a {
  color: var(--tb-muted);
  text-decoration: none;
  font-size: 13px;
}
.tb-public-foot a:hover { color: var(--tb-text); }

/* --------------------------------------------------------------------
   Desktop (>=900px) : mise en page « façon site », large et aérée.
   Tout est scopé sous .tb-public → AUCUN impact sur le reste de l'app
   (les pages auth partagent .tb-phone/.tb-content mais pas .tb-public).
   Le rendu MOBILE (<900px) reste celui défini plus haut, inchangé.
   -------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* on libère la colonne étroite de l'app, uniquement pour la vitrine */
  .tb-public .tb-phone { max-width: 1140px; }
  .tb-public .tb-content { max-width: none; margin: 0 auto; padding: 28px 32px 44px; }

  /* héro en deux colonnes : accroche | démo */
  .tb-hero-row {
    display: flex;
    align-items: center;
    gap: 52px;
    margin-bottom: 8px;
  }
  .tb-hero-col { flex: 1 1 0; min-width: 0; }
  .tb-demo-col { flex: 1 1 0; min-width: 0; }

  .tb-public .tb-hero { text-align: left; padding: 0; }
  .tb-public .tb-hero-brand { margin-bottom: 22px; }
  .tb-public .tb-hero-title { font-size: 40px; margin-bottom: 16px; }
  .tb-public .tb-hero-sub { margin: 0 0 24px; max-width: 520px; font-size: 17px; }
  .tb-public .tb-hero-cta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
  }
  .tb-public .tb-hero-cta .btn-primary-ftlab { width: auto; max-width: none; }

  /* la démo : pas de marge haute parasite en tête de colonne */
  .tb-demo-col .tb-section-title:first-child { margin-top: 0; }

  /* points forts en rangée de cartes (wrap propre) */
  .tb-public .tb-points {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }
  .tb-public .tb-point {
    flex: 1 1 220px;
    min-width: 220px;
  }

  /* early adopters + footer : pleine largeur, centrés et lisibles */
  .tb-public .tb-early {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .tb-public .tb-section-title { text-align: center; }
  .tb-demo-col .tb-section-title { text-align: left; }
}

/* très grand écran : on garde un conteneur confortable, pas tendu */
@media (min-width: 1280px) {
  .tb-public .tb-phone { max-width: 1180px; }
}