/* ═══════════════════════════════════════════════════════════
   LA CANTINE DU STUDIO — feuille de style
   ═══════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────
   1. JETONS — couleurs, typo, rythme
   Tout part d'ici : changer une variable
   change le site entier.
   ─────────────────────────────────────────── */
:root{
  /* Couleurs relevées sur le logo */
  --noir:#000000;            /* fond principal */
  --nuit:#182832;            /* fond des sections alternées */

  --blanc:#FFFFFF;           /* titres */
  --lin:#EDEAE4;             /* texte courant — blanc cassé, remonté pour le contraste */
  --gris:#98A6AE;            /* libellés, légendes ; dérivé du bleu nuit, éclairci */
  --hairline:rgba(237,234,228,.30);  /* filets, séparateurs */

  /* Typographies */
  --display:"Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;  /* titrage */
  --texte:"Jost", "Futura", "Avenir Next", system-ui, sans-serif; /* courant + libellés */

  /* Graisses. Remontées d'un cran par rapport à la première version :
     le Jost en 300 tenait mal sur fond noir. */
  --graisse-texte:400;
  --graisse-libelle:500;

  /* Rythme vertical et marges latérales, fluides du mobile au grand écran */
  --marge:clamp(1.5rem, 6vw, 6rem);
  --souffle:clamp(6rem, 16vh, 12rem);

  /* Courbe d'accélération unique pour tout le site : départ franc,
     arrivée très amortie. C'est elle qui donne le « ease in / ease out » long
     sur les images du bandeau. */
  --amorti:cubic-bezier(.33, 0, .12, 1);
}


/* ───────────────────────────────────────────
   2. BASE
   ─────────────────────────────────────────── */
*{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--noir);
  color:var(--lin);
  font-family:var(--texte);
  font-weight:var(--graisse-texte);
  font-size:clamp(1.05rem, .6vw + .92rem, 1.22rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grain imprimé : un bruit SVG en surimpression très faible.
   Casse le noir numérique parfait, donne une matière de tirage.
   Régler l'intensité avec `opacity` (0.02 à 0.05 max). */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;          /* n'intercepte aucun clic */
  z-index:60;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; }
::selection{ background:var(--lin); color:var(--noir); }

/* Accessibilité : le focus clavier doit rester visible */
:focus-visible{ outline:1px solid var(--lin); outline-offset:6px; }


/* ───────────────────────────────────────────
   3. BARRE HAUTE
   Le nom à gauche, la bascule de langue à droite.
   Rien d'autre — la Cantine ne dépend d'aucune
   autre enseigne.
   ─────────────────────────────────────────── */
.barre{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  padding:1.4rem var(--marge);
  font-size:.76rem;
  font-weight:var(--graisse-libelle);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--lin);
}

/* Voile sombre derrière la barre : garde le texte lisible quand une
   photo claire passe dessous au défilement. */
.barre::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:150px;                        /* déborde sous la barre : le dégradé a le temps
                                          de s'éteindre sans marquer de limite nette */
  z-index:-1;
  background:linear-gradient(to bottom,
             rgba(0,0,0,.85), rgba(0,0,0,.4) 45%, transparent);
  pointer-events:none;
}

.barre a{ text-decoration:none; opacity:.85; transition:opacity .5s ease; }
.barre a:hover{ opacity:1; }

/* Bascule de langue. La langue affichée est celle vers laquelle
   on va, pas celle où l'on est — c'est la convention la plus lisible. */
.barre .langue{ opacity:.6; }
.barre .langue:hover{ opacity:1; }


/* ───────────────────────────────────────────
   4. SECTIONS ET COLONNE VERTÉBRALE
   Le filet vertical du logo court sur toute la
   page ; les blocs de texte le masquent, il ne
   réapparaît que dans les respirations.
   ─────────────────────────────────────────── */
section{
  position:relative;
  background:var(--bg, var(--noir));   /* --bg est redéfini par .nuit */
  padding:var(--souffle) var(--marge);
}

section.nuit{ --bg:var(--nuit); }

/* Le filet : 1px centré, du haut au bas de chaque section.
   Comme chaque section porte le sien, il reste continu
   même quand le fond change. */
section::before{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  width:1px;
  background:var(--hairline);
  transform:translateX(-.5px);         /* recentrage au demi-pixel */
}

section.sans-filet::before{ display:none; }   /* bandeau photo : pas de filet */
section.pleine-largeur{ padding:0; }          /* bandeau photo : bord à bord */

