/* ──────────────────────────────────────────────────────────────────────────
   LaGDD — Simulateur de Devis  v5  (Brand Clean Edition)
   Palette: Deep navy + clean orange — no glow, no warm tint
   Motion:  Z-Axis Cascade — rotational card physics, spring easing
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap');

:root {
    /* ── Brand — deep navy + clean orange ────────────────────────────── */
    --c-espresso:     #0C1D35;    /* deep navy                          */
    --c-espresso2:    #163355;    /* mid navy                           */
    --c-amber:        #E07328;    /* clean orange — CTA                 */
    --c-amber2:       #F08C42;    /* lighter orange                     */
    --c-amber-glow:   rgba(224, 115, 40, .12);
    --c-amber-ring:   rgba(224, 115, 40, .18);

    /* Backward-compat aliases */
    --c-navy:         #0C1D35;
    --c-navy2:        #163355;
    --c-orange:       #E07328;
    --c-orange2:      #F08C42;
    --c-orange-glow:  rgba(224, 115, 40, .12);

    /* ── Surfaces — clean white / blue-grey ──────────────────────────── */
    --c-bg:       #E6EBF3;
    --c-surface:  #FFFFFF;
    --c-light:    #F1F4F9;
    --c-light2:   #E6EBF3;
    --c-bezel:    rgba(190, 208, 228, .55);  /* blue-grey bezel          */

    /* ── Borders ─────────────────────────────────────────────────────── */
    --c-border:   rgba(12, 29, 53, .10);
    --c-border2:  rgba(12, 29, 53, .06);

    /* ── Text ────────────────────────────────────────────────────────── */
    --c-text:     #0C1D35;
    --c-muted:    #4E6482;
    --c-green:    #166534;
    --c-red:      #B91C1C;
    --c-white:    #ffffff;

    /* ── Geometry ────────────────────────────────────────────────────── */
    --r:     10px;
    --r-sm:   6px;
    --r-xs:   4px;

    /* ── Shadows — clean, no glow ────────────────────────────────────── */
    --shadow-card:
        0 0 0 1px rgba(12,29,53,.08),
        0 0 0 5px var(--c-bezel),
        0 0 0 6px rgba(12,29,53,.03),
        0 2px 4px rgba(12,29,53,.04),
        0 10px 36px rgba(12,29,53,.08),
        0 48px 96px -16px rgba(12,29,53,.05);

    --shadow-float:
        0 0 0 1px rgba(12,29,53,.07),
        0 4px 16px rgba(12,29,53,.08);

    --shadow-sm:
        0 0 0 1px rgba(12,29,53,.06),
        0 2px 6px rgba(12,29,53,.04);

    --shadow-btn:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 2px 6px rgba(0,0,0,.13);

    /* ── Easings — spring physics ────────────────────────────────────── */
    --ease-spring:    cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.lagdd-wrap {
    max-width: 680px;
    margin: 0 auto;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    color: var(--c-text);
    line-height: 1.55;
}

/* ── Icon system ──────────────────────────────────────────────────────────── */

.lagdd-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 0;
}

/* ── Progress ─────────────────────────────────────────────────────────────── */

.lagdd-progress { margin-bottom: 32px; }

.lagdd-progress-bar {
    height: 2px;
    background: rgba(28,18,8,.08);
    border-radius: 2px;
    overflow: visible;        /* allow glow dot to bleed */
    margin-bottom: 24px;
    position: relative;
}

.lagdd-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-amber), var(--c-amber2));
    border-radius: 2px;
    transition: width 650ms var(--ease-spring);
    position: relative;
}

/* Leading-edge dot — no glow */
.lagdd-progress-fill::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-amber);
    pointer-events: none;
}

.lagdd-steps {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
}

.lagdd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
}

.lagdd-step-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    color: var(--c-muted);
    transition:
        background  500ms var(--ease-spring),
        border-color 300ms,
        color       300ms,
        transform   500ms var(--ease-bounce),
        box-shadow  400ms var(--ease-out-expo);
}

