/* ==========================================================================
   Page /presentation : « de l'esquisse à la mise en ligne ».
   Feuille chargée uniquement sur cette page (CSS simple, hors Tailwind).
   Elle réutilise les jetons du site (--cream, --sand, --ink, --patina, --apricot, --ease…).

   Principe : sans la classe .promo-on (pas de JavaScript, ou mouvement réduit),
   la page est une page classique, complète et lisible. .promo-on active les
   scènes épinglées pilotées par le défilement (assets/presentation.js).
   ========================================================================== */

.promo-wrap {
    width: min(77rem, 100% - 3rem);
    margin-inline: auto;
}

.promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--patina-dark);
}

.promo-kicker::before {
    content: "";
    width: 2.25rem;
    height: 2px;
    background: currentColor;
}

.promo-kicker--light {
    color: var(--apricot);
}

main .promo-h2 {
    margin-top: 1.1rem;
    font-size: clamp(2.1rem, 1.3rem + 3vw, 3.9rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ink);
    text-wrap: balance;
}

.promo-h2 em {
    font-style: normal;
    color: var(--patina-dark);
}

main .promo-h2--light {
    color: var(--cream);
}

.promo-h2--light em {
    color: var(--apricot);
}

/* --- Boutons --- */
.promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform 0.35s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s;
    will-change: transform;
}

.promo-btn__icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    transition: transform 0.35s var(--ease);
}

.promo-btn:hover .promo-btn__icon {
    transform: translateX(4px);
}

.promo-btn--main {
    background: var(--patina-dark);
    color: #fff;
}

.promo-btn--main:hover {
    background: var(--green-deep);
}

.promo-btn--ghost {
    border-color: rgba(34, 48, 45, 0.35);
    color: var(--ink);
}

.promo-btn--ghost:hover {
    border-color: var(--ink);
}

.promo-btn--apricot {
    background: var(--apricot);
    color: var(--ink);
}

.promo-btn--apricot:hover {
    background: #f7c883;
}

.promo-btn--line {
    border-color: rgba(246, 239, 224, 0.4);
    color: var(--cream);
}

.promo-btn--line:hover {
    border-color: var(--cream);
}

.promo-btn--xl {
    padding: 1.2rem 2.1rem;
    font-size: 1.05rem;
}

.promo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.promo-actions--center {
    justify-content: center;
}


/* ==========================================================================
   Acte 1 : l'esquisse. Deux calques identiques, l'un en traits, l'autre fini.
   Le calque fini est découpé par un cercle (la « lentille ») qui suit le
   pointeur, puis s'ouvre en iris au défilement.
   ========================================================================== */
/* Le hero passe sous le menu fixe : on rattrape l'espace réservé par le header (h-24). */
.promo-hero {
    position: relative;
    margin-top: -6rem;
}

.promo-hero__pin {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.promo-layer {
    display: flex;
    align-items: center;
    min-height: inherit;
    padding: 7.5rem 0 5rem;
}

.promo-layer--wire {
    display: none;
    position: absolute;
    inset: 0;
    background-color: var(--cream);
    background-image:
        linear-gradient(rgba(34, 48, 45, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 48, 45, 0.07) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    background-position: center top;
    user-select: none;
}

.promo-layer--final {
    position: relative;
    background-color: var(--cream);
    background-image:
        linear-gradient(to top, var(--cream), rgba(246, 239, 224, 0) 22%),
        radial-gradient(60% 55% at 92% 8%, rgba(71, 152, 135, 0.24), transparent 70%),
        radial-gradient(50% 45% at 0% 100%, rgba(242, 185, 104, 0.3), transparent 70%);
}

.promo-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
}

.promo-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--patina-dark);
}

main .promo-name {
    margin-top: 1.2rem;
    font-size: clamp(5.4rem, 3.4rem + 11.8vw, 12.5rem);
    font-weight: 900;
    line-height: 0.84;
    letter-spacing: -0.055em;
    color: var(--ink);
}

.promo-name__line {
    display: block;
    overflow: hidden;
    padding: 0.06em 0.06em 0.12em 0;
    margin-bottom: -0.1em;
}

.promo-name__line > span {
    display: inline-block;
}

.promo-name__line--accent {
    color: var(--patina-dark);
}

.promo-tagline {
    margin-top: 1.8rem;
    max-width: 30rem;
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-soft);
}

.promo-tagline span {
    color: var(--ink);
    font-weight: 700;
    background: linear-gradient(var(--apricot), var(--apricot)) 0 92% / 100% 0.32em no-repeat;
}

.promo-hero .promo-actions {
    margin-top: 2.2rem;
}

/* Portrait */
.promo-portrait {
    position: relative;
    order: -1;
    width: 8.5rem;
    aspect-ratio: 1;
}

