/* ══════════════════════════════════════════════════════════════════════════
   devis.css — Tunnel devis RCP/PJP (Lot 1 UI)
   Port fidèle de raw/devis.css + classes empruntées de dashboard.css et login.css.
   Chargé globalement depuis App.razor — pas de scoped component CSS.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Bascule responsive mobile/desktop (CSS pur, sans JS) ──────────────────
   Le choix mobile vs desktop se fait en CSS et non via MudHidden : MudHidden
   dépend de la détection JS du breakpoint (IBrowserViewportService) et ne rend
   donc RIEN pendant le prerendering serveur → page blanche tant que le circuit
   n'a pas résolu le viewport. En CSS, les deux tunnels sont rendus côté serveur
   et l'un est masqué — contenu visible immédiatement. md = 960px (MudBlazor). */
.dv-show-mobile {
    display: block;
}
.dv-show-desktop {
    display: none;
}
@media (min-width: 960px) {
    .dv-show-mobile {
        display: none;
    }
    .dv-show-desktop {
        display: block;
    }
}

/* ── Structure de base ─────────────────────────────────────────────────── */
.dv-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--da-bg);
    font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
    color: var(--da-ink);
}

.dv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--da-white);
    border-bottom: 1px solid var(--da-line);
    gap: 8px;
}

.dv-head .dv-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--da-ink);
    border-radius: 8px;
    flex-shrink: 0;
}

.dv-head .dv-back:hover {
    background: var(--da-red-soft);
}

.dv-head .dv-step-indicator {
    font-size: 14.5px;
    color: var(--da-muted);
    white-space: nowrap;
}

/* ── Barre de progression ─────────────────────────────────────────────── */
.dv-prog {
    display: flex;
    gap: 3px;
    padding: 0 16px 0;
    background: var(--da-white);
    padding-bottom: 10px;
}

.dv-prog .p {
    flex: 1;
    height: 4px;
    background: var(--da-line);
    border-radius: 2px;
}

.dv-prog .p.done {
    background: var(--da-red);
}

/* ── Contenu et questions ─────────────────────────────────────────────── */
.dv-content {
    flex: 1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dv-q {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--da-ink);
    margin-bottom: 4px;
}

.dv-sub {
    font-size: 0.875rem;
    color: var(--da-muted);
    margin-top: -12px;
    margin-bottom: 8px;
}

/* ── CTA (bouton d'action principal) ─────────────────────────────────── */
.dv-cta {
    padding: 16px;
    margin-top: auto;
}

.dv-cta .note {
    font-size: 13.5px;
    color: var(--da-muted);
    text-align: center;
    margin-bottom: 10px;
}

/* ── Champs de formulaire (FIn / FTxa / FSel) ──────────────────────────
   Empruntés depuis login.css et unifiés ici.
   ─────────────────────────────────────────────────────────────────────── */
.fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fld label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--da-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fld .input {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--da-line);
    border-radius: 10px;
    font-size: 0.9375rem;
    color: var(--da-ink);
    background: var(--da-white);
    position: relative;
    gap: 6px;
    font-family: inherit;
    outline: none;
}

.fld input.input {
    appearance: none;
}

.fld textarea.txa {
    width: 100%;
    outline: none;
}

.fld input.input::placeholder,
.fld textarea.txa::placeholder {
    color: var(--da-gray);
}

.fld .input.has-error,
.fld .dv-yn.has-error .yn {
    border-color: var(--da-red);
    background: var(--da-red-soft);
}

.fld .input:disabled,
.fld .input.is-disabled {
    border-color: var(--da-line);
    background: color-mix(in srgb, var(--da-white) 70%, var(--da-line));
    color: var(--da-gray);
    cursor: not-allowed;
    opacity: 0.72;
}

.field-error {
    font-size: 13px;
    color: var(--da-red);
    line-height: 1.45;
    font-weight: 500;
}

.dv-native-select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--da-muted) 50%),
        linear-gradient(135deg, var(--da-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 13px) 19px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.fld .input.focused {
    border-color: var(--da-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--da-red) 12%, transparent);
}

