/* shared/pages/home.css — feuille de home.html, sortie de son bloc \3c style> le 17/10/2026 (lot 8 du dossier 1 : CSP sans
   style en ligne). Chargée par une balise <link> à la place exacte de l’ancien bloc : même ordre dans la cascade. */
/* ============================================================================
 * /home.html — Hub d'accueil patient.
 * Refonte complète 26/05/2026 d'après le canvas "Accueil — Espace patient"
 * (psychologue-fr-claude-design/project/Accueil.html). Remplace l'ancien
 * placeholder MVP ("Bienvenue sur Psychologue.fr" + bouton unique).
 *
 * 2 vues conditionnelles selon le statut renvoyé par /patient-profile/status :
 *   - "homeProspect"  : lead / patient / patient_ex_abonne (pas d'abo actif)
 *                       → hero CTA "Écrire mon premier message" + suggestion
 *                         de 3 psys + réassurance + teaser tests
 *   - "homePatient"   : patient_abonne / patient_en_resiliation (abo en cours)
 *                       → prochain RDV + dernier message + actions rapides
 *                         + carte psy + crédits restants
 *
 * Le logo sidebar de TOUTES les pages renvoie vers /home.html (cf.
 * shared/sidebar.js HOME_BY_STATUS, refondu en même temps). Cette page sert
 * désormais de hub central.
 *
 * Hydratation des données : shared/views/home-view.js (module init/refresh/
 * destroy partagé avec la coquille /app-shell.html, 03/07/2026) — aucun
 * fallback inventé, tout vient des endpoints existants (status, appointments,
 * conversations, subscription, credits, public-psychologues).
 * ============================================================================ */

/* ─── Shell ─────────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}
.main { min-width: 0; background: var(--bg); }
.page { max-width: 1080px; margin: 0 auto; padding: var(--palette-espacement-cabinet) var(--palette-espacement-components-3) var(--palette-espacement-components-6); width: 100%; }

/* ─── Loader (centré pendant le fetch /status) ──────────────────────────── */
/* (Vague 2 UX) SQUELETTE : maquette grise immédiate à la place du spinner —
   la page peint dès le premier frame, prérequis des View Transitions. */
.home-loader {
  display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-5);
}
.home-loader .spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--adaptation-bordure-action-accent, var(--accent));
  border-radius: var(--palette-rayon-composants-2); animation: spin .8s linear infinite;
}
.home-loader p { color: var(--muted); font-size: var(--palette-typographie-cabinet-conversation-3); margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Greet row (titre + status pill) ────────────────────────────────────── */
.greet-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--palette-espacement-cabinet-conversation); margin-bottom: var(--palette-espacement-cabinet-conversation); flex-wrap: wrap; }
.greet h1, .pat-greet h1 {
  font-size: var(--palette-typographie-composants-16); letter-spacing: var(--palette-typographie-layout-2); margin: 0 0 var(--palette-espacement-cabinet-conversation-3);
  font-weight: 700; color: var(--ink); line-height: 1.1;
}
.pat-greet h1 .first { font-weight: 400; color: var(--muted); }
.greet .sub, .pat-greet .sub { color: var(--muted); font-size: var(--palette-typographie-composants-14); max-width: 520px; }
.status-pill {
  display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-11);
  padding: var(--palette-espacement-components) var(--palette-espacement-cabinet-conversation-7); border-radius: var(--palette-rayon-components-2);
  font-size: var(--palette-typographie-components-2); font-weight: 600;
  background: var(--warning-soft); color: var(--palette-texte-danger-home);
  border: 1px solid var(--palette-bordure-home); white-space: nowrap;
}
.status-pill .pulse { width: 7px; height: 7px; border-radius: var(--palette-rayon-composants-2); background: var(--adaptation-fond-danger-warning, var(--warning)); }
.status-suivi {
  display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-6);
  padding: var(--palette-espacement-components) var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-components) var(--palette-espacement-cabinet-conversation-5); border-radius: var(--palette-rayon-components-2);
  font-size: var(--palette-typographie-components-2); font-weight: 500;
  background: var(--success-soft); color: var(--palette-texte-principal-home);
  border: 1px solid var(--palette-bordure-home-2); white-space: nowrap;
}
.status-suivi .av {
  width: 20px; height: 20px; border-radius: var(--palette-rayon-composants-2);
  background: linear-gradient(135deg, var(--palette-surface-action-demarrer-suivi), var(--palette-fond-action-conversation));
  color: var(--palette-texte-inverse-components); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--palette-typographie-mobile); font-weight: 700;
}