.promo-portrait__disc {
    position: absolute;
    inset: -9%;
    border-radius: 50%;
    background: var(--apricot);
    translate: 9% 7%;
}

.promo-portrait__frame {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 34% 66% 58% 42% / 44% 40% 60% 56%;
    background: var(--green-deep);
}

.promo-portrait__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-chip {
    display: none;
    position: absolute;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink);
}

.promo-chip i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #3fbf7f;
    box-shadow: 0 0 0 0 rgba(63, 191, 127, 0.5);
    animation: promo-pulse 2.2s infinite;
}

.promo-chip--a { left: -14%; bottom: 9%; }
.promo-chip--b { right: -6%; top: 7%; }

@keyframes promo-pulse {
    70%  { box-shadow: 0 0 0 0.55rem rgba(63, 191, 127, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 191, 127, 0); }
}

.promo-lens,
.promo-scroll,
.promo-note {
    display: none;
}

@media (min-width: 1024px) {
    .promo-hero__grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        gap: 3rem;
    }

    .promo-portrait {
        order: 0;
        justify-self: end;
        width: min(100%, 25rem);
        margin-right: 4%;
    }

    .promo-chip {
        display: inline-flex;
    }
}

/* --- Le calque esquisse : tout est en traits --- */
.promo-layer--wire .promo-eyebrow {
    color: rgba(34, 48, 45, 0.55);
}

.promo-layer--wire .promo-name,
.promo-layer--wire .promo-name__line--accent {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(34, 48, 45, 0.55);
}

.promo-layer--wire .promo-tagline,
.promo-layer--wire .promo-tagline span {
    color: transparent;
    font-weight: 500;
    background: repeating-linear-gradient(to bottom,
        transparent 0 0.42em, rgba(34, 48, 45, 0.14) 0.42em 1.08em, transparent 1.08em 1.5em);
}

.promo-layer--wire .promo-tagline span {
    background: none;
}

.promo-layer--wire .promo-btn {
    background: transparent;
    border: 1.5px dashed rgba(34, 48, 45, 0.45);
    color: rgba(34, 48, 45, 0.55);
}

.promo-layer--wire .promo-btn__icon {
    border: 1.5px dashed rgba(34, 48, 45, 0.45);
    border-radius: 50%;
}

.promo-layer--wire .promo-portrait__disc {
    background: transparent;
    border: 1.5px dashed rgba(34, 48, 45, 0.3);
}

.promo-layer--wire .promo-portrait__frame {
    border: 1.5px dashed rgba(34, 48, 45, 0.5);
    background:
        linear-gradient(to top right, transparent calc(50% - 0.75px), rgba(34, 48, 45, 0.28) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
        linear-gradient(to bottom right, transparent calc(50% - 0.75px), rgba(34, 48, 45, 0.28) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

.promo-layer--wire .promo-chip {
    background: transparent;
    border: 1.5px dashed rgba(34, 48, 45, 0.4);
    color: transparent;
}

.promo-layer--wire .promo-chip i {
    background: transparent;
    border: 1.5px dashed rgba(34, 48, 45, 0.5);
    animation: none;
}

.promo-note {
    position: absolute;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    background: rgba(50, 111, 100, 0.1);
    font: 600 0.7rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    color: var(--patina-dark);
}

.promo-note--tl  { left: max(1.5rem, 50% - 38.5rem); top: 7.9rem; }
.promo-note--h1  { left: max(1.5rem, 50% - 38.5rem); bottom: 2.6rem; }
.promo-note--img { right: max(1.5rem, 50% - 38.5rem); top: 7.9rem; }
.promo-note--cta { left: calc(max(1.5rem, 50% - 38.5rem) + 12rem); bottom: 2.6rem; }

/* --- Scènes actives --- */
.promo-on .promo-hero {
    height: 230vh;
}

.promo-on .promo-hero__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 0;
}

.promo-on .promo-layer {
    position: absolute;
    inset: 0;
    min-height: 0;
}

.promo-on .promo-layer--wire {
    display: flex;
}

.promo-on .promo-layer--final {
    clip-path: circle(var(--r, 150vmax) at var(--lx, 70%) var(--ly, 45%));
    will-change: clip-path;
}

.promo-on .promo-lens {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--r, 0px) * 2);
    height: calc(var(--r, 0px) * 2);
    border-radius: 50%;
    border: 2px solid var(--apricot);
    box-shadow: 0 0 0 1px rgba(34, 48, 45, 0.12), 0 18px 40px -22px rgba(34, 48, 45, 0.55);
    transform: translate3d(calc(var(--lx, 0px) - var(--r, 0px)), calc(var(--ly, 0px) - var(--r, 0px)), 0);
    opacity: var(--lo, 0);
    pointer-events: none;
}