.fld .input .caret {
    display: inline-block;
    width: 2px;
    height: 18px;
    background: var(--da-red);
    border-radius: 1px;
    animation: blink 1s step-end infinite;
    flex-shrink: 0;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.fld .input .chev {
    margin-left: auto;
    font-size: 13.5px;
    color: var(--da-muted);
    flex-shrink: 0;
}

.fld .txa {
    min-height: 88px;
    padding: 10px 14px;
    border: 1.5px solid var(--da-line);
    border-radius: 10px;
    font-size: 0.9375rem;
    color: var(--da-muted);
    background: var(--da-white);
    font-family: inherit;
    resize: none;
    line-height: 1.5;
}

.help-line {
    font-size: 13px;
    color: var(--da-gray);
    line-height: 1.45;
}

/* ── Segmented (civilité Mme/M.) ──────────────────────────────────────── */
.seg {
    display: flex;
    gap: 6px;
}

.seg .opt {
    flex: 1;
    padding: 10px 16px;
    border: 1.5px solid var(--da-line);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--da-muted);
    background: var(--da-white);
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    font-family: inherit;
}

.seg .opt.on {
    border-color: var(--da-red);
    color: var(--da-red);
    background: var(--da-red-soft);
    font-weight: 600;
}

/* ── Liste de questions avec séparateurs (Territorialité, Antécédents…) ─
   Regroupe plusieurs DvYesNo empilés (mobile et desktop) en ajoutant une
   fine ligne de séparation entre chaque question, sans en mettre avant la
   première ni après la dernière. Cible directement la racine .fld rendue
   par DvYesNo (pas besoin d'un item dédié). Classe générique réutilisable
   partout où des DvYesNo empilés gagnent en lisibilité avec un séparateur.
   ─────────────────────────────────────────────────────────────────────── */
.dv-sep-list {
    display: flex;
    flex-direction: column;
}

.dv-sep-list > .fld:not(:first-child) {
    border-top: 1px solid var(--da-line);
    margin-top: 12px;
    padding-top: 12px;
}

/* ── Oui / Non (FYn) ─────────────────────────────────────────────────── */
.dv-yn {
    display: flex;
    gap: 8px;
}

.dv-yn .yn {
    flex: 1;
    min-height: 44px;
    padding: 10px 16px;
    border: 1.5px solid var(--da-line);
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--da-muted);
    font-weight: 500;
    cursor: pointer;
    background: var(--da-white);
    font-family: inherit;
}

.dv-yn .yn.on {
    border-color: var(--da-red);
    color: var(--da-red);
    background: var(--da-red-soft);
    font-weight: 600;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--da-red) 15%, transparent);
}

/* ── Toggles PJ (.dv-opt) ─────────────────────────────────────────────── */
.dv-opt {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 12px 0;
    border-bottom: 1px solid var(--da-line);
    border-top: none;
    border-left: none;
    border-right: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.dv-opt:last-child {
    border-bottom: none;
}

.dv-opt .dv-opt-copy {
    min-width: 0;
}

.dv-opt .o-t {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--da-ink);
    line-height: 1.25;
}

.dv-opt .o-s {
    font-size: 0.8125rem;
    color: var(--da-muted);
    line-height: 1.35;
    margin-top: 2px;
}

.dv-opt .o-price {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--da-muted);
    white-space: nowrap;
    align-self: center;
}

.toggle {
    position: relative;
    width: 44px;
    height: 26px;
    margin-top: 1px;
    border-radius: 13px;
    background: var(--da-line);
    flex-shrink: 0;
    transition: background 0.2s;
}

.toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--da-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: left 0.2s;
}

.toggle.on {
    background: var(--da-red);
}

.toggle.on::after {
    left: 21px;
}

/* ── Note d'information / panneau d'avertissement ──────────────────────── */
.dv-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--da-warn-bg);
    border: 1px solid var(--da-warn-line);
    border-left: 4px solid var(--da-warn);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.8125rem;
    color: var(--da-ink);
    line-height: 1.5;
}

.dv-note__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv-note__icon {
    display: inline-flex;
    color: var(--da-warn);
}

.dv-note__icon svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.dv-note__title {
    font-weight: 700;
    color: var(--da-warn-deep);
    font-size: 0.8125rem;
}

