/**
 * Contact — CSS dédié
 * Multi-step form : sidebar + main panels + fixed price summary
 */


/* ============================================
   Layout principal
   ============================================ */
.c2s-page-contact {
    padding: 0 !important;
}

.c2s-contact {
    --_nav-gap: 1.25em;
    --_nav-bar: 45px;
    --_header-h: calc(var(--_nav-gap) + var(--_nav-bar) + var(--_nav-gap));
    --_content-pt: calc(10em - var(--_header-h));
    --_grid-gap: 1.5em;
    --_grid-pad: 1.5em;
    --_col-w: calc((var(--size-container) - 2 * var(--_grid-pad) - 11 * var(--_grid-gap)) / 12);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--_grid-gap);
    max-width: var(--size-container);
    margin-inline: auto;
    padding-inline: var(--_grid-pad);
    min-height: 100vh;
    padding-top: var(--_header-h);
}


/* ============================================
   SIDEBAR
   ============================================ */
.c2s-contact__sidebar {
    grid-column: 1 / 4;
    position: sticky;
    top: calc(var(--_header-h) + var(--_nav-gap));
    height: calc(100vh - var(--_header-h) - (var(--_nav-gap) * 2));
    overflow-y: auto;
    color: var(--white);
    padding: var(--space-8) var(--space-6);
    margin-top: var(--_nav-gap);
    background-color: var(--dark);
}

.c2s-contact__sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Stepper */
.c2s-contact__stepper {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.c2s-contact__step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-radius: 0.5em;
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--darkgrey);
    cursor: default;
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    padding-left: 0px;
}

.c2s-contact__step:not([disabled]) {
    cursor: pointer;
}

.c2s-contact__step.is--active {
    color: var(--white);
}

.c2s-contact__step.is--done {
    color: var(--lightergrey);
}

.c2s-contact__step.is--done:not([disabled]):hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Step icon */
.c2s-contact__step-icon {
    position: relative;
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--darkgrey);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.c2s-contact__step.is--active .c2s-contact__step-icon,
.c2s-contact__step.is--done .c2s-contact__step-icon {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.c2s-contact__step-num {
    font-size: var(--11px-size);
    font-weight: 700;
    line-height: 1;
}

.c2s-contact__step.is--active .c2s-contact__step-num {
    color: var(--white);
}

.c2s-contact__step.is--done .c2s-contact__step-num {
    display: none;
}

.c2s-contact__check {
    width: 0.7em;
    display: none;
}

.c2s-contact__step.is--done .c2s-contact__check {
    display: block;
    color: var(--white);
}

/* Step sub-items */
.c2s-contact__step-subs {
    padding-left: calc(1.5em + var(--space-3) + var(--space-2));
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-out-expo);
}

.c2s-contact__step-subs.is--open {
    max-height: 10em;
}

.c2s-contact__step-sub {
    font-size: var(--12px-size);
    color: var(--darkgrey);
    padding: var(--space-1) 0;
}

.c2s-contact__step-sub::before {
    content: '–';
    margin-right: var(--space-2);
    color: var(--darkgrey);
    font-size: var(--11px-size);
}

.c2s-contact__step-sub.is--active {
    color: var(--white);
}

.c2s-contact__step-sub.is--active::before {
    content: '›';
    color: var(--color-primary);
}

/* Sidebar bottom */
.c2s-contact__sidebar-bottom {
    margin-top: auto;
    padding-top: var(--space-8);
}

.c2s-contact__sidebar-cta {
    font-size: var(--12px-size);
    color: var(--darkgrey);
    margin-bottom: var(--space-2);
}

.c2s-contact__sidebar-email {
    font-size: var(--14px-size);
    color: var(--lightergrey);
    font-weight: 500;
}


/* ============================================
   MAIN CONTENT
   ============================================ */
.c2s-contact__main {
    grid-column: 5 / 12;
    padding-top: var(--_content-pt);
    padding-bottom: var(--space-20);
    position: relative;
    min-height: calc(100vh - var(--_header-h));
}

/* Panels */
.c2s-contact__panel {
    display: none;
}

.c2s-contact__panel.is--active {
    display: block;
    animation: c2s-fadeIn 0.4s ease-out;
}

@keyframes c2s-fadeIn {
    from {
        opacity: 0;
        transform: translateY(1em);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.c2s-contact__panel-inner {
    min-width: 0;
    position: relative;
}

/* Title & subtitle */
.c2s-contact__title {
    font-size: var(--34px-size);
    margin-bottom: var(--space-2);
}

.c2s-contact__subtitle {
    font-size: var(--14px-size);
    color: var(--color-body-light);
    margin-bottom: var(--space-10);
}


/* ============================================
   SERVICE CARDS (step 1)
   ============================================ */
.c2s-contact__services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--_grid-gap);
    margin-bottom: var(--space-10);
}

