/* ============================================================
   HERO 36 — LE DEVIS QUI SE REMPLIT
   Hero « scroll » (mécanique partagée : heros/main.css + main.js, hook
   data-hero-scroll). En haut, une frise de pastilles numérotées reliées
   par un fil qui se remplit ; l'étape courante pulse, les passées se
   cochent. À droite, une fiche projet en verre dépoli : un anneau qui monte
   jusqu'à 100 %, des lignes qui se cochent une à une. À la fin, la fiche
   est complète, la pastille « disponible » s'allume et le bouton devis
   respire.

   Tout texte est posé sur une image : blanc, contraste construit par le
   voile (§4.14) — la fiche porte son propre fond sombre.
   ============================================================ */

.hero-36 {
    --hero-36-gouttiere: clamp(1rem, 4vw, 3.5rem);
    --hero-36-fiche: clamp(18rem, 26vw, 22rem);
    /* Vert de disponibilité et de validation : couleur de SENS (« prêt »,
       « disponible »), pas de charte (§4.1). Posé sur le fond sombre de la
       fiche ou de la photo voilée, jamais sur --primary. */
    --hero-36-ok: #22c55e;

    background: var(--black);
    color: var(--white);
}

.hero-36__voile {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.35) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0, transparent 30%, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
}

/* ---- La frise ---------------------------------------------- */
.hero-36__frise {
    position: absolute;
    z-index: 3;
    top: calc(var(--header-height, 80px) + 1rem);
    left: var(--hero-36-gouttiere);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    pointer-events: none;
}

.hero-36__frise-liste {
    position: relative;
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le fil : gris derrière, blanc qui avance avec le défilement. */
.hero-36__frise-liste::before,
.hero-36__frise-liste::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.9rem;
    right: 0.9rem;
    height: 2px;
    transform-origin: left;
}

.hero-36__frise-liste::before {
    background: color-mix(in srgb, var(--white) 30%, transparent);
}

.hero-36__frise-liste::after {
    background: var(--white);
    transform: scaleX(var(--hero-scroll-avance, 0));
}

.hero-36__frise-pastille {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--black);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--white) 55%, transparent);
    color: var(--white);
    transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.hero-36__frise-numero {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.hero-36__frise-coche {
    position: absolute;
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: var(--black);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.45s ease 0.1s;
}

.hero-36__frise-pastille.is-actif {
    background: var(--white);
    transform: scale(1.15);
}

.hero-36__frise-pastille.is-actif .hero-36__frise-numero {
    color: var(--black);
}

/* Le « pulse » de l'étape en cours. */
.hero-36__frise-pastille.is-actif::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--white);
    animation: hero36Pulse 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

@keyframes hero36Pulse {
    from { transform: scale(1);   opacity: 0.9; }
    to   { transform: scale(2.1); opacity: 0; }
}

.hero-36__frise-pastille.est-vue {
    background: var(--white);
}

.hero-36__frise-pastille.est-vue .hero-36__frise-numero {
    opacity: 0;
}

.hero-36__frise-pastille.est-vue .hero-36__frise-coche {
    stroke-dashoffset: 0;
}

.hero-36__frise-libelles {
    display: grid;
    overflow: hidden;
}

.hero-36__frise-libelle {
    grid-area: 1 / 1;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(0.75rem);
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.hero-36__frise-libelle.is-actif {
    opacity: 1;
    transform: none;
}

/* ---- La fiche projet --------------------------------------- */
.hero-36__fiche {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: var(--hero-36-gouttiere);
    width: var(--hero-36-fiche);
    padding: 1.4rem 1.4rem 1.2rem;
    border-radius: 1.25rem;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 22%, transparent), 0 24px 60px rgba(0, 0, 0, 0.35);
    color: var(--white);
    transform: translateY(-45%);
    transition: box-shadow 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}

/* Complète : la fiche se pose et s'entoure de vert. */
.hero-36.est-fin .hero-36__fiche {
    box-shadow: inset 0 0 0 1.5px var(--hero-36-ok), 0 24px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(-50%);
}

.hero-36__fiche-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
}

