/* ============================================================================
   STEM4ALL — Espace bénévoles & équipe
   Feuille de style du module Team. Alignée sur les maquettes de référence
   (docs/team/mockups/styles.css).
   Couleurs charte : rose principal #B42E5E, jaune ocre #D4A017.
   ========================================================================= */

:root {
  --team-rose: #B42E5E;
  --team-rose-soft: rgba(180, 46, 94, 0.08);
  --team-rose-mid: rgba(180, 46, 94, 0.18);
  --team-ocre: #D4A017;
  --team-ocre-soft: rgba(212, 160, 23, 0.12);
  --team-ink: #1f2330;
  --team-ink-soft: #555a6b;
  --team-muted: #8b91a3;
  --team-line: #e6e8ef;
  --team-bg: #fbf9f7;
  --team-card: #ffffff;
  --team-ok: #1f8a4c;
  --team-ok-soft: rgba(31, 138, 76, 0.12);
  --team-warn: #c47a00;
  --team-warn-soft: rgba(196, 122, 0, 0.15);
  --team-err: #b3261e;
  --team-err-soft: rgba(179, 38, 30, 0.12);
  --team-radius: 10px;
  --team-shadow: 0 1px 2px rgba(20, 25, 40, 0.04), 0 4px 12px rgba(20, 25, 40, 0.05);
  --team-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.team-app {
  margin: 0;
  font-family: var(--team-font);
  color: var(--team-ink);
  background: var(--team-bg);
  font-size: 14px;
  line-height: 1.5;
}
body.team-app * { box-sizing: border-box; }
body.team-app a { color: var(--team-rose); text-decoration: none; }
body.team-app a:hover { text-decoration: underline; }
body.team-app h1, body.team-app h2, body.team-app h3, body.team-app h4 {
  color: var(--team-ink);
  margin: 0 0 12px;
  font-weight: 600;
}
body.team-app h1 { font-size: 22px; }
body.team-app h2 { font-size: 18px; }
body.team-app h3 { font-size: 15px; }
body.team-app p { margin: 0 0 10px; color: var(--team-ink-soft); }
body.team-app code {
  background: #f0f0f4;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* ----- Layout ------------------------------------------------------------ */
.team-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.team-sidebar {
  background: #fff;
  border-right: 1px solid var(--team-line);
  padding: 18px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.team-brand {
  padding: 0 20px 18px;
  border-bottom: 1px solid var(--team-line);
  margin-bottom: 14px;
}
.team-brand strong {
  font-weight: 700;
  font-size: 16px;
  color: var(--team-rose);
  letter-spacing: 0.3px;
}
.team-brand small {
  display: block;
  margin-top: 2px;
  color: var(--team-muted);
}
.team-nav { list-style: none; padding: 0; margin: 0; }
.team-nav .label {
  display: block;
  padding: 16px 20px 6px;
  color: var(--team-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11px;
  font-weight: 600;
}
.team-nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--team-ink);
  border-left: 3px solid transparent;
  font-size: 13.5px;
}
.team-nav li a:hover {
  background: var(--team-rose-soft);
  text-decoration: none;
}
.team-nav li a.active {
  background: var(--team-rose-soft);
  border-left-color: var(--team-rose);
  color: var(--team-rose);
  font-weight: 600;
}
.team-nav li a .icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .15s ease;
}
.team-nav li a .icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.team-nav li a:hover .icon,
.team-nav li a.active .icon { opacity: 1; }

.team-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: #fff;
  border-bottom: 1px solid var(--team-line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.team-breadcrumb { color: var(--team-muted); font-size: 13px; }
.team-breadcrumb strong { color: var(--team-ink); }
.team-topbar .user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.team-content { padding: 26px 28px; }

/* Bouton hamburger (caché par défaut, visible en mobile) */
.team-burger {
  display: none;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--team-line);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  margin-right: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.team-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--team-ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.team-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.team-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.team-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Backdrop affiché derrière la sidebar drawer */
.team-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 40, 0.45);
  z-index: 49;
  opacity: 0;
  transition: opacity .2s ease;
}
.team-sidebar-backdrop.is-open { opacity: 1; }
body.team-no-scroll { overflow: hidden; }

/* ----- Avatar ------------------------------------------------------------ */
.team-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--team-rose), var(--team-ocre));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.team-avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.team-avatar.xl { width: 84px; height: 84px; font-size: 30px; }

/* Variante photo : <img class="team-avatar"> — garde le rond, recadre nicely */
.team-avatar.has-photo {
  background: #eef0f5;
  color: transparent;
  object-fit: cover;
  object-position: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ----- Édition de la fiche : aperçu photo ------------------------------- */
.team-photo-form .team-photo-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px dashed var(--team-line);
  border-radius: 12px;
  background: rgba(255,255,255,.6);
}
.team-photo-form .team-photo-preview img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.team-photo-form .team-photo-preview .placeholder {
  color: var(--team-ink-soft);
  font-size: 13px;
}

/* L'image existante affichée par VichImageType : la cadrer en rond, taille raisonnable */
.team-photo-form .vich-image,
.team-photo-form figure.vich-image {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 10px;
}
.team-photo-form .vich-image img,
.team-photo-form figure.vich-image img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ----- Page title -------------------------------------------------------- */
.team-page-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.team-page-title h1 { margin: 0; }
.team-page-title small {
  display: block;
  margin-top: 4px;
  color: var(--team-muted);
  font-size: 13px;
  font-weight: normal;
}
.team-page-title .actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ----- Card -------------------------------------------------------------- */
.team-card {
  background: var(--team-card);
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
  padding: 20px;
  box-shadow: var(--team-shadow);
}
.team-card + .team-card { margin-top: 16px; }
/* ...sauf à l'intérieur d'une grille : l'espacement y est déjà assuré par le
   gap, et cette marge décalait la 2e carte de la 1re rangée de 16px — la
   première carte du DOM étant la seule sans sœur précédente, elle seule
   restait alignée. Le décalage ne se voyait donc que sur la rangée du haut. */
.team-grid > .team-card + .team-card { margin-top: 0; }
.team-card h2 { margin-bottom: 14px; }

.team-grid { display: grid; gap: 16px; }
.team-grid-2 { grid-template-columns: 1fr 1fr; }
.team-grid-3 { grid-template-columns: repeat(3, 1fr); }
.team-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .team-grid-2, .team-grid-3, .team-grid-4 { grid-template-columns: 1fr; }
}

