/* ════════════════════════════════════════════════════════════════════
   TribesFlow — Charte éditoriale (Aesop / Hermès / Relais & Châteaux)
   Référence : session "Load FamilyFlow project into memory" 18 mai 2026
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette signature TribesFlow */
  --tf-terre:        #B87333;
  --tf-cuivre:       #A87E5A;
  --tf-chene:        #C19A6B;
  --tf-encre:        #1A1814;
  --tf-papier:       #F5F0E8;
  --tf-papier-fonce: #EAE2D2;

  /* Couleurs thématiques par case */
  --tf-rose-poudre:  #EDD9D2;
  --tf-rouille:      #B85F3A;
  --tf-bleu-poudre:  #D2DAE3;
  --tf-marine:       #2B4561;
  --tf-vert-sauge:   #C8D2BD;
  --tf-mousse:       #6B7F5C;
  --tf-paille:       #ECDDB0;
  --tf-or-vieilli:   #9B7E3F;

  /* Sémantique */
  --tf-success:      #6B7F5C;
  --tf-warning:      #B87333;
  --tf-danger:       #B85F3A;

  /* Typographies */
  --ff-serif:  'Cormorant Garamond', Georgia, serif;
  --ff-sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:   'Montserrat', -apple-system, sans-serif;

  /* Espacements */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px;
  --sp-4:16px; --sp-5:24px; --sp-6:32px;  --sp-7:48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--tf-papier) !important;
  color: var(--tf-encre) !important;
  font-family: var(--ff-sans);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--tf-terre); }
button { font-family: inherit; cursor: pointer; }

/* Halos radiaux 4 coins (chaleur foyer) */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 600px 400px at 0% 0%, rgba(237,217,210,.30), transparent 60%),
    radial-gradient(ellipse 600px 400px at 100% 0%, rgba(210,218,227,.28), transparent 60%),
    radial-gradient(ellipse 600px 400px at 0% 100%, rgba(200,210,189,.26), transparent 60%),
    radial-gradient(ellipse 600px 400px at 100% 100%, rgba(236,221,176,.24), transparent 60%);
}

/* ── App container ── */
.tf-app {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
}

