/* Mises en page propres a chaque page. */

/* ---------- Sections ---------- */
.section {
    padding-block: var(--section-space);
}

.section--light {
    background: var(--color-light-section);
    color: var(--color-light-text);
}

.section--soft {
    background: var(--color-background-soft);
}

.section--light .lead-text,
.section--light .card__text {
    color: var(--color-light-secondary);
}

.section--light .eyebrow {
    color: var(--color-accent-dark);
}

.section--light .eyebrow::before {
    background: var(--color-accent-dark);
}

.section__head {
    max-width: 44rem;
}

.section__more {
    margin-top: 2.5rem;
}

/* ---------- Hero d'accueil ---------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding-top: var(--nav-height);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--gradient-hero-overlay);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero__content {
    max-width: 660px;
    padding-block: 5rem 3rem;
}

.hero__title {
    margin-block: 1.8rem 1.6rem;
    font-size: clamp(2.45rem, 5.6vw, 4.6rem);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.hero__lead {
    max-width: 34rem;
    font-size: 1.075rem;
    color: var(--color-text-secondary);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.6rem;
}

.hero__foot {
    position: relative;
    z-index: 2;
    margin-top: auto;
    border-top: 1px solid var(--color-border);
}

.hero__foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5rem;
    padding-block: 1.6rem;
}

.perk {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
}

.perk i {
    flex: none;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    transform: rotate(45deg);
}

/* Carte de consultation en verre */
.consult {
    position: absolute;
    right: var(--gutter);
    bottom: 8.5rem;
    z-index: 3;
    width: 330px;
    padding: 1.8rem;
    border: 1px solid var(--color-border);
    background: var(--color-glass);
    backdrop-filter: blur(18px);
}

.consult__label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 0 rgba(0, 217, 120, 0.55);
    animation: pulse 2.6s infinite;
}

@keyframes pulse {
    70% { box-shadow: 0 0 0 9px rgba(0, 217, 120, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 217, 120, 0); }
}

.consult__title {
    margin-block: 0.85rem 0.55rem;
    font-size: 1.4rem;
    font-weight: 300;
}

.consult__text {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.consult__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(210, 177, 132, 0.35);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-accent-light);
    transition: gap 0.25s ease, border-color 0.25s ease;
}

.consult__link::after {
    content: "\2192";
}

.consult__link:hover {
    gap: 0.85rem;
    border-bottom-color: var(--color-accent-light);
}

/* ---------- Hero des pages interieures ---------- */
.page-hero {
    padding-block: calc(var(--nav-height) + 5rem) 3.5rem;
    border-bottom: 1px solid var(--color-border);
}

.page-hero__title {
    margin-block: 1.5rem 1.2rem;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.page-hero__text {
    max-width: 52ch;
    color: var(--color-text-secondary);
}

/* ---------- Hero des fiches detaillees ---------- */
.detail-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 68svh;
    padding-block: calc(var(--nav-height) + 4rem) 3.5rem;
}

.detail-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(4, 4, 4, 0.95) 0%, rgba(4, 4, 4, 0.45) 55%, rgba(4, 4, 4, 0.25) 100%);
    pointer-events: none;
}

.detail-hero__inner {
    position: relative;
    z-index: 2;
}

.detail-hero__title {
    margin-top: 1.4rem;
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    font-weight: 300;
    letter-spacing: -0.02em;
}

.detail-hero__meta {
    margin-top: 0.8rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ---------- Grilles ---------- */
.intro__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.grid-cuisines {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 3.5rem;
}

.grid-cuisines--wide {
    grid-template-columns: repeat(3, 1fr);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 3.5rem;
    background: rgba(24, 24, 22, 0.14);
}

.step {
    padding: 2.2rem 1.6rem 2.6rem;
    background: var(--color-light-section);
}

.step__num {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--color-accent-dark);
}

.step__title {
    margin-block: 1rem 0.6rem;
    font-size: 1.15rem;
    font-weight: 400;
}

.step__text {
    font-size: 0.87rem;
    color: var(--color-light-secondary);
}

.specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.spec {
    padding: 1.8rem;
    background: var(--color-light-surface);
    border: 1px solid rgba(24, 24, 22, 0.08);
}

.spec__title {
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
    font-weight: 400;
}

.spec__text {
    font-size: 0.9rem;
    color: var(--color-light-secondary);
}

.placeholders {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}

.placeholder {
    padding: 1.8rem;
    border: 1px dashed rgba(210, 177, 132, 0.4);
    background: var(--color-surface);
}

.placeholder__title {
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
    font-weight: 400;
}

.placeholder__text {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-accent-light);
}

/* ---------- Realisations en page d'accueil ---------- */
.grid-real {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    margin-top: 3.5rem;
}

.real {
    position: relative;
    display: block;
    overflow: hidden;
}

.real--a { grid-column: span 4; aspect-ratio: 16 / 10; }
.real--b { grid-column: span 2; aspect-ratio: 3 / 4; }
.real--c { grid-column: span 2; aspect-ratio: 4 / 3; }
.real--d { grid-column: span 4; aspect-ratio: 16 / 9; }

.real:hover img {
    transform: scale(1.04);
}