/* ----- KPI --------------------------------------------------------------- */
.team-kpi {
  background: var(--team-card);
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
  padding: 16px 18px;
}
.team-kpi .v { font-size: 26px; font-weight: 700; color: var(--team-ink); }
.team-kpi .l {
  font-size: 12px;
  color: var(--team-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.team-kpi.rose .v { color: var(--team-rose); }
.team-kpi.ocre .v { color: var(--team-ocre); }

/* ----- Buttons ----------------------------------------------------------- */
/* Spécificité élevée pour battre le sélecteur body.team-app a qui colorie
   tous les liens en rose et écrase la couleur "white" des boutons primaires. */
body.team-app .team-btn,
body.team-app a.team-btn,
body.team-app button.team-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  font-family: inherit;
  line-height: 1.2;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
body.team-app .team-btn-primary,
body.team-app a.team-btn-primary,
body.team-app button.team-btn-primary {
  background: var(--team-rose);
  color: #ffffff !important;
  border-color: var(--team-rose);
}
body.team-app .team-btn-primary:hover,
body.team-app a.team-btn-primary:hover,
body.team-app button.team-btn-primary:hover {
  background: #8a2347;
  border-color: #8a2347;
  color: #ffffff !important;
}
body.team-app .team-btn-secondary,
body.team-app a.team-btn-secondary,
body.team-app button.team-btn-secondary {
  background: #ffffff;
  color: var(--team-ink) !important;
  border-color: var(--team-line);
}
body.team-app .team-btn-secondary:hover,
body.team-app a.team-btn-secondary:hover,
body.team-app button.team-btn-secondary:hover {
  background: #f7f7f9;
  color: var(--team-ink) !important;
}
body.team-app .team-btn-ghost,
body.team-app a.team-btn-ghost,
body.team-app button.team-btn-ghost {
  background: transparent;
  color: var(--team-rose) !important;
}
body.team-app .team-btn-sm { padding: 5px 10px; font-size: 12px; }

/* ----- Badges ------------------------------------------------------------ */
.team-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.team-badge-rose  { background: var(--team-rose-soft);  color: var(--team-rose); }
.team-badge-ocre  { background: var(--team-ocre-soft);  color: var(--team-ocre); }
.team-badge-ok    { background: var(--team-ok-soft);    color: var(--team-ok); }
.team-badge-warn  { background: var(--team-warn-soft);  color: var(--team-warn); }
.team-badge-err   { background: var(--team-err-soft);   color: var(--team-err); }
.team-badge-muted { background: #eef0f5;                color: var(--team-ink-soft); }

/* ----- Forms ------------------------------------------------------------- */
.team-field { margin-bottom: 14px; }
.team-field label {
  display: block;
  font-size: 12px;
  color: var(--team-ink-soft);
  margin-bottom: 4px;
  font-weight: 500;
}
.team-field label .req { color: var(--team-err); margin-left: 2px; }
.team-form input[type=text],
.team-form input[type=email],
.team-form input[type=tel],
.team-form input[type=password],
.team-form input[type=number],
.team-form input[type=date],
.team-form select,
.team-form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--team-line);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: var(--team-font);
  background: white;
}
.team-form textarea { min-height: 90px; }
.team-form input:focus, .team-form select:focus, .team-form textarea:focus {
  border-color: var(--team-rose);
  outline: none;
  box-shadow: 0 0 0 3px var(--team-rose-soft);
}

/* ----- Contrôles natifs hors .team-form ----------------------------------
   Les règles ci-dessus ne couvrent que les formulaires Symfony rendus dans un
   .team-form. Les <select> et <input> écrits directement dans une page (barres
   de filtres, actions en ligne) gardaient l'apparence native : anneau de focus
   bleu, option surlignée en bleu, sélection de texte bleue — trois bleus qui
   n'appartiennent pas à la charte.

   Ces sélecteurs sont volontairement sur les éléments : team.css n'est chargée
   que par les pages /equipe, et les contrôles déjà stylés par une classe
   (.team-filters select, .team-library-filters select…) l'emportent par
   spécificité.
   ------------------------------------------------------------------------- */

/* Cases à cocher, boutons radio, curseurs : rose au lieu du bleu système. */
.team-shell { accent-color: var(--team-rose); }

/* :where() ne pèse rien en spécificité : ces déclarations ne sont qu'une base.
   Sans lui, `.team-shell input:not(...)` pèserait plus lourd que
   `.team-form input[type=email]` et reprendrait la main sur tous les
   formulaires du module — un correctif de filtre repeindrait l'application. */
.team-shell :where(select),
.team-shell :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])),
.team-shell :where(textarea) {
  border: 1px solid var(--team-line);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--team-font);
  color: var(--team-ink);
  background: var(--team-card);
}

.team-shell :where(select, input, textarea):focus,
.team-shell :where(select, input, textarea):focus-visible {
  border-color: var(--team-rose);
  outline: none;
  box-shadow: 0 0 0 3px var(--team-rose-soft);
}

/* Champ de formulaire pleine largeur.
   La classe était posée sur cinq champs du module sans exister nulle part.
   Un <textarea> sans largeur déclarée retombe sur son attribut `cols`, soit
   une vingtaine de caractères : d'où la colonne étroite des écrans de
   diffusion, alors que le libellé et l'aide occupaient toute la ligne. */
.team-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Le libellé qui va avec. Un <label> est inline par défaut : sans cette
   règle il se colle au champ qui le suit au lieu de le surplomber. */
/* Libellé destiné aux seuls lecteurs d'écran : il nomme un champ que la mise
   en page laisse sans étiquette visible, sans occuper de place. */
.team-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.team-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--team-ink);
}

/* Un mot d'introduction s'écrit sur plusieurs lignes et se relit avant
   l'envoi. On laisse donc l'ajuster en hauteur — mais jamais en largeur,
   qu'une poignée de redimensionnement ferait déborder de la carte. */
textarea.team-input {
  min-height: 104px;
  padding: 9px 11px;
  line-height: 1.55;
  resize: vertical;
}

/* Option retenue dans la liste native. Firefox le respecte ; Chrome et Edge
   sous Windows dessinent le popup eux-mêmes et l'ignorent — d'où le composant
   .team-select ci-dessous, qui prend le relais dès que JavaScript est là. */
.team-shell option:checked {
  background: var(--team-rose-mid);
  color: var(--team-ink);
}

/* ----- Menu déroulant maison (public/js/team-select.js) -------------------
   Le <select> natif reste dans le DOM et garde la valeur : sans JavaScript,
   c'est lui qui s'affiche et tout continue de fonctionner. Avec, il passe en
   retrait et cette liste-ci le remplace visuellement — seul moyen d'obtenir
   une surbrillance aux couleurs de la charte plutôt que le bleu système.
   ------------------------------------------------------------------------- */
.team-select { position: relative; display: inline-block; min-width: 150px; vertical-align: top; }

/* Dans un formulaire, les champs occupent toute la largeur. Le script ne
   recopie que le style inline du select : cette règle prend le relais quand la
   largeur vient de la feuille de style. */
.team-form .team-select,
.team-field .team-select { display: block; width: 100%; }

/* Retiré du flux sans disparaître : il doit rester soumis avec le formulaire. */
.team-select > select {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.team-select-button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--team-line);
  border-radius: 6px;
  background: var(--team-card);
  color: var(--team-ink);
  font-family: var(--team-font);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.team-select-button:hover { border-color: var(--team-rose-mid); }
