/* ══════════════════════════════════════════════════════════════════════
   DevisVox — css/tablet/devisvox-tablet.css
   TABLETTE — surcharges uniquement, 769px → 1024px
   CSS pur. Aucun préprocesseur, aucun JS, aucune modification de balisage.
   Le socle mobile (theme/base/layout/components.css) reste la référence.
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {

/* ══════════════════════════════════════════════════════════════
   SECTION A — LAYOUT
   Sélecteurs vérifiés dans css/mobile/layout.css, css/mobile/menu.css
   et index.html. Sûrs.
   ══════════════════════════════════════════════════════════════ */

/* ── Le body/#app cessent de scroller, le contenu scrolle seul ── */
html, body { height: 100%; overflow: hidden; }
#app { height: 100vh; overflow: hidden; }

/* ── Bottom nav masquée ───────────────────────────────────────── */
#bottom-nav, .bnav, .home-bar { display: none !important; }


/* ── Sidebar bureau : #sidebar réactivé, tiroir mobile masqué ──
   css/mobile/layout.css contient #sidebar{display:none!important} sans
   media query. On le réaffiche ici. Le tiroir #menu-mobile reste un
   tiroir, masqué comme sur mobile.
   Le conteneur de nav est ciblé de façon large (nav, .sidebar-nav, ul)
   car son nom exact varie selon ce que rend js/nav.js.
   ─────────────────────────────────────────────────────────────── */

#menu-mobile { display: none !important; }
#mob-menu-overlay { display: none !important; }

#sidebar {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: 220px !important;
  z-index: 700;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--card);
  border-right: 1px solid var(--b2);
}

/* Le logo/en-tête : bloc autonome, jamais recouvert, jamais chevauché */
#sidebar > a:first-child,
#sidebar > div:first-child,
#sidebar .sidebar-logo,
#sidebar .sidebar-hdr,
#sidebar .sidebar-brand {
  position: static !important;
  display: flex !important;
  align-items: center;
  flex-shrink: 0 !important;
  width: 100%;
  padding: 16px 14px;
  margin: 0 !important;
}
#sidebar .sidebar-logo img,
#sidebar .sidebar-hdr img,
#sidebar > a:first-child img { max-width: 140px; height: auto; display: block; }

/* Tout conteneur de liens devient une colonne — quel que soit son nom */
#sidebar > nav,
#sidebar nav,
#sidebar .sidebar-nav,
#sidebar > ul,
#sidebar ul {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 2px;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px;
  list-style: none;
}
#sidebar li { display: block !important; width: 100% !important; margin: 0 !important; float: none !important; }

/* Un lien = une ligne pleine largeur, jamais en flux inline */
#sidebar a,
#sidebar .sidebar-link,
#sidebar button {
  position: static !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  box-sizing: border-box;
  font-size: 14.5px;
  padding: 10px 12px;
  margin: 0 !important;
  float: none !important;
  white-space: nowrap;
  text-align: left;
  border-radius: var(--r-sm);
}
#sidebar a svg,
#sidebar .sidebar-link svg,
#sidebar button svg { flex-shrink: 0; width: 18px; height: 18px; }

/* Couleur neutre par défaut — seul .active passe en orange */
#sidebar a:not(.active),
#sidebar .sidebar-link:not(.active) { color: var(--text) !important; }
#sidebar a:not(.active) svg,
#sidebar .sidebar-link:not(.active) svg { stroke: var(--text2); }
#sidebar a:not(.active):hover,
#sidebar .sidebar-link:not(.active):hover { background: var(--b); }
#sidebar a.active,
#sidebar .sidebar-link.active { color: var(--accent) !important; background: #FFF4EC; }
#sidebar a.active svg,
#sidebar .sidebar-link.active svg { stroke: var(--accent); }

#sidebar .nav-sidebar-footer,
#sidebar > *:last-child:not(nav):not(ul) { margin-top: auto; flex-shrink: 0; }

/* ── Zone de contenu décalée ───────────────────────────────────── */
.main-content, #app-scroll {
  position: fixed !important;
  top: 64px !important;
  left: 220px !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--bg);
}
#app-scroll::-webkit-scrollbar,
.main-content::-webkit-scrollbar { width: 7px; display: block; }
#app-scroll::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track { background: transparent; }
#app-scroll::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 4px; }

/* ── Pages : hauteurs mobiles fixes libérées ───────────────────── */
.page-content:not(.hidden) { min-height: 100%; height: auto !important; max-height: none !important; }
.page:not(.hidden), .page.active { height: auto !important; max-height: none !important; min-height: 0 !important; }
#cockpit-mobile-page:not(.hidden), #devis-mobile-page:not(.hidden),
#factures-mobile-page:not(.hidden), #clients-mobile-page:not(.hidden),
#equipe-mobile-page:not(.hidden), #notifications-mobile-page:not(.hidden),
#ia-chat-mobile-page:not(.hidden) {
  height: auto !important;
  max-height: none !important;
  min-height: 100%;
}

