/* =============================================================================
   IntraPo - Couche responsive mobile
   -----------------------------------------------------------------------------
   Chargee APRES index.css et APRES les <style> des layouts.
   Les regles utilisent !important afin de primer sur les styles de page
   (blocs <style> inline dans les templates) concus pour le desktop.

   Points de rupture :
     <= 1024px  tablette : tiroir de navigation, cibles tactiles, zones sures
     <=  900px  decoupages contenu + panneau lateral -> colonne unique,
                tableaux larges en cartes (classe posee par mobile.js)
     <=  700px  telephone : tout en colonne unique, feuilles, pleine largeur
     <=  420px  petit telephone : densite reduite
     <=  360px  tres petit telephone : indicateurs et actions en pleine largeur
   ========================================================================== */

:root {
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-right: env(safe-area-inset-right, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-safe-left: env(safe-area-inset-left, 0px);
  --m-touch: 2.75rem;
  --m-radius: 0.6rem;
  --m-card-border: rgba(148, 163, 184, 0.24);
  --m-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.dark {
  --m-card-border: rgba(148, 163, 184, 0.18);
  --m-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* -----------------------------------------------------------------------------
   1. Garde-fous globaux (tous ecrans)
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Les mots tres longs (emails, URLs, references) ne doivent jamais elargir la page. */
p,
li,
dd,
dt,
td,
th,
figcaption,
blockquote {
  overflow-wrap: break-word;
}

/* -----------------------------------------------------------------------------
   2. Coquille applicative : tiroir de navigation (<= 1024px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .main-content,
  .main-content.expanded {
    margin-left: 0 !important;
  }

  /* Le bouton "reduire la sidebar" n'a pas de sens quand elle est en tiroir. */
  .sidebar-toggle-btn {
    display: none !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
    width: var(--m-touch) !important;
    height: var(--m-touch) !important;
    flex: 0 0 auto;
  }

  .sidebar {
    display: flex !important;
    flex-direction: column;
    width: min(20rem, 87vw) !important;
    padding-left: var(--m-safe-left);
    padding-bottom: var(--m-safe-bottom);
    overflow-y: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 24px 60px -18px rgba(2, 6, 23, 0.55);
  }

  /* La sidebar en tiroir garde son en-tete et son pied fixes, seule la nav defile. */
  .sidebar > nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar > .logo-section,
  .sidebar > .user-section {
    flex: 0 0 auto;
  }

  .sidebar .nav-item,
  .sidebar .submenu-item {
    min-height: var(--m-touch) !important;
  }

  /* Verrouillage du defilement de fond pendant l'ouverture du tiroir. */
  body.mobile-drawer-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  #sidebarOverlay {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* Barre superieure : encoche + respiration horizontale. */
  html,
  body {
    --admin-shell-header-height: calc(4.1rem + env(safe-area-inset-top, 0px));
  }

  .admin-topbar {
    padding-top: var(--m-safe-top);
  }

  .admin-topbar-inner {
    --admin-topbar-x: 0.9rem;
    padding-left: max(0.9rem, var(--m-safe-left)) !important;
    padding-right: max(0.9rem, var(--m-safe-right)) !important;
    gap: 0.6rem !important;
  }

  /* Layout module (module/base.html.twig) : meme traitement, sans la classe
     .admin-topbar. */
  .main-content > header.glass {
    padding-top: var(--m-safe-top);
  }

  .main-content > header.glass > div {
    padding-left: max(0.9rem, var(--m-safe-left)) !important;
    padding-right: max(0.9rem, var(--m-safe-right)) !important;
  }

  .inner-content,
  .app-main {
    padding-left: max(1rem, var(--m-safe-left)) !important;
    padding-right: max(1rem, var(--m-safe-right)) !important;
    padding-bottom: calc(2rem + var(--m-safe-bottom)) !important;
  }

  /* Les conteneurs de tableau defilent horizontalement des la tablette.
     Plusieurs pages leur donnent overflow:visible pour laisser sortir un menu :
     sur petit ecran le defilement prime. */
  .admin-mobile-table-scroll,
  .app-table-wrap,
  [class*="table-wrap"],
  .overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* -----------------------------------------------------------------------------
   3. Colonnes doubles -> colonne simple (<= 900px)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Decoupages de page (contenu + panneau lateral) : le panneau passe dessous. */
  .ux-two-col,
  .vol-form-layout,
  .vol-form-aside,
  .folder-props-panels,
  .drive-root-form-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Barres de filtres : deux colonnes sur tablette, une seule sur telephone. */
  .ux-filter-bar,
  [class*="filter-bar"],
  [class*="filter-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* -----------------------------------------------------------------------------
   4. Telephone (<= 700px) : mise en page a colonne unique
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* 4.1 Empilement generique des grilles multi-colonnes.
         Couvre les grilles Tailwind, les <style> de page et les styles inline.
         Les exceptions utiles sont retablies juste apres. */
  [class*="grid"],
  [class*="-cols"],
  [class*="-row"],
  [class*="-fields"],
  [class*="-panels"],
  [class*="-split"],
  [class*="kpi"],
  .is-mobile-stack {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 4.2 Exceptions : les tuiles courtes restent sur deux colonnes. */
  .ux-kpi-grid,
  .vol-kpi-grid,
  .access-kpis,
  .baptism-kpis,
  .baptism-stats-kpis,
  [class*="kpi-grid"],
  [class*="-kpis"],
  .is-mobile-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .ux-kpi,
  [class*="kpi"] > [class*="kpi"],
  .access-kpi,
  .vol-kpi {
    min-height: 4.6rem !important;
    padding: 0.7rem 0.75rem !important;
  }

  .ux-kpi-value {
    font-size: 1.3rem !important;
  }

  .ux-kpi-label {
    font-size: 0.62rem !important;
  }

  /* 4.3 Exceptions : la vue semaine du planning reste une grille horaire
         qui defile horizontalement (son conteneur a deja overflow-x:auto). */
  .planning-week-days-head,
  .planning-week-grid {
    grid-template-columns: repeat(7, minmax(6rem, 1fr)) !important;
  }

  .planning-week-schedule {
    grid-template-columns: 3.2rem minmax(40rem, 1fr) !important;
  }

  /* 4.4 Densite generale du contenu. */
  .inner-content,
  .app-main {
    padding-left: max(0.8rem, var(--m-safe-left)) !important;
    padding-right: max(0.8rem, var(--m-safe-right)) !important;
    padding-top: 0.9rem !important;
  }

  .card-elevated,
  .card-static,
  .ux-panel,
  .ux-form-card,
  .app-panel,
  .app-card,
  .card-elevated.p-8,
  .card-elevated.p-6,
  .card-elevated.p-5,
  .p-6,
  .p-8 {
    padding: 0.85rem !important;
  }

  .gap-6,
  .gap-8 {
    gap: 0.75rem !important;
  }

  /* 4.5 Titres et textes. */
  .ux-page-title,
  .ux-page-heading,
  .app-title,
  .access-hero-title {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
  }

  .ux-page-subtitle,
  .ux-support,
  .app-subtitle,
  .access-hero-copy {
    margin-top: 0.35rem !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  .ux-panel-title,
  .ux-section-title,
  .app-section-title {
    font-size: 0.95rem !important;
  }

  /* 4.6 Barres d'outils : titre au-dessus, actions en dessous, pleine largeur. */
  .ux-toolbar,
  .ux-page-head,
  .ux-panel-head,
  .app-page-head,
  .access-hero,
  .home-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
    margin-bottom: 0.85rem !important;
  }

  .ux-actions,
  .app-topbar-actions,
  [class*="-actions"]:not(td):not(.users-actions):not([class*="row-actions"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.45rem !important;
  }

  .ux-actions > *,
  .ux-actions .btn {
    flex: 1 1 9rem;
    min-width: 0;
  }

  /* 4.7 Barres de filtres : chaque champ occupe toute la largeur. */
  .ux-filter-bar,
  [class*="filter-bar"],
  [class*="filter-grid"],
  [class*="toolbar-main"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  .ux-filter-bar .btn,
  [class*="filter-bar"] .btn,
  [class*="filter-bar"] .form-control,
  [class*="filter-bar"] select,
  [class*="filter-bar"] input {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 4.8 Onglets : rail defilant sans barre visible. */
  .tab-nav,
  [class*="tab-nav"],
  [class*="tabs"],
  [class*="view-switch"],
  [class*="segmented"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .tab-nav::-webkit-scrollbar,
  [class*="tab-nav"]::-webkit-scrollbar,
  [class*="view-switch"]::-webkit-scrollbar {
    display: none;
  }

  .tab-btn,
  [class*="tab-btn"] {
    flex: 0 0 auto !important;
    min-height: 2.5rem !important;
    scroll-snap-align: start;
  }
}

/* -----------------------------------------------------------------------------
   5. Tableaux -> cartes empilees (<= 700px)
   -----------------------------------------------------------------------------
   mobile.js ajoute la classe .is-mobile-cards et l'attribut data-label sur
   les tableaux eligibles (un seul <thead>, pas de colspan dans l'en-tete).
   Les tableaux non eligibles (matrices, plannings) restent en defilement
   horizontal via .admin-mobile-table-scroll.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  table.is-mobile-cards {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    background: transparent !important;
  }

  table.is-mobile-cards > thead,
  table.is-mobile-cards > colgroup {
    display: none !important;
  }

  table.is-mobile-cards > tbody,
  table.is-mobile-cards > tfoot {
    display: block !important;
    width: 100% !important;
  }

  table.is-mobile-cards > tbody > tr,
  table.is-mobile-cards > tfoot > tr {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 0.6rem !important;
    padding: 0.75rem 0.8rem !important;
    border: 1px solid var(--m-card-border) !important;
    border-radius: var(--m-radius) !important;
    background: var(--color-panel) !important;
    box-shadow: var(--m-card-shadow) !important;
  }

  table.is-mobile-cards > tbody > tr:last-child {
    margin-bottom: 0 !important;
  }

  table.is-mobile-cards > tbody > tr:hover,
  table.is-mobile-cards > tbody > tr:hover > td {
    background: var(--color-panel) !important;
  }

  /* Par defaut le libelle se place au-dessus de la valeur : c'est la seule
     disposition sure quand la cellule contient plusieurs elements. */
  table.is-mobile-cards > tbody > tr > td,
  table.is-mobile-cards > tfoot > tr > td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0.38rem 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  table.is-mobile-cards > tbody > tr > td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-muted);
    font-size: 0.63rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  /* Cellule a contenu unique : libelle et valeur sur la meme ligne.
     mobile.js pose .is-mobile-pair uniquement dans ce cas. */
  table.is-mobile-cards > tbody > tr > td.is-mobile-pair {
    display: grid !important;
    grid-template-columns: minmax(5rem, 38%) minmax(0, 1fr) !important;
    align-items: baseline !important;
    justify-items: start !important;
    gap: 0.6rem !important;
  }

  table.is-mobile-cards > tbody > tr > td.is-mobile-pair::before {
    margin-bottom: 0;
  }

  /* Premiere cellule : titre de la carte, sans libelle. */
  table.is-mobile-cards > tbody > tr > td.is-mobile-title {
    display: block !important;
    padding: 0 0 0.5rem !important;
    border-top: 0 !important;
    color: var(--color-text) !important;
    font-size: 0.95rem !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }

  table.is-mobile-cards > tbody > tr > td.is-mobile-title::before {
    content: none;
  }

  table.is-mobile-cards > tbody > tr > td.is-mobile-title + td {
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
    padding-top: 0.5rem !important;
  }

  /* Premiere cellule quand elle ne fait pas titre (case a cocher, avatar...). */
  table.is-mobile-cards > tbody > tr > td:first-child:not(.is-mobile-title) {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Cellules pleine largeur : actions, messages "aucun resultat", colspan. */
  table.is-mobile-cards > tbody > tr > td.is-mobile-full,
  table.is-mobile-cards > tbody > tr > td.is-mobile-actions,
  table.is-mobile-cards > tfoot > tr > td {
    display: block !important;
    padding-top: 0.55rem !important;
  }

  table.is-mobile-cards > tbody > tr > td.is-mobile-full::before,
  table.is-mobile-cards > tbody > tr > td.is-mobile-actions::before,
  table.is-mobile-cards > tfoot > tr > td::before {
    content: none;
  }

  table.is-mobile-cards > tbody > tr > td.is-mobile-empty {
    display: none !important;
  }

  /* Ligne vide / message unique : carte discrete et centree. */
  table.is-mobile-cards > tbody > tr.is-mobile-placeholder {
    padding: 1.1rem 0.85rem !important;
    border-style: dashed !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--color-muted) !important;
    text-align: center !important;
  }

  table.is-mobile-cards > tbody > tr.is-mobile-placeholder > td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
  }

  /* Les groupes de boutons d'action deviennent une rangee tactile. */
  table.is-mobile-cards td.is-mobile-actions > * {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
  }

  table.is-mobile-cards td.is-mobile-actions .btn,
  table.is-mobile-cards td.is-mobile-actions button,
  table.is-mobile-cards td.is-mobile-actions a.btn {
    min-height: 2.3rem !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 0.76rem !important;
  }

  /* En mode cartes, le conteneur de defilement ne doit plus contraindre. */
  table.is-mobile-cards {
    max-width: 100% !important;
  }

  .admin-mobile-table-scroll:has(> table.is-mobile-cards),
  .overflow-x-auto:has(> table.is-mobile-cards) {
    overflow: visible !important;
    border: 0 !important;
  }

  /* Tableaux laisses en defilement horizontal : indice visuel + confort. */
  .admin-mobile-table-scroll,
  .app-table-wrap,
  [class*="table-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .is-mobile-scroll-hint {
    position: relative;
  }

  .is-mobile-scroll-hint::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.6rem;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), color-mix(in oklab, var(--color-bg) 88%, transparent));
  }
}

/* -----------------------------------------------------------------------------
   6. Formulaires et champs (<= 700px)
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* 16px minimum : en dessous, iOS zoome automatiquement au focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .app-field,
  .app-select,
  .app-textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: var(--m-touch) !important;
    font-size: 16px !important;
  }

  textarea,
  .app-textarea {
    min-height: 6.5rem !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.15rem !important;
    height: 1.15rem !important;
    flex: 0 0 auto;
  }

  label {
    overflow-wrap: anywhere;
  }

  /* Les champs cote a cote (dates, heures) restent lisibles. */
  fieldset {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
  }

  form > div,
  form fieldset > div {
    min-width: 0;
  }

  /* Select2 : largeur contrainte au conteneur. */
  .select2-container,
  .select2-container--default .select2-selection--multiple,
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple .select2-search--inline,
  .select2-container--default .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .select2-container--default .select2-search--inline .select2-search__field {
    font-size: 16px !important;
  }

  .select2-dropdown {
    max-width: calc(100vw - 1.6rem) !important;
  }

  /* Groupes de champs generes par Symfony. */
  .ux-form-card form > div,
  .ops-form-grid form > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }
}

