/* Acephal.website — Hérault offer (herault.acephal.website only).
   Local variant of the .website theme (user decision 2026-10-25): the Hérault palette (red,
   white, yellow) as local accents, with the night blue, white surfaces and components of every
   Acephal site. This file is loaded by this site only (site.json "styles"): the global variables
   and the other .website pages are unchanged. The header mark takes the local colours too
   (static/assets/logos/acephal-mark.svg, user request 2026-10-25). */

/* ---- Local palette -------------------------------------------------------------
   Contrast (WCAG AA): red on white 4.9:1 (white text on red buttons too), red on the soft tint
   4.5:1, yellow on night blue 13.8:1. Red on night blue is only 3.4:1: on dark backgrounds the
   accent text is yellow (small accents only), red stays for buttons and graphic marks.
   Yellow on white is 1.2:1: never yellow text on light backgrounds. */
:root[data-domain="website"] {
    --eco-herault-red: #E20909;
    --eco-herault-white: #FFFFFF;
    --eco-herault-yellow: #FCEF3C;
    /* Reading surfaces with a hint of the red (tint of the palette red, not a new colour). */
    --eco-herault-soft: color-mix(in srgb, var(--eco-herault-red) 5%, var(--eco-herault-white));

    --acephal-blue: var(--eco-herault-red);
    --acephal-cyan: var(--eco-herault-yellow);
    --accent-on-light: var(--eco-herault-red);
}

/* The constellation is drawn in blue: shift it towards the red. */
:root[data-domain="website"] :is(.top__stars, .cta-band__stars) {
    filter: hue-rotate(150deg) saturate(1.2);
}

/* Brand: ".website" in the local yellow (13.8:1 on the night blue); ".eu" keeps its own colour. */
.brand__ext:not(.brand__ext--eu) {
    color: var(--eco-herault-yellow);
}

/* ---- Header: no menu links (site.json "headerLinks": false), only ".eu" and the sign-in ----
   The toggle is left out by build-sites.ps1, so the navigation stays in the bar at every width;
   below 1240px the ".eu" pill next to the logo replaces the ".eu" button. */
.js .site-nav,
.site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    max-height: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.nav-auth,
.js .nav-auth {
    flex-direction: row;
    align-items: center;
    padding-top: 0;
    border-top: 0;
}

/* Phones: round icon button, the label stays for screen readers. */
@media (max-width: 599.98px) {
    .nav-auth__login {
        width: 44px;
        min-height: 44px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .nav-auth__login .icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ---- Home hero (mockup "Acephal Hérault, votre site vitrine", 2026-10-25) ---------
   Centred text over the Hérault background (hero-herault.webp: coast at night, the map of the
   department in the constellation, site.json "hero"); the territories in a strip below. */
.top:not(.top--compact) .top__bg {
    object-position: 45% bottom;   /* keeps the map of the image behind the title */
}

.herault-hero {
    position: relative;
    padding-bottom: var(--space-6);
    text-align: center;
}

.herault-hero .hero-home__inner {
    position: relative;
    display: block;
}

.herault-hero .hero-home__main {
    max-width: 48rem;
    margin-inline: auto;
}

.herault-hero__name {
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    font-weight: var(--weight-regular);
    letter-spacing: 0.55em;
    margin-right: -0.55em;   /* the last letter's spacing would shift the word to the left */
    color: color-mix(in srgb, var(--acephal-white) 72%, transparent);
}

.herault-hero .hero-home__eyebrow {
    margin-top: var(--space-4);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    color: var(--acephal-white);
}

.herault-hero .accent-rule {
    margin-inline: auto;
}

.herault-hero .hero-home__title {
    font-size: clamp(2rem, 7vw, 4.25rem);
    font-weight: var(--weight-bold);
}

.herault-hero .hero-home__lead {
    max-width: 40rem;
    margin-inline: auto;
    color: var(--acephal-white);
}

/* The photo is bright in places (lights of the coast, sunset): a soft shadow keeps the text legible. */
.herault-hero :is(.hero-home__title, .hero-home__lead, .herault-keys, .herault-strip) {
    text-shadow: 0 2px 14px rgba(7, 20, 41, 0.85);
}

.herault-keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--space-7);
    margin-top: var(--space-6);
    padding: 0;
    list-style: none;
}

.herault-keys a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
    color: var(--acephal-white);
}

