/* ============================================================
   /facture-gratuite/ - styles propres a l'outil public
   Complete css/style.css, style-2026.css et style-outils.css
   ============================================================ */

/* Force le rendu clair : desactive le theme sombre natif du navigateur */
:root { color-scheme: light; }

/* Page wrapper */
.fg-page { max-width: 1020px; margin: 90px auto 60px; padding: 0 16px; }

/* Intro hero */
.fg-hero { text-align: center; margin-bottom: 28px; }
.fg-hero h1 { font-size: 1.7rem; font-weight: 700; color: #0f172a; margin: 0 0 8px; }
.fg-hero p  { font-size: 1rem; color: #64748b; margin: 0; }

/* Fonds repris de l'editeur ssl-box-9/fac-edit.php */
body { background: #f1f5f9; }
.fe-a4-bg {
    background: #e2e8f0;
    border-radius: 10px;
    padding: 28px 20px 40px;
}
.fe-a4 {
    background: #ffffff;
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 48px 48px;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .13);
    border: none;
    border-radius: 3px;
}

/* Blocs adresse */
.fg-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fg-addr-grid.single { grid-template-columns: 1fr; }
.fg-addr-grid input,
.fg-addr-grid select { width: 100%; box-sizing: border-box; }

/* Badges */
.fg-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 99px;
    background: #e0f2fe;
    color: #0369a1;
    margin-left: 6px;
    vertical-align: middle;
}
.fg-badge.qr { background: #dcfce7; color: #166534; }

/* Modal overlay */
.fg-modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
.fg-modal-bg.open { display: flex; }
.fg-modal {
    background: #fff;
    border-radius: 14px;
    padding: 32px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.fg-modal h3 { margin: 0 0 20px; font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.fg-modal label { display: block; font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
.fg-modal input, .fg-modal textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid #e2e8f0; border-radius: 7px;
    padding: 8px 12px; font-size: .9rem; font-family: inherit;
    margin-bottom: 14px; color: #1e293b;
}
.fg-modal textarea { resize: vertical; min-height: 80px; }
.fg-modal input:focus, .fg-modal textarea:focus {
    outline: none; border-color: #3b82f6; background: #f8fafc;
}
.fg-modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.fg-modal-actions .fe-btn { flex: 1; justify-content: center; padding: 9px; }

/* Notification toast */
.fg-toast {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
    background: #1e293b; color: #fff; padding: 12px 22px;
    border-radius: 8px; font-size: .88rem; font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    z-index: 9999; display: none; white-space: nowrap;
}
.fg-toast.ok  { background: #15803d; }
.fg-toast.err { background: #b91c1c; }
.fg-toast.show { display: block; }

/* Descriptif repliable par ligne */
.fg-desc-row { display: none; }
.fg-desc-row.visible { display: table-row; }
.fg-desc-row td { padding: 0 4px 6px; }
.fg-desc-row textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    min-height: 38px; font-family: inherit;
    font-size: .78rem; color: #475569; line-height: 1.45;
}
.fg-expand-btn {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: .7rem; padding: 0 3px;
}
.fg-expand-btn:hover { color: #003399; }

/* Champ requis non rempli */
.fg-invalid {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

/* Section labels */
.fg-section-title {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #94a3b8; margin: 0 0 6px;
}

/* Doc header layout */
.fg-doc-header {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e2e8f0;
    align-items: flex-start;
}
.fg-doc-left  { flex: 1; }
.fg-doc-right { width: 42%; flex-shrink: 0; }

/* Type de document (grand) */
select.fg-doc-type {
    font-size: 1.25rem; font-weight: 700; color: #0f172a;
    border: none; background: transparent; font-family: inherit;
    cursor: pointer; padding: 0; margin-bottom: 10px; display: block;
    -webkit-appearance: none; appearance: none; width: 100%;
}
select.fg-doc-type:focus { outline: 2px solid #3b82f6; border-radius: 3px; }

/* Meta doc (N°, Date, Échéance) */
.fg-meta-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    align-items: center;
    font-size: .84rem;
}
.fg-meta-label { color: #64748b; white-space: nowrap; font-size: .8rem; }
.fg-meta-input {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 5px;
    padding: 3px 8px; font-size: .82rem; font-family: inherit;
    color: #1e293b; width: 100%; box-sizing: border-box;
}
.fg-meta-input:focus { outline: none; border-color: #3b82f6; background: #fff; }

/* Bloc destinataire */
.fg-dest-block {
    background: #f8fafc; border-left: 3px solid #cbd5e1; border-radius: 0 6px 6px 0;
    padding: 14px 16px; margin-top: 12px;
}
.fg-dest-block input { margin-bottom: 5px; }
.fg-dest-block input:last-child { margin-bottom: 0; }

/* Objet */
.fg-objet { margin-bottom: 20px; }
.fg-entete {
    width: 100%; box-sizing: border-box; resize: vertical;
    min-height: 46px; font-family: inherit; line-height: 1.5;
}

/* Footer fields (IBAN, conditions, message) */
.fg-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}
.fg-footer-grid .full { grid-column: 1 / -1; }
.fg-footer-grid label {
    display: block; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-bottom: 4px;
}
.fg-footer-grid input, .fg-footer-grid select, .fg-footer-grid textarea {
    width: 100%; box-sizing: border-box;
}
.fg-footer-grid textarea { resize: vertical; min-height: 56px; }

/* Responsive */
@media (max-width: 680px) {
    .fg-doc-header { flex-direction: column; }
    .fg-doc-right  { width: 100%; }
    .fg-footer-grid { grid-template-columns: 1fr; }
    .fg-footer-grid .full { grid-column: 1; }
    .fg-addr-grid { grid-template-columns: 1fr; }
}

/* Page toujours en clair, quel que soit le theme du navigateur */
@media (prefers-color-scheme: dark) {
    html, body, .fg-page {
        background: #f1f5f9 !important;
        color: #1e293b !important;
    }
    .fe-a4-bg { background: #e2e8f0 !important; }
    .fe-topbar { background: transparent !important; color: #1e293b !important; }
    .fe-a4 {
        background: #ffffff !important;
        color: #1e293b !important;
        border: none !important;
    }
    .fg-hero h1 { color: #0f172a !important; }
    .fg-hero p  { color: #64748b !important; }
    .fg-dest-block { background: #f8fafc !important; border-left-color: #cbd5e1 !important; }
    .fg-section-title, .fg-meta-label,
    .fg-footer-grid label { color: #94a3b8 !important; }
    select.fg-doc-type { color: #0f172a !important; background: transparent !important; }
    .fg-meta-input,
    .fe-field-inline, .fe-line-input,
    input, select, textarea {
        background: #ffffff !important;
        color: #1e293b !important;
        border-color: #e2e8f0 !important;
    }
    .fe-lines-table th { color: #94a3b8 !important; }
    .fe-lines-table td, .fe-tot-row { color: #1e293b !important; }
    .fg-modal { background: #ffffff !important; }
    .fg-modal h3 { color: #0f172a !important; }
    .fg-modal label { color: #475569 !important; }
}