/*
 * ALGM Bénévoles — Responsive (mobile + tablette)
 * ─────────────────────────────────────────────────────────────────────────────
 * Surcharges responsive pour TOUTES les vues du front-office (côté bénévole).
 * Ce fichier est chargé APRÈS front.css et components.css : il ne fait que
 * surcharger des règles existantes (pas de définition initiale).
 *
 * Cible : partie front uniquement (pages bénévoles : login, inscription,
 * dashboard, mes missions, parcours, classement, profil, boîte à outils, etc.)
 * Le back-office admin sera traité ultérieurement.
 *
 * Breakpoints :
 *   - 1024px : tablette paysage / petit laptop
 *   -  768px : tablette portrait / grand mobile paysage
 *   -  640px : phablette / grand mobile portrait (passage des grilles 2-col → 1-col)
 *   -  480px : mobile portrait standard (iPhone SE+)
 *   -  360px : très petit mobile (sécurité, pas de débordement)
 *
 * Conventions :
 *   - Mobile : zones tactiles ≥ 44px (WCAG 2.1 AA, cible AAA = 44px).
 *   - Pas de scroll horizontal global.
 *   - Wrappers de tableau pour scroll local plutôt que masquage agressif.
 *   - Modales : 100vh - safe-area en plein écran sur mobile.
 *
 * Voir docs/refactor-css-plan.md pour la philosophie globale.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Reset / sécurité globale ─────────────────────────────────────────────── */
/* Empêche le débordement horizontal de la page sur mobile, même si un enfant
 * dépasse temporairement (image large, embed, etc.). */