.lagdd-step small {
    font-size: 10px;
    color: var(--c-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    transition: color 300ms;
}

.lagdd-step.active .lagdd-step-dot {
    background: var(--c-espresso);
    border-color: var(--c-espresso);
    color: #fff;
    transform: scale(1.12);
    box-shadow: var(--shadow-float);
}
.lagdd-step.active small { color: var(--c-espresso); font-weight: 800; }

.lagdd-step.done .lagdd-step-dot {
    background: var(--c-green);
    border-color: var(--c-green);
    color: #fff;
    box-shadow: none;
}
.lagdd-step.done small { color: var(--c-green); }

/* ── Panel — double-bezel card ────────────────────────────────────────────── */

.lagdd-panel {
    display: none;
    background: var(--c-surface);
    border-radius: var(--r);
    box-shadow: var(--shadow-card);
    /* Warm overhead light gradient */
    background-image: linear-gradient(
        180deg,
        rgba(255,255,255,1)   0%,
        rgba(253,248,242,1) 100%
    );
    padding: 44px 48px;
    position: relative;
}

.lagdd-panel.active {
    display: block;
    animation: lagdd-panel-enter 580ms var(--ease-spring) both;
}

@keyframes lagdd-panel-enter {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.990);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ── Eyebrow step badges — CSS attr-selector trick ───────────────────────── */

.lagdd-panel[data-panel="1"] .lagdd-panel-head::before { content: 'Étape 01  ·  Logement'; }
.lagdd-panel[data-panel="2"] .lagdd-panel-head::before { content: 'Étape 02  ·  Mobilier'; }
.lagdd-panel[data-panel="3"] .lagdd-panel-head::before { content: 'Étape 03  ·  Coordonnées'; }
.lagdd-panel[data-panel="4"] .lagdd-panel-head::before { content: 'Étape 04  ·  Récapitulatif'; }

.lagdd-panel-head::before {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--c-amber);
    background: rgba(224,115,40,.08);
    border: 1px solid rgba(224,115,40,.18);
    margin-bottom: 11px;
    line-height: 1.8;
}

.lagdd-panel-head {
    margin-bottom: 30px;
    padding-bottom: 24px;
    padding-left: 16px;
    border-bottom: 1px solid var(--c-border2);
    position: relative;
}

/* Left accent — Editorial Luxury asymmetric signature */
.lagdd-panel-head::after {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 26px;   /* stop before the separator line */
    width: 3px;
    background: linear-gradient(to bottom, var(--c-amber), var(--c-amber2));
    border-radius: 2px;
    opacity: .65;
}

.lagdd-panel-head h2 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 900;
    color: var(--c-espresso);
    letter-spacing: -.65px;
    line-height: 1.15;
}

.lagdd-panel-head p {
    margin: 0;
    font-size: 13.5px;
    color: var(--c-muted);
    font-weight: 400;
    font-style: italic;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */

.lagdd-field { margin-bottom: 20px; }

.lagdd-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.lagdd-label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .65px;
    color: var(--c-muted);
    margin-bottom: 8px;
}

.lagdd-label em { color: var(--c-amber); font-style: normal; }

.lagdd-input,
.lagdd-select,
.lagdd-textarea {
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-family: inherit;
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-surface);
    box-shadow: 0 1px 2px rgba(28,18,8,.03);
    transition:
        border-color 220ms,
        box-shadow   320ms var(--ease-out-expo),
        background   220ms;
    appearance: none;
}