/* -----------------------------------------------------------------------------
   7. Boutons et cibles tactiles (<= 700px)
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .btn,
  .app-button,
  button,
  a[role="button"],
  summary {
    touch-action: manipulation;
  }

  .btn,
  .app-button {
    min-height: 2.6rem !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem !important;
  }

  .btn-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* Les boutons d'un formulaire complet passent en pleine largeur. */
  .ux-form-card form > button,
  .ux-form-card form > .btn,
  .ux-form-actions .btn,
  form > .form-actions .btn {
    width: 100% !important;
  }

  /* Rangee de boutons de bas de formulaire. */
  .ux-form-actions,
  .form-actions {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }
}

/* -----------------------------------------------------------------------------
   8. Modales, feuilles et menus flottants (<= 700px)
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* Les superpositions deviennent des feuilles ancrees en bas d'ecran. */
  .modal-overlay,
  .drive-modal-overlay,
  .parish-modal-overlay,
  .is-mobile-sheet-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .modal,
  .modal-content,
  .search-modal-content,
  .drive-modal,
  .parish-modal,
  .is-mobile-sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(88dvh, calc(100dvh - 2.5rem)) !important;
    margin: 0 !important;
    padding-bottom: calc(0.9rem + var(--m-safe-bottom)) !important;
    border-radius: 1rem 1rem 0 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Poignee visuelle de feuille. */
  .modal::before,
  .modal-content::before,
  .search-modal-content::before,
  .drive-modal::before,
  .parish-modal::before,
  .is-mobile-sheet::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
    flex: 0 0 auto;
  }

  .parish-modal-actions,
  .drive-modal-actions,
  .modal-actions {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }

  .parish-modal-actions > *,
  .drive-modal-actions > *,
  .modal-actions > * {
    width: 100% !important;
  }

  /* Menus deroulants : largeur limitee a l'ecran, jamais hors cadre. */
  .dropdown-menu,
  .admin-account-panel {
    right: 0 !important;
    left: auto !important;
    width: min(20rem, calc(100vw - 1.4rem)) !important;
  }

  .dropdown-menu,
  .admin-account-panel,
  [class*="-popover"],
  [class*="-menu-panel"] {
    max-width: calc(100vw - 1.4rem) !important;
    max-height: min(70dvh, 28rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .admin-account-panel {
    position: fixed !important;
    top: calc(var(--admin-shell-header-height) + 0.35rem) !important;
    right: 0.6rem !important;
  }

  .admin-account-action,
  .admin-account-action-button {
    min-height: var(--m-touch) !important;
  }

  /* Bandeau d'usurpation d'identite. */
  .impersonation-banner {
    padding: 0.55rem 0.8rem !important;
    font-size: 0.78rem !important;
    text-align: center;
  }
}

/* -----------------------------------------------------------------------------
   9. Conteneurs specifiques aux modules (<= 700px)
   -----------------------------------------------------------------------------
   Les blocs <style> des pages definissent des grilles a colonnes fixes qui
   depassent la largeur d'un telephone. On les ramene a une colonne.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  [class*="-shell"],
  [class*="-hero"],
  [class*="-layout"],
  [class*="-workspace"],
  [class*="-facts"],
  [class*="-metrics"],
  [class*="-target"],
  [class*="-summary"],
  .pastoral-member-facts,
  .pastoral-stats-grid,
  .org-hero-main,
  .module-hero,
  .module-management-shell,
  .module-feature-grid,
  .document-workspace,
  .drive-root-form-layout,
  .drive-role-options,
  .baptism-stats-shell,
  .baptism-duplicate-shell,
  .baptism-duplicate-target,
  .access-step-grid,
  .access-section,
  .profile-grid,
  .folder-props-panels,
  .vol-form-layout,
  .vol-form-aside,
  .rgpd-grid,
  .rgpd-signature-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Groupes de choix courts : deux colonnes restent confortables. */
  .vol-choice-cards,
  .vol-choice-grid,
  .vol-choice-grid-compact,
  .vol-choice-stack,
  .vol-choice-inline,
  .rgpd-choice-grid,
  .module-kpis,
  .org-metrics,
  .folder-props-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  /* Les panneaux lateraux collants redeviennent des blocs normaux. */
  [class*="-aside"],
  [class*="-sidebar-panel"],
  [class*="-side-panel"] {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fils d'ariane : defilement horizontal plutot que retour a la ligne. */
  [class*="breadcrumb"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  [class*="breadcrumb"]::-webkit-scrollbar {
    display: none;
  }

  [class*="breadcrumb"] > * {
    flex: 0 0 auto;
  }
}

/* -----------------------------------------------------------------------------
   10. Exceptions finales (doivent primer sur les regles generiques ci-dessus)
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* Vue semaine du planning : grille horaire a defilement horizontal. */
  .planning-week-days-head,
  .planning-week-grid {
    grid-template-columns: repeat(7, minmax(6rem, 1fr)) !important;
  }

  .planning-week-schedule {
    grid-template-columns: 3.2rem minmax(40rem, 1fr) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Legende de la carte des membres : deux colonnes compactes. */
  .member-map-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Champ de recherche + bouton : reste sur une ligne. */
  .drive-search-bar,
  [class*="-search-bar"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

/* -----------------------------------------------------------------------------
   11. Petits telephones (<= 420px)
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .inner-content,
  .app-main {
    padding-left: max(0.7rem, var(--m-safe-left)) !important;
    padding-right: max(0.7rem, var(--m-safe-right)) !important;
  }

  .card-elevated,
  .card-static,
  .ux-panel,
  .ux-form-card,
  .app-panel,
  .app-card {
    padding: 0.7rem !important;
  }

  .ux-page-title,
  .ux-page-heading,
  .app-title {
    font-size: 1.18rem !important;
  }

  /* Titre de la barre superieure : jamais de debordement. */
  .admin-topbar p,
  .admin-topbar h1 {
    max-width: calc(100vw - 8rem) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.is-mobile-cards > tbody > tr > td.is-mobile-pair {
    grid-template-columns: minmax(4.5rem, 42%) minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }
}

/* -----------------------------------------------------------------------------
   11 bis. Layout public (base.html.twig, prefixe .app-*)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .app-topbar {
    padding-top: var(--m-safe-top);
  }

  .app-topbar-inner {
    min-height: 3.6rem !important;
    padding-left: max(0.9rem, var(--m-safe-left)) !important;
    padding-right: max(0.9rem, var(--m-safe-right)) !important;
    gap: 0.6rem !important;
  }
}

@media (max-width: 700px) {
  .app-topbar-inner {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .app-topbar-actions {
    width: 100%;
    justify-content: flex-start !important;
  }

  .app-brand img {
    width: 34px !important;
    height: 34px !important;
  }

  .app-user-chip,
  .app-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Les tuiles d'indicateurs restent sur deux colonnes. */
  .app-grid:has(> .app-kpi) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .app-kpi {
    min-height: 4.6rem !important;
    padding: 0.75rem !important;
  }

  .app-kpi-value {
    font-size: 1.35rem !important;
  }

  .app-table-wrap:has(> table.is-mobile-cards) {
    border: 0 !important;
    overflow: visible !important;
  }

  .app-list-item {
    padding: 0.7rem !important;
  }
}

/* -----------------------------------------------------------------------------
   11 ter. Ecrans tres etroits (<= 360px)
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {
  .ux-kpi-grid,
  .vol-kpi-grid,
  .access-kpis,
  .baptism-kpis,
  .baptism-stats-kpis,
  [class*="kpi-grid"],
  [class*="-kpis"],
  .app-grid:has(> .app-kpi) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ux-actions > *,
  .ux-actions .btn {
    flex: 1 1 100%;
    width: 100% !important;
  }
}

/* -----------------------------------------------------------------------------
   12. Confort et accessibilite
   -------------------------------------------------------------------------- */

/* Ecrans tactiles : pas d'effet de survol residuel apres un appui. */
@media (hover: none) {
  .card-elevated:hover,
  .app-card:hover,
  .app-panel:hover,
  .app-kpi:hover,
  .home-module-card:hover {
    transform: none !important;
    box-shadow: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  #sidebarOverlay,
  .btn,
  .card-elevated {
    transition-duration: 0.01ms !important;
  }
}

/* Telephone en paysage : la barre superieure prend moins de hauteur. */
@media (max-height: 480px) and (orientation: landscape) {
  html,
  body {
    --admin-shell-header-height: calc(3.4rem + env(safe-area-inset-top, 0px));
  }

  .admin-topbar-inner {
    min-height: 0 !important;
  }
}

/* -----------------------------------------------------------------------------
   12 bis. Cibles tactiles sur tablette
   -----------------------------------------------------------------------------
   Sous 1024px l'appareil est presque toujours tactile : on remonte la hauteur
   des controles compacts prevus pour la souris.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) and (pointer: coarse) {
  .btn,
  .app-button,
  a[role="button"] {
    min-height: 2.4rem !important;
  }

  .btn-icon {
    min-width: 2.4rem !important;
    min-height: 2.4rem !important;
  }

  table .btn,
  table button,
  .users-actions .btn,
  [class*="-actions"] .btn {
    min-height: 2.25rem !important;
  }

  .nav-item,
  .submenu-item,
  .admin-account-action,
  .admin-account-action-button,
  .dropdown-item {
    min-height: 2.75rem !important;
  }
}

/* -----------------------------------------------------------------------------
   13. Classes posees par mobile.js (dernier mot dans la cascade)
   -----------------------------------------------------------------------------
   mobile.js mesure les grilles qui debordent reellement de leur conteneur et
   leur applique une de ces deux classes. Placees en fin de fichier pour primer
   sur toutes les regles ci-dessus.
   -------------------------------------------------------------------------- */

.is-mobile-halve {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.is-mobile-stack {
  grid-template-columns: minmax(0, 1fr) !important;
}