.team-select-button:focus-visible,
.team-select.is-open .team-select-button {
  border-color: var(--team-rose);
  outline: none;
  box-shadow: 0 0 0 3px var(--team-rose-soft);
}
.team-select-button:disabled { opacity: .55; cursor: not-allowed; }
.team-select.is-placeholder .team-select-label { color: var(--team-muted); }
.team-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-select-caret { flex: none; font-size: 10px; color: var(--team-muted); }
.team-select.is-open .team-select-caret { color: var(--team-rose); }

.team-select-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--team-card);
  border: 1px solid var(--team-line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20, 25, 40, .12);
}
.team-select-option {
  padding: 7px 9px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--team-ink);
  cursor: pointer;
}
/* La surbrillance recherchée : rose, jamais le bleu du système. */
.team-select-option.is-active { background: var(--team-rose-soft); }
.team-select-option.is-selected { color: var(--team-rose); font-weight: 600; }
.team-select-option.is-selected.is-active { background: var(--team-rose-mid); }
.team-select-option[aria-disabled="true"] { color: var(--team-muted); cursor: not-allowed; }

/* Sélection de texte à la souris. */
.team-shell ::selection {
  background: var(--team-rose-mid);
  color: var(--team-ink);
}
.team-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ----- Modale de confirmation (élément <dialog> natif) -------------- */
.team-modal {
  border: 0;
  border-radius: 14px;
  padding: 26px 28px;
  max-width: 520px;
  width: calc(100vw - 32px);
  background: #fff;
  color: var(--team-ink);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  font-family: var(--team-font);
}
.team-modal::backdrop {
  background: rgba(15, 17, 26, 0.55);
  backdrop-filter: blur(2px);
}
.team-modal[open] {
  animation: team-modal-in 0.18s ease-out;
}
@keyframes team-modal-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.team-modal h3 {
  font-size: 17px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.team-modal p { line-height: 1.5; }

/* ----- Choices avec icônes Lucide (catégorie note de frais, etc.) ----- */
.team-icon-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.team-icon-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1.5px solid var(--team-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: all .15s ease;
  text-align: center;
}
.team-icon-choice input[type=radio] {
  /* Cache le radio natif tout en restant accessible au clavier */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.team-icon-choice .team-icon-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--team-ink-soft);
  transition: color .15s ease, transform .15s ease;
}
.team-icon-choice .team-icon-choice-icon svg {
  width: 24px;
  height: 24px;
}
.team-icon-choice .team-icon-choice-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--team-ink-soft);
  transition: color .15s ease;
}
.team-icon-choice:hover {
  border-color: var(--team-rose);
  background: var(--team-rose-soft);
}
.team-icon-choice:hover .team-icon-choice-icon,
.team-icon-choice:hover .team-icon-choice-label {
  color: var(--team-rose);
}
.team-icon-choice:has(input:checked),
.team-icon-choice.is-active {
  border-color: var(--team-rose);
  background: var(--team-rose);
  box-shadow: 0 2px 6px rgba(180, 46, 94, 0.25);
}
.team-icon-choice:has(input:checked) .team-icon-choice-icon,
.team-icon-choice:has(input:checked) .team-icon-choice-label,
.team-icon-choice.is-active .team-icon-choice-icon,
.team-icon-choice.is-active .team-icon-choice-label {
  color: #fff;
}
.team-icon-choice:has(input:checked) .team-icon-choice-icon {
  transform: scale(1.1);
}
.team-icon-choice:focus-within {
  outline: 3px solid var(--team-rose-soft);
  outline-offset: 2px;
}

/* ----- Filters ----------------------------------------------------------- */
.team-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: white;
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  align-items: center;
}
.team-filters select,
.team-filters input[type=text],
.team-filters input[type=search] {
  padding: 7px 10px;
  border: 1px solid var(--team-line);
  border-radius: 6px;
  font-size: 13px;
  background: white;
  font-family: var(--team-font);
}
.team-filters input[type=text],
.team-filters input[type=search] { flex: 1; min-width: 200px; }

/* ----- Table ------------------------------------------------------------- */
.team-list {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
  overflow: hidden;
}
.team-list th, .team-list td {
  padding: 11px 14px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--team-line);
}
.team-list th {
  background: #f7f7f9;
  color: var(--team-ink-soft);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.team-list tr:last-child td { border-bottom: none; }
.team-list tr:hover td { background: var(--team-rose-soft); }

/* Lignes cliquables. Le tableau de suivi des partenariats ouvre une fiche au
   clic, mais rien ne le disait : le nom était un lien discret au milieu de
   huit colonnes, et personne ne pensait à cliquer dessus.

   Le lien reste dans la cellule, c'est lui qui porte le clavier, le clic
   milieu et l'ouverture en nouvel onglet. La ligne n'est qu'une cible plus
   large, et le chevron dit où elle mène. */
.team-list[data-team-rowlink] tbody tr { cursor: pointer; }
.team-list[data-team-rowlink] tbody tr:focus-within td { background: var(--team-rose-soft); }
.team-list[data-team-rowlink] tbody tr:hover .team-rowlink-label { text-decoration: underline; }
.team-rowlink-cue {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  opacity: .45;
  transition: opacity .12s ease, transform .12s ease;
}
.team-rowlink-cue svg { width: 14px; height: 14px; }
.team-list[data-team-rowlink] tbody tr:hover .team-rowlink-cue,
.team-list[data-team-rowlink] tbody tr:focus-within .team-rowlink-cue {
  opacity: 1;
  transform: translateX(2px);
}

/* ----- Progress ---------------------------------------------------------- */
.team-progress {
  background: #eef0f5;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
}
.team-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--team-rose), var(--team-ocre));
}
.team-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--team-ink-soft);
}

/* ----- Notice / banner --------------------------------------------------- */
.team-notice {
  background: var(--team-ocre-soft);
  border-left: 3px solid var(--team-ocre);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  color: #8a6800;
}
.team-notice.lock {
  background: var(--team-rose-soft);
  border-left-color: var(--team-rose);
  color: var(--team-rose);
}
.team-notice.success {
  background: var(--team-ok-soft);
  border-left-color: var(--team-ok);
  color: var(--team-ok);
}
.team-notice.error {
  background: var(--team-err-soft);
  border-left-color: var(--team-err);
  color: var(--team-err);
}