/* ─── Section générique ─────────────────────────────────────────────────── */
.h-section {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--palette-rayon-cabinet-conversation);
  padding: var(--palette-espacement-cabinet-conversation) var(--palette-espacement-components-5); box-shadow: 0 1px 0 var(--palette-ombre-changer-psychologue-2), 0 8px 24px -18px var(--palette-ombre-composants-5);
}
.h-section + .h-section { margin-top: var(--palette-espacement-cabinet-conversation-8); }
.h-eyebrow {
  font-size: var(--palette-typographie-composants-17); text-transform: uppercase; letter-spacing: var(--palette-typographie-layout);
  color: var(--muted); font-weight: 700; margin: 0 0 var(--palette-espacement-cabinet-conversation-6);
}
.h-section h2 { font-size: var(--palette-typographie-composants); letter-spacing: var(--palette-typographie-layout-4); margin: 0; font-weight: 700; color: var(--ink); }

/* ─── Boutons (override léger, .btn de components.css conservé ailleurs) ─ */
.h-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--palette-espacement-cabinet-conversation-11); padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-8); border-radius: var(--palette-rayon-components); font-size: var(--palette-typographie-components); font-weight: 600; border: 1px solid transparent; text-decoration: none; cursor: pointer; }
.h-btn-primary { background: var(--adaptation-fond-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); }
.h-btn-primary:hover { background: var(--adaptation-fond-action-accent-hover, var(--accent-hover)); }
.h-btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.h-btn-ghost:hover { background: var(--surface-2); }

/* ============================================================================
 * VUE PROSPECT (lead / patient / patient_ex_abonne)
 * ============================================================================ */

/* Hero CTA */
.hero-start {
  background: linear-gradient(135deg, var(--adaptation-fond-action-accent, var(--accent)) 0%, var(--palette-fond-action-home) 100%);
  color: var(--palette-texte-inverse-components); border-radius: var(--palette-rayon-composants); padding: var(--palette-espacement-cabinet) var(--palette-espacement-invitation-6);
  position: relative; overflow: hidden;
  box-shadow: 0 20px 50px -20px var(--palette-ombre-composants-4);
}
.hero-start::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px; border-radius: var(--palette-rayon-composants-2);
  background: radial-gradient(circle, var(--palette-surface-home) 0%, transparent 65%);
}
.hero-start .label {
  font-size: var(--palette-typographie-composants-3); letter-spacing: var(--palette-typographie-layout); text-transform: uppercase;
  color: var(--palette-texte-inverse-home); font-weight: 600; margin-bottom: var(--palette-espacement-cabinet-conversation-11);
}
.hero-start h2 {
  font-size: var(--palette-typographie-cabinet-2); letter-spacing: var(--palette-typographie-layout-2); margin: 0 0 var(--palette-espacement-cabinet-conversation-6);
  color: var(--palette-texte-inverse-components); font-weight: 700; line-height: 1.15; max-width: 620px;
}
.hero-start p { font-size: var(--palette-typographie-composants-14); color: var(--palette-texte-inverse-espace-patient); margin: 0 0 var(--palette-espacement-composants-3); max-width: 560px; line-height: 1.6; }
.hero-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--palette-espacement-cabinet-conversation-5); margin: 0 0 var(--palette-espacement-cabinet-conversation); max-width: 760px; }
.hero-step {
  background: var(--palette-surface-home-2); border: 1px solid var(--palette-bordure-home-3);
  border-radius: var(--palette-rayon-cabinet-conversation-3); padding: var(--palette-espacement-cabinet-conversation-5) var(--palette-espacement-cabinet-conversation-2); backdrop-filter: blur(4px);
}
.hero-step .n {
  width: 24px; height: 24px; border-radius: var(--palette-rayon-composants-2);
  background: var(--palette-surface-cabinet-conversation); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--palette-typographie-cabinet-conversation-4); font-weight: 700; margin-bottom: var(--palette-espacement-cabinet-conversation-11);
}
.hero-step .t { font-size: var(--palette-typographie-cabinet-conversation-3); font-weight: 600; color: var(--palette-texte-inverse-components); margin-bottom: var(--palette-espacement-composants-5); }
.hero-step .d { font-size: var(--palette-typographie-components-4); color: var(--palette-texte-inverse-home-2); line-height: 1.45; }
.hero-cta-row { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-5); flex-wrap: wrap; position: relative; z-index: 1; }
.btn-on-dark {
  background: var(--palette-surface-cabinet-conversation); color: var(--accent-ink); padding: var(--palette-espacement-composants-6) var(--palette-espacement-composants-3);
  border-radius: var(--palette-rayon-cabinet-conversation-3); font-weight: 600; font-size: var(--palette-typographie-cabinet-conversation-2);
  display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-11);
  border: 0; cursor: pointer; text-decoration: none;
}
.btn-on-dark:hover { background: var(--palette-surface-action-home); }
.hero-cta-row .secondary {
  color: var(--palette-texte-inverse-espace-patient); font-size: var(--palette-typographie-cabinet-conversation-3);
  display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--palette-texte-inverse-home-3);
}

