/* ============================================================
   Slider des plats signature — section 04 / 06
   15/09
   ------------------------------------------------------------
   Chargee en dernier. Elle n'ajoute que l'empilement et les
   commandes : le cadrage, le filtre et le voile de la section
   restent ceux de .home-signature-media, regles le 15/09 dans
   css/sections-parallax.css. Rien n'est redeclare ici.

   Pour tout annuler : retirer le <link> et le <script>
   d'index.html, supprimer ce fichier et js/slider-plats.js, puis
   ne garder qu'une seule <img> dans la figure.
   ============================================================ */

/* --- Les diapositives -------------------------------------------------
   Empilees au meme endroit, en fondu. La regle .home-signature-media img
   leur donne deja object-fit et le filtre : on ne pose ici que la
   superposition et l'opacite. */
#signature .sig-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease-cinema, ease);
}

#signature .sig-slide.is-on{
  opacity: 1;
}

/* --- Les legendes -----------------------------------------------------
   Meme principe, mais en grille superposee plutot qu'en absolu : la
   hauteur du bloc suit ainsi la legende la plus haute et le reste de la
   section ne bouge pas d'une diapositive a l'autre. */
#signature .sig-legendes{
  display: grid;
}

#signature .sig-legende{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0.6rem, 0);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease), visibility 0.65s;
}

/* visibility en plus de l'opacite : sans elle, les quatre legendes
   masquees restent dans l'ordre de tabulation et sont lues par les
   lecteurs d'ecran par-dessus la legende active. */
#signature .sig-legende.is-on{
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* --- Les commandes ---------------------------------------------------- */
#signature .sig-nav{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
}

#signature .sig-fleche{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--bone, #e7e0d4);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.3s var(--ease);
}

#signature .sig-fleche:hover,
#signature .sig-fleche:focus-visible{ opacity: 1; }

#signature .sig-puces{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La puce visible fait 6px, mais la cible cliquable en fait 22 :
   une pastille de 6px est intouchable au doigt. */
#signature .sig-puces button{
  display: block;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

#signature .sig-puces button::before{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--bone, #e7e0d4);
  opacity: 0.32;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

#signature .sig-puces button.is-on::before{
  opacity: 1;
  background: var(--brass, #b08d57);
  transform: scale(1.35);
}

#signature .sig-puces button:hover::before{ opacity: 0.7; }


/* --- Le slider passe en cadre ------------------------------------------
   16/09. Il occupait toute la largeur en fond de section. Mesure dans
   Chrome : les diapositives s'affichaient en 1613x958 alors que les
   fichiers font de 621x665 a 1000x1499, soit un agrandissement de 1.6 a
   2.6 fois. L'assiette devenait une tache coloree.

   Dans un cadre d'environ 500px, les memes fichiers sont REDUITS au lieu
   d'etre etires : ils redeviennent nets sans qu'on touche aux sources.

   Consequence directe : le texte n'est plus pose SUR l'image, il est a
   cote. Le voile et le filtre sombre n'ont donc plus de raison d'etre,
   ils n'existaient que pour rendre le texte lisible par-dessus. On rend
   sa lumiere a la photo. */
/* --- Feuilletage pilote par le scroll ---------------------------------
   16/09. La section se fige et chaque portion de defilement avance d'une
   assiette ; une fois la derniere atteinte, la page repart normalement.

   --sig-course decide de la vitesse : c'est la hauteur donnee a la section
   PAR DIAPOSITIVE. Trop court, on saute deux assiettes d'un cran de
   molette ; trop long, on a l'impression d'etre bloque. 70vh par
   diapositive, soit 350vh pour cinq, plus la hauteur d'un ecran pour que
   la derniere reste visible avant de repartir. */
#signature{
  --sig-course: 70vh;
  --sig-nb: 5;
  min-block-size: 0;
  display: block;
  block-size: calc(var(--sig-nb) * var(--sig-course) + 100svh);
  padding-block: 0;
  overflow: visible;
}

/* --sig-arret : hauteur a laquelle la section se verrouille. A 0, elle se
   collait tout en haut, donc sous la barre de navigation, et l'arrivee
   paraissait brutale. Un cran plus bas, le verrouillage se fait plus tot
   dans le defilement et laisse respirer au-dessus.

   min-block-size retranche le meme decalage : sans cela la piste
   depasserait l'ecran par le bas et le contenu, centre dedans, glisserait
   hors cadre d'autant. */
#signature{
  /* Mesure : le bas de la barre de navigation est a 84px. En dessous,
     la premiere diapositive passait dessous en arrivant. */
  --sig-arret: clamp(5.75rem, 12vh, 8.5rem);
}