/* ----- Onboarding steps -------------------------------------------------- */
.team-steps { display: flex; flex-direction: column; gap: 10px; }
.team-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
}
.team-step .num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef0f5;
  color: var(--team-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.team-step.done {
  border-color: var(--team-ok);
  background: rgba(31, 138, 76, 0.04);
}
.team-step.done .num { background: var(--team-ok); color: white; }
.team-step.current {
  border-color: var(--team-rose);
  background: var(--team-rose-soft);
}
.team-step.current .num { background: var(--team-rose); color: white; }
.team-step .body h3 { margin: 0 0 4px; font-size: 14px; }
.team-step .body p { margin: 0; font-size: 13px; }
.team-step .actions { margin-top: 8px; }

/* ----- Module ADN cards -------------------------------------------------- */
.team-module-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: white;
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
  padding: 16px;
  transition: border-color 0.15s;
  text-decoration: none !important;
  color: inherit !important;
}
.team-module-card:hover { border-color: var(--team-rose); }
.team-module-card .icon-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--team-rose-soft);
  color: var(--team-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.team-module-card.done { border-color: var(--team-ok); }
.team-module-card.done .icon-box {
  background: var(--team-ok-soft);
  color: var(--team-ok);
}
.team-module-card h3 { margin: 0 0 4px; font-size: 14px; }
.team-module-card p { margin: 0 0 6px; font-size: 13px; }

/* ----- Member cards (annuaire) ------------------------------------------ */
.team-member-card {
  background: white;
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
  padding: 16px;
  text-align: center;
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
}
.team-member-card:hover {
  border-color: var(--team-rose);
  transform: translateY(-2px);
}
.team-member-card .team-avatar { margin: 0 auto 10px; }
.team-member-card h3 { margin: 0 0 2px; font-size: 14px; }
.team-member-card .role {
  color: var(--team-muted);
  font-size: 12px;
  margin-bottom: 8px;
  display: block;
}

/* ----- Quiz options ------------------------------------------------------ */
.team-q-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13.5px;
}
.team-q-option:hover {
  border-color: var(--team-rose);
  background: var(--team-rose-soft);
}
.team-q-option input { margin-top: 3px; }

/* ----- OPCO portal layout ----------------------------------------------- */
.team-opco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 900px) { .team-opco { grid-template-columns: 1fr; } }
.team-opco .col {
  background: white;
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
  padding: 18px;
}
.team-opco h2 { display: flex; align-items: center; gap: 8px; }
.team-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--team-line);
}
.team-doc-row:last-child { border-bottom: none; }
.team-doc-row .name { font-size: 13px; }
.team-doc-row .name .req {
  color: var(--team-err);
  font-weight: 700;
  margin-left: 3px;
}
.team-doc-row .meta { font-size: 11.5px; color: var(--team-muted); }

/* ----- Calendar (planning événements) ------------------------------------ */
.team-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--team-line);
  border: 1px solid var(--team-line);
  border-radius: var(--team-radius);
  overflow: hidden;
}
.team-cal-grid .day-h {
  background: #f7f7f9;
  padding: 10px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--team-ink-soft);
  font-weight: 600;
  text-align: center;
}
.team-cal-grid .day {
  background: white;
  padding: 10px 8px;
  min-height: 96px;
  font-size: 12.5px;
}
.team-cal-grid .day .num {
  color: var(--team-ink-soft);
  font-weight: 600;
  margin-bottom: 6px;
}
.team-cal-grid .day.other { background: #fbfbfd; opacity: 0.5; }
.team-cal-grid .day.today .num {
  background: var(--team-rose);
  color: white;
  padding: 2px 6px;
  border-radius: 99px;
  display: inline-block;
}
.team-event-pill {
  display: block;
  background: var(--team-rose-soft);
  color: var(--team-rose);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-bottom: 3px;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-event-pill.ocre { background: var(--team-ocre-soft); color: var(--team-ocre); }
.team-event-pill.green { background: var(--team-ok-soft); color: var(--team-ok); }
.team-event-pill.muted { background: #eef0f5; color: var(--team-ink-soft); }

/* ----- Util classes ------------------------------------------------------ */
.team-text-muted { color: var(--team-muted); }
.team-text-rose  { color: var(--team-rose); }
.team-text-ok    { color: var(--team-ok); }
.team-text-warn  { color: var(--team-warn); }
.team-text-err   { color: var(--team-err); }
.team-mt-0 { margin-top: 0; }
.team-mt-2 { margin-top: 8px; }
.team-mt-3 { margin-top: 16px; }
.team-mt-4 { margin-top: 24px; }

/* ----- Guide d'utilisation ---------------------------------------------- */
.team-guide { max-width: 920px; margin: 0 auto; }
.team-guide .guide-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--team-rose-soft), #fff 80%);
  border-left: 4px solid var(--team-rose);
}
.team-guide .guide-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.team-guide .guide-toc {
  background: #fff;
  border: 1px solid var(--team-line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 13px;
}
.team-guide .guide-toc strong {
  display: block;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--team-ink-soft);
  margin-bottom: 8px;
}
.team-guide .guide-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 24px;
}
.team-guide .guide-toc li { margin: 2px 0; break-inside: avoid; }
.team-guide .guide-toc a {
  color: var(--team-ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.team-guide .guide-toc a:hover {
  color: var(--team-rose);
  border-bottom-color: var(--team-rose);
}
.team-guide .guide-section {
  scroll-margin-top: 80px;
  margin-bottom: 14px;
  transition: box-shadow .25s ease;
}
.team-guide .guide-section.flash-highlight {
  box-shadow: 0 0 0 3px var(--team-rose-soft), 0 4px 14px rgba(180,46,94,.15);
}
.team-guide .guide-section h2 { margin-top: 0; }
.team-guide .guide-section h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--team-rose);
  margin: 18px 0 6px;
}
.team-guide .guide-section p,
.team-guide .guide-section ul,
.team-guide .guide-section ol { font-size: 14px; line-height: 1.65; }
.team-guide .guide-section ul ul,
.team-guide .guide-section ol ol { font-size: 13px; }
.team-guide .guide-section a.team-btn { margin-top: 10px; }
.team-guide .guide-section-special {
  border-left: 3px solid var(--team-ocre);
  background: linear-gradient(180deg, rgba(212,160,23,0.04), #fff 70%);
}
.team-guide .guide-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
  list-style: none;
  padding: 0;
}
.team-guide .guide-shortcuts li a {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--team-ink-soft);
  background: #fff;
  transition: all .15s ease;
}
.team-guide .guide-shortcuts li a:hover {
  border-color: var(--team-rose);
  color: var(--team-rose);
  background: var(--team-rose-soft);
}
@media (max-width: 720px) {
  .team-guide .guide-toc ol { columns: 1; }
}

/* ============ Guide v2 — sections collapsibles + recherche ============== */
.team-guide-v2 { max-width: 920px; margin: 0 auto; }

