/* Cartes projets : seul le format 1,91:1 est commun, chaque carte reprend la charte de son projet.
   Plus petit texte : 3.2cqw, soit 11 px sur une carte de téléphone. */

.pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 860px) { .pc-grid { grid-template-columns: 1fr; gap: 18px; } }

.pc-card { position: relative; display: block; width: 100%; padding: 0; border: 0; font: inherit; text-align: left; cursor: inherit; aspect-ratio: 1.91 / 1; border-radius: 16px; overflow: hidden; container-type: inline-size; isolation: isolate; transition: transform .45s cubic-bezier(.2,.7,.1,1), box-shadow .45s; }
.pc-grid .pc-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(0,0,0,.45); }
.pc-card:focus-visible { outline: 3px solid #FFD60A; outline-offset: 4px; }
.pc-card * { margin: 0; }
.pc-card .abs { position: absolute; }

/* Camille Casting */
.k-cam { background: #0c0c0c; color: #fffaf0; font-family: 'Inter', sans-serif; }
.k-cam .photo { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .6; animation: cam-zoom 16s ease-in-out infinite alternate; }
.k-cam:hover .photo { opacity: .78; }
@keyframes cam-zoom { from { transform: scale(1.05); } to { transform: scale(1.18) translateX(-3%); } }
.k-cam .veil { inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 62%, rgba(0,0,0,.15) 100%); }
.k-cam .logo { left: 5cqw; top: 5cqw; width: 27cqw; }
.k-cam h3 { left: 5cqw; top: 19.5cqw; width: 60cqw; font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 8.4cqw; line-height: .96; letter-spacing: -.045em; }
.k-cam h3 em { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-size: 10.5cqw; letter-spacing: 0; color: oklch(0.66 0.21 35); display: inline-block; line-height: .8; clip-path: inset(0 100% 0 0); animation: cam-ink 6s ease-in-out infinite; }
@keyframes cam-ink { 0%, 8% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
.k-cam .note { right: 4.5cqw; top: 5cqw; width: 33cqw; background: oklch(0.66 0.21 35); border-radius: 1.8cqw; padding: 2cqw 2.2cqw; transform: rotate(4deg); transform-origin: 50% 0; animation: cam-sway 4s ease-in-out infinite; box-shadow: 0 1cqw 2.4cqw rgba(0,0,0,.35); }
@keyframes cam-sway { 50% { transform: rotate(1.5deg); } }
.k-cam .note b { display: block; font-family: 'Caveat'; font-size: 4.4cqw; line-height: .95; color: #1a0a04; font-weight: 700; }
.k-cam .note span { display: block; margin-top: .8cqw; font-size: 3.2cqw; color: #2a1208; line-height: 1.15; font-weight: 600; }

/* ChefMate */
.k-chef { background: radial-gradient(circle at 75% 55%, #eaf1f6 0, #fafbfc 55%); color: #0a0e17; font-family: 'Inter', sans-serif; }
.k-chef .brand { left: 5cqw; top: 4.5cqw; display: flex; align-items: center; gap: 1.2cqw; font-weight: 700; font-size: 3.6cqw; }
.k-chef .brand img { width: 4.8cqw; }
.k-chef h3 { left: 5cqw; top: 12cqw; font-weight: 800; font-size: 7.4cqw; line-height: .98; letter-spacing: -.045em; }
.k-chef h3 span { background: linear-gradient(180deg, #2EEBFF 0%, #00a6dd 55%, #007FB8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-chef .facts { left: 5cqw; bottom: 4.5cqw; font-size: 3.2cqw; font-weight: 600; color: #57606a; }
.k-chef .facts i { display: inline-block; width: 1.6cqw; height: 1.6cqw; border-radius: .4cqw; background: #007FB8; margin-right: 1cqw; vertical-align: middle; }
.k-chef .stage { right: -4cqw; top: -4cqw; width: 50cqw; height: 60cqw; perspective: 90cqw; }
.k-chef .phone { width: 100%; mix-blend-mode: multiply; transform: rotateY(-8deg) rotateX(4deg); animation: chef-float 6s ease-in-out infinite; transition: transform .6s; }
.k-chef:hover .phone { transform: rotateY(-22deg) rotateX(8deg) scale(1.04); animation-play-state: paused; }
@keyframes chef-float { 50% { transform: rotateY(-12deg) rotateX(6deg) translateY(-1.2cqw); } }
.k-chef .toast { right: 22cqw; top: 31cqw; background: #fff; border: 1px solid #e8ecf0; border-radius: 2cqw; padding: 1.6cqw 2cqw; font-size: 3.2cqw; box-shadow: 0 1.4cqw 3.2cqw rgba(10,14,23,.14); display: flex; gap: 1.4cqw; align-items: center; white-space: nowrap; opacity: 0; animation: chef-toast 7s ease-in-out infinite; }
.k-chef .toast b { font-weight: 700; }
.k-chef .toast .dot { width: 4.4cqw; height: 4.4cqw; border-radius: 1.2cqw; background: #e6f4fa; color: #007FB8; display: grid; place-items: center; font-weight: 800; font-size: 3.2cqw; }
@keyframes chef-toast { 0%, 8% { opacity: 0; transform: translateX(4cqw); } 15%, 72% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-1.5cqw); } }

/* steph */
.k-steph { background: #0b0b0b; color: #f4f4f0; font-family: 'Space Grotesk', sans-serif; background-image: linear-gradient(#1a1a1a 1px, transparent 1px), linear-gradient(90deg, #1a1a1a 1px, transparent 1px); background-size: 4cqw 4cqw; }
.k-steph .brand { left: 5cqw; top: 4.5cqw; display: flex; align-items: center; gap: 1.4cqw; font-weight: 700; font-size: 4.4cqw; letter-spacing: -.02em; }
.k-steph .brand svg { width: 4cqw; }
.k-steph .term { left: 5cqw; top: 14cqw; width: 52cqw; background: #161616; border: 1px solid #3a3a37; border-radius: 1.4cqw; padding: 2.4cqw 2.6cqw; font-family: 'JetBrains Mono'; font-size: 3.2cqw; line-height: 1.5; }
.k-steph .prompt { color: #e2ff3b; }
.k-steph .cmd { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; animation: st-type 8s steps(8) infinite; }
@keyframes st-type { 0% { width: 0; } 16%, 100% { width: 8ch; } }
.k-steph .out { color: #77776f; opacity: 0; animation: st-show 8s infinite; }
@keyframes st-show { 0%, 20% { opacity: 0; } 24%, 94% { opacity: 1; } 100% { opacity: 0; } }
.k-steph .side { right: 5cqw; top: 12cqw; width: 34cqw; font-size: 6.6cqw; line-height: .98; letter-spacing: -.045em; font-weight: 500; text-align: right; }
.k-steph .side em { font-style: normal; color: #e2ff3b; }
.k-steph .say { left: 5cqw; top: 33cqw; font-size: 5.4cqw; font-weight: 500; letter-spacing: -.03em; color: #e2ff3b; display: flex; align-items: center; gap: 1.6cqw; opacity: 0; animation: st-say 8s infinite; }
@keyframes st-say { 0%, 32% { opacity: 0; transform: translateY(1.5cqw); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.k-steph .say svg { width: 5cqw; flex: none; }
.k-steph .bars { left: 5cqw; right: 5cqw; bottom: 4cqw; height: 3.6cqw; display: flex; gap: 1.4cqw; align-items: flex-end; }
.k-steph .bars i { background: #e2ff3b; height: 100%; transform-origin: bottom; transform: scaleY(.18); animation: st-eq 8s infinite; }
@keyframes st-eq { 0%, 36% { transform: scaleY(.18); } 40% { transform: scaleY(1); } 44% { transform: scaleY(.45); } 48% { transform: scaleY(.9); } 52% { transform: scaleY(.3); } 56% { transform: scaleY(.8); } 60%, 100% { transform: scaleY(.18); } }

/* Allô Léon */
.k-leon { background: #fff; color: #111; font-family: 'Outfit', sans-serif; box-shadow: inset 0 0 0 1px #ececec; }
.k-leon .brand { left: 5cqw; top: 4.5cqw; display: flex; align-items: center; gap: 1.4cqw; font-weight: 700; font-size: 3.6cqw; }
.k-leon .brand i { width: 4cqw; height: 4cqw; border: .4cqw solid #111; border-radius: 50%; display: grid; place-items: center; }
.k-leon .brand i::after { content: ""; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #111; }
.k-leon h3 { left: 5cqw; top: 13cqw; width: 60cqw; font-weight: 300; font-size: 6.6cqw; line-height: 1.04; letter-spacing: -.04em; }
.k-leon h3 b { font-weight: 700; background: linear-gradient(#ffd400, #ffd400) 0 88% / 0 24% no-repeat; animation: leon-hl 6s ease-in-out infinite; }
@keyframes leon-hl { 0%, 10% { background-size: 0 24%; } 25%, 100% { background-size: 100% 24%; } }
.k-leon .floor { right: 4cqw; top: 40cqw; width: 30cqw; height: 6cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.1), transparent); }
.k-leon .leon { right: 7cqw; top: 11cqw; width: 25cqw; animation: leon-ring 3s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes leon-ring { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-7deg); } 65% { transform: rotate(6deg); } 70% { transform: rotate(-5deg); } 75% { transform: rotate(3deg); } 80% { transform: translateY(-1cqw); } 88% { transform: translateY(0); } }
.k-leon .sms { right: 3cqw; top: 4cqw; background: #111; color: #fff; font-weight: 700; font-size: 3.2cqw; padding: 1.4cqw 2.2cqw; border-radius: 2.4cqw 2.4cqw .4cqw 2.4cqw; transform-origin: 100% 100%; animation: leon-sms 6s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes leon-sms { 0%, 35% { transform: scale(0); } 42%, 90% { transform: scale(1); } 100% { transform: scale(0); } }

/* POF : la bibliothèque de pof.design */
.k-pof { background: radial-gradient(ellipse at 50% 35%, #4a3a2c 0, #2b2018 55%, #17110c 100%); color: #ece5d8; font-family: 'Fraunces', serif; }
.k-pof .name { left: 5cqw; top: 4.5cqw; font-family: 'Syne'; font-weight: 700; font-size: 4cqw; letter-spacing: -.01em; }
.k-pof .role { left: 5cqw; top: 9.6cqw; font-size: 3.2cqw; color: #a89a88; }
.k-pof .count { right: 5cqw; top: 5cqw; font-size: 3.2cqw; color: #a89a88; }
.k-pof .stage { left: 5cqw; right: 5cqw; top: 16cqw; bottom: 4.5cqw; perspective: 120cqw; }
.k-pof .box { position: absolute; inset: 0; border: 1.4cqw solid #5b412f; border-radius: .4cqw; background: linear-gradient(180deg, #0d0906, #241a12 70%, #33261b); box-shadow: inset 0 2.4cqw 3cqw rgba(0,0,0,.7), 0 3cqw 4cqw -1cqw rgba(0,0,0,.6); transform: rotateX(4deg) rotateY(-6deg); animation: pof-turn 9s ease-in-out infinite alternate; transform-style: preserve-3d; }
.k-pof:hover .box { animation-duration: 2.5s; }
@keyframes pof-turn { to { transform: rotateX(2deg) rotateY(6deg); } }
.k-pof .row { position: absolute; left: 2cqw; right: 2cqw; bottom: 0; display: flex; align-items: flex-end; gap: .35cqw; }
.k-pof .bk { position: relative; flex: none; border-radius: .3cqw .3cqw 0 0; display: flex; align-items: center; justify-content: center; box-shadow: inset -.4cqw 0 0 rgba(0,0,0,.18), inset .2cqw 0 0 rgba(255,255,255,.25); }
.k-pof .bk span { writing-mode: vertical-rl; font-size: 3cqw; line-height: 1; white-space: nowrap; }
.k-pof .bk.pull { animation: pof-pull 6s cubic-bezier(.5,0,.2,1) infinite; z-index: 2; }
@keyframes pof-pull { 0%, 35% { transform: none; box-shadow: inset -.4cqw 0 0 rgba(0,0,0,.18); } 50%, 80% { transform: translateY(-3.2cqw) scale(1.12); box-shadow: 0 2cqw 2.4cqw rgba(0,0,0,.55); } 95%, 100% { transform: none; } }
.k-pof .flat { flex: none; display: flex; flex-direction: column; gap: .3cqw; margin-left: .8cqw; }
.k-pof .flat div { width: 27cqw; letter-spacing: -.06em; height: 4.4cqw; background: #6a5a48; border-radius: .2cqw; font-family: 'Syne'; font-weight: 800; font-size: 3.2cqw; color: #f2ead9; padding-left: 1.6cqw; display: flex; align-items: center; white-space: nowrap; }
.k-pof .flat div:first-child { background: #8a7560; width: 22cqw; letter-spacing: 0; font-family: 'Fraunces'; font-weight: 600; font-size: 3.2cqw; }

/* Maille */
.k-maille { background: #F4F1EA; color: #0E0E0C; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; }
.k-maille .blob { border-radius: 50%; filter: blur(4cqw); opacity: .55; animation: m-blob 12s ease-in-out infinite alternate; }
.k-maille .b1 { width: 40cqw; height: 40cqw; left: -8cqw; top: -10cqw; background: #c9e3ec; }
.k-maille .b2 { width: 36cqw; height: 36cqw; right: -6cqw; bottom: -14cqw; background: #eadfc6; animation-delay: -6s; }
@keyframes m-blob { to { transform: translate(6cqw, 4cqw) scale(1.15); } }
.k-maille .net { inset: 0; width: 100%; height: 100%; }
.k-maille .net circle { animation: m-pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes m-pulse { 50% { transform: scale(1.35); } }
.k-maille .net line { stroke-dasharray: 3 3; animation: m-dash 2s linear infinite; }
@keyframes m-dash { to { stroke-dashoffset: -12; } }
.k-maille .center { left: 50%; top: 50%; transform: translate(-50%, -52%); width: 66cqw; }
.k-maille .logo { font-family: 'Anton'; font-size: 6.4cqw; line-height: 1; }
.k-maille .sub { font-weight: 700; font-size: 3.2cqw; letter-spacing: .3em; color: #555; margin-top: .4cqw; }
.k-maille h3 { font-family: 'Anton'; font-weight: 400; font-size: 9.4cqw; line-height: .95; letter-spacing: -.02em; margin-top: 2.2cqw; }
.k-maille h3 span { color: #2FAEE0; text-shadow: .5cqw .5cqw 0 #0E0E0C; -webkit-text-stroke: .25cqw #0E0E0C; }
.k-maille .field { margin: 3cqw auto 0; width: 50cqw; display: flex; align-items: center; gap: 1.4cqw; background: #fff; border: .4cqw solid #0E0E0C; border-radius: 2.2cqw; padding: 1cqw 1cqw 1cqw 2.2cqw; box-shadow: .7cqw .7cqw 0 #0E0E0C; text-align: left; font-size: 3.4cqw; }
.k-maille .field b { font-family: 'Anton'; font-weight: 400; font-size: 3.8cqw; }
.k-maille .field .typed { flex: 1; overflow: hidden; white-space: nowrap; }
.k-maille .field .typed span { display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; border-right: .3cqw solid #0E0E0C; animation: m-type 6s steps(9) infinite; }
@keyframes m-type { 0%, 10% { width: 0; } 40%, 85% { width: 9ch; } 100% { width: 0; } }
.k-maille .field i { width: 6.4cqw; height: 5.4cqw; border-radius: 1.4cqw; background: #a0a09c; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 3.4cqw; animation: m-go 6s infinite; }
@keyframes m-go { 0%, 38% { background: #a0a09c; } 42%, 85% { background: #2FAEE0; } 100% { background: #a0a09c; } }

/* BLE Spammer : l'app telle que dans son README */
.k-ble { background: #fff; color: #000; font-family: 'Roboto', sans-serif; box-shadow: inset 0 0 0 1px #ececec; }
.k-ble .icon { left: 4cqw; top: 4cqw; width: 15cqw; }
.k-ble .icon .arc { animation: ble-arc 1.5s ease-in-out infinite; }
.k-ble .icon .a2 { animation-delay: .2s; }
.k-ble .icon .a3 { animation-delay: .4s; }
@keyframes ble-arc { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
.k-ble .title { left: 5cqw; top: 21cqw; font-weight: 900; font-size: 7.6cqw; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; }
.k-ble .title span { color: #F9772F; }
.k-ble .stars { left: 5cqw; bottom: 5cqw; font-weight: 700; font-size: 3.4cqw; display: flex; align-items: center; gap: 1.2cqw; }
.k-ble .stars b { background: #F9772F; color: #fff; padding: .6cqw 1.6cqw; }
.k-ble .list { right: 4.5cqw; top: 4.5cqw; display: flex; flex-direction: column; gap: 1.6cqw; align-items: flex-end; }
.k-ble .list small { align-self: flex-start; font-size: 3.2cqw; color: #777; font-weight: 500; margin-bottom: -.6cqw; }
.k-ble .btn { display: flex; align-items: center; gap: 2cqw; background: #fff; padding: 1.6cqw 2.2cqw; font-weight: 700; font-size: 3.2cqw; text-transform: uppercase; box-shadow: 0 0 0 .3cqw #e6e6e6, .4cqw .4cqw 0 .3cqw #d0d0d0; }
.k-ble .btn i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #aaa; animation: ble-on 6s infinite; }
.k-ble .btn:nth-of-type(2) i { animation-delay: 2s; }
.k-ble .btn:nth-of-type(3) i { animation-delay: 4s; }
@keyframes ble-on { 0%, 33.3%, 100% { background: #aaa; box-shadow: none; } 2%, 31% { background: #F9772F; box-shadow: 0 0 0 .8cqw rgba(249,119,47,.25); } }
.k-ble .step { right: 4.5cqw; bottom: 4.5cqw; display: flex; align-items: center; gap: 1.4cqw; font-size: 4cqw; color: #555; }
.k-ble .step b { width: 5.6cqw; height: 5.6cqw; background: #F9772F; color: #fff; display: grid; place-items: center; font-size: 3.6cqw; box-shadow: .3cqw .3cqw 0 rgba(0,0,0,.18); }
.k-ble .step span { font-variant-numeric: tabular-nums; min-width: 9cqw; text-align: center; }
.k-ble .step span::after { content: "20ms"; animation: ble-ms 6s steps(1) infinite; }
@keyframes ble-ms { 0% { content: "20ms"; } 33% { content: "100ms"; } 66% { content: "2000ms"; } }

/* Fiche projet */
.pc-scrim { position: fixed; inset: 0; z-index: 9000; background: rgba(10,10,10,.62); backdrop-filter: blur(6px); overflow-y: auto; padding: 6vh 16px; animation: pc-fade .25s ease; }
@keyframes pc-fade { from { opacity: 0; } }
.pc-sheet { position: relative; margin: 0 auto; width: min(720px, 100%); background: #fff; color: #111; border-radius: 18px; overflow: hidden; animation: pc-up .4s cubic-bezier(.2,.7,.1,1); font-family: 'Inter Tight', sans-serif; }
@keyframes pc-up { from { transform: translateY(28px); opacity: 0; } }
.pc-sheet .pc-card { border-radius: 0; }
.pc-sheet .in { padding: 24px 26px 28px; }
.pc-sheet .in .k { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: #777; }
.pc-sheet .in h3 { font-size: clamp(30px, 6vw, 40px); letter-spacing: -.03em; margin: 6px 0 10px; font-weight: 800; line-height: 1; }
.pc-sheet .in p { font-size: 17px; line-height: 1.55; color: #333; margin: 0 0 18px; }
.pc-sheet .in dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; font-size: 16px; margin: 0 0 22px; }
.pc-sheet .in dt { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #777; padding-top: 3px; }
.pc-sheet .in dd { margin: 0; }
@media (max-width: 620px) { .pc-sheet .in dl { grid-template-columns: 1fr; gap: 2px; } .pc-sheet .in dd { margin-bottom: 10px; } }
.pc-sheet .in .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pc-sheet .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; padding: 13px 20px; border-radius: 99px; border: 1.5px solid var(--b); background: var(--b); color: var(--f); text-decoration: none; }
.pc-sheet .go.ghost { background: transparent; color: #111; border-color: #111; }
.pc-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .pc-card *, .pc-card *::before, .pc-card *::after { animation: none !important; }
  .k-cam h3 em { clip-path: none; }
  .k-chef .toast, .k-steph .out, .k-steph .say { opacity: 1; }
  .k-steph .cmd { width: 8ch; }
  .k-leon h3 b { background-size: 100% 24%; }
  .k-leon .sms { transform: none; }
  .k-maille .field .typed span { width: 9ch; }
}