/* Nonante Centimes — l'accueil est un ticket de caisse entre deux étals ; les articles, des tickets plus longs */
@font-face { font-family: "Martian Mono"; src: url("polices/martianmono-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 112.5%; font-display: swap; }
@font-face { font-family: "Anton"; src: url("polices/anton-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("polices/instrumentsans-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("polices/instrumentsans-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --carotte: #f26a1b;
  --carotte-fonce: #b9470a;
  --poireau: #3b7a3e;
  --poireau-fonce: #2b5c2e;
  --poireau-pale: #e6f0e1;
  --encre: #232327;
  --ticket: #ffffff;
  --gris-ticket: #66666e;
  --ardoise: #20262b;
  --surligne: #fff1b8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--poireau-pale); color: var(--encre); font: 400 17px/1.6 "Instrument Sans", sans-serif; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--poireau-fonce); }
a:focus-visible { outline: 3px solid var(--carotte); outline-offset: 2px; }
.cadre { width: min(1220px, 100% - 32px); margin-inline: auto; }
.saut { position: absolute; left: 8px; top: -60px; background: #fff; padding: 8px 12px; z-index: 5; }
.saut:focus { top: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Enseigne */
.enseigne { background: var(--carotte); color: var(--encre); }
.enseigne .cadre { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 30px; align-items: center; padding: 16px 0; }
.nom { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); }
.prix-nom { font: 400 50px/1 "Anton", sans-serif; background: #fff; padding: 6px 12px 4px; border-radius: 4px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--encre); }
.nom-txt { font: 400 30px/.95 "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.devise { margin: 0; font-weight: 600; max-width: 420px; }
.enseigne nav { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; }
.enseigne nav a { color: var(--encre); font: 600 13px "Martian Mono", monospace; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--encre); }
.enseigne nav a[aria-current] { background: #fff; padding: 0 4px; }

/* Étals + ticket (accueil) */
.etal-et-ticket { display: grid; grid-template-columns: 1fr 440px 1fr; gap: 28px; align-items: start; padding: 44px 0 60px; }
.etal { display: grid; gap: 18px; }
.etal-g { margin-top: 70px; }
.etal-d { margin-top: 20px; }
.cagette { position: relative; margin: 0; }
.cagette img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; border: 6px solid #fff; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); }
.etal-d .cagette:nth-child(2) img { aspect-ratio: 4 / 3; }
.ardoise { position: absolute; left: -8px; bottom: 14px; background: var(--ardoise); color: #fff; padding: 6px 12px 7px; font: 400 21px/1 "Anton", sans-serif; text-transform: uppercase; letter-spacing: .03em; transform: rotate(-2deg); }
.ardoise b { display: block; font: 400 11px "Martian Mono", monospace; text-transform: none; letter-spacing: 0; opacity: .85; margin-top: 3px; }
.etal-d .ardoise { left: auto; right: -8px; transform: rotate(2deg); }

.ticket { position: relative; background: var(--ticket); font: 400 13.5px/1.55 "Martian Mono", monospace; font-stretch: 87.5%; padding: 34px 28px 30px; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .55);
  --dent: radial-gradient(circle at 8px -2px, transparent 7px, var(--ticket) 8px); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--dent); background-size: 16px 10px; }
.ticket::before { top: -9px; transform: rotate(180deg); }
.ticket::after { bottom: -9px; }
.ticket-titre { font: 400 34px/1 "Anton", sans-serif; text-transform: uppercase; text-align: center; margin: 0 0 6px; letter-spacing: .02em; }
.ticket-centre { text-align: center; margin: 0; }
.petit { font-size: 11px; color: var(--gris-ticket); }
.ticket hr { border: 0; border-top: 2px dashed #b9b9c0; margin: 14px 0; }
.ticket hr.double { border-top: 4px double #b9b9c0; }
.lignes { list-style: none; margin: 0; padding: 0; }
.lignes li { padding: 4px 0 6px; }
.lignes a { display: flex; gap: 6px; align-items: baseline; color: var(--encre); text-decoration: none; }
.lignes a span { flex: 0 1 auto; }
.lignes a::after { content: ""; flex: 1 1 20px; border-bottom: 2px dotted #c9c9cf; order: 1; transform: translateY(-4px); }
.lignes a b { order: 2; font-weight: 700; }
.lignes small { display: block; font-size: 11.5px; color: var(--poireau-fonce); padding-left: 10px; }
.lignes a:hover span, .lignes a:focus-visible span { background: var(--surligne); }
.total { display: flex; justify-content: space-between; margin: 0; font-size: 18px; font-weight: 700; }
.total.sous { font-size: 14px; font-weight: 400; }
.rendu a { color: var(--encre); }
.rendu { margin: 0 0 12px; font-size: 12.5px; }
.merci { font-weight: 700; letter-spacing: .2em; margin-bottom: 12px; }
.code-barres { height: 54px; margin: 0 auto 8px; width: 80%;
  background: repeating-linear-gradient(90deg, var(--encre) 0 2px, transparent 2px 4px, var(--encre) 4px 5px, transparent 5px 8px, var(--encre) 8px 11px, transparent 11px 12px, var(--encre) 12px 13px, transparent 13px 17px); }

/* Habitudes */
.habitudes { background: var(--ardoise); color: #fff; padding: 56px 0 60px; }
.habitudes h2, .semaine h2, .encadres h2 { font: 400 clamp(30px, 3.6vw, 44px)/1.05 "Anton", sans-serif; text-transform: uppercase; margin: 0 0 26px; letter-spacing: .01em; }
.habitudes .chapeau { max-width: 760px; margin: -10px 0 26px; color: #d9dde0; }
.habitudes ol { list-style: none; counter-reset: h; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; }
.habitudes li { counter-increment: h; position: relative; padding: 14px 0 16px 76px; border-top: 1px solid rgba(255, 255, 255, .2); }
.habitudes li::before { content: counter(h); position: absolute; left: 0; top: 6px; font: 400 58px/1 "Anton", sans-serif; color: var(--carotte); }
.habitudes b { color: #fff; }
.habitudes a { color: #ffd2b5; }

/* Frise des trois repas */
.semaine { padding: 64px 0 40px; }
.frise { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.frise::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; border-top: 3px dotted var(--poireau); }
.etape { position: relative; }
.etape:nth-child(2) { margin-top: 60px; }
.etape:nth-child(3) { margin-top: 120px; }
.jour { position: relative; display: inline-block; margin: 0 0 14px; background: var(--poireau); color: #fff; font: 700 12px "Martian Mono", monospace; text-transform: uppercase; padding: 5px 10px; }
.etape img { width: 72%; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid #fff; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); }
.etape:nth-child(2) img { margin-left: auto; }
.etape h3 { font-size: 21px; line-height: 1.2; margin: 14px 0 6px; }
.etape h3 a { color: var(--encre); }
.etape p { margin: 0; }

/* Encadrés de l'accueil */
.encadres { display: grid; grid-template-columns: 1fr 1.4fr; gap: 34px; align-items: start; padding: 40px 0 70px; }
.encadres > div { background: #fff; border: 3px solid var(--encre); padding: 26px 28px; }
.encadres .aines { box-shadow: 8px 8px 0 var(--carotte); }
.encadres .mots { box-shadow: -8px 8px 0 var(--poireau); transform: rotate(-1deg); margin-top: 30px; }
.encadres h2 { font-size: 30px; margin-bottom: 10px; }
.mots ul { list-style: none; margin: 0 0 14px; padding: 0; font: 400 13px/1.5 "Martian Mono", monospace; }
.mots li { display: flex; gap: 8px; border-bottom: 2px dashed #d0d0d6; padding: 6px 0; }
.mots li b { min-width: 9.5em; }
.fleche { font: 700 14px "Martian Mono", monospace; text-transform: uppercase; color: var(--encre); }
.fleche::after { content: " →"; }

/* Pied */
.pied { background: var(--carotte); padding: 34px 0 40px; }
.pied .cadre { display: grid; grid-template-columns: 1fr 2fr; gap: 20px 50px; }
.pied-nom { font: 400 28px "Anton", sans-serif; text-transform: uppercase; margin: 0; }
.pied p { margin: 4px 0 12px; }
.pied h2 { font: 700 13px "Martian Mono", monospace; text-transform: uppercase; margin: 6px 0 10px; }
.pied ul { columns: 2 260px; gap: 30px; margin: 0; padding: 0; list-style: none; }
.pied li { break-inside: avoid; padding: 2px 0; }
.pied a { color: var(--encre); font-weight: 600; }
.pied .bas { grid-column: 1 / -1; border-top: 2px dashed rgba(35, 35, 39, .45); padding-top: 12px; margin: 0; font-size: 15px; }

/* Article */
.article { width: min(820px, 100% - 32px); margin: 40px auto 30px; background: #fff; padding: 40px 48px 36px; box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .5); position: relative; }
.article::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 8px -2px, transparent 7px, #fff 8px); background-size: 16px 10px; }
.fil { font: 400 12px "Martian Mono", monospace; color: var(--gris-ticket); margin: 0 0 14px; }
.fil a { color: var(--gris-ticket); }
.surtitre { display: inline-block; background: var(--poireau); color: #fff; font: 700 12px "Martian Mono", monospace; text-transform: uppercase; padding: 5px 10px; margin: 0; }
.article h1 { font: 400 clamp(32px, 4.6vw, 50px)/1.04 "Anton", sans-serif; text-transform: uppercase; margin: 14px 0 18px; letter-spacing: .005em; }
.article h2 { font: 400 26px/1.12 "Anton", sans-serif; text-transform: uppercase; margin: 36px 0 10px; scroll-margin-top: 20px; }
.article h3 { font-size: 19px; margin: 24px 0 6px; }
.article .intro { font-size: 19px; font-weight: 500; }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin: 4px 0; }
.article li::marker { color: var(--carotte-fonce); font-weight: 700; }

.mini-ticket { border: 2px dashed #b9b9c0; padding: 14px 18px 12px; margin: 26px 0 8px; font: 400 13px/1.5 "Martian Mono", monospace; font-stretch: 87.5%; }
.mini-ticket p { margin: 0 0 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.mini-ticket ol { list-style: none; counter-reset: q; margin: 0; padding: 0; }
.mini-ticket li { counter-increment: q; margin: 0; }
.mini-ticket a { display: flex; gap: 8px; color: var(--encre); text-decoration: none; padding: 2px 0; }
.mini-ticket a::before { content: counter(q) "x"; color: var(--carotte-fonce); font-weight: 700; min-width: 2em; }
.mini-ticket a:hover span { background: var(--surligne); }

.article figure { margin: 30px -48px; position: relative; clear: both; }
.article figure img { width: 100%; max-height: 540px; object-fit: cover; }
.article figcaption { position: absolute; left: 22px; bottom: -14px; max-width: calc(100% - 44px); background: var(--ardoise); color: #fff; font: 400 12px/1.4 "Martian Mono", monospace; padding: 6px 10px; transform: rotate(-1.2deg); }
.article figure.g { float: right; clear: none; width: 46%; margin: 8px -76px 24px 26px; transform: rotate(1.6deg); }
.article figure.g img { border: 7px solid #fff; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .6); max-height: 460px; }
.article figure.g figcaption { position: static; transform: none; margin-top: 4px; max-width: none; background: none; color: var(--gris-ticket); padding: 0 4px; }
.tab { overflow-x: auto; margin: 20px 0; clear: both; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article th, .article td { border-bottom: 2px dashed #d0d0d6; padding: 8px 6px; text-align: left; vertical-align: top; }
.article th { font: 700 12px "Martian Mono", monospace; text-transform: uppercase; }
.article blockquote { clear: both; margin: 26px 0; padding: 16px 20px; background: var(--poireau-pale); border-left: 6px solid var(--poireau); }
.article blockquote p { margin: 0; }
.voir { font-weight: 600; }
.sources { clear: both; margin-top: 34px; border-top: 4px double #c9c9cf; padding-top: 12px; font-size: 14px; color: var(--gris-ticket); }
.sources p { margin: 0 0 4px; font: 700 12px "Martian Mono", monospace; text-transform: uppercase; color: var(--encre); }
.sources ul { margin: 0; padding-left: 1.2em; }
.sources a { color: var(--gris-ticket); }
.etiquette-avis { clear: both; border: 2px solid var(--encre); padding: 12px 16px; font-size: 15px; margin-top: 26px; }

.suite { width: min(820px, 100% - 32px); margin: 0 auto 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.suite a { display: block; background: var(--ardoise); color: #fff; text-decoration: none; padding: 14px 18px; font-weight: 600; line-height: 1.3; }
.suite a small { display: block; font: 400 11px "Martian Mono", monospace; text-transform: uppercase; color: #ffd2b5; margin-bottom: 4px; }
.suite a.d { text-align: right; }
.suite a:hover { background: var(--poireau-fonce); }

/* Lexique : l'ardoise du marché */
.page-lexique-romand .tab { background: var(--ardoise); padding: 10px 18px 14px; border-radius: 4px; }
.page-lexique-romand .article table { color: #fff; font-size: 15.5px; }
.page-lexique-romand .article th { color: #ffd2b5; border-bottom-color: rgba(255, 255, 255, .3); }
.page-lexique-romand .article td { border-bottom-color: rgba(255, 255, 255, .22); }
.page-lexique-romand .article td:first-child { font: 400 19px/1.2 "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; color: #fff; }

.liste-404 { columns: 2 240px; gap: 30px; }

@media (max-width: 1080px) {
  .etal-et-ticket { grid-template-columns: 1fr 1fr; }
  .ticket { grid-column: 1 / -1; grid-row: 1; max-width: 460px; width: 100%; margin: 0 auto; }
  .etal-g, .etal-d { margin-top: 0; }
  .article figure.g { margin-right: 0; }
}
@media (max-width: 860px) {
  .encadres { grid-template-columns: 1fr; }
  .encadres .mots { margin-top: 0; transform: none; }
  .pied .cadre { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .enseigne .cadre { grid-template-columns: 1fr; }
  .enseigne nav { justify-content: flex-start; }
  .ticket { padding: 30px 16px 26px; font-size: 12.5px; }
  .etal-et-ticket { gap: 16px; }
  .ardoise { font-size: 16px; }
  .frise { grid-template-columns: 1fr; }
  .frise::before { left: 13px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 3px dotted var(--poireau); }
  .etape { margin-top: 0 !important; padding-left: 34px; }
  .etape img { width: 100%; }
  .habitudes li { padding-left: 60px; }
  .habitudes li::before { font-size: 46px; }
  .article { padding: 30px 18px 28px; }
  .article figure { margin: 26px -18px 34px; }
  .article figure.g { float: none; width: auto; margin: 26px 0 30px; transform: none; }
  .article figcaption { left: 12px; max-width: calc(100% - 24px); }
  .article table { font-size: 13.5px; }
  .page-lexique-romand .article td:first-child { white-space: normal; font-size: 16px; }
  .suite { grid-template-columns: 1fr; }
  .suite a.d { text-align: left; }
  .mots li { flex-direction: column; gap: 0; }
}