.care-addon-link-button,
.care-addon-primary,
.care-addon-secondary,
.care-addon-ghost {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-family: Nunito, "Open Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.care-addon-secondary {
  background: #ffffff;
  color: #047857;
  border: 1px solid #a7f3d0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
}

.care-addon-primary {
  background: #047857;
  color: #ffffff;
  border: 1px solid #047857;
}

.care-addon-link-button:hover,
.care-addon-primary:hover,
.care-addon-secondary:hover,
.care-addon-ghost:hover {
  transform: translateY(-1px);
}

.care-addon-ghost {
  background: #111827;
  color: #ffffff;
  border: 1px solid #111827;
}

.care-addon-hint {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.care-addon-header-nav {
  align-items: center;
}

.care-addon-header-nav > :not([hidden]) ~ :not([hidden]) {
  margin-left: 18px !important;
}

app-navbar nav a[href="/register-free"] button {
  white-space: nowrap;
}

.care-addon-header-link {
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}

.care-addon-header-link:hover {
  color: #059669;
}

.care-addon-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.care-addon-header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  padding: 8px 14px;
  border: 1px solid #059669;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.care-addon-header-button--solid {
  background: #047857;
  color: #ffffff;
}

.care-addon-header-button--outline {
  background: #ffffff;
  color: #047857;
}

.care-addon-header-button--logout {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

body.care-addon-active app-root {
  display: none;
}

/* Le bundle Angular pose overflow-x:hidden sur body, ce qui casse position:sticky
   (le body devient conteneur de défilement). clip rogne pareil sans casser sticky. */
body.care-addon-active {
  overflow-x: clip;
}

#care-client-addon-root {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(236, 253, 245, .94), rgba(255, 255, 255, .98) 42%),
    #f8fafc;
  color: #111827;
  font-family: Nunito, "Open Sans", Arial, sans-serif;
}

.care-addon-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 56px;
}

.care-addon-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
  padding: 13px 14px 13px 20px;
  background: #ffffff;
  border: 1px solid #d1fae5;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

/* ---- Barre de menu de l'espace membre : sticky, verre dépoli, pilules ---- */

.care-addon-topbar--member {
  position: sticky;
  top: 12px;
  z-index: 60;
  margin-bottom: 22px;
  padding: 10px 12px 10px 18px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(209, 250, 229, 0.9);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.care-addon-topbar--member .care-addon-brand span {
  font-size: 15px;
}

.care-member-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 13px;
  padding: 4px;
}

.care-member-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 10px;
  color: #475569;
  font-size: 0.87rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.care-member-nav-link:hover {
  color: #0f172a;
  background: #e8eef4;
}

.care-member-nav-link.is-active {
  background: linear-gradient(135deg, #047857, #059669);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.32);
}

.care-topbar-user {
  display: flex;
  align-items: center;
  gap: 9px;
}

.care-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.care-user-chip:hover,
.care-account.is-open .care-user-chip {
  border-color: #047857;
  box-shadow: 0 6px 16px rgba(4, 120, 87, 0.14);
}

.care-account-chev {
  color: #94a3b8;
  transition: transform 0.18s ease;
}

.care-account.is-open .care-account-chev {
  transform: rotate(180deg);
}

.care-avatar--nav {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
}

.care-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.15;
}

.care-user-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f172a;
}

.care-user-plan {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.care-user-plan--premium {
  color: #b45309;
}

.care-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.care-logout-btn:hover {
  color: #b91c1c;
  border-color: #fca5a5;
  background: #fef2f2;
}

/* --- Menu de compte (clic sur la photo/pseudo de la barre du haut) --- */
.care-account {
  position: relative;
}

.care-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 268px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid #e6ece8;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  padding: 8px;
  z-index: 70;
  animation: care-fdrop-pop 0.14s ease;
}

.care-account-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 6px;
}

.care-account-head .care-avatar {
  width: 46px;
  height: 46px;
  font-size: 0.95rem;
}

.care-account-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.care-account-id strong {
  font-size: 0.92rem;
  color: #0f172a;
}

.care-account-id .care-addon-muted {
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-account-id .care-user-plan {
  margin-top: 2px;
}

.care-account-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 10px 11px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  transition: background 0.13s ease, color 0.13s ease;
}

.care-account-item svg {
  flex: 0 0 auto;
  color: #64748b;
}

.care-account-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Entrée correspondant à la page déjà ouverte : le membre voit qu'il y est déjà,
   au lieu de croire à un bouton qui ne répond pas. */
.care-account-item.is-current {
  background: #ecfdf5;
  color: #065f46;
}

.care-account-item.is-current svg {
  color: #047857;
}

.care-account-item.is-current::after {
  content: "✓";
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 900;
  color: #10b981;
}

.care-account-item:hover svg {
  color: #047857;
}

.care-account-sep {
  height: 1px;
  background: #f1f5f9;
  margin: 6px 4px;
}

.care-account-item--danger {
  color: #b91c1c;
}

.care-account-item--danger svg {
  color: #b91c1c;
}

.care-account-item--danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.care-account-item--danger:hover svg {
  color: #b91c1c;
}

/* Page « Mon profil & paramètres » : carte centrée, largeur confortable. */
.care-profile-page {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.care-profile-page .care-profile-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* En-tête profil : bannière dégradée + avatar débordant + identité. */
.care-pf-hero {
  background: #ffffff;
  border: 1px solid #e6ece8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}
/* La bannière porte le numéro d'adhérent, aligné à droite : l'avatar déborde à GAUCHE, les
   deux ne se croisent donc pas (voir la règle mobile, où la place manque). */
.care-pf-cover {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  background: linear-gradient(120deg, #065f46 0%, #059669 55%, #34d399 100%);
}
.care-pf-cover--premium {
  background: linear-gradient(120deg, #b45309 0%, #f59e0b 55%, #fcd34d 100%);
}
.care-pf-hero-body {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 24px 20px;
}
.care-pf-hero-body .care-avatar--xl {
  width: 96px;
  height: 96px;
  font-size: 1.9rem;
  margin-top: -48px;
  border: 4px solid #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}
.care-pf-hero-id {
  flex: 1 1 220px;
  min-width: 0;
  padding-bottom: 2px;
}
.care-pf-hero-id h2 {
  margin: 0;
  font-size: 1.3rem;
  color: #0f172a;
}
.care-pf-hero-id > .care-addon-muted {
  display: block;
  font-size: 0.88rem;
  margin-top: 2px;
}
.care-pf-hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.care-pf-hero-badges .care-pseudo-chip {
  margin-top: 0;
}
/* Numéro d'adhérent : pastille blanche posée sur la bannière, façon carte de membre. Son accent
   suit la formule (vert pour Basique, ambre pour Premium) pour s'accorder au dégradé. */
.care-pf-num {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 6px 7px 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
.care-pf-num-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #059669;
}
.care-pf-num-ico svg {
  width: 16px;
  height: 16px;
}
.care-pf-num--premium .care-pf-num-ico,
.care-pf-num--premium .care-pf-num-lbl,
.care-pf-num--premium .care-pf-num-copy {
  color: #b45309;
}
.care-pf-num--premium .care-pf-num-copy:hover {
  background: #fffbeb;
  border-color: #fcd34d;
}
.care-pf-num--premium .care-pf-num-copy.is-done {
  background: #b45309;
  border-color: #b45309;
  color: #ffffff;
}
.care-pf-num-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.care-pf-num-lbl {
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #059669;
}
.care-pf-num-txt strong {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.care-pf-num-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #059669;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.care-pf-num-copy:hover {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.care-pf-num-copy:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 1px;
}
/* Copie faite : la coche remplace l'icone, le bouton n'a pas besoin de texte. */
.care-pf-num-copy.is-done {
  background: #047857;
  border-color: #047857;
  color: #ffffff;
}
.care-pf-num-copy.is-done svg {
  display: none;
}
.care-pf-num-copy.is-done::after {
  content: "\2713";
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}
.care-pf-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  align-self: center;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  border-radius: 10px;
  padding: 8px 13px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.care-pf-photo-btn:hover {
  border-color: #047857;
  color: #047857;
  background: #ecfdf5;
}

/* Blocs de réglages (Informations, Contact, Confidentialité, Sécurité). */
.care-pf-block {
  background: #ffffff;
  border: 1px solid #e6ece8;
  border-radius: 16px;
  padding: 18px 20px 20px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}
.care-pf-block-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.care-pf-block-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #ecfdf5;
  color: #047857;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.care-pf-block-titles {
  flex: 1 1 auto;
  min-width: 0;
}
.care-pf-block-titles h3 {
  margin: 0;
  font-size: 1rem;
  color: #0f172a;
}
.care-pf-block-titles p {
  margin: 3px 0 0;
  font-size: 0.83rem;
  color: #64748b;
  line-height: 1.4;
}
.care-pf-block-head .care-mini-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.care-pf-defs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
.care-pf-def {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.care-pf-def dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.care-pf-def dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.care-pf-def-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.care-pf-def-contact .care-mini-btn {
  padding: 4px 10px;
  min-height: 0;
}

@media (max-width: 560px) {
  .care-pf-defs { grid-template-columns: 1fr; }
  .care-pf-photo-btn { margin-left: 0; }
}

/* En dessous de ~430 px de carte, la pastille du numéro (≈290 px, à droite) rejoindrait l'avatar
   (96 px, à gauche, qui déborde de 48 px sur la bannière) : la pastille se cale alors en haut et
   la bannière s'allonge. Hauteur AUTOMATIQUE + 56 px de marge basse = 8 px de jeu au-dessus de
   l'avatar, y compris quand le numéro passe sur deux lignes (écrans de 320 px). */
@media (max-width: 480px) {
  .care-pf-cover {
    height: auto;
    min-height: 88px;
    align-items: flex-start;
    padding: 12px 14px 56px;
  }
}

/* --- Centre de notifications (cloche + panneau déroulant) --- */
.care-notif {
  position: relative;
  display: inline-flex;
}

.care-notif-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.care-notif-btn:hover,
.care-notif.is-open .care-notif-btn {
  color: #047857;
  border-color: #047857;
  background: #ecfdf5;
}

.care-notif-btn.has-unread {
  color: #047857;
}

.care-notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.4);
}

.care-notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  z-index: 60;
  overflow: hidden;
  animation: care-notif-pop 0.14s ease;
}

@keyframes care-notif-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.care-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.care-notif-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
}

.care-notif-mark {
  border: none;
  background: transparent;
  padding: 0;
  color: #047857;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.care-notif-mark:hover {
  text-decoration: underline;
}

.care-notif-list {
  max-height: 380px;
  overflow-y: auto;
}

.care-notif-empty {
  margin: 0;
  padding: 26px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.84rem;
}

/* Pied de liste quand le centre de notifications est tronqué : on annonce combien de
   lignes sont montrées, plutôt que de laisser croire que les autres ont disparu. */
.care-notif-more {
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid #eef2f7;
  text-align: center;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.care-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  transition: background 0.13s ease;
}

.care-notif-item:last-child {
  border-bottom: none;
}

.care-notif-item:hover {
  background: #f8fafc;
}

.care-notif-item.is-unread {
  background: #f0fdf4;
}

.care-notif-item.is-unread:hover {
  background: #dcfce7;
}

.care-notif-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ecfdf5;
  color: #047857;
}

.care-notif-icon--webinar {
  background: #eff6ff;
  color: #1d4ed8;
}

.care-notif-icon--ebook {
  background: #faf5ff;
  color: #7c3aed;
}

.care-notif-icon--reward {
  background: #fffbeb;
  color: #b45309;
}

.care-notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.care-notif-item-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #0f172a;
}

.care-notif-item-text {
  font-size: 0.82rem;
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.care-notif-item-time {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-top: 2px;
}

.care-addon-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #064e3b;
  font-weight: 900;
  text-decoration: none;
}

.care-addon-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.care-addon-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}

.care-addon-nav-link {
  color: #334155;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}

.care-addon-nav-link:hover {
  color: #047857;
}

.care-addon-nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  padding: 9px 20px;
  background: #047857;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}

.care-addon-nav-cta:hover {
  background: #065f46;
  transform: translateY(-1px);
}

.care-addon-nav-logout {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  padding: 9px 18px;
  border: 1px solid #fecaca;
  background: #ffffff;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.care-addon-nav-logout:hover {
  background: #fef2f2;
}

.care-addon-logout {
  color: #b91c1c;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.care-addon-logout:hover {
  color: #7f1d1d;
  text-decoration: underline;
}

.care-addon-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  padding: 9px 14px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}

.care-addon-logout-btn:hover {
  transform: translateY(-1px);
  background: #fee2e2;
}

.care-addon-hero {
  margin-bottom: 28px;
}

.care-addon-kicker {
  margin: 0 0 10px;
  color: #047857;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.care-addon-hero h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: 0;
}

.care-addon-hero p {
  max-width: 760px;
  margin: 16px 0 0;
  color: #475569;
  font-size: 18px;
}

.care-addon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.care-addon-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.care-addon-card,
.care-addon-panel {
  background: #ffffff;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}

.care-addon-card {
  padding: 24px;
}

.care-addon-panel {
  overflow: hidden;
}

.care-addon-panel-header {
  padding: 22px 24px;
  border-bottom: 1px solid #d1fae5;
  background: #ecfdf5;
}

.care-addon-panel-header h2,
.care-addon-card h2,
.care-addon-card h3 {
  margin: 0;
  color: #0f172a;
  line-height: 1.2;
}

.care-addon-panel-body {
  padding: 24px;
}

.care-addon-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 16px 0;
  color: #064e3b;
}

.care-addon-price strong {
  font-size: 42px;
  line-height: 1;
}

.care-addon-muted {
  color: #64748b;
}

