/* responsive.css — adaptation mobile et tablette.
 *
 * Le gabarit d'origine est pensé pour un grand écran : styles en attribut
 * `style=`, colonnes en pixels, en-tête sur une seule ligne. Les styles en
 * ligne l'emportent sur une feuille externe, d'où les `!important` — ils ne
 * relèvent pas de la surenchère mais du seul moyen de reprendre la main.
 *
 * Points d'ancrage posés dans index.html : data-m="brand|tagline|tel|write|
 * lang|views|nav|ops|ops-head|kpis|funnel-row|pipeline|recap" et
 * data-step sur [data-shell="app"].
 */

/* L'en-tête passe à la ligne dès qu'il manque de place, à n'importe quelle
   largeur. Un point de rupture fixe ne suffirait pas : la barre de langues,
   visible du seul super administrateur, ajoute ~340 px et déborderait entre
   deux paliers. Sur grand écran rien ne change, tout tient sur une ligne. */
header { flex-wrap: wrap; }
header > .seg { min-width: 0; }

/* Le choix de langue vit dans le menu (☰), à toutes les tailles : le sortir de
   l'en-tête évite la seconde ligne discrète où il passait inaperçu sur grand
   écran, et donne un seul endroit à retenir. La bascule Client/Autocariste, elle,
   reste dans l'en-tête sur grand écran (navigation principale). */
header [data-m="lang"] { display: none !important; }

/* ====================================================== menu de navigation
   Disponible sur toutes les tailles d'écran : le formulaire compte quatre
   étapes et l'espace autocariste cinq sous-sections, autant y accéder d'un
   geste. Le panneau sort par la gauche, au-dessus du contenu. */
[data-m="burger"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 1px solid var(--color-divider);
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
  color: var(--color-text);
  cursor: pointer;
  transition: background .16s ease;
}
[data-m="burger"]:hover { background: rgba(255, 255, 255, .95); }
[data-m="burger"] svg { width: 20px; height: 20px; }

[data-m="scrim"] {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 22, 28, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
[data-m="scrim"][data-open="1"] { opacity: 1; pointer-events: auto; }

[data-m="drawer"] {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 60;
  width: 292px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 16px 14px 26px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .22);
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  /* Masqué au clavier et aux lecteurs d'écran tant qu'il est fermé. */
  visibility: hidden;
}
[data-m="drawer"][data-open="1"] { transform: none; visibility: visible; }

[data-m="drawer-head"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
[data-m="drawer-head"] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
}
[data-m="drawer-head"] button:hover { background: rgba(20, 22, 28, .06); }
[data-m="drawer-head"] button svg { width: 17px; height: 17px; }

[data-m="drawer-sec"] { display: flex; flex-direction: column; gap: 2px; }
[data-m="drawer-title"] {
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 0 12px 8px;
}
[data-m="drawer-note"] {
  margin-top: auto;
  padding: 12px;
  border-radius: 12px;
  background: rgba(20, 22, 28, .04);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-neutral-500);
}

