/* Idylle — adaptation aux téléphones et tablettes.

   Chargée après idylle.css, cette feuille ne doit RIEN changer au-dessus de
   960 px. Chaque règle relève de l'un de ces trois cas :
     1. une classe extraite d'un style en ligne, dont la valeur de base est
        strictement celle qu'elle remplace ;
     2. un élément réservé au mobile, masqué par défaut ;
     3. une règle placée sous `@media screen and (max-width: …)`. Le mot
        `screen` n'est pas décoratif : une page A4 mesure environ 794 px, et
        sans lui l'impression d'un écran depuis un poste de bureau basculerait
        dans la mise en page mobile.

   Paliers : 960 (coque mobile : tiroir, barre d'onglets), 640 (téléphone :
   cartes, formulaires sur une colonne), 480 (petit téléphone). Les seuils
   historiques d'idylle.css (520, 600, 720, 900) restent en l'état.

   Empilement : les valeurs existantes ne bougent pas — voile du tiroir 75,
   tiroir 80, voiles 90, panneaux 100, menu 120, vision 200/210. La barre
   supérieure collante prend 60, la barre d'onglets 70 : sous le voile du
   tiroir, qui les recouvre.

   Pour neutraliser d'urgence une section, remplacer sa requête par
   `(max-width: 0px)`. Les sections 1 et 2 ne se désactivent pas. */

:root {
  --topbar-h-m: 56px;
  --tabbar-h: 60px;
}

/* ============ 1. Composants extraits (valeurs de bureau) ============ */

/* Message flash du gabarit — reprend le `padding:16px 40px 0` en ligne. */
.app-flash { padding: 16px 40px 0; }

/* Enveloppe de défilement horizontal des tableaux — reprend `overflow-x:auto`. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Compteurs de soldes (tableau de bord, Poser) — nombre de colonnes porté par
   `--cols`, reprend `repeat(N, 1fr)` en ligne. */
.soldes-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 16px; }

/* Poser un congé — calendrier et historique. */
.calendar-wrap { padding: 18px 28px 4px; }
.calendar-blank { height: 62px; }
.req-list { padding: 8px 28px 20px; }

/* Poser un congé — dates « Du » et « Au », côte à côte. */
.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Lignes de demande : la grille de chaque écran, telle qu'elle était en ligne.
   L'enveloppe d'actions s'efface (display: contents) : la grille garde son
   nombre de cellules. */
.req-row--dash { grid-template-columns: 72px 1fr auto auto; }
.req-row--poser { grid-template-columns: 88px 1fr auto auto auto auto; padding: 13px 0; gap: 12px; }
.req-row__actions { display: contents; }

/* Mes demandes — dépôt d'un justificatif dans la cellule. */
.upload-inline { margin-top: 6px; display: flex; gap: 4px; align-items: center; }
.upload-inline__file { font-size: 11px; padding: 4px; }
.data-table .cell--actions { white-space: nowrap; }
.data-table .cell--actions form .btn { margin-left: 4px; }

/* Télétravail — formulaire de la grille mensuelle, reprend le style en ligne. */
.tt-form { padding: 0 28px 24px; }

/* Validation — lignes de décision : la grille en ligne d'origine. Le filet
   entre deux lignes remplace le test `$loop->first` ; l'enveloppe d'actions
   s'efface sur poste de bureau. */
.decision-row { display: grid; grid-template-columns: 44px 1fr auto auto auto; gap: 18px; align-items: center; padding: 18px 28px; }
.decision-row + .decision-row { border-top: 1px solid var(--beige-200); }
.decision-row--done { grid-template-columns: 44px 1fr auto auto; padding: 14px 28px; }
.decision-row__meta { text-align: right; }
.decision-row__actions { display: contents; }
.decision-row__note { grid-column: 2 / -1; margin-top: -6px; }

/* Équipe — largeur minimale du tableau, portée par `--table-min`. */
.data-table--wide { min-width: var(--table-min); }