/* ── En-tête unifié (topbar + bandeau salutation dans 1 cadre) ── */
.tf-header {
  margin: 0 -32px 28px;
  background: linear-gradient(180deg, #F0E7D4 0%, #F8F3E4 60%, var(--tf-papier) 100%);
  border-bottom: 1px solid rgba(184,115,51,.28);
  box-shadow: 0 4px 20px -12px rgba(26,24,20,.12);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.tf-topbar {
  padding: 10px 32px;
  display: grid;
  grid-template-columns: minmax(auto, max-content) 1fr minmax(auto, max-content);
  align-items: center;
  gap: 24px;
  min-height: 60px;
  border-bottom: 1px dashed rgba(184,115,51,.25);
}
.tf-nav {
  justify-self: center;
  max-width: 100%;
}
.tf-logo-block {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.tf-logo {
  font-family: var(--ff-serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--tf-encre);
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.tf-logo-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.tf-logo-text { display: inline; }
.tf-logo .tf-logo-text span { color: var(--tf-terre); }
.tf-logo a:hover { color: var(--tf-encre); }
.tf-logo a:hover .tf-logo-text span { color: var(--tf-cuivre); }

/* ── Logo Nœud d'union animé : pulsation douce + dessin progressif au chargement ── */
.tf-logo-noeud { flex-shrink: 0; transition: transform .35s cubic-bezier(.4,0,.2,1); }
.tf-logo-link:hover .tf-logo-noeud { transform: rotate(12deg) scale(1.06); }
@keyframes tf-noeud-pulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}
@keyframes tf-noeud-draw {
  from { stroke-dashoffset: 240; }
  to   { stroke-dashoffset: 0; }
}
@keyframes tf-noeud-dot {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.tf-logo-noeud path {
  stroke-dasharray: 240;
  stroke-dashoffset: 0;
  animation: tf-noeud-draw 1.6s ease-out, tf-noeud-pulse 3.5s ease-in-out infinite 1.6s;
}
.tf-logo-noeud circle {
  transform-origin: 16px 16px;
  animation: tf-noeud-dot 1.6s ease-out;
}

/* Bloc meta : date/heure/météo collé à droite du logo */
.tf-meta {
  display: flex; align-items: center; gap: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(184,115,51,.25);
  min-width: 0;
}
.tf-meta-date {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .82rem;
  color: rgba(26,24,20,.7);
  line-height: 1.15;
  white-space: nowrap;
}
.tf-meta-date-sem {
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tf-terre);
  font-weight: 600;
  font-style: normal;
  display: block;
  margin-bottom: 1px;
}
.tf-meta-heure {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--tf-encre);
  line-height: 1;
  padding: 0 10px;
  border-left: 1px solid rgba(184,115,51,.25);
  border-right: 1px solid rgba(184,115,51,.25);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.tf-meta-meteo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--tf-encre);
  white-space: nowrap;
  min-width: 60px;
}
.tf-meta-meteo-icone {
  width: 22px; height: 22px;
  color: var(--tf-terre);
}
.tf-meta-meteo-temp {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tf-meta-meteo-ville {
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26,24,20,.55);
}
@media(max-width:1240px) {
  .tf-meta-meteo-ville { display: none; }
}
@media(max-width:1100px) {
  .tf-meta-date { display: none; }
}
@media(max-width:980px) {
  .tf-meta-heure { display: none; }
}

.tf-nav {
  display: flex; gap: 14px; align-items: center;
  justify-content: center;
  min-width: 0;
}
.tf-nav-link {
  font-family: var(--ff-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26,24,20,.6);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}
.tf-nav-link:hover, .tf-nav-link.active {
  color: var(--tf-terre);
  border-bottom-color: var(--tf-terre);
}

.tf-nav-tools { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.tf-icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(26,24,20,.15);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  color: var(--tf-encre);
}
.tf-icon-btn:hover {
  border-color: var(--tf-terre);
  background: rgba(184,115,51,.06);
  color: var(--tf-terre);
}
.tf-icon-btn svg { width: 16px; height: 16px; }
.tf-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--tf-rouille); color: var(--tf-papier);
  font-size: .58rem; font-weight: 600;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.tf-user-pill {
  font-family: var(--ff-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid rgba(184,115,51,.4);
  color: var(--tf-encre);
  background: rgba(184,115,51,.06);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: all .2s;
}
.tf-user-pill::before {
  content: ''; width: 6px; height: 6px;
  background: var(--tf-mousse);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(107,127,92,.15);
}
.tf-user-pill:hover {
  background: var(--tf-terre);
  color: var(--tf-papier);
  border-color: var(--tf-terre);
}

/* Actions rapides en topbar */
.tf-quick-actions {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26,24,20,.6);
}
.tf-quick-actions a {
  padding: 4px 12px;
  border-bottom: 1px solid transparent;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.tf-quick-actions a:hover {
  color: var(--tf-terre);
  border-bottom-color: var(--tf-terre);
}
.tf-quick-actions .sep {
  width: 1px; height: 14px;
  background: rgba(26,24,20,.15);
}

/* Bandeau stats inline (à droite topbar bas) */
.tf-stats-inline {
  display: flex; gap: 18px;
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tf-stat-inline {
  color: rgba(26,24,20,.5);
}
.tf-stat-inline strong {
  color: var(--tf-terre);
  font-weight: 600;
  margin-right: 4px;
  font-size: .82rem;
}

/* ── Titres et eyebrows ── */
.tf-eyebrow {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(26,24,20,.5);
  margin-bottom: 6px;
}
.tf-titre {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 2.2rem;
  color: var(--tf-encre);
  line-height: 1.1;
  margin-bottom: 8px;
}
.tf-titre-sm {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--tf-encre);
  margin-bottom: 10px;
}
.tf-baseline {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(26,24,20,.65);
  margin-bottom: 28px;
}

/* ── Cards et blocs ── */
.tf-card {
  background: var(--tf-papier);
  border: 1px solid rgba(184,115,51,.18);
  padding: 22px 26px;
  margin-bottom: 16px;
  position: relative;
}
.tf-card-accent {
  border-left: 3px solid var(--tf-terre);
}
.tf-card h2 {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--tf-encre);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.tf-card h2 .count {
  font-family: var(--ff-mono);
  font-size: .6rem;
  padding: 3px 10px;
  background: rgba(184,115,51,.1);
  color: var(--tf-terre);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Boutons ── */
.tf-btn {
  display: inline-block;
  padding: 10px 22px;
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  border: 1px solid var(--tf-terre);
  background: transparent;
  color: var(--tf-terre);
}
.tf-btn:hover { background: var(--tf-terre); color: var(--tf-papier); }
.tf-btn-primary { background: var(--tf-terre); color: var(--tf-papier); }
.tf-btn-primary:hover { background: var(--tf-cuivre); border-color: var(--tf-cuivre); }
.tf-btn-ghost { border-color: rgba(26,24,20,.2); color: var(--tf-encre); }
.tf-btn-ghost:hover { background: rgba(26,24,20,.05); color: var(--tf-encre); border-color: var(--tf-encre); }
.tf-btn-danger { border-color: var(--tf-rouille); color: var(--tf-rouille); }
.tf-btn-danger:hover { background: var(--tf-rouille); color: var(--tf-papier); }

/* ── Inputs ── */
.tf-input, .tf-select, .tf-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(26,24,20,.2);
  background: transparent;
  font-family: var(--ff-sans);
  font-size: .9rem;
  color: var(--tf-encre);
  transition: border-color .2s;
}
.tf-input:focus, .tf-select:focus, .tf-textarea:focus {
  outline: none;
  border-color: var(--tf-terre);
}
.tf-label {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(26,24,20,.6);
  margin-bottom: 6px;
  display: block;
}
.tf-form-row { margin-bottom: 16px; }

/* ── Modale auth ── */
.tf-auth-bg {
  position:fixed; inset:0;
  background:rgba(26,24,20,.55);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:100;
}
.tf-auth-modal {
  background: var(--tf-papier);
  padding: 32px;
  max-width: 440px; width: 90%;
  border: 2px solid var(--tf-terre);
  position: relative;
}
.tf-auth-modal h3 {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.7rem;
  margin-bottom: 18px;
  color: var(--tf-encre);
}
.tf-users-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.tf-user-btn {
  padding: 14px;
  border: 1px solid rgba(26,24,20,.15);
  background: transparent;
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tf-encre);
  cursor: pointer;
  transition: all .2s;
}
.tf-user-btn:hover {
  background: var(--tf-terre);
  color: var(--tf-papier);
  border-color: var(--tf-terre);
}
.tf-auth-err {
  color: var(--tf-rouille);
  font-size: .78rem;
  margin-top: 10px;
  min-height: 20px;
}