.herault-keys .icon {
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0.8rem;
    border: 2px solid var(--eco-herault-red);
    border-radius: 50%;
    background: color-mix(in srgb, var(--acephal-night) 55%, transparent);
    color: var(--eco-herault-yellow);
}

/* Each key leads to its part of the offer: the circle fills in red on hover / focus. */
.herault-keys a {
    border-radius: 999px;
    text-decoration: none;
}

.herault-keys .icon {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.herault-keys a:hover .icon,
.herault-keys a:focus-visible .icon {
    background: var(--eco-herault-red);
    color: var(--acephal-white);
}

.herault-keys a:hover span,
.herault-keys a:focus-visible span {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.herault-keys a:focus-visible {
    outline: 3px solid var(--eco-herault-yellow);
    outline-offset: 4px;
}

.herault-hero .actions {
    justify-content: center;
    margin-top: var(--space-6);
}

/* Territories: one line under the buttons, separated by thin rules. */
.herault-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding-block: 0;
    list-style: none;
}

.herault-strip li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    font-size: 0.95rem;
    color: var(--acephal-white);
}

.herault-strip .icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--acephal-white);
}

@media (min-width: 900px) {
    .herault-hero .hero-home__inner {
        display: block;
    }

    .herault-hero .hero-home__lead {
        font-size: 1.2rem;
    }

    .herault-hero .actions .button {
        min-height: 3.5rem;
        padding-inline: var(--space-6);
        font-size: 1.1rem;
    }

    .herault-strip {
        grid-template-columns: repeat(4, auto);
        justify-content: center;
        gap: 0;
    }

    .herault-strip li {
        padding-inline: var(--space-7);
    }

    .herault-strip li + li {
        border-left: 1px solid color-mix(in srgb, var(--acephal-white) 35%, transparent);
    }
}

.herault-center {
    justify-content: center;
    margin-top: var(--space-7);
}

/* ---- Territory band (same line as the hero: coast photo, centred head, red circles) ---- */
.herault-territory {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-8);
    background: var(--acephal-night);
    color: var(--acephal-white);
    text-align: center;
}

.herault-territory__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 85%;   /* on narrow screens: the lit coast and the bay */
}

.herault-territory::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--acephal-night-deep) 78%, transparent), color-mix(in srgb, var(--acephal-night-deep) 55%, transparent));
}

.herault-territory__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    color: var(--acephal-white);
}

.herault-territory .accent-rule {
    margin: var(--space-4) auto var(--space-5);
}

.herault-territory__title {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    text-shadow: 0 2px 14px rgba(7, 20, 41, 0.85);
}

.herault-territory__title span {
    color: var(--eco-herault-yellow);
}

.herault-territory__text {
    max-width: 46rem;
    margin: var(--space-4) auto 0;
    font-size: 1.05rem;
    color: var(--acephal-white);
    text-shadow: 0 2px 14px rgba(7, 20, 41, 0.85);
}

.herault-territory__list {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-7);
    padding: 0;
    list-style: none;
}

.herault-territory__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--acephal-white) 18%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--acephal-night-deep) 62%, transparent);
    backdrop-filter: blur(6px);
}

/* Same red circle as the keys of the hero. */
.herault-territory__list .icon {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0.8rem;
    border: 2px solid var(--eco-herault-red);
    border-radius: 50%;
    background: color-mix(in srgb, var(--acephal-night) 55%, transparent);
    color: var(--eco-herault-yellow);
}

.herault-territory__list h3 {
    margin-top: var(--space-4);
    font-size: 1.1rem;
    font-weight: var(--weight-semibold);
}

.herault-territory__list p {
    margin-top: var(--space-2);
    font-size: 0.92rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--acephal-white) 82%, transparent);
}

/* Phones: compact rows, icon on the left. */
@media (max-width: 639px) {
    .herault-territory__list li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-4);
        align-items: start;
        padding: var(--space-4);
        text-align: left;
    }

    .herault-territory__list .icon {
        grid-row: span 2;
    }

    .herault-territory__list h3 {
        margin-top: 0;
    }
}

