/*
 * Bistrot Mirabelle — démonstration ghibon (restaurant imaginaire).
 *
 * Parti pris : le menu de bistrot d'autrefois, tapé à la machine et tiré au
 * duplicateur à alcool — encre violette sur papier de couleur, ratures et
 * annotations au feutre rouge. Deux encres seulement (violet, rouge) plus un
 * coup de surligneur jaune : c'est aussi ce qu'on imprimerait pour de vrai.
 *
 * Une seule page, aucun script, aucune image : ~110 Ko avec les polices,
 * auto-hébergées (pas d'appel à Google). Special Elite et Caveat Brush :
 * Apache 2.0 / SIL OFL.
 */

@font-face {
  font-family: 'Special Elite';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/SpecialElite-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/CaveatBrush-latin.woff2) format('woff2');
}

:root {
  --papier:  #f3d6cb;   /* papier rose du duplicateur */
  --papier-2:#e9c3b5;   /* le pli, l'ombre */
  --encre:   #38288a;   /* violet d'alcool */
  --encre-2: #56489a;   /* la même, moins chargée */
  --tampon:  #c73a2e;   /* feutre et tampon rouges */
  --surligneur: #f5c93c;

  --machine: 'Special Elite', 'American Typewriter', 'Courier New', Courier, monospace;
  --feutre:  'Caveat Brush', 'Segoe Print', 'Bradley Hand', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--papier);
  /* Le grain du papier, en SVG minuscule. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .3 .35 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--encre);
  font: 1.0625rem/1.6 var(--machine);
  /* Encre de duplicateur : un léger bavement autour des lettres. */
  text-shadow: 0 0 .5px var(--encre), 0 0 2.2px rgba(56, 40, 138, .28);
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tampon); outline-offset: 3px; }
p, ul, h1, h2, h3, address { margin: 0; }
ul { list-style: none; padding: 0; }
h1, h2 { font-family: var(--feutre); font-weight: 400; line-height: .95; }

.page {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

/* ------------------------------------------------- Le coin gauche : l'en-tête */
.coin { position: sticky; top: 2rem; display: grid; gap: 1.6rem; }
.marque { display: block; text-decoration: none; }
.marque svg { width: 3.4rem; height: 3.4rem; margin-bottom: .2rem; overflow: visible; }
.marque h1 {
  font-size: clamp(3.6rem, 8vw, 5.2rem);
  transform: rotate(-3deg); transform-origin: left bottom;
  letter-spacing: .005em;
}
.marque h1 span { display: block; }
.marque h1 span + span { margin-left: .5em; }
.devise { max-width: 17rem; color: var(--encre-2); text-wrap: balance; }

.adresse { font-style: normal; }
.adresse strong { display: block; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }

.horaires { display: grid; gap: .45rem; font-size: .95rem; }
.horaires li { display: flex; align-items: baseline; gap: .5rem; }
.horaires span:first-child { flex: none; }
.horaires i { flex: 1; min-width: .8rem; border-bottom: 2px dotted currentColor; opacity: .55; transform: translateY(-.25em); }
.horaires span:last-child { text-align: right; }

.tel { position: relative; padding-top: 1.7rem; }
.tel a { display: inline-block; font-size: 1.5rem; letter-spacing: .02em; text-decoration: none; border-bottom: 3px solid var(--encre); line-height: 1.25; }
.tel a:hover { background: var(--surligneur); }
.note {
  font-family: var(--feutre); color: var(--tampon); text-shadow: none;
  font-size: 1.55rem; line-height: 1; transform: rotate(-4deg); display: inline-block;
}
.tel .note { position: absolute; top: 0; left: 1.6rem; }

.tampon {
  justify-self: start; margin-top: .4rem;
  font-family: var(--machine); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  color: var(--tampon); text-shadow: none;
  border: 3px double var(--tampon); border-radius: .35rem;
  padding: .5rem .9rem .4rem; transform: rotate(4deg); opacity: .88;
}

/* ------------------------------------------------------ La feuille de menu */
.menu { position: relative; display: grid; gap: clamp(2rem, 4vw, 3rem); padding-top: .5rem; }
.menu__entete { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .3rem 1.5rem;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2);
  padding-bottom: .7rem; border-bottom: 2px dashed var(--encre-2); }

.formule { border: 4px double var(--encre); padding: 1.3rem 1.5rem 1.4rem; display: grid; gap: .9rem; }
.formule__haut { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; }
.formule h2 { font-size: clamp(2.2rem, 4.4vw, 3rem); }
.prix-fort { font-family: var(--feutre); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; padding: 0 .35em; margin-right: -.35em;
  background: linear-gradient(transparent 14%, var(--surligneur) 14% 90%, transparent 90%);
  background-blend-mode: multiply; transform: rotate(-1.5deg); text-shadow: none; }
.formule ul { display: grid; gap: .3rem; }
.formule li { display: flex; align-items: baseline; gap: .5rem; }
.formule li i { flex: 1; min-width: .8rem; border-bottom: 2px dotted currentColor; opacity: .55; transform: translateY(-.25em); }
.formule small { display: block; color: var(--encre-2); font-size: .88rem; }

.rubrique h2 { font-size: clamp(2.3rem, 4.4vw, 3rem); margin-bottom: 1.6rem; position: relative; display: inline-block; }
.rubrique h2::after {
  content: ''; position: absolute; left: -.1em; right: -.2em; bottom: -.28em; height: .32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C50 3 90 11 140 6s96 4 156 1' fill='none' stroke='%2338288a' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.plats { display: grid; gap: 1.25rem; }
.plat { position: relative; }
.plat__ligne { display: flex; align-items: baseline; gap: .5rem; }
.plat__nom { flex: none; max-width: 100%; }
.plat__points { flex: 1; min-width: 1rem; border-bottom: 2px dotted currentColor; opacity: .55; transform: translateY(-.25em); }
.plat__prix { flex: none; font-variant-numeric: tabular-nums; }
.plat__desc { margin-top: .15rem; font-size: .92rem; color: var(--encre-2); max-width: 32rem; }

.plat--fini .plat__nom, .plat--fini .plat__prix, .plat--fini .plat__desc { text-decoration: line-through; text-decoration-color: var(--tampon); text-decoration-thickness: 3px; }
.plat--fini .plat__nom, .plat--fini .plat__prix { opacity: .7; }
.plat .note { position: absolute; right: .2rem; top: 2.05rem; font-size: 1.6rem; white-space: nowrap; }

.mentions { display: grid; gap: .5rem; font-size: .82rem; line-height: 1.55; color: var(--encre-2);
  border-top: 2px dashed var(--encre-2); padding-top: 1.1rem; }

.demo { grid-column: 1 / -1; font-size: .8rem; color: var(--encre-2); border-top: 2px dashed var(--encre-2); padding-top: 1rem; max-width: 46rem; }

/* --------------------------------------------------------- Petits écrans */
@media (max-width: 860px) {
  .page { grid-template-columns: 1fr; }
  .coin { position: static; }
  .marque h1 { font-size: clamp(3.4rem, 17vw, 4.8rem); }
  .plat .note { position: static; display: block; margin-top: .2rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }