/* =========================================================
   Le Bistrot des Halles — animations, discrètes
   Seulement transform et opacity (fluide, même sur un vieux téléphone).
   Pour revenir au site sans animations : retirer ce fichier, js/animations.js et js/debut.js de index.html.
   Rien ne bouge si le visiteur a demandé « réduire les animations ».
   Sans JavaScript, la classe .js n'existe pas : tout est visible tout de suite.
   ========================================================= */
:root{--douce:cubic-bezier(.22,.7,.2,1);--lente:cubic-bezier(.16,.84,.24,1)}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Arrivée : la photo de l'étage s'ouvre (rideau, css/effets.css), puis le nom monte ligne par ligne ---------- */
  .js .accueil-photo > img{animation:eclaircit 2.4s var(--lente) both}
  @keyframes eclaircit{from{opacity:0;scale:1.08}to{opacity:1;scale:1}}
  .js .accueil-texte > :not(h1),.js .legende{opacity:0;animation:monte 1.1s var(--douce) forwards}
  .js .accueil-texte > .sur-titre{animation-delay:.35s}
  .js .accueil h1 .ligne > span{transform:translateY(110%);animation:leve 1.2s var(--lente) forwards}
  .js .accueil h1 .ligne:nth-child(1) > span{animation-delay:.5s}
  .js .accueil h1 .ligne:nth-child(2) > span{animation-delay:.64s}
  .js .accueil-texte > .accroche{animation-delay:.95s}
  .js .accueil-texte > .boutons{animation-delay:1.1s}
  .js .accueil-texte > .accueil-semaine{animation-delay:1.25s}
  .js .legende{animation-delay:1.4s}
  @keyframes monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes leve{from{transform:translateY(110%)}to{transform:none}}

  /* Repère « défiler » : un trait qui descend lentement, en boucle */
  .js .defiler{opacity:0;animation:monte 1s var(--douce) 1.8s forwards}
  .defiler i{animation:coule 2.6s var(--douce) infinite}
  @keyframes coule{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* ---------- Au défilement : les blocs montent doucement ---------- */
  .js .apparait{opacity:0;transform:translateY(32px);transition:opacity 1.1s var(--douce),transform 1.2s var(--douce)}
  .js .apparait.visible{opacity:1;transform:none}

  /* Les titres sortent de leur cache, juste après leur bloc */
  .js .apparait h2 .texte{transform:translateY(105%);transition:transform 1.2s var(--lente) .12s}
  .js .apparait.visible h2 .texte{transform:none}

  /* Le trait de la présentation se dessine de haut en bas */
  .js .intro-in::before{transform:scaleY(0);transition:transform 1.2s var(--lente) .2s}
  .js .intro-in.visible::before{transform:none}

  /* Les photos se posent : elles arrivent un peu grandes, puis reprennent leur taille */
  .js .piece .cadre > img,.js .mosaique .cadre > img{scale:1.1;transition:scale 1.8s var(--lente)}
  .js .piece.visible .cadre > img,.js .mosaique.visible .cadre > img{scale:1}

  /* Dans une pièce, la petite photo arrive juste après la grande */
  .js .piece .petite{opacity:0;transform:translateY(36px);transition:opacity 1s var(--douce) .35s,transform 1.2s var(--douce) .35s}
  .js .piece.visible .petite{opacity:1;transform:none}
  .js .piece-texte > *{opacity:0;transform:translateY(14px);transition:opacity .9s var(--douce),transform .9s var(--douce)}
  .js .piece.visible .piece-texte > *{opacity:1;transform:none}
  .js .piece.visible .piece-texte > :nth-child(2){transition-delay:.12s}
  .js .piece.visible .piece-texte > :nth-child(3){transition-delay:.24s}

  /* La mosaïque : une photo après l'autre */
  .js .mosaique .cadre{opacity:0;transition:opacity 1s var(--douce)}
  .js .mosaique.visible .cadre{opacity:1}
  .js .mosaique .m2,.js .mosaique .m2 > img{transition-delay:.12s}
  .js .mosaique .m3,.js .mosaique .m3 > img{transition-delay:.24s}
  .js .mosaique .m4,.js .mosaique .m4 > img{transition-delay:.36s}
  .js .mosaique .m5,.js .mosaique .m5 > img{transition-delay:.48s}

  /* Les classiques de la maison, ligne après ligne */
  .js .classiques li{opacity:0;transform:translateX(-10px);transition:opacity .8s var(--douce),transform .8s var(--douce)}
  .js .cuisine-cote.visible .classiques li{opacity:1;transform:none}
  .js .cuisine-cote.visible .classiques li:nth-child(2){transition-delay:.08s}
  .js .cuisine-cote.visible .classiques li:nth-child(3){transition-delay:.16s}
  .js .cuisine-cote.visible .classiques li:nth-child(4){transition-delay:.24s}
  .js .cuisine-cote.visible .classiques li:nth-child(5){transition-delay:.32s}
  .js .cuisine-cote.visible .classiques li:nth-child(6){transition-delay:.4s}

  /* Infos pratiques : le filet de laiton se trace */
  .js .contact-bloc::before{transform:scaleX(0);transition:transform 1.2s var(--lente) .25s}
  .js .contact-bloc.visible::before{transform:none}
  .js .contact-bloc:nth-child(2){transition-delay:.1s}
  .js .contact-bloc:nth-child(3){transition-delay:.2s}

  /* La carte : le trait glisse d'un onglet à l'autre, la page choisie se pose */
  .onglets-curseur{transition:transform .5s var(--douce)}
  .page:not([hidden]){animation:feuille .6s var(--douce)}
  @keyframes feuille{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* Menu du téléphone : les liens arrivent l'un après l'autre */
  @media (max-width:1020px){
    .nav a{opacity:0;transform:translateY(14px);transition:opacity .45s var(--douce),transform .55s var(--douce)}
    .nav.ouvert a{opacity:1;transform:none}
    .nav.ouvert a:nth-child(2){transition-delay:.05s}
    .nav.ouvert a:nth-child(3){transition-delay:.1s}
    .nav.ouvert a:nth-child(4){transition-delay:.15s}
    .nav.ouvert a:nth-child(5){transition-delay:.2s}
    .nav.ouvert a:nth-child(6){transition-delay:.25s}
  }

  /* Cuisine et assiettes : le cadre se dévoile de bas en haut, la photo se pose, puis la légende */
  .js .devoile{transform:translateY(20px)}
  .js .devoile .cadre{clip-path:inset(14% 0 0 0);transition:clip-path 1.5s var(--lente)}
  .js .devoile .cadre > img{scale:1.06;transition:scale 2s var(--lente)}
  .js .devoile.visible .cadre{clip-path:inset(0)}
  .js .devoile.visible .cadre > img{scale:1}
  .js .devoile .legende-photo{opacity:0;transition:opacity 1s var(--douce) .5s}
  .js .devoile.visible .legende-photo{opacity:1}
  .js .gestes .geste:nth-child(2){transition-delay:.1s}
  .js .gestes .geste:nth-child(3){transition-delay:.2s}
  .js .gestes .geste:nth-child(4){transition-delay:.3s}

  /* Le Cossolo : le filet se trace depuis le centre, puis les trois ingrédients arrivent l'un après l'autre */
  .js .cossolo .cossolo-phrase::after{transform:scaleX(0);transition:transform 1.3s var(--lente) .5s}
  .js .cossolo.visible .cossolo-phrase::after{transform:none}
  .js .cossolo-trio li{opacity:0;transform:translateY(12px);transition:opacity 1s var(--douce),transform 1s var(--douce)}
  .js .cossolo.visible .cossolo-trio li{opacity:1;transform:none}
  .js .cossolo.visible .cossolo-trio li:nth-child(1){transition-delay:.9s}
  .js .cossolo.visible .cossolo-trio li:nth-child(2){transition-delay:1.05s}
  .js .cossolo.visible .cossolo-trio li:nth-child(3){transition-delay:1.2s}

  /* Nos producteurs : un village après l'autre */
  .js .producteurs-liste li{opacity:0;transform:translateY(14px);transition:opacity .9s var(--douce),transform .9s var(--douce)}
  .js .producteurs.visible .producteurs-liste li{opacity:1;transform:none}
  .js .producteurs.visible .producteurs-liste li:nth-child(2){transition-delay:.1s}
  .js .producteurs.visible .producteurs-liste li:nth-child(3){transition-delay:.2s}
  .js .producteurs.visible .producteurs-liste li:nth-child(4){transition-delay:.3s}
  .js .producteurs.visible .producteurs-liste li:nth-child(5){transition-delay:.4s}

  /* Fin de page : comme à l'ouverture, la lumière revient dans la salle quand on arrive en bas */
  @supports selector(:has(a)){
    .js .final-photo > img{filter:brightness(.62) saturate(.8);transition:filter 2.6s cubic-bezier(.5,0,.2,1) .2s}
    .js .final:has(.final-texte.visible) .final-photo > img{filter:none}
  }

  /* Les grandes photos glissent un peu plus lentement que la page (js/animations.js) */
  [data-parallaxe],[data-parallaxe-doux]{will-change:translate}
}