/* passage d'une page a l'autre : fondu enchaine (Chrome, Edge, Safari 18.2+), le menu reste en place */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.nav { view-transition-name: nav; }
.promo { view-transition-name: promo; }
html { background: #0b0d11; color-scheme: dark; }
/* Tiles vivantes : reflet qui suit la souris, bordure qui s'allume sous le curseur,
   fond qui respire, apparition en cascade. Applique a toutes les tiles du site. */
.fx { position: relative; isolation: isolate; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.fx > .fx-spot, .fx > .fx-rim, .fx::after { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.fx::after { content: ""; z-index: -1; background: radial-gradient(60% 80% at 15% 0%, rgba(240,90,69,.13), transparent 60%), radial-gradient(50% 70% at 100% 100%, rgba(31,59,155,.18), transparent 60%); background-size: 160% 160%; animation: fx-breath 9s ease-in-out infinite alternate; }
.fx > .fx-spot { z-index: -1; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(240,90,69,.16), transparent 45%); }
.fx > .fx-rim { z-index: 2; padding: 1px; opacity: 0; transition: opacity .35s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,140,110,.95), rgba(240,90,69,.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.fx:hover > .fx-spot, .fx:hover > .fx-rim { opacity: 1; }
.fx:hover { transform: translateY(-5px); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 50px rgba(240,90,69,.10); }
.fx-in { opacity: 0; transform: translateY(26px); }
.fx-in.fx-shown { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--fx-d, 0s); }
.fx-in.fx-shown:hover { transform: translateY(-5px); transition-delay: 0s; }
@keyframes fx-breath { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .fx::after { animation: none; } .fx-in { opacity: 1; transform: none; } .fx:hover { transform: none; } }