/* Barre d'outils — card dédiée recherche + actions globales */
.team-guide-v2 .guide-toolbar-card {
  background: #fff;
  border: 1px solid var(--team-line);
  border-radius: 14px;
  padding: 16px 18px 12px;
  margin: 0 0 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.team-app .team-guide-v2 .guide-cat-pill,
body.team-app button.guide-cat-pill {
  -webkit-appearance: none;
  appearance: none;
  background: #fafbfc;
  border: 1.5px solid var(--team-line);
  color: var(--team-ink-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s;
}
body.team-app .team-guide-v2 .guide-cat-pill:hover,
body.team-app button.guide-cat-pill:hover {
  border-color: var(--team-rose);
  color: var(--team-rose);
  background: #fff;
}
body.team-app .team-guide-v2 .guide-cat-pill.is-active,
body.team-app button.guide-cat-pill.is-active {
  background: var(--team-rose);
  border-color: var(--team-rose);
  color: #fff;
}
.team-guide-v2 .guide-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.team-guide-v2 .guide-search {
  flex: 1 1 320px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fafbfc;
  border: 1.5px solid var(--team-line);
  border-radius: 12px;
  padding: 2px 10px 2px 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.team-guide-v2 .guide-search:focus-within {
  border-color: var(--team-rose);
  background: #fff;
  box-shadow: 0 0 0 4px var(--team-rose-soft);
}
.team-guide-v2 .guide-search-icon {
  display: inline-flex;
  align-items: center;
  color: var(--team-ink-soft);
}
.team-guide-v2 .guide-search:focus-within .guide-search-icon { color: var(--team-rose); }
.team-guide-v2 .guide-search-icon .team-h-icon { margin-right: 0; }
.team-guide-v2 .guide-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 12px 0;
  font-size: 14px;
  color: var(--team-ink);
}
.team-guide-v2 .guide-search input::placeholder {
  color: var(--team-ink-soft);
  opacity: .8;
}
.team-guide-v2 .guide-search-shortcut {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--team-ink-soft);
  background: #fff;
  border: 1px solid var(--team-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.team-guide-v2 .guide-search:focus-within .guide-search-shortcut { display: none; }
.team-guide-v2 .guide-search-clear {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--team-ink-soft);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .12s ease;
}
.team-guide-v2 .guide-search-clear:hover {
  color: #fff;
  background: var(--team-rose);
}
.team-guide-v2 .guide-toolbar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.team-guide-v2 .guide-search-hint {
  font-size: 12px;
  color: var(--team-ink-soft);
  margin: 10px 4px 0;
  line-height: 1.5;
}
.team-guide-v2 .guide-search-hint em {
  font-style: normal;
  color: var(--team-rose);
  background: var(--team-rose-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 11.5px;
}
.team-guide-v2 .guide-search-hint kbd {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--team-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--team-ink);
}
.team-guide-v2 .guide-search-empty {
  text-align: center;
  color: var(--team-ink-soft);
  font-size: 13px;
  padding: 20px 12px;
  background: var(--team-rose-soft);
  border-radius: 8px;
  margin: 8px 0 14px;
}

/* Sommaire — card mise en avant avec dégradé rose marqué */
.team-guide-v2 .guide-toc-grouped {
  background:
    radial-gradient(circle at top right, rgba(180, 46, 94, 0.06), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--team-rose-soft) 100%);
  border: 1px solid rgba(180, 46, 94, 0.2);
  border-left: 4px solid var(--team-rose);
  border-radius: 14px;
  padding: 22px 24px 20px;
  margin: 0 0 22px;
  box-shadow: 0 4px 16px rgba(180, 46, 94, 0.08), 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
}
.team-guide-v2 .guide-toc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(180, 46, 94, 0.12);
}
.team-guide-v2 .guide-toc-title {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--team-rose);
  letter-spacing: -.01em;
}
.team-guide-v2 .guide-toc-title .team-h-icon { margin-right: 4px; }
.team-guide-v2 .guide-toc-subtitle {
  font-size: 12px;
  color: var(--team-ink-soft);
  font-style: italic;
}
.team-guide-v2 .guide-toc-group {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px 18px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(180, 46, 94, 0.1);
}
.team-guide-v2 .guide-toc-group:last-child { border-bottom: 0; padding-bottom: 0; }
.team-guide-v2 .guide-toc-group:first-of-type { padding-top: 0; }
.team-guide-v2 .guide-toc-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--team-ink-soft);
  padding-top: 8px;
  position: relative;
}
.team-guide-v2 .guide-toc-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--team-rose);
  margin-right: 8px;
  vertical-align: 1px;
}
.team-guide-v2 .guide-toc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.team-guide-v2 .guide-toc-pills a,
.team-guide-v2 .guide-toc-pills a:hover,
.team-guide-v2 .guide-toc-pills a:focus,
.team-guide-v2 .guide-toc-pills a:active,
.team-guide-v2 .guide-toc-pills a:visited {
  text-decoration: none;
}
.team-guide-v2 .guide-toc-pills a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--team-line);
  border-radius: 99px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--team-ink-soft);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
  position: relative;
}
.team-guide-v2 .guide-toc-pills a:hover {
  border-color: var(--team-rose);
  color: var(--team-rose);
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(180, 46, 94, 0.12);
}
.team-guide-v2 .guide-toc-pills a:active { transform: translateY(0); box-shadow: none; }
.team-guide-v2 .guide-toc-pills a .team-h-icon { margin-right: 0; }