/* Écrans RH — lignes de liste dont la grille est portée par `--tpl`. */
.list-row { display: grid; grid-template-columns: var(--tpl); }

/* Planning — champ de filtre à largeur fixe (`--w`), titre de semaine
   insécable, pile des avertissements de l'éditeur (autrefois en `cssText`). */
.toolbar__field { width: var(--w); }
.planning-week { white-space: nowrap; }
.planning-toasts { position: fixed; bottom: 20px; right: 20px; max-width: 480px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }

/* Texte réservé aux lecteurs d'écran. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============ 2. Éléments réservés au mobile ============ */
.tabbar, .sidebar__close { display: none; }

/* ============ 3. Lot 0 — fondations ============ */
@media screen and (max-width: 960px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Hauteur d'écran réelle : `100vh` compte la barre d'adresse repliée et
     fait déborder la coque d'autant. Les navigateurs qui ignorent `dvh`
     gardent la valeur d'idylle.css. */
  .app-shell { min-height: 100dvh; }
  .sidebar { height: 100dvh; max-height: 100dvh; }
  body.is-vision .sidebar {
    height: calc(100dvh - var(--vision-banner-h));
    max-height: calc(100dvh - var(--vision-banner-h));
  }
  .video-panel { max-height: calc(100dvh - 48px); }

  /* La barre supérieure reste à portée : le burger et la cloche ne doivent
     pas disparaître au premier défilement. */
  .topbar {
    position: sticky; top: 0; z-index: 60; height: var(--topbar-h-m);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  body.is-vision .topbar { top: var(--vision-banner-h); }
  .vision-banner {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* Panneau de notifications : sous la barre, jamais plus haut que l'écran. */
  .notif-panel {
    top: calc(var(--topbar-h-m) + 8px); left: 8px; right: 8px; width: auto;
    max-height: calc(100dvh - var(--topbar-h-m) - 16px - env(safe-area-inset-bottom));
  }
  body.is-vision .notif-panel {
    top: calc(var(--topbar-h-m) + var(--vision-banner-h) + 8px);
    max-height: calc(100dvh - var(--topbar-h-m) - var(--vision-banner-h) - 16px - env(safe-area-inset-bottom));
  }

  .page {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .app-flash {
    padding: 12px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  }

  /* idylle.css passe toute `.flex-between` de la page en colonne. C'est juste
     pour l'en-tête d'un écran, pas pour une petite ligne « libellé · date » au
     fond d'une carte : celles-ci reviennent en ligne, avec retour si besoin. */
  .page .flex-between { flex-direction: row; align-items: center; }
  .page > .flex-between { flex-direction: column; align-items: stretch; }

  /* Une carte « à plat » porte un tableau ou une liste bord à bord. La règle
     mobile `.card { padding: 18px }` d'idylle.css, placée plus bas dans le
     fichier, l'emportait sur elle. */
  .card--flat { padding: 0; }

  /* Onglets : ils défilent plutôt que de pousser la page hors de l'écran. Le
     filet du bas passe en ombre intérieure, car le débordement rognerait le
     `margin-bottom: -1px` de l'onglet actif. */
  .tabs {
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 0; box-shadow: inset 0 -1px 0 var(--beige-200);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs__btn { flex: none; white-space: nowrap; margin-bottom: 0; min-height: 44px; }

  .flex-row, .flex-end { flex-wrap: wrap; }

  /* Pistes en `minmax(0, 1fr)` : un simple `1fr` ne descend pas sous la
     largeur minimale de son contenu (un champ date, un nombre insécable) et
     pousse toute la colonne hors de l'écran. */
  .grid-3, .grid-2, .grid-body, .grid-poser { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }

  /* 16 px : en deçà, Safari iOS zoome sur le champ au moment de la saisie. */
  .input, .select, .textarea { font-size: 16px; }

  /* Cibles tactiles : 44 px, la mesure qu'un pouce atteint sans viser. */
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn--text { width: auto; }
  .topbar__bell { padding: 11px; }
  .topbar__burger { width: 44px; height: 44px; margin-right: 4px; }
  .notif-close, .video-close { padding: 11px; margin: -8px -8px 0 0; }
  .sidebar__item, .sidebar__logout { min-height: 44px; }
  .calendar-day, .tt-day, .cell-btn { touch-action: manipulation; }

  .data-table th, .data-table td { padding: 10px 12px; }

  /* Infobulles de la jauge des congés : même invisibles (opacité nulle),
     elles occupent la mise en page et, centrées sur un segment du bord,
     débordent de l'écran — tout le contenu se met alors à glisser
     latéralement. Elles n'existent donc qu'au survol ou au focus ; celles des
     extrémités s'ancrent au bord. La légende sous la jauge porte les mêmes
     valeurs. */
  .cp-gauge__seg::after, .cp-gauge__seg::before { display: none; }
  .cp-gauge__seg:hover::after, .cp-gauge__seg:hover::before,
  .cp-gauge__seg:focus-visible::after, .cp-gauge__seg:focus-visible::before { display: block; }
  .cp-gauge__seg:first-child::after { left: 0; transform: none; }
  .cp-gauge__seg:last-child::after { left: auto; right: 0; transform: none; }

  /* `.table` n'a pas de style sur poste de bureau (profil, récupération) ; sur
     un téléphone, un tableau brut devient illisible. */
  .table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .table th, .table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--beige-200); }
}

@media screen and (max-width: 640px) {
  .page {
    padding-top: 16px; padding-bottom: 24px; gap: 20px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .card { padding: 16px; }
  .card--flat { padding: 0; }
  .card--pad-22, .card--pad-28 { padding: 16px; }
  .card-header { padding: 14px 16px 10px; }
  .card-body { padding: 14px 16px; }
  .legend { padding: 12px 16px; gap: 8px 14px; }

  .h1 { font-size: 24px; }
  .h1--xl { font-size: 26px; }

  .radio-group { flex-wrap: wrap; }
  .radio-group__option { flex: 1 1 180px; }

  .refus__head { padding: 20px 18px 0; }
  .refus__motifs { margin: 16px 18px 0; }
  .refus__pied { margin: 14px 18px 0; }
  .refus__actions { padding: 18px 18px 20px; }
  .refus__actions .btn { width: 100%; justify-content: center; }

  .notif-header, .notif-tabs-wrap { padding-left: 16px; padding-right: 16px; }
  .notif-item { padding: 14px 16px; }
  .notif-footer { padding: 12px 16px; }
}

/* Palier historique d'idylle.css (520 px) : la règle `.grid-4` ci-dessus,
   chargée après, le masquerait sans ce rappel. */
@media screen and (max-width: 520px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 480px) {
  .radio-group { flex-direction: column; }
  /* Boutons d'action empilés, l'action principale — la dernière du code —
     en tête. */
  .flex-end { flex-direction: column-reverse; align-items: stretch; }
  .flex-end > .btn { justify-content: center; }
}

/* ============ Lot 1 — tiroir et barre d'onglets ============ */
@media screen and (max-width: 960px) {
  /* Le tiroir glisse, et son ombre ne déborde plus sur le bord gauche de
     l'écran une fois refermé. */
  .sidebar {
    transition: transform var(--duration-base) var(--ease-out);
    box-shadow: none;
    padding-left: env(safe-area-inset-left);
  }
  .sidebar.is-mobile-open { box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); }
  .sidebar__nav { overscroll-behavior: contain; }
  html.has-drawer-open, html.has-drawer-open body { overflow: hidden; }

  .sidebar__brand { position: relative; }
  .sidebar__close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 12px; right: 8px; width: 44px; height: 44px;
    background: transparent; border: 0; border-radius: var(--radius-sm);
    color: rgba(253, 251, 247, .78); cursor: pointer;
  }
  .sidebar__close:hover { background: rgba(0, 0, 0, .12); color: var(--beige-atelier); }

  /* Barre d'onglets : les gestes du quotidien sous le pouce. */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #fff; border-top: 1px solid var(--beige-200);
    box-shadow: 0 -4px 16px rgba(26, 20, 16, .06);
  }
  .tabbar__item {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px 4px; background: none; border: 0; cursor: pointer;
    font-family: var(--font-body); color: var(--fg-3); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__item.is-active { color: var(--bordeaux-700); }
  .tabbar__item.is-active::before {
    content: ''; position: absolute; top: -1px; left: 24%; right: 24%; height: 2px;
    border-radius: 0 0 2px 2px; background: var(--ocre-700);
  }
  .tabbar__item:focus-visible { outline: 2px solid var(--ocre-700); outline-offset: -4px; border-radius: var(--radius-sm); }
  .tabbar__icon { position: relative; display: inline-flex; }
  .tabbar__label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
  }
  .tabbar__item.is-active .tabbar__label { font-weight: 600; }
  .tabbar__badge {
    position: absolute; top: -6px; left: calc(100% - 7px);
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: content-box;
    border: 2px solid #fff; border-radius: 999px;
    background: var(--ocre-700); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  /* Le contenu ne finit pas sous la barre. */
  .app-content { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  /* Pendant une saisie, le clavier occupe le bas de l'écran : la barre
     s'efface plutôt que de flotter au-dessus. */
  body:has(:is(input:not([type=checkbox], [type=radio], [type=file], [type=submit], [type=button], [type=hidden]), textarea, select):focus) .tabbar { display: none; }
}

@media screen and (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ============ Lot 2 — tableau de bord, Poser, Mes demandes ============ */
@media screen and (max-width: 960px) {
  .soldes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .announcement-edit-btn { width: 36px; height: 36px; top: 8px; right: 8px; }
}

@media screen and (max-width: 640px) {
  .soldes-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* Sur « Poser », trois à cinq compteurs empilés repousseraient le
     calendrier à plus de mille pixels : ils défilent en bande, aimantés. */
  .soldes-grid--strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 8px; scroll-padding-inline: 12px;
  }
  .soldes-grid--strip::-webkit-scrollbar { display: none; }
  .soldes-grid--strip > * { scroll-snap-align: start; }

  .quick-actions > .btn { flex: 1 1 auto; justify-content: center; }

  .calendar-wrap { padding: 12px 8px 4px; }
  .calendar-grid { gap: 3px; }
  .calendar-day, .calendar-blank { height: 48px; }
  .date-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-day { padding: 4px 5px; }

  /* Lignes de demande : date, durée et statut en tête, libellé dessous,
     actions en pied. */
  .req-list { padding: 4px 16px 12px; }
  .req-row--dash, .req-row--poser {
    grid-template-columns: auto 1fr auto; gap: 4px 12px;
    grid-template-areas: "date qty status" "main main main";
  }
  .req-row--poser { grid-template-areas: "date qty status" "main main main" "act act act"; gap: 6px 12px; }
  .req-row__date { grid-area: date; }
  .req-row__qty { grid-area: qty; }
  .req-row__status { grid-area: status; justify-self: end; }
  .req-row__main { grid-area: main; }
  .req-row__actions { grid-area: act; display: flex; gap: 8px; margin-top: 4px; }
  .req-row__actions > * { flex: 1 1 0; }
  .req-row__actions .btn { width: 100%; justify-content: center; }
  .req-row__actions--empty { display: none; }

  /* Tableau empilé en cartes : une ligne, une carte ; chaque cellule porte
     son intitulé (data-label). L'en-tête reste lu par les lecteurs d'écran. */
  .data-table--stack { font-size: 14px; }
  .data-table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .data-table--stack, .data-table--stack tbody { display: block; width: 100%; }
  .data-table--stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 16px; }
  .data-table--stack td { display: block; padding: 0; min-width: 0; }
  .data-table--stack td.right { text-align: left; }
  .data-table--stack td[data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block; margin-bottom: 2px;
    font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-700);
  }
  .data-table--stack .cell--lead { grid-column: 1 / -1; order: -1; font-size: 15px; font-weight: 600; color: var(--ink-900); }
  .data-table--stack .cell--full,
  .data-table--stack .cell--empty,
  .data-table--stack .cell--actions { grid-column: 1 / -1; }
  .data-table--stack .cell--actions { display: flex; gap: 8px; white-space: normal; }
  .data-table--stack .cell--actions > * { flex: 1 1 0; }
  .data-table--stack .cell--actions .btn { width: 100%; justify-content: center; margin-left: 0; }
  .data-table--stack .cell--vide { display: none; }

  .upload-inline { flex-wrap: wrap; }
  .upload-inline__file { flex: 1 1 100%; padding: 8px; }
  .upload-inline .btn { flex: 1 1 100%; justify-content: center; }

  /* Popover d'édition des annonces : feuille ancrée en haut — le clavier,
     qui monte du bas, ne la recouvre pas. `html` l'emporte sur le style
     embarqué de la vue, chargé après cette feuille. */
  html .announce-popover {
    top: calc(12px + env(safe-area-inset-top)); left: 8px; right: 8px;
    width: auto; max-width: none; transform: none;
    max-height: calc(100dvh - 24px); padding: 18px;
  }
}

