/* ---------- Base ---------- */
:root {
  --text: #000;
  --muted: #666;
  --soft: #767676;
  --faint: #c2c2c2;
  --line: #ececec;
  --pill: #f2f2f2;
  --card: #f7f7f7;
  --issue: #ff2d87;
  --max: 1240px;
  --narrow: 900px;
  /* Neue Montreal est une police payante (Pangram Pangram) : Inter Tight en remplacement */
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; overflow-x: clip; }
body {
  background: #fff;
  color: var(--text);
  font: 400 14px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
  font-feature-settings: "cv09", "cv01", "cv05", "ss03";
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: calc(var(--max) + 200px); margin: 0 auto; padding: 0 100px; }
.wrap--narrow { max-width: calc(var(--narrow) + 200px); }

/* ---------- Header ---------- */
.header { display: flex; justify-content: space-between; align-items: center; height: 130px; }
.logo { width: 75px; height: 17px; background: #000; -webkit-mask: var(--logo, url(../assets/signature.svg)) center/contain no-repeat; mask: var(--logo, url(../assets/signature.svg)) center/contain no-repeat; }
.nav { display: flex; gap: 40px; font-size: 12px; }
.nav a { color: var(--faint); transition: color .2s; }
.nav a:hover, .nav a[aria-current] { color: #000; }

/* ---------- Profil ---------- */
.profile { display: flex; gap: 50px; align-items: center; padding: 45px 0 55px; border-bottom: 1px solid var(--line); }
/* Carrousel de photos (composant Framer « Caroussel 2 ») : un clic l'ouvre, le nom glisse à droite */
.carousel { display: flex; gap: 10px; flex: none; width: 200px; height: 200px; margin-right: 0; padding: 0; border: 0; background: none;
            overflow: hidden; scrollbar-width: none; cursor: pointer;
            transition: width 1.2s cubic-bezier(.25, 1.15, .4, 1), --fade .6s ease; }
.carousel::-webkit-scrollbar { display: none; }
.carousel img { flex: none; width: 200px; height: 200px; object-fit: cover; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5); }
/* Au bout du carrousel : la dernière photo s'étire, file à l'horizontale et blanchit ; « Photographs → » apparaît */
.profile { position: relative; }
.carousel[aria-expanded="true"].is-pulling { --fade: 0px; }
/* La traînée blanchit : plus lumineuse et moins contrastée, jusqu'à presque se fondre dans le blanc de la page */
.carousel.is-pulling img:last-child { object-fit: fill; filter: url(#carousel-smear) brightness(calc(1 + var(--fade-out, 0) * .9)) contrast(calc(1 - var(--fade-out, 0) * .55)) saturate(calc(1 - var(--fade-out, 0) * .5)); }
.carousel.is-releasing img:last-child { transition: width .65s cubic-bezier(.3, 1.9, .5, 1); }
.carousel-hint { position: absolute; display: inline-flex; gap: 6px; padding: 6px 11px; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px;
                 pointer-events: none; opacity: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.carousel.is-releasing + .carousel-hint { transition: opacity .3s, translate .3s; }
@media (max-width: 809px) { .carousel-hint { display: none; } }
/* Ouvert : deux photos entières et une fine tranche de la troisième ; le nom garde le même écart de 50 px qu'à l'état fermé */
/* Sur un écran plus étroit, il s'ouvre moins pour laisser la place au bloc contact (390 px) */
.carousel[aria-expanded="true"] { width: max(200px, min(437px, calc(100% - 440px))); overflow-x: auto; --fade: 90px; }
/* Fondu blanc sur le bord droit quand le carrousel est ouvert */
@property --fade { syntax: '<length>'; inherits: false; initial-value: 0px; }
.carousel { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); }
.profile__name { font: 500 26px/0.8 var(--display); letter-spacing: -0.06em; }
.profile__job { display: inline-flex; gap: 8px; align-items: center; margin-top: 30px; font: 400 18px/0.8 var(--display); letter-spacing: -0.06em; color: #c3ccd6; transition: color .25s; }
.profile__job:hover { color: #0a66c2; }
/* Métier + disponibilité sur une même ligne ; seul « Product Designer » et le logo LinkedIn passent au bleu au survol */
.profile__role { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 8px; margin-top: 30px; }
.profile__role .profile__job { margin-top: 0; }
.profile__status { font-size: 12px; color: var(--faint); }
/* Icônes en masque CSS pour pouvoir changer leur couleur au survol */
.icon { display: block; background: currentColor; -webkit-mask: var(--src) center/contain no-repeat; mask: var(--src) center/contain no-repeat; transition: background-color .25s; }
.icon--linkedin { --src: url(../assets/linkedin.svg); width: 15px; height: 15px; }
.icon--whatsapp { --src: url(../assets/whatsapp.svg); width: 20px; height: 20px; }
.icon--x { --src: url(../assets/x.svg); width: 18px; height: 17px; }
.icon--promethee { --src: url(../assets/promethee.svg); width: 20px; height: 19px; }
.contact { display: inline-flex; align-items: center; gap: 10px; width: 390px; height: 50px; margin-top: 30px; padding: 0 5px 0 25px; background: #efefef; border-radius: 25px; }
.contact__mail { flex: 1; font: 500 18px/22px "Inter", sans-serif; color: var(--soft); letter-spacing: 0; cursor: pointer; transition: color .25s; }
.contact__mail:hover { color: #000; }
.contact__btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 99px; background: #e5e5e5; color: var(--soft); transition: background .2s, color .2s; }
.contact__btn:hover { color: #000; background: #dedede; }
.profile__info { display: flex; flex-direction: column; align-items: flex-start; }
/* Classement Chess.com (accueil) : une ligne discrète sous le contact, le détail apparaît au survol */
.chess { position: relative; display: inline-flex; cursor: pointer; user-select: none; align-items: center; gap: 8px; margin-top: 18px; padding: 4px 0; font-size: 13px; color: var(--faint); }
.chess__icon { width: 15px; height: 15px; color: var(--faint); transition: color .25s, rotate .4s cubic-bezier(.34, 1.56, .64, 1); }
.chess__label { transition: color .25s; }
/* Icône + texte de la ligne : glissent ensemble quand on passe de Chess.com à GitHub */
.chess__head { display: inline-flex; align-items: center; gap: 8px; }
.chess__head.is-out { animation: head-out .16s ease-in forwards; }
.chess__head.is-in { animation: head-in .32s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes head-out { to { opacity: 0; translate: 0 -6px; } }
@keyframes head-in { from { opacity: 0; translate: 0 6px; } }
.chess__elo { position: relative; display: inline-flex; align-items: baseline; height: 22px; padding: 0 9px; overflow: hidden; border-radius: 99px; background: #efefef; color: var(--faint);
              transition: width .3s cubic-bezier(.34, 1.4, .64, 1), background .25s, color .25s; }
.chess__value { display: inline-flex; align-items: baseline; gap: 5px; height: 22px; white-space: nowrap; line-height: 22px; transition: translate .3s cubic-bezier(.34, 1.4, .64, 1), opacity .2s; }
.chess__value small { font-size: 11px; }
.chess__value b { font-weight: 600; font-variant-numeric: tabular-nums; color: #000; }
/* Pendant le changement, les deux valeurs se superposent : l'une sort par le haut, l'autre entre par le bas */
.chess__value.is-out { position: absolute; left: 9px; top: 0; translate: 0 -100%; opacity: 0; }
.chess__value.is-in { translate: 0 100%; opacity: 0; }
.chess:hover .chess__elo { background: #e4e4e4; }
/* Record de moins de 7 jours : étiquette « PB », anneau vert, « +N » qui s'envole, couronne sur le cavalier */
.chess__new { align-self: center; display: inline-grid; place-items: center; height: 16px; margin-left: 8px; padding: 0 6px 1px; border-radius: 99px; background: #dff8e3; color: #1f9d3a;
              font: 600 10px/1 var(--display, sans-serif); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
/* Lettres centrées sur leur hauteur de capitale, quelle que soit la police chargée (Safari 18+, Chrome 133+) */
@supports (text-box: trim-both cap alphabetic) { .chess__new { padding-bottom: 0; text-box: trim-both cap alphabetic; } }
/* Avec le tag PB : il se loge au bout de la pastille, 3 px du bord comme en haut et en bas */
.chess__elo:has(.chess__new) { padding-right: 3px; }
.chess__elo.is-record { animation: chess-ring 1.1s ease-out; }
@keyframes chess-ring { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 100% { box-shadow: 0 0 0 10px rgba(52, 199, 89, 0); } }
.chess__gain { position: absolute; right: -4px; top: -2px; color: #1f9d3a; font: 600 12px/1 var(--display, sans-serif); pointer-events: none; animation: chess-gain 1.6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes chess-gain { 0% { opacity: 0; translate: 0 6px; scale: .8; } 20% { opacity: 1; scale: 1.1; } 100% { opacity: 0; translate: 6px -26px; scale: 1; } }

/* Texte, cavalier et pastille partagent le même gris, et passent au noir ensemble au survol */
.chess:hover .chess__label, .chess:hover .chess__icon, .chess:hover .chess__elo { color: #000; }
.chess:hover .chess__icon { rotate: -12deg; }
/* Survol de l'étape GitHub : le logo prend le violet de GitHub */
.chess:hover .chess__icon--gh { color: #9400ff; }

/* ---------- Grille de projets ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 75px 0 150px; }
.card__media { position: relative; aspect-ratio: 595 / 446; background: var(--card); overflow: hidden; display: grid; place-items: center; }
.card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; }
.card__media--contain > :first-child { object-fit: contain; }
/* Survol comme sur Framer : le GIF du projet remplace le visuel + pastille Figma */
.card__hover { position: absolute; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.card__hover { inset: 0; }
/* Outils du projet : pastilles rondes à contour blanc plein ; elles se chevauchent nettement
   et apparaissent l'une après l'autre au survol */
.card__tools { position: absolute; right: 12px; bottom: 12px; display: flex; pointer-events: none; }
.card__tools img { box-sizing: content-box; flex: none; width: 30px; height: 30px; margin-left: -15px; object-fit: cover; border-radius: 50%; background: #fff;
                   border: 4px solid #fff; background-clip: padding-box; opacity: 0; translate: 0 4px;
                   transition: opacity .3s ease, translate .35s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * 60ms); }
.card:hover .card__tools img { opacity: 1; translate: 0 0; }
/* (la première ne recule pas : sinon le bloc rétrécit et une pastille seule s'écrase en ovale) */
.card__tools img:first-child { margin-left: 0; }
.card:hover .card__hover { opacity: 1; }
.card__caption { margin-top: 15px; color: var(--muted); }
/* Projet pas encore prêt : image en noir et blanc atténuée, pastille « Coming soon », ni lien ni survol */
.card--soon { cursor: default; }
.card--soon .card__media > img { filter: grayscale(1); opacity: .45; }
.card--soon .card__tools, .card--soon .card__hover { display: none; }
.card--soon .card__caption { color: var(--faint); }
.card__soon { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 11px/1 var(--display); color: #fff; }
.micro-plus { width: 15px; height: 15px; background: #c2c2c2; -webkit-mask: url(../assets/micro-dot.svg) center/contain no-repeat; mask: url(../assets/micro-dot.svg) center/contain no-repeat; }

/* ---------- Fil d'Ariane / pages internes ---------- */
.crumb { padding: 50px 0 30px; font-size: 12px; color: var(--faint); }
.crumb strong { color: #000; font-weight: 500; }
.lead { color: var(--muted); margin-bottom: 30px; }
.section { margin: 40px 0 60px; }
.section h2 { font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.section p { color: var(--muted); line-height: 1.3; max-width: 900px; }

/* ---------- Photographs ---------- */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 120px; }
.photo { cursor: zoom-in; }
.photo__media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--card); }
.photo__media img { width: 100%; height: 100%; object-fit: cover; }
.photo__exif { position: absolute; left: 10px; bottom: 10px; font-size: 10px; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.4); }
.photo__num { margin-top: 10px; font-size: 10px; color: var(--muted); }
.lightbox { position: fixed; inset: 0; background: rgba(255,255,255,.96); display: none; place-items: center; z-index: 50; cursor: zoom-out; }
.lightbox.open { display: grid; }
.lightbox img { max-height: 86vh; max-width: 86vw; }

/* ---------- About ---------- */
.intro { padding: 50px 0 10px; color: var(--muted); }
.intro p + p { margin-top: 17px; }
.acc { margin-top: 30px; max-width: 500px; }
.acc summary { list-style: none; cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before { content: ""; width: 6px; height: 6px; border: solid #000; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .2s; margin: 0 4px 0 2px; }
.acc[open] summary::before { transform: rotate(45deg) translate(-2px, -1px); }
.acc__body { padding-top: 20px; }
.row { display: flex; justify-content: space-between; color: var(--muted); padding: 5px 0; }
.sport { margin-bottom: 30px; color: var(--muted); }
.sport__head { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: 10px; }
.sport p { line-height: 1.2; margin-bottom: 10px; }
.sport img, .sport video { display: block; width: 100%; height: 205px; object-fit: cover; }
.sport__foot { display: flex; justify-content: space-between; font-size: 12px; font-weight: 300; margin-top: 10px; }
.sport__foot b { font-weight: 500; }
.topic { padding: 20px 0 25px; border-bottom: 1px solid var(--line); color: var(--muted); }
.topic h3 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
/* Art : les 4 images en rang, la carte active se lève et dévoile sa légende */
/* Calé à gauche sur le texte, peut déborder à droite jusqu'au bord de l'écran (data-bleed), 16 px de marge */
.art { margin: 60px calc(-1 * var(--bleed-r, 0px)) 0 0; padding: 0 16px 0 0; touch-action: pan-y; }
.art__track { display: flex; justify-content: flex-start; gap: 16px; padding: 24px 0 56px; }
.art__card { position: relative; flex: 0 1 250px; min-width: 0; cursor: pointer; outline: none; transition: translate .6s cubic-bezier(.2, .8, .2, 1); }
.art__card.is-active { translate: 0 -24px; cursor: default; }
.art__media { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: 12px; overflow: hidden; background: #f4f4f4; }
.art__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--p, 50% 50%); scale: var(--z, 1); transform-origin: var(--o, 50% 50%); }
.art__tag { position: absolute; top: 10px; right: 10px; padding: 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, .06); color: var(--faint);
            font: 500 12px/1 var(--display); font-style: normal; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .4s, color .4s; }
.art__card.is-active .art__tag { background: rgba(0, 0, 0, .55); color: #fff; }
.art__card figcaption { position: absolute; top: calc(100% + 8px); left: 0; width: max(100%, 200px); opacity: 0; translate: 0 -6px; transition: opacity .35s, translate .5s cubic-bezier(.2, .8, .2, 1); }
.art__card:nth-child(n + 3) figcaption { left: auto; right: 0; text-align: right; }
.art__card.is-active figcaption { opacity: 1; translate: 0 0; transition-delay: .2s; }
.art__card figcaption b { display: block; font: 500 14px/1.2 var(--display); letter-spacing: -.01em; color: #000; }
.art__card figcaption span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: #a3a3a3; }
.art__card:focus-visible .art__media { outline: 2px solid #000; outline-offset: 2px; }
.marquee { overflow: hidden; margin: 60px -100px 0 0; mask: linear-gradient(90deg, #000 85%, transparent); }
/* Pleine largeur de l'écran (site.js mesure l'écart entre la colonne et les bords) */
.marquee[data-bleed] { margin-left: calc(-1 * var(--bleed-l, 0px)); margin-right: calc(-1 * var(--bleed-r, 0px));
                       mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: scroll 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img { height: 219px; width: auto; }
@keyframes scroll { to { transform: translateX(-50%); } }
.robots { display: flex; gap: 20px; padding: 60px 10px 0; }
.robot { position: relative; display: block; border-radius: 50%; outline: none; }
.robots img { display: block; width: 75px; height: 75px; border-radius: 50%; object-fit: cover; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; }
/* Survol : contour noir (séparé de la photo par un fin liseré blanc) et nom dans une bulle au-dessus */
.robot:hover img, .robot:focus-visible img { transform: scale(1.1); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }
.robot__name { position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 2; padding: 6px 11px; border-radius: 99px; background: #111; color: #fff;
               font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; translate: -24px 6px; scale: .9; transform-origin: 24px 100%;
               transition: opacity .18s, translate .35s cubic-bezier(.34, 1.56, .64, 1), scale .35s cubic-bezier(.34, 1.56, .64, 1); }
.robot__name small { font-size: inherit; color: #9a9a9a; }
/* La bulle part du centre de la photo vers la droite ; sa pointe reste sur la photo */
.robot__name::after { content: ""; position: absolute; left: 24px; top: 100%; width: 8px; height: 8px; margin: -5px 0 0 -4px; background: #111; rotate: 45deg; border-radius: 1px; }
.robot:hover .robot__name, .robot:focus-visible .robot__name { opacity: 1; translate: -24px 0; scale: 1; }
.robots:hover .robot:not(:hover) .robot__name { opacity: 0; }
.robots:hover .robot:not(:hover) img { transform: none; box-shadow: none; }

/* ---------- Études de cas (générées depuis src/projects) ---------- */
.project { padding-bottom: 20px; }
.project .section p + p { margin-top: 10px; }
/* Aer : en-tête en conversation iMessage avec le fabricant. On voit le bas du téléphone (le haut sort du cadre) :
   fil de messages, champ de saisie, barre d'accueil. Les messages poussent les précédents vers le haut */
.chat { position: relative; margin: 30px 0 60px; aspect-ratio: 16 / 10; overflow: hidden; background: #f2f2f2; }
/* Le cadre et l'écran sont deux couches : l'écran est découpé à l'arrondi par clip-path (qui coupe aussi les calques animés,
   là où overflow: hidden laisse parfois passer des coins), et le cadre noir est redessiné par-dessus, comme filet de sécurité */
.chat__phone { position: absolute; left: 50%; top: 0; bottom: 7%; width: min(330px, 78%); translate: -50% 0; padding: 0 9px 9px;
  background: #111; border-radius: 0 0 48px 48px; box-shadow: 0 30px 60px rgba(0, 0, 0, .12); }
.chat__phone::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 9px solid #111; border-top: 0; border-radius: 0 0 48px 48px; }
.chat__screen { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 0 0 39px 39px;
  overflow: hidden; clip-path: inset(0 round 0 0 39px 39px); isolation: isolate; }
.chat__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0 14px 6px;
  -webkit-mask: linear-gradient(transparent, #000 18%); mask: linear-gradient(transparent, #000 18%); }
.chat__time { margin: 0; padding-bottom: 8px; text-align: center; font-size: 10px; color: #8e8e93; }
.chat__time b { font-weight: 600; }
/* (marge latérale : de la place pour les queues de bulle quand le message s'ouvre) */
/* flex: none : quand le fil est plein, les messages ne se tassent pas, les plus anciens sortent par le haut */
.msg, .chat__time { flex: none; }
.msg { padding: 2px 9px 0; margin: 0 -9px; }
.msg.tail { padding-bottom: 6px; }
.msg.pic { padding-top: 6px; padding-bottom: 4px; }
/* (tout l'espacement est en padding : rien ne dépasse du message, qui peut donc s'ouvrir à sa hauteur exacte) */
.msg p { position: relative; width: fit-content; max-width: 74%; margin: 0; padding: 7px 12px; border-radius: 18px; font-size: 13px; line-height: 1.3; }
.msg.them p { background: #e9e9eb; color: #000; }
.msg.me p { margin-left: auto; background: #0b84ff; color: #fff; }
/* Queue de bulle iOS, sur la dernière bulle d'un groupe */
.msg.tail p::before, .msg.tail p::after { content: ""; position: absolute; bottom: 0; height: 18px; }
.msg.me.tail p::before { right: -7px; width: 20px; background: #0b84ff; border-bottom-left-radius: 16px 14px; }
.msg.me.tail p::after { right: -26px; width: 26px; background: #fff; border-bottom-left-radius: 10px; }
.msg.them.tail p::before { left: -7px; width: 20px; background: #e9e9eb; border-bottom-right-radius: 16px 14px; }
.msg.them.tail p::after { left: -26px; width: 26px; background: #fff; border-bottom-right-radius: 10px; }
.msg.pic img, .msg.pic video { display: block; width: 60%; aspect-ratio: 4 / 3; margin: 0 0 0 auto; object-fit: cover; border-radius: 16px; background: #e9e9eb; }
.msg.pic.tall img { width: 46%; aspect-ratio: 3 / 4; object-position: 50% 70%; }
/* Pile de photos envoyées ensemble (iOS 17) : la première en grand, les autres dépassent à droite, « 5 Items » au-dessus */
.msg.pic.doc img { aspect-ratio: 1000 / 776; }
.msg.bunch .msg__in { display: flex; flex-direction: column; align-items: flex-end; padding-bottom: 18px; }
.stack__count { align-self: flex-end; display: flex; align-items: center; gap: 4px; margin: 0 2px 6px 0; font-size: 10px; font-weight: 500; color: #0b84ff; }
.stack__count i { width: 9px; height: 9px; background:
  linear-gradient(#0b84ff, #0b84ff) 0 0 / 4px 4px no-repeat, linear-gradient(#0b84ff, #0b84ff) 5px 0 / 4px 4px no-repeat,
  linear-gradient(#0b84ff, #0b84ff) 0 5px / 4px 4px no-repeat, linear-gradient(#0b84ff, #0b84ff) 5px 5px / 4px 4px no-repeat; border-radius: 1px; }
.stack { position: relative; display: block; flex: none; align-self: flex-end; width: 132px; height: 176px; margin-right: 18px; }   /* marge : les photos penchées dépassent un peu */
.msg.pic .stack img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: cover; border-radius: 16px; background: #e9e9eb; }
.stack > img { transform-origin: 0 100%; }
.stack > img:nth-child(1) { rotate: 6deg; translate: 14px 0; filter: brightness(.9); }
.stack > img:nth-child(2) { rotate: 4deg; translate: 10px 0; filter: brightness(.93); }
.stack > img:nth-child(3) { rotate: 2deg; translate: 6px 0; filter: brightness(.96); }
.stack > img:nth-child(4) { rotate: 1deg; translate: 3px 0; }
.stack__front { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; box-shadow: -1px 0 3px rgba(0, 0, 0, .12); }
.stack__play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.stack__play::after { content: ""; position: absolute; left: 13px; top: 10px; border: solid transparent; border-width: 7px 0 7px 11px; border-left-color: #111; }
/* Accusé : « Distribué » puis « Lu » sous le dernier message envoyé */
.chat__receipt { flex: none; margin: 0 2px 0 auto; padding-bottom: 6px; font-size: 10px; line-height: 12px; color: #8e8e93; }
/* Champ de saisie et barre d'accueil */
.chat__bar { display: flex; align-items: flex-end; gap: 8px; padding: 6px 12px 8px; }
.chat__plus { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e9e9eb; color: #8e8e93; font-size: 20px; line-height: 1; }
.chat__field { position: relative; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; padding: 4px 34px 4px 12px; border: 1px solid #d1d1d6; border-radius: 16px; font-size: 13px; }
.chat__ph { color: #b4b4b8; }
.chat__field.has-draft .chat__ph { display: none; }
.chat__draft { display: flex; flex-wrap: wrap; gap: 4px; }
.chat__draft img { flex: none; width: 30px; height: 30px; object-fit: cover; border-radius: 7px; }
/* Bouton d'envoi iOS : flèche blanche dans un rond bleu, à la place du micro dès qu'il y a quelque chose à envoyer */
.chat__send, .chat__mic { position: absolute; right: 3px; bottom: 3px; width: 24px; height: 24px; }
.chat__send svg, .chat__mic svg { display: block; width: 100%; height: 100%; }
.chat__mic { right: 6px; bottom: 5px; width: 20px; height: 20px; color: #8e8e93; transition: opacity .12s; }
.chat__send { opacity: 0; scale: .4; transition: opacity .12s, scale .25s cubic-bezier(.34, 1.56, .64, 1); }
.chat__field.has-draft .chat__send { opacity: 1; scale: 1; }
.chat__field.has-draft .chat__mic { opacity: 0; }
.chat__home { flex: none; align-self: center; width: 110px; height: 4px; margin: 2px 0 8px; border-radius: 4px; background: #111; }
/* Lecture : un message pas encore arrivé n'existe pas à l'écran ; à son arrivée, site.js fait glisser les autres
   depuis leur ancienne place et fait éclore la nouvelle bulle depuis son coin */
.chat.is-playing .msg:not(.is-in) { display: none; }
.msg.me .msg__in { transform-origin: 100% 100%; }
.msg.them .msg__in { transform-origin: 0 100%; }
.chat.is-reset .chat__thread { opacity: 0; transition: opacity .4s ease; }
.msg.typing p { display: flex; gap: 3px; padding: 10px 12px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a9aa0; animation: chat-dot 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -2px; } }
@media (max-width: 809px) { .chat { aspect-ratio: 4 / 5; } .chat__phone { width: 86%; bottom: 5%; } }
.gallery { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.gallery img, .gallery video { display: block; width: 100%; height: auto; background: var(--card); }
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; height: 900px; overflow: hidden; margin: 20px -150px 0;
        mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.wall__track { display: flex; flex-direction: column; gap: 16px; animation: wall-up 60s linear infinite; }
.wall__col:nth-child(even) .wall__track { animation-name: wall-down; }
.wall:hover .wall__track { animation-play-state: paused; }
.wall img { width: 100%; aspect-ratio: 330 / 200; object-fit: cover; }
@keyframes wall-up { to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---------- Bande de photos + menu (mobile uniquement) ---------- */
.strip, .menu-btn { display: none; }
.strip { gap: 12px; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
.strip::-webkit-scrollbar { display: none; }
.strip img { width: 50px; height: 50px; flex: none; object-fit: cover; transition: transform .2s; }
.strip img:active { transform: scale(.94); }
.menu-btn { position: relative; width: 54px; height: 44px; border: 0; border-radius: 99px; background: #e8e8e8; cursor: pointer; z-index: 31; }
.menu-btn span { position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: #000; transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.menu-btn span:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.menu-open .menu-btn span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translate(-50%, -50%) rotate(135deg); }

/* ---------- Micro-interactions ---------- */
.mi { margin: 40px 0 80px; }
.mi__title { display: flex; gap: 12px; align-items: baseline; font-weight: 600; font-size: 12px; }
.mi__hint { color: var(--issue); font-weight: 400; font-family: "Caveat", cursive; font-size: 14px; }
.mi__desc { color: var(--muted); margin: 10px 0 20px; line-height: 1.3; max-width: 900px; }
.stage { height: 460px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #f0f0f0, 0 10px 40px rgba(0,0,0,.04); display: grid; place-items: center; overflow: hidden; }
.stage--todo { background: repeating-linear-gradient(45deg, #fafafa 0 12px, #f4f4f4 12px 24px); color: var(--muted); font-size: 12px; text-align: center; }

/* ---------- Mode test : annotations ---------- */
.testbar { position: sticky; top: 0; z-index: 40; display: flex; justify-content: center; gap: 16px; align-items: center; padding: 8px 16px; background: #111; color: #fff; font-size: 12px; }
.testbar a { text-decoration: underline; }
.testbar button { all: unset; cursor: pointer; padding: 3px 10px; border-radius: 99px; background: #333; }
.issue { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; padding: 2px 7px; border-radius: 99px; background: var(--issue); color: #fff; font: 600 10px/1.4 "Inter", sans-serif; letter-spacing: 0; vertical-align: middle; white-space: nowrap; cursor: help; position: relative; z-index: 5; }
.issue--abs { position: absolute; top: 10px; left: 10px; }
.no-issues .issue { display: none; }
.issues { padding: 40px 0 120px; }
.issues h1 { font: 500 26px var(--display); letter-spacing: -0.04em; margin-bottom: 8px; }
.issues > p { color: var(--muted); margin-bottom: 30px; }
.issue-item { display: grid; grid-template-columns: 44px 1fr 110px; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.issue-item .n { font-weight: 700; color: var(--issue); }
.issue-item h3 { font-size: 14px; margin-bottom: 6px; }
.issue-item p { color: var(--muted); line-height: 1.4; }
.lvl { justify-self: end; align-self: start; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.lvl--high { background: #ffe1e1; color: #b3261e; }
.lvl--mid { background: #fff1d6; color: #8a5a00; }
.lvl--low { background: #e5f5ea; color: #1d6b3a; }

/* ---------- Mobile ---------- */
@media (max-width: 810px) {
  .wrap { padding: 0 24px; }
  .header { position: relative; height: 130px; }
  .menu-btn { display: block; }
  .nav { position: absolute; right: 0; top: calc(50% + 28px); flex-direction: column; align-items: flex-end; gap: 6px; z-index: 30; pointer-events: none; }
  .nav a { display: grid; place-items: center; width: 84px; height: 44px; border-radius: 99px; background: #e8e8e8; color: #9a9a9a;
           opacity: 0; transform: translateY(-12px) scale(.9); transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1), color .2s; }
  .nav a[aria-current] { color: #000; }
  .menu-open .nav { pointer-events: auto; }
  .menu-open .nav a { opacity: 1; transform: none; }
  .menu-open .nav a:nth-child(2) { transition-delay: .04s; }
  .menu-open .nav a:nth-child(3) { transition-delay: .08s; }
  .profile { flex-direction: column; align-items: stretch; gap: 26px; padding: 30px 0 55px; }
  .carousel { display: none; }
  .strip { display: flex; }
  .profile__job, .profile__role { margin-top: 26px; }
  .profile__role .profile__job { margin-top: 0; }
  .profile__sep { display: none; }   /* la disponibilité passe sous le métier : pas de point en début de ligne */
  .contact { margin-top: 26px; width: 100%; max-width: 390px; gap: 6px; padding-left: 18px; }
  .contact__mail { font-size: 15px; min-width: 0; }
  /* La ligne Chess.com / GitHub tient sur une seule ligne, sans saut quand on passe d'un état à l'autre */
  .chess { font-size: 12px; }
  .chess__label { white-space: nowrap; }
  .chess__opt { display: none; }
  .grid { grid-template-columns: 1fr; gap: 40px; padding-top: 50px; }
  .card__media { aspect-ratio: 290 / 218; }
  .photos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery { grid-template-columns: repeat(min(var(--cols, 2), 2), 1fr); gap: 10px; }
  .wall { grid-template-columns: repeat(2, 1fr); height: 600px; margin: 20px -24px 0; gap: 10px; }
  .wall__col:nth-child(n+3) { display: none; }
  .crumb { padding-top: 30px; }
  .marquee { margin-right: -16px; }
  /* Mobile : une bande qu'on fait glisser au doigt, cartes plus grandes ; celle calée à gauche est la carte active */
  .art { margin-right: -16px; padding-right: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: auto; }
  .art::-webkit-scrollbar { display: none; }
  /* (marge de fin : la dernière carte peut aussi se caler à gauche) */
  .art__track { width: max-content; gap: 12px; padding: 24px calc(100vw - 16px - 168px) 64px 0; }
  .art__card { flex: 0 0 168px; scroll-snap-align: start; }
  .art__card:nth-child(n + 3) figcaption { left: 0; right: auto; text-align: left; }
  .art__card figcaption { width: 100%; }
  .art__tag { top: 7px; right: 7px; padding: 4px 8px; font-size: 10px; }
  .marquee[data-bleed] { mask: none; }
  .issue-item { grid-template-columns: 30px 1fr; }
  .lvl { grid-column: 2; justify-self: start; }
}
.lvl--done { background: #e7efff; color: #2450b3; }

/* ---------- About : liens et soulignés comme sur Framer ---------- */
.co, .u { text-decoration: underline; text-decoration-color: #dedede; text-underline-offset: 2px; }
.years { font-style: italic; }
.sport + .sport { padding-top: 30px; border-top: 1px solid #dedede; }
.topic { border-bottom-color: #dedede; }

/* Vidéos remplaçant des GIF : pas de bouton lecture si le navigateur bloque la lecture auto */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }

/* ---------- Micro-interactions (d'après le fichier Figma « Micro-Interactions ») ---------- */
:root {
  --spring: cubic-bezier(.22, 1, .36, 1);
  /* Équivalents CSS des ressorts Framer : bounce .4 / .2 s, bounce .2 / .4 s, et le ressort de Notification */
  --spring-fast: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.3, 1.3, .5, 1);
  --spring-notif: cubic-bezier(.3, 1.25, .5, 1);
}
.mc { background: rgba(249, 249, 249, .99); box-shadow: 1px 3px 4px rgba(166, 166, 166, .1); }
.nest, .nest__child { border: .5px solid #e1e1e1; }
.mc-title { display: block; font-size: 10px; font-weight: 700; line-height: normal; color: #000; letter-spacing: 0; }
.mc-sub { display: block; margin-top: 4px; font-size: 8px; font-weight: 500; line-height: normal; color: #7d7d7d; letter-spacing: 0; }
:where(.stage button:not(.pay)) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
/* Avatar 36 px + badge 16 px, comme le composant Figma */
.face { position: relative; flex: none; width: 42px; height: 38px; }
.face > img:first-child { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.face > :last-child:not(:first-child) { position: absolute; left: 26px; top: 22px; width: 16px; height: 16px; }
.face > img:last-child:not(:first-child) { border-radius: 4px; }
/* Bouton Figma « Button / up » : pastille grise avec une lueur citron en bas */
.pill-btn { position: relative; display: grid; place-items: center; border-radius: 999px; background: #efefef;
            border: .5px solid #d6d6d6 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 -4px 4px rgba(35, 35, 35, .06); overflow: hidden; }
.pill-btn::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 58%; height: 4px; border-radius: 50%; transform: translateX(-50%);
                   background: rgba(208, 255, 0, .5); filter: blur(3px); }

/* Nested Pop-ups : la carte grandit et accueille les notifications suivantes */
.nest { width: 330px; padding: 20px 18px; border-radius: 15px; overflow: hidden; cursor: pointer; transition: height .5s var(--spring); }
.nest__row { display: flex; align-items: center; gap: 18px; }
.nest__row .mc-sub { transition: opacity .2s; }
.nest__row .mc-title { white-space: nowrap; }
.nest__child { margin-top: 18px; padding: 20px 18px; border-radius: 15px; opacity: 0; transform: translateY(-10px) scale(.97);
               transition: opacity .3s ease .12s, transform .45s var(--spring) .08s; }
.nest__child.in { opacity: 1; transform: none; }

/* Tabs Navigation */
.board { position: relative; width: 348px; height: 360px; padding: 20px 18px; border-radius: 15px; overflow: hidden; transition: height .3s var(--spring-fast); }
.board.is-profile { height: 466px; }
.board__view[hidden] { display: none; }
.board__tabs { position: relative; display: flex; height: 62px; padding: 10px; border-radius: 999px; }
.board__tabs button { position: relative; z-index: 1; flex: 1; font-size: 10px; font-weight: 700; color: #000; text-align: center; }
.board__indicator { position: absolute; top: 10px; left: 10px; width: 90px; height: 42px; transition: transform .3s var(--spring-fast); }
.board__panel { padding: 18px 20px 0; }
.board__rows { list-style: none; margin-top: 14px; }
.board__rows li { display: flex; align-items: center; gap: 20px; height: 77px; }
.board__rows li + li { border-top: 1px solid #ededed; }
.board__rows li:first-child { height: 62px; }
.board__rows li[data-player] { cursor: pointer; }
.board__rows li[data-player]:hover .mc-title { text-decoration: underline; text-decoration-color: #dedede; text-underline-offset: 2px; }
.board__who { flex: 1; }
.board__score { display: flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 700; color: #000; letter-spacing: -.02em; }
.board__delta { display: flex; align-items: center; gap: 2px; font-size: 8px; font-weight: 700; color: #29e9a3; letter-spacing: 0; }
.board__delta::before { content: ""; border: 3.5px solid transparent; border-bottom: 5px solid currentColor; border-top: 0; }
/* Fiche Michael Olise (positions relevées sur le composant Framer « Tabs », variante Olise) */
.profile-card { position: relative; display: flex; flex-direction: column; padding-top: 16px; }
.profile-card > :not(.profile-card__mark) { position: relative; }
.profile-card__mark { position: absolute; left: -91px; top: 160px; font-size: 300px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em;
                      color: #e8e8e8; opacity: .31; white-space: nowrap; pointer-events: none; }
.profile-card__head { display: flex; align-items: center; gap: 29px; padding: 0 20px; }
.profile-card__head .face { width: 59px; height: 54px; }
.profile-card__head .face > img:first-child { width: 54px; height: 54px; }
.profile-card__head .face > img:last-child { left: 43px; top: 37px; width: 16px; height: 16px; border-radius: 50%; }
.profile-card__name { display: block; font-size: 24px; font-weight: 700; color: #000; letter-spacing: -.02em; line-height: 29px; }
.profile-card__meta { display: flex; justify-content: space-between; margin-top: 4px; font-size: 8px; font-weight: 500; color: #aaa; }
.profile-card__quote { margin-top: 34px; padding: 0 20px; font-size: 8px; font-weight: 500; color: #666; }
.profile-card hr { border: 0; border-top: 1px dashed #dedede; margin: 18px 10px 0; }
.profile-card hr + .profile-card__row { margin-top: 22px; }
.profile-card hr ~ hr { border-top-style: solid; border-color: #ededed; margin: 18px 6px 0; }
.profile-card hr ~ hr + .profile-card__row { margin-top: 26px; }
.profile-card__row { display: flex; align-items: center; justify-content: space-between; height: 18px; padding: 0 20px; color: #666; }
.profile-card__row + .profile-card__row { margin-top: 18px; }
.profile-card__row > span:first-child { font-size: 10px; font-weight: 500; }
.profile-card__row > b { font-size: 15px; font-weight: 700; color: #000; }
.profile-card__team { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; color: #000; letter-spacing: .06em; }
.profile-card__team img { width: 24px; height: 24px; border-radius: 20%; }
.profile-card__back { width: 68px; height: 42px; margin: 26px auto 0; color: #222; }
.profile-card__back svg { width: 18px; height: 12px; }

/* Tabs Preview (composant Framer « TabsGroup ») : l'onglet survolé s'élargit, l'aperçu apparaît dessous */
.browser { position: relative; height: 400px; }
.browser__bar { display: flex; width: 698px; height: 70px; border-radius: 15px; }
.btab { position: relative; display: flex; align-items: center; gap: 20px; padding: 0 18px 0 40px; height: 70px; color: #e1e1e1; cursor: pointer;
        flex: 0 0 auto; transition: width .4s var(--spring-soft); }
.btab:nth-child(1) { width: 242px; }
.btab:nth-child(2) { width: 219px; }
.btab:nth-child(3) { width: 237px; }
.browser.is-hover .btab:nth-child(2) { width: 243px; }
.browser.is-hover .btab:nth-child(3) { width: 213px; }
.btab::before { content: ""; position: absolute; inset: 10px; border-radius: 10px; background: rgba(217, 217, 217, .25); opacity: 0; transition: opacity .2s; }
.btab span { position: relative; flex: 1; min-width: 0; }
.btab b { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.btab small { display: block; margin-top: 3px; font-size: 8px; font-weight: 500; white-space: nowrap; }
.btab__icon { position: relative; flex: none; fill: #e1e1e1; transition: fill .2s; }
.btab__close { position: relative; flex: none; stroke: #000; fill: none; opacity: 0; transition: opacity .2s; }
.btab--active { background: #fff; border-radius: 15px 0 0 15px; color: #000; cursor: default; }
.btab--active small, .btab.hover small { color: var(--muted); }
.btab--active .btab__icon, .btab.hover .btab__icon { fill: #000; }
.btab--active .btab__close, .btab.hover .btab__close { opacity: 1; }
.btab.hover { color: #000; }
.btab.hover::before { opacity: 1; }
.preview { position: absolute; top: 77px; width: 416px; opacity: 0; pointer-events: none; transform: translateY(-8px) scale(.96); transform-origin: top center;
           transition: opacity .2s ease, transform .4s var(--spring-soft); }
.preview.show { opacity: 1; transform: none; }
.preview--card { padding: 20px 18px; border-radius: 15px; }
.preview--card > img { display: block; width: 380px; height: 204px; object-fit: cover; object-position: top; border-radius: 5px; }
.preview--image img { display: block; width: 416px; }
.preview__line { display: block; width: 289px; margin: 18px auto; border-top: 1px dashed #dedede; }
.preview__meta { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }

/* Classic Pop-ups */
.deck { position: relative; width: 290px; height: 98px; transition: height .5s var(--spring-notif); }
.deck[aria-expanded="true"] { height: 246px; }
.pop { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 25px; width: 272px; height: 78px; padding: 0 18px;
       border-radius: 25px; transform: translate(calc(var(--i) * 9px), calc(var(--i) * 10px)); transition: transform .5s var(--spring-notif); }
.deck[aria-expanded="true"] .pop { transform: translate(0, calc(var(--i) * 84px)); }
.pop__avatar { position: relative; flex: none; width: 36px; height: 36px; }
.pop__avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.star { position: absolute; left: 24px; top: 18px; width: 19px; height: 20px; fill: #1985ff; stroke: #f9f9f9; stroke-width: 1.5; stroke-linejoin: round; }
.pop__text { display: block; }
.pop__text b { display: block; font-size: 10px; font-weight: 700; color: #000; letter-spacing: 0; }
.pop__text b strong { font-weight: 900; }
.pop__text small { display: block; margin-top: 4px; font-size: 8px; font-weight: 500; color: #7d7d7d; }
.pop__text--one { display: none; }
.deck[aria-expanded="true"] .pop__text--one { display: block; }
.deck[aria-expanded="true"] .pop__text--many { display: none; }
.pop__expand { position: absolute; right: 9px; bottom: 7px; width: 23px; height: 22px; fill: none; stroke: #1985ff; transition: opacity .2s; }
.deck[aria-expanded="true"] .pop__expand { opacity: 0; }

/* Open / Close Button : la carte s'ouvre, puis se referme en effaçant le texte en fondu (« Dialog + Fade ») */
.toggle { position: relative; display: flex; align-items: center; width: 78px; height: 78px; border-radius: 25px; overflow: hidden; cursor: pointer;
          transition: width .5s var(--spring); }
.toggle[aria-expanded="true"] { width: 376px; cursor: default; }
.toggle__avatar { position: absolute; left: 18px; top: 20px; width: 42px; height: 38px; object-fit: contain; transition: opacity .25s; }
.toggle__avatar--open, .toggle[aria-expanded="true"] .toggle__avatar--closed { opacity: 0; }
.toggle[aria-expanded="true"] .toggle__avatar--open { opacity: 1; }
.toggle__body { position: absolute; left: 78px; right: 0; top: 0; bottom: 0; display: flex; align-items: center;
                -webkit-mask: linear-gradient(90deg, #000 calc(100% - 60px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 60px), transparent);
                opacity: 0; transition: opacity .3s ease; }
.toggle[aria-expanded="true"] .toggle__body { -webkit-mask: none; mask: none; opacity: 1; transition-delay: .12s; }
.toggle__text { width: 238px; flex: none; white-space: nowrap; }
.toggle__text b { display: block; font-size: 10px; font-weight: 700; color: #000; letter-spacing: 0; }
.toggle__text small { display: block; margin-top: 4px; font-size: 8px; font-weight: 500; color: #5e5e5e; }
.toggle__close { margin-left: 18px; width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 12px;
                 background: rgba(217, 217, 217, .25) !important; stroke: #8a8a8a; transition: stroke .2s, background-color .2s; }
.toggle__close:hover { stroke: #000; background: rgba(217, 217, 217, .5) !important; }

/* Badges Tooltip (composant Framer « Tooltip ») : survol = le badge grossit ; clic = la pastille s'ouvre ;
   l'anneau suit l'icône survolée ; clic = l'icône devient le badge et la pastille se ferme */
.badges { position: relative; display: flex; align-items: center; }
.badges__avatar { position: relative; width: 36px; height: 36px; transition: transform .4s var(--spring-soft); }
.badges__avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.badges__badge { position: absolute; left: 24px; top: 20px; width: 17px; height: 17px; transition: transform .2s var(--spring-fast); }
.badges__badge svg { width: 100%; height: 100%; overflow: visible; }
.badges__badge path { stroke: #fff; stroke-linejoin: round; }
.badges__badge:hover { transform: scale(1.47); }
.badges.open .badges__badge { transform: scale(.7); }
.badges__badge.pop-in { animation: badge-pop .35s var(--spring-fast); }
@keyframes badge-pop { from { transform: scale(.7); } to { transform: scale(1); } }
.badges__tip { position: absolute; left: 48px; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 52px; padding: 8px 0;
               border-radius: 999px; background: #f9f9f9; box-shadow: 1px 3px 4px rgba(166, 166, 166, .1);
               opacity: 0; transform: translate(-8px, -50%) scale(.9); pointer-events: none; transition: opacity .2s, transform .4s var(--spring-soft); }
.badges.open .badges__avatar { transform: translateX(-31px); }
.badges.open .badges__tip { opacity: 1; transform: translate(-31px, -50%); pointer-events: auto; }
.badges__ring { position: absolute; left: 8px; top: 8px; width: 36px; height: 36px; border-radius: 50%; background: #f9f9f9;
                box-shadow: inset 0 0 0 .5px #e1e1e1, 0 1px 3px rgba(0, 0, 0, .06); transition: transform .2s var(--spring-fast); }
.badges__tip button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.badges__tip button svg { width: 16px; height: 16px; }
.badges__tip button path { stroke: #f9f9f9; stroke-linejoin: round; }

/* Payment (composant Framer « Payment ») : un vert balaie le bouton qui s'élargit, puis revient au noir */
.stage--tall { height: 640px; }
.stage--board { height: 540px; }
.pay-card { width: 469px; padding: 28px 39px 28px; border-radius: 15px; color: #000; }
.pay-card__head { display: flex; align-items: center; gap: 17px; padding-bottom: 25px; border-bottom: .5px solid #ccc; }
.pay-card__thumb { width: 43px; height: 43px; flex: none; border-radius: 999px; overflow: hidden; background: #f0f0f0;
                   box-shadow: inset 2px 7px 4px rgba(254, 254, 254, .25), 0 2px 4px rgba(41, 41, 41, .1); }
.pay-card__thumb img { width: 43px; height: 59px; margin-top: -8px; object-fit: cover; }
.pay-card__head b { display: block; font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.pay-card__head small { display: block; margin-top: 5px; font-size: 8px; font-weight: 500; color: #666; }
.pay-card__row { display: flex; align-items: center; justify-content: space-between; padding: 25px 14px 25px; border-bottom: .5px solid #ccc; }
.pay-card__row b { display: block; font-size: 10px; font-weight: 700; }
.pay-card__row small { display: block; margin-top: 5px; font-size: 8px; font-weight: 500; color: #666; }
.pay-card__row strong { font-size: 12px; font-weight: 700; }
.pay-card__row--total { padding: 26px 14px; }
.pay-card__row--total strong { font-size: 20px; }
.pay-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 26px; }
.pay-card__alt { font-size: 10px; font-weight: 600; }
.pay-card__alt u { text-underline-offset: 2px; }
.pay { border: 0; padding: 0; position: relative; display: flex; align-items: center; justify-content: center; width: 153px; height: 43px; border-radius: 999px; overflow: hidden;
       background: #000; color: #fff; cursor: pointer; font: 900 14px/1 "Inter", sans-serif; letter-spacing: -.01em;
       box-shadow: inset 2px 7px 4px rgba(254, 254, 254, .25), 0 2px 4px rgba(41, 41, 41, .1);
       transition: width .4s var(--spring-soft), opacity .15s; }
.pay:active { opacity: .78; }
.pay__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(110, 255, 122, .85); transition: width .4s ease-in-out; }
.pay__label { position: absolute; display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: opacity .2s; }
.pay__label--done { opacity: 0; }
.pay__check { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--spring-fast); }
.pay.processing .pay__label--idle { opacity: 0; }
.pay.done { width: 188px; }
.pay.done .pay__fill { width: 100%; }
.pay.done .pay__label--done { opacity: 1; }
.pay.done.checked .pay__check { opacity: 1; transform: none; }

@media (max-width: 810px) {
  .stage { height: auto; min-height: 460px; padding: 30px 0; }
  /* Les démos gardent leurs proportions Figma et sont réduites pour tenir à l'écran */
  .browser { zoom: .44; height: 430px; }
  .board, .nest { zoom: .9; }
  .pay-card { zoom: .7; }
  .stage--tall { height: auto; }
  .toggle { zoom: .8; }
}


/* Navigation entre projets, en bas de chaque étude de cas : projet précédent à gauche, suivant à droite */
.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0 120px; padding-top: 30px; border-top: 1px solid var(--line); }
.pnav__link { display: flex; align-items: center; gap: 16px; min-width: 0; color: #000; }
.pnav__link--next { flex-direction: row-reverse; text-align: right; }
.pnav__link img { flex: none; width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--card); transition: scale .45s cubic-bezier(.34, 1.56, .64, 1); }
.pnav__link span { display: grid; gap: 3px; min-width: 0; }
.pnav__link small { font-size: 12px; color: var(--faint); transition: color .2s, translate .3s cubic-bezier(.34, 1.56, .64, 1); }
.pnav__link b { font: 500 20px/1.1 var(--display); letter-spacing: -.04em; }
.pnav__link em { overflow: hidden; font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.pnav__link:hover img { scale: 1.06; }
.pnav__link:hover small { color: #000; }
.pnav__link--prev:hover small { translate: -4px 0; }
.pnav__link--next:hover small { translate: 4px 0; }
@media (max-width: 809px) {
  .pnav { gap: 12px; margin: 30px 0 80px; }
  .pnav__link { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pnav__link--next { flex-direction: column; align-items: flex-end; }
  .pnav__link img { width: 72px; }
  .pnav__link b { font-size: 17px; }
  .pnav__link em { display: none; }
}

/* Rangée à hauteur égale (layout "row") et image pleine largeur ("full") des études de cas */
.gallery-row { display: flex; gap: 20px; margin-top: 20px; }
.gallery-row img { flex: var(--r) 1 0; min-width: 0; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; background: var(--card); }
.gallery-full { display: block; width: 100%; height: auto; margin-top: 20px; background: var(--card); }
@media (max-width: 809px) {
  .gallery-row { flex-wrap: wrap; gap: 8px; }
  .gallery-row img { flex-basis: calc(50% - 4px); flex-grow: 0; }
  .gallery-row img[data-wide] { flex-basis: 100%; order: -1; }
}

/* Grille 2 × 2 pleine largeur (layout "grid2") : deux rangées justifiées */
.gallery-2x2 { display: grid; gap: 20px; margin-top: 20px; }
.gallery-2x2__row { display: flex; gap: 20px; }
.gallery-2x2__row img { flex: var(--r) 1 0; min-width: 0; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; background: var(--card); }
@media (max-width: 809px) { .gallery-2x2, .gallery-2x2__row { gap: 8px; } }

/* Sachet transparent posé au centre de la grille, plus grand et légèrement penché */
.bag-over { position: relative; }
.bag-over__layer { position: absolute; inset: 20px 0 0; display: grid; place-items: center; pointer-events: none; container-type: size; }
.bag.bag--over { margin: 0; padding: 0; background: none; rotate: -7deg; }
/* Assez grand pour dominer la grille, sans dépasser sa hauteur (une grille de photos paysage est plus basse) */
.bag--over .bag__pouch { width: min(470px, 58cqw, 64cqh); pointer-events: auto; }
.bag--over .bag__plastic { filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .3)); }
/* Léger voile dépoli sous le plastique, pour qu'on lise le sachet même sur des photos chargées */
.bag--over .bag__pouch::before { content: ""; position: absolute; inset: 4% 3% 1.5%; border-radius: 6px; background: rgba(255, 255, 255, .22);
                                 backdrop-filter: blur(3px) saturate(1.1); -webkit-backdrop-filter: blur(3px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
@media (max-width: 809px) { .bag--over .bag__pouch { width: min(62cqw, 64cqh); } }

/* Sachet de stickers (Aer, Peregresss, Raising) : les stickers flottent sous le plastique */
.bag { display: grid; place-items: center; margin-top: 20px; padding: 50px 0; background: #ececec; }
.bag__pouch { position: relative; width: min(360px, 70%); aspect-ratio: 1249 / 1600; cursor: pointer; transform-origin: 50% 8%; }
.bag__pouch.is-shake { animation: bag-shake .9s cubic-bezier(.3, 0, .3, 1); }
.bag__plastic { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .12)); }
.bag__sticker { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; translate: calc(-50% + var(--px, 0px)) calc(-50% + var(--py, 0px)); rotate: var(--r);
                filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15)); animation: bag-float 5s ease-in-out var(--d) infinite; transition: translate .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes bag-float { 33% { rotate: calc(var(--r) + 4deg); scale: 1.02; } 66% { rotate: calc(var(--r) - 3deg); scale: .99; } }
@keyframes bag-shake { 15% { rotate: -5deg; } 35% { rotate: 4deg; } 55% { rotate: -2.5deg; } 75% { rotate: 1.2deg; } 100% { rotate: 0deg; } }
/* Le sticker cliqué remonte et dépasse par l'ouverture du sachet, en restant sous le plastique (placé après lui) ;
   il passe devant les autres stickers. Un second clic le range */
.bag__sticker.is-out { z-index: 1; transition: translate .8s cubic-bezier(.34, 1.4, .64, 1); }
@media (prefers-reduced-motion: reduce) { .bag__sticker, .bag__pouch.is-shake { animation: none; } }
@media (max-width: 809px) { .bag { padding: 30px 0; } }

/* Podz : étude de cas mise en scène à partir du fichier Figma, même sobriété que les autres */
/* En-tête : l'enregistrement de la vraie app dans le téléphone, sur la photo du refuge */
.pz-hero { --s: .6; position: relative; display: grid; place-items: center; height: calc(923px * var(--s) + 110px); overflow: hidden; background: var(--card); }
.pz-hero__bg { position: absolute; inset: -40px 0 0; width: 100%; height: calc(100% + 40px); object-fit: cover; filter: blur(3px) brightness(.9); transform: translateY(var(--py, 0px)) scale(1.12);
               animation: pz-hero 1.8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes pz-hero { to { transform: translateY(var(--py, 0px)) scale(1.04); } }
.pz-hero__phone { position: relative; width: calc(472px * var(--s)); height: calc(923px * var(--s)); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35));
                  animation: pz-rise 1.2s cubic-bezier(.34, 1.3, .64, 1) .15s both; }
@keyframes pz-rise { from { opacity: 0; transform: translateY(80px) scale(.94); } }
.pz-hero__phone > * { position: absolute; left: 0; top: 0; transform: scale(var(--s)); transform-origin: 0 0; }
.pz-hero__frame { width: 472px; height: 923px; max-width: none; }
.pz-hero__screen { left: calc(40px * var(--s)); top: calc(28px * var(--s)); width: 393px; height: 852px; overflow: hidden; border-radius: 50px; background: #fafafa; }
/* La barre d'état fait partie de la vidéo : l'heure de l'enregistrement y est remplacée par 9:41 */
.pz-hero__screen video { position: absolute; left: 0; top: 0; width: 393px; height: 852px; object-fit: cover; object-position: top; }
.pz-hero__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0 0 0 3px;
                 border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
                 transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.pz-hero__play[hidden] { display: none; }
.pz-hero__play:hover { transform: scale(1.08); }
.pz-hero__play svg { width: 26px; height: 26px; }
.pz-hero__beta { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
                 background: rgba(0, 0, 0, .35); color: #fff; font-size: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: pz-rise .9s ease .8s both; }
.pz-hero__beta i { width: 6px; height: 6px; border-radius: 50%; background: #6eff7a; animation: pz-dot 2s ease-in-out infinite; }
@keyframes pz-dot { 50% { opacity: .35; } }

.pz-scope { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pz-scope > div { padding: 22px 0 26px; }
.pz-scope > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.pz-scope dt { font-size: 12px; color: var(--faint); margin-bottom: 14px; }
.pz-scope dd { font: 500 26px/1 var(--display); letter-spacing: -0.05em; }

.podz .section p { max-width: 560px; }
.pz-board { display: block; width: 100%; margin-top: 20px; background: var(--card); }

/* Évolution du logo : les étapes défilent seules quand la section est visible */
.pz-evo { margin-top: 20px; }
.pz-evo__stage { position: relative; aspect-ratio: 16 / 9; background: var(--card); overflow: hidden; }
.pz-evo__stage img { position: absolute; left: 50%; top: 50%; width: 32%; translate: -50% -50%; opacity: 0; transform: scale(.7) rotate(-8deg); filter: blur(8px);
                     transition: opacity .5s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1), filter .5s ease; }
.pz-evo__stage img.is-on { opacity: 1; transform: none; filter: none; }
.pz-evo__stage img.is-off { transform: scale(1.15) rotate(6deg); }
.pz-evo__stage img { mix-blend-mode: multiply; }
.pz-evo__stage img:nth-child(3), .pz-evo__stage .pz-evo__glass { border-radius: 22.4%; }
.pz-evo__steps { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
.pz-evo__steps button { position: relative; width: 100%; padding: 16px 0 0; border: 0; background: none; font: inherit; font-size: 12px; text-align: left; color: var(--faint); cursor: pointer; transition: color .3s; }
.pz-evo__steps button::before { content: ""; position: absolute; left: 0; right: 4px; top: 0; height: 2px; background: var(--line); }
.pz-evo__steps button::after { content: ""; position: absolute; left: 0; right: 4px; top: 0; height: 2px; background: #000; transform: scaleX(0); transform-origin: left; }
.pz-evo__steps button:hover, .pz-evo__steps button[aria-current="true"] { color: #000; }
.pz-evo__steps button[aria-current="true"]::after { animation: pz-step var(--step, 2.4s) linear forwards; }
.pz-evo.is-paused .pz-evo__steps button[aria-current="true"]::after { animation: none; transform: none; }
@keyframes pz-step { to { transform: scaleX(1); } }

/* Icône : inclinaison 3D qui suit la souris, puis choix du mode */
.pz-icon { margin-top: 20px; background: var(--card); transition: background .5s ease; }
.pz-icon.is-dark { background: #141414; }
.pz-icon__stage { display: grid; place-items: center; aspect-ratio: 16 / 9; perspective: 900px; }
.pz-icon__stage img { width: 26%; border-radius: 22.4%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .18));
                      transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1); }
.pz-icon__stage.is-tilting img { transition: transform .1s linear, opacity .2s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1); }
.pz-icon__stage img.is-swap { scale: .8; opacity: 0; }
.pz-icon__modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding: 0 20px 26px; }
.pz-icon__modes button { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--faint); cursor: pointer; transition: color .2s; }
.pz-icon__modes button:hover, .pz-icon__modes button[aria-selected="true"] { color: #000; }
.pz-icon.is-dark .pz-icon__modes button:hover, .pz-icon.is-dark .pz-icon__modes button[aria-selected="true"] { color: #fff; }

/* Photos : bande qui défile en continu, s'arrête au survol */
.pz-marquee { margin: -40px 0 60px; overflow: hidden; }
.pz-marquee__track { display: flex; gap: 20px; width: max-content; animation: pz-marquee 50s linear infinite; }
.pz-marquee:hover .pz-marquee__track { animation-play-state: paused; }
.pz-marquee img { width: 340px; aspect-ratio: 1440 / 1024; object-fit: cover; background: var(--card); }
@keyframes pz-marquee { to { transform: translateX(calc(-50% - 10px)); } }

/* Personnages : flottent, suivent la souris des yeux (site.js lisse le mouvement image par image), clignent, s'endorment si on ne bouge plus, sautent au clic */
.pz-chars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.pz-chars__card { position: relative; display: grid; justify-items: center; align-content: start; padding: 50px 20px 22px; border: 0; background: var(--card); font: inherit; text-align: center; cursor: pointer; }
.pz-chars__name { margin-top: 26px; font-size: 12px; color: #000; }
.pz-chars__role { margin-top: 6px; max-width: 200px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.pz-char { height: 100px; width: auto; overflow: visible; rotate: var(--lean, 0deg); animation: pz-float 3.2s ease-in-out infinite; }
.pz-chars__card:nth-child(2) .pz-char { animation-delay: -1s; }
.pz-chars__card:nth-child(3) .pz-char { animation-delay: -2s; }
.pz-chars__card.is-jump .pz-char { animation: pz-jump .7s cubic-bezier(.3, 0, .3, 1); }
.pz-eyes__lid { transform-box: fill-box; transform-origin: center; transition: scale .07s ease; }
.is-blink .pz-eyes__lid { scale: 1 .1; }
.pz-chars.is-asleep .pz-eyes__lid { scale: 1 .12; transition: scale .6s ease; }
.pz-chars__card::after { content: "z"; position: absolute; left: 62%; top: 36px; font-size: 14px; color: var(--faint); opacity: 0; pointer-events: none; }
.pz-chars.is-asleep .pz-chars__card::after { animation: pz-z 2.4s ease-in infinite; }
.pz-chars.is-asleep .pz-chars__card:nth-child(2)::after { animation-delay: .8s; }
.pz-chars.is-asleep .pz-chars__card:nth-child(3)::after { animation-delay: 1.6s; }
@keyframes pz-z { 0% { opacity: 0; translate: 0 0; scale: .7; } 20% { opacity: 1; } 100% { opacity: 0; translate: 18px -34px; scale: 1.3; } }
@keyframes pz-float { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes pz-jump {
  0% { transform: scale(1, 1); } 15% { transform: scale(1.15, .85); } 45% { transform: translateY(-36px) scale(.92, 1.1) rotate(8deg); }
  75% { transform: translateY(0) scale(1.1, .9); } 100% { transform: scale(1, 1); }
}

/* États de l'app joués par les personnages. Positions et animations reprises des composants Figma
   « Empty State Illustration », « Avatar – Searching » et « Hearts » */
.pz-states { margin-top: 20px; background: var(--card); }
.pz-states__tabs { display: flex; justify-content: center; gap: 22px; padding: 22px 20px 0; }
.pz-states__tabs button { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--faint); cursor: pointer; transition: color .2s; }
.pz-states__tabs button:hover, .pz-states__tabs button[aria-selected="true"] { color: #000; }
.pz-states__stage { position: relative; height: 380px; }
.pz-state { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 34px; opacity: 0; scale: .96; pointer-events: none; transition: opacity .35s ease, scale .5s cubic-bezier(.34, 1.56, .64, 1); }
.pz-state.is-on { opacity: 1; scale: 1; pointer-events: auto; }
.pz-state figcaption { font-size: 12px; color: var(--muted); }
.pz-state img { position: absolute; display: block; max-width: none; }
.pz-state:not(.is-on) * { animation-play-state: paused !important; }

.pz-empty { position: relative; width: 418px; height: 202px; scale: .8; margin: -20px 0; }
.pz-empty__podzi { left: 140.4px; top: 0; width: 151px; height: 151px; animation: pz-breathe-a 3s ease-in-out infinite alternate; }
.pz-empty__roundi { left: 253px; top: 35px; width: 165px; height: 165px; animation: pz-breathe-b 3s ease-in-out infinite alternate; }
.pz-empty__hexi { left: 0; top: 54px; width: 203px; height: 148px; animation: pz-breathe-c 3s cubic-bezier(.34, 1.4, .64, 1) infinite alternate; }
@keyframes pz-breathe-a { 30% { scale: 1.01 1.008; } 50% { translate: 0 -2.5px; } 66.7%, 100% { scale: .985 .988; } 100% { translate: 0 -1.9px; } }
@keyframes pz-breathe-b { 0% { scale: .995; } 23.3% { scale: .985 .988; } 50% { translate: 0 -2.5px; } 60% { scale: 1.01 1.008; } 100% { scale: 1.009 1.007; translate: 0 -1.9px; } }
@keyframes pz-breathe-c { 20% { rotate: -1.2deg; translate: 1px -.8px; } 43.3% { rotate: .8deg; translate: -.6px -2.4px; } 66.7%, 100% { rotate: -.5deg; translate: .3px -1.9px; } }

.pz-search { position: relative; width: 194px; height: 221px; }
.pz-search__leg, .pz-search__glass { position: absolute; display: flex; align-items: center; justify-content: center; }
.pz-search__leg img, .pz-search__glass img { position: static; }
.pz-search__leg--back { left: 94px; top: 143px; width: 55.32px; height: 77.83px; }
.pz-search__leg--front { left: 0; top: 137px; width: 70.73px; height: 83.55px; }
.pz-search__leg img { width: 44.07px; height: 71.51px; }
.pz-search__leg--back img { animation: pz-leg-back 2s ease-in-out infinite; }
.pz-search__leg--front img { animation: pz-leg-front 2s ease-in-out infinite; }
.pz-search__body { left: 0; top: 0; width: 165px; height: 165px; animation: pz-bob 1s ease-in-out infinite; }
.pz-search__glass { left: 98px; top: 75px; width: 95.79px; height: 103.84px; animation: pz-glass-move 2s linear infinite; }
.pz-search__glass img { width: 77px; height: 88px; animation: pz-glass-turn 2s ease-in-out infinite; }
@keyframes pz-leg-back { 0%, 100% { rotate: -9.548deg; } 25%, 75% { rotate: -14.548deg; } 50% { rotate: -4.548deg; } }
@keyframes pz-leg-front { 0%, 100% { rotate: 25.713deg; } 25%, 75% { rotate: 30.713deg; } 50% { rotate: 20.713deg; } }
@keyframes pz-bob { 50% { translate: 0 -6px; } }
@keyframes pz-glass-turn { 0%, 100% { rotate: -13.815deg; } 25% { rotate: -23.815deg; } 50% { rotate: -5.815deg; } 75% { rotate: -19.815deg; } }
@keyframes pz-glass-move {
  0% { translate: 0 0; } 5% { translate: .98px -1.7px; } 10% { translate: 3.98px -6.22px; } 15% { translate: 8.02px -9.59px; } 17.5% { translate: 9.75px -10px; }
  20% { translate: 11.02px -9.56px; } 25% { translate: 12px -5.9px; } 30% { translate: 10.37px -.1px; } 35% { translate: 5.36px 3.56px; } 37.5% { translate: 2px 4px; }
  40% { translate: -1.36px 3.71px; } 45% { translate: -6.37px 1.22px; } 50% { translate: -8px -3.14px; } 55% { translate: -6.53px -6.78px; } 60% { translate: -2.03px -8px; }
  65% { translate: 4.03px -6.71px; } 70% { translate: 8.53px -3px; } 75% { translate: 10px .71px; } 80% { translate: 9.18px 2px; } 85% { translate: 6.68px 1.74px; }
  90% { translate: 3.32px 1px; } 95% { translate: .82px .26px; } 100% { translate: 0 0; }
}

.pz-likes { position: relative; width: 272px; height: 197.5px; }
.pz-likes__big { left: 24.5px; top: .5px; width: 220px; height: 197px; }
.pz-likes__h { width: 74px; height: 66px; animation: 8s linear infinite; }
.pz-likes__h--1 { left: 0; top: 62px; animation-name: pz-heart-1; }
.pz-likes__h--2 { left: 198px; top: 0; animation-name: pz-heart-2; }
.pz-likes__h--3 { left: 170px; top: 121px; animation-name: pz-heart-3; }
@keyframes pz-heart-1 {
  0%, 6.25%, 28.75%, 36.25%, 58.75%, 66.25%, 88.75%, 100% { rotate: 0deg; }
  10.75%, 40.75%, 70.75% { rotate: 4deg; } 16.75%, 46.75%, 76.75% { rotate: -4deg; } 22.75%, 52.75%, 82.75% { rotate: 2deg; }
  0%, 6.25%, 31.75%, 36.25%, 61.75%, 66.25%, 91.75%, 100% { translate: 0 0; scale: 1; }
  13.75%, 43.75%, 73.75% { scale: 1.07; } 15.25%, 45.25%, 75.25% { translate: 0 -6px; }
  22.75%, 52.75%, 82.75% { scale: .97; } 24.25%, 54.25%, 84.25% { translate: 0 1px; }
}
@keyframes pz-heart-2 {
  0%, 12.5%, 35%, 42.5%, 65%, 72.5%, 95%, 100% { rotate: 0deg; }
  17%, 47%, 77% { rotate: -4deg; } 23%, 53%, 83% { rotate: 4deg; } 29%, 59%, 89% { rotate: -2deg; }
  0%, 12.5%, 38%, 42.5%, 68%, 72.5%, 98%, 100% { translate: 0 0; scale: 1; }
  20%, 50%, 80% { scale: 1.07; } 21.5%, 51.5%, 81.5% { translate: 0 -6px; }
  29%, 59%, 89% { scale: .97; } 30.5%, 60.5%, 90.5% { translate: 0 1px; }
}
@keyframes pz-heart-3 {
  0%, 22.5%, 30%, 52.5%, 60%, 82.5%, 100% { rotate: 0deg; }
  4.5%, 34.5%, 64.5% { rotate: -4deg; } 10.5%, 40.5%, 70.5% { rotate: 4deg; } 16.5%, 46.5%, 76.5% { rotate: -2deg; }
  0%, 25.5%, 30%, 55.5%, 60%, 85.5%, 100% { translate: 0 0; scale: 1; }
  7.5%, 37.5%, 67.5% { scale: 1.07; } 9%, 39%, 69% { translate: 0 -6px; }
  16.5%, 46.5%, 76.5% { scale: .97; } 18%, 48%, 78% { translate: 0 1px; }
}

/* Écrans : rangée qu'on fait glisser */
.pz-rail { display: flex; gap: 20px; margin: 20px -100px 0; padding: 0 100px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 100px; scrollbar-width: none; cursor: grab;
           -webkit-mask-image: linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent);
           mask-image: linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent); }
.pz-rail::-webkit-scrollbar { display: none; }
.pz-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pz-rail figure { flex: none; display: grid; gap: 10px; scroll-snap-align: start; }
.pz-rail img { width: 220px; aspect-ratio: 393 / 852; border-radius: 28px; box-shadow: 0 0 0 1px var(--line); pointer-events: none; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.pz-rail figure:hover img { transform: translateY(-8px); }
.pz-rail figcaption { font-size: 12px; color: var(--muted); }

/* Badge : maquette Figma « Badge — strap tug and recoil ». La sangle reçoit un petit coup et le badge
   se rebalance seul, deux fois par boucle de 5,33 s. Les images clés sont celles exportées par Figma. */
.pz-badge { display: grid; place-items: center; margin-top: 20px; padding: 50px 0; background: var(--card); overflow: hidden; }
.pz-phone { --s: .82; position: relative; width: calc(472px * var(--s)); height: calc(923px * var(--s)); }
.pz-phone > * { transform: scale(var(--s)); transform-origin: 0 0; }
.pz-phone__frame { position: absolute; left: 0; top: 0; width: 472px; height: 923px; max-width: none; }
.pz-phone__screen { position: absolute; left: 0; top: 0; width: 472px; height: 923px; pointer-events: none; }
.pz-phone__screen::before { content: ""; position: absolute; left: 40px; top: 28px; width: 393px; height: 852px; box-sizing: border-box; border: 1px solid #efefef; border-radius: 50px; background: #fbfbfb; }
.pz-phone__screen > :not(.pz-straps) { z-index: 1; }
.pz-phone__status { position: absolute; left: 40px; top: 28px; width: 393px; height: 44px; }
.pz-phone__status span { position: absolute; left: 19px; top: 18px; width: 54px; font: 600 15px/20px -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -0.5px; text-align: center; color: #000; }
.pz-phone__status img { position: absolute; right: 20.67px; top: 21.33px; }
.pz-phone__header { position: absolute; left: 40px; top: 72px; width: 393px; display: flex; align-items: center; justify-content: space-between; padding: 31px 24px;
                    background: linear-gradient(181.59deg, #fbfbfb 77.4%, rgba(251, 251, 251, 0) 94.7%); }
.pz-phone__header b { font: 800 24px/26px "Darker Grotesque", var(--display); color: #000; }
.pz-phone__header img { margin: -2px -4px -8px; width: 39.5px; height: 39.5px; }
.pz-phone__header i { width: 31px; }
/* Barre d'onglets : structure et cotes du composant Figma « Bottom Navigation » */
.pz-phone__nav { position: absolute; left: 62px; top: 796px; width: 349px; height: 56px; display: flex; align-items: center; box-sizing: border-box;
                 border: .5px solid #e1e1e1; border-radius: 999px; background: #fff; }
.pz-nav { position: relative; display: flex; align-items: center; gap: 36px; width: 347px; padding: 12px 24px; box-sizing: border-box; }
.pz-nav > span { flex: 1 0 0; min-width: 1px; display: flex; justify-content: center; align-items: center; }
.pz-nav i { position: relative; flex: none; display: block; }
.pz-nav > span:not(.pz-nav__me) img { position: absolute; display: block; max-width: none; }
.pz-nav__pill { position: absolute; left: 272px; top: 0; width: 71px; height: 48px; border-radius: 100px; background: rgba(128, 128, 128, .16); }
.pz-nav > .pz-nav__me { position: relative; flex: none; width: 29px; }
.pz-nav__me i { width: 24px; height: 24px; overflow: hidden; }
.pz-nav__me img { position: absolute; left: 1.13px; top: 1px; width: 22px; height: 22px; max-width: none; box-sizing: border-box; border: 1px solid #000; border-radius: 999px; object-fit: cover; }
.pz-phone__screen::after { content: ""; position: absolute; left: 0; right: 0; top: 873px; margin: 0 auto; width: 134px; height: 5px; border-radius: 100px; background: #000; z-index: 1; }
.pz-straps { position: absolute; left: 66px; top: 131px; width: 327px; height: 607px; animation: pz-straps 5.333s linear infinite; }
.pz-straps > img, .pz-straps > span { position: absolute; }
.pz-straps > span { display: flex; align-items: center; justify-content: center; }
.pz-straps > span > img { flex: none; max-width: none; }
.pz-straps .pz-straps__card { animation: pz-card 5.333s linear infinite; }
@keyframes pz-straps {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  7.5% { transform: translate(0px, 0px) rotate(0deg); }
  8.125% { transform: translate(0.324px, 0.058px) rotate(-0.203deg); }
  8.75% { transform: translate(1.91px, 0.26px) rotate(-1.186deg); }
  9.375% { transform: translate(4.411px, 0.262px) rotate(-2.699deg); }
  10.0% { transform: translate(6.421px, -0.403px) rotate(-3.885deg); }
  10.625% { transform: translate(6.536px, -1.694px) rotate(-3.952deg); }
  11.25% { transform: translate(5.454px, -3.252px) rotate(-3.318deg); }
  11.875% { transform: translate(3.945px, -4.926px) rotate(-2.421deg); }
  12.5% { transform: translate(2.257px, -6.522px) rotate(-1.399deg); }
  13.125% { transform: translate(0.608px, -7.86px) rotate(-0.381deg); }
  13.75% { transform: translate(-0.829px, -8.795px) rotate(0.524deg); }
  14.375% { transform: translate(-1.94px, -9.233px) rotate(1.234deg); }
  15.0% { transform: translate(-2.664px, -9.14px) rotate(1.703deg); }
  15.625% { transform: translate(-2.991px, -8.535px) rotate(1.916deg); }
  16.25% { transform: translate(-2.951px, -7.486px) rotate(1.889deg); }
  16.875% { transform: translate(-2.602px, -6.098px) rotate(1.663deg); }
  17.5% { transform: translate(-2.027px, -4.498px) rotate(1.29deg); }
  18.125% { transform: translate(-1.318px, -2.82px) rotate(0.835deg); }
  18.75% { transform: translate(-0.569px, -1.192px) rotate(0.359deg); }
  19.375% { transform: translate(0.133px, 0.276px) rotate(-0.084deg); }
  20.0% { transform: translate(0.719px, 1.501px) rotate(-0.45deg); }
  20.625% { transform: translate(1.141px, 2.43px) rotate(-0.712deg); }
  21.25% { transform: translate(1.375px, 3.042px) rotate(-0.857deg); }
  21.875% { transform: translate(1.424px, 3.346px) rotate(-0.887deg); }
  22.5% { transform: translate(1.311px, 3.374px) rotate(-0.817deg); }
  23.125% { transform: translate(1.072px, 3.178px) rotate(-0.669deg); }
  23.75% { transform: translate(0.753px, 2.818px) rotate(-0.471deg); }
  24.375% { transform: translate(0.403px, 2.358px) rotate(-0.252deg); }
  25.0% { transform: translate(0.063px, 1.858px) rotate(-0.04deg); }
  25.625% { transform: translate(-0.23px, 1.369px) rotate(0.145deg); }
  26.25% { transform: translate(-0.454px, 0.931px) rotate(0.286deg); }
  26.875% { transform: translate(-0.594px, 0.569px) rotate(0.374deg); }
  27.5% { transform: translate(-0.648px, 0.296px) rotate(0.409deg); }
  28.125% { transform: translate(-0.625px, 0.111px) rotate(0.394deg); }
  28.75% { transform: translate(-0.537px, 0.004px) rotate(0.339deg); }
  29.375% { transform: translate(-0.405px, -0.039px) rotate(0.255deg); }
  30.0% { transform: translate(-0.249px, -0.039px) rotate(0.157deg); }
  30.625% { transform: translate(-0.09px, -0.017px) rotate(0.056deg); }
  31.25% { transform: translate(0.055px, 0.011px) rotate(-0.035deg); }
  31.875% { transform: translate(0.17px, 0.028px) rotate(-0.107deg); }
  32.5% { transform: translate(0.239px, 0.027px) rotate(-0.15deg); }
  33.125% { transform: translate(0.26px, 0.004px) rotate(-0.163deg); }
  33.75% { transform: translate(0.239px, -0.032px) rotate(-0.15deg); }
  34.375% { transform: translate(0.19px, -0.073px) rotate(-0.119deg); }
  35.0% { transform: translate(0.13px, -0.107px) rotate(-0.081deg); }
  35.625% { transform: translate(0.072px, -0.126px) rotate(-0.045deg); }
  36.25% { transform: translate(0.028px, -0.126px) rotate(-0.017deg); }
  36.875% { transform: translate(0px, -0.109px) rotate(0deg); }
  37.5% { transform: translate(-0.012px, -0.081px) rotate(0.007deg); }
  38.125% { transform: translate(-0.012px, -0.049px) rotate(0.008deg); }
  38.75% { transform: translate(-0.007px, -0.022px) rotate(0.005deg); }
  39.375% { transform: translate(-0.002px, -0.005px) rotate(0.001deg); }
  40.0% { transform: translate(0px, 0px) rotate(0deg); }
  47.5% { transform: translate(0px, 0px) rotate(0deg); }
  48.125% { transform: translate(0.324px, 0.058px) rotate(-0.203deg); }
  48.75% { transform: translate(1.91px, 0.26px) rotate(-1.186deg); }
  49.375% { transform: translate(4.411px, 0.262px) rotate(-2.699deg); }
  50.0% { transform: translate(6.421px, -0.403px) rotate(-3.885deg); }
  50.625% { transform: translate(6.536px, -1.694px) rotate(-3.952deg); }
  51.25% { transform: translate(5.454px, -3.252px) rotate(-3.318deg); }
  51.875% { transform: translate(3.945px, -4.926px) rotate(-2.421deg); }
  52.5% { transform: translate(2.257px, -6.522px) rotate(-1.399deg); }
  53.125% { transform: translate(0.608px, -7.86px) rotate(-0.381deg); }
  53.75% { transform: translate(-0.829px, -8.795px) rotate(0.524deg); }
  54.375% { transform: translate(-1.94px, -9.233px) rotate(1.234deg); }
  55.0% { transform: translate(-2.664px, -9.14px) rotate(1.703deg); }
  55.625% { transform: translate(-2.991px, -8.535px) rotate(1.916deg); }
  56.25% { transform: translate(-2.951px, -7.486px) rotate(1.889deg); }
  56.875% { transform: translate(-2.602px, -6.098px) rotate(1.663deg); }
  57.5% { transform: translate(-2.027px, -4.498px) rotate(1.29deg); }
  58.125% { transform: translate(-1.318px, -2.82px) rotate(0.835deg); }
  58.75% { transform: translate(-0.569px, -1.192px) rotate(0.359deg); }
  59.375% { transform: translate(0.133px, 0.276px) rotate(-0.084deg); }
  60.0% { transform: translate(0.719px, 1.501px) rotate(-0.45deg); }
  60.625% { transform: translate(1.141px, 2.43px) rotate(-0.712deg); }
  61.25% { transform: translate(1.375px, 3.042px) rotate(-0.857deg); }
  61.875% { transform: translate(1.424px, 3.346px) rotate(-0.887deg); }
  62.5% { transform: translate(1.311px, 3.374px) rotate(-0.817deg); }
  63.125% { transform: translate(1.072px, 3.178px) rotate(-0.669deg); }
  63.75% { transform: translate(0.753px, 2.818px) rotate(-0.471deg); }
  64.375% { transform: translate(0.403px, 2.358px) rotate(-0.252deg); }
  65.0% { transform: translate(0.063px, 1.858px) rotate(-0.04deg); }
  65.625% { transform: translate(-0.23px, 1.369px) rotate(0.145deg); }
  66.25% { transform: translate(-0.454px, 0.931px) rotate(0.286deg); }
  66.875% { transform: translate(-0.594px, 0.569px) rotate(0.374deg); }
  67.5% { transform: translate(-0.648px, 0.296px) rotate(0.409deg); }
  68.125% { transform: translate(-0.625px, 0.111px) rotate(0.394deg); }
  68.75% { transform: translate(-0.537px, 0.004px) rotate(0.339deg); }
  69.375% { transform: translate(-0.405px, -0.039px) rotate(0.255deg); }
  70.0% { transform: translate(-0.249px, -0.039px) rotate(0.157deg); }
  70.625% { transform: translate(-0.09px, -0.017px) rotate(0.056deg); }
  71.25% { transform: translate(0.055px, 0.011px) rotate(-0.035deg); }
  71.875% { transform: translate(0.17px, 0.028px) rotate(-0.107deg); }
  72.5% { transform: translate(0.239px, 0.027px) rotate(-0.15deg); }
  73.125% { transform: translate(0.26px, 0.004px) rotate(-0.163deg); }
  73.75% { transform: translate(0.239px, -0.032px) rotate(-0.15deg); }
  74.375% { transform: translate(0.19px, -0.073px) rotate(-0.119deg); }
  75.0% { transform: translate(0.13px, -0.107px) rotate(-0.081deg); }
  75.625% { transform: translate(0.072px, -0.126px) rotate(-0.045deg); }
  76.25% { transform: translate(0.028px, -0.126px) rotate(-0.017deg); }
  76.875% { transform: translate(0px, -0.109px) rotate(0deg); }
  77.5% { transform: translate(-0.012px, -0.081px) rotate(0.007deg); }
  78.125% { transform: translate(-0.012px, -0.049px) rotate(0.008deg); }
  78.75% { transform: translate(-0.007px, -0.022px) rotate(0.005deg); }
  79.375% { transform: translate(-0.002px, -0.005px) rotate(0.001deg); }
  80.0% { transform: translate(0px, 0px) rotate(0deg); }
  100% { transform: none; }
}
@keyframes pz-card {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  8.125% { transform: translate(0px, 0px) rotate(0deg); }
  8.75% { transform: translate(0.004px, -0.015px) rotate(0.008deg); }
  9.375% { transform: translate(0.127px, -0.502px) rotate(0.248deg); }
  10.0% { transform: translate(0.469px, -1.814px) rotate(0.898deg); }
  10.625% { transform: translate(0.908px, -3.418px) rotate(1.695deg); }
  11.25% { transform: translate(1.19px, -4.401px) rotate(2.185deg); }
  11.875% { transform: translate(1.146px, -4.251px) rotate(2.11deg); }
  12.5% { transform: translate(0.979px, -3.669px) rotate(1.82deg); }
  13.125% { transform: translate(0.749px, -2.847px) rotate(1.411deg); }
  13.75% { transform: translate(0.49px, -1.894px) rotate(0.937deg); }
  14.375% { transform: translate(0.232px, -0.914px) rotate(0.452deg); }
  15.0% { transform: translate(0px, 0px) rotate(0deg); }
  15.625% { transform: translate(-0.191px, 0.777px) rotate(-0.383deg); }
  16.25% { transform: translate(-0.333px, 1.366px) rotate(-0.674deg); }
  16.875% { transform: translate(-0.422px, 1.744px) rotate(-0.86deg); }
  17.5% { transform: translate(-0.46px, 1.908px) rotate(-0.941deg); }
  18.125% { transform: translate(-0.453px, 1.876px) rotate(-0.925deg); }
  18.75% { transform: translate(-0.407px, 1.68px) rotate(-0.828deg); }
  19.375% { transform: translate(-0.332px, 1.363px) rotate(-0.672deg); }
  20.0% { transform: translate(-0.239px, 0.972px) rotate(-0.48deg); }
  20.625% { transform: translate(-0.137px, 0.554px) rotate(-0.273deg); }
  21.25% { transform: translate(-0.037px, 0.15px) rotate(-0.074deg); }
  21.875% { transform: translate(0.052px, -0.206px) rotate(0.102deg); }
  22.5% { transform: translate(0.123px, -0.489px) rotate(0.242deg); }
  23.125% { transform: translate(0.173px, -0.685px) rotate(0.339deg); }
  23.75% { transform: translate(0.2px, -0.79px) rotate(0.39deg); }
  24.375% { transform: translate(0.205px, -0.808px) rotate(0.399deg); }
  25.0% { transform: translate(0.19px, -0.751px) rotate(0.371deg); }
  25.625% { transform: translate(0.161px, -0.635px) rotate(0.314deg); }
  26.25% { transform: translate(0.121px, -0.48px) rotate(0.237deg); }
  26.875% { transform: translate(0.077px, -0.306px) rotate(0.151deg); }
  27.5% { transform: translate(0.033px, -0.13px) rotate(0.064deg); }
  28.125% { transform: translate(-0.008px, 0.03px) rotate(-0.015deg); }
  28.75% { transform: translate(-0.041px, 0.164px) rotate(-0.081deg); }
  29.375% { transform: translate(-0.065px, 0.262px) rotate(-0.129deg); }
  30.0% { transform: translate(-0.08px, 0.322px) rotate(-0.159deg); }
  30.625% { transform: translate(-0.085px, 0.344px) rotate(-0.17deg); }
  31.25% { transform: translate(-0.082px, 0.332px) rotate(-0.164deg); }
  31.875% { transform: translate(-0.073px, 0.292px) rotate(-0.144deg); }
  32.5% { transform: translate(-0.057px, 0.231px) rotate(-0.114deg); }
  33.125% { transform: translate(-0.039px, 0.155px) rotate(-0.077deg); }
  33.75% { transform: translate(-0.019px, 0.078px) rotate(-0.038deg); }
  34.375% { transform: translate(-0.003px, 0.011px) rotate(-0.006deg); }
  35.0% { transform: translate(0.009px, -0.037px) rotate(0.018deg); }
  35.625% { transform: translate(0.016px, -0.064px) rotate(0.032deg); }
  36.25% { transform: translate(0.018px, -0.072px) rotate(0.036deg); }
  36.875% { transform: translate(0.016px, -0.066px) rotate(0.033deg); }
  37.5% { transform: translate(0.013px, -0.051px) rotate(0.025deg); }
  38.125% { transform: translate(0.008px, -0.033px) rotate(0.016deg); }
  38.75% { transform: translate(0.004px, -0.018px) rotate(0.009deg); }
  39.375% { transform: translate(0.002px, -0.007px) rotate(0.004deg); }
  40.0% { transform: translate(0px, -0.002px) rotate(0.001deg); }
  40.625% { transform: translate(0px, 0px) rotate(0deg); }
  48.125% { transform: translate(0px, 0px) rotate(0deg); }
  48.75% { transform: translate(0.004px, -0.015px) rotate(0.008deg); }
  49.375% { transform: translate(0.127px, -0.502px) rotate(0.248deg); }
  50.0% { transform: translate(0.469px, -1.814px) rotate(0.898deg); }
  50.625% { transform: translate(0.908px, -3.418px) rotate(1.695deg); }
  51.25% { transform: translate(1.19px, -4.401px) rotate(2.185deg); }
  51.875% { transform: translate(1.146px, -4.251px) rotate(2.11deg); }
  52.5% { transform: translate(0.979px, -3.669px) rotate(1.82deg); }
  53.125% { transform: translate(0.749px, -2.847px) rotate(1.411deg); }
  53.75% { transform: translate(0.49px, -1.894px) rotate(0.937deg); }
  54.375% { transform: translate(0.232px, -0.914px) rotate(0.452deg); }
  55.0% { transform: translate(0px, 0px) rotate(0deg); }
  55.625% { transform: translate(-0.191px, 0.777px) rotate(-0.383deg); }
  56.25% { transform: translate(-0.333px, 1.366px) rotate(-0.674deg); }
  56.875% { transform: translate(-0.422px, 1.744px) rotate(-0.86deg); }
  57.5% { transform: translate(-0.46px, 1.908px) rotate(-0.941deg); }
  58.125% { transform: translate(-0.453px, 1.876px) rotate(-0.925deg); }
  58.75% { transform: translate(-0.407px, 1.68px) rotate(-0.828deg); }
  59.375% { transform: translate(-0.332px, 1.363px) rotate(-0.672deg); }
  60.0% { transform: translate(-0.239px, 0.972px) rotate(-0.48deg); }
  60.625% { transform: translate(-0.137px, 0.554px) rotate(-0.273deg); }
  61.25% { transform: translate(-0.037px, 0.15px) rotate(-0.074deg); }
  61.875% { transform: translate(0.052px, -0.206px) rotate(0.102deg); }
  62.5% { transform: translate(0.123px, -0.489px) rotate(0.242deg); }
  63.125% { transform: translate(0.173px, -0.685px) rotate(0.339deg); }
  63.75% { transform: translate(0.2px, -0.79px) rotate(0.39deg); }
  64.375% { transform: translate(0.205px, -0.808px) rotate(0.399deg); }
  65.0% { transform: translate(0.19px, -0.751px) rotate(0.371deg); }
  65.625% { transform: translate(0.161px, -0.635px) rotate(0.314deg); }
  66.25% { transform: translate(0.121px, -0.48px) rotate(0.237deg); }
  66.875% { transform: translate(0.077px, -0.306px) rotate(0.151deg); }
  67.5% { transform: translate(0.033px, -0.13px) rotate(0.064deg); }
  68.125% { transform: translate(-0.008px, 0.03px) rotate(-0.015deg); }
  68.75% { transform: translate(-0.041px, 0.164px) rotate(-0.081deg); }
  69.375% { transform: translate(-0.065px, 0.262px) rotate(-0.129deg); }
  70.0% { transform: translate(-0.08px, 0.322px) rotate(-0.159deg); }
  70.625% { transform: translate(-0.085px, 0.344px) rotate(-0.17deg); }
  71.25% { transform: translate(-0.082px, 0.332px) rotate(-0.164deg); }
  71.875% { transform: translate(-0.073px, 0.292px) rotate(-0.144deg); }
  72.5% { transform: translate(-0.057px, 0.231px) rotate(-0.114deg); }
  73.125% { transform: translate(-0.039px, 0.155px) rotate(-0.077deg); }
  73.75% { transform: translate(-0.019px, 0.078px) rotate(-0.038deg); }
  74.375% { transform: translate(-0.003px, 0.011px) rotate(-0.006deg); }
  75.0% { transform: translate(0.009px, -0.037px) rotate(0.018deg); }
  75.625% { transform: translate(0.016px, -0.064px) rotate(0.032deg); }
  76.25% { transform: translate(0.018px, -0.072px) rotate(0.036deg); }
  76.875% { transform: translate(0.016px, -0.066px) rotate(0.033deg); }
  77.5% { transform: translate(0.013px, -0.051px) rotate(0.025deg); }
  78.125% { transform: translate(0.008px, -0.033px) rotate(0.016deg); }
  78.75% { transform: translate(0.004px, -0.018px) rotate(0.009deg); }
  79.375% { transform: translate(0.002px, -0.007px) rotate(0.004deg); }
  80.0% { transform: translate(0px, -0.002px) rotate(0.001deg); }
  80.625% { transform: translate(0px, 0px) rotate(0deg); }
  100% { transform: none; }
}

/* Apparition au défilement */
[data-reveal], [data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.is-in[data-reveal], .is-in[data-stagger] > *, .is-in [data-stagger] > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pz-hero__bg, .pz-hero__phone, .pz-hero__beta, .pz-char, .pz-state *, .pz-chars__card::after, .pz-marquee__track, .pz-straps, .pz-straps__card { animation: none; transform: none; }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 809px) {
  .pz-hero { --s: .5; }
  .pz-scope { grid-template-columns: 1fr; }
  .pz-scope > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pz-scope > div { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; }
  .pz-scope dt { margin: 0; }
  .pz-scope dd { font-size: 20px; }
  .pz-evo__stage img { width: 46%; }
  .pz-evo__steps button { font-size: 10px; }
  .pz-icon__stage img { width: 40%; }
  .pz-marquee img { width: 240px; }
  .pz-chars { grid-template-columns: 1fr; gap: 8px; }
  .pz-chars__card { grid-template-columns: 90px 1fr; column-gap: 20px; justify-items: start; align-items: center; padding: 22px 20px; text-align: left; }
  .pz-char { grid-row: span 2; height: 64px; justify-self: center; }
  .pz-chars__name { margin: 0; align-self: end; }
  .pz-chars__role { align-self: start; }
  .pz-chars__card::after { left: 80px; top: 14px; }
  .pz-states__stage { height: 300px; }
  .pz-empty { scale: .62; margin: -40px -80px; }
  .pz-search, .pz-likes { scale: .8; }
  .pz-rail { margin: 20px -16px 0; padding: 0 16px 10px; scroll-padding: 0 16px; -webkit-mask-image: none; mask-image: none; }
  .pz-rail img { width: 170px; border-radius: 22px; }
  .pz-badge { padding: 30px 0; }
  .pz-phone { --s: .62; }
}

/* Bouton son, fixe en bas à droite de toutes les pages */
.sound-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
                background: rgba(239, 239, 239, .85); color: var(--soft); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
                transition: color .2s, scale .3s cubic-bezier(.34, 1.56, .64, 1); }
.sound-toggle:hover { color: #000; scale: 1.08; }
.sound-toggle:active { scale: .92; }
.sound-toggle svg { width: 18px; height: 18px; }
.sound-toggle__off { opacity: 0; }
.sound-toggle.is-off .sound-toggle__waves { opacity: 0; }
.sound-toggle.is-off .sound-toggle__off { opacity: 1; }

/* Fiche d'un robot (About) : grande photo, design industriel, caractéristiques mécaniques */
/* height: fit-content : Safari ne dimensionne pas une boîte de dialogue à son contenu (elle s'étirait sur toute la hauteur) */
.robot-sheet { width: min(860px, calc(100% - 32px)); max-width: none; height: 600px; max-height: calc(100% - 48px); margin: auto; padding: 0; border: 0; border-radius: 20px; background: #fff; color: #000;
               display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
               animation: sheet-in .5s cubic-bezier(.34, 1.4, .64, 1); }
.robot-sheet:not([open]) { display: none; }
.robot-sheet::backdrop { background: rgba(255, 255, 255, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in .3s ease; }
.robot-sheet.is-closing { animation: sheet-out .22s ease forwards; }
.robot-sheet.is-closing::backdrop { animation: fade-in .22s ease reverse forwards; }
/* Signature personnalisable : même fenêtre que les fiches robots, en plus petit */
.logo-sheet { width: min(420px, calc(100% - 32px)); max-width: none; margin: auto; padding: 30px 28px 24px; border: 0; border-radius: 20px; background: #fff; color: #000;
              box-shadow: 0 30px 80px rgba(0, 0, 0, .25); animation: sheet-in .5s cubic-bezier(.34, 1.4, .64, 1); }
.logo-sheet:not([open]) { display: none; }
.logo-sheet::backdrop { background: rgba(255, 255, 255, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in .3s ease; }
.logo-sheet.is-closing { animation: sheet-out .22s ease forwards; }
.logo-sheet.is-closing::backdrop { animation: fade-in .22s ease reverse forwards; }
.logo-sheet h3 { font: 500 26px/1 var(--display); letter-spacing: -.05em; }
.logo-sheet__hint { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.logo-sheet__tabs { display: inline-flex; gap: 2px; margin-top: 20px; padding: 3px; border-radius: 99px; background: #efefef; }
.logo-sheet__tabs button { height: 28px; padding: 0 14px; border: 0; border-radius: 99px; background: none; font: 500 12px/1 var(--display); color: var(--faint); cursor: pointer; transition: background .2s, color .2s; }
.logo-sheet__tabs [aria-selected="true"] { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.logo-sheet__pad { position: relative; height: 140px; margin-top: 12px; border-radius: 14px; background: #f5f5f5; overflow: hidden; }
.logo-sheet__input { position: absolute; inset: 0; width: 100%; border: 0; background: none; outline: none; text-align: center; font: 400 46px/1 "Caveat", cursive; color: #000; }
.logo-sheet__input::placeholder { color: #cfcfcf; }
.logo-sheet__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.logo-sheet__pad[data-mode="write"] .logo-sheet__canvas, .logo-sheet__pad[data-mode="draw"] .logo-sheet__input { display: none; }
.logo-sheet__clear { position: absolute; right: 8px; bottom: 8px; height: 24px; padding: 0 10px; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .06); font: 500 11px/1 var(--display); color: var(--muted); cursor: pointer; }
.logo-sheet__clear:hover { background: rgba(0, 0, 0, .12); color: #000; }
.logo-sheet__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.logo-sheet__reset { border: 0; background: none; padding: 0; font: 400 12px/1 var(--display); color: var(--faint); cursor: pointer; transition: color .2s; }
.logo-sheet__reset:hover { color: #000; }
.logo-sheet__ok { height: 40px; padding: 0 22px; border: 0; border-radius: 99px; background: #000; color: #fff; font: 500 14px/1 var(--display); cursor: pointer; transition: opacity .2s, scale .2s; }
.logo-sheet__ok:disabled { opacity: .25; cursor: default; }
.logo-sheet__ok:not(:disabled):active { scale: .96; }
@keyframes sheet-in { from { opacity: 0; scale: .94; translate: 0 16px; } }
@keyframes sheet-out { to { opacity: 0; scale: .97; translate: 0 8px; } }
@keyframes fade-in { from { opacity: 0; } }
/* Nomenclature du robot : une carte par composant, pictogramme au trait, quantité en gros */
/* La hauteur de la fiche vient de la colonne de droite : la liste est dans un calque en position absolue,
   qui n'impose aucune hauteur (dans tous les navigateurs) et défile s'il est plus long */
.robot-bom { position: relative; background: #f7f7f7; }
.robot-bom__scroll { position: absolute; inset: 0; padding: 22px 22px 18px; overflow-y: auto; scrollbar-width: thin; }
.robot-bom__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.robot-bom__head img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.robot-bom__head p { font-size: 11px; color: var(--faint); }
.robot-bom__head b { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; }
.robot-bom__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; }
.robot-bom__list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px 10px 10px; border-radius: 12px; background: #fff;
                      animation: spec-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.1s + var(--i) * .035s); transition: box-shadow .2s, translate .3s cubic-bezier(.34, 1.56, .64, 1); }
.robot-bom__list li:hover { translate: 0 -2px; box-shadow: 0 6px 16px rgba(0, 0, 0, .06); }
.robot-bom__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f3f3f3; color: #111; }
.robot-bom__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.robot-bom__list li:hover .robot-bom__icon { background: #111; color: #fff; }
.robot-bom__text b { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.robot-bom__text small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.25; color: var(--faint); }
.robot-bom__qty { font: 500 18px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.robot-sheet__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.robot-sheet__body { padding: 30px 32px 22px; overflow-y: auto; }
.robot-sheet__close { position: absolute; right: 14px; top: 14px; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06);
                      font-size: 20px; line-height: 1; color: #000; cursor: pointer; transition: background .2s, rotate .3s cubic-bezier(.34, 1.56, .64, 1); }
.robot-sheet__close:hover { background: rgba(0, 0, 0, .12); rotate: 90deg; }
.robot-sheet__maker { font-size: 12px; color: var(--faint); }
.robot-sheet__maker span { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: #efefef; color: var(--muted); }
.robot-sheet h3 { margin-top: 10px; font: 500 34px/1 var(--display); letter-spacing: -.05em; }
.robot-sheet__kicker { margin-top: 26px; font-size: 12px; font-weight: 500; color: #000; }
.robot-sheet__design { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.robot-sheet__specs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border-top: 1px solid var(--line); }
.robot-sheet__specs div { padding: 11px 0; border-bottom: 1px solid var(--line); animation: spec-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.15s + var(--i) * .04s); }
.robot-sheet__specs div:nth-child(odd) { padding-right: 14px; }
.robot-sheet__specs div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.robot-sheet__specs dt { font-size: 11px; color: var(--faint); }
.robot-sheet__specs dd { margin-top: 3px; font-size: 14px; font-weight: 500; }
@keyframes spec-in { from { opacity: 0; translate: 0 8px; } }
.robot-sheet__note { margin-top: 14px; font-size: 11px; color: var(--faint); }
.robot { cursor: pointer; }
@media (max-width: 809px) {
  .robot-sheet { grid-template-columns: 1fr; margin: auto 0 0; width: 100%; height: auto; max-height: 88vh; border-radius: 20px 20px 0 0; overflow-y: auto; }
  .robot-bom__scroll { position: static; overflow: visible; padding: 18px 16px; }
  .robot-bom__list { grid-template-columns: 1fr; }
  .robot-sheet__body { padding: 24px 20px 30px; overflow: visible; }
  .robot-sheet h3 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .robot-sheet, .robot-sheet__specs div, .robot-sheet::backdrop, .robot-bom__list li { animation: none; } }