.c2s-contact__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 0.75em;
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.c2s-contact__card:hover {
    border-color: var(--darkgrey);
}

.c2s-contact__card.is--selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.c2s-contact__card-check {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) ease;
}

.c2s-contact__card-check svg {
    width: 0.7em;
    display: none;
}

.c2s-contact__card.is--selected .c2s-contact__card-check {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.c2s-contact__card.is--selected .c2s-contact__card-check svg {
    display: block;
    color: var(--white);
}

.c2s-contact__card-icon {
    color: var(--color-body-light);
}

.c2s-contact__card-icon svg {
    width: 1.75em;
    height: 1.75em;
}

.c2s-contact__card-label {
    font-size: var(--16px-size);
    font-weight: 500;
    color: var(--color-heading);
}

.c2s-contact__card-bottom {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: auto;
}

.c2s-contact__card-tag {
    font-size: var(--11px-size);
    color: var(--color-primary);
    font-weight: 500;
    white-space: nowrap;
}

/* Disabled / greyed out card (mutual exclusion) */
.c2s-contact__card.is--disabled {
    opacity: 0.35;
    pointer-events: none;
    border-color: var(--color-border);
    box-shadow: none;
}


/* ============================================
   BACK BUTTON
   ============================================ */
.c2s-contact__back {
    position: absolute;
    top: calc(-1 * var(--space-8));
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--color-body-light);
    cursor: pointer;
    transition: color var(--duration-fast) ease;
    background: none;
    border: none;
}

.c2s-contact__back:hover {
    color: var(--color-heading);
}


/* ============================================
   DETAIL BLOCKS (step 2)
   ============================================ */
.c2s-contact__detail-block {
    margin-bottom: var(--space-8);
}

.c2s-contact__detail-block h2 {
    font-size: var(--34px-size);
    margin-bottom: var(--space-2);
}

.c2s-contact__detail-desc {
    font-size: var(--14px-size);
    color: var(--color-body-light);
    margin-bottom: var(--space-6);
    max-width: 40em;
}


/* ============================================
   PACKAGE CARDS (step 2)
   ============================================ */
.c2s-contact__packages {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.c2s-contact__package {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 0.75em;
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.c2s-contact__package:hover {
    border-color: var(--darkgrey);
}

.c2s-contact__package.is--selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.c2s-contact__package-check {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) ease;
}

.c2s-contact__package-check svg {
    width: 0.7em;
    display: none;
}

.c2s-contact__package.is--selected .c2s-contact__package-check {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.c2s-contact__package.is--selected .c2s-contact__package-check svg {
    display: block;
    color: var(--white);
}

.c2s-contact__package-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.c2s-contact__package-info strong {
    font-size: var(--16px-size);
    font-weight: 500;
    color: var(--color-heading);
}

.c2s-contact__package-tag {
    font-size: var(--12px-size);
    color: var(--color-body-light);
}

.c2s-contact__package-price {
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--color-heading);
    white-space: nowrap;
}

/* Locked by global SEO */
.c2s-contact__package.is--locked {
    opacity: 0.3;
    pointer-events: none;
}

.c2s-contact__package.is--locked .c2s-contact__package-tag::after {
    content: ' — inclus dans l\'offre globale';
    color: var(--color-primary);
    font-weight: 500;
}

/* Promo badge on mensuel when global is active */
.c2s-contact__package-promo {
    display: none;
    font-size: var(--11px-size);
    font-weight: 700;
    color: var(--white);
    background-color: var(--color-primary);
    padding: 0.15em 0.5em;
    border-radius: 2em;
    margin-left: var(--space-2);
}

.c2s-contact__package-promo.is--visible {
    display: inline-block;
}

/* Included (free) — greyed out, checked, non-interactive */
.c2s-contact__package.is--included {
    opacity: 0.4;
    pointer-events: none;
}

.c2s-contact__package-price .c2s-inclus-badge {
    color: var(--color-primary);
    font-weight: 500;
    margin-right: 0.3em;
}


/* ============================================
   INCLUDES
   ============================================ */
.c2s-contact__includes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    padding-top: var(--space-6);
}

.c2s-contact__includes h4 {
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: var(--space-3);
}

.c2s-contact__includes ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.c2s-contact__includes li {
    font-size: var(--14px-size);
    color: var(--color-body-light);
    padding-left: 1.2em;
    position: relative;
}

.c2s-contact__includes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
    background-color: var(--color-primary);
}


/* ============================================
   FIXED PRICE SUMMARY (visible steps 2 & 3)
   ============================================ */
.c2s-contact__summary {
    margin-top: var(--space-8);
    background: rgba(255, 255, 255, 0.05);
    /* Slight dark mode tint */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75em;
    padding: var(--space-6);
    display: none;
    /* Handled by JS, normally opacity 0 */
}