/* ── Tables ── */
.tf-table {
  width: 100%;
  border-collapse: collapse;
}
.tf-table th, .tf-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(26,24,20,.08);
  font-size: .88rem;
}
.tf-table th {
  font-family: var(--ff-mono);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26,24,20,.55);
  background: rgba(184,115,51,.04);
}
.tf-table tr:hover td { background: rgba(184,115,51,.04); }

/* ── Badges et tags ── */
.tf-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  background: rgba(184,115,51,.08);
  color: var(--tf-terre);
  border: 1px solid rgba(184,115,51,.2);
}
.tf-tag-admin   { background: rgba(184,95,58,.1);  color: var(--tf-rouille);   border-color: rgba(184,95,58,.3); }
.tf-tag-coadmin { background: rgba(43,69,97,.08);  color: var(--tf-marine);    border-color: rgba(43,69,97,.25); }
.tf-tag-membre  { background: rgba(107,127,92,.1); color: var(--tf-mousse);    border-color: rgba(107,127,92,.25); }
.tf-tag-lecture { background: rgba(155,126,63,.1); color: var(--tf-or-vieilli);border-color: rgba(155,126,63,.25); }

/* ── Bandeau "Tableau de bord météo-marin" (variante C) ── */
.tf-bandeau {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  position: relative;
}

/* ── Ticker 1-ligne sous topbar : date · heure · météo · soleil · lune · marée · actu
   Items à largeur naturelle, espacés par space-between ── */