@media (max-width: 1024px) {
  #algm-bv-app {
    overflow-x: hidden;
  }
  #algm-bv-app img,
  #algm-bv-app video,
  #algm-bv-app iframe {
    max-width: 100%;
    height: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * TABLETTE (≤ 1024px)
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Contenu un peu plus serré */
  .algm-bv-content {
    padding: 20px;
  }

  /* Stats : 3 colonnes max sur tablette */
  .algm-bv-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * TABLETTE PORTRAIT / GRAND MOBILE (≤ 768px)
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout général ────────────────────────────────────────────────────── */
  .algm-bv-content {
    /* padding: 16px; */
  }

  .algm-bv-card {
    /* padding: 16px; */
  }
  /* v1.9.4 — Exception : les cartes repliables gèrent leur propre padding
   * via le toggle interne (padding: 16px 20px sur .algm-bv-card__toggle).
   * Sans cet override, le padding mobile de la carte s'ajoute au padding
   * du toggle et crée une "bande vide" visible au-dessus du titre, en plus
   * de pousser le contenu hors de la zone perçue de la carte. */
  .algm-bv-card.algm-bv-card--collapsible {
    padding: 0;
  }

  /* ── Header ────────────────────────────────────────────────────────────── */
  .algm-bv-header {
    padding: 12px 16px;
    gap: 12px;
  }
  .algm-bv-header img {
    height: 42px;
  }
  .algm-bv-header__title {
    font-size: 1.05rem;
  }

  /* ── Navigation : top nav cachée, bottom nav affichée ──────────────────── */
  /* Sur mobile, on bascule de la top nav (desktop) à la bottom nav (zone du pouce). */
  .algm-bv-topnav {
    display: none;
  }

  .algm-bv-bottomnav {
    display:        flex;
    position:       fixed;
    bottom:         0;
    left:           0;
    right:          0;
    z-index:        100;
    background:     var(--algm-blanc);
    border-top:     1px solid var(--algm-gris-bord);
    box-shadow:     0 -2px 12px rgba(32, 35, 70, 0.08);
    padding:        8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    /* v1.12.0 — Bloc agrandi pour PWA : plus haut, plus de respiration. */
    /* Pas de scroll : 5 items répartis équitablement */
  }

  .algm-bv-bottomnav__item {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    padding:         6px 4px;
    color:           rgba(32, 35, 70, 0.65);
    font-size:       0.75rem;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    text-align:      center;
    min-height:      64px;
    transition:      color var(--algm-transition);
    -webkit-tap-highlight-color: transparent;
  }

  .algm-bv-bottomnav__item:hover {
    color: var(--algm-bleu);
  }

  .algm-bv-bottomnav__item--active {
    color: var(--algm-bleu);
  }

  .algm-bv-bottomnav__item:focus-visible {
    outline:        2px solid var(--algm-or);
    outline-offset: -2px;
    border-radius:  4px;
  }

  .algm-bv-bottomnav__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   12px;
    font-size:       1.5rem;
    line-height:     1;
    transition:      background var(--algm-transition), color var(--algm-transition);
  }

  .algm-bv-bottomnav__item--active .algm-bv-bottomnav__icon {
    background: var(--algm-bleu);
    color:      var(--algm-or);
  }

  .algm-bv-bottomnav__label {
    line-height: 1.1;
    max-width:   100%;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Évite que la bottom nav ne masque le bas du contenu */
  /* v1.12.0 — Hauteur de la bottom nav passée à ~84 px (64 item + 20 padding) */
  .algm-bv-content--with-bottomnav {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Boutons : zones tactiles agrandies ──────────────────────────────── */
  .algm-bv-btn {
    padding: 11px 18px;
    min-height: 42px;
  }
  .algm-bv-btn--sm {
    padding: 8px 14px;
    min-height: 36px;
  }

  /* ── Stats : 2 colonnes ───────────────────────────────────────────────── */
  .algm-bv-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .algm-bv-stat-card {
    padding: 16px 12px;
  }
  .algm-bv-stat-card__value {
    font-size: 1.6rem;
  }

  /* ── Tableaux : wrapper scrollable ─────────────────────────────────────── */
  /* On enveloppe visuellement la table via un overflow X plutôt que masquer
   * trop de colonnes — l'utilisateur peut scroller horizontalement la table
   * sans que la page entière ne scroll. */
  .algm-bv-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .algm-bv-table thead,
  .algm-bv-table tbody,
  .algm-bv-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .algm-bv-table th,
  .algm-bv-table td {
    padding: 10px 10px;
    font-size: 0.8rem;
  }

  /* ── Filtres et barres de recherche ────────────────────────────────────── */
  .algm-bv-filters {
    gap: 8px;
  }
  .algm-bv-search,
  .algm-bv-search__wrapper {
    min-width: 100%;
    flex: 1 1 100%;
  }
  .algm-bv-filter-date,
  .algm-bv-select,
  .algm-bv-select--sm {
    flex: 1 1 auto;
    min-height: 40px;
  }

  /* ── Sous-onglets : wrap propre ────────────────────────────────────────── */
  .algm-bv-subtabs {
    flex-wrap: wrap;
  }
  .algm-bv-subtabs__btn {
    min-height: 40px;
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  /* ── Onglets toggle (À venir / Historique) ────────────────────────────── */
  .algm-bv-tabs {
    width: 100%;
  }
  .algm-bv-tabs > * {
    flex: 1;
    min-height: 40px;
  }

  /* ── Mission cards / rows : empilage propre ──────────────────────────── */
  .algm-bv-mission-row__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .algm-bv-mission-row__side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--algm-gris-bord);
    padding-top: 8px;
    margin-top: 4px;
  }

  /* ── Dashboard : profile card ────────────────────────────────────────── */
  .algm-bv-dashboard__profile-card {
    flex-wrap: wrap;
  }
  .algm-bv-dashboard__avatar {
    width: 56px;
    height: 56px;
  }

  /* ── Modales : plein écran sur tablette portrait ─────────────────────── */
  .algm-bv-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .algm-bv-modal__dialog,
  .algm-bv-modal__dialog--md,
  .algm-bv-modal__dialog--lg {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .algm-bv-modal__dialog--scroll {
    max-height: 100vh;
    height: 100vh;
  }
  .algm-bv-modal__header {
    border-radius: 0;
    padding: 14px 16px;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .algm-bv-modal__body {
    padding: 16px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .algm-bv-modal__body--scroll {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .algm-bv-modal__footer {
    padding: 12px 16px;
    border-radius: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
  }

  /* ── Carte d'auth (login / inscription) ──────────────────────────────── */
  .algm-auth-wrap {
    padding: 24px 12px;
  }
  .algm-auth-card {
    padding: 28px 20px;
    max-width: 100%;
  }

  /* ── Carte login (composant Vue alternatif) ──────────────────────────── */
  .algm-bv-login {
    padding: 24px 12px;
  }
  .algm-bv-login__card {
    padding: 28px 20px;
    max-width: 100%;
  }

  /* ── Toasts ─────────────────────────────────────────────────────────── */
  .algm-bv-toast-container {
    left: 12px;
    right: 12px;
  }
  .algm-bv-toast {
    min-width: 0;
    width: 100%;
  }

  /* ── Form fields : touch-friendly ─────────────────────────────────── */
  .algm-bv-form-group input,
  .algm-bv-form-group select,
  .algm-bv-form-group textarea,
  .algm-bv-input,
  .algm-bv-textarea,
  .algm-auth-field input,
  .algm-auth-field textarea {
    /* font-size: 16px évite le zoom auto iOS sur focus */
    font-size: 16px;
    min-height: 44px;
  }
  .algm-bv-textarea,
  .algm-auth-field textarea {
    min-height: 88px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * GRAND MOBILE / PHABLETTE (≤ 640px)
 * À ce niveau, les grilles 2-col passent en 1-col.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Formulaires d'inscription : 1 seule colonne ────────────────────── */
  .algm-auth-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── Filtres : tout en pile ─────────────────────────────────────────── */
  .algm-bv-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .algm-bv-filters > * {
    width: 100%;
  }

  /* ── Mission row title-line : wrap pour les longs titres ─────────────── */
  .algm-bv-mission-row__title-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* ── Modal footer : boutons en pile pleine largeur ─────────────────── */
  .algm-bv-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .algm-bv-modal__footer > .algm-bv-btn,
  .algm-bv-modal__footer-actions > .algm-bv-btn {
    width: 100%;
    justify-content: center;
  }
  .algm-bv-modal__footer-actions {
    flex-direction: column-reverse;
    width: 100%;
  }

  /* ── Step (parcours) : empilage CTA sous le contenu ─────────────────── */
  .algm-bv-step__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .algm-bv-step__cta {
    align-self: stretch;
    text-align: center;
  }

  /* ── Disponibilités : bascule tableau → cartes par jour ─────────────── */
  /* Le tableau 7×3 cases est trop dense sur mobile (cibles tactiles < 44px,
   * scroll horizontal). On cache le tableau et on affiche la vue carte
   * empilée (1 carte par jour × 3 boutons toggle). Markup défini dans
   * app.js (ProfilView), styles dans components.css. */
  .algm-bv-availability-wrap {
    display: none;
  }
  .algm-bv-availability-cards {
    display: flex;
  }

  /* ── Sous-onglets : empilage 1 colonne sur mobile ─────────────────────
   * Concerne MissionsHubView (Disponibles / Mes missions à venir / Historique)
   * et BoiteAOutilsView (Outils & Guides / Contacts / FAQ). Sur ≤ 640px, le
   * wrap 50/50 + 1 isolé en dessous (cf. règle ≤ 768px ligne 233) crée une
   * mise en page asymétrique peu lisible. On bascule donc en pile verticale
   * pleine largeur : chaque onglet sur sa propre ligne, cible tactile ≥ 44px.
   * Texte aligné à gauche + gap 8px entre boutons pour éviter les mistaps
   * (fat-finger error). */
  .algm-bv-subtabs {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .algm-bv-subtabs__btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: flex-start;
    text-align: left;
  }

  /* ── Onglets profil : empilage 1 colonne sur mobile ───────────────────
   * Concerne ProfilView (Mon profil / Mon compte / Préférences). La règle
   * ≤ 768px (components.css ligne 2134) tasse les 3 onglets à 33 % chacun
   * avec scroll horizontal — illisible sur petit écran. On stacke pour
   * suivre le même pattern que .algm-bv-subtabs. Même traitement : texte
   * à gauche + gap 8px pour éviter les mistaps. */
  .algm-bv-profile-tabs {
    flex-direction: column;
    overflow-x: visible;
    gap: 8px;
  }
  .algm-bv-profile-tab {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    text-align: left;
    padding-left: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * MOBILE PORTRAIT (≤ 480px)
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Layout : padding minimal ──────────────────────────────────────────── */
  .algm-bv-content {
    padding: 12px;
  }
  .algm-bv-card {
    /* padding: 14px; */
  }
  /* v1.9.4 — Idem breakpoint principal : préserver padding:0 du collapsible. */
  .algm-bv-card.algm-bv-card--collapsible {
    padding: 0;
  }

  /* ── Header : compact sur petit mobile, mais on garde le layout horizontal */
  /* (l'avatar reste en haut à droite, plus besoin d'empiler comme avec l'ancien bouton Déconnexion) */
  .algm-bv-header {
    padding: 10px 12px;
    gap: 8px;
  }
  .algm-bv-header img {
    height: 36px;
  }
  .algm-bv-header__title {
    font-size: 0.95rem;
  }
  .algm-bv-header__sub {
    font-size: 0.7rem;
  }
  /* v1.12.0 — Avatar légèrement réduit sur très petit écran, mais le trigger
   * conserve son prénom et son chevron pour rester identifiable. */
  .algm-bv-user-menu__trigger {
    gap: 8px;
    padding: 3px 10px 3px 3px;
    font-size: 0.85rem;
    min-height: 44px;
  }
  .algm-bv-user-menu__avatar {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }
  .algm-bv-user-menu__name {
    max-width: 96px;
  }
  /* Largeur pleine du dropdown sur tout petit mobile */
  .algm-bv-user-menu__dropdown {
    min-width: 180px;
    right: -4px;
  }

  /* ── Bottom nav : icônes encore bien visibles sur petit mobile ─────────── */
  /* v1.12.0 — Léger downscale par rapport au breakpoint 768 px, mais on
     garde une nav clairement lisible (40 px d'icône, 60 px de hauteur). */
  .algm-bv-bottomnav__label {
    font-size: 0.7rem;
  }
  .algm-bv-bottomnav__icon {
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
    border-radius: 11px;
  }
  .algm-bv-bottomnav__item {
    min-height: 60px;
  }

  /* ── Stats : 2 colonnes mais plus compactes ────────────────────────────── */
  .algm-bv-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .algm-bv-stat-card {
    padding: 14px 8px;
  }
  .algm-bv-stat-card__value {
    font-size: 1.4rem;
  }
  .algm-bv-stat-card__label {
    font-size: 0.7rem;
  }

  /* ── Cards : titre plus compact ───────────────────────────────────────── */
  .algm-bv-card__title {
    font-size: 0.95rem;
  }

  /* ── Boutons : pleine largeur dans cartes/footers ──────────────────────── */
  .algm-bv-btn {
    padding: 12px 16px;
    font-size: 0.9rem;
    min-height: 44px;
  }

  /* ── Auth : padding compact, plus de largeur utile ─────────────────────── */
  /* v1.16.3 — Sur iPhone, le formulaire passait sous la ligne de flottaison
     (logo visible, gros blanc, scroll obligatoire avant de voir les champs).
     On supprime le min-height et le padding-top, on resserre la carte et son
     en-tête pour ramener "Email" au-dessus du fold sur iPhone SE / 12 mini. */
  .algm-auth-wrap {
    padding: 0 8px 24px;
    min-height: 0;
  }
  .algm-auth-card {
    padding: 18px 14px 22px;
    border-radius: 10px;
  }
  .algm-auth-header {
    margin-bottom: 14px;
  }
  .algm-auth-logo {
    font-size: 1.05rem;
  }
  .algm-auth-subtitle {
    font-size: 12px;
  }
  .algm-auth-title {
    font-size: 1rem;
    margin: 0 0 14px;
  }
  .algm-auth-form {
    gap: 12px;
  }
  .algm-auth-btn {
    padding: 14px;
    font-size: 1rem;
    min-height: 48px;
  }
  /* Le wrap d'auth est seul dans le contenu de la page /benevoles/connexion :
     on annule la marge supérieure ajoutée par défaut par .entry-content
     du thème pour gagner ~24px et garder le formulaire au-dessus du fold. */
  .entry-content > .algm-auth-wrap:first-child {
    margin-top: -1.5em;
  }
  /* Quand la page benevoles ne contient QU'un formulaire d'auth (login,
     inscription, mot de passe oublié), on resserre la marge supérieure
     du conteneur du thème pour ramener le formulaire plus près du logo.
     Cible les 2 templates possibles : "Espace bénévole" (.content-area-benevoles)
     et page par défaut (.content-area). */
  .content-area-benevoles:has(.algm-auth-wrap) {
    margin-top: 70px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  .content-area:has(.algm-auth-wrap) {
    margin-top: 140px;
  }

  /* Login (composant Vue) — mêmes ajustements */
  .algm-bv-login {
    padding: 16px 8px;
  }
  .algm-bv-login__card {
    padding: 24px 16px;
    border-radius: 10px;
  }
  .algm-bv-login__submit {
    padding: 14px;
    min-height: 48px;
  }

  /* ── Photo upload : un peu plus gros (cible tactile) ──────────────────── */
  .algm-bv-photo-upload__circle,
  .algm-bv-photo-upload__preview {
    width: 88px;
    height: 88px;
  }

  /* ── Dashboard : avatar centré, infos sous le visuel ──────────────────── */
  .algm-bv-dashboard__profile-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .algm-bv-dashboard__avatar {
    width: 72px;
    height: 72px;
  }
  .algm-bv-dashboard__name {
    font-size: 1rem;
  }

  /* ── Badges (gamification) : grille fluide ─────────────────────────────── */
  .algm-bv-badges-grid {
    gap: 10px;
    justify-content: center;
  }
  .algm-bv-badge {
    width: 64px;
  }
  .algm-bv-badge__icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  /* ── Progression XP : layout colonne ──────────────────────────────────── */
  .algm-bv-progress__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* ── Toasts : positionnement bas (n'écrase pas le header sticky) ─────── */
  .algm-bv-toast-container {
    top: auto;
    bottom: 16px;
    left: 12px;
    right: 12px;
  }

  /* ── Pagination : wrap propre ─────────────────────────────────────────── */
  .algm-bv-pagination {
    flex-wrap: wrap;
    gap: 4px;
  }
  .algm-bv-pagination__btn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
  }

  /* ── Mission cards / rank rows : padding réduit ──────────────────────── */
  .algm-bv-mission-card__body,
  .algm-bv-rank-row {
    padding: 12px;
  }
  .algm-bv-rank-row__rank {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* ── Page-title : taille adaptée ──────────────────────────────────────── */
  .algm-bv-page-title {
    font-size: 0.95rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * TRÈS PETIT MOBILE (≤ 360px)
 * Petite sécurité pour iPhone SE 1ère gen, Galaxy Fold fermé, etc.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  /* Stats en 1 colonne pour éviter compression illisible */
  .algm-bv-stats-grid {
    grid-template-columns: 1fr;
  }

  /* Sous-onglets en pile */
  .algm-bv-subtabs__btn {
    flex: 1 1 100%;
  }

  .algm-bv-content {
    padding: 8px;
  }
  .algm-bv-card {
    /* padding: 12px; */
  }
  /* v1.9.4 — Idem petits mobiles : préserver padding:0 du collapsible. */
  .algm-bv-card.algm-bv-card--collapsible {
    padding: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * RÉCAPS D'HEURES — bascule tableau → cartes empilées (≤ 560px)
 * ────────────────────────────────────────────────────────────────────────────
 * Vue « Mes récaps » (À signer / Signés) du composant MesRecapsView.
 * En desktop, chaque ligne est une ligne de tableau (Date · Activité · Durée ·
 * action). Sur mobile, les 4 colonnes + le bouton « Signaler une erreur »
 * (large, white-space:nowrap) débordent du cadre et le bouton est coupé.
 *
 * On bascule donc le tableau en pile verticale : l'en-tête est masqué, chaque
 * cellule passe en bloc pleine largeur avec son libellé en préfixe (data-label),
 * et la cellule d'action (bouton ou pastille de statut) prend toute la largeur.
 *
 * Les styles inline (padding/text-align) du markup Vue sont surchargés ici via
 * !important, ce qui est volontaire et borné à ce seul tableau .algm-bv-recap-table.
 * ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .algm-bv-recap-table,
  .algm-bv-recap-table tbody,
  .algm-bv-recap-table tr,
  .algm-bv-recap-table td {
    display: block;
    width: 100%;
  }

  /* En-tête de colonnes inutile une fois empilé */
  .algm-bv-recap-table thead {
    display: none;
  }

  /* Espacement entre les lignes (la bordure inline assure le séparateur) */
  .algm-bv-recap-table tbody > tr {
    padding: 8px 0;
  }

  /* Chaque cellule sur sa propre ligne, alignée à gauche */
  .algm-bv-recap-table td {
    padding: 2px 2px !important;
    text-align: left !important;
  }

  /* Libellé de colonne en préfixe (Date : … / Activité : … / Durée : …) */
  .algm-bv-recap-table td[data-label]::before {
    content: attr(data-label) " : ";
    font-weight: 600;
    color: #6b7280;
  }

  /* Cellule d'action : bouton plein largeur, statut aligné à gauche */
  .algm-bv-recap-table td.algm-bv-recap-table__action {
    padding-top: 10px !important;
  }
  .algm-bv-recap-table td.algm-bv-recap-table__action > button {
    width: 100%;
    justify-content: center;
  }
  .algm-bv-recap-table td.algm-bv-recap-table__action > div {
    align-items: flex-start !important;
  }

  /* Lignes de détail / signalement (colspan) : pleine largeur propre */
  .algm-bv-recap-table td[colspan] {
    padding: 0 2px 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Préférence utilisateur : reduced motion
 * On désactive les animations non essentielles pour les utilisateurs sensibles.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .algm-bv-toast,
  .algm-bv-card--clickable,
  .algm-bv-btn {
    animation: none !important;
    transition: none !important;
  }
}