/* ==========================================
   FACTURIA — Styles (extrait de index.php + extensions mobile)
   ========================================== */

/* Progress Steps */
.step-indicator {
    position: relative;
    transition: all 0.3s;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #a0aec0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: all 0.3s;
}

.step-indicator.active .step-circle {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.step-indicator.completed .step-circle {
    background: #48bb78;
    color: white;
}

.step-indicator:hover .step-circle {
    transform: scale(1.05);
}

.step-line {
    position: absolute;
    top: 20px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: #e2e8f0;
    z-index: -1;
}

.step-indicator.completed .step-line {
    background: #48bb78;
}

/* Step Content */
.step-content {
    display: none;
}

.step-content.active {
    display: block;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Item Cards */
.item-card {
    border-left: 4px solid #667eea;
}

/* Mobile — masquer step-line */
@media (max-width: 768px) {
    .step-line {
        display: none;
    }
}

/* ==========================================
   Header compact — 1er enfant du fac-builder-layout (flex: 0 0 100%)
   Pattern identique à .cv-header dans cv-builder
   ========================================== */

.facturia-header {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    height: var(--fac-header-h);
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.facturia-header-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================
   Aperçu iframe — voir .fac-preview-wrapper / #facPreviewZone
   ========================================== */

/* ==========================================
   Autosave indicator — repositionnement mobile
   ========================================== */

@media (max-width: 576px) {
    #autoSaveIndicator {
        bottom: 70px;
        right: 8px;
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ==========================================
   Boutons action — empilement mobile
   ========================================== */

@media (max-width: 576px) {
    .facturia-actions {
        flex-direction: column;
        gap: 8px;
    }
    .facturia-actions .btn-group {
        width: 100%;
    }
}

/* ==========================================
   Layout 2 colonnes
   ========================================== */

.facturia-layout { min-height: calc(100vh - 120px); }

.facturia-preview-panel {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 130px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.facturia-preview-panel .card-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}


/* Bouton xs */
.btn-xs {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
}

/* Hero section */
.facturia-hero h1 { line-height: 1.3; }

@media (max-width: 991px) {
    .facturia-preview-panel { display: none !important; }
}

/* ══════════════════════════════════════════
   PHASE 3 — Refonte SaaS
   ══════════════════════════════════════════ */

/* ══ HERO ══ */
.fac-hero{background:linear-gradient(135deg,#1164BE 0%,#0a4d96 100%);padding:56px 0 48px;text-align:center;position:relative;overflow:hidden;}
.fac-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none;}
.fac-hero::after{content:'';position:absolute;bottom:-100px;left:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none;}
.fac-hero-inner{position:relative;z-index:1;}
.fac-hero h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.15;margin-bottom:12px;}
.fac-hero h1 span{color:#ffd166;}
.fac-hero p{font-size:1rem;color:rgba(255,255,255,.75);margin-bottom:28px;max-width:520px;margin-left:auto;margin-right:auto;}
.fac-hero-sub{font-size:1rem;color:rgba(255,255,255,.78);margin-bottom:28px;white-space:nowrap;}
@media(max-width:600px){.fac-hero-sub{white-space:normal;font-size:.92rem;}}

/* ══ CHIPS STRIP (hors hero) ══ */
.fac-chips-strip{background:#fff;border-bottom:1px solid #e2e8f0;padding:12px 0;}
.fac-chips-inner{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.fac-chip{display:inline-flex;align-items:center;gap:6px;background:#f0f6ff;border:1px solid #dbeafe;border-radius:20px;padding:5px 14px;font-size:12px;color:#1164BE;font-weight:500;}
.fac-chip i{font-size:13px;}
.fac-doctype-bar{display:flex;max-width:580px;margin:0 auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.25);}
.fac-doctype-bar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 6px;text-decoration:none;border-right:1px solid #e8eaef;font-size:12px;font-weight:600;color:#3d4049;gap:6px;transition:background .15s,color .15s;}
.fac-doctype-bar a:last-child{border-right:none;}
.fac-doctype-bar a i{font-size:18px;color:#1164BE;}
.fac-doctype-bar a span{font-size:10px;font-weight:400;color:#7a7d88;}
.fac-doctype-bar a:hover,.fac-doctype-bar a.active{background:#f0f6ff;color:#1164BE;}
.fac-hero-tools{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:rgba(255,255,255,.6);}
.fac-hero-tools a{color:rgba(255,255,255,.8);text-decoration:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:5px 12px;font-size:12px;display:inline-flex;align-items:center;gap:5px;}

/* ══ MAIN + LAYOUT ══ */
:root {
  --fac-navbar-h: 72px;
  --fac-header-h: 48px;
  --fac-sticky-top: calc(var(--fac-navbar-h) + 16px);
  --fac-col-h: calc(100vh - var(--fac-navbar-h) - 32px);
}
html, body { overflow-x: hidden; }

/* Colonnes sticky avec scroll interne */
.fac-card-form {
  position: sticky;
  top: var(--fac-sticky-top);
  max-height: var(--fac-col-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fac-card-preview {
  position: sticky;
  top: var(--fac-sticky-top);
  height: var(--fac-col-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fac-col-form-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.fac-col-form-inner::-webkit-scrollbar { width: 4px; }
.fac-col-form-inner::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.fac-form-scroll { padding: 20px; }
.fac-col-preview-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #f5f5f5;
  overflow: hidden;
}
.fac-col-preview-inner::-webkit-scrollbar { width: 6px; height: 6px; }
.fac-col-preview-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }

/* ══ CARDS ACCORDION ══ */
.fac-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:10px;overflow:hidden;}
.fac-card-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
.fac-card-header-left{display:flex;align-items:center;gap:10px;}
.fac-card-icon{width:32px;height:32px;border-radius:8px;background:#eef2ff;display:flex;align-items:center;justify-content:center;}
.fac-card-icon i{font-size:15px;color:#1164BE;}
.fac-card-title{font-size:13px;font-weight:600;color:#0d1117;}
.fac-card-sub{font-size:11px;color:#7a7d88;margin-top:1px;}
.fac-chevron{font-size:14px;color:#aaa;transition:transform .2s;}
.fac-chevron.open{transform:rotate(180deg);}
.fac-card-body{padding:0 16px 16px;}
.fac-label{font-size:11px;font-weight:600;color:#7a7d88;text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:4px;}

/* ══ TOTAUX ══ */
.fac-totals{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;}
.fac-total-row{display:flex;justify-content:space-between;font-size:12px;color:#7a7d88;margin-bottom:5px;}
.fac-total-final{font-size:14px;font-weight:700;color:#0d1117;border-top:1px solid #e2e8f0;padding-top:8px;margin-top:4px;}
.fac-total-final span:last-child{color:#1164BE;}
.fac-inline-input{width:52px;border:1px solid #e2e8f0;border-radius:5px;padding:2px 6px;font-size:11px;text-align:center;color:#0d1117;background:#fff;outline:none;}
.fac-inline-input:focus{border-color:#1164BE;}

/* ══ TEMPLATES ══ */
.fac-template-card{border:2px solid #e2e8f0;border-radius:8px;padding:8px;cursor:pointer;transition:border-color .15s;text-align:center;}
.fac-template-card.active{border-color:#1164BE;}
.fac-template-card:hover{border-color:#93c5fd;}
.fac-template-preview{height:52px;border-radius:4px;overflow:hidden;display:flex;margin-bottom:6px;background:#f8fafc;}
.fac-template-name{font-size:11px;color:#3d4049;font-weight:500;}
.fac-tpl-modern .fac-tpl-sidebar{width:30%;background:#1164BE;}
.fac-tpl-modern .fac-tpl-content{flex:1;padding:6px;}
.fac-tpl-classic{flex-direction:column;}
.fac-tpl-classic .fac-tpl-header-bar{height:14px;background:#1164BE;}
.fac-tpl-classic .fac-tpl-content{flex:1;padding:6px;}
.fac-tpl-minimal{flex-direction:column;}
.fac-tpl-minimal .fac-tpl-top-bar{height:4px;background:#1164BE;}
.fac-tpl-minimal .fac-tpl-content{flex:1;padding:6px;}
.fac-tpl-niger{border:2px solid #1164BE;flex-direction:column;}
.fac-tpl-niger .fac-tpl-border-box{flex:1;padding:6px;}
.fac-tpl-line{height:4px;background:#e2e8f0;border-radius:2px;margin-bottom:4px;}
.fac-tpl-line.short{width:60%;}

/* ══ APERÇU ══ */
.fac-preview-header { flex-shrink: 0; height: 44px; padding: 0 16px; font-size: 11px; font-weight: 600; color: #a0aec0; background: #fff; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 6px; }
.fac-preview-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#4a5568;}
.fac-preview-header .d-flex{margin-left:auto;display:flex;align-items:center;gap:4px;}
.fac-live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:facPulse 2s infinite;}
@keyframes facPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.fac-ctrl-btn{width:28px;height:28px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:#718096;transition:border-color .15s,color .15s;}
.fac-ctrl-btn:hover{border-color:#1164BE;color:#1164BE;}
.fac-preview-content {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 20px;
}
.fac-preview-content::-webkit-scrollbar { width: 6px; height: 6px; }
.fac-preview-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }

#facPreviewZone {
  display: block;
  width: 794px;
  margin: 0 auto;
  position: relative;
}

.fac-invoice-content {
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
}

.fac-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: #cbd5e0;
  padding: 60px 20px;
  min-height: 297mm;
}
.fac-preview-placeholder i { font-size: 3rem; opacity: .25; }
.fac-preview-placeholder p { font-size: 13px; color: #a0aec0; line-height: 1.6; }
.fac-preview-footer { flex-shrink: 0; height: 54px; padding: 0 16px; background: #fff; border-top: 1px solid #e2e8f0; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* ══ MOBILE ══ */
@media(max-width:991px){
  .fac-card-form    { position: static; max-height: none; }
  .fac-card-preview { position: static; height: 600px; }
  .fac-col-form-inner   { overflow-y: visible; min-height: auto; }
  .fac-col-preview-inner { height: 100%; }
  .fac-doctype-bar{flex-direction:column;max-width:280px;}
  .fac-doctype-bar a{border-right:none;border-bottom:1px solid #e8eaef;flex-direction:row;gap:8px;}
  .fac-doctype-bar a:last-child{border-bottom:none;}
  .fac-hero{padding:40px 0 36px;}
}
@media(max-width:576px){
  #autoSaveIndicator{bottom:70px;right:8px;font-size:12px;padding:6px 10px;}
}

/* ══ SECTION SEO ══ */
.fac-seo-section{background:#f8fafc;border-top:1px solid #e2e8f0;padding:56px 0;}
.fac-seo-intro{max-width:640px;margin:0 auto 40px;text-align:center;}
.fac-seo-intro h2{font-size:1.4rem;font-weight:700;color:#0d1117;margin-bottom:12px;}
.fac-seo-intro p{font-size:.92rem;color:#7a7d88;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fac-seo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:48px;}
.fac-seo-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;}
.fac-seo-card-icon{width:36px;height:36px;background:#eef2ff;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.fac-seo-card-icon i{font-size:16px;color:#1164BE;}
.fac-seo-card-title{font-size:13px;font-weight:700;color:#0d1117;margin-bottom:6px;}
.fac-seo-card p{font-size:12px;color:#7a7d88;line-height:1.6;margin:0;}

/* ══ FAQ ══ */
.fac-faq{margin:0 auto 40px;}
.fac-faq h3{font-size:1rem;font-weight:700;color:#0d1117;margin-bottom:16px;}
.fac-faq-item{border:1px solid #e2e8f0;border-radius:8px;margin-bottom:8px;background:#fff;overflow:hidden;}
.fac-faq-q{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;font-size:13px;font-weight:600;color:#0d1117;}
.fac-faq-q i{font-size:14px;color:#aaa;transition:transform .2s;}
.fac-faq-q.open i{transform:rotate(180deg);}
.fac-faq-a{display:none;padding:0 16px 14px;font-size:12px;color:#7a7d88;line-height:1.7;}

/* ══ MAILLAGE INTERNE ══ */
.fac-seo-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center;}
.fac-seo-links-label{font-size:12px;color:#aaa;font-weight:500;}
.fac-seo-links a{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:6px 14px;font-size:12px;color:#3d4049;text-decoration:none;font-weight:500;transition:border-color .15s,color .15s;}
.fac-seo-links a:hover{border-color:#1164BE;color:#1164BE;}
.fac-seo-links a i{font-size:13px;}

/* ══ INPUTS GLOBAUX ══ */
.fac-form-scroll .form-control,
.fac-form-scroll .form-select,
.fac-form-scroll .form-control-sm,
.fac-form-scroll .form-select-sm{border:1px solid #e2e8f0;border-radius:8px;background:#fff;font-size:13px;color:#0d1117;padding:8px 12px;height:auto;transition:border-color .15s,box-shadow .15s;}
.fac-form-scroll .form-control:focus,
.fac-form-scroll .form-select:focus{border-color:#1164BE;box-shadow:0 0 0 3px rgba(17,100,190,.1);outline:none;}
.fac-form-scroll .form-control::placeholder{color:#b0b7c3;font-size:12px;}
.fac-form-scroll .input-group-text{border:1px solid #e2e8f0;border-radius:8px 0 0 8px;background:#f8fafc;font-size:12px;color:#7a7d88;padding:8px 12px;}
.fac-form-scroll .input-group .form-control{border-radius:0 8px 8px 0;}
.fac-form-scroll .form-control-color{height:40px;padding:4px 6px;border-radius:8px;cursor:pointer;}
.fac-form-scroll textarea.form-control{resize:vertical;min-height:72px;}

/* ══ SECTION ARTICLES ══ */
.fac-items-header{display:grid;grid-template-columns:1fr 60px 80px 80px 32px;gap:8px;padding:0 0 6px;border-bottom:1px solid #e2e8f0;margin-bottom:8px;}
.fac-items-header span{font-size:10px;font-weight:600;color:#b0b7c3;text-transform:uppercase;letter-spacing:.4px;}
.fac-item-row{display:grid;grid-template-columns:1fr 60px 80px 80px 32px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9;}
.fac-item-row:last-child{border-bottom:none;}
.fac-item-row input{width:100%;border:1px solid #e2e8f0;border-radius:6px;padding:6px 8px;font-size:12px;color:#0d1117;background:#fff;outline:none;transition:border-color .15s;}
.fac-item-row input:focus{border-color:#1164BE;box-shadow:0 0 0 2px rgba(17,100,190,.08);}
.fac-item-row input::placeholder{color:#b0b7c3;font-size:11px;}
.fac-item-total{font-size:12px;font-weight:600;color:#1164BE;text-align:right;white-space:nowrap;}
.fac-item-del{width:28px;height:28px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b0b7c3;transition:border-color .15s,color .15s;flex-shrink:0;}
.fac-item-del:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2;}
.fac-item-del i{font-size:13px;}
.fac-add-item-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border:1.5px dashed #dbeafe;border-radius:8px;background:transparent;font-size:12px;font-weight:600;color:#1164BE;cursor:pointer;margin-top:8px;transition:background .15s,border-color .15s;}
.fac-add-item-btn:hover{background:#f0f6ff;border-color:#1164BE;}
.fac-add-item-btn i{font-size:14px;}