/* BeandBus — corrections mobiles · chargée APRÈS header.css, donc en dernier.
   Aucune feuille de maquette n'est modifiée : tout vit ici.

   Règle de non-régression : au-dessus des points de rupture, le rendu est
   identique au pixel près. Les trois déclarations hors @media plus bas ne
   changent rien à l'écran — ce sont des corrections de taille min-content et
   de bloc conteneur, invisibles tant qu'il reste de la place. */

/* ================================================================ A · débordements

   `1fr` vaut `minmax(auto, 1fr)` : son minimum est le min-content. Un enfant
   qui ne sait pas se replier (une rangée d'onglets sans wrap) élargit donc
   toute la console. crm-admin.css utilise déjà `minmax(0, 1fr)` ; on aligne
   les deux autres sur elle. */
@media (max-width: 1060px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
}

/* la rangée d'onglets est le min-content coupable : 479 px sur un rail de 343. */
.tabs { flex-wrap: wrap; }

/* la case à cocher masquée des interrupteurs est en `position: absolute` sans
   ancêtre positionné : son bloc conteneur remonte jusqu'au document, elle
   échappe au conteneur à défilement et étire la page de 300 px. */
.sw,
.ntf { position: relative; }

/* ============================================== B · fiche : rendre le haut mobile

   Sur téléphone l'en-tête fixe de la fiche (183 px) plus la barre de navigation
   (54) plus le socle d'action (65-97) mangeaient 342 px : 54 % d'un écran de
   740, 62 % d'un iPhone SE. Le socle porte déjà l'appel à l'action en
   permanence — l'en-tête peut donc défiler avec le contenu. */
@media (max-width: 1000px) {
  .fixhead {
    position: static;
    left: auto; transform: none;
    width: auto;
    /* l'etat cache du defilement (opacity 0) ne vaut qu'en bureau : ici la
       barre est un bloc du flux, visible d'emblee comme avant */
    opacity: 1; pointer-events: auto;
  }
  /* la cale n'a plus rien à compenser ; elle laissait un trou de 150 px */
  .bar-space { display: none; }
}

/* le carrousel de sections ne disait pas qu'il continuait à droite */
@media (max-width: 900px) {
  .cats {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .cats > * { scroll-snap-align: start; flex: none; }
}

/* ==================================================== C · iOS : plus de zoom subi

   Safari agrandit la page dès qu'un champ passe sous 16 px, et ne la ramène
   jamais. Sur le formulaire de demande cela laissait l'utilisateur en vue
   agrandie et décalée au milieu de la saisie. */
@media (max-width: 760px) {
  /* `!important` assumé : chaque feuille de page fixe la taille de ses champs
     via une classe, qui l'emporterait sur un sélecteur d'élément. La règle ne
     porte que sur la taille du texte, et seulement sous 760 px. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  /* les champs des barres de recherche (accueil et annuaire) n'ont ni bordure
     ni fond : c'est leur cellule qui fait le dessin. Seule la hauteur de
     frappe change. */
  .sb-cell input,
  .sc input { min-height: 30px; }

  /* les listes déroulantes tombaient à 30-32 px */
  select { min-height: 44px; }

  /* même raison pour les champs de date et d'heure : ils ouvrent un sélecteur
     au doigt, comme une liste déroulante, et faisaient 32 px. Les barres de
     recherche gardent leur hauteur propre, fixée juste au-dessus. */
  input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="month"], input[type="week"] { min-height: 44px; }
}

/* ============================================== D · cibles tactiles

   Objectif 44 px. Les boutons centrent leur contenu tout seuls ; pour les
   liens on augmente la marge intérieure plutôt que la hauteur, ce qui garde
   le texte centré sans toucher au mode d'affichage. */