.lagdd-input::placeholder { color: #B09878; font-weight: 400; }

.lagdd-input:focus,
.lagdd-select:focus,
.lagdd-textarea:focus {
    outline: none;
    border-color: var(--c-amber);
    box-shadow: 0 0 0 4px var(--c-amber-glow), 0 1px 2px rgba(28,18,8,.04);
    background: #fffdf9;
}

.lagdd-input.lagdd-invalid,
.lagdd-select.lagdd-invalid {
    border-color: var(--c-red);
    box-shadow: 0 0 0 3px rgba(184,32,32,.09);
}

.lagdd-select-wrap { position: relative; }

.lagdd-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-color: var(--c-muted);
    /* SVG chevron-down via CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5 9 1' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5 9 1' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

.lagdd-field-error {
    display: block;
    font-size: 11.5px;
    color: var(--c-red);
    font-weight: 600;
    margin-top: 5px;
}

/* ── Counter ──────────────────────────────────────────────────────────────── */

.lagdd-counter {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--c-surface);
    box-shadow: 0 1px 3px rgba(28,18,8,.04);
    transition: border-color 200ms, box-shadow 280ms var(--ease-out-expo);
}

.lagdd-counter:focus-within {
    border-color: var(--c-amber);
    box-shadow: 0 0 0 4px var(--c-amber-glow);
}

.lagdd-counter-btn {
    width: 40px;
    height: 44px;
    border: none;
    background: var(--c-light);
    color: var(--c-espresso);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms, transform 160ms var(--ease-bounce);
    flex-shrink: 0;
}

.lagdd-counter-btn:hover  { background: var(--c-light2); }
.lagdd-counter-btn:active { transform: scale(.88); }

.lagdd-counter-input {
    width: 68px;
    height: 44px;
    border: none;
    border-left:  1.5px solid var(--c-border);
    border-right: 1.5px solid var(--c-border);
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    -moz-appearance: textfield;
}

.lagdd-counter-input:focus { outline: none; background: #fffdf9; }
.lagdd-counter-input::-webkit-outer-spin-button,
.lagdd-counter-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.lagdd-field-inline { display: flex; align-items: center; gap: 12px; }
.lagdd-unit-badge { font-size: 13px; color: var(--c-muted); font-weight: 600; }

/* ── Checkbox ─────────────────────────────────────────────────────────────── */

.lagdd-check-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    cursor: pointer;
    margin-top: 10px;
    user-select: none;
}

.lagdd-check-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--c-amber);
    cursor: pointer;
    flex-shrink: 0;
}

.lagdd-gdpr-box {
    background: var(--c-light);
    border: 1px solid var(--c-border2);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
}

/* ── Étage block ──────────────────────────────────────────────────────────── */

.lagdd-floor-block {
    background: var(--c-light);
    border: 1px solid var(--c-border2);
    border-radius: var(--r-sm);
    padding: 14px 16px;
}

/* Reset browser fieldset defaults when .lagdd-floor-block is a <fieldset> */
fieldset.lagdd-floor-block {
    margin: 0;
    min-width: 0; /* prevent fieldset from overflowing CSS grid */
}
fieldset.lagdd-floor-block > legend {
    padding: 0 2px;
    float: left;   /* pulls legend into the content flow */
    width: 100%;
}
fieldset.lagdd-floor-block > legend + * { clear: both; }

.lagdd-floor-block .lagdd-label,
.lagdd-floor-block legend.lagdd-label { margin-bottom: 10px; }

.lagdd-floor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lagdd-floor-row .lagdd-select-wrap { flex: 1; min-width: 90px; }

/* ── Accordion ────────────────────────────────────────────────────────────── */

.lagdd-cat-section { margin-bottom: 6px; }

.lagdd-cat-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-espresso);
    padding: 12px 16px;
    background: var(--c-light);
    border: 1.5px solid var(--c-border);
    border-radius: 4px;
    transition:
        background    200ms,
        border-color  200ms,
        transform     240ms var(--ease-bounce),
        box-shadow    280ms var(--ease-out-expo);
}

.lagdd-cat-title:hover {
    background: var(--c-light2);
    border-color: rgba(28,18,8,.16);
    transform: translateY(-1.5px);
    box-shadow: var(--shadow-float);
}

