/* =========================================================================
   modeles.css — charte parchemin LeFisk (encre / sceau / or) appliquée aux
   modèles de documents (/modeles/*). Surcouche : re-skinne les accents bleus
   d'origine, rend les champs éditables, stylise la barre d'outils + cloud.
   Chargé APRÈS le <style> inline de chaque page → !important pour gagner.
   ========================================================================= */
:root{
  --encre:#16261C; --sceau:#1F6E43; --sceauF:#174F31;
  --papier:#F4F2EA; --ligne:#DDD8C8; --or:#C9A227;
}

/* ── Fond & feuille ───────────────────────────────────────────────────── */
body{ background:#e9e5d8 !important; }
.page{
  background:#fffdf7 !important;
  box-shadow:0 8px 34px rgba(22,38,28,.13) !important;
  font-family:'Tinos','Times New Roman',Times,serif !important;
  color:#16261C !important;
}

/* ── Barre d'outils ───────────────────────────────────────────────────── */
.toolbar{ background:var(--encre) !important; border-bottom:2px solid var(--or) !important; }
.toolbar-title{ color:var(--papier) !important; font-family:'Space Grotesk',Arial,sans-serif !important; }
.toolbar-sub{ color:rgba(244,242,234,.6) !important; }
.toolbar-back{ color:rgba(244,242,234,.6) !important; }
.toolbar-back:hover{ color:var(--or) !important; }
.toolbar-sep{ background:rgba(255,255,255,.14) !important; }
.toolbar-right{ display:flex !important; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── Boutons injectés par modeles.js ──────────────────────────────────── */
.md-btn{
  border:none; padding:9px 15px; border-radius:8px; cursor:pointer;
  font:700 12px/1 'Space Grotesk',Arial,sans-serif; letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  color:#fff; background:#2b3b31; transition:filter .12s, background .12s;
}
.md-btn:hover{ filter:brightness(1.13); }
.md-btn i{ font-size:14px; line-height:1; }
.md-btn.is-pdf{ background:var(--sceau); }
.md-btn.is-word{ background:#0e5c78; }
.md-btn.is-print{ background:#3a4a40; }
.md-btn.is-edit.active{ background:var(--or); color:#3a2c00; }
.md-btn.is-ghost{ background:transparent; color:rgba(244,242,234,.72); border:1px solid rgba(255,255,255,.2); }
.md-btn.is-ghost:hover{ background:transparent; color:#fff; border-color:var(--or); filter:none; }

/* Pastille d'état cloud */
.md-cloud{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font:600 11.5px/1 'Space Grotesk',Arial,sans-serif;
  padding:8px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); color:rgba(244,242,234,.82); background:transparent;
}
.md-cloud .dot{ width:7px; height:7px; border-radius:50%; background:#9ca3af; transition:background .2s; }
.md-cloud.saved  .dot{ background:#38d27a; }
.md-cloud.saving .dot{ background:var(--or); animation:mdpulse 1s infinite; }
.md-cloud.err    .dot{ background:#e0564e; }
.md-cloud.guest{ border-style:dashed; }
.md-cloud.guest:hover{ color:#fff; border-color:var(--or); }
@keyframes mdpulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.md-btn.is-docs{ background:#33463a; }

/* Menu « Mes documents » */
.md-menu{
  position:fixed; top:60px; right:16px; z-index:60; width:320px; max-width:calc(100vw - 32px);
  background:#fffdf7; border:1px solid var(--ligne); border-radius:12px;
  box-shadow:0 14px 40px rgba(22,38,28,.28); padding:12px; font-family:'Space Grotesk',Arial,sans-serif;
  max-height:min(70vh,520px); overflow:auto;
}
.md-menu-head{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a8f83; margin:4px 2px 6px; }
.md-title-row{ display:flex; align-items:center; gap:8px; background:#f7f5ec; border:1px solid var(--ligne); border-radius:8px; padding:6px 10px; margin-bottom:10px; }
.md-title-row i{ color:var(--sceau); font-size:15px; }
.md-title-input{ flex:1; border:none; background:transparent; font:600 13px 'Space Grotesk',Arial,sans-serif; color:var(--encre); outline:none; }
.md-new{ width:100%; display:flex; align-items:center; justify-content:center; gap:6px; border:1px dashed var(--sceau); background:#f2f7f3; color:var(--sceauF); font:700 12px 'Space Grotesk',Arial,sans-serif; padding:9px; border-radius:8px; cursor:pointer; margin-bottom:12px; }
.md-new:hover{ background:#e9f2ec; }
.md-list{ display:flex; flex-direction:column; gap:4px; }
.md-empty{ font-size:12px; color:#9a9f92; padding:6px 2px; font-style:italic; }
.md-doc-item{ display:flex; align-items:stretch; gap:2px; border:1px solid transparent; border-radius:8px; }
.md-doc-item:hover{ background:#f5f3ea; }
.md-doc-item.active{ background:#eef3ee; border-color:#cfe3d6; }
.md-doc-open{ flex:1; display:flex; align-items:center; gap:8px; background:transparent; border:none; cursor:pointer; padding:8px 10px; text-align:left; min-width:0; }
.md-doc-open > i{ color:var(--sceau); font-size:15px; flex-shrink:0; }
.md-doc-name{ flex:1; font:600 12.5px 'Space Grotesk',Arial,sans-serif; color:var(--encre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-doc-date{ font-size:10px; color:#a2a79a; flex-shrink:0; }
.md-doc-del{ background:transparent; border:none; color:#b9877f; cursor:pointer; padding:0 10px; border-radius:0 8px 8px 0; }
.md-doc-del:hover{ color:#c0392b; background:#f7ecea; }

/* ── Champs éditables ─────────────────────────────────────────────────── */
.field{
  background:#fbf6e6 !important; border:1px dashed var(--or) !important;
  color:#7a5b12 !important; border-radius:4px !important; padding:2px 8px !important;
  font-style:italic; transition:background .12s, border-color .12s, box-shadow .12s;
}
.field[contenteditable]{ cursor:text; }
.field:hover{ border-color:#a9861f !important; }
.field:focus{
  outline:none !important; background:#fff !important;
  border-style:solid !important; border-color:var(--sceau) !important;
  color:#16261C !important; font-style:normal !important;
  box-shadow:0 0 0 2px rgba(31,110,67,.18) !important;
}
.field:empty::before{ content:attr(data-ph); color:#a98b3a; opacity:.72; font-style:italic; }
.page[contenteditable="true"]{ outline:2px dashed rgba(31,110,67,.4); outline-offset:8px; }

/* ── Re-skin des accents bleus d'origine → sceau / or ─────────────────── */
.doc-rule{ border-top-color:var(--or) !important; }
.doc-title{ color:var(--encre) !important; }
.section-title{ background:#eef3ee !important; border-left-color:var(--sceau) !important; color:var(--sceauF) !important; }
.section-title i{ color:var(--sceau) !important; }
.party{ border-left-color:var(--sceau) !important; background:#f7f5ec !important; }
.party-label{ color:var(--sceauF) !important; }
.party-label i{ color:var(--sceau) !important; }
.sig-box{ border-top-color:var(--sceau) !important; }
.sig-label{ color:var(--sceauF) !important; }
.sig-label i{ color:var(--sceau) !important; }
.legal-ref{ background:#eef3ee !important; border-left-color:var(--sceau) !important; color:var(--sceauF) !important; }
.legal-ref i{ color:var(--sceau) !important; }
/* Lettres : en-tête, expéditeur/destinataire, onglets, encadrés */
.letterhead{ border-color:var(--sceau) !important; }
.lh-label, .lh-label-r, .sender-label, .receiver-label, .recap-title, .checklist-head{ color:var(--sceauF) !important; }
.lh-label i, .sender-label i, .receiver-label i, .checklist-head i{ color:var(--sceau) !important; }
.recap-box td:first-child{ color:var(--sceauF) !important; }
.note-box{ background:#fbf7e6 !important; border-left-color:var(--or) !important; }
.note-box i{ color:var(--or) !important; }
.alert-box{ border-left-color:var(--or) !important; }
.tab.active{ color:var(--sceau) !important; border-color:var(--sceau) !important; }
.tab:hover{ color:var(--sceauF) !important; }
.objet{ color:var(--encre) !important; }
/* Encadrés & tableaux récap (résidus bleus → parchemin/sceau) */
.doc-ref{ background:#f4f2ea !important; border-color:var(--ligne) !important; }
.checklist-head{ background:#eef3ee !important; border-bottom-color:var(--ligne) !important; }
.recap-box td:first-child{ background:#f2f4f0 !important; }
.recap-box tr:nth-child(even) td:first-child{ background:#eef3ee !important; }

/* ── Impression / export : champs propres, sans surlignage ────────────── */
@media print{
  body{ background:#fff !important; }
  .toolbar, .tabs{ display:none !important; }
  .page{ box-shadow:none !important; }
  .page.hidden{ display:none !important; }
  .field{
    background:transparent !important; border:none !important; color:#111 !important;
    font-style:normal !important; font-weight:600; box-shadow:none !important;
    padding:0 !important; min-width:0 !important;
  }
  .field:empty::before{ color:#555; font-weight:normal; }
  .section-title, .party, .legal-ref, .note-box, .letterhead, .sig-box, .md-lh{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}

/* ============================ PAPIER EN-TÊTE ============================ */
.md-lh:empty{ display:none; }
.md-lh.has.md-lh-header{ margin:0 0 12mm; padding-bottom:6px; border-bottom:1px solid #e5e7eb; }
.md-lh.has.md-lh-footer{ margin:12mm 0 0; padding-top:6px; border-top:1px solid #e5e7eb; }
.md-lh img{ max-width:100%; max-height:38mm; object-fit:contain; display:block; margin:0 auto; }
.md-lh-footer.has{ text-align:center; font-size:9pt; color:#475569; }
.md-lh-header.has{ text-align:center; }
.md-lh-text{ line-height:1.45; }
/* rendu composé des champs structurés (affichage + export) */
.md-lh-org{ line-height:1.35; }
.md-lh-name{ font-weight:700; font-size:13.5pt; letter-spacing:.3px; text-transform:uppercase; }
.md-lh-sub{ font-size:9.5pt; color:#334155; margin-top:1px; }
.md-lh-contact{ font-size:9pt; color:#475569; margin-top:2px; }
.md-lh-legal{ font-size:8.5pt; color:#475569; line-height:1.4; }
.md-btn.is-lh.active, .md-btn.is-lh:hover{ color:#5eead4; }

.md-lh-modal{ position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; padding:16px; font-family:Arial,Helvetica,sans-serif; }
.md-lh-box{ background:#fff; border-radius:16px; width:100%; max-width:480px; max-height:92vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.md-lh-hd{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; background:#0f172a; color:#fff; font-weight:700; font-size:15px; position:sticky; top:0; }
.md-lh-x{ background:none; border:none; color:#fff; font-size:22px; cursor:pointer; line-height:1; }
.md-lh-bd{ padding:18px; }
.md-lh-hint{ font-size:12.5px; color:#64748b; margin:0 0 12px; line-height:1.5; }
.md-lh-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.md-lh-empty{ font-size:13px; color:#94a3b8; text-align:center; padding:14px; }
.md-lh-item{ display:flex; gap:6px; align-items:center; }
.md-lh-apply{ flex:1; text-align:left; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; cursor:pointer; font-size:13px; font-weight:600; color:#0f172a; display:flex; align-items:center; gap:8px; }
.md-lh-apply:hover{ border-color:#0f766e; background:#f0fdfa; }
.md-lh-mini{ width:34px; height:34px; border:1px solid #e2e8f0; border-radius:9px; background:#fff; cursor:pointer; color:#64748b; }
.md-lh-mini:hover{ border-color:#94a3b8; color:#0f172a; }
.md-lh-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.md-lh-btn{ flex:1; padding:11px; border-radius:10px; border:none; font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.md-lh-btn.primary{ background:#0f766e; color:#fff; } .md-lh-btn.primary:hover{ background:#0b5c55; }
.md-lh-btn.ghost{ background:#f1f5f9; color:#334155; } .md-lh-btn.ghost:hover{ background:#e2e8f0; }
.md-lh-lbl{ display:block; font-size:12px; font-weight:700; color:#334155; margin:12px 0 5px; }
.md-lh-in, .md-lh-ta{ width:100%; box-sizing:border-box; border:1px solid #e2e8f0; border-radius:9px; padding:9px 11px; font-size:13px; font-family:inherit; outline:none; }
.md-lh-in:focus, .md-lh-ta:focus{ border-color:#0f766e; }
.md-lh-zone{ border-top:1px solid #f1f5f9; padding-top:6px; margin-top:10px; }
.md-lh-seg{ display:inline-flex; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; margin-bottom:8px; }
.md-lh-seg button{ padding:6px 12px; border:none; background:#fff; font-size:12px; font-weight:600; color:#64748b; cursor:pointer; }
.md-lh-seg button.on{ background:#0f766e; color:#fff; }
.md-lh-file{ font-size:12px; width:100%; }
.md-lh-prev{ margin-top:8px; } .md-lh-prev img{ max-width:100%; max-height:80px; border:1px solid #e2e8f0; border-radius:6px; }
/* collecte structurée par champs */
.md-lh-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.md-lh-fld{ display:flex; flex-direction:column; gap:3px; }
.md-lh-fld.wide{ grid-column:1 / -1; }
.md-lh-fld label{ font-size:11px; font-weight:600; color:#64748b; }
.md-lh-in.sm{ padding:7px 9px; font-size:12.5px; }
.md-lh-in.big{ font-weight:700; }
.md-lh-pane{ margin-top:2px; }
@media (max-width:420px){ .md-lh-grid{ grid-template-columns:1fr; } }
@media print{ .md-lh-modal{ display:none !important; } }