/* Bloc de texte centré. Son fond opaque est ce qui « coupe » le filet. */
.colonne{
  position:relative;
  z-index:2;
  max-width:46rem;
  margin:0 auto;
  padding:2.4rem 0;
  text-align:center;
  background:var(--bg, var(--noir));
}


/* ───────────────────────────────────────────
   5. TYPOGRAPHIE DE CONTENU
   ─────────────────────────────────────────── */

/* Libellé de section (LA TABLE, L'HABITUDE…) */
.etiquette{
  display:inline-block;
  margin:0 0 3.2rem;
  padding:.6rem 1.6rem;
  background:var(--bg, var(--noir));
  font-size:.76rem;
  font-weight:var(--graisse-libelle);
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--gris);
}

h2{
  margin:0 0 2rem;
  font-family:var(--display);
  font-weight:500;                     /* Bodoni en 500 : plus proche des pleins du logo */
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  line-height:1.12;
  letter-spacing:.005em;
  color:var(--blanc);
}

p{ margin:0 0 1.5rem; }
p:last-child{ margin-bottom:0; }

/* Mesure resserrée : ~60 signes par ligne, confortable en centré */
.large{ max-width:36rem; margin-left:auto; margin-right:auto; }

em{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:1.1em;
  color:var(--blanc);
}


/* ───────────────────────────────────────────
   6. OUVERTURE (hero)
   ─────────────────────────────────────────── */
.ouverture{
  min-height:100svh;                   /* svh : tient compte des barres mobiles */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8rem var(--marge) 4rem;
}

/* Ici le filet ne part pas du haut : il descend sous la mention du lieu
   jusqu'au bas de l'écran, comme sur le logo. */
.ouverture::before{
  top:auto; bottom:0;
  height:17%;
  transform-origin:bottom;
  animation:trait 1.6s var(--amorti) .8s backwards;
}

.marque{
  margin:0;
  text-align:center;                   /* indispensable : sans quoi la 2e ligne
                                          s'aligne à gauche dans le bloc */
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.4rem, 8.8vw, 7.2rem);
  line-height:.94;
  letter-spacing:.012em;
  text-transform:uppercase;
  color:var(--blanc);
  transform:scaleX(.95);               /* condensation légère, au plus près du logo */
}
.marque span{ display:block; }

/* Le canvas de la pincée. Dimensions pilotées ici, jamais dans le JS. */
.pincee{
  display:block;
  width:min(100%, 34rem);
  height:clamp(170px, 30vh, 340px);
  margin:.4rem auto 0;
  opacity:0;
  animation:apparition 2.4s ease 1.1s forwards;
}

.sous-marque{
  margin-top:1.4rem;
  font-size:.8rem;
  font-weight:var(--graisse-libelle);
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--gris);
}


/* ───────────────────────────────────────────
   7. BANDEAU PHOTO
   Triptyque bord à bord. Au repos, les images
   sont masquées : on ne voit que trois cadres
   noirs et leurs légendes. Au survol, l'image
   monte en fondu long, avec un léger
   dézoom — départ franc, arrivée amortie.
   ─────────────────────────────────────────── */
.planche{
  display:grid;
  grid-template-columns:1fr;           /* mobile : une image par ligne */
  gap:1px;
  background:var(--hairline);          /* visible dans les gouttières */
}
@media (min-width:760px){
  .planche{ grid-template-columns:1fr 1fr 1fr; }
}

.vue{
  position:relative;
  width:100%;
  align-self:start;                    /* sans quoi le ratio écrase la largeur */
  margin:0;
  aspect-ratio:760/1200;               /* format exact des fichiers fournis */
  overflow:hidden;
  background:var(--noir);              /* le cadre au repos */
  cursor:pointer;
}

.vue img{
  width:100%; height:100%;
  object-fit:cover;                    /* recadre sans déformer */
  display:block;
  opacity:0;                           /* masquée au repos */
  transform:scale(1.06);
  transition:opacity 1.1s var(--amorti),
             transform 1.8s var(--amorti);
}

/* Révélation. :focus-within couvre la navigation au clavier. */
.vue:hover img,
.vue:focus-within img{
  opacity:1;
  transform:scale(1);
}

/* Voile sombre en bas de l'image : garantit la lisibilité de la légende
   même sur une photo très claire. Il n'apparaît qu'avec l'image. */
.vue::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:45%;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  opacity:0;
  transition:opacity 1.1s var(--amorti);
  pointer-events:none;
}
.vue:hover::after,
.vue:focus-within::after{ opacity:1; }

.vue figcaption{
  position:absolute; left:1.4rem; bottom:1.3rem;
  z-index:2;
  font-size:.72rem;
  font-weight:var(--graisse-libelle);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gris);
  transition:color 1.1s var(--amorti);
}
.vue:hover figcaption,
.vue:focus-within figcaption{ color:var(--lin); }

