/* ─────────────────────────────────────────────────────────────
   Rêves & Légendes — Calque responsive
   Surcharge le layout (majoritairement inline) à plusieurs paliers :
     • Navigation : max-width 1200px (burger — couvre la tablette paysage)
     • Tablette   : max-width 1024px
     • Mobile     : max-width 640px
   Les règles ciblant un style inline nécessitent !important
   (une media query externe ne bat pas un style="" sinon).
   ───────────────────────────────────────────────────────────── */

/* ─── Helpers de visibilité ─────────────────────────────────── */
.rl-mobile-only { display: none; }
/* .rl-desktop-only : visible par défaut, masqué en mobile (voir plus bas) */

/* ─── Helpers structurants réutilisables ────────────────────────
   À poser sur les conteneurs inline existants. Ne surchargent que
   l'axe concerné (horizontal / taille) pour préserver le desktop.
   ─────────────────────────────────────────────────────────────── */
/* .rl-pad-x   : padding horizontal de page (56px en desktop)
   .rl-hero    : bandeau image en tête de page
   .rl-hero-title : titre superposé au bandeau
   .rl-grid-2  : grille multi-colonnes → 2 puis 1 colonne
   .rl-grid-1  : grille multi-colonnes → 1 colonne directement
   (les surcharges sont définies dans les media queries plus bas) */