/* Open — warm espresso gradient, no rotation (stable foundation) */
.lagdd-cat-section.open .lagdd-cat-title {
    background: linear-gradient(135deg, var(--c-espresso) 0%, #2E1E0E 100%);
    color: rgba(255,245,235,.95);
    border-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform: none;
    box-shadow: none;
}

/* Flex wrapper for icon + category name inside accordion header */
.lagdd-cat-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lagdd-cat-label .lagdd-icon {
    opacity: .75;
    transition: opacity 200ms;
}

.lagdd-cat-section.open .lagdd-cat-label .lagdd-icon {
    opacity: .9;
    stroke: rgba(255,245,235,.85);
}

.lagdd-cat-arrow {
    flex-shrink: 0;
    line-height: 0;
    opacity: .38;
    transition: transform 300ms var(--ease-spring), opacity 200ms;
}

.lagdd-cat-section.open .lagdd-cat-arrow {
    transform: rotate(180deg);
    opacity: .65;
    /* SVG inherits currentColor from the open title (white text) */
}

.lagdd-cat-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 280ms var(--ease-out-expo);
}

.lagdd-cat-section.open .lagdd-cat-body {
    max-height: 3000px;
    border: 1.5px solid rgba(28,18,8,.12);
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* ── Furniture cards — Z-Axis Cascade physics ─────────────────────────────── */

.lagdd-furn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-bottom: 4px;
}

.lagdd-furn-card {
    background: var(--c-light);
    border: 1.5px solid var(--c-border);
    border-radius: 4px;
    padding: 11px 13px;
    cursor: pointer;
    position: relative;
    user-select: none;
    will-change: transform;
    transition:
        border-color  200ms,
        background    200ms,
        transform     260ms var(--ease-bounce),
        box-shadow    300ms var(--ease-out-expo);
}

/* Z-axis cascade: card lifts + slight counter-clockwise lean */
.lagdd-furn-card:hover {
    border-color: rgba(28,18,8,.18);
    background: #F0E9DF;
    transform: translateY(-3px) rotate(-0.45deg);
    box-shadow: var(--shadow-float);
}

.lagdd-furn-card:active { transform: scale(.97) rotate(0deg); }

/* Selected — orange border, no ring glow */
.lagdd-furn-card.selected {
    border-color: var(--c-amber);
    background: #F6F9FF;
    transform: translateY(-2px) rotate(0.3deg);
    box-shadow: var(--shadow-float);
}

/* Check circle */
.lagdd-furn-card-check {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 260ms var(--ease-spring);
}

.lagdd-furn-card.selected .lagdd-furn-card-check {
    background: var(--c-amber);
    border-color: var(--c-amber);
    color: #fff;
    transform: scale(1.18);
    box-shadow: none;
}

.lagdd-furn-card-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 5px;
    display: block;
}

.lagdd-furn-card-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text);
    display: block;
    padding-right: 22px;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: break-word;
}

.lagdd-furn-card-vol {
    font-size: 10.5px;
    color: var(--c-muted);
    margin-top: 2px;
    display: block;
}

/* Qty controls */
.lagdd-furn-card-qty {
    display: none;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed rgba(28,18,8,.09);
}

.lagdd-furn-card.selected .lagdd-furn-card-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.lagdd-furn-card-qty .lagdd-counter-btn {
    width: 28px;
    height: 28px;
    font-size: 15px;
    background: rgba(28,18,8,.06);
    border: none;
    cursor: pointer;
    color: var(--c-espresso);
    border-radius: 4px;
    transition: background 150ms, transform 160ms var(--ease-bounce);
}

.lagdd-furn-card-qty .lagdd-counter-btn:hover  { background: rgba(28,18,8,.11); }
.lagdd-furn-card-qty .lagdd-counter-btn:active { transform: scale(.85); }