@media (max-width: 760px) {

  /* — curseurs : la piste reste fine, la zone de préhension passe à 44 px —
     ils faisaient 6 px de haut sur la fiche entreprise. */
  input[type="range"] { height: 44px; }
  .zn-slider input[type="range"],
  .cut-row input[type="range"],
  .slider-row input[type="range"],
  .dlg-rng input[type="range"],
  .rng input[type="range"] { height: 44px; }

  /* — consoles — */
  .act { min-height: 42px; padding-block: 10px; }
  .tab { min-height: 42px; padding-block: 11px; }
  .chip { min-height: 42px; padding-block: 10px; }
  .add { min-height: 42px; padding-block: 10px; }
  .o-acts .alt,
  .o-acts .no { min-height: 44px; }
  .bell { width: 42px; height: 42px; }

  /* boutons sans fond ni bordure : la marge ajoutée est invisible,
     elle n'agrandit que la surface de frappe */
  .fav-rm { padding-block: 11px; }
  .strip-a { padding-block: 11px; }
  .sum-head a { display: inline-flex; align-items: center; min-height: 44px; }

  /* header.css cadre la barre des espaces connectés à 28 px ; sous le doigt
     la déconnexion mérite la même hauteur que le reste */
  .top #logout { height: 40px; }

  /* « Voir la demande » : 39 px, marge intérieure de 8 */
  .go { padding-block: 12px; }

  /* fiche publique de l'autocariste */
  .ph-set { min-height: 40px; padding-block: 9px; }
  .ph-x { width: 36px; height: 36px; font-size: 17px; }
  .icon-btn { min-height: 42px; }
  .mos-all { min-height: 40px; padding-block: 9px; }
  .eq2-more { min-height: 44px; display: inline-flex; align-items: center; }
  .ask-alt { min-height: 44px; }

  /* annuaire */
  .seg { min-height: 42px; padding-block: 12px; }
  .c-see { padding-block: 13px; }
  .c-add { padding-block: 14px; }
  .chip-on { min-height: 40px; }
  .chip-on button { width: 30px; height: 30px; font-size: 15px; }

  /* formulaire de demande */
  .pill { min-height: 42px; padding-block: 10px; }
  .rad-opt { min-height: 42px; padding-block: 10px; }
  .add-stop { min-height: 42px; padding-block: 10px; }
  .stop .rm { width: 40px; height: 40px; font-size: 17px; }
  .actions .back { display: inline-flex; align-items: center; min-height: 44px; }
  .stepbar .quit { min-height: 40px; }

  /* accueil : le premier formulaire de l'entonnoir et ses appels à l'action */
  .btn,
  .cta { min-height: 44px; }
  /* l'en-tête garde sa propre hauteur : header.css cadre déjà sa barre */
  .nav > .btn,
  .nav > .cta { min-height: 0; }
  .golink { min-height: 44px; }
  .fchip { min-height: 38px; }

  /* pied de page : 14 liens de 17 px de haut, on élargit la frappe.
     Le sélecteur vise l'élément : toutes les pages n'ont pas la classe. */
  footer a { display: inline-block; padding-block: 5px; }
}

/* ==================================== D2 · le comparateur de l'accueil

   `.offer` est déclarée `grid-template-columns: 192px minmax(0,1fr) 208px` et
   landing.css ne la replie NULLE PART : la grille à trois colonnes du bureau
   reste en place sur une carte de 335 px. La troisième colonne s'effondre, et
   il reste « 192px 141px » — la photo devient une bande verticale de 192 × 387
   pendant que le texte se retrouve dans 119 px utiles, où le nom, la ville et
   le véhicule passent chacun sur deux lignes et où une pastille de 129 px
   déborde de son propre conteneur. Le bloc de prix, lui, se disperse : le prix
   barré à 164 px du bord, le prix à 247, la mention en dessous à 32.

   Une seule colonne, la photo redevient une photo, et le pied de carte
   redevient une ligne : note à gauche, prix à droite, bouton en dessous. */