.dv-note__body {
    color: inherit;
}

.dv-note.danger {
    background: var(--da-red-soft);
    border-left-color: var(--da-red);
    border-color: color-mix(in srgb, var(--da-red) 30%, transparent);
}

.dv-note.danger .dv-note__icon,
.dv-note.danger .dv-note__title {
    color: var(--da-red);
}

.dv-note.soft {
    display: block;
    background: color-mix(in srgb, var(--da-bg) 80%, var(--da-line) 20%);
    border: none;
    border-left: 3px solid var(--da-gray);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
}

.dv-note.soft::before {
    content: '! ';
    font-weight: 700;
    color: var(--da-gray);
}

/* Keep the "! " marker inline with the body text (the body is a block by default). */
.dv-note.soft .dv-note__body {
    display: inline;
}

/* ── Récapitulatif ──────────────────────────────────────────────────────── */
.rcp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--da-line);
    gap: 12px;
}

.rcp-row span {
    font-size: 0.8125rem;
    color: var(--da-muted);
    flex-shrink: 0;
}

.rcp-row strong {
    font-size: 0.9rem;
    color: var(--da-ink);
    text-align: right;
}

/* ── Checkmark confirmation ─────────────────────────────────────────────── */
.dv-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--da-ok-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--da-ok);
    margin: 0 auto 24px;
}

/* ── Choix multiples (civilité héritée de .dv-choices) ─────────────────── */
.dv-choices {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dv-choice {
    padding: 8px 16px;
    border: 1.5px solid var(--da-line);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--da-muted);
    cursor: default;
}

.dv-choice.on {
    border-color: var(--da-red);
    color: var(--da-red);
    background: var(--da-red-soft);
    font-weight: 600;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.ok {
    background: var(--da-ok-bg);
    color: var(--da-ok);
}

.badge.warn {
    background: var(--da-warn-bg);
    color: var(--da-warn);
}

.badge.red {
    background: var(--da-red-soft);
    color: var(--da-red);
}

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.db-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--da-red);
    color: var(--da-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ── Advisor (conseiller) ────────────────────────────────────────────────── */
.advisor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--da-white);
    border: 1px solid var(--da-line);
    border-radius: 12px;
    margin-top: 20px;
}

.advisor .a-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--da-ink);
}

.advisor .a-sub {
    font-size: 0.8125rem;
    color: var(--da-muted);
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: default;
    border: none;
    width: 100%;
    text-decoration: none;
    gap: 8px;
}

.btn.primary {
    background: var(--da-red);
    color: var(--da-white);
}

.btn.ghost {
    background: transparent;
    color: var(--da-red);
    border: 1.5px solid var(--da-red);
}

/* ── Logo Dubut Assurances ─────────────────────────────────────────────── */
.da-brand-logo {
    display: block;
}

.da-brand-logo--light {
    filter: brightness(0) invert(1);
}

/* ── Écran intro (fond rouge) ───────────────────────────────────────────── */
.dv-intro {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--da-red) 0%, var(--da-red-deep) 100%);
    display: flex;
    flex-direction: column;
    padding: 40px 24px 32px;
    color: var(--da-white);
}

.dv-intro .dv-intro-logo {
    margin-bottom: 40px;
}

.dv-intro h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--da-white);
    font-family: 'Lora', Georgia, serif;
    line-height: 1.25;
    margin-bottom: 32px;
}

.dv-intro .dv-steps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.dv-intro .dv-step-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dv-intro .dv-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 1.5px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    color: var(--da-white);
}

.dv-intro .dv-step-label {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
}

/* ── Gestionnaire — mise en page 2 colonnes ─────────────────────────────── */
.gd-fieldset {
    border: 1px solid var(--da-line);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    background: var(--da-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.gd-legend {
    float: none;
    width: auto;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--da-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 8px;
    margin: 0 0 14px;
    line-height: 1.3;
}

.gd-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gd-2col.gd-tight {
    gap: 12px;
}

.gd-align-answers .fld > label {
    min-height: 34px;
    display: flex;
    align-items: flex-end;
}

.gd-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.gd-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--da-line);
    font-size: 0.875rem;
}