@media (min-width: 640px) {
    .herault-territory__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .herault-territory__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---- Four steps -------------------------------------------------------------- */
@media (min-width: 900px) {
    .steps.steps--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.steps--4 + .notice {
    margin-top: var(--space-6);
}

/* ---- Demonstration cards ------------------------------------------------------ */
.demo-cards {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding: 0;
    list-style: none;
}

.demo-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-card);
    background: var(--acephal-white);
    box-shadow: 0 18px 40px -30px rgba(11, 31, 59, 0.45);
}

.demo-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.demo-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5);
}

.demo-card__tag {
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--eco-herault-soft);
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eco-herault-red);
}

.demo-card__title {
    font-size: 1.15rem;
    font-weight: var(--weight-semibold);
    color: var(--acephal-night);
}

.demo-card__text {
    color: var(--acephal-text-muted);
}

.demo-card__link {
    margin-top: auto;
}

@media (min-width: 768px) {
    .demo-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- "The base site stays free" box ------------------------------------------- */
.free-box {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border: 2px solid color-mix(in srgb, var(--eco-herault-red) 70%, transparent);
    border-radius: var(--radius-card);
    background: var(--eco-herault-soft);
}

.free-box__icon .icon {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--eco-herault-red);
}

.free-box__title {
    font-size: clamp(1.25rem, 3.5vw, 1.6rem);
    font-weight: var(--weight-semibold);
    color: var(--eco-herault-red);
}

.free-box__list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: 0;
    list-style: none;
}

.free-box__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--acephal-anthracite);
}

.free-box__list .icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    color: var(--eco-herault-red);
}

.free-box__note {
    margin-top: var(--space-4);
    font-size: 0.9rem;
    color: var(--acephal-text-muted);
}

.free-box .card__link {
    margin-top: var(--space-4);
}

/* Not inside a .card: no stretched click area (site.css), or it would cover the whole page,
   header buttons included. */
.free-box .card__link::after {
    content: none;
}

@media (min-width: 768px) {
    .free-box {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        padding: var(--space-7);
    }
}

.free-box__visual {
    display: none;
    width: 100%;
    max-width: 20rem;
    height: auto;
}

.free-box__list strong {
    color: var(--acephal-night);
}

@media (min-width: 1024px) {
    .free-box--visual {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .free-box--visual .free-box__icon {
        align-self: start;
    }

    .free-box__visual {
        display: block;
    }
}

/* ---- Options ------------------------------------------------------------------ */
.options-grid {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding: 0;
    list-style: none;
}

.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-card);
    background: var(--acephal-white);
    text-align: center;
    box-shadow: 0 18px 40px -30px rgba(11, 31, 59, 0.45);
}

.option-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    background: var(--eco-herault-soft);
    color: var(--eco-herault-red);
}

.option-card__icon .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.option-card__title {
    font-size: 1.15rem;
    font-weight: var(--weight-bold);
    color: var(--acephal-night);
}

.option-card__text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--acephal-text-muted);
}

.option-card__price {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid #E2E8F0;
    font-size: 0.8rem;
    color: var(--acephal-text-muted);
}

.option-card__price strong {
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    letter-spacing: normal;
    font-size: 1.15rem;
    font-weight: var(--weight-bold);
    color: var(--acephal-night);
}

.option-card__price small {
    font-size: 0.85rem;
    font-weight: var(--weight-medium);
    color: var(--acephal-anthracite);
}

.option-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 12px;
}

/* Section head with the "at your own pace" box on the right (wide screens). */
.options-head {
    display: grid;
    gap: var(--space-5);
    align-items: end;
}

.options-head .section-head {
    margin-bottom: 0;
}

.options-aside {
    display: flex;
    gap: var(--space-3);
    max-width: 22rem;
    padding: var(--space-4);
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-card);
    background: var(--acephal-white);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--acephal-text-muted);
}

.options-aside .icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--acephal-night);
}

.options-aside strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    color: var(--acephal-night);
}

@media (min-width: 1024px) {
    .options-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Price notice: red rule on the left, soft red background. */
#options .notice {
    border-left-color: var(--eco-herault-red);
    background: var(--eco-herault-soft);
}

#options .notice > .icon {
    color: var(--eco-herault-red);
}