/* ─── Hamburger (masqué en desktop) ─────────────────────────── */
.rl-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  cursor: pointer;
}
.rl-nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--rl-gold);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.rl-nav.is-open .rl-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rl-nav.is-open .rl-nav-burger span:nth-child(2) { opacity: 0; }
.rl-nav.is-open .rl-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — burger ≤ 1200px
   Palier propre à la barre de navigation, plus large que le palier
   tablette (1024px). Couvre la tablette en paysage (iPad 10 / Air =
   1180px, iPad Pro 11" = 1194px) où la nav complète se tasse alors
   que l'écran est trop large pour déclencher le palier tablette.
   Le reste de la mise en page reste géré à 1024px (le layout desktop
   s'affiche très bien jusqu'à 1180px).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  /* ── Navigation : passage en menu déroulant ── */
  .rl-nav {
    flex-wrap: wrap;
    padding: 16px 20px;
    row-gap: 14px;
  }
  .rl-nav-burger { display: flex; order: 2; }

  .rl-nav-links,
  .rl-nav-cta {
    flex-basis: 100%;
    order: 3;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .rl-nav.is-open .rl-nav-links,
  .rl-nav.is-open .rl-nav-cta { display: flex; }

  .rl-nav.is-open .rl-nav-links { padding-top: 6px; }
  .rl-nav-links .rl-nav-link {
    padding: 10px 6px;
    border-bottom: 1px solid var(--rl-line);
    font-size: 17px;
  }
  .rl-nav-cta { gap: 8px; padding-top: 8px; }
  .rl-nav-cta .rl-btn { width: 100%; justify-content: center; }

  /* ── Menu compte : déplié à plat dans le tiroir (pas de dropdown) ── */
  .rl-nav-account { width: 100%; }
  .rl-nav-account-btn { width: 100%; justify-content: center; }
  .rl-nav-account-caret { display: none; }
  .rl-nav-account-menu {
    position: static;
    display: flex;
    min-width: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 4px 0 0;
    margin-top: 4px;
  }
  .rl-nav-account-head { display: none; }
  .rl-nav-account-menu a { text-align: center; }
}

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

  /* ── Garde anti-débordement horizontal ──
     Empêche un élément trop large d'élargir le document au-delà de
     l'écran (sinon nav/footer pleine largeur semblent tronqués).
     `clip` (et non `hidden`) : clippe sans créer de conteneur de scroll
     sur le <body>, ce qui évite le bug de scroll « figé » d'iOS Safari.
     `hidden` reste en repli pour les navigateurs sans support de `clip`. */
  .rl-page { overflow-x: hidden; overflow-x: clip; }

  /* ── Navigation : le passage en menu burger est géré par le palier
     dédié ≤1200px (voir plus haut). ── */

  /* ── Logo réduit dans la barre ── */
  .rl-logo-text .title { font-size: 32px; }

  /* ── Helpers structurants ── */
  .rl-pad-x { padding-left: 24px !important; padding-right: 24px !important; }
  .rl-hero-title { font-size: 34px !important; }
  .rl-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .rl-tablet-hide { display: none !important; }
  .rl-h1-xl { font-size: 60px !important; }
  .rl-h2-lg { font-size: 38px !important; }
  .rl-home-hero-content { margin-left: 0 !important; max-width: 100% !important; }
  .rl-home-stats { gap: 40px !important; }
  /* Auth : écran scindé (illustration | formulaire) → une colonne */
  .rl-auth-grid { grid-template-columns: 1fr !important; }
  /* Modale plus haute que l'écran : ancrée en haut + scroll du conteneur,
     sinon le haut (croix) et le bas (boutons) deviennent inatteignables. */
  .rl-modal { align-items: flex-start !important; padding-top: 16px !important; padding-bottom: 16px !important; }

  /* ── Footer : padding réduit + blocs centrés ── */
  .rl-footer { padding: 36px 24px !important; }
  .rl-footer-brand { text-align: center; }
  .rl-footer-brand .rl-logo { justify-content: center; }
  .rl-footer-social { text-align: center; }
  .rl-footer-social-links { justify-content: center !important; }

  /* ── Page membres : tableau resserré pour tenir sans scroll horizontal sur
     tablette (la grille desktop reste active >640px). Scopé via #membres-liste
     car .rl-mb-row/.rl-mb-header sont partagés par d'autres listes admin.
     L'espaceur séances↔clés passe à 0 et les colonnes larges sont réduites ;
     « Séances jouées » garde 130px (libellé large). N'override QUE la grille :
     le gap n'est pas touché (sinon il écraserait le palier mobile ≤640). */
  #membres-liste .rl-mb-header { grid-template-columns: 32px 1fr 120px 130px 130px 0 60px !important; }
  #membres-liste .rl-mb-row    { grid-template-columns: 1fr 120px 130px 130px 0 60px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — ≤ 640px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Visibilité ── */
  .rl-mobile-only { display: block; }
  .rl-desktop-only { display: none !important; }

  /* ── Logo encore réduit ── */
  .rl-logo-text .title { font-size: 26px; }
  .rl-logo-text .sub { font-size: 8px; letter-spacing: .16em; }

  /* ── Helpers structurants ── */
  .rl-pad-x { padding-left: 16px !important; padding-right: 16px !important; }
  .rl-hero-title { font-size: 28px !important; }
  .rl-grid-2, .rl-grid-1 { grid-template-columns: 1fr !important; }
  .rl-h1-xl { font-size: 38px !important; }
  .rl-h2-lg { font-size: 28px !important; }
  .rl-home-stats { gap: 28px !important; flex-wrap: wrap; }

  /* Calendrier : grille 3 colonnes (Ven/Sam/Dim) → liste 1 colonne,
     en-têtes de jour masqués (chaque case porte déjà sa date). */
  .rl-cal-grid { grid-template-columns: 1fr !important; }
  .rl-cal-head { display: none !important; }

  /* ── Hero : bandeau en flux normal (image puis titre dessous) ──
     Évite que le contenu absolu (bottom:0) déborde vers le haut et
     remonte sur la navbar quand le texte est trop long. */
  .rl-hero { height: auto !important; }
  .rl-hero > img { height: 190px !important; }
  .rl-hero-content {
    position: relative !important;
    padding-top: 18px !important;
  }

  /* ── Footer : une colonne, masquages mobile ── */
  .rl-footer { padding: 32px 20px !important; }
  .rl-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .rl-footer-nav { display: none !important; }          /* Navigation inutile en mobile */
  .rl-footer-sitemap { display: none !important; }      /* Plan du site inutile en mobile */
  /* Bloc social séparé du bloc association + icônes en ligne */
  .rl-footer-social {
    border-top: 1px solid var(--rl-line);
    padding-top: 22px;
  }
  .rl-footer-social-links {
    flex-direction: row !important;
    gap: 28px !important;
  }
  .rl-footer-bottom {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center;
  }

  /* ── Admin : listes "tableau" → cards ──
     Les lignes en grille deviennent des cards, certaines colonnes
     sont masquées (.rl-mb-hide), l'en-tête disparaît (.rl-mb-header). */
  .rl-mb-header { display: none !important; }
  .rl-mb-hide { display: none !important; }
  .rl-mb-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px !important;
    padding: 14px 16px !important;
  }
  .rl-mb-ident { flex: 1 1 100%; }
  .rl-mb-grow { flex: 1 1 0; min-width: 140px; }

  /* Conteneur flex à empiler verticalement en mobile */
  .rl-mb-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .rl-mb-actions { flex-wrap: wrap !important; }

  /* Toolbar admin : empilée, recherche pleine largeur */
  .rl-mb-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .rl-mb-search { width: 100% !important; }
  .rl-mb-search input { width: 100% !important; }

  /* Modale : padding interne réduit en mobile */
  .rl-modal > .rl-card-elev { padding: 20px !important; }

  /* Widget de note (ludothèques) : étoiles non-rétractables qui débordent
     de quelques px sur écran étroit → étoiles réduites + passage à la ligne. */
  .rl-rating { flex-wrap: wrap; row-gap: 8px !important; }
  .rl-rating [data-avg-star],
  .rl-rating [data-star] { font-size: 14px !important; }

  /* Détail ludothèque asso : cards exemplaire (libellé fixe 180px + texte
     emprunteur + boutons) trop larges → empilées en colonne, noms cassés. */
  .rl-copy-row { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .rl-copy-row > * { flex: none !important; min-width: 0; }
  .rl-copy-bar { display: none !important; }
  .rl-copy-status > div { flex-wrap: wrap; }
  .rl-copy-status, .rl-copy-status * { overflow-wrap: anywhere; }
  .rl-copy-actions { flex-wrap: wrap !important; }

  /* Marge horizontale de page (pour blocs en margin et non padding) */
  .rl-mb-mx { margin-left: 16px !important; margin-right: 16px !important; }

  /* ── Admin candidats : parcours empilé ── */
  .rl-mb-steps { flex-direction: column !important; }
  .rl-mb-step { border-right: none !important; }

  /* ── Admin candidats : lignes → cards, action pleine largeur ── */
  .rl-cand-row {
    grid-template-columns: 48px 1fr !important;
    row-gap: 12px !important;
  }
  .rl-cand-action { grid-column: 1 / -1 !important; }
  .rl-cand-action .rl-btn { width: 100% !important; }
}

/* ─── Masquage par filtre de recherche (JS) ─────────────────────
   Déclaré en dernier pour gagner sur .rl-mb-row{display:flex!important}
   à spécificité égale (l'ordre source départage). */
.rl-search-hide { display: none !important; }