.promo-lens span {
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -50%;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--apricot);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
}

.promo-on .promo-note {
    display: block;
}

.promo-on .promo-scroll {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    translate: -50% 0;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 1rem 0.5rem 0.6rem;
    border-radius: 999px;
    background: var(--green-deep);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cream);
    opacity: var(--lo, 0);
    pointer-events: none;
}

.promo-scroll__mouse {
    position: relative;
    width: 1rem;
    height: 1.55rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
}

.promo-scroll__mouse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.28rem;
    width: 2px;
    height: 0.35rem;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--apricot);
    animation: promo-wheel 1.6s var(--ease) infinite;
}

@keyframes promo-wheel {
    0%   { transform: translateY(0); opacity: 1; }
    80%  { transform: translateY(0.5rem); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* Entrée : le nom monte ligne par ligne */
.promo-on .promo-name__line > span {
    animation: promo-rise 1.1s var(--ease) both;
    animation-delay: calc(var(--i) * 110ms + 80ms);
}

.promo-on .promo-eyebrow,
.promo-on .promo-tagline,
.promo-on .promo-hero .promo-actions,
.promo-on .promo-portrait {
    animation: promo-fade 0.9s var(--ease) 0.35s both;
}

@keyframes promo-rise {
    from { transform: translateY(108%) rotate(4deg); }
    to   { transform: none; }
}

@keyframes promo-fade {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
    .promo-note--img,
    .promo-note--cta,
    .promo-note--h1 {
        display: none !important;
    }

    .promo-note--tl {
        left: auto;
        right: 1.5rem;
        top: 6.6rem;
    }

    .promo-layer {
        padding-top: 6.5rem;
    }
}


/* ==========================================================================
   Acte 2 : le manifeste (le texte se « décode » en entrant à l'écran)
   ========================================================================== */
.promo-manifesto {
    padding: clamp(5rem, 12vw, 10rem) 0;
    background: var(--cream);
}

main .promo-manifesto__text {
    margin-top: 1.6rem;
    max-width: 62rem;
    font-size: clamp(1.9rem, 1rem + 3.4vw, 3.9rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.032em;
    color: var(--ink);
}

.promo-manifesto__text em {
    font-style: normal;
    color: var(--patina-dark);
}

.promo-manifesto__text .promo-word {
    display: inline-block;
    white-space: pre;
    transition: opacity 0.5s;
}

.promo-manifesto__text .promo-word.is-raw {
    opacity: 0.22;
}

.promo-manifesto__text .promo-word.is-busy {
    opacity: 0.6;
    font-feature-settings: "tnum";
}

.promo-manifesto__sub {
    margin-top: 2.2rem;
    max-width: 38rem;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink-soft);
}


/* ==========================================================================
   Acte 3 : la méthode. Un seul navigateur, quatre états.
   L'état par défaut du HTML (data-step="3") est l'état final.
   ========================================================================== */
.promo-method {
    position: relative;
    background: var(--sand);
}

.promo-method__pin {
    display: flex;
    align-items: center;
    padding: clamp(4rem, 9vw, 7rem) 0;
}

.promo-method__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
}

.promo-steps {
    position: relative;
    margin-top: 2.2rem;
    display: grid;
    gap: 0.4rem;
}

.promo-step {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    align-items: start;
    padding: 0.9rem 0;
    border-top: 1px solid var(--line);
    transition: opacity 0.4s;
}

.promo-step__num {
    padding-top: 0.2rem;
    font: 700 0.8rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--patina-dark);
}

.promo-step h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.promo-step__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.55s var(--ease), opacity 0.4s;
}

.promo-step__body p {
    overflow: hidden;
    max-width: 30rem;
    padding-top: 0.45rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* La scène */
.promo-stage {
    position: relative;
    order: -1;
}

.promo-stage__sun {
    position: absolute;
    right: -4%;
    top: -9%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--apricot);
    transition: transform 1.1s var(--ease), opacity 0.6s;
}

.promo-browser {
    position: relative;
    overflow: hidden;
    border-radius: 1.4rem;
    border: 1px solid rgba(34, 48, 45, 0.16);
    background: var(--card);
    box-shadow: 0 30px 60px -38px rgba(34, 48, 45, 0.6);
    transition: transform 0.9s var(--ease);
}

.promo-browser__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
    background: rgba(236, 225, 203, 0.55);
}

.promo-browser__bar > i {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: rgba(34, 48, 45, 0.18);
}

.promo-url {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
    height: 1.7rem;
    margin-left: 0.5rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    background: var(--cream);
    font: 600 0.72rem/1.7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--ink-soft);
    overflow: hidden;
}

.promo-url__lock {
    flex: none;
    color: var(--patina-dark);
    transition: opacity 0.4s, transform 0.5s var(--ease);
}