/* Suggested psy cards */
.psy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--palette-espacement-cabinet-conversation-5); margin-top: var(--palette-espacement-cabinet-conversation-2); }
.psy-card-h {
  border: 1px solid var(--line); border-radius: var(--palette-rayon-composants-3); padding: var(--palette-espacement-cabinet-conversation-2);
  background: var(--surface); transition: all .15s; cursor: pointer;
  text-decoration: none; color: inherit; display: block;
}
.psy-card-h:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 8px 24px -18px var(--palette-ombre-composants-5); }
.psy-head-h { display: flex; gap: var(--palette-espacement-cabinet-conversation-7); align-items: flex-start; }
.psy-av-h {
  width: 48px; height: 48px; border-radius: var(--palette-rayon-composants-3);
  color: var(--palette-texte-inverse-components); display: flex; align-items: center; justify-content: center;
  font-size: var(--palette-typographie-cabinet-conversation-2); font-weight: 600; flex: 0 0 48px;
  background: linear-gradient(135deg, var(--palette-surface-action-demarrer-suivi), var(--palette-fond-action-conversation));
  overflow: hidden;
}
.psy-av-h img { width: 100%; height: 100%; object-fit: cover; }
.psy-card-h .name { font-size: var(--palette-typographie-composants-14); font-weight: 600; color: var(--ink); line-height: 1.2; }
.psy-card-h .title { font-size: var(--palette-typographie-cabinet-conversation-4); color: var(--muted); margin-top: var(--palette-espacement-composants-5); }
.psy-tags-h { display: flex; flex-wrap: wrap; gap: var(--palette-espacement-cabinet-2); margin-top: var(--palette-espacement-cabinet-conversation-6); }
.tag-sm-h {
  font-size: var(--palette-typographie-composants-17); padding: var(--palette-espacement-components-4) var(--palette-espacement-cabinet-conversation-11); border-radius: var(--palette-rayon-components-2);
  background: var(--accent-softer); color: var(--accent-ink);
  border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); font-weight: 500;
}
.psy-meta-h { display: flex; align-items: center; justify-content: space-between; margin-top: var(--palette-espacement-cabinet-conversation-7); padding-top: var(--palette-espacement-cabinet-conversation-7); border-top: 1px solid var(--line); }
.psy-meta-h .price { font-size: var(--palette-typographie-components); font-weight: 700; color: var(--accent); }
.psy-meta-h .price span { font-weight: 400; color: var(--muted); font-size: var(--palette-typographie-composants-3); }
.psy-meta-h .resp { font-size: var(--palette-typographie-components-4); color: var(--muted); display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-9); }
.psy-meta-h .resp .dot { width: 6px; height: 6px; border-radius: var(--palette-rayon-composants-2); background: var(--adaptation-fond-succes-success, var(--success)); }

/* Reassurance row */
.reassure { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--palette-espacement-cabinet-conversation-5); }
.reassure-item {
  display: flex; gap: var(--palette-espacement-cabinet-conversation-7); padding: var(--palette-espacement-cabinet-conversation-5) var(--palette-espacement-cabinet-conversation-2);
  border-radius: var(--palette-rayon-composants-3); border: 1px solid var(--line); background: var(--surface);
}
.reassure-item .ico {
  width: 34px; height: 34px; border-radius: var(--palette-rayon-cabinet-conversation-4);
  background: var(--accent-softer); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
}
.reassure-item .t { font-size: var(--palette-typographie-cabinet-conversation-3); font-weight: 600; color: var(--ink); }
.reassure-item .d { font-size: var(--palette-typographie-components-4); color: var(--muted); margin-top: var(--palette-espacement-composants-5); line-height: 1.45; }

/* Tests teaser */
.tests-teaser {
  display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-8);
  background: linear-gradient(135deg, var(--accent-softer), var(--surface));
  border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft));
  border-radius: var(--palette-rayon-cabinet-conversation); padding: var(--palette-espacement-cabinet-conversation-10) var(--palette-espacement-cabinet-conversation);
}
.tests-teaser .ico {
  width: 48px; height: 48px; border-radius: var(--palette-rayon-cabinet-conversation-3);
  background: var(--surface); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: 0 0 48px;
  box-shadow: 0 2px 8px -2px var(--palette-ombre-home);
}
.tests-teaser .t { font-size: var(--palette-typographie-cabinet-conversation-5); font-weight: 600; color: var(--ink); line-height: 1.2; }
.tests-teaser .d { font-size: var(--palette-typographie-components-2); color: var(--muted); margin-top: var(--palette-espacement-components-4); }
.tests-teaser .h-btn { margin-left: auto; flex-shrink: 0; }