/* Écrans tactiles : il n'y a pas de survol. Les images restent visibles,
   sinon le bandeau serait définitivement noir sur téléphone. */
@media (hover:none){
  .vue img{ opacity:1; transform:none; }
  .vue::after{ opacity:1; }
  .vue figcaption{ color:var(--lin); }
}


/* ───────────────────────────────────────────
   8. CITATIONS
   ─────────────────────────────────────────── */
.citation{
  max-width:38rem;
  margin:0 auto;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.6rem, 3.8vw, 2.7rem);
  line-height:1.3;
  color:var(--blanc);
}

.signature{
  margin-top:2.6rem;
  font-size:.76rem;
  font-weight:var(--graisse-libelle);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gris);
}


/* ───────────────────────────────────────────
   8 bis. FICHE PRATIQUE
   Une liste de définitions présentée comme la
   fiche d'un établissement. Le rendu doit rester
   strictement administratif : filets, capitales,
   aucun effet. C'est la neutralité de la mise en
   forme qui fait fonctionner le texte.
   ─────────────────────────────────────────── */
.fiche{
  margin:0;
  text-align:left;
  max-width:32rem;
  margin-inline:auto;
}

.fiche > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  padding:1.3rem 0;
  border-top:1px solid var(--hairline);
}
.fiche > div:last-child{ border-bottom:1px solid var(--hairline); }

.fiche dt{
  font-size:.74rem;
  font-weight:var(--graisse-libelle);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gris);
  white-space:nowrap;
}

.fiche dd{
  margin:0;
  text-align:right;
  color:var(--lin);
}

/* Sous 480px, la ligne est trop étroite pour tenir en vis-à-vis :
   le libellé passe au-dessus. */
@media (max-width:480px){
  .fiche > div{ flex-direction:column; gap:.5rem; }
  .fiche dd{ text-align:left; }
}


/* ───────────────────────────────────────────
   9. PIED DE PAGE
   ─────────────────────────────────────────── */
footer{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:3.4rem var(--marge);
  background:var(--noir);
  text-align:center;
  font-size:.72rem;
  font-weight:var(--graisse-libelle);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gris);
}
footer a{ text-decoration:none; opacity:.85; transition:color .5s ease; }
footer a:hover{ opacity:1; color:var(--lin); }

@media (min-width:760px){
  footer{ flex-direction:row; justify-content:space-between; text-align:left; }
}


/* ───────────────────────────────────────────
   10. APPARITIONS
   .apparait est posé dans le HTML ; script.js
   ajoute .vu quand le bloc entre à l'écran.
   ─────────────────────────────────────────── */
.apparait{
  opacity:0;
  transform:translateY(1.4rem);
}
.vu{
  opacity:1;
  transform:none;
  transition:opacity 1.4s ease,
             transform 1.4s var(--amorti);
}

/* Séquence d'ouverture au chargement */
.marque,
.sous-marque{
  opacity:0;
  animation:leve 1.8s var(--amorti) forwards;
}
.sous-marque{ animation-delay:.5s; }

@keyframes leve{
  /* scaleX(.95) est conservé pour ne pas annuler la condensation du titre */
  from{ opacity:0; transform:translateY(1.2rem) scaleX(.95); }
  to  { opacity:1; transform:translateY(0)      scaleX(.95); }
}
@keyframes apparition{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes trait{
  from{ transform:translateX(-.5px) scaleY(0); }
  to  { transform:translateX(-.5px) scaleY(1); }
}


/* ───────────────────────────────────────────
   11. MOUVEMENT RÉDUIT
   Respecte le réglage système. La composition
   reste identique : seul le mouvement s'arrête.
   (script.js dessine alors une pincée fixe.)
   ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .apparait{ opacity:1; transform:none; }
  .marque, .sous-marque, .pincee{ opacity:1; }
  html{ scroll-behavior:auto; }
  /* Le survol reste instantané plutôt qu'animé : les images
     apparaissent toujours, sans fondu. */
}


/* ───────────────────────────────────────────
   NOTE — hébergement autonome des polices
   Pour ne plus dépendre de Google Fonts :
   télécharger Bodoni Moda et Jost (SIL Open Font
   License), les placer dans /fonts/, supprimer les
   <link> du HTML et déclarer ici :

   @font-face{
     font-family:"Bodoni Moda";
     src:url("fonts/BodoniModa.woff2") format("woff2");
     font-weight:400 600; font-display:swap;
   }
   ─────────────────────────────────────────── */