/* ── Otodok — design tokens (préfixe ot-*) — alignés sur le brand kit Claude Design ─ */
:root {
    --ot-primary: #5347E8;       /* indigo de la marque */
    --ot-primary-dark: #4339D6;
    --ot-primary-2: #7C7FF5;     /* fin du dégradé brand */
    --ot-gradient: linear-gradient(135deg, #5347E8, #7C7FF5);
    --ot-primary-soft: #EEF0FF;  /* fond violet doux (icônes, chips) */
    --ot-accent: #10B981;        /* émeraude */
    --ot-accent-soft: #E7F8F1;
    --ot-ink: #14132B;           /* titres / texte sombre */
    --ot-muted: #6B7280;         /* texte secondaire */
    --ot-subtle: #9CA3AF;        /* placeholders */
    --ot-bg: #F5F6FA;            /* fond gris-bleu clair */
    --ot-surface: #FFFFFF;
    --ot-border: #E5E7EB;
    --ot-radius: 16px;           /* cartes */
    --ot-radius-lg: 24px;        /* grandes cartes / CTA */
    --ot-radius-sm: 12px;        /* inputs / boutons */
    --ot-shadow: 0 12px 34px rgba(20, 19, 43, .08);
    --ot-shadow-primary: 0 12px 26px rgba(83, 71, 232, .32);

    /* Surcharge des variables Bootstrap */
    --bs-primary: var(--ot-primary);
    --bs-primary-rgb: 83, 71, 232;
    --bs-body-color: var(--ot-ink);
    --bs-border-radius: var(--ot-radius-sm);
    --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.ot-body {
    background: var(--ot-bg);
    color: var(--ot-ink);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .fw-bold { letter-spacing: -.015em; }

a { color: var(--ot-primary); }
a:hover { color: var(--ot-primary-dark); }

/* Indispensable pour que .text-truncate fonctionne dans un conteneur flex (non fourni par Bootstrap). */
.min-w-0 { min-width: 0; }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.btn { font-weight: 700; border-radius: var(--ot-radius-sm); }
.btn-primary {
    --bs-btn-bg: var(--ot-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--ot-primary-dark);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--ot-primary-dark);
    --bs-btn-focus-shadow-rgb: 83, 71, 232;
    background-image: var(--ot-gradient);
    border: 0;
    box-shadow: var(--ot-shadow-primary);
}
.btn-primary:hover { background-image: var(--ot-gradient); filter: brightness(1.03); }
.btn-primary:active { background-image: var(--ot-gradient); filter: brightness(.97); }
.btn-outline-primary {
    --bs-btn-color: var(--ot-primary);
    --bs-btn-border-color: var(--ot-primary);
    --bs-btn-hover-bg: var(--ot-primary);
    --bs-btn-hover-border-color: var(--ot-primary);
}
.btn-lg { padding: .8rem 1.6rem; font-weight: 700; }
.btn-outline-secondary {
    --bs-btn-color: var(--ot-ink);
    --bs-btn-border-color: var(--ot-border);
    --bs-btn-hover-bg: var(--ot-bg);
    --bs-btn-hover-border-color: var(--ot-subtle);
    --bs-btn-hover-color: var(--ot-ink);
}
.text-primary { color: var(--ot-primary) !important; }
.bg-primary { background-color: var(--ot-primary) !important; }
.ot-gradient { background-image: var(--ot-gradient) !important; color: #fff; }

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--ot-radius-sm);
    border-color: var(--ot-border);
    background: #FAFBFC;
    padding: .7rem .9rem;
    color: var(--ot-ink);
}
.form-control::placeholder { color: var(--ot-subtle); }
.form-control:focus, .form-select:focus {
    border-color: var(--ot-primary);
    box-shadow: 0 0 0 .2rem rgba(83, 71, 232, .15);
    background: #fff;
}
.form-label { font-weight: 600; color: var(--ot-ink); margin-bottom: .4rem; }
.form-check-input:checked { background-color: var(--ot-primary); border-color: var(--ot-primary); }

/* ── Zone de dépôt (ajout de document) ────────────────────────────────────── */
.ot-dropzone {
    display: flex; align-items: center; gap: 1.1rem; width: 100%;
    border: 2px dashed var(--ot-border); border-radius: var(--ot-radius);
    background: linear-gradient(135deg, #F7F6FF, #FFFFFF);
    padding: 1.35rem 1.6rem; cursor: pointer; margin: 0;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.ot-dropzone:hover { border-color: var(--ot-primary); }
.ot-dropzone.dragover { border-color: var(--ot-primary); background: var(--ot-primary-soft); transform: scale(1.005); }
.ot-dropzone-ico {
    width: 54px; height: 54px; flex-shrink: 0; border-radius: 15px; display: grid; place-items: center;
    background-image: var(--ot-gradient); color: #fff; font-size: 1.55rem; box-shadow: var(--ot-shadow-primary);
}
.ot-dropzone-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ot-dropzone-text .ot-dropzone-title { color: var(--ot-ink); font-weight: 700; font-size: 1.05rem; }
.ot-dropzone-text small { color: var(--ot-muted); }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.ot-navbar {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--ot-border);
}
.ot-navbar .navbar-brand { font-weight: 800; letter-spacing: -.02em; color: var(--ot-ink); }
.ot-brand-logo { height: 30px; width: auto; display: block; }
.ot-nav-link, .ot-navbar .nav-link { color: var(--ot-muted); font-weight: 600; }
.ot-navbar .nav-link:hover, .ot-navbar .nav-link.active { color: var(--ot-ink); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ot-hero {
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(79, 70, 229, .12), transparent 60%),
        radial-gradient(900px 400px at 0% 0%, rgba(16, 185, 129, .10), transparent 55%);
    padding: 5.5rem 0 4rem;
}
.ot-hero h1 {
    font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.ot-hero .ot-lead { color: var(--ot-muted); font-size: 1.2rem; max-width: 36rem; }

.ot-badge-soft {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--ot-primary-soft); color: var(--ot-primary);
    border-radius: 999px; padding: .35rem .85rem; font-weight: 700; font-size: .85rem;
}

/* Carte de démo dans le hero */
.ot-scan-card {
    background: var(--ot-surface); border: 1px solid var(--ot-border);
    border-radius: var(--ot-radius-lg); box-shadow: var(--ot-shadow); padding: 1.25rem;
}
.ot-scan-row {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem .85rem; border-radius: 10px; background: var(--ot-bg); margin-bottom: .6rem;
}
.ot-scan-row .ot-ico {
    width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
    color: #fff; flex: 0 0 auto;
}

/* ── Cartes feature ───────────────────────────────────────────────────────── */
.ot-card {
    background: var(--ot-surface); border: 1px solid var(--ot-border);
    border-radius: var(--ot-radius); padding: 1.6rem; height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ot-card:hover { transform: translateY(-3px); box-shadow: var(--ot-shadow); }
.ot-card .ot-feature-ico {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.4rem; color: #fff; margin-bottom: 1rem;
}
/* Icône carrée arrondie de la marque (par défaut : dégradé brand) */
.ot-feature-ico { background-image: var(--ot-gradient); }

.ot-section { padding: 4.5rem 0; }
.ot-eyebrow { color: var(--ot-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }

/* ── Connecteurs (vitrine landing) ────────────────────────────────────────── */
.ot-connector {
    padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; gap: .65rem; text-align: center;
}
.ot-connector-logo { height: 48px; display: grid; place-items: center; }
.ot-connector-logo img { height: 40px; width: auto; max-width: 100%; }
.ot-connector-logo i { font-size: 2.2rem; color: var(--ot-primary); }
.ot-connector .ot-connector-name { font-weight: 700; color: var(--ot-ink); }
.ot-badge-available { background: var(--ot-accent-soft); color: #059669; font-weight: 700; }
.ot-badge-soon { background: #F3F4F6; color: var(--ot-muted); font-weight: 700; }

/* ── Pills types de documents ─────────────────────────────────────────────── */
.ot-type-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid var(--ot-border); background: var(--ot-surface);
    border-radius: 999px; padding: .5rem 1rem; font-weight: 600; color: var(--ot-ink);
    transition: border-color .12s ease, background .12s ease;
}
.ot-type-pill:hover { border-color: var(--ot-primary); }
.ot-type-pill.active { background: var(--ot-primary-soft); border-color: var(--ot-primary); color: var(--ot-primary); }
/* Pill « type personnalisé » (landing) : dégradé brand pour signaler vos propres types. */
.ot-type-pill-custom { background-image: var(--ot-gradient); border-color: transparent; color: #fff; }
.ot-type-pill-custom:hover { border-color: transparent; filter: brightness(1.04); }
.ot-type-pill-custom i { color: #fff !important; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.ot-cta {
    background-image: var(--ot-gradient);
    border-radius: var(--ot-radius-lg); color: #fff; padding: 3rem;
    box-shadow: var(--ot-shadow-primary);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ot-footer { background: var(--ot-ink); color: #CBD5E1; padding: 2.5rem 0; }
.ot-footer a { color: #CBD5E1; text-decoration: none; }
.ot-footer a:hover { color: #fff; }

/* ── Cartes auth (login/register) ─────────────────────────────────────────── */
.ot-auth-wrap { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 2rem 1rem; }
.ot-auth-card {
    width: 100%; max-width: 460px; background: var(--ot-surface);
    border: 1px solid var(--ot-border); border-radius: var(--ot-radius-lg);
    box-shadow: var(--ot-shadow); padding: 2.5rem;
}
/* Icône de marque en tête des cartes auth (login/register) — le SVG porte déjà son dégradé */
.ot-auth-logo {
    width: 64px; height: 64px; border-radius: 18px; display: block;
    margin: 0 auto 1.25rem; box-shadow: var(--ot-shadow-primary);
}

/* ── Page connecteurs / rangement ─────────────────────────────────────────── */
/* Onglets segmentés (pilule à dégradé actif) */
.ot-tabs {
    display: inline-flex; gap: .3rem; border: 1px solid var(--ot-border);
    background: var(--ot-surface); border-radius: 999px; padding: .3rem; box-shadow: var(--ot-shadow);
}
.ot-tabs .nav-item { display: flex; }
.ot-tabs .nav-link {
    border: 0; border-radius: 999px; color: var(--ot-muted); font-weight: 700; padding: .5rem 1.15rem;
}
.ot-tabs .nav-link:hover { color: var(--ot-ink); }
.ot-tabs .nav-link.active { color: #fff; background-image: var(--ot-gradient); box-shadow: var(--ot-shadow-primary); }

/* En-tête de carte avec pastille d'icône */
.ot-card-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.1rem; }
.ot-head-ico {
    width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
    background: var(--ot-primary-soft); color: var(--ot-primary); font-size: 1.2rem;
}

/* Lignes de liste (règles / types) : aplat gris-bleu + contraste au survol */
.ot-list-row {
    display: flex; align-items: center; gap: .75rem; min-width: 0;
    padding: .65rem .8rem; border: 1px solid var(--ot-border); border-radius: var(--ot-radius-sm);
    background: var(--ot-bg); transition: border-color .12s ease, background .12s ease;
}
.ot-list-row:hover { border-color: var(--ot-primary); background: var(--ot-primary-soft); }
/* min-width:0 permet aux enfants flex (texte/template) de tronquer au lieu de déborder. */
.ot-list-row code { min-width: 0; }
.ot-type-pill code, .ot-list-row code { color: var(--ot-primary); background: transparent; padding: 0; }

/* État vide doux */
.ot-empty {
    background: var(--ot-bg); border: 1px dashed var(--ot-border); border-radius: var(--ot-radius-sm);
    padding: 1rem 1.1rem; color: var(--ot-muted); font-size: .9rem;
}

/* Aperçu de chemin : aplat sombre, fort contraste */
.ot-preview {
    display: block; margin-top: .35rem; padding: .6rem .85rem; border-radius: var(--ot-radius-sm);
    background: var(--ot-ink); color: #fff; font-size: .82rem; word-break: break-all;
}
.ot-preview:empty::before { content: '—'; color: var(--ot-subtle); }

/* Modales — charte Otodok (coins arrondis, en-tête en aplat, contraste) */
.modal-content { border: 0; border-radius: var(--ot-radius-lg); box-shadow: var(--ot-shadow); overflow: hidden; }
.modal-header { background: var(--ot-primary-soft); border-bottom: 0; padding: 1.15rem 1.5rem; }
.modal-header .modal-title { color: var(--ot-primary); font-weight: 800; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--ot-border); padding: 1.1rem 1.5rem; }

/* Aperçu de document (page détail) */
.ot-doc-preview { width: 100%; height: 72vh; border: 1px solid var(--ot-border); border-radius: var(--ot-radius-sm); background: var(--ot-bg); }
.ot-doc-preview-img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; object-fit: contain; margin: 0 auto; border: 1px solid var(--ot-border); border-radius: var(--ot-radius-sm); }

/* Chevron des sections repliables (OCR…) */
.ot-collapse-toggle .bi-chevron-right { transition: transform .15s ease; }
.ot-collapse-toggle[aria-expanded="true"] .bi-chevron-right { transform: rotate(90deg); }