@media (min-width: 640px) {
    .options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .options-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- Request page (mockup "Demandez votre site gratuit", 2026-10-25) ------------------
   Page bar with a large title and an intro (page metadata "lead", this page only), a numbered
   progress line, numbered parts, fields with an icon, option tiles and a side column of cards. */
.page-hero:has(.page-hero__lead) {
    padding-bottom: var(--space-7);
}

.page-hero:has(.page-hero__lead) .page-hero__bar {
    display: block;
}

.page-hero:has(.page-hero__lead) .breadcrumb {
    margin-bottom: var(--space-4);
}

.page-hero:has(.page-hero__lead) .page-hero__title {
    font-size: clamp(1.75rem, 6vw, 3rem);
    font-weight: var(--weight-bold);
    line-height: 1.1;
}

.page-hero:has(.page-hero__lead) .page-hero__title::before {
    content: none;
}

.page-hero:has(.page-hero__lead) .page-hero__title span {
    color: var(--eco-herault-yellow);
}

.page-hero__lead {
    max-width: 36rem;
    margin-top: var(--space-4);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--acephal-white);
    text-shadow: 0 2px 12px rgba(7, 20, 41, 0.85);
}

/* Progress line: numbered circles joined by a thin rule; the part being read is red. */
.form-steps {
    display: flex;
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    counter-reset: form-step;
}

.form-steps li {
    position: relative;
    flex: 1;
    counter-increment: form-step;
    font-size: 0.7rem;
    font-weight: var(--weight-medium);
    line-height: 1.3;
    text-align: center;
    color: var(--acephal-text-muted);
}

.form-steps li + li::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    right: 50%;
    width: 100%;
    border-top: 1px solid #CBD5E1;
}

.form-steps li.is-done + li::before {
    border-top-color: var(--eco-herault-red);
}

.form-steps a {
    position: relative;
    z-index: 1;   /* circles above the rules drawn by the next step */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}

.form-steps a::before {
    content: counter(form-step);
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid #CBD5E1;
    border-radius: 50%;
    background: var(--surface-white);
    font-size: 0.8rem;
    font-weight: var(--weight-semibold);
    color: var(--acephal-text-muted);
}

.form-steps .is-done a::before {
    border-color: var(--eco-herault-red);
    color: var(--eco-herault-red);
}

.form-steps a[aria-current="step"] {
    font-weight: var(--weight-semibold);
    color: var(--eco-herault-red);
}

.form-steps a[aria-current="step"]::before {
    border-color: var(--eco-herault-red);
    background: var(--eco-herault-red);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--eco-herault-red) 18%, transparent);
    color: var(--acephal-white);
}

.form-steps a:hover::before,
.form-steps a:focus-visible::before {
    border-color: var(--eco-herault-red);
}

/* Phones: numbers only, the labels would not fit (they stay for screen readers). */
@media (max-width: 599.98px) {
    .form-steps a {
        font-size: 0;
    }

    .form-steps a::before {
        font-size: 0.8rem;
    }
}

fieldset.form-part,
.links-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

fieldset.form-part > legend,
.links-group > legend {
    padding: 0;
}

/* Floated legend: laid out like a heading (no gap under it, no break in the rule above). */
fieldset.form-part > legend {
    float: left;
    width: 100%;
}

fieldset.form-part > legend + * {
    clear: both;
}

.form-part + .form-part {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid #E2E8F0;
}

/* Part heading: red numbered circle and title, the intro under the title. */
.form-part__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.form-part__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--eco-herault-red);
    font-size: 0.9rem;
    font-weight: var(--weight-bold);
    color: var(--acephal-white);
}

.form-part__title {
    font-size: 1.2rem;
    font-weight: var(--weight-bold);
    color: var(--acephal-night);
}

.form-part__title .opt {
    font-size: 0.85rem;
    font-style: italic;
    font-weight: var(--weight-medium);
    color: var(--eco-herault-red);
}

.form-part__intro {
    margin: 0 0 var(--space-5) calc(2rem + var(--space-3));
    font-size: 0.85rem;
    color: var(--acephal-text-muted);
}

.form-grid {
    display: grid;
    gap: var(--space-4) var(--space-5);
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid .field--wide {
        grid-column: 1 / -1;
    }
}

/* Field with an icon on the left. */
.input-icon {
    position: relative;
}

.input-icon > .icon {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    width: 1.1rem;
    height: 1.1rem;
    color: #64748B;
    transform: translateY(-50%);
    pointer-events: none;
}

.field .input-icon input[type="text"],
.field .input-icon input[type="email"],
.field .input-icon select {
    padding-left: 2.6rem;
}

