/* Page Impression 3D : sequence cinematique (canvas epingle + cinq actes). Moteur : service-cine.js.
   Uniquement transform / opacity pour les mouvements du DOM ; le canvas est redessine par le script. */

.cine {
    --g: 0;
    --ap: 0;
    position: relative;
    height: 920svh;
    color: #ffffff;
    background: #0b1220;
}

.cine-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cine-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    /* hauteur STABLE (viewport le plus petit, barre d'adresse mobile visible) : la scene ne change plus de taille ni de cadrage quand la barre
       apparait ou se replie ; barre repliee, la bande du bas montre le fond de la sequence (meme couleur que le bas du degrade) */
    height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 55% at 66% 52%, rgba(36, 92, 255, 0.16), transparent 70%),
        linear-gradient(180deg, #060d1b 0%, #0b1220 100%);
}

.cine-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cine-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6, 13, 27, 0.97) 0%, rgba(6, 13, 27, 0.86) 30%, rgba(6, 13, 27, 0.4) 48%, transparent 64%),
        radial-gradient(ellipse 90% 90% at 60% 50%, transparent 55%, rgba(6, 13, 27, 0.75) 100%);
}

.cine-ui {
    position: relative;
    z-index: 2;
    height: 100%;
}

/* ---------- repere haut ---------- */

.cine-kicker {
    position: absolute;
    left: 24px;
    top: calc(var(--header-h, 72px) + 28px);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cine-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #3ab8ff;
}

/* ---------- actes ---------- */

.cine-acts {
    position: absolute;
    left: 24px;
    top: var(--act-cy, 50%);
    width: min(480px, 46vw);
    height: 0;
}