.care-addon-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 8px;
  padding: 6px 10px;
  background: #dcfce7;
  color: #166534;
  font-size: 13px;
  font-weight: 900;
}

.care-addon-badge-dark {
  background: #111827;
  color: #ffffff;
}

.care-addon-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.care-addon-form {
  display: grid;
  gap: 16px;
}

.care-addon-field {
  display: grid;
  gap: 7px;
}

.care-addon-field label {
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

.care-addon-field input,
.care-addon-field select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: #111827;
  font: inherit;
}

.care-addon-field input:focus,
.care-addon-field select:focus {
  border-color: #047857;
  outline: 3px solid rgba(4, 120, 87, .16);
}

/* Téléphone français : paires de chiffres alignées, et repère discret pendant
   la frappe — vert dès que les 10 chiffres forment un numéro valide, rouge
   seulement si le champ est quitté incomplet (voir wireFrPhoneInput()). */
input[data-fr-phone="1"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.care-addon-field input.care-phone-ok {
  border-color: #6ee7b7;
  background: #f0fdf9;
}

.care-addon-field input.care-phone-ok:focus {
  border-color: #059669;
  outline-color: rgba(5, 150, 105, .18);
}

.care-addon-field input.care-phone-bad {
  border-color: #fca5a5;
  background: #fef2f2;
}

.care-addon-table-wrap {
  overflow-x: auto;
}

.care-addon-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.care-addon-table th,
.care-addon-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.care-addon-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.care-addon-alert {
  margin: 0 0 18px;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 13px 14px;
  background: #ecfdf5;
  color: #065f46;
  font-weight: 800;
}

.care-addon-alert-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.care-addon-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.care-addon-service {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.care-addon-service strong {
  display: block;
  margin-bottom: 4px;
  color: #0f172a;
}

.care-addon-loader {
  padding: 32px;
  text-align: center;
  color: #475569;
  font-weight: 800;
}

/* ===================== Page de connexion (/login) ===================== */
.care-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 48px 16px;
}

.care-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #064e3b;
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
}

.care-auth-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.care-auth-card {
  width: min(430px, 100%);
  background: #ffffff;
  border: 1px solid #d1fae5;
  border-radius: 22px;
  padding: 34px 32px 30px;
  box-shadow: 0 26px 60px rgba(6, 78, 59, .14);
}

.care-auth-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.care-auth-title {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 30px;
  line-height: 1.1;
}

.care-auth-sub {
  margin: 0 0 22px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.5;
}

.care-auth-card .care-addon-field input {
  min-height: 48px;
  border-radius: 12px;
}

/* ---- Inscription en 2 étapes ---- */

.care-auth-card--wide {
  max-width: 560px;
  width: 100%;
}

.care-reg-plan {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid #d1fae5;
  border-radius: 12px;
  background: #f0fdf9;
  margin: 14px 0 4px;
}

.care-reg-plan span {
  font-weight: 800;
  color: #065f46;
  font-size: 0.9rem;
}

.care-reg-plan strong {
  color: #0f172a;
  font-size: 1rem;
}

.care-reg-plan em {
  font-style: normal;
  color: #64748b;
  font-size: 0.8rem;
}

.care-reg-plan--premium {
  border-color: #fde68a;
  background: #fffbeb;
}

.care-reg-plan--premium span {
  color: #b45309;
}

.care-reg-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 16px;
}

.care-reg-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.care-reg-step i {
  font-style: normal;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 800;
  transition: background 0.2s ease, color 0.2s ease;
}

.care-reg-step.is-active {
  color: #0f172a;
}

.care-reg-step.is-active i {
  background: #047857;
  color: #ffffff;
}

.care-reg-step.is-done i {
  background: #d1fae5;
  color: #047857;
}

.care-reg-sep {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: #e2e8f0;
}

.care-reg-recap {
  margin: 0 0 4px !important;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
  font-size: 0.88rem !important;
}

.care-reg-back {
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  text-align: center;
}

.care-reg-back:hover {
  color: #047857;
}

.care-auth-pwd {
  position: relative;
}

.care-auth-pwd input {
  padding-right: 48px;
}

.care-auth-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.care-auth-eye:hover,
.care-auth-eye.is-on {
  background: #ecfdf5;
  color: #047857;
}

.care-auth-eye svg {
  width: 19px;
  height: 19px;
}

.care-auth-submit {
  width: 100%;
  margin-top: 4px;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(5, 150, 105, .35);
  transition: transform .16s ease, box-shadow .16s ease;
}

.care-auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(5, 150, 105, .45);
}

.care-auth-alt {
  margin: 20px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.care-auth-alt a {
  color: #047857;
  font-weight: 900;
  text-decoration: none;
}

.care-auth-alt a:hover {
  text-decoration: underline;
}

.care-auth-back {
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: color .15s ease;
}

.care-auth-back:hover {
  color: #047857;
}

/* ===================== Page des formules (/choose-membership) ===================== */
.care-plans {
  padding: 4px 0 6px;
}

/* En-tete minimal de la page des formules (pas de barre chargee) */
.care-offers-shell {
  padding-top: 28px;
}

.care-min-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.care-min-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  padding: 9px 18px;
  border: 1px solid #a7f3d0;
  background: #ffffff;
  color: #047857;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
  transition: transform .15s ease, background-color .15s ease;
}

.care-min-cta:hover {
  transform: translateY(-1px);
  background: #ecfdf5;
}

.care-offers-back {
  margin-top: 36px;
  text-align: center;
}

@media (max-width: 560px) {
  .care-min-head {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* Offres integrees a la page d'accueil Angular (inserees avant app-footer) */
.care-home-offers {
  font-family: Nunito, "Open Sans", Arial, sans-serif;
  color: #111827;
  background: linear-gradient(180deg, #ecfdf5, #f8fafc 60%);
  padding: 72px 16px 80px;
}

.care-home-offers-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.care-plans-head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.care-plans-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.care-plans-title {
  margin: 0;
  color: #0f172a;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.01em;
}

.care-plans-sub {
  margin: 16px auto 0;
  max-width: 600px;
  color: #475569;
  font-size: 17px;
  line-height: 1.55;
}

.care-billing {
  display: inline-flex;
  gap: 4px;
  margin-top: 26px;
  padding: 5px;
  border-radius: 999px;
  background: #e6f7ef;
  border: 1px solid #bbf7d0;
}

.care-billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 9px 20px;
  background: transparent;
  color: #47635a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.care-billing-opt.is-active {
  background: #ffffff;
  color: #047857;
  box-shadow: 0 6px 16px rgba(4, 120, 87, .18);
}

.care-billing-save {
  border-radius: 999px;
  background: #d1fae5;
  color: #065f46;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
}

.care-plans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 26px;
  max-width: 900px;
  margin: 0 auto;
}

.care-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #ffffff;
  padding: 34px 30px 30px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
  transition: transform .22s ease, box-shadow .22s ease;
}

.care-plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(15, 23, 42, .13);
}

.care-plan--featured {
  border: 2px solid #10b981;
  background: linear-gradient(180deg, #f0fdf9 0%, #ffffff 140px);
  box-shadow: 0 26px 60px rgba(5, 150, 105, .20);
}

.care-plan--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, #34d399, #059669 55%, #0f766e);
}

.care-plan-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
  padding: 8px 20px;
  font-size: 12.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(5, 150, 105, .35);
}

.care-plan-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.care-plan-badge--pro {
  background: #d1fae5;
  color: #065f46;
}

.care-plan-name {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 26px;
  font-weight: 900;
}

.care-plan-pitch {
  margin: 0 0 18px;
  color: #64748b;
  font-size: 15px;
}

.care-plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.care-plan-amount {
  color: #0f172a;
  font-size: clamp(38px, 5vw, 50px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}

.care-plan-per {
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
}

.care-plan-note {
  margin: 12px 0 0;
  min-height: 20px;
  color: #059669;
  font-size: 13.5px;
  font-weight: 800;
}

.care-feats {
  list-style: none;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #eef2f7;
  display: grid;
  gap: 16px;
  flex: 1 1 auto;
}

.care-feat {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
}

.care-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: #d1fae5;
  color: #047857;
}

.care-plan--featured .care-check {
  background: #059669;
  color: #ffffff;
}

.care-check svg {
  width: 13px;
  height: 13px;
}

.care-feat-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-weight: 900;
  font-size: 15px;
}

.care-feat-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

.care-dot-yoga { background: #a855f7; }
.care-dot-assurance { background: #0ea5e9; }
.care-dot-bien { background: #f59e0b; }
.care-dot-numerique { background: #06b6d4; }

.care-feat-desc {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.5;
}

.care-feat-tag {
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
}

.care-plan--featured .care-feat-tag {
  background: #059669;
  color: #ffffff;
}

.care-plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  min-height: 54px;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.care-plan-cta--primary {
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(5, 150, 105, .35);
}

.care-plan-cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(5, 150, 105, .45);
}

.care-plan-cta--ghost {
  background: #0f172a;
  color: #ffffff;
}

.care-plan-cta--ghost:hover {
  transform: translateY(-2px);
  background: #1e293b;
}

.care-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  max-width: 860px;
  margin: 38px auto 0;
  padding: 22px 0 0;
  border-top: 1px solid #e2e8f0;
}

.care-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
}

.care-trust svg {
  width: 18px;
  height: 18px;
  color: #059669;
  flex: none;
}

@media (max-width: 1350px) {
  app-navbar nav a.flex.items-center.space-x-3 span {
    display: none !important;
  }

  .care-addon-header-nav > :not([hidden]) ~ :not([hidden]) {
    margin-left: 14px !important;
  }
}

@media (max-width: 1120px) {
  .care-addon-header-link {
    display: none;
  }
}

@media (max-width: 820px) {
  .care-addon-shell {
    width: min(100% - 24px, 680px);
    padding-top: 32px;
    padding-bottom: 96px;
  }

  .care-addon-topbar,
  .care-addon-grid,
  .care-addon-grid-3,
  .care-addon-services {
    grid-template-columns: 1fr;
  }

  .care-addon-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .care-addon-topbar--member {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    top: 6px;
  }

  .care-addon-topbar--member .care-addon-brand span,
  .care-member-nav-link span,
  .care-user-meta {
    display: none;
  }

  .care-member-nav-link {
    padding: 9px 13px;
  }

  .care-addon-nav {
    justify-content: flex-start;
  }

  .care-plans-grid {
    grid-template-columns: 1fr;
  }

  .care-plan {
    padding: 30px 20px 24px;
  }

  .care-plan--featured {
    margin-top: 14px;
  }

  .care-upsell {
    grid-template-columns: 1fr;
  }

  .care-upsell-compare {
    border-left: 0;
    border-top: 1px solid #d1fae5;
  }
}

/* ===================== Espaces client : gratuit vs premium ===================== */
.care-dash-hero {
  border-radius: 18px;
  padding: 28px 30px;
}

.care-dash-hero h1 {
  margin: 8px 0 0;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.08;
}

.care-dash-hero p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
}

.care-dash-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.care-dash-hero {
  position: relative;
  overflow: hidden;
}

.care-dash-hero--premium {
  background:
    radial-gradient(720px 300px at 88% -40%, rgba(52, 211, 153, 0.35), transparent 65%),
    radial-gradient(500px 260px at -10% 120%, rgba(16, 185, 129, 0.28), transparent 60%),
    linear-gradient(135deg, #053b2d, #065f46 52%, #0f766e);
  color: #ffffff;
  box-shadow: 0 22px 50px rgba(6, 78, 59, .35);
}

.care-dash-hero--premium::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.care-hero-id {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.care-avatar--hero {
  width: 56px;
  height: 56px;
  font-size: 1.15rem;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
  color: #ffffff;
}

.care-avatar--hero-light {
  width: 56px;
  height: 56px;
  font-size: 1.15rem;
  background: linear-gradient(135deg, #334155, #64748b);
  color: #ffffff;
}

.care-hero-id h1 {
  margin: 0;
}

.care-hero-id p {
  margin: 6px 0 0;
}

.care-dash-num.care-dash-num--dark {
  color: #64748b;
}

.care-dash-hero--premium h1 {
  color: #ffffff;
}

.care-dash-hero--premium p {
  color: rgba(255, 255, 255, .85);
}

.care-dash-hero--free {
  background:
    radial-gradient(600px 260px at 92% -30%, rgba(148, 163, 184, 0.14), transparent 60%),
    radial-gradient(420px 220px at -6% 130%, rgba(4, 120, 87, 0.07), transparent 55%),
    #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
}

.care-svc-card .care-svc-check {
  flex: 0 0 auto;
}

.care-dash-hero--free h1 {
  color: #0f172a;
}

.care-dash-hero--free p {
  color: #475569;
}

.care-dash-num {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 800;
}

.care-premium-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #5a3a00;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(245, 158, 11, .35);
}

.care-free-pill {
  display: inline-block;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.care-sub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.care-sub-head h2 {
  margin: 0;
}

.care-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .18);
  flex: none;
}

.care-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  color: #475569;
  font-size: 14px;
}

.care-kv strong {
  color: #0f172a;
}

.care-ok {
  color: #059669 !important;
}

.care-svc-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.care-svc {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
}

.care-svc-body strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
}

.care-svc-body .care-addon-muted {
  font-size: 13px;
}

.care-svc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  background: #d1fae5;
  color: #047857;
}

.care-svc-check svg {
  width: 12px;
  height: 12px;
}

.care-svc-check--gold {
  background: #fef3c7;
  color: #b45309;
}