/* ============================================================================
 * VUE PATIENT (patient_abonne / patient_en_resiliation)
 * ============================================================================ */

.pat-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--palette-espacement-cabinet-conversation-8); align-items: start; }

/* Next appointment hero */
.appt-hero {
  background: linear-gradient(140deg, var(--palette-surface-action-demarrer) 0%, var(--palette-surface-cabinet-conversation) 60%);
  border: 1px solid var(--line-strong);
  border-radius: var(--palette-rayon-composants); padding: var(--palette-espacement-composants-3) var(--palette-espacement-cabinet-conversation);
  position: relative; overflow: hidden;
}
.appt-hero::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: var(--palette-rayon-composants-2);
  background: radial-gradient(circle, var(--palette-fond-action-home-2), transparent 60%);
}
.appt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--palette-espacement-cabinet-conversation-8); }
.appt-left { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-8); min-width: 0; }
.appt-date {
  flex: 0 0 76px; width: 76px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--palette-rayon-cabinet-conversation-3);
  background: var(--surface); padding: var(--palette-espacement-cabinet-conversation-11) 0 var(--palette-espacement-cabinet-conversation-6);
  box-shadow: 0 1px 0 var(--palette-ombre-consultation-2);
}
.appt-date .m { font-size: var(--palette-typographie-composants-17); color: var(--accent); font-weight: 700; letter-spacing: var(--palette-typographie-layout); text-transform: uppercase; line-height: 1; }
.appt-date .d { font-size: var(--palette-typographie-composants-16); font-weight: 700; color: var(--ink); letter-spacing: var(--palette-typographie-layout-2); line-height: 1; margin-top: var(--palette-espacement-cabinet-conversation-3); }
.appt-date .dow { font-size: var(--palette-typographie-composants-17); color: var(--muted); font-weight: 600; margin-top: var(--palette-espacement-cabinet-2); letter-spacing: var(--palette-typographie-composants-11); text-transform: uppercase; }
.appt-text { min-width: 0; }
.appt-text .eye { font-size: var(--palette-typographie-composants-3); text-transform: uppercase; letter-spacing: var(--palette-typographie-layout); color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; gap: var(--palette-espacement-components); }
.appt-text .eye .pulse { width: 7px; height: 7px; border-radius: var(--palette-rayon-composants-2); background: var(--adaptation-fond-action-accent, var(--accent)); box-shadow: 0 0 0 0 var(--palette-ombre-composants-7); animation: pulse 2s infinite; }
/* « dans X jours » SOULIGNÉ (sans changement de couleur) — lève l'ambiguïté « ce jeudi ? » */
.appt-text .eye strong { text-decoration: underline; font-weight: 700; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px var(--palette-ombre-home-2); } }
.appt-text .h { font-size: var(--palette-typographie-cabinet-conversation); letter-spacing: var(--palette-typographie-layout-4); color: var(--ink); font-weight: 700; margin: var(--palette-espacement-cabinet-2) 0 var(--palette-espacement-composants-5); }
.appt-text .meta { font-size: var(--palette-typographie-cabinet-conversation-3); color: var(--ink-2); }
.appt-text .meta .with { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); font-weight: 600; }
.appt-text .meta .with .av { width: 18px; height: 18px; border-radius: var(--palette-rayon-composants-2); overflow: hidden; background: linear-gradient(135deg, var(--palette-surface-action-demarrer-suivi), var(--palette-fond-action-conversation)); color: var(--palette-texte-inverse-components); display: inline-flex; align-items: center; justify-content: center; font-size: var(--palette-typographie-home); font-weight: 700; }
.appt-text .meta .with .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.appt-actions { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-11); flex-shrink: 0; position: relative; z-index: 1; }
.appt-empty {
  padding: var(--palette-espacement-composants-3) var(--palette-espacement-cabinet-conversation); text-align: center;
  color: var(--muted); font-size: var(--palette-typographie-cabinet-conversation-2);
}
.appt-empty strong { color: var(--ink); font-weight: 600; }