.lagdd-furn-card-qty input {
    width: 42px;
    height: 28px;
    border: 1.5px solid var(--c-border);
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    margin: 0 5px;
    -moz-appearance: textfield;
    transition: border-color 200ms, box-shadow 200ms;
}

.lagdd-furn-card-qty input:focus {
    outline: none;
    border-color: var(--c-amber);
    box-shadow: 0 0 0 3px var(--c-amber-glow);
}

.lagdd-furn-card-qty input::-webkit-outer-spin-button,
.lagdd-furn-card-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Autre — champ libre */
.lagdd-autre-row {
    padding: 7px 10px 10px;
    border-top: 1px dashed rgba(28,18,8,.08);
    margin-top: 2px;
}

.lagdd-autre-input {
    font-size: 12.5px;
    padding: 8px 12px;
    color: var(--c-muted);
    background: var(--c-light);
    border-radius: 5px;
    font-weight: 400;
}

.lagdd-autre-input::placeholder { font-style: italic; color: #B09878; }
.lagdd-autre-input:focus { color: var(--c-text); background: var(--c-surface); }

/* Legacy */
.lagdd-furn-tag-del {
    width: 28px; height: 28px;
    border: none; background: none;
    color: var(--c-muted); font-size: 18px;
    cursor: pointer; border-radius: 6px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.lagdd-furn-tag-del:hover { background: #fde8e8; color: var(--c-red); }

/* ── Volume bar (sticky, step 2) ──────────────────────────────────────────── */

.lagdd-vol-bar {
    position: sticky;
    bottom: 12px;
    background: var(--c-espresso);
    background-image: linear-gradient(135deg, rgba(224,115,40,.12) 0%, transparent 60%);
    color: #fff;
    border-radius: 8px;
    padding: 16px 22px;
    margin-top: 20px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 10px 36px rgba(28,18,8,.35);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.lagdd-vol-main { font-size: 15px; font-weight: 700; }
.lagdd-vol-main strong { color: var(--c-amber2); font-size: 22px; }
.lagdd-vol-main sup { font-size: 12px; }
.lagdd-vol-sub { font-size: 12px; color: rgba(255,245,235,.42); margin-top: 2px; }
.lagdd-truck-pill {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
}

/* ── Navigation buttons ───────────────────────────────────────────────────── */

.lagdd-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--c-border2);
}

.lagdd-btn {
    padding: 13px 20px 13px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    letter-spacing: -.1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition:
        background  220ms,
        transform   260ms var(--ease-bounce),
        box-shadow  320ms var(--ease-out-expo),
        opacity     200ms;
}

.lagdd-btn:active { transform: scale(.96) !important; }

/* Back */
.lagdd-btn-prev {
    background: var(--c-light2);
    color: var(--c-espresso);
    border: 1.5px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    padding-left: 20px;
    padding-right: 24px;
}

.lagdd-btn-prev:hover {
    background: var(--c-light);
    transform: translateY(-1.5px);
    box-shadow: var(--shadow-float);
}

/* CTA — burnt sienna pill */
.lagdd-btn-next,
.lagdd-btn-submit {
    margin-left: auto;
    background: var(--c-amber);
    color: #fff;
    box-shadow: var(--shadow-btn);
}

.lagdd-btn-next:hover,
.lagdd-btn-submit:hover {
    background: #A84E14;
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 4px 12px rgba(0,0,0,.18);
}

/* ── Button-in-Button: nested arrow circle ───────────────────────────────── */

.lagdd-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.20);
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
    transition:
        transform   260ms var(--ease-bounce),
        background  200ms;
}

.lagdd-btn-next:hover .lagdd-btn-arrow,
.lagdd-btn-submit:hover .lagdd-btn-arrow {
    background: rgba(255,255,255,.32);
    transform: translate(2px, -1px) scale(1.12);
}

/* Back button arrow (dark variant) */
.lagdd-btn-prev .lagdd-btn-arrow {
    background: rgba(28,18,8,.07);
    color: var(--c-espresso);
}