.gd-summary-row:last-child {
    border-bottom: none;
}

/* ── Desktop shell ──────────────────────────────────────────────────────── */
.dv-desk-header {
    background: var(--da-white);
    border-bottom: 1px solid var(--da-line);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.dv-desk-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: center;
}

.dv-desk-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv-desk-step .ds-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--da-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--da-muted);
    background: var(--da-white);
}

.dv-desk-step.active .ds-num {
    border-color: var(--da-red);
    color: var(--da-red);
    background: var(--da-red-soft);
}

.dv-desk-step.done .ds-num {
    border-color: var(--da-ok);
    background: var(--da-ok-bg);
    color: var(--da-ok);
}

.dv-desk-step .ds-label {
    font-size: 0.875rem;
    color: var(--da-muted);
}

.dv-desk-step.active .ds-label {
    color: var(--da-ink);
    font-weight: 500;
}

.dv-desk-connector {
    width: 48px;
    height: 2px;
    background: var(--da-line);
    margin: 0 8px;
}

.dv-desk-tel {
    font-size: 0.875rem;
    color: var(--da-muted);
    white-space: nowrap;
}

.dv-desk-body {
    max-width: 920px;
    margin: 0 auto;
    padding: 32px 24px;
}

.dv-desk-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.dv-needs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "activities activities"
        "scope pjp"
        "turnover date";
    gap: 24px 32px;
    align-items: start;
}

.dv-needs-grid .gd-fieldset {
    margin-bottom: 0;
}

.dv-needs-activities {
    grid-area: activities;
}

.dv-needs-scope {
    grid-area: scope;
}

.dv-needs-pjp {
    grid-area: pjp;
}

.dv-needs-turnover {
    grid-area: turnover;
}

.dv-needs-date {
    grid-area: date;
}

/* ── Écran confirmation ─────────────────────────────────────────────────── */
.dv-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px;
    text-align: center;
    gap: 16px;
}

.dv-confirm h1 {
    font-size: 1.4rem;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    color: var(--da-ink);
}

.dv-confirm .dv-next-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    margin-top: 8px;
}

.dv-confirm .dv-next-steps-horizontal {
    max-width: 760px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.dv-confirm .dv-next-step {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px;
    border: 1px solid var(--da-line);
    border-radius: 10px;
    background: var(--da-white);
}

.dv-confirm .dv-next-step .dns-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--da-red-soft);
    color: var(--da-red);
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dv-confirm .dv-next-step.done {
    border-color: color-mix(in srgb, var(--da-red) 35%, var(--da-line));
    background: var(--da-red-soft);
}

.dv-confirm .dv-next-step.done .dns-num {
    background: var(--da-red);
    color: var(--da-white);
}

.dv-confirm .dv-next-step.active {
    border-color: var(--da-red);
}

.dv-confirm .dv-next-step.active .dns-num {
    background: var(--da-red-soft);
    color: var(--da-red);
}

.dv-confirm .dv-next-step .dns-label {
    font-size: 0.875rem;
    color: var(--da-muted);
    line-height: 1.5;
}

.dv-status-callout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--da-red-soft);
    color: var(--da-red);
    font-size: 0.8125rem;
    font-weight: 700;
}

.dv-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 959px) {
    .gd-2col,
    .gd-3col,
    .dv-desk-2col,
    .dv-needs-grid {
        grid-template-columns: 1fr;
    }

    .dv-needs-grid {
        grid-template-areas:
            "activities"
            "scope"
            "pjp"
            "turnover"
            "date";
    }

    .gd-align-answers .fld > label {
        min-height: 0;
    }

    .dv-confirm .dv-next-steps-horizontal {
        grid-template-columns: 1fr;
    }
}

/* ── Vue auth start (client connecté) ───────────────────────────────────── */
.dv-auth-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--da-white);
    border: 1px solid var(--da-line);
    border-radius: 12px;
}

.dv-auth-banner .dv-auth-info {
    flex: 1;
}

.dv-auth-banner .dv-auth-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--da-ink);
}

.dv-auth-banner .dv-auth-role {
    font-size: 0.8125rem;
    color: var(--da-muted);
}