/* Last message preview */
.msg-card {
  display: flex; gap: var(--palette-espacement-cabinet-conversation-5); padding: var(--palette-espacement-cabinet-conversation-8);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--palette-rayon-cabinet-conversation); cursor: pointer; transition: all .15s;
  text-decoration: none; color: inherit;
}
.msg-card:hover { border-color: var(--line-strong); }
.msg-card .av {
  width: 44px; height: 44px; border-radius: var(--palette-rayon-composants-2);
  background: linear-gradient(135deg, var(--palette-surface-action-demarrer-suivi), var(--palette-fond-action-conversation)); color: var(--palette-texte-inverse-components);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--palette-typographie-cabinet-conversation-3); font-weight: 600; flex: 0 0 44px; align-self: flex-start;
  position: relative; overflow: hidden;
}
.msg-card .av img { width: 100%; height: 100%; object-fit: cover; }
.msg-card .av::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px; border-radius: var(--palette-rayon-composants-2);
  background: var(--adaptation-fond-succes-success, var(--success)); border: 2px solid var(--adaptation-bordure-surface, var(--surface));
}
.msg-card .body { flex: 1; min-width: 0; }
.msg-card .head { display: flex; align-items: baseline; gap: var(--palette-espacement-cabinet-conversation-11); margin-bottom: var(--palette-espacement-cabinet-2); flex-wrap: wrap; }
.msg-card .who { font-size: var(--palette-typographie-components); font-weight: 600; color: var(--ink); }
.msg-card .when { font-size: var(--palette-typographie-components-4); color: var(--muted); }
.msg-card .text {
  font-size: var(--palette-typographie-components); color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-card .new { margin-left: auto; display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-9); font-size: var(--palette-typographie-composants-3); color: var(--accent); font-weight: 700; letter-spacing: var(--palette-typographie-consultation-3); text-transform: uppercase; }
.msg-card .new .dot { width: 6px; height: 6px; border-radius: var(--palette-rayon-composants-2); background: var(--adaptation-fond-action-accent, var(--accent)); }
.msg-card .arrow { align-self: center; color: var(--muted); flex: 0 0 18px; }

/* Quick actions */
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--palette-espacement-cabinet-conversation-7); }
.qa {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--palette-espacement-cabinet-conversation-11);
  padding: var(--palette-espacement-cabinet-conversation-2); border-radius: var(--palette-rayon-composants-3); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; transition: all .15s;
  text-align: left; text-decoration: none; color: inherit;
}
.qa:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: 0 8px 24px -18px var(--palette-ombre-composants-5); }
/* Badge « non-lus support » sur l'encart action rapide Aide & support */
.qa-badge {
  position: absolute; top: 10px; right: 10px;
  min-width: 18px; height: 18px; padding: 0 var(--palette-espacement-cabinet-conversation-9);
  border-radius: var(--palette-rayon-components-2); background: var(--palette-fond-danger-home); color: var(--palette-texte-inverse-components);
  font-size: var(--palette-typographie-composants-17); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.qa .ico { width: 34px; height: 34px; border-radius: var(--palette-rayon-cabinet-conversation-4); background: var(--accent-softer); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.qa .t { font-size: var(--palette-typographie-components); font-weight: 600; color: var(--ink); }
.qa .d { font-size: var(--palette-typographie-components-4); color: var(--muted); line-height: 1.4; }

/* Psy mini card (right column) */
.psy-mini {
  padding: var(--palette-espacement-cabinet-conversation-8) var(--palette-espacement-cabinet-conversation-10); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--palette-rayon-cabinet-conversation); box-shadow: 0 1px 0 var(--palette-ombre-changer-psychologue-2), 0 8px 24px -18px var(--palette-ombre-composants-5);
}
.psy-mini .head { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-7); }
.psy-mini .av {
  width: 48px; height: 48px; border-radius: var(--palette-rayon-composants-2);
  background: linear-gradient(135deg, var(--palette-surface-action-demarrer-suivi), var(--palette-fond-action-conversation)); color: var(--palette-texte-inverse-components);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--palette-typographie-cabinet-conversation-5); font-weight: 600; flex: 0 0 48px; overflow: hidden;
}
.psy-mini .av img { width: 100%; height: 100%; object-fit: cover; }
.psy-mini .name { font-size: var(--palette-typographie-cabinet-conversation-5); font-weight: 700; color: var(--ink); letter-spacing: var(--palette-typographie-layout-4); line-height: 1.1; }
.psy-mini .role { font-size: var(--palette-typographie-cabinet-conversation-4); color: var(--muted); margin-top: var(--palette-espacement-composants-5); }
.psy-mini .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--palette-espacement-cabinet-conversation-3); margin-top: var(--palette-espacement-cabinet-conversation-5); padding-top: var(--palette-espacement-cabinet-conversation-5); border-top: 1px solid var(--line); text-align: center; }
.psy-mini .stats .n { font-size: var(--palette-typographie-composants); font-weight: 700; color: var(--ink); letter-spacing: var(--palette-typographie-layout-4); }
.psy-mini .stats .l { font-size: var(--palette-typographie-composants-17); color: var(--muted); text-transform: uppercase; letter-spacing: var(--palette-typographie-demarrer-2); margin-top: var(--palette-espacement-composants-5); }
.psy-mini .link {
  display: flex; align-items: center; justify-content: center; gap: var(--palette-espacement-cabinet-conversation-9);
  font-size: var(--palette-typographie-components-2); color: var(--accent); font-weight: 600;
  margin-top: var(--palette-espacement-cabinet-conversation-5); padding-top: var(--palette-espacement-cabinet-conversation-5); border-top: 1px solid var(--line);
  text-decoration: none;
}