.tf-infoline {
  display: flex; align-items: center; flex-wrap: nowrap;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 32px 11px;
  font-family: var(--ff-sans);
  font-size: .92rem;
  color: rgba(26,24,20,.78);
  border-top: 1px solid rgba(184,115,51,.14);
  border-bottom: 1px solid rgba(184,115,51,.14);
  background: rgba(255,255,255,.35);
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.3;
}
.tf-il-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;       /* ← items gardent leur largeur naturelle, plus de chevauchement */
  min-width: 0;
}
/* Lien actu : prend toute la place restante (flex:1 1 280px) avec ellipse */
.tf-il-item[data-actu] {
  flex: 1 1 280px;
  min-width: 280px;
  overflow: hidden;
}
.tf-il-item[data-actu] .tf-il-val {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
.tf-il-item[data-actu] .tf-il-actu-link {
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
}

/* ── Marquee défilant pour l'actu ── */
.tf-il-actu-marquee {
  flex: 1 1 320px;
  min-width: 320px;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.tf-il-actu-prefix {
  color: var(--tf-terre);
  font-size: .95em;
  flex-shrink: 0;
}
.tf-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: tf-marquee-scroll 38s linear infinite;
  will-change: transform;
}
.tf-marquee-track:hover { animation-play-state: paused; }
.tf-marquee-group {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding-right: 14px;
}
.tf-marquee-link {
  color: var(--tf-encre);
  text-decoration: none;
  border-bottom: 1px dotted rgba(184,115,51,.35);
  transition: color .15s;
  white-space: nowrap;
}
.tf-marquee-link:hover { color: var(--tf-terre); border-bottom-color: var(--tf-terre); }
.tf-marquee-sep {
  color: rgba(184,115,51,.4);
  font-size: .85em;
  margin: 0 4px;
}
@keyframes tf-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tf-il-item.tf-il-link { color: inherit; text-decoration: none; transition: color .15s; }
.tf-il-item.tf-il-link:hover { color: var(--tf-terre); }
.tf-il-lbl {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(26,24,20,.48);
}
.tf-il-val {
  color: var(--tf-encre);
  font-size: 1em;
}
.tf-il-val strong {
  font-family: var(--ff-serif);
  font-weight: 500;
  color: var(--tf-terre);
  font-variant-numeric: tabular-nums;
  font-size: 1.08em;
}
.tf-il-heure-item .tf-il-val {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--tf-encre);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.tf-il-skel { color: rgba(26,24,20,.35); font-style: italic; }
.tf-il-actu-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted rgba(184,115,51,.4);
  transition: all .15s;
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.tf-il-actu-link:hover {
  color: var(--tf-terre);
  border-bottom-color: var(--tf-terre);
}

/* Tablette : taille un peu réduite */
@media (max-width: 1100px) {
  .tf-infoline { font-size: .82rem; padding: 7px 24px 9px; gap: 10px; }
  .tf-il-heure-item .tf-il-val { font-size: 1.05rem; }
  .tf-il-lbl { font-size: .6rem; }
  .tf-il-actu-link { max-width: 30ch; }
}
@media (max-width: 760px) {
  .tf-infoline {
    flex-wrap: wrap; justify-content: flex-start;
    gap: 8px 14px; padding: 6px 16px 8px;
    font-size: .76rem;
  }
  .tf-il-heure-item .tf-il-val { font-size: .95rem; }
  .tf-il-actu-link { max-width: 100%; }
}
.tf-bandeau-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
  min-height: 0;
}
.tf-bandeau-salut {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
}
.tf-bandeau-salut em {
  font-style: italic;
  color: rgba(26,24,20,.55);
  font-size: .85rem;
  margin-right: .25em;
  font-weight: 400;
}
.tf-bandeau-salut strong {
  color: var(--tf-terre);
  font-weight: 600;
  font-size: 1.15rem;
}
.tf-bandeau-date {
  font-family: var(--ff-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(26,24,20,.5);
  white-space: nowrap;
}
.tf-bandeau-date::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: rgba(184,115,51,.3);
  vertical-align: middle;
  margin-right: 10px;
}