/* ── Page vocale ────────────────────────────────────────────────
   La page masquée DOIT rester masquée : ne jamais neutraliser son
   position:fixed sans vérifier qu'elle est active, sinon son anneau
   de micro fuit par-dessus les autres pages.
   ─────────────────────────────────────────────────────────────── */
#vocal-mobile-page:not(.hidden):not([hidden]) {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  height: auto !important;
  min-height: 100%;
}
#vocal-mobile-page .page {
  height: auto !important;
  max-height: none !important;
  min-height: calc(100vh - 64px);
  overflow: visible !important;
}
#vocal-mobile-page .mic-zone {
  max-width: 540px;
  margin: 0 auto;
  padding: 32px 32px 40px !important;
  justify-content: flex-start;
}

/* Garde-fou : aucun SVG décoratif ne peut dépasser son conteneur */
.main-content svg, #app-scroll svg { max-width: 100%; max-height: 100%; }
.mic-ring, .mic-pulse, .pulse-ring, .mic-halo {
  max-width: 260px !important;
  max-height: 260px !important;
  pointer-events: none;
}

/* ── Formulaire e-mail : champs en colonne, jamais en ligne ────── */
.email-sheet-overlay.open form,
.email-sheet-overlay.open .email-sheet-body { display: flex; flex-direction: column; gap: 14px; }
.email-sheet-overlay.open .field,
.email-sheet-overlay.open .form-row,
.email-sheet-overlay.open label {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px;
  width: 100%;
}
.email-sheet-overlay.open input,
.email-sheet-overlay.open textarea,
.email-sheet-overlay.open select {
  width: 100% !important;
  box-sizing: border-box;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--b2);
  border-radius: var(--r-sm);
  font-size: 14.5px;
}
.email-sheet-overlay.open textarea { height: auto; min-height: 90px; padding: 10px 12px; }
.email-sheet-overlay.open .email-sheet-footer { display: flex; gap: 10px; }

/* ── En-têtes de page ──────────────────────────────────────────── */
.ph { padding: 18px 24px 10px; }

/* ── FAB hors flux de scroll ───────────────────────────────────── */
.fab {
  position: fixed !important;
  bottom: 26px !important;
  right: 26px !important;
  width: 52px !important;
  height: 52px !important;
  z-index: 500;
}
.fab:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(255, 107, 0, .5); }

/* ── Bottom sheet e-mail → modal centré ─────────────────────────
   TOUTES les règles sont scopées à .open : sans ça, neutraliser le
   transform révèle la modale sur toutes les pages.
   ─────────────────────────────────────────────────────────────── */
.email-sheet-overlay.open { display: flex !important; align-items: center; justify-content: center; }

.email-sheet-overlay.open .email-sheet,
.email-sheet.open {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: calc(100% - 48px) !important;
  max-width: 560px !important;
  height: auto !important;
  max-height: 86vh !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28) !important;
  margin: auto;
  overflow-y: auto;
}
.email-sheet-overlay.open .email-sheet-handle,
.email-sheet.open .email-sheet-handle { display: none !important; }
.email-sheet-overlay.open .email-sheet-footer { padding: 14px 20px !important; }

/* ── Liens de prose uniquement : jamais les liens de nav ni de liste ──
   Un a{color:...} global repeignait la sidebar et les lignes de liste.
   ─────────────────────────────────────────────────────────────── */
.main-content p a:not([class]),
#app-scroll p a:not([class]) { color: var(--accent); }
.main-content p a:not([class]):hover,
#app-scroll p a:not([class]):hover { color: #D85500; }


/* ══════════════════════════════════════════════════════════════
   SECTION B — FORMULAIRE NOUVEAU DEVIS
   Balisage df-* dans #nouveau-devis-page. TROIS PANNEAUX PRÉSERVÉS.
   ══════════════════════════════════════════════════════════════ */

#nouveau-devis-page .df-header { padding: 14px 24px 10px; }
#nouveau-devis-page .df-header-center { text-align: left; }
#nouveau-devis-page .df-tab-bar { padding-inline: 24px; }
#nouveau-devis-page .df-tab-txt { font-size: 12px; }

/* Un seul panneau visible à la fois — la navigation reste maîtresse */
#nouveau-devis-page .df-panel { max-width: 720px; margin-inline: auto; padding: 18px 24px 24px; }
#nouveau-devis-page .df-panel:not(.df-panel-active) { display: none; }

/* Champs — confort pointeur */
#nouveau-devis-page .df-input,
#nouveau-devis-page #df-prenom, #nouveau-devis-page #df-nom,
#nouveau-devis-page #df-tel, #nouveau-devis-page #df-email,
#nouveau-devis-page #df-adresse, #nouveau-devis-page #df-cp,
#nouveau-devis-page #df-ville, #nouveau-devis-page #df-lieu-chantier { height: 44px; }