.hero-36__fiche-titre {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.hero-36__fiche-titre .mcl-accent {
    color: var(--white);
    font-style: italic;
}

.hero-36__anneau {
    position: relative;
    flex-shrink: 0;
    width: 3.75rem;
    height: 3.75rem;
}

.hero-36__anneau-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hero-36__anneau-fond,
.hero-36__anneau-plein {
    fill: none;
    stroke-width: 5;
}

.hero-36__anneau-fond {
    stroke: color-mix(in srgb, var(--white) 18%, transparent);
}

.hero-36__anneau-plein {
    stroke: var(--white);
    stroke-linecap: round;
    stroke-dasharray: var(--hero-36-circonference, 163);
    stroke-dashoffset: calc(var(--hero-36-circonference, 163) * (1 - var(--hero-scroll-avance, 0)));
    transition: stroke 0.4s ease;
}

.hero-36.est-fin .hero-36__anneau-plein {
    stroke: var(--hero-36-ok);
}

.hero-36__anneau-valeur {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.hero-36__fiche-lignes {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.hero-36__ligne {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.6rem;
    color: color-mix(in srgb, var(--white) 55%, transparent);
    transition: background-color 0.35s ease, color 0.35s ease;
}

.hero-36__ligne-texte {
    overflow: hidden;
    color: inherit;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-36__ligne-texte .mcl-accent {
    color: inherit;
    font-style: normal;
}

.hero-36__ligne-case {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--white) 45%, transparent);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-36__ligne-case svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: var(--black);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.45s ease 0.15s;
}

/* En cours : la ligne s'éclaire, sa case pulse. */
.hero-36__ligne.is-actif {
    background: color-mix(in srgb, var(--white) 10%, transparent);
    color: var(--white);
}

.hero-36__ligne.is-actif .hero-36__ligne-case::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--white);
    animation: hero36Pulse 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

/* Cochée : déjà passée, ou la dernière quand la fiche est complète. */
.hero-36__ligne.est-vue,
.hero-36.est-fin .hero-36__ligne.is-actif {
    color: var(--white);
}

.hero-36__ligne.est-vue .hero-36__ligne-case,
.hero-36.est-fin .hero-36__ligne.is-actif .hero-36__ligne-case {
    background: var(--hero-36-ok);
    box-shadow: none;
}

.hero-36__ligne.est-vue .hero-36__ligne-case svg,
.hero-36.est-fin .hero-36__ligne.is-actif .hero-36__ligne-case svg {
    stroke-dashoffset: 0;
}

.hero-36.est-fin .hero-36__ligne.is-actif .hero-36__ligne-case::after {
    display: none;
}

.hero-36__fiche-pied {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.9rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
    color: color-mix(in srgb, var(--white) 70%, transparent);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.4s ease;
}

.hero-36__fiche-pied-texte {
    color: inherit;
}

.hero-36__fiche-dispo {
    position: relative;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--white) 40%, transparent);
    transition: background-color 0.4s ease;
}

.hero-36.est-fin .hero-36__fiche-pied {
    color: var(--white);
}

.hero-36.est-fin .hero-36__fiche-dispo {
    background: var(--hero-36-ok);
}

.hero-36.est-fin .hero-36__fiche-dispo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--hero-36-ok);
    animation: hero36Dispo 1.6s ease-out infinite;
}

@keyframes hero36Dispo {
    from { transform: scale(1);   opacity: 0.8; }
    to   { transform: scale(2.8); opacity: 0; }
}

/* ---- Les étapes -------------------------------------------- */
.hero-36__etapes {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    padding: calc(var(--header-height, 80px) + 5rem) var(--hero-36-gouttiere) clamp(4.5rem, 10vh, 6.5rem);
    pointer-events: none;
}

/* Entrée latérale : l'étape glisse depuis la gauche. */
.hero-36__etape {
    align-self: end;
    max-width: 40rem;
    transform: translateX(-2.5rem);
    transition: opacity 0.4s ease, transform 0.5s ease, visibility 0s linear 0.4s;
}

.hero-36__etape.is-actif {
    transform: none;
    pointer-events: auto;
    transition: opacity 0.6s ease 0.1s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, visibility 0s;
}

.hero-36__etape.est-vue {
    transform: translateX(2.5rem);
}

.hero-36__etape--ouverture {
    align-self: center;
    max-width: 46rem;
}

/* ---- Textes ------------------------------------------------ */
.hero-36__surtitre {
    margin: 0 0 1rem;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
}

.hero-36__titre,
.hero-36__titre:hover {
    margin: 0;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.hero-36__chapitre,
.hero-36__chapitre:hover {
    margin: 0;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4.2vw, 3.2rem);
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
}

/* L'accent ((…)) : souligné d'une coche de couleur d'action. Le trait est
   SOUS le texte, jamais derrière : le blanc reste lisible quelle que soit
   la charte. */
.hero-36__titre .mcl-accent,
.hero-36__chapitre .mcl-accent {
    color: var(--white);
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--white) 60%, transparent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.12em;
}

.hero-36__texte {
    margin: 1.1rem 0 0;
    max-width: 34rem;
    color: var(--white);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
}

/* ---- Indice ------------------------------------------------ */
.hero-36__indice {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin: clamp(2rem, 6vh, 3.5rem) 0 0;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    line-height: 1;
    text-transform: uppercase;
}

.hero-36__indice-texte {
    color: var(--white);
}