.promo-url__roll,
.promo-stage__tag {
    display: grid;
    height: 1.7rem;
    overflow: hidden;
}

.promo-url__roll span,
.promo-stage__tag span {
    height: 1.7rem;
    white-space: nowrap;
    transform: translateY(calc(var(--step, 3) * -100%));
    transition: transform 0.7s var(--ease);
}

.promo-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--green-deep);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cream);
    transition: opacity 0.4s, transform 0.6s var(--ease);
}

.promo-live b {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #5fe0a0;
    animation: promo-pulse 2.2s infinite;
}

.promo-browser__view {
    position: relative;
    aspect-ratio: 16 / 10.5;
}

.promo-chat,
.promo-site {
    position: absolute;
    inset: 0;
    transition: opacity 0.5s;
}

/* Conversation */
.promo-chat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: 6%;
    opacity: 0;
}

.promo-bubble {
    max-width: 78%;
    padding: 0.7em 1.05em;
    border-radius: 1.2em;
    font-size: clamp(0.72rem, 0.5rem + 0.75vw, 1rem);
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(14px) scale(0.94);
    transition: opacity 0.3s, transform 0.3s;
}

.promo-bubble--them {
    align-self: flex-start;
    border-bottom-left-radius: 0.3em;
    background: var(--sand);
    color: var(--ink);
    transform-origin: 0 100%;
}

.promo-bubble--me {
    align-self: flex-end;
    border-bottom-right-radius: 0.3em;
    background: var(--patina-dark);
    color: #fff;
    transform-origin: 100% 100%;
}

.promo-method[data-step="0"] .promo-chat {
    opacity: 1;
}

.promo-method[data-step="0"] .promo-bubble {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s, transform 0.7s var(--ease);
    transition-delay: calc(var(--i) * 380ms + 150ms);
}

/* Le site miniature : chaque bloc est d'abord un trait, puis se remplit */
.promo-site {
    display: flex;
    flex-direction: column;
    gap: 5%;
    padding: 4.5% 5.5% 5.5%;
}

.promo-method[data-step="0"] .promo-site {
    opacity: 0;
}

.blk {
    position: relative;
    display: block;
    border-radius: 0.45rem;
    outline: 1.5px dashed rgba(34, 48, 45, 0.42);
    outline-offset: -1.5px;
    transition: opacity 0.45s, transform 0.7s var(--ease), outline-color 0.5s;
    transition-delay: calc(var(--i) * 45ms);
}

.blk::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--fill, rgba(34, 48, 45, 0.16));
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.8s var(--ease);
    transition-delay: calc(var(--i) * 70ms + 100ms);
}

.promo-method[data-step="0"] .blk {
    opacity: 0;
    transform: scale(0.82);
    transition-delay: 0s;
}

.promo-method:is([data-step="0"], [data-step="1"]) .blk::before {
    clip-path: inset(0 100% 0 0);
    transition-delay: 0s;
}

.promo-method:is([data-step="2"], [data-step="3"]) .blk {
    outline-color: transparent;
}

.promo-site__nav {
    display: flex;
    align-items: center;
    gap: 3%;
    height: 8%;
}

.blk--dot   { height: 100%; aspect-ratio: 1; border-radius: 50%; --fill: var(--patina-dark); }
.blk--line  { width: 9%; height: 34%; border-radius: 99px; }
.blk--dot + .blk--line { margin-left: auto; }
.blk--pill  { width: 15%; height: 86%; border-radius: 99px; --fill: var(--apricot); }

.promo-site__hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 6%;
    flex: 1;
    min-height: 0;
}

.promo-site__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7%;
}

.blk--title { height: 15%; width: 100%; --fill: var(--ink); }
.blk--text  { height: 5.5%; width: 92%; border-radius: 99px; }
.blk--short { width: 62%; }
.blk--cta   { height: 15%; width: 44%; margin-top: 3%; border-radius: 99px; --fill: var(--patina-dark); }

.blk--img {
    border-radius: 1rem;
    --fill:
        radial-gradient(circle at 70% 32%, var(--apricot) 0 21%, transparent 21.5%),
        linear-gradient(160deg, #5ba695, var(--green-deep));
}

.promo-site__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5%;
    height: 21%;
}

.blk--card { border-radius: 0.7rem; --fill: var(--sand); }
.blk--card:nth-child(2) { --fill: rgba(71, 152, 135, 0.3); }

/* Le trait de construction qui balaie l'écran pendant le développement */
.promo-scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--apricot);
    box-shadow: 0 0 0 1px rgba(242, 185, 104, 0.25), -18px 0 28px 6px rgba(242, 185, 104, 0.28);
    opacity: 0;
}