.field .field__count {
    text-align: right;
}

.links-group {
    margin-top: var(--space-5);
}

.links-group > legend {
    margin-bottom: var(--space-2);
    font-size: 0.85rem;
    font-weight: var(--weight-semibold);
    color: var(--text-strong);
}

.links-group .opt {
    font-weight: var(--weight-regular);
    color: var(--acephal-text-muted);
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (min-width: 900px) {
    .links-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Option tiles: checkbox, icon tile, name and one line, price to define. */
.option-choices {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .option-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.option-choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-card);
    background: var(--surface-white);
    box-shadow: 0 6px 18px -14px color-mix(in srgb, var(--acephal-night) 50%, transparent);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.option-choice:hover {
    border-color: color-mix(in srgb, var(--eco-herault-red) 45%, #E2E8F0);
}

.option-choice:has(input:checked) {
    border-color: var(--eco-herault-red);
    background: var(--eco-herault-soft);
}

.option-choice:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--eco-herault-red) 45%, transparent);
    outline-offset: 2px;
}

.option-choice input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--eco-herault-red);
}

.option-choice__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: var(--eco-herault-red);
    color: var(--acephal-white);
}

/* Red and night blue alternate across the two columns (checkerboard). */
.option-choice:nth-child(4n + 2) .option-choice__icon,
.option-choice:nth-child(4n + 3) .option-choice__icon {
    background: var(--acephal-night);
    color: var(--eco-herault-yellow);
}

.option-choice__icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.option-choice__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.option-choice__label {
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
    color: var(--acephal-night);
}

.option-choice__desc {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--acephal-text-muted);
}

.option-choice__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    font-weight: var(--weight-semibold);
    color: var(--acephal-night);
    flex: none;
    padding: 0.25rem 0.6rem;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.option-choice__price small {
    font-size: 0.65rem;
    font-weight: var(--weight-regular);
    color: var(--acephal-text-muted);
}

/* Phones: the price goes under the text; the part intros are not indented. */
@media (max-width: 599.98px) {
    .form-part__intro {
        margin-left: 0;
    }

    .option-choice {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: var(--space-1) var(--space-3);
    }

    .option-choice__price {
        grid-column: 3;
        justify-self: start;
    }
}

/* Submit: centred red button with an arrow, note with a lock. */
.form-submit {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
}

.form-submit .project-form__submit {
    width: 100%;
    max-width: 20rem;
    min-height: 3.25rem;
    border-radius: 999px;
    box-shadow: 0 12px 26px -14px var(--eco-herault-red);
}

.form-part .project-form__note {
    margin-top: var(--space-4);
    font-size: 0.78rem;
    text-align: center;
    color: var(--acephal-text-muted);
}

.project-form__note .icon {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -0.1rem;
}

/* ---- Five-step form (js/herault-form.js adds .is-stepped: one part shown at a time) ---- */
.form-progress {
    margin: calc(-1 * var(--space-3)) 0 var(--space-4);
    font-size: 0.85rem;
    font-weight: var(--weight-semibold);
    text-align: center;
    color: var(--eco-herault-red);
}

.form-progress:empty {
    display: none;
}

.project-form [data-step][hidden] {
    display: none !important;
}

.is-stepped .form-part + .form-part {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.is-stepped [data-step]:focus {
    outline: none;
}

.step-nav {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid #E2E8F0;
}

.step-nav[hidden],
.step-nav__prev[hidden] {
    display: none;
}

.step-nav .button,
.form-submit .step-nav__prev {
    min-height: 3rem;
    border-radius: 999px;
}

.step-nav__next {
    margin-left: auto;
}

.step-nav__prev .icon {
    transform: rotate(180deg);
}

@media (max-width: 599.98px) {
    .step-nav .button {
        flex: 1 1 100%;
    }
}

/* Last step: the summary, one block per step with its "Modifier" button. */
.form-summary {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.form-summary[hidden] {
    display: none;
}

.form-summary__part {
    padding: var(--space-4);
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-card);
    background: #F8FAFC;
}

.form-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.form-summary__head h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: var(--weight-bold);
    color: var(--acephal-night);
}

.form-summary__edit {
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: var(--weight-semibold);
    color: var(--eco-herault-red);
    text-decoration: underline;
    cursor: pointer;
}

.form-summary dl {
    display: grid;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font-size: 0.85rem;
}