@media (max-width: 760px) {
  .offer { grid-template-columns: minmax(0, 1fr); }

  .of-img { min-height: 0; aspect-ratio: 16 / 9; }

  .of-main { padding-bottom: var(--space-3); }

  .of-side {
    flex-direction: row; flex-wrap: wrap;
    align-items: baseline; justify-content: space-between;
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
  }
  /* L'ordre visuel ne suit plus celui du balisage. Dans le HTML la mention
     d'urgence vient en premier : laissée là, elle occupait le début de la
     première ligne, poussait la note et le prix barré à sa suite et reléguait
     le prix — l'information la plus lourde de la carte — seul sur la ligne
     suivante, à gauche.
     Ici : note à gauche (c'est `margin-right: auto` qui la colle au bord, pas
     un `space-between` qui écarterait les trois), prix barré et prix collés à
     droite dans l'ordre de lecture, puis la mention par unité, l'urgence et le
     bouton, chacun sur toute la largeur. */
  .of-score { order: 1; margin-bottom: 0; margin-right: auto; }
  .of-was { order: 2; }
  .of-price { order: 3; }
  .of-per { order: 4; flex-basis: 100%; text-align: right; }
  .of-urg { order: 5; flex-basis: 100%; margin-top: 2px; }
  .of-side .btn { order: 6; flex-basis: 100%; margin-top: var(--space-3); }
}

/* ============================================ E · menu mobile des pages publiques

   header.css escamote les liens de section sous 720 px sans rien mettre à la
   place : « Espace client » disparaissait, et il fallait descendre jusqu'au
   pied de page pour se connecter. mobile-nav.js reconstruit un panneau à
   partir des liens existants ; ces règles l'habillent. */
.mnav { display: none; }

/* ---------------------------------------------------- le tiroir lui-même

   Hors du @media : fermé il ne coûte rien (`visibility: hidden`), et c'est le
   bouton qui décide s'il est atteignable. La visibilité bascule sans délai à
   l'ouverture et après la glissade à la fermeture — sinon le tiroir
   disparaîtrait avant d'avoir fini de sortir de l'écran. */
