/* Ajouts communs au site MLA : transitions entre pages, apparition douce, survols.
   Les styles de chaque page restent dans la page. Tout est désactivé si l'on préfère moins d'animations. */

/* Changement de page : la page sortante s'efface en glissant, la nouvelle monte en fondu.
   Navigateurs récents (Chrome, Edge, Safari) : transition native, la photo du projet glisse de l'accueil vers sa fiche.
   Autres navigateurs : même effet joué par site.js. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mla-out .35s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: mla-in .6s cubic-bezier(.2,.7,.2,1) .1s both; }
::view-transition-group(*) { animation-duration: .65s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
@keyframes mla-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes mla-in { from { opacity: 0; transform: translateY(22px); } }
.js.no-vt body { animation: mla-in .6s cubic-bezier(.2,.7,.2,1) both; }
.js.no-vt.is-leaving body { animation: mla-out .3s cubic-bezier(.4,0,.2,1) both; }

/* Fond d'attente des photos (pas le logo), puis fondu à l'arrivée */
.pics img[src$=".webp"], .info img[src$=".webp"] { background: #efeeea; }
img { height: auto; }
.js img.fade { opacity: 0; transition: opacity .7s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js img.fade.is-loaded { opacity: 1; }

/* Vignettes de l'accueil : léger zoom contenu dans le cadre, nom souligné au survol */
.tile-media { display: block; overflow: hidden; background: #efeeea; }
.tile-media img, .js .tile-media img.fade { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .7s ease; transform-origin: 50% 60%; will-change: transform; }
.grid a:hover .tile-media img, .grid a:focus-visible .tile-media img { transform: scale(1.035); }
.grid a .nm { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s cubic-bezier(.2,.7,.2,1); padding-bottom: 2px; }
.grid a:hover .nm, .grid a:focus-visible .nm { background-size: 100% 1px; }

/* Liens du menu : soulignement qui se dessine */
header nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s ease, color .2s ease; }
header nav a:hover { background-size: 100% 1px; }

/* Apparition au défilement (uniquement si le script tourne) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

a:focus-visible, button:focus-visible { outline: 2px solid #111; outline-offset: 4px; }

/* Grille de l'accueil : pas de case vide quand une vignette double ne tient pas sur la ligne */
.grid { grid-auto-flow: dense; }

/* Menu mobile : logo à gauche, bouton Menu à droite, panneau plein écran */
.menu-btn, .back-link { display: none; }
@media (max-width: 900px) {
  .js .top { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 !important; padding: 20px 0 28px !important; }
  .js .top > a { order: 0; }
  .js .top > a img { height: 52px !important; }
  .js .top nav { display: none !important; }
  .menu-btn { display: inline-flex; order: 1; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 0; font: inherit; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #111; cursor: pointer; }
  .menu-btn i { position: relative; width: 22px; height: 10px; display: inline-block; }
  .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s cubic-bezier(.2,.7,.2,1), top .35s; }
  .menu-btn i::before { top: 0; } .menu-btn i::after { top: 8px; }
  .menu-open .menu-btn i::before { top: 4px; transform: rotate(45deg); }
  .menu-open .menu-btn i::after { top: 4px; transform: rotate(-45deg); }
  .menu-open .top { position: fixed; inset: 0; z-index: 50; background: #fff; align-content: flex-start; padding: 20px 20px 40px !important; overflow-y: auto; }
  .menu-open .top nav { display: flex !important; order: 2; width: 100%; flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important; gap: 18px !important; font-size: 28px !important; margin-top: 40px; animation: mla-in .5s cubic-bezier(.2,.7,.2,1) both; }
  .menu-open .top nav + a + nav, .menu-open .top nav:last-of-type { order: 3; margin-top: 28px; padding-top: 28px; border-top: 1px solid #e2e2e2; animation-delay: .06s; }
  .menu-open .top nav a { background: none !important; }
  .menu-open body { overflow: hidden; }
  .back-link { display: inline-flex; align-items: center; gap: 6px; margin: -8px 0 24px; font-size: 15px; color: #5f5f5f; }
  .back-link:hover { color: #111; }
}

/* Téléphone : marges verticales réduites */
@media (max-width: 640px) {
  h1[style*="margin: 96px auto 176px"] { margin: 40px auto 72px !important; font-size: 18px !important; }
  .grid { row-gap: 64px !important; }
  section.info { margin: 40px 0 56px !important; }
  .pics { gap: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js .reveal, .js img.fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tile-media img, .grid a .nm, header nav a { transition: none !important; }
}