.promo-on .promo-method[data-step="2"] .promo-scan {
    animation: promo-scan 1.5s var(--ease) both;
}

@keyframes promo-scan {
    0%   { left: 0; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* États de la barre d'adresse et de la scène */
.promo-method:not([data-step="3"]) .promo-live {
    opacity: 0;
    transform: scale(0.5);
}

.promo-method:not([data-step="3"]) .promo-url__lock {
    opacity: 0;
    transform: translateY(8px);
}

.promo-method:not([data-step="3"]) .promo-stage__sun {
    opacity: 0;
    transform: translate(-45%, 55%) scale(0.5);
}

.promo-stage__tag {
    position: absolute;
    left: 1.2rem;
    bottom: -0.9rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--green-deep);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.7rem;
    color: var(--cream);
}

@media (min-width: 1024px) {
    .promo-method__grid {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: 4.5rem;
    }

    .promo-stage {
        order: 0;
    }
}

/* Scène épinglée */
.promo-on .promo-method {
    height: 420vh;
}

.promo-on .promo-method__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: 6rem 0 2rem;
    overflow: hidden;
}

/* 0.72 et non 0.5 : les étapes en attente doivent rester lisibles (contraste AA) */
.promo-on .promo-step:not(.is-active) {
    opacity: 0.72;
}

.promo-on .promo-step:not(.is-active) .promo-step__num {
    color: var(--ink);
}

.promo-on .promo-step:not(.is-active) .promo-step__body {
    grid-template-rows: 0fr;
    opacity: 0;
}

@media (max-width: 1023px) {
    .promo-on .promo-method__pin {
        align-items: flex-start;
        padding-top: 5.8rem;
    }

    .promo-on .promo-method__grid {
        gap: 1.6rem;
    }

    .promo-on .promo-method .promo-h2 {
        display: none;
    }

    .promo-on .promo-method .promo-kicker {
        display: none;
    }

    .promo-on .promo-steps {
        margin-top: 0.8rem;
    }

    .promo-on .promo-step:not(.is-active) .promo-step__body p {
        padding-top: 0;
    }

    .promo-on .promo-step {
        padding: 0.55rem 0;
    }
}


/* ==========================================================================
   Acte 4 : les réalisations. Bande horizontale : défilement natif par défaut,
   pilotée par le défilement vertical sur grand écran (.is-pinned).
   ========================================================================== */
.promo-works {
    position: relative;
    z-index: 1;
    margin-top: -2.5rem;
    border-radius: 2.5rem 2.5rem 0 0;
    background-color: var(--green-deep);
    background-image: radial-gradient(70% 60% at 0% 0%, rgba(71, 152, 135, 0.32), transparent 65%);
    color: var(--cream);
}

.promo-works__pin {
    position: relative;
    padding: clamp(4rem, 8vw, 6rem) 0;
}

.promo-works__track {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4.5rem);
    padding-inline: max(1.5rem, 50vw - 38.5rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.promo-works__track::-webkit-scrollbar {
    display: none;
}

.promo-works__intro,
.promo-works__outro,
.promo-work {
    flex: none;
    scroll-snap-align: center;
}

.promo-works__intro {
    width: min(30rem, 82vw);
}

.promo-works__intro > p:not(.promo-kicker) {
    margin-top: 1.4rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(246, 239, 224, 0.78);
}

.promo-works__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--apricot);
}

.promo-works__hint svg {
    animation: promo-nudge 1.6s var(--ease) infinite;
}

@keyframes promo-nudge {
    50% { transform: translateX(6px); }
}

.promo-work {
    display: flex;
    flex-direction: column;
    width: min(27rem, 78vw);
    color: var(--cream);
    transform: translateY(calc(var(--k, 0) * var(--k, 0) * 2.2rem)) rotate(calc(var(--k, 0) * 2.4deg));
}

.promo-work__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 1.6rem;
    background: rgba(246, 239, 224, 0.08);
}

.promo-work__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.16) translateX(calc(var(--k, 0) * -6%));
    transition: scale 0.9s var(--ease);
}

.promo-work:hover .promo-work__media img,
.promo-work:focus-visible .promo-work__media img {
    scale: 1.05;
}

.promo-work__num {
    margin-top: 1.3rem;
    font: 600 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--apricot);
}

.promo-work__title {
    margin-top: 0.5rem;
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.promo-work__text {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(246, 239, 224, 0.75);
}

.promo-work__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cream);
}

.promo-work__more svg {
    transition: transform 0.35s var(--ease);
}

.promo-work:hover .promo-work__more svg {
    transform: translateX(5px);
}

.promo-works__outro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    width: min(26rem, 82vw);
}

