/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — le site sur téléphone, iPad (portrait et paysage) et bureau.
   ════════════════════════════════════════════════════════════════════════════

   Demande du propriétaire (24/09/2026) : « highly responsive », « 100 %
   responsive and look great on all devices ». Les feuilles d'El Ourwa
   (style.css, pages.css — copiées au caractère près) ne sont PAS modifiées :
   tout ce qui adapte la mise en page aux petits écrans vit ici, chargé EN
   DERNIER (app/layout.tsx), donc prioritaire à spécificité égale.

   Les paliers, du plus large au plus étroit :
     ≤ 1366  iPad Pro paysage, petits portables
     ≤ 1180  iPad Air paysage
     ≤ 1024  tiroir de navigation (le seuil d'El Ourwa) — iPad portrait
     ≤ 820   iPad portrait étroit, grands téléphones paysage
     ≤ 640   téléphones
     ≤ 420   petits téléphones

   Relevé avant/après : e2e/capture-responsive.spec.ts (CAPTURE=1).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Fondations, toutes largeurs ─────────────────────────────────────── */

/* Une image, une vidéo ou un graphique ne dépasse jamais son conteneur. */
img, video, canvas { max-width: 100%; }
img, video { height: auto; }

/* Les longs mots (courriels, identifiants, matricules) se coupent au lieu de
   pousser la carte hors de l'écran. */
.form-card, .table-container, .kpi-card, .alert, .modal, .page-subtitle {
  overflow-wrap: anywhere;
}

/* Défilement horizontal lisible : une ombre au bord dit « il y a une suite ».
   (La technique des arrière-plans « local » / « scroll » : l'ombre disparaît
   quand on atteint le bord.) */
.table-container, .overflow-x, .table-responsive {
  background:
    linear-gradient(to right, var(--bg-card, #fffaf1) 30%, rgba(255,250,241,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg-card, #fffaf1) 30%, rgba(255,250,241,0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(32,30,29,.16), rgba(32,30,29,0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(32,30,29,.16), rgba(32,30,29,0)) right center / 12px 100% no-repeat scroll,
    var(--bg-card, #fffaf1);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Grands écrans : le contenu respire, centré, au lieu de s'étirer. */
@media (min-width: 1600px) {
  .page-content { margin-inline: auto; }
}

/* ── 1. iPad paysage et petits portables (≤ 1366) ───────────────────────── */
@media (max-width: 1366px) and (min-width: 1025px) {
  /* 264 px de barre latérale sur 1180 : on lui en rend un peu au contenu. */
  :root { --sidebar-width: 232px; }
  .sidebar { width: var(--sidebar-width); }
  .main-content { margin-left: var(--sidebar-width); }
  .page-content { padding: 1.35rem 1.4rem; }
  .page-header { padding: .95rem 1.4rem; }
}

/* ── 2. Tactile : iPad et téléphones (≤ 1024) ───────────────────────────── */
@media (max-width: 1024px) {
  /* Cibles de 40 px au moins (recommandation Apple 44, Google 48 — 40 garde les
     tableaux lisibles). `min-height` l'emporte sur toute hauteur fixée. */
  .btn, a.btn, .st-btn, .hub-tab, .sidebar-link,
  select, textarea,
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]) {
    min-height: 40px;
  }
  .btn-sm, .st-btn { min-height: 38px; }
  .st-btn { padding: .45rem .8rem; display: inline-flex; align-items: center; justify-content: center; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .modal-close { width: 40px; height: 40px; }
  /* iOS agrandit la page sur tout champ sous 16 px : on s'en tient à 16. */
  @supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: 16px; }
  }

  /* L'en-tête, compact : le bouton du menu (fixe, 42 px) à gauche, le titre à
     côté, le sélecteur d'année à droite quand il y a la place. */
  .page-header {
    padding: .6rem 1rem .6rem 4.1rem;
    min-height: 64px;
    gap: .45rem .9rem;
    align-items: center;
  }
  .page-title { font-size: 1.32rem; line-height: 1.2; }
  .page-subtitle {
    font-size: .8rem; margin-top: .12rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .page-header-right { gap: .45rem; }
  .header-date { display: none; }

  /* Les onglets des hubs : une seule rangée qui défile, jamais deux rangées
     qui poussent le contenu ; plus collés sous l'en-tête (sa hauteur varie). */
  .hub-nav {
    position: static; top: auto;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 1.6rem;
  }
  .hub-nav::-webkit-scrollbar { display: none; }
  .hub-tab { flex: 0 0 auto; scroll-snap-align: start; }

  /* Les grilles de chiffres : autant de colonnes que la largeur en permet. */
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; }

  /* Deux colonnes écrites en style en ligne : une seule sous 820 (plus bas).
     Ici, elles gardent de quoi respirer. */
  .modal { width: min(92vw, 640px); }
}

/* ── 3. iPad portrait étroit, grands téléphones (≤ 820) ──────────────────── */
@media (max-width: 820px) {
  .page-content { padding: 1rem .9rem 2.4rem; }
  .form-card { padding: 1.1rem; }
  .form-row { grid-template-columns: 1fr; }
  .table-header { padding: .9rem 1rem; }

  /* Les grilles « 1fr 1fr » écrites dans les pages (style en ligne) : une
     colonne. Deux orthographes : celle du rendu serveur (sans espace) et celle
     du navigateur après une navigation côté client (avec espace). */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Un champ ne réclame jamais plus que la largeur de l'écran. */
  [style*="min-width:280px"], [style*="min-width: 280px"] { min-width: 0 !important; }

  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 9rem; }
}

/* ── 4. Téléphones (≤ 640) ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* En-tête : n'est plus collé en haut — sur 812 px de haut, deux barres
     collantes mangeaient un cinquième de l'écran à chaque défilement. */
  .page-header {
    position: static;
    padding: .55rem .85rem .6rem 3.85rem;
    min-height: 60px;
  }
  .page-title { font-size: 1.15rem; }
  .page-subtitle { font-size: .76rem; -webkit-line-clamp: 1; }
  .page-header-right { width: 100%; }
  .page-header-right select, .header-annee select, #hdr-annee { max-width: 100%; }

  .page-content { padding: .85rem .7rem 2.2rem; }
  .hub-shell { gap: .85rem; }
  .hub-nav { padding: .35rem 1.4rem .35rem .35rem; border-radius: 14px; }
  .hub-tab { padding: .5rem .8rem; font-size: .84rem; }

  /* Les chiffres clés : deux par rangée, plus serrés — quatre cartes pleine
     largeur faisaient un écran entier avant le premier graphique. */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1.1rem; }
  .kpi-card { padding: .75rem .8rem; }
  .kpi-value { font-size: 1.28rem; }
  .kpi-label { font-size: .68rem; }

  .form-card { padding: .95rem .9rem; border-radius: 14px; }
  .form-card h3 { font-size: 1.05rem; margin-bottom: .9rem; }
  /* Formulaires de filtre en ligne : chaque champ prend la largeur. */
  form[style*="flex"] > .form-group,
  form[style*="flex"] > div:not(.modal-footer) { flex: 1 1 100%; min-width: 0; }
  .form-group { min-width: 0; }

  .table-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .table-header h3 { font-size: 1rem; }

  /* Modales : une feuille qui monte du bas, pleine largeur, facile au pouce. */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; max-width: 100% !important; max-height: 92vh;
    border-radius: 18px 18px 0 0; padding: 1.2rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }
  .modal-header { margin-bottom: 1rem; }
  .modal-footer .btn { flex: 1 1 100%; }

  .alert { font-size: .88rem; }
  .empty-state { padding: 2rem 1rem; }

  /* ── Les tableaux de liste en cartes (components/tableaux-cartes.tsx) ── */
  .table-container:has(table[data-cartes]),
  .overflow-x:has(table[data-cartes]),
  .table-responsive:has(table[data-cartes]) {
    background: transparent; border: 0; box-shadow: none;
    overflow: visible; max-height: none;
  }
  .table-container:has(table[data-cartes]) > .table-header {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; margin-bottom: .6rem;
  }
  table[data-cartes] { border: 0; }
  table[data-cartes] thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  table[data-cartes], table[data-cartes] tbody, table[data-cartes] tfoot { display: block; width: 100%; }
  table[data-cartes] tr {
    display: block;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow);
    padding: .35rem .9rem; margin-bottom: .6rem;
  }
  table[data-cartes] tbody tr:hover { background: var(--bg-card); }
  /* ⚠ `flex-wrap: wrap` + titre en `margin-right: auto` (et non `space-between`) :
     une cellule qui porte PLUSIEURS pastilles (les échéances d'un prêt, « Janv
     2027 : 10 000 » × 10) les posait sur une seule ligne, la dernière hors de
     l'écran. Elles passent maintenant à la ligne, alignées à droite. */
  table[data-cartes] td {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .3rem .8rem;
    padding: .42rem 0; border: 0; border-bottom: 1px dashed var(--o-n-300, #dcd3c4);
    text-align: right; font-size: .9rem; min-height: 0;
  }
  table[data-cartes] td > * { max-width: 100%; }
  table[data-cartes] td:last-child { border-bottom: 0; }
  table[data-cartes] td::before {
    content: attr(data-label);
    flex: 0 0 auto; max-width: 48%; margin-right: auto;
    text-align: left; font-size: .68rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
  }
  table[data-cartes] td[data-label=""]::before { content: none; }
  /* La première colonne (le nom, la famille) : le titre de la carte. */
  table[data-cartes] td:first-child {
    display: block; text-align: left; font-size: 1rem; font-weight: 700;
    padding-top: .55rem; border-bottom: 1px solid var(--o-n-300, #dcd3c4);
  }
  table[data-cartes] td:first-child::before { content: none; }
  /* Une cellule vide (tiret, rien) ne fait pas une ligne vide. */
  table[data-cartes] td:empty { display: none; }
  /* La colonne d'actions (titre vide ou « Actions ») : des boutons en pied, à
     la largeur du pouce. */
  table[data-cartes] td[data-label=""],
  table[data-cartes] td[data-label="Actions"],
  table[data-cartes] td[data-label="Action"] {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; padding-top: .6rem;
  }
  table[data-cartes] td[data-label="Actions"]::before,
  table[data-cartes] td[data-label="Action"]::before { content: none; }
  table[data-cartes] td .btn, table[data-cartes] td .st-btn { flex: 1 1 auto; }
  /* La ligne-message (« Aucun parent. ») : une carte simple, centrée. */
  table[data-cartes] td[data-message] {
    display: block; text-align: center; color: var(--text-muted); border: 0;
  }
  table[data-cartes] td[data-message]::before { content: none; }
}

/* ── 5. Petits téléphones (≤ 420) ───────────────────────────────────────── */
@media (max-width: 420px) {
  .page-title { font-size: 1.06rem; }
  .kpi-value { font-size: 1.15rem; }
  .hub-tab { font-size: .8rem; padding: .45rem .7rem; }
}

/* ── 6. Paysage bas (téléphone couché) : l'en-tête ne vole pas l'écran ──── */
@media (max-height: 500px) and (orientation: landscape) {
  .page-header { position: static; }
  .modal { max-height: 96vh; }
}

/* L'impression n'hérite de rien de tout ceci. */
@media print {
  table[data-cartes] thead { position: static; width: auto; height: auto; clip: auto; clip-path: none; }
  table[data-cartes] { display: table; }
  table[data-cartes] tbody { display: table-row-group; }
  table[data-cartes] tr { display: table-row; box-shadow: none; }
  table[data-cartes] td { display: table-cell; text-align: left; }
  table[data-cartes] td::before { content: none; }
}

/* ── 7. Retouches relevées par la capture du 24/09 ───────────────────────── */
@media (max-width: 1024px) {
  /* Console de la plateforme : « Entrer » (bouton fantôme) à 17 px de haut. */
  .btn-ghost { min-height: 40px; padding-inline: .9rem; }
  /* Les volets repliables (« Configurer les montants… ») : une cible au doigt. */
  details > summary { padding-block: .55rem; cursor: pointer; }
}
@media (max-width: 640px) {
  /* Les rangées écrites en flex dans les pages (puces de mois, montants) :
     elles passent à la ligne au lieu de sortir de l'écran (/finance/dettes). */
  .page-content [style*="display:flex"],
  .page-content [style*="display: flex"] { flex-wrap: wrap; }
  .page-content [style*="white-space:nowrap"],
  .page-content [style*="white-space: nowrap"] { white-space: normal !important; }
}

/* ── Le nom de l'école dans la barre latérale ────────────────────────────────
   Un nom long (« Heavenly Private Educational Institution », Jinan, 29/09)
   passe sur plusieurs lignes : l'interligne hérité les espaçait d'une ligne
   vide. Serré ici ; un nom d'une ligne (El Mourad) ne change pas. */
.sidebar-logo span { line-height: 1.2; }