.care-upsell {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #a7f3d0;
  background: linear-gradient(135deg, #ecfdf5, #ffffff 70%);
  box-shadow: 0 18px 44px rgba(5, 150, 105, .12);
}

.care-upsell-body {
  padding: 26px 28px;
}

.care-upsell-body h2 {
  margin: 12px 0 8px;
  color: #065f46;
}

.care-upsell-body p {
  margin: 0 0 18px;
  color: #475569;
  font-size: 15px;
}

.care-upsell-compare {
  min-width: 0;
  padding: 18px;
  border-left: 1px solid #d1fae5;
  background: #ffffff;
}

.care-cell-premium {
  color: #047857;
  font-weight: 900;
}

/* Cartes de statistiques du tableau de bord */
.care-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.care-stat {
  background: #ffffff;
  border: 1px solid #d1fae5;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.care-stat--icon {
  display: flex;
  align-items: center;
  gap: 13px;
}

.care-stat-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecfdf5;
  color: #047857;
}

.care-stat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.care-pf-id {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 16px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
}

/* ---- Liseuse PDF plein écran (lecture sans téléchargement) ---- */

.care-reader {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: flex;
  flex-direction: column;
  background: rgba(3, 20, 15, 0.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

body.care-reader-open {
  overflow: hidden !important;
}

.care-reader-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  background: #04382b;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.care-reader-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 0;
}

.care-reader-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-reader-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.care-reader-btn {
  appearance: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.care-reader-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.care-reader-close:hover {
  background: #b91c1c;
}

.care-reader-meta {
  min-width: 52px;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.care-reader-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 3px;
}

.care-reader-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 22px 14px 48px;
}

.care-reader-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.care-reader-pagewrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  min-height: 200px;
}

.care-reader-canvas {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  height: auto;
  display: block;
}

/* Cellule pas encore rendue : voile discret le temps du dessin. */
.care-reader-pagewrap:not(:has(canvas)) {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.care-reader-status {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-align: center;
  padding: 60px 20px;
}

.care-reader-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2147483210;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(4, 56, 43, 0.92);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.care-reader-hint.is-hidden {
  opacity: 0;
}

@media (max-width: 640px) {
  .care-reader-title span {
    display: none;
  }
}

/* ---- Bibliothèque d'ebooks : catalogue à rubans verticaux ---- */

.care-lib {
  max-width: 1180px;
  margin: 0 auto;
}

.care-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 16px;
}

.care-book {
  position: relative;
  display: flex;
  min-height: 250px;
  background: #ffffff;
  border: 1px solid #e6efe9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  cursor: pointer;
}

.care-book:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.care-book-ribbon {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--rib, #047857);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 0;
}

.care-book-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 18px 14px;
}

.care-book-flag {
  align-self: flex-start;
  margin-bottom: 10px;
}

.care-book-body h3 {
  margin: 0 0 8px;
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
  color: #0f172a !important;
  font-weight: 800;
}

.care-book-body > p {
  margin: 0;
  font-size: 0.84rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

.care-book-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 44px;
}

.care-book-author {
  font-size: 0.8rem;
  color: #64748b;
  min-width: 0;
}

.care-book-author strong {
  color: #0f172a;
}

.care-book-action {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-top-left-radius: 14px;
  background: #047857;
  color: #ffffff !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

.care-book-action:hover {
  background: #065f46;
}

.care-book-action svg {
  width: 17px;
  height: 17px;
}

.care-book-action--lock {
  background: #94a3b8;
}

.care-book-action--lock:hover {
  background: #b45309;
}

.care-book--locked .care-book-body h3,
.care-book--locked .care-book-body > p {
  opacity: 0.72;
}

/* ===== Ebook AVEC couverture : la photo occupe toute la carte, le texte
   n'apparaît qu'au survol (ou au focus clavier). Sans couverture, la carte
   garde sa mise en page habituelle (ruban + texte). ===== */

/* Mode photo : les couches (photo / texte) se superposent au lieu de s'aligner. */
.care-book--cover {
  display: block;
}

/* Pas de tranche latérale colorée quand la photo est en plein cadre. */
.care-book--cover .care-book-ribbon {
  display: none;
}

/* La photo remplit la carte, derrière le texte. */
.care-book-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #eef2f7;
  overflow: hidden;
}

.care-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Léger zoom de la photo au survol : effet vivant et soigné. */
.care-book--cover:hover .care-book-cover img,
.care-book--cover:focus-within .care-book-cover img {
  transform: scale(1.06);
}

/* Le corps devient un calque texte par-dessus la photo, masqué par défaut. */
.care-book--cover .care-book-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  justify-content: flex-end;
  padding: 16px 18px;
  color: #ffffff;
  background: linear-gradient(to top,
    rgba(6, 15, 12, 0.92) 0%,
    rgba(6, 15, 12, 0.74) 32%,
    rgba(6, 15, 12, 0.18) 68%,
    rgba(6, 15, 12, 0) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.care-book--cover:hover .care-book-body,
.care-book--cover:focus-within .care-book-body {
  opacity: 1;
}

/* Le texte glisse légèrement vers le haut à l'apparition. */
.care-book--cover .care-book-body > * {
  transform: translateY(10px);
  transition: transform 0.28s ease;
}

.care-book--cover:hover .care-book-body > *,
.care-book--cover:focus-within .care-book-body > * {
  transform: translateY(0);
}

/* Texte lisible en blanc sur la photo. */
.care-book--cover .care-book-body h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.care-book--cover .care-book-body > p {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.care-book--cover .care-book-author {
  color: rgba(255, 255, 255, 0.9);
}

.care-book--cover .care-book-author strong {
  color: #ffffff;
}

.care-book--cover .care-book-foot {
  padding-right: 44px;
}

/* Le bouton d'action reste visible au-dessus de la photo. */
.care-book--cover .care-book-action {
  z-index: 2;
}

/* Verrou premium : couverture légèrement grisée et assombrie. */
.care-book--locked.care-book--cover .care-book-cover img {
  filter: grayscale(0.3) brightness(0.9);
}

/* Écrans tactiles (sans survol possible) : le texte reste visible en permanence. */
@media (hover: none) {
  .care-book--cover .care-book-body {
    opacity: 1;
  }
  .care-book--cover .care-book-body > * {
    transform: none;
  }
}

/* Vignette de couverture dans le tableau admin des ebooks */
.care-ebook-thumb {
  flex: 0 0 auto;
  width: 36px;
  height: 46px;
  border-radius: 7px;
  overflow: hidden;
  background: #eef2f7;
  border: 1px solid #e2e8f0;
}

.care-ebook-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aperçu d'un ebook (modale admin) : une carte centrée, largeur limitée */
.care-ebook-preview {
  display: flex;
  justify-content: center;
}

.care-ebook-preview .care-book {
  width: 100%;
  max-width: 380px;
}

/* ---- Bibliothèque vidéo « Yoga » (espace membre) ---- */

.care-vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

.care-vid {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e6efe9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  cursor: pointer;
}

.care-vid:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.13);
}

.care-vid-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vignette de la séance : vraie balise image (chargement paresseux), posée sous le bouton de
   lecture et la durée. Cf. `.care-short-img` : un `background-image` ignore `loading="lazy"`. */
.care-vid-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.care-vid-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.28));
  opacity: 0;
  transition: opacity 0.16s ease;
}

.care-vid:hover .care-vid-thumb::after {
  opacity: 1;
}

.care-vid-thumb--ph {
  background-image:
    radial-gradient(420px 160px at 30% -20%, rgba(167, 139, 250, 0.45), transparent 60%),
    linear-gradient(135deg, #7c3aed, #312e81);
}

.care-vid-play {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28);
  transform: scale(0.92);
  transition: transform 0.16s ease, background 0.16s ease;
}

.care-vid:hover .care-vid-play {
  transform: scale(1);
  background: #ffffff;
}

.care-vid-dur {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(2px);
}

.care-vid-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.care-vid-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.care-vid-level {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6d28d9;
  background: #f3effe;
  border: 1px solid #e4d9fb;
}

.care-vid-flag {
  font-size: 0.72rem;
}

.care-vid-body h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
  color: #0f172a;
}

.care-vid-body p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #64748b;
}

.care-vid--locked {
  cursor: default;
}

.care-vid--locked .care-vid-thumb {
  filter: grayscale(0.35);
}

.care-vid--locked .care-vid-play {
  color: #94a3b8;
}

/* Lecteur vidéo (modale) : cadre 16:9 responsive, fond sombre */
.care-video-player {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
  line-height: 0;
}

.care-video-player video {
  display: block;
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000000;
}

/* ============ Shorts : grille de vignettes verticales (espace membre) ============ */

.care-shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.care-short-card {
  position: relative;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}

/*
 * Vignette du short : une vraie BALISE IMAGE, en chargement paresseux.
 *
 * Elle était posée en `background-image`, et `loading="lazy"` ne couvre pas les images de fond :
 * avec 162 shorts publiés, ouvrir la page téléchargeait les 162 couvertures d'un coup —
 * **12,9 Mo mesurés pour 10 vignettes visibles** à l'écran (2026-08-05). J'ai d'abord essayé
 * `content-visibility: auto` : le navigateur saute bien le RENDU des cartes hors écran, mais
 * télécharge quand même tous les fonds (remesuré : 12,86 Mo). Seule une balise `<img loading=lazy>`
 * fait le travail. Elle est posée sous les pastilles et le dégradé (`z-index: 0`), qui restent
 * au-dessus.
 */
.care-short-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.care-short-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.24);
}

.care-short-card:focus-visible {
  outline: 3px solid #047857;
  outline-offset: 3px;
}

/* Couverture au format vertical 9:16 (image d'attente du short). */
.care-short-cover {
  position: relative;
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
}

/* Sans image d'attente : dégradé aux couleurs du service CARE. */
.care-short-cover--ph {
  background-color: var(--svc, #475569);
  background-image:
    radial-gradient(320px 200px at 26% -10%, rgba(255, 255, 255, 0.34), transparent 62%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(15, 23, 42, 0.86));
}

/* Voile ALLÉGÉ depuis que la vignette n'a plus de titre écrit par-dessus : il ne sert plus qu'à
   détacher les petites pastilles (haut) et la durée (bas). L'ancien dégradé montait à 0.86 en bas
   pour rendre un titre lisible — il noircissait du même coup le texte imprimé dans l'affiche. */
.care-short-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0) 26%, rgba(15, 23, 42, 0) 74%, rgba(6, 12, 24, 0.44) 100%);
}

.care-short-flags {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.care-short-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.care-short-flag--prem {
  color: #422006;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.32);
}

.care-short-flag--lock {
  margin-left: auto;
  padding: 5px 7px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.66);
}