/* Credit card right */
.credit-card {
  margin-top: var(--palette-espacement-cabinet-conversation-5); padding: var(--palette-espacement-cabinet-conversation-10) var(--palette-espacement-composants-3);
  background: linear-gradient(135deg, var(--accent-softer), var(--surface));
  border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); border-radius: var(--palette-rayon-cabinet-conversation);
}
.credit-card .h-eyebrow { margin: 0; }
.credit-card .num-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--palette-espacement-cabinet-conversation-11); }
.credit-card .num {
  font-size: var(--palette-typographie-cabinet); font-weight: 700; color: var(--accent-ink);
  letter-spacing: var(--palette-typographie-layout-2); line-height: 1;
}
.credit-card .num span { font-size: var(--palette-typographie-cabinet-conversation-2); color: var(--muted); font-weight: 500; margin-left: var(--palette-espacement-cabinet-conversation-3); }
.credit-card .bar { height: 5px; background: var(--line); border-radius: var(--palette-rayon-home); margin-top: var(--palette-espacement-cabinet-conversation-7); overflow: hidden; }
.credit-card .bar .fill { height: 100%; background: var(--adaptation-fond-action-accent, var(--accent)); border-radius: var(--palette-rayon-home); transition: width .3s; }
.credit-card .renew { font-size: var(--palette-typographie-cabinet-conversation-4); color: var(--muted); margin-top: var(--palette-espacement-cabinet-conversation-11); }
/* À 0 crédit : la carte devient cliquable et mène à l'achat (recharger-credits) */
.credit-card.is-empty { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.credit-card.is-empty:hover { border-color: var(--adaptation-bordure-action-accent, var(--accent)); box-shadow: 0 4px 14px var(--palette-ombre-home-3); }
.credit-card .renew.buy-cta { color: var(--accent); font-weight: 700; }

/* ============================================================================
 * MOBILE (< 768px)
 * ----------------------------------------------------------------------------
 * shared/mobile.css cache déjà .side automatiquement ; la navigation mobile est
 * la TAB BAR flottante en bas (shared/sidebar.js, refonte 02/07/2026). La home
 * porte en plus : le header mobile « Accueil / Bonjour X 👋 + cloche » et le
 * bloc « Explorer » (cartes d'accès rapide vers les entrées qui ne tiennent pas
 * dans la tab bar : Nos psychologues, Aurora, Nos thérapies, Mes séances —
 * mêmes règles d'affichage que la sidebar via Sidebar.navVisibilityFor).
 * La clearance bas de page vient de body.has-tabbar (mobile.css).
 * ============================================================================ */
@media (max-width: 767px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .page { padding: var(--palette-espacement-cabinet-conversation-10) var(--palette-espacement-cabinet-conversation-2) var(--mobile-fab-clearance, var(--palette-espacement-app-shell)); }

  /* Greet row : MASQUÉE en mobile (02/07) — remplacée par le header mobile
     .home-mhead (« Accueil » + « Bonjour X 👋 »), cf. maquette tab bar. */
  .greet-row { display: none; }
  /* Pill "Compte créé · suivi pas démarré" : retiré en mobile (info pas
     critique, économise un retour à la ligne dans le greet) */
  .status-pill { display: none; }

  /* Hero prospect : compact, full-width sans débordement */
  .hero-start { padding: var(--palette-espacement-composants-3) var(--palette-espacement-cabinet-conversation-10); border-radius: var(--palette-rayon-cabinet); }
  .hero-start h2 { font-size: var(--palette-typographie-cabinet-conversation); }
  .hero-start p { font-size: var(--palette-typographie-components); }
  .hero-steps { grid-template-columns: 1fr; gap: var(--palette-espacement-cabinet-conversation-6); margin-bottom: var(--palette-espacement-cabinet-conversation-8); }
  .hero-step { padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5); }
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: var(--palette-espacement-cabinet-conversation-6); }
  .btn-on-dark { justify-content: center; width: 100%; }
  .hero-cta-row .secondary { justify-content: center; }

  /* Sections : padding réduit, radius cohérent avec le système */
  .h-section { padding: var(--palette-espacement-cabinet-conversation-8) var(--palette-espacement-cabinet-conversation-8); border-radius: var(--palette-rayon-composants-3); }
  .h-section h2 { font-size: var(--palette-typographie-components-3); }

  /* Suggestion psys : 1 colonne, plus de respiration */
  .psy-grid { grid-template-columns: 1fr; gap: var(--palette-espacement-cabinet-conversation-6); }

  /* Reassurance : 1 colonne */
  .reassure { grid-template-columns: 1fr; gap: var(--palette-espacement-cabinet-conversation-11); }

  /* Tests teaser : on permet le wrap, le btn passe full-width */
  .tests-teaser { flex-wrap: wrap; padding: var(--palette-espacement-cabinet-conversation-2) var(--palette-espacement-cabinet-conversation-8); gap: var(--palette-espacement-cabinet-conversation-5); }
  .tests-teaser .h-btn { margin-left: 0; width: 100%; }

  /* ─── VUE PATIENT ─────────────────────────────────────────────────── */
  /* Pat-grid : 1 colonne (psy-mini / crédits passent sous le contenu principal) */
  .pat-grid { grid-template-columns: 1fr; gap: var(--palette-espacement-cabinet-conversation-5); }

  /* Bandeau prochain RDV : la date à gauche reste, mais le bloc CTA passe sous */
  .appt-hero { padding: var(--palette-espacement-cabinet-conversation-8) var(--palette-espacement-cabinet-conversation-8); border-radius: var(--palette-rayon-cabinet); }
  .appt-row { flex-direction: column; align-items: stretch; gap: var(--palette-espacement-cabinet-conversation-5); }
  .appt-left { gap: var(--palette-espacement-cabinet-conversation-5); align-items: flex-start; }
  .appt-date { flex: 0 0 66px; width: 66px; padding: var(--palette-espacement-cabinet-conversation-3) 0 var(--palette-espacement-cabinet-conversation-11); }
  .appt-date .d { font-size: var(--palette-typographie-invitation-3); }
  .appt-text .h { font-size: var(--palette-typographie-composants); line-height: 1.25; }
  .appt-text .meta { font-size: var(--palette-typographie-components-2); }
  /* Boutons en ligne, alignés EN HAUT : "Reprogrammer" ne s'étire plus à la
     hauteur du wrapper "Rejoindre + indication" → les deux boutons sont égaux. */
  .appt-actions { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .appt-actions .join-wrap { flex: 1 1 auto; }
  /* Touch target ≥44px (WCAG 2.5.5) → padding-y minimum 12px pour atteindre
     ~44px de hauteur effective. !important pour écraser le style inline
     "padding:9px 14px" du bouton "Reprogrammer" dans le markup JS. */
  .appt-actions .h-btn { flex: 1 1 auto; justify-content: center; padding: var(--palette-espacement-composants-6) var(--palette-espacement-cabinet-conversation-2) !important; font-size: var(--palette-typographie-cabinet-conversation-3) !important; min-height: 44px; }

  /* Last message : padding réduit */
  .msg-card { padding: var(--palette-espacement-cabinet-conversation-5) var(--palette-espacement-cabinet-conversation-2); gap: var(--palette-espacement-cabinet-conversation-7); }
  .msg-card .av { width: 38px; height: 38px; flex-basis: 38px; }
  .msg-card .arrow { display: none; }

  /* Quick actions : 2 colonnes au lieu de 4 */
  .qa-grid { grid-template-columns: repeat(2, 1fr); gap: var(--palette-espacement-cabinet-conversation-6); }
  .qa { padding: var(--palette-espacement-cabinet-conversation-5); }

  /* Psy mini : stats restent en 3 col, mais ligne plus serrée */
  .psy-mini { padding: var(--palette-espacement-cabinet-conversation-2) var(--palette-espacement-cabinet-conversation-8); border-radius: var(--palette-rayon-cabinet); }
  .psy-mini .stats .n { font-size: var(--palette-typographie-components-3); }
  .psy-mini .stats .l { font-size: var(--palette-typographie-mobile); }

  /* Crédits : compact mobile */
  .credit-card { padding: var(--palette-espacement-cabinet-conversation-2) var(--palette-espacement-cabinet-conversation-8); border-radius: var(--palette-rayon-cabinet); }
  .credit-card .num { font-size: var(--palette-typographie-cabinet-2); }
}