.mnav {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.mnav:hover { background: rgba(20, 22, 28, .05); }
.mnav svg { width: 19px; height: 19px; flex: none; opacity: .7; }
.mnav[data-active="1"] {
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  color: var(--color-accent);
  font-weight: 500;
}
.mnav[data-active="1"] svg { opacity: 1; }
/* Étape pas encore atteinte : visible pour situer le parcours, mais inerte. */
.mnav[data-off="1"] { opacity: .36; cursor: default; }
.mnav[data-off="1"]:hover { background: transparent; }

/* ---------------------------------------------------------------- tablette */
@media (max-width: 1024px) {
  header { padding: 12px 20px !important; gap: 12px !important; }
  [data-shell="app"] { padding: 20px 20px 0 !important; }
  [data-m="ops"] { width: calc(100% - 32px) !important; padding: 20px 18px !important; gap: 26px !important; }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 720px) {

  /* --- En-tête : marque + téléphone sur une ligne, bascule de vue dessous --- */
  header {
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  [data-m="tagline"] { display: none !important; }
  [data-m="brand"] { min-width: 0 !important; }
  [data-m="brand"] > div:first-child { font-size: 15px !important; }
  /* Le libellé du numéro déborde : on garde l'icône, tapable pour appeler. */
  [data-m="tel"] { gap: 0 !important; }
  [data-m="tel"] span { display: none !important; }
  [data-m="tel"] i { font-size: 20px !important; padding: 8px; }
  [data-m="write"] { display: none !important; }
  /* Bascule de vue et choix de langue vivent dans le panneau latéral sur
     mobile : gardés ici, ils occupaient deux lignes d'en-tête que le dock et
     le menu rendent superflues. */
  [data-m="views"], [data-m="lang"] { display: none !important; }
  /* Dans le panneau, les deux bascules prennent toute la largeur. */
  [data-m="drawer"] .seg { display: flex !important; }
  [data-m="drawer"] .seg-opt { flex: 1 1 0 !important; justify-content: center !important; padding: 9px 6px !important; font-size: 12.5px !important; }

  /* --- Ossature du formulaire : une seule colonne --- */
  [data-shell="app"] {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 16px 14px 0 !important;
    gap: 18px !important;
  }
  [data-rail="summary"] {
    position: static !important;
    padding: 18px 16px !important;
    gap: 18px !important;
  }
  /* À l'étape 4, le récapitulatif reprend déjà tout : afficher le résumé
     latéral en dessous ferait doublon (signalé en test). */
  [data-shell="app"][data-step="4"] [data-rail="summary"] { display: none !important; }

  /* Le panneau central perd ses marges de bureau. */
  [data-shell="app"] > section,
  [data-shell="app"] > div:not([data-rail]) { min-width: 0 !important; }
  section[data-glass], [data-shell="app"] > section { padding: 20px 16px !important; border-radius: 20px !important; }

  /* --- Typographie --- */
  h1 { font-size: 23px !important; line-height: 1.18 !important; }
  h2 { font-size: 17px !important; }
  p { font-size: 13.5px !important; }

  /* --- Champs : 16px empêche le zoom automatique d'iOS ; 44px de haut
         pour rester tapable au pouce. --- */
  .input, input.input, select.input, textarea.input, input, select, textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    /* Plusieurs champs portent une largeur minimale en pixels (jusqu'à 300 px
       pour le choix de la catégorie) : sur un écran de 320 px elle suffit à
       faire défiler la page de côté. */
    min-width: 0 !important;
    max-width: 100% !important;
  }
  textarea, textarea.input { min-height: 88px !important; }
  .field > label { font-size: 13px !important; }
  [data-grid="two"], [data-grid="ops"] { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }

  /* Cases à cocher et radios : cible tapable élargie. */
  .radio, .seg-opt { min-height: 44px !important; display: flex !important; align-items: center !important; }
  .btn { min-height: 44px !important; }

  /* Les cases à cocher isolées portent parfois une phrase entière
     (« Envoyer un code de vérification… ») : sans retour à la ligne elles
     sortent de l'écran. Les bascules d'un vrai `.seg` gardent leur ligne
     unique, elles sont courtes par construction. */
  .seg-opt { max-width: 100% !important; }
  .seg-opt > span { white-space: normal !important; overflow-wrap: anywhere; }
  .seg .seg-opt > span { white-space: nowrap !important; overflow-wrap: normal; }

  /* --- Barre de navigation du formulaire : les deux boutons pleine largeur,
         « Continuer » d'abord car c'est l'action attendue. --- */
  [data-m="nav"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-top: 16px !important;
  }
  [data-m="nav"] > button { order: 2; flex: 1 1 100% !important; justify-content: center !important; }
  [data-m="nav"] > div { order: 1; flex: 1 1 100% !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
  [data-m="nav"] > div > div { align-items: stretch !important; width: 100% !important; }
  [data-m="nav"] > div button { width: 100% !important; justify-content: center !important; }
  [data-m="nav"] > div span { text-align: center !important; }

  /* --- Cartes véhicule : le nom garde la largeur, le tarif et la pastille
         « Recommandé » passent sur une deuxième ligne. Sans ça le libellé se
         casse en colonne d'un mot et le prix sort du cadre. --- */
  [data-m="vcard"] {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 14px !important;
    align-items: flex-start !important;
  }
  [data-m="vcard"] > i { margin-top: 2px; order: 1; }
  /* Le tarif se cale toujours en haut à droite, sur la même ligne que le nom,
     et la pastille passe en dessous : sinon la carte recommandée décale son
     prix d'une ligne et la colonne des tarifs n'est plus alignée. */
  /* `flex-basis: 0` et non `auto` : avec `auto` le navigateur tient compte de
     la longueur du nom pour décider du retour à la ligne, et le libellé saute
     sous l'icône en laissant une ligne vide. À zéro, il reste à côté de
     l'icône et se replie à l'intérieur de sa propre colonne. */
  [data-m="vcard"] > [data-m="vname"] { flex: 1 1 0% !important; min-width: 0 !important; order: 2; }
  /* La liste d'équipements tient en deux lignes, le reste est superflu ici. */
  [data-m="vcard"] > [data-m="vname"] > span:nth-child(2) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  [data-m="vcard"] > span:last-child { order: 3; flex: none !important; margin-left: auto !important; font-size: 14px !important; font-weight: 500; }
  /* En flexbox, un élément ne peut pas à la fois occuper sa propre ligne
     (base 100 %) et se limiter à la largeur de son texte : la base l'étire en
     bandeau, un plafond de largeur le fait remonter sur la ligne du nom qu'il
     écrase. On insère donc un séparateur de hauteur nulle entre le tarif et la
     pastille : il consomme la fin de la ligne, la pastille passe dessous et
     garde sa taille naturelle. */
  [data-m="vcard"]::after { content: ''; flex: 0 0 100%; height: 0; order: 4; }
  [data-m="vcard"] .tag { order: 5; flex: 0 0 auto !important; margin-left: 38px !important; }

  /* Les deux actions finales côte à côte dépassent la largeur d'un téléphone :
     empilées, elles gardent chacune une cible confortable. */
  [data-m="confirm-actions"] { flex-wrap: wrap !important; }
  [data-m="confirm-actions"] > button { flex: 1 1 100% !important; justify-content: center !important; }

  /* --- Tableau récapitulatif : libellé au-dessus de la valeur --- */
  [data-m="recap"] tr { display: block !important; padding: 10px 0 !important; border-bottom: 1px solid var(--color-divider); }
  [data-m="recap"] td { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; }
  [data-m="recap"] td:first-child { font-size: 11px !important; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }

  /* --- Espace autocariste --- */
  [data-m="ops"] {
    width: calc(100% - 20px) !important;
    padding: 16px 12px !important;
    gap: 22px !important;
    border-radius: 20px !important;
    margin-top: 14px !important;
  }
  [data-m="ops-head"] { gap: 12px !important; }
  [data-m="ops-head"] h1 { font-size: 20px !important; }
  [data-m="ops"] .seg { flex-wrap: wrap !important; }

  /* KPI : deux par ligne plutôt qu'une colonne interminable. */
  [data-m="kpis"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  [data-m="kpis"] > div > div:nth-child(2) { font-size: 21px !important; }
  [data-m="kpis"] > div > div:nth-child(3) { font-size: 11px !important; }

  /* Tunnel de vente : libellé et chiffre sur une ligne, barre en dessous,
     commentaire masqué (il tient dans la largeur d'un pouce, pas d'un écran). */
  [data-m="funnel-row"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 10px !important;
  }
  [data-m="funnel-row"] > span:nth-child(3) { grid-column: 1 / -1 !important; }
  [data-m="funnel-row"] > span:nth-child(4) { display: none !important; }

  /* Pipeline : sept colonnes ne tiennent pas dans un écran de téléphone, même
     réduites. Chaque demande devient un bloc de deux lignes —
     référence / montant, puis client / statut. Le service, la date et
     l'effectif restent consultables en ouvrant la demande. */
  [data-m="pipeline"] { min-width: 0 !important; width: 100% !important; }
  [data-m="pipeline"] thead { display: none !important; }
  [data-m="pipeline"] tbody, [data-m="pipeline"] tr, [data-m="pipeline"] td { display: block !important; }
  [data-m="pipeline"] tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px 10px !important;
    padding: 12px 2px !important;
    border-bottom: 1px solid var(--color-divider) !important;
  }
  [data-m="pipeline"] td { border: 0 !important; padding: 0 !important; min-width: 0 !important; }
  /* Doit rester APRÈS la règle `display: block` ci-dessus, sinon celle-ci
     ré-affiche les colonnes qu'on veut masquer (même spécificité, le dernier
     gagne). */
  [data-m="pipeline"] td:nth-child(3),
  [data-m="pipeline"] td:nth-child(4),
  [data-m="pipeline"] td:nth-child(5) { display: none !important; }
  [data-m="pipeline"] td:nth-child(1) { order: 1; font-size: 11px !important; }
  [data-m="pipeline"] td:nth-child(6) { order: 2; text-align: right !important; font-size: 14px !important; font-weight: 500; }
  [data-m="pipeline"] td:nth-child(2) { order: 3; font-size: 13.5px !important; }
  [data-m="pipeline"] td:nth-child(7) { order: 4; text-align: right !important; align-self: end; }
  /* Les adresses longues ne doivent pas pousser la colonne. */
  [data-m="pipeline"] td:nth-child(2) span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .table { font-size: 13px !important; }

  /* --- Flotte : onze colonnes sur 1047 px dans un cadre de 331. Chaque
         catégorie devient une fiche, l'intitulé de colonne passe au-dessus de
         la valeur (attribut data-label repris en ::before). Les sélecteurs
         visent le rang de la cellule et non le libellé : celui-ci est traduit
         en es/en et un sélecteur sur data-label cesserait de correspondre. --- */
  [data-m="fleet"] { min-width: 0 !important; width: 100% !important; }
  [data-m="fleet"] thead { display: none !important; }
  [data-m="fleet"] tbody, [data-m="fleet"] tr, [data-m="fleet"] td { display: block !important; }
  [data-m="fleet"] tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px 12px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--color-divider) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .5);
  }
  [data-m="fleet"] td {
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  [data-m="fleet"] td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 4px;
  }
  /* Nom, classe de péage et équipements : trop longs pour une demi-fiche. */
  [data-m="fleet"] td:nth-child(1),
  [data-m="fleet"] td:nth-child(4),
  [data-m="fleet"] td:nth-child(10) { grid-column: 1 / -1 !important; }
  [data-m="fleet"] td input,
  [data-m="fleet"] td select { width: 100% !important; text-align: left !important; }

  /* Mêmes fiches pour les tableaux de l'onglet International (pays, simulation
     par pays) : sept à neuf colonnes, impossibles à lire sur un téléphone. */
  [data-m="cards"] { min-width: 0 !important; width: 100% !important; }
  [data-m="cards"] thead { display: none !important; }
  [data-m="cards"] tbody, [data-m="cards"] tr, [data-m="cards"] td { display: block !important; }
  [data-m="cards"] tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px 12px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--color-divider) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .5);
  }
  [data-m="cards"] td {
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  [data-m="cards"] td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 4px;
  }
  /* Première cellule (le pays) et dernière (la note) sur toute la largeur. */
  [data-m="cards"] td:first-child { grid-column: 1 / -1 !important; font-weight: 500; }
  [data-m="cards"] td:last-child { grid-column: 1 / -1 !important; }
  [data-m="cards"] td input, [data-m="cards"] td select { width: 100% !important; text-align: left !important; }

  /* --- Équipements par catégorie : la colonne de libellés de 210 px ne laisse
         qu'un filet pour les pastilles, qui s'empilent et se coupent en plein
         mot. Sur mobile le libellé passe au-dessus. --- */
  [data-m="eqrow"] { grid-template-columns: minmax(0, 1fr) !important; gap: 9px !important; }
  [data-m="eqrow"] > div:first-child { font-weight: 500; padding-top: 0 !important; }

  /* Panneau latéral des opérations : plus de position collante. */
  [data-grid="ops"] > aside { position: static !important; gap: 22px !important; }
}

/* ------------------------------------------------------- très petits écrans */
@media (max-width: 380px) {
  [data-m="kpis"] { grid-template-columns: minmax(0, 1fr) !important; }
  h1 { font-size: 21px !important; }
  [data-m="views"] .seg-opt, [data-m="lang"] .seg-opt { font-size: 11.5px !important; padding: 8px 4px !important; }
}

/* Pas de `overflow-x: hidden` sur html/body : appliqué aux deux, il transforme
   le body en conteneur de défilement. Le document ne défile alors plus
   (window.scrollY reste à zéro), l'en-tête collant décroche et la page paraît
   vide au scroll. Les débordements sont corrigés à la source, pas masqués. */
@media (max-width: 720px) {
  img, svg { max-width: 100% !important; height: auto; }
}

/* Connexion (espace autocariste) : sur petit ecran le panneau de marque
   devient une bannieres compacte au-dessus du formulaire. */
@media (max-width: 880px) {
  [data-m="login-brand"] { min-height: 0 !important; padding: 26px 24px !important; gap: 18px !important; }
  [data-m="login-split"] > div:last-child { padding: 26px 22px !important; }
}