/* Smartphone et tablette (demande d'Alain du 06/10/2026 : « l'application doit être responsive et utilisable par un smartphone »).
   Chargée après crm.css. Téléphone : jusqu'à 760 px ; tablette : 761 à 1050 px. Rien ne change au-dessus de 1050 px.
   Principes : une barre d'application collée en haut (menu ☰), un menu en plein écran, des rangées de pastilles qu'on fait défiler du doigt,
   des tableaux présentés en cartes (web/js/mobile.js), des fenêtres de saisie en plein écran, des cibles tactiles d'au moins 42 px et des
   champs à 16 px (sinon iOS zoome à la saisie). */

:root { --barre-mobile: 56px; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(44, 111, 175, .15); }
img, svg, video, canvas { max-width: 100%; }

/* ---- tout écran tactile : cibles plus grandes, pas de survol ---- */
@media (pointer: coarse) {
  .btn, .onglet, .sommaire-lien, .parcours-etape, .nav a, .filtre-pastille, .fermer, .oeil-bouton, .lien-btn { min-height: 44px; }
  .btn, .onglet, .sommaire-lien, .filtre-pastille, .fermer, .oeil-bouton { min-width: 44px; }   /* 44 px au toucher (09/10/2026) */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .btn.small { min-height: 44px; padding: 7px 12px; font-size: 13px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea, .select, .search, .filtre-pastille { min-height: 44px; font-size: 16px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .table tr.cliquable:hover td { background: transparent; }
  /* numéros de téléphone : un lien tel: bien visible et facile à toucher */
  a[href^="tel:"] { color: var(--brand2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 6px 0; }
}

/* ---- tablette ---- */
@media (min-width: 761px) and (max-width: 1050px) {
  .main { padding: 18px 18px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ---- téléphone ---- */
@media (max-width: 760px) {
  /* coque : barre d'application en haut, contenu dessous */
  .app { display: block; min-height: 0; }
  .sidebar { position: sticky; top: 0; z-index: 40; height: var(--barre-mobile); min-height: var(--barre-mobile); overflow: hidden; padding: 0 12px;
    padding-top: env(safe-area-inset-top); display: flex; flex-direction: column; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
  .sidebar-tete { align-items: center; }
  .sidebar .tag { display: none; }
  .brand { font-size: 17px; margin: 0; }
  .menu-mobile { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font-size: 22px; }
  /* menu ouvert : plein écran */
  .sidebar.menu-ouvert { z-index: 80; position: fixed; inset: 0; height: 100dvh; min-height: 0; overflow-y: auto; justify-content: flex-start; padding: env(safe-area-inset-top) 12px 0; }
  .sidebar.menu-ouvert .sidebar-tete { min-height: var(--barre-mobile); flex: 0 0 auto; }
  .sidebar.menu-ouvert .nav { padding-top: 6px; }
  .sidebar.menu-ouvert .nav a { padding: 12px 14px; font-size: 15px; line-height: 1.3; }
  .sidebar.menu-ouvert .nav .nav-sous { padding: 10px 14px 10px 36px; font-size: 14px; }
  .sidebar.menu-ouvert .nav-section { padding: 12px 8px; margin: 6px 4px 0; font-size: 12px; }
  .sidebar.menu-ouvert .sidebar-pied { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  body.menu-ouvert { overflow: hidden; }

  .main { padding: 12px 12px max(28px, env(safe-area-inset-bottom)); overflow-x: hidden; }

  /* en-tête de page */
  .topbar { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 12px; }
  .title h1 { font-size: 22px; line-height: 1.2; }
  .title p { font-size: 13px; }
  .topbar-date { display: none; }
  .actions { width: 100%; gap: 8px; }
  .actions-tete { width: 100%; align-items: stretch; }
  .actions-tete .aide-bouton { margin-left: auto; }
  .actions .btn.primary { flex: 1 1 auto; }
  .actions select, .actions .select { flex: 1 1 100%; }

  /* rangées de pastilles et d'onglets : une ligne qu'on fait défiler */
  .sommaire { top: var(--barre-mobile); flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 12px; padding: 8px 12px; gap: 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sommaire::-webkit-scrollbar, .onglets::-webkit-scrollbar, .parcours-etapes::-webkit-scrollbar { display: none; }
  .sommaire-lien { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; font-size: 13px; }
  .onglets { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 12px; padding: 2px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .onglet { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; font-size: 13px; }
  .parcours-etapes { flex-wrap: nowrap; overflow-x: auto; margin: 6px -12px 4px; padding: 2px 12px; scrollbar-width: none; }
  .parcours-etape { flex: 0 0 auto; white-space: nowrap; }
  .parcours-tout { flex: 0 0 auto; margin-left: 12px; white-space: nowrap; }
  .agenda-barre { gap: 8px; }
  .agenda-barre select { flex: 1 1 100%; min-height: 44px; font-size: 16px; }

  /* cartes et grilles */
  .card { padding: 14px; border-radius: 14px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid4 .metric { padding: 12px; }
  .metric .value { font-size: 22px; margin-top: 4px; }
  .metric .value.moyen { font-size: 17px; }
  .metric .label { font-size: 12px; }
  .layout2, .layout-moitie, .champs, .champs.cols3, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .section-title { flex-wrap: wrap; }
  .section-title .outils-ligne, .section-title > span:last-child { flex-wrap: wrap; }
  .filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filtres .search { grid-column: 1 / -1; }
  .filtres .btn { width: 100%; text-align: center; }
  .pagination { flex-direction: column; gap: 8px; align-items: stretch; text-align: center; }
  .item { padding: 14px; }
  .warning { font-size: 13px; }

  /* tableaux : cartes (classe posée par web/js/mobile.js) ; les autres défilent horizontalement */
  .table-wrap { -webkit-overflow-scrolling: touch; margin: 0 -2px; }
  .table-cartes, .table-cartes thead, .table-cartes tbody, .table-cartes tfoot, .table-cartes tr, .table-cartes th, .table-cartes td { display: block; width: auto; }
  .table-cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-cartes tr { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin: 0 0 10px; }
  .table-cartes tr.cliquable:active { background: #f7fbff; }
  .table-cartes td, .table-cartes th { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; border: 0; padding: 6px 0;
    text-align: right; overflow-wrap: anywhere; white-space: normal; }
  .table-cartes td::before, .table-cartes th::before { content: attr(data-label); flex: 0 0 38%; max-width: 42%; text-align: left; color: var(--muted);
    font-weight: 600; font-size: 12px; padding-top: 1px; }
  .table-cartes td[data-label=""]::before, .table-cartes td:not([data-label])::before { content: none; }
  .table-cartes td[data-label=""] { justify-content: flex-end; flex-wrap: wrap; }
  .table-cartes td.num { text-align: right; }
  .table-cartes td:first-child { font-weight: 700; }
  .table-cartes td.plein { display: block; text-align: left; }
  .table-cartes td.plein::before { content: none; }
  /* ligne de titre de section (cellule unique ou fusionnée) : un intertitre, pas une carte */
  .table-cartes tr:has(> td.plein:only-child), .table-cartes tr:has(> th.plein:only-child) { background: transparent; border: 0; padding: 4px 2px 0; margin-bottom: 4px; }
  .table-cartes tr:has(> td.plein:only-child) > td, .table-cartes tr:has(> th.plein:only-child) > th { color: var(--muted); font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em; padding: 6px 0 2px; }
  /* cellule longue (désignation, adresse, note) : étiquette au-dessus, texte à gauche sur toute la largeur */
  .table-cartes td.longue { display: block; text-align: left; }
  .table-cartes td.longue::before { display: block; max-width: none; margin-bottom: 2px; }
  .table-cartes td:empty { display: none; }
  .table-cartes .btn, .table-cartes .actions { margin-top: 2px; }
  .table-cartes td.note { white-space: pre-wrap; text-align: left; }

  /* fenêtres de saisie : plein écran, boutons collés en bas */
  .fenetre, .mailing-fenetre { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .fenetre form { height: 100%; max-height: 100dvh; }
  .fenetre-tete { padding: max(14px, env(safe-area-inset-top)) 14px 8px; }
  .fenetre-tete .fermer { width: 44px; height: 44px; font-size: 26px; }
  .fenetre-corps { flex: 1 1 auto; padding: 6px 14px 14px; }
  .fenetre-pied { position: sticky; bottom: 0; background: #fff; gap: 10px; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); }
  .fenetre-pied .btn { flex: 1 1 0; }
  .fenetre-pied .bascule-bulles-fenetre { flex: 0 0 auto; }
  .aide-volet { width: 100vw; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }

  /* proposition : étapes et navigation */
  .parcours-nav { position: sticky; bottom: 0; z-index: 5; margin: 14px -12px 0; padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    background: rgba(245, 247, 251, .96); border-top: 1px solid var(--line); }
  .parcours-nav .btn { flex: 1 1 0; }
  .circuit { padding: 10px 12px; }
  .circuit-boutons { width: 100%; }
  .circuit-boutons .btn { flex: 1 1 auto; }

  /* connexion */
  .gate { padding: 14px; align-items: flex-start; overflow-y: auto; }
  .gate-panel { padding: 24px 20px; border-radius: 20px; margin-top: 6vh; }
  .gate-brand { font-size: 26px; }

  /* téléaction : la session d'appel occupe tout l'écran */
  .teleaction-guide { padding: 0; align-items: stretch; }
  .teleaction-guide-page { border-radius: 0; min-height: 100%; width: 100%; padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); }
  .teleaction-guide-choix .btn { min-width: 0; flex: 1 1 100%; }
  .teleaction-popup { padding: 0; align-items: stretch; }
  .teleaction-popup > * { width: 100%; max-width: 100%; border-radius: 0; }

  /* téléaction : pas de colonnes côte à côte */
  .teleaction-etape-rdv, .teleaction-deux { grid-template-columns: 1fr; }
  .teleaction-tuiles, .teleaction-compteurs-bas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* agenda : la semaine défile horizontalement dans sa carte */
  .agenda-carte { -webkit-overflow-scrolling: touch; }
  .agenda-semaine { grid-template-columns: 38px repeat(var(--jours), minmax(110px, 1fr)); }

  /* graphiques et aperçus */
  .chart { overflow-x: auto; }
  .mailing-apercu { height: 320px; }
}

/* ---- petits téléphones ---- */
@media (max-width: 380px) {
  .grid4 { grid-template-columns: minmax(0, 1fr); }
  .title h1 { font-size: 20px; }
}