.form-summary dt {
    color: var(--acephal-text-muted);
}

.form-summary dd {
    margin: 0 0 var(--space-2);
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--acephal-anthracite);
}

.form-summary dd.is-empty {
    font-style: italic;
    color: var(--acephal-text-muted);
}

@media (min-width: 640px) {
    .form-summary dl {
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    }

    .form-summary dd {
        margin-bottom: 0;
    }
}

/* Last step: "Retour" next to the submit button; sending state. */
.form-submit {
    flex-wrap: wrap-reverse;
    gap: var(--space-3);
}

.project-form__submit[aria-busy="true"] {
    opacity: 0.8;
    cursor: progress;
}

/* Side column: offer, next steps, examples, FAQ, no link with a public authority. */
.request-aside {
    display: grid;
    gap: var(--space-5);
}

.side-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-panel);
    background: var(--eco-herault-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--acephal-anthracite);
}

.side-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--eco-herault-red);
    stroke-width: 1.6;
}

.side-card__title {
    margin-bottom: var(--space-3);
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    color: var(--eco-herault-red);
}

.side-card__button {
    margin-top: var(--space-4);
    border-color: var(--eco-herault-red);
    border-radius: 999px;
    color: var(--eco-herault-red);
}

.side-card__button .icon {
    width: 1rem;
    height: 1rem;
}

.offer-checks {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
}

.offer-checks li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.offer-checks .icon {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    color: #15803D;
}

.side-card--dark {
    display: block;
    background: var(--acephal-night);
    color: var(--acephal-gray);
}

.side-card--dark .side-card__title {
    color: var(--acephal-white);
}

/* Next steps: icons in circles joined by a vertical rule. */
.next-steps {
    display: grid;
    gap: var(--space-5);
    padding: 0;
    list-style: none;
}

.next-steps li {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
}

.next-steps li + li::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 0.15rem);
    left: 1.25rem;
    height: calc(var(--space-5) - 0.3rem);
    border-left: 1px solid color-mix(in srgb, var(--acephal-white) 35%, transparent);
}

.next-steps__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--eco-herault-red);
    color: var(--acephal-white);
}

.next-steps li:last-child .next-steps__icon {
    background: var(--eco-herault-yellow);
    color: var(--acephal-night);
}

.next-steps__icon .icon {
    width: 1.2rem;
    height: 1.2rem;
}

.next-steps strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--acephal-white);
}

.side-card__thumbs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.side-card__thumbs img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--acephal-night) 70%, transparent);
}

/* Pale yellow: dark text only (yellow text on a light background would be unreadable). */
.side-card--faq {
    background: color-mix(in srgb, var(--eco-herault-yellow) 16%, var(--surface-white));
}

.side-card--faq .side-card__icon {
    color: #B45309;
}

.side-card--neutral {
    background: #EEF2F7;
}

.side-card--neutral .side-card__icon {
    color: var(--acephal-night);
}

.side-card--neutral .side-card__title {
    font-size: 1rem;
    color: var(--acephal-night);
}

.side-card--neutral p {
    font-size: 0.8rem;
    color: var(--acephal-text-muted);
}

/* Under the form: examples, FAQ and "no public authority", side by side on wide screens. */
.request-more {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

@media (min-width: 900px) {
    .request-more {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .request-more .side-card {
        align-content: start;
    }
}

/* Desktop: the form card rises over the page bar, as in the mockup. */
@media (min-width: 1024px) {
    .section--form .request-layout {
        grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
        gap: var(--space-6);
    }

    .section--form .form-card {
        position: relative;
        z-index: 1;
        margin-top: calc(-1 * var(--space-8));
    }
}

/* ---- Conditions (placeholder page) ------------------------------------------------ */
.tbd-block {
    padding: var(--space-5);
    border: 1px dashed var(--eco-herault-red);
    border-radius: var(--radius-card);
    background: var(--eco-herault-soft);
}

.tbd-block + .tbd-block {
    margin-top: var(--space-4);
}

/* ---- Conditions page: long legal text, one readable column ------------------------ */
.conditions-text {
    max-width: 48rem;
}

.conditions-text h3:not(:first-child) {
    margin-top: var(--space-8);
}

.conditions-text h4 {
    margin-top: var(--space-5);
    font-size: 1rem;
    color: var(--acephal-night);
}