/* charte-socle.css — 🎨 LE SOCLE COMMUN DES ÉCRANS LONGUE DURÉE ☀️ 02/11/2026
   Demande de Matthieu : « adapter les écrans à la version mobile et réutiliser le même style de la LCD pour la LLD ».
   Lu par tous les espaces LLD (administration, bailleur, locataire, parcours publics), après les styles propres de chaque écran,
   par l'intermédiaire de charte_tags() (lld_hors_public/lib/charte-tags.php).
   Les couleurs viennent de /lcd-public/charte-jetons.css, la source que lit aussi l'administration LCD.
   Les documents signés et les CGU archivées restent hors de cette feuille : ils gardent design-system.css, tel quel.
   en toute bienveillance, transparence, douceur et liberté 🙏💛 */

:root {
  --police-titres: 'Fraunces', Georgia, serif;
  --police-texte-def: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --trait-doux: #EFF7E0;
}

@media screen {
  body { font-family: var(--police-texte, var(--police-texte-def)); }
  h1 { font-family: var(--police-titres); letter-spacing: 0; }
  button, input, select, textarea { font-family: inherit; }
  /* Intertitres en phrase ordinaire : règle de Matthieu du 04/09/2026, le champ de saisie garde la frappe */
  body *:not(input):not(textarea) { text-transform: none !important; }
  :where(img, video, iframe, embed, object) { max-width: 100%; }
}

/* 🪧 Une page d'état (lien expiré, accès attendu, bien introuvable) : voir charte_tete_etat() */
@media screen {
  body.page-etat { max-width: 560px; margin: 0 auto; padding: 64px 24px; text-align: center; background: var(--g5); color: var(--dark); line-height: 1.6; }
  body.page-etat h1, body.page-etat h2 { font-family: var(--police-titres); font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: var(--g2); margin: 8px 0 14px; }
  body.page-etat p { margin: 0 0 12px; }
  body.page-etat a { color: var(--g2); font-weight: 600; }
  body.page-etat .etat-carte { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 24px; text-align: left; }
}

/* ── 📱 Sur téléphone ───────────────────────────────────────────────── */
@media screen and (max-width: 760px) {
  /* un texte long se coupe, une colonne de formulaire s'empile */
  pre, code, kbd { white-space: pre-wrap; overflow-wrap: anywhere; }
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"], [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:200px"], [style*="grid-template-columns: 200px"] { grid-template-columns: 1fr !important; }
  /* la saisie reste nette : sous 16 px, le téléphone zoome la page */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not(.bm-esp), select:not(.bm-esp), textarea { font-size: 16px !important; }

  /* 🗂️ Un tableau devient une pile de fiches : chaque ligne une fiche, chaque colonne son libellé (posé par tableaux-cartes.js) */
  table.tbl-cartes { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100%; height: auto !important;
                     border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
                     overflow: visible !important; font-size: 13.5px; }
  table.tbl-cartes > caption { display: block; text-align: left; font-weight: 700; color: var(--g2); margin-bottom: 8px; }
  table.tbl-cartes > thead, table.tbl-cartes tr.tc-entete { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.tbl-cartes > tbody, table.tbl-cartes > tfoot { display: block; width: 100%; }
  table.tbl-cartes > tbody > tr, table.tbl-cartes > tfoot > tr {
    display: block; width: 100%; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0 0 9px; }
  table.tbl-cartes > tbody > tr > td, table.tbl-cartes > tbody > tr > th,
  table.tbl-cartes > tfoot > tr > td, table.tbl-cartes > tfoot > tr > th {
    display: block; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 5px 0 !important; border: 0 !important; background: transparent !important;
    text-align: right; white-space: normal !important; overflow-wrap: anywhere; font-size: inherit; font-weight: inherit; color: inherit; height: auto !important; }
  table.tbl-cartes td[data-label]::before, table.tbl-cartes th[data-label]::before {
    content: attr(data-label); float: left; max-width: 46%; margin-right: 10px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; line-height: 1.55; overflow-wrap: normal; }
  table.tbl-cartes td[data-label]::after, table.tbl-cartes th[data-label]::after { content: ""; display: block; clear: both; }
  table.tbl-cartes td[data-label=""]::before, table.tbl-cartes th[data-label=""]::before { display: none; }
  table.tbl-cartes .tc-vide { display: none !important; }
  /* la première colonne parlante fait le titre de la fiche */
  table.tbl-cartes > tbody > tr > .tc-titre { text-align: left; font-weight: 700; font-size: 15px; color: var(--g2); padding: 0 0 7px !important; margin-bottom: 4px; border-bottom: 1px dashed var(--border) !important; }
  table.tbl-cartes .tc-titre::before { display: none !important; }
  /* les boutons d'une ligne prennent la largeur de la fiche */
  table.tbl-cartes > tbody > tr > .tc-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: stretch; text-align: left; padding-top: 9px !important; }
  table.tbl-cartes .tc-actions::before, table.tbl-cartes .tc-actions::after { display: none !important; }
  table.tbl-cartes .tc-actions > a, table.tbl-cartes .tc-actions > button, table.tbl-cartes .tc-actions > form { flex: 1 1 auto; margin: 0; }
  table.tbl-cartes .tc-actions > a, table.tbl-cartes .tc-actions > button, table.tbl-cartes .tc-actions > form > button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; width: 100%; }
  /* ligne qui court sur toute la largeur : un intertitre ou une note */
  table.tbl-cartes > tbody > tr.tc-plein { padding: 8px 12px; background: var(--g5); }
  table.tbl-cartes > tbody > tr.tc-plein > td, table.tbl-cartes > tbody > tr.tc-plein > th { text-align: left; }
  table.tbl-cartes > tbody > tr.tc-plein > *::before { display: none; }
  /* le cadre qui faisait défiler le tableau s'efface */
  .table-wrap:has(> table.tbl-cartes), .scroll:has(> table.tbl-cartes) { background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; }
  table.tbl-cartes td table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ── Compléments relevés à la vérification ☀️ 02/11/2026 ── */