.care-short-play {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(4, 8, 18, 0.4);
  transform: scale(0.9);
  opacity: 0.94;
  transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.care-short-card:hover .care-short-play {
  transform: scale(1);
  background: #ffffff;
  opacity: 1;
}

.care-short-dur {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(6, 12, 24, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* (La légende superposée « puce + titre » a été retirée le 2026-08-06 : la vignette d'un short
   est une affiche qui porte déjà son titre, et l'un se posait sur l'autre. La puce de service a
   rejoint la rangée de pastilles du haut, `.care-short-flags`.) */

/* Puce de service lisible sur fond sombre (vignette + visionneuse). */
.care-short-svc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(6, 12, 24, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  white-space: nowrap;
}

.care-short-card--locked {
  cursor: pointer;
}

.care-short-card--locked .care-short-cover {
  filter: saturate(0.55);
}

.care-short-card--locked .care-short-play {
  color: #64748b;
  background: rgba(255, 255, 255, 0.78);
}

@media (max-width: 520px) {
  .care-shorts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .care-short-play {
    width: 46px;
    height: 46px;
  }
}

/* ============ Visionneuse plein écran des shorts (une vidéo à la fois) ============ */

.care-shorts-viewer {
  position: fixed;
  inset: 0;
  z-index: 2147483300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  opacity: 0;
  transition: opacity 0.2s ease;
  overscroll-behavior: contain;
  touch-action: none;
}

.care-shorts-viewer.is-open {
  opacity: 1;
}

.care-sv-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cadre au format 9:16, centré dans la scène, quelle que soit la forme de l'écran.
   LES DEUX bornes sont nécessaires : sur un écran large c'est la largeur qui limite
   (`max-width`), sur un téléphone — plus étroit que 9:16 de sa hauteur — c'est la HAUTEUR
   (`max-height`). Sans la seconde, le cadre gardait toute la hauteur de l'écran et
   `object-fit: cover` rognait la vidéo de chaque côté : or ces shorts portent leur titre et
   leurs mots-clés INCRUSTÉS dans l'image, et les bords se retrouvaient coupés. */
.care-sv-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: min(100vw, calc(100vh * 9 / 16));
  max-height: min(100vh, calc(100vw * 16 / 9));
  overflow: hidden;
  border-radius: 20px;
  background: #05070c;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

.care-sv-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #05070c;
  display: block;
}

/* Image d'attente floutée derrière l'état « Réservé aux Premium ». */
.care-sv-blur {
  position: absolute;
  inset: -8%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(0.45) saturate(0.8);
}

.care-sv-frame--locked {
  background:
    radial-gradient(420px 300px at 50% 8%, color-mix(in srgb, var(--svc, #475569) 42%, #05070c), transparent 70%),
    linear-gradient(170deg, #0b1220, #05070c);
}

.care-sv-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.5) 0%, rgba(4, 8, 18, 0) 26%, rgba(4, 8, 18, 0) 48%, rgba(4, 8, 18, 0.88) 100%);
}

/* Zone d'appui invisible : un clic sur la vidéo met en pause / reprend. */
.care-sv-tap {
  position: absolute;
  inset: 0;
  z-index: 3;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.care-sv-state {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(6, 12, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.care-sv-state[hidden] {
  display: none;
}

.care-sv-info {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  /* La marge basse réserve la place de la tête de lecture (.care-sv-seek). */
  padding: 18px 20px 46px;
  color: #ffffff;
  pointer-events: none;
}

.care-sv-tags {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.care-sv-dur {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.care-sv-info h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.34;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(4, 8, 18, 0.75);
}

.care-sv-info p {
  margin: 7px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.care-sv-sound {
  position: absolute;
  z-index: 6;
  left: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(6, 12, 24, 0.52);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.care-sv-sound:hover {
  background: rgba(6, 12, 24, 0.78);
  transform: scale(1.05);
}

.care-sv-sound.is-muted {
  color: #fde68a;
}

/* Barre de progression fine, collée en bas du cadre. */
.care-sv-bar {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.care-sv-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #ffffff;
  border-radius: 0 3px 3px 0;
  transition: width 0.2s linear;
}

/* ---- Défilement vertical animé d'un short à l'autre (façon Shorts) ----
   Pendant la transition les DEUX cadres sont dans la scène : ils passent en
   position absolue centrée pour se croiser sans décaler la mise en page. */
.care-sv-frame--anim {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s ease;
  will-change: transform;
}

.care-sv-frame--anim.is-enter-bottom {
  transform: translateY(100%);
}

.care-sv-frame--anim.is-enter-top {
  transform: translateY(-100%);
}

.care-sv-frame--anim.is-leave-up {
  transform: translateY(-100%);
  opacity: 0.3;
}

.care-sv-frame--anim.is-leave-down {
  transform: translateY(100%);
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  .care-sv-frame--anim {
    transition: opacity 0.18s ease;
  }
  .care-sv-frame--anim.is-enter-bottom,
  .care-sv-frame--anim.is-enter-top {
    transform: none;
    opacity: 0;
  }
  .care-sv-frame--anim.is-leave-up,
  .care-sv-frame--anim.is-leave-down {
    transform: none;
  }
}

/* ---- Ligne « chaîne » : service CARE (pastille de couleur) + durée ---- */
.care-sv-chan {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.care-sv-chan-dot {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--svc, #64748b);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(4, 8, 18, 0.5);
}

.care-sv-chan-name {
  font-size: 0.86rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(4, 8, 18, 0.7);
}

/* Description repliée sur 2 lignes, dépliable via « plus ». */
.care-sv-info .care-sv-desc {
  -webkit-line-clamp: 2;
}

.care-sv-info .care-sv-desc.is-open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.care-sv-more {
  margin-top: 4px;
  padding: 0;
  appearance: none;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;   /* le bloc d'info laisse passer les clics : on les rétablit ici */
}

/* ---- Tête de lecture déplaçable, en bas du cadre ---- */
.care-sv-seek {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
  touch-action: none;
  cursor: pointer;
}

.care-sv-seek-track {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: height 0.12s ease;
}

.care-sv-seek:hover .care-sv-seek-track {
  height: 6px;
}

.care-sv-seek-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: #ffffff;
}

.care-sv-seek-track b {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(4, 8, 18, 0.6);
  transform: translateY(-50%) scale(0);
  transition: transform 0.12s ease;
}

.care-sv-seek:hover .care-sv-seek-track b {
  transform: translateY(-50%) scale(1);
}

.care-sv-time {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(4, 8, 18, 0.8);
}

/* Séparateur de la barre d'actions (partage / plein écran ↔ navigation). */
.care-sv-rail-sep {
  width: 26px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  margin: 2px 0;
}

/* État « Réservé aux membres Premium » : aucun lecteur, invitation à s'abonner. */
.care-sv-lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 28px 190px;
  text-align: center;
  color: #ffffff;
}

.care-sv-lock-ico {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fde68a;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(253, 230, 138, 0.45);
}

.care-sv-lock strong {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
}

.care-sv-lock p {
  margin: 0;
  max-width: 320px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.care-sv-cta {
  appearance: none;
  margin-top: 4px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  color: #422006;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 12px 30px rgba(180, 83, 9, 0.42);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.care-sv-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(180, 83, 9, 0.5);
}

.care-sv-close {
  position: absolute;
  z-index: 8;
  right: 16px;
  top: 16px;
  width: 42px;
  height: 42px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.15s ease;
}

.care-sv-close:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Boutons discrets ▲ / ▼ + compteur, à droite de la scène. */
.care-sv-arrows {
  position: absolute;
  z-index: 7;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.care-sv-arrow {
  width: 42px;
  height: 42px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.care-sv-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.06);
}

.care-sv-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

.care-sv-count {
  font-size: 0.74rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .care-sv-frame {
    border-radius: 0;
    box-shadow: none;
    /* PAS de `max-width: 100vw` ici : sur un ecran plus haut que 9:16 (tous les telephones),
       la vidéo serait alors ROGNÉE de plusieurs pour cent de chaque côté — or ces shorts sont des
       « affiches » qui portent leur titre et leurs mots-clés incrustés, et les bords se
       retrouvaient coupés. Le cadre reste donc au format de la vidéo, comme sur ordinateur et
       comme dans l'application (2026-08-06). */
  }

  .care-sv-close {
    right: 10px;
    top: 10px;
    width: 38px;
    height: 38px;
  }

  .care-sv-arrows {
    right: 10px;
    top: auto;
    bottom: 130px;
    transform: none;
    gap: 8px;
  }

  .care-sv-arrow {
    width: 36px;
    height: 36px;
    background: rgba(6, 12, 24, 0.5);
  }

  .care-sv-info {
    padding: 16px 16px 24px;
  }

  .care-sv-lock {
    padding: 24px 22px 200px;
  }
}

/* Vignette verticale d'un short dans le tableau d'administration. */
.care-short-thumb {
  flex: 0 0 auto;
  width: 30px;
  height: 48px;
  border-radius: 7px;
  overflow: hidden;
  background: #eef2f7;
  border: 1px solid #e2e8f0;
}

.care-short-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Carte parrainage : invitez un proche, gagnez 20 % ---- */

.care-referral {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid #fde68a;
  background:
    radial-gradient(480px 200px at 100% -30%, rgba(251, 191, 36, 0.18), transparent 60%),
    linear-gradient(135deg, #fffbeb, #ffffff 70%);
  box-shadow: 0 14px 34px rgba(180, 83, 9, 0.08);
}

.care-referral-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

.care-referral-body {
  min-width: 0;
  flex: 1 1 auto;
}

.care-referral-body h2 {
  margin: 2px 0 6px;
  font-size: 19px !important;
  color: #0f172a !important;
}

.care-referral-body > p {
  margin: 0 0 12px;
  color: #475569 !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

.care-referral-note {
  margin-top: -6px !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
}

.care-referral-deadline {
  color: #b45309;
  font-style: normal;
  font-weight: 700;
}

.care-referral-coderow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.care-referral-code {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px dashed #f59e0b;
  border-radius: 10px;
  background: #ffffff;
  color: #b45309;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.care-referral-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.care-referral-claim {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed #fde68a;
}

.care-referral-claim > span {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
}

.care-referral-claim .care-promo-row {
  max-width: 380px;
}

@media (max-width: 720px) {
  .care-referral {
    flex-direction: column;
  }
}

.care-pf-verify {
  display: flex;
  align-items: center;
  gap: 10px 26px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.care-verify-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.care-reset-row {
  display: flex;
  gap: 9px;
  align-items: stretch;
}

.care-reset-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.care-reset-row .care-addon-secondary {
  flex: 0 0 auto;
  white-space: nowrap;
}

.care-verif-intro {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 0.9rem !important;
}

/* Mot d'explication contextuel (numéro qu'on vient de changer, demande de l'administration) :
   il porte l'information utile, il ne doit pas se lire comme la phrase d'usage grise. */
.care-verif-invite {
  color: #065f46 !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  line-height: 1.45 !important;
}

/* ---- Modale de bienvenue : vérifier email + téléphone ---- */

.care-welcome-verify {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.care-wv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.care-wv-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecfdf5;
  color: #047857;
}

.care-wv-row .care-member-idty {
  flex: 1 1 auto;
}

.care-wv-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.care-wv-note {
  margin: 0 !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
}

.care-pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 18px;
}

.care-pf-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.care-pf-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.care-pf-value {
  font-size: 0.92rem;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.care-sub-plan {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid #a7f3d0;
  border-radius: 13px;
  background: linear-gradient(135deg, #f0fdf9, #ffffff 75%);
  margin-bottom: 14px;
}

.care-next-payment {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 15px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #047857;
  border-radius: 11px;
  background: #f8fafc;
  margin-bottom: 14px;
}

.care-next-payment-line strong {
  font-size: 1.02rem;
  color: #0f172a;
}

.care-next-payment-note {
  font-size: 0.78rem;
  color: #b45309;
  font-weight: 600;
}

.care-sub-star {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}

.care-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.care-svc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--svc, #94a3b8);
  border-radius: 12px;
  background: #ffffff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.care-svc-card:hover {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.care-svc-card .care-svc-check {
  margin-left: auto;
}

.care-addon-card > h2 + .care-svc-grid {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .care-svc-grid,
  .care-pf-grid {
    grid-template-columns: 1fr;
  }
}

.care-stat-label {
  display: block;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.care-stat-value {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
}

/* En-tete de carte + bouton discret */
.care-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.care-card-head h2 {
  margin: 0;
}

.care-mini-btn {
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 6px 14px;
  background: #ecfdf5;
  color: #047857;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .15s ease;
}

.care-mini-btn:hover {
  background: #d1fae5;
}

.care-profile-card [hidden] {
  display: none !important;
}

/* Statut en pause */
.care-status-dot--off {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .18);
}

.care-warn {
  color: #b45309 !important;
}

/* Bouton d'activation / desactivation de l'abonnement */
.care-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 10px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}

.care-toggle-btn:disabled {
  opacity: .6;
  cursor: default;
}

.care-toggle-btn--off {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.care-toggle-btn--off:hover:not(:disabled) {
  background: #fee2e2;
  transform: translateY(-1px);
}

.care-toggle-btn--on {
  border: 1px solid #047857;
  background: #047857;
  color: #ffffff;
}

.care-toggle-btn--on:hover:not(:disabled) {
  background: #065f46;
  transform: translateY(-1px);
}

@media (max-width: 820px) {
  .care-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pagination de l'historique des paiements */
.care-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.care-pager-btn {
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 8px 16px;
  background: #ffffff;
  color: #047857;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .15s ease;
}

.care-pager-btn:hover:not(:disabled) {
  background: #ecfdf5;
}

.care-pager-btn:disabled {
  opacity: .45;
  cursor: default;
}

.care-pager-info {
  color: #64748b;
  font-size: 13.5px;
  font-weight: 800;
}

/* ============================================================================
   SURCHARGES PRIORITAIRES — le bundle Angular impose en !important :
   h1/h2/h3 { color:#111827; font-size:... } et p,li { color:#374151; ... }.
   On re-affirme ici la typographie de l'overlay (nos selecteurs de classe +
   !important gagnent en specificite sur les selecteurs d'element du bundle).
   ============================================================================ */

/* Bandeau des espaces client */
.care-dash-hero h1 {
  font-size: clamp(26px, 4vw, 38px) !important;
  line-height: 1.08 !important;
}

.care-dash-hero p {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.care-dash-hero--premium h1 {
  color: #ffffff !important;
}

.care-dash-hero--premium p {
  color: rgba(255, 255, 255, .88) !important;
}

.care-dash-hero--free h1 {
  color: #0f172a !important;
}

.care-dash-hero--free p {
  color: #475569 !important;
}

/* Cartes et panneaux */
.care-addon-card h2,
.care-addon-panel-header h2,
.care-sub-head h2,
.care-card-head h2 {
  font-size: 20px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
}

.care-kv {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
}

.care-addon-muted {
  color: #64748b !important;
}

/* Pages a hero (paiement, profil, etc.) */
.care-addon-hero h1 {
  font-size: clamp(32px, 5vw, 54px) !important;
  line-height: 1.02 !important;
  color: #0f172a !important;
}

.care-addon-hero p {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
}

/* Page des formules */
.care-plans-title {
  font-size: clamp(30px, 4.4vw, 46px) !important;
  line-height: 1.05 !important;
  color: #0f172a !important;
}

.care-plans-sub {
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
}

.care-plan-name {
  font-size: 26px !important;
  line-height: 1.2 !important;
  color: #0f172a !important;
}

.care-plan-pitch {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}

.care-plan-note {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #059669 !important;
}

.care-feat {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.care-trust li {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #475569 !important;
}

/* Bloc d'incitation Premium */
.care-upsell-body h2 {
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: #065f46 !important;
}

.care-upsell-body p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
}

/* Page de connexion */
.care-auth-title {
  font-size: 30px !important;
  line-height: 1.1 !important;
  color: #0f172a !important;
}

.care-auth-sub {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}

.care-auth-alt {
  font-size: 14px !important;
  color: #64748b !important;
}

/* ===================== Espace administrateur ===================== */

/* Mise en page : sidebar fixe + zone principale defilante */
body.care-addon-active #care-client-addon-root:has(.care-admin-layout) {
  background: #f1f5f9;
}

.care-admin-layout {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* La barre est figée à la hauteur de la fenêtre (100vh). Sur un écran court — ou
   simplement avec le sous-menu « Contenus & médias » déplié — ses entrées dépassent
   cette hauteur. Sans `overflow`, elles sortaient du fond sombre et retombaient sur
   le blanc de la page : « Voir le site » et « Se déconnecter » se retrouvaient hors
   du menu, illisibles. Les éléments ne pouvaient pas non plus se comprimer (colonne
   flex, `min-height: auto` par défaut).
   La barre défile donc pour son propre compte. `overscroll-behavior: contain` évite
   qu'arrivé en bas du menu, la molette n'entraîne la page derrière. */
.care-admin-side {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 260px;
  flex: none;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 16px;
  background: linear-gradient(180deg, #0f172a, #111827);
  color: #cbd5e1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Ascenseur discret : une barre claire par défaut trancherait sur le fond sombre. */
.care-admin-side {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.care-admin-side::-webkit-scrollbar {
  width: 8px;
}

.care-admin-side::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 8px;
}

.care-admin-side::-webkit-scrollbar-track {
  background: transparent;
}

.care-admin-side-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 18px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
}

.care-admin-side-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.care-admin-side-brand em {
  font-style: normal;
  color: #34d399;
}

.care-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.care-admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  background: transparent;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.care-admin-nav-item svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.care-admin-nav-item:hover {
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
}

.care-admin-nav-item.is-active {
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(5, 150, 105, .35);
}

.care-admin-side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.care-admin-side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 11px 14px;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.care-admin-side-link svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.care-admin-side-link:hover {
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
}

.care-admin-side-link--out:hover {
  color: #fca5a5;
}

.care-admin-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 34px 32px 56px;
}

.care-admin-main-inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.care-admin-title {
  margin: 0;
  color: #0f172a !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  line-height: 1.1 !important;
}

/* Onglets du regroupement « Contenus & médias » : une seule entrée de menu latéral,
   les 5 listes (publications, ebooks, shorts, yoga, webinaires) derrière. Barre
   segmentée : l'onglet actif est en relief blanc, avec le nombre d'éléments. */
/* ---- Admin : entree de menu depliante (« Contenus & medias ») --------------------
   La ligne parente ouvre un sous-menu ; les lignes filles sont en retrait, reliees par
   un filet vertical, avec leur compteur d'elements a droite. */
.care-admin-nav-group {
  display: block;
}

.care-admin-nav-parent {
  width: 100%;
}

.care-admin-nav-chev {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.18s ease;
  opacity: 0.75;
}

.care-admin-nav-group.is-open .care-admin-nav-chev {
  transform: rotate(180deg);
}

/* Une liste du groupe est ouverte : la ligne parente reste discretement allumee. */
.care-admin-nav-group.has-active > .care-admin-nav-parent {
  color: #ffffff;
  font-weight: 800 !important;
}

.care-admin-subnav {
  display: none;
  margin: 2px 0 6px 22px;
  padding-left: 12px;
  border-left: 1.5px solid #d1fae5;
}

.care-admin-nav-group.is-open .care-admin-subnav {
  display: block;
}

/* Le bundle Angular impose 16px/600 aux boutons : on force la hierarchie visuelle,
   comme le fait deja .care-admin-sub dans ce fichier. */
.care-admin-nav-sub {
  width: 100%;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

.care-admin-nav-n {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.care-admin-nav-sub.is-active .care-admin-nav-n {
  background: #d1fae5;
  color: #047857;
}

.care-admin-sub {
  margin: 8px 0 22px;
  color: #64748b !important;
  font-size: 16px !important;
}

/* Formulaire de contenu (admin) */
#care-client-addon-root [hidden] {
  display: none !important;
}

.care-admin-form-wrap {
  padding: 20px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.care-addon-field textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  resize: vertical;
}

.care-addon-field textarea:focus {
  border-color: #047857;
  outline: 3px solid rgba(4, 120, 87, .16);
}

.care-check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 26px;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.care-check-field input {
  width: 18px;
  height: 18px;
  accent-color: #047857;
}

/* Cartes de contenus dans l'espace membre */
.care-content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.care-content-card {
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--svc, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px;
  background: #f8fafc;
}

/* Sur le tableau de bord, les longues descriptions sont coupées : le fil
   d'actualité (/articles) offre le "Lire la suite" complet. */
.care-content-card p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.care-content-card h3 {
  margin: 8px 0 6px;
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
}

.care-content-card p {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
}

.care-content-link {
  display: inline-block;
  margin-top: 10px;
  color: #047857;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.care-content-link:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .care-content-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== Promotions ===================== */
.care-promo-banner {
  margin: 0 0 16px;
  border: 1px solid #6ee7b7;
  border-radius: 12px;
  padding: 13px 16px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #065f46;
  font-size: 14.5px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(5, 150, 105, .12);
}

.care-promo-row {
  display: flex;
  gap: 8px;
}

.care-promo-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.care-promo-row .care-addon-secondary {
  flex: none;
}

.care-price-summary {
  border: 1px dashed #a7f3d0;
  border-radius: 12px;
  padding: 13px 16px;
  background: #f0fdf9;
  color: #334155;
  font-size: 15px;
  font-weight: 800;
}

.care-price-summary s {
  color: #94a3b8;
  font-weight: 700;
}

.care-price-summary strong {
  color: #065f46;
  font-size: 19px;
}

.care-promo-off {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(225, 29, 72, .3);
}

.care-chip--code {
  background: #0f172a;
  color: #a7f3d0;
  font-family: Consolas, Menlo, monospace;
  letter-spacing: .06em;
}

/* ===================== Modale ===================== */
.care-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(2, 16, 12, .52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}

.care-modal-overlay.is-open {
  opacity: 1;
}

/* Calque empilé (ex. aperçu ebook) : passe au-dessus de la modale du formulaire. */
.care-modal-overlay--stack {
  z-index: 2147483050;
}

/* Visionneuse (lightbox) de la photo de profil : fond sombre, image agrandie centrée. */
.care-lightbox {
  background: rgba(2, 16, 12, 0.82);
  cursor: zoom-out;
}
.care-lightbox-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: default;
}
.care-lightbox-img {
  width: min(74vw, 340px);
  height: min(74vw, 340px);
  object-fit: cover;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.care-lightbox-icon {
  width: min(60vw, 240px);
  height: min(60vw, 240px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  color: #ffffff;
  background: linear-gradient(135deg, #475569, #94a3b8);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.care-lightbox-icon.care-avatar--icon {
  background: linear-gradient(135deg, var(--av1, #475569), var(--av2, #94a3b8)) !important;
}
.care-lightbox-name {
  margin: 0;
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
}
.care-lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.care-lightbox-close:hover {
  background: #f1f5f9;
}
/* Bouton rendant la photo de la fiche cliquable (agrandissement). */
.care-avatar-zoom {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 50%;
  line-height: 0;
  transition: transform 0.12s ease;
}
.care-avatar-zoom:hover {
  transform: scale(1.05);
}

/* Actions « éditer / supprimer » sur ses propres commentaires du fil */
/* Pied du commentaire : heure à gauche, actions (modifier/supprimer) à droite, SOUS le message. */
.care-comment-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.care-comment-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.care-comment-act {
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  line-height: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.care-comment-act:hover {
  background: #eef2f7;
  color: #334155;
}
.care-comment-act--del:hover {
  background: #fef2f2;
  color: #dc2626;
}
.care-comment-edited {
  font-size: 0.72rem;
  color: #94a3b8;
  font-style: italic;
}
.care-comment-edit {
  margin: 4px 0 2px;
}
.care-comment-edit textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 0.86rem;
}
.care-comment-edit-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.care-mini-btn--ghost {
  background: transparent;
  color: #64748b;
  box-shadow: none;
}

/* Modale de bienvenue Google : aperçu de la photo Google proposée */
.care-gphoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 6px 0 4px;
}
.care-gphoto-preview {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  background: #eef2f7;
}

.care-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow: hidden;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 36px 90px rgba(2, 16, 12, .5);
  transform: translateY(18px) scale(.97);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.care-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #047857, #34d399 55%, #0ea5e9);
}

.care-modal--lg {
  width: min(760px, 100%);
}

.care-modal-overlay.is-open .care-modal {
  transform: none;
}

.care-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid #eef2f7;
  flex: 0 0 auto;
}

.care-modal-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.care-modal-head h2 {
  margin: 0;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: #0f172a !important;
}

.care-modal-sub {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
}

.care-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.care-modal-close:hover {
  background: #fee2e2;
  color: #b91c1c;
  transform: rotate(90deg);
}

.care-modal-close svg {
  width: 18px;
  height: 18px;
}

.care-modal-body {
  padding: 22px 26px 26px;
  overflow-y: auto;
}

/* Champs et actions à l'intérieur des modales : finition dédiée */
.care-modal .care-addon-field input,
.care-modal .care-addon-field select {
  border-radius: 11px;
  min-height: 44px;
}

.care-modal .care-addon-field textarea {
  border-radius: 11px;
}

.care-modal .care-addon-actions {
  justify-content: flex-end;
  border-top: 1px solid #eef2f7;
  padding-top: 16px;
  margin-top: 22px;
}

@media (max-width: 640px) {
  .care-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .care-modal,
  .care-modal--lg {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }
}

@media (max-width: 860px) {
  .care-admin-layout {
    flex-direction: column;
  }

  .care-admin-side {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
  }

  .care-admin-side-brand {
    padding: 4px 6px;
    margin-right: auto;
  }

  .care-admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    order: 3;
  }

  .care-admin-nav-item {
    width: auto;
    padding: 9px 12px;
    font-size: 14px;
  }

  .care-admin-side-foot {
    margin-top: 0;
    flex-direction: row;
    border-top: 0;
    padding-top: 0;
  }

  .care-admin-main {
    padding: 24px 16px 48px;
  }
}

.care-stats--admin {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.care-panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.care-admin-search {
  min-height: 42px;
  min-width: min(320px, 100%);
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 9px 18px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 14px;
}

.care-admin-search:focus {
  border-color: #047857;
  outline: 3px solid rgba(4, 120, 87, .16);
}

.care-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.care-chip--premium { background: #d1fae5; color: #065f46; }
.care-chip--free { background: #f1f5f9; color: #475569; }
.care-chip--ok { background: #dcfce7; color: #166534; }
.care-chip--warn { background: #fef3c7; color: #92400e; }
.care-chip--muted { background: #f8fafc; color: #94a3b8; }

.care-last-login {
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  cursor: default;
}

/* ---- Page Membres (admin) : barre d'outils, segments, avatars, actions ---- */

.care-stats--members {
  margin-bottom: 18px;
}

.care-members-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(180deg, #fbfdfc 0%, #ffffff 100%);
  border-bottom: 1px solid #eef2ef;
}

.care-members-toolbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.care-members-toolbar-row--filters {
  gap: 10px 12px;
}

.care-search-box {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
  color: #94a3b8;
}

.care-search-box svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* `care-yoga-search` est le champ de l'espace MEMBRE (page Yoga +) : même dessin que celui de
   l'administration, d'où la règle partagée plutôt qu'un second bloc à maintenir en double. */
.care-search-box .care-admin-search,
.care-search-box .care-yoga-search {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.9rem;
  color: #0f172a;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.care-search-box .care-admin-search:focus,
.care-search-box .care-yoga-search:focus {
  outline: none;
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

/* Barre de recherche de la page Yoga +, sous le chapeau de la section. */
.care-yoga-tools {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.care-yoga-tools .care-filter-count {
  margin-left: 0;
  white-space: nowrap;
}

.care-filter-count {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 999px;
}

.care-seg-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
}

.care-seg-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
}

.care-seg {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 11px;
  padding: 3px;
  gap: 2px;
}

.care-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.care-seg-btn:hover {
  color: #0f172a;
}

.care-seg-btn.is-active {
  background: #ffffff;
  color: #047857;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

/* ---- Filtres admin en menus déroulants (« select ») ---- */
.care-fdrop {
  position: relative;
}

.care-fdrop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 11px;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.care-fdrop-trigger:hover {
  border-color: #cbd5e1;
}

.care-fdrop-trigger:focus-visible {
  outline: none;
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.14);
}

.care-fdrop-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.care-fdrop-value {
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
}

.care-fdrop-chev {
  color: #94a3b8;
  margin-left: 1px;
  transition: transform 0.18s ease;
}

.care-fdrop.is-open .care-fdrop-trigger {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

.care-fdrop.is-open .care-fdrop-chev {
  transform: rotate(180deg);
}

/* Filtre actif (valeur différente de « Tous ») : accent vert discret. */
.care-fdrop.is-filtered .care-fdrop-trigger {
  border-color: #34d399;
  background: #f0fdf4;
}

.care-fdrop.is-filtered .care-fdrop-value {
  color: #047857;
}

.care-fdrop-menu {
  /* position: fixed => le menu échappe à tout ancêtre en overflow:hidden (panneau).
     top/left sont calculés en JS (positionFilterMenu) à l'ouverture. */
  position: fixed;
  z-index: 1200;
  width: max-content;
  max-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  padding: 6px;
  animation: care-fdrop-pop 0.13s ease;
}

@keyframes care-fdrop-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.care-fdrop-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.care-fdrop-opt-label {
  flex: 1 1 auto;
}

.care-fdrop-opt:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.care-fdrop-opt.is-active {
  background: #ecfdf5;
  color: #047857;
  font-weight: 800;
}

.care-fdrop-check {
  margin-left: auto;
  color: #047857;
  opacity: 0;
}

.care-fdrop-opt.is-active .care-fdrop-check {
  opacity: 1;
}

.care-members-body {
  padding-top: 0;
}

.care-member-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.care-member-cell--click {
  cursor: pointer;
  border-radius: 10px;
  margin: -6px -8px;
  padding: 6px 8px;
  transition: background 0.15s ease;
}

.care-member-cell--click:hover {
  background: #ecfdf5;
}

.care-member-cell--click:hover .care-member-idty strong {
  color: #047857;
}

/* ---- Fiche membre (modale admin) ---- */

.care-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
}

.care-avatar--detail {
  width: 54px;
  height: 54px;
  font-size: 1.1rem;
}

.care-detail-idty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.care-detail-idty > strong {
  font-size: 1.1rem;
  color: #0f172a;
}

.care-detail-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.care-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.care-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid #e6efe9;
  border-radius: 11px;
  background: #f8fafc;
}

.care-detail-stat strong {
  font-size: 0.98rem;
  color: #0f172a;
}

.care-detail-grid {
  margin-bottom: 18px;
}

.care-detail-subtitle {
  margin: 0 0 10px;
  font-size: 15px !important;
  color: #0f172a !important;
}

@media (max-width: 640px) {
  .care-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.care-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, #475569, #94a3b8);
  box-shadow: inset 0 -2px 4px rgba(15, 23, 42, 0.18);
}

.care-avatar--premium {
  background: linear-gradient(135deg, #047857, #34d399);
}

/* Avatar « icône » choisi par le membre (emoji sur dégradé) — remplace les initiales. */
.care-avatar--icon {
  background: linear-gradient(135deg, var(--av1, #475569), var(--av2, #94a3b8)) !important;
  box-shadow: inset 0 -2px 4px rgba(15, 23, 42, 0.12);
  font-size: 1.15rem;
  line-height: 1;
}
.care-avatar--nav.care-avatar--icon { font-size: 1.02rem; }
.care-avatar--sm.care-avatar--icon { font-size: 0.95rem; }
.care-avatar--hero.care-avatar--icon,
.care-avatar--hero-light.care-avatar--icon { font-size: 1.7rem; }
.care-avatar--pick.care-avatar--icon { font-size: 1.6rem; }

/* Avatar « photo importée » : l'image en fond couvrant, clippée en cercle par .care-avatar. */
.care-avatar--photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat;
  color: transparent;
}

.care-avatar--lg {
  width: 84px;
  height: 84px;
  font-size: 1.5rem;
}

/* Bloc d'import de photo dans la modale d'avatar. */
.care-photobox {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdfc 0%, #ffffff 100%);
}

.care-photobox-empty {
  background: #f1f5f9;
  color: #94a3b8;
  box-shadow: none;
}

.care-photobox-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.care-photobox-body strong { font-size: 0.95rem; color: #0f172a; }
.care-photobox-body .care-addon-muted { font-size: 0.82rem; }

.care-photobox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.care-mini-btn--primary {
  border-color: #047857;
  background: #047857;
  color: #ffffff;
}

.care-mini-btn--primary:hover {
  background: #036949;
  border-color: #036949;
}

/* Séparateur « ou choisissez une icône ». */
.care-avatar-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.care-avatar-or::before,
.care-avatar-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e9eef3;
}

/* Recadreur circulaire (glisser + zoom). */
.care-cropper-stage {
  position: relative;
  margin: 4px auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.care-cropper-stage:active { cursor: grabbing; }

.care-cropper-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}

.care-cropper-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2000px rgba(15, 23, 42, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.care-cropper-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px auto 4px;
  max-width: 300px;
  color: #64748b;
}
.care-cropper-zoom input[type="range"] {
  flex: 1 1 auto;
  accent-color: #047857;
  cursor: pointer;
}

/* Galerie de sélection d'avatar (page profil) */
.care-avatar-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.care-avatar-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  padding: 9px 4px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.care-avatar-pick:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
}
.care-avatar-pick.is-active {
  border-color: #047857;
  background: #ecfdf5;
}
.care-avatar--pick {
  width: 52px;
  height: 52px;
  font-size: 1.2rem;
}
.care-avatar-pick-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
}
.care-avatar-pick.is-active .care-avatar-pick-label {
  color: #047857;
}

.care-member-idty {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.35;
  min-width: 0;
}

.care-member-idty strong {
  font-size: 0.92rem;
  color: #0f172a;
}

/* Pastille de vérification du contact affiché dans la liste des membres : verte quand
   c'est confirmé, ambre quand ça reste à confirmer. Rien du tout si le contact est absent
   (la colonne Actions propose alors de l'ajouter). */
.care-vdot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  flex: 0 0 auto;
}

.care-vdot--ok {
  background: #d1fae5;
  color: #047857;
}

.care-vdot--ko {
  background: #fef3c7;
  color: #b45309;
}

/* Nom + pseudo sur la même ligne (pseudo à droite du nom) dans la liste des membres. */
.care-member-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.care-member-name-row .care-pseudo-chip {
  margin-top: 0;
}

.care-member-idty .care-addon-muted {
  font-size: 0.8rem;
}

/* ---- Origine du compte : badge « Google » (liste des membres + fiche) ---- */
.care-origin-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.care-origin-tag--google,
.care-origin-chip--google {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #3c4043;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Variante affichée dans la fiche détaillée, alignée sur les autres .care-chip. */
.care-origin-chip--google {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.care-origin-tag svg,
.care-origin-chip--google svg {
  flex: 0 0 auto;
}

/* Puce « pseudo » (nom public) sous le nom dans la carte profil. */
.care-pseudo-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.72rem;
  font-weight: 800;
}

.care-pseudo-chip svg {
  flex: 0 0 auto;
}

.care-chip--dot::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: currentColor;
  vertical-align: 1px;
}

.care-status-none {
  color: #cbd5e1;
  font-weight: 600;
}

.care-cell-date {
  color: #475569;
  font-size: 0.86rem;
  white-space: nowrap;
}

.care-last-login--never {
  color: #94a3b8;
  font-weight: 500;
  font-style: italic;
}

.care-members-table tbody tr[data-member-row] td {
  transition: background 0.12s ease;
}

.care-members-table tbody tr[data-member-row]:hover td {
  background: #f8fafc;
}

.care-th-actions {
  text-align: right;
}

.care-members-table .care-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.care-icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 31px;
  min-width: 31px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.care-icon-btn--pause:hover {
  color: #b45309;
  border-color: #fcd34d;
  background: #fffbeb;
}

.care-icon-btn--play:hover {
  color: #047857;
  border-color: #6ee7b7;
  background: #ecfdf5;
}

.care-type-select {
  appearance: none;
  -webkit-appearance: none;
  height: 31px;
  padding: 0 26px 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 13px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.care-type-select:hover {
  border-color: #94a3b8;
}

.care-type-select:focus {
  outline: none;
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

.care-type-select--premium {
  color: #047857;
  border-color: #a7f3d0;
  background-color: #f0fdf9;
}

.care-type-select:disabled {
  opacity: 0.55;
  cursor: wait;
}

.care-star {
  color: #f59e0b;
  font-size: 0.85em;
}

.care-icon-btn--boost {
  color: #7c3aed;
  border-color: #e5dbfa;
  background: #faf7ff;
}

.care-icon-btn--boost:hover {
  border-color: #7c3aed;
  background: #f1e9fe;
}

.care-icon-btn--danger:hover {
  color: #b91c1c;
  border-color: #fca5a5;
  background: #fef2f2;
}

.care-icon-btn--key:hover {
  color: #1d4ed8;
  border-color: #93c5fd;
  background: #eff6ff;
}

/* « Compléter le contact » (email / téléphone manquant) : action constructive, en vert. */
.care-icon-btn--add:hover {
  color: #047857;
  border-color: #6ee7b7;
  background: #ecfdf5;
}

/* Encadré affichant le nouveau mot de passe après réinitialisation par l'admin. */
.care-pwd-reveal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed #94a3b8;
  border-radius: 10px;
  background: #f8fafc;
}

.care-pwd-reveal code {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0f172a;
  word-break: break-all;
}

.care-pwd-reveal .care-addon-secondary {
  flex: none;
}

.care-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 38px 20px;
  text-align: center;
}

.care-empty-state .care-empty-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #94a3b8;
}

.care-empty-state p {
  color: #64748b;
  font-size: 0.92rem;
  margin: 0;
}

/* ---- Fil d'actualité (/articles) : posts, j'aime, commentaires ---- */

.care-feed {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Chargement paginé « façon Facebook » : liste des posts + sentinelle de scroll + squelettes. */
.care-feed-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.care-feed-sentinel:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.care-skeleton {
  pointer-events: none;
}

.care-skel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.care-skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(100deg,
    rgba(148, 163, 184, 0.12) 30%,
    rgba(148, 163, 184, 0.30) 50%,
    rgba(148, 163, 184, 0.12) 70%);
  background-size: 200% 100%;
  animation: care-shimmer 1.3s ease-in-out infinite;
}

.care-skel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
}

.care-skel-line {
  height: 12px;
  margin: 8px 0;
}

.care-skel-media {
  height: 180px;
  border-radius: 12px;
  margin-top: 12px;
}

@keyframes care-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .care-skel { animation: none; }
}

.care-feed-head {
  padding: 6px 4px 2px;
}

.care-feed-head h1 {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 32px) !important;
  color: #0f172a !important;
}

.care-feed-head p {
  margin: 6px 0 0;
  color: #64748b !important;
}

.care-post {
  background: #ffffff;
  border: 1px solid #e6efe9;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.care-post-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px 0;
}

.care-post-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}

.care-post-meta strong {
  font-size: 0.9rem;
  color: #0f172a;
}

.care-post-meta .care-addon-muted {
  font-size: 0.78rem;
}

.care-post-body {
  padding: 10px 18px 4px;
}

.care-post-body h3 {
  margin: 0 0 6px;
  font-size: 17px !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
}

.care-post-body p {
  margin: 0 0 10px;
  color: #334155 !important;
  line-height: 1.55 !important;
}

.care-post-text {
  white-space: pre-line;
}

.care-post-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.care-post-more {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: -4px 0 10px;
  color: #047857;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.care-post-more:hover {
  text-decoration: underline;
}

.care-post-media {
  background: #0f172a;
}

.care-post-media img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.care-post-media video {
  width: 100%;
  max-height: 420px;
  display: block;
}

.care-post-attach {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 18px 2px;
}

.care-post-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  color: #64748b;
  font-size: 0.83rem;
}

.care-post-stat-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 0.83rem;
  cursor: pointer;
  padding: 0;
}

.care-post-stat-btn:hover {
  color: #047857;
  text-decoration: underline;
}

.care-post-actions {
  display: flex;
  border-top: 1px solid #eef2f7;
  padding: 5px 10px;
  gap: 6px;
}

.care-post-btn {
  appearance: none;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #475569;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 9px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.care-post-btn:hover {
  background: #f1f5f9;
}

/* Bouton « Commenter » remplacé par un état non cliquable quand l'admin a coupé les commentaires. */
.care-post-btn--off {
  color: #94a3b8;
  cursor: default;
}
.care-post-btn--off:hover {
  background: transparent;
}

/* Bandeau « commentaires désactivés » en tête du panneau de commentaires. */
.care-comments-off {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 600;
}
.care-comments-off svg {
  flex: 0 0 auto;
}

.care-post-btn.is-liked {
  color: #047857;
}

.care-post-btn.is-liked svg {
  fill: #047857;
  stroke: #047857;
}

.care-post-btn.is-saved {
  color: #b45309;
}

.care-post-btn.is-saved svg {
  fill: #b45309;
  stroke: #b45309;
}

.care-feed-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.care-feed-tabs .care-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.care-post-comments {
  border-top: 1px solid #eef2f7;
  padding: 13px 18px 15px;
  background: #fbfdfc;
}

.care-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.care-comments-list:empty {
  margin-bottom: 0;
}

.care-comments-none {
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
  margin: 0 0 4px !important;
}

/* « Voir les N autres commentaires » : ouvre le fil complet dans une modale. */
.care-comments-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 2px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  transition: color .12s ease;
}

.care-comments-more:hover {
  color: #047857;
  text-decoration: underline;
}

.care-comments-more svg {
  width: 15px;
  height: 15px;
  opacity: .75;
}

/* Fil complet en modale : on borne la hauteur pour garder le champ de saisie visible. */
.care-comments-list--modal {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding-right: 4px;
}

.care-comment {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.care-avatar--sm {
  width: 30px;
  height: 30px;
  font-size: 0.66rem;
  flex: 0 0 auto;
}

.care-comment-bubble {
  background: #f1f5f9;
  border-radius: 14px;
  padding: 8px 13px;
  max-width: 100%;
  min-width: 0;
}

.care-comment-bubble strong {
  display: block;
  font-size: 0.8rem;
  color: #0f172a;
}

.care-comment-me {
  font-size: 0.68rem;
  font-weight: 700;
  color: #047857;
  background: #d1fae5;
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: 1px;
}

.care-comment-bubble p {
  margin: 2px 0 3px !important;
  font-size: 0.88rem !important;
  color: #334155 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

.care-comment-time {
  font-size: 0.72rem;
  color: #94a3b8;
}

.care-comment-form {
  display: flex;
  align-items: center;
  gap: 9px;
}

.care-comment-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-size: 0.88rem;
  color: #0f172a;
  background: #ffffff;
}

.care-comment-form input:focus {
  outline: none;
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

.care-comment-form button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #047857;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.care-comment-form button:hover {
  background: #065f46;
}

.care-comment-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---- Médias des articles : tuiles d'upload (admin) et affichage (membre) ---- */

.care-media-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.care-media-add {
  width: 100%;
  min-height: 72px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.care-media-add:hover {
  border-color: #047857;
  color: #047857;
  background: #f0fdf9;
}

.care-media-filled {
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 34px 8px 12px;
  border: 1.5px solid #a7f3d0;
  border-radius: 12px;
  background: #f0fdf9;
  color: #047857;
  font-size: 0.82rem;
  font-weight: 600;
}

.care-media-filled--img {
  padding: 0;
  overflow: hidden;
}

.care-media-filled--img img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  display: block;
}

.care-media-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.care-media-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
}

.care-media-del:hover {
  background: #b91c1c;
}

.care-media-tags {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}

.care-media-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 5px;
  padding: 2px 7px;
}

.care-content-media {
  margin: -16px -18px 12px;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
  background: #0f172a;
}

.care-content-media img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}

.care-content-media video {
  width: 100%;
  max-height: 260px;
  display: block;
}

.care-content-media + .care-content-media {
  margin-top: 0;
  border-radius: 0;
}

.care-content-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid #d1fae5;
  border-radius: 10px;
  background: #ffffff;
  color: #047857 !important;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.care-content-file:hover {
  background: #ecfdf5;
  border-color: #047857;
}

.care-promo-badge {
  flex: 0 0 auto;
  min-width: 44px;
  height: 38px;
  padding: 0 8px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #e11d48;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  white-space: nowrap;
}

/* ---- Services CARE : chips, badges et sélecteurs à puces ---- */

.care-svc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: 1px;
}

.care-svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.care-svc-badge {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--svc, #64748b);
  background: #f1f5f9;
  background: color-mix(in srgb, var(--svc, #94a3b8) 14%, #ffffff);
  border: 1px solid #e2e8f0;
  border-color: color-mix(in srgb, var(--svc, #94a3b8) 30%, #ffffff);
}

.care-stat-label .care-svc-dot {
  margin-right: 2px;
}

.care-btn-new {
  padding: 9px 16px !important;
  font-size: 0.85rem !important;
  width: auto !important;
  border-radius: 10px !important;
}

.care-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.care-pick input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.care-pick {
  position: relative;
  cursor: pointer;
}

.care-pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.care-pick:hover .care-pick-chip {
  border-color: #94a3b8;
}

.care-pick input[type="radio"]:checked + .care-pick-chip {
  border-color: #047857;
  background: #ecfdf5;
  color: #065f46;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.1);
}

.care-pick input[type="radio"]:focus-visible + .care-pick-chip {
  outline: 2px solid #047857;
  outline-offset: 2px;
}

.care-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.care-mini-btn--danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.care-mini-btn--danger:hover {
  background: #fee2e2;
}

.care-auth-card--admin {
  border-color: #cbd5e1;
  box-shadow: 0 26px 60px rgba(15, 23, 42, .18);
}

.care-auth-kicker--admin {
  background: #f1f5f9;
  color: #0f172a;
}

.care-auth-submit--admin {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .35);
}

.care-auth-submit--admin:hover {
  box-shadow: 0 20px 40px rgba(15, 23, 42, .45);
}

@media (max-width: 1000px) {
  .care-stats--admin {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .care-stats--admin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================================
   Webinaires en direct : salle de diffusion plein écran + cartes membres.
   L'animateur diffuse (micro + caméra) ; les membres regardent en spectateurs.
   ============================================================================ */

.care-live-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: #0b1220;
  display: flex;
  flex-direction: column;
}

.care-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #111a2e;
  color: #fff;
}

.care-live-titles {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.care-live-titles strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.care-live-role {
  font-size: 12px;
  opacity: 0.75;
  white-space: nowrap;
}

.care-live-close {
  background: #e11d48;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.care-live-close:hover {
  background: #be123c;
}

.care-live-frame {
  flex: 1;
  min-height: 0;
}

.care-live-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

body.care-live-open {
  overflow: hidden;
}

.care-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  display: inline-block;
  flex-shrink: 0;
  animation: careLivePulse 1.2s ease-in-out infinite;
}

@keyframes careLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.care-chip--live {
  background: #fee2e2;
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.care-webinar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.care-webinar-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
}

.care-webinar-card--live {
  border-color: #fca5a5;
  background: #fff7f7;
}

.care-webinar-card h3 {
  margin: 6px 0 2px;
  font-size: 16px;
}

.care-webinar-desc {
  margin: 6px 0 0;
  color: #4b5563;
  font-size: 13.5px;
}

.care-webinar-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.care-webinar-action {
  flex-shrink: 0;
}

.care-mini-btn--live {
  background: #e11d48;
  border-color: #e11d48;
  color: #fff;
}

.care-mini-btn--live:hover {
  background: #be123c;
  border-color: #be123c;
  color: #fff;
}

.care-addon-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 640px) {
  .care-webinar-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .care-addon-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ---- Page admin "Parrainage" : invitations réussies par date ---- */

.care-day-bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin-top: 16px;
}

.care-day-bar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.care-day-bar b {
  font-size: 0.74rem;
  font-weight: 900;
  color: #b45309;
  min-height: 16px;
  line-height: 16px;
}

.care-day-bar em {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 86px;
  font-style: normal;
}

.care-day-bar i {
  display: block;
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
}

.care-day-bar--zero i {
  background: #e2e8f0;
  box-shadow: none;
}

.care-day-bar span {
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
  transform: rotate(-38deg);
  transform-origin: center 10px;
}

/* Bloc "Programme de parrainage" de la fiche membre (activation/désactivation) */
.care-detail-referral {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #fde68a;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffbeb, #ffffff 70%);
}

.care-detail-referral--off {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.care-detail-referral .care-member-idty {
  flex: 1 1 260px;
}

.care-detail-referral .care-mini-btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .care-day-bar:nth-child(odd) span {
    visibility: hidden;
  }
}

/* ---- Notifications "toast" (succès / erreur) — remplacent alert() ---- */

.care-toasts {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2147483500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 36px));
  pointer-events: none;
}

.care-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid #d1fae5;
  border-left: 4px solid #059669;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
  animation: careToastIn 0.22s ease;
}

.care-toast--error {
  border-color: #fecaca;
  border-left-color: #dc2626;
}

.care-toast-ico {
  flex: 0 0 auto;
  color: #059669;
  display: inline-flex;
  margin-top: 1px;
}

.care-toast--error .care-toast-ico {
  color: #dc2626;
}

.care-toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.care-toast-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0 2px;
  color: #94a3b8;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.care-toast-close:hover {
  color: #0f172a;
}

.care-toast.is-leaving {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes careToastIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

/* ---- Modale de confirmation — remplace confirm() ---- */

.care-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.care-confirm-overlay.is-open {
  opacity: 1;
}

.care-confirm {
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 24px 20px;
  width: min(440px, 100%);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.38);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.16s ease;
}

.care-confirm-overlay.is-open .care-confirm {
  transform: none;
}

.care-confirm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.care-confirm-head strong {
  font-size: 1.06rem;
  color: #0f172a;
}

.care-confirm-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecfdf5;
  color: #047857;
}

.care-confirm-ico--danger {
  background: #fef2f2;
  color: #dc2626;
}

.care-confirm-msg {
  margin: 0 0 18px;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.55;
}

.care-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.care-confirm-danger {
  background: #dc2626;
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.care-confirm-danger:hover {
  background: #b91c1c;
}

@media (max-width: 480px) {
  .care-confirm-actions {
    flex-direction: column-reverse;
  }
  .care-confirm-actions button {
    width: 100%;
  }
}

/* Configuration du programme de parrainage (page admin) */
.care-parr-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 4px;
}

@media (max-width: 860px) {
  .care-parr-config-grid {
    grid-template-columns: 1fr;
  }
}

/* Cloche "notifications webinaires" (espace membre) */
.care-webnotif-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.care-webnotif-btn.is-on {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

/* Chip rouge "Connexion bloquée" + bloc "Accès au compte" de la fiche membre */
.care-chip--danger {
  background: #fee2e2;
  color: #b91c1c;
}

.care-detail-access {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.care-detail-access--blocked {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fef2f2, #ffffff 70%);
}

/* Aperçu d'une publication dans la modale admin */
.care-preview-note {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.care-post--preview {
  margin: 0;
  box-shadow: none;
  border: 1px solid #e2e8f0;
}

/* Mot de passe actuel oublié : lien discret + choix du canal (email / SMS) */
.care-forgot-link {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-size: 0.82rem;
  color: #64748b;
  cursor: pointer;
}

.care-forgot-link strong {
  color: #047857;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.care-forgot-link:hover strong {
  color: #065f46;
}

[data-fc-channels] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 2px;
}

.care-fc-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.care-fc-option:hover {
  border-color: #34d399;
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.12);
}

.care-fc-option.is-selected {
  border-color: #047857;
  background: #f0fdf9;
}

.care-fc-option .care-member-idty {
  flex: 1 1 auto;
}

.care-fc-go {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: #047857;
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  border-radius: 999px;
  padding: 7px 13px;
  white-space: nowrap;
}

/* Note "au moins un contact" du formulaire d'inscription */
.care-reg-contact-note {
  margin: -4px 0 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f0fdf9;
  border: 1px solid #d1fae5;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.5;
}

.care-reg-contact-note strong {
  color: #047857;
}

/* Modale "Session fermée" (connexion unique par compte) */
.care-session-ended p {
  margin: 0 0 12px;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Ligne "contact manquant" de la modale de bienvenue : liseré ambre d'invitation */
.care-wv-row--missing {
  border: 1px dashed #fcd34d;
  background: #fffbeb;
  border-radius: 12px;
  padding: 10px 12px;
}

/* Lien de bascule mobile <-> email à l'étape 1 de l'inscription */
.care-reg-switch-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 2px 0;
  margin: -2px 0 4px;
  color: #047857;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.care-reg-switch-link:hover {
  color: #065f46;
}

/* Bloc « changer de méthode » à l'étape confirmation */
.care-reg-cfm-change {
  border-top: 1px solid #e2e8f0;
  margin-top: 14px;
  padding-top: 4px;
}

/* Actions sous le champ de code d'inscription (renvoyer / modifier le contact) */
.care-reg-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: 10px;
}

/* Pagination des grands tableaux de l'admin (Connexions, SMS & codes) */
.care-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.care-pager .care-mini-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Connexion / inscription Google : séparateur « ou » + conteneur du bouton officiel */
.care-oauth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: #94a3b8;
  font-size: 0.82rem;
}
.care-oauth-sep::before,
.care-oauth-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e2e8f0;
}
.care-google-btn {
  display: flex;
  justify-content: center;
  margin: 4px 0 2px;
  min-height: 40px;
}
.care-google-btn > div {
  max-width: 100%;
}

/* Avatar grisé pour un compte administrateur suspendu */
.care-avatar--muted {
  background: #cbd5e1 !important;
  color: #64748b !important;
}

/* ---- Vérification humaine anti-robot : curseur « glissez pour confirmer » ---- */
.care-hcheck-wrap { margin: 4px 0 14px; }

.care-hcheck {
  position: relative;
  height: 48px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  user-select: none;
}
.care-hcheck-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 46px;
  background: linear-gradient(90deg, #34d399, #059669);
  border-radius: 999px;
  z-index: 1;
}
.care-hcheck-handle {
  position: absolute;
  left: 3px; top: 3px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: #047857;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(4, 120, 87, 0.35);
  touch-action: none;
}
.care-hcheck-handle:active { cursor: grabbing; }
.care-hcheck-label {
  position: absolute;
  left: 56px; right: 16px;
  z-index: 2;
  font-size: 0.86rem;
  color: #64748b;
  text-align: center;
  pointer-events: none;
}
.care-hcheck.is-solving,
.care-hcheck.is-done {
  justify-content: center;
  gap: 10px;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.care-hcheck.is-solving .care-hcheck-label,
.care-hcheck.is-done .care-hcheck-label {
  position: static;
  color: #047857;
  font-weight: 700;
}
.care-hcheck-check {
  display: inline-flex;
  color: #fff;
  background: #059669;
  width: 26px; height: 26px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.care-hcheck-spin {
  width: 20px; height: 20px;
  border: 3px solid #a7f3d0;
  border-top-color: #047857;
  border-radius: 50%;
  animation: careHcheckSpin 0.7s linear infinite;
}
@keyframes careHcheckSpin { to { transform: rotate(360deg); } }

/* ---- Admin : sections du site (interrupteurs) ------------------------------------
   Une ligne par section. Ouverte = neutre et verte d'eau, fermée = ambrée : l'attention
   doit aller sur ce qui est COUPÉ, pas sur ce qui fonctionne. C'est l'inverse du bloc
   .care-detail-referral, qui met en avant la ligne active. */
.care-mod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid #d1fae5;
  border-radius: 12px;
  background: #ffffff;
}

.care-mod-row + .care-mod-row {
  margin-top: 10px;
}

.care-mod-row--off {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb, #ffffff 70%);
}

.care-mod-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 280px;
  min-width: 0;
}

.care-mod-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.care-mod-head strong {
  font-size: 0.95rem;
  color: #0f172a;
}

.care-mod-trace {
  font-size: 0.72rem;
  color: #92400e;
}

.care-mod-row .care-mini-btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .care-mod-row {
    flex-direction: column;
    align-items: stretch;
  }

  .care-mod-row .care-mini-btn {
    width: 100%;
  }
}

/* ---- Filigrane des lecteurs video ------------------------------------------------
   Le numero d'adherent en surimpression. Cela n'empeche aucune copie : cela rend une
   fuite TRACABLE jusqu'au compte, ce qui est le vrai dissuasif. Discret pour ne pas
   gener le visionnage, mais present sur toute capture ou tout enregistrement.
   pointer-events: none est indispensable : sans lui, le filigrane volerait les clics
   destines aux controles du lecteur. */
.care-wm-host {
  position: relative;
}

.care-wm {
  position: absolute;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.32);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  /* Le filigrane se deplace lentement entre les quatre coins : un cache statique ne
     peut donc pas etre recadre une fois pour toutes. */
  animation: careWmDrift 32s linear infinite;
}

@keyframes careWmDrift {
  0%   { top: 10px;  left: 12px;  right: auto; bottom: auto; opacity: .55; }
  24%  { top: 10px;  left: auto;  right: 12px; bottom: auto; opacity: .75; }
  49%  { top: auto;  left: auto;  right: 12px; bottom: 46px; opacity: .55; }
  74%  { top: auto;  left: 12px;  right: auto; bottom: 46px; opacity: .75; }
  100% { top: 10px;  left: 12px;  right: auto; bottom: auto; opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .care-wm { animation: none; top: 10px; right: 12px; }
}

/* Conteneurs qui accueillent le filigrane : ils n'etaient pas positionnes, l'ajout de
   position:relative ne change rien a leur rendu actuel (aucun enfant en absolu). */
.care-post-media--video,
.care-content-media--video,
.care-video-player {
  position: relative;
}

/* Visionneuse Shorts : les controles maison montent jusqu'a z-index 8 (croix de fermeture).
   Le filigrane se place au-dessus de la video et des controles de lecture, mais SOUS la croix,
   et reste fixe : la barre du bas et les fleches de droite ne doivent pas etre survolees. */
.care-wm--sv {
  animation: none;
  top: 62px;
  left: 14px;
  right: auto;
  bottom: auto;
  z-index: 7;
}

/* ------------------------------------------------------------------------
   Pages legales (/mentions-legales, /politique-confidentialite, /statuts).
   Leur contenu est rendu par l'overlay (renderLegalPage dans
   care-client-addons.js) d'apres les PDF officiels de site/assets/legal/.
   Le site est en Tailwind COMPILE : seules les classes deja presentes dans
   le build existent. Ces quelques regles maison couvrent ce que Tailwind ne
   fournit pas ici : reference d'article, sommaire en colonnes, tableau des
   cookies et coupure des URL longues.
   ------------------------------------------------------------------------ */
.care-legal-lien {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Petite pastille « article 2 » posee a cote d'un titre de section. Elle vit
   dans un h2 en text-2xl font-bold : elle doit donc redefinir sa propre
   taille et sa graisse. */
.care-legal-ref {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: middle;
  white-space: nowrap;
}

.care-legal-sommaire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 8px 20px;
}

.care-legal-art {
  padding: 9px 13px;
  border-radius: 10px;
  background: #f9fafb;
  color: #374151;
  font-size: 15px;
  line-height: 1.35;
}

.care-legal-art-num {
  color: #047857;
  font-weight: 700;
  white-space: nowrap;
}

/* Le tableau des cookies defile horizontalement plutot que de se tasser :
   sur un telephone, quatre colonnes de texte ne tiennent pas en largeur. */
.care-legal-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.care-legal-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 14px;
}

.care-legal-table th {
  padding: 11px 13px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.care-legal-table td {
  padding: 11px 13px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: top;
}

.care-legal-table tbody tr:last-child td {
  border-bottom: 0;
}

.care-legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #047857;
  overflow-wrap: anywhere;
}

/* ============================================================================
   Accueil — titre de marque redondant
   Le hero affichait « CARE » en très grand juste sous la ligne
   « ASSOCIATION ENGAGÉE — CARE » : le nom apparaissait deux fois de suite.
   On retire le titre de l'affichage, mais on le laisse dans la page pour les
   moteurs de recherche et les lecteurs d'écran (une page sans titre principal
   est pénalisée au référencement). Fait en CSS et non en JavaScript : le titre
   n'apparaît donc jamais, même une fraction de seconde.
   ============================================================================ */
app-home h1.text-4xl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ligne mise a jour sur place dans les listes de l'admin (bascule visible/masque). Sans le
   clignotement d'un rendu complet, ce bref surlignage indique QUELLE ligne vient de changer.
   prefers-reduced-motion : on retire l'animation pour qui la refuse. */
@keyframes careRowFlash {
  0%   { background-color: rgba(5, 150, 105, 0.16); }
  100% { background-color: transparent; }
}

.care-row-flash > td {
  animation: careRowFlash 900ms ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .care-row-flash > td { animation: none; }
}

/* Barre de progression du rafraichissement discret de l'administration. Les actions de la
   page (activer, masquer, supprimer, enregistrer...) relancent 15 appels reseau : sans repere
   visuel, l'utilisateur ne sait pas que la page travaille ; avec l'ancien « Chargement... »
   plein ecran, il avait l'impression d'un rechargement complet. */
.care-admin-busy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483000;
  background: rgba(5, 150, 105, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out;
}

.care-admin-busy.is-on {
  opacity: 1;
}

.care-admin-busy::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, rgba(4, 120, 87, 0), #059669 55%, rgba(4, 120, 87, 0));
  transform: translateX(-100%);
}

.care-admin-busy.is-on::before {
  animation: careAdminBusy 1050ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes careAdminBusy {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(394%); }
}

@media (prefers-reduced-motion: reduce) {
  .care-admin-busy.is-on::before { animation: none; transform: translateX(0); width: 100%; opacity: 0.5; }
}

/* Avertissement d'envoi d'email dans les formulaires de l'admin. Creer un webinaire et
   demarrer un direct sont les deux SEULES actions qui ecrivent a tous les membres, et la case
   « Notifier les membres » est cochee par defaut : le message doit se voir sans etre criard.
   La variante --calm est affichee quand la case est decochee (aucun envoi) : meme place, meme
   taille, ton neutre, pour que l'admin voie que son action a ete prise en compte. */
.care-form-warn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 6px 0 0;
  padding: 9px 12px;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}

