/* ============================================================
   Galerie d'assiettes — section 02 / 06 « Écriture »
   15/09
   ------------------------------------------------------------
   Une grille 3x3 stricte, qui reste 3x3 à toutes les largeurs :
   c'est la forme demandée, la casser en mobile la ferait
   disparaître. À 380px de large, chaque case fait encore ~110px,
   ce qui suffit à lire une assiette.

   Les images sont carrées par aspect-ratio et recadrées en
   object-fit. Aucune des neuf photos n'est verticale, le recadrage
   se fait donc sur les côtés, jamais sur le dressage.

   Chargée en dernier. Pour tout annuler : retirer le <link> dans
   index.html, supprimer ce fichier et le bloc .home-plats-wrap.
   ============================================================ */

/* --- Largeur commune de la section ------------------------------------
   Plafond demandé : 90% de l'écran. Il doit s'appliquer à l'en-tête ET à
   la galerie, sinon leurs bords gauches se séparent.

   Pourquoi : .container vaut max-width 1440px avec margin-inline auto.
   Plafonner la seule en-tête à 90vw la recentrerait dans un cadre plus
   étroit, et sous 1440px son bord gauche s'écarterait de celui de la
   galerie, mesuré à 64px à 1280px de large. Même plafond des deux côtés,
   le centrage reste identique, l'alignement tient à toutes les largeurs.

   min() avec --maxw : au-delà de 1600px, 90vw dépasserait la largeur
   maximale du site et le plafond ne voudrait plus rien dire. */
#ecriture .home-writing-head,
#ecriture .home-plats-wrap{
  max-width: min(90vw, var(--maxw));
}

/* --- En-tête en colonne classique -------------------------------------
   Origine, luxury.css : une grille de trois colonnes qui posait l'index,
   le titre et le chapô côte à côte, chapô poussé à droite par
   justify-self: end. On repasse à un empilement simple, aligné à gauche. */
#ecriture .home-writing-head{
  display: block;
  text-align: left;
}

#ecriture .home-writing-head .section-index{
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
}

#ecriture .home-writing-head .home-section-title{
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.8rem);
}

/* Le justify-self: end de luxury.css doit être annulé explicitement.
   Mesuré : sans cette ligne le chapô se colle à droite, à 587px au lieu
   de 125px sur un écran de 1280. Passer l'en-tête en display: block ne
   suffit pas, la mise en page reste résolue comme une grille.
   margin-inline-end: auto fait le même travail si jamais la grille
   disparaît vraiment un jour : les deux sont inoffensives en bloc. */
#ecriture .home-writing-head .home-section-copy{
  justify-self: start;
  margin: 0 auto 0 0;
  max-inline-size: 62ch;
}

#ecriture .home-plats-wrap{
  margin-top: clamp(3rem, 6vw, 6rem);
}

#ecriture .home-plats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Gouttière serrée : les neuf assiettes doivent se lire comme une
     planche, pas comme neuf vignettes indépendantes. */
  gap: clamp(0.35rem, 0.9vw, 0.85rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

#ecriture .home-plats li{
  margin: 0;
  overflow: hidden;
  background: rgba(240, 234, 223, 0.04);
}

#ecriture .home-plats img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
}

/* --- Le lien, juste sous la dernière rangée ---------------------------
   Il vivait dans le bloc .home-tableau, supprimé le 15/09. Il ne reçoit
   donc plus la mise en grille de luxury.css et retombe sur le style de
   base de .home-text-link : il ne reste qu'à lui donner son retrait. */
#ecriture .home-plats-lien{
  display: inline-flex;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Le survol isole une assiette sans agiter la planche entière :
   seule la case visée bouge, le débordement est coupé par le li. */
@media (hover: hover){
  #ecriture .home-plats li:hover img{
    transform: scale(1.06);
    filter: saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce){
  #ecriture .home-plats img{ transition: none; }
  #ecriture .home-plats li:hover img{ transform: none; }
}