.tf-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.tf-card-bandeau {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(184,115,51,.18);
  padding: 6px 10px;
  text-align: center;
  border-radius: 2px;
  transition: all .2s;
  cursor: pointer;
  max-height: 78px;
  overflow: hidden;
}
.tf-card-bandeau:hover {
  border-color: var(--tf-terre);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(184,115,51,.35);
  background: rgba(255,255,255,.7);
}
.tf-card-bandeau-icon {
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 1px;
  color: var(--tf-terre);
}
.tf-card-bandeau-val {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--tf-encre);
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}
.tf-card-bandeau-label {
  font-family: var(--ff-mono);
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(26,24,20,.5);
  margin-top: 1px;
}
.tf-card-bandeau-sub {
  font-family: var(--ff-sans);
  font-size: .62rem;
  color: rgba(26,24,20,.6);
  margin-top: 0;
  line-height: 1.1;
}
.tf-bandeau-dicton {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted rgba(184,115,51,.25);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .82rem;
  color: rgba(26,24,20,.6);
  text-align: center;
}

/* ── Cartes avec contenu en liste (Astres, Actu) ── */
.card-astres-block, .card-agenda-block, .card-actu-block {
  text-align: left;
  padding: 6px 10px;
}
.card-astres-block .tf-card-bandeau-label,
.card-agenda-block .tf-card-bandeau-label,
.card-actu-block .tf-card-bandeau-label {
  font-family: var(--ff-mono);
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(26,24,20,.5);
  margin-bottom: 3px;
  border-bottom: 1px dotted rgba(184,115,51,.2);
  padding-bottom: 2px;
}
.astres-stack {
  display: flex; flex-direction: column;
  gap: 2px;
}
.astres-line {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--ff-sans);
  font-size: .66rem;
  color: rgba(26,24,20,.75);
  line-height: 1.15;
}
.astres-icon {
  font-size: .8rem;
  width: 12px; text-align: center;
  color: var(--tf-terre);
  flex-shrink: 0;
}
.astres-text { flex: 1; min-width: 0; }
.astres-text strong {
  font-family: var(--ff-serif);
  font-weight: 500;
  color: var(--tf-encre);
  font-variant-numeric: tabular-nums;
  font-size: .76rem;
}
/* Lien actu hover : sobre, souligné cuivre au survol */
a.tf-actu-item { transition: color .2s; }
a.tf-actu-item:hover { color: var(--tf-terre) !important; }
a.tf-actu-item:hover .astres-text { text-decoration: underline; text-decoration-color: rgba(184,115,51,.4); text-underline-offset: 3px; }
/* Clamp titres actu sur 1 ligne max pour mode ultra-compact */
a.tf-actu-item .astres-text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .66rem;
  line-height: 1.15;
  white-space: nowrap;
}
/* Cartes 1 & 2 (heure + météo) : centrer verticalement leur contenu pour ne pas laisser de blanc */
#card-heure, #card-meteo {
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 880px) {
  .tf-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .tf-cards { grid-template-columns: 1fr; }
}

/* Journal du jour : grille de mini-blocs à droite du salut */
.tf-journal {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px 24px;
  font-family: var(--ff-mono);
  font-size: .7rem;
  line-height: 1.3;
  align-self: center;
  border-left: 1px dashed rgba(184,115,51,.3);
  padding-left: 20px;
}
.tf-journal-item {
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  color: rgba(26,24,20,.75);
}
.tf-journal-item strong {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: .92rem;
  color: var(--tf-encre);
  font-variant-numeric: tabular-nums;
}
.tf-journal-item .tf-journal-icon {
  font-size: 1rem;
  line-height: 1;
}
.tf-journal-item .tf-journal-label {
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26,24,20,.5);
}
.tf-journal-full {
  grid-column: 1 / -1;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .8rem;
  color: rgba(26,24,20,.6);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dotted rgba(184,115,51,.2);
  white-space: normal;
}
@media(max-width:1100px) {
  .tf-journal { display: none; }
}
/* tampon + timbre retirés en variante C (tableau de bord) */

/* ── Page hero (toutes pages sauf index) ── */
.tf-hero {
  margin: 0 0 32px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(184,115,51,.18);
}
.tf-hero-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
}
.tf-hero-actions { display: flex; gap: 10px; }