.promo-works__outro p {
    font-size: clamp(2.4rem, 1.5rem + 3vw, 4.2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.promo-works__bar {
    display: none;
}

.promo-works.is-pinned .promo-works__pin {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100svh;
    padding: 5rem 0 0;
    overflow: hidden;
}

.promo-works.is-pinned .promo-works__track {
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
}

.promo-works.is-pinned .promo-works__bar {
    display: block;
    position: absolute;
    left: max(1.5rem, 50vw - 38.5rem);
    right: max(1.5rem, 50vw - 38.5rem);
    bottom: 2.2rem;
    height: 2px;
    background: rgba(246, 239, 224, 0.16);
}

.promo-works__bar i {
    display: block;
    height: 100%;
    background: var(--apricot);
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
}


/* ==========================================================================
   Acte 5 : les avis. Une citation à la fois, les mots montent un par un.
   ========================================================================== */
.promo-reviews {
    padding: clamp(5rem, 11vw, 9rem) 0;
    background: var(--cream);
}

.promo-reviews__stage {
    position: relative;
    margin-top: 3rem;
}

.promo-reviews__mark {
    display: block;
    width: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    margin: 0 0 0.6rem -0.35rem;
    color: var(--apricot);
}

.promo-reviews__mark svg {
    display: block;
    width: 100%;
    height: auto;
}

.promo-reviews__quotes {
    display: grid;
    gap: 2.5rem;
}

.promo-quote blockquote {
    max-width: 58rem;
    font-size: clamp(1.45rem, 1rem + 2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.promo-quote figcaption {
    margin-top: 1.4rem;
    font-size: 0.98rem;
    color: var(--ink-soft);
}

.promo-quote figcaption b {
    color: var(--ink);
}

.promo-reviews__tabs {
    display: none;
}

.promo-on .promo-reviews__quotes {
    gap: 0;
}

.promo-on .promo-quote {
    grid-area: 1 / 1;
    visibility: hidden;
    transition: visibility 0s 0.35s;
}

.promo-on .promo-quote.is-active {
    visibility: visible;
    transition-delay: 0s;
}

.promo-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
    white-space: pre;
}

.promo-w > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.35s ease-in;
}

.promo-quote.is-active .promo-w > span {
    transform: none;
    transition: transform 0.8s var(--ease);
    transition-delay: calc(var(--i) * 22ms + 200ms);
}

.promo-on .promo-quote figcaption {
    opacity: 0;
    transition: opacity 0.3s;
}

.promo-on .promo-quote.is-active figcaption {
    opacity: 1;
    transition: opacity 0.6s 0.7s;
}

.promo-on .promo-reviews__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 2.6rem;
}

.promo-tab {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--card);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-soft);
    transition: background-color 0.3s, color 0.3s, transform 0.35s var(--ease);
}

.promo-tab:hover {
    transform: translateY(-2px);
    color: var(--ink);
}

.promo-tab.is-active {
    background: var(--green-deep);
    color: var(--cream);
}

.promo-tab svg {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    transform: rotate(-90deg);
    fill: none;
    stroke: var(--apricot);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 138.3;
    stroke-dashoffset: 138.3;
}

.promo-reviews.is-playing .promo-tab.is-active svg {
    animation: promo-ring 7s linear forwards;
}

.promo-reviews.is-playing:is(:hover, :focus-within) .promo-tab.is-active svg {
    animation-play-state: paused;
}

@keyframes promo-ring {
    to { stroke-dashoffset: 0; }
}


/* ==========================================================================
   Acte 6 : les repères (chiffres en compteur à rouleaux)
   ========================================================================== */
.promo-facts {
    padding: 0 0 clamp(3.5rem, 7vw, 5.5rem);
    background: var(--cream);
}

.promo-facts__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
}

.promo-fact {
    padding-top: 1.4rem;
    border-top: 2px solid var(--ink);
}

.promo-fact__value {
    font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
    white-space: nowrap;
    color: var(--ink);
}

