/* PalaoBreeZ — adaptation tablette et téléphone.
   Tablette (≤ 1100 px) : menu latéral escamotable, scène prioritaire.
   Téléphone (≤ 700 px) : une colonne, navigation inférieure, cibles tactiles ≥ 44 px.
   Règle : jamais de largeur minimale en dur ; colonnes en minmax(0, 1fr), largeurs en min(Xpx, 100%). */

.btn-menu { display: none; }
.nav-bas, .voile-menu { display: none; }

/* ============================ Tablette ============================ */
@media (max-width: 1100px) {
  /* Coquille B : le menu latéral devient un tiroir. */
  .coquille { grid-template-columns: minmax(0, 1fr); }
  .btn-menu { display: inline-flex; align-items: center; justify-content: center; width: calc(44px * var(--eb)); height: calc(44px * var(--eb)); flex: none; margin-left: calc(10px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: #fff; color: var(--encre); }
  .entete-marque { width: auto; padding: 0 calc(14px * var(--eb)) 0 calc(10px * var(--eb)); }
  .entete-sep { display: none; }
  .entete-titre { padding-left: calc(4px * var(--eb)); font-size: max(11px, calc(16px * var(--et))); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .entete-fil { padding-left: calc(4px * var(--eb)); min-width: 0; }
  .entete-fil .fil { display: none; }
  .entete-fil h1 { font-size: max(11px, calc(17px * var(--et))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .entete { padding-right: calc(10px * var(--eb)); gap: calc(6px * var(--eb)); }
  .entete-outils { gap: calc(8px * var(--eb)); min-width: 0; }
  .segment { margin-right: 0; }
  .segment button .lib-outil, .btn-outil .lib-outil { display: none; }
  .segment button { padding: 0 calc(10px * var(--eb)); }
  .pilule-reseau { display: none; }
  .lateral, .lateral-a { position: fixed; z-index: 45; left: 0; top: 0; height: 100vh; width: min(calc(272px * var(--eb)), 85vw); transform: translateX(-102%); transition: transform .2s ease; overflow-y: auto; padding-top: calc(20px * var(--eb)); }
  .lateral { top: calc(64px * var(--eb)); height: calc(100vh - calc(64px * var(--eb))); }
  .menu-ouvert .lateral, .menu-ouvert .lateral-a { transform: none; box-shadow: 0 10px 40px rgba(16, 33, 58, .3); }
  .voile-menu { position: fixed; inset: 0; z-index: 44; background: rgba(16, 33, 58, .35); }
  .menu-ouvert .voile-menu { display: block; }
  .lateral-deco { display: none; }
  .contenu { padding: 0 calc(20px * var(--eb)) calc(24px * var(--eb)); }

  /* Coquille A (tableau de bord). */
  .coquille-a { grid-template-columns: minmax(0, 1fr); }
  .principal-a { padding: calc(14px * var(--eb)) calc(20px * var(--eb)) calc(32px * var(--eb)); }
  .barre-a { justify-content: flex-start; gap: calc(12px * var(--eb)); margin-right: 0; }
  .barre-a .btn-menu { margin-left: 0; }
  .recherche-a { width: auto; flex: 1 1 auto; min-width: 0; height: calc(42px * var(--eb)); }
  .salut { flex-direction: column; gap: calc(10px * var(--eb)); }
  .salut h1 { font-size: max(11px, calc(23px * var(--et))); }
  .salut-actions { margin: 0; flex-wrap: wrap; gap: calc(12px * var(--eb)); }
  .salut-actions .btn-primaire, .salut-actions .btn-secondaire { width: auto; }
  .tdb-grille { grid-template-columns: minmax(0, 1fr); row-gap: calc(16px * var(--eb)); }

  /* Écrans à deux colonnes : une seule colonne. */
  .palabres-grille, .participants-grille { grid-template-columns: minmax(0, 1fr); row-gap: calc(16px * var(--eb)); }
  .secu-grille { grid-template-columns: minmax(0, 1fr); row-gap: calc(12px * var(--eb)); }
  .sous-nav { flex-direction: row; flex-wrap: wrap; }
  .sous-nav a { height: calc(44px * var(--eb)); }
  .secu-colonnes { grid-template-columns: minmax(0, 1fr); row-gap: calc(14px * var(--eb)); }
  .bloc-membres { margin-left: 0; }
  .barre-enregistrer { left: 0; grid-template-columns: calc(34px * var(--eb)) minmax(0, 1fr) auto; }
  .btn-enregistrer { width: auto; padding: 0 calc(18px * var(--eb)); }

  /* Accueil public. */
  .acc-entete { padding: 0 calc(24px * var(--eb)); height: auto; min-height: calc(84px * var(--eb)); flex-wrap: wrap; row-gap: calc(6px * var(--eb)); padding-top: calc(10px * var(--eb)); padding-bottom: calc(10px * var(--eb)); }
  .acc-marque img { height: calc(52px * var(--eb)); }
  .acc-marque span { font-size: max(11px, calc(22px * var(--et))); letter-spacing: 2.6px; }
  .acc-nav { margin-left: 0; gap: calc(4px * var(--eb)) calc(22px * var(--eb)); font-size: max(11px, calc(16px * var(--et))); }
  .acc-nav a { min-height: calc(44px * var(--eb)); }
  .acc-boutons { gap: calc(10px * var(--eb)); }
  .acc-connexion, .acc-creer { height: calc(44px * var(--eb)); width: auto; padding: 0 calc(18px * var(--eb)); font-size: max(11px, calc(15px * var(--et))); }
  .heros { grid-template-columns: minmax(0, 1fr); padding: calc(10px * var(--eb)) calc(24px * var(--eb)) 0; }
  .heros-texte { padding-top: calc(24px * var(--eb)); }
  .heros h1 { font-size: max(11px, calc(60px * var(--et))); line-height: calc(62px * var(--et)); letter-spacing: -2px; max-width: none; }
  .heros-devise { font-size: max(11px, calc(30px * var(--et))); line-height: calc(36px * var(--et)); }
  .heros-intro { font-size: max(11px, calc(19px * var(--et))); line-height: calc(27px * var(--et)); }
  .heros-intro br { display: none; }
  .heros-actions { flex-wrap: wrap; }
  .heros-cta, .heros-voir { height: calc(52px * var(--eb)); width: auto; padding: 0 calc(22px * var(--eb)); font-size: max(11px, calc(17px * var(--et))); }
  .heros-modes { flex-wrap: wrap; margin-top: calc(28px * var(--eb)); }
  .maquette-salle { margin: calc(32px * var(--eb)) auto 0; zoom: .8; }
  .atouts { grid-template-columns: minmax(0, 1fr); row-gap: calc(24px * var(--eb)); padding: calc(32px * var(--eb)) calc(24px * var(--eb)); margin-top: calc(40px * var(--eb)); }
  .atout + .atout { padding-left: 0; border-left: 0; padding-top: calc(24px * var(--eb)); border-top: 1px solid var(--contour); }
  .acc-pied { padding: calc(20px * var(--eb)) calc(24px * var(--eb)); }

  /* Système d'interface. */
  .sys-entete { padding: calc(14px * var(--eb)) calc(20px * var(--eb)); }
  .sys-nav { margin-left: 0; width: 100%; }
  .sys-page { padding: calc(16px * var(--eb)) calc(20px * var(--eb)) calc(32px * var(--eb)); }
  .nuancier { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bande 701–1100 : l'aperçu de la palabre reste lisible sous le formulaire. */
@media (max-width: 1100px) and (min-width: 701px) {
  .maquette-salle { zoom: .82; }
}
@media (max-width: 900px) {
  .maquette-salle { zoom: .66; }
  .heros h1 { font-size: max(11px, calc(52px * var(--et))); line-height: calc(54px * var(--et)); }
}

/* Tablette portrait : tables en fiches, indicateurs en 2 × 2. */
@media (max-width: 900px) {
  .indicateurs { flex-wrap: wrap; }
  .indicateurs li { flex: 1 1 calc(50% - calc(6px * var(--eb))); }
  .ind-tete { white-space: normal; }
  .modes-a, .cr-champs { grid-template-columns: minmax(0, 1fr); }
  .mode-a { height: auto; min-height: calc(84px * var(--eb)); padding-top: calc(8px * var(--eb)); padding-bottom: calc(8px * var(--eb)); }
  .mode-a-ic { width: calc(56px * var(--eb)); height: calc(56px * var(--eb)); }
  .mode-a { grid-template-columns: calc(56px * var(--eb)) minmax(0, 1fr) calc(20px * var(--eb)); }
}
@media (max-width: 820px) {
  /* Tables : chaque ligne devient une fiche. */
  .table-liste table, .table-liste tbody, .table-liste tr, .table-liste td,
  .table-part table, .table-part tbody, .table-part tr, .table-part td { display: block; width: 100%; }
  .table-liste thead, .table-part thead { display: none; }
  .table-liste tr, .table-part tr { padding: calc(10px * var(--eb)) calc(12px * var(--eb)); border-top: 1px solid var(--contour); position: relative; }
  .table-liste tr:first-child, .table-part tbody tr:first-child { border-top: 0; }
  .table-liste td, .table-part td { border: 0 !important; padding: calc(3px * var(--eb)) 0 !important; height: auto; text-align: left !important; }
  .infos-org th { display: block; width: 100%; padding: 0 !important; background: none; border: 0 !important; font-size: max(11px, calc(12px * var(--et))); text-transform: uppercase; letter-spacing: .4px; color: var(--gris); }
  .table-liste .num, .table-liste .col-action { text-align: left; width: auto; }
  .table-part .col-case { display: none; }
  .table-part .col-actions { position: absolute; top: calc(8px * var(--eb)); right: calc(8px * var(--eb)); width: auto; padding: 0 !important; }
  .table-liste .menu-ligne .menu-deroulant { left: 0; right: auto; }
  .champ-role { width: min(calc(180px * var(--eb)), 100%); }

}

/* ============================ Téléphone ============================ */
@media (max-width: 700px) {
  body { font-size: max(11px, calc(15px * var(--et))); }
  /* Navigation inférieure. */
  .nav-bas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 46; left: 0; right: 0; bottom: 0; height: calc(64px * var(--eb)); padding-bottom: env(safe-area-inset-bottom); background: var(--foret); border-top: 1px solid rgba(255, 255, 255, .12); }
  .nav-bas a, .nav-bas button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3px * var(--eb)); min-height: calc(56px * var(--eb)); color: #DDE7E2; font-size: max(11px, calc(11.5px * var(--et))); }
  .nav-bas .actif { color: #fff; font-weight: 600; }
  .nav-bas .actif .ic { color: #F08A3C; }
  .coquille, .coquille-a { padding-bottom: calc(72px * var(--eb)); }
  .entete .btn-menu, .barre-a .btn-menu { display: none; }
  .lateral { top: 0; height: calc(100vh - calc(64px * var(--eb))); }
  .lateral-a { height: calc(100vh - calc(64px * var(--eb))); }
  .entete { height: calc(56px * var(--eb)); }
  .coquille { grid-template-rows: calc(56px * var(--eb)) minmax(0, 1fr); }
  .entete-marque { padding-left: calc(12px * var(--eb)); }
  .marque-texte { display: none; }
  .segment, .entete-outils > form, .btn-outil:not(.btn-plus) { display: none; }
  .entete-outils .menu-plus { display: block; }
  .contenu { padding: 0 calc(16px * var(--eb)) calc(24px * var(--eb)); }
  .flash { left: calc(16px * var(--eb)); right: calc(16px * var(--eb)); bottom: calc(80px * var(--eb)); max-width: none; }

  /* Cibles tactiles et champs. */
  .btn { min-height: calc(44px * var(--eb)); }
  .champ { min-height: calc(44px * var(--eb)); }
  .kebab, .vue-btn, .copier, .retour { min-width: calc(44px * var(--eb)); min-height: calc(44px * var(--eb)); }
  .titre-page { font-size: max(11px, calc(23px * var(--et))); }

  /* Créer une palabre. */
  .creer-tete { flex-direction: column; }
  .etapes { flex: 1 1 auto; width: 100%; }
  .etape { font-size: max(11px, calc(12px * var(--et))); }
  .formats-grille, .ligne-date, .ligne-fuseau, .options-grille { grid-template-columns: minmax(0, 1fr); }
  .actions-creer { flex-direction: column-reverse; }
  .actions-creer .btn { width: 100%; }

  /* Mes palabres. */
  .palabres-tete { flex-direction: column; }
  .onglets { height: auto; }
  .onglets a { min-height: calc(44px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); gap: calc(6px * var(--eb)); }
  .filtre-recherche, .filtre-mode, .filtre-date { flex: 1 1 100%; }
  .une { grid-template-columns: minmax(0, 1fr); row-gap: calc(12px * var(--eb)); }
  .une-corps { padding-right: 0; }
  .cartes-palabres, .cartes-palabres.en-grille { grid-template-columns: minmax(0, 1fr); }

  /* Statistiques. */
  .indicateur b { font-size: max(11px, calc(22px * var(--et))); }
  .barres { gap: calc(3px * var(--eb)); height: calc(160px * var(--eb)); }
  .barre-lib { font-size: max(11px, calc(9.5px * var(--et))); transform: rotate(-45deg); transform-origin: center; }

  /* Listes et participants d'une palabre. */
  .liste-tete { flex-direction: column; }
  .stats-bande { grid-template-columns: minmax(0, 1fr); padding: calc(4px * var(--eb)) 0; }
  .stats-bande > div { padding: calc(8px * var(--eb)) calc(14px * var(--eb)); }
  .stats-bande > div + div { border-left: 0; border-top: 1px solid var(--contour); }
  .filtres-part .champ, .filtres-part .btn { flex: 1 1 100%; }
  .invit-boutons { grid-template-columns: minmax(0, 1fr); }

  /* Sécurité. */
  .secu-duo { grid-template-columns: minmax(0, 1fr); }
  .bloc-auth, .bloc-conserv, .bloc-journal { min-height: 0; padding-bottom: calc(14px * var(--eb)); }
  .reco { grid-template-columns: calc(34px * var(--eb)) minmax(0, 1fr); row-gap: calc(8px * var(--eb)); }
  .reco-lien { grid-column: 1 / -1; }
  .region { grid-template-columns: minmax(0, 1fr); row-gap: calc(8px * var(--eb)); }
  .region .pastille-actif { justify-self: start; }
  .bloc-ligne { grid-template-columns: calc(40px * var(--eb)) minmax(0, 1fr); row-gap: calc(10px * var(--eb)); }
  .bloc-ligne > :last-child { grid-column: 1 / -1; justify-self: start; }
  .journal li { grid-template-columns: calc(10px * var(--eb)) calc(40px * var(--eb)) minmax(0, 1fr); }
  .j-date { grid-column: 3; text-align: left; padding-left: calc(22px * var(--eb)); }
  .barre-enregistrer { bottom: calc(64px * var(--eb)); padding: 0 calc(12px * var(--eb)); height: auto; min-height: calc(56px * var(--eb)); grid-template-columns: minmax(0, 1fr) auto; }
  .barre-enregistrer .be-ic { display: none; }
  .ecran-securite { padding: 0 calc(16px * var(--eb)) calc(140px * var(--eb)); }
  .membres-form { flex-direction: column; }

  /* Tableau de bord. */
  .principal-a { padding: calc(14px * var(--eb)) calc(16px * var(--eb)) calc(24px * var(--eb)); }
  .salut-actions .btn, .salut-actions .rejoindre-code { flex: 1 1 100%; }
  .salut-actions .rejoindre-code > summary { width: 100%; }
  .code-form { position: static; width: 100%; margin-top: calc(8px * var(--eb)); }
  .cr-tete { padding-left: 0; }
  .cr-champs, .modes-a { grid-template-columns: minmax(0, 1fr); }
  .cr-btn { align-self: stretch; width: auto; }
  .prochaine { grid-template-columns: minmax(0, 1fr) calc(44px * var(--eb)); height: auto; padding: calc(12px * var(--eb)); row-gap: calc(10px * var(--eb)); }
  .prochaine .quand { width: auto; height: auto; padding: calc(8px * var(--eb)) calc(10px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); }
  .pro-corps { padding: 0; grid-column: 1 / -1; }
  .pro-etat { border-left: 0; margin: 0; padding: 0; flex-direction: row; flex-wrap: wrap; grid-column: 1 / -1; }
  .prochaine form { grid-column: 1; }
  .btn-rejoindre { width: 100%; height: calc(44px * var(--eb)); }
  .pro-menu { grid-column: 2; grid-row: 1; }
  .pro-menu .menu-deroulant { right: 0; top: calc(48px * var(--eb)); }
  .principal-a::before { display: none; }

  /* Accueil et pages publiques. */
  .acc-entete { padding: calc(10px * var(--eb)) calc(16px * var(--eb)); }
  .acc-marque img { height: calc(42px * var(--eb)); }
  .acc-marque span { font-size: max(11px, calc(18px * var(--et))); letter-spacing: 2px; }
  .acc-nav { order: 3; width: 100%; justify-content: space-between; gap: 0 calc(12px * var(--eb)); font-size: max(11px, calc(15px * var(--et))); }
  .acc-boutons { margin-left: auto; }
  .acc-creer { display: none; }
  .heros { padding: calc(6px * var(--eb)) calc(16px * var(--eb)) 0; }
  .heros h1 { font-size: max(11px, calc(40px * var(--et))); line-height: calc(42px * var(--et)); letter-spacing: -1.2px; }
  .heros-devise { font-size: max(11px, calc(23px * var(--et))); line-height: calc(28px * var(--et)); }
  .heros-intro { font-size: max(11px, calc(16.5px * var(--et))); line-height: calc(24px * var(--et)); margin-top: calc(14px * var(--eb)); }
  .heros-actions { flex-direction: column; }
  .heros-cta, .heros-voir { width: 100%; }
  .maquette-salle { zoom: .41; margin-top: calc(24px * var(--eb)); }
  .atouts { padding: calc(24px * var(--eb)) calc(16px * var(--eb)); }
  .atout { grid-template-columns: calc(56px * var(--eb)) minmax(0, 1fr); column-gap: calc(16px * var(--eb)); padding-right: 0; }
  .atout-ic { width: calc(56px * var(--eb)); height: calc(58px * var(--eb)); }
  .atout-ic::after { display: none; }
  .acc-pied { padding: calc(18px * var(--eb)) calc(16px * var(--eb)); }
  .vitrine { padding: calc(20px * var(--eb)) calc(16px * var(--eb)) calc(40px * var(--eb)); }
  .vitrine-tete h1 { font-size: max(11px, calc(28px * var(--et))); }
  .vitrine-tete p { font-size: max(11px, calc(15.5px * var(--et))); }
  .vitrine-cartes, .vitrine-cartes.deux, .vitrine-cartes.cinq { grid-template-columns: minmax(0, 1fr); }
  .vitrine-appel .btn { width: 100%; }

  /* Connexion, invitation. */
  .auth { padding: calc(24px * var(--eb)) calc(16px * var(--eb)); justify-content: flex-start; }
  .auth-carte, .invit-carte { padding: calc(22px * var(--eb)) calc(18px * var(--eb)); }
  .auth-carte h1, .invit-carte h1 { font-size: max(11px, calc(24px * var(--et))); }
  .invit-actions .btn { flex: 1 1 100%; }

  /* Système d'interface. */
  .sys-entete { padding: calc(12px * var(--eb)) calc(16px * var(--eb)); }
  .sys-page { padding: calc(12px * var(--eb)) calc(16px * var(--eb)) calc(28px * var(--eb)); }
  .sys-outils { flex-direction: column; align-items: flex-start; }
  .sys-bascule { padding: calc(12px * var(--eb)); grid-template-columns: calc(30px * var(--eb)) minmax(0, 1fr) calc(20px * var(--eb)); }
  .sys-titre { font-size: max(11px, calc(17px * var(--et))); }
  .sys-corps { padding: calc(4px * var(--eb)) calc(12px * var(--eb)) calc(12px * var(--eb)); }
  .nuancier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champs-demo { grid-template-columns: minmax(0, 1fr); }
  .carte-evt { min-width: 0; width: 100%; }
}