.care-form-warn::before {
  content: "!";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: #d97706;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}

.care-form-warn--calm {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #4b5563;
  font-weight: 500;
}

.care-form-warn--calm::before {
  content: "\2713";
  background: #6b7280;
}

/* ------------------------------------------------------------------------
   Services CARE presentes comme des « pages » en tete de la section Contenus.
   Une tuile par service : couleur du service, nom, nombre de publications.
   Cliquer ouvre la page du service (la liste du dessous est filtree) et affiche
   un bandeau d'identite avec les actions du service.
   ------------------------------------------------------------------------ */
.care-svc-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.care-svc-page {
  --svc: #94a3b8;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 96px;
  padding: 13px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.care-svc-page::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: var(--svc);
  opacity: .55;
  transition: opacity .16s ease;
}

.care-svc-page:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.care-svc-page.is-open {
  border-color: var(--svc);
  /* Repli d'abord (navigateur sans color-mix : l'anneau reste visible), puis la teinte
     du service pour ceux qui le supportent. */
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .10);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--svc) 22%, transparent);
}

.care-svc-page.is-open::before {
  opacity: 1;
}

.care-svc-page.is-off {
  background: #f9fafb;
}

.care-svc-page.is-off .care-svc-page-name {
  color: #6b7280;
}

.care-svc-page-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
}