/* ── Chronomètre cuisine (widget flottant) ── */
.tf-chrono-widget {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 360px;
  background: var(--tf-papier);
  border: 1px solid rgba(184,115,51,.3);
  border-left: 3px solid var(--tf-terre);
  box-shadow: 0 12px 40px -8px rgba(26,24,20,.25);
  z-index: 80;
  font-family: var(--ff-sans);
}
.tf-chrono-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: rgba(184,115,51,.08);
  border-bottom: 1px dashed rgba(184,115,51,.3);
}
.tf-chrono-title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1rem;
  display: flex; align-items: center; gap: 8px;
}
.tf-chrono-icon { font-size: 1.2rem; }
.tf-chrono-toggle {
  background: transparent; border: 1px solid rgba(26,24,20,.2);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--tf-encre);
}
.tf-chrono-toggle:hover { border-color: var(--tf-terre); color: var(--tf-terre); }
.tf-chrono-body { padding: 14px 16px 16px; }
.tf-chrono-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
  max-height: 280px; overflow-y: auto;
}
.tf-chrono-empty {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .85rem;
  color: rgba(26,24,20,.5);
  text-align: center;
  padding: 14px 0;
}
.tf-chrono-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(184,115,51,.18);
  border-left: 3px solid var(--tf-terre);
  transition: all .3s;
}
.tf-chrono-item.running { border-left-color: var(--tf-mousse); }
.tf-chrono-item.finished {
  border-left-color: var(--tf-rouille);
  background: rgba(184,95,58,.1);
  animation: tf-chrono-pulse 1s ease-in-out infinite alternate;
}
@keyframes tf-chrono-pulse {
  from { background: rgba(184,95,58,.08); }
  to   { background: rgba(184,95,58,.22); }
}
.tf-chrono-item-info { flex: 1; min-width: 0; }
.tf-chrono-item-label {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26,24,20,.6);
  margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tf-chrono-item-time {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tf-encre);
  font-variant-numeric: tabular-nums;
}
.tf-chrono-item.finished .tf-chrono-item-time { color: var(--tf-rouille); }
.tf-chrono-item-progress {
  margin-top: 6px;
  height: 3px;
  background: rgba(184,115,51,.12);
  overflow: hidden;
}
.tf-chrono-item-progress-bar {
  height: 100%;
  background: var(--tf-mousse);
  transition: width 1s linear;
}
.tf-chrono-item.finished .tf-chrono-item-progress-bar { background: var(--tf-rouille); }
.tf-chrono-item-actions {
  display: flex; gap: 6px;
}
.tf-chrono-btn {
  background: transparent;
  border: 1px solid rgba(26,24,20,.2);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .85rem; color: var(--tf-encre);
  transition: all .15s;
}
.tf-chrono-btn:hover { border-color: var(--tf-terre); color: var(--tf-terre); }
.tf-chrono-btn-x:hover { border-color: var(--tf-rouille); color: var(--tf-rouille); }
.tf-chrono-btn-done {
  background: var(--tf-mousse); color: var(--tf-papier); border-color: var(--tf-mousse);
  width: auto; padding: 0 12px;
  font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
}
.tf-chrono-presets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.tf-chrono-presets button {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 4px;
  background: transparent;
  border: 1px solid rgba(184,115,51,.3);
  color: var(--tf-encre);
  cursor: pointer;
  transition: all .15s;
}
.tf-chrono-presets button:hover {
  background: var(--tf-terre);
  color: var(--tf-papier);
  border-color: var(--tf-terre);
}
.tf-chrono-custom {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
  padding-top: 10px;
  border-top: 1px dotted rgba(184,115,51,.25);
}
.tf-chrono-custom input {
  padding: 6px 10px;
  border: 1px solid rgba(26,24,20,.2);
  background: transparent;
  font-family: var(--ff-sans);
  font-size: .8rem;
}
.tf-chrono-custom input:focus { outline: none; border-color: var(--tf-terre); }

@media (max-width: 520px) {
  .tf-chrono-widget { width: calc(100vw - 32px); right: 16px; bottom: 16px; }
}

/* ── Utils ── */
.tf-mention { font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(26,24,20,.5); }
.tf-italique { font-family: var(--ff-serif); font-style: italic; color: rgba(26,24,20,.65); }
.tf-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tf-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.tf-grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media(max-width:920px) {
  .tf-grid-2, .tf-grid-3, .tf-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) {
  .tf-app { padding: 0 18px; }
  .tf-grid-2, .tf-grid-3, .tf-grid-4 { grid-template-columns: 1fr; }
  .tf-nav { display: none; }
}