.lagdd-btn-prev:hover .lagdd-btn-arrow {
    background: rgba(28,18,8,.12);
    transform: translate(-2px, -1px) scale(1.12);
}

/* Spinner */
.lagdd-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lagdd-spin .6s linear infinite;
    flex-shrink: 0;
}

.lagdd-btn-submit.loading .lagdd-spinner { display: block; }
.lagdd-btn-submit.loading > span:first-child { opacity: .7; }

@keyframes lagdd-spin { to { transform: rotate(360deg); } }

/* ── Summary / Récap ──────────────────────────────────────────────────────── */

.lagdd-recap-block {
    background: var(--c-light);
    border: 1px solid var(--c-border2);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 10px;
}

.lagdd-recap-block h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .75px;
    color: var(--c-muted);
    margin: 0 0 12px;
}

.lagdd-recap-block h3 .lagdd-icon {
    opacity: .7;
}

.lagdd-recap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.lagdd-recap-table td { padding: 5px 0; vertical-align: top; }

.lagdd-recap-table td:first-child {
    font-weight: 600;
    color: var(--c-muted);
    width: 130px;
    min-width: 80px;
    padding-right: 12px;
    white-space: nowrap;
}

.lagdd-recap-table td + td {
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.lagdd-recap-table th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-muted);
    text-align: left;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--c-border);
}

/* Volume block — warm espresso with amber tint */
.lagdd-recap-vol {
    background: var(--c-espresso);
    background-image: linear-gradient(135deg, rgba(224,115,40,.10) 0%, transparent 55%);
    color: #fff;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.lagdd-recap-vol::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%);
    pointer-events: none;
}

.lagdd-recap-vol-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13.5px;
    color: rgba(255,245,235,.45);
    position: relative;
}

.lagdd-recap-vol-total {
    display: flex;
    justify-content: space-between;
    padding: 12px 0 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    position: relative;
}

.lagdd-recap-vol-total span:last-child { color: var(--c-amber2); }

.lagdd-recap-note {
    font-size: 11px;
    color: rgba(255,245,235,.28);
    margin-top: 6px;
    font-weight: 500;
    position: relative;
}

/* Price — deep warm sienna gradient with film grain */
.lagdd-recap-price {
    background: linear-gradient(140deg, #A03C16 0%, #C46022 55%, #B04C1A 100%);
    border-radius: 8px;
    padding: 28px 24px;
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.12);
}

/* Top highlight */
.lagdd-recap-price::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, transparent 52%);
    pointer-events: none;
}

/* Film grain overlay — adds tactile paper quality */
.lagdd-recap-price::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
}

.lagdd-recap-price-label {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    opacity: .72;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.lagdd-recap-price-range {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -.9px;
    line-height: 1;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.lagdd-recap-price-range sup {
    font-size: 14px;
    font-weight: 700;
    vertical-align: super;
    opacity: .8;
}

.lagdd-recap-price-note {
    font-size: 12px;
    opacity: .70;
    line-height: 1.58;
    position: relative;
    z-index: 1;
    font-style: italic;
}

/* ── No-items placeholder ─────────────────────────────────────────────────── */

.lagdd-recap-no-items {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--c-light);
    border: 1.5px dashed var(--c-border);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--c-muted);
    line-height: 1.58;
    font-style: italic;
}

.lagdd-recap-no-items .lagdd-icon {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: .55;
}

.lagdd-recap-cta {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgba(224, 115, 40, .07);
    border: 1.5px solid rgba(224, 115, 40, .25);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--c-espresso);
    line-height: 1.55;
}

.lagdd-recap-cta .lagdd-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--c-amber2);
}

/* ── Confirmation ─────────────────────────────────────────────────────────── */

.lagdd-confirmation {
    background: var(--c-surface);
    background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(253,248,242,1) 100%);
    border-radius: var(--r);
    box-shadow: var(--shadow-card);
    padding: 68px 48px;
    text-align: center;
    animation: lagdd-panel-enter 580ms var(--ease-spring) both;
}