.care-svc-page-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--svc);
}

.care-svc-page-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
}

.care-svc-page-count {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.05;
  color: #111827;
}

.care-svc-page-sub {
  font-size: 12px;
  color: #6b7280;
}

.care-svc-page--all::before {
  background: linear-gradient(180deg, #8b5cf6, #0ea5e9);
}

.care-svc-page--new {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: #cbd5e1;
  background: #f9fafb;
  text-align: center;
}

.care-svc-page--new::before {
  display: none;
}

.care-svc-page-plus {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: #059669;
}

/* Bandeau d'identite de la page ouverte */
.care-svc-banner {
  --svc: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--svc);
  border-radius: 14px;
  background: #fff;
}

.care-svc-banner-idty {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.care-svc-banner-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--svc);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.care-svc-banner-idty strong {
  display: block;
  font-size: 16px;
  color: #111827;
}

.care-svc-banner-idty .care-addon-muted {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.care-svc-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Nuancier du formulaire de service */
.care-svc-colors {
  gap: 8px;
}

.care-svc-color input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.care-svc-color-chip {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;
}

.care-svc-color input:checked + .care-svc-color-chip {
  border-color: #111827;
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .care-svc-page, .care-svc-color-chip { transition: none; }
  .care-svc-page:hover { transform: none; }
}

/* Image de profil d'un service (facon page). Sans image, la pastille garde l'initiale sur
   fond de couleur : c'est la variante sans suffixe, deja stylee ailleurs. */
.care-svc-badge--img,
.care-svc-page-ava--img,
.care-svc-banner-badge--img {
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .10);
}