@media screen and (max-width: 480px) {
  .date-pair { grid-template-columns: minmax(0, 1fr); }
  /* Sur une case de 40 px, « Posé (en attente) » en 8 px ne se lit plus : la
     note devient une pastille, la légende et les hachures portent le sens. */
  .calendar-day__note,
  .calendar-day--booked .calendar-day__note {
    font-size: 0; width: 6px; height: 6px; padding: 0; margin: auto auto 2px;
    border-radius: 50%; background: currentColor;
  }
}

/* ============ Lot 3 — autres écrans de l'agent ============ */
@media screen and (max-width: 960px) {
  /* Télétravail : la carte porte déjà sa marge ; le formulaire n'en ajoute
     plus, et les cases gagnent la largeur perdue. */
  .tt-form { padding: 0 0 8px; }
}

@media screen and (max-width: 640px) {
  .tt-day { height: 48px; }
  .page__header--split { flex-wrap: wrap; gap: 10px; }
}

@media screen and (max-width: 480px) {
  .tt-day__note { display: none; }
}

/* ============ Lot 5 — validation, équipe ============ */
@media screen and (max-width: 640px) {
  /* Indicateurs en tête : compacts, côte à côte, pour que la liste à
     traiter ne soit pas repoussée sous quatre cartes pleine largeur. */
  .grid-4.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid-3.stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat-strip > .card { padding: 12px; }
  .stat-strip .eyebrow { font-size: 10px; letter-spacing: .08em; }
  .stat-strip .rule { margin: 6px 0 8px; }

  /* Une demande, une carte : l'agent et la période d'abord, puis les deux
     décisions, pleine largeur, sous le pouce. */
  .decision-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .decision-row__avatar { display: none; }
  .decision-row__meta { text-align: left; }
  .decision-row__meta br { display: none; }
  .decision-row__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .decision-row__actions .btn { width: 100%; justify-content: center; }
  .decision-row--done { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; }
  .decision-row--done .decision-row__main,
  .decision-row--done .decision-row__note { grid-column: 1 / -1; margin-top: 0; }
  .decision-row__status { justify-self: end; }

  /* Équipe : une carte par agent, les trois soldes en tuiles. */
  .data-table--stack.data-table--wide { min-width: 0; }
  .data-table--tiles tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card > .table-scroll .data-table--stack tr,
  .card > div > .data-table--stack tr { padding-left: 0; padding-right: 0; }
}

