/*
 * 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 ─────────────────────── */
  .algm-auth-wrap {
    padding: 16px 8px;
    min-height: 50vh;
  }
  .algm-auth-card {
    padding: 24px 16px;
    border-radius: 10px;
  }
  .algm-auth-logo {
    font-size: 1.15rem;
  }
  .algm-auth-title {
    font-size: 1rem;
  }
  .algm-auth-btn {
    padding: 14px;
    font-size: 1rem;
    min-height: 48px;
  }

  /* 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;
  }
}