/* État actif : la section pointée est ouverte */
.team-guide-v2 .guide-toc-pills a.is-active {
  background: var(--team-rose);
  border-color: var(--team-rose);
  color: #fff;
  box-shadow: 0 2px 6px rgba(180, 46, 94, 0.25);
}
.team-guide-v2 .guide-toc-pills a.is-active .team-h-icon { color: #fff; }

/* Pills "selon ton rôle" : teinte ocre subtile pour les distinguer */
.team-guide-v2 .guide-toc-pills a.pill-special {
  background: rgba(212, 160, 23, 0.06);
  border-color: rgba(212, 160, 23, 0.25);
}
.team-guide-v2 .guide-toc-pills a.pill-special:hover {
  border-color: var(--team-ocre);
  color: var(--team-ocre);
  box-shadow: 0 4px 10px rgba(212, 160, 23, 0.18);
}
.team-guide-v2 .guide-toc-pills a.pill-special.is-active {
  background: var(--team-ocre);
  border-color: var(--team-ocre);
  color: #fff;
  box-shadow: 0 2px 6px rgba(212, 160, 23, 0.3);
}
.team-guide-v2 .guide-toc-pills a.pill-special.is-active .team-h-icon { color: #fff; }

/* Pill "ADN à faire" : pastille rouge clignotante */
.team-guide-v2 .guide-toc-pills a.is-todo {
  border-color: var(--team-err, #c74343);
  color: var(--team-err, #c74343);
  background: rgba(199, 67, 67, 0.04);
}
.team-guide-v2 .guide-toc-pills a.is-todo:hover {
  border-color: var(--team-err, #c74343);
  color: #fff;
  background: var(--team-err, #c74343);
  box-shadow: 0 4px 10px rgba(199, 67, 67, 0.25);
}
.team-guide-v2 .guide-toc-pills a.is-todo:hover .team-h-icon { color: #fff; }
/* Variante prioritaire : à la fois active (section ouverte) ET à faire.
   Doit dominer .is-active pour rester lisible — d'où le fond rouge plein. */
.team-guide-v2 .guide-toc-pills a.is-todo.is-active {
  background: var(--team-err, #c74343);
  border-color: var(--team-err, #c74343);
  color: #fff;
  box-shadow: 0 2px 6px rgba(199, 67, 67, 0.3);
}
.team-guide-v2 .guide-toc-pills a.is-todo.is-active .team-h-icon { color: #fff; }
.team-guide-v2 .guide-toc-pills a .pill-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--team-err, #c74343);
  margin-left: 2px;
  animation: guide-pill-pulse 1.6s ease-in-out infinite;
}
/* Sur fond rouge plein, la pastille passe en blanc pour rester visible */
.team-guide-v2 .guide-toc-pills a.is-todo.is-active .pill-dot,
.team-guide-v2 .guide-toc-pills a.is-todo:hover .pill-dot {
  background: #fff;
}
@keyframes guide-pill-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.3); }
}

@media (max-width: 720px) {
  .team-guide-v2 .guide-toc-group {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 0;
  }
  .team-guide-v2 .guide-toc-label { padding-top: 0; }
}

/* Sections collapsibles via <details>/<summary> */
.team-guide-v2 .guide-section {
  scroll-margin-top: 80px;
  margin-bottom: 10px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.team-guide-v2 .guide-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 56px 14px 18px;
  position: relative;
  user-select: none;
  border-radius: 12px;
  transition: background .15s ease;
}
.team-guide-v2 .guide-section > summary::-webkit-details-marker { display: none; }
.team-guide-v2 .guide-section > summary:hover { background: var(--team-rose-soft); }
.team-guide-v2 .guide-section > summary::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--team-ink-soft);
  border-bottom: 2px solid var(--team-ink-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.team-guide-v2 .guide-section[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.team-guide-v2 .guide-section > summary > h2 {
  margin: 0;
  font-size: 18px;
  display: inline;
}
.team-guide-v2 .guide-section .guide-section-body {
  padding: 0 18px 16px;
  border-top: 1px solid var(--team-line);
  margin-top: 4px;
  padding-top: 14px;
}
.team-guide-v2 .guide-section h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--team-rose);
  margin: 18px 0 6px;
}
.team-guide-v2 .guide-section p,
.team-guide-v2 .guide-section ul,
.team-guide-v2 .guide-section ol { font-size: 14px; line-height: 1.65; }
.team-guide-v2 .guide-section ul ul,
.team-guide-v2 .guide-section ol ol { font-size: 13px; }
.team-guide-v2 .guide-section a.team-btn { margin-top: 10px; }

.team-guide-v2 .guide-section.guide-section-special {
  border-left: 3px solid var(--team-ocre);
}

/* Hero (réutilise les styles existants) */
.team-guide-v2 .guide-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--team-rose-soft), #fff 80%);
  border-left: 4px solid var(--team-rose);
}
.team-guide-v2 .guide-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Raccourcis (réutilise) */
.team-guide-v2 .guide-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
  list-style: none;
  padding: 0;
}
.team-guide-v2 .guide-shortcuts li a {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--team-ink-soft);
  background: #fff;
  transition: all .15s ease;
}
.team-guide-v2 .guide-shortcuts li a:hover {
  border-color: var(--team-rose);
  color: var(--team-rose);
  background: var(--team-rose-soft);
}

@media (max-width: 720px) {
  .team-guide-v2 .guide-toolbar { flex-direction: column; align-items: stretch; }
  .team-guide-v2 .guide-toolbar-actions { justify-content: flex-end; }
}

/* ----- Préfixe d'icône Lucide pour les titres (h1, h2, h3) -------------- */
.team-h-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -3px;
  color: var(--team-rose);
  margin-right: 6px;
}
.team-h-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
h1 .team-h-icon svg { width: 22px; height: 22px; }
h3 .team-h-icon svg { width: 16px; height: 16px; }

/* Sur un aplat rose, l'icône suit la couleur du texte.
   Le rose codé en dur ci-dessus la faisait disparaître partout où le fond
   était ce même rose : l'icône du bouton primaire (« Envoyer la diffusion »)
   et celle de la pastille active du sommaire du guide étaient dessinées,
   mais invisibles. */
.team-btn-primary .team-h-icon,
.team-guide-v2 .guide-toc-pills a.is-active .team-h-icon {
  color: inherit;
}

/* Dans un bouton, l'icône est une partie du libellé, pas une vignette :
   elle se cale sur la hauteur de la ligne plutôt que sur un décalage fixe
   pensé pour les titres. */
.team-btn .team-h-icon {
  vertical-align: -2px;
  margin-right: 5px;
}
.team-btn .team-h-icon svg { width: 15px; height: 15px; }
.team-btn-sm .team-h-icon svg { width: 14px; height: 14px; }


/* ----- Bibliothèque : filtres et actions document ----------------------- */
.team-library-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.team-library-filters .search-input {
  flex: 1 1 240px;
  position: relative;
}
.team-library-filters .search-input .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--team-ink-soft);
  display: inline-flex;
}
.team-library-filters .search-input .icon svg { width: 16px; height: 16px; }
.team-library-filters .search-input input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--team-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  transition: all .15s ease;
}
.team-library-filters .search-input input:focus {
  outline: none;
  border-color: var(--team-rose);
  box-shadow: 0 0 0 3px var(--team-rose-soft);
}
.team-library-filters select {
  padding: 9px 12px;
  border: 1px solid var(--team-line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.team-library-filters select:focus {
  outline: none;
  border-color: var(--team-rose);
}

.library-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.library-action-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--team-rose);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s ease;
}
.library-action-link svg { width: 14px; height: 14px; }
.library-action-link:hover { background: var(--team-rose-soft); }
.library-action-delete {
  background: none;
  border: none;
  color: var(--team-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: color .15s ease;
}
.library-action-delete:hover { color: var(--team-err); }
.library-action-delete svg { width: 14px; height: 14px; }

/* ----- Communication : onglets, recherche, filtres, annonces ------------ */
.team-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--team-line);
  margin-bottom: 14px;
}
.team-tabs a {
  display: inline-block;
  padding: 9px 16px;
  border-bottom: 2px solid transparent;
  color: var(--team-ink-soft);
  font-size: 13.5px;
  text-decoration: none;
  font-weight: 500;
  transition: all .15s ease;
}
.team-tabs a:hover { color: var(--team-rose); }
.team-tabs a.active {
  border-bottom-color: var(--team-rose);
  color: var(--team-rose);
  font-weight: 600;
}

/* Bandeau de recherche & filtres (sticky en haut du fil) */
.team-feed-filters {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--team-bg, #fbf9f7);
  padding: 10px 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--team-line);
}
.team-feed-filters .search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.team-feed-filters .search-input {
  flex: 1;
  position: relative;
}
.team-feed-filters .search-input .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--team-ink-soft);
  width: 16px;
  height: 16px;
  display: inline-flex;
}
.team-feed-filters .search-input .icon svg { width: 16px; height: 16px; }
.team-feed-filters .search-input input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--team-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  transition: all .15s ease;
}
.team-feed-filters .search-input input:focus {
  outline: none;
  border-color: var(--team-rose);
  box-shadow: 0 0 0 3px var(--team-rose-soft);
}
.team-feed-filters .toggle-filters {
  white-space: nowrap;
  font-size: 13px;
  padding: 9px 14px;
}