#signature .sig-piste{
  position: sticky;
  top: var(--sig-arret);
  display: flex;
  align-items: center;
  min-block-size: calc(100svh - var(--sig-arret));
  /* Aucun rembourrage en bas : c'est ce qui laisse l'image filer jusqu'au
     bord. En haut, l'ecart vient de la marge du cadre, pas d'ici. */
  padding-block: 0;
  align-items: stretch;
}

/* Sous 821px et en mouvement reduit, pas de figement : la section reprend
   une hauteur normale et les commandes manuelles suffisent. Immobiliser
   une page sur telephone pour imposer cinq crans est penible. */
@media (max-width: 820px), (prefers-reduced-motion: reduce){
  #signature{ block-size: auto; padding-block: clamp(4rem, 8vw, 9rem); }
  #signature .sig-piste{ position: static; min-block-size: 0; padding-block: 0; }
}

#signature .sig-grille{
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  /* stretch et non center : le cadre doit pouvoir s'etirer jusqu'en bas.
     Le texte, lui, reste centre, il n'a aucune raison de s'etirer. */
  align-items: stretch;
}

#signature .home-signature-content{
  align-self: center;
}

@media (min-width: 821px){
  #signature .sig-grille{
    /* Texte d'abord dans le DOM pour les lecteurs d'ecran, image a droite
       a l'oeil : l'ordre visuel est inverse par les colonnes. */
    grid-template-columns: 1fr minmax(18rem, 0.82fr);
  }
  #signature .home-signature-content{ grid-column: 1; grid-row: 1; }
  #signature .home-signature-media{ grid-column: 2; grid-row: 1; }
}

/* --- Le cadre en arche -------------------------------------------------
   16/09. Forme voulue : arrondie en haut, ouverte en bas, l'image filant
   jusqu'au bord de la piste.

   Plus de aspect-ratio ni de plafond de hauteur : le cadre s'etire du
   retrait haut jusqu'au bas de la piste, c'est lui qui prend la hauteur
   disponible au lieu de l'imposer. La piste etant figee a --sig-arret et
   haute de 100svh moins ce meme decalage, son bas coincide avec le bas de
   l'ecran.

   Rayon : une vraie arche vaudrait la moitie de la largeur, environ 277px.
   On reste tres en dessous, l'idee est d'evoquer l'arche, pas de la
   dessiner. Zero en bas, sinon la coupure se verrait. */
#signature .home-signature-media{
  position: relative;
  inset: auto;
  inline-size: 100%;
  align-self: stretch;
  margin: clamp(2rem, 7vh, 5rem) 0 0;
  overflow: hidden;
  border-radius: clamp(2.5rem, 6vw, 7rem) clamp(2.5rem, 6vw, 7rem) 0 0;
}

/* Le voile disparait : plus aucun texte ne passe par-dessus. */
#signature .home-signature-media::after{ content: none; }

#signature .home-signature-media img{
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Filtre neutralise, la photo reprend sa lumiere. scale a 1 aussi :
     la marge de 12% servait a la parallaxe, qui n'a plus lieu d'etre sur
     une image cadree et centree. */
  filter: none;
  scale: 1;
}


/* --- Taille des legendes ----------------------------------------------
   16/09. Mesure a 1440 : la legende etait en 104px, les titres de section
   en 82px et les titres de carte en 48px. Une legende de diapositive
   passait donc devant les titres de la page entiere.

   Ce corps venait de luxury.css, clamp(3rem, 2rem + 5vw, 7rem), et se
   justifiait quand la legende etait un nom de plat servant d'accroche a
   la section. Depuis le passage aux reperes, ce sont des phrases plus
   longues : le corps doit redescendre SOUS le titre de section.

   11ch de large etait aussi trop etroit pour « Sept annees au restaurant
   Laurent », qui partait sur quatre lignes. */
#signature .sig-legende h2{
  /* Titres rallonges le 16/09 : ce sont desormais des phrases, plus des
     libelles de deux mots. 18ch les cassait mot a mot. */
  max-inline-size: 22ch;
  font-size: clamp(1.5rem, 0.95rem + 2.3vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

#signature .sig-legende p{
  max-inline-size: 38ch;
  margin-block-start: clamp(0.8rem, 1.5vw, 1.2rem);
}

/* --- Mouvement reduit --------------------------------------------------
   Le JS ne lance pas le defilement dans ce mode, mais les commandes
   restent utilisables : on supprime les fondus, pas la navigation. */
@media (prefers-reduced-motion: reduce){
  #signature .sig-slide,
  #signature .sig-legende{
    transition: none;
    transform: none;
  }
}