/* ─────────────────────────────────────────────────────────────
   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) */

/* Planificateur — note « mois sans séance » de la vue liste mobile
   (visible uniquement ≤640px en vue liste, voir media query) */
.rl-cal-empty-note { display: none; }

/* Guide rapide du planificateur — accordéons Joueur·euses / MJ, toutes tailles
   d'écran (généralisation du motif mobile, demande utilisateur) */
.rl-guide-head { cursor: pointer; }
.rl-guide-body { display: none; }
.rl-guide-body.is-open { display: block; }

/* ─── 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%; }
  /* L'avatar devient une simple ligne d'identité : le menu étant déjà déplié
     dessous, un bouton cliquable sans effet troublerait (piste UX 1.2) */
  .rl-nav-account-btn { width: 100%; justify-content: center; pointer-events: none; }
  .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; }
  /* Entrées alignées sur les liens du tiroir (filet + gauche), séparateurs superflus */
  .rl-nav-account-menu a {
    text-align: left;
    padding: 10px 6px;
    border-bottom: 1px solid var(--rl-line);
    font-size: 15px;
  }
  .rl-nav-account-menu a:last-child { border-bottom: none; }
  .rl-nav-account-sep { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLETTE PAYSAGE — 1025px à 1366px
   L'image du héro d'accueil (400px, absolue à droite) chevauchait
   la fin du texte : image réduite, texte borné, crest masqué.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1366px) {
  .rl-home-crest { display: none !important; }
  .rl-home-hero-content { margin-left: 40px !important; max-width: calc(100% - 360px) !important; }
  .rl-home-hero-img { width: 280px !important; height: 420px !important; }
  .rl-h1-xl { font-size: 72px !important; }
}

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

  /* ── Topbar accueil : liens APP / Facebook / Discord ──
     À 24px de police + gap 18px, le Discord était coupé à droite.
     !important : tailles posées en styles inline. */
  .rl-home-social { gap: 10px !important; flex-wrap: wrap; margin: 0 auto; justify-content: center; }
  .rl-home-social a,
  .rl-home-social button { font-size: 13px !important; gap: 5px !important; }
  .rl-home-social svg { width: 20px; height: 20px; }

  /* ── Flashs : le nowrap du style de base fait déborder les messages longs ──
     (déclaré dans base.html.twig ; responsive.css chargé après → surcharge) */
  .rl-flash {
    white-space: normal;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    text-align: center;
  }

  /* ── Cibles tactiles : 44px minimum (recommandation Apple/Google) ──
     .rl-btn est en inline-flex centré → min-height suffit.
     .rl-modal-x = croix de fermeture des modals (absolues ou en flux :
     top/right ne s'appliquent qu'aux premières). !important : styles inline. */
  .rl-btn { min-height: 44px; }
  .rl-modal-x {
    min-width: 44px !important;
    min-height: 44px !important;
    top: 4px !important;
    right: 4px !important;
    font-size: 26px !important;
  }

  /* Champs de formulaire : 16px minimum — lisibilité (datepicker inclus) et
     suppression du zoom automatique d'iOS Safari au focus (<16px) */
  .rl-field input, .rl-field textarea, .rl-field select {
    font-size: 16px;
    min-height: 44px;
  }
  #cal-view-liste, #cal-view-mois { min-height: 44px; }
  #cal-legend-toggle { padding: 12px 0 !important; }
  .rl-day-propose { min-height: 44px !important; }

  /* ─── Modal de détail de séance : quasi plein écran ──
     Carte pleine largeur ancrée en haut (pattern natif mobile), sections
     resserrées (32px → 18px), pied d'actions en flux normal avec CTA pleine
     largeur — le pied sticky (session 56) masquait conversation et confirmés
     et faisait « flotter » le modal au défilement : retiré (session 57).
     L'ID #modal-seance bat la règle générique .rl-modal (deux !important). */
  /* align-items:flex-start : la carte plus haute que l'écran était centrée
     verticalement (inline) → sauts de position au défilement */
  #modal-seance { padding: 0 !important; align-items: flex-start !important; }
  #modal-seance > .rl-card-elev {
    width: 100% !important;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .rl-seance-sec { padding-left: 18px !important; padding-right: 18px !important; }
  .rl-seance-foot {
    background: var(--rl-bg-3);
    border-top: 1px solid var(--rl-line-strong) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* CTA d'inscription/désinscription : pleine largeur, en tête de barre */
  #modal-form-register, #modal-form-unregister { flex: 1 1 100%; order: -1; }
  #modal-form-register .rl-btn, #modal-form-unregister .rl-btn { width: 100%; }
  /* Textarea de conversation : 16px (anti-zoom iOS, comme les champs) */
  #modal-conv-textarea { font-size: 16px !important; }

  /* Actions par joueur du modal de séance (↓ ↑ ✕, construites en JS) :
     pastilles agrandies ET écartées — cibles visibles plutôt que zones
     invisibles, pour lever toute ambiguïté entre boutons voisins.
     !important : styles inline posés par le JS. */
  .rl-chip-acts { gap: 8px !important; }
  .rl-chip-act {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !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; }

  /* ─── Planificateur : bandeau d'en-tête ──
     Navigation de mois assouplie (le libellé prend l'espace disponible),
     recherche masquée (peu de tuiles en vue liste, le dashboard couvre le besoin),
     toolbar en wrap : boutons « suivis » 50/50, « + Proposer » pleine largeur. */
  .rl-cal-monthnav { gap: 10px !important; }
  .rl-cal-monthlabel { min-width: 0 !important; flex: 1; font-size: 22px !important; }
  .rl-cal-toolbar { flex-wrap: wrap; }
  .rl-cal-search { display: none; }
  #btn-jeux-suivis, #btn-campagnes-suivies { flex: 1 1 calc(50% - 5px); }
  .rl-cal-propose { flex: 1 1 100%; }

  /* Légende des formats repliée derrière le bouton « Légende » (.rl-mobile-only).
     !important requis : la légende porte display:flex en style inline. */
  .rl-cal-legend { display: none !important; }
  .rl-cal-legend.is-open { display: flex !important; }

  /* ─── Guide rapide du planificateur ──
     Carte resserrée, lignes « bouton + explication » empilées, sections
     Joueur·euses / MJ repliées en accordéons (toujours dépliées en desktop). */
  .rl-guide-card { padding: 24px 18px !important; }
  .rl-guide-card h2 { font-size: 24px !important; }
  .rl-guide-row { flex-direction: column; }
  .rl-guide-row > .rl-btn { white-space: normal !important; align-self: flex-start; }
  /* Le rappel en pied est masqué (rl-mb-hide) : le bouton reste seul, aligné à droite */
  .rl-guide-foot { justify-content: flex-end !important; }

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

  /* Vue liste (défaut mobile) : seuls les jours avec séance restent visibles,
     empilés chronologiquement. La bascule « Mois » pose .rl-cal-month sur la
     grille et restaure toutes les cases (dont les « + Proposer » des jours vides). */
  /* !important requis : les cases portent display:flex en style inline */
  .rl-cal-grid:not(.rl-cal-month) .rl-cal-day:not(.rl-cal-day--has) { display: none !important; }
  .rl-cal-grid:not(.rl-cal-month) .rl-cal-day { min-height: 0 !important; }
  .rl-cal-grid:not(.rl-cal-month) + .rl-cal-empty-note {
    display: block;
    border: 1px dashed var(--rl-line);
    padding: 28px 16px;
    text-align: center;
    color: var(--rl-ink-3);
    font-size: 13px;
  }

  /* ── 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; }
  /* Le voile dégradé (div inset:0 après l'img) doit suivre l'image, pas le
     bloc entier devenu plus haut : sinon le fondu bas se termine sous le
     titre et l'image est coupée net au lieu de fondre vers le fond. */
  .rl-hero > img + div {
    bottom: auto !important;
    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 membres : panneau de détail en plein écran ──
     Les 420px fixes ancrés à droite débordaient du bord gauche des petits
     écrans (Galaxy S8+ 360px, iPhone 12 390px). 100dvh = hauteur réelle
     avec la barre d'adresse iOS (repli 100vh pour les anciens navigateurs). */
  #membre-detail {
    width: 100vw !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-left: none !important;
  }

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