@media screen {
  select, input, textarea { max-width: 100%; }
  /* les graphiques en barres gardent leurs libellés sur une ligne */
  .bar-val, .bar-lbl { overflow-wrap: normal; white-space: nowrap; }
  /* un courriel affiché garde la largeur de l'écran */
  .mx .corps { overflow-wrap: anywhere; }
  .mx .corps table { width: auto !important; max-width: 100% !important; }
  .mx .corps td, .mx .corps th { width: auto !important; }
  .mx .corps img { max-width: 100%; height: auto; }
}
@media screen and (max-width: 760px) {
  /* un élément flexible ou de grille suit la largeur de l'écran : un menu déroulant long reste dans sa colonne */
  * { min-width: 0; }
  table.tbl-cartes .tc-actions > a, table.tbl-cartes .tc-actions > button { width: auto; }
  .bar-val { font-size: 9.5px; }
  .bar-lbl { font-size: 10.5px; }
}
@media screen and (max-width: 760px) {
  /* la barre haute, hors du hub, garde ses mots entiers : logo, rôle, déconnexion */
  .nav-inner { gap: 8px; padding: 0 12px; }
  .nav-user { gap: 8px; }
  .nav-logo, .nav-badge, .nav-user .btn, .nav-mobile { flex: 0 0 auto; white-space: nowrap; }
  .nav-user-avatar { display: none; }
}
@media screen and (max-width: 370px) {
  .nav-badge { display: none; }
}
@media screen and (max-width: 760px) {
  /* la petite liste posée sur une vignette garde son allure et une saisie sans zoom : 16 px réduits à l'œil */
  html .bm-esp { font-size: 16px !important; transform: scale(.7); transform-origin: left bottom; right: auto; width: calc((100% - 6px) / .7); padding: 2px 4px; }
  /* un petit bouton de ligne reste à portée de doigt */
  html button.mini { min-height: 38px; padding: 6px 10px; }
  html .hdr a, html .hdr button { min-height: 38px; display: inline-flex; align-items: center; }
  /* un en-tête ancien passe à la ligne plutôt que de couper son logo */
  .header-content { flex-wrap: wrap; gap: 6px 12px; }
  .user-block a { display: inline-block; padding: 6px 0; }
}