/* SD ONE lot 86 (24/10/2026) : écrans Itinéraires, Programme, Traductions, Prestations en ligne, Paiement en ligne,
   Configurer les SMS, Pack SMS, Serveur sortant. Bleu nuit, bleu, argent. Boutons de 44 px au moins sur téléphone. Aucun mot coupé. */
.sd86 { color: #0B1F3A; overflow-wrap: break-word; word-break: normal; hyphens: none; -webkit-hyphens: none; }
.sd86 * { box-sizing: border-box; }
.sd86-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.sd86-tete-t { flex: 1 1 320px; min-width: 0; }
.sd86-tete-d { flex: 0 0 auto; display: flex; align-items: center; }
.sd86-sous { margin: 4px 0 0; color: #3A4E68; max-width: 70ch; line-height: 1.45; }
.sd86-h2 { font-size: 17px; margin: 0 0 10px; color: #0B1F3A; }
.sd86-corps { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.sd86-corps .tuile, .sd86-cartes .tuile { min-width: 0; }
.sd86 > .tuile, .sd86-rep, .sd86-modeles { margin: 14px 0 0; }
.sd86-modeles { margin: 0 0 14px; }
.sd86-liste-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.sd86-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sd86-ligne { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 48px; padding: 8px 12px; border: 1px solid #C9D2DE; border-radius: 10px; background: #F5F7FA; color: #0B1F3A; cursor: pointer; font: inherit; }
.sd86-ligne:hover, .sd86-ligne:focus-visible { border-color: #1E5AA8; background: #EAF1FA; outline: none; }
.sd86-ligne small { color: #4A5D75; }
.sd86-ligne.sd86-masque { opacity: .62; border-style: dashed; }
.sd86-aide { color: #4A5D75; margin: 4px 0; }
.sd86-refus { color: #8A1F2B; font-weight: 600; }
.sd86-note { color: #3A4E68; font-size: 13px; margin: 8px 0 0; }
.sd86-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 6px 0 10px; }
.sd86-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd86-l2 { grid-column: 1 / -1; }
.sd86-lib, .sd86-lib2 { color: #0B1F3A; font-weight: 600; font-size: 13px; }
.sd86-lib2 { margin: 12px 0 6px; }
.sd86-ch { width: 100%; min-width: 0; min-height: 40px; border: 1px solid #A7B0BC; border-radius: 8px; padding: 8px 10px; color: #0B1F3A; background: #fff; font: inherit; }
textarea.sd86-ch { resize: vertical; line-height: 1.4; }
.sd86-ch:focus { outline: 2px solid #1E5AA8; outline-offset: 1px; border-color: #1E5AA8; }
.sd86-ligne-ch { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.sd86-ligne-ch .sd86-ch { flex: 1 1 120px; }
.sd86-case { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; color: #0B1F3A; }
.sd86-case input { width: 20px; height: 20px; accent-color: #1E5AA8; }
.sd86-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.sd86-bt { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sd86-bt svg { flex: 0 0 auto; }
.sd86-etat { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.sd86-off { background: #E8ECF1; color: #2B3E57; border: 1px solid #B9C3D0; }
.sd86-on { background: #DCE9F8; color: #0F3D78; border: 1px solid #8DB0DB; }
/* étapes et lignes de programme */
.sd86-ets, .sd86-pls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sd86-et, .sd86-pl { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid #D3DAE4; border-radius: 10px; background: #F7F9FC; }
.sd86-pt { flex: 0 0 32px; height: 32px; margin-top: 4px; border-radius: 50%; background: #0B1F3A; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sd86-et-c { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 6px; }
.sd86-et-c .wp6b-sugg { grid-column: 1 / -1; order: 3; }
.sd86-pl-c { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 150px 110px 110px minmax(0, 1fr); gap: 6px; }
.sd86-mini { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: #3A4E68; }
.sd86-mini3 { grid-column: 1 / -1; }
.sd86-fl { flex: 0 0 auto; display: flex; gap: 4px; }
.sd86-m { width: 40px; height: 40px; border: 1px solid #B9C3D0; border-radius: 8px; background: #fff; color: #0B1F3A; font-size: 18px; cursor: pointer; }
.sd86-m:hover, .sd86-m:focus-visible { border-color: #1E5AA8; color: #1E5AA8; outline: none; }
.sd86-sup:hover { color: #8A1F2B; border-color: #8A1F2B; }
/* carte */
.sd86-carte { height: 340px; margin: 10px 0 0; border-radius: 10px; overflow: hidden; border: 1px solid #C9D2DE; background: #E8ECF1; }
.sd86-km { font-weight: 600; color: #123A6B; margin: 6px 0 0; min-height: 1.2em; }
.sd86-pin { background: #0B1F3A; color: #fff; border: 2px solid #fff; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(11, 31, 58, .5); font-size: 12px; }
/* ancien logiciel, écrans extérieurs */
.sd86-ancien summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: #0B1F3A; }
.sd86-ancien-c { color: #23364F; line-height: 1.45; }
.sd86-rep-l li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #E1E6ED; }
.sd86-rep-l li > span { min-width: 0; }
.sd86-rep-l small { color: #4A5D75; }
.sd86-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sd86-cartes .pleine { grid-column: 1 / -1; }
.sd86-ul2 { margin: 0; padding-left: 20px; line-height: 1.5; }
.sd86-ul2 li { margin: 0 0 6px; }
.sd86-dec { margin: 0; padding-left: 22px; line-height: 1.5; }
.sd86-dec li { margin: 0 0 8px; }
.sd86-sms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sd86-sms li { padding: 8px 10px; border: 1px solid #D3DAE4; border-radius: 10px; background: #F7F9FC; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.sd86-sms small { flex: 1 1 100%; color: #3A4E68; }
.sd86-qui { font-size: 12px; font-weight: 700; color: #fff; background: #1A4F94; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.sd86-tab { width: 100%; border-collapse: collapse; }
.sd86-tab th, .sd86-tab td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #E1E6ED; }
.sd86-tab th { color: #3A4E68; font-size: 13px; }
/* téléphone */
@media (max-width: 860px) {
  .sd86-corps, .sd86-cartes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sd86-g { grid-template-columns: minmax(0, 1fr); }
  .sd86-ch { min-height: 44px; font-size: 16px; }
  .sd86-bt, .sd86 .bt { min-height: 44px; }
  .sd86-bt { white-space: normal; text-align: left; }
  .sd86-m { width: 44px; height: 44px; }
  .sd86-case { min-height: 44px; }
  .sd86-et, .sd86-pl { flex-wrap: wrap; }
  .sd86-et-c, .sd86-pl-c { grid-template-columns: minmax(0, 1fr); flex-basis: calc(100% - 44px); }
  .sd86-fl { width: 100%; justify-content: flex-end; }
  .sd86-carte { height: 260px; }
  .sd86-rep-l li { flex-wrap: wrap; }
  .sd86-tab thead { display: none; }
  .sd86-tab tr { display: block; border-bottom: 1px solid #C9D2DE; padding: 6px 0; }
  .sd86-tab td { display: flex; justify-content: space-between; gap: 10px; border: 0; padding: 3px 0; }
  .sd86-tab td::before { content: attr(data-l); color: #4A5D75; font-weight: 600; }
}
/* impression : seule la zone #sd86-impr est imprimée */
#sd86-impr { display: none; }
@media print {
  body.sd86-imprime > *:not(#sd86-impr) { display: none !important; }
  body.sd86-imprime #sd86-impr { display: block; }
  body.sd86-imprime { background: #fff !important; }
  .sd86-p { color: #0B1F3A; font: 12pt/1.45 system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Arabic", "Noto Sans CJK SC", "Noto Sans JP", sans-serif; overflow-wrap: break-word; hyphens: none; }
  .sd86-p-h { display: flex; justify-content: space-between; border-bottom: 2px solid #0B1F3A; padding-bottom: 6px; margin-bottom: 14px; }
  .sd86-p h1 { font-size: 20pt; margin: 0 0 8px; }
  .sd86-p h2 { font-size: 13pt; margin: 16px 0 6px; color: #1A4F94; break-after: avoid; }
  .sd86-p table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
  .sd86-p th, .sd86-p td { text-align: start; vertical-align: top; padding: 5px 6px; border-bottom: 1px solid #C9D2DE; }
  .sd86-p th { background: #E8ECF1; }
  .sd86-p tr { break-inside: avoid; }
  .sd86-p td.sd86-p-hr { white-space: nowrap; width: 1%; }
  .sd86-p-i { color: #23364F; }
  .sd86-p-note { white-space: normal; }
  .sd86-p-pied { margin-top: 24px; font-size: 10pt; color: #4A5D75; border-top: 1px solid #C9D2DE; padding-top: 6px; }
}
/* 24/10 revue : l'en-tête est posé sur le fond bleu nuit (hors tuile) : titre blanc et sous-titre argent, comme .v2-titre ;
   thèmes clairs (gris, blanc) : bleu nuit, comme v2-themes.css */
:root:not([data-theme]) #v2-contenu .sd86-tete .h1m, :root[data-theme="bleu"] #v2-contenu .sd86-tete .h1m { color: #fff; }
:root:not([data-theme]) #v2-contenu .sd86-tete .sd86-sous, :root[data-theme="bleu"] #v2-contenu .sd86-tete .sd86-sous { color: #C9D1DC; }
html[data-theme="gris"] #v2-contenu .sd86-tete .h1m, html[data-theme="blanc"] #v2-contenu .sd86-tete .h1m { color: #0F2A4A; }
html[data-theme="gris"] #v2-contenu .sd86-tete .sd86-sous, html[data-theme="blanc"] #v2-contenu .sd86-tete .sd86-sous { color: #3A4E68; }