/* Lignes de devis */
#nouveau-devis-page .df-item-row:hover { background: var(--b); }
#nouveau-devis-page .df-item-del:hover { color: var(--er); background: #FEF2F2; }
#nouveau-devis-page .df-add-btn:hover { background: rgba(255, 107, 0, .18); }

/* Footer aligné sur la colonne */
#nouveau-devis-page #df-footer { max-width: 720px; margin-inline: auto; padding: 12px 24px; }
#nouveau-devis-page #df-btn-next:hover,
#nouveau-devis-page #df-btn-generate:hover { opacity: .92; }

/* ── ÉTATS FONCTIONNELS — porteurs d'information, jamais neutralisés ── */

/* Badges « Mon catalogue » / « Standard » : ni écrasés ni tronqués */
#nouveau-devis-page .df-item-row [class*="badge"],
#nouveau-devis-page .df-item-row .badge-catalogue,
#nouveau-devis-page .df-item-row .badge-standard {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Lignes non trouvées (triangle jaune) : fond ambré conservé.
   Sélecteur corrigé (lot 54) ; règle sans effet observable, voir
   css/desktop/devisvox-desktop.css — fonctionnalité non câblée en JS. */
#nouveau-devis-page .df-item-row.unmatched,
#nouveau-devis-page .df-item-row[data-unmatched] { background: rgba(217, 119, 6, .06); }
#nouveau-devis-page .df-item-row.unmatched:hover,
#nouveau-devis-page .df-item-row[data-unmatched]:hover { background: rgba(217, 119, 6, .10); }

/* Prix verrouillé (article du catalogue global) : reste visiblement inerte */
#nouveau-devis-page .df-item-row input[readonly],
#nouveau-devis-page .df-item-row input[disabled] {
  background: var(--b);
  color: var(--text2);
  cursor: not-allowed;
}


/* ══════════════════════════════════════════════════════════════
   SECTION C — PAGES — SÉLECTEURS À VÉRIFIER
   Je n'ai pas reçu le CSS ni le HTML de ces pages : ces noms de classes
   sont déduits de la nomenclature du design system, pas lus dans ton
   dépôt. Chaque règle est inerte si le sélecteur n'existe pas — aucun
   risque de casse, mais aucun effet non plus. Voir README point 3.
   ══════════════════════════════════════════════════════════════ */

/* Devis */
#devis-mobile-page .dv-hdr { padding: 18px 24px 12px; }
#devis-mobile-page input[type="search"] { max-width: 60%; }
#devis-mobile-page .lr { padding: 14px 24px; }
#devis-mobile-page .lr:hover { background: var(--b); }

/* Factures */
#factures-mobile-page .fac-hdr { padding: 18px 24px 12px; }
#factures-mobile-page input[type="search"] { max-width: 60%; }
#factures-mobile-page .lr { padding: 14px 24px; }
#factures-mobile-page .lr:hover { background: var(--b); }

/* Cockpit / tableau de bord */
#cockpit-mobile-page .ck2-kpi { margin-inline: 20px !important; }
#cockpit-mobile-page .ck2-grid { margin-inline: 20px !important; }
#cockpit-mobile-page .ck2-sat-btn,
#cockpit-mobile-page .ck2-ia-btn { width: auto !important; margin-inline: 20px !important; }
#cockpit-mobile-page .ck2-sat-body,
#cockpit-mobile-page .ck2-conseils { padding-inline: 20px !important; }

/* Catalogue */
#catalogue-page .catv2-ui { padding-inline: 24px; }
#catalogue-page .catv2-ui input[type="search"] { max-width: 60%; }
#catalogue-page .catv2-ui .cat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#catalogue-page .catv2-ui .cat-row:hover { background: var(--b); }

/* Agenda */
#agenda-page:not(.hidden) { padding-inline: 24px; }
#agenda-page .ag-cal { max-width: 620px; }
#agenda-page .ag-day:hover { background: var(--b); }

/* Équipe */
#equipe-mobile-page { padding-inline: 24px; }
#equipe-mobile-page .eq-stats { max-width: 520px; }
#equipe-mobile-page .eq-card:hover,
#equipe-mobile-page .eq-member:hover { background: var(--b); }

/* Paramètres */
#parametres-page { padding-inline: 24px; }
#parametres-page .stg-grid,
#parametres-page .settings-grid { grid-template-columns: repeat(3, 1fr) !important; }
#parametres-page .stg-card:hover { transform: translateY(-2px); }
#parametres-page .stg-panel,
#parametres-page .settings-panel { max-width: 640px; margin-inline: auto; }

/* Export comptable */
#export-page { padding-inline: 24px; }
#export-page .exp-body { max-width: 720px; margin-inline: auto; }

/* Mes frais */
#frais-page { padding-inline: 24px; }
#frais-page .fr-body { max-width: 680px; margin-inline: auto; }
#frais-page .fr-row:hover { background: var(--b); }

/* Clients */
#clients-mobile-page .cli-body { padding-inline: 24px; }
#clients-mobile-page .cli-row:hover { background: var(--b); }

}