.mnav-ov {
  position: fixed; inset: 0; z-index: 59;
  background: color-mix(in srgb, var(--color-neutral-900, #292b31) 46%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.mnav-ov.is-on { opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s; }

.mnav-panel {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: min(320px, 86vw);
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--color-neutral-100, #f3f5fe);
  box-shadow: -18px 0 48px color-mix(in srgb, var(--color-neutral-900, #292b31) 24%, transparent);
  transform: translateX(100%); visibility: hidden;
  transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .26s;
}
.mnav-panel.is-on {
  transform: translateX(var(--sw-x, 0px)); visibility: visible;
  transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

/* — glisser pour fermer (mécanique du Drawer de coss.com, 21st.dev) —
   `--sw-x` suit le doigt, `--sw-p` fait fondre le voile dans la même
   proportion : le tiroir et son fond bougent d'un seul tenant. Pendant le
   geste, plus aucune transition — sinon le panneau traîne derrière le doigt. */
.mnav-ov.is-on { opacity: calc(1 - var(--sw-p, 0)); }
body[data-swiping] .mnav-panel,
body[data-swiping] .mnav-ov { transition: none; }

/* la poignée : elle dit que le panneau se tire. Seulement là où l'on touche
   l'écran — sur un poste de travail ce ne serait qu'une barre de plus. */
@media (hover: none) {
  .mnav-panel::before {
    content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 44px; border-radius: 999px;
    background: color-mix(in srgb, var(--color-neutral-900, #292b31) 14%, transparent);
  }
}

/* la page ne défile pas sous le tiroir */
body.mnav-open { overflow: hidden; }

.mnav-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 18px;
  height: 60px; padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-900, #292b31) 8%, transparent);
}
.mnav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 22px; letter-spacing: -0.01em;
  color: var(--ink, #292b31);
}
.mnav-x {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--ink-64, #292b31);
  -webkit-tap-highlight-color: transparent;
}
.mnav-x:hover { background: color-mix(in srgb, var(--color-neutral-900, #292b31) 6%, transparent); color: var(--ink, #292b31); }
.mnav-x svg { width: 20px; height: 20px; }

.mnav-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 18px; }

/* intitulé de groupe : il sépare la navigation du compte sans tracer un trait */
.mnav-lab {
  margin: 16px 0 6px; padding: 0 10px;
  font-size: 11px; line-height: 16px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-55, #6b6d75);
}
.mnav-lab:first-child { margin-top: 4px; }

.mnav-i {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  min-height: 52px; padding: 0 12px 0 10px;
  border-radius: 13px;
  font-size: 15px; line-height: 22px; text-decoration: none;
  color: var(--ink-78, #292b31);
}
.mnav-i + .mnav-i { margin-top: 2px; }
/* le pictogramme est un trait, jamais une pastille : il pèse moins que le mot */
.mnav-i svg { flex: none; width: 20px; height: 20px; opacity: .55; transition: opacity .14s ease; }
.mnav-i:hover { background: color-mix(in srgb, var(--color-neutral-900, #292b31) 5%, transparent); color: var(--ink, #292b31); }
.mnav-i:hover svg { opacity: .9; }
.mnav-i:active { background: color-mix(in srgb, var(--color-neutral-900, #292b31) 9%, transparent); }

/* la page où l'on se trouve : un repère à gauche, pas un bloc coloré */
.mnav-i.is-here { color: var(--color-section, #262a60); font-weight: 500; }
.mnav-i.is-here svg { opacity: 1; color: var(--color-section, #262a60); }
.mnav-i.is-here::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 999px; background: var(--color-section, #262a60);
}

.mnav-foot {
  flex: none; padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-900, #292b31) 8%, transparent);
}
.mnav-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 16px; border-radius: 12px;
  font-size: 15px; font-weight: 600; line-height: 22px; text-decoration: none;
  background: var(--flash, #e8604c); color: var(--flash-ink, #fff);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--flash, #e8604c) 32%, transparent);
}
.mnav-cta + .mnav-cta { margin-top: 8px; }
.mnav-cta:hover { background: color-mix(in srgb, var(--flash, #e8604c) 92%, black); color: var(--flash-ink, #fff); }
.mnav-cta:active { transform: translateY(1px); }
.mnav-cta svg { flex: none; width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .mnav-ov,
  .mnav-panel { transition: none; }
  .mnav-cta:active { transform: none; }
}

/* 960 px = dernier palier de header.css (audit 25-09) : sous lui, les liens quittent la barre et le tiroir les porte */
@media (max-width: 960px) {
  .mnav {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 42px; height: 42px;
    padding: 0; border: 0; border-radius: 12px; cursor: pointer;
    background: transparent; color: var(--ink, #1a1a1a);
    -webkit-tap-highlight-color: transparent;
  }
  .mnav:hover,
  .mnav[aria-expanded="true"] { background: color-mix(in srgb, currentColor 9%, transparent); }
  .mnav i,
  .mnav i::before,
  .mnav i::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .18s ease, background-color .18s ease;
  }
  .mnav i { position: relative; }
  .mnav i::before { content: ""; position: absolute; top: -6px; }
  .mnav i::after { content: ""; position: absolute; top: 6px; }
  .mnav[aria-expanded="true"] i { background: transparent; }
  .mnav[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
  .mnav[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); }

  /* le bouton d'action principal reste dans la barre, le menu se pose après */
  .nav > .btn,
  .nav > .cta { margin-left: auto; }
  .nav > .mnav { margin-left: 6px; }
  .nav > .cta ~ .mnav { margin-left: 6px; }

}

/* ================================== F · consoles : la barre latérale en rail

   Sous 1060 px `.menu` passe en rangée, mais chaque entrée mesure 171 à 235 px :
   sur 343 px de large il n'en entrait qu'une par ligne. Cinq lignes de 48 px,
   plus le bouton d'action : 316 px de navigation avant le premier contenu,
   soit 63 % du premier écran d'un iPhone SE. On les met sur un seul rail
   horizontal. */
@media (max-width: 620px) {
  .menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    /* le rail file jusqu'aux bords de l'écran, pas du rail de contenu */
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .menu > * { flex: 0 0 auto; scroll-snap-align: start; }
  .menu a { white-space: nowrap; min-height: 44px; }

  /* les tableaux de la console d'administration défilent déjà ;
     on rend le défilement souple et on montre la barre */
  .panel.scroll,
  .scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}