/* Composant « Le serveur » (#/serveur) — ultimate-serveur.js. Rendu de la maquette validée maquettes-ultimate/v2/le-serveur.html :
   la BANDE-ANNONCE plein cadre (12 plans) qui se regarde sans défiler, puis le pied de page du site.
   Règle : tout est sous la classe racine .userv ; chaque classe créée ici commence par « userv- » (@keyframes aussi) ;
   classes du site réutilisées telles quelles : .btn, .btn-beige, .hl, .old, .ht, .couronne, .sp-w / .sp-c (titres découpés).
   Le site garde son en-tête (posé sur le lecteur, comme dans la maquette), son pied de page et son fond.
   Les animations restent actives même si Windows a coupé les siennes (demande du propriétaire) : aucune règle prefers-reduced-motion. */
.userv {
  --papier: #efe6d8; --encre: #16130f; --brun: #7a5a33; --rouge: #a3291d;
  -webkit-tap-highlight-color: transparent;
}
/* Le mot en valeur d'un titre ne se coupe jamais en deux lignes (son fond en dégradé tient sur une ligne) */
.userv h1 .hl, .userv h2 .hl, .userv .userv-nw { white-space: nowrap; }
/* La ponctuation se rapproche du mot : elle se pose sur la fin effacée de son fond */
.userv .userv-nw > .hl { margin-right: -.14em; }
/* Lettres du mot en valeur : peintes comme dans la maquette (reglages.js, data-dg="c") — lettre découpée dans un fond de sa couleur,
   avec la légère ombre du traitement « Voile ». Ici encre = clair (blanc) : le dégradé des lettres se réduit à une couleur unie. */
.userv .hl .sp-c { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(var(--dg-encre), var(--dg-encre)); -webkit-background-clip: text; background-clip: text;
  filter: var(--dg-ombre); }
.userv .userv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Photo recadrée : fond « cover », zoom autour du point d'intérêt (--pos), marche quel que soit le format du cadre */
.userv .userv-zoom { position: absolute; inset: 0; display: block; background: var(--img) var(--pos, 50% 50%) / cover no-repeat; transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 50%); }
/* Vignette d'un catalogue de l'ancien site (garages, appartements) : découpe exacte */
.userv .userv-vg { display: block; width: 100%; background-repeat: no-repeat; }