.real__meta {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: grid;
    gap: 0.35rem;
    padding: 1.6rem 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

.real__style {
    font-family: var(--font-ui);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.real__title {
    font-size: 1.3rem;
    font-weight: 300;
}

.real__location {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* ---------- Page Realisations ---------- */
.grid-projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.project {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color 0.35s ease, transform 0.35s ease;
}

.project:hover {
    border-color: rgba(210, 177, 132, 0.45);
    transform: translateY(-4px);
}

.project:hover img {
    transform: scale(1.04);
}

.project__body {
    padding: 1.8rem;
}

.project__style {
    font-family: var(--font-ui);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.project__title {
    margin-block: 0.7rem 0.6rem;
    font-size: 1.5rem;
    font-weight: 300;
}

.project__text {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.project__location {
    margin-top: 0.6rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* ---------- Fiches detaillees ---------- */
.detail__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.detail__cta {
    margin-top: 2rem;
}

.detail__facts {
    padding: 2rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.detail__facts-title {
    margin-bottom: 1rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.detail__facts-title:not(:first-child) {
    margin-top: 2rem;
}

.detail__list {
    display: grid;
    gap: 0.8rem;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
}

.detail__list li {
    position: relative;
    padding-left: 1.3rem;
}

.detail__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    transform: rotate(45deg);
}

.detail__list--light {
    color: var(--color-light-secondary);
}

.detail__list--light li::before {
    background: var(--color-accent-dark);
}

.detail__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
}

/* ---------- Contact ---------- */
.contact__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.contact__list {
    display: grid;
    gap: 1.4rem;
    margin-bottom: 2.5rem;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.contact__label {
    display: block;
    margin-bottom: 0.3rem;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.contact__list a:hover {
    color: var(--color-accent-light);
}

.contact__box {
    padding: 1.8rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.contact__box p {
    margin-block: 0.8rem 1.5rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.contact__form {
    padding: 2.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* ---------- Demande de devis ---------- */
.quote__progress {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.quote__progress-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid var(--color-border);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.quote__progress-item span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-border);
    font-size: 0.72rem;
}

.quote__progress-item.is-active {
    border-bottom-color: var(--color-accent);
    color: var(--color-text-primary);
}

.quote__progress-item.is-active span {
    background: var(--gradient-accent);
    border-color: transparent;
    color: #100d09;
}

.quote__progress-item.is-done span {
    border-color: var(--color-accent);
    color: var(--color-accent-light);
}

.quote__step {
    margin-bottom: 3rem;
}

.quote__legend {
    margin-bottom: 1.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-accent-light);
}

.quote__summary {
    margin-block: 2rem;
    padding: 1.8rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.quote__summary-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem 1.5rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
}

.quote__summary-list dt {
    color: var(--color-text-secondary);
}

.quote__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* ---------- Pages legales et confirmation ---------- */
.legal h2 {
    margin-block: 2.5rem 1rem;
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--color-accent-light);
}

.legal h3 {
    margin-block: 1.8rem 0.8rem;
    font-size: 1.1rem;
    font-weight: 400;
}

.legal p {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}

.legal a {
    color: var(--color-accent-light);
    text-decoration: underline;
}

.legal__list {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    color: var(--color-text-secondary);
}

.legal__list li {
    position: relative;
    padding-left: 1.3rem;
}

.legal__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    transform: rotate(45deg);
}

.legal__updated {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-ui);
    font-size: 0.8rem;
}

.confirm {
    padding-block: calc(var(--nav-height) + 5rem) var(--section-space);
    text-align: center;
}

.confirm .eyebrow {
    justify-content: center;
}

.confirm .lead-text {
    margin-inline: auto;
}

.confirm__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* ---------- Bandeau CTA ---------- */
.cta {
    padding-block: clamp(4.5rem, 9vw, 7rem);
    border-block: 1px solid var(--color-border);
    background: var(--color-background-soft);
    text-align: center;
}

.cta__title {
    max-width: 22ch;
    margin-inline: auto;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
}

.cta__text {
    max-width: 52ch;
    margin: 1.3rem auto 2.4rem;
    color: var(--color-text-secondary);
}

/* Choix du public dans le hero */
.audience {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.6rem;
    margin-top: 2.2rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
}

.audience__intro {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.audience__link {
    position: relative;
    padding-block: 0.3rem;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-accent);
    transition: color 0.25s ease;
}

.audience__link::after {
    content: "→";
    margin-left: 0.4rem;
    color: var(--color-accent-light);
}

.audience__link:hover {
    color: var(--color-accent-light);
}

/* Hero centre */
.hero__content {
    margin-inline: auto;
    max-width: 820px;
    text-align: center;
}

.hero__content .eyebrow,
.hero__actions,
.audience {
    justify-content: center;
}

.hero__lead {
    margin-inline: auto;
}

.hero__foot-inner {
    justify-content: center;
}

/* Fleches en demi-cercle entre les etapes */
.step {
    position: relative;
}

.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.6rem;
    right: -40px;
    z-index: 1;
    width: 80px;
    height: 36px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 36' fill='none' stroke='%23b58a54' stroke-width='1.4' stroke-linecap='round'><path d='M6 32 A34 28 0 0 1 72 30'/><path d='M64 25 L72 30 L66 35'/></svg>") no-repeat center / contain;
    pointer-events: none;
}

.step__title {
    margin-top: 2.2rem;
}

@media (max-width: 1024px) {
    .step:not(:last-child)::after {
        display: none;
    }

    .step__title {
        margin-top: 0;
    }
}

.step:nth-child(1) { z-index: 4; }
.step:nth-child(2) { z-index: 3; }
.step:nth-child(3) { z-index: 2; }
.step:nth-child(4) { z-index: 1; }

/* Bandeau professionnels de l'accueil */
.pro-band {
    background: var(--color-background-soft);
    border-block: 1px solid var(--color-border);
}

.pro-band__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.pro-band__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}

.pro-band__list li {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.6rem;
    background: var(--color-background-soft);
}

.pro-band__list strong {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--color-text-primary);
}

.pro-band__list span {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .pro-band__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 560px) {
    .pro-band__list {
        grid-template-columns: 1fr;
    }
}