@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lexend-400.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lexend-700.woff2') format('woff2'); }
@font-face { font-family: 'Reenie Beanie'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/reenie-beanie-400.woff2') format('woff2'); }

html, body { margin: 0; padding: 0; }
body { background: #0e0e0e; color: #f6f6f3; font-family: 'Lexend', Verdana, 'Segoe UI', sans-serif; -webkit-text-size-adjust: 100%; }
body.clair { background: #f6f6f3; color: #151515; }
a { color: inherit; }
a:hover { color: inherit; }
input::placeholder, textarea::placeholder { color: rgba(246,246,243,.55); }

/* La scène fixe (accueil) et les pages qui défilent */
.scene { position: fixed; inset: 0; overflow: clip; touch-action: none; }
.page { position: relative; overflow: hidden; }
.page > * { transform-origin: 0 0; }

/* Focus visible au clavier */
:focus { outline: none; }
:focus-visible { outline: 3px solid #5b5bff; outline-offset: 3px; }
body.clair :focus-visible, [data-clair="1"] :focus-visible { outline-color: #0600ff; }

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

@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes flotte-page { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes flotte-mobile { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes flotte-mobile-page { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }

/* Vidéo en plein écran : le conteneur prend tout l'écran, la vidéo n'est jamais recadrée */
.plein:fullscreen { clip-path: none !important; background: #000 !important; transform: none !important; }
.plein:fullscreen video, .plein:fullscreen img { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; }
.plein:-webkit-full-screen { clip-path: none !important; background: #000 !important; transform: none !important; }
.plein:-webkit-full-screen video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; }
.plein .barre-plein { display: none; }
.plein:fullscreen .barre-plein { display: flex; }
.plein:-webkit-full-screen .barre-plein { display: flex; }

/* Liste des projets : survol et focus */
.ligne > a:hover, .ligne > a:focus-visible { background: rgba(255,255,255,.75); }
.ligne .vignette { transition: transform 240ms cubic-bezier(.2,.8,.2,1), outline-color 140ms ease; outline: 3px solid transparent; outline-offset: 0; }
.ligne > a:hover .vignette, .ligne > a:focus-visible .vignette { outline-color: #0600ff; transform: scale(1.06); }
.ligne .titre { transition: color 140ms ease; }
.ligne > a:hover .titre, .ligne > a:focus-visible .titre { color: #151515 !important; }
.ligne .fleche { display: none; }
.ligne > a:hover .fleche, .ligne > a:focus-visible .fleche { display: block; }

/* Transition d'une page à l'autre : une feuille papier monte du bas */
.feuille-transition { position: fixed; inset: 0; z-index: 1000; background: #f6f6f3; box-shadow: 0 -8px 20px -10px rgba(0,0,0,.6); transform: translateY(100%); transition: transform 450ms cubic-bezier(.65,0,.35,1); pointer-events: none; }
.feuille-transition.monte { transform: translateY(0); }
.feuille-transition.nuit { background: #0e0e0e; }

@media print {
  body { background: #fff !important; }
  .scene { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .fondu, .fondu * { transition-duration: 250ms !important; transition-property: opacity !important; }
}

/* Liste → projet : la vignette s'agrandit, la liste s'efface */
.ligne.ouvre .vignette { transform: scale(1.8) !important; transition: transform 450ms cubic-bezier(.65,0,.35,1) !important; position: relative; z-index: 2; }
.ligne.ouvre .titre { color: #151515 !important; }

/* Impression du CV (bouton « Télécharger en PDF ») */
@media print {
  @page { size: A4; margin: 10mm; }
  .page { height: auto !important; overflow: visible; }
  .page > div { transform: scale(.49) !important; }
  .page header, .page main > a:first-child, .page button { display: none !important; }
}