.cine-act {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: translate3d(0, calc(-50% + 36px), 0) scale(var(--fit, 1));
    transform-origin: 0 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.cine-act.is-now {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(var(--fit, 1));
}

.cine-act.is-past {
    transform: translate3d(0, calc(-50% - 36px), 0) scale(var(--fit, 1));
}

/* grand numero en filaire, derriere le texte */
.cine-bignum {
    position: absolute;
    left: -0.06em;
    top: 50%;
    z-index: -1;
    color: transparent;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: clamp(10rem, 24vw, 20rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    -webkit-text-stroke: 1px rgba(127, 211, 255, 0.16);
    transform: translate3d(-24px, -50%, 0);
    opacity: 0;
    transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.cine-act.is-now .cine-bignum {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
}

.cine-tag {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.62);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cine-tag span { color: #3ab8ff; }

.cine-tag::after {
    content: "";
    width: 96px;
    height: 1px;
    background: linear-gradient(90deg, #3ab8ff, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.cine-act.is-now .cine-tag::after { transform: scaleX(1); }

body.svm-page .cine-title {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

/* titre : chaque mot monte depuis un masque */
.cine-word {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
    vertical-align: top;
}

.cine-word > span {
    display: inline-block;
    transform: translate3d(0, 108%, 0);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--w, 0) * 70ms + 80ms);
}

.cine-act.is-now .cine-word > span { transform: none; }
.cine-act.is-past .cine-word > span { transform: translate3d(0, -108%, 0); transition-delay: 0s; }

.cine-text {
    margin: 0 0 22px;
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.74);
    font-size: 1.04rem;
    line-height: 1.6;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.7s ease 0.35s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.cine-act.is-now .cine-text { opacity: 1; transform: none; }

.cine-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.cine-chips li {
    padding: 7px 12px;
    border: 1px solid rgba(127, 211, 255, 0.4);
    border-radius: 4px;
    color: #cfeaff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.94);
    transition: opacity 0.5s ease calc(0.5s + var(--c, 0) * 60ms), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.5s + var(--c, 0) * 60ms);
}

.cine-act.is-now .cine-chips li { opacity: 1; transform: none; }

.cine-link {
    display: inline-block;
    color: #7fd3ff;
    font-weight: 600;
    text-underline-offset: 4px;
}

.cine-cta { margin-top: 4px; }

/* ---------- releves de la machine ---------- */

.cine-hud {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cine-hud div { display: grid; gap: 3px; }

.cine-hud dt {
    margin: 0;
    color: rgba(255, 255, 255, 0.46);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cine-hud dd {
    margin: 0;
    min-width: 8ch;
    color: #ffffff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.92rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- rail des actes (bureau) ---------- */

.cine-rail {
    position: absolute;
    /* colle au bord de l'ecran (et non a la colonne centrale) : sur grand ecran la piece garde toute la place entre le texte et le rail */
    right: calc(24px + (100% - 100vw) / 2);
    top: 50%;
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateY(-50%);
}

.cine-rail li {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.64);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.cine-rail i {
    width: 9px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    transform: rotate(45deg);
    transition: background-color 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cine[data-now="0"] [data-tick="0"],
.cine[data-now="1"] [data-tick="1"],
.cine[data-now="2"] [data-tick="2"],
.cine[data-now="3"] [data-tick="3"],
.cine[data-now="4"] [data-tick="4"] { color: #7fd3ff; }

.cine[data-now="0"] [data-tick="0"] i,
.cine[data-now="1"] [data-tick="1"] i,
.cine[data-now="2"] [data-tick="2"] i,
.cine[data-now="3"] [data-tick="3"] i,
.cine[data-now="4"] [data-tick="4"] i { background: #3ab8ff; transform: rotate(45deg) scale(1.25); }

/* barre de progression */
.cine-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
}

.cine-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #245cff, #3ab8ff);
    transform: scaleX(var(--g));
    transform-origin: left;
}

/* ---------- mobile ---------- */

@media (max-width: 860px) {
    .cine { height: 850svh; }
    .cine-vignette {
        background:
            linear-gradient(0deg, rgba(6, 13, 27, 0.96) 0%, rgba(6, 13, 27, 0.7) 34%, transparent 56%),
            radial-gradient(ellipse 100% 70% at 50% 34%, transparent 55%, rgba(6, 13, 27, 0.6) 100%);
    }
    .cine-kicker { top: calc(var(--header-h, 72px) + 14px); }
    .cine-acts { top: auto; bottom: 84px; left: 24px; right: 24px; width: auto; height: auto; }
    .cine-act { top: auto; bottom: 0; transform: translate3d(0, 28px, 0) scale(var(--fit, 1)); }
    .cine-act.is-now { transform: scale(var(--fit, 1)); }
    .cine-act.is-past { transform: translate3d(0, -28px, 0) scale(var(--fit, 1)); }
    body.svm-page .cine-title { font-size: clamp(1.7rem, 8vw, 2.3rem); margin-bottom: 12px; }
    .cine-text { font-size: 0.96rem; margin-bottom: 14px; }
    .cine-bignum { display: none; }
    .cine-hud { bottom: 14px; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 10px; padding-top: 10px; }
    .cine-hud dt { font-size: 0.56rem; letter-spacing: 0.1em; }
    .cine-hud dd { font-size: 0.74rem; min-width: 0; white-space: nowrap; }
    .cine-rail { display: none; }
}

/* ---------- mouvement reduit : piece finie, actes empiles, rien d'epingle ---------- */

.cine.is-static { height: auto; }
.cine.is-static .cine-pin { position: relative; height: auto; display: grid; gap: 0; }
.cine.is-static .cine-canvas { position: relative; height: 56svh; }
.cine.is-static .cine-vignette,
.cine.is-static .cine-hud,
.cine.is-static .cine-rail,
.cine.is-static .cine-bar,
.cine.is-static .cine-kicker { display: none; }
.cine.is-static .cine-ui { height: auto; padding: 40px 24px 72px; }
.cine.is-static .cine-acts { position: static; width: auto; height: auto; display: grid; gap: 56px; }
.cine.is-static .cine-act,
.cine.is-static .cine-act.is-past { position: relative; transform: none; opacity: 1; pointer-events: auto; }
.cine.is-static .cine-bignum { display: none; }
.cine.is-static .cine-word > span,
.cine.is-static .cine-text,
.cine.is-static .cine-chips li { transform: none; opacity: 1; transition: none; }
.cine.is-static .cine-tag::after { transform: none; transition: none; }

/* ---------- transition depuis le hero : la scene arrive, se verrouille, puis le recit demarre ---------- */

/* filet laser qui balaie le raccord pendant que la scene monte */
.cine::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3ab8ff 20%, #ffffff 50%, #3ab8ff 80%, transparent);
    box-shadow: 0 0 22px 2px rgba(58, 184, 255, 0.7);
    transform: scaleX(var(--enter, 0));
    opacity: calc(1 - var(--lock, 0));
    pointer-events: none;
}

/* le haut de la scene se fond dans la couleur du hero (pas de coupure franche) */
.cine-pin::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    height: 160px;
    background: linear-gradient(180deg, #071225 0%, rgba(7, 18, 37, 0) 100%);
    opacity: calc(1 - var(--enter, 0));
    pointer-events: none;
}

.cine-kicker { opacity: var(--lock, 0); transform: translate3d(0, calc((1 - var(--lock, 0)) * -14px), 0); }
.cine-hud { opacity: var(--lock, 0); transform: translate3d(0, calc((1 - var(--lock, 0)) * 18px), 0); }
.cine-rail { opacity: var(--lock, 0); }

/* ---------- typographie de fond : deux lignes filaires qui defilent en sens inverse ---------- */

.cine-ticker {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--enter, 0);
}

.cine-ticker > div {
    position: absolute;
    left: 0;
    display: flex;
    white-space: nowrap;
    color: transparent;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    -webkit-text-stroke: 1px rgba(127, 211, 255, 0.09);
    will-change: transform;
}

.cine-ticker-a {
    top: 7%;
    font-size: clamp(4.5rem, 11vw, 9.5rem);
    transform: translate3d(calc(var(--g, 0) * -38%), 0, 0);
}

.cine-ticker-b {
    bottom: 16%;
    font-size: clamp(3rem, 7vw, 6rem);
    transform: translate3d(calc(-52% + var(--g, 0) * 38%), 0, 0);
}

/* ---------- proprietes de la matiere (acte 3) ---------- */

.cine-props { display: grid; gap: 9px; max-width: 320px; margin: 0 0 20px; }

.cine-props > div {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.cine-props span {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cine-props i {
    display: block;
    border-radius: 2px;
    background:
        linear-gradient(90deg, #245cff, #3ab8ff) 0 0 / 100% 100% no-repeat,
        rgba(255, 255, 255, 0.1);
    transform: scaleX(var(--b, 0.5));
    transform-origin: left;
    box-shadow: 0 0 10px rgba(58, 184, 255, 0.5);
}

@media (max-width: 860px) {
    .cine-props { display: none; }
    .cine-ticker-a { top: 12%; }
    .cine-ticker-b { bottom: 30%; }
}

.cine.is-static .cine-ticker,
.cine.is-static .cine-props { display: none; }
.cine.is-static .cine-kicker,
.cine.is-static .cine-hud,
.cine.is-static .cine-rail { opacity: 1; transform: none; }

/* ---------- hero : la meme piece 3D que la sequence, en boucle (sans cadre ni panneau) ---------- */

.svm-stage-3d {
    display: block;
    align-self: stretch;
    min-height: min(640px, 74svh);
    padding: 0;
}

.svm-stage-3d canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.5s ease;
}


/* le canvas se fond dans le hero : aucune arete visible, la grille s'estompe vers les bords */
.svm-stage-3d canvas {
    -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
}

.svm-stage-3d .cine-hud {
    left: 8%;
    right: 8%;
    bottom: 22px;
    padding-top: 12px;
    gap: 8px 28px;
    border-top: 0;
    border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 18%, rgba(255, 255, 255, 0.22) 82%, transparent) 1;
    border-top: 1px solid;
}

@media (max-width: 960px) {
    /* sur mobile la scene est sous le texte : elle ne s'estompe pas avant d'avoir ete vue */
    .svm-intro .svm-stage.svm-stage-3d { translate: none; scale: none; filter: none; }
    .svm-stage-3d { min-height: clamp(380px, 62vw, 540px); max-width: none; }
    .svm-stage-3d .cine-hud { bottom: 6px; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 10px; }
    .svm-stage-3d .cine-hud dt { font-size: 0.56rem; letter-spacing: 0.1em; }
    .svm-stage-3d .cine-hud dd { font-size: 0.74rem; min-width: 0; white-space: nowrap; }
}

/* ---------- interaction : glisser pour orbiter autour de la piece ---------- */

.cine-canvas,
.svm-stage-3d canvas {
    cursor: grab;
    touch-action: pan-y;
}

.cine.is-drag .cine-canvas,
.svm-stage-3d.is-drag canvas { cursor: grabbing; }

/* l'interface de la sequence laisse passer le pointeur vers la piece ; seuls les actes restent cliquables */
.cine-ui { pointer-events: none; }
.cine-act.is-now { pointer-events: auto; }

.cine-hint {
    position: absolute;
    right: 8%;
    top: 12%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid rgba(127, 211, 255, 0.35);
    border-radius: 4px;
    background: rgba(7, 18, 37, 0.7);
    color: rgba(255, 255, 255, 0.72);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    animation: cineHint 0.8s ease 2.4s both;
    transition: opacity 0.4s ease;
}

.cine-hint i {
    width: 14px;
    height: 14px;
    border: 1.5px solid #3ab8ff;
    border-radius: 50%;
    border-right-color: transparent;
    animation: cineSpin 1.8s linear infinite;
}

.svm-stage-3d.has-used .cine-hint { animation: none; opacity: 0; }

@keyframes cineHint { to { opacity: 1; } }
@keyframes cineSpin { to { transform: rotate(360deg); } }

@media (hover: none) {
    .cine-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cine-hint i { animation: none; }
}

/* ---------- actes enrichis : definitions, notes, usages ---------- */

.cine[data-now="5"] [data-tick="5"] { color: #7fd3ff; }
.cine[data-now="5"] [data-tick="5"] i { background: #3ab8ff; transform: rotate(45deg) scale(1.25); }

.cine-defs {
    display: grid;
    gap: 0;
    margin: 0 0 14px;
    max-width: 470px;
}

.cine-defs > div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 0.5s ease calc(0.45s + var(--c, 0) * 70ms), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.45s + var(--c, 0) * 70ms);
}
.cine-act.is-now .cine-defs > div { opacity: 1; transform: none; }

.cine-defs dt { margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; }
.cine-defs dd { margin: 0; line-height: 1.45; }

.cine-note {
    margin: 0 0 14px;
    max-width: 46ch;
    padding-left: 12px;
    font-size: 0.84rem;
    line-height: 1.5;
}

/* usages : la liste suit l'etiquette reliee a la piece */
.cine-cases { display: grid; margin: 0 0 18px; padding: 0; list-style: none; max-width: 470px; }

.cine-cases li {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, background-color 0.4s ease;
    transition-delay: calc(0.4s + var(--c, 0) * 80ms), calc(0.4s + var(--c, 0) * 80ms), 0s, 0s;
}

.cine-act.is-now .cine-cases li { transform: none; }

.cine[data-case="0"] .cine-cases li:nth-child(1),
.cine[data-case="1"] .cine-cases li:nth-child(2),
.cine[data-case="2"] .cine-cases li:nth-child(3),
.cine[data-case="3"] .cine-cases li:nth-child(4) {
    opacity: 1;
    border-color: rgba(127, 211, 255, 0.55);
    background: rgba(36, 92, 255, 0.14);
}

.cine-cases strong { color: #ffffff; font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
.cine-cases span { color: rgba(255, 255, 255, 0.66); font-size: 0.84rem; line-height: 1.45; }
.cine-cases .cine-link { margin-top: 4px; font-size: 0.84rem; }
.cine-cases .cine-link span { color: inherit; font-size: inherit; }

@media (max-width: 860px) {
    .cine-defs > div { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
    .cine-defs dd { font-size: 0.76rem; line-height: 1.35; }
    .cine-defs > div { padding: 5px 0; }
    .cine-note { font-size: 0.78rem; margin-bottom: 8px; }
    /* mobile : seul l'usage courant est affiche */
    .cine-cases li { display: none; }
    .cine[data-case="0"] .cine-cases li:nth-child(1),
    .cine[data-case="1"] .cine-cases li:nth-child(2),
    .cine[data-case="2"] .cine-cases li:nth-child(3),
    .cine[data-case="3"] .cine-cases li:nth-child(4) { display: grid; }
    .cine-act:has(.cine-defs) .cine-text { display: none; }
}

.cine.is-static .cine-defs > div,
.cine.is-static .cine-cases li { opacity: 1; transform: none; transition: none; display: grid; }

/* ---------- la FAQ prolonge la sequence : meme fond sombre, memes filets ---------- */

html body .cine ~ .faq {
    background: #0b1220 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body .cine ~ .faq .faq-header h2,
html body .cine ~ .faq .faq-question,
html body .cine ~ .faq .faq-item summary { color: #ffffff !important; }

html body .cine ~ .faq .section-kicker { color: rgba(255, 255, 255, 0.6) !important; }

html body .cine ~ .faq .faq-direct-link {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(127, 211, 255, 0.35) !important;
    color: #7fd3ff !important;
}

html body .cine ~ .faq .faq-item,
html body .cine ~ .faq .faq-item[open] { border-color: rgba(255, 255, 255, 0.14) !important; background: transparent !important; }

html body .cine ~ .faq .faq-content p,
html body .cine ~ .faq .faq-content { color: rgba(255, 255, 255, 0.74) !important; }

html body .cine ~ .faq .faq-content a { color: #7fd3ff !important; }

html body .cine ~ .faq .faq-toggle { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.35) !important; }

/* actes denses (definitions) : titre plus compact, texte d'intro retire (les definitions le disent deja), barres resserrees */
.cine-act:has(.cine-defs) .cine-text { display: none; }
body.svm-page .cine-act:has(.cine-defs) .cine-title { font-size: clamp(1.7rem, 3.3vw, 2.7rem); margin-bottom: 14px; }
.cine-act:has(.cine-defs) .cine-tag { margin-bottom: 12px; }
.cine-act:has(.cine-defs) .cine-props { margin-bottom: 12px; }
.cine-act:has(.cine-defs) .cine-props i { height: 3px; }
.cine-defs > div { padding: 7px 0; }

/* acte des usages : liste compacte, seul l'usage courant se deploie */
body.svm-page .cine-act:has(.cine-cases) .cine-title { font-size: clamp(1.55rem, 3vw, 2.5rem); margin-bottom: 14px; }
.cine-act:has(.cine-cases) .cine-tag { margin-bottom: 12px; }
.cine-cases { gap: 8px; margin-bottom: 14px; }
.cine-cases li { padding: 10px 14px; }
.cine-cases li > span,
.cine-cases li > .cine-link { display: none; }
.cine[data-case="0"] .cine-cases li:nth-child(1) > span,
.cine[data-case="1"] .cine-cases li:nth-child(2) > span,
.cine[data-case="2"] .cine-cases li:nth-child(3) > span,
.cine[data-case="3"] .cine-cases li:nth-child(4) > span { display: block; }
.cine[data-case="0"] .cine-cases li:nth-child(1) > .cine-link,
.cine[data-case="1"] .cine-cases li:nth-child(2) > .cine-link,
.cine[data-case="2"] .cine-cases li:nth-child(3) > .cine-link,
.cine[data-case="3"] .cine-cases li:nth-child(4) > .cine-link { display: inline-block; }
.cine.is-static .cine-cases li > span,
.cine.is-static .cine-cases li > .cine-link { display: block; }

/* lisibilite : les definitions et notes reposent sur un fond plein, le texte garde une ombre douce par-dessus la piece */
.cine-act .cine-title,
.cine-act .cine-text,
.cine-act .cine-tag { text-shadow: 0 1px 18px rgba(6, 13, 27, 0.95), 0 0 2px rgba(6, 13, 27, 0.8); }

.cine-defs {
    padding: 2px 16px;
    border: 1px solid rgba(127, 211, 255, 0.18);
    border-radius: 6px;
    background: rgba(6, 13, 27, 0.82);
}

.cine-defs > div:first-child { border-top: 0; }
.cine-defs > div:last-child { border-bottom: 0; }
.cine-defs dt { color: #e6f4ff; font-size: 0.74rem; }
.cine-defs dd { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; }

.cine-note {
    padding: 10px 14px;
    border: 1px solid rgba(127, 211, 255, 0.18);
    border-left: 2px solid #3ab8ff;
    border-radius: 0 6px 6px 0;
    background: rgba(6, 13, 27, 0.82);
    color: rgba(255, 255, 255, 0.78);
}
.cine-chips li { background: rgba(10, 24, 60, 0.9); }

/* barres de matiere et lien : meme fond plein que les definitions, libelles plus lisibles */
.cine-props {
    padding: 12px 16px;
    border: 1px solid rgba(127, 211, 255, 0.18);
    border-radius: 6px;
    background: rgba(6, 13, 27, 0.82);
}

.cine-props span { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.cine-props i { height: 4px; }

.cine-link {
    padding: 7px 12px;
    border: 1px solid rgba(127, 211, 255, 0.3);
    border-radius: 4px;
    background: rgba(6, 13, 27, 0.82);
    text-decoration: none;
}

.cine-cases .cine-link { padding: 0; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.cine-act:has(.cine-defs) .cine-props { gap: 8px; }

/* acte des usages : liste numerotee, tous les usages restent lisibles, le courant est marque d'un filet */
.cine-cases { counter-reset: usage; }

.cine-cases li {
    counter-increment: usage;
    position: relative;
    padding-left: 48px;
    border-color: rgba(127, 211, 255, 0.22);
    background: rgba(6, 13, 27, 0.84);
}

.cine-cases li::before {
    content: counter(usage, decimal-leading-zero);
    position: absolute;
    left: 15px;
    top: 12px;
    color: #3ab8ff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.cine-act.is-now .cine-cases li { opacity: 0.82; }
.cine-cases li strong { color: rgba(255, 255, 255, 0.92); }

.cine[data-case="0"] .cine-cases li:nth-child(1),
.cine[data-case="1"] .cine-cases li:nth-child(2),
.cine[data-case="2"] .cine-cases li:nth-child(3),
.cine[data-case="3"] .cine-cases li:nth-child(4) {
    box-shadow: inset 3px 0 0 #3ab8ff, 0 14px 34px -20px rgba(36, 92, 255, 0.8);
}

.cine[data-case="0"] .cine-cases li:nth-child(1) strong,
.cine[data-case="1"] .cine-cases li:nth-child(2) strong,
.cine[data-case="2"] .cine-cases li:nth-child(3) strong,
.cine[data-case="3"] .cine-cases li:nth-child(4) strong { color: #ffffff; }

.cine-cases li > span { color: rgba(255, 255, 255, 0.8); }

/* anti-flash : la FAQ de la sequence ne s'estompe pas depuis le fond clair du site */
html body.service-page .cine ~ .faq.reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* le fond du site derriere la sequence est sombre aussi : jamais de bande claire au chargement ni en rebond */
body.service-page:has(.cine) { background-color: #0b1220; }

/* ---------- lecture automatique ---------- */

.cine-auto {
    position: absolute;
    right: 24px;
    top: calc(var(--header-h, 72px) + 22px);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    overflow: hidden;
    border: 1px solid rgba(127, 211, 255, 0.4);
    border-radius: 4px;
    background: rgba(7, 18, 37, 0.86);
    color: #cfeaff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    opacity: var(--lock, 0);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.cine-auto:hover,
.cine-auto:focus-visible { border-color: #3ab8ff; background: rgba(36, 92, 255, 0.28); outline: none; }
.cine-auto:focus-visible { box-shadow: 0 0 0 2px #3ab8ff; }

.cine-auto-ico {
    width: 0;
    height: 0;
    border-left: 9px solid #3ab8ff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.cine-auto[aria-pressed="true"] .cine-auto-ico {
    width: 10px;
    height: 12px;
    border-top: 0;
    border-bottom: 0;
    border-left: 3px solid #3ab8ff;
    border-right: 3px solid #3ab8ff;
}

.cine-auto i {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #3ab8ff;
    transform: scaleX(0);
    transform-origin: left;
}

.cine-auto.is-run i { animation: cineAutoFill var(--dwell, 5s) linear forwards; }

@keyframes cineAutoFill { to { transform: scaleX(1); } }

/* entree depuis le hero */
.svm-auto-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.78);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}

.svm-auto-link span {
    width: 0;
    height: 0;
    border-left: 9px solid #3ab8ff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.svm-auto-link:hover,
.svm-auto-link:focus-visible { color: #ffffff; }

@media (max-width: 860px) {
    .cine-auto { right: 24px; top: calc(var(--header-h, 72px) + 10px); padding: 7px 10px; font-size: 0.6rem; }
}

.cine.is-static .cine-auto { display: none; }

@media (prefers-reduced-motion: reduce) {
    .cine-auto,
    .svm-auto-link { display: none; }
}

/* ajustement a la hauteur de l'ecran (--fit calcule par le script) et repere masque quand l'acte est dense */

.cine:has(.cine-act.is-now .cine-defs) .cine-kicker,
.cine:has(.cine-act.is-now .cine-cases) .cine-kicker { opacity: 0; }

@media (max-width: 860px) {
    .cine-act { transform-origin: 0 100%; }
}

/* petits telephones : les notes secondaires s'effacent pour que l'acte dense tienne sous la piece */
@media (max-width: 860px) and (max-height: 760px) {
    .cine-act:has(.cine-defs) .cine-note,
    .cine-act:has(.cine-defs) .cine-tag::after { display: none; }
    body.svm-page .cine-act:has(.cine-defs) .cine-title { font-size: 1.45rem; margin-bottom: 8px; }
    .cine-defs { padding: 0 12px; }
    .cine-defs > div { padding: 4px 0; }
}

/* tres petits telephones (hauteur <= 700 px) : descriptions sur deux lignes maximum, pour garder des caracteres lisibles sans reduire l'acte */
@media (max-width: 860px) and (max-height: 700px) {
    .cine-defs dd {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cine-defs > div { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
}

/* petits ecrans : le surtitre disparait (l'etiquette de l'acte donne deja le contexte) et le bouton « Lecture auto » ne passe plus par-dessus */
@media (max-width: 520px) {
    .cine-kicker { display: none; }
    .cine-auto { top: calc(var(--header-h, 72px) + 10px); right: 16px; padding: 7px 10px; }
}

/* 300 a 400 px : releve machine sur deux colonnes (les valeurs longues ne sont plus coupees), actes remontes d'autant */
@media (max-width: 400px) {
    .cine-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
    .cine-hud dd { white-space: normal; overflow-wrap: anywhere; }
    .cine-acts { bottom: 118px; left: 20px; right: 20px; }
    .cine-defs dt, .cine-defs dd { overflow-wrap: anywhere; }
    .cine-chips { gap: 6px; }
    .cine-chips li { font-size: 0.7rem; padding: 6px 9px; }
}

/* 300 a 400 px : terme au-dessus de sa definition (une seule colonne), la definition garde ses trois lignes */
@media (max-width: 400px) {
    .cine-defs > div { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 5px 0; }
    .cine-defs dd { -webkit-line-clamp: 3; font-size: 0.74rem; }
    .cine-defs dt { font-size: 0.68rem; }
}


/* mobile : le lien de l'acte est centre dans sa carte */
@media (max-width: 560px) {
    .cine-act > .cine-link { display: block; width: fit-content; margin-inline: auto; text-align: center; }
}

/* numerotation 01 a 04 des cas d'usage : explicite. Avec un compteur CSS, sur telephone (une seule ligne affichee, les autres en display:none) la ligne visible etait toujours « 01 » */
.cine-cases li:nth-child(1)::before { content: "01"; }
.cine-cases li:nth-child(2)::before { content: "02"; }
.cine-cases li:nth-child(3)::before { content: "03"; }
.cine-cases li:nth-child(4)::before { content: "04"; }

/* ---------- telephone : un geste = une etape (ancres de calage posees par le moteur, actives dans la sequence seulement) ---------- */
.cine-snaps { position: absolute; left: 0; top: 0; width: 1px; height: 100%; pointer-events: none; visibility: hidden; }
.cine-snaps i { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
html.cine-snap { scroll-snap-type: y mandatory; scroll-padding-top: 0; }

/* ---------- telephone : lisibilite (tailles plancher, etiquette sur une ligne, acte « Matiere » allege) ----------
   Chaque acte garde sa propre hauteur et son propre facteur de reduction (le moteur ne reduit plus tous les actes pour le plus haut) : le texte reste a sa taille. */
@media (max-width: 860px) {
    .cine-tag { gap: 10px; flex-wrap: nowrap; letter-spacing: 0.1em; white-space: nowrap; }
    .cine-tag::after { width: 40px; flex: none; }
    .cine-chips li { font-size: 0.76rem; }
    .cine-defs dt { font-size: 0.74rem; }
    .cine-defs dd { font-size: 0.84rem; }
    .cine-cases span, .cine-cases .cine-link { font-size: 0.88rem; }
    .cine-hud dt { font-size: 0.62rem; }
    /* la note « pas sur du choix » est reprise par le formulaire : elle cede la place a la piece */
    .cine-act:has(.cine-defs) .cine-note { display: none; }
}

@media (max-width: 400px) {
    .cine-defs dt { font-size: 0.72rem; }
    .cine-defs dd { font-size: 0.82rem; }
    .cine-chips li { font-size: 0.74rem; }
}

/* tres petits ecrans (hauteur <= 640 px, ex. 320 x 568) : le releve machine et les puces cedent la place au texte, qui garde une taille lisible */
@media (max-width: 860px) and (max-height: 640px) {
    .cine-hud, .cine-chips { display: none; }
    .cine-acts { bottom: 22px; }
}