/* Boutons de l'affiche (restent pleins) : flèche qui avance au survol, bouton Discord de la maquette */
.userv .btn-beige .bx-right-arrow-alt { transition: transform .5s var(--ease); }
.userv .btn-beige:hover .bx-right-arrow-alt { transform: skewX(8deg) translateX(4px); }
.userv .userv-btn-dc { background: #5865f2; color: #fff; box-shadow: 6px 6px 0 rgba(88, 101, 242, .3); }
.userv .userv-btn-dc:hover { box-shadow: 9px 9px 0 rgba(88, 101, 242, .42); transform: skewX(-8deg) translate(-2px, -2px); }

/* Retour vers l'univers Ultimate (rangé dans la barre du lecteur) */
.userv .userv-retour { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1px solid var(--verre-bord); background: var(--verre); color: rgba(246, 241, 234, .86);
  font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transform: skewX(-8deg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, color .3s, background .3s; }
.userv .userv-retour > * { transform: skewX(8deg); }
.userv .userv-retour i { font-size: 19px; color: var(--acc); transition: transform .5s var(--ease); }
.userv .userv-retour:hover { border-color: rgba(236, 211, 177, .42); color: #fff; background: rgba(14, 13, 12, .8); }
.userv .userv-retour:hover i { transform: skewX(8deg) translateX(-4px); }

/* Ruban adhésif */
.userv .userv-tape { position: absolute; z-index: 3; width: 110px; height: 30px; background: rgba(236, 211, 177, .75); }

/* ======================================================================
   LE LECTEUR : tout tient dans l'écran
   --haut / --bas : la place prise par la barre du haut (sous l'en-tête) et par les commandes du bas
   ====================================================================== */
.userv .userv-lec { --haut: calc(var(--hd) + 78px); --bas: 92px; position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; isolation: isolate;
  background: #070605; color: #fff; user-select: none; -webkit-user-select: none; touch-action: pan-y; -webkit-touch-callout: none; }

/* Un plan */
.userv .userv-pl { position: absolute; inset: 0; z-index: 1; visibility: hidden; overflow: hidden; isolation: isolate; }
.userv .userv-pl.is-on { visibility: visible; z-index: 2; }
/* Remise à zéro instantanée d'un plan qui rentre (titres, fonds en dégradé) */
.userv .userv-pl.is-raz, .userv .userv-pl.is-raz *, .userv .userv-pl.is-raz *::before, .userv .userv-pl.is-raz *::after { transition: none !important; }
.userv .userv-pl-ph { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #0d0c0b; }
.userv .userv-pl-snap, .userv .userv-pl-kb { position: absolute; inset: 0; }
.userv .userv-pl-ph .userv-zoom { filter: saturate(.9) contrast(1.06); }
/* Caméra lente (Ken Burns) : zoom ou travelling pendant toute la durée du plan */
.userv .userv-pl-kb { transform: translate(var(--kx0, 0%), var(--ky0, 0%)) scale(var(--ks0, 1)); }
.userv .userv-pl.is-on .userv-pl-kb { animation: userv-kb var(--dur, 8s) cubic-bezier(.33, .1, .55, 1) both; }
@keyframes userv-kb { from { transform: translate(var(--kx0, 0%), var(--ky0, 0%)) scale(var(--ks0, 1)); } to { transform: translate(var(--kx1, 0%), var(--ky1, 0%)) scale(var(--ks1, 1)); } }
/* Coupe en zoom : l'image arrive serrée et se pose */
.userv .userv-pl.is-on[data-entree~="zoom"] .userv-pl-snap { animation: userv-snap 1.25s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes userv-snap { from { transform: scale(1.22); } to { transform: none; } }
.userv .userv-pl-voile { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.userv .userv-pl-trame { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(0, 0, 0, .75) 1px, transparent 1.5px); background-size: 4px 4px; }
/* Zone de contenu : entre la barre du haut et les commandes du bas */
.userv .userv-pl-c { position: absolute; z-index: 1; top: var(--haut); bottom: var(--bas); left: var(--gut); right: var(--gut); }
/* Sous-titres : les mots s'allument l'un après l'autre, puis tout reste affiché */
.userv .userv-pl .userv-m { opacity: .16; }
.userv .userv-pl.is-on .userv-m { animation: userv-mot .6s ease both; animation-delay: calc(var(--m0, .8s) + var(--k, 0) * 72ms); }
@keyframes userv-mot { from { opacity: .16; } to { opacity: 1; } }

/* Raccords entre les plans : flash blanc, fondu au noir */
.userv .userv-flash, .userv .userv-noir { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }
.userv .userv-flash { background: #fff4e2; }
.userv .userv-noir { background: #050403; }
.userv .userv-flash.is-go { animation: userv-flash .55s ease-out both; }
.userv .userv-noir.is-go { animation: userv-noir 1.05s ease-in both; }
@keyframes userv-flash { from { opacity: .5; } to { opacity: 0; } }
@keyframes userv-noir { 0%, 22% { opacity: 1; } 100% { opacity: 0; } }
/* Voiles fixes du haut (en-tête, barre) et du bas (commandes) */
.userv .userv-ombre { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; }
.userv .userv-ombre-h { top: 0; height: calc(var(--hd) + 150px); background: linear-gradient(180deg, rgba(6, 5, 4, .9) 0%, rgba(6, 5, 4, .6) 48%, rgba(6, 5, 4, 0)); }
.userv .userv-ombre-b { bottom: 0; height: 170px; background: linear-gradient(0deg, rgba(6, 5, 4, .82), rgba(6, 5, 4, 0)); }
/* (Plus de flèches au survol des bords ni de clic sur les moitiés de l'image : on change de plan par les commandes seulement) */
/* Pastille du milieu quand on met en pause / relance */
.userv .userv-etat { position: absolute; z-index: 6; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(13, 12, 11, .62); border: 1px solid rgba(236, 211, 177, .3); color: #fff; font-size: 46px; opacity: 0; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.userv .userv-etat.is-go { animation: userv-etat .75s ease-out both; }
@keyframes userv-etat { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.35); } }

/* ---------- Barre du haut : progression segmentée, retour, minutage, « Passer » ---------- */
.userv .userv-haut { position: absolute; z-index: 6; top: calc(var(--hd) + 2px); left: var(--gut); right: var(--gut); pointer-events: none; transition: opacity .35s; }
.userv .userv-seg { display: flex; align-items: center; gap: 4px; height: 20px; pointer-events: auto; cursor: pointer; }
.userv .userv-sg { position: relative; flex: 1 1 0; min-width: 0; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .22); transition: height .25s var(--ease); }
.userv .userv-sg.is-groupe { margin-left: 9px; }
.userv .userv-sg i { position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(var(--f, 0)); }
.userv .userv-sg.is-cur { background: rgba(255, 255, 255, .32); }
@media (hover: hover) and (pointer: fine) { .userv .userv-seg:hover .userv-sg { height: 6px; } }
.userv .userv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.userv .userv-row > * { pointer-events: auto; }
.userv .userv-d { display: flex; align-items: center; gap: 16px; }
.userv .userv-tc { display: inline-flex; align-items: center; gap: 9px; margin: 0; pointer-events: none; font-size: 11.5px; font-weight: 800; font-style: italic; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(246, 241, 234, .7); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); white-space: nowrap; }
.userv .userv-tc i { font-size: 19px; color: var(--acc); }
.userv .userv-tc b { font-size: 13px; font-weight: 900; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #fff; }
/* Boutons du lecteur : verre incliné, comme les boutons du site */
.userv .userv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 16px;
  border: 1px solid var(--verre-bord); background: var(--verre); color: rgba(246, 241, 234, .92);
  font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transform: skewX(-8deg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, background .3s, color .3s, transform .5s var(--ease), opacity .35s, visibility .35s; }
.userv .userv-btn > * { transform: skewX(8deg); }
.userv .userv-btn i { font-size: 22px; color: var(--acc); transition: transform .45s var(--ease); }
.userv .userv-btn:hover { border-color: rgba(236, 211, 177, .45); background: rgba(14, 13, 12, .82); color: #fff; }
.userv .userv-passer:hover i { transform: skewX(8deg) translateX(3px); }
.userv .userv-lec.is-fin .userv-passer { opacity: 0; visibility: hidden; }

/* ---------- Commandes du bas : plan en cours, précédent / lecture / suivant, aide clavier ---------- */
.userv .userv-bas { position: absolute; z-index: 6; left: var(--gut); right: var(--gut); bottom: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  pointer-events: none; transition: opacity .35s; }
.userv .userv-chap, .userv .userv-aide { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 11.5px; font-weight: 800; font-style: italic; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(246, 241, 234, .66); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); white-space: nowrap; }
.userv .userv-chap i { font-size: 19px; color: var(--acc); }
.userv .userv-chap b { font-size: 13px; font-weight: 900; letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; }
.userv .userv-aide { justify-self: end; gap: 8px; letter-spacing: .08em; }
.userv .userv-aide kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border: 1px solid rgba(236, 211, 177, .3); border-bottom-width: 2px; border-radius: 4px;
  background: rgba(13, 12, 11, .55); font: 800 11px/1 'Poppins', sans-serif; font-style: normal; letter-spacing: .02em; color: #fff; }
.userv .userv-aide span + kbd { margin-left: 8px; }
.userv .userv-tr { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.userv .userv-ico { width: 48px; height: 48px; padding: 0; }
.userv .userv-ico i { font-size: 30px; color: #fff; }
.userv .userv-ico:disabled { opacity: .35; cursor: default; }
.userv .userv-ico:disabled:hover { border-color: var(--verre-bord); background: var(--verre); }
.userv .userv-play { min-width: 64px; height: 52px; padding: 0 18px; border: 0; background: var(--beige); color: var(--on-acc); box-shadow: 5px 5px 0 rgba(236, 211, 177, .18); }
.userv .userv-play i { font-size: 30px; color: var(--on-acc); }
.userv .userv-play:hover { background: var(--beige); color: var(--on-acc); box-shadow: 8px 8px 0 rgba(236, 211, 177, .3); transform: skewX(-8deg) translate(-2px, -2px); }
.userv .userv-play span { display: none; font-size: 13px; }
.userv .userv-lec.is-fin .userv-play { padding: 0 24px 0 18px; }
.userv .userv-lec.is-fin .userv-play span { display: inline; }
.userv .userv-lec.is-fin .userv-play:hover i { transform: skewX(8deg) rotate(-200deg); }
/* Maintenir appuyé sur l'image : pause et interface effacée (comme des stories) */
.userv .userv-lec.is-maintien .userv-haut, .userv .userv-lec.is-maintien .userv-bas { opacity: 0; }
/* Pause : la caméra et le compte à rebours du numéro s'arrêtent ; les textes finissent d'apparaître (on met en pause pour lire) */
.userv .userv-lec.is-pause .userv-pl-kb, .userv .userv-lec.is-pause .userv-r-num-f, .userv .userv-lec.is-pause .userv-ch-in { animation-play-state: paused !important; }
.userv .userv-lec.is-pause .userv-sg.is-cur i { animation: userv-sg-pause 1.4s ease-in-out infinite; }
@keyframes userv-sg-pause { 50% { opacity: .45; } }

/* ======================================================================
   PLAN 1 — OUVERTURE : rideau, « Pourquoi Ultimate RP ? »
   ====================================================================== */
.userv .userv-ouv .userv-pl-voile { background: radial-gradient(70% 62% at 50% 52%, rgba(9, 8, 7, .62), rgba(9, 8, 7, .86) 82%), linear-gradient(0deg, rgba(9, 8, 7, .9) 0%, rgba(9, 8, 7, 0) 40%); }
.userv .userv-ouv-c { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.userv .userv-ouv-k { margin: 0 0 4px; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.15; color: var(--acc); }
.userv .userv-pl.is-on .userv-ouv-k { animation: userv-monte 1s var(--ease) both 1.15s; }
.userv .userv-ouv-t { --d: 1300ms; max-width: 100%; margin: 0 0 clamp(16px, 2.6vh, 26px); font-size: clamp(46px, min(8.4vw, 13vh), 146px); font-weight: 900; font-style: italic; line-height: 1.02; letter-spacing: -.045em;
  word-spacing: .1em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 10px 50px rgba(0, 0, 0, .5); }
.userv .userv-ouv-t .hl { --hd-delay: 1.75s; }
.userv .userv-ouv-d { --m0: 2.3s; max-width: 660px; margin: 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; font-style: italic; line-height: 1.5; text-wrap: balance; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
/* Rideau : deux panneaux noirs qui s'ouvrent */
.userv .userv-ouv-rideau { position: absolute; left: 0; right: 0; z-index: 2; height: 50.5%; background: #050403; pointer-events: none; transform: scaleY(0); }
.userv .userv-ouv-rideau-h { top: 0; transform-origin: 50% 0; }
.userv .userv-ouv-rideau-b { bottom: 0; transform-origin: 50% 100%; }
.userv .userv-pl.is-on .userv-ouv-rideau { animation: userv-rideau 1.7s cubic-bezier(.76, 0, .24, 1) both .15s; }
@keyframes userv-rideau { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes userv-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ======================================================================
   PLANS 2 À 7 — LES SIX RAISONS : photo, gros numéro, titre, sous-titres
   mises en scène : g (texte à gauche), d (texte à droite), ins (photos épinglées), c (carton-titre centré, comme le Lore « Film »)
   ====================================================================== */
.userv .userv-r .userv-pl-voile { background: linear-gradient(90deg, rgba(8, 7, 6, .9) 0%, rgba(8, 7, 6, .66) 34%, rgba(8, 7, 6, .14) 66%, rgba(8, 7, 6, .32) 100%), linear-gradient(0deg, rgba(8, 7, 6, .92) 0%, rgba(8, 7, 6, 0) 54%); }
.userv .userv-r[data-mise="d"] .userv-pl-voile { background: linear-gradient(270deg, rgba(8, 7, 6, .9) 0%, rgba(8, 7, 6, .66) 34%, rgba(8, 7, 6, .14) 66%, rgba(8, 7, 6, .32) 100%), linear-gradient(0deg, rgba(8, 7, 6, .92) 0%, rgba(8, 7, 6, 0) 54%); }
.userv .userv-r[data-mise="c"] .userv-pl-voile { background: radial-gradient(64% 70% at 50% 56%, rgba(8, 7, 6, .8), rgba(8, 7, 6, .5) 70%, rgba(8, 7, 6, .72)), linear-gradient(0deg, rgba(8, 7, 6, .9) 0%, rgba(8, 7, 6, 0) 45%); }
.userv .userv-r[data-mise="ins"] .userv-pl-voile { background: linear-gradient(90deg, rgba(8, 7, 6, .92) 0%, rgba(8, 7, 6, .7) 36%, rgba(8, 7, 6, .34) 64%, rgba(8, 7, 6, .5) 100%), linear-gradient(0deg, rgba(8, 7, 6, .9) 0%, rgba(8, 7, 6, 0) 54%); }
.userv .userv-r-c { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.userv .userv-r[data-mise="d"] .userv-r-c { align-items: flex-end; }
.userv .userv-r[data-mise="c"] .userv-r-c { align-items: center; justify-content: center; text-align: center; }
.userv .userv-r-bloc { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(62%, 880px); }
.userv .userv-r[data-mise="ins"] .userv-r-bloc { max-width: min(54%, 820px); }
.userv .userv-r[data-mise="c"] .userv-r-bloc { align-items: center; max-width: min(100%, 1100px); }
/* Gros numéro : contour beige qui se remplit pendant le plan (il sert de compte à rebours) */
.userv .userv-r-num { position: absolute; z-index: 1; top: 50%; right: 0; display: flex; align-items: flex-start; font-size: clamp(120px, min(21vw, 33vh), 330px); font-weight: 900; font-style: italic;
  line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; transform: translateY(-50%); pointer-events: none; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .45)); }
.userv .userv-r[data-mise="d"] .userv-r-num { right: auto; left: 0; }
.userv .userv-r-num.is-flux { position: relative; top: auto; right: auto; left: auto; margin: 0 0 .04em -.04em; font-size: clamp(84px, min(11vw, 17vh), 180px); transform: none; }
.userv .userv-r-num-n { position: relative; display: block; padding: 0 .06em; }
.userv .userv-r-num-o { display: block; color: transparent; -webkit-text-stroke: 2px rgba(236, 211, 177, .66); }
.userv .userv-r-num-f { position: absolute; inset: 0; padding: inherit; display: block; background: linear-gradient(180deg, #f6e6cc 15%, #c49c6b 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(0 100% 0 0); }
.userv .userv-r-num small { margin-top: .2em; font-size: .19em; letter-spacing: .02em; color: var(--acc); -webkit-text-stroke: 0; }
.userv .userv-pl.is-on .userv-r-num { animation: userv-num-in 1.3s var(--ease) both .05s; }
.userv .userv-pl.is-on .userv-r-num-f { animation: userv-remplir var(--dur, 8s) linear both; }
@keyframes userv-num-in { from { opacity: 0; translate: 10% 0; } to { opacity: 1; translate: 0 0; } }
@keyframes userv-remplir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.userv .userv-r[data-mise="d"].is-on .userv-r-num, .userv .userv-r .userv-r-num.is-flux { animation-name: userv-num-in-g; }
@keyframes userv-num-in-g { from { opacity: 0; translate: -10% 0; } to { opacity: 1; translate: 0 0; } }
/* Titre : une ligne par mot, le dernier mot en valeur (traitement « Voile ») */
.userv .userv-r-t { max-width: 100%; margin: 0; font-size: clamp(46px, min(8.2vw, 12.6vh), 150px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.045em; text-transform: uppercase;
  text-shadow: 0 10px 50px rgba(0, 0, 0, .55); }
.userv .userv-r-t .hl { --hd-delay: .4s; }
/* Sous-titres, avec l'icône de la raison */
.userv .userv-r-p { --m0: .85s; display: flex; align-items: center; gap: 16px; max-width: 640px; margin: clamp(16px, 2.6vh, 28px) 0 0; font-size: clamp(16px, 1.45vw, 22px); font-weight: 600; line-height: 1.5;
  color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .75); text-wrap: pretty; }
.userv .userv-r-p > i { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(236, 211, 177, .55); background: rgba(13, 12, 11, .55);
  color: var(--acc); font-size: 22px; }
.userv .userv-pl.is-on .userv-r-p > i { animation: userv-pop .7s cubic-bezier(.34, 1.56, .64, 1) both .5s; }
@keyframes userv-pop { from { opacity: 0; transform: scale(.4) rotate(-30deg); } to { opacity: 1; transform: none; } }
.userv .userv-r[data-mise="c"] .userv-r-p { flex-direction: column; gap: 14px; max-width: 700px; text-wrap: balance; }
/* Photos épinglées (catalogues de l'ancien site) */
.userv .userv-r-pols { position: absolute; z-index: 1; right: 0; top: 50%; width: min(40%, 540px); aspect-ratio: 1.25; transform: translateY(-50%); pointer-events: none; }
.userv .userv-r-pol { position: absolute; width: 60%; padding: 8px; background: var(--papier); rotate: var(--rot); box-shadow: 0 34px 60px -24px #000, 0 10px 24px -12px rgba(0, 0, 0, .6); }
.userv .userv-r-pol:nth-child(1) { left: 0; top: 0; --rot: -6deg; }
.userv .userv-r-pol:nth-child(2) { right: 0; top: 20%; --rot: 5deg; }
.userv .userv-r-pol:nth-child(3) { left: 16%; bottom: 0; --rot: -2deg; }
.userv .userv-r-pol-in { position: relative; display: block; overflow: hidden; }
.userv .userv-r-pol-in.ht::after { z-index: 1; }
.userv .userv-r-pol .userv-vg { filter: saturate(.92) contrast(1.06); }
.userv .userv-r-pol .userv-tape { top: -12px; left: calc(50% - 40px); width: 80px; height: 24px; rotate: -4deg; }
.userv .userv-r-pol:nth-child(2) .userv-tape { rotate: 6deg; }
.userv .userv-pl.is-on .userv-r-pol { animation: userv-pol-in 1s var(--ease) both; animation-delay: calc(.55s + var(--k, 0) * .28s); }
@keyframes userv-pol-in { from { opacity: 0; transform: translateY(46px) scale(1.1); } to { opacity: 1; transform: none; } }

/* ======================================================================
   PLANS 8 À 11 — LES CHIFFRES EN GROS PLANS
   La photo plein cadre bien visible (plus de cadre ni de fond noir), le chiffre géant d'un côté, son libellé dessous en « Voile »,
   en alternance à gauche (g) et à droite (d). Vie : la caméra avance, le chiffre compte, un reflet le traverse, une lueur respire derrière.
   ====================================================================== */
.userv .userv-ch .userv-pl-ph .userv-zoom { filter: saturate(.86) contrast(1.08) brightness(.92) sepia(.12); }
.userv .userv-ch .userv-pl-voile { background:
  linear-gradient(90deg, rgba(8, 7, 6, .92) 0%, rgba(8, 7, 6, .74) 30%, rgba(8, 7, 6, .3) 58%, rgba(8, 7, 6, .12) 80%, rgba(8, 7, 6, .3) 100%),
  linear-gradient(0deg, rgba(8, 7, 6, .7) 0%, rgba(8, 7, 6, 0) 40%); }
.userv .userv-ch[data-mise="d"] .userv-pl-voile { background:
  linear-gradient(270deg, rgba(8, 7, 6, .92) 0%, rgba(8, 7, 6, .74) 30%, rgba(8, 7, 6, .3) 58%, rgba(8, 7, 6, .12) 80%, rgba(8, 7, 6, .3) 100%),
  linear-gradient(0deg, rgba(8, 7, 6, .7) 0%, rgba(8, 7, 6, 0) 40%); }
.userv .userv-ch-c { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.userv .userv-ch[data-mise="d"] .userv-ch-c { align-items: flex-end; }
.userv .userv-ch-in { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(60%, 860px); transform-origin: 0 60%; }
.userv .userv-ch[data-mise="d"] .userv-ch-in { align-items: flex-end; text-align: right; transform-origin: 100% 60%; }
.userv .userv-pl.is-on .userv-ch-in { animation: userv-pousse var(--dur, 4s) linear both; }
@keyframes userv-pousse { from { transform: scale(1); } to { transform: scale(1.05); } }
/* Lueur chaude derrière le chiffre, qui respire doucement */
.userv .userv-ch-in::before { content: ""; position: absolute; z-index: -1; left: -18%; right: -18%; top: 0; bottom: -10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 211, 177, .16), rgba(236, 211, 177, .05) 55%, transparent); opacity: 0; }
.userv .userv-pl.is-on .userv-ch-in::before { animation: userv-lueur 3.2s ease-in-out both .3s; }
@keyframes userv-lueur { 0% { opacity: 0; transform: scale(.85); } 40% { opacity: 1; transform: none; } 70% { opacity: .7; } 100% { opacity: 1; transform: scale(1.04); } }
/* « Gros plan 01/04 » : petit mot de la DA, au-dessus du chiffre */
.userv .userv-ch-k { display: inline-flex; align-items: baseline; gap: 12px; margin: 0 0 clamp(0px, .6vh, 8px); color: var(--acc); text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.userv .userv-ch-k .old { font-size: clamp(26px, 2.3vw, 36px); line-height: 1.1; }
.userv .userv-ch-k-n { font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #fff; }
.userv .userv-ch-k-n small { font-size: 1em; font-weight: 800; color: rgba(246, 241, 234, .55); }
.userv .userv-pl.is-on .userv-ch-k { animation: userv-glisse .7s var(--ease) both .15s; }
@keyframes userv-glisse { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.userv .userv-ch[data-mise="d"].is-on .userv-ch-k { animation-name: userv-glisse-d; }
@keyframes userv-glisse-d { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
/* Le chiffre : beige en dégradé ; un reflet le traverse une fois qu'il a fini de compter */
.userv .userv-ch-n { display: block; max-width: 100%; margin: 0 -.04em -.03em; padding: 0 .08em; font-size: clamp(120px, min(20vw, 33vh), 330px); font-weight: 900; font-style: italic; line-height: .92;
  letter-spacing: -.06em; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 252, 245, .55) 46%, #fffdf8 50%, rgba(255, 252, 245, .55) 54%, transparent 60%) -160% 0 / 230% 100% no-repeat,
    linear-gradient(180deg, #f8ead2 12%, #c49c6b 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .55)); }
/* À droite : l'italique penche vers la droite, le chiffre recule un peu pour finir à l'aplomb du libellé */
.userv .userv-ch[data-mise="d"] .userv-ch-n { margin-right: .02em; margin-left: 0; }
/* Libellé : titre en « Voile » (fine barre beige, voile sombre qui se déroule), lettre par lettre */
.userv .userv-ch-l { --d: 420ms; max-width: 100%; margin: clamp(2px, .6vh, 8px) 0 0; font-size: clamp(30px, min(4vw, 6.6vh), 64px); font-weight: 900; font-style: italic; line-height: 1.1;
  letter-spacing: -.02em; text-transform: uppercase; text-shadow: 0 6px 30px rgba(0, 0, 0, .55); }
.userv .userv-ch-l .hl { --hd-delay: .7s; white-space: nowrap; }
/* Entrée du chiffre (chaque gros plan a son mouvement) puis le reflet */
.userv .userv-pl.is-on[data-v="0"] .userv-ch-n { animation: userv-ch-mise 1s cubic-bezier(.16, 1, .3, 1) both .1s, userv-reflet 1.3s cubic-bezier(.45, 0, .2, 1) both 1.5s; }
.userv .userv-pl.is-on[data-v="1"] .userv-ch-n { animation: userv-ch-cote .9s cubic-bezier(.16, 1, .3, 1) both .1s, userv-reflet 1.3s cubic-bezier(.45, 0, .2, 1) both 1.5s; }
.userv .userv-pl.is-on[data-v="2"] .userv-ch-n { animation: userv-ch-bas .9s cubic-bezier(.16, 1, .3, 1) both .1s, userv-reflet 1.3s cubic-bezier(.45, 0, .2, 1) both 1.5s; }
.userv .userv-pl.is-on[data-v="3"] .userv-ch-n { animation: userv-ch-recul 1s cubic-bezier(.16, 1, .3, 1) both .1s, userv-reflet 1.3s cubic-bezier(.45, 0, .2, 1) both 1.5s; }
@keyframes userv-ch-mise { from { opacity: 0; transform: scale(1.4); filter: blur(16px) drop-shadow(0 10px 40px rgba(0, 0, 0, .55)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 10px 40px rgba(0, 0, 0, .55)); } }
@keyframes userv-ch-cote { from { opacity: 0; transform: translateX(16%) skewX(-10deg); } to { opacity: 1; transform: none; } }
@keyframes userv-ch-bas { from { opacity: 0; transform: translateY(24%); } to { opacity: 1; transform: none; } }
@keyframes userv-ch-recul { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
/* Reflet : de gauche à droite (hors du chiffre avant et après) */
@keyframes userv-reflet { from { background-position: 118% 0, 0 0; } to { background-position: -16% 0, 0 0; } }

/* ======================================================================
   PLAN 12 — L'AFFICHE DE FIN : affiche scotchée, les 2 boutons de l'appel
   ====================================================================== */
.userv .userv-fin .userv-pl-ph .userv-zoom { filter: blur(16px) saturate(.85) brightness(.5); }
.userv .userv-fin .userv-pl-voile { background: radial-gradient(80% 70% at 50% 40%, rgba(9, 8, 7, .3), rgba(9, 8, 7, .85)); }
.userv .userv-fin-faisceau { position: absolute; z-index: -1; left: 50%; top: 0; width: 170vw; height: 100%; transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 180deg at 50% -4%, transparent 160deg, rgba(236, 211, 177, .07) 169deg, rgba(236, 211, 177, .15) 180deg, rgba(236, 211, 177, .07) 191deg, transparent 200deg); }
.userv .userv-pl.is-on .userv-fin-faisceau { animation: userv-faisceau 3.4s ease-in-out infinite; }
@keyframes userv-faisceau { 0%, 100% { opacity: 1; } 45% { opacity: .62; } 52% { opacity: .9; } 58% { opacity: .7; } }
.userv .userv-fin-c { display: flex; align-items: center; justify-content: center; padding: 18px 0 4px; }
.userv .userv-aff { position: relative; display: flex; width: min(100%, 1200px); height: min(100%, 660px); padding: 10px; background: var(--papier); rotate: -.6deg;
  box-shadow: 0 60px 110px -40px #000, 0 20px 40px -20px rgba(0, 0, 0, .7); }
.userv .userv-aff > .userv-tape:first-child { top: -14px; left: 12%; rotate: -5deg; }
.userv .userv-aff > .userv-tape + .userv-tape { top: -12px; right: 14%; rotate: 4deg; }
.userv .userv-aff-in { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .56fr); overflow: hidden; isolation: isolate; background: #0d0c0b; }
.userv .userv-aff-ph { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.userv .userv-aff-ph .userv-zoom { filter: saturate(.92) contrast(1.06); }
.userv .userv-aff-ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9, 8, 7, .97) 0%, rgba(9, 8, 7, .9) 40%, rgba(9, 8, 7, .3) 66%, rgba(9, 8, 7, .04) 100%), linear-gradient(0deg, rgba(9, 8, 7, .6), transparent 32%); }
.userv .userv-aff-txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; min-height: 0; padding: clamp(24px, 3.2vw, 52px); }
.userv .userv-aff-studio { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 12.5px; font-weight: 900; font-style: italic; letter-spacing: .06em; text-transform: uppercase; }
.userv .userv-aff-studio .couronne { width: 28px; color: var(--couronne); }
.userv .userv-aff-k { margin: clamp(10px, 2vh, 22px) 0 2px; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.15; color: var(--acc); }
.userv .userv-aff-t { max-width: 100%; margin: 0 0 clamp(12px, 2vh, 20px); font-size: clamp(36px, min(4.5vw, 7.4vh), 72px); font-weight: 900; font-style: italic; line-height: 1.04; letter-spacing: -.04em;
  word-spacing: .08em; text-transform: uppercase; text-wrap: balance; }
.userv .userv-aff-t .hl { --hd-delay: .9s; }
.userv .userv-aff-t { --d: 500ms; }
.userv .userv-aff-p { max-width: 500px; margin: 0 0 clamp(18px, 3vh, 30px); font-size: clamp(15.5px, 1.3vw, 19px); line-height: 1.6; color: rgba(246, 241, 234, .88); }
.userv .userv-aff-b { display: flex; flex-wrap: wrap; gap: 16px 18px; }
.userv .userv-aff-bill { width: 100%; margin: clamp(20px, 3.4vh, 34px) 0 0; padding-top: 18px; border-top: 1px solid rgba(236, 211, 177, .18); font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1.85;
  text-transform: uppercase; color: rgba(246, 241, 234, .58); }
.userv .userv-aff-bill b { font-weight: 900; color: var(--acc); }
/* Arrivée de l'affiche : elle tombe, se pose, puis on la scotche */
.userv .userv-pl.is-on .userv-aff { animation: userv-aff-in 1.2s var(--ease) both .2s; }
@keyframes userv-aff-in { from { opacity: 0; translate: 0 60px; scale: .95; rotate: -3deg; } to { opacity: 1; translate: 0 0; scale: 1; rotate: -.6deg; } }
.userv .userv-pl.is-on .userv-aff > .userv-tape { animation: userv-scotch .5s var(--ease) both 1.05s; }
.userv .userv-pl.is-on .userv-aff > .userv-tape + .userv-tape { animation-delay: 1.2s; }
@keyframes userv-scotch { from { opacity: 0; scale: 1.5; } to { opacity: 1; scale: 1; } }
.userv .userv-pl.is-on .userv-aff-txt > :not(.userv-aff-t) { animation: userv-monte .8s var(--ease) both; animation-delay: calc(.75s + var(--k, 0) * 90ms); }

/* ---------- Adaptation écrans ---------- */
/* Écrans moyens : texte un peu plus large, photos épinglées plus petites ; trop étroit, elles s'effacent */
@media (max-width: 1099px) {
  .userv .userv-r-bloc { max-width: 66%; }
  .userv .userv-r[data-mise="ins"] .userv-r-bloc { max-width: 60%; }
  .userv .userv-r-pols { width: 35%; }
}
@media (max-width: 899px) {
  .userv .userv-r-pols { display: none; }
  .userv .userv-r[data-mise="ins"] .userv-r-bloc { max-width: 100%; }
}
/* Aide clavier : seulement à la souris, sur grand écran */
@media not all and (hover: hover) and (pointer: fine) { .userv .userv-aide { visibility: hidden; } }
@media (max-width: 999px) { .userv .userv-aide { visibility: hidden; } }
/* Écrans peu hauts : l'affiche se resserre */
@media (max-height: 860px) {
  .userv .userv-aff-bill { display: none; }
}
@media (max-width: 960px) {
  .userv .userv-aff-in { grid-template-columns: minmax(0, 1fr) minmax(0, .34fr); }
}
@media (max-width: 700px) {
  .userv .btn { height: 52px; padding: 0 22px; }

  /* Téléphone : format vertical, façon stories */
  .userv .userv-lec { --haut: calc(var(--hd) + 74px); --bas: 86px; }
  .userv .userv-pl-ph .userv-zoom { background-position: var(--pm, var(--pos)); transform-origin: var(--pm, var(--pos)); transform: scale(var(--zm, var(--z))); }
  .userv .userv-retour { font-size: 11px; padding: 0 14px 0 10px; }
  .userv .userv-tc { display: none; }
  .userv .userv-btn { height: 40px; padding: 0 14px; }
  .userv .userv-seg { gap: 3px; }
  .userv .userv-sg.is-groupe { margin-left: 6px; }
  .userv .userv-bas { bottom: 16px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .userv .userv-chap { visibility: hidden; }
  .userv .userv-ico { width: 48px; height: 48px; }
  .userv .userv-ombre-h { height: calc(var(--hd) + 130px); }
  .userv .userv-ombre-b { height: 150px; }
  /* Ouverture */
  .userv .userv-ouv .userv-pl-voile { background: linear-gradient(0deg, rgba(9, 8, 7, .94) 0%, rgba(9, 8, 7, .72) 40%, rgba(9, 8, 7, .45) 70%, rgba(9, 8, 7, .6) 100%); }
  .userv .userv-ouv-c { justify-content: flex-end; padding-bottom: 8px; }
  .userv .userv-ouv-k { font-size: 34px; }
  .userv .userv-ouv-t { font-size: clamp(38px, 12.2vw, 60px); }
  .userv .userv-ouv-d { font-size: 16.5px; }
  /* Raisons : tout le texte en bas (numéro, titre, sous-titres), l'image reste dégagée en haut */
  .userv .userv-r .userv-pl-voile, .userv .userv-r[data-mise="d"] .userv-pl-voile, .userv .userv-r[data-mise="ins"] .userv-pl-voile {
    background: linear-gradient(0deg, rgba(8, 7, 6, .96) 0%, rgba(8, 7, 6, .82) 34%, rgba(8, 7, 6, .3) 62%, rgba(8, 7, 6, .42) 100%); }
  .userv .userv-r[data-mise="c"] .userv-pl-voile { background: linear-gradient(0deg, rgba(8, 7, 6, .96) 0%, rgba(8, 7, 6, .8) 36%, rgba(8, 7, 6, .3) 64%, rgba(8, 7, 6, .42) 100%); }
  .userv .userv-r[data-mise="d"] .userv-r-c { align-items: flex-start; }
  .userv .userv-r[data-mise="c"] .userv-r-c { justify-content: flex-end; }
  .userv .userv-r-bloc, .userv .userv-r[data-mise="ins"] .userv-r-bloc { max-width: 100%; }
  .userv .userv-r-num, .userv .userv-r[data-mise="d"] .userv-r-num, .userv .userv-r-num.is-flux { position: relative; top: auto; right: auto; left: auto; margin: 0 0 .04em -.04em; transform: none; font-size: clamp(72px, 22vw, 100px); }
  .userv .userv-r.is-on .userv-r-num, .userv .userv-r[data-mise="d"].is-on .userv-r-num { animation-name: userv-num-in-g; }
  .userv .userv-r-num-o { -webkit-text-stroke-width: 1.5px; }
  .userv .userv-r-t { font-size: clamp(38px, 12.4vw, 56px); }
  .userv .userv-r-p { gap: 12px; font-size: 16px; align-items: flex-start; }
  .userv .userv-r[data-mise="c"] .userv-r-p { align-items: center; gap: 12px; }
  .userv .userv-r-p > i { width: 40px; height: 40px; font-size: 19px; }
  /* Chiffres : la photo en haut, le chiffre et son libellé en bas, toujours à gauche */
  .userv .userv-ch .userv-pl-voile, .userv .userv-ch[data-mise="d"] .userv-pl-voile {
    background: linear-gradient(0deg, rgba(8, 7, 6, .95) 0%, rgba(8, 7, 6, .8) 30%, rgba(8, 7, 6, .2) 60%, rgba(8, 7, 6, .36) 100%); }
  /* (remonté au-dessus du voile sombre des commandes : le libellé reste bien blanc) */
  .userv .userv-ch-c, .userv .userv-ch[data-mise="d"] .userv-ch-c { justify-content: flex-end; align-items: flex-start; padding-bottom: 26px; }
  .userv .userv-ch-in, .userv .userv-ch[data-mise="d"] .userv-ch-in { max-width: 100%; align-items: flex-start; text-align: left; transform-origin: 0 100%; }
  .userv .userv-ch[data-mise="d"].is-on .userv-ch-k { animation-name: userv-glisse; }
  .userv .userv-ch-k .old { font-size: 28px; }
  .userv .userv-ch-k-n { font-size: 13px; }
  .userv .userv-ch-n { font-size: clamp(104px, 34vw, 156px); }
  .userv .userv-ch-l { font-size: clamp(28px, 9vw, 40px); }
  /* Affiche : photo en haut, texte en bas, boutons l'un sous l'autre */
  .userv .userv-fin-c { padding: 14px 0 2px; }
  .userv .userv-aff { height: 100%; padding: 7px; rotate: -.4deg; }
  .userv .userv-aff > .userv-tape:first-child { left: 8%; width: 90px; height: 26px; }
  .userv .userv-aff > .userv-tape + .userv-tape { right: 8%; width: 90px; height: 26px; }
  .userv .userv-aff-in { display: flex; flex-direction: column; justify-content: flex-end; }
  .userv .userv-aff-ph::after { background: linear-gradient(0deg, #0d0c0b 0%, rgba(13, 12, 11, .94) 50%, rgba(13, 12, 11, .25) 78%, rgba(13, 12, 11, .45) 100%); }
  .userv .userv-aff-txt { padding: 0 16px 18px; }
  .userv .userv-aff-k { margin-top: 10px; font-size: 28px; }
  .userv .userv-aff-t { font-size: clamp(32px, 10vw, 44px); }
  .userv .userv-aff-p { font-size: 15px; line-height: 1.55; }
  .userv .userv-aff-b { width: 100%; gap: 12px; }
  .userv .userv-aff-b .btn { width: 100%; }
  .userv .userv-aff-bill { display: none; }
  @keyframes userv-aff-in { from { opacity: 0; translate: 0 50px; scale: .96; rotate: -2deg; } to { opacity: 1; translate: 0 0; scale: 1; rotate: -.4deg; } }
}
/* Téléphones peu hauts (barres du navigateur) : on resserre */
@media (max-width: 700px) and (max-height: 740px) {
  .userv .userv-lec { --haut: calc(var(--hd) + 70px); --bas: 80px; }
  .userv .userv-r-t { font-size: clamp(34px, 11vw, 48px); }
  .userv .userv-r-p { font-size: 15px; }
  .userv .userv-r-num, .userv .userv-r[data-mise="d"] .userv-r-num, .userv .userv-r-num.is-flux { font-size: 64px; }
  .userv .userv-aff-k { display: none; }
  .userv .userv-aff-studio { margin-bottom: 6px; }
  .userv .userv-aff-t { font-size: clamp(30px, 9vw, 38px); }
  .userv .userv-aff-p { font-size: 14.5px; margin-bottom: 14px; }
  .userv .userv-aff-b .btn { height: 48px; }
}