.promo-fact__label {
    margin-top: 0.8rem;
    max-width: 16rem;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.promo-fact__label a {
    font-weight: 700;
    color: var(--patina-dark);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.promo-odo {
    display: inline-flex;
    height: 1em;
    overflow: hidden;
    vertical-align: bottom;
}

.promo-odo__col {
    display: flex;
    flex-direction: column;
    transition: transform 1.6s var(--ease);
    transition-delay: calc(var(--i) * 90ms);
}

.promo-odo__col span {
    height: 1em;
}

.promo-fact.is-in .promo-odo__col {
    transform: translateY(calc(var(--d) * -1em));
}

.promo-on .promo-fact {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s, transform 0.9s var(--ease);
    transition-delay: calc(var(--n, 0) * 90ms);
}

.promo-on .promo-fact.is-in {
    opacity: 1;
    transform: none;
}

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


/* ==========================================================================
   Acte 7 : l'appel à l'action. L'iris du début se rouvre, en vert profond.
   ========================================================================== */
.promo-final {
    position: relative;
    background: var(--cream);
}

.promo-final__iris {
    display: grid;
    place-items: center;
    min-height: 80vh;
    padding: 6rem 1.5rem;
    background-color: var(--green-deep);
    background-image: radial-gradient(48% 46% at 50% 52%, rgba(71, 152, 135, 0.34), transparent 100%);
    color: var(--cream);
    text-align: center;
}

.promo-final__inner {
    max-width: 56rem;
}

main .promo-final__title {
    margin-top: 1.4rem;
    font-size: clamp(3rem, 1.2rem + 9vw, 8.5rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.05em;
    color: var(--cream);
}

.promo-final__title em {
    font-style: normal;
    color: var(--apricot);
}

.promo-up {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.promo-up > span {
    display: inline-block;
}

.promo-final__text {
    max-width: 34rem;
    margin: 1.8rem auto 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(246, 239, 224, 0.8);
}

.promo-final .promo-actions {
    margin-top: 2.4rem;
}

.promo-final__note {
    margin-top: 1.6rem;
    font-size: 0.85rem;
    color: rgba(246, 239, 224, 0.72);
}

.promo-on .promo-final {
    height: 190vh;
}

.promo-on .promo-final__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.promo-on .promo-final__iris {
    position: absolute;
    inset: 0;
    min-height: 0;
    clip-path: circle(var(--fr, 150vmax) at 50% 58%);
    will-change: clip-path;
}

.promo-on .promo-final .promo-up > span {
    transform: translateY(110%) rotate(5deg);
    transition: transform 0.4s ease-in;
}

.promo-on .promo-final.is-in .promo-up > span {
    transform: none;
    transition: transform 1s var(--ease);
    transition-delay: calc(var(--i) * 90ms);
}

.promo-on .promo-final :is(.promo-kicker, .promo-final__text, .promo-actions, .promo-final__note) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.4s, transform 0.4s;
}

.promo-on .promo-final.is-in :is(.promo-kicker, .promo-final__text, .promo-actions, .promo-final__note) {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s 0.35s, transform 1s var(--ease) 0.35s;
}

/* Le pied de page prolonge le vert de la scène finale : pas de liseré ni d'animation d'entrée */
.promo-final ~ * .site-footer,
main:has(.promo-final) + .site-footer {
    border-top-color: transparent;
}


/* ==========================================================================
   Accueil : le hero existe en deux calques (templates/_partials/header_home.html.twig).
   Au chargement, le rendu final n'est visible que dans une lentille posée sur la photo,
   puis l'iris s'ouvre tout seul : l'accroche est lisible sans avoir à défiler.
   Une fois ouvert, survoler la photo montre la maquette sous le design (.is-xray).
   Sans .promo-on, seul le rendu final existe : l'accueil est inchangé.
   ========================================================================== */
.hero-scene {
    position: relative;
    --hx: 68%;
    --hy: 15.5rem;
    --hr: 6.5rem;
}

.hero-wire,
.hero-xray {
    display: none;
}

/* z-index explicites : les cartes de verre (z-index 5) de l'esquisse ne doivent jamais passer devant le rendu final */
.promo-on .hero-wire {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background-color: var(--cream);
    background-image:
        linear-gradient(rgba(34, 48, 45, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 48, 45, 0.07) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    background-position: center top;
}

.promo-on .hero-final {
    position: relative;
    z-index: 1;
    animation: hero-iris 1.7s cubic-bezier(0.7, 0, 0.3, 1) 1.15s both;
}

.promo-on .hero-final.is-open {
    animation: none;
}

@keyframes hero-iris {
    from { clip-path: circle(var(--hr) at var(--hx) var(--hy)); }
    to   { clip-path: circle(150vmax at var(--hx) var(--hy)); }
}

.hero-xray span {
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -50%;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--apricot);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
}

/* --- L'esquisse : mêmes éléments, en traits --- */
.hero-wire :is(.hw > span, .hero-rise, .hero-stage, .glass-card) {
    animation: none;
}

.hero-wire .hero-eyebrow {
    color: rgba(34, 48, 45, 0.55);
}

.hero-wire .hero-eyebrow::before {
    background: rgba(34, 48, 45, 0.4);
}

.hero-wire .hero-title,
.hero-wire .hero-title em {
    color: transparent;
    background-image: none;
    -webkit-text-stroke: 1.5px rgba(34, 48, 45, 0.55);
}

/* L'accroche reste du vrai texte, en gris de maquette : lisible dès la première image (et comptée comme
   plus grand élément affiché, à la place du bandeau cookies qui arrive 3 s plus tard) */
.hero-wire p {
    color: rgba(34, 48, 45, 0.5);
}

.hero-wire .hero-btn--main {
    background: transparent;
    box-shadow: none;
    outline: 1.5px dashed rgba(34, 48, 45, 0.45);
    outline-offset: -1.5px;
    color: rgba(34, 48, 45, 0.55);
}

.hero-wire .hero-link {
    background-image: none;
    border-bottom: 1.5px dashed rgba(34, 48, 45, 0.45);
    color: rgba(34, 48, 45, 0.55);
}

.hero-wire .hero-points li {
    color: transparent;
    border-radius: 4px;
    background: linear-gradient(rgba(34, 48, 45, 0.14), rgba(34, 48, 45, 0.14)) 1.75rem 50% / calc(100% - 1.75rem) 0.8rem no-repeat;
}

.hero-wire .hero-points span {
    text-decoration: none;
}

.hero-wire .hero-points svg {
    color: rgba(34, 48, 45, 0.4);
}

.hero-wire .hero-stage {
    background: none;
    box-shadow: none;
    outline: 1.5px dashed rgba(34, 48, 45, 0.5);
    outline-offset: -1.5px;
}

.hero-wire__photo {
    aspect-ratio: 512 / 683;
    border-radius: 0 0 2.75rem 2.75rem;
    background:
        linear-gradient(to top right, transparent calc(50% - 0.75px), rgba(34, 48, 45, 0.25) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
        linear-gradient(to bottom right, transparent calc(50% - 0.75px), rgba(34, 48, 45, 0.25) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

.hero-wire .glass-card {
    background: var(--cream);
    border: 1.5px dashed rgba(34, 48, 45, 0.45);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: transparent;
}

.hero-wire .glass-card__icon {
    background: transparent;
    border: 1.5px dashed rgba(34, 48, 45, 0.45);
    color: transparent;
}

.hero-wire .glass-card b,
.hero-wire .glass-card div > span {
    width: fit-content;
    border-radius: 3px;
    background: rgba(34, 48, 45, 0.14);
    color: transparent;
    line-height: 1;
}

.hero-wire .glass-card div > span {
    margin-top: 0.4rem;
}

.promo-on .hero-note--a { right: 1.5rem; top: 6.6rem; }
.hero-note--b { display: none !important; }

/* --- La lentille « maquette », au survol de la photo --- */
.hero-final.is-xray {
    -webkit-mask-image: radial-gradient(circle var(--xr, 0px) at var(--xx, 50%) var(--xy, 50%), transparent calc(100% - 1.5px), #000 100%);
    mask-image: radial-gradient(circle var(--xr, 0px) at var(--xx, 50%) var(--xy, 50%), transparent calc(100% - 1.5px), #000 100%);
}

.promo-on .hero-xray {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--xr, 0px) * 2);
    height: calc(var(--xr, 0px) * 2);
    border-radius: 50%;
    border: 2px solid var(--apricot);
    transform: translate3d(calc(var(--xx, 0px) - var(--xr, 0px)), calc(var(--xy, 0px) - var(--xr, 0px)), 0);
    opacity: var(--xo, 0);
    z-index: 2;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .hero-scene {
        --hx: 77%;
        --hy: 56%;
        --hr: clamp(8rem, 13vw, 11.5rem);
    }

    .promo-on .hero-note--a { left: max(1.5rem, 50% - 34.5rem); right: auto; top: 8rem; }
    .promo-on .hero-note--b { display: block !important; left: max(1.5rem, 50% - 34.5rem); bottom: 2.2rem; }
}

/* Sur l'accueil, la scène « méthode » est un peu plus courte que sur /presentation */
.promo-on header.hero-warm ~ main .promo-method {
    height: 360vh;
}

/* Sur l'accueil, la section des avis est sur fond vert profond (règle `main #testimonials` de app.css) : variante claire */
#testimonials.promo-reviews .promo-kicker { color: var(--apricot); }
#testimonials.promo-reviews .promo-h2 em { color: var(--apricot); }
#testimonials.promo-reviews .promo-quote blockquote { color: var(--cream); }
#testimonials.promo-reviews .promo-quote figcaption { color: rgba(246, 239, 224, 0.78); }
#testimonials.promo-reviews .promo-quote figcaption b { color: var(--cream); }
#testimonials.promo-reviews .promo-tab { background: rgba(246, 239, 224, 0.1); color: rgba(246, 239, 224, 0.85); }
#testimonials.promo-reviews .promo-tab:hover { color: var(--cream); }
#testimonials.promo-reviews .promo-tab.is-active { background: var(--apricot); color: var(--ink); }
#testimonials.promo-reviews .promo-tab svg { stroke: var(--cream); }
#testimonials.promo-reviews + .promo-facts { padding-top: clamp(3.5rem, 7vw, 5.5rem); }