.lagdd-confirm-icon {
    width: 72px;
    height: 72px;
    background: var(--c-green);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
    box-shadow: none;
    animation: lagdd-icon-pop 640ms 140ms var(--ease-bounce) both;
}
.lagdd-confirm-icon svg { display: block; }

@keyframes lagdd-icon-pop {
    from { transform: scale(.2); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.lagdd-confirmation h2 {
    font-size: 26px;
    font-weight: 900;
    color: var(--c-espresso);
    margin: 0 0 10px;
    letter-spacing: -.55px;
}

.lagdd-confirmation p {
    font-size: 14.5px;
    color: var(--c-muted);
    line-height: 1.68;
    max-width: 400px;
    margin: 0 auto;
    font-style: italic;
}

/* ── Error ────────────────────────────────────────────────────────────────── */

.lagdd-error-msg {
    background: #fef2f2;
    border: 1.5px solid rgba(184,32,32,.15);
    border-radius: var(--r-sm);
    color: var(--c-red);
    padding: 13px 16px;
    font-size: 13.5px;
    font-weight: 500;
    margin-top: 12px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 580px) {
    .lagdd-panel { padding: 26px 22px; }
    .lagdd-grid2 { grid-template-columns: 1fr; }
    .lagdd-steps small { display: none; }
    .lagdd-nav { flex-direction: column; }
    .lagdd-btn-next,
    .lagdd-btn-submit { margin-left: 0; justify-content: center; }
    .lagdd-panel-head h2 { font-size: 22px; }
    /* Disable rotational physics on touch devices (avoids layout artifacts) */
    .lagdd-furn-card:hover { transform: translateY(-2px) rotate(0deg); }
    .lagdd-furn-card.selected { transform: translateY(-1px) rotate(0deg); }
}

@media (max-width: 400px) {
    .lagdd-furn-grid { grid-template-columns: 1fr; }
}

/* ── Prefers-reduced-motion ───────────────────────────────────────────────── */

/* ── Honeypot anti-bot ────────────────────────────────────────────────────── */
/* Totalement invisible et inatteignable pour les humains */
.lagdd-hp-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── Utility classes (v5.1 — security / a11y pass) ───────────────────────── */

/* Asterisk requis via token, remplace l'ancien style="color:#e8892a" inline */
.lagdd-required-star { color: var(--c-amber); font-style: normal; }

/* Lien RGPD dans la checkbox de consentement */
.lagdd-gdpr-link {
    color: var(--c-amber);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lagdd-gdpr-link:hover { color: var(--c-amber2); }

/* Remplace style="flex:1" dans les lignes de sélecteurs */
.lagdd-flex1 { flex: 1 1 0; min-width: 0; }

/* Annule le margin-top par défaut des .lagdd-check-label dans des conteneurs row */
.lagdd-check-inline { margin-top: 0; }

/* Champ surface — remplace style="width:72px" */
.lagdd-surface-input { width: 72px; }

/* Champ date — remplace style="max-width:220px" et style="margin-top:4px" */
.lagdd-date-input  { max-width: 220px; }
.lagdd-field-date  { margin-top: 4px; }

/* ── Prefers-reduced-motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .lagdd-panel.active,
    .lagdd-confirmation {
        animation: none !important;
        filter: none !important;
        transform: none !important;
    }
    .lagdd-confirm-icon {
        animation: none !important;
    }
    .lagdd-progress-fill,
    .lagdd-step-dot,
    .lagdd-cat-title,
    .lagdd-cat-arrow,
    .lagdd-cat-body,
    .lagdd-furn-card,
    .lagdd-furn-card-check,
    .lagdd-btn,
    .lagdd-btn-arrow,
    .lagdd-counter-btn,
    .lagdd-input,
    .lagdd-select,
    .lagdd-counter {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
    }
}