/* ============ Lot 6 — planning et éditeur de planning ============ */
@media screen and (max-width: 960px) {
  .toolbar__field { flex: 1 1 100%; width: 100%; }
  .legend-inline { flex-wrap: wrap; }

  /* Vue hebdomadaire : la grille défile, la colonne des collaborateurs reste. */
  .planning-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .planning-grid, .planning-row { grid-template-columns: 140px repeat(5, minmax(56px, 1fr)); min-width: 420px; }
  .planning-grid > .planning-header.first { min-width: 0; position: sticky; left: 0; z-index: 1; }
  .planning-person { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 0; }
  .planning-person .avatar { display: none; }

  /* Éditeur : colonne des agents resserrée, cellules à la mesure du doigt.
     `html` l'emporte sur le style embarqué de la vue, chargé après. */
  html .schedule-grid .agent-col { min-width: 132px; max-width: 132px; padding: 6px 8px; }
  html .schedule-grid .agent-col .avatar { display: none; }
  html .cell-btn { height: 40px; }
  html .code-picker__btn { min-height: 40px; }
  html .picker-time-field input { font-size: 16px; }

  .planning-toasts { left: 12px; right: 12px; max-width: none; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }
}

@media screen and (max-width: 640px) {
  .planning-week { white-space: normal; }
  html .code-picker.is-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; min-width: 0;
    max-height: 75dvh; overflow-y: auto; border-radius: 16px 16px 0 0;
    padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
}