/* ============================================================================
 * HEADER MOBILE + « EXPLORER » (refonte tab bar 02/07/2026)
 * ----------------------------------------------------------------------------
 * .home-mhead : « Accueil » (serif) + « Bonjour X 👋 » + cloche notifications
 * (placeholder produit — centre de notifications à venir). .home-quicknav :
 * cartes d'accès rapide vers les entrées absentes de la tab bar. Les deux sont
 * MOBILE-ONLY : le desktop garde la sidebar (mêmes liens) et son greet-row.
 * ============================================================================ */
.home-mhead { display: none; }
.home-quicknav { display: none; }
@media (max-width: 767px) {
  .home-mhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--palette-espacement-cabinet-conversation-7);
    margin-bottom: var(--palette-espacement-cabinet-conversation-2);
  }
  .home-mhead-title {
    font-family: var(--palette-police-editoriale-conversation);
    font-weight: 500;
    font-size: var(--palette-typographie-composants-16);
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
    letter-spacing: var(--palette-typographie-layout-4);
  }
  .home-mhead-greet {
    margin: var(--palette-espacement-cabinet-2) 0 0;
    font-size: var(--palette-typographie-components);
    color: var(--muted);
    font-weight: 500;
  }
  .home-bell {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--palette-rayon-composants-3);
    background: var(--surface, var(--palette-surface-cabinet-conversation));
    border: 1px solid var(--line, var(--palette-bordure-conversation-4));
    box-shadow: 0 4px 12px -6px var(--palette-ombre-mobile);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
  }
  .home-bell:active { background: var(--surface-2, var(--palette-surface-components)); }
  .home-bell svg { stroke: currentColor; fill: none; stroke-width: 1.8; }
  /* Mini-popover « pas de notification » (cloche = placeholder produit) */
  .home-bell-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    white-space: nowrap;
    background: var(--ink, var(--palette-fond-inverse-conversation));
    color: var(--palette-texte-inverse-components);
    font-size: var(--palette-typographie-cabinet-conversation-4);
    font-weight: 600;
    padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-cabinet-conversation-7);
    border-radius: var(--palette-rayon-cabinet-conversation-4);
    box-shadow: 0 10px 24px -10px var(--palette-ombre-conversation-6);
    z-index: 50;
  }

  .home-quicknav { display: block; }
  .qn-list { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-11); margin-top: var(--palette-espacement-cabinet-conversation-6); }
  .qn {
    display: flex;
    align-items: center;
    gap: var(--palette-espacement-cabinet-conversation-7);
    padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-7);
    border: 1px solid var(--line, var(--palette-bordure-conversation-4));
    border-radius: var(--palette-rayon-composants-3);
    background: var(--surface, var(--palette-surface-cabinet-conversation));
    text-decoration: none;
    color: inherit;
    min-height: 56px;
  }
  .qn:active { background: var(--surface-2, var(--palette-surface-components)); }
  .qn-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: var(--palette-rayon-components);
    background: var(--accent-softer, var(--palette-surface-action-home-2));
    color: var(--accent, var(--palette-texte-action-composants));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qn-ico svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .qn-body { flex: 1; min-width: 0; }
  .qn-t { font-size: var(--palette-typographie-cabinet-conversation-2); font-weight: 600; color: var(--ink); line-height: 1.2; }
  .qn-d { font-size: var(--palette-typographie-cabinet-conversation-4); color: var(--muted); margin-top: var(--palette-espacement-composants-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Badge « 1 » Aurora (message IA non lu — même règle que la sidebar) */
  .qn-badge {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--palette-espacement-cabinet-conversation-9);
    border-radius: var(--palette-rayon-components-2);
    background: var(--adaptation-fond-action-accent, var(--accent, var(--palette-fond-action-composants)));
    color: var(--palette-texte-inverse-components);
    font-size: var(--palette-typographie-composants-17);
    font-weight: 700;
    line-height: var(--palette-typographie-composants);
    text-align: center;
  }
  .qn-arrow { flex: 0 0 auto; color: var(--muted-2, var(--palette-texte-secondaire-conversation)); display: flex; }
}

/* ─── Très petit écran (< 380px iPhone SE 1ère gen) ────────────────────── */
@media (max-width: 380px) {
  .greet h1, .pat-greet h1 { font-size: var(--palette-typographie-cabinet-conversation); }
  .hero-start h2 { font-size: var(--palette-typographie-components-6); }
  .qa-grid { grid-template-columns: 1fr; }
}