.c2s-contact__summary.is--visible {
    display: block;
    animation: c2s-fadeIn 0.4s ease-out;
}

.c2s-contact__summary-price {
    display: flex;
    align-items: baseline;
    gap: 0.1em;
    margin-bottom: var(--space-1);
}

.c2s-contact__summary-amount {
    font-size: var(--48px-size);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.c2s-contact__digit-slot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    overflow: hidden;
}

.c2s-contact__digit-track {
    display: flex;
    flex-direction: column;
    transform: translateY(0%) rotate(0.001deg);
    transition: transform 1.4s cubic-bezier(0.625, 0.05, 0, 1);
}

.c2s-contact__digit-track span {
    display: block;
    height: 1em;
    line-height: 1;
}

.c2s-contact__digit-spacer {
    display: inline-block;
    line-height: 1;
    width: 0.2em;
}

.c2s-contact__summary-currency {
    font-size: var(--20px-size);
    font-weight: 700;
    color: var(--color-primary);
}

.c2s-contact__summary-label {
    font-size: var(--12px-size);
    color: var(--lightergrey);
    margin-bottom: var(--space-6);
}

.c2s-contact__summary-resume {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-4);
}

.c2s-contact__summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--12px-size);
}

.c2s-contact__summary-line-label {
    color: var(--lightergrey);
}

.c2s-contact__summary-line-price {
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
}


/* ============================================
   FORM (step 3)
   ============================================ */
.c2s-contact__recap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.c2s-contact__recap-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 2em;
    font-size: var(--12px-size);
    font-weight: 500;
    color: var(--color-heading);
}

.c2s-contact__recap-tag::before {
    content: '✓';
    color: var(--color-primary);
    font-size: var(--11px-size);
}

.c2s-contact__form {
    margin-top: var(--space-4);
}

.c2s-contact__form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.c2s-contact__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.c2s-contact__field--full {
    grid-column: 1 / -1;
}

.c2s-contact__field label {
    font-size: var(--12px-size);
    font-weight: 500;
    color: var(--color-heading);
}

.c2s-contact__field input,
.c2s-contact__field textarea {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 0.5em;
    font-size: var(--14px-size);
    color: var(--color-heading);
    background: var(--white);
    transition: border-color var(--duration-fast) ease;
}

.c2s-contact__field input::placeholder,
.c2s-contact__field textarea::placeholder {
    color: var(--darkgrey);
}

.c2s-contact__field input:focus,
.c2s-contact__field textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.c2s-contact__field textarea {
    resize: vertical;
    min-height: 8em;
}


/* ============================================
   ACTIONS
   ============================================ */
.c2s-contact__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-8);
}

.c2s-contact__actions .c2s-btn[disabled] {
    opacity: 0.35;
    pointer-events: none;
}


/* ============================================
   GIMMICK RAIN (Awwwards easter egg)
   ============================================ */
.c2s-gimmick-rain {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
    overflow: hidden;
}

.c2s-gimmick-rain__particle {
    position: absolute;
    will-change: transform;
}


/* ============================================
   CAL.COM EMBED (direct iframe)
   ============================================ */
.c2s-contact__calcom-wrap {
    width: 100%;
    height: 38em;
    max-height: calc(100vh - var(--_header-h) - var(--_content-pt) - 8em);
    border-radius: 0.5em;
    margin-top: var(--space-6);
    overflow: hidden;
}

.c2s-contact__calcom-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.5em;
}




/* ============================================
   RESPONSIVE
   ============================================ */
@media screen and (max-width: 991px) {
    /* Sur mobile, main en premier, sidebar en dessous (inversé vs desktop)
       sans toucher au JS multi-step ni au sticky desktop. */
    .c2s-contact {
        display: flex;
        flex-direction: column;
        padding-top: 4em;
    }

    .c2s-contact__main {
        order: 1;
    }

    .c2s-contact__sidebar {
        order: 2;
        position: relative;
        height: auto;
        top: 0;
        margin-top: calc(var(--col) * 0.5);
        margin-bottom: calc(var(--col) * 1);
        padding: var(--space-6);
    }

    .c2s-contact__sidebar-inner {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .c2s-contact__stepper {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .c2s-contact__step-subs {
        display: none;
    }

    .c2s-contact__sidebar-bottom {
        display: none;
    }

    .c2s-contact__main {
        padding: var(--space-6);
    }

    .c2s-contact__summary {
        position: relative;
        top: 0;
        margin-bottom: var(--space-6);
    }

    .c2s-contact__services {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 767px) {
    .c2s-contact__form-grid {
        grid-template-columns: 1fr;
    }

    .c2s-contact__includes {
        grid-template-columns: 1fr;
    }

}