.team-feed-filters .advanced-filters {
  display: none;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--team-line);
  border-radius: 10px;
  align-items: end;
}
.team-feed-filters .advanced-filters.open { display: flex; }
.team-feed-filters .advanced-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 180px;
  font-size: 12px;
  color: var(--team-ink-soft);
}
.team-feed-filters .advanced-filters label > span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}
.team-feed-filters .advanced-filters select {
  padding: 8px 10px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.team-feed-filters .advanced-filters select:focus {
  outline: none;
  border-color: var(--team-rose);
}
/* Segmented control pour le tri */
.team-feed-filters .sort-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 100%;
}
.team-feed-filters .sort-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  color: var(--team-ink-soft);
}
.team-feed-filters .segmented {
  display: inline-flex;
  border: 1px solid var(--team-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  width: fit-content;
}
.team-feed-filters .segmented .seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--team-ink-soft);
  text-decoration: none;
  border-right: 1px solid var(--team-line);
  transition: all .15s ease;
}
.team-feed-filters .segmented .seg:last-child { border-right: none; }
.team-feed-filters .segmented .seg svg { width: 15px; height: 15px; }
.team-feed-filters .segmented .seg:hover {
  background: var(--team-rose-soft);
  color: var(--team-rose);
}
.team-feed-filters .segmented .seg.active {
  background: var(--team-rose);
  color: #fff;
  font-weight: 600;
}
.team-feed-filters .segmented .seg.active svg { stroke: #fff; }

.team-feed-filters .advanced-filters .reset-link {
  font-size: 12px;
  color: var(--team-rose);
  text-decoration: none;
  align-self: flex-end;
  padding-bottom: 8px;
}

/* Carte d'annonce */
.team-announcement {
  margin-bottom: 14px;
  scroll-margin-top: 110px; /* anchor : éviter passage sous le bandeau sticky */
  transition: box-shadow .25s ease, border-color .25s ease;
}
.team-announcement.is-important { border-left: 3px solid var(--team-rose); }
.team-announcement.flash-highlight {
  box-shadow: 0 0 0 3px var(--team-rose-soft), 0 4px 14px rgba(180,46,94,.15);
  animation: flashFade 1.6s ease-out;
}
@keyframes flashFade {
  0%   { box-shadow: 0 0 0 4px var(--team-rose), 0 6px 18px rgba(180,46,94,.25); }
  100% { box-shadow: 0 0 0 3px var(--team-rose-soft), 0 4px 14px rgba(180,46,94,.15); }
}
.announcement-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 10px;
}
.announcement-author { display: flex; gap: 10px; align-items: center; min-width: 0; }
.announcement-title { margin: 0 0 8px; font-size: 15.5px; line-height: 1.4; }
.announcement-body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--team-ink);
  line-height: 1.6;
  white-space: pre-wrap;
}
.announcement-body.is-collapsible {
  position: relative;
  max-height: 7.5em;
  overflow: hidden;
  transition: max-height .25s ease;
}
.announcement-body.is-collapsible::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38px;
  background: linear-gradient(to bottom, transparent, var(--team-card-bg, #fff));
  pointer-events: none;
}
.announcement-body.is-collapsible.expanded {
  max-height: 200em;
}
.announcement-body.is-collapsible.expanded::after { display: none; }
.announcement-toggle {
  margin: 6px 0 12px;
  background: none;
  border: none;
  color: var(--team-rose);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 0;
}
.announcement-toggle:hover { text-decoration: underline; }
.announcement-delete {
  background: none;
  border: none;
  color: var(--team-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: color .15s ease;
}
.announcement-delete:hover { color: var(--team-err); }
.announcement-delete svg { width: 14px; height: 14px; }
a.permalink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
a.permalink:hover { color: var(--team-rose); border-bottom-color: var(--team-rose); }

/* ----- Engagement : réactions & commentaires sur annonces -------------- */
.team-engagement {
  margin-top: 14px;
  border-top: 1px solid var(--team-line);
  padding-top: 12px;
}

/* Barre de réactions */
.team-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.team-reactions.small {
  margin-top: 6px;
  gap: 4px;
}

/* Bouton de réaction — SVG icon + count optionnel */
.team-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--team-line);
  border-radius: 99px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: var(--team-ink-soft);
  transition: all .18s ease;
  font-family: inherit;
  line-height: 1;
}
.team-reaction-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.team-reaction-btn:hover {
  border-color: var(--team-rose);
  background: var(--team-rose-soft);
  color: var(--team-rose);
  transform: translateY(-1px);
}
.team-reaction-btn .count {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Variantes de couleur quand la réaction de l'utilisateur est active */
.team-reaction-btn.active            { border-color: var(--team-rose); background: var(--team-rose-soft); color: var(--team-rose); font-weight: 600; }
.team-reaction-btn.active.type-like      { border-color: #2563eb; background: rgba(37,99,235,.08);  color: #2563eb; }
.team-reaction-btn.active.type-love      { border-color: #e11d48; background: rgba(225,29,72,.08); color: #e11d48; }
.team-reaction-btn.active.type-celebrate { border-color: #db2777; background: rgba(219,39,119,.08);color: #db2777; }
.team-reaction-btn.active.type-idea      { border-color: #d97706; background: rgba(217,119,6,.08); color: #d97706; }
.team-reaction-btn.active.type-fire      { border-color: #ea580c; background: rgba(234,88,12,.08); color: #ea580c; }
.team-reaction-btn.active.type-done      { border-color: #16a34a; background: rgba(22,163,74,.08); color: #16a34a; }
.team-reaction-btn.active svg            { fill: currentColor; fill-opacity: .15; }

.team-reaction-btn.small {
  padding: 4px 9px;
  font-size: 12px;
  gap: 5px;
}
.team-reaction-btn.small svg { width: 14px; height: 14px; }
.team-reaction-btn.small .count { font-size: 11px; }
.team-reaction-btn.reply-trigger { color: var(--team-ink-soft); }

/* Lien vers les commentaires en bout de barre */
.team-comments-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--team-ink-soft);
  text-decoration: none;
}
.team-comments-link:hover { color: var(--team-rose); }
.team-comments-link svg { width: 14px; height: 14px; }

/* Bloc des commentaires */
.team-comments { margin-top: 14px; }
.team-comment {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px dashed var(--team-line);
}
.team-comment.is-reply {
  margin-left: 42px;
  background: rgba(0,0,0,.015);
  border-radius: 8px;
  padding: 10px 12px;
  border-top: 1px dashed transparent;
}
.team-comment-body { flex: 1; min-width: 0; }
.team-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.team-comment-meta strong { font-size: 13px; }
.team-comment-meta small { font-size: 11px; }
.team-comment-text {
  margin: 4px 0 6px;
  font-size: 13px;
  color: var(--team-ink);
  line-height: 1.55;
  white-space: pre-wrap;
}
.team-comment-delete { margin-left: auto; }
.team-comment-delete,
.team-comment-delete button {
  background: none;
  border: none;
  color: var(--team-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: color .15s ease;
}
.team-comment-delete:hover,
.team-comment-delete button:hover { color: var(--team-err); }
.team-comment-delete svg { width: 14px; height: 14px; }

/* Formulaire de commentaire */
.team-comment-form {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.team-comment-form textarea {
  flex: 1;
  padding: 9px 11px;
  border: 1px solid var(--team-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  background: #fff;
  transition: border-color .15s ease;
}
.team-comment-form textarea:focus {
  outline: none;
  border-color: var(--team-rose);
  box-shadow: 0 0 0 3px var(--team-rose-soft);
}

/* ----- Pagination (KnpPaginator — template team/_pagination.html.twig) --- */
.team-pagination ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 4px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.team-pagination li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.team-pagination li a,
.team-pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--team-line);
  border-radius: 8px;
  color: var(--team-ink-soft);
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: all .15s ease;
}
.team-pagination li a:hover {
  border-color: var(--team-rose);
  color: var(--team-rose);
  background: var(--team-rose-soft);
}
.team-pagination li.current span {
  background: var(--team-rose);
  border-color: var(--team-rose);
  color: #fff;
}
.team-pagination li.disabled span,
.team-pagination li.disabled a {
  opacity: .35;
  pointer-events: none;
}

/* ============================================================
   Toggle switch (interrupteur)
   Réutilisable partout où une case à cocher mérite un design plus
   moderne — RH (demi-journées), notifications, options diverses.
   Markup attendu :
     <label class="team-toggle">
       <input type="checkbox" name="x" value="1">
       <span class="team-toggle-slider"></span>
       <span class="team-toggle-label">Mon libellé</span>
     </label>
   ============================================================ */
.team-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--team-ink);
}
.team-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.team-toggle-slider {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  background: #d1d5dc;
  border-radius: 999px;
  transition: background .2s ease;
  flex-shrink: 0;
}
.team-toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.team-toggle input:checked + .team-toggle-slider {
  background: var(--team-rose);
}
.team-toggle input:checked + .team-toggle-slider::before {
  transform: translateX(16px);
}
.team-toggle input:focus-visible + .team-toggle-slider {
  outline: 2px solid var(--team-rose);
  outline-offset: 2px;
}
.team-toggle input:disabled + .team-toggle-slider {
  opacity: .5;
  cursor: not-allowed;
}
.team-toggle:hover .team-toggle-slider {
  filter: brightness(.96);
}
.team-toggle-label {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.team-toggle-label small {
  font-size: 11px;
  color: var(--team-ink-soft);
}

/* ============================================================================
   Responsive — couvre tous les écrans :
     ≥ 1201px : layout pleine largeur (sidebar 240px fixe)
     901-1200px : sidebar plus compacte (200px)
     ≤ 900px  : sidebar transformée en drawer off-canvas + hamburger
     ≤ 640px  : grilles mono-colonne, page-title empilé, paddings réduits
     ≤ 480px  : padding minimal, topbar compactée, boutons d'action en pile
   ========================================================================= */

@media (max-width: 1200px) {
  .team-shell { grid-template-columns: 200px 1fr; }
  .team-content { padding: 22px 22px; }
  .team-topbar { padding: 12px 22px; }
  .team-nav li a { padding: 9px 16px; font-size: 13px; }
  .team-nav .label { padding-left: 16px; padding-right: 16px; }
  .team-brand { padding: 0 16px 16px; }
}

@media (max-width: 900px) {
  /* Sidebar devient un drawer off-canvas */
  .team-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .team-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 86vw;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 50;
    box-shadow: 4px 0 24px rgba(20, 25, 40, 0.18);
  }
  .team-sidebar.is-open { transform: translateX(0); }
  .team-sidebar-backdrop { display: block; pointer-events: none; }
  .team-sidebar-backdrop.is-open { pointer-events: auto; }

  .team-burger { display: inline-flex; }

  .team-topbar {
    padding: 10px 16px;
    gap: 10px;
  }
  .team-breadcrumb {
    flex: 1;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .team-content { padding: 18px 16px; }

  /* Cartes RH avec scroll horizontal indiqué */
  .team-card[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
    background-image:
      linear-gradient(to right, var(--team-card), var(--team-card)),
      linear-gradient(to right, var(--team-card), var(--team-card)),
      linear-gradient(to right, rgba(20, 25, 40, 0.12), rgba(20, 25, 40, 0)),
      linear-gradient(to left, rgba(20, 25, 40, 0.12), rgba(20, 25, 40, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

@media (max-width: 640px) {
  body.team-app { font-size: 13.5px; }
  body.team-app h1 { font-size: 19px; }
  body.team-app h2 { font-size: 16px; }

  .team-content { padding: 14px 12px; }
  .team-card { padding: 14px; }

  /* Titre de page et actions en pile */
  .team-page-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .team-page-title .actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .team-page-title .actions .team-btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  /* Filtres et formulaires en pile */
  .team-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .team-filters input,
  .team-filters select {
    width: 100%;
  }

  /* Grilles forcées en mono-colonne (plus large que 900) */
  .team-grid-2,
  .team-grid-3,
  .team-grid-4 {
    grid-template-columns: 1fr;
  }

  /* Tables : taille mini retirée, scroll horizontal hérité du wrapper */
  .team-card table {
    font-size: 12px;
  }

  /* Topbar : on cache le prénom, on garde l'avatar */
  .team-topbar .user span { display: none; }

  /* KPIs plus compacts */
  .team-kpi { padding: 12px 14px; }
  .team-kpi .v { font-size: 22px; }
}

@media (max-width: 480px) {
  .team-content { padding: 12px 10px; }
  .team-card { padding: 12px; border-radius: 8px; }
  .team-topbar { padding: 8px 12px; }
  .team-brand strong { font-size: 15px; }

  /* Boutons d'action pleine largeur */
  body.team-app .team-btn,
  body.team-app a.team-btn,
  body.team-app button.team-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Cibles tactiles : agrandir les liens nav */
  .team-nav li a { padding: 12px 16px; }

  /* Avatar plus petit dans la topbar */
  .team-avatar { width: 28px; height: 28px; font-size: 11px; }

  /* Formulaires : champs pleine largeur */
  .team-card input[type="text"],
  .team-card input[type="email"],
  .team-card input[type="date"],
  .team-card input[type="number"],
  .team-card input[type="search"],
  .team-card select,
  .team-card textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Tablette portrait (verrou paysage si rotation) — garde le drawer */
@media (max-width: 900px) and (orientation: landscape) {
  .team-sidebar { width: 260px; }
}

/* Empêche le débordement horizontal causé par des contenus inline trop larges */
@media (max-width: 900px) {
  body.team-app, .team-shell, main, .team-content { max-width: 100%; overflow-x: visible; }
  .team-content > * { max-width: 100%; }
}