:root{
    --brand: #0f5f6b;          /* teal du bouton principal */
    --brand-700:#08434c;
    --ink: #0F172A;            /* titre foncé */
    --card-r: 1rem;
}
body{ background:#f5f7fb; }
.app-shell{
    max-width: 1100px;
    margin: 1.5rem auto;
    background:#fff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(16,24,40,.08);
    overflow: hidden;
}
.app-header{
    padding:.85rem 1rem;
    border-bottom:1px solid #eef2f7;
    background:#fff;
}
.brand-dot{
    width:22px;height:22px;border-radius:.5rem;background:#0f5f6b;
    display:inline-block;margin-right:.6rem;
}
.hero{
    padding:2.25rem 1.25rem 0 1.25rem;
    text-align:center;
    color:var(--ink);
}
.hero h1{ font-weight:800; letter-spacing:.2px; }
.tile{
    border:1px solid #e7ecf2;
    border-radius: var(--card-r);
    padding: 1.15rem 1.1rem;
    background:#fff;
    transition:.2s ease;
    height:100%;
}
.tile:hover{ transform: translateY(-2px); box-shadow:0 8px 20px rgba(16,24,40,.08); }
.tile-primary{
    background: var(--brand);
    color:#fff;
    border-color: transparent;
}
.tile-primary:hover{ background: var(--brand-700); }
.stat{
    border:1px solid #e7ecf2;
    border-radius: var(--card-r);
    padding: 1rem 1rem;
    background:#fff;
    height:100%;
}
.footer{
    padding:.85rem 1rem;
    font-size:.925rem;
    color:#6b7280;
    border-top:1px solid #eef2f7;
    display:flex;justify-content:space-between;align-items:center;
}
.avatar{
    width:34px;height:34px;border-radius:50%;
    display:inline-block;border:2px solid #fff; box-shadow:0 0 0 1px #e7ecf2;
}

.card-soft{
    background:#fff;border:0;border-radius:1rem;
    box-shadow:0 10px 30px rgba(16,24,40,.08);
}
.form-control, .form-select{
    border-color:#dfe6ee; border-radius:.6rem;
    box-shadow: none;
}
.form-control:focus, .form-select:focus{
    border-color:#9bb6ff; box-shadow:0 0 0 .25rem rgba(13,110,253,.15);
}
.btn-brand{
    background:linear-gradient(180deg,#3d6bff,#2e56e8);
    border:0;border-radius:.7rem; padding:.8rem 1.25rem; font-weight:600;
}
.google-badge{
    background:#f3f5f8;border-radius:.8rem;padding:1rem 1.1rem;
    border:1px solid #e7ecf2;
}
.hint{ color:#6b7280; font-size:.925rem; }

/* Onglets style "souligné" */
.tabs-underline.nav-tabs{
    border-bottom:1px solid #edf1f6;
    gap:1rem;
}
.tabs-underline .nav-link{
    border:0; border-bottom:3px solid transparent;
    color:#111827; padding:1rem .5rem; font-weight:500;
}
.tabs-underline .nav-link:hover{ border-color:#e5e9f2; }
.tabs-underline .nav-link.active{
    color:#1f2937; border-color:#5562ea;
    background:transparent;
}
/* Upload zone */
.dropzone{
    border:2px dashed #d9e1ec;border-radius:.8rem;background:#fafbfd;
    display:flex;align-items:center;justify-content:center;text-align:center;
    color:#6b7280;height:150px;cursor:pointer;transition:.2s;
}
.dropzone:hover{ background:#f6f8fd; }
.dropzone img{ max-height:100%; max-width:100%; object-fit:contain; }

/* Style chips */
.style-chip{
    border:1px solid #dfe6ee;border-radius:.8rem;background:#fff;
    padding:.9rem 1.1rem;font-weight:600;cursor:pointer;transition:.15s;
}
.style-chip:hover{ transform:translateY(-1px); }
.style-chip.active{
    border-color:var(--accent); box-shadow:0 0 0 .15rem rgba(64,96,255,.12);
    color:#0f172a;
}

/* Preview mini-devis */
.preview{
    border:1px solid #e7ecf2;border-radius:.9rem;background:#fff;
    padding:1rem; color:#0f172a;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}
.preview .bar{ height:6px; width:65px; background:#e8edf7; border-radius:3px; }
.preview .line{ height:6px; background:#e8edf7; border-radius:3px; }
.preview .accent{ background:var(--accent); }
.btn-brand{
    background:linear-gradient(180deg,#3d6bff,#2e56e8);
    border:0;border-radius:.7rem;font-weight:600;padding:.9rem 1.25rem;
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}
.loader::before , .loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FF3D00;
    animation: prixClipFix 2s linear infinite ;
}
.loader::after{
    inset: 8px;
    transform: rotate3d(90, 90, 0, 180deg );
    border-color: #FF3D00;
}

@keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
}

.mini{ border:1px solid #e7ecf2; border-radius:.7rem; padding:1rem; }
.bar{ height:6px; background:#e8edf7; border-radius:4px; }
.dot{ width:8px;height:8px;border-radius:50%; background:#98a2b3; display:inline-block; margin-right:.5rem; }
.accent{ background:var(--accent)!important; }


.control-pill{
    display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; border:1px solid #e6ecf4; border-radius:.7rem; background:#fff;
}
.swatch{
    width:18px;height:18px;border-radius:50%; background:var(--accent);
    border:1px solid #d9e1ec;
}

.btn-ghost{
    background:#fff; border:1px solid #dfe6ee; border-radius:.8rem; font-weight:600;
}


.lead-muted{ color:#6b7280; }

/* lignes */
.line{
    border:1px solid #e6ecf4; border-radius:.8rem; padding:1rem 1rem;
    display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
    background:#fff; transition:.15s;
}
.line + .line{ margin-top:.75rem; }
.line .title{ font-weight:700; }
.line .desc{ color:#6b7280; margin-top:.25rem; }
.price{ white-space:nowrap; font-weight:600; align-items: flex-end; }
.line.upsell{ background:#f9fbff; border-color:#dfe7ff; }
.line.upsell.checked{ background:#eef3ff; border-color:#cdd8ff; }

.add-link{ color:var(--accent); font-weight:600; text-decoration:none; }
.add-link:hover{ text-decoration:underline; }

.totals{ font-weight:700; }
.divider{ border-top:1px solid #edf1f6; }

.li-row{ display:flex; justify-content:space-between; gap:1rem; }
.li-row + .li-row{ margin-top:.35rem; }
.total-card{
    border-top:1px solid #edf1f6; padding-top:.75rem;
}
.stars i{ color:#f59e0b; }
.divider {
    text-align: center;
    color: #94a3b8;
    margin: 1.5rem 0;
    position: relative;
}

.divider::before,
.divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #e2e8f0;
}

.divider::before { left: 0; }
.divider::after { right: 0; }
.logo {
    font-weight: 700;
    font-size: 1.4rem;
    color: #475569;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}
.login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.panel{
    background:#fff;border:1px solid #e5e7eb;border-radius:16px;
    box-shadow:0 12px 32px rgba(0,0,0,.05);
}
.panel-left{ padding:28px; }
.panel-right{ padding:28px; border-left:1px solid #edf0f5; }
.form-label{ font-weight:600; }
.btn-primary{ background:var(--brand); border-color:var(--brand); font-weight:600; }
.btn-primary:hover{ background:#1e4fd6; border-color:#1e4fd6; }
.feature i{
    font-size: 22px; color: var(--brand);
    width: 36px;height:36px;border-radius:10px;background:#e8f0ff;
    display:inline-flex;align-items:center;justify-content:center;margin-right:.5rem;
}

.topbar{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.logo-dot{
    display:grid;place-items:center;font-weight:800;
}