/* ============ Lot 7 — écrans RH et d'administration ============
   Utilisables sur téléphone, sans être repensés : les barres d'outils
   passent à la ligne, les listes s'enroulent, les grands tableaux défilent
   avec la colonne de l'agent figée. */
@media screen and (max-width: 960px) {
  .toolbar { flex-wrap: wrap; }
  .page .dossiers-scroll thead th:first-child,
  .page .dossiers-scroll tbody td:first-child,
  .table-scroll--sticky th:first-child,
  .table-scroll--sticky td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
  .page .dossiers-scroll thead th:first-child,
  .table-scroll--sticky thead th:first-child { background: var(--beige-atelier); }
}

@media screen and (max-width: 640px) {
  .list-row { display: flex; flex-wrap: wrap; align-items: center; }
  .list-row > :first-child { flex: 1 1 100%; }
}

/* ============ Lot 4 — connexion, oubli, réinitialisation ============ */
@media screen and (max-width: 960px) {
  /* idylle.css masque le volet bordeaux sous 960 px : la page perdait alors
     toute marque. Il revient en bandeau — logo et nom, rien d'autre. */
  .login { min-height: 100dvh; grid-template-rows: auto 1fr; }
  .login__cover {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
    padding: calc(14px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
  }
  .login__subline, .login__tag, .login__rule, .login__para, .login__foot { display: none; }
  .login__title { font-size: 30px; }
  .login__colockup { padding: 8px 10px; }
  .login__colockup img.ephm { height: 28px; }
  .login__form-pane {
    align-items: flex-start;
    padding: 28px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .login__form { max-width: 420px; }
}

@media screen and (max-width: 480px) {
  .login__row { flex-wrap: wrap; gap: 8px; }
}

/* ============ Exceptions — `!important` ============
   Réservé aux styles en ligne qu'on ne peut pas retirer. Chaque entrée dit
   pourquoi. */
@media screen and (max-width: 960px) {
  /* Le logo porte sa hauteur en ligne (login.blade.php) : filet de sécurité
     contre une feuille servie périmée, qui laisserait l'image à sa taille
     native. */
  .login__logo { height: 40px !important; }
}

@media screen and (max-width: 640px) {
  /* Dossiers agents : les panneaux « Colonnes » et « Récup. dimanche » sont
     positionnés en ligne, ancrés au bouton. Sur un téléphone, ils sortiraient
     de l'écran : ils deviennent une feuille en bas, au-dessus de la barre
     d'onglets. */
  #colsPanel, #bulkSundayPanel {
    position: fixed !important; left: 12px !important; right: 12px !important; top: auto !important;
    bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)) !important;
    min-width: 0 !important; max-height: 60dvh; overflow-y: auto; z-index: 90 !important;
  }
}

@media screen and (max-width: 640px) {
  /* idylle.css ramène déjà `.counter-hero` à 28 px avec `!important` ; les
     indicateurs compacts descendent à 24 px. */
  .stat-strip .counter-hero { font-size: 24px !important; }
}