.care-svc-badge--img img,
.care-svc-page-ava--img img,
.care-svc-banner-badge--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pastille du service sur une tuile de page : meme gabarit que l'ancienne puce de couleur,
   en un peu plus grand pour laisser lire l'image. */
.care-svc-page-ava {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--svc);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

/* Tuile d'import dans le formulaire de service : carree, elle montre l'image telle qu'elle
   apparaitra dans la pastille. */
.care-media-tile--svc {
  width: 104px;
  height: 104px;
}

.care-media-tile--svc .care-media-filled--img img {
  border-radius: 12px;
  object-fit: cover;
}

/* Brouillon : etat distinct de « masque » dans la liste des publications. Ambre, comme les
   avertissements, pour dire « en attente » plutot que « retire ». */
.care-chip--draft {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

.care-chip--draft::before {
  background: #d97706 !important;
}

/* Barre d'actions du formulaire de publication : deux boutons d'enregistrement + Annuler.
   Le bouton « brouillon » est secondaire mais reste au meme niveau visuel que Publier. */
.care-addon-actions--split {
  flex-wrap: wrap;
  gap: 8px;
}

.care-btn-draft {
  display: inline-flex;
  align-items: center;
}

/* Recadreur en mode CARRE : meme composant que la photo de profil membre, mais le gabarit
   conserve est un carre a coins arrondis — exactement la forme de la pastille d'un service.
   Le voile alentour vient du meme box-shadow demesure que la version circulaire. */
.care-cropper-ring--square {
  border-radius: 16px;
}

/* Bouton « Recadrer » pose sur la tuile d'image du formulaire de service. Il ne doit pas
   masquer l'image : petit, en bas, et il n'apparait qu'au survol sur grand ecran. */
.care-svc-recadrer {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}

.care-media-tile--svc:hover .care-svc-recadrer,
.care-svc-recadrer:focus-visible {
  opacity: 1;
}

.care-svc-recadrer:hover {
  background: rgba(15, 23, 42, .88);
}

/* Sur mobile il n'y a pas de survol : le bouton reste visible. */
@media (hover: none) {
  .care-svc-recadrer { opacity: 1; }
}

/* Puce « Rediffusion » d'un webinaire : bleu discret, pour la distinguer du vert « a venir »
   et du violet Premium sans crier plus fort que le titre de la seance. */
.care-chip--replay {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* Bouton « Revoir la seance » : meme gabarit que le bouton du direct, ton neutre — revoir un
   enregistrement n'a pas l'urgence d'un direct en cours. */
.care-webinar-replay {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}


/* Lien pleine largeur vers l'autre page du compte (profil <-> abonnement), en pied de page.
   Les deux sujets sont separes : ce lien evite de repasser par le menu de la photo. */
.care-compte-lien {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.care-compte-lien:hover {
  border-color: #a7f3d0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.care-compte-lien-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #ecfdf5;
  color: #047857;
}

.care-compte-lien-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.care-compte-lien-txt strong {
  font-size: 15px;
  color: #111827;
}

.care-compte-lien-txt .care-addon-muted {
  font-size: 13px;
  line-height: 1.35;
}

.care-compte-lien-fleche {
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  color: #9ca3af;
}

@media (prefers-reduced-motion: reduce) {
  .care-compte-lien { transition: none; }
  .care-compte-lien:hover { transform: none; }
}

/* Compteur de vues des tableaux d'administration : chiffres alignés, et un zéro
   volontairement discret pour que l'œil aille aux contenus réellement regardés. */
.care-vues {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0f172a;
}

.care-vues[data-zero] {
  font-weight: 500;
  color: #94a3b8;
}

/* ------------------------------------------------------------------------- *
 * Débordement horizontal sur téléphone : les blocs « reveal »
 *
 * Le bundle compilé décale les blocs de 38 px AVANT leur apparition
 * (`.reveal-on-scroll.reveal-right { transform: translate3d(38px,26px,0) }`),
 * et ne remet le décalage à zéro qu'une fois la classe `is-visible` posée par
 * l'IntersectionObserver — donc seulement quand on a fait défiler jusqu'à eux.
 *
 * Sur une fenêtre de 375 px, ces 38 px sortent de l'écran : `body.scrollWidth`
 * mesure 394 px pour 375 px visibles. La page se laisse glisser latéralement et
 * découvre une bande vide, tant que l'on n'a pas défilé jusqu'en bas.
 *
 * On annule ici la seule composante HORIZONTALE, en dessous de la bascule
 * tablette. Le fondu et la montée verticale sont conservés : l'animation reste
 * la même à l'œil. Le `:not(.is-visible)` est indispensable — sans lui cette
 * règle, plus tardive dans la cascade, écraserait l'état révélé et figerait
 * les blocs à 26 px sous leur place.
 *
 * Le bundle neutralise déjà tout cela, mais uniquement sous
 * `@media (prefers-reduced-motion: reduce)` : cela ne couvre donc pas un
 * téléphone ordinaire.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .reveal-on-scroll.reveal-right:not(.is-visible),
  .reveal-on-scroll.reveal-left:not(.is-visible) {
    transform: translate3d(0, 26px, 0) scale(.985);
  }
}

/* ------------------------------------------------------------------------- *
 * Page /yoga : shorts CARE auto-hébergés à la place des vidéos YouTube
 *
 * Le gabarit du build prévoyait un bloc 16:9 (`aspect-video`). Nos shorts sont
 * VERTICAUX et portent leur titre incrusté : les afficher en 16:9 les recadrerait
 * et couperait le texte. On impose donc un cadre 9:16, la vidéo centrée sur un
 * fond sombre — même parti pris que la section Shorts de l'espace membre.
 *
 * `object-fit: contain` est la ceinture de sécurité : même si une source n'était
 * pas exactement en 9:16, elle serait affichée entière, jamais rognée.
 * ------------------------------------------------------------------------- */
.care-yoga-short {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  padding: 12px;
}

.care-yoga-short-video {
  display: block;
  aspect-ratio: 9 / 16;
  height: 460px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}

/* Sur téléphone la carte occupe toute la largeur : on laisse la largeur commander
   et on plafonne la hauteur, sinon une seule vidéo remplirait plus d'un écran. */
@media (max-width: 767px) {
  .care-yoga-short-video {
    height: auto;
    width: 100%;
    max-height: 72vh;
  }
}