.hero-36__indice-trait {
    position: relative;
    width: 1px;
    height: 2.5rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--white) 30%, transparent);
}

.hero-36__indice-trait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--white);
    animation: hero36Indice 2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

@keyframes hero36Indice {
    from { transform: translateY(-100%); }
    to   { transform: translateY(100%); }
}

/* ---- Chiffres ---------------------------------------------- */
.hero-36__chiffres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.hero-36__chiffre {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border-radius: 0.9rem;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 20%, transparent);
    color: var(--white);
}

.hero-36__chiffre-valeur {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.hero-36__chiffre-libelle {
    color: color-mix(in srgb, var(--white) 82%, transparent);
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* ---- Conclusion -------------------------------------------- */
.hero-36__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.hero-36__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3.2rem;
    padding: 0.85rem 1.6rem;
    border: 0;
    border-radius: 0.8rem;
    background: none;
    color: inherit;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Le bouton devis « respire » : une lueur qui gonfle et retombe. */
.hero-36__btn--principal {
    background: var(--accent);
    color: var(--on-accent);
}

.hero-36__etape.is-actif .hero-36__btn--principal {
    animation: hero36Respire 2.4s ease-in-out 1s infinite;
}

@keyframes hero36Respire {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--white) 55%, transparent); transform: scale(1); }
    50%      { box-shadow: 0 0 0 0.6rem transparent; transform: scale(1.03); }
}

.hero-36__btn--principal:hover,
.hero-36__btn--principal:focus-visible {
    background: color-mix(in srgb, var(--accent) 86%, var(--black));
    color: var(--on-accent);
    animation: none;
}

.hero-36__btn--appel {
    background: var(--white);
    color: var(--black);
}

.hero-36__btn--appel:hover,
.hero-36__btn--appel:focus-visible {
    background: color-mix(in srgb, var(--white) 86%, var(--black));
    color: var(--black);
}

.hero-36__appel-icone {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--black);
}

.hero-36__appel-icone svg {
    width: 100%;
    height: 100%;
}

.hero-36__btn--secondaire {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 70%, transparent);
    color: var(--white);
}

.hero-36__btn--secondaire:hover,
.hero-36__btn--secondaire:focus-visible {
    background: color-mix(in srgb, var(--white) 15%, transparent);
    color: var(--white);
}

.hero-36__btn:focus-visible,
.hero-36__passer:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.hero-36__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.hero-36__point {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.3;
}

.hero-36__point-icone {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--white);
}

.hero-36__point-icone svg {
    width: 100%;
    height: 100%;
}

/* ---- Sortie ------------------------------------------------ */
.hero-36__passer {
    position: absolute;
    z-index: 5;
    right: var(--hero-36-gouttiere);
    bottom: clamp(1rem, 3vh, 1.75rem);
    padding: 0.4rem 0;
    border: 0;
    background: none;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.hero-36__passer:hover,
.hero-36__passer:focus-visible {
    color: var(--white);
    opacity: 1;
}

/* ---- État statique : sans JS, ou mouvement réduit ---------- */
.hero-36.is-statique .hero-36__etapes {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 10vh, 6rem);
    min-height: 100vh;
    min-height: 100svh;
    pointer-events: auto;
}

.hero-36.is-statique .hero-36__etape {
    align-self: stretch;
}

.hero-36.is-statique .hero-36__voile {
    background: rgba(0, 0, 0, 0.6);
}

/* ---- Responsive -------------------------------------------- */
@media (min-width: 1025px) {
    /* La fiche occupe la droite : le texte s'arrête avant elle. */
    .hero-36__etapes {
        padding-right: calc(var(--hero-36-fiche) + var(--hero-36-gouttiere) * 2);
    }

    .hero-36__chiffres {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hero-36__etape--chiffres {
        max-width: 52rem;
    }
}

@media (max-width: 1024px) {
    /* Pas la place d'une fiche à côté du texte : la frise porte la progression. */
    .hero-36__fiche {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-36__frise-liste {
        gap: 0.9rem;
    }

    .hero-36__frise-pastille {
        width: 1.5rem;
        height: 1.5rem;
    }

    .hero-36__frise-libelles {
        display: none;
    }

    .hero-36__btn {
        flex: 1 1 100%;
    }

    .hero-36__passer {
        left: var(--hero-36-gouttiere);
        right: auto;
    }
}

/* Accent du contrat ((…)) : la donnée du socle marque un mot, le composant
   décide de son rendu (sans cette règle il sort en texte nu). */
.hero-36__point .mcl-accent {
  color: inherit;
  font-weight: 700;
}

/* Enveloppe du texte : le parent est en flex ; sans elle, un accent ((…))
   deviendrait un élément flex (le gap remplacerait l'espace entre les mots). */
.hero-36__point-texte {
  color: inherit;
}