/* Le Mistral Gagnant, site C : « Le tableau du jour ». Tokens de design.md. */

@font-face { font-family: "Alfa Slab One"; src: url("fonts/alfa-slab-one-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("fonts/zilla-slab-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("fonts/zilla-slab-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("fonts/yellowtail-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --carrelage: #ECEDEA;
  --bleu-mistral: #1D215B;
  --bleu-voile: #204B75;
  --rouge-enseigne: #D0303F;
  --pin: #B38D62;
  --pierre: #B4BAC3;
  --bleu-72: rgba(29, 33, 91, .72);
  --ombre-photo: 0 8px 24px rgba(29, 33, 91, .18);

  --f-titre: "Alfa Slab One", "Rockwell", serif;
  --f-texte: "Zilla Slab", "Rockwell", serif;
  --f-script: "Yellowtail", cursive;

  --t-etat: clamp(96px, calc(96px + 48 * (100vw - 390px) / 1050), 144px);
  --t-heure: clamp(32px, calc(32px + 8 * (100vw - 390px) / 1050), 40px);
  --t-h1: clamp(28px, calc(28px + 8 * (100vw - 390px) / 1050), 36px);
  --t-h2: 26px;
  --t-lead: clamp(19px, calc(19px + 3 * (100vw - 390px) / 1050), 22px);
  --t-body: clamp(17px, calc(17px + 1 * (100vw - 390px) / 1050), 18px);
  --t-small: clamp(14px, calc(14px + 1 * (100vw - 390px) / 1050), 15px);
  --t-grad: 13px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --gut: clamp(16px, calc(16px + 48 * (100vw - 390px) / 1050), 64px);
  --bande: clamp(72px, calc(72px + 40 * (100vw - 390px) / 1050), 112px);
  --contenu: 1200px;
  --barre: 56px;

  --r-1: 4px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-etat: 200ms;
  --d-base: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barre) + var(--s-4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--carrelage);
  color: var(--bleu-mistral);
  font-family: var(--f-texte);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--bleu-mistral); outline-offset: 2px; }
.sur-bleu :focus-visible { outline-color: var(--carrelage); }

.cadre { width: 100%; max-width: calc(var(--contenu) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.titre { font-family: var(--f-titre); font-weight: 400; letter-spacing: 0; }
h2 { font-family: var(--f-titre); font-weight: 400; font-size: var(--t-h2); line-height: 1.1; }
.petit { font-size: var(--t-small); font-weight: 600; line-height: 1.5; }
.lead { font-size: var(--t-lead); line-height: 1.45; }
.petit .lien, .tel { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* liens et boutons */
.lien {
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.lien-souligne { border-bottom: 2px solid var(--pierre); }
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--s-5);
  border-radius: var(--r-1);
  background: var(--bleu-mistral);
  color: var(--carrelage);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 18px;
  border: 2px solid var(--bleu-mistral);
  transition: background-color var(--d-etat) ease-out, color var(--d-etat) ease-out, transform var(--d-etat) ease-out;
}
.bouton:active { transform: translateY(1px); }
.bouton-contour { background: transparent; color: var(--bleu-mistral); }
.sur-bleu .bouton-contour { color: var(--carrelage); border-color: var(--carrelage); }
@media (hover: hover) and (pointer: fine) {
  .lien { transition: background-size 300ms ease-out; }
  .lien:hover { background-size: 100% 2px; }
  .bouton:hover { background: var(--carrelage); color: var(--bleu-mistral); }
  .bouton-contour:hover { background: var(--bleu-mistral); color: var(--carrelage); }
  .sur-bleu .bouton-contour:hover { background: var(--carrelage); color: var(--bleu-mistral); }
}

/* ---------- la barre ---------- */
.barre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--barre);
  background: var(--carrelage);
  border-bottom: 2px solid var(--pierre);
}
.barre .cadre { height: 100%; display: flex; align-items: center; gap: var(--s-4); }
.logotype { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; line-height: 1; }
.logotype .lm { font-family: var(--f-titre); font-size: 22px; color: var(--bleu-mistral); }
.logotype .gg { font-family: var(--f-script); font-size: 24px; color: var(--rouge-enseigne); }
.menu-bouton {
  margin-left: auto;
  min-height: 44px;
  padding: 0 var(--s-2);
  border: 0;
  background: none;
  color: var(--bleu-mistral);
  font: 600 17px/1 var(--f-texte);
  cursor: pointer;
  border-radius: var(--r-1);
}
.menu { display: none; }
.menu.ouvert {
  display: block;
  position: fixed;
  top: var(--barre);
  left: 0;
  right: 0;
  background: var(--carrelage);
  border-bottom: 2px solid var(--pierre);
  padding: var(--s-2) var(--gut) var(--s-6);
}
.menu.ouvert a { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--pierre); font-family: var(--f-titre); font-size: 22px; line-height: 1.2; }
@media (min-width: 1024px) {
  .menu-bouton { display: none; }
  .menu { display: flex; gap: var(--s-5); margin-left: auto; }
  .menu a { font-weight: 600; font-size: 17px; background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat; padding-bottom: 2px; transition: background-size 300ms ease-out; }
  .menu a:hover { background-size: 100% 2px; }
}
main { padding-top: var(--barre); }

/* ---------- 1. le tableau ---------- */
.tableau { display: grid; grid-template-areas: "texte" "photo"; }
.tableau-texte { grid-area: texte; padding-top: var(--s-4); }
.jour { font-weight: 600; font-size: 16px; line-height: 1.5; }
.etat { font-family: var(--f-titre); font-size: var(--t-etat); line-height: .95; margin-top: var(--s-1); letter-spacing: -.01em; }
.etat-sous { font-family: var(--f-titre); font-size: var(--t-heure); line-height: 1.1; margin-top: var(--s-2); font-variant-numeric: tabular-nums; }

/* la règle du jour */
.regle-jour { position: relative; height: 92px; margin-top: var(--s-5); }
.regle-jour .fond { position: absolute; left: 0; right: 0; top: 40px; height: 2px; background: var(--pierre); }
.regle-jour .trait {
  position: absolute; left: 0; top: 39px; height: 4px; width: calc(var(--f, 0) * 100%);
  background: var(--rouge-enseigne); border-radius: 2px; transform-origin: left center;
}
.regle-jour .grads { position: absolute; left: 0; right: 0; top: 34px; height: 14px; }
.regle-jour .grad { position: absolute; top: 0; font-style: normal; width: 2px; height: 14px; background: var(--pierre); transform: translateX(-1px); }
.regle-jour .grad span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: var(--t-grad); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--bleu-72); font-variant-numeric: tabular-nums; }
.regle-jour .grad:first-child span { left: 0; transform: none; }
.regle-jour .grad:last-child span { left: auto; right: 0; transform: none; }
.regle-jour .point { position: absolute; top: 35px; left: calc(var(--f, 0) * 100%); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--rouge-enseigne); }
.regle-jour .etiq { position: absolute; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.regle-jour .etiq-haut { top: 12px; }
.regle-jour .etiq-bas { top: 74px; color: var(--bleu-72); }
.regle-jour.ferme .grads span { visibility: hidden; }
.regle-jour.ferme .grad:first-child span, .regle-jour.ferme .grad:last-child span { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .js .regle-jour .trait { animation: tracer 1100ms var(--ease) 200ms both; }
  .js .regle-jour .point, .js .regle-jour .etiq { animation: poser 200ms var(--ease) 1300ms both; }
}
@keyframes tracer { from { width: 0; } }
@keyframes poser { from { opacity: 0; } }

.tableau h1 { font-family: var(--f-titre); font-weight: 400; font-size: var(--t-h1); line-height: 1.1; margin-top: var(--s-5); max-width: 14em; }
.adresse-ligne { font-size: 16px; line-height: 1.5; margin-top: var(--s-2); }
.tableau .bouton { display: flex; width: 100%; margin-top: var(--s-4); }
.tableau-photo { grid-area: photo; margin: var(--s-5) calc(-1 * var(--gut)) 0; overflow: hidden; }
.tableau-photo img { width: calc(100% + 24px); max-width: none; margin-left: -24px; aspect-ratio: 16 / 9; min-height: 180px; object-fit: cover; object-position: 30% 50%; transform: translateX(24px); }
@media (prefers-reduced-motion: no-preference) {
  .js .tableau-photo img { animation: vent 1300ms var(--ease) 0ms both; }
}
@keyframes vent { from { transform: translateX(0); } to { transform: translateX(24px); } }
.tableau-photo .large { display: none; }

@media (min-width: 1024px) {
  .tableau {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "texte photo";
    column-gap: var(--s-8);
    min-height: calc(100vh - var(--barre));
  }
  .tableau-texte { align-self: center; padding-block: var(--s-7); }
  .tableau .bouton { display: inline-flex; width: auto; min-width: 280px; }
  .tableau-photo { margin: 0 calc(-1 * max(var(--gut), (100vw - var(--contenu)) / 2)) 0 0; position: relative; }
  .tableau-photo .etroit { display: none; }
  .tableau-photo .large { display: block; position: absolute; inset: 0; width: calc(100% + 24px); height: 100%; aspect-ratio: auto; min-height: 0; object-position: 20% 50%; }
}

/* ---------- 2. toute la semaine ---------- */
.semaine-bande { position: relative; isolation: isolate; padding-block: var(--s-7) var(--bande); }
.semaine-bande::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("img/texture-13.jpg") center / 800px auto repeat;
  opacity: .08; pointer-events: none;
}
.semaine { border-top: 2px solid var(--pierre); }
.semaine li {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr) 6.6em;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) 0 var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--pierre);
  font-variant-numeric: tabular-nums;
}
.semaine .nom { font-weight: 400; }
.semaine .barre-jour { position: relative; height: 8px; }
.semaine .barre-jour::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: var(--pierre); }
.semaine .plage { position: absolute; font-style: normal; top: 0; height: 8px; border-radius: 4px; background: var(--bleu-mistral); }
.semaine .heures { font-weight: 600; text-align: right; white-space: nowrap; }
.semaine .heures span + span::before { content: ", "; }
.semaine .aujourdhui { box-shadow: inset 4px 0 0 var(--rouge-enseigne); }
.semaine .aujourdhui .nom { font-weight: 600; }
.semaine .aujourdhui .plage { background: var(--rouge-enseigne); }
.echelle { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 6.6em; gap: var(--s-3); padding-left: var(--s-3); margin-top: var(--s-2); }
.echelle .graduations { position: relative; height: 16px; font-size: var(--t-grad); font-weight: 600; color: var(--bleu-72); }
.echelle .graduations span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.echelle .graduations span:first-child { transform: none; }
.echelle .graduations span:last-child { transform: translateX(-100%); }
.a-confirmer { margin-top: var(--s-4); font-size: 14px; line-height: 1.5; color: var(--bleu-72); }
@media (min-width: 1024px) {
  .semaine-bande .cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); }
  .semaine-bloc { grid-column: 1 / 2; }
  .semaine-note { grid-column: 2 / 3; align-self: end; max-width: 26rem; }
}

/* la marque de section : la règle en 120 px */
.marque { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.marque-regle { position: relative; width: 120px; height: 12px; flex: none; }
.marque-regle::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--pierre); }
.marque-regle i { position: absolute; font-style: normal; top: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--bleu-mistral); }
.marque-regle b { position: absolute; top: 3px; height: 6px; border-radius: 3px; background: var(--bleu-mistral); }
.marque-regle i.maintenant { background: var(--rouge-enseigne); }
.marque-heure { font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sur-bleu .marque-regle i, .sur-bleu .marque-regle b { background: var(--carrelage); }

/* ---------- 3. au comptoir ---------- */
.comptoir { padding-block: var(--bande); border-top: 2px solid var(--pierre); }
.comptoir .grille { display: grid; gap: var(--s-6); }
.boissons { margin-top: var(--s-5); }
.boissons li { display: grid; grid-template-columns: 8.2em minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--pierre); align-items: baseline; }
.boissons li:last-child { border-bottom: 1px solid var(--pierre); }
.boissons .mot { font-family: var(--f-titre); font-size: 26px; line-height: 1.1; }
.boissons p { max-width: 30rem; }
.comptoir .lien-carte { display: inline-block; margin-top: var(--s-5); font-size: 18px; }
.comptoir .photo-demi { width: 50%; margin-left: auto; margin-top: -48px; }
.comptoir .photo-demi img { border-radius: var(--r-1); width: 100%; }
@media (max-width: 1023px) {
  .comptoir .photo-demi { margin-top: 0; }
  .comptoir .grille { grid-template-areas: "texte" "photo"; }
}
@media (min-width: 1024px) {
  .comptoir .grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: start; }
  .comptoir .photo-demi { width: 100%; max-width: 480px; margin-top: -48px; }
}

/* ---------- 4. la journée ---------- */
.journee { padding-block: var(--s-8) var(--bande); }
.bande-photos {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--s-2) var(--gut) var(--s-5);
  scroll-padding-inline: var(--gut);
  scrollbar-width: thin;
  margin-top: var(--s-4);
}
.bande-photos li { flex: 0 0 72vw; max-width: 380px; scroll-snap-align: start; position: relative; }
.bande-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-1); transition: transform var(--d-etat) var(--ease), box-shadow var(--d-etat) var(--ease); }
.bande-photos .heure {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  padding: 2px var(--s-2) 4px;
  border-radius: var(--r-1);
  background: var(--bleu-mistral);
  color: var(--carrelage);
  font-family: var(--f-titre);
  font-size: 32px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bande-photos li:last-child { margin-right: var(--gut); }
@media (hover: hover) and (pointer: fine) {
  .bande-photos li:hover img { transform: translateY(-3px); box-shadow: var(--ombre-photo); }
}
@media (min-width: 1024px) {
  .bande-photos { padding-inline: max(var(--gut), (100vw - var(--contenu)) / 2); scroll-padding-inline: max(var(--gut), (100vw - var(--contenu)) / 2); }
  .bande-photos li { flex-basis: 300px; }
}

/* ---------- 5. le lieu ---------- */
.bleu { position: relative; isolation: isolate; background: var(--bleu-mistral); color: var(--carrelage); }
.bleu::before, .bleu::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--carrelage); pointer-events: none; }
.bleu::before { top: 6px; }
.bleu::after { bottom: 6px; }
.bleu .lumiere { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(236, 237, 234, .10), transparent 70%); pointer-events: none; }
.lieu { padding-block: var(--bande); }
.lieu .grille { display: grid; gap: var(--s-6); }
.lieu .carres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.lieu .carres img { border-radius: var(--r-1); width: 100%; aspect-ratio: 1; object-fit: cover; }
.lieu .texte p { max-width: 34rem; }
.lieu .texte p + p { margin-top: var(--s-4); }
.lieu .liens { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); align-items: center; }
.lieu .lien-souligne { border-bottom-color: var(--pierre); }
.sur-bleu .petit-gris { color: var(--pierre); }
@media (min-width: 1024px) {
  .lieu .grille { grid-template-columns: 7fr 5fr; column-gap: var(--s-8); align-items: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .lieu .carres img { transform: translateX(-24px); opacity: 0; transition: transform var(--d-base) var(--ease), opacity var(--d-base) var(--ease); }
  .js .lieu .carres.is-in img { transform: none; opacity: 1; }
  .js .lieu .carres.is-in img:nth-child(2) { transition-delay: 80ms; }
}

/* ---------- 6. nous trouver ---------- */
.trouver { padding-block: var(--bande); }
.trouver .grille { display: grid; gap: var(--s-6); }
.trouver address { font-style: normal; font-family: var(--f-titre); font-size: var(--t-heure); line-height: 1.15; margin-top: var(--s-4); }
.trouver .quartier { margin-top: var(--s-2); }
.trouver .tel { display: inline-block; font-family: var(--f-titre); font-size: var(--t-heure); line-height: 1.1; font-variant-numeric: tabular-nums; border-bottom: 3px solid var(--bleu-mistral); }
.trouver dl { display: grid; gap: var(--s-4); }
.trouver dt { font-size: 14px; font-weight: 600; color: var(--bleu-72); }
.trouver dd { margin-top: 2px; }
.trouver .bouton { margin-top: var(--s-6); width: 100%; }
@media (min-width: 1024px) {
  .trouver .grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: end; }
  .trouver .bouton { width: auto; min-width: 280px; }
}

/* ---------- pied de page ---------- */
.pied { padding-block: var(--s-8) var(--s-7); }
.pied .signature { display: flex; align-items: center; gap: var(--s-4); }
.pied .signature img { width: 56px; height: auto; }
.pied .logotype .lm { color: var(--carrelage); font-size: 26px; }
.pied .logotype .gg { font-size: 30px; }
.pied .colonnes { display: grid; gap: var(--s-4); margin-top: var(--s-6); font-size: 16px; }
.pied .colonnes span { display: block; color: var(--pierre); font-size: 14px; font-weight: 600; }
.pied .legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid rgba(180, 186, 195, .5); font-size: 14px; font-weight: 600; color: var(--pierre); }
@media (min-width: 1024px) { .pied .colonnes { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--s-8); } }

/* ---------- le lieu, la page ---------- */
.lieu-tete { padding-block: var(--s-6) var(--s-5); }
.lieu-tete h1 { font-family: var(--f-titre); font-weight: 400; font-size: var(--t-h1); line-height: 1.1; max-width: 16em; }
.lieu-tete p { margin-top: var(--s-3); max-width: 33rem; }
.lieu-hero img { width: 100%; object-fit: cover; }
.lieu-hero .large { display: none; }
@media (min-width: 1024px) {
  .lieu-hero .etroit { display: none; }
  .lieu-hero .large { display: block; max-height: 80vh; }
}
.page-lieu .bloc { padding-block: var(--bande); }
.page-lieu .deux { display: grid; gap: var(--s-6); }
.page-lieu .deux img { border-radius: var(--r-1); width: 100%; }
.page-lieu blockquote p { font-family: var(--f-titre); font-size: clamp(24px, calc(24px + 8 * (100vw - 390px) / 1050), 32px); line-height: 1.2; max-width: 30em; }
.page-lieu blockquote cite { display: block; margin-top: var(--s-4); font-style: normal; font-size: 14px; font-weight: 600; color: var(--pierre); }
.page-lieu .texte p + p { margin-top: var(--s-4); }
.page-lieu .texte p { max-width: 33rem; }
@media (min-width: 1024px) {
  .page-lieu .deux { grid-template-columns: 5fr 7fr; column-gap: var(--s-8); align-items: center; }
  .page-lieu .deux.inverse { grid-template-columns: 7fr 5fr; }
}

/* ---------- ce qui répond au défilement ---------- */
.js .reveal:not(.carres) > * { opacity: 0; transform: translateY(28px); }
.reveal.is-in:not(.carres) > * { opacity: 1; transform: none; transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal > * { transform: none; }
  .js .lieu .carres img { transform: none; }
  .reveal.is-in > *, .js .lieu .carres.is-in img { transition: opacity 200ms var(--ease); transition-delay: 0ms; }
  .tableau-photo img { animation: none; }
}

/* captures : tout à l'état final */
.cliche *, .cliche *::before, .cliche *::after { transition: none !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }