/* ART CONSTRUCTION - hub /outils/dossiers/ : pages autonomes « Modeles & Dossiers » (mini-outils de l'Etage 1, carte du pack, guide de l'Etage 3, encart des pages d'outils).
   Tout est prefixe .od- ou .ot- ; les variables (--ot-*) viennent de outils.css. Responsive de 320 a 1920 px : aucun debordement horizontal. */

/* ------------------------------------------------------------------ Etage 1 : mini-outil */
.od { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.od-form { display: grid; gap: 14px; min-width: 0; }
.od-champ { display: grid; gap: 6px; min-width: 0; }
.od-champ label, .od-champ legend { color: var(--ot-txt); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.od-champ input[type="number"], .od-champ input[type="date"], .od-champ input[type="text"], .od-champ select { width: 100%; max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; color: var(--ot-txt); font: inherit; font-size: 15px; }
.od-champ input:focus, .od-champ select:focus { outline: 2px solid var(--ot-bleu); outline-offset: 1px; border-color: var(--ot-bleu); }
.od-champ fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.od-case { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--ot-bord); border-radius: 10px; background: var(--ot-bg); color: var(--ot-sec); font-size: 14px; font-weight: 500; line-height: 1.45; cursor: pointer; }
.od-case input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ot-bleu); }
.od-res { min-width: 0; padding: 18px; border: 1px solid #BFDBFE; border-radius: 14px; background: var(--ot-bleu-s); color: var(--ot-txt); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.od-t { margin: 16px 0 8px; color: var(--ot-txt); font-size: 14px; font-weight: 700; }
.od-res > .od-t:first-child { margin-top: 0; }
.od-kv { display: grid; gap: 0; margin: 0 0 10px; }
.od-kv > div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid #DBEAFE; }
.od-kv dt { margin: 0; color: var(--ot-sec); font-size: 13.5px; }
.od-kv dd { margin: 0; color: var(--ot-txt); font-weight: 600; text-align: right; }
.od-kv .od-fort dd { color: var(--ot-bleu-f); font-size: 1.05rem; }
.od-kv .od-neg dd { color: #B91C1C; }
.od-msg { margin: 0 0 12px; padding: 11px 14px; border: 1px solid; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.od-msg-ok { border-color: #BBF7D0; background: #F0FDF4; color: #166534; }
.od-msg-warn { border-color: #FDE68A; background: #FFFBEB; color: #92400E; }
.od-msg-ko { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }
.od-ul { margin: 0 0 10px; padding-left: 20px; }
.od-ul li + li { margin-top: 5px; }
.od-chk { list-style: none; padding-left: 0; }
.od-chk li { position: relative; padding-left: 26px; }
.od-chk li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border: 2px solid #94A3B8; border-radius: 4px; }
.od-note { margin: 10px 0 0; color: var(--ot-mut); font-size: 12.5px; line-height: 1.5; }
.od-tab { overflow-x: auto; margin: 0 0 10px; }
.od-tab table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.od-tab th, .od-tab td { padding: 8px 10px; border-bottom: 1px solid var(--ot-bord); text-align: left; vertical-align: top; }
.od-tab th { background: rgba(255,255,255,.7); font-weight: 600; }
.od-texte { width: 100%; min-height: 110px; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; color: var(--ot-txt); font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.od-copier { margin-top: 8px; }

/* ------------------------------------------------------------------ Etage 2 : carte du pack */
.ot-modeles-dossier .ot-modele { max-width: 980px; }
.od-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ot-modeles-dossier .od-actions .ot-btn { margin-top: 0; }
.od-encart { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.od-encart-lien { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 20px; border: 1px solid var(--ot-bord); border-left: 3px solid var(--ot-bleu); border-radius: var(--ot-r); background: var(--ot-card); box-shadow: var(--ot-ombre); color: var(--ot-txt); text-decoration: none; }
.od-encart-lien:hover { border-color: #93C5FD; }
.od-encart-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.od-encart-desc { color: var(--ot-sec); font-size: 14px; line-height: 1.55; }
.od-encart-cta { margin-top: auto; color: var(--ot-bleu-f); font-size: 14px; font-weight: 700; }

/* ------------------------------------------------------------------ Etage 3 : guide expert */
.od-guide h2.ot-h2 { margin-top: 34px; }
.od-guide > h2.ot-h2:first-child { margin-top: 0; }
.od-guide p { margin: 0 0 14px; color: var(--ot-sec); font-size: 15.5px; line-height: 1.7; }
.od-guide .ot-h3 { margin: 24px 0 8px; line-height: 1.4; }
.od-cas { margin: 28px 0; padding: 18px 22px; border: 1px solid #FDE68A; border-left: 4px solid #F59E0B; border-radius: 12px; background: #FFFBEB; }
.od-cas-t { margin: 0 0 6px !important; color: #92400E !important; font-size: 13px !important; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.od-cas p:last-child { margin-bottom: 0; color: var(--ot-txt); }
.od-parties { margin: 20px 0; padding: 4px 0; }
.od-parties table { background: #fff; border: 1px solid var(--ot-bord); border-radius: 10px; }
.od-maillage { margin: 30px 0 10px; padding: 18px 22px; border: 1px solid var(--ot-bord); border-radius: 12px; background: var(--ot-bg); }
.od-liens { margin: 0; padding-left: 20px; }
.od-liens li + li { margin-top: 6px; }
.od-liens a { color: var(--ot-bleu-f); font-weight: 600; }
.od-guide .od-mention { margin-top: 18px; padding: 10px 14px; border-radius: 10px; background: #F1F5F9; color: var(--ot-txt); font-size: 13px; font-style: italic; }
.od-guide .od-sources { color: var(--ot-mut); font-size: 12.5px; line-height: 1.55; }

/* ------------------------------------------------------------------ index des dossiers */
.od-carte { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ot-txt); }
.od-carte-code { color: var(--ot-mut); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
.od-carte-desc { color: var(--ot-sec); font-size: 13.5px; line-height: 1.5; }
.od-carte-fmts { display: flex; gap: 4px; margin-top: auto; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .od { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .od-res { padding: 14px; }
  .od-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .od-kv dd { text-align: left; }
  .od-cas, .od-maillage { padding: 14px 16px; }
  .od-actions .ot-btn { width: 100%; justify-content: center; }
  .od-guide p { font-size: 15px; }
}