/* La Mie Dorée — boulangerie artisanale, Levallois-Perret.

   Direction « LA FOURNÉE » : la page suit le rythme d'une journée, de 4 h du matin
   à la fermeture. Chaque section porte son heure.

   Charte extraite du terrain : farine, mie, croûte, braise.
   Inversion typographique volontaire — display SANS, texte SERIF — pour ne rien
   partager avec les autres vitrines du portfolio. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

:root {
  --farine: #F8F4EC;
  --mie: #EDE3D1;
  --croute: #3B2113;      /* croûte très cuite — sert d'encre */
  --croute-2: #6A4527;
  --braise: #C9531D;      /* le seul accent */
  --cendre: #8B8074;

  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --texte: "Newsreader", Georgia, serif;

  --t-enorme: clamp(3rem, 11vw, 12rem);
  --t-grand: clamp(2.2rem, 6vw, 5.6rem);
  --t-moyen: clamp(1.7rem, 3.4vw, 3rem);
  --t-chapo: clamp(1.3rem, 1.9vw, 1.9rem);
  --t-corps: 1.25rem;
  --t-heure: .8rem;

  --e1: 8px; --e2: 16px; --e3: 28px; --e4: 48px;
  --e5: 80px; --e6: 128px; --e7: 190px;

  --marge: clamp(20px, 5vw, 76px);
  --courbe: cubic-bezier(.22, .78, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--farine); color: var(--croute);
  font-family: var(--texte); font-size: var(--t-corps); line-height: 1.62;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--braise); color: var(--farine); }
:focus-visible { outline: 2px solid var(--braise); outline-offset: 4px; }

/* ══ En-tête ═══════════════════════════════════════════════════════ */
.entete {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--marge);
  background: var(--farine);
  border-bottom: 1px solid var(--mie);
}
.enseigne {
  font-family: var(--display); font-weight: 800; font-size: 1.4rem;
  letter-spacing: -.02em;
}
.menu { display: flex; gap: var(--e3); }
.menu a {
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  color: var(--croute-2); transition: color 200ms var(--courbe);
}
.menu a:hover { color: var(--braise); }
.menu a[aria-current="page"] { color: var(--braise); }

/* ══ LA VITRINE QUI SE VIDE — le dispositif signature ══════════════
   Douze pains en bas d'écran. Ils partent un à un pendant la lecture.
   Arrivé en bas, la vitrine est vide : « Épuisé — à demain, 7 h ». */
.vitrine {
  position: fixed; right: var(--marge); bottom: var(--e4); z-index: 45;
  pointer-events: none; text-align: right;
}
.vitrine-etal {
  display: flex; gap: 7px; justify-content: flex-end; align-items: flex-end;
  margin-bottom: 10px;
}
.vitrine-etal svg { display: block; width: 22px; height: 15px; overflow: visible; }
.vitrine-etal svg ellipse { fill: var(--croute); }
.vitrine-etal svg path { stroke: var(--farine); stroke-width: 1.4; fill: none; }
.vitrine-pain {
  transition: opacity 420ms var(--courbe), transform 420ms var(--courbe);
  transform-origin: bottom center;
}
.vitrine-pain.parti { opacity: 0; transform: translateY(-9px) scale(.72); }

.vitrine-mot {
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; color: var(--croute-2);
}
.vitrine.epuisee .vitrine-mot { color: var(--braise); }

/* Sur fond sombre, les pains s'inversent pour rester lisibles. */
.vitrine.sur-sombre .vitrine-etal svg ellipse { fill: var(--farine); }
.vitrine.sur-sombre .vitrine-etal svg path { stroke: var(--croute); }
.vitrine.sur-sombre .vitrine-mot { color: #C0B4A4; }

@media (max-width: 760px) {
  .vitrine { bottom: var(--e2); right: var(--e2); }
  .vitrine-etal svg { width: 15px; height: 10px; }
  .vitrine-etal { gap: 4px; }
  .vitrine-mot { font-size: .68rem; }
}

/* ══ Sections ══════════════════════════════════════════════════════ */
.temps { padding: var(--e7) var(--marge); position: relative; }
.temps.serre { padding-block: var(--e5); }
.temps.four { background: var(--croute); color: var(--farine); }
.temps.four .cendre { color: #C0B4A4; }
.temps.mie { background: var(--mie); }

.dedans { max-width: 1560px; margin-inline: auto; width: 100%; }
.rang { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e3); }

/* L'heure de la fournée : marqueur de section, en haut à gauche du bloc. */
.heure {
  font-family: var(--display); font-weight: 700; font-size: var(--t-heure);
  letter-spacing: .14em; color: var(--braise);
  display: inline-flex; align-items: center; gap: var(--e2);
}
.heure::after { content: ""; width: clamp(32px, 6vw, 90px); height: 2px; background: var(--braise); }

/* ══ Typographie ═══════════════════════════════════════════════════ */
.enorme, .grand, .moyen {
  font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: -.03em;
}
.enorme { font-size: var(--t-enorme); }
.grand { font-size: var(--t-grand); }
.moyen { font-size: var(--t-moyen); }

.chapo { font-size: var(--t-chapo); line-height: 1.4; max-width: 30ch; }
.corps { max-width: 52ch; }
.corps + .corps { margin-top: var(--e3); }
.cendre { color: var(--cendre); }
.liste li { padding-left: 24px; text-indent: -24px; margin-top: var(--e2); }

.prix {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--braise); white-space: nowrap;
}

/* ══ Visuels ═══════════════════════════════════════════════════════ */
.vue { position: relative; overflow: hidden; display: block; }
.vue img { width: 100%; height: 100%; object-fit: cover; }
.vue-note {
  margin-top: var(--e2); font-family: var(--display); font-weight: 700;
  font-size: .84rem; letter-spacing: .04em; color: var(--cendre);
}

/* ══ Liens ═════════════════════════════════════════════════════════ */
.bouton {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  padding: 14px 26px; background: var(--braise); color: var(--farine);
  transition: background-color 240ms var(--courbe), gap 240ms var(--courbe);
}
.bouton::after { content: "→"; font-family: var(--texte); }
.bouton:hover { background: var(--croute); gap: var(--e3); }

.fil { position: relative; }
.fil::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; opacity: .35;
  transform: scaleX(1); transform-origin: right;
  transition: transform 260ms var(--courbe), background-color 260ms var(--courbe), opacity 260ms var(--courbe);
}
.fil:hover::after { background: var(--braise); opacity: 1; transform-origin: left; }

/* ══ Carte des pains ═══════════════════════════════════════════════ */
.pain { display: grid; gap: 6px; padding: var(--e3) 0; border-top: 1px solid var(--mie); }
.temps.four .pain { border-top-color: #5A3721; }
.pain-ligne { display: flex; align-items: baseline; gap: var(--e2); }
.pain-ligne h3 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; }
.pain-ligne .pointille { flex: 1; border-bottom: 1px dotted currentColor; opacity: .3; }

/* ══ Pied ══════════════════════════════════════════════════════════ */
.pied {
  background: var(--croute); color: var(--farine);
  padding: var(--e5) var(--marge); display: grid; gap: var(--e3);
}
.pied a:hover { color: var(--braise); }
.pied .petit { font-size: .9rem; color: #B7A996; }

/* ══ États fermés — JS actif ET mouvement autorisé ════════════════
   Aucun élément observé n'est masqué par clip-path : un élément clippé
   ne compte pas comme visible et ne se révélerait jamais. */
@media (prefers-reduced-motion: no-preference) {
  .js .leve { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--courbe), transform 700ms var(--courbe); }
  .js .leve.cuit { opacity: 1; transform: translateY(0); }

  /* SIGNATURE — « LA GRIGNE » : le visuel s'ouvre par une entaille en diagonale,
     comme la lame du boulanger sur la pâte. Une lame de braise court le long
     de la coupe pendant l'ouverture. 1 s, franc. */
  .js .vue > img {
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    transition: clip-path 1s var(--courbe);
  }
  .js .vue.cuit > img { clip-path: polygon(0 -30%, 130% 0, 100% 130%, -30% 100%); }
  .js .vue::after {
    content: ""; position: absolute; top: -20%; left: -30%; width: 160%; height: 3px;
    background: var(--braise); transform: rotate(38deg) translateY(0); transform-origin: left;
    opacity: 0; transition: transform 1s var(--courbe), opacity 260ms linear;
  }
  .js .vue.cuit::after { transform: rotate(38deg) translateY(150%); opacity: 1; transition: transform 1s var(--courbe), opacity 300ms linear .9s; }
  .js .vue.cuit::after { opacity: 0; }

  .js .vue:hover > img { transform: scale(1.02); transition: transform 700ms var(--courbe); }
}

@media (max-width: 900px) {
  .rang { grid-template-columns: repeat(4, 1fr); }
  .rang > * { grid-column: 1 / -1 !important; }
  .temps { padding-block: var(--e6); }
  .menu { gap